@ncds/ui-admin 1.8.22-alpha.1 → 1.8.22-alpha.3

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/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

@@ -3900,6 +3900,7 @@ button {
 .ncua-selectbox {
   position: relative;
   display: inline-block;
+  max-width: 100%;
 }
 .ncua-selectbox__content {
   position: relative;
@@ -3918,12 +3919,21 @@ button {
   border-color: var(--gray-400);
   box-shadow: var(--shadow-xs-focused-3px-gray-100);
 }
+.ncua-selectbox__content-inner {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+}
 .ncua-selectbox__value {
   flex: 1;
+  min-width: 0;
+  color: var(--gray-700);
   overflow: hidden;
+  display: block;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: var(--gray-700);
+  word-wrap: break-word;
 }
 .ncua-selectbox__value:empty::before {
   content: attr(data-placeholder);
@@ -3933,9 +3943,18 @@ button {
   display: flex;
   align-items: center;
   gap: 4px;
+  min-width: 0;
+}
+.ncua-selectbox__value-text {
+  overflow: hidden;
+  display: block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: break-word;
 }
 .ncua-selectbox__value-icon {
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   color: currentColor;
@@ -6953,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.1",
+  "version": "1.8.22-alpha.3",
   "description": "nhn-commerce의 어드민 디자인 시스템입니다.",
   "scripts": {
     "barrel": "node barrel.js",