@sia.soul/sia-react-ui 0.1.17 → 0.1.18

package/dist/{chunk-MUTJVDM6.js → chunk-I3EF5SF2.js}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   Icon,
   Input
-} from "./chunk-ALWHRV4L.js";
+} from "./chunk-SUMXP2SF.js";
 import {
   Button
 } from "./chunk-TZGUBGA4.js";

package/dist/{chunk-KJYKC5IV.js → chunk-JX53ZBIW.js}

@@ -5,11 +5,11 @@ import {
   Popover,
   Tooltip,
   useOverlayLifecycle
-} from "./chunk-VXSG4EAO.js";
+} from "./chunk-LPRFOSRZ.js";
 import {
   Dropdown,
   Icon
-} from "./chunk-ALWHRV4L.js";
+} from "./chunk-SUMXP2SF.js";
 import {
   Button
 } from "./chunk-TZGUBGA4.js";

package/dist/{chunk-VXSG4EAO.js → chunk-LPRFOSRZ.js}

@@ -3,7 +3,7 @@ import {
   Icon,
   Input,
   PopupPortal
-} from "./chunk-ALWHRV4L.js";
+} from "./chunk-SUMXP2SF.js";
 import {
   Button
 } from "./chunk-TZGUBGA4.js";

package/dist/{chunk-ALWHRV4L.js → chunk-SUMXP2SF.js}

@@ -974,7 +974,8 @@ function MenuEntry({
   item,
   level,
   parents,
-  props
+  props,
+  reserveIcon
 }) {
   const anchorRef = useRef2(null);
   const closeTimerRef = useRef2(void 0);
@@ -1023,7 +1024,7 @@ function MenuEntry({
             "aria-expanded": hasChildren ? isOpen : void 0,
             onClick: (event) => hasChildren ? props.toggle(item.key) : props.select(item, path, event),
             children: [
-              item.icon ? /* @__PURE__ */ jsx4("span", { className: "sia-menu__icon", children: item.icon }) : null,
+              reserveIcon ? /* @__PURE__ */ jsx4("span", { className: "sia-menu__icon", "aria-hidden": !item.icon || void 0, children: item.icon }) : null,
               !collapsed ? /* @__PURE__ */ jsx4("span", { className: "sia-menu__label", children: item.label }) : null,
               !collapsed && item.extra ? /* @__PURE__ */ jsx4("span", { className: "sia-menu__extra", children: item.extra }) : null,
               !collapsed && hasChildren ? /* @__PURE__ */ jsx4(Icon, { className: "sia-menu__expand-icon", name: "chevron-down", size: 13 }) : null
@@ -1047,19 +1048,23 @@ function MenuEntry({
     }
   );
 }
+function hasMenuIcon(items) {
+  return items.some((item) => item.type === "group" ? hasMenuIcon(item.children ?? []) : item.type !== "divider" && Boolean(item.icon));
+}
 function MenuLevel({
   items,
   level,
   parents,
-  props
+  props,
+  reserveIcon = hasMenuIcon(items)
 }) {
   return /* @__PURE__ */ jsx4(Fragment3, { children: items.map((item, index) => {
     if (item.type === "divider") return /* @__PURE__ */ jsx4("li", { className: "sia-menu__divider", role: "separator" }, item.key || `divider-${index}`);
     if (item.type === "group") return /* @__PURE__ */ jsxs3("li", { className: "sia-menu__group", children: [
       /* @__PURE__ */ jsx4("div", { className: "sia-menu__group-title", children: item.label }),
-      /* @__PURE__ */ jsx4("ul", { role: "group", children: /* @__PURE__ */ jsx4(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props }) })
+      /* @__PURE__ */ jsx4("ul", { role: "group", children: /* @__PURE__ */ jsx4(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props, reserveIcon }) })
     ] }, item.key);
-    return /* @__PURE__ */ jsx4(MenuEntry, { item, level, parents, props }, item.key);
+    return /* @__PURE__ */ jsx4(MenuEntry, { item, level, parents, props, reserveIcon }, item.key);
   }) });
 }
 function Menu({

package/dist/{chunk-G47MREYI.js → chunk-UCQZZ2YC.js}

@@ -1,10 +1,10 @@
 import {
   Select
-} from "./chunk-VXSG4EAO.js";
+} from "./chunk-LPRFOSRZ.js";
 import {
   Icon,
   PopupPortal
-} from "./chunk-ALWHRV4L.js";
+} from "./chunk-SUMXP2SF.js";
 import {
   useControlSize,
   useControllableState,

package/dist/core.cjs

@@ -1188,7 +1188,8 @@ function MenuEntry({
   item,
   level,
   parents,
-  props
+  props,
+  reserveIcon
 }) {
   const anchorRef = (0, import_react6.useRef)(null);
   const closeTimerRef = (0, import_react6.useRef)(void 0);
@@ -1237,7 +1238,7 @@ function MenuEntry({
             "aria-expanded": hasChildren ? isOpen : void 0,
             onClick: (event) => hasChildren ? props.toggle(item.key) : props.select(item, path, event),
             children: [
-              item.icon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sia-menu__icon", children: item.icon }) : null,
+              reserveIcon ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sia-menu__icon", "aria-hidden": !item.icon || void 0, children: item.icon }) : null,
               !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sia-menu__label", children: item.label }) : null,
               !collapsed && item.extra ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "sia-menu__extra", children: item.extra }) : null,
               !collapsed && hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, { className: "sia-menu__expand-icon", name: "chevron-down", size: 13 }) : null
@@ -1261,19 +1262,23 @@ function MenuEntry({
     }
   );
 }
+function hasMenuIcon(items) {
+  return items.some((item) => item.type === "group" ? hasMenuIcon(item.children ?? []) : item.type !== "divider" && Boolean(item.icon));
+}
 function MenuLevel({
   items,
   level,
   parents,
-  props
+  props,
+  reserveIcon = hasMenuIcon(items)
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: items.map((item, index) => {
     if (item.type === "divider") return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("li", { className: "sia-menu__divider", role: "separator" }, item.key || `divider-${index}`);
     if (item.type === "group") return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("li", { className: "sia-menu__group", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "sia-menu__group-title", children: item.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { role: "group", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props }) })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { role: "group", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props, reserveIcon }) })
     ] }, item.key);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuEntry, { item, level, parents, props }, item.key);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuEntry, { item, level, parents, props, reserveIcon }, item.key);
   }) });
 }
 function Menu({

package/dist/core.css

@@ -484,27 +484,47 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   position: absolute;
   box-sizing: border-box;
   cursor: default;
+  touch-action: none;
+}
+.sia-floating-scrollbar__thumb::before {
+  content: none;
+}
+.sia-floating-scrollbar__thumb::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  pointer-events: none;
   background: var(--sia-scrollbar-thumb);
   border: 1px solid rgb(255 255 255 / 24%);
   border-radius: 999px;
   box-shadow: 0 1px 1px rgb(0 0 0 / 24%);
-  touch-action: none;
-  transition: background-color 120ms ease;
+  transition:
+    background-color 120ms ease,
+    width 150ms ease,
+    height 150ms ease;
 }
-.sia-floating-scrollbar__thumb:hover {
+.sia-floating-scrollbar__thumb:hover::after {
   background: var(--sia-scrollbar-thumb-hover);
 }
 .sia-floating-scrollbar--horizontal .sia-floating-scrollbar__thumb {
   bottom: 0;
   left: 0;
+  height: 100%;
+}
+.sia-floating-scrollbar--horizontal .sia-floating-scrollbar__thumb::after {
+  width: 100%;
   height: var(--sia-scrollbar-size);
-  transition: background-color 120ms ease, height 150ms ease;
 }
 .sia-floating-scrollbar--vertical .sia-floating-scrollbar__thumb {
   top: 0;
   right: 0;
+  width: 100%;
+}
+.sia-floating-scrollbar--vertical .sia-floating-scrollbar__thumb::after {
   width: var(--sia-scrollbar-size);
-  transition: background-color 120ms ease, width 150ms ease;
+  height: 100%;
 }
 .sia-button,
 .sia-input,
@@ -7133,6 +7153,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   display: inline-flex;
   flex: 0 0 auto;
 }
+.sia-menu__icon {
+  justify-content: center;
+  align-items: center;
+  width: var(--sia-menu-icon-size, 16px);
+  flex-basis: var(--sia-menu-icon-size, 16px);
+}
+.sia-menu__icon > * {
+  max-width: 100%;
+}
 .sia-menu__extra {
   color: var(--sia-color-text-secondary);
   font-size: 12px;

package/dist/core.js

@@ -9,17 +9,17 @@ import {
   Typography,
   Upload,
   message
-} from "./chunk-KJYKC5IV.js";
+} from "./chunk-JX53ZBIW.js";
 import "./chunk-YT6E3X2K.js";
 import {
   Modal,
   Select
-} from "./chunk-VXSG4EAO.js";
+} from "./chunk-LPRFOSRZ.js";
 import {
   Icon,
   Input,
   Segmented
-} from "./chunk-ALWHRV4L.js";
+} from "./chunk-SUMXP2SF.js";
 import {
   Button
 } from "./chunk-TZGUBGA4.js";

package/dist/index.cjs

@@ -1222,7 +1222,8 @@ function MenuEntry({
   item,
   level,
   parents,
-  props
+  props,
+  reserveIcon
 }) {
   const anchorRef = (0, import_react5.useRef)(null);
   const closeTimerRef = (0, import_react5.useRef)(void 0);
@@ -1271,7 +1272,7 @@ function MenuEntry({
             "aria-expanded": hasChildren ? isOpen : void 0,
             onClick: (event) => hasChildren ? props.toggle(item.key) : props.select(item, path, event),
             children: [
-              item.icon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sia-menu__icon", children: item.icon }) : null,
+              reserveIcon ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sia-menu__icon", "aria-hidden": !item.icon || void 0, children: item.icon }) : null,
               !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sia-menu__label", children: item.label }) : null,
               !collapsed && item.extra ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sia-menu__extra", children: item.extra }) : null,
               !collapsed && hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { className: "sia-menu__expand-icon", name: "chevron-down", size: 13 }) : null
@@ -1295,19 +1296,23 @@ function MenuEntry({
     }
   );
 }
+function hasMenuIcon(items) {
+  return items.some((item) => item.type === "group" ? hasMenuIcon(item.children ?? []) : item.type !== "divider" && Boolean(item.icon));
+}
 function MenuLevel({
   items,
   level,
   parents,
-  props
+  props,
+  reserveIcon = hasMenuIcon(items)
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: items.map((item, index) => {
     if (item.type === "divider") return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("li", { className: "sia-menu__divider", role: "separator" }, item.key || `divider-${index}`);
     if (item.type === "group") return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("li", { className: "sia-menu__group", children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "sia-menu__group-title", children: item.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { role: "group", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props }) })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("ul", { role: "group", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props, reserveIcon }) })
     ] }, item.key);
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuEntry, { item, level, parents, props }, item.key);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuEntry, { item, level, parents, props, reserveIcon }, item.key);
   }) });
 }
 function Menu({

package/dist/index.css

@@ -484,27 +484,47 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   position: absolute;
   box-sizing: border-box;
   cursor: default;
+  touch-action: none;
+}
+.sia-floating-scrollbar__thumb::before {
+  content: none;
+}
+.sia-floating-scrollbar__thumb::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  box-sizing: border-box;
+  pointer-events: none;
   background: var(--sia-scrollbar-thumb);
   border: 1px solid rgb(255 255 255 / 24%);
   border-radius: 999px;
   box-shadow: 0 1px 1px rgb(0 0 0 / 24%);
-  touch-action: none;
-  transition: background-color 120ms ease;
+  transition:
+    background-color 120ms ease,
+    width 150ms ease,
+    height 150ms ease;
 }
-.sia-floating-scrollbar__thumb:hover {
+.sia-floating-scrollbar__thumb:hover::after {
   background: var(--sia-scrollbar-thumb-hover);
 }
 .sia-floating-scrollbar--horizontal .sia-floating-scrollbar__thumb {
   bottom: 0;
   left: 0;
+  height: 100%;
+}
+.sia-floating-scrollbar--horizontal .sia-floating-scrollbar__thumb::after {
+  width: 100%;
   height: var(--sia-scrollbar-size);
-  transition: background-color 120ms ease, height 150ms ease;
 }
 .sia-floating-scrollbar--vertical .sia-floating-scrollbar__thumb {
   top: 0;
   right: 0;
+  width: 100%;
+}
+.sia-floating-scrollbar--vertical .sia-floating-scrollbar__thumb::after {
   width: var(--sia-scrollbar-size);
-  transition: background-color 120ms ease, width 150ms ease;
+  height: 100%;
 }
 .sia-button,
 .sia-input,
@@ -7133,6 +7153,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   display: inline-flex;
   flex: 0 0 auto;
 }
+.sia-menu__icon {
+  justify-content: center;
+  align-items: center;
+  width: var(--sia-menu-icon-size, 16px);
+  flex-basis: var(--sia-menu-icon-size, 16px);
+}
+.sia-menu__icon > * {
+  max-width: 100%;
+}
 .sia-menu__extra {
   color: var(--sia-color-text-secondary);
   font-size: 12px;

package/dist/index.js

@@ -79,7 +79,7 @@ import {
   Watermark,
   message,
   notification
-} from "./chunk-KJYKC5IV.js";
+} from "./chunk-JX53ZBIW.js";
 import {
   TextArea
 } from "./chunk-YT6E3X2K.js";
@@ -89,12 +89,12 @@ import {
 import {
   RichTextContent,
   RichTextEditor
-} from "./chunk-MUTJVDM6.js";
+} from "./chunk-I3EF5SF2.js";
 import {
   DatePicker,
   SelectDateRange,
   TimePanel
-} from "./chunk-G47MREYI.js";
+} from "./chunk-UCQZZ2YC.js";
 import {
   Checkbox,
   FloatingScrollbarProvider,
@@ -109,7 +109,7 @@ import {
   Tree,
   useOverlayLifecycle,
   useScrollbarProximity
-} from "./chunk-VXSG4EAO.js";
+} from "./chunk-LPRFOSRZ.js";
 import {
   Dropdown,
   FILLED_ICON_NAMES,
@@ -120,7 +120,7 @@ import {
   PopupPortal,
   Segmented,
   Steps
-} from "./chunk-ALWHRV4L.js";
+} from "./chunk-SUMXP2SF.js";
 import {
   Button
 } from "./chunk-TZGUBGA4.js";

package/dist/rich-text-editor.cjs

@@ -1112,7 +1112,8 @@ function MenuEntry({
   item,
   level,
   parents,
-  props
+  props,
+  reserveIcon
 }) {
   const anchorRef = (0, import_react5.useRef)(null);
   const closeTimerRef = (0, import_react5.useRef)(void 0);
@@ -1161,7 +1162,7 @@ function MenuEntry({
             "aria-expanded": hasChildren ? isOpen : void 0,
             onClick: (event) => hasChildren ? props.toggle(item.key) : props.select(item, path, event),
             children: [
-              item.icon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sia-menu__icon", children: item.icon }) : null,
+              reserveIcon ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sia-menu__icon", "aria-hidden": !item.icon || void 0, children: item.icon }) : null,
               !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sia-menu__label", children: item.label }) : null,
               !collapsed && item.extra ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "sia-menu__extra", children: item.extra }) : null,
               !collapsed && hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { className: "sia-menu__expand-icon", name: "chevron-down", size: 13 }) : null
@@ -1185,19 +1186,23 @@ function MenuEntry({
     }
   );
 }
+function hasMenuIcon(items) {
+  return items.some((item) => item.type === "group" ? hasMenuIcon(item.children ?? []) : item.type !== "divider" && Boolean(item.icon));
+}
 function MenuLevel({
   items,
   level,
   parents,
-  props
+  props,
+  reserveIcon = hasMenuIcon(items)
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, { children: items.map((item, index) => {
     if (item.type === "divider") return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("li", { className: "sia-menu__divider", role: "separator" }, item.key || `divider-${index}`);
     if (item.type === "group") return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "sia-menu__group", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sia-menu__group-title", children: item.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { role: "group", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props }) })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { role: "group", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuLevel, { items: item.children ?? [], level: level + 1, parents: [...parents, item.key], props, reserveIcon }) })
     ] }, item.key);
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuEntry, { item, level, parents, props }, item.key);
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuEntry, { item, level, parents, props, reserveIcon }, item.key);
   }) });
 }
 function Menu({

package/dist/rich-text-editor.js

@@ -1,8 +1,8 @@
 import {
   RichTextContent,
   RichTextEditor
-} from "./chunk-MUTJVDM6.js";
-import "./chunk-ALWHRV4L.js";
+} from "./chunk-I3EF5SF2.js";
+import "./chunk-SUMXP2SF.js";
 import "./chunk-TZGUBGA4.js";
 import "./chunk-3VJ4CZDQ.js";
 export {

package/dist/select-date-range.js

@@ -1,8 +1,8 @@
 import {
   SelectDateRange
-} from "./chunk-G47MREYI.js";
-import "./chunk-VXSG4EAO.js";
-import "./chunk-ALWHRV4L.js";
+} from "./chunk-UCQZZ2YC.js";
+import "./chunk-LPRFOSRZ.js";
+import "./chunk-SUMXP2SF.js";
 import "./chunk-TZGUBGA4.js";
 import "./chunk-3VJ4CZDQ.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.17",
+  "version": "0.1.18",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",