@luscii-healthtech/web-ui 35.10.1 → 35.12.0

package/dist/components/ModalDialog/ModalDialog.d.ts

@@ -0,0 +1,74 @@
+import React, { ComponentProps, FC } from "react";
+import { Card } from "../Card/Card";
+import { Box } from "../Box/Box";
+import { Stack } from "../Stack/Stack";
+import { TertiaryButton } from "../ButtonV2/TertiaryButton";
+type Size = "s" | "m" | "l";
+type Props = Omit<React.ComponentPropsWithoutRef<"dialog">, "open" | "onClose"> & {
+    /**
+     * Triggers `showModal` or `close` on the internal `<dialog />` element when set.
+     *
+     * Note: the user is able to close the modal outside of this props control. This means a two-way binding with the modal needs to be establised.
+     *
+     * This should be done by implementing the ModalDialog's onClose prop so it updates the `open` prop accordingly.
+     *
+     * @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#creating_a_modal_dialog
+     */
+    open: boolean;
+    /**
+     * Called when the internal dialog's `onClose` event is triggered.
+     *
+     * This callback is mandatory as the implementer should always take into account a `<dialog />` can be closed by the user.
+     *
+     * This callback should be used to update any application state (open) accordingly.
+     */
+    onClose: React.DialogHTMLAttributes<HTMLDialogElement>["onClose"];
+    /**
+     * Determines the max-width of the modal.
+     */
+    size?: Size;
+};
+type SubComponents = {
+    /**
+     * Represents the header of the ModalDialog. Applies consistent padding.
+     */
+    Header: typeof Header;
+    /**
+     * Default title presentation of the ModalDialog.
+     *
+     * To be placed inside of the ModalDialog's header.
+     */
+    Title: typeof Card.Title;
+    /**
+     * A control represeting the close button of the Dialog using a cross icon.
+     *
+     * To be placed inside of the ModalDialog's header.
+     */
+    CloseButton: typeof CloseButton;
+    /**
+     * Applies consistent padding and manages the scroll overflow of the ModalDialog's content,
+     * ensuring the Modal does not overflow the users' viewport vertically.
+     *
+     * To be placed inside of the ModalDialog's header.
+     */
+    Body: typeof Body;
+    /**
+     * Represents the footer of the ModalDialog.
+     * Applies consistent padding and a background color of type "background".
+     */
+    Footer: typeof Footer;
+    /**
+     * Groups together the primary actions of the Modal.
+     * These actions should be placed in the Footer of the Modal.
+     *
+     * To be placed inside of the ModalDialog's footer.
+     */
+    Actions: typeof Actions;
+};
+export declare const ModalDialog: FC<Props> & SubComponents;
+export declare const Body: FC<ComponentProps<typeof Box>>;
+export declare const Header: FC<ComponentProps<typeof Box>>;
+export declare const Footer: FC<ComponentProps<typeof Stack>>;
+export declare const CloseButton: FC<ComponentProps<typeof TertiaryButton>>;
+export declare const Actions: FC<ComponentProps<typeof Stack>>;
+export {};

package/dist/index.d.ts

@@ -107,3 +107,4 @@ export { HoverIndicatorControl } from "./components/HoverIndicatorControl/HoverI
 export { Collapse } from "./components/Collapse/Collapse";
 export { Skeleton } from "./components/Skeleton/Skeleton";
 export { DetailsDisclosure } from "./components/DetailsDisclosure/DetailsDisclosure";
+export { ModalDialog } from "./components/ModalDialog/ModalDialog";

package/dist/index.development.js

@@ -5962,7 +5962,7 @@ function MenuDivider(props) {
   return React__namespace.default.createElement(Divider, Object.assign({ className: "ui-m-1 ui-my-xxs last:ui-border-b-1" }, props));
 }
 
-const Actions = (props) => {
+const Actions$1 = (props) => {
   const { children, className } = props, rest = __rest(props, ["children", "className"]);
   return React__namespace.default.createElement("div", Object.assign({}, rest, { className: classNames__default.default(
     /**
@@ -5994,7 +5994,7 @@ function TopBar(props) {
   const { children } = props, rest = __rest(props, ["children"]);
   return React__namespace.default.createElement("div", Object.assign({}, rest, { className: classNames__default.default("ui-my-4", props.className) }), children);
 }
-TopBar.Actions = Actions;
+TopBar.Actions = Actions$1;
 
 function Card(props) {
   const { actions: __, as: Element = "div", children, border, className, elevation, elevationOnHover, padding = true, title: _ } = props, rest = __rest(props, ["actions", "as", "children", "border", "className", "elevation", "elevationOnHover", "padding", "title"]);
@@ -6022,7 +6022,7 @@ Card.Title = (props) => React__namespace.default.createElement(Title, Object.ass
 Card.TopBar = TopBar;
 Card.Padding = Padding;
 Card.Section = Section;
-Card.Actions = Actions;
+Card.Actions = Actions$1;
 function RenderTopBar(props) {
   const { title, actions } = props;
   if (title && actions) {
@@ -6033,7 +6033,7 @@ function RenderTopBar(props) {
         TopBar,
         { className: "ui-flex ui-flex-wrap ui-items-center ui-justify-between" },
         React__namespace.default.createElement(Title, { type: "sm" }, title),
-        React__namespace.default.createElement(Actions, null, actions)
+        React__namespace.default.createElement(Actions$1, null, actions)
       )
     );
   }
@@ -6044,7 +6044,7 @@ function RenderTopBar(props) {
       React__namespace.default.createElement(
         TopBar,
         null,
-        React__namespace.default.createElement(Actions, null, actions)
+        React__namespace.default.createElement(Actions$1, null, actions)
       )
     );
   }
@@ -6762,6 +6762,58 @@ const Summary = (_a) => {
 };
 DetailsDisclosure.Summary = Summary;
 
+const ModalDialog = (_a) => {
+  var { open, className, size, onClose, children } = _a, rest = __rest(_a, ["open", "className", "size", "onClose", "children"]);
+  const dialog = React.useRef(null);
+  const classes = classNames__default.default(className, "ui-bg-transparent", "ui-max-w-[calc(100dvw-theme('spacing.xl'))]", {
+    "md:ui-w-80": size === "s",
+    "md:ui-w-132": size === "m",
+    "md:ui-w-216": size === "l"
+  });
+  React.useEffect(() => {
+    var _a2, _b;
+    if (open) {
+      (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.showModal();
+    } else {
+      (_b = dialog.current) === null || _b === void 0 ? void 0 : _b.close();
+    }
+  }, [open]);
+  return React__namespace.default.createElement(
+    "dialog",
+    Object.assign({ ref: dialog, className: classes, onClose }, rest),
+    React__namespace.default.createElement(
+      Card,
+      { padding: false },
+      React__namespace.default.createElement(Stack, { width: "full", align: "stretch", className: "ui-max-h-[calc(100dvh-theme('spacing.xl'))]" }, children)
+    )
+  );
+};
+const Body = (_a) => {
+  var { className } = _a, rest = __rest(_a, ["className"]);
+  const classes = classNames__default.default(className, "ui-overflow-y-auto ui-flex-1");
+  return React__namespace.default.createElement(Box, Object.assign({ className: classes, p: "m" }, rest));
+};
+const Header = (props) => {
+  return React__namespace.default.createElement(Stack, Object.assign({ axis: "x", justify: "between", align: "center", gap: "m", p: "m" }, props));
+};
+const Footer = (props) => {
+  return React__namespace.default.createElement(Stack, Object.assign({ p: "m", backgroundColor: "background" }, props));
+};
+const CloseButton = (props) => {
+  return React__namespace.default.createElement(TertiaryButton, Object.assign({ leadingIcon: React__namespace.default.createElement(CrossIcon, null) }, props));
+};
+const Actions = (_a) => {
+  var { className } = _a, rest = __rest(_a, ["className"]);
+  const classes = classNames__default.default(className, "ui-self-end");
+  return React__namespace.default.createElement(Stack, Object.assign({ axis: "x", gap: "xs", className: classes }, rest));
+};
+ModalDialog.Header = Header;
+ModalDialog.Title = Card.Title;
+ModalDialog.CloseButton = CloseButton;
+ModalDialog.Body = Body;
+ModalDialog.Footer = Footer;
+ModalDialog.Actions = Actions;
+
 Object.defineProperty(exports, 'Toaster', {
     enumerable: true,
     get: function () { return sonner.Toaster; }
@@ -6892,6 +6944,7 @@ exports.MediaPicker = MediaPicker;
 exports.MessageWithArrowIcon = MessageWithArrowIcon;
 exports.MessagesIcon = MessageWithArrowIcon;
 exports.Modal = Modal;
+exports.ModalDialog = ModalDialog;
 exports.MoreIcon = MoreIcon;
 exports.MouseIcon = MouseIcon;
 exports.NavLayout = NavLayout;