@kentico/xperience-admin-components 14.0.0-68025 → 14.0.0-87740

package/dist/components/TreeView/TreeNode.d.ts

@@ -1,3 +1,8 @@
-import React from 'react';
 import { TreeNodeProps } from './TreeView.types';
-export declare const TreeNode: React.ForwardRefExoticComponent<TreeNodeProps & React.RefAttributes<HTMLLIElement>>;
+/**
+ * Tree node component.
+ */
+export declare const TreeNode: {
+    ({ nodeIdentifier, children, level, renderNode, renderTrailing, loading, onNodeToggle, onNodeClick, isExpanded, dataTestIdNode, dataTestIdNodeChildren, dataTestIdNodeRow, isToggleable, isSelectable, toggleDisabled, disabled, ...props }: TreeNodeProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/TreeView/TreeNodeLeadingIcon.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 import { TreeNodeLeadingIconProps } from './TreeView.types';
+/**
+ * Tree node leading icon component.
+ */
 export declare const TreeNodeLeadingIcon: React.ForwardRefExoticComponent<TreeNodeLeadingIconProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/TreeView/TreeNodeMenuAction.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { TreeNodeMenuActionProps } from './TreeView.types';
+/**
+ * Tree node menu action component.
+ */
+export declare const TreeNodeMenuAction: React.ForwardRefExoticComponent<TreeNodeMenuActionProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/TreeView/TreeNodeMenuActions.d.ts

@@ -0,0 +1,8 @@
+import { TreeNodeMenuActionsProps } from './TreeView.types';
+/**
+ * Tree node menu actions component.
+ */
+export declare const TreeNodeMenuActions: {
+    ({ title, disabled, isOpen, dataTestIdMenu, dataTestIdMenuButton, onToggle, children }: TreeNodeMenuActionsProps): JSX.Element;
+    displayName: string;
+};

package/dist/components/TreeView/TreeNodeTitle.d.ts

@@ -1,3 +1,5 @@
-/// <reference types="react" />
 import { TreeNodeTitleProps } from './TreeView.types';
-export declare const TreeNodeTitle: (props: TreeNodeTitleProps) => JSX.Element;
+/**
+ * Tree node title component.
+ */
+export declare const TreeNodeTitle: ({ isSelected, disabled, children, dataTestId, ...props }: TreeNodeTitleProps) => JSX.Element;

package/dist/components/TreeView/TreeNodeTrailingIcon.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 import { TreeNodeTrailingIconProps } from './TreeView.types';
+/**
+ * Tree node trailing icon component.
+ */
 export declare const TreeNodeTrailingIcon: React.ForwardRefExoticComponent<TreeNodeTrailingIconProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/TreeView/TreeView.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 import { TreeViewProps } from './TreeView.types';
+/**
+ * Tree view component.
+ */
 export declare const TreeView: React.ForwardRefExoticComponent<TreeViewProps & React.RefAttributes<HTMLUListElement>>;

package/dist/components/TreeView/TreeView.types.d.ts

@@ -1,32 +1,182 @@
 /// <reference types="react" />
-export interface TreeViewProps {
-    readonly selected?: string;
+import { UITestProps } from '../types';
+export interface TreeViewProps extends UITestProps {
+    /**
+     * Identifier of the selected node.
+     */
+    readonly selectedIdentifier?: string;
+    /**
+     * Children components of the tree.
+     */
     readonly children: React.ReactNode;
-    readonly dataUINameTree?: string;
+    /**
+     * Name of the CSS class passed to the tree element.
+     */
+    readonly className?: string;
 }
 export interface TreeNodeProps {
+    /**
+     * Indicates level of nesting of this node.
+     */
     readonly level: number;
-    readonly nodeId: string;
-    readonly onToggleClick?: (val: boolean) => void;
-    readonly onNodeClick?: (id: string) => void;
+    /**
+     * Identifier of the node.
+     */
+    readonly nodeIdentifier: string;
+    /**
+     * Event fired when the node state is toggled.
+     * @param isExpanded Indicates if node is currently expanded.
+     */
+    readonly onNodeToggle?: (isExpanded: boolean) => void;
+    /**
+     * Event fired when the node is clicked.
+     * @param identifier ID of the clicked node.
+     */
+    readonly onNodeClick?: (identifier: string) => void;
+    /**
+     * Direct children nodes of the current node.
+     */
     readonly children?: React.ReactNode;
+    /**
+     * Indicates if node is in the loading state. Defaults to `false`.
+     */
     readonly loading?: boolean;
-    readonly isOpened?: boolean;
-    readonly disableCollapse?: boolean;
+    /**
+     * Indicates if node is expanded. Defaults to `false`.
+     */
+    readonly isExpanded?: boolean;
+    /**
+     * Indicates if node can be toggled. Defaults to `true`.
+     */
+    readonly isToggleable?: boolean;
+    /**
+     * Indicates if node can be selected. Defaults to `true`.
+     */
+    readonly isSelectable?: boolean;
+    /**
+     * Indicates if node can be toggled. Defaults to `false`.
+     */
+    readonly toggleDisabled?: boolean;
+    /**
+     * Function to render main part of the node. Components rendered with this function are wrapped by element ensuring proper background color when node is selected, hovered or disabled.
+     * @param isNodeSelected Indicates if node is currently selected.
+     */
     readonly renderNode: (isNodeSelected: boolean) => React.ReactNode;
-    readonly dataUINameNode?: string;
-    readonly dataUINameNodeChildren?: string;
+    /**
+     * Function to render trailing sticky part of the node. Ensures only proper position of rendered components.
+     * @param nodeRef Reference to the node HTML element.
+     * @param isNodeSelected Indicates if node is currently selected.
+     * @param isNodeHovered Indicates if node is currently hovered.
+     * @param onActionableclick Event to fire when actionable element is clicked to notify the tree node component.
+     */
+    readonly renderTrailing?: (nodeRef: Element | null, isNodeSelected: boolean, isNodeHovered: boolean, onActionableClick: () => void) => React.ReactNode;
+    /**
+     * Indicates if node is disabled. Defaults to `false`.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Test-id attribute of the current node.
+     */
+    readonly dataTestIdNode?: string;
+    /**
+     * Test-id of the row of the node.
+     */
+    readonly dataTestIdNodeRow?: string;
+    /**
+     * Test-id attribute of the node's children.
+     */
+    readonly dataTestIdNodeChildren?: string;
 }
-interface TreeNodeContentSharedProps {
+interface TreeNodeContentSharedProps extends UITestProps {
+    /**
+     * Indicates if current node is selected. Defaults to `false`.
+     */
     readonly isSelected: boolean;
+    /**
+     * Indicates if current node is disabled. Defaults to `false`.
+     */
+    readonly disabled?: boolean;
 }
 export interface TreeNodeLeadingIconProps extends TreeNodeContentSharedProps {
+    /**
+     * Children component.
+     */
     readonly children: React.ReactNode;
 }
 export interface TreeNodeTitleProps extends TreeNodeContentSharedProps {
+    /**
+     * Tree node title string.
+     */
     readonly children: string;
 }
-export interface TreeNodeTrailingIconProps extends TreeNodeContentSharedProps {
+export interface TreeNodeTrailingIconProps extends UITestProps {
+    /**
+     * Children component.
+     */
     readonly children: React.ReactNode;
+    /**
+     * Indicates if icon is disabled. Defaults to `false`.
+     */
+    readonly disabled?: boolean;
+}
+export interface TreeNodeMenuActionsProps {
+    /**
+     * Title of the actions button.
+     */
+    readonly title: string;
+    /**
+     * Indicates if the actions button is disabled. Defaults to `false`.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Indicates if the menu is opened. Defaults to `false`.
+     */
+    readonly isOpen: boolean;
+    /**
+     * Event fired when menu is toggled.
+     * @param isOpen Indicates if the menu is opened.
+     */
+    readonly onToggle?: (isOpen: boolean) => void;
+    /**
+     * Children component.
+     */
+    readonly children: React.ReactNode;
+    /**
+     * Test-id attribute of the menu.
+     */
+    readonly dataTestIdMenu?: string;
+    /**
+     * Test-id attribute of the menus button.
+     */
+    readonly dataTestIdMenuButton?: string;
+}
+export interface TreeNodeMenuActionProps extends UITestProps {
+    /**
+     * Label of the action.
+     */
+    readonly label: string;
+    /**
+     * Indicates if the action is disabled. Defaults to `false`.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Event fired on action click.
+     */
+    readonly onClick: () => void;
+}
+export interface TreeNodeAction {
+    /**
+     * Label of the action.
+     */
+    readonly label: string;
+    /**
+     * Indicates if the action is disabled. Defaults to `false`.
+     */
+    readonly disabled?: boolean;
+    /**
+     * Event handler fired when action of certain type is executed.
+     * @param action Action that was executed.
+     */
+    readonly actionExecutor: (action: TreeNodeAction) => void;
 }
 export {};

package/dist/components/TreeView/hooks/useTreeNavigationFocus.d.ts

@@ -0,0 +1,9 @@
+import { TreeNodeAction } from '../TreeView.types';
+import { UseTreeNavigationFocusProps } from './useTreeNavigationFocus.types';
+/**
+ * Handles focus in the tree navigation.
+ */
+export declare const useTreeNavigationFocus: ({ onFocus, onBlur, isNavigationOpened }: UseTreeNavigationFocusProps) => {
+    initNavigationFocus: (actions: TreeNodeAction[], currentlyFocusedElement: HTMLElement) => void;
+    navigationButtonElement: HTMLElement | undefined;
+};

package/dist/components/TreeView/hooks/useTreeNavigationFocus.types.d.ts

@@ -0,0 +1,14 @@
+export interface UseTreeNavigationFocusProps {
+    /**
+     * Function that is called when the navigation gains focus.
+     */
+    readonly onFocus: () => void;
+    /**
+     * Function that is called when the navigation looses focus.
+     */
+    readonly onBlur: () => void;
+    /**
+     * Indicates if the navigation is opened and focus is handled in this hook.
+     */
+    readonly isNavigationOpened: boolean;
+}

package/dist/components/TreeView/hooks/useTreeNodeHover.d.ts

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from 'react';
+/**
+ * Simplified hook for node hover to ensure correct hover even for the node menu.
+ */
+export declare function useTreeNodeHover(): {
+    hoverProps: HTMLAttributes<HTMLElement>;
+    isHovered: boolean;
+    removeHover: () => void;
+};

package/dist/components/TreeView/index.d.ts

@@ -1,6 +1,9 @@
 export { TreeView } from './TreeView';
-export type { TreeViewProps, TreeNodeProps, TreeNodeLeadingIconProps, TreeNodeTitleProps, TreeNodeTrailingIconProps } from './TreeView.types';
+export type { TreeViewProps, TreeNodeProps, TreeNodeLeadingIconProps, TreeNodeTitleProps, TreeNodeTrailingIconProps, TreeNodeMenuActionsProps, TreeNodeMenuActionProps, TreeNodeAction } from './TreeView.types';
 export { TreeNode } from './TreeNode';
 export { TreeNodeLeadingIcon } from './TreeNodeLeadingIcon';
 export { TreeNodeTitle } from './TreeNodeTitle';
 export { TreeNodeTrailingIcon } from './TreeNodeTrailingIcon';
+export { TreeNodeMenuActions } from './TreeNodeMenuActions';
+export { TreeNodeMenuAction } from './TreeNodeMenuAction';
+export { useTreeNavigationFocus } from './hooks/useTreeNavigationFocus';

package/dist/components/UploadTile/UploadTile.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 import { UploadTileProps } from './UploadTile.types';
+/**
+ * Upload tile component.
+ */
 export declare const UploadTile: React.ForwardRefExoticComponent<UploadTileProps & React.RefAttributes<HTMLDivElement>>;

package/dist/components/UploadTile/UploadTile.types.d.ts

@@ -1,8 +1,42 @@
+/**
+ * Indicates the size of the upload tile
+ */
+export declare enum UploadTileSize {
+    Full = "Full",
+    Compact = "Compact"
+}
 export interface UploadTileProps {
+    /**
+      * Event handler fired when file is being uploaded.
+      * @param files list of uploaded files.
+      */
     readonly onUpload: (files: FileList) => void;
+    /**
+      * Text displayed in the first line of the label.
+      */
     readonly firstLineLabel: string;
+    /**
+      * Text displayed in the second line of the label.
+      */
     readonly secondLineLabel: string;
+    /**
+     * Text displayed in button label.
+     */
     readonly buttonLabel: string;
+    /**
+     * Indicates if the upload tile is disabled. Defaults to `false`.
+     */
     readonly disabled?: boolean;
+    /**
+     * Indicates if the tooltip is disabled. Defaults to `false`.
+     */
     readonly disabledTooltip?: string;
+    /**
+     * Size of the upload tile.
+     */
+    readonly size: UploadTileSize;
+    /**
+     * File types which tile should accept
+     */
+    readonly acceptFiles?: string;
 }

package/dist/components/UploadTile/index.d.ts

@@ -1,2 +1,3 @@
 export { UploadTile } from './UploadTile';
+export { UploadTileSize } from './UploadTile.types';
 export type { UploadTileProps } from './UploadTile.types';

package/dist/components/VerticalMenu/ActionMenu/ActionMenu.types.d.ts

@@ -1,5 +1,5 @@
 import { VerticalMenuProps } from '../Common/VerticalMenu';
-export interface ActionMenuProps extends Omit<VerticalMenuProps, 'menuType' | 'pinnedItem'> {
+export interface ActionMenuProps extends Omit<VerticalMenuProps, 'pinnedItem'> {
 }
 export interface ActionMenuHeadlineProps {
     readonly label: string;

package/dist/components/VerticalMenu/Common/MenuDropdown/MenuDropdown.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { MenuDropdownProps } from './MenuDropdown.types';
 declare const MenuDropdown: {
     (props: MenuDropdownProps): JSX.Element;

package/dist/components/VerticalMenu/Common/VerticalMenu/VerticalMenu.types.d.ts

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 export declare enum VerticalMenuType {
     ActionMenu = "action-menu",
-    SelectMenu = "select-menu"
+    SelectMenu = "select-menu",
+    SelectGroupMenu = "select-group-menu"
 }
 export interface VerticalMenuProps {
     readonly pinnedItem?: () => React.ReactNode;
-    readonly menuType: VerticalMenuType;
+    readonly menuType?: VerticalMenuType;
     readonly children: React.ReactNode;
+    readonly maxContentHeight?: string;
 }

package/dist/components/index.d.ts

@@ -40,3 +40,8 @@ export * from './RadioGroup';
 export * from './NotificationBar';
 export * from './FormItemWrapper';
 export * from './Breadcrumbs';
+export * from './Spinner';
+export * from './ActionTile';
+export * from './SelectGroup';
+export * from './Tippy';
+export * from './types';

package/dist/components/types/UITests.types.d.ts

@@ -0,0 +1,6 @@
+export interface UITestProps {
+    /**
+     * Test id data attribute.
+     */
+    readonly dataTestId?: string;
+}

package/dist/components/types/index.d.ts

@@ -0,0 +1 @@
+export type { UITestProps } from './UITests.types';