@pingux/astro 2.16.0-alpha.1 → 2.16.0-alpha.3

package/lib/cjs/components/Calendar/Calendar.js

@@ -64,51 +64,62 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     prevButtonProps = _useCalendar.prevButtonProps,
     nextButtonProps = _useCalendar.nextButtonProps,
     title = _useCalendar.title;
-
-  /**
-   * Grabs the currently displayed date for yearly navigation.
-   */
-
-  var _useState = (0, _react.useState)(),
+  var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    currentDate = _useState2[0],
-    setCurrentDate = _useState2[1];
-  var todayDate = (0, _react.useMemo)(function () {
-    setCurrentDate(state.visibleRange.start);
-  }, [state.visibleRange.start]);
+    yearChangeDirection = _useState2[0],
+    setYearChangeDirection = _useState2[1];
+  var previousYearRef = (0, _react.useRef)(null);
+  var nextYearRef = (0, _react.useRef)(null);
   var nav = {
     NEXT: 'next',
     PREVIOUS: 'previous'
   };
 
-  /**
-   * Function handles the navigation to previous and next year
-   * based on the currently displayed date.
-   */
+  // after updating visible year, reapplies focus to corresponding year buttons
+  (0, _react.useEffect)(function () {
+    if (yearChangeDirection === nav.NEXT) {
+      nextYearRef.current.focus();
+    }
+    if (yearChangeDirection === nav.PREVIOUS) {
+      previousYearRef.current.focus();
+    }
+    setYearChangeDirection(null);
+  }, [nav.NEXT, nav.PREVIOUS, yearChangeDirection]);
 
-  var handleYearSelection = (0, _react.useCallback)(function (navigation) {
-    var tempValue;
+  // update visible year
+  var handleYearSelection = function handleYearSelection(navigation) {
     if (navigation === nav.PREVIOUS) {
-      tempValue = currentDate.subtract({
+      var previousYear = state.focusedDate.subtract({
         years: 1
       });
-    } else if (navigation === nav.NEXT) {
-      tempValue = currentDate.add({
+      state.setFocusedDate(previousYear);
+    }
+    if (navigation === nav.NEXT) {
+      var nextYear = state.focusedDate.add({
         years: 1
       });
+      state.setFocusedDate(nextYear);
     }
-    state.setFocusedDate(tempValue);
-    setCurrentDate(tempValue);
-  }, [currentDate, state, todayDate]);
+    setYearChangeDirection(navigation);
+  };
+  var renderTitle = (0, _react2.jsx)(_index.Text, {
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": "3",
+    fontWeight: 3
+  }, title);
   return (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({}, calendarProps, {
     ref: calenderRef,
     variant: "calendar.calendarContainer"
-  }), (0, _react2.jsx)(_index.Box, {
+  }), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, {
+    "aria-live": "assertive"
+  }, (0, _react2.jsx)(_index.Text, null, title)), (0, _react2.jsx)(_index.Box, {
     className: "header",
     isRow: true,
     variant: "calendar.calendarHeader",
     verticalAlign: "middle"
   }, (0, _react2.jsx)(_index.IconButton, {
+    ref: previousYearRef,
     onPress: function onPress() {
       return handleYearSelection(nav.PREVIOUS);
     },
@@ -129,12 +140,7 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     title: {
       name: 'Chevron Left Icon'
     }
-  })), (0, _react2.jsx)(_visuallyHidden.VisuallyHidden, null, (0, _react2.jsx)(_index.Text, null, calendarProps['aria-label'])), (0, _react2.jsx)(_index.Text, {
-    variant: "itemTitle",
-    role: "heading",
-    "aria-level": "3",
-    fontWeight: 3
-  }, title), (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
+  })), renderTitle, (0, _react2.jsx)(_index.IconButton, (0, _extends2["default"])({}, nextButtonProps, {
     "aria-label": "Next month navigation"
   }), (0, _react2.jsx)(_index.Icon, {
     icon: _ChevronRightIcon["default"],
@@ -143,6 +149,7 @@ var Calendar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       name: 'Chevron Right Icon'
     }
   })), (0, _react2.jsx)(_index.IconButton, {
+    ref: nextYearRef,
     onPress: function onPress() {
       return handleYearSelection(nav.NEXT);
     },

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -81,7 +81,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
-  var _useState3 = (0, _react.useState)([]),
+  var _useState3 = (0, _react.useState)([selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key]),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     selectedKeys = _useState4[0],
     setSelectedKeys = _useState4[1];

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -16,8 +16,8 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.WithSections = exports.RightAlignedBadges = exports.OrgLevel = exports.DefaultOpen = exports.DefaultClosed = exports.Default = exports.ControlledMenu = void 0;
 var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
-var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _reduce = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/reduce"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
 var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
@@ -33,7 +33,7 @@ var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, 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 _context7, _context8; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 var _default = {
   title: 'Components/EnvironmentBreadcrumb',
   component: _index.EnvironmentBreadcrumb,
@@ -211,7 +211,9 @@ var DefaultClosed = function DefaultClosed(args) {
 };
 exports.DefaultClosed = DefaultClosed;
 var WithSections = function WithSections() {
-  var _context;
+  var _context, _context2;
+  var selectedSectionIndex = 0;
+  var selectedOptionIndex = 0;
   var _useState5 = (0, _react.useState)(environmentsWithSections),
     _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
     environments = _useState6[0],
@@ -220,38 +222,39 @@ var WithSections = function WithSections() {
     _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
     filteredOptionsNumber = _useState8[0],
     setFilteredOptionsNumber = _useState8[1];
-  var _useState9 = (0, _react.useState)(environmentsWithSections[0].options[0]),
+  var _useState9 = (0, _react.useState)(environmentsWithSections[selectedSectionIndex].options[selectedOptionIndex]),
     _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
     selectedEnvironment = _useState10[0],
     setSelectedEnvironment = _useState10[1];
+  var selectedKey = (0, _concat["default"])(_context = "".concat(environmentsWithSections[selectedSectionIndex].key, "-")).call(_context, selectedEnvironment.name);
   var recentEnvShown = 3;
   var totalOptionsNumber = (0, _reduce["default"])(environmentsWithSections).call(environmentsWithSections, function (acc, section) {
     return acc + section.options.length;
   }, 0);
-  var optionsCountMessage = filteredOptionsNumber === totalOptionsNumber ? "".concat(totalOptionsNumber, " options in total") : (0, _concat["default"])(_context = "".concat(filteredOptionsNumber, " of ")).call(_context, totalOptionsNumber, " options");
+  var optionsCountMessage = filteredOptionsNumber === totalOptionsNumber ? "".concat(totalOptionsNumber, " options in total") : (0, _concat["default"])(_context2 = "".concat(filteredOptionsNumber, " of ")).call(_context2, totalOptionsNumber, " options");
   var getUpdatedRecentEnvs = function getUpdatedRecentEnvs(envObj, prevEnvs) {
-    var _context4;
+    var _context5;
     var envName = envObj.name;
     var isDuplicate = (0, _filter["default"])(prevEnvs).call(prevEnvs, function (prevEnv) {
       return prevEnv.name === envName;
     }).length > 0;
     if (isDuplicate) {
-      var _context2;
-      return (0, _concat["default"])(_context2 = [_objectSpread({}, envObj)]).call(_context2, (0, _filter["default"])(prevEnvs).call(prevEnvs, function (prevEnv) {
+      var _context3;
+      return (0, _concat["default"])(_context3 = [_objectSpread({}, envObj)]).call(_context3, (0, _filter["default"])(prevEnvs).call(prevEnvs, function (prevEnv) {
         return prevEnv.name !== envName;
       }));
     }
     if (prevEnvs.length >= recentEnvShown) {
-      var _context3;
-      return (0, _concat["default"])(_context3 = [_objectSpread({}, envObj)]).call(_context3, (0, _slice["default"])(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
+      var _context4;
+      return (0, _concat["default"])(_context4 = [_objectSpread({}, envObj)]).call(_context4, (0, _slice["default"])(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
     }
-    return (0, _concat["default"])(_context4 = [_objectSpread({}, envObj)]).call(_context4, prevEnvs);
+    return (0, _concat["default"])(_context5 = [_objectSpread({}, envObj)]).call(_context5, prevEnvs);
   };
   var findEnvObj = function findEnvObj(envName, envSectionName) {
-    var _context5;
-    return (0, _find["default"])(_context5 = (0, _find["default"])(environments).call(environments, function (section) {
+    var _context6;
+    return (0, _find["default"])(_context6 = (0, _find["default"])(environments).call(environments, function (section) {
       return section.name === envSectionName;
-    }).options).call(_context5, function (option) {
+    }).options).call(_context6, function (option) {
       return option.name === envName;
     });
   };
@@ -275,7 +278,7 @@ var WithSections = function WithSections() {
   };
   var envNode = (0, _react2.jsx)(_index.Box, {
     isRow: true,
-    key: selectedEnvironment.name
+    key: selectedKey
   }, (0, _react2.jsx)(_index.Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Badge, {
@@ -300,12 +303,12 @@ var WithSections = function WithSections() {
       title: sectionName,
       items: sectionOptions
     }, function (_ref6) {
-      var _context6;
+      var _context7;
       var itemName = _ref6.name,
         itemOptions = _ref6.options,
         isSandbox = _ref6.isSandbox;
       return (0, _react2.jsx)(_index.Item, {
-        key: (0, _concat["default"])(_context6 = "".concat(sectionName, "-")).call(_context6, itemName),
+        key: (0, _concat["default"])(_context7 = "".concat(sectionName, "-")).call(_context7, itemName),
         childItems: itemOptions,
         textValue: itemName
       }, (0, _react2.jsx)(_index.Box, {

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

@@ -348,4 +348,17 @@ test('should reflect the selection change when env is clicked', function () {
   });
   _userEvent["default"].click(_testWrapper.screen.getByText(itemsWithSections[1].options[1].name));
   expect(onSelectionChangeMock).toHaveBeenNthCalledWith(1, (0, _concat["default"])(_context4 = "".concat(itemsWithSections[1].name, "-")).call(_context4, itemsWithSections[1].options[1].name));
+});
+test('should indicate selected item on first render', function () {
+  var selectedItem = items[0].name;
+  var envNode = (0, _react2.jsx)(_.Item, {
+    key: selectedItem
+  }, selectedItem);
+  getComponent({
+    isDefaultOpen: true,
+    selectedItem: envNode
+  });
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+  expect(_testWrapper.screen.getByText(selectedItem)).toHaveClass('is-selected');
 });

package/lib/components/Calendar/Calendar.js

@@ -11,7 +11,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { createCalendar, parseDate } from '@internationalized/date';
 import ChevronDoubleLeftIcon from '@pingux/mdi-react/ChevronDoubleLeftIcon';
 import ChevronDoubleRightIcon from '@pingux/mdi-react/ChevronDoubleRightIcon';
@@ -53,51 +53,62 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     prevButtonProps = _useCalendar.prevButtonProps,
     nextButtonProps = _useCalendar.nextButtonProps,
     title = _useCalendar.title;
-
-  /**
-   * Grabs the currently displayed date for yearly navigation.
-   */
-
-  var _useState = useState(),
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    currentDate = _useState2[0],
-    setCurrentDate = _useState2[1];
-  var todayDate = useMemo(function () {
-    setCurrentDate(state.visibleRange.start);
-  }, [state.visibleRange.start]);
+    yearChangeDirection = _useState2[0],
+    setYearChangeDirection = _useState2[1];
+  var previousYearRef = useRef(null);
+  var nextYearRef = useRef(null);
   var nav = {
     NEXT: 'next',
     PREVIOUS: 'previous'
   };
 
-  /**
-   * Function handles the navigation to previous and next year
-   * based on the currently displayed date.
-   */
+  // after updating visible year, reapplies focus to corresponding year buttons
+  useEffect(function () {
+    if (yearChangeDirection === nav.NEXT) {
+      nextYearRef.current.focus();
+    }
+    if (yearChangeDirection === nav.PREVIOUS) {
+      previousYearRef.current.focus();
+    }
+    setYearChangeDirection(null);
+  }, [nav.NEXT, nav.PREVIOUS, yearChangeDirection]);
 
-  var handleYearSelection = useCallback(function (navigation) {
-    var tempValue;
+  // update visible year
+  var handleYearSelection = function handleYearSelection(navigation) {
     if (navigation === nav.PREVIOUS) {
-      tempValue = currentDate.subtract({
+      var previousYear = state.focusedDate.subtract({
         years: 1
       });
-    } else if (navigation === nav.NEXT) {
-      tempValue = currentDate.add({
+      state.setFocusedDate(previousYear);
+    }
+    if (navigation === nav.NEXT) {
+      var nextYear = state.focusedDate.add({
         years: 1
       });
+      state.setFocusedDate(nextYear);
     }
-    state.setFocusedDate(tempValue);
-    setCurrentDate(tempValue);
-  }, [currentDate, state, todayDate]);
+    setYearChangeDirection(navigation);
+  };
+  var renderTitle = ___EmotionJSX(Text, {
+    variant: "itemTitle",
+    role: "heading",
+    "aria-level": "3",
+    fontWeight: 3
+  }, title);
   return ___EmotionJSX(Box, _extends({}, calendarProps, {
     ref: calenderRef,
     variant: "calendar.calendarContainer"
-  }), ___EmotionJSX(Box, {
+  }), ___EmotionJSX(VisuallyHidden, {
+    "aria-live": "assertive"
+  }, ___EmotionJSX(Text, null, title)), ___EmotionJSX(Box, {
     className: "header",
     isRow: true,
     variant: "calendar.calendarHeader",
     verticalAlign: "middle"
   }, ___EmotionJSX(IconButton, {
+    ref: previousYearRef,
     onPress: function onPress() {
       return handleYearSelection(nav.PREVIOUS);
     },
@@ -118,12 +129,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
     title: {
       name: 'Chevron Left Icon'
     }
-  })), ___EmotionJSX(VisuallyHidden, null, ___EmotionJSX(Text, null, calendarProps['aria-label'])), ___EmotionJSX(Text, {
-    variant: "itemTitle",
-    role: "heading",
-    "aria-level": "3",
-    fontWeight: 3
-  }, title), ___EmotionJSX(IconButton, _extends({}, nextButtonProps, {
+  })), renderTitle, ___EmotionJSX(IconButton, _extends({}, nextButtonProps, {
     "aria-label": "Next month navigation"
   }), ___EmotionJSX(Icon, {
     icon: ChevronRightIcon,
@@ -132,6 +138,7 @@ var Calendar = /*#__PURE__*/forwardRef(function (props, ref) {
       name: 'Chevron Right Icon'
     }
   })), ___EmotionJSX(IconButton, {
+    ref: nextYearRef,
     onPress: function onPress() {
       return handleYearSelection(nav.NEXT);
     },

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -67,7 +67,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     searchValue = _useState2[0],
     setSearchValue = _useState2[1];
-  var _useState3 = useState([]),
+  var _useState3 = useState([selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.key]),
     _useState4 = _slicedToArray(_useState3, 2),
     selectedKeys = _useState4[0],
     setSelectedKeys = _useState4[1];

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -9,10 +9,10 @@ import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, 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 _context7, _context8; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context7 = ownKeys(Object(source), !0)).call(_context7, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context8 = ownKeys(Object(source))).call(_context8, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
-import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _indexOfInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/index-of";
@@ -196,7 +196,9 @@ export var DefaultClosed = function DefaultClosed(args) {
   });
 };
 export var WithSections = function WithSections() {
-  var _context;
+  var _context, _context2;
+  var selectedSectionIndex = 0;
+  var selectedOptionIndex = 0;
   var _useState5 = useState(environmentsWithSections),
     _useState6 = _slicedToArray(_useState5, 2),
     environments = _useState6[0],
@@ -205,38 +207,39 @@ export var WithSections = function WithSections() {
     _useState8 = _slicedToArray(_useState7, 2),
     filteredOptionsNumber = _useState8[0],
     setFilteredOptionsNumber = _useState8[1];
-  var _useState9 = useState(environmentsWithSections[0].options[0]),
+  var _useState9 = useState(environmentsWithSections[selectedSectionIndex].options[selectedOptionIndex]),
     _useState10 = _slicedToArray(_useState9, 2),
     selectedEnvironment = _useState10[0],
     setSelectedEnvironment = _useState10[1];
+  var selectedKey = _concatInstanceProperty(_context = "".concat(environmentsWithSections[selectedSectionIndex].key, "-")).call(_context, selectedEnvironment.name);
   var recentEnvShown = 3;
   var totalOptionsNumber = _reduceInstanceProperty(environmentsWithSections).call(environmentsWithSections, function (acc, section) {
     return acc + section.options.length;
   }, 0);
-  var optionsCountMessage = filteredOptionsNumber === totalOptionsNumber ? "".concat(totalOptionsNumber, " options in total") : _concatInstanceProperty(_context = "".concat(filteredOptionsNumber, " of ")).call(_context, totalOptionsNumber, " options");
+  var optionsCountMessage = filteredOptionsNumber === totalOptionsNumber ? "".concat(totalOptionsNumber, " options in total") : _concatInstanceProperty(_context2 = "".concat(filteredOptionsNumber, " of ")).call(_context2, totalOptionsNumber, " options");
   var getUpdatedRecentEnvs = function getUpdatedRecentEnvs(envObj, prevEnvs) {
-    var _context4;
+    var _context5;
     var envName = envObj.name;
     var isDuplicate = _filterInstanceProperty(prevEnvs).call(prevEnvs, function (prevEnv) {
       return prevEnv.name === envName;
     }).length > 0;
     if (isDuplicate) {
-      var _context2;
-      return _concatInstanceProperty(_context2 = [_objectSpread({}, envObj)]).call(_context2, _filterInstanceProperty(prevEnvs).call(prevEnvs, function (prevEnv) {
+      var _context3;
+      return _concatInstanceProperty(_context3 = [_objectSpread({}, envObj)]).call(_context3, _filterInstanceProperty(prevEnvs).call(prevEnvs, function (prevEnv) {
         return prevEnv.name !== envName;
       }));
     }
     if (prevEnvs.length >= recentEnvShown) {
-      var _context3;
-      return _concatInstanceProperty(_context3 = [_objectSpread({}, envObj)]).call(_context3, _sliceInstanceProperty(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
+      var _context4;
+      return _concatInstanceProperty(_context4 = [_objectSpread({}, envObj)]).call(_context4, _sliceInstanceProperty(prevEnvs).call(prevEnvs, 0, recentEnvShown - 1));
     }
-    return _concatInstanceProperty(_context4 = [_objectSpread({}, envObj)]).call(_context4, prevEnvs);
+    return _concatInstanceProperty(_context5 = [_objectSpread({}, envObj)]).call(_context5, prevEnvs);
   };
   var findEnvObj = function findEnvObj(envName, envSectionName) {
-    var _context5;
-    return _findInstanceProperty(_context5 = _findInstanceProperty(environments).call(environments, function (section) {
+    var _context6;
+    return _findInstanceProperty(_context6 = _findInstanceProperty(environments).call(environments, function (section) {
       return section.name === envSectionName;
-    }).options).call(_context5, function (option) {
+    }).options).call(_context6, function (option) {
       return option.name === envName;
     });
   };
@@ -260,7 +263,7 @@ export var WithSections = function WithSections() {
   };
   var envNode = ___EmotionJSX(Box, {
     isRow: true,
-    key: selectedEnvironment.name
+    key: selectedKey
   }, ___EmotionJSX(Text, {
     color: "inherit"
   }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Badge, {
@@ -285,12 +288,12 @@ export var WithSections = function WithSections() {
       title: sectionName,
       items: sectionOptions
     }, function (_ref6) {
-      var _context6;
+      var _context7;
       var itemName = _ref6.name,
         itemOptions = _ref6.options,
         isSandbox = _ref6.isSandbox;
       return ___EmotionJSX(Item, {
-        key: _concatInstanceProperty(_context6 = "".concat(sectionName, "-")).call(_context6, itemName),
+        key: _concatInstanceProperty(_context7 = "".concat(sectionName, "-")).call(_context7, itemName),
         childItems: itemOptions,
         textValue: itemName
       }, ___EmotionJSX(Box, {

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -344,4 +344,17 @@ test('should reflect the selection change when env is clicked', function () {
   });
   userEvent.click(screen.getByText(itemsWithSections[1].options[1].name));
   expect(onSelectionChangeMock).toHaveBeenNthCalledWith(1, _concatInstanceProperty(_context4 = "".concat(itemsWithSections[1].name, "-")).call(_context4, itemsWithSections[1].options[1].name));
+});
+test('should indicate selected item on first render', function () {
+  var selectedItem = items[0].name;
+  var envNode = ___EmotionJSX(Item, {
+    key: selectedItem
+  }, selectedItem);
+  getComponent({
+    isDefaultOpen: true,
+    selectedItem: envNode
+  });
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).toHaveLength(3);
+  expect(screen.getByText(selectedItem)).toHaveClass('is-selected');
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.16.0-alpha.1",
+  "version": "2.16.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",