@epam/ai-dial-ui-kit 0.4.0-rc.5 → 0.4.0-rc.51

package/dist/src/components/Tooltip/TooltipTrigger.d.ts

@@ -1,10 +1,12 @@
-import { HTMLProps } from 'react';
+import { FC, HTMLProps } from 'react';
+interface TooltipTriggerProps extends HTMLProps<HTMLElement> {
+    asChild?: boolean;
+}
 /**
  * The trigger element for a tooltip that can be clicked or hovered
  *
  * @param children - The element that will trigger the tooltip
  * @param [asChild=false] - Whether to render as a child element instead of wrapping in a span
  */
-export declare const DialTooltipTrigger: import('react').ForwardRefExoticComponent<Omit<HTMLProps<HTMLElement> & {
-    asChild?: boolean;
-}, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export declare const DialTooltipTrigger: FC<TooltipTriggerProps>;
+export {};

package/dist/src/hooks/use-editable-item.d.ts

@@ -0,0 +1,64 @@
+export interface UseEditableItemOptions {
+    value: string;
+    isEditing: boolean;
+    onValidate?: (value: string) => string | null;
+    onSave?: (value: string) => void;
+    onCancel?: () => void;
+    restoreOnCancel?: boolean;
+}
+interface UseEditableItemResult {
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    value: string;
+    onChange: (newValue?: string) => void;
+    invalid: boolean;
+    invalidMessage: string;
+}
+/**
+ * A React hook that manages the behavior of an inline-editable text input.
+ * It provides validation handling, cancel/restore logic, auto-focus behavior,
+ * keyboard shortcuts, and outside-click detection.
+ *
+ * @param {Object} options - Hook configuration options.
+ * @param {string} options.value - Initial value for the editable input.
+ * @param {boolean} options.isEditing - Whether the item is currently in edit mode.
+ * @param {(value: string) => string | null} [options.onValidate] - Optional validation function returning an error message or `null` if valid.
+ * @param {(value: string) => void} [options.onSave] - Callback invoked when saving a valid value.
+ * @param {() => void} [options.onCancel] - Callback invoked when canceling editing.
+ * @param {boolean} [options.restoreOnCancel=true] - Whether to restore the original value on cancel.
+ *
+ * @returns {Object} An object containing state and handlers for editable input.
+ * @returns {React.RefObject<HTMLInputElement>} return.inputRef - Ref to the editable input element.
+ * @returns {string} return.value - Current input value.
+ * @returns {(newValue?: string) => void} return.onChange - Change handler for the input value.
+ * @returns {boolean} return.invalid - Whether the current value is invalid.
+ * @returns {string} return.invalidMessage - Validation error message, if any.
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   inputRef,
+ *   value,
+ *   onChange,
+ *   invalid,
+ *   invalidMessage
+ * } = useEditableItem({
+ *   value: 'example.txt',
+ *   isEditing,
+ *   onValidate: (v) => v.trim() ? null : 'Name cannot be empty',
+ *   onSave: (v) => console.log('Saved', v),
+ *   onCancel: () => console.log('Canceled'),
+ * });
+ *
+ * return (
+ *   <input
+ *     ref={inputRef}
+ *     value={value}
+ *     onChange={(e) => onChange(e.target.value)}
+ *     aria-invalid={invalid}
+ *   />
+ *   {invalid && <span>{invalidMessage}</span>}
+ * );
+ * ```
+ */
+export declare function useEditableItem({ value: initialValue, isEditing, restoreOnCancel, onValidate, onSave, onCancel, }: UseEditableItemOptions): UseEditableItemResult;
+export {};

package/dist/src/hooks/use-flexible-actions.d.ts

@@ -0,0 +1,86 @@
+import { FlexibleActionsDirection } from '../types/flexible-actions';
+interface UseFlexibleActionsOptions<T> {
+    actions: T[];
+    direction?: FlexibleActionsDirection;
+    moreButtonWidth?: number;
+    actionsGap?: number;
+    containerPadding?: number;
+    dependencies?: unknown[];
+}
+/**
+ * A responsive layout hook that automatically determines how many action buttons
+ * can fit within a container and moves overflowing ones into a hidden list (e.g. a dropdown).
+ *
+ * It measures each action's width and dynamically recalculates visible and hidden actions
+ * whenever the container resizes or dependencies change.
+ *
+ * This hook is reusable for toolbars or action strips that can have:
+ * - a **left fixed section** (e.g., selection info),
+ * - a **right fixed section** (e.g., metadata or pagination),
+ * - and a **flexible central section** where actions may overflow.
+ *
+ * @template T - Type of the action item. Each action must have a unique `key` property.
+ *
+ * @param {Object} options - Hook configuration options.
+ * @param {T[]} options.actions - Array of all available actions.
+ * @param {FlexibleActionsDirection} [options.direction=FlexibleActionsDirection.Normal] -
+ * Defines the fill direction:
+ * - `Normal`: Fills actions from left to right.
+ * - `Reverse`: Fills actions from right to left (useful when the "More" button is on the right).
+ * @param {number} [options.moreButtonWidth=BASE_ICON_SIZE] - Reserved width for the “more” or overflow button.
+ * @param {number} [options.actionsGap=8] - Horizontal gap (in pixels) between action buttons.
+ * @param {number} [options.containerPadding=8] - Horizontal padding (in pixels) inside the container.
+ * @param {unknown[]} [options.dependencies=[]] - Dependency array to trigger recalculation when external layout-affecting
+ *   values (like screen size or visibility) change.
+ *
+ * @returns Result object containing the calculated visible and hidden actions and all relevant refs.
+ *
+ * @property {T[]} visibleActions - Actions that currently fit into the available width.
+ * @property {T[]} hiddenActions - Actions that do not fit and should be rendered inside a dropdown.
+ *
+ * @property {Object} refs - A set of refs used for layout measurement.
+ * @property {RefObject<HTMLDivElement>} refs.containerRef - Ref for the outer container. Must wrap the entire toolbar area.
+ * @property {RefObject<HTMLDivElement>} refs.measureRef - Ref for a hidden measurement container (used to measure action widths).
+ * @property {RefObject<HTMLDivElement>} refs.leftSectionRef - Ref for the left fixed section (optional).
+ * @property {RefObject<HTMLDivElement>} refs.rightSectionRef - Ref for the right fixed section (optional).
+ *
+ * @example
+ * // Example usage inside a toolbar component:
+ * const { visibleActions, hiddenActions, refs } = useFlexibleActions({
+ *   actions,
+ *   direction: FlexibleActionsDirection.Reverse,
+ *   dependencies: [isMobile],
+ * });
+ *
+ * return (
+ *   <>
+ *     <div ref={refs.measureRef} className="invisible absolute top-0 left-0 flex gap-2">
+ *       {actions.map(a => <ActionButton key={a.key} {...a} />)}
+ *     </div>
+ *
+ *     <div ref={refs.containerRef} className="flex justify-between items-center">
+ *       <div ref={refs.leftSectionRef}>Left section</div>
+ *
+ *       <div className="flex gap-2 items-center">
+ *         {hiddenActions.length > 0 && <MoreMenu items={hiddenActions} />}
+ *         {visibleActions.map(a => <ActionButton key={a.key} {...a} />)}
+ *       </div>
+ *
+ *       <div ref={refs.rightSectionRef}>Right section</div>
+ *     </div>
+ *   </>
+ * );
+ */
+export declare function useFlexibleActions<T extends {
+    key: string;
+}>({ actions, direction, moreButtonWidth, actionsGap, containerPadding, dependencies, }: UseFlexibleActionsOptions<T>): {
+    visibleActions: T[];
+    hiddenActions: T[];
+    refs: {
+        containerRef: import('react').RefObject<HTMLDivElement | null>;
+        measureRef: import('react').RefObject<HTMLDivElement | null>;
+        leftSectionRef: import('react').RefObject<HTMLDivElement | null>;
+        rightSectionRef: import('react').RefObject<HTMLDivElement | null>;
+    };
+};
+export {};

package/dist/src/hooks/use-is-mobile-screen.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A React hook that determines whether the current window size matches a mobile screen width.
+ *
+ * It initializes based on the current screen size using `isSmallScreen()` and updates its value
+ * whenever the window is resized.
+ *
+ * @returns {boolean} `true` if the viewport width matches the mobile breakpoint, otherwise `false`.
+ *
+ * @example
+ * const isMobile = useIsMobileScreen();
+ * if (isMobile) {
+ *   console.log('Mobile layout active');
+ * }
+ */
+export declare const useIsMobileScreen: () => boolean;

package/dist/src/hooks/use-screen-type.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A React hook that determines the current screen type based on the viewport width.
+ *
+ * It uses `getScreenType()` to categorize the screen as `Desktop`, `Tablet`, or `Mobile`,
+ * and automatically updates the value when the window is resized.
+ *
+ * This hook is useful for implementing responsive layouts that adapt
+ * their UI or behavior depending on screen type.
+ *
+ * @returns {ScreenType} The current screen type (`Desktop`, `Tablet`, `Mobile`, or `Undefined` for SSR).
+ *
+ * @example
+ * const screenType = useScreenType();
+ *
+ * if (screenType === ScreenType.Desktop) {
+ *   console.log('Desktop layout active');
+ * }
+ */
+export declare const useScreenType: () => import('../types/screen').ScreenType;

package/dist/src/index.d.ts

@@ -18,8 +18,8 @@ export { DialFormItem } from './components/FormItem/FormItem';
 export { DialSharedEntityIndicator } from './components/SharedEntityIndicator/SharedEntityIndicator';
 export { DialFileName } from './components/FileName/FileName';
 export { DialFolderName } from './components/FolderName/FolderName';
+export { DialDateCellRenderer } from './components/Grid/renderers/DateCellRenderer';
 export { DialTabs } from './components/Tabs/Tabs';
-export { DialTab } from './components/Tab/Tab';
 export { DialBreadcrumb } from './components/Breadcrumb/Breadcrumb';
 export { DialBreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem';
 export { DialButton } from './components/Button/Button';
@@ -56,14 +56,20 @@ export { ButtonVariant } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';
 export { PopupSize } from './types/popup';
 export { ConfirmationPopupVariant } from './types/confirmation-popup';
-export { DropdownType } from './types/dropdown';
+export { DropdownType, DropdownTrigger, DropdownItemType, } from './types/dropdown';
 export { SearchSize } from './types/search';
 export { TagVariant } from './types/tag';
 export { TabOrientation } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
-export { DialFileManagerTabs } from './types/file-manager';
+export { SelectSize, SelectVariant } from './types/select';
+export { DialFileManagerTabs, DialFileManagerActions, type DialCopiedItem, } from './types/file-manager';
+export { FlexibleActionsDirection } from './types/flexible-actions';
+export { DialItemType } from './types/item';
 export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
+export { useEditableItem } from './hooks/use-editable-item';
+export { FileManagerProvider } from './components/FileManager/FileManagerProvider';
+export { useFileManagerContext } from './components/FileManager/hooks/use-file-manager-context';
 export { StepStatus } from './models/step';
 export type { Step } from './models/step';
 export type { RadioButtonWithContent } from './models/radio';
@@ -72,5 +78,5 @@ export type { TabModel } from './models/tab';
 export type { DropdownItem } from './models/dropdown';
 export type { DialModifiedEntity } from './models/base-entity';
 export type { DialFile } from './models/file';
-export type { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
+export { DialFileNodeType, DialFilePermission, DialFileResourceType, } from './models/file';
 export { mergeClasses } from './utils/merge-classes';

package/dist/src/models/dropdown.d.ts

@@ -1,5 +1,5 @@
 import { DropdownItemType } from '../types/dropdown';
-import { ReactNode } from 'react';
+import { ReactNode, MouseEvent } from 'react';
 export interface DropdownItem {
     key: string;
     label?: ReactNode;
@@ -9,6 +9,6 @@ export interface DropdownItem {
     type?: DropdownItemType;
     onClick?: (info: {
         key: string;
-        domEvent: React.MouseEvent<Element, MouseEvent>;
+        domEvent: MouseEvent<Element, MouseEvent>;
     }) => void;
 }

package/dist/src/models/select.d.ts

@@ -2,6 +2,7 @@ import { ReactNode } from 'react';
 export interface SelectOption {
     value: string;
     label: string;
+    description?: string;
     disabled?: boolean;
     icon?: ReactNode;
 }

package/dist/src/models/tab.d.ts

@@ -2,4 +2,5 @@ export interface TabModel {
     id: string;
     name: string;
     invalid?: boolean;
+    disabled?: boolean;
 }

package/dist/src/types/file-manager.d.ts

@@ -1,5 +1,18 @@
+import { DialFileNodeType } from '../models/file';
 export declare enum DialFileManagerTabs {
     MyFiles = "my_files",
     Shared = "shared",
     Organization = "organization"
 }
+export declare enum DialFileManagerActions {
+    Copy = "copy",
+    Cut = "cut",
+    Paste = "paste",
+    Rename = "rename"
+}
+export interface DialCopiedItem {
+    sourceUrl: string;
+    destinationUrl: string;
+    overwrite?: boolean;
+    nodeType: DialFileNodeType;
+}

package/dist/src/types/flexible-actions.d.ts

@@ -0,0 +1,4 @@
+export declare enum FlexibleActionsDirection {
+    Normal = "normal",
+    Reverse = "reverse"
+}

package/dist/src/types/item.d.ts

@@ -0,0 +1,4 @@
+export declare enum DialItemType {
+    File = "file",
+    Folder = "folder"
+}

package/dist/src/types/screen.d.ts

@@ -0,0 +1,6 @@
+export declare enum ScreenType {
+    Undefined = "undefined",
+    Mobile = "mobile",
+    Tablet = "tablet",
+    Desktop = "desktop"
+}

package/dist/src/types/select.d.ts

@@ -0,0 +1,8 @@
+export declare enum SelectSize {
+    Sm = "sm",
+    Md = "md"
+}
+export declare enum SelectVariant {
+    Primary = "Primary",
+    Secondary = "Secondary"
+}

package/dist/src/types/tab.d.ts

@@ -2,3 +2,7 @@ export declare enum TabOrientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
+export declare enum SmallScreenThreshold {
+    Mobile = "mobile",
+    Tablet = "tablet"
+}

package/dist/src/utils/merge-classes.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/src/utils/mobile.d.ts

@@ -1,3 +1,4 @@
+import { ScreenType } from '../types/screen';
 /**
  * Checks if the current viewport width is within the "medium" (tablet) screen range.
  *
@@ -12,3 +13,37 @@
  * }
  */
 export declare const isMediumScreen: () => boolean;
+/**
+ * Checks if the current viewport width is within the "small" (mobile) screen range.
+ *
+ * Specifically, it returns `true` if the window width is less than 640 pixels.
+ * Safely handles server-side rendering by verifying that `window` is defined.
+ *
+ * @returns {boolean} `true` if the viewport width is less than 640px, otherwise `false`.
+ *
+ * @example
+ * if (isSmallScreen()) {
+ *   console.log('Mobile screen detected');
+ * }
+ */
+export declare const isSmallScreen: () => boolean;
+/**
+ * Determines the current screen type based on the viewport width.
+ *
+ * Categorizes the screen into one of three types defined by `ScreenType`:
+ * - `ScreenType.Desktop` for widths **≥ 1024px**
+ * - `ScreenType.Tablet` for widths **between 640px and 1023px**
+ * - `ScreenType.Mobile` for widths **< 640px**
+ *
+ * If executed in a non-browser environment (where `window` is undefined),
+ * it returns `ScreenType.Undefined`.
+ *
+ * @returns {ScreenType} The detected screen type (`Desktop`, `Tablet`, `Mobile`, or `Undefined`).
+ *
+ * @example
+ * const screenType = getScreenType();
+ * if (screenType === ScreenType.Mobile) {
+ *   console.log('Mobile layout activated');
+ * }
+ */
+export declare const getScreenType: () => ScreenType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.4.0-rc.5",
+  "version": "0.4.0-rc.51",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -77,10 +77,10 @@
     "@eslint/compat": "^1.3.1",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.31.0",
-    "@storybook/addon-a11y": "^9.1.13",
-    "@storybook/addon-docs": "^9.1.13",
-    "@storybook/addon-vitest": "^9.1.13",
-    "@storybook/react-vite": "^9.1.13",
+    "@storybook/addon-a11y": "^10.0.0",
+    "@storybook/addon-docs": "^10.0.0",
+    "@storybook/addon-vitest": "^10.0.0",
+    "@storybook/react-vite": "^10.0.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
     "@types/jsdom": "^21.1.7",
@@ -99,7 +99,7 @@
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.1.13",
+    "eslint-plugin-storybook": "^10.0.0",
     "eslint-plugin-tailwindcss": "^3.18.2",
     "globals": "^16.3.0",
     "husky": "^9.1.7",
@@ -110,8 +110,8 @@
     "prettier": "3.6.2",
     "sass": "^1.89.2",
     "sass-embedded": "^1.89.2",
-    "storybook": "^9.1.13",
-    "storybook-addon-pseudo-states": "^9.1.13",
+    "storybook": "^10.0.0",
+    "storybook-addon-pseudo-states": "^10.0.0",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",