@luscii-healthtech/web-ui 40.3.3 → 40.3.5

package/dist/.storybook/constants.d.ts

@@ -1,10 +1,26 @@
-export declare enum BADGES {
-    NEEDS_REVISION = "needs-revision",
-    DOCUMENTED = "documented",
-    STABLE = "stable",
-    NEW = "new",
-    DEPRECATED = "deprecated"
-}
+import { type Meta } from "@storybook/react-webpack5";
+export declare const BADGES: {
+    readonly NEEDS_REVISION: "needs-revision";
+    readonly DOCUMENTED: "documented";
+    readonly STABLE: "stable";
+    readonly NEW: "new";
+    readonly DEPRECATED: "deprecated";
+};
+type TAGS = (typeof BADGES)[keyof typeof BADGES][];
+/**
+ * A drop-in replacements for `"@storybook/react-webpack5"`'s Meta type which extends the type with web-ui's tags.
+ *
+ * @example
+ *
+ * const meta = {
+ *  title: "Layout/SplitViewLayout",
+ *  component: Component,
+ *  tags: ["new"], // `tags` is now type-checked and auto-completes
+ * } satisfies MMeta<typeof Component>;
+ */
+export type MMeta<T> = Meta<T> & {
+    tags: TAGS;
+};
 /**
  * For stories specifically used in the Docs page that are not intended
  * to be used for snapshots. E.g. stories that are used to demonstrate
@@ -16,3 +32,4 @@ export declare const NO_SNAPSHOT_PARAMS: {
         disableSnapshot: boolean;
     };
 };
+export {};

package/dist/.storybook/decorators.d.ts

@@ -1,4 +1,4 @@
-import { Decorator } from "@storybook/react";
+import { Decorator } from "@storybook/react-webpack5";
 import { ModalDialog } from "../src";
 import { ComponentProps, HTMLAttributes, ReactNode } from "react";
 export declare const LocaleDecorator: Decorator;

package/dist/index.development.js

@@ -4954,12 +4954,12 @@ const FullPageModal = ({ children, dataTestId, isOpen = false, onCloseClick, pri
 FullPageModal.Actions = FullPageModalActions;
 FullPageModal.setAppElement = ReactModal__default.default.setAppElement;
 
-const context$2 = React.createContext({ isOpen: false });
+const context$3 = React.createContext({ isOpen: false });
 const DetailsDisclosure = (_a) => {
   var { children, onToggleDetails, name, onToggle, openByDefault, open } = _a, rest = __rest(_a, ["children", "onToggleDetails", "name", "onToggle", "openByDefault", "open"]);
   const [internalIsOpen, setInternalIsOpen] = React.useState(openByDefault !== null && openByDefault !== void 0 ? openByDefault : false);
   const isOpen = open !== null && open !== void 0 ? open : internalIsOpen;
-  return jsxRuntime.jsx(context$2.Provider, { value: { isOpen }, children: jsxRuntime.jsx(Box, Object.assign({
+  return jsxRuntime.jsx(context$3.Provider, { value: { isOpen }, children: jsxRuntime.jsx(Box, Object.assign({
     as: "details",
     /**
      * This "name" attribute triggers a type-error on "details" eventhough it should be valid
@@ -4981,18 +4981,18 @@ const DefaultOpenIndicator = ({ isOpen }) => {
   }) });
 };
 const OpenIndicator = ({ component: Component = DefaultOpenIndicator }) => {
-  const { isOpen } = React.useContext(context$2);
+  const { isOpen } = React.useContext(context$3);
   return jsxRuntime.jsx(Component, { isOpen });
 };
 const Summary = (_a) => {
   var { children, omitOpenIndicator = false } = _a, rest = __rest(_a, ["children", "omitOpenIndicator"]);
-  const { isOpen } = React.useContext(context$2);
+  const { isOpen } = React.useContext(context$3);
   return jsxRuntime.jsx(Stack, Object.assign({ as: "summary", pl: "s", hoverBackgroundColor: "blue", cursor: "pointer" }, rest, { children: jsxRuntime.jsx(Stack, { axis: "x", justify: "between", align: "center", width: "full", children: jsxRuntime.jsxs(Stack, { axis: "x", width: "full", align: "center", gap: "xxs", children: [!omitOpenIndicator && jsxRuntime.jsx(DefaultOpenIndicator, { isOpen }), jsxRuntime.jsx(Box, { width: "full", children })] }) }) }));
 };
 DetailsDisclosure.Summary = Summary;
 Summary.OpenIndicator = OpenIndicator;
 
-const context$1 = React.createContext({
+const context$2 = React.createContext({
   variant: "primary"
 });
 const VerticalMenu = (props) => {
@@ -5001,7 +5001,7 @@ const VerticalMenu = (props) => {
   const isCollapsed = variant === "primary-collapsed";
   const shouldShowCollapseButton = localization && Boolean(onCollapseButtonClick);
   const hasHeaderContent = title || shouldShowCollapseButton;
-  return jsxRuntime.jsx(context$1.Provider, { value: { variant }, 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$2.Provider, { value: { variant }, 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(
     Box,
     {
       /**
@@ -5036,11 +5036,11 @@ VerticalMenu.ItemPadding = MenuItemPadding;
 VerticalMenu.NotificationBubble = MenuItemNotificationBubble;
 VerticalMenu.ItemGroup = MenuItemGroup;
 function MenuItemText(props) {
-  const { variant: menuVariant } = React.useContext(context$1);
+  const { variant: menuVariant } = React.useContext(context$2);
   return jsxRuntime.jsx(Text, Object.assign({ as: "span", color: "current", variant: menuVariant === "primary" ? "strong" : props.variant }, props, { className: classNames__default.default("ui:sm:leading-[24px]", props.className) }));
 }
 const useGetClassName = () => {
-  const { variant } = React.useContext(context$1);
+  const { variant } = React.useContext(context$2);
   return React.useCallback(
     // eslint-disable-next-line consistent-return
     ({ isActive = false, classNameProp = "" } = {}) => {
@@ -5083,7 +5083,7 @@ function MenuItem(props) {
   return (_a = props.render) === null || _a === void 0 ? void 0 : _a.call(props, { getClassName });
 }
 function MenuItemLayout(props) {
-  const { variant } = React.useContext(context$1);
+  const { variant } = React.useContext(context$2);
   const { icon, text, aside, notificationBubbleText, className, children } = props;
   const isCollapsed = variant === "primary-collapsed";
   if (children) {
@@ -5098,7 +5098,7 @@ function MenuItemLayout(props) {
   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" })] });
 }
 function MenuItemPadding(props) {
-  const { variant } = React.useContext(context$1);
+  const { variant } = React.useContext(context$2);
   const { children, className, paddingX = variant === "primary", paddingY = true } = props;
   return jsxRuntime.jsx("div", { className: classNames__default.default({
     "ui:px-m": paddingX,
@@ -5604,10 +5604,10 @@ const Collapse = (props) => {
   return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { className: buttonClassName, onClick, "aria-expanded": !isCollapsed, children: [jsxRuntime.jsx("div", { className: contentClassName, children }), isCollapsed && showMoreIndicator && moreIndicator] }) });
 };
 
-const context = React.createContext({
+const context$1 = React.createContext({
   $dialog: null
 });
-const useModalDialog = () => React.useContext(context);
+const useModalDialog = () => React.useContext(context$1);
 const ModalDialog = (_a) => {
   var { open, className, size, onClose, children, variant = "centered-dialog" } = _a, rest = __rest(_a, ["open", "className", "size", "onClose", "children", "variant"]);
   const dialog = React.useRef(null);
@@ -5639,7 +5639,7 @@ const ModalDialog = (_a) => {
       (_b = dialog.current) === null || _b === void 0 ? void 0 : _b.close();
     }
   }, [open, variant]);
-  return jsxRuntime.jsx(context.Provider, { value: { $dialog: dialog.current }, children: jsxRuntime.jsx("dialog", Object.assign({ ref: dialog, className: classes, onClose }, rest, { children: jsxRuntime.jsx(Stack, { width: "full", align: "stretch", backgroundColor: "surface", borderRadiusLeft: variant === "side-modal" ? "m" : "none", borderRadius: variant === "centered-dialog" ? "m" : "none", className: classNames__default.default({
+  return jsxRuntime.jsx(context$1.Provider, { value: { $dialog: dialog.current }, children: jsxRuntime.jsx("dialog", Object.assign({ ref: dialog, className: classes, onClose }, rest, { children: jsxRuntime.jsx(Stack, { width: "full", align: "stretch", backgroundColor: "surface", borderRadiusLeft: variant === "side-modal" ? "m" : "none", borderRadius: variant === "centered-dialog" ? "m" : "none", className: classNames__default.default({
     "ui:max-h-[calc(100dvh-(var(--ui-spacing-xl))*2)]": variant === "centered-dialog",
     "ui:h-screen": variant === "side-modal" || variant === "full-screen",
     "ui:w-screen": variant === "full-screen"
@@ -5771,22 +5771,44 @@ const AlertWidget = (props) => {
   }), borderRadius: "xxs", px: "xxs", py: "xxxxs", axis: "x", gap: "xxs", align: "center", children: [jsxRuntime.jsx(IconComponent, {}), typeof props.content === "string" ? jsxRuntime.jsx(Text, { color: contentTextColor, variant: "strong", children: props.content }) : props.content] });
 };
 
+const context = React.createContext(false);
 const SplitViewLayout = (props) => {
   const { open = true, aside, children } = props, restProps = __rest(props, ["open", "aside", "children"]);
-  const classesMain = classNames__default.default("ui:transition-[max-width] ui:ease-in-out ui:duration-[300ms]", "ui:contain-size ui:h-full ui:absolute ui:left-0 ui:top-0", {
+  const classesMain = classNames__default.default("ui:transition-[max-width] ui:ease-in-out ui:duration-[300ms]", "ui:contain-[strict] ui:h-full ui:absolute ui:left-0 ui:top-0", {
     "ui:max-w-[100vw] ui:lg:max-w-[calc(100vw-(--spacing(132)))] ui:w-full": open,
     "ui:max-w-[100vw] ui:w-full": !open
   });
-  const classesAside = classNames__default.default("ui:transition-[translate,opacity,display] ui:ease-in-out ui:duration-[300ms]", "ui:max-w-[100vw] ui:w-full ui:h-full", "ui:contain-strict ui:absolute ui:top-0 ui:right-0 ui:h-full ui:max-w-[--spacing(132)] ui:w-full ui:transition-discrete ui:starting:translate-x-[calc(100vw)] ui:starting:opacity-[0] ui:z-20", {
-    "ui:translate-x-[0]": open,
-    "ui:translate-x-[--spacing(132)] ui:opacity-0 ui:hidden": !open
-  });
-  const classNamesOverlay = classNames__default.default("ui:transition-[opacity,display] ui:ease-in-out ui:duration-[300ms] ui:transition-discrete ui:starting:opacity-0 ui:z-10", "ui:absolute ui:top-0 ui:left-0 ui:w-screen ui:h-screen ui:bg-black ui:lg:hidden", {
+  const classNamesOverlay = classNames__default.default("ui:contain-[strict] ui:transition-[opacity,display] ui:ease-in-out ui:duration-[300ms] ui:transition-discrete ui:starting:opacity-0 ui:z-10", "ui:absolute ui:top-0 ui:left-0 ui:w-screen ui:h-screen ui:bg-black ui:lg:hidden", {
     "ui:hidden ui:opacity-0": !open,
     "ui:visible ui:lg:hidden ui:opacity-[0.2]": open
   });
-  return jsxRuntime.jsxs(Stack, Object.assign({ axis: "x", width: "full", className: "ui:h-full ui:w-full" }, restProps, { children: [jsxRuntime.jsx(Stack, { as: "main", className: classesMain, width: "full", align: "stretch", children }), jsxRuntime.jsx(Stack, { as: "aside", className: classesAside, hidden: !open, width: "full", align: "stretch", children: aside }), jsxRuntime.jsx(Box, { className: classNamesOverlay })] }));
+  return jsxRuntime.jsx(context.Provider, { value: open, children: jsxRuntime.jsxs(Stack, Object.assign({ axis: "x", width: "full", className: "ui:h-100dvh" }, restProps, { children: [jsxRuntime.jsx(Box, { as: "main", className: classesMain, width: "full", children }), aside, jsxRuntime.jsx(Box, { className: classNamesOverlay })] })) });
+};
+const Aside = (props) => {
+  const { children, className } = props, restProps = __rest(props, ["children", "className"]);
+  const open = React.useContext(context);
+  const classesAside = classNames__default.default("ui:inset-auto ui:w-full ui:flex ui:items-stretch ui:bg-transparent", "ui:contain-[layout_size] ui:transition-[translate,opacity,display] ui:ease-in-out ui:duration-[300ms]", "ui:w-full ui:h-full", "ui:absolute ui:top-0 ui:right-0 ui:h-full ui:max-w-[--spacing(132)] ui:w-full ui:transition-discrete ui:starting:translate-x-[calc(100vw)] ui:starting:opacity-[0] ui:z-20", {
+    "ui:translate-x-[0]": open,
+    "ui:translate-x-[--spacing(132)] ui:opacity-0 ui:hidden": !open
+  }, className);
+  const dialog = React.useRef(null);
+  const focusDialog = (e) => {
+    if (e.target instanceof HTMLDialogElement) {
+      e.target.focus();
+    }
+  };
+  React.useEffect(() => {
+    if (dialog.current) {
+      dialog.current.addEventListener("transitionend", focusDialog);
+    }
+    return () => {
+      var _a;
+      (_a = dialog.current) === null || _a === void 0 ? void 0 : _a.removeEventListener("transitionend", focusDialog);
+    };
+  }, [open]);
+  return jsxRuntime.jsx("dialog", Object.assign({ open, ref: dialog, className: classesAside }, restProps, { children }));
 };
+SplitViewLayout.Aside = Aside;
 
 Object.defineProperty(exports, "Toaster", {
     enumerable: true,