shad-m 1.0.0 → 1.0.2

package/dist/common/interactive/select/select-body.mjs

@@ -1,67 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useDevice } from '@/hooks/useDevice';
-import { cn } from '@/lib/utils';
-import * as React from 'react';
-import { PopoverContent } from '../../../components/popover';
-import { SheetBody } from '../../../components/sheet';
-
-const SelectBody = React.forwardRef(
-  ({
-    asChild,
-    children,
-    side = "bottom",
-    align = "start",
-    alignOffset,
-    sideOffset,
-    className,
-    ...props
-  }, ref) => {
-    const { isDesktop } = useDevice();
-    const Comp = isDesktop ? PopoverContent : SheetBody;
-    const handleWheel = React.useCallback((e) => {
-      e.stopPropagation();
-    }, []);
-    const specificProps = isDesktop ? {
-      alignOffset: alignOffset ?? 4,
-      sideOffset,
-      hideWhenDetached: true,
-      avoidCollisions: true,
-      collisionPadding: 8,
-      onWheel: handleWheel,
-      // Smart interaction handling: Only allow closing in specific cases
-      onInteractOutside: (e) => {
-        const target = e.target;
-        const isSelectTrigger = target.closest('[role="combobox"]') || target.closest("[data-select-trigger]");
-        if (isSelectTrigger) {
-          return;
-        }
-      }
-    } : null;
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        id: "select-body",
-        ref,
-        asChild,
-        side,
-        align,
-        sticky: "always",
-        className: cn(
-          "lg:shadow-shadow-8 -ml-1 p-0 lg:bg-white",
-          {
-            "select-popover-content": isDesktop
-          },
-          className
-        ),
-        ...specificProps,
-        ...props,
-        children
-      }
-    );
-  }
-);
-SelectBody.displayName = "SelectBody";
-
-export { SelectBody };
-//# sourceMappingURL=select-body.mjs.map
-//# sourceMappingURL=select-body.mjs.map

package/dist/common/interactive/select/select-body.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/common/interactive/select/select-body.tsx"],"names":[],"mappings":";;;;;;;AAOA,MAAM,aAAa,KAAA,CAAM,UAAA;AAAA,EACvB,CACE;AAAA,IACE,OAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,KAAA,GAAQ,OAAA;AAAA,IACR,WAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,EAAE,SAAA,EAAU,GAAI,SAAA,EAAU;AAEhC,IAAA,MAAM,IAAA,GAAO,YAAY,cAAA,GAAiB,SAAA;AAE1C,IAAA,MAAM,WAAA,GAAc,KAAA,CAAM,WAAA,CAAY,CAAC,CAAA,KAAwB;AAE7D,MAAA,CAAA,CAAE,eAAA,EAAgB;AAAA,IACpB,CAAA,EAAG,EAAE,CAAA;AAEL,IAAA,MAAM,gBAAgB,SAAA,GAClB;AAAA,MACE,aAAa,WAAA,IAAe,CAAA;AAAA,MAC5B,UAAA;AAAA,MACA,gBAAA,EAAkB,IAAA;AAAA,MAClB,eAAA,EAAiB,IAAA;AAAA,MACjB,gBAAA,EAAkB,CAAA;AAAA,MAClB,OAAA,EAAS,WAAA;AAAA;AAAA,MAET,iBAAA,EAAmB,CAAC,CAAA,KAAa;AAC/B,QAAA,MAAM,SAAS,CAAA,CAAE,MAAA;AAIjB,QAAA,MAAM,kBACJ,MAAA,CAAO,OAAA,CAAQ,mBAAmB,CAAA,IAAK,MAAA,CAAO,QAAQ,uBAAuB,CAAA;AAC/E,QAAA,IAAI,eAAA,EAAiB;AACnB,UAAA;AAAA,QACF;AAAA,MAKF;AAAA,KACF,GACA,IAAA;AAEJ,IAAA,uBACE,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAI,aAAA;AAAA,QACJ,GAAA;AAAA,QACA,OAAA;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QAEA,MAAA,EAAO,QAAA;AAAA,QACP,SAAA,EAAW,EAAA;AAAA,UACT,0CAAA;AAAA,UACA;AAAA,YACE,wBAAA,EAA0B;AAAA,WAC5B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,aAAA;AAAA,QACH,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"select-body.mjs","sourcesContent":["import { useDevice } from '@/hooks/useDevice';\nimport { cn } from '@/lib/utils';\nimport * as React from 'react';\nimport { PopoverContent } from '../../../components/popover';\nimport { SheetBody } from '../../../components/sheet';\nimport { SelectBodyProps } from './types';\n\nconst SelectBody = React.forwardRef<HTMLDivElement, SelectBodyProps>(\n  (\n    {\n      asChild,\n      children,\n      side = 'bottom',\n      align = 'start',\n      alignOffset,\n      sideOffset,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { isDesktop } = useDevice();\n\n    const Comp = isDesktop ? PopoverContent : SheetBody;\n\n    const handleWheel = React.useCallback((e: React.WheelEvent) => {\n      // Stop wheel event from propagating to Dialog\n      e.stopPropagation();\n    }, []);\n\n    const specificProps = isDesktop\n      ? {\n          alignOffset: alignOffset ?? 4,\n          sideOffset: sideOffset,\n          hideWhenDetached: true,\n          avoidCollisions: true,\n          collisionPadding: 8,\n          onWheel: handleWheel,\n          // Smart interaction handling: Only allow closing in specific cases\n          onInteractOutside: (e: Event) => {\n            const target = e.target as HTMLElement;\n\n            // Always allow closing when clicking on another Select trigger\n            // This ensures only one Select is open at a time\n            const isSelectTrigger =\n              target.closest('[role=\"combobox\"]') || target.closest('[data-select-trigger]');\n            if (isSelectTrigger) {\n              return; // Allow closing\n            }\n\n            // Allow closing on normal clicks in Dialog\n            // The onWheel handler separately prevents issues with scrolling\n            // So we don't need to preventDefault here\n          },\n        }\n      : null;\n\n    return (\n      <Comp\n        id={'select-body'}\n        ref={ref}\n        asChild={asChild}\n        side={side}\n        align={align}\n        // Add properties to prevent popover drift during scroll\n        sticky=\"always\"\n        className={cn(\n          'lg:shadow-shadow-8 -ml-1 p-0 lg:bg-white',\n          {\n            'select-popover-content': isDesktop,\n          },\n          className,\n        )}\n        {...specificProps}\n        {...props}\n      >\n        {children}\n      </Comp>\n    );\n  },\n);\n\nSelectBody.displayName = 'SelectBody';\n\nexport { SelectBody };\n"]}

package/dist/common/interactive/select/select-close.js

@@ -1,38 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var useDevice = require('@/hooks/useDevice');
-var reactPopover = require('@radix-ui/react-popover');
-var React = require('react');
-var sheet = require('../../../components/sheet');
-
-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 SelectClose = React__namespace.forwardRef((props, ref) => {
-  const { isDesktop } = useDevice.useDevice();
-  if (!isDesktop) return /* @__PURE__ */ jsxRuntime.jsx(sheet.SheetClose, { ref, ...props });
-  return /* @__PURE__ */ jsxRuntime.jsx(reactPopover.PopoverClose, { ref, ...props });
-});
-SelectClose.displayName = "SelectClose";
-
-exports.SelectClose = SelectClose;
-//# sourceMappingURL=select-close.js.map
-//# sourceMappingURL=select-close.js.map

package/dist/common/interactive/select/select-close.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/common/interactive/select/select-close.tsx"],"names":["React","useDevice","SheetClose","jsx","PopoverClose"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAKO,MAAM,WAAA,GAAcA,gBAAA,CAAM,UAAA,CAG/B,CAAC,OAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,SAAA,EAAU,GAAIC,mBAAA,EAAU;AAEhC,EAAA,IAAI,CAAC,SAAA,EAAW,sCAAQC,gBAAA,EAAA,EAAW,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AACxD,EAAA,uBAAOC,cAAA,CAACC,yBAAA,EAAA,EAAa,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC5C,CAAC;AAED,WAAA,CAAY,WAAA,GAAc,aAAA","file":"select-close.js","sourcesContent":["import { useDevice } from '@/hooks/useDevice';\nimport { PopoverClose } from '@radix-ui/react-popover';\nimport * as React from 'react';\nimport { SheetClose } from '../../../components/sheet';\n\nexport const SelectClose = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof PopoverClose>\n>((props, ref) => {\n  const { isDesktop } = useDevice();\n\n  if (!isDesktop) return <SheetClose ref={ref} {...props} />;\n  return <PopoverClose ref={ref} {...props} />;\n});\n\nSelectClose.displayName = 'SelectClose';\n"]}

package/dist/common/interactive/select/select-close.mjs

@@ -1,16 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useDevice } from '@/hooks/useDevice';
-import { PopoverClose } from '@radix-ui/react-popover';
-import * as React from 'react';
-import { SheetClose } from '../../../components/sheet';
-
-const SelectClose = React.forwardRef((props, ref) => {
-  const { isDesktop } = useDevice();
-  if (!isDesktop) return /* @__PURE__ */ jsx(SheetClose, { ref, ...props });
-  return /* @__PURE__ */ jsx(PopoverClose, { ref, ...props });
-});
-SelectClose.displayName = "SelectClose";
-
-export { SelectClose };
-//# sourceMappingURL=select-close.mjs.map
-//# sourceMappingURL=select-close.mjs.map

package/dist/common/interactive/select/select-close.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/common/interactive/select/select-close.tsx"],"names":[],"mappings":";;;;;;AAKO,MAAM,WAAA,GAAc,KAAA,CAAM,UAAA,CAG/B,CAAC,OAAO,GAAA,KAAQ;AAChB,EAAA,MAAM,EAAE,SAAA,EAAU,GAAI,SAAA,EAAU;AAEhC,EAAA,IAAI,CAAC,SAAA,EAAW,2BAAQ,UAAA,EAAA,EAAW,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AACxD,EAAA,uBAAO,GAAA,CAAC,YAAA,EAAA,EAAa,GAAA,EAAW,GAAG,KAAA,EAAO,CAAA;AAC5C,CAAC;AAED,WAAA,CAAY,WAAA,GAAc,aAAA","file":"select-close.mjs","sourcesContent":["import { useDevice } from '@/hooks/useDevice';\nimport { PopoverClose } from '@radix-ui/react-popover';\nimport * as React from 'react';\nimport { SheetClose } from '../../../components/sheet';\n\nexport const SelectClose = React.forwardRef<\n  HTMLButtonElement,\n  React.ComponentPropsWithoutRef<typeof PopoverClose>\n>((props, ref) => {\n  const { isDesktop } = useDevice();\n\n  if (!isDesktop) return <SheetClose ref={ref} {...props} />;\n  return <PopoverClose ref={ref} {...props} />;\n});\n\nSelectClose.displayName = 'SelectClose';\n"]}

package/dist/common/interactive/select/select-content-auto-layout.js

@@ -1,221 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var useDevice = require('@/hooks/useDevice');
-var types = require('@/lib/types');
-var UISystemProvider = require('@/providers/UISystemProvider');
-var helpers = require('@/lib/helpers');
-var React = require('react');
-var reactVirtuoso = require('react-virtuoso');
-var selectContent = require('./select-content');
-var selectSearch = require('./select-search');
-var selectLayout = require('./select-layout');
-var selectStates = require('./select-states');
-var selectItem = require('./select-item');
-var context = require('./context');
-var utils = require('./utils');
-
-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 defaultItemContentRenderer = ({ multiple, option }) => {
-  if (!option?.value) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx(selectItem.SelectItem, { multiple, option, disabled: option?.disable, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground text-base", children: option?.name || option.value }),
-    option?.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground mt-0.5 text-sm", children: option.description })
-  ] }) });
-};
-const ItemHeight = 48;
-const ItemHeightWithDescription = 68;
-const VirtualSoEmptyPlaceholder = React__namespace.forwardRef((_, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(selectStates.SelectEmptyState, { ref });
-});
-VirtualSoEmptyPlaceholder.displayName = "VirtualSoEmptyPlaceholder";
-const SelectContentAutoLayout = React__namespace.forwardRef(
-  ({
-    hasSearch: hasSearchProp,
-    autoSearch = true,
-    multiple,
-    options: optionsProps,
-    isLoading,
-    searchPlaceholder = "T\xECm ki\u1EBFm",
-    itemContentRenderer = defaultItemContentRenderer,
-    trackingSearchName,
-    trackingSearchData,
-    onSearchChange,
-    additionalContent,
-    closeAfterClear,
-    ...props
-  }, ref) => {
-    const { sendTrack } = UISystemProvider.useUISystemContext();
-    const { isDesktop } = useDevice.useDevice();
-    const { setAvailableOptions } = context.useSelectContext();
-    React__namespace.useEffect(() => {
-      if (optionsProps && setAvailableOptions) {
-        setAvailableOptions(optionsProps);
-      }
-    }, [optionsProps, setAvailableOptions]);
-    const [options, setOptions] = React__namespace.useState(optionsProps || []);
-    const [searchKeyword, setSearchKeyword] = React__namespace.useState("");
-    const virtuosoRef = React__namespace.useRef(null);
-    const virtuosoScrollerRef = React__namespace.useRef();
-    const handleScrollerRef = React__namespace.useCallback((ref2) => {
-      virtuosoScrollerRef.current = ref2;
-    }, []);
-    const onSearchChangeInternal = React__namespace.useMemo(() => {
-      return helpers.debounce(async (value2) => {
-        const valueSearch = value2.trim();
-        if (onSearchChange) {
-          onSearchChange(valueSearch);
-          return;
-        }
-        if (!valueSearch) return setOptions(optionsProps);
-        const Fuse = (await import('fuse.js')).default;
-        const fuseOptions = new Fuse(optionsProps, {
-          keys: [
-            { name: "name", weight: 0.7 },
-            { name: "value", weight: 0.5 },
-            { name: "description", weight: 0.3 }
-          ],
-          threshold: 0.3,
-          includeScore: true,
-          ignoreLocation: true,
-          findAllMatches: true,
-          getFn: (obj, path) => {
-            const value3 = Fuse.config.getFn(obj, path);
-            if (typeof value3 === "string") {
-              return utils.removeDiacritics(value3);
-            }
-            return value3;
-          }
-        });
-        const searchResults = fuseOptions.search(utils.removeDiacritics(valueSearch));
-        const newOptions = searchResults.map((item) => item.item);
-        setOptions(newOptions);
-        !!trackingSearchName && sendTrack?.(trackingSearchName, types.TRACKING_TYPE.click, {
-          search_text: valueSearch,
-          search_result: !!newOptions?.length,
-          ...trackingSearchData
-        });
-      }, 300);
-    }, [optionsProps, trackingSearchName, trackingSearchData, sendTrack, onSearchChange]);
-    const onSearchInputChange = React__namespace.useCallback(
-      (e) => {
-        setSearchKeyword(e.target.value);
-        onSearchChangeInternal(e.target.value);
-      },
-      [onSearchChangeInternal]
-    );
-    const itemContent = React__namespace.useCallback(
-      (index) => {
-        const item = options?.[index];
-        return itemContentRenderer({ multiple, option: item });
-      },
-      [itemContentRenderer, multiple, options]
-    );
-    const { value } = context.useSelectContext();
-    const context$1 = React__namespace.useMemo(
-      () => ({
-        searchKeyword
-      }),
-      [searchKeyword]
-    );
-    const hasFooter = multiple && !!options && options?.length > 0;
-    const virtuosoComponents = React__namespace.useMemo(
-      () => ({
-        List: selectLayout.SelectList,
-        EmptyPlaceholder: VirtualSoEmptyPlaceholder
-      }),
-      []
-    );
-    const listHeight = React__namespace.useMemo(() => {
-      const minHeight = 204;
-      const hasDescription = options.some((option) => option.description);
-      const itemHeight = hasDescription ? ItemHeightWithDescription : ItemHeight;
-      const totalHeight = options.length * itemHeight;
-      const maxHeight = !isDesktop ? typeof window !== "undefined" ? window.innerHeight * 0.5 : 400 : 250;
-      if (options.length === 0) {
-        return minHeight;
-      }
-      return Math.min(totalHeight, maxHeight);
-    }, [options, isDesktop]);
-    React__namespace.useEffect(() => {
-      const virtusoScrollerElement = virtuosoScrollerRef.current;
-      if (virtusoScrollerElement) {
-        const lastValue = value?.[value?.length - 1];
-        const lastValueIndex = !lastValue ? 0 : options?.findIndex((item) => item.value === lastValue.value);
-        const scrollToIndex = () => {
-          const isScrollableList = virtusoScrollerElement?.scrollHeight && virtusoScrollerElement?.clientHeight && virtusoScrollerElement?.scrollHeight > virtusoScrollerElement?.offsetHeight;
-          virtuosoRef.current?.scrollToIndex(isScrollableList ? lastValueIndex ?? 0 : 0);
-        };
-        const rafId = requestAnimationFrame(scrollToIndex);
-        return () => {
-          cancelAnimationFrame(rafId);
-        };
-      }
-    }, [options]);
-    React__namespace.useLayoutEffect(() => {
-      if (isLoading === false && optionsProps?.length) {
-        setOptions(optionsProps);
-      }
-    }, [isLoading, optionsProps]);
-    const handleVirtuosoWheel = React__namespace.useCallback((e) => {
-      e.stopPropagation();
-    }, []);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      selectContent.SelectContent,
-      {
-        searchElm: hasSearchProp ? /* @__PURE__ */ jsxRuntime.jsx(
-          selectSearch.SelectSearch,
-          {
-            placeholder: searchPlaceholder,
-            value: searchKeyword,
-            onChange: onSearchInputChange
-          }
-        ) : null,
-        additionalContent,
-        ref,
-        hasFooter,
-        loading: isLoading,
-        closeAfterClear,
-        ...props,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { onWheel: handleVirtuosoWheel, children: /* @__PURE__ */ jsxRuntime.jsx(
-          reactVirtuoso.Virtuoso,
-          {
-            ref: virtuosoRef,
-            scrollerRef: handleScrollerRef,
-            className: "custom-select-scroll max-h-[50vh] lg:max-h-[250px]",
-            style: { height: listHeight },
-            data: options,
-            itemContent,
-            defaultItemHeight: ItemHeight,
-            components: virtuosoComponents,
-            context: context$1
-          }
-        ) })
-      }
-    );
-  }
-);
-SelectContentAutoLayout.displayName = "SelectContentAutoLayout";
-
-exports.SelectContentAutoLayout = SelectContentAutoLayout;
-//# sourceMappingURL=select-content-auto-layout.js.map
-//# sourceMappingURL=select-content-auto-layout.js.map

package/dist/common/interactive/select/select-content-auto-layout.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/common/interactive/select/select-content-auto-layout.tsx"],"names":["jsx","SelectItem","jsxs","React","SelectEmptyState","useUISystemContext","useDevice","useSelectContext","ref","debounce","value","removeDiacritics","TRACKING_TYPE","context","SelectList","SelectContent","SelectSearch","Virtuoso"],"mappings":"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","file":"select-content-auto-layout.js","sourcesContent":["import { useDevice } from '@/hooks/useDevice';\nimport { TRACKING_TYPE } from '@/lib/types';\nimport { useUISystemContext } from '@/providers/UISystemProvider';\nimport { debounce } from '@/lib/helpers';\nimport * as React from 'react';\nimport { ItemContent, Virtuoso, VirtuosoHandle, Components } from 'react-virtuoso';\nimport { SelectContent } from './select-content';\nimport { SelectSearch } from './select-search';\nimport { SelectList } from './select-layout';\nimport { SelectEmptyState } from './select-states';\nimport { SelectItem } from './select-item';\nimport { useSelectContext } from './context';\nimport { removeDiacritics } from './utils';\nimport {\n  Option,\n  SelectContentAutoLayoutProps,\n  SelectVirtuasoContextType,\n  ItemContentRendererType,\n} from './types';\n\nconst defaultItemContentRenderer: ItemContentRendererType<Option> = ({ multiple, option }) => {\n  if (!option?.value) return null;\n  return (\n    <SelectItem multiple={multiple} option={option} disabled={option?.disable}>\n      <div className=\"flex flex-col\">\n        <div className=\"text-foreground text-base\">{option?.name || option.value}</div>\n        {option?.description && (\n          <div className=\"text-muted-foreground mt-0.5 text-sm\">{option.description}</div>\n        )}\n      </div>\n    </SelectItem>\n  );\n};\n\nconst ItemHeight = 48;\nconst ItemHeightWithDescription = 68; // Height when item has description\n\nconst VirtualSoEmptyPlaceholder: Components<Option, SelectVirtuasoContextType>['EmptyPlaceholder'] =\n  React.forwardRef((_, ref: React.Ref<HTMLDivElement>) => {\n    return <SelectEmptyState ref={ref} />;\n  });\n\nVirtualSoEmptyPlaceholder.displayName = 'VirtualSoEmptyPlaceholder';\n\nconst SelectContentAutoLayout = React.forwardRef<\n  HTMLDivElement,\n  SelectContentAutoLayoutProps<Option>\n>(\n  (\n    {\n      hasSearch: hasSearchProp,\n      autoSearch = true,\n      multiple,\n      options: optionsProps,\n      isLoading,\n      searchPlaceholder = 'Tìm kiếm',\n      itemContentRenderer = defaultItemContentRenderer,\n      trackingSearchName,\n      trackingSearchData,\n      onSearchChange,\n      additionalContent,\n      closeAfterClear,\n      ...props\n    },\n    ref,\n  ) => {\n    const { sendTrack } = useUISystemContext();\n    const { isDesktop } = useDevice();\n    const { setAvailableOptions } = useSelectContext();\n\n    // Auto-populate available options for value normalization\n    React.useEffect(() => {\n      if (optionsProps && setAvailableOptions) {\n        setAvailableOptions(optionsProps);\n      }\n    }, [optionsProps, setAvailableOptions]);\n\n    const [options, setOptions] = React.useState<Option[]>(optionsProps || []);\n    const [searchKeyword, setSearchKeyword] = React.useState('');\n    const virtuosoRef = React.useRef<VirtuosoHandle>(null);\n    const virtuosoScrollerRef = React.useRef<HTMLElement>();\n\n    const handleScrollerRef = React.useCallback((ref: HTMLElement | Window | null) => {\n      virtuosoScrollerRef.current = ref as HTMLElement;\n    }, []);\n\n    const onSearchChangeInternal = React.useMemo(() => {\n      return debounce(async (value: string) => {\n        const valueSearch = value.trim();\n\n        // If external onSearchChange is provided, use it (for API search)\n        if (onSearchChange) {\n          onSearchChange(valueSearch);\n          return;\n        }\n\n        // Otherwise, use internal search logic (for static data)\n        if (!valueSearch) return setOptions(optionsProps);\n        const Fuse = (await import('fuse.js')).default;\n\n        const fuseOptions = new Fuse(optionsProps, {\n          keys: [\n            { name: 'name', weight: 0.7 },\n            { name: 'value', weight: 0.5 },\n            { name: 'description', weight: 0.3 },\n          ],\n          threshold: 0.3,\n          includeScore: true,\n          ignoreLocation: true,\n          findAllMatches: true,\n          getFn: (obj, path) => {\n            const value = Fuse.config.getFn(obj, path);\n            if (typeof value === 'string') {\n              return removeDiacritics(value);\n            }\n            return value;\n          },\n        });\n        const searchResults = fuseOptions.search(removeDiacritics(valueSearch));\n        const newOptions = searchResults.map((item: any) => item.item);\n        setOptions(newOptions);\n        !!trackingSearchName &&\n          sendTrack?.(trackingSearchName, TRACKING_TYPE.click, {\n            search_text: valueSearch,\n            search_result: !!newOptions?.length,\n            ...trackingSearchData,\n          });\n      }, 300);\n    }, [optionsProps, trackingSearchName, trackingSearchData, sendTrack, onSearchChange]);\n\n    const onSearchInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        setSearchKeyword(e.target.value);\n        onSearchChangeInternal(e.target.value);\n      },\n      [onSearchChangeInternal],\n    );\n\n    const itemContent = React.useCallback<ItemContent<Option, any>>(\n      (index: number) => {\n        const item = options?.[index] as Option;\n        return itemContentRenderer({ multiple, option: item });\n      },\n      [itemContentRenderer, multiple, options],\n    );\n\n    const { value } = useSelectContext();\n\n    const context = React.useMemo<SelectVirtuasoContextType>(\n      () => ({\n        searchKeyword,\n      }),\n      [searchKeyword],\n    );\n\n    const hasFooter = multiple && !!options && options?.length > 0;\n\n    const virtuosoComponents = React.useMemo(\n      () => ({\n        List: SelectList,\n        EmptyPlaceholder: VirtualSoEmptyPlaceholder,\n      }),\n      [],\n    );\n\n    // Calculate dynamic height based on content\n    const listHeight = React.useMemo(() => {\n      const minHeight = 204; // Min height for empty state\n\n      // Check if any option has description\n      const hasDescription = options.some((option) => option.description);\n      const itemHeight = hasDescription ? ItemHeightWithDescription : ItemHeight;\n\n      const totalHeight = options.length * itemHeight;\n      const maxHeight = !isDesktop\n        ? typeof window !== 'undefined'\n          ? window.innerHeight * 0.5\n          : 400\n        : 250;\n\n      // If no options, use min height for empty state\n      if (options.length === 0) {\n        return minHeight;\n      }\n\n      return Math.min(totalHeight, maxHeight);\n    }, [options, isDesktop]);\n\n    React.useEffect(() => {\n      const virtusoScrollerElement = virtuosoScrollerRef.current;\n      if (virtusoScrollerElement) {\n        const lastValue = value?.[value?.length - 1];\n        const lastValueIndex = !lastValue\n          ? 0\n          : options?.findIndex((item) => item.value === lastValue.value);\n\n        const scrollToIndex = () => {\n          const isScrollableList =\n            virtusoScrollerElement?.scrollHeight &&\n            virtusoScrollerElement?.clientHeight &&\n            virtusoScrollerElement?.scrollHeight > virtusoScrollerElement?.offsetHeight;\n          virtuosoRef.current?.scrollToIndex(isScrollableList ? (lastValueIndex ?? 0) : 0);\n        };\n        const rafId = requestAnimationFrame(scrollToIndex);\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [options]);\n\n    // Fix case gọi API:\n    // Khi đang loading => hiển thị empty state\n    // Khi có data => Vẫn đang hiển thị empty state\n    React.useLayoutEffect(() => {\n      if (isLoading === false && optionsProps?.length) {\n        setOptions(optionsProps);\n      }\n    }, [isLoading, optionsProps]);\n\n    // Handle wheel event on Virtuoso to prevent Dialog scroll\n    const handleVirtuosoWheel = React.useCallback((e: React.WheelEvent) => {\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <SelectContent\n        searchElm={\n          hasSearchProp ? (\n            <SelectSearch\n              placeholder={searchPlaceholder}\n              value={searchKeyword}\n              onChange={onSearchInputChange}\n            />\n          ) : null\n        }\n        additionalContent={additionalContent}\n        ref={ref}\n        hasFooter={hasFooter}\n        loading={isLoading}\n        closeAfterClear={closeAfterClear}\n        {...props}\n      >\n        <div onWheel={handleVirtuosoWheel}>\n          <Virtuoso\n            ref={virtuosoRef}\n            scrollerRef={handleScrollerRef}\n            className=\"custom-select-scroll max-h-[50vh] lg:max-h-[250px]\"\n            style={{ height: listHeight }}\n            data={options}\n            itemContent={itemContent}\n            defaultItemHeight={ItemHeight}\n            components={virtuosoComponents}\n            context={context}\n          />\n        </div>\n      </SelectContent>\n    );\n  },\n);\n\nSelectContentAutoLayout.displayName = 'SelectContentAutoLayout';\n\nexport { SelectContentAutoLayout };\n"]}

package/dist/common/interactive/select/select-content-auto-layout.mjs

@@ -1,199 +0,0 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useDevice } from '@/hooks/useDevice';
-import { TRACKING_TYPE } from '@/lib/types';
-import { useUISystemContext } from '@/providers/UISystemProvider';
-import { debounce } from '@/lib/helpers';
-import * as React from 'react';
-import { Virtuoso } from 'react-virtuoso';
-import { SelectContent } from './select-content';
-import { SelectSearch } from './select-search';
-import { SelectList } from './select-layout';
-import { SelectEmptyState } from './select-states';
-import { SelectItem } from './select-item';
-import { useSelectContext } from './context';
-import { removeDiacritics } from './utils';
-
-const defaultItemContentRenderer = ({ multiple, option }) => {
-  if (!option?.value) return null;
-  return /* @__PURE__ */ jsx(SelectItem, { multiple, option, disabled: option?.disable, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-    /* @__PURE__ */ jsx("div", { className: "text-foreground text-base", children: option?.name || option.value }),
-    option?.description && /* @__PURE__ */ jsx("div", { className: "text-muted-foreground mt-0.5 text-sm", children: option.description })
-  ] }) });
-};
-const ItemHeight = 48;
-const ItemHeightWithDescription = 68;
-const VirtualSoEmptyPlaceholder = React.forwardRef((_, ref) => {
-  return /* @__PURE__ */ jsx(SelectEmptyState, { ref });
-});
-VirtualSoEmptyPlaceholder.displayName = "VirtualSoEmptyPlaceholder";
-const SelectContentAutoLayout = React.forwardRef(
-  ({
-    hasSearch: hasSearchProp,
-    autoSearch = true,
-    multiple,
-    options: optionsProps,
-    isLoading,
-    searchPlaceholder = "T\xECm ki\u1EBFm",
-    itemContentRenderer = defaultItemContentRenderer,
-    trackingSearchName,
-    trackingSearchData,
-    onSearchChange,
-    additionalContent,
-    closeAfterClear,
-    ...props
-  }, ref) => {
-    const { sendTrack } = useUISystemContext();
-    const { isDesktop } = useDevice();
-    const { setAvailableOptions } = useSelectContext();
-    React.useEffect(() => {
-      if (optionsProps && setAvailableOptions) {
-        setAvailableOptions(optionsProps);
-      }
-    }, [optionsProps, setAvailableOptions]);
-    const [options, setOptions] = React.useState(optionsProps || []);
-    const [searchKeyword, setSearchKeyword] = React.useState("");
-    const virtuosoRef = React.useRef(null);
-    const virtuosoScrollerRef = React.useRef();
-    const handleScrollerRef = React.useCallback((ref2) => {
-      virtuosoScrollerRef.current = ref2;
-    }, []);
-    const onSearchChangeInternal = React.useMemo(() => {
-      return debounce(async (value2) => {
-        const valueSearch = value2.trim();
-        if (onSearchChange) {
-          onSearchChange(valueSearch);
-          return;
-        }
-        if (!valueSearch) return setOptions(optionsProps);
-        const Fuse = (await import('fuse.js')).default;
-        const fuseOptions = new Fuse(optionsProps, {
-          keys: [
-            { name: "name", weight: 0.7 },
-            { name: "value", weight: 0.5 },
-            { name: "description", weight: 0.3 }
-          ],
-          threshold: 0.3,
-          includeScore: true,
-          ignoreLocation: true,
-          findAllMatches: true,
-          getFn: (obj, path) => {
-            const value3 = Fuse.config.getFn(obj, path);
-            if (typeof value3 === "string") {
-              return removeDiacritics(value3);
-            }
-            return value3;
-          }
-        });
-        const searchResults = fuseOptions.search(removeDiacritics(valueSearch));
-        const newOptions = searchResults.map((item) => item.item);
-        setOptions(newOptions);
-        !!trackingSearchName && sendTrack?.(trackingSearchName, TRACKING_TYPE.click, {
-          search_text: valueSearch,
-          search_result: !!newOptions?.length,
-          ...trackingSearchData
-        });
-      }, 300);
-    }, [optionsProps, trackingSearchName, trackingSearchData, sendTrack, onSearchChange]);
-    const onSearchInputChange = React.useCallback(
-      (e) => {
-        setSearchKeyword(e.target.value);
-        onSearchChangeInternal(e.target.value);
-      },
-      [onSearchChangeInternal]
-    );
-    const itemContent = React.useCallback(
-      (index) => {
-        const item = options?.[index];
-        return itemContentRenderer({ multiple, option: item });
-      },
-      [itemContentRenderer, multiple, options]
-    );
-    const { value } = useSelectContext();
-    const context = React.useMemo(
-      () => ({
-        searchKeyword
-      }),
-      [searchKeyword]
-    );
-    const hasFooter = multiple && !!options && options?.length > 0;
-    const virtuosoComponents = React.useMemo(
-      () => ({
-        List: SelectList,
-        EmptyPlaceholder: VirtualSoEmptyPlaceholder
-      }),
-      []
-    );
-    const listHeight = React.useMemo(() => {
-      const minHeight = 204;
-      const hasDescription = options.some((option) => option.description);
-      const itemHeight = hasDescription ? ItemHeightWithDescription : ItemHeight;
-      const totalHeight = options.length * itemHeight;
-      const maxHeight = !isDesktop ? typeof window !== "undefined" ? window.innerHeight * 0.5 : 400 : 250;
-      if (options.length === 0) {
-        return minHeight;
-      }
-      return Math.min(totalHeight, maxHeight);
-    }, [options, isDesktop]);
-    React.useEffect(() => {
-      const virtusoScrollerElement = virtuosoScrollerRef.current;
-      if (virtusoScrollerElement) {
-        const lastValue = value?.[value?.length - 1];
-        const lastValueIndex = !lastValue ? 0 : options?.findIndex((item) => item.value === lastValue.value);
-        const scrollToIndex = () => {
-          const isScrollableList = virtusoScrollerElement?.scrollHeight && virtusoScrollerElement?.clientHeight && virtusoScrollerElement?.scrollHeight > virtusoScrollerElement?.offsetHeight;
-          virtuosoRef.current?.scrollToIndex(isScrollableList ? lastValueIndex ?? 0 : 0);
-        };
-        const rafId = requestAnimationFrame(scrollToIndex);
-        return () => {
-          cancelAnimationFrame(rafId);
-        };
-      }
-    }, [options]);
-    React.useLayoutEffect(() => {
-      if (isLoading === false && optionsProps?.length) {
-        setOptions(optionsProps);
-      }
-    }, [isLoading, optionsProps]);
-    const handleVirtuosoWheel = React.useCallback((e) => {
-      e.stopPropagation();
-    }, []);
-    return /* @__PURE__ */ jsx(
-      SelectContent,
-      {
-        searchElm: hasSearchProp ? /* @__PURE__ */ jsx(
-          SelectSearch,
-          {
-            placeholder: searchPlaceholder,
-            value: searchKeyword,
-            onChange: onSearchInputChange
-          }
-        ) : null,
-        additionalContent,
-        ref,
-        hasFooter,
-        loading: isLoading,
-        closeAfterClear,
-        ...props,
-        children: /* @__PURE__ */ jsx("div", { onWheel: handleVirtuosoWheel, children: /* @__PURE__ */ jsx(
-          Virtuoso,
-          {
-            ref: virtuosoRef,
-            scrollerRef: handleScrollerRef,
-            className: "custom-select-scroll max-h-[50vh] lg:max-h-[250px]",
-            style: { height: listHeight },
-            data: options,
-            itemContent,
-            defaultItemHeight: ItemHeight,
-            components: virtuosoComponents,
-            context
-          }
-        ) })
-      }
-    );
-  }
-);
-SelectContentAutoLayout.displayName = "SelectContentAutoLayout";
-
-export { SelectContentAutoLayout };
-//# sourceMappingURL=select-content-auto-layout.mjs.map
-//# sourceMappingURL=select-content-auto-layout.mjs.map

package/dist/common/interactive/select/select-content-auto-layout.mjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/common/interactive/select/select-content-auto-layout.tsx"],"names":["ref","value"],"mappings":"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","file":"select-content-auto-layout.mjs","sourcesContent":["import { useDevice } from '@/hooks/useDevice';\nimport { TRACKING_TYPE } from '@/lib/types';\nimport { useUISystemContext } from '@/providers/UISystemProvider';\nimport { debounce } from '@/lib/helpers';\nimport * as React from 'react';\nimport { ItemContent, Virtuoso, VirtuosoHandle, Components } from 'react-virtuoso';\nimport { SelectContent } from './select-content';\nimport { SelectSearch } from './select-search';\nimport { SelectList } from './select-layout';\nimport { SelectEmptyState } from './select-states';\nimport { SelectItem } from './select-item';\nimport { useSelectContext } from './context';\nimport { removeDiacritics } from './utils';\nimport {\n  Option,\n  SelectContentAutoLayoutProps,\n  SelectVirtuasoContextType,\n  ItemContentRendererType,\n} from './types';\n\nconst defaultItemContentRenderer: ItemContentRendererType<Option> = ({ multiple, option }) => {\n  if (!option?.value) return null;\n  return (\n    <SelectItem multiple={multiple} option={option} disabled={option?.disable}>\n      <div className=\"flex flex-col\">\n        <div className=\"text-foreground text-base\">{option?.name || option.value}</div>\n        {option?.description && (\n          <div className=\"text-muted-foreground mt-0.5 text-sm\">{option.description}</div>\n        )}\n      </div>\n    </SelectItem>\n  );\n};\n\nconst ItemHeight = 48;\nconst ItemHeightWithDescription = 68; // Height when item has description\n\nconst VirtualSoEmptyPlaceholder: Components<Option, SelectVirtuasoContextType>['EmptyPlaceholder'] =\n  React.forwardRef((_, ref: React.Ref<HTMLDivElement>) => {\n    return <SelectEmptyState ref={ref} />;\n  });\n\nVirtualSoEmptyPlaceholder.displayName = 'VirtualSoEmptyPlaceholder';\n\nconst SelectContentAutoLayout = React.forwardRef<\n  HTMLDivElement,\n  SelectContentAutoLayoutProps<Option>\n>(\n  (\n    {\n      hasSearch: hasSearchProp,\n      autoSearch = true,\n      multiple,\n      options: optionsProps,\n      isLoading,\n      searchPlaceholder = 'Tìm kiếm',\n      itemContentRenderer = defaultItemContentRenderer,\n      trackingSearchName,\n      trackingSearchData,\n      onSearchChange,\n      additionalContent,\n      closeAfterClear,\n      ...props\n    },\n    ref,\n  ) => {\n    const { sendTrack } = useUISystemContext();\n    const { isDesktop } = useDevice();\n    const { setAvailableOptions } = useSelectContext();\n\n    // Auto-populate available options for value normalization\n    React.useEffect(() => {\n      if (optionsProps && setAvailableOptions) {\n        setAvailableOptions(optionsProps);\n      }\n    }, [optionsProps, setAvailableOptions]);\n\n    const [options, setOptions] = React.useState<Option[]>(optionsProps || []);\n    const [searchKeyword, setSearchKeyword] = React.useState('');\n    const virtuosoRef = React.useRef<VirtuosoHandle>(null);\n    const virtuosoScrollerRef = React.useRef<HTMLElement>();\n\n    const handleScrollerRef = React.useCallback((ref: HTMLElement | Window | null) => {\n      virtuosoScrollerRef.current = ref as HTMLElement;\n    }, []);\n\n    const onSearchChangeInternal = React.useMemo(() => {\n      return debounce(async (value: string) => {\n        const valueSearch = value.trim();\n\n        // If external onSearchChange is provided, use it (for API search)\n        if (onSearchChange) {\n          onSearchChange(valueSearch);\n          return;\n        }\n\n        // Otherwise, use internal search logic (for static data)\n        if (!valueSearch) return setOptions(optionsProps);\n        const Fuse = (await import('fuse.js')).default;\n\n        const fuseOptions = new Fuse(optionsProps, {\n          keys: [\n            { name: 'name', weight: 0.7 },\n            { name: 'value', weight: 0.5 },\n            { name: 'description', weight: 0.3 },\n          ],\n          threshold: 0.3,\n          includeScore: true,\n          ignoreLocation: true,\n          findAllMatches: true,\n          getFn: (obj, path) => {\n            const value = Fuse.config.getFn(obj, path);\n            if (typeof value === 'string') {\n              return removeDiacritics(value);\n            }\n            return value;\n          },\n        });\n        const searchResults = fuseOptions.search(removeDiacritics(valueSearch));\n        const newOptions = searchResults.map((item: any) => item.item);\n        setOptions(newOptions);\n        !!trackingSearchName &&\n          sendTrack?.(trackingSearchName, TRACKING_TYPE.click, {\n            search_text: valueSearch,\n            search_result: !!newOptions?.length,\n            ...trackingSearchData,\n          });\n      }, 300);\n    }, [optionsProps, trackingSearchName, trackingSearchData, sendTrack, onSearchChange]);\n\n    const onSearchInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        setSearchKeyword(e.target.value);\n        onSearchChangeInternal(e.target.value);\n      },\n      [onSearchChangeInternal],\n    );\n\n    const itemContent = React.useCallback<ItemContent<Option, any>>(\n      (index: number) => {\n        const item = options?.[index] as Option;\n        return itemContentRenderer({ multiple, option: item });\n      },\n      [itemContentRenderer, multiple, options],\n    );\n\n    const { value } = useSelectContext();\n\n    const context = React.useMemo<SelectVirtuasoContextType>(\n      () => ({\n        searchKeyword,\n      }),\n      [searchKeyword],\n    );\n\n    const hasFooter = multiple && !!options && options?.length > 0;\n\n    const virtuosoComponents = React.useMemo(\n      () => ({\n        List: SelectList,\n        EmptyPlaceholder: VirtualSoEmptyPlaceholder,\n      }),\n      [],\n    );\n\n    // Calculate dynamic height based on content\n    const listHeight = React.useMemo(() => {\n      const minHeight = 204; // Min height for empty state\n\n      // Check if any option has description\n      const hasDescription = options.some((option) => option.description);\n      const itemHeight = hasDescription ? ItemHeightWithDescription : ItemHeight;\n\n      const totalHeight = options.length * itemHeight;\n      const maxHeight = !isDesktop\n        ? typeof window !== 'undefined'\n          ? window.innerHeight * 0.5\n          : 400\n        : 250;\n\n      // If no options, use min height for empty state\n      if (options.length === 0) {\n        return minHeight;\n      }\n\n      return Math.min(totalHeight, maxHeight);\n    }, [options, isDesktop]);\n\n    React.useEffect(() => {\n      const virtusoScrollerElement = virtuosoScrollerRef.current;\n      if (virtusoScrollerElement) {\n        const lastValue = value?.[value?.length - 1];\n        const lastValueIndex = !lastValue\n          ? 0\n          : options?.findIndex((item) => item.value === lastValue.value);\n\n        const scrollToIndex = () => {\n          const isScrollableList =\n            virtusoScrollerElement?.scrollHeight &&\n            virtusoScrollerElement?.clientHeight &&\n            virtusoScrollerElement?.scrollHeight > virtusoScrollerElement?.offsetHeight;\n          virtuosoRef.current?.scrollToIndex(isScrollableList ? (lastValueIndex ?? 0) : 0);\n        };\n        const rafId = requestAnimationFrame(scrollToIndex);\n        return () => {\n          cancelAnimationFrame(rafId);\n        };\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [options]);\n\n    // Fix case gọi API:\n    // Khi đang loading => hiển thị empty state\n    // Khi có data => Vẫn đang hiển thị empty state\n    React.useLayoutEffect(() => {\n      if (isLoading === false && optionsProps?.length) {\n        setOptions(optionsProps);\n      }\n    }, [isLoading, optionsProps]);\n\n    // Handle wheel event on Virtuoso to prevent Dialog scroll\n    const handleVirtuosoWheel = React.useCallback((e: React.WheelEvent) => {\n      e.stopPropagation();\n    }, []);\n\n    return (\n      <SelectContent\n        searchElm={\n          hasSearchProp ? (\n            <SelectSearch\n              placeholder={searchPlaceholder}\n              value={searchKeyword}\n              onChange={onSearchInputChange}\n            />\n          ) : null\n        }\n        additionalContent={additionalContent}\n        ref={ref}\n        hasFooter={hasFooter}\n        loading={isLoading}\n        closeAfterClear={closeAfterClear}\n        {...props}\n      >\n        <div onWheel={handleVirtuosoWheel}>\n          <Virtuoso\n            ref={virtuosoRef}\n            scrollerRef={handleScrollerRef}\n            className=\"custom-select-scroll max-h-[50vh] lg:max-h-[250px]\"\n            style={{ height: listHeight }}\n            data={options}\n            itemContent={itemContent}\n            defaultItemHeight={ItemHeight}\n            components={virtuosoComponents}\n            context={context}\n          />\n        </div>\n      </SelectContent>\n    );\n  },\n);\n\nSelectContentAutoLayout.displayName = 'SelectContentAutoLayout';\n\nexport { SelectContentAutoLayout };\n"]}