shad-m 1.0.0

package/dist/common/interactive/filter.js

@@ -0,0 +1,287 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var button = require('@/components/button');
+var dialog = require('@/components/dialog');
+var utils = require('@/lib/utils');
+var Icon = require('@/assets/Icon');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const FilterContext = React.createContext(null);
+const useFilterContext = () => {
+  const context = React.useContext(FilterContext);
+  if (!context) {
+    throw new Error("Filter components must be used within a Filter component");
+  }
+  return context;
+};
+function Filter({
+  children,
+  className,
+  onApply,
+  initFilters,
+  filters,
+  buttonFilter,
+  disableAutoApply
+}) {
+  const [advancedFiltersOpen, setAdvancedFiltersOpen] = React.useState(false);
+  const [filterItems, setFilterItems] = React.useState([]);
+  const [filterValues, setFilterValues] = React.useState({});
+  const [advancedFilterValues, setAdvancedFilterValues] = React.useState({});
+  const [initialValues, setInitialValues] = React.useState({});
+  const [fixedFilterFields, setFixedFilterFields] = React.useState([]);
+  const [advancedFilterFields, setAdvancedFilterFields] = React.useState([]);
+  const mountedRef = React.useRef(false);
+  const timeoutRef = React.useRef(null);
+  React.useEffect(() => {
+    setFilterValues({ ...initFilters });
+    setInitialValues({ ...initFilters });
+  }, []);
+  React.useEffect(() => {
+    setFilterValues({ ...filters });
+  }, [filters]);
+  React.useEffect(() => {
+    if (advancedFiltersOpen) {
+      setAdvancedFilterValues({ ...filterValues });
+    }
+  }, [advancedFiltersOpen, filterValues]);
+  const setValues = (values, apply) => {
+    if (advancedFiltersOpen) {
+      setAdvancedFilterValues((prev) => ({ ...prev, ...values }));
+      return;
+    }
+    const newValues = { ...filterValues, ...values };
+    setFilterValues(newValues);
+    if (apply && !disableAutoApply) {
+      if (timeoutRef?.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        onApply?.(newValues);
+      }, 500);
+    }
+  };
+  const resetAdvancedFilters = () => {
+    setAdvancedFilterValues((prev) => {
+      const newValues = { ...prev };
+      advancedFilterFields.forEach((field) => {
+        newValues[field] = void 0;
+      });
+      return newValues;
+    });
+  };
+  const registerFilter = (filterItem) => {
+    setFilterItems((prev) => {
+      const exists = prev.some((item) => item.id === filterItem.id);
+      if (exists) {
+        return prev.map((item) => item.id === filterItem.id ? { ...item, ...filterItem } : item);
+      } else {
+        return [...prev, { ...filterItem }];
+      }
+    });
+  };
+  const unregisterFilter = (id) => {
+    setFilterItems((prev) => prev.filter((item) => item.id !== id));
+  };
+  React__default.default.useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return () => {
+        setFilterItems([]);
+      };
+    }
+  }, []);
+  const fixedFilters = React.useMemo(
+    () => filterItems.filter((item) => item.position.includes("fixed")).map((item) => item.element),
+    [filterItems]
+  );
+  const advancedFilters = React.useMemo(
+    () => filterItems.filter((item) => item.position.includes("advanced")),
+    [filterItems]
+  );
+  const contextValue = React.useMemo(
+    () => ({
+      advancedFiltersOpen,
+      setAdvancedFiltersOpen,
+      registerFilter,
+      unregisterFilter,
+      // values: filterValues,
+      setValues,
+      values: advancedFiltersOpen ? advancedFilterValues : filterValues,
+      setFixedFilterFields,
+      setAdvancedFilterFields
+    }),
+    [advancedFiltersOpen, filterValues, advancedFilterValues]
+  );
+  const hasAdvancedFilters = advancedFilters.length > 0;
+  const handleReset = () => {
+    resetAdvancedFilters();
+  };
+  const handleApply = () => {
+    const filteredAdvancedValues = Object.keys(advancedFilterValues).filter((key) => advancedFilterFields.includes(key)).reduce(
+      (acc, key) => {
+        acc[key] = advancedFilterValues[key];
+        return acc;
+      },
+      {}
+    );
+    const newValues = { ...filterValues, ...filteredAdvancedValues };
+    setFilterValues(newValues);
+    onApply?.(newValues);
+    setAdvancedFiltersOpen(false);
+  };
+  const handleCloseDialog = (open) => {
+    if (!open) {
+      setAdvancedFiltersOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(FilterContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("flex flex-wrap items-center gap-4", className), children: [
+      typeof children === "function" ? children(contextValue) : children,
+      fixedFilters?.map((filter, index) => /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: filter({ isAdvanced: false }) }, `fixed-filter-${index}`)),
+      typeof buttonFilter === "function" ? buttonFilter({
+        onApply: handleApply
+      }) : buttonFilter ? React.cloneElement(buttonFilter, {
+        onClick: handleApply
+      }) : null,
+      hasAdvancedFilters && /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "outline", onClick: () => setAdvancedFiltersOpen(true), className: "w-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Icon.FilterOutlinedIcon16, { className: "!size-6" }),
+        Object.keys(advancedFilterValues).filter((key) => advancedFilterFields.includes(key)).some((key) => Boolean(advancedFilterValues[key])) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-background bg-destructive absolute -right-1 -top-1 size-3 rounded-full border-2" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: advancedFiltersOpen, onOpenChange: handleCloseDialog, children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { size: "3xl", className: "flex flex-col gap-0 overflow-hidden md:max-h-[80vh]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { className: "px-5", children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "!text-t18sb text-start", children: "L\u1ECDc kh\xE1c" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(AdvancedFilterGroup, { filterItems: advancedFilters }),
+      /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogFooter, { className: "border-border justify-end border-t px-5 pt-5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { variant: "plain", onClick: handleReset, children: "X\xF3a l\u1ECDc" }),
+        /* @__PURE__ */ jsxRuntime.jsx(button.Button, { className: "w-32", onClick: handleApply, children: "\xC1p d\u1EE5ng" })
+      ] })
+    ] }) })
+  ] });
+}
+const AdvancedFilterGroup = ({ filterItems }) => {
+  const advancedItems = filterItems.filter((item) => item.position.includes("advanced"));
+  const renderedGroups = /* @__PURE__ */ new Set();
+  const elements = [];
+  for (let i = 0; i < advancedItems.length; i++) {
+    const item = advancedItems[i];
+    if (item.groupId && renderedGroups.has(item.groupId)) continue;
+    if (item.groupId) {
+      const groupItems = advancedItems.filter((f) => f.groupId === item.groupId);
+      renderedGroups.add(item.groupId);
+      const colCount = Math.min(groupItems.length, 4);
+      elements.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: utils.cn(`grid gap-8 grid-cols-${colCount}`),
+            children: groupItems.map((groupItem, index) => /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: groupItem.element({ isAdvanced: true }) }, `advanced-filter-${item.groupId}-${index}`))
+          },
+          `filter-group-${item.groupId}`
+        )
+      );
+    } else {
+      elements.push(
+        /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: item.element({ isAdvanced: true }) }, `advanced-filter-${i}`)
+      );
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 space-y-6 overflow-auto p-5", children: elements });
+};
+function FilterItem({
+  position,
+  children,
+  label,
+  className,
+  id,
+  name,
+  filterFields,
+  layout = "vertical",
+  renderValue,
+  groupId
+}) {
+  const contextValue = useFilterContext();
+  const { registerFilter, unregisterFilter } = contextValue;
+  const uniqueId = React.useRef(id || `filter-${Math.random().toString(36).substr(2, 9)}`);
+  const element = React.useCallback(
+    ({ isAdvanced }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: utils.cn(
+            "filter-item",
+            className,
+            layout === "vertical" && isAdvanced && "w-full",
+            layout === "horizontal" && isAdvanced && "grid w-full grid-cols-2 items-center"
+          ),
+          children: [
+            isAdvanced && label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-t16m text-foreground mb-2", children: label }),
+            typeof children === "function" ? children({
+              ...contextValue,
+              value: name ? contextValue.values[name] : null,
+              setValue: name ? (value) => contextValue.setValues(
+                { [name]: value },
+                position.includes("fixed") && !isAdvanced
+              ) : () => {
+              },
+              isAdvanced
+            }) : name ? React.cloneElement(children, {
+              value: contextValue.values[name],
+              onChange: (e) => contextValue.setValues(
+                { [name]: e?.target?.value },
+                position.includes("fixed") && !isAdvanced
+              ),
+              isAdvanced
+            }) : children
+          ]
+        }
+      ),
+      typeof renderValue === "function" && name && isAdvanced && renderValue({
+        ...contextValue,
+        value: name ? contextValue.values[name] : null,
+        setValue: name ? (value) => contextValue.setValues(
+          { [name]: value },
+          position.includes("fixed") && !isAdvanced
+        ) : () => {
+        },
+        isAdvanced
+      })
+    ] }),
+    [children, contextValue.value, contextValue.values]
+  );
+  React__default.default.useEffect(() => {
+    if (position.includes("fixed")) {
+      contextValue.setFixedFilterFields((prev) => {
+        const newFields = filterFields?.filter((field) => !prev.includes(field)) || [];
+        return [...prev, ...newFields];
+      });
+    }
+    if (position.includes("advanced")) {
+      contextValue.setAdvancedFilterFields((prev) => {
+        const newFields = filterFields?.filter((field) => !prev.includes(field)) || [];
+        return [...prev, ...newFields];
+      });
+    }
+  }, [contextValue.setFixedFilterFields, contextValue.setAdvancedFilterFields, filterFields]);
+  React__default.default.useEffect(() => {
+    registerFilter({ id: uniqueId.current, position, element, groupId });
+    return () => {
+      unregisterFilter(uniqueId.current);
+    };
+  }, [
+    position,
+    element,
+    registerFilter,
+    unregisterFilter,
+    contextValue.value,
+    contextValue.values
+  ]);
+  return null;
+}
+
+exports.Filter = Filter;
+exports.FilterItem = FilterItem;
+//# sourceMappingURL=filter.js.map
+//# sourceMappingURL=filter.js.map

package/dist/common/interactive/filter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/filter.tsx"],"names":["createContext","useContext","useState","useRef","useEffect","React","useMemo","jsxs","cn","jsx","cloneElement","Button","FilterOutlinedIcon16","Dialog","DialogContent","DialogHeader","DialogTitle","DialogFooter","useCallback","Fragment"],"mappings":"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","file":"filter.js","sourcesContent":["import React, {\n  useState,\n  createContext,\n  useContext,\n  useMemo,\n  useRef,\n  cloneElement,\n  ReactElement,\n  useEffect,\n  Dispatch,\n  SetStateAction,\n  useCallback,\n} from 'react';\nimport { Button } from '@/components/button';\nimport {\n  Dialog,\n  DialogContent,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n} from '@/components/dialog';\nimport { cn } from '@/lib/utils';\nimport { FilterOutlinedIcon16 } from '@/assets/Icon';\nimport { Sheet, SheetContent, SheetFooter, SheetHeader, SheetTitle } from '@/components/sheet';\n\n// Define types\ntype FilterPosition = 'fixed' | 'advanced';\n\ninterface FilterElementType {\n  isAdvanced?: boolean;\n}\n\ninterface FilterItemData {\n  id: string;\n  position: FilterPosition[];\n  element: (props: FilterElementType) => React.ReactNode;\n  groupId?: string;\n}\n\ninterface FilterContextType {\n  advancedFiltersOpen: boolean;\n  setAdvancedFiltersOpen: (open: boolean) => void;\n  registerFilter: (filterItem: FilterItemData) => void;\n  unregisterFilter: (id: string) => void;\n  // Thêm các trường để quản lý trạng thái filter\n  values: Record<string, any>;\n  setValues: (values: Record<string, any>, apply?: boolean) => void;\n  value?: any;\n  setValue?: (values: any) => void;\n  setFixedFilterFields: Dispatch<SetStateAction<string[]>>;\n  setAdvancedFilterFields: Dispatch<SetStateAction<string[]>>;\n}\n\ninterface FilterProps {\n  children:\n    | React.ReactElement\n    | React.ReactElement[]\n    | ((context: FilterContextType) => React.ReactNode);\n  className?: string;\n  onApply?: (filters: Record<string, any>) => void;\n  initFilters?: Record<string, any>;\n  filters?: Record<string, any>;\n  buttonFilter?: React.ReactElement | ((context: any) => React.ReactNode);\n  disableAutoApply?: boolean;\n}\n\ninterface FilterItemChildrenProps extends FilterContextType {\n  isAdvanced?: boolean;\n}\n\ninterface FilterItemProps {\n  position: FilterPosition[];\n  children: React.ReactElement | ((context: FilterItemChildrenProps) => React.ReactNode);\n  label?: string;\n  className?: string;\n  id?: string;\n  name?: string;\n  filterFields: string[];\n  layout?: 'vertical' | 'horizontal';\n  renderValue?: (context: FilterItemChildrenProps) => React.ReactNode;\n  groupId?: string;\n}\n\n// Create context\nconst FilterContext = createContext<FilterContextType | null>(null);\n\nconst useFilterContext = () => {\n  const context = useContext(FilterContext);\n  if (!context) {\n    throw new Error('Filter components must be used within a Filter component');\n  }\n  return context;\n};\n\n// Main Filter component\nexport function Filter({\n  children,\n  className,\n  onApply,\n  initFilters,\n  filters,\n  buttonFilter,\n  disableAutoApply,\n}: FilterProps) {\n  const [advancedFiltersOpen, setAdvancedFiltersOpen] = useState(false);\n  const [filterItems, setFilterItems] = useState<FilterItemData[]>([]);\n  // Thêm state để lưu trạng thái filter\n  const [filterValues, setFilterValues] = useState<Record<string, any>>({});\n  // Thêm state để lưu trạng thái filter trong advanced mode\n  const [advancedFilterValues, setAdvancedFilterValues] = useState<Record<string, any>>({});\n  const [initialValues, setInitialValues] = useState<Record<string, any>>({});\n  const [fixedFilterFields, setFixedFilterFields] = useState<string[]>([]);\n  const [advancedFilterFields, setAdvancedFilterFields] = useState<string[]>([]);\n\n  const mountedRef = useRef(false);\n  const timeoutRef = useRef<any>(null);\n\n  useEffect(() => {\n    setFilterValues({ ...initFilters });\n    setInitialValues({ ...initFilters });\n  }, []);\n\n  useEffect(() => {\n    setFilterValues({ ...filters });\n  }, [filters]);\n\n  // Đồng bộ hóa advancedFilterValues khi mở dialog\n  useEffect(() => {\n    if (advancedFiltersOpen) {\n      setAdvancedFilterValues({ ...filterValues });\n    }\n  }, [advancedFiltersOpen, filterValues]);\n\n  // Các hàm xử lý filter\n  const setValues = (values: Record<string, any>, apply?: boolean) => {\n    // Nếu đang ở advanced mode, chỉ cập nhật advancedFilterValues\n    if (advancedFiltersOpen) {\n      setAdvancedFilterValues((prev) => ({ ...prev, ...values }));\n      return;\n    }\n\n    // Cập nhật filterValues cho fixed mode\n    const newValues = { ...filterValues, ...values };\n    setFilterValues(newValues);\n\n    // Nếu filter là fixed, tự động apply\n    if (apply && !disableAutoApply) {\n      if (timeoutRef?.current) clearTimeout(timeoutRef.current);\n      timeoutRef.current = setTimeout(() => {\n        onApply?.(newValues);\n      }, 500);\n    }\n  };\n\n  // Reset chỉ các filter trong advanced mode\n  const resetAdvancedFilters = () => {\n    setAdvancedFilterValues((prev) => {\n      const newValues = { ...prev };\n      advancedFilterFields.forEach((field) => {\n        newValues[field] = undefined;\n      });\n      return newValues;\n    });\n  };\n\n  const resetFilters = () => {\n    setFilterValues({ ...initialValues });\n    onApply?.({ ...initialValues });\n    setAdvancedFiltersOpen(false);\n  };\n\n  // Register a filter item\n  const registerFilter = (filterItem: FilterItemData) => {\n    setFilterItems((prev) => {\n      // Check if this ID already exists\n      const exists = prev.some((item) => item.id === filterItem.id);\n      if (exists) {\n        // Update existing item\n        return prev.map((item) => (item.id === filterItem.id ? { ...item, ...filterItem } : item));\n      } else {\n        // Add new item\n        return [...prev, { ...filterItem }];\n      }\n    });\n  };\n\n  // Unregister a filter item\n  const unregisterFilter = (id: string) => {\n    setFilterItems((prev) => prev.filter((item) => item.id !== id));\n  };\n\n  // Clear filters on unmount\n  React.useEffect(() => {\n    if (!mountedRef.current) {\n      mountedRef.current = true;\n      return () => {\n        setFilterItems([]);\n      };\n    }\n  }, []);\n\n  const fixedFilters = useMemo(\n    () => filterItems.filter((item) => item.position.includes('fixed')).map((item) => item.element),\n    [filterItems],\n  );\n\n  const advancedFilters = useMemo(\n    () => filterItems.filter((item) => item.position.includes('advanced')),\n    [filterItems],\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      advancedFiltersOpen,\n      setAdvancedFiltersOpen,\n      registerFilter,\n      unregisterFilter,\n      // values: filterValues,\n      setValues,\n      values: advancedFiltersOpen ? advancedFilterValues : filterValues,\n      setFixedFilterFields,\n      setAdvancedFilterFields,\n    }),\n    [advancedFiltersOpen, filterValues, advancedFilterValues],\n  );\n\n  const hasAdvancedFilters = advancedFilters.length > 0;\n\n  // Xử lý bỏ chọn tất cả các filter trong advanced mode\n  const handleReset = () => {\n    resetAdvancedFilters();\n  };\n\n  // Áp dụng các filter từ advanced mode\n  const handleApply = () => {\n    // Filter advancedFilterValues to include only fields in advancedFilterFields\n    const filteredAdvancedValues = Object.keys(advancedFilterValues)\n      .filter((key) => advancedFilterFields.includes(key))\n      .reduce(\n        (acc, key) => {\n          acc[key] = advancedFilterValues[key];\n          return acc;\n        },\n        {} as Record<string, any>,\n      );\n\n    // Merge filtered advanced values with filterValues\n    const newValues = { ...filterValues, ...filteredAdvancedValues };\n\n    // Update filterValues and apply\n    setFilterValues(newValues);\n    onApply?.(newValues);\n    setAdvancedFiltersOpen(false);\n  };\n\n  // Xử lý đóng dialog mà không áp dụng thay đổi\n  const handleCloseDialog = (open: boolean) => {\n    if (!open) {\n      setAdvancedFiltersOpen(false);\n    }\n  };\n\n  return (\n    <FilterContext.Provider value={contextValue}>\n      <div className={cn('flex flex-wrap items-center gap-4', className)}>\n        {/* Render children to register filters */}\n        {typeof children === 'function' ? children(contextValue) : children}\n\n        {/* Display fixed filters */}\n        {fixedFilters?.map((filter, index) => (\n          <React.Fragment key={`fixed-filter-${index}`}>\n            {filter({ isAdvanced: false })}\n          </React.Fragment>\n        ))}\n\n        {typeof buttonFilter === 'function'\n          ? buttonFilter({\n              onApply: handleApply,\n            })\n          : buttonFilter\n            ? cloneElement(buttonFilter, {\n                onClick: handleApply,\n              })\n            : null}\n\n        {/* Advanced filters button */}\n        {hasAdvancedFilters && (\n          <Button variant=\"outline\" onClick={() => setAdvancedFiltersOpen(true)} className=\"w-12\">\n            <div className=\"relative\">\n              <FilterOutlinedIcon16 className=\"!size-6\" />\n              {Object.keys(advancedFilterValues)\n                .filter((key) => advancedFilterFields.includes(key))\n                .some((key) => Boolean(advancedFilterValues[key])) && (\n                <div className=\"border-background bg-destructive absolute -right-1 -top-1 size-3 rounded-full border-2\" />\n              )}\n            </div>\n          </Button>\n        )}\n      </div>\n\n      {/* Advanced filters dialog */}\n      <Dialog open={advancedFiltersOpen} onOpenChange={handleCloseDialog}>\n        <DialogContent size=\"3xl\" className=\"flex flex-col gap-0 overflow-hidden md:max-h-[80vh]\">\n          <DialogHeader className=\"px-5\">\n            <DialogTitle className=\"!text-t18sb text-start\">Lọc khác</DialogTitle>\n          </DialogHeader>\n\n          {/*<div className=\"flex-1 space-y-6 overflow-auto p-5\">*/}\n          {/*{advancedFilters?.map((filter, index) => (*/}\n          {/*  <React.Fragment key={`advanced-filter-${index}`}>*/}\n          {/*    {filter({ isAdvanced: true })}*/}\n          {/*  </React.Fragment>*/}\n          {/*))}*/}\n          <AdvancedFilterGroup filterItems={advancedFilters} />\n          {/*</div>*/}\n\n          <DialogFooter className=\"border-border justify-end border-t px-5 pt-5\">\n            <Button variant=\"plain\" onClick={handleReset}>\n              Xóa lọc\n            </Button>\n            <Button className=\"w-32\" onClick={handleApply}>\n              Áp dụng\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n    </FilterContext.Provider>\n  );\n}\n\ninterface AdvancedFilterGroupProps {\n  filterItems: FilterItemData[];\n}\n\nconst AdvancedFilterGroup: React.FC<AdvancedFilterGroupProps> = ({ filterItems }) => {\n  const advancedItems = filterItems.filter((item) => item.position.includes('advanced'));\n  const renderedGroups = new Set<string>(); // lưu các groupId đã render\n\n  const elements: React.ReactNode[] = [];\n\n  for (let i = 0; i < advancedItems.length; i++) {\n    const item = advancedItems[i] as FilterItemData;\n\n    // Nếu đã render nhóm này rồi → bỏ qua\n    if (item.groupId && renderedGroups.has(item.groupId)) continue;\n\n    // Nếu item có groupId → render nguyên nhóm\n    if (item.groupId) {\n      const groupItems = advancedItems.filter((f) => f.groupId === item.groupId);\n      renderedGroups.add(item.groupId);\n\n      const colCount = Math.min(groupItems.length, 4);\n\n      elements.push(\n        <div\n          key={`filter-group-${item.groupId}`}\n          className={cn(`grid gap-8 grid-cols-${colCount}`)}\n        >\n          {groupItems.map((groupItem, index) => (\n            <React.Fragment key={`advanced-filter-${item.groupId}-${index}`}>\n              {groupItem.element({ isAdvanced: true })}\n            </React.Fragment>\n          ))}\n        </div>,\n      );\n    } else {\n      // Không có groupId → render bình thường\n      elements.push(\n        <React.Fragment key={`advanced-filter-${i}`}>\n          {item.element({ isAdvanced: true })}\n        </React.Fragment>,\n      );\n    }\n  }\n\n  return <div className=\"flex-1 space-y-6 overflow-auto p-5\">{elements}</div>;\n};\n\n// FilterItem component\nexport function FilterItem({\n  position,\n  children,\n  label,\n  className,\n  id,\n  name,\n  filterFields,\n  layout = 'vertical',\n  renderValue,\n  groupId,\n}: FilterItemProps) {\n  const contextValue = useFilterContext();\n  const { registerFilter, unregisterFilter } = contextValue;\n  const uniqueId = useRef(id || `filter-${Math.random().toString(36).substr(2, 9)}`);\n\n  // Create the element once\n  const element = useCallback(\n    ({ isAdvanced }: FilterElementType) => (\n      <>\n        <div\n          className={cn(\n            'filter-item',\n            className,\n            layout === 'vertical' && isAdvanced && 'w-full',\n            layout === 'horizontal' && isAdvanced && 'grid w-full grid-cols-2 items-center',\n          )}\n        >\n          {isAdvanced && label && <div className=\"text-t16m text-foreground mb-2\">{label}</div>}\n          {typeof children === 'function'\n            ? children({\n                ...contextValue,\n                value: name ? contextValue.values[name] : null,\n                setValue: name\n                  ? (value?: any) =>\n                      contextValue.setValues(\n                        { [name]: value },\n                        position.includes('fixed') && !isAdvanced,\n                      )\n                  : () => {},\n                isAdvanced,\n              })\n            : name\n              ? cloneElement(children as ReactElement, {\n                  value: contextValue.values[name],\n                  onChange: (e: any) =>\n                    contextValue.setValues(\n                      { [name]: e?.target?.value },\n                      position.includes('fixed') && !isAdvanced,\n                    ),\n                  isAdvanced,\n                })\n              : children}\n        </div>\n        {typeof renderValue === 'function' &&\n          name &&\n          isAdvanced &&\n          renderValue({\n            ...contextValue,\n            value: name ? contextValue.values[name] : null,\n            setValue: name\n              ? (value?: any) =>\n                  contextValue.setValues(\n                    { [name]: value },\n                    position.includes('fixed') && !isAdvanced,\n                  )\n              : () => {},\n            isAdvanced,\n          })}\n      </>\n    ),\n    [children, contextValue.value, contextValue.values],\n  );\n\n  React.useEffect(() => {\n    if (position.includes('fixed')) {\n      contextValue.setFixedFilterFields((prev: string[]) => {\n        const newFields = filterFields?.filter((field) => !prev.includes(field)) || [];\n        return [...prev, ...newFields];\n      });\n    }\n\n    if (position.includes('advanced')) {\n      contextValue.setAdvancedFilterFields((prev: string[]) => {\n        const newFields = filterFields?.filter((field) => !prev.includes(field)) || [];\n        return [...prev, ...newFields];\n      });\n    }\n  }, [contextValue.setFixedFilterFields, contextValue.setAdvancedFilterFields, filterFields]);\n\n  // Register on mount, unregister on unmount\n  React.useEffect(() => {\n    registerFilter({ id: uniqueId.current, position, element, groupId });\n\n    return () => {\n      unregisterFilter(uniqueId.current);\n    };\n  }, [\n    position,\n    element,\n    registerFilter,\n    unregisterFilter,\n    contextValue.value,\n    contextValue.values,\n  ]);\n\n  // This component doesn't render anything directly\n  return null;\n}\n"]}

package/dist/common/interactive/filter.mjs

@@ -0,0 +1,280 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useState, useRef, useEffect, useMemo, cloneElement, useCallback, useContext } from 'react';
+import { Button } from '@/components/button';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/dialog';
+import { cn } from '@/lib/utils';
+import { FilterOutlinedIcon16 } from '@/assets/Icon';
+
+const FilterContext = createContext(null);
+const useFilterContext = () => {
+  const context = useContext(FilterContext);
+  if (!context) {
+    throw new Error("Filter components must be used within a Filter component");
+  }
+  return context;
+};
+function Filter({
+  children,
+  className,
+  onApply,
+  initFilters,
+  filters,
+  buttonFilter,
+  disableAutoApply
+}) {
+  const [advancedFiltersOpen, setAdvancedFiltersOpen] = useState(false);
+  const [filterItems, setFilterItems] = useState([]);
+  const [filterValues, setFilterValues] = useState({});
+  const [advancedFilterValues, setAdvancedFilterValues] = useState({});
+  const [initialValues, setInitialValues] = useState({});
+  const [fixedFilterFields, setFixedFilterFields] = useState([]);
+  const [advancedFilterFields, setAdvancedFilterFields] = useState([]);
+  const mountedRef = useRef(false);
+  const timeoutRef = useRef(null);
+  useEffect(() => {
+    setFilterValues({ ...initFilters });
+    setInitialValues({ ...initFilters });
+  }, []);
+  useEffect(() => {
+    setFilterValues({ ...filters });
+  }, [filters]);
+  useEffect(() => {
+    if (advancedFiltersOpen) {
+      setAdvancedFilterValues({ ...filterValues });
+    }
+  }, [advancedFiltersOpen, filterValues]);
+  const setValues = (values, apply) => {
+    if (advancedFiltersOpen) {
+      setAdvancedFilterValues((prev) => ({ ...prev, ...values }));
+      return;
+    }
+    const newValues = { ...filterValues, ...values };
+    setFilterValues(newValues);
+    if (apply && !disableAutoApply) {
+      if (timeoutRef?.current) clearTimeout(timeoutRef.current);
+      timeoutRef.current = setTimeout(() => {
+        onApply?.(newValues);
+      }, 500);
+    }
+  };
+  const resetAdvancedFilters = () => {
+    setAdvancedFilterValues((prev) => {
+      const newValues = { ...prev };
+      advancedFilterFields.forEach((field) => {
+        newValues[field] = void 0;
+      });
+      return newValues;
+    });
+  };
+  const registerFilter = (filterItem) => {
+    setFilterItems((prev) => {
+      const exists = prev.some((item) => item.id === filterItem.id);
+      if (exists) {
+        return prev.map((item) => item.id === filterItem.id ? { ...item, ...filterItem } : item);
+      } else {
+        return [...prev, { ...filterItem }];
+      }
+    });
+  };
+  const unregisterFilter = (id) => {
+    setFilterItems((prev) => prev.filter((item) => item.id !== id));
+  };
+  React.useEffect(() => {
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return () => {
+        setFilterItems([]);
+      };
+    }
+  }, []);
+  const fixedFilters = useMemo(
+    () => filterItems.filter((item) => item.position.includes("fixed")).map((item) => item.element),
+    [filterItems]
+  );
+  const advancedFilters = useMemo(
+    () => filterItems.filter((item) => item.position.includes("advanced")),
+    [filterItems]
+  );
+  const contextValue = useMemo(
+    () => ({
+      advancedFiltersOpen,
+      setAdvancedFiltersOpen,
+      registerFilter,
+      unregisterFilter,
+      // values: filterValues,
+      setValues,
+      values: advancedFiltersOpen ? advancedFilterValues : filterValues,
+      setFixedFilterFields,
+      setAdvancedFilterFields
+    }),
+    [advancedFiltersOpen, filterValues, advancedFilterValues]
+  );
+  const hasAdvancedFilters = advancedFilters.length > 0;
+  const handleReset = () => {
+    resetAdvancedFilters();
+  };
+  const handleApply = () => {
+    const filteredAdvancedValues = Object.keys(advancedFilterValues).filter((key) => advancedFilterFields.includes(key)).reduce(
+      (acc, key) => {
+        acc[key] = advancedFilterValues[key];
+        return acc;
+      },
+      {}
+    );
+    const newValues = { ...filterValues, ...filteredAdvancedValues };
+    setFilterValues(newValues);
+    onApply?.(newValues);
+    setAdvancedFiltersOpen(false);
+  };
+  const handleCloseDialog = (open) => {
+    if (!open) {
+      setAdvancedFiltersOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(FilterContext.Provider, { value: contextValue, children: [
+    /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-4", className), children: [
+      typeof children === "function" ? children(contextValue) : children,
+      fixedFilters?.map((filter, index) => /* @__PURE__ */ jsx(React.Fragment, { children: filter({ isAdvanced: false }) }, `fixed-filter-${index}`)),
+      typeof buttonFilter === "function" ? buttonFilter({
+        onApply: handleApply
+      }) : buttonFilter ? cloneElement(buttonFilter, {
+        onClick: handleApply
+      }) : null,
+      hasAdvancedFilters && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: () => setAdvancedFiltersOpen(true), className: "w-12", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(FilterOutlinedIcon16, { className: "!size-6" }),
+        Object.keys(advancedFilterValues).filter((key) => advancedFilterFields.includes(key)).some((key) => Boolean(advancedFilterValues[key])) && /* @__PURE__ */ jsx("div", { className: "border-background bg-destructive absolute -right-1 -top-1 size-3 rounded-full border-2" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(Dialog, { open: advancedFiltersOpen, onOpenChange: handleCloseDialog, children: /* @__PURE__ */ jsxs(DialogContent, { size: "3xl", className: "flex flex-col gap-0 overflow-hidden md:max-h-[80vh]", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { className: "px-5", children: /* @__PURE__ */ jsx(DialogTitle, { className: "!text-t18sb text-start", children: "L\u1ECDc kh\xE1c" }) }),
+      /* @__PURE__ */ jsx(AdvancedFilterGroup, { filterItems: advancedFilters }),
+      /* @__PURE__ */ jsxs(DialogFooter, { className: "border-border justify-end border-t px-5 pt-5", children: [
+        /* @__PURE__ */ jsx(Button, { variant: "plain", onClick: handleReset, children: "X\xF3a l\u1ECDc" }),
+        /* @__PURE__ */ jsx(Button, { className: "w-32", onClick: handleApply, children: "\xC1p d\u1EE5ng" })
+      ] })
+    ] }) })
+  ] });
+}
+const AdvancedFilterGroup = ({ filterItems }) => {
+  const advancedItems = filterItems.filter((item) => item.position.includes("advanced"));
+  const renderedGroups = /* @__PURE__ */ new Set();
+  const elements = [];
+  for (let i = 0; i < advancedItems.length; i++) {
+    const item = advancedItems[i];
+    if (item.groupId && renderedGroups.has(item.groupId)) continue;
+    if (item.groupId) {
+      const groupItems = advancedItems.filter((f) => f.groupId === item.groupId);
+      renderedGroups.add(item.groupId);
+      const colCount = Math.min(groupItems.length, 4);
+      elements.push(
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(`grid gap-8 grid-cols-${colCount}`),
+            children: groupItems.map((groupItem, index) => /* @__PURE__ */ jsx(React.Fragment, { children: groupItem.element({ isAdvanced: true }) }, `advanced-filter-${item.groupId}-${index}`))
+          },
+          `filter-group-${item.groupId}`
+        )
+      );
+    } else {
+      elements.push(
+        /* @__PURE__ */ jsx(React.Fragment, { children: item.element({ isAdvanced: true }) }, `advanced-filter-${i}`)
+      );
+    }
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-6 overflow-auto p-5", children: elements });
+};
+function FilterItem({
+  position,
+  children,
+  label,
+  className,
+  id,
+  name,
+  filterFields,
+  layout = "vertical",
+  renderValue,
+  groupId
+}) {
+  const contextValue = useFilterContext();
+  const { registerFilter, unregisterFilter } = contextValue;
+  const uniqueId = useRef(id || `filter-${Math.random().toString(36).substr(2, 9)}`);
+  const element = useCallback(
+    ({ isAdvanced }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "filter-item",
+            className,
+            layout === "vertical" && isAdvanced && "w-full",
+            layout === "horizontal" && isAdvanced && "grid w-full grid-cols-2 items-center"
+          ),
+          children: [
+            isAdvanced && label && /* @__PURE__ */ jsx("div", { className: "text-t16m text-foreground mb-2", children: label }),
+            typeof children === "function" ? children({
+              ...contextValue,
+              value: name ? contextValue.values[name] : null,
+              setValue: name ? (value) => contextValue.setValues(
+                { [name]: value },
+                position.includes("fixed") && !isAdvanced
+              ) : () => {
+              },
+              isAdvanced
+            }) : name ? cloneElement(children, {
+              value: contextValue.values[name],
+              onChange: (e) => contextValue.setValues(
+                { [name]: e?.target?.value },
+                position.includes("fixed") && !isAdvanced
+              ),
+              isAdvanced
+            }) : children
+          ]
+        }
+      ),
+      typeof renderValue === "function" && name && isAdvanced && renderValue({
+        ...contextValue,
+        value: name ? contextValue.values[name] : null,
+        setValue: name ? (value) => contextValue.setValues(
+          { [name]: value },
+          position.includes("fixed") && !isAdvanced
+        ) : () => {
+        },
+        isAdvanced
+      })
+    ] }),
+    [children, contextValue.value, contextValue.values]
+  );
+  React.useEffect(() => {
+    if (position.includes("fixed")) {
+      contextValue.setFixedFilterFields((prev) => {
+        const newFields = filterFields?.filter((field) => !prev.includes(field)) || [];
+        return [...prev, ...newFields];
+      });
+    }
+    if (position.includes("advanced")) {
+      contextValue.setAdvancedFilterFields((prev) => {
+        const newFields = filterFields?.filter((field) => !prev.includes(field)) || [];
+        return [...prev, ...newFields];
+      });
+    }
+  }, [contextValue.setFixedFilterFields, contextValue.setAdvancedFilterFields, filterFields]);
+  React.useEffect(() => {
+    registerFilter({ id: uniqueId.current, position, element, groupId });
+    return () => {
+      unregisterFilter(uniqueId.current);
+    };
+  }, [
+    position,
+    element,
+    registerFilter,
+    unregisterFilter,
+    contextValue.value,
+    contextValue.values
+  ]);
+  return null;
+}
+
+export { Filter, FilterItem };
+//# sourceMappingURL=filter.mjs.map
+//# sourceMappingURL=filter.mjs.map