@pingux/astro 2.221.6-alpha.0 → 2.234.0-alpha.0

package/lib/cjs/components/AccordionGridGroup/AccordionGrid.styles.d.ts

@@ -0,0 +1,50 @@
+declare const _default: {
+    header: {
+        cursor: string;
+        lineHeight: string;
+        pl: string;
+        outline: string;
+        display: string;
+        justifyContent: string;
+        flexShrink: number;
+        wordBreak: string;
+        whiteSpace: string;
+        bg: string;
+        flexGrow: number;
+        fontWeight: number;
+        border: string;
+        '&.is-focused': {
+            zIndex: string;
+            outline: string;
+            outlineColor: string;
+            outlineOffset: string;
+        };
+        minHeight: string;
+        '&.is-hovered': {
+            backgroundColor: string;
+        };
+        '&.is-pressed': {
+            color: string;
+            '& div > div > div > span': {
+                color: string;
+            };
+        };
+    };
+    body: {
+        display: string;
+        pl: string;
+        width: string;
+        '&.is-selected': {
+            display: string;
+        };
+        ':focus': {
+            outline: string;
+        };
+    };
+    item: {
+        ':focus': {
+            outline: string;
+        };
+    };
+};
+export default _default;

package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { AccordionGridGroupProps } from '../../types';
+export declare const collectionTypes: {
+    ITEM: string;
+    LOADER: string;
+    PLACEHOLDER: string;
+};
+interface AccordionGridGroupFC {
+    <T extends object>(props: AccordionGridGroupProps<T> & React.RefAttributes<HTMLElement>): React.ReactElement | null;
+    displayName?: string;
+    defaultProps?: Partial<AccordionGridGroupProps> | undefined;
+}
+declare const AccordionGridGroup: AccordionGridGroupFC;
+export default AccordionGridGroup;

package/lib/cjs/components/AccordionGridGroup/AccordionGridGroup.js

@@ -25,10 +25,8 @@ var _grid = require("@react-aria/grid");
 var _i18n = require("@react-aria/i18n");
 var _grid2 = require("@react-stately/grid");
 var _list = require("@react-stately/list");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AccordionGridContext = require("../../context/AccordionGridContext");
 var _useDevelopmentWarning = _interopRequireDefault(require("../../hooks/useDevelopmentWarning"));
-var _isIterable = require("../../utils/devUtils/props/isIterable");
 var _AccordionGridItem = _interopRequireDefault(require("../AccordionGridItem"));
 var _Box = _interopRequireDefault(require("../Box"));
 var _react2 = require("@emotion/react");
@@ -45,7 +43,7 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   var disabledKeys = props.disabledKeys,
     containerProps = props.containerProps,
     navigationMode = props.navigationMode;
-  var accordionGridRef = (0, _react.useRef)();
+  var accordionGridRef = (0, _react.useRef)(null);
 
   /* istanbul ignore next */
   (0, _react.useImperativeHandle)(ref, function () {
@@ -102,6 +100,10 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     collection: gridCollection,
     selectionMode: 'multiple'
   }));
+  /* @react-aria/grid's `useGrid` resolves a newer `@react-stately/grid` than the direct
+   * dependency (its `GridState.disabledKeys` uses @react-types/shared's `Key`, which omits
+   * `bigint`), so the state needs a widening cast at this single call site. */
+  var gridState = state;
 
   // Required to enable header selection
   state.selectionManager.allowsCellSelection = true;
@@ -117,7 +119,7 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
   }, [state, accordionGridRef, direction, collator]);
   var _useGrid = (0, _grid.useGrid)(_objectSpread(_objectSpread({}, props), {}, {
       keyboardDelegate: keyboardDelegate
-    }), state, accordionGridRef),
+    }), gridState, accordionGridRef),
     gridProps = _useGrid.gridProps;
   delete gridProps.onMouseDown;
   if (navigationMode === 'native') {
@@ -140,58 +142,6 @@ var AccordionGridGroup = /*#__PURE__*/(0, _react.forwardRef)(function (props, re
     }, item.props), item.props.children);
   })));
 });
-AccordionGridGroup.propTypes = {
-  /**
-   * The currently selected keys in the collection (uncontrolled).
-   *
-   * `selectedKeys="all"` can be used to select every key.
-   */
-  defaultSelectedKeys: _isIterable.isIterableProp,
-  /**
-   * The currently selected keys in the collection (controlled).
-   *
-   * `selectedKeys="all"` can be used to select every key.
-   */
-  selectedKeys: _isIterable.isIterableProp,
-  /**
-    * Callback function that fires when the selected key changes.
-    *
-    * `(selectedKeys: Set) => void`
-   */
-  onSelectionChange: _propTypes["default"].func,
-  /**
-   * Defines a type of navigation mode.
-   * "native" - navigation via "tab" key.
-   *  "arrows" - navigation via arrow keys.
-   */
-  navigationMode: _propTypes["default"].string,
-  /**
-   * The item keys that are disabled. These items cannot be selected, focused, or otherwise
-   * interacted with.
-   */
-  disabledKeys: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].object])),
-  /** The list of ListView items (controlled). */
-  items: _isIterable.isIterableProp,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: _propTypes["default"].string,
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: _propTypes["default"].shape({}),
-  /** The props object is directly spread into the accordion header element.
-   * Utilize the `customUpArrow` & `customDownArrow` keys to incorporate custom Up and Down arrows.
-   * */
-  headerProps: _propTypes["default"].shape({}),
-  /** Defines a string value that labels the current element. */
-  'aria-label': _propTypes["default"].string,
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby': _propTypes["default"].string,
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby': _propTypes["default"].string,
-  /**
-   * Identifies the element (or elements) that provide a detailed, extended description for
-   * the object.
-  */
-  'aria-details': _propTypes["default"].string
-};
 AccordionGridGroup.defaultProps = {
   'aria-label': 'accordion'
 };

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

@@ -20,6 +20,7 @@ exports.Default = Default;
 exports.OnyxDefault = OnyxDefault;
 exports["default"] = void 0;
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+var _set = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
@@ -452,7 +453,7 @@ function OnyxDefault() {
   );
 }
 function Controlled() {
-  var _useState = (0, _react.useState)(['Client']),
+  var _useState = (0, _react.useState)(new _set["default"](['Client'])),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];

package/lib/cjs/components/AccordionGridGroup/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AccordionGridGroup';

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.d.ts

@@ -0,0 +1,3 @@
+import { AccordionGridItemProps } from '../../types';
+declare const AccordionGridItem: (props: AccordionGridItemProps) => import("react/jsx-runtime").JSX.Element;
+export default AccordionGridItem;

package/lib/cjs/components/AccordionGridItem/AccordionGridItem.js

@@ -10,14 +10,13 @@ _Object$defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _toArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _grid = require("@react-aria/grid");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AccordionGridContext = require("../../context/AccordionGridContext");
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
@@ -27,7 +26,6 @@ var _react2 = require("@emotion/react");
 var _excluded = ["item", "headerProps", "bodyProps", "children", "className", "navigationMode"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var AccordionGridItem = function AccordionGridItem(props) {
-  var _context;
   var item = props.item,
     headerProps = props.headerProps,
     bodyProps = props.bodyProps,
@@ -40,9 +38,13 @@ var AccordionGridItem = function AccordionGridItem(props) {
     header = _React$Children$toArr2[0],
     body = _React$Children$toArr2[1],
     otherChildren = (0, _slice["default"])(_React$Children$toArr2).call(_React$Children$toArr2, 2);
-  var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[0];
-  var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
-    state = _useAccordionGridCont.state;
+  var cellNode = (0, _from["default"])(item.childNodes)[0];
+  var _ref = (0, _AccordionGridContext.useAccordionGridContext)(),
+    state = _ref.state;
+  /* @react-aria/grid's hooks resolve a newer `@react-stately/grid` than the direct
+   * dependency (their `GridState.disabledKeys` uses @react-types/shared's `Key`, which
+   * omits `bigint`), so the state needs a widening cast before the hook calls. */
+  var gridState = state;
 
   // Treat first cell as a row,
   // fixes focus and keyboard interactions
@@ -57,12 +59,12 @@ var AccordionGridItem = function AccordionGridItem(props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSelected, isRowSelected, item.key]);
-  var rowRef = (0, _react.useRef)();
-  var cellRef = (0, _react.useRef)();
-  var cellBodyRef = (0, _react.useRef)();
+  var rowRef = (0, _react.useRef)(null);
+  var cellRef = (0, _react.useRef)(null);
+  var cellBodyRef = (0, _react.useRef)(null);
   var _useGridRow = (0, _grid.useGridRow)({
       node: item
-    }, state, rowRef),
+    }, gridState, rowRef),
     rowProps = _useGridRow.rowProps;
   var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
       isSelected: isSelected,
@@ -97,14 +99,4 @@ var AccordionGridItem = function AccordionGridItem(props) {
     navigationMode: navigationMode
   }, bodyProps), body), otherChildren);
 };
-AccordionGridItem.propTypes = {
-  headerProps: _propTypes["default"].shape({}),
-  bodyProps: _propTypes["default"].shape({}),
-  item: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    rendered: _propTypes["default"].node,
-    childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
-  }),
-  navigationMode: _propTypes["default"].string
-};
 var _default = exports["default"] = AccordionGridItem;

package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AccordionGridItemBodyProps } from '../../types';
+declare const AccordionGridItemBody: React.ForwardRefExoticComponent<AccordionGridItemBodyProps & React.RefAttributes<HTMLElement>>;
+export default AccordionGridItemBody;

package/lib/cjs/components/AccordionGridItem/AccordionGridItemBody.js

@@ -9,14 +9,13 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _grid = require("@react-aria/grid");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AccordionGridContext = require("../../context/AccordionGridContext");
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
@@ -24,21 +23,24 @@ var _react2 = require("@emotion/react");
 var _excluded = ["item", "className", "children", "isSelected", "navigationMode"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context;
   var item = props.item,
     className = props.className,
     children = props.children,
     isSelected = props.isSelected,
     navigationMode = props.navigationMode,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
-    state = _useAccordionGridCont.state;
-  var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[1];
+  var _ref = (0, _AccordionGridContext.useAccordionGridContext)(),
+    state = _ref.state;
+  /* @react-aria/grid's hooks resolve a newer `@react-stately/grid` than the direct
+   * dependency (their `GridState.disabledKeys` uses @react-types/shared's `Key`, which
+   * omits `bigint`), so the state needs a widening cast before the hook calls. */
+  var gridState = state;
+  var cellNode = (0, _from["default"])(item.childNodes)[1];
   var _useGridCell = (0, _grid.useGridCell)({
       node: cellNode,
       focusMode: 'cell',
       shouldSelectOnPressUp: true
-    }, state, ref),
+    }, gridState, ref),
     gridCellProps = _useGridCell.gridCellProps;
 
   /* istanbul ignore next */
@@ -74,12 +76,4 @@ var AccordionGridItemBody = /*#__PURE__*/(0, _react.forwardRef)(function (props,
     "aria-label": ariaLabel
   }, others), children);
 });
-AccordionGridItemBody.propTypes = {
-  isSelected: _propTypes["default"].bool,
-  'aria-label': _propTypes["default"].string,
-  item: _propTypes["default"].shape({
-    childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({}))
-  }),
-  navigationMode: _propTypes["default"].string
-};
 var _default = exports["default"] = AccordionGridItemBody;

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AccordionGridItemHeaderProps } from '../../types';
+declare const AccordionGridItemHeader: React.ForwardRefExoticComponent<AccordionGridItemHeaderProps & React.RefAttributes<HTMLElement>>;
+export default AccordionGridItemHeader;

package/lib/cjs/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -9,14 +9,13 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactAria = require("react-aria");
 var _grid = require("@react-aria/grid");
 var _interactions = require("@react-aria/interactions");
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _AccordionGridContext = require("../../context/AccordionGridContext");
 var _hooks = require("../../hooks");
 var _Box = _interopRequireDefault(require("../Box"));
@@ -25,7 +24,6 @@ var _react2 = require("@emotion/react");
 var _excluded = ["item", "className", "children", "isSelected", "hasCaret", "navigationMode", "customDownArrow", "customUpArrow"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _context;
   var item = props.item,
     className = props.className,
     children = props.children,
@@ -35,9 +33,13 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     customDownArrow = props.customDownArrow,
     customUpArrow = props.customUpArrow,
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useAccordionGridCont = (0, _AccordionGridContext.useAccordionGridContext)(),
-    state = _useAccordionGridCont.state;
-  var cellRef = (0, _react.useRef)();
+  var _ref = (0, _AccordionGridContext.useAccordionGridContext)(),
+    state = _ref.state;
+  /* @react-aria/grid's hooks resolve a newer `@react-stately/grid` than the direct
+   * dependency (their `GridState.disabledKeys` uses @react-types/shared's `Key`, which
+   * omits `bigint`), so the state needs a widening cast before the hook calls. */
+  var gridState = state;
+  var cellRef = (0, _react.useRef)(null);
   var _useGetTheme = (0, _hooks.useGetTheme)(),
     icons = _useGetTheme.icons,
     isOnyx = _useGetTheme.themeState.isOnyx;
@@ -48,12 +50,12 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   (0, _react.useImperativeHandle)(ref, function () {
     return cellRef.current;
   });
-  var cellNode = (0, _concat["default"])(_context = []).call(_context, item.childNodes)[0];
+  var cellNode = (0, _from["default"])(item.childNodes)[0];
   var _useGridCell = (0, _grid.useGridCell)({
       node: cellNode,
       focusMode: 'cell',
       shouldSelectOnPressUp: true
-    }, state, cellRef),
+    }, gridState, cellRef),
     gridCellProps = _useGridCell.gridCellProps;
   var _useHover = (0, _interactions.useHover)({}),
     hoverProps = _useHover.hoverProps,
@@ -126,19 +128,4 @@ var AccordionGridItemHeader = /*#__PURE__*/(0, _react.forwardRef)(function (prop
 AccordionGridItemHeader.defaultProps = {
   hasCaret: true
 };
-AccordionGridItemHeader.propTypes = {
-  'aria-label': _propTypes["default"].string,
-  isSelected: _propTypes["default"].bool,
-  hasCaret: _propTypes["default"].bool,
-  customDownArrow: _propTypes["default"].node,
-  customUpArrow: _propTypes["default"].node,
-  item: _propTypes["default"].shape({
-    key: _propTypes["default"].string,
-    childNodes: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
-    props: _propTypes["default"].shape({
-      isPressed: _propTypes["default"].bool
-    })
-  }),
-  navigationMode: _propTypes["default"].string
-};
 var _default = exports["default"] = AccordionGridItemHeader;

package/lib/cjs/components/AccordionGridItem/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AccordionGridItem';

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

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequ
 _Object$defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.LabelWithBadge = exports.DisabledState = exports.DifferentLevels = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = exports.AccordionWithSlot = void 0;
+exports["default"] = exports.UncontrolledExpanded = exports.Multiple = exports.LabelWithBadge = exports.DisabledState = exports.DifferentLevels = exports.Default = exports.CustomPresentation = exports.ControlledExpanded = exports.AccordionWithSlot = exports.AccordionWithHintText = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
@@ -291,4 +291,15 @@ var AccordionWithSlot = exports.AccordionWithSlot = function AccordionWithSlot()
       postHeading: (0, _react2.jsx)(_index.HelpHint, null, " Text of the popover right here...")
     }
   }, (0, _react2.jsx)(_index.Text, null, "Render me!")));
+};
+var AccordionWithHintText = exports.AccordionWithHintText = function AccordionWithHintText() {
+  return (0, _react2.jsx)(_index.AccordionGroup, {
+    labelHeadingTag: "h3"
+  }, (0, _react2.jsx)(_index.Item, {
+    key: "accordionKey",
+    textValue: "accordionKey",
+    label: "Accordion Label",
+    "data-id": "accordionItem",
+    hintText: "Additional information about this accordion section."
+  }, (0, _react2.jsx)(_index.Text, null, "Render me!")));
 };

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

@@ -191,9 +191,19 @@ var getComponentWithSlot = function getComponentWithSlot(props) {
     textValue: "Duplicate",
     "data-id": "first",
     label: "Accordion item",
-    slots: props.slots
+    slots: props.slots,
+    hintText: props.hintText,
+    hintTextProps: props.hintTextProps
   }, (0, _react2.jsx)(_Text["default"], null, "Render me!"))));
 };
+var getComponentWithHint = function getComponentWithHint() {
+  return (0, _testWrapper.render)((0, _react2.jsx)(_["default"], defaultProps, (0, _react2.jsx)(_reactStately.Item, {
+    key: "hint",
+    textValue: "Hint item",
+    label: "Hint item",
+    hintText: "Hint content"
+  }, (0, _react2.jsx)(_Text["default"], null, "Hint body"))));
+};
 test('button press uses callback', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
   var onPress, buttons, selectedItem;
   return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -544,4 +554,36 @@ test('renders Accordion component with slot', function () {
     }
   });
   expect(_testWrapper.screen.getByTestId('helpHint')).toBeInTheDocument();
+});
+test('renders hintText outside the accordion button', function () {
+  getComponentWithHint();
+  var button = _testWrapper.screen.getByRole('button', {
+    name: 'Hint item'
+  });
+  var hintButton = _testWrapper.screen.getByTestId('help-hint__button');
+  expect(hintButton).toBeInTheDocument();
+  expect(button).not.toContainElement(hintButton);
+});
+test('supports hintTextProps and postHeading independently', function () {
+  getComponentWithSlot({
+    slots: {
+      postHeading: (0, _react2.jsx)("span", {
+        "data-testid": "post-heading"
+      }, "Post heading")
+    },
+    hintText: 'Hint content',
+    hintTextProps: {
+      iconButtonProps: {
+        'aria-label': 'section help'
+      },
+      popoverProps: {
+        isOpen: true
+      }
+    }
+  });
+  expect(_testWrapper.screen.getByRole('button', {
+    name: 'section help'
+  })).toBeInTheDocument();
+  expect(_testWrapper.screen.getByText('Hint content')).toBeInTheDocument();
+  expect(_testWrapper.screen.getByTestId('post-heading')).toBeInTheDocument();
 });

package/lib/cjs/components/AccordionItem/AccordionItem.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Node } from '@react-types/shared';
+import type { HelpHintProps } from '../../types';
 export declare const validHeadingTags: string[];
 interface AccordionItemProps<T> {
     item: Node<T>;
@@ -9,6 +10,8 @@ interface AccordionItemProps<T> {
     'data-id'?: string;
     children: React.ReactNode;
     buttonProps?: object;
+    hintText?: React.ReactNode;
+    hintTextProps?: HelpHintProps;
     slots?: {
         postHeading: React.ReactNode;
     };

package/lib/cjs/components/AccordionItem/AccordionItem.js

@@ -22,7 +22,7 @@ var _AccordionContext = require("../../context/AccordionContext");
 var _hooks = require("../../hooks");
 var _index = require("../../index");
 var _react2 = require("@emotion/react");
-var _excluded = ["containerProps", "buttonProps", "regionProps"];
+var _excluded = ["containerProps", "buttonProps", "hintText", "hintTextProps", "regionProps"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var validHeadingTags = exports.validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
 var AccordionItem = function AccordionItem(props) {
@@ -35,6 +35,8 @@ var AccordionItem = function AccordionItem(props) {
     containerProps = _item$props$container === void 0 ? {} : _item$props$container,
     _item$props$buttonPro = _item$props.buttonProps,
     buttonProps = _item$props$buttonPro === void 0 ? {} : _item$props$buttonPro,
+    hintText = _item$props.hintText,
+    hintTextProps = _item$props.hintTextProps,
     _item$props$regionPro = _item$props.regionProps,
     regionProps = _item$props$regionPro === void 0 ? {} : _item$props$regionPro,
     others = (0, _objectWithoutProperties2["default"])(_item$props, _excluded);
@@ -112,7 +114,7 @@ var AccordionItem = function AccordionItem(props) {
     title: {
       name: ''
     }
-  }))), ((_item$props$slots = item.props.slots) === null || _item$props$slots === void 0 ? void 0 : _item$props$slots.postHeading) && ((_item$props$slots2 = item.props.slots) === null || _item$props$slots2 === void 0 ? void 0 : _item$props$slots2.postHeading)), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
+  }))), hintText && (0, _react2.jsx)(_index.HelpHint, hintTextProps, hintText), ((_item$props$slots = item.props.slots) === null || _item$props$slots === void 0 ? void 0 : _item$props$slots.postHeading) && ((_item$props$slots2 = item.props.slots) === null || _item$props$slots2 === void 0 ? void 0 : _item$props$slots2.postHeading)), isOpen && (0, _react2.jsx)(_index.Box, (0, _extends2["default"])({
     variant: "accordion.body"
   }, accordionRegionProps, regionProps, {
     className: itemClasses

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

@@ -31,7 +31,7 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 var _ariaAttributes = require("../../utils/docUtils/ariaAttributes");
 var _react2 = require("@emotion/react");
 var _excluded = ["addButtonLabel", "addButtonProps", "defaultValue", "fieldControlWrapperProps", "value", "label", "helperText", "status", "onAdd", "onChange", "onDelete", "renderField", "labelProps", "maxSize", "maxSizeText", "slots"],
-  _excluded2 = ["id", "onComponentRender", "fieldValue"];
+  _excluded2 = ["id", "onComponentRender", "value", "fieldValue"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof _WeakMap) var r = new _WeakMap(), n = new _WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = _Object$defineProperty) && _Object$getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty2(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context3, _context4; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context3 = ownKeys(Object(t), !0)).call(_context3, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context4 = ownKeys(Object(t))).call(_context4, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -56,6 +56,15 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     others = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var valueRef = _react["default"].useRef(value);
   valueRef.current = value;
+
+  // The helper and maximum feedback texts live outside the field list, so the
+  // list needs explicit aria-describedby/labelledby references to them (part
+  // of the UXE-8465 helper-text acceptance criteria). Aria attributes may
+  // arrive from both the component props and fieldControlWrapperProps, so the
+  // id lists are merged instead of overwritten.
+  var arrayFieldId = _react["default"].useRef((0, _uuid.v4)()).current;
+  var helperTextId = "".concat(arrayFieldId, "-helper");
+  var maxSizeTextId = "".concat(arrayFieldId, "-max-size");
   var onAddRef = _react["default"].useRef(onAdd);
   onAddRef.current = onAdd;
   var onChangeRef = _react["default"].useRef(onChange);
@@ -145,33 +154,41 @@ var ArrayField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     as: "ul",
     pl: "0"
   }, ariaProps, fieldControlWrapperProps), (0, _map["default"])(_context2 = value || fieldValues).call(_context2, function (_ref2) {
+    var _ref3;
     var id = _ref2.id,
       onComponentRender = _ref2.onComponentRender,
-      fieldValue = _ref2.fieldValue,
+      rowValue = _ref2.value,
+      legacyFieldValue = _ref2.fieldValue,
       otherFieldProps = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
+    var normalizedValue = (_ref3 = rowValue !== null && rowValue !== void 0 ? rowValue : legacyFieldValue) !== null && _ref3 !== void 0 ? _ref3 : '';
     return (0, _react2.jsx)(_.Box, {
       as: "li",
-      mb: "xs",
+      variant: "arrayField.listItem",
       key: id
-    }, renderedItem(id, fieldValue, otherFieldProps, onComponentRender, raLabelProps === null || raLabelProps === void 0 ? void 0 : raLabelProps.id));
-  })), helperText && (0, _react2.jsx)(_.FieldHelperText, {
-    status: status
+    }, renderedItem(id, normalizedValue, otherFieldProps, onComponentRender, raLabelProps === null || raLabelProps === void 0 ? void 0 : raLabelProps.id));
+  })), (helperText || isLimitReached) && (0, _react2.jsx)(_.Box, {
+    variant: "arrayField.helperTextContainer"
+  }, helperText && (0, _react2.jsx)(_.FieldHelperText, {
+    status: status,
+    id: helperTextId
   }, helperText), isLimitReached && (0, _react2.jsx)(_.FieldHelperText, {
-    status: _statuses["default"].DEFAULT
-  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), shouldShowBottomBar && (0, _react2.jsx)(_.Box, {
+    status: _statuses["default"].DEFAULT,
+    id: maxSizeTextId
+  }, maxSizeText || "Maximum ".concat(maxSize, " items."))), shouldShowBottomBar && (0, _react2.jsx)(_.Box, {
     isRow: true,
-    gap: "md"
+    gap: "md",
+    variant: "arrayField.bottomBar"
   }, (slots === null || slots === void 0 ? void 0 : slots.left) && (slots === null || slots === void 0 ? void 0 : slots.left), !isLimitReached && (0, _react2.jsx)(_.Button, (0, _extends2["default"])({
     "aria-label": "Add field",
     variant: "link",
     onPress: onFieldAdd,
     sx: {
-      width: 'fit-content',
-      mt: 'xs'
+      variant: 'variants.arrayField.addButton'
     }
   }, addButtonProps), (0, _react2.jsx)(_.Text, {
-    variant: "label",
-    color: "active"
+    sx: {
+      variant: 'variants.arrayField.addButtonText'
+    }
   }, addButtonLabel)), (slots === null || slots === void 0 ? void 0 : slots.right) && (slots === null || slots === void 0 ? void 0 : slots.right)));
 });
 ArrayField.defaultProps = {

package/lib/cjs/components/ArrayField/ArrayField.mdx

@@ -16,7 +16,11 @@ ArrayField should:
 
 ### Required Components
 
-This component requires the appropriate field component ([TextField](./?path=/story/form-textfield--default) or [SelectField](./?path=/story/form-selectfield--default)) and the ArrayFieldDeleteButton. 
+This component requires the appropriate field component ([TextField](./?path=/story/form-textfield--default) or [SelectField](./?path=/story/form-selectfield--default)) and the ArrayFieldDeleteButton.
+
+The `label` and `helperText` props describe the array as a whole. `helperText` is array-level guidance, not helper text for an individual child field. ArrayField renders the helper and maximum-size message after the child rows and before the Add Field control.
+
+The examples use compact rows without repeated visible child labels. Every child control still has an explicit accessible name, and every delete control has a name that describes its action. When supplying a custom `renderField` or `onComponentRender`, preserve an accessible name with `aria-label`, `aria-labelledby`, or a visible label even when omitting a repeated label for layout.
 
 ### Accessibility