@elliemae/ds-breadcrumb 3.80.0-next.41 → 3.80.0-next.42

package/dist/esm/DSBreadcrumb.js

@@ -1,74 +1,62 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { PropTypes, describe, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { describe, useMemoMergePropsWithDefault, useOwnerProps } from "@elliemae/ds-props-helpers";
 import React2, { cloneElement, useMemo } from "react";
 import DSBreadcrumbItem from "./DSBreadcrumbItem.js";
 import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation.js";
-import { defaultProps } from "./react-desc-prop-types.js";
+import { defaultProps, DSBreadcrumbPropTypesSchema } from "./react-desc-prop-types.js";
 import { StyledContainer, StyledList } from "./styles.js";
 const htmlElements = ["nav", "div"];
-const NavContainer = (props2) => {
-  const { label, containerProps, as, children, ...rest } = props2;
+const NavContainer = (props) => {
+  const { label, containerProps, as, children, ownerPropsConfig, ...rest } = props;
   return (
     // @ts-expect-error - styled components are not correctly supporting the alias in typescript
-    /* @__PURE__ */ jsx(StyledContainer, { "aria-label": label, ...rest, ...containerProps, as, children: /* @__PURE__ */ jsx(StyledList, { children }) })
+    /* @__PURE__ */ jsx(StyledContainer, { "aria-label": label, ...rest, ...containerProps, as, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(StyledList, { ...ownerPropsConfig, children }) })
   );
 };
-const DivContainer = (props2) => {
-  const { label, containerProps, as, children, ...rest } = props2;
+const DivContainer = (props) => {
+  const { label, containerProps, as, children, ownerPropsConfig, ...rest } = props;
   return (
     // @ts-expect-error - styled components are not correctly supporting the alias in typescript
-    /* @__PURE__ */ jsx(StyledContainer, { ...rest, ...containerProps, as, children: /* @__PURE__ */ jsx(StyledList, { "aria-label": label, children }) })
+    /* @__PURE__ */ jsx(StyledContainer, { ...rest, ...containerProps, as, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(StyledList, { "aria-label": label, ...ownerPropsConfig, children }) })
   );
 };
-const DSBreadcrumb = (props2) => {
-  const propsWithDefaults = useMemoMergePropsWithDefault(props2, defaultProps);
+const DSBreadcrumb = (props) => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultProps);
   const { containerProps, as, label, trailingSlash, isTitle, children, ...rest } = propsWithDefaults;
   const [addRef, onKeyDown] = useKeyboardNavigation({ isTitle });
+  const ownerPropsConfig = useOwnerProps(propsWithDefaults);
   const safeElement = useMemo(() => htmlElements.indexOf(as) > -1 ? as : "nav", [as]);
   const Container = as === "nav" ? NavContainer : DivContainer;
-  return /* @__PURE__ */ jsx(Container, { label, ...rest, containerProps, as: safeElement, children: React2.Children.map(
-    children,
-    (child, childIndex) => childIndex < children.length - 1 ? cloneElement(child, {
-      childIndex,
-      addRef,
-      onKeyDown
-    }) : cloneElement(child, {
-      childIndex,
-      addRef,
-      onKeyDown,
-      trailingSlash,
-      isTitle
-    })
-  ) });
+  return /* @__PURE__ */ jsx(
+    Container,
+    {
+      label,
+      ...rest,
+      containerProps,
+      as: safeElement,
+      ownerPropsConfig,
+      children: React2.Children.map(
+        children,
+        (child, childIndex) => childIndex < children.length - 1 ? cloneElement(child, {
+          childIndex,
+          addRef,
+          onKeyDown
+        }) : cloneElement(child, {
+          childIndex,
+          addRef,
+          onKeyDown,
+          trailingSlash,
+          isTitle
+        })
+      )
+    }
+  );
 };
 DSBreadcrumb.Item = DSBreadcrumbItem;
-const props = {
-  /** props injected to breadcrumb wrapper */
-  containerProps: PropTypes.object.description("props injected to breadcrumb wrapper"),
-  /**
-   * Type of element you want the main container to be:
-   * 'nav', 'div'
-   */
-  as: PropTypes.oneOf(["nav", "div"]).description("Type of element you want the main container to be: 'nav' or 'div'. Defaults to 'nav'.").defaultValue("nav"),
-  /**
-   * Whether to show the last element of the breadcrumb as a title
-   * Also removes trailing slash to show last element as title
-   */
-  isTitle: PropTypes.bool.description(
-    "Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title"
-  ),
-  /** breadcrumb label */
-  label: PropTypes.string.description("breadcrumb label"),
-  /**
-   * Container items to wrap
-   */
-  trailingSlash: PropTypes.bool.description("Whether to show trailing slash on all items except the last one").defaultValue(true),
-  children: PropTypes.arrayOf(PropTypes.element).isRequired.description("Container items to wrap")
-};
 DSBreadcrumb.displayName = "DSBreadcrumb";
 const DSBreadcrumbWithSchema = describe(DSBreadcrumb);
-DSBreadcrumbWithSchema.propTypes = props;
+DSBreadcrumbWithSchema.propTypes = DSBreadcrumbPropTypesSchema;
 var DSBreadcrumb_default = DSBreadcrumb;
 export {
   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 { PropTypes, describe, useMemoMergePropsWithDefault, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport React, { cloneElement, useMemo } from 'react';\nimport DSBreadcrumbItem from './DSBreadcrumbItem.js';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';\nimport type { DSBreadcrumbT } from './react-desc-prop-types.js';\nimport { defaultProps } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledList } from './styles.js';\n\nconst htmlElements = ['nav', 'div'] as const;\n\ntype ContainerProps = Omit<DSBreadcrumbT.InternalProps, 'isTitle' | 'trailingSlash'>;\n\nconst NavContainer = (props: ContainerProps) => {\n  const { label, containerProps, as, children, ...rest } = props;\n  return (\n    // @ts-expect-error - styled components are not correctly supporting the alias in typescript\n    <StyledContainer aria-label={label} {...rest} {...containerProps} as={as}>\n      <StyledList>{children}</StyledList>\n    </StyledContainer>\n  );\n};\n\nconst DivContainer = (props: ContainerProps) => {\n  const { label, containerProps, as, children, ...rest } = props;\n  return (\n    // @ts-expect-error - styled components are not correctly supporting the alias in typescript\n    <StyledContainer {...rest} {...containerProps} as={as}>\n      <StyledList aria-label={label}>{children}</StyledList>\n    </StyledContainer>\n  );\n};\n\nconst DSBreadcrumb = (props: DSBreadcrumbT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbT.InternalProps>(props, defaultProps);\n  const { containerProps, as, label, trailingSlash, isTitle, children, ...rest } = propsWithDefaults;\n  const [addRef, onKeyDown] = useKeyboardNavigation({ isTitle });\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  const Container = as === 'nav' ? NavContainer : DivContainer;\n\n  return (\n    <Container label={label} {...rest} containerProps={containerProps} as={safeElement}>\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    </Container>\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'\n   */\n  as: PropTypes.oneOf(['nav', 'div'])\n    .description(\"Type of element you want the main container to be: 'nav' or 'div'. Defaults to 'nav'.\")\n    .defaultValue('nav'),\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  trailingSlash: PropTypes.bool\n    .description('Whether to show trailing slash on all items except the last one')\n    .defaultValue(true),\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Container items to wrap'),\n};\n\nDSBreadcrumb.displayName = 'DSBreadcrumb';\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = props as ValidationMap<unknown>;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiBjB;AAjBN,SAAS,WAAW,UAAU,oCAAwD;AACtF,OAAOA,UAAS,cAAc,eAAe;AAC7C,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAEtC,SAAS,oBAAoB;AAC7B,SAAS,iBAAiB,kBAAkB;AAE5C,MAAM,eAAe,CAAC,OAAO,KAAK;AAIlC,MAAM,eAAe,CAACC,WAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,GAAG,KAAK,IAAIA;AACzD;AAAA;AAAA,IAEE,oBAAC,mBAAgB,cAAY,OAAQ,GAAG,MAAO,GAAG,gBAAgB,IAChE,8BAAC,cAAY,UAAS,GACxB;AAAA;AAEJ;AAEA,MAAM,eAAe,CAACA,WAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,GAAG,KAAK,IAAIA;AACzD;AAAA;AAAA,IAEE,oBAAC,mBAAiB,GAAG,MAAO,GAAG,gBAAgB,IAC7C,8BAAC,cAAW,cAAY,OAAQ,UAAS,GAC3C;AAAA;AAEJ;AAEA,MAAM,eAAe,CAACA,WAA+B;AACnD,QAAM,oBAAoB,6BAA0DA,QAAO,YAAY;AACvG,QAAM,EAAE,gBAAgB,IAAI,OAAO,eAAe,SAAS,UAAU,GAAG,KAAK,IAAI;AACjF,QAAM,CAAC,QAAQ,SAAS,IAAI,sBAAsB,EAAE,QAAQ,CAAC;AAE7D,QAAM,cAAc,QAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,QAAM,YAAY,OAAO,QAAQ,eAAe;AAEhD,SACE,oBAAC,aAAU,OAAe,GAAG,MAAM,gBAAgC,IAAI,aACpE,UAAAD,OAAM,SAAS;AAAA,IAAI;AAAA,IAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,IAC3B,aAAa,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,IACD,aAAa,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACP,GACF;AAEJ;AAEA,aAAa,OAAO;AAEpB,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,UAAU,OAAO,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnF,IAAI,UAAU,MAAM,CAAC,OAAO,KAAK,CAAC,EAC/B,YAAY,uFAAuF,EACnG,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA;AAAA,EAEA,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAItD,eAAe,UAAU,KACtB,YAAY,iEAAiE,EAC7E,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,QAAQ,UAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
-  "names": ["React", "props"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React, { cloneElement, useMemo } from 'react';\nimport DSBreadcrumbItem from './DSBreadcrumbItem.js';\nimport { useKeyboardNavigation } from './hooks/useKeyboardNavigation.js';\nimport type { DSBreadcrumbT } from './react-desc-prop-types.js';\nimport { defaultProps, DSBreadcrumbPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledContainer, StyledList } from './styles.js';\n\nconst htmlElements = ['nav', 'div'] as const;\n\ntype ContainerProps = Omit<DSBreadcrumbT.InternalProps, 'isTitle' | 'trailingSlash'> & {\n  ownerPropsConfig: ReturnType<typeof useOwnerProps<DSBreadcrumbT.InternalProps>>;\n};\n\nconst NavContainer = (props: ContainerProps) => {\n  const { label, containerProps, as, children, ownerPropsConfig, ...rest } = props;\n  return (\n    // @ts-expect-error - styled components are not correctly supporting the alias in typescript\n    <StyledContainer aria-label={label} {...rest} {...containerProps} as={as} {...ownerPropsConfig}>\n      <StyledList {...ownerPropsConfig}>{children}</StyledList>\n    </StyledContainer>\n  );\n};\n\nconst DivContainer = (props: ContainerProps) => {\n  const { label, containerProps, as, children, ownerPropsConfig, ...rest } = props;\n  return (\n    // @ts-expect-error - styled components are not correctly supporting the alias in typescript\n    <StyledContainer {...rest} {...containerProps} as={as} {...ownerPropsConfig}>\n      <StyledList aria-label={label} {...ownerPropsConfig}>\n        {children}\n      </StyledList>\n    </StyledContainer>\n  );\n};\n\nconst DSBreadcrumb = (props: DSBreadcrumbT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbT.InternalProps>(props, defaultProps);\n  const { containerProps, as, label, trailingSlash, isTitle, children, ...rest } = propsWithDefaults;\n  const [addRef, onKeyDown] = useKeyboardNavigation({ isTitle });\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults);\n\n  const safeElement = useMemo(() => (htmlElements.indexOf(as) > -1 ? as : 'nav'), [as]);\n\n  const Container = as === 'nav' ? NavContainer : DivContainer;\n\n  return (\n    <Container\n      label={label}\n      {...rest}\n      containerProps={containerProps}\n      as={safeElement}\n      ownerPropsConfig={ownerPropsConfig}\n    >\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    </Container>\n  );\n};\n\nDSBreadcrumb.Item = DSBreadcrumbItem;\n\nDSBreadcrumb.displayName = 'DSBreadcrumb';\nconst DSBreadcrumbWithSchema = describe(DSBreadcrumb);\nDSBreadcrumbWithSchema.propTypes = DSBreadcrumbPropTypesSchema;\n\nexport { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements };\nexport default DSBreadcrumb;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACmBjB;AAnBN,SAAS,UAAU,8BAA8B,qBAAqB;AACtE,OAAOA,UAAS,cAAc,eAAe;AAC7C,OAAO,sBAAsB;AAC7B,SAAS,6BAA6B;AAEtC,SAAS,cAAc,mCAAmC;AAC1D,SAAS,iBAAiB,kBAAkB;AAE5C,MAAM,eAAe,CAAC,OAAO,KAAK;AAMlC,MAAM,eAAe,CAAC,UAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,kBAAkB,GAAG,KAAK,IAAI;AAC3E;AAAA;AAAA,IAEE,oBAAC,mBAAgB,cAAY,OAAQ,GAAG,MAAO,GAAG,gBAAgB,IAAS,GAAG,kBAC5E,8BAAC,cAAY,GAAG,kBAAmB,UAAS,GAC9C;AAAA;AAEJ;AAEA,MAAM,eAAe,CAAC,UAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,kBAAkB,GAAG,KAAK,IAAI;AAC3E;AAAA;AAAA,IAEE,oBAAC,mBAAiB,GAAG,MAAO,GAAG,gBAAgB,IAAS,GAAG,kBACzD,8BAAC,cAAW,cAAY,OAAQ,GAAG,kBAChC,UACH,GACF;AAAA;AAEJ;AAEA,MAAM,eAAe,CAAC,UAA+B;AACnD,QAAM,oBAAoB,6BAA0D,OAAO,YAAY;AACvG,QAAM,EAAE,gBAAgB,IAAI,OAAO,eAAe,SAAS,UAAU,GAAG,KAAK,IAAI;AACjF,QAAM,CAAC,QAAQ,SAAS,IAAI,sBAAsB,EAAE,QAAQ,CAAC;AAC7D,QAAM,mBAAmB,cAAc,iBAAiB;AAExD,QAAM,cAAc,QAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,QAAM,YAAY,OAAO,QAAQ,eAAe;AAEhD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,IAAI;AAAA,MACJ;AAAA,MAEC,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;AAAA,EACF;AAEJ;AAEA,aAAa,OAAO;AAEpB,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
+  "names": ["React"]
 }

package/dist/esm/DSBreadcrumbItem.js

@@ -1,12 +1,13 @@
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-import { PropTypes, describe, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { describe, useMemoMergePropsWithDefault, useOwnerProps } from "@elliemae/ds-props-helpers";
 import React2 from "react";
-import { defaultItemProps } from "./react-desc-prop-types.js";
+import { defaultItemProps, DSBreadcrumbItemPropTypesSchema } from "./react-desc-prop-types.js";
 import { StyledCrumbWrapper, StyledLink } from "./styles.js";
-const DSBreadcrumbItem = (props2) => {
-  const propsWithDefaults = useMemoMergePropsWithDefault(props2, defaultItemProps);
+const DSBreadcrumbItem = (props) => {
+  const propsWithDefaults = useMemoMergePropsWithDefault(props, defaultItemProps);
   const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } = propsWithDefaults;
+  const ownerPropsConfig = useOwnerProps(propsWithDefaults);
   const ariaCurrent = React2.useMemo(() => {
     if (active) {
       return as === "button" || as === "span" ? "step" : "page";
@@ -21,7 +22,7 @@ const DSBreadcrumbItem = (props2) => {
     [isTitle, onClick]
   );
   const component = isTitle && active ? "span" : as;
-  return /* @__PURE__ */ jsx(StyledCrumbWrapper, { isTitle, trailingSlash, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(StyledCrumbWrapper, { isTitle, trailingSlash, ...ownerPropsConfig, children: /* @__PURE__ */ jsx(
     StyledLink,
     {
       variant: "link",
@@ -36,34 +37,14 @@ const DSBreadcrumbItem = (props2) => {
       innerRef: addRef,
       "aria-current": ariaCurrent,
       ...rest,
+      ...ownerPropsConfig,
       children: label
     }
   ) });
 };
-const props = {
-  /**
-   * Type of element you want the item to be:
-   * 'a', 'button'
-   */
-  as: PropTypes.oneOf(["a", "button"]).description('Type of element you want the item to be: "a" or "button". Defaults to "a"').defaultValue("a"),
-  /** active item */
-  active: PropTypes.bool.description("Active item"),
-  /** href link */
-  href: PropTypes.string.description("Href link"),
-  /** on click handler */
-  onClick: PropTypes.func.description("On click handler"),
-  /** style item as title */
-  isTitle: PropTypes.bool.description("Style item as title"),
-  /** add trailing slash */
-  trailingSlash: PropTypes.bool.description("Add trailing slash"),
-  /** item label */
-  label: PropTypes.string.description("Item label"),
-  /** link color */
-  color: PropTypes.string.description("Link color")
-};
 DSBreadcrumbItem.displayName = "DSBreadcrumbItem";
 const DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);
-DSBreadcrumbItemWithSchema.propTypes = props;
+DSBreadcrumbItemWithSchema.propTypes = DSBreadcrumbItemPropTypesSchema;
 var DSBreadcrumbItem_default = DSBreadcrumbItem;
 export {
   DSBreadcrumbItem,

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 { PropTypes, describe, useMemoMergePropsWithDefault, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\nimport { defaultItemProps } from './react-desc-prop-types.js';\nimport { StyledCrumbWrapper, StyledLink } from './styles.js';\n\nconst DSBreadcrumbItem = (props: DSBreadcrumbItemT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbItemT.InternalProps>(props, defaultItemProps);\n  const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } =\n    propsWithDefaults;\n\n  const ariaCurrent = React.useMemo(() => {\n    if (active) {\n      return as === 'button' || as === 'span' ? 'step' : 'page';\n    }\n    return undefined;\n  }, [active, as]);\n\n  const handleOnClick = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (isTitle) return;\n      onClick(e);\n    },\n    [isTitle, onClick],\n  );\n\n  // Determine the component type\n  // When isTitle=true. All non-current steps are links with its style. Active step can have aria-current. Active step has non-interactable behaviour and style.\n  // Active step can be SPAN\n  const component = isTitle && active ? 'span' : as;\n\n  return (\n    <StyledCrumbWrapper isTitle={isTitle} trailingSlash={trailingSlash}>\n      <StyledLink\n        variant=\"link\"\n        component={component}\n        href={href}\n        onClick={handleOnClick}\n        tabIndex={isTitle ? -1 : 0}\n        active={active}\n        onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex ?? -1, handleOnClick)}\n        isTitle={isTitle}\n        color={color}\n        innerRef={addRef}\n        aria-current={ariaCurrent}\n        {...rest}\n      >\n        {label}\n      </StyledLink>\n    </StyledCrumbWrapper>\n  );\n};\n\nconst props = {\n  /**\n   * Type of element you want the item to be:\n   * 'a', 'button'\n   */\n  as: PropTypes.oneOf(['a', 'button'])\n    .description('Type of element you want the item to be: \"a\" or \"button\". Defaults to \"a\"')\n    .defaultValue('a'),\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.displayName = 'DSBreadcrumbItem';\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = props as ValidationMap<unknown>;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiCjB;AAjCN,SAAS,WAAW,UAAU,oCAAwD;AACtF,OAAOA,YAAW;AAElB,SAAS,wBAAwB;AACjC,SAAS,oBAAoB,kBAAkB;AAE/C,MAAM,mBAAmB,CAACC,WAAmC;AAC3D,QAAM,oBAAoB,6BAA8DA,QAAO,gBAAgB;AAC/G,QAAM,EAAE,IAAI,QAAQ,MAAM,SAAS,WAAW,QAAQ,SAAS,eAAe,OAAO,YAAY,OAAO,GAAG,KAAK,IAC9G;AAEF,QAAM,cAAcD,OAAM,QAAQ,MAAM;AACtC,QAAI,QAAQ;AACV,aAAO,OAAO,YAAY,OAAO,SAAS,SAAS;AAAA,IACrD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEf,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,QAAS;AACb,cAAQ,CAAC;AAAA,IACX;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EACnB;AAKA,QAAM,YAAY,WAAW,SAAS,SAAS;AAE/C,SACE,oBAAC,sBAAmB,SAAkB,eACpC;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,UAAU,UAAU,KAAK;AAAA,MACzB;AAAA,MACA,WAAW,CAAC,MAA2B,UAAU,GAAG,cAAc,IAAI,aAAa;AAAA,MACnF;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAc;AAAA,MACb,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,MAAM,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,EAKZ,IAAI,UAAU,MAAM,CAAC,KAAK,QAAQ,CAAC,EAChC,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA;AAAA,EAEnB,QAAQ,UAAU,KAAK,YAAY,aAAa;AAAA;AAAA,EAEhD,MAAM,UAAU,OAAO,YAAY,WAAW;AAAA;AAAA,EAE9C,SAAS,UAAU,KAAK,YAAY,kBAAkB;AAAA;AAAA,EAEtD,SAAS,UAAU,KAAK,YAAY,qBAAqB;AAAA;AAAA,EAEzD,eAAe,UAAU,KAAK,YAAY,oBAAoB;AAAA;AAAA,EAE9D,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEhD,OAAO,UAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
-  "names": ["React", "props"]
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { describe, useMemoMergePropsWithDefault, useOwnerProps } from '@elliemae/ds-props-helpers';\nimport React from 'react';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\nimport { defaultItemProps, DSBreadcrumbItemPropTypesSchema } from './react-desc-prop-types.js';\nimport { StyledCrumbWrapper, StyledLink } from './styles.js';\n\nconst DSBreadcrumbItem = (props: DSBreadcrumbItemT.Props) => {\n  const propsWithDefaults = useMemoMergePropsWithDefault<DSBreadcrumbItemT.InternalProps>(props, defaultItemProps);\n  const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } =\n    propsWithDefaults;\n  const ownerPropsConfig = useOwnerProps(propsWithDefaults);\n\n  const ariaCurrent = React.useMemo(() => {\n    if (active) {\n      return as === 'button' || as === 'span' ? 'step' : 'page';\n    }\n    return undefined;\n  }, [active, as]);\n\n  const handleOnClick = React.useCallback(\n    (e: React.MouseEvent) => {\n      if (isTitle) return;\n      onClick(e);\n    },\n    [isTitle, onClick],\n  );\n\n  // Determine the component type\n  // When isTitle=true. All non-current steps are links with its style. Active step can have aria-current. Active step has non-interactable behaviour and style.\n  // Active step can be SPAN\n  const component = isTitle && active ? 'span' : as;\n\n  return (\n    <StyledCrumbWrapper isTitle={isTitle} trailingSlash={trailingSlash} {...ownerPropsConfig}>\n      <StyledLink\n        variant=\"link\"\n        component={component}\n        href={href}\n        onClick={handleOnClick}\n        tabIndex={isTitle ? -1 : 0}\n        active={active}\n        onKeyDown={(e: React.KeyboardEvent) => onKeyDown(e, childIndex ?? -1, handleOnClick)}\n        isTitle={isTitle}\n        color={color}\n        innerRef={addRef}\n        aria-current={ariaCurrent}\n        {...rest}\n        {...ownerPropsConfig}\n      >\n        {label}\n      </StyledLink>\n    </StyledCrumbWrapper>\n  );\n};\n\nDSBreadcrumbItem.displayName = 'DSBreadcrumbItem';\nconst DSBreadcrumbItemWithSchema = describe(DSBreadcrumbItem);\nDSBreadcrumbItemWithSchema.propTypes = DSBreadcrumbItemPropTypesSchema;\n\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema };\nexport default DSBreadcrumbItem;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkCjB;AAlCN,SAAS,UAAU,8BAA8B,qBAAqB;AACtE,OAAOA,YAAW;AAElB,SAAS,kBAAkB,uCAAuC;AAClE,SAAS,oBAAoB,kBAAkB;AAE/C,MAAM,mBAAmB,CAAC,UAAmC;AAC3D,QAAM,oBAAoB,6BAA8D,OAAO,gBAAgB;AAC/G,QAAM,EAAE,IAAI,QAAQ,MAAM,SAAS,WAAW,QAAQ,SAAS,eAAe,OAAO,YAAY,OAAO,GAAG,KAAK,IAC9G;AACF,QAAM,mBAAmB,cAAc,iBAAiB;AAExD,QAAM,cAAcA,OAAM,QAAQ,MAAM;AACtC,QAAI,QAAQ;AACV,aAAO,OAAO,YAAY,OAAO,SAAS,SAAS;AAAA,IACrD;AACA,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,EAAE,CAAC;AAEf,QAAM,gBAAgBA,OAAM;AAAA,IAC1B,CAAC,MAAwB;AACvB,UAAI,QAAS;AACb,cAAQ,CAAC;AAAA,IACX;AAAA,IACA,CAAC,SAAS,OAAO;AAAA,EACnB;AAKA,QAAM,YAAY,WAAW,SAAS,SAAS;AAE/C,SACE,oBAAC,sBAAmB,SAAkB,eAA+B,GAAG,kBACtE;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA;AAAA,MACA,SAAS;AAAA,MACT,UAAU,UAAU,KAAK;AAAA,MACzB;AAAA,MACA,WAAW,CAAC,MAA2B,UAAU,GAAG,cAAc,IAAI,aAAa;AAAA,MACnF;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAc;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,EACH,GACF;AAEJ;AAEA,iBAAiB,cAAc;AAC/B,MAAM,6BAA6B,SAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
+  "names": ["React"]
 }

package/dist/esm/constants/index.js

@@ -7,10 +7,20 @@ const BREADCRUMB_SLOTS = {
   LINK: "link",
   LIST: "list"
 };
+const BREADCRUMB_TRAIL_SLOTS = {
+  CONTAINER: BREADCRUMB_SLOTS.CONTAINER,
+  LIST: BREADCRUMB_SLOTS.LIST
+};
+const BREADCRUMB_ITEM_SLOTS = {
+  CRUMBWRAPPER: BREADCRUMB_SLOTS.CRUMBWRAPPER,
+  LINK: BREADCRUMB_SLOTS.LINK
+};
 const BREADCRUMB_DATA_TESTID = slotObjectToDataTestIds(DSBreadcrumbName, BREADCRUMB_SLOTS);
 export {
   BREADCRUMB_DATA_TESTID,
+  BREADCRUMB_ITEM_SLOTS,
   BREADCRUMB_SLOTS,
+  BREADCRUMB_TRAIL_SLOTS,
   DSBreadcrumbName
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/constants/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBreadcrumbName = 'DSBreadcrumb';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const BREADCRUMB_SLOTS = {\n  CONTAINER: 'container',\n  CRUMBWRAPPER: 'crumb-wrapper',\n  LINK: 'link',\n  LIST: 'list',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const BREADCRUMB_DATA_TESTID = slotObjectToDataTestIds(DSBreadcrumbName, BREADCRUMB_SLOTS);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAGzB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,cAAc;AAAA,EACd,MAAM;AAAA,EACN,MAAM;AACR;AAGO,MAAM,yBAAyB,wBAAwB,kBAAkB,gBAAgB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSBreadcrumbName = 'DSBreadcrumb';\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const BREADCRUMB_SLOTS = {\n  CONTAINER: 'container',\n  CRUMBWRAPPER: 'crumb-wrapper',\n  LINK: 'link',\n  LIST: 'list',\n} as const;\n\n// the slots above are split between the two components that render them:\n// DSBreadcrumb renders the trail (container + list), so their slot props go on <DSBreadcrumb />\nexport const BREADCRUMB_TRAIL_SLOTS = {\n  CONTAINER: BREADCRUMB_SLOTS.CONTAINER,\n  LIST: BREADCRUMB_SLOTS.LIST,\n} as const;\n\n// DSBreadcrumbItem renders each crumb (crumb wrapper + link), so their slot props go on each <DSBreadcrumb.Item />\nexport const BREADCRUMB_ITEM_SLOTS = {\n  CRUMBWRAPPER: BREADCRUMB_SLOTS.CRUMBWRAPPER,\n  LINK: BREADCRUMB_SLOTS.LINK,\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const BREADCRUMB_DATA_TESTID = slotObjectToDataTestIds(DSBreadcrumbName, BREADCRUMB_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAGzB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,cAAc;AAAA,EACd,MAAM;AAAA,EACN,MAAM;AACR;AAIO,MAAM,yBAAyB;AAAA,EACpC,WAAW,iBAAiB;AAAA,EAC5B,MAAM,iBAAiB;AACzB;AAGO,MAAM,wBAAwB;AAAA,EACnC,cAAc,iBAAiB;AAAA,EAC/B,MAAM,iBAAiB;AACzB;AAGO,MAAM,yBAAyB,wBAAwB,kBAAkB,gBAAgB;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,11 +1,21 @@
 import * as React from "react";
-export * from "./DSBreadcrumb.js";
-export * from "./DSBreadcrumbItem.js";
-export * from "./react-desc-prop-types.js";
+import { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements } from "./DSBreadcrumb.js";
+import { DSBreadcrumbItem, DSBreadcrumbItemWithSchema } from "./DSBreadcrumbItem.js";
+import {
+  defaultProps,
+  defaultItemProps
+} from "./react-desc-prop-types.js";
 import { DSBreadcrumbName, BREADCRUMB_SLOTS, BREADCRUMB_DATA_TESTID } from "./constants/index.js";
 export {
   BREADCRUMB_DATA_TESTID,
   BREADCRUMB_SLOTS,
-  DSBreadcrumbName
+  DSBreadcrumb,
+  DSBreadcrumbItem,
+  DSBreadcrumbItemWithSchema,
+  DSBreadcrumbName,
+  DSBreadcrumbWithSchema,
+  defaultItemProps,
+  defaultProps,
+  htmlElements
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSBreadcrumb.js';\nexport * from './DSBreadcrumbItem.js';\nexport * from './react-desc-prop-types.js';\nexport { DSBreadcrumbName, BREADCRUMB_SLOTS, BREADCRUMB_DATA_TESTID } from './constants/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,kBAAkB,kBAAkB,8BAA8B;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements } from './DSBreadcrumb.js';\nexport { DSBreadcrumbItem, DSBreadcrumbItemWithSchema } from './DSBreadcrumbItem.js';\nexport {\n  defaultProps,\n  defaultItemProps,\n  type DSBreadcrumbT,\n  type DSBreadcrumbItemT,\n  type SafeComponentsT,\n  type SafeItemComponentT,\n} from './react-desc-prop-types.js';\nexport { DSBreadcrumbName, BREADCRUMB_SLOTS, BREADCRUMB_DATA_TESTID } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,wBAAwB,oBAAoB;AACnE,SAAS,kBAAkB,kCAAkC;AAC7D;AAAA,EACE;AAAA,EACA;AAAA,OAKK;AACP,SAAS,kBAAkB,kBAAkB,8BAA8B;",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { PropTypes, getPropsPerSlotPropTypes, globalAttributesPropTypes } from "@elliemae/ds-props-helpers";
+import { DSBreadcrumbName, BREADCRUMB_ITEM_SLOTS, BREADCRUMB_TRAIL_SLOTS } from "./constants/index.js";
 const defaultProps = {
   containerProps: {},
   as: "nav",
@@ -14,7 +16,68 @@ const defaultItemProps = {
   label: "",
   childIndex: -1
 };
+const DSBreadcrumbPropTypes = {
+  ...getPropsPerSlotPropTypes(DSBreadcrumbName, BREADCRUMB_TRAIL_SLOTS),
+  ...globalAttributesPropTypes,
+  /** props injected to breadcrumb wrapper */
+  containerProps: PropTypes.object.description("props injected to breadcrumb wrapper"),
+  /**
+   * Type of element you want the main container to be:
+   * 'nav', 'div'
+   */
+  as: PropTypes.oneOf(["nav", "div"]).description("Type of element you want the main container to be: 'nav' or 'div'. Defaults to 'nav'.").defaultValue("nav"),
+  /**
+   * Whether to show the last element of the breadcrumb as a title
+   * Also removes trailing slash to show last element as title
+   */
+  isTitle: PropTypes.bool.description(
+    "Whether to show the last element of the breadcrumb as a title. Also removes trailing slash to show last element as title"
+  ),
+  /** breadcrumb label */
+  label: PropTypes.string.description("breadcrumb label"),
+  /**
+   * Container items to wrap
+   */
+  trailingSlash: PropTypes.bool.description("Whether to show trailing slash on all items except the last one").defaultValue(true),
+  children: PropTypes.arrayOf(PropTypes.element).isRequired.description("Container items to wrap")
+};
+const itemGlobalAttributesPropTypes = {
+  ...globalAttributesPropTypes,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).hidden()
+};
+const DSBreadcrumbItemPropTypes = {
+  ...getPropsPerSlotPropTypes(DSBreadcrumbName, BREADCRUMB_ITEM_SLOTS),
+  ...itemGlobalAttributesPropTypes,
+  /**
+   * Type of element you want the item to be:
+   * 'a', 'button'
+   */
+  as: PropTypes.oneOf(["a", "button"]).description('Type of element you want the item to be: "a" or "button". Defaults to "a"').defaultValue("a"),
+  /** active item */
+  active: PropTypes.bool.description("Active item"),
+  /** href link */
+  href: PropTypes.string.description("Href link"),
+  /** on click handler */
+  onClick: PropTypes.func.description("On click handler"),
+  /** style item as title */
+  isTitle: PropTypes.bool.description("Style item as title"),
+  /** add trailing slash */
+  trailingSlash: PropTypes.bool.description("Add trailing slash"),
+  /** item label */
+  label: PropTypes.string.description("Item label"),
+  /** link color */
+  color: PropTypes.string.description("Link color"),
+  // injected by DSBreadcrumb into each of its items, not meant to be set by consumers
+  childIndex: PropTypes.number.hidden(),
+  addRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).hidden()
+};
+const DSBreadcrumbPropTypesSchema = DSBreadcrumbPropTypes;
+const DSBreadcrumbItemPropTypesSchema = DSBreadcrumbItemPropTypes;
 export {
+  DSBreadcrumbItemPropTypes,
+  DSBreadcrumbItemPropTypesSchema,
+  DSBreadcrumbPropTypes,
+  DSBreadcrumbPropTypesSchema,
   defaultItemProps,
   defaultProps
 };

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';\nimport type React from 'react';\nimport type { htmlElements } from './DSBreadcrumb.js';\ntype SafeComponentsT = (typeof htmlElements)[number];\n\ntype SafeItemComponentT = 'a' | 'button' | 'span';\n\nexport const defaultProps: DSBreadcrumbT.DefaultProps = {\n  containerProps: {},\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n};\n\nexport const defaultItemProps: DSBreadcrumbItemT.DefaultProps = {\n  active: false,\n  as: 'a',\n  onKeyDown: () => null,\n  onClick: () => null,\n  label: '',\n  childIndex: -1,\n};\n\ndeclare namespace DSBreadcrumbT {\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    as: SafeComponentsT;\n    label: string;\n    isTitle: boolean;\n    trailingSlash: boolean;\n  }\n\n  export interface RequiredProps {\n    children: React.ReactElement[];\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      RequiredProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      RequiredProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n      XstyledProps {}\n}\n\ndeclare namespace DSBreadcrumbItemT {\n  export interface DefaultProps {\n    active: boolean;\n    as: SafeItemComponentT;\n    onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: (e: React.MouseEvent) => void) => void;\n    onClick: (e: React.MouseEvent) => void;\n    label: string;\n    childIndex: number;\n  }\n\n  export interface OptionalProps {\n    addRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n    href?: string;\n    isTitle?: boolean;\n    trailingSlash?: boolean;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n}\n\nexport type { DSBreadcrumbItemT, DSBreadcrumbT, SafeComponentsT, SafeItemComponentT };\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACOhB,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB;AAEO,MAAM,mBAAmD;AAAA,EAC9D,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,WAAW,MAAM;AAAA,EACjB,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,YAAY;AACd;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';\nimport { PropTypes, getPropsPerSlotPropTypes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type React from 'react';\nimport type { htmlElements } from './DSBreadcrumb.js';\nimport { DSBreadcrumbName, BREADCRUMB_ITEM_SLOTS, BREADCRUMB_TRAIL_SLOTS } from './constants/index.js';\n\ntype SafeComponentsT = (typeof htmlElements)[number];\n\ntype SafeItemComponentT = 'a' | 'button' | 'span';\n\nexport declare namespace DSBreadcrumbT {\n  export type SlotFunctionArguments = {\n    dsBreadcrumbContainer: () => object;\n    dsBreadcrumbList: () => object;\n  };\n\n  export interface DefaultProps {\n    containerProps: Record<string, unknown>;\n    as: SafeComponentsT;\n    label: string;\n    isTitle: boolean;\n    trailingSlash: boolean;\n  }\n\n  export interface RequiredProps {\n    children: React.ReactElement[];\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSBreadcrumbName,\n    typeof BREADCRUMB_TRAIL_SLOTS\n  > {}\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      RequiredProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>,\n      XstyledProps {}\n}\n\nexport declare namespace DSBreadcrumbItemT {\n  export type SlotFunctionArguments = {\n    dsBreadcrumbCrumbWrapper: () => object;\n    dsBreadcrumbLink: () => object;\n  };\n\n  export interface DefaultProps {\n    active: boolean;\n    as: SafeItemComponentT;\n    onKeyDown: (e: React.KeyboardEvent, componentRefIndex: number, onClick: (e: React.MouseEvent) => void) => void;\n    onClick: (e: React.MouseEvent) => void;\n    label: string;\n    childIndex: number;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSBreadcrumbName,\n    typeof BREADCRUMB_ITEM_SLOTS\n  > {\n    addRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;\n    href?: string;\n    isTitle?: boolean;\n    trailingSlash?: boolean;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n      XstyledProps {}\n}\n\nexport const defaultProps: DSBreadcrumbT.DefaultProps = {\n  containerProps: {},\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n};\n\nexport const defaultItemProps: DSBreadcrumbItemT.DefaultProps = {\n  active: false,\n  as: 'a',\n  onKeyDown: () => null,\n  onClick: () => null,\n  label: '',\n  childIndex: -1,\n};\n\n// xstyled props stay typed on Props for backward compatibility, but they are left out of the documented schema:\n// they never reach the CSS of DSBreadcrumb and only partially reach the link of DSBreadcrumbItem\n// (see KNOWN_INTENTIONAL_DEVIATIONS.md)\nexport const DSBreadcrumbPropTypes: DSPropTypesSchema<Omit<DSBreadcrumbT.Props, keyof XstyledProps>> = {\n  ...getPropsPerSlotPropTypes(DSBreadcrumbName, BREADCRUMB_TRAIL_SLOTS),\n  ...globalAttributesPropTypes,\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'\n   */\n  as: PropTypes.oneOf(['nav', 'div'])\n    .description(\"Type of element you want the main container to be: 'nav' or 'div'. Defaults to 'nav'.\")\n    .defaultValue('nav'),\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  trailingSlash: PropTypes.bool\n    .description('Whether to show trailing slash on all items except the last one')\n    .defaultValue(true),\n  children: PropTypes.arrayOf(PropTypes.element).isRequired.description('Container items to wrap'),\n};\n\n// a consumer innerRef replaces the addRef DSBreadcrumb relies on for arrow key navigation,\n// so the item schema keeps it hidden (see KNOWN_INTENTIONAL_DEVIATIONS.md)\nconst itemGlobalAttributesPropTypes = {\n  ...globalAttributesPropTypes,\n  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).hidden(),\n};\n\nexport const DSBreadcrumbItemPropTypes: DSPropTypesSchema<Omit<DSBreadcrumbItemT.Props, keyof XstyledProps>> = {\n  ...getPropsPerSlotPropTypes(DSBreadcrumbName, BREADCRUMB_ITEM_SLOTS),\n  ...itemGlobalAttributesPropTypes,\n  /**\n   * Type of element you want the item to be:\n   * 'a', 'button'\n   */\n  as: PropTypes.oneOf(['a', 'button'])\n    .description('Type of element you want the item to be: \"a\" or \"button\". Defaults to \"a\"')\n    .defaultValue('a'),\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  // injected by DSBreadcrumb into each of its items, not meant to be set by consumers\n  childIndex: PropTypes.number.hidden(),\n  addRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).hidden(),\n};\n\nexport const DSBreadcrumbPropTypesSchema = DSBreadcrumbPropTypes as unknown as ValidationMap<DSBreadcrumbT.Props>;\nexport const DSBreadcrumbItemPropTypesSchema =\n  DSBreadcrumbItemPropTypes as unknown as ValidationMap<DSBreadcrumbItemT.Props>;\n\nexport type { SafeComponentsT, SafeItemComponentT };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,WAAW,0BAA0B,iCAAiC;AAI/E,SAAS,kBAAkB,uBAAuB,8BAA8B;AAsFzE,MAAM,eAA2C;AAAA,EACtD,gBAAgB,CAAC;AAAA,EACjB,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AACjB;AAEO,MAAM,mBAAmD;AAAA,EAC9D,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,WAAW,MAAM;AAAA,EACjB,SAAS,MAAM;AAAA,EACf,OAAO;AAAA,EACP,YAAY;AACd;AAKO,MAAM,wBAA0F;AAAA,EACrG,GAAG,yBAAyB,kBAAkB,sBAAsB;AAAA,EACpE,GAAG;AAAA;AAAA,EAEH,gBAAgB,UAAU,OAAO,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnF,IAAI,UAAU,MAAM,CAAC,OAAO,KAAK,CAAC,EAC/B,YAAY,uFAAuF,EACnG,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB,SAAS,UAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA;AAAA,EAEA,OAAO,UAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAItD,eAAe,UAAU,KACtB,YAAY,iEAAiE,EAC7E,aAAa,IAAI;AAAA,EACpB,UAAU,UAAU,QAAQ,UAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAIA,MAAM,gCAAgC;AAAA,EACpC,GAAG;AAAA,EACH,UAAU,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,OAAO;AAC3E;AAEO,MAAM,4BAAkG;AAAA,EAC7G,GAAG,yBAAyB,kBAAkB,qBAAqB;AAAA,EACnE,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA,EAKH,IAAI,UAAU,MAAM,CAAC,KAAK,QAAQ,CAAC,EAChC,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA;AAAA,EAEnB,QAAQ,UAAU,KAAK,YAAY,aAAa;AAAA;AAAA,EAEhD,MAAM,UAAU,OAAO,YAAY,WAAW;AAAA;AAAA,EAE9C,SAAS,UAAU,KAAK,YAAY,kBAAkB;AAAA;AAAA,EAEtD,SAAS,UAAU,KAAK,YAAY,qBAAqB;AAAA;AAAA,EAEzD,eAAe,UAAU,KAAK,YAAY,oBAAoB;AAAA;AAAA,EAE9D,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEhD,OAAO,UAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEhD,YAAY,UAAU,OAAO,OAAO;AAAA,EACpC,QAAQ,UAAU,UAAU,CAAC,UAAU,QAAQ,UAAU,IAAI,CAAC,EAAE,OAAO;AACzE;AAEO,MAAM,8BAA8B;AACpC,MAAM,kCACX;",
   "names": []
 }

package/dist/esm/typescript-testing/slot-props.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+const TrailSlotPropsAsObject = {
+  dsBreadcrumbContainer: { "aria-label": "just a typescript test" },
+  dsBreadcrumbList: { "aria-label": "just a typescript test" }
+};
+const TrailSlotPropsAsFunctions = {
+  dsBreadcrumbContainer: () => ({ "aria-label": "just a typescript test" }),
+  dsBreadcrumbList: () => ({ "aria-label": "just a typescript test" })
+};
+const TrailSlotFunctionsAreValidProps = TrailSlotPropsAsFunctions;
+const EnsureAllTrailSlotsExistInSlotFunctionArguments = TrailSlotPropsAsFunctions;
+const ItemSlotPropsAsObject = {
+  dsBreadcrumbCrumbWrapper: { "aria-label": "just a typescript test" },
+  dsBreadcrumbLink: { "aria-label": "just a typescript test" }
+};
+const ItemSlotPropsAsFunctions = {
+  dsBreadcrumbCrumbWrapper: () => ({ "aria-label": "just a typescript test" }),
+  dsBreadcrumbLink: () => ({ "aria-label": "just a typescript test" })
+};
+const ItemSlotFunctionsAreValidProps = ItemSlotPropsAsFunctions;
+const EnsureAllItemSlotsExistInSlotFunctionArguments = ItemSlotPropsAsFunctions;
+const EnsureAllSlotsExistInSlotFunctionArguments = { ...TrailSlotPropsAsFunctions, ...ItemSlotPropsAsFunctions };
+//# sourceMappingURL=slot-props.js.map

package/dist/esm/typescript-testing/slot-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/slot-props.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type {\n  DSBreadcrumbName,\n  BREADCRUMB_SLOTS,\n  BREADCRUMB_TRAIL_SLOTS,\n  BREADCRUMB_ITEM_SLOTS,\n} from '../constants/index.js';\nimport type { DSBreadcrumbT, DSBreadcrumbItemT } from '../react-desc-prop-types.js';\n\n// DSBreadcrumb renders the trail slots\nconst TrailSlotPropsAsObject: Partial<DSBreadcrumbT.Props> = {\n  dsBreadcrumbContainer: { 'aria-label': 'just a typescript test' },\n  dsBreadcrumbList: { 'aria-label': 'just a typescript test' },\n};\n\nconst TrailSlotPropsAsFunctions: DSBreadcrumbT.SlotFunctionArguments = {\n  dsBreadcrumbContainer: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBreadcrumbList: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// The function form must also be accepted by the public Props, slot by slot\nconst TrailSlotFunctionsAreValidProps: Partial<DSBreadcrumbT.Props> = TrailSlotPropsAsFunctions;\n\n// Exhaustiveness check \u2014 fails compilation if a trail slot is missing from SlotFunctionArguments\nconst EnsureAllTrailSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSBreadcrumbName, typeof BREADCRUMB_TRAIL_SLOTS>\n> = TrailSlotPropsAsFunctions;\n\n// DSBreadcrumbItem renders the item slots\nconst ItemSlotPropsAsObject: Partial<DSBreadcrumbItemT.Props> = {\n  dsBreadcrumbCrumbWrapper: { 'aria-label': 'just a typescript test' },\n  dsBreadcrumbLink: { 'aria-label': 'just a typescript test' },\n};\n\nconst ItemSlotPropsAsFunctions: DSBreadcrumbItemT.SlotFunctionArguments = {\n  dsBreadcrumbCrumbWrapper: () => ({ 'aria-label': 'just a typescript test' }),\n  dsBreadcrumbLink: () => ({ 'aria-label': 'just a typescript test' }),\n};\n\n// The function form must also be accepted by the public Props, slot by slot\nconst ItemSlotFunctionsAreValidProps: Partial<DSBreadcrumbItemT.Props> = ItemSlotPropsAsFunctions;\n\n// Exhaustiveness check \u2014 fails compilation if an item slot is missing from SlotFunctionArguments\nconst EnsureAllItemSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSBreadcrumbName, typeof BREADCRUMB_ITEM_SLOTS>\n> = ItemSlotPropsAsFunctions;\n\n// Exhaustiveness check across both components \u2014 fails compilation if a slot of BREADCRUMB_SLOTS is rendered by neither\nconst EnsureAllSlotsExistInSlotFunctionArguments: Required<\n  TypescriptHelpersT.PropsForSlots<typeof DSBreadcrumbName, typeof BREADCRUMB_SLOTS>\n> = { ...TrailSlotPropsAsFunctions, ...ItemSlotPropsAsFunctions };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACWvB,MAAM,yBAAuD;AAAA,EAC3D,uBAAuB,EAAE,cAAc,yBAAyB;AAAA,EAChE,kBAAkB,EAAE,cAAc,yBAAyB;AAC7D;AAEA,MAAM,4BAAiE;AAAA,EACrE,uBAAuB,OAAO,EAAE,cAAc,yBAAyB;AAAA,EACvE,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AACpE;AAGA,MAAM,kCAAgE;AAGtE,MAAM,kDAEF;AAGJ,MAAM,wBAA0D;AAAA,EAC9D,0BAA0B,EAAE,cAAc,yBAAyB;AAAA,EACnE,kBAAkB,EAAE,cAAc,yBAAyB;AAC7D;AAEA,MAAM,2BAAoE;AAAA,EACxE,0BAA0B,OAAO,EAAE,cAAc,yBAAyB;AAAA,EAC1E,kBAAkB,OAAO,EAAE,cAAc,yBAAyB;AACpE;AAGA,MAAM,iCAAmE;AAGzE,MAAM,iDAEF;AAGJ,MAAM,6CAEF,EAAE,GAAG,2BAA2B,GAAG,yBAAyB;",
+  "names": []
+}

package/dist/esm/typescript-testing/typescript-breadcrumb-valid.js

@@ -54,6 +54,24 @@ const ExampleUsageComponent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
   /* @__PURE__ */ jsxs(DSBreadcrumb, { as: "nav", label: "Breadcrumb", isTitle: false, trailingSlash: true, containerProps: {}, children: [
     /* @__PURE__ */ jsx(DSBreadcrumbItem, { href: "/", label: "Home" }),
     /* @__PURE__ */ jsx(DSBreadcrumbItem, { href: "/home", label: "Home2" })
-  ] })
+  ] }),
+  /* @__PURE__ */ jsxs(
+    DSBreadcrumb,
+    {
+      dsBreadcrumbContainer: { "aria-label": "Loan navigation" },
+      dsBreadcrumbList: () => ({ "data-custom": "list" }),
+      children: [
+        /* @__PURE__ */ jsx(
+          DSBreadcrumbItem,
+          {
+            label: "Home",
+            dsBreadcrumbCrumbWrapper: { "data-custom": "crumb" },
+            dsBreadcrumbLink: () => ({ "aria-label": "Home page" })
+          }
+        ),
+        /* @__PURE__ */ jsx(DSBreadcrumb.Item, { label: "Loans", dsBreadcrumbLink: { "aria-label": "Loans page" } })
+      ]
+    }
+  )
 ] });
 //# sourceMappingURL=typescript-breadcrumb-valid.js.map

package/dist/esm/typescript-testing/typescript-breadcrumb-valid.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/typescript-testing/typescript-breadcrumb-valid.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBreadcrumb, DSBreadcrumbItem } from '../index.js';\nimport type { DSBreadcrumbT, DSBreadcrumbItemT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBreadcrumbT.Props;\ntype ComponentPropsInternals = DSBreadcrumbT.InternalProps;\ntype ComponentPropsDefaultProps = DSBreadcrumbT.DefaultProps;\ntype ComponentPropsRequiredProps = DSBreadcrumbT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: [],\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n} as ComponentPropsForApp;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSBreadcrumb {...testExplicitDefinition} />\n    <DSBreadcrumb {...testInferedTypeCompatibility} />\n    {/* works with inline values */}\n    <DSBreadcrumb as=\"nav\" label=\"Breadcrumb\" isTitle={false} trailingSlash containerProps={{}}>\n      <DSBreadcrumbItem href=\"/\" label=\"Home\" />\n      <DSBreadcrumbItem href=\"/home\" label=\"Home2\" />\n    </DSBreadcrumb>\n  </>\n);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACoErB,mBAEE,KAGA,YALF;AAnEF,SAAS,cAAc,wBAAwB;AAS/C,MAAM,oBAAiD;AAAA,EACrD,UAAU,CAAC;AACb;AAIA,MAAM,sBAA2D;AAAA,EAC/D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AACX;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,gBAAc,GAAG,wBAAwB;AAAA,EAC1C,oBAAC,gBAAc,GAAG,8BAA8B;AAAA,EAEhD,qBAAC,gBAAa,IAAG,OAAM,OAAM,cAAa,SAAS,OAAO,eAAa,MAAC,gBAAgB,CAAC,GACvF;AAAA,wBAAC,oBAAiB,MAAK,KAAI,OAAM,QAAO;AAAA,IACxC,oBAAC,oBAAiB,MAAK,SAAQ,OAAM,SAAQ;AAAA,KAC/C;AAAA,GACF;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-unused-vars, no-unused-vars */\nimport { DSBreadcrumb, DSBreadcrumbItem } from '../index.js';\nimport type { DSBreadcrumbT, DSBreadcrumbItemT } from '../index.js';\n\n// test we expose the namespace and the namespace follows our deliverable conventions\ntype ComponentPropsForApp = DSBreadcrumbT.Props;\ntype ComponentPropsInternals = DSBreadcrumbT.InternalProps;\ntype ComponentPropsDefaultProps = DSBreadcrumbT.DefaultProps;\ntype ComponentPropsRequiredProps = DSBreadcrumbT.RequiredProps;\n\nconst testRequiredProps: ComponentPropsRequiredProps = {\n  children: [],\n};\n\n// difference Props and InternalProps is that InternalProps has all the default props filled in\n//  Props allows for partial defaults\nconst testPartialDefaults: Partial<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n};\n\nconst testProps: ComponentPropsForApp = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n};\nconst testPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testPartialDefaults,\n} as ComponentPropsForApp;\n// InternalProps requires all defaults to be filled in\nconst testCompleteDefaults: Required<ComponentPropsDefaultProps> = {\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\nconst testInternalProps: ComponentPropsInternals = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n};\nconst testInternalPropsAsSyntax = {\n  ...testRequiredProps,\n  ...testCompleteDefaults,\n} as ComponentPropsInternals;\n\n// using the explicit type definition, if there is an error, it will be marked on the key that is wrong\nconst testExplicitDefinition: ComponentPropsForApp = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n};\n\n// using the \"as\" syntax, if there is an error, it will be marking the whole object as wrong because it is not compatible with the type\nconst testInferedTypeCompatibility = {\n  children: [],\n  as: 'nav',\n  label: 'Breadcrumb',\n  isTitle: false,\n  trailingSlash: true,\n  containerProps: {},\n} as ComponentPropsForApp;\n\nconst ExampleUsageComponent = () => (\n  <>\n    {/* works with explicitly casted props, all syntaxes */}\n    <DSBreadcrumb {...testExplicitDefinition} />\n    <DSBreadcrumb {...testInferedTypeCompatibility} />\n    {/* works with inline values */}\n    <DSBreadcrumb as=\"nav\" label=\"Breadcrumb\" isTitle={false} trailingSlash containerProps={{}}>\n      <DSBreadcrumbItem href=\"/\" label=\"Home\" />\n      <DSBreadcrumbItem href=\"/home\" label=\"Home2\" />\n    </DSBreadcrumb>\n    {/* works with slot props, object and function forms: trail slots on DSBreadcrumb, item slots on each item */}\n    <DSBreadcrumb\n      dsBreadcrumbContainer={{ 'aria-label': 'Loan navigation' }}\n      dsBreadcrumbList={() => ({ 'data-custom': 'list' })}\n    >\n      <DSBreadcrumbItem\n        label=\"Home\"\n        dsBreadcrumbCrumbWrapper={{ 'data-custom': 'crumb' }}\n        dsBreadcrumbLink={() => ({ 'aria-label': 'Home page' })}\n      />\n      <DSBreadcrumb.Item label=\"Loans\" dsBreadcrumbLink={{ 'aria-label': 'Loans page' }} />\n    </DSBreadcrumb>\n  </>\n);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoErB,mBAEE,KAGA,YALF;AAnEF,SAAS,cAAc,wBAAwB;AAS/C,MAAM,oBAAiD;AAAA,EACrD,UAAU,CAAC;AACb;AAIA,MAAM,sBAA2D;AAAA,EAC/D,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AACX;AAEA,MAAM,YAAkC;AAAA,EACtC,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,oBAAoB;AAAA,EACxB,GAAG;AAAA,EACH,GAAG;AACL;AAEA,MAAM,uBAA6D;AAAA,EACjE,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AACA,MAAM,oBAA6C;AAAA,EACjD,GAAG;AAAA,EACH,GAAG;AACL;AACA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AAAA,EACH,GAAG;AACL;AAGA,MAAM,yBAA+C;AAAA,EACnD,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAGA,MAAM,+BAA+B;AAAA,EACnC,UAAU,CAAC;AAAA,EACX,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,SAAS;AAAA,EACT,eAAe;AAAA,EACf,gBAAgB,CAAC;AACnB;AAEA,MAAM,wBAAwB,MAC5B,iCAEE;AAAA,sBAAC,gBAAc,GAAG,wBAAwB;AAAA,EAC1C,oBAAC,gBAAc,GAAG,8BAA8B;AAAA,EAEhD,qBAAC,gBAAa,IAAG,OAAM,OAAM,cAAa,SAAS,OAAO,eAAa,MAAC,gBAAgB,CAAC,GACvF;AAAA,wBAAC,oBAAiB,MAAK,KAAI,OAAM,QAAO;AAAA,IACxC,oBAAC,oBAAiB,MAAK,SAAQ,OAAM,SAAQ;AAAA,KAC/C;AAAA,EAEA;AAAA,IAAC;AAAA;AAAA,MACC,uBAAuB,EAAE,cAAc,kBAAkB;AAAA,MACzD,kBAAkB,OAAO,EAAE,eAAe,OAAO;AAAA,MAEjD;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAM;AAAA,YACN,0BAA0B,EAAE,eAAe,QAAQ;AAAA,YACnD,kBAAkB,OAAO,EAAE,cAAc,YAAY;AAAA;AAAA,QACvD;AAAA,QACA,oBAAC,aAAa,MAAb,EAAkB,OAAM,SAAQ,kBAAkB,EAAE,cAAc,aAAa,GAAG;AAAA;AAAA;AAAA,EACrF;AAAA,GACF;",
   "names": []
 }

package/dist/types/constants/index.d.ts

@@ -5,6 +5,14 @@ export declare const BREADCRUMB_SLOTS: {
     readonly LINK: "link";
     readonly LIST: "list";
 };
+export declare const BREADCRUMB_TRAIL_SLOTS: {
+    readonly CONTAINER: "container";
+    readonly LIST: "list";
+};
+export declare const BREADCRUMB_ITEM_SLOTS: {
+    readonly CRUMBWRAPPER: "crumb-wrapper";
+    readonly LINK: "link";
+};
 export declare const BREADCRUMB_DATA_TESTID: {
     readonly CONTAINER: "ds-breadcrumb-container";
     readonly CRUMBWRAPPER: "ds-breadcrumb-crumb-wrapper";

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export * from './DSBreadcrumb.js';
-export * from './DSBreadcrumbItem.js';
-export * from './react-desc-prop-types.js';
+export { DSBreadcrumb, DSBreadcrumbWithSchema, htmlElements } from './DSBreadcrumb.js';
+export { DSBreadcrumbItem, DSBreadcrumbItemWithSchema } from './DSBreadcrumbItem.js';
+export { defaultProps, defaultItemProps, type DSBreadcrumbT, type DSBreadcrumbItemT, type SafeComponentsT, type SafeItemComponentT, } from './react-desc-prop-types.js';
 export { DSBreadcrumbName, BREADCRUMB_SLOTS, BREADCRUMB_DATA_TESTID } from './constants/index.js';

package/dist/types/react-desc-prop-types.d.ts

@@ -1,11 +1,15 @@
-import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers';
+import type { DSPropTypesSchema, GlobalAttributesT, ValidationMap, XstyledProps } from '@elliemae/ds-props-helpers';
+import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';
 import type React from 'react';
 import type { htmlElements } from './DSBreadcrumb.js';
+import { DSBreadcrumbName, BREADCRUMB_ITEM_SLOTS, BREADCRUMB_TRAIL_SLOTS } from './constants/index.js';
 type SafeComponentsT = (typeof htmlElements)[number];
 type SafeItemComponentT = 'a' | 'button' | 'span';
-export declare const defaultProps: DSBreadcrumbT.DefaultProps;
-export declare const defaultItemProps: DSBreadcrumbItemT.DefaultProps;
-declare namespace DSBreadcrumbT {
+export declare namespace DSBreadcrumbT {
+    type SlotFunctionArguments = {
+        dsBreadcrumbContainer: () => object;
+        dsBreadcrumbList: () => object;
+    };
     interface DefaultProps {
         containerProps: Record<string, unknown>;
         as: SafeComponentsT;
@@ -16,12 +20,18 @@ declare namespace DSBreadcrumbT {
     interface RequiredProps {
         children: React.ReactElement[];
     }
-    interface Props extends Partial<DefaultProps>, RequiredProps, Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>, XstyledProps {
+    interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSBreadcrumbName, typeof BREADCRUMB_TRAIL_SLOTS> {
+    }
+    interface Props extends Partial<DefaultProps>, RequiredProps, OptionalProps, Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>, XstyledProps {
     }
-    interface InternalProps extends DefaultProps, RequiredProps, Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>, XstyledProps {
+    interface InternalProps extends DefaultProps, RequiredProps, OptionalProps, Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps | keyof OptionalProps>, XstyledProps {
     }
 }
-declare namespace DSBreadcrumbItemT {
+export declare namespace DSBreadcrumbItemT {
+    type SlotFunctionArguments = {
+        dsBreadcrumbCrumbWrapper: () => object;
+        dsBreadcrumbLink: () => object;
+    };
     interface DefaultProps {
         active: boolean;
         as: SafeItemComponentT;
@@ -30,7 +40,7 @@ declare namespace DSBreadcrumbItemT {
         label: string;
         childIndex: number;
     }
-    interface OptionalProps {
+    interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSBreadcrumbName, typeof BREADCRUMB_ITEM_SLOTS> {
         addRef?: React.MutableRefObject<HTMLDivElement | null> | React.RefCallback<HTMLDivElement>;
         href?: string;
         isTitle?: boolean;
@@ -41,4 +51,10 @@ declare namespace DSBreadcrumbItemT {
     interface InternalProps extends DefaultProps, OptionalProps, Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>, XstyledProps {
     }
 }
-export type { DSBreadcrumbItemT, DSBreadcrumbT, SafeComponentsT, SafeItemComponentT };
+export declare const defaultProps: DSBreadcrumbT.DefaultProps;
+export declare const defaultItemProps: DSBreadcrumbItemT.DefaultProps;
+export declare const DSBreadcrumbPropTypes: DSPropTypesSchema<Omit<DSBreadcrumbT.Props, keyof XstyledProps>>;
+export declare const DSBreadcrumbItemPropTypes: DSPropTypesSchema<Omit<DSBreadcrumbItemT.Props, keyof XstyledProps>>;
+export declare const DSBreadcrumbPropTypesSchema: ValidationMap<DSBreadcrumbT.Props>;
+export declare const DSBreadcrumbItemPropTypesSchema: ValidationMap<DSBreadcrumbItemT.Props>;
+export type { SafeComponentsT, SafeItemComponentT };