@pingux/astro 1.2.0-alpha.9 → 1.2.1

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)
@@ -561,6 +563,23 @@ var tooltipInline = _objectSpread(_objectSpread({}, text), {}, {
   }
 });
 
+var defaultVariant = _objectSpread(_objectSpread({}, base), {}, {
+  bg: 'white',
+  border: '1px solid',
+  borderColor: 'active',
+  '&.is-hovered': _objectSpread({}, defaultHover),
+  '&.is-pressed': _objectSpread({}, defaultActive),
+  '&.is-focused': _objectSpread({}, defaultFocus)
+});
+
+var filter = _objectSpread(_objectSpread({}, defaultVariant), {}, {
+  px: 'sm',
+  borderColor: 'neutral.80',
+  height: 40,
+  color: 'active',
+  display: 'flex'
+});
+
 var colorBlock = {
   bg: 'neutral.95',
   border: '1px solid',
@@ -633,6 +652,7 @@ var _default = {
   environmentBreadcrumb: environmentBreadcrumb,
   expandableRow: expandableRow,
   fileInputField: fileInputField,
+  filter: filter,
   iconButton: iconButton,
   imageUpload: imageUpload,
   inline: inline,

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

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