@luscii-healthtech/web-ui 11.1.1 → 11.3.0

package/dist/components/Icons/ExportIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from "./types/IconProps.type";
+declare const _default: (props: IconProps) => JSX.Element;
+export default _default;

package/dist/components/Icons/index.d.ts

@@ -17,6 +17,7 @@ export { default as EditIcon } from "./EditIcon";
 export { default as EmptyIcon } from "./EmptyIcon";
 export { default as EmptyStateDashboardIcon } from "./EmptyStateDashboardIcon";
 export { default as ExclamationMarkIcon } from "./ExclamationMarkIcon";
+export { default as ExportIcon } from "./ExportIcon";
 export { default as EyeIconSlashed } from "./EyeIconSlashed";
 export { default as EyeIcon } from "./EyeIcon";
 export { default as GearColoredIcon } from "./GearColoredIcon";

package/dist/components/NavMenu/NavLayout.d.ts

@@ -1,20 +1,35 @@
 import React from "react";
-export interface NavMenuLayoutProps {
+export interface Props extends React.ComponentPropsWithoutRef<"div"> {
     menu: React.ReactNode;
-    children: JSX.Element | JSX.Element[];
-    patientSidebar?: JSX.Element;
+    /**
+     * This property is used everywhere BUT in PatientPages.js, because the layout there works very differently than
+     * in the other pages. With JavaScript calculations for heights, etc to make sure everything fits.
+     */
+    pageHeader?: JSX.Element;
+    /**
+     * Rendered as the main page content.
+     */
+    children: React.ReactNode;
+    /**
+     * If passed will show the patients sidebar.
+     */
+    patientSidebar?: JSX.Element | null;
+    /**
+     * Don't show any navigation, for instance when constrained to a single patient.
+     */
     isNavDisabled?: boolean;
+    /**
+     * The patient overview page has some challenges we want to overcome in regards to the multiple scrollable
+     * content (the charts and the action bar with alerts, etc).
+     *
+     * In order to have the setup working on the patient overview page and the rest of the application, we have to
+     * programmatically disable/enable if that location will have a normal scrolling mechanism with specific margin/padding,
+     * or we will need to let the components take care of that.
+     */
     disableScrolling?: boolean;
+    /**
+     * Whether the layout is rendering in the viewer. Usually the result of the `useInViewer` hook.
+     */
+    isInViewer?: boolean;
 }
-/**
- *
- * @param props {NavMenuLayoutProps} - explaining specifically the `disableScrolling` prop:
- *
- * The patient overview page has some challenges we want to overcome in regards to the multiple scrollable
- * content (the charts and the action bar with alerts, etc).
- *
- * In order to have the setup working on the patient overview page and the rest of the application, we have to
- * progamatically disable/enable if that location will have a normal scrolling mechanism with specific margin/padding,
- * or we will need to let the components take care of that.
- */
-export declare const NavLayout: (props: NavMenuLayoutProps) => JSX.Element;
+export declare const NavLayout: React.FC<Props>;

package/dist/index.d.ts

@@ -32,7 +32,7 @@ export { default as Menu } from "./components/Menu/Menu";
 export { List, ListItem, ListProps, ListItemProps, DraggableListProps, SortableListProps, SortableListItemProps, OnAssetLoadErrorPayload, getDndListItemProps, } from "./components/List";
 export { CheckboxList, CheckboxListProps, } from "./components/CheckboxList/CheckboxList";
 export { CheckboxListModal, CheckboxListModalProps, } from "./components/CheckBoxListModal/CheckboxListModal";
-export { NavLayout, NavMenuLayoutProps } from "./components/NavMenu/NavLayout";
+export { NavLayout, Props as NavLayoutProps, } from "./components/NavMenu/NavLayout";
 export { NavMenu } from "./components/NavMenu/NavMenu";
 export { NotificationBanner, NotificationBannerColor, NotificationBannerLinkProps, } from "./components/NotificationBanner/NotificationBanner";
 export { Page, CRUDPage, CRUDPageProps } from "./components/Page";

package/dist/index.development.js

@@ -450,6 +450,13 @@ const SvgExclamationMarkIcon = (props) => React__namespace.default.createElement
 );
 var ExclamationMarkIcon = IconWrapper(SvgExclamationMarkIcon);
 
+const SvgExportIcon = (props) => React__namespace.default.createElement(
+  "svg",
+  Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: "none", viewBox: "0 0 24 24" }, props),
+  React__namespace.default.createElement("path", { fill: "currentColor", d: "M6 23c-.55 0-1.02-.196-1.412-.588A1.926 1.926 0 0 1 4 21V10c0-.55.196-1.02.588-1.413A1.926 1.926 0 0 1 6 8h2c.283 0 .52.096.713.287.191.192.287.43.287.713s-.096.52-.287.712A.968.968 0 0 1 8 10H6v11h12V10h-2a.968.968 0 0 1-.713-.288A.967.967 0 0 1 15 9c0-.283.096-.52.287-.713A.968.968 0 0 1 16 8h2c.55 0 1.02.196 1.413.587.391.392.587.863.587 1.413v11c0 .55-.196 1.02-.587 1.412A1.926 1.926 0 0 1 18 23H6Zm5-18.175-.9.9c-.2.2-.433.296-.7.287a1.006 1.006 0 0 1-.7-.312c-.183-.2-.28-.433-.287-.7a.916.916 0 0 1 .287-.7l2.6-2.6c.2-.2.433-.3.7-.3.267 0 .5.1.7.3l2.6 2.6a.933.933 0 0 1 .275.687c0 .275-.092.513-.275.713-.2.2-.438.3-.713.3a.973.973 0 0 1-.712-.3L13 4.825V15a.97.97 0 0 1-.287.712A.968.968 0 0 1 12 16a.968.968 0 0 1-.713-.288A.968.968 0 0 1 11 15V4.825Z" })
+);
+var ExportIcon = IconWrapper(SvgExportIcon);
+
 const SvgEyeIconSlashed = (props) => React__namespace.default.createElement(
   "svg",
   Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: 22, height: 20, fill: "none", viewBox: "0 0 22 20" }, props),
@@ -693,6 +700,7 @@ var Icons = /*#__PURE__*/Object.freeze({
     EmptyIcon: EmptyIcon,
     EmptyStateDashboardIcon: EmptyStateDashboardIcon,
     ExclamationMarkIcon: ExclamationMarkIcon,
+    ExportIcon: ExportIcon,
     EyeIcon: EyeIcon,
     EyeIconSlashed: EyeIconSlashed,
     GearColoredIcon: GearColoredIcon,
@@ -3670,21 +3678,34 @@ const CheckboxListModal = ({ texts, initialItems, isLoadingInitialItems, isOpen,
 };
 
 const NavLayout = (props) => {
+  const { patientSidebar = null, isNavDisabled, menu, disableScrolling, pageHeader, children, isInViewer } = props, rest = __rest(props, ["patientSidebar", "isNavDisabled", "menu", "disableScrolling", "pageHeader", "children", "isInViewer"]);
+  const inViewer = isInViewer;
   return React__namespace.default.createElement(
     "div",
-    { className: "ui-mb-3 ui-flex ui-h-full ui-w-full ui-flex-col lg:ui-mb-0 lg:ui-flex-row" },
-    !props.isNavDisabled && React__namespace.default.createElement(
+    Object.assign({ "data-test-id": "nav-layout", "data-in-viewer": inViewer, className: "ui-mb-3 ui-flex ui-h-full ui-w-full ui-flex-col lg:ui-mb-0 lg:ui-flex-row" }, rest),
+    !isNavDisabled && React__namespace.default.createElement(
       React__namespace.default.Fragment,
       null,
-      props.menu,
-      props.patientSidebar && props.patientSidebar
+      menu,
+      patientSidebar
     ),
-    React__namespace.default.createElement("div", { "data-test-id": "page-main-content", className: classNames__default.default([
-      "ui-w-full",
-      {
-        "ui-max-h-screen ui-overflow-y-auto ui-px-4 lg:ui-px-8": !props.disableScrolling
-      }
-    ]) }, props.children)
+    React__namespace.default.createElement(
+      "div",
+      { "data-test-id": "page-main-content", className: classNames__default.default([
+        "ui-w-full",
+        {
+          "ui-overflow-y-auto": !disableScrolling,
+          "ui-max-h-screen": !inViewer,
+          "ui-h-screen": inViewer
+        }
+      ]) },
+      pageHeader && React__namespace.default.createElement("div", { "data-test-id": "page-header" }, pageHeader),
+      React__namespace.default.createElement("div", { "data-test-id": "page-body", className: classNames__default.default({
+        "ui-px-4": !!pageHeader,
+        "ui-h-full": inViewer
+        // this allows extra spacing in the small viewport of hix specially when dealing with dropdowns
+      }) }, children)
+    )
   );
 };
 
@@ -5539,6 +5560,7 @@ exports.EmptyIcon = EmptyIcon;
 exports.EmptyListMessage = EmptyListMessage;
 exports.EmptyStateDashboardIcon = EmptyStateDashboardIcon;
 exports.ExclamationMarkIcon = ExclamationMarkIcon;
+exports.ExportIcon = ExportIcon;
 exports.EyeIcon = EyeIcon;
 exports.EyeIconSlashed = EyeIconSlashed;
 exports.FilterBar = FilterBar;