@ncds/ui-admin 1.6.4 → 1.8.0

package/dist/esm/src/components/badge/BadgeGroup.js

@@ -1,54 +0,0 @@
-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 { Badge } from '.';
-import { sideSlotRender } from './utils';
-var DEFAULT_GROUP_ICON_SIZE = 14;
-export var BadgeGroup = function (_a) {
-  var groupLabel = _a.groupLabel,
-    groupIcon = _a.groupIcon,
-    groupClassName = _a.groupClassName,
-    _b = _a.color,
-    color = _b === void 0 ? 'neutral' : _b,
-    _c = _a.size,
-    size = _c === void 0 ? 'sm' : _c,
-    href = _a.href,
-    _d = _a.target,
-    target = _d === void 0 ? '_blank' : _d,
-    props = __rest(_a, ["groupLabel", "groupIcon", "groupClassName", "color", "size", "href", "target"]);
-  return _jsxs("a", __assign({
-    className: classNames('ncua-badge-group', "ncua-badge-group--".concat(color), "ncua-badge-group--".concat(size), groupClassName),
-    href: href,
-    target: target
-  }, {
-    children: [_jsx(Badge, __assign({
-      type: "pill-dark-color",
-      color: color,
-      size: size
-    }, props)), _jsx("span", __assign({
-      className: "ncua-badge-group__label"
-    }, {
-      children: groupLabel
-    })), groupIcon && sideSlotRender({
-      slot: groupIcon,
-      defaultIconSize: DEFAULT_GROUP_ICON_SIZE
-    })]
-  }));
-};

package/dist/esm/src/components/breadcrumb/BreadCrumb.js

@@ -1,58 +0,0 @@
-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);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Home01 } from '@ncds/ui-admin-icon';
-import classNames from 'classnames';
-var BreadcrumbItem = function (_a) {
-  var href = _a.href,
-    children = _a.children;
-  var ElementType = href ? 'a' : 'span';
-  return _jsx(ElementType, __assign({
-    href: href,
-    className: "ncua-breadcrumb__item"
-  }, {
-    children: children
-  }));
-};
-export var BreadCrumb = function (_a) {
-  var items = _a.items,
-    className = _a.className;
-  if (!items || items.length === 0) return null;
-  var renderItem = function (item, index) {
-    var isLast = index === items.length - 1;
-    var content = index === 0 ? _jsx(Home01, {
-      width: 16,
-      height: 16,
-      color: "gray500"
-    }) : item.label;
-    return _jsx("li", __assign({
-      className: classNames('ncua-breadcrumb__list-item', {
-        'ncua-breadcrumb__list-item--active': isLast
-      })
-    }, {
-      children: _jsx(BreadcrumbItem, __assign({
-        href: !isLast ? item.href : undefined
-      }, {
-        children: content
-      }))
-    }), index);
-  };
-  return _jsx("nav", __assign({
-    "aria-label": "breadcrumb",
-    className: classNames('ncua-breadcrumb', className)
-  }, {
-    children: _jsx("ol", __assign({
-      className: "ncua-breadcrumb__list"
-    }, {
-      children: items.map(renderItem)
-    }))
-  }));
-};

package/dist/esm/src/components/button/ButtonGroup.js

@@ -1,107 +0,0 @@
-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 classNames from 'classnames';
-import React, { createElement } from 'react';
-import { COLOR } from '../../../constant/color';
-import { Dot } from '../dot';
-var svgSize = {
-  xxs: 12,
-  xs: 16,
-  sm: 16,
-  md: 20
-};
-var dotSize = {
-  xxs: 'sm',
-  xs: 'sm',
-  sm: 'md',
-  md: 'md'
-};
-export var ButtonGroup = function (_a) {
-  var children = _a.children,
-    className = _a.className,
-    _b = _a.hasBorder,
-    hasBorder = _b === void 0 ? true : _b,
-    _c = _a.size,
-    size = _c === void 0 ? 'xs' : _c,
-    _d = _a.onlyIcon,
-    onlyIcon = _d === void 0 ? false : _d,
-    _e = _a.disabled,
-    disabled = _e === void 0 ? false : _e;
-  return _jsx("div", __assign({
-    className: classNames('ncua-button-group', "ncua-button-group--".concat(size), {
-      'has-border': hasBorder
-    }, className)
-  }, {
-    children: React.Children.map(children, function (child) {
-      if (! /*#__PURE__*/React.isValidElement(child)) {
-        return null;
-      }
-      return /*#__PURE__*/React.cloneElement(child, {
-        onlyIcon: onlyIcon,
-        size: size,
-        disabled: disabled || child.props.disabled
-      });
-    })
-  }));
-};
-ButtonGroup.Item = function (_a) {
-  var _b;
-  var label = _a.label,
-    _c = _a.size,
-    size = _c === void 0 ? 'xs' : _c,
-    onlyIcon = _a.onlyIcon,
-    icon = _a.icon,
-    disabled = _a.disabled,
-    children = _a.children,
-    isCurrent = _a.isCurrent,
-    className = _a.className,
-    props = __rest(_a, ["label", "size", "onlyIcon", "icon", "disabled", "children", "isCurrent", "className"]);
-  var renderIcon = function () {
-    var _a, _b, _c;
-    if (!icon) return null;
-    if (icon.type === 'icon') {
-      var IconComponent = icon.icon;
-      return _jsx(IconComponent, {
-        width: (_a = icon.size) !== null && _a !== void 0 ? _a : svgSize[size],
-        height: (_b = icon.size) !== null && _b !== void 0 ? _b : svgSize[size],
-        color: icon.color ? COLOR[icon.color] : 'currentColor'
-      });
-    }
-    if (icon.type === 'dot') {
-      return _jsx(Dot, {
-        color: icon.color,
-        size: (_c = icon.size) !== null && _c !== void 0 ? _c : dotSize[size]
-      });
-    }
-    return icon.children;
-  };
-  var position = (_b = icon === null || icon === void 0 ? void 0 : icon.position) !== null && _b !== void 0 ? _b : 'leading';
-  return /*#__PURE__*/createElement('button', __assign({
-    className: classNames('ncua-button-group__item', {
-      'is-only-icon': onlyIcon
-    }, {
-      'is-current': isCurrent
-    }, className),
-    disabled: disabled,
-    type: 'button'
-  }, props), _jsxs(_Fragment, {
-    children: [position === 'leading' && renderIcon(), !onlyIcon && label, children, position === 'trailing' && renderIcon()]
-  }));
-};

package/dist/esm/src/components/carousel/CarouselArrow.js

@@ -1,33 +0,0 @@
-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);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ChevronLeft, ChevronRight } from '@ncds/ui-admin-icon';
-import classNames from 'classnames';
-export var CarouselArrow = function (_a) {
-  var _b;
-  var _c = _a.type,
-    type = _c === void 0 ? 'default' : _c,
-    className = _a.className,
-    size = _a.size,
-    chevron = _a.chevron,
-    onClick = _a.onClick;
-  return _jsx("button", __assign({
-    type: "button",
-    className: classNames('ncua-carousel-arrow', (_b = {}, _b["ncua-carousel-arrow--".concat(type)] = type, _b["ncua-carousel-arrow--".concat(size)] = size, _b["ncua-carousel-arrow--".concat(chevron)] = chevron, _b), className),
-    onClick: onClick
-  }, {
-    children: chevron === 'left' ? _jsx(ChevronLeft, {
-      className: "ncua-carousel-arrow__icon"
-    }) : _jsx(ChevronRight, {
-      className: "ncua-carousel-arrow__icon"
-    })
-  }));
-};

package/dist/esm/src/components/carousel/CarouselNumberGroup.js

@@ -1,38 +0,0 @@
-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);
-};
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import classNames from 'classnames';
-export var CarouselNumberGroup = function (_a) {
-  var _b;
-  var _c = _a.framed,
-    framed = _c === void 0 ? true : _c,
-    _d = _a.size,
-    size = _d === void 0 ? 'sm' : _d,
-    _e = _a.color,
-    color = _e === void 0 ? 'light' : _e,
-    currentPage = _a.currentPage,
-    totalPage = _a.totalPage;
-  return _jsxs("div", __assign({
-    className: classNames('ncua-carousel-number-group', (_b = {
-      framed: framed
-    }, _b["ncua-carousel-number-group--".concat(color)] = color, _b["ncua-carousel-number-group--".concat(size)] = size, _b))
-  }, {
-    children: [_jsx("span", __assign({
-      className: "ncua-carousel-number-group__number"
-    }, {
-      children: currentPage
-    })), _jsxs("span", __assign({
-      className: "ncua-carousel-number-group__total"
-    }, {
-      children: ["/", totalPage]
-    }))]
-  }));
-};

package/dist/esm/src/components/carousel/index.js

@@ -1,2 +0,0 @@
-export * from './CarouselArrow';
-export * from './CarouselNumberGroup';

package/dist/esm/src/components/combobox/ComboBox.js

@@ -1,331 +0,0 @@
-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;
-};
-var __spreadArray = this && this.__spreadArray || function (to, from, pack) {
-  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-    if (ar || !(i in from)) {
-      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-      ar[i] = from[i];
-    }
-  }
-  return to.concat(ar || Array.prototype.slice.call(from));
-};
-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/InputBase';
-import { SelectDropdown } from '../select-dropdown';
-import { HintText } from '../shared/hintText/HintText';
-import { Tag } from '../tag';
-export var defaultMaxHeight = 275;
-export var ComboBox = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _b = _a.placeholder,
-    placeholder = _b === void 0 ? '검색하세요' : _b,
-    id = _a.id,
-    className = _a.className,
-    hintText = _a.hintText,
-    children = _a.children,
-    _c = _a.size,
-    size = _c === void 0 ? 'xs' : _c,
-    _d = _a.destructive,
-    destructive = _d === void 0 ? false : _d,
-    value = _a.value,
-    _e = _a.optionItems,
-    optionItems = _e === void 0 ? [] : _e,
-    onChange = _a.onChange,
-    onSearch = _a.onSearch,
-    _f = _a.disabled,
-    disabled = _f === void 0 ? false : _f,
-    register = _a.register,
-    _g = _a.maxHeight,
-    maxHeight = _g === void 0 ? defaultMaxHeight : _g,
-    _h = _a.searchValue,
-    searchValue = _h === void 0 ? '' : _h,
-    label = _a.label,
-    _j = _a.required,
-    required = _j === void 0 ? false : _j,
-    _k = _a.multiple,
-    multiple = _k === void 0 ? false : _k,
-    _l = _a.showFooterButtons,
-    showFooterButtons = _l === void 0 ? false : _l,
-    onEdit = _a.onEdit,
-    props = __rest(_a, ["placeholder", "id", "className", "hintText", "children", "size", "destructive", "value", "optionItems", "onChange", "onSearch", "disabled", "register", "maxHeight", "searchValue", "label", "required", "multiple", "showFooterButtons", "onEdit"]);
-  var internalRef = useRef(null);
-  var dropdownRef = useRef(null);
-  var inputRef = useRef(null);
-  var _m = useState(searchValue),
-    inputValue = _m[0],
-    setInputValue = _m[1];
-  var _o = useState(false),
-    showAllItems = _o[0],
-    setShowAllItems = _o[1];
-  var _p = useState([]),
-    selectedTags = _p[0],
-    setSelectedTags = _p[1];
-  var handleOptionSelect = function (option) {
-    if (disabled) return;
-    var newValue;
-    if (multiple) {
-      var currentValues = Array.isArray(value) ? value : [];
-      if (currentValues.includes(option.id)) {
-        newValue = currentValues.filter(function (v) {
-          return v !== option.id;
-        });
-      } else {
-        newValue = __spreadArray(__spreadArray([], currentValues, true), [option.id], false);
-      }
-    } else {
-      newValue = option.id;
-      var tag = {
-        id: option.id,
-        label: option.label
-      };
-      setSelectedTags([tag]);
-    }
-    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-    // react-hook-form 지원
-    if (register === null || register === void 0 ? void 0 : register.onChange) {
-      register.onChange({
-        target: {
-          value: multiple ? JSON.stringify(newValue) : newValue,
-          name: register.name
-        }
-      });
-    }
-  };
-  var handleInputChange = function (e) {
-    var newValue = e.target.value;
-    setInputValue(newValue);
-    onSearch === null || onSearch === void 0 ? void 0 : onSearch(newValue);
-    setShowAllItems(false);
-    if (!isOpen && !disabled) {
-      toggleDropdown();
-    }
-  };
-  var handleInputClick = function () {
-    var _a;
-    if (!disabled) {
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    if (inputValue) {
-      toggleDropdown();
-    }
-  };
-  // useDropdown 훅 사용
-  var _q = useDropdown({
-      triggerRef: internalRef,
-      dropdownRef: dropdownRef,
-      maxHeight: maxHeight,
-      itemCount: optionItems.length,
-      optionItems: optionItems,
-      disabled: disabled,
-      multiple: multiple,
-      onSelect: handleOptionSelect
-    }),
-    isOpen = _q.isOpen,
-    dropdownDirection = _q.direction,
-    focusedIndex = _q.focusedIndex,
-    toggleDropdown = _q.toggleDropdown,
-    dropdownClose = _q.closeDropdown,
-    dropdownHandleKeyDown = _q.handleKeyDown,
-    handleDropdownSelect = _q.handleOptionSelect,
-    handleMouseMove = _q.handleMouseMove,
-    isKeyboardNavigation = _q.isKeyboardNavigation;
-  var showAllItem = function () {
-    var _a;
-    if (!disabled) {
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-      setInputValue('');
-      onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
-      setShowAllItems(true);
-      if (!isOpen) {
-        toggleDropdown();
-      }
-    }
-  };
-  var closeDropdown = function () {
-    setShowAllItems(false);
-    dropdownClose();
-  };
-  // 키보드 이벤트 처리는 useDropdown 훅에서 처리됨
-  var handleKeyDown = function (e) {
-    // input 전용 키보드 이벤트 처리
-    if (e.key === 'Escape' && isOpen) {
-      closeDropdown();
-      e.preventDefault();
-      return;
-    }
-    // 나머지는 useDropdown 훅에서 처리
-    dropdownHandleKeyDown(e);
-  };
-  useImperativeHandle(ref, function () {
-    return internalRef.current;
-  }, []);
-  var trailingElement = {
-    type: 'custom',
-    children: _jsx("div", __assign({
-      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
-        }
-      })
-    }))
-  };
-  var leadingElement = {
-    type: 'icon',
-    icon: SearchLg,
-    size: 14,
-    color: 'gray300'
-  };
-  var currentSelectedValues = multiple && Array.isArray(value) ? value : [];
-  var _r = useMultiSelect(currentSelectedValues, optionItems),
-    selectAllButtonText = _r.buttonText,
-    toggleSelectAll = _r.toggleSelectAll,
-    getSelectedTagsData = _r.getSelectedTagsData,
-    removeTag = _r.removeTag;
-  var handleSelectAll = function () {
-    if (!multiple || !onChange) return;
-    var newSelectedValues = toggleSelectAll();
-    onChange(newSelectedValues);
-  };
-  var handleEdit = function () {
-    onEdit === null || onEdit === void 0 ? void 0 : onEdit();
-  };
-  var handleComplete = function () {
-    if (!multiple) return;
-    var tags = getSelectedTagsData();
-    setSelectedTags(tags);
-    setInputValue('');
-    closeDropdown();
-  };
-  var handleRemoveTag = function (tagId) {
-    if (!onChange) return;
-    if (multiple) {
-      var newSelectedValues = removeTag(tagId);
-      onChange(newSelectedValues);
-      setSelectedTags(function (prev) {
-        return prev.filter(function (tag) {
-          return tag.id !== tagId;
-        });
-      });
-    } else {
-      onChange('');
-      setSelectedTags([]);
-    }
-  };
-  return _jsxs(_Fragment, {
-    children: [_jsxs("div", __assign({
-      ref: internalRef,
-      className: classNames('ncua-combobox', "ncua-combobox--".concat(size), {
-        'ncua-combobox--open': isOpen,
-        'ncua-combobox--disabled': disabled,
-        destructive: destructive
-      }, className)
-    }, props, {
-      children: [_jsxs("div", __assign({
-        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": "combobox-options-".concat(id || 'default'),
-          "aria-disabled": disabled,
-          autoComplete: "off",
-          clearText: !!inputValue,
-          onClearText: function () {
-            setInputValue('');
-            onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
-          }
-        }), _jsxs(SelectDropdown, __assign({
-          ref: dropdownRef,
-          isOpen: isOpen,
-          direction: dropdownDirection,
-          size: size,
-          options: showAllItems || inputValue ? optionItems : [],
-          value: value,
-          focusedIndex: focusedIndex,
-          maxHeight: maxHeight,
-          listboxId: "combobox-options-".concat(id || 'default'),
-          onOptionSelect: handleDropdownSelect,
-          onMouseMove: handleMouseMove,
-          isKeyboardNavigation: isKeyboardNavigation,
-          multiple: multiple,
-          showFooterButtons: multiple || showFooterButtons,
-          selectAllButtonText: selectAllButtonText,
-          onSelectAll: handleSelectAll,
-          onEdit: handleEdit,
-          onComplete: handleComplete,
-          componentType: "combobox"
-        }, {
-          children: [!showAllItems && !inputValue || optionItems.length === 0 ? _jsx("li", __assign({
-            className: "ncua-select-dropdown__no-results"
-          }, {
-            children: "\uC77C\uCE58\uD558\uB294 \uACB0\uACFC\uAC00 \uC5C6\uC2B5\uB2C8\uB2E4."
-          })) : null, children]
-        }))]
-      })), register && _jsx("input", __assign({
-        type: "hidden"
-      }, register, {
-        value: multiple ? JSON.stringify(value || []) : String(value || '')
-      })), hintText && _jsx(HintText, __assign({
-        destructive: destructive
-      }, {
-        children: hintText
-      }))]
-    })), selectedTags.length > 0 && _jsx("div", __assign({
-      className: "ncua-combobox__tags"
-    }, {
-      children: selectedTags.map(function (tag) {
-        return _jsx(Tag, {
-          text: tag.label,
-          size: "sm",
-          close: true,
-          onButtonClick: function () {
-            return handleRemoveTag(tag.id);
-          }
-        }, tag.id);
-      })
-    }))]
-  });
-});
-ComboBox.displayName = 'ComboBox';