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

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

@@ -122,9 +122,9 @@ var ArrayField = function ArrayField(props) {
     raLabelProps = _useLabel.labelProps;
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
   var isDisabled = (value || fieldValues).length === 1;
-  var renderedItem = (0, _react.useCallback)(function (id, fieldValue, otherFieldProps, onComponentRender) {
+  var renderedItem = (0, _react.useCallback)(function (id, fieldValue, otherFieldProps, onComponentRender, labelId) {
     if (onComponentRender) {
-      return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
+      return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps);
     }
     return renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
   }, [onFieldValueChange, onFieldDelete, renderField, isDisabled]);
@@ -145,7 +145,7 @@ var ArrayField = function ArrayField(props) {
       as: "li",
       mb: "xs",
       key: id
-    }, renderedItem(id, fieldValue, otherFieldProps, onComponentRender));
+    }, renderedItem(id, fieldValue, otherFieldProps, onComponentRender, raLabelProps === null || raLabelProps === void 0 ? void 0 : raLabelProps.id));
   })), helperText && (0, _react2.jsx)(_.FieldHelperText, {
     status: status
   }, helperText), isLimitReached && (0, _react2.jsx)(_.FieldHelperText, {

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

@@ -121,7 +121,8 @@ var Uncontrolled = function Uncontrolled(_ref) {
   }, args));
 };
 exports.Uncontrolled = Uncontrolled;
-var Controlled = function Controlled() {
+var Controlled = function Controlled(_ref2) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref2), _ref2));
   var defaultDataSelectField = [{
     id: (0, _uuid.v4)(),
     fieldValue: 'red',
@@ -140,7 +141,11 @@ var Controlled = function Controlled() {
             }
           })
         }
-      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
+      }, otherFieldProps, {
+        listBoxProps: {
+          'aria-labelledby': otherFieldProps
+        }
+      }), (0, _react2.jsx)(_index.Item, {
         key: "red"
       }, "Red"), (0, _react2.jsx)(_index.Item, {
         key: "blue"
@@ -166,7 +171,11 @@ var Controlled = function Controlled() {
             }
           })
         }
-      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
+      }, otherFieldProps, {
+        listBoxProps: {
+          'aria-labelledby': otherFieldProps
+        }
+      }), (0, _react2.jsx)(_index.Item, {
         key: "orange"
       }, "Orange"), (0, _react2.jsx)(_index.Item, {
         key: "purple"
@@ -193,7 +202,11 @@ var Controlled = function Controlled() {
             }
           })
         }
-      }, otherFieldProps), (0, _react2.jsx)(_index.Item, {
+      }, otherFieldProps, {
+        listBoxProps: {
+          'aria-labelledby': otherFieldProps
+        }
+      }), (0, _react2.jsx)(_index.Item, {
         key: "blue"
       }, "Blue"), (0, _react2.jsx)(_index.Item, {
         key: "teal"
@@ -217,8 +230,8 @@ var Controlled = function Controlled() {
   };
   var handleOnDelete = function handleOnDelete(fieldId) {
     setFieldValues(function (oldValues) {
-      return (0, _filter["default"])(oldValues).call(oldValues, function (_ref2) {
-        var id = _ref2.id;
+      return (0, _filter["default"])(oldValues).call(oldValues, function (_ref3) {
+        var id = _ref3.id;
         return id !== fieldId;
       });
     });
@@ -231,12 +244,13 @@ var Controlled = function Controlled() {
     onDelete: handleOnDelete,
     sx: {
       width: '400px'
-    }
+    },
+    label: args.label
   });
 };
 exports.Controlled = Controlled;
-var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref3) {
-  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref3), _ref3));
+var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref4) {
+  var args = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(_ref4), _ref4));
   return (0, _react2.jsx)(_index.ArrayField, (0, _extends2["default"])({
     defaultValue: defaultData,
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {

package/lib/cjs/components/HelpHint/HelpHint.js

@@ -74,11 +74,11 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     focusProps = _useFocusRing.focusProps,
     isFocusVisible = _useFocusRing.isFocusVisible;
   var _useHover = (0, _interactions.useHover)({}),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
+    overlayHoverProps = _useHover.hoverProps,
+    isOverlayHovered = _useHover.isHovered;
   var _useHover2 = (0, _interactions.useHover)({}),
-    overlayHoverProps = _useHover2.hoverProps,
-    isOverlayHovered = _useHover2.isHovered;
+    hoverProps = _useHover2.hoverProps,
+    isTriggerHovered = _useHover2.isHovered;
   var popoverState = (0, _reactStately.useOverlayTriggerState)({});
   var open = popoverState.open,
     close = popoverState.close,
@@ -98,15 +98,16 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   // but keep it open if the trigger or overlay are hovered again before it closes.
   (0, _react.useEffect)(function () {
     var timeout;
-    if (isHovered || isOverlayHovered || isFocusWithinOverlay) {
+    var isHovered = isTriggerHovered || isOverlayHovered;
+    if (isHovered || isFocusWithinOverlay) {
       open();
-    } else {
+    } else if (!isFocusWithinOverlay && !isFocusVisible && !isHovered) {
       timeout = (0, _setTimeout2["default"])(close, closeDelay || 1000);
     }
     return function () {
       clearTimeout(timeout);
     };
-  }, [isHovered, isOverlayHovered, isFocusWithinOverlay, open, close, closeDelay]);
+  }, [isFocusWithinOverlay, isFocusVisible, isOverlayHovered, isTriggerHovered]);
   (0, _react.useEffect)(function () {
     if (isOpen) {
       return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.setAttribute('aria-expanded', 'true');
@@ -170,7 +171,8 @@ var HelpHint = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     restoreFocus: true,
     autoFocus: isFocusVisible
   }, (0, _react2.jsx)(_.Box, {
-    variant: "helpHint.popoverContainer"
+    variant: "helpHint.popoverContainer",
+    role: "status"
   }, _safariAgent.isSafari ? addIsSafariCompatiblePropToLinkChildren(children) : children))));
 });
 HelpHint.propTypes = {

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

@@ -87,7 +87,7 @@ test('keeps the popover open if the popover is hovered', /*#__PURE__*/(0, _async
     }
   }, _callee2);
 })));
-test('popover without focusable children should open onPress and disappear in 1000ms', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+test('popover without focusable children should open onPress and disappear in 1000ms after blur', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
   var helpHintButton;
   return _regeneratorRuntime().wrap(function _callee3$(_context3) {
     while (1) switch (_context3.prev = _context3.next) {
@@ -99,20 +99,21 @@ test('popover without focusable children should open onPress and disappear in 10
         _userEvent["default"].type(helpHintButton, '{enter}', {
           skipClick: true
         });
-        _context3.next = 7;
+        _userEvent["default"].tab();
+        _context3.next = 8;
         return (0, _testWrapper.waitFor)(function () {
           expect(_testWrapper.screen.queryByRole('presentation')).toBeInTheDocument();
         }, {
           timeout: 500
         });
-      case 7:
-        _context3.next = 9;
+      case 8:
+        _context3.next = 10;
         return (0, _testWrapper.waitFor)(function () {
           expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument();
         }, {
           timeout: 1100
         });
-      case 9:
+      case 10:
       case "end":
         return _context3.stop();
     }

package/lib/cjs/hooks/useSelectField/useSelectField.js

@@ -59,7 +59,8 @@ var useSelectField = function useSelectField(props, ref) {
     onOpenChange = props.onOpenChange,
     onSelectionChange = props.onSelectionChange,
     controlProps = props.controlProps,
-    scrollBoxProps = props.scrollBoxProps;
+    scrollBoxProps = props.scrollBoxProps,
+    listBoxProps = props.listBoxProps;
   // We use falsy booleans as defaults, but React Aria has this as true by default so we need to
   // negate this.
   var shouldFlip = !isNotFlippable;
@@ -194,7 +195,7 @@ var useSelectField = function useSelectField(props, ref) {
     variant: "listBox.selectField",
     isLoading: isLoadingMore,
     onLoadMore: onLoadMore
-  }, menuProps)), (0, _react2.jsx)(_reactAria.DismissButton, {
+  }, menuProps, listBoxProps)), (0, _react2.jsx)(_reactAria.DismissButton, {
     onDismiss: function onDismiss() {
       return state.close();
     }

package/lib/components/ArrayField/ArrayField.js

@@ -110,9 +110,9 @@ var ArrayField = function ArrayField(props) {
     raLabelProps = _useLabel.labelProps;
   var isLimitReached = !!maxSize && (value || fieldValues).length >= maxSize;
   var isDisabled = (value || fieldValues).length === 1;
-  var renderedItem = useCallback(function (id, fieldValue, otherFieldProps, onComponentRender) {
+  var renderedItem = useCallback(function (id, fieldValue, otherFieldProps, onComponentRender, labelId) {
     if (onComponentRender) {
-      return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
+      return onComponentRender(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, labelId, otherFieldProps);
     }
     return renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps);
   }, [onFieldValueChange, onFieldDelete, renderField, isDisabled]);
@@ -133,7 +133,7 @@ var ArrayField = function ArrayField(props) {
       as: "li",
       mb: "xs",
       key: id
-    }, renderedItem(id, fieldValue, otherFieldProps, onComponentRender));
+    }, renderedItem(id, fieldValue, otherFieldProps, onComponentRender, raLabelProps === null || raLabelProps === void 0 ? void 0 : raLabelProps.id));
   })), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText), isLimitReached && ___EmotionJSX(FieldHelperText, {

package/lib/components/ArrayField/ArrayField.stories.js

@@ -111,7 +111,8 @@ export var Uncontrolled = function Uncontrolled(_ref) {
     }
   }, args));
 };
-export var Controlled = function Controlled() {
+export var Controlled = function Controlled(_ref2) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
   var defaultDataSelectField = [{
     id: uuid(),
     fieldValue: 'red',
@@ -130,7 +131,11 @@ export var Controlled = function Controlled() {
             }
           })
         }
-      }, otherFieldProps), ___EmotionJSX(Item, {
+      }, otherFieldProps, {
+        listBoxProps: {
+          'aria-labelledby': otherFieldProps
+        }
+      }), ___EmotionJSX(Item, {
         key: "red"
       }, "Red"), ___EmotionJSX(Item, {
         key: "blue"
@@ -156,7 +161,11 @@ export var Controlled = function Controlled() {
             }
           })
         }
-      }, otherFieldProps), ___EmotionJSX(Item, {
+      }, otherFieldProps, {
+        listBoxProps: {
+          'aria-labelledby': otherFieldProps
+        }
+      }), ___EmotionJSX(Item, {
         key: "orange"
       }, "Orange"), ___EmotionJSX(Item, {
         key: "purple"
@@ -183,7 +192,11 @@ export var Controlled = function Controlled() {
             }
           })
         }
-      }, otherFieldProps), ___EmotionJSX(Item, {
+      }, otherFieldProps, {
+        listBoxProps: {
+          'aria-labelledby': otherFieldProps
+        }
+      }), ___EmotionJSX(Item, {
         key: "blue"
       }, "Blue"), ___EmotionJSX(Item, {
         key: "teal"
@@ -207,8 +220,8 @@ export var Controlled = function Controlled() {
   };
   var handleOnDelete = function handleOnDelete(fieldId) {
     setFieldValues(function (oldValues) {
-      return _filterInstanceProperty(oldValues).call(oldValues, function (_ref2) {
-        var id = _ref2.id;
+      return _filterInstanceProperty(oldValues).call(oldValues, function (_ref3) {
+        var id = _ref3.id;
         return id !== fieldId;
       });
     });
@@ -221,11 +234,12 @@ export var Controlled = function Controlled() {
     onDelete: handleOnDelete,
     sx: {
       width: '400px'
-    }
+    },
+    label: args.label
   });
 };
-export var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref3) {
-  var args = _extends({}, (_objectDestructuringEmpty(_ref3), _ref3));
+export var WithLimitedItemsNumber = function WithLimitedItemsNumber(_ref4) {
+  var args = _extends({}, (_objectDestructuringEmpty(_ref4), _ref4));
   return ___EmotionJSX(ArrayField, _extends({
     defaultValue: defaultData,
     renderField: function renderField(id, fieldValue, onFieldValueChange, onFieldDelete, isDisabled, otherFieldProps) {

package/lib/components/HelpHint/HelpHint.js

@@ -61,11 +61,11 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     focusProps = _useFocusRing.focusProps,
     isFocusVisible = _useFocusRing.isFocusVisible;
   var _useHover = useHover({}),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
+    overlayHoverProps = _useHover.hoverProps,
+    isOverlayHovered = _useHover.isHovered;
   var _useHover2 = useHover({}),
-    overlayHoverProps = _useHover2.hoverProps,
-    isOverlayHovered = _useHover2.isHovered;
+    hoverProps = _useHover2.hoverProps,
+    isTriggerHovered = _useHover2.isHovered;
   var popoverState = useOverlayTriggerState({});
   var open = popoverState.open,
     close = popoverState.close,
@@ -85,15 +85,16 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
   // but keep it open if the trigger or overlay are hovered again before it closes.
   useEffect(function () {
     var timeout;
-    if (isHovered || isOverlayHovered || isFocusWithinOverlay) {
+    var isHovered = isTriggerHovered || isOverlayHovered;
+    if (isHovered || isFocusWithinOverlay) {
       open();
-    } else {
+    } else if (!isFocusWithinOverlay && !isFocusVisible && !isHovered) {
       timeout = _setTimeout(close, closeDelay || 1000);
     }
     return function () {
       clearTimeout(timeout);
     };
-  }, [isHovered, isOverlayHovered, isFocusWithinOverlay, open, close, closeDelay]);
+  }, [isFocusWithinOverlay, isFocusVisible, isOverlayHovered, isTriggerHovered]);
   useEffect(function () {
     if (isOpen) {
       return triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current.setAttribute('aria-expanded', 'true');
@@ -157,7 +158,8 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
     restoreFocus: true,
     autoFocus: isFocusVisible
   }, ___EmotionJSX(Box, {
-    variant: "helpHint.popoverContainer"
+    variant: "helpHint.popoverContainer",
+    role: "status"
   }, isSafari ? addIsSafariCompatiblePropToLinkChildren(children) : children))));
 });
 HelpHint.propTypes = {

package/lib/components/HelpHint/HelpHint.test.js

@@ -84,7 +84,7 @@ test('keeps the popover open if the popover is hovered', /*#__PURE__*/_asyncToGe
     }
   }, _callee2);
 })));
-test('popover without focusable children should open onPress and disappear in 1000ms', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+test('popover without focusable children should open onPress and disappear in 1000ms after blur', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
   var helpHintButton;
   return _regeneratorRuntime().wrap(function _callee3$(_context3) {
     while (1) switch (_context3.prev = _context3.next) {
@@ -96,20 +96,21 @@ test('popover without focusable children should open onPress and disappear in 10
         userEvent.type(helpHintButton, '{enter}', {
           skipClick: true
         });
-        _context3.next = 7;
+        userEvent.tab();
+        _context3.next = 8;
         return waitFor(function () {
           expect(screen.queryByRole('presentation')).toBeInTheDocument();
         }, {
           timeout: 500
         });
-      case 7:
-        _context3.next = 9;
+      case 8:
+        _context3.next = 10;
         return waitFor(function () {
           expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
         }, {
           timeout: 1100
         });
-      case 9:
+      case 10:
       case "end":
         return _context3.stop();
     }

package/lib/hooks/useSelectField/useSelectField.js

@@ -48,7 +48,8 @@ var useSelectField = function useSelectField(props, ref) {
     onOpenChange = props.onOpenChange,
     onSelectionChange = props.onSelectionChange,
     controlProps = props.controlProps,
-    scrollBoxProps = props.scrollBoxProps;
+    scrollBoxProps = props.scrollBoxProps,
+    listBoxProps = props.listBoxProps;
   // We use falsy booleans as defaults, but React Aria has this as true by default so we need to
   // negate this.
   var shouldFlip = !isNotFlippable;
@@ -183,7 +184,7 @@ var useSelectField = function useSelectField(props, ref) {
     variant: "listBox.selectField",
     isLoading: isLoadingMore,
     onLoadMore: onLoadMore
-  }, menuProps)), ___EmotionJSX(DismissButton, {
+  }, menuProps, listBoxProps)), ___EmotionJSX(DismissButton, {
     onDismiss: function onDismiss() {
       return state.close();
     }

package/package.json

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