@hitachivantara/uikit-react-lab 4.3.2 → 4.4.0

package/dist/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/VerticalNavigation/VerticalNavigation.js

@@ -1,18 +1,28 @@
 "use strict";
 
-require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
 require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.array.iterator.js");
 require("core-js/modules/es.string.iterator.js");
 require("core-js/modules/es.weak-map.js");
 require("core-js/modules/web.dom-collections.iterator.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.array.concat.js");
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _styles = require("@mui/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -20,71 +30,96 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _uikitReactCore = require("@hitachivantara/uikit-react-core");
 var _uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 var _styles2 = _interopRequireDefault(require("./styles"));
+var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
 var _Backwards, _Forwards;
+var _excluded = ["onNavigationChange", "onToggleExpanded", "data", "selected", "expanded", "topPosition", "expandedPanelWidth", "collapsedPanelWidth", "position"],
+  _excluded2 = ["data"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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) { (0, _defineProperty2.default)(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; }
 var HvVerticalNavigation = function HvVerticalNavigation(_ref) {
-  var id = _ref.id,
-    onNavigationChange = _ref.onNavigationChange,
+  var _findRootParentById;
+  var onNavigationChange = _ref.onNavigationChange,
+    onToggleExpanded = _ref.onToggleExpanded,
     data = _ref.data,
     selected = _ref.selected,
-    collapseLabel = _ref.collapseLabel,
+    expanded = _ref.expanded,
     topPosition = _ref.topPosition,
     expandedPanelWidth = _ref.expandedPanelWidth,
-    collapsedPanelWidth = _ref.collapsedPanelWidth;
+    collapsedPanelWidth = _ref.collapsedPanelWidth,
+    position = _ref.position,
+    others = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _styles2.default)({
     topPosition: topPosition,
     expandedPanelWidth: expandedPanelWidth,
-    collapsedPanelWidth: collapsedPanelWidth
+    collapsedPanelWidth: collapsedPanelWidth,
+    position: position
   })();
-  var _useState = (0, _react.useState)(true),
+  var noSubData = data.map(function (_ref2) {
+    var dataToRemove = _ref2.data,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+    return rest;
+  });
+  var _useState = (0, _react.useState)((0, _utils.getAllParents)(data).map(function (item) {
+      return item.id;
+    })),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    isExpanded = _useState2[0],
-    setIsExpanded = _useState2[1];
+    expandedItems = _useState2[0],
+    setExpandedItems = _useState2[1];
+  var selectedTopParent = (_findRootParentById = (0, _utils.findRootParentById)(data, selected)) === null || _findRootParentById === void 0 ? void 0 : _findRootParentById.id;
   var handleVerticalNavigationChange = function 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
+    var fullItem = (0, _utils.findItemById)(data, item.id);
+    if (!expanded && fullItem.data && fullItem.data.length > 0) {
+      setExpandedItems(function (prevState) {
+        return [].concat((0, _toConsumableArray2.default)(prevState), [item.id]);
+      });
+      onToggleExpanded(true);
+    } else {
+      onNavigationChange === null || onNavigationChange === void 0 ? void 0 : onNavigationChange(event, item);
+    }
+  };
+  var handleVerticalNavigationToggle = function handleVerticalNavigationToggle(event, currentExpandedItems) {
+    setExpandedItems(currentExpandedItems);
   };
   var handleExpandToggle = function handleExpandToggle() {
-    setIsExpanded(function (prevState) {
-      return !prevState;
-    });
+    onToggleExpanded(!expanded);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvVerticalNavigation, {
-    className: (0, _clsx.default)(classes.panel, isExpanded ? classes.panelExpanded : classes.panelCollapsed),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvVerticalNavigationTree, {
-      collapsible: true,
-      data: data,
-      selected: selected,
-      onChange: handleVerticalNavigationChange
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvVerticalNavigationActions, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_uikitReactCore.HvVerticalNavigation, _objectSpread(_objectSpread({
+    className: (0, _clsx.default)(classes.panel, expanded ? classes.panelExpanded : classes.panelCollapsed)
+  }, others), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvContainer, {
+      className: "".concat(classes.toggleCollapsePanel),
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.HvButton, {
-        id: (0, _uikitReactCore.setId)(id, "button-toggle"),
-        className: (0, _clsx.default)(isExpanded ? classes.collapseButton : classes.expandButton),
-        category: "ghost",
-        startIcon: isExpanded ? _Backwards || (_Backwards = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Backwards, {
+        icon: true,
+        onClick: handleExpandToggle,
+        children: expanded ? _Backwards || (_Backwards = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Backwards, {
           iconSize: "XS"
         })) : _Forwards || (_Forwards = /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactIcons.Forwards, {
           iconSize: "XS"
-        })),
-        onClick: handleExpandToggle,
-        children: isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-          className: classes.collapseTextContainer,
-          children: collapseLabel
-        })
+        }))
       })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_uikitReactCore.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.default.string,
   /**
    * Called when a menu item is clicked.
    */
   onNavigationChange: _propTypes.default.func,
+  /**
+   * Called when the collapse / expand button is clicked.
+   */
+  onToggleExpanded: _propTypes.default.func,
   /**
    * An array containing the data for each menu item.
    *
@@ -103,14 +138,14 @@ process.env.NODE_ENV !== "production" ? HvVerticalNavigation.propTypes = {
     href: _propTypes.default.string,
     target: _propTypes.default.string
   })).isRequired,
-  /**
-   * Text to be displayed in the collpase area when the panel is expanded.
-   */
-  collapseLabel: _propTypes.default.string,
   /**
    * The ID of the selected page.
    */
   selected: _propTypes.default.string,
+  /**
+   * Boolean value stating if the panel should be collapsed or expanded.
+   */
+  expanded: _propTypes.default.bool,
   /**
    * The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
    */
@@ -122,13 +157,17 @@ process.env.NODE_ENV !== "production" ? HvVerticalNavigation.propTypes = {
   /**
    * The width of the panel when collapsed. Default vlaue is 52.
    */
-  collapsedPanelWidth: _propTypes.default.number
+  collapsedPanelWidth: _propTypes.default.number,
+  /**
+   * Position of the component.
+   */
+  position: _propTypes.default.oneOf(["static", "relative", "fixed", "absolute", "sticky"])
 } : void 0;
 HvVerticalNavigation.defaultProps = {
-  collapseLabel: "Collapse",
   topPosition: 44,
   expandedPanelWidth: 300,
-  collapsedPanelWidth: 52
+  collapsedPanelWidth: 52,
+  position: "fixed"
 };
 var _default = (0, _styles.withStyles)(_styles2.default, {
   name: "HvVerticalNavigation"

package/dist/VerticalNavigation/VerticalNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"VerticalNavigation.js","names":["HvVerticalNavigation","id","onNavigationChange","data","selected","collapseLabel","topPosition","expandedPanelWidth","collapsedPanelWidth","classes","useStyles","useState","isExpanded","setIsExpanded","handleVerticalNavigationChange","event","item","handleExpandToggle","prevState","clsx","panel","panelExpanded","panelCollapsed","setId","collapseButton","expandButton","collapseTextContainer","propTypes","PropTypes","string","func","arrayOf","shape","isRequired","label","icon","node","array","href","target","number","defaultProps","withStyles","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  HvVerticalNavigationActions,\n  HvButton,\n  setId,\n} from \"@hitachivantara/uikit-react-core\";\nimport { Backwards, Forwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport useStyles from \"./styles\";\n\nconst HvVerticalNavigation = ({\n  id,\n  onNavigationChange,\n  data,\n  selected,\n  collapseLabel,\n\n  topPosition,\n  expandedPanelWidth,\n  collapsedPanelWidth,\n}) => {\n  const classes = useStyles({ topPosition, expandedPanelWidth, collapsedPanelWidth })();\n\n  const [isExpanded, setIsExpanded] = useState(true);\n\n  const handleVerticalNavigationChange = (event, item) => {\n    onNavigationChange?.(event, item);\n  };\n\n  const handleExpandToggle = () => {\n    setIsExpanded((prevState) => !prevState);\n  };\n\n  return (\n    <HvVerticalNavigationCore\n      className={clsx(classes.panel, {\n        [classes.panelExpanded]: isExpanded,\n        [classes.panelCollapsed]: !isExpanded,\n      })}\n    >\n      <HvVerticalNavigationTree\n        collapsible\n        data={data}\n        selected={selected}\n        onChange={handleVerticalNavigationChange}\n      />\n\n      <HvVerticalNavigationActions>\n        <HvButton\n          id={setId(id, \"button-toggle\")}\n          className={clsx({\n            [classes.collapseButton]: isExpanded,\n            [classes.expandButton]: !isExpanded,\n          })}\n          category=\"ghost\"\n          startIcon={isExpanded ? <Backwards iconSize=\"XS\" /> : <Forwards iconSize=\"XS\" />}\n          onClick={handleExpandToggle}\n        >\n          {isExpanded && <span className={classes.collapseTextContainer}>{collapseLabel}</span>}\n        </HvButton>\n      </HvVerticalNavigationActions>\n    </HvVerticalNavigationCore>\n  );\n};\n\nHvVerticalNavigation.propTypes = {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id: PropTypes.string,\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   * 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   * Text to be displayed in the collpase area when the panel is expanded.\n   */\n  collapseLabel: 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  expandedPanelWidth: PropTypes.number,\n  /**\n   * The width of the panel when collapsed. Default vlaue is 52.\n   */\n  collapsedPanelWidth: PropTypes.number,\n};\n\nHvVerticalNavigation.defaultProps = {\n  collapseLabel: \"Collapse\",\n  topPosition: 44,\n  expandedPanelWidth: 300,\n  collapsedPanelWidth: 52,\n};\n\nexport default withStyles(useStyles, { name: \"HvVerticalNavigation\" })(HvVerticalNavigation);\n"],"mappings":"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"}
+{"version":3,"file":"VerticalNavigation.js","names":["HvVerticalNavigation","onNavigationChange","onToggleExpanded","data","selected","expanded","topPosition","expandedPanelWidth","collapsedPanelWidth","position","others","classes","useStyles","noSubData","map","dataToRemove","rest","useState","getAllParents","item","id","expandedItems","setExpandedItems","selectedTopParent","findRootParentById","handleVerticalNavigationChange","event","fullItem","findItemById","length","prevState","handleVerticalNavigationToggle","currentExpandedItems","handleExpandToggle","clsx","panel","panelExpanded","panelCollapsed","toggleCollapsePanel","propTypes","PropTypes","func","arrayOf","shape","string","isRequired","label","icon","node","array","href","target","bool","number","oneOf","defaultProps","withStyles","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 { getAllParents, findRootParentById, findItemById } 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(getAllParents(data).map((item) => item.id));\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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"}

package/dist/VerticalNavigation/styles.js

@@ -1,26 +1,16 @@
 "use strict";
 
-require("core-js/modules/es.object.keys.js");
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.array.filter.js");
-require("core-js/modules/es.object.to-string.js");
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-require("core-js/modules/web.dom-collections.for-each.js");
-require("core-js/modules/es.object.get-own-property-descriptors.js");
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@mui/styles");
-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) { (0, _defineProperty2.default)(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; }
 var styles = function styles(props) {
   return (0, _styles.makeStyles)(function (theme) {
     return {
       panel: {
-        position: "fixed",
+        justifyContent: "flex-start",
+        position: props.position,
         top: props.topPosition,
         left: 0,
         zIndex: 1100
@@ -28,22 +18,20 @@ var styles = function styles(props) {
       panelExpanded: {
         width: props.expandedPanelWidth,
         height: "calc(100vh - ".concat(props.topPosition, "px)"),
-        // This is for the bottom actions
-        "& > :not(:first-child) > button > span": {
-          marginBottom: 0
+        // To remove the top border of the navigation section
+        "& > :not(:first-child)": {
+          borderTop: "none"
         }
       },
       panelCollapsed: {
         width: props.collapsedPanelWidth,
         height: "calc(100vh - ".concat(props.topPosition, "px)"),
-        // This is for the bottom actions
+        // Customize the navigation section
         "& > :not(:first-child)": {
-          padding: theme.hvSpacing("xs", "xs", "sm", "xs"),
-          "& > button > span": {
-            marginLeft: 0
-          }
+          borderTop: "none",
+          padding: theme.hvSpacing("xs", "xs", "sm", "xs")
         },
-        // This is for the top menu items
+        // Customize the collapse / expand
         "& > :first-child:not(:last-child)": {
           padding: theme.hvSpacing("sm", "xs", "xs", "xs")
         },
@@ -51,22 +39,9 @@ var styles = function styles(props) {
           marginLeft: "6px"
         }
       },
-      collapseButton: _objectSpread(_objectSpread({}, theme.hv.typography.normalText), {}, {
-        width: "100%",
-        "& > span": {
-          justifyContent: "flex-start"
-        }
-      }),
-      expandButton: {
-        width: "100%",
-        minWidth: "unset",
-        "& > span > span": {
-          marginLeft: "unset"
-        }
-      },
-      collapseTextContainer: {
-        width: "100%",
-        textAlign: "left"
+      toggleCollapsePanel: {
+        display: "flex",
+        justifyContent: "flex-end"
       }
     };
   });

package/dist/VerticalNavigation/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","names":["styles","props","makeStyles","theme","panel","position","top","topPosition","left","zIndex","panelExpanded","width","expandedPanelWidth","height","marginBottom","panelCollapsed","collapsedPanelWidth","padding","hvSpacing","marginLeft","collapseButton","hv","typography","normalText","justifyContent","expandButton","minWidth","collapseTextContainer","textAlign"],"sources":["../../src/VerticalNavigation/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\nconst styles = (props) =>\n  makeStyles((theme) => ({\n    panel: {\n      position: \"fixed\",\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      // This is for the bottom actions\n      \"& > :not(:first-child) > button > span\": {\n        marginBottom: 0,\n      },\n    },\n    panelCollapsed: {\n      width: props.collapsedPanelWidth,\n      height: `calc(100vh - ${props.topPosition}px)`,\n\n      // This is for the bottom actions\n      \"& > :not(:first-child)\": {\n        padding: theme.hvSpacing(\"xs\", \"xs\", \"sm\", \"xs\"),\n\n        \"& > button > span\": {\n          marginLeft: 0,\n        },\n      },\n      // This is for the top menu items\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    collapseButton: {\n      ...theme.hv.typography.normalText,\n      width: \"100%\",\n\n      \"& > span\": {\n        justifyContent: \"flex-start\",\n      },\n    },\n    expandButton: {\n      width: \"100%\",\n      minWidth: \"unset\",\n\n      \"& > span > span\": {\n        marginLeft: \"unset\",\n      },\n    },\n    collapseTextContainer: {\n      width: \"100%\",\n      textAlign: \"left\",\n    },\n  }));\n\nexport default styles;\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAyC;AAAA;AAEzC,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OACnB,IAAAC,kBAAU,EAAC,UAACC,KAAK;IAAA,OAAM;MACrBC,KAAK,EAAE;QACLC,QAAQ,EAAE,OAAO;QACjBC,GAAG,EAAEL,KAAK,CAACM,WAAW;QACtBC,IAAI,EAAE,CAAC;QACPC,MAAM,EAAE;MACV,CAAC;MACDC,aAAa,EAAE;QACbC,KAAK,EAAEV,KAAK,CAACW,kBAAkB;QAC/BC,MAAM,yBAAkBZ,KAAK,CAACM,WAAW,QAAK;QAE9C;QACA,wCAAwC,EAAE;UACxCO,YAAY,EAAE;QAChB;MACF,CAAC;MACDC,cAAc,EAAE;QACdJ,KAAK,EAAEV,KAAK,CAACe,mBAAmB;QAChCH,MAAM,yBAAkBZ,KAAK,CAACM,WAAW,QAAK;QAE9C;QACA,wBAAwB,EAAE;UACxBU,OAAO,EAAEd,KAAK,CAACe,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;UAEhD,mBAAmB,EAAE;YACnBC,UAAU,EAAE;UACd;QACF,CAAC;QACD;QACA,mCAAmC,EAAE;UACnCF,OAAO,EAAEd,KAAK,CAACe,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;QACjD,CAAC;QAED,+BAA+B,EAAE;UAC/BC,UAAU,EAAE;QACd;MACF,CAAC;MACDC,cAAc,kCACTjB,KAAK,CAACkB,EAAE,CAACC,UAAU,CAACC,UAAU;QACjCZ,KAAK,EAAE,MAAM;QAEb,UAAU,EAAE;UACVa,cAAc,EAAE;QAClB;MAAC,EACF;MACDC,YAAY,EAAE;QACZd,KAAK,EAAE,MAAM;QACbe,QAAQ,EAAE,OAAO;QAEjB,iBAAiB,EAAE;UACjBP,UAAU,EAAE;QACd;MACF,CAAC;MACDQ,qBAAqB,EAAE;QACrBhB,KAAK,EAAE,MAAM;QACbiB,SAAS,EAAE;MACb;IACF,CAAC;EAAA,CAAC,CAAC;AAAA;AAAC,eAES5B,MAAM;AAAA"}
+{"version":3,"file":"styles.js","names":["styles","props","makeStyles","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;AAEA,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OACnB,IAAAC,kBAAU,EAAC,UAACC,KAAK;IAAA,OAAM;MACrBC,KAAK,EAAE;QACLC,cAAc,EAAE,YAAY;QAC5BC,QAAQ,EAAEL,KAAK,CAACK,QAAQ;QACxBC,GAAG,EAAEN,KAAK,CAACO,WAAW;QACtBC,IAAI,EAAE,CAAC;QACPC,MAAM,EAAE;MACV,CAAC;MACDC,aAAa,EAAE;QACbC,KAAK,EAAEX,KAAK,CAACY,kBAAkB;QAC/BC,MAAM,yBAAkBb,KAAK,CAACO,WAAW,QAAK;QAE9C;QACA,wBAAwB,EAAE;UACxBO,SAAS,EAAE;QACb;MACF,CAAC;MACDC,cAAc,EAAE;QACdJ,KAAK,EAAEX,KAAK,CAACgB,mBAAmB;QAChCH,MAAM,yBAAkBb,KAAK,CAACO,WAAW,QAAK;QAE9C;QACA,wBAAwB,EAAE;UACxBO,SAAS,EAAE,MAAM;UACjBG,OAAO,EAAEf,KAAK,CAACgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;QACjD,CAAC;QAED;QACA,mCAAmC,EAAE;UACnCD,OAAO,EAAEf,KAAK,CAACgB,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;QACjD,CAAC;QAED,+BAA+B,EAAE;UAC/BC,UAAU,EAAE;QACd;MACF,CAAC;MAEDC,mBAAmB,EAAE;QACnBC,OAAO,EAAE,MAAM;QACfjB,cAAc,EAAE;MAClB;IACF,CAAC;EAAA,CAAC,CAAC;AAAA;AAAC,eAESL,MAAM;AAAA"}

package/dist/VerticalNavigation/utils.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAllParents = exports.findRootParentById = exports.findItemById = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.flat-map.js");
+require("core-js/modules/es.array.unscopables.flat-map.js");
+require("core-js/modules/es.array.concat.js");
+/**
+ * Receives the navigation data and the id of the item from which we want to get the root parent.
+ *
+ * @param {NavigationItem[]} data - The navigation data structure.
+ * @param {string} itemId - The item id.
+ * @returns The item that is the root parent of the received item.
+ */
+var findRootParentById = function findRootParentById(data, itemId) {
+  return data.reduce(function (parent, item) {
+    if (parent) {
+      return parent;
+    }
+    if (item.id === itemId) {
+      return item;
+    }
+    if (item.data) {
+      var found = findRootParentById(item.data, itemId);
+      if (found) {
+        return item;
+      }
+    }
+    return null;
+  }, null);
+};
+
+/**
+ * Returns the complete item object from the data structure using the item id.
+ *
+ * @param {NavigationItem[]} data - The navigation data structure.
+ * @param {string} itemId - The item id.
+ * @returns The complete item object matching the received id.
+ */
+exports.findRootParentById = findRootParentById;
+var findItemById = function findItemById(data, itemId) {
+  return data.find(function (item) {
+    if (item.id === itemId) {
+      return true;
+    }
+    if (item.data && item.data.length > 0) {
+      var foundItem = findItemById(item.data, itemId);
+      if (foundItem) {
+        return true;
+      }
+    }
+    return false;
+  });
+};
+
+/**
+ * Returns all the items that have chilren associated.
+ *
+ * @param {NavigationItem[]} data - The navigation data structure.
+ * @returns All the items that have chilren associated.
+ */
+exports.findItemById = findItemById;
+var getAllParents = function getAllParents(items) {
+  var parents = items.filter(function (item) {
+    return item.data != null && item.data.length > 0;
+  });
+  var childParents = parents.flatMap(function (item) {
+    return getAllParents(item.data);
+  });
+  return [].concat((0, _toConsumableArray2.default)(parents), (0, _toConsumableArray2.default)(childParents));
+};
+exports.getAllParents = getAllParents;
+//# sourceMappingURL=utils.js.map

package/dist/VerticalNavigation/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["findRootParentById","data","itemId","reduce","parent","item","id","found","findItemById","find","length","foundItem","getAllParents","items","parents","filter","childParents","flatMap"],"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 all the items that have chilren associated.\n *\n * @param {NavigationItem[]} data - The navigation data structure.\n * @returns All the items that have chilren associated.\n */\nconst getAllParents = (items) => {\n  const parents = items.filter((item) => item.data != null && item.data.length > 0);\n  const childParents = parents.flatMap((item) => getAllParents(item.data));\n\n  return [...parents, ...childParents];\n};\n\nexport { findRootParentById, findItemById, getAllParents };\n"],"mappings":";;;;;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,IAAI,EAAEC,MAAM,EAAK;EAC3C,OAAOD,IAAI,CAACE,MAAM,CAAC,UAACC,MAAM,EAAEC,IAAI,EAAK;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,IAAMM,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;AANA;AAOA,IAAMG,YAAY,GAAG,SAAfA,YAAY,CAAIP,IAAI,EAAEC,MAAM,EAAK;EACrC,OAAOD,IAAI,CAACQ,IAAI,CAAC,UAACJ,IAAI,EAAK;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,IAAMC,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;AALA;AAMA,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,KAAK,EAAK;EAC/B,IAAMC,OAAO,GAAGD,KAAK,CAACE,MAAM,CAAC,UAACV,IAAI;IAAA,OAAKA,IAAI,CAACJ,IAAI,IAAI,IAAI,IAAII,IAAI,CAACJ,IAAI,CAACS,MAAM,GAAG,CAAC;EAAA,EAAC;EACjF,IAAMM,YAAY,GAAGF,OAAO,CAACG,OAAO,CAAC,UAACZ,IAAI;IAAA,OAAKO,aAAa,CAACP,IAAI,CAACJ,IAAI,CAAC;EAAA,EAAC;EAExE,kDAAWa,OAAO,oCAAKE,YAAY;AACrC,CAAC;AAAC"}

package/dist/legacy/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;