@pingux/astro 2.0.0-beta.0 → 2.0.0-rc.0

package/lib/cjs/components/PasswordField/PasswordField.js

@@ -35,7 +35,7 @@ var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/s
 var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
 var _fieldAttributes = require("../../utils/devUtils/props/fieldAttributes");
 var _react2 = require("@emotion/react");
-var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
+var _excluded = ["helperText", "isVisible", "onVisibleChange", "requirements", "requirementsListProps", "slots", "status", "viewHiddenIconTestId", "viewIconTestId"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty2(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -53,6 +53,7 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     isVisibleProp = props.isVisible,
     onVisibleChangeProp = props.onVisibleChange,
     requirements = props.requirements,
+    requirementsListProps = props.requirementsListProps,
     slots = props.slots,
     status = props.status,
     viewHiddenIconTestId = props.viewHiddenIconTestId,
@@ -169,9 +170,9 @@ var PasswordField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     placement: placement,
     ref: popoverRef,
     style: style
-  }, (0, _react2.jsx)(_.RequirementsList, {
+  }, (0, _react2.jsx)(_.RequirementsList, (0, _extends2["default"])({
     requirements: requirements
-  })));
+  }, requirementsListProps))));
 });
 PasswordField.propTypes = _objectSpread(_objectSpread({
   /** The rendered label for the field. */
@@ -240,7 +241,9 @@ PasswordField.propTypes = _objectSpread(_objectSpread({
   requirements: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     name: _propTypes["default"].string.isRequired,
     status: _propTypes["default"].oneOf(['default', 'success', 'warning', 'error'])
-  }))
+  })),
+  /** Props object that is spread to the requirements list. */
+  requirementsListProps: _propTypes["default"].shape({})
 }, _ariaAttributes.ariaAttributesBasePropTypes), _fieldAttributes.inputFieldAttributesBasePropTypes);
 PasswordField.defaultProps = {
   hasAutoFocus: false,

package/lib/cjs/components/PasswordField/PasswordField.test.js

@@ -192,6 +192,18 @@ test('if all requirements are successful, do not render popover', function () {
   _userEvent["default"].click(input);
   expect(_react3.screen.queryByRole('presentation')).not.toBeInTheDocument();
 });
+test('passing in props to the requirements list works', function () {
+  var requirementsListProps = {
+    'data-testid': 'my-custom-id'
+  };
+  getComponent({
+    requirements: defaultRequirements,
+    requirementsListProps: requirementsListProps
+  });
+  expect(_react3.screen.queryByTestId(requirementsListProps['data-testid'])).not.toBeInTheDocument();
+  _userEvent["default"].click(_react3.screen.getByRole('textbox'));
+  expect(_react3.screen.queryByTestId(requirementsListProps['data-testid'])).toBeInTheDocument();
+});
 test('password field with helper text', function () {
   var helperText = 'helper text';
   getComponent({

package/lib/cjs/components/PopoverMenu/PopoverMenu.test.js

@@ -156,4 +156,14 @@ test('two menus can not be open at the same time', function () {
   expect(_testWrapper.screen.queryByRole('menuitem', {
     name: 'C'
   })).toBeInTheDocument();
+});
+test('holds a pressed state for menu trigger when isOpen is true', function () {
+  getComponent();
+  var button = _testWrapper.screen.getByRole('button');
+  expect(_testWrapper.screen.queryByRole('presentation')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('menu')).not.toBeInTheDocument();
+  expect(button).not.toHaveClass('is-pressed');
+  _userEvent["default"].click(button);
+  expect(_testWrapper.screen.queryByRole('menu')).toBeInTheDocument();
+  expect(button).toHaveClass('is-pressed');
 });

package/lib/cjs/components/SearchField/Search.styles.js

@@ -14,6 +14,9 @@ var wrapper = {
   justifyContent: 'center',
   '> input::-webkit-search-cancel-button, > input::-webkit-search-decoration': {
     WebkitAppearance: 'none'
+  },
+  '&.is-focused > *': {
+    zIndex: 1
   }
 };
 exports.wrapper = wrapper;

package/lib/cjs/{styles/theme-ui → docs/theme}/ThemeView.js

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _reactJsonTree = require("react-json-tree");
-var _theme = _interopRequireDefault(require("../theme"));
+var _theme = _interopRequireDefault(require("../../styles/theme"));
 var _react2 = require("@emotion/react");
 var _default = function _default() {
   return (0, _react2.jsx)(_reactJsonTree.JSONTree, {

package/lib/cjs/hooks/index.js

@@ -23,6 +23,12 @@ _Object$defineProperty(exports, "useComponentToggle", {
     return _useComponentToggle["default"];
   }
 });
+_Object$defineProperty(exports, "useCopyToClipboard", {
+  enumerable: true,
+  get: function get() {
+    return _useCopyToClipboard["default"];
+  }
+});
 _Object$defineProperty(exports, "useDebounce", {
   enumerable: true,
   get: function get() {
@@ -110,6 +116,7 @@ _Object$defineProperty(exports, "useTShirtSize", {
 var _useAriaLabelWarning = _interopRequireDefault(require("./useAriaLabelWarning"));
 var _useColumnStyles = _interopRequireDefault(require("./useColumnStyles"));
 var _useComponentToggle = _interopRequireDefault(require("./useComponentToggle"));
+var _useCopyToClipboard = _interopRequireDefault(require("./useCopyToClipboard"));
 var _useDebounce = _interopRequireDefault(require("./useDebounce"));
 var _useDeprecationWarning = _interopRequireDefault(require("./useDeprecationWarning"));
 var _useFallbackImage = _interopRequireDefault(require("./useFallbackImage"));

package/lib/cjs/patterns/AttributeMappingDisplayViewPattern.stories.hidden.js

@@ -77,7 +77,7 @@ var sx = {
     mb: 'auto',
     width: '21px'
   },
-  badgeStyles: {
+  badgeStyle: {
     width: '65px',
     height: '22px',
     minWidth: 'fit-content',
@@ -141,7 +141,7 @@ var Default = function Default() {
     }), hasBadge && (0, _react2.jsx)(_index.Badge, {
       label: "Required",
       textColor: "#253746",
-      sx: sx.badgeStyles
+      sx: sx.badgeStyle
     }));
   })));
 };

package/lib/cjs/patterns/AttributeMappingEditViewPattern.stories.hidden.js

@@ -23,17 +23,17 @@ var editFieldValues = [{
 }, {
   field1: 'firstName',
   field2: 'Given Name',
-  hasBadge: false,
+  hasChip: false,
   key: 2
 }, {
   field1: 'lastName',
   field2: 'Family Name',
-  hasBadge: false,
+  hasChip: false,
   key: 3
 }, {
   field1: 'population',
   field2: 'Population',
-  hasBadge: false,
+  hasChip: false,
   key: 4
 }];
 var sx = {

package/lib/cjs/recipes/CountryPicker.stories.js

@@ -40,7 +40,7 @@ var sx = {
   comboBoxFieldWrapperClose: {
     position: 'absolute',
     transition: '0.2s width ease',
-    maxWidth: '110px'
+    width: '110px'
   },
   inputWrapper: {
     width: '100%',
@@ -106,7 +106,7 @@ var Default = function Default() {
     width: "100%",
     isOpen: isOpen,
     onOpenChange: setIsOpen,
-    containerProps: {
+    wrapperProps: {
       sx: isOpen ? sx.comboBoxFieldWrapperOpen : sx.comboBoxFieldWrapperClose
     },
     controlProps: {

package/lib/cjs/recipes/LinkedListView.stories.js

@@ -127,7 +127,7 @@ var Default = function Default(_ref) {
     var color = '#CACED3';
     return (0, _react2.jsx)(_index.Box, {
       sx: {
-        width: '20px',
+        width: '15px',
         position: 'relative'
       }
     }, (0, _react2.jsx)(_index.Box, {
@@ -185,7 +185,7 @@ var Default = function Default(_ref) {
         position: 'absolute',
         bottom: 0,
         left: 12,
-        top: 55
+        top: 50
       }
     }, (0, _react2.jsx)("svg", {
       xmlns: "http://www.w3.org/2000/svg",

package/lib/cjs/recipes/PageHeader.stories.js

@@ -15,49 +15,33 @@ var _default = {
 };
 exports["default"] = _default;
 var Default = function Default() {
-  var heading = 'Title of the Page';
-  var description = 'The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.';
-  return (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, null, (0, _react2.jsx)(_index.Box, {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.Box, {
     align: "center",
     isRow: true,
     mb: "xs",
     role: "heading",
     "aria-level": "1"
   }, (0, _react2.jsx)(_index.Text, {
-    variant: "title",
-    fontWeight: 3
-  }, heading), (0, _react2.jsx)(_index.Button, {
-    variant: "inlinePrimary",
-    ml: "sm"
-  }, (0, _react2.jsx)(_index.Icon, {
-    icon: _PlusIcon["default"],
-    color: "white",
-    size: 13,
-    mr: "4px"
-  }), "\xA0", "Add")), (0, _react2.jsx)(_index.Text, {
-    variant: "bodyWeak"
-  }, description)), (0, _react2.jsx)(_index.Box, {
-    mt: "xl"
-  }, (0, _react2.jsx)(_index.Box, {
-    align: "center",
-    isRow: true,
-    mb: "xs",
-    role: "heading",
-    "aria-level": "1"
-  }, (0, _react2.jsx)(_index.Text, {
-    variant: "title",
-    fontWeight: 3
-  }, heading), (0, _react2.jsx)(_index.IconButton, {
+    fontSize: "xx",
+    fontWeight: "3",
+    fontColor: "text.primary"
+  }, "Title of the Page"), (0, _react2.jsx)(_index.IconButton, {
     "aria-label": "icon button",
     ml: "sm",
-    mt: "3px",
     variant: "inverted"
   }, (0, _react2.jsx)(_index.Icon, {
     icon: _PlusIcon["default"],
-    color: "white",
-    size: "xs"
+    size: "sm"
   }))), (0, _react2.jsx)(_index.Text, {
-    variant: "bodyWeak"
-  }, description)));
+    fontSize: "sm",
+    color: "text.secondary",
+    fontWeight: "0",
+    width: "800px"
+  }, "The description of the page. The description of the page. The description of the page. The description of the page.The description of the page. The description of the page. The description of the page. The description of the page. The description of the page.\xA0", (0, _react2.jsx)(_index.Link, {
+    href: "https://uilibrary.ping-eng.com/",
+    sx: {
+      fontSize: 'sm'
+    }
+  }, "Learn more")));
 };
 exports.Default = Default;

package/lib/cjs/recipes/RadioButtonsWithLinks.stories.js

@@ -87,7 +87,7 @@ var Default = function Default() {
       }
     }, "Permissions"), (0, _react2.jsx)(_index.IconButton, {
       onPress: onPress,
-      "aria-label": "close icon button"
+      "aria-label": "close"
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _CloseIcon["default"],
       size: "sm"

package/lib/cjs/styles/themeOverrides/uiLibraryOverride.js

@@ -34,6 +34,17 @@ var buttons = {
   inline: {
     '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.inline), _theme["default"].buttons.defaultHover)
   },
+  inlinePrimary: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.inlinePrimary), _theme["default"].buttons.defaultHover)
+  },
+  text: {
+    '&:not(.disabled):hover': _objectSpread(_objectSpread({}, _theme["default"].buttons.text), _theme["default"].buttons.defaultHover)
+  },
+  inverted: _objectSpread(_objectSpread({}, _theme["default"].buttons.inverted), {}, {
+    ':focus': {
+      border: 'none'
+    }
+  }),
   primary: {
     '&:hover': _objectSpread({}, _theme["default"].buttons.primary)
   },
@@ -79,11 +90,16 @@ var forms = {
     wrapper: {
       '& input[type=search]': _objectSpread(_objectSpread({}, _theme["default"].text.inputValue), {}, {
         borderColor: 'neutral.80',
+        fontSize: '15px',
         bg: 'white',
         '::placeholder': _objectSpread(_objectSpread({}, _theme["default"].text.placeholder), {}, {
-          fontStyle: 'unset'
+          fontStyle: 'unset',
+          fontSize: '15px'
         })
-      })
+      }),
+      '& input[type=search]:focus': {
+        borderColor: 'neutral.80'
+      }
     }
   },
   label: {

package/lib/cjs/styles/themeOverrides/withUiLibraryCss.js

@@ -11,9 +11,10 @@ _Object$defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
 var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
 var _themeUi = require("theme-ui");
+var _theme = _interopRequireDefault(require("../theme"));
 var _uiLibraryOverride = _interopRequireDefault(require("./uiLibraryOverride"));
-var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var UI_LIBRARY_CSS_LINK = 'https://assets.pingone.com/ux/ui-library/5.0.2/css/ui-library.css';
@@ -31,8 +32,9 @@ var WithUiLibraryCss = function WithUiLibraryCss(Story) {
       });
     };
   }, []);
-  return (0, _react2.jsx)(_themeUi.ThemeProvider, {
-    theme: _uiLibraryOverride["default"]
+  var theme = (0, _themeUi.merge)(_theme["default"], _uiLibraryOverride["default"]);
+  return (0, _react2.jsx)(_react2.ThemeProvider, {
+    theme: theme
   }, (0, _react2.jsx)(Story, null));
 };
 var _default = WithUiLibraryCss;

package/lib/cjs/styles/themes/end-user/end-user.js

@@ -107,7 +107,7 @@ var buttonBase = _objectSpread(_objectSpread({}, buttonText), {}, {
   },
   '&.is-focused': _objectSpread({}, buttonFocus)
 });
-var card = {
+var cards = {
   bg: 'cardBg',
   boxShadow: 'overlay',
   boxSizing: 'border-box',
@@ -152,16 +152,17 @@ var wordWrap = {
   wordWrap: 'break-word',
   wordBreak: 'break-word'
 };
-var fieldHelperText = _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
-  fontSize: 'sm',
-  pb: 'sm',
-  '&.is-default': {
-    color: 'text.secondary'
-  },
-  '&.is-error': {
-    color: 'critical'
-  }
-});
+var fieldHelperText = {
+  title: _objectSpread(_objectSpread(_objectSpread({}, base), wordWrap), {}, {
+    fontSize: 'sm',
+    '&.is-default': {
+      color: 'text.secondary'
+    },
+    '&.is-error': {
+      color: 'critical.dark'
+    }
+  })
+};
 var text = {
   base: {
     color: 'neutral.20',
@@ -188,8 +189,7 @@ var text = {
     fontSize: 15,
     fontWeight: 500,
     fontFamily: 'proxima-nova, sans-serif'
-  },
-  fieldHelperText: fieldHelperText
+  }
 };
 var activeFloatLabel = {
   fontWeight: 0,
@@ -250,8 +250,9 @@ var _default = {
     input: input,
     label: label
   },
+  cards: cards,
   variants: {
-    card: card
+    fieldHelperText: fieldHelperText
   }
 };
 exports["default"] = _default;

package/lib/components/Bracket/Bracket.stories.js

@@ -56,7 +56,6 @@ export var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      ml: "xs",
       variant: "forms.input.fieldControlWrapper",
       bg: "white",
       isRow: true,

package/lib/components/Button/Button.js

@@ -14,7 +14,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton, useFocusRing } from 'react-aria';
-import { Pressable, useHover } from '@react-aria/interactions';
+import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { Button as ThemeUIButton } from 'theme-ui';
 import { useAriaLabelWarning, usePropWarning, useStatusClasses } from '../../hooks';
@@ -45,6 +45,8 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useFocusRing = useFocusRing(),
     isFocusVisible = _useFocusRing.isFocusVisible,
     focusProps = _useFocusRing.focusProps;
+  var _usePress = usePress(buttonRef),
+    isPressedFromContext = _usePress.isPressed;
   var _useButton = useButton(_objectSpread({
       elementType: 'button'
     }, props), buttonRef),
@@ -55,7 +57,7 @@ var Button = /*#__PURE__*/forwardRef(function (props, ref) {
     isHovered = _useHover.isHovered;
   var _useStatusClasses = useStatusClasses(className, {
       isHovered: isHovered,
-      isPressed: isPressed,
+      isPressed: isPressed || isPressedFromContext,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),

package/lib/components/CollapsiblePanel/CollapsiblePanel.stories.js

@@ -194,13 +194,17 @@ export var CollapsiblePanelWithBadge = function CollapsiblePanelWithBadge(args)
   }), ___EmotionJSX(Breadcrumbs, {
     icon: ChevronRightIcon
   }, ___EmotionJSX(Item, {
+    "aria-label": "Ed Nepomuceno",
+    "data-id": "home",
+    href: "https://www.pingidentity.com",
     key: "home",
-    variant: "link",
-    "data-id": "home"
+    variant: "buttons.link"
   }, "Ed Nepomuceno"), ___EmotionJSX(Item, {
+    "aria-label": "edit groups",
+    "data-id": "editGroups",
+    href: "https://www.pingidentity.com",
     key: "editGroups",
-    variant: "variants.collapsiblePanel.neutralText",
-    "data-id": "editGroups"
+    variant: "buttons.link"
   }, "Edit Groups"))), ___EmotionJSX(Box, {
     isRow: true
   }, ___EmotionJSX(IconButton, {

package/lib/components/ComboBox/ComboBoxInput.js

@@ -47,22 +47,19 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     onSelectionChange = props.onSelectionChange,
     wrapperProps = props.wrapperProps,
     others = _objectWithoutProperties(props, _excluded);
-  var _useHover = useHover({}),
-    hoverProps = _useHover.hoverProps,
-    isHovered = _useHover.isHovered;
   var textFieldProps = _objectSpread({
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
-    containerProps: _objectSpread(_objectSpread({
-      sx: style,
-      variant: 'forms.comboBox.container'
-    }, hoverProps), containerProps)
+    containerProps: containerProps
   }, mergeProps(inputProps, others));
 
   // istanbul ignore next
   useImperativeHandle(ref, function () {
     return inputRef.current;
   });
+  var _useHover = useHover({}),
+    hoverProps = _useHover.hoverProps,
+    isHovered = _useHover.isHovered;
 
   // START - minimum delay time for loading indicator = 500ms
   var _useState = useState(false),
@@ -127,10 +124,14 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     focusClass: "is-focused",
     focusRingClass: "focus-ring",
     autoFocus: hasAutoFocus
-  }, ___EmotionJSX(TextField, _extends({}, textFieldProps, {
-    wrapperProps: _objectSpread({
+  }, ___EmotionJSX(Box, _extends({
+    isRow: true,
+    style: style,
+    variant: "forms.comboBox.container"
+  }, hoverProps, wrapperProps), ___EmotionJSX(TextField, _extends({}, textFieldProps, {
+    wrapperProps: {
       ref: inputWrapperRef
-    }, wrapperProps),
+    },
     controlProps: _objectSpread({
       variant: 'forms.comboBox.input'
     }, controlProps),
@@ -141,7 +142,7 @@ var ComboBoxInput = /*#__PURE__*/forwardRef(function (props, ref) {
     slots: {
       inContainer: button
     }
-  })));
+  }))));
 });
 ComboBoxInput.propTypes = _objectSpread({
   containerProps: PropTypes.shape({}),

package/lib/components/DataTable/DataTable.styles.js

@@ -35,12 +35,12 @@ var tableCell = _objectSpread(_objectSpread({}, text.tableData), {}, {
 });
 var tableCellContents = {
   flex: '1 1 0%',
-  minWidth: '0px',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
   textOverflow: 'ellipsis',
   fontWeight: '400',
-  justifyContent: 'center'
+  justifyContent: 'center',
+  maxWidth: '100%'
 };
 var tableRow = {
   position: 'relative',

package/lib/components/IconButton/IconButton.js

@@ -14,7 +14,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React, { forwardRef, useContext, useImperativeHandle, useRef } from 'react';
 import { mergeProps, useButton, useFocusRing } from 'react-aria';
-import { Pressable, useHover } from '@react-aria/interactions';
+import { Pressable, useHover, usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { IconButton as ThemeUIIconButton } from 'theme-ui';
 import { BadgeContext } from '../../context/BadgeContext';
@@ -47,6 +47,8 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
   useImperativeHandle(ref, function () {
     return buttonRef.current;
   });
+  var _usePress = usePress(buttonRef),
+    isPressedFromContext = _usePress.isPressed;
   var _useButton = useButton(_objectSpread({}, props), buttonRef),
     buttonProps = _useButton.buttonProps,
     isPressed = _useButton.isPressed;
@@ -60,7 +62,7 @@ var IconButton = /*#__PURE__*/forwardRef(function (props, ref) {
     focusProps = _useFocusRing.focusProps;
   var _useStatusClasses = useStatusClasses(className, {
       isHovered: isHovered,
-      isPressed: isPressed,
+      isPressed: isPressed || isPressedFromContext,
       isFocused: isFocusVisible,
       isDisabled: isDisabled
     }),

package/lib/components/ListItem/ListItem.stories.js

@@ -48,7 +48,9 @@ export var Default = function Default(args) {
   }, "Fons Vernall")), ___EmotionJSX(Box, {
     isRow: true,
     alignSelf: "center"
-  }, ___EmotionJSX(IconButton, null, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "filter"
+  }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
     size: "sm",
     color: "neutral.20"
@@ -77,7 +79,9 @@ export var WithSubtitle = function WithSubtitle(args) {
   }, "fvernall0@google.it"))), ___EmotionJSX(Box, {
     isRow: true,
     alignSelf: "center"
-  }, ___EmotionJSX(IconButton, null, ___EmotionJSX(Icon, {
+  }, ___EmotionJSX(IconButton, {
+    "aria-label": "filter"
+  }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
     size: "sm",
     color: "neutral.20"
@@ -126,7 +130,8 @@ export var WithHoverHandlers = function WithHoverHandlers(args) {
     isRow: true,
     alignSelf: "center"
   }, ___EmotionJSX(IconButton, {
-    size: 26
+    size: 26,
+    "aria-label": "filter"
   }, ___EmotionJSX(Icon, {
     icon: MoreVertIcon,
     size: 20,

package/lib/components/ListViewItem/ListViewItem.styles.js

@@ -17,11 +17,11 @@ var container = {
   justifyContent: 'center',
   bg: 'accent.99',
   outline: 'none',
-  '& li': {
-    bg: 'white'
-  },
   '&.is-selected': {
-    bg: 'white'
+    bg: 'white',
+    '& li': {
+      bg: 'white'
+    }
   },
   '&.is-hovered': {
     bg: 'white',

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -324,7 +324,7 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
       label: item.name,
       slots: item.slots
     }, item.badgeProps), ___EmotionJSX(IconButton, _extends({
-      "aria-label": "delete",
+      "aria-label": "delete ".concat(item.name),
       onPress: function onPress() {
         return deleteItem(item.key);
       },

package/lib/components/NumberField/NumberField.js

@@ -67,14 +67,14 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     variant: "forms.numberField.arrows"
   }, ___EmotionJSX(IconButton, _extends({}, incrementButtonProps, {
     ref: decRef,
-    tabIndex: "-1",
+    tabIndex: "0",
     p: 0
   }), ___EmotionJSX(Icon, {
     icon: MenuUp,
     size: 18
   })), ___EmotionJSX(IconButton, _extends({}, decrementButtonProps, {
     ref: incrRef,
-    tabIndex: "-1",
+    tabIndex: "0",
     p: 0
   }), ___EmotionJSX(Icon, {
     icon: MenuDown,

package/lib/components/NumberField/NumberField.test.js

@@ -119,14 +119,14 @@ test('should show hintText text if prop is passed', function () {
   fireEvent.mouseEnter(helpHintButton);
   expect(screen.getByText(hintText)).toBeInTheDocument();
 });
-test('increment and decrement buttons shouldn\'t be able to be focused via keyboard', function () {
+test('increment and decrement buttons should be able to be focused via keyboard', function () {
   getComponent();
   userEvent.tab();
   expect(screen.getByLabelText(testLabel)).toHaveFocus();
   userEvent.tab();
-  expect(screen.getByLabelText('arrow-up')).not.toHaveFocus();
+  expect(screen.getByLabelText('arrow-up')).toHaveFocus();
   userEvent.tab();
-  expect(screen.getByLabelText('arrow-down')).not.toHaveFocus();
+  expect(screen.getByLabelText('arrow-down')).toHaveFocus();
 });
 test('number field input receiving name attribute', function () {
   var testName = 'testName';