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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -48467,48 +48467,48 @@ function V8({
48467
48467
  }
48468
48468
  };
48469
48469
  }
48470
- const z8 = ({ selectionLabel: e, onClearSelection: t, actions: s }) => {
48471
- const i = rC(), {
48472
- refs: { containerRef: o, leftSectionRef: n, measureRef: r },
48473
- visibleActions: a,
48474
- hiddenActions: l
48470
+ const z8 = ({ getSelectionLabel: e, onClearSelection: t, actions: s, selectedCount: i }) => {
48471
+ const o = rC(), {
48472
+ refs: { containerRef: n, leftSectionRef: r, measureRef: a },
48473
+ visibleActions: l,
48474
+ hiddenActions: c
48475
48475
  } = V8({
48476
48476
  actions: s,
48477
48477
  direction: Ai.Reverse,
48478
- dependencies: [i],
48478
+ dependencies: [o],
48479
48479
  actionsGap: G8,
48480
48480
  containerPadding: B8
48481
- });
48481
+ }), d = e(i);
48482
48482
  return /* @__PURE__ */ z($e, { children: [
48483
48483
  /* @__PURE__ */ C(
48484
48484
  "div",
48485
48485
  {
48486
- ref: r,
48486
+ ref: a,
48487
48487
  className: "absolute top-0 left-0 invisible pointer-events-none overflow-hidden whitespace-nowrap flex gap-3",
48488
- children: s.map(({ key: c, icon: d, title: u }) => /* @__PURE__ */ C(
48488
+ children: s.map(({ key: u, icon: h, title: g }) => /* @__PURE__ */ C(
48489
48489
  Te,
48490
48490
  {
48491
- iconBefore: d,
48492
- label: u,
48491
+ iconBefore: h,
48492
+ label: g,
48493
48493
  variant: Ae.Secondary,
48494
48494
  hideTitleOnMobile: !0
48495
48495
  },
48496
- c
48496
+ u
48497
48497
  ))
48498
48498
  }
48499
48499
  ),
48500
48500
  /* @__PURE__ */ z(
48501
48501
  "div",
48502
48502
  {
48503
- ref: o,
48503
+ ref: n,
48504
48504
  className: "rounded bg-layer-0 p-2 flex justify-between items-center w-full",
48505
48505
  role: "toolbar",
48506
48506
  "aria-label": "File bulk actions",
48507
48507
  children: [
48508
- /* @__PURE__ */ C("div", { ref: n, children: /* @__PURE__ */ C(
48508
+ /* @__PURE__ */ C("div", { ref: r, children: /* @__PURE__ */ C(
48509
48509
  Te,
48510
48510
  {
48511
- label: e,
48511
+ label: d,
48512
48512
  onClick: t,
48513
48513
  textClassName: "text-accent-primary whitespace-nowrap",
48514
48514
  variant: Ae.Tertiary,
@@ -48516,10 +48516,10 @@ const z8 = ({ selectionLabel: e, onClearSelection: t, actions: s }) => {
48516
48516
  }
48517
48517
  ) }),
48518
48518
  /* @__PURE__ */ z("div", { className: "flex flex-1 w-full gap-3 items-center justify-end", children: [
48519
- l.length > 0 && /* @__PURE__ */ C(
48519
+ c.length > 0 && /* @__PURE__ */ C(
48520
48520
  Nt,
48521
48521
  {
48522
- menu: { items: l },
48522
+ menu: { items: c },
48523
48523
  allowedPlacements: ["bottom", "bottom-start"],
48524
48524
  children: /* @__PURE__ */ C(
48525
48525
  Te,
@@ -48536,18 +48536,18 @@ const z8 = ({ selectionLabel: e, onClearSelection: t, actions: s }) => {
48536
48536
  )
48537
48537
  }
48538
48538
  ),
48539
- a.map(({ key: c, icon: d, title: u, onClick: h, disabled: g }) => /* @__PURE__ */ C(
48539
+ l.map(({ key: u, icon: h, title: g, onClick: p, disabled: f }) => /* @__PURE__ */ C(
48540
48540
  Te,
48541
48541
  {
48542
48542
  className: "!p-[9px]",
48543
- iconBefore: d,
48544
- label: u,
48543
+ iconBefore: h,
48544
+ label: g,
48545
48545
  variant: Ae.Secondary,
48546
48546
  hideTitleOnMobile: !0,
48547
- disabled: g,
48548
- onClick: (p) => h?.({ key: c, domEvent: p })
48547
+ disabled: f,
48548
+ onClick: (m) => p?.({ key: u, domEvent: m })
48549
48549
  },
48550
- c
48550
+ u
48551
48551
  ))
48552
48552
  ] })
48553
48553
  ]
@@ -50408,7 +50408,8 @@ const J8 = ({
50408
50408
  children: /* @__PURE__ */ C(
50409
50409
  z8,
50410
50410
  {
50411
- selectionLabel: `${w.size} ${l.selectionLabel}`,
50411
+ ...l,
50412
+ selectedCount: w.size,
50412
50413
  onClearSelection: y,
50413
50414
  actions: pn
50414
50415
  }
@@ -63,7 +63,7 @@ export type ToolbarOptions = Omit<DialFileManagerToolbarProps, 'areHiddenFilesVi
63
63
  uploadArchive?: string;
64
64
  };
65
65
  };
66
- export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection' | 'actions'> & {
66
+ export type BulkActionsToolbarOptions = Omit<DialFileManagerBulkActionsToolbarProps, 'onClearSelection' | 'actions' | 'selectedCount'> & {
67
67
  actionLabels?: {
68
68
  [DialFileManagerActions.Duplicate]?: string;
69
69
  [DialFileManagerActions.Copy]?: string;
@@ -4,9 +4,10 @@ export interface DialActionDropdownItem extends DropdownItem {
4
4
  title: string;
5
5
  }
6
6
  export interface DialFileManagerBulkActionsToolbarProps {
7
- selectionLabel: string;
7
+ getSelectionLabel: (selectedCount: number) => string;
8
8
  onClearSelection: () => void;
9
9
  actions: DialActionDropdownItem[];
10
+ selectedCount: number;
10
11
  }
11
12
  /**
12
13
  * A responsive toolbar component displayed when files or items are selected
@@ -33,7 +34,7 @@ export interface DialFileManagerBulkActionsToolbarProps {
33
34
  * @example
34
35
  * ```tsx
35
36
  * <DialFileManagerSelectionToolbar
36
- * selectionLabel="3 files selected"
37
+ * getSelectionLabel={(count) => `${count} files selected`}
37
38
  * onClearSelection={() => console.log('Cleared')}
38
39
  * actions={[
39
40
  * { key: 'download', title: 'Download', icon: <IconDownload />, onClick: () => {} },
@@ -43,10 +44,11 @@ export interface DialFileManagerBulkActionsToolbarProps {
43
44
  * ```
44
45
  *
45
46
  * @param {object} props
46
- * @param {string} props.selectionLabel - Label showing current selection status (e.g., "3 files selected").
47
+ * @param {() => string} props.getSelectionLabel - Function to get the label showing current selection status (e.g., "3 files selected").
47
48
  * @param {() => void} props.onClearSelection - Callback invoked when the clear selection button is clicked.
48
49
  * @param {DialActionDropdownItem[]} props.actions - List of available toolbar actions.
49
50
  * Each action defines a title, icon, key, and optional click handler.
51
+ * @param {number} [props.selectedCount] - Count of currently selected items.
50
52
  *
51
53
  * @returns {JSX.Element} A responsive toolbar that adjusts visible actions based on available width.
52
54
  */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-ui-kit",
3
- "version": "0.5.0-rc.62",
3
+ "version": "0.5.0-rc.63",
4
4
  "type": "module",
5
5
  "license": "Apache-2.0",
6
6
  "description": "A modern UI kit for building AI DIAL interfaces with React",