@hitachivantara/uikit-react-lab 4.3.3 → 4.5.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/NavigationSlider/Header/Header.js +79 -0
- package/dist/NavigationSlider/Header/Header.js.map +1 -0
- package/dist/NavigationSlider/Header/index.js +14 -0
- package/dist/NavigationSlider/Header/index.js.map +1 -0
- package/dist/NavigationSlider/Header/styles.js +36 -0
- package/dist/NavigationSlider/Header/styles.js.map +1 -0
- package/dist/NavigationSlider/Navigation/Navigation.js +102 -0
- package/dist/NavigationSlider/Navigation/Navigation.js.map +1 -0
- package/dist/NavigationSlider/Navigation/index.js +14 -0
- package/dist/NavigationSlider/Navigation/index.js.map +1 -0
- package/dist/NavigationSlider/Navigation/styles.js +30 -0
- package/dist/NavigationSlider/Navigation/styles.js.map +1 -0
- package/dist/NavigationSlider/NavigationSlider.d.ts +30 -0
- package/dist/NavigationSlider/NavigationSlider.js +139 -0
- package/dist/NavigationSlider/NavigationSlider.js.map +1 -0
- package/dist/NavigationSlider/index.d.ts +2 -0
- package/dist/NavigationSlider/index.js +14 -0
- package/dist/NavigationSlider/index.js.map +1 -0
- package/dist/NavigationSlider/styles.js +29 -0
- package/dist/NavigationSlider/styles.js.map +1 -0
- package/dist/NavigationSlider/utils.js +87 -0
- package/dist/NavigationSlider/utils.js.map +1 -0
- package/dist/VerticalNavigation/VerticalNavigation.d.ts +12 -8
- package/dist/VerticalNavigation/VerticalNavigation.js +71 -41
- package/dist/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/VerticalNavigation/styles.js +11 -36
- package/dist/VerticalNavigation/styles.js.map +1 -1
- package/dist/VerticalNavigation/utils.js +88 -0
- package/dist/VerticalNavigation/utils.js.map +1 -0
- package/dist/index.d.ts +3 -0
- package/dist/index.js +9 -1
- package/dist/index.js.map +1 -1
- package/dist/legacy/NavigationSlider/Header/Header.js +72 -0
- package/dist/legacy/NavigationSlider/Header/Header.js.map +1 -0
- package/dist/legacy/NavigationSlider/Header/index.js +2 -0
- package/dist/legacy/NavigationSlider/Header/index.js.map +1 -0
- package/dist/legacy/NavigationSlider/Header/styles.js +29 -0
- package/dist/legacy/NavigationSlider/Header/styles.js.map +1 -0
- package/dist/legacy/NavigationSlider/Navigation/Navigation.js +94 -0
- package/dist/legacy/NavigationSlider/Navigation/Navigation.js.map +1 -0
- package/dist/legacy/NavigationSlider/Navigation/index.js +2 -0
- package/dist/legacy/NavigationSlider/Navigation/index.js.map +1 -0
- package/dist/legacy/NavigationSlider/Navigation/styles.js +23 -0
- package/dist/legacy/NavigationSlider/Navigation/styles.js.map +1 -0
- package/dist/legacy/NavigationSlider/NavigationSlider.d.ts +30 -0
- package/dist/legacy/NavigationSlider/NavigationSlider.js +123 -0
- package/dist/legacy/NavigationSlider/NavigationSlider.js.map +1 -0
- package/dist/legacy/NavigationSlider/index.d.ts +2 -0
- package/dist/legacy/NavigationSlider/index.js +2 -0
- package/dist/legacy/NavigationSlider/index.js.map +1 -0
- package/dist/legacy/NavigationSlider/styles.js +22 -0
- package/dist/legacy/NavigationSlider/styles.js.map +1 -0
- package/dist/legacy/NavigationSlider/utils.js +78 -0
- package/dist/legacy/NavigationSlider/utils.js.map +1 -0
- package/dist/legacy/VerticalNavigation/VerticalNavigation.d.ts +12 -8
- package/dist/legacy/VerticalNavigation/VerticalNavigation.js +72 -40
- package/dist/legacy/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/legacy/VerticalNavigation/styles.js +11 -35
- package/dist/legacy/VerticalNavigation/styles.js.map +1 -1
- package/dist/legacy/VerticalNavigation/utils.js +79 -0
- package/dist/legacy/VerticalNavigation/utils.js.map +1 -0
- package/dist/legacy/index.d.ts +3 -0
- package/dist/legacy/index.js +1 -0
- package/dist/legacy/index.js.map +1 -1
- package/dist/modern/NavigationSlider/Header/Header.js +72 -0
- package/dist/modern/NavigationSlider/Header/Header.js.map +1 -0
- package/dist/modern/NavigationSlider/Header/index.js +2 -0
- package/dist/modern/NavigationSlider/Header/index.js.map +1 -0
- package/dist/modern/NavigationSlider/Header/styles.js +25 -0
- package/dist/modern/NavigationSlider/Header/styles.js.map +1 -0
- package/dist/modern/NavigationSlider/Navigation/Navigation.js +88 -0
- package/dist/modern/NavigationSlider/Navigation/Navigation.js.map +1 -0
- package/dist/modern/NavigationSlider/Navigation/index.js +2 -0
- package/dist/modern/NavigationSlider/Navigation/index.js.map +1 -0
- package/dist/modern/NavigationSlider/Navigation/styles.js +21 -0
- package/dist/modern/NavigationSlider/Navigation/styles.js.map +1 -0
- package/dist/modern/NavigationSlider/NavigationSlider.d.ts +30 -0
- package/dist/modern/NavigationSlider/NavigationSlider.js +116 -0
- package/dist/modern/NavigationSlider/NavigationSlider.js.map +1 -0
- package/dist/modern/NavigationSlider/index.d.ts +2 -0
- package/dist/modern/NavigationSlider/index.js +2 -0
- package/dist/modern/NavigationSlider/index.js.map +1 -0
- package/dist/modern/NavigationSlider/styles.js +18 -0
- package/dist/modern/NavigationSlider/styles.js.map +1 -0
- package/dist/modern/NavigationSlider/utils.js +70 -0
- package/dist/modern/NavigationSlider/utils.js.map +1 -0
- package/dist/modern/VerticalNavigation/VerticalNavigation.d.ts +12 -8
- package/dist/modern/VerticalNavigation/VerticalNavigation.js +68 -43
- package/dist/modern/VerticalNavigation/VerticalNavigation.js.map +1 -1
- package/dist/modern/VerticalNavigation/styles.js +11 -28
- package/dist/modern/VerticalNavigation/styles.js.map +1 -1
- package/dist/modern/VerticalNavigation/utils.js +76 -0
- package/dist/modern/VerticalNavigation/utils.js.map +1 -0
- package/dist/modern/index.d.ts +3 -0
- package/dist/modern/index.js +1 -0
- package/dist/modern/index.js.map +1 -1
- package/package.json +4 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VerticalNavigation.js","names":["React","useState","withStyles","PropTypes","clsx","HvVerticalNavigation","HvVerticalNavigationCore","HvVerticalNavigationTree","
|
|
1
|
+
{"version":3,"file":"VerticalNavigation.js","names":["React","useState","withStyles","PropTypes","clsx","HvVerticalNavigation","HvVerticalNavigationCore","HvVerticalNavigationTree","HvButton","HvContainer","Backwards","Forwards","useStyles","findRootParentById","findItemById","pathToItem","onNavigationChange","onToggleExpanded","data","selected","expanded","topPosition","expandedPanelWidth","collapsedPanelWidth","position","others","classes","noSubData","map","dataToRemove","rest","expandedItems","setExpandedItems","selectedTopParent","id","handleVerticalNavigationChange","event","item","fullItem","length","prevState","handleVerticalNavigationToggle","currentExpandedItems","handleExpandToggle","panel","panelExpanded","panelCollapsed","toggleCollapsePanel","propTypes","func","arrayOf","shape","string","isRequired","label","icon","node","array","href","target","bool","number","oneOf","defaultProps","name"],"sources":["../../../src/VerticalNavigation/VerticalNavigation.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport { withStyles } from \"@mui/styles\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport {\n HvVerticalNavigation as HvVerticalNavigationCore,\n HvVerticalNavigationTree,\n HvButton,\n HvContainer,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport useStyles from \"./styles\";\nimport { findRootParentById, findItemById, pathToItem } from \"./utils\";\n\nconst HvVerticalNavigation = ({\n onNavigationChange,\n onToggleExpanded,\n data,\n selected,\n expanded,\n topPosition,\n expandedPanelWidth,\n collapsedPanelWidth,\n position,\n\n ...others\n}) => {\n const classes = useStyles({ topPosition, expandedPanelWidth, collapsedPanelWidth, position })();\n\n const noSubData = data.map(({ data: dataToRemove, ...rest }) => rest);\n\n const [expandedItems, setExpandedItems] = useState(pathToItem(data, selected));\n\n const selectedTopParent = findRootParentById(data, selected)?.id;\n\n const handleVerticalNavigationChange = (event, item) => {\n // This need to be done because the item recieved on the callback is missing the original data object\n const fullItem = findItemById(data, item.id);\n\n if (!expanded && fullItem.data && fullItem.data.length > 0) {\n setExpandedItems((prevState) => [...prevState, item.id]);\n onToggleExpanded(true);\n } else {\n onNavigationChange?.(event, item);\n }\n };\n\n const handleVerticalNavigationToggle = (event, currentExpandedItems) => {\n setExpandedItems(currentExpandedItems);\n };\n\n const handleExpandToggle = () => {\n onToggleExpanded(!expanded);\n };\n\n return (\n <HvVerticalNavigationCore\n className={clsx(classes.panel, {\n [classes.panelExpanded]: expanded,\n [classes.panelCollapsed]: !expanded,\n })}\n {...others}\n >\n <HvContainer className={`${classes.toggleCollapsePanel}`}>\n <HvButton icon onClick={handleExpandToggle}>\n {expanded ? <Backwards iconSize=\"XS\" /> : <Forwards iconSize=\"XS\" />}\n </HvButton>\n </HvContainer>\n\n <HvVerticalNavigationTree\n collapsible\n expanded={expandedItems}\n data={expanded ? data : noSubData}\n selected={expanded ? selected : selectedTopParent}\n onChange={handleVerticalNavigationChange}\n onToggle={handleVerticalNavigationToggle}\n />\n </HvVerticalNavigationCore>\n );\n};\n\nHvVerticalNavigation.propTypes = {\n /**\n * Called when a menu item is clicked.\n */\n onNavigationChange: PropTypes.func,\n /**\n * Called when the collapse / expand button is clicked.\n */\n onToggleExpanded: PropTypes.func,\n /**\n * An array containing the data for each menu item.\n *\n * id - the id to be applied to the root element.\n * label - the label to be rendered on the menu item.\n * icon - the icon component.\n * data - sub-menu items\n * href - the url used for navigation.\n * target - the behavior when opening an url.\n */\n data: PropTypes.arrayOf(\n PropTypes.shape({\n id: PropTypes.string.isRequired,\n label: PropTypes.string.isRequired,\n icon: PropTypes.node,\n data: PropTypes.array,\n href: PropTypes.string,\n target: PropTypes.string,\n })\n ).isRequired,\n /**\n * The ID of the selected page.\n */\n selected: PropTypes.string,\n /**\n * Boolean value stating if the panel should be collapsed or expanded.\n */\n expanded: PropTypes.bool,\n /**\n * The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.\n */\n topPosition: PropTypes.number,\n /**\n * The width of the panel when expanded. Default value is 300.\n */\n expandedPanelWidth: PropTypes.number,\n /**\n * The width of the panel when collapsed. Default vlaue is 52.\n */\n collapsedPanelWidth: PropTypes.number,\n /**\n * Position of the component.\n */\n position: PropTypes.oneOf([\"static\", \"relative\", \"fixed\", \"absolute\", \"sticky\"]),\n};\n\nHvVerticalNavigation.defaultProps = {\n topPosition: 44,\n expandedPanelWidth: 300,\n collapsedPanelWidth: 52,\n position: \"fixed\",\n};\n\nexport default withStyles(useStyles, { name: \"HvVerticalNavigation\" })(HvVerticalNavigation);\n"],"mappings":"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"}
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
4
1
|
import { makeStyles } from "@mui/styles";
|
|
5
2
|
const styles = props => makeStyles(theme => ({
|
|
6
3
|
panel: {
|
|
4
|
+
justifyContent: "flex-start",
|
|
7
5
|
position: props.position,
|
|
8
6
|
top: props.topPosition,
|
|
9
7
|
left: 0,
|
|
@@ -12,22 +10,20 @@ const styles = props => makeStyles(theme => ({
|
|
|
12
10
|
panelExpanded: {
|
|
13
11
|
width: props.expandedPanelWidth,
|
|
14
12
|
height: `calc(100vh - ${props.topPosition}px)`,
|
|
15
|
-
//
|
|
16
|
-
"& > :not(:first-child)
|
|
17
|
-
|
|
13
|
+
// To remove the top border of the navigation section
|
|
14
|
+
"& > :not(:first-child)": {
|
|
15
|
+
borderTop: "none"
|
|
18
16
|
}
|
|
19
17
|
},
|
|
20
18
|
panelCollapsed: {
|
|
21
19
|
width: props.collapsedPanelWidth,
|
|
22
20
|
height: `calc(100vh - ${props.topPosition}px)`,
|
|
23
|
-
//
|
|
21
|
+
// Customize the navigation section
|
|
24
22
|
"& > :not(:first-child)": {
|
|
25
|
-
|
|
26
|
-
"
|
|
27
|
-
marginLeft: 0
|
|
28
|
-
}
|
|
23
|
+
borderTop: "none",
|
|
24
|
+
padding: theme.hvSpacing("xs", "xs", "sm", "xs")
|
|
29
25
|
},
|
|
30
|
-
//
|
|
26
|
+
// Customize the collapse / expand
|
|
31
27
|
"& > :first-child:not(:last-child)": {
|
|
32
28
|
padding: theme.hvSpacing("sm", "xs", "xs", "xs")
|
|
33
29
|
},
|
|
@@ -35,22 +31,9 @@ const styles = props => makeStyles(theme => ({
|
|
|
35
31
|
marginLeft: "6px"
|
|
36
32
|
}
|
|
37
33
|
},
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
justifyContent: "flex-start"
|
|
42
|
-
}
|
|
43
|
-
}),
|
|
44
|
-
expandButton: {
|
|
45
|
-
width: "100%",
|
|
46
|
-
minWidth: "unset",
|
|
47
|
-
"& > span > span": {
|
|
48
|
-
marginLeft: "unset"
|
|
49
|
-
}
|
|
50
|
-
},
|
|
51
|
-
collapseTextContainer: {
|
|
52
|
-
width: "100%",
|
|
53
|
-
textAlign: "left"
|
|
34
|
+
toggleCollapsePanel: {
|
|
35
|
+
display: "flex",
|
|
36
|
+
justifyContent: "flex-end"
|
|
54
37
|
}
|
|
55
38
|
}));
|
|
56
39
|
export default styles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","names":["makeStyles","styles","props","theme","panel","position","top","topPosition","left","zIndex","panelExpanded","width","expandedPanelWidth","height","
|
|
1
|
+
{"version":3,"file":"styles.js","names":["makeStyles","styles","props","theme","panel","justifyContent","position","top","topPosition","left","zIndex","panelExpanded","width","expandedPanelWidth","height","borderTop","panelCollapsed","collapsedPanelWidth","padding","hvSpacing","marginLeft","toggleCollapsePanel","display"],"sources":["../../../src/VerticalNavigation/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\nconst styles = (props) =>\n makeStyles((theme) => ({\n panel: {\n justifyContent: \"flex-start\",\n position: props.position,\n top: props.topPosition,\n left: 0,\n zIndex: 1100,\n },\n panelExpanded: {\n width: props.expandedPanelWidth,\n height: `calc(100vh - ${props.topPosition}px)`,\n\n // To remove the top border of the navigation section\n \"& > :not(:first-child)\": {\n borderTop: \"none\",\n },\n },\n panelCollapsed: {\n width: props.collapsedPanelWidth,\n height: `calc(100vh - ${props.topPosition}px)`,\n\n // Customize the navigation section\n \"& > :not(:first-child)\": {\n borderTop: \"none\",\n padding: theme.hvSpacing(\"xs\", \"xs\", \"sm\", \"xs\"),\n },\n\n // Customize the collapse / expand\n \"& > :first-child:not(:last-child)\": {\n padding: theme.hvSpacing(\"sm\", \"xs\", \"xs\", \"xs\"),\n },\n\n \"& > nav > ul > li > div > div\": {\n marginLeft: \"6px\",\n },\n },\n\n toggleCollapsePanel: {\n display: \"flex\",\n justifyContent: \"flex-end\",\n },\n }));\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,aAAa;AAExC,MAAMC,MAAM,GAAIC,KAAK,IACnBF,UAAU,CAAEG,KAAK,KAAM;EACrBC,KAAK,EAAE;IACLC,cAAc,EAAE,YAAY;IAC5BC,QAAQ,EAAEJ,KAAK,CAACI,QAAQ;IACxBC,GAAG,EAAEL,KAAK,CAACM,WAAW;IACtBC,IAAI,EAAE,CAAC;IACPC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbC,KAAK,EAAEV,KAAK,CAACW,kBAAkB;IAC/BC,MAAM,EAAG,gBAAeZ,KAAK,CAACM,WAAY,KAAI;IAE9C;IACA,wBAAwB,EAAE;MACxBO,SAAS,EAAE;IACb;EACF,CAAC;EACDC,cAAc,EAAE;IACdJ,KAAK,EAAEV,KAAK,CAACe,mBAAmB;IAChCH,MAAM,EAAG,gBAAeZ,KAAK,CAACM,WAAY,KAAI;IAE9C;IACA,wBAAwB,EAAE;MACxBO,SAAS,EAAE,MAAM;MACjBG,OAAO,EAAEf,KAAK,CAACgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACjD,CAAC;IAED;IACA,mCAAmC,EAAE;MACnCD,OAAO,EAAEf,KAAK,CAACgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACjD,CAAC;IAED,+BAA+B,EAAE;MAC/BC,UAAU,EAAE;IACd;EACF,CAAC;EAEDC,mBAAmB,EAAE;IACnBC,OAAO,EAAE,MAAM;IACfjB,cAAc,EAAE;EAClB;AACF,CAAC,CAAC,CAAC;AAEL,eAAeJ,MAAM"}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Receives the navigation data and the id of the item from which we want to get the root parent.
|
|
3
|
+
*
|
|
4
|
+
* @param {NavigationItem[]} data - The navigation data structure.
|
|
5
|
+
* @param {string} itemId - The item id.
|
|
6
|
+
* @returns The item that is the root parent of the received item.
|
|
7
|
+
*/
|
|
8
|
+
const findRootParentById = (data, itemId) => {
|
|
9
|
+
return data.reduce((parent, item) => {
|
|
10
|
+
if (parent) {
|
|
11
|
+
return parent;
|
|
12
|
+
}
|
|
13
|
+
if (item.id === itemId) {
|
|
14
|
+
return item;
|
|
15
|
+
}
|
|
16
|
+
if (item.data) {
|
|
17
|
+
const found = findRootParentById(item.data, itemId);
|
|
18
|
+
if (found) {
|
|
19
|
+
return item;
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
return null;
|
|
23
|
+
}, null);
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
/**
|
|
27
|
+
* Returns the complete item object from the data structure using the item id.
|
|
28
|
+
*
|
|
29
|
+
* @param {NavigationItem[]} data - The navigation data structure.
|
|
30
|
+
* @param {string} itemId - The item id.
|
|
31
|
+
* @returns The complete item object matching the received id.
|
|
32
|
+
*/
|
|
33
|
+
const findItemById = (data, itemId) => {
|
|
34
|
+
return data.find(item => {
|
|
35
|
+
if (item.id === itemId) {
|
|
36
|
+
return true;
|
|
37
|
+
}
|
|
38
|
+
if (item.data && item.data.length > 0) {
|
|
39
|
+
const foundItem = findItemById(item.data, itemId);
|
|
40
|
+
if (foundItem) {
|
|
41
|
+
return true;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
return false;
|
|
45
|
+
});
|
|
46
|
+
};
|
|
47
|
+
|
|
48
|
+
/**
|
|
49
|
+
* Returns an array with all the parent item ids up until the target item is reached.
|
|
50
|
+
*
|
|
51
|
+
* @param {NavigationItem[]} data - The navigation data structure.
|
|
52
|
+
* @param {string} itemId - The item id.
|
|
53
|
+
* @returns An array with all the parent item ids
|
|
54
|
+
*/
|
|
55
|
+
const pathToItem = (data, itemId) => {
|
|
56
|
+
const path = [];
|
|
57
|
+
if (data != null && data.length > 0) {
|
|
58
|
+
// eslint-disable-next-line no-plusplus
|
|
59
|
+
for (let i = 0; i < data.length; ++i) {
|
|
60
|
+
const item = data[i];
|
|
61
|
+
if (item.id === itemId) {
|
|
62
|
+
path.push(item.id);
|
|
63
|
+
break;
|
|
64
|
+
}
|
|
65
|
+
const subPaths = pathToItem(item.data, itemId);
|
|
66
|
+
if (subPaths.length > 0) {
|
|
67
|
+
path.push(item.id);
|
|
68
|
+
path.push(...subPaths);
|
|
69
|
+
break;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
return path;
|
|
74
|
+
};
|
|
75
|
+
export { findRootParentById, findItemById, pathToItem };
|
|
76
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","names":["findRootParentById","data","itemId","reduce","parent","item","id","found","findItemById","find","length","foundItem","pathToItem","path","i","push","subPaths"],"sources":["../../../src/VerticalNavigation/utils.js"],"sourcesContent":["/**\n * Receives the navigation data and the id of the item from which we want to get the root parent.\n *\n * @param {NavigationItem[]} data - The navigation data structure.\n * @param {string} itemId - The item id.\n * @returns The item that is the root parent of the received item.\n */\nconst findRootParentById = (data, itemId) => {\n return data.reduce((parent, item) => {\n if (parent) {\n return parent;\n }\n\n if (item.id === itemId) {\n return item;\n }\n\n if (item.data) {\n const found = findRootParentById(item.data, itemId);\n if (found) {\n return item;\n }\n }\n return null;\n }, null);\n};\n\n/**\n * Returns the complete item object from the data structure using the item id.\n *\n * @param {NavigationItem[]} data - The navigation data structure.\n * @param {string} itemId - The item id.\n * @returns The complete item object matching the received id.\n */\nconst findItemById = (data, itemId) => {\n return data.find((item) => {\n if (item.id === itemId) {\n return true;\n }\n\n if (item.data && item.data.length > 0) {\n const foundItem = findItemById(item.data, itemId);\n if (foundItem) {\n return true;\n }\n }\n return false;\n });\n};\n\n/**\n * Returns an array with all the parent item ids up until the target item is reached.\n *\n * @param {NavigationItem[]} data - The navigation data structure.\n * @param {string} itemId - The item id.\n * @returns An array with all the parent item ids\n */\nconst pathToItem = (data, itemId) => {\n const path = [];\n\n if (data != null && data.length > 0) {\n // eslint-disable-next-line no-plusplus\n for (let i = 0; i < data.length; ++i) {\n const item = data[i];\n if (item.id === itemId) {\n path.push(item.id);\n break;\n }\n\n const subPaths = pathToItem(item.data, itemId);\n if (subPaths.length > 0) {\n path.push(item.id);\n path.push(...subPaths);\n break;\n }\n }\n }\n\n return path;\n};\n\nexport { findRootParentById, findItemById, pathToItem };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,kBAAkB,GAAG,CAACC,IAAI,EAAEC,MAAM,KAAK;EAC3C,OAAOD,IAAI,CAACE,MAAM,CAAC,CAACC,MAAM,EAAEC,IAAI,KAAK;IACnC,IAAID,MAAM,EAAE;MACV,OAAOA,MAAM;IACf;IAEA,IAAIC,IAAI,CAACC,EAAE,KAAKJ,MAAM,EAAE;MACtB,OAAOG,IAAI;IACb;IAEA,IAAIA,IAAI,CAACJ,IAAI,EAAE;MACb,MAAMM,KAAK,GAAGP,kBAAkB,CAACK,IAAI,CAACJ,IAAI,EAAEC,MAAM,CAAC;MACnD,IAAIK,KAAK,EAAE;QACT,OAAOF,IAAI;MACb;IACF;IACA,OAAO,IAAI;EACb,CAAC,EAAE,IAAI,CAAC;AACV,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,YAAY,GAAG,CAACP,IAAI,EAAEC,MAAM,KAAK;EACrC,OAAOD,IAAI,CAACQ,IAAI,CAAEJ,IAAI,IAAK;IACzB,IAAIA,IAAI,CAACC,EAAE,KAAKJ,MAAM,EAAE;MACtB,OAAO,IAAI;IACb;IAEA,IAAIG,IAAI,CAACJ,IAAI,IAAII,IAAI,CAACJ,IAAI,CAACS,MAAM,GAAG,CAAC,EAAE;MACrC,MAAMC,SAAS,GAAGH,YAAY,CAACH,IAAI,CAACJ,IAAI,EAAEC,MAAM,CAAC;MACjD,IAAIS,SAAS,EAAE;QACb,OAAO,IAAI;MACb;IACF;IACA,OAAO,KAAK;EACd,CAAC,CAAC;AACJ,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG,CAACX,IAAI,EAAEC,MAAM,KAAK;EACnC,MAAMW,IAAI,GAAG,EAAE;EAEf,IAAIZ,IAAI,IAAI,IAAI,IAAIA,IAAI,CAACS,MAAM,GAAG,CAAC,EAAE;IACnC;IACA,KAAK,IAAII,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGb,IAAI,CAACS,MAAM,EAAE,EAAEI,CAAC,EAAE;MACpC,MAAMT,IAAI,GAAGJ,IAAI,CAACa,CAAC,CAAC;MACpB,IAAIT,IAAI,CAACC,EAAE,KAAKJ,MAAM,EAAE;QACtBW,IAAI,CAACE,IAAI,CAACV,IAAI,CAACC,EAAE,CAAC;QAClB;MACF;MAEA,MAAMU,QAAQ,GAAGJ,UAAU,CAACP,IAAI,CAACJ,IAAI,EAAEC,MAAM,CAAC;MAC9C,IAAIc,QAAQ,CAACN,MAAM,GAAG,CAAC,EAAE;QACvBG,IAAI,CAACE,IAAI,CAACV,IAAI,CAACC,EAAE,CAAC;QAClBO,IAAI,CAACE,IAAI,CAAC,GAAGC,QAAQ,CAAC;QACtB;MACF;IACF;EACF;EAEA,OAAOH,IAAI;AACb,CAAC;AAED,SAASb,kBAAkB,EAAEQ,YAAY,EAAEI,UAAU"}
|
package/dist/modern/index.d.ts
CHANGED
package/dist/modern/index.js
CHANGED
|
@@ -10,4 +10,5 @@ export * from "./TimeAgo";
|
|
|
10
10
|
export { default as HvWizard } from "./Wizard";
|
|
11
11
|
export * from "./Wizard";
|
|
12
12
|
export { default as HvVerticalNavigation } from "./VerticalNavigation";
|
|
13
|
+
export { default as HvNavigationSlider } from "./NavigationSlider";
|
|
13
14
|
//# sourceMappingURL=index.js.map
|
package/dist/modern/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["default","HvColorPicker","HvDrawer","HvImageCarousel","HvInlineEditor","HvNavigationAnchors","HvNotificationPanel","HvStepNavigation","HvTimeAgo","HvWizard","HvVerticalNavigation"],"sources":["../../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvImageCarousel } from \"./ImageCarousel\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvStepNavigation } from \"./StepNavigation\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvWizard } from \"./Wizard\";\nexport * from \"./Wizard\";\nexport { default as HvVerticalNavigation } from \"./VerticalNavigation\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,eAAe;AACxD,SAASD,OAAO,IAAIE,QAAQ,QAAQ,UAAU;AAC9C,SAASF,OAAO,IAAIG,eAAe,QAAQ,iBAAiB;AAC5D,SAASH,OAAO,IAAII,cAAc,QAAQ,gBAAgB;AAC1D,SAASJ,OAAO,IAAIK,mBAAmB,QAAQ,qBAAqB;AACpE,SAASL,OAAO,IAAIM,mBAAmB,QAAQ,qBAAqB;AACpE,SAASN,OAAO,IAAIO,gBAAgB,QAAQ,kBAAkB;AAC9D,SAASP,OAAO,IAAIQ,SAAS,QAAQ,WAAW;AAChD,cAAc,WAAW;AACzB,SAASR,OAAO,IAAIS,QAAQ,QAAQ,UAAU;AAC9C,cAAc,UAAU;AACxB,SAAST,OAAO,IAAIU,oBAAoB,QAAQ,sBAAsB"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["default","HvColorPicker","HvDrawer","HvImageCarousel","HvInlineEditor","HvNavigationAnchors","HvNotificationPanel","HvStepNavigation","HvTimeAgo","HvWizard","HvVerticalNavigation","HvNavigationSlider"],"sources":["../../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvImageCarousel } from \"./ImageCarousel\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvStepNavigation } from \"./StepNavigation\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvWizard } from \"./Wizard\";\nexport * from \"./Wizard\";\nexport { default as HvVerticalNavigation } from \"./VerticalNavigation\";\nexport { default as HvNavigationSlider } from \"./NavigationSlider\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,eAAe;AACxD,SAASD,OAAO,IAAIE,QAAQ,QAAQ,UAAU;AAC9C,SAASF,OAAO,IAAIG,eAAe,QAAQ,iBAAiB;AAC5D,SAASH,OAAO,IAAII,cAAc,QAAQ,gBAAgB;AAC1D,SAASJ,OAAO,IAAIK,mBAAmB,QAAQ,qBAAqB;AACpE,SAASL,OAAO,IAAIM,mBAAmB,QAAQ,qBAAqB;AACpE,SAASN,OAAO,IAAIO,gBAAgB,QAAQ,kBAAkB;AAC9D,SAASP,OAAO,IAAIQ,SAAS,QAAQ,WAAW;AAChD,cAAc,WAAW;AACzB,SAASR,OAAO,IAAIS,QAAQ,QAAQ,UAAU;AAC9C,cAAc,UAAU;AACxB,SAAST,OAAO,IAAIU,oBAAoB,QAAQ,sBAAsB;AACtE,SAASV,OAAO,IAAIW,kBAAkB,QAAQ,oBAAoB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.5.0",
|
|
4
4
|
"description": "A collection of contributed React components for the Hitachi Vantara's Design System.",
|
|
5
5
|
"homepage": "https://github.com/lumada-design/hv-uikit-react",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,8 +44,8 @@
|
|
|
44
44
|
"react-dom": "^16.13.1 || ^17.0.2"
|
|
45
45
|
},
|
|
46
46
|
"dependencies": {
|
|
47
|
-
"@hitachivantara/uikit-react-core": "^4.4.
|
|
48
|
-
"@hitachivantara/uikit-react-icons": "^4.0.
|
|
47
|
+
"@hitachivantara/uikit-react-core": "^4.4.3",
|
|
48
|
+
"@hitachivantara/uikit-react-icons": "^4.0.6",
|
|
49
49
|
"clsx": "^1.2.1",
|
|
50
50
|
"core-js": "^3.26.1",
|
|
51
51
|
"dayjs": "^1.11.4",
|
|
@@ -64,5 +64,5 @@
|
|
|
64
64
|
"publishConfig": {
|
|
65
65
|
"access": "public"
|
|
66
66
|
},
|
|
67
|
-
"gitHead": "
|
|
67
|
+
"gitHead": "149d2046c9cf6d71dfa0f3588341ba0277e6183f"
|
|
68
68
|
}
|