@pingux/astro 2.44.1-alpha.0 → 2.45.0-alpha.0

package/lib/cjs/hooks/useRockerButton/useRockerButton.d.ts

@@ -20,50 +20,50 @@ declare const useRockerButton: (props: RockerButtonProps, state: {
         style?: React.CSSProperties | undefined;
         className?: string | undefined;
         'aria-activedescendant'?: string | undefined;
-        'aria-atomic'?: (boolean | "true" | "false") | undefined;
-        'aria-autocomplete'?: "list" | "none" | "inline" | "both" | undefined;
+        'aria-atomic'?: (boolean | "false" | "true") | undefined;
+        'aria-autocomplete'?: "list" | "none" | "both" | "inline" | undefined;
         'aria-braillelabel'?: string | undefined;
         'aria-brailleroledescription'?: string | undefined;
-        'aria-busy'?: (boolean | "true" | "false") | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
+        'aria-busy'?: (boolean | "false" | "true") | undefined;
+        'aria-checked'?: boolean | "mixed" | "false" | "true" | undefined;
         'aria-colcount'?: number | undefined;
         'aria-colindex'?: number | undefined;
         'aria-colindextext'?: string | undefined;
         'aria-colspan'?: number | undefined;
         'aria-controls'?: string | undefined;
-        'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+        'aria-current'?: boolean | "time" | "page" | "false" | "true" | "step" | "location" | "date" | undefined;
         'aria-describedby'?: string | undefined;
         'aria-description'?: string | undefined;
         'aria-details'?: string | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
+        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
         'aria-errormessage'?: string | undefined;
-        'aria-expanded'?: (boolean | "true" | "false") | undefined;
+        'aria-expanded'?: (boolean | "false" | "true") | undefined;
         'aria-flowto'?: string | undefined;
-        'aria-grabbed'?: (boolean | "true" | "false") | undefined;
-        'aria-haspopup'?: boolean | "dialog" | "menu" | "grid" | "true" | "false" | "listbox" | "tree" | undefined;
-        'aria-hidden'?: (boolean | "true" | "false") | undefined;
-        'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+        'aria-grabbed'?: (boolean | "false" | "true") | undefined;
+        'aria-haspopup'?: boolean | "dialog" | "grid" | "listbox" | "menu" | "tree" | "false" | "true" | undefined;
+        'aria-hidden'?: (boolean | "false" | "true") | undefined;
+        'aria-invalid'?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
         'aria-keyshortcuts'?: string | undefined;
         'aria-label'?: string | undefined;
         'aria-labelledby'?: string | undefined;
         'aria-level'?: number | undefined;
         'aria-live'?: "off" | "assertive" | "polite" | undefined;
-        'aria-modal'?: (boolean | "true" | "false") | undefined;
-        'aria-multiline'?: (boolean | "true" | "false") | undefined;
-        'aria-multiselectable'?: (boolean | "true" | "false") | undefined;
-        'aria-orientation'?: "horizontal" | "vertical" | undefined;
+        'aria-modal'?: (boolean | "false" | "true") | undefined;
+        'aria-multiline'?: (boolean | "false" | "true") | undefined;
+        'aria-multiselectable'?: (boolean | "false" | "true") | undefined;
+        'aria-orientation'?: "vertical" | "horizontal" | undefined;
         'aria-owns'?: string | undefined;
         'aria-placeholder'?: string | undefined;
         'aria-posinset'?: number | undefined;
-        'aria-readonly'?: (boolean | "true" | "false") | undefined;
-        'aria-relevant'?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-        'aria-required'?: (boolean | "true" | "false") | undefined;
+        'aria-readonly'?: (boolean | "false" | "true") | undefined;
+        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+        'aria-required'?: (boolean | "false" | "true") | undefined;
         'aria-roledescription'?: string | undefined;
         'aria-rowcount'?: number | undefined;
         'aria-rowindex'?: number | undefined;
         'aria-rowindextext'?: string | undefined;
         'aria-rowspan'?: number | undefined;
-        'aria-selected'?: (boolean | "true" | "false") | undefined;
+        'aria-selected'?: (boolean | "false" | "true") | undefined;
         'aria-setsize'?: number | undefined;
         'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
         'aria-valuemax'?: number | undefined;

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

@@ -1,4 +1,4 @@
-import { ElementType } from 'react';
+import { ElementType, Key } from 'react';
 import type { ItemProps } from '@react-types/shared';
 import { DOMAttributes, StyleProps } from './shared';
 export interface Status {
@@ -7,11 +7,13 @@ export interface Status {
 declare module '@react-types/shared' {
     interface ItemProps<T> extends StyleProps, DOMAttributes {
         /** The rendered label for the item. */
-        label?: string;
+        label?: string | React.ReactNode;
         /** Props for the accordion item content element. */
         regionProps?: StyleProps;
         /** Props for the accordion item content element. */
         containerProps?: StyleProps;
+        /** Props for the accordion item button element. */
+        buttonProps?: StyleProps;
         /** Whether the item has a separator */
         isSeparator?: boolean;
         /** Whether the item is pressed */
@@ -24,6 +26,8 @@ declare module '@react-types/shared' {
         href?: string;
         /** Inline styling prop for item */
         sx?: StyleProps;
+        /** Key for the item. */
+        key?: Key;
     }
 }
 export default ItemProps;

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -9,20 +9,21 @@ import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultExpandedKeys", "expandedKeys", "labelHeadingTag", "onExpandedChange"],
+var _excluded = ["labelHeadingTag", "onExpandedChange"],
   _excluded2 = ["onFocus"];
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context2, _context3; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context2 = ownKeys(Object(source), !0)).call(_context2, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context3 = ownKeys(Object(source))).call(_context3, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
+import { mergeProps } from 'react-aria';
 import { useTreeState } from 'react-stately';
 import { useAccordion } from '@react-aria/accordion';
-import { mergeProps } from '@react-aria/utils';
-import PropTypes from 'prop-types';
+
+// eslint-disable-next-line import/no-unresolved
+
 import { AccordionContext } from '../../context/AccordionContext';
 import { Box } from '../../index';
-import { isIterableProp } from '../../utils/devUtils/props/isIterable';
 import AccordionItem from '../AccordionItem';
 
 /**
@@ -33,18 +34,15 @@ import AccordionItem from '../AccordionItem';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context;
-  var defaultExpandedKeys = props.defaultExpandedKeys,
-    expandedKeys = props.expandedKeys,
-    labelHeadingTag = props.labelHeadingTag,
+  var _props$labelHeadingTa = props.labelHeadingTag,
+    labelHeadingTag = _props$labelHeadingTa === void 0 ? 'span' : _props$labelHeadingTa,
     onExpandedChange = props.onExpandedChange,
     others = _objectWithoutProperties(props, _excluded);
   var state = useTreeState(props);
-  var accordionRef = useRef();
+  var accordionRef = useRef(null);
 
   /* `autoFocus: true` is what makes the initial focus only take one click vs two. */
-  var _useAccordion = useAccordion(_objectSpread({
-      autoFocus: true
-    }, props), state, accordionRef),
+  var _useAccordion = useAccordion(_objectSpread({}, props), state, accordionRef),
     accordionProps = _useAccordion.accordionProps;
   delete accordionProps.onMouseDown;
 
@@ -56,11 +54,19 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return accordionRef.current;
   });
+  var mergedProps = mergeProps(theseProps, others);
+  var onFocusGroup = function onFocusGroup() {
+    if (state.selectionManager.isFocused === false) {
+      state.selectionManager.setFocused(true);
+    }
+  };
   return ___EmotionJSX(AccordionContext.Provider, {
     value: state
   }, ___EmotionJSX(Box, _extends({
     ref: accordionRef
-  }, mergeProps(theseProps, others)), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
+  }, mergedProps, {
+    onFocus: onFocusGroup
+  }), _mapInstanceProperty(_context = _Array$from(state.collection)).call(_context, function (item) {
     return ___EmotionJSX(AccordionItem, {
       "data-id": item['data-id'],
       item: item,
@@ -69,24 +75,5 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     }, item.props.children);
   })));
 });
-AccordionGroup.propTypes = {
-  /** Handler that is called when items are expanded or collapsed. */
-  onExpandedChange: PropTypes.func,
-  /** Item objects in the collection. */
-  items: isIterableProp,
-  /**
-   * The item keys that are disabled. These items cannot be selected, focused, or otherwise
-   * interacted with.
-   */
-  disabledKeys: isIterableProp,
-  /** The currently expanded keys in the collection (controlled). */
-  expandedKeys: isIterableProp,
-  /** The initial expanded keys in the collection (uncontrolled). */
-  defaultExpandedKeys: isIterableProp,
-  /** Id of the selected element */
-  id: PropTypes.string,
-  /** HTML header element wrapping the label */
-  labelHeadingTag: AccordionItem.propTypes.labelHeadingTag
-};
 AccordionGroup.displayName = 'AccordionGroup';
 export default AccordionGroup;

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

@@ -5,9 +5,9 @@ import { Item } from 'react-stately';
 import { withDesign } from 'storybook-addon-designs';
 import DocsLayout from '../../../.storybook/storybookDocsLayout';
 import { AccordionGroup, Badge, Box, Button, Text, TextField } from '../../index';
-import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks.ts';
+import { FIGMA_LINKS } from '../../utils/designUtils/figmaLinks';
 import { validHeadingTags } from '../AccordionItem/AccordionItem';
-import AccordionReadme from './AccordionGroup.mdx';
+import AccordionReadme from './AccordionGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var itemArray = [{
   key: 't1',
@@ -138,9 +138,10 @@ export var Multiple = function Multiple() {
       items: itemArray,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label;
       return ___EmotionJSX(Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label = item.label) === null || _label === void 0 ? void 0 : _label.toString(),
         label: item.label
       }, item.children);
     })
@@ -175,9 +176,10 @@ export var ControlledExpanded = function ControlledExpanded() {
       items: itemArray,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label2;
       return ___EmotionJSX(Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label2 = item.label) === null || _label2 === void 0 ? void 0 : _label2.toString(),
         label: item.label
       }, item.children);
     })
@@ -197,9 +199,10 @@ export var UncontrolledExpanded = function UncontrolledExpanded() {
       items: itemArray,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label3;
       return ___EmotionJSX(Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label3 = item.label) === null || _label3 === void 0 ? void 0 : _label3.toString(),
         label: item.label
       }, item.children);
     })
@@ -219,9 +222,10 @@ export var DisabledState = function DisabledState() {
       items: itemArrayDisabled,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label4;
       return ___EmotionJSX(Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label4 = item.label) === null || _label4 === void 0 ? void 0 : _label4.toString(),
         label: item.label
       }, item.children);
     })
@@ -246,9 +250,10 @@ export var CustomPresentation = function CustomPresentation() {
       items: itemArrayDisabled,
       labelHeadingTag: "h3"
     }, function (item) {
+      var _label5;
       return ___EmotionJSX(Item, {
         key: item.key,
-        textValue: item.label,
+        textValue: (_label5 = item.label) === null || _label5 === void 0 ? void 0 : _label5.toString(),
         label: item.label,
         buttonProps: {
           bg: item.key === 't2' ? 'darkseagreen' : 'skyblue'

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

@@ -98,7 +98,9 @@ var getComponentWithPopover = function getComponentWithPopover() {
   }, ___EmotionJSX(PopoverMenu, null, ___EmotionJSX(Button, {
     "data-testid": "popoverbutton"
   }, "Click me"), ___EmotionJSX(Menu, {
-    onAction: function onAction() {}
+    onAction: function onAction() {
+      return false;
+    }
   }, ___EmotionJSX(Item, {
     key: "edit"
   }, "Edit"), ___EmotionJSX(Item, {
@@ -111,13 +113,15 @@ var getComponentWithPopover = function getComponentWithPopover() {
   }, "Delete")))), ___EmotionJSX(AccordionGroup, {
     items: items,
     defaultExpandedKeys: selectedAccordionKeys
-  }, function (item) {
-    return ___EmotionJSX(Item, {
-      key: item.key,
-      textValue: item.label,
-      label: item.label
-    }, item.text);
-  })));
+  }, ___EmotionJSX(Item, {
+    key: items[0].key,
+    textValue: items[0].label,
+    label: items[0].label
+  }, items[0].text), ___EmotionJSX(Item, {
+    key: items[1].key,
+    textValue: items[1].label,
+    label: items[1].label
+  }, items[1].text))));
 };
 var getComponentWithMultipleAccordion = function getComponentWithMultipleAccordion() {
   return render(___EmotionJSX(Box, {
@@ -242,9 +246,7 @@ test('allows users to navigate accordion headers through the tab key', function
     firstItem = _buttons2[0],
     secondItem = _buttons2[1],
     thirdItem = _buttons2[2];
-  act(function () {
-    firstItem.focus();
-  });
+  userEvent.tab();
   expect(firstItem).toHaveFocus();
   userEvent.tab();
   expect(secondItem).toHaveFocus();

package/lib/components/AccordionItem/AccordionItem.js

@@ -1,18 +1,17 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _context;
-var _excluded = ["label", "children", "textValue", "containerProps", "buttonProps", "regionProps"];
+var _excluded = ["containerProps", "buttonProps", "regionProps"];
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
-import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
+import React, { useContext, useRef } from 'react';
 import { mergeProps, useButton } from 'react-aria';
 import MenuDown from '@pingux/mdi-react/MenuDownIcon';
 import MenuUp from '@pingux/mdi-react/MenuUpIcon';
 import { useAccordionItem } from '@react-aria/accordion';
 import { useFocusRing } from '@react-aria/focus';
 import { useHover } from '@react-aria/interactions';
-import PropTypes from 'prop-types';
+
+// eslint-disable-next-line import/no-unresolved
+
 import { Button as ThemeUIButton } from 'theme-ui';
 import { AccordionContext } from '../../context/AccordionContext';
 import { useStatusClasses } from '../../hooks';
@@ -20,14 +19,11 @@ import { Box, Icon, Text } from '../../index';
 import { hoveredState } from '../AccordionGroup/Accordion.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var validHeadingTags = ['h1', 'h2', 'h3', 'h4'];
-var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
+var AccordionItem = function AccordionItem(props) {
   var className = props.className,
     item = props.item,
     labelHeadingTag = props.labelHeadingTag;
   var _item$props = item.props,
-    label = _item$props.label,
-    children = _item$props.children,
-    textValue = _item$props.textValue,
     _item$props$container = _item$props.containerProps,
     containerProps = _item$props$container === void 0 ? {} : _item$props$container,
     _item$props$buttonPro = _item$props.buttonProps,
@@ -36,23 +32,23 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
     regionProps = _item$props$regionPro === void 0 ? {} : _item$props$regionPro,
     others = _objectWithoutProperties(_item$props, _excluded);
   var state = useContext(AccordionContext);
-  var buttonRef = useRef();
+  var buttonRef = useRef(null);
   var _useAccordionItem = useAccordionItem(props, state, buttonRef),
     accordionButtonProps = _useAccordionItem.buttonProps,
     accordionRegionProps = _useAccordionItem.regionProps;
-  var _useHover = useHover(props),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
   var _useFocusRing = useFocusRing(),
     focusProps = _useFocusRing.focusProps,
     isFocusVisible = _useFocusRing.isFocusVisible;
   var isOpen = state.expandedKeys.has(item.key);
   var isDisabled = state.disabledKeys.has(item.key);
+  var _useHover = useHover({
+      isDisabled: isDisabled
+    }),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
 
   /* istanbul ignore next */
-  useImperativeHandle(ref, function () {
-    return buttonRef.current;
-  });
+
   var _useButton = useButton(props, buttonRef),
     isPressed = _useButton.isPressed,
     raButtonProps = _useButton.buttonProps;
@@ -102,24 +98,6 @@ var AccordionItem = /*#__PURE__*/forwardRef(function (props, ref) {
   }, accordionRegionProps, regionProps, {
     className: itemClasses
   }), item.rendered));
-});
-AccordionItem.propTypes = {
-  'aria-label': PropTypes.string,
-  labelHeadingTag: PropTypes.oneOf(_concatInstanceProperty(_context = []).call(_context, validHeadingTags, _mapInstanceProperty(validHeadingTags).call(validHeadingTags, function (heading) {
-    return heading.toUpperCase();
-  }))),
-  item: PropTypes.shape({
-    key: PropTypes.string,
-    rendered: PropTypes.node,
-    props: PropTypes.shape({
-      label: PropTypes.node,
-      children: PropTypes.node,
-      textValue: PropTypes.string,
-      containerProps: PropTypes.shape({}),
-      buttonProps: PropTypes.shape({}),
-      regionProps: PropTypes.shape({})
-    })
-  })
 };
 AccordionItem.displayName = 'AccordionItem';
 export default AccordionItem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pingux/astro",
-  "version": "2.44.1-alpha.0",
+  "version": "2.45.0-alpha.0",
   "description": "React component library for Ping Identity's design system",
   "repository": {
     "type": "git",
@@ -80,7 +80,8 @@
     "@react-stately/table": "^3.9.0",
     "@react-stately/tree": "^3.7.4",
     "@react-stately/virtualizer": "~3.6.5",
-    "@react-types/shared": "^3.20.0",
+    "@react-types/accordion": "^3.0.0-alpha.18",
+    "@react-types/shared": "^3.22.0",
     "@storybook/addon-actions": "^7.1.0",
     "@storybook/api": "^7.1.0",
     "@storybook/components": "^7.1.0",