@luscii-healthtech/web-ui 54.7.1 → 55.0.0

package/dist/index.development.js

@@ -4284,31 +4284,6 @@ const Breadcrumbs = ({
   return jsxRuntime.jsx("ul", { "data-test-id": "breadcrumbs", className: "ui:flex ui:flex-row ui:flex-wrap ui:items-center", children: (isTruncated ? crumbsAndDivider : crumbs).map((crumbOrDividerProps) => isBreadcrumbDividerProps(crumbOrDividerProps) ? jsxRuntime.jsx(BreadcrumbDividerItem, Object.assign({}, crumbOrDividerProps), `divider-${truncatedCrumbs.map((crumb) => crumb.name).join("-")}`) : jsxRuntime.jsx(BreadcrumbItem, Object.assign({}, crumbOrDividerProps, { render: renderItem }), crumbOrDividerProps.key || crumbOrDividerProps.name)) });
 };
 
-const TabbarItem = ({ title, index, isSelected, onSelect, className, badgeCount = 0, isLoading = false, dataTestId = "" }) => {
-  const handleTabClick = () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(index);
-  const itemClassName = classNames__default.default("ui:flex ui:items-center ui:py-m", "ui:border-b-2 ui:hover:text-primary", "ui:transition ui:ease-in ui:duration-150", className, {
-    "ui:border-b-transparent ui:text-on-surface": !isSelected,
-    "ui:border-b-primary ui:text-primary": isSelected
-  });
-  return jsxRuntime.jsxs("button", { className: itemClassName, onClick: handleTabClick, "data-test-id": dataTestId, role: "tab", "aria-selected": isSelected, children: [typeof title === "string" ? jsxRuntime.jsx(Text, { variant: "strong", color: "current", as: "span", className: "ui:leading-inherit", children: title }) : title, badgeCount > 0 && jsxRuntime.jsx(Badge, { className: "ui:ml-1", children: badgeCount }), isLoading && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, spinnerColor: "gray", className: "ui:w-6" })] });
-};
-
-const Tabbar = ({ tabs = [], selectedIndex, onSelect, className }) => {
-  const [innerSelectedIndex, setInnerSelectedIndex] = React.useState(selectedIndex);
-  React.useEffect(() => {
-    setInnerSelectedIndex(selectedIndex);
-  }, [selectedIndex]);
-  const handleOnTabSelect = (index) => {
-    setInnerSelectedIndex(index);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect({ index, selectedTab: tabs[index] });
-  };
-  return jsxRuntime.jsx("div", { className: classNames__default.default("ui:flex ui:w-full ui:gap-xl", className), role: "tablist", children: tabs === null || tabs === void 0 ? void 0 : tabs.map((tabItemProps, index) => {
-    var _a;
-    const itemProps = Object.assign({ index, onSelect: handleOnTabSelect, isSelected: innerSelectedIndex === index }, tabItemProps);
-    return jsxRuntime.jsx(TabbarItem, Object.assign({}, itemProps), (_a = tabItemProps.dataTestId) !== null && _a !== void 0 ? _a : index);
-  }) });
-};
-
 const PageTitle = (props) => {
   const { as: Component = "h2", className } = props, rest = __rest(props, ["as", "className"]);
   return jsxRuntime.jsx(Component, Object.assign({}, rest, { className: classNames__default.default(
@@ -4324,19 +4299,37 @@ const PageTitle = (props) => {
 };
 
 const PageHeader = ({ navigation, breadcrumbs, dataTestId, accessories, isPolling, title, contained, className, truncateBreadcrumbsAfter, renderBreadcrumbItem, banner }) => {
-  var _a;
+  var _a, _b;
   const withContained = { "ui:max-w-3xl ui:m-auto": contained };
-  const hasTabBar = Boolean((_a = navigation === null || navigation === void 0 ? void 0 : navigation.tabs) === null || _a === void 0 ? void 0 : _a.length);
+  const hasTabs = Boolean((_a = navigation === null || navigation === void 0 ? void 0 : navigation.tabs) === null || _a === void 0 ? void 0 : _a.length);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { "data-test-id": "page-header", className: classNames__default.default("ui:pt-xl", className, {
     /**
      * The tab bar should sit snugly against the bottom of the page header, but
      * this is the only exception. Other than that the page header should have
      * a bottom padding.
      */
-    "ui:pb-l": !hasTabBar,
+    "ui:pb-l": !hasTabs,
     "ui:px-xl": !contained,
     "ui:w-full": contained
-  }), children: [banner && jsxRuntime.jsx(NotificationBanner, { noBorder: banner.noBorder, color: banner.color, "data-test-id": `page-header-banner-${title}`, className: "ui:mb-m", icon: banner.icon, children: jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [banner.title && jsxRuntime.jsx(Text, { color: "current", variant: "strong", children: banner.title }), jsxRuntime.jsx(Text, { color: "current", containsDangerousHtml: banner.text.isHTML, children: banner.text.content })] }) }), jsxRuntime.jsxs("div", { className: classNames__default.default({ "ui:flex ui:flex-col": !contained }), children: [!!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && jsxRuntime.jsx("div", { className: classNames__default.default("ui:mb-m", withContained), children: jsxRuntime.jsx(Breadcrumbs, { crumbs: breadcrumbs, truncateAfter: truncateBreadcrumbsAfter, renderItem: renderBreadcrumbItem }) }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:items-center ui:justify-between", withContained), children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:gap-xxs", children: [typeof title === "string" ? jsxRuntime.jsx(PageTitle, { "data-test-id": `${dataTestId}-title`, children: title }) : jsxRuntime.jsx(Box, { width: "full", children: title }), isPolling && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, className: "page-spinner", spinnerColor: "gray" })] }), accessories && jsxRuntime.jsx("div", { "data-test-id": "page-header-accessories", children: accessories })] })] }), navigation && jsxRuntime.jsx(Tabbar, Object.assign({}, navigation, { className: classNames__default.default(navigation.className, withContained) }))] }), jsxRuntime.jsx(Divider, { version: "v2" })] });
+  }), children: [banner && jsxRuntime.jsx(NotificationBanner, { noBorder: banner.noBorder, color: banner.color, "data-test-id": `page-header-banner-${title}`, className: "ui:mb-m", icon: banner.icon, children: jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [banner.title && jsxRuntime.jsx(Text, { color: "current", variant: "strong", children: banner.title }), jsxRuntime.jsx(Text, { color: "current", containsDangerousHtml: banner.text.isHTML, children: banner.text.content })] }) }), jsxRuntime.jsxs("div", { className: classNames__default.default({ "ui:flex ui:flex-col": !contained }), children: [!!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && jsxRuntime.jsx("div", { className: classNames__default.default("ui:mb-m", withContained), children: jsxRuntime.jsx(Breadcrumbs, { crumbs: breadcrumbs, truncateAfter: truncateBreadcrumbsAfter, renderItem: renderBreadcrumbItem }) }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:items-center ui:justify-between", withContained), children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:gap-xxs", children: [typeof title === "string" ? jsxRuntime.jsx(PageTitle, { "data-test-id": `${dataTestId}-title`, children: title }) : jsxRuntime.jsx(Box, { width: "full", children: title }), isPolling && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, className: "page-spinner", spinnerColor: "gray" })] }), accessories && jsxRuntime.jsx("div", { "data-test-id": "page-header-accessories", children: accessories })] })] }), navigation && jsxRuntime.jsx(Tabs.Root, { value: navigation.selectedIndex !== void 0 ? String(navigation.selectedIndex) : "", onValueChange: (value) => {
+    var _a2, _b2;
+    const index = Number(value);
+    const selectedTab = (_a2 = navigation.tabs) === null || _a2 === void 0 ? void 0 : _a2[index];
+    if (selectedTab) {
+      (_b2 = navigation.onSelect) === null || _b2 === void 0 ? void 0 : _b2.call(navigation, { index, selectedTab });
+    }
+  }, children: jsxRuntime.jsx(
+    Tabs.List,
+    {
+      // Keep the page-header tab row left-aligned and full width
+      // (the shared Tabs.List defaults to a centered inline-flex row).
+      className: classNames__default.default("ui:flex ui:w-full ui:justify-start", navigation.className, withContained),
+      children: (_b = navigation.tabs) === null || _b === void 0 ? void 0 : _b.map((tab, index) => {
+        var _a2;
+        return jsxRuntime.jsxs(Tabs.Trigger, { value: String(index), "data-test-id": tab.dataTestId, children: [typeof tab.title === "string" ? jsxRuntime.jsx(Tabs.LabelText, { children: tab.title }) : tab.title, tab.badgeCount !== void 0 && tab.badgeCount > 0 && jsxRuntime.jsx(Badge, { className: "ui:ml-1", children: tab.badgeCount }), tab.isLoading && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, spinnerColor: "gray", className: "ui:w-6" })] }, (_a2 = tab.dataTestId) !== null && _a2 !== void 0 ? _a2 : index);
+      })
+    }
+  ) })] }), jsxRuntime.jsx(Divider, { version: "v2" })] });
 };
 
 const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, isLoading, isSubmitting, dataTestId = "page", title, header, steps, isMobileFriendly, belowHeader, accessory }) => {
@@ -4809,7 +4802,8 @@ const ModalDialog = (_a) => {
   }, "ui:top-0", "ui:bottom-auto", {
     "ui:md:w-80": size === "s",
     "ui:md:w-132": size === "m",
-    "ui:md:w-216": size === "l"
+    "ui:md:w-216": size === "l",
+    "ui:md:w-330": size === "xl"
   }, {
     "ui:right-0": variant === "side-modal",
     "ui:left-auto": variant === "side-modal",
@@ -7357,7 +7351,6 @@ exports.SummaryIcon = SummaryIcon;
 exports.Switch = Switch;
 exports.Switcher = Switcher;
 exports.TOASTER_TYPE_OPTIONS = TOASTER_TYPE_OPTIONS;
-exports.Tabbar = Tabbar;
 exports.Table = Table;
 exports.TableNew = TableNew;
 exports.Tabs = Tabs;