sellmate-design-system-react 9.0.0-beta.12 → 9.0.0-beta.14

package/dist/index.js

@@ -3345,7 +3345,11 @@ var SCard = /* @__PURE__ */ forwardRef(function SCard2({ bordered = false, class
     "div",
     {
       ref,
-      className: cn("h-fit rounded-[8px] bg-white", bordered && "border border-grey-30", className),
+      className: cn(
+        "h-fit overflow-hidden rounded-[8px] bg-white",
+        bordered && "border border-grey-30",
+        className
+      ),
       ...rest,
       children
     }
@@ -3626,7 +3630,49 @@ var SDraggableItemImpl = /* @__PURE__ */ forwardRef(function SDraggableItem({
   ] });
 });
 var SDraggableItem2 = /* @__PURE__ */ withDisplayName(SDraggableItemImpl, "SDraggableItem");
+var SDivider = /* @__PURE__ */ forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
+  return /* @__PURE__ */ jsx(
+    "hr",
+    {
+      ref,
+      "aria-orientation": vertical ? "vertical" : "horizontal",
+      className: cn(
+        "shrink-0 border-0",
+        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
+        className
+      ),
+      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
+      ...rest
+    }
+  );
+});
+var dividerStyle = { backgroundColor: "var(--cmp-listItem-border-default)" };
+function hasBorderedChild(children) {
+  let bordered = false;
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.props.bordered === true) {
+      bordered = true;
+      return;
+    }
+    Children.forEach(child.props.children, (wrapped) => {
+      if (isValidElement(wrapped) && wrapped.props.bordered === true) {
+        bordered = true;
+      }
+    });
+  });
+  return bordered;
+}
+function withDividers(children) {
+  return Children.toArray(children).flatMap(
+    (child, index) => index === 0 ? [child] : [
+      /* @__PURE__ */ jsx(SDivider, { "aria-hidden": "true", style: dividerStyle }, `s-list-divider-${index}`),
+      child
+    ]
+  );
+}
 var SListImpl = /* @__PURE__ */ forwardRef(function SList({ className, children, useGap = false, usePadding = false, ...rest }, ref) {
+  const showDivider = !useGap && !hasBorderedChild(children);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3634,11 +3680,10 @@ var SListImpl = /* @__PURE__ */ forwardRef(function SList({ className, children,
       className: cn(
         useGap && "flex flex-col gap-(--cmp-list-group-gap)",
         usePadding && "p-(--cmp-list-group-padding)",
-        "[&>*]:border-b [&>*]:border-(--cmp-listItem-border-default)",
         className
       ),
       ...rest,
-      children
+      children: showDivider ? withDividers(children) : children
     }
   );
 });
@@ -5353,22 +5398,6 @@ var SSectionHeaderCardRootImpl = /* @__PURE__ */ forwardRef(
   }
 );
 var SSectionHeaderCard2 = /* @__PURE__ */ withDisplayName(SSectionHeaderCardRootImpl, "SSectionHeaderCard");
-var SDivider = /* @__PURE__ */ forwardRef(function SDivider2({ vertical = false, className, style, ...rest }, ref) {
-  return /* @__PURE__ */ jsx(
-    "hr",
-    {
-      ref,
-      "aria-orientation": vertical ? "vertical" : "horizontal",
-      className: cn(
-        "shrink-0 border-0",
-        vertical ? "inline-block h-auto w-px self-stretch" : "block h-px w-full",
-        className
-      ),
-      style: { backgroundColor: "var(--sys-color-divider-default, #E1E1E1)", ...style },
-      ...rest
-    }
-  );
-});
 
 // src/lib/scrollbar.ts
 var FIREFOX_SCROLLBAR_CLASS = "supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-width:thin] supports-[not_selector(::-webkit-scrollbar)]:[scrollbar-color:var(--color-grey-45)_transparent]";
@@ -5451,7 +5480,7 @@ var SSplitterRoot = /* @__PURE__ */ forwardRef(function SSplitter({
   vertical = false,
   disabled = false,
   dividerClassName,
-  dividerStyle,
+  dividerStyle: dividerStyle2,
   className,
   style,
   children,
@@ -5576,7 +5605,7 @@ var SSplitterRoot = /* @__PURE__ */ forwardRef(function SSplitter({
       ),
       style: {
         ...vertical ? { bottom: HIT_END, height: HIT } : { right: HIT_END, width: HIT },
-        ...dividerStyle
+        ...dividerStyle2
       },
       children: /* @__PURE__ */ jsx(
         "span",
@@ -8276,6 +8305,29 @@ function findGnbAncestors(items, value) {
   };
   return walk(items, []) ?? [];
 }
+function findGnbDescendantBranchValues(items, value) {
+  const find = (list) => {
+    for (const item of list) {
+      if (item.value === value) return item;
+      if (item.children) {
+        const found = find(item.children);
+        if (found) return found;
+      }
+    }
+    return void 0;
+  };
+  const collect = (list, acc) => {
+    for (const item of list) {
+      if (item.children && item.children.length > 0) {
+        acc.push(item.value);
+        collect(item.children, acc);
+      }
+    }
+    return acc;
+  };
+  const target = find(items);
+  return target?.children ? collect(target.children, []) : [];
+}
 var LABEL_TIP_HIDE_DELAY_MS = 100;
 var DEPTH_PADDING_LEFT = (M, depth) => depth === 1 ? M.depth1PaddingLeft : depth === 2 ? M.depth2PaddingLeft : M.depth3PaddingLeft;
 var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
@@ -8316,8 +8368,12 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
   const H = GNB_HEADER[header];
   const M = GNB_MENU[type];
   const C = GNB_COLORS[color];
+  const branchWithDescendants = (key) => [
+    key,
+    ...findGnbDescendantBranchValues(items, key)
+  ];
   const [expandedKeys, setExpandedKeys] = useState(
-    () => new Set(findGnbAncestors(items, value))
+    () => new Set(findGnbAncestors(items, value).flatMap(branchWithDescendants))
   );
   const [hoveredKey, setHoveredKey] = useState(null);
   const [labelTip, setLabelTip] = useState(null);
@@ -8364,12 +8420,15 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
     () => findGnbRailValue(items, value) ?? items[0]?.value
   );
   useEffect(() => {
-    const ancestors = findGnbAncestors(items, value);
-    if (ancestors.length === 0) return;
+    const keys = findGnbAncestors(items, value).flatMap((ancestor) => [
+      ancestor,
+      ...findGnbDescendantBranchValues(items, ancestor)
+    ]);
+    if (keys.length === 0) return;
     setExpandedKeys((prev) => {
-      if (ancestors.every((a) => prev.has(a))) return prev;
+      if (keys.every((key) => prev.has(key))) return prev;
       const next = new Set(prev);
-      ancestors.forEach((a) => next.add(a));
+      keys.forEach((key) => next.add(key));
       return next;
     });
   }, [items, value]);
@@ -8386,10 +8445,12 @@ var SGnb = /* @__PURE__ */ forwardRef(function SGnb2({
     setExpandedKeys((prev) => {
       const next = new Set(prev);
       if (next.has(key)) {
-        next.delete(key);
+        branchWithDescendants(key).forEach((descendant) => next.delete(descendant));
       } else {
-        findGnbSiblingValues(items, key).forEach((sibling) => next.delete(sibling));
-        next.add(key);
+        findGnbSiblingValues(items, key).forEach(
+          (sibling) => branchWithDescendants(sibling).forEach((descendant) => next.delete(descendant))
+        );
+        branchWithDescendants(key).forEach((descendant) => next.add(descendant));
       }
       return next;
     });