shad-m 1.0.2 → 1.0.3

package/dist/common/interactive/select/variants.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var classVarianceAuthority = require('class-variance-authority');
+
+const selectButtonVariants = classVarianceAuthority.cva(
+  [
+    "group/trigger flex flex-row items-center w-full space-x-2 rounded-sm pl-3 pr-2 disabled:cursor-not-allowed",
+    "text-inks",
+    "bg-background disabled:bg-ink-50s",
+    "border border-ink-200 hover:border-blue-300 focus:border-blue aria-expanded:border-blue disabled:border-ink-200 data-[form-state=error]:border-red-500"
+  ],
+  {
+    variants: {
+      size: {
+        default: "h-12",
+        lg: "h-14"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+
+exports.selectButtonVariants = selectButtonVariants;
+//# sourceMappingURL=variants.js.map
+//# sourceMappingURL=variants.js.map

package/dist/common/interactive/select/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/variants.ts"],"names":["cva"],"mappings":";;;;AAEO,MAAM,oBAAA,GAAuBA,0BAAA;AAAA,EAClC;AAAA,IACE,4GAAA;AAAA,IACA,WAAA;AAAA,IACA,mCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,MAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ","file":"variants.js","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const selectButtonVariants = cva(\n  [\n    'group/trigger flex flex-row items-center w-full space-x-2 rounded-sm pl-3 pr-2 disabled:cursor-not-allowed',\n    'text-inks',\n    'bg-background disabled:bg-ink-50s',\n    'border border-ink-200 hover:border-blue-300 focus:border-blue aria-expanded:border-blue disabled:border-ink-200 data-[form-state=error]:border-red-500',\n  ],\n  {\n    variants: {\n      size: {\n        default: 'h-12',\n        lg: 'h-14',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n);\n"]}

package/dist/common/interactive/select/variants.mjs

@@ -0,0 +1,25 @@
+import { cva } from 'class-variance-authority';
+
+const selectButtonVariants = cva(
+  [
+    "group/trigger flex flex-row items-center w-full space-x-2 rounded-sm pl-3 pr-2 disabled:cursor-not-allowed",
+    "text-inks",
+    "bg-background disabled:bg-ink-50s",
+    "border border-ink-200 hover:border-blue-300 focus:border-blue aria-expanded:border-blue disabled:border-ink-200 data-[form-state=error]:border-red-500"
+  ],
+  {
+    variants: {
+      size: {
+        default: "h-12",
+        lg: "h-14"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+
+export { selectButtonVariants };
+//# sourceMappingURL=variants.mjs.map
+//# sourceMappingURL=variants.mjs.map

package/dist/common/interactive/select/variants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/common/interactive/select/variants.ts"],"names":[],"mappings":";;AAEO,MAAM,oBAAA,GAAuB,GAAA;AAAA,EAClC;AAAA,IACE,4GAAA;AAAA,IACA,WAAA;AAAA,IACA,mCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,OAAA,EAAS,MAAA;AAAA,QACT,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ","file":"variants.mjs","sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const selectButtonVariants = cva(\n  [\n    'group/trigger flex flex-row items-center w-full space-x-2 rounded-sm pl-3 pr-2 disabled:cursor-not-allowed',\n    'text-inks',\n    'bg-background disabled:bg-ink-50s',\n    'border border-ink-200 hover:border-blue-300 focus:border-blue aria-expanded:border-blue disabled:border-ink-200 data-[form-state=error]:border-red-500',\n  ],\n  {\n    variants: {\n      size: {\n        default: 'h-12',\n        lg: 'h-14',\n      },\n    },\n    defaultVariants: {\n      size: 'default',\n    },\n  },\n);\n"]}

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

@@ -0,0 +1,76 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var button = require('@/components/button');
+var react = require('react');
+
+const SelectChips = react.memo(
+  ({
+    value,
+    options,
+    onChange,
+    toggleable,
+    multiple,
+    maxLength = -1,
+    iconsMapping,
+    addonIconsMapping,
+    disabled
+  }) => {
+    const memoizedOptions = react.useMemo(() => options, [options]);
+    const handleSelect = react.useCallback(
+      (selectItem) => {
+        if (!multiple) {
+          if (toggleable && value?.some((item) => item.value === selectItem?.value)) {
+            onChange?.([]);
+          } else {
+            onChange?.([selectItem]);
+          }
+        } else if (value?.some((item) => item.value === selectItem?.value)) {
+          const newValue = value.filter((item) => item.value !== selectItem?.value);
+          onChange?.(newValue);
+        } else if (maxLength === -1 || (value ?? [])?.length < maxLength) {
+          onChange?.([...value ?? [], selectItem]);
+        }
+      },
+      [value, multiple, onChange]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-3", children: memoizedOptions?.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+      ChipItem,
+      {
+        option: type,
+        active: value?.some((item) => item.value === type?.value),
+        onSelect: handleSelect,
+        icon: iconsMapping?.[type.value],
+        addonIcon: addonIconsMapping?.[type.value],
+        disabled
+      },
+      type.value
+    )) });
+  }
+);
+SelectChips.displayName = "SelectChips";
+const ChipItem = react.memo(({ active, icon, addonIcon, option, onSelect, disabled }) => {
+  const IconComp = icon ? icon : "span";
+  const AddonIconComp = addonIcon ? addonIcon : "span";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    button.Button,
+    {
+      variant: active ? "secondary" : "outline",
+      size: "sm",
+      className: "rounded-full px-4",
+      onClick: () => !disabled && onSelect?.(option),
+      type: "button",
+      disabled: active ? false : disabled,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: active ? "ic-active" : "" }),
+        option.name ?? option.value,
+        addonIcon && /* @__PURE__ */ jsxRuntime.jsx(AddonIconComp, { className: active ? "ic-active" : "" })
+      ]
+    },
+    option.value
+  );
+});
+
+exports.SelectChips = SelectChips;
+//# sourceMappingURL=select-chip.js.map
+//# sourceMappingURL=select-chip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/select-chip.tsx"],"names":["memo","useMemo","useCallback","jsx","jsxs","Button"],"mappings":"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","file":"select-chip.js","sourcesContent":["import { Option } from '@/common/interactive';\nimport { Button } from '@/components/button';\nimport {\n  cloneElement,\n  FunctionComponent,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n} from 'react';\n\ninterface SelectChipsProps {\n  multiple?: boolean;\n  toggleable?: boolean;\n  options?: Option[];\n  value?: Option[];\n  onChange?: (value?: Option[]) => void;\n  maxLength?: number;\n  iconsMapping?: { [key: string]: ReactNode | FunctionComponent };\n  addonIconsMapping?: { [key: string]: ReactNode | FunctionComponent };\n  disabled?: boolean;\n}\n\nconst SelectChips = memo(\n  ({\n    value,\n    options,\n    onChange,\n    toggleable,\n    multiple,\n    maxLength = -1,\n    iconsMapping,\n    addonIconsMapping,\n    disabled,\n  }: SelectChipsProps) => {\n    const memoizedOptions = useMemo(() => options, [options]);\n\n    const handleSelect = useCallback(\n      (selectItem: Option) => {\n        if (!multiple) {\n          if (toggleable && value?.some((item) => item.value === selectItem?.value)) {\n            onChange?.([]);\n          } else {\n            onChange?.([selectItem]);\n          }\n        } else if (value?.some((item) => item.value === selectItem?.value)) {\n          const newValue = (value as Option[]).filter((item) => item.value !== selectItem?.value);\n          onChange?.(newValue);\n        } else if (maxLength === -1 || ((value as Option[]) ?? [])?.length < maxLength) {\n          onChange?.([...(value ?? []), selectItem]);\n        }\n      },\n      [value, multiple, onChange],\n    );\n\n    return (\n      <div className=\"flex flex-wrap gap-3\">\n        {memoizedOptions?.map((type: Option) => (\n          <ChipItem\n            key={type.value}\n            option={type}\n            active={value?.some((item) => item.value === type?.value)}\n            onSelect={handleSelect}\n            icon={iconsMapping?.[type.value]}\n            addonIcon={addonIconsMapping?.[type.value]}\n            disabled={disabled}\n          />\n        ))}\n      </div>\n    );\n  },\n);\nSelectChips.displayName = 'SelectChips';\n\nconst ChipItem = memo(({ active, icon, addonIcon, option, onSelect, disabled }: any) => {\n  const IconComp = icon ? icon : 'span';\n  const AddonIconComp = addonIcon ? addonIcon : 'span';\n\n  return (\n    <Button\n      variant={active ? 'secondary' : 'outline'}\n      size=\"sm\"\n      className=\"rounded-full px-4\"\n      key={option.value}\n      onClick={() => !disabled && onSelect?.(option)}\n      type=\"button\"\n      disabled={active ? false : disabled}\n    >\n      {icon && <IconComp className={active ? 'ic-active' : ''} />}\n      {option.name ?? option.value}\n      {addonIcon && <AddonIconComp className={active ? 'ic-active' : ''} />}\n    </Button>\n  );\n});\n\nexport { SelectChips };\n"]}

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

@@ -0,0 +1,74 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Button } from '@/components/button';
+import { memo, useMemo, useCallback } from 'react';
+
+const SelectChips = memo(
+  ({
+    value,
+    options,
+    onChange,
+    toggleable,
+    multiple,
+    maxLength = -1,
+    iconsMapping,
+    addonIconsMapping,
+    disabled
+  }) => {
+    const memoizedOptions = useMemo(() => options, [options]);
+    const handleSelect = useCallback(
+      (selectItem) => {
+        if (!multiple) {
+          if (toggleable && value?.some((item) => item.value === selectItem?.value)) {
+            onChange?.([]);
+          } else {
+            onChange?.([selectItem]);
+          }
+        } else if (value?.some((item) => item.value === selectItem?.value)) {
+          const newValue = value.filter((item) => item.value !== selectItem?.value);
+          onChange?.(newValue);
+        } else if (maxLength === -1 || (value ?? [])?.length < maxLength) {
+          onChange?.([...value ?? [], selectItem]);
+        }
+      },
+      [value, multiple, onChange]
+    );
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: memoizedOptions?.map((type) => /* @__PURE__ */ jsx(
+      ChipItem,
+      {
+        option: type,
+        active: value?.some((item) => item.value === type?.value),
+        onSelect: handleSelect,
+        icon: iconsMapping?.[type.value],
+        addonIcon: addonIconsMapping?.[type.value],
+        disabled
+      },
+      type.value
+    )) });
+  }
+);
+SelectChips.displayName = "SelectChips";
+const ChipItem = memo(({ active, icon, addonIcon, option, onSelect, disabled }) => {
+  const IconComp = icon ? icon : "span";
+  const AddonIconComp = addonIcon ? addonIcon : "span";
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      variant: active ? "secondary" : "outline",
+      size: "sm",
+      className: "rounded-full px-4",
+      onClick: () => !disabled && onSelect?.(option),
+      type: "button",
+      disabled: active ? false : disabled,
+      children: [
+        icon && /* @__PURE__ */ jsx(IconComp, { className: active ? "ic-active" : "" }),
+        option.name ?? option.value,
+        addonIcon && /* @__PURE__ */ jsx(AddonIconComp, { className: active ? "ic-active" : "" })
+      ]
+    },
+    option.value
+  );
+});
+
+export { SelectChips };
+//# sourceMappingURL=select-chip.mjs.map
+//# sourceMappingURL=select-chip.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/select-chip.tsx"],"names":[],"mappings":"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","file":"select-chip.mjs","sourcesContent":["import { Option } from '@/common/interactive';\nimport { Button } from '@/components/button';\nimport {\n  cloneElement,\n  FunctionComponent,\n  memo,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n} from 'react';\n\ninterface SelectChipsProps {\n  multiple?: boolean;\n  toggleable?: boolean;\n  options?: Option[];\n  value?: Option[];\n  onChange?: (value?: Option[]) => void;\n  maxLength?: number;\n  iconsMapping?: { [key: string]: ReactNode | FunctionComponent };\n  addonIconsMapping?: { [key: string]: ReactNode | FunctionComponent };\n  disabled?: boolean;\n}\n\nconst SelectChips = memo(\n  ({\n    value,\n    options,\n    onChange,\n    toggleable,\n    multiple,\n    maxLength = -1,\n    iconsMapping,\n    addonIconsMapping,\n    disabled,\n  }: SelectChipsProps) => {\n    const memoizedOptions = useMemo(() => options, [options]);\n\n    const handleSelect = useCallback(\n      (selectItem: Option) => {\n        if (!multiple) {\n          if (toggleable && value?.some((item) => item.value === selectItem?.value)) {\n            onChange?.([]);\n          } else {\n            onChange?.([selectItem]);\n          }\n        } else if (value?.some((item) => item.value === selectItem?.value)) {\n          const newValue = (value as Option[]).filter((item) => item.value !== selectItem?.value);\n          onChange?.(newValue);\n        } else if (maxLength === -1 || ((value as Option[]) ?? [])?.length < maxLength) {\n          onChange?.([...(value ?? []), selectItem]);\n        }\n      },\n      [value, multiple, onChange],\n    );\n\n    return (\n      <div className=\"flex flex-wrap gap-3\">\n        {memoizedOptions?.map((type: Option) => (\n          <ChipItem\n            key={type.value}\n            option={type}\n            active={value?.some((item) => item.value === type?.value)}\n            onSelect={handleSelect}\n            icon={iconsMapping?.[type.value]}\n            addonIcon={addonIconsMapping?.[type.value]}\n            disabled={disabled}\n          />\n        ))}\n      </div>\n    );\n  },\n);\nSelectChips.displayName = 'SelectChips';\n\nconst ChipItem = memo(({ active, icon, addonIcon, option, onSelect, disabled }: any) => {\n  const IconComp = icon ? icon : 'span';\n  const AddonIconComp = addonIcon ? addonIcon : 'span';\n\n  return (\n    <Button\n      variant={active ? 'secondary' : 'outline'}\n      size=\"sm\"\n      className=\"rounded-full px-4\"\n      key={option.value}\n      onClick={() => !disabled && onSelect?.(option)}\n      type=\"button\"\n      disabled={active ? false : disabled}\n    >\n      {icon && <IconComp className={active ? 'ic-active' : ''} />}\n      {option.name ?? option.value}\n      {addonIcon && <AddonIconComp className={active ? 'ic-active' : ''} />}\n    </Button>\n  );\n});\n\nexport { SelectChips };\n"]}

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

@@ -0,0 +1,236 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var select = require('@/common/interactive/select');
+var Icon = require('@/assets/Icon');
+var button = require('@/components/button');
+var lucideReact = require('lucide-react');
+var input = require('@/components/input');
+var skeleton = require('@/components/skeleton');
+var utils = require('@/lib/utils');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+function findIndexOrLast(array = []) {
+  for (let i = 0; i < array.length; i++) {
+    if (array[i] === null || array[i] === void 0) {
+      return i;
+    }
+  }
+  if (!array || !array.length) return 0;
+  return array.length - 1;
+}
+const SelectLevel = React.memo(
+  ({
+    value,
+    options,
+    label,
+    multiple,
+    onValueChange,
+    onChange,
+    loading,
+    hasSearch,
+    hasRemoveIcon,
+    isError,
+    placeholder,
+    disabled,
+    valueLabel
+  }) => {
+    const [levelActive, setLevelActive] = React__default.default.useState(0);
+    const [selectedLevelValues, setSelectedLevelValues] = React__default.default.useState([]);
+    const [selectedTempValues, setSelectedTempValues] = React__default.default.useState([]);
+    const lastLevel = React.useMemo(() => (options?.length ?? 1) - 1, [options]);
+    const selectedValue = React.useMemo(() => {
+      let values = selectedLevelValues[lastLevel] ?? [];
+      if (values?.length === 0 && levelActive > 0)
+        values = [selectedLevelValues[levelActive - 1]].filter(Boolean);
+      return values;
+    }, [levelActive, selectedLevelValues]);
+    const selectedTempValue = React.useMemo(() => {
+      let values = selectedTempValues[lastLevel] ?? [];
+      if (values?.length === 0 && levelActive > 0)
+        values = [selectedTempValues[levelActive - 1]].filter(Boolean);
+      return values;
+    }, [lastLevel, selectedTempValues]);
+    const preValue = React.useMemo(
+      () => levelActive <= 0 ? null : selectedTempValues[levelActive - 1],
+      [selectedTempValues, levelActive]
+    );
+    React.useEffect(() => {
+      if (JSON.stringify(value) != JSON.stringify(selectedLevelValues)) {
+        const levelIndex = findIndexOrLast(value);
+        setLevelActive(levelIndex);
+        setSelectedLevelValues(value ?? []);
+        setSelectedTempValues(value ?? []);
+      }
+    }, [value]);
+    const handleValueChange = (values, level) => {
+      let newSelectedValues = [...selectedTempValues];
+      const newValues = values?.filter((item) => !/^\d+\//.test(item.value)) ?? [];
+      if (level === lastLevel) {
+        newSelectedValues[level] = newValues;
+        !multiple && setSelectedLevelValues([...newSelectedValues]);
+        !multiple && onChange?.(newSelectedValues);
+      } else {
+        newSelectedValues[level] = newValues[0];
+        newSelectedValues = newSelectedValues.splice(0, level + 1);
+        setLevelActive(level + 1);
+      }
+      setSelectedTempValues([...newSelectedValues]);
+      onValueChange?.(newSelectedValues);
+    };
+    const handleBack = () => {
+      if (levelActive > 0) {
+        const newSelectedValues = [...selectedTempValues].splice(0, levelActive - 1);
+        setLevelActive(levelActive - 1);
+        setSelectedTempValues([...newSelectedValues]);
+        setSelectedLevelValues([...newSelectedValues]);
+        onChange?.([...newSelectedValues]);
+      }
+    };
+    const handleApplyCustomValues = () => {
+      setSelectedLevelValues(selectedTempValues);
+      onChange?.(selectedTempValues);
+    };
+    const handleClearValue = () => {
+      setSelectedTempValues([]);
+      setSelectedLevelValues([]);
+      setLevelActive(0);
+      onChange?.([]);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select,
+      {
+        value: selectedTempValue?.map((item) => {
+          let values = selectedTempValues[lastLevel] ?? [];
+          if (values?.length === 0 && levelActive > 0)
+            return {
+              ...item,
+              value: `${levelActive}/${item.value}`
+            };
+          return item;
+        }),
+        label,
+        onValueChange: (values) => handleValueChange(values, levelActive),
+        onClearValue: handleClearValue,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { isError, hasRemoveIcon, placeholder, children: /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { children: () => typeof valueLabel === "function" ? valueLabel(selectedValue) : selectedValue?.map((option) => option.name ?? option.value)?.join(", ") }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(select.SelectBody, { className: "flex flex-col !p-0 !pt-3", children: [
+            preValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex cursor-pointer items-center gap-1 px-3 pb-3", onClick: handleBack, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowLeftIcon, {}),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-t18sb text-overflow text-ellipsis whitespace-nowrap", children: preValue?.name ?? preValue?.value ?? "" })
+            ] }),
+            options?.map(
+              (levelOptions, index) => levelActive === index ? /* @__PURE__ */ jsxRuntime.jsx(
+                SelectOptions,
+                {
+                  options: levelOptions,
+                  multiple: lastLevel === index ? multiple : false,
+                  selectable: lastLevel === index,
+                  loading,
+                  hasSearch
+                },
+                `${index}-${levelOptions?.length}`
+              ) : null
+            ),
+            multiple && levelActive === lastLevel && /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "relative flex gap-3 p-3",
+                style: { boxShadow: "0px -8px 24px -4px #172E7E17" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      type: "button",
+                      variant: "link",
+                      size: "sm",
+                      onClick: () => handleValueChange([], levelActive),
+                      children: "B\u1ECF ch\u1ECDn"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(select.SelectClose, { className: "w-full", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    button.Button,
+                    {
+                      type: "button",
+                      className: "w-full",
+                      size: "sm",
+                      onClick: handleApplyCustomValues,
+                      children: [
+                        "\xC1p d\u1EE5ng",
+                        " ",
+                        Array.isArray(selectedTempValues?.[levelActive]) && !!selectedTempValues?.[levelActive]?.length ? `(${selectedTempValues?.[levelActive]?.length})` : ""
+                      ]
+                    }
+                  ) })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+const SelectOptions = React.memo(
+  ({ options, multiple, selectable, loading, hasSearch }) => {
+    const [searchedOptions, setSearchedOptions] = React__default.default.useState(options ?? []);
+    const handleSearch = (searchValue) => {
+      if (!searchValue) {
+        setSearchedOptions(options ?? []);
+      } else {
+        const resultOptions = options?.filter(
+          // (option) => (option.name?.toLowerCase().search(searchValue.toLowerCase()) ?? -1) > -1,
+          (option) => option.name?.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").includes(
+            searchValue.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "")
+          ) ?? false
+        );
+        setSearchedOptions(resultOptions ?? []);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-2 overflow-hidden", children: [
+      hasSearch && /* @__PURE__ */ jsxRuntime.jsx(
+        input.Input,
+        {
+          className: "mx-3",
+          buttonIcon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { color: "#bbbbbb", className: "h-4 w-4" }),
+          onChange: (e) => handleSearch(e.target.value),
+          placeholder: "T\xECm ki\u1EBFm"
+        }
+      ),
+      loading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2 px-3 pb-3", children: new Array(5).fill(1).map((_item, index) => /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-10 w-full" }, index)) }),
+      " ",
+      !loading && /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: utils.cn(
+            "divide-border max-h-[360px] flex-1 divide-y overflow-auto",
+            searchedOptions?.length && "border-border border-t"
+          ),
+          children: [
+            searchedOptions?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+              select.SelectItem,
+              {
+                multiple,
+                option,
+                onClick: (e) => !selectable && e.stopPropagation(),
+                rightIcon: selectable ? null : /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowRightIcon, {}),
+                className: "p-3",
+                children: option?.name || option?.value
+              }
+            )),
+            !searchedOptions?.length && /* @__PURE__ */ jsxRuntime.jsx(select.SelectEmptyState, { className: "p-3" })
+          ]
+        }
+      )
+    ] });
+  }
+);
+
+exports.SelectLevel = SelectLevel;
+//# sourceMappingURL=select-level.js.map
+//# sourceMappingURL=select-level.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/select-level.tsx"],"names":["memo","React","useMemo","useEffect","jsxs","Select","jsx","SelectTrigger","SelectValue","SelectBody","ArrowLeftIcon","Button","SelectClose","Input","Search","Skeleton","cn","SelectItem","ArrowRightIcon","SelectEmptyState"],"mappings":"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","file":"select-level.js","sourcesContent":["import React, { memo, useEffect, useMemo } from 'react';\nimport {\n  Option,\n  Select,\n  SelectBody,\n  SelectClose,\n  SelectEmptyState,\n  SelectItem,\n  SelectProps,\n  SelectTrigger,\n  SelectValue,\n} from '@/common/interactive/select';\nimport { ArrowLeftIcon, ArrowRightIcon } from '@/assets/Icon';\nimport { Button } from '@/components/button';\nimport { Search } from 'lucide-react';\nimport { Input } from '@/components/input';\nimport { Skeleton } from '@/components/skeleton';\nimport { cn } from '@/lib/utils';\n\nfunction findIndexOrLast(array: any = []) {\n  for (let i = 0; i < array.length; i++) {\n    if (array[i] === null || array[i] === undefined) {\n      return i;\n    }\n  }\n\n  if (!array || !array.length) return 0;\n\n  return array.length - 1; // Nếu tất cả đều có giá trị\n}\n\n// @ts-ignore\nexport interface SelectWithLevelProps extends Omit<SelectProps, 'children'> {\n  value?: (Option | Option[] | undefined)[];\n  options?: Option[][];\n  multiple?: boolean;\n  onValueChange?: (values: (Option | Option[] | undefined)[]) => void;\n  onChange?: (values: (Option | Option[] | undefined)[]) => void;\n  loading?: boolean;\n  hasSearch?: boolean;\n  hasRemoveIcon?: boolean;\n  isError?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  valueLabel?: (selectedValues?: Option[]) => string;\n}\n\nconst SelectLevel = memo(\n  ({\n    value,\n    options,\n    label,\n    multiple,\n    onValueChange,\n    onChange,\n    loading,\n    hasSearch,\n    hasRemoveIcon,\n    isError,\n    placeholder,\n    disabled,\n    valueLabel,\n  }: SelectWithLevelProps) => {\n    const [levelActive, setLevelActive] = React.useState(0);\n    const [selectedLevelValues, setSelectedLevelValues] = React.useState<\n      (Option | Option[] | undefined)[]\n    >([]);\n    const [selectedTempValues, setSelectedTempValues] = React.useState<\n      (Option | Option[] | undefined)[]\n    >([]);\n\n    const lastLevel = useMemo(() => (options?.length ?? 1) - 1, [options]);\n    const selectedValue: Option[] = useMemo(() => {\n      let values = (selectedLevelValues[lastLevel] ?? []) as Option[];\n\n      if (values?.length === 0 && levelActive > 0)\n        values = [selectedLevelValues[levelActive - 1]].filter(Boolean) as Option[];\n\n      return values;\n    }, [levelActive, selectedLevelValues]);\n    const selectedTempValue: Option[] = useMemo(() => {\n      let values = (selectedTempValues[lastLevel] ?? []) as Option[];\n\n      if (values?.length === 0 && levelActive > 0)\n        values = [selectedTempValues[levelActive - 1]].filter(Boolean) as Option[];\n\n      return values;\n    }, [lastLevel, selectedTempValues]);\n    const preValue = useMemo(\n      () => (levelActive <= 0 ? null : (selectedTempValues[levelActive - 1] as Option)),\n      [selectedTempValues, levelActive],\n    );\n\n    useEffect(() => {\n      if (JSON.stringify(value) != JSON.stringify(selectedLevelValues)) {\n        const levelIndex: number = findIndexOrLast(value);\n\n        setLevelActive(levelIndex);\n        setSelectedLevelValues(value ?? []);\n        setSelectedTempValues(value ?? []);\n      }\n    }, [value]);\n\n    const handleValueChange = (values: Option[], level: number) => {\n      let newSelectedValues = [...selectedTempValues];\n      const newValues = values?.filter((item) => !/^\\d+\\//.test(item.value)) ?? [];\n\n      if (level === lastLevel) {\n        newSelectedValues[level] = newValues;\n        !multiple && setSelectedLevelValues([...newSelectedValues]);\n        !multiple && onChange?.(newSelectedValues);\n      } else {\n        newSelectedValues[level] = newValues[0];\n        newSelectedValues = newSelectedValues.splice(0, level + 1);\n        setLevelActive(level + 1);\n        // setSelectedLevelValues([...newSelectedValues]);\n      }\n\n      setSelectedTempValues([...newSelectedValues]);\n      onValueChange?.(newSelectedValues);\n    };\n\n    const handleBack = () => {\n      if (levelActive > 0) {\n        const newSelectedValues = [...selectedTempValues].splice(0, levelActive - 1);\n\n        setLevelActive(levelActive - 1);\n        setSelectedTempValues([...newSelectedValues]);\n        setSelectedLevelValues([...newSelectedValues]);\n        // onValueChange?.(newSelectedValues);\n        onChange?.([...newSelectedValues]);\n      }\n    };\n\n    const handleApplyCustomValues = () => {\n      setSelectedLevelValues(selectedTempValues);\n      onChange?.(selectedTempValues);\n    };\n\n    const handleClearValue = () => {\n      setSelectedTempValues([]);\n      setSelectedLevelValues([]);\n      setLevelActive(0);\n      onChange?.([]);\n    };\n\n    const handleResetTempValues = (open: boolean) => {\n      if (open) {\n        setSelectedTempValues(selectedLevelValues);\n      }\n    };\n\n    return (\n      <Select\n        value={selectedTempValue?.map((item) => {\n          let values = (selectedTempValues[lastLevel] ?? []) as Option[];\n\n          if (values?.length === 0 && levelActive > 0)\n            return {\n              ...item,\n              value: `${levelActive}/${item.value}`,\n            };\n\n          return item;\n        })}\n        label={label}\n        onValueChange={(values) => handleValueChange(values, levelActive)}\n        onClearValue={handleClearValue}\n        // onOpenChange={handleResetTempValues}\n        disabled={disabled}\n      >\n        <SelectTrigger isError={isError} hasRemoveIcon={hasRemoveIcon} placeholder={placeholder}>\n          <SelectValue>\n            {() =>\n              typeof valueLabel === 'function'\n                ? valueLabel(selectedValue)\n                : selectedValue?.map((option) => option.name ?? option.value)?.join(', ')\n            }\n          </SelectValue>\n        </SelectTrigger>\n\n        <SelectBody className=\"flex flex-col !p-0 !pt-3\">\n          {preValue && (\n            <div className=\"flex cursor-pointer items-center gap-1 px-3 pb-3\" onClick={handleBack}>\n              <ArrowLeftIcon />\n              <span className=\"text-t18sb text-overflow text-ellipsis whitespace-nowrap\">\n                {preValue?.name ?? preValue?.value ?? ''}\n              </span>\n            </div>\n          )}\n\n          {options?.map((levelOptions: Option[], index: number) =>\n            levelActive === index ? (\n              <SelectOptions\n                key={`${index}-${levelOptions?.length}`}\n                options={levelOptions}\n                multiple={lastLevel === index ? multiple : false}\n                selectable={lastLevel === index}\n                loading={loading}\n                hasSearch={hasSearch}\n              />\n            ) : null,\n          )}\n\n          {multiple && levelActive === lastLevel && (\n            <div\n              className=\"relative flex gap-3 p-3\"\n              style={{ boxShadow: '0px -8px 24px -4px #172E7E17' }}\n            >\n              <Button\n                type=\"button\"\n                variant=\"link\"\n                size=\"sm\"\n                onClick={() => handleValueChange([], levelActive)}\n              >\n                Bỏ chọn\n              </Button>\n              <SelectClose className=\"w-full\" asChild>\n                <Button\n                  type=\"button\"\n                  className=\"w-full\"\n                  size=\"sm\"\n                  onClick={handleApplyCustomValues}\n                >\n                  Áp dụng{' '}\n                  {Array.isArray(selectedTempValues?.[levelActive]) &&\n                  !!(selectedTempValues?.[levelActive] as Option[])?.length\n                    ? `(${(selectedTempValues?.[levelActive] as Option[])?.length})`\n                    : ''}\n                </Button>\n              </SelectClose>\n            </div>\n          )}\n        </SelectBody>\n      </Select>\n    );\n  },\n);\n\ninterface SelectOptionsProps {\n  options?: Option[];\n  multiple?: boolean;\n  selectable?: boolean;\n  loading?: boolean;\n  hasSearch?: boolean;\n}\n\nconst SelectOptions = memo(\n  ({ options, multiple, selectable, loading, hasSearch }: SelectOptionsProps) => {\n    const [searchedOptions, setSearchedOptions] = React.useState<Option[]>(options ?? []);\n\n    const handleSearch = (searchValue?: string) => {\n      if (!searchValue) {\n        setSearchedOptions(options ?? []);\n      } else {\n        const resultOptions = options?.filter(\n          // (option) => (option.name?.toLowerCase().search(searchValue.toLowerCase()) ?? -1) > -1,\n          (option) =>\n            option.name\n              ?.toLowerCase()\n              .normalize('NFD')\n              .replace(/[\\u0300-\\u036f]/g, '')\n              .includes(\n                searchValue\n                  .toLowerCase()\n                  .normalize('NFD')\n                  .replace(/[\\u0300-\\u036f]/g, ''),\n              ) ?? false,\n        );\n        setSearchedOptions(resultOptions ?? []);\n      }\n    };\n\n    return (\n      <div className=\"flex flex-1 flex-col gap-2 overflow-hidden\">\n        {hasSearch && (\n          <Input\n            className=\"mx-3\"\n            buttonIcon={<Search color=\"#bbbbbb\" className=\"h-4 w-4\" />}\n            onChange={(e) => handleSearch(e.target.value)}\n            placeholder=\"Tìm kiếm\"\n          />\n        )}\n        {loading && (\n          <div className=\"space-y-2 px-3 pb-3\">\n            {new Array(5).fill(1).map((_item, index) => (\n              <Skeleton className=\"h-10 w-full\" key={index} />\n            ))}\n          </div>\n        )}{' '}\n        {!loading && (\n          <div\n            className={cn(\n              'divide-border max-h-[360px] flex-1 divide-y overflow-auto',\n              searchedOptions?.length && 'border-border border-t',\n            )}\n          >\n            {searchedOptions?.map((option) => (\n              <SelectItem\n                multiple={multiple}\n                option={option}\n                onClick={(e) => !selectable && e.stopPropagation()}\n                rightIcon={selectable ? null : <ArrowRightIcon />}\n                className=\"p-3\"\n              >\n                {option?.name || option?.value}\n              </SelectItem>\n            ))}\n\n            {!searchedOptions?.length && <SelectEmptyState className=\"p-3\" />}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nexport { SelectLevel };\n"]}