@kentico/xperience-admin-components 26.6.3 → 27.0.1

package/dist/entry.d.ts

@@ -21,8 +21,17 @@ import { RefObject } from 'react';
 import { RegisterCommandParameters } from 'froala-editor';
 
 export declare interface ActionCell extends TableCell {
+    /**
+     * Actions that should be available in the action cell.
+     */
     actions: TableAction[];
+    /**
+     * Maximun number of visible actions.
+     */
     maxVisibleRowActions?: number;
+    /**
+     * Handler to execute the action.
+     */
     onInvokeAction: (action: TableAction) => Promise<void>;
 }
 
@@ -303,7 +312,7 @@ declare interface BaseButtonProps extends UITestProps {
     readonly disabled?: boolean;
     readonly borderless?: boolean;
     readonly tabIndex?: number;
-    readonly dragHandleProps?: DraggableProvidedDragHandleProps;
+    readonly dragHandleProps?: DraggableProvidedDragHandleProps | null;
     readonly className?: string;
 }
 
@@ -452,6 +461,10 @@ declare interface BaseTileProps extends BaseTileBaseProps, UITestProps {
      * Tile icon in preview.
      */
     readonly previewIcon?: IconName;
+    /**
+     * Tooltip to display when tile is disabled.
+     */
+    readonly inactiveMessage?: string;
 }
 
 declare enum BaseTileType {
@@ -822,6 +835,7 @@ export declare enum Colors {
     BorderDefault = "var(--color-border-default)",
     BorderDisabled = "var(--color-border-disabled)",
     BorderHover = "var(--color-border-hover)",
+    BorderWarning = "var(--color-border-warning)",
     CommentBackgroundSelected = "var(--color-comment-background-selected)",
     DividerDefault = "var(--color-divider-default)",
     Focus = "var(--color-focus)",
@@ -929,6 +943,9 @@ export declare interface ColumnProps extends LayoutComponentProps, UITestProps {
 }
 
 export declare interface ComponentCell extends TableCell {
+    /**
+     * Component to be displayed in the cell.
+     */
     component: any;
 }
 
@@ -1054,7 +1071,7 @@ export declare const ContentItemTilePreview: React_2.ForwardRefExoticComponent<C
 declare interface ContentItemTilePreviewProps extends ContentItemTileExtendedProps, BaseTileBaseProps, Pick<ContentItemTileProps, 'onClick' | 'isSelected' | 'onChange' | 'isCheckboxVisible' | 'actions' | 'dataTestId'> {
 }
 
-declare interface ContentItemTileProps extends ContentItemTileExtendedProps, Pick<BaseTileProps, 'errorState' | 'url' | 'uploadState' | 'name' | 'disabled' | 'isCheckboxVisible' | 'isSelected' | 'isDragging' | 'onChange' | 'onClick' | 'dataTestId' | 'actions'> {
+declare interface ContentItemTileProps extends ContentItemTileExtendedProps, Pick<BaseTileProps, 'errorState' | 'url' | 'uploadState' | 'name' | 'disabled' | 'isCheckboxVisible' | 'isSelected' | 'isDragging' | 'onChange' | 'onClick' | 'dataTestId' | 'actions' | 'inactiveMessage'> {
     /**
      * Type of content item.
      */
@@ -1069,7 +1086,7 @@ export declare const ContentItemTileSelectable: React_2.ForwardRefExoticComponen
 /**
  * Selected props from ContentItemTileProps for Selectable tile.
  */
-declare interface ContentItemTileSelectableProps extends ContentItemTileExtendedProps, BaseTileBaseProps, Pick<ContentItemTileProps, 'onClick' | 'isSelected' | 'onChange' | 'isDragging' | 'dataTestId'> {
+declare interface ContentItemTileSelectableProps extends ContentItemTileExtendedProps, BaseTileBaseProps, Pick<ContentItemTileProps, 'onClick' | 'isSelected' | 'onChange' | 'isDragging' | 'dataTestId' | 'inactiveMessage'> {
 }
 
 /**
@@ -1471,7 +1488,7 @@ export declare interface FormItemWrapperProps extends UITestProps {
 }
 
 /** Configurator enables custom Froala Typescript plugins to use global Froala configuration methods, which would be unavailable due to different module context. */
-declare interface FroalaEditorConfigurator {
+export declare interface FroalaEditorConfigurator {
     readonly defineIcon: (iconName: string, parameters: Partial<DefineIconParameters>) => void;
     readonly registerCommand: (buttonName: string, parameters: Partial<RegisterCommandParameters>) => void;
     readonly disableButton: (buttonName: string, buttonTitle?: string) => void;
@@ -1591,27 +1608,6 @@ export declare enum HeadlineSize {
     L = "L"
 }
 
-export declare const HorizontalActionMenu: React_2.ForwardRefExoticComponent<HorizontalActionMenuProps & React_2.RefAttributes<HTMLDivElement>>;
-
-export declare interface HorizontalActionMenuItemProps {
-    readonly label: string;
-    readonly destructive?: boolean;
-    readonly disabled?: boolean;
-    readonly leadingIcon?: IconName;
-    readonly trailingIcon?: IconName;
-    readonly onClick: (e: (MouseEvent_2<HTMLElement> | KeyboardEvent_2<HTMLElement>)) => void;
-}
-
-declare interface HorizontalActionMenuLabelProps {
-    readonly text?: string;
-    readonly counter?: number;
-}
-
-export declare interface HorizontalActionMenuProps {
-    readonly actions: HorizontalActionMenuItemProps[];
-    readonly label?: HorizontalActionMenuLabelProps;
-}
-
 declare type HTMLButtonProps = Pick<React.ButtonHTMLAttributes<HTMLButtonElement>, 'title' | 'onClick'>;
 
 export declare const Icon: React_2.ForwardRefExoticComponent<IconProps & React_2.RefAttributes<SVGSVGElement>>;
@@ -1695,6 +1691,12 @@ export declare interface InlineProps extends LayoutComponentProps, UITestProps {
     readonly spacing?: Spacing;
     readonly spacingX?: Spacing;
     readonly spacingY?: Spacing;
+    readonly spacingXDirection?: InlineSpacingXDirection;
+}
+
+export declare enum InlineSpacingXDirection {
+    Left = "Left",
+    Right = "Right"
 }
 
 export declare const Input: React_2.ForwardRefExoticComponent<InputProps & React_2.RefAttributes<HTMLDivElement>>;
@@ -2085,6 +2087,7 @@ export declare const KXIcons: {
     'xp-monitor-smartphone': ForwardRefExoticComponent<GeneratedIconProps & RefAttributes<SVGSVGElement>>;
     'xp-monitor': ForwardRefExoticComponent<GeneratedIconProps & RefAttributes<SVGSVGElement>>;
     'xp-mug': ForwardRefExoticComponent<GeneratedIconProps & RefAttributes<SVGSVGElement>>;
+    'xp-multi-channel': ForwardRefExoticComponent<GeneratedIconProps & RefAttributes<SVGSVGElement>>;
     'xp-newspaper': ForwardRefExoticComponent<GeneratedIconProps & RefAttributes<SVGSVGElement>>;
     'xp-note': ForwardRefExoticComponent<GeneratedIconProps & RefAttributes<SVGSVGElement>>;
     'xp-notebook': ForwardRefExoticComponent<GeneratedIconProps & RefAttributes<SVGSVGElement>>;
@@ -2333,7 +2336,13 @@ declare interface NameButtonProps extends Pick<ToggleButtonBaseProps, 'onClick'
 }
 
 export declare interface NamedComponentCell extends TableCell {
+    /**
+     * Name of the component to display in the cell.
+     */
     name: string;
+    /**
+     * Properties of the component.
+     */
     componentProps: Record<string, any>;
 }
 
@@ -2400,6 +2409,10 @@ export declare interface OptionTileProps extends Pick<React.ButtonHTMLAttributes
     readonly shouldExpand?: boolean;
 }
 
+/**
+ * @deprecated Component is deprecated and will be removed in the next version.
+ * Use SelectorItemInfoTableCellComponent instead.
+ */
 export declare const PageInfoTableCellComponent: ({ iconName, name, disabled }: PageInfoTableCellComponentProps) => JSX.Element;
 
 export declare interface PageInfoTableCellComponentProps {
@@ -2540,6 +2553,12 @@ export declare enum RadioGroupSize {
  */
 export declare const RichTextEditor: React_2.ForwardRefExoticComponent<RichTextEditorProps & React_2.RefAttributes<HTMLDivElement>>;
 
+/**
+ * Describes options and configuration of a custom plugin added to Rich text editor.
+ */
+export declare interface RichTextEditorPluginOptionsBase {
+}
+
 export declare interface RichTextEditorPluginProps {
     readonly componentName: string;
     /** Reference to RichTextEditor providing higher-scope functions (i.e. inserting link/image or executing a command). */
@@ -2548,6 +2567,8 @@ export declare interface RichTextEditorPluginProps {
     readonly froalaEditorRef?: MutableRefObject<any>;
     /** Configurator is used to access Froala configuration methods usually available in global JS scope and unavailable for a plugin in different JS module. */
     readonly froalaEditorConfigurator: FroalaEditorConfigurator;
+    /** Options and configuration of RTE plugins. */
+    readonly pluginOptions?: RichTextEditorPluginOptionsBase;
 }
 
 export declare interface RichTextEditorProps extends UITestProps {
@@ -2715,6 +2736,7 @@ declare interface SelectGroupCellProps {
     readonly icon?: IconName;
     readonly ellipsis?: boolean;
     readonly onClick?: MouseEventHandler<HTMLElement>;
+    readonly selectionDisabled?: boolean;
 }
 
 export declare interface SelectGroupProps<SelectShape> {
@@ -2729,6 +2751,14 @@ export declare const SelectMenu: React_2.ForwardRefExoticComponent<SelectMenuPro
 export declare interface SelectMenuProps extends Omit<VerticalMenuProps, 'menuType'> {
 }
 
+export declare const SelectorItemInfoTableCellComponent: ({ iconName, name, disabled }: SelectorItemInfoTableCellComponentProps) => JSX.Element;
+
+export declare interface SelectorItemInfoTableCellComponentProps {
+    readonly iconName?: IconName;
+    readonly name: string;
+    readonly disabled: boolean;
+}
+
 export declare interface SelectProps extends Omit<InputProps, 'type' | 'actionElement' | 'onChange'>, Pick<DropDownActionMenuProps, 'maxContentHeight'> {
     readonly onChange: (value?: string) => void;
     readonly children: React.ReactNode;
@@ -2817,7 +2847,68 @@ export declare interface SideMenuProps extends UITestProps {
 
 export declare const SidePanel: React_2.ForwardRefExoticComponent<SidePanelProps & React_2.RefAttributes<HTMLDivElement>>;
 
-declare interface SidePanelContextType {
+/**
+ * Emitted when the side panel has been request to close
+ */
+export declare interface SidePanelCloseEvent {
+    /**
+     * Source of the closing event
+     */
+    readonly source: SidePanelCloseSource;
+}
+
+export declare enum SidePanelCloseSource {
+    /**
+     * Clicking on the close button.
+     */
+    UserClosed = "user_closed",
+    /**
+     * When the user clicks outside the {@link SidePanel}`s content.
+     */
+    ClickedOutside = "clicked_outside",
+    /**
+     * Foreign panel wants to be open, so it request all other panels to close.
+     */
+    ForeignPanelOpen = "foreign_panel_open",
+    /**
+     * The request for panel side opening has been blocked.
+     */
+    BlockedByForeignPanel = "blocked_by_foreign_panel",
+    /**
+     *
+     */
+    ParentPanelClosed = "parent_panel_closed"
+}
+
+export declare interface SidePanelConfig {
+    ref: RefObject<HTMLDivElement>;
+    /**
+     * Requests the panel to close. This usually happens if user wants to open new panel from outside of current panel.
+     * @param event Information about what triggered the panel closing.
+     * @returns If void is returned, it is assumed the panel closed right away. If promise is returned, then it will wait with.
+     * @throws Throws if the closing has been blocked by to panel.
+     * opening/closing of other panels until it is resolved. Rejecting the close will keep the panel open as is.
+     * This is useful if you want add prompt asking if user wants to discard unsaved changes or not.
+     */
+    close: (event: SidePanelCloseEvent) => Promise<void> | void;
+    /**
+     * Called when panel becomes on top of panel stack.
+     */
+    onRevealed?: () => void;
+    /**
+     * Called when panel becomes overlaid by another panel.
+     * @param isUserInteractable Specifies if user can interact with the panel even through, the panel is covered by another panel.
+     */
+    onCovered?: (isUserInteractable: boolean) => void;
+    /**
+     * Specifies if the panel will close when user click outside of the panel
+     */
+    isOutsideClickCloseable: boolean;
+}
+
+export declare const SidePanelManager: ({ children }: SidePanelManagerProps) => JSX.Element;
+
+declare interface SidePanelManagerContextType {
     /**
      * Gets the current side panel id.
      */
@@ -2825,19 +2916,11 @@ declare interface SidePanelContextType {
     /**
      * Adds the side panel under the sidePanelId.
      */
-    readonly addSidePanel: (sidePanelId: string, ref: RefObject<HTMLDivElement>) => void;
+    readonly addSidePanel: (id: string, parentSidePanelId: string | undefined, config: SidePanelConfig) => Promise<void>;
     /**
      * Removes the side panel from the provider.
      */
     readonly removeSidePanel: (sidePanelId: string) => void;
-    /**
-     * Gets the level of nesting of the sidePanelId panel.
-     */
-    readonly getSidePanelLevel: (sidePanelId: string) => number;
-    /**
-     * Gets the current side panel level of nesting.
-     */
-    readonly getOpenedSidePanelLevel: () => number;
     /**
      * Gets the side panel offset of the sidePanelId.
      */
@@ -2846,17 +2929,21 @@ declare interface SidePanelContextType {
      * Gets the current side panel ref.
      */
     readonly getCurrentSidePanelRef: () => RefObject<HTMLDivElement> | null;
+    /**
+     * Container holding all side panels.
+     */
+    readonly sidePanelContainer?: HTMLDivElement;
+}
+
+declare interface SidePanelManagerProps {
+    readonly children: React_2.ReactNode;
 }
 
 export declare interface SidePanelProps extends UITestProps {
     /**
      * Headline of the SidePanel.
      */
-    readonly headline: string;
-    /**
-     * Function called when clicking on the close and if onOutsideCloseClick not specified, too.
-     */
-    readonly onCloseClick: () => void;
+    readonly headline: ReactNode;
     /**
      * Children of the SidePanel.
      */
@@ -2864,7 +2951,7 @@ export declare interface SidePanelProps extends UITestProps {
     /**
      * Footer of the SidePanel.
      */
-    readonly footer: React_2.ReactNode;
+    readonly footer?: React_2.ReactNode;
     /**
      * Notification bar.
      */
@@ -2887,16 +2974,42 @@ export declare interface SidePanelProps extends UITestProps {
      */
     readonly className?: string;
     /**
-     * If specified, when the user clicks outside the SidePanel, this function will be called.
-     * Otherwise the SidePanel will use the default onCloseClick action.
+     * Called when the panel should close due to some action specified in {@link event}
+     * @param event Specifying close information
+     * @returns May return a promise if the closing is not instantaneous or closing can be rejected. This is useful if you want show prompt before side panel close.
      */
-    readonly onOutsideCloseClick?: () => void;
-}
-
-export declare const SidePanelProvider: ({ children }: SidePanelProviderProps) => JSX.Element;
-
-declare interface SidePanelProviderProps {
-    readonly children: React_2.ReactNode;
+    readonly onClose: (event: SidePanelCloseEvent) => Promise<void> | void;
+    /**
+     * Can the side panel maximize and cover whole content? This will add minimize/maximize button to panels`s header.
+     * By default false.
+     */
+    readonly isMaximizable?: boolean;
+    /**
+     * Indicated if the side-panel can be close by clicking outside.
+     * By default true.
+     */
+    readonly isOutsideClickCloseable?: boolean;
+    /**
+     * Add tooltip text to header buttons.
+     */
+    readonly tooltips?: {
+        /**
+         * Close button tooltip.
+         */
+        readonly close?: string;
+        /**
+         * Minimize button tooltip.
+         */
+        readonly minimize?: string;
+        /**
+         * Maximize button tooltip.
+         */
+        readonly maximize?: string;
+    };
+    /**
+     * Class name of the content holding inner component.
+     */
+    readonly contentClassName?: string;
 }
 
 export declare enum SidePanelSize {
@@ -3005,7 +3118,13 @@ export declare enum SnackbarSpacing {
 }
 
 export declare interface SortModel {
+    /**
+     * Column name to sort by.
+     */
     sortBy: string;
+    /**
+     * Type of the sorting (ascending/descending).
+     */
     sortType: SortType;
 }
 
@@ -3035,6 +3154,21 @@ export declare interface SpinnerProps extends Omit<IconProps, 'name'> {
     className?: string;
 }
 
+export declare const SplitButton: {
+    ({ size, color, disabled, inProgress, icon, open, onToggle, children, onClick, title, ...props }: SplitButtonProps): JSX.Element;
+    displayName: string;
+};
+
+export declare interface SplitButtonProps extends Omit<BaseButtonProps, 'renderComponent' | 'trailingIcon' | 'active' | 'badge' | 'fillContainer' | 'destructive' | 'borderless' | 'className'> {
+    readonly color: ButtonColor.Primary | ButtonColor.Secondary;
+    readonly size: ButtonSize.S | ButtonSize.M | ButtonSize.L;
+    readonly onToggle?: (isOpen: boolean) => void;
+    readonly open?: boolean;
+    readonly onClick: () => void;
+    readonly children: React.ReactNode;
+    readonly title?: string;
+}
+
 export declare const Stack: React_2.ForwardRefExoticComponent<StackProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface StackProps extends LayoutComponentProps {
@@ -3073,13 +3207,23 @@ export declare interface StatusComponentProps {
     readonly labelColor: keyof typeof Colors;
 }
 
-export declare const StickyHeader: ({ children }: StickyHeaderProps) => JSX.Element;
+export declare const StickyHeader: ({ children, className }: StickyHeaderProps) => JSX.Element;
 
 export declare interface StickyHeaderProps {
+    /**
+     * Children elements.
+     */
     readonly children: React_2.ReactNode;
+    /**
+     * CSS class name of the sticky header.
+     */
+    readonly className?: string;
 }
 
 export declare interface StringCell extends TableCell {
+    /**
+     * Value of the cell.
+     */
     value: string;
 }
 
@@ -3154,26 +3298,75 @@ export declare enum SystemTheme {
 export declare const Table: React_2.ForwardRefExoticComponent<TableProps & React_2.RefAttributes<HTMLDivElement>>;
 
 export declare interface TableAction {
+    /**
+     * Identifier of the action.
+     */
+    readonly identifier?: string;
+    /**
+     * Label of the action.
+     */
     label: string;
+    /**
+     * Tooltip of the action button.
+     */
     title?: string;
+    /**
+     * Icon of the action.
+     */
     icon: IconName;
+    /**
+     * Indicates if the action is disabled.
+     */
     disabled: boolean;
+    /**
+     * Indicates if the action is destructive.
+     */
     destructive: boolean;
 }
 
 export declare interface TableCell {
+    /**
+     * Type of the cell.
+     */
     type: CellType;
+    /**
+     * Indicates if the cell is disabled.
+     */
     disabled?: boolean;
 }
 
 export declare interface TableColumn {
+    /**
+     * Name of the column.
+     */
     name: string;
+    /**
+     * Caption of the column.
+     */
     caption: string;
+    /**
+     * Indicates if the column is visible.
+     */
     visible: boolean;
+    /**
+     * Minimun width of the column.
+     */
     minWidth: number;
+    /**
+     * Maximum width of the column.
+     */
     maxWidth: number;
+    /**
+     * Content type of the columns.
+     */
     contentType: ColumnContentType;
+    /**
+     * Indicates if the columns is sortable.
+     */
     sortable: boolean;
+    /**
+     * Indicates if the column is searchable via search input.
+     */
     searchable: boolean;
 }
 
@@ -3190,23 +3383,84 @@ export declare interface TableHeaderProps extends UITestProps {
 }
 
 export declare interface TableProps extends UITestProps {
+    /**
+     * Columns of the table.
+     */
     readonly columns: TableColumn[];
+    /**
+     * Rows of the table.
+     */
     readonly rows: TableRow[] | undefined;
+    /**
+     * Indicates if the table should have selectable rows.
+     */
     readonly selectable?: boolean;
+    /**
+     * Sort model of the table.
+     */
     readonly sortModel?: SortModel;
+    /**
+     * Label for select row checkbox.
+     */
     readonly selectRowLabel?: string;
+    /**
+     * Label for the select all rows checkbox.
+     */
     readonly selectAllRowsLabel?: string;
+    /**
+     * Indicates if the header of the table should be visible.
+     */
     readonly isHeaderVisible?: boolean;
+    /**
+     * Maximum number of visible actions in a table row.
+     */
     readonly maxVisibleRowActions?: number;
+    /**
+     * Identifiers of the rows that should be preselected in the table.
+     */
+    readonly preselectedRows?: unknown[];
+    /**
+     * Header class name.
+     */
+    readonly headerClassName?: string;
+    /**
+     * Function to render table pre-header.
+     */
     readonly renderPreheader?: () => ReactNode;
-    readonly onSelectedItemsChange?: (selectedItems: Number[]) => void;
+    /**
+     * Handler that is called when selection of the rows changes.
+     * @param selectedItems Identifiers of selected rows.
+     */
+    readonly onSelectedItemsChange?: (selectedItems: unknown[]) => void;
+    /**
+     * Handler that fires when the sort is changed.
+     * @param sortModel Sort model.
+     */
     readonly onSortChange?: (sortModel: SortModel) => void;
-    readonly onRowClick?: (index: number) => void;
+    /**
+     * Handler that fires when the row is clicked.
+     * @param identifier Identifier of the clicked row.
+     */
+    readonly onRowClick?: (identifier: unknown) => void;
+    /**
+     * Indicates if the row selection should be toggled when the row is clicked on and table is in selectable mode (property {@link TableProps.selectable} is set to true).
+     * Callback {@link TableProps.onRowClick} is invoked if defined.
+     */
+    readonly toggleSelectionOnRowClick?: boolean;
 }
 
 export declare interface TableRow {
+    /**
+     * Identifier of the row.
+     */
     identifier: any;
+    /**
+     * Table row cells.
+     */
     cells: TableCell[];
+    /**
+     * Indicates if the row is disabled.
+     */
     disabled: boolean;
 }
 
@@ -3719,13 +3973,17 @@ export declare type TreeNodeProps<TIsDraggable = boolean> = TIsDraggable extends
 /**
  * Tree node title component.
  */
-export declare const TreeNodeTitle: ({ isSelected, disabled, children, dataTestId, ...props }: TreeNodeTitleProps) => JSX.Element;
+export declare const TreeNodeTitle: ({ isSelected, disabled, children, dataTestId, tooltipText, ...props }: TreeNodeTitleProps) => JSX.Element;
 
 export declare interface TreeNodeTitleProps extends TreeNodeContentSharedProps {
     /**
      * Tree node title string.
      */
     readonly children: string;
+    /**
+     * Text of the tooltip.
+     */
+    readonly tooltipText?: string;
 }
 
 /**
@@ -3846,7 +4104,7 @@ export declare const useMobileKeyboard: (minKeyboardHeight?: number) => boolean;
 
 export declare const useScrollDown: (throttleInterval?: number) => boolean;
 
-export declare const useSidePanel: () => SidePanelContextType;
+export declare const useSidePanel: () => SidePanelManagerContextType;
 
 export declare const useSnackbar: () => SnackbarContextType;