import { Active } from '@dnd-kit/core'; import { AriaAttributes } from 'react'; import { ButtonHTMLAttributes } from 'react'; import { Collision } from '@dnd-kit/core'; import { default as default_2 } from 'react-datepicker'; import { DetailedHTMLProps } from 'react'; import { Dispatch } from 'react'; import { FocusEvent as FocusEvent_2 } from 'react'; import { FocusStrategy } from '@react-types/shared'; import { FondueIconProps } from '@frontify/fondue-icons'; import { ForwardedRef } from 'react'; import { ForwardRefExoticComponent } from 'react'; import { HTMLAttributes } from 'react'; import { JSX as JSX_2 } from 'react/jsx-runtime'; import { JSXElementConstructor } from 'react'; import { KeyboardEvent as KeyboardEvent_2 } from 'react'; import { MemoExoticComponent } from 'react'; import { MouseEvent as MouseEvent_2 } from 'react'; import { MutableRefObject } from 'react'; import { Over } from '@dnd-kit/core'; import { ReactElement } from 'react'; import { ReactNode } from 'react'; import { RefAttributes } from 'react'; import { SetStateAction } from 'react'; import { Translate } from '@dnd-kit/core'; import { useSortable } from '@dnd-kit/sortable'; /** * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}. */ export declare const Accordion: { (props: AccordionProps): ReactElement; displayName: string; }; /** * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}. */ export declare const AccordionHeaderIcon: { ({ size, isOpen, "data-test-id": dataTestId, }: AccordionHeaderIconProps): ReactElement; displayName: string; }; /** * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}. */ declare type AccordionHeaderIconProps = { isOpen: boolean; size?: AccordionHeaderIconSize; 'data-test-id'?: string; }; /** * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}. */ declare type AccordionHeaderIconSize = 'small' | 'medium' | 'large'; /** * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}. */ export declare type AccordionHeaderProps = { decorator?: ReactNode; children: string; disabled?: boolean; isOpen: boolean; 'data-test-id'?: string; }; /** * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}. */ export declare const AccordionItem: { ({ children }: AccordionItemProps): ReactElement; displayName: string; }; /** * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}. */ declare type AccordionItemProps = { header: Omit & { active?: boolean; onClick?: () => void; }; padding?: boolean; divider?: boolean; headerComponent?: (props: AccordionHeaderProps) => ReactElement; 'data-test-id'?: string; children?: ReactNode; }; /** * @deprecated Please use updated Accordion component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#accordion the migration guide}. */ declare type AccordionProps = { children?: ReactNode; divider?: boolean; border?: boolean; 'data-test-id'?: string; }; /** * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}. */ declare type ActionMenuBlock = { id: string; menuItems: (ActionMenuItemType | ActionMenuSwitchItemType)[]; ariaLabel?: string; }; /** * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}. */ declare type ActionMenuItemType = MenuItemType & { onClick: () => void; }; /** * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}. */ export declare type ActionMenuProps = { ariaLabel?: string; menuBlocks: ActionMenuBlock[]; focus?: FocusStrategy; border?: boolean; scrollable?: boolean; /** * @deprecated Use the onClick method available on each `menuItem` in the `menuBlocks` instead. * @example * console.log('Item 1 clicked'); }, ], }, ]} /> * */ onClick?: () => void; }; /** * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}. */ declare type ActionMenuSwitchItemType = MenuItemType & { onClick: (switchValue: boolean) => void; type: 'switch'; initialValue: boolean; }; export declare const addSelectedIds: (ids: string[], idsToAdd: string[], partial: boolean) => string[]; export declare const addSelectedItemsFromSelection: (treeItems: TreeItemMultiselectWithNodes[], id: string, newSelectedItems: string[]) => string[]; declare type AnnouncementArgs = { eventName: string; activeId: string; activeTitle: string; overId?: string; overTitle?: string; treeState: TreeState; currentPosition: Nullable<{ overId: string; parentId: Nullable; }>; setCurrentPosition: Dispatch; }>>>; }; export declare const AssetInput: { ({ assets, numberOfLocations, actions, size, isLoading, hideSize, hideExtension, onLibraryClick, onUploadClick, onMultiAssetClick, acceptFileType, }: AssetInputProps): ReactElement; displayName: string; }; export declare type AssetInputMenuBlock = { id: string; menuItems: (AssetInputMenuDefaultItemType | AssetInputMenuSwitchItemType)[]; ariaLabel?: string; }; export declare type AssetInputMenuDefaultItemType = AssetInputMenuItemType & { onClick: () => void; }; export declare type AssetInputMenuItemContentProps = { title?: ReactNode; decorator?: ReactElement; subtitle?: string; size?: AssetInputMenuItemContentSize; ariaProps?: HTMLAttributes; children?: ReactNode; }; export declare enum AssetInputMenuItemContentSize { XSmall = "XSmall", Small = "Small", Large = "Large" } export declare type AssetInputMenuItemProps = { style?: AssetInputMenuItemStyle; disabled?: boolean; active?: boolean; checked?: boolean; selectionIndicator?: AssetInputSelectionIndicatorIcon; /** @deprecated this prop is not being used anymore */ type?: string; link?: string; onBlur?: (event: FocusEvent_2) => void; onClick?: (event: MouseEvent_2) => void; onFocus?: (event: FocusEvent_2) => void; onMouseEnter?: (event: MouseEvent_2) => void; onMouseOut?: (event: MouseEvent_2) => void; onMouseOver?: (event: MouseEvent_2) => void; onMouseLeave?: (event: MouseEvent_2) => void; children?: ReactNode; 'data-test-id'?: string; } & AssetInputMenuItemContentProps; export declare enum AssetInputMenuItemStyle { Primary = "Primary", Danger = "Danger", Warning = "Warning" } export declare type AssetInputMenuItemType = AssetInputMenuItemProps & { id: string | number; link?: string; }; export declare type AssetInputMenuSwitchItemType = AssetInputMenuItemType & { onClick: (switchValue: boolean) => void; type: 'switch'; initialValue: boolean; }; export declare type AssetInputProps = { assets?: AssetType[]; size: AssetInputSize; numberOfLocations?: number; actions?: ActionMenuProps['menuBlocks'] | AssetInputMenuBlock[]; isLoading?: boolean; hideSize?: boolean; hideExtension?: boolean; onUploadClick?: (files: FileList) => void; onLibraryClick?: () => void; onMultiAssetClick?: () => void; acceptFileType?: string; }; export declare enum AssetInputSelectionIndicatorIcon { Check = "Check", CaretRight = "CaretRight", None = "None" } export declare enum AssetInputSize { Small = "Small", Large = "Large" } export declare type AssetType = (ImageAsset & UploadSource) | (ImageAsset & LibrarySource) | (IconAsset & UploadSource) | (IconAsset & LibrarySource) | (OtherAsset & UploadSource) | (OtherAsset & LibrarySource); /** * @deprecated Please use updated badge component from `@frontify/fondue/components` instead. */ declare enum BadgeEmphasis { Strong = "Strong", None = "None" } /** * @deprecated Please use updated badge component from `@frontify/fondue/components` instead. */ declare type BadgeProps = { style?: BadgeStyle; icon?: ReactElement; status?: BadgeStatusIconProps['status']; onClick?: () => void; onDismiss?: () => void; disabled?: boolean; emphasis?: BadgeEmphasis; size?: BadgeSize; children?: ReactNode; 'data-test-id'?: string; /** @description withTitle could be disabled only in the case another overlay is present, ex Tooltip */ withTitleAttribute?: boolean; }; /** * @deprecated Please use updated badge component from `@frontify/fondue/components` instead. */ declare type BadgeSize = 'small' | 'medium'; /** * @deprecated Please use updated badge component from `@frontify/fondue/components` instead. */ declare enum BadgeStatus { Positive = "Positive", Progress = "Progress", Warning = "Warning", Danger = "Danger" } /** * @deprecated Please use updated badge component from `@frontify/fondue/components` instead. */ declare type BadgeStatusIconProps = { status: BadgeStatus | Color | string; disabled: boolean; 'data-test-id'?: string; }; /** * @deprecated Please use updated badge component from `@frontify/fondue/components` instead. */ declare enum BadgeStyle { Primary = "Primary", Positive = "Positive", Progress = "Progress", Warning = "Warning", Danger = "Danger" } declare type BaseAsset = { name: string; }; /** * @deprecated This type is deprecated and will be removed in the next major version. */ export declare type Breadcrumb = { label: string; link?: string; onClick?: (event: MouseEvent_2) => void; decorator?: ReactElement; bold?: boolean; badges?: BadgeProps[]; 'data-test-id'?: string; } & Pick; /** * @deprecated This type is deprecated and will be removed in the next major version. */ declare enum BreadcrumbGap { None = "None", Small = "Small", Medium = "Medium" } /** * @deprecated This component is deprecated and will be removed in the next major version. */ export declare const Breadcrumbs: { ({ items, keepRoot, truncate, activeInline, "data-test-id": dataTestId, verticalGap, }: BreadcrumbsProps): ReactElement; displayName: string; }; /** * @deprecated This type is deprecated and will be removed in the next major version. */ declare type BreadcrumbsProps = { items: Breadcrumb[]; keepRoot?: boolean; activeInline?: boolean; truncate?: boolean; 'data-test-id'?: string; verticalGap?: BreadcrumbGap; }; /** * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}. */ declare enum BrightHeaderStyle { Information = "Information", Warning = "Warning", Tip = "Tip", Note = "Note" } /** * @deprecated Use `Checkbox` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#checkbox the migration guide}. */ declare enum CheckboxState { Checked = "Checked", Unchecked = "Unchecked", Mixed = "Mixed" } export declare const cleanOrphanSelectedIds: (selectIds: string[]) => string[]; /** * @deprecated Use `Accordion` from `@frontify/fondue/components` instead. */ export declare const CollapsibleWrap: { ({ children, isOpen, preventInitialAnimation, animateOpacity, "data-test-id": dataTestId, }: CollapsibleWrapProps): ReactElement; displayName: string; }; /** * @deprecated Please use updated accordion component from `@frontify/fondue/components` instead. */ declare type CollapsibleWrapProps = { isOpen: boolean; preventInitialAnimation?: boolean; animateOpacity?: boolean; children?: ReactNode; 'data-test-id'?: string; }; export declare type CollisionPosition = Nullable<'before' | 'within' | 'after'>; /** * @deprecated Please use a custom type instead. **/ export declare type Color = { red: number; green: number; blue: number; alpha?: number; name?: string; }; export declare const convertToPartialSelectedId: (ids: string[]) => string[]; export declare const currentNodesChanged: (currentChildrenIds: string[], currentNodes: ReactElement[], newNodes: ReactElement[]) => boolean; /** * @deprecated Use `DatePicker` from `@frontify/fondue/components` instead. */ export declare const DatePicker: ForwardRefExoticComponent>; /** * @deprecated Use `DatePicker` from `@frontify/fondue/components` instead. */ export declare type DatePickerProps = { placeHolder?: string; isClearable?: boolean; shouldCloseOnSelect?: boolean; dateFormat?: string; /** @description when the variant is of type 'range', the value should be the startDate */ value?: Date | null; minDate?: Date; maxDate?: Date; validation?: Validation; customTrigger?: ReactNode; customHeader?: ReactNode; children?: ReactNode; hasPopperArrow?: boolean; preventOpenOnFocus?: boolean; inline?: boolean; filterDate?: (date: Date) => boolean; fixedHeight?: boolean; /** * @description When false, stretches to 100% of container width. * @default true */ hugWidth?: boolean; onOpen?: () => void; onClose?: () => void; onBlur?: () => void; onKeyDown?: (event: KeyboardEvent_2) => void; triggerAriaLabel?: string; 'data-test-id'?: string; } & (SingleDatePickerProps | RangeDatePickerProps); /** * @deprecated Use `DatePickerInput` from `@frontify/fondue/components` instead. */ export declare const DatePickerTrigger: ForwardRefExoticComponent>; declare type DatePickerTriggerProps = { placeHolder?: string; value?: string; isClearable?: boolean; isCalendarOpen?: boolean; onClick?: () => void; validation?: Validation; onDateChanged?: ((date: [Date | null, Date | null] | null) => void) | ((date: Date | null) => void); hugWidth?: boolean; 'aria-label': string; }; /** * @deprecated This type is deprecated and will be removed in the next major version. */ declare type DraggableItem> = T & { id: string; sort: Nullable; type?: string; parentId?: string; }; export declare const DragHandle: ForwardRefExoticComponent & RefAttributes>; export declare type DragHandleProps = DetailedHTMLProps, HTMLButtonElement> & { active?: boolean; showDragHandlerOnHoverOnly?: boolean; activeColorStyle?: TreeItemColors; }; export declare type DragHandlerPosition = 'left' | 'right' | 'none'; /** * @deprecated Use the new EditableText component from @frontify/fondue/components instead. */ export declare enum EditableMode { INPUT = "INPUT", LABEL = "LABEL" } /** * isSlimInputField: removes padding * mode: display as Input or Label first * enableDoubleClick: Should the input be triggered by a double click or single click * additionalValues: additional information to be passed via onClick Event * removeBoxPadding: Removes the Padding (tw-p-2) around the input Box */ declare interface EditableOptionProps { isSlimInputField?: boolean; mode?: EditableMode; enableDoubleClick?: boolean; additionalValues?: string; removeBoxPadding?: boolean; } /** * @deprecated Use the new EditableText component from @frontify/fondue/components instead. */ export declare const EditableText: { ({ onEditableSave, onModeChange, onAdditionalValueSave, children, options, isOverflowing, "data-test-id": dataTestId, }: EditableTextProps): JSX_2.Element; displayName: string; }; /** * @deprecated Use the new EditableText component from @frontify/fondue/components instead. */ export declare interface EditableTextProps { children?: ReactElement; onAdditionalValueSave?: (additionalValue: string, value: string) => void; onEditableSave?: (value: string) => void; onModeChange?: (editableState?: EditableMode) => void; options?: EditableOptionProps; /** @deprecated Temporary solution for text with ellipisis in Tree Component */ isOverflowing?: boolean; 'data-test-id'?: string; } export declare const EXPAND_ONHOVER_DELAY = 350; export declare const ExpandButton: { ({ active, onClick, expanded, disabled, className, ...otherProps }: ExpandButtonProps): JSX_2.Element; displayName: string; }; export declare type ExpandButtonProps = DetailedHTMLProps, HTMLButtonElement> & { expanded?: boolean; active?: boolean; }; export declare const extractNodeFromElement: (node: ReactElement) => TreeNodeWithoutElements; /** * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead. */ export declare const FilterableMultiSelect: { ({ items, activeItemKeys, onSelectionChange, ariaLabel, disabled, placeholder, label, type, size, validation, summarizedLabel: summarizedLabelFromProps, indeterminateItemKeys, flip, emphasis, enablePortal, filterLabel, emptyFilteredResultsLabel, }: FilterableMultiSelectProps): ReactElement; displayName: string; }; /** * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead. */ export declare type FilterableMultiSelectItem = { value: string; isCategory?: boolean; isDivider?: boolean; avatar?: ReactNode; imgSrc?: string; ariaLabel?: string; }; /** * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead. */ export declare type FilterableMultiSelectProps = { items: FilterableMultiSelectItem[]; activeItemKeys: (string | number)[]; disabled?: boolean; onSelectionChange: (keys: (string | number)[]) => void; ariaLabel?: string; label?: string; placeholder?: string; type?: FilterableMultiSelectType; size?: FilterableMultiSelectSize; validation?: Validation; summarizedLabel?: string; indeterminateItemKeys?: (string | number)[]; flip?: boolean; emphasis?: TriggerEmphasis; enablePortal?: boolean; filterLabel?: string; emptyFilteredResultsLabel?: string; }; /** * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead. */ export declare enum FilterableMultiSelectSize { Small = "Small", Medium = "Medium" } /** * @deprecated Please use updated Multiple Combobox component from `@frontify/fondue/components` instead. */ export declare enum FilterableMultiSelectType { Default = "Default", Summarized = "Summarized" } export declare const findIndexById: (nodes: ReactElement[], id: string) => number; export declare const fixParentSelectionState: (parent: TreeItemMultiselectWithNodes, newSelectedItems: string[]) => string[]; /** * @deprecated This constant is deprecated and will be removed in the next major version. Use tokens instead. */ export declare const FOCUS_VISIBLE_STYLE = "focus-visible:tw-ring-4 focus-visible:tw-ring-blue focus-visible:tw-ring-offset-2 focus-visible:dark:tw-ring-offset-black focus-visible:tw-outline-none"; /** * @deprecated This constant is deprecated and will be removed in the next major version. Use tokens instead. */ export declare const FOCUS_VISIBLE_STYLE_INSET: string; /** * @deprecated This constant is deprecated and will be removed in the next major version. Use tokens instead. */ export declare const FOCUS_WITHIN_STYLE = "focus-within:tw-ring-4 focus-within:tw-ring-blue focus-within:tw-ring-offset-2 focus-within:dark:tw-ring-offset-black focus-within:tw-outline-none"; /** * @deprecated This component is deprecated and will be removed in the next major version. */ export declare const FormControl: { ({ label, children, extra, name, helper, disabled, clickable, direction, style, "data-test-id": dataTestId, }: FormControlProps): ReactElement; displayName: string; }; /** * @deprecated Please use a custom component instead. */ export declare enum FormControlDirection { Horizontal = "Horizontal", Vertical = "Vertical" } /** * @deprecated Please use a custom component instead. */ export declare type FormControlProps = { direction?: FormControlDirection; disabled?: boolean; clickable?: boolean; label?: Omit; extra?: ReactNode; helper?: Omit & { position?: HelperPosition; }; style?: FormControlStyle; name?: string; children?: ReactNode; 'data-test-id'?: string; }; /** * @deprecated Please use a custom component instead. */ export declare enum FormControlStyle { Primary = "Primary", Positive = "Positive", Danger = "Danger" } /** * @deprecated Please use a custom component instead. */ export declare const FrontifyPattern: { ({ pattern, scale, scaleOrigin, foregroundColor, "data-test-id": dataTestId, }: FrontifyPatternProps): ReactElement; displayName: string; }; /** * @deprecated Please use a custom component instead. */ declare type FrontifyPatternProps = { pattern: PatternDesign; scale?: PatternScale; scaleOrigin?: PatternScaleOrigin; foregroundColor?: PatternTheme; 'data-test-id'?: string; }; export declare const getAnnouncements: (treeState: TreeState, currentPosition: AnnouncementArgs["currentPosition"], setCurrentPosition: AnnouncementArgs["setCurrentPosition"]) => TreeAnnouncements; export declare const getCurrentChildrenForNewNodesIfExpanded: (currentNodes: ReactElement[], expandedIds: Set, newNodes: ReactElement[]) => ReactElement>[]; export declare const getExtendedId: (item: TreeItemMultiselectWithNodes) => string; export declare const getMultiselectCheckBoxState: (isSelected: boolean, isPartialSelected: boolean) => CheckboxState; export declare const getNewSelectedItems: (id: string, selectedIds: string[], treeItems: TreeItemMultiselectWithNodes[], ignoreRemoveSelected?: boolean) => string[]; export declare const getNodeChildrenIds: (nodes: ReactElement[], id: string) => string[]; export declare const getNodesToRender: (rootNodes: TreeState["rootNodes"], expandedIds: TreeState["expandedIds"]) => ReactElement>[]; export declare const getParentSelectedTreeItem: (tree: TreeItemMultiselectWithNodes[], id: string, parent: TreeItemMultiselectWithNodes | null) => TreeItemMultiselectWithNodes | null; export declare const getProjection: ({ nodes, activeId, overId, dragOffset }: ProjectionArgs) => Projection; export declare const getReactNodeIdsInFlatArray: (tree: ReactElement[], startingNodeId: string) => string[]; export declare const getReactNodesInFlatArray: (tree: ReactElement[], startingNodeId: string) => ReactElement[]; export declare const getSelectedChildrenItems: (tree: TreeItemMultiselectWithNodes[], selectedIds: string[], onlyPartial?: boolean) => string[]; export declare const getSelectedTreeItem: (tree: TreeItemMultiselectWithNodes[], id: string) => TreeItemMultiselectWithNodes | null; export declare const getTreeNodesWithoutElements: (nodes?: ReactElement[], parentId?: string) => TreeNodeWithoutElements[]; export declare const getVerticalPositioning: (triggerRef: T | null, overlayHeight: number, offset: number, bottomMargin: number) => { position: VerticalPosition; maxHeight: number; }; export declare const handleKeyDownEvent: (event: KeyboardEvent_2, expandedIds: TreeState["expandedIds"], nodes: TreeState["nodes"], handleSelect: (id: string) => void, handleShrink: (id: string) => void, handleExpand: (id: string) => void) => void; /** * @deprecated Please use a custom component instead. */ export declare enum HelperPosition { Before = "Before", After = "After" } declare type HelperTextProps = { text: string; style: FormControlStyle; disabled?: boolean; fullWidth?: boolean; 'data-test-id'?: string; }; declare type IconAsset = BaseAsset & { type: 'icon'; extension?: undefined; src?: undefined; alt?: undefined; icon: ReactElement; size?: undefined; }; export declare type ImageAsset = { type: 'image' | 'logo'; name: string; extension: string; src?: string; alt?: string; icon?: undefined; size: number; }; export declare const INDENTATION_WIDTH = 20; /** * @legacy Use `Label` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#label-old-inputlabel the migration guide}. */ export declare type InputLabelProps = { id?: string; htmlFor: string; required?: boolean; disabled?: boolean; clickable?: boolean; tooltip?: InputLabelTooltipProps; bold?: boolean; children?: ReactNode; 'data-test-id'?: string; }; /** * @deprecated Use `Label` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#label-old-inputlabel the migration guide}. */ declare type InputLabelTooltipProps = (LegacyTooltipProps & Pick) | (LegacyTooltipProps & Pick)[]; /** @private */ export declare type InternalTreeItemMultiSelectProps = TreeItemMultiselectProps & TreeItemPrivateProps_2; /** @private */ export declare type InternalTreeItemProps = TreeItemProps & TreeItemPrivateProps; /** * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead. */ export declare type Item = { label: string; value: string; avatar?: ReactNode; isCategory?: boolean; isDivider?: boolean; imgSrc?: string; ariaLabel?: string; }; /** * @deprecated Please use updated Textarea component from `@frontify/fondue/components` instead. */ export declare const LegacyTextarea: { ({ id: propId, value, required, decorator, placeholder, disabled, onInput, onBlur, validation, minRows, maxRows, autosize, resizeable, onFocus, selectable, focusOnMount, onEnterPressed, ...props }: LegacyTextareaProps): ReactElement; displayName: string; }; /** * @deprecated Please use updated Textarea component from `@frontify/fondue/components` instead. */ export declare type LegacyTextareaProps = { id?: string; value?: string; required?: boolean; decorator?: ReactNode; placeholder?: string; disabled?: boolean; onInput?: (value: string) => void; onBlur?: (value: string) => void; onFocus?: (e: FocusEvent_2) => void; validation?: Validation; /** When autosize if false, this is used as 'rows' property for standard textarea */ minRows?: number; /** When autosize if false, this property is ignored */ maxRows?: number; autosize?: boolean; resizeable?: boolean; selectable?: boolean; focusOnMount?: boolean; onEnterPressed?: (event: KeyboardEvent_2) => void; } & AriaAttributes; /** * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}. */ declare type LegacyTooltipProps = { triggerElement?: ReactElement; content: ReactNode; tooltipIcon?: ReactElement; heading?: ReactNode; headingIcon?: ReactElement; linkUrl?: string; linkLabel?: string; brightHeader?: BrightHeaderStyle; buttons?: [TooltipButton, TooltipButton] | [TooltipButton]; children?: ReactNode; position?: TooltipPosition | 'top' | 'bottom' | 'left' | 'right'; alignment?: TooltipAlignment; flip?: boolean; withArrow?: boolean; withStrongBorder?: boolean; hoverDelay?: number; enterDelay?: number; open?: boolean; disabled?: boolean; /** @deprecated use disabled since the tooltip is always present in the DOM now so hidden has no effect anymore */ hidden?: boolean; enablePortal?: boolean; 'data-test-id'?: string; }; export declare type LibrarySource = { source: 'library'; sourceName: string; }; /** * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}. */ export declare const MenuItem: { ({ title, decorator, switchComponent, subtitle, size, style, disabled, active, checked, selectionIndicator, children, link, onBlur, onClick, onFocus, onMouseEnter, onMouseOut, onMouseOver, onMouseLeave, "data-test-id": dataTestId, type, }: MenuItemProps): JSX_2.Element; displayName: string; }; /** * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}. */ declare type MenuItemContentProps = { title?: ReactNode; decorator?: ReactElement; switchComponent?: ReactElement; subtitle?: string; size?: MenuItemContentSize; ariaProps?: HTMLAttributes; children?: ReactNode; }; /** * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}. */ export declare enum MenuItemContentSize { XSmall = "XSmall", Small = "Small", Large = "Large" } /** * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}. */ export declare type MenuItemProps = { style?: MenuItemStyle; disabled?: boolean; active?: boolean; checked?: boolean; selectionIndicator?: SelectionIndicatorIcon; /** @deprecated this prop is not being used anymore */ type?: string; link?: string; onBlur?: (event: FocusEvent_2) => void; onClick?: (event: MouseEvent_2) => void; onFocus?: (event: FocusEvent_2) => void; onMouseEnter?: (event: MouseEvent_2) => void; onMouseOut?: (event: MouseEvent_2) => void; onMouseOver?: (event: MouseEvent_2) => void; onMouseLeave?: (event: MouseEvent_2) => void; children?: ReactNode; 'data-test-id'?: string; } & Omit; /** * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}. */ export declare enum MenuItemStyle { Primary = "Primary", Danger = "Danger", Warning = "Warning" } /** * @deprecated Use `Select` from `@frontify/fondue/components` instead. */ export declare type MenuItemType = Omit & { id: string | number; link?: string; }; /** * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead. */ export declare const MultiSelect: { ({ items, activeItemKeys, onSelectionChange, ariaLabel, disabled, placeholder, label, type, size, validation, summarizedLabel: summarizedLabelFromProps, indeterminateItemKeys, flip, emphasis, enablePortal, }: MultiSelectProps): ReactElement; displayName: string; }; /** * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead. */ export declare type MultiSelectItem = { value: string; isCategory?: boolean; isDivider?: boolean; avatar?: ReactNode; imgSrc?: string; ariaLabel?: string; }; /** * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead. */ export declare type MultiSelectProps = { items: MultiSelectItem[]; activeItemKeys: (string | number)[]; disabled?: boolean; onSelectionChange: (keys: (string | number)[]) => void; ariaLabel?: string; label?: string; placeholder?: string; type?: MultiSelectType; size?: MultiSelectSize; validation?: Validation; summarizedLabel?: string; indeterminateItemKeys?: (string | number)[]; flip?: boolean; emphasis?: TriggerEmphasis; enablePortal?: boolean; }; /** * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead. */ export declare enum MultiSelectSize { Small = "Small", Medium = "Medium" } /** * @deprecated Please use updated Multiple Select component from `@frontify/fondue/components` instead. */ export declare enum MultiSelectType { Default = "Default", Summarized = "Summarized" } export declare type OnExpandCallback = (id: string) => void; export declare type OnSelectCallback = (id: string, ignoreRemoveSelected?: boolean, nodes?: TreeNodeWithoutElements[]) => void; export declare type OnSelectInternalCallback = (id: string, ignoreRemoveSelected?: boolean) => void; export declare type OnShrinkCallback = (id: string) => void; export declare type OnTreeDropCallback = (args: { id: string; parentId: Nullable; sort: number; contentComponent: Nullable; parentType?: string; }) => void; /** * @deprecated Use the new OrderableList component from @frontify/fondue/components instead. */ export declare const OrderableList: { ({ onMove, dragDisabled, items, dragHandlerPosition, enableDragDelay, itemStyle, selectedId, renderContent, "data-test-id": dataTestId, }: OrderableListProps): JSX_2.Element; displayName: string; }; /** * @deprecated Use the new OrderableList component from @frontify/fondue/components instead. */ export declare type OrderableListItem> = DraggableItem & { alt: string; }; /** * @deprecated Use the new OrderableList component from @frontify/fondue/components instead. */ export declare type OrderableListItemStyle = TreeItemStyling; /** * @deprecated Use the new OrderableList component from @frontify/fondue/components instead. */ export declare type OrderableListProps = { items: OrderableListItem[]; dragDisabled: boolean; dragHandlerPosition?: DragHandlerPosition; itemStyle?: OrderableListItemStyle; selectedId?: string; onMove: (modifiedItems: DraggableItem[]) => void; renderContent: RenderListItem; 'data-test-id'?: string; } & Pick; declare type OtherAsset = BaseAsset & { type: 'audio'; extension: string; src?: undefined; alt?: undefined; icon?: undefined; size: number; }; declare type Overlay = { id: string; label?: string; level?: number; children: ReactNode; contentComponent?: ReactNode; isSelected?: boolean; dragHandlerPosition?: DragHandlerPosition; showContentWhileDragging: boolean; }; /** * @deprecated Please use a custom type instead. **/ export declare type Palette = { id: number | string; title: string; colors: Color[]; }; /** * @deprecated */ export declare enum PatternDesign { DigitalAssets = "DigitalAssets", Imagery = "Imagery", Sound = "Sound", Typography = "Typography" } /** * @deprecated */ export declare enum PatternScale { SM = "SM", MD = "MD", LG = "LG", XL = "XL", XXL = "XXL" } export declare type PatternScaleOrigin = ('top' | 'left' | 'bottom' | 'right')[]; /** * @deprecated */ export declare enum PatternTheme { Black = "Black", Green = "Green", Violet = "Violet", Yellow = "Yellow", Red = "Red" } export declare type Projection = { depth: number; maxDepth: number; minDepth: number; position: number; type?: string; accepts?: string; parentId: Nullable; isWithinParent: boolean | undefined; previousNode: Nullable<{ id: string; depth: number; accepts?: string; }>; }; export declare type ProjectionArgs = { nodes: ReactElement[]; activeId: string; overId: string; dragOffset: number; }; declare type RangeDatePickerProps = { variant: 'range'; onChange: (date: [Date | null, Date | null] | null) => void; startDate: Date | null; endDate: Date | null; }; /** * @deprecated Use `DatePicker` from `@frontify/fondue/components` instead. */ export declare type ReactDatePickerRef = default_2; export declare type RegisterNodeChildrenPayload = Extract['payload']; export declare const removePartialFlagSelectedId: (ids: string[]) => string[]; export declare const removeReactNodesFromFlatArray: (tree: ReactElement[], nodeIds: string[]) => ReactElement[]; export declare const removeSelectedIds: (ids: string[], idsToRemove: string[], partial: boolean) => string[]; /** * @deprecated Use the new OrderableList component from @frontify/fondue/components instead. */ export declare type RenderListItem = (items: OrderableListItem) => ReactElement; export declare const ROOT_ID = "__ROOT__"; /** * @deprecated Use `Dropdown` from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#dropdown the migration guide}. */ declare enum SelectionIndicatorIcon { Check = "Check", CaretRight = "CaretRight", None = "None" } export declare type SensorContext = MutableRefObject<{ nodes: ReactElement[]; offset: number; }>; declare type SensorsActivationConstraint = { delay: number; tolerance: number; }; export declare const sensorsActivationConstraint: ({ dragHandlerPosition, enableDragDelay, }: SensorsActivationConstraintProps) => SensorsActivationConstraint; declare type SensorsActivationConstraintProps = { dragHandlerPosition: TreeProps['dragHandlerPosition']; enableDragDelay: TreeProps['enableDragDelay']; }; export declare const shouldUpdateTreeState: (event: globalThis.KeyboardEvent, multiselect: boolean) => boolean; declare type SingleDatePickerProps = { variant?: 'single'; onChange: (date: Date | null) => void; startDate?: null; endDate?: null; }; export declare type SortableProps = Partial>; export declare type SortableTreeItemProps = TreeItemProps; /** * @deprecated Please use a custom function instead. */ export declare const TABBABLE_ELEMENTS: string; /** * @deprecated This component is deprecated and will be removed in the next major version. */ export declare const Toast: { ({ isOpen, style, icon, animationDirection, children, theme, enableExitAnimation, "data-test-id": dataTestId, }: ToastProps): ReactElement; displayName: string; }; /** * @deprecated This component is deprecated and will be removed in the next major version. */ export declare enum ToastAnimationDirection { BottomToTop = "BottomToTop", TopToBottom = "TopToBottom" } /** * @deprecated This component is deprecated and will be removed in the next major version. */ declare type ToastProps = { isOpen: boolean; style: ToastStyle; icon: ReactNode; animationDirection?: ToastAnimationDirection; children?: ReactNode; theme?: ToastTheme; enableExitAnimation?: boolean; 'data-test-id'?: string; }; /** * @deprecated This component is deprecated and will be removed in the next major version. */ export declare enum ToastStyle { Loud = "Loud", Danger = "Danger", Success = "Success", Warning = "Warning" } /** * @deprecated This component is deprecated and will be removed in the next major version. */ declare type ToastTheme = 'light' | 'dark'; /** * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}. */ declare enum TooltipAlignment { Start = "Start", Middle = "Middle" } /** * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}. */ declare type TooltipButton = { label: string; action: () => void; }; /** * @deprecated Please use updated tooltip component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}. */ declare type TooltipIconProps = { tooltip?: LegacyTooltipProps; iconSize?: FondueIconProps['size']; triggerIcon?: ReactElement; triggerStyle?: TooltipIconTriggerStyle | 'danger' | 'warning' | 'primary'; 'data-test-id'?: string; }; declare enum TooltipIconTriggerStyle { Danger = "Danger", Warning = "Warning", Primary = "Primary" } /** * @deprecated Please use updated `Tooltip` component from `@frontify/fondue/components` instead. Also check {@link https://github.com/Frontify/fondue/blob/main/packages/components/MIGRATING.md#tooltip the migration guide}. */ declare enum TooltipPosition { Top = "top", Right = "right", Bottom = "bottom", Left = "left" } export declare const Tree: MemoExoticComponent<({ id, onDrop, onSelect, onExpand, onShrink, children, selectedIds, expandedIds, draggable, multiselect, dragHandlerPosition, enableDragDelay, showDragHandlerOnHoverOnly, showContentWhileDragging, itemStyle, "data-test-id": dataTestId, }: TreeProps) => JSX_2.Element>; export declare type TreeActive = Omit & { id: string; }; export declare type TreeAnnouncements = { onDragStart({ active }: Pick): string | undefined; onDragMove?({ active, over }: TreeDragEvent): string | undefined; onDragOver({ active, over }: TreeDragEvent): string | undefined; onDragEnd({ active, over }: TreeDragEvent): string | undefined; onDragCancel({ active, over }: TreeDragEvent): string | undefined; }; declare type TreeCollision = Omit & { id: string; }; export declare type TreeDragCancelEvent = TreeDragEndEvent; export declare type TreeDragEndEvent = TreeDragEvent; declare type TreeDragEvent = { activatorEvent: Event; active: TreeActive; collisions: TreeCollision[] | null; delta: Translate; over: TreeOver | null; }; export declare type TreeDragMoveEvent = TreeDragEvent; export declare type TreeDragOverEvent = TreeDragMoveEvent; export declare type TreeDragStartEvent = Pick; export declare const TreeItem: MemoExoticComponent>>; declare type TreeItemBaseProps = { id: string; 'data-test-id'?: string; onDrop?: OnTreeDropCallback; /** * The type of item being dragged. */ type?: string; /** * The kinds of dragItems this dropTarget accepts * @example 'itemA, itemA-within, itemA-deeper' * if suffix '-within' is appended, then it will allow dropping item inside it * if suffix '-deeper' is appended, then it will allow expand because it will allow dropping in levels deeper */ accepts?: string; children?: ReactNode; draggable?: boolean; /** Removes the expand caret, recovering the space ignoring if there are children */ expandable?: boolean; showDragHandlerOnHoverOnly?: boolean; /** * dragHandlerPosition = 'none' makes the whole item draggble rather than only the dragHandler */ dragHandlerPosition?: DragHandlerPosition; showContentWhileDragging?: boolean; itemStyle?: TreeItemStyling; showCaret?: boolean; ignoreItemDoubleClick?: boolean; expandOnSelect?: boolean; levelConstraint?: Nullable; }; export declare const TreeItemBorderClassMap: Record, string>; export declare const TreeItemBorderRadiusClassMap: Record; declare type TreeItemBorderStyle = 'solid' | 'dashed' | 'dotted' | 'none'; export declare const TreeItemBorderStyleClassMap: Record; export declare type TreeItemColors = 'neutral' | 'soft' | 'none'; export declare const TreeItemColorsClassMap: Record; declare type TreeItemColorStyles = { textColor: string; selectedTextColor: string; backgroundColor: string; selectedBackgroundColor: string; pressedBackgroundColor: string; dragHanlderTextColor: string; selectedDragHanlderTextColor: string; }; declare type TreeItemContentFit = 'content-fit' | 'single-line'; export declare const TreeItemMultiselect: MemoExoticComponent<({ id, label, showCaret, children, level, contentComponent, parentId: _parentId, onSelect, onExpand, onShrink, registerNodeChildren, unregisterNodeChildren, isDisabled, expandable, checkBoxPosition, itemStyle, "data-test-id": dataTestId, }: InternalTreeItemMultiSelectProps) => JSX_2.Element>; export declare type TreeItemMultiselectProps = Omit & { isDisabled?: boolean; checkBoxPosition?: DragHandlerPosition; onBeforeUnregisterChildren?: (id: string, nodes: TreeNodeWithoutElements[]) => void; }; export declare type TreeItemMultiselectWithNodes = TreeItemMultiselectProps & { id: string; parentId: string; extendedId?: string; nodes?: TreeItemMultiselectWithNodes[]; numChildNodes?: number; onSelect?: (id: string) => void; }; export declare const TreeItemOverlay: { ({ id, label, level, children, contentComponent, isSelected, dragHandlerPosition, showContentWhileDragging, }: Overlay): JSX_2.Element; displayName: string; }; /** @private */ declare type TreeItemPrivateProps = { level?: number; levelConstraint?: Nullable; parentId?: string; /** onSelect is passed by the Tree component when cloning the TreeItem */ onSelect?: (id: string) => void; /** onClick is the user defined callback to run after the onSelect */ onClick?: (id: string) => void; onExpand?: (id: string) => void; onShrink?: (id: string) => void; registerOverlay?: (overlay: Overlay) => void; unregisterNodeChildren?: (payload: string) => void; registerNodeChildren?: (payload: RegisterNodeChildrenPayload) => void; }; /** @private */ declare type TreeItemPrivateProps_2 = { parentId?: string; level?: number; /** onSelect is passed by the Tree component when cloning the TreeItem */ onSelect?: (id: string, ignoreRemoveSelected: boolean) => void; onExpand?: (id: string) => void; onShrink?: (id: string) => void; unregisterNodeChildren?: (payload: string) => void; registerNodeChildren?: (payload: RegisterNodeChildrenPayload) => void; }; export declare type TreeItemProps = SortableProps & (TreeItemWithLabelProps | TreeItemWithContentComponentProps); export declare type TreeItemPropsSizing = 'none' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large'; export declare const TreeItemShadowClassMap: Record; export declare const TreeItemSpacingClassMap: Record; export declare type TreeItemState = { parentId?: string; childrenIds?: string[]; level: number; domElement?: HTMLElement; }; export declare type TreeItemStyling = { spacingY?: TreeItemPropsSizing; contentHight?: TreeItemContentFit; shadow?: TreeItemPropsSizing; borderRadius?: TreeItemPropsSizing; borderWidth?: Exclude; borderStyle?: TreeItemBorderStyle; activeColorStyle?: TreeItemColors; }; export declare type TreeItemWithContentComponentProps = { label?: never; contentComponent?: ReactNode; } & TreeItemBaseProps; export declare type TreeItemWithLabelProps = { label?: string; contentComponent?: never; } & TreeItemBaseProps; export declare type TreeNodeWithoutElements = { id: string; level: number; parentId: string; extendedId: string; nodes: TreeNodeWithoutElements[]; }; export declare type TreeOver = Omit & { id: string; }; export declare type TreeProps = { id: string; draggable?: boolean; children: ReactNode; multiselect?: boolean; selectedIds?: string[]; expandedIds?: string[]; dragHandlerPosition?: DragHandlerPosition; enableDragDelay?: boolean; showDragHandlerOnHoverOnly?: boolean; showContentWhileDragging?: boolean; itemStyle?: TreeItemStyling; 'data-test-id'?: string; onSelect?: OnSelectCallback; onExpand?: OnExpandCallback; onShrink?: OnShrinkCallback; onDrop?: OnTreeDropCallback; }; export declare type TreeState = { selectedIds: Set; expandedIds: Set; selectionMode: 'single' | 'multiselect'; overlay?: Overlay; nodes: ReactElement[]; rootNodes: ReactElement[]; projection: Nullable; }; export declare type TreeStateAction = { type: 'REPLACE_STATE'; payload: TreeState; } | { type: 'REGISTER_OVERLAY_ITEM'; payload: Overlay; } | { type: 'SET_SELECT'; payload: string; } | { type: 'EXPAND_NODE'; payload: string; } | { type: 'SHRINK_NODE'; payload: string; } | { type: 'SET_HIDDEN'; payload: { ids: string[]; isHidden: boolean; }; } | { type: 'SET_SELECTION_MODE'; payload: { selectionMode: TreeState['selectionMode']; }; } | { type: 'SET_PROJECTION'; payload: Nullable; } | { type: 'REGISTER_NODE_CHILDREN'; payload: { id: string; children: ReactElement[]; }; } | { type: 'UNREGISTER_NODE_CHILDREN'; payload: string; } | { type: 'REPLACE_EXPANDED'; payload: string[]; } | { type: 'REPLACE_SELECTED'; payload: string[]; } | { type: 'REGISTER_ROOT_NODES'; payload: ReactElement[]; } | { type: 'REGISTER_NODES'; payload: ReactElement[]; }; /** * @deprecated Please use a custom component instead. */ declare enum TriggerEmphasis { Default = "Default", Weak = "Weak" } export declare const updateNodeWithNewChildren: (nodes: ReactElement[], parentId: string, children: ReactElement[]) => ReactElement>[]; export declare type UploadSource = { source: 'upload'; sourceName?: undefined; }; /** * @deprecated Please use a custom function instead. **/ export declare const useCopy: (resetAfterMS?: number) => { copy: (text: string) => Promise; status: "error" | "success" | "idle"; }; /** * @deprecated Please use a custom function instead. **/ export declare function useForwardedRef(ref: ForwardedRef): MutableRefObject; /** * @deprecated This hook is deprecated and will be removed in the next major version. Please use [useId() from react](https://react.dev/reference/react/useId) instead. */ export declare const useMemoizedId: (id?: string) => string; /** * @deprecated Please use useMediaQuery() in web-app or a custom function instead. **/ export declare const useMobileDetection: () => boolean; export declare const useTreeItem: (id: string) => { isSelected: boolean; isExpanded: boolean; projection: Nullable; }; /** * @deprecated Please use a custom type instead. **/ export declare enum Validation { Default = "Default", Loading = "Loading", Success = "Success", Error = "Error", Warning = "Warning" } declare type VerticalPosition = 'top' | 'bottom'; export { }