@ncds/ui-admin 1.7.0 → 1.8.1

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

@@ -0,0 +1,291 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultMaxHeight = exports.ComboBox = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _uiAdminIcon = require("@ncds/ui-admin-icon");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _dropdown = require("../../hooks/dropdown");
+var _multiSelect = require("../../utils/dropdown/multiSelect");
+var _button = require("../button");
+var _InputBase = require("../input-base/InputBase");
+var _selectDropdown = require("../select-dropdown");
+var _HintText = require("../shared/hintText/HintText");
+var _tag = require("../tag");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const defaultMaxHeight = exports.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 = exports.ComboBox = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)(null);
+  const dropdownRef = (0, _react.useRef)(null);
+  const inputRef = (0, _react.useRef)(null);
+  const [inputValue, setInputValue] = (0, _react.useState)(searchValue);
+  const [showAllItems, setShowAllItems] = (0, _react.useState)(false);
+  const [selectedTags, setSelectedTags] = (0, _react.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
+  } = (0, _dropdown.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);
+  };
+  (0, _react.useImperativeHandle)(ref, () => internalRef.current, []);
+  const trailingElement = {
+    type: 'custom',
+    placement: 'inside',
+    children: (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-input__icon-wrap ncua-input__right-icon",
+      onClick: showAllItem,
+      children: (0, _jsxRuntime.jsx)(_button.Button, {
+        label: "\uC804\uCCB4",
+        hierarchy: "text",
+        size: "xxs",
+        leadingIcon: {
+          type: 'icon',
+          icon: _uiAdminIcon.ChevronSelectorVertical
+        }
+      })
+    })
+  };
+  const leadingElement = {
+    type: 'icon',
+    icon: _uiAdminIcon.SearchLg,
+    size: 14,
+    color: 'gray300'
+  };
+  const currentSelectedValues = multiple && Array.isArray(value) ? value : [];
+  const {
+    buttonText: selectAllButtonText,
+    toggleSelectAll,
+    getSelectedTagsData,
+    removeTag
+  } = (0, _multiSelect.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 (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [(0, _jsxRuntime.jsxs)("div", {
+      ref: internalRef,
+      className: (0, _classnames.default)('ncua-combobox', `ncua-combobox--${size}`, {
+        'ncua-combobox--open': isOpen,
+        'ncua-combobox--disabled': disabled,
+        destructive: destructive
+      }, className),
+      ...props,
+      children: [(0, _jsxRuntime.jsxs)("div", {
+        className: "ncua-combobox__content",
+        children: [(0, _jsxRuntime.jsx)(_InputBase.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?.('');
+          }
+        }), (0, _jsxRuntime.jsxs)(_selectDropdown.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 ? (0, _jsxRuntime.jsx)("li", {
+            className: "ncua-select-dropdown__no-results",
+            children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
+          }) : null, children]
+        })]
+      }), register && (0, _jsxRuntime.jsx)("input", {
+        type: "hidden",
+        ...register,
+        value: hiddenInputValue
+      }), hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
+        destructive: destructive,
+        children: hintText
+      })]
+    }), hasTags && (0, _jsxRuntime.jsx)("div", {
+      className: "ncua-combobox__tags",
+      children: selectedTags.map(tag => (0, _jsxRuntime.jsx)(_tag.Tag, {
+        text: tag.label,
+        size: "sm",
+        close: true,
+        onButtonClick: () => handleRemoveTag(tag.id)
+      }, tag.id))
+    })]
+  });
+});
+ComboBox.displayName = 'ComboBox';

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

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DataGrid = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+var _table = require("../table");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// ──────────────────────────────────────────────
+// Sub-components
+// ──────────────────────────────────────────────
+const SearchFilter = _ref => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-data-grid__search-filter', className),
+    ...rest,
+    children: children
+  });
+};
+SearchFilter.displayName = 'DataGrid.SearchFilter';
+const Summary = _ref2 => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref2;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('ncua-data-grid__summary', className),
+    ...rest,
+    children: children
+  });
+};
+Summary.displayName = 'DataGrid.Summary';
+const FilterBar = _ref3 => {
+  let {
+    children,
+    className,
+    ...rest
+  } = _ref3;
+  return (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('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 (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('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__*/(0, _react.forwardRef)((_ref5, ref) => {
+  let {
+    children,
+    className,
+    type = 'horizontal',
+    fixedHeader,
+    maxHeight,
+    hoverable,
+    selectable
+  } = _ref5;
+  return (0, _jsxRuntime.jsx)("div", {
+    ref: ref,
+    className: (0, _classnames.default)('ncua-data-grid__table', className),
+    children: (0, _jsxRuntime.jsx)(_table.Table, {
+      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 (0, _jsxRuntime.jsx)("div", {
+    className: (0, _classnames.default)('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__*/(0, _react.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: []
+  };
+  _react.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__*/(0, _react.isValidElement)(child) && child.props.selectable === true);
+// ──────────────────────────────────────────────
+// Main DataGrid component
+// ──────────────────────────────────────────────
+const DataGridComponent = /*#__PURE__*/(0, _react.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 (0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    className: (0, _classnames.default)('ncua-data-grid', className, `ncua-data-grid--${variant}`),
+    ...rest,
+    children: [sorted.searchFilter, sorted.summary, hasTableWrapperContent(sorted) && (0, _jsxRuntime.jsxs)("div", {
+      className: "ncua-data-grid__table-wrapper",
+      children: [sorted.filterBar, sorted.topActionBar, sorted.dataTable, sorted.bottomActionBar, needsEmptyBottomBar && (0, _jsxRuntime.jsx)("div", {
+        className: "ncua-data-grid__action-bar ncua-data-grid__action-bar--bottom"
+      })]
+    }), sorted.pagination]
+  });
+});
+DataGridComponent.displayName = 'DataGrid';
+// ──────────────────────────────────────────────
+// Compound export
+// ──────────────────────────────────────────────
+const DataGrid = exports.DataGrid = Object.assign(DataGridComponent, {
+  SearchFilter,
+  Summary,
+  FilterBar,
+  ActionBar,
+  Table: DataGridTable,
+  Pagination
+});

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _DataGrid = require("./DataGrid");
+Object.keys(_DataGrid).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DataGrid[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGrid[key];
+    }
+  });
+});
+var _DataGrid2 = require("./DataGrid.types");
+Object.keys(_DataGrid2).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _DataGrid2[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _DataGrid2[key];
+    }
+  });
+});

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

@@ -7,41 +7,25 @@ exports.CustomInput = void 0;
 var _jsxRuntime = require("react/jsx-runtime");
 var _uiAdminIcon = require("@ncds/ui-admin-icon");
 var _react = require("react");
-var __assign = void 0 && (void 0).__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 = void 0 && (void 0).__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;
-};
-var SVG_SIZE_XS = 14;
-var SVG_SIZE_SM = 16;
-var CustomInput = exports.CustomInput = /*#__PURE__*/(0, _react.forwardRef)(function (_a, ref) {
-  var disabled = _a.disabled,
-    iconSize = _a.iconSize,
-    iconName = _a.iconName,
-    props = __rest(_a, ["disabled", "iconSize", "iconName"]);
-  var svgSize = iconSize === 'xs' ? SVG_SIZE_XS : SVG_SIZE_SM;
+const SVG_SIZE_XS = 14;
+const SVG_SIZE_SM = 16;
+const CustomInput = exports.CustomInput = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    disabled,
+    iconSize,
+    iconName,
+    ...props
+  } = _ref;
+  const svgSize = iconSize === 'xs' ? SVG_SIZE_XS : SVG_SIZE_SM;
   return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsx)("input", __assign({
+    children: [(0, _jsxRuntime.jsx)("input", {
       ref: ref,
       disabled: disabled,
-      autoComplete: props.autoComplete || 'off'
-    }, props)), (0, _jsxRuntime.jsx)("label", __assign({
+      autoComplete: props.autoComplete || 'off',
+      ...props
+    }), (0, _jsxRuntime.jsx)("label", {
       className: "ncua-date-picker__ico",
-      htmlFor: props.id
-    }, {
+      htmlFor: props.id,
       children: iconName === 'calendar' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.Calendar, {
         width: svgSize,
         height: svgSize
@@ -49,7 +33,7 @@ var CustomInput = exports.CustomInput = /*#__PURE__*/(0, _react.forwardRef)(func
         width: svgSize,
         height: svgSize
       })
-    }))]
+    })]
   });
 });
 CustomInput.displayName = 'CustomInput';