@elliemae/ds-breadcrumb 3.12.0-next.0 → 3.12.0-next.1

package/dist/cjs/DSBreadcrumb.js

@@ -84,9 +84,7 @@ const props = {
     "Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title"
   ),
   label: import_ds_utilities.PropTypes.string.description("breadcrumb label"),
-  children: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.element).isRequired.description(
-    "Container items to wrap"
-  )
+  children: import_ds_utilities.PropTypes.arrayOf(import_ds_utilities.PropTypes.element).isRequired.description("Container items to wrap")
 };
 DSBreadcrumb.propTypes = props;
 DSBreadcrumb.displayName = "DSBreadcrumb";

package/dist/cjs/DSBreadcrumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSBreadcrumb.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { cloneElement, useMemo } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport DSBreadcrumbItem from './DSBreadcrumbItem';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\nimport type { DSBreadcrumbPropsT } from './index.d';\nimport { StyledContainer, StyledList } from './styles';\n\nconst htmlElements = ['nav', 'div', 'header', 'footer', 'main'] as const;\n\nconst DSBreadcrumb = ({\n  containerProps = {},\n  as = 'nav',\n  label = 'Breadcrumb',\n  isTitle = false,\n  children,\n  trailingSlash = true,\n  ...rest\n}: DSBreadcrumbPropsT): React.ReactElement => {\n  const [addRef, onKeyDown] = useKeyboardNavigation();\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  return (\n    <StyledContainer\n      aria-label={label}\n      data-testid=\"breadcrumb-nav-container\"\n      {...rest}\n      {...containerProps}\n      as={safeElement}\n    >\n      <StyledList data-testid=\"list-container\">\n        {React.Children.map(children, (child: React.ReactElement, childIndex) =>\n          childIndex < children.length - 1\n            ? cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n              })\n            : cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n                trailingSlash,\n                isTitle,\n              }),\n        )}\n      </StyledList>\n    </StyledContainer>\n  );\n};\n\nDSBreadcrumb.Item = DSBreadcrumbItem;\n\nconst props = {\n  /** props injected to breadcrumb wrapper */\n  containerProps: PropTypes.object.description('props injected to breadcrumb wrapper'),\n  /**\n   * Type of element you want the main container to be:\n   * 'nav', 'div', 'header', 'footer', 'main'\n   */\n  as: PropTypes.string.description(\n    \"Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'\",\n  ),\n  /**\n   * Whether to show the last element of the breadcrumb as a title\n   * Also removes trailing slash to show last element as title\n   */\n  isTitle: PropTypes.bool.description(\n    'Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title',\n  ),\n  /** breadcrumb label */\n  label: PropTypes.string.description('breadcrumb label'),\n  /**\n   * Container items to wrap\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description(\n    'Container items to wrap',\n  ),\n};\n\nDSBreadcrumb.propTypes = props;\nDSBreadcrumb.displayName = 'DSBreadcrumb';\n\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BjB;AA9BN,mBAA6C;AAC7C,0BAAoC;AACpC,8BAA6B;AAC7B,mCAAsC;AAEtC,oBAA4C;AAE5C,MAAM,eAAe,CAAC,OAAO,OAAO,UAAU,UAAU,MAAM;AAE9D,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,KACb;AACL,MAA8C;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,oDAAsB;AAElD,QAAM,kBAAc,sBAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,SACE,4CAAC;AAAA,IACC,cAAY;AAAA,IACZ,eAAY;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACJ,IAAI;AAAA,IAEJ,sDAAC;AAAA,MAAW,eAAY;AAAA,MACrB,uBAAAA,QAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,QAC3B,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC,QACD,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACP;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,aAAa,OAAO,wBAAAC;AAEpB,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,sCAAsC;AAAA,EAKnF,IAAI,8BAAU,OAAO;AAAA,IACnB;AAAA,EACF;AAAA,EAKA,SAAS,8BAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,OAAO,8BAAU,OAAO,YAAY,kBAAkB;AAAA,EAItD,UAAU,8BAAU,QAAQ,8BAAU,OAAO,EAAE,WAAW;AAAA,IACxD;AAAA,EACF;AACF;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAE3B,MAAM,6BAAyB,8BAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
+  "sourcesContent": ["import React, { cloneElement, useMemo } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport DSBreadcrumbItem from './DSBreadcrumbItem';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\nimport type { DSBreadcrumbPropsT } from './index.d';\nimport { StyledContainer, StyledList } from './styles';\n\nconst htmlElements = ['nav', 'div', 'header', 'footer', 'main'] as const;\n\nconst DSBreadcrumb = ({\n  containerProps = {},\n  as = 'nav',\n  label = 'Breadcrumb',\n  isTitle = false,\n  children,\n  trailingSlash = true,\n  ...rest\n}: DSBreadcrumbPropsT): React.ReactElement => {\n  const [addRef, onKeyDown] = useKeyboardNavigation();\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  return (\n    <StyledContainer\n      aria-label={label}\n      data-testid=\"breadcrumb-nav-container\"\n      {...rest}\n      {...containerProps}\n      as={safeElement}\n    >\n      <StyledList data-testid=\"list-container\">\n        {React.Children.map(children, (child: React.ReactElement, childIndex) =>\n          childIndex < children.length - 1\n            ? cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n              })\n            : cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n                trailingSlash,\n                isTitle,\n              }),\n        )}\n      </StyledList>\n    </StyledContainer>\n  );\n};\n\nDSBreadcrumb.Item = DSBreadcrumbItem;\n\nconst props = {\n  /** props injected to breadcrumb wrapper */\n  containerProps: PropTypes.object.description('props injected to breadcrumb wrapper'),\n  /**\n   * Type of element you want the main container to be:\n   * 'nav', 'div', 'header', 'footer', 'main'\n   */\n  as: PropTypes.string.description(\n    \"Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'\",\n  ),\n  /**\n   * Whether to show the last element of the breadcrumb as a title\n   * Also removes trailing slash to show last element as title\n   */\n  isTitle: PropTypes.bool.description(\n    'Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title',\n  ),\n  /** breadcrumb label */\n  label: PropTypes.string.description('breadcrumb label'),\n  /**\n   * Container items to wrap\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Container items to wrap'),\n};\n\nDSBreadcrumb.propTypes = props;\nDSBreadcrumb.displayName = 'DSBreadcrumb';\n\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8BjB;AA9BN,mBAA6C;AAC7C,0BAAoC;AACpC,8BAA6B;AAC7B,mCAAsC;AAEtC,oBAA4C;AAE5C,MAAM,eAAe,CAAC,OAAO,OAAO,UAAU,UAAU,MAAM;AAE9D,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,KACb;AACL,MAA8C;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,oDAAsB;AAElD,QAAM,kBAAc,sBAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,SACE,4CAAC;AAAA,IACC,cAAY;AAAA,IACZ,eAAY;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACJ,IAAI;AAAA,IAEJ,sDAAC;AAAA,MAAW,eAAY;AAAA,MACrB,uBAAAA,QAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,QAC3B,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC,QACD,2BAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACP;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,aAAa,OAAO,wBAAAC;AAEpB,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,8BAAU,OAAO,YAAY,sCAAsC;AAAA,EAKnF,IAAI,8BAAU,OAAO;AAAA,IACnB;AAAA,EACF;AAAA,EAKA,SAAS,8BAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,OAAO,8BAAU,OAAO,YAAY,kBAAkB;AAAA,EAItD,UAAU,8BAAU,QAAQ,8BAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAE3B,MAAM,6BAAyB,8BAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
   "names": ["React", "DSBreadcrumbItem"]
 }

package/dist/cjs/DSBreadcrumbItem.js

@@ -33,7 +33,7 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_ds_utilities = require("@elliemae/ds-utilities");
 var import_styles = require("./styles");
-function DSBreadcrumbItem({
+const DSBreadcrumbItem = ({
   active = false,
   as = "a",
   href = void 0,
@@ -46,27 +46,25 @@ function DSBreadcrumbItem({
   trailingSlash,
   onKeyDown = () => null,
   ...rest
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCrumbWrapper, {
-    "aria-current": active ? "page" : void 0,
-    "data-testid": "breadcrumb-item-container",
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCrumbWrapper, {
+  "aria-current": active ? "page" : void 0,
+  "data-testid": "breadcrumb-item-container",
+  isTitle,
+  trailingSlash,
+  ...rest,
+  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLink, {
+    as,
+    href,
+    onClick,
+    ref: addRef,
+    tabIndex: 0,
+    isActive: active,
+    onKeyDown: (e) => onKeyDown(e, childIndex, onClick),
     isTitle,
-    trailingSlash,
-    ...rest,
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledLink, {
-      as,
-      href,
-      onClick,
-      ref: addRef,
-      tabIndex: 0,
-      isActive: active,
-      onKeyDown: (e) => onKeyDown(e, childIndex, onClick),
-      isTitle,
-      color,
-      children: label
-    })
-  });
-}
+    color,
+    children: label
+  })
+});
 const props = {
   containerComponent: import_ds_utilities.PropTypes.string.description("inject props to wrapper"),
   as: import_ds_utilities.PropTypes.string.description("render as any html node"),

package/dist/cjs/DSBreadcrumbItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/DSBreadcrumbItem.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\nimport { StyledLink, StyledCrumbWrapper } from './styles';\n\nfunction DSBreadcrumbItem({\n  active = false,\n  as = 'a',\n  href = undefined,\n  isTitle,\n  onClick = () => null,\n  label = '',\n  color = null,\n  addRef,\n  childIndex,\n  trailingSlash,\n  onKeyDown = () => null,\n  ...rest\n}: DSBreadcrumbItemPropsT): React.ReactElement {\n  return (\n    <StyledCrumbWrapper\n      aria-current={active ? 'page' : undefined}\n      data-testid=\"breadcrumb-item-container\"\n      isTitle={isTitle}\n      trailingSlash={trailingSlash}\n      {...rest}\n    >\n      <StyledLink\n        as={as}\n        href={href}\n        onClick={onClick}\n        ref={addRef}\n        tabIndex={0}\n        isActive={active}\n        onKeyDown={(e: React.KeyboardEvent) =>\n          onKeyDown(e, childIndex, onClick)\n        }\n        isTitle={isTitle}\n        color={color}\n      >\n        {label}\n      </StyledLink>\n    </StyledCrumbWrapper>\n  );\n}\n\nconst props = {\n  /** inject props to wrapper */\n  containerComponent: PropTypes.string.description('inject props to wrapper'),\n  /** render as any html node */\n  as: PropTypes.string.description('render as any html node'),\n  /** active item */\n  active: PropTypes.bool.description('active item'),\n  /** href link */\n  href: PropTypes.string.description('href link'),\n  /** on click handler */\n  onClick: PropTypes.func.description('on click handler'),\n  /** style item as title */\n  isTitle: PropTypes.bool.description('style item as title'),\n  /** add trailing slash */\n  trailingSlash: PropTypes.bool.description('add trailing slash'),\n  /** item label */\n  label: PropTypes.string.description('item label'),\n  /** link color */\n  color: PropTypes.string.description('link color'),\n};\n\nDSBreadcrumbItem.propTypes = props;\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\n\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BjB;AA1BN,0BAAoC;AAEpC,oBAA+C;AAE/C,SAAS,iBAAiB;AAAA,EACxB,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM;AAAA,KACf;AACL,GAA+C;AAC7C,SACE,4CAAC;AAAA,IACC,gBAAc,SAAS,SAAS;AAAA,IAChC,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEJ,sDAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW,CAAC,MACV,UAAU,GAAG,YAAY,OAAO;AAAA,MAElC;AAAA,MACA;AAAA,MAEC;AAAA,KACH;AAAA,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,oBAAoB,8BAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1E,IAAI,8BAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1D,QAAQ,8BAAU,KAAK,YAAY,aAAa;AAAA,EAEhD,MAAM,8BAAU,OAAO,YAAY,WAAW;AAAA,EAE9C,SAAS,8BAAU,KAAK,YAAY,kBAAkB;AAAA,EAEtD,SAAS,8BAAU,KAAK,YAAY,qBAAqB;AAAA,EAEzD,eAAe,8BAAU,KAAK,YAAY,oBAAoB;AAAA,EAE9D,OAAO,8BAAU,OAAO,YAAY,YAAY;AAAA,EAEhD,OAAO,8BAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AAE/B,MAAM,iCAA6B,8BAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
+  "sourcesContent": ["import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\nimport { StyledLink, StyledCrumbWrapper } from './styles';\n\nconst DSBreadcrumbItem = ({\n  active = false,\n  as = 'a',\n  href = undefined,\n  isTitle,\n  onClick = () => null,\n  label = '',\n  color = null,\n  addRef,\n  childIndex,\n  trailingSlash,\n  onKeyDown = () => null,\n  ...rest\n}: DSBreadcrumbItemPropsT): React.ReactElement => (\n  <StyledCrumbWrapper\n    aria-current={active ? 'page' : undefined}\n    data-testid=\"breadcrumb-item-container\"\n    isTitle={isTitle}\n    trailingSlash={trailingSlash}\n    {...rest}\n  >\n    <StyledLink\n      as={as}\n      href={href}\n      onClick={onClick}\n      ref={addRef}\n      tabIndex={0}\n      isActive={active}\n      onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex, onClick)}\n      isTitle={isTitle}\n      color={color}\n    >\n      {label}\n    </StyledLink>\n  </StyledCrumbWrapper>\n);\n\nconst props = {\n  /** inject props to wrapper */\n  containerComponent: PropTypes.string.description('inject props to wrapper'),\n  /** render as any html node */\n  as: PropTypes.string.description('render as any html node'),\n  /** active item */\n  active: PropTypes.bool.description('active item'),\n  /** href link */\n  href: PropTypes.string.description('href link'),\n  /** on click handler */\n  onClick: PropTypes.func.description('on click handler'),\n  /** style item as title */\n  isTitle: PropTypes.bool.description('style item as title'),\n  /** add trailing slash */\n  trailingSlash: PropTypes.bool.description('add trailing slash'),\n  /** item label */\n  label: PropTypes.string.description('item label'),\n  /** link color */\n  color: PropTypes.string.description('link color'),\n};\n\nDSBreadcrumbItem.propTypes = props;\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\n\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BnB;AAzBJ,0BAAoC;AAEpC,oBAA+C;AAE/C,MAAM,mBAAmB,CAAC;AAAA,EACxB,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM;AAAA,KACf;AACL,MACE,4CAAC;AAAA,EACC,gBAAc,SAAS,SAAS;AAAA,EAChC,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACC,GAAG;AAAA,EAEJ,sDAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW,CAAC,MAA2B,UAAU,GAAG,YAAY,OAAO;AAAA,IACvE;AAAA,IACA;AAAA,IAEC;AAAA,GACH;AAAA,CACF;AAGF,MAAM,QAAQ;AAAA,EAEZ,oBAAoB,8BAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1E,IAAI,8BAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1D,QAAQ,8BAAU,KAAK,YAAY,aAAa;AAAA,EAEhD,MAAM,8BAAU,OAAO,YAAY,WAAW;AAAA,EAE9C,SAAS,8BAAU,KAAK,YAAY,kBAAkB;AAAA,EAEtD,SAAS,8BAAU,KAAK,YAAY,qBAAqB;AAAA,EAEzD,eAAe,8BAAU,KAAK,YAAY,oBAAoB;AAAA,EAE9D,OAAO,8BAAU,OAAO,YAAY,YAAY;AAAA,EAEhD,OAAO,8BAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AAE/B,MAAM,iCAA6B,8BAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
   "names": []
 }

package/dist/cjs/hooks/useKeyboardNavigation.js

@@ -36,22 +36,19 @@ const useKeyboardNavigation = () => {
       componentsRef.current.push(ref);
     }
   }, []);
-  const onKeyDown = (0, import_react.useCallback)(
-    (e, componentRefIndex, callback) => {
-      if (e.key === "ArrowDown" && componentsRef.current[componentRefIndex + 1]) {
-        componentsRef.current[componentRefIndex + 1].focus();
-        e.preventDefault();
-      } else if (e.key === "ArrowUp" && componentRefIndex !== 0) {
-        componentsRef.current[componentRefIndex - 1].focus();
-        e.preventDefault();
-      } else if (e.key === "Enter") {
-        callback();
-      } else if (e.ctrlKey && e.altKey && e.key === " ") {
-        componentsRef.current[componentRefIndex].click();
-      }
-    },
-    []
-  );
+  const onKeyDown = (0, import_react.useCallback)((e, componentRefIndex, callback) => {
+    if (e.key === "ArrowDown" && componentsRef.current[componentRefIndex + 1]) {
+      componentsRef.current[componentRefIndex + 1].focus();
+      e.preventDefault();
+    } else if (e.key === "ArrowUp" && componentRefIndex !== 0) {
+      componentsRef.current[componentRefIndex - 1].focus();
+      e.preventDefault();
+    } else if (e.key === "Enter") {
+      callback();
+    } else if (e.ctrlKey && e.altKey && e.key === " ") {
+      componentsRef.current[componentRefIndex].click();
+    }
+  }, []);
   return [addRef, onKeyDown];
 };
 //# sourceMappingURL=useKeyboardNavigation.js.map

package/dist/cjs/hooks/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useKeyboardNavigation.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useRef, useCallback } from 'react';\n\nexport const useKeyboardNavigation = () => {\n  const componentsRef = useRef<HTMLAnchorElement[]>([]);\n\n  const addRef = useCallback((ref: HTMLAnchorElement) => {\n    if (ref && !componentsRef.current.includes(ref)) {\n      componentsRef.current.push(ref);\n    }\n  }, []);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent, componentRefIndex, callback) => {\n      if (\n        e.key === 'ArrowDown' &&\n        componentsRef.current[componentRefIndex + 1]\n      ) {\n        componentsRef.current[componentRefIndex + 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'ArrowUp' && componentRefIndex !== 0) {\n        componentsRef.current[componentRefIndex - 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'Enter') {\n        callback();\n      } else if (e.ctrlKey && e.altKey && e.key === ' ') {\n        componentsRef.current[componentRefIndex].click();\n      }\n    },\n    [],\n  );\n\n  return [addRef, onKeyDown];\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAA2C;AAEpC,MAAM,wBAAwB,MAAM;AACzC,QAAM,oBAAgB,qBAA4B,CAAC,CAAC;AAEpD,QAAM,aAAS,0BAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,cAAc,QAAQ,SAAS,GAAG,GAAG;AAC/C,oBAAc,QAAQ,KAAK,GAAG;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAY;AAAA,IAChB,CAAC,GAAwB,mBAAmB,aAAa;AACvD,UACE,EAAE,QAAQ,eACV,cAAc,QAAQ,oBAAoB,IAC1C;AACA,sBAAc,QAAQ,oBAAoB,GAAG,MAAM;AACnD,UAAE,eAAe;AAAA,MACnB,WAAW,EAAE,QAAQ,aAAa,sBAAsB,GAAG;AACzD,sBAAc,QAAQ,oBAAoB,GAAG,MAAM;AACnD,UAAE,eAAe;AAAA,MACnB,WAAW,EAAE,QAAQ,SAAS;AAC5B,iBAAS;AAAA,MACX,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,KAAK;AACjD,sBAAc,QAAQ,mBAAmB,MAAM;AAAA,MACjD;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO,CAAC,QAAQ,SAAS;AAC3B;",
+  "sourcesContent": ["import type React from 'react';\nimport { useRef, useCallback } from 'react';\n\nexport const useKeyboardNavigation = () => {\n  const componentsRef = useRef<HTMLAnchorElement[]>([]);\n\n  const addRef = useCallback((ref: HTMLAnchorElement) => {\n    if (ref && !componentsRef.current.includes(ref)) {\n      componentsRef.current.push(ref);\n    }\n  }, []);\n\n  const onKeyDown = useCallback((e: React.KeyboardEvent, componentRefIndex, callback) => {\n    if (e.key === 'ArrowDown' && componentsRef.current[componentRefIndex + 1]) {\n      componentsRef.current[componentRefIndex + 1].focus();\n      e.preventDefault();\n    } else if (e.key === 'ArrowUp' && componentRefIndex !== 0) {\n      componentsRef.current[componentRefIndex - 1].focus();\n      e.preventDefault();\n    } else if (e.key === 'Enter') {\n      callback();\n    } else if (e.ctrlKey && e.altKey && e.key === ' ') {\n      componentsRef.current[componentRefIndex].click();\n    }\n  }, []);\n\n  return [addRef, onKeyDown];\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AAE7B,MAAM,wBAAwB,MAAM;AACzC,QAAM,oBAAgB,qBAA4B,CAAC,CAAC;AAEpD,QAAM,aAAS,0BAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,cAAc,QAAQ,SAAS,GAAG,GAAG;AAC/C,oBAAc,QAAQ,KAAK,GAAG;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAY,0BAAY,CAAC,GAAwB,mBAAmB,aAAa;AACrF,QAAI,EAAE,QAAQ,eAAe,cAAc,QAAQ,oBAAoB,IAAI;AACzE,oBAAc,QAAQ,oBAAoB,GAAG,MAAM;AACnD,QAAE,eAAe;AAAA,IACnB,WAAW,EAAE,QAAQ,aAAa,sBAAsB,GAAG;AACzD,oBAAc,QAAQ,oBAAoB,GAAG,MAAM;AACnD,QAAE,eAAe;AAAA,IACnB,WAAW,EAAE,QAAQ,SAAS;AAC5B,eAAS;AAAA,IACX,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,KAAK;AACjD,oBAAc,QAAQ,mBAAmB,MAAM;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,QAAQ,SAAS;AAC3B;",
   "names": []
 }

package/dist/cjs/index.d.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.d.tsx", "../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React from 'react';\nimport { htmlElements } from './DSBreadcrumb';\n\ntype SafeComponentsT = typeof htmlElements[number];\n\ntype SafeItemComponentT = 'a' | 'button' | 'div' | 'span' | 'p';\n\ninterface DSBreadcrumbPropsT {\n  containerProps?: unknown;\n  as?: SafeComponentsT;\n  label?: string;\n  isTitle?: boolean;\n  trailingSlash?: boolean;\n  children: React.ReactElement[];\n}\n\ninterface DSBreadcrumbItemPropsT {\n  active?: boolean;\n  isActive?: boolean;\n  as?: SafeItemComponentT;\n  href?: string;\n  isTitle?: boolean;\n  trailingSlash?: boolean;\n  addRef: (ref: HTMLElement) => void;\n  onKeyDown: (\n    e: React.KeyboardEvent,\n    componentRefIndex: number,\n    onClick: () => void,\n  ) => void;\n  onClick?: () => void;\n  label?: string;\n  childIndex: number;\n  color?: string | null;\n}\n\nexport {\n  DSBreadcrumbPropsT,\n  DSBreadcrumbItemPropsT,\n  SafeComponentsT,\n  SafeItemComponentT,\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "sourcesContent": ["import type React from 'react';\nimport type { htmlElements } from './DSBreadcrumb';\n\ntype SafeComponentsT = typeof htmlElements[number];\n\ntype SafeItemComponentT = 'a' | 'button' | 'div' | 'span' | 'p';\n\ninterface DSBreadcrumbPropsT {\n  containerProps?: unknown;\n  as?: SafeComponentsT;\n  label?: string;\n  isTitle?: boolean;\n  trailingSlash?: boolean;\n  children: React.ReactElement[];\n}\n\ninterface DSBreadcrumbItemPropsT {\n  active?: boolean;\n  isActive?: boolean;\n  as?: SafeItemComponentT;\n  href?: string;\n  isTitle?: boolean;\n  trailingSlash?: boolean;\n  addRef: (ref: HTMLElement) => void;\n  onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: () => void) => void;\n  onClick?: () => void;\n  label?: string;\n  childIndex: number;\n  color?: string | null;\n}\n\nexport type { DSBreadcrumbPropsT, DSBreadcrumbItemPropsT, SafeComponentsT, SafeItemComponentT };\n", "import * as React from 'react';\nexport { React };\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;ACAA,YAAuB;",
   "names": []
 }

package/dist/esm/DSBreadcrumb.js

@@ -52,9 +52,7 @@ const props = {
     "Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title"
   ),
   label: PropTypes.string.description("breadcrumb label"),
-  children: PropTypes.arrayOf(PropTypes.element).isRequired.description(
-    "Container items to wrap"
-  )
+  children: PropTypes.arrayOf(PropTypes.element).isRequired.description("Container items to wrap")
 };
 DSBreadcrumb.propTypes = props;
 DSBreadcrumb.displayName = "DSBreadcrumb";

package/dist/esm/DSBreadcrumb.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSBreadcrumb.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { cloneElement, useMemo } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport DSBreadcrumbItem from './DSBreadcrumbItem';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\nimport type { DSBreadcrumbPropsT } from './index.d';\nimport { StyledContainer, StyledList } from './styles';\n\nconst htmlElements = ['nav', 'div', 'header', 'footer', 'main'] as const;\n\nconst DSBreadcrumb = ({\n  containerProps = {},\n  as = 'nav',\n  label = 'Breadcrumb',\n  isTitle = false,\n  children,\n  trailingSlash = true,\n  ...rest\n}: DSBreadcrumbPropsT): React.ReactElement => {\n  const [addRef, onKeyDown] = useKeyboardNavigation();\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  return (\n    <StyledContainer\n      aria-label={label}\n      data-testid=\"breadcrumb-nav-container\"\n      {...rest}\n      {...containerProps}\n      as={safeElement}\n    >\n      <StyledList data-testid=\"list-container\">\n        {React.Children.map(children, (child: React.ReactElement, childIndex) =>\n          childIndex < children.length - 1\n            ? cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n              })\n            : cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n                trailingSlash,\n                isTitle,\n              }),\n        )}\n      </StyledList>\n    </StyledContainer>\n  );\n};\n\nDSBreadcrumb.Item = DSBreadcrumbItem;\n\nconst props = {\n  /** props injected to breadcrumb wrapper */\n  containerProps: PropTypes.object.description('props injected to breadcrumb wrapper'),\n  /**\n   * Type of element you want the main container to be:\n   * 'nav', 'div', 'header', 'footer', 'main'\n   */\n  as: PropTypes.string.description(\n    \"Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'\",\n  ),\n  /**\n   * Whether to show the last element of the breadcrumb as a title\n   * Also removes trailing slash to show last element as title\n   */\n  isTitle: PropTypes.bool.description(\n    'Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title',\n  ),\n  /** breadcrumb label */\n  label: PropTypes.string.description('breadcrumb label'),\n  /**\n   * Container items to wrap\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description(\n    'Container items to wrap',\n  ),\n};\n\nDSBreadcrumb.propTypes = props;\nDSBreadcrumb.displayName = 'DSBreadcrumb';\n\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC8BjB;AA9BN,OAAOA,UAAS,cAAc,eAAe;AAC7C,SAAS,WAAW,gBAAgB;AACpC,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAEtC,SAAS,iBAAiB,kBAAkB;AAE5C,MAAM,eAAe,CAAC,OAAO,OAAO,UAAU,UAAU,MAAM;AAE9D,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,KACb;AACL,MAA8C;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,sBAAsB;AAElD,QAAM,cAAc,QAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,SACE,oBAAC;AAAA,IACC,cAAY;AAAA,IACZ,eAAY;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACJ,IAAI;AAAA,IAEJ,8BAAC;AAAA,MAAW,eAAY;AAAA,MACrB,UAAAA,OAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,IAC3B,aAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC,IACD,aAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACP;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,aAAa,OAAO;AAEpB,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,sCAAsC;AAAA,EAKnF,IAAI,UAAU,OAAO;AAAA,IACnB;AAAA,EACF;AAAA,EAKA,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAItD,UAAU,UAAU,QAAQ,UAAU,OAAO,EAAE,WAAW;AAAA,IACxD;AAAA,EACF;AACF;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAE3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { cloneElement, useMemo } from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport DSBreadcrumbItem from './DSBreadcrumbItem';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation';\nimport type { DSBreadcrumbPropsT } from './index.d';\nimport { StyledContainer, StyledList } from './styles';\n\nconst htmlElements = ['nav', 'div', 'header', 'footer', 'main'] as const;\n\nconst DSBreadcrumb = ({\n  containerProps = {},\n  as = 'nav',\n  label = 'Breadcrumb',\n  isTitle = false,\n  children,\n  trailingSlash = true,\n  ...rest\n}: DSBreadcrumbPropsT): React.ReactElement => {\n  const [addRef, onKeyDown] = useKeyboardNavigation();\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  return (\n    <StyledContainer\n      aria-label={label}\n      data-testid=\"breadcrumb-nav-container\"\n      {...rest}\n      {...containerProps}\n      as={safeElement}\n    >\n      <StyledList data-testid=\"list-container\">\n        {React.Children.map(children, (child: React.ReactElement, childIndex) =>\n          childIndex < children.length - 1\n            ? cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n              })\n            : cloneElement(child, {\n                childIndex,\n                addRef,\n                onKeyDown,\n                trailingSlash,\n                isTitle,\n              }),\n        )}\n      </StyledList>\n    </StyledContainer>\n  );\n};\n\nDSBreadcrumb.Item = DSBreadcrumbItem;\n\nconst props = {\n  /** props injected to breadcrumb wrapper */\n  containerProps: PropTypes.object.description('props injected to breadcrumb wrapper'),\n  /**\n   * Type of element you want the main container to be:\n   * 'nav', 'div', 'header', 'footer', 'main'\n   */\n  as: PropTypes.string.description(\n    \"Type of element you want the main container to be: 'nav', 'div', 'header', 'footer', 'main'\",\n  ),\n  /**\n   * Whether to show the last element of the breadcrumb as a title\n   * Also removes trailing slash to show last element as title\n   */\n  isTitle: PropTypes.bool.description(\n    'Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title',\n  ),\n  /** breadcrumb label */\n  label: PropTypes.string.description('breadcrumb label'),\n  /**\n   * Container items to wrap\n   */\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Container items to wrap'),\n};\n\nDSBreadcrumb.propTypes = props;\nDSBreadcrumb.displayName = 'DSBreadcrumb';\n\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC8BjB;AA9BN,OAAOA,UAAS,cAAc,eAAe;AAC7C,SAAS,WAAW,gBAAgB;AACpC,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAEtC,SAAS,iBAAiB,kBAAkB;AAE5C,MAAM,eAAe,CAAC,OAAO,OAAO,UAAU,UAAU,MAAM;AAE9D,MAAM,eAAe,CAAC;AAAA,EACpB,iBAAiB,CAAC;AAAA,EAClB,KAAK;AAAA,EACL,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA,gBAAgB;AAAA,KACb;AACL,MAA8C;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,sBAAsB;AAElD,QAAM,cAAc,QAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,SACE,oBAAC;AAAA,IACC,cAAY;AAAA,IACZ,eAAY;AAAA,IACX,GAAG;AAAA,IACH,GAAG;AAAA,IACJ,IAAI;AAAA,IAEJ,8BAAC;AAAA,MAAW,eAAY;AAAA,MACrB,UAAAA,OAAM,SAAS;AAAA,QAAI;AAAA,QAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,IAC3B,aAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC,IACD,aAAa,OAAO;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QACF,CAAC;AAAA,MACP;AAAA,KACF;AAAA,GACF;AAEJ;AAEA,aAAa,OAAO;AAEpB,MAAM,QAAQ;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,sCAAsC;AAAA,EAKnF,IAAI,UAAU,OAAO;AAAA,IACnB;AAAA,EACF;AAAA,EAKA,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA,EAEA,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA,EAItD,UAAU,UAAU,QAAQ,UAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,YAAY;AACzB,aAAa,cAAc;AAE3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
   "names": ["React"]
 }

package/dist/esm/DSBreadcrumbItem.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { PropTypes, describe } from "@elliemae/ds-utilities";
 import { StyledLink, StyledCrumbWrapper } from "./styles";
-function DSBreadcrumbItem({
+const DSBreadcrumbItem = ({
   active = false,
   as = "a",
   href = void 0,
@@ -15,27 +15,25 @@ function DSBreadcrumbItem({
   trailingSlash,
   onKeyDown = () => null,
   ...rest
-}) {
-  return /* @__PURE__ */ jsx(StyledCrumbWrapper, {
-    "aria-current": active ? "page" : void 0,
-    "data-testid": "breadcrumb-item-container",
+}) => /* @__PURE__ */ jsx(StyledCrumbWrapper, {
+  "aria-current": active ? "page" : void 0,
+  "data-testid": "breadcrumb-item-container",
+  isTitle,
+  trailingSlash,
+  ...rest,
+  children: /* @__PURE__ */ jsx(StyledLink, {
+    as,
+    href,
+    onClick,
+    ref: addRef,
+    tabIndex: 0,
+    isActive: active,
+    onKeyDown: (e) => onKeyDown(e, childIndex, onClick),
     isTitle,
-    trailingSlash,
-    ...rest,
-    children: /* @__PURE__ */ jsx(StyledLink, {
-      as,
-      href,
-      onClick,
-      ref: addRef,
-      tabIndex: 0,
-      isActive: active,
-      onKeyDown: (e) => onKeyDown(e, childIndex, onClick),
-      isTitle,
-      color,
-      children: label
-    })
-  });
-}
+    color,
+    children: label
+  })
+});
 const props = {
   containerComponent: PropTypes.string.description("inject props to wrapper"),
   as: PropTypes.string.description("render as any html node"),

package/dist/esm/DSBreadcrumbItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/DSBreadcrumbItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\nimport { StyledLink, StyledCrumbWrapper } from './styles';\n\nfunction DSBreadcrumbItem({\n  active = false,\n  as = 'a',\n  href = undefined,\n  isTitle,\n  onClick = () => null,\n  label = '',\n  color = null,\n  addRef,\n  childIndex,\n  trailingSlash,\n  onKeyDown = () => null,\n  ...rest\n}: DSBreadcrumbItemPropsT): React.ReactElement {\n  return (\n    <StyledCrumbWrapper\n      aria-current={active ? 'page' : undefined}\n      data-testid=\"breadcrumb-item-container\"\n      isTitle={isTitle}\n      trailingSlash={trailingSlash}\n      {...rest}\n    >\n      <StyledLink\n        as={as}\n        href={href}\n        onClick={onClick}\n        ref={addRef}\n        tabIndex={0}\n        isActive={active}\n        onKeyDown={(e: React.KeyboardEvent) =>\n          onKeyDown(e, childIndex, onClick)\n        }\n        isTitle={isTitle}\n        color={color}\n      >\n        {label}\n      </StyledLink>\n    </StyledCrumbWrapper>\n  );\n}\n\nconst props = {\n  /** inject props to wrapper */\n  containerComponent: PropTypes.string.description('inject props to wrapper'),\n  /** render as any html node */\n  as: PropTypes.string.description('render as any html node'),\n  /** active item */\n  active: PropTypes.bool.description('active item'),\n  /** href link */\n  href: PropTypes.string.description('href link'),\n  /** on click handler */\n  onClick: PropTypes.func.description('on click handler'),\n  /** style item as title */\n  isTitle: PropTypes.bool.description('style item as title'),\n  /** add trailing slash */\n  trailingSlash: PropTypes.bool.description('add trailing slash'),\n  /** item label */\n  label: PropTypes.string.description('item label'),\n  /** link color */\n  color: PropTypes.string.description('link color'),\n};\n\nDSBreadcrumbItem.propTypes = props;\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\n\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n"],
-  "mappings": "AAAA,YAAY,WAAW;AC2BjB;AA1BN,SAAS,WAAW,gBAAgB;AAEpC,SAAS,YAAY,0BAA0B;AAE/C,SAAS,iBAAiB;AAAA,EACxB,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM;AAAA,KACf;AACL,GAA+C;AAC7C,SACE,oBAAC;AAAA,IACC,gBAAc,SAAS,SAAS;AAAA,IAChC,eAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACC,GAAG;AAAA,IAEJ,8BAAC;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,UAAU;AAAA,MACV,UAAU;AAAA,MACV,WAAW,CAAC,MACV,UAAU,GAAG,YAAY,OAAO;AAAA,MAElC;AAAA,MACA;AAAA,MAEC;AAAA,KACH;AAAA,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EAEZ,oBAAoB,UAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1E,IAAI,UAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1D,QAAQ,UAAU,KAAK,YAAY,aAAa;AAAA,EAEhD,MAAM,UAAU,OAAO,YAAY,WAAW;AAAA,EAE9C,SAAS,UAAU,KAAK,YAAY,kBAAkB;AAAA,EAEtD,SAAS,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAEzD,eAAe,UAAU,KAAK,YAAY,oBAAoB;AAAA,EAE9D,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAEhD,OAAO,UAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AAE/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { PropTypes, describe } from '@elliemae/ds-utilities';\nimport type { DSBreadcrumbItemPropsT } from './index.d';\nimport { StyledLink, StyledCrumbWrapper } from './styles';\n\nconst DSBreadcrumbItem = ({\n  active = false,\n  as = 'a',\n  href = undefined,\n  isTitle,\n  onClick = () => null,\n  label = '',\n  color = null,\n  addRef,\n  childIndex,\n  trailingSlash,\n  onKeyDown = () => null,\n  ...rest\n}: DSBreadcrumbItemPropsT): React.ReactElement => (\n  <StyledCrumbWrapper\n    aria-current={active ? 'page' : undefined}\n    data-testid=\"breadcrumb-item-container\"\n    isTitle={isTitle}\n    trailingSlash={trailingSlash}\n    {...rest}\n  >\n    <StyledLink\n      as={as}\n      href={href}\n      onClick={onClick}\n      ref={addRef}\n      tabIndex={0}\n      isActive={active}\n      onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex, onClick)}\n      isTitle={isTitle}\n      color={color}\n    >\n      {label}\n    </StyledLink>\n  </StyledCrumbWrapper>\n);\n\nconst props = {\n  /** inject props to wrapper */\n  containerComponent: PropTypes.string.description('inject props to wrapper'),\n  /** render as any html node */\n  as: PropTypes.string.description('render as any html node'),\n  /** active item */\n  active: PropTypes.bool.description('active item'),\n  /** href link */\n  href: PropTypes.string.description('href link'),\n  /** on click handler */\n  onClick: PropTypes.func.description('on click handler'),\n  /** style item as title */\n  isTitle: PropTypes.bool.description('style item as title'),\n  /** add trailing slash */\n  trailingSlash: PropTypes.bool.description('add trailing slash'),\n  /** item label */\n  label: PropTypes.string.description('item label'),\n  /** link color */\n  color: PropTypes.string.description('link color'),\n};\n\nDSBreadcrumbItem.propTypes = props;\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\n\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0BnB;AAzBJ,SAAS,WAAW,gBAAgB;AAEpC,SAAS,YAAY,0BAA0B;AAE/C,MAAM,mBAAmB,CAAC;AAAA,EACxB,SAAS;AAAA,EACT,KAAK;AAAA,EACL,OAAO;AAAA,EACP;AAAA,EACA,UAAU,MAAM;AAAA,EAChB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY,MAAM;AAAA,KACf;AACL,MACE,oBAAC;AAAA,EACC,gBAAc,SAAS,SAAS;AAAA,EAChC,eAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACC,GAAG;AAAA,EAEJ,8BAAC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW,CAAC,MAA2B,UAAU,GAAG,YAAY,OAAO;AAAA,IACvE;AAAA,IACA;AAAA,IAEC;AAAA,GACH;AAAA,CACF;AAGF,MAAM,QAAQ;AAAA,EAEZ,oBAAoB,UAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1E,IAAI,UAAU,OAAO,YAAY,yBAAyB;AAAA,EAE1D,QAAQ,UAAU,KAAK,YAAY,aAAa;AAAA,EAEhD,MAAM,UAAU,OAAO,YAAY,WAAW;AAAA,EAE9C,SAAS,UAAU,KAAK,YAAY,kBAAkB;AAAA,EAEtD,SAAS,UAAU,KAAK,YAAY,qBAAqB;AAAA,EAEzD,eAAe,UAAU,KAAK,YAAY,oBAAoB;AAAA,EAE9D,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA,EAEhD,OAAO,UAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,YAAY;AAC7B,iBAAiB,cAAc;AAE/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
   "names": []
 }

package/dist/esm/hooks/useKeyboardNavigation.js

@@ -7,22 +7,19 @@ const useKeyboardNavigation = () => {
       componentsRef.current.push(ref);
     }
   }, []);
-  const onKeyDown = useCallback(
-    (e, componentRefIndex, callback) => {
-      if (e.key === "ArrowDown" && componentsRef.current[componentRefIndex + 1]) {
-        componentsRef.current[componentRefIndex + 1].focus();
-        e.preventDefault();
-      } else if (e.key === "ArrowUp" && componentRefIndex !== 0) {
-        componentsRef.current[componentRefIndex - 1].focus();
-        e.preventDefault();
-      } else if (e.key === "Enter") {
-        callback();
-      } else if (e.ctrlKey && e.altKey && e.key === " ") {
-        componentsRef.current[componentRefIndex].click();
-      }
-    },
-    []
-  );
+  const onKeyDown = useCallback((e, componentRefIndex, callback) => {
+    if (e.key === "ArrowDown" && componentsRef.current[componentRefIndex + 1]) {
+      componentsRef.current[componentRefIndex + 1].focus();
+      e.preventDefault();
+    } else if (e.key === "ArrowUp" && componentRefIndex !== 0) {
+      componentsRef.current[componentRefIndex - 1].focus();
+      e.preventDefault();
+    } else if (e.key === "Enter") {
+      callback();
+    } else if (e.ctrlKey && e.altKey && e.key === " ") {
+      componentsRef.current[componentRefIndex].click();
+    }
+  }, []);
   return [addRef, onKeyDown];
 };
 export {

package/dist/esm/hooks/useKeyboardNavigation.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/hooks/useKeyboardNavigation.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useCallback } from 'react';\n\nexport const useKeyboardNavigation = () => {\n  const componentsRef = useRef<HTMLAnchorElement[]>([]);\n\n  const addRef = useCallback((ref: HTMLAnchorElement) => {\n    if (ref && !componentsRef.current.includes(ref)) {\n      componentsRef.current.push(ref);\n    }\n  }, []);\n\n  const onKeyDown = useCallback(\n    (e: React.KeyboardEvent, componentRefIndex, callback) => {\n      if (\n        e.key === 'ArrowDown' &&\n        componentsRef.current[componentRefIndex + 1]\n      ) {\n        componentsRef.current[componentRefIndex + 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'ArrowUp' && componentRefIndex !== 0) {\n        componentsRef.current[componentRefIndex - 1].focus();\n        e.preventDefault();\n      } else if (e.key === 'Enter') {\n        callback();\n      } else if (e.ctrlKey && e.altKey && e.key === ' ') {\n        componentsRef.current[componentRefIndex].click();\n      }\n    },\n    [],\n  );\n\n  return [addRef, onKeyDown];\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAgB,QAAQ,mBAAmB;AAEpC,MAAM,wBAAwB,MAAM;AACzC,QAAM,gBAAgB,OAA4B,CAAC,CAAC;AAEpD,QAAM,SAAS,YAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,cAAc,QAAQ,SAAS,GAAG,GAAG;AAC/C,oBAAc,QAAQ,KAAK,GAAG;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY;AAAA,IAChB,CAAC,GAAwB,mBAAmB,aAAa;AACvD,UACE,EAAE,QAAQ,eACV,cAAc,QAAQ,oBAAoB,IAC1C;AACA,sBAAc,QAAQ,oBAAoB,GAAG,MAAM;AACnD,UAAE,eAAe;AAAA,MACnB,WAAW,EAAE,QAAQ,aAAa,sBAAsB,GAAG;AACzD,sBAAc,QAAQ,oBAAoB,GAAG,MAAM;AACnD,UAAE,eAAe;AAAA,MACnB,WAAW,EAAE,QAAQ,SAAS;AAC5B,iBAAS;AAAA,MACX,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,KAAK;AACjD,sBAAc,QAAQ,mBAAmB,MAAM;AAAA,MACjD;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO,CAAC,QAAQ,SAAS;AAC3B;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useRef, useCallback } from 'react';\n\nexport const useKeyboardNavigation = () => {\n  const componentsRef = useRef<HTMLAnchorElement[]>([]);\n\n  const addRef = useCallback((ref: HTMLAnchorElement) => {\n    if (ref && !componentsRef.current.includes(ref)) {\n      componentsRef.current.push(ref);\n    }\n  }, []);\n\n  const onKeyDown = useCallback((e: React.KeyboardEvent, componentRefIndex, callback) => {\n    if (e.key === 'ArrowDown' && componentsRef.current[componentRefIndex + 1]) {\n      componentsRef.current[componentRefIndex + 1].focus();\n      e.preventDefault();\n    } else if (e.key === 'ArrowUp' && componentRefIndex !== 0) {\n      componentsRef.current[componentRefIndex - 1].focus();\n      e.preventDefault();\n    } else if (e.key === 'Enter') {\n      callback();\n    } else if (e.ctrlKey && e.altKey && e.key === ' ') {\n      componentsRef.current[componentRefIndex].click();\n    }\n  }, []);\n\n  return [addRef, onKeyDown];\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,mBAAmB;AAE7B,MAAM,wBAAwB,MAAM;AACzC,QAAM,gBAAgB,OAA4B,CAAC,CAAC;AAEpD,QAAM,SAAS,YAAY,CAAC,QAA2B;AACrD,QAAI,OAAO,CAAC,cAAc,QAAQ,SAAS,GAAG,GAAG;AAC/C,oBAAc,QAAQ,KAAK,GAAG;AAAA,IAChC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,YAAY,YAAY,CAAC,GAAwB,mBAAmB,aAAa;AACrF,QAAI,EAAE,QAAQ,eAAe,cAAc,QAAQ,oBAAoB,IAAI;AACzE,oBAAc,QAAQ,oBAAoB,GAAG,MAAM;AACnD,QAAE,eAAe;AAAA,IACnB,WAAW,EAAE,QAAQ,aAAa,sBAAsB,GAAG;AACzD,oBAAc,QAAQ,oBAAoB,GAAG,MAAM;AACnD,QAAE,eAAe;AAAA,IACnB,WAAW,EAAE,QAAQ,SAAS;AAC5B,eAAS;AAAA,IACX,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,QAAQ,KAAK;AACjD,oBAAc,QAAQ,mBAAmB,MAAM;AAAA,IACjD;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO,CAAC,QAAQ,SAAS;AAC3B;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-breadcrumb",
-  "version": "3.12.0-next.0",
+  "version": "3.12.0-next.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Breadcrumb",
   "files": [
@@ -51,8 +51,8 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-system": "3.12.0-next.0",
-    "@elliemae/ds-utilities": "3.12.0-next.0"
+    "@elliemae/ds-system": "3.12.0-next.1",
+    "@elliemae/ds-utilities": "3.12.0-next.1"
   },
   "devDependencies": {
     "@elliemae/pui-theme": "~2.6.0",