@activecollab/components 1.0.102 → 1.0.103
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/components/Breadcrumbs/Breadcrumbs.js +15 -10
- package/dist/cjs/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/cjs/components/Breadcrumbs/Styles.js +5 -16
- package/dist/cjs/components/Breadcrumbs/Styles.js.map +1 -1
- package/dist/esm/components/Breadcrumbs/Breadcrumbs.d.ts +1 -1
- package/dist/esm/components/Breadcrumbs/Breadcrumbs.d.ts.map +1 -1
- package/dist/esm/components/Breadcrumbs/Breadcrumbs.js +16 -11
- package/dist/esm/components/Breadcrumbs/Breadcrumbs.js.map +1 -1
- package/dist/esm/components/Breadcrumbs/Styles.d.ts +1 -2
- package/dist/esm/components/Breadcrumbs/Styles.d.ts.map +1 -1
- package/dist/esm/components/Breadcrumbs/Styles.js +3 -11
- package/dist/esm/components/Breadcrumbs/Styles.js.map +1 -1
- package/dist/index.js +21 -24
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -34,13 +34,20 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
|
|
|
34
34
|
var menuBreadcrumbs = 0;
|
|
35
35
|
|
|
36
36
|
var _useMemo = (0, _react.useMemo)(function () {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
if (children instanceof Array) {
|
|
38
|
+
return children.reduce(function (acc, value, index) {
|
|
39
|
+
index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);
|
|
40
|
+
return acc;
|
|
41
|
+
}, {
|
|
42
|
+
x: [],
|
|
43
|
+
y: []
|
|
44
|
+
});
|
|
45
|
+
} else {
|
|
46
|
+
return {
|
|
47
|
+
x: [children],
|
|
48
|
+
y: []
|
|
49
|
+
};
|
|
50
|
+
}
|
|
44
51
|
}, [children, menuBreadcrumbs]),
|
|
45
52
|
x = _useMemo.x,
|
|
46
53
|
y = _useMemo.y;
|
|
@@ -65,9 +72,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
|
|
|
65
72
|
}))))) : null, x.map(function (child, index) {
|
|
66
73
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
|
67
74
|
key: index
|
|
68
|
-
}, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.
|
|
69
|
-
className: "tw-flex"
|
|
70
|
-
}, child));
|
|
75
|
+
}, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/_react.default.createElement(_Styles.StyledBreadcrumbListItem, null, child));
|
|
71
76
|
})));
|
|
72
77
|
};
|
|
73
78
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","children","className","separator","ref","menuBreadcrumbs","reduce","acc","value","index","x","push","y","zIndex","layers","skyscraper","map","child"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAgBO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAIH;AAAA,MAHtBC,QAGsB,QAHtBA,QAGsB;AAAA,MAFtBC,SAEsB,QAFtBA,SAEsB;AAAA,4BADtBC,SACsB;AAAA,MADtBA,SACsB,+BADV,GACU;AACtB,MAAMC,GAAG,GAAG,mBAAgC,IAAhC,CAAZ;AACA,MAAMC,eAAe,GAAG,CAAxB;;AAEA,iBAAiB,oBAAQ,YAAM;AAC7B,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["Breadcrumbs","children","className","separator","ref","menuBreadcrumbs","Array","reduce","acc","value","index","x","push","y","zIndex","layers","skyscraper","map","child"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAgBO,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAIH;AAAA,MAHtBC,QAGsB,QAHtBA,QAGsB;AAAA,MAFtBC,SAEsB,QAFtBA,SAEsB;AAAA,4BADtBC,SACsB;AAAA,MADtBA,SACsB,+BADV,GACU;AACtB,MAAMC,GAAG,GAAG,mBAAgC,IAAhC,CAAZ;AACA,MAAMC,eAAe,GAAG,CAAxB;;AAEA,iBAAiB,oBAAQ,YAAM;AAC7B,QAAIJ,QAAQ,YAAYK,KAAxB,EAA+B;AAC7B,aAAOL,QAAQ,CAACM,MAAT,CACL,UAACC,GAAD,EAAMC,KAAN,EAAaC,KAAb,EAAuB;AACrBA,QAAAA,KAAK,IAAIL,eAAT,GAA2BG,GAAG,CAACG,CAAJ,CAAMC,IAAN,CAAWH,KAAX,CAA3B,GAA+CD,GAAG,CAACK,CAAJ,CAAMD,IAAN,CAAWH,KAAX,CAA/C;AACA,eAAOD,GAAP;AACD,OAJI,EAKL;AAAEG,QAAAA,CAAC,EAAE,EAAL;AAASE,QAAAA,CAAC,EAAE;AAAZ,OALK,CAAP;AAOD,KARD,MAQO;AACL,aAAO;AAAEF,QAAAA,CAAC,EAAE,CAACV,QAAD,CAAL;AAAiBY,QAAAA,CAAC,EAAE;AAApB,OAAP;AACD;AACF,GAZgB,EAYd,CAACZ,QAAD,EAAWI,eAAX,CAZc,CAAjB;AAAA,MAAQM,CAAR,YAAQA,CAAR;AAAA,MAAWE,CAAX,YAAWA,CAAX;;AAcA,sBACE,6BAAC,wBAAD;AAAkB,IAAA,SAAS,EAAEX,SAA7B;AAAwC,IAAA,GAAG,EAAEE;AAA7C,kBACE,6BAAC,mBAAD,QACGC,eAAe,GAAG,CAAlB,gBACC,6BAAC,0BAAD,qBACE,6BAAC,sBAAD;AAAsB,IAAA,KAAK,EAAE;AAAES,MAAAA,MAAM,EAAEC,SAAOC;AAAjB;AAA7B,kBACE,6BAAC,UAAD;AACE,IAAA,MAAM,eACJ,6BAAC,cAAD;AAAQ,MAAA,OAAO,EAAC;AAAhB,oBACE,6BAAC,mBAAD,OADF;AAFJ,kBAOE,6BAAC,UAAD;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGH,CAAC,CAACI,GAAF,CAAM,UAACC,KAAD,EAAQR,KAAR;AAAA,wBACL,6BAAC,cAAD;AAAU,MAAA,GAAG,EAAEA;AAAf,OAAuBQ,KAAvB,CADK;AAAA,GAAN,CADH,CAPF,CADF,CADF,CADD,GAkBG,IAnBN,EAoBGP,CAAC,CAACM,GAAF,CAAM,UAACC,KAAD,EAAQR,KAAR,EAAkB;AACvB,wBACE,6BAAC,cAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA;AAArB,OACGA,KAAK,GAAG,CAAR,IAAaL,eAAe,GAAG,CAA/B,gBACC,6BAAC,gCAAD,QAA2BF,SAA3B,CADD,GAEG,IAHN,eAIE,6BAAC,gCAAD,QAA2Be,KAA3B,CAJF,CADF;AAQD,GATA,CApBH,CADF,CADF;AAmCD,CAzDM","sourcesContent":["import React, { ReactElement, useRef, useMemo } from \"react\";\nimport { LayerContextProvider, layers } from \"../..\";\nimport { Button } from \"../Button\";\nimport { TreeDotsIcon } from \"../Icons\";\nimport { List, ListItem } from \"../List\";\nimport { Menu } from \"../Menu\";\nimport {\n StyledListMenuItem,\n StyledNavElement,\n StyledOList,\n StyledBreadcrumbListItem,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n /** Children type of node or string */\n children: ReactElement[] | ReactElement;\n /** ClassName */\n className?: string;\n /** Separator */\n separator?: ReactElement | string;\n}\n\nexport const Breadcrumbs = ({\n children,\n className,\n separator = \"/\",\n}: BreadcrumbsProps) => {\n const ref = useRef<null | HTMLUListElement>(null);\n const menuBreadcrumbs = 0;\n\n const { x, y } = useMemo(() => {\n if (children instanceof Array) {\n return children.reduce(\n (acc, value, index) => {\n index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);\n return acc;\n },\n { x: [], y: [] } as { x: ReactElement[]; y: ReactElement[] }\n );\n } else {\n return { x: [children], y: [] };\n }\n }, [children, menuBreadcrumbs]);\n\n return (\n <StyledNavElement className={className} ref={ref}>\n <StyledOList>\n {menuBreadcrumbs > 0 ? (\n <StyledListMenuItem>\n <LayerContextProvider value={{ zIndex: layers.skyscraper }}>\n <Menu\n target={\n <Button variant=\"text gray\">\n <TreeDotsIcon />\n </Button>\n }\n >\n <List className=\"tw-py-2\">\n {y.map((child, index) => (\n <ListItem key={index}>{child}</ListItem>\n ))}\n </List>\n </Menu>\n </LayerContextProvider>\n </StyledListMenuItem>\n ) : null}\n {x.map((child, index) => {\n return (\n <React.Fragment key={index}>\n {index > 0 || menuBreadcrumbs > 0 ? (\n <StyledBreadcrumbListItem>{separator}</StyledBreadcrumbListItem>\n ) : null}\n <StyledBreadcrumbListItem>{child}</StyledBreadcrumbListItem>\n </React.Fragment>\n );\n })}\n </StyledOList>\n </StyledNavElement>\n );\n};\n"],"file":"Breadcrumbs.js"}
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.StyledOList = exports.StyledNavElement = exports.StyledListMenuItem = exports.StyledBreadcrumbListItem = void 0;
|
|
7
7
|
|
|
8
8
|
var _styledComponents = _interopRequireDefault(require("styled-components"));
|
|
9
9
|
|
|
@@ -55,24 +55,13 @@ var StyledListMenuItem = _styledComponents.default.li.withConfig({
|
|
|
55
55
|
exports.StyledListMenuItem = StyledListMenuItem;
|
|
56
56
|
StyledListMenuItem.displayName = "StyledListMenuItem";
|
|
57
57
|
|
|
58
|
-
var
|
|
59
|
-
displayName: "
|
|
58
|
+
var StyledBreadcrumbListItem = _styledComponents.default.li.withConfig({
|
|
59
|
+
displayName: "Styles__StyledBreadcrumbListItem",
|
|
60
60
|
componentId: "sc-rxaesd-3"
|
|
61
61
|
})(["", ""], {
|
|
62
62
|
"display": "flex"
|
|
63
63
|
});
|
|
64
64
|
|
|
65
|
-
exports.
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
var StyledSeparator = _styledComponents.default.li.withConfig({
|
|
69
|
-
displayName: "Styles__StyledSeparator",
|
|
70
|
-
componentId: "sc-rxaesd-4"
|
|
71
|
-
})(["", ""], {
|
|
72
|
-
"marginLeft": "1rem",
|
|
73
|
-
"marginRight": "1rem"
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
exports.StyledSeparator = StyledSeparator;
|
|
77
|
-
StyledSeparator.displayName = "StyledSeparator";
|
|
65
|
+
exports.StyledBreadcrumbListItem = StyledBreadcrumbListItem;
|
|
66
|
+
StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
|
|
78
67
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["StyledNavElement","styled","nav","FontStyle","BoxSizingStyle","displayName","StyledOList","ul","StyledListMenuItem","li","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["StyledNavElement","styled","nav","FontStyle","BoxSizingStyle","displayName","StyledOList","ul","StyledListMenuItem","li","StyledBreadcrumbListItem"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;AAEO,IAAMA,gBAAgB,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,4BACvB;AAAA;AAAA,CADuB,EAEvB;AAAA;AAAA,CAFuB,EAGzBC,oBAHyB,EAIzBC,8BAJyB,CAAtB;;;AAOPJ,gBAAgB,CAACK,WAAjB,GAA+B,kBAA/B;;AAEO,IAAMC,WAAW,GAAGL,0BAAOM,EAAV;AAAA;AAAA;AAAA,sCAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,CAAjB;;;AASPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;;AAEO,IAAMG,kBAAkB,GAAGP,0BAAOQ,EAAV;AAAA;AAAA;AAAA,aACzB;AAAA;AAAA,CADyB,CAAxB;;;AAIPD,kBAAkB,CAACH,WAAnB,GAAiC,oBAAjC;;AAEO,IAAMK,wBAAwB,GAAGT,0BAAOQ,EAAV;AAAA;AAAA;AAAA,aAC/B;AAAA;AAAA,CAD+B,CAA9B;;;AAIPC,wBAAwB,CAACL,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledNavElement = styled.nav`\n ${tw`tw-w-full`}\n ${tw`tw-overflow-visible`}\n ${FontStyle}\n ${BoxSizingStyle}\n`;\n\nStyledNavElement.displayName = \"StyledNavElement\";\n\nexport const StyledOList = styled.ul`\n ${tw`tw-flex`}\n ${tw`tw-items-start`}\n ${tw`tw-list-none`}\n ${tw`tw-p-0`}\n ${tw`tw-m-0`}\n ${tw`tw-items-center`}\n`;\n\nStyledOList.displayName = \"StyledOList\";\n\nexport const StyledListMenuItem = styled.li`\n ${tw`tw-flex-shrink-0`}\n`;\n\nStyledListMenuItem.displayName = \"StyledListMenuItem\";\n\nexport const StyledBreadcrumbListItem = styled.li`\n ${tw`tw-flex`}\n`;\n\nStyledBreadcrumbListItem.displayName = \"StyledBreadcrumbListItem\";\n"],"file":"Styles.js"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAmB,MAAM,OAAO,CAAC;AAa7D,MAAM,WAAW,gBAAgB;IAE/B,QAAQ,EAAE,YAAY,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"Breadcrumbs.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,YAAY,EAAmB,MAAM,OAAO,CAAC;AAa7D,MAAM,WAAW,gBAAgB;IAE/B,QAAQ,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC;IAExC,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,SAAS,CAAC,EAAE,YAAY,GAAG,MAAM,CAAC;CACnC;AAED,eAAO,MAAM,WAAW,wCAIrB,gBAAgB,gBAqDlB,CAAC"}
|
|
@@ -4,7 +4,7 @@ import { Button } from "../Button";
|
|
|
4
4
|
import { TreeDotsIcon } from "../Icons";
|
|
5
5
|
import { List, ListItem } from "../List";
|
|
6
6
|
import { Menu } from "../Menu";
|
|
7
|
-
import { StyledListMenuItem, StyledNavElement, StyledOList,
|
|
7
|
+
import { StyledListMenuItem, StyledNavElement, StyledOList, StyledBreadcrumbListItem } from "./Styles";
|
|
8
8
|
export var Breadcrumbs = function Breadcrumbs(_ref) {
|
|
9
9
|
var children = _ref.children,
|
|
10
10
|
className = _ref.className,
|
|
@@ -14,13 +14,20 @@ export var Breadcrumbs = function Breadcrumbs(_ref) {
|
|
|
14
14
|
var menuBreadcrumbs = 0;
|
|
15
15
|
|
|
16
16
|
var _useMemo = useMemo(function () {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
17
|
+
if (children instanceof Array) {
|
|
18
|
+
return children.reduce(function (acc, value, index) {
|
|
19
|
+
index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);
|
|
20
|
+
return acc;
|
|
21
|
+
}, {
|
|
22
|
+
x: [],
|
|
23
|
+
y: []
|
|
24
|
+
});
|
|
25
|
+
} else {
|
|
26
|
+
return {
|
|
27
|
+
x: [children],
|
|
28
|
+
y: []
|
|
29
|
+
};
|
|
30
|
+
}
|
|
24
31
|
}, [children, menuBreadcrumbs]),
|
|
25
32
|
x = _useMemo.x,
|
|
26
33
|
y = _useMemo.y;
|
|
@@ -45,9 +52,7 @@ export var Breadcrumbs = function Breadcrumbs(_ref) {
|
|
|
45
52
|
}))))) : null, x.map(function (child, index) {
|
|
46
53
|
return /*#__PURE__*/React.createElement(React.Fragment, {
|
|
47
54
|
key: index
|
|
48
|
-
}, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/React.createElement(
|
|
49
|
-
className: "tw-flex"
|
|
50
|
-
}, child));
|
|
55
|
+
}, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/React.createElement(StyledBreadcrumbListItem, null, child));
|
|
51
56
|
})));
|
|
52
57
|
};
|
|
53
58
|
//# sourceMappingURL=Breadcrumbs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["React","useRef","useMemo","LayerContextProvider","layers","Button","TreeDotsIcon","List","ListItem","Menu","StyledListMenuItem","StyledNavElement","StyledOList","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"names":["React","useRef","useMemo","LayerContextProvider","layers","Button","TreeDotsIcon","List","ListItem","Menu","StyledListMenuItem","StyledNavElement","StyledOList","StyledBreadcrumbListItem","Breadcrumbs","children","className","separator","ref","menuBreadcrumbs","Array","reduce","acc","value","index","x","push","y","zIndex","skyscraper","map","child"],"mappings":"AAAA,OAAOA,KAAP,IAA8BC,MAA9B,EAAsCC,OAAtC,QAAqD,OAArD;AACA,SAASC,oBAAT,EAA+BC,MAA/B,QAA6C,OAA7C;AACA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,YAAT,QAA6B,UAA7B;AACA,SAASC,IAAT,EAAeC,QAAf,QAA+B,SAA/B;AACA,SAASC,IAAT,QAAqB,SAArB;AACA,SACEC,kBADF,EAEEC,gBAFF,EAGEC,WAHF,EAIEC,wBAJF,QAKO,UALP;AAgBA,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAc,OAIH;AAAA,MAHtBC,QAGsB,QAHtBA,QAGsB;AAAA,MAFtBC,SAEsB,QAFtBA,SAEsB;AAAA,4BADtBC,SACsB;AAAA,MADtBA,SACsB,+BADV,GACU;AACtB,MAAMC,GAAG,GAAGjB,MAAM,CAA0B,IAA1B,CAAlB;AACA,MAAMkB,eAAe,GAAG,CAAxB;;AAEA,iBAAiBjB,OAAO,CAAC,YAAM;AAC7B,QAAIa,QAAQ,YAAYK,KAAxB,EAA+B;AAC7B,aAAOL,QAAQ,CAACM,MAAT,CACL,UAACC,GAAD,EAAMC,KAAN,EAAaC,KAAb,EAAuB;AACrBA,QAAAA,KAAK,IAAIL,eAAT,GAA2BG,GAAG,CAACG,CAAJ,CAAMC,IAAN,CAAWH,KAAX,CAA3B,GAA+CD,GAAG,CAACK,CAAJ,CAAMD,IAAN,CAAWH,KAAX,CAA/C;AACA,eAAOD,GAAP;AACD,OAJI,EAKL;AAAEG,QAAAA,CAAC,EAAE,EAAL;AAASE,QAAAA,CAAC,EAAE;AAAZ,OALK,CAAP;AAOD,KARD,MAQO;AACL,aAAO;AAAEF,QAAAA,CAAC,EAAE,CAACV,QAAD,CAAL;AAAiBY,QAAAA,CAAC,EAAE;AAApB,OAAP;AACD;AACF,GAZuB,EAYrB,CAACZ,QAAD,EAAWI,eAAX,CAZqB,CAAxB;AAAA,MAAQM,CAAR,YAAQA,CAAR;AAAA,MAAWE,CAAX,YAAWA,CAAX;;AAcA,sBACE,oBAAC,gBAAD;AAAkB,IAAA,SAAS,EAAEX,SAA7B;AAAwC,IAAA,GAAG,EAAEE;AAA7C,kBACE,oBAAC,WAAD,QACGC,eAAe,GAAG,CAAlB,gBACC,oBAAC,kBAAD,qBACE,oBAAC,oBAAD;AAAsB,IAAA,KAAK,EAAE;AAAES,MAAAA,MAAM,EAAExB,MAAM,CAACyB;AAAjB;AAA7B,kBACE,oBAAC,IAAD;AACE,IAAA,MAAM,eACJ,oBAAC,MAAD;AAAQ,MAAA,OAAO,EAAC;AAAhB,oBACE,oBAAC,YAAD,OADF;AAFJ,kBAOE,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAC;AAAhB,KACGF,CAAC,CAACG,GAAF,CAAM,UAACC,KAAD,EAAQP,KAAR;AAAA,wBACL,oBAAC,QAAD;AAAU,MAAA,GAAG,EAAEA;AAAf,OAAuBO,KAAvB,CADK;AAAA,GAAN,CADH,CAPF,CADF,CADF,CADD,GAkBG,IAnBN,EAoBGN,CAAC,CAACK,GAAF,CAAM,UAACC,KAAD,EAAQP,KAAR,EAAkB;AACvB,wBACE,oBAAC,KAAD,CAAO,QAAP;AAAgB,MAAA,GAAG,EAAEA;AAArB,OACGA,KAAK,GAAG,CAAR,IAAaL,eAAe,GAAG,CAA/B,gBACC,oBAAC,wBAAD,QAA2BF,SAA3B,CADD,GAEG,IAHN,eAIE,oBAAC,wBAAD,QAA2Bc,KAA3B,CAJF,CADF;AAQD,GATA,CApBH,CADF,CADF;AAmCD,CAzDM","sourcesContent":["import React, { ReactElement, useRef, useMemo } from \"react\";\nimport { LayerContextProvider, layers } from \"../..\";\nimport { Button } from \"../Button\";\nimport { TreeDotsIcon } from \"../Icons\";\nimport { List, ListItem } from \"../List\";\nimport { Menu } from \"../Menu\";\nimport {\n StyledListMenuItem,\n StyledNavElement,\n StyledOList,\n StyledBreadcrumbListItem,\n} from \"./Styles\";\n\nexport interface BreadcrumbsProps {\n /** Children type of node or string */\n children: ReactElement[] | ReactElement;\n /** ClassName */\n className?: string;\n /** Separator */\n separator?: ReactElement | string;\n}\n\nexport const Breadcrumbs = ({\n children,\n className,\n separator = \"/\",\n}: BreadcrumbsProps) => {\n const ref = useRef<null | HTMLUListElement>(null);\n const menuBreadcrumbs = 0;\n\n const { x, y } = useMemo(() => {\n if (children instanceof Array) {\n return children.reduce(\n (acc, value, index) => {\n index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);\n return acc;\n },\n { x: [], y: [] } as { x: ReactElement[]; y: ReactElement[] }\n );\n } else {\n return { x: [children], y: [] };\n }\n }, [children, menuBreadcrumbs]);\n\n return (\n <StyledNavElement className={className} ref={ref}>\n <StyledOList>\n {menuBreadcrumbs > 0 ? (\n <StyledListMenuItem>\n <LayerContextProvider value={{ zIndex: layers.skyscraper }}>\n <Menu\n target={\n <Button variant=\"text gray\">\n <TreeDotsIcon />\n </Button>\n }\n >\n <List className=\"tw-py-2\">\n {y.map((child, index) => (\n <ListItem key={index}>{child}</ListItem>\n ))}\n </List>\n </Menu>\n </LayerContextProvider>\n </StyledListMenuItem>\n ) : null}\n {x.map((child, index) => {\n return (\n <React.Fragment key={index}>\n {index > 0 || menuBreadcrumbs > 0 ? (\n <StyledBreadcrumbListItem>{separator}</StyledBreadcrumbListItem>\n ) : null}\n <StyledBreadcrumbListItem>{child}</StyledBreadcrumbListItem>\n </React.Fragment>\n );\n })}\n </StyledOList>\n </StyledNavElement>\n );\n};\n"],"file":"Breadcrumbs.js"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
export declare const StyledNavElement: import("styled-components").StyledComponent<"nav", any, {}, never>;
|
|
2
2
|
export declare const StyledOList: import("styled-components").StyledComponent<"ul", any, {}, never>;
|
|
3
3
|
export declare const StyledListMenuItem: import("styled-components").StyledComponent<"li", any, {}, never>;
|
|
4
|
-
export declare const
|
|
5
|
-
export declare const StyledSeparator: import("styled-components").StyledComponent<"li", any, {}, never>;
|
|
4
|
+
export declare const StyledBreadcrumbListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
|
|
6
5
|
//# sourceMappingURL=Styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,oEAK5B,CAAC;AAIF,eAAO,MAAM,WAAW,mEAOvB,CAAC;AAIF,eAAO,MAAM,kBAAkB,mEAE9B,CAAC;AAIF,eAAO,MAAM,
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,gBAAgB,oEAK5B,CAAC;AAIF,eAAO,MAAM,WAAW,mEAOvB,CAAC;AAIF,eAAO,MAAM,kBAAkB,mEAE9B,CAAC;AAIF,eAAO,MAAM,wBAAwB,mEAEpC,CAAC"}
|
|
@@ -34,19 +34,11 @@ export var StyledListMenuItem = styled.li.withConfig({
|
|
|
34
34
|
"flexShrink": "0"
|
|
35
35
|
});
|
|
36
36
|
StyledListMenuItem.displayName = "StyledListMenuItem";
|
|
37
|
-
export var
|
|
38
|
-
displayName: "
|
|
37
|
+
export var StyledBreadcrumbListItem = styled.li.withConfig({
|
|
38
|
+
displayName: "Styles__StyledBreadcrumbListItem",
|
|
39
39
|
componentId: "sc-rxaesd-3"
|
|
40
40
|
})(["", ""], {
|
|
41
41
|
"display": "flex"
|
|
42
42
|
});
|
|
43
|
-
|
|
44
|
-
export var StyledSeparator = styled.li.withConfig({
|
|
45
|
-
displayName: "Styles__StyledSeparator",
|
|
46
|
-
componentId: "sc-rxaesd-4"
|
|
47
|
-
})(["", ""], {
|
|
48
|
-
"marginLeft": "1rem",
|
|
49
|
-
"marginRight": "1rem"
|
|
50
|
-
});
|
|
51
|
-
StyledSeparator.displayName = "StyledSeparator";
|
|
43
|
+
StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
|
|
52
44
|
//# sourceMappingURL=Styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["styled","BoxSizingStyle","FontStyle","StyledNavElement","nav","displayName","StyledOList","ul","StyledListMenuItem","li","
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Breadcrumbs/Styles.ts"],"names":["styled","BoxSizingStyle","FontStyle","StyledNavElement","nav","displayName","StyledOList","ul","StyledListMenuItem","li","StyledBreadcrumbListItem"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AAEA,OAAO,IAAMC,gBAAgB,GAAGH,MAAM,CAACI,GAAV;AAAA;AAAA;AAAA,4BACvB;AAAA;AAAA,CADuB,EAEvB;AAAA;AAAA,CAFuB,EAGzBF,SAHyB,EAIzBD,cAJyB,CAAtB;AAOPE,gBAAgB,CAACE,WAAjB,GAA+B,kBAA/B;AAEA,OAAO,IAAMC,WAAW,GAAGN,MAAM,CAACO,EAAV;AAAA;AAAA;AAAA,sCAClB;AAAA;AAAA,CADkB,EAElB;AAAA;AAAA,CAFkB,EAGlB;AAAA;AAAA,CAHkB,EAIlB;AAAA;AAAA,CAJkB,EAKlB;AAAA;AAAA,CALkB,EAMlB;AAAA;AAAA,CANkB,CAAjB;AASPD,WAAW,CAACD,WAAZ,GAA0B,aAA1B;AAEA,OAAO,IAAMG,kBAAkB,GAAGR,MAAM,CAACS,EAAV;AAAA;AAAA;AAAA,aACzB;AAAA;AAAA,CADyB,CAAxB;AAIPD,kBAAkB,CAACH,WAAnB,GAAiC,oBAAjC;AAEA,OAAO,IAAMK,wBAAwB,GAAGV,MAAM,CAACS,EAAV;AAAA;AAAA;AAAA,aAC/B;AAAA;AAAA,CAD+B,CAA9B;AAIPC,wBAAwB,CAACL,WAAzB,GAAuC,0BAAvC","sourcesContent":["import styled from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\n\nexport const StyledNavElement = styled.nav`\n ${tw`tw-w-full`}\n ${tw`tw-overflow-visible`}\n ${FontStyle}\n ${BoxSizingStyle}\n`;\n\nStyledNavElement.displayName = \"StyledNavElement\";\n\nexport const StyledOList = styled.ul`\n ${tw`tw-flex`}\n ${tw`tw-items-start`}\n ${tw`tw-list-none`}\n ${tw`tw-p-0`}\n ${tw`tw-m-0`}\n ${tw`tw-items-center`}\n`;\n\nStyledOList.displayName = \"StyledOList\";\n\nexport const StyledListMenuItem = styled.li`\n ${tw`tw-flex-shrink-0`}\n`;\n\nStyledListMenuItem.displayName = \"StyledListMenuItem\";\n\nexport const StyledBreadcrumbListItem = styled.li`\n ${tw`tw-flex`}\n`;\n\nStyledBreadcrumbListItem.displayName = \"StyledBreadcrumbListItem\";\n"],"file":"Styles.js"}
|
package/dist/index.js
CHANGED
|
@@ -2767,7 +2767,7 @@
|
|
|
2767
2767
|
"padding": "0px"
|
|
2768
2768
|
});
|
|
2769
2769
|
StyledList.displayName = "StyledList";
|
|
2770
|
-
var StyledListItem
|
|
2770
|
+
var StyledListItem = styled__default["default"].li.withConfig({
|
|
2771
2771
|
displayName: "Styles__StyledListItem",
|
|
2772
2772
|
componentId: "sc-dv1w0m-1"
|
|
2773
2773
|
})(["", " ", " ", " color:var(--color-theme-900);line-height:28px;> svg:first-child{margin-right:8px;}&:hover{background-color:var(--color-theme-200);}&:focus{outline:none;}"], {
|
|
@@ -2783,7 +2783,7 @@
|
|
|
2783
2783
|
"lineHeight": "1.25rem",
|
|
2784
2784
|
"userSelect": "none"
|
|
2785
2785
|
}, BoxSizingStyle, FontStyle);
|
|
2786
|
-
StyledListItem
|
|
2786
|
+
StyledListItem.displayName = "StyledListItem";
|
|
2787
2787
|
var StyledListSeparator = styled__default["default"].div.withConfig({
|
|
2788
2788
|
displayName: "Styles__StyledListSeparator",
|
|
2789
2789
|
componentId: "sc-dv1w0m-2"
|
|
@@ -2809,7 +2809,7 @@
|
|
|
2809
2809
|
className = _ref.className,
|
|
2810
2810
|
props = _objectWithoutProperties(_ref, _excluded$V);
|
|
2811
2811
|
|
|
2812
|
-
return /*#__PURE__*/React__default["default"].createElement(StyledListItem
|
|
2812
|
+
return /*#__PURE__*/React__default["default"].createElement(StyledListItem, _extends({}, props, {
|
|
2813
2813
|
className: classNames__default["default"]("c-list-item", className),
|
|
2814
2814
|
ref: ref
|
|
2815
2815
|
}), children);
|
|
@@ -3560,21 +3560,13 @@
|
|
|
3560
3560
|
"flexShrink": "0"
|
|
3561
3561
|
});
|
|
3562
3562
|
StyledListMenuItem.displayName = "StyledListMenuItem";
|
|
3563
|
-
var
|
|
3564
|
-
displayName: "
|
|
3563
|
+
var StyledBreadcrumbListItem = styled__default["default"].li.withConfig({
|
|
3564
|
+
displayName: "Styles__StyledBreadcrumbListItem",
|
|
3565
3565
|
componentId: "sc-rxaesd-3"
|
|
3566
3566
|
})(["", ""], {
|
|
3567
3567
|
"display": "flex"
|
|
3568
3568
|
});
|
|
3569
|
-
|
|
3570
|
-
var StyledSeparator = styled__default["default"].li.withConfig({
|
|
3571
|
-
displayName: "Styles__StyledSeparator",
|
|
3572
|
-
componentId: "sc-rxaesd-4"
|
|
3573
|
-
})(["", ""], {
|
|
3574
|
-
"marginLeft": "1rem",
|
|
3575
|
-
"marginRight": "1rem"
|
|
3576
|
-
});
|
|
3577
|
-
StyledSeparator.displayName = "StyledSeparator";
|
|
3569
|
+
StyledBreadcrumbListItem.displayName = "StyledBreadcrumbListItem";
|
|
3578
3570
|
|
|
3579
3571
|
var Breadcrumbs = function Breadcrumbs(_ref) {
|
|
3580
3572
|
var children = _ref.children,
|
|
@@ -3585,13 +3577,20 @@
|
|
|
3585
3577
|
var menuBreadcrumbs = 0;
|
|
3586
3578
|
|
|
3587
3579
|
var _useMemo = React.useMemo(function () {
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
|
|
3593
|
-
|
|
3594
|
-
|
|
3580
|
+
if (children instanceof Array) {
|
|
3581
|
+
return children.reduce(function (acc, value, index) {
|
|
3582
|
+
index >= menuBreadcrumbs ? acc.x.push(value) : acc.y.push(value);
|
|
3583
|
+
return acc;
|
|
3584
|
+
}, {
|
|
3585
|
+
x: [],
|
|
3586
|
+
y: []
|
|
3587
|
+
});
|
|
3588
|
+
} else {
|
|
3589
|
+
return {
|
|
3590
|
+
x: [children],
|
|
3591
|
+
y: []
|
|
3592
|
+
};
|
|
3593
|
+
}
|
|
3595
3594
|
}, [children, menuBreadcrumbs]),
|
|
3596
3595
|
x = _useMemo.x;
|
|
3597
3596
|
_useMemo.y;
|
|
@@ -3602,9 +3601,7 @@
|
|
|
3602
3601
|
}, /*#__PURE__*/React__default["default"].createElement(StyledOList, null, null, x.map(function (child, index) {
|
|
3603
3602
|
return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
|
|
3604
3603
|
key: index
|
|
3605
|
-
}, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/React__default["default"].createElement(
|
|
3606
|
-
className: "tw-flex"
|
|
3607
|
-
}, child));
|
|
3604
|
+
}, index > 0 || menuBreadcrumbs > 0 ? /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, null, separator) : null, /*#__PURE__*/React__default["default"].createElement(StyledBreadcrumbListItem, null, child));
|
|
3608
3605
|
})));
|
|
3609
3606
|
};
|
|
3610
3607
|
|