shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/dialog-wrapper.js

@@ -0,0 +1,124 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useDevice = require('@/hooks/useDevice');
+var utils = require('@/lib/utils');
+var dialog = require('../../components/dialog');
+var scrollArea = require('../../components/scroll-area');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+const DialogWrapper = React__namespace.forwardRef(
+  ({
+    // Trigger props
+    trigger,
+    triggerAsChild = false,
+    triggerClassName,
+    // Header props
+    showHeader = true,
+    title,
+    titleClassName,
+    description,
+    descriptionClassName,
+    headerClassName,
+    headerContent,
+    // Footer props
+    showFooter = false,
+    footerContent,
+    footerClassName,
+    // Content props
+    children,
+    contentClassName,
+    childrenClassName,
+    // Dialog behavior props
+    open,
+    onOpenChange,
+    defaultOpen,
+    modal,
+    // ScrollArea props
+    autoHeight = true,
+    // Close button props
+    hasCloseButton = true,
+    // Size variants
+    size = "lg",
+    // Tracking props
+    trackingNameView,
+    trackingNameClose,
+    trackingData,
+    trackingIndex,
+    // Other props
+    className,
+    ...props
+  }, ref) => {
+    const { isDesktop } = useDevice.useDevice();
+    const effectiveAutoHeight = autoHeight && isDesktop;
+    const contentComponent = effectiveAutoHeight ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("h-full overflow-y-auto px-4 py-2 pb-4", childrenClassName), children }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-full min-h-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(scrollArea.ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils.cn("h-full px-4", childrenClassName), children }) }) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(dialog.Dialog, { open, onOpenChange, defaultOpen, modal, children: [
+      trigger && /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTrigger, { asChild: triggerAsChild, className: triggerClassName, children: trigger }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        dialog.DialogContent,
+        {
+          ref,
+          hasCloseButton,
+          size,
+          trackingNameView,
+          trackingNameClose,
+          trackingData,
+          trackingIndex,
+          className: utils.cn(
+            "flex flex-col p-0",
+            // For autoHeight dialogs on desktop, handle max-height
+            effectiveAutoHeight && "max-h-full lg:max-h-[88vh]",
+            // Default height for non-full size dialogs or mobile/tablet
+            !effectiveAutoHeight && size !== "full" && "h-full lg:h-[500px]",
+            className,
+            contentClassName
+          ),
+          ...props,
+          children: [
+            !showHeader && title && /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "sr-only", children: title }),
+            showHeader && (title || description || headerContent) && /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { className: utils.cn("flex-shrink-0", headerClassName), children: headerContent ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "sr-only", children: "Title" }),
+              headerContent
+            ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              title ? /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: titleClassName, children: title }) : /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "sr-only", children: "Title" }),
+              description && /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { className: descriptionClassName, children: description })
+            ] }) }),
+            contentComponent,
+            showFooter && footerContent && /* @__PURE__ */ jsxRuntime.jsx(
+              dialog.DialogFooter,
+              {
+                className: utils.cn("border-border mt-4 flex-shrink-0 border-t p-4", footerClassName),
+                children: footerContent
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+DialogWrapper.displayName = "DialogWrapper";
+
+exports.DialogWrapper = DialogWrapper;
+//# sourceMappingURL=dialog-wrapper.js.map
+//# sourceMappingURL=dialog-wrapper.js.map

package/dist/common/interactive/dialog-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/dialog-wrapper.tsx"],"names":["React","useDevice","jsx","cn","ScrollArea","jsxs","Dialog","DialogTrigger","DialogContent","DialogTitle","DialogHeader","Fragment","DialogDescription","DialogFooter"],"mappings":"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","file":"dialog-wrapper.js","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport { TrackingPropsType } from '@/lib/types';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n  dialogVariants,\n  type VariantProps,\n} from '../../components/dialog';\nimport { ScrollArea } from '../../components/scroll-area';\n\ninterface DialogWrapperProps extends React.ComponentPropsWithoutRef<typeof DialogContent> {\n  // Trigger props\n  trigger?: React.ReactNode;\n  triggerAsChild?: boolean;\n  triggerClassName?: string;\n\n  // Header props\n  showHeader?: boolean;\n  title?: string;\n  titleClassName?: string;\n  description?: string;\n  descriptionClassName?: string;\n  headerClassName?: string;\n  headerContent?: React.ReactNode;\n\n  // Footer props\n  showFooter?: boolean;\n  footerContent?: React.ReactNode;\n  footerClassName?: string;\n\n  // Content props\n  children?: React.ReactNode;\n  contentClassName?: string;\n  childrenClassName?: string;\n\n  // Dialog behavior props\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n  modal?: boolean;\n\n  // ScrollArea props\n  autoHeight?: boolean;\n\n  // Close button props\n  hasCloseButton?: boolean;\n\n  // Size variants\n  size?: VariantProps<typeof dialogVariants>['size'];\n\n  // Tracking props\n  trackingNameView?: string;\n  trackingNameClose?: string;\n  trackingData?: Record<string, any>;\n  trackingIndex?: number;\n}\n\nconst DialogWrapper = React.forwardRef<React.ElementRef<typeof DialogContent>, DialogWrapperProps>(\n  (\n    {\n      // Trigger props\n      trigger,\n      triggerAsChild = false,\n      triggerClassName,\n\n      // Header props\n      showHeader = true,\n      title,\n      titleClassName,\n      description,\n      descriptionClassName,\n      headerClassName,\n      headerContent,\n\n      // Footer props\n      showFooter = false,\n      footerContent,\n      footerClassName,\n\n      // Content props\n      children,\n      contentClassName,\n      childrenClassName,\n\n      // Dialog behavior props\n      open,\n      onOpenChange,\n      defaultOpen,\n      modal,\n\n      // ScrollArea props\n      autoHeight = true,\n\n      // Close button props\n      hasCloseButton = true,\n\n      // Size variants\n      size = 'lg',\n\n      // Tracking props\n      trackingNameView,\n      trackingNameClose,\n      trackingData,\n      trackingIndex,\n\n      // Other props\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n\n    // autoHeight only works on desktop, mobile/tablet always use ScrollArea (full screen)\n    const effectiveAutoHeight = autoHeight && isDesktop;\n\n    const contentComponent = effectiveAutoHeight ? (\n      <div className={cn('h-full overflow-y-auto px-4 py-2 pb-4', childrenClassName)}>\n        {children}\n      </div>\n    ) : (\n      <div className=\"h-full min-h-0 flex-1\">\n        <ScrollArea className=\"h-full w-full\">\n          <div className={cn('h-full px-4', childrenClassName)}>{children}</div>\n        </ScrollArea>\n      </div>\n    );\n\n    return (\n      <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen} modal={modal}>\n        {trigger && (\n          <DialogTrigger asChild={triggerAsChild} className={triggerClassName}>\n            {trigger}\n          </DialogTrigger>\n        )}\n\n        <DialogContent\n          ref={ref}\n          hasCloseButton={hasCloseButton}\n          size={size}\n          trackingNameView={trackingNameView}\n          trackingNameClose={trackingNameClose}\n          trackingData={trackingData}\n          trackingIndex={trackingIndex}\n          className={cn(\n            'flex flex-col p-0',\n            // For autoHeight dialogs on desktop, handle max-height\n            effectiveAutoHeight && 'max-h-full lg:max-h-[88vh]',\n            // Default height for non-full size dialogs or mobile/tablet\n            !effectiveAutoHeight && size !== 'full' && 'h-full lg:h-[500px]',\n            className,\n            contentClassName,\n          )}\n          {...props}\n        >\n          {/* Always include DialogTitle for accessibility */}\n          {!showHeader && title && <DialogTitle className=\"sr-only\">{title}</DialogTitle>}\n\n          {showHeader && (title || description || headerContent) && (\n            <DialogHeader className={cn('flex-shrink-0', headerClassName)}>\n              {headerContent ? (\n                <>\n                  <DialogTitle className=\"sr-only\">Title</DialogTitle>\n                  {headerContent}\n                </>\n              ) : (\n                <>\n                  {title ? (\n                    <DialogTitle className={titleClassName}>{title}</DialogTitle>\n                  ) : (\n                    <DialogTitle className=\"sr-only\">Title</DialogTitle>\n                  )}\n                  {description && (\n                    <DialogDescription className={descriptionClassName}>\n                      {description}\n                    </DialogDescription>\n                  )}\n                </>\n              )}\n            </DialogHeader>\n          )}\n\n          {contentComponent}\n\n          {showFooter && footerContent && (\n            <DialogFooter\n              className={cn('border-border mt-4 flex-shrink-0 border-t p-4', footerClassName)}\n            >\n              {footerContent}\n            </DialogFooter>\n          )}\n        </DialogContent>\n      </Dialog>\n    );\n  },\n);\n\nDialogWrapper.displayName = 'DialogWrapper';\n\nexport { DialogWrapper, type DialogWrapperProps };\n"]}

package/dist/common/interactive/dialog-wrapper.mjs

@@ -0,0 +1,102 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useDevice } from '@/hooks/useDevice';
+import { cn } from '@/lib/utils';
+import { Dialog, DialogTrigger, DialogContent, DialogTitle, DialogHeader, DialogDescription, DialogFooter } from '../../components/dialog';
+import { ScrollArea } from '../../components/scroll-area';
+
+const DialogWrapper = React.forwardRef(
+  ({
+    // Trigger props
+    trigger,
+    triggerAsChild = false,
+    triggerClassName,
+    // Header props
+    showHeader = true,
+    title,
+    titleClassName,
+    description,
+    descriptionClassName,
+    headerClassName,
+    headerContent,
+    // Footer props
+    showFooter = false,
+    footerContent,
+    footerClassName,
+    // Content props
+    children,
+    contentClassName,
+    childrenClassName,
+    // Dialog behavior props
+    open,
+    onOpenChange,
+    defaultOpen,
+    modal,
+    // ScrollArea props
+    autoHeight = true,
+    // Close button props
+    hasCloseButton = true,
+    // Size variants
+    size = "lg",
+    // Tracking props
+    trackingNameView,
+    trackingNameClose,
+    trackingData,
+    trackingIndex,
+    // Other props
+    className,
+    ...props
+  }, ref) => {
+    const { isDesktop } = useDevice();
+    const effectiveAutoHeight = autoHeight && isDesktop;
+    const contentComponent = effectiveAutoHeight ? /* @__PURE__ */ jsx("div", { className: cn("h-full overflow-y-auto px-4 py-2 pb-4", childrenClassName), children }) : /* @__PURE__ */ jsx("div", { className: "h-full min-h-0 flex-1", children: /* @__PURE__ */ jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsx("div", { className: cn("h-full px-4", childrenClassName), children }) }) });
+    return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange, defaultOpen, modal, children: [
+      trigger && /* @__PURE__ */ jsx(DialogTrigger, { asChild: triggerAsChild, className: triggerClassName, children: trigger }),
+      /* @__PURE__ */ jsxs(
+        DialogContent,
+        {
+          ref,
+          hasCloseButton,
+          size,
+          trackingNameView,
+          trackingNameClose,
+          trackingData,
+          trackingIndex,
+          className: cn(
+            "flex flex-col p-0",
+            // For autoHeight dialogs on desktop, handle max-height
+            effectiveAutoHeight && "max-h-full lg:max-h-[88vh]",
+            // Default height for non-full size dialogs or mobile/tablet
+            !effectiveAutoHeight && size !== "full" && "h-full lg:h-[500px]",
+            className,
+            contentClassName
+          ),
+          ...props,
+          children: [
+            !showHeader && title && /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: title }),
+            showHeader && (title || description || headerContent) && /* @__PURE__ */ jsx(DialogHeader, { className: cn("flex-shrink-0", headerClassName), children: headerContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Title" }),
+              headerContent
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              title ? /* @__PURE__ */ jsx(DialogTitle, { className: titleClassName, children: title }) : /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Title" }),
+              description && /* @__PURE__ */ jsx(DialogDescription, { className: descriptionClassName, children: description })
+            ] }) }),
+            contentComponent,
+            showFooter && footerContent && /* @__PURE__ */ jsx(
+              DialogFooter,
+              {
+                className: cn("border-border mt-4 flex-shrink-0 border-t p-4", footerClassName),
+                children: footerContent
+              }
+            )
+          ]
+        }
+      )
+    ] });
+  }
+);
+DialogWrapper.displayName = "DialogWrapper";
+
+export { DialogWrapper };
+//# sourceMappingURL=dialog-wrapper.mjs.map
+//# sourceMappingURL=dialog-wrapper.mjs.map

package/dist/common/interactive/dialog-wrapper.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/dialog-wrapper.tsx"],"names":[],"mappings":"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","file":"dialog-wrapper.mjs","sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport { TrackingPropsType } from '@/lib/types';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n  dialogVariants,\n  type VariantProps,\n} from '../../components/dialog';\nimport { ScrollArea } from '../../components/scroll-area';\n\ninterface DialogWrapperProps extends React.ComponentPropsWithoutRef<typeof DialogContent> {\n  // Trigger props\n  trigger?: React.ReactNode;\n  triggerAsChild?: boolean;\n  triggerClassName?: string;\n\n  // Header props\n  showHeader?: boolean;\n  title?: string;\n  titleClassName?: string;\n  description?: string;\n  descriptionClassName?: string;\n  headerClassName?: string;\n  headerContent?: React.ReactNode;\n\n  // Footer props\n  showFooter?: boolean;\n  footerContent?: React.ReactNode;\n  footerClassName?: string;\n\n  // Content props\n  children?: React.ReactNode;\n  contentClassName?: string;\n  childrenClassName?: string;\n\n  // Dialog behavior props\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  defaultOpen?: boolean;\n  modal?: boolean;\n\n  // ScrollArea props\n  autoHeight?: boolean;\n\n  // Close button props\n  hasCloseButton?: boolean;\n\n  // Size variants\n  size?: VariantProps<typeof dialogVariants>['size'];\n\n  // Tracking props\n  trackingNameView?: string;\n  trackingNameClose?: string;\n  trackingData?: Record<string, any>;\n  trackingIndex?: number;\n}\n\nconst DialogWrapper = React.forwardRef<React.ElementRef<typeof DialogContent>, DialogWrapperProps>(\n  (\n    {\n      // Trigger props\n      trigger,\n      triggerAsChild = false,\n      triggerClassName,\n\n      // Header props\n      showHeader = true,\n      title,\n      titleClassName,\n      description,\n      descriptionClassName,\n      headerClassName,\n      headerContent,\n\n      // Footer props\n      showFooter = false,\n      footerContent,\n      footerClassName,\n\n      // Content props\n      children,\n      contentClassName,\n      childrenClassName,\n\n      // Dialog behavior props\n      open,\n      onOpenChange,\n      defaultOpen,\n      modal,\n\n      // ScrollArea props\n      autoHeight = true,\n\n      // Close button props\n      hasCloseButton = true,\n\n      // Size variants\n      size = 'lg',\n\n      // Tracking props\n      trackingNameView,\n      trackingNameClose,\n      trackingData,\n      trackingIndex,\n\n      // Other props\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n\n    // autoHeight only works on desktop, mobile/tablet always use ScrollArea (full screen)\n    const effectiveAutoHeight = autoHeight && isDesktop;\n\n    const contentComponent = effectiveAutoHeight ? (\n      <div className={cn('h-full overflow-y-auto px-4 py-2 pb-4', childrenClassName)}>\n        {children}\n      </div>\n    ) : (\n      <div className=\"h-full min-h-0 flex-1\">\n        <ScrollArea className=\"h-full w-full\">\n          <div className={cn('h-full px-4', childrenClassName)}>{children}</div>\n        </ScrollArea>\n      </div>\n    );\n\n    return (\n      <Dialog open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen} modal={modal}>\n        {trigger && (\n          <DialogTrigger asChild={triggerAsChild} className={triggerClassName}>\n            {trigger}\n          </DialogTrigger>\n        )}\n\n        <DialogContent\n          ref={ref}\n          hasCloseButton={hasCloseButton}\n          size={size}\n          trackingNameView={trackingNameView}\n          trackingNameClose={trackingNameClose}\n          trackingData={trackingData}\n          trackingIndex={trackingIndex}\n          className={cn(\n            'flex flex-col p-0',\n            // For autoHeight dialogs on desktop, handle max-height\n            effectiveAutoHeight && 'max-h-full lg:max-h-[88vh]',\n            // Default height for non-full size dialogs or mobile/tablet\n            !effectiveAutoHeight && size !== 'full' && 'h-full lg:h-[500px]',\n            className,\n            contentClassName,\n          )}\n          {...props}\n        >\n          {/* Always include DialogTitle for accessibility */}\n          {!showHeader && title && <DialogTitle className=\"sr-only\">{title}</DialogTitle>}\n\n          {showHeader && (title || description || headerContent) && (\n            <DialogHeader className={cn('flex-shrink-0', headerClassName)}>\n              {headerContent ? (\n                <>\n                  <DialogTitle className=\"sr-only\">Title</DialogTitle>\n                  {headerContent}\n                </>\n              ) : (\n                <>\n                  {title ? (\n                    <DialogTitle className={titleClassName}>{title}</DialogTitle>\n                  ) : (\n                    <DialogTitle className=\"sr-only\">Title</DialogTitle>\n                  )}\n                  {description && (\n                    <DialogDescription className={descriptionClassName}>\n                      {description}\n                    </DialogDescription>\n                  )}\n                </>\n              )}\n            </DialogHeader>\n          )}\n\n          {contentComponent}\n\n          {showFooter && footerContent && (\n            <DialogFooter\n              className={cn('border-border mt-4 flex-shrink-0 border-t p-4', footerClassName)}\n            >\n              {footerContent}\n            </DialogFooter>\n          )}\n        </DialogContent>\n      </Dialog>\n    );\n  },\n);\n\nDialogWrapper.displayName = 'DialogWrapper';\n\nexport { DialogWrapper, type DialogWrapperProps };\n"]}

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"]}