@umodeapporg/ui 0.0.0-canary.ca10e69

package/dist/components/Navigation/PageTitle.d.ts

@@ -0,0 +1,95 @@
+import { ReactNode, RefObject } from 'react';
+import { SymbolCodepoints } from '../UI/MaterialSymbol';
+export interface IPageTitleImage {
+    src: string;
+    /** The image REPLACES the icon chip, so it carries the accessible name of what it depicts. */
+    alt: string;
+    /** Escape hatch for shape and size, e.g. `rounded-full` for an avatar. Merged last, so it wins. */
+    className?: string;
+}
+interface IPageTitleProps {
+    title?: string;
+    /** Substitui o span do título por conteúdo rico (ex.: nome editável inline da ficha técnica). */
+    titleContent?: ReactNode;
+    /**
+     * Element of the default title. The page's main title passes `h1`, so a page has its heading
+     * without rebuilding these classes in `titleContent`; `span` stays the default because a compact
+     * or embedded header is not one, and neither are the several a screen can hold.
+     */
+    titleAs?: 'h1' | 'h2' | 'h3' | 'span';
+    /** Rótulo pequeno em caixa alta acima do título (ex.: "FICHA TÉCNICA"). */
+    eyebrow?: string;
+    /** Conteúdo abaixo da linha do título, dentro da coluna de texto (tags, steppers). */
+    subtitleSlot?: ReactNode;
+    slot?: ReactNode;
+    /**
+     * Where the `slot` sits against the text column. `center` (default) is right for a one-line title with
+     * a couple of buttons; `start` pins it to the TOP of the header, which is what a tall identification
+     * block needs so its actions line up with the eyebrow instead of floating at the middle.
+     */
+    slotAlign?: 'center' | 'start';
+    /** Conteúdo renderizado à ESQUERDA, imediatamente ao lado do título (o `slot` fica à direita). */
+    titleSlot?: ReactNode;
+    /** Conteúdo renderizado ANTES do ícone/título (ex.: botão voltar customizado, alvo de drop). */
+    leadingSlot?: ReactNode;
+    /** Trilha custom acima do título (use `ControlledBreadcrumb`). Sem ela, a trilha é derivada do menu. */
+    breadcrumb?: ReactNode;
+    /** Deriva a trilha automaticamente da árvore de navegação quando `breadcrumb` não é passado. */
+    autoBreadcrumb?: boolean;
+    /** Ícone em chip à esquerda do título. Sem ele, herda o ícone do item de menu da rota atual. */
+    titleIcon?: SymbolCodepoints;
+    titleIconClassName?: string;
+    /**
+     * An image in the icon chip's place, at the same size and radius (e.g. the product cover on a
+     * datasheet header). A src that fails to load falls back to the icon instead of leaving a broken
+     * image in the header.
+     */
+    titleImage?: IPageTitleImage;
+    /**
+     * Size of the leading media (icon chip or `titleImage`). `md` is the 2.5rem chip every page uses;
+     * `lg` is the 5rem cover of a RECORD header, where the image identifies the record itself (a product
+     * datasheet). `compact` already implies `sm`, so pass this only to go bigger.
+     */
+    titleMediaSize?: 'sm' | 'md' | 'lg';
+    /**
+     * The header shrinks once the content beside it has been scrolled: the breadcrumb, the eyebrow, the
+     * headline and the `subtitleSlot` go, the media drops one size (the record's picture stays, at the
+     * icon chip's size) and the title takes its compact type. The back button and the `slot` never move.
+     *
+     * It only applies where the header STAYS ON SCREEN while something else scrolls, which is a page
+     * whose content lives in a container beside the header (`collapseScrollRef`). When the page itself
+     * scrolls, the header goes with it and there is nothing to shrink: pinning it there would mean
+     * painting a background under it, and a header that grows a surface halfway through a scroll reads
+     * as a panel appearing out of nowhere.
+     *
+     * EXPANDED, IT RENDERS EXACTLY WHAT IT RENDERED BEFORE THIS EXISTED: no wrapper node, no extra
+     * element, no background, no positioning. That is deliberate. The first version added a sentinel
+     * node as a sibling of the header, and since almost every page wraps it in a `flex flex-col
+     * gap-y-*`, that node became a flex item and every page grew a stray gap.
+     */
+    collapseOnScroll?: boolean;
+    /**
+     * The element whose scrolling drives the collapse. Only needed when the page's content scrolls in a
+     * container that is NOT an ancestor of the header, which is what a split layout does (a fixed header
+     * over an independently scrolling body). Left out, the header finds its own scrollable ancestor.
+     */
+    collapseScrollRef?: RefObject<HTMLElement | null>;
+    /** Deriva o ícone automaticamente do menu quando `titleIcon` não é passado. */
+    autoIcon?: boolean;
+    /** Variante compacta: título menor, para headers de navegação interna (ex.: pastas). */
+    compact?: boolean;
+    /** Desligue para títulos digitados pelo usuário (nomes de pastas etc.), que não podem ter a caixa alterada. */
+    capitalizeTitle?: boolean;
+    /** Desligue quando o header é seguido imediatamente por tabs ou outra divisão própria. */
+    showDivider?: boolean;
+    canBack?: boolean;
+    canBackTo?: string;
+    canFloat?: boolean;
+    headline?: string;
+    className?: string;
+    titleClassName?: string;
+    onBackClick?: () => void;
+    disableBack?: boolean;
+}
+declare const PageTitle: React.FC<IPageTitleProps>;
+export default PageTitle;

package/dist/components/Navigation/PageTitle.js

@@ -0,0 +1,241 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useRef, useEffect } from "react";
+import classNames from "classnames";
+import { useTranslation } from "react-i18next";
+import ControlledButton from "../Form/ControlledButton.js";
+import ControlledTooltip from "../UI/ControlledTooltip.js";
+import { mergeClasses } from "../../helpers/mergeClasses.js";
+import { capitalizeAllLetters } from "../../helpers/stringHelpers.js";
+import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
+import ControlledBreadcrumb from "./ControlledBreadcrumb.js";
+import { PageTitleCollapseProvider } from "./PageTitleCollapseContext.js";
+import { usePageTitleNavigation } from "./PageTitleNavigationContext.js";
+import { useUiNavigation } from "./UiNavigationContext.js";
+const MEDIA_BOX_CLASSNAME = {
+  sm: "size-8 rounded-lg",
+  md: "size-10 rounded-xl",
+  lg: "size-20 rounded-xl"
+};
+const MEDIA_ICON_SIZE = { sm: 18, md: 22, lg: 34 };
+const COLLAPSED_MEDIA_SIZE = { sm: "sm", md: "sm", lg: "md" };
+const COLLAPSE_AT_SCROLL = 48;
+const EXPAND_AT_SCROLL = 16;
+const findScrollParent = (node) => {
+  let current = node?.parentElement ?? null;
+  while (current) {
+    const { overflowY } = getComputedStyle(current);
+    if (overflowY === "auto" || overflowY === "scroll") return current;
+    current = current.parentElement;
+  }
+  return null;
+};
+const PageTitle = ({
+  canBack = false,
+  canFloat = false,
+  canBackTo,
+  title = "",
+  titleContent,
+  titleAs: TitleTag = "span",
+  eyebrow,
+  subtitleSlot,
+  headline,
+  slot,
+  slotAlign = "center",
+  titleSlot,
+  leadingSlot,
+  breadcrumb,
+  autoBreadcrumb = true,
+  titleIcon,
+  titleIconClassName,
+  titleImage,
+  titleMediaSize,
+  collapseOnScroll = true,
+  collapseScrollRef,
+  autoIcon = true,
+  compact = false,
+  capitalizeTitle = true,
+  showDivider = true,
+  className,
+  titleClassName,
+  onBackClick,
+  disableBack = false
+}) => {
+  const { t } = useTranslation("ui");
+  const { navigate, goBack, location } = useUiNavigation();
+  const isFirefox = () => typeof navigator !== "undefined" && navigator.userAgent.toLowerCase().includes("firefox");
+  const handleBack = () => {
+    if (disableBack) return;
+    if (onBackClick) {
+      onBackClick();
+    } else if (canBackTo) {
+      navigate(canBackTo);
+    } else {
+      goBack();
+    }
+  };
+  const { resolveTrail } = usePageTitleNavigation();
+  const menuTrail = useMemo(() => {
+    const needsTrail = autoBreadcrumb && !breadcrumb && !canFloat || autoIcon && !titleIcon && !titleImage;
+    return needsTrail ? resolveTrail(location.pathname) : [];
+  }, [autoBreadcrumb, breadcrumb, canFloat, autoIcon, titleIcon, titleImage, location.pathname, resolveTrail]);
+  const resolvedBreadcrumb = breadcrumb ?? (autoBreadcrumb && !canFloat && menuTrail.length >= 2 ? /* @__PURE__ */ jsx(
+    ControlledBreadcrumb,
+    {
+      ariaLabel: t("pageTitle.breadcrumbLabel"),
+      items: menuTrail.map((item, index) => ({
+        key: item.key,
+        label: item.label,
+        to: index < menuTrail.length - 1 ? item.to : void 0
+      }))
+    }
+  ) : void 0);
+  const resolvedTitleIcon = titleIcon ?? (autoIcon ? menuTrail[menuTrail.length - 1]?.icon : void 0);
+  const [failedTitleImageSrc, setFailedTitleImageSrc] = useState(null);
+  const rendersTitleImage = Boolean(titleImage?.src) && titleImage?.src !== failedTitleImageSrc;
+  const rootRef = useRef(null);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const collapses = collapseOnScroll && !canFloat;
+  useEffect(() => {
+    if (!collapses) {
+      setIsCollapsed(false);
+      return;
+    }
+    const root = rootRef.current;
+    if (!root) return;
+    const container = collapseScrollRef?.current ?? findScrollParent(root);
+    if (!container || container.contains(root)) return;
+    let frame = 0;
+    const evaluate = () => {
+      frame = 0;
+      const offset = container.scrollTop;
+      setIsCollapsed((previous) => previous ? offset > EXPAND_AT_SCROLL : offset >= COLLAPSE_AT_SCROLL);
+    };
+    const handleScroll = () => {
+      if (!frame) frame = requestAnimationFrame(evaluate);
+    };
+    evaluate();
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [collapses, collapseScrollRef]);
+  const isCompactLayout = compact || isCollapsed;
+  const resolvedMediaSize = titleMediaSize ?? (compact ? "sm" : "md");
+  const mediaSize = isCollapsed ? COLLAPSED_MEDIA_SIZE[resolvedMediaSize] : resolvedMediaSize;
+  const mediaBoxClassName = MEDIA_BOX_CLASSNAME[mediaSize];
+  const mediaIconSize = MEDIA_ICON_SIZE[mediaSize];
+  const mediaTransitionClassName = "transition-[width,height] duration-base ease-enter";
+  const collapseValue = useMemo(() => ({ isCollapsed }), [isCollapsed]);
+  return /* @__PURE__ */ jsx(PageTitleCollapseProvider, { value: collapseValue, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: classNames(
+        "flex flex-col",
+        {
+          "zIndexMax fixed top-16 mr-7": canFloat,
+          // Collapsed it keeps NO background: the header never has content passing behind it, so
+          // painting one would only add a panel nobody asked for. The padding is what keeps the
+          // shrunken row off the content below instead.
+          "py-2": isCollapsed
+        },
+        className
+      ),
+      style: {
+        width: canFloat ? isFirefox() ? "-moz-available" : "-webkit-fill-available" : "100%"
+      },
+      children: [
+        resolvedBreadcrumb && !isCollapsed && /* @__PURE__ */ jsx("div", { className: "mb-2 shrink-0", children: resolvedBreadcrumb }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classNames("flex w-full flex-wrap justify-between gap-x-4 gap-y-2", {
+              "items-start": slotAlign === "start",
+              "items-center": slotAlign !== "start",
+              "bg-surface py-5": canFloat
+            }),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: classNames("flex min-w-0 flex-1 basis-60 items-center", isCompactLayout ? "gap-2" : "gap-3"), children: [
+                leadingSlot,
+                canBack && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.back"), children: /* @__PURE__ */ jsx(
+                  ControlledButton,
+                  {
+                    "aria-label": t("actions.back"),
+                    defaultHtmlButton: true,
+                    onClick: handleBack,
+                    disabled: disableBack,
+                    className: classNames(
+                      "flex shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-interactive duration-base ease-enter hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border active:scale-90 disabled:pointer-events-none disabled:text-foreground-faint",
+                      isCompactLayout ? "size-8" : "size-9"
+                    ),
+                    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "arrow_back", size: isCompactLayout ? 18 : 20 })
+                  }
+                ) }),
+                rendersTitleImage && titleImage ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: titleImage.src,
+                    alt: titleImage.alt,
+                    onError: () => setFailedTitleImageSrc(titleImage.src),
+                    className: mergeClasses(
+                      "shrink-0 border border-border object-cover",
+                      mediaTransitionClassName,
+                      mediaBoxClassName,
+                      titleImage.className
+                    )
+                  }
+                ) : resolvedTitleIcon && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: mergeClasses(
+                      "flex shrink-0 items-center justify-center",
+                      mediaTransitionClassName,
+                      mediaBoxClassName,
+                      titleIconClassName ?? "bg-brand-soft text-brand-emphasis"
+                    ),
+                    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: resolvedTitleIcon, size: mediaIconSize, fill: true, className: "text-inherit" })
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+                  eyebrow && !isCollapsed && /* @__PURE__ */ jsx("span", { className: "mb-0.5 text-xs font-semibold uppercase tracking-widest text-foreground-faint", children: eyebrow }),
+                  /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    titleContent ?? /* @__PURE__ */ jsx(
+                      TitleTag,
+                      {
+                        className: classNames(
+                          "min-w-0 truncate",
+                          isCompactLayout ? "text-sm font-semibold text-foreground" : "text-lg font-bold tracking-tight text-foreground laptop:text-xl",
+                          titleClassName
+                        ),
+                        children: capitalizeTitle ? capitalizeAllLetters(title) : title
+                      }
+                    ),
+                    titleSlot
+                  ] }),
+                  headline && !isCollapsed && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xs text-foreground-subtle", children: headline }),
+                  subtitleSlot && !isCollapsed && /* @__PURE__ */ jsx("div", { className: "mt-1 flex min-w-0 flex-col gap-1", children: subtitleSlot })
+                ] })
+              ] }),
+              slot && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames(
+                    "ml-auto flex shrink-0 flex-wrap justify-end gap-2",
+                    slotAlign === "start" ? "items-start" : "items-center"
+                  ),
+                  children: slot
+                }
+              )
+            ]
+          }
+        ),
+        showDivider && !canFloat && (title.length > 0 || Boolean(titleContent)) && /* @__PURE__ */ jsx("hr", { className: classNames("border-border-subtle", isCompactLayout ? "mb-2 mt-2" : "mb-2 mt-3") })
+      ]
+    }
+  ) });
+};
+export {
+  PageTitle as default
+};
+//# sourceMappingURL=PageTitle.js.map

package/dist/components/Navigation/PageTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTitle.js","sources":["../../../src/components/Navigation/PageTitle.tsx"],"sourcesContent":["import { ReactNode, RefObject, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { mergeClasses } from '@/helpers/mergeClasses';\nimport { capitalizeAllLetters } from '@/helpers/stringHelpers';\n\nimport { MaterialSymbol, SymbolCodepoints } from '../UI/MaterialSymbol';\n\nimport ControlledBreadcrumb from './ControlledBreadcrumb';\nimport { PageTitleCollapseProvider } from './PageTitleCollapseContext';\nimport { usePageTitleNavigation } from './PageTitleNavigationContext';\nimport { useUiNavigation } from './UiNavigationContext';\n\nexport interface IPageTitleImage {\n  src: string;\n  /** The image REPLACES the icon chip, so it carries the accessible name of what it depicts. */\n  alt: string;\n  /** Escape hatch for shape and size, e.g. `rounded-full` for an avatar. Merged last, so it wins. */\n  className?: string;\n}\n\nconst MEDIA_BOX_CLASSNAME: Record<'sm' | 'md' | 'lg', string> = {\n  sm: 'size-8 rounded-lg',\n  md: 'size-10 rounded-xl',\n  lg: 'size-20 rounded-xl',\n};\n\nconst MEDIA_ICON_SIZE: Record<'sm' | 'md' | 'lg', number> = { sm: 18, md: 22, lg: 34 };\n\n/** One step down, so a record cover stays recognisable in the collapsed header instead of vanishing. */\nconst COLLAPSED_MEDIA_SIZE: Record<'sm' | 'md' | 'lg', 'sm' | 'md' | 'lg'> = { sm: 'sm', md: 'sm', lg: 'md' };\n\n/**\n * Scroll offsets, in px, at which the header shrinks and grows back. They differ on purpose:\n * collapsing and expanding at the same position makes the header flicker for a whole gesture when a\n * scroll lands on it.\n */\nconst COLLAPSE_AT_SCROLL = 48;\nconst EXPAND_AT_SCROLL = 16;\n\nconst findScrollParent = (node: HTMLElement | null): HTMLElement | null => {\n  let current = node?.parentElement ?? null;\n  while (current) {\n    const { overflowY } = getComputedStyle(current);\n    if (overflowY === 'auto' || overflowY === 'scroll') return current;\n    current = current.parentElement;\n  }\n  return null;\n};\n\ninterface IPageTitleProps {\n  title?: string;\n  /** Substitui o span do título por conteúdo rico (ex.: nome editável inline da ficha técnica). */\n  titleContent?: ReactNode;\n  /**\n   * Element of the default title. The page's main title passes `h1`, so a page has its heading\n   * without rebuilding these classes in `titleContent`; `span` stays the default because a compact\n   * or embedded header is not one, and neither are the several a screen can hold.\n   */\n  titleAs?: 'h1' | 'h2' | 'h3' | 'span';\n  /** Rótulo pequeno em caixa alta acima do título (ex.: \"FICHA TÉCNICA\"). */\n  eyebrow?: string;\n  /** Conteúdo abaixo da linha do título, dentro da coluna de texto (tags, steppers). */\n  subtitleSlot?: ReactNode;\n  slot?: ReactNode;\n  /**\n   * Where the `slot` sits against the text column. `center` (default) is right for a one-line title with\n   * a couple of buttons; `start` pins it to the TOP of the header, which is what a tall identification\n   * block needs so its actions line up with the eyebrow instead of floating at the middle.\n   */\n  slotAlign?: 'center' | 'start';\n  /** Conteúdo renderizado à ESQUERDA, imediatamente ao lado do título (o `slot` fica à direita). */\n  titleSlot?: ReactNode;\n  /** Conteúdo renderizado ANTES do ícone/título (ex.: botão voltar customizado, alvo de drop). */\n  leadingSlot?: ReactNode;\n  /** Trilha custom acima do título (use `ControlledBreadcrumb`). Sem ela, a trilha é derivada do menu. */\n  breadcrumb?: ReactNode;\n  /** Deriva a trilha automaticamente da árvore de navegação quando `breadcrumb` não é passado. */\n  autoBreadcrumb?: boolean;\n  /** Ícone em chip à esquerda do título. Sem ele, herda o ícone do item de menu da rota atual. */\n  titleIcon?: SymbolCodepoints;\n  titleIconClassName?: string;\n  /**\n   * An image in the icon chip's place, at the same size and radius (e.g. the product cover on a\n   * datasheet header). A src that fails to load falls back to the icon instead of leaving a broken\n   * image in the header.\n   */\n  titleImage?: IPageTitleImage;\n  /**\n   * Size of the leading media (icon chip or `titleImage`). `md` is the 2.5rem chip every page uses;\n   * `lg` is the 5rem cover of a RECORD header, where the image identifies the record itself (a product\n   * datasheet). `compact` already implies `sm`, so pass this only to go bigger.\n   */\n  titleMediaSize?: 'sm' | 'md' | 'lg';\n  /**\n   * The header shrinks once the content beside it has been scrolled: the breadcrumb, the eyebrow, the\n   * headline and the `subtitleSlot` go, the media drops one size (the record's picture stays, at the\n   * icon chip's size) and the title takes its compact type. The back button and the `slot` never move.\n   *\n   * It only applies where the header STAYS ON SCREEN while something else scrolls, which is a page\n   * whose content lives in a container beside the header (`collapseScrollRef`). When the page itself\n   * scrolls, the header goes with it and there is nothing to shrink: pinning it there would mean\n   * painting a background under it, and a header that grows a surface halfway through a scroll reads\n   * as a panel appearing out of nowhere.\n   *\n   * EXPANDED, IT RENDERS EXACTLY WHAT IT RENDERED BEFORE THIS EXISTED: no wrapper node, no extra\n   * element, no background, no positioning. That is deliberate. The first version added a sentinel\n   * node as a sibling of the header, and since almost every page wraps it in a `flex flex-col\n   * gap-y-*`, that node became a flex item and every page grew a stray gap.\n   */\n  collapseOnScroll?: boolean;\n  /**\n   * The element whose scrolling drives the collapse. Only needed when the page's content scrolls in a\n   * container that is NOT an ancestor of the header, which is what a split layout does (a fixed header\n   * over an independently scrolling body). Left out, the header finds its own scrollable ancestor.\n   */\n  collapseScrollRef?: RefObject<HTMLElement | null>;\n  /** Deriva o ícone automaticamente do menu quando `titleIcon` não é passado. */\n  autoIcon?: boolean;\n  /** Variante compacta: título menor, para headers de navegação interna (ex.: pastas). */\n  compact?: boolean;\n  /** Desligue para títulos digitados pelo usuário (nomes de pastas etc.), que não podem ter a caixa alterada. */\n  capitalizeTitle?: boolean;\n  /** Desligue quando o header é seguido imediatamente por tabs ou outra divisão própria. */\n  showDivider?: boolean;\n  canBack?: boolean;\n  canBackTo?: string;\n  canFloat?: boolean;\n  headline?: string;\n  className?: string;\n  titleClassName?: string;\n  onBackClick?: () => void;\n  disableBack?: boolean;\n}\n\nconst PageTitle: React.FC<IPageTitleProps> = ({\n  canBack = false,\n  canFloat = false,\n  canBackTo,\n  title = '',\n  titleContent,\n  titleAs: TitleTag = 'span',\n  eyebrow,\n  subtitleSlot,\n  headline,\n  slot,\n  slotAlign = 'center',\n  titleSlot,\n  leadingSlot,\n  breadcrumb,\n  autoBreadcrumb = true,\n  titleIcon,\n  titleIconClassName,\n  titleImage,\n  titleMediaSize,\n  collapseOnScroll = true,\n  collapseScrollRef,\n  autoIcon = true,\n  compact = false,\n  capitalizeTitle = true,\n  showDivider = true,\n  className,\n  titleClassName,\n  onBackClick,\n  disableBack = false,\n}) => {\n  const { t } = useTranslation('ui');\n  const { navigate, goBack, location } = useUiNavigation();\n\n  const isFirefox = () => typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');\n\n  const handleBack = () => {\n    if (disableBack) return;\n\n    if (onBackClick) {\n      onBackClick();\n    } else if (canBackTo) {\n      navigate(canBackTo);\n    } else {\n      goBack();\n    }\n  };\n\n  const { resolveTrail } = usePageTitleNavigation();\n\n  const menuTrail = useMemo(() => {\n    const needsTrail = (autoBreadcrumb && !breadcrumb && !canFloat) || (autoIcon && !titleIcon && !titleImage);\n    return needsTrail ? resolveTrail(location.pathname) : [];\n  }, [autoBreadcrumb, breadcrumb, canFloat, autoIcon, titleIcon, titleImage, location.pathname, resolveTrail]);\n\n  const resolvedBreadcrumb =\n    breadcrumb ??\n    (autoBreadcrumb && !canFloat && menuTrail.length >= 2 ? (\n      <ControlledBreadcrumb\n        ariaLabel={t('pageTitle.breadcrumbLabel')}\n        items={menuTrail.map((item, index) => ({\n          key: item.key,\n          label: item.label,\n          to: index < menuTrail.length - 1 ? item.to : undefined,\n        }))}\n      />\n    ) : undefined);\n\n  const resolvedTitleIcon = titleIcon ?? (autoIcon ? menuTrail[menuTrail.length - 1]?.icon : undefined);\n\n  // Holds the src that failed rather than a boolean, so pointing at another image retries on its own.\n  const [failedTitleImageSrc, setFailedTitleImageSrc] = useState<string | null>(null);\n  const rendersTitleImage = Boolean(titleImage?.src) && titleImage?.src !== failedTitleImageSrc;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  // A floating header is already pinned by its own mechanism, and collapsing it would fight it.\n  const collapses = collapseOnScroll && !canFloat;\n\n  useEffect(() => {\n    if (!collapses) {\n      setIsCollapsed(false);\n      return;\n    }\n\n    const root = rootRef.current;\n    if (!root) return;\n\n    const container = collapseScrollRef?.current ?? findScrollParent(root);\n    // A container that CONTAINS the header is the page scrolling, header included: it leaves with\n    // the content, so there is nothing to shrink. Shrinking only means something where the header\n    // stays put while the content moves, which is a container beside it, never around it.\n    if (!container || container.contains(root)) return;\n\n    let frame = 0;\n\n    const evaluate = () => {\n      frame = 0;\n      const offset = container.scrollTop;\n      setIsCollapsed((previous) => (previous ? offset > EXPAND_AT_SCROLL : offset >= COLLAPSE_AT_SCROLL));\n    };\n\n    const handleScroll = () => {\n      if (!frame) frame = requestAnimationFrame(evaluate);\n    };\n\n    evaluate();\n    container.addEventListener('scroll', handleScroll, { passive: true });\n    return () => {\n      container.removeEventListener('scroll', handleScroll);\n      if (frame) cancelAnimationFrame(frame);\n    };\n  }, [collapses, collapseScrollRef]);\n\n  const isCompactLayout = compact || isCollapsed;\n  const resolvedMediaSize = titleMediaSize ?? (compact ? 'sm' : 'md');\n  const mediaSize = isCollapsed ? COLLAPSED_MEDIA_SIZE[resolvedMediaSize] : resolvedMediaSize;\n  const mediaBoxClassName = MEDIA_BOX_CLASSNAME[mediaSize];\n  const mediaIconSize = MEDIA_ICON_SIZE[mediaSize];\n  const mediaTransitionClassName = 'transition-[width,height] duration-base ease-enter';\n  const collapseValue = useMemo(() => ({ isCollapsed }), [isCollapsed]);\n\n  return (\n    <PageTitleCollapseProvider value={collapseValue}>\n      <div\n        ref={rootRef}\n        className={classNames(\n          'flex flex-col',\n          {\n            'zIndexMax fixed top-16 mr-7': canFloat,\n            // Collapsed it keeps NO background: the header never has content passing behind it, so\n            // painting one would only add a panel nobody asked for. The padding is what keeps the\n            // shrunken row off the content below instead.\n            'py-2': isCollapsed,\n          },\n          className,\n        )}\n        style={{\n          width: canFloat ? (isFirefox() ? '-moz-available' : '-webkit-fill-available') : '100%',\n        }}\n      >\n        {resolvedBreadcrumb && !isCollapsed && <div className=\"mb-2 shrink-0\">{resolvedBreadcrumb}</div>}\n\n        <div\n          className={classNames('flex w-full flex-wrap justify-between gap-x-4 gap-y-2', {\n            'items-start': slotAlign === 'start',\n            'items-center': slotAlign !== 'start',\n            'bg-surface py-5': canFloat,\n          })}\n        >\n          <div className={classNames('flex min-w-0 flex-1 basis-60 items-center', isCompactLayout ? 'gap-2' : 'gap-3')}>\n            {leadingSlot}\n\n            {canBack && (\n              <ControlledTooltip content={t('actions.back')}>\n                <ControlledButton\n                  aria-label={t('actions.back')}\n                  defaultHtmlButton\n                  onClick={handleBack}\n                  disabled={disableBack}\n                  className={classNames(\n                    'flex shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-interactive duration-base ease-enter hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border active:scale-90 disabled:pointer-events-none disabled:text-foreground-faint',\n                    isCompactLayout ? 'size-8' : 'size-9',\n                  )}\n                >\n                  <MaterialSymbol icon=\"arrow_back\" size={isCompactLayout ? 18 : 20} />\n                </ControlledButton>\n              </ControlledTooltip>\n            )}\n\n            {rendersTitleImage && titleImage ? (\n              <img\n                src={titleImage.src}\n                alt={titleImage.alt}\n                onError={() => setFailedTitleImageSrc(titleImage.src)}\n                className={mergeClasses(\n                  'shrink-0 border border-border object-cover',\n                  mediaTransitionClassName,\n                  mediaBoxClassName,\n                  titleImage.className,\n                )}\n              />\n            ) : (\n              resolvedTitleIcon && (\n                <span\n                  className={mergeClasses(\n                    'flex shrink-0 items-center justify-center',\n                    mediaTransitionClassName,\n                    mediaBoxClassName,\n                    titleIconClassName ?? 'bg-brand-soft text-brand-emphasis',\n                  )}\n                >\n                  <MaterialSymbol icon={resolvedTitleIcon} size={mediaIconSize} fill className=\"text-inherit\" />\n                </span>\n              )\n            )}\n\n            <div className=\"flex min-w-0 flex-1 flex-col\">\n              {eyebrow && !isCollapsed && (\n                <span className=\"mb-0.5 text-xs font-semibold uppercase tracking-widest text-foreground-faint\">\n                  {eyebrow}\n                </span>\n              )}\n\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {titleContent ?? (\n                  <TitleTag\n                    className={classNames(\n                      'min-w-0 truncate',\n                      isCompactLayout\n                        ? 'text-sm font-semibold text-foreground'\n                        : 'text-lg font-bold tracking-tight text-foreground laptop:text-xl',\n                      titleClassName,\n                    )}\n                  >\n                    {capitalizeTitle ? capitalizeAllLetters(title) : title}\n                  </TitleTag>\n                )}\n\n                {titleSlot}\n              </div>\n\n              {headline && !isCollapsed && <span className=\"mt-0.5 text-xs text-foreground-subtle\">{headline}</span>}\n\n              {subtitleSlot && !isCollapsed && <div className=\"mt-1 flex min-w-0 flex-col gap-1\">{subtitleSlot}</div>}\n            </div>\n          </div>\n\n          {slot && (\n            <div\n              className={classNames(\n                'ml-auto flex shrink-0 flex-wrap justify-end gap-2',\n                slotAlign === 'start' ? 'items-start' : 'items-center',\n              )}\n            >\n              {slot}\n            </div>\n          )}\n        </div>\n        {showDivider && !canFloat && (title.length > 0 || Boolean(titleContent)) && (\n          <hr className={classNames('border-border-subtle', isCompactLayout ? 'mb-2 mt-2' : 'mb-2 mt-3')} />\n        )}\n      </div>\n    </PageTitleCollapseProvider>\n  );\n};\n\nexport default PageTitle;\n"],"names":[],"mappings":"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"}

package/dist/components/Navigation/PageTitleCollapseContext.d.ts

@@ -0,0 +1,13 @@
+interface IPageTitleCollapseValue {
+    /** `true` once the page under the header has been scrolled and the header shrank. */
+    isCollapsed: boolean;
+}
+export declare const PageTitleCollapseProvider: import('react').Provider<IPageTitleCollapseValue>;
+/**
+ * Reads the collapsed state of the PageTitle a node is rendered inside. It exists for the rich
+ * `titleContent` of a record header, which PageTitle cannot restyle on its own: the header owns
+ * that markup, so it is the one that decides how its title behaves when the header shrinks.
+ * Outside a PageTitle it answers `false`, so a component can be shared by both surfaces.
+ */
+export declare const usePageTitleCollapsed: () => boolean;
+export {};

package/dist/components/Navigation/PageTitleCollapseContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const PageTitleCollapseContext = createContext({ isCollapsed: false });
+const PageTitleCollapseProvider = PageTitleCollapseContext.Provider;
+const usePageTitleCollapsed = () => useContext(PageTitleCollapseContext).isCollapsed;
+export {
+  PageTitleCollapseProvider,
+  usePageTitleCollapsed
+};
+//# sourceMappingURL=PageTitleCollapseContext.js.map

package/dist/components/Navigation/PageTitleCollapseContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTitleCollapseContext.js","sources":["../../../src/components/Navigation/PageTitleCollapseContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ninterface IPageTitleCollapseValue {\n  /** `true` once the page under the header has been scrolled and the header shrank. */\n  isCollapsed: boolean;\n}\n\nconst PageTitleCollapseContext = createContext<IPageTitleCollapseValue>({ isCollapsed: false });\n\nexport const PageTitleCollapseProvider = PageTitleCollapseContext.Provider;\n\n/**\n * Reads the collapsed state of the PageTitle a node is rendered inside. It exists for the rich\n * `titleContent` of a record header, which PageTitle cannot restyle on its own: the header owns\n * that markup, so it is the one that decides how its title behaves when the header shrinks.\n * Outside a PageTitle it answers `false`, so a component can be shared by both surfaces.\n */\nexport const usePageTitleCollapsed = (): boolean => useContext(PageTitleCollapseContext).isCollapsed;\n"],"names":[],"mappings":";AAOA,MAAM,2BAA2B,cAAuC,EAAE,aAAa,OAAO;AAEvF,MAAM,4BAA4B,yBAAyB;AAQ3D,MAAM,wBAAwB,MAAe,WAAW,wBAAwB,EAAE;"}

package/dist/components/Navigation/PageTitleNavigationContext.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+import { SymbolCodepoints } from '../UI/MaterialSymbol';
+export interface IPageTitleTrailItem {
+    key: string;
+    /** Already translated: the host resolves i18n keys before handing the trail over. */
+    label: string;
+    to: string;
+    icon?: SymbolCodepoints;
+}
+export type TPageTitleTrailResolver = (pathname: string) => Array<IPageTitleTrailItem>;
+interface IPageTitleNavigationContextValue {
+    resolveTrail: TPageTitleTrailResolver;
+}
+interface IPageTitleNavigationProviderProps {
+    resolveTrail: TPageTitleTrailResolver;
+    children: ReactNode;
+}
+/** Lets `PageTitle` derive breadcrumb and icon from the host's navigation tree without knowing it. */
+export declare const PageTitleNavigationProvider: React.FC<IPageTitleNavigationProviderProps>;
+export declare const usePageTitleNavigation: () => IPageTitleNavigationContextValue;
+export {};

package/dist/components/Navigation/PageTitleNavigationContext.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useMemo, useContext } from "react";
+const resolveNoTrail = () => [];
+const PageTitleNavigationContext = createContext({ resolveTrail: resolveNoTrail });
+const PageTitleNavigationProvider = ({
+  resolveTrail,
+  children
+}) => {
+  const value = useMemo(() => ({ resolveTrail }), [resolveTrail]);
+  return /* @__PURE__ */ jsx(PageTitleNavigationContext.Provider, { value, children });
+};
+const usePageTitleNavigation = () => useContext(PageTitleNavigationContext);
+export {
+  PageTitleNavigationProvider,
+  usePageTitleNavigation
+};
+//# sourceMappingURL=PageTitleNavigationContext.js.map

package/dist/components/Navigation/PageTitleNavigationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTitleNavigationContext.js","sources":["../../../src/components/Navigation/PageTitleNavigationContext.tsx"],"sourcesContent":["import { createContext, ReactNode, useContext, useMemo } from 'react';\n\nimport { SymbolCodepoints } from '../UI/MaterialSymbol';\n\nexport interface IPageTitleTrailItem {\n  key: string;\n  /** Already translated: the host resolves i18n keys before handing the trail over. */\n  label: string;\n  to: string;\n  icon?: SymbolCodepoints;\n}\n\nexport type TPageTitleTrailResolver = (pathname: string) => Array<IPageTitleTrailItem>;\n\ninterface IPageTitleNavigationContextValue {\n  resolveTrail: TPageTitleTrailResolver;\n}\n\nconst resolveNoTrail: TPageTitleTrailResolver = () => [];\n\nconst PageTitleNavigationContext = createContext<IPageTitleNavigationContextValue>({ resolveTrail: resolveNoTrail });\n\ninterface IPageTitleNavigationProviderProps {\n  resolveTrail: TPageTitleTrailResolver;\n  children: ReactNode;\n}\n\n/** Lets `PageTitle` derive breadcrumb and icon from the host's navigation tree without knowing it. */\nexport const PageTitleNavigationProvider: React.FC<IPageTitleNavigationProviderProps> = ({\n  resolveTrail,\n  children,\n}) => {\n  const value = useMemo(() => ({ resolveTrail }), [resolveTrail]);\n  return <PageTitleNavigationContext.Provider value={value}>{children}</PageTitleNavigationContext.Provider>;\n};\n\nexport const usePageTitleNavigation = (): IPageTitleNavigationContextValue => useContext(PageTitleNavigationContext);\n"],"names":[],"mappings":";;AAkBA,MAAM,iBAA0C,MAAM,CAAA;AAEtD,MAAM,6BAA6B,cAAgD,EAAE,cAAc,gBAAgB;AAQ5G,MAAM,8BAA2E,CAAC;AAAA,EACvF;AAAA,EACA;AACF,MAAM;AACJ,QAAM,QAAQ,QAAQ,OAAO,EAAE,iBAAiB,CAAC,YAAY,CAAC;AAC9D,SAAO,oBAAC,2BAA2B,UAA3B,EAAoC,OAAe,SAAA,CAAS;AACtE;AAEO,MAAM,yBAAyB,MAAwC,WAAW,0BAA0B;"}

package/dist/components/Navigation/ReactRouterNavigationAdapter.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Binds the navigation port to react-router. The ONLY module in the package that imports
+ * `react-router-dom` (an optional peer): hosts without it simply never import this file.
+ */
+export declare const UiReactRouterNavigationProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/components/Navigation/ReactRouterNavigationAdapter.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { Link, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { UiNavigationProvider } from "./UiNavigationContext.js";
+const RouterLink = forwardRef(({ to, children, ...rest }, ref) => /* @__PURE__ */ jsx(Link, { ref, to, ...rest, children }));
+RouterLink.displayName = "RouterLink";
+const UiReactRouterNavigationProvider = ({ children }) => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const value = useMemo(
+    () => ({
+      location: { pathname: location.pathname, search: location.search, state: location.state },
+      searchParams,
+      navigate: (to, options) => navigate(to, options),
+      goBack: () => navigate(-1),
+      setSearchParams: (updater, options) => setSearchParams(updater, options),
+      Link: RouterLink
+    }),
+    [location.pathname, location.search, location.state, searchParams, navigate, setSearchParams]
+  );
+  return /* @__PURE__ */ jsx(UiNavigationProvider, { value, children });
+};
+export {
+  UiReactRouterNavigationProvider
+};
+//# sourceMappingURL=ReactRouterNavigationAdapter.js.map

package/dist/components/Navigation/ReactRouterNavigationAdapter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactRouterNavigationAdapter.js","sources":["../../../src/components/Navigation/ReactRouterNavigationAdapter.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport { Link as ReactRouterDomLink, useLocation, useNavigate, useSearchParams } from 'react-router-dom';\n\nimport { IUiLinkProps, IUiNavigationApi, UiNavigationProvider } from './UiNavigationContext';\n\n/**\n * Forwards its ref because a link is a legitimate tooltip and menu trigger, and both of those clone\n * their child to inject one. As a plain function component it warned on every render of the app\n * header (\"Function components cannot be given refs\") and silently lost the anchor the surface\n * positions against.\n */\nconst RouterLink = forwardRef<HTMLAnchorElement, IUiLinkProps>(({ to, children, ...rest }, ref) => (\n  <ReactRouterDomLink ref={ref} to={to} {...rest}>\n    {children}\n  </ReactRouterDomLink>\n));\n\nRouterLink.displayName = 'RouterLink';\n\n/**\n * Binds the navigation port to react-router. The ONLY module in the package that imports\n * `react-router-dom` (an optional peer): hosts without it simply never import this file.\n */\nexport const UiReactRouterNavigationProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {\n  const location = useLocation();\n  const navigate = useNavigate();\n  const [searchParams, setSearchParams] = useSearchParams();\n\n  const value = useMemo<IUiNavigationApi>(\n    () => ({\n      location: { pathname: location.pathname, search: location.search, state: location.state },\n      searchParams,\n      navigate: (to, options) => navigate(to, options),\n      goBack: () => navigate(-1),\n      setSearchParams: (updater, options) => setSearchParams(updater, options),\n      Link: RouterLink,\n    }),\n    [location.pathname, location.search, location.state, searchParams, navigate, setSearchParams],\n  );\n\n  return <UiNavigationProvider value={value}>{children}</UiNavigationProvider>;\n};\n"],"names":["ReactRouterDomLink"],"mappings":";;;;AAWA,MAAM,aAAa,WAA4C,CAAC,EAAE,IAAI,UAAU,GAAG,QAAQ,4BACxFA,MAAA,EAAmB,KAAU,IAAS,GAAG,MACvC,UACH,CACD;AAED,WAAW,cAAc;AAMlB,MAAM,kCAA2E,CAAC,EAAE,eAAe;AACxG,QAAM,WAAW,YAAA;AACjB,QAAM,WAAW,YAAA;AACjB,QAAM,CAAC,cAAc,eAAe,IAAI,gBAAA;AAExC,QAAM,QAAQ;AAAA,IACZ,OAAO;AAAA,MACL,UAAU,EAAE,UAAU,SAAS,UAAU,QAAQ,SAAS,QAAQ,OAAO,SAAS,MAAA;AAAA,MAClF;AAAA,MACA,UAAU,CAAC,IAAI,YAAY,SAAS,IAAI,OAAO;AAAA,MAC/C,QAAQ,MAAM,SAAS,EAAE;AAAA,MACzB,iBAAiB,CAAC,SAAS,YAAY,gBAAgB,SAAS,OAAO;AAAA,MACvE,MAAM;AAAA,IAAA;AAAA,IAER,CAAC,SAAS,UAAU,SAAS,QAAQ,SAAS,OAAO,cAAc,UAAU,eAAe;AAAA,EAAA;AAG9F,SAAO,oBAAC,sBAAA,EAAqB,OAAe,SAAA,CAAS;AACvD;"}

package/dist/components/Navigation/UiNavigationContext.d.ts

@@ -0,0 +1,38 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+export interface IUiNavigationLocation {
+    pathname: string;
+    search: string;
+    /** Ephemeral navigation state (react-router). Hosts without it always expose undefined. */
+    state?: unknown;
+}
+export interface IUiLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    to: string;
+    children?: ReactNode;
+}
+export type TUiSearchParamsSetter = (updater: (previousParams: URLSearchParams) => URLSearchParams, options?: {
+    replace?: boolean;
+}) => void;
+/**
+ * The navigation port: everything the components need from a router, and nothing else.
+ * The host decides who fulfils it: `UiReactRouterNavigationProvider` (react-router apps),
+ * a hand-rolled provider on `next/navigation` (Next.js), or nothing at all, in which case
+ * a window-based fallback keeps links and URL sync working with full page loads.
+ */
+export interface IUiNavigationApi {
+    location: IUiNavigationLocation;
+    searchParams: URLSearchParams;
+    navigate: (to: string, options?: {
+        replace?: boolean;
+        state?: unknown;
+    }) => void;
+    goBack: () => void;
+    setSearchParams: TUiSearchParamsSetter;
+    Link: React.ComponentType<IUiLinkProps>;
+}
+interface IUiNavigationProviderProps {
+    value: IUiNavigationApi;
+    children: ReactNode;
+}
+export declare const UiNavigationProvider: React.FC<IUiNavigationProviderProps>;
+export declare const useUiNavigation: () => IUiNavigationApi;
+export {};

package/dist/components/Navigation/UiNavigationContext.js

@@ -0,0 +1,44 @@
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo, createContext, forwardRef } from "react";
+const FallbackLink = forwardRef(({ to, children, ...rest }, ref) => /* @__PURE__ */ jsx("a", { ref, href: to, ...rest, children }));
+FallbackLink.displayName = "FallbackLink";
+const createFallbackNavigation = () => {
+  const hasWindow = typeof window !== "undefined";
+  const currentSearch = hasWindow ? window.location.search : "";
+  return {
+    location: {
+      pathname: hasWindow ? window.location.pathname : "/",
+      search: currentSearch,
+      state: void 0
+    },
+    searchParams: new URLSearchParams(currentSearch),
+    navigate: (to, options) => {
+      if (!hasWindow) return;
+      if (options?.replace) window.location.replace(to);
+      else window.location.assign(to);
+    },
+    goBack: () => {
+      if (hasWindow) window.history.back();
+    },
+    setSearchParams: (updater, options) => {
+      if (!hasWindow) return;
+      const nextParams = updater(new URLSearchParams(window.location.search));
+      const query = nextParams.toString();
+      const nextUrl = `${window.location.pathname}${query ? `?${query}` : ""}${window.location.hash}`;
+      if (options?.replace) window.history.replaceState(window.history.state, "", nextUrl);
+      else window.history.pushState(window.history.state, "", nextUrl);
+    },
+    Link: FallbackLink
+  };
+};
+const UiNavigationContext = createContext(null);
+const UiNavigationProvider = ({ value, children }) => /* @__PURE__ */ jsx(UiNavigationContext.Provider, { value, children });
+const useUiNavigation = () => {
+  const fromContext = useContext(UiNavigationContext);
+  return useMemo(() => fromContext ?? createFallbackNavigation(), [fromContext]);
+};
+export {
+  UiNavigationProvider,
+  useUiNavigation
+};
+//# sourceMappingURL=UiNavigationContext.js.map

package/dist/components/Navigation/UiNavigationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UiNavigationContext.js","sources":["../../../src/components/Navigation/UiNavigationContext.tsx"],"sourcesContent":["import { AnchorHTMLAttributes, createContext, forwardRef, ReactNode, useContext, useMemo } from 'react';\n\nexport interface IUiNavigationLocation {\n  pathname: string;\n  search: string;\n  /** Ephemeral navigation state (react-router). Hosts without it always expose undefined. */\n  state?: unknown;\n}\n\nexport interface IUiLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  to: string;\n  children?: ReactNode;\n}\n\nexport type TUiSearchParamsSetter = (\n  updater: (previousParams: URLSearchParams) => URLSearchParams,\n  options?: { replace?: boolean },\n) => void;\n\n/**\n * The navigation port: everything the components need from a router, and nothing else.\n * The host decides who fulfils it: `UiReactRouterNavigationProvider` (react-router apps),\n * a hand-rolled provider on `next/navigation` (Next.js), or nothing at all, in which case\n * a window-based fallback keeps links and URL sync working with full page loads.\n */\nexport interface IUiNavigationApi {\n  location: IUiNavigationLocation;\n  searchParams: URLSearchParams;\n  navigate: (to: string, options?: { replace?: boolean; state?: unknown }) => void;\n  goBack: () => void;\n  setSearchParams: TUiSearchParamsSetter;\n  Link: React.ComponentType<IUiLinkProps>;\n}\n\n/** Forwards its ref for the same reason `RouterLink` does: a link is a tooltip and menu trigger. */\nconst FallbackLink = forwardRef<HTMLAnchorElement, IUiLinkProps>(({ to, children, ...rest }, ref) => (\n  <a ref={ref} href={to} {...rest}>\n    {children}\n  </a>\n));\n\nFallbackLink.displayName = 'FallbackLink';\n\nconst createFallbackNavigation = (): IUiNavigationApi => {\n  const hasWindow = typeof window !== 'undefined';\n  const currentSearch = hasWindow ? window.location.search : '';\n\n  return {\n    location: {\n      pathname: hasWindow ? window.location.pathname : '/',\n      search: currentSearch,\n      state: undefined,\n    },\n    searchParams: new URLSearchParams(currentSearch),\n    navigate: (to, options) => {\n      if (!hasWindow) return;\n      if (options?.replace) window.location.replace(to);\n      else window.location.assign(to);\n    },\n    goBack: () => {\n      if (hasWindow) window.history.back();\n    },\n    setSearchParams: (updater, options) => {\n      if (!hasWindow) return;\n      const nextParams = updater(new URLSearchParams(window.location.search));\n      const query = nextParams.toString();\n      const nextUrl = `${window.location.pathname}${query ? `?${query}` : ''}${window.location.hash}`;\n      if (options?.replace) window.history.replaceState(window.history.state, '', nextUrl);\n      else window.history.pushState(window.history.state, '', nextUrl);\n    },\n    Link: FallbackLink,\n  };\n};\n\nconst UiNavigationContext = createContext<IUiNavigationApi | null>(null);\n\ninterface IUiNavigationProviderProps {\n  value: IUiNavigationApi;\n  children: ReactNode;\n}\n\nexport const UiNavigationProvider: React.FC<IUiNavigationProviderProps> = ({ value, children }) => (\n  <UiNavigationContext.Provider value={value}>{children}</UiNavigationContext.Provider>\n);\n\nexport const useUiNavigation = (): IUiNavigationApi => {\n  const fromContext = useContext(UiNavigationContext);\n  return useMemo(() => fromContext ?? createFallbackNavigation(), [fromContext]);\n};\n"],"names":[],"mappings":";;AAmCA,MAAM,eAAe,WAA4C,CAAC,EAAE,IAAI,UAAU,GAAG,KAAA,GAAQ,QAC3F,oBAAC,OAAE,KAAU,MAAM,IAAK,GAAG,MACxB,UACH,CACD;AAED,aAAa,cAAc;AAE3B,MAAM,2BAA2B,MAAwB;AACvD,QAAM,YAAY,OAAO,WAAW;AACpC,QAAM,gBAAgB,YAAY,OAAO,SAAS,SAAS;AAE3D,SAAO;AAAA,IACL,UAAU;AAAA,MACR,UAAU,YAAY,OAAO,SAAS,WAAW;AAAA,MACjD,QAAQ;AAAA,MACR,OAAO;AAAA,IAAA;AAAA,IAET,cAAc,IAAI,gBAAgB,aAAa;AAAA,IAC/C,UAAU,CAAC,IAAI,YAAY;AACzB,UAAI,CAAC,UAAW;AAChB,UAAI,SAAS,QAAS,QAAO,SAAS,QAAQ,EAAE;AAAA,UAC3C,QAAO,SAAS,OAAO,EAAE;AAAA,IAChC;AAAA,IACA,QAAQ,MAAM;AACZ,UAAI,UAAW,QAAO,QAAQ,KAAA;AAAA,IAChC;AAAA,IACA,iBAAiB,CAAC,SAAS,YAAY;AACrC,UAAI,CAAC,UAAW;AAChB,YAAM,aAAa,QAAQ,IAAI,gBAAgB,OAAO,SAAS,MAAM,CAAC;AACtE,YAAM,QAAQ,WAAW,SAAA;AACzB,YAAM,UAAU,GAAG,OAAO,SAAS,QAAQ,GAAG,QAAQ,IAAI,KAAK,KAAK,EAAE,GAAG,OAAO,SAAS,IAAI;AAC7F,UAAI,SAAS,QAAS,QAAO,QAAQ,aAAa,OAAO,QAAQ,OAAO,IAAI,OAAO;AAAA,kBACvE,QAAQ,UAAU,OAAO,QAAQ,OAAO,IAAI,OAAO;AAAA,IACjE;AAAA,IACA,MAAM;AAAA,EAAA;AAEV;AAEA,MAAM,sBAAsB,cAAuC,IAAI;AAOhE,MAAM,uBAA6D,CAAC,EAAE,OAAO,SAAA,MAClF,oBAAC,oBAAoB,UAApB,EAA6B,OAAe,SAAA,CAAS;AAGjD,MAAM,kBAAkB,MAAwB;AACrD,QAAM,cAAc,WAAW,mBAAmB;AAClD,SAAO,QAAQ,MAAM,eAAe,4BAA4B,CAAC,WAAW,CAAC;AAC/E;"}

package/dist/components/Search/UnifiedSearchBar.d.ts

@@ -0,0 +1,31 @@
+interface IUnifiedSearchBarSelectedFilters {
+    textSearch?: string | null;
+}
+interface IBaseSearchBarProps {
+    label?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+    debounceTime?: number;
+    initialValue?: string;
+    onClearFilter?: () => void;
+    minSearchLength?: number;
+    showClearButton?: boolean;
+    containerClassName?: string;
+    onSearchTermChange?: (searchTerm: string) => void;
+    selectedFilters?: IUnifiedSearchBarSelectedFilters;
+}
+interface IArraySearchBarProps<T> extends IBaseSearchBarProps {
+    mode: 'default';
+    searchableItems: Array<T> | null;
+    searchKeys: Array<keyof T>;
+    setFilteredItems: (filteredItems: Array<T>) => void;
+    useOnlyKeyword?: boolean;
+}
+interface ICallbackSearchBarProps extends IBaseSearchBarProps {
+    mode: 'callback';
+    filterCallback: (value: string) => void;
+}
+type TUnifiedSearchBarProps<T> = IArraySearchBarProps<T> | ICallbackSearchBarProps;
+declare function UnifiedSearchBar<T>(props: TUnifiedSearchBarProps<T>): import("react").JSX.Element;
+export default UnifiedSearchBar;