shad-m 1.0.2 → 1.0.3

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/filter.tsx"],"names":[],"mappings":"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","file":"filter.mjs","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/index.js

@@ -0,0 +1,235 @@
+'use strict';
+
+var datePicker = require('./date-picker');
+var dateInput = require('./date-input');
+var dateRangeInput = require('./date-range-input');
+var dateTimePicker = require('./date-time-picker');
+var timePicker = require('./time-picker');
+var dateField = require('./date-field');
+var dialogWrapper = require('./dialog-wrapper');
+var alertDialogWrapper = require('./alert-dialog-wrapper');
+var otpDialog = require('./otp-dialog');
+var popoverWrapper = require('./popover-wrapper');
+var list = require('./list');
+var pressable = require('./pressable');
+var sheetWrapper = require('./sheet-wrapper');
+var select = require('./select');
+var selectWithApi = require('./select-with-api');
+var autocomplete = require('./autocomplete');
+var copyTooltip = require('./copy-tooltip');
+var selectRange = require('./select-range');
+var selectLevel = require('./select-level');
+var selectChip = require('./select-chip');
+var pagination = require('./pagination');
+var table = require('./table');
+
+
+
+Object.defineProperty(exports, "DatePicker", {
+  enumerable: true,
+  get: function () { return datePicker.DatePicker; }
+});
+Object.defineProperty(exports, "DateInput", {
+  enumerable: true,
+  get: function () { return dateInput.DateInput; }
+});
+Object.defineProperty(exports, "DateRangeInput", {
+  enumerable: true,
+  get: function () { return dateRangeInput.DateRangeInput; }
+});
+Object.defineProperty(exports, "DateTimePicker", {
+  enumerable: true,
+  get: function () { return dateTimePicker.DateTimePicker; }
+});
+Object.defineProperty(exports, "TimePicker", {
+  enumerable: true,
+  get: function () { return timePicker.TimePicker; }
+});
+Object.defineProperty(exports, "DateField", {
+  enumerable: true,
+  get: function () { return dateField.DateField; }
+});
+Object.defineProperty(exports, "DialogWrapper", {
+  enumerable: true,
+  get: function () { return dialogWrapper.DialogWrapper; }
+});
+Object.defineProperty(exports, "AlertDialogWrapper", {
+  enumerable: true,
+  get: function () { return alertDialogWrapper.AlertDialogWrapper; }
+});
+Object.defineProperty(exports, "OtpDialog", {
+  enumerable: true,
+  get: function () { return otpDialog.OtpDialog; }
+});
+Object.defineProperty(exports, "PopoverWrapper", {
+  enumerable: true,
+  get: function () { return popoverWrapper.PopoverWrapper; }
+});
+Object.defineProperty(exports, "List", {
+  enumerable: true,
+  get: function () { return list.List; }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () { return list.ListItem; }
+});
+Object.defineProperty(exports, "ListItemLabel", {
+  enumerable: true,
+  get: function () { return list.ListItemLabel; }
+});
+Object.defineProperty(exports, "ListItemValue", {
+  enumerable: true,
+  get: function () { return list.ListItemValue; }
+});
+Object.defineProperty(exports, "ListItemValueText", {
+  enumerable: true,
+  get: function () { return list.ListItemValueText; }
+});
+Object.defineProperty(exports, "Pressable", {
+  enumerable: true,
+  get: function () { return pressable.Pressable; }
+});
+Object.defineProperty(exports, "SheetWrapper", {
+  enumerable: true,
+  get: function () { return sheetWrapper.SheetWrapper; }
+});
+Object.defineProperty(exports, "Select", {
+  enumerable: true,
+  get: function () { return select.Select; }
+});
+Object.defineProperty(exports, "SelectAnchor", {
+  enumerable: true,
+  get: function () { return select.SelectAnchor; }
+});
+Object.defineProperty(exports, "SelectBody", {
+  enumerable: true,
+  get: function () { return select.SelectBody; }
+});
+Object.defineProperty(exports, "SelectContent", {
+  enumerable: true,
+  get: function () { return select.SelectContent; }
+});
+Object.defineProperty(exports, "SelectContentAutoLayout", {
+  enumerable: true,
+  get: function () { return select.SelectContentAutoLayout; }
+});
+Object.defineProperty(exports, "SelectContentGroupAutoLayout", {
+  enumerable: true,
+  get: function () { return select.SelectContentGroupAutoLayout; }
+});
+Object.defineProperty(exports, "SelectEmptyState", {
+  enumerable: true,
+  get: function () { return select.SelectEmptyState; }
+});
+Object.defineProperty(exports, "SelectGroup", {
+  enumerable: true,
+  get: function () { return select.SelectGroup; }
+});
+Object.defineProperty(exports, "SelectGroupTitle", {
+  enumerable: true,
+  get: function () { return select.SelectGroupTitle; }
+});
+Object.defineProperty(exports, "SelectInputTrigger", {
+  enumerable: true,
+  get: function () { return select.SelectInputTrigger; }
+});
+Object.defineProperty(exports, "SelectItem", {
+  enumerable: true,
+  get: function () { return select.SelectItem; }
+});
+Object.defineProperty(exports, "SelectItemBase", {
+  enumerable: true,
+  get: function () { return select.SelectItemBase; }
+});
+Object.defineProperty(exports, "SelectList", {
+  enumerable: true,
+  get: function () { return select.SelectList; }
+});
+Object.defineProperty(exports, "SelectLoading", {
+  enumerable: true,
+  get: function () { return select.SelectLoading; }
+});
+Object.defineProperty(exports, "SelectSearch", {
+  enumerable: true,
+  get: function () { return select.SelectSearch; }
+});
+Object.defineProperty(exports, "SelectSeparator", {
+  enumerable: true,
+  get: function () { return select.SelectSeparator; }
+});
+Object.defineProperty(exports, "SelectTrigger", {
+  enumerable: true,
+  get: function () { return select.SelectTrigger; }
+});
+Object.defineProperty(exports, "SelectValue", {
+  enumerable: true,
+  get: function () { return select.SelectValue; }
+});
+Object.defineProperty(exports, "useSelectContext", {
+  enumerable: true,
+  get: function () { return select.useSelectContext; }
+});
+Object.defineProperty(exports, "SelectWithApiSearch", {
+  enumerable: true,
+  get: function () { return selectWithApi.SelectWithApiSearch; }
+});
+Object.defineProperty(exports, "SelectWithApiSearchGroup", {
+  enumerable: true,
+  get: function () { return selectWithApi.SelectWithApiSearchGroup; }
+});
+Object.defineProperty(exports, "useApiSearch", {
+  enumerable: true,
+  get: function () { return selectWithApi.useApiSearch; }
+});
+Object.defineProperty(exports, "AutoComplete", {
+  enumerable: true,
+  get: function () { return autocomplete.AutoComplete; }
+});
+Object.defineProperty(exports, "CopyTooltip", {
+  enumerable: true,
+  get: function () { return copyTooltip.CopyTooltip; }
+});
+Object.defineProperty(exports, "DOTS", {
+  enumerable: true,
+  get: function () { return pagination.DOTS; }
+});
+Object.defineProperty(exports, "Pagination", {
+  enumerable: true,
+  get: function () { return pagination.Pagination; }
+});
+Object.defineProperty(exports, "usePagination", {
+  enumerable: true,
+  get: function () { return pagination.usePagination; }
+});
+Object.defineProperty(exports, "EnhancedTable", {
+  enumerable: true,
+  get: function () { return table.EnhancedTable; }
+});
+Object.defineProperty(exports, "ListingTable", {
+  enumerable: true,
+  get: function () { return table.ListingTable; }
+});
+Object.defineProperty(exports, "TablePagination", {
+  enumerable: true,
+  get: function () { return table.TablePagination; }
+});
+Object.keys(selectRange).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return selectRange[k]; }
+  });
+});
+Object.keys(selectLevel).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return selectLevel[k]; }
+  });
+});
+Object.keys(selectChip).forEach(function (k) {
+  if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+    enumerable: true,
+    get: function () { return selectChip[k]; }
+  });
+});
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js","sourcesContent":[]}

package/dist/common/interactive/index.mjs

@@ -0,0 +1,24 @@
+export { DatePicker } from './date-picker';
+export { DateInput } from './date-input';
+export { DateRangeInput } from './date-range-input';
+export { DateTimePicker } from './date-time-picker';
+export { TimePicker } from './time-picker';
+export { DateField } from './date-field';
+export { DialogWrapper } from './dialog-wrapper';
+export { AlertDialogWrapper } from './alert-dialog-wrapper';
+export { OtpDialog } from './otp-dialog';
+export { PopoverWrapper } from './popover-wrapper';
+export { List, ListItem, ListItemLabel, ListItemValue, ListItemValueText } from './list';
+export { Pressable } from './pressable';
+export { SheetWrapper } from './sheet-wrapper';
+export { Select, SelectAnchor, SelectBody, SelectContent, SelectContentAutoLayout, SelectContentGroupAutoLayout, SelectEmptyState, SelectGroup, SelectGroupTitle, SelectInputTrigger, SelectItem, SelectItemBase, SelectList, SelectLoading, SelectSearch, SelectSeparator, SelectTrigger, SelectValue, useSelectContext } from './select';
+export { SelectWithApiSearch, SelectWithApiSearchGroup, useApiSearch } from './select-with-api';
+export { AutoComplete } from './autocomplete';
+export { CopyTooltip } from './copy-tooltip';
+export * from './select-range';
+export * from './select-level';
+export * from './select-chip';
+export { DOTS, Pagination, usePagination } from './pagination';
+export { EnhancedTable, ListingTable, TablePagination } from './table';
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/common/interactive/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.mjs","sourcesContent":[]}