@gusto/embedded-react-sdk 0.37.0 → 0.38.0-rc.2

package/dist/components/Common/DataView/DataTable/DataTable.d.ts

@@ -6,9 +6,11 @@ export type DataTableProps<T> = {
     data: useDataViewPropReturn<T>['data'];
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
+    onSelectAll?: (checked: boolean, visibleData: T[]) => void;
+    getIsItemSelected?: (item: T) => boolean;
     emptyState?: useDataViewPropReturn<T>['emptyState'];
     footer?: useDataViewPropReturn<T>['footer'];
-    variant?: TableProps['variant'];
+    isWithinBox?: TableProps['isWithinBox'];
     selectionMode?: SelectionMode;
 };
-export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, emptyState, footer, variant, selectionMode, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: <T>({ label, data, columns, itemMenu, onSelect, onSelectAll, getIsItemSelected, emptyState, footer, isWithinBox, selectionMode, }: DataTableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/DataView/DataTable/DataTable.js

@@ -1,122 +1,141 @@
 import { jsx as l } from "react/jsx-runtime";
-import { useId as v, useState as x } from "react";
-import { useTranslation as T } from "react-i18next";
-import { useComponentContext as V } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useId as w, useState as T } from "react";
+import { useTranslation as F } from "react-i18next";
+import { useSelectionState as S } from "../useSelectionState.js";
+import { useComponentContext as j } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
 import { VisuallyHidden as p } from "../../VisuallyHidden/VisuallyHidden.js";
-function w(i, o) {
-  if (o.render)
-    return o.render(i);
-  if (o.key) {
-    const a = o.key;
-    return String(i[a] ?? "");
+function A(c, n) {
+  if (n.render)
+    return n.render(c);
+  if (n.key) {
+    const s = n.key;
+    return String(c[s] ?? "");
   }
   return "";
 }
-const q = ({
-  label: i,
-  data: o,
-  columns: a,
-  itemMenu: c,
-  onSelect: n,
-  emptyState: f,
+const J = ({
+  label: c,
+  data: n,
+  columns: s,
+  itemMenu: d,
+  onSelect: a,
+  onSelectAll: C,
+  getIsItemSelected: u,
+  emptyState: b,
   footer: k,
-  variant: b,
+  isWithinBox: R,
   selectionMode: h = "multiple"
 }) => {
-  const u = V(), { t: d } = T("common"), C = v(), [g, m] = x(null), R = [
-    ...n ? [
+  const y = j(), { t: i } = F("common"), $ = w(), [g, m] = T(null), { allSelected: H } = S(n, u), L = [
+    ...a ? [
       {
         key: "select-header",
-        content: /* @__PURE__ */ l(p, { children: d("table.selectRowHeader") })
+        content: h === "multiple" && u ? /* @__PURE__ */ l(
+          y.Checkbox,
+          {
+            value: H,
+            onChange: (e) => C?.(e, n),
+            label: i("table.selectAllRowsLabel"),
+            shouldVisuallyHideLabel: !0
+          }
+        ) : /* @__PURE__ */ l(p, { children: i("table.selectRowHeader") })
       }
     ] : [],
-    ...a.map((t, e) => ({
-      key: typeof t.key == "string" ? t.key : `header-${e}`,
-      content: t.title
+    ...s.map((e, t) => ({
+      key: typeof e.key == "string" ? e.key : `header-${t}`,
+      content: e.title
     })),
-    ...c ? [
+    ...d ? [
       {
         key: "actions-header",
-        content: /* @__PURE__ */ l(p, { children: d("table.actionsColumnHeader") })
+        content: /* @__PURE__ */ l(p, { children: i("table.actionsColumnHeader") })
       }
     ] : []
-  ], $ = (t, e) => {
-    m(e), n?.(t, !0);
-  }, D = (t, e) => h === "single" ? /* @__PURE__ */ l(
-    u.Radio,
-    {
-      name: C,
-      value: g === e,
-      onChange: () => {
-        $(t, e);
-      },
-      label: d("table.selectRowLabel"),
-      shouldVisuallyHideLabel: !0
-    }
-  ) : /* @__PURE__ */ l(
-    u.Checkbox,
-    {
-      onChange: (r) => {
-        n?.(t, r);
-      },
-      label: d("table.selectRowLabel"),
-      shouldVisuallyHideLabel: !0
+  ], v = (e, t) => {
+    m(t), a?.(e, !0);
+  }, D = (e, t) => {
+    if (h === "single") {
+      const o = u?.(e) ?? g === t;
+      return /* @__PURE__ */ l(
+        y.Radio,
+        {
+          name: $,
+          value: o,
+          onChange: () => {
+            v(e, t);
+          },
+          label: i("table.selectRowLabel"),
+          shouldVisuallyHideLabel: !0
+        }
+      );
     }
-  ), H = o.map((t, e) => {
+    const r = u?.(e) ?? !1;
+    return /* @__PURE__ */ l(
+      y.Checkbox,
+      {
+        value: r,
+        onChange: (o) => {
+          a?.(e, o);
+        },
+        label: i("table.selectRowLabel"),
+        shouldVisuallyHideLabel: !0
+      }
+    );
+  }, x = n.map((e, t) => {
     const r = [
-      ...n ? [
+      ...a ? [
         {
-          key: `select-${e}`,
-          content: D(t, e)
+          key: `select-${t}`,
+          content: D(e, t)
         }
       ] : [],
-      ...a.map((s, y) => ({
-        key: typeof s.key == "string" ? s.key : `cell-${y}`,
-        content: w(t, s)
+      ...s.map((o, f) => ({
+        key: typeof o.key == "string" ? o.key : `cell-${f}`,
+        content: A(e, o)
       })),
-      ...c ? [
+      ...d ? [
         {
-          key: `menu-${e}`,
-          content: c(t)
+          key: `menu-${t}`,
+          content: d(e)
         }
       ] : []
     ];
     return {
-      key: `row-${e}`,
+      key: `row-${t}`,
       data: r
     };
-  }), L = (() => {
+  }), V = (() => {
     if (!k) return;
-    const t = k(), e = [];
-    return n && e.push({
+    const e = k(), t = [];
+    return a && t.push({
       key: "footer-select",
       content: ""
-    }), a.forEach((r, s) => {
-      const y = typeof r.key == "string" ? r.key : `column-${s}`;
-      e.push({
-        key: `footer-${y}`,
-        content: t[y] || ""
+    }), s.forEach((r, o) => {
+      const f = typeof r.key == "string" ? r.key : `column-${o}`;
+      t.push({
+        key: `footer-${f}`,
+        content: e[f] || ""
       });
-    }), c && e.push({
+    }), d && t.push({
       key: "footer-actions",
       content: ""
-    }), e;
+    }), t;
   })();
   return /* @__PURE__ */ l(
-    u.Table,
+    y.Table,
     {
-      "aria-label": i,
+      "aria-label": c,
       "data-testid": "data-table",
-      headers: R,
-      rows: H,
-      footer: L,
-      emptyState: f ? f() : void 0,
-      variant: b,
-      hasCheckboxColumn: !!n
+      headers: L,
+      rows: x,
+      footer: V,
+      emptyState: b ? b() : void 0,
+      isWithinBox: R,
+      hasCheckboxColumn: !!a
     }
   );
 };
 export {
-  q as DataTable
+  J as DataTable
 };
 //# sourceMappingURL=DataTable.js.map

package/dist/components/Common/DataView/DataTable/DataTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn, SelectionMode } from '../useDataView'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataTableProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  variant?: TableProps['variant']\n  selectionMode?: SelectionMode\n}\n\nfunction getCellContent<T>(\n  item: T,\n  column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n  if (column.render) {\n    return column.render(item)\n  }\n\n  if (column.key) {\n    const key = column.key as keyof T\n    return String(item[key] ?? '')\n  }\n\n  return ''\n}\n\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  emptyState,\n  footer,\n  variant,\n  selectionMode = 'multiple',\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const [selectedRadioIndex, setSelectedRadioIndex] = useState<number | null>(null)\n\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content: <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: column.title,\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n  ]\n\n  const handleRadioSelect = (item: T, rowIndex: number) => {\n    setSelectedRadioIndex(rowIndex)\n    onSelect?.(item, true)\n  }\n\n  const renderSelectionControl = (item: T, rowIndex: number) => {\n    if (selectionMode === 'single') {\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={selectedRadioIndex === rowIndex}\n          onChange={() => {\n            handleRadioSelect(item, rowIndex)\n          }}\n          label={t('table.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    return (\n      <Components.Checkbox\n        onChange={(checked: boolean) => {\n          onSelect?.(item, checked)\n        }}\n        label={t('table.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  const rows: TableRow[] = data.map((item, rowIndex) => {\n    const rowData: TableData[] = [\n      ...(onSelect\n        ? [\n            {\n              key: `select-${rowIndex}`,\n              content: renderSelectionControl(item, rowIndex),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: getCellContent(item, column),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: itemMenu(item),\n            },\n          ]\n        : []),\n    ]\n\n    return {\n      key: `row-${rowIndex}`,\n      data: rowData,\n    }\n  })\n\n  const buildFooterData = () => {\n    if (!footer) return undefined\n\n    const footerContent = footer()\n    const footerCells: TableData[] = []\n\n    // Add select column footer (empty)\n    if (onSelect) {\n      footerCells.push({\n        key: 'footer-select',\n        content: '',\n      })\n    }\n\n    // Add data column footers\n    columns.forEach((column, index) => {\n      const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n      footerCells.push({\n        key: `footer-${columnKey}`,\n        content: footerContent[columnKey] || '',\n      })\n    })\n\n    // Add actions column footer (empty)\n    if (itemMenu) {\n      footerCells.push({\n        key: 'footer-actions',\n        content: '',\n      })\n    }\n\n    return footerCells\n  }\n\n  const footerData = buildFooterData()\n\n  return (\n    <Components.Table\n      aria-label={label}\n      data-testid=\"data-table\"\n      headers={headers}\n      rows={rows}\n      footer={footerData}\n      emptyState={emptyState ? emptyState() : undefined}\n      variant={variant}\n      hasCheckboxColumn={!!onSelect}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","emptyState","footer","variant","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","selectedRadioIndex","setSelectedRadioIndex","useState","headers","jsx","VisuallyHidden","index","handleRadioSelect","rowIndex","renderSelectionControl","checked","rows","rowData","colIndex","footerData","footerContent","footerCells","columnKey"],"mappings":"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"}
+{"version":3,"file":"DataTable.js","sources":["../../../../../src/components/Common/DataView/DataTable/DataTable.tsx"],"sourcesContent":["import { useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { useDataViewPropReturn, SelectionMode } from '../useDataView'\nimport { useSelectionState } from '../useSelectionState'\nimport type { TableData, TableRow, TableProps } from '../../UI/Table/TableTypes'\nimport { VisuallyHidden } from '../../VisuallyHidden'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport type DataTableProps<T> = {\n  label: string\n  columns: useDataViewPropReturn<T>['columns']\n  data: useDataViewPropReturn<T>['data']\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  footer?: useDataViewPropReturn<T>['footer']\n  isWithinBox?: TableProps['isWithinBox']\n  selectionMode?: SelectionMode\n}\n\nfunction getCellContent<T>(\n  item: T,\n  column: { key?: string | keyof T; render?: (item: T) => React.ReactNode },\n) {\n  if (column.render) {\n    return column.render(item)\n  }\n\n  if (column.key) {\n    const key = column.key as keyof T\n    return String(item[key] ?? '')\n  }\n\n  return ''\n}\n\nexport const DataTable = <T,>({\n  label,\n  data,\n  columns,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  emptyState,\n  footer,\n  isWithinBox,\n  selectionMode = 'multiple',\n}: DataTableProps<T>) => {\n  const Components = useComponentContext()\n  const { t } = useTranslation('common')\n  const radioGroupName = useId()\n  const [selectedRadioIndex, setSelectedRadioIndex] = useState<number | null>(null)\n  const { allSelected } = useSelectionState(data, getIsItemSelected)\n\n  const headers: TableData[] = [\n    ...(onSelect\n      ? [\n          {\n            key: 'select-header',\n            content:\n              selectionMode === 'multiple' && getIsItemSelected ? (\n                <Components.Checkbox\n                  value={allSelected}\n                  onChange={(checked: boolean) => onSelectAll?.(checked, data)}\n                  label={t('table.selectAllRowsLabel')}\n                  shouldVisuallyHideLabel\n                />\n              ) : (\n                <VisuallyHidden>{t('table.selectRowHeader')}</VisuallyHidden>\n              ),\n          },\n        ]\n      : []),\n    ...columns.map((column, index) => ({\n      key: typeof column.key === 'string' ? column.key : `header-${index}`,\n      content: column.title,\n    })),\n    ...(itemMenu\n      ? [\n          {\n            key: 'actions-header',\n            content: <VisuallyHidden>{t('table.actionsColumnHeader')}</VisuallyHidden>,\n          },\n        ]\n      : []),\n  ]\n\n  const handleRadioSelect = (item: T, rowIndex: number) => {\n    setSelectedRadioIndex(rowIndex)\n    onSelect?.(item, true)\n  }\n\n  const renderSelectionControl = (item: T, rowIndex: number) => {\n    if (selectionMode === 'single') {\n      const isSelected = getIsItemSelected?.(item) ?? selectedRadioIndex === rowIndex\n      return (\n        <Components.Radio\n          name={radioGroupName}\n          value={isSelected}\n          onChange={() => {\n            handleRadioSelect(item, rowIndex)\n          }}\n          label={t('table.selectRowLabel')}\n          shouldVisuallyHideLabel\n        />\n      )\n    }\n\n    const isSelected = getIsItemSelected?.(item) ?? false\n    return (\n      <Components.Checkbox\n        value={isSelected}\n        onChange={(checked: boolean) => {\n          onSelect?.(item, checked)\n        }}\n        label={t('table.selectRowLabel')}\n        shouldVisuallyHideLabel\n      />\n    )\n  }\n\n  const rows: TableRow[] = data.map((item, rowIndex) => {\n    const rowData: TableData[] = [\n      ...(onSelect\n        ? [\n            {\n              key: `select-${rowIndex}`,\n              content: renderSelectionControl(item, rowIndex),\n            },\n          ]\n        : []),\n      ...columns.map((column, colIndex) => {\n        return {\n          key: typeof column.key === 'string' ? column.key : `cell-${colIndex}`,\n          content: getCellContent(item, column),\n        }\n      }),\n      ...(itemMenu\n        ? [\n            {\n              key: `menu-${rowIndex}`,\n              content: itemMenu(item),\n            },\n          ]\n        : []),\n    ]\n\n    return {\n      key: `row-${rowIndex}`,\n      data: rowData,\n    }\n  })\n\n  const buildFooterData = () => {\n    if (!footer) return undefined\n\n    const footerContent = footer()\n    const footerCells: TableData[] = []\n\n    // Add select column footer (empty)\n    if (onSelect) {\n      footerCells.push({\n        key: 'footer-select',\n        content: '',\n      })\n    }\n\n    // Add data column footers\n    columns.forEach((column, index) => {\n      const columnKey = typeof column.key === 'string' ? column.key : `column-${index}`\n      footerCells.push({\n        key: `footer-${columnKey}`,\n        content: footerContent[columnKey] || '',\n      })\n    })\n\n    // Add actions column footer (empty)\n    if (itemMenu) {\n      footerCells.push({\n        key: 'footer-actions',\n        content: '',\n      })\n    }\n\n    return footerCells\n  }\n\n  const footerData = buildFooterData()\n\n  return (\n    <Components.Table\n      aria-label={label}\n      data-testid=\"data-table\"\n      headers={headers}\n      rows={rows}\n      footer={footerData}\n      emptyState={emptyState ? emptyState() : undefined}\n      isWithinBox={isWithinBox}\n      hasCheckboxColumn={!!onSelect}\n    />\n  )\n}\n"],"names":["getCellContent","item","column","key","DataTable","label","data","columns","itemMenu","onSelect","onSelectAll","getIsItemSelected","emptyState","footer","isWithinBox","selectionMode","Components","useComponentContext","t","useTranslation","radioGroupName","useId","selectedRadioIndex","setSelectedRadioIndex","useState","allSelected","useSelectionState","headers","jsx","checked","VisuallyHidden","index","handleRadioSelect","rowIndex","renderSelectionControl","isSelected","rows","rowData","colIndex","footerData","footerContent","footerCells","columnKey"],"mappings":"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"}

package/dist/components/Common/DataView/DataView.d.ts

@@ -8,13 +8,14 @@ export type DataViewProps<T> = {
     label: string;
     itemMenu?: useDataViewPropReturn<T>['itemMenu'];
     onSelect?: useDataViewPropReturn<T>['onSelect'];
-    isItemSelected?: useDataViewPropReturn<T>['isItemSelected'];
+    onSelectAll?: useDataViewPropReturn<T>['onSelectAll'];
+    getIsItemSelected?: (item: T) => boolean;
     breakAt?: string;
     breakpoints?: useContainerBreakpointsProps['breakpoints'];
     footer?: useDataViewPropReturn<T>['footer'];
     isFetching?: boolean;
-    variant?: TableProps['variant'];
+    isWithinBox?: TableProps['isWithinBox'];
     emptyState?: useDataViewPropReturn<T>['emptyState'];
     selectionMode?: SelectionMode;
 };
-export declare const DataView: <T>({ pagination, isFetching, breakAt, breakpoints: customBreakpoints, footer, variant, emptyState, selectionMode, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const DataView: <T>({ pagination, isFetching, breakAt, breakpoints: customBreakpoints, footer, isWithinBox, emptyState, selectionMode, onSelectAll, ...dataViewProps }: DataViewProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/DataView/DataView.js

@@ -1,50 +1,52 @@
-import { jsxs as k, jsx as n } from "react/jsx-runtime";
-import { useRef as C, useMemo as D } from "react";
-import { PaginationControl as w } from "../PaginationControl/PaginationControl.js";
-import x from "./DataView.module.scss.js";
-import { DataTable as h } from "./DataTable/DataTable.js";
-import { DataCards as j } from "./DataCards/DataCards.js";
-import v from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-const P = ({
+import { jsxs as C, jsx as n } from "react/jsx-runtime";
+import { useRef as D, useMemo as w } from "react";
+import { PaginationControl as x } from "../PaginationControl/PaginationControl.js";
+import h from "./DataView.module.scss.js";
+import { DataTable as j } from "./DataTable/DataTable.js";
+import { DataCards as v } from "./DataCards/DataCards.js";
+import B from "../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+const T = ({
   pagination: t,
   isFetching: s,
   breakAt: a = "small",
   breakpoints: i,
   footer: m,
-  variant: p,
+  isWithinBox: p,
   emptyState: c,
   selectionMode: l,
-  ...f
+  onSelectAll: f,
+  ...d
 }) => {
-  const e = C(null), o = v({
+  const e = D(null), o = B({
     ref: e,
     breakpoints: i
-  }), d = o.length > 0, r = !o.includes(a), u = D(() => r ? j : h, [r]);
-  return /* @__PURE__ */ k(
+  }), u = o.length > 0, r = !o.includes(a), b = w(() => r ? v : j, [r]);
+  return /* @__PURE__ */ C(
     "div",
     {
       "data-testid": "data-view",
-      className: x.dataViewContainer,
-      ref: (b) => {
-        e.current = b;
+      className: h.dataViewContainer,
+      ref: (k) => {
+        e.current = k;
       },
       children: [
-        d && /* @__PURE__ */ n(
-          u,
+        u && /* @__PURE__ */ n(
+          b,
           {
-            ...f,
+            ...d,
+            onSelectAll: f,
             footer: m,
-            variant: p,
+            isWithinBox: p,
             emptyState: c,
             selectionMode: l
           }
         ),
-        t && /* @__PURE__ */ n(w, { ...t, isFetching: s })
+        t && /* @__PURE__ */ n(x, { ...t, isFetching: s })
       ]
     }
   );
 };
 export {
-  P as DataView
+  T as DataView
 };
 //# sourceMappingURL=DataView.js.map

package/dist/components/Common/DataView/DataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport type { TableProps } from '../UI/Table/TableTypes'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn, SelectionMode } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { useContainerBreakpointsProps } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\nexport type DataViewProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: T[]\n  pagination?: useDataViewPropReturn<T>['pagination']\n  label: string\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  isItemSelected?: useDataViewPropReturn<T>['isItemSelected']\n  breakAt?: string\n  breakpoints?: useContainerBreakpointsProps['breakpoints']\n  footer?: useDataViewPropReturn<T>['footer']\n  isFetching?: boolean\n  variant?: TableProps['variant']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  selectionMode?: SelectionMode\n}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  breakpoints: customBreakpoints,\n  footer,\n  variant,\n  emptyState,\n  selectionMode,\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\n    breakpoints: customBreakpoints,\n  })\n\n  // Wait for breakpoints to be detected before rendering\n  const isBreakpointsDetected = breakpoints.length > 0\n  const isMobile = !breakpoints.includes(breakAt)\n\n  const Component = useMemo(() => {\n    return isMobile ? DataCards : DataTable\n  }, [isMobile])\n\n  return (\n    <div\n      data-testid=\"data-view\"\n      className={styles.dataViewContainer}\n      ref={ref => {\n        containerRef.current = ref\n      }}\n    >\n      {isBreakpointsDetected && (\n        <Component\n          {...dataViewProps}\n          footer={footer}\n          variant={variant}\n          emptyState={emptyState}\n          selectionMode={selectionMode}\n        />\n      )}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","variant","emptyState","selectionMode","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AA2BO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaN;AAAA,EAAA,CACd,GAGKU,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAAST,CAAO,GAExCa,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KACC,gBAAAS;AAAA,UAACP;AAAA,UAAA;AAAA,YACE,GAAGP;AAAA,YACJ,QAAAJ;AAAA,YACA,SAAAC;AAAA,YACA,YAAAC;AAAA,YACA,eAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHP,KAAc,gBAAAsB,EAACC,GAAA,EAAmB,GAAGvB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}
+{"version":3,"file":"DataView.js","sources":["../../../../src/components/Common/DataView/DataView.tsx"],"sourcesContent":["import { useMemo, useRef } from 'react'\nimport { PaginationControl } from '../PaginationControl/PaginationControl'\nimport type { TableProps } from '../UI/Table/TableTypes'\nimport styles from './DataView.module.scss'\nimport { DataTable } from './DataTable/DataTable'\nimport type { useDataViewPropReturn, SelectionMode } from './useDataView'\nimport { DataCards } from './DataCards/DataCards'\nimport type { useContainerBreakpointsProps } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport useContainerBreakpoints from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\n\nexport type DataViewProps<T> = {\n  columns: useDataViewPropReturn<T>['columns']\n  data: T[]\n  pagination?: useDataViewPropReturn<T>['pagination']\n  label: string\n  itemMenu?: useDataViewPropReturn<T>['itemMenu']\n  onSelect?: useDataViewPropReturn<T>['onSelect']\n  onSelectAll?: useDataViewPropReturn<T>['onSelectAll']\n  getIsItemSelected?: (item: T) => boolean\n  breakAt?: string\n  breakpoints?: useContainerBreakpointsProps['breakpoints']\n  footer?: useDataViewPropReturn<T>['footer']\n  isFetching?: boolean\n  isWithinBox?: TableProps['isWithinBox']\n  emptyState?: useDataViewPropReturn<T>['emptyState']\n  selectionMode?: SelectionMode\n}\n\nexport const DataView = <T,>({\n  pagination,\n  isFetching,\n  breakAt = 'small',\n  breakpoints: customBreakpoints,\n  footer,\n  isWithinBox,\n  emptyState,\n  selectionMode,\n  onSelectAll,\n  ...dataViewProps\n}: DataViewProps<T>) => {\n  const containerRef = useRef<HTMLElement | null>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: containerRef,\n    breakpoints: customBreakpoints,\n  })\n\n  // Wait for breakpoints to be detected before rendering\n  const isBreakpointsDetected = breakpoints.length > 0\n  const isMobile = !breakpoints.includes(breakAt)\n\n  const Component = useMemo(() => {\n    return isMobile ? DataCards : DataTable\n  }, [isMobile])\n\n  return (\n    <div\n      data-testid=\"data-view\"\n      className={styles.dataViewContainer}\n      ref={ref => {\n        containerRef.current = ref\n      }}\n    >\n      {isBreakpointsDetected && (\n        <Component\n          {...dataViewProps}\n          onSelectAll={onSelectAll}\n          footer={footer}\n          isWithinBox={isWithinBox}\n          emptyState={emptyState}\n          selectionMode={selectionMode}\n        />\n      )}\n      {pagination && <PaginationControl {...pagination} isFetching={isFetching} />}\n    </div>\n  )\n}\n"],"names":["DataView","pagination","isFetching","breakAt","customBreakpoints","footer","isWithinBox","emptyState","selectionMode","onSelectAll","dataViewProps","containerRef","useRef","breakpoints","useContainerBreakpoints","isBreakpointsDetected","isMobile","Component","useMemo","DataCards","DataTable","jsxs","styles","ref","jsx","PaginationControl"],"mappings":";;;;;;;AA4BO,MAAMA,IAAW,CAAK;AAAA,EAC3B,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,aAAaC;AAAA,EACb,QAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,MAAwB;AACtB,QAAMC,IAAeC,EAA2B,IAAI,GAC9CC,IAAcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,IACL,aAAaP;AAAA,EAAA,CACd,GAGKW,IAAwBF,EAAY,SAAS,GAC7CG,IAAW,CAACH,EAAY,SAASV,CAAO,GAExCc,IAAYC,EAAQ,MACjBF,IAAWG,IAAYC,GAC7B,CAACJ,CAAQ,CAAC;AAEb,SACE,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAY;AAAA,MACZ,WAAWC,EAAO;AAAA,MAClB,KAAK,CAAAC,MAAO;AACV,QAAAZ,EAAa,UAAUY;AAAA,MACzB;AAAA,MAEC,UAAA;AAAA,QAAAR,KACC,gBAAAS;AAAA,UAACP;AAAA,UAAA;AAAA,YACE,GAAGP;AAAA,YACJ,aAAAD;AAAA,YACA,QAAAJ;AAAA,YACA,aAAAC;AAAA,YACA,YAAAC;AAAA,YACA,eAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAGHP,KAAc,gBAAAuB,EAACC,GAAA,EAAmB,GAAGxB,GAAY,YAAAC,EAAA,CAAwB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhF;"}

package/dist/components/Common/DataView/useDataView.d.ts

@@ -10,29 +10,56 @@ type DataViewColumn<T> = {
     render: (item: T) => React.ReactNode;
 };
 type FooterKeys<T> = keyof T | string;
-export type useDataViewProp<T> = {
+type BaseDataViewProps<T> = {
     columns: DataViewColumn<T>[];
     data: T[];
     pagination?: PaginationControlProps;
     itemMenu?: (item: T) => React.ReactNode;
-    onSelect?: (item: T, checked: boolean) => void;
-    isItemSelected?: (item: T, index: number) => boolean;
     emptyState?: () => React.ReactNode;
     footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>;
     isFetching?: boolean;
-    selectionMode?: SelectionMode;
 };
+type NoSelectionProps = {
+    onSelect?: undefined;
+    onSelectAll?: undefined;
+    getIsItemSelected?: undefined;
+    selectionMode?: undefined;
+};
+type SingleSelectionProps<T> = {
+    selectionMode: 'single';
+    onSelect: (item: T, checked: boolean) => void;
+    onSelectAll?: undefined;
+    getIsItemSelected?: (item: T) => boolean;
+};
+type MultipleSelectionProps<T> = {
+    selectionMode?: 'multiple';
+    onSelect: (item: T, checked: boolean) => void;
+    /**
+     * Called when the select-all checkbox is toggled.
+     * The header checkbox state reflects only the currently visible `data` array.
+     * With pagination, consumers decide whether to select all data or only the visible page.
+     * `visibleData` is the current page's data array for reference.
+     */
+    onSelectAll?: (checked: boolean, visibleData: T[]) => void;
+    /**
+     * Required for multi-select. Returns whether a given item is currently selected.
+     * Use a stable identifier from the item (e.g. item.id) rather than array index.
+     */
+    getIsItemSelected: (item: T) => boolean;
+};
+export type useDataViewProp<T> = BaseDataViewProps<T> & (NoSelectionProps | SingleSelectionProps<T> | MultipleSelectionProps<T>);
 export type useDataViewPropReturn<T> = {
     pagination?: PaginationControlProps;
     data: T[];
     columns: DataViewColumn<T>[];
     itemMenu?: (item: T) => React.ReactNode;
     onSelect?: (item: T, checked: boolean) => void;
-    isItemSelected?: (item: T, index: number) => boolean;
+    onSelectAll?: (checked: boolean, visibleData: T[]) => void;
+    getIsItemSelected?: (item: T) => boolean;
     emptyState?: () => React.ReactNode;
     footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>;
     isFetching?: boolean;
     selectionMode?: SelectionMode;
 };
-export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, isItemSelected, pagination, emptyState, footer, isFetching, selectionMode, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
+export declare const useDataView: <T>({ columns, data, itemMenu, onSelect, onSelectAll, getIsItemSelected, pagination, emptyState, footer, isFetching, selectionMode, }: useDataViewProp<T>) => useDataViewPropReturn<T>;
 export {};

package/dist/components/Common/DataView/useDataView.js

@@ -1,39 +1,42 @@
-import { useMemo as D } from "react";
-const j = ({
+import { useMemo as f } from "react";
+const o = ({
   columns: r,
   data: w,
   itemMenu: V,
   onSelect: p,
-  isItemSelected: s,
-  pagination: u,
-  emptyState: P,
-  footer: a,
-  isFetching: o,
-  selectionMode: x
-}) => D(() => ({
-  pagination: u,
+  onSelectAll: s,
+  getIsItemSelected: u,
+  pagination: P,
+  emptyState: a,
+  footer: x,
+  isFetching: D,
+  selectionMode: b
+}) => f(() => ({
+  pagination: P,
   data: w,
   columns: r,
   itemMenu: V,
   onSelect: p,
-  isItemSelected: s,
-  emptyState: P,
-  footer: a,
-  isFetching: o,
-  selectionMode: x
+  onSelectAll: s,
+  getIsItemSelected: u,
+  emptyState: a,
+  footer: x,
+  isFetching: D,
+  selectionMode: b
 }), [
-  u,
+  P,
   w,
   r,
   V,
   p,
   s,
-  P,
+  u,
   a,
-  o,
-  x
+  x,
+  D,
+  b
 ]);
 export {
-  j as useDataView
+  o as useDataView
 };
 //# sourceMappingURL=useDataView.js.map

package/dist/components/Common/DataView/useDataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\nexport type SelectionMode = 'multiple' | 'single'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\ntype FooterKeys<T> = keyof T | string\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  isItemSelected?: (item: T, index: number) => boolean\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n  selectionMode?: SelectionMode\n}\n\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  isItemSelected?: (item: T, index: number) => boolean\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n  selectionMode?: SelectionMode\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  isItemSelected,\n  pagination,\n  emptyState,\n  footer,\n  isFetching,\n  selectionMode,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      isItemSelected,\n      emptyState,\n      footer,\n      isFetching,\n      selectionMode,\n    }\n  }, [\n    pagination,\n    data,\n    columns,\n    itemMenu,\n    onSelect,\n    isItemSelected,\n    emptyState,\n    footer,\n    isFetching,\n    selectionMode,\n  ])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","isItemSelected","pagination","emptyState","footer","isFetching","selectionMode","useMemo"],"mappings":";AA6CO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAL;AAAA,EACA,MAAAJ;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,YAAAE;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,IAED;AAAA,EACDJ;AAAA,EACAJ;AAAA,EACAD;AAAA,EACAE;AAAA,EACAC;AAAA,EACAC;AAAA,EACAE;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,CACD;"}
+{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\nexport type SelectionMode = 'multiple' | 'single'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\ntype FooterKeys<T> = keyof T | string\n\ntype BaseDataViewProps<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n}\n\ntype NoSelectionProps = {\n  onSelect?: undefined\n  onSelectAll?: undefined\n  getIsItemSelected?: undefined\n  selectionMode?: undefined\n}\n\ntype SingleSelectionProps<T> = {\n  selectionMode: 'single'\n  onSelect: (item: T, checked: boolean) => void\n  onSelectAll?: undefined\n  getIsItemSelected?: (item: T) => boolean\n}\n\ntype MultipleSelectionProps<T> = {\n  selectionMode?: 'multiple'\n  onSelect: (item: T, checked: boolean) => void\n  /**\n   * Called when the select-all checkbox is toggled.\n   * The header checkbox state reflects only the currently visible `data` array.\n   * With pagination, consumers decide whether to select all data or only the visible page.\n   * `visibleData` is the current page's data array for reference.\n   */\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  /**\n   * Required for multi-select. Returns whether a given item is currently selected.\n   * Use a stable identifier from the item (e.g. item.id) rather than array index.\n   */\n  getIsItemSelected: (item: T) => boolean\n}\n\nexport type useDataViewProp<T> = BaseDataViewProps<T> &\n  (NoSelectionProps | SingleSelectionProps<T> | MultipleSelectionProps<T>)\n\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  onSelectAll?: (checked: boolean, visibleData: T[]) => void\n  getIsItemSelected?: (item: T) => boolean\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n  selectionMode?: SelectionMode\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  onSelectAll,\n  getIsItemSelected,\n  pagination,\n  emptyState,\n  footer,\n  isFetching,\n  selectionMode,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      onSelectAll,\n      getIsItemSelected,\n      emptyState,\n      footer,\n      isFetching,\n      selectionMode,\n    }\n  }, [\n    pagination,\n    data,\n    columns,\n    itemMenu,\n    onSelect,\n    onSelectAll,\n    getIsItemSelected,\n    emptyState,\n    footer,\n    isFetching,\n    selectionMode,\n  ])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","onSelectAll","getIsItemSelected","pagination","emptyState","footer","isFetching","selectionMode","useMemo"],"mappings":";AA6EO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAL;AAAA,EACA,MAAAL;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,YAAAE;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,IAED;AAAA,EACDJ;AAAA,EACAL;AAAA,EACAD;AAAA,EACAE;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,EACAE;AAAA,EACAC;AAAA,EACAC;AAAA,EACAC;AAAA,CACD;"}

package/dist/components/Common/DataView/useSelectionState.d.ts

@@ -0,0 +1,5 @@
+type SelectionState = {
+    allSelected: boolean;
+};
+export declare function useSelectionState<T>(data: T[], getIsItemSelected?: (item: T) => boolean): SelectionState;
+export {};

package/dist/components/Common/DataView/useSelectionState.js

@@ -0,0 +1,8 @@
+import { useMemo as r } from "react";
+function t(e, l) {
+  return r(() => e.length === 0 || !l ? { allSelected: !1 } : { allSelected: e.every(l) }, [e, l]);
+}
+export {
+  t as useSelectionState
+};
+//# sourceMappingURL=useSelectionState.js.map

package/dist/components/Common/DataView/useSelectionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectionState.js","sources":["../../../../src/components/Common/DataView/useSelectionState.ts"],"sourcesContent":["import { useMemo } from 'react'\n\ntype SelectionState = {\n  allSelected: boolean\n}\n\nexport function useSelectionState<T>(\n  data: T[],\n  getIsItemSelected?: (item: T) => boolean,\n): SelectionState {\n  return useMemo(() => {\n    if (data.length === 0 || !getIsItemSelected) {\n      return { allSelected: false }\n    }\n\n    const allSelected = data.every(getIsItemSelected)\n\n    return { allSelected }\n  }, [data, getIsItemSelected])\n}\n"],"names":["useSelectionState","data","getIsItemSelected","useMemo"],"mappings":";AAMO,SAASA,EACdC,GACAC,GACgB;AAChB,SAAOC,EAAQ,MACTF,EAAK,WAAW,KAAK,CAACC,IACjB,EAAE,aAAa,GAAA,IAKjB,EAAE,aAFWD,EAAK,MAAMC,CAAiB,EAEvC,GACR,CAACD,GAAMC,CAAiB,CAAC;AAC9B;"}

package/dist/components/Common/DateRangeFilter/DateRangeFilter.d.ts

@@ -0,0 +1,19 @@
+interface DateRangeFilterProps {
+    startDate: Date | null;
+    endDate: Date | null;
+    onStartDateChange: (date: Date | null) => void;
+    onEndDateChange: (date: Date | null) => void;
+    onClear: () => void;
+    startDateLabel: string;
+    endDateLabel: string;
+    applyLabel: string;
+    cancelLabel: string;
+    resetLabel: string;
+    selectDatesLabel: string;
+    triggerLabel: string;
+    isFilterActive: boolean;
+    maxEndDate?: Date;
+    minStartDate?: Date;
+}
+export declare const DateRangeFilter: ({ startDate, endDate, onStartDateChange, onEndDateChange, onClear, startDateLabel, endDateLabel, applyLabel, cancelLabel, resetLabel, selectDatesLabel, triggerLabel, isFilterActive, maxEndDate, minStartDate, }: DateRangeFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};