pds-dev-kit-web-test 2.5.705 → 2.5.707

package/dist/src/mobile/components/Dropdown/Dropdown.js

@@ -1,46 +1,64 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
+
+var __makeTemplateObject = this && this.__makeTemplateObject || function (cooked, raw) {
+  if (Object.defineProperty) {
+    Object.defineProperty(cooked, "raw", {
+      value: raw
+    });
+  } else {
+    cooked.raw = raw;
+  }
+  return cooked;
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __createBinding = this && this.__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function (o, v) {
+  Object.defineProperty(o, "default", {
+    enumerable: true,
+    value: v
+  });
+} : function (o, v) {
+  o["default"] = v;
+});
+var __importStar = this && this.__importStar || function (mod) {
+  if (mod && mod.__esModule) return mod;
+  var result = {};
+  if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+  __setModuleDefault(result, mod);
+  return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
 };
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var react_dom_1 = require("react-dom");
@@ -53,480 +71,631 @@ var ContextMenuItem_1 = require("../ContextMenuItem");
 var TextLabel_1 = require("../TextLabel");
 // TODO: selectionMode의 multi 기능 구현 추가 필요
 function Dropdown(_a) {
-    var _b = _a.colorTheme, colorTheme = _b === void 0 ? 'none' : _b, value = _a.value, defaultValue = _a.defaultValue, hintText = _a.hintText, _c = _a.maxHeightItemNumber, maxHeightItemNumber = _c === void 0 ? 5 : _c, _d = _a.responsiveMode, responsiveMode = _d === void 0 ? 'none' : _d, 
+  var _b = _a.colorTheme,
+    colorTheme = _b === void 0 ? 'none' : _b,
+    value = _a.value,
+    defaultValue = _a.defaultValue,
+    hintText = _a.hintText,
+    _c = _a.maxHeightItemNumber,
+    maxHeightItemNumber = _c === void 0 ? 5 : _c,
+    _d = _a.responsiveMode,
+    responsiveMode = _d === void 0 ? 'none' : _d,
     // selectionMode = 'single',
-    _e = _a.size, 
+    _e = _a.size,
     // selectionMode = 'single',
-    size = _e === void 0 ? 'large' : _e, _f = _a.state, state = _f === void 0 ? 'normal' : _f, valueArray = _a.valueArray, customWidth = _a.customWidth, _g = _a.displayType, displayType = _g === void 0 ? 'text_only' : _g, _h = _a.fontWeight, fontWeight = _h === void 0 ? 'regular' : _h, groupInfoArray = _a.groupInfoArray, onChange = _a.onChange;
-    var _j = (0, react_1.useState)(false), isFocused = _j[0], setIsFocused = _j[1];
-    var _k = (0, react_1.useState)(null), selectedValue = _k[0], setSelectedValue = _k[1];
-    var _l = (0, react_1.useState)(null), contextMenuSizeOffset = _l[0], setContextMenuSizeOffset = _l[1];
-    var _m = (0, react_1.useState)(null), dropdownPositionOffset = _m[0], setDropdownPositionOffset = _m[1];
-    var contextMenuRef = (0, react_1.useRef)(null);
-    var dropdownRef = (0, react_1.useRef)(null);
-    /**
-     * @when value 프롭의 값에 따라
-     * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
-     * @clear -
-     */
-    (0, react_1.useEffect)(function () {
-        if (value === null) {
-            setSelectedValue(null);
-            return;
-        }
-        if (value !== undefined) {
-            setSelectedValue(value);
-        }
-    }, [value]);
-    /**
-     * @when defaultValue 프롭에 값이 있을 시
-     * @expected Dropdown의 초기값을 설정해줍니다.
-     * @clear -
-     */
-    (0, react_1.useEffect)(function () {
-        if (!defaultValue) {
-            return;
-        }
-        setSelectedValue(defaultValue);
-    }, [defaultValue]);
-    /**
-     * @when : isFocused 변경되었을 때
-     * @expected : dropdownRef, contextMenuRef 의 위치를 업데이트합니다.
-     * @clear :
-     */
-    (0, react_1.useEffect)(function () {
-        if (dropdownRef.current) {
-            var _a = dropdownRef.current.getBoundingClientRect(), top_1 = _a.top, right = _a.right, left = _a.left, bottom = _a.bottom;
-            setDropdownPositionOffset({
-                top: top_1 + window.scrollY,
-                right: right + window.scrollX,
-                bottom: bottom + window.scrollY,
-                left: left + window.scrollX
-            });
-        }
-        if (!isFocused && contextMenuRef.current) {
-            setContextMenuSizeOffset(null);
-            return;
-        }
-        if (contextMenuRef.current) {
-            setContextMenuSizeOffset({
-                height: contextMenuRef.current.offsetHeight,
-                width: contextMenuRef.current.offsetWidth
-            });
-        }
-    }, [isFocused]);
-    var contextMenuPositionCss = (0, clickTypeSystemUICssGenerator_1.default)({
-        sizeOffset: contextMenuSizeOffset,
-        positionOffset: dropdownPositionOffset
-    });
-    var handleClick = function () {
-        if (state === 'disabled' || state === 'read_only') {
-            return;
+    size = _e === void 0 ? 'large' : _e,
+    _f = _a.state,
+    state = _f === void 0 ? 'normal' : _f,
+    valueArray = _a.valueArray,
+    customWidth = _a.customWidth,
+    _g = _a.displayType,
+    displayType = _g === void 0 ? 'text_only' : _g,
+    _h = _a.fontWeight,
+    fontWeight = _h === void 0 ? 'regular' : _h,
+    groupInfoArray = _a.groupInfoArray,
+    onChange = _a.onChange;
+  var _j = (0, react_1.useState)(false),
+    isFocused = _j[0],
+    setIsFocused = _j[1];
+  var _k = (0, react_1.useState)(null),
+    selectedValue = _k[0],
+    setSelectedValue = _k[1];
+  var _l = (0, react_1.useState)(null),
+    contextMenuSizeOffset = _l[0],
+    setContextMenuSizeOffset = _l[1];
+  var _m = (0, react_1.useState)(null),
+    dropdownPositionOffset = _m[0],
+    setDropdownPositionOffset = _m[1];
+  var contextMenuRef = (0, react_1.useRef)(null);
+  var dropdownRef = (0, react_1.useRef)(null);
+  /**
+   * @when value 프롭의 값에 따라
+   * @expected 값이 null일 때 드롭다운을 초기화하고, 값이 있다면 해당 값으로 설정해줍니다.
+   * @clear -
+   */
+  (0, react_1.useEffect)(function () {
+    if (value === null) {
+      setSelectedValue(null);
+      return;
+    }
+    if (value !== undefined) {
+      setSelectedValue(value);
+    }
+  }, [value]);
+  /**
+   * @when defaultValue 프롭에 값이 있을 시
+   * @expected Dropdown의 초기값을 설정해줍니다.
+   * @clear -
+   */
+  (0, react_1.useEffect)(function () {
+    if (!defaultValue) {
+      return;
+    }
+    setSelectedValue(defaultValue);
+  }, [defaultValue]);
+  /**
+   * @when : isFocused 변경되었을 때
+   * @expected : dropdownRef, contextMenuRef 의 위치를 업데이트합니다.
+   * @clear :
+   */
+  (0, react_1.useEffect)(function () {
+    if (dropdownRef.current) {
+      var _a = dropdownRef.current.getBoundingClientRect(),
+        top_1 = _a.top,
+        right = _a.right,
+        left = _a.left,
+        bottom = _a.bottom;
+      setDropdownPositionOffset({
+        top: top_1 + window.scrollY,
+        right: right + window.scrollX,
+        bottom: bottom + window.scrollY,
+        left: left + window.scrollX
+      });
+    }
+    if (!isFocused && contextMenuRef.current) {
+      setContextMenuSizeOffset(null);
+      return;
+    }
+    if (contextMenuRef.current) {
+      setContextMenuSizeOffset({
+        height: contextMenuRef.current.offsetHeight,
+        width: contextMenuRef.current.offsetWidth
+      });
+    }
+  }, [isFocused]);
+  var contextMenuPositionCss = (0, clickTypeSystemUICssGenerator_1.default)({
+    sizeOffset: contextMenuSizeOffset,
+    positionOffset: dropdownPositionOffset
+  });
+  var handleClick = function () {
+    if (state === 'disabled' || state === 'read_only') {
+      return;
+    }
+    setIsFocused(!isFocused);
+  };
+  var handleBlur = function () {
+    if (isFocused) {
+      setIsFocused(false);
+    }
+  };
+  var handleClickOption = function (option) {
+    setIsFocused(false);
+    if (option.state === 'disabled') {
+      return;
+    }
+    if (value === undefined) {
+      setSelectedValue(option);
+    }
+    if (onChange) {
+      onChange(option);
+    }
+  };
+  var getCustomWidth = function () {
+    var _a;
+    if (customWidth) {
+      return customWidth;
+    }
+    if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) {
+      return "".concat(dropdownRef.current.offsetWidth, "px");
+    }
+    return '';
+  };
+  var getIconColorKey = function () {
+    if (state === 'disabled' || state === 'read_only') {
+      return 'ui_cpnt_dropdown_display_icon_disabled';
+    }
+    return 'ui_cpnt_dropdown_display_icon_normal';
+  };
+  var getArrowIconColorKey = function () {
+    if (colorTheme === 'dark') {
+      if (state === 'disabled' || state === 'read_only') {
+        return 'ui_cpnt_dropdown_text_darktheme_disabled';
+      }
+      return 'ui_cpnt_dropdown_icon_darktheme_default';
+    }
+    if (colorTheme === 'white') {
+      if (state === 'disabled' || state === 'read_only') {
+        return 'ui_cpnt_dropdown_icon_02';
+      }
+      return 'ui_cpnt_dropdown_icon_white_default';
+    }
+    if (state === 'disabled' || state === 'read_only') {
+      return 'ui_cpnt_dropdown_icon_02';
+    }
+    return 'ui_cpnt_dropdown_icon_01';
+  };
+  var getTextColorTheme = function () {
+    if (colorTheme === 'none') {
+      if (state === 'normal') {
+        var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;
+        if (isHintTextShow) {
+          return 'sysTextSecondary';
         }
-        setIsFocused(!isFocused);
-    };
-    var handleBlur = function () {
         if (isFocused) {
-            setIsFocused(false);
-        }
-    };
-    var handleClickOption = function (option) {
-        setIsFocused(false);
-        if (option.state === 'disabled') {
-            return;
-        }
-        if (value === undefined) {
-            setSelectedValue(option);
-        }
-        if (onChange) {
-            onChange(option);
-        }
-    };
-    var getCustomWidth = function () {
-        var _a;
-        if (customWidth) {
-            return customWidth;
-        }
-        if ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) {
-            return "".concat(dropdownRef.current.offsetWidth, "px");
-        }
-        return '';
-    };
-    var getIconColorKey = function () {
-        if (state === 'disabled' || state === 'read_only') {
-            return 'ui_cpnt_dropdown_display_icon_disabled';
-        }
-        return 'ui_cpnt_dropdown_display_icon_normal';
-    };
-    var getArrowIconColorKey = function () {
-        if (colorTheme === 'dark') {
-            if (state === 'disabled' || state === 'read_only') {
-                return 'ui_cpnt_dropdown_text_darktheme_disabled';
-            }
-            return 'ui_cpnt_dropdown_icon_darktheme_default';
-        }
-        if (colorTheme === 'white') {
-            if (state === 'disabled' || state === 'read_only') {
-                return 'ui_cpnt_dropdown_icon_02';
-            }
-            return 'ui_cpnt_dropdown_icon_white_default';
+          return 'sysTextPrimary';
         }
-        if (state === 'disabled' || state === 'read_only') {
-            return 'ui_cpnt_dropdown_icon_02';
+        return 'sysTextPrimary';
+      }
+      if (state === 'read_only') {
+        return 'sysTextTertiary';
+      }
+      if (state === 'disabled') {
+        return 'sysTextTertiary';
+      }
+      return 'sysTextPrimary';
+    }
+    if (colorTheme === 'white') {
+      if (state === 'disabled') {
+        return 'sysTextTertiary';
+      }
+    }
+  };
+  var getTextColorOverride = function () {
+    if (colorTheme === 'dark') {
+      if (state === 'normal') {
+        var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;
+        if (isHintTextShow) {
+          return 'ui_cpnt_dropdown_text_darktheme_hinttext';
         }
-        return 'ui_cpnt_dropdown_icon_01';
-    };
-    var getTextColorTheme = function () {
-        if (colorTheme === 'none') {
-            if (state === 'normal') {
-                var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;
-                if (isHintTextShow) {
-                    return 'sysTextSecondary';
-                }
-                if (isFocused) {
-                    return 'sysTextPrimary';
-                }
-                return 'sysTextPrimary';
-            }
-            if (state === 'read_only') {
-                return 'sysTextTertiary';
-            }
-            if (state === 'disabled') {
-                return 'sysTextTertiary';
-            }
-            return 'sysTextPrimary';
+        if (isFocused) {
+          return 'ui_cpnt_dropdown_text_darktheme_enabled';
         }
-        if (colorTheme === 'white') {
-            if (state === 'disabled') {
-                return 'sysTextTertiary';
-            }
+        return 'ui_cpnt_dropdown_text_darktheme_hint';
+      }
+      if (state === 'read_only') {
+        return 'ui_cpnt_dropdown_text_darktheme_readonly';
+      }
+      if (state === 'disabled') {
+        return 'ui_cpnt_dropdown_text_darktheme_disabled';
+      }
+      return 'ui_cpnt_dropdown_text_darktheme_enabled';
+    }
+    if (colorTheme === 'white') {
+      if (isFocused) {
+        return 'ui_cpnt_dropdown_text_white_enabled';
+      }
+      if (state === 'normal') {
+        return 'ui_cpnt_dropdown_text_white_hint';
+      }
+      if (state === 'read_only') {
+        return 'ui_cpnt_dropdown_text_white_readonly';
+      }
+      if (state !== 'disabled') {
+        return 'ui_cpnt_dropdown_text_white_disabled';
+      }
+    }
+  };
+  var maxHeight = (0, react_1.useMemo)(function () {
+    if (size === 'small') {
+      var SMALL_HEIGHT = 32;
+      return SMALL_HEIGHT * maxHeightItemNumber;
+    }
+    // NOTE: 사이즈가 large인 경우입니다.
+    var LARGE_HEIGHT = 48;
+    return LARGE_HEIGHT * maxHeightItemNumber;
+  }, [size, maxHeightItemNumber]);
+  var resultByGroup = {};
+  if (groupInfoArray) {
+    groupInfoArray.forEach(function (groupInfo) {
+      var _a;
+      var currentGroupResult = [];
+      (_a = groupInfo.values) === null || _a === void 0 ? void 0 : _a.forEach(function (value) {
+        var matchingObject = valueArray.find(function (item) {
+          return item.value === value;
+        });
+        if (matchingObject) {
+          currentGroupResult.push(matchingObject);
         }
-    };
-    var getTextColorOverride = function () {
-        if (colorTheme === 'dark') {
-            if (state === 'normal') {
-                var isHintTextShow = !(selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) && !(value === null || value === void 0 ? void 0 : value.text) && !(defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) && !!hintText;
-                if (isHintTextShow) {
-                    return 'ui_cpnt_dropdown_text_darktheme_hinttext';
-                }
-                if (isFocused) {
-                    return 'ui_cpnt_dropdown_text_darktheme_enabled';
+      });
+      resultByGroup[groupInfo.key] = currentGroupResult;
+    });
+  }
+  return (0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({
+    "x-pds-name": "Dropdown",
+    "x-pds-element-type": "component",
+    "x-pds-device-type": "mobile",
+    className: "container",
+    ref: dropdownRef,
+    size: size,
+    tabIndex: 0,
+    onBlur: handleBlur,
+    responsiveMode: responsiveMode,
+    customWidth: customWidth,
+    displayType: displayType
+  }, {
+    children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({
+      size: size,
+      onClick: handleClick,
+      isFocused: isFocused,
+      state: state,
+      colorTheme: colorTheme,
+      responsiveMode: responsiveMode,
+      customWidth: customWidth,
+      displayType: displayType
+    }, {
+      children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({
+        size: size,
+        responsiveMode: responsiveMode,
+        displayType: displayType
+      }, {
+        children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, {
+            size: size === 'small' ? 20 : 24,
+            iconName: selectedValue.iconName,
+            fillType: selectedValue.iconFillType,
+            colorKey: getIconColorKey()
+          }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, {
+            size: "spacing_b",
+            spacingType: "width"
+          })]
+        }), (displayType === 'text_only' || displayType === 'icon_text') && (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+          text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText,
+          styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular',
+          singleLineMode: "use",
+          colorTheme: getTextColorTheme(),
+          colorOverride: getTextColorOverride(),
+          ellipsisMode: "use",
+          lineLimit: 1,
+          wordBreak: "break_all"
+        })]
+      })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, {
+        size: 16,
+        fillType: "line",
+        iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down',
+        colorKey: getArrowIconColorKey()
+      })]
+    })), isFocused && (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({
+      ref: contextMenuRef,
+      contextMenuPositionCss: contextMenuPositionCss
+    }, {
+      children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({
+        autoWidthMode: "use",
+        maxHeight: maxHeight,
+        customWidth: getCustomWidth()
+      }, {
+        children: groupInfoArray ? Object.keys(resultByGroup).map(function (key) {
+          var _a, _b, _c;
+          return (0, jsx_runtime_1.jsxs)(S_Group, __assign({
+            size: size,
+            hasGroupTitle: Boolean((_a = groupInfoArray.find(function (groupInfo) {
+              return groupInfo.key === key;
+            })) === null || _a === void 0 ? void 0 : _a.title)
+          }, {
+            children: [((_b = groupInfoArray.find(function (groupInfo) {
+              return groupInfo.key === key;
+            })) === null || _b === void 0 ? void 0 : _b.title) && (0, jsx_runtime_1.jsx)(S_Wrapper, __assign({
+              size: size
+            }, {
+              children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, {
+                text: (_c = groupInfoArray.find(function (groupInfo) {
+                  return groupInfo.key === key;
+                })) === null || _c === void 0 ? void 0 : _c.title,
+                colorTheme: "sysTextSecondary",
+                styleTheme: "caption1Bold",
+                letterSpacing: "0.15em"
+              })
+            })), resultByGroup[key].map(function (el) {
+              return (0, jsx_runtime_1.jsx)("div", __assign({
+                onMouseDown: function () {
+                  return handleClickOption(el);
                 }
-                return 'ui_cpnt_dropdown_text_darktheme_hint';
-            }
-            if (state === 'read_only') {
-                return 'ui_cpnt_dropdown_text_darktheme_readonly';
-            }
-            if (state === 'disabled') {
-                return 'ui_cpnt_dropdown_text_darktheme_disabled';
-            }
-            return 'ui_cpnt_dropdown_text_darktheme_enabled';
-        }
-        if (colorTheme === 'white') {
-            if (isFocused) {
-                return 'ui_cpnt_dropdown_text_white_enabled';
-            }
-            if (state === 'normal') {
-                return 'ui_cpnt_dropdown_text_white_hint';
+              }, {
+                children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, {
+                  option: el,
+                  size: size,
+                  isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value,
+                  state: el.state,
+                  displayType: displayType
+                })
+              }), el.value);
+            })]
+          }), key);
+        }) : valueArray.map(function (el) {
+          return (0, jsx_runtime_1.jsx)("div", __assign({
+            onMouseDown: function () {
+              return handleClickOption(el);
             }
-            if (state === 'read_only') {
-                return 'ui_cpnt_dropdown_text_white_readonly';
-            }
-            if (state !== 'disabled') {
-                return 'ui_cpnt_dropdown_text_white_disabled';
-            }
-        }
-    };
-    var maxHeight = (0, react_1.useMemo)(function () {
-        if (size === 'small') {
-            var SMALL_HEIGHT = 32;
-            return SMALL_HEIGHT * maxHeightItemNumber;
-        }
-        // NOTE: 사이즈가 large인 경우입니다.
-        var LARGE_HEIGHT = 48;
-        return LARGE_HEIGHT * maxHeightItemNumber;
-    }, [size, maxHeightItemNumber]);
-    var resultByGroup = {};
-    if (groupInfoArray) {
-        groupInfoArray.forEach(function (groupInfo) {
-            var _a;
-            var currentGroupResult = [];
-            (_a = groupInfo.values) === null || _a === void 0 ? void 0 : _a.forEach(function (value) {
-                var matchingObject = valueArray.find(function (item) { return item.value === value; });
-                if (matchingObject) {
-                    currentGroupResult.push(matchingObject);
-                }
-            });
-            resultByGroup[groupInfo.key] = currentGroupResult;
-        });
-    }
-    return ((0, jsx_runtime_1.jsxs)(S_Dropdown, __assign({ "x-pds-name": "Dropdown", "x-pds-element-type": "component", "x-pds-device-type": "mobile", className: "container", ref: dropdownRef, size: size, tabIndex: 0, onBlur: handleBlur, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_Select, __assign({ size: size, onClick: handleClick, isFocused: isFocused, state: state, colorTheme: colorTheme, responsiveMode: responsiveMode, customWidth: customWidth, displayType: displayType }, { children: [(0, jsx_runtime_1.jsxs)(S_TextLabel, __assign({ size: size, responsiveMode: responsiveMode, displayType: displayType }, { children: [(displayType === 'icon_only' || displayType === 'icon_text') && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.iconName) && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: size === 'small' ? 20 : 24, iconName: selectedValue.iconName, fillType: selectedValue.iconFillType, colorKey: getIconColorKey() }), displayType === 'icon_text' && (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })] })), (displayType === 'text_only' || displayType === 'icon_text') && ((0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.text) || (value === null || value === void 0 ? void 0 : value.text) || (defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.text) || hintText, styleTheme: fontWeight === 'bold' ? 'form2Bold' : 'form2Regular', singleLineMode: "use", colorTheme: getTextColorTheme(), colorOverride: getTextColorOverride(), ellipsisMode: "use", lineLimit: 1, wordBreak: "break_all" }))] })), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: isFocused ? 'ic_arrow_up' : 'ic_arrow_down', colorKey: getArrowIconColorKey() })] })), isFocused &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(S_ContextMenuWrapper, __assign({ ref: contextMenuRef, contextMenuPositionCss: contextMenuPositionCss }, { children: (0, jsx_runtime_1.jsx)(ContextMenu_1.ContextMenu, __assign({ autoWidthMode: "use", maxHeight: maxHeight, customWidth: getCustomWidth() }, { children: groupInfoArray
-                            ? Object.keys(resultByGroup).map(function (key) {
-                                var _a, _b, _c;
-                                return ((0, jsx_runtime_1.jsxs)(S_Group, __assign({ size: size, hasGroupTitle: Boolean((_a = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _a === void 0 ? void 0 : _a.title) }, { children: [((_b = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _b === void 0 ? void 0 : _b.title) && ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ size: size }, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: (_c = groupInfoArray.find(function (groupInfo) { return groupInfo.key === key; })) === null || _c === void 0 ? void 0 : _c.title, colorTheme: "sysTextSecondary", styleTheme: "caption1Bold", letterSpacing: "0.15em" }) }))), resultByGroup[key].map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, state: el.state, displayType: displayType }) }), el.value)); })] }), key));
-                            })
-                            : valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("div", __assign({ onMouseDown: function () { return handleClickOption(el); } }, { children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, { option: el, size: size, isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value, state: el.state, displayType: displayType }) }), el.value)); }) })) })), document.body)] })));
+          }, {
+            children: (0, jsx_runtime_1.jsx)(ContextMenuItem_1.ContextMenuItem, {
+              option: el,
+              size: size,
+              isSelected: (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.value) === el.value,
+              state: el.state,
+              displayType: displayType
+            })
+          }), el.value);
+        })
+      }))
+    })), document.body)]
+  }));
 }
 var largeGroupTitle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+  var theme = _a.theme;
+  return theme.spacing.spacingE;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+  var theme = _a.theme;
+  return theme.spacing.spacingE;
 });
 var mediumGroupTitle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 });
 var smallGroupTitle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-left: ", ";\n  padding-right: ", ";\n"], ["\n  padding-left: ", ";\n  padding-right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 });
 var largeGroupDivider = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  left: ", ";\n  right: ", ";\n"], ["\n  left: ", ";\n  right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+  var theme = _a.theme;
+  return theme.spacing.spacingE;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingE;
+  var theme = _a.theme;
+  return theme.spacing.spacingE;
 });
 var mediumGroupDivider = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  left: ", ";\n  right: ", ";\n"], ["\n  left: ", ";\n  right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 });
 var smallGroupDivider = (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  left: ", ";\n  right: ", ";\n"], ["\n  left: ", ";\n  right: ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingD;
+  var theme = _a.theme;
+  return theme.spacing.spacingD;
 });
 var S_Group = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  position: relative;\n\n  &:not(:last-child) {\n    padding-bottom: ", ";\n  }\n\n  &:not(:first-child) {\n    padding-top: ", ";\n    ", ";\n\n    &:after {\n      background-color: ", ";\n      content: '';\n      height: 1px;\n      position: absolute;\n      top: 0;\n\n      ", ";\n    }\n  }\n"], ["\n  position: relative;\n\n  &:not(:last-child) {\n    padding-bottom: ", ";\n  }\n\n  &:not(:first-child) {\n    padding-top: ", ";\n    ", ";\n\n    &:after {\n      background-color: ", ";\n      content: '';\n      height: 1px;\n      position: absolute;\n      top: 0;\n\n      ", ";\n    }\n  }\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+  var theme = _a.theme;
+  return theme.spacing.spacingB;
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
+  var theme = _a.theme;
+  return theme.spacing.spacingA;
 }, function (_a) {
-    var theme = _a.theme, hasGroupTitle = _a.hasGroupTitle;
-    return hasGroupTitle
-        ? "padding-top: ".concat(theme.spacing.spacingA)
-        : "padding-top: ".concat(theme.spacing.spacingB);
+  var theme = _a.theme,
+    hasGroupTitle = _a.hasGroupTitle;
+  return hasGroupTitle ? "padding-top: ".concat(theme.spacing.spacingA) : "padding-top: ".concat(theme.spacing.spacingB);
 }, function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_divider;
+  var theme = _a.theme;
+  return theme.ui_cpnt_divider;
 }, function (_a) {
-    var size = _a.size;
-    return size &&
-        {
-            large: largeGroupDivider,
-            medium: mediumGroupDivider,
-            small: smallGroupDivider
-        }[size];
+  var size = _a.size;
+  return size && {
+    large: largeGroupDivider,
+    medium: mediumGroupDivider,
+    small: smallGroupDivider
+  }[size];
 });
 var S_Wrapper = styled_components_1.default.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  padding-bottom: ", ";\n\n  ", ":first-child & {\n    padding-top: ", ";\n  }\n\n  ", ":not(:first-child) > & {\n    padding-top: ", ";\n  }\n\n  ", ";\n"], ["\n  padding-bottom: ", ";\n\n  ", ":first-child & {\n    padding-top: ", ";\n  }\n\n  ", ":not(:first-child) > & {\n    padding-top: ", ";\n  }\n\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 }, S_Group, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingA;
+  var theme = _a.theme;
+  return theme.spacing.spacingA;
 }, S_Group, function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingC;
+  var theme = _a.theme;
+  return theme.spacing.spacingC;
 }, function (_a) {
-    var size = _a.size;
-    return size &&
-        {
-            large: largeGroupTitle,
-            medium: mediumGroupTitle,
-            small: smallGroupTitle
-        }[size];
+  var size = _a.size;
+  return size && {
+    large: largeGroupTitle,
+    medium: mediumGroupTitle,
+    small: smallGroupTitle
+  }[size];
 });
 var S_TextLabel = styled_components_1.default.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"], ["\n  align-items: center;\n  display: flex;\n  padding-right: ", ";\n\n  ", ";\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.spacing.spacingB;
+  var theme = _a.theme;
+  return theme.spacing.spacingB;
 }, function (_a) {
-    var size = _a.size;
-    return size &&
-        {
-            large: large,
-            medium: medium,
-            small: small
-        }[size];
+  var size = _a.size;
+  return size && {
+    large: large,
+    medium: medium,
+    small: small
+  }[size];
 });
 var large = (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"], ["\n  height: 48px;\n  width: ", ";\n\n  & > div {\n    height: 48px;\n    line-height: 48px;\n  }\n"])), function (_a) {
-    var displayType = _a.displayType, responsiveMode = _a.responsiveMode;
-    if (responsiveMode === 'use') {
-        return '100%';
-    }
-    if (displayType === 'icon_only') {
-        return 'fit-content';
-    }
-    return '432px';
+  var displayType = _a.displayType,
+    responsiveMode = _a.responsiveMode;
+  if (responsiveMode === 'use') {
+    return '100%';
+  }
+  if (displayType === 'icon_only') {
+    return 'fit-content';
+  }
+  return '432px';
 });
 var medium = (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  border-radius: 12px;\n  height: 40px;\n  width: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"], ["\n  border-radius: 12px;\n  height: 40px;\n  width: ", ";\n\n  & > div {\n    height: 40px;\n    line-height: 40px;\n  }\n"])), function (_a) {
-    var displayType = _a.displayType, responsiveMode = _a.responsiveMode;
-    if (responsiveMode === 'use') {
-        return '100%';
-    }
-    if (displayType === 'icon_only') {
-        return 'fit-content';
-    }
-    return '188px';
+  var displayType = _a.displayType,
+    responsiveMode = _a.responsiveMode;
+  if (responsiveMode === 'use') {
+    return '100%';
+  }
+  if (displayType === 'icon_only') {
+    return 'fit-content';
+  }
+  return '188px';
 });
 var small = (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"], ["\n  border-radius: 10px;\n  height: 32px;\n  width: ", ";\n\n  & > div {\n    height: 32px;\n    line-height: 32px;\n  }\n"])), function (_a) {
-    var displayType = _a.displayType, responsiveMode = _a.responsiveMode;
-    if (responsiveMode === 'use') {
-        return '100%';
-    }
-    if (displayType === 'icon_only') {
-        return 'fit-content';
-    }
-    return '188px';
+  var displayType = _a.displayType,
+    responsiveMode = _a.responsiveMode;
+  if (responsiveMode === 'use') {
+    return '100%';
+  }
+  if (displayType === 'icon_only') {
+    return 'fit-content';
+  }
+  return '188px';
 });
 var S_Dropdown = styled_components_1.default.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"], ["\n  display: inline-block;\n  outline: none;\n  position: relative;\n\n  ", ";\n\n  ", "\n"])), function (_a) {
-    var size = _a.size;
-    return size &&
-        {
-            large: large,
-            medium: medium,
-            small: small
-        }[size];
+  var size = _a.size;
+  return size && {
+    large: large,
+    medium: medium,
+    small: small
+  }[size];
 }, function (_a) {
-    var customWidth = _a.customWidth;
-    return customWidth && "width: ".concat(customWidth, ";");
+  var customWidth = _a.customWidth;
+  return customWidth && "width: ".concat(customWidth, ";");
 });
 var colorThemeBackgroundReadOnly = (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    switch (colorTheme) {
-        case 'dark':
-            return theme.ui_cpnt_dropdown_base_darktheme_disabled;
-        case 'white':
-            return theme.ui_cpnt_dropdown_base_white_disabled;
-        case 'none':
-            return theme.ui_cpnt_dropdown_base_disabled;
-    }
+  var colorTheme = _a.colorTheme,
+    theme = _a.theme;
+  switch (colorTheme) {
+    case 'dark':
+      return theme.ui_cpnt_dropdown_base_darktheme_disabled;
+    case 'white':
+      return theme.ui_cpnt_dropdown_base_white_disabled;
+    case 'none':
+      return theme.ui_cpnt_dropdown_base_disabled;
+  }
 });
 var colorThemeBackgroundDisabled = (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    switch (colorTheme) {
-        case 'dark':
-            return theme.ui_cpnt_dropdown_base_darktheme_disabled;
-        case 'white':
-            return theme.ui_cpnt_dropdown_base_white_disabled;
-        case 'none':
-            return theme.ui_cpnt_dropdown_base_disabled;
-    }
+  var colorTheme = _a.colorTheme,
+    theme = _a.theme;
+  switch (colorTheme) {
+    case 'dark':
+      return theme.ui_cpnt_dropdown_base_darktheme_disabled;
+    case 'white':
+      return theme.ui_cpnt_dropdown_base_white_disabled;
+    case 'none':
+      return theme.ui_cpnt_dropdown_base_disabled;
+  }
 });
 var colorThemeBackgroundNormal = (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    switch (colorTheme) {
-        case 'dark':
-            return theme.ui_cpnt_dropdown_base_darktheme_normal;
-        case 'white':
-            return theme.ui_cpnt_dropdown_base_white_normal;
-        case 'none':
-            return theme.ui_cpnt_dropdown_base_normal;
-    }
+  var colorTheme = _a.colorTheme,
+    theme = _a.theme;
+  switch (colorTheme) {
+    case 'dark':
+      return theme.ui_cpnt_dropdown_base_darktheme_normal;
+    case 'white':
+      return theme.ui_cpnt_dropdown_base_white_normal;
+    case 'none':
+      return theme.ui_cpnt_dropdown_base_normal;
+  }
 });
 var colorThemeBorderWhite = (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var state = _a.state, theme = _a.theme;
-    switch (state) {
-        case 'disabled':
-        case 'read_only':
-            return theme.ui_cpnt_dropdown_border_white_disabled;
-        case 'normal':
-            return theme.ui_cpnt_dropdown_border_white_normal;
-    }
+  var state = _a.state,
+    theme = _a.theme;
+  switch (state) {
+    case 'disabled':
+    case 'read_only':
+      return theme.ui_cpnt_dropdown_border_white_disabled;
+    case 'normal':
+      return theme.ui_cpnt_dropdown_border_white_normal;
+  }
 });
 var colorThemeBorderDark = (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var state = _a.state, theme = _a.theme;
-    switch (state) {
-        case 'disabled':
-        case 'read_only':
-            return theme.ui_cpnt_dropdown_border_darktheme_disabled;
-        case 'normal':
-            return theme.ui_cpnt_dropdown_border_darktheme_normal;
-    }
+  var state = _a.state,
+    theme = _a.theme;
+  switch (state) {
+    case 'disabled':
+    case 'read_only':
+      return theme.ui_cpnt_dropdown_border_darktheme_disabled;
+    case 'normal':
+      return theme.ui_cpnt_dropdown_border_darktheme_normal;
+  }
 });
 var borderColor = (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var state = _a.state, theme = _a.theme;
-    switch (state) {
-        case 'disabled':
-            return theme.ui_cpnt_dropdown_border_disabled;
-        case 'read_only':
-            return theme.ui_cpnt_dropdown_border_disabled;
-        case 'normal':
-            return theme.ui_cpnt_dropdown_border_normal;
-    }
+  var state = _a.state,
+    theme = _a.theme;
+  switch (state) {
+    case 'disabled':
+      return theme.ui_cpnt_dropdown_border_disabled;
+    case 'read_only':
+      return theme.ui_cpnt_dropdown_border_disabled;
+    case 'normal':
+      return theme.ui_cpnt_dropdown_border_normal;
+  }
 });
 var backgroundActiveColor = (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n  ", ";\n"], ["\n  ", ";\n"])), function (_a) {
-    var colorTheme = _a.colorTheme, theme = _a.theme;
-    switch (colorTheme) {
-        case 'none':
-            return theme.ui_cpnt_textfield_base_pressed;
-        case 'dark':
-            return theme.ui_cpnt_dropdown_base_pressed_darktheme;
-        case 'white':
-            return theme.ui_cpnt_dropdown_base_pressed_white;
-        default:
-            return theme.ui_cpnt_textfield_base_pressed;
-    }
+  var colorTheme = _a.colorTheme,
+    theme = _a.theme;
+  switch (colorTheme) {
+    case 'none':
+      return theme.ui_cpnt_textfield_base_pressed;
+    case 'dark':
+      return theme.ui_cpnt_dropdown_base_pressed_darktheme;
+    case 'white':
+      return theme.ui_cpnt_dropdown_base_pressed_white;
+    default:
+      return theme.ui_cpnt_textfield_base_pressed;
+  }
 });
 var normalActionColor = (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundActiveColor);
 var S_Select = styled_components_1.default.div(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: 2px solid\n    ", ";\n  border-radius: 14px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: space-between;\n  padding-left: ", ";\n  padding-right: ", ";\n\n  ", ";\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
-    var state = _a.state;
-    switch (state) {
-        case 'disabled':
-            return colorThemeBackgroundDisabled;
-        case 'read_only':
-            return colorThemeBackgroundReadOnly;
-        case 'normal':
-            return colorThemeBackgroundNormal;
-    }
+  var state = _a.state;
+  switch (state) {
+    case 'disabled':
+      return colorThemeBackgroundDisabled;
+    case 'read_only':
+      return colorThemeBackgroundReadOnly;
+    case 'normal':
+      return colorThemeBackgroundNormal;
+  }
 }, function (_a) {
-    var theme = _a.theme, isFocused = _a.isFocused, colorTheme = _a.colorTheme;
-    switch (colorTheme) {
-        case 'none':
-            return isFocused ? theme.ui_cpnt_dropdown_border_focus : borderColor;
-        case 'dark':
-            return isFocused ? theme.ui_cpnt_dropdown_border_darktheme_focus : colorThemeBorderDark;
-        case 'white':
-            return isFocused ? theme.ui_cpnt_dropdown_border_white_focus : colorThemeBorderWhite;
-    }
+  var theme = _a.theme,
+    isFocused = _a.isFocused,
+    colorTheme = _a.colorTheme;
+  switch (colorTheme) {
+    case 'none':
+      return isFocused ? theme.ui_cpnt_dropdown_border_focus : borderColor;
+    case 'dark':
+      return isFocused ? theme.ui_cpnt_dropdown_border_darktheme_focus : colorThemeBorderDark;
+    case 'white':
+      return isFocused ? theme.ui_cpnt_dropdown_border_white_focus : colorThemeBorderWhite;
+  }
 }, function (_a) {
-    var size = _a.size, theme = _a.theme;
-    return size === 'large' ? theme.spacing.spacingD : theme.spacing.spacingC;
+  var size = _a.size,
+    theme = _a.theme;
+  return size === 'large' ? theme.spacing.spacingD : theme.spacing.spacingC;
 }, function (_a) {
-    var size = _a.size, theme = _a.theme;
-    return size === 'large' ? theme.spacing.spacingD : theme.spacing.spacingC;
+  var size = _a.size,
+    theme = _a.theme;
+  return size === 'large' ? theme.spacing.spacingD : theme.spacing.spacingC;
 }, function (_a) {
-    var size = _a.size;
-    return size &&
-        {
-            large: large,
-            medium: medium,
-            small: small
-        }[size];
+  var size = _a.size;
+  return size && {
+    large: large,
+    medium: medium,
+    small: small
+  }[size];
 }, function (_a) {
-    var customWidth = _a.customWidth;
-    return customWidth && "width: ".concat(customWidth, ";");
+  var customWidth = _a.customWidth;
+  return customWidth && "width: ".concat(customWidth, ";");
 }, transitionStyle_1.InputTransition, function (_a) {
-    var state = _a.state;
-    return state === 'normal' && normalActionColor;
+  var state = _a.state;
+  return state === 'normal' && normalActionColor;
 });
 var S_ContextMenuWrapper = styled_components_1.default.div(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n  display: block;\n  position: absolute;\n\n  ", ";\n"], ["\n  display: block;\n  position: absolute;\n\n  ", ";\n"])), function (_a) {
-    var contextMenuPositionCss = _a.contextMenuPositionCss;
-    return contextMenuPositionCss;
+  var contextMenuPositionCss = _a.contextMenuPositionCss;
+  return contextMenuPositionCss;
 });
 exports.default = Dropdown;
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;