@pingux/astro 1.22.0-alpha.1 → 1.23.0-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.22.0](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.21.1...@pingux/astro@1.22.0) (2022-07-06)
+
+
+### Bug Fixes
+
+* [UIP-5501] NumberField accessibility violation ([f64e54b](https://gitlab.corp.pingidentity.com/ux/pingux/commit/f64e54b80708bda1bcd85c2fff77d4e8c7160330))
+
+
+### Features
+
+* [UIP-5524] Add red border to error inputs ([a748a63](https://gitlab.corp.pingidentity.com/ux/pingux/commit/a748a63108f3d2dbb786e60d2ed11ebd2ee1c422))
+* [UIP-5541] Environmental breadcrumbs popover state ([3d1307a](https://gitlab.corp.pingidentity.com/ux/pingux/commit/3d1307a2f5d26563b2d25b3e6e5d1981817f1ad5))
+
+
+
+
+
 ## [1.21.1](https://gitlab.corp.pingidentity.com/ux/pingux/compare/@pingux/astro@1.21.0...@pingux/astro@1.21.1) (2022-06-28)
 
 

package/lib/cjs/components/ArrayField/ArrayField.js

@@ -68,6 +68,8 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 
 var _isValidPositiveInt = _interopRequireDefault(require("../../utils/devUtils/props/isValidPositiveInt"));
 
+var _ArrayFieldItem = _interopRequireDefault(require("./ArrayFieldItem"));
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["addButtonLabel", "defaultValue", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText"],
@@ -102,6 +104,22 @@ var ArrayField = function ArrayField(props) {
       maxSize = props.maxSize,
       maxSizeText = props.maxSizeText,
       others = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  var valueRef = _react["default"].useRef(value);
+
+  valueRef.current = value;
+
+  var onAddRef = _react["default"].useRef(onAdd);
+
+  onAddRef.current = onAdd;
+
+  var onChangeRef = _react["default"].useRef(onChange);
+
+  onChangeRef.current = onChange;
+
+  var onDeleteRef = _react["default"].useRef(onDelete);
+
+  onDeleteRef.current = onDelete;
   var isControlled = value !== undefined;
   var createEmptyField = (0, _react.useCallback)(function () {
     return {
@@ -134,16 +152,16 @@ var ArrayField = function ArrayField(props) {
     }
 
     if (isControlled) {
-      onChange(mapArrayFieldWithNewValue(value, tempValue, fieldId));
+      onChangeRef.current(mapArrayFieldWithNewValue(valueRef.current, tempValue, fieldId));
     } else {
       setFieldValues(function (oldValues) {
         return mapArrayFieldWithNewValue(oldValues, tempValue, fieldId);
       });
     }
-  }, [isControlled, mapArrayFieldWithNewValue, onChange, value]);
+  }, [isControlled, mapArrayFieldWithNewValue]);
   var onFieldDelete = (0, _react.useCallback)(function (fieldId) {
     if (isControlled) {
-      onDelete(fieldId);
+      onDeleteRef.current(fieldId);
     } else {
       setFieldValues(function (oldValues) {
         return (0, _filter["default"])(oldValues).call(oldValues, function (_ref) {
@@ -152,10 +170,10 @@ var ArrayField = function ArrayField(props) {
         });
       });
     }
-  }, [isControlled, onDelete]);
+  }, [isControlled]);
   var onFieldAdd = (0, _react.useCallback)(function () {
-    if (onAdd) {
-      return onAdd();
+    if (onAddRef.current) {
+      return onAddRef.current();
     }
 
     return setFieldValues(function (oldValues) {
@@ -163,7 +181,7 @@ var ArrayField = function ArrayField(props) {
 
       return (0, _concat["default"])(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
-  }, [createEmptyField, onAdd]);
+  }, [createEmptyField]);
 
   var _useLabel = (0, _label.useLabel)(_objectSpread({}, props)),
       raLabelProps = _useLabel.labelProps;
@@ -180,11 +198,16 @@ var ArrayField = function ArrayField(props) {
         fieldValue = _ref2.fieldValue,
         otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
     var isDisabled = (value || fieldValues).length === 1;
-    return (0, _react2.jsx)(_Box["default"], {
-      as: "li",
-      mb: "xs",
-      key: id
-    }, onComponentRender ? onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) : renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps));
+    return (0, _react2.jsx)(_ArrayFieldItem["default"], (0, _extends2["default"])({
+      key: id,
+      id: id,
+      isDisabled: isDisabled,
+      fieldValue: fieldValue,
+      onComponentRender: onComponentRender,
+      onFieldValueChange: onFieldValueChange,
+      onFieldDelete: onFieldDelete,
+      renderField: renderField
+    }, otherFieldProps));
   })), helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
     status: status
   }, helperText), isLimitReached && (0, _react2.jsx)(_FieldHelperText["default"], {

package/lib/cjs/components/ArrayField/ArrayFieldItem.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["id", "onComponentRender", "fieldValue", "isDisabled", "onFieldDelete", "onFieldValueChange", "renderField"];
+
+var ArrayFieldItem = /*#__PURE__*/_react["default"].memo(function (_ref) {
+  var id = _ref.id,
+      onComponentRender = _ref.onComponentRender,
+      fieldValue = _ref.fieldValue,
+      isDisabled = _ref.isDisabled,
+      onFieldDelete = _ref.onFieldDelete,
+      onFieldValueChange = _ref.onFieldValueChange,
+      renderField = _ref.renderField,
+      otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return (0, _react2.jsx)(_Box["default"], {
+    as: "li",
+    mb: "xs"
+  }, onComponentRender ? onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) : renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps));
+});
+
+ArrayFieldItem.propTypes = {
+  id: _propTypes["default"].string,
+  onComponentRender: _propTypes["default"].func,
+  fieldValue: _propTypes["default"].string,
+  isDisabled: _propTypes["default"].bool,
+  onFieldDelete: _propTypes["default"].func,
+  onFieldValueChange: _propTypes["default"].func,
+  renderField: _propTypes["default"].func
+};
+var _default = ArrayFieldItem;
+exports["default"] = _default;

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

@@ -74,7 +74,7 @@ var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "disabledKeys", "emptySearchText", "items", "itemsFilter", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
 
 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); }
 
@@ -89,8 +89,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   var children = props.children,
       imperativeDisabledKeys = props.disabledKeys,
       emptySearchText = props.emptySearchText,
+      isDefaultOpen = props.isDefaultOpen,
+      isOpen = props.isOpen,
       items = props.items,
       imperativeItemsFilter = props.itemsFilter,
+      onOpenChange = props.onOpenChange,
       onNamePress = props.onNamePress,
       imperativeOnPopoverClose = props.onPopoverClose,
       imperativeOnPopoverOpen = props.onPopoverOpen,
@@ -155,7 +158,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     });
   };
 
-  var popoverState = (0, _overlays.useOverlayTriggerState)({});
+  var popoverState = (0, _overlays.useOverlayTriggerState)({
+    defaultOpen: isDefaultOpen,
+    isOpen: isOpen,
+    onOpenChange: onOpenChange
+  });
   var handlePopoverClose = (0, _react.useCallback)(function () {
     if (imperativeOnPopoverClose) {
       imperativeOnPopoverClose();
@@ -355,7 +362,20 @@ EnvironmentBreadcrumb.propTypes = {
   disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].string),
 
   /** Text that will be shown if no search results found. */
-  emptySearchText: _propTypes["default"].string
+  emptySearchText: _propTypes["default"].string,
+
+  /** Sets the default open state of the overlay. */
+  isDefaultOpen: _propTypes["default"].bool,
+
+  /** Whether the overlay is currently open. */
+  isOpen: _propTypes["default"].bool,
+
+  /**
+   * Method that is called when the open state of the menu changes.
+   *
+   * `(isOpen: boolean, overlayTrigger: OverlayTriggerAction) => void`
+   */
+  onOpenChange: _propTypes["default"].func
 };
 EnvironmentBreadcrumb.defaultProps = {
   emptySearchText: 'No Search Result'

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

@@ -26,7 +26,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSections = exports.OrgLevel = exports.Default = void 0;
+exports["default"] = exports.WithSections = exports.OrgLevel = exports.DefaultOpen = exports.Default = exports.ControlledMenu = void 0;
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
@@ -298,4 +298,116 @@ var OrgLevel = function OrgLevel() {
   });
 };
 
-exports.OrgLevel = OrgLevel;
+exports.OrgLevel = OrgLevel;
+
+var DefaultOpen = function DefaultOpen() {
+  var _useState7 = (0, _react.useState)({
+    name: 'Dog',
+    isSandbox: true
+  }),
+      _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
+      selectedEnvironment = _useState8[0],
+      setSelectedEnvironment = _useState8[1];
+
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref5) {
+      var name = _ref5.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange,
+    isDefaultOpen: true
+  }, function (_ref6) {
+    var name = _ref6.name,
+        isSandbox = _ref6.isSandbox;
+    return (0, _react2.jsx)(_index.Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40"
+    }) : null);
+  });
+};
+
+exports.DefaultOpen = DefaultOpen;
+
+var ControlledMenu = function ControlledMenu() {
+  var _useState9 = (0, _react.useState)(false),
+      _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
+      isOpen = _useState10[0],
+      setIsOpen = _useState10[1];
+
+  var _useState11 = (0, _react.useState)({
+    name: 'Shark',
+    isSandbox: true
+  }),
+      _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
+      selectedEnvironment = _useState12[0],
+      setSelectedEnvironment = _useState12[1];
+
+  var envNode = (0, _react2.jsx)(_index.Box, {
+    isRow: true
+  }, (0, _react2.jsx)(_index.Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? (0, _react2.jsx)(_index.Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return (0, _find["default"])(defaultEnvironments).call(defaultEnvironments, function (_ref7) {
+      var name = _ref7.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  return (0, _react2.jsx)(_EnvironmentBreadcrumb["default"], {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange,
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }, function (_ref8) {
+    var name = _ref8.name,
+        isSandbox = _ref8.isSandbox;
+    return (0, _react2.jsx)(_index.Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? (0, _react2.jsx)(_index.Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40"
+    }) : null);
+  });
+};
+
+exports.ControlledMenu = ControlledMenu;

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

@@ -295,4 +295,31 @@ test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerat
       }
     }
   }, _callee2);
-})));
+})));
+test('should be open when isDefaultOpen is true', function () {
+  getComponent({
+    isDefaultOpen: true
+  });
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).not.toHaveLength(3);
+});
+test('should respond to onOpenChange', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange
+  });
+  expect(onOpenChange).not.toHaveBeenCalled();
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(onOpenChange).toHaveBeenNthCalledWith(1, true);
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(onOpenChange).toHaveBeenNthCalledWith(2, false);
+});

package/lib/components/ArrayField/ArrayField.js

@@ -32,6 +32,7 @@ import Text from '../Text';
 import Label from '../Label';
 import statuses from '../../utils/devUtils/constants/statuses';
 import isValidPositiveInt from '../../utils/devUtils/props/isValidPositiveInt';
+import ArrayFieldItem from './ArrayFieldItem';
 /**
  * Displays array collections providing useful functions and
  * optimizations for arrays.
@@ -57,6 +58,14 @@ var ArrayField = function ArrayField(props) {
       maxSizeText = props.maxSizeText,
       others = _objectWithoutProperties(props, _excluded);
 
+  var valueRef = React.useRef(value);
+  valueRef.current = value;
+  var onAddRef = React.useRef(onAdd);
+  onAddRef.current = onAdd;
+  var onChangeRef = React.useRef(onChange);
+  onChangeRef.current = onChange;
+  var onDeleteRef = React.useRef(onDelete);
+  onDeleteRef.current = onDelete;
   var isControlled = value !== undefined;
   var createEmptyField = useCallback(function () {
     return {
@@ -89,16 +98,16 @@ var ArrayField = function ArrayField(props) {
     }
 
     if (isControlled) {
-      onChange(mapArrayFieldWithNewValue(value, tempValue, fieldId));
+      onChangeRef.current(mapArrayFieldWithNewValue(valueRef.current, tempValue, fieldId));
     } else {
       setFieldValues(function (oldValues) {
         return mapArrayFieldWithNewValue(oldValues, tempValue, fieldId);
       });
     }
-  }, [isControlled, mapArrayFieldWithNewValue, onChange, value]);
+  }, [isControlled, mapArrayFieldWithNewValue]);
   var onFieldDelete = useCallback(function (fieldId) {
     if (isControlled) {
-      onDelete(fieldId);
+      onDeleteRef.current(fieldId);
     } else {
       setFieldValues(function (oldValues) {
         return _filterInstanceProperty(oldValues).call(oldValues, function (_ref) {
@@ -107,10 +116,10 @@ var ArrayField = function ArrayField(props) {
         });
       });
     }
-  }, [isControlled, onDelete]);
+  }, [isControlled]);
   var onFieldAdd = useCallback(function () {
-    if (onAdd) {
-      return onAdd();
+    if (onAddRef.current) {
+      return onAddRef.current();
     }
 
     return setFieldValues(function (oldValues) {
@@ -118,7 +127,7 @@ var ArrayField = function ArrayField(props) {
 
       return _concatInstanceProperty(_context = []).call(_context, oldValues, [createEmptyField()]);
     });
-  }, [createEmptyField, onAdd]);
+  }, [createEmptyField]);
 
   var _useLabel = useLabel(_objectSpread({}, props)),
       raLabelProps = _useLabel.labelProps;
@@ -136,11 +145,16 @@ var ArrayField = function ArrayField(props) {
         otherFieldProps = _objectWithoutProperties(_ref2, _excluded2);
 
     var isDisabled = (value || fieldValues).length === 1;
-    return ___EmotionJSX(Box, {
-      as: "li",
-      mb: "xs",
-      key: id
-    }, onComponentRender ? onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) : renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps));
+    return ___EmotionJSX(ArrayFieldItem, _extends({
+      key: id,
+      id: id,
+      isDisabled: isDisabled,
+      fieldValue: fieldValue,
+      onComponentRender: onComponentRender,
+      onFieldValueChange: onFieldValueChange,
+      onFieldDelete: onFieldDelete,
+      renderField: renderField
+    }, otherFieldProps));
   })), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), isLimitReached && ___EmotionJSX(FieldHelperText, {

package/lib/components/ArrayField/ArrayFieldItem.js

@@ -0,0 +1,31 @@
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["id", "onComponentRender", "fieldValue", "isDisabled", "onFieldDelete", "onFieldValueChange", "renderField"];
+import React from 'react';
+import PropTypes from 'prop-types';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var ArrayFieldItem = /*#__PURE__*/React.memo(function (_ref) {
+  var id = _ref.id,
+      onComponentRender = _ref.onComponentRender,
+      fieldValue = _ref.fieldValue,
+      isDisabled = _ref.isDisabled,
+      onFieldDelete = _ref.onFieldDelete,
+      onFieldValueChange = _ref.onFieldValueChange,
+      renderField = _ref.renderField,
+      otherFieldProps = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX(Box, {
+    as: "li",
+    mb: "xs"
+  }, onComponentRender ? onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) : renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps));
+});
+ArrayFieldItem.propTypes = {
+  id: PropTypes.string,
+  onComponentRender: PropTypes.func,
+  fieldValue: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  onFieldDelete: PropTypes.func,
+  onFieldValueChange: PropTypes.func,
+  renderField: PropTypes.func
+};
+export default ArrayFieldItem;

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -12,7 +12,7 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "disabledKeys", "emptySearchText", "items", "itemsFilter", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
+var _excluded = ["children", "disabledKeys", "emptySearchText", "isDefaultOpen", "isOpen", "items", "itemsFilter", "onOpenChange", "onNamePress", "onPopoverClose", "onPopoverOpen", "onSelectionChange", "name", "searchProps", "selectedItem"];
 
 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; }
 
@@ -39,8 +39,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       imperativeDisabledKeys = props.disabledKeys,
       emptySearchText = props.emptySearchText,
+      isDefaultOpen = props.isDefaultOpen,
+      isOpen = props.isOpen,
       items = props.items,
       imperativeItemsFilter = props.itemsFilter,
+      onOpenChange = props.onOpenChange,
       onNamePress = props.onNamePress,
       imperativeOnPopoverClose = props.onPopoverClose,
       imperativeOnPopoverOpen = props.onPopoverOpen,
@@ -103,7 +106,11 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     });
   };
 
-  var popoverState = useOverlayTriggerState({});
+  var popoverState = useOverlayTriggerState({
+    defaultOpen: isDefaultOpen,
+    isOpen: isOpen,
+    onOpenChange: onOpenChange
+  });
   var handlePopoverClose = useCallback(function () {
     if (imperativeOnPopoverClose) {
       imperativeOnPopoverClose();
@@ -303,7 +310,20 @@ EnvironmentBreadcrumb.propTypes = {
   disabledKeys: PropTypes.arrayOf(PropTypes.string),
 
   /** Text that will be shown if no search results found. */
-  emptySearchText: PropTypes.string
+  emptySearchText: PropTypes.string,
+
+  /** Sets the default open state of the overlay. */
+  isDefaultOpen: PropTypes.bool,
+
+  /** Whether the overlay is currently open. */
+  isOpen: PropTypes.bool,
+
+  /**
+   * Method that is called when the open state of the menu changes.
+   *
+   * `(isOpen: boolean, overlayTrigger: OverlayTriggerAction) => void`
+   */
+  onOpenChange: PropTypes.func
 };
 EnvironmentBreadcrumb.defaultProps = {
   emptySearchText: 'No Search Result'

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

@@ -253,4 +253,110 @@ export var OrgLevel = function OrgLevel() {
   return ___EmotionJSX(EnvironmentBreadcrumb, {
     name: "Globochem"
   });
+};
+export var DefaultOpen = function DefaultOpen() {
+  var _useState7 = useState({
+    name: 'Dog',
+    isSandbox: true
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      selectedEnvironment = _useState8[0],
+      setSelectedEnvironment = _useState8[1];
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref5) {
+      var name = _ref5.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  return ___EmotionJSX(EnvironmentBreadcrumb, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange,
+    isDefaultOpen: true
+  }, function (_ref6) {
+    var name = _ref6.name,
+        isSandbox = _ref6.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40"
+    }) : null);
+  });
+};
+export var ControlledMenu = function ControlledMenu() {
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isOpen = _useState10[0],
+      setIsOpen = _useState10[1];
+
+  var _useState11 = useState({
+    name: 'Shark',
+    isSandbox: true
+  }),
+      _useState12 = _slicedToArray(_useState11, 2),
+      selectedEnvironment = _useState12[0],
+      setSelectedEnvironment = _useState12[1];
+
+  var envNode = ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Text, {
+    color: "inherit"
+  }, selectedEnvironment.name), selectedEnvironment.isSandbox ? ___EmotionJSX(Chip, {
+    label: "SANDBOX",
+    variant: "boxes.environmentChip",
+    bg: "neutral.40"
+  }) : null);
+
+  var findEnvObj = function findEnvObj(envName) {
+    return _findInstanceProperty(defaultEnvironments).call(defaultEnvironments, function (_ref7) {
+      var name = _ref7.name;
+      return name === envName;
+    });
+  };
+
+  var handleSelectionChange = function handleSelectionChange(newEnvName) {
+    var envObj = findEnvObj(newEnvName);
+    setSelectedEnvironment(_objectSpread({}, envObj));
+  };
+
+  return ___EmotionJSX(EnvironmentBreadcrumb, {
+    items: defaultEnvironments,
+    name: "Globochem",
+    selectedItem: envNode,
+    onSelectionChange: handleSelectionChange,
+    isOpen: isOpen,
+    onOpenChange: setIsOpen
+  }, function (_ref8) {
+    var name = _ref8.name,
+        isSandbox = _ref8.isSandbox;
+    return ___EmotionJSX(Item, {
+      key: name,
+      textValue: name
+    }, name, isSandbox ? ___EmotionJSX(Chip, {
+      label: "SANDBOX",
+      variant: "boxes.environmentChip",
+      bg: "neutral.40"
+    }) : null);
+  });
 };

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

@@ -250,4 +250,25 @@ test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator(
       }
     }
   }, _callee2);
-})));
+})));
+test('should be open when isDefaultOpen is true', function () {
+  getComponent({
+    isDefaultOpen: true
+  });
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).toHaveLength(3);
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).not.toHaveLength(3);
+});
+test('should respond to onOpenChange', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange
+  });
+  expect(onOpenChange).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(onOpenChange).toHaveBeenNthCalledWith(1, true);
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(onOpenChange).toHaveBeenNthCalledWith(2, false);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "1.22.0-alpha.1",
+  "version": "1.23.0-alpha.0",
   "description": "PingUX themeable React component library",
   "author": "ux-development@pingidentity.com",
   "license": "Apache-2.0",