@ncds/ui-admin 1.8.1 → 1.8.3

package/dist/esm/src/components/forms-and-input/combo-box/ComboBox.js

@@ -0,0 +1,285 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronSelectorVertical, SearchLg } from '@ncds/ui-admin-icon';
+import classNames from 'classnames';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { useDropdown } from '../../../hooks/dropdown';
+import { useMultiSelect } from '../../../utils/dropdown/multiSelect';
+import { Button } from '../../action/button';
+import { Tag } from '../../feedback-and-status/tag';
+import { SelectDropdown } from '../../select-dropdown';
+import { HintText } from '../../shared/hintText/HintText';
+import { InputBase } from '../input-base/InputBase';
+const defaultMaxHeight = 275;
+const toggleMultiSelectValue = (currentValue, optionId) => {
+  const currentValues = Array.isArray(currentValue) ? currentValue : [];
+  if (currentValues.includes(optionId)) {
+    return currentValues.filter(v => v !== optionId);
+  }
+  return [...currentValues, optionId];
+};
+const notifyFormChange = (register, multiple, newValue) => {
+  if (register?.onChange) {
+    register.onChange({
+      target: {
+        value: multiple ? JSON.stringify(newValue) : newValue,
+        name: register.name
+      }
+    });
+  }
+};
+const ComboBox = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    placeholder = '검색하세요',
+    id,
+    className,
+    hintText,
+    children,
+    size = 'xs',
+    destructive = false,
+    value,
+    optionItems = [],
+    onChange,
+    onSearch,
+    disabled = false,
+    register,
+    maxHeight = defaultMaxHeight,
+    searchValue = '',
+    label,
+    required = false,
+    multiple = false,
+    showFooterButtons = false,
+    onEdit,
+    ...props
+  } = _ref;
+  const internalRef = useRef(null);
+  const dropdownRef = useRef(null);
+  const inputRef = useRef(null);
+  const [inputValue, setInputValue] = useState(searchValue);
+  const [showAllItems, setShowAllItems] = useState(false);
+  const [selectedTags, setSelectedTags] = useState([]);
+  const handleOptionSelect = option => {
+    if (disabled) return;
+    if (multiple) {
+      const newValue = toggleMultiSelectValue(value ?? [], option.id);
+      onChange?.(newValue);
+      notifyFormChange(register, multiple, newValue);
+      return;
+    }
+    const newValue = option.id;
+    const tag = {
+      id: option.id,
+      label: option.label
+    };
+    setSelectedTags([tag]);
+    onChange?.(newValue);
+    notifyFormChange(register, multiple, newValue);
+  };
+  const handleInputChange = e => {
+    const newValue = e.target.value;
+    setInputValue(newValue);
+    onSearch?.(newValue);
+    setShowAllItems(false);
+    if (!isOpen && !disabled) {
+      toggleDropdown();
+    }
+  };
+  const handleInputClick = () => {
+    if (!disabled) {
+      inputRef.current?.focus();
+    }
+    if (inputValue) {
+      toggleDropdown();
+    }
+  };
+  // useDropdown 훅 사용
+  const {
+    isOpen,
+    direction: dropdownDirection,
+    focusedIndex,
+    toggleDropdown,
+    closeDropdown: dropdownClose,
+    handleKeyDown: dropdownHandleKeyDown,
+    handleOptionSelect: handleDropdownSelect,
+    handleMouseMove,
+    isKeyboardNavigation
+  } = useDropdown({
+    triggerRef: internalRef,
+    dropdownRef,
+    maxHeight,
+    itemCount: optionItems.length,
+    optionItems: optionItems,
+    disabled,
+    multiple,
+    onSelect: handleOptionSelect
+  });
+  const showAllItem = () => {
+    if (disabled) return;
+    inputRef.current?.focus();
+    setInputValue('');
+    onSearch?.('');
+    setShowAllItems(true);
+    if (!isOpen) {
+      toggleDropdown();
+    }
+  };
+  const closeDropdown = () => {
+    setShowAllItems(false);
+    dropdownClose();
+  };
+  // 키보드 이벤트 처리는 useDropdown 훅에서 처리됨
+  const handleKeyDown = e => {
+    // input 전용 키보드 이벤트 처리
+    if (e.key === 'Escape' && isOpen) {
+      closeDropdown();
+      e.preventDefault();
+      return;
+    }
+    // 나머지는 useDropdown 훅에서 처리
+    dropdownHandleKeyDown(e);
+  };
+  useImperativeHandle(ref, () => internalRef.current, []);
+  const trailingElement = {
+    type: 'custom',
+    placement: 'inside',
+    children: _jsx("div", {
+      className: "ncua-input__icon-wrap ncua-input__right-icon",
+      onClick: showAllItem,
+      children: _jsx(Button, {
+        label: "\uC804\uCCB4",
+        hierarchy: "text",
+        size: "xxs",
+        leadingIcon: {
+          type: 'icon',
+          icon: ChevronSelectorVertical
+        }
+      })
+    })
+  };
+  const leadingElement = {
+    type: 'icon',
+    icon: SearchLg,
+    size: 14,
+    color: 'gray300'
+  };
+  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) return;
+    const tags = getSelectedTagsData();
+    setSelectedTags(tags);
+    setInputValue('');
+    closeDropdown();
+  };
+  const handleRemoveTag = tagId => {
+    if (!onChange) return;
+    if (multiple) {
+      const newSelectedValues = removeTag(tagId);
+      onChange(newSelectedValues);
+      setSelectedTags(prev => prev.filter(tag => tag.id !== tagId));
+      return;
+    }
+    onChange('');
+    setSelectedTags([]);
+  };
+  const comboboxId = `combobox-options-${id || 'default'}`;
+  const hasVisibleOptions = showAllItems || inputValue;
+  const displayedOptions = hasVisibleOptions ? optionItems : [];
+  const showNoResults = !hasVisibleOptions || optionItems.length === 0;
+  const showFooter = multiple || showFooterButtons;
+  const hiddenInputValue = multiple ? JSON.stringify(value || []) : String(value || '');
+  const hasTags = selectedTags.length > 0;
+  return _jsxs(_Fragment, {
+    children: [_jsxs("div", {
+      ref: internalRef,
+      className: classNames('ncua-combobox', `ncua-combobox--${size}`, {
+        'ncua-combobox--open': isOpen,
+        'ncua-combobox--disabled': disabled,
+        destructive: destructive
+      }, className),
+      ...props,
+      children: [_jsxs("div", {
+        className: "ncua-combobox__content",
+        children: [_jsx(InputBase, {
+          ref: inputRef,
+          size: size,
+          label: label,
+          required: required,
+          placeholder: placeholder,
+          value: inputValue,
+          onChange: handleInputChange,
+          onKeyDown: handleKeyDown,
+          onClick: handleInputClick,
+          disabled: disabled,
+          destructive: destructive,
+          leadingElement: leadingElement,
+          trailingElement: trailingElement,
+          role: "combobox",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-controls": comboboxId,
+          "aria-disabled": disabled,
+          autoComplete: "off",
+          clearText: !!inputValue,
+          onClearText: () => {
+            setInputValue('');
+            onSearch?.('');
+          }
+        }), _jsxs(SelectDropdown, {
+          ref: dropdownRef,
+          isOpen: isOpen,
+          direction: dropdownDirection,
+          size: size,
+          options: displayedOptions,
+          value: value,
+          focusedIndex: focusedIndex,
+          maxHeight: maxHeight,
+          listboxId: comboboxId,
+          onOptionSelect: handleDropdownSelect,
+          onMouseMove: handleMouseMove,
+          isKeyboardNavigation: isKeyboardNavigation,
+          multiple: multiple,
+          showFooterButtons: showFooter,
+          selectAllButtonText: selectAllButtonText,
+          onSelectAll: handleSelectAll,
+          onEdit: handleEdit,
+          onComplete: handleComplete,
+          componentType: "combobox",
+          children: [showNoResults ? _jsx("li", {
+            className: "ncua-select-dropdown__no-results",
+            children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+          }) : null, children]
+        })]
+      }), register && _jsx("input", {
+        type: "hidden",
+        ...register,
+        value: hiddenInputValue
+      }), hintText && _jsx(HintText, {
+        destructive: destructive,
+        children: hintText
+      })]
+    }), hasTags && _jsx("div", {
+      className: "ncua-combobox__tags",
+      children: selectedTags.map(tag => _jsx(Tag, {
+        text: tag.label,
+        size: "sm",
+        close: true,
+        onButtonClick: () => handleRemoveTag(tag.id)
+      }, tag.id))
+    })]
+  });
+});
+ComboBox.displayName = 'ComboBox';
+export { defaultMaxHeight, ComboBox };