@ncds/ui-admin 1.8.12 → 1.8.14

package/dist/temp/src/components/forms-and-input/select/Select.js

@@ -2,9 +2,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import classNames from 'classnames';
 import { forwardRef } from 'react';
 import { HintText } from '../../shared/hintText/HintText';
-export const Select = forwardRef(({ placeholder, disabledPlaceholder = false, id, className, hintText, children, size = 'xs', type = 'default', destructive = false, value, optionItems, register, disabled = false, ...props }, ref) => {
+export const Select = forwardRef(({ placeholder, disabledPlaceholder = false, id, className, hintText, children, size = 'xs', type = 'default', destructive = false, value, optionItems, register, disabled = false, readOnly = false, ...props }, ref) => {
     return (_jsxs("span", { className: classNames('ncua-select', {
             destructive: destructive,
             'ncua-select--simple': type === 'simple',
-        }, className, `ncua-select--${size}`), children: [_jsx("span", { className: "ncua-select__content", children: _jsxs("select", { value: value, ref: ref, id: id, className: classNames('ncua-select__tag', className), disabled: disabled, ...register, ...props, children: [placeholder && (_jsx("option", { value: "", disabled: disabledPlaceholder, children: placeholder })), optionItems?.map((item) => (_jsx("option", { value: item.id, children: item.label }, item.id))), children] }) }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText }))] }));
+            'ncua-select--readonly': readOnly,
+        }, className, `ncua-select--${size}`), children: [_jsx("span", { className: "ncua-select__content", children: _jsxs("select", { value: value, ref: ref, id: id, className: classNames('ncua-select__tag', className), disabled: disabled, "aria-readonly": readOnly, ...register, ...props, onKeyDown: (e) => {
+                        props.onKeyDown?.(e);
+                        // native select에는 readonly 속성이 없어 키보드로 값이 바뀐다.
+                        // 값 변경 키는 막고, Tab/Shift+Tab(포커스 이동)은 허용한다.
+                        if (readOnly && e.key !== 'Tab') {
+                            e.preventDefault();
+                        }
+                    }, children: [placeholder && (_jsx("option", { value: "", disabled: disabledPlaceholder, children: placeholder })), optionItems?.map((item) => (_jsx("option", { value: item.id, children: item.label }, item.id))), children] }) }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText }))] }));
 });

package/dist/temp/src/components/forms-and-input/select-box/SelectBox.d.ts

@@ -16,6 +16,7 @@ type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> &
     value?: OptionValue;
     onChange?: OptionChangeHandler;
     disabled?: boolean;
+    readOnly?: boolean;
     register?: UseFormRegisterReturn;
     maxHeight?: number;
     multiple?: boolean;

package/dist/temp/src/components/forms-and-input/select-box/SelectBox.js

@@ -40,7 +40,7 @@ function DisplayValue({ displayValue }) {
     }
     return (_jsxs("div", { className: "ncua-selectbox__value-container", children: [displayValue.icon && (_jsx("span", { className: "ncua-selectbox__value-icon", children: _jsx(displayValue.icon, { width: 16, height: 16 }) })), _jsx("span", { className: "ncua-selectbox__value-text", children: displayValue.label })] }));
 }
-const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceholder = false, hintText, size = 'xs', type = 'default', autoWidth = true, destructive = false, value, optionItems = [], disabled = false, maxHeight = DEFAULT_MAX_HEIGHT, multiple = false, maxSelection, align = 'left', usePortal, id, className, children, register, onChange, onEdit, onComplete, ...props }, ref
+const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceholder = false, hintText, size = 'xs', type = 'default', autoWidth = true, destructive = false, value, optionItems = [], disabled = false, readOnly = false, maxHeight = DEFAULT_MAX_HEIGHT, multiple = false, maxSelection, align = 'left', usePortal, id, className, children, register, onChange, onEdit, onComplete, ...props }, ref
 // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: 옵션/멀티/태그/포탈 등 필수 분기 통합
 ) => {
     const internalRef = useRef(null);
@@ -59,7 +59,7 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
         return selectedOption ? selectedOption : placeholder;
     }, [multiple, selectedOption, placeholder]);
     const handleOptionSelect = (option) => {
-        if (disabled)
+        if (disabled || readOnly)
             return;
         if (multiple) {
             const newValue = tryToggle(option.id, Array.isArray(value) ? value : []);
@@ -79,7 +79,7 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
         maxHeight,
         itemCount: optionItems.length,
         optionItems,
-        disabled,
+        disabled: disabled || readOnly,
         multiple,
         onSelect: handleOptionSelect,
     });
@@ -147,10 +147,11 @@ const SelectBox = forwardRef(({ placeholder = '선택하세요', disabledPlaceho
     return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: internalRef, className: classNames('ncua-selectbox', `ncua-selectbox--${size}`, {
                     'ncua-selectbox--open': isOpen,
                     'ncua-selectbox--disabled': disabled,
+                    'ncua-selectbox--readonly': readOnly,
                     'ncua-selectbox--simple': type === 'simple',
                     'ncua-selectbox--multiple': multiple,
                     destructive: destructive,
-                }, className), ...props, children: [_jsxs("div", { 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-${id || 'default'}`, "aria-disabled": disabled, "aria-label": selectedOption ? selectedOption.label : placeholder, "aria-activedescendant": activeDescendantId, children: [_jsxs("div", { className: "ncua-selectbox__content-inner", children: [_jsx("div", { 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', {
+                }, className), ...props, children: [_jsxs("div", { 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-${id || 'default'}`, "aria-disabled": disabled, "aria-readonly": readOnly, "aria-label": selectedOption ? selectedOption.label : placeholder, "aria-activedescendant": activeDescendantId, children: [_jsxs("div", { className: "ncua-selectbox__content-inner", children: [_jsx("div", { 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,
                                         }) })] }), !shouldPortal && selectDropdownNode] }), hintText && (_jsx(HintText, { destructive: destructive, className: "ncua-hint-text", children: hintText })), register && (_jsx("input", { type: "hidden", ...register, value: multiple ? JSON.stringify(value || []) : String(value || '') }))] }), selectedTags.length > 0 && (_jsx("div", { className: "ncua-selectbox__tags", children: selectedTags.map((tag) => (_jsx(Tag, { text: tag.label, size: "sm", close: true, onButtonClick: () => handleRemoveTag(tag.id) }, tag.id))) })), portaledDropdown] }));
 });

package/dist/temp/src/utils/__tests__/date-picker.test.d.ts

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

package/dist/temp/src/utils/__tests__/date-picker.test.js

@@ -0,0 +1,26 @@
+import moment from 'moment';
+import { describe, expect, it } from 'vitest';
+import { convertToMomentFormat } from '../date-picker';
+describe('convertToMomentFormat', () => {
+    it('날짜 전용 포맷을 moment 토큰으로 변환한다 (기존 동작 보존)', () => {
+        expect(convertToMomentFormat('Y-m-d')).toBe('YYYY-MM-DD');
+    });
+    it('2자리 연도(y)를 YY로 변환한다', () => {
+        expect(convertToMomentFormat('y-m-d')).toBe('YY-MM-DD');
+    });
+    it('시간 포함 포맷의 H/i/S를 모두 변환한다 (버그 수정 지점)', () => {
+        expect(convertToMomentFormat('Y-m-d H:i')).toBe('YYYY-MM-DD HH:mm');
+        expect(convertToMomentFormat('Y-m-d H:i:S')).toBe('YYYY-MM-DD HH:mm:ss');
+    });
+    it('월(m)과 분(i)이 함께 있어도 서로 침범하지 않는다', () => {
+        // m -> MM(월) 먼저, i -> mm(분) 나중 순서가 지켜져야 함
+        expect(convertToMomentFormat('Y-m-d H:i')).not.toContain('i');
+        expect(convertToMomentFormat('Y-m-d H:i')).toBe('YYYY-MM-DD HH:mm');
+    });
+    it('실제 moment 출력이 의도한 문자열과 일치한다 (회귀 핵심)', () => {
+        const date = moment('2024-03-20 14:30:05', 'YYYY-MM-DD HH:mm:ss').toDate();
+        expect(moment(date).format(convertToMomentFormat('Y-m-d'))).toBe('2024-03-20');
+        expect(moment(date).format(convertToMomentFormat('Y-m-d H:i'))).toBe('2024-03-20 14:30');
+        expect(moment(date).format(convertToMomentFormat('Y-m-d H:i:S'))).toBe('2024-03-20 14:30:05');
+    });
+});

package/dist/temp/src/utils/date-picker.d.ts

@@ -6,6 +6,8 @@ export declare function getSubtractDate({ date, period, unit, }: {
     period: DurationInputArg1;
     unit: DurationInputArg2;
 }): Date;
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+export declare const convertToMomentFormat: (format: string) => string;
 export declare const formatDateInput: (input: string) => string;
 export declare const formatHourInput: (input: string) => string;
 export declare const formatMinuteInput: (input: string) => string;

package/dist/temp/src/utils/date-picker.js

@@ -15,6 +15,19 @@ export function getToday() {
 export function getSubtractDate({ date = getToday(), period, unit, }) {
     return moment(date).subtract(period, unit).toDate();
 }
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+export const convertToMomentFormat = (format) => {
+    const tokenMap = {
+        Y: 'YYYY',
+        y: 'YY',
+        m: 'MM',
+        d: 'DD',
+        H: 'HH',
+        i: 'mm',
+        S: 'ss',
+    };
+    return format.replace(/[YymdHiS]/g, (matched) => tokenMap[matched] || matched);
+};
 export const formatDateInput = (input) => {
     const dateRegex = /^(19|20)\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[0-1])$/;
     if (dateRegex.test(input)) {

package/dist/types/src/components/data-display/data-grid/DataGrid.d.ts

@@ -3,6 +3,7 @@ import type { DataGridActionBarProps, DataGridFilterBarProps, DataGridPagination
 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;
+    showActionBar?: boolean | undefined;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     SearchFilter: {
         ({ children, className, ...rest }: DataGridSearchFilterProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/components/data-display/data-grid/DataGrid.types.d.ts

@@ -6,6 +6,7 @@ export type ActionBarAlign = 'left' | 'right' | 'space-between';
 export type DataGridProps = Omit<ComponentProps<'div'>, 'ref'> & {
     variant?: DataGridVariant;
     children: ReactNode;
+    showActionBar?: boolean;
 };
 export type DataGridSearchFilterProps = ComponentProps<'div'> & {
     children: ReactNode;

package/dist/types/src/components/forms-and-input/date-picker/__tests__/DatePicker.memo.test.d.ts

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

package/dist/types/src/components/forms-and-input/date-picker/__tests__/DatePicker.test.d.ts

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

package/dist/types/src/components/forms-and-input/select/Select.d.ts

@@ -7,6 +7,7 @@ export interface SelectProps extends Omit<ComponentPropsWithRef<'select'>, 'size
     disabledPlaceholder?: boolean;
     hintText?: string;
     destructive?: boolean;
+    readOnly?: boolean;
     size?: Extract<Size, 'xs' | 'sm' | 'md'>;
     optionItems?: OptionType[];
     register?: UseFormRegisterReturn;

package/dist/types/src/components/forms-and-input/select-box/SelectBox.d.ts

@@ -16,6 +16,7 @@ type SelectBoxProps = Omit<ComponentPropsWithRef<'div'>, 'size' | 'onChange'> &
     value?: OptionValue;
     onChange?: OptionChangeHandler;
     disabled?: boolean;
+    readOnly?: boolean;
     register?: UseFormRegisterReturn;
     maxHeight?: number;
     multiple?: boolean;

package/dist/types/src/utils/__tests__/date-picker.test.d.ts

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

package/dist/types/src/utils/date-picker.d.ts

@@ -6,6 +6,8 @@ export declare function getSubtractDate({ date, period, unit, }: {
     period: DurationInputArg1;
     unit: DurationInputArg2;
 }): Date;
+/** flatpickr dateFormat 토큰을 moment 포맷 토큰으로 변환 (단일 패스 치환으로 토큰 간 간섭 방지) */
+export declare const convertToMomentFormat: (format: string) => string;
 export declare const formatDateInput: (input: string) => string;
 export declare const formatHourInput: (input: string) => string;
 export declare const formatMinuteInput: (input: string) => string;

package/dist/ui-admin/assets/styles/style.css

@@ -3415,6 +3415,12 @@ button {
 .ncua-select__content:has(.ncua-select__tag:disabled) {
   border-color: var(--gray-200);
 }
+.ncua-select--readonly .ncua-select__tag {
+  pointer-events: none;
+  background-color: var(--gray-50);
+  color: var(--gray-700);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.25L7 8.75L10.5 5.25' stroke='%23a4a5a8' stroke-width='1.16667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+}
 .ncua-select.destructive .ncua-select__content {
   border-color: var(--primary-red-600);
 }
@@ -3644,7 +3650,7 @@ button {
   cursor: pointer;
   transition: all 0.15s ease-in-out;
 }
-.ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox__content) {
+.ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox__content):not(.ncua-selectbox--readonly .ncua-selectbox__content) {
   border-color: var(--gray-300);
 }
 .ncua-selectbox__content:focus {
@@ -3727,6 +3733,16 @@ button {
 .ncua-selectbox--disabled .ncua-selectbox__arrow {
   color: var(--gray-300);
 }
+.ncua-selectbox--readonly .ncua-selectbox__content {
+  background-color: var(--gray-50);
+  cursor: default;
+}
+.ncua-selectbox--readonly .ncua-selectbox__value {
+  color: var(--gray-700);
+}
+.ncua-selectbox--readonly .ncua-selectbox__arrow {
+  color: var(--gray-300);
+}
 .ncua-selectbox.destructive .ncua-selectbox__content {
   border-color: var(--primary-red-600);
 }
@@ -3791,7 +3807,7 @@ button {
   border: 0;
   background-color: transparent;
 }
-.ncua-selectbox--simple .ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox--simple .ncua-selectbox__content) {
+.ncua-selectbox--simple .ncua-selectbox__content:hover:not(.ncua-selectbox--disabled .ncua-selectbox--simple .ncua-selectbox__content):not(.ncua-selectbox--readonly .ncua-selectbox--simple .ncua-selectbox__content) {
   border-color: transparent;
 }
 .ncua-selectbox--simple .ncua-selectbox__content:focus {
@@ -6818,12 +6834,23 @@ button {
 .ncua-data-grid__table:first-child {
   border-radius: var(--border-radius-md) var(--border-radius-md) 0 0;
 }
+.ncua-data-grid__table:first-child .ncua-table {
+  border-top-left-radius: var(--border-radius-md);
+  border-top-right-radius: var(--border-radius-md);
+}
 .ncua-data-grid__table:last-child {
   border-radius: 0 0 var(--border-radius-md) var(--border-radius-md);
 }
+.ncua-data-grid__table:last-child .ncua-table {
+  border-bottom-left-radius: var(--border-radius-md);
+  border-bottom-right-radius: var(--border-radius-md);
+}
 .ncua-data-grid__table:first-child:last-child {
   border-radius: var(--border-radius-md);
 }
+.ncua-data-grid__table:first-child:last-child .ncua-table {
+  border-radius: var(--border-radius-md);
+}
 .ncua-data-grid__table .ncua-table-wrapper {
   border: none;
   box-shadow: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.12",
+  "version": "1.8.14",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",
@@ -105,6 +105,7 @@
     "eslint-config-react-app": "7.0.1",
     "file-loader": "6.2.0",
     "html-webpack-plugin": "5.6.6",
+    "jsdom": "26.1.0",
     "mini-css-extract-plugin": "2.10.1",
     "prop-types": "15.8.1",
     "react": "18.2.0",