import React$1, { Key, ReactNode, PropsWithChildren } from 'react'; import { ComponentInstance, RootComponentInstance, UpdateCompositionMessage, getParameterAttributes as getParameterAttributes$1, UpdateContextualEditingStateInternalMessage } from '@uniformdev/canvas'; export { GetParameterAttributesProps, createUniformApiEnhancer } from '@uniformdev/canvas'; import { a as PureUniformTextProps } from './PureUniformText-CzdaUBnC.js'; import { CompositionMetadata } from '@uniformdev/context'; import { RichTextNode } from '@uniformdev/richtext'; export { linkParamValueToAnchorProps } from '@uniformdev/richtext'; /** * Props passed to a Canvas component implementation. * TProps is the Canvas component's parameters object after * all enhancers have been applied. */ type ComponentProps = TProps & { component: ComponentInstance | RootComponentInstance; }; /** * Function that maps a Canvas component instance to its React component to render it. * The resolver would commonly inspect the `type` and possibly `variant` of the component to decide. */ type RenderComponentResolver = (component: ComponentInstance) => React.ComponentType> | null; /** Function that renders Canvas system internals */ type SystemRenderFunction = (component: ComponentInstance, key: Key, renderChild: (component: ComponentInstance, key: Key) => ReactNode | null) => ReactNode | null; /** Configures rendering of system components (tests, pz) */ type SystemRenderConfig = { test: SystemRenderFunction; personalization: SystemRenderFunction; }; type ComponentStore = { register: (options: { type: string; variantId?: string; component: React.ComponentType>; }) => void; get: (type: string, variantId?: string) => React.ComponentType> | undefined; getComponentsMap: () => Map>>; }; /** * A default implementation of a component-not-implemented component. * Useful for model-first workflows where frontend dev comes later. * To make this work, it needs to be the default returned from the * resolveRenderer() function when the component is unknown. **/ declare function DefaultNotImplementedComponent(props: ComponentProps): React$1.JSX.Element | null; type UniformTextProps = Omit; /** * Renders text parameters. Offers inline editing capability out of the box. */ declare const UniformText: ({ as: tag, parameterId, isMultiline, placeholder, render, ...props }: UniformTextProps) => React$1.JSX.Element | null; type UniformComponentProps = { /** The data of the component instance */ data?: ComponentInstance | RootComponentInstance; /** Resolves a React component to render a Canvas component, generally by inspecting type/variant */ resolveRenderer?: RenderComponentResolver; /** Children to render. Can also be a function that takes ComponentProps as argument */ children?: ReactNode | ((props: ComponentProps) => ReactNode); /** * When to track behavior from enrichment tags on the current composition * onView: adds enrichment score when the visitor views the tagged component in the browser viewport. * onLoad: adds enrichment score as soon as the component mounts, regardless of viewport. * * NOTE: onView renders a `
` tag around components that have enrichment tags, to support IntersectionObserver. * onLoad does not need to do this, and renders no wrapping tag. * * Default: onView */ behaviorTracking?: 'onLoad' | 'onView'; /** * The default placeholder to pass to the parameter component that support inline editing (such as UniformText). */ contextualEditingDefaultPlaceholder?: UniformTextProps['placeholder']; }; type UniformComponentContextValue = { data?: UniformComponentProps['data']; resolveRenderer?: UniformComponentProps['resolveRenderer']; behaviorTracking?: UniformComponentProps['behaviorTracking']; contextualEditingDefaultPlaceholder?: UniformComponentProps['contextualEditingDefaultPlaceholder']; }; /** * Gets the data of the closest `` ancestor. */ declare function useUniformCurrentComponent(): UniformComponentContextValue; /** * Allows the rendering of a Canvas component instance (root or not), and its children if it has any. * Note that the actual rendering happens inside ``, this component only provides the services needed to achieve that. * This component is used internally by ``, which you should use in most cases. */ declare function UniformComponent({ data, resolveRenderer, children, behaviorTracking, contextualEditingDefaultPlaceholder, }: UniformComponentProps): React$1.JSX.Element | null; type UseUniformContextualEditingProps = { initialCompositionValue?: RootComponentInstance; /** * A function to enhance the composition after receiving it from Canvas editor. * WARNING: This enhancer will run on the client side. Make sure you're not exposing any secrets. You can use `createApiEnhancer` to create an enhancer based on an API route. */ enhance?: ({ composition, hash, }: Pick) => RootComponentInstance | Promise; }; /** * Adds contextual editing capability to a Uniform app. * This hook is already integrated in ``, you won't need to use it directly, unless you have a custom setup. */ declare const useUniformContextualEditing: ({ initialCompositionValue, enhance, }: UseUniformContextualEditingProps) => { composition: { type: string; parameters?: { [key: string]: { value?: unknown; type: string; connectedData?: { pointer: string; syntax: "jptr"; failureAction?: "t" | "p" | "c" | "a"; failureLogLevel?: "e" | "w" | "i"; failureDefault?: string; }; locales?: { [key: string]: unknown; }; conditions?: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; localesConditions?: { [key: string]: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; }; }; }; variant?: string; projectMapNodes?: { id: string; path: string; projectMapId: string; data?: { isSearchHit?: boolean; queryStrings?: { name: string; value?: string; helpText?: string; optionsSource?: { source: "static"; options: { name: string; value: string; }[]; }; }[]; previewValue?: string; }; locales?: { [key: string]: { path: string; inherited: boolean; }; }; }[]; slots?: { [key: string]: { type: string; parameters?: { [key: string]: { value?: unknown; type: string; connectedData?: { pointer: string; syntax: "jptr"; failureAction?: "t" | "p" | "c" | "a"; failureLogLevel?: "e" | "w" | "i"; failureDefault?: string; }; locales?: { [key: string]: unknown; }; conditions?: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; localesConditions?: { [key: string]: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; }; }; }; variant?: string; slots?: { [key: string]: /*elided*/ any[]; }; _id?: string; _pattern?: string; _dataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; _patternDataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; _patternError?: "NOTFOUND" | "CYCLIC"; _overrides?: { [key: string]: { parameters?: { [key: string]: { value?: unknown; type: string; connectedData?: { pointer: string; syntax: "jptr"; failureAction?: "t" | "p" | "c" | "a"; failureLogLevel?: "e" | "w" | "i"; failureDefault?: string; }; locales?: { [key: string]: unknown; }; conditions?: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; localesConditions?: { [key: string]: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; }; }; }; slots?: { [key: string]: /*elided*/ any[]; }; variant?: string; dataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; }; }; _patternOverrides?: { [key: string]: { parameters?: { [key: string]: { value?: unknown; type: string; connectedData?: { pointer: string; syntax: "jptr"; failureAction?: "t" | "p" | "c" | "a"; failureLogLevel?: "e" | "w" | "i"; failureDefault?: string; }; locales?: { [key: string]: unknown; }; conditions?: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; localesConditions?: { [key: string]: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; }; }; }; slots?: { [key: string]: /*elided*/ any[]; }; variant?: string; dataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; }; }; _overridability?: { parameters?: { [key: string]: "yes" | "no"; }; variants?: boolean; hideLockedParameters?: boolean; }; _locales?: string[]; }[]; }; _id: string; _slug?: string | null; _name: string; _author?: string; _authorSubject?: string; _creator?: string; _creatorSubject?: string; _pattern?: string; _patternDataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; _dataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; _patternError?: "NOTFOUND" | "CYCLIC"; _overrides?: { [key: string]: { parameters?: { [key: string]: { value?: unknown; type: string; connectedData?: { pointer: string; syntax: "jptr"; failureAction?: "t" | "p" | "c" | "a"; failureLogLevel?: "e" | "w" | "i"; failureDefault?: string; }; locales?: { [key: string]: unknown; }; conditions?: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; localesConditions?: { [key: string]: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; }; }; }; slots?: { [key: string]: { type: string; parameters?: { [key: string]: { value?: unknown; type: string; connectedData?: { pointer: string; syntax: "jptr"; failureAction?: "t" | "p" | "c" | "a"; failureLogLevel?: "e" | "w" | "i"; failureDefault?: string; }; locales?: { [key: string]: unknown; }; conditions?: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; localesConditions?: { [key: string]: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; }; }; }; variant?: string; slots?: { [key: string]: /*elided*/ any[]; }; _id?: string; _pattern?: string; _dataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; _patternDataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; _patternError?: "NOTFOUND" | "CYCLIC"; _overrides?: { [key: string]: /*elided*/ any; }; _patternOverrides?: { [key: string]: /*elided*/ any; }; _overridability?: { parameters?: { [key: string]: "yes" | "no"; }; variants?: boolean; hideLockedParameters?: boolean; }; _locales?: string[]; }[]; }; variant?: string; dataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; }; }; _patternOverrides?: { [key: string]: { parameters?: { [key: string]: { value?: unknown; type: string; connectedData?: { pointer: string; syntax: "jptr"; failureAction?: "t" | "p" | "c" | "a"; failureLogLevel?: "e" | "w" | "i"; failureDefault?: string; }; locales?: { [key: string]: unknown; }; conditions?: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; localesConditions?: { [key: string]: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; }; }; }; slots?: { [key: string]: { type: string; parameters?: { [key: string]: { value?: unknown; type: string; connectedData?: { pointer: string; syntax: "jptr"; failureAction?: "t" | "p" | "c" | "a"; failureLogLevel?: "e" | "w" | "i"; failureDefault?: string; }; locales?: { [key: string]: unknown; }; conditions?: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; localesConditions?: { [key: string]: { when: { op?: "&" | "|"; clauses: ({ rule: string; source?: string; op: string; value: string | string[]; } | /*elided*/ any)[]; }; value: unknown; id: number; }[]; }; }; }; variant?: string; slots?: { [key: string]: /*elided*/ any[]; }; _id?: string; _pattern?: string; _dataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; _patternDataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; _patternError?: "NOTFOUND" | "CYCLIC"; _overrides?: { [key: string]: /*elided*/ any; }; _patternOverrides?: { [key: string]: /*elided*/ any; }; _overridability?: { parameters?: { [key: string]: "yes" | "no"; }; variants?: boolean; hideLockedParameters?: boolean; }; _locales?: string[]; }[]; }; variant?: string; dataResources?: { [key: string]: { type: string; isPatternParameter?: boolean; ignorePatternParameterDefault?: boolean; optionalPatternParameter?: boolean; variables?: { [key: string]: string; }; }; }; }; }; _overridability?: { parameters?: { [key: string]: "yes" | "no"; }; variants?: boolean; hideLockedParameters?: boolean; }; _locales?: string[]; } | undefined; isContextualEditing: boolean; }; type UniformCompositionProps = UniformComponentProps & Omit & { /** The composition data */ data?: RootComponentInstance; contextualEditingEnhancer?: UseUniformContextualEditingProps['enhance']; }; type UniformCompositionContextValue = Omit & { data: UniformCompositionProps['data'] | undefined; resolveRenderer?: UniformCompositionProps['resolveRenderer']; behaviorTracking?: UniformCompositionProps['behaviorTracking']; isContextualEditing: boolean; }; declare const UniformCompositionContext: React$1.Context; /** * Gets the data of the closest `` ancestor. */ declare function useUniformCurrentComposition(): UniformCompositionContextValue; /** * The main component to render a Canvas composition. * It renders the full tree of components, and provides some services to the children, such as `useUniformCurrentComposition`. * It also takes care of enabling [Contextual Editing](https://docs.uniform.app/capabilities/composition/contextual-editing). */ declare function UniformComposition({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, matchedRoute, dynamicInputs, }: UniformCompositionProps): React$1.JSX.Element; type UniformPlaygroundDecorator = (props: { /** The rendered component instance, needs to be wrapped and rendered by the decorator */ children: React$1.ReactNode; /** The component instance data */ data: ComponentInstance | RootComponentInstance; }) => React$1.ReactElement; type UniformPlaygroundProps = { /** * Allows wrapping the playground in custom layouts. * Useful to customize the playground to allow previewing the patterns in realistic scenarios * (e.g. wrap the pattern in a specific layout, show a background color selector, parent size selector, etc.) * @deprecated This feature is not stable yet and might be changed or removed in a minor release. Do not use it in production environments. */ decorators?: UniformPlaygroundDecorator[]; } & Omit; /** * Playground where you can freely live preview your components and patterns. */ declare const UniformPlayground: ({ resolveRenderer, decorators, contextualEditingEnhancer, behaviorTracking, contextualEditingDefaultPlaceholder, }: UniformPlaygroundProps) => React$1.JSX.Element; type RichTextComponentProps = { node: TNode; }; type RichTextRendererComponent = React$1.ComponentType>>; /** * Function that maps a Rich Text node instance to its React component to render it. * The resolver would commonly inspect the `type` of the component to decide. */ type RenderRichTextComponentResolver = (node: RichTextNode) => RichTextRendererComponent | null | undefined; type UniformRichTextProps = { /** * The name of the HTML tag to render. * @default "div" */ as?: React$1.ElementType | null; /** The ID of the parameter. */ parameterId: string; /** * A function which can provide a custom react component * for rendering a rich text node */ resolveRichTextRenderer?: RenderRichTextComponentResolver; /** * Sets the value to show in Canvas editor when the parameter value is empty. * Can be a static string, or a function to generate the placeholder out of parameter info. * @default undefined */ placeholder?: string | ((parameter: { id: string; }) => string | undefined); } & Omit, 'children'>; /** * Adds rendering support for Uniform Rich Text parameters */ declare const UniformRichText: React$1.ForwardRefExoticComponent<{ /** * The name of the HTML tag to render. * @default "div" */ as?: React$1.ElementType | null; /** The ID of the parameter. */ parameterId: string; /** * A function which can provide a custom react component * for rendering a rich text node */ resolveRichTextRenderer?: RenderRichTextComponentResolver; /** * Sets the value to show in Canvas editor when the parameter value is empty. * Can be a static string, or a function to generate the placeholder out of parameter info. * @default undefined */ placeholder?: string | ((parameter: { id: string; }) => string | undefined); } & Omit, "children"> & React$1.RefAttributes>; type UniformRichTextNodeProps = { node: RichTextNode; resolveRichTextRenderer?: RenderRichTextComponentResolver; }; /** * Render a single RichText node */ declare function UniformRichTextNode({ node, ...props }: UniformRichTextNodeProps): React$1.JSX.Element | null; type CustomSlotChildRenderFunc = (options: { child: ReactNode; component: ComponentInstance; key: Key; }) => ReactNode; type UniformSlotWrapperComponentProps = { items: ReactNode[]; slotName: string; }; type UniformSlotProps = { /** Name of the slot to render */ name: TSlotNames; /** * Function to resolve the React component to render for a given Canvas component type. * If not specified, the resolveRenderer function on the nearest Layout will be used, if any. */ resolveRenderer?: RenderComponentResolver; /** * Optional wrapper component around list of slot items that allows to control * exactly how to render slot items, otherwise React.Fragment is being used */ wrapperComponent?: React$1.ComponentType; /** * Optional ReactNode to use as a placeholder in Canvas editor when the slot is empty. * The node is used to render a placeholder with realistic dimensions and it's never shown to users. * Pass `null` to disable the placeholder. */ emptyPlaceholder?: React$1.ReactNode; }; /** Renders a named Slot within a Composition. */ declare function UniformSlot({ name, resolveRenderer, emptyPlaceholder, wrapperComponent, }: UniformSlotProps): ReactNode | null; /** * Converts a raw Canvas component instance to React component props format. * This merges each parameter moved to the root object and removes the 'value' node, * hugely simplifying rendering code. For example if the raw object has parameters.foo.value, * then the final props have props.foo === raw.parameters.foo.value. */ declare function convertComponentToProps(component: ComponentInstance): ComponentProps; /** * Returns the attributes needed to annotate a Uniform parameter for inline editing. * Supports only text parameters at the moment. */ declare const getParameterAttributes: typeof getParameterAttributes$1; type UseUniformContextualEditingStateProps = { /** * When set to true, the hook will return the global contextual state no matter where its used. * When set to false, it will return only the state relevant to the current component (determined using `useUniformCurrentComponent`). * @default false **/ global?: boolean; }; type UseUniformContextualEditingStateReturnType = { /** * Returns `true` when the app is rendered inside Canvas editor. Regardless of which preview mode is currently selected ("editor" or "preview"). */ isContextualEditing: boolean; /** * A reference to the currently selected component in Canvas editor. * Returns `undefined` if the selected component is not part of the current React component. * Set the `global` option to `true` to get a reference of the selected component anywhere in the composition tree. */ selectedComponentReference: UpdateContextualEditingStateInternalMessage['state']['selectedComponentReference']; /** * Returns the current preview mode in Canvas editor ("editor" or "preview"). * Returns `undefined` when the app is not rendered inside Canvas editor. * Learn more about the preview modes: https://docs.uniform.app/docs/guides/composition/visual-editing#editing-and-preview-mode */ previewMode: UpdateContextualEditingStateInternalMessage['state']['previewMode'] | undefined; }; /** * Returns the state of contextual editing, when the app is open inside Canvas Editor. * This hook can be used to improve the editing experience of your team. * For example: You can use `selectedComponentReference` to control which element to show inside a carousel or an accordion. */ declare const useUniformContextualEditingState: ({ global, }?: UseUniformContextualEditingStateProps) => UseUniformContextualEditingStateReturnType; declare const componentStore: ComponentStore; declare const registerUniformComponent: ({ type, variantId, component, }: { type: string; variantId?: string; component: React.ComponentType>; }) => void; declare const componentStoreResolver: RenderComponentResolver; /** Can be used to override default component Not Implemented fallback */ declare const NOT_IMPLEMENTED_COMPONENT = "__not_implemented__"; declare const createComponentStore: () => ComponentStore; declare const createComponentStoreResolver: (options: { store: ComponentStore; defaultComponent?: React$1.ComponentType>; }) => RenderComponentResolver; export { type ComponentProps, type ComponentStore, type CustomSlotChildRenderFunc, DefaultNotImplementedComponent, NOT_IMPLEMENTED_COMPONENT, type RenderComponentResolver, type RenderRichTextComponentResolver, type RichTextComponentProps, type RichTextRendererComponent, type SystemRenderConfig, type SystemRenderFunction, UniformComponent, type UniformComponentContextValue, type UniformComponentProps, UniformComposition, UniformCompositionContext, type UniformCompositionProps, UniformPlayground, type UniformPlaygroundDecorator, type UniformPlaygroundProps, UniformRichText, UniformRichTextNode, type UniformRichTextNodeProps, type UniformRichTextProps, UniformSlot, type UniformSlotProps, type UniformSlotWrapperComponentProps, UniformText, type UniformTextProps, type UseUniformContextualEditingProps, type UseUniformContextualEditingStateProps, type UseUniformContextualEditingStateReturnType, componentStore, componentStoreResolver, convertComponentToProps, createComponentStore, createComponentStoreResolver, getParameterAttributes, registerUniformComponent, useUniformContextualEditing, useUniformContextualEditingState, useUniformCurrentComponent, useUniformCurrentComposition };