@pingux/astro 1.2.0-alpha.13 → 1.2.0-alpha.17

package/lib/cjs/hooks/useField/useField.js

@@ -145,6 +145,11 @@ var useField = function useField() {
       setHasValue(true);
     } else {
       setHasValue(false);
+    } // adding this function resolves the error brought up in UIP-5116
+
+
+    if (e.persist) {
+      e.persist();
     } // Make sure to call the original onChange event
 
 

package/lib/cjs/hooks/useRockerButton/useRockerButton.js

@@ -38,24 +38,22 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var useRockerButton = function useRockerButton(props, state, ref) {
   var item = props.item,
-      propsDisabled = props.isDisabled;
+      isDisabled = props.isDisabled,
+      isSelected = props.isSelected;
   var key = item.key;
-  var manager = state.selectionManager,
-      selectedKey = state.selectedKey;
-  var isSelected = key === selectedKey;
+  var manager = state.selectionManager;
 
   var _useSelectableItem = (0, _selection.useSelectableItem)({
+    isDisabled: isDisabled,
     selectionManager: manager,
     key: key,
     ref: ref
   }),
       itemProps = _useSelectableItem.itemProps;
 
-  var isDisabled = propsDisabled || state.disabledKeys.has(key);
   var rockerButtonId = (0, _utils.useId)();
   return {
     rockerButtonProps: _objectSpread(_objectSpread({}, itemProps), {}, {
-      isDisabled: isDisabled,
       id: rockerButtonId,
       'aria-pressed': isSelected,
       'aria-disabled': isDisabled || undefined

package/lib/cjs/styles/variants/boxes.js

@@ -139,6 +139,14 @@ var inputInContainerSlot = {
   top: '50%',
   transform: 'translateY(-50%)'
 };
+var textFieldInContainerSlot = {
+  position: 'absolute',
+  bg: 'transparent',
+  width: '20px',
+  right: '10px',
+  top: '50%',
+  transform: 'translateY(-50%)'
+};
 var copy = {
   alignItems: 'center',
   width: 'max-content',
@@ -317,6 +325,7 @@ var _default = {
   environmentChip: environmentChip,
   expandableRow: expandableRow,
   inputInContainerSlot: inputInContainerSlot,
+  textFieldInContainerSlot: textFieldInContainerSlot,
   fileInputFieldWrapper: fileInputFieldWrapper,
   listItem: listItem,
   listBoxSectionTitle: listBoxSectionTitle,

package/lib/cjs/styles/variants/buttons.js

@@ -397,6 +397,7 @@ var chipDeleteButton = {
 };
 
 var rocker = _objectSpread(_objectSpread({}, base), {}, {
+  border: '0',
   display: 'inline-flex',
   height: '26px',
   lineHeight: '26px',
@@ -408,6 +409,7 @@ var rocker = _objectSpread(_objectSpread({}, base), {}, {
   textTransform: 'uppercase',
   bg: 'accent.95',
   '&.is-selected': {
+    bg: 'active',
     color: 'white'
   },
   '&.is-focused': _objectSpread({}, defaultFocus)

package/lib/components/AccordionGridGroup/AccordionGridGroup.js

@@ -18,11 +18,10 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { useMemo, forwardRef, useImperativeHandle, useRef } from 'react';
 import { GridCollection, useGridState } from '@react-stately/grid';
 import { GridKeyboardDelegate, useGrid } from '@react-aria/grid';
-import { mergeProps } from '@react-aria/utils';
 import { useListState } from '@react-stately/list';
 import PropTypes from 'prop-types';
 import { useCollator, useLocale } from '@react-aria/i18n';
-import { AccordionGridContext } from './AccordionGridContext';
+import { AccordionGridContext } from '../../context/AccordionGridContext';
 import AccordionGridItem from '../AccordionGridItem';
 import Box from '../Box';
 import { isIterableProp } from '../../utils/devUtils/props/isIterable';
@@ -46,9 +45,7 @@ export var collectionTypes = {
 var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   var _context2;
 
-  var disabledKeys = props.disabledKeys,
-      selectedKeys = props.selectedKeys,
-      onSelectionChange = props.onSelectionChange;
+  var disabledKeys = props.disabledKeys;
   var accordionGridRef = useRef();
   /* istanbul ignore next */
 
@@ -73,9 +70,11 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       columnCount: 1,
       items: _mapInstanceProperty(_context = _Array$from(collection)).call(_context, function (item) {
         return _objectSpread(_objectSpread({}, item), {}, {
+          key: "row-".concat(item.key),
           hasChildNodes: true,
           childNodes: [{
-            key: "cell-".concat(item.key),
+            key: item.key,
+            // use key for first cell, fixes selection after changes from UIP-5170
             type: 'cell',
             index: 0,
             value: null,
@@ -101,12 +100,11 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [collection]);
   var state = useGridState(_objectSpread(_objectSpread({}, props), {}, {
     disabledKeys: disabledKeys,
-    selectedKeys: selectedKeys,
     collection: gridCollection,
-    selectionMode: 'multiple',
-    onSelectionChange: onSelectionChange,
-    allowsCellSelection: true
-  }));
+    selectionMode: 'multiple'
+  })); // Required to enable header selection
+
+  state.selectionManager.allowsCellSelection = true;
   var keyboardDelegate = useMemo(function () {
     return new GridKeyboardDelegate({
       collection: state.collection,
@@ -119,7 +117,6 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   }, [state, accordionGridRef, direction, collator]);
 
   var _useGrid = useGrid(_objectSpread(_objectSpread({}, props), {}, {
-    isVirtualized: true,
     keyboardDelegate: keyboardDelegate
   }), state, accordionGridRef),
       gridProps = _useGrid.gridProps;
@@ -129,7 +126,7 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       state: state,
       keyboardDelegate: keyboardDelegate
     }
-  }, ___EmotionJSX(Box, _extends({}, mergeProps(gridProps), {
+  }, ___EmotionJSX(Box, _extends({}, gridProps, {
     ref: accordionGridRef
   }), _mapInstanceProperty(_context2 = _Array$from(state.collection)).call(_context2, function (item) {
     return ___EmotionJSX(AccordionGridItem, _extends({
@@ -139,6 +136,27 @@ var AccordionGridGroup = /*#__PURE__*/forwardRef(function (props, ref) {
   })));
 });
 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,
+
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise
    * interacted with.
@@ -164,17 +182,7 @@ AccordionGridGroup.propTypes = {
    * Identifies the element (or elements) that provide a detailed, extended description for
    * the object.
   */
-  'aria-details': PropTypes.string,
-
-  /**
-   * 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. */
-  onSelectionChange: PropTypes.func
+  'aria-details': PropTypes.string
 };
 AccordionGridGroup.defaultProps = {
   'aria-label': 'accordion'

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');