@luscii-healthtech/web-ui 2.61.0 → 2.63.0

package/dist/components/Breadcrumbs/BreadcrumbItem.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { BreadcrumbDividerProps, Crumb } from "./Breadcrumbs.types";
+export declare const BreadcrumbItem: React.FC<Crumb>;
+export declare const BreadcrumbDividerItem: React.FC<BreadcrumbDividerProps>;

package/dist/components/Breadcrumbs/Breadcrumbs.d.ts

@@ -1,10 +1,3 @@
 import React from "react";
-export interface Crumb {
-    name: string;
-    key?: string;
-    link?: string;
-}
-export interface BreadcrumbProps {
-    crumbs: Crumb[];
-}
-export declare const Breadcrumbs: React.VoidFunctionComponent<BreadcrumbProps>;
+import type { BreadcrumbProps } from "./Breadcrumbs.types";
+export declare const Breadcrumbs: React.FC<BreadcrumbProps>;

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

@@ -0,0 +1,14 @@
+export interface Crumb {
+    name: string;
+    key?: string;
+    link?: string;
+}
+export interface BreadcrumbProps {
+    crumbs: Crumb[];
+    truncateAfter?: number;
+}
+export declare type BreadcrumbDividerProps = {
+    onClick: () => void;
+    truncatedCrumbs: Crumb[];
+};
+export declare const isBreadcrumbDividerProps: (subject: unknown) => subject is BreadcrumbDividerProps;

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

@@ -0,0 +1,2 @@
+export type { BreadcrumbProps, Crumb } from "./Breadcrumbs.types";
+export { Breadcrumbs } from "./Breadcrumbs";

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
-import type { BreadcrumbProps } from "../Breadcrumbs/Breadcrumbs";
+import type { BreadcrumbProps } from "../Breadcrumbs";
 import type { TabbarProps } from "../Tabbar/Tabbar";
 export interface PageHeaderProps {
     navigation?: Omit<TabbarProps, "withoutPadding">;
     breadcrumbs?: BreadcrumbProps["crumbs"];
+    truncateBreadcrumbsAfter?: number;
     dataTestId?: string;
     title: string;
     isPolling?: boolean;

package/dist/components/Timeline/Timeline.d.ts

@@ -1,4 +1,5 @@
 import { BaseButtonProps } from "../ButtonV2/ButtonProps.type";
+import { CenteredHeroProps } from "../CenteredHero/CenteredHero";
 import { TimelineStepProps } from "./TimelineStep";
 import { TimelineHeaderProps } from "./TimelineHeader";
 export interface TimelineProps {
@@ -6,6 +7,7 @@ export interface TimelineProps {
     steps: TimelineStepProps[];
     loadMoreButtonProps?: BaseButtonProps;
     dataTestId?: string;
+    emptyHeroProps?: CenteredHeroProps;
 }
-export declare const Timeline: ({ headerProps, steps, loadMoreButtonProps, dataTestId, }: TimelineProps) => JSX.Element;
+export declare const Timeline: ({ headerProps, steps, loadMoreButtonProps, dataTestId, emptyHeroProps, }: TimelineProps) => JSX.Element;
 export default Timeline;

package/dist/index.d.ts

@@ -56,7 +56,7 @@ export { Steps } from "./components/Steps/Steps";
 export { default as Switcher } from "./components/Switcher/Switcher";
 export { ImagePicker, TargetProps } from "./components/ImagePicker/ImagePicker";
 export { default as Tabbar, TabbarProps, TabItemDetails, } from "./components/Tabbar/Tabbar";
-export { Breadcrumbs, BreadcrumbProps, } from "./components/Breadcrumbs/Breadcrumbs";
+export { Breadcrumbs, BreadcrumbProps } from "./components/Breadcrumbs";
 export { PageHeader, PageHeaderProps } from "./components/PageHeader";
 export { default as TabLinks } from "./components/TabLinks/TabLinks";
 export { default as Tag } from "./components/Tag/Tag";

package/dist/web-ui.cjs.development.js

@@ -6545,29 +6545,90 @@ var Steps = function Steps(_ref) {
   }, renderedSteps);
 };
 
+var isBreadcrumbDividerProps = function isBreadcrumbDividerProps(subject) {
+  if (typeof subject !== "object" || typeof subject === null) {
+    return false;
+  }
+
+  var possibleSubject = subject;
+  return typeof possibleSubject.onClick === "function" && Array.isArray(possibleSubject.truncatedCrumbs);
+};
+
+var BreadcrumbItem = function BreadcrumbItem(_ref) {
+  var name = _ref.name,
+      link = _ref.link;
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: "flex flex-row items-center slash-split"
+  }, link ? /*#__PURE__*/React__default.createElement(router.Link, {
+    to: link
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    text: name,
+    color: "blue-800"
+  })) : /*#__PURE__*/React__default.createElement(Text, {
+    text: name,
+    type: "strong"
+  }));
+};
+var BreadcrumbDividerItem = function BreadcrumbDividerItem(_ref2) {
+  var onClick = _ref2.onClick,
+      truncatedCrumbs = _ref2.truncatedCrumbs;
+  return /*#__PURE__*/React__default.createElement("li", {
+    className: "flex flex-row items-center slash-split"
+  }, /*#__PURE__*/React__default.createElement("button", {
+    onClick: onClick,
+    title: truncatedCrumbs.map(function (crumb) {
+      return crumb.name;
+    }).join(" / "),
+    className: "px-1"
+  }, /*#__PURE__*/React__default.createElement(Text, {
+    text: "\u2026",
+    color: "blue-800",
+    type: "strong"
+  })));
+};
+
 var Breadcrumbs = function Breadcrumbs(_ref) {
-  var crumbs = _ref.crumbs;
-  var breadcrumbItems = crumbs.map(function (_ref2) {
-    var name = _ref2.name,
-        link = _ref2.link,
-        key = _ref2.key;
-    return /*#__PURE__*/React__default.createElement("li", {
-      key: key || name,
-      className: "flex flex-row items-center slash-split "
-    }, link ? /*#__PURE__*/React__default.createElement(router.Link, {
-      to: link
-    }, /*#__PURE__*/React__default.createElement(Text, {
-      text: name,
-      color: "blue-800"
-    })) : /*#__PURE__*/React__default.createElement(Text, {
-      text: name,
-      type: "strong"
-    }));
-  });
+  var crumbs = _ref.crumbs,
+      _ref$truncateAfter = _ref.truncateAfter,
+      truncateAfter = _ref$truncateAfter === void 0 ? Infinity : _ref$truncateAfter;
+  var head = crumbs[0],
+      tail = crumbs.slice(1);
+
+  var _useState = React.useState(tail.length > truncateAfter),
+      isTruncated = _useState[0],
+      setIsTruncated = _useState[1];
+
+  var truncatedCrumbs = [];
+
+  if (isTruncated) {
+    while (tail.length > truncateAfter) {
+      var shiftedCrumb = tail.shift();
+
+      if (shiftedCrumb) {
+        truncatedCrumbs.push(shiftedCrumb);
+      }
+    }
+  }
+
+  var dividerProps = {
+    onClick: function onClick() {
+      return setIsTruncated(false);
+    },
+    truncatedCrumbs: truncatedCrumbs
+  };
+  var crumbsAndDivider = [head, dividerProps].concat(tail);
   return /*#__PURE__*/React__default.createElement("ul", {
     "data-test-id": "breadcrumbs",
     className: "flex flex-row items-center space-x-2 "
-  }, breadcrumbItems);
+  }, (isTruncated ? crumbsAndDivider : crumbs).map(function (crumbOrDividerProps) {
+    return isBreadcrumbDividerProps(crumbOrDividerProps) ? /*#__PURE__*/React__default.createElement(BreadcrumbDividerItem, _extends({
+      key: "divider-" + truncatedCrumbs.map(function (crumb) {
+        return crumb.name;
+      }).join("-")
+    }, crumbOrDividerProps)) : /*#__PURE__*/React__default.createElement(BreadcrumbItem, _extends({
+      key: crumbOrDividerProps.key || crumbOrDividerProps.name
+    }, crumbOrDividerProps));
+  }));
 };
 
 var TabbarItem = function TabbarItem(_ref) {
@@ -6662,7 +6723,8 @@ var PageHeader = function PageHeader(_ref) {
       isPolling = _ref.isPolling,
       title = _ref.title,
       contained = _ref.contained,
-      className = _ref.className;
+      className = _ref.className,
+      truncateBreadcrumbsAfter = _ref.truncateBreadcrumbsAfter;
   var withContained = {
     "max-w-3xl m-auto": contained
   };
@@ -6674,7 +6736,8 @@ var PageHeader = function PageHeader(_ref) {
   }, !!(breadcrumbs != null && breadcrumbs.length) && /*#__PURE__*/React__default.createElement("div", {
     className: classNames("mb-4 space-y-4", withContained)
   }, /*#__PURE__*/React__default.createElement(Breadcrumbs, {
-    crumbs: breadcrumbs
+    crumbs: breadcrumbs,
+    truncateAfter: truncateBreadcrumbsAfter
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "mb-4 border-b border-slate-100"
   })), /*#__PURE__*/React__default.createElement("div", {
@@ -7963,7 +8026,8 @@ var TimelineStep = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 var TimelineHeader = function TimelineHeader(_ref) {
   var title = _ref.title,
       buttons = _ref.buttons,
-      withBorder = _ref.withBorder;
+      _ref$withBorder = _ref.withBorder,
+      withBorder = _ref$withBorder === void 0 ? true : _ref$withBorder;
   var hasButtons = buttons && buttons.length > 0;
   var className = classNames("flex flex-row items-center space-x-4 rounded-t px-4", {
     "py-4": !hasButtons,
@@ -7994,11 +8058,15 @@ var Timeline = function Timeline(_ref) {
       steps = _ref.steps,
       loadMoreButtonProps = _ref.loadMoreButtonProps,
       _ref$dataTestId = _ref.dataTestId,
-      dataTestId = _ref$dataTestId === void 0 ? "timeline" : _ref$dataTestId;
+      dataTestId = _ref$dataTestId === void 0 ? "timeline" : _ref$dataTestId,
+      emptyHeroProps = _ref.emptyHeroProps;
+  var isEmptyTimeline = !steps || steps.length === 0;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "bg-white rounded-xl",
     "data-test-id": dataTestId
-  }, headerProps && /*#__PURE__*/React__default.createElement(TimelineHeader, _extends({}, headerProps)), /*#__PURE__*/React__default.createElement("div", {
+  }, headerProps && /*#__PURE__*/React__default.createElement(TimelineHeader, _extends({}, headerProps)), isEmptyTimeline && emptyHeroProps && /*#__PURE__*/React__default.createElement(CenteredHero, _extends({
+    background: "white"
+  }, emptyHeroProps)), !isEmptyTimeline && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: classNames("px-4 pb-4", {
       "pt-4": !headerProps
     })
@@ -8006,7 +8074,7 @@ var Timeline = function Timeline(_ref) {
     return /*#__PURE__*/React__default.createElement(TimelineStep, _extends({}, step));
   })), loadMoreButtonProps && /*#__PURE__*/React__default.createElement("div", {
     className: "text-center border-t py-6"
-  }, /*#__PURE__*/React__default.createElement(SecondaryButton, _extends({}, loadMoreButtonProps))));
+  }, /*#__PURE__*/React__default.createElement(SecondaryButton, _extends({}, loadMoreButtonProps)))));
 };
 
 var _excluded$t = ["titleProps", "title", "titleAccessory", "contentProps", "content", "defaultContent", "className", "buttons"];