@elliemae/ds-breadcrumb 3.57.0-next.9 → 3.57.0-rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DSBreadcrumb.js +1 -0
- package/dist/cjs/DSBreadcrumb.js.map +2 -2
- package/dist/cjs/DSBreadcrumbItem.js +5 -3
- package/dist/cjs/DSBreadcrumbItem.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js.map +1 -1
- package/dist/esm/DSBreadcrumb.js +1 -0
- package/dist/esm/DSBreadcrumb.js.map +2 -2
- package/dist/esm/DSBreadcrumbItem.js +5 -3
- package/dist/esm/DSBreadcrumbItem.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js.map +1 -1
- package/dist/types/react-desc-prop-types.d.ts +1 -1
- package/package.json +25 -24
package/dist/cjs/DSBreadcrumb.js
CHANGED
|
@@ -99,6 +99,7 @@ const props = {
|
|
|
99
99
|
/**
|
|
100
100
|
* Container items to wrap
|
|
101
101
|
*/
|
|
102
|
+
trailingSlash: import_ds_props_helpers.PropTypes.bool.description("Whether to show trailing slash on all items except the last one").defaultValue(true),
|
|
102
103
|
children: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.element).isRequired.description("Container items to wrap")
|
|
103
104
|
};
|
|
104
105
|
DSBreadcrumb.displayName = "DSBreadcrumb";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSBreadcrumb.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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 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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBjB;AAjBN,8BAAsF;AACtF,mBAA6C;AAC7C,8BAA6B;AAC7B,mCAAsC;AAEtC,mCAA6B;AAC7B,oBAA4C;AAE5C,MAAM,eAAe,CAAC,OAAO,KAAK;AAIlC,MAAM,eAAe,CAACA,WAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,GAAG,KAAK,IAAIA;AACzD;AAAA;AAAA,IAEE,4CAAC,iCAAgB,cAAY,OAAQ,GAAG,MAAO,GAAG,gBAAgB,IAChE,sDAAC,4BAAY,UAAS,GACxB;AAAA;AAEJ;AAEA,MAAM,eAAe,CAACA,WAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,GAAG,KAAK,IAAIA;AACzD;AAAA;AAAA,IAEE,4CAAC,iCAAiB,GAAG,MAAO,GAAG,gBAAgB,IAC7C,sDAAC,4BAAW,cAAY,OAAQ,UAAS,GAC3C;AAAA;AAEJ;AAEA,MAAM,eAAe,CAACA,WAA+B;AACnD,QAAM,wBAAoB,sDAA0DA,QAAO,yCAAY;AACvG,QAAM,EAAE,gBAAgB,IAAI,OAAO,eAAe,SAAS,UAAU,GAAG,KAAK,IAAI;AACjF,QAAM,CAAC,QAAQ,SAAS,QAAI,oDAAsB,EAAE,QAAQ,CAAC;AAE7D,QAAM,kBAAc,sBAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,QAAM,YAAY,OAAO,QAAQ,eAAe;AAEhD,SACE,4CAAC,aAAU,OAAe,GAAG,MAAM,gBAAgC,IAAI,aACpE,uBAAAC,QAAM,SAAS;AAAA,IAAI;AAAA,IAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,QAC3B,2BAAa,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,QACD,2BAAa,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACP,GACF;AAEJ;AAEA,aAAa,OAAO,wBAAAC;AAEpB,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,kCAAU,OAAO,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnF,IAAI,kCAAU,MAAM,CAAC,OAAO,KAAK,CAAC,EAC/B,YAAY,uFAAuF,EACnG,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB,SAAS,kCAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA;AAAA,EAEA,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAItD,UAAU,kCAAU,QAAQ,kCAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiBjB;AAjBN,8BAAsF;AACtF,mBAA6C;AAC7C,8BAA6B;AAC7B,mCAAsC;AAEtC,mCAA6B;AAC7B,oBAA4C;AAE5C,MAAM,eAAe,CAAC,OAAO,KAAK;AAIlC,MAAM,eAAe,CAACA,WAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,GAAG,KAAK,IAAIA;AACzD;AAAA;AAAA,IAEE,4CAAC,iCAAgB,cAAY,OAAQ,GAAG,MAAO,GAAG,gBAAgB,IAChE,sDAAC,4BAAY,UAAS,GACxB;AAAA;AAEJ;AAEA,MAAM,eAAe,CAACA,WAA0B;AAC9C,QAAM,EAAE,OAAO,gBAAgB,IAAI,UAAU,GAAG,KAAK,IAAIA;AACzD;AAAA;AAAA,IAEE,4CAAC,iCAAiB,GAAG,MAAO,GAAG,gBAAgB,IAC7C,sDAAC,4BAAW,cAAY,OAAQ,UAAS,GAC3C;AAAA;AAEJ;AAEA,MAAM,eAAe,CAACA,WAA+B;AACnD,QAAM,wBAAoB,sDAA0DA,QAAO,yCAAY;AACvG,QAAM,EAAE,gBAAgB,IAAI,OAAO,eAAe,SAAS,UAAU,GAAG,KAAK,IAAI;AACjF,QAAM,CAAC,QAAQ,SAAS,QAAI,oDAAsB,EAAE,QAAQ,CAAC;AAE7D,QAAM,kBAAc,sBAAQ,MAAO,aAAa,QAAQ,EAAE,IAAI,KAAK,KAAK,OAAQ,CAAC,EAAE,CAAC;AAEpF,QAAM,YAAY,OAAO,QAAQ,eAAe;AAEhD,SACE,4CAAC,aAAU,OAAe,GAAG,MAAM,gBAAgC,IAAI,aACpE,uBAAAC,QAAM,SAAS;AAAA,IAAI;AAAA,IAAU,CAAC,OAA2B,eACxD,aAAa,SAAS,SAAS,QAC3B,2BAAa,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,QACD,2BAAa,OAAO;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACP,GACF;AAEJ;AAEA,aAAa,OAAO,wBAAAC;AAEpB,MAAM,QAAQ;AAAA;AAAA,EAEZ,gBAAgB,kCAAU,OAAO,YAAY,sCAAsC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKnF,IAAI,kCAAU,MAAM,CAAC,OAAO,KAAK,CAAC,EAC/B,YAAY,uFAAuF,EACnG,aAAa,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA,EAKrB,SAAS,kCAAU,KAAK;AAAA,IACtB;AAAA,EACF;AAAA;AAAA,EAEA,OAAO,kCAAU,OAAO,YAAY,kBAAkB;AAAA;AAAA;AAAA;AAAA,EAItD,eAAe,kCAAU,KACtB,YAAY,iEAAiE,EAC7E,aAAa,IAAI;AAAA,EACpB,UAAU,kCAAU,QAAQ,kCAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,cAAc;AAC3B,MAAM,6BAAyB,kCAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
|
|
6
6
|
"names": ["props", "React", "DSBreadcrumbItem"]
|
|
7
7
|
}
|
|
@@ -44,7 +44,7 @@ const DSBreadcrumbItem = (props2) => {
|
|
|
44
44
|
const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } = propsWithDefaults;
|
|
45
45
|
const ariaCurrent = import_react.default.useMemo(() => {
|
|
46
46
|
if (active) {
|
|
47
|
-
return as === "button" ? "step" : "page";
|
|
47
|
+
return as === "button" || as === "span" ? "step" : "page";
|
|
48
48
|
}
|
|
49
49
|
return void 0;
|
|
50
50
|
}, [active, as]);
|
|
@@ -55,11 +55,12 @@ const DSBreadcrumbItem = (props2) => {
|
|
|
55
55
|
},
|
|
56
56
|
[isTitle, onClick]
|
|
57
57
|
);
|
|
58
|
-
|
|
58
|
+
const component = isTitle && active ? "span" : as;
|
|
59
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCrumbWrapper, { isTitle, trailingSlash, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
60
|
import_styles.StyledLink,
|
|
60
61
|
{
|
|
61
62
|
variant: "link",
|
|
62
|
-
component
|
|
63
|
+
component,
|
|
63
64
|
href,
|
|
64
65
|
onClick: handleOnClick,
|
|
65
66
|
tabIndex: isTitle ? -1 : 0,
|
|
@@ -68,6 +69,7 @@ const DSBreadcrumbItem = (props2) => {
|
|
|
68
69
|
isTitle,
|
|
69
70
|
color,
|
|
70
71
|
innerRef: addRef,
|
|
72
|
+
"aria-current": ariaCurrent,
|
|
71
73
|
...rest,
|
|
72
74
|
children: label
|
|
73
75
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/DSBreadcrumbItem.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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' ? '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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiCjB;AAjCN,8BAAsF;AACtF,mBAAkB;AAElB,mCAAiC;AACjC,oBAA+C;AAE/C,MAAM,mBAAmB,CAACA,WAAmC;AAC3D,QAAM,wBAAoB,sDAA8DA,QAAO,6CAAgB;AAC/G,QAAM,EAAE,IAAI,QAAQ,MAAM,SAAS,WAAW,QAAQ,SAAS,eAAe,OAAO,YAAY,OAAO,GAAG,KAAK,IAC9G;AAEF,QAAM,cAAc,aAAAC,QAAM,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,gBAAgB,aAAAA,QAAM;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,4CAAC,oCAAmB,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,kCAAU,MAAM,CAAC,KAAK,QAAQ,CAAC,EAChC,YAAY,2EAA2E,EACvF,aAAa,GAAG;AAAA;AAAA,EAEnB,QAAQ,kCAAU,KAAK,YAAY,aAAa;AAAA;AAAA,EAEhD,MAAM,kCAAU,OAAO,YAAY,WAAW;AAAA;AAAA,EAE9C,SAAS,kCAAU,KAAK,YAAY,kBAAkB;AAAA;AAAA,EAEtD,SAAS,kCAAU,KAAK,YAAY,qBAAqB;AAAA;AAAA,EAEzD,eAAe,kCAAU,KAAK,YAAY,oBAAoB;AAAA;AAAA,EAE9D,OAAO,kCAAU,OAAO,YAAY,YAAY;AAAA;AAAA,EAEhD,OAAO,kCAAU,OAAO,YAAY,YAAY;AAClD;AAEA,iBAAiB,cAAc;AAC/B,MAAM,iCAA6B,kCAAS,gBAAgB;AAC5D,2BAA2B,YAAY;AAGvC,IAAO,2BAAQ;",
|
|
6
6
|
"names": ["props", "React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/react-desc-prop-types.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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';\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 Partial<DefaultProps>,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends 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 color?: string;\n href?: string;\n isTitle?: boolean;\n trailingSlash?: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n}\n\nexport type { DSBreadcrumbItemT, DSBreadcrumbT, SafeComponentsT, SafeItemComponentT };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
4
|
+
"sourcesContent": ["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 Partial<DefaultProps>,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends 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 color?: string;\n href?: string;\n isTitle?: boolean;\n trailingSlash?: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n}\n\nexport type { DSBreadcrumbItemT, DSBreadcrumbT, SafeComponentsT, SafeItemComponentT };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADOhB,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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSBreadcrumb.js
CHANGED
|
@@ -63,6 +63,7 @@ const props = {
|
|
|
63
63
|
/**
|
|
64
64
|
* Container items to wrap
|
|
65
65
|
*/
|
|
66
|
+
trailingSlash: PropTypes.bool.description("Whether to show trailing slash on all items except the last one").defaultValue(true),
|
|
66
67
|
children: PropTypes.arrayOf(PropTypes.element).isRequired.description("Container items to wrap")
|
|
67
68
|
};
|
|
68
69
|
DSBreadcrumb.displayName = "DSBreadcrumb";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSBreadcrumb.tsx"],
|
|
4
|
-
"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 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"],
|
|
5
|
-
"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,UAAU,UAAU,QAAQ,UAAU,OAAO,EAAE,WAAW,YAAY,yBAAyB;AACjG;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;AAGnC,IAAO,uBAAQ;",
|
|
4
|
+
"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"],
|
|
5
|
+
"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;",
|
|
6
6
|
"names": ["React", "props"]
|
|
7
7
|
}
|
|
@@ -9,7 +9,7 @@ const DSBreadcrumbItem = (props2) => {
|
|
|
9
9
|
const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } = propsWithDefaults;
|
|
10
10
|
const ariaCurrent = React2.useMemo(() => {
|
|
11
11
|
if (active) {
|
|
12
|
-
return as === "button" ? "step" : "page";
|
|
12
|
+
return as === "button" || as === "span" ? "step" : "page";
|
|
13
13
|
}
|
|
14
14
|
return void 0;
|
|
15
15
|
}, [active, as]);
|
|
@@ -20,11 +20,12 @@ const DSBreadcrumbItem = (props2) => {
|
|
|
20
20
|
},
|
|
21
21
|
[isTitle, onClick]
|
|
22
22
|
);
|
|
23
|
-
|
|
23
|
+
const component = isTitle && active ? "span" : as;
|
|
24
|
+
return /* @__PURE__ */ jsx(StyledCrumbWrapper, { isTitle, trailingSlash, children: /* @__PURE__ */ jsx(
|
|
24
25
|
StyledLink,
|
|
25
26
|
{
|
|
26
27
|
variant: "link",
|
|
27
|
-
component
|
|
28
|
+
component,
|
|
28
29
|
href,
|
|
29
30
|
onClick: handleOnClick,
|
|
30
31
|
tabIndex: isTitle ? -1 : 0,
|
|
@@ -33,6 +34,7 @@ const DSBreadcrumbItem = (props2) => {
|
|
|
33
34
|
isTitle,
|
|
34
35
|
color,
|
|
35
36
|
innerRef: addRef,
|
|
37
|
+
"aria-current": ariaCurrent,
|
|
36
38
|
...rest,
|
|
37
39
|
children: label
|
|
38
40
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSBreadcrumbItem.tsx"],
|
|
4
|
-
"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' ? '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
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"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"],
|
|
5
|
+
"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;",
|
|
6
6
|
"names": ["React", "props"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.tsx"],
|
|
4
|
-
"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';\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 Partial<DefaultProps>,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends 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 color?: string;\n href?: string;\n isTitle?: boolean;\n trailingSlash?: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n}\n\nexport type { DSBreadcrumbItemT, DSBreadcrumbT, SafeComponentsT, SafeItemComponentT };\n"],
|
|
4
|
+
"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 Partial<DefaultProps>,\n RequiredProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof RequiredProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends 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 color?: string;\n href?: string;\n isTitle?: boolean;\n trailingSlash?: boolean;\n }\n\n export interface Props\n extends Partial<DefaultProps>,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n\n export interface InternalProps\n extends DefaultProps,\n OptionalProps,\n Omit<GlobalAttributesT, keyof DefaultProps | keyof OptionalProps>,\n XstyledProps {}\n}\n\nexport type { DSBreadcrumbItemT, DSBreadcrumbT, SafeComponentsT, SafeItemComponentT };\n"],
|
|
5
5
|
"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;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,7 +2,7 @@ import type { GlobalAttributesT, XstyledProps } from '@elliemae/ds-props-helpers
|
|
|
2
2
|
import type React from 'react';
|
|
3
3
|
import type { htmlElements } from './DSBreadcrumb.js';
|
|
4
4
|
type SafeComponentsT = (typeof htmlElements)[number];
|
|
5
|
-
type SafeItemComponentT = 'a' | 'button';
|
|
5
|
+
type SafeItemComponentT = 'a' | 'button' | 'span';
|
|
6
6
|
export declare const defaultProps: DSBreadcrumbT.DefaultProps;
|
|
7
7
|
export declare const defaultItemProps: DSBreadcrumbItemT.DefaultProps;
|
|
8
8
|
declare namespace DSBreadcrumbT {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-breadcrumb",
|
|
3
|
-
"version": "3.57.0-
|
|
3
|
+
"version": "3.57.0-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Breadcrumb",
|
|
6
6
|
"files": [
|
|
@@ -35,36 +35,37 @@
|
|
|
35
35
|
"reportFile": "tests.xml",
|
|
36
36
|
"indent": 4
|
|
37
37
|
},
|
|
38
|
+
"scripts": {
|
|
39
|
+
"dev": "cross-env NODE_ENV=development node ../../../scripts/build/build.mjs --watch",
|
|
40
|
+
"test": "pui-cli test --passWithNoTests --coverage=\"false\"",
|
|
41
|
+
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
42
|
+
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
43
|
+
"dts": "node ../../../scripts/dts.mjs",
|
|
44
|
+
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
45
|
+
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
46
|
+
},
|
|
38
47
|
"dependencies": {
|
|
39
|
-
"@elliemae/ds-props-helpers": "3.57.0-
|
|
40
|
-
"@elliemae/ds-system": "3.57.0-
|
|
41
|
-
"@elliemae/ds-typography": "3.57.0-
|
|
48
|
+
"@elliemae/ds-props-helpers": "3.57.0-rc.0",
|
|
49
|
+
"@elliemae/ds-system": "3.57.0-rc.0",
|
|
50
|
+
"@elliemae/ds-typography": "3.57.0-rc.0"
|
|
42
51
|
},
|
|
43
52
|
"devDependencies": {
|
|
44
|
-
"@elliemae/
|
|
45
|
-
"@elliemae/
|
|
46
|
-
"
|
|
47
|
-
"
|
|
48
|
-
"
|
|
49
|
-
"
|
|
53
|
+
"@elliemae/ds-monorepo-devops": "3.57.0-rc.0",
|
|
54
|
+
"@elliemae/ds-test-utils": "3.57.0-rc.0",
|
|
55
|
+
"@elliemae/pui-cli": "catalog:",
|
|
56
|
+
"@elliemae/pui-theme": "catalog:",
|
|
57
|
+
"jest": "catalog:",
|
|
58
|
+
"styled-components": "catalog:"
|
|
50
59
|
},
|
|
51
60
|
"peerDependencies": {
|
|
52
|
-
"@elliemae/pui-theme": "
|
|
53
|
-
"react": "
|
|
54
|
-
"react-dom": "
|
|
55
|
-
"styled-components": "
|
|
61
|
+
"@elliemae/pui-theme": "catalog:",
|
|
62
|
+
"react": "catalog:",
|
|
63
|
+
"react-dom": "catalog:",
|
|
64
|
+
"styled-components": "catalog:"
|
|
56
65
|
},
|
|
57
66
|
"publishConfig": {
|
|
58
67
|
"access": "public",
|
|
59
68
|
"typeSafety": true
|
|
60
69
|
},
|
|
61
|
-
"
|
|
62
|
-
|
|
63
|
-
"test": "pui-cli test --passWithNoTests --coverage=\"false\"",
|
|
64
|
-
"lint": "node ../../../scripts/lint.mjs --fix",
|
|
65
|
-
"lint:strict": "node ../../../scripts/lint-strict.mjs",
|
|
66
|
-
"dts": "node ../../../scripts/dts.mjs",
|
|
67
|
-
"build": "cross-env NODE_ENV=production node ../../../scripts/build/build.mjs",
|
|
68
|
-
"checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
69
|
-
}
|
|
70
|
-
}
|
|
70
|
+
"gitHead": "7e95aacd3d36427e4659f360714c3e0bbc4378bc"
|
|
71
|
+
}
|