shad-m 1.0.0

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

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

@@ -0,0 +1,230 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { memo, useMemo, useEffect } from 'react';
+import { Select, SelectTrigger, SelectValue, SelectBody, SelectClose, SelectItem, SelectEmptyState } from '@/common/interactive/select';
+import { ArrowLeftIcon, ArrowRightIcon } from '@/assets/Icon';
+import { Button } from '@/components/button';
+import { Search } from 'lucide-react';
+import { Input } from '@/components/input';
+import { Skeleton } from '@/components/skeleton';
+import { cn } from '@/lib/utils';
+
+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 = memo(
+  ({
+    value,
+    options,
+    label,
+    multiple,
+    onValueChange,
+    onChange,
+    loading,
+    hasSearch,
+    hasRemoveIcon,
+    isError,
+    placeholder,
+    disabled,
+    valueLabel
+  }) => {
+    const [levelActive, setLevelActive] = React.useState(0);
+    const [selectedLevelValues, setSelectedLevelValues] = React.useState([]);
+    const [selectedTempValues, setSelectedTempValues] = React.useState([]);
+    const lastLevel = useMemo(() => (options?.length ?? 1) - 1, [options]);
+    const selectedValue = useMemo(() => {
+      let values = selectedLevelValues[lastLevel] ?? [];
+      if (values?.length === 0 && levelActive > 0)
+        values = [selectedLevelValues[levelActive - 1]].filter(Boolean);
+      return values;
+    }, [levelActive, selectedLevelValues]);
+    const selectedTempValue = useMemo(() => {
+      let values = selectedTempValues[lastLevel] ?? [];
+      if (values?.length === 0 && levelActive > 0)
+        values = [selectedTempValues[levelActive - 1]].filter(Boolean);
+      return values;
+    }, [lastLevel, selectedTempValues]);
+    const preValue = useMemo(
+      () => levelActive <= 0 ? null : selectedTempValues[levelActive - 1],
+      [selectedTempValues, levelActive]
+    );
+    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__ */ jsxs(
+      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__ */ jsx(SelectTrigger, { isError, hasRemoveIcon, placeholder, children: /* @__PURE__ */ jsx(SelectValue, { children: () => typeof valueLabel === "function" ? valueLabel(selectedValue) : selectedValue?.map((option) => option.name ?? option.value)?.join(", ") }) }),
+          /* @__PURE__ */ jsxs(SelectBody, { className: "flex flex-col !p-0 !pt-3", children: [
+            preValue && /* @__PURE__ */ jsxs("div", { className: "flex cursor-pointer items-center gap-1 px-3 pb-3", onClick: handleBack, children: [
+              /* @__PURE__ */ jsx(ArrowLeftIcon, {}),
+              /* @__PURE__ */ jsx("span", { className: "text-t18sb text-overflow text-ellipsis whitespace-nowrap", children: preValue?.name ?? preValue?.value ?? "" })
+            ] }),
+            options?.map(
+              (levelOptions, index) => levelActive === index ? /* @__PURE__ */ jsx(
+                SelectOptions,
+                {
+                  options: levelOptions,
+                  multiple: lastLevel === index ? multiple : false,
+                  selectable: lastLevel === index,
+                  loading,
+                  hasSearch
+                },
+                `${index}-${levelOptions?.length}`
+              ) : null
+            ),
+            multiple && levelActive === lastLevel && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "relative flex gap-3 p-3",
+                style: { boxShadow: "0px -8px 24px -4px #172E7E17" },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "link",
+                      size: "sm",
+                      onClick: () => handleValueChange([], levelActive),
+                      children: "B\u1ECF ch\u1ECDn"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(SelectClose, { className: "w-full", asChild: true, children: /* @__PURE__ */ jsxs(
+                    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 = memo(
+  ({ options, multiple, selectable, loading, hasSearch }) => {
+    const [searchedOptions, setSearchedOptions] = React.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__ */ jsxs("div", { className: "flex flex-1 flex-col gap-2 overflow-hidden", children: [
+      hasSearch && /* @__PURE__ */ jsx(
+        Input,
+        {
+          className: "mx-3",
+          buttonIcon: /* @__PURE__ */ jsx(Search, { color: "#bbbbbb", className: "h-4 w-4" }),
+          onChange: (e) => handleSearch(e.target.value),
+          placeholder: "T\xECm ki\u1EBFm"
+        }
+      ),
+      loading && /* @__PURE__ */ jsx("div", { className: "space-y-2 px-3 pb-3", children: new Array(5).fill(1).map((_item, index) => /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-full" }, index)) }),
+      " ",
+      !loading && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "divide-border max-h-[360px] flex-1 divide-y overflow-auto",
+            searchedOptions?.length && "border-border border-t"
+          ),
+          children: [
+            searchedOptions?.map((option) => /* @__PURE__ */ jsx(
+              SelectItem,
+              {
+                multiple,
+                option,
+                onClick: (e) => !selectable && e.stopPropagation(),
+                rightIcon: selectable ? null : /* @__PURE__ */ jsx(ArrowRightIcon, {}),
+                className: "p-3",
+                children: option?.name || option?.value
+              }
+            )),
+            !searchedOptions?.length && /* @__PURE__ */ jsx(SelectEmptyState, { className: "p-3" })
+          ]
+        }
+      )
+    ] });
+  }
+);
+
+export { SelectLevel };
+//# sourceMappingURL=select-level.mjs.map
+//# sourceMappingURL=select-level.mjs.map

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

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

package/dist/common/interactive/select-range.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Option, SelectProps } from '@/common/interactive/select';
+export interface SelectRangeProps extends Omit<SelectProps, 'children'> {
+    children?: React.ReactNode | ((field: {
+        label?: string;
+        value?: any;
+        minValue?: any;
+        maxValue?: any;
+        onChange?: (value?: any) => void;
+        isMin?: boolean;
+        isMax: boolean;
+    }) => React.ReactNode);
+    options?: Option[];
+    onSelectChange?: (value?: Option[]) => void;
+    onInputChange?: (fromValue?: any, toValue?: any) => void;
+    fromLabel?: string;
+    fromValue?: any;
+    toLabel?: string;
+    toValue?: any;
+    valueLabel?: (fromValue?: any, toValue?: any) => string;
+    hasRemoveIcon?: boolean;
+    loading?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    bodyClassName?: string;
+    requiredCustomInput?: boolean;
+}
+declare const SelectRange: React.MemoExoticComponent<({ label, children, options, fromValue, toValue, onSelectChange, onInputChange, fromLabel, toLabel, valueLabel, hasRemoveIcon, loading, placeholder, disabled, bodyClassName, requiredCustomInput, }: SelectRangeProps) => import("react/jsx-runtime").JSX.Element>;
+export { SelectRange };
+//# sourceMappingURL=select-range.d.ts.map

package/dist/common/interactive/select-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-range.d.ts","sourceRoot":"","sources":["../../../src/common/interactive/select-range.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6E,MAAM,OAAO,CAAC;AAClG,OAAO,EACL,MAAM,EAMN,WAAW,EAGZ,MAAM,6BAA6B,CAAC;AAMrC,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC;IACrE,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,KAAK,CAAC,EAAE,GAAG,CAAC;QACZ,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,QAAQ,CAAC,EAAE,GAAG,CAAC;QACf,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;QACjC,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,KAAK,EAAE,OAAO,CAAC;KAChB,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC5C,aAAa,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,GAAG,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,UAAU,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;IACxD,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,WAAW,kOAkBZ,gBAAgB,6CAgMpB,CAAC;AA2CF,OAAO,EAAE,WAAW,EAAE,CAAC"}

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

@@ -0,0 +1,211 @@
+'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 skeleton = require('@/components/skeleton');
+var utils = require('@/lib/utils');
+
+const SelectRange = react.memo(
+  ({
+    label,
+    children,
+    options = [],
+    fromValue,
+    toValue,
+    onSelectChange,
+    onInputChange,
+    fromLabel,
+    toLabel,
+    valueLabel,
+    hasRemoveIcon,
+    loading,
+    placeholder,
+    disabled,
+    bodyClassName,
+    requiredCustomInput
+  }) => {
+    const [customValues, setCustomValues] = react.useState([void 0, void 0]);
+    const [tempValues, setTempValues] = react.useState([void 0, void 0]);
+    const [selectedValue, setSelectedValue] = react.useState();
+    react.useEffect(() => {
+      if (JSON.stringify(customValues) !== JSON.stringify([fromValue ?? "", toValue ?? ""]) && options?.length > 0) {
+        const value = `${fromValue ?? ""}${fromValue || toValue ? "-" : ""}${toValue ?? ""}`;
+        if (options?.some((i) => i.value === value)) {
+          setCustomValues([void 0, void 0]);
+          setTempValues([void 0, void 0]);
+          setSelectedValue([options?.find((i) => i.value === value)].filter(Boolean));
+        } else if (!selectedValue?.some((i) => i.value === value)) {
+          setCustomValues([fromValue, toValue]);
+          setTempValues([fromValue, toValue]);
+          setSelectedValue([
+            {
+              value: `${fromValue ?? ""}${fromValue || toValue ? "-" : ""}${toValue ?? ""}`,
+              name: `${fromValue ?? ""}${fromValue && toValue ? " - " : ""}${toValue ?? ""}`
+            }
+          ]);
+        }
+      }
+    }, [fromValue, toValue, options]);
+    const handleChangeCustomValues = react.useCallback(
+      (index) => (newValue) => {
+        setTempValues((prev) => {
+          const newValues = [...prev];
+          newValues[index] = newValue;
+          return newValues;
+        });
+      },
+      []
+    );
+    const handleApplyCustomValues = react.useCallback(() => {
+      setCustomValues(tempValues);
+      setSelectedValue([
+        {
+          value: `${tempValues[0] ?? ""}-${tempValues[1] ?? ""}`,
+          name: `${tempValues[0] ?? ""}${tempValues[0] && tempValues[1] ? " - " : ""}${tempValues[1] ?? ""}`
+        }
+      ]);
+      onInputChange?.(tempValues[0] ?? "", tempValues[1] ?? "");
+    }, [tempValues, onInputChange]);
+    const handleSelectValueChange = react.useCallback(
+      (values) => {
+        setTempValues([void 0, void 0]);
+        setCustomValues([void 0, void 0]);
+        setSelectedValue(values);
+        onSelectChange?.(values);
+      },
+      [onSelectChange]
+    );
+    const handleApplyValues = () => {
+      if (!(requiredCustomInput ? !tempValues[0] || !tempValues[1] : !tempValues[0] && !tempValues[1])) {
+        handleApplyCustomValues();
+      }
+    };
+    const handleClearValue = () => {
+      setTempValues([void 0, void 0]);
+      setCustomValues([void 0, void 0]);
+      setSelectedValue([]);
+      onSelectChange?.([]);
+      onInputChange?.();
+    };
+    const handleResetTempValues = (open) => {
+      if (open) {
+        setTempValues(customValues);
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      select.Select,
+      {
+        label,
+        value: selectedValue,
+        onValueChange: handleSelectValueChange,
+        onOpenChange: handleResetTempValues,
+        disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(select.SelectTrigger, { hasRemoveIcon, placeholder, children: customValues?.filter(Boolean)?.length && valueLabel ? /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, { children: () => valueLabel(customValues?.[0], customValues?.[1]) }) : /* @__PURE__ */ jsxRuntime.jsx(select.SelectValue, {}) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(select.SelectBody, { className: utils.cn("flex flex-col !p-0 !pt-3", bodyClassName), children: [
+            children && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-border flex items-center gap-1 border-b px-3 pb-3", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: typeof children === "function" ? children({
+                label: fromLabel,
+                value: tempValues[0],
+                maxValue: tempValues[1],
+                isMin: true,
+                isMax: false,
+                onChange: handleChangeCustomValues(0)
+              }) : react.cloneElement(children, {
+                label: fromLabel,
+                value: tempValues[0],
+                maxValue: tempValues[1],
+                isMin: true,
+                isMax: false,
+                onChange: handleChangeCustomValues(0)
+              }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowBackRightIcon16, { className: "h-4 min-h-4 w-4 min-w-4" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: typeof children === "function" ? children({
+                label: toLabel,
+                value: tempValues[1],
+                minValue: tempValues[0],
+                isMin: false,
+                isMax: true,
+                onChange: handleChangeCustomValues(1)
+              }) : react.cloneElement(children, {
+                label: toLabel,
+                value: tempValues[1],
+                minValue: tempValues[0],
+                isMin: false,
+                isMax: true,
+                onChange: handleChangeCustomValues(1)
+              }) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SelectOptions,
+              {
+                options,
+                loading,
+                showChecked: !tempValues[0] && !tempValues[1]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: "relative flex gap-3 p-3",
+                style: { boxShadow: "0px -8px 24px -4px #172E7E17" },
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(select.SelectClose, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      type: "button",
+                      variant: "link",
+                      size: "sm",
+                      onClick: handleClearValue,
+                      className: utils.cn(!tempValues[0] && !tempValues[1] && "!bg-white"),
+                      children: "B\u1ECF ch\u1ECDn"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(select.SelectClose, { className: "w-full", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                    button.Button,
+                    {
+                      type: "button",
+                      className: "w-full",
+                      size: "sm",
+                      disabled: (!!tempValues[0] || !!tempValues[1]) && requiredCustomInput && (!tempValues[0] || !tempValues[1]),
+                      onClick: handleApplyValues,
+                      children: "\xC1p d\u1EE5ng"
+                    }
+                  ) })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+SelectRange.displayName = "SelectRange";
+const SelectOptions = react.memo(({ options, loading, showChecked }) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col gap-2 overflow-hidden", children: [
+    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"), children: [
+      options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+        select.SelectItem,
+        {
+          option,
+          className: utils.cn(
+            "p-3",
+            !showChecked && "data-[activated=true]:text-foreground data-[activated=true]:hover:bg-accent data-[activated=true]:bg-background"
+          ),
+          rightIcon: showChecked ? null : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {}),
+          children: option?.name || option?.value
+        }
+      )),
+      !options?.length && /* @__PURE__ */ jsxRuntime.jsx(select.SelectEmptyState, { className: "p-3" })
+    ] })
+  ] });
+});
+
+exports.SelectRange = SelectRange;
+//# sourceMappingURL=select-range.js.map
+//# sourceMappingURL=select-range.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/common/interactive/select-range.tsx"],"names":["memo","useState","useEffect","useCallback","jsxs","Select","jsx","SelectTrigger","SelectValue","SelectBody","cn","cloneElement","ArrowBackRightIcon16","SelectClose","Button","Skeleton","SelectItem","Fragment","SelectEmptyState"],"mappings":"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","file":"select-range.js","sourcesContent":["import React, { cloneElement, memo, ReactElement, useCallback, useEffect, useState } 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 { ArrowBackRightIcon16 } from '@/assets/Icon';\nimport { Button } from '@/components/button';\nimport { Skeleton } from '@/components/skeleton';\nimport { cn } from '@/lib/utils';\n\nexport interface SelectRangeProps extends Omit<SelectProps, 'children'> {\n  children?:\n    | React.ReactNode\n    | ((field: {\n        label?: string;\n        value?: any;\n        minValue?: any;\n        maxValue?: any;\n        onChange?: (value?: any) => void;\n        isMin?: boolean;\n        isMax: boolean;\n      }) => React.ReactNode);\n  options?: Option[];\n  onSelectChange?: (value?: Option[]) => void;\n  onInputChange?: (fromValue?: any, toValue?: any) => void;\n  fromLabel?: string;\n  fromValue?: any;\n  toLabel?: string;\n  toValue?: any;\n  valueLabel?: (fromValue?: any, toValue?: any) => string;\n  hasRemoveIcon?: boolean;\n  loading?: boolean;\n  placeholder?: string;\n  disabled?: boolean;\n  bodyClassName?: string;\n  requiredCustomInput?: boolean;\n}\n\nconst SelectRange = memo(\n  ({\n    label,\n    children,\n    options = [],\n    fromValue,\n    toValue,\n    onSelectChange,\n    onInputChange,\n    fromLabel,\n    toLabel,\n    valueLabel,\n    hasRemoveIcon,\n    loading,\n    placeholder,\n    disabled,\n    bodyClassName,\n    requiredCustomInput,\n  }: SelectRangeProps) => {\n    const [customValues, setCustomValues] = useState<[any, any]>([undefined, undefined]);\n    const [tempValues, setTempValues] = useState<[any, any]>([undefined, undefined]);\n    const [selectedValue, setSelectedValue] = useState<Option[]>();\n\n    useEffect(() => {\n      if (\n        JSON.stringify(customValues) !== JSON.stringify([fromValue ?? '', toValue ?? '']) &&\n        options?.length > 0\n      ) {\n        const value = `${fromValue ?? ''}${fromValue || toValue ? '-' : ''}${toValue ?? ''}`;\n\n        if (options?.some((i) => i.value === value)) {\n          setCustomValues([undefined, undefined]);\n          setTempValues([undefined, undefined]);\n          setSelectedValue([options?.find((i) => i.value === value)].filter(Boolean) as Option[]);\n        } else if (!selectedValue?.some((i) => i.value === value)) {\n          setCustomValues([fromValue, toValue]);\n          setTempValues([fromValue, toValue]);\n          setSelectedValue([\n            {\n              value: `${fromValue ?? ''}${fromValue || toValue ? '-' : ''}${toValue ?? ''}`,\n              name: `${fromValue ?? ''}${fromValue && toValue ? ' - ' : ''}${toValue ?? ''}`,\n            },\n          ]);\n        }\n      }\n    }, [fromValue, toValue, options]);\n\n    const handleChangeCustomValues = useCallback(\n      (index: 0 | 1) => (newValue: any) => {\n        setTempValues((prev) => {\n          const newValues = [...prev] as [any, any];\n          newValues[index] = newValue;\n          return newValues;\n        });\n      },\n      [],\n    );\n\n    const handleApplyCustomValues = useCallback(() => {\n      setCustomValues(tempValues);\n      setSelectedValue([\n        {\n          value: `${tempValues[0] ?? ''}-${tempValues[1] ?? ''}`,\n          name: `${tempValues[0] ?? ''}${tempValues[0] && tempValues[1] ? ' - ' : ''}${tempValues[1] ?? ''}`,\n        },\n      ]);\n      onInputChange?.(tempValues[0] ?? '', tempValues[1] ?? '');\n    }, [tempValues, onInputChange]);\n\n    const handleSelectValueChange = useCallback(\n      (values: Option[]) => {\n        setTempValues([undefined, undefined]);\n        setCustomValues([undefined, undefined]);\n        setSelectedValue(values);\n        onSelectChange?.(values);\n      },\n      [onSelectChange],\n    );\n\n    const handleApplyValues = () => {\n      if (\n        !(requiredCustomInput ? !tempValues[0] || !tempValues[1] : !tempValues[0] && !tempValues[1])\n      ) {\n        handleApplyCustomValues();\n      }\n    };\n\n    const handleClearValue = () => {\n      setTempValues([undefined, undefined]);\n      setCustomValues([undefined, undefined]);\n      setSelectedValue([]);\n      onSelectChange?.([]);\n      onInputChange?.();\n    };\n\n    const handleResetTempValues = (open: boolean) => {\n      if (open) {\n        setTempValues(customValues);\n      }\n    };\n\n    return (\n      <Select\n        label={label}\n        value={selectedValue}\n        onValueChange={handleSelectValueChange}\n        onOpenChange={handleResetTempValues}\n        disabled={disabled}\n      >\n        <SelectTrigger hasRemoveIcon={hasRemoveIcon} placeholder={placeholder}>\n          {customValues?.filter(Boolean)?.length && valueLabel ? (\n            <SelectValue>{() => valueLabel(customValues?.[0], customValues?.[1])}</SelectValue>\n          ) : (\n            <SelectValue />\n          )}\n        </SelectTrigger>\n\n        <SelectBody className={cn('flex flex-col !p-0 !pt-3', bodyClassName)}>\n          {children && (\n            <div className=\"border-border flex items-center gap-1 border-b px-3 pb-3\">\n              <div className=\"flex-1\">\n                {typeof children === 'function'\n                  ? children({\n                      label: fromLabel,\n                      value: tempValues[0],\n                      maxValue: tempValues[1],\n                      isMin: true,\n                      isMax: false,\n                      onChange: handleChangeCustomValues(0),\n                    })\n                  : cloneElement(children as ReactElement, {\n                      label: fromLabel,\n                      value: tempValues[0],\n                      maxValue: tempValues[1],\n                      isMin: true,\n                      isMax: false,\n                      onChange: handleChangeCustomValues(0),\n                    })}\n              </div>\n              <ArrowBackRightIcon16 className=\"h-4 min-h-4 w-4 min-w-4\" />\n              <div className=\"flex-1\">\n                {typeof children === 'function'\n                  ? children({\n                      label: toLabel,\n                      value: tempValues[1],\n                      minValue: tempValues[0],\n                      isMin: false,\n                      isMax: true,\n                      onChange: handleChangeCustomValues(1),\n                    })\n                  : cloneElement(children as ReactElement, {\n                      label: toLabel,\n                      value: tempValues[1],\n                      minValue: tempValues[0],\n                      isMin: false,\n                      isMax: true,\n                      onChange: handleChangeCustomValues(1),\n                    })}\n              </div>\n            </div>\n          )}\n\n          <SelectOptions\n            options={options}\n            loading={loading}\n            showChecked={!tempValues[0] && !tempValues[1]}\n          />\n\n          <div\n            className=\"relative flex gap-3 p-3\"\n            style={{ boxShadow: '0px -8px 24px -4px #172E7E17' }}\n          >\n            <SelectClose asChild>\n              <Button\n                type=\"button\"\n                variant=\"link\"\n                size=\"sm\"\n                // disabled={!tempValues[0] && !tempValues[1]}\n                // onClick={() => setTempValues([undefined, undefined])}\n                onClick={handleClearValue}\n                className={cn(!tempValues[0] && !tempValues[1] && '!bg-white')}\n              >\n                Bỏ chọn\n              </Button>\n            </SelectClose>\n            <SelectClose className=\"w-full\" asChild>\n              <Button\n                type=\"button\"\n                className=\"w-full\"\n                size=\"sm\"\n                // disabled={\n                //   requiredCustomInput\n                //     ? !tempValues[0] || !tempValues[1]\n                //     : !tempValues[0] && !tempValues[1]\n                // }\n                disabled={\n                  (!!tempValues[0] || !!tempValues[1]) &&\n                  requiredCustomInput &&\n                  (!tempValues[0] || !tempValues[1])\n                }\n                onClick={handleApplyValues}\n              >\n                Áp dụng\n              </Button>\n            </SelectClose>\n          </div>\n        </SelectBody>\n      </Select>\n    );\n  },\n);\nSelectRange.displayName = 'SelectRange';\n\ninterface SelectOptionsProps {\n  options?: Option[];\n  loading?: boolean;\n  showChecked?: boolean;\n}\n\nconst SelectOptions = memo(({ options, loading, showChecked }: SelectOptionsProps) => {\n  return (\n    <div className=\"flex flex-1 flex-col gap-2 overflow-hidden\">\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\n      {!loading && (\n        <div className={cn('divide-border max-h-[360px] flex-1 divide-y overflow-auto')}>\n          {options?.map((option) => (\n            <SelectItem\n              option={option}\n              className={cn(\n                'p-3',\n                !showChecked &&\n                  'data-[activated=true]:text-foreground data-[activated=true]:hover:bg-accent data-[activated=true]:bg-background',\n              )}\n              rightIcon={showChecked ? null : <></>}\n            >\n              {option?.name || option?.value}\n            </SelectItem>\n          ))}\n\n          {!options?.length && <SelectEmptyState className=\"p-3\" />}\n        </div>\n      )}\n    </div>\n  );\n});\n\nexport { SelectRange };\n"]}