@hitachivantara/uikit-react-lab 4.4.0 → 4.5.1

package/dist/NavigationSlider/utils.js

@@ -0,0 +1,87 @@
+"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.getParentItemById = exports.getNavigationItemById = exports.fillDataWithParentId = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.map.js");
+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; }
+/**
+ * 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
+ */
+var searchInCollection = function searchInCollection(collection, childrenPropName, propName, propValue) {
+  if (collection[propName] === propValue) {
+    return collection;
+  }
+  var items = collection[childrenPropName] || collection;
+  var foundItem = null;
+  for (var 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.
+ */
+var getNavigationItemById = function 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.
+ */
+exports.getNavigationItemById = getNavigationItemById;
+var getParentItemById = function getParentItemById(navigationItems, navigationItemId) {
+  var 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.
+ */
+exports.getParentItemById = getParentItemById;
+var fillDataWithParentId = function fillDataWithParentId(navigationItems, parentItemId) {
+  return navigationItems.map(function (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
+    });
+  });
+};
+exports.fillDataWithParentId = fillDataWithParentId;
+//# sourceMappingURL=utils.js.map

package/dist/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,IAAMA,kBAAkB,GAAG,SAArBA,kBAAkB,CAAIC,UAAU,EAAEC,gBAAgB,EAAEC,QAAQ,EAAEC,SAAS,EAAK;EAChF,IAAIH,UAAU,CAACE,QAAQ,CAAC,KAAKC,SAAS,EAAE;IACtC,OAAOH,UAAU;EACnB;EAEA,IAAMI,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,IAAMG,qBAAqB,GAAG,SAAxBA,qBAAqB,CAAIC,eAAe,EAAEC,gBAAgB,EAAK;EACnE,OAAOX,kBAAkB,CAACU,eAAe,EAAE,MAAM,EAAE,IAAI,EAAEC,gBAAgB,CAAC;AAC5E,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AANA;AAOA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiB,CAAIF,eAAe,EAAEC,gBAAgB,EAAK;EAC/D,IAAME,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;AANA;AAOA,IAAME,oBAAoB,GAAG,SAAvBA,oBAAoB,CAAIL,eAAe,EAAEM,YAAY,EAAK;EAC9D,OAAON,eAAe,CAACO,GAAG,CAAC,UAACC,IAAI,EAAK;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;AAAC"}

package/dist/VerticalNavigation/VerticalNavigation.js

@@ -62,9 +62,7 @@ var HvVerticalNavigation = function HvVerticalNavigation(_ref) {
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
     return rest;
   });
-  var _useState = (0, _react.useState)((0, _utils.getAllParents)(data).map(function (item) {
-      return item.id;
-    })),
+  var _useState = (0, _react.useState)((0, _utils.pathToItem)(data, selected)),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     expandedItems = _useState2[0],
     setExpandedItems = _useState2[1];

package/dist/VerticalNavigation/VerticalNavigation.js.map

@@ -1 +1 @@
-{"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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"}
+{"version":3,"file":"VerticalNavigation.js","names":["HvVerticalNavigation","onNavigationChange","onToggleExpanded","data","selected","expanded","topPosition","expandedPanelWidth","collapsedPanelWidth","position","others","classes","useStyles","noSubData","map","dataToRemove","rest","useState","pathToItem","expandedItems","setExpandedItems","selectedTopParent","findRootParentById","id","handleVerticalNavigationChange","event","item","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 { 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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"}

package/dist/VerticalNavigation/utils.js

@@ -4,14 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAllParents = exports.findRootParentById = exports.findItemById = void 0;
+exports.pathToItem = 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.
  *
@@ -61,20 +57,32 @@ var findItemById = function findItemById(data, itemId) {
 };
 
 /**
- * Returns all the items that have chilren associated.
+ * Returns an array with all the parent item ids up until the target item is reached.
  *
  * @param {NavigationItem[]} data - The navigation data structure.
- * @returns All the items that have chilren associated.
+ * @param {string} itemId - The item id.
+ * @returns An array with all the parent item ids
  */
 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));
+var pathToItem = function pathToItem(data, itemId) {
+  var path = [];
+  if (data != null && data.length > 0) {
+    // eslint-disable-next-line no-plusplus
+    for (var i = 0; i < data.length; ++i) {
+      var item = data[i];
+      if (item.id === itemId) {
+        path.push(item.id);
+        break;
+      }
+      var subPaths = pathToItem(item.data, itemId);
+      if (subPaths.length > 0) {
+        path.push(item.id);
+        path.push.apply(path, (0, _toConsumableArray2.default)(subPaths));
+        break;
+      }
+    }
+  }
+  return path;
 };
-exports.getAllParents = getAllParents;
+exports.pathToItem = pathToItem;
 //# sourceMappingURL=utils.js.map

package/dist/VerticalNavigation/utils.js.map

@@ -1 +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"}
+{"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,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;AACA;AANA;AAOA,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIX,IAAI,EAAEC,MAAM,EAAK;EACnC,IAAMW,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,IAAMT,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,IAAMU,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,OAATF,IAAI,mCAASG,QAAQ,EAAC;QACtB;MACF;IACF;EACF;EAEA,OAAOH,IAAI;AACb,CAAC;AAAC"}

package/dist/index.d.ts

@@ -27,3 +27,6 @@ export * from "./Wizard";
 
 export { default as HvVerticalNavigation } from "./VerticalNavigation";
 export * from "./VerticalNavigation";
+
+export { default as HvNavigationSlider } from "./NavigationSlider";
+export * from "./NavigationSlider";

package/dist/index.js

@@ -23,7 +23,8 @@ var _exportNames = {
   HvStepNavigation: true,
   HvTimeAgo: true,
   HvWizard: true,
-  HvVerticalNavigation: true
+  HvVerticalNavigation: true,
+  HvNavigationSlider: true
 };
 Object.defineProperty(exports, "HvColorPicker", {
   enumerable: true,
@@ -55,6 +56,12 @@ Object.defineProperty(exports, "HvNavigationAnchors", {
     return _NavigationAnchors.default;
   }
 });
+Object.defineProperty(exports, "HvNavigationSlider", {
+  enumerable: true,
+  get: function get() {
+    return _NavigationSlider.default;
+  }
+});
 Object.defineProperty(exports, "HvNotificationPanel", {
   enumerable: true,
   get: function get() {
@@ -117,6 +124,7 @@ Object.keys(_Wizard).forEach(function (key) {
   });
 });
 var _VerticalNavigation = _interopRequireDefault(require("./VerticalNavigation"));
+var _NavigationSlider = _interopRequireDefault(require("./NavigationSlider"));
 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; }
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AAAuE;AAAA"}
+{"version":3,"file":"index.js","names":[],"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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AACA;AACA;AAAmE;AAAA"}

package/dist/legacy/NavigationSlider/Header/Header.js

@@ -0,0 +1,72 @@
+var _Backwards;
+import "core-js/modules/es.array.concat.js";
+import React from "react";
+import { withStyles } from "@mui/styles";
+import PropTypes from "prop-types";
+import { HvButton, HvTypography } from "@hitachivantara/uikit-react-core";
+import { Backwards } from "@hitachivantara/uikit-react-icons";
+import useStyles from "./styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var Header = function Header(_ref) {
+  var id = _ref.id,
+    title = _ref.title,
+    showBackButton = _ref.showBackButton,
+    headerHeight = _ref.headerHeight,
+    onBackButtonClick = _ref.onBackButtonClick;
+  var classes = useStyles({
+    headerHeight: headerHeight
+  })();
+  var backButtonClickHandler = function backButtonClickHandler() {
+    onBackButtonClick();
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    id: id,
+    className: classes.menuContainer,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: classes.button,
+      children: showBackButton && /*#__PURE__*/_jsx(HvButton, {
+        icon: true,
+        onClick: backButtonClickHandler,
+        children: _Backwards || (_Backwards = /*#__PURE__*/_jsx(Backwards, {
+          iconSize: "XS"
+        }))
+      })
+    }), /*#__PURE__*/_jsx("div", {
+      className: "".concat(classes.title, " ").concat(classes.justifyContentCenter),
+      children: title && /*#__PURE__*/_jsx(HvTypography, {
+        variant: "highlightText",
+        children: title
+      })
+    })]
+  });
+};
+process.env.NODE_ENV !== "production" ? Header.propTypes = {
+  /**
+   * Id to be applied to the root node of the panel.
+   */
+  id: PropTypes.string,
+  /**
+   * The text to be displayed on the header.
+   */
+  title: PropTypes.string,
+  /**
+   * Flag to show / hide the back button.
+   */
+  showBackButton: PropTypes.bool,
+  /**
+   * The header height.
+   */
+  headerHeight: PropTypes.number,
+  /**
+   * Callback function triggered when the back button is clicked.
+   */
+  onBackButtonClick: PropTypes.func
+} : void 0;
+Header.defaultProps = {
+  headerHeight: 80
+};
+export default withStyles(useStyles, {
+  name: "Header"
+})(Header);
+//# sourceMappingURL=Header.js.map

package/dist/legacy/NavigationSlider/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","names":["React","withStyles","PropTypes","HvButton","HvTypography","Backwards","useStyles","Header","id","title","showBackButton","headerHeight","onBackButtonClick","classes","backButtonClickHandler","menuContainer","button","justifyContentCenter","propTypes","string","bool","number","func","defaultProps","name"],"sources":["../../../../src/NavigationSlider/Header/Header.js"],"sourcesContent":["import React from \"react\";\nimport { withStyles } from \"@mui/styles\";\nimport PropTypes from \"prop-types\";\n\nimport { HvButton, HvTypography } from \"@hitachivantara/uikit-react-core\";\nimport { Backwards } from \"@hitachivantara/uikit-react-icons\";\n\nimport useStyles from \"./styles\";\n\nconst Header = ({ id, title, showBackButton, headerHeight, onBackButtonClick }) => {\n  const classes = useStyles({ headerHeight })();\n\n  const backButtonClickHandler = () => {\n    onBackButtonClick();\n  };\n\n  return (\n    <div id={id} className={classes.menuContainer}>\n      <div className={classes.button}>\n        {showBackButton && (\n          <HvButton icon onClick={backButtonClickHandler}>\n            <Backwards iconSize=\"XS\" />\n          </HvButton>\n        )}\n      </div>\n\n      <div className={`${classes.title} ${classes.justifyContentCenter}`}>\n        {title && <HvTypography variant=\"highlightText\">{title}</HvTypography>}\n      </div>\n    </div>\n  );\n};\n\nHeader.propTypes = {\n  /**\n   * Id to be applied to the root node of the panel.\n   */\n  id: PropTypes.string,\n  /**\n   * The text to be displayed on the header.\n   */\n  title: PropTypes.string,\n  /**\n   * Flag to show / hide the back button.\n   */\n  showBackButton: PropTypes.bool,\n  /**\n   * The header height.\n   */\n  headerHeight: PropTypes.number,\n  /**\n   * Callback function triggered when the back button is clicked.\n   */\n  onBackButtonClick: PropTypes.func,\n};\n\nHeader.defaultProps = {\n  headerHeight: 80,\n};\n\nexport default withStyles(useStyles, { name: \"Header\" })(Header);\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,aAAa;AACxC,OAAOC,SAAS,MAAM,YAAY;AAElC,SAASC,QAAQ,EAAEC,YAAY,QAAQ,kCAAkC;AACzE,SAASC,SAAS,QAAQ,mCAAmC;AAE7D,OAAOC,SAAS,MAAM,UAAU;AAAC;AAAA;AAEjC,IAAMC,MAAM,GAAG,SAATA,MAAM,OAAuE;EAAA,IAAjEC,EAAE,QAAFA,EAAE;IAAEC,KAAK,QAALA,KAAK;IAAEC,cAAc,QAAdA,cAAc;IAAEC,YAAY,QAAZA,YAAY;IAAEC,iBAAiB,QAAjBA,iBAAiB;EAC1E,IAAMC,OAAO,GAAGP,SAAS,CAAC;IAAEK,YAAY,EAAZA;EAAa,CAAC,CAAC,EAAE;EAE7C,IAAMG,sBAAsB,GAAG,SAAzBA,sBAAsB,GAAS;IACnCF,iBAAiB,EAAE;EACrB,CAAC;EAED,oBACE;IAAK,EAAE,EAAEJ,EAAG;IAAC,SAAS,EAAEK,OAAO,CAACE,aAAc;IAAA,wBAC5C;MAAK,SAAS,EAAEF,OAAO,CAACG,MAAO;MAAA,UAC5BN,cAAc,iBACb,KAAC,QAAQ;QAAC,IAAI;QAAC,OAAO,EAAEI,sBAAuB;QAAA,mDAC7C,KAAC,SAAS;UAAC,QAAQ,EAAC;QAAI,EAAG;MAAA;IAE9B,EACG,eAEN;MAAK,SAAS,YAAKD,OAAO,CAACJ,KAAK,cAAII,OAAO,CAACI,oBAAoB,CAAG;MAAA,UAChER,KAAK,iBAAI,KAAC,YAAY;QAAC,OAAO,EAAC,eAAe;QAAA,UAAEA;MAAK;IAAgB,EAClE;EAAA,EACF;AAEV,CAAC;AAED,wCAAAF,MAAM,CAACW,SAAS,GAAG;EACjB;AACF;AACA;EACEV,EAAE,EAAEN,SAAS,CAACiB,MAAM;EACpB;AACF;AACA;EACEV,KAAK,EAAEP,SAAS,CAACiB,MAAM;EACvB;AACF;AACA;EACET,cAAc,EAAER,SAAS,CAACkB,IAAI;EAC9B;AACF;AACA;EACET,YAAY,EAAET,SAAS,CAACmB,MAAM;EAC9B;AACF;AACA;EACET,iBAAiB,EAAEV,SAAS,CAACoB;AAC/B,CAAC;AAEDf,MAAM,CAACgB,YAAY,GAAG;EACpBZ,YAAY,EAAE;AAChB,CAAC;AAED,eAAeV,UAAU,CAACK,SAAS,EAAE;EAAEkB,IAAI,EAAE;AAAS,CAAC,CAAC,CAACjB,MAAM,CAAC"}

package/dist/legacy/NavigationSlider/Header/index.js

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

package/dist/legacy/NavigationSlider/Header/index.js.map

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

package/dist/legacy/NavigationSlider/Header/styles.js

@@ -0,0 +1,29 @@
+import { makeStyles } from "@mui/styles";
+var styles = function styles(props) {
+  return makeStyles(function (theme) {
+    return {
+      menuContainer: {
+        display: "grid",
+        gridTemplateColumns: "min-content auto",
+        minHeight: props.headerHeight,
+        boxShadow: "inset 0 5px 5px -3px rgb(65 65 65 / 12%)"
+      },
+      button: {
+        display: "flex",
+        alignItems: "center"
+      },
+      title: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: theme.hv.spacing.sm,
+        padding: theme.hvSpacing(0, "xs")
+      },
+      justifyContentCenter: {
+        justifyContent: "center"
+      }
+    };
+  });
+};
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/NavigationSlider/Header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["makeStyles","styles","props","theme","menuContainer","display","gridTemplateColumns","minHeight","headerHeight","boxShadow","button","alignItems","title","justifyContent","hv","spacing","sm","padding","hvSpacing","justifyContentCenter"],"sources":["../../../../src/NavigationSlider/Header/styles.js"],"sourcesContent":["import { makeStyles } from \"@mui/styles\";\n\nconst styles = (props) =>\n  makeStyles((theme) => ({\n    menuContainer: {\n      display: \"grid\",\n      gridTemplateColumns: \"min-content auto\",\n      minHeight: props.headerHeight,\n      boxShadow: \"inset 0 5px 5px -3px rgb(65 65 65 / 12%)\",\n    },\n    button: {\n      display: \"flex\",\n      alignItems: \"center\",\n    },\n    title: {\n      display: \"flex\",\n      alignItems: \"center\",\n      justifyContent: \"center\",\n      minHeight: theme.hv.spacing.sm,\n      padding: theme.hvSpacing(0, \"xs\"),\n    },\n    justifyContentCenter: { justifyContent: \"center\" },\n  }));\n\nexport default styles;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,aAAa;AAExC,IAAMC,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OACnBF,UAAU,CAAC,UAACG,KAAK;IAAA,OAAM;MACrBC,aAAa,EAAE;QACbC,OAAO,EAAE,MAAM;QACfC,mBAAmB,EAAE,kBAAkB;QACvCC,SAAS,EAAEL,KAAK,CAACM,YAAY;QAC7BC,SAAS,EAAE;MACb,CAAC;MACDC,MAAM,EAAE;QACNL,OAAO,EAAE,MAAM;QACfM,UAAU,EAAE;MACd,CAAC;MACDC,KAAK,EAAE;QACLP,OAAO,EAAE,MAAM;QACfM,UAAU,EAAE,QAAQ;QACpBE,cAAc,EAAE,QAAQ;QACxBN,SAAS,EAAEJ,KAAK,CAACW,EAAE,CAACC,OAAO,CAACC,EAAE;QAC9BC,OAAO,EAAEd,KAAK,CAACe,SAAS,CAAC,CAAC,EAAE,IAAI;MAClC,CAAC;MACDC,oBAAoB,EAAE;QAAEN,cAAc,EAAE;MAAS;IACnD,CAAC;EAAA,CAAC,CAAC;AAAA;AAEL,eAAeZ,MAAM"}

package/dist/legacy/NavigationSlider/Navigation/Navigation.js

@@ -0,0 +1,94 @@
+var _DropRightXS, _div;
+import "core-js/modules/es.array.map.js";
+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";
+var Navigation = function Navigation(_ref) {
+  var id = _ref.id,
+    classes = _ref.classes,
+    data = _ref.data,
+    selected = _ref.selected,
+    onNavigateToTarget = _ref.onNavigateToTarget,
+    onNavigateToChild = _ref.onNavigateToChild;
+  return /*#__PURE__*/_jsx(HvListContainer, {
+    interactive: true,
+    id: id,
+    children: data.map(function (item) {
+      return /*#__PURE__*/_jsx(HvListItem, {
+        classes: {
+          root: classes.listItemRoot,
+          selected: classes.listItemSelected
+        },
+        onClick: function onClick(event) {
+          return onNavigateToTarget(event, item);
+        },
+        selected: selected === item.id,
+        startAdornment: item.icon,
+        endAdornment: item.data && item.data.length > 0 ? /*#__PURE__*/_jsx(HvButton, {
+          icon: true,
+          onClick: function onClick(event) {
+            return 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/legacy/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,IAAMC,UAAU,GAAG,SAAbA,UAAU,OAA+E;EAAA,IAAzEC,EAAE,QAAFA,EAAE;IAAEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,kBAAkB,QAAlBA,kBAAkB;IAAEC,iBAAiB,QAAjBA,iBAAiB;EACtF,oBACE,KAAC,eAAe;IAAC,WAAW;IAAC,EAAE,EAAEL,EAAG;IAAA,UACjCE,IAAI,CAACI,GAAG,CAAC,UAACC,IAAI;MAAA,oBACb,KAAC,UAAU;QAET,OAAO,EAAE;UACPC,IAAI,EAAEP,OAAO,CAACQ,YAAY;UAC1BN,QAAQ,EAAEF,OAAO,CAACS;QACpB,CAAE;QACF,OAAO,EAAE,iBAACC,KAAK;UAAA,OAAKP,kBAAkB,CAACO,KAAK,EAAEJ,IAAI,CAAC;QAAA,CAAC;QACpD,QAAQ,EAAEJ,QAAQ,KAAKI,IAAI,CAACP,EAAG;QAC/B,cAAc,EAAEO,IAAI,CAACK,IAAK;QAC1B,YAAY,EACVL,IAAI,CAACL,IAAI,IAAIK,IAAI,CAACL,IAAI,CAACW,MAAM,GAAG,CAAC,gBAC/B,KAAC,QAAQ;UAAC,IAAI;UAAC,OAAO,EAAE,iBAACF,KAAK;YAAA,OAAKN,iBAAiB,CAACM,KAAK,EAAEJ,IAAI,CAAC;UAAA,CAAC;UAAA,uDAChE,KAAC,WAAW,KAAG;QAAA,EACN,gCAEX,eAAO,CAEV;QAAA,uBAED;UAAA,UAAOA,IAAI,CAACO;QAAK;MAAQ,GAlBpBP,IAAI,CAACP,EAAE,CAmBD;IAAA,CACd;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/legacy/NavigationSlider/Navigation/index.js

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

package/dist/legacy/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/legacy/NavigationSlider/Navigation/styles.js

@@ -0,0 +1,23 @@
+var styles = function styles(theme) {
+  return {
+    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 ".concat(theme.hv.palette.accent.acce3),
+      "& *": {
+        background: theme.hv.palette.atmosphere.atmo3
+      }
+    }
+  };
+};
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/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,IAAMA,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OAAM;IACzBC,YAAY,EAAE;MACZC,OAAO,EAAE,MAAM;MACfC,UAAU,EAAE,QAAQ;MACpBC,UAAU,yBAAyB;MACnCC,SAAS,EAAE,MAAM;MACjBC,YAAY,EAAE,KAAK;MACnB,YAAY,EAAE;QACZC,UAAU,EAAE;MACd;IACF,CAAC;IACDC,gBAAgB,EAAE;MAChBC,UAAU,EAAET,KAAK,CAACU,EAAE,CAACC,OAAO,CAACC,UAAU,CAACC,KAAK;MAC7CT,UAAU,sBAAeJ,KAAK,CAACU,EAAE,CAACC,OAAO,CAACG,MAAM,CAACC,KAAK,CAAE;MACxD,KAAK,EAAE;QACLN,UAAU,EAAET,KAAK,CAACU,EAAE,CAACC,OAAO,CAACC,UAAU,CAACC;MAC1C;IACF;EACF,CAAC;AAAA,CAAC;AAEF,eAAed,MAAM"}

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