react-better-html 1.1.273 → 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

@@ -8107,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 });