@ncds/ui-admin 1.8.1 → 1.8.3

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

@@ -1,260 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SelectBox = exports.DEFAULT_MAX_HEIGHT = 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 _color = require("../../../constant/color");
-var _dropdown = require("../../hooks/dropdown");
-var _multiSelect = require("../../utils/dropdown/multiSelect");
-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 ICON_SIZE_XS = 14;
-const ICON_SIZE_SM = 16;
-const DEFAULT_MAX_HEIGHT = exports.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 (0, _jsxRuntime.jsx)("span", {
-      className: "ncua-selectbox__value-text",
-      children: displayValue
-    });
-  }
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: "ncua-selectbox__value-container",
-    children: [displayValue.icon && (0, _jsxRuntime.jsx)("span", {
-      className: "ncua-selectbox__value-icon",
-      children: (0, _jsxRuntime.jsx)(displayValue.icon, {
-        width: 16,
-        height: 16
-      })
-    }), (0, _jsxRuntime.jsx)("span", {
-      className: "ncua-selectbox__value-text",
-      children: displayValue.label
-    })]
-  });
-}
-const SelectBox = exports.SelectBox = /*#__PURE__*/(0, _react.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 = (0, _react.useRef)(null);
-  const dropdownRef = (0, _react.useRef)(null);
-  const [selectedTags, setSelectedTags] = (0, _react.useState)([]);
-  const selectedOption = (0, _react.useMemo)(() => {
-    if (multiple) return null;
-    return optionItems.find(option => option.id === value);
-  }, [optionItems, value, multiple]);
-  const displayValue = (0, _react.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
-  } = (0, _dropdown.useDropdown)({
-    triggerRef: internalRef,
-    dropdownRef,
-    maxHeight,
-    itemCount: optionItems.length,
-    optionItems,
-    disabled,
-    multiple,
-    onSelect: handleOptionSelect
-  });
-  const activeDescendantId = (0, _react.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 = (0, _react.useCallback)(index => {
-    handleMouseMove();
-    setFocusedIndex(index);
-  }, [handleMouseMove, setFocusedIndex]);
-  // Multiple select 관련 로직
-  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) {
-      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));
-    }
-  };
-  (0, _dropdown.useScrollLock)(isOpen, dropdownRef);
-  (0, _react.useLayoutEffect)(() => {
-    if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
-      const dropdownWidth = dropdownRef.current.offsetWidth;
-      internalRef.current.style.width = `${dropdownWidth}px`;
-    }
-  }, [autoWidth, isOpen, optionItems]);
-  (0, _react.useImperativeHandle)(ref, () => internalRef.current, []);
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)("div", {
-      ref: internalRef,
-      className: (0, _classnames.default)('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: [(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)('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: [(0, _jsxRuntime.jsxs)("div", {
-          className: "ncua-selectbox__content-inner",
-          children: [(0, _jsxRuntime.jsx)("div", {
-            className: "ncua-selectbox__value",
-            children: (0, _jsxRuntime.jsx)(DisplayValue, {
-              displayValue: displayValue
-            })
-          }), (0, _jsxRuntime.jsx)(_uiAdminIcon.ChevronDown, {
-            width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM,
-            height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM,
-            color: disabled ? _color.COLOR.gray300 : _color.COLOR.gray500,
-            className: (0, _classnames.default)('ncua-selectbox__arrow', {
-              'ncua-selectbox__arrow--up': isOpen
-            })
-          })]
-        }), (0, _jsxRuntime.jsx)(_selectDropdown.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 && (0, _jsxRuntime.jsx)(_HintText.HintText, {
-        destructive: destructive,
-        className: "ncua-hint-text",
-        children: hintText
-      }), register && (0, _jsxRuntime.jsx)("input", {
-        type: "hidden",
-        ...register,
-        value: multiple ? JSON.stringify(value || []) : String(value || '')
-      })]
-    }), selectedTags.length > 0 && (0, _jsxRuntime.jsx)("div", {
-      className: "ncua-selectbox__tags",
-      children: selectedTags.map(tag => (0, _jsxRuntime.jsx)(_tag.Tag, {
-        text: tag.label,
-        size: "sm",
-        close: true,
-        onButtonClick: () => handleRemoveTag(tag.id)
-      }, tag.id))
-    })]
-  });
-});
-SelectBox.displayName = 'SelectBox';

package/dist/cjs/src/components/slider/Slider.js

@@ -1,61 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Slider = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _react = require("react");
-var _slider = require("../../../assets/scripts/slider");
-const Slider = _ref => {
-  let {
-    min = 0,
-    max = 100,
-    step = 1,
-    value = 0,
-    onChange,
-    labelPosition,
-    disabled = false,
-    className
-  } = _ref;
-  const containerRef = (0, _react.useRef)(null);
-  const sliderInstanceRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(() => {
-    if (!containerRef.current) return;
-    sliderInstanceRef.current = new _slider.Slider(containerRef.current, {
-      min,
-      max,
-      step,
-      value,
-      onChange,
-      labelPosition,
-      disabled
-    });
-    return () => {
-      if (sliderInstanceRef.current) {
-        sliderInstanceRef.current.destroy();
-        sliderInstanceRef.current = null;
-      }
-    };
-  }, [typeof value, onChange, min, max, step, labelPosition]);
-  (0, _react.useEffect)(() => {
-    if (sliderInstanceRef.current) {
-      sliderInstanceRef.current.setValue(value);
-    }
-  }, [sliderInstanceRef, value]);
-  (0, _react.useEffect)(() => {
-    if (sliderInstanceRef.current) {
-      if (disabled) {
-        sliderInstanceRef.current.disable();
-      } else {
-        sliderInstanceRef.current.enable();
-      }
-    }
-  }, [disabled]);
-  return (0, _jsxRuntime.jsx)("div", {
-    ref: containerRef,
-    className: `ncua-slider ${className || ''}`
-  });
-};
-exports.Slider = Slider;
-var _default = exports.default = Slider;

package/dist/cjs/src/components/switch/index.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Switch", {
-  enumerable: true,
-  get: function () {
-    return _Switch.Switch;
-  }
-});
-var _Switch = require("./Switch");

package/dist/cjs/src/components/table/types.js

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

package/dist/cjs/src/components/tag/Tag.js

@@ -1,146 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Tag = 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 _color = require("../../../constant/color");
-var _dot = require("../dot");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const MARGIN = 10;
-const DEFAULT_TOOLTIP_WIDTH = 200;
-const DEFAULT_TOOLTIP_HEIGHT = 60;
-// 위치 계산 로직
-const calculateOptimalPosition = (triggerElement, tooltipElement) => {
-  const triggerRect = triggerElement.getBoundingClientRect();
-  const tooltipRect = tooltipElement.getBoundingClientRect();
-  const {
-    innerWidth: viewportWidth,
-    innerHeight: viewportHeight
-  } = window;
-  const tooltipWidth = tooltipRect.width || DEFAULT_TOOLTIP_WIDTH;
-  const tooltipHeight = tooltipRect.height || DEFAULT_TOOLTIP_HEIGHT;
-  const spaces = {
-    top: triggerRect.top,
-    bottom: viewportHeight - triggerRect.bottom,
-    left: triggerRect.left,
-    right: viewportWidth - triggerRect.right
-  };
-  // 위/아래 공간을 먼저 확인하고 우선순위 결정
-  const hasTopSpace = spaces.top >= tooltipHeight + MARGIN;
-  // 위쪽 공간이 있으면 top 우선, 없으면 bottom 우선
-  const positions = hasTopSpace ? ['top-right', 'top-left', 'bottom-right', 'bottom-left'] : ['bottom-right', 'bottom-left', 'top-right', 'top-left'];
-  for (const position of positions) {
-    const isTop = position.includes('top');
-    const isRight = position.includes('right');
-    const hasVerticalSpace = isTop ? spaces.top >= tooltipHeight + MARGIN : spaces.bottom >= tooltipHeight + MARGIN;
-    const hasHorizontalSpace = isRight ? spaces.right >= tooltipWidth + MARGIN // right 정렬: 툴팁이 오른쪽으로 펼쳐짐
-    : spaces.left >= tooltipWidth + MARGIN; // left 정렬: 툴팁이 왼쪽으로 펼쳐짐
-    if (hasVerticalSpace && hasHorizontalSpace) {
-      return position;
-    }
-  }
-  // 모든 조건이 맞지 않으면 공간이 더 많은 쪽으로
-  const fallbackPosition = hasTopSpace ? 'top-right' : 'bottom-right';
-  return fallbackPosition;
-};
-const Tag = _ref => {
-  let {
-    size = 'sm',
-    icon,
-    text,
-    count,
-    close,
-    onButtonClick,
-    maxLength = 20
-  } = _ref;
-  const [isTooltipVisible, setIsTooltipVisible] = (0, _react.useState)(false);
-  const [calculatedPosition, setCalculatedPosition] = (0, _react.useState)('top-right');
-  const tagRef = (0, _react.useRef)(null);
-  const tooltipRef = (0, _react.useRef)(null);
-  const iconSize = {
-    sm: 14,
-    md: 16
-  };
-  // 텍스트 길이 체크 및 말줄임 처리
-  const shouldTruncate = text.length > maxLength;
-  const displayText = shouldTruncate ? `${text.slice(0, maxLength - 2)}...` : text;
-  const handleMouseEnter = (0, _react.useCallback)(() => {
-    if (shouldTruncate) {
-      setIsTooltipVisible(true);
-      // 간단한 위치 계산 - 기본값 사용
-      if (tagRef.current && tooltipRef.current) {
-        const optimalPosition = calculateOptimalPosition(tagRef.current, tooltipRef.current);
-        setCalculatedPosition(optimalPosition);
-      } else {
-        // ref가 없으면 다음 렌더링 사이클에서 시도
-        setTimeout(() => {
-          if (tagRef.current) {
-            // tooltipRef가 없어도 tagRef만으로 계산
-            const dummyTooltipElement = document.createElement('div');
-            dummyTooltipElement.style.width = `${DEFAULT_TOOLTIP_WIDTH}px`;
-            dummyTooltipElement.style.height = `${DEFAULT_TOOLTIP_HEIGHT}px`;
-            const optimalPosition = calculateOptimalPosition(tagRef.current, dummyTooltipElement);
-            setCalculatedPosition(optimalPosition);
-          }
-        }, 0);
-      }
-    }
-  }, [shouldTruncate]);
-  const handleMouseLeave = (0, _react.useCallback)(() => {
-    setIsTooltipVisible(false);
-  }, []);
-  const sideSlotRender = slot => {
-    if (slot.type === 'icon') {
-      const SlotIcon = slot.icon;
-      return (0, _jsxRuntime.jsx)(SlotIcon, {
-        width: iconSize[size],
-        height: iconSize[size],
-        color: slot.color
-      });
-    }
-    if (slot.type === 'dot') {
-      return (0, _jsxRuntime.jsx)(_dot.Dot, {
-        color: slot.color,
-        size: slot.size ?? 'sm'
-      });
-    }
-    return slot.children;
-  };
-  return (0, _jsxRuntime.jsxs)("span", {
-    ref: tagRef,
-    className: (0, _classnames.default)('ncua-tag', `ncua-tag--${size}`, {
-      'ncua-tag--truncated': shouldTruncate
-    }),
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    children: [icon && sideSlotRender(icon), (0, _jsxRuntime.jsx)("span", {
-      className: "ncua-tag__text",
-      children: displayText
-    }), count && (0, _jsxRuntime.jsx)("span", {
-      className: "ncua-tag__count",
-      children: count
-    }), close && (0, _jsxRuntime.jsx)("button", {
-      type: "button",
-      className: "ncua-tag__close",
-      onClick: onButtonClick,
-      children: (0, _jsxRuntime.jsx)(_uiAdminIcon.XClose, {
-        color: _color.COLOR.gray300,
-        width: iconSize[size],
-        height: iconSize[size]
-      })
-    }), shouldTruncate && isTooltipVisible && (0, _jsxRuntime.jsx)("span", {
-      ref: tooltipRef,
-      className: (0, _classnames.default)('ncua-tag__tooltip', `ncua-tag__tooltip--${calculatedPosition}`),
-      children: (0, _jsxRuntime.jsx)("span", {
-        className: "ncua-tag__tooltip-content",
-        children: text
-      })
-    })]
-  });
-};
-exports.Tag = Tag;

package/dist/cjs/src/components/textarea/Textarea.js

@@ -1,79 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Textarea = void 0;
-var _jsxRuntime = require("react/jsx-runtime");
-var _classnames = _interopRequireDefault(require("classnames"));
-var _react = require("react");
-var _HintText = require("../shared/hintText/HintText");
-var _Label = require("../shared/label/Label");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const Textarea = exports.Textarea = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  let {
-    className,
-    size = 'xs',
-    label,
-    required,
-    disabled,
-    hintText,
-    characterCount,
-    destructive,
-    ...props
-  } = _ref;
-  const textareaRef = (0, _react.useRef)(null);
-  const [textCount, setTextCount] = (0, _react.useState)(0);
-  const shouldShowHintArea = hintText || characterCount;
-  (0, _react.useEffect)(() => {
-    if (textareaRef.current && characterCount) {
-      setTextCount(textareaRef.current.value.length);
-      const handleInput = () => {
-        setTextCount(textareaRef.current?.value.length ?? 0);
-      };
-      textareaRef.current.addEventListener('input', handleInput);
-      return () => {
-        textareaRef.current?.removeEventListener('input', handleInput);
-      };
-    }
-  }, [characterCount]);
-  return (0, _jsxRuntime.jsxs)("div", {
-    className: (0, _classnames.default)('ncua-input', 'ncua-input--textarea', `ncua-input--textarea--${size}`, {
-      destructive: destructive,
-      'is-disabled': disabled
-    }, className),
-    children: [label && (0, _jsxRuntime.jsx)(_Label.Label, {
-      htmlFor: props.id,
-      isRequired: required,
-      children: label
-    }), (0, _jsxRuntime.jsx)("textarea", {
-      ref: node => {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-        textareaRef.current = node;
-      },
-      className: "ncua-input__textarea",
-      disabled: disabled,
-      ...props
-    }), shouldShowHintArea && (0, _jsxRuntime.jsxs)("div", {
-      className: "ncua-input__text-count-wrap",
-      children: [hintText && (0, _jsxRuntime.jsx)(_HintText.HintText, {
-        as: "div",
-        destructive: destructive,
-        children: hintText
-      }), characterCount && (0, _jsxRuntime.jsx)("div", {
-        className: "ncua-input__text-count",
-        children: (0, _jsxRuntime.jsxs)("span", {
-          className: "ncua-input__text-count-text",
-          children: [(0, _jsxRuntime.jsx)("span", {
-            className: "ncua-input__text-count-text-count",
-            children: textCount
-          }), "/", props.maxLength ?? 0]
-        })
-      })]
-    })]
-  });
-});