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

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/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/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.1",
+  "version": "2.27.0-alpha.3",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",