@ncds/ui-admin 1.6.4 → 1.8.0

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

@@ -0,0 +1,284 @@
+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 '../button';
+import { InputBase } from '../input-base/InputBase';
+import { SelectDropdown } from '../select-dropdown';
+import { HintText } from '../shared/hintText/HintText';
+import { Tag } from '../tag';
+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',
+    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 };

package/dist/esm/src/components/data-grid/DataGrid.js

@@ -0,0 +1,175 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { Children, forwardRef, isValidElement } from 'react';
+import { Table as NcuaTable } from '../table';
+// ──────────────────────────────────────────────
+// Sub-components
+// ──────────────────────────────────────────────
+const SearchFilter = _ref => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return _jsx("div", {
+    className: classNames('ncua-data-grid__search-filter', className),
+    ...rest,
+    children: children
+  });
+};
+SearchFilter.displayName = 'DataGrid.SearchFilter';
+const Summary = _ref2 => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref2;
+  return _jsx("div", {
+    className: classNames('ncua-data-grid__summary', className),
+    ...rest,
+    children: children
+  });
+};
+Summary.displayName = 'DataGrid.Summary';
+const FilterBar = _ref3 => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref3;
+  return _jsx("div", {
+    className: classNames('ncua-data-grid__filter-bar', className),
+    ...rest,
+    children: children
+  });
+};
+FilterBar.displayName = 'DataGrid.FilterBar';
+const ActionBar = _ref4 => {
+  let {
+    children,
+    className,
+    position = 'top',
+    align = 'space-between',
+    ...rest
+  } = _ref4;
+  return _jsx("div", {
+    className: classNames('ncua-data-grid__action-bar', className, {
+      'ncua-data-grid__action-bar--top': position === 'top',
+      'ncua-data-grid__action-bar--bottom': position === 'bottom',
+      'ncua-data-grid__action-bar--left': align === 'left',
+      'ncua-data-grid__action-bar--right': align === 'right',
+      'ncua-data-grid__action-bar--space-between': align === 'space-between'
+    }),
+    ...rest,
+    children: children
+  });
+};
+ActionBar.displayName = 'DataGrid.ActionBar';
+const DataGridTable = /*#__PURE__*/forwardRef((_ref5, ref) => {
+  let {
+    children,
+    className,
+    type = 'horizontal',
+    fixedHeader,
+    maxHeight,
+    hoverable,
+    selectable
+  } = _ref5;
+  return _jsx("div", {
+    ref: ref,
+    className: classNames('ncua-data-grid__table', className),
+    children: _jsx(NcuaTable, {
+      className: "ncua-table--in-data-grid",
+      type: type,
+      fixedHeader: fixedHeader,
+      maxHeight: maxHeight,
+      hoverable: hoverable,
+      selectable: selectable,
+      children: children
+    })
+  });
+});
+DataGridTable.displayName = 'DataGrid.Table';
+const Pagination = _ref6 => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref6;
+  return _jsx("div", {
+    className: classNames('ncua-data-grid__pagination', className),
+    ...rest,
+    children: children
+  });
+};
+Pagination.displayName = 'DataGrid.Pagination';
+const CHILD_TYPE_MAP = new Map([[SearchFilter, 'searchFilter'], [Summary, 'summary'], [FilterBar, 'filterBar'], [DataGridTable, 'dataTable'], [Pagination, 'pagination']]);
+const categorizeChild = (child, result) => {
+  if (! /*#__PURE__*/isValidElement(child)) {
+    return;
+  }
+  // ActionBar requires position-based categorization
+  if (child.type === ActionBar) {
+    const position = child.props.position ?? 'top';
+    const key = position === 'bottom' ? 'bottomActionBar' : 'topActionBar';
+    result[key].push(child);
+    return;
+  }
+  const category = CHILD_TYPE_MAP.get(child.type);
+  if (category) {
+    result[category].push(child);
+  }
+};
+const sortChildren = children => {
+  const result = {
+    searchFilter: [],
+    summary: [],
+    filterBar: [],
+    topActionBar: [],
+    dataTable: [],
+    bottomActionBar: [],
+    pagination: []
+  };
+  Children.forEach(children, child => {
+    categorizeChild(child, result);
+  });
+  return result;
+};
+const hasTableWrapperContent = sorted => sorted.filterBar.length > 0 || sorted.topActionBar.length > 0 || sorted.dataTable.length > 0 || sorted.bottomActionBar.length > 0;
+const isTableSelectable = dataTable => dataTable.some(child => /*#__PURE__*/isValidElement(child) && child.props.selectable === true);
+// ──────────────────────────────────────────────
+// Main DataGrid component
+// ──────────────────────────────────────────────
+const DataGridComponent = /*#__PURE__*/forwardRef((_ref7, ref) => {
+  let {
+    variant = 'search-result',
+    children,
+    className,
+    ...rest
+  } = _ref7;
+  const sorted = sortChildren(children);
+  const needsEmptyBottomBar = sorted.bottomActionBar.length === 0 && isTableSelectable(sorted.dataTable);
+  return _jsxs("div", {
+    ref: ref,
+    className: classNames('ncua-data-grid', className, `ncua-data-grid--${variant}`),
+    ...rest,
+    children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted) && _jsxs("div", {
+      className: "ncua-data-grid__table-wrapper",
+      children: [sorted.filterBar, sorted.topActionBar, sorted.dataTable, sorted.bottomActionBar, needsEmptyBottomBar && _jsx("div", {
+        className: "ncua-data-grid__action-bar ncua-data-grid__action-bar--bottom"
+      })]
+    }), sorted.pagination]
+  });
+});
+DataGridComponent.displayName = 'DataGrid';
+// ──────────────────────────────────────────────
+// Compound export
+// ──────────────────────────────────────────────
+export const DataGrid = Object.assign(DataGridComponent, {
+  SearchFilter,
+  Summary,
+  FilterBar,
+  ActionBar,
+  Table: DataGridTable,
+  Pagination
+});

package/dist/esm/src/components/data-grid/DataGrid.types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/src/components/data-grid/index.js

@@ -0,0 +1,2 @@
+export * from './DataGrid';
+export * from './DataGrid.types';

package/dist/esm/src/components/date-picker/CustomInput.js

@@ -1,39 +1,25 @@
-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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Calendar, Clock } from '@ncds/ui-admin-icon';
 import { forwardRef } from 'react';
-export var CustomInput = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var disabled = _a.disabled,
-    iconSize = _a.iconSize,
-    iconName = _a.iconName,
-    props = __rest(_a, ["disabled", "iconSize", "iconName"]);
-  var svgSize = iconSize === 'xs' ? 14 : 16;
+const SVG_SIZE_XS = 14;
+const SVG_SIZE_SM = 16;
+const CustomInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    iconSize,
+    iconName,
+    ...props
+  } = _ref;
+  const svgSize = iconSize === 'xs' ? SVG_SIZE_XS : SVG_SIZE_SM;
   return _jsxs(_Fragment, {
-    children: [_jsx("input", __assign({
+    children: [_jsx("input", {
       ref: ref,
       disabled: disabled,
-      autoComplete: props.autoComplete || 'off'
-    }, props)), _jsx("label", __assign({
+      autoComplete: props.autoComplete || 'off',
+      ...props
+    }), _jsx("label", {
       className: "ncua-date-picker__ico",
-      htmlFor: props.id
-    }, {
+      htmlFor: props.id,
       children: iconName === 'calendar' ? _jsx(Calendar, {
         width: svgSize,
         height: svgSize
@@ -41,7 +27,8 @@ export var CustomInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         width: svgSize,
         height: svgSize
       })
-    }))]
+    })]
   });
 });
-CustomInput.displayName = 'CustomInput';
+CustomInput.displayName = 'CustomInput';
+export { CustomInput };