@epam/ai-dial-ui-kit 0.5.0-rc.61 → 0.5.0-rc.63

package/dist/dial-ui-kit.es.js

@@ -6469,6 +6469,7 @@ const Zd = () => typeof window < "u" && window.innerWidth < 640, Qd = () => {
   }, [t]), p ? /* @__PURE__ */ C(
     "div",
     {
+      role: "tablist",
       className: be(
         "h-11 flex items-center bg-layer-3 px-4",
         n
@@ -48466,48 +48467,48 @@ function V8({
     }
   };
 }
-const z8 = ({ selectionLabel: e, onClearSelection: t, actions: s }) => {
-  const i = rC(), {
-    refs: { containerRef: o, leftSectionRef: n, measureRef: r },
-    visibleActions: a,
-    hiddenActions: l
+const z8 = ({ getSelectionLabel: e, onClearSelection: t, actions: s, selectedCount: i }) => {
+  const o = rC(), {
+    refs: { containerRef: n, leftSectionRef: r, measureRef: a },
+    visibleActions: l,
+    hiddenActions: c
   } = V8({
     actions: s,
     direction: Ai.Reverse,
-    dependencies: [i],
+    dependencies: [o],
     actionsGap: G8,
     containerPadding: B8
-  });
+  }), d = e(i);
   return /* @__PURE__ */ z($e, { children: [
     /* @__PURE__ */ C(
       "div",
       {
-        ref: r,
+        ref: a,
         className: "absolute top-0 left-0 invisible pointer-events-none overflow-hidden whitespace-nowrap flex gap-3",
-        children: s.map(({ key: c, icon: d, title: u }) => /* @__PURE__ */ C(
+        children: s.map(({ key: u, icon: h, title: g }) => /* @__PURE__ */ C(
           Te,
           {
-            iconBefore: d,
-            label: u,
+            iconBefore: h,
+            label: g,
             variant: Ae.Secondary,
             hideTitleOnMobile: !0
           },
-          c
+          u
         ))
       }
     ),
     /* @__PURE__ */ z(
       "div",
       {
-        ref: o,
+        ref: n,
         className: "rounded bg-layer-0 p-2 flex justify-between items-center w-full",
         role: "toolbar",
         "aria-label": "File bulk actions",
         children: [
-          /* @__PURE__ */ C("div", { ref: n, children: /* @__PURE__ */ C(
+          /* @__PURE__ */ C("div", { ref: r, children: /* @__PURE__ */ C(
             Te,
             {
-              label: e,
+              label: d,
               onClick: t,
               textClassName: "text-accent-primary whitespace-nowrap",
               variant: Ae.Tertiary,
@@ -48515,10 +48516,10 @@ const z8 = ({ selectionLabel: e, onClearSelection: t, actions: s }) => {
             }
           ) }),
           /* @__PURE__ */ z("div", { className: "flex flex-1 w-full gap-3 items-center justify-end", children: [
-            l.length > 0 && /* @__PURE__ */ C(
+            c.length > 0 && /* @__PURE__ */ C(
               Nt,
               {
-                menu: { items: l },
+                menu: { items: c },
                 allowedPlacements: ["bottom", "bottom-start"],
                 children: /* @__PURE__ */ C(
                   Te,
@@ -48535,18 +48536,18 @@ const z8 = ({ selectionLabel: e, onClearSelection: t, actions: s }) => {
                 )
               }
             ),
-            a.map(({ key: c, icon: d, title: u, onClick: h, disabled: g }) => /* @__PURE__ */ C(
+            l.map(({ key: u, icon: h, title: g, onClick: p, disabled: f }) => /* @__PURE__ */ C(
               Te,
               {
                 className: "!p-[9px]",
-                iconBefore: d,
-                label: u,
+                iconBefore: h,
+                label: g,
                 variant: Ae.Secondary,
                 hideTitleOnMobile: !0,
-                disabled: g,
-                onClick: (p) => h?.({ key: c, domEvent: p })
+                disabled: f,
+                onClick: (m) => p?.({ key: u, domEvent: m })
               },
-              c
+              u
             ))
           ] })
         ]
@@ -50407,7 +50408,8 @@ const J8 = ({
       children: /* @__PURE__ */ C(
         z8,
         {
-          selectionLabel: `${w.size} ${l.selectionLabel}`,
+          ...l,
+          selectedCount: w.size,
           onClearSelection: y,
           actions: pn
         }

package/dist/src/components/FileManager/FileManager.d.ts

@@ -63,7 +63,7 @@ export type ToolbarOptions = Omit<DialFileManagerToolbarProps, 'areHiddenFilesVi
         uploadArchive?: string;
     };
 };
-export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection' | 'actions'> & {
+export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection' | 'actions' | 'selectedCount'> & {
     actionLabels?: {
         [DialFileManagerActions.Duplicate]?: string;
         [DialFileManagerActions.Copy]?: string;

package/dist/src/components/FileManager/components/FileManagerBulkActionsToolbar/FileManagerBulkActionsToolbar.d.ts

@@ -4,9 +4,10 @@ export interface DialActionDropdownItem extends DropdownItem {
     title: string;
 }
 export interface DialFileManagerBulkActionsToolbarProps {
-    selectionLabel: string;
+    getSelectionLabel: (selectedCount: number) => string;
     onClearSelection: () => void;
     actions: DialActionDropdownItem[];
+    selectedCount: number;
 }
 /**
  * A responsive toolbar component displayed when files or items are selected
@@ -33,7 +34,7 @@ export interface DialFileManagerBulkActionsToolbarProps {
  * @example
  * ```tsx
  * <DialFileManagerSelectionToolbar
- *   selectionLabel="3 files selected"
+ *   getSelectionLabel={(count) => `${count} files selected`}
  *   onClearSelection={() => console.log('Cleared')}
  *   actions={[
  *     { key: 'download', title: 'Download', icon: <IconDownload />, onClick: () => {} },
@@ -43,10 +44,11 @@ export interface DialFileManagerBulkActionsToolbarProps {
  * ```
  *
  * @param {object} props
- * @param {string} props.selectionLabel - Label showing current selection status (e.g., "3 files selected").
+ * @param {() => string} props.getSelectionLabel - Function to get the label showing current selection status (e.g., "3 files selected").
  * @param {() => void} props.onClearSelection - Callback invoked when the clear selection button is clicked.
  * @param {DialActionDropdownItem[]} props.actions - List of available toolbar actions.
  *   Each action defines a title, icon, key, and optional click handler.
+ * @param {number} [props.selectedCount] - Count of currently selected items.
  *
  * @returns {JSX.Element} A responsive toolbar that adjusts visible actions based on available width.
  */

package/package.json

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