@epam/ai-dial-ui-kit 0.4.0-rc.27 → 0.4.0-rc.28

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 {React.RefObject<HTMLDivElement>} refs.containerRef - Ref for the outer container. Must wrap the entire toolbar area.
+ * @property {React.RefObject<HTMLDivElement>} refs.measureRef - Ref for a hidden measurement container (used to measure action widths).
+ * @property {React.RefObject<HTMLDivElement>} refs.leftSectionRef - Ref for the left fixed section (optional).
+ * @property {React.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/index.d.ts

@@ -63,6 +63,7 @@ export { TabOrientation } from './types/tab';
 export type { DialBreadcrumbPathItem } from './models/breadcrumb';
 export { FormItemOrientation } from './types/form-item';
 export { DialFileManagerTabs, DialFileManagerActions, } from './types/file-manager';
+export { FlexibleActionsDirection } from './types/flexible-actions';
 export { useDialFileManagerTabs } from './components/FileManager/hooks/use-file-manager-tabs';
 export { FileManagerProvider } from './components/FileManager/FileManagerProvider';
 export { useFileManagerContext } from './components/FileManager/hooks/use-file-manager-context';

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.4.0-rc.27",
+  "version": "0.4.0-rc.28",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",