@luscii-healthtech/web-ui 42.3.0 → 42.4.0

package/dist/index.development.js

@@ -5241,6 +5241,7 @@ const Summary = (_a) => {
 DetailsDisclosure.Summary = Summary;
 Summary.OpenIndicator = OpenIndicator;
 
+const DEFAULT_TEXT_CLASS_NAME = "ui:text-[#162130]";
 const context$1 = React.createContext({
   variant: "primary"
 });
@@ -5251,7 +5252,9 @@ const VerticalMenu = (props) => {
   const shouldShowCollapseButton = localization && Boolean(onCollapseButtonClick);
   const hasHeaderContent = title || shouldShowCollapseButton;
   const contextValue = React.useMemo(() => ({ variant }), [variant]);
-  return jsxRuntime.jsx(context$1.Provider, { value: contextValue, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div", px: "xxs", py: "m", align: "normal", className: classNames__default.default("ui:max-w-full ui:text-slate-800", className) }, rest, { children: [header && jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: hasHeaderContent ? "m" : void 0, align: "start", justify: "between", width: "full", children: [title && jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Text, { variant: "lg-strong", children: title }) }), shouldShowCollapseButton && jsxRuntime.jsx(
+  return jsxRuntime.jsx(context$1.Provider, { value: contextValue, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div", px: "xxs", py: "m", align: "normal", className: classNames__default.default("ui:max-w-full", {
+    [DEFAULT_TEXT_CLASS_NAME]: isCollapsed
+  }, className) }, rest, { children: [header && jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: hasHeaderContent ? "m" : void 0, align: "start", justify: "between", width: "full", children: [title && jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Text, { variant: "lg-strong", children: title }) }), shouldShowCollapseButton && jsxRuntime.jsx(
     Box,
     {
       /**
@@ -5276,7 +5279,7 @@ const VerticalMenu = (props) => {
         children: jsxRuntime.jsx(SidebarIcon, {})
       }) })
     }
-  )] }), isPrimaryVariant && hasHeaderContent && jsxRuntime.jsx(VerticalMenu.Divider, {}), jsxRuntime.jsx("div", { children: props.children }), jsxRuntime.jsx("div", { className: "ui:mt-auto", children: footer })] })) });
+  )] }), isPrimaryVariant && hasHeaderContent && jsxRuntime.jsx(VerticalMenu.Divider, {}), jsxRuntime.jsx(Stack, { width: "full", gap: isCollapsed ? "xxs" : void 0, children: props.children }), jsxRuntime.jsx("div", { className: "ui:mt-auto", children: footer })] })) });
 };
 VerticalMenu.Divider = MenuDivider;
 VerticalMenu.Item = MenuItem;
@@ -5288,19 +5291,36 @@ VerticalMenu.ItemGroup = MenuItemGroup;
 VerticalMenu.SectionTitle = SectionTitle;
 function MenuItemText(props) {
   const { variant: menuVariant } = React.useContext(context$1);
-  return jsxRuntime.jsx(Text, Object.assign({ as: "span", color: "current", variant: menuVariant === "primary" ? "base" : props.variant }, props, { className: classNames__default.default("ui:sm:leading-[24px]", props.className) }));
+  const isCollapsed = menuVariant === "primary-collapsed";
+  const shouldTruncate = isCollapsed || Boolean(props.truncate);
+  const getMenuVariant = () => {
+    switch (menuVariant) {
+      case "primary":
+        return "base";
+      case "primary-collapsed":
+        return "sm";
+      default:
+        return props.variant;
+    }
+  };
+  return jsxRuntime.jsx(Text, Object.assign({ as: "span", color: "current", variant: getMenuVariant(), truncate: shouldTruncate }, props, { className: classNames__default.default({
+    "ui:sm:leading-[16px]": isCollapsed,
+    "ui:sm:leading-[24px]": !isCollapsed
+  }, {
+    "ui:max-w-18": isCollapsed
+  }, props.className) }));
 }
 const useGetClassName = () => {
   const { variant } = React.useContext(context$1);
   return React.useCallback(
     // eslint-disable-next-line consistent-return
     ({ isActive = false, classNameProp = "" } = {}) => {
-      const base = "ui:block ui:w-full ui:py-xs ui:radius-xxs ui:text-current";
+      const base = "ui:block ui:w-full ui:radius-xxs ui:text-current";
       switch (variant) {
         case "primary":
-        case "primary-collapsed":
           return classNames__default.default(
             base,
+            "ui:py-xs",
             "ui:px-m",
             // Transitions
             "ui:transition-[color,background,transform]",
@@ -5312,8 +5332,26 @@ const useGetClassName = () => {
             },
             classNameProp
           );
+        case "primary-collapsed":
+          return classNames__default.default(
+            base,
+            "ui:py-xxs",
+            "ui:px-xxxxs",
+            // Transitions
+            "ui:transition-[color,background,transform]",
+            // States
+            "ui:hover:bg-primary-background ui:active:scale-[0.98]",
+            {
+              "ui:bg-transparent ui:text-on-surface": !isActive,
+              "ui:bg-primary-background-active ui:text-primary": isActive,
+              // Style the icon inside the menu item
+              "ui:[&_.menu-icon]:text-[#3a4657]": !isActive,
+              "ui:hover:[&_.menu-icon]:text-[#162130]": true
+            },
+            classNameProp
+          );
         case "secondary":
-          return classNames__default.default(base, "ui:hover:text-primary ui:focus:text-primary ui:active:scale-[0.98]", {
+          return classNames__default.default(base, "ui:py-xs", "ui:hover:text-primary ui:focus:text-primary ui:active:scale-[0.98]", {
             ["ui:[&_span]:font-bold"]: isActive
           }, classNameProp);
       }
@@ -5341,12 +5379,12 @@ function MenuItemLayout(props) {
     return jsxRuntime.jsx("div", { children });
   }
   const itemIsTextOrNumber = typeof text === "string" || typeof text === "number";
-  return jsxRuntime.jsxs("div", { className: classNames__default.default("ui:relative ui:flex ui:items-start ui:gap-xxs", className), children: [icon && /**
+  return jsxRuntime.jsxs(Stack, { axis: isCollapsed ? "y" : "x", align: isCollapsed ? "center" : "start", gap: isCollapsed ? "xxxxs" : "xxs", className: classNames__default.default("ui:relative", className), children: [icon && /**
    * If the item is a text or number, we can to add an aria-label to the icon
    * so that it can be read by screen readers. If the item is not a text or
    * number, there's not much we can do and accessibility is up to the consumer.
    */
-  jsxRuntime.jsx("span", { "aria-label": itemIsTextOrNumber ? String(text) : void 0, children: icon }), text && !isCollapsed && jsxRuntime.jsx(MenuItemText, { children: text }), aside && jsxRuntime.jsx("span", { className: "ui:ml-auto", children: aside }), notificationBubbleText && !isCollapsed && jsxRuntime.jsx("span", { className: "ui:ml-auto", children: jsxRuntime.jsx(MenuItemNotificationBubble, { children: notificationBubbleText }) }), notificationBubbleText && isCollapsed && jsxRuntime.jsx("span", { "aria-label": notificationBubbleText, className: "ui:absolute ui:right-[-8px] ui:top-[-4px] ui:h-[8px] ui:w-[8px] ui:rounded-full ui:bg-red-500" })] });
+  jsxRuntime.jsx("span", { className: "menu-icon", "aria-label": itemIsTextOrNumber ? String(text) : void 0, children: icon }), text && jsxRuntime.jsx(MenuItemText, { children: text }), aside && !isCollapsed && jsxRuntime.jsx("span", { className: "ui:ml-auto", children: aside }), notificationBubbleText && !isCollapsed && jsxRuntime.jsx("span", { className: "ui:ml-auto", children: jsxRuntime.jsx(MenuItemNotificationBubble, { children: notificationBubbleText }) }), notificationBubbleText && isCollapsed && jsxRuntime.jsx("span", { "aria-label": notificationBubbleText, className: "ui:absolute ui:right-[16px] ui:top-[-4px] ui:h-[8px] ui:w-[8px] ui:rounded-full ui:bg-red-500" })] });
 }
 function MenuItemPadding(props) {
   const { variant } = React.useContext(context$1);
@@ -5369,7 +5407,7 @@ function MenuItemNotificationBubble(props) {
   ), children: jsxRuntime.jsx(Text, { color: "white", as: "span", className: "ui:align-text-bottom", children: props.children }) });
 }
 function MenuDivider(props) {
-  return jsxRuntime.jsx(Box, { my: "xxs", children: jsxRuntime.jsx(Divider, Object.assign({ className: "ui:border-neutral-border-high-contrast ui:last:border-b-1" }, props)) });
+  return jsxRuntime.jsx(Box, { width: "full", my: "xxs", children: jsxRuntime.jsx(Divider, Object.assign({ className: "ui:border-neutral-border-high-contrast ui:last:border-b-1 ui:w-full" }, props)) });
 }
 function MenuItemGroupOpenIndicator({ isOpen }) {
   return jsxRuntime.jsx(Text, { color: "on-surface", as: "span", children: jsxRuntime.jsx(ChevronDownIcon, { className: classNames__default.default("ui:shrink-0 ui:transition-transform", {
@@ -5377,8 +5415,8 @@ function MenuItemGroupOpenIndicator({ isOpen }) {
   }) }) });
 }
 function MenuItemGroup(_a) {
-  var { title, children } = _a, rest = __rest(_a, ["title", "children"]);
-  return jsxRuntime.jsxs(DetailsDisclosure, Object.assign({}, rest, { children: [jsxRuntime.jsx(DetailsDisclosure.Summary, { hoverBackgroundColor: void 0, pl: void 0, omitOpenIndicator: true, children: jsxRuntime.jsx(MenuItemLayout, { children: jsxRuntime.jsx(MenuItemPadding, { children: jsxRuntime.jsxs(Stack, { axis: "x", align: "center", justify: "between", children: [jsxRuntime.jsx(MenuItemText, { children: title }), jsxRuntime.jsx(DetailsDisclosure.Summary.OpenIndicator, { component: MenuItemGroupOpenIndicator })] }) }) }) }), jsxRuntime.jsx(MenuItemPadding, { paddingX: true, paddingY: false, children })] }));
+  var { title, children, className } = _a, rest = __rest(_a, ["title", "children", "className"]);
+  return jsxRuntime.jsxs(DetailsDisclosure, Object.assign({ className: classNames__default.default("ui:w-full", className) }, rest, { children: [jsxRuntime.jsx(DetailsDisclosure.Summary, { hoverBackgroundColor: void 0, pl: void 0, omitOpenIndicator: true, children: jsxRuntime.jsx(MenuItemLayout, { children: jsxRuntime.jsx(MenuItemPadding, { children: jsxRuntime.jsxs(Stack, { axis: "x", align: "center", justify: "between", children: [jsxRuntime.jsx(MenuItemText, { children: title }), jsxRuntime.jsx(DetailsDisclosure.Summary.OpenIndicator, { component: MenuItemGroupOpenIndicator })] }) }) }) }), jsxRuntime.jsx(MenuItemPadding, { paddingX: true, paddingY: false, children })] }));
 }
 function SectionTitle(props) {
   return jsxRuntime.jsx(MenuItemPadding, { children: jsxRuntime.jsx(Text, { variant: "strong", children: props.children }) });