@pingux/astro 2.16.0-alpha.2 → 2.16.0-alpha.4

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/cjs/recipes/AttributeMapping.stories.js

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Edit = exports.DisplayWithError = exports.DisplayRow = exports.Display = void 0;
+exports["default"] = exports.EditRow = exports.Edit = exports.DisplayWithError = exports.DisplayRow = exports.Display = void 0;
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
 var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -244,7 +244,7 @@ var Edit = function Edit() {
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
     isSubmitted = _useState4[0],
-    submitFields = _useState4[1];
+    setIsSubmitted = _useState4[1];
   var addRow = function addRow() {
     var _context;
     var newRow = {
@@ -313,7 +313,7 @@ var Edit = function Edit() {
       updateRow: updateRow,
       key: "row container ".concat(row.name),
       isSubmitted: isSubmitted,
-      submitFields: submitFields
+      setIsSubmitted: setIsSubmitted
     }));
   })))));
 };
@@ -379,17 +379,20 @@ var DisplayRow = function DisplayRow(props) {
   }));
 };
 exports.DisplayRow = DisplayRow;
-var EditRow = /*#__PURE__*/(0, _react.memo)(function (props) {
+var EditRow = function EditRow(props) {
   var isDisabled = props.isDisabled,
     isNewRow = props.isNewRow,
     index = props.index,
     textValue = props.textValue,
     inputValue = props.inputValue,
-    updateRow = props.updateRow,
-    removeRow = props.removeRow,
+    _props$removeRow = props.removeRow,
+    removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow,
+    _props$updateRow = props.updateRow,
+    updateRow = _props$updateRow === void 0 ? function () {} : _props$updateRow,
     areRowsValid = props.areRowsValid,
     isSubmitted = props.isSubmitted,
-    submitFields = props.submitFields;
+    _props$setIsSubmitted = props.setIsSubmitted,
+    setIsSubmitted = _props$setIsSubmitted === void 0 ? function () {} : _props$setIsSubmitted;
   var items = [{
     name: 'Aardvark',
     id: '1'
@@ -404,11 +407,11 @@ var EditRow = /*#__PURE__*/(0, _react.memo)(function (props) {
   var textFieldRef = (0, _react.useRef)();
   var setTextValue = function setTextValue(value) {
     updateRow(index, value, 'textValue');
-    submitFields(false);
+    setIsSubmitted(false);
   };
   var setInputValue = function setInputValue(value) {
     updateRow(index, value, 'inputValue');
-    submitFields(false);
+    setIsSubmitted(false);
   };
   (0, _react.useEffect)(function () {
     if (isNewRow) {
@@ -512,4 +515,5 @@ var EditRow = /*#__PURE__*/(0, _react.memo)(function (props) {
       name: 'Delete Icon'
     }
   })))));
-});
+};
+exports.EditRow = EditRow;

package/lib/cjs/recipes/Slider.stories.js

@@ -22,6 +22,7 @@ var _reactStately = require("react-stately");
 var _i18n = require("@react-aria/i18n");
 var _Buttons = require("../components/Button/Buttons.styles");
 var _index = require("../index");
+var _figmaLinks = require("../utils/designUtils/figmaLinks.js");
 var _react2 = require("@emotion/react");
 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 _context6, _context7; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context6 = ownKeys(Object(source), !0)).call(_context6, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context7 = ownKeys(Object(source))).call(_context7, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; } /* eslint-disable no-nested-ternary */
@@ -105,6 +106,12 @@ var Default = function Default() {
   })));
 };
 exports.Default = Default;
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: _figmaLinks.FIGMA_LINKS.slider["default"]
+  }
+};
 var Slider = function Slider(props) {
   var trackRef = _react["default"].useRef(null);
   var numberFormatter = (0, _i18n.useNumberFormatter)(props.formatOptions);

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -93,6 +93,9 @@ var FIGMA_LINKS = {
   },
   stepper: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=7523-27301&t=rLZVlRDdR1JhehkH-0'
+  },
+  slider: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43112%3A1773&mode=dev'
   }
 };
 exports.FIGMA_LINKS = FIGMA_LINKS;

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/lib/recipes/AttributeMapping.stories.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { memo, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import AddIcon from '@pingux/mdi-react/AddIcon';
 import AlertCircleIcon from '@pingux/mdi-react/AlertCircleIcon';
 import CogsIcon from '@pingux/mdi-react/CogsIcon';
@@ -228,7 +228,7 @@ export var Edit = function Edit() {
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     isSubmitted = _useState4[0],
-    submitFields = _useState4[1];
+    setIsSubmitted = _useState4[1];
   var addRow = function addRow() {
     var _context;
     var newRow = {
@@ -297,7 +297,7 @@ export var Edit = function Edit() {
       updateRow: updateRow,
       key: "row container ".concat(row.name),
       isSubmitted: isSubmitted,
-      submitFields: submitFields
+      setIsSubmitted: setIsSubmitted
     }));
   })))));
 };
@@ -361,17 +361,20 @@ export var DisplayRow = function DisplayRow(props) {
     sx: sx.badge
   }));
 };
-var EditRow = /*#__PURE__*/memo(function (props) {
+export var EditRow = function EditRow(props) {
   var isDisabled = props.isDisabled,
     isNewRow = props.isNewRow,
     index = props.index,
     textValue = props.textValue,
     inputValue = props.inputValue,
-    updateRow = props.updateRow,
-    removeRow = props.removeRow,
+    _props$removeRow = props.removeRow,
+    removeRow = _props$removeRow === void 0 ? function () {} : _props$removeRow,
+    _props$updateRow = props.updateRow,
+    updateRow = _props$updateRow === void 0 ? function () {} : _props$updateRow,
     areRowsValid = props.areRowsValid,
     isSubmitted = props.isSubmitted,
-    submitFields = props.submitFields;
+    _props$setIsSubmitted = props.setIsSubmitted,
+    setIsSubmitted = _props$setIsSubmitted === void 0 ? function () {} : _props$setIsSubmitted;
   var items = [{
     name: 'Aardvark',
     id: '1'
@@ -386,11 +389,11 @@ var EditRow = /*#__PURE__*/memo(function (props) {
   var textFieldRef = useRef();
   var setTextValue = function setTextValue(value) {
     updateRow(index, value, 'textValue');
-    submitFields(false);
+    setIsSubmitted(false);
   };
   var setInputValue = function setInputValue(value) {
     updateRow(index, value, 'inputValue');
-    submitFields(false);
+    setIsSubmitted(false);
   };
   useEffect(function () {
     if (isNewRow) {
@@ -494,4 +497,4 @@ var EditRow = /*#__PURE__*/memo(function (props) {
       name: 'Delete Icon'
     }
   })))));
-});
+};

package/lib/recipes/Slider.stories.js

@@ -18,6 +18,7 @@ import { useSliderState } from 'react-stately';
 import { useNumberFormatter } from '@react-aria/i18n';
 import { defaultFocus } from '../components/Button/Buttons.styles';
 import { Box } from '../index';
+import { FIGMA_LINKS } from '../utils/designUtils/figmaLinks.js';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Recipes/Slider'
@@ -97,6 +98,12 @@ export var Default = function Default() {
     step: 1
   })));
 };
+Default.parameters = {
+  design: {
+    type: 'figma',
+    url: FIGMA_LINKS.slider["default"]
+  }
+};
 var Slider = function Slider(props) {
   var trackRef = React.useRef(null);
   var numberFormatter = useNumberFormatter(props.formatOptions);

package/lib/utils/designUtils/figmaLinks.js

@@ -86,5 +86,8 @@ export var FIGMA_LINKS = {
   },
   stepper: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=7523-27301&t=rLZVlRDdR1JhehkH-0'
+  },
+  slider: {
+    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=43112%3A1773&mode=dev'
   }
 };

package/package.json

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