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

package/lib/cjs/types/item.d.ts

@@ -1,5 +1,6 @@
 import { ElementType, Key, ReactNode } from 'react';
 import type { ItemProps as BaseItemProps } from '@react-types/shared';
+import type { HelpHintProps } from './helpHint';
 import { IconTypeExtended } from './icon';
 import { DOMAttributes, StyleProps } from './shared';
 export type Status = 'default' | 'error' | 'success' | 'warning';
@@ -13,6 +14,10 @@ declare module '@react-types/shared' {
         containerProps?: StyleProps;
         /** Props for the accordion item button element. */
         buttonProps?: StyleProps;
+        /** Contextual help content displayed beside the accordion heading. */
+        hintText?: ReactNode;
+        /** Props passed to the contextual help hint. */
+        hintTextProps?: HelpHintProps;
         /** Props for the tab line element. */
         tabLineProps?: StyleProps;
         /** Whether the item has a separator */

package/lib/cjs/types/listView.d.ts

@@ -16,6 +16,9 @@ export interface ListViewProps<T extends ExampleItemProps> extends Omit<TreeProp
     'aria-label'?: string;
     containerProps?: object;
     sx?: ThemeUICSSObject;
+    /** Optional custom empty state. Called when the list has no items and is
+     *  not loading. Return null to render nothing. */
+    renderEmptyState?: () => ReactNode;
 }
 export interface ExpandableItemChildrenContainerProps {
     children?: ReactNode;

package/lib/cjs/types/table.d.ts

@@ -14,4 +14,6 @@ export type TableRowProps = TableChildrenProp;
 export interface TableCellProps extends StyleProps, DOMAttributes, TestingAttributes {
     /** Determines whether or not the html rendered is a th or td element. */
     isHeading?: boolean;
+    /** Applies disabled styling to the cell. */
+    isDisabled?: boolean;
 }

package/lib/cjs/utils/designUtils/figmaLinks.d.ts

@@ -239,4 +239,7 @@ export declare const FIGMA_LINKS: {
         onyx: string;
         inRockerButton: string;
     };
+    emptyState: {
+        default: string;
+    };
 };

package/lib/cjs/utils/designUtils/figmaLinks.js

@@ -110,7 +110,7 @@ var FIGMA_LINKS = exports.FIGMA_LINKS = {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=24360%3A49754&t=3b86het2R9G2Zyo2-1'
   },
   iconBadge: {
-    "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?type=design&node-id=17916-38366&t=rLZVlRDdR1JhehkH-0'
+    "default": 'https://www.figma.com/design/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=11396-16337'
   },
   iconButton: {
     "default": 'https://www.figma.com/file/bpbEw54gTTcdIiZs4PKK1p/Astro-Specs?node-id=45365-7042&t=pXTSE3YlGbL0X49N-4',
@@ -245,5 +245,8 @@ var FIGMA_LINKS = exports.FIGMA_LINKS = {
   statusIcon: {
     onyx: 'https://www.figma.com/file/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=1516-84&p=f&t=1IrTSMDCAftH6Roq-0',
     inRockerButton: 'https://www.figma.com/file/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=1516-498&t=TcHspIxapoPWqWJC-4'
+  },
+  emptyState: {
+    "default": 'https://www.figma.com/design/XDGxYAgQkcHDVjyu8OGrBv/Onyx-Specs?node-id=8811-16278&p=f&t=VSDkruj7jVEtiNhl-0'
   }
 };

package/lib/components/AccordionGridGroup/AccordionGridGroup.js

@@ -18,10 +18,8 @@ import { GridKeyboardDelegate, useGrid } from '@react-aria/grid';
 import { useCollator, useLocale } from '@react-aria/i18n';
 import { GridCollection, useGridState } from '@react-stately/grid';
 import { useListState } from '@react-stately/list';
-import PropTypes from 'prop-types';
 import { AccordionGridContext } from '../../context/AccordionGridContext';
 import useDevelopmentWarning from '../../hooks/useDevelopmentWarning';
-import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import AccordionGridItem from '../AccordionGridItem';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -35,7 +33,7 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var disabledKeys = props.disabledKeys,
     containerProps = props.containerProps,
     navigationMode = props.navigationMode;
-  var accordionGridRef = useRef();
+  var accordionGridRef = useRef(null);
 
   /* istanbul ignore next */
   useImperativeHandle(ref, function () {
@@ -92,6 +90,10 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     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;
@@ -107,7 +109,7 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [state, accordionGridRef, direction, collator]);
   var _useGrid = useGrid(_objectSpread(_objectSpread({}, props), {}, {
       keyboardDelegate: keyboardDelegate
-    }), state, accordionGridRef),
+    }), gridState, accordionGridRef),
     gridProps = _useGrid.gridProps;
   delete gridProps.onMouseDown;
   if (navigationMode === 'native') {
@@ -130,58 +132,6 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     }, 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: isIterableProp,
-  /**
-   * The currently selected keys in the collection (controlled).
-   *
-   * `selectedKeys="all"` can be used to select every key.
-   */
-  selectedKeys: isIterableProp,
-  /**
-    * Callback function that fires when the selected key changes.
-    *
-    * `(selectedKeys: Set) => void`
-   */
-  onSelectionChange: PropTypes.func,
-  /**
-   * Defines a type of navigation mode.
-   * "native" - navigation via "tab" key.
-   *  "arrows" - navigation via arrow keys.
-   */
-  navigationMode: PropTypes.string,
-  /**
-   * The item keys that are disabled. These items cannot be selected, focused, or otherwise
-   * interacted with.
-   */
-  disabledKeys: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])),
-  /** The list of ListView items (controlled). */
-  items: isIterableProp,
-  /** The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). */
-  id: PropTypes.string,
-  /** Props object that is spread directly into the root (top-level) element. */
-  containerProps: PropTypes.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.shape({}),
-  /** Defines a string value that labels the current element. */
-  'aria-label': PropTypes.string,
-  /** Identifies the element (or elements) that labels the current element. */
-  'aria-labelledby': PropTypes.string,
-  /** Identifies the element (or elements) that describes the object. */
-  'aria-describedby': PropTypes.string,
-  /**
-   * Identifies the element (or elements) that provide a detailed, extended description for
-   * the object.
-  */
-  'aria-details': PropTypes.string
-};
 AccordionGridGroup.defaultProps = {
   'aria-label': 'accordion'
 };

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

@@ -9,6 +9,7 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Set from "@babel/runtime-corejs3/core-js-stable/set";
 function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(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 _context5, _context6; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context5 = ownKeys(Object(t), !0)).call(_context5, function (r) { _defineProperty(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context6 = ownKeys(Object(t))).call(_context6, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React, { useState } from 'react';
@@ -438,7 +439,7 @@ export function OnyxDefault() {
   );
 }
 export function Controlled() {
-  var _useState = useState(['Client']),
+  var _useState = useState(new _Set(['Client'])),
     _useState2 = _slicedToArray(_useState, 2),
     selectedKeys = _useState2[0],
     setSelectedKeys = _useState2[1];

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -3,11 +3,10 @@ import _toArray from "@babel/runtime-corejs3/helpers/esm/toArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["item", "headerProps", "bodyProps", "children", "className", "navigationMode"];
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import React, { useEffect, useRef } from 'react';
 import { mergeProps } from 'react-aria';
 import { useGridRow } from '@react-aria/grid';
-import PropTypes from 'prop-types';
 import { useAccordionGridContext } from '../../context/AccordionGridContext';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
@@ -15,7 +14,6 @@ import AccordionGridItemBody from './AccordionGridItemBody';
 import AccordionGridItemHeader from './AccordionGridItemHeader';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionGridItem = function AccordionGridItem(props) {
-  var _context;
   var item = props.item,
     headerProps = props.headerProps,
     bodyProps = props.bodyProps,
@@ -28,9 +26,13 @@ var AccordionGridItem = function AccordionGridItem(props) {
     header = _React$Children$toArr2[0],
     body = _React$Children$toArr2[1],
     otherChildren = _sliceInstanceProperty(_React$Children$toArr2).call(_React$Children$toArr2, 2);
-  var cellNode = _concatInstanceProperty(_context = []).call(_context, item.childNodes)[0];
-  var _useAccordionGridCont = useAccordionGridContext(),
-    state = _useAccordionGridCont.state;
+  var cellNode = _Array$from(item.childNodes)[0];
+  var _ref = 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
@@ -45,12 +47,12 @@ var AccordionGridItem = function AccordionGridItem(props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSelected, isRowSelected, item.key]);
-  var rowRef = useRef();
-  var cellRef = useRef();
-  var cellBodyRef = useRef();
+  var rowRef = useRef(null);
+  var cellRef = useRef(null);
+  var cellBodyRef = useRef(null);
   var _useGridRow = useGridRow({
       node: item
-    }, state, rowRef),
+    }, gridState, rowRef),
     rowProps = _useGridRow.rowProps;
   var _useStatusClasses = useStatusClasses(className, {
       isSelected: isSelected,
@@ -85,14 +87,4 @@ var AccordionGridItem = function AccordionGridItem(props) {
     navigationMode: navigationMode
   }, bodyProps), body), otherChildren);
 };
-AccordionGridItem.propTypes = {
-  headerProps: PropTypes.shape({}),
-  bodyProps: PropTypes.shape({}),
-  item: PropTypes.shape({
-    key: PropTypes.string,
-    rendered: PropTypes.node,
-    childNodes: PropTypes.arrayOf(PropTypes.shape({}))
-  }),
-  navigationMode: PropTypes.string
-};
 export default AccordionGridItem;

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

@@ -1,32 +1,34 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["item", "className", "children", "isSelected", "navigationMode"];
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import React, { forwardRef } from 'react';
 import { mergeProps } from 'react-aria';
 import { useGridCell } from '@react-aria/grid';
 import { useHover } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { useAccordionGridContext } from '../../context/AccordionGridContext';
 import { useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context;
   var item = props.item,
     className = props.className,
     children = props.children,
     isSelected = props.isSelected,
     navigationMode = props.navigationMode,
     others = _objectWithoutProperties(props, _excluded);
-  var _useAccordionGridCont = useAccordionGridContext(),
-    state = _useAccordionGridCont.state;
-  var cellNode = _concatInstanceProperty(_context = []).call(_context, item.childNodes)[1];
+  var _ref = 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 = _Array$from(item.childNodes)[1];
   var _useGridCell = useGridCell({
       node: cellNode,
       focusMode: 'cell',
       shouldSelectOnPressUp: true
-    }, state, ref),
+    }, gridState, ref),
     gridCellProps = _useGridCell.gridCellProps;
 
   /* istanbul ignore next */
@@ -62,12 +64,4 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
     "aria-label": ariaLabel
   }, others), children);
 });
-AccordionGridItemBody.propTypes = {
-  isSelected: PropTypes.bool,
-  'aria-label': PropTypes.string,
-  item: PropTypes.shape({
-    childNodes: PropTypes.arrayOf(PropTypes.shape({}))
-  }),
-  navigationMode: PropTypes.string
-};
 export default AccordionGridItemBody;

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -1,19 +1,17 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 var _excluded = ["item", "className", "children", "isSelected", "hasCaret", "navigationMode", "customDownArrow", "customUpArrow"];
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useFocusRing } from 'react-aria';
 import { useGridCell } from '@react-aria/grid';
 import { useHover, usePress } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
 import { useAccordionGridContext } from '../../context/AccordionGridContext';
 import { useGetTheme, useStatusClasses } from '../../hooks';
 import Box from '../Box';
 import Icon from '../Icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
-  var _context;
   var item = props.item,
     className = props.className,
     children = props.children,
@@ -23,9 +21,13 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
     customDownArrow = props.customDownArrow,
     customUpArrow = props.customUpArrow,
     others = _objectWithoutProperties(props, _excluded);
-  var _useAccordionGridCont = useAccordionGridContext(),
-    state = _useAccordionGridCont.state;
-  var cellRef = useRef();
+  var _ref = 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 = useRef(null);
   var _useGetTheme = useGetTheme(),
     icons = _useGetTheme.icons,
     isOnyx = _useGetTheme.themeState.isOnyx;
@@ -36,12 +38,12 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return cellRef.current;
   });
-  var cellNode = _concatInstanceProperty(_context = []).call(_context, item.childNodes)[0];
+  var cellNode = _Array$from(item.childNodes)[0];
   var _useGridCell = useGridCell({
       node: cellNode,
       focusMode: 'cell',
       shouldSelectOnPressUp: true
-    }, state, cellRef),
+    }, gridState, cellRef),
     gridCellProps = _useGridCell.gridCellProps;
   var _useHover = useHover({}),
     hoverProps = _useHover.hoverProps,
@@ -114,19 +116,4 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
 AccordionGridItemHeader.defaultProps = {
   hasCaret: true
 };
-AccordionGridItemHeader.propTypes = {
-  'aria-label': PropTypes.string,
-  isSelected: PropTypes.bool,
-  hasCaret: PropTypes.bool,
-  customDownArrow: PropTypes.node,
-  customUpArrow: PropTypes.node,
-  item: PropTypes.shape({
-    key: PropTypes.string,
-    childNodes: PropTypes.arrayOf(PropTypes.shape({})),
-    props: PropTypes.shape({
-      isPressed: PropTypes.bool
-    })
-  }),
-  navigationMode: PropTypes.string
-};
 export default AccordionGridItemHeader;

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

@@ -279,4 +279,15 @@ export var AccordionWithSlot = function AccordionWithSlot() {
       postHeading: ___EmotionJSX(HelpHint, null, " Text of the popover right here...")
     }
   }, ___EmotionJSX(Text, null, "Render me!")));
+};
+export var AccordionWithHintText = function AccordionWithHintText() {
+  return ___EmotionJSX(AccordionGroup, {
+    labelHeadingTag: "h3"
+  }, ___EmotionJSX(Item, {
+    key: "accordionKey",
+    textValue: "accordionKey",
+    label: "Accordion Label",
+    "data-id": "accordionItem",
+    hintText: "Additional information about this accordion section."
+  }, ___EmotionJSX(Text, null, "Render me!")));
 };

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

@@ -188,9 +188,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
   }, ___EmotionJSX(Text, null, "Render me!"))));
 };
+var getComponentWithHint = function getComponentWithHint() {
+  return render(___EmotionJSX(AccordionGroup, defaultProps, ___EmotionJSX(Item, {
+    key: "hint",
+    textValue: "Hint item",
+    label: "Hint item",
+    hintText: "Hint content"
+  }, ___EmotionJSX(Text, null, "Hint body"))));
+};
 test('button press uses callback', /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
   var onPress, buttons, selectedItem;
   return _regeneratorRuntime().wrap(function _callee$(_context) {
@@ -541,4 +551,36 @@ test('renders Accordion component with slot', function () {
     }
   });
   expect(screen.getByTestId('helpHint')).toBeInTheDocument();
+});
+test('renders hintText outside the accordion button', function () {
+  getComponentWithHint();
+  var button = screen.getByRole('button', {
+    name: 'Hint item'
+  });
+  var hintButton = screen.getByTestId('help-hint__button');
+  expect(hintButton).toBeInTheDocument();
+  expect(button).not.toContainElement(hintButton);
+});
+test('supports hintTextProps and postHeading independently', function () {
+  getComponentWithSlot({
+    slots: {
+      postHeading: ___EmotionJSX("span", {
+        "data-testid": "post-heading"
+      }, "Post heading")
+    },
+    hintText: 'Hint content',
+    hintTextProps: {
+      iconButtonProps: {
+        'aria-label': 'section help'
+      },
+      popoverProps: {
+        isOpen: true
+      }
+    }
+  });
+  expect(screen.getByRole('button', {
+    name: 'section help'
+  })).toBeInTheDocument();
+  expect(screen.getByText('Hint content')).toBeInTheDocument();
+  expect(screen.getByTestId('post-heading')).toBeInTheDocument();
 });

package/lib/components/AccordionItem/AccordionItem.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["containerProps", "buttonProps", "regionProps"];
+var _excluded = ["containerProps", "buttonProps", "hintText", "hintTextProps", "regionProps"];
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import React, { useContext, useRef } from 'react';
 import { mergeProps, useButton } from 'react-aria';
@@ -10,7 +10,7 @@ import { useHover } from '@react-aria/interactions';
 import { Button as ThemeUIButton } from 'theme-ui';
 import { AccordionContext } from '../../context/AccordionContext';
 import { useGetTheme, useStatusClasses } from '../../hooks';
-import { Box, Icon, Text } from '../../index';
+import { Box, HelpHint, Icon, Text } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
 var AccordionItem = function AccordionItem(props) {
@@ -23,6 +23,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 = _objectWithoutProperties(_item$props, _excluded);
@@ -100,7 +102,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 && ___EmotionJSX(Box, _extends({
+  }))), hintText && ___EmotionJSX(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 && ___EmotionJSX(Box, _extends({
     variant: "accordion.body"
   }, accordionRegionProps, regionProps, {
     className: itemClasses

package/lib/components/ArrayField/ArrayField.js

@@ -10,7 +10,7 @@ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 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 ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(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) { _defineProperty(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; }
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
@@ -45,6 +45,15 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
     others = _objectWithoutProperties(props, _excluded);
   var valueRef = React.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.useRef(uuid()).current;
+  var helperTextId = "".concat(arrayFieldId, "-helper");
+  var maxSizeTextId = "".concat(arrayFieldId, "-max-size");
   var onAddRef = React.useRef(onAdd);
   onAddRef.current = onAdd;
   var onChangeRef = React.useRef(onChange);
@@ -134,33 +143,41 @@ var ArrayField = /*#__PURE__*/forwardRef(function (props, ref) {
     as: "ul",
     pl: "0"
   }, ariaProps, fieldControlWrapperProps), _mapInstanceProperty(_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 = _objectWithoutProperties(_ref2, _excluded2);
+    var normalizedValue = (_ref3 = rowValue !== null && rowValue !== void 0 ? rowValue : legacyFieldValue) !== null && _ref3 !== void 0 ? _ref3 : '';
     return ___EmotionJSX(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 && ___EmotionJSX(FieldHelperText, {
-    status: status
+    }, renderedItem(id, normalizedValue, otherFieldProps, onComponentRender, raLabelProps === null || raLabelProps === void 0 ? void 0 : raLabelProps.id));
+  })), (helperText || isLimitReached) && ___EmotionJSX(Box, {
+    variant: "arrayField.helperTextContainer"
+  }, helperText && ___EmotionJSX(FieldHelperText, {
+    status: status,
+    id: helperTextId
   }, helperText), isLimitReached && ___EmotionJSX(FieldHelperText, {
-    status: statuses.DEFAULT
-  }, maxSizeText || "Maximum ".concat(maxSize, " items.")), shouldShowBottomBar && ___EmotionJSX(Box, {
+    status: statuses.DEFAULT,
+    id: maxSizeTextId
+  }, maxSizeText || "Maximum ".concat(maxSize, " items."))), shouldShowBottomBar && ___EmotionJSX(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 && ___EmotionJSX(Button, _extends({
     "aria-label": "Add field",
     variant: "link",
     onPress: onFieldAdd,
     sx: {
-      width: 'fit-content',
-      mt: 'xs'
+      variant: 'variants.arrayField.addButton'
     }
   }, addButtonProps), ___EmotionJSX(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/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