sellmate-design-system-react 9.0.0-beta.18 → 9.0.0-beta.19

package/README.md

@@ -327,6 +327,11 @@ export default [
 { name: 'title', label: '상품명', field: 'title', autoWidth: true, render: r => r.title }
 ```
 
+검사 대상은 `name`(문자열 리터럴) · `label` 에 더해 **`field` 또는 `autoWidth` 를 가진 객체**입니다.
+검색 필터 필드나 상세 모달의 키-값 필드가 컬럼과 같은 `{ name, label, ... }` 모양이라, 그 둘만으로
+판정하면 표와 무관한 객체가 대부분 걸리기 때문입니다. 대신 `{ ...base, name, label }` 처럼 `field` 가
+스프레드로 들어오는 컬럼은 보고하지 않습니다 — 정적으로 필터 필드와 구분되지 않습니다.
+
 예외는 컬럼 `name` 을 `allow` 로 지정해 뺍니다.
 
 ```js

package/dist/components/SChipFilter/README.md

@@ -331,7 +331,6 @@ export interface SChipFilterDatePreset {
 - [SIcon](../SIcon)
 - [SRadio](../SRadio)
 - [SRadioButton](../SRadioButton)
-- [SSelect](../SSelect)
 - [STag](../STag)
 - [STextLink](../STextLink)
 - [STooltip](../STooltip)
@@ -346,7 +345,6 @@ graph TD;
   SChipFilter --> SIcon
   SChipFilter --> SRadio
   SChipFilter --> SRadioButton
-  SChipFilter --> SSelect
   SChipFilter --> STag
   SChipFilter --> STextLink
   SChipFilter --> STooltip

package/dist/components/SDraggableItem/README.md

@@ -12,6 +12,7 @@
 | `supportingText?` | `SDraggableItemSlot` | — | 제목을 보조하는 텍스트 |
 | `supportingTextPosition?` | `SDraggableItemSupportingTextPosition` | `'right'` | 보조 텍스트 위치 |
 | `trailing?` | `SDraggableItemSlot` | — | 타이틀 뒤에 표시할 태그/콘텐츠 |
+| `depth?` | `number` | `1` | 중첩 단계. `SListItem`·`SExpansionItem` 과 같은 들여쓰기 간격을 사용한다 |
 | `accentStripe?` | `boolean` | `false` | 아이템 왼쪽 accent stripe 표시 여부 |
 | `bordered?` | `boolean` | `false` | 외곽 테두리 사용 여부 |
 | `selected?` | `boolean` | `false` | 선택 상태 여부 |

package/dist/components/SDraggableItem/SDraggableItem.d.ts

@@ -17,6 +17,8 @@ export interface SDraggableItemProps extends Omit<HTMLAttributes<HTMLDivElement>
     supportingTextPosition?: SDraggableItemSupportingTextPosition;
     /** 타이틀 뒤에 표시할 태그/콘텐츠 */
     trailing?: SDraggableItemSlot;
+    /** 중첩 단계. `SListItem`·`SExpansionItem` 과 같은 들여쓰기 간격을 사용한다 */
+    depth?: number;
     /** 아이템 왼쪽 accent stripe 표시 여부 */
     accentStripe?: boolean;
     /** 외곽 테두리 사용 여부 */

package/dist/components/SDraggableList/README.md

@@ -28,6 +28,10 @@
 | `selectedKey?` | `string` | — | 외부에서 제어하는 selected 아이템 key |
 | `defaultSelectedKey?` | `string` | — | 초기 selected 아이템 key |
 | `getDisabled?` | `(item: T, index: number) => boolean` | — | disabled 아이템은 선택 및 드래그에서 제외 |
+| `getDepth?` | `(item: T, index: number) => number` | — | 아이템의 중첩 단계. 기본값은 1 |
+| `setDepth?` | `(item: T, depth: number) => T` | — | depth 변경이 필요한 드롭에서 다음 아이템을 만드는 함수 |
+| `getCanHaveChildren?` | `(item: T, index: number) => boolean` | — | 하위 depth 를 가질 수 있는 아이템인지 판정 |
+| `maxDepth?` | `number` | `3` | 허용할 최대 depth |
 | `listId?` | `string` | — | Provider 안에서 사용할 리스트 식별자 |
 | `group?` | `string` | — | 같은 group 값을 가진 리스트끼리 드래그 이벤트를 공유 |
 
@@ -67,6 +71,7 @@ export interface SDraggableGroupMoveEvent {
 export interface SDraggableListRenderState {
   onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
   selected: boolean;
+  depth: number;
 }
 ```
 

package/dist/components/SDraggableList/SDraggableList.d.ts

@@ -3,7 +3,9 @@ import { type SListProps } from '../SList';
 export interface SDraggableListRenderState {
     onDragHandleMouseDown: (event: MouseEvent<HTMLDivElement>) => void;
     selected: boolean;
+    depth: number;
 }
+export type SDraggableListDropIntent = 'before' | 'inside' | 'after';
 export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'onChange'> {
     /** 현재 순서대로 렌더링할 아이템 목록 */
     items: T[];
@@ -21,6 +23,14 @@ export interface SDraggableListProps<T> extends Omit<SListProps, 'children' | 'o
     onSelectedKeyChange?: (key: string) => void;
     /** disabled 아이템은 선택 및 드래그에서 제외 */
     getDisabled?: (item: T, index: number) => boolean;
+    /** 아이템의 중첩 단계. 기본값은 1 */
+    getDepth?: (item: T, index: number) => number;
+    /** depth 변경이 필요한 드롭에서 다음 아이템을 만드는 함수 */
+    setDepth?: (item: T, depth: number) => T;
+    /** 하위 depth 를 가질 수 있는 아이템인지 판정 */
+    getCanHaveChildren?: (item: T, index: number) => boolean;
+    /** 허용할 최대 depth */
+    maxDepth?: number;
     /** Provider 안에서 사용할 리스트 식별자 */
     listId?: string;
     /** 같은 group 값을 가진 리스트끼리 드래그 이벤트를 공유 */

package/dist/components/SDraggableList/index.d.ts

@@ -1,2 +1,2 @@
-export { SDraggableList, type SDraggableListProps, type SDraggableListRenderState, } from './SDraggableList';
+export { SDraggableList, type SDraggableListDropIntent, type SDraggableListProps, type SDraggableListRenderState, } from './SDraggableList';
 export { SDraggableProvider, SDraggableGroup, type SDraggableGroupMoveEvent, type SDraggableGroupProps, type SDraggableProviderProps, } from './SDraggableGroup';

package/dist/index.cjs

@@ -3491,6 +3491,7 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
     supportingText,
     supportingTextPosition,
     trailing,
+    depth,
     accentStripe,
     bordered,
     selected,
@@ -3502,6 +3503,7 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
     dragHandleProps,
     onDragHandleMouseDown,
     className,
+    style,
     ...rest
   }, ref) {
     const renderState = { hovered, dragging, disabled };
@@ -3511,12 +3513,19 @@ var SDraggableItemView = /* @__PURE__ */ react.forwardRef(
     const trailingNode = renderSlot(trailing, renderState);
     const titleTypo = size === "sm" ? selected ? "typo-item-sm-selected" : "typo-item-sm-default" : selected ? "typo-item-md-selected" : "typo-item-md-default";
     const paddingYClass = dense ? size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-dense)" : "py-(--cmp-listDraggableItem-paddingY-md-dense)" : size === "sm" ? "py-(--cmp-listDraggableItem-paddingY-sm-normal)" : "py-(--cmp-listDraggableItem-paddingY-md-normal)";
+    const normalizedDepth = Math.max(1, Math.floor(depth));
+    const depthOffset = (normalizedDepth - 1) * 20;
+    const depthStyle = depthOffset === 0 ? style : {
+      ...style,
+      paddingLeft: `calc(var(--cmp-listDraggableItem-paddingX) + ${depthOffset}px)`
+    };
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         "aria-disabled": disabled || void 0,
         "data-dragging": dragging || void 0,
+        style: depthStyle,
         className: cn(
           "relative flex w-full items-center gap-(--cmp-listDraggableItem-gap) overflow-hidden px-(--cmp-listDraggableItem-paddingX)",
           titleTypo,
@@ -3605,6 +3614,7 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
   supportingText,
   supportingTextPosition = "right",
   trailing,
+  depth = 1,
   accentStripe = false,
   bordered = false,
   selected = false,
@@ -3678,6 +3688,7 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
         supportingText,
         supportingTextPosition,
         trailing,
+        depth,
         accentStripe,
         bordered,
         selected,
@@ -3713,6 +3724,7 @@ var SDraggableItemImpl = /* @__PURE__ */ react.forwardRef(function SDraggableIte
               supportingText,
               supportingTextPosition,
               trailing,
+              depth,
               accentStripe,
               bordered,
               selected,
@@ -3962,6 +3974,42 @@ function reorder(items, fromIndex, toIndex) {
   nextItems.splice(toIndex, 0, movedItem);
   return nextItems;
 }
+function clampDepth(depth, maxDepth) {
+  return Math.max(1, Math.min(maxDepth, Math.floor(depth)));
+}
+function getSubtreeEnd(items, startIndex, getDepth) {
+  const startDepth = getDepth(items[startIndex], startIndex);
+  let endIndex = startIndex + 1;
+  while (endIndex < items.length && getDepth(items[endIndex], endIndex) > startDepth) {
+    endIndex += 1;
+  }
+  return endIndex;
+}
+function getInsertionIndex(items, target, getDepth) {
+  if (target.intent === "before") return target.index;
+  if (target.intent === "inside") return target.index + 1;
+  return getSubtreeEnd(items, target.index, getDepth);
+}
+function moveWithDepth(items, fromIndex, target, getDepth, setDepth, maxDepth) {
+  const fromEndIndex = getSubtreeEnd(items, fromIndex, getDepth);
+  if (target.index >= fromIndex && target.index < fromEndIndex) return items;
+  const movedItems = items.slice(fromIndex, fromEndIndex);
+  const remainingItems = [...items.slice(0, fromIndex), ...items.slice(fromEndIndex)];
+  const rawInsertionIndex = getInsertionIndex(items, target, getDepth);
+  const insertionIndex = rawInsertionIndex > fromIndex ? rawInsertionIndex - movedItems.length : rawInsertionIndex;
+  const sourceDepth = getDepth(items[fromIndex], fromIndex);
+  const targetDepth = getDepth(items[target.index], target.index);
+  const nextDepth = target.intent === "inside" ? targetDepth + 1 : targetDepth;
+  const depthDelta = clampDepth(nextDepth, maxDepth) - sourceDepth;
+  const nextMovedItems = setDepth && depthDelta !== 0 ? movedItems.map(
+    (item, index) => setDepth(item, clampDepth(getDepth(item, fromIndex + index) + depthDelta, maxDepth))
+  ) : movedItems;
+  return [
+    ...remainingItems.slice(0, insertionIndex),
+    ...nextMovedItems,
+    ...remainingItems.slice(insertionIndex)
+  ];
+}
 function SDraggableListInner({
   items,
   getKey,
@@ -3971,6 +4019,10 @@ function SDraggableListInner({
   defaultSelectedKey,
   onSelectedKeyChange,
   getDisabled,
+  getDepth,
+  setDepth,
+  getCanHaveChildren,
+  maxDepth = 3,
   listId,
   group: groupName,
   useGap,
@@ -3980,19 +4032,24 @@ function SDraggableListInner({
   const dragContext = useSDraggableGroup();
   const dragGroup = groupName ?? dragContext?.defaultGroup;
   const [draggingIndex, setDraggingIndex] = react.useState(null);
-  const [dropIndex, setDropIndex] = react.useState(null);
+  const [dropTarget, setDropTarget] = react.useState(null);
   const [internalSelectedKey, setInternalSelectedKey] = react.useState(
     defaultSelectedKey
   );
   const listRef = react.useRef(null);
   const fromIndexRef = react.useRef(null);
   const currentSelectedKey = selectedKey ?? internalSelectedKey;
+  const usesDepth = getDepth != null;
   const startDrag = react.useCallback((event, index) => {
     event.preventDefault();
     fromIndexRef.current = index;
     setDraggingIndex(index);
-    setDropIndex(index);
+    setDropTarget({ index, intent: "before" });
   }, []);
+  const readDepth = react.useCallback(
+    (item, index) => clampDepth(getDepth?.(item, index) ?? 1, maxDepth),
+    [getDepth, maxDepth]
+  );
   react.useEffect(() => {
     if (dragContext || draggingIndex == null) return void 0;
     const handleMouseMove = (event) => {
@@ -4000,25 +4057,65 @@ function SDraggableListInner({
         "[data-draggable-list-item]"
       );
       if (!itemElements) return;
-      let nextDropIndex = items.length;
-      itemElements.forEach((itemElement, index) => {
+      let nextDropTarget = items.length === 0 ? { index: 0, intent: "before" } : { index: items.length - 1, intent: "after" };
+      const draggingEndIndex = usesDepth && draggingIndex != null ? getSubtreeEnd(items, draggingIndex, readDepth) : draggingIndex + 1;
+      let previousDropIndex = null;
+      for (let index = 0; index < itemElements.length; index += 1) {
+        const itemElement = itemElements[index];
         const rect = itemElement.getBoundingClientRect();
-        if (event.clientY < rect.top + rect.height / 2 && nextDropIndex === items.length) {
-          nextDropIndex = index;
+        if (index >= draggingIndex && index < draggingEndIndex) {
+          if (event.clientY <= rect.bottom) {
+            if (previousDropIndex != null) {
+              nextDropTarget = { index: previousDropIndex, intent: "after" };
+            } else {
+              nextDropTarget = { index: draggingIndex, intent: "before" };
+            }
+            break;
+          }
+          continue;
         }
-      });
-      setDropIndex(nextDropIndex);
+        if (event.clientY < rect.top) {
+          nextDropTarget = { index, intent: "before" };
+          break;
+        }
+        if (event.clientY > rect.bottom) {
+          previousDropIndex = index;
+          nextDropTarget = { index, intent: "after" };
+          continue;
+        }
+        const ratio = (event.clientY - rect.top) / rect.height;
+        if (!usesDepth) {
+          nextDropTarget = ratio < 0.5 ? { index, intent: "before" } : { index, intent: "after" };
+          break;
+        }
+        const item = items[index];
+        const canHaveChildren = (getCanHaveChildren?.(item, index) ?? true) && readDepth(item, index) < maxDepth;
+        if (ratio < 0.25) {
+          nextDropTarget = { index, intent: "before" };
+        } else if (ratio > 0.75 || !canHaveChildren) {
+          nextDropTarget = { index, intent: "after" };
+        } else {
+          nextDropTarget = { index, intent: "inside" };
+        }
+        break;
+      }
+      setDropTarget(nextDropTarget);
     };
     const handleMouseUp = () => {
       const fromIndex = fromIndexRef.current;
-      const nextDropIndex = dropIndex;
-      if (fromIndex != null && nextDropIndex != null) {
-        const toIndex = nextDropIndex > fromIndex ? nextDropIndex - 1 : nextDropIndex;
-        if (fromIndex !== toIndex) onChange?.(reorder(items, fromIndex, toIndex));
+      const nextDropTarget = dropTarget;
+      if (fromIndex != null && nextDropTarget != null && items[nextDropTarget.index]) {
+        const insertionIndex = getInsertionIndex(items, nextDropTarget, () => 1);
+        const nextItems = usesDepth ? moveWithDepth(items, fromIndex, nextDropTarget, readDepth, setDepth, maxDepth) : reorder(
+          items,
+          fromIndex,
+          insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex
+        );
+        if (nextItems !== items) onChange?.(nextItems);
       }
       fromIndexRef.current = null;
       setDraggingIndex(null);
-      setDropIndex(null);
+      setDropTarget(null);
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
@@ -4026,12 +4123,25 @@ function SDraggableListInner({
       window.removeEventListener("mousemove", handleMouseMove);
       window.removeEventListener("mouseup", handleMouseUp);
     };
-  }, [draggingIndex, dropIndex, items, onChange, dragContext]);
+  }, [
+    draggingIndex,
+    dropTarget,
+    items,
+    onChange,
+    dragContext,
+    getDepth,
+    usesDepth,
+    readDepth,
+    setDepth,
+    maxDepth,
+    getCanHaveChildren
+  ]);
   if (dragContext && (!listId || !dragGroup)) {
     throw new Error("SDraggableList: Provider \uC548\uC5D0\uC11C\uB294 group\uACFC listId\uAC00 \uD544\uC694\uD569\uB2C8\uB2E4.");
   }
   const groupDrop = dragContext?.drop;
-  const currentDropIndex = dragContext ? groupDrop?.group === dragGroup && groupDrop?.listId === listId ? groupDrop?.index ?? null : null : dropIndex;
+  const currentDropIndex = dragContext ? groupDrop?.group === dragGroup && groupDrop?.listId === listId ? groupDrop?.index ?? null : null : dropTarget?.index;
+  const currentDropIntent = dragContext ? void 0 : dropTarget?.intent;
   const isDropTarget = dragContext ? groupDrop?.group === dragGroup && groupDrop?.listId === listId : draggingIndex != null;
   const showEmptyDrop = Boolean(dragContext && isDropTarget && items.length === 0);
   const beforeIndicatorPosition = useGap ? "before:top-[-5px]" : "before:top-0";
@@ -4062,19 +4172,30 @@ function SDraggableListInner({
       children: items.map((item, index) => {
         const itemKey = getKey(item, index);
         const disabled = getDisabled?.(item, index) ?? false;
-        const showBefore = isDropTarget && currentDropIndex === index;
-        const showAfter = isDropTarget && currentDropIndex === items.length && index === items.length - 1;
+        const depth = readDepth(item, index);
+        const showBefore = isDropTarget && currentDropIndex === index && (dragContext || currentDropIntent === "before");
+        const showInside = isDropTarget && currentDropIndex === index && !dragContext && usesDepth && currentDropIntent === "inside";
+        const showAfter = isDropTarget && (dragContext ? currentDropIndex === items.length && index === items.length - 1 : currentDropIndex === index && currentDropIntent === "after");
+        const selectItem = () => {
+          if (disabled) return;
+          setInternalSelectedKey(itemKey);
+          onSelectedKeyChange?.(itemKey);
+        };
+        const handleItemKeyDown = (event) => {
+          if (event.key !== "Enter" && event.key !== " ") return;
+          event.preventDefault();
+          selectItem();
+        };
         return /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             "data-draggable-list-item": true,
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
             "aria-disabled": disabled || void 0,
-            onClick: () => {
-              if (disabled) return;
-              setInternalSelectedKey(itemKey);
-              onSelectedKeyChange?.(itemKey);
-            },
-            className: `relative ${showBefore ? `before:absolute before:left-0 before:right-0 ${beforeIndicatorPosition} before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']` : ""} ${showAfter ? `after:absolute after:left-0 after:right-0 ${afterIndicatorPosition} after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']` : ""}`,
+            onClick: selectItem,
+            onKeyDown: handleItemKeyDown,
+            className: `relative ${showBefore ? `before:absolute before:left-0 before:right-0 ${beforeIndicatorPosition} before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']` : ""} ${showAfter ? `after:absolute after:left-0 after:right-0 ${afterIndicatorPosition} after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']` : ""} ${showInside ? "outline outline-2 outline-offset-[-2px] outline-(--sys-color-border-accent)" : ""}`,
             children: renderItem(item, index, {
               onDragHandleMouseDown: (event) => {
                 if (disabled) return;
@@ -4082,7 +4203,8 @@ function SDraggableListInner({
                   dragContext.startDrag(event, dragGroup, listId, index, itemKey);
                 } else startDrag(event, index);
               },
-              selected: currentSelectedKey === itemKey
+              selected: currentSelectedKey === itemKey,
+              depth
             })
           },
           itemKey
@@ -15930,13 +16052,11 @@ function PeriodPresetEditor({
     }
     if (selectedUnit === "quarter") {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        SSelect2,
+        SRadioButton,
         {
           value: typeof periodValue.value === "number" ? periodValue.value : 1,
           onValueChange: updateInputValue,
-          emitValue: true,
           disabled,
-          width: "100%",
           options: [
             { value: 1, label: "1\uBD84\uAE30" },
             { value: 2, label: "2\uBD84\uAE30" },
@@ -15948,13 +16068,11 @@ function PeriodPresetEditor({
     }
     if (selectedUnit === "half") {
       return /* @__PURE__ */ jsxRuntime.jsx(
-        SSelect2,
+        SRadioButton,
         {
           value: typeof periodValue.value === "string" ? periodValue.value : "first",
           onValueChange: updateInputValue,
-          emitValue: true,
           disabled,
-          width: "100%",
           options: [
             { value: "first", label: "\uC0C1\uBC18\uAE30" },
             { value: "second", label: "\uD558\uBC18\uAE30" }
@@ -16000,7 +16118,6 @@ function PeriodPresetEditor({
       },
       preset.value
     )) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { "aria-hidden": true, className: "h-px w-full", style: { background: CHIPFILTER.listboxBorder } }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full [&>*]:w-full", children: renderInput() })
   ] });
 }