sellmate-design-system-react 3.5.0 → 3.6.0

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

@@ -1 +1 @@
-export { SSectionHeaderCard, type SSectionHeaderCardBodyChildren, type SSectionHeaderCardBodyProps, type SSectionHeaderCardChildren, type SSectionHeaderCardHeaderProps, type SSectionHeaderCardProps, type SSectionHeaderCardThickness, } from './SSectionHeaderCard';
+export { SSectionHeaderCard, type SSectionHeaderCardBodyChildren, type SSectionHeaderCardBodyProps, type SSectionHeaderCardChildren, type SSectionHeaderCardHeaderProps, type SSectionHeaderCardProps, type SSectionHeaderCardThickness, type SSectionHeaderCardTitleSize, } from './SSectionHeaderCard';

package/dist/index.cjs

@@ -3025,6 +3025,7 @@ var SDraggableItem = react.forwardRef(
     accentStripe = false,
     bordered = false,
     selected = false,
+    dragging = false,
     dense = false,
     disabled = false,
     dragOverlay = true,
@@ -3095,7 +3096,7 @@ var SDraggableItem = react.forwardRef(
           bordered,
           selected,
           dense,
-          dragging: overlayVisible,
+          dragging: dragging || overlayVisible,
           disabled,
           hovered,
           dragHandleProps,
@@ -3141,6 +3142,130 @@ var SDraggableItem = react.forwardRef(
   }
 );
 SDraggableItem.displayName = "SDraggableItem";
+var SList = react.forwardRef(function SList2({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        useGap && "flex flex-col gap-(--cmp-list-group-gap)",
+        usePadding && "p-(--cmp-list-group-padding)",
+        className
+      ),
+      ...rest,
+      children
+    }
+  );
+});
+SList.displayName = "SList";
+function reorder(items, fromIndex, toIndex) {
+  if (fromIndex === toIndex) return items;
+  const nextItems = [...items];
+  const [movedItem] = nextItems.splice(fromIndex, 1);
+  nextItems.splice(toIndex, 0, movedItem);
+  return nextItems;
+}
+function SDraggableListInner({
+  items,
+  getKey,
+  renderItem,
+  onChange,
+  selectedKey,
+  defaultSelectedKey,
+  onSelectedKeyChange,
+  getDisabled,
+  ...rest
+}, ref) {
+  const [draggingIndex, setDraggingIndex] = react.useState(null);
+  const [dropIndex, setDropIndex] = react.useState(null);
+  const [internalSelectedKey, setInternalSelectedKey] = react.useState(
+    defaultSelectedKey
+  );
+  const listRef = react.useRef(null);
+  const fromIndexRef = react.useRef(null);
+  const currentSelectedKey = selectedKey ?? internalSelectedKey;
+  const startDrag = react.useCallback((event, index) => {
+    event.preventDefault();
+    fromIndexRef.current = index;
+    setDraggingIndex(index);
+    setDropIndex(index);
+  }, []);
+  react.useEffect(() => {
+    if (draggingIndex == null) return void 0;
+    const handleMouseMove = (event) => {
+      const itemElements = listRef.current?.querySelectorAll(
+        "[data-draggable-list-item]"
+      );
+      if (!itemElements) return;
+      let nextDropIndex = items.length;
+      itemElements.forEach((itemElement, index) => {
+        const rect = itemElement.getBoundingClientRect();
+        if (event.clientY < rect.top + rect.height / 2 && nextDropIndex === items.length) {
+          nextDropIndex = index;
+        }
+      });
+      setDropIndex(nextDropIndex);
+    };
+    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));
+      }
+      fromIndexRef.current = null;
+      setDraggingIndex(null);
+      setDropIndex(null);
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [draggingIndex, dropIndex, items, onChange]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SList,
+    {
+      ref: (node) => {
+        listRef.current = node;
+        if (typeof ref === "function") ref(node);
+        else if (ref) ref.current = node;
+      },
+      ...rest,
+      children: items.map((item, index) => {
+        const itemKey = getKey(item, index);
+        const disabled = getDisabled?.(item, index) ?? false;
+        const showBefore = draggingIndex != null && dropIndex === index;
+        const showAfter = draggingIndex != null && dropIndex === items.length && index === items.length - 1;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            "data-draggable-list-item": true,
+            "aria-disabled": disabled || void 0,
+            onClick: () => {
+              if (disabled) return;
+              setInternalSelectedKey(itemKey);
+              onSelectedKeyChange?.(itemKey);
+            },
+            className: `relative ${showBefore ? "before:absolute before:left-0 before:right-0 before:top-0 before:z-10 before:h-[2px] before:bg-(--sys-color-border-accent) before:content-['']" : ""} ${showAfter ? "after:absolute after:bottom-0 after:left-0 after:right-0 after:z-10 after:h-[2px] after:bg-(--sys-color-border-accent) after:content-['']" : ""}`,
+            children: renderItem(item, index, {
+              onDragHandleMouseDown: (event) => {
+                if (!disabled) startDrag(event, index);
+              },
+              selected: currentSelectedKey === itemKey
+            })
+          },
+          itemKey
+        );
+      })
+    }
+  );
+}
+var SDraggableList = react.forwardRef(SDraggableListInner);
+var SExpansionItemDescendantContext = react.createContext(
+  null
+);
 var SExpansionItem = react.forwardRef(
   function SExpansionItem2({
     title,
@@ -3151,6 +3276,9 @@ var SExpansionItem = react.forwardRef(
     bordered = false,
     expanded,
     defaultExpanded = false,
+    selected = false,
+    interaction,
+    accentStripe = false,
     dense = false,
     disabled = false,
     onToggle,
@@ -3159,15 +3287,39 @@ var SExpansionItem = react.forwardRef(
     ...rest
   }, ref) {
     const [internalExpanded, setInternalExpanded] = react.useState(defaultExpanded);
+    const [expandedDescendantCount, setExpandedDescendantCount] = react.useState(0);
+    const [hovered, setHovered] = react.useState(false);
+    const parentDescendantContext = react.useContext(SExpansionItemDescendantContext);
     const isExpanded = expanded ?? internalExpanded;
-    const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, disabled }) : leading;
+    const isSelected = isExpanded && (selected || expandedDescendantCount === 0);
+    const hasChevronInteraction = interaction === "chevron";
+    const showInteractionChevron = hasChevronInteraction && !disabled && (isSelected || hovered);
+    const interactionChevronColor = isSelected ? "var(--sys-color-fg-brand)" : "var(--sys-color-fg-quaternary)";
+    const reportExpandedDescendant = react.useCallback(
+      (delta) => {
+        setExpandedDescendantCount((current) => Math.max(0, current + delta));
+        parentDescendantContext?.reportExpandedDescendant(delta);
+      },
+      [parentDescendantContext]
+    );
+    const descendantContextValue = react.useMemo(
+      () => ({ reportExpandedDescendant }),
+      [reportExpandedDescendant]
+    );
+    const leadingNode = typeof leading === "function" ? leading({ expanded: isExpanded, selected: isSelected, disabled }) : leading;
     const id = react.useId();
+    react.useEffect(() => {
+      if (!isExpanded) return;
+      parentDescendantContext?.reportExpandedDescendant(1);
+      return () => parentDescendantContext?.reportExpandedDescendant(-1);
+    }, [isExpanded, parentDescendantContext]);
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref,
         className: cn(
-          "group/expansion-item overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
+          "group/expansion-item relative overflow-hidden bg-(--cmp-listExpansionItem-title-bg-default)",
+          !bordered && "border-b border-(--cmp-listExpansionItem-border-default)",
           // TODO: expansionItem/bordered/radius 및 border intent 토큰 생성 후 고정값을 토큰으로 교체한다.
           bordered && "rounded-[8px] border border-[#E1E1E1] hover:border-[#AAAAAA] [&:has(>button:hover)]:border-[#AAAAAA]",
           bordered && isExpanded && "!border-[#93C4FF]",
@@ -3175,6 +3327,13 @@ var SExpansionItem = react.forwardRef(
         ),
         ...rest,
         children: [
+          accentStripe && !bordered && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute bottom-[-1px] left-0 top-0 z-[1] w-(--cmp-listItem-accentStripe-width) bg-(--cmp-listItem-accentStripe-color)"
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs(
             "button",
             {
@@ -3182,6 +3341,8 @@ var SExpansionItem = react.forwardRef(
               disabled,
               "aria-expanded": isExpanded,
               "aria-controls": id,
+              onMouseEnter: () => setHovered(true),
+              onMouseLeave: () => setHovered(false),
               onClick: (event) => {
                 if (disabled) return;
                 const next = !isExpanded;
@@ -3189,14 +3350,17 @@ var SExpansionItem = react.forwardRef(
                 onToggle?.(next, event);
               },
               className: cn(
-                "flex w-full cursor-pointer items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
+                "group/expansion-item-button flex w-full cursor-pointer items-center justify-between border-0 text-left text-[14px] font-bold leading-[24px] text-(--cmp-listExpansionItem-title-text-default) focus-visible:outline focus-visible:outline-2 focus-visible:outline-(--sys-color-border-accent) disabled:cursor-not-allowed disabled:text-(--sys-color-disabled-text)",
                 isExpanded && "border-b border-(--cmp-listExpansionItem-title-border)",
-                !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
+                hasChevronInteraction ? "hover:bg-(--sys-color-bg-neutralBright)" : !isExpanded && "hover:bg-(--cmp-listExpansionItem-title-bg-hover)",
                 dense ? "h-[32px] py-(--cmp-listExpansionItem-title-paddingY-dense)" : "h-[40px] py-(--cmp-listExpansionItem-title-paddingY-normal)",
                 "gap-(--cmp-listExpansionItem-title-gap)",
                 "pr-(--cmp-listExpansionItem-title-paddingX)",
-                depth === 2 ? "pl-[calc(var(--cmp-listExpansionItem-title-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listExpansionItem-title-paddingX)+64px)]" : "pl-(--cmp-listExpansionItem-title-paddingX)",
-                isExpanded && "bg-(--cmp-listExpansionItem-title-bg-expanded) text-(--cmp-listExpansionItem-title-text-expanded)"
+                depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
+                isExpanded && cn(
+                  "text-(--cmp-listExpansionItem-title-text-expanded)",
+                  isSelected && "bg-(--cmp-listExpansionItem-title-bg-expanded)"
+                )
               ),
               children: [
                 !leading && /* @__PURE__ */ jsxRuntime.jsx(
@@ -3211,11 +3375,12 @@ var SExpansionItem = react.forwardRef(
                 ),
                 leadingNode,
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: title }) }),
-                trailing
+                trailing,
+                showInteractionChevron && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "chevronRight", size: 12, color: interactionChevronColor })
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(SExpansionItemDescendantContext.Provider, { value: descendantContextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
               id,
@@ -3226,34 +3391,21 @@ var SExpansionItem = react.forwardRef(
               ),
               children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(bodyPadding && "p-(--cmp-listExpansionItem-body-padding)"), children }) })
             }
-          )
+          ) })
         ]
       }
     );
   }
 );
-var SList = react.forwardRef(function SList2({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref,
-      className: cn(
-        useGap && "flex flex-col gap-(--cmp-list-group-gap)",
-        usePadding && "p-(--cmp-list-group-padding)",
-        className
-      ),
-      ...rest,
-      children
-    }
-  );
-});
-SList.displayName = "SList";
 var SListItem = react.forwardRef(function SListItem2({
   title,
   depth = 1,
   leading,
   trailing,
   bordered = false,
+  selected = false,
+  clickable = true,
+  interaction,
   accentStripe = false,
   dense = false,
   disabled = false,
@@ -3267,8 +3419,13 @@ var SListItem = react.forwardRef(function SListItem2({
   const titleNode = typeof title === "function" ? title(renderState) : title;
   const leadingNode = typeof leading === "function" ? leading(renderState) : leading;
   const trailingNode = typeof trailing === "function" ? trailing(renderState) : trailing;
+  const isInteractive = clickable && !disabled;
+  const isSelected = isInteractive && selected;
+  const hasChevronInteraction = interaction === "chevron";
+  const showInteractionChevron = hasChevronInteraction && isInteractive && (isSelected || hovered);
+  const interactionChevronColor = isSelected ? "var(--sys-color-fg-brand)" : "var(--sys-color-fg-quaternary)";
   const handleMouseEnter = (event) => {
-    if (!disabled) setHovered(true);
+    if (isInteractive) setHovered(true);
     onMouseEnter?.(event);
   };
   const handleMouseLeave = (event) => {
@@ -3284,12 +3441,21 @@ var SListItem = react.forwardRef(function SListItem2({
       onMouseLeave: handleMouseLeave,
       className: cn(
         "group/list-item relative flex w-full items-center justify-between bg-(--cmp-listItem-bg-default) text-left text-[14px] font-bold leading-[24px] text-(--cmp-listItem-text-default)",
-        disabled ? "pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)" : "hover:bg-(--cmp-listItem-bg-hover)",
+        disabled ? "pointer-events-none cursor-not-allowed text-(--sys-color-disabled-text)" : isSelected ? cn(
+          "cursor-pointer text-(--cmp-listItem-text-selected)",
+          "bg-(--cmp-listItem-bg-selected)"
+        ) : isInteractive ? cn(
+          "cursor-pointer",
+          hasChevronInteraction ? "hover:bg-(--sys-color-bg-neutralBright)" : "hover:bg-(--cmp-listItem-bg-hover)"
+        ) : "cursor-default",
         dense ? "h-[32px] py-(--cmp-listItem-paddingY-dense)" : "h-[40px] py-(--cmp-listItem-paddingY-normal)",
         "gap-(--cmp-listItem-gap)",
         "pr-(--cmp-listItem-paddingX)",
-        depth === 2 ? "pl-[calc(var(--cmp-listItem-paddingX)+32px)]" : depth === 3 ? "pl-[calc(var(--cmp-listItem-paddingX)+64px)]" : "pl-(--cmp-listItem-paddingX)",
-        bordered ? "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default) hover:border-(--cmp-listItem-bordered-border-hover)" : "border-b border-(--cmp-listItem-border-default)",
+        depth === 2 ? "pl-[36px]" : depth === 3 ? "pl-[56px]" : "pl-[16px]",
+        bordered ? cn(
+          "overflow-hidden rounded-(--cmp-listItem-radius-bordered) border border-(--cmp-listItem-border-default)",
+          isSelected ? "border-(--cmp-listItem-bordered-border-selected)" : isInteractive && "hover:border-(--cmp-listItem-bordered-border-hover)"
+        ) : "border-b border-(--cmp-listItem-border-default)",
         className
       ),
       ...rest,
@@ -3303,12 +3469,77 @@ var SListItem = react.forwardRef(function SListItem2({
         ),
         leadingNode,
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex min-w-0 flex-1 flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: titleNode }) }),
-        trailingNode
+        trailingNode,
+        showInteractionChevron && /* @__PURE__ */ jsxRuntime.jsx(SIcon, { name: "chevronRight", size: 12, color: interactionChevronColor })
       ]
     }
   );
 });
 SListItem.displayName = "SListItem";
+function isExpansionItemElement(node) {
+  return react.isValidElement(node) && node.type === SExpansionItem;
+}
+function isListItemElement(node) {
+  return react.isValidElement(node) && node.type === SListItem;
+}
+function getInitialOpenKeys(children) {
+  const openKeys = {};
+  react.Children.forEach(children, (child, index) => {
+    if (!isExpansionItemElement(child)) return;
+    const depth = child.props.depth ?? 1;
+    if (openKeys[depth] != null) return;
+    if (child.props.expanded === true || child.props.defaultExpanded === true) {
+      openKeys[depth] = String(child.key ?? index);
+    }
+  });
+  return openKeys;
+}
+function getInitialSelectedKeys(children) {
+  const selectedKeys = {};
+  react.Children.forEach(children, (child, index) => {
+    if (!isListItemElement(child) || !child.props.selected) return;
+    const depth = child.props.depth ?? 1;
+    if (selectedKeys[depth] == null) selectedKeys[depth] = String(child.key ?? index);
+  });
+  return selectedKeys;
+}
+var SExpansionList = react.forwardRef(
+  function SExpansionList2({ children, ...rest }, ref) {
+    const [openKeys, setOpenKeys] = react.useState(() => getInitialOpenKeys(children));
+    const [selectedKeys, setSelectedKeys] = react.useState(
+      () => getInitialSelectedKeys(children)
+    );
+    const listChildren = react.Children.map(children, (child, index) => {
+      if (isListItemElement(child)) {
+        const depth2 = child.props.depth ?? 1;
+        const itemKey2 = String(child.key ?? index);
+        return react.cloneElement(child, {
+          selected: selectedKeys[depth2] === itemKey2,
+          onClick: (event) => {
+            setSelectedKeys((current) => ({ ...current, [depth2]: itemKey2 }));
+            child.props.onClick?.(event);
+          }
+        });
+      }
+      if (!isExpansionItemElement(child)) return child;
+      const depth = child.props.depth ?? 1;
+      const itemKey = String(child.key ?? index);
+      return react.cloneElement(child, {
+        expanded: openKeys[depth] === itemKey,
+        selected: void 0,
+        onToggle: (next, event) => {
+          setOpenKeys((current) => ({
+            ...current,
+            [depth]: next ? itemKey : current[depth] === itemKey ? void 0 : current[depth]
+          }));
+          child.props.onToggle?.(next, event);
+        }
+      });
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx(SList, { ref, ...rest, children: listChildren });
+  }
+);
+SExpansionList.displayName = "SExpansionList";
 
 // src/lib/floating-anim.ts
 var FLOATING_SLIDE_ANIM = [
@@ -3785,6 +4016,10 @@ var topBorderColorClass = {
   default: "bg-(--cmp-sectionHeaderCard-topBorder-color-default)",
   accent: "bg-(--cmp-sectionHeaderCard-topBorder-color-accent)"
 };
+var titleSizeClass = {
+  xs: "typo-heading-xs",
+  sm: "typo-heading-sm"
+};
 var SSectionHeaderCardBody = react.forwardRef(
   function SSectionHeaderCardBody2({ className, children, ...rest }, ref) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className, ...rest, children });
@@ -3793,6 +4028,7 @@ var SSectionHeaderCardBody = react.forwardRef(
 var SSectionHeaderCardHeader = react.forwardRef(
   function SSectionHeaderCardHeader2({
     title,
+    titleSize = "xs",
     marker = false,
     required = false,
     helpText,
@@ -3825,7 +4061,16 @@ var SSectionHeaderCardHeader = react.forwardRef(
           children: [
             marker && /* @__PURE__ */ jsxRuntime.jsx(SBadge, { color: "darkblue", className: "shrink-0" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 shrink-0 items-center gap-[8px]", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate text-[12px] font-bold leading-[20px] text-(--sys-color-fg-brand)", children: title }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    "min-w-0 truncate text-(--sys-color-fg-brand)",
+                    titleSizeClass[titleSize]
+                  ),
+                  children: title
+                }
+              ),
               required && /* @__PURE__ */ jsxRuntime.jsx(
                 SIcon,
                 {
@@ -12476,8 +12721,10 @@ exports.SDatePicker = SDatePicker;
 exports.SDateRangePicker = SDateRangePicker;
 exports.SDivider = SDivider;
 exports.SDraggableItem = SDraggableItem;
+exports.SDraggableList = SDraggableList;
 exports.SDropdownButton = SDropdownButton;
 exports.SExpansionItem = SExpansionItem;
+exports.SExpansionList = SExpansionList;
 exports.SField = SField;
 exports.SFilePicker = SFilePicker;
 exports.SForm = SForm;