@hitachivantara/uikit-react-lab 4.3.3 → 4.5.0

package/dist/modern/NavigationSlider/Navigation/Navigation.js

@@ -0,0 +1,88 @@
+var _DropRightXS, _div;
+import React from "react";
+import { withStyles } from "@mui/styles";
+import PropTypes from "prop-types";
+import { HvListContainer, HvListItem, HvButton } from "@hitachivantara/uikit-react-core";
+import { DropRightXS } from "@hitachivantara/uikit-react-icons";
+import styles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Navigation = ({
+  id,
+  classes,
+  data,
+  selected,
+  onNavigateToTarget,
+  onNavigateToChild
+}) => {
+  return /*#__PURE__*/_jsx(HvListContainer, {
+    interactive: true,
+    id: id,
+    children: data.map(item => /*#__PURE__*/_jsx(HvListItem, {
+      classes: {
+        root: classes.listItemRoot,
+        selected: classes.listItemSelected
+      },
+      onClick: event => onNavigateToTarget(event, item),
+      selected: selected === item.id,
+      startAdornment: item.icon,
+      endAdornment: item.data && item.data.length > 0 ? /*#__PURE__*/_jsx(HvButton, {
+        icon: true,
+        onClick: event => onNavigateToChild(event, item),
+        children: _DropRightXS || (_DropRightXS = /*#__PURE__*/_jsx(DropRightXS, {}))
+      }) : _div || (_div = /*#__PURE__*/_jsx("div", {})),
+      children: /*#__PURE__*/_jsx("span", {
+        children: item.label
+      })
+    }, item.id))
+  });
+};
+process.env.NODE_ENV !== "production" ? Navigation.propTypes = {
+  /**
+   * Id to be applied to the root node of the panel.
+   */
+  id: PropTypes.string,
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * styles object applied to the root
+     */
+    listItemRoot: PropTypes.string,
+    listItemSelected: PropTypes.string
+  }).isRequired,
+  /**
+   * An array containing the data for each menu item.
+   *
+   * id - the id to be applied to the root element.
+   * label - the label to be rendered on the menu item.
+   * icon - the icon react element
+   * data - sub-menu items
+   * href - the url used for navigation.
+   * target - the behavior when opening an url.
+   */
+  data: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    icon: PropTypes.node,
+    data: PropTypes.array,
+    href: PropTypes.string,
+    target: PropTypes.string
+  })).isRequired,
+  /**
+   * The selected item id.
+   */
+  selected: PropTypes.string,
+  /**
+   * Triggered when the item is clicked.
+   */
+  onNavigateToTarget: PropTypes.func,
+  /**
+   * Triggered when the navigate to child button is clicked.
+   */
+  onNavigateToChild: PropTypes.func
+} : void 0;
+export default withStyles(styles, {
+  name: "Navigation"
+})(Navigation);
+//# sourceMappingURL=Navigation.js.map

package/dist/modern/NavigationSlider/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","names":["React","withStyles","PropTypes","HvListContainer","HvListItem","HvButton","DropRightXS","styles","Navigation","id","classes","data","selected","onNavigateToTarget","onNavigateToChild","map","item","root","listItemRoot","listItemSelected","event","icon","length","label","propTypes","string","shape","isRequired","arrayOf","node","array","href","target","func","name"],"sources":["../../../../src/NavigationSlider/Navigation/Navigation.js"],"sourcesContent":["import React from \"react\";\nimport { withStyles } from \"@mui/styles\";\nimport PropTypes from \"prop-types\";\n\nimport { HvListContainer, HvListItem, HvButton } from \"@hitachivantara/uikit-react-core\";\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport styles from \"./styles\";\n\nconst Navigation = ({ id, classes, data, selected, onNavigateToTarget, onNavigateToChild }) => {\n  return (\n    <HvListContainer interactive id={id}>\n      {data.map((item) => (\n        <HvListItem\n          key={item.id}\n          classes={{\n            root: classes.listItemRoot,\n            selected: classes.listItemSelected,\n          }}\n          onClick={(event) => onNavigateToTarget(event, item)}\n          selected={selected === item.id}\n          startAdornment={item.icon}\n          endAdornment={\n            item.data && item.data.length > 0 ? (\n              <HvButton icon onClick={(event) => onNavigateToChild(event, item)}>\n                <DropRightXS />\n              </HvButton>\n            ) : (\n              <div />\n            )\n          }\n        >\n          <span>{item.label}</span>\n        </HvListItem>\n      ))}\n    </HvListContainer>\n  );\n};\n\nNavigation.propTypes = {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * styles object applied to the root\n     */\n    listItemRoot: PropTypes.string,\n    listItemSelected: PropTypes.string,\n  }).isRequired,\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 react element\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 selected item id.\n   */\n  selected: PropTypes.string,\n  /**\n   * Triggered when the item is clicked.\n   */\n  onNavigateToTarget: PropTypes.func,\n  /**\n   * Triggered when the navigate to child button is clicked.\n   */\n  onNavigateToChild: PropTypes.func,\n};\n\nexport default withStyles(styles, { name: \"Navigation\" })(Navigation);\n"],"mappings":";AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,aAAa;AACxC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,eAAe,EAAEC,UAAU,EAAEC,QAAQ,QAAQ,kCAAkC;AACxF,SAASC,WAAW,QAAQ,mCAAmC;AAE/D,OAAOC,MAAM,MAAM,UAAU;AAAC;AAE9B,MAAMC,UAAU,GAAG,CAAC;EAAEC,EAAE;EAAEC,OAAO;EAAEC,IAAI;EAAEC,QAAQ;EAAEC,kBAAkB;EAAEC;AAAkB,CAAC,KAAK;EAC7F,oBACE,KAAC,eAAe;IAAC,WAAW;IAAC,EAAE,EAAEL,EAAG;IAAA,UACjCE,IAAI,CAACI,GAAG,CAAEC,IAAI,iBACb,KAAC,UAAU;MAET,OAAO,EAAE;QACPC,IAAI,EAAEP,OAAO,CAACQ,YAAY;QAC1BN,QAAQ,EAAEF,OAAO,CAACS;MACpB,CAAE;MACF,OAAO,EAAGC,KAAK,IAAKP,kBAAkB,CAACO,KAAK,EAAEJ,IAAI,CAAE;MACpD,QAAQ,EAAEJ,QAAQ,KAAKI,IAAI,CAACP,EAAG;MAC/B,cAAc,EAAEO,IAAI,CAACK,IAAK;MAC1B,YAAY,EACVL,IAAI,CAACL,IAAI,IAAIK,IAAI,CAACL,IAAI,CAACW,MAAM,GAAG,CAAC,gBAC/B,KAAC,QAAQ;QAAC,IAAI;QAAC,OAAO,EAAGF,KAAK,IAAKN,iBAAiB,CAACM,KAAK,EAAEJ,IAAI,CAAE;QAAA,uDAChE,KAAC,WAAW,KAAG;MAAA,EACN,gCAEX,eAAO,CAEV;MAAA,uBAED;QAAA,UAAOA,IAAI,CAACO;MAAK;IAAQ,GAlBpBP,IAAI,CAACP,EAAE,CAoBf;EAAC,EACc;AAEtB,CAAC;AAED,wCAAAD,UAAU,CAACgB,SAAS,GAAG;EACrB;AACF;AACA;EACEf,EAAE,EAAEP,SAAS,CAACuB,MAAM;EACpB;AACF;AACA;EACEf,OAAO,EAAER,SAAS,CAACwB,KAAK,CAAC;IACvB;AACJ;AACA;IACIR,YAAY,EAAEhB,SAAS,CAACuB,MAAM;IAC9BN,gBAAgB,EAAEjB,SAAS,CAACuB;EAC9B,CAAC,CAAC,CAACE,UAAU;EACb;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACEhB,IAAI,EAAET,SAAS,CAAC0B,OAAO,CACrB1B,SAAS,CAACwB,KAAK,CAAC;IACdjB,EAAE,EAAEP,SAAS,CAACuB,MAAM,CAACE,UAAU;IAC/BJ,KAAK,EAAErB,SAAS,CAACuB,MAAM,CAACE,UAAU;IAClCN,IAAI,EAAEnB,SAAS,CAAC2B,IAAI;IACpBlB,IAAI,EAAET,SAAS,CAAC4B,KAAK;IACrBC,IAAI,EAAE7B,SAAS,CAACuB,MAAM;IACtBO,MAAM,EAAE9B,SAAS,CAACuB;EACpB,CAAC,CAAC,CACH,CAACE,UAAU;EACZ;AACF;AACA;EACEf,QAAQ,EAAEV,SAAS,CAACuB,MAAM;EAC1B;AACF;AACA;EACEZ,kBAAkB,EAAEX,SAAS,CAAC+B,IAAI;EAClC;AACF;AACA;EACEnB,iBAAiB,EAAEZ,SAAS,CAAC+B;AAC/B,CAAC;AAED,eAAehC,UAAU,CAACM,MAAM,EAAE;EAAE2B,IAAI,EAAE;AAAa,CAAC,CAAC,CAAC1B,UAAU,CAAC"}

package/dist/modern/NavigationSlider/Navigation/index.js

@@ -0,0 +1,2 @@
+export { default } from "./Navigation";
+//# sourceMappingURL=index.js.map

package/dist/modern/NavigationSlider/Navigation/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../../src/NavigationSlider/Navigation/index.js"],"sourcesContent":["export { default } from \"./Navigation\";\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,cAAc"}

package/dist/modern/NavigationSlider/Navigation/styles.js

@@ -0,0 +1,21 @@
+const styles = theme => ({
+  listItemRoot: {
+    display: "flex",
+    alignItems: "center",
+    borderLeft: `2px solid transparent`,
+    minHeight: "52px",
+    marginBottom: "8px",
+    "& > button": {
+      marginLeft: "auto"
+    }
+  },
+  listItemSelected: {
+    background: theme.hv.palette.atmosphere.atmo3,
+    borderLeft: `2px solid ${theme.hv.palette.accent.acce3}`,
+    "& *": {
+      background: theme.hv.palette.atmosphere.atmo3
+    }
+  }
+});
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/NavigationSlider/Navigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["styles","theme","listItemRoot","display","alignItems","borderLeft","minHeight","marginBottom","marginLeft","listItemSelected","background","hv","palette","atmosphere","atmo3","accent","acce3"],"sources":["../../../../src/NavigationSlider/Navigation/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  listItemRoot: {\n    display: \"flex\",\n    alignItems: \"center\",\n    borderLeft: `2px solid transparent`,\n    minHeight: \"52px\",\n    marginBottom: \"8px\",\n    \"& > button\": {\n      marginLeft: \"auto\",\n    },\n  },\n  listItemSelected: {\n    background: theme.hv.palette.atmosphere.atmo3,\n    borderLeft: `2px solid ${theme.hv.palette.accent.acce3}`,\n    \"& *\": {\n      background: theme.hv.palette.atmosphere.atmo3,\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":"AAAA,MAAMA,MAAM,GAAIC,KAAK,KAAM;EACzBC,YAAY,EAAE;IACZC,OAAO,EAAE,MAAM;IACfC,UAAU,EAAE,QAAQ;IACpBC,UAAU,EAAG,uBAAsB;IACnCC,SAAS,EAAE,MAAM;IACjBC,YAAY,EAAE,KAAK;IACnB,YAAY,EAAE;MACZC,UAAU,EAAE;IACd;EACF,CAAC;EACDC,gBAAgB,EAAE;IAChBC,UAAU,EAAET,KAAK,CAACU,EAAE,CAACC,OAAO,CAACC,UAAU,CAACC,KAAK;IAC7CT,UAAU,EAAG,aAAYJ,KAAK,CAACU,EAAE,CAACC,OAAO,CAACG,MAAM,CAACC,KAAM,EAAC;IACxD,KAAK,EAAE;MACLN,UAAU,EAAET,KAAK,CAACU,EAAE,CAACC,OAAO,CAACC,UAAU,CAACC;IAC1C;EACF;AACF,CAAC,CAAC;AAEF,eAAed,MAAM"}

package/dist/modern/NavigationSlider/NavigationSlider.d.ts

@@ -0,0 +1,30 @@
+import { NavigationData } from "@hitachivantara/uikit-react-core";
+
+export interface HvVerticalNavigationProps {
+  /**
+   * Id to be applied to the root node of the panel.
+   */
+  id?: string;
+  /**
+   * Called when a menu item is clicked.
+   */
+  onNavigationChange?: Function;
+  /**
+   * An array containing the data for each menu item.
+   */
+  data: NavigationData[];
+  /**
+   * The ID of the selected page.
+   */
+  selected?: string;
+  /**
+   * The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
+   */
+  topPosition?: number;
+  /**
+   * The width of the panel. Default value is 300.
+   */
+  panelWidth?: number;
+}
+
+export default function HvVerticalNavigation(props: HvVerticalNavigationProps): JSX.Element | null;

package/dist/modern/NavigationSlider/NavigationSlider.js

@@ -0,0 +1,116 @@
+import React, { useState, useMemo } from "react";
+import { withStyles } from "@mui/styles";
+import PropTypes from "prop-types";
+import { HvVerticalNavigation as HvVerticalNavigationCore } from "@hitachivantara/uikit-react-core";
+import Header from "./Header";
+import Navigation from "./Navigation";
+import { fillDataWithParentId, getNavigationItemById, getParentItemById } from "./utils";
+import useStyles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const HvNavigationSlider = ({
+  id,
+  onNavigationChange,
+  data,
+  title,
+  selected,
+  topPosition,
+  panelWidth
+}) => {
+  const classes = useStyles({
+    topPosition,
+    panelWidth
+  })();
+  const withParentData = useMemo(() => fillDataWithParentId(data), [data]);
+  const initialParentItem = useMemo(() => getParentItemById(withParentData, selected), [withParentData, selected]);
+  const [parentItem, setParentItem] = useState(initialParentItem);
+  const navigateToParentHandler = () => {
+    setParentItem(getParentItemById(withParentData, parentItem.id));
+  };
+  const navigateToTargetHandler = (event, selectedItem) => {
+    onNavigationChange(event, selectedItem);
+  };
+  const navigateToChildHandler = (event, item) => {
+    setParentItem(getNavigationItemById(withParentData, item.id));
+    event.stopPropagation();
+  };
+  return /*#__PURE__*/_jsx("div", {
+    id: id,
+    className: classes.container,
+    children: /*#__PURE__*/_jsxs(HvVerticalNavigationCore, {
+      className: classes.root,
+      children: [/*#__PURE__*/_jsx(Header, {
+        onBackButtonClick: navigateToParentHandler,
+        showBackButton: !!(parentItem !== null && parentItem !== void 0 && parentItem.label),
+        title: (parentItem === null || parentItem === void 0 ? void 0 : parentItem.label) || title
+      }), /*#__PURE__*/_jsx(Navigation, {
+        data: parentItem.data || withParentData,
+        selected: selected,
+        onNavigateToTarget: navigateToTargetHandler,
+        onNavigateToChild: navigateToChildHandler
+      })]
+    })
+  });
+};
+process.env.NODE_ENV !== "production" ? HvNavigationSlider.propTypes = {
+  /**
+   * Id to be applied to the root node of the panel.
+   */
+  id: PropTypes.string,
+  /**
+   * A Jss Object used to override or extend the styles applied.
+   */
+  classes: PropTypes.shape({
+    /**
+     * styles object applied to the root
+     */
+    container: PropTypes.string,
+    root: PropTypes.string,
+    footer: PropTypes.string
+  }).isRequired,
+  /**
+   * Called when a menu item is clicked.
+   */
+  onNavigationChange: PropTypes.func,
+  /**
+   * An array containing the data for each menu item.
+   *
+   * id - the id to be applied to the root element.
+   * label - the label to be rendered on the menu item.
+   * data - sub-menu items
+   * href - the url used for navigation.
+   * target - the behavior when opening an url.
+   */
+  data: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    icon: PropTypes.node,
+    data: PropTypes.array,
+    href: PropTypes.string,
+    target: PropTypes.string
+  })).isRequired,
+  /**
+   * The text to be displayed when at the root of the structure.
+   */
+  title: PropTypes.string,
+  /**
+   * The ID of the selected page.
+   */
+  selected: PropTypes.string,
+  /**
+   * The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
+   */
+  topPosition: PropTypes.number,
+  /**
+   * The width of the panel when expanded. Default value is 300.
+   */
+  panelWidth: PropTypes.number
+} : void 0;
+HvNavigationSlider.defaultProps = {
+  topPosition: 44,
+  panelWidth: 300
+};
+export default withStyles(useStyles, {
+  name: "HvNavigationSlider"
+})(HvNavigationSlider);
+//# sourceMappingURL=NavigationSlider.js.map

package/dist/modern/NavigationSlider/NavigationSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationSlider.js","names":["React","useState","useMemo","withStyles","PropTypes","HvVerticalNavigation","HvVerticalNavigationCore","Header","Navigation","fillDataWithParentId","getNavigationItemById","getParentItemById","useStyles","HvNavigationSlider","id","onNavigationChange","data","title","selected","topPosition","panelWidth","classes","withParentData","initialParentItem","parentItem","setParentItem","navigateToParentHandler","navigateToTargetHandler","event","selectedItem","navigateToChildHandler","item","stopPropagation","container","root","label","propTypes","string","shape","footer","isRequired","func","arrayOf","icon","node","array","href","target","number","defaultProps","name"],"sources":["../../../src/NavigationSlider/NavigationSlider.js"],"sourcesContent":["import React, { useState, useMemo } from \"react\";\nimport { withStyles } from \"@mui/styles\";\nimport PropTypes from \"prop-types\";\n\nimport { HvVerticalNavigation as HvVerticalNavigationCore } from \"@hitachivantara/uikit-react-core\";\n\nimport Header from \"./Header\";\nimport Navigation from \"./Navigation\";\nimport { fillDataWithParentId, getNavigationItemById, getParentItemById } from \"./utils\";\n\nimport useStyles from \"./styles\";\n\nconst HvNavigationSlider = ({\n  id,\n  onNavigationChange,\n  data,\n  title,\n  selected,\n  topPosition,\n  panelWidth,\n}) => {\n  const classes = useStyles({ topPosition, panelWidth })();\n\n  const withParentData = useMemo(() => fillDataWithParentId(data), [data]);\n\n  const initialParentItem = useMemo(\n    () => getParentItemById(withParentData, selected),\n    [withParentData, selected]\n  );\n\n  const [parentItem, setParentItem] = useState(initialParentItem);\n\n  const navigateToParentHandler = () => {\n    setParentItem(getParentItemById(withParentData, parentItem.id));\n  };\n\n  const navigateToTargetHandler = (event, selectedItem) => {\n    onNavigationChange(event, selectedItem);\n  };\n\n  const navigateToChildHandler = (event, item) => {\n    setParentItem(getNavigationItemById(withParentData, item.id));\n\n    event.stopPropagation();\n  };\n\n  return (\n    <div id={id} className={classes.container}>\n      <HvVerticalNavigationCore className={classes.root}>\n        <Header\n          onBackButtonClick={navigateToParentHandler}\n          showBackButton={!!parentItem?.label}\n          title={parentItem?.label || title}\n        />\n\n        <Navigation\n          data={parentItem.data || withParentData}\n          selected={selected}\n          onNavigateToTarget={navigateToTargetHandler}\n          onNavigateToChild={navigateToChildHandler}\n        />\n      </HvVerticalNavigationCore>\n    </div>\n  );\n};\n\nHvNavigationSlider.propTypes = {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id: PropTypes.string,\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes: PropTypes.shape({\n    /**\n     * styles object applied to the root\n     */\n    container: PropTypes.string,\n    root: PropTypes.string,\n    footer: PropTypes.string,\n  }).isRequired,\n  /**\n   * Called when a menu item is clicked.\n   */\n  onNavigationChange: 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   * 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 text to be displayed when at the root of the structure.\n   */\n  title: PropTypes.string,\n  /**\n   * The ID of the selected page.\n   */\n  selected: PropTypes.string,\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  panelWidth: PropTypes.number,\n};\n\nHvNavigationSlider.defaultProps = {\n  topPosition: 44,\n  panelWidth: 300,\n};\n\nexport default withStyles(useStyles, { name: \"HvNavigationSlider\" })(HvNavigationSlider);\n"],"mappings":"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"}

package/dist/modern/NavigationSlider/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./NavigationSlider";
+export * from "./NavigationSlider";

package/dist/modern/NavigationSlider/index.js

@@ -0,0 +1,2 @@
+export { default } from "./NavigationSlider";
+//# sourceMappingURL=index.js.map

package/dist/modern/NavigationSlider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default"],"sources":["../../../src/NavigationSlider/index.js"],"sourcesContent":["export { default } from \"./NavigationSlider\";\n"],"mappings":"AAAA,SAASA,OAAO,QAAQ,oBAAoB"}

package/dist/modern/NavigationSlider/styles.js

@@ -0,0 +1,18 @@
+import { makeStyles } from "@mui/styles";
+const styles = props => makeStyles(() => ({
+  container: {
+    position: "fixed",
+    left: 0,
+    top: props.topPosition
+  },
+  root: {
+    width: props.panelWidth,
+    height: `calc(100vh - ${props.topPosition}px)`,
+    justifyContent: "flex-start"
+  },
+  footer: {
+    marginTop: "auto"
+  }
+}));
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/modern/NavigationSlider/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["makeStyles","styles","props","container","position","left","top","topPosition","root","width","panelWidth","height","justifyContent","footer","marginTop"],"sources":["../../../src/NavigationSlider/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\nconst styles = (props) =>\n  makeStyles(() => ({\n    container: {\n      position: \"fixed\",\n      left: 0,\n      top: props.topPosition,\n    },\n    root: {\n      width: props.panelWidth,\n      height: `calc(100vh - ${props.topPosition}px)`,\n      justifyContent: \"flex-start\",\n    },\n    footer: {\n      marginTop: \"auto\",\n    },\n  }));\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,aAAa;AAExC,MAAMC,MAAM,GAAIC,KAAK,IACnBF,UAAU,CAAC,OAAO;EAChBG,SAAS,EAAE;IACTC,QAAQ,EAAE,OAAO;IACjBC,IAAI,EAAE,CAAC;IACPC,GAAG,EAAEJ,KAAK,CAACK;EACb,CAAC;EACDC,IAAI,EAAE;IACJC,KAAK,EAAEP,KAAK,CAACQ,UAAU;IACvBC,MAAM,EAAG,gBAAeT,KAAK,CAACK,WAAY,KAAI;IAC9CK,cAAc,EAAE;EAClB,CAAC;EACDC,MAAM,EAAE;IACNC,SAAS,EAAE;EACb;AACF,CAAC,CAAC,CAAC;AAEL,eAAeb,MAAM"}

package/dist/modern/NavigationSlider/utils.js

@@ -0,0 +1,70 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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; }
+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; }
+/**
+ * Recursively searches in a collection the first element where the property matches the specified value.
+ *
+ * @param collection - Collection where the search will be performed
+ * @param childrenPropName - The children property name where the recursive search will be performed
+ * @param propName - The name of the property to be used on the search
+ * @param propValue - The value of the property to be used on the search
+ * @returns The element that matches the requirement or null if none is found
+ */
+const searchInCollection = (collection, childrenPropName, propName, propValue) => {
+  if (collection[propName] === propValue) {
+    return collection;
+  }
+  const items = collection[childrenPropName] || collection;
+  let foundItem = null;
+  for (let index = 0; foundItem === null && index < items.length; index += 1) {
+    foundItem = searchInCollection(items[index], childrenPropName, propName, propValue);
+  }
+  return foundItem;
+};
+
+/**
+ * Returns the navigation item with the specified id.
+ *
+ * @param navigationItems - The collection of navigation items.
+ * @param navigationItemId - The id to be used on the search
+ * @returns The navigation item with the specified id.
+ */
+const getNavigationItemById = (navigationItems, navigationItemId) => {
+  return searchInCollection(navigationItems, "data", "id", navigationItemId);
+};
+
+/**
+ * Returns the parent item for the received item id.
+ *
+ * @param navigationItems - The collection of navigation items.
+ * @param navigationItemId - The id to be used on the search
+ * @returns The parent navigation item.
+ */
+const getParentItemById = (navigationItems, navigationItemId) => {
+  const parentId = getNavigationItemById(navigationItems, navigationItemId).parent;
+  return getNavigationItemById(navigationItems, parentId);
+};
+
+/**
+ * Fills the data structure with the parent id on each one of the nodes.
+ *
+ * @param navigationItems - The collection of navigation items.
+ * @param parentItemId - The parent id to be added.
+ * @returns The structure now filled with the parent id.
+ */
+const fillDataWithParentId = (navigationItems, parentItemId) => {
+  return navigationItems.map(item => {
+    var _item$data;
+    if ((item === null || item === void 0 ? void 0 : (_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.length) > 0) {
+      return _objectSpread(_objectSpread({}, item), {}, {
+        parent: parentItemId,
+        data: fillDataWithParentId(item.data, item.id)
+      });
+    }
+    return _objectSpread(_objectSpread({}, item), {}, {
+      parent: parentItemId
+    });
+  });
+};
+export { getNavigationItemById, getParentItemById, fillDataWithParentId };
+//# sourceMappingURL=utils.js.map

package/dist/modern/NavigationSlider/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["searchInCollection","collection","childrenPropName","propName","propValue","items","foundItem","index","length","getNavigationItemById","navigationItems","navigationItemId","getParentItemById","parentId","parent","fillDataWithParentId","parentItemId","map","item","data","id"],"sources":["../../../src/NavigationSlider/utils.js"],"sourcesContent":["/**\n * Recursively searches in a collection the first element where the property matches the specified value.\n *\n * @param collection - Collection where the search will be performed\n * @param childrenPropName - The children property name where the recursive search will be performed\n * @param propName - The name of the property to be used on the search\n * @param propValue - The value of the property to be used on the search\n * @returns The element that matches the requirement or null if none is found\n */\nconst searchInCollection = (collection, childrenPropName, propName, propValue) => {\n  if (collection[propName] === propValue) {\n    return collection;\n  }\n\n  const items = collection[childrenPropName] || collection;\n\n  let foundItem = null;\n  for (let index = 0; foundItem === null && index < items.length; index += 1) {\n    foundItem = searchInCollection(items[index], childrenPropName, propName, propValue);\n  }\n  return foundItem;\n};\n\n/**\n * Returns the navigation item with the specified id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The navigation item with the specified id.\n */\nconst getNavigationItemById = (navigationItems, navigationItemId) => {\n  return searchInCollection(navigationItems, \"data\", \"id\", navigationItemId);\n};\n\n/**\n * Returns the parent item for the received item id.\n *\n * @param navigationItems - The collection of navigation items.\n * @param navigationItemId - The id to be used on the search\n * @returns The parent navigation item.\n */\nconst getParentItemById = (navigationItems, navigationItemId) => {\n  const parentId = getNavigationItemById(navigationItems, navigationItemId).parent;\n  return getNavigationItemById(navigationItems, parentId);\n};\n\n/**\n * Fills the data structure with the parent id on each one of the nodes.\n *\n * @param navigationItems - The collection of navigation items.\n * @param parentItemId - The parent id to be added.\n * @returns The structure now filled with the parent id.\n */\nconst fillDataWithParentId = (navigationItems, parentItemId) => {\n  return navigationItems.map((item) => {\n    if (item?.data?.length > 0) {\n      return { ...item, parent: parentItemId, data: fillDataWithParentId(item.data, item.id) };\n    }\n    return { ...item, parent: parentItemId };\n  });\n};\n\nexport { getNavigationItemById, getParentItemById, fillDataWithParentId };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMA,kBAAkB,GAAG,CAACC,UAAU,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,SAAS,KAAK;EAChF,IAAIH,UAAU,CAACE,QAAQ,CAAC,KAAKC,SAAS,EAAE;IACtC,OAAOH,UAAU;EACnB;EAEA,MAAMI,KAAK,GAAGJ,UAAU,CAACC,gBAAgB,CAAC,IAAID,UAAU;EAExD,IAAIK,SAAS,GAAG,IAAI;EACpB,KAAK,IAAIC,KAAK,GAAG,CAAC,EAAED,SAAS,KAAK,IAAI,IAAIC,KAAK,GAAGF,KAAK,CAACG,MAAM,EAAED,KAAK,IAAI,CAAC,EAAE;IAC1ED,SAAS,GAAGN,kBAAkB,CAACK,KAAK,CAACE,KAAK,CAAC,EAAEL,gBAAgB,EAAEC,QAAQ,EAAEC,SAAS,CAAC;EACrF;EACA,OAAOE,SAAS;AAClB,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMG,qBAAqB,GAAG,CAACC,eAAe,EAAEC,gBAAgB,KAAK;EACnE,OAAOX,kBAAkB,CAACU,eAAe,EAAE,MAAM,EAAE,IAAI,EAAEC,gBAAgB,CAAC;AAC5E,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,iBAAiB,GAAG,CAACF,eAAe,EAAEC,gBAAgB,KAAK;EAC/D,MAAME,QAAQ,GAAGJ,qBAAqB,CAACC,eAAe,EAAEC,gBAAgB,CAAC,CAACG,MAAM;EAChF,OAAOL,qBAAqB,CAACC,eAAe,EAAEG,QAAQ,CAAC;AACzD,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,oBAAoB,GAAG,CAACL,eAAe,EAAEM,YAAY,KAAK;EAC9D,OAAON,eAAe,CAACO,GAAG,CAAEC,IAAI,IAAK;IAAA;IACnC,IAAI,CAAAA,IAAI,aAAJA,IAAI,qCAAJA,IAAI,CAAEC,IAAI,+CAAV,WAAYX,MAAM,IAAG,CAAC,EAAE;MAC1B,uCAAYU,IAAI;QAAEJ,MAAM,EAAEE,YAAY;QAAEG,IAAI,EAAEJ,oBAAoB,CAACG,IAAI,CAACC,IAAI,EAAED,IAAI,CAACE,EAAE;MAAC;IACxF;IACA,uCAAYF,IAAI;MAAEJ,MAAM,EAAEE;IAAY;EACxC,CAAC,CAAC;AACJ,CAAC;AAED,SAASP,qBAAqB,EAAEG,iBAAiB,EAAEG,oBAAoB"}

package/dist/modern/VerticalNavigation/VerticalNavigation.d.ts

@@ -1,26 +1,26 @@
 import { NavigationData } from "@hitachivantara/uikit-react-core";
 
 export interface HvVerticalNavigationProps {
-  /**
-   * Id to be applied to the root node of the panel.
-   */
-  id?: string;
   /**
    * Called when a menu item is clicked.
    */
   onNavigationChange?: Function;
   /**
-   * An array containing the data for each menu item.
+   * Called the collpase / expand button is clicked.
    */
-  data: NavigationData[];
+  onToggleExpanded?: Function;
   /**
-   * Text to be displayed in the collpase area when the panel is expanded.
+   * An array containing the data for each menu item.
    */
-  collapseLabel?: string;
+  data: NavigationData[];
   /**
    * The ID of the selected page.
    */
   selected?: string;
+  /**
+   * Flag that sets the panel to expanded / collapsed.
+   */
+  expanded: boolean;
   /**
    * The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
    */
@@ -33,6 +33,10 @@ export interface HvVerticalNavigationProps {
    * The width of the panel when collapsed. Default vlaue is 52.
    */
   collapsedPanelWidth?: number;
+  /**
+   * Sets the Css position of the panel. Default value is `sticked`
+   */
+  position?: "static" | "relative" | "fixed" | "absolute" | "sticky";
 }
 
 export default function HvVerticalNavigation(props: HvVerticalNavigationProps): JSX.Element | null;

package/dist/modern/VerticalNavigation/VerticalNavigation.js

@@ -1,72 +1,98 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _Backwards, _Forwards;
+const _excluded = ["onNavigationChange", "onToggleExpanded", "data", "selected", "expanded", "topPosition", "expandedPanelWidth", "collapsedPanelWidth", "position"],
+  _excluded2 = ["data"];
+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; }
+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; }
 import React, { useState } from "react";
 import { withStyles } from "@mui/styles";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { HvVerticalNavigation as HvVerticalNavigationCore, HvVerticalNavigationTree, HvVerticalNavigationActions, HvButton, setId } from "@hitachivantara/uikit-react-core";
+import { HvVerticalNavigation as HvVerticalNavigationCore, HvVerticalNavigationTree, HvButton, HvContainer } from "@hitachivantara/uikit-react-core";
 import { Backwards, Forwards } from "@hitachivantara/uikit-react-icons";
 import useStyles from "./styles";
+import { findRootParentById, findItemById, pathToItem } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const HvVerticalNavigation = ({
-  id,
-  onNavigationChange,
-  data,
-  selected,
-  collapseLabel,
-  topPosition,
-  expandedPanelWidth,
-  collapsedPanelWidth,
-  position
-}) => {
+const HvVerticalNavigation = _ref => {
+  var _findRootParentById;
+  let {
+      onNavigationChange,
+      onToggleExpanded,
+      data,
+      selected,
+      expanded,
+      topPosition,
+      expandedPanelWidth,
+      collapsedPanelWidth,
+      position
+    } = _ref,
+    others = _objectWithoutProperties(_ref, _excluded);
   const classes = useStyles({
     topPosition,
     expandedPanelWidth,
     collapsedPanelWidth,
     position
   })();
-  const [isExpanded, setIsExpanded] = useState(true);
+  const noSubData = data.map(_ref2 => {
+    let {
+        data: dataToRemove
+      } = _ref2,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
+    return rest;
+  });
+  const [expandedItems, setExpandedItems] = useState(pathToItem(data, selected));
+  const selectedTopParent = (_findRootParentById = findRootParentById(data, selected)) === null || _findRootParentById === void 0 ? void 0 : _findRootParentById.id;
   const handleVerticalNavigationChange = (event, item) => {
-    onNavigationChange === null || onNavigationChange === void 0 ? void 0 : onNavigationChange(event, item);
+    // This need to be done because the item recieved on the callback is missing the original data object
+    const fullItem = findItemById(data, item.id);
+    if (!expanded && fullItem.data && fullItem.data.length > 0) {
+      setExpandedItems(prevState => [...prevState, item.id]);
+      onToggleExpanded(true);
+    } else {
+      onNavigationChange === null || onNavigationChange === void 0 ? void 0 : onNavigationChange(event, item);
+    }
+  };
+  const handleVerticalNavigationToggle = (event, currentExpandedItems) => {
+    setExpandedItems(currentExpandedItems);
   };
   const handleExpandToggle = () => {
-    setIsExpanded(prevState => !prevState);
+    onToggleExpanded(!expanded);
   };
-  return /*#__PURE__*/_jsxs(HvVerticalNavigationCore, {
-    className: clsx(classes.panel, isExpanded ? classes.panelExpanded : classes.panelCollapsed),
-    children: [/*#__PURE__*/_jsx(HvVerticalNavigationTree, {
-      collapsible: true,
-      data: data,
-      selected: selected,
-      onChange: handleVerticalNavigationChange
-    }), /*#__PURE__*/_jsx(HvVerticalNavigationActions, {
+  return /*#__PURE__*/_jsxs(HvVerticalNavigationCore, _objectSpread(_objectSpread({
+    className: clsx(classes.panel, expanded ? classes.panelExpanded : classes.panelCollapsed)
+  }, others), {}, {
+    children: [/*#__PURE__*/_jsx(HvContainer, {
+      className: `${classes.toggleCollapsePanel}`,
       children: /*#__PURE__*/_jsx(HvButton, {
-        id: setId(id, "button-toggle"),
-        className: clsx(isExpanded ? classes.collapseButton : classes.expandButton),
-        category: "ghost",
-        startIcon: isExpanded ? _Backwards || (_Backwards = /*#__PURE__*/_jsx(Backwards, {
+        icon: true,
+        onClick: handleExpandToggle,
+        children: expanded ? _Backwards || (_Backwards = /*#__PURE__*/_jsx(Backwards, {
           iconSize: "XS"
         })) : _Forwards || (_Forwards = /*#__PURE__*/_jsx(Forwards, {
           iconSize: "XS"
-        })),
-        onClick: handleExpandToggle,
-        children: isExpanded && /*#__PURE__*/_jsx("span", {
-          className: classes.collapseTextContainer,
-          children: collapseLabel
-        })
+        }))
       })
+    }), /*#__PURE__*/_jsx(HvVerticalNavigationTree, {
+      collapsible: true,
+      expanded: expandedItems,
+      data: expanded ? data : noSubData,
+      selected: expanded ? selected : selectedTopParent,
+      onChange: handleVerticalNavigationChange,
+      onToggle: handleVerticalNavigationToggle
     })]
-  });
+  }));
 };
 process.env.NODE_ENV !== "production" ? HvVerticalNavigation.propTypes = {
-  /**
-   * Id to be applied to the root node of the panel.
-   */
-  id: PropTypes.string,
   /**
    * Called when a menu item is clicked.
    */
   onNavigationChange: PropTypes.func,
+  /**
+   * Called when the collapse / expand button is clicked.
+   */
+  onToggleExpanded: PropTypes.func,
   /**
    * An array containing the data for each menu item.
    *
@@ -85,14 +111,14 @@ process.env.NODE_ENV !== "production" ? HvVerticalNavigation.propTypes = {
     href: PropTypes.string,
     target: PropTypes.string
   })).isRequired,
-  /**
-   * Text to be displayed in the collpase area when the panel is expanded.
-   */
-  collapseLabel: PropTypes.string,
   /**
    * The ID of the selected page.
    */
   selected: PropTypes.string,
+  /**
+   * Boolean value stating if the panel should be collapsed or expanded.
+   */
+  expanded: PropTypes.bool,
   /**
    * The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
    */
@@ -111,7 +137,6 @@ process.env.NODE_ENV !== "production" ? HvVerticalNavigation.propTypes = {
   position: PropTypes.oneOf(["static", "relative", "fixed", "absolute", "sticky"])
 } : void 0;
 HvVerticalNavigation.defaultProps = {
-  collapseLabel: "Collapse",
   topPosition: 44,
   expandedPanelWidth: 300,
   collapsedPanelWidth: 52,