@pingux/astro 1.1.0-alpha.9 → 1.1.0

package/lib/cjs/components/OverlayPanel/OverlayPanel.test.js

@@ -53,4 +53,88 @@ test('custom overlayPanel gets custom width', function () {
 
   expect(overlayPanel).toBeInTheDocument();
   expect(overlayPanel).toHaveStyleRule('width', '240px');
+});
+test('onClose callback fires when provided', function () {
+  var onClose = jest.fn();
+  getComponent({
+    onClose: onClose,
+    children: (0, _react2.jsx)("div", null, "Test")
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  expect(onClose).toHaveBeenCalled();
+});
+test('neither callback fires when not provided', function () {
+  var onClose = jest.fn();
+  getComponent({
+    children: (0, _react2.jsx)("div", null, "Test")
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  expect(onClose).not.toHaveBeenCalled();
+});
+test('triggerRef.current.focus() fires when provided', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: (0, _react2.jsx)("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+
+  var overlayPanel = _testWrapper.screen.getByTestId(testId);
+
+  _testWrapper.fireEvent.keyDown(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  _testWrapper.fireEvent.keyUp(overlayPanel, {
+    key: 'Escape',
+    code: 'Escape',
+    keyCode: 27,
+    charCode: 27
+  });
+
+  expect(focusFunction).toHaveBeenCalled();
 });

package/lib/cjs/components/Separator/Separator.js

@@ -51,7 +51,7 @@ var Separator = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     ref: ref,
     className: classNames,
-    variant: "separator"
+    variant: "separator.base"
   }, others, separatorProps));
 });
 Separator.propTypes = {

package/lib/cjs/components/TooltipTrigger/TooltipTrigger.js

@@ -59,7 +59,8 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       className = props.className,
       isNotFlippable = props.isNotFlippable,
       isDarkMode = props.isDarkMode,
-      hasNoArrow = props.hasNoArrow;
+      hasNoArrow = props.hasNoArrow,
+      targetRef = props.targetRef;
 
   var _React$Children$toArr = _react["default"].Children.toArray(children),
       _React$Children$toArr2 = (0, _slicedToArray2["default"])(_React$Children$toArr, 2),
@@ -69,23 +70,24 @@ var TooltipTrigger = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var state = (0, _tooltip2.useTooltipTriggerState)(props);
   var tooltipTriggerRef = (0, _react.useRef)();
   var overlayRef = (0, _react.useRef)();
+  var tooltipRef = targetRef || tooltipTriggerRef;
   (0, _hooks.usePropWarning)(props, 'disabled', 'isDisabled');
   /* istanbul ignore next */
 
   (0, _react.useImperativeHandle)(ref, function () {
-    return tooltipTriggerRef.current;
+    return tooltipRef.current;
   });
 
   var _useTooltipTrigger = (0, _tooltip.useTooltipTrigger)({
     isDisabled: isDisabled,
     trigger: triggerAction
-  }, state, tooltipTriggerRef),
+  }, state, tooltipRef),
       triggerProps = _useTooltipTrigger.triggerProps,
       tooltipProps = _useTooltipTrigger.tooltipProps;
 
   var _useOverlayPosition = (0, _overlays.useOverlayPosition)({
     placement: (0, _concat["default"])(_context = "".concat(direction, " ")).call(_context, align),
-    targetRef: tooltipTriggerRef,
+    targetRef: tooltipRef,
     overlayRef: overlayRef,
     offset: offset,
     // Our API preference is for default false so we invert this since it should be default true
@@ -160,7 +162,10 @@ TooltipTrigger.propTypes = {
   placement: _propTypes["default"].string,
 
   /** By default, opens for both focus and hover. Can be made to open only for focus. */
-  trigger: _propTypes["default"].string
+  trigger: _propTypes["default"].string,
+
+  /* The ref for the element which the overlay positions itself with respect to. */
+  targetRef: _propTypes["default"].shape({})
 };
 TooltipTrigger.defaultProps = {
   align: 'middle',

package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.js

@@ -24,11 +24,30 @@ var useOverlayPanelState = function useOverlayPanelState() {
   var isDefaultOpen = props.isDefaultOpen,
       isOpen = props.isOpen,
       onOpenChange = props.onOpenChange;
-  return (0, _overlays.useOverlayTriggerState)({
+  var state = (0, _overlays.useOverlayTriggerState)({
     defaultOpen: isDefaultOpen,
     isOpen: isOpen,
     onOpenChange: onOpenChange
   });
+
+  var onClose = function onClose(stateProp, triggerRef, onCloseProp) {
+    if (stateProp) {
+      stateProp.close();
+    }
+
+    if (triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) {
+      triggerRef.current.focus();
+    }
+
+    if (onCloseProp) {
+      onCloseProp();
+    }
+  };
+
+  return {
+    state: state,
+    onClose: onClose
+  };
 };
 
 var _default = useOverlayPanelState;

package/lib/cjs/hooks/useOverlayPanelState/useOverlayPanelState.test.js

@@ -13,8 +13,12 @@ test('default useOverlayPanelState', function () {
       result = _renderHook.result;
 
   expect(result.current).toEqual(expect.objectContaining({
-    open: expect.any(Function),
-    close: expect.any(Function),
-    toggle: expect.any(Function)
+    state: {
+      open: expect.any(Function),
+      close: expect.any(Function),
+      toggle: expect.any(Function),
+      isOpen: expect.any(Boolean)
+    },
+    onClose: expect.any(Function)
   }));
 });

package/lib/cjs/index.js

@@ -4,7 +4,7 @@ var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
 
 var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
 
-var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60;
+var _context, _context2, _context3, _context4, _context5, _context6, _context7, _context8, _context9, _context10, _context11, _context12, _context13, _context14, _context15, _context16, _context17, _context18, _context19, _context20, _context21, _context22, _context23, _context24, _context25, _context26, _context27, _context28, _context29, _context30, _context31, _context32, _context33, _context34, _context35, _context36, _context37, _context38, _context39, _context40, _context41, _context42, _context43, _context44, _context45, _context46, _context47, _context48, _context49, _context50, _context51, _context52, _context53, _context54, _context55, _context56, _context57, _context58, _context59, _context60, _context61, _context62;
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
@@ -30,6 +30,7 @@ var _exportNames = {
   Checkbox: true,
   CheckboxField: true,
   Chip: true,
+  CodeView: true,
   ComboBoxField: true,
   CopyText: true,
   ColorField: true,
@@ -53,6 +54,8 @@ var _exportNames = {
   Menu: true,
   Messages: true,
   Modal: true,
+  NavBar: true,
+  NavBarSection: true,
   MultivaluesField: true,
   OverlayPanel: true,
   PageHeader: true,
@@ -183,6 +186,13 @@ _Object$defineProperty(exports, "Chip", {
   }
 });
 
+_Object$defineProperty(exports, "CodeView", {
+  enumerable: true,
+  get: function get() {
+    return _CodeView["default"];
+  }
+});
+
 _Object$defineProperty(exports, "ComboBoxField", {
   enumerable: true,
   get: function get() {
@@ -344,6 +354,20 @@ _Object$defineProperty(exports, "Modal", {
   }
 });
 
+_Object$defineProperty(exports, "NavBar", {
+  enumerable: true,
+  get: function get() {
+    return _NavBar["default"];
+  }
+});
+
+_Object$defineProperty(exports, "NavBarSection", {
+  enumerable: true,
+  get: function get() {
+    return _NavBarSection["default"];
+  }
+});
+
 _Object$defineProperty(exports, "MultivaluesField", {
   enumerable: true,
   get: function get() {
@@ -785,6 +809,8 @@ _forEachInstanceProperty(_context13 = _Object$keys(_Chip)).call(_context13, func
   });
 });
 
+var _CodeView = _interopRequireDefault(require("./components/CodeView"));
+
 var _ComboBoxField = _interopRequireDefault(require("./components/ComboBoxField"));
 
 var _CopyText = _interopRequireDefault(require("./components/CopyText"));
@@ -1047,11 +1073,39 @@ _forEachInstanceProperty(_context31 = _Object$keys(_Modal)).call(_context31, fun
   });
 });
 
+var _NavBar = _interopRequireWildcard(require("./components/NavBar"));
+
+_forEachInstanceProperty(_context32 = _Object$keys(_NavBar)).call(_context32, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NavBar[key];
+    }
+  });
+});
+
+var _NavBarSection = _interopRequireWildcard(require("./components/NavBarSection"));
+
+_forEachInstanceProperty(_context33 = _Object$keys(_NavBarSection)).call(_context33, function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+
+  _Object$defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NavBarSection[key];
+    }
+  });
+});
+
 var _MultivaluesField = _interopRequireDefault(require("./components/MultivaluesField"));
 
 var _OverlayPanel = _interopRequireWildcard(require("./components/OverlayPanel"));
 
-_forEachInstanceProperty(_context32 = _Object$keys(_OverlayPanel)).call(_context32, function (key) {
+_forEachInstanceProperty(_context34 = _Object$keys(_OverlayPanel)).call(_context34, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1065,7 +1119,7 @@ _forEachInstanceProperty(_context32 = _Object$keys(_OverlayPanel)).call(_context
 
 var _PageHeader = _interopRequireWildcard(require("./components/PageHeader"));
 
-_forEachInstanceProperty(_context33 = _Object$keys(_PageHeader)).call(_context33, function (key) {
+_forEachInstanceProperty(_context35 = _Object$keys(_PageHeader)).call(_context35, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1079,7 +1133,7 @@ _forEachInstanceProperty(_context33 = _Object$keys(_PageHeader)).call(_context33
 
 var _PasswordField = _interopRequireWildcard(require("./components/PasswordField"));
 
-_forEachInstanceProperty(_context34 = _Object$keys(_PasswordField)).call(_context34, function (key) {
+_forEachInstanceProperty(_context36 = _Object$keys(_PasswordField)).call(_context36, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1093,7 +1147,7 @@ _forEachInstanceProperty(_context34 = _Object$keys(_PasswordField)).call(_contex
 
 var _PopoverContainer = _interopRequireWildcard(require("./components/PopoverContainer"));
 
-_forEachInstanceProperty(_context35 = _Object$keys(_PopoverContainer)).call(_context35, function (key) {
+_forEachInstanceProperty(_context37 = _Object$keys(_PopoverContainer)).call(_context37, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1109,7 +1163,7 @@ var _PopoverMenu = _interopRequireDefault(require("./components/PopoverMenu"));
 
 var _Radio = _interopRequireWildcard(require("./components/Radio"));
 
-_forEachInstanceProperty(_context36 = _Object$keys(_Radio)).call(_context36, function (key) {
+_forEachInstanceProperty(_context38 = _Object$keys(_Radio)).call(_context38, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1123,7 +1177,7 @@ _forEachInstanceProperty(_context36 = _Object$keys(_Radio)).call(_context36, fun
 
 var _RadioField = _interopRequireWildcard(require("./components/RadioField"));
 
-_forEachInstanceProperty(_context37 = _Object$keys(_RadioField)).call(_context37, function (key) {
+_forEachInstanceProperty(_context39 = _Object$keys(_RadioField)).call(_context39, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1137,7 +1191,7 @@ _forEachInstanceProperty(_context37 = _Object$keys(_RadioField)).call(_context37
 
 var _RadioGroupField = _interopRequireWildcard(require("./components/RadioGroupField"));
 
-_forEachInstanceProperty(_context38 = _Object$keys(_RadioGroupField)).call(_context38, function (key) {
+_forEachInstanceProperty(_context40 = _Object$keys(_RadioGroupField)).call(_context40, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1151,7 +1205,7 @@ _forEachInstanceProperty(_context38 = _Object$keys(_RadioGroupField)).call(_cont
 
 var _RequirementsList = _interopRequireWildcard(require("./components/RequirementsList"));
 
-_forEachInstanceProperty(_context39 = _Object$keys(_RequirementsList)).call(_context39, function (key) {
+_forEachInstanceProperty(_context41 = _Object$keys(_RequirementsList)).call(_context41, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1165,7 +1219,7 @@ _forEachInstanceProperty(_context39 = _Object$keys(_RequirementsList)).call(_con
 
 var _RockerButton = _interopRequireWildcard(require("./components/RockerButton"));
 
-_forEachInstanceProperty(_context40 = _Object$keys(_RockerButton)).call(_context40, function (key) {
+_forEachInstanceProperty(_context42 = _Object$keys(_RockerButton)).call(_context42, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1179,7 +1233,7 @@ _forEachInstanceProperty(_context40 = _Object$keys(_RockerButton)).call(_context
 
 var _RockerButtonGroup = _interopRequireWildcard(require("./components/RockerButtonGroup"));
 
-_forEachInstanceProperty(_context41 = _Object$keys(_RockerButtonGroup)).call(_context41, function (key) {
+_forEachInstanceProperty(_context43 = _Object$keys(_RockerButtonGroup)).call(_context43, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1193,7 +1247,7 @@ _forEachInstanceProperty(_context41 = _Object$keys(_RockerButtonGroup)).call(_co
 
 var _ScrollBox = _interopRequireWildcard(require("./components/ScrollBox"));
 
-_forEachInstanceProperty(_context42 = _Object$keys(_ScrollBox)).call(_context42, function (key) {
+_forEachInstanceProperty(_context44 = _Object$keys(_ScrollBox)).call(_context44, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1207,7 +1261,7 @@ _forEachInstanceProperty(_context42 = _Object$keys(_ScrollBox)).call(_context42,
 
 var _SearchField = _interopRequireWildcard(require("./components/SearchField"));
 
-_forEachInstanceProperty(_context43 = _Object$keys(_SearchField)).call(_context43, function (key) {
+_forEachInstanceProperty(_context45 = _Object$keys(_SearchField)).call(_context45, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1221,7 +1275,7 @@ _forEachInstanceProperty(_context43 = _Object$keys(_SearchField)).call(_context4
 
 var _SelectField = _interopRequireWildcard(require("./components/SelectField"));
 
-_forEachInstanceProperty(_context44 = _Object$keys(_SelectField)).call(_context44, function (key) {
+_forEachInstanceProperty(_context46 = _Object$keys(_SelectField)).call(_context46, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1235,7 +1289,7 @@ _forEachInstanceProperty(_context44 = _Object$keys(_SelectField)).call(_context4
 
 var _Separator = _interopRequireWildcard(require("./components/Separator"));
 
-_forEachInstanceProperty(_context45 = _Object$keys(_Separator)).call(_context45, function (key) {
+_forEachInstanceProperty(_context47 = _Object$keys(_Separator)).call(_context47, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1249,7 +1303,7 @@ _forEachInstanceProperty(_context45 = _Object$keys(_Separator)).call(_context45,
 
 var _Stepper = _interopRequireWildcard(require("./components/Stepper"));
 
-_forEachInstanceProperty(_context46 = _Object$keys(_Stepper)).call(_context46, function (key) {
+_forEachInstanceProperty(_context48 = _Object$keys(_Stepper)).call(_context48, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1263,7 +1317,7 @@ _forEachInstanceProperty(_context46 = _Object$keys(_Stepper)).call(_context46, f
 
 var _Switch = _interopRequireWildcard(require("./components/Switch"));
 
-_forEachInstanceProperty(_context47 = _Object$keys(_Switch)).call(_context47, function (key) {
+_forEachInstanceProperty(_context49 = _Object$keys(_Switch)).call(_context49, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1277,7 +1331,7 @@ _forEachInstanceProperty(_context47 = _Object$keys(_Switch)).call(_context47, fu
 
 var _SwitchField = _interopRequireWildcard(require("./components/SwitchField"));
 
-_forEachInstanceProperty(_context48 = _Object$keys(_SwitchField)).call(_context48, function (key) {
+_forEachInstanceProperty(_context50 = _Object$keys(_SwitchField)).call(_context50, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1291,7 +1345,7 @@ _forEachInstanceProperty(_context48 = _Object$keys(_SwitchField)).call(_context4
 
 var _Tab = _interopRequireWildcard(require("./components/Tab"));
 
-_forEachInstanceProperty(_context49 = _Object$keys(_Tab)).call(_context49, function (key) {
+_forEachInstanceProperty(_context51 = _Object$keys(_Tab)).call(_context51, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1305,7 +1359,7 @@ _forEachInstanceProperty(_context49 = _Object$keys(_Tab)).call(_context49, funct
 
 var _Table = _interopRequireWildcard(require("./components/Table"));
 
-_forEachInstanceProperty(_context50 = _Object$keys(_Table)).call(_context50, function (key) {
+_forEachInstanceProperty(_context52 = _Object$keys(_Table)).call(_context52, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1319,7 +1373,7 @@ _forEachInstanceProperty(_context50 = _Object$keys(_Table)).call(_context50, fun
 
 var _TableBody = _interopRequireWildcard(require("./components/TableBody"));
 
-_forEachInstanceProperty(_context51 = _Object$keys(_TableBody)).call(_context51, function (key) {
+_forEachInstanceProperty(_context53 = _Object$keys(_TableBody)).call(_context53, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1333,7 +1387,7 @@ _forEachInstanceProperty(_context51 = _Object$keys(_TableBody)).call(_context51,
 
 var _TableCell = _interopRequireWildcard(require("./components/TableCell"));
 
-_forEachInstanceProperty(_context52 = _Object$keys(_TableCell)).call(_context52, function (key) {
+_forEachInstanceProperty(_context54 = _Object$keys(_TableCell)).call(_context54, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1347,7 +1401,7 @@ _forEachInstanceProperty(_context52 = _Object$keys(_TableCell)).call(_context52,
 
 var _TableHead = _interopRequireWildcard(require("./components/TableHead"));
 
-_forEachInstanceProperty(_context53 = _Object$keys(_TableHead)).call(_context53, function (key) {
+_forEachInstanceProperty(_context55 = _Object$keys(_TableHead)).call(_context55, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1361,7 +1415,7 @@ _forEachInstanceProperty(_context53 = _Object$keys(_TableHead)).call(_context53,
 
 var _TableRow = _interopRequireWildcard(require("./components/TableRow"));
 
-_forEachInstanceProperty(_context54 = _Object$keys(_TableRow)).call(_context54, function (key) {
+_forEachInstanceProperty(_context56 = _Object$keys(_TableRow)).call(_context56, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1375,7 +1429,7 @@ _forEachInstanceProperty(_context54 = _Object$keys(_TableRow)).call(_context54,
 
 var _Tabs = _interopRequireWildcard(require("./components/Tabs"));
 
-_forEachInstanceProperty(_context55 = _Object$keys(_Tabs)).call(_context55, function (key) {
+_forEachInstanceProperty(_context57 = _Object$keys(_Tabs)).call(_context57, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1389,7 +1443,7 @@ _forEachInstanceProperty(_context55 = _Object$keys(_Tabs)).call(_context55, func
 
 var _Text = _interopRequireWildcard(require("./components/Text"));
 
-_forEachInstanceProperty(_context56 = _Object$keys(_Text)).call(_context56, function (key) {
+_forEachInstanceProperty(_context58 = _Object$keys(_Text)).call(_context58, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1403,7 +1457,7 @@ _forEachInstanceProperty(_context56 = _Object$keys(_Text)).call(_context56, func
 
 var _TextField = _interopRequireWildcard(require("./components/TextField"));
 
-_forEachInstanceProperty(_context57 = _Object$keys(_TextField)).call(_context57, function (key) {
+_forEachInstanceProperty(_context59 = _Object$keys(_TextField)).call(_context59, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1417,7 +1471,7 @@ _forEachInstanceProperty(_context57 = _Object$keys(_TextField)).call(_context57,
 
 var _TextArea = _interopRequireWildcard(require("./components/TextArea"));
 
-_forEachInstanceProperty(_context58 = _Object$keys(_TextArea)).call(_context58, function (key) {
+_forEachInstanceProperty(_context60 = _Object$keys(_TextArea)).call(_context60, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1431,7 +1485,7 @@ _forEachInstanceProperty(_context58 = _Object$keys(_TextArea)).call(_context58,
 
 var _TextAreaField = _interopRequireWildcard(require("./components/TextAreaField"));
 
-_forEachInstanceProperty(_context59 = _Object$keys(_TextAreaField)).call(_context59, function (key) {
+_forEachInstanceProperty(_context61 = _Object$keys(_TextAreaField)).call(_context61, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 
@@ -1445,7 +1499,7 @@ _forEachInstanceProperty(_context59 = _Object$keys(_TextAreaField)).call(_contex
 
 var _TooltipTrigger = _interopRequireWildcard(require("./components/TooltipTrigger"));
 
-_forEachInstanceProperty(_context60 = _Object$keys(_TooltipTrigger)).call(_context60, function (key) {
+_forEachInstanceProperty(_context62 = _Object$keys(_TooltipTrigger)).call(_context62, function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
 

package/lib/cjs/styles/variants/accordion.js

@@ -65,6 +65,36 @@ var accordionGridHeader = {
     }
   }
 };
+var accordionGridHeaderNav = {
+  padding: '10px 15px 10px 15px',
+  cursor: 'pointer',
+  minHeight: '40px',
+  lineHeight: '30px',
+  outline: 'none',
+  display: 'flex',
+  justifyContent: 'flex-start',
+  flexShrink: 0,
+  wordBreak: 'inherit',
+  whiteSpace: 'nowrap',
+  color: 'neutral.95',
+  flexGrow: 1,
+  fontWeight: 0,
+  fontSize: '16px',
+  mt: '5px',
+  '&.is-focused': {
+    outline: 'none',
+    boxShadow: 'focus',
+    WebkitBoxShadow: 'focus',
+    MozBoxShadow: 'focus'
+  },
+  '&.is-hovered': {
+    backgroundColor: 'accent.10',
+    boxShadow: 'inset 2px 0 0 0 white'
+  },
+  '&.is-pressed': {
+    backgroundColor: 'accent.10'
+  }
+};
 var accordionGridBody = {
   display: 'none !important',
   pl: 'sm',
@@ -78,6 +108,7 @@ var _default = {
   accordionGridBody: accordionGridBody,
   accordionTitle: accordionTitle,
   accordion: accordion,
-  accordionBody: accordionBody
+  accordionBody: accordionBody,
+  accordionGridHeaderNav: accordionGridHeaderNav
 };
 exports["default"] = _default;

package/lib/cjs/styles/variants/boxes.js

@@ -211,6 +211,26 @@ var expandableRow = {
     }
   }
 };
+var navBar = {
+  height: '100%',
+  width: '230px',
+  position: 'absolute',
+  zIndex: '1',
+  top: '0',
+  left: '0',
+  backgroundColor: 'accent.20',
+  overflowY: 'hidden'
+};
+var navBarSectionContainer = {
+  height: '100%',
+  maxHeight: '100%',
+  overflowY: 'overlay !important'
+};
+var navBarItemHeaderContainer = {
+  flexGrow: 1,
+  alignItems: 'center',
+  maxWidth: '180px'
+};
 var datePicker = {
   '.react-calendar': {
     width: 280,
@@ -292,6 +312,9 @@ var _default = {
   radioContainer: radioContainer,
   scrollbox: scrollbox,
   topShadowScrollbox: topShadowScrollbox,
-  bottomShadowScrollbox: bottomShadowScrollbox
+  bottomShadowScrollbox: bottomShadowScrollbox,
+  navBar: navBar,
+  navBarSectionContainer: navBarSectionContainer,
+  navBarItemHeaderContainer: navBarItemHeaderContainer
 };
 exports["default"] = _default;