@salt-ds/lab 1.0.0-alpha.98 → 1.0.0-alpha.99

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @salt-ds/lab
 
+## 1.0.0-alpha.99
+
+### Minor Changes
+
+- 9c9b83e: Added `BreadcrumbsNext`, `BreadcrumbNext`, `BreadcrumbNextTrigger`, and `BreadcrumbNextLabel` for accessible breadcrumb navigation. Supports wrapping, disclosure collapse, and routing integration via `render` props.
+
+### Patch Changes
+
+- d37a311: Updated Floating UI from `0.26.28` to `0.27.19`.
+- Updated dependencies [747cb08]
+- Updated dependencies [d84df88]
+- Updated dependencies [56855cb]
+- Updated dependencies [e226b17]
+- Updated dependencies [9c9b83e]
+- Updated dependencies [747cb08]
+- Updated dependencies [d37a311]
+  - @salt-ds/core@1.67.0
+
 ## 1.0.0-alpha.98
 
 ### Minor Changes

package/css/salt-lab.css

@@ -174,6 +174,152 @@
   margin-bottom: var(--breadcrumbs-ol-wrap-li-marginBottom);
 }
 
+/* src/breadcrumbs-next/BreadcrumbNext.css */
+.saltBreadcrumbNext {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--salt-spacing-100);
+  list-style: none;
+  min-width: 0;
+}
+.saltBreadcrumbNext-current,
+.saltBreadcrumbNext-label,
+.saltBreadcrumbNext-link,
+.saltBreadcrumbNext-trigger {
+  min-width: 0;
+}
+.saltBreadcrumbNext-trigger {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--salt-spacing-50);
+  max-width: 100%;
+}
+.saltBreadcrumbNext-link.saltLink {
+  --link-color-visited: var(--link-color);
+  --link-textDecoration-visited: var(--link-textDecoration);
+}
+.saltBreadcrumbNext-current.saltLink {
+  cursor: var(--salt-cursor-text);
+}
+.saltBreadcrumbNext-separator {
+  --saltIcon-color: var(--salt-content-secondary-foreground);
+  --saltIcon-size: var(--salt-size-icon);
+  flex: 0 0 auto;
+}
+
+/* src/breadcrumbs-next/BreadcrumbsNext.css */
+.saltBreadcrumbsNext {
+  display: block;
+  margin-block: var(--salt-spacing-25);
+}
+.saltBreadcrumbsNext-ol {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  gap: var(--salt-spacing-100);
+  justify-content: flex-start;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.saltBreadcrumbsNext-ol-wrap {
+  flex-wrap: wrap;
+}
+.saltBreadcrumbsNext-collapseItem {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 1 auto;
+  gap: var(--salt-spacing-100);
+  list-style: none;
+  min-width: 0;
+}
+.saltBreadcrumbsNext-collapseButton[aria-expanded=true] {
+  background: var(--saltButton-background-active, var(--button-background-active));
+  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));
+  color: var(--saltButton-text-color-active, var(--button-text-color-active));
+  cursor: var(--salt-cursor-active);
+}
+.saltBreadcrumbsNext-disclosure {
+  background: var(--salt-container-primary-background);
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);
+  overflow: hidden;
+  overflow-y: auto;
+  min-width: 10em;
+  position: relative;
+  z-index: var(--salt-zIndex-flyover);
+  box-shadow: var(--salt-overlayable-shadow-popout);
+  box-sizing: border-box;
+  border-radius: var(--salt-palette-corner, 0);
+}
+.saltBreadcrumbsNext-disclosureList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.saltBreadcrumbsNext-disclosureListItem {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+.saltBreadcrumbsNext-disclosureItem {
+  color: var(--salt-content-primary-foreground);
+  background: var(--salt-selectable-background);
+  font-size: var(--salt-text-fontSize);
+  font-weight: var(--salt-text-fontWeight);
+  font-family: var(--salt-text-fontFamily);
+  line-height: var(--salt-text-lineHeight);
+  letter-spacing: var(--salt-text-letterSpacing);
+  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
+  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);
+  display: flex;
+  gap: var(--salt-spacing-100);
+  position: relative;
+  cursor: var(--salt-cursor-hover);
+  box-sizing: border-box;
+  flex-shrink: 0;
+  text-decoration: none;
+  width: 100%;
+}
+.saltBreadcrumbsNext-disclosureItem.saltLink {
+  --link-color: var(--salt-content-primary-foreground);
+  --link-color-hover: var(--salt-content-primary-foreground);
+  --link-color-active: var(--salt-content-primary-foreground);
+  --link-color-focus: var(--salt-content-primary-foreground);
+  --link-color-visited: var(--salt-content-primary-foreground);
+  --link-textDecoration: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-active: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-focus: var(--salt-typography-textDecoration-none);
+  --link-textDecoration-visited: var(--salt-typography-textDecoration-none);
+}
+.saltBreadcrumbsNext-disclosureItem.saltLink:focus:not(:focus-visible) {
+  outline: none;
+}
+.saltBreadcrumbsNext-disclosureItem:focus-visible,
+.saltBreadcrumbsNext-disclosureItem.saltLink:focus-visible {
+  outline: var(--salt-focused-outline);
+  outline-offset: calc(var(--salt-size-fixed-100) * -2);
+}
+.saltBreadcrumbsNext-disclosureItem:hover {
+  outline: none;
+}
+.saltBreadcrumbsNext-disclosureItem:hover,
+.saltBreadcrumbsNext-disclosureItem:focus-visible {
+  background: var(--salt-selectable-background-hover);
+}
+.saltBreadcrumbsNext-disclosureItem:active {
+  background: var(--salt-selectable-background-selected);
+  box-shadow: 0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected), 0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);
+}
+.saltBreadcrumbsNext-disclosureItem[aria-disabled=true],
+.saltBreadcrumbsNext-disclosureItem[aria-disabled=true]:active {
+  background: var(--salt-selectable-background-disabled);
+  color: var(--salt-content-primary-foreground-disabled);
+  cursor: var(--salt-cursor-disabled);
+  box-shadow: none;
+}
+
 /* src/button-bar/ButtonBar.css */
 .saltButtonBar {
   width: 100%;
@@ -3116,4 +3262,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/af5cd0a1-c6f1-43b2-ae56-ed25653d1b14.css */
+/* src/a1e4b79c-9deb-4780-be8e-e16a36fe360d.css */

package/dist-cjs/breadcrumbs-next/BreadcrumbNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltBreadcrumbNext {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 1 auto;\n  gap: var(--salt-spacing-100);\n  list-style: none;\n  min-width: 0;\n}\n\n.saltBreadcrumbNext-current,\n.saltBreadcrumbNext-label,\n.saltBreadcrumbNext-link,\n.saltBreadcrumbNext-trigger {\n  min-width: 0;\n}\n\n.saltBreadcrumbNext-trigger {\n  align-items: center;\n  display: inline-flex;\n  gap: var(--salt-spacing-50);\n  max-width: 100%;\n}\n\n.saltBreadcrumbNext-link.saltLink {\n  --link-color-visited: var(--link-color);\n  --link-textDecoration-visited: var(--link-textDecoration);\n}\n\n.saltBreadcrumbNext-current.saltLink {\n  cursor: var(--salt-cursor-text);\n}\n\n.saltBreadcrumbNext-separator {\n  --saltIcon-color: var(--salt-content-secondary-foreground);\n  --saltIcon-size: var(--salt-size-icon);\n\n  flex: 0 0 auto;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=BreadcrumbNext.css.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/breadcrumbs-next/BreadcrumbNext.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var BreadcrumbNext$1 = require('./BreadcrumbNext.css.js');
+var BreadcrumbNextLabel = require('./BreadcrumbNextLabel.js');
+var BreadcrumbNextTrigger = require('./BreadcrumbNextTrigger.js');
+var BreadcrumbNextContext = require('./internal/BreadcrumbNextContext.js');
+
+const withBaseName = core.makePrefixer("saltBreadcrumbNext");
+const withBreadcrumbsBaseName = core.makePrefixer("saltBreadcrumbsNext");
+function isPrimitiveBreadcrumbLabel(children) {
+  return typeof children === "string" && children.trim() !== "" || typeof children === "number";
+}
+function isMissingBreadcrumbContent(children) {
+  const childArray = react.Children.toArray(children);
+  return childArray.length === 0 || childArray.every(
+    (child) => typeof child === "string" && child.trim() === ""
+  );
+}
+let missingBreadcrumbContentWarningShown = false;
+function warnIfMissingBreadcrumbContent() {
+  if (process.env.NODE_ENV === "production" || missingBreadcrumbContentWarningShown) {
+    return;
+  }
+  missingBreadcrumbContentWarningShown = true;
+  console.warn(
+    "BreadcrumbNext requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbNextTrigger with BreadcrumbNextLabel for composed items."
+  );
+}
+const BreadcrumbNext = react.forwardRef(
+  function BreadcrumbNext2(props, ref) {
+    const {
+      children,
+      className,
+      current: currentProp,
+      href,
+      render,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-breadcrumb-next",
+      css: BreadcrumbNext$1,
+      window: targetWindow
+    });
+    const parentContext = BreadcrumbNextContext.useBreadcrumbNextContext();
+    const current = (parentContext == null ? void 0 : parentContext.current) ?? Boolean(currentProp);
+    const onNavigate = parentContext == null ? void 0 : parentContext.onNavigate;
+    const placement = (parentContext == null ? void 0 : parentContext.placement) ?? "trail";
+    const showSeparator = (parentContext == null ? void 0 : parentContext.showSeparator) ?? false;
+    const triggerRef = parentContext == null ? void 0 : parentContext.triggerRef;
+    const resolvedRender = render ?? (parentContext == null ? void 0 : parentContext.render);
+    const { LevelSeparatorIcon } = core.useIcon();
+    const missingContent = isMissingBreadcrumbContent(children);
+    if (missingContent) {
+      warnIfMissingBreadcrumbContent();
+    }
+    const primitiveChildren = isPrimitiveBreadcrumbLabel(children) ? children : void 0;
+    const content = missingContent ? null : primitiveChildren !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbNextTrigger.BreadcrumbNextTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbNextLabel.BreadcrumbNextLabel, { children: primitiveChildren }) }) : children;
+    const context = {
+      current,
+      href,
+      onNavigate,
+      placement,
+      render: resolvedRender,
+      showSeparator,
+      triggerRef
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        ref,
+        className: clsx.clsx(
+          placement === "disclosure" ? withBreadcrumbsBaseName("disclosureListItem") : withBaseName(),
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbNextContext.BreadcrumbNextContext.Provider, { value: context, children: [
+          content,
+          placement === "trail" && showSeparator ? /* @__PURE__ */ jsxRuntime.jsx(
+            LevelSeparatorIcon,
+            {
+              "aria-hidden": true,
+              className: withBaseName("separator")
+            }
+          ) : null
+        ] })
+      }
+    );
+  }
+);
+
+exports.BreadcrumbNext = BreadcrumbNext;
+//# sourceMappingURL=BreadcrumbNext.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNext.js","sources":["../src/breadcrumbs-next/BreadcrumbNext.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type ReactNode,\n} from \"react\";\nimport breadcrumbNextCss from \"./BreadcrumbNext.css\";\nimport { BreadcrumbNextLabel } from \"./BreadcrumbNextLabel\";\nimport { BreadcrumbNextTrigger } from \"./BreadcrumbNextTrigger\";\nimport {\n  BreadcrumbNextContext,\n  useBreadcrumbNextContext,\n} from \"./internal/BreadcrumbNextContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbNext\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbsNext\");\n\nfunction isPrimitiveBreadcrumbLabel(children: ReactNode) {\n  return (\n    (typeof children === \"string\" && children.trim() !== \"\") ||\n    typeof children === \"number\"\n  );\n}\n\nfunction isMissingBreadcrumbContent(children: ReactNode) {\n  const childArray = Children.toArray(children);\n\n  return (\n    childArray.length === 0 ||\n    childArray.every(\n      (child) => typeof child === \"string\" && child.trim() === \"\",\n    )\n  );\n}\n\nlet missingBreadcrumbContentWarningShown = false;\n\nfunction warnIfMissingBreadcrumbContent() {\n  if (\n    process.env.NODE_ENV === \"production\" ||\n    missingBreadcrumbContentWarningShown\n  ) {\n    return;\n  }\n\n  missingBreadcrumbContentWarningShown = true;\n  console.warn(\n    \"BreadcrumbNext requires children to render a named breadcrumb item. Use text children for simple items or BreadcrumbNextTrigger with BreadcrumbNextLabel for composed items.\",\n  );\n}\n\nexport interface BreadcrumbNextProps\n  extends Omit<ComponentPropsWithoutRef<\"li\">, \"children\"> {\n  /**\n   * Custom breadcrumb content. Use this for advanced composition with\n   * `BreadcrumbNextTrigger` and `BreadcrumbNextLabel`.\n   */\n  children?: ReactNode;\n  /**\n   * If `true`, the breadcrumb represents the current page.\n   */\n  current?: boolean;\n  /**\n   * The URL for the breadcrumb. Provide this for the current breadcrumb so it\n   * renders as a focusable link with `aria-current=\"page\"`.\n   */\n  href?: string;\n  /**\n   * Render prop to enable customization of the underlying link element.\n   */\n  render?: RenderPropsType[\"render\"];\n}\n\nexport const BreadcrumbNext = forwardRef<HTMLLIElement, BreadcrumbNextProps>(\n  function BreadcrumbNext(props, ref) {\n    const {\n      children,\n      className,\n      current: currentProp,\n      href,\n      render,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-breadcrumb-next\",\n      css: breadcrumbNextCss,\n      window: targetWindow,\n    });\n\n    const parentContext = useBreadcrumbNextContext();\n    const current = parentContext?.current ?? Boolean(currentProp);\n    const onNavigate = parentContext?.onNavigate;\n    const placement = parentContext?.placement ?? \"trail\";\n    const showSeparator = parentContext?.showSeparator ?? false;\n    const triggerRef = parentContext?.triggerRef;\n    const resolvedRender = render ?? parentContext?.render;\n    const { LevelSeparatorIcon } = useIcon();\n    const missingContent = isMissingBreadcrumbContent(children);\n\n    if (missingContent) {\n      warnIfMissingBreadcrumbContent();\n    }\n\n    const primitiveChildren = isPrimitiveBreadcrumbLabel(children)\n      ? children\n      : undefined;\n    const content = missingContent ? null : primitiveChildren !== undefined ? (\n      <BreadcrumbNextTrigger>\n        <BreadcrumbNextLabel>{primitiveChildren}</BreadcrumbNextLabel>\n      </BreadcrumbNextTrigger>\n    ) : (\n      children\n    );\n    const context = {\n      current,\n      href,\n      onNavigate,\n      placement,\n      render: resolvedRender,\n      showSeparator,\n      triggerRef,\n    };\n\n    return (\n      <li\n        ref={ref}\n        className={clsx(\n          placement === \"disclosure\"\n            ? withBreadcrumbsBaseName(\"disclosureListItem\")\n            : withBaseName(),\n          className,\n        )}\n        {...rest}\n      >\n        <BreadcrumbNextContext.Provider value={context}>\n          {content}\n          {placement === \"trail\" && showSeparator ? (\n            <LevelSeparatorIcon\n              aria-hidden\n              className={withBaseName(\"separator\")}\n            />\n          ) : null}\n        </BreadcrumbNextContext.Provider>\n      </li>\n    );\n  },\n);\n"],"names":["makePrefixer","Children","forwardRef","BreadcrumbNext","useWindow","useComponentCssInjection","breadcrumbNextCss","useBreadcrumbNextContext","useIcon","jsx","BreadcrumbNextTrigger","BreadcrumbNextLabel","clsx","jsxs","BreadcrumbNextContext"],"mappings":"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"}

package/dist-cjs/breadcrumbs-next/BreadcrumbNextLabel.js

@@ -0,0 +1,21 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+
+const withBaseName = core.makePrefixer("saltBreadcrumbNext");
+const BreadcrumbNextLabel = react.forwardRef(function BreadcrumbNextLabel2({ className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      ref,
+      className: clsx.clsx(withBaseName("label"), className),
+      ...rest
+    }
+  );
+});
+
+exports.BreadcrumbNextLabel = BreadcrumbNextLabel;
+//# sourceMappingURL=BreadcrumbNextLabel.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbNextLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNextLabel.js","sources":["../src/breadcrumbs-next/BreadcrumbNextLabel.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbNext\");\n\nexport interface BreadcrumbNextLabelProps\n  extends ComponentPropsWithoutRef<\"span\"> {}\n\nexport const BreadcrumbNextLabel = forwardRef<\n  HTMLSpanElement,\n  BreadcrumbNextLabelProps\n>(function BreadcrumbNextLabel({ className, ...rest }, ref) {\n  return (\n    <span\n      ref={ref}\n      className={clsx(withBaseName(\"label\"), className)}\n      {...rest}\n    />\n  );\n});\n"],"names":["makePrefixer","forwardRef","BreadcrumbNextLabel","jsx","clsx"],"mappings":";;;;;;;AAIA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AAK/C,MAAM,mBAAA,GAAsBC,iBAGjC,SAASC,oBAAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,IAAA,EAAK,EAAG,GAAA,EAAK;AAC1D,EAAA,uBACEC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAWC,SAAA,CAAK,YAAA,CAAa,OAAO,GAAG,SAAS,CAAA;AAAA,MAC/C,GAAG;AAAA;AAAA,GACN;AAEJ,CAAC;;;;"}

package/dist-cjs/breadcrumbs-next/BreadcrumbNextTrigger.js

@@ -0,0 +1,55 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var react = require('react');
+var BreadcrumbNextContext = require('./internal/BreadcrumbNextContext.js');
+
+const withBaseName = core.makePrefixer("saltBreadcrumbNext");
+const withBreadcrumbsBaseName = core.makePrefixer("saltBreadcrumbsNext");
+const BreadcrumbNextTrigger = react.forwardRef(function BreadcrumbNextTrigger2(props, ref) {
+  const { children, className, onClick, ...rest } = props;
+  const context = BreadcrumbNextContext.useBreadcrumbNextContext();
+  if (!context) {
+    throw new Error(
+      "BreadcrumbNextTrigger must be rendered inside BreadcrumbNext"
+    );
+  }
+  const { current, href, onNavigate, placement, render, triggerRef } = context;
+  const handleRef = core.useForkRef(ref, triggerRef);
+  const isDisclosure = placement === "disclosure";
+  const triggerClassName = clsx.clsx(
+    isDisclosure ? withBreadcrumbsBaseName("disclosureItem") : withBaseName("trigger"),
+    className
+  );
+  const isNavigable = href !== void 0;
+  const handleClick = (event) => {
+    onClick == null ? void 0 : onClick(event);
+    if (isDisclosure || !event.defaultPrevented) {
+      onNavigate == null ? void 0 : onNavigate();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.Link,
+    {
+      "aria-current": current ? "page" : void 0,
+      className: clsx.clsx(triggerClassName, {
+        [withBaseName("link")]: isNavigable,
+        [withBaseName("current")]: current
+      }),
+      color: isDisclosure ? "inherit" : void 0,
+      href,
+      onClick: isNavigable ? handleClick : onClick,
+      ref: handleRef,
+      render: isNavigable ? render : void 0,
+      styleAs: "label",
+      underline: current || !isNavigable || isDisclosure ? "never" : void 0,
+      ...rest,
+      children
+    }
+  );
+});
+
+exports.BreadcrumbNextTrigger = BreadcrumbNextTrigger;
+//# sourceMappingURL=BreadcrumbNextTrigger.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbNextTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNextTrigger.js","sources":["../src/breadcrumbs-next/BreadcrumbNextTrigger.tsx"],"sourcesContent":["import { Link, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  forwardRef,\n  type MouseEventHandler,\n  type ReactNode,\n} from \"react\";\nimport { useBreadcrumbNextContext } from \"./internal/BreadcrumbNextContext\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbNext\");\nconst withBreadcrumbsBaseName = makePrefixer(\"saltBreadcrumbsNext\");\n\nexport interface BreadcrumbNextTriggerProps\n  extends Omit<ComponentPropsWithoutRef<\"a\">, \"children\" | \"color\" | \"href\"> {\n  /**\n   * Breadcrumb trigger content.\n   */\n  children?: ReactNode;\n}\n\nexport const BreadcrumbNextTrigger = forwardRef<\n  HTMLAnchorElement,\n  BreadcrumbNextTriggerProps\n>(function BreadcrumbNextTrigger(props, ref) {\n  const { children, className, onClick, ...rest } = props;\n  const context = useBreadcrumbNextContext();\n\n  if (!context) {\n    throw new Error(\n      \"BreadcrumbNextTrigger must be rendered inside BreadcrumbNext\",\n    );\n  }\n\n  const { current, href, onNavigate, placement, render, triggerRef } = context;\n  const handleRef = useForkRef(ref, triggerRef);\n  const isDisclosure = placement === \"disclosure\";\n  const triggerClassName = clsx(\n    isDisclosure\n      ? withBreadcrumbsBaseName(\"disclosureItem\")\n      : withBaseName(\"trigger\"),\n    className,\n  );\n  const isNavigable = href !== undefined;\n  const handleClick: MouseEventHandler<HTMLAnchorElement> = (event) => {\n    onClick?.(event);\n\n    if (isDisclosure || !event.defaultPrevented) {\n      onNavigate?.();\n    }\n  };\n\n  return (\n    <Link\n      aria-current={current ? \"page\" : undefined}\n      className={clsx(triggerClassName, {\n        [withBaseName(\"link\")]: isNavigable,\n        [withBaseName(\"current\")]: current,\n      })}\n      color={isDisclosure ? \"inherit\" : undefined}\n      href={href}\n      onClick={isNavigable ? handleClick : onClick}\n      ref={handleRef}\n      render={isNavigable ? render : undefined}\n      styleAs=\"label\"\n      underline={current || !isNavigable || isDisclosure ? \"never\" : undefined}\n      {...rest}\n    >\n      {children}\n    </Link>\n  );\n});\n"],"names":["makePrefixer","forwardRef","BreadcrumbNextTrigger","useBreadcrumbNextContext","useForkRef","clsx","jsx","Link"],"mappings":";;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,oBAAoB,CAAA;AACtD,MAAM,uBAAA,GAA0BA,kBAAa,qBAAqB,CAAA;AAU3D,MAAM,qBAAA,GAAwBC,gBAAA,CAGnC,SAASC,sBAAAA,CAAsB,OAAO,GAAA,EAAK;AAC3C,EAAA,MAAM,EAAE,QAAA,EAAU,SAAA,EAAW,OAAA,EAAS,GAAG,MAAK,GAAI,KAAA;AAClD,EAAA,MAAM,UAAUC,8CAAA,EAAyB;AAEzC,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AAEA,EAAA,MAAM,EAAE,OAAA,EAAS,IAAA,EAAM,YAAY,SAAA,EAAW,MAAA,EAAQ,YAAW,GAAI,OAAA;AACrE,EAAA,MAAM,SAAA,GAAYC,eAAA,CAAW,GAAA,EAAK,UAAU,CAAA;AAC5C,EAAA,MAAM,eAAe,SAAA,KAAc,YAAA;AACnC,EAAA,MAAM,gBAAA,GAAmBC,SAAA;AAAA,IACvB,YAAA,GACI,uBAAA,CAAwB,gBAAgB,CAAA,GACxC,aAAa,SAAS,CAAA;AAAA,IAC1B;AAAA,GACF;AACA,EAAA,MAAM,cAAc,IAAA,KAAS,MAAA;AAC7B,EAAA,MAAM,WAAA,GAAoD,CAAC,KAAA,KAAU;AACnE,IAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,CAAU,KAAA,CAAA;AAEV,IAAA,IAAI,YAAA,IAAgB,CAAC,KAAA,CAAM,gBAAA,EAAkB;AAC3C,MAAA,UAAA,IAAA,IAAA,GAAA,MAAA,GAAA,UAAA,EAAA;AAAA,IACF;AAAA,EACF,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,UAAU,MAAA,GAAS,MAAA;AAAA,MACjC,SAAA,EAAWF,UAAK,gBAAA,EAAkB;AAAA,QAChC,CAAC,YAAA,CAAa,MAAM,CAAC,GAAG,WAAA;AAAA,QACxB,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,OAC5B,CAAA;AAAA,MACD,KAAA,EAAO,eAAe,SAAA,GAAY,MAAA;AAAA,MAClC,IAAA;AAAA,MACA,OAAA,EAAS,cAAc,WAAA,GAAc,OAAA;AAAA,MACrC,GAAA,EAAK,SAAA;AAAA,MACL,MAAA,EAAQ,cAAc,MAAA,GAAS,MAAA;AAAA,MAC/B,OAAA,EAAQ,OAAA;AAAA,MACR,SAAA,EAAW,OAAA,IAAW,CAAC,WAAA,IAAe,eAAe,OAAA,GAAU,MAAA;AAAA,MAC9D,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltBreadcrumbsNext {\n  display: block;\n  margin-block: var(--salt-spacing-25);\n}\n\n.saltBreadcrumbsNext-ol {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--salt-spacing-100);\n  justify-content: flex-start;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbsNext-ol-wrap {\n  flex-wrap: wrap;\n}\n\n.saltBreadcrumbsNext-collapseItem {\n  align-items: center;\n  display: inline-flex;\n  flex: 0 1 auto;\n  gap: var(--salt-spacing-100);\n  list-style: none;\n  min-width: 0;\n}\n\n.saltBreadcrumbsNext-collapseButton[aria-expanded=\"true\"] {\n  background: var(--saltButton-background-active, var(--button-background-active));\n  border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active));\n  color: var(--saltButton-text-color-active, var(--button-text-color-active));\n  cursor: var(--salt-cursor-active);\n}\n\n.saltBreadcrumbsNext-disclosure {\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-selectable-borderColor-selected);\n  overflow: hidden;\n  overflow-y: auto;\n  min-width: 10em;\n  position: relative;\n  z-index: var(--salt-zIndex-flyover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  box-sizing: border-box;\n  border-radius: var(--salt-palette-corner, 0);\n}\n\n.saltBreadcrumbsNext-disclosureList {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbsNext-disclosureListItem {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n\n.saltBreadcrumbsNext-disclosureItem {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-selectable-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  line-height: var(--salt-text-lineHeight);\n  letter-spacing: var(--salt-text-letterSpacing);\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  padding: calc(var(--salt-spacing-100) + var(--salt-spacing-25)) var(--salt-spacing-100);\n  display: flex;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  cursor: var(--salt-cursor-hover);\n  box-sizing: border-box;\n  flex-shrink: 0;\n  text-decoration: none;\n  width: 100%;\n}\n\n.saltBreadcrumbsNext-disclosureItem.saltLink {\n  --link-color: var(--salt-content-primary-foreground);\n  --link-color-hover: var(--salt-content-primary-foreground);\n  --link-color-active: var(--salt-content-primary-foreground);\n  --link-color-focus: var(--salt-content-primary-foreground);\n  --link-color-visited: var(--salt-content-primary-foreground);\n  --link-textDecoration: var(--salt-typography-textDecoration-none);\n  --link-textDecoration-hover: var(--salt-typography-textDecoration-none);\n  --link-textDecoration-active: var(--salt-typography-textDecoration-none);\n  --link-textDecoration-focus: var(--salt-typography-textDecoration-none);\n  --link-textDecoration-visited: var(--salt-typography-textDecoration-none);\n}\n\n.saltBreadcrumbsNext-disclosureItem.saltLink:focus:not(:focus-visible) {\n  outline: none;\n}\n\n.saltBreadcrumbsNext-disclosureItem:focus-visible,\n.saltBreadcrumbsNext-disclosureItem.saltLink:focus-visible {\n  outline: var(--salt-focused-outline);\n  outline-offset: calc(var(--salt-size-fixed-100) * -2);\n}\n\n.saltBreadcrumbsNext-disclosureItem:hover {\n  outline: none;\n}\n\n.saltBreadcrumbsNext-disclosureItem:hover,\n.saltBreadcrumbsNext-disclosureItem:focus-visible {\n  background: var(--salt-selectable-background-hover);\n}\n\n.saltBreadcrumbsNext-disclosureItem:active {\n  background: var(--salt-selectable-background-selected);\n  box-shadow:\n    0 calc(var(--salt-size-fixed-100) * -1) 0 0 var(--salt-selectable-borderColor-selected),\n    0 var(--salt-size-fixed-100) 0 0 var(--salt-selectable-borderColor-selected);\n}\n\n.saltBreadcrumbsNext-disclosureItem[aria-disabled=\"true\"],\n.saltBreadcrumbsNext-disclosureItem[aria-disabled=\"true\"]:active {\n  background: var(--salt-selectable-background-disabled);\n  color: var(--salt-content-primary-foreground-disabled);\n  cursor: var(--salt-cursor-disabled);\n  box-shadow: none;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=BreadcrumbsNext.css.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var BreadcrumbNext = require('./BreadcrumbNext.js');
+var BreadcrumbsNext$1 = require('./BreadcrumbsNext.css.js');
+var BreadcrumbNextContext = require('./internal/BreadcrumbNextContext.js');
+var BreadcrumbOverflowDisclosure = require('./internal/BreadcrumbOverflowDisclosure.js');
+var breadcrumbItems = require('./internal/breadcrumbItems.js');
+
+const withBaseName = core.makePrefixer("saltBreadcrumbsNext");
+const withItemBaseName = core.makePrefixer("saltBreadcrumbNext");
+function isBreadcrumbNextElement(child) {
+  return react.isValidElement(child) && child.type === BreadcrumbNext.BreadcrumbNext;
+}
+function getCurrentIndex(items) {
+  const explicitCurrentIndex = items.findIndex(({ props }) => props.current);
+  return explicitCurrentIndex === -1 ? Math.max(items.length - 1, 0) : explicitCurrentIndex;
+}
+function getCollapseRange({
+  currentIndex,
+  items,
+  itemsAfterCollapse,
+  itemsBeforeCollapse
+}) {
+  const itemCount = items.length;
+  const effectiveItemsAfterCollapse = Math.max(
+    itemsAfterCollapse,
+    itemCount - currentIndex
+  );
+  if (itemsBeforeCollapse + effectiveItemsAfterCollapse >= itemCount) {
+    return void 0;
+  }
+  const hiddenStart = itemsBeforeCollapse;
+  const hiddenEnd = itemCount - effectiveItemsAfterCollapse;
+  const hiddenItems = items.slice(hiddenStart, hiddenEnd);
+  return {
+    hiddenItems,
+    visibleAfter: items.slice(hiddenEnd),
+    visibleBefore: items.slice(0, hiddenStart)
+  };
+}
+function renderSeparator(SeparatorIcon) {
+  return /* @__PURE__ */ jsxRuntime.jsx(SeparatorIcon, { "aria-hidden": true, className: withItemBaseName("separator") });
+}
+const BreadcrumbsNext = react.forwardRef(
+  function BreadcrumbsNext2(props, ref) {
+    const {
+      children,
+      className,
+      itemsAfterCollapse = 1,
+      itemsBeforeCollapse = 1,
+      maxItems,
+      render,
+      wrap = false,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    const { LevelSeparatorIcon } = core.useIcon();
+    styles.useComponentCssInjection({
+      testId: "salt-breadcrumbs-next",
+      css: BreadcrumbsNext$1,
+      window: targetWindow
+    });
+    const items = breadcrumbItems.flattenBreadcrumbItems(children).filter(isBreadcrumbNextElement).map((element, index) => ({
+      element,
+      index,
+      key: element.key ?? index,
+      props: element.props
+    }));
+    const currentIndex = getCurrentIndex(items);
+    const shouldCollapse = !wrap && maxItems !== void 0 && items.length > maxItems;
+    const collapseRange = shouldCollapse ? getCollapseRange({
+      currentIndex,
+      items,
+      itemsAfterCollapse,
+      itemsBeforeCollapse
+    }) : void 0;
+    const renderParts = collapseRange ? [
+      ...collapseRange.visibleBefore.map(
+        (item) => ({ item, type: "breadcrumb" })
+      ),
+      {
+        hiddenItems: collapseRange.hiddenItems,
+        type: "collapse"
+      },
+      ...collapseRange.visibleAfter.map(
+        (item) => ({ item, type: "breadcrumb" })
+      )
+    ] : items.map((item) => ({ item, type: "breadcrumb" }));
+    return /* @__PURE__ */ jsxRuntime.jsx("nav", { ref, className: clsx.clsx(withBaseName(), className), ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "ol",
+      {
+        className: clsx.clsx(withBaseName("ol"), {
+          [withBaseName("ol-wrap")]: wrap
+        }),
+        children: renderParts.map((part, index) => {
+          const showSeparator = index < renderParts.length - 1;
+          if (part.type === "collapse") {
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "li",
+              {
+                className: clsx.clsx(
+                  withItemBaseName(),
+                  withBaseName("collapseItem")
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    BreadcrumbOverflowDisclosure.BreadcrumbOverflowDisclosure,
+                    {
+                      currentIndex,
+                      items: part.hiddenItems,
+                      render
+                    }
+                  ),
+                  showSeparator ? renderSeparator(LevelSeparatorIcon) : null
+                ]
+              },
+              "breadcrumbs-next-collapse"
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            BreadcrumbNextContext.BreadcrumbNextContext.Provider,
+            {
+              value: {
+                current: part.item.index === currentIndex,
+                placement: "trail",
+                render,
+                showSeparator
+              },
+              children: part.item.element
+            },
+            part.item.key
+          );
+        })
+      }
+    ) });
+  }
+);
+
+exports.BreadcrumbsNext = BreadcrumbsNext;
+//# sourceMappingURL=BreadcrumbsNext.js.map

package/dist-cjs/breadcrumbs-next/BreadcrumbsNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsNext.js","sources":["../src/breadcrumbs-next/BreadcrumbsNext.tsx"],"sourcesContent":["import { makePrefixer, type RenderPropsType, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ElementType,\n  forwardRef,\n  isValidElement,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { BreadcrumbNext, type BreadcrumbNextProps } from \"./BreadcrumbNext\";\nimport breadcrumbsNextCss from \"./BreadcrumbsNext.css\";\nimport { BreadcrumbNextContext } from \"./internal/BreadcrumbNextContext\";\nimport { BreadcrumbOverflowDisclosure } from \"./internal/BreadcrumbOverflowDisclosure\";\nimport {\n  flattenBreadcrumbItems,\n  type NormalizedBreadcrumb,\n} from \"./internal/breadcrumbItems\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbsNext\");\nconst withItemBaseName = makePrefixer(\"saltBreadcrumbNext\");\n\ninterface CollapseRange {\n  hiddenItems: NormalizedBreadcrumb[];\n  visibleAfter: NormalizedBreadcrumb[];\n  visibleBefore: NormalizedBreadcrumb[];\n}\n\ntype RenderPart =\n  | {\n      item: NormalizedBreadcrumb;\n      type: \"breadcrumb\";\n    }\n  | {\n      hiddenItems: NormalizedBreadcrumb[];\n      type: \"collapse\";\n    };\n\nexport interface BreadcrumbsNextProps\n  extends Omit<ComponentPropsWithoutRef<\"nav\">, \"children\"> {\n  /**\n   * Breadcrumb items.\n   */\n  children?: ReactNode;\n  /**\n   * The number of items to keep after the collapse point.\n   * Defaults to 1.\n   */\n  itemsAfterCollapse?: number;\n  /**\n   * The number of items to keep before the collapse point.\n   * Defaults to 1.\n   */\n  itemsBeforeCollapse?: number;\n  /**\n   * The maximum number of breadcrumbs to render before collapsing.\n   */\n  maxItems?: number;\n  /**\n   * Render prop to enable customization of the underlying link elements.\n   */\n  render?: RenderPropsType[\"render\"];\n  /**\n   * If `true`, breadcrumbs can wrap onto multiple lines.\n   * Defaults to `false`.\n   */\n  wrap?: boolean;\n}\n\nfunction isBreadcrumbNextElement(\n  child: ReactNode,\n): child is ReactElement<BreadcrumbNextProps> {\n  return (\n    isValidElement<BreadcrumbNextProps>(child) && child.type === BreadcrumbNext\n  );\n}\n\nfunction getCurrentIndex(items: NormalizedBreadcrumb[]) {\n  const explicitCurrentIndex = items.findIndex(({ props }) => props.current);\n\n  return explicitCurrentIndex === -1\n    ? Math.max(items.length - 1, 0)\n    : explicitCurrentIndex;\n}\n\nfunction getCollapseRange({\n  currentIndex,\n  items,\n  itemsAfterCollapse,\n  itemsBeforeCollapse,\n}: {\n  currentIndex: number;\n  items: NormalizedBreadcrumb[];\n  itemsAfterCollapse: number;\n  itemsBeforeCollapse: number;\n}): CollapseRange | undefined {\n  const itemCount = items.length;\n  const effectiveItemsAfterCollapse = Math.max(\n    itemsAfterCollapse,\n    itemCount - currentIndex,\n  );\n\n  if (itemsBeforeCollapse + effectiveItemsAfterCollapse >= itemCount) {\n    return undefined;\n  }\n\n  const hiddenStart = itemsBeforeCollapse;\n  const hiddenEnd = itemCount - effectiveItemsAfterCollapse;\n  const hiddenItems = items.slice(hiddenStart, hiddenEnd);\n\n  return {\n    hiddenItems,\n    visibleAfter: items.slice(hiddenEnd),\n    visibleBefore: items.slice(0, hiddenStart),\n  };\n}\n\nfunction renderSeparator(SeparatorIcon: ElementType) {\n  return (\n    <SeparatorIcon aria-hidden className={withItemBaseName(\"separator\")} />\n  );\n}\n\nexport const BreadcrumbsNext = forwardRef<HTMLElement, BreadcrumbsNextProps>(\n  function BreadcrumbsNext(props, ref) {\n    const {\n      children,\n      className,\n      itemsAfterCollapse = 1,\n      itemsBeforeCollapse = 1,\n      maxItems,\n      render,\n      wrap = false,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    const { LevelSeparatorIcon } = useIcon();\n\n    useComponentCssInjection({\n      testId: \"salt-breadcrumbs-next\",\n      css: breadcrumbsNextCss,\n      window: targetWindow,\n    });\n\n    const items = flattenBreadcrumbItems(children)\n      .filter(isBreadcrumbNextElement)\n      .map((element, index) => ({\n        element,\n        index,\n        key: element.key ?? index,\n        props: element.props,\n      }));\n\n    const currentIndex = getCurrentIndex(items);\n    const shouldCollapse =\n      !wrap && maxItems !== undefined && items.length > maxItems;\n\n    const collapseRange = shouldCollapse\n      ? getCollapseRange({\n          currentIndex,\n          items,\n          itemsAfterCollapse,\n          itemsBeforeCollapse,\n        })\n      : undefined;\n\n    const renderParts: RenderPart[] = collapseRange\n      ? [\n          ...collapseRange.visibleBefore.map(\n            (item): RenderPart => ({ item, type: \"breadcrumb\" }),\n          ),\n          {\n            hiddenItems: collapseRange.hiddenItems,\n            type: \"collapse\",\n          },\n          ...collapseRange.visibleAfter.map(\n            (item): RenderPart => ({ item, type: \"breadcrumb\" }),\n          ),\n        ]\n      : items.map((item): RenderPart => ({ item, type: \"breadcrumb\" }));\n\n    return (\n      <nav ref={ref} className={clsx(withBaseName(), className)} {...rest}>\n        <ol\n          className={clsx(withBaseName(\"ol\"), {\n            [withBaseName(\"ol-wrap\")]: wrap,\n          })}\n        >\n          {renderParts.map((part, index) => {\n            const showSeparator = index < renderParts.length - 1;\n\n            if (part.type === \"collapse\") {\n              return (\n                <li\n                  className={clsx(\n                    withItemBaseName(),\n                    withBaseName(\"collapseItem\"),\n                  )}\n                  key=\"breadcrumbs-next-collapse\"\n                >\n                  <BreadcrumbOverflowDisclosure\n                    currentIndex={currentIndex}\n                    items={part.hiddenItems}\n                    render={render}\n                  />\n                  {showSeparator ? renderSeparator(LevelSeparatorIcon) : null}\n                </li>\n              );\n            }\n\n            return (\n              <BreadcrumbNextContext.Provider\n                key={part.item.key}\n                value={{\n                  current: part.item.index === currentIndex,\n                  placement: \"trail\",\n                  render,\n                  showSeparator,\n                }}\n              >\n                {part.item.element}\n              </BreadcrumbNextContext.Provider>\n            );\n          })}\n        </ol>\n      </nav>\n    );\n  },\n);\n"],"names":["makePrefixer","isValidElement","BreadcrumbNext","forwardRef","BreadcrumbsNext","useWindow","useIcon","useComponentCssInjection","breadcrumbsNextCss","flattenBreadcrumbItems","jsx","clsx","jsxs","BreadcrumbOverflowDisclosure","BreadcrumbNextContext"],"mappings":"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"}

package/dist-cjs/breadcrumbs-next/internal/BreadcrumbNextContext.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var react = require('react');
+
+const BreadcrumbNextContext = react.createContext(void 0);
+function useBreadcrumbNextContext() {
+  return react.useContext(BreadcrumbNextContext);
+}
+
+exports.BreadcrumbNextContext = BreadcrumbNextContext;
+exports.useBreadcrumbNextContext = useBreadcrumbNextContext;
+//# sourceMappingURL=BreadcrumbNextContext.js.map

package/dist-cjs/breadcrumbs-next/internal/BreadcrumbNextContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNextContext.js","sources":["../src/breadcrumbs-next/internal/BreadcrumbNextContext.ts"],"sourcesContent":["import type { RenderPropsType } from \"@salt-ds/core\";\nimport { createContext, type Ref, useContext } from \"react\";\n\nexport type BreadcrumbNextPlacement = \"disclosure\" | \"trail\";\n\nexport interface BreadcrumbNextContextValue {\n  current: boolean;\n  href?: string;\n  onNavigate?: () => void;\n  placement: BreadcrumbNextPlacement;\n  render?: RenderPropsType[\"render\"];\n  showSeparator: boolean;\n  triggerRef?: Ref<HTMLAnchorElement>;\n}\n\nexport const BreadcrumbNextContext = createContext<\n  BreadcrumbNextContextValue | undefined\n>(undefined);\n\nexport function useBreadcrumbNextContext() {\n  return useContext(BreadcrumbNextContext);\n}\n"],"names":["createContext","useContext"],"mappings":";;;;AAeO,MAAM,qBAAA,GAAwBA,oBAEnC,MAAS;AAEJ,SAAS,wBAAA,GAA2B;AACzC,EAAA,OAAOC,iBAAW,qBAAqB,CAAA;AACzC;;;;;"}