@pingux/astro 1.2.0-alpha.12 → 1.2.0-alpha.16

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

@@ -1,5 +1,5 @@
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import React, { useState } from 'react';
 import { Item } from '@react-stately/collections';
 import CreateIcon from 'mdi-react/CreateIcon';
@@ -72,188 +72,165 @@ export default {
     }
   }
 };
-export var Default = function Default() {
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      selectedKeys = _useState2[0],
-      setselectedKeys = _useState2[1];
 
-  var Header = function Header(props) {
-    var item = props.item;
+var Header = function Header(props) {
+  var item = props.item;
+  return ___EmotionJSX(Box, {
+    isRow: true,
+    sx: {
+      flexGrow: 1
+    }
+  }, ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center",
+    sx: {
+      flexGrow: 1,
+      width: '50%'
+    }
+  }, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 3,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    variant: "itemTitle",
+    alignSelf: "center"
+  }, item.name)), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center",
+    sx: {
+      flexGrow: 1,
+      width: '50%'
+    }
+  }, ___EmotionJSX(Text, {
+    sx: {
+      fontWeight: 0,
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden'
+    },
+    alignSelf: "center"
+  }, item.organizations.length, " Organizations"), ___EmotionJSX(Box, {
+    isRow: true,
+    alignSelf: "center",
+    sx: {
+      ml: 'auto'
+    }
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "create-icon",
+    sx: {
+      mr: '4px',
+      height: '26px',
+      width: '26px'
+    }
+  }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
+    "aria-label": "vertical-lines-icon",
+    sx: {
+      mr: '4px',
+      height: '26px',
+      width: '26px'
+    }
+  }, ___EmotionJSX(MoreVertIcon, null)))));
+};
+
+var Body = function Body(props) {
+  var _context;
+
+  var item = props.item;
+  return ___EmotionJSX(Box, {
+    isRow: true
+  }, ___EmotionJSX(Box, {
+    sx: {
+      flexGrow: 1,
+      width: 'calc(50% - 20px)'
+    }
+  }, ___EmotionJSX(Link, {
+    "aria-label": "permissions",
+    variant: "link",
+    sx: {
+      marginTop: '15px',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      textDecoration: 'none'
+    },
+    href: "https://www.pingidentity.com",
+    target: "_blank"
+  }, "View permissions")), ___EmotionJSX(Box, {
+    sx: {
+      flexGrow: 1,
+      width: '50%'
+    }
+  }, _mapInstanceProperty(_context = item.organizations).call(_context, function (org) {
+    var _context2;
+
     return ___EmotionJSX(Box, {
-      isRow: true,
+      key: "box".concat(org.name),
       sx: {
-        flexGrow: 1
-      }
-    }, ___EmotionJSX(Box, {
-      isRow: true,
-      alignSelf: "center",
-      sx: {
-        flexGrow: 1,
-        width: '50%'
-      }
-    }, ___EmotionJSX(Text, {
-      sx: {
-        fontWeight: 3,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden'
-      },
-      variant: "itemTitle",
-      alignSelf: "center"
-    }, item.name)), ___EmotionJSX(Box, {
-      isRow: true,
-      alignSelf: "center",
-      sx: {
-        flexGrow: 1,
-        width: '50%'
+        marginTop: '15px',
+        mb: '15px'
       }
     }, ___EmotionJSX(Text, {
       sx: {
-        fontWeight: 0,
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
         overflow: 'hidden'
       },
-      alignSelf: "center"
-    }, item.organizations.length, " Organizations"), ___EmotionJSX(Box, {
-      isRow: true,
-      alignSelf: "center",
-      sx: {
-        ml: 'auto'
-      }
-    }, ___EmotionJSX(IconButton, {
-      "aria-label": "create-icon",
-      sx: {
-        mr: '4px',
-        height: '26px',
-        width: '26px'
-      }
-    }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
-      "aria-label": "vertical-lines-icon",
-      sx: {
-        mr: '4px',
-        height: '26px',
-        width: '26px'
-      }
-    }, ___EmotionJSX(MoreVertIcon, null)))));
-  };
-
-  var Body = function Body(props) {
-    var _context;
+      key: "text".concat(org.name)
+    }, org.name), _mapInstanceProperty(_context2 = org.populations).call(_context2, function (pop) {
+      return ___EmotionJSX(Text, {
+        key: pop,
+        sx: {
+          marginLeft: 'md',
+          mt: '10px',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          overflow: 'hidden'
+        }
+      }, pop, ")");
+    }));
+  })));
+};
 
-    var item = props.item;
-    return ___EmotionJSX(Box, {
-      isRow: true
-    }, ___EmotionJSX(Box, {
+export var Default = function Default() {
+  return (// See story source for info about the data used
+    ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
       sx: {
-        flexGrow: 1,
-        width: 'calc(50% - 20px)'
+        fontWeight: 3,
+        fontSize: '13px'
       }
-    }, ___EmotionJSX(Link, {
-      "aria-label": "permissions",
-      variant: "link",
-      sx: {
-        marginTop: '15px',
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-        textDecoration: 'none'
-      },
-      href: "https://www.pingidentity.com",
-      target: "_blank"
-    }, "View permissions")), ___EmotionJSX(Box, {
+    }, "Role"), ___EmotionJSX(Separator, {
       sx: {
-        flexGrow: 1,
-        width: '50%'
+        mb: 0
       }
-    }, _mapInstanceProperty(_context = item.organizations).call(_context, function (org) {
-      var _context2;
-
-      return ___EmotionJSX(Box, {
-        key: "box".concat(org.name),
+    }), ___EmotionJSX(AccordionGridGroup, {
+      items: data,
+      defaultSelectedKeys: ['Environment']
+    }, function (item) {
+      return ___EmotionJSX(Item, {
+        key: item.key,
+        textValue: item.name
+      }, ___EmotionJSX(Header, {
+        item: item
+      }), ___EmotionJSX(Body, {
+        item: item
+      }), item.key !== 'Organization' ? ___EmotionJSX(Separator, {
         sx: {
-          marginTop: '15px',
-          mb: '15px'
+          m: 0,
+          bg: 'neutral.90'
         }
-      }, ___EmotionJSX(Text, {
-        sx: {
-          textOverflow: 'ellipsis',
-          whiteSpace: 'nowrap',
-          overflow: 'hidden'
-        },
-        key: "text".concat(org.name)
-      }, org.name), _mapInstanceProperty(_context2 = org.populations).call(_context2, function (pop) {
-        return ___EmotionJSX(Text, {
-          key: pop,
-          sx: {
-            marginLeft: 'md',
-            mt: '10px',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            overflow: 'hidden'
-          }
-        }, pop, ")");
-      }));
-    })));
-  };
+      }) : null);
+    }))
+  );
+};
+export var Controlled = function Controlled() {
+  var _useState = useState(['Client']),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedKeys = _useState2[0],
+      setSelectedKeys = _useState2[1];
 
-  return (// const data = [
-    //   {
-    //     name: 'Client Application Developer',
-    //     key: '1',
-    //     organizations: [
-    //       {
-    //         name: 'Montana (Environment)',
-    //         populations: [
-    //           'Administrators (Population)',
-    //           'Other Population (Population)',
-    //         ],
-    //       },
-    //       {
-    //         name: 'Boston (Environment)',
-    //         populations: [
-    //         ],
-    //       },
-    //     ],
-    //   },
-    //   {
-    //     name: 'Environment Admin',
-    //     key: '2',
-    //     organizations: [
-    //       {
-    //         name: 'Montana (Environment)',
-    //         populations: [
-    //           'Administrators (Population)',
-    //           'Other Population (Population)',
-    //         ],
-    //       },
-    //       {
-    //         name: 'Boston (Environment)',
-    //         populations: [
-    //         ],
-    //       },
-    //     ],
-    //   },
-    //   {
-    //     name: 'Organization Admin',
-    //     key: '3',
-    //     organizations: [
-    //       {
-    //         name: 'Montana (Environment)',
-    //         populations: [
-    //           'Administrators (Population)',
-    //           'Other Population (Population)',
-    //         ],
-    //       },
-    //       {
-    //         name: 'Boston (Environment)',
-    //         populations: [
-    //         ],
-    //       },
-    //     ],
-    //   },
-    // ];
+  return (// See story source for info about the data used
     ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
       sx: {
         fontWeight: 3,
@@ -266,7 +243,7 @@ export var Default = function Default() {
     }), ___EmotionJSX(AccordionGridGroup, {
       items: data,
       selectedKeys: selectedKeys,
-      onSelectionChange: setselectedKeys
+      onSelectionChange: setSelectedKeys
     }, function (item) {
       return ___EmotionJSX(Item, {
         key: item.key,

package/lib/components/AccordionGridGroup/AccordionGridGroup.test.js

@@ -1,9 +1,11 @@
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
-import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import { act, fireEvent, render, screen, waitFor } from '../../utils/testUtils/testWrapper';
 import { Link, Box, OverlayPanel } from '../../index';
 import AccordionGridGroup from '../AccordionGridGroup';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -50,20 +52,6 @@ axeTest(getComponent, {
     }
   }
 });
-test('button press', function () {
-  var onPress = jest.fn();
-  getComponent({
-    onPress: onPress
-  });
-  var buttons = screen.getAllByRole('gridcell');
-  var selectedItem = buttons[0];
-  expect(selectedItem).toBeInTheDocument();
-  expect(selectedItem).not.toHaveClass('is-pressed');
-  expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
-
-  fireEvent.mouseDown(selectedItem);
-  expect(selectedItem).toHaveClass('is-pressed');
-});
 test('button press uses callback', function () {
   var onPress = jest.fn();
   getComponent({
@@ -74,8 +62,7 @@ test('button press uses callback', function () {
   expect(selectedItem).not.toHaveClass('is-pressed');
   expect(onPress).not.toHaveBeenCalled(); // Hold down the button to see pressed styles
 
-  fireEvent.mouseDown(selectedItem);
-  fireEvent.mouseUp(selectedItem);
+  userEvent.click(selectedItem);
   expect(onPress).toHaveBeenCalled();
 });
 test('toggle accordion on mouse click', function () {
@@ -175,14 +162,26 @@ test('disabled keys prop disables an accordion item, and disables focus', functi
   expect(selectedRow).toHaveClass('is-disabled');
   expect(selectedRow).not.toHaveClass('is-focused');
 });
-test('default expanded keys expands an accordion item', function () {
-  getComponent({
-    selectedKeys: ['first']
-  });
-  var row = screen.getAllByRole('row');
-  var selectedRow = row[0];
-  expect(selectedRow).toHaveAttribute('aria-selected', 'true');
-});
+test('default expanded keys expands an accordion item', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent({
+            selectedKeys: ['first']
+          });
+          _context.next = 3;
+          return waitFor(function () {
+            return expect(screen.getAllByRole('row')[0]).toHaveAttribute('aria-selected', 'true');
+          });
+
+        case 3:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
 test('items do not automatically expand if wrapped in an open OverlayPanel', function () {
   getComponentInOverlayPanel();
   var row = screen.getAllByRole('row');

package/lib/components/AccordionGridItem/AccordionGridItem.js

@@ -3,14 +3,15 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
 import _toArray from "@babel/runtime-corejs3/helpers/esm/toArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { useContext, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import { useGridRow } from '@react-aria/grid';
 import { mergeProps } from '@react-aria/utils';
-import { AccordionGridContext } from '../AccordionGridGroup/AccordionGridContext';
+import { useAccordionGridContext } from '../../context/AccordionGridContext';
 import Box from '../Box';
 import AccordionGridItemHeader from './AccordionGridItemHeader';
 import AccordionGridItemBody from './AccordionGridItemBody';
+import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var AccordionGridItem = function AccordionGridItem(props) {
@@ -20,7 +21,8 @@ var AccordionGridItem = function AccordionGridItem(props) {
       headerProps = props.headerProps,
       bodyProps = props.bodyProps,
       children = props.children,
-      others = _objectWithoutProperties(props, ["item", "headerProps", "bodyProps", "children"]);
+      className = props.className,
+      others = _objectWithoutProperties(props, ["item", "headerProps", "bodyProps", "children", "className"]);
 
   var _React$Children$toArr = React.Children.toArray(children),
       _React$Children$toArr2 = _toArray(_React$Children$toArr),
@@ -30,10 +32,18 @@ var AccordionGridItem = function AccordionGridItem(props) {
 
   var cellNode = _concatInstanceProperty(_context = []).call(_context, item.childNodes)[0];
 
-  var _useContext = useContext(AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = useAccordionGridContext(),
+      state = _useAccordionGridCont.state; // Treat first cell as a row, fixes focus and keyboard interactions
 
-  var isDisabled = state.disabledKeys.has(item.key);
+
+  var isDisabled = state.disabledKeys.has(cellNode.key);
+  var isSelected = state.selectionManager.isSelected(cellNode.key); // Sync selection between the first cell and the row
+
+  useEffect(function () {
+    if (isSelected !== state.selectionManager.isSelected(item.key)) {
+      state.selectionManager.toggleSelection(item.key);
+    }
+  }, [isSelected, state.selectionManager, item.key]);
   var rowRef = useRef();
   var cellRef = useRef();
   var cellBodyRef = useRef();
@@ -43,20 +53,24 @@ var AccordionGridItem = function AccordionGridItem(props) {
   }, state, rowRef),
       rowProps = _useGridRow.rowProps;
 
-  var isSelected = state.selectionManager.isSelected(item.key);
-  return ___EmotionJSX(Box, _extends({
-    as: "div",
+  var _useStatusClasses = useStatusClasses(className, {
+    isSelected: isSelected,
     isDisabled: isDisabled
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  return ___EmotionJSX(Box, _extends({
+    as: "div"
   }, mergeProps(rowProps, others), {
-    ref: rowRef,
-    role: "row"
+    "aria-selected": isSelected,
+    className: classNames,
+    ref: rowRef
   }), ___EmotionJSX(AccordionGridItemHeader, _extends({
     item: item,
-    cellNode: cellNode,
-    ref: cellRef
-  }, headerProps, {
+    ref: cellRef,
+    isDisabled: isDisabled,
     isSelected: isSelected
-  }), header), ___EmotionJSX(AccordionGridItemBody, _extends({
+  }, headerProps), header), ___EmotionJSX(AccordionGridItemBody, _extends({
     item: item,
     ref: cellBodyRef,
     isSelected: isSelected

package/lib/components/AccordionGridItem/AccordionGridItemBody.js

@@ -1,11 +1,11 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
-import React, { useContext, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import { mergeProps } from '@react-aria/utils';
 import PropTypes from 'prop-types';
 import { useGridCell } from '@react-aria/grid';
 import { useHover } from '@react-aria/interactions';
-import { AccordionGridContext } from '../AccordionGridGroup/AccordionGridContext';
+import { useAccordionGridContext } from '../../context/AccordionGridContext';
 import Box from '../Box';
 import { useStatusClasses } from '../../hooks';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -17,8 +17,8 @@ var AccordionGridItemBody = /*#__PURE__*/forwardRef(function (props, ref) {
       children = props.children,
       isSelected = props.isSelected;
 
-  var _useContext = useContext(AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = useAccordionGridContext(),
+      state = _useAccordionGridCont.state;
 
   var cellNode = _concatInstanceProperty(_context = []).call(_context, item.childNodes)[1];
 

package/lib/components/AccordionGridItem/AccordionGridItemHeader.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { useContext, forwardRef } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import { mergeProps } from '@react-aria/utils';
 import { useFocusRing } from '@react-aria/focus';
 import PropTypes from 'prop-types';
 import { useGridCell } from '@react-aria/grid';
-import { useHover, usePress } from '@react-aria/interactions';
+import { useHover } from '@react-aria/interactions';
 import MenuDown from 'mdi-react/MenuDownIcon';
 import MenuUp from 'mdi-react/MenuUpIcon';
-import { AccordionGridContext } from '../AccordionGridGroup/AccordionGridContext';
+import { useAccordionGridContext } from '../../context/AccordionGridContext';
 import Box from '../Box';
 import Icon from '../Icon';
 import { useStatusClasses } from '../../hooks';
@@ -20,20 +20,27 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var item = props.item,
       className = props.className,
       children = props.children,
-      key = props.key,
       isSelected = props.isSelected,
-      others = _objectWithoutProperties(props, ["item", "className", "children", "key", "isSelected"]);
+      others = _objectWithoutProperties(props, ["item", "className", "children", "isSelected"]);
 
-  var _useContext = useContext(AccordionGridContext),
-      state = _useContext.state;
+  var _useAccordionGridCont = useAccordionGridContext(),
+      state = _useAccordionGridCont.state;
+
+  var cellRef = useRef();
+  /* istanbul ignore next */
+
+  useImperativeHandle(ref, function () {
+    return cellRef.current;
+  });
 
   var cellNode = _concatInstanceProperty(_context = []).call(_context, item.childNodes)[0];
 
   var _useGridCell = useGridCell({
     node: cellNode,
     focusMode: 'cell'
-  }, state, ref),
-      gridCellProps = _useGridCell.gridCellProps;
+  }, state, cellRef),
+      gridCellProps = _useGridCell.gridCellProps,
+      isPressed = _useGridCell.isPressed;
 
   var _useHover = useHover({}),
       hoverProps = _useHover.hoverProps,
@@ -48,14 +55,7 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
       focusProps = _useFocusRing2.focusProps,
       isFocusVisible = _useFocusRing2.isFocusVisible;
 
-  var _usePress = usePress({
-    ref: ref,
-    isPressed: item.props.isPressed
-  }),
-      pressProps = _usePress.pressProps,
-      isPressed = _usePress.isPressed;
-
-  var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps, pressProps);
+  var mergedProps = mergeProps(gridCellProps, hoverProps, focusWithinProps, focusProps);
 
   var _useStatusClasses = useStatusClasses(className, {
     isPressed: isPressed,
@@ -68,9 +68,8 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
   var ariaLabel = props['aria-label'];
   return ___EmotionJSX(Box, _extends({
     as: "div",
-    ref: ref
+    ref: cellRef
   }, mergedProps, {
-    role: "gridcell",
     variant: "accordion.accordionGridHeader",
     isFocused: isFocusVisible,
     isSelected: isSelected,
@@ -93,8 +92,8 @@ var AccordionGridItemHeader = /*#__PURE__*/forwardRef(function (props, ref) {
 AccordionGridItemHeader.propTypes = {
   'aria-label': PropTypes.string,
   isSelected: PropTypes.bool,
-  key: PropTypes.string,
   item: PropTypes.shape({
+    key: PropTypes.string,
     childNodes: PropTypes.arrayOf(PropTypes.shape({})),
     props: PropTypes.shape({
       isPressed: PropTypes.bool

package/lib/components/AccordionGroup/AccordionGroup.js

@@ -32,8 +32,9 @@ var AccordionGroup = /*#__PURE__*/forwardRef(function (props, ref) {
 
   var _useAccordion = useAccordion(props, state, accordionRef),
       accordionProps = _useAccordion.accordionProps;
-  /* istanbul ignore next */
 
+  delete accordionProps.onMouseDown;
+  /* istanbul ignore next */
 
   useImperativeHandle(ref, function () {
     return accordionRef.current;

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

@@ -7,7 +7,7 @@ import axeTest from '../../utils/testUtils/testAxe';
 import { act, fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
 import Text from '../Text';
 import AccordionGroup from '../AccordionGroup';
-import { OverlayPanel } from '../../index';
+import { OverlayPanel, TextField } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var testId = 'test-accordion';
 var defaultProps = {
@@ -31,7 +31,11 @@ var getComponent = function getComponent() {
     textValue: "Duplicate",
     "data-id": "third",
     label: "Accordion item"
-  }, ___EmotionJSX(Text, null, "Render me!"))));
+  }, ___EmotionJSX(TextField, {
+    role: "form",
+    label: "Example Label",
+    "data-testid": "testField"
+  }))));
 };
 
 var getComponentInOverlayPanel = function getComponentInOverlayPanel() {
@@ -214,6 +218,16 @@ test('expanded keys expands an accordion item', function () {
   var selectedItem = buttons[0];
   expect(selectedItem).toHaveAttribute('aria-expanded', 'true');
 });
+test('able to click a textfield that is the rendered child of an accordion', function () {
+  getComponent({
+    expandedKeys: ['third']
+  });
+  var field = screen.getByTestId('testField');
+  var input = screen.getByRole('form');
+  userEvent.click(input);
+  userEvent.type(input, 'banana');
+  expect(field).toHaveClass('has-focus-within');
+});
 test('Item accepts a data-id and the data-id can be found in the DOM', function () {
   getComponent();
   var buttons = screen.getAllByRole('button');