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

package/dist/cjs/blocks/data-table/components/data-table-column-visibility-menu.d.ts

@@ -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/cjs/blocks/data-table/components/data-table-column-visibility-menu.d.ts.map

@@ -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/cjs/blocks/data-table/components/data-table-column-visibility-menu.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataTableColumnVisibilityMenu = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const checkbox_1 = require("../../../components/checkbox");
+const dropdown_menu_1 = require("../../../components/dropdown-menu");
+const icon_button_1 = require("../../../components/icon-button");
+const tooltip_1 = require("../../../components/tooltip");
+const icons_1 = require("@medusajs/icons");
+const use_data_table_context_1 = require("../context/use-data-table-context");
+const DataTableColumnVisibilityMenu = ({ className, tooltip, }) => {
+    const { instance, enableColumnVisibility } = (0, use_data_table_context_1.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_1.Tooltip : react_1.default.Fragment;
+    const wrapperProps = tooltip ? { content: tooltip } : {};
+    return (react_1.default.createElement(dropdown_menu_1.DropdownMenu, null,
+        react_1.default.createElement(Wrapper, { ...wrapperProps },
+            react_1.default.createElement(dropdown_menu_1.DropdownMenu.Trigger, { asChild: true },
+                react_1.default.createElement(icon_button_1.IconButton, { size: "small", className: className },
+                    react_1.default.createElement(icons_1.Adjustments, null)))),
+        react_1.default.createElement(dropdown_menu_1.DropdownMenu.Content, { align: "end", className: "min-w-[200px] max-h-[400px] overflow-hidden" },
+            react_1.default.createElement(dropdown_menu_1.DropdownMenu.Label, null, "Toggle columns"),
+            react_1.default.createElement(dropdown_menu_1.DropdownMenu.Separator, null),
+            react_1.default.createElement(dropdown_menu_1.DropdownMenu.Item, { onSelect: (e) => {
+                    e.preventDefault();
+                    handleToggleAll(!allColumnsVisible);
+                } },
+                react_1.default.createElement("div", { className: "flex items-center gap-x-2" },
+                    react_1.default.createElement(checkbox_1.Checkbox, { checked: allColumnsVisible ? true : (someColumnsVisible && !allColumnsVisible) ? "indeterminate" : false }),
+                    react_1.default.createElement("span", null, "Toggle all"))),
+            react_1.default.createElement(dropdown_menu_1.DropdownMenu.Separator, null),
+            react_1.default.createElement("div", { className: "max-h-[250px] overflow-y-auto" }, columns.map((column) => {
+                var _a;
+                return (react_1.default.createElement(dropdown_menu_1.DropdownMenu.Item, { key: column.id, onSelect: (e) => {
+                        e.preventDefault();
+                        handleToggleColumn(column);
+                    } },
+                    react_1.default.createElement("div", { className: "flex items-center gap-x-2" },
+                        react_1.default.createElement(checkbox_1.Checkbox, { checked: column.getIsVisible() }),
+                        react_1.default.createElement("span", { className: "truncate" }, ((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.name) || column.id))));
+            })))));
+};
+exports.DataTableColumnVisibilityMenu = DataTableColumnVisibilityMenu;
+//# sourceMappingURL=data-table-column-visibility-menu.js.map

package/dist/cjs/blocks/data-table/components/data-table-column-visibility-menu.js.map

@@ -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":"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","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/cjs/blocks/data-table/components/data-table-filter-bar.d.ts

@@ -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/cjs/blocks/data-table/components/data-table-filter-bar.d.ts.map

@@ -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"}
+{"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/cjs/blocks/data-table/components/data-table-filter-bar.js

@@ -5,25 +5,87 @@ exports.DataTableFilterBar = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const data_table_filter_1 = require("../../data-table/components/data-table-filter");
+const data_table_filter_menu_1 = require("../../data-table/components/data-table-filter-menu");
+const data_table_sorting_menu_1 = require("../../data-table/components/data-table-sorting-menu");
+const data_table_column_visibility_menu_1 = require("../../data-table/components/data-table-column-visibility-menu");
 const use_data_table_context_1 = require("../../data-table/context/use-data-table-context");
-const button_1 = require("../../../components/button");
 const skeleton_1 = require("../../../components/skeleton");
-const DataTableFilterBar = ({ clearAllFiltersLabel = "Clear all", }) => {
-    const { instance } = (0, use_data_table_context_1.useDataTableContext)();
-    const filterState = instance.getFiltering();
+const DataTableFilterBar = ({ clearAllFiltersLabel = "Clear all", alwaysShow = false, sortingTooltip, columnsTooltip, children, }) => {
+    const { instance, enableColumnVisibility } = (0, use_data_table_context_1.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(data_table_filter_1.DataTableFilter, { key: id, id: id, filter: filter }))),
-        filterCount > 0 ? (React.createElement(button_1.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(data_table_filter_1.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(data_table_filter_menu_1.DataTableFilterMenu, { onAddFilter: addLocalFilter }))),
+        React.createElement("div", { className: "flex flex-shrink-0 items-center gap-2" },
+            hasSorting && React.createElement(data_table_sorting_menu_1.DataTableSortingMenu, { tooltip: sortingTooltip }),
+            enableColumnVisibility && React.createElement(data_table_column_visibility_menu_1.DataTableColumnVisibilityMenu, { tooltip: columnsTooltip }),
+            children)));
 };
 exports.DataTableFilterBar = DataTableFilterBar;
 DataTableFilterBar.displayName = "DataTable.FilterBar";

package/dist/cjs/blocks/data-table/components/data-table-filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter-bar.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-bar.tsx"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;;AAEZ,qDAA8B;AAE9B,wFAAkF;AAClF,+FAAwF;AACxF,gDAA4C;AAC5C,oDAAgD;AAMhD,MAAM,kBAAkB,GAAG,CAAC,EAC1B,oBAAoB,GAAG,WAAW,GACV,EAAE,EAAE;IAC5B,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,4CAAmB,GAAE,CAAA;IAE1C,MAAM,WAAW,GAAG,QAAQ,CAAC,YAAY,EAAE,CAAA;IAE3C,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,GAAG,EAAE;QAC1C,QAAQ,CAAC,YAAY,EAAE,CAAA;IACzB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,MAAM,CAAA;IAEnD,IAAI,WAAW,KAAK,CAAC,EAAE,CAAC;QACtB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,IAAI,QAAQ,CAAC,YAAY,EAAE,CAAC;QAC1B,OAAO,oBAAC,0BAA0B,IAAC,WAAW,EAAE,WAAW,GAAI,CAAA;IACjE,CAAC;IAED,OAAO,CACL,6BAAK,SAAS,EAAC,4GAA4G;QACxH,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC,CACjD,oBAAC,mCAAe,IAAC,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,GAAI,CACrD,CAAC;QACD,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CACjB,oBAAC,eAAM,IACL,OAAO,EAAC,aAAa,EACrB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,0EAA0E,EACpF,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,YAAY,IAEpB,oBAAoB,CACd,CACV,CAAC,CAAC,CAAC,IAAI,CACJ,CACP,CAAA;AACH,CAAC,CAAA;AAkBQ,gDAAkB;AAjB3B,kBAAkB,CAAC,WAAW,GAAG,qBAAqB,CAAA;AAEtD,MAAM,0BAA0B,GAAG,CAAC,EAClC,WAAW,GAGZ,EAAE,EAAE;IACH,OAAO,CACL,6BAAK,SAAS,EAAC,4GAA4G;QACxH,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,WAAW,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CACrD,oBAAC,mBAAQ,IAAC,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,eAAe,GAAG,CACnD,CAAC;QACD,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,oBAAC,mBAAQ,IAAC,SAAS,EAAC,cAAc,GAAG,CAAC,CAAC,CAAC,IAAI,CAC3D,CACP,CAAA;AACH,CAAC,CAAA","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { DataTableFilter } from \"@/blocks/data-table/components/data-table-filter\"\nimport { useDataTableContext } from \"@/blocks/data-table/context/use-data-table-context\"\nimport { Button } from \"@/components/button\"\nimport { Skeleton } from \"@/components/skeleton\"\n\ninterface DataTableFilterBarProps {\n  clearAllFiltersLabel?: string\n}\n\nconst DataTableFilterBar = ({\n  clearAllFiltersLabel = \"Clear all\",\n}: DataTableFilterBarProps) => {\n  const { instance } = useDataTableContext()\n\n  const filterState = instance.getFiltering()\n\n  const clearFilters = React.useCallback(() => {\n    instance.clearFilters()\n  }, [instance])\n\n  const filterCount = Object.keys(filterState).length\n\n  if (filterCount === 0) {\n    return null\n  }\n\n  if (instance.showSkeleton) {\n    return <DataTableFilterBarSkeleton filterCount={filterCount} />\n  }\n\n  return (\n    <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\">\n      {Object.entries(filterState).map(([id, filter]) => (\n        <DataTableFilter key={id} id={id} filter={filter} />\n      ))}\n      {filterCount > 0 ? (\n        <Button\n          variant=\"transparent\"\n          size=\"small\"\n          className=\"text-ui-fg-muted hover:text-ui-fg-subtle flex-shrink-0 whitespace-nowrap\"\n          type=\"button\"\n          onClick={clearFilters}\n        >\n          {clearAllFiltersLabel}\n        </Button>\n      ) : null}\n    </div>\n  )\n}\nDataTableFilterBar.displayName = \"DataTable.FilterBar\"\n\nconst DataTableFilterBarSkeleton = ({\n  filterCount,\n}: {\n  filterCount: number\n}) => {\n  return (\n    <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\">\n      {Array.from({ length: filterCount }).map((_, index) => (\n        <Skeleton key={index} className=\"h-7 w-[180px]\" />\n      ))}\n      {filterCount > 0 ? <Skeleton className=\"h-7 w-[66px]\" /> : null}\n    </div>\n  )\n}\n\nexport { DataTableFilterBar }\nexport type { DataTableFilterBarProps }\n\n"]}
+{"version":3,"file":"data-table-filter-bar.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { DataTableFilter } from \"@/blocks/data-table/components/data-table-filter\"\nimport { DataTableFilterMenu } from \"@/blocks/data-table/components/data-table-filter-menu\"\nimport { DataTableSortingMenu } from \"@/blocks/data-table/components/data-table-sorting-menu\"\nimport { DataTableColumnVisibilityMenu } from \"@/blocks/data-table/components/data-table-column-visibility-menu\"\nimport { useDataTableContext } from \"@/blocks/data-table/context/use-data-table-context\"\nimport { Button } from \"@/components/button\"\nimport { Skeleton } from \"@/components/skeleton\"\n\ninterface DataTableFilterBarProps {\n  clearAllFiltersLabel?: string\n  alwaysShow?: boolean\n  sortingTooltip?: string\n  columnsTooltip?: string\n  children?: React.ReactNode\n}\n\ninterface LocalFilter {\n  id: string\n  value: unknown\n  isNew: boolean\n}\n\nconst DataTableFilterBar = ({\n  clearAllFiltersLabel = \"Clear all\",\n  alwaysShow = false,\n  sortingTooltip,\n  columnsTooltip,\n  children,\n}: DataTableFilterBarProps) => {\n  const { instance, enableColumnVisibility } = useDataTableContext()\n  \n  // Local state for managing intermediate filters\n  const [localFilters, setLocalFilters] = React.useState<LocalFilter[]>([])\n  \n  const parentFilterState = instance.getFiltering()\n  const availableFilters = instance.getFilters()\n  \n  // Sync parent filters with local state\n  React.useEffect(() => {\n    setLocalFilters(prevLocalFilters => {\n      const parentIds = Object.keys(parentFilterState)\n      const localIds = prevLocalFilters.map(f => f.id)\n      \n      // Remove local filters that have been removed from parent\n      const updatedLocalFilters = prevLocalFilters.filter(f => \n        parentIds.includes(f.id) || f.isNew\n      )\n      \n      // Add parent filters that don't exist locally\n      parentIds.forEach(id => {\n        if (!localIds.includes(id)) {\n          updatedLocalFilters.push({\n            id,\n            value: parentFilterState[id],\n            isNew: false\n          })\n        }\n      })\n      \n      // Only update if there's an actual change\n      if (updatedLocalFilters.length !== prevLocalFilters.length ||\n          updatedLocalFilters.some((f, i) => f.id !== prevLocalFilters[i]?.id)) {\n        return updatedLocalFilters\n      }\n      return prevLocalFilters\n    })\n  }, [parentFilterState])\n  \n  // Add a new filter locally\n  const addLocalFilter = React.useCallback((id: string, value: unknown) => {\n    setLocalFilters(prev => [...prev, { id, value, isNew: true }])\n  }, [])\n  \n  // Update a local filter's value\n  const updateLocalFilter = React.useCallback((id: string, value: unknown) => {\n    setLocalFilters(prev => prev.map(f => \n      f.id === id ? { ...f, value, isNew: false } : f\n    ))\n    \n    // If the filter has a meaningful value, propagate to parent\n    if (value !== undefined && value !== null && value !== '' && \n        !(Array.isArray(value) && value.length === 0)) {\n      instance.updateFilter({ id, value })\n    }\n  }, [instance])\n  \n  // Remove a local filter\n  const removeLocalFilter = React.useCallback((id: string) => {\n    setLocalFilters(prev => prev.filter(f => f.id !== id))\n    // Also remove from parent if it exists there\n    if (parentFilterState[id] !== undefined) {\n      instance.removeFilter(id)\n    }\n  }, [instance, parentFilterState])\n\n  const clearFilters = React.useCallback(() => {\n    setLocalFilters([])\n    instance.clearFilters()\n  }, [instance])\n\n  const filterCount = localFilters.length\n  const hasAvailableFilters = availableFilters.length > 0\n  \n  // Check if sorting is enabled\n  const sortableColumns = instance.getAllColumns().filter((column) => column.getCanSort())\n  const hasSorting = instance.enableSorting && sortableColumns.length > 0\n\n  // Always show the filter bar when there are available filters, sorting, column visibility, or when forced\n  if (filterCount === 0 && !hasAvailableFilters && !hasSorting && !enableColumnVisibility && !alwaysShow && !children) {\n    return null\n  }\n\n  if (instance.showSkeleton) {\n    return <DataTableFilterBarSkeleton filterCount={filterCount} />\n  }\n\n  return (\n    <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\">\n      <div className=\"flex flex-nowrap items-center gap-2 md:flex-wrap\">\n        {localFilters.map((localFilter) => (\n          <DataTableFilter \n            key={localFilter.id} \n            id={localFilter.id} \n            filter={localFilter.value} \n            isNew={localFilter.isNew}\n            onUpdate={(value) => updateLocalFilter(localFilter.id, value)}\n            onRemove={() => removeLocalFilter(localFilter.id)}\n          />\n        ))}\n        {hasAvailableFilters && (\n          <DataTableFilterMenu onAddFilter={addLocalFilter} />\n        )}\n      </div>\n      <div className=\"flex flex-shrink-0 items-center gap-2\">\n        {hasSorting && <DataTableSortingMenu tooltip={sortingTooltip} />}\n        {enableColumnVisibility && <DataTableColumnVisibilityMenu tooltip={columnsTooltip} />}\n        {children}\n      </div>\n    </div>\n  )\n}\nDataTableFilterBar.displayName = \"DataTable.FilterBar\"\n\nconst DataTableFilterBarSkeleton = ({\n  filterCount,\n}: {\n  filterCount: number\n}) => {\n  return (\n    <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\">\n      {Array.from({ length: filterCount }).map((_, index) => (\n        <Skeleton key={index} className=\"h-7 w-[180px]\" />\n      ))}\n      {filterCount > 0 ? <Skeleton className=\"h-7 w-[66px]\" /> : null}\n    </div>\n  )\n}\n\nexport { DataTableFilterBar }\nexport type { DataTableFilterBarProps }\n\n"]}

package/dist/cjs/blocks/data-table/components/data-table-filter-menu.d.ts

@@ -4,13 +4,17 @@ interface DataTableFilterMenuProps {
      * The tooltip to show when hovering over the filter menu.
      */
     tooltip?: string;
+    /**
+     * Callback when a filter is added
+     */
+    onAddFilter?: (id: string, value: unknown) => void;
 }
 /**
  * This component adds a filter menu to the data table, allowing users
  * to filter the table's data.
  */
 declare const DataTableFilterMenu: {
-    (props: DataTableFilterMenuProps): React.JSX.Element;
+    ({ tooltip, onAddFilter }: DataTableFilterMenuProps): React.JSX.Element;
     displayName: string;
 };
 export { DataTableFilterMenu };

package/dist/cjs/blocks/data-table/components/data-table-filter-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter-menu.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,UAAU,wBAAwB;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;GAGG;AACH,QAAA,MAAM,mBAAmB;YAAW,wBAAwB;;CA+C3D,CAAA;AAOD,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}
+{"version":3,"file":"data-table-filter-menu.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B,UAAU,wBAAwB;IAChC;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;CACnD;AAED;;;GAGG;AACH,QAAA,MAAM,mBAAmB;+BAA8B,wBAAwB;;CA2E9E,CAAA;AAOD,OAAO,EAAE,mBAAmB,EAAE,CAAA;AAC9B,YAAY,EAAE,wBAAwB,EAAE,CAAA"}

package/dist/cjs/blocks/data-table/components/data-table-filter-menu.js

@@ -13,7 +13,7 @@ const icons_1 = require("@medusajs/icons");
  * This component adds a filter menu to the data table, allowing users
  * to filter the table's data.
  */
-const DataTableFilterMenu = (props) => {
+const DataTableFilterMenu = ({ tooltip, onAddFilter }) => {
     const { instance } = (0, use_data_table_context_1.useDataTableContext)();
     const enabledFilters = Object.keys(instance.getFiltering());
     const filterOptions = instance
@@ -22,9 +22,9 @@ const DataTableFilterMenu = (props) => {
     if (!enabledFilters.length && !filterOptions.length) {
         throw new Error("DataTable.FilterMenu was rendered but there are no filters to apply. Make sure to pass filters to 'useDataTable'");
     }
-    const Wrapper = props.tooltip ? tooltip_1.Tooltip : React.Fragment;
-    const wrapperProps = props.tooltip
-        ? { content: props.tooltip, hidden: filterOptions.length === 0 }
+    const Wrapper = tooltip ? tooltip_1.Tooltip : React.Fragment;
+    const wrapperProps = tooltip
+        ? { content: tooltip, hidden: filterOptions.length === 0 }
         : {};
     if (instance.showSkeleton) {
         return React.createElement(DataTableFilterMenuSkeleton, null);
@@ -34,9 +34,37 @@ const DataTableFilterMenu = (props) => {
             React.createElement(dropdown_menu_1.DropdownMenu.Trigger, { asChild: true, disabled: filterOptions.length === 0 },
                 React.createElement(icon_button_1.IconButton, { size: "small" },
                     React.createElement(icons_1.Funnel, null)))),
-        React.createElement(dropdown_menu_1.DropdownMenu.Content, { side: "bottom" }, filterOptions.map((filter) => (React.createElement(dropdown_menu_1.DropdownMenu.Item, { key: filter.id, onClick: () => {
-                instance.addFilter({ id: filter.id, value: undefined });
-            } }, filter.label))))));
+        React.createElement(dropdown_menu_1.DropdownMenu.Content, { side: "bottom", align: "start" }, filterOptions.map((filter) => {
+            const getDefaultValue = () => {
+                switch (filter.type) {
+                    case "select":
+                    case "multiselect":
+                        return [];
+                    case "string":
+                        return "";
+                    case "number":
+                        return null;
+                    case "date":
+                        return null;
+                    case "radio":
+                        return null;
+                    case "custom":
+                        return null;
+                    default:
+                        return null;
+                }
+            };
+            return (React.createElement(dropdown_menu_1.DropdownMenu.Item, { key: filter.id, onClick: (e) => {
+                    // Prevent any bubbling that might interfere
+                    e.stopPropagation();
+                    if (onAddFilter) {
+                        onAddFilter(filter.id, getDefaultValue());
+                    }
+                    else {
+                        instance.addFilter({ id: filter.id, value: getDefaultValue() });
+                    }
+                } }, filter.label));
+        }))));
 };
 exports.DataTableFilterMenu = DataTableFilterMenu;
 DataTableFilterMenu.displayName = "DataTable.FilterMenu";

package/dist/cjs/blocks/data-table/components/data-table-filter-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter-menu.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-menu.tsx"],"names":[],"mappings":";;;;AAAA,qDAA8B;AAE9B,+FAAwF;AACxF,8DAAyD;AACzD,0DAAqD;AACrD,oDAAgD;AAChD,kDAA8C;AAC9C,2CAAwC;AASxC;;;GAGG;AACH,MAAM,mBAAmB,GAAG,CAAC,KAA+B,EAAE,EAAE;IAC9D,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAA,4CAAmB,GAAE,CAAA;IAE1C,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAA;IAE3D,MAAM,aAAa,GAAG,QAAQ;SAC3B,UAAU,EAAE;SACZ,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,cAAc,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAA;IAE1D,IAAI,CAAC,cAAc,CAAC,MAAM,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE,CAAC;QACpD,MAAM,IAAI,KAAK,CACb,kHAAkH,CACnH,CAAA;IACH,CAAC;IAED,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAO,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAA;IACxD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO;QAChC,CAAC,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,MAAM,EAAE,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;QAChE,CAAC,CAAE,EAAU,CAAA;IAEf,IAAI,QAAQ,CAAC,YAAY,EAAE,CAAC;QAC1B,OAAO,oBAAC,2BAA2B,OAAG,CAAA;IACxC,CAAC;IAED,OAAO,CACL,oBAAC,4BAAY;QACX,oBAAC,OAAO,OAAK,YAAY;YACvB,oBAAC,4BAAY,CAAC,OAAO,IAAC,OAAO,QAAC,QAAQ,EAAE,aAAa,CAAC,MAAM,KAAK,CAAC;gBAChE,oBAAC,wBAAU,IAAC,IAAI,EAAC,OAAO;oBACtB,oBAAC,cAAM,OAAG,CACC,CACQ,CACf;QACV,oBAAC,4BAAY,CAAC,OAAO,IAAC,IAAI,EAAC,QAAQ,IAChC,aAAa,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC7B,oBAAC,4BAAY,CAAC,IAAI,IAChB,GAAG,EAAE,MAAM,CAAC,EAAE,EACd,OAAO,EAAE,GAAG,EAAE;gBACZ,QAAQ,CAAC,SAAS,CAAC,EAAE,EAAE,EAAE,MAAM,CAAC,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAA;YACzD,CAAC,IAEA,MAAM,CAAC,KAAK,CACK,CACrB,CAAC,CACmB,CACV,CAChB,CAAA;AACH,CAAC,CAAA;AAOQ,kDAAmB;AAN5B,mBAAmB,CAAC,WAAW,GAAG,sBAAsB,CAAA;AAExD,MAAM,2BAA2B,GAAG,GAAG,EAAE;IACvC,OAAO,oBAAC,mBAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,CAAA;AACxC,CAAC,CAAA","sourcesContent":["import * as React from \"react\"\n\nimport { useDataTableContext } from \"@/blocks/data-table/context/use-data-table-context\"\nimport { DropdownMenu } from \"@/components/dropdown-menu\"\nimport { IconButton } from \"@/components/icon-button\"\nimport { Skeleton } from \"@/components/skeleton\"\nimport { Tooltip } from \"@/components/tooltip\"\nimport { Funnel } from \"@medusajs/icons\"\n\ninterface DataTableFilterMenuProps {\n  /**\n   * The tooltip to show when hovering over the filter menu.\n   */\n  tooltip?: string\n}\n\n/**\n * This component adds a filter menu to the data table, allowing users\n * to filter the table's data.\n */\nconst DataTableFilterMenu = (props: DataTableFilterMenuProps) => {\n  const { instance } = useDataTableContext()\n\n  const enabledFilters = Object.keys(instance.getFiltering())\n\n  const filterOptions = instance\n    .getFilters()\n    .filter((filter) => !enabledFilters.includes(filter.id))\n\n  if (!enabledFilters.length && !filterOptions.length) {\n    throw new Error(\n      \"DataTable.FilterMenu was rendered but there are no filters to apply. Make sure to pass filters to 'useDataTable'\"\n    )\n  }\n\n  const Wrapper = props.tooltip ? Tooltip : React.Fragment\n  const wrapperProps = props.tooltip\n    ? { content: props.tooltip, hidden: filterOptions.length === 0 }\n    : ({} as any)\n\n  if (instance.showSkeleton) {\n    return <DataTableFilterMenuSkeleton />\n  }\n\n  return (\n    <DropdownMenu>\n      <Wrapper {...wrapperProps}>\n        <DropdownMenu.Trigger asChild disabled={filterOptions.length === 0}>\n          <IconButton size=\"small\">\n            <Funnel />\n          </IconButton>\n        </DropdownMenu.Trigger>\n      </Wrapper>\n      <DropdownMenu.Content side=\"bottom\">\n        {filterOptions.map((filter) => (\n          <DropdownMenu.Item\n            key={filter.id}\n            onClick={() => {\n              instance.addFilter({ id: filter.id, value: undefined })\n            }}\n          >\n            {filter.label}\n          </DropdownMenu.Item>\n        ))}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  )\n}\nDataTableFilterMenu.displayName = \"DataTable.FilterMenu\"\n\nconst DataTableFilterMenuSkeleton = () => {\n  return <Skeleton className=\"size-7\" />\n}\n\nexport { DataTableFilterMenu }\nexport type { DataTableFilterMenuProps }\n"]}
+{"version":3,"file":"data-table-filter-menu.js","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter-menu.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from \"react\"\n\nimport { useDataTableContext } from \"@/blocks/data-table/context/use-data-table-context\"\nimport { DropdownMenu } from \"@/components/dropdown-menu\"\nimport { IconButton } from \"@/components/icon-button\"\nimport { Skeleton } from \"@/components/skeleton\"\nimport { Tooltip } from \"@/components/tooltip\"\nimport { Funnel } from \"@medusajs/icons\"\n\ninterface DataTableFilterMenuProps {\n  /**\n   * The tooltip to show when hovering over the filter menu.\n   */\n  tooltip?: string\n  /**\n   * Callback when a filter is added\n   */\n  onAddFilter?: (id: string, value: unknown) => void\n}\n\n/**\n * This component adds a filter menu to the data table, allowing users\n * to filter the table's data.\n */\nconst DataTableFilterMenu = ({ tooltip, onAddFilter }: DataTableFilterMenuProps) => {\n  const { instance } = useDataTableContext()\n\n  const enabledFilters = Object.keys(instance.getFiltering())\n\n  const filterOptions = instance\n    .getFilters()\n    .filter((filter) => !enabledFilters.includes(filter.id))\n\n  if (!enabledFilters.length && !filterOptions.length) {\n    throw new Error(\n      \"DataTable.FilterMenu was rendered but there are no filters to apply. Make sure to pass filters to 'useDataTable'\"\n    )\n  }\n\n  const Wrapper = tooltip ? Tooltip : React.Fragment\n  const wrapperProps = tooltip\n    ? { content: tooltip, hidden: filterOptions.length === 0 }\n    : ({} as any)\n\n  if (instance.showSkeleton) {\n    return <DataTableFilterMenuSkeleton />\n  }\n\n  return (\n    <DropdownMenu>\n      <Wrapper {...wrapperProps}>\n        <DropdownMenu.Trigger asChild disabled={filterOptions.length === 0}>\n          <IconButton size=\"small\">\n            <Funnel />\n          </IconButton>\n        </DropdownMenu.Trigger>\n      </Wrapper>\n      <DropdownMenu.Content side=\"bottom\" align=\"start\">\n        {filterOptions.map((filter) => {\n          const getDefaultValue = () => {\n            switch (filter.type) {\n              case \"select\":\n              case \"multiselect\":\n                return []\n              case \"string\":\n                return \"\"\n              case \"number\":\n                return null\n              case \"date\":\n                return null\n              case \"radio\":\n                return null\n              case \"custom\":\n                return null\n              default:\n                return null\n            }\n          }\n          \n          return (\n            <DropdownMenu.Item\n              key={filter.id}\n              onClick={(e) => {\n                // Prevent any bubbling that might interfere\n                e.stopPropagation()\n                if (onAddFilter) {\n                  onAddFilter(filter.id, getDefaultValue())\n                } else {\n                  instance.addFilter({ id: filter.id, value: getDefaultValue() })\n                }\n              }}\n            >\n              {filter.label}\n            </DropdownMenu.Item>\n          )\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  )\n}\nDataTableFilterMenu.displayName = \"DataTable.FilterMenu\"\n\nconst DataTableFilterMenuSkeleton = () => {\n  return <Skeleton className=\"size-7\" />\n}\n\nexport { DataTableFilterMenu }\nexport type { DataTableFilterMenuProps }\n"]}

package/dist/cjs/blocks/data-table/components/data-table-filter.d.ts

@@ -2,9 +2,12 @@ import * as React from "react";
 interface DataTableFilterProps {
     id: string;
     filter: unknown;
+    isNew?: boolean;
+    onUpdate?: (value: unknown) => void;
+    onRemove?: () => void;
 }
 declare const DataTableFilter: {
-    ({ id, filter }: DataTableFilterProps): React.JSX.Element | null;
+    ({ id, filter, isNew, onUpdate, onRemove }: DataTableFilterProps): React.JSX.Element | null;
     displayName: string;
 };
 export { DataTableFilter };

package/dist/cjs/blocks/data-table/components/data-table-filter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table-filter.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,UAAU,oBAAoB;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,OAAO,CAAA;CAChB;AAYD,QAAA,MAAM,eAAe;qBAAoB,oBAAoB;;CAoL5D,CAAA;AAkZD,OAAO,EAAE,eAAe,EAAE,CAAA;AAC1B,YAAY,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"data-table-filter.d.ts","sourceRoot":"","sources":["../../../../../src/blocks/data-table/components/data-table-filter.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAsB9B,UAAU,oBAAoB;IAC5B,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IACnC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB;AAYD,QAAA,MAAM,eAAe;gDAAuD,oBAAoB;;CAqU/F,CAAA;AA+4BD,OAAO,EAAE,eAAe,EAAE,CAAA;AAC1B,YAAY,EAAE,oBAAoB,EAAE,CAAA"}