@jenesei-software/jenesei-kit-react 1.0.0

package/build/component.styles-Bn6ylF83.js

@@ -0,0 +1,859 @@
+import { j as jsxRuntimeExports } from "./jsx-runtime-BrDlu8eK.js";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { AnimatePresence, motion } from "framer-motion";
+import moment from "moment";
+import { memo, useState, useRef, useMemo, useCallback, useEffect } from "react";
+import { c as Button } from "./component-DZxbW_Jz.js";
+import { ListLanguage, MapThemeList } from "./consts.es.js";
+import { b as ErrorMessage } from "./style-DeAgDHyI.js";
+import { K as KEY_SIZE_DATA } from "./theme.global-bN9HlSWE.js";
+import styled, { css } from "styled-components";
+import { e as StyledInputCSS, g as StyledMotionInput } from "./component.styles-Du2y0R4W.js";
+import { h as addRemoveOutline, g as addBorder, b as addTransition, a as addRemoveScrollbar } from "./style-CEGJOjRW.js";
+import { a as addSX } from "./style-plT9Ah7t.js";
+import { I as Icon } from "./component.styles-BapdQNhL.js";
+const DEFAULT_MAX_VIEW = 5;
+const DEFAULT_MIN_VIEW = 5;
+const DEFAULT_OVERSCAN = 1;
+const DEFAULT_LABEL_EMPTY_OPTION = "No options";
+const Select = (props) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  const [isOpen, setIsOpen] = useState(false);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [isAll, setIsAll] = useState(((_b = (_a = props == null ? void 0 : props.footer) == null ? void 0 : _a.selectAll) == null ? void 0 : _b.defaultValue) ?? false);
+  const refInput = useRef(null);
+  const parentListRef = useRef(null);
+  const wrapperRef = useRef(null);
+  const maxViewLength = useMemo(() => props.maxView ?? DEFAULT_MAX_VIEW, [props.maxView]);
+  const minViewLength = useMemo(() => props.minView ?? DEFAULT_MIN_VIEW, [props.minView]);
+  const optionsLength = useMemo(() => props.option.length, [props.option.length]);
+  const isFooter = useMemo(() => !!(props == null ? void 0 : props.footer), [props.footer]);
+  const isErase = useMemo(() => {
+    var _a2;
+    return !!((_a2 = props == null ? void 0 : props.footer) == null ? void 0 : _a2.erase);
+  }, [props.footer]);
+  const isSelectAll = useMemo(() => {
+    var _a2;
+    return !!((_a2 = props == null ? void 0 : props.footer) == null ? void 0 : _a2.selectAll);
+  }, [props.footer]);
+  const sizeHeight = useMemo(() => KEY_SIZE_DATA[props.size].height, [props.size]);
+  const height = useMemo(
+    () => sizeHeight * (optionsLength < maxViewLength ? optionsLength < minViewLength ? minViewLength : optionsLength : maxViewLength) + (isFooter ? sizeHeight : 0),
+    [sizeHeight, optionsLength, maxViewLength, minViewLength, isFooter]
+  );
+  const radius = useMemo(() => KEY_SIZE_DATA[props.size].radius, [props.size]);
+  const isSelectedItem = useCallback(
+    (option) => {
+      return isAll || (props.value ?? []).includes(option);
+    },
+    [isAll, props.value]
+  );
+  const handleEraseOnClick = useCallback(
+    (event) => {
+      var _a2, _b2;
+      event.preventDefault();
+      event.stopPropagation();
+      if ((_b2 = (_a2 = props.footer) == null ? void 0 : _a2.erase) == null ? void 0 : _b2.onCLick) {
+        props.footer.erase.onCLick();
+      } else {
+        props.onChange([]);
+      }
+      setIsAll(false);
+    },
+    [props]
+  );
+  const handleSelectAllOnClick = useCallback(
+    (event) => {
+      var _a2, _b2, _c2, _d2, _e2;
+      event.preventDefault();
+      event.stopPropagation();
+      if (((_a2 = props == null ? void 0 : props.inputProps) == null ? void 0 : _a2.value) !== "") {
+        return props.onChange(props.option);
+      }
+      if (isAll) {
+        setIsAll(false);
+        props.onChange(props.option);
+      } else {
+        if ((_c2 = (_b2 = props.footer) == null ? void 0 : _b2.selectAll) == null ? void 0 : _c2.onCLick) {
+          (_e2 = (_d2 = props.footer) == null ? void 0 : _d2.selectAll) == null ? void 0 : _e2.onCLick();
+        } else {
+          setIsAll(true);
+        }
+      }
+    },
+    [isAll, props]
+  );
+  const handleOnBlurEasy = useCallback(() => {
+    var _a2, _b2;
+    setIsOpen(false);
+    (_a2 = wrapperRef == null ? void 0 : wrapperRef.current) == null ? void 0 : _a2.blur();
+    (_b2 = refInput == null ? void 0 : refInput.current) == null ? void 0 : _b2.blur();
+  }, []);
+  const handleOnBlur = useCallback(
+    (event) => {
+      var _a2;
+      if (props == null ? void 0 : props.isDisabled) return;
+      if (event.relatedTarget && ((_a2 = parentListRef.current) == null ? void 0 : _a2.contains(event.relatedTarget))) return;
+      if (props.onBlur && event) props.onBlur(event);
+      handleOnBlurEasy();
+    },
+    [handleOnBlurEasy, props]
+  );
+  const handleOptionOnClick = useCallback(
+    (option) => {
+      if (props.isOnClickOptionClose) {
+        handleOnBlurEasy();
+      }
+      if (props.isMulti) {
+        if (isAll) {
+          const index = props.option.findIndex((selectedItems) => selectedItems.value === option.value);
+          const newValue = [...props.option.slice(0, index), ...props.option.slice(index + 1)];
+          props.onChange(newValue);
+        } else {
+          const index = props.value.findIndex((selectedItems) => selectedItems.value === option.value);
+          if (index === -1 && (!props.maxView || props.value.length < props.maxView)) {
+            const newValues = [...props.value ?? [], option];
+            props.onChange(newValues);
+            if (newValues.length == props.option.length) {
+              return setIsAll(true);
+            }
+          } else if (index !== -1) {
+            const newValue = [...props.value.slice(0, index), ...props.value.slice(index + 1)];
+            props.onChange(newValue);
+          }
+        }
+      } else {
+        props.onChange([option]);
+      }
+      return setIsAll(false);
+    },
+    [handleOnBlurEasy, isAll, props]
+  );
+  const handleListOptionOpenEffect = useCallback(() => {
+    setIsAnimating(false);
+    setIsOpen(true);
+  }, []);
+  const handleOnOpen = useCallback(() => {
+    setIsAnimating(false);
+    setIsOpen(true);
+  }, []);
+  const handleOnFocusEasy = useCallback(() => {
+    if (isAnimating) return;
+    if (isOpen) return;
+    setIsAnimating(true);
+    handleOnOpen();
+  }, [handleOnOpen, isAnimating, isOpen]);
+  const handleOnFocus = useCallback(
+    (event) => {
+      if (props == null ? void 0 : props.isDisabled) return;
+      if (props.onFocus) props.onFocus(event);
+      handleOnFocusEasy();
+    },
+    [handleOnFocusEasy, props]
+  );
+  useEffect(() => {
+    if (isOpen) handleOnOpen();
+  }, [height]);
+  const handleMouseDown = useCallback((event) => {
+    if (parentListRef.current && parentListRef.current.contains(event.target)) {
+      event.preventDefault();
+    }
+  }, []);
+  useEffect(() => {
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => {
+      document.removeEventListener("mousedown", handleMouseDown);
+    };
+  }, [handleMouseDown]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (parentListRef.current && refInput.current && !parentListRef.current.contains(event.target) && !refInput.current.contains(event.target)) {
+        handleOnBlurEasy();
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [handleOnBlurEasy]);
+  useEffect(() => {
+    if (isOpen) {
+      handleListOptionOpenEffect();
+    }
+  }, [handleListOptionOpenEffect, isOpen, props.option]);
+  const listVirtualizer = useVirtualizer({
+    count: optionsLength,
+    estimateSize: props.getEstimateSize ? props.getEstimateSize : () => sizeHeight,
+    getScrollElement: () => parentListRef.current,
+    overscan: DEFAULT_OVERSCAN,
+    paddingEnd: isFooter ? sizeHeight : 0
+  });
+  const handleFetchNextPage = useCallback(
+    (containerRefElement) => {
+      if (containerRefElement) {
+        const { scrollHeight, scrollTop, clientHeight } = containerRefElement;
+        if (scrollHeight - scrollTop - clientHeight < height && !props.isFetching && props.fetchNextPage) {
+          props.fetchNextPage();
+        }
+      }
+    },
+    [height, props]
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      SelectWrapper,
+      {
+        $size: props.size,
+        $genre: props.genre,
+        $sx: props.sx,
+        $radius: radius,
+        $isDisabled: props == null ? void 0 : props.isDisabled,
+        $parentListHeight: isOpen ? height : 0,
+        onFocus: handleOnFocus,
+        onBlur: handleOnBlur,
+        ref: wrapperRef,
+        animate: {
+          zIndex: isOpen ? "10" : "auto",
+          "--after-height": isOpen ? `${height + 1}px` : `0px`
+        },
+        transition: { duration: 0.2 },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SelectStyledInput,
+            {
+              tabIndex: 0,
+              id: props.id,
+              name: props.name,
+              $genre: props.genre,
+              $size: props.size,
+              placeholder: props.placeholder,
+              $error: props == null ? void 0 : props.error,
+              $isLoading: (_c = props == null ? void 0 : props.inputProps) == null ? void 0 : _c.isLoading,
+              $isNiceNumber: (_d = props == null ? void 0 : props.inputProps) == null ? void 0 : _d.isNiceNumber,
+              $postfixChildren: (_e = props == null ? void 0 : props.inputProps) == null ? void 0 : _e.postfixChildren,
+              $prefixChildren: (_f = props.inputProps) == null ? void 0 : _f.prefixChildren,
+              $isBold: (_g = props == null ? void 0 : props.inputProps) == null ? void 0 : _g.isBold,
+              $isCenter: (_h = props == null ? void 0 : props.inputProps) == null ? void 0 : _h.isCenter,
+              $sx: (_i = props == null ? void 0 : props.inputProps) == null ? void 0 : _i.sx,
+              disabled: props == null ? void 0 : props.isDisabled,
+              $isDisabled: props == null ? void 0 : props.isDisabled,
+              readOnly: (_j = props == null ? void 0 : props.inputProps) == null ? void 0 : _j.isReadOnly,
+              required: (_k = props == null ? void 0 : props.inputProps) == null ? void 0 : _k.isRequired,
+              defaultValue: (_l = props == null ? void 0 : props.inputProps) == null ? void 0 : _l.defaultValue,
+              value: ((_m = props == null ? void 0 : props.inputProps) == null ? void 0 : _m.value) ?? "",
+              type: (_n = props == null ? void 0 : props.inputProps) == null ? void 0 : _n.type,
+              onChange: (event) => {
+                var _a2, _b2;
+                return ((_a2 = props == null ? void 0 : props.inputProps) == null ? void 0 : _a2.onChange) && ((_b2 = props == null ? void 0 : props.inputProps) == null ? void 0 : _b2.onChange(event.target.value));
+              },
+              onBlur: (_o = props == null ? void 0 : props.inputProps) == null ? void 0 : _o.onBlur,
+              onFocus: (_p = props == null ? void 0 : props.inputProps) == null ? void 0 : _p.onFocus,
+              onClick: handleOnFocusEasy,
+              animate: {
+                borderBottomLeftRadius: isOpen ? `0px` : `${radius}px`,
+                borderBottomRightRadius: isOpen ? `0px` : `${radius}px`
+              },
+              transition: { duration: 0.2 },
+              ref: refInput
+            }
+          ),
+          props.isShowSelectInputIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SelectInputIcon,
+            {
+              size: props.size,
+              type: "id",
+              name: "Select",
+              $genre: props.genre,
+              $checked: isOpen,
+              $size: props.size,
+              tabIndex: -1
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(AnimatePresence, { children: isOpen ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DropdownListParent,
+            {
+              ref: parentListRef,
+              $genre: props.genre,
+              $isShowScroll: optionsLength > maxViewLength,
+              $isFooter: isFooter,
+              $size: props.size,
+              onScroll: (e) => handleFetchNextPage(e.target),
+              initial: { opacity: 0, height: 0 },
+              animate: {
+                height: `${height + 1}px`,
+                display: "flex",
+                opacity: 1,
+                zIndex: "1"
+              },
+              exit: {
+                height: "0px",
+                display: "none",
+                opacity: 0,
+                zIndex: "auto"
+              },
+              transition: { duration: 0.2 },
+              style: {
+                maxHeight: `${height + 1}px`
+              },
+              children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                DropdownList,
+                {
+                  style: {
+                    height: `${listVirtualizer.getTotalSize()}px`,
+                    minHeight: `${height}px`
+                  },
+                  children: [
+                    !props.isEmptyOption ? listVirtualizer.getVirtualItems().map((virtualRow) => {
+                      const item = props.option[virtualRow.index];
+                      const checked = isSelectedItem(item);
+                      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        ContainerDropdownOption,
+                        {
+                          checked,
+                          onClick: () => handleOptionOnClick(item),
+                          virtualRowSize: virtualRow.size,
+                          virtualRowStart: virtualRow.start,
+                          label: item.label,
+                          genre: props.genre,
+                          size: props.size,
+                          isShowDropdownOptionIcon: props.isShowDropdownOptionIcon,
+                          ...props.optionProps
+                        },
+                        virtualRow.index
+                      );
+                    }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      ContainerDropdownOption,
+                      {
+                        isNotShowHoverStyle: true,
+                        checked: false,
+                        onClick: () => {
+                        },
+                        virtualRowSize: ((_q = props == null ? void 0 : props.getEstimateSize) == null ? void 0 : _q.call(props, 0)) ?? sizeHeight,
+                        virtualRowStart: 0,
+                        label: props.labelEmptyOption ?? DEFAULT_LABEL_EMPTY_OPTION,
+                        genre: props.genre,
+                        size: props.size,
+                        ...props.optionProps,
+                        isShowDropdownOptionIcon: props.isShowDropdownOptionIcon
+                      },
+                      0
+                    ),
+                    isFooter && /* @__PURE__ */ jsxRuntimeExports.jsxs(DropdownFooter, { $isErase: isErase, $isSelectAll: isSelectAll, $genre: props.genre, $size: props.size, children: [
+                      props.footer.selectAll && /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownSelectAll, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Button,
+                        {
+                          isFullSize: true,
+                          genre: props.genre,
+                          onClick: handleSelectAllOnClick,
+                          size: "medium",
+                          isHiddenBorder: true,
+                          children: props.footer.selectAll.label
+                        }
+                      ) }),
+                      props.footer.erase && /* @__PURE__ */ jsxRuntimeExports.jsx(DropdownErase, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        Button,
+                        {
+                          isFullSize: true,
+                          genre: props.genre,
+                          onClick: handleEraseOnClick,
+                          size: "medium",
+                          isHiddenBorder: true,
+                          children: props.footer.erase.label
+                        }
+                      ) })
+                    ] })
+                  ]
+                }
+              )
+            }
+          ) : 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 ContainerDropdownOptionComponent = (params) => {
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      params.onClick();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    DropdownOption,
+    {
+      tabIndex: 0,
+      onClick: params.onClick,
+      onKeyDown: handleKeyDown,
+      $error: params.error,
+      $isCenter: params.isCenter,
+      $isNotShowHoverStyle: params.isNotShowHoverStyle,
+      $isLoading: params.isLoading,
+      $postfixChildren: params.postfixChildren,
+      $prefixChildren: params.prefixChildren,
+      $genre: params.genre,
+      $size: params.size,
+      $isBold: params.isBold,
+      $checked: params.checked,
+      style: {
+        height: `${params.virtualRowSize}px`,
+        transform: `translateY(${params.virtualRowStart}px)`
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { position: "relative", display: "contents" }, tabIndex: -1, "aria-hidden": "true", "aria-readonly": "true", children: [
+        params.label,
+        params.isShowDropdownOptionIcon && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DropdownOptionIcon,
+          {
+            tabIndex: -1,
+            size: params.size,
+            type: "checkbox",
+            name: "Arrow",
+            $genre: params.genre,
+            $checked: params.checked,
+            $size: params.size
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          DropdownOptionLayout,
+          {
+            $isNotShowHoverStyle: params.isNotShowHoverStyle,
+            $genre: params.genre,
+            $size: params.size,
+            $isBold: params.isBold,
+            $checked: params.checked
+          }
+        )
+      ] })
+    }
+  );
+};
+const ContainerDropdownOption = memo(ContainerDropdownOptionComponent);
+const SelectLanguage = (props) => {
+  const option = ListLanguage;
+  const [viewOption, setViewOption] = useState(option);
+  const [query, setQuery] = useState("");
+  const [isEmptyOption, setIsEmptyOption] = useState(false);
+  const handleSelectChange = (option2) => {
+    var _a;
+    props.onChange((_a = option2[0]) == null ? void 0 : _a.value.toString());
+    setQuery("");
+  };
+  const handleQueryChange = useCallback(
+    (value2) => {
+      setQuery(value2);
+      props.onChange("");
+      if (value2 === "") {
+        setIsEmptyOption(option.length === 0);
+        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);
+        setIsEmptyOption(filteredOptions.length === 0);
+      }
+    },
+    [option, props]
+  );
+  const [value, setValue] = useState(option.find((e) => e.value === props.value));
+  useEffect(() => {
+    if ((value == null ? void 0 : value.value) !== props.value) setValue(option.find((e) => e.value === props.value));
+  }, [option, props.value]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Select,
+    {
+      ...props,
+      option: viewOption,
+      isEmptyOption,
+      minView: 1,
+      maxView: 8,
+      isOnClickOptionClose: true,
+      value: value ? [value] : [],
+      onChange: handleSelectChange,
+      inputProps: {
+        ...props.inputProps,
+        variety: "standard",
+        isReadOnly: true,
+        value: (value == null ? void 0 : value.placeholder) ?? query,
+        onChange: handleQueryChange
+      }
+    }
+  );
+};
+const SelectMonth = (props) => {
+  const { value, onChange, startDate, endDate, monthsLocale, isShortLabel } = props;
+  const year = moment(value).utc().year();
+  const months = 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,
+        monthValue: monthItem.value
+      };
+    });
+  }, [monthsLocale, year, startDate, endDate, isShortLabel]);
+  const handleSelectChange = (option) => {
+    var _a, _b;
+    const selectedValue = Number((_a = option[0]) == null ? void 0 : _a.value);
+    const selectedMonthValue = moment((_b = option[0]) == null ? void 0 : _b.value).utc().month();
+    const currentMoment = moment(value).utc();
+    const currentYear = currentMoment.year();
+    const currentDay = currentMoment.date();
+    const newValue = moment().utc().year(currentYear).month(selectedMonthValue).date(currentDay).startOf("day");
+    if (newValue.isValid()) {
+      onChange(newValue.valueOf());
+    } else {
+      onChange(selectedValue);
+    }
+  };
+  const selectedMonth = useMemo(() => {
+    return months.find(
+      (month) => moment(value).utc().isSameOrAfter(moment(month.value).startOf("month")) && moment(value).utc().isBefore(moment(month.value).endOf("month"))
+    );
+  }, [months, value]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Select,
+    {
+      ...props,
+      option: months.filter((e) => !e.isDisabled),
+      minView: 1,
+      maxView: 5,
+      isOnClickOptionClose: true,
+      value: selectedMonth ? [selectedMonth] : [],
+      onChange: handleSelectChange,
+      inputProps: {
+        ...props.inputProps,
+        isCenter: true,
+        variety: "standard",
+        value: (selectedMonth == null ? void 0 : selectedMonth.placeholder) ?? props.placeholder,
+        isReadOnly: true
+      }
+    }
+  );
+};
+const SelectYear = (props) => {
+  const { value, onChange, startDate, endDate, sortOrder = "desc" } = props;
+  const startYear = moment(startDate).utc().year();
+  const endYear = moment(endDate).utc().year();
+  const years = 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 = (option) => {
+    var _a, _b;
+    const selectedValue = Number((_a = option[0]) == null ? void 0 : _a.value);
+    const selectedYearValue = moment((_b = option[0]) == null ? void 0 : _b.value).utc().year();
+    const currentMoment = moment(value).utc();
+    const currentMonth = currentMoment.month();
+    const currentDay = currentMoment.date();
+    const newValue = moment().utc().year(selectedYearValue).month(currentMonth).date(currentDay).startOf("day");
+    if (newValue.isValid()) {
+      onChange(newValue.valueOf());
+    } else {
+      onChange(selectedValue);
+    }
+  };
+  const selectedYear = useMemo(() => {
+    return years.find(
+      (year) => moment(value).utc().isSameOrAfter(moment(year.value)) && moment(value).utc().isBefore(moment(year.value).endOf("year"))
+    );
+  }, [years, value]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Select,
+    {
+      ...props,
+      option: years,
+      minView: 1,
+      maxView: 5,
+      isOnClickOptionClose: true,
+      value: selectedYear ? [selectedYear] : [],
+      onChange: handleSelectChange,
+      optionProps: {
+        isCenter: true,
+        variety: "standard",
+        ...props.optionProps
+      },
+      inputProps: {
+        ...props.inputProps,
+        isCenter: true,
+        isNiceNumber: true,
+        variety: "standard",
+        value: (selectedYear == null ? void 0 : selectedYear.placeholder) ?? props.placeholder,
+        isReadOnly: true
+      }
+    }
+  );
+};
+const SelectMapTheme = (props) => {
+  const options = useMemo(() => MapThemeList, []);
+  const optionsNormalize = useMemo(
+    () => MapThemeList.map((e) => ({ label: e.name, value: e.name, placeholder: e.name })),
+    []
+  );
+  const [viewOption, setViewOption] = useState(optionsNormalize);
+  const [query, setQuery] = useState("");
+  const [isEmptyOption, setIsEmptyOption] = useState(false);
+  const handleSelectChange = (option) => {
+    const findOption = options.find((e) => e.name === option[0].value);
+    if (findOption) {
+      props.onChange(findOption);
+    } else {
+      props.onChange(null);
+    }
+    setQuery("");
+  };
+  const handleQueryChange = useCallback(
+    (value2) => {
+      setQuery(value2);
+      props.onChange(null);
+      if (value2 === "") {
+        setIsEmptyOption(optionsNormalize.length === 0);
+        setViewOption(optionsNormalize);
+      } else {
+        const filteredOptions = optionsNormalize.filter(
+          (option) => Object.values(option).some((field) => field == null ? void 0 : field.toString().toLowerCase().includes(value2.toLowerCase()))
+        );
+        setViewOption(filteredOptions);
+        setIsEmptyOption(filteredOptions.length === 0);
+      }
+    },
+    [optionsNormalize, props]
+  );
+  const [value, setValue] = useState(
+    optionsNormalize.find((e) => e.value === props.value.name)
+  );
+  useEffect(() => {
+    if ((value == null ? void 0 : value.value) !== props.value.name) setValue(optionsNormalize.find((e) => e.value === props.value.name));
+  }, [options, props.value]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Select,
+    {
+      ...props,
+      option: viewOption,
+      isEmptyOption,
+      minView: 1,
+      maxView: 8,
+      isOnClickOptionClose: true,
+      value: value ? [value] : [],
+      onChange: handleSelectChange,
+      inputProps: {
+        ...props.inputProps,
+        variety: "standard",
+        isReadOnly: true,
+        value: (value == null ? void 0 : value.placeholder) ?? query,
+        onChange: handleQueryChange
+      }
+    }
+  );
+};
+const SelectWrapper = styled(motion.div)`
+  width: 100%;
+  position: relative;
+  height: fit-content;
+  ${(props) => !props.$isDisabled && css`
+      &:focus-within {
+        &:after {
+          content: '';
+          position: absolute;
+          top: -1px;
+          left: -1px;
+          bottom: -1px;
+          right: -1px;
+          outline: 2px ${props.theme.states.focus} solid;
+          outline-offset: 1px;
+          border-radius: ${`${props.$radius + 1}px`};
+          pointer-events: none;
+          height: calc(100% + var(--after-height) + 2px);
+        }
+      }
+    `}
+
+  outline: none !important;
+
+  &:focus-visible {
+    outline: none !important;
+  }
+  ${addSX};
+`;
+const DropdownListParentSize = css`
+  ${(props) => props.$size && DropdownListParentSizeConstructor(KEY_SIZE_DATA[props.$size])};
+`;
+const DropdownListParentSizeConstructor = (props) => css`
+  border-radius: 0px 0px ${props.radius}px ${props.radius}px;
+`;
+const DropdownListParent = styled(motion.div)`
+  outline: none;
+  display: none;
+
+  height: 0px;
+  width: 100%;
+
+  position: absolute;
+
+  overflow: hidden;
+  overflow-y: auto;
+
+  margin: 0;
+  padding: 0;
+
+  background: ${(props) => props.theme.colors.input[props.$genre].background.rest};
+  border: solid 1px ${(props) => props.theme.colors.input[props.$genre].border.rest};
+  border-top: 0px !important;
+  ${DropdownListParentSize};
+  ${(props) => !props.$isShowScroll && addRemoveScrollbar};
+`;
+const DropdownList = styled.ul`
+  list-style: none;
+
+  position: relative;
+
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+
+  transform: translateZ(0);
+`;
+const DropdownOption = styled.li`
+  ${StyledInputCSS};
+  width: 100%;
+  border: 0px;
+  display: flex;
+  align-items: center;
+  border-radius: 0;
+  opacity: 1;
+  ${addRemoveOutline};
+  ${addBorder};
+  &:last-child {
+    border-radius: 0px 0px ${(props) => KEY_SIZE_DATA[props.$size].radius}px
+      ${(props) => KEY_SIZE_DATA[props.$size].radius}px;
+  }
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+const DropdownOptionHoverAndCheckedSize = css`
+  ${(props) => DropdownOptionHoverAndCheckedSizeConstructor(KEY_SIZE_DATA[props.$size])};
+`;
+const DropdownOptionHoverAndCheckedSizeConstructor = (props) => css`
+  width: calc(100% - ${props.padding - 6}px);
+  height: calc(100% - ${props.padding - 4}px);
+  border-radius: ${props.radius}px;
+`;
+const DropdownOptionLayout = styled.div`
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  left: 0;
+  right: 0;
+  ${DropdownOptionHoverAndCheckedSize};
+  border-style: solid;
+  border-width: 1px;
+  border-color: transparent;
+
+  ${addTransition};
+
+  ${(props) => !props.$isNotShowHoverStyle && css`
+      &:hover {
+        background: ${props.theme.colors.select[props.$genre].background.select};
+        color: ${props.theme.colors.select[props.$genre].color.select};
+      }
+    `}
+  ${(props) => props.$checked && css`
+      background: ${props.theme.colors.select[props.$genre].background.select};
+      border-color: ${props.theme.colors.select[props.$genre].border.select};
+      color: ${props.theme.colors.select[props.$genre].color.select};
+    `}
+`;
+const DropdownOptionIconSize = css`
+  ${(props) => DropdownOptionIconSizeConstructor(KEY_SIZE_DATA[props.$size])};
+`;
+const DropdownOptionIconSizeConstructor = (props) => css`
+  right: ${props.padding - 6}px;
+  height: ${props.height}px;
+`;
+const DropdownOptionIcon = styled(Icon)`
+  position: absolute;
+  right: 0;
+  height: 100%;
+  align-items: center;
+  ${DropdownOptionIconSize};
+  color: ${(props) => props.$checked ? props.theme.colors.select[props.$genre].border.select : props.theme.colors.input[props.$genre].border.rest};
+`;
+const SelectInputIcon = styled(Icon)`
+  position: absolute;
+  user-select: none;
+  pointer-events: none;
+  right: 0;
+  top: 0;
+  align-items: center;
+  ${DropdownOptionIconSize};
+  color: ${(props) => props.$checked ? props.theme.colors.select[props.$genre].border.select : props.theme.colors.input[props.$genre].border.rest};
+`;
+const DropdownFooter = styled.li`
+  ${StyledInputCSS};
+  display: flex;
+  align-items: center;
+  border-radius: 0;
+  opacity: 1;
+  border: 0px;
+  cursor: pointer;
+  position: sticky;
+  bottom: 0;
+  padding: 0px;
+  flex-shrink: 0;
+  margin-top: auto;
+`;
+const DropdownErase = styled.div`
+  margin-left: auto;
+  height: 100%;
+`;
+const DropdownSelectAll = styled.div`
+  margin-right: auto;
+  height: 100%;
+`;
+const SelectStyledInput = styled(StyledMotionInput)`
+  ${addRemoveOutline};
+  ${addSX};
+`;
+export {
+  ContainerDropdownOption as C,
+  DropdownListParentSize as D,
+  Select as S,
+  SelectLanguage as a,
+  SelectMonth as b,
+  SelectYear as c,
+  SelectMapTheme as d,
+  SelectWrapper as e,
+  DropdownListParentSizeConstructor as f,
+  DropdownListParent as g,
+  DropdownList as h,
+  DropdownOption as i,
+  DropdownOptionHoverAndCheckedSize as j,
+  DropdownOptionHoverAndCheckedSizeConstructor as k,
+  DropdownOptionLayout as l,
+  DropdownOptionIcon as m,
+  SelectInputIcon as n,
+  DropdownFooter as o,
+  DropdownErase as p,
+  DropdownSelectAll as q,
+  SelectStyledInput as r
+};
+//# sourceMappingURL=component.styles-Bn6ylF83.js.map