@hitachivantara/uikit-react-lab 4.2.3 → 4.3.0

package/dist/VerticalNavigation/VerticalNavigation.d.ts

@@ -0,0 +1,38 @@
+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[];
+  /**
+   * Text to be displayed in the collpase area when the panel is expanded.
+   */
+  collapseLabel?: string;
+  /**
+   * 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 when expanded. Default value is 300.
+   */
+  expandedPanelWidth?: number;
+  /**
+   * The width of the panel when collapsed. Default vlaue is 52.
+   */
+  collapsedPanelWidth?: number;
+}
+
+export default function HvVerticalNavigation(props: HvVerticalNavigationProps): JSX.Element | null;

package/dist/VerticalNavigation/VerticalNavigation.js

@@ -0,0 +1,137 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.to-string.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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/styles");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 _jsxRuntime = require("react/jsx-runtime");
+var _Backwards, _Forwards;
+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; }
+var HvVerticalNavigation = function HvVerticalNavigation(_ref) {
+  var id = _ref.id,
+    onNavigationChange = _ref.onNavigationChange,
+    data = _ref.data,
+    selected = _ref.selected,
+    collapseLabel = _ref.collapseLabel,
+    topPosition = _ref.topPosition,
+    expandedPanelWidth = _ref.expandedPanelWidth,
+    collapsedPanelWidth = _ref.collapsedPanelWidth;
+  var classes = (0, _styles2.default)({
+    topPosition: topPosition,
+    expandedPanelWidth: expandedPanelWidth,
+    collapsedPanelWidth: collapsedPanelWidth
+  })();
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var handleVerticalNavigationChange = function handleVerticalNavigationChange(event, item) {
+    onNavigationChange === null || onNavigationChange === void 0 ? void 0 : onNavigationChange(event, item);
+  };
+  var handleExpandToggle = function handleExpandToggle() {
+    setIsExpanded(function (prevState) {
+      return !prevState;
+    });
+  };
+  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, {
+      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, {
+          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
+        })
+      })
+    })]
+  });
+};
+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,
+  /**
+   * 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 component.
+   * data - sub-menu items
+   * href - the url used for navigation.
+   * target - the behavior when opening an url.
+   */
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired,
+    icon: _propTypes.default.node,
+    data: _propTypes.default.array,
+    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,
+  /**
+   * The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
+   */
+  topPosition: _propTypes.default.number,
+  /**
+   * The width of the panel when expanded. Default value is 300.
+   */
+  expandedPanelWidth: _propTypes.default.number,
+  /**
+   * The width of the panel when collapsed. Default vlaue is 52.
+   */
+  collapsedPanelWidth: _propTypes.default.number
+} : void 0;
+HvVerticalNavigation.defaultProps = {
+  collapseLabel: "Collapse",
+  topPosition: 44,
+  expandedPanelWidth: 300,
+  collapsedPanelWidth: 52
+};
+var _default = (0, _styles.withStyles)(_styles2.default, {
+  name: "HvVerticalNavigation"
+})(HvVerticalNavigation);
+exports.default = _default;
+//# sourceMappingURL=VerticalNavigation.js.map

package/dist/VerticalNavigation/VerticalNavigation.js.map

@@ -0,0 +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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"}

package/dist/VerticalNavigation/index.d.ts

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

package/dist/VerticalNavigation/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _VerticalNavigation.default;
+  }
+});
+var _VerticalNavigation = _interopRequireDefault(require("./VerticalNavigation"));
+//# sourceMappingURL=index.js.map

package/dist/VerticalNavigation/index.js.map

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

package/dist/VerticalNavigation/styles.js

@@ -0,0 +1,76 @@
+"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",
+        top: props.topPosition,
+        left: 0,
+        zIndex: 1100
+      },
+      panelExpanded: {
+        width: props.expandedPanelWidth,
+        height: "calc(100vh - ".concat(props.topPosition, "px)"),
+        // This is for the bottom actions
+        "& > :not(:first-child) > button > span": {
+          marginBottom: 0
+        }
+      },
+      panelCollapsed: {
+        width: props.collapsedPanelWidth,
+        height: "calc(100vh - ".concat(props.topPosition, "px)"),
+        // This is for the bottom actions
+        "& > :not(:first-child)": {
+          padding: theme.hvSpacing("xs", "xs", "sm", "xs"),
+          "& > button > span": {
+            marginLeft: 0
+          }
+        },
+        // This is for the top menu items
+        "& > :first-child:not(:last-child)": {
+          padding: theme.hvSpacing("sm", "xs", "xs", "xs")
+        },
+        "& > nav > ul > li > div > div": {
+          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"
+      }
+    };
+  });
+};
+var _default = styles;
+exports.default = _default;
+//# sourceMappingURL=styles.js.map

package/dist/VerticalNavigation/styles.js.map

@@ -0,0 +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"}

package/dist/index.d.ts

@@ -24,3 +24,6 @@ export * from "./TimeAgo";
 
 export { default as HvWizard } from "./Wizard";
 export * from "./Wizard";
+
+export { default as HvVerticalNavigation } from "./VerticalNavigation";
+export * from "./VerticalNavigation";

package/dist/index.js

@@ -22,7 +22,8 @@ var _exportNames = {
   HvNotificationPanel: true,
   HvStepNavigation: true,
   HvTimeAgo: true,
-  HvWizard: true
+  HvWizard: true,
+  HvVerticalNavigation: true
 };
 Object.defineProperty(exports, "HvColorPicker", {
   enumerable: true,
@@ -72,6 +73,12 @@ Object.defineProperty(exports, "HvTimeAgo", {
     return _TimeAgo.default;
   }
 });
+Object.defineProperty(exports, "HvVerticalNavigation", {
+  enumerable: true,
+  get: function get() {
+    return _VerticalNavigation.default;
+  }
+});
 Object.defineProperty(exports, "HvWizard", {
   enumerable: true,
   get: function get() {
@@ -109,6 +116,7 @@ Object.keys(_Wizard).forEach(function (key) {
     }
   });
 });
+var _VerticalNavigation = _interopRequireDefault(require("./VerticalNavigation"));
 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\";\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;AAAyB;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\";\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"}

package/dist/legacy/VerticalNavigation/VerticalNavigation.d.ts

@@ -0,0 +1,38 @@
+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[];
+  /**
+   * Text to be displayed in the collpase area when the panel is expanded.
+   */
+  collapseLabel?: string;
+  /**
+   * 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 when expanded. Default value is 300.
+   */
+  expandedPanelWidth?: number;
+  /**
+   * The width of the panel when collapsed. Default vlaue is 52.
+   */
+  collapsedPanelWidth?: number;
+}
+
+export default function HvVerticalNavigation(props: HvVerticalNavigationProps): JSX.Element | null;

package/dist/legacy/VerticalNavigation/VerticalNavigation.js

@@ -0,0 +1,121 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+var _Backwards, _Forwards;
+import React, { useState } from "react";
+import { withStyles } from "@mui/styles";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { HvVerticalNavigation as HvVerticalNavigationCore, HvVerticalNavigationTree, HvVerticalNavigationActions, HvButton, setId } from "@hitachivantara/uikit-react-core";
+import { Backwards, Forwards } 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 HvVerticalNavigation = function HvVerticalNavigation(_ref) {
+  var id = _ref.id,
+    onNavigationChange = _ref.onNavigationChange,
+    data = _ref.data,
+    selected = _ref.selected,
+    collapseLabel = _ref.collapseLabel,
+    topPosition = _ref.topPosition,
+    expandedPanelWidth = _ref.expandedPanelWidth,
+    collapsedPanelWidth = _ref.collapsedPanelWidth;
+  var classes = useStyles({
+    topPosition: topPosition,
+    expandedPanelWidth: expandedPanelWidth,
+    collapsedPanelWidth: collapsedPanelWidth
+  })();
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var handleVerticalNavigationChange = function handleVerticalNavigationChange(event, item) {
+    onNavigationChange === null || onNavigationChange === void 0 ? void 0 : onNavigationChange(event, item);
+  };
+  var handleExpandToggle = function handleExpandToggle() {
+    setIsExpanded(function (prevState) {
+      return !prevState;
+    });
+  };
+  return /*#__PURE__*/_jsxs(HvVerticalNavigationCore, {
+    className: clsx(classes.panel, isExpanded ? classes.panelExpanded : classes.panelCollapsed),
+    children: [/*#__PURE__*/_jsx(HvVerticalNavigationTree, {
+      collapsible: true,
+      data: data,
+      selected: selected,
+      onChange: handleVerticalNavigationChange
+    }), /*#__PURE__*/_jsx(HvVerticalNavigationActions, {
+      children: /*#__PURE__*/_jsx(HvButton, {
+        id: setId(id, "button-toggle"),
+        className: clsx(isExpanded ? classes.collapseButton : classes.expandButton),
+        category: "ghost",
+        startIcon: isExpanded ? _Backwards || (_Backwards = /*#__PURE__*/_jsx(Backwards, {
+          iconSize: "XS"
+        })) : _Forwards || (_Forwards = /*#__PURE__*/_jsx(Forwards, {
+          iconSize: "XS"
+        })),
+        onClick: handleExpandToggle,
+        children: isExpanded && /*#__PURE__*/_jsx("span", {
+          className: classes.collapseTextContainer,
+          children: collapseLabel
+        })
+      })
+    })]
+  });
+};
+process.env.NODE_ENV !== "production" ? HvVerticalNavigation.propTypes = {
+  /**
+   * Id to be applied to the root node of the panel.
+   */
+  id: PropTypes.string,
+  /**
+   * Called when a menu item is clicked.
+   */
+  onNavigationChange: PropTypes.func,
+  /**
+   * 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 component.
+   * 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,
+  /**
+   * Text to be displayed in the collpase area when the panel is expanded.
+   */
+  collapseLabel: PropTypes.string,
+  /**
+   * The ID of the selected page.
+   */
+  selected: PropTypes.string,
+  /**
+   * The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
+   */
+  topPosition: PropTypes.number,
+  /**
+   * The width of the panel when expanded. Default value is 300.
+   */
+  expandedPanelWidth: PropTypes.number,
+  /**
+   * The width of the panel when collapsed. Default vlaue is 52.
+   */
+  collapsedPanelWidth: PropTypes.number
+} : void 0;
+HvVerticalNavigation.defaultProps = {
+  collapseLabel: "Collapse",
+  topPosition: 44,
+  expandedPanelWidth: 300,
+  collapsedPanelWidth: 52
+};
+export default withStyles(useStyles, {
+  name: "HvVerticalNavigation"
+})(HvVerticalNavigation);
+//# sourceMappingURL=VerticalNavigation.js.map

package/dist/legacy/VerticalNavigation/VerticalNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigation.js","names":["React","useState","withStyles","PropTypes","clsx","HvVerticalNavigation","HvVerticalNavigationCore","HvVerticalNavigationTree","HvVerticalNavigationActions","HvButton","setId","Backwards","Forwards","useStyles","id","onNavigationChange","data","selected","collapseLabel","topPosition","expandedPanelWidth","collapsedPanelWidth","classes","isExpanded","setIsExpanded","handleVerticalNavigationChange","event","item","handleExpandToggle","prevState","panel","panelExpanded","panelCollapsed","collapseButton","expandButton","collapseTextContainer","propTypes","string","func","arrayOf","shape","isRequired","label","icon","node","array","href","target","number","defaultProps","name"],"sources":["../../../src/VerticalNavigation/VerticalNavigation.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport { withStyles } from \"@mui/styles\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport {\n  HvVerticalNavigation as HvVerticalNavigationCore,\n  HvVerticalNavigationTree,\n  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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"}

package/dist/legacy/VerticalNavigation/index.d.ts

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

package/dist/legacy/VerticalNavigation/index.js

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

package/dist/legacy/VerticalNavigation/index.js.map

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

package/dist/legacy/VerticalNavigation/styles.js

@@ -0,0 +1,68 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { makeStyles } from "@mui/styles";
+var styles = function styles(props) {
+  return makeStyles(function (theme) {
+    return {
+      panel: {
+        position: "fixed",
+        top: props.topPosition,
+        left: 0,
+        zIndex: 1100
+      },
+      panelExpanded: {
+        width: props.expandedPanelWidth,
+        height: "calc(100vh - ".concat(props.topPosition, "px)"),
+        // This is for the bottom actions
+        "& > :not(:first-child) > button > span": {
+          marginBottom: 0
+        }
+      },
+      panelCollapsed: {
+        width: props.collapsedPanelWidth,
+        height: "calc(100vh - ".concat(props.topPosition, "px)"),
+        // This is for the bottom actions
+        "& > :not(:first-child)": {
+          padding: theme.hvSpacing("xs", "xs", "sm", "xs"),
+          "& > button > span": {
+            marginLeft: 0
+          }
+        },
+        // This is for the top menu items
+        "& > :first-child:not(:last-child)": {
+          padding: theme.hvSpacing("sm", "xs", "xs", "xs")
+        },
+        "& > nav > ul > li > div > div": {
+          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"
+      }
+    };
+  });
+};
+export default styles;
+//# sourceMappingURL=styles.js.map

package/dist/legacy/VerticalNavigation/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["makeStyles","styles","props","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,SAASA,UAAU,QAAQ,aAAa;AAExC,IAAMC,MAAM,GAAG,SAATA,MAAM,CAAIC,KAAK;EAAA,OACnBF,UAAU,CAAC,UAACG,KAAK;IAAA,OAAM;MACrBC,KAAK,EAAE;QACLC,QAAQ,EAAE,OAAO;QACjBC,GAAG,EAAEJ,KAAK,CAACK,WAAW;QACtBC,IAAI,EAAE,CAAC;QACPC,MAAM,EAAE;MACV,CAAC;MACDC,aAAa,EAAE;QACbC,KAAK,EAAET,KAAK,CAACU,kBAAkB;QAC/BC,MAAM,yBAAkBX,KAAK,CAACK,WAAW,QAAK;QAE9C;QACA,wCAAwC,EAAE;UACxCO,YAAY,EAAE;QAChB;MACF,CAAC;MACDC,cAAc,EAAE;QACdJ,KAAK,EAAET,KAAK,CAACc,mBAAmB;QAChCH,MAAM,yBAAkBX,KAAK,CAACK,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;AAEL,eAAe3B,MAAM"}

package/dist/legacy/index.d.ts

@@ -24,3 +24,6 @@ export * from "./TimeAgo";
 
 export { default as HvWizard } from "./Wizard";
 export * from "./Wizard";
+
+export { default as HvVerticalNavigation } from "./VerticalNavigation";
+export * from "./VerticalNavigation";

package/dist/legacy/index.js

@@ -9,4 +9,5 @@ export { default as HvTimeAgo } from "./TimeAgo";
 export * from "./TimeAgo";
 export { default as HvWizard } from "./Wizard";
 export * from "./Wizard";
+export { default as HvVerticalNavigation } from "./VerticalNavigation";
 //# sourceMappingURL=index.js.map

package/dist/legacy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","HvColorPicker","HvDrawer","HvImageCarousel","HvInlineEditor","HvNavigationAnchors","HvNotificationPanel","HvStepNavigation","HvTimeAgo","HvWizard"],"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\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,eAAe;AACxD,SAASD,OAAO,IAAIE,QAAQ,QAAQ,UAAU;AAC9C,SAASF,OAAO,IAAIG,eAAe,QAAQ,iBAAiB;AAC5D,SAASH,OAAO,IAAII,cAAc,QAAQ,gBAAgB;AAC1D,SAASJ,OAAO,IAAIK,mBAAmB,QAAQ,qBAAqB;AACpE,SAASL,OAAO,IAAIM,mBAAmB,QAAQ,qBAAqB;AACpE,SAASN,OAAO,IAAIO,gBAAgB,QAAQ,kBAAkB;AAC9D,SAASP,OAAO,IAAIQ,SAAS,QAAQ,WAAW;AAChD,cAAc,WAAW;AACzB,SAASR,OAAO,IAAIS,QAAQ,QAAQ,UAAU;AAC9C,cAAc,UAAU"}
+{"version":3,"file":"index.js","names":["default","HvColorPicker","HvDrawer","HvImageCarousel","HvInlineEditor","HvNavigationAnchors","HvNotificationPanel","HvStepNavigation","HvTimeAgo","HvWizard","HvVerticalNavigation"],"sources":["../../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvImageCarousel } from \"./ImageCarousel\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvStepNavigation } from \"./StepNavigation\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvWizard } from \"./Wizard\";\nexport * from \"./Wizard\";\nexport { default as HvVerticalNavigation } from \"./VerticalNavigation\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,eAAe;AACxD,SAASD,OAAO,IAAIE,QAAQ,QAAQ,UAAU;AAC9C,SAASF,OAAO,IAAIG,eAAe,QAAQ,iBAAiB;AAC5D,SAASH,OAAO,IAAII,cAAc,QAAQ,gBAAgB;AAC1D,SAASJ,OAAO,IAAIK,mBAAmB,QAAQ,qBAAqB;AACpE,SAASL,OAAO,IAAIM,mBAAmB,QAAQ,qBAAqB;AACpE,SAASN,OAAO,IAAIO,gBAAgB,QAAQ,kBAAkB;AAC9D,SAASP,OAAO,IAAIQ,SAAS,QAAQ,WAAW;AAChD,cAAc,WAAW;AACzB,SAASR,OAAO,IAAIS,QAAQ,QAAQ,UAAU;AAC9C,cAAc,UAAU;AACxB,SAAST,OAAO,IAAIU,oBAAoB,QAAQ,sBAAsB"}

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

@@ -0,0 +1,38 @@
+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[];
+  /**
+   * Text to be displayed in the collpase area when the panel is expanded.
+   */
+  collapseLabel?: string;
+  /**
+   * 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 when expanded. Default value is 300.
+   */
+  expandedPanelWidth?: number;
+  /**
+   * The width of the panel when collapsed. Default vlaue is 52.
+   */
+  collapsedPanelWidth?: number;
+}
+
+export default function HvVerticalNavigation(props: HvVerticalNavigationProps): JSX.Element | null;

package/dist/modern/VerticalNavigation/VerticalNavigation.js

@@ -0,0 +1,116 @@
+var _Backwards, _Forwards;
+import React, { useState } from "react";
+import { withStyles } from "@mui/styles";
+import PropTypes from "prop-types";
+import clsx from "clsx";
+import { HvVerticalNavigation as HvVerticalNavigationCore, HvVerticalNavigationTree, HvVerticalNavigationActions, HvButton, setId } from "@hitachivantara/uikit-react-core";
+import { Backwards, Forwards } 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";
+const HvVerticalNavigation = ({
+  id,
+  onNavigationChange,
+  data,
+  selected,
+  collapseLabel,
+  topPosition,
+  expandedPanelWidth,
+  collapsedPanelWidth
+}) => {
+  const classes = useStyles({
+    topPosition,
+    expandedPanelWidth,
+    collapsedPanelWidth
+  })();
+  const [isExpanded, setIsExpanded] = useState(true);
+  const handleVerticalNavigationChange = (event, item) => {
+    onNavigationChange === null || onNavigationChange === void 0 ? void 0 : onNavigationChange(event, item);
+  };
+  const handleExpandToggle = () => {
+    setIsExpanded(prevState => !prevState);
+  };
+  return /*#__PURE__*/_jsxs(HvVerticalNavigationCore, {
+    className: clsx(classes.panel, isExpanded ? classes.panelExpanded : classes.panelCollapsed),
+    children: [/*#__PURE__*/_jsx(HvVerticalNavigationTree, {
+      collapsible: true,
+      data: data,
+      selected: selected,
+      onChange: handleVerticalNavigationChange
+    }), /*#__PURE__*/_jsx(HvVerticalNavigationActions, {
+      children: /*#__PURE__*/_jsx(HvButton, {
+        id: setId(id, "button-toggle"),
+        className: clsx(isExpanded ? classes.collapseButton : classes.expandButton),
+        category: "ghost",
+        startIcon: isExpanded ? _Backwards || (_Backwards = /*#__PURE__*/_jsx(Backwards, {
+          iconSize: "XS"
+        })) : _Forwards || (_Forwards = /*#__PURE__*/_jsx(Forwards, {
+          iconSize: "XS"
+        })),
+        onClick: handleExpandToggle,
+        children: isExpanded && /*#__PURE__*/_jsx("span", {
+          className: classes.collapseTextContainer,
+          children: collapseLabel
+        })
+      })
+    })]
+  });
+};
+process.env.NODE_ENV !== "production" ? HvVerticalNavigation.propTypes = {
+  /**
+   * Id to be applied to the root node of the panel.
+   */
+  id: PropTypes.string,
+  /**
+   * Called when a menu item is clicked.
+   */
+  onNavigationChange: PropTypes.func,
+  /**
+   * 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 component.
+   * 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,
+  /**
+   * Text to be displayed in the collpase area when the panel is expanded.
+   */
+  collapseLabel: PropTypes.string,
+  /**
+   * The ID of the selected page.
+   */
+  selected: PropTypes.string,
+  /**
+   * The top value where the panel will be rendered. Default is 44 as it is the height of the Header component.
+   */
+  topPosition: PropTypes.number,
+  /**
+   * The width of the panel when expanded. Default value is 300.
+   */
+  expandedPanelWidth: PropTypes.number,
+  /**
+   * The width of the panel when collapsed. Default vlaue is 52.
+   */
+  collapsedPanelWidth: PropTypes.number
+} : void 0;
+HvVerticalNavigation.defaultProps = {
+  collapseLabel: "Collapse",
+  topPosition: 44,
+  expandedPanelWidth: 300,
+  collapsedPanelWidth: 52
+};
+export default withStyles(useStyles, {
+  name: "HvVerticalNavigation"
+})(HvVerticalNavigation);
+//# sourceMappingURL=VerticalNavigation.js.map

package/dist/modern/VerticalNavigation/VerticalNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VerticalNavigation.js","names":["React","useState","withStyles","PropTypes","clsx","HvVerticalNavigation","HvVerticalNavigationCore","HvVerticalNavigationTree","HvVerticalNavigationActions","HvButton","setId","Backwards","Forwards","useStyles","id","onNavigationChange","data","selected","collapseLabel","topPosition","expandedPanelWidth","collapsedPanelWidth","classes","isExpanded","setIsExpanded","handleVerticalNavigationChange","event","item","handleExpandToggle","prevState","panel","panelExpanded","panelCollapsed","collapseButton","expandButton","collapseTextContainer","propTypes","string","func","arrayOf","shape","isRequired","label","icon","node","array","href","target","number","defaultProps","name"],"sources":["../../../src/VerticalNavigation/VerticalNavigation.js"],"sourcesContent":["import React, { useState } from \"react\";\nimport { withStyles } from \"@mui/styles\";\nimport PropTypes from \"prop-types\";\nimport clsx from \"clsx\";\n\nimport {\n  HvVerticalNavigation as HvVerticalNavigationCore,\n  HvVerticalNavigationTree,\n  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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"}

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

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

package/dist/modern/VerticalNavigation/index.js

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

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

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

package/dist/modern/VerticalNavigation/styles.js

@@ -0,0 +1,57 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { makeStyles } from "@mui/styles";
+const styles = props => makeStyles(theme => ({
+  panel: {
+    position: "fixed",
+    top: props.topPosition,
+    left: 0,
+    zIndex: 1100
+  },
+  panelExpanded: {
+    width: props.expandedPanelWidth,
+    height: `calc(100vh - ${props.topPosition}px)`,
+    // This is for the bottom actions
+    "& > :not(:first-child) > button > span": {
+      marginBottom: 0
+    }
+  },
+  panelCollapsed: {
+    width: props.collapsedPanelWidth,
+    height: `calc(100vh - ${props.topPosition}px)`,
+    // This is for the bottom actions
+    "& > :not(:first-child)": {
+      padding: theme.hvSpacing("xs", "xs", "sm", "xs"),
+      "& > button > span": {
+        marginLeft: 0
+      }
+    },
+    // This is for the top menu items
+    "& > :first-child:not(:last-child)": {
+      padding: theme.hvSpacing("sm", "xs", "xs", "xs")
+    },
+    "& > nav > ul > li > div > div": {
+      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"
+  }
+}));
+export default styles;
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","names":["makeStyles","styles","props","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,SAASA,UAAU,QAAQ,aAAa;AAExC,MAAMC,MAAM,GAAIC,KAAK,IACnBF,UAAU,CAAEG,KAAK,KAAM;EACrBC,KAAK,EAAE;IACLC,QAAQ,EAAE,OAAO;IACjBC,GAAG,EAAEJ,KAAK,CAACK,WAAW;IACtBC,IAAI,EAAE,CAAC;IACPC,MAAM,EAAE;EACV,CAAC;EACDC,aAAa,EAAE;IACbC,KAAK,EAAET,KAAK,CAACU,kBAAkB;IAC/BC,MAAM,EAAG,gBAAeX,KAAK,CAACK,WAAY,KAAI;IAE9C;IACA,wCAAwC,EAAE;MACxCO,YAAY,EAAE;IAChB;EACF,CAAC;EACDC,cAAc,EAAE;IACdJ,KAAK,EAAET,KAAK,CAACc,mBAAmB;IAChCH,MAAM,EAAG,gBAAeX,KAAK,CAACK,WAAY,KAAI;IAE9C;IACA,wBAAwB,EAAE;MACxBU,OAAO,EAAEd,KAAK,CAACe,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;MAEhD,mBAAmB,EAAE;QACnBC,UAAU,EAAE;MACd;IACF,CAAC;IACD;IACA,mCAAmC,EAAE;MACnCF,OAAO,EAAEd,KAAK,CAACe,SAAS,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IACjD,CAAC;IAED,+BAA+B,EAAE;MAC/BC,UAAU,EAAE;IACd;EACF,CAAC;EACDC,cAAc,kCACTjB,KAAK,CAACkB,EAAE,CAACC,UAAU,CAACC,UAAU;IACjCZ,KAAK,EAAE,MAAM;IAEb,UAAU,EAAE;MACVa,cAAc,EAAE;IAClB;EAAC,EACF;EACDC,YAAY,EAAE;IACZd,KAAK,EAAE,MAAM;IACbe,QAAQ,EAAE,OAAO;IAEjB,iBAAiB,EAAE;MACjBP,UAAU,EAAE;IACd;EACF,CAAC;EACDQ,qBAAqB,EAAE;IACrBhB,KAAK,EAAE,MAAM;IACbiB,SAAS,EAAE;EACb;AACF,CAAC,CAAC,CAAC;AAEL,eAAe3B,MAAM"}

package/dist/modern/index.d.ts

@@ -24,3 +24,6 @@ export * from "./TimeAgo";
 
 export { default as HvWizard } from "./Wizard";
 export * from "./Wizard";
+
+export { default as HvVerticalNavigation } from "./VerticalNavigation";
+export * from "./VerticalNavigation";

package/dist/modern/index.js

@@ -9,4 +9,5 @@ export { default as HvTimeAgo } from "./TimeAgo";
 export * from "./TimeAgo";
 export { default as HvWizard } from "./Wizard";
 export * from "./Wizard";
+export { default as HvVerticalNavigation } from "./VerticalNavigation";
 //# sourceMappingURL=index.js.map

package/dist/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","HvColorPicker","HvDrawer","HvImageCarousel","HvInlineEditor","HvNavigationAnchors","HvNotificationPanel","HvStepNavigation","HvTimeAgo","HvWizard"],"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\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,eAAe;AACxD,SAASD,OAAO,IAAIE,QAAQ,QAAQ,UAAU;AAC9C,SAASF,OAAO,IAAIG,eAAe,QAAQ,iBAAiB;AAC5D,SAASH,OAAO,IAAII,cAAc,QAAQ,gBAAgB;AAC1D,SAASJ,OAAO,IAAIK,mBAAmB,QAAQ,qBAAqB;AACpE,SAASL,OAAO,IAAIM,mBAAmB,QAAQ,qBAAqB;AACpE,SAASN,OAAO,IAAIO,gBAAgB,QAAQ,kBAAkB;AAC9D,SAASP,OAAO,IAAIQ,SAAS,QAAQ,WAAW;AAChD,cAAc,WAAW;AACzB,SAASR,OAAO,IAAIS,QAAQ,QAAQ,UAAU;AAC9C,cAAc,UAAU"}
+{"version":3,"file":"index.js","names":["default","HvColorPicker","HvDrawer","HvImageCarousel","HvInlineEditor","HvNavigationAnchors","HvNotificationPanel","HvStepNavigation","HvTimeAgo","HvWizard","HvVerticalNavigation"],"sources":["../../src/index.js"],"sourcesContent":["export { default as HvColorPicker } from \"./ColorPicker\";\nexport { default as HvDrawer } from \"./Drawer\";\nexport { default as HvImageCarousel } from \"./ImageCarousel\";\nexport { default as HvInlineEditor } from \"./InlineEditor\";\nexport { default as HvNavigationAnchors } from \"./NavigationAnchors\";\nexport { default as HvNotificationPanel } from \"./NotificationPanel\";\nexport { default as HvStepNavigation } from \"./StepNavigation\";\nexport { default as HvTimeAgo } from \"./TimeAgo\";\nexport * from \"./TimeAgo\";\nexport { default as HvWizard } from \"./Wizard\";\nexport * from \"./Wizard\";\nexport { default as HvVerticalNavigation } from \"./VerticalNavigation\";\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,aAAa,QAAQ,eAAe;AACxD,SAASD,OAAO,IAAIE,QAAQ,QAAQ,UAAU;AAC9C,SAASF,OAAO,IAAIG,eAAe,QAAQ,iBAAiB;AAC5D,SAASH,OAAO,IAAII,cAAc,QAAQ,gBAAgB;AAC1D,SAASJ,OAAO,IAAIK,mBAAmB,QAAQ,qBAAqB;AACpE,SAASL,OAAO,IAAIM,mBAAmB,QAAQ,qBAAqB;AACpE,SAASN,OAAO,IAAIO,gBAAgB,QAAQ,kBAAkB;AAC9D,SAASP,OAAO,IAAIQ,SAAS,QAAQ,WAAW;AAChD,cAAc,WAAW;AACzB,SAASR,OAAO,IAAIS,QAAQ,QAAQ,UAAU;AAC9C,cAAc,UAAU;AACxB,SAAST,OAAO,IAAIU,oBAAoB,QAAQ,sBAAsB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hitachivantara/uikit-react-lab",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "description": "A collection of contributed React components for the Hitachi Vantara's Design System.",
   "homepage": "https://github.com/lumada-design/hv-uikit-react",
   "license": "Apache-2.0",
@@ -64,5 +64,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "e89eb62eb89567e55241e76cc6cc70e3677ca04d"
+  "gitHead": "6c1a1a461fbdcf4585ac1d2293b2e2e09e2b0e16"
 }