@ncds/ui-admin 1.7.0 → 1.8.0

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

@@ -0,0 +1,165 @@
+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 = forwardRef(({ 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/temp/src/components/data-grid/DataGrid.d.ts

@@ -0,0 +1,28 @@
+import { type ReactNode } from 'react';
+import type { DataGridActionBarProps, DataGridFilterBarProps, DataGridPaginationProps, DataGridSearchFilterProps, DataGridSummaryProps, DataGridTableProps } from './DataGrid.types';
+export declare const DataGrid: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    variant?: import("./DataGrid.types").DataGridVariant | undefined;
+    children: ReactNode;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    SearchFilter: {
+        ({ children, className, ...rest }: DataGridSearchFilterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Summary: {
+        ({ children, className, ...rest }: DataGridSummaryProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    FilterBar: {
+        ({ children, className, ...rest }: DataGridFilterBarProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    ActionBar: {
+        ({ children, className, position, align, ...rest }: DataGridActionBarProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Table: import("react").ForwardRefExoticComponent<DataGridTableProps & import("react").RefAttributes<HTMLDivElement>>;
+    Pagination: {
+        ({ children, className, ...rest }: DataGridPaginationProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};

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

@@ -0,0 +1,88 @@
+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 = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ncua-data-grid__search-filter', className), ...rest, children: children }));
+SearchFilter.displayName = 'DataGrid.SearchFilter';
+const Summary = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ncua-data-grid__summary', className), ...rest, children: children }));
+Summary.displayName = 'DataGrid.Summary';
+const FilterBar = ({ children, className, ...rest }) => (_jsx("div", { className: classNames('ncua-data-grid__filter-bar', className), ...rest, children: children }));
+FilterBar.displayName = 'DataGrid.FilterBar';
+const ActionBar = ({ children, className, position = 'top', align = 'space-between', ...rest }) => (_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 = forwardRef(({ children, className, type = 'horizontal', fixedHeader, maxHeight, hoverable, selectable }, ref) => (_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 = ({ children, className, ...rest }) => (_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 (!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) => isValidElement(child) && child.props.selectable === true);
+// ──────────────────────────────────────────────
+// Main DataGrid component
+// ──────────────────────────────────────────────
+const DataGridComponent = forwardRef(({ variant = 'search-result', children, className, ...rest }, ref) => {
+    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/temp/src/components/data-grid/DataGrid.types.d.ts

@@ -0,0 +1,35 @@
+import type { ComponentProps, ReactNode } from 'react';
+import type { TableType } from '../table';
+export type DataGridVariant = 'search-result' | 'horizontal';
+export type ActionBarPosition = 'top' | 'bottom';
+export type ActionBarAlign = 'left' | 'right' | 'space-between';
+export type DataGridProps = Omit<ComponentProps<'div'>, 'ref'> & {
+    variant?: DataGridVariant;
+    children: ReactNode;
+};
+export type DataGridSearchFilterProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};
+export type DataGridSummaryProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};
+export type DataGridFilterBarProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};
+export type DataGridActionBarProps = Omit<ComponentProps<'div'>, 'ref'> & {
+    children: ReactNode;
+    position?: ActionBarPosition;
+    align?: ActionBarAlign;
+};
+export type DataGridTableProps = {
+    children: ReactNode;
+    className?: string;
+    type?: TableType;
+    fixedHeader?: boolean;
+    maxHeight?: string | number;
+    hoverable?: boolean;
+    selectable?: boolean;
+};
+export type DataGridPaginationProps = ComponentProps<'div'> & {
+    children: ReactNode;
+};

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

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

package/dist/temp/src/components/data-grid/index.d.ts

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

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

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

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

@@ -1,34 +1,11 @@
-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';
-var SVG_SIZE_XS = 14;
-var SVG_SIZE_SM = 16;
-var CustomInput = 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;
-    return (_jsxs(_Fragment, { children: [_jsx("input", __assign({ ref: ref, disabled: disabled, autoComplete: props.autoComplete || 'off' }, props)), _jsx("label", __assign({ className: "ncua-date-picker__ico", htmlFor: props.id }, { children: iconName === 'calendar' ? (_jsx(Calendar, { width: svgSize, height: svgSize })) : (_jsx(Clock, { width: svgSize, height: svgSize })) }))] }));
+const SVG_SIZE_XS = 14;
+const SVG_SIZE_SM = 16;
+const CustomInput = forwardRef(({ disabled, iconSize, iconName, ...props }, ref) => {
+    const svgSize = iconSize === 'xs' ? SVG_SIZE_XS : SVG_SIZE_SM;
+    return (_jsxs(_Fragment, { children: [_jsx("input", { ref: ref, disabled: disabled, autoComplete: props.autoComplete || 'off', ...props }), _jsx("label", { className: "ncua-date-picker__ico", htmlFor: props.id, children: iconName === 'calendar' ? (_jsx(Calendar, { width: svgSize, height: svgSize })) : (_jsx(Clock, { width: svgSize, height: svgSize })) })] }));
 });
 CustomInput.displayName = 'CustomInput';
 export { CustomInput };

package/dist/temp/src/components/date-picker/DatePicker.d.ts

@@ -1,7 +1,7 @@
-import type { Options } from 'flatpickr/dist/types/options';
+import type { DateOption, Options } from 'flatpickr/dist/types/options';
 import { type DateTimePickerHandle, type DateTimePickerProps } from 'react-flatpickr';
 import type { Size } from '../../../constant/size';
-type DatePickerProps = {
+export type DatePickerProps = {
     size?: Extract<Size, 'xs' | 'sm'>;
     shouldFocus?: boolean;
     currentDate: string;
@@ -10,15 +10,19 @@ type DatePickerProps = {
     placeholder?: string;
     isEndDate?: boolean;
     className?: string;
+    /**
+     * 캘린더를 body에 포탈 마운트합니다.
+     * overflow: auto/scroll/hidden이 적용된 스크롤 컨테이너 안에서
+     * 캘린더가 잘리는 문제를 해결합니다.
+     */
+    portal?: boolean;
     onChangeDate: (date: string) => void;
     onValidationError?: (error: {
         date: Date;
-        minDate?: any;
-        maxDate?: any;
+        minDate?: DateOption;
+        maxDate?: DateOption;
         violations: Array<'minDate' | 'maxDate'>;
         previousDate?: Date;
     }) => void;
 } & Omit<DateTimePickerProps, 'size' | 'options' | 'value'>;
-declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;
-export { DatePicker };
-export type { DatePickerProps };
+export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<DatePickerProps, "ref"> & import("react").RefAttributes<DateTimePickerHandle>>;