@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/UI/DataTable/DataTablePagination.js

@@ -0,0 +1,149 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import { ControlledSelect } from "../../Form/ControlledSelect.js";
+import ControlledTooltip from "../ControlledTooltip.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+import { formatNumber } from "../../../helpers/formatHelpers.js";
+const PAGE_SIZE_OPTIONS = [20, 50, 100];
+const DATA_TABLE_MIN_PAGE_SIZE = PAGE_SIZE_OPTIONS[0];
+const PAGE_SIZE_SELECT_OPTIONS = PAGE_SIZE_OPTIONS.map((size) => ({ value: size.toString(), label: size.toString() }));
+const PAGE_WINDOW_RADIUS = 1;
+const ELLIPSIS = "ellipsis";
+const COMPACT_PAGE_SIZE_SELECT = classNames(
+  "w-[72px]",
+  "[&_.controlled-select-input]:!min-w-0",
+  "[&_.controlled-select-container]:!min-w-0",
+  "[&_.controlled-select-container]:!h-8",
+  "[&_.controlled-select-input]:!py-1",
+  "[&_.controlled-select-input]:!text-xs"
+);
+const buildPageItems = (currentPage, numberOfPages) => {
+  if (numberOfPages <= 1) return [1];
+  const pages = /* @__PURE__ */ new Set([1, numberOfPages]);
+  for (let page = currentPage - PAGE_WINDOW_RADIUS; page <= currentPage + PAGE_WINDOW_RADIUS; page += 1) {
+    if (page >= 1 && page <= numberOfPages) pages.add(page);
+  }
+  const sortedPages = [...pages].sort((first, second) => first - second);
+  return sortedPages.flatMap((page, index) => {
+    const previousPage = sortedPages[index - 1];
+    return previousPage !== void 0 && page - previousPage > 1 ? [ELLIPSIS, page] : [page];
+  });
+};
+const DataTablePagination = ({
+  pageSize,
+  numberOfPages,
+  currentPage,
+  setCurrentPage,
+  onPageSizeChange,
+  totalItems
+}) => {
+  const { t } = useTranslation("ui");
+  const canPrev = currentPage > 1;
+  const canNext = currentPage < numberOfPages;
+  const pageItems = buildPageItems(currentPage, numberOfPages);
+  const stepClass = (enabled) => classNames(
+    "flex size-10 items-center justify-center rounded transition-colors tablet:size-8",
+    enabled ? "text-foreground-subtle hover:bg-muted-hover" : "text-foreground-faint"
+  );
+  const pageClass = (isCurrent) => classNames(
+    "flex size-10 items-center justify-center rounded text-xs tabular-nums transition-colors tablet:size-8",
+    isCurrent ? "bg-brand font-semibold text-brand-fg" : "text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted"
+  );
+  const rangeStart = (currentPage - 1) * pageSize + 1;
+  const rangeEnd = totalItems != null ? Math.min(currentPage * pageSize, totalItems) : currentPage * pageSize;
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-2 pb-3 text-xs text-foreground-subtle", children: [
+    onPageSizeChange && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { children: t("pagination.resultsPerPage") }),
+      /* @__PURE__ */ jsx(
+        ControlledSelect,
+        {
+          options: PAGE_SIZE_SELECT_OPTIONS,
+          selectedValue: pageSize.toString(),
+          onChangeHook: (selected) => onPageSizeChange(Number(selected)),
+          searchable: false,
+          clearable: false,
+          className: COMPACT_PAGE_SIZE_SELECT
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: totalItems != null ? t("pagination.range", {
+      from: formatNumber(Math.min(rangeStart, rangeEnd)),
+      to: formatNumber(rangeEnd),
+      total: formatNumber(totalItems)
+    }) : t("pagination.pageOf", { current: currentPage, total: numberOfPages }) }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-0.5", children: [
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("pagination.first"), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          "aria-label": t("pagination.first"),
+          defaultHtmlButton: true,
+          disabled: !canPrev,
+          onClick: () => setCurrentPage(1),
+          className: stepClass(canPrev),
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "first_page", size: 18 })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.previous"), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          "aria-label": t("actions.previous"),
+          defaultHtmlButton: true,
+          disabled: !canPrev,
+          onClick: () => setCurrentPage(currentPage - 1),
+          className: stepClass(canPrev),
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_left", size: 18 })
+        }
+      ) }),
+      pageItems.map(
+        (item, index) => item === ELLIPSIS ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "flex size-10 items-center justify-center text-foreground-faint tablet:size-8",
+            "aria-hidden": true,
+            children: t("pagination.gap")
+          },
+          `data-table-pagination-gap-${index}`
+        ) : /* @__PURE__ */ jsx(
+          ControlledButton,
+          {
+            defaultHtmlButton: true,
+            "aria-current": item === currentPage ? "page" : void 0,
+            onClick: () => setCurrentPage(item),
+            className: pageClass(item === currentPage),
+            children: formatNumber(item)
+          },
+          `data-table-pagination-page-${item}`
+        )
+      ),
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.next"), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          "aria-label": t("actions.next"),
+          defaultHtmlButton: true,
+          disabled: !canNext,
+          onClick: () => setCurrentPage(currentPage + 1),
+          className: stepClass(canNext),
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_right", size: 18 })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(ControlledTooltip, { content: t("pagination.last"), children: /* @__PURE__ */ jsx(
+        ControlledButton,
+        {
+          "aria-label": t("pagination.last"),
+          defaultHtmlButton: true,
+          disabled: !canNext,
+          onClick: () => setCurrentPage(numberOfPages),
+          className: stepClass(canNext),
+          children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "last_page", size: 18 })
+        }
+      ) })
+    ] })
+  ] });
+};
+export {
+  DATA_TABLE_MIN_PAGE_SIZE,
+  DataTablePagination as default
+};
+//# sourceMappingURL=DataTablePagination.js.map

package/dist/components/UI/DataTable/DataTablePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTablePagination.js","sources":["../../../../src/components/UI/DataTable/DataTablePagination.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { ControlledSelect } from '@/components/Form/ControlledSelect';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\nimport { formatNumber } from '@/helpers/formatHelpers';\n\ninterface IDataTablePaginationProps {\n  pageSize: number;\n  numberOfPages: number;\n  currentPage: number;\n  setCurrentPage: (page: number) => void;\n  onPageSizeChange?: (pageSize: number) => void;\n  totalItems?: number;\n}\n\nconst PAGE_SIZE_OPTIONS = [20, 50, 100];\n\nexport const DATA_TABLE_MIN_PAGE_SIZE = PAGE_SIZE_OPTIONS[0];\nconst PAGE_SIZE_SELECT_OPTIONS = PAGE_SIZE_OPTIONS.map((size) => ({ value: size.toString(), label: size.toString() }));\n\n/** Botões de página ao redor da atual, com as pontas sempre alcançáveis. */\nconst PAGE_WINDOW_RADIUS = 1;\nconst ELLIPSIS = 'ellipsis';\n\n// The shared ControlledSelect trigger ships a wide (min-w-52) field at the default\n// input height. For the pagination we want a compact, discreet picker, so we release\n// the min-widths and shrink the trigger's width and height via arbitrary variants\n// (same technique used elsewhere in the app to shrink this trigger).\nconst COMPACT_PAGE_SIZE_SELECT = classNames(\n  'w-[72px]',\n  '[&_.controlled-select-input]:!min-w-0',\n  '[&_.controlled-select-container]:!min-w-0',\n  '[&_.controlled-select-container]:!h-8',\n  '[&_.controlled-select-input]:!py-1',\n  '[&_.controlled-select-input]:!text-xs',\n);\n\n/**\n * Páginas visíveis: primeira, última, a atual e uma vizinha de cada lado.\n * As reticências entram só quando existe salto real, então a barra nunca muda\n * de largura a cada clique.\n */\nconst buildPageItems = (currentPage: number, numberOfPages: number): Array<number | typeof ELLIPSIS> => {\n  if (numberOfPages <= 1) return [1];\n\n  const pages = new Set<number>([1, numberOfPages]);\n  for (let page = currentPage - PAGE_WINDOW_RADIUS; page <= currentPage + PAGE_WINDOW_RADIUS; page += 1) {\n    if (page >= 1 && page <= numberOfPages) pages.add(page);\n  }\n\n  const sortedPages = [...pages].sort((first, second) => first - second);\n\n  return sortedPages.flatMap((page, index) => {\n    const previousPage = sortedPages[index - 1];\n    return previousPage !== undefined && page - previousPage > 1 ? [ELLIPSIS, page] : [page];\n  });\n};\n\n/**\n * Compact, right-aligned pagination for the DataTable. Deliberately smaller and\n * more discreet than the shared TableComponentPagination.\n */\nconst DataTablePagination: React.FC<IDataTablePaginationProps> = ({\n  pageSize,\n  numberOfPages,\n  currentPage,\n  setCurrentPage,\n  onPageSizeChange,\n  totalItems,\n}) => {\n  const { t } = useTranslation('ui');\n\n  const canPrev = currentPage > 1;\n  const canNext = currentPage < numberOfPages;\n  const pageItems = buildPageItems(currentPage, numberOfPages);\n\n  // The arrows are the only way to page on touch, so they keep a ~40px target\n  // instead of the icon's own 18px box, while staying visually compact.\n  const stepClass = (enabled: boolean) =>\n    classNames(\n      'flex size-10 items-center justify-center rounded transition-colors tablet:size-8',\n      enabled ? 'text-foreground-subtle hover:bg-muted-hover' : 'text-foreground-faint',\n    );\n\n  const pageClass = (isCurrent: boolean) =>\n    classNames(\n      'flex size-10 items-center justify-center rounded text-xs tabular-nums transition-colors tablet:size-8',\n      isCurrent\n        ? 'bg-brand font-semibold text-brand-fg'\n        : 'text-foreground-subtle hover:bg-muted-hover hover:text-foreground-muted',\n    );\n\n  const rangeStart = (currentPage - 1) * pageSize + 1;\n  const rangeEnd = totalItems != null ? Math.min(currentPage * pageSize, totalItems) : currentPage * pageSize;\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-end gap-x-4 gap-y-2 pb-3 text-xs text-foreground-subtle\">\n      {onPageSizeChange && (\n        <div className=\"flex items-center gap-1.5\">\n          <span>{t('pagination.resultsPerPage')}</span>\n          <ControlledSelect\n            options={PAGE_SIZE_SELECT_OPTIONS}\n            selectedValue={pageSize.toString()}\n            onChangeHook={(selected) => onPageSizeChange(Number(selected))}\n            searchable={false}\n            clearable={false}\n            className={COMPACT_PAGE_SIZE_SELECT}\n          />\n        </div>\n      )}\n\n      <span className=\"tabular-nums\">\n        {totalItems != null\n          ? t('pagination.range', {\n              from: formatNumber(Math.min(rangeStart, rangeEnd)),\n              to: formatNumber(rangeEnd),\n              total: formatNumber(totalItems),\n            })\n          : t('pagination.pageOf', { current: currentPage, total: numberOfPages })}\n      </span>\n\n      <div className=\"flex items-center gap-0.5\">\n        <ControlledTooltip content={t('pagination.first')}>\n          <ControlledButton\n            aria-label={t('pagination.first')}\n            defaultHtmlButton\n            disabled={!canPrev}\n            onClick={() => setCurrentPage(1)}\n            className={stepClass(canPrev)}\n          >\n            <MaterialSymbol icon=\"first_page\" size={18} />\n          </ControlledButton>\n        </ControlledTooltip>\n        <ControlledTooltip content={t('actions.previous')}>\n          <ControlledButton\n            aria-label={t('actions.previous')}\n            defaultHtmlButton\n            disabled={!canPrev}\n            onClick={() => setCurrentPage(currentPage - 1)}\n            className={stepClass(canPrev)}\n          >\n            <MaterialSymbol icon=\"chevron_left\" size={18} />\n          </ControlledButton>\n        </ControlledTooltip>\n\n        {pageItems.map((item, index) =>\n          item === ELLIPSIS ? (\n            <span\n              key={`data-table-pagination-gap-${index}`}\n              className=\"flex size-10 items-center justify-center text-foreground-faint tablet:size-8\"\n              aria-hidden\n            >\n              {t('pagination.gap')}\n            </span>\n          ) : (\n            <ControlledButton\n              key={`data-table-pagination-page-${item}`}\n              defaultHtmlButton\n              aria-current={item === currentPage ? 'page' : undefined}\n              onClick={() => setCurrentPage(item)}\n              className={pageClass(item === currentPage)}\n            >\n              {formatNumber(item)}\n            </ControlledButton>\n          ),\n        )}\n\n        <ControlledTooltip content={t('actions.next')}>\n          <ControlledButton\n            aria-label={t('actions.next')}\n            defaultHtmlButton\n            disabled={!canNext}\n            onClick={() => setCurrentPage(currentPage + 1)}\n            className={stepClass(canNext)}\n          >\n            <MaterialSymbol icon=\"chevron_right\" size={18} />\n          </ControlledButton>\n        </ControlledTooltip>\n        <ControlledTooltip content={t('pagination.last')}>\n          <ControlledButton\n            aria-label={t('pagination.last')}\n            defaultHtmlButton\n            disabled={!canNext}\n            onClick={() => setCurrentPage(numberOfPages)}\n            className={stepClass(canNext)}\n          >\n            <MaterialSymbol icon=\"last_page\" size={18} />\n          </ControlledButton>\n        </ControlledTooltip>\n      </div>\n    </div>\n  );\n};\n\nexport default DataTablePagination;\n"],"names":[],"mappings":"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"}

package/dist/components/UI/DataTable/DataTableSaveButton.d.ts

@@ -0,0 +1,13 @@
+interface IDataTableSaveButtonProps {
+    onClick: () => void;
+    loading?: boolean;
+    disabled?: boolean;
+    label?: string;
+}
+/**
+ * Toolbar action for saving pending inline edits held in `useDataTableEditBuffer`.
+ * Drop it into the DataTable `toolbarSlot` and wire `onClick` to the hook's
+ * `flush`, `loading` to its `loading`, and `disabled` to `!isDirty`.
+ */
+declare const DataTableSaveButton: React.FC<IDataTableSaveButtonProps>;
+export default DataTableSaveButton;

package/dist/components/UI/DataTable/DataTableSaveButton.js

@@ -0,0 +1,21 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../../Form/ControlledButton.js";
+import LoadingSpinner from "../LoadingSpinner.js";
+import { MaterialSymbol } from "../MaterialSymbol/index.js";
+const DataTableSaveButton = ({
+  onClick,
+  loading = false,
+  disabled = false,
+  label
+}) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsxs(ControlledButton, { disabled: disabled || loading, onClick, className: "flex items-center gap-1.5", children: [
+    loading ? /* @__PURE__ */ jsx(LoadingSpinner, { size: 4, color: "white" }) : /* @__PURE__ */ jsx(MaterialSymbol, { icon: "save", size: 18 }),
+    label ?? t("dataTable.save")
+  ] });
+};
+export {
+  DataTableSaveButton as default
+};
+//# sourceMappingURL=DataTableSaveButton.js.map

package/dist/components/UI/DataTable/DataTableSaveButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSaveButton.js","sources":["../../../../src/components/UI/DataTable/DataTableSaveButton.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport LoadingSpinner from '@/components/UI/LoadingSpinner';\nimport { MaterialSymbol } from '@/components/UI/MaterialSymbol';\n\ninterface IDataTableSaveButtonProps {\n  onClick: () => void;\n  loading?: boolean;\n  disabled?: boolean;\n  label?: string;\n}\n\n/**\n * Toolbar action for saving pending inline edits held in `useDataTableEditBuffer`.\n * Drop it into the DataTable `toolbarSlot` and wire `onClick` to the hook's\n * `flush`, `loading` to its `loading`, and `disabled` to `!isDirty`.\n */\nconst DataTableSaveButton: React.FC<IDataTableSaveButtonProps> = ({\n  onClick,\n  loading = false,\n  disabled = false,\n  label,\n}) => {\n  const { t } = useTranslation('ui');\n\n  return (\n    <ControlledButton disabled={disabled || loading} onClick={onClick} className=\"flex items-center gap-1.5\">\n      {loading ? <LoadingSpinner size={4} color=\"white\" /> : <MaterialSymbol icon=\"save\" size={18} />}\n      {label ?? t('dataTable.save')}\n    </ControlledButton>\n  );\n};\n\nexport default DataTableSaveButton;\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,sBAA2D,CAAC;AAAA,EAChE;AAAA,EACA,UAAU;AAAA,EACV,WAAW;AAAA,EACX;AACF,MAAM;AACJ,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,8BACG,kBAAA,EAAiB,UAAU,YAAY,SAAS,SAAkB,WAAU,6BAC1E,UAAA;AAAA,IAAA,UAAU,oBAAC,gBAAA,EAAe,MAAM,GAAG,OAAM,QAAA,CAAQ,IAAK,oBAAC,gBAAA,EAAe,MAAK,QAAO,MAAM,IAAI;AAAA,IAC5F,SAAS,EAAE,gBAAgB;AAAA,EAAA,GAC9B;AAEJ;"}

package/dist/components/UI/DataTable/DataTableSegmentedTabs.d.ts

@@ -0,0 +1,8 @@
+import { IDataTableRow, IDataTableTab } from './types';
+interface IDataTableSegmentedTabsProps<T extends IDataTableRow> {
+    tabs: Array<IDataTableTab<T>>;
+    activeTab: string;
+    onChange: (value: string) => void;
+}
+declare const DataTableSegmentedTabs: <T extends IDataTableRow>({ tabs, activeTab, onChange, }: IDataTableSegmentedTabsProps<T>) => import("react").JSX.Element;
+export default DataTableSegmentedTabs;

package/dist/components/UI/DataTable/DataTableSegmentedTabs.js

@@ -0,0 +1,35 @@
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import ControlledButton from "../../Form/ControlledButton.js";
+import HorizontalScrollArea from "../HorizontalScrollArea.js";
+const DataTableSegmentedTabs = ({
+  tabs,
+  activeTab,
+  onChange
+}) => (
+  // The segments never wrap (a wrapped pill bar reads as two separate controls),
+  // so on a narrow toolbar they scroll instead of being clipped out of reach.
+  /* @__PURE__ */ jsx(HorizontalScrollArea, { containerClassName: "rounded-lg bg-muted-hover", className: "p-1", children: /* @__PURE__ */ jsx("div", { className: "flex w-max items-center gap-1", children: tabs.map((tab) => {
+    const isActive = tab.value === activeTab;
+    return /* @__PURE__ */ jsx(
+      ControlledButton,
+      {
+        defaultHtmlButton: true,
+        onClick: () => onChange(tab.value),
+        className: classNames(
+          "min-h-9 shrink-0 whitespace-nowrap rounded-md px-4 py-1.5 text-sm font-medium transition-colors",
+          {
+            "bg-brand text-brand-fg shadow-sm": isActive,
+            "text-foreground-muted hover:text-foreground": !isActive
+          }
+        ),
+        children: tab.count !== void 0 ? `${tab.label} (${tab.count})` : tab.label
+      },
+      tab.value
+    );
+  }) }) })
+);
+export {
+  DataTableSegmentedTabs as default
+};
+//# sourceMappingURL=DataTableSegmentedTabs.js.map

package/dist/components/UI/DataTable/DataTableSegmentedTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableSegmentedTabs.js","sources":["../../../../src/components/UI/DataTable/DataTableSegmentedTabs.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport HorizontalScrollArea from '@/components/UI/HorizontalScrollArea';\n\nimport type { IDataTableRow, IDataTableTab } from './types';\n\ninterface IDataTableSegmentedTabsProps<T extends IDataTableRow> {\n  tabs: Array<IDataTableTab<T>>;\n  activeTab: string;\n  onChange: (value: string) => void;\n}\n\nconst DataTableSegmentedTabs = <T extends IDataTableRow>({\n  tabs,\n  activeTab,\n  onChange,\n}: IDataTableSegmentedTabsProps<T>) => (\n  // The segments never wrap (a wrapped pill bar reads as two separate controls),\n  // so on a narrow toolbar they scroll instead of being clipped out of reach.\n  <HorizontalScrollArea containerClassName=\"rounded-lg bg-muted-hover\" className=\"p-1\">\n    <div className=\"flex w-max items-center gap-1\">\n      {tabs.map((tab) => {\n        const isActive = tab.value === activeTab;\n\n        return (\n          <ControlledButton\n            key={tab.value}\n            defaultHtmlButton\n            onClick={() => onChange(tab.value)}\n            className={classNames(\n              'min-h-9 shrink-0 whitespace-nowrap rounded-md px-4 py-1.5 text-sm font-medium transition-colors',\n              {\n                'bg-brand text-brand-fg shadow-sm': isActive,\n                'text-foreground-muted hover:text-foreground': !isActive,\n              },\n            )}\n          >\n            {tab.count !== undefined ? `${tab.label} (${tab.count})` : tab.label}\n          </ControlledButton>\n        );\n      })}\n    </div>\n  </HorizontalScrollArea>\n);\n\nexport default DataTableSegmentedTabs;\n"],"names":[],"mappings":";;;;AAaA,MAAM,yBAAyB,CAA0B;AAAA,EACvD;AAAA,EACA;AAAA,EACA;AACF;AAAA;AAAA;AAAA,EAGE,oBAAC,sBAAA,EAAqB,oBAAmB,6BAA4B,WAAU,OAC7E,UAAA,oBAAC,OAAA,EAAI,WAAU,iCACZ,UAAA,KAAK,IAAI,CAAC,QAAQ;AACjB,UAAM,WAAW,IAAI,UAAU;AAE/B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,mBAAiB;AAAA,QACjB,SAAS,MAAM,SAAS,IAAI,KAAK;AAAA,QACjC,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,oCAAoC;AAAA,YACpC,+CAA+C,CAAC;AAAA,UAAA;AAAA,QAClD;AAAA,QAGD,UAAA,IAAI,UAAU,SAAY,GAAG,IAAI,KAAK,KAAK,IAAI,KAAK,MAAM,IAAI;AAAA,MAAA;AAAA,MAX1D,IAAI;AAAA,IAAA;AAAA,EAcf,CAAC,GACH,EAAA,CACF;AAAA;"}

package/dist/components/UI/DataTable/DataTableStates.d.ts

@@ -0,0 +1,17 @@
+export declare const DataTableSkeletonState: React.FC<{
+    rows?: number;
+}>;
+export declare const DataTableCardsSkeletonState: React.FC<{
+    cardClassName?: string;
+}>;
+interface IDataTableErrorStateProps {
+    onRetry?: () => void;
+    /** The caught error, so a denial or a dropped connection does not read as a system failure. */
+    errorCause?: unknown;
+}
+export declare const DataTableErrorState: React.FC<IDataTableErrorStateProps>;
+interface IDataTableEmptyStateProps {
+    emptyMessage?: string;
+}
+export declare const DataTableEmptyState: React.FC<IDataTableEmptyStateProps>;
+export {};

package/dist/components/UI/DataTable/DataTableStates.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import NoDataFound from "../NoDataFound/index.js";
+import SkeletonLoading from "../SkeletonLoading.js";
+import { mergeClasses } from "../../../helpers/mergeClasses.js";
+import { describeUiError } from "../../../helpers/uiErrorPresenter.js";
+const DEFAULT_SKELETON_ROWS = 8;
+const DataTableSkeletonState = ({ rows = DEFAULT_SKELETON_ROWS }) => /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 py-4", children: Array.from({ length: Math.max(1, rows) }).map((_, index) => /* @__PURE__ */ jsx(SkeletonLoading, { className: "h-9" }, `data-table-skeleton-${index}`)) });
+const DataTableCardsSkeletonState = ({ cardClassName }) => (
+  // Mesmo contêiner e mesmo alinhamento da grade real: sem o `@container` aqui, um
+  // card de largura responsiva não teria contra o que medir enquanto carrega.
+  /* @__PURE__ */ jsx("div", { className: "flex flex-wrap justify-center gap-4 py-2 @container @md:justify-start", children: Array.from({ length: 12 }).map((_, index) => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: mergeClasses(
+        "w-52 animate-pulse overflow-hidden rounded-lg border border-border-subtle bg-surface",
+        cardClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "aspect-square w-full bg-muted-active" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 p-3", children: [
+          /* @__PURE__ */ jsx(SkeletonLoading, { className: "h-4 w-3/4" }),
+          /* @__PURE__ */ jsx(SkeletonLoading, { className: "h-3 w-1/2" }),
+          /* @__PURE__ */ jsx(SkeletonLoading, { className: "h-3 w-2/3" }),
+          /* @__PURE__ */ jsx(SkeletonLoading, { className: "mt-1 h-3 w-1/3" })
+        ] })
+      ]
+    },
+    `data-table-card-skeleton-${index}`
+  )) })
+);
+const DataTableErrorState = ({ onRetry, errorCause }) => {
+  const { t } = useTranslation("ui");
+  const presentation = describeUiError(errorCause);
+  const retryAction = onRetry ? { label: t("actions.tryAgain"), onClick: onRetry, icon: "refresh" } : void 0;
+  if (!presentation) {
+    return /* @__PURE__ */ jsx(NoDataFound, { variant: "error", title: t("dataTable.error"), action: retryAction });
+  }
+  return /* @__PURE__ */ jsx(
+    NoDataFound,
+    {
+      variant: presentation.variant,
+      title: t(presentation.titleKey),
+      description: t(presentation.descriptionKey),
+      action: presentation.isRetryable ? retryAction : void 0
+    }
+  );
+};
+const DataTableEmptyState = ({ emptyMessage }) => {
+  const { t } = useTranslation("ui");
+  return /* @__PURE__ */ jsx(NoDataFound, { message: emptyMessage ?? t("dataTable.empty") });
+};
+export {
+  DataTableCardsSkeletonState,
+  DataTableEmptyState,
+  DataTableErrorState,
+  DataTableSkeletonState
+};
+//# sourceMappingURL=DataTableStates.js.map

package/dist/components/UI/DataTable/DataTableStates.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableStates.js","sources":["../../../../src/components/UI/DataTable/DataTableStates.tsx"],"sourcesContent":["import { useTranslation } from 'react-i18next';\n\nimport NoDataFound from '@/components/UI/NoDataFound';\nimport SkeletonLoading from '@/components/UI/SkeletonLoading';\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport { describeUiError } from '@/helpers/uiErrorPresenter';\n\nconst DEFAULT_SKELETON_ROWS = 8;\n\nexport const DataTableSkeletonState: React.FC<{ rows?: number }> = ({ rows = DEFAULT_SKELETON_ROWS }) => (\n  <div className=\"flex flex-col gap-2 py-4\">\n    {Array.from({ length: Math.max(1, rows) }).map((_, index) => (\n      <SkeletonLoading key={`data-table-skeleton-${index}`} className=\"h-9\" />\n    ))}\n  </div>\n);\n\nexport const DataTableCardsSkeletonState: React.FC<{ cardClassName?: string }> = ({ cardClassName }) => (\n  // Mesmo contêiner e mesmo alinhamento da grade real: sem o `@container` aqui, um\n  // card de largura responsiva não teria contra o que medir enquanto carrega.\n  <div className=\"flex flex-wrap justify-center gap-4 py-2 @container @md:justify-start\">\n    {Array.from({ length: 12 }).map((_, index) => (\n      <div\n        key={`data-table-card-skeleton-${index}`}\n        className={mergeClasses(\n          'w-52 animate-pulse overflow-hidden rounded-lg border border-border-subtle bg-surface',\n          cardClassName,\n        )}\n      >\n        <div className=\"aspect-square w-full bg-muted-active\" />\n        <div className=\"flex flex-col gap-2 p-3\">\n          <SkeletonLoading className=\"h-4 w-3/4\" />\n          <SkeletonLoading className=\"h-3 w-1/2\" />\n          <SkeletonLoading className=\"h-3 w-2/3\" />\n          <SkeletonLoading className=\"mt-1 h-3 w-1/3\" />\n        </div>\n      </div>\n    ))}\n  </div>\n);\n\ninterface IDataTableErrorStateProps {\n  onRetry?: () => void;\n  /** The caught error, so a denial or a dropped connection does not read as a system failure. */\n  errorCause?: unknown;\n}\n\nexport const DataTableErrorState: React.FC<IDataTableErrorStateProps> = ({ onRetry, errorCause }) => {\n  const { t } = useTranslation('ui');\n  const presentation = describeUiError(errorCause);\n  const retryAction = onRetry\n    ? { label: t('actions.tryAgain'), onClick: onRetry, icon: 'refresh' as const }\n    : undefined;\n\n  if (!presentation) {\n    return <NoDataFound variant=\"error\" title={t('dataTable.error')} action={retryAction} />;\n  }\n\n  return (\n    <NoDataFound\n      variant={presentation.variant}\n      title={t(presentation.titleKey)}\n      description={t(presentation.descriptionKey)}\n      action={presentation.isRetryable ? retryAction : undefined}\n    />\n  );\n};\n\ninterface IDataTableEmptyStateProps {\n  emptyMessage?: string;\n}\n\nexport const DataTableEmptyState: React.FC<IDataTableEmptyStateProps> = ({ emptyMessage }) => {\n  const { t } = useTranslation('ui');\n\n  return <NoDataFound message={emptyMessage ?? t('dataTable.empty')} />;\n};\n"],"names":[],"mappings":";;;;;;AAOA,MAAM,wBAAwB;AAEvB,MAAM,yBAAsD,CAAC,EAAE,OAAO,4BAC3E,oBAAC,OAAA,EAAI,WAAU,4BACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAG,IAAI,EAAA,CAAG,EAAE,IAAI,CAAC,GAAG,UACjD,oBAAC,iBAAA,EAAqD,WAAU,MAAA,GAA1C,uBAAuB,KAAK,EAAoB,CACvE,EAAA,CACH;AAGK,MAAM,8BAAoE,CAAC,EAAE,cAAA;AAAA;AAAA;AAAA,EAGlF,oBAAC,OAAA,EAAI,WAAU,yEACZ,gBAAM,KAAK,EAAE,QAAQ,GAAA,CAAI,EAAE,IAAI,CAAC,GAAG,UAClC;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,uCAAA,CAAuC;AAAA,QACtD,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAA,oBAAC,iBAAA,EAAgB,WAAU,YAAA,CAAY;AAAA,UACvC,oBAAC,iBAAA,EAAgB,WAAU,YAAA,CAAY;AAAA,UACvC,oBAAC,iBAAA,EAAgB,WAAU,YAAA,CAAY;AAAA,UACvC,oBAAC,iBAAA,EAAgB,WAAU,iBAAA,CAAiB;AAAA,QAAA,EAAA,CAC9C;AAAA,MAAA;AAAA,IAAA;AAAA,IAZK,4BAA4B,KAAK;AAAA,EAAA,CAczC,EAAA,CACH;AAAA;AASK,MAAM,sBAA2D,CAAC,EAAE,SAAS,iBAAiB;AACnG,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AACjC,QAAM,eAAe,gBAAgB,UAAU;AAC/C,QAAM,cAAc,UAChB,EAAE,OAAO,EAAE,kBAAkB,GAAG,SAAS,SAAS,MAAM,UAAA,IACxD;AAEJ,MAAI,CAAC,cAAc;AACjB,WAAO,oBAAC,eAAY,SAAQ,SAAQ,OAAO,EAAE,iBAAiB,GAAG,QAAQ,YAAA,CAAa;AAAA,EACxF;AAEA,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAS,aAAa;AAAA,MACtB,OAAO,EAAE,aAAa,QAAQ;AAAA,MAC9B,aAAa,EAAE,aAAa,cAAc;AAAA,MAC1C,QAAQ,aAAa,cAAc,cAAc;AAAA,IAAA;AAAA,EAAA;AAGvD;AAMO,MAAM,sBAA2D,CAAC,EAAE,mBAAmB;AAC5F,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,6BAAQ,aAAA,EAAY,SAAS,gBAAgB,EAAE,iBAAiB,GAAG;AACrE;"}

package/dist/components/UI/DataTable/DataTableToolbar.d.ts

@@ -0,0 +1,28 @@
+import { JSX } from 'react';
+import { IDataTableRow, IDataTableTab, TDataTableViewMode } from './types';
+interface IDataTableToolbarProps<T extends IDataTableRow> {
+    tabs?: Array<IDataTableTab<T>>;
+    activeTab: string;
+    onTabChange: (value: string) => void;
+    showViewToggle?: boolean;
+    showGroupedView?: boolean;
+    showKanbanView?: boolean;
+    viewMode?: TDataTableViewMode;
+    onViewModeChange?: (mode: TDataTableViewMode) => void;
+    showSearch: boolean;
+    searchLabel?: string;
+    initialSearch?: string;
+    searchDisabled: boolean;
+    searchDebounceTime: number;
+    searchMinLength: number;
+    searchAtStart?: boolean;
+    onSearchInput: (value: string) => void;
+    toolbarSlot?: JSX.Element;
+    toolbarStartSlot?: JSX.Element;
+    /** Toggle de colunas quando o host opta por exibi-lo no toolbar em vez do cabeçalho. */
+    columnToggleSlot?: JSX.Element;
+    /** First load only: renders placeholders with the same footprint as the real controls. */
+    showSkeleton?: boolean;
+}
+declare const DataTableToolbar: <T extends IDataTableRow>({ tabs, activeTab, onTabChange, showViewToggle, showGroupedView, showKanbanView, viewMode, onViewModeChange, showSearch, searchLabel, initialSearch, searchDisabled, searchDebounceTime, searchMinLength, searchAtStart, onSearchInput, toolbarSlot, toolbarStartSlot, columnToggleSlot, showSkeleton, }: IDataTableToolbarProps<T>) => JSX.Element;
+export default DataTableToolbar;

package/dist/components/UI/DataTable/DataTableToolbar.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ControlledViewToggle from "../../Form/ControlledViewToggle.js";
+import "classnames";
+import "../../Form/ControlledButton.js";
+import "react";
+import "../ControlledMenu.js";
+import "motion/react";
+import "react-dom";
+import "../../../helpers/mergeClasses.js";
+import "@floating-ui/dom";
+import "../../../motion/motionPresets.js";
+import "../../../motion/motionTokens.js";
+import "../MaterialSymbol/index.js";
+import "../../Form/ControlledSwitch.js";
+import "date-fns";
+import "date-fns/locale";
+import "react-day-picker";
+import "../ControlledPopover.js";
+import "react-day-picker/style.css";
+import "../../DateTime/DateRangePicker.js";
+import "react-infinite-scroll-component";
+import "react-window";
+import UnifiedSearchBar from "../../Search/UnifiedSearchBar.js";
+import "../NoDataFound/index.js";
+/* empty css                                    */
+import SkeletonLoading from "../SkeletonLoading.js";
+import "../../Search/filters/FiltersButton.js";
+import "../../../helpers/utilityHelpers.js";
+import "../../Form/ControlledDialog.js";
+import "../../Navigation/UiNavigationContext.js";
+import DataTableSegmentedTabs from "./DataTableSegmentedTabs.js";
+const DataTableToolbar = ({
+  tabs,
+  activeTab,
+  onTabChange,
+  showViewToggle = false,
+  showGroupedView = false,
+  showKanbanView = false,
+  viewMode = "list",
+  onViewModeChange,
+  showSearch,
+  searchLabel,
+  initialSearch,
+  searchDisabled,
+  searchDebounceTime,
+  searchMinLength,
+  searchAtStart = false,
+  onSearchInput,
+  toolbarSlot,
+  toolbarStartSlot,
+  columnToggleSlot,
+  showSkeleton = false
+}) => {
+  const { t } = useTranslation("ui");
+  const viewOptions = [
+    { value: "cards", icon: "grid_view", label: t("dataTable.viewCards") },
+    { value: "list", icon: "format_list_bulleted", label: t("dataTable.viewList") },
+    ...showGroupedView ? [{ value: "grouped", icon: "workspaces", label: t("dataTable.viewGrouped") }] : [],
+    ...showKanbanView ? [{ value: "kanban", icon: "view_kanban", label: t("dataTable.viewKanban") }] : []
+  ];
+  const searchBar = showSearch ? /* @__PURE__ */ jsx(
+    UnifiedSearchBar,
+    {
+      mode: "callback",
+      containerClassName: "flex w-full items-center gap-x-2 tablet:w-72 tablet:shrink-0",
+      className: "!h-10 !min-h-10 !w-full tablet:!w-72",
+      label: searchLabel ?? t("actions.search"),
+      initialValue: initialSearch,
+      disabled: searchDisabled,
+      debounceTime: searchDebounceTime,
+      minSearchLength: searchMinLength,
+      showClearButton: true,
+      filterCallback: onSearchInput
+    }
+  ) : null;
+  const searchSkeleton = showSearch ? /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-full !rounded-lg tablet:!w-72" }) : null;
+  if (showSkeleton) {
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-3 tablet:w-auto", children: [
+        toolbarStartSlot && /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-32 !rounded-lg" }),
+        tabs && tabs.length > 0 && /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-64 !rounded-xl" }),
+        searchAtStart && searchSkeleton
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap items-center gap-3 tablet:w-auto tablet:flex-nowrap", children: [
+        !searchAtStart && searchSkeleton,
+        columnToggleSlot && /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-28 !rounded-lg" }),
+        showViewToggle && onViewModeChange && /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-24 !rounded-lg" }),
+        toolbarSlot && /* @__PURE__ */ jsx(SkeletonLoading, { className: "!h-10 !w-28 !rounded-lg" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full min-w-0 flex-wrap items-center gap-3 tablet:w-auto", children: [
+      toolbarStartSlot,
+      tabs && tabs.length > 0 && /* @__PURE__ */ jsx(DataTableSegmentedTabs, { tabs, activeTab, onChange: onTabChange }),
+      searchAtStart && searchBar
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap items-center gap-3 tablet:w-auto tablet:flex-nowrap", children: [
+      !searchAtStart && searchBar,
+      columnToggleSlot,
+      showViewToggle && onViewModeChange && /* @__PURE__ */ jsx(ControlledViewToggle, { options: viewOptions, value: viewMode, onChange: onViewModeChange }),
+      toolbarSlot
+    ] })
+  ] });
+};
+export {
+  DataTableToolbar as default
+};
+//# sourceMappingURL=DataTableToolbar.js.map

package/dist/components/UI/DataTable/DataTableToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTableToolbar.js","sources":["../../../../src/components/UI/DataTable/DataTableToolbar.tsx"],"sourcesContent":["import { JSX } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledViewToggle, { type IControlledViewToggleOption } from '@/components/Form/ControlledViewToggle';\nimport { UnifiedSearchBar } from '@/components/Search';\nimport SkeletonLoading from '@/components/UI/SkeletonLoading';\n\nimport DataTableSegmentedTabs from './DataTableSegmentedTabs';\nimport type { IDataTableRow, IDataTableTab, TDataTableViewMode } from './types';\n\ninterface IDataTableToolbarProps<T extends IDataTableRow> {\n  tabs?: Array<IDataTableTab<T>>;\n  activeTab: string;\n  onTabChange: (value: string) => void;\n  showViewToggle?: boolean;\n  showGroupedView?: boolean;\n  showKanbanView?: boolean;\n  viewMode?: TDataTableViewMode;\n  onViewModeChange?: (mode: TDataTableViewMode) => void;\n  showSearch: boolean;\n  searchLabel?: string;\n  initialSearch?: string;\n  searchDisabled: boolean;\n  searchDebounceTime: number;\n  searchMinLength: number;\n  searchAtStart?: boolean;\n  onSearchInput: (value: string) => void;\n  toolbarSlot?: JSX.Element;\n  toolbarStartSlot?: JSX.Element;\n  /** Toggle de colunas quando o host opta por exibi-lo no toolbar em vez do cabeçalho. */\n  columnToggleSlot?: JSX.Element;\n  /** First load only: renders placeholders with the same footprint as the real controls. */\n  showSkeleton?: boolean;\n}\n\nconst DataTableToolbar = <T extends IDataTableRow>({\n  tabs,\n  activeTab,\n  onTabChange,\n  showViewToggle = false,\n  showGroupedView = false,\n  showKanbanView = false,\n  viewMode = 'list',\n  onViewModeChange,\n  showSearch,\n  searchLabel,\n  initialSearch,\n  searchDisabled,\n  searchDebounceTime,\n  searchMinLength,\n  searchAtStart = false,\n  onSearchInput,\n  toolbarSlot,\n  toolbarStartSlot,\n  columnToggleSlot,\n  showSkeleton = false,\n}: IDataTableToolbarProps<T>) => {\n  const { t } = useTranslation('ui');\n\n  const viewOptions: Array<IControlledViewToggleOption<TDataTableViewMode>> = [\n    { value: 'cards', icon: 'grid_view', label: t('dataTable.viewCards') },\n    { value: 'list', icon: 'format_list_bulleted', label: t('dataTable.viewList') },\n    ...(showGroupedView\n      ? [{ value: 'grouped' as const, icon: 'workspaces' as const, label: t('dataTable.viewGrouped') }]\n      : []),\n    ...(showKanbanView\n      ? [{ value: 'kanban' as const, icon: 'view_kanban' as const, label: t('dataTable.viewKanban') }]\n      : []),\n  ];\n\n  const searchBar = showSearch ? (\n    <UnifiedSearchBar\n      mode=\"callback\"\n      containerClassName=\"flex w-full items-center gap-x-2 tablet:w-72 tablet:shrink-0\"\n      className=\"!h-10 !min-h-10 !w-full tablet:!w-72\"\n      label={searchLabel ?? t('actions.search')}\n      initialValue={initialSearch}\n      disabled={searchDisabled}\n      debounceTime={searchDebounceTime}\n      minSearchLength={searchMinLength}\n      showClearButton\n      filterCallback={onSearchInput}\n    />\n  ) : null;\n\n  const searchSkeleton = showSearch ? <SkeletonLoading className=\"!h-10 !w-full !rounded-lg tablet:!w-72\" /> : null;\n\n  if (showSkeleton) {\n    return (\n      <div className=\"flex flex-wrap items-center justify-between gap-3\">\n        <div className=\"flex w-full min-w-0 flex-wrap items-center gap-3 tablet:w-auto\">\n          {toolbarStartSlot && <SkeletonLoading className=\"!h-10 !w-32 !rounded-lg\" />}\n          {tabs && tabs.length > 0 && <SkeletonLoading className=\"!h-10 !w-64 !rounded-xl\" />}\n          {searchAtStart && searchSkeleton}\n        </div>\n\n        <div className=\"flex w-full flex-wrap items-center gap-3 tablet:w-auto tablet:flex-nowrap\">\n          {!searchAtStart && searchSkeleton}\n          {columnToggleSlot && <SkeletonLoading className=\"!h-10 !w-28 !rounded-lg\" />}\n          {showViewToggle && onViewModeChange && <SkeletonLoading className=\"!h-10 !w-24 !rounded-lg\" />}\n          {toolbarSlot && <SkeletonLoading className=\"!h-10 !w-28 !rounded-lg\" />}\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-wrap items-center justify-between gap-3\">\n      <div className=\"flex w-full min-w-0 flex-wrap items-center gap-3 tablet:w-auto\">\n        {toolbarStartSlot}\n        {tabs && tabs.length > 0 && <DataTableSegmentedTabs tabs={tabs} activeTab={activeTab} onChange={onTabChange} />}\n        {searchAtStart && searchBar}\n      </div>\n\n      <div className=\"flex w-full flex-wrap items-center gap-3 tablet:w-auto tablet:flex-nowrap\">\n        {!searchAtStart && searchBar}\n        {columnToggleSlot}\n        {showViewToggle && onViewModeChange && (\n          <ControlledViewToggle options={viewOptions} value={viewMode} onChange={onViewModeChange} />\n        )}\n        {toolbarSlot}\n      </div>\n    </div>\n  );\n};\n\nexport default DataTableToolbar;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAM,mBAAmB,CAA0B;AAAA,EACjD;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,kBAAkB;AAAA,EAClB,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AACjB,MAAiC;AAC/B,QAAM,EAAE,EAAA,IAAM,eAAe,IAAI;AAEjC,QAAM,cAAsE;AAAA,IAC1E,EAAE,OAAO,SAAS,MAAM,aAAa,OAAO,EAAE,qBAAqB,EAAA;AAAA,IACnE,EAAE,OAAO,QAAQ,MAAM,wBAAwB,OAAO,EAAE,oBAAoB,EAAA;AAAA,IAC5E,GAAI,kBACA,CAAC,EAAE,OAAO,WAAoB,MAAM,cAAuB,OAAO,EAAE,uBAAuB,EAAA,CAAG,IAC9F,CAAA;AAAA,IACJ,GAAI,iBACA,CAAC,EAAE,OAAO,UAAmB,MAAM,eAAwB,OAAO,EAAE,sBAAsB,EAAA,CAAG,IAC7F,CAAA;AAAA,EAAC;AAGP,QAAM,YAAY,aAChB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,oBAAmB;AAAA,MACnB,WAAU;AAAA,MACV,OAAO,eAAe,EAAE,gBAAgB;AAAA,MACxC,cAAc;AAAA,MACd,UAAU;AAAA,MACV,cAAc;AAAA,MACd,iBAAiB;AAAA,MACjB,iBAAe;AAAA,MACf,gBAAgB;AAAA,IAAA;AAAA,EAAA,IAEhB;AAEJ,QAAM,iBAAiB,aAAa,oBAAC,iBAAA,EAAgB,WAAU,0CAAyC,IAAK;AAE7G,MAAI,cAAc;AAChB,WACE,qBAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,kEACZ,UAAA;AAAA,QAAA,oBAAoB,oBAAC,iBAAA,EAAgB,WAAU,0BAAA,CAA0B;AAAA,QACzE,QAAQ,KAAK,SAAS,KAAK,oBAAC,iBAAA,EAAgB,WAAU,2BAA0B;AAAA,QAChF,iBAAiB;AAAA,MAAA,GACpB;AAAA,MAEA,qBAAC,OAAA,EAAI,WAAU,6EACZ,UAAA;AAAA,QAAA,CAAC,iBAAiB;AAAA,QAClB,oBAAoB,oBAAC,iBAAA,EAAgB,WAAU,0BAAA,CAA0B;AAAA,QACzE,kBAAkB,oBAAoB,oBAAC,iBAAA,EAAgB,WAAU,2BAA0B;AAAA,QAC3F,eAAe,oBAAC,iBAAA,EAAgB,WAAU,0BAAA,CAA0B;AAAA,MAAA,EAAA,CACvE;AAAA,IAAA,GACF;AAAA,EAEJ;AAEA,SACE,qBAAC,OAAA,EAAI,WAAU,qDACb,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,kEACZ,UAAA;AAAA,MAAA;AAAA,MACA,QAAQ,KAAK,SAAS,yBAAM,wBAAA,EAAuB,MAAY,WAAsB,UAAU,YAAA,CAAa;AAAA,MAC5G,iBAAiB;AAAA,IAAA,GACpB;AAAA,IAEA,qBAAC,OAAA,EAAI,WAAU,6EACZ,UAAA;AAAA,MAAA,CAAC,iBAAiB;AAAA,MAClB;AAAA,MACA,kBAAkB,oBACjB,oBAAC,sBAAA,EAAqB,SAAS,aAAa,OAAO,UAAU,UAAU,iBAAA,CAAkB;AAAA,MAE1F;AAAA,IAAA,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/UI/DataTable/applyDataTableFilters.d.ts

@@ -0,0 +1,16 @@
+import { IDataTableFiltersConfig, IDataTableRow, TDataTableFilterValues } from './types';
+/**
+ * CLIENT-mode filtering driven by the table's filter config. Only active fields
+ * that declare a `predicate` narrow the rows. Server-only fields (no
+ * `predicate`) are ignored here. `combinator` decides whether a row must pass
+ * every active field or at least one.
+ */
+export declare const applyDataTableFilters: <T extends IDataTableRow>(rows: Array<T>, filters: IDataTableFiltersConfig<T> | undefined, values: TDataTableFilterValues) => Array<T>;
+/**
+ * SERVER-mode counterpart: collects the backend query params from every active
+ * field that declares `toServerParams`. The host merges these into its fetch
+ * instead of filtering in memory.
+ */
+export declare const buildDataTableFilterParams: <T extends IDataTableRow>(filters: IDataTableFiltersConfig<T> | undefined, values: TDataTableFilterValues) => Record<string, unknown>;
+/** Number of active filter fields. Drives the filter button badge count. */
+export declare const countActiveDataTableFilters: <T extends IDataTableRow>(filters: IDataTableFiltersConfig<T> | undefined, values: TDataTableFilterValues) => number;

package/dist/components/UI/DataTable/applyDataTableFilters.js

@@ -0,0 +1,54 @@
+import "react/jsx-runtime";
+import "classnames";
+import "react-i18next";
+import "../../Form/ControlledButton.js";
+import "react";
+import "../ControlledMenu.js";
+import "motion/react";
+import "react-dom";
+import "../../../helpers/mergeClasses.js";
+import "@floating-ui/dom";
+import "../../../motion/motionPresets.js";
+import "../../../motion/motionTokens.js";
+import "../MaterialSymbol/index.js";
+import { countActiveFilters, isFilterValueEmpty } from "../../Search/filters/filterValues.js";
+import "../../Form/ControlledSwitch.js";
+import "date-fns";
+import "date-fns/locale";
+import "react-day-picker";
+import "../ControlledPopover.js";
+import "react-day-picker/style.css";
+import "../../DateTime/DateRangePicker.js";
+import "react-infinite-scroll-component";
+import "react-window";
+import "../NoDataFound/index.js";
+/* empty css                                    */
+import "../../Search/filters/FiltersButton.js";
+import "../../../helpers/utilityHelpers.js";
+import "../../Form/ControlledDialog.js";
+import "../../Navigation/UiNavigationContext.js";
+const isFieldActive = (field, values) => !isFilterValueEmpty(field, values?.[field.key]);
+const applyDataTableFilters = (rows, filters, values) => {
+  if (!filters) return rows;
+  const activeFields = (filters.fields ?? []).filter((field) => isFieldActive(field, values) && field.predicate);
+  if (activeFields.length === 0) return rows;
+  const matches = (row, field) => field.predicate ? field.predicate(row, values?.[field.key]) : true;
+  if (filters.combinator === "OR") {
+    return (rows ?? []).filter((row) => activeFields.some((field) => matches(row, field)));
+  }
+  return (rows ?? []).filter((row) => activeFields.every((field) => matches(row, field)));
+};
+const buildDataTableFilterParams = (filters, values) => {
+  if (!filters) return {};
+  return (filters.fields ?? []).reduce((params, field) => {
+    if (!isFieldActive(field, values) || !field.toServerParams) return params;
+    return { ...params, ...field.toServerParams(values?.[field.key]) };
+  }, {});
+};
+const countActiveDataTableFilters = (filters, values) => filters ? countActiveFilters(filters.fields ?? [], values ?? {}) : 0;
+export {
+  applyDataTableFilters,
+  buildDataTableFilterParams,
+  countActiveDataTableFilters
+};
+//# sourceMappingURL=applyDataTableFilters.js.map

package/dist/components/UI/DataTable/applyDataTableFilters.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"applyDataTableFilters.js","sources":["../../../../src/components/UI/DataTable/applyDataTableFilters.ts"],"sourcesContent":["import { countActiveFilters, isFilterValueEmpty } from '@/components/Search/filters';\n\nimport type { IDataTableFiltersConfig, IDataTableRow, TDataTableFilterField, TDataTableFilterValues } from './types';\n\nconst isFieldActive = <T extends IDataTableRow>(\n  field: TDataTableFilterField<T>,\n  values: TDataTableFilterValues,\n): boolean => !isFilterValueEmpty(field, values?.[field.key]);\n\n/**\n * CLIENT-mode filtering driven by the table's filter config. Only active fields\n * that declare a `predicate` narrow the rows. Server-only fields (no\n * `predicate`) are ignored here. `combinator` decides whether a row must pass\n * every active field or at least one.\n */\nexport const applyDataTableFilters = <T extends IDataTableRow>(\n  rows: Array<T>,\n  filters: IDataTableFiltersConfig<T> | undefined,\n  values: TDataTableFilterValues,\n): Array<T> => {\n  if (!filters) return rows;\n\n  const activeFields = (filters.fields ?? []).filter((field) => isFieldActive(field, values) && field.predicate);\n  if (activeFields.length === 0) return rows;\n\n  const matches = (row: T, field: TDataTableFilterField<T>) =>\n    field.predicate ? field.predicate(row, values?.[field.key]) : true;\n\n  if (filters.combinator === 'OR') {\n    return (rows ?? []).filter((row) => activeFields.some((field) => matches(row, field)));\n  }\n\n  return (rows ?? []).filter((row) => activeFields.every((field) => matches(row, field)));\n};\n\n/**\n * SERVER-mode counterpart: collects the backend query params from every active\n * field that declares `toServerParams`. The host merges these into its fetch\n * instead of filtering in memory.\n */\nexport const buildDataTableFilterParams = <T extends IDataTableRow>(\n  filters: IDataTableFiltersConfig<T> | undefined,\n  values: TDataTableFilterValues,\n): Record<string, unknown> => {\n  if (!filters) return {};\n\n  return (filters.fields ?? []).reduce<Record<string, unknown>>((params, field) => {\n    if (!isFieldActive(field, values) || !field.toServerParams) return params;\n\n    return { ...params, ...field.toServerParams(values?.[field.key]) };\n  }, {});\n};\n\n/** Number of active filter fields. Drives the filter button badge count. */\nexport const countActiveDataTableFilters = <T extends IDataTableRow>(\n  filters: IDataTableFiltersConfig<T> | undefined,\n  values: TDataTableFilterValues,\n): number => (filters ? countActiveFilters(filters.fields ?? [], values ?? {}) : 0);\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,MAAM,gBAAgB,CACpB,OACA,WACY,CAAC,mBAAmB,OAAO,SAAS,MAAM,GAAG,CAAC;AAQrD,MAAM,wBAAwB,CACnC,MACA,SACA,WACa;AACb,MAAI,CAAC,QAAS,QAAO;AAErB,QAAM,gBAAgB,QAAQ,UAAU,CAAA,GAAI,OAAO,CAAC,UAAU,cAAc,OAAO,MAAM,KAAK,MAAM,SAAS;AAC7G,MAAI,aAAa,WAAW,EAAG,QAAO;AAEtC,QAAM,UAAU,CAAC,KAAQ,UACvB,MAAM,YAAY,MAAM,UAAU,KAAK,SAAS,MAAM,GAAG,CAAC,IAAI;AAEhE,MAAI,QAAQ,eAAe,MAAM;AAC/B,YAAQ,QAAQ,CAAA,GAAI,OAAO,CAAC,QAAQ,aAAa,KAAK,CAAC,UAAU,QAAQ,KAAK,KAAK,CAAC,CAAC;AAAA,EACvF;AAEA,UAAQ,QAAQ,CAAA,GAAI,OAAO,CAAC,QAAQ,aAAa,MAAM,CAAC,UAAU,QAAQ,KAAK,KAAK,CAAC,CAAC;AACxF;AAOO,MAAM,6BAA6B,CACxC,SACA,WAC4B;AAC5B,MAAI,CAAC,QAAS,QAAO,CAAA;AAErB,UAAQ,QAAQ,UAAU,CAAA,GAAI,OAAgC,CAAC,QAAQ,UAAU;AAC/E,QAAI,CAAC,cAAc,OAAO,MAAM,KAAK,CAAC,MAAM,eAAgB,QAAO;AAEnE,WAAO,EAAE,GAAG,QAAQ,GAAG,MAAM,eAAe,SAAS,MAAM,GAAG,CAAC,EAAA;AAAA,EACjE,GAAG,CAAA,CAAE;AACP;AAGO,MAAM,8BAA8B,CACzC,SACA,WACY,UAAU,mBAAmB,QAAQ,UAAU,CAAA,GAAI,UAAU,CAAA,CAAE,IAAI;"}

package/dist/components/UI/DataTable/bulkEditValues.d.ts

@@ -0,0 +1,8 @@
+export declare const isBulkValueEmpty: (value: unknown) => boolean;
+/**
+ * Compares a cell draft with the row's current value. Editors produce strings
+ * while the document may store numbers, so both sides are compared in textual
+ * form; empty (null, '', []) is a single state, so editing and reverting does
+ * not count as a change.
+ */
+export declare const areBulkValuesEqual: (left: unknown, right: unknown) => boolean;

package/dist/components/UI/DataTable/bulkEditValues.js

@@ -0,0 +1,13 @@
+const isBulkValueEmpty = (value) => Array.isArray(value) ? value.length === 0 : value == null || value === "";
+const areBulkValuesEqual = (left, right) => {
+  if (isBulkValueEmpty(left) && isBulkValueEmpty(right)) return true;
+  if (isBulkValueEmpty(left) !== isBulkValueEmpty(right)) return false;
+  const leftEntries = (Array.isArray(left) ? left : [left]).map(String);
+  const rightEntries = (Array.isArray(right) ? right : [right]).map(String);
+  return leftEntries.length === rightEntries.length && leftEntries.every((entry, index) => entry === rightEntries[index]);
+};
+export {
+  areBulkValuesEqual,
+  isBulkValueEmpty
+};
+//# sourceMappingURL=bulkEditValues.js.map