@elliemae/ds-breadcrumb 3.49.0-rc.8 → 3.49.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 +23 -27
- package/dist/cjs/DSBreadcrumb.js.map +2 -2
- package/dist/cjs/DSBreadcrumbItem.js +15 -25
- package/dist/cjs/DSBreadcrumbItem.js.map +2 -2
- package/dist/cjs/constants/index.js +46 -0
- package/dist/cjs/constants/index.js.map +7 -0
- package/dist/cjs/index.js +10 -0
- package/dist/cjs/index.js.map +2 -2
- package/dist/cjs/styles.js +11 -4
- package/dist/cjs/styles.js.map +2 -2
- package/dist/esm/DSBreadcrumb.js +23 -27
- package/dist/esm/DSBreadcrumb.js.map +2 -2
- package/dist/esm/DSBreadcrumbItem.js +16 -26
- package/dist/esm/DSBreadcrumbItem.js.map +2 -2
- package/dist/esm/constants/index.js +16 -0
- package/dist/esm/constants/index.js.map +7 -0
- package/dist/esm/index.js +6 -0
- package/dist/esm/index.js.map +2 -2
- package/dist/esm/styles.js +11 -4
- package/dist/esm/styles.js.map +2 -2
- package/dist/types/constants/index.d.ts +8 -0
- package/dist/types/index.d.ts +1 -0
- package/dist/types/styles.d.ts +3 -3
- package/package.json +9 -7
package/dist/cjs/DSBreadcrumb.js
CHANGED
|
@@ -36,8 +36,8 @@ __export(DSBreadcrumb_exports, {
|
|
|
36
36
|
module.exports = __toCommonJS(DSBreadcrumb_exports);
|
|
37
37
|
var React = __toESM(require("react"));
|
|
38
38
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
39
|
-
var import_react = __toESM(require("react"));
|
|
40
39
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
40
|
+
var import_react = __toESM(require("react"));
|
|
41
41
|
var import_DSBreadcrumbItem = __toESM(require("./DSBreadcrumbItem.js"));
|
|
42
42
|
var import_useKeyboardNavigation = require("./hooks/useKeyboardNavigation.js");
|
|
43
43
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
@@ -45,11 +45,17 @@ var import_styles = require("./styles.js");
|
|
|
45
45
|
const htmlElements = ["nav", "div"];
|
|
46
46
|
const NavContainer = (props2) => {
|
|
47
47
|
const { label, containerProps, as, children, ...rest } = props2;
|
|
48
|
-
return
|
|
48
|
+
return (
|
|
49
|
+
// @ts-expect-error - styled components are not correctly supporting the alias in typescript
|
|
50
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, { "aria-label": label, ...rest, ...containerProps, as, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledList, { children }) })
|
|
51
|
+
);
|
|
49
52
|
};
|
|
50
53
|
const DivContainer = (props2) => {
|
|
51
54
|
const { label, containerProps, as, children, ...rest } = props2;
|
|
52
|
-
return
|
|
55
|
+
return (
|
|
56
|
+
// @ts-expect-error - styled components are not correctly supporting the alias in typescript
|
|
57
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledContainer, { ...rest, ...containerProps, as, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledList, { "aria-label": label, children }) })
|
|
58
|
+
);
|
|
53
59
|
};
|
|
54
60
|
const DSBreadcrumb = (props2) => {
|
|
55
61
|
const propsWithDefaults = (0, import_ds_props_helpers.useMemoMergePropsWithDefault)(props2, import_react_desc_prop_types.defaultProps);
|
|
@@ -57,30 +63,20 @@ const DSBreadcrumb = (props2) => {
|
|
|
57
63
|
const [addRef, onKeyDown] = (0, import_useKeyboardNavigation.useKeyboardNavigation)({ isTitle });
|
|
58
64
|
const safeElement = (0, import_react.useMemo)(() => htmlElements.indexOf(as) > -1 ? as : "nav", [as]);
|
|
59
65
|
const Container = as === "nav" ? NavContainer : DivContainer;
|
|
60
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
61
|
-
|
|
62
|
-
{
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
}) : (0, import_react.cloneElement)(child, {
|
|
75
|
-
childIndex,
|
|
76
|
-
addRef,
|
|
77
|
-
onKeyDown,
|
|
78
|
-
trailingSlash,
|
|
79
|
-
isTitle
|
|
80
|
-
})
|
|
81
|
-
)
|
|
82
|
-
}
|
|
83
|
-
);
|
|
66
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Container, { label, ...rest, containerProps, as: safeElement, children: import_react.default.Children.map(
|
|
67
|
+
children,
|
|
68
|
+
(child, childIndex) => childIndex < children.length - 1 ? (0, import_react.cloneElement)(child, {
|
|
69
|
+
childIndex,
|
|
70
|
+
addRef,
|
|
71
|
+
onKeyDown
|
|
72
|
+
}) : (0, import_react.cloneElement)(child, {
|
|
73
|
+
childIndex,
|
|
74
|
+
addRef,
|
|
75
|
+
onKeyDown,
|
|
76
|
+
trailingSlash,
|
|
77
|
+
isTitle
|
|
78
|
+
})
|
|
79
|
+
) });
|
|
84
80
|
};
|
|
85
81
|
DSBreadcrumb.Item = import_DSBreadcrumbItem.default;
|
|
86
82
|
const props = {
|
|
@@ -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
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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;",
|
|
6
6
|
"names": ["props", "React", "DSBreadcrumbItem"]
|
|
7
7
|
}
|
|
@@ -35,8 +35,8 @@ __export(DSBreadcrumbItem_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(DSBreadcrumbItem_exports);
|
|
36
36
|
var React = __toESM(require("react"));
|
|
37
37
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
38
|
-
var import_react = __toESM(require("react"));
|
|
39
38
|
var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
|
|
39
|
+
var import_react = __toESM(require("react"));
|
|
40
40
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
41
41
|
var import_styles = require("./styles.js");
|
|
42
42
|
const DSBreadcrumbItem = (props2) => {
|
|
@@ -55,33 +55,23 @@ const DSBreadcrumbItem = (props2) => {
|
|
|
55
55
|
},
|
|
56
56
|
[isTitle, onClick]
|
|
57
57
|
);
|
|
58
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
-
import_styles.
|
|
58
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styles.StyledCrumbWrapper, { "aria-current": ariaCurrent, isTitle, trailingSlash, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
+
import_styles.StyledLink,
|
|
60
60
|
{
|
|
61
|
-
"
|
|
62
|
-
|
|
61
|
+
variant: "link",
|
|
62
|
+
component: as,
|
|
63
|
+
href,
|
|
64
|
+
onClick: handleOnClick,
|
|
65
|
+
tabIndex: isTitle ? -1 : 0,
|
|
66
|
+
active,
|
|
67
|
+
onKeyDown: (e) => onKeyDown(e, childIndex ?? -1, handleOnClick),
|
|
63
68
|
isTitle,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
"data-testid": "breadcrumb-item-content",
|
|
69
|
-
variant: "link",
|
|
70
|
-
component: as,
|
|
71
|
-
href,
|
|
72
|
-
onClick: handleOnClick,
|
|
73
|
-
tabIndex: isTitle ? -1 : 0,
|
|
74
|
-
active,
|
|
75
|
-
onKeyDown: (e) => onKeyDown(e, childIndex ?? -1, handleOnClick),
|
|
76
|
-
isTitle,
|
|
77
|
-
color,
|
|
78
|
-
innerRef: addRef,
|
|
79
|
-
...rest,
|
|
80
|
-
children: label
|
|
81
|
-
}
|
|
82
|
-
)
|
|
69
|
+
color,
|
|
70
|
+
innerRef: addRef,
|
|
71
|
+
...rest,
|
|
72
|
+
children: label
|
|
83
73
|
}
|
|
84
|
-
);
|
|
74
|
+
) });
|
|
85
75
|
};
|
|
86
76
|
const props = {
|
|
87
77
|
/**
|
|
@@ -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
|
|
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' ? '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 return (\n <StyledCrumbWrapper aria-current={ariaCurrent} isTitle={isTitle} trailingSlash={trailingSlash}>\n <StyledLink\n variant=\"link\"\n component={as}\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 {...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;AD4BjB;AA5BN,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,WAAW,SAAS;AAAA,IACpC;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;AAEA,SACE,4CAAC,oCAAmB,gBAAc,aAAa,SAAkB,eAC/D;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAW;AAAA,MACX;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,MACT,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
|
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var constants_exports = {};
|
|
30
|
+
__export(constants_exports, {
|
|
31
|
+
BREADCRUMB_DATA_TESTID: () => BREADCRUMB_DATA_TESTID,
|
|
32
|
+
BREADCRUMB_SLOTS: () => BREADCRUMB_SLOTS,
|
|
33
|
+
DSBreadcrumbName: () => DSBreadcrumbName
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(constants_exports);
|
|
36
|
+
var React = __toESM(require("react"));
|
|
37
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
38
|
+
const DSBreadcrumbName = "DSBreadcrumb";
|
|
39
|
+
const BREADCRUMB_SLOTS = {
|
|
40
|
+
CONTAINER: "container",
|
|
41
|
+
CRUMBWRAPPER: "crumb-wrapper",
|
|
42
|
+
LINK: "link",
|
|
43
|
+
LIST: "list"
|
|
44
|
+
};
|
|
45
|
+
const BREADCRUMB_DATA_TESTID = (0, import_ds_system.slotObjectToDataTestIds)(DSBreadcrumbName, BREADCRUMB_SLOTS);
|
|
46
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/constants/index.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAwC;AAEjC,MAAM,mBAAmB;AAGzB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,cAAc;AAAA,EACd,MAAM;AAAA,EACN,MAAM;AACR;AAGO,MAAM,6BAAyB,0CAAwB,kBAAkB,gBAAgB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/cjs/index.js
CHANGED
|
@@ -5,6 +5,10 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
|
5
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
6
|
var __getProtoOf = Object.getPrototypeOf;
|
|
7
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
8
12
|
var __copyProps = (to, from, except, desc) => {
|
|
9
13
|
if (from && typeof from === "object" || typeof from === "function") {
|
|
10
14
|
for (let key of __getOwnPropNames(from))
|
|
@@ -24,9 +28,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
24
28
|
));
|
|
25
29
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
26
30
|
var src_exports = {};
|
|
31
|
+
__export(src_exports, {
|
|
32
|
+
BREADCRUMB_DATA_TESTID: () => import_constants.BREADCRUMB_DATA_TESTID,
|
|
33
|
+
BREADCRUMB_SLOTS: () => import_constants.BREADCRUMB_SLOTS,
|
|
34
|
+
DSBreadcrumbName: () => import_constants.DSBreadcrumbName
|
|
35
|
+
});
|
|
27
36
|
module.exports = __toCommonJS(src_exports);
|
|
28
37
|
var React = __toESM(require("react"));
|
|
29
38
|
__reExport(src_exports, require("./DSBreadcrumb.js"), module.exports);
|
|
30
39
|
__reExport(src_exports, require("./DSBreadcrumbItem.js"), module.exports);
|
|
31
40
|
__reExport(src_exports, require("./react-desc-prop-types.js"), module.exports);
|
|
41
|
+
var import_constants = require("./constants/index.js");
|
|
32
42
|
//# sourceMappingURL=index.js.map
|
package/dist/cjs/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/index.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export * from './DSBreadcrumb.js';\nexport * from './DSBreadcrumbItem.js';\nexport * from './react-desc-prop-types.js';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,8BAAd;AACA,wBAAc,kCADd;AAEA,wBAAc,uCAFd;AAGA,uBAA2E;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/cjs/styles.js
CHANGED
|
@@ -37,13 +37,14 @@ module.exports = __toCommonJS(styles_exports);
|
|
|
37
37
|
var React = __toESM(require("react"));
|
|
38
38
|
var import_ds_system = require("@elliemae/ds-system");
|
|
39
39
|
var import_ds_typography = require("@elliemae/ds-typography");
|
|
40
|
+
var import_constants = require("./constants/index.js");
|
|
40
41
|
const handleColor = (theme, isActive, color, isTitle) => {
|
|
41
42
|
if (isActive) return theme.colors.neutral[800];
|
|
42
43
|
if (color) return color;
|
|
43
44
|
if (isTitle) return theme.colors.neutral[700];
|
|
44
45
|
return theme.colors.brand[600];
|
|
45
46
|
};
|
|
46
|
-
const StyledList = import_ds_system.styled.
|
|
47
|
+
const StyledList = (0, import_ds_system.styled)(`ol`, { name: import_constants.DSBreadcrumbName, slot: import_constants.BREADCRUMB_SLOTS.LIST })`
|
|
47
48
|
width: 100%;
|
|
48
49
|
list-style: none;
|
|
49
50
|
display: flex;
|
|
@@ -53,7 +54,10 @@ const StyledList = import_ds_system.styled.ol`
|
|
|
53
54
|
margin-left: 0;
|
|
54
55
|
}
|
|
55
56
|
`;
|
|
56
|
-
const StyledCrumbWrapper = import_ds_system.styled
|
|
57
|
+
const StyledCrumbWrapper = (0, import_ds_system.styled)(`li`, {
|
|
58
|
+
name: import_constants.DSBreadcrumbName,
|
|
59
|
+
slot: import_constants.BREADCRUMB_SLOTS.CRUMBWRAPPER
|
|
60
|
+
})`
|
|
57
61
|
display: inline-flex;
|
|
58
62
|
align-items: center;
|
|
59
63
|
flex-shrink: 20;
|
|
@@ -78,12 +82,15 @@ const StyledCrumbWrapper = import_ds_system.styled.li`
|
|
|
78
82
|
}
|
|
79
83
|
`}
|
|
80
84
|
`;
|
|
81
|
-
const StyledContainer = import_ds_system.styled
|
|
85
|
+
const StyledContainer = (0, import_ds_system.styled)(`nav`, {
|
|
86
|
+
name: import_constants.DSBreadcrumbName,
|
|
87
|
+
slot: import_constants.BREADCRUMB_SLOTS.CONTAINER
|
|
88
|
+
})`
|
|
82
89
|
display: flex;
|
|
83
90
|
align-items: center;
|
|
84
91
|
padding: 0;
|
|
85
92
|
`;
|
|
86
|
-
const StyledLink = (0, import_ds_system.styled)(import_ds_typography.DSTypography)`
|
|
93
|
+
const StyledLink = (0, import_ds_system.styled)(import_ds_typography.DSTypography, { name: import_constants.DSBreadcrumbName, slot: import_constants.BREADCRUMB_SLOTS.LINK })`
|
|
87
94
|
white-space: nowrap;
|
|
88
95
|
overflow: hidden;
|
|
89
96
|
text-overflow: ellipsis;
|
package/dist/cjs/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styles.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\n\nconst handleColor = (theme: Theme, isActive: boolean, color: string, isTitle: boolean): string => {\n if (isActive) return theme.colors.neutral[800];\n if (color) return color;\n if (isTitle) return theme.colors.neutral[700];\n return theme.colors.brand[600];\n};\n\nconst StyledList = styled.
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAuB;AACvB,2BAA6B;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\nimport { DSBreadcrumbName, BREADCRUMB_SLOTS } from './constants/index.js';\n\nconst handleColor = (theme: Theme, isActive: boolean, color: string, isTitle: boolean): string => {\n if (isActive) return theme.colors.neutral[800];\n if (color) return color;\n if (isTitle) return theme.colors.neutral[700];\n return theme.colors.brand[600];\n};\n\nconst StyledList = styled(`ol`, { name: DSBreadcrumbName, slot: BREADCRUMB_SLOTS.LIST })<DSBreadcrumbItemT.Props>`\n width: 100%;\n list-style: none;\n display: flex;\n padding: 0;\n margin: 0;\n li:first-child * {\n margin-left: 0;\n }\n`;\n\nconst StyledCrumbWrapper = styled(`li`, {\n name: DSBreadcrumbName,\n slot: BREADCRUMB_SLOTS.CRUMBWRAPPER,\n})<DSBreadcrumbItemT.Props>`\n display: inline-flex;\n align-items: center;\n flex-shrink: 20;\n transition: flex-shrink 0.1s cubic-bezier(0.64, 0, 0.35, 1);\n min-height: 1.231rem;\n min-width: 10px;\n &:focus-within {\n flex-shrink: 0;\n }\n &:hover {\n flex-shrink: 0;\n }\n ${({ theme, isTitle, trailingSlash }) =>\n isTitle || !trailingSlash\n ? `&:not(:last-child):after {\n display: inline-block;\n content: '/';\n color: ${theme.colors.neutral[700]};\n }\n `\n : `&:after {\n display: inline-block;\n content: '/';\n color: ${theme.colors.neutral[700]};\n }\n `}\n`;\n\nconst StyledContainer = styled(`nav`, {\n name: DSBreadcrumbName,\n slot: BREADCRUMB_SLOTS.CONTAINER,\n})<DSBreadcrumbItemT.Props>`\n display: flex;\n align-items: center;\n padding: 0;\n`;\n\nconst StyledLink = styled(DSTypography, { name: DSBreadcrumbName, slot: BREADCRUMB_SLOTS.LINK })<\n Partial<DSBreadcrumbItemT.Props>\n>`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-decoration: none;\n outline: none;\n margin: 0 2px;\n border: 2px solid transparent;\n -webkit-text-stroke: 0.4px transparent;\n line-height: 1.5385rem;\n background: transparent;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme, active, color = '', isTitle }) => handleColor(theme, !!active, color, !!isTitle)};\n &:hover {\n ${({ theme, color, isTitle }) =>\n isTitle\n ? `\n color: ${theme.colors.neutral[700]};\n cursor: default;`\n : `\n color: ${color || theme.colors.brand[800]};\n cursor: pointer;\n -webkit-text-stroke: 0.4px ${color || theme.colors.brand[800]};\n `}\n }\n &:focus {\n ${({ theme, isTitle }) =>\n isTitle\n ? `\n color: ${theme.colors.neutral[700]};`\n : `\n border: 2px solid ${theme.colors.brand[700]};\n border-radius: 2px;\n `}\n }\n`;\n\nexport { StyledList, StyledCrumbWrapper, StyledContainer, StyledLink };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,uBAAuB;AACvB,2BAA6B;AAE7B,uBAAmD;AAEnD,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC7C,MAAI,MAAO,QAAO;AAClB,MAAI,QAAS,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC5C,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B;AAEA,MAAM,iBAAa,yBAAO,MAAM,EAAE,MAAM,mCAAkB,MAAM,kCAAiB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvF,MAAM,yBAAqB,yBAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaG,CAAC,EAAE,OAAO,SAAS,cAAc,MACjC,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,MAG9B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,GAEnC;AAAA;AAGH,MAAM,sBAAkB,yBAAO,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,kCAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,iBAAa,yBAAO,mCAAc,EAAE,MAAM,mCAAkB,MAAM,kCAAiB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAa9E,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA,WAC9C,CAAC,EAAE,OAAO,QAAQ,QAAQ,IAAI,QAAQ,MAAM,YAAY,OAAO,CAAC,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,CAAC;AAAA;AAAA,MAE/F,CAAC,EAAE,OAAO,OAAO,QAAQ,MACzB,UACI;AAAA,mBACS,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,8BAElC;AAAA,mBACS,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,uCAEZ,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,KAClE;AAAA;AAAA;AAAA,MAGC,CAAC,EAAE,OAAO,QAAQ,MAClB,UACI;AAAA,kBACQ,MAAM,OAAO,QAAQ,GAAG,CAAC,MACjC;AAAA,4BACkB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,KAE9C;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/DSBreadcrumb.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import React2, { cloneElement, useMemo } from "react";
|
|
4
3
|
import { PropTypes, describe, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
4
|
+
import React2, { cloneElement, useMemo } from "react";
|
|
5
5
|
import DSBreadcrumbItem from "./DSBreadcrumbItem.js";
|
|
6
6
|
import { useKeyboardNavigation } from "./hooks/useKeyboardNavigation.js";
|
|
7
7
|
import { defaultProps } from "./react-desc-prop-types.js";
|
|
@@ -9,11 +9,17 @@ import { StyledContainer, StyledList } from "./styles.js";
|
|
|
9
9
|
const htmlElements = ["nav", "div"];
|
|
10
10
|
const NavContainer = (props2) => {
|
|
11
11
|
const { label, containerProps, as, children, ...rest } = props2;
|
|
12
|
-
return
|
|
12
|
+
return (
|
|
13
|
+
// @ts-expect-error - styled components are not correctly supporting the alias in typescript
|
|
14
|
+
/* @__PURE__ */ jsx(StyledContainer, { "aria-label": label, ...rest, ...containerProps, as, children: /* @__PURE__ */ jsx(StyledList, { children }) })
|
|
15
|
+
);
|
|
13
16
|
};
|
|
14
17
|
const DivContainer = (props2) => {
|
|
15
18
|
const { label, containerProps, as, children, ...rest } = props2;
|
|
16
|
-
return
|
|
19
|
+
return (
|
|
20
|
+
// @ts-expect-error - styled components are not correctly supporting the alias in typescript
|
|
21
|
+
/* @__PURE__ */ jsx(StyledContainer, { ...rest, ...containerProps, as, children: /* @__PURE__ */ jsx(StyledList, { "aria-label": label, children }) })
|
|
22
|
+
);
|
|
17
23
|
};
|
|
18
24
|
const DSBreadcrumb = (props2) => {
|
|
19
25
|
const propsWithDefaults = useMemoMergePropsWithDefault(props2, defaultProps);
|
|
@@ -21,30 +27,20 @@ const DSBreadcrumb = (props2) => {
|
|
|
21
27
|
const [addRef, onKeyDown] = useKeyboardNavigation({ isTitle });
|
|
22
28
|
const safeElement = useMemo(() => htmlElements.indexOf(as) > -1 ? as : "nav", [as]);
|
|
23
29
|
const Container = as === "nav" ? NavContainer : DivContainer;
|
|
24
|
-
return /* @__PURE__ */ jsx(
|
|
25
|
-
|
|
26
|
-
{
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}) : cloneElement(child, {
|
|
39
|
-
childIndex,
|
|
40
|
-
addRef,
|
|
41
|
-
onKeyDown,
|
|
42
|
-
trailingSlash,
|
|
43
|
-
isTitle
|
|
44
|
-
})
|
|
45
|
-
)
|
|
46
|
-
}
|
|
47
|
-
);
|
|
30
|
+
return /* @__PURE__ */ jsx(Container, { label, ...rest, containerProps, as: safeElement, children: React2.Children.map(
|
|
31
|
+
children,
|
|
32
|
+
(child, childIndex) => childIndex < children.length - 1 ? cloneElement(child, {
|
|
33
|
+
childIndex,
|
|
34
|
+
addRef,
|
|
35
|
+
onKeyDown
|
|
36
|
+
}) : cloneElement(child, {
|
|
37
|
+
childIndex,
|
|
38
|
+
addRef,
|
|
39
|
+
onKeyDown,
|
|
40
|
+
trailingSlash,
|
|
41
|
+
isTitle
|
|
42
|
+
})
|
|
43
|
+
) });
|
|
48
44
|
};
|
|
49
45
|
DSBreadcrumb.Item = DSBreadcrumbItem;
|
|
50
46
|
const props = {
|
|
@@ -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
|
|
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, { 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;",
|
|
6
6
|
"names": ["React", "props"]
|
|
7
7
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
|
-
import React2 from "react";
|
|
4
3
|
import { PropTypes, describe, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
|
|
4
|
+
import React2 from "react";
|
|
5
5
|
import { defaultItemProps } from "./react-desc-prop-types.js";
|
|
6
|
-
import {
|
|
6
|
+
import { StyledCrumbWrapper, StyledLink } from "./styles.js";
|
|
7
7
|
const DSBreadcrumbItem = (props2) => {
|
|
8
8
|
const propsWithDefaults = useMemoMergePropsWithDefault(props2, defaultItemProps);
|
|
9
9
|
const { as, active, href, onClick, onKeyDown, addRef, isTitle, trailingSlash, label, childIndex, color, ...rest } = propsWithDefaults;
|
|
@@ -20,33 +20,23 @@ const DSBreadcrumbItem = (props2) => {
|
|
|
20
20
|
},
|
|
21
21
|
[isTitle, onClick]
|
|
22
22
|
);
|
|
23
|
-
return /* @__PURE__ */ jsx(
|
|
24
|
-
|
|
23
|
+
return /* @__PURE__ */ jsx(StyledCrumbWrapper, { "aria-current": ariaCurrent, isTitle, trailingSlash, children: /* @__PURE__ */ jsx(
|
|
24
|
+
StyledLink,
|
|
25
25
|
{
|
|
26
|
-
"
|
|
27
|
-
|
|
26
|
+
variant: "link",
|
|
27
|
+
component: as,
|
|
28
|
+
href,
|
|
29
|
+
onClick: handleOnClick,
|
|
30
|
+
tabIndex: isTitle ? -1 : 0,
|
|
31
|
+
active,
|
|
32
|
+
onKeyDown: (e) => onKeyDown(e, childIndex ?? -1, handleOnClick),
|
|
28
33
|
isTitle,
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
"data-testid": "breadcrumb-item-content",
|
|
34
|
-
variant: "link",
|
|
35
|
-
component: as,
|
|
36
|
-
href,
|
|
37
|
-
onClick: handleOnClick,
|
|
38
|
-
tabIndex: isTitle ? -1 : 0,
|
|
39
|
-
active,
|
|
40
|
-
onKeyDown: (e) => onKeyDown(e, childIndex ?? -1, handleOnClick),
|
|
41
|
-
isTitle,
|
|
42
|
-
color,
|
|
43
|
-
innerRef: addRef,
|
|
44
|
-
...rest,
|
|
45
|
-
children: label
|
|
46
|
-
}
|
|
47
|
-
)
|
|
34
|
+
color,
|
|
35
|
+
innerRef: addRef,
|
|
36
|
+
...rest,
|
|
37
|
+
children: label
|
|
48
38
|
}
|
|
49
|
-
);
|
|
39
|
+
) });
|
|
50
40
|
};
|
|
51
41
|
const props = {
|
|
52
42
|
/**
|
|
@@ -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
|
|
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' ? '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 return (\n <StyledCrumbWrapper aria-current={ariaCurrent} isTitle={isTitle} trailingSlash={trailingSlash}>\n <StyledLink\n variant=\"link\"\n component={as}\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 {...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;AC4BjB;AA5BN,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,WAAW,SAAS;AAAA,IACpC;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;AAEA,SACE,oBAAC,sBAAmB,gBAAc,aAAa,SAAkB,eAC/D;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,WAAW;AAAA,MACX;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,MACT,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
|
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { slotObjectToDataTestIds } from "@elliemae/ds-system";
|
|
3
|
+
const DSBreadcrumbName = "DSBreadcrumb";
|
|
4
|
+
const BREADCRUMB_SLOTS = {
|
|
5
|
+
CONTAINER: "container",
|
|
6
|
+
CRUMBWRAPPER: "crumb-wrapper",
|
|
7
|
+
LINK: "link",
|
|
8
|
+
LIST: "list"
|
|
9
|
+
};
|
|
10
|
+
const BREADCRUMB_DATA_TESTID = slotObjectToDataTestIds(DSBreadcrumbName, BREADCRUMB_SLOTS);
|
|
11
|
+
export {
|
|
12
|
+
BREADCRUMB_DATA_TESTID,
|
|
13
|
+
BREADCRUMB_SLOTS,
|
|
14
|
+
DSBreadcrumbName
|
|
15
|
+
};
|
|
16
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
|
|
4
|
+
"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"],
|
|
5
|
+
"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;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/dist/esm/index.js
CHANGED
|
@@ -2,4 +2,10 @@ import * as React from "react";
|
|
|
2
2
|
export * from "./DSBreadcrumb.js";
|
|
3
3
|
export * from "./DSBreadcrumbItem.js";
|
|
4
4
|
export * from "./react-desc-prop-types.js";
|
|
5
|
+
import { DSBreadcrumbName, BREADCRUMB_SLOTS, BREADCRUMB_DATA_TESTID } from "./constants/index.js";
|
|
6
|
+
export {
|
|
7
|
+
BREADCRUMB_DATA_TESTID,
|
|
8
|
+
BREADCRUMB_SLOTS,
|
|
9
|
+
DSBreadcrumbName
|
|
10
|
+
};
|
|
5
11
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './DSBreadcrumb.js';\nexport * from './DSBreadcrumbItem.js';\nexport * from './react-desc-prop-types.js';\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
4
|
+
"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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;AACd,SAAS,kBAAkB,kBAAkB,8BAA8B;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styles.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
2
|
import { styled } from "@elliemae/ds-system";
|
|
3
3
|
import { DSTypography } from "@elliemae/ds-typography";
|
|
4
|
+
import { DSBreadcrumbName, BREADCRUMB_SLOTS } from "./constants/index.js";
|
|
4
5
|
const handleColor = (theme, isActive, color, isTitle) => {
|
|
5
6
|
if (isActive) return theme.colors.neutral[800];
|
|
6
7
|
if (color) return color;
|
|
7
8
|
if (isTitle) return theme.colors.neutral[700];
|
|
8
9
|
return theme.colors.brand[600];
|
|
9
10
|
};
|
|
10
|
-
const StyledList = styled.
|
|
11
|
+
const StyledList = styled(`ol`, { name: DSBreadcrumbName, slot: BREADCRUMB_SLOTS.LIST })`
|
|
11
12
|
width: 100%;
|
|
12
13
|
list-style: none;
|
|
13
14
|
display: flex;
|
|
@@ -17,7 +18,10 @@ const StyledList = styled.ol`
|
|
|
17
18
|
margin-left: 0;
|
|
18
19
|
}
|
|
19
20
|
`;
|
|
20
|
-
const StyledCrumbWrapper = styled
|
|
21
|
+
const StyledCrumbWrapper = styled(`li`, {
|
|
22
|
+
name: DSBreadcrumbName,
|
|
23
|
+
slot: BREADCRUMB_SLOTS.CRUMBWRAPPER
|
|
24
|
+
})`
|
|
21
25
|
display: inline-flex;
|
|
22
26
|
align-items: center;
|
|
23
27
|
flex-shrink: 20;
|
|
@@ -42,12 +46,15 @@ const StyledCrumbWrapper = styled.li`
|
|
|
42
46
|
}
|
|
43
47
|
`}
|
|
44
48
|
`;
|
|
45
|
-
const StyledContainer = styled
|
|
49
|
+
const StyledContainer = styled(`nav`, {
|
|
50
|
+
name: DSBreadcrumbName,
|
|
51
|
+
slot: BREADCRUMB_SLOTS.CONTAINER
|
|
52
|
+
})`
|
|
46
53
|
display: flex;
|
|
47
54
|
align-items: center;
|
|
48
55
|
padding: 0;
|
|
49
56
|
`;
|
|
50
|
-
const StyledLink = styled(DSTypography)`
|
|
57
|
+
const StyledLink = styled(DSTypography, { name: DSBreadcrumbName, slot: BREADCRUMB_SLOTS.LINK })`
|
|
51
58
|
white-space: nowrap;
|
|
52
59
|
overflow: hidden;
|
|
53
60
|
text-overflow: ellipsis;
|
package/dist/esm/styles.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styles.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\n\nconst handleColor = (theme: Theme, isActive: boolean, color: string, isTitle: boolean): string => {\n if (isActive) return theme.colors.neutral[800];\n if (color) return color;\n if (isTitle) return theme.colors.neutral[700];\n return theme.colors.brand[600];\n};\n\nconst StyledList = styled.
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-params */\nimport type { Theme } from '@elliemae/pui-theme';\nimport { styled } from '@elliemae/ds-system';\nimport { DSTypography } from '@elliemae/ds-typography';\nimport type { DSBreadcrumbItemT } from './react-desc-prop-types.js';\nimport { DSBreadcrumbName, BREADCRUMB_SLOTS } from './constants/index.js';\n\nconst handleColor = (theme: Theme, isActive: boolean, color: string, isTitle: boolean): string => {\n if (isActive) return theme.colors.neutral[800];\n if (color) return color;\n if (isTitle) return theme.colors.neutral[700];\n return theme.colors.brand[600];\n};\n\nconst StyledList = styled(`ol`, { name: DSBreadcrumbName, slot: BREADCRUMB_SLOTS.LIST })<DSBreadcrumbItemT.Props>`\n width: 100%;\n list-style: none;\n display: flex;\n padding: 0;\n margin: 0;\n li:first-child * {\n margin-left: 0;\n }\n`;\n\nconst StyledCrumbWrapper = styled(`li`, {\n name: DSBreadcrumbName,\n slot: BREADCRUMB_SLOTS.CRUMBWRAPPER,\n})<DSBreadcrumbItemT.Props>`\n display: inline-flex;\n align-items: center;\n flex-shrink: 20;\n transition: flex-shrink 0.1s cubic-bezier(0.64, 0, 0.35, 1);\n min-height: 1.231rem;\n min-width: 10px;\n &:focus-within {\n flex-shrink: 0;\n }\n &:hover {\n flex-shrink: 0;\n }\n ${({ theme, isTitle, trailingSlash }) =>\n isTitle || !trailingSlash\n ? `&:not(:last-child):after {\n display: inline-block;\n content: '/';\n color: ${theme.colors.neutral[700]};\n }\n `\n : `&:after {\n display: inline-block;\n content: '/';\n color: ${theme.colors.neutral[700]};\n }\n `}\n`;\n\nconst StyledContainer = styled(`nav`, {\n name: DSBreadcrumbName,\n slot: BREADCRUMB_SLOTS.CONTAINER,\n})<DSBreadcrumbItemT.Props>`\n display: flex;\n align-items: center;\n padding: 0;\n`;\n\nconst StyledLink = styled(DSTypography, { name: DSBreadcrumbName, slot: BREADCRUMB_SLOTS.LINK })<\n Partial<DSBreadcrumbItemT.Props>\n>`\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-decoration: none;\n outline: none;\n margin: 0 2px;\n border: 2px solid transparent;\n -webkit-text-stroke: 0.4px transparent;\n line-height: 1.5385rem;\n background: transparent;\n font-weight: ${({ theme }) => theme.fontWeights.regular};\n color: ${({ theme, active, color = '', isTitle }) => handleColor(theme, !!active, color, !!isTitle)};\n &:hover {\n ${({ theme, color, isTitle }) =>\n isTitle\n ? `\n color: ${theme.colors.neutral[700]};\n cursor: default;`\n : `\n color: ${color || theme.colors.brand[800]};\n cursor: pointer;\n -webkit-text-stroke: 0.4px ${color || theme.colors.brand[800]};\n `}\n }\n &:focus {\n ${({ theme, isTitle }) =>\n isTitle\n ? `\n color: ${theme.colors.neutral[700]};`\n : `\n border: 2px solid ${theme.colors.brand[700]};\n border-radius: 2px;\n `}\n }\n`;\n\nexport { StyledList, StyledCrumbWrapper, StyledContainer, StyledLink };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACEvB,SAAS,cAAc;AACvB,SAAS,oBAAoB;AAE7B,SAAS,kBAAkB,wBAAwB;AAEnD,MAAM,cAAc,CAAC,OAAc,UAAmB,OAAe,YAA6B;AAChG,MAAI,SAAU,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC7C,MAAI,MAAO,QAAO;AAClB,MAAI,QAAS,QAAO,MAAM,OAAO,QAAQ,GAAG;AAC5C,SAAO,MAAM,OAAO,MAAM,GAAG;AAC/B;AAEA,MAAM,aAAa,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,iBAAiB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWvF,MAAM,qBAAqB,OAAO,MAAM;AAAA,EACtC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaG,CAAC,EAAE,OAAO,SAAS,cAAc,MACjC,WAAW,CAAC,gBACR;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,MAG9B;AAAA;AAAA;AAAA,aAGK,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,GAEnC;AAAA;AAGH,MAAM,kBAAkB,OAAO,OAAO;AAAA,EACpC,MAAM;AAAA,EACN,MAAM,iBAAiB;AACzB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMD,MAAM,aAAa,OAAO,cAAc,EAAE,MAAM,kBAAkB,MAAM,iBAAiB,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAa9E,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,OAAO;AAAA,WAC9C,CAAC,EAAE,OAAO,QAAQ,QAAQ,IAAI,QAAQ,MAAM,YAAY,OAAO,CAAC,CAAC,QAAQ,OAAO,CAAC,CAAC,OAAO,CAAC;AAAA;AAAA,MAE/F,CAAC,EAAE,OAAO,OAAO,QAAQ,MACzB,UACI;AAAA,mBACS,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,8BAElC;AAAA,mBACS,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,uCAEZ,SAAS,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,KAClE;AAAA;AAAA;AAAA,MAGC,CAAC,EAAE,OAAO,QAAQ,MAClB,UACI;AAAA,kBACQ,MAAM,OAAO,QAAQ,GAAG,CAAC,MACjC;AAAA,4BACkB,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,KAE9C;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const DSBreadcrumbName = "DSBreadcrumb";
|
|
2
|
+
export declare const BREADCRUMB_SLOTS: {
|
|
3
|
+
readonly CONTAINER: "container";
|
|
4
|
+
readonly CRUMBWRAPPER: "crumb-wrapper";
|
|
5
|
+
readonly LINK: "link";
|
|
6
|
+
readonly LIST: "list";
|
|
7
|
+
};
|
|
8
|
+
export declare const BREADCRUMB_DATA_TESTID: Record<string, string>;
|
package/dist/types/index.d.ts
CHANGED
package/dist/types/styles.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { DSBreadcrumbItemT } from './react-desc-prop-types.js';
|
|
3
|
-
declare const StyledList: import("styled-components").StyledComponent<"ol", import("@elliemae/ds-system").Theme,
|
|
4
|
-
declare const StyledCrumbWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme,
|
|
5
|
-
declare const StyledContainer: import("styled-components").StyledComponent<"nav", import("@elliemae/ds-system").Theme,
|
|
3
|
+
declare const StyledList: import("styled-components").StyledComponent<"ol", import("@elliemae/ds-system").Theme, DSBreadcrumbItemT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"ol">, never>;
|
|
4
|
+
declare const StyledCrumbWrapper: import("styled-components").StyledComponent<"li", import("@elliemae/ds-system").Theme, DSBreadcrumbItemT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
|
|
5
|
+
declare const StyledContainer: import("styled-components").StyledComponent<"nav", import("@elliemae/ds-system").Theme, DSBreadcrumbItemT.Props & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"nav">, never>;
|
|
6
6
|
declare const StyledLink: import("styled-components").StyledComponent<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>, import("@elliemae/ds-system").Theme, Partial<DSBreadcrumbItemT.Props> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").FC<import("@elliemae/ds-typography").DSTypographyT.Props>>, never>;
|
|
7
7
|
export { StyledList, StyledCrumbWrapper, StyledContainer, StyledLink };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-breadcrumb",
|
|
3
|
-
"version": "3.49.0
|
|
3
|
+
"version": "3.49.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Breadcrumb",
|
|
6
6
|
"files": [
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
42
42
|
},
|
|
43
43
|
"engines": {
|
|
44
|
-
"pnpm": ">=
|
|
45
|
-
"node": ">=
|
|
44
|
+
"pnpm": ">=9",
|
|
45
|
+
"node": ">=22"
|
|
46
46
|
},
|
|
47
47
|
"author": "ICE MT",
|
|
48
48
|
"jestSonar": {
|
|
@@ -52,15 +52,17 @@
|
|
|
52
52
|
"indent": 4
|
|
53
53
|
},
|
|
54
54
|
"dependencies": {
|
|
55
|
-
"@elliemae/ds-props-helpers": "3.49.0
|
|
56
|
-
"@elliemae/ds-system": "3.49.0
|
|
57
|
-
"@elliemae/ds-typography": "3.49.0
|
|
55
|
+
"@elliemae/ds-props-helpers": "3.49.0",
|
|
56
|
+
"@elliemae/ds-system": "3.49.0",
|
|
57
|
+
"@elliemae/ds-typography": "3.49.0"
|
|
58
58
|
},
|
|
59
59
|
"devDependencies": {
|
|
60
60
|
"@elliemae/pui-cli": "9.0.0-next.50",
|
|
61
61
|
"@elliemae/pui-theme": "~2.10.0",
|
|
62
|
+
"jest": "~29.7.0",
|
|
63
|
+
"jest-cli": "~29.7.0",
|
|
62
64
|
"styled-components": "~5.3.9",
|
|
63
|
-
"@elliemae/ds-monorepo-devops": "3.49.0
|
|
65
|
+
"@elliemae/ds-monorepo-devops": "3.49.0"
|
|
64
66
|
},
|
|
65
67
|
"peerDependencies": {
|
|
66
68
|
"@elliemae/pui-theme": "~2.10.0",
|