react-better-html 1.1.272 → 1.1.274

package/dist/index.d.mts

@@ -1091,6 +1091,7 @@ type SideMenuItem = {
     onClick?: (item: SideMenuItem) => void;
 } | {
     type: "divider";
+    shortText?: string;
 });
 type SideMenuProps = {
     items: SideMenuItem[];

package/dist/index.d.ts

@@ -1091,6 +1091,7 @@ type SideMenuItem = {
     onClick?: (item: SideMenuItem) => void;
 } | {
     type: "divider";
+    shortText?: string;
 });
 type SideMenuProps = {
     items: SideMenuItem[];

package/dist/index.js

@@ -1606,7 +1606,11 @@ var IconElement = import_styled_components3.default.svg.withConfig({
 var Icon = (0, import_react5.forwardRef)(function Icon2({ name, size = 16, ...props }, ref) {
   const theme2 = (0, import_react_better_core5.useTheme)();
   const { icons: icons2 } = (0, import_react_better_core5.useBetterCoreContext)();
-  const { style, hoverStyle, restProps } = useComponentPropsGrouper(props);
+  const {
+    style: { fill, stroke, strokeColor, ...restStyle },
+    hoverStyle,
+    restProps
+  } = useComponentPropsGrouper(props);
   const dataProps = useComponentPropsWithPrefix(restProps, "data");
   const ariaProps = useComponentPropsWithPrefix(restProps, "aria");
   const svgColor = props.color ?? theme2.colors.textPrimary;
@@ -1627,7 +1631,7 @@ var Icon = (0, import_react5.forwardRef)(function Icon2({ name, size = 16, ...pr
       xmlns: "http://www.w3.org/2000/svg",
       theme: theme2,
       hoverColor: svgHoverColorColor,
-      style,
+      style: restStyle,
       hoverStyle,
       ...restProps,
       ...dataProps,
@@ -1638,8 +1642,8 @@ var Icon = (0, import_react5.forwardRef)(function Icon2({ name, size = 16, ...pr
         {
           ...path,
           className: path.type === "fill" ? "react-better-html-icon-path-with-fill" : "react-better-html-icon-path-with-stroke",
-          fill: path.type === "fill" ? svgColor : void 0,
-          stroke: path.type === "stroke" ? svgColor : void 0,
+          fill: path.type === "fill" ? fill ?? svgColor : void 0,
+          stroke: path.type === "stroke" ? strokeColor ?? stroke ?? svgColor : void 0,
           key: path.d
         }
       ))
@@ -8103,7 +8107,31 @@ var MenuItemTypeItem = (0, import_react31.memo)(function MenuItemTypeItem2({
 });
 var MenuItemTypeDivider = (0, import_react31.memo)(function MenuItemTypeDivider2({ item }) {
   const theme2 = (0, import_react_better_core29.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default.row, { paddingTop: theme2.styles.space, paddingInline: theme2.styles.gap, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Text_default, { fontSize: 12, fontWeight: 700, textTransform: "uppercase", color: theme2.colors.textSecondary, children: item.text }) });
+  const { sideMenuIsCollapsed } = useBetterHtmlContextInternal();
+  const isCollapsed = sideMenuIsCollapsed && !item.shortText;
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    Div_default.row,
+    {
+      maxHeight: !isCollapsed ? 30 : 0,
+      paddingTop: !isCollapsed ? theme2.styles.space : theme2.styles.gap / 2,
+      paddingInline: theme2.styles.gap,
+      overflow: "hidden",
+      transition: `max-height ${theme2.styles.transition}, padding-top ${theme2.styles.transition}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        Text_default,
+        {
+          width: "100%",
+          fontSize: 12,
+          fontWeight: 700,
+          textTransform: "uppercase",
+          textAlign: sideMenuIsCollapsed ? "center" : void 0,
+          color: theme2.colors.textSecondary,
+          whiteSpace: "nowrap",
+          children: sideMenuIsCollapsed ? item.shortText : item.text
+        }
+      )
+    }
+  );
 });
 var MenuItemComponent = (0, import_react31.memo)(function MenuItemComponent2({ item, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Div_default, { width: "100%", children: item.type === "item" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItemTypeItem, { item, ...props }) : item.type === "divider" ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItemTypeDivider, { item }) : void 0 });