npm - @medusajs/ui - Versions diffs - 4.0.22-snapshot-20250829152522 → 4.0.22-snapshot-20250901132949 - Mend

@medusajs/ui 4.0.22-snapshot-20250829152522 → 4.0.22-snapshot-20250901132949

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

package/dist/cjs/blocks/data-table/use-data-table.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { type TableOptions, useReactTable } from "@tanstack/react-table";
+import { type ColumnOrderState, type TableOptions, useReactTable, type VisibilityState } from "@tanstack/react-table";
 import * as React from "react";
 import { DataTableColumnDef, DataTableColumnFilter, DataTableCommand, DataTableDateComparisonOperator, DataTableEmptyState, DataTableFilter, DataTableFilteringState, DataTableFilterOption, DataTablePaginationState, DataTableRow, DataTableRowSelectionState, DataTableSortingState } from "./types";
 interface DataTableOptions<TData> extends Pick<TableOptions<TData>, "data" | "getRowId"> {
@@ -74,8 +74,22 @@ interface DataTableOptions<TData> extends Pick<TableOptions<TData>, "data" | "ge
      * @default true
      */
     autoResetPageIndex?: boolean;
+    /**
+     * The state and callback for the column visibility.
+     */
+    columnVisibility?: {
+        state: VisibilityState;
+        onColumnVisibilityChange: (state: VisibilityState) => void;
+    };
+    /**
+     * The state and callback for the column order.
+     */
+    columnOrder?: {
+        state: ColumnOrderState;
+        onColumnOrderChange: (state: ColumnOrderState) => void;
+    };
 }
-interface UseDataTableReturn<TData> extends Pick<ReturnType<typeof useReactTable<TData>>, "getHeaderGroups" | "getRowModel" | "getCanNextPage" | "getCanPreviousPage" | "nextPage" | "previousPage" | "getPageCount" | "getAllColumns"> {
+interface UseDataTableReturn<TData> extends Pick<ReturnType<typeof useReactTable<TData>>, "getHeaderGroups" | "getRowModel" | "getCanNextPage" | "getCanPreviousPage" | "nextPage" | "previousPage" | "getPageCount" | "getAllColumns" | "setColumnVisibility" | "setColumnOrder"> {
     getSorting: () => DataTableSortingState | null;
     setSorting: (sortingOrUpdater: DataTableSortingState | ((prev: DataTableSortingState | null) => DataTableSortingState)) => void;
     getFilters: () => DataTableFilter[];
@@ -101,8 +115,12 @@ interface UseDataTableReturn<TData> extends Pick<ReturnType<typeof useReactTable
     enableFiltering: boolean;
     enableSorting: boolean;
     enableSearch: boolean;
+    enableColumnVisibility: boolean;
+    enableColumnOrder: boolean;
+    columnOrder: ColumnOrderState;
+    setColumnOrderFromArray: (order: string[]) => void;
 }
-declare const useDataTable: <TData>({ rowCount, filters, commands, rowSelection, sorting, filtering, pagination, search, onRowClick, autoResetPageIndex, isLoading, ...options }: DataTableOptions<TData>) => UseDataTableReturn<TData>;
+declare const useDataTable: <TData>({ rowCount, filters, commands, rowSelection, sorting, filtering, pagination, search, onRowClick, autoResetPageIndex, isLoading, columnVisibility, columnOrder, ...options }: DataTableOptions<TData>) => UseDataTableReturn<TData>;
 export { useDataTable };
 export type { DataTableOptions, UseDataTableReturn };
 //# sourceMappingURL=use-data-table.d.ts.map

package/dist/cjs/blocks/data-table/use-data-table.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-data-table.d.ts","sourceRoot":"","sources":["../../../../src/blocks/data-table/use-data-table.tsx"],"names":[],"mappings":"AAAA,OAAO,~~EAQL~~,KAAK,YAAY,EAEjB,aAAa,~~EACd~~,MAAM,uBAAuB,CAAA;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,gBAAgB,EAChB,+BAA+B,EAC/B,mBAAmB,EACnB,eAAe,EACf,uBAAuB,EACvB,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,0BAA0B,EAC1B,qBAAqB,EACtB,MAAM,SAAS,CAAA;AAEhB,UAAU,gBAAgB,CAAC,KAAK,CAC9B,SAAQ,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IACtD;;OAEG;IACH,OAAO,EAAE,kBAAkB,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,CAAA;IACzC;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,EAAE,CAAA;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC7B;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE;QACV,KAAK,EAAE,uBAAuB,CAAA;QAC9B,iBAAiB,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAA;KAC5D,CAAA;IACD;;OAEG;IACH,YAAY,CAAC,EAAE;QACb,KAAK,EAAE,0BAA0B,CAAA;QACjC,oBAAoB,EAAE,CAAC,KAAK,EAAE,0BAA0B,KAAK,IAAI,CAAA;QACjE,kBAAkB,CAAC,EACf,OAAO,GACP,CAAC,CAAC,GAAG,EAAE,YAAY,CAAC,KAAK,CAAC,KAAK,OAAO,CAAC,GACvC,SAAS,CAAA;KACd,CAAA;IACD;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,qBAAqB,GAAG,IAAI,CAAA;QACnC,eAAe,EAAE,CAAC,KAAK,EAAE,qBAAqB,KAAK,IAAI,CAAA;KACxD,CAAA;IACD;;OAEG;IACH,MAAM,CAAC,EAAE;QACP,KAAK,EAAE,MAAM,CAAA;QACb,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;QACvC;;;WAGG;QACH,QAAQ,CAAC,EAAE,MAAM,CAAA;KAClB,CAAA;IACD;;OAEG;IACH,UAAU,CAAC,EAAE;QACX,KAAK,EAAE,wBAAwB,CAAA;QAC/B,kBAAkB,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,IAAI,CAAA;KAC9D,CAAA;IACD;;OAEG;IACH,UAAU,CAAC,EAAE,CACX,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,EAAE,UAAU,CAAC,EACxD,GAAG,EAAE,KAAK,KACP,IAAI,CAAA;IACT;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAA;~~CAC7B~~;AAED,UAAU,kBAAkB,CAAC,KAAK,CAChC,SAAQ,IAAI,CACV,UAAU,CAAC,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC,EACrC,iBAAiB,GACjB,aAAa,GACb,gBAAgB,GAChB,oBAAoB,GACpB,UAAU,GACV,cAAc,GACd,cAAc,GACd,eAAe,~~CAClB~~;IACD,UAAU,EAAE,MAAM,qBAAqB,GAAG,IAAI,CAAA;IAC9C,UAAU,EAAE,CACV,gBAAgB,EACZ,qBAAqB,GACrB,CAAC,CAAC,IAAI,EAAE,qBAAqB,GAAG,IAAI,KAAK,qBAAqB,CAAC,KAChE,IAAI,CAAA;IACT,UAAU,EAAE,MAAM,eAAe,EAAE,CAAA;IACnC,gBAAgB,EAAE,CAChB,CAAC,SAAS,MAAM,GAAG,MAAM,EAAE,GAAG,+BAA+B,EAE7D,EAAE,EAAE,MAAM,KACP,qBAAqB,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAA;IACtC,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,eAAe,GAAG,IAAI,CAAA;IACrD,YAAY,EAAE,MAAM,uBAAuB,CAAA;IAC3C,SAAS,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAA;IAClD,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,YAAY,EAAE,CAAC,MAAM,EAAE,qBAAqB,KAAK,IAAI,CAAA;IACrD,SAAS,EAAE,MAAM,MAAM,CAAA;IACvB,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,WAAW,EAAE,MAAM,gBAAgB,EAAE,CAAA;IACrC,eAAe,EAAE,MAAM,0BAA0B,CAAA;IACjD,UAAU,CAAC,EAAE,CACX,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,mBAAmB,EAAE,UAAU,CAAC,EACxD,GAAG,EAAE,KAAK,KACP,IAAI,CAAA;IACT,UAAU,EAAE,mBAAmB,CAAA;IAC/B,SAAS,EAAE,OAAO,CAAA;IAClB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,gBAAgB,EAAE,OAAO,CAAA;IACzB,eAAe,EAAE,OAAO,CAAA;IACxB,aAAa,EAAE,OAAO,CAAA;IACtB,YAAY,EAAE,OAAO,CAAA;~~CACtB~~;AAED,QAAA,MAAM,YAAY,~~wJAaf~~,iBAAiB,KAAK,CAAC,KAAG,mBAAmB,KAAK,~~CA0SpD~~,CAAA;AAoED,OAAO,EAAE,YAAY,EAAE,CAAA;AACvB,YAAY,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,CAAA"}
1	+ {"version":3,"file":"use-data-table.d.ts","sourceRoot":"","sources":["../../../../src/blocks/data-table/use-data-table.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/blocks/data-table/use-data-table.js CHANGED Viewed

@@ -5,12 +5,15 @@ const tslib_1 = require("tslib");
 const react_table_1 = require("@tanstack/react-table");
 const React = tslib_1.__importStar(require("react"));
 const types_1 = require("./types");
-const useDataTable = ({ rowCount = 0, filters, commands, rowSelection, sorting, filtering, pagination, search, onRowClick, autoResetPageIndex = true, isLoading = false, ...options }) => {
+const useDataTable = ({ rowCount = 0, filters, commands, rowSelection, sorting, filtering, pagination, search, onRowClick, autoResetPageIndex = true, isLoading = false, columnVisibility, columnOrder, ...options }) => {
     var _a, _b, _c, _d, _e, _f;
     const { state: sortingState, onSortingChange } = sorting !== null && sorting !== void 0 ? sorting : {};
     const { state: filteringState, onFilteringChange } = filtering !== null && filtering !== void 0 ? filtering : {};
     const { state: paginationState, onPaginationChange } = pagination !== null && pagination !== void 0 ? pagination : {};
     const { state: rowSelectionState, onRowSelectionChange, enableRowSelection, } = rowSelection !== null && rowSelection !== void 0 ? rowSelection : {};
+    const { state: columnVisibilityState, onColumnVisibilityChange } = columnVisibility !== null && columnVisibility !== void 0 ? columnVisibility : {};
+    const { state: columnOrderState, onColumnOrderChange } = columnOrder !== null && columnOrder !== void 0 ? columnOrder : {};
+    // Store filter metadata like openOnMount
     const autoResetPageIndexHandler = React.useCallback(() => {
         return autoResetPageIndex
             ? () => paginationState &&
@@ -47,6 +50,26 @@ const useDataTable = ({ rowCount = 0, filters, commands, rowSelection, sorting,
             ? onPaginationChangeTransformer(onPaginationChange, paginationState)
             : undefined;
     }, [onPaginationChange, paginationState]);
+    const columnVisibilityStateHandler = React.useCallback(() => {
+        return onColumnVisibilityChange
+            ? (updaterOrValue) => {
+                const value = typeof updaterOrValue === "function"
+                    ? updaterOrValue(columnVisibilityState !== null && columnVisibilityState !== void 0 ? columnVisibilityState : {})
+                    : updaterOrValue;
+                onColumnVisibilityChange(value);
+            }
+            : undefined;
+    }, [onColumnVisibilityChange, columnVisibilityState]);
+    const columnOrderStateHandler = React.useCallback(() => {
+        return onColumnOrderChange
+            ? (updaterOrValue) => {
+                const value = typeof updaterOrValue === "function"
+                    ? updaterOrValue(columnOrderState !== null && columnOrderState !== void 0 ? columnOrderState : [])
+                    : updaterOrValue;
+                onColumnOrderChange(value);
+            }
+            : undefined;
+    }, [onColumnOrderChange, columnOrderState]);
     const instance = (0, react_table_1.useReactTable)({
         ...options,
         getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
@@ -58,6 +81,8 @@ const useDataTable = ({ rowCount = 0, filters, commands, rowSelection, sorting,
                 value: filter,
             })),
             pagination: paginationState,
+            columnVisibility: columnVisibilityState !== null && columnVisibilityState !== void 0 ? columnVisibilityState : {},
+            columnOrder: columnOrderState !== null && columnOrderState !== void 0 ? columnOrderState : [],
         },
         enableRowSelection,
         rowCount,
@@ -65,6 +90,8 @@ const useDataTable = ({ rowCount = 0, filters, commands, rowSelection, sorting,
         onRowSelectionChange: rowSelectionStateHandler(),
         onSortingChange: sortingStateHandler(),
         onPaginationChange: paginationStateHandler(),
+        onColumnVisibilityChange: columnVisibilityStateHandler(),
+        onColumnOrderChange: columnOrderStateHandler(),
         manualSorting: true,
         manualPagination: true,
         manualFiltering: true,
@@ -90,7 +117,7 @@ const useDataTable = ({ rowCount = 0, filters, commands, rowSelection, sorting,
         if (!filter) {
             return null;
         }
-        return filter.options;
+        return filter.options || null;
     }, [getFilters]);
     const getFilterMeta = React.useCallback((id) => {
         return getFilters().find((filter) => filter.id === id) || null;
@@ -102,10 +129,10 @@ const useDataTable = ({ rowCount = 0, filters, commands, rowSelection, sorting,
     }, [instance]);
     const addFilter = React.useCallback((filter) => {
         var _a;
-        if (filter.value) {
-            (_a = autoResetPageIndexHandler()) === null || _a === void 0 ? void 0 : _a();
-        }
-        onFilteringChange === null || onFilteringChange === void 0 ? void 0 : onFilteringChange({ ...getFiltering(), [filter.id]: filter.value });
+        const currentFilters = getFiltering();
+        const newFilters = { ...currentFilters, [filter.id]: filter.value };
+        (_a = autoResetPageIndexHandler()) === null || _a === void 0 ? void 0 : _a();
+        onFilteringChange === null || onFilteringChange === void 0 ? void 0 : onFilteringChange(newFilters);
     }, [onFilteringChange, getFiltering, autoResetPageIndexHandler]);
     const removeFilter = React.useCallback((id) => {
         var _a;
@@ -189,11 +216,18 @@ const useDataTable = ({ rowCount = 0, filters, commands, rowSelection, sorting,
     const enableFiltering = !!filtering;
     const enableSorting = !!sorting;
     const enableSearch = !!search;
+    const enableColumnVisibility = !!columnVisibility;
+    const enableColumnOrder = !!columnOrder;
+    const setColumnOrderFromArray = React.useCallback((order) => {
+        instance.setColumnOrder(order);
+    }, [instance]);
     return {
         // Table
         getHeaderGroups: instance.getHeaderGroups,
         getRowModel: instance.getRowModel,
         getAllColumns: instance.getAllColumns,
+        setColumnVisibility: instance.setColumnVisibility,
+        setColumnOrder: instance.setColumnOrder,
         // Pagination
         enablePagination,
         getCanNextPage: instance.getCanNextPage,
@@ -232,6 +266,12 @@ const useDataTable = ({ rowCount = 0, filters, commands, rowSelection, sorting,
         // Loading
         isLoading,
         showSkeleton,
+        // Column Visibility
+        enableColumnVisibility,
+        // Column Order
+        enableColumnOrder,
+        columnOrder: instance.getState().columnOrder,
+        setColumnOrderFromArray,
     };
 };
 exports.useDataTable = useDataTable;
@@ -260,7 +300,7 @@ function onFilteringChangeTransformer(onFilteringChange, state) {
                 value: filter,
             })))
             : updaterOrValue;
-        const transformedValue = Object.fromEntries(value.map((filter) => [filter.id, filter]));
+        const transformedValue = Object.fromEntries(value.map((filter) => [filter.id, filter.value]));
         onFilteringChange(transformedValue);
     };
 }

package/dist/cjs/blocks/data-table/use-data-table.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-data-table.js","sourceRoot":"","sources":["../../../../src/blocks/data-table/use-data-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ColumnFilter,\n ColumnFiltersState,\n type ColumnSort,\n getCoreRowModel,\n PaginationState,\n type RowSelectionState,\n type SortingState,\n type TableOptions,\n type Updater,\n useReactTable,\n} from \"@tanstack/react-table\"\nimport * as React from \"react\"\nimport {\n DataTableColumnDef,\n DataTableColumnFilter,\n DataTableCommand,\n DataTableDateComparisonOperator,\n DataTableEmptyState,\n DataTableFilter,\n DataTableFilteringState,\n DataTableFilterOption,\n DataTablePaginationState,\n DataTableRow,\n DataTableRowSelectionState,\n DataTableSortingState,\n} from \"./types\"\n\ninterface DataTableOptions<TData>\n extends Pick<TableOptions<TData>, \"data\" \| \"getRowId\"> {\n /*\n The columns to use for the table.\n /\n columns: DataTableColumnDef<TData, any>[]\n /\n The filters which the user can apply to the table.\n /\n filters?: DataTableFilter[]\n /\n The commands which the user can apply to selected rows.\n /\n commands?: DataTableCommand[]\n /\n Whether the data for the table is currently being loaded.\n /\n isLoading?: boolean\n /\n The state and callback for the filtering.\n /\n filtering?: {\n state: DataTableFilteringState\n onFilteringChange: (state: DataTableFilteringState) => void\n }\n /\n The state and callback for the row selection.\n /\n rowSelection?: {\n state: DataTableRowSelectionState\n onRowSelectionChange: (state: DataTableRowSelectionState) => void\n enableRowSelection?:\n \| boolean\n \| ((row: DataTableRow<TData>) => boolean)\n \| undefined\n }\n /\n The state and callback for the sorting.\n /\n sorting?: {\n state: DataTableSortingState \| null\n onSortingChange: (state: DataTableSortingState) => void\n }\n /\n The state and callback for the search, with optional debounce.\n /\n search?: {\n state: string\n onSearchChange: (state: string) => void\n /\n Debounce time in milliseconds for the search callback.\n * @default 300\n /\n debounce?: number\n }\n /\n The state and callback for the pagination.\n /\n pagination?: {\n state: DataTablePaginationState\n onPaginationChange: (state: DataTablePaginationState) => void\n }\n /\n The function to execute when a row is clicked.\n /\n onRowClick?: (\n event: React.MouseEvent<HTMLTableRowElement, MouseEvent>,\n row: TData\n ) => void\n /\n The total count of rows. When working with pagination, this will be the total\n * number of rows available, not the number of rows currently being displayed.\n /\n rowCount?: number\n /\n Whether the page index should be reset the filtering, sorting, or pagination changes.\n \n @default true\n */\n autoResetPageIndex?: boolean\n}\n\ninterface UseDataTableReturn<TData>\n extends Pick<\n ReturnType<typeof useReactTable<TData>>,\n \| \"getHeaderGroups\"\n \| \"getRowModel\"\n \| \"getCanNextPage\"\n \| \"getCanPreviousPage\"\n \| \"nextPage\"\n \| \"previousPage\"\n \| \"getPageCount\"\n \| \"getAllColumns\"\n > {\n getSorting: () => DataTableSortingState \| null\n setSorting: (\n sortingOrUpdater:\n \| DataTableSortingState\n \| ((prev: DataTableSortingState \| null) => DataTableSortingState)\n ) => void\n getFilters: () => DataTableFilter[]\n getFilterOptions: <\n T extends string \| string[] \| DataTableDateComparisonOperator\n >(\n id: string\n ) => DataTableFilterOption<T>[] \| null\n getFilterMeta: (id: string) => DataTableFilter \| null\n getFiltering: () => DataTableFilteringState\n addFilter: (filter: DataTableColumnFilter) => void\n removeFilter: (id: string) => void\n clearFilters: () => void\n updateFilter: (filter: DataTableColumnFilter) => void\n getSearch: () => string\n onSearchChange: (search: string) => void\n getCommands: () => DataTableCommand[]\n getRowSelection: () => DataTableRowSelectionState\n onRowClick?: (\n event: React.MouseEvent<HTMLTableRowElement, MouseEvent>,\n row: TData\n ) => void\n emptyState: DataTableEmptyState\n isLoading: boolean\n showSkeleton: boolean\n pageIndex: number\n pageSize: number\n rowCount: number\n enablePagination: boolean\n enableFiltering: boolean\n enableSorting: boolean\n enableSearch: boolean\n}\n\nconst useDataTable = <TData,>({\n rowCount = 0,\n filters,\n commands,\n rowSelection,\n sorting,\n filtering,\n pagination,\n search,\n onRowClick,\n autoResetPageIndex = true,\n isLoading = false,\n ...options\n}: DataTableOptions<TData>): UseDataTableReturn<TData> => {\n const { state: sortingState, onSortingChange } = sorting ?? {}\n const { state: filteringState, onFilteringChange } = filtering ?? {}\n const { state: paginationState, onPaginationChange } = pagination ?? {}\n const {\n state: rowSelectionState,\n onRowSelectionChange,\n enableRowSelection,\n } = rowSelection ?? {}\n\n const autoResetPageIndexHandler = React.useCallback(() => {\n return autoResetPageIndex\n ? () =>\n paginationState &&\n onPaginationChange?.({ ...paginationState, pageIndex: 0 })\n : undefined\n }, [autoResetPageIndex, paginationState, onPaginationChange])\n\n const sortingStateHandler = React.useCallback(() => {\n return onSortingChange\n ? (updaterOrValue: Updater<SortingState>) => {\n autoResetPageIndexHandler()?.()\n onSortingChangeTransformer(\n onSortingChange,\n sortingState\n )(updaterOrValue)\n }\n : undefined\n }, [onSortingChange, sortingState, autoResetPageIndexHandler])\n\n const rowSelectionStateHandler = React.useCallback(() => {\n return onRowSelectionChange\n ? (updaterOrValue: Updater<RowSelectionState>) => {\n onRowSelectionChangeTransformer(\n onRowSelectionChange,\n rowSelectionState\n )(updaterOrValue)\n }\n : undefined\n }, [onRowSelectionChange, rowSelectionState, autoResetPageIndexHandler])\n\n const filteringStateHandler = React.useCallback(() => {\n return onFilteringChange\n ? (updaterOrValue: Updater<ColumnFiltersState>) => {\n autoResetPageIndexHandler()?.()\n onFilteringChangeTransformer(\n onFilteringChange,\n filteringState\n )(updaterOrValue)\n }\n : undefined\n }, [onFilteringChange, filteringState, autoResetPageIndexHandler])\n\n const paginationStateHandler = React.useCallback(() => {\n return onPaginationChange\n ? onPaginationChangeTransformer(onPaginationChange, paginationState)\n : undefined\n }, [onPaginationChange, paginationState])\n\n const instance = useReactTable({\n ...options,\n getCoreRowModel: getCoreRowModel(),\n state: {\n rowSelection: rowSelectionState ?? {},\n sorting: sortingState ? [sortingState] : undefined,\n columnFilters: Object.entries(filteringState ?? {}).map(\n ([id, filter]) => ({\n id,\n value: filter,\n })\n ),\n pagination: paginationState,\n },\n enableRowSelection,\n rowCount,\n onColumnFiltersChange: filteringStateHandler(),\n onRowSelectionChange: rowSelectionStateHandler(),\n onSortingChange: sortingStateHandler(),\n onPaginationChange: paginationStateHandler(),\n manualSorting: true,\n manualPagination: true,\n manualFiltering: true,\n })\n\n const getSorting = React.useCallback(() => {\n return instance.getState().sorting?.[0] ?? null\n }, [instance])\n\n const setSorting = React.useCallback(\n (\n sortingOrUpdater: ColumnSort \| ((prev: ColumnSort \| null) => ColumnSort)\n ) => {\n const currentSort = instance.getState().sorting?.[0] ?? null\n const newSorting =\n typeof sortingOrUpdater === \"function\"\n ? sortingOrUpdater(currentSort)\n : sortingOrUpdater\n\n autoResetPageIndexHandler()?.()\n instance.setSorting([newSorting])\n },\n [instance, autoResetPageIndexHandler]\n )\n\n const getFilters = React.useCallback(() => {\n return filters ?? []\n }, [filters])\n\n const getFilterOptions = React.useCallback(\n <T extends string \| string[] \| DataTableDateComparisonOperator>(\n id: string\n ) => {\n const filter = getFilters().find((filter) => filter.id === id)\n\n if (!filter) {\n return null\n }\n\n return filter.options as DataTableFilterOption<T>[]\n },\n [getFilters]\n )\n\n const getFilterMeta = React.useCallback(\n (id: string) => {\n return getFilters().find((filter) => filter.id === id) \|\| null\n },\n [getFilters]\n )\n\n const getFiltering = React.useCallback(() => {\n const state = instance.getState().columnFilters ?? []\n return Object.fromEntries(state.map((filter) => [filter.id, filter.value]))\n }, [instance])\n\n const addFilter = React.useCallback(\n (filter: ColumnFilter) => {\n if (filter.value) {\n autoResetPageIndexHandler()?.()\n }\n onFilteringChange?.({ ...getFiltering(), [filter.id]: filter.value })\n },\n [onFilteringChange, getFiltering, autoResetPageIndexHandler]\n )\n\n const removeFilter = React.useCallback(\n (id: string) => {\n const currentFilters = getFiltering()\n delete currentFilters[id]\n autoResetPageIndexHandler()?.()\n onFilteringChange?.(currentFilters)\n },\n [onFilteringChange, getFiltering, autoResetPageIndexHandler]\n )\n\n const clearFilters = React.useCallback(() => {\n autoResetPageIndexHandler()?.()\n onFilteringChange?.({})\n }, [onFilteringChange, autoResetPageIndexHandler])\n\n const updateFilter = React.useCallback(\n (filter: ColumnFilter) => {\n addFilter(filter)\n },\n [addFilter]\n )\n\n const { state: searchState, onSearchChange, debounce = 300 } = search ?? {}\n\n const [localSearch, setLocalSearch] = React.useState(searchState ?? \"\")\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n React.useEffect(() => {\n setLocalSearch(searchState ?? \"\")\n }, [searchState])\n\n const getSearch = React.useCallback(() => {\n return localSearch\n }, [localSearch])\n\n const debouncedSearchChange = React.useMemo(() => {\n if (!onSearchChange) {\n return undefined\n }\n\n return (value: string) => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n\n if (debounce <= 0) {\n autoResetPageIndexHandler()?.()\n onSearchChange(value)\n return\n }\n\n timeoutRef.current = setTimeout(() => {\n autoResetPageIndexHandler()?.()\n onSearchChange(value)\n }, debounce)\n }\n }, [onSearchChange, debounce, autoResetPageIndexHandler])\n\n React.useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n }\n }, [])\n\n const onSearchChangeHandler = React.useCallback(\n (search: string) => {\n setLocalSearch(search)\n debouncedSearchChange?.(search)\n },\n [debouncedSearchChange]\n )\n\n const getCommands = React.useCallback(() => {\n return commands ?? []\n }, [commands])\n\n const getRowSelection = React.useCallback(() => {\n return instance.getState().rowSelection\n }, [instance])\n\n const rows = instance.getRowModel().rows\n\n const emptyState = React.useMemo(() => {\n const hasRows = rows.length > 0\n const hasSearch = Boolean(searchState)\n const hasFilters = Object.keys(filteringState ?? {}).length > 0\n\n if (hasRows) {\n return DataTableEmptyState.POPULATED\n }\n\n if (hasSearch \|\| hasFilters) {\n return DataTableEmptyState.FILTERED_EMPTY\n }\n\n return DataTableEmptyState.EMPTY\n }, [rows, searchState, filteringState])\n\n const showSkeleton = React.useMemo(() => {\n return isLoading === true && rows.length === 0\n }, [isLoading, rows])\n\n const enablePagination: boolean = !!pagination\n const enableFiltering: boolean = !!filtering\n const enableSorting: boolean = !!sorting\n const enableSearch: boolean = !!search\n\n return {\n // Table\n getHeaderGroups: instance.getHeaderGroups,\n getRowModel: instance.getRowModel,\n getAllColumns: instance.getAllColumns,\n // Pagination\n enablePagination,\n getCanNextPage: instance.getCanNextPage,\n getCanPreviousPage: instance.getCanPreviousPage,\n nextPage: instance.nextPage,\n previousPage: instance.previousPage,\n getPageCount: instance.getPageCount,\n pageIndex: instance.getState()?.pagination?.pageIndex ?? 0,\n pageSize: instance.getState()?.pagination?.pageSize ?? 10,\n rowCount,\n // Search\n enableSearch,\n getSearch,\n onSearchChange: onSearchChangeHandler,\n // Sorting\n enableSorting,\n getSorting,\n setSorting,\n // Filtering\n enableFiltering,\n getFilters,\n getFilterOptions,\n getFilterMeta,\n getFiltering,\n addFilter,\n removeFilter,\n clearFilters,\n updateFilter,\n // Commands\n getCommands,\n getRowSelection,\n // Handlers\n onRowClick,\n // Empty State\n emptyState,\n // Loading\n isLoading,\n showSkeleton,\n }\n}\n\nfunction onSortingChangeTransformer(\n onSortingChange: (state: ColumnSort) => void,\n state?: ColumnSort \| null\n) {\n return (updaterOrValue: Updater<SortingState>) => {\n const value =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(state ? [state] : [])\n : updaterOrValue\n const columnSort = value[0]\n\n onSortingChange(columnSort)\n }\n}\n\nfunction onRowSelectionChangeTransformer(\n onRowSelectionChange: (state: RowSelectionState) => void,\n state?: RowSelectionState\n) {\n return (updaterOrValue: Updater<RowSelectionState>) => {\n const value =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(state ?? {})\n : updaterOrValue\n\n onRowSelectionChange(value)\n }\n}\n\nfunction onFilteringChangeTransformer(\n onFilteringChange: (state: DataTableFilteringState) => void,\n state?: DataTableFilteringState\n) {\n return (updaterOrValue: Updater<ColumnFiltersState>) => {\n const value =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(\n Object.entries(state ?? {}).map(([id, filter]) => ({\n id,\n value: filter,\n }))\n )\n : updaterOrValue\n\n const transformedValue = Object.fromEntries(\n value.map((filter) => [filter.id, filter])\n )\n\n onFilteringChange(transformedValue)\n }\n}\n\nfunction onPaginationChangeTransformer(\n onPaginationChange: (state: PaginationState) => void,\n state?: PaginationState\n) {\n return (updaterOrValue: Updater<PaginationState>) => {\n const value =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(state ?? { pageIndex: 0, pageSize: 10 })\n : updaterOrValue\n\n onPaginationChange(value)\n }\n}\n\nexport { useDataTable }\nexport type { DataTableOptions, UseDataTableReturn }\n"]}
1	+ {"version":3,"file":"use-data-table.js","sourceRoot":"","sources":["../../../../src/blocks/data-table/use-data-table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ColumnFilter,\n ColumnFiltersState,\n type ColumnSort,\n type ColumnOrderState,\n getCoreRowModel,\n PaginationState,\n type RowSelectionState,\n type SortingState,\n type TableOptions,\n type Updater,\n useReactTable,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport * as React from \"react\"\nimport {\n DataTableColumnDef,\n DataTableColumnFilter,\n DataTableCommand,\n DataTableDateComparisonOperator,\n DataTableEmptyState,\n DataTableFilter,\n DataTableFilteringState,\n DataTableFilterOption,\n DataTablePaginationState,\n DataTableRow,\n DataTableRowSelectionState,\n DataTableSortingState,\n} from \"./types\"\n\ninterface DataTableOptions<TData>\n extends Pick<TableOptions<TData>, \"data\" \| \"getRowId\"> {\n /*\n The columns to use for the table.\n /\n columns: DataTableColumnDef<TData, any>[]\n /\n The filters which the user can apply to the table.\n /\n filters?: DataTableFilter[]\n /\n The commands which the user can apply to selected rows.\n /\n commands?: DataTableCommand[]\n /\n Whether the data for the table is currently being loaded.\n /\n isLoading?: boolean\n /\n The state and callback for the filtering.\n /\n filtering?: {\n state: DataTableFilteringState\n onFilteringChange: (state: DataTableFilteringState) => void\n }\n /\n The state and callback for the row selection.\n /\n rowSelection?: {\n state: DataTableRowSelectionState\n onRowSelectionChange: (state: DataTableRowSelectionState) => void\n enableRowSelection?:\n \| boolean\n \| ((row: DataTableRow<TData>) => boolean)\n \| undefined\n }\n /\n The state and callback for the sorting.\n /\n sorting?: {\n state: DataTableSortingState \| null\n onSortingChange: (state: DataTableSortingState) => void\n }\n /\n The state and callback for the search, with optional debounce.\n /\n search?: {\n state: string\n onSearchChange: (state: string) => void\n /\n Debounce time in milliseconds for the search callback.\n * @default 300\n /\n debounce?: number\n }\n /\n The state and callback for the pagination.\n /\n pagination?: {\n state: DataTablePaginationState\n onPaginationChange: (state: DataTablePaginationState) => void\n }\n /\n The function to execute when a row is clicked.\n /\n onRowClick?: (\n event: React.MouseEvent<HTMLTableRowElement, MouseEvent>,\n row: TData\n ) => void\n /\n The total count of rows. When working with pagination, this will be the total\n * number of rows available, not the number of rows currently being displayed.\n /\n rowCount?: number\n /\n Whether the page index should be reset the filtering, sorting, or pagination changes.\n \n @default true\n /\n autoResetPageIndex?: boolean\n /\n The state and callback for the column visibility.\n /\n columnVisibility?: {\n state: VisibilityState\n onColumnVisibilityChange: (state: VisibilityState) => void\n }\n /\n The state and callback for the column order.\n */\n columnOrder?: {\n state: ColumnOrderState\n onColumnOrderChange: (state: ColumnOrderState) => void\n }\n}\n\ninterface UseDataTableReturn<TData>\n extends Pick<\n ReturnType<typeof useReactTable<TData>>,\n \| \"getHeaderGroups\"\n \| \"getRowModel\"\n \| \"getCanNextPage\"\n \| \"getCanPreviousPage\"\n \| \"nextPage\"\n \| \"previousPage\"\n \| \"getPageCount\"\n \| \"getAllColumns\"\n \| \"setColumnVisibility\"\n \| \"setColumnOrder\"\n > {\n getSorting: () => DataTableSortingState \| null\n setSorting: (\n sortingOrUpdater:\n \| DataTableSortingState\n \| ((prev: DataTableSortingState \| null) => DataTableSortingState)\n ) => void\n getFilters: () => DataTableFilter[]\n getFilterOptions: <\n T extends string \| string[] \| DataTableDateComparisonOperator\n >(\n id: string\n ) => DataTableFilterOption<T>[] \| null\n getFilterMeta: (id: string) => DataTableFilter \| null\n getFiltering: () => DataTableFilteringState\n addFilter: (filter: DataTableColumnFilter) => void\n removeFilter: (id: string) => void\n clearFilters: () => void\n updateFilter: (filter: DataTableColumnFilter) => void\n getSearch: () => string\n onSearchChange: (search: string) => void\n getCommands: () => DataTableCommand[]\n getRowSelection: () => DataTableRowSelectionState\n onRowClick?: (\n event: React.MouseEvent<HTMLTableRowElement, MouseEvent>,\n row: TData\n ) => void\n emptyState: DataTableEmptyState\n isLoading: boolean\n showSkeleton: boolean\n pageIndex: number\n pageSize: number\n rowCount: number\n enablePagination: boolean\n enableFiltering: boolean\n enableSorting: boolean\n enableSearch: boolean\n enableColumnVisibility: boolean\n enableColumnOrder: boolean\n columnOrder: ColumnOrderState\n setColumnOrderFromArray: (order: string[]) => void\n}\n\nconst useDataTable = <TData,>({\n rowCount = 0,\n filters,\n commands,\n rowSelection,\n sorting,\n filtering,\n pagination,\n search,\n onRowClick,\n autoResetPageIndex = true,\n isLoading = false,\n columnVisibility,\n columnOrder,\n ...options\n}: DataTableOptions<TData>): UseDataTableReturn<TData> => {\n const { state: sortingState, onSortingChange } = sorting ?? {}\n const { state: filteringState, onFilteringChange } = filtering ?? {}\n const { state: paginationState, onPaginationChange } = pagination ?? {}\n const {\n state: rowSelectionState,\n onRowSelectionChange,\n enableRowSelection,\n } = rowSelection ?? {}\n const { state: columnVisibilityState, onColumnVisibilityChange } = columnVisibility ?? {}\n const { state: columnOrderState, onColumnOrderChange } = columnOrder ?? {}\n \n // Store filter metadata like openOnMount\n\n const autoResetPageIndexHandler = React.useCallback(() => {\n return autoResetPageIndex\n ? () =>\n paginationState &&\n onPaginationChange?.({ ...paginationState, pageIndex: 0 })\n : undefined\n }, [autoResetPageIndex, paginationState, onPaginationChange])\n\n const sortingStateHandler = React.useCallback(() => {\n return onSortingChange\n ? (updaterOrValue: Updater<SortingState>) => {\n autoResetPageIndexHandler()?.()\n onSortingChangeTransformer(\n onSortingChange,\n sortingState\n )(updaterOrValue)\n }\n : undefined\n }, [onSortingChange, sortingState, autoResetPageIndexHandler])\n\n const rowSelectionStateHandler = React.useCallback(() => {\n return onRowSelectionChange\n ? (updaterOrValue: Updater<RowSelectionState>) => {\n onRowSelectionChangeTransformer(\n onRowSelectionChange,\n rowSelectionState\n )(updaterOrValue)\n }\n : undefined\n }, [onRowSelectionChange, rowSelectionState, autoResetPageIndexHandler])\n\n const filteringStateHandler = React.useCallback(() => {\n return onFilteringChange\n ? (updaterOrValue: Updater<ColumnFiltersState>) => {\n autoResetPageIndexHandler()?.()\n onFilteringChangeTransformer(\n onFilteringChange,\n filteringState\n )(updaterOrValue)\n }\n : undefined\n }, [onFilteringChange, filteringState, autoResetPageIndexHandler])\n\n const paginationStateHandler = React.useCallback(() => {\n return onPaginationChange\n ? onPaginationChangeTransformer(onPaginationChange, paginationState)\n : undefined\n }, [onPaginationChange, paginationState])\n\n const columnVisibilityStateHandler = React.useCallback(() => {\n return onColumnVisibilityChange\n ? (updaterOrValue: Updater<VisibilityState>) => {\n const value =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(columnVisibilityState ?? {})\n : updaterOrValue\n\n onColumnVisibilityChange(value)\n }\n : undefined\n }, [onColumnVisibilityChange, columnVisibilityState])\n\n const columnOrderStateHandler = React.useCallback(() => {\n return onColumnOrderChange\n ? (updaterOrValue: Updater<ColumnOrderState>) => {\n const value =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(columnOrderState ?? [])\n : updaterOrValue\n\n onColumnOrderChange(value)\n }\n : undefined\n }, [onColumnOrderChange, columnOrderState])\n\n const instance = useReactTable({\n ...options,\n getCoreRowModel: getCoreRowModel(),\n state: {\n rowSelection: rowSelectionState ?? {},\n sorting: sortingState ? [sortingState] : undefined,\n columnFilters: Object.entries(filteringState ?? {}).map(\n ([id, filter]) => ({\n id,\n value: filter,\n })\n ),\n pagination: paginationState,\n columnVisibility: columnVisibilityState ?? {},\n columnOrder: columnOrderState ?? [],\n },\n enableRowSelection,\n rowCount,\n onColumnFiltersChange: filteringStateHandler(),\n onRowSelectionChange: rowSelectionStateHandler(),\n onSortingChange: sortingStateHandler(),\n onPaginationChange: paginationStateHandler(),\n onColumnVisibilityChange: columnVisibilityStateHandler(),\n onColumnOrderChange: columnOrderStateHandler(),\n manualSorting: true,\n manualPagination: true,\n manualFiltering: true,\n })\n\n const getSorting = React.useCallback(() => {\n return instance.getState().sorting?.[0] ?? null\n }, [instance])\n\n const setSorting = React.useCallback(\n (\n sortingOrUpdater: ColumnSort \| ((prev: ColumnSort \| null) => ColumnSort)\n ) => {\n const currentSort = instance.getState().sorting?.[0] ?? null\n const newSorting =\n typeof sortingOrUpdater === \"function\"\n ? sortingOrUpdater(currentSort)\n : sortingOrUpdater\n\n autoResetPageIndexHandler()?.()\n instance.setSorting([newSorting])\n },\n [instance, autoResetPageIndexHandler]\n )\n\n const getFilters = React.useCallback(() => {\n return filters ?? []\n }, [filters])\n\n const getFilterOptions = React.useCallback(\n <T extends string \| string[] \| DataTableDateComparisonOperator>(\n id: string\n ) => {\n const filter = getFilters().find((filter) => filter.id === id)\n\n if (!filter) {\n return null\n }\n\n return ((filter as any).options as DataTableFilterOption<T>[]) \|\| null\n },\n [getFilters]\n )\n\n const getFilterMeta = React.useCallback(\n (id: string) => {\n return getFilters().find((filter) => filter.id === id) \|\| null\n },\n [getFilters]\n )\n\n const getFiltering = React.useCallback(() => {\n const state = instance.getState().columnFilters ?? []\n return Object.fromEntries(state.map((filter) => [filter.id, filter.value]))\n }, [instance])\n\n const addFilter = React.useCallback(\n (filter: DataTableColumnFilter) => {\n const currentFilters = getFiltering()\n const newFilters = { ...currentFilters, [filter.id]: filter.value }\n autoResetPageIndexHandler()?.()\n onFilteringChange?.(newFilters)\n },\n [onFilteringChange, getFiltering, autoResetPageIndexHandler]\n )\n\n const removeFilter = React.useCallback(\n (id: string) => {\n const currentFilters = getFiltering()\n delete currentFilters[id]\n autoResetPageIndexHandler()?.()\n onFilteringChange?.(currentFilters)\n },\n [onFilteringChange, getFiltering, autoResetPageIndexHandler]\n )\n\n const clearFilters = React.useCallback(() => {\n autoResetPageIndexHandler()?.()\n onFilteringChange?.({})\n }, [onFilteringChange, autoResetPageIndexHandler])\n\n const updateFilter = React.useCallback(\n (filter: ColumnFilter) => {\n addFilter(filter)\n },\n [addFilter]\n )\n\n const { state: searchState, onSearchChange, debounce = 300 } = search ?? {}\n\n const [localSearch, setLocalSearch] = React.useState(searchState ?? \"\")\n const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>()\n\n React.useEffect(() => {\n setLocalSearch(searchState ?? \"\")\n }, [searchState])\n\n const getSearch = React.useCallback(() => {\n return localSearch\n }, [localSearch])\n\n const debouncedSearchChange = React.useMemo(() => {\n if (!onSearchChange) {\n return undefined\n }\n\n return (value: string) => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n\n if (debounce <= 0) {\n autoResetPageIndexHandler()?.()\n onSearchChange(value)\n return\n }\n\n timeoutRef.current = setTimeout(() => {\n autoResetPageIndexHandler()?.()\n onSearchChange(value)\n }, debounce)\n }\n }, [onSearchChange, debounce, autoResetPageIndexHandler])\n\n React.useEffect(() => {\n return () => {\n if (timeoutRef.current) {\n clearTimeout(timeoutRef.current)\n }\n }\n }, [])\n\n const onSearchChangeHandler = React.useCallback(\n (search: string) => {\n setLocalSearch(search)\n debouncedSearchChange?.(search)\n },\n [debouncedSearchChange]\n )\n\n const getCommands = React.useCallback(() => {\n return commands ?? []\n }, [commands])\n\n const getRowSelection = React.useCallback(() => {\n return instance.getState().rowSelection\n }, [instance])\n\n const rows = instance.getRowModel().rows\n\n const emptyState = React.useMemo(() => {\n const hasRows = rows.length > 0\n const hasSearch = Boolean(searchState)\n const hasFilters = Object.keys(filteringState ?? {}).length > 0\n\n if (hasRows) {\n return DataTableEmptyState.POPULATED\n }\n\n if (hasSearch \|\| hasFilters) {\n return DataTableEmptyState.FILTERED_EMPTY\n }\n\n return DataTableEmptyState.EMPTY\n }, [rows, searchState, filteringState])\n\n const showSkeleton = React.useMemo(() => {\n return isLoading === true && rows.length === 0\n }, [isLoading, rows])\n\n const enablePagination: boolean = !!pagination\n const enableFiltering: boolean = !!filtering\n const enableSorting: boolean = !!sorting\n const enableSearch: boolean = !!search\n const enableColumnVisibility: boolean = !!columnVisibility\n const enableColumnOrder: boolean = !!columnOrder\n\n const setColumnOrderFromArray = React.useCallback((order: string[]) => {\n instance.setColumnOrder(order)\n }, [instance])\n\n return {\n // Table\n getHeaderGroups: instance.getHeaderGroups,\n getRowModel: instance.getRowModel,\n getAllColumns: instance.getAllColumns,\n setColumnVisibility: instance.setColumnVisibility,\n setColumnOrder: instance.setColumnOrder,\n // Pagination\n enablePagination,\n getCanNextPage: instance.getCanNextPage,\n getCanPreviousPage: instance.getCanPreviousPage,\n nextPage: instance.nextPage,\n previousPage: instance.previousPage,\n getPageCount: instance.getPageCount,\n pageIndex: instance.getState()?.pagination?.pageIndex ?? 0,\n pageSize: instance.getState()?.pagination?.pageSize ?? 10,\n rowCount,\n // Search\n enableSearch,\n getSearch,\n onSearchChange: onSearchChangeHandler,\n // Sorting\n enableSorting,\n getSorting,\n setSorting,\n // Filtering\n enableFiltering,\n getFilters,\n getFilterOptions,\n getFilterMeta,\n getFiltering,\n addFilter,\n removeFilter,\n clearFilters,\n updateFilter,\n // Commands\n getCommands,\n getRowSelection,\n // Handlers\n onRowClick,\n // Empty State\n emptyState,\n // Loading\n isLoading,\n showSkeleton,\n // Column Visibility\n enableColumnVisibility,\n // Column Order\n enableColumnOrder,\n columnOrder: instance.getState().columnOrder,\n setColumnOrderFromArray,\n }\n}\n\nfunction onSortingChangeTransformer(\n onSortingChange: (state: ColumnSort) => void,\n state?: ColumnSort \| null\n) {\n return (updaterOrValue: Updater<SortingState>) => {\n const value =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(state ? [state] : [])\n : updaterOrValue\n const columnSort = value[0]\n\n onSortingChange(columnSort)\n }\n}\n\nfunction onRowSelectionChangeTransformer(\n onRowSelectionChange: (state: RowSelectionState) => void,\n state?: RowSelectionState\n) {\n return (updaterOrValue: Updater<RowSelectionState>) => {\n const value =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(state ?? {})\n : updaterOrValue\n\n onRowSelectionChange(value)\n }\n}\n\nfunction onFilteringChangeTransformer(\n onFilteringChange: (state: DataTableFilteringState) => void,\n state?: DataTableFilteringState\n) {\n return (updaterOrValue: Updater<ColumnFiltersState>) => {\n const value =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(\n Object.entries(state ?? {}).map(([id, filter]) => ({\n id,\n value: filter,\n }))\n )\n : updaterOrValue\n\n const transformedValue = Object.fromEntries(\n value.map((filter) => [filter.id, filter.value])\n )\n\n onFilteringChange(transformedValue)\n }\n}\n\nfunction onPaginationChangeTransformer(\n onPaginationChange: (state: PaginationState) => void,\n state?: PaginationState\n) {\n return (updaterOrValue: Updater<PaginationState>) => {\n const value =\n typeof updaterOrValue === \"function\"\n ? updaterOrValue(state ?? { pageIndex: 0, pageSize: 10 })\n : updaterOrValue\n\n onPaginationChange(value)\n }\n}\n\nexport { useDataTable }\nexport type { DataTableOptions, UseDataTableReturn }\n"]}

package/dist/cjs/blocks/data-table/utils/create-data-table-column-helper.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-data-table-column-helper.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/utils/create-data-table-column-helper.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,qBAAqB,~~EAItB~~,MAAM,UAAU,CAAA;AAEjB,QAAA,MAAM,2BAA2B,eAE5B,sBAAsB,KAAK,~~CAgD~~/B,CAAA;AAQD,OAAO,EAAE,2BAA2B,EAAE,CAAA"}
1	+ {"version":3,"file":"create-data-table-column-helper.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/utils/create-data-table-column-helper.tsx"],"names":[],"mappings":"AASA,OAAO,EAEL,qBAAqB,EAMtB,MAAM,UAAU,CAAA;AAEjB,QAAA,MAAM,2BAA2B,eAE5B,sBAAsB,KAAK,CAkD/B,CAAA;AAQD,OAAO,EAAE,2BAA2B,EAAE,CAAA"}

package/dist/cjs/blocks/data-table/utils/create-data-table-column-helper.js CHANGED Viewed

@@ -11,9 +11,10 @@ const createDataTableColumnHelper = () => {
     const { accessor: accessorTanstack, display } = (0, react_table_1.createColumnHelper)();
     return {
         accessor: (accessor, column) => {
-            const { sortLabel, sortAscLabel, sortDescLabel, meta, enableSorting, ...rest } = column;
+            const { sortLabel, sortAscLabel, sortDescLabel, headerAlign, meta, enableSorting, ...rest } = column;
             const extendedMeta = {
                 ___sortMetaData: { sortLabel, sortAscLabel, sortDescLabel },
+                ___alignMetaData: { headerAlign },
                 ...(meta || {}),
             };
             return accessorTanstack(accessor, {

package/dist/cjs/blocks/data-table/utils/create-data-table-column-helper.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-data-table-column-helper.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/utils/create-data-table-column-helper.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,uDAAwF;AACxF,qDAA8B;AAC9B,iFAA0E;AAC1E,iFAG6C;~~AAS7C~~,MAAM,2BAA2B,GAAG,GAEF,EAAE;IAClC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAC3C,IAAA,gCAA0B,GAAS,CAAA;IAErC,OAAO;QACL,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE;YAC7B,MAAM,EACJ,SAAS,EACT,YAAY,EACZ,aAAa,EACb,IAAI,EACJ,aAAa,EACb,GAAG,IAAI,EACR,GAAG,~~MAA0C~~,CAAA;~~YAE9C~~,MAAM,YAAY,~~GAAmC~~;~~gBACnD~~,eAAe,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE;gBAC3D,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC;aAChB,CAAA;YAED,OAAO,gBAAgB,CAAC,QAAQ,EAAE;gBAChC,GAAG,IAAI;gBACP,aAAa,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,KAAK;gBACrC,IAAI,EAAE,YAAY;aACnB,CAAC,CAAA;QACJ,CAAC;QACD,OAAO;QACP,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAmC,EAAE,EAAE,CACjE,OAAO,CAAC;YACN,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,oBAAC,4CAAmB,IAAC,GAAG,EAAE,GAAG,GAAI;YAChD,IAAI,EAAE;gBACJ,UAAU,EAAE,OAAO;gBACnB,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;aACtB;YACD,GAAG,KAAK;SACT,CAAC;QACJ,MAAM,EAAE,CAAC,KAAuC,EAAE,EAAE,CAClD,OAAO,CAAC;YACN,EAAE,EAAE,QAAQ;YACZ,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM;gBACnB,CAAC,CAAC,KAAK,CAAC,MAAM;gBACd,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,oBAAC,8CAAqB,IAAC,GAAG,EAAE,GAAG,GAAI;YAChD,IAAI,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI;gBACf,CAAC,CAAC,KAAK,CAAC,IAAI;gBACZ,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,oBAAC,4CAAmB,IAAC,GAAG,EAAE,GAAG,GAAI;SAC/C,CAAC;KACL,CAAA;AACH,CAAC,CAAA;AAQQ,kEAA2B;AANpC,MAAM,MAAM,GAAG,IAAA,gCAA0B,GAAE,CAAA;AAE3C,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE;IACtB,IAAI,EAAE,EAAE;CACT,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { createColumnHelper as createColumnHelperTanstack } from \"@tanstack/react-table\"\nimport * as React from \"react\"\nimport { DataTableActionCell } from \"../components/data-table-action-cell\"\nimport {\n DataTableSelectCell,\n DataTableSelectHeader,\n} from \"../components/data-table-select-cell\"\nimport {\n DataTableActionColumnDef,\n DataTableColumnHelper,\n DataTableSelectColumnDef,\n DataTableSortableColumnDef,\n DataTableSortableColumnDefMeta,\n} from \"../types\"\n\nconst createDataTableColumnHelper = <\n TData,\n>(): DataTableColumnHelper<TData> => {\n const { accessor: accessorTanstack, display } =\n createColumnHelperTanstack<TData>()\n\n return {\n accessor: (accessor, column) => {\n const {\n sortLabel,\n sortAscLabel,\n sortDescLabel,\n meta,\n enableSorting,\n ...rest\n } = column as any & DataTableSortableColumnDef\n\n const extendedMeta: DataTableSortableColumnDefMeta = {\n ___sortMetaData: { sortLabel, sortAscLabel, sortDescLabel },\n ...(meta \|\| {}),\n }\n\n return accessorTanstack(accessor, {\n ...rest,\n enableSorting: enableSorting ?? false,\n meta: extendedMeta,\n })\n },\n display,\n action: ({ actions, ...props }: DataTableActionColumnDef<TData>) =>\n display({\n id: \"action\",\n cell: (ctx) => <DataTableActionCell ctx={ctx} />,\n meta: {\n ___actions: actions,\n ...(props.meta \|\| {}),\n },\n ...props,\n }),\n select: (props?: DataTableSelectColumnDef<TData>) =>\n display({\n id: \"select\",\n header: props?.header\n ? props.header\n : (ctx) => <DataTableSelectHeader ctx={ctx} />,\n cell: props?.cell\n ? props.cell\n : (ctx) => <DataTableSelectCell ctx={ctx} />,\n }),\n }\n}\n\nconst helper = createColumnHelperTanstack()\n\nhelper.accessor(\"name\", {\n meta: {},\n})\n\nexport { createDataTableColumnHelper }\n"]}
1	+ {"version":3,"file":"create-data-table-column-helper.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/utils/create-data-table-column-helper.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,uDAAwF;AACxF,qDAA8B;AAC9B,iFAA0E;AAC1E,iFAG6C;AAW7C,MAAM,2BAA2B,GAAG,GAEF,EAAE;IAClC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,OAAO,EAAE,GAC3C,IAAA,gCAA0B,GAAS,CAAA;IAErC,OAAO;QACL,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,EAAE;YAC7B,MAAM,EACJ,SAAS,EACT,YAAY,EACZ,aAAa,EACb,WAAW,EACX,IAAI,EACJ,aAAa,EACb,GAAG,IAAI,EACR,GAAG,MAAwE,CAAA;YAE5E,MAAM,YAAY,GAAqE;gBACrF,eAAe,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE;gBAC3D,gBAAgB,EAAE,EAAE,WAAW,EAAE;gBACjC,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC;aAChB,CAAA;YAED,OAAO,gBAAgB,CAAC,QAAQ,EAAE;gBAChC,GAAG,IAAI;gBACP,aAAa,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,KAAK;gBACrC,IAAI,EAAE,YAAY;aACnB,CAAC,CAAA;QACJ,CAAC;QACD,OAAO;QACP,MAAM,EAAE,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAmC,EAAE,EAAE,CACjE,OAAO,CAAC;YACN,EAAE,EAAE,QAAQ;YACZ,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,oBAAC,4CAAmB,IAAC,GAAG,EAAE,GAAG,GAAI;YAChD,IAAI,EAAE;gBACJ,UAAU,EAAE,OAAO;gBACnB,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE,CAAC;aACtB;YACD,GAAG,KAAK;SACT,CAAC;QACJ,MAAM,EAAE,CAAC,KAAuC,EAAE,EAAE,CAClD,OAAO,CAAC;YACN,EAAE,EAAE,QAAQ;YACZ,MAAM,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM;gBACnB,CAAC,CAAC,KAAK,CAAC,MAAM;gBACd,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,oBAAC,8CAAqB,IAAC,GAAG,EAAE,GAAG,GAAI;YAChD,IAAI,EAAE,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI;gBACf,CAAC,CAAC,KAAK,CAAC,IAAI;gBACZ,CAAC,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,oBAAC,4CAAmB,IAAC,GAAG,EAAE,GAAG,GAAI;SAC/C,CAAC;KACL,CAAA;AACH,CAAC,CAAA;AAQQ,kEAA2B;AANpC,MAAM,MAAM,GAAG,IAAA,gCAA0B,GAAE,CAAA;AAE3C,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE;IACtB,IAAI,EAAE,EAAE;CACT,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport { createColumnHelper as createColumnHelperTanstack } from \"@tanstack/react-table\"\nimport * as React from \"react\"\nimport { DataTableActionCell } from \"../components/data-table-action-cell\"\nimport {\n DataTableSelectCell,\n DataTableSelectHeader,\n} from \"../components/data-table-select-cell\"\nimport {\n DataTableActionColumnDef,\n DataTableColumnHelper,\n DataTableSelectColumnDef,\n DataTableSortableColumnDef,\n DataTableSortableColumnDefMeta,\n DataTableAlignableColumnDef,\n DataTableAlignableColumnDefMeta,\n} from \"../types\"\n\nconst createDataTableColumnHelper = <\n TData,\n>(): DataTableColumnHelper<TData> => {\n const { accessor: accessorTanstack, display } =\n createColumnHelperTanstack<TData>()\n\n return {\n accessor: (accessor, column) => {\n const {\n sortLabel,\n sortAscLabel,\n sortDescLabel,\n headerAlign,\n meta,\n enableSorting,\n ...rest\n } = column as any & DataTableSortableColumnDef & DataTableAlignableColumnDef\n\n const extendedMeta: DataTableSortableColumnDefMeta & DataTableAlignableColumnDefMeta = {\n ___sortMetaData: { sortLabel, sortAscLabel, sortDescLabel },\n ___alignMetaData: { headerAlign },\n ...(meta \|\| {}),\n }\n\n return accessorTanstack(accessor, {\n ...rest,\n enableSorting: enableSorting ?? false,\n meta: extendedMeta,\n })\n },\n display,\n action: ({ actions, ...props }: DataTableActionColumnDef<TData>) =>\n display({\n id: \"action\",\n cell: (ctx) => <DataTableActionCell ctx={ctx} />,\n meta: {\n ___actions: actions,\n ...(props.meta \|\| {}),\n },\n ...props,\n }),\n select: (props?: DataTableSelectColumnDef<TData>) =>\n display({\n id: \"select\",\n header: props?.header\n ? props.header\n : (ctx) => <DataTableSelectHeader ctx={ctx} />,\n cell: props?.cell\n ? props.cell\n : (ctx) => <DataTableSelectCell ctx={ctx} />,\n }),\n }\n}\n\nconst helper = createColumnHelperTanstack()\n\nhelper.accessor(\"name\", {\n meta: {},\n})\n\nexport { createDataTableColumnHelper }\n"]}

package/dist/cjs/blocks/data-table/utils/create-data-table-filter-helper.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { DeepKeys } from "@tanstack/react-table";
 import { DataTableFilter, DataTableFilterProps } from "../types";
 declare const createDataTableFilterHelper: <TData>() => {
@@ -22,6 +23,32 @@ declare const createDataTableFilterHelper: <TData>() => {
         options: import("../types").DataTableFilterOption<import("../types").DataTableDateComparisonOperator>[];
         label: string;
         id: DeepKeys<TData>;
+    } | {
+        type: "multiselect";
+        options: import("../types").DataTableFilterOption<string>[];
+        searchable?: boolean | undefined;
+        label: string;
+        id: DeepKeys<TData>;
+    } | {
+        type: "string";
+        placeholder?: string | undefined;
+        label: string;
+        id: DeepKeys<TData>;
+    } | {
+        type: "number";
+        placeholder?: string | undefined;
+        includeOperators?: boolean | undefined;
+        label: string;
+        id: DeepKeys<TData>;
+    } | {
+        type: "custom";
+        render: (props: {
+            value: any;
+            onChange: (value: any) => void;
+            onRemove: () => void;
+        }) => import("react").ReactNode;
+        label: string;
+        id: DeepKeys<TData>;
     };
     custom: <T extends DataTableFilterProps>(props: DataTableFilter<T>) => DataTableFilter<T>;
 };

package/dist/cjs/blocks/data-table/utils/create-data-table-filter-helper.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"create-data-table-filter-helper.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/utils/create-data-table-filter-helper.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAGhE,QAAA,MAAM,2BAA2B;yBACV,SAAS,KAAK,CAAC,SAAS,oBAAoB~~;;;;;;;;;;;;;;;;;;;;;;~~oDAIjB,gBAAgB,CAAC,CAAC;CAClE,CAAA;AAEF,OAAO,EAAE,2BAA2B,EAAE,CAAA"}
1	+ {"version":3,"file":"create-data-table-filter-helper.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/utils/create-data-table-filter-helper.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAGhE,QAAA,MAAM,2BAA2B;yBACV,SAAS,KAAK,CAAC,SAAS,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oDAIjB,gBAAgB,CAAC,CAAC;CAClE,CAAA;AAEF,OAAO,EAAE,2BAA2B,EAAE,CAAA"}

package/dist/esm/blocks/data-table/components/data-table-column-visibility-menu.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import React from "react";
+interface DataTableColumnVisibilityMenuProps {
+    className?: string;
+    tooltip?: string;
+}
+declare const DataTableColumnVisibilityMenu: ({ className, tooltip, }: DataTableColumnVisibilityMenuProps) => React.JSX.Element | null;
+export { DataTableColumnVisibilityMenu };
+export type { DataTableColumnVisibilityMenuProps };
+//# sourceMappingURL=data-table-column-visibility-menu.d.ts.map

package/dist/esm/blocks/data-table/components/data-table-column-visibility-menu.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"data-table-column-visibility-menu.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-column-visibility-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAYzB,UAAU,kCAAkC;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED,QAAA,MAAM,6BAA6B,4BAGhC,kCAAkC,6BA8EpC,CAAA;AAED,OAAO,EAAE,6BAA6B,EAAE,CAAA;AACxC,YAAY,EAAE,kCAAkC,EAAE,CAAA"}

package/dist/esm/blocks/data-table/components/data-table-column-visibility-menu.js ADDED Viewed

@@ -0,0 +1,54 @@
+import React from "react";
+import { Checkbox } from "../../../components/checkbox";
+import { DropdownMenu } from "../../../components/dropdown-menu";
+import { IconButton } from "../../../components/icon-button";
+import { Tooltip } from "../../../components/tooltip";
+import { Adjustments } from "@medusajs/icons";
+import { useDataTableContext } from "../context/use-data-table-context";
+const DataTableColumnVisibilityMenu = ({ className, tooltip, }) => {
+    const { instance, enableColumnVisibility } = useDataTableContext();
+    if (!enableColumnVisibility) {
+        return null;
+    }
+    const columns = instance
+        .getAllColumns()
+        .filter((column) => column.getCanHide());
+    const handleToggleColumn = (column) => {
+        column.toggleVisibility();
+    };
+    const handleToggleAll = (value) => {
+        instance.setColumnVisibility(Object.fromEntries(columns.map((column) => [column.id, value])));
+    };
+    const allColumnsVisible = columns.every((column) => column.getIsVisible());
+    const someColumnsVisible = columns.some((column) => column.getIsVisible());
+    const Wrapper = tooltip ? Tooltip : React.Fragment;
+    const wrapperProps = tooltip ? { content: tooltip } : {};
+    return (React.createElement(DropdownMenu, null,
+        React.createElement(Wrapper, { ...wrapperProps },
+            React.createElement(DropdownMenu.Trigger, { asChild: true },
+                React.createElement(IconButton, { size: "small", className: className },
+                    React.createElement(Adjustments, null)))),
+        React.createElement(DropdownMenu.Content, { align: "end", className: "min-w-[200px] max-h-[400px] overflow-hidden" },
+            React.createElement(DropdownMenu.Label, null, "Toggle columns"),
+            React.createElement(DropdownMenu.Separator, null),
+            React.createElement(DropdownMenu.Item, { onSelect: (e) => {
+                    e.preventDefault();
+                    handleToggleAll(!allColumnsVisible);
+                } },
+                React.createElement("div", { className: "flex items-center gap-x-2" },
+                    React.createElement(Checkbox, { checked: allColumnsVisible ? true : (someColumnsVisible && !allColumnsVisible) ? "indeterminate" : false }),
+                    React.createElement("span", null, "Toggle all"))),
+            React.createElement(DropdownMenu.Separator, null),
+            React.createElement("div", { className: "max-h-[250px] overflow-y-auto" }, columns.map((column) => {
+                var _a;
+                return (React.createElement(DropdownMenu.Item, { key: column.id, onSelect: (e) => {
+                        e.preventDefault();
+                        handleToggleColumn(column);
+                    } },
+                    React.createElement("div", { className: "flex items-center gap-x-2" },
+                        React.createElement(Checkbox, { checked: column.getIsVisible() }),
+                        React.createElement("span", { className: "truncate" }, ((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.name) || column.id))));
+            })))));
+};
+export { DataTableColumnVisibilityMenu };
+//# sourceMappingURL=data-table-column-visibility-menu.js.map

package/dist/esm/blocks/data-table/components/data-table-column-visibility-menu.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"data-table-column-visibility-menu.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-column-visibility-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAA;AACzD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AACrD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAG7C,OAAO,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAA;AAOvE,MAAM,6BAA6B,GAAG,CAAC,EACrC,SAAS,EACT,OAAO,GAC4B,EAAE,EAAE;IACvC,MAAM,EAAE,QAAQ,EAAE,sBAAsB,EAAE,GAAG,mBAAmB,EAAE,CAAA;IAElE,IAAI,CAAC,sBAAsB,EAAE,CAAC;QAC5B,OAAO,IAAI,CAAA;IACb,CAAC;IAED,MAAM,OAAO,GAAG,QAAQ;SACrB,aAAa,EAAE;SACf,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,CAAC,CAAA;IAE1C,MAAM,kBAAkB,GAAG,CAAC,MAAwB,EAAE,EAAE;QACtD,MAAM,CAAC,gBAAgB,EAAE,CAAA;IAC3B,CAAC,CAAA;IAED,MAAM,eAAe,GAAG,CAAC,KAAc,EAAE,EAAE;QACzC,QAAQ,CAAC,mBAAmB,CAC1B,MAAM,CAAC,WAAW,CAChB,OAAO,CAAC,GAAG,CAAC,CAAC,MAAwB,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAC9D,CACF,CAAA;IACH,CAAC,CAAA;IAED,MAAM,iBAAiB,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,MAAwB,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,CAAA;IAC5F,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,MAAwB,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,CAAA;IAE5F,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAA;IAClD,MAAM,YAAY,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC,CAAE,EAAU,CAAA;IAEjE,OAAO,CACL,oBAAC,YAAY;QACX,oBAAC,OAAO,OAAK,YAAY;YACvB,oBAAC,YAAY,CAAC,OAAO,IAAC,OAAO;gBAC3B,oBAAC,UAAU,IAAC,IAAI,EAAC,OAAO,EAAC,SAAS,EAAE,SAAS;oBAC3C,oBAAC,WAAW,OAAG,CACJ,CACQ,CACf;QACV,oBAAC,YAAY,CAAC,OAAO,IAAC,KAAK,EAAC,KAAK,EAAC,SAAS,EAAC,6CAA6C;YACvF,oBAAC,YAAY,CAAC,KAAK,yBAAoC;YACvD,oBAAC,YAAY,CAAC,SAAS,OAAG;YAC1B,oBAAC,YAAY,CAAC,IAAI,IAChB,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;oBACrB,CAAC,CAAC,cAAc,EAAE,CAAA;oBAClB,eAAe,CAAC,CAAC,iBAAiB,CAAC,CAAA;gBACrC,CAAC;gBAED,6BAAK,SAAS,EAAC,2BAA2B;oBACxC,oBAAC,QAAQ,IACP,OAAO,EAAE,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,GACxG;oBACF,+CAAuB,CACnB,CACY;YACpB,oBAAC,YAAY,CAAC,SAAS,OAAG;YAC1B,6BAAK,SAAS,EAAC,+BAA+B,IAC3C,OAAO,CAAC,GAAG,CAAC,CAAC,MAAwB,EAAE,EAAE;;gBACxC,OAAO,CACL,oBAAC,YAAY,CAAC,IAAI,IAChB,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;wBACrB,CAAC,CAAC,cAAc,EAAE,CAAA;wBAClB,kBAAkB,CAAC,MAAM,CAAC,CAAA;oBAC5B,CAAC;oBAED,6BAAK,SAAS,EAAC,2BAA2B;wBACxC,oBAAC,QAAQ,IAAC,OAAO,EAAE,MAAM,CAAC,YAAY,EAAE,GAAI;wBAC5C,8BAAM,SAAS,EAAC,UAAU,IACvB,CAAA,MAAC,MAAM,CAAC,SAAS,CAAC,IAAY,0CAAE,IAAI,KAAI,MAAM,CAAC,EAAE,CAC7C,CACH,CACY,CACrB,CAAA;YACH,CAAC,CAAC,CACE,CACe,CACV,CAChB,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,6BAA6B,EAAE,CAAA","sourcesContent":["import React from \"react\"\nimport { Column } from \"@tanstack/react-table\"\n\nimport { Checkbox } from \"@/components/checkbox\"\nimport { DropdownMenu } from \"@/components/dropdown-menu\"\nimport { IconButton } from \"@/components/icon-button\"\nimport { Tooltip } from \"@/components/tooltip\"\nimport { Adjustments } from \"@medusajs/icons\"\nimport { clx } from \"@/utils/clx\"\n\nimport { useDataTableContext } from \"../context/use-data-table-context\"\n\ninterface DataTableColumnVisibilityMenuProps {\n className?: string\n tooltip?: string\n}\n\nconst DataTableColumnVisibilityMenu = ({\n className,\n tooltip,\n}: DataTableColumnVisibilityMenuProps) => {\n const { instance, enableColumnVisibility } = useDataTableContext()\n\n if (!enableColumnVisibility) {\n return null\n }\n\n const columns = instance\n .getAllColumns()\n .filter((column) => column.getCanHide())\n\n const handleToggleColumn = (column: Column<any, any>) => {\n column.toggleVisibility()\n }\n\n const handleToggleAll = (value: boolean) => {\n instance.setColumnVisibility(\n Object.fromEntries(\n columns.map((column: Column<any, any>) => [column.id, value])\n )\n )\n }\n\n const allColumnsVisible = columns.every((column: Column<any, any>) => column.getIsVisible())\n const someColumnsVisible = columns.some((column: Column<any, any>) => column.getIsVisible())\n\n const Wrapper = tooltip ? Tooltip : React.Fragment\n const wrapperProps = tooltip ? { content: tooltip } : ({} as any)\n\n return (\n <DropdownMenu>\n <Wrapper {...wrapperProps}>\n <DropdownMenu.Trigger asChild>\n <IconButton size=\"small\" className={className}>\n <Adjustments />\n </IconButton>\n </DropdownMenu.Trigger>\n </Wrapper>\n <DropdownMenu.Content align=\"end\" className=\"min-w-[200px] max-h-[400px] overflow-hidden\">\n <DropdownMenu.Label>Toggle columns</DropdownMenu.Label>\n <DropdownMenu.Separator />\n <DropdownMenu.Item\n onSelect={(e: Event) => {\n e.preventDefault()\n handleToggleAll(!allColumnsVisible)\n }}\n >\n <div className=\"flex items-center gap-x-2\">\n <Checkbox\n checked={allColumnsVisible ? true : (someColumnsVisible && !allColumnsVisible) ? \"indeterminate\" : false}\n />\n <span>Toggle all</span>\n </div>\n </DropdownMenu.Item>\n <DropdownMenu.Separator />\n <div className=\"max-h-[250px] overflow-y-auto\">\n {columns.map((column: Column<any, any>) => {\n return (\n <DropdownMenu.Item\n key={column.id}\n onSelect={(e: Event) => {\n e.preventDefault()\n handleToggleColumn(column)\n }}\n >\n <div className=\"flex items-center gap-x-2\">\n <Checkbox checked={column.getIsVisible()} />\n <span className=\"truncate\">\n {(column.columnDef.meta as any)?.name || column.id}\n </span>\n </div>\n </DropdownMenu.Item>\n )\n })}\n </div>\n </DropdownMenu.Content>\n </DropdownMenu>\n )\n}\n\nexport { DataTableColumnVisibilityMenu }\nexport type { DataTableColumnVisibilityMenuProps }\n"]}

package/dist/esm/blocks/data-table/components/data-table-filter-bar.d.ts CHANGED Viewed

@@ -1,9 +1,13 @@
 import * as React from "react";
 interface DataTableFilterBarProps {
     clearAllFiltersLabel?: string;
+    alwaysShow?: boolean;
+    sortingTooltip?: string;
+    columnsTooltip?: string;
+    children?: React.ReactNode;
 }
 declare const DataTableFilterBar: {
-    ({ clearAllFiltersLabel, }: DataTableFilterBarProps): React.JSX.Element | null;
+    ({ clearAllFiltersLabel, alwaysShow, sortingTooltip, columnsTooltip, children, }: DataTableFilterBarProps): React.JSX.Element | null;
     displayName: string;
 };
 export { DataTableFilterBar };

package/dist/esm/blocks/data-table/components/data-table-filter-bar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-table-filter-bar.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;~~AAO9B~~,UAAU,uBAAuB;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAA;~~CAC9B~~;~~AAED~~,QAAA,MAAM,kBAAkB;~~gCAErB~~,uBAAuB;;~~CAqCzB~~,CAAA;AAkBD,OAAO,EAAE,kBAAkB,EAAE,CAAA;AAC7B,YAAY,EAAE,uBAAuB,EAAE,CAAA"}
1	+ {"version":3,"file":"data-table-filter-bar.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAU9B,UAAU,uBAAuB;IAC/B,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAQD,QAAA,MAAM,kBAAkB;sFAMrB,uBAAuB;;CAgHzB,CAAA;AAkBD,OAAO,EAAE,kBAAkB,EAAE,CAAA;AAC7B,YAAY,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/esm/blocks/data-table/components/data-table-filter-bar.js CHANGED Viewed

@@ -1,25 +1,87 @@
 "use client";
 import * as React from "react";
 import { DataTableFilter } from "../../data-table/components/data-table-filter";
+import { DataTableFilterMenu } from "../../data-table/components/data-table-filter-menu";
+import { DataTableSortingMenu } from "../../data-table/components/data-table-sorting-menu";
+import { DataTableColumnVisibilityMenu } from "../../data-table/components/data-table-column-visibility-menu";
 import { useDataTableContext } from "../../data-table/context/use-data-table-context";
-import { Button } from "../../../components/button";
 import { Skeleton } from "../../../components/skeleton";
-const DataTableFilterBar = ({ clearAllFiltersLabel = "Clear all", }) => {
-    const { instance } = useDataTableContext();
-    const filterState = instance.getFiltering();
+const DataTableFilterBar = ({ clearAllFiltersLabel = "Clear all", alwaysShow = false, sortingTooltip, columnsTooltip, children, }) => {
+    const { instance, enableColumnVisibility } = useDataTableContext();
+    // Local state for managing intermediate filters
+    const [localFilters, setLocalFilters] = React.useState([]);
+    const parentFilterState = instance.getFiltering();
+    const availableFilters = instance.getFilters();
+    // Sync parent filters with local state
+    React.useEffect(() => {
+        setLocalFilters(prevLocalFilters => {
+            const parentIds = Object.keys(parentFilterState);
+            const localIds = prevLocalFilters.map(f => f.id);
+            // Remove local filters that have been removed from parent
+            const updatedLocalFilters = prevLocalFilters.filter(f => parentIds.includes(f.id) || f.isNew);
+            // Add parent filters that don't exist locally
+            parentIds.forEach(id => {
+                if (!localIds.includes(id)) {
+                    updatedLocalFilters.push({
+                        id,
+                        value: parentFilterState[id],
+                        isNew: false
+                    });
+                }
+            });
+            // Only update if there's an actual change
+            if (updatedLocalFilters.length !== prevLocalFilters.length ||
+                updatedLocalFilters.some((f, i) => { var _a; return f.id !== ((_a = prevLocalFilters[i]) === null || _a === void 0 ? void 0 : _a.id); })) {
+                return updatedLocalFilters;
+            }
+            return prevLocalFilters;
+        });
+    }, [parentFilterState]);
+    // Add a new filter locally
+    const addLocalFilter = React.useCallback((id, value) => {
+        setLocalFilters(prev => [...prev, { id, value, isNew: true }]);
+    }, []);
+    // Update a local filter's value
+    const updateLocalFilter = React.useCallback((id, value) => {
+        setLocalFilters(prev => prev.map(f => f.id === id ? { ...f, value, isNew: false } : f));
+        // If the filter has a meaningful value, propagate to parent
+        if (value !== undefined && value !== null && value !== '' &&
+            !(Array.isArray(value) && value.length === 0)) {
+            instance.updateFilter({ id, value });
+        }
+    }, [instance]);
+    // Remove a local filter
+    const removeLocalFilter = React.useCallback((id) => {
+        setLocalFilters(prev => prev.filter(f => f.id !== id));
+        // Also remove from parent if it exists there
+        if (parentFilterState[id] !== undefined) {
+            instance.removeFilter(id);
+        }
+    }, [instance, parentFilterState]);
     const clearFilters = React.useCallback(() => {
+        setLocalFilters([]);
         instance.clearFilters();
     }, [instance]);
-    const filterCount = Object.keys(filterState).length;
-    if (filterCount === 0) {
+    const filterCount = localFilters.length;
+    const hasAvailableFilters = availableFilters.length > 0;
+    // Check if sorting is enabled
+    const sortableColumns = instance.getAllColumns().filter((column) => column.getCanSort());
+    const hasSorting = instance.enableSorting && sortableColumns.length > 0;
+    // Always show the filter bar when there are available filters, sorting, column visibility, or when forced
+    if (filterCount === 0 && !hasAvailableFilters && !hasSorting && !enableColumnVisibility && !alwaysShow && !children) {
         return null;
     }
     if (instance.showSkeleton) {
         return React.createElement(DataTableFilterBarSkeleton, { filterCount: filterCount });
     }
-    return (React.createElement("div", { className: "bg-ui-bg-subtle flex w-full flex-nowrap items-center gap-2 overflow-x-auto border-t px-6 py-2 md:flex-wrap" },
-        Object.entries(filterState).map(([id, filter]) => (React.createElement(DataTableFilter, { key: id, id: id, filter: filter }))),
-        filterCount > 0 ? (React.createElement(Button, { variant: "transparent", size: "small", className: "text-ui-fg-muted hover:text-ui-fg-subtle flex-shrink-0 whitespace-nowrap", type: "button", onClick: clearFilters }, clearAllFiltersLabel)) : null));
+    return (React.createElement("div", { className: "bg-ui-bg-subtle flex w-full flex-nowrap items-center justify-between gap-2 overflow-x-auto border-t px-6 py-2" },
+        React.createElement("div", { className: "flex flex-nowrap items-center gap-2 md:flex-wrap" },
+            localFilters.map((localFilter) => (React.createElement(DataTableFilter, { key: localFilter.id, id: localFilter.id, filter: localFilter.value, isNew: localFilter.isNew, onUpdate: (value) => updateLocalFilter(localFilter.id, value), onRemove: () => removeLocalFilter(localFilter.id) }))),
+            hasAvailableFilters && (React.createElement(DataTableFilterMenu, { onAddFilter: addLocalFilter }))),
+        React.createElement("div", { className: "flex flex-shrink-0 items-center gap-2" },
+            hasSorting && React.createElement(DataTableSortingMenu, { tooltip: sortingTooltip }),
+            enableColumnVisibility && React.createElement(DataTableColumnVisibilityMenu, { tooltip: columnsTooltip }),
+            children)));
 };
 DataTableFilterBar.displayName = "DataTable.FilterBar";
 const DataTableFilterBarSkeleton = ({ filterCount, }) => {