@pingux/astro 1.21.1 → 1.22.0-alpha.2

package/lib/cjs/components/ComboBoxField/ComboBoxField.js

@@ -345,6 +345,12 @@ ComboBoxField.propTypes = {
   /** Where the ComboBox menu opens relative to its trigger. */
   direction: _propTypes["default"].oneOf(['top', 'right', 'bottom', 'left']),
 
+  /** Text rendered below the input. */
+  helperText: _propTypes["default"].node,
+
+  /** Determines the input status indicator and helper text styling. */
+  status: _propTypes["default"].oneOf(['default', 'success', 'warning', 'error']),
+
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey: _propTypes["default"].string,
 

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/cjs/components/NumberField/NumberField.js

@@ -174,6 +174,7 @@ var NumberField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     }
   };
 
+  inputProps['aria-roledescription'] = null;
   return (0, _react2.jsx)(_index.Box, fieldContainerProps, (0, _react2.jsx)(_index.Label, (0, _utils.mergeProps)(fieldLabelProps, labelProps)), (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "numberField.noDefaultArrows"
   }, groupProps), (0, _react2.jsx)(_index.Box, {

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

@@ -144,6 +144,7 @@ var ControlledState = function ControlledState() {
       setValue = _useState2[1];
 
   return (0, _react2.jsx)(_NumberField["default"], {
+    label: "Controlled State",
     value: value,
     onChange: setValue
   });

package/lib/cjs/styles/forms/input.js

@@ -81,6 +81,9 @@ var input = _objectSpread(_objectSpread({}, _text.text.inputValue), {}, {
   },
   '&::-ms-reveal, &::-ms-clear': {
     display: 'none'
+  },
+  '&.is-error': {
+    borderColor: 'critical.bright'
   }
 }); // Example variant input
 

package/lib/components/ComboBoxField/ComboBoxField.js

@@ -299,6 +299,12 @@ ComboBoxField.propTypes = {
   /** Where the ComboBox menu opens relative to its trigger. */
   direction: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 
+  /** Text rendered below the input. */
+  helperText: PropTypes.node,
+
+  /** Determines the input status indicator and helper text styling. */
+  status: PropTypes.oneOf(['default', 'success', 'warning', 'error']),
+
   /** The initial selected key in the collection (uncontrolled). */
   defaultSelectedKey: PropTypes.string,
 

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/lib/components/NumberField/NumberField.js

@@ -133,6 +133,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     }
   };
 
+  inputProps['aria-roledescription'] = null;
   return ___EmotionJSX(Box, fieldContainerProps, ___EmotionJSX(Label, mergeProps(fieldLabelProps, labelProps)), ___EmotionJSX(Box, _extends({
     variant: "numberField.noDefaultArrows"
   }, groupProps), ___EmotionJSX(Box, {

package/lib/components/NumberField/NumberField.stories.js

@@ -109,6 +109,7 @@ export var ControlledState = function ControlledState() {
       setValue = _useState2[1];
 
   return ___EmotionJSX(NumberField, {
+    label: "Controlled State",
     value: value,
     onChange: setValue
   });

package/lib/styles/forms/input.js

@@ -61,6 +61,9 @@ export var input = _objectSpread(_objectSpread({}, text.inputValue), {}, {
   },
   '&::-ms-reveal, &::-ms-clear': {
     display: 'none'
+  },
+  '&.is-error': {
+    borderColor: 'critical.bright'
   }
 }); // Example variant input
 

package/package.json

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