@ncds/ui-admin 1.7.0 → 1.8.0

package/dist/esm/src/components/range-date-picker-with-buttons/RangeDatePickerWithButtons.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { PERIOD_ITEM } from '../../constant/date-picker';
+import { getDateFormat, getSubtractDate } from '../../utils/date-picker';
+import { ButtonGroup } from '../button-group';
+import { RangeDatePicker } from '../range-date-picker/RangeDatePicker';
+const RangeDatePickerWithButtons = _ref => {
+  let {
+    useYesterdayAsEndDate = false,
+    size = 'xs',
+    currentButtonId,
+    setCurrentButtonId,
+    startDateOptions,
+    endDateOptions,
+    validationOption,
+    periodKeys,
+    periodItems,
+    onDateValidation
+  } = _ref;
+  const items = periodItems ?? PERIOD_ITEM;
+  const setCalculatedDate = () => {
+    const currentPeriodItem = items[currentButtonId];
+    if (!currentPeriodItem) {
+      return;
+    }
+    if (currentButtonId === 'ENTIRE') {
+      startDateOptions.onChangeDate('');
+      endDateOptions.onChangeDate('');
+      return;
+    }
+    const startDate = getDateFormat(getSubtractDate({
+      period: currentPeriodItem.period,
+      unit: currentPeriodItem.unit
+    }));
+    startDateOptions.onChangeDate(startDate);
+    const endDate = useYesterdayAsEndDate ? getDateFormat(getSubtractDate({
+      period: 1,
+      unit: 'days'
+    })) : getDateFormat();
+    endDateOptions.onChangeDate(endDate);
+  };
+  const handleOnChangeDate = (date, type) => {
+    type === 'START' ? startDateOptions.onChangeDate(date) : endDateOptions.onChangeDate(date);
+    currentButtonId && setCurrentButtonId('NONE');
+  };
+  useEffect(() => {
+    if (currentButtonId !== 'NONE') {
+      setCalculatedDate();
+    }
+  }, [currentButtonId]);
+  return _jsxs("div", {
+    className: "ncua-range-date-picker-with-buttons",
+    children: [_jsx(ButtonGroup, {
+      size: size,
+      children: periodKeys.map(key => _jsx(ButtonGroup.Item, {
+        isCurrent: currentButtonId === key,
+        label: items[key].text,
+        onClick: () => setCurrentButtonId(key)
+      }, key))
+    }), _jsx(RangeDatePicker, {
+      startDateOptions: {
+        ...startDateOptions,
+        onChangeDate: date => handleOnChangeDate(date, 'START')
+      },
+      endDateOptions: {
+        ...endDateOptions,
+        onChangeDate: date => handleOnChangeDate(date, 'END')
+      },
+      validationOption: validationOption,
+      onDateValidation: onDateValidation,
+      size: size
+    })]
+  });
+};
+export { RangeDatePickerWithButtons };

package/dist/esm/src/components/range-date-picker-with-buttons/index.js

@@ -0,0 +1 @@
+export * from './RangeDatePickerWithButtons';

package/dist/esm/src/components/select/Select.js

@@ -1,80 +1,53 @@
-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 __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { HintText } from '../shared/hintText/HintText';
-export var Select = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var placeholder = _a.placeholder,
-    _b = _a.disabledPlaceholder,
-    disabledPlaceholder = _b === void 0 ? false : _b,
-    id = _a.id,
-    className = _a.className,
-    hintText = _a.hintText,
-    children = _a.children,
-    _c = _a.size,
-    size = _c === void 0 ? 'md' : _c,
-    _d = _a.type,
-    type = _d === void 0 ? 'default' : _d,
-    _e = _a.destructive,
-    destructive = _e === void 0 ? false : _e,
-    value = _a.value,
-    optionItems = _a.optionItems,
-    register = _a.register,
-    _f = _a.disabled,
-    disabled = _f === void 0 ? false : _f,
-    props = __rest(_a, ["placeholder", "disabledPlaceholder", "id", "className", "hintText", "children", "size", "type", "destructive", "value", "optionItems", "register", "disabled"]);
-  return _jsxs("span", __assign({
+export const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    placeholder,
+    disabledPlaceholder = false,
+    id,
+    className,
+    hintText,
+    children,
+    size = 'xs',
+    type = 'default',
+    destructive = false,
+    value,
+    optionItems,
+    register,
+    disabled = false,
+    ...props
+  } = _ref;
+  return _jsxs("span", {
     className: classNames('ncua-select', {
       destructive: destructive,
       'ncua-select--simple': type === 'simple'
-    }, className, "ncua-select--".concat(size))
-  }, {
-    children: [_jsx("span", __assign({
-      className: "ncua-select__content"
-    }, {
-      children: _jsxs("select", __assign({
+    }, className, `ncua-select--${size}`),
+    children: [_jsx("span", {
+      className: "ncua-select__content",
+      children: _jsxs("select", {
         value: value,
         ref: ref,
         id: id,
         className: classNames('ncua-select__tag', className),
-        disabled: disabled
-      }, register, props, {
-        children: [placeholder && _jsx("option", __assign({
+        disabled: disabled,
+        ...register,
+        ...props,
+        children: [placeholder && _jsx("option", {
           value: "",
           selected: true,
-          disabled: disabledPlaceholder
-        }, {
+          disabled: disabledPlaceholder,
           children: placeholder
-        })), optionItems === null || optionItems === void 0 ? void 0 : optionItems.map(function (item) {
-          return _jsx("option", __assign({
-            value: item.id
-          }, {
-            children: item.label
-          }), item.id);
-        }), children]
-      }))
-    })), hintText && _jsx(HintText, __assign({
+        }), optionItems?.map(item => _jsx("option", {
+          value: item.id,
+          children: item.label
+        }, item.id)), children]
+      })
+    }), hintText && _jsx(HintText, {
       destructive: destructive,
-      className: "ncua-hint-text"
-    }, {
+      className: "ncua-hint-text",
       children: hintText
-    }))]
-  }));
+    })]
+  });
 });

package/dist/esm/src/components/select-box/SelectBox.js

@@ -0,0 +1,254 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronDown } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { COLOR } from '../../../constant/color';
+import { useDropdown, useScrollLock } from '../../hooks/dropdown';
+import { useMultiSelect } from '../../utils/dropdown/multiSelect';
+import { SelectDropdown } from '../select-dropdown';
+import { HintText } from '../shared/hintText/HintText';
+import { Tag } from '../tag';
+const ICON_SIZE_XS = 14;
+const ICON_SIZE_SM = 16;
+const DEFAULT_MAX_HEIGHT = 275;
+function computeNewValue(option, value, multiple) {
+  if (multiple) {
+    const currentValues = Array.isArray(value) ? value : [];
+    if (currentValues.includes(option.id)) {
+      return currentValues.filter(v => v !== option.id);
+    }
+    return [...currentValues, option.id];
+  }
+  return option.id;
+}
+function notifyRegister(register, newValue, multiple) {
+  if (!register?.onChange) return;
+  register.onChange({
+    target: {
+      value: multiple ? JSON.stringify(newValue) : newValue,
+      name: register.name
+    }
+  });
+}
+function DisplayValue(_ref) {
+  let {
+    displayValue
+  } = _ref;
+  if (typeof displayValue === 'string') {
+    return _jsx("span", {
+      className: "ncua-selectbox__value-text",
+      children: displayValue
+    });
+  }
+  return _jsxs("div", {
+    className: "ncua-selectbox__value-container",
+    children: [displayValue.icon && _jsx("span", {
+      className: "ncua-selectbox__value-icon",
+      children: _jsx(displayValue.icon, {
+        width: 16,
+        height: 16
+      })
+    }), _jsx("span", {
+      className: "ncua-selectbox__value-text",
+      children: displayValue.label
+    })]
+  });
+}
+const SelectBox = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    placeholder = '선택하세요',
+    disabledPlaceholder = false,
+    hintText,
+    size = 'xs',
+    type = 'default',
+    autoWidth = true,
+    destructive = false,
+    value,
+    optionItems = [],
+    disabled = false,
+    maxHeight = DEFAULT_MAX_HEIGHT,
+    multiple = false,
+    align = 'left',
+    id,
+    className,
+    children,
+    register,
+    onChange,
+    onEdit,
+    ...props
+  } = _ref2;
+  const internalRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const [selectedTags, setSelectedTags] = useState([]);
+  const selectedOption = useMemo(() => {
+    if (multiple) return null;
+    return optionItems.find(option => option.id === value);
+  }, [optionItems, value, multiple]);
+  const displayValue = useMemo(() => {
+    if (multiple) {
+      return placeholder;
+    }
+    return selectedOption ? selectedOption : placeholder;
+  }, [multiple, selectedOption, placeholder]);
+  const handleOptionSelect = option => {
+    if (disabled) return;
+    const newValue = computeNewValue(option, value, multiple);
+    onChange?.(newValue);
+    notifyRegister(register, newValue, multiple);
+  };
+  const {
+    isOpen,
+    direction: dropdownDirection,
+    focusedIndex,
+    toggleDropdown,
+    closeDropdown,
+    handleKeyDown,
+    handleOptionSelect: handleDropdownSelect,
+    handleMouseMove,
+    isKeyboardNavigation,
+    setFocusedIndex
+  } = useDropdown({
+    triggerRef: internalRef,
+    dropdownRef,
+    maxHeight,
+    itemCount: optionItems.length,
+    optionItems,
+    disabled,
+    multiple,
+    onSelect: handleOptionSelect
+  });
+  const activeDescendantId = useMemo(() => {
+    if (!isOpen || focusedIndex < 0 || focusedIndex >= optionItems.length) {
+      return undefined;
+    }
+    const focusedOption = optionItems[focusedIndex];
+    return `selectbox-options-${id || 'default'}-${focusedOption.id}`;
+  }, [isOpen, focusedIndex, optionItems, id]);
+  const handleOptionHover = useCallback(index => {
+    handleMouseMove();
+    setFocusedIndex(index);
+  }, [handleMouseMove, setFocusedIndex]);
+  // Multiple select 관련 로직
+  const currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+  const {
+    buttonText: selectAllButtonText,
+    toggleSelectAll,
+    getSelectedTagsData,
+    removeTag
+  } = useMultiSelect(currentSelectedValues, optionItems);
+  const handleSelectAll = () => {
+    if (!multiple || !onChange) return;
+    const newSelectedValues = toggleSelectAll();
+    onChange(newSelectedValues);
+  };
+  const handleEdit = () => {
+    onEdit?.();
+  };
+  const handleComplete = () => {
+    if (multiple) {
+      const tags = getSelectedTagsData();
+      setSelectedTags(tags);
+    }
+    closeDropdown();
+  };
+  const handleRemoveTag = tagId => {
+    if (!onChange) return;
+    if (multiple) {
+      const newSelectedValues = removeTag(tagId);
+      onChange(newSelectedValues);
+      setSelectedTags(prev => prev.filter(tag => tag.id !== tagId));
+    }
+  };
+  useScrollLock(isOpen, dropdownRef);
+  useLayoutEffect(() => {
+    if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
+      const dropdownWidth = dropdownRef.current.offsetWidth;
+      internalRef.current.style.width = `${dropdownWidth}px`;
+    }
+  }, [autoWidth, isOpen, optionItems]);
+  useImperativeHandle(ref, () => internalRef.current, []);
+  return _jsxs(_Fragment, {
+    children: [_jsxs("div", {
+      ref: internalRef,
+      className: classNames('ncua-selectbox', `ncua-selectbox--${size}`, {
+        'ncua-selectbox--open': isOpen,
+        'ncua-selectbox--disabled': disabled,
+        'ncua-selectbox--simple': type === 'simple',
+        'ncua-selectbox--multiple': multiple,
+        destructive: destructive
+      }, className),
+      ...props,
+      children: [_jsxs("div", {
+        className: classNames('ncua-selectbox__content'),
+        onClick: toggleDropdown,
+        onKeyDown: handleKeyDown,
+        tabIndex: disabled ? -1 : 0,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": `selectbox-options-${id || 'default'}`,
+        "aria-disabled": disabled,
+        "aria-label": selectedOption ? selectedOption.label : placeholder,
+        "aria-activedescendant": activeDescendantId,
+        children: [_jsxs("div", {
+          className: "ncua-selectbox__content-inner",
+          children: [_jsx("div", {
+            className: "ncua-selectbox__value",
+            children: _jsx(DisplayValue, {
+              displayValue: displayValue
+            })
+          }), _jsx(ChevronDown, {
+            width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM,
+            height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM,
+            color: disabled ? COLOR.gray300 : COLOR.gray500,
+            className: classNames('ncua-selectbox__arrow', {
+              'ncua-selectbox__arrow--up': isOpen
+            })
+          })]
+        }), _jsx(SelectDropdown, {
+          ref: dropdownRef,
+          isOpen: isOpen,
+          direction: dropdownDirection,
+          size: size,
+          options: optionItems,
+          value: value,
+          focusedIndex: focusedIndex,
+          maxHeight: maxHeight,
+          listboxId: `selectbox-options-${id || 'default'}`,
+          multiple: multiple,
+          showFooterButtons: multiple,
+          selectAllButtonText: selectAllButtonText,
+          componentType: "selectbox",
+          isKeyboardNavigation: isKeyboardNavigation,
+          activeDescendantId: activeDescendantId,
+          align: align,
+          onOptionSelect: handleDropdownSelect,
+          onMouseMove: handleMouseMove,
+          onOptionHover: handleOptionHover,
+          onSelectAll: handleSelectAll,
+          onEdit: handleEdit,
+          onComplete: handleComplete,
+          children: children
+        })]
+      }), hintText && _jsx(HintText, {
+        destructive: destructive,
+        className: "ncua-hint-text",
+        children: hintText
+      }), register && _jsx("input", {
+        type: "hidden",
+        ...register,
+        value: multiple ? JSON.stringify(value || []) : String(value || '')
+      })]
+    }), selectedTags.length > 0 && _jsx("div", {
+      className: "ncua-selectbox__tags",
+      children: selectedTags.map(tag => _jsx(Tag, {
+        text: tag.label,
+        size: "sm",
+        close: true,
+        onButtonClick: () => handleRemoveTag(tag.id)
+      }, tag.id))
+    })]
+  });
+});
+SelectBox.displayName = 'SelectBox';
+export { DEFAULT_MAX_HEIGHT, SelectBox };

package/dist/esm/src/components/select-dropdown/SelectDropdown.js

@@ -1,125 +1,90 @@
-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 __rest = this && this.__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { Button } from '../button';
-var SelectDropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var isOpen = _a.isOpen,
-    _b = _a.direction,
-    direction = _b === void 0 ? 'down' : _b,
-    _c = _a.size,
-    size = _c === void 0 ? 'xs' : _c,
-    options = _a.options,
-    value = _a.value,
-    focusedIndex = _a.focusedIndex,
-    maxHeight = _a.maxHeight,
-    _d = _a.listboxId,
-    listboxId = _d === void 0 ? 'selectbox-options-default' : _d,
-    onOptionSelect = _a.onOptionSelect,
-    onMouseMove = _a.onMouseMove,
-    isKeyboardNavigation = _a.isKeyboardNavigation,
-    onOptionHover = _a.onOptionHover,
-    children = _a.children,
-    _e = _a.multiple,
-    multiple = _e === void 0 ? false : _e,
-    _f = _a.showFooterButtons,
-    showFooterButtons = _f === void 0 ? false : _f,
-    _g = _a.selectAllButtonText,
-    selectAllButtonText = _g === void 0 ? '전체 선택' : _g,
-    onSelectAll = _a.onSelectAll,
-    onEdit = _a.onEdit,
-    onComplete = _a.onComplete,
-    className = _a.className,
-    activeDescendantId = _a.activeDescendantId,
-    componentType = _a.componentType,
-    _h = _a.align,
-    align = _h === void 0 ? 'left' : _h,
-    props = __rest(_a, ["isOpen", "direction", "size", "options", "value", "focusedIndex", "maxHeight", "listboxId", "onOptionSelect", "onMouseMove", "isKeyboardNavigation", "onOptionHover", "children", "multiple", "showFooterButtons", "selectAllButtonText", "onSelectAll", "onEdit", "onComplete", "className", "activeDescendantId", "componentType", "align"]);
+const SelectDropdown = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    isOpen,
+    direction = 'down',
+    size = 'xs',
+    options,
+    value,
+    focusedIndex,
+    maxHeight,
+    listboxId = 'selectbox-options-default',
+    onOptionSelect,
+    onMouseMove,
+    isKeyboardNavigation,
+    onOptionHover,
+    children,
+    multiple = false,
+    showFooterButtons = false,
+    selectAllButtonText = '전체 선택',
+    onSelectAll,
+    onEdit,
+    onComplete,
+    className,
+    activeDescendantId,
+    componentType,
+    align = 'left',
+    ...props
+  } = _ref;
   if (!isOpen) return null;
-  return _jsxs("div", __assign({
+  return _jsxs("div", {
     ref: ref,
-    className: classNames('ncua-select-dropdown', "ncua-select-dropdown--".concat(direction), "ncua-select-dropdown--".concat(size), {
+    className: classNames('ncua-select-dropdown', `ncua-select-dropdown--${direction}`, `ncua-select-dropdown--${size}`, {
       'ncua-select-dropdown--multiple': multiple,
       'ncua-select-dropdown--align-right': align === 'right',
       'ncua-select-dropdown--selectbox-single': componentType === 'selectbox' && !multiple
     }, className),
     onMouseMove: onMouseMove,
-    onClick: function (e) {
-      return e.stopPropagation();
-    }
-  }, props, {
-    children: [_jsx("div", __assign({
-      className: "ncua-select-dropdown__content"
-    }, {
-      children: _jsxs("ul", __assign({
+    onClick: e => e.stopPropagation(),
+    ...props,
+    children: [_jsx("div", {
+      className: "ncua-select-dropdown__content",
+      children: _jsxs("ul", {
         className: "ncua-select-dropdown__options",
         role: "listbox",
         id: listboxId,
         style: {
-          maxHeight: maxHeight
-        }
-      }, {
-        children: [options.map(function (option, index) {
-          var isFocused = index === focusedIndex;
-          var optionId = "".concat(listboxId, "-").concat(option.id);
-          var isSelected = multiple && Array.isArray(value) ? value.includes(option.id) : option.id === value;
-          var handleMouseEnter = function () {
-            onOptionHover === null || onOptionHover === void 0 ? void 0 : onOptionHover(index);
+          maxHeight
+        },
+        children: [options.map((option, index) => {
+          const isFocused = index === focusedIndex;
+          const optionId = `${listboxId}-${option.id}`;
+          const isSelected = multiple && Array.isArray(value) ? value.includes(option.id) : option.id === value;
+          const handleMouseEnter = () => {
+            onOptionHover?.(index);
           };
-          return _jsxs("li", __assign({
+          return _jsxs("li", {
             id: optionId,
             className: classNames('ncua-select-dropdown__option', {
               'ncua-select-dropdown__option--selected': isSelected,
               'ncua-select-dropdown__option--focused': isFocused
             }),
-            onClick: function () {
-              return onOptionSelect(option);
-            },
+            onClick: () => onOptionSelect(option),
             onMouseEnter: handleMouseEnter,
             role: "option",
-            "aria-selected": isSelected
-          }, {
-            children: [option.icon && _jsx("span", __assign({
-              className: "ncua-select-dropdown__option-icon"
-            }, {
+            "aria-selected": isSelected,
+            children: [option.icon && _jsx("span", {
+              className: "ncua-select-dropdown__option-icon",
               children: _jsx(option.icon, {
                 width: 16,
                 height: 16
               })
-            })), _jsx("span", __assign({
-              className: "ncua-select-dropdown__option-text"
-            }, {
+            }), _jsx("span", {
+              className: "ncua-select-dropdown__option-text",
               children: option.label
-            }))]
-          }), option.id);
+            })]
+          }, option.id);
         }), children]
-      }))
-    })), showFooterButtons && _jsx("div", __assign({
-      className: "ncua-select-dropdown__footer"
-    }, {
-      children: _jsxs("div", __assign({
-        className: "ncua-select-dropdown__footer-buttons"
-      }, {
-        children: [_jsx("div", __assign({
-          className: "ncua-select-dropdown__footer-left"
-        }, {
+      })
+    }), showFooterButtons && _jsx("div", {
+      className: "ncua-select-dropdown__footer",
+      children: _jsxs("div", {
+        className: "ncua-select-dropdown__footer-buttons",
+        children: [_jsx("div", {
+          className: "ncua-select-dropdown__footer-left",
           children: multiple && _jsx(Button, {
             label: selectAllButtonText,
             hierarchy: "text",
@@ -127,9 +92,8 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
             onClick: onSelectAll,
             underline: true
           })
-        })), _jsxs("div", __assign({
-          className: "ncua-select-dropdown__footer-right"
-        }, {
+        }), _jsxs("div", {
+          className: "ncua-select-dropdown__footer-right",
           children: [_jsx(Button, {
             label: "\uD3B8\uC9D1",
             hierarchy: "secondary-gray",
@@ -141,10 +105,10 @@ var SelectDropdown = /*#__PURE__*/forwardRef(function (_a, ref) {
             size: "xs",
             onClick: onComplete
           })]
-        }))]
-      }))
-    }))]
-  }));
+        })]
+      })
+    })]
+  });
 });
 SelectDropdown.displayName = 'SelectDropdown';
 export { SelectDropdown };