@salt-ds/lab 1.0.0-alpha.0

package/dist-es/packages/lab/src/badge/Badge.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId } from '@salt-ds/core';
+import { MessageIcon } from '@salt-ds/icons';
+import cx from 'classnames';
+import { forwardRef, isValidElement, cloneElement } from 'react';
+import './Badge.css.js';
+
+const withBaseName = makePrefixer("saltBadge");
+const Badge = forwardRef(function Badge2({
+  badgeContent = 0,
+  max = 1e3,
+  className,
+  children = /* @__PURE__ */ jsx(MessageIcon, {}),
+  ...rest
+}, ref) {
+  var _a;
+  const badgeId = useId();
+  const childId = useId(
+    isValidElement(children) ? (_a = children.props) == null ? void 0 : _a.id : void 0
+  );
+  let badgeContentValue = badgeContent;
+  if (badgeContentValue > max) {
+    badgeContentValue = `${max}+`;
+  }
+  return /* @__PURE__ */ jsxs("span", {
+    className: cx(withBaseName(), className),
+    ref,
+    role: "img",
+    "aria-labelledby": cx(childId, badgeId),
+    ...rest,
+    children: [
+      children && isValidElement(children) ? cloneElement(children, { id: childId }) : children,
+      /* @__PURE__ */ jsx("span", {
+        id: badgeId,
+        className: cx(withBaseName("badge")),
+        children: badgeContentValue
+      })
+    ]
+  });
+});
+
+export { Badge };
+//# sourceMappingURL=Badge.js.map

package/dist-es/packages/lab/src/badge/Badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../src/badge/Badge.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { MessageIcon } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport {\n  cloneElement,\n  forwardRef,\n  HTMLAttributes,\n  isValidElement,\n  ReactElement,\n  ReactText,\n} from \"react\";\n\nimport \"./Badge.css\";\n\n/**\n * @example overriding density prop to fit a smaller denser space otherwise handled through context provider\n * <Badge density={'high'} />\n *\n * NOTE: Badge component no longer has AccessibleText prop\n *\n */\n\nexport interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {\n  /**\n   * The number to display on the badge.\n   */\n  badgeContent?: string | number;\n  /**\n   * The badge will be added relative to this node. Renders the \"message\" icon by default.\n   */\n  children?: ReactElement<HTMLAttributes<HTMLElement>> | ReactText;\n  /**\n   * The className(s) of the component.\n   */\n  className?: string;\n  /**\n   * The max number to display on the badge.\n   */\n  max?: number;\n}\n\nconst withBaseName = makePrefixer(\"saltBadge\");\n\nexport const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(\n  {\n    badgeContent = 0,\n    max = 1000,\n    className,\n    children = <MessageIcon />,\n    ...rest\n  },\n  ref\n) {\n  const badgeId = useId();\n  const childId = useId(\n    isValidElement<HTMLAttributes<HTMLElement>>(children)\n      ? children.props?.id\n      : undefined\n  );\n\n  let badgeContentValue = badgeContent;\n  if (badgeContentValue > max) {\n    badgeContentValue = `${max}+`;\n  }\n\n  return (\n    <span\n      className={cx(withBaseName(), className)}\n      ref={ref}\n      role=\"img\"\n      aria-labelledby={cx(childId, badgeId)}\n      {...rest}\n    >\n      {children && isValidElement<HTMLAttributes<HTMLElement>>(children)\n        ? cloneElement(children, { id: childId })\n        : children}\n      <span id={badgeId} className={cx(withBaseName(\"badge\"))}>\n        {badgeContentValue}\n      </span>\n    </span>\n  );\n});\n"],"names":["Badge"],"mappings":";;;;;;;AAyCA,MAAM,YAAA,GAAe,aAAa,WAAW,CAAA,CAAA;AAEhC,MAAA,KAAA,GAAQ,UAAwC,CAAA,SAASA,MACpE,CAAA;AAAA,EACE,YAAe,GAAA,CAAA;AAAA,EACf,GAAM,GAAA,GAAA;AAAA,EACN,SAAA;AAAA,EACA,QAAA,uBAAY,WAAY,EAAA,EAAA,CAAA;AAAA,EACrB,GAAA,IAAA;AACL,CAAA,EACA,GACA,EAAA;AApDF,EAAA,IAAA,EAAA,CAAA;AAqDE,EAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AACtB,EAAA,MAAM,OAAU,GAAA,KAAA;AAAA,IACd,eAA4C,QAAQ,CAAA,GAAA,CAChD,EAAS,GAAA,QAAA,CAAA,KAAA,KAAT,mBAAgB,EAChB,GAAA,KAAA,CAAA;AAAA,GACN,CAAA;AAEA,EAAA,IAAI,iBAAoB,GAAA,YAAA,CAAA;AACxB,EAAA,IAAI,oBAAoB,GAAK,EAAA;AAC3B,IAAA,iBAAA,GAAoB,CAAG,EAAA,GAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB;AAEA,EAAA,uBACG,IAAA,CAAA,MAAA,EAAA;AAAA,IACC,SAAW,EAAA,EAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACvC,GAAA;AAAA,IACA,IAAK,EAAA,KAAA;AAAA,IACL,iBAAA,EAAiB,EAAG,CAAA,OAAA,EAAS,OAAO,CAAA;AAAA,IACnC,GAAG,IAAA;AAAA,IAEH,QAAA,EAAA;AAAA,MAAY,QAAA,IAAA,cAAA,CAA4C,QAAQ,CAC7D,GAAA,YAAA,CAAa,UAAU,EAAE,EAAA,EAAI,OAAQ,EAAC,CACtC,GAAA,QAAA;AAAA,sBACH,GAAA,CAAA,MAAA,EAAA;AAAA,QAAK,EAAI,EAAA,OAAA;AAAA,QAAS,SAAW,EAAA,EAAA,CAAG,YAAa,CAAA,OAAO,CAAC,CAAA;AAAA,QACnD,QAAA,EAAA,iBAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/packages/lab/src/banner/Banner.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* Styles applied to root component */\n.saltBanner {\n  --banner-background: var(--saltBanner-background, var(--salt-container-primary-background));\n  --banner-fontSize: var(--saltBanner-fontSize, var(--salt-text-fontSize));\n  --banner-lineHeight: var(--saltBanner-lineHeight, var(--salt-text-lineHeight));\n  --banner-padding: var(--saltBanner-padding, var(--salt-size-unit));\n  --banner-label-color: var(--saltBanner-label-color, var(--salt-text-primary-foreground));\n}\n\n.saltBanner {\n  background: var(--banner-background);\n  border-color: var(--saltBanner-borderColor, var(--banner-status-borderColor));\n  border-width: var(--saltBanner-borderWidth, var(--salt-size-border));\n  border-style: var(--saltBanner-borderStyle, var(--salt-container-borderStyle));\n  border-bottom: 2px solid var(--saltBanner-borderColor, var(--banner-status-borderColor));\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  padding: 0 var(--banner-padding);\n  position: relative;\n  /*min-height: 36px;*/\n  width: 100%;\n  align-items: center;\n}\n\n.saltBanner-closeButton {\n  margin: calc(var(--salt-size-unit) * 0.5) auto calc(var(--salt-size-unit) * 0.5) var(--salt-size-unit);\n}\n\n.saltBanner-label {\n  flex: 1 0;\n  padding: calc(var(--banner-padding) + 2px) 0 calc(var(--banner-padding));\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  font-size: var(--salt-text-fontSize);\n  line-height: var(--salt-text-lineHeight);\n  color: var(--banner-label-color);\n}\n\n/* Styles applied to status indicator */\n.saltBanner-icon {\n  color: var(--saltBanner-icon-color, var(--banner-status-icon-color));\n  fill: var(--saltBanner-icon-color, var(--banner-status-icon-color));\n  margin-right: var(--saltTooltip-icon-marginRight, 6px);\n  flex: 0 0 auto;\n}\n\n.saltBanner-link {\n  font-weight: var(--salt-typography-fontWeight-semiBold);\n  margin-left: 1ch;\n}\n\n/* Styles applied when state = \"info\" */\n.saltBanner-info {\n  --banner-status-borderColor: var(--salt-status-info-borderColor);\n  --banner-status-icon-color: var(--salt-status-info-foreground);\n}\n\n/* Styles applied when state = \"error\" */\n.saltBanner-error {\n  --banner-status-borderColor: var(--salt-status-error-borderColor);\n  --banner-status-icon-color: var(--salt-status-error-foreground);\n}\n\n/* Styles applied when state = \"warning\" */\n.saltBanner-warning {\n  --banner-status-borderColor: var(--salt-status-warning-borderColor);\n  --banner-status-icon-color: var(--salt-status-warning-foreground);\n}\n\n/* Styles applied when state = \"success\" */\n.saltBanner-success {\n  --banner-status-borderColor: var(--salt-status-success-borderColor);\n  --banner-status-icon-color: var(--salt-status-success-foreground);\n}\n\n.saltBanner-emphasize.saltBanner-info {\n  --banner-background: var(--salt-status-info-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-error {\n  --banner-background: var(--salt-status-error-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-warning {\n  --banner-background: var(--salt-status-warning-background-emphasize);\n}\n\n.saltBanner-emphasize.saltBanner-success {\n  --banner-background: var(--salt-status-success-background-emphasize);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Banner.css.js.map

package/dist-es/packages/lab/src/banner/Banner.css.js.map

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

package/dist-es/packages/lab/src/banner/Banner.js

@@ -0,0 +1,105 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useEffect } from 'react';
+import { makePrefixer, useAriaAnnouncer, useForkRef, StatusIndicator, Link, Button } from '@salt-ds/core';
+import getInnerText from './internal/getInnerText.js';
+import { CloseIcon } from '@salt-ds/icons';
+import cx from 'classnames';
+import './Banner.css.js';
+
+const withBaseName = makePrefixer("saltBanner");
+const Banner = forwardRef(function Banner2({
+  CloseButtonProps,
+  LinkProps: LinkProps2,
+  announcement: announcementProp,
+  children,
+  className,
+  closeRef,
+  disableAnnouncer = false,
+  emphasize = false,
+  onClose,
+  render,
+  status = "info",
+  ...rest
+}, ref) {
+  const { announce } = useAriaAnnouncer();
+  const [containerNode, setContainerNode] = useState(
+    null
+  );
+  const handleRef = useForkRef(setContainerNode, ref);
+  useEffect(() => {
+    if (!disableAnnouncer && containerNode) {
+      const announcement = announcementProp || getInnerText(containerNode);
+      announce(announcement, 250);
+    }
+  }, [announce, disableAnnouncer, containerNode, announcementProp]);
+  const getIconProps = ({ className: className2, ...restProps } = {}) => {
+    return {
+      className: cx(withBaseName("icon"), status, className2),
+      ...restProps
+    };
+  };
+  const getLabelProps = ({ className: className2, ...restProps } = {}) => ({
+    className: cx(withBaseName("label"), status, className2),
+    ...restProps
+  });
+  const getLinkProps = ({ className: className2, href, ...restProps } = {}) => ({
+    children: "Link",
+    className: cx(withBaseName("link"), status, className2),
+    href,
+    ...restProps
+  });
+  const getStateAndPropsGetters = () => ({
+    Icon: (props) => /* @__PURE__ */ jsx(StatusIndicator, {
+      ...props,
+      status
+    }),
+    getIconProps,
+    getLabelProps,
+    getLinkProps
+  });
+  let contentElement;
+  if (!render) {
+    contentElement = /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(StatusIndicator, {
+          ...getIconProps(),
+          status
+        }),
+        /* @__PURE__ */ jsxs("span", {
+          ...getLabelProps(),
+          children: [
+            children,
+            " ",
+            LinkProps2 && /* @__PURE__ */ jsx(Link, {
+              ...getLinkProps(LinkProps2)
+            })
+          ]
+        })
+      ]
+    });
+  } else {
+    contentElement = render(getStateAndPropsGetters());
+  }
+  return /* @__PURE__ */ jsxs("div", {
+    className: cx(withBaseName(), withBaseName(status), className, {
+      [withBaseName("emphasize")]: emphasize
+    }),
+    ref: handleRef,
+    ...rest,
+    children: [
+      contentElement,
+      onClose && /* @__PURE__ */ jsx(Button, {
+        "aria-label": "close",
+        ...CloseButtonProps,
+        className: withBaseName("closeButton"),
+        onClick: onClose,
+        ref: closeRef,
+        variant: "secondary",
+        children: /* @__PURE__ */ jsx(CloseIcon, {})
+      })
+    ]
+  });
+});
+
+export { Banner };
+//# sourceMappingURL=Banner.js.map

package/dist-es/packages/lab/src/banner/Banner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.js","sources":["../src/banner/Banner.tsx"],"sourcesContent":["import {\n  ComponentType,\n  forwardRef,\n  HTMLAttributes,\n  MouseEvent,\n  ReactNode,\n  useEffect,\n  useState,\n  Ref,\n} from \"react\";\nimport {\n  Button,\n  ButtonProps,\n  Link,\n  LinkProps,\n  makePrefixer,\n  StatusIndicator,\n  useAriaAnnouncer,\n  useForkRef,\n  ValidationStatus,\n} from \"@salt-ds/core\";\n\nimport getInnerText from \"./internal/getInnerText\";\nimport { CloseIcon, IconProps } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\n\nimport \"./Banner.css\";\n\nexport type BannerStatus = ValidationStatus;\n\nexport type LabelProps = { className?: string };\n\ntype StateAndPropsGetterFunction<TInjectedProps> = <T>(\n  props?: T\n) => TInjectedProps;\n\nexport interface GetStateAndPropGetters {\n  Icon: ComponentType<IconProps>;\n  getIconProps: StateAndPropsGetterFunction<IconProps>;\n  getLabelProps: StateAndPropsGetterFunction<LabelProps>;\n  getLinkProps: StateAndPropsGetterFunction<LinkProps>;\n}\n\nexport interface BannerProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * THe props to be passed to the close button\n   */\n  CloseButtonProps?: ButtonProps;\n  /**\n   * Props to pass to Link, Link will not be rendered if this is undefined\n   */\n  LinkProps?: LinkProps;\n  /**\n   * Announcement message for screen reader 250ms after the banner is mounted.\n   */\n  announcement?: string;\n  /**\n   * close button ref\n   */\n  closeRef?: Ref<HTMLButtonElement>;\n  /**\n   * If true, the built-in ARIA announcer will be disabled\n   */\n  disableAnnouncer?: boolean;\n  /**\n   * Emphasize the styling by applying a background color: defaults to false\n   */\n  emphasize?: boolean;\n  /**\n   * onClose callback when the close icon is clicked, the dismiss button will not be rendered if this is\n   * not defined\n   */\n  onClose?: (event: MouseEvent<HTMLButtonElement>) => void;\n  /**\n   * render props callback (if children callback not supplied)\n   */\n  render?: (props: GetStateAndPropGetters) => ReactNode;\n  /**\n   *  A string to determine the current state of the Banner\n   */\n  status?: BannerStatus;\n}\n\nconst withBaseName = makePrefixer(\"saltBanner\");\n\nexport const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(\n  {\n    CloseButtonProps,\n    LinkProps,\n    announcement: announcementProp,\n    children,\n    className,\n    closeRef,\n    disableAnnouncer = false,\n    emphasize = false,\n    onClose,\n    render,\n    status = \"info\",\n    ...rest\n  },\n  ref\n) {\n  const { announce } = useAriaAnnouncer();\n\n  const [containerNode, setContainerNode] = useState<HTMLDivElement | null>(\n    null\n  );\n\n  const handleRef = useForkRef<HTMLDivElement>(setContainerNode, ref);\n\n  useEffect(() => {\n    if (!disableAnnouncer && containerNode) {\n      const announcement = announcementProp || getInnerText(containerNode);\n      announce(announcement, 250);\n    }\n  }, [announce, disableAnnouncer, containerNode, announcementProp]);\n\n  const getIconProps = ({ className, ...restProps }: IconProps = {}) => {\n    return {\n      className: cx(withBaseName(\"icon\"), status, className),\n      ...restProps,\n    };\n  };\n\n  const getLabelProps = ({ className, ...restProps }: LabelProps = {}) => ({\n    className: cx(withBaseName(\"label\"), status, className),\n    ...restProps,\n  });\n\n  const getLinkProps = ({ className, href, ...restProps }: LinkProps = {}) => ({\n    children: \"Link\",\n    className: cx(withBaseName(\"link\"), status, className),\n    href,\n    ...restProps,\n  });\n\n  const getStateAndPropsGetters = (): GetStateAndPropGetters => ({\n    Icon: (props) => <StatusIndicator {...props} status={status} />,\n    getIconProps,\n    getLabelProps,\n    getLinkProps,\n  });\n\n  let contentElement;\n  if (!render) {\n    contentElement = (\n      <>\n        <StatusIndicator {...getIconProps()} status={status}></StatusIndicator>\n        <span {...getLabelProps()}>\n          {children} {LinkProps && <Link {...getLinkProps(LinkProps)} />}\n        </span>\n      </>\n    );\n  } else {\n    contentElement = render(getStateAndPropsGetters());\n  }\n\n  return (\n    <div\n      className={cx(withBaseName(), withBaseName(status), className, {\n        [withBaseName(\"emphasize\")]: emphasize,\n      })}\n      ref={handleRef}\n      {...rest}\n    >\n      {contentElement}\n      {onClose && (\n        <Button\n          aria-label=\"close\"\n          {...CloseButtonProps}\n          className={withBaseName(\"closeButton\")}\n          onClick={onClose}\n          ref={closeRef}\n          variant=\"secondary\"\n        >\n          <CloseIcon />\n        </Button>\n      )}\n    </div>\n  );\n});\n"],"names":["Banner","LinkProps","className"],"mappings":"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"}

package/dist-es/packages/lab/src/banner/internal/getInnerText.js

@@ -0,0 +1,10 @@
+function getInnerText(element) {
+  let innerText = "";
+  if (element) {
+    innerText = element.innerText;
+  }
+  return innerText.replace(/(\r?\n)/gm, " ").trim();
+}
+
+export { getInnerText as default };
+//# sourceMappingURL=getInnerText.js.map

package/dist-es/packages/lab/src/banner/internal/getInnerText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getInnerText.js","sources":["../src/banner/internal/getInnerText.ts"],"sourcesContent":["export default function getInnerText(element: HTMLElement): string {\n  let innerText = \"\";\n  if (element) {\n    innerText = element.innerText;\n  }\n  return innerText.replace(/(\\r?\\n)/gm, \" \").trim();\n}\n"],"names":[],"mappings":"AAAA,SAAwB,aAAa,OAA8B,EAAA;AACjE,EAAA,IAAI,SAAY,GAAA,EAAA,CAAA;AAChB,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,SAAA,GAAY,OAAQ,CAAA,SAAA,CAAA;AAAA,GACtB;AACA,EAAA,OAAO,SAAU,CAAA,OAAA,CAAQ,WAAa,EAAA,GAAG,EAAE,IAAK,EAAA,CAAA;AAClD;;;;"}

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumb.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltBreadcrumb {\n  --breadcrumbs-crumb-color: var(--saltBreadcrumbs-crumb-color, var(--salt-actionable-primary-foreground));\n  --breadcrumbs-crumb-color-hover: var(--saltBreadcrumbs-crumb-color-hover, var(--salt-actionable-primary-foreground-hover));\n  --breadcrumbs-crumb-color-active: var(--saltBreadcrumbs-crumb-color-active, var(--salt-actionable-primary-foreground-active));\n  --breadcrumbs-crumb-icon-color: var(--saltBreadcrumbs-crumb-icon-color, var(--breadcrumbs-crumb-color));\n  --breadcrumbs-crumb-marginLeft: 0px;\n}\n\n.saltBreadcrumb {\n  padding: 0px;\n}\n\n.saltBreadcrumb-regular {\n  display: flex;\n  gap: calc(var(--salt-size-unit) / 2);\n  align-items: center;\n  color: var(--breadcrumbs-crumb-color);\n}\n\n.saltBreadcrumb-regular:visited {\n  color: currentColor;\n}\n\n.saltBreadcrumb-regular:visited .saltBreadcrumb-icon {\n  color: currentColor;\n}\n\n.saltBreadcrumb-regular:hover {\n  color: var(--breadcrumbs-crumb-color-hover);\n}\n\n.saltBreadcrumb-regular:hover .saltBreadcrumb-icon {\n  color: var(--breadcrumbs-crumb-color-hover);\n}\n\n.saltBreadcrumb-regular:active {\n  color: var(--breadcrumbs-crumb-color-active);\n}\n\n.saltBreadcrumb-regular:active .saltBreadcrumb-icon {\n  color: var(--breadcrumbs-crumb-color-active);\n}\n\n.saltBreadcrumb-currentLevel {\n  color: var(--breadcrumbs-crumb-color);\n}\n\n.saltBreadcrumb-icon {\n  color: var(--breadcrumbs-crumb-icon-color);\n  margin-left: var(--saltBreadcrumbs-crumb-marginLeft, var(--breadcrumbs-crumb-marginLeft));\n}\n\n.saltBreadcrumb-justifyContentCenter {\n  justify-content: center;\n}\n\n.saltBreadcrumb-text {\n  text-decoration: underline;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Breadcrumb.css.js.map

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumb.css.js.map

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

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumb.js

@@ -0,0 +1,78 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, Text, Link } from '@salt-ds/core';
+import cx from 'classnames';
+import { forwardRef, Children } from 'react';
+import { useBreadcrumbsContext } from './internal/BreadcrumbsContext.js';
+import './Breadcrumb.css.js';
+
+const withBaseName = makePrefixer("saltBreadcrumb");
+const Breadcrumb = forwardRef(
+  function Breadcrumb2({
+    children,
+    ContainerProps = {},
+    tooltipText,
+    tooltipProps,
+    isCurrentLevel,
+    onItemClick,
+    overflowLabel,
+    maxWidth,
+    Icon,
+    minWidth,
+    className,
+    ...props
+  }, ref) {
+    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();
+    const hasChildren = Children.count(children) !== 0;
+    const hasOnlyIcon = Icon && !hasChildren;
+    const getDefaultBreadcrumb = () => isCurrentLevel ? /* @__PURE__ */ jsx(Text, {
+      maxRows: 1,
+      className: cx(
+        withBaseName(),
+        className,
+        withBaseName("currentLevel")
+      ),
+      styleAs: "label",
+      children
+    }) : /* @__PURE__ */ jsxs("div", {
+      className: cx(
+        withBaseName(),
+        className,
+        {
+          [withBaseName("justifyContentCenter")]: hasOnlyIcon
+        },
+        withBaseName("regular")
+      ),
+      children: [
+        Icon && /* @__PURE__ */ jsx(Icon, {
+          className: withBaseName("icon")
+        }),
+        hasChildren && /* @__PURE__ */ jsx(Link, {
+          maxRows: 1,
+          styleAs: "label",
+          ...props,
+          children
+        })
+      ]
+    });
+    const content = getDefaultBreadcrumb();
+    const {
+      style: containerStyle,
+      className: containerClassName,
+      ...containerPropsRest
+    } = ContainerProps;
+    return /* @__PURE__ */ jsx("li", {
+      ref,
+      style: {
+        ...containerStyle,
+        minWidth: minWidth != null ? minWidth : itemsMinWidth,
+        maxWidth: maxWidth != null ? maxWidth : itemsMaxWidth
+      },
+      className: cx(liClass, containerClassName),
+      ...containerPropsRest,
+      children: content
+    });
+  }
+);
+
+export { Breadcrumb };
+//# sourceMappingURL=Breadcrumb.js.map

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../src/breadcrumbs/Breadcrumb.tsx"],"sourcesContent":["import { Link, makePrefixer, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport classnames from \"classnames\";\nimport { Children, forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { useBreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\nimport { TooltipProps } from \"../tooltip\";\n\nimport \"./Breadcrumb.css\";\n\nconst withBaseName = makePrefixer(\"saltBreadcrumb\");\n\nexport interface BreadcrumbProps {\n  children?: ReactNode;\n  ContainerProps?: HTMLAttributes<HTMLLIElement>;\n  tooltipText?: string;\n  tooltipProps?: TooltipProps;\n  className?: string;\n  href?: string;\n  isCurrentLevel?: boolean;\n  maxWidth?: number;\n  minWidth?: number;\n  onItemClick?: (item: any, event: any) => void; // TODO\n  overflowLabel?: string;\n  Icon?: React.ComponentType<IconProps>;\n}\n\nexport const Breadcrumb = forwardRef<HTMLLIElement, BreadcrumbProps>(\n  function Breadcrumb(\n    {\n      children,\n      ContainerProps = {},\n      tooltipText,\n      tooltipProps,\n      isCurrentLevel,\n      onItemClick,\n      overflowLabel,\n      maxWidth,\n      Icon,\n      minWidth,\n      className,\n      ...props\n    },\n    ref\n  ) {\n    const { itemsMaxWidth, itemsMinWidth, liClass } = useBreadcrumbsContext();\n\n    const hasChildren = Children.count(children) !== 0;\n    const hasOnlyIcon = Icon && !hasChildren;\n\n    const getDefaultBreadcrumb = () =>\n      isCurrentLevel ? (\n        <Text\n          maxRows={1}\n          className={classnames(\n            withBaseName(),\n            className,\n            withBaseName(\"currentLevel\")\n          )}\n          styleAs=\"label\"\n        >\n          {children}\n        </Text>\n      ) : (\n        <div\n          className={classnames(\n            withBaseName(),\n            className,\n            {\n              [withBaseName(\"justifyContentCenter\")]: hasOnlyIcon,\n            },\n            withBaseName(\"regular\")\n          )}\n        >\n          {Icon && <Icon className={withBaseName(\"icon\")} />}\n          {hasChildren && (\n            <Link maxRows={1} styleAs=\"label\" {...props}>\n              {children}\n            </Link>\n          )}\n        </div>\n      );\n\n    const content = getDefaultBreadcrumb();\n\n    const {\n      style: containerStyle,\n      className: containerClassName,\n      ...containerPropsRest\n    } = ContainerProps;\n\n    return (\n      <li\n        ref={ref}\n        style={{\n          ...containerStyle,\n          minWidth: minWidth ?? itemsMinWidth,\n          maxWidth: maxWidth ?? itemsMaxWidth,\n        }}\n        className={classnames(liClass, containerClassName)}\n        {...containerPropsRest}\n      >\n        {content}\n      </li>\n    );\n  }\n);\n"],"names":["Breadcrumb","classnames"],"mappings":";;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,QAAA;AAAA,IACA,iBAAiB,EAAC;AAAA,IAClB,WAAA;AAAA,IACA,YAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,EAAE,aAAA,EAAe,aAAe,EAAA,OAAA,KAAY,qBAAsB,EAAA,CAAA;AAExE,IAAA,MAAM,WAAc,GAAA,QAAA,CAAS,KAAM,CAAA,QAAQ,CAAM,KAAA,CAAA,CAAA;AACjD,IAAM,MAAA,WAAA,GAAc,QAAQ,CAAC,WAAA,CAAA;AAE7B,IAAM,MAAA,oBAAA,GAAuB,MAC3B,cAAA,mBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,OAAS,EAAA,CAAA;AAAA,MACT,SAAW,EAAAC,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA,aAAa,cAAc,CAAA;AAAA,OAC7B;AAAA,MACA,OAAQ,EAAA,OAAA;AAAA,MAEP,QAAA;AAAA,KACH,oBAEC,IAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAA,EAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,SAAA;AAAA,QACA;AAAA,UACE,CAAC,YAAa,CAAA,sBAAsB,CAAI,GAAA,WAAA;AAAA,SAC1C;AAAA,QACA,aAAa,SAAS,CAAA;AAAA,OACxB;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA,oBAAS,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,SAAG,CAAA;AAAA,QAC/C,+BACE,GAAA,CAAA,IAAA,EAAA;AAAA,UAAK,OAAS,EAAA,CAAA;AAAA,UAAG,OAAQ,EAAA,OAAA;AAAA,UAAS,GAAG,KAAA;AAAA,UACnC,QAAA;AAAA,SACH,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAGJ,IAAA,MAAM,UAAU,oBAAqB,EAAA,CAAA;AAErC,IAAM,MAAA;AAAA,MACJ,KAAO,EAAA,cAAA;AAAA,MACP,SAAW,EAAA,kBAAA;AAAA,MACR,GAAA,kBAAA;AAAA,KACD,GAAA,cAAA,CAAA;AAEJ,IAAA,uBACG,GAAA,CAAA,IAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL,GAAG,cAAA;AAAA,QACH,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,QACtB,UAAU,QAAY,IAAA,IAAA,GAAA,QAAA,GAAA,aAAA;AAAA,OACxB;AAAA,MACA,SAAA,EAAWA,EAAW,CAAA,OAAA,EAAS,kBAAkB,CAAA;AAAA,MAChD,GAAG,kBAAA;AAAA,MAEH,QAAA,EAAA,OAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumbs.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltBreadcrumbs-ol {\n  --breadcrumbs-ol-gap: var(--salt-size-unit);\n\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  padding: 0;\n  margin: 0;\n  gap: var(--breadcrumbs-ol-gap);\n}\n\n.saltBreadcrumbs-li {\n  --breadcrumbs-li-marginRight: 0px;\n  --breadcrumbs-li-padding: 0px;\n\n  flex: 0 1 auto;\n  list-style: none;\n  margin-right: var(--breadcrumbs-li-marginRight);\n  padding: var(--breadcrumbs-li-padding);\n}\n\n.saltBreadcrumbs-separator {\n  --breadcrumbs-separator-marginRight: 0px;\n\n  display: flex;\n  margin-right: var(--breadcrumbs-separator-marginRight);\n  user-select: none;\n}\n\n.saltBreadcrumbs-ol-wrap {\n  flex-wrap: wrap;\n}\n\n.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-li,\n.saltBreadcrumbs-ol-wrap .saltBreadcrumbs-separator {\n  --breadcrumbs-ol-wrap-li-marginBottom: 0px;\n\n  margin-bottom: var(--breadcrumbs-ol-wrap-li-marginBottom);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=Breadcrumbs.css.js.map

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumbs.css.js.map

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

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,125 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import cx from 'classnames';
+import React, { useMemo, isValidElement } from 'react';
+import { BreadcrumbsCollapsed } from './internal/BreadcrumbsCollapsed.js';
+import { BreadcrumbsContext } from './internal/BreadcrumbsContext.js';
+import { BreadcrumbsSeparator } from './internal/BreadcrumbsSeparator.js';
+import './Breadcrumbs.css.js';
+
+const iconWidth = 12;
+const withBaseName = makePrefixer("saltBreadcrumbs");
+function insertSeparators(items, className, separator, hideCurrentLevel, shouldRenderAllItems, itemsAfterCollapse) {
+  return items.reduce((acc, current, index) => {
+    if (index < items.length - 1) {
+      return acc.concat(
+        current,
+        /* @__PURE__ */ jsx("li", {
+          "aria-hidden": true,
+          className,
+          children: separator
+        }, `separator-${index}`)
+      );
+    } else {
+      const skipLastElement = hideCurrentLevel && shouldRenderAllItems || hideCurrentLevel && !shouldRenderAllItems && itemsAfterCollapse !== 0;
+      return skipLastElement ? acc : acc.concat(current);
+    }
+  }, []);
+}
+const Breadcrumbs = React.forwardRef(
+  function Breadcrumbs2(props, ref) {
+    const {
+      children,
+      className,
+      itemsAfterCollapse = 1,
+      itemsBeforeCollapse = 1,
+      maxItems = 3,
+      separator: separatorProp,
+      hideCurrentLevel,
+      itemsMinWidth: itemsMinWidthProp,
+      itemsMaxWidth,
+      wrap,
+      Menu,
+      SeparatorProps = {},
+      ...other
+    } = props;
+    const itemsMinWidth = itemsMinWidthProp != null ? itemsMinWidthProp : iconWidth;
+    const breadcrumbsContext = useMemo(
+      () => ({
+        wrap,
+        itemsMinWidth,
+        itemsMaxWidth,
+        liClass: withBaseName("li")
+      }),
+      [wrap, itemsMaxWidth, itemsMinWidth]
+    );
+    const separator = separatorProp || /* @__PURE__ */ jsx(BreadcrumbsSeparator, {
+      ...SeparatorProps
+    });
+    const childrenArray = React.Children.toArray(children);
+    const shouldRenderAllItems = wrap || maxItems == null || childrenArray.length <= maxItems;
+    const allItems = childrenArray.filter(isValidElement).map((child, index) => {
+      const isLastChild = index === childrenArray.length - 1;
+      return React.cloneElement(child, {
+        isCurrentLevel: isLastChild
+      });
+    });
+    const renderItemsBeforeAndAfter = () => {
+      if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
+        console.warn(
+          [
+            "You have provided an invalid combination of properties to the Breadcrumbs.",
+            `itemsAfterCollapse={${itemsAfterCollapse}} +itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`
+          ].join("\n")
+        );
+        return allItems;
+      }
+      const hiddenItems = allItems.slice(
+        itemsBeforeCollapse,
+        allItems.length - itemsAfterCollapse
+      );
+      return [
+        ...allItems.slice(0, itemsBeforeCollapse),
+        /* @__PURE__ */ jsx("li", {
+          className: withBaseName("li"),
+          children: /* @__PURE__ */ jsx(BreadcrumbsCollapsed, {
+            accessibleText: `Breadcrumb levels ${itemsBeforeCollapse + 1} to ${allItems.length - itemsAfterCollapse}`,
+            className: withBaseName("overflowButton"),
+            children: hiddenItems
+          })
+        }, "breadcrumbs-collapsed"),
+        ...allItems.slice(
+          allItems.length - itemsAfterCollapse,
+          allItems.length
+        )
+      ];
+    };
+    const itemsToRender = shouldRenderAllItems ? allItems : renderItemsBeforeAndAfter();
+    return /* @__PURE__ */ jsx(BreadcrumbsContext.Provider, {
+      value: breadcrumbsContext,
+      children: /* @__PURE__ */ jsx("nav", {
+        "aria-label": "Breadcrumb",
+        className: cx(withBaseName(), className),
+        "data-testid": "breadcrumbs",
+        ref,
+        ...other,
+        children: /* @__PURE__ */ jsx("ol", {
+          className: cx(withBaseName("ol"), {
+            [withBaseName("ol-wrap")]: wrap
+          }),
+          children: insertSeparators(
+            itemsToRender,
+            withBaseName("separator"),
+            separator,
+            hideCurrentLevel,
+            shouldRenderAllItems,
+            itemsAfterCollapse
+          )
+        })
+      })
+    });
+  }
+);
+
+export { Breadcrumbs };
+//# sourceMappingURL=Breadcrumbs.js.map

package/dist-es/packages/lab/src/breadcrumbs/Breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumbs.js","sources":["../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport classnames from \"classnames\";\nimport React, {\n  HTMLAttributes,\n  isValidElement,\n  ReactNode,\n  useMemo,\n} from \"react\";\nimport { BreadcrumbProps } from \"./Breadcrumb\";\nimport { BreadcrumbsCollapsed } from \"./internal/BreadcrumbsCollapsed\";\nimport { BreadcrumbsContext } from \"./internal/BreadcrumbsContext\";\nimport { BreadcrumbsSeparator } from \"./internal/BreadcrumbsSeparator\";\n\nimport \"./Breadcrumbs.css\";\n\nconst iconWidth = 12;\n\nconst withBaseName = makePrefixer(\"saltBreadcrumbs\");\n\nfunction insertSeparators(\n  items: ReactNode[],\n  className?: string,\n  separator?: ReactNode,\n  hideCurrentLevel?: boolean,\n  shouldRenderAllItems?: boolean,\n  itemsAfterCollapse?: number\n) {\n  return items.reduce((acc: ReactNode[], current: ReactNode, index: number) => {\n    if (index < items.length - 1) {\n      return acc.concat(\n        current,\n        <li aria-hidden className={className} key={`separator-${index}`}>\n          {separator}\n        </li>\n      );\n    } else {\n      const skipLastElement =\n        (hideCurrentLevel && shouldRenderAllItems) ||\n        (hideCurrentLevel && !shouldRenderAllItems && itemsAfterCollapse !== 0);\n      return skipLastElement ? acc : acc.concat(current);\n    }\n  }, []);\n}\n\nexport interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {\n  Menu?: any;\n  SeparatorProps?: IconProps;\n  hideCurrentLevel?: boolean;\n  itemsAfterCollapse?: number;\n  itemsBeforeCollapse?: number;\n  itemsMaxWidth?: number | string;\n  itemsMinWidth?: number | string;\n  maxItems?: number;\n  separator?: ReactNode;\n  wrap?: boolean;\n  className?: string;\n  children?: ReactNode;\n}\n\nexport const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(\n  function Breadcrumbs(props, ref) {\n    const {\n      children,\n      className,\n      itemsAfterCollapse = 1,\n      itemsBeforeCollapse = 1,\n      maxItems = 3,\n      separator: separatorProp,\n      hideCurrentLevel,\n      itemsMinWidth: itemsMinWidthProp,\n      itemsMaxWidth,\n      wrap,\n      Menu,\n      SeparatorProps = {},\n      ...other\n    } = props;\n\n    const itemsMinWidth =\n      itemsMinWidthProp != null ? itemsMinWidthProp : iconWidth;\n\n    const breadcrumbsContext = useMemo(\n      () => ({\n        wrap,\n        itemsMinWidth,\n        itemsMaxWidth,\n        liClass: withBaseName(\"li\"),\n      }),\n      [wrap, itemsMaxWidth, itemsMinWidth]\n    );\n\n    const separator = separatorProp || (\n      <BreadcrumbsSeparator {...SeparatorProps} />\n    );\n\n    const childrenArray = React.Children.toArray(children);\n    const shouldRenderAllItems =\n      wrap || maxItems == null || childrenArray.length <= maxItems;\n\n    const allItems = childrenArray\n      .filter(isValidElement)\n      .map((child, index) => {\n        const isLastChild = index === childrenArray.length - 1;\n\n        return React.cloneElement(child, {\n          isCurrentLevel: isLastChild,\n        } as BreadcrumbProps);\n      });\n\n    const renderItemsBeforeAndAfter = () => {\n      // This defends against someone passing weird input, to ensure that if all\n      // items would be shown anyway, we just show all items without the EllipsisItem\n      if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {\n        console.warn(\n          [\n            \"You have provided an invalid combination of properties to the Breadcrumbs.\",\n            `itemsAfterCollapse={${itemsAfterCollapse}} +itemsBeforeCollapse={${itemsBeforeCollapse}} >= maxItems={${maxItems}}`,\n          ].join(\"\\n\")\n        );\n        return allItems;\n      }\n\n      const hiddenItems = allItems.slice(\n        itemsBeforeCollapse,\n        allItems.length - itemsAfterCollapse\n      );\n      return [\n        ...allItems.slice(0, itemsBeforeCollapse),\n        <li className={withBaseName(\"li\")} key=\"breadcrumbs-collapsed\">\n          <BreadcrumbsCollapsed\n            accessibleText={`Breadcrumb levels ${itemsBeforeCollapse + 1} to ${\n              allItems.length - itemsAfterCollapse\n            }`}\n            className={withBaseName(\"overflowButton\")}\n          >\n            {hiddenItems}\n          </BreadcrumbsCollapsed>\n        </li>,\n        ...allItems.slice(\n          allItems.length - itemsAfterCollapse,\n          allItems.length\n        ),\n      ];\n    };\n\n    const itemsToRender = shouldRenderAllItems\n      ? allItems\n      : renderItemsBeforeAndAfter();\n    return (\n      <BreadcrumbsContext.Provider value={breadcrumbsContext}>\n        <nav\n          aria-label=\"Breadcrumb\"\n          className={classnames(withBaseName(), className)}\n          data-testid=\"breadcrumbs\"\n          ref={ref}\n          {...other}\n        >\n          <ol\n            className={classnames(withBaseName(\"ol\"), {\n              [withBaseName(\"ol-wrap\")]: wrap,\n            })}\n          >\n            {insertSeparators(\n              itemsToRender,\n              withBaseName(\"separator\"),\n              separator,\n              hideCurrentLevel,\n              shouldRenderAllItems,\n              itemsAfterCollapse\n            )}\n          </ol>\n        </nav>\n      </BreadcrumbsContext.Provider>\n    );\n  }\n);\n"],"names":["Breadcrumbs","classnames"],"mappings":"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"}

package/dist-es/packages/lab/src/breadcrumbs/internal/BreadcrumbsCollapsed.js

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import { Children, isValidElement, useCallback } from 'react';
+import { OverflowMenuIcon } from '@salt-ds/icons';
+import { useFocusMenuRemount } from './useFocusMenuRemount.js';
+import { MenuButton } from '../../menu-button/MenuButton.js';
+
+const BreadcrumbsCollapsed = ({
+  children,
+  CascadingMenuProps: CascadingMenuProps2,
+  accessibleText,
+  ...rest
+}) => {
+  const keys = Children.map(children, (child) => {
+    if (isValidElement(child)) {
+      return child.key;
+    }
+    return "";
+  });
+  const key = keys ? keys.join("") : "";
+  const { ref, shouldFocusOnMount } = useFocusMenuRemount(key);
+  const itemToString = useCallback((child) => {
+    if (!child) {
+      return "";
+    }
+    const { overflowLabel, tooltipText, children: children2 } = child.props;
+    return overflowLabel || tooltipText || String(children2);
+  }, []);
+  const onItemClick = useCallback(
+    (sourceItem, event) => {
+      shouldFocusOnMount.current = true;
+    },
+    [shouldFocusOnMount]
+  );
+  const menuItems = [];
+  Children.forEach(children, (x) => {
+    if (isValidElement(x)) {
+      menuItems.push({ props: x.props });
+    }
+  });
+  return /* @__PURE__ */ jsx(MenuButton, {
+    CascadingMenuProps: {
+      initialSource: {
+        menuItems
+      },
+      itemToString,
+      onItemClick,
+      minWidth: 0,
+      ...CascadingMenuProps2
+    },
+    hideCaret: true,
+    ...rest,
+    ref,
+    children: /* @__PURE__ */ jsx(OverflowMenuIcon, {})
+  });
+};
+
+export { BreadcrumbsCollapsed };
+//# sourceMappingURL=BreadcrumbsCollapsed.js.map

package/dist-es/packages/lab/src/breadcrumbs/internal/BreadcrumbsCollapsed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsCollapsed.js","sources":["../src/breadcrumbs/internal/BreadcrumbsCollapsed.tsx"],"sourcesContent":["import {\n  Children,\n  isValidElement,\n  ReactNode,\n  useCallback,\n  MouseEvent,\n  KeyboardEvent,\n  Component,\n} from \"react\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { CascadingMenuProps, MenuDescriptor } from \"../../cascading-menu\";\nimport { useFocusMenuRemount } from \"./useFocusMenuRemount\";\nimport { MenuButton, MenuButtonProps } from \"../../menu-button\";\nimport { BreadcrumbProps } from \"../Breadcrumb\";\n\nexport interface BreadcrumbsCollapsedProps\n  extends Omit<MenuButtonProps, \"CascadingMenuProps\"> {\n  CascadingMenuProps?: CascadingMenuProps;\n  accessibleText?: string;\n  children: ReactNode;\n  className?: string;\n}\n\nexport const BreadcrumbsCollapsed = ({\n  children,\n  CascadingMenuProps,\n  accessibleText,\n  ...rest\n}: BreadcrumbsCollapsedProps) => {\n  const keys = Children.map(children, (child) => {\n    if (isValidElement(child)) {\n      return child.key;\n    }\n    return \"\";\n  });\n\n  const key = keys ? keys.join(\"\") : \"\";\n  const { ref, shouldFocusOnMount } =\n    useFocusMenuRemount<HTMLButtonElement>(key);\n\n  const itemToString = useCallback((child: Component<BreadcrumbProps>) => {\n    if (!child) {\n      return \"\";\n    }\n    const { overflowLabel, tooltipText, children } = child.props;\n    return overflowLabel || tooltipText || String(children);\n  }, []);\n\n  const onItemClick = useCallback(\n    (sourceItem: MenuDescriptor, event: MouseEvent | KeyboardEvent): void => {\n      shouldFocusOnMount.current = true;\n    },\n    [shouldFocusOnMount]\n  );\n\n  const menuItems: MenuDescriptor[] = [];\n  Children.forEach(children, (x) => {\n    if (isValidElement(x)) {\n      menuItems.push({ props: x.props } as MenuDescriptor);\n    }\n  });\n\n  return (\n    <MenuButton\n      CascadingMenuProps={{\n        initialSource: {\n          // Only `props` is required for `itemToString`. Otherwise causing circular JSON conversion in useControlled.js\n          // This is not reproducible in unit tests, where react / react-dom is partially mocked without circular reference\n          menuItems,\n        },\n        itemToString,\n        onItemClick,\n        minWidth: 0,\n        ...CascadingMenuProps,\n      }}\n      hideCaret\n      {...rest}\n      ref={ref}\n    >\n      <OverflowMenuIcon />\n    </MenuButton>\n  );\n};\n"],"names":["CascadingMenuProps","children"],"mappings":";;;;;;AAuBO,MAAM,uBAAuB,CAAC;AAAA,EACnC,QAAA;AAAA,EACA,kBAAAA,EAAAA,mBAAAA;AAAA,EACA,cAAA;AAAA,EACG,GAAA,IAAA;AACL,CAAiC,KAAA;AAC/B,EAAA,MAAM,IAAO,GAAA,QAAA,CAAS,GAAI,CAAA,QAAA,EAAU,CAAC,KAAU,KAAA;AAC7C,IAAI,IAAA,cAAA,CAAe,KAAK,CAAG,EAAA;AACzB,MAAA,OAAO,KAAM,CAAA,GAAA,CAAA;AAAA,KACf;AACA,IAAO,OAAA,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,GAAM,GAAA,IAAA,GAAO,IAAK,CAAA,IAAA,CAAK,EAAE,CAAI,GAAA,EAAA,CAAA;AACnC,EAAA,MAAM,EAAE,GAAA,EAAK,kBAAmB,EAAA,GAC9B,oBAAuC,GAAG,CAAA,CAAA;AAE5C,EAAM,MAAA,YAAA,GAAe,WAAY,CAAA,CAAC,KAAsC,KAAA;AACtE,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAO,OAAA,EAAA,CAAA;AAAA,KACT;AACA,IAAA,MAAM,EAAE,aAAe,EAAA,WAAA,EAAa,QAAAC,EAAAA,SAAAA,KAAa,KAAM,CAAA,KAAA,CAAA;AACvD,IAAO,OAAA,aAAA,IAAiB,WAAe,IAAA,MAAA,CAAOA,SAAQ,CAAA,CAAA;AAAA,GACxD,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,YAA4B,KAA4C,KAAA;AACvE,MAAA,kBAAA,CAAmB,OAAU,GAAA,IAAA,CAAA;AAAA,KAC/B;AAAA,IACA,CAAC,kBAAkB,CAAA;AAAA,GACrB,CAAA;AAEA,EAAA,MAAM,YAA8B,EAAC,CAAA;AACrC,EAAS,QAAA,CAAA,OAAA,CAAQ,QAAU,EAAA,CAAC,CAAM,KAAA;AAChC,IAAI,IAAA,cAAA,CAAe,CAAC,CAAG,EAAA;AACrB,MAAA,SAAA,CAAU,IAAK,CAAA,EAAE,KAAO,EAAA,CAAA,CAAE,OAAyB,CAAA,CAAA;AAAA,KACrD;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,UAAA,EAAA;AAAA,IACC,kBAAoB,EAAA;AAAA,MAClB,aAAe,EAAA;AAAA,QAGb,SAAA;AAAA,OACF;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAU,EAAA,CAAA;AAAA,MACV,GAAGD,mBAAAA;AAAA,KACL;AAAA,IACA,SAAS,EAAA,IAAA;AAAA,IACR,GAAG,IAAA;AAAA,IACJ,GAAA;AAAA,IAEA,8BAAC,gBAAiB,EAAA,EAAA,CAAA;AAAA,GACpB,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/breadcrumbs/internal/BreadcrumbsContext.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+const BreadcrumbsContext = createContext(
+  void 0
+);
+const useBreadcrumbsContext = () => {
+  const context = useContext(BreadcrumbsContext);
+  if (!context) {
+    throw new Error(
+      "BreadcrumbsItem compound components cannot be rendered outside the Breadcrumbs component"
+    );
+  }
+  return context;
+};
+
+export { BreadcrumbsContext, useBreadcrumbsContext };
+//# sourceMappingURL=BreadcrumbsContext.js.map

package/dist-es/packages/lab/src/breadcrumbs/internal/BreadcrumbsContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsContext.js","sources":["../src/breadcrumbs/internal/BreadcrumbsContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface BreadcrumbsContext {\n  wrap?: boolean;\n  itemsMaxWidth?: number | string;\n  itemsMinWidth?: number | string;\n  liClass?: string;\n}\n\nexport const BreadcrumbsContext = createContext<BreadcrumbsContext | undefined>(\n  undefined\n);\n\nexport const useBreadcrumbsContext = () => {\n  const context = useContext(BreadcrumbsContext);\n  if (!context) {\n    throw new Error(\n      \"BreadcrumbsItem compound components cannot be rendered outside the Breadcrumbs component\"\n    );\n  }\n  return context;\n};\n"],"names":[],"mappings":";;AASO,MAAM,kBAAqB,GAAA,aAAA;AAAA,EAChC,KAAA,CAAA;AACF,EAAA;AAEO,MAAM,wBAAwB,MAAM;AACzC,EAAM,MAAA,OAAA,GAAU,WAAW,kBAAkB,CAAA,CAAA;AAC7C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,0FAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;"}

package/dist-es/packages/lab/src/breadcrumbs/internal/BreadcrumbsSeparator.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { ChevronRightIcon } from '@salt-ds/icons';
+
+const BreadcrumbsSeparator = (props) => /* @__PURE__ */ jsx(ChevronRightIcon, {
+  ...props
+});
+
+export { BreadcrumbsSeparator };
+//# sourceMappingURL=BreadcrumbsSeparator.js.map

package/dist-es/packages/lab/src/breadcrumbs/internal/BreadcrumbsSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbsSeparator.js","sources":["../src/breadcrumbs/internal/BreadcrumbsSeparator.tsx"],"sourcesContent":["import { ChevronRightIcon, IconProps } from \"@salt-ds/icons\";\n\nexport const BreadcrumbsSeparator = (props: IconProps) => (\n  <ChevronRightIcon {...props} />\n);\n"],"names":[],"mappings":";;;AAEa,MAAA,oBAAA,GAAuB,CAAC,KAAA,qBAClC,GAAA,CAAA,gBAAA,EAAA;AAAA,EAAkB,GAAG,KAAA;AAAA,CAAO;;;;"}

package/dist-es/packages/lab/src/breadcrumbs/internal/useFocusMenuRemount.js

@@ -0,0 +1,20 @@
+import { useRef, useEffect } from 'react';
+import { usePrevious } from '@salt-ds/core';
+
+function useFocusMenuRemount(key) {
+  const ref = useRef(null);
+  const shouldFocusOnMount = useRef(false);
+  const previousKey = usePrevious(key);
+  useEffect(() => {
+    if (ref.current && shouldFocusOnMount.current && previousKey !== key) {
+      ref.current.focus();
+      shouldFocusOnMount.current = false;
+    } else {
+      shouldFocusOnMount.current = false;
+    }
+  }, [previousKey, key]);
+  return { ref, shouldFocusOnMount };
+}
+
+export { useFocusMenuRemount };
+//# sourceMappingURL=useFocusMenuRemount.js.map

package/dist-es/packages/lab/src/breadcrumbs/internal/useFocusMenuRemount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFocusMenuRemount.js","sources":["../src/breadcrumbs/internal/useFocusMenuRemount.ts"],"sourcesContent":["import { useRef, useEffect } from \"react\";\nimport { usePrevious } from \"@salt-ds/core\";\n\nexport function useFocusMenuRemount<T extends HTMLElement>(key: string) {\n  const ref = useRef<T>(null);\n  const shouldFocusOnMount = useRef(false);\n  const previousKey = usePrevious(key);\n\n  useEffect(() => {\n    if (ref.current && shouldFocusOnMount.current && previousKey !== key) {\n      ref.current.focus();\n      shouldFocusOnMount.current = false;\n    } else {\n      shouldFocusOnMount.current = false;\n    }\n  }, [previousKey, key]);\n\n  return { ref, shouldFocusOnMount };\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,oBAA2C,GAAa,EAAA;AACtE,EAAM,MAAA,GAAA,GAAM,OAAU,IAAI,CAAA,CAAA;AAC1B,EAAM,MAAA,kBAAA,GAAqB,OAAO,KAAK,CAAA,CAAA;AACvC,EAAM,MAAA,WAAA,GAAc,YAAY,GAAG,CAAA,CAAA;AAEnC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,GAAI,CAAA,OAAA,IAAW,kBAAmB,CAAA,OAAA,IAAW,gBAAgB,GAAK,EAAA;AACpE,MAAA,GAAA,CAAI,QAAQ,KAAM,EAAA,CAAA;AAClB,MAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA,CAAA;AAAA,KACxB,MAAA;AACL,MAAA,kBAAA,CAAmB,OAAU,GAAA,KAAA,CAAA;AAAA,KAC/B;AAAA,GACC,EAAA,CAAC,WAAa,EAAA,GAAG,CAAC,CAAA,CAAA;AAErB,EAAO,OAAA,EAAE,KAAK,kBAAmB,EAAA,CAAA;AACnC;;;;"}

package/dist-es/packages/lab/src/button-bar/ButtonBar.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".saltButtonBar {\n  width: 100%;\n  display: flex;\n  justify-content: flex-end;\n  gap: var(--salt-size-unit);\n}\n\n.saltButtonBar-alignLeft {\n  justify-content: flex-start;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=ButtonBar.css.js.map

package/dist-es/packages/lab/src/button-bar/ButtonBar.css.js.map

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