@eztrak/shared 0.16.3 → 0.16.6

package/README.md

@@ -469,6 +469,121 @@ export function createCellEditorOnSave(invalidate = []) {
 
 Save is disabled when the value is unchanged (compares as strings so `42` and `"42"` are treated as equal). Pressing Enter while a save is in progress does not submit twice.
 
+### Components — Breadcrumbs
+
+URL-driven trail for the current page. It reads `useLocation()` from `react-router-dom`, so it must render inside a router. The path is split on `/`, and each segment becomes one crumb. Ancestor crumbs are links. The last crumb is the current page: it is not a link, and it is marked with `aria-current="page"`.
+
+On `/events/1q27-crude-coker/coker-ta27/budget` the default trail is:
+
+`Events > 1Q27 Crude & Coker > Coker TA27 > Budget`
+
+when those segments are labeled with `customTitles`. Without a label, the raw segment is shown.
+
+A crumb's label is chosen in this order:
+
+1. `routes` — a matching `BreadcrumbRoute` whose full path equals that crumb
+2. `customTitles` — the entry for **that crumb's own segment** (not an earlier segment in the path)
+3. The segment text itself
+
+`customIcons` uses the same segment key. An icon on `events` appears only on the Events crumb.
+
+The default look is a flat bar: off-white background (`#F7F7F5`), 14px gray ancestor text (`#6B7280`), a 12px chevron (`#9CA3AF`), and a semibold near-black current page (`#111111`). There is no Home crumb unless `showHome` is set. Hover darkens a link without moving it. Keyboard focus draws an outline. Color props are inline styles, so they override the default colors. Class name props still merge for layout and typography.
+
+```tsx
+import { Breadcrumbs } from "@eztrak/shared/components";
+
+<Breadcrumbs
+  customTitles={{
+    events: "Events",
+    "1q27-crude-coker": "1Q27 Crude & Coker",
+    "coker-ta27": "Coker TA27",
+    budget: "Budget",
+  }}
+/>
+```
+
+#### Colors, separator, and icons
+
+```tsx
+import { HiCalendar } from "react-icons/hi";
+
+<Breadcrumbs
+  customTitles={titles}
+  customIcons={{ events: <HiCalendar size={14} aria-hidden /> }}
+  backgroundColor="#EEF2FF"
+  inactiveColor="#4338CA"
+  activeColor="#1E1B4B"
+  separatorColor="#A5B4FC"
+  iconColor="#4338CA"
+/>
+
+// Slash instead of the default chevron
+<Breadcrumbs customTitles={titles} separator="/" />
+```
+
+Omit `iconColor` and each icon inherits that crumb's text color (gray on ancestors, the active color on the current page).
+
+#### Home, static crumbs, and route titles
+
+```tsx
+// Prepend Home (links to "/"). Label it with customTitles.home.
+<Breadcrumbs showHome customTitles={{ home: "Dashboard", events: "Events" }} />
+
+// Render a segment as text instead of a link
+<Breadcrumbs nonClickablePaths={["coker-ta27"]} customTitles={titles} />
+
+// Titles from a route tree. A route title wins over customTitles.
+<Breadcrumbs
+  routes={[
+    {
+      path: "events",
+      title: "Events",
+      children: [{ path: "budget", title: "Budget" }],
+    },
+  ]}
+/>
+```
+
+`nonClickablePaths` matches a segment exactly, or any crumb whose path includes the token.
+
+#### Layout hooks
+
+```tsx
+<Breadcrumbs
+  customTitles={titles}
+  prefix={<span>App</span>}
+  suffix={<span>Draft</span>}
+  containerClassName="px-6"
+  linkClassName="uppercase tracking-wide"
+  activeClassName="font-bold"
+  separatorClassName="mx-1"
+  iconClassName="h-4 w-4"
+/>
+```
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `routes` | `BreadcrumbRoute[]` | `[]` | Nested `{ path, title?, children? }` used to title a crumb when the built path matches |
+| `customTitles` | `Record<string, string>` | `{}` | Label for a path segment. Key `home` labels the Home crumb |
+| `customIcons` | `Record<string, ReactNode>` | `{}` | Icon for a path segment. Key `home` icons the Home crumb |
+| `showHome` | `boolean` | `false` | Prepend a Home crumb that links to `/` |
+| `nonClickablePaths` | `string[]` | `[]` | Segments (or path substrings) rendered as text instead of links |
+| `separator` | `ReactNode` | chevron | Node between crumbs. Pass `"/"` or your own icon |
+| `prefix` | `ReactNode` | — | Content before the trail |
+| `suffix` | `ReactNode` | — | Content after the trail |
+| `backgroundColor` | `string` | `"#F7F7F5"` | Bar background |
+| `inactiveColor` | `string` | `"#6B7280"` | Ancestor and non-clickable text |
+| `activeColor` | `string` | `"#111111"` | Current page text |
+| `separatorColor` | `string` | `"#9CA3AF"` | Separator color |
+| `iconColor` | `string` | inherits text | Icon color. Omitted icons use the crumb text color |
+| `iconClassName` | `string` | — | Classes for each crumb icon |
+| `containerClassName` | `string` | — | Classes merged onto the `<nav>` |
+| `linkClassName` | `string` | — | Classes for ancestor and non-clickable crumbs |
+| `activeClassName` | `string` | `"font-semibold"` | Classes for the current page |
+| `separatorClassName` | `string` | — | Classes for the separator |
+
+Color props win over text and background utilities in the class name props. Use the class name props for spacing, weight, and case.
+
 ### Components — ResetFiltersButton
 
 Clears all URL search params (`react-router-dom`) in one click. Self-contained — no app `Button` needed.
@@ -878,6 +993,7 @@ import {
   useGridHeight,
   EztrakTabs,
   CustomPagination,
+  Breadcrumbs,
   SearchInput,
   DropdownFilter,
   CustomCellEditor,
@@ -898,7 +1014,7 @@ npm run storybook
 npm run storybook
 ```
 
-Opens on [http://localhost:6006](http://localhost:6006) with stories for `EztrakTabs`, `CustomPagination`, `ResetColumnsButton`, `CustomCellEditor`, and `Loader`.
+Opens on [http://localhost:6006](http://localhost:6006) with stories for `Breadcrumbs`, `EztrakTabs`, `CustomPagination`, `ResetColumnsButton`, `CustomCellEditor`, and `Loader`.
 
 ## Exports
 
@@ -907,7 +1023,7 @@ Opens on [http://localhost:6006](http://localhost:6006) with stories for `Eztrak
 | `@eztrak/shared` | Main entry — re-exports utils, hooks, and components |
 | `@eztrak/shared/utils` | `cn`, `handleApiError`, `confirmationAlert`, `ConfirmationAlertOptions`, `getItem`, `setItem`, `loadUserState`, `saveUserState`, `resetPageParam`, date/format helpers, API error helpers, form field helpers |
 | `@eztrak/shared/hooks` | `usePaginationUrlSync`, `useGridHeight` |
-| `@eztrak/shared/components` | `EztrakTabs`, `CustomPagination`, `CustomCellEditor`, `SearchInput`, `DropdownFilter`, `ResetFiltersButton`, `TooltipText`, `ToolTip`, `CardSkeleton`, `Modal`, `Loader`, `TableLayoutToolbarControls`, `ResetColumnsButton`, and related types |
+| `@eztrak/shared/components` | `EztrakTabs`, `CustomPagination`, `Breadcrumbs`, `CustomCellEditor`, `SearchInput`, `DropdownFilter`, `ResetFiltersButton`, `TooltipText`, `ToolTip`, `CardSkeleton`, `Modal`, `Loader`, `TableLayoutToolbarControls`, `ResetColumnsButton`, and related types |
 | `@eztrak/shared/components/tabs.css` | Default tab styles (CSS variables) |
 | `@eztrak/shared/components/loader.css` | Loader spinner styles |
 
@@ -965,7 +1081,7 @@ Keyboard: Arrow keys move between tabs; Home/End jump to first/last enabled tab.
 
 - Node.js 18+
 - React 18+ (for hooks and components)
-- `react-router-dom` — `CustomPagination`, `SearchInput`, `DropdownFilter`, `ResetFiltersButton`, and `usePaginationUrlSync` (optional peer; install if you use these)
+- `react-router-dom` — `Breadcrumbs`, `CustomPagination`, `SearchInput`, `DropdownFilter`, `ResetFiltersButton`, and `usePaginationUrlSync` (optional peer; install if you use these)
 - `react-hot-toast` — toast feedback in `CustomCellEditor` and `handleApiError`
 - `sweetalert2` — `ResetColumnsButton` and `confirmationAlert`
 - `react-icons` — `CustomCellEditor`, `SearchInput`, and `Modal`

package/dist/{chunk-S7ZLXOPF.mjs → chunk-SS3J2WBE.mjs}

@@ -1189,10 +1189,41 @@ function Header({
 }
 
 // src/components/breadcrumbs/Breadcrumbs.tsx
-import { Fragment } from "react";
+import {
+  cloneElement,
+  isValidElement
+} from "react";
 import { Link, useLocation } from "react-router-dom";
-import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var INACTIVE_LINK_CLASS = "inline-flex items-center justify-center text-[#5D6D7F] bg-white px-4 py-2 rounded-lg transition-colors duration-300 hover:text-[#516378]";
+import { Fragment, jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
+var DEFAULT_BACKGROUND = "#F7F7F5";
+var DEFAULT_INACTIVE = "#6B7280";
+var DEFAULT_ACTIVE = "#111111";
+var DEFAULT_SEPARATOR = "#9CA3AF";
+var CRUMB_LAYOUT = "inline-flex items-center gap-1.5 whitespace-nowrap leading-5 rounded-sm";
+var LINK_INTERACTION = "font-normal transition-colors duration-200 motion-reduce:transition-none hover:!text-[color-mix(in_srgb,var(--bc-inactive)_65%,#111111)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#111111]";
+function BreadcrumbChevron() {
+  return /* @__PURE__ */ jsx11(
+    "svg",
+    {
+      width: "12",
+      height: "12",
+      viewBox: "0 0 12 12",
+      fill: "none",
+      "aria-hidden": "true",
+      className: "shrink-0",
+      children: /* @__PURE__ */ jsx11(
+        "path",
+        {
+          d: "M4.5 2.5L8 6L4.5 9.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
 function asTitleMap(customTitles) {
   if (Object.prototype.toString.call(customTitles) !== "[object Object]") {
     return {};
@@ -1222,73 +1253,141 @@ function Breadcrumbs({
   containerClassName,
   linkClassName = "",
   separatorClassName = "",
-  separator = "/",
-  activeClassName = "font-bold whitespace-pre",
+  separator,
+  activeClassName = "font-semibold",
   customTitles = {},
   customIcons = {},
   prefix,
   suffix,
-  nonClickablePaths = []
+  nonClickablePaths = [],
+  backgroundColor = DEFAULT_BACKGROUND,
+  inactiveColor = DEFAULT_INACTIVE,
+  activeColor = DEFAULT_ACTIVE,
+  separatorColor = DEFAULT_SEPARATOR,
+  iconColor,
+  iconClassName,
+  showHome = false
 }) {
   const location = useLocation();
   const pathnames = location.pathname.split("/").filter((segment) => segment);
   const titles = asTitleMap(customTitles);
-  const inactiveLinkClassName = cn(INACTIVE_LINK_CLASS, linkClassName);
   const getTitle = (pathname) => {
     const match = findRoute(pathname, routes);
     if (match && match.title) {
       return match.title;
     }
-    const titleKeys = Object.keys(titles);
-    const paramMatch = pathname.split("/").find((segment) => titleKeys.includes(segment)) || "";
-    if (paramMatch && titles[paramMatch]) {
-      return titles[paramMatch];
-    }
     const lastParamPath = getLastParam(pathname);
+    if (lastParamPath && titles[lastParamPath]) {
+      return titles[lastParamPath];
+    }
     if (lastParamPath) {
       return lastParamPath;
     }
     return pathname;
   };
   const getIcon = (pathname) => {
-    const iconKeys = Object.keys(customIcons);
-    const matchedSegment = pathname.split("/").find((segment) => iconKeys.includes(segment));
-    if (matchedSegment && customIcons[matchedSegment]) {
-      return customIcons[matchedSegment];
+    const segment = getLastParam(pathname);
+    if (segment && customIcons[segment]) {
+      return customIcons[segment];
     }
     return null;
   };
+  const crumbs = [];
+  if (showHome) {
+    crumbs.push({
+      key: "home",
+      to: "/",
+      title: titles.home || "Home",
+      icon: customIcons.home ?? null,
+      isCurrent: pathnames.length === 0,
+      isLink: pathnames.length > 0
+    });
+  }
+  pathnames.forEach((segment, index) => {
+    const to = `/${pathnames.slice(0, index + 1).join("/")}`;
+    const isCurrent = index === pathnames.length - 1;
+    const isNonClickable = nonClickablePaths.some(
+      (token) => to.includes(token) || segment === token
+    );
+    crumbs.push({
+      key: to,
+      to,
+      title: getTitle(to),
+      icon: getIcon(to),
+      isCurrent,
+      isLink: !isCurrent && !isNonClickable
+    });
+  });
+  const navStyle = {
+    backgroundColor,
+    "--bc-inactive": inactiveColor
+  };
+  const inactiveClassName = cn(CRUMB_LAYOUT, LINK_INTERACTION, linkClassName);
+  const staticInactiveClassName = cn(CRUMB_LAYOUT, "font-normal", linkClassName);
+  const currentClassName = cn(CRUMB_LAYOUT, activeClassName);
+  const renderCrumb = (crumb) => {
+    const content = /* @__PURE__ */ jsxs8(Fragment, { children: [
+      crumb.icon ? /* @__PURE__ */ jsx11(
+        "span",
+        {
+          className: cn("inline-flex shrink-0 items-center", iconClassName),
+          style: iconColor ? { color: iconColor } : void 0,
+          children: crumb.icon
+        }
+      ) : null,
+      crumb.title
+    ] });
+    if (crumb.isCurrent) {
+      return /* @__PURE__ */ jsx11(
+        "span",
+        {
+          className: currentClassName,
+          style: { color: activeColor },
+          "aria-current": "page",
+          children: content
+        }
+      );
+    }
+    if (crumb.isLink) {
+      return /* @__PURE__ */ jsx11(
+        Link,
+        {
+          to: crumb.to,
+          className: inactiveClassName,
+          style: { color: inactiveColor },
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx11("span", { className: staticInactiveClassName, style: { color: inactiveColor }, children: content });
+  };
   return /* @__PURE__ */ jsxs8(
-    "div",
+    "nav",
     {
+      "aria-label": "Breadcrumb",
       className: cn(
-        "flex flex-row gap-2 items-center text-sm text-secondary",
+        "flex w-full flex-row items-center gap-2 overflow-x-auto px-4 py-3 text-sm leading-5",
         containerClassName
       ),
+      style: navStyle,
       children: [
-        prefix && /* @__PURE__ */ jsx11("div", { className: "breadcrumb-prefix", children: prefix }),
-        /* @__PURE__ */ jsxs8(Link, { to: "/", className: inactiveLinkClassName, children: [
-          customIcons.home && /* @__PURE__ */ jsx11("span", { className: "mr-1", children: customIcons.home }),
-          titles.home || "Home"
-        ] }),
-        pathnames.map((segment, index) => {
-          const to = `/${pathnames.slice(0, index + 1).join("/")}`;
-          const isLast = index === pathnames.length - 1;
-          const title = getTitle(to);
-          const icon = getIcon(to);
-          const isNonClickable = nonClickablePaths.some(
-            (token) => to.includes(token) || segment === token
-          );
-          const crumb = /* @__PURE__ */ jsxs8(Fragment2, { children: [
-            icon && /* @__PURE__ */ jsx11("span", { className: "mr-1", children: icon }),
-            title
-          ] });
-          return /* @__PURE__ */ jsxs8(Fragment, { children: [
-            /* @__PURE__ */ jsx11("span", { className: separatorClassName, children: separator }),
-            isLast || isNonClickable ? /* @__PURE__ */ jsx11("span", { className: isLast ? activeClassName : linkClassName, children: crumb }) : /* @__PURE__ */ jsx11(Link, { to, className: inactiveLinkClassName, children: crumb })
-          ] }, to);
-        }),
-        suffix && /* @__PURE__ */ jsx11("div", { className: "breadcrumb-suffix", children: suffix })
+        prefix ? /* @__PURE__ */ jsx11("div", { className: "breadcrumb-prefix", children: prefix }) : null,
+        /* @__PURE__ */ jsx11("ol", { className: "flex min-w-0 flex-row flex-nowrap items-center gap-2", children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs8("li", { className: "inline-flex items-center gap-2", children: [
+          index > 0 ? /* @__PURE__ */ jsx11(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "inline-flex shrink-0 items-center",
+                separatorClassName
+              ),
+              style: { color: separatorColor },
+              children: separator === void 0 ? /* @__PURE__ */ jsx11(BreadcrumbChevron, {}) : isValidElement(separator) ? cloneElement(separator) : separator
+            }
+          ) : null,
+          renderCrumb(crumb)
+        ] }, crumb.key)) }),
+        suffix ? /* @__PURE__ */ jsx11("div", { className: "breadcrumb-suffix", children: suffix }) : null
       ]
     }
   );
@@ -1301,7 +1400,7 @@ import { Link as Link2, useLocation as useLocation2 } from "react-router-dom";
 // src/components/tooltip/ToolTip.tsx
 import { useId as useId2 } from "react";
 import { Tooltip } from "react-tooltip";
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 var defaultTooltipStyle = {
   color: "#fff",
   borderRadius: "5px",
@@ -1330,7 +1429,7 @@ function ToolTip({
   if (disabled || !tooltipText) {
     return /* @__PURE__ */ jsx12("span", { className, children });
   }
-  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs9(Fragment2, { children: [
     /* @__PURE__ */ jsx12(
       "span",
       {
@@ -1694,7 +1793,7 @@ function Sidebar({
 }
 
 // src/components/skeleton/CardSkeleton.tsx
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var DEFAULT_LINE_WIDTHS = ["w-32", "w-48"];
 function shouldShowAvatar(variant, showAvatar) {
   return showAvatar ?? variant === "profile";
@@ -1786,7 +1885,7 @@ function CardSkeleton({
       index
     );
   });
-  return /* @__PURE__ */ jsx14(Fragment4, { children: skeletons });
+  return /* @__PURE__ */ jsx14(Fragment3, { children: skeletons });
 }
 
 // src/components/tooltip/TooltipText.tsx
@@ -2287,7 +2386,7 @@ function resolveActions(actions, data, hasPermission, presets) {
 }
 
 // src/components/row-actions/RowActions.tsx
-import { Fragment as Fragment5, jsx as jsx19 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx19 } from "react/jsx-runtime";
 function runAction(action, data, hide, confirmFn = confirmationAlert) {
   if (!action.onClick) {
     if (action.closeOnClick) hide?.();
@@ -2407,7 +2506,7 @@ function RowActions({
     });
   };
   if (renderTrigger) {
-    return /* @__PURE__ */ jsx19(Fragment5, { children: renderTrigger({
+    return /* @__PURE__ */ jsx19(Fragment4, { children: renderTrigger({
       data,
       actions: resolved,
       hide: () => void 0,
@@ -2446,7 +2545,7 @@ function RowActions({
 // src/components/table-error-boundary/TableErrorBoundary.tsx
 import { useMemo as useMemo2 } from "react";
 import { FaArrowsRotate, FaTriangleExclamation } from "react-icons/fa6";
-import { Fragment as Fragment6, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var TableErrorBoundary = ({
   isError,
   isLoading = false,
@@ -2519,7 +2618,7 @@ var TableErrorBoundary = ({
       }
     );
   }
-  return /* @__PURE__ */ jsx20(Fragment6, { children });
+  return /* @__PURE__ */ jsx20(Fragment5, { children });
 };
 
 export {
@@ -2553,4 +2652,4 @@ export {
   RowActions,
   TableErrorBoundary
 };
-//# sourceMappingURL=chunk-S7ZLXOPF.mjs.map
+//# sourceMappingURL=chunk-SS3J2WBE.mjs.map