@luscii-healthtech/web-ui 27.11.0 → 27.11.2

package/dist/components/BaseList/BaseList.types.d.ts

@@ -6,7 +6,7 @@ import { TitleProps } from "../Title/Title";
 export type BaseListItemProps = {
     itemId: string | number;
     title: React.ReactNode;
-    subtitle?: string;
+    subtitle?: React.ReactNode;
     icon?: React.FunctionComponent<IconProps> | string;
     accessories?: JSX.Element[];
     onlyShowAccessoriesOnHover?: boolean;

package/dist/components/Page/CRUDPage.types.d.ts

@@ -32,5 +32,8 @@ export type CRUDPageProps = (CRUDPagePropsWithoutHeaderOrTitle & {
 }) | (CRUDPagePropsWithoutHeaderOrTitle & {
     header: CRUDPageHeader;
     title?: never;
+}) | (CRUDPagePropsWithoutHeaderOrTitle & {
+    header?: never;
+    title?: never;
 });
 export {};

package/dist/components/PageHeader/PageHeader.types.d.ts

@@ -5,7 +5,7 @@ import type { TabbarProps } from "../Tabbar/Tabbar";
 import { IconProps } from "../Icons/types/IconProps.type";
 type Nil = null | undefined;
 type WithPageHeaderBanner = {
-    banner: Nil | {
+    banner?: Nil | {
         title?: string;
         text: {
             content: string;

package/dist/index.development.js

@@ -1260,8 +1260,8 @@ const BaseListItem = React__namespace.default.forwardRef(({ itemId, title, toolt
     React__namespace.default.createElement(
       "div",
       { className: "ui-py-4" },
-      typeof title === "string" ? React__namespace.default.createElement(Text, { type: isSelected ? "strong" : "base" }, title) : title,
-      subtitle && React__namespace.default.createElement(Text, { text: subtitle, type: "sm", color: "slate-500" })
+      typeof title === "string" ? React__namespace.default.createElement(Text, { variant: isSelected ? "strong" : "base" }, title) : title,
+      subtitle && (typeof subtitle === "string" ? React__namespace.default.createElement(Text, { variant: "sm", color: "slate-500" }, subtitle) : subtitle)
     ),
     React__namespace.default.createElement("div", { className: "ui-flex-grow" }),
     React__namespace.default.createElement("div", { className: classNames__default.default({
@@ -4489,32 +4489,25 @@ const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, i
   const mergedClasses = classNames__default.default("cweb-crud-page", "ui-w-full ui-mb-0 ui-mx-auto ui-pb-8", className);
   const submitButton = submitButtonProps && React__namespace.default.createElement(PrimaryButton, Object.assign({ "data-test-id": "submit-button", key: "submit-button", role: BUTTON_ROLES.PRIMARY, isPending: isSubmitting }, submitButtonProps));
   const cancelButton = cancelButtonProps && React__namespace.default.createElement(TertiaryButton, Object.assign({ "data-test-id": "cancel-button", key: "cancel-button", role: BUTTON_ROLES.SECONDARY }, cancelButtonProps));
-  let pageHeader;
-  if (title) {
-    pageHeader = React__namespace.default.createElement(PageHeader, { banner: null, title: React__namespace.default.createElement(
+  if (isLoading) {
+    return React__namespace.default.createElement(
       "div",
-      { className: "ui-flex ui-flex-nowrap ui-items-center ui-gap-m" },
-      title.icon && React__namespace.default.createElement("img", { id: "title-icon", src: title.icon, className: "ui-h-9 ui-w-9", alt: "title icon" }),
-      React__namespace.default.createElement(PageTitle, null, title.text)
-    ) });
-  } else {
-    pageHeader = React__namespace.default.createElement(PageHeader, Object.assign({}, header));
+      { className: "cweb-crud-page-container", "data-test-id": dataTestId },
+      React__namespace.default.createElement(
+        "div",
+        { className: classNames__default.default(mergedClasses, "ui-relative ui-overflow-y-hidden", "cweb-crud-page-loading-container"), style: { height: "90vh" } },
+        React__namespace.default.createElement(PageHeaderBlock, { header, title }),
+        React__namespace.default.createElement(LoadingIndicator, { className: classNames__default.default("crud-page-loader", "ui-absolute ui-bottom-0 ui-left-0 ui-right-0 ui-top-0 ui-m-auto ui-h-12 ui-w-12"), asModal: false })
+      )
+    );
   }
   return React__namespace.default.createElement(
     "div",
     { className: "cweb-crud-page-container", "data-test-id": dataTestId },
-    isLoading && React__namespace.default.createElement(
-      "div",
-      { className: classNames__default.default(mergedClasses, "ui-relative ui-overflow-y-hidden", "cweb-crud-page-loading-container"), style: { height: "90vh" } },
-      React__namespace.default.createElement("div", { className: "ui-align-center ui-flex ui-flex-row ui-justify-start" }, pageHeader),
-      React__namespace.default.createElement(Divider, { version: "v2" }),
-      React__namespace.default.createElement(LoadingIndicator, { className: classNames__default.default("crud-page-loader", "ui-absolute ui-bottom-0 ui-left-0 ui-right-0 ui-top-0 ui-m-auto ui-h-12 ui-w-12"), asModal: false })
-    ),
-    !isLoading && React__namespace.default.createElement(
+    React__namespace.default.createElement(
       "div",
       { className: mergedClasses, "data-test-id": dataTestId },
-      React__namespace.default.createElement("div", { className: "ui-align-center ui-flex ui-flex-row ui-justify-start" }, pageHeader),
-      React__namespace.default.createElement(Divider, { version: "v2" }),
+      React__namespace.default.createElement(PageHeaderBlock, { header, title }),
       React__namespace.default.createElement(
         "div",
         { className: "ui-flex ui-justify-center" },
@@ -4529,6 +4522,33 @@ const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, i
     )
   );
 };
+const PageHeaderBlock = ({ header, title }) => {
+  if (!title && !header) {
+    return null;
+  }
+  let pageHeaderComponent = null;
+  if (title) {
+    pageHeaderComponent = React__namespace.default.createElement(
+      "div",
+      { className: "ui-align-center ui-flex ui-flex-row ui-justify-start" },
+      React__namespace.default.createElement(PageHeader, { banner: null, title: React__namespace.default.createElement(
+        "div",
+        { className: "ui-flex ui-flex-nowrap ui-items-center ui-gap-m" },
+        title.icon && React__namespace.default.createElement("img", { id: "title-icon", src: title.icon, className: "ui-h-9 ui-w-9", alt: "title icon" }),
+        React__namespace.default.createElement(PageTitle, null, title.text)
+      ) })
+    );
+  }
+  if (header) {
+    pageHeaderComponent = React__namespace.default.createElement(PageHeader, Object.assign({}, header));
+  }
+  return React__namespace.default.createElement(
+    React__namespace.default.Fragment,
+    null,
+    React__namespace.default.createElement("div", { className: "ui-align-center ui-flex ui-flex-row ui-justify-start" }, pageHeaderComponent),
+    React__namespace.default.createElement(Divider, { version: "v2" })
+  );
+};
 
 var img$1 = "data:image/svg+xml,%3csvg width='340' height='638' viewBox='0 0 340 638' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3crect x='8' y='60' width='50' height='8' rx='4' transform='rotate(90 8 60)' fill='%23111827'/%3e %3crect x='8' y='118' width='50' height='8' rx='4' transform='rotate(90 8 118)' fill='%23111827'/%3e %3crect x='340' y='67' width='30' height='8' rx='4' transform='rotate(90 340 67)' fill='%23111827'/%3e %3cpath fill-rule='evenodd' clip-rule='evenodd' d='M36 0C18.3269 0 4 14.3269 4 32V606C4 623.673 18.3269 638 36 638H304C321.673 638 336 623.673 336 606V32C336 14.3269 321.673 0 304 0H36ZM28 43C23.5817 43 20 46.5817 20 51V549C20 553.418 23.5817 557 28 557H312C316.418 557 320 553.418 320 549V51C320 46.5817 316.418 43 312 43H28Z' fill='%23374151'/%3e %3ccircle cx='171' cy='598' r='16' fill='%236B7280'/%3e %3ccircle cx='105.5' cy='22.5' r='4.5' fill='%236B7280'/%3e %3crect x='118' y='18' width='104' height='9' rx='4' fill='%239CA3AF'/%3e%3c/svg%3e";