@ncds/ui-admin 1.8.22-alpha.2 → 1.8.22

package/dist/temp/src/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,2 +1,2 @@
-import { useEffect } from 'react';
-export declare const useIsomorphicLayoutEffect: typeof useEffect;
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/dist/types/assets/scripts/table/scrollbar/const.d.ts

@@ -0,0 +1,46 @@
+/** Table 커스텀 스크롤바의 클래스명·속성명·수치 상수. React 와 CDN 이 함께 참조한다. */
+/** `_table.scss` 의 `--ncua-table-header-height` 와 같은 값 */
+export declare const TABLE_HEADER_HEIGHT = 40;
+/** `.ncua-table__scrollbar-thumb { height }` 와 같은 값 */
+export declare const SCROLLBAR_THUMB_MIN_HEIGHT = 40;
+/** `.ncua-table__h-scrollbar-thumb { width }` 와 같은 값 */
+export declare const H_SCROLLBAR_THUMB_MIN_WIDTH = 40;
+/** `.ncua-table__h-scrollbar { left/right: var(--spacing-s) }` 와 같은 값 */
+export declare const H_SCROLLBAR_SIDE_GAP = 8;
+/** 세로 트랙 상하 여백 합계. 헤더 회피분은 `TABLE_HEADER_HEIGHT` 로 따로 뺀다 */
+export declare const SCROLLBAR_TRACK_OFFSET = 16;
+export declare const SCROLLBAR_CLASS_NAMES: {
+    readonly table: "ncua-table";
+    readonly tableWrapper: "ncua-table-wrapper";
+    readonly dataGrid: "ncua-data-grid";
+    readonly scrollArea: "ncua-table__scroll-area";
+    readonly scrollContainer: "ncua-table__scroll-container";
+    readonly scrollbar: "ncua-table__scrollbar";
+    readonly scrollbarThumb: "ncua-table__scrollbar-thumb";
+    readonly hScrollContainer: "ncua-table__h-scroll-container";
+    readonly hScrollInner: "ncua-table__h-scroll-inner";
+    readonly hScrollbar: "ncua-table__h-scrollbar";
+    readonly hScrollbarThumb: "ncua-table__h-scrollbar-thumb";
+    readonly tableElement: "ncua-table__table";
+};
+/** `optOut` 을 제외한 전부가 런타임에만 부착된다. 마크업에 직접 기재하지 않는다. */
+export declare const SCROLLBAR_ATTRS: {
+    readonly ready: "data-scrollbar-ready";
+    /** `ready` 와 항상 함께 부착·제거한다 */
+    readonly owner: "data-scrollbar-owner";
+    readonly generated: "data-scrollbar-generated";
+    readonly fallbackArmed: "data-ncua-scrollbar-fallback";
+    readonly dragging: "data-dragging";
+    readonly optOut: "data-ncua-scrollbar";
+};
+export declare const SCROLLBAR_OWNERS: {
+    readonly cdn: "cdn";
+    readonly react: "react";
+};
+export type ScrollbarOwner = (typeof SCROLLBAR_OWNERS)[keyof typeof SCROLLBAR_OWNERS];
+export declare const SCROLLBAR_OWNER_VALUES: readonly string[];
+export declare const OPT_OUT_VALUE = "off";
+export declare const AXIS_VALUES: readonly ["both", "x", "y"];
+export type ScrollbarAxisOption = (typeof AXIS_VALUES)[number];
+export declare const DEFAULT_AXIS: ScrollbarAxisOption;
+export declare const LOG_PREFIX = "[ncua.TableScrollbar]";

package/dist/types/assets/scripts/table/scrollbar/drag.d.ts

@@ -0,0 +1,18 @@
+/** React 합성 이벤트와 DOM 이벤트를 함께 받기 위한 최소 표면 */
+export type DragPointerEvent = {
+    readonly clientX: number;
+    readonly clientY: number;
+    preventDefault: () => void;
+};
+export type ThumbDragInput = {
+    readonly axis: 'x' | 'y';
+    readonly scrollEl: HTMLElement;
+    readonly thumbEl: HTMLElement;
+    /** `[data-dragging]` 부착 대상 */
+    readonly draggingTarget: HTMLElement;
+    /** `DRAG_BASIS` 기준 길이. 축별 산출식이 달라 호출자가 넘긴다 */
+    readonly measureDragBasisSize: (clientSize: number) => number;
+    /** 바인딩 해제 시 진행 중인 드래그를 함께 끊는 신호 */
+    readonly releaseSignal?: AbortSignal;
+};
+export declare const startThumbDrag: (event: DragPointerEvent, input: ThumbDragInput) => void;

package/dist/types/assets/scripts/table/scrollbar/geometry.d.ts

@@ -0,0 +1,47 @@
+/**
+ * 썸 치수·위치 산출. React 훅과 CDN 바인딩이 공유한다.
+ * SSR 경로에서도 평가되므로 `document`·`window` 를 참조하지 않는다.
+ */
+export type AxisMetrics = {
+    readonly scrollOffset: number;
+    readonly scrollSize: number;
+    readonly clientSize: number;
+    readonly trackSize: number;
+    readonly thumbMinSize: number;
+};
+export type ThumbGeometry = {
+    /** `false` 이면 트랙·썸을 감춘다 */
+    readonly visible: boolean;
+    readonly size: number;
+    /** 트랙 기준 썸 오프셋 (px) */
+    readonly offset: number;
+};
+export declare const computeThumbGeometry: (metrics: AxisMetrics) => ThumbGeometry;
+/** 호출자가 넘겨야 하는 축별 `dragBasisSize` 기준 */
+export declare const DRAG_BASIS: {
+    readonly y: "clientSize";
+    readonly x: "trackSize";
+};
+export type DragScrollDeltaInput = {
+    readonly pointerDelta: number;
+    readonly scrollSize: number;
+    readonly clientSize: number;
+    readonly dragBasisSize: number;
+    readonly thumbSize: number;
+};
+/**
+ * 포인터 이동량(px) → 스크롤 오프셋 변화량(px).
+ * 환산 분모 기준이 축마다 다르므로 `dragBasisSize` 는 호출자가 `DRAG_BASIS` 대로 넘긴다.
+ */
+export declare const computeDragScrollDelta: (input: DragScrollDeltaInput) => number;
+export type HorizontalTrackBoxInput = {
+    readonly clientWidth: number;
+    readonly scrollLeft: number;
+    readonly sideGap: number;
+};
+export type HorizontalTrackBox = {
+    readonly translateX: number;
+    readonly width: number;
+};
+/** 가로 트랙은 스크롤 컨테이너 안에 있어 함께 밀리므로, 되돌릴 오프셋과 폭을 산출한다. */
+export declare const computeHorizontalTrackBox: (input: HorizontalTrackBoxInput) => HorizontalTrackBox;

package/dist/types/assets/scripts/table/scrollbar/isolate.d.ts

@@ -0,0 +1,4 @@
+/** 스크롤·리사이즈는 초당 수십 회 불리므로 같은 지점의 실패는 1회만 기록한다 */
+export declare const isolate: <A extends readonly unknown[]>(label: string, run: (...args: A) => void) => (...args: A) => void;
+/** 1회성 호출용. 실패해도 나머지 정리·순회가 이어지도록 한다 */
+export declare const runIsolated: (label: string, run: () => void) => void;

package/dist/types/src/components/data-display/table/__tests__/useTableScrollbars.characterisation.test.d.ts

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

package/dist/types/src/components/data-display/table/__tests__/useTableScrollbars.regression.test.d.ts

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

package/dist/types/src/components/data-display/table/useTableScrollbars.d.ts

@@ -1,9 +1,6 @@
 import { type MouseEvent, type RefObject } from 'react';
-export declare const TABLE_HEADER_HEIGHT = 40;
-export declare const SCROLLBAR_THUMB_MIN_HEIGHT = 40;
-export declare const H_SCROLLBAR_THUMB_MIN_WIDTH = 40;
-export declare const H_SCROLLBAR_SIDE_GAP = 8;
-export declare const SCROLLBAR_TRACK_OFFSET = 16;
+import { H_SCROLLBAR_SIDE_GAP, H_SCROLLBAR_THUMB_MIN_WIDTH, SCROLLBAR_THUMB_MIN_HEIGHT, SCROLLBAR_TRACK_OFFSET, TABLE_HEADER_HEIGHT } from '../../../../assets/scripts/table/scrollbar/const';
+export { H_SCROLLBAR_SIDE_GAP, H_SCROLLBAR_THUMB_MIN_WIDTH, SCROLLBAR_THUMB_MIN_HEIGHT, SCROLLBAR_TRACK_OFFSET, TABLE_HEADER_HEIGHT, };
 type VerticalScrollbarOptions = {
     enabled: boolean;
     layoutKey: unknown;
@@ -24,4 +21,3 @@ type HorizontalScrollbarOptions = {
 export declare const useTableHorizontalScrollbar: ({ enabled, hScrollContainerRef, hScrollbarRef, hThumbRef, }: HorizontalScrollbarOptions) => {
     handleHThumbMouseDown: (e: MouseEvent<HTMLDivElement>) => void;
 };
-export {};

package/dist/types/src/components/feedback-and-status/badge/Badge.d.ts

@@ -16,4 +16,4 @@ type BadgeProps = {
 };
 declare const Badge: ({ label, type, color, className, leadingIcon, trailingIcon, size, }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
 export { Badge };
-export type { BadgeColor, BadgeProps, BadgeSize, BadgeType };
+export type { BadgeType, BadgeColor, BadgeSize, BadgeProps };

package/dist/types/src/components/overlays/modal/Modal.d.ts

@@ -12,14 +12,12 @@ type ModalProps = {
     children: ReactNode;
     closeOnBackdropClick?: boolean;
     closeOnEsc?: boolean;
-    showHeaderDivider?: boolean;
-    showActionsDivider?: boolean;
     className?: string;
     zIndex?: number;
 };
 declare const Modal: {
-    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, showHeaderDivider, showActionsDivider, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
-    Header({ children, onClose, featuredIcon, title, subtitle, align, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
+    ({ isOpen, onClose, children, size, closeOnBackdropClick, closeOnEsc, className, zIndex, ...restProps }: ModalProps): import("react").ReactPortal | null;
+    Header({ children, onClose, featuredIcon, title, subtitle, align, showDivider, hideCloseButton, }: ModalHeaderProps): import("react/jsx-runtime").JSX.Element;
     Content({ children, className }: ModalContentProps): import("react/jsx-runtime").JSX.Element;
     /**
      * Modal.Actions - The actions area of the modal
@@ -49,7 +47,7 @@ declare const Modal: {
      *   <Button size="sm" label="Confirm" onClick={handleConfirm} hierarchy="primary" />
      * </Modal.Actions>
      */
-    Actions({ children, layout, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
+    Actions({ children, layout, showDivider, align, checkboxContent, className, }: ModalActionsProps): import("react/jsx-runtime").JSX.Element;
 };
 type ModalHeaderProps = {
     children?: ReactNode;
@@ -62,6 +60,7 @@ type ModalHeaderProps = {
     align?: ModalHeaderAlign;
     title?: string | ReactNode;
     subtitle?: string | ReactNode;
+    showDivider?: boolean;
     hideCloseButton?: boolean;
 };
 type ModalContentProps = {
@@ -72,6 +71,7 @@ type ModalActionsProps = {
     className?: string;
     children: ReactNode;
     layout?: ModalActionsLayout;
+    showDivider?: boolean;
     align?: ModalActionsAlign;
     checkboxContent?: ReactNode;
 };

package/dist/types/src/hooks/useIsomorphicLayoutEffect.d.ts

@@ -1,2 +1,2 @@
-import { useEffect } from 'react';
-export declare const useIsomorphicLayoutEffect: typeof useEffect;
+import { useLayoutEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

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

@@ -67,6 +67,9 @@
   --shadow-xs-focused-3px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #ffeaee;
   --shadow-xs-focused-3px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #f2f4f7;
   --shadow-xs-focused-3px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 3px #fee4e2;
+  --shadow-xs-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
+  --shadow-xs-focused-4px-gray-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #f2f4f7;
+  --shadow-xs-focused-4px-error-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #fee4e2;
   --shadow-sm: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f;
   --shadow-sm-focused-4px-primary-100: 0px 1px 2px 0px #1018280d, 0px 0px 0px 4px #ffeaee;
   --shadow-sm-focused-4px-gray-100: 0px 1px 3px 0px #1018281a, 0px 1px 2px 0px #1018280f, 0px 0px 0px 4px #f2f4f7;
@@ -324,7 +327,7 @@ button {
   background-color: var(--primary-red-450);
   border: 1px solid var(--primary-red-500);
   color: var(--base-white);
-  box-shadow: var(--shadow-sm-focused-4px-primary-100);
+  box-shadow: var(--shadow-xs-focused-4px-primary-100);
 }
 .ncua-btn--primary:disabled, .ncua-btn--primary.is-disable {
   background-color: var(--primary-red-100);
@@ -370,7 +373,7 @@ button {
   background-color: var(--base-white);
   border: 1px solid var(--gray-200);
   color: var(--gray-700);
-  box-shadow: var(--shadow-sm-focused-4px-gray-100);
+  box-shadow: var(--shadow-xs-focused-4px-gray-100);
 }
 .ncua-btn--secondary-gray:disabled, .ncua-btn--secondary-gray.is-disable {
   background-color: var(--base-white);
@@ -956,7 +959,7 @@ button {
 }
 .ncua-checkbox-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-checkbox-input:hover {
   border-color: var(--gray-600);
@@ -1737,7 +1740,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input.destructive:where(:focus-within) .ncua-input__field {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-input.is-disabled .ncua-input__content > :not(button) {
   background-color: var(--gray-50);
@@ -1927,7 +1930,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-input--textarea.destructive textarea:focus {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 
 .ncua-input--textarea--xs textarea {
@@ -2075,20 +2078,6 @@ button {
   }
 }
 
-.ncua-modal--divider-header .ncua-modal__header {
-  border-block-end: 1px solid var(--gray-100);
-}
-.ncua-modal--divider-header .ncua-modal__content {
-  padding-block-start: 16px;
-}
-
-.ncua-modal--divider-actions .ncua-modal__actions-wrapper {
-  border-block-start: 1px solid var(--gray-100);
-}
-.ncua-modal--divider-actions .ncua-modal__content {
-  padding-block-end: 16px;
-}
-
 .ncua-modal__header {
   padding: 0px 20px 16px;
   border-bottom: none;
@@ -2097,6 +2086,12 @@ button {
   flex-direction: column;
   gap: 8px;
 }
+.ncua-modal__header-divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--gray-100);
+  margin: 0 0 16px;
+}
 .ncua-modal__header:has(.ncua-modal__close-button) {
   padding-right: 48px;
 }
@@ -2189,6 +2184,12 @@ button {
   display: flex;
   gap: 8px;
 }
+.ncua-modal__actions-divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--gray-100);
+  margin: 16px 0 0;
+}
 .ncua-modal__actions--vertical {
   flex-direction: column;
 }
@@ -2265,8 +2266,8 @@ button {
   }
 }
 
-.ncua-modal--divider-header:has(.ncua-postcode-search-modal) .ncua-modal__content {
-  padding-block-start: 0;
+.ncua-modal:has(.ncua-postcode-search-modal) .ncua-modal__header-divider {
+  margin: 0;
 }
 
 .ncua-modal__content:has(.ncua-postcode-search-modal) {
@@ -3183,7 +3184,7 @@ button {
 }
 .ncua-radio-input.destructive :where(input):focus {
   border-color: var(--primary-red-600);
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 
 .ncua-radio-field {
@@ -3685,7 +3686,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-select.destructive .ncua-select__content:focus-within {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-select--xs .ncua-select__content {
   height: var(--select-height-xs);
@@ -4026,7 +4027,7 @@ button {
   border-color: var(--primary-red-600);
 }
 .ncua-selectbox.destructive .ncua-selectbox__content:focus {
-  box-shadow: var(--shadow-sm-focused-4px-error-100);
+  box-shadow: var(--shadow-xs-focused-4px-error-100);
 }
 .ncua-selectbox--xs .ncua-selectbox__content {
   height: var(--select-height-xs);
@@ -5319,16 +5320,15 @@ button {
   justify-content: center;
   color: var(--pink-600);
   background-color: var(--pink-200);
+  border-radius: 5px;
 }
 .ncua-badge--new-badge-sm {
   width: 16px;
   height: 16px;
-  border-radius: 3px;
 }
 .ncua-badge--new-badge-md {
   width: 20px;
   height: 20px;
-  border-radius: 4px;
 }
 
 .ncua-badge-group {
@@ -6590,7 +6590,7 @@ button {
   bottom: 0;
   width: 3px;
   background: var(--base-black);
-  z-index: var(--z-index-1);
+  z-index: 1;
 }
 .ncua-table__row--warning.ncua-table__row--selected:nth-child(n) {
   background: var(--orange-50);
@@ -6735,7 +6735,7 @@ button {
 .ncua-table--fixed-header .ncua-table__header-cell {
   position: sticky;
   top: 0;
-  z-index: var(--z-index-sticky);
+  z-index: 10;
   padding: 0 var(--spacing-m);
   height: var(--ncua-table-header-height);
 }
@@ -6972,6 +6972,35 @@ button {
   z-index: 2;
 }
 
+[data-ncua-scrollbar-fallback] .ncua-table__h-scroll-container:not([data-scrollbar-ready]),
+[data-ncua-scrollbar-fallback] .ncua-table__scroll-container:not([data-scrollbar-ready]) {
+  scrollbar-width: thin;
+  scrollbar-color: var(--gray-300) transparent;
+}
+[data-ncua-scrollbar-fallback] .ncua-table__h-scroll-container:not([data-scrollbar-ready])::-webkit-scrollbar,
+[data-ncua-scrollbar-fallback] .ncua-table__scroll-container:not([data-scrollbar-ready])::-webkit-scrollbar {
+  display: block;
+  width: 8px;
+  height: 8px;
+}
+[data-ncua-scrollbar-fallback] .ncua-table__h-scroll-container:not([data-scrollbar-ready])::-webkit-scrollbar-thumb,
+[data-ncua-scrollbar-fallback] .ncua-table__scroll-container:not([data-scrollbar-ready])::-webkit-scrollbar-thumb {
+  background: var(--gray-300);
+  border-radius: var(--border-radius-md);
+}
+
+[data-ncua-scrollbar-fallback] .ncua-table__h-scroll-container:not([data-scrollbar-ready]) > .ncua-table__h-scrollbar {
+  display: none;
+}
+
+[data-ncua-scrollbar-fallback] .ncua-table__scroll-area:not(:has(> .ncua-table__scroll-container[data-scrollbar-ready])) > .ncua-table__scrollbar {
+  display: none;
+}
+
+[data-ncua-scrollbar-fallback] .ncua-table:not(:has(.ncua-table__scroll-container[data-scrollbar-ready])) > .ncua-table__scrollbar {
+  display: none;
+}
+
 .ncua-table-dnd-preview {
   position: fixed;
   top: -9999px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncds/ui-admin",
-  "version": "1.8.22-alpha.2",
+  "version": "1.8.22",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",