@jenesei-software/jenesei-kit-react 1.0.0 → 1.2.0

package/build/component.styles-DqTkSP8L.js

@@ -0,0 +1,1023 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { ListLanguage, MapThemeList } from "./consts.es.js";
+import { b as ErrorMessage, a as addError } from "./style-DjCgiI7l.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-B46v_8eu.js";
+import { j as Typography, u as usePopover, m as useMergeRefs, P as Popover, g as getFontSizeStyles } from "./component--cOriuv7.js";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import moment from "moment";
+import { memo, useMemo, useRef, useState, useCallback, useEffect } from "react";
+import { c as Button } from "./component-CbPhVNw5.js";
+import { I as Icon } from "./component.styles-CiGPOpxk.js";
+import styled, { css } from "styled-components";
+import { i as addRemoveOutline } from "./style-Bvt_Melk.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+import { motion } from "framer-motion";
+import { T as TextArea } from "./component.styles-DhI3n-dL.js";
+const DEFAULT_LABEL_SELECT_ALL = "Select all option";
+const DEFAULT_LABEL_PLACEHOLDER = "Select an option";
+const DEFAULT_LABEL_EMPTY_OPTION = "No options available";
+const DEFAULT_LABEL_AND_MORE = (count) => `+${count} more`;
+const DEFAULT_LABEL_ADD_OPTION = (value) => `Add "${value}" option`;
+const DEFAULT_MAX_VIEW_SELECT = 2;
+const DEFAULT_MAX_VIEW_DROPDOWN = 5;
+const DEFAULT_MIN_VIEW_DROPDOWN = 1;
+const DEFAULT_OVERSCAN = 1;
+const Select = (props) => {
+  const sizeHeight = useMemo(() => KEY_SIZE_DATA[props.size].height, [props.size]);
+  const sizePadding = useMemo(() => KEY_SIZE_DATA[props.size].padding, [props.size]);
+  const sizeRadius = useMemo(() => KEY_SIZE_DATA[props.size].radius, [props.size]);
+  const {
+    isOpen,
+    close,
+    open,
+    refReference: refReferencePopover,
+    refFloating: refFloatingPopover,
+    floatingStyles,
+    toggle
+  } = usePopover({
+    placement: "bottom-start",
+    offset: sizePadding,
+    mode: "independence",
+    isClickOutside: true,
+    isWidthAsContent: true,
+    isDisabled: props == null ? void 0 : props.isDisabled,
+    onBlur: props.onBlur,
+    onFocus: props.onFocus
+  });
+  const refTextArea = useRef(null);
+  const refDropdownList = useRef(null);
+  const refReference = useMergeRefs([props.refReference, refReferencePopover]);
+  const refFloating = useMergeRefs([props.refFloating, refFloatingPopover]);
+  const labelSelectAll = useMemo(() => props.labelSelectAll ?? DEFAULT_LABEL_SELECT_ALL, [props.labelSelectAll]);
+  const labelPlaceholder = useMemo(() => props.labelPlaceholder ?? DEFAULT_LABEL_PLACEHOLDER, [props.labelPlaceholder]);
+  const labelEmptyOption = useMemo(
+    () => props.labelEmptyOption ?? DEFAULT_LABEL_EMPTY_OPTION,
+    [props.labelEmptyOption]
+  );
+  const labelAndMore = useMemo(() => props.labelAndMore ?? DEFAULT_LABEL_AND_MORE, [props.labelAndMore]);
+  const labelAddOption = useMemo(() => props.labelAddOption ?? DEFAULT_LABEL_ADD_OPTION, [props.labelAddOption]);
+  const maxViewSelect = useMemo(() => props.maxViewSelect ?? DEFAULT_MAX_VIEW_SELECT, [props.maxViewSelect]);
+  const maxViewDropdown = useMemo(() => props.maxViewDropdown ?? DEFAULT_MAX_VIEW_DROPDOWN, [props.maxViewDropdown]);
+  const minViewDropdown = useMemo(() => props.minViewDropdown ?? DEFAULT_MIN_VIEW_DROPDOWN, [props.minViewDropdown]);
+  const isAll = useMemo(
+    () => props.value.length === props.option.length || props.value.length === props.optionAllLength,
+    [props.option.length, props.optionAllLength, props.value.length]
+  );
+  const isHaveOption = useMemo(() => !!props.option.length, [props.option.length]);
+  const isHaveValue = useMemo(() => !!props.value.length, [props.value.length]);
+  const isShowAddOption = useMemo(
+    () => props.valueSearch && props.isShowAddOption,
+    [props.valueSearch, props.isShowAddOption]
+  );
+  const [isShowSearch, setIsShowSearch] = useState(false);
+  const optionsLength = useMemo(() => {
+    if (props.isNotShowDisabledOptions) {
+      return props.option.filter((option) => !option.isDisabled).length;
+    } else {
+      return props.option.length;
+    }
+  }, [props.option, props.isNotShowDisabledOptions]);
+  const heightDropdownList = useMemo(
+    () => sizeHeight * (optionsLength < maxViewDropdown ? optionsLength < minViewDropdown ? optionsLength : optionsLength : maxViewDropdown),
+    [sizeHeight, optionsLength, maxViewDropdown, minViewDropdown]
+  );
+  const heightPopover = useMemo(() => {
+    const selectAll = props.isShowSelectAll && isHaveOption ? sizeHeight : 0;
+    const selectNoOption = !isHaveOption ? sizeHeight : 0;
+    const selectList = isHaveOption ? heightDropdownList : 0;
+    const selectAdd = isShowAddOption ? sizeHeight : 0;
+    const sum = (selectAll !== 0 ? 1 : 0) + (selectNoOption !== 0 ? 1 : 0) + (selectList !== 0 ? 1 : 0) + (selectAdd !== 0 ? 1 : 0);
+    const padding = sum <= 1 ? 0 : (sum - 1) * (sizePadding / 2.8);
+    return selectAll + selectNoOption + selectList + selectAdd + padding;
+  }, [props.isShowSelectAll, sizeHeight, isHaveOption, sizePadding, heightDropdownList, isShowAddOption]);
+  const isValueMoreMaxViewSelect = useMemo(
+    () => props.value.length > maxViewSelect,
+    [maxViewSelect, props.value.length]
+  );
+  const isShowIconSearchClear = useMemo(
+    () => props.isShowIconSearchClear && props.valueSearch,
+    [props.isShowIconSearchClear, props.valueSearch]
+  );
+  const isShowButtonList = useMemo(
+    () => isShowIconSearchClear || props.isShowIconToggle || props.isShowIconFetching && props.isFetching,
+    [isShowIconSearchClear, props.isShowIconToggle, props.isShowIconFetching, props.isFetching]
+  );
+  const isShowScroll = useMemo(() => optionsLength > maxViewDropdown, [maxViewDropdown, optionsLength]);
+  const isSelectedItem = useCallback(
+    (option) => {
+      return isAll || props.value.some((val) => val.value === option.value);
+    },
+    [isAll, props.value]
+  );
+  const isShowDropdownSettingsList = useMemo(
+    () => isShowAddOption || props.isShowSelectAll && isHaveOption || !isHaveOption,
+    [isHaveOption, isShowAddOption, props.isShowSelectAll]
+  );
+  const listVirtualizer = useVirtualizer({
+    count: optionsLength,
+    estimateSize: props.getEstimateSize ? props.getEstimateSize : () => sizeHeight,
+    getScrollElement: () => refDropdownList.current,
+    overscan: DEFAULT_OVERSCAN,
+    paddingEnd: 0
+  });
+  const onChangeShowSearch = useCallback(
+    (show) => {
+      if (props.isSearch && !props.isDisabled) {
+        setIsShowSearch(show);
+      } else {
+        setIsShowSearch(false);
+      }
+    },
+    [props.isDisabled, props.isSearch]
+  );
+  const onClick = useCallback(
+    (option) => {
+      let newValues = [];
+      const optionValue = option.value;
+      const findIndex = (val) => val.value === optionValue;
+      const index = props.value.findIndex(findIndex);
+      const isFind = index !== -1;
+      if (props.isMulti) {
+        if (isFind) {
+          newValues = [...props.value.slice(0, index), ...props.value.slice(index + 1)];
+        } else {
+          newValues = [...props.value, option];
+        }
+      } else {
+        if (isFind && !props.isStayValueAfterSelect) {
+          newValues = [...props.value.slice(0, index), ...props.value.slice(index + 1)];
+        } else {
+          newValues = [option];
+        }
+      }
+      props.onChange(newValues);
+      onChangeShowSearch(!!props.isStaySearchAfterSelect);
+      if (props.isOnClickOptionClose) {
+        close();
+      }
+    },
+    [close, onChangeShowSearch, props]
+  );
+  const onClickAll = useCallback(() => {
+    var _a;
+    (_a = props.onChangeAll) == null ? void 0 : _a.call(props, isAll ? [] : props.option, !isAll);
+    onChangeShowSearch(!!props.isStaySearchAfterSelect);
+    if (props.isOnClickOptionClose) {
+      close();
+    }
+  }, [close, isAll, onChangeShowSearch, props]);
+  const onClearSearch = useCallback(() => {
+    var _a;
+    (_a = props.onChangeSearch) == null ? void 0 : _a.call(props, "");
+  }, [props]);
+  const onScroll = useCallback(
+    (containerRefElement) => {
+      if (containerRefElement) {
+        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+        if (scrollHeight - scrollTop - clientHeight < heightDropdownList && !props.isFetching && props.fetchNextPage) {
+          props.fetchNextPage();
+        }
+      }
+    },
+    [heightDropdownList, props]
+  );
+  const onAddOption = useCallback(
+    (value) => {
+      var _a, _b;
+      (_a = props.onAddOption) == null ? void 0 : _a.call(props, value);
+      (_b = props.onChangeSearch) == null ? void 0 : _b.call(props, "");
+    },
+    [props]
+  );
+  useEffect(() => {
+    onChangeShowSearch(false);
+  }, [onChangeShowSearch, props.isDisabled]);
+  useEffect(() => {
+    if (!isHaveValue) {
+      onChangeShowSearch(true);
+    }
+  }, [isHaveValue, onChangeShowSearch]);
+  useEffect(() => {
+    if (!isOpen && isHaveValue) {
+      onChangeShowSearch(false);
+    }
+  }, [isHaveValue, isOpen, onChangeShowSearch]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      SelectWrapper,
+      {
+        tabIndex: 0,
+        $error: props == null ? void 0 : props.error,
+        $isNotShowHoverStyle: props == null ? void 0 : props.isNotShowHoverStyle,
+        $size: props.size,
+        $genre: props.genre,
+        $isCenter: props.isCenter,
+        $sx: props.sx,
+        $isOpen: isOpen,
+        ref: refReference,
+        onClick: () => {
+          open();
+          onChangeShowSearch(true);
+        },
+        onFocus: () => {
+          open();
+        },
+        children: [
+          isShowSearch && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SelectTextArea,
+            {
+              ref: refTextArea,
+              genre: props.genre,
+              size: props.size,
+              minRows: 1,
+              maxRows: 5,
+              isAutoHeight: true,
+              onChange: (value) => {
+                var _a;
+                (_a = props == null ? void 0 : props.onChangeSearch) == null ? void 0 : _a.call(props, value);
+              },
+              value: props.valueSearch,
+              placeholder: labelPlaceholder
+            }
+          ),
+          isHaveValue && (props.isShowSelectAllLabel ? !isAll : true) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SelectList,
+            {
+              $size: props.size,
+              tabIndex: -1,
+              $isWrapSelectOption: props.isWrapSelectOption,
+              onMouseDown: (e) => {
+                e.preventDefault();
+              },
+              onClick: (e) => {
+                e.preventDefault();
+              },
+              children: props.value.map((value, index) => {
+                if (index >= maxViewSelect) return null;
+                const isChecked = isSelectedItem(value);
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  ContainerSelectListOption,
+                  {
+                    isChecked,
+                    onClick: () => props.isClearWhenClickSelectListOption && onClick(value),
+                    item: value,
+                    genre: props.genre,
+                    size: props.size,
+                    isBold: props.isBold,
+                    isOnlyColorInSelectListOption: props.isOnlyColorInSelectListOption,
+                    isClearWhenClickSelectListOption: props.isClearWhenClickSelectListOption,
+                    isWrapSelectOption: props.isWrapSelectOption,
+                    isNotShowHoverStyle: props.isNotShowHoverStyle,
+                    isCenter: props.isCenter
+                  },
+                  `${value.value}-${index}`
+                );
+              })
+            }
+          ) : null,
+          isHaveValue && (props.isShowSelectAllLabel ? isAll : false) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Typography,
+            {
+              sxStandard: {
+                default: { padding: `${sizePadding / 2.8}px 0px ${sizePadding / 2.8}px ${sizePadding / 2.8}px` }
+              },
+              sx: { default: { size: 16, line: 1, isNoUserSelect: true } },
+              children: labelSelectAll
+            }
+          ) : null,
+          !isHaveValue && !props.isSearch ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Typography,
+            {
+              sxStandard: (theme) => ({
+                default: {
+                  color: theme.colors.input[props.genre].color.placeholder,
+                  padding: `${sizePadding / 2.8}px 0px ${sizePadding / 2.8}px ${sizePadding / 2.8}px`
+                }
+              }),
+              sx: { default: { size: 16, line: 1, isNoUserSelect: true } },
+              children: labelPlaceholder
+            }
+          ) : null,
+          isValueMoreMaxViewSelect && isHaveValue && (props.isShowSelectAllLabel ? !isAll : true) ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Typography,
+            {
+              sxStandard: {
+                default: { padding: `${sizePadding / 2.8}px 0px ${sizePadding / 2.8}px ${sizePadding / 2.8}px` }
+              },
+              sx: { default: { size: 16, line: 1, isNoUserSelect: true } },
+              children: labelAndMore(props.value.length - maxViewSelect)
+            }
+          ) : null,
+          isShowButtonList ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            ButtonList,
+            {
+              $size: props.size,
+              onMouseDown: (e) => {
+                e.preventDefault();
+              },
+              children: [
+                isShowIconSearchClear && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    genre: props.genre,
+                    size: "small",
+                    isWidthAsHeight: true,
+                    isFullSize: true,
+                    isRadius: true,
+                    isOnlyIcon: true,
+                    icons: [{ name: "Close", type: "id" }],
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      onClearSearch();
+                    }
+                  }
+                ),
+                props.isShowIconToggle && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    genre: props.genre,
+                    size: "small",
+                    isWidthAsHeight: true,
+                    isFullSize: true,
+                    isRadius: true,
+                    isOnlyIcon: true,
+                    icons: [{ name: "Select", type: "id" }],
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      toggle();
+                    }
+                  }
+                ),
+                props.isShowIconFetching && props.isFetching && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  Button,
+                  {
+                    tabIndex: -1,
+                    genre: props.genre,
+                    size: "small",
+                    isWidthAsHeight: true,
+                    isFullSize: true,
+                    isRadius: true,
+                    isHiddenBorder: true,
+                    isDisabledRipple: true,
+                    isNotHoverEffect: true,
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Icon, { type: "loading", name: "Circle", size: props.size })
+                  }
+                )
+              ]
+            }
+          ) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Popover,
+      {
+        sx: (theme) => ({
+          default: {
+            background: theme.colors.input[props.genre].background.rest,
+            borderRadius: `${sizeRadius}px`,
+            padding: "0px",
+            maxHeight: `${heightPopover}px`
+          }
+        }),
+        isShowAlwaysOutline: true,
+        size: props.size,
+        genre: props.genre,
+        floatingStyles,
+        ref: refFloating,
+        isOpen,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          DropdownListParent,
+          {
+            tabIndex: -1,
+            ref: refDropdownList,
+            $size: props.size,
+            onScroll: (e) => onScroll(e.target),
+            children: [
+              isShowDropdownSettingsList && /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownList, { style: { position: "sticky", top: 0, zIndex: 1 }, children: [
+                isShowAddOption ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  DropdownListOption,
+                  {
+                    tabIndex: 0,
+                    onClick: () => props.valueSearch && onAddOption(props.valueSearch),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" && props.valueSearch) onAddOption(props.valueSearch);
+                    },
+                    $isCenter: props.isCenter,
+                    $isNotShowHoverStyle: props.isNotShowHoverStyle,
+                    $genre: props.genre,
+                    $size: props.size,
+                    $isBold: props.isBold,
+                    $isChecked: isAll,
+                    style: { position: "relative", minHeight: `${sizeHeight}px` },
+                    children: props.valueSearch && labelAddOption(props.valueSearch)
+                  }
+                ) : null,
+                props.isShowSelectAll && isHaveOption ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  DropdownListOption,
+                  {
+                    tabIndex: 0,
+                    onClick: () => onClickAll(),
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter") onClickAll();
+                    },
+                    $isCenter: props.isCenter,
+                    $isNotShowHoverStyle: props.isNotShowHoverStyle,
+                    $genre: props.genre,
+                    $size: props.size,
+                    $isBold: props.isBold,
+                    $isChecked: isAll,
+                    $isShowScroll: isShowScroll,
+                    style: { position: "relative", minHeight: `${sizeHeight}px` },
+                    children: [
+                      labelSelectAll,
+                      props.isShowDropdownOptionIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        DropdownListOptionIcon,
+                        {
+                          tabIndex: -1,
+                          size: props.size,
+                          type: "checkbox",
+                          name: "Arrow",
+                          $genre: props.genre,
+                          $checked: isAll,
+                          $size: props.size
+                        }
+                      )
+                    ]
+                  }
+                ) : null,
+                !isHaveOption ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  DropdownListOption,
+                  {
+                    tabIndex: -1,
+                    $isCenter: props.isCenter,
+                    $isNotShowHoverStyle: props.isNotShowHoverStyle,
+                    $genre: props.genre,
+                    $size: props.size,
+                    $isBold: props.isBold,
+                    $isChecked: isAll,
+                    $isShowScroll: isShowScroll,
+                    style: { position: "relative", minHeight: `${sizeHeight}px` },
+                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { sx: { default: { size: 16, line: 1 } }, children: labelEmptyOption })
+                  }
+                ) : null
+              ] }),
+              isHaveOption ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                DropdownList,
+                {
+                  tabIndex: -1,
+                  style: { height: `${listVirtualizer.getTotalSize()}px`, minHeight: `${heightDropdownList}px` },
+                  children: listVirtualizer.getVirtualItems().map((virtualRow) => {
+                    const item = props.option[virtualRow.index];
+                    const isChecked = isSelectedItem(item);
+                    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      ContainerDropdownListOption,
+                      {
+                        virtualRowSize: virtualRow.size,
+                        virtualRowStart: virtualRow.start,
+                        isChecked,
+                        onClick: () => onClick(item),
+                        item,
+                        genre: props.genre,
+                        size: props.size,
+                        isBold: props.isBold,
+                        isNotShowHoverStyle: props.isNotShowHoverStyle,
+                        isCenter: props.isCenter,
+                        isShowScroll,
+                        isShowDropdownOptionIcon: props.isShowDropdownOptionIcon
+                      },
+                      virtualRow.index
+                    );
+                  })
+                }
+              ) : null
+            ]
+          }
+        )
+      }
+    ),
+    (props == null ? void 0 : props.error) ? /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorMessage, { ...props.error, size: (props == null ? void 0 : props.error.size) ?? props.size }) : null
+  ] });
+};
+const ContainerDropdownListOptionComponent = (props) => {
+  const handleKeyDown = (event) => {
+    if (props.item.isDisabled) return;
+    if (event.key === "Enter") {
+      props.onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    DropdownListOption,
+    {
+      tabIndex: 0,
+      onClick: () => {
+        !props.item.isDisabled && props.onClick();
+      },
+      onKeyDown: handleKeyDown,
+      style: {
+        position: "absolute",
+        height: `${props.virtualRowSize}px`,
+        transform: `translateY(${props.virtualRowStart}px)`
+      },
+      $isCenter: props.isCenter,
+      $isNotShowHoverStyle: props.isNotShowHoverStyle,
+      $item: props.item,
+      $genre: props.genre,
+      $size: props.size,
+      $isBold: props.isBold,
+      $isChecked: props.isChecked,
+      $isShowScroll: props.isShowScroll,
+      children: [
+        props.item.label,
+        props.isShowDropdownOptionIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DropdownListOptionIcon,
+          {
+            tabIndex: -1,
+            size: props.size,
+            type: "checkbox",
+            name: "Arrow",
+            $genre: props.genre,
+            $checked: props.isChecked,
+            $size: props.size
+          }
+        )
+      ]
+    }
+  );
+};
+const ContainerSelectListOptionComponent = (props) => {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SelectListOption,
+    {
+      tabIndex: -1,
+      onClick: props.onClick,
+      $isOnlyColorInSelectListOption: props.isOnlyColorInSelectListOption,
+      $isClearWhenClickSelectListOption: props.isClearWhenClickSelectListOption,
+      $isWrapSelectOption: props.isWrapSelectOption,
+      $isCenter: props.isCenter,
+      $isNotShowHoverStyle: props.isNotShowHoverStyle,
+      $item: props.item,
+      $genre: props.genre,
+      $size: props.size,
+      $isBold: props.isBold,
+      $isChecked: props.isChecked,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Typography, { sx: { default: { size: 16, line: 1 } }, children: props.item.label })
+    }
+  );
+};
+const ContainerDropdownListOption = memo(ContainerDropdownListOptionComponent);
+const ContainerSelectListOption = memo(ContainerSelectListOptionComponent);
+const SelectLanguage = (props) => {
+  const { value, onChange } = props;
+  const option = ListLanguage;
+  const [viewOption] = useState(option);
+  const handleSelectChange = (value2) => {
+    if (value2.length === 0) onChange(null);
+    onChange(value2[0].value.toString());
+  };
+  const valueLocal = useMemo(() => {
+    const findOption = option.find((e) => e.value === value);
+    if (!findOption) return [];
+    return [findOption];
+  }, [option, value]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Select, { ...props, option: viewOption, value: valueLocal, onChange: handleSelectChange });
+};
+const SelectMonth = (props) => {
+  const { value, onChange, startDate, endDate, monthsLocale, isShortLabel } = props;
+  const year = moment(value).utc().year();
+  const option = useMemo(() => {
+    return monthsLocale.map((monthItem) => {
+      const monthIndex = moment().month(monthItem.value).month();
+      const monthMoment = moment.utc().year(year).month(monthIndex).startOf("month");
+      const isDisabled = startDate && monthMoment.isBefore(moment.utc(startDate), "month") || endDate && monthMoment.isAfter(moment.utc(endDate), "month");
+      return {
+        value: monthMoment.valueOf(),
+        label: isShortLabel ? monthItem.localeShort : monthItem.localeLong,
+        placeholder: isShortLabel ? monthItem.localeShort : monthItem.localeLong,
+        search: `${monthItem.localeLong.toLowerCase()}, ${monthIndex + 1}`,
+        isDisabled: !!isDisabled,
+        monthValue: monthItem.value
+      };
+    });
+  }, [monthsLocale, year, startDate, endDate, isShortLabel]);
+  const handleSelectChange = (value2) => {
+    if (value2.length === 0) onChange(null);
+    onChange(+value2[0].value);
+  };
+  const valueLocal = useMemo(() => {
+    const findOption = option.find((e) => e.value === value);
+    if (!findOption) return [];
+    return [findOption];
+  }, [value, option]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Select, { ...props, option, value: valueLocal, onChange: handleSelectChange });
+};
+const SelectMonths = (props) => {
+  const { value, onChange, startDate, endDate, monthsLocale, isShortLabel } = props;
+  const year = moment(value).utc().year();
+  const option = useMemo(() => {
+    return monthsLocale.map((monthItem) => {
+      const monthIndex = moment().month(monthItem.value).month();
+      const monthMoment = moment.utc().year(year).month(monthIndex).startOf("month");
+      const isDisabled = startDate && monthMoment.isBefore(moment.utc(startDate), "month") || endDate && monthMoment.isAfter(moment.utc(endDate), "month");
+      return {
+        value: monthMoment.valueOf(),
+        label: isShortLabel ? monthItem.localeShort : monthItem.localeLong,
+        placeholder: isShortLabel ? monthItem.localeShort : monthItem.localeLong,
+        search: `${monthItem.localeLong.toLowerCase()}, ${monthIndex + 1}`,
+        isDisabled: !!isDisabled,
+        monthValue: monthItem.value
+      };
+    });
+  }, [monthsLocale, year, startDate, endDate, isShortLabel]);
+  const [viewOption, setViewOption] = useState(option);
+  useEffect(() => {
+    setViewOption(option);
+  }, [option]);
+  const handleSelectChange = (value2) => {
+    if (value2.length === 0) onChange([]);
+    onChange(value2.map((e) => +e.value));
+  };
+  const valueLocal = useMemo(() => {
+    if (!value || value.length === 0) return [];
+    return value.map((val) => option.find((opt) => opt.value === val)).filter(Boolean);
+  }, [value, option]);
+  const [search, setSearch] = useState("");
+  const handleSearchChange = useCallback(
+    (value2) => {
+      setSearch(value2);
+      if (value2 === "") {
+        setViewOption(option);
+      } else {
+        const filteredOptions = option.filter(
+          (option2) => Object.values(option2).some((field) => field == null ? void 0 : field.toString().toLowerCase().includes(value2.toLowerCase()))
+        );
+        setViewOption(filteredOptions);
+      }
+    },
+    [option]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Select,
+    {
+      ...props,
+      valueSearch: search,
+      onChangeSearch: handleSearchChange,
+      optionAllLength: option.length,
+      option: viewOption,
+      minViewDropdown: 1,
+      isMulti: true,
+      value: valueLocal,
+      onChange: handleSelectChange,
+      onChangeAll: (_value, isAll) => {
+        if (isAll) {
+          onChange(viewOption.map((e) => +e.value));
+        } else {
+          onChange([]);
+        }
+      }
+    }
+  );
+};
+const SelectYear = (props) => {
+  const { value, onChange, startDate, endDate, sortOrder = "desc" } = props;
+  const startYear = moment(startDate).utc().year();
+  const endYear = moment(endDate).utc().year();
+  const option = useMemo(() => {
+    const yearArray = Array.from({ length: endYear - startYear + 1 }, (_, index) => {
+      const year = startYear + index;
+      return {
+        value: moment().year(year).utc().startOf("year").valueOf(),
+        label: moment().year(year).utc().format("YYYY"),
+        placeholder: moment().year(year).utc().format("YYYY"),
+        search: `${moment().year(year).utc().format("YYYY").toLowerCase()}`
+      };
+    });
+    return sortOrder === "asc" ? yearArray.sort((a, b) => a.value - b.value) : yearArray.sort((a, b) => b.value - a.value);
+  }, [endYear, startYear, sortOrder]);
+  const handleSelectChange = (value2) => {
+    if (value2.length === 0) onChange(null);
+    onChange(+value2[0].value);
+  };
+  const valueLocal = useMemo(() => {
+    const findOption = option.find((e) => e.value === value);
+    if (!findOption) return [];
+    return [findOption];
+  }, [value, option]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Select, { ...props, option, value: valueLocal, onChange: handleSelectChange });
+};
+const SelectMapTheme = (props) => {
+  const { value, onChange } = props;
+  const option = useMemo(() => MapThemeList.map((e) => ({ label: e.name, value: e.name, placeholder: e.name })), []);
+  const [viewOption, setViewOption] = useState(option);
+  useEffect(() => {
+    setViewOption(option);
+  }, [option]);
+  const handleSelectChange = (value2) => {
+    if (value2.length === 0) onChange(null);
+    const findOption = MapThemeList.find((e) => e.name === value2[0].value);
+    onChange(findOption ?? null);
+  };
+  const valueLocal = useMemo(() => {
+    const findOption = option.find((e) => e.value === value.name);
+    if (!findOption) return [];
+    return [findOption];
+  }, [value, option]);
+  const [search, setSearch] = useState("");
+  const handleSearchChange = useCallback(
+    (value2) => {
+      setSearch(value2);
+      if (value2 === "") {
+        setViewOption(option);
+      } else {
+        const filteredOptions = option.filter(
+          (option2) => Object.values(option2).some((field) => field == null ? void 0 : field.toString().toLowerCase().includes(value2.toLowerCase()))
+        );
+        setViewOption(filteredOptions);
+      }
+    },
+    [option]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Select,
+    {
+      ...props,
+      option: viewOption,
+      value: valueLocal,
+      onChange: handleSelectChange,
+      valueSearch: search,
+      onChangeSearch: handleSearchChange
+    }
+  );
+};
+const addSelectWrapperGenre = css`
+  ${(props) => css`
+    background: ${props.theme.colors.input[props.$genre].background.rest};
+    border-color: ${props.theme.colors.input[props.$genre].border.rest};
+    color: ${props.theme.colors.input[props.$genre].color.rest};
+    &:active {
+      background: ${props.theme.colors.input[props.$genre].background.rest};
+      border-color: ${props.theme.colors.input[props.$genre].border.rest};
+      color: ${props.theme.colors.input[props.$genre].color.rest};
+    }
+    ${!props.$isNotShowHoverStyle && css`
+      &:hover {
+        background: ${props.theme.colors.input[props.$genre].background.hover};
+        border-color: ${props.theme.colors.input[props.$genre].border.hover};
+        color: ${props.theme.colors.input[props.$genre].color.hover};
+      }
+    `}
+    &:focus-visible {
+      background: ${props.theme.colors.input[props.$genre].background.rest};
+      border-color: ${props.theme.colors.input[props.$genre].border.rest};
+      color: ${props.theme.colors.input[props.$genre].color.rest};
+    }
+  `};
+`;
+const addSelectWrapperSize = css`
+  border: 1px solid;
+  width: 100%;
+  padding: ${(props) => KEY_SIZE_DATA[props.$size].padding / 4}px
+    ${(props) => KEY_SIZE_DATA[props.$size].padding - KEY_SIZE_DATA[props.$size].padding / 2.8}px;
+  gap: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px;
+  height: fit-content;
+  min-height: ${(props) => KEY_SIZE_DATA[props.$size].height}px;
+  border-radius: ${(props) => KEY_SIZE_DATA[props.$size].radius}px;
+  justify-content: ${(props) => props.$isCenter ? "center" : "flex-start"};
+  ${(props) => props.$isOpen && css`
+      outline: 2px ${(props2) => props2.theme.states.focus} solid;
+      outline-offset: 1px;
+    `}
+`;
+const SelectWrapper = styled(motion.div)`
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  align-content: center;
+  flex-wrap: wrap;
+  ${addSelectWrapperGenre};
+  ${addSelectWrapperSize};
+  ${addError};
+  ${addSX};
+`;
+const addDropdownListParentSize = css`
+  gap: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px;
+`;
+const DropdownListParent = styled(motion.div)`
+  height: 100%;
+  width: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  ${addDropdownListParentSize};
+`;
+const DropdownList = styled.ul`
+  list-style: none;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  transform: translateZ(0);
+  flex-shrink: 0;
+`;
+const addDropdownListOptionGenre = css`
+  ${(props) => css`
+    background: ${props.theme.colors.select[props.$genre].background.rest};
+    border-color: ${props.theme.colors.select[props.$genre].border.rest};
+    color: ${props.theme.colors.select[props.$genre].color.rest};
+    &:active {
+      background: ${props.theme.colors.select[props.$genre].background.rest};
+      border-color: ${props.theme.colors.select[props.$genre].border.rest};
+      color: ${props.theme.colors.select[props.$genre].color.rest};
+    }
+    ${!props.$isNotShowHoverStyle && css`
+      &:hover {
+        background: ${props.theme.colors.select[props.$genre].background.hover};
+        border-color: ${props.theme.colors.select[props.$genre].border.hover};
+        color: ${props.theme.colors.select[props.$genre].color.hover};
+      }
+    `}
+    &:focus-visible {
+      background: ${props.theme.colors.select[props.$genre].background.rest};
+      border-color: ${props.theme.colors.select[props.$genre].border.rest};
+      color: ${props.theme.colors.select[props.$genre].color.rest};
+    }
+  `};
+`;
+const addDropdownListOptionSize = css`
+  padding: 0px ${(props) => KEY_SIZE_DATA[props.$size].padding}px;
+  width: 100%;
+  border: 1px solid;
+  border-radius: 0;
+  justify-content: ${(props) => props.$isCenter ? "center" : "flex-start"};
+  &:first-child {
+    ${(props) => props.$isShowScroll ? css`
+            border-radius: ${KEY_SIZE_DATA[props.$size].radius}px 0px 0px 0px;
+          ` : css`
+            border-radius: ${KEY_SIZE_DATA[props.$size].radius}px ${KEY_SIZE_DATA[props.$size].radius}px 0px 0px;
+          `}
+  }
+  &:last-child {
+    ${(props) => props.$isShowScroll ? css`
+            border-radius: 0px 0px 0px ${KEY_SIZE_DATA[props.$size].radius}px;
+          ` : css`
+            border-radius: 0px 0px ${KEY_SIZE_DATA[props.$size].radius}px ${KEY_SIZE_DATA[props.$size].radius}px;
+          `}
+  }
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0px;
+  }
+  &:first-child:last-child {
+    ${(props) => props.$isShowScroll ? css`
+            border-radius: ${KEY_SIZE_DATA[props.$size].radius}px 0px 0px ${KEY_SIZE_DATA[props.$size].radius}px;
+          ` : css`
+            border-radius: ${KEY_SIZE_DATA[props.$size].radius}px;
+          `}
+  }
+`;
+const DropdownListOption = styled.li`
+  ${(props) => getFontSizeStyles(16, props.$isBold ? 500 : 400, props.theme.font.family, props.theme.font.lineHeight)};
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  user-select: none;
+  flex-shrink: 0;
+  opacity: ${(props) => {
+  var _a;
+  return ((_a = props.$item) == null ? void 0 : _a.isDisabled) ? 0.5 : 1;
+}};
+  ${addDropdownListOptionGenre};
+  ${addDropdownListOptionSize};
+  ${addRemoveOutline};
+`;
+const addDropdownOptionIconSize = css`
+  right: ${(props) => KEY_SIZE_DATA[props.$size].padding - 6}px;
+  height: ${(props) => KEY_SIZE_DATA[props.$size].height}px;
+`;
+const DropdownListOptionIcon = styled(Icon)`
+  position: absolute;
+  right: 0;
+  height: 100%;
+  align-items: center;
+  ${addDropdownOptionIconSize};
+  ${addRemoveOutline};
+  color: ${(props) => props.$checked ? props.theme.colors.select[props.$genre].border.select : props.theme.colors.input[props.$genre].border.rest};
+`;
+const addSelectListSize = css`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: ${(props) => props.$isWrapSelectOption ? "wrap" : "nowrap"};
+  gap: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px;
+`;
+const SelectList = styled.ul`
+  list-style: none;
+  position: relative;
+  overflow: hidden;
+  ${addSelectListSize};
+`;
+const addButtonListSize = css`
+  display: flex;
+  flex-direction: row;
+  gap: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px;
+  padding: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px ${(props) => KEY_SIZE_DATA[props.$size].padding}px;
+`;
+const ButtonList = styled.div`
+  position: absolute;
+  right: 0;
+  ${addButtonListSize};
+`;
+const addSelectListOptionGenre = css`
+${(props) => props.$isOnlyColorInSelectListOption ? css`
+      border: 0px solid;
+      border-color: transparent;
+      background-color: transparent;
+      color: ${props.theme.colors.select[props.$genre].color.rest};
+      &:active {
+        color: ${props.theme.colors.select[props.$genre].color.rest};
+      }
+      ${!props.$isNotShowHoverStyle && css`
+        &:hover {
+          color: ${props.theme.colors.select[props.$genre].color.hover};
+        }
+      `}
+      &:focus-visible {
+        color: ${props.theme.colors.select[props.$genre].color.rest};
+      }
+    ` : css`
+      border: 1px solid;
+      background: ${props.theme.colors.select[props.$genre].background.rest};
+      border-color: ${props.theme.colors.select[props.$genre].border.rest};
+      color: ${props.theme.colors.select[props.$genre].color.rest};
+      &:active {
+        background: ${props.theme.colors.select[props.$genre].background.rest};
+        border-color: ${props.theme.colors.select[props.$genre].border.rest};
+        color: ${props.theme.colors.select[props.$genre].color.rest};
+      }
+      ${!props.$isNotShowHoverStyle && css`
+        &:hover {
+          background: ${props.theme.colors.select[props.$genre].background.hover};
+          border-color: ${props.theme.colors.select[props.$genre].border.hover};
+          color: ${props.theme.colors.select[props.$genre].color.hover};
+        }
+      `}
+      &:focus-visible {
+        background: ${props.theme.colors.select[props.$genre].background.rest};
+        border-color: ${props.theme.colors.select[props.$genre].border.rest};
+        color: ${props.theme.colors.select[props.$genre].color.rest};
+      }
+    `}
+`;
+const addSelectListOptionSize = css`
+  padding: ${(props) => KEY_SIZE_DATA[props.$size].padding / 2.8}px;
+  border-radius: ${(props) => KEY_SIZE_DATA[props.$size].radius}px;
+`;
+const SelectListOption = styled(motion.li)`
+  display: flex;
+  align-items: center;
+  opacity: 1;
+  cursor: ${(props) => props.$isClearWhenClickSelectListOption ? "pointer" : "default"};
+  flex-shrink: 0;
+  overflow: hidden;
+  width: fit-content;
+  ${addSelectListOptionGenre};
+  ${addSelectListOptionSize};
+  ${addRemoveOutline};
+`;
+const SelectTextArea = styled(TextArea)`
+  border: 0 !important;
+  background-color: transparent !important;
+  min-height: initial !important;
+  width: 100%;
+  max-width: 100%;
+  flex-grow: 1;
+  padding: ${(props) => KEY_SIZE_DATA[props.size].padding / 2.8}px 0px ${(props) => KEY_SIZE_DATA[props.size].padding / 2.8}px ${(props) => KEY_SIZE_DATA[props.size].padding / 2.8}px;
+  ${addRemoveOutline};
+`;
+export {
+  ButtonList as B,
+  ContainerDropdownListOption as C,
+  DropdownListParent as D,
+  Select as S,
+  ContainerSelectListOption as a,
+  SelectLanguage as b,
+  SelectMonth as c,
+  SelectMonths as d,
+  SelectYear as e,
+  SelectMapTheme as f,
+  SelectWrapper as g,
+  DropdownList as h,
+  DropdownListOption as i,
+  DropdownListOptionIcon as j,
+  SelectList as k,
+  SelectListOption as l,
+  SelectTextArea as m
+};
+//# sourceMappingURL=component.styles-DqTkSP8L.js.map