@luscii-healthtech/web-ui 23.1.0 → 23.1.1

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

@@ -1,14 +1,28 @@
-export interface Crumb {
+/// <reference types="react" />
+import Text from "../Text/Text";
+type RenderBreadcrumb = (props: {
+    name: string;
+    link?: string;
+    textProps: React.ComponentProps<typeof Text>;
+}) => React.ReactNode;
+export type Crumb = {
+    render: RenderBreadcrumb;
+    key?: string;
+    name: never;
+    link: never;
+} | {
     name: string;
     key?: string;
     link?: string;
-}
+};
 export interface BreadcrumbProps {
     crumbs: Crumb[];
     truncateAfter?: number;
+    renderItem?: RenderBreadcrumb;
 }
 export type BreadcrumbDividerProps = {
     onClick: () => void;
     truncatedCrumbs: Crumb[];
 };
 export declare const isBreadcrumbDividerProps: (subject: unknown) => subject is BreadcrumbDividerProps;
+export {};

package/dist/index.development.js

@@ -4125,12 +4125,40 @@ const isBreadcrumbDividerProps = (subject) => {
   return typeof possibleSubject.onClick === "function" && Array.isArray(possibleSubject.truncatedCrumbs);
 };
 
-const BreadcrumbItem = ({ name, link }) => {
-  return React__namespace.default.createElement("li", { className: "ui-flex ui-flex-row ui-items-center ui-slash-split" }, link ? React__namespace.default.createElement(
-    router.Link,
-    { to: link },
-    React__namespace.default.createElement(Text, { text: name, color: "blue-800", className: "ui-whitespace-no-wrap ui-max-w-xs ui-truncate" })
-  ) : React__namespace.default.createElement(Text, { text: name, type: "strong", className: "ui-whitespace-no-wrap ui-w-full ui-max-w-xs ui-truncate" }));
+const BreadcrumbItem = (props) => {
+  return React__namespace.default.createElement(
+    "li",
+    { className: "ui-flex ui-flex-row ui-items-center ui-slash-split" },
+    React__namespace.default.createElement(BreadcrumbContent, Object.assign({}, props))
+  );
+};
+const linkTextProps = {
+  variant: "base",
+  color: "blue-800",
+  className: "ui-whitespace-no-wrap ui-max-w-xs ui-truncate"
+};
+const defaultTextProps = {
+  variant: "strong",
+  color: "base",
+  className: "ui-whitespace-no-wrap ui-w-full ui-max-w-xs ui-truncate"
+};
+const BreadcrumbContent = (_a) => {
+  var { name, link } = _a, props = __rest(_a, ["name", "link"]);
+  if ("render" in props && !!props.render) {
+    return React__namespace.default.createElement(React__namespace.default.Fragment, null, props.render({
+      name,
+      link,
+      textProps: link ? linkTextProps : defaultTextProps
+    }));
+  }
+  if (link) {
+    return React__namespace.default.createElement(
+      router.Link,
+      { to: link },
+      React__namespace.default.createElement(Text, Object.assign({}, linkTextProps), name)
+    );
+  }
+  return React__namespace.default.createElement(Text, Object.assign({}, defaultTextProps), name);
 };
 const BreadcrumbDividerItem = ({ onClick, truncatedCrumbs }) => {
   return React__namespace.default.createElement(
@@ -4139,12 +4167,12 @@ const BreadcrumbDividerItem = ({ onClick, truncatedCrumbs }) => {
     React__namespace.default.createElement(
       "button",
       { onClick, title: truncatedCrumbs.map((crumb) => crumb.name).join(" / "), className: "ui-px-1" },
-      React__namespace.default.createElement(Text, { text: "\u2026", color: "blue-800", type: "strong" })
+      React__namespace.default.createElement(Text, { color: "blue-800", type: "strong" }, "\u2026")
     )
   );
 };
 
-const Breadcrumbs = ({ crumbs, truncateAfter = Infinity }) => {
+const Breadcrumbs = ({ crumbs, truncateAfter = Infinity, renderItem }) => {
   const [head, ...tail] = crumbs;
   const [isTruncated, setIsTruncated] = React.useState(tail.length > truncateAfter);
   const truncatedCrumbs = [];
@@ -4165,7 +4193,7 @@ const Breadcrumbs = ({ crumbs, truncateAfter = Infinity }) => {
     dividerProps,
     ...tail
   ];
-  return React__namespace.default.createElement("ul", { "data-test-id": "breadcrumbs", className: "ui-flex ui-flex-row ui-flex-wrap ui-items-center" }, (isTruncated ? crumbsAndDivider : crumbs).map((crumbOrDividerProps) => isBreadcrumbDividerProps(crumbOrDividerProps) ? React__namespace.default.createElement(BreadcrumbDividerItem, Object.assign({ key: `divider-${truncatedCrumbs.map((crumb) => crumb.name).join("-")}` }, crumbOrDividerProps)) : React__namespace.default.createElement(BreadcrumbItem, Object.assign({ key: crumbOrDividerProps.key || crumbOrDividerProps.name }, crumbOrDividerProps))));
+  return React__namespace.default.createElement("ul", { "data-test-id": "breadcrumbs", className: "ui-flex ui-flex-row ui-flex-wrap ui-items-center" }, (isTruncated ? crumbsAndDivider : crumbs).map((crumbOrDividerProps) => isBreadcrumbDividerProps(crumbOrDividerProps) ? React__namespace.default.createElement(BreadcrumbDividerItem, Object.assign({ key: `divider-${truncatedCrumbs.map((crumb) => crumb.name).join("-")}` }, crumbOrDividerProps)) : React__namespace.default.createElement(BreadcrumbItem, Object.assign({ key: crumbOrDividerProps.key || crumbOrDividerProps.name }, crumbOrDividerProps, { render: renderItem }))));
 };
 
 const TabbarItem = ({ title, index, isSelected, onSelect, className, badgeCount = 0, isLoading = false, dataTestId = "" }) => {