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

package/dist/index.js

@@ -3463,6 +3463,7 @@ var SDraggableItemView = /* @__PURE__ */ forwardRef(
     supportingText,
     supportingTextPosition,
     trailing,
+    depth,
     accentStripe,
     bordered,
     selected,
@@ -3474,6 +3475,7 @@ var SDraggableItemView = /* @__PURE__ */ forwardRef(
     dragHandleProps,
     onDragHandleMouseDown,
     className,
+    style,
     ...rest
   }, ref) {
     const renderState = { hovered, dragging, disabled };
@@ -3483,12 +3485,19 @@ var SDraggableItemView = /* @__PURE__ */ 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__ */ 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,
@@ -3577,6 +3586,7 @@ var SDraggableItemImpl = /* @__PURE__ */ forwardRef(function SDraggableItem({
   supportingText,
   supportingTextPosition = "right",
   trailing,
+  depth = 1,
   accentStripe = false,
   bordered = false,
   selected = false,
@@ -3650,6 +3660,7 @@ var SDraggableItemImpl = /* @__PURE__ */ forwardRef(function SDraggableItem({
         supportingText,
         supportingTextPosition,
         trailing,
+        depth,
         accentStripe,
         bordered,
         selected,
@@ -3685,6 +3696,7 @@ var SDraggableItemImpl = /* @__PURE__ */ forwardRef(function SDraggableItem({
               supportingText,
               supportingTextPosition,
               trailing,
+              depth,
               accentStripe,
               bordered,
               selected,
@@ -3934,6 +3946,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,
@@ -3943,6 +3991,10 @@ function SDraggableListInner({
   defaultSelectedKey,
   onSelectedKeyChange,
   getDisabled,
+  getDepth,
+  setDepth,
+  getCanHaveChildren,
+  maxDepth = 3,
   listId,
   group: groupName,
   useGap,
@@ -3952,19 +4004,24 @@ function SDraggableListInner({
   const dragContext = useSDraggableGroup();
   const dragGroup = groupName ?? dragContext?.defaultGroup;
   const [draggingIndex, setDraggingIndex] = useState(null);
-  const [dropIndex, setDropIndex] = useState(null);
+  const [dropTarget, setDropTarget] = useState(null);
   const [internalSelectedKey, setInternalSelectedKey] = useState(
     defaultSelectedKey
   );
   const listRef = useRef(null);
   const fromIndexRef = useRef(null);
   const currentSelectedKey = selectedKey ?? internalSelectedKey;
+  const usesDepth = getDepth != null;
   const startDrag = useCallback((event, index) => {
     event.preventDefault();
     fromIndexRef.current = index;
     setDraggingIndex(index);
-    setDropIndex(index);
+    setDropTarget({ index, intent: "before" });
   }, []);
+  const readDepth = useCallback(
+    (item, index) => clampDepth(getDepth?.(item, index) ?? 1, maxDepth),
+    [getDepth, maxDepth]
+  );
   useEffect(() => {
     if (dragContext || draggingIndex == null) return void 0;
     const handleMouseMove = (event) => {
@@ -3972,25 +4029,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);
@@ -3998,12 +4095,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";
@@ -4034,19 +4144,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__ */ 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;
@@ -4054,7 +4175,8 @@ function SDraggableListInner({
                   dragContext.startDrag(event, dragGroup, listId, index, itemKey);
                 } else startDrag(event, index);
               },
-              selected: currentSelectedKey === itemKey
+              selected: currentSelectedKey === itemKey,
+              depth
             })
           },
           itemKey
@@ -15902,13 +16024,11 @@ function PeriodPresetEditor({
     }
     if (selectedUnit === "quarter") {
       return /* @__PURE__ */ 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" },
@@ -15920,13 +16040,11 @@ function PeriodPresetEditor({
     }
     if (selectedUnit === "half") {
       return /* @__PURE__ */ 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" }
@@ -15972,7 +16090,6 @@ function PeriodPresetEditor({
       },
       preset.value
     )) }),
-    /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "h-px w-full", style: { background: CHIPFILTER.listboxBorder } }),
     /* @__PURE__ */ jsx("div", { className: "w-full [&>*]:w-full", children: renderInput() })
   ] });
 }