@ncds/ui-admin 1.7.0 → 1.8.1

package/dist/temp/src/components/input/Textarea.js

@@ -1,60 +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 { forwardRef, useEffect, useRef, useState } from 'react';
-import { HintText } from '../shared/hintText/HintText';
-import { Label } from '../shared/label/Label';
-export var Textarea = forwardRef(function (_a, ref) {
-    var _b;
-    var className = _a.className, _c = _a.size, size = _c === void 0 ? 'xs' : _c, label = _a.label, required = _a.required, disabled = _a.disabled, hintText = _a.hintText, characterCount = _a.characterCount, destructive = _a.destructive, props = __rest(_a, ["className", "size", "label", "required", "disabled", "hintText", "characterCount", "destructive"]);
-    var textareaRef = useRef(null);
-    var _d = useState(0), textCount = _d[0], setTextCount = _d[1];
-    var shouldShowHintArea = hintText || characterCount;
-    useEffect(function () {
-        if (textareaRef.current && characterCount) {
-            setTextCount(textareaRef.current.value.length);
-            var handleInput_1 = function () {
-                var _a, _b;
-                setTextCount((_b = (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.value.length) !== null && _b !== void 0 ? _b : 0);
-            };
-            textareaRef.current.addEventListener('input', handleInput_1);
-            return function () {
-                var _a;
-                (_a = textareaRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('input', handleInput_1);
-            };
-        }
-    }, [characterCount]);
-    return (_jsxs("div", __assign({ className: classNames('ncua-input', 'ncua-input--textarea', "ncua-input--textarea--".concat(size), {
-            destructive: destructive,
-            'is-disabled': disabled,
-        }, className) }, { children: [label && (_jsx(Label, __assign({ htmlFor: props.id, isRequired: required }, { children: label }))), _jsx("textarea", __assign({ ref: function (node) {
-                    if (typeof ref === 'function') {
-                        ref(node);
-                    }
-                    else if (ref) {
-                        ref.current = node;
-                    }
-                    textareaRef.current = node;
-                }, className: "ncua-input__textarea", disabled: disabled }, props)), shouldShowHintArea && (_jsxs("div", __assign({ className: "ncua-input__text-count-wrap" }, { children: [hintText && (_jsx(HintText, __assign({ as: "div", destructive: destructive }, { children: hintText }))), characterCount && (_jsx("div", __assign({ className: "ncua-input__text-count" }, { children: _jsxs("span", __assign({ className: "ncua-input__text-count-text" }, { children: [_jsx("span", __assign({ className: "ncua-input__text-count-text-count" }, { children: textCount })), "/", (_b = props.maxLength) !== null && _b !== void 0 ? _b : 0] })) })))] })))] })));
-});

package/dist/temp/src/components/input/index.d.ts

@@ -1,4 +0,0 @@
-export * from './InputBase';
-export * from './NumberInput';
-export * from './PasswordInput';
-export * from './Textarea';

package/dist/temp/src/components/input/index.js

@@ -1,4 +0,0 @@
-export * from './InputBase';
-export * from './NumberInput';
-export * from './PasswordInput';
-export * from './Textarea';

package/dist/temp/src/components/selectbox/SelectBox.js

@@ -1,163 +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 { ChevronDown } from '@ncds/ui-admin-icon';
-import classNames from 'classnames';
-import { forwardRef, useCallback, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { COLOR } from '../../../constant/color';
-import { useDropdown, useScrollLock } from '../../hooks/dropdown';
-import { useMultiSelect } from '../../utils/dropdown/multiSelect';
-import { SelectDropdown } from '../select-dropdown';
-import { HintText } from '../shared/hintText/HintText';
-import { Tag } from '../tag';
-var ICON_SIZE_XS = 14;
-var ICON_SIZE_SM = 16;
-var DEFAULT_MAX_HEIGHT = 275;
-function computeNewValue(option, value, multiple) {
-    if (multiple) {
-        var currentValues = Array.isArray(value) ? value : [];
-        if (currentValues.includes(option.id)) {
-            return currentValues.filter(function (v) { return v !== option.id; });
-        }
-        return __spreadArray(__spreadArray([], currentValues, true), [option.id], false);
-    }
-    return option.id;
-}
-function notifyRegister(register, newValue, multiple) {
-    if (!(register === null || register === void 0 ? void 0 : register.onChange))
-        return;
-    register.onChange({
-        target: {
-            value: multiple ? JSON.stringify(newValue) : newValue,
-            name: register.name,
-        },
-    });
-}
-function DisplayValue(_a) {
-    var displayValue = _a.displayValue;
-    if (typeof displayValue === 'string') {
-        return _jsx("span", __assign({ className: "ncua-selectbox__value-text" }, { children: displayValue }));
-    }
-    return (_jsxs("div", __assign({ className: "ncua-selectbox__value-container" }, { children: [displayValue.icon && (_jsx("span", __assign({ className: "ncua-selectbox__value-icon" }, { children: _jsx(displayValue.icon, { width: 16, height: 16 }) }))), _jsx("span", __assign({ className: "ncua-selectbox__value-text" }, { children: displayValue.label }))] })));
-}
-var SelectBox = forwardRef(function (_a, ref) {
-    var _b = _a.placeholder, placeholder = _b === void 0 ? '선택하세요' : _b, _c = _a.disabledPlaceholder, disabledPlaceholder = _c === void 0 ? false : _c, hintText = _a.hintText, _d = _a.size, size = _d === void 0 ? 'xs' : _d, _e = _a.type, type = _e === void 0 ? 'default' : _e, _f = _a.autoWidth, autoWidth = _f === void 0 ? true : _f, _g = _a.destructive, destructive = _g === void 0 ? false : _g, value = _a.value, _h = _a.optionItems, optionItems = _h === void 0 ? [] : _h, _j = _a.disabled, disabled = _j === void 0 ? false : _j, _k = _a.maxHeight, maxHeight = _k === void 0 ? DEFAULT_MAX_HEIGHT : _k, _l = _a.multiple, multiple = _l === void 0 ? false : _l, _m = _a.align, align = _m === void 0 ? 'left' : _m, id = _a.id, className = _a.className, children = _a.children, register = _a.register, onChange = _a.onChange, onEdit = _a.onEdit, props = __rest(_a, ["placeholder", "disabledPlaceholder", "hintText", "size", "type", "autoWidth", "destructive", "value", "optionItems", "disabled", "maxHeight", "multiple", "align", "id", "className", "children", "register", "onChange", "onEdit"]);
-    var internalRef = useRef(null);
-    var dropdownRef = useRef(null);
-    var _o = useState([]), selectedTags = _o[0], setSelectedTags = _o[1];
-    var selectedOption = useMemo(function () {
-        if (multiple)
-            return null;
-        return optionItems.find(function (option) { return option.id === value; });
-    }, [optionItems, value, multiple]);
-    var displayValue = useMemo(function () {
-        if (multiple) {
-            return placeholder;
-        }
-        return selectedOption ? selectedOption : placeholder;
-    }, [multiple, selectedOption, placeholder]);
-    var handleOptionSelect = function (option) {
-        if (disabled)
-            return;
-        var newValue = computeNewValue(option, value, multiple);
-        onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-        notifyRegister(register, newValue, multiple);
-    };
-    var _p = useDropdown({
-        triggerRef: internalRef,
-        dropdownRef: dropdownRef,
-        maxHeight: maxHeight,
-        itemCount: optionItems.length,
-        optionItems: optionItems,
-        disabled: disabled,
-        multiple: multiple,
-        onSelect: handleOptionSelect,
-    }), isOpen = _p.isOpen, dropdownDirection = _p.direction, focusedIndex = _p.focusedIndex, toggleDropdown = _p.toggleDropdown, closeDropdown = _p.closeDropdown, handleKeyDown = _p.handleKeyDown, handleDropdownSelect = _p.handleOptionSelect, handleMouseMove = _p.handleMouseMove, isKeyboardNavigation = _p.isKeyboardNavigation, setFocusedIndex = _p.setFocusedIndex;
-    var activeDescendantId = useMemo(function () {
-        if (!isOpen || focusedIndex < 0 || focusedIndex >= optionItems.length) {
-            return undefined;
-        }
-        var focusedOption = optionItems[focusedIndex];
-        return "selectbox-options-".concat(id || 'default', "-").concat(focusedOption.id);
-    }, [isOpen, focusedIndex, optionItems, id]);
-    var handleOptionHover = useCallback(function (index) {
-        handleMouseMove();
-        setFocusedIndex(index);
-    }, [handleMouseMove, setFocusedIndex]);
-    // Multiple select 관련 로직
-    var currentSelectedValues = multiple && Array.isArray(value) ? value : [];
-    var _q = useMultiSelect(currentSelectedValues, optionItems), selectAllButtonText = _q.buttonText, toggleSelectAll = _q.toggleSelectAll, getSelectedTagsData = _q.getSelectedTagsData, removeTag = _q.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) {
-            var tags = getSelectedTagsData();
-            setSelectedTags(tags);
-        }
-        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; }); });
-        }
-    };
-    useScrollLock(isOpen, dropdownRef);
-    useLayoutEffect(function () {
-        if (autoWidth && isOpen && dropdownRef.current && internalRef.current) {
-            var dropdownWidth = dropdownRef.current.offsetWidth;
-            internalRef.current.style.width = "".concat(dropdownWidth, "px");
-        }
-    }, [autoWidth, isOpen, optionItems]);
-    useImperativeHandle(ref, function () { return internalRef.current; }, []);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", __assign({ ref: internalRef, className: classNames('ncua-selectbox', "ncua-selectbox--".concat(size), {
-                    'ncua-selectbox--open': isOpen,
-                    'ncua-selectbox--disabled': disabled,
-                    'ncua-selectbox--simple': type === 'simple',
-                    'ncua-selectbox--multiple': multiple,
-                    destructive: destructive,
-                }, className) }, props, { children: [_jsxs("div", __assign({ className: classNames('ncua-selectbox__content'), onClick: toggleDropdown, onKeyDown: handleKeyDown, tabIndex: disabled ? -1 : 0, role: "combobox", "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-controls": "selectbox-options-".concat(id || 'default'), "aria-disabled": disabled, "aria-label": selectedOption ? selectedOption.label : placeholder, "aria-activedescendant": activeDescendantId }, { children: [_jsxs("div", __assign({ className: "ncua-selectbox__content-inner" }, { children: [_jsx("div", __assign({ className: "ncua-selectbox__value" }, { children: _jsx(DisplayValue, { displayValue: displayValue }) })), _jsx(ChevronDown, { width: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, height: size === 'xs' ? ICON_SIZE_XS : ICON_SIZE_SM, color: disabled ? COLOR.gray300 : COLOR.gray500, className: classNames('ncua-selectbox__arrow', {
-                                            'ncua-selectbox__arrow--up': isOpen,
-                                        }) })] })), _jsx(SelectDropdown, __assign({ ref: dropdownRef, isOpen: isOpen, direction: dropdownDirection, size: size, options: optionItems, value: value, focusedIndex: focusedIndex, maxHeight: maxHeight, listboxId: "selectbox-options-".concat(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 && (_jsx(HintText, __assign({ destructive: destructive, className: "ncua-hint-text" }, { children: hintText }))), register && (_jsx("input", __assign({ type: "hidden" }, register, { value: multiple ? JSON.stringify(value || []) : String(value || '') })))] })), selectedTags.length > 0 && (_jsx("div", __assign({ className: "ncua-selectbox__tags" }, { children: selectedTags.map(function (tag) { return (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: function () { return handleRemoveTag(tag.id); } }, tag.id)); }) })))] }));
-});
-SelectBox.displayName = 'SelectBox';
-export { DEFAULT_MAX_HEIGHT, SelectBox };

package/dist/temp/src/components/tab/HorizontalTab.js

@@ -1,37 +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 classNames from 'classnames';
-import { uniqueId } from 'lodash-es';
-import { Swiper, SwiperSlide } from 'swiper/react';
-import { TabButton } from './TabButton';
-var UNDERLINE_GAP = 16;
-var DEFAULT_GAP = 8;
-var HorizontalTab = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'button-primary' : _b, _c = _a.size, size = _c === void 0 ? 'sm' : _c, activeTab = _a.activeTab, _d = _a.fullWidth, fullWidth = _d === void 0 ? false : _d, _e = _a.menus, menus = _e === void 0 ? [] : _e, className = _a.className;
-    var getTabGap = function (type) {
-        var _a;
-        var gap = {
-            underline: UNDERLINE_GAP,
-        };
-        return (_a = gap[type]) !== null && _a !== void 0 ? _a : DEFAULT_GAP;
-    };
-    if (!menus.length)
-        return null;
-    return (_jsx("div", __assign({ className: classNames('ncua-horizontal-tab', "ncua-horizontal-tab--".concat(type), "ncua-horizontal-tab--".concat(size), {
-            'ncua-horizontal-tab--fullWidth': fullWidth,
-        }, className) }, { children: _jsx(Swiper, __assign({ slidesPerView: "auto", spaceBetween: getTabGap(type) }, { children: menus.map(function (menu) {
-                var isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
-                return (_jsx(SwiperSlide, __assign({ className: "ncua-horizontal-tab__item" }, { children: _jsx(TabButton, __assign({}, menu, { isActive: isActive, tabButtonType: type, size: size })) }), uniqueId('horizontal-tab')));
-            }) })) })));
-};
-export { HorizontalTab };

package/dist/temp/src/components/tab/VerticalTab.js

@@ -1,32 +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 classNames from 'classnames';
-import { Select } from '../select/Select';
-import { TabButton } from './TabButton';
-export var VerticalTab = function (_a) {
-    var _b = _a.type, type = _b === void 0 ? 'button-primary' : _b, _c = _a.breakPoint, breakPoint = _c === void 0 ? 'pc' : _c, activeTab = _a.activeTab, menus = _a.menus, onSelect = _a.onSelect;
-    var handleSelectChange = function (e) {
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(e.target.value);
-    };
-    var optionItems = (menus === null || menus === void 0 ? void 0 : menus.map(function (menu) { return ({
-        id: menu.id || '',
-        label: menu.label || '',
-    }); })) || [];
-    if (breakPoint === 'mobile') {
-        return _jsx(Select, { value: activeTab, onChange: handleSelectChange, optionItems: optionItems, size: "md" });
-    }
-    return (_jsx("div", __assign({ className: classNames('ncua-vertical-tab', "ncua-vertical-tab--".concat(type)) }, { children: menus === null || menus === void 0 ? void 0 : menus.map(function (menu) {
-            var isActive = 'href' in menu && menu.href ? menu.href === activeTab : menu.id === activeTab;
-            return _jsx(TabButton, __assign({}, menu, { isActive: isActive, tabButtonType: type, size: "md" }), menu.id);
-        }) })));
-};

package/dist/types/src/components/input/index.d.ts

@@ -1,4 +0,0 @@
-export * from './InputBase';
-export * from './NumberInput';
-export * from './PasswordInput';
-export * from './Textarea';