@pingux/astro 1.41.0-alpha.0 → 1.41.0-alpha.2

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

@@ -26,6 +26,8 @@ var _loadingStates = _interopRequireDefault(require("../../utils/devUtils/consta
 
 var _ListView = _interopRequireDefault(require("./ListView"));
 
+var _CheckboxField = _interopRequireDefault(require("../CheckboxField"));
+
 var _react2 = require("@emotion/react");
 
 var items = [{
@@ -104,6 +106,31 @@ var getComponentEmpty = function getComponentEmpty() {
   }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props))));
 };
 
+var getComponentWithCheckbox = function getComponentWithCheckbox() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref3$renderFn = _ref3.renderFn,
+      renderFn = _ref3$renderFn === void 0 ? _testWrapper.render : _ref3$renderFn;
+
+  return renderFn((0, _react2.jsx)(_focus.FocusScope, {
+    restoreFocus: true
+  }, (0, _react2.jsx)(_ListView["default"], (0, _extends2["default"])({}, defaultProps, props, {
+    items: items
+  }), function (item) {
+    return (0, _react2.jsx)(_collections.Item, {
+      key: item.key,
+      textValue: item.name,
+      "data-id": item.key
+    }, (0, _react2.jsx)(_CheckboxField["default"], {
+      label: item.name,
+      containerProps: {
+        'data-testid': 'TestID'
+      }
+    }));
+  })));
+};
+
 test('renders listview component', function () {
   getComponent();
 
@@ -354,4 +381,15 @@ test('when user navigates with tab and arrows keys, onFocus is called and the is
       }
     }
   }, _callee7);
-})));
+})));
+test('list view not receive focus when click on checkbox', function () {
+  getComponentWithCheckbox();
+
+  var listItem = _testWrapper.screen.getAllByRole('gridcell');
+
+  var checkbox = _testWrapper.screen.getAllByTestId('TestID');
+
+  expect(listItem[0]).not.toHaveClass('is-focused');
+  checkbox[0].click();
+  expect(listItem[0]).not.toHaveClass('is-focused');
+});

package/lib/cjs/components/OverlayPanel/OverlayPanel.stories.js

@@ -207,7 +207,8 @@ var InnerPanel = function InnerPanel(_ref2) {
     }, "Open Panel"), outer), messagesOpen && (0, _react2.jsx)(_index.Messages, {
       sx: {
         zIndex: 11
-      }
+      },
+      onClose: toggleMessagesOpen
     }, (0, _react2.jsx)(_collections.Item, {
       key: "message2",
       status: "success"

package/lib/cjs/components/SelectField/SelectField.stories.js

@@ -122,6 +122,7 @@ var animals = [{
 }];
 var withSection = [{
   name: 'Animals',
+  key: 'Animals',
   children: [{
     name: 'Aardvark'
   }, {
@@ -131,6 +132,7 @@ var withSection = [{
   }]
 }, {
   name: 'People',
+  key: 'People',
   children: [{
     name: 'Michael'
   }, {
@@ -138,6 +140,16 @@ var withSection = [{
   }, {
     name: 'Creed'
   }]
+}, {
+  name: null,
+  key: 'Fruit',
+  children: [{
+    name: 'Apple'
+  }, {
+    name: 'Strawberry'
+  }, {
+    name: 'Blueberry'
+  }]
 }];
 var _default = {
   title: 'Form/SelectField',
@@ -221,7 +233,7 @@ var WithSections = function WithSections(args) {
     items: withSection
   }, args), function (section) {
     return (0, _react2.jsx)(_2.Section, {
-      key: section.name,
+      key: section.key,
       items: section.children,
       title: section.name
     }, function (item) {

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

@@ -6,6 +6,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
 
 var _react = _interopRequireDefault(require("react"));
 
+var _overlays = require("@react-aria/overlays");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
 var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
 
 var _testWrapper = require("../../utils/testUtils/testWrapper");
@@ -23,6 +27,37 @@ var items = [{
 }, {
   name: 'c'
 }];
+var withSection = [{
+  name: 'Animals',
+  key: 'Animals',
+  kids: [{
+    name: 'Aardvark'
+  }, {
+    name: 'Kangaroo'
+  }, {
+    name: 'Snake'
+  }]
+}, {
+  name: 'People',
+  key: 'People',
+  kids: [{
+    name: 'Michael'
+  }, {
+    name: 'Dwight'
+  }, {
+    name: 'Creed'
+  }]
+}, {
+  name: null,
+  key: 'Fruit',
+  kids: [{
+    name: 'Apple'
+  }, {
+    name: 'Strawberry'
+  }, {
+    name: 'Blueberry'
+  }]
+}];
 var testId = 'test-dropdown';
 var controlTestId = "".concat(testId, "-input");
 var testValue = 'test';
@@ -48,6 +83,28 @@ var getComponent = function getComponent() {
       key: item.name
     }, item.name);
   }));
+};
+
+var getComponentWithSections = function getComponentWithSections() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref2$renderFn = _ref2.renderFn,
+      renderFn = _ref2$renderFn === void 0 ? _testWrapper.render : _ref2$renderFn;
+
+  return renderFn((0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_index.SelectField, (0, _extends2["default"])({}, defaultProps, props, {
+    items: withSection
+  }), function (section) {
+    return (0, _react2.jsx)(_index.Section, {
+      key: section.key,
+      items: section.kids,
+      title: section.name
+    }, function (item) {
+      return (0, _react2.jsx)(_index.Item, {
+        key: item.name
+      }, item.name);
+    });
+  })));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -102,4 +159,22 @@ test('passing helper text should display it and correct aria attributes on input
   expect(visibleInput).toHaveAttribute('aria-invalid', 'true');
   var helperTextID = helper.getAttribute('id');
   expect(_testWrapper.screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
+});
+test('passing sections, renders separators', function () {
+  getComponentWithSections();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryAllByRole('separator')).toHaveLength(2);
+});
+test('a blank title does not render', function () {
+  getComponentWithSections();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByText('Fruit')).not.toBeInTheDocument();
 });

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

@@ -141,7 +141,6 @@ var Default = function Default() {
       isRow: true,
       key: item.key
     }, (0, _react2.jsx)(_index.Bracket, null), (0, _react2.jsx)(_index.Box, {
-      ml: "3px",
       width: "100%"
     }, (0, _react2.jsx)(_index.Box, {
       variant: "forms.input.container",

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

@@ -128,14 +128,15 @@ var Default = function Default(_ref) {
     }, (0, _react2.jsx)(_index.Icon, {
       icon: _FormSelectIcon["default"],
       mr: "sm",
-      color: "text.primary",
+      color: "accent.40",
       size: 25
     }), (0, _react2.jsx)(_index.Text, {
       variant: "itemTitle",
       alignSelf: "center"
     }, item.name)), (0, _react2.jsx)(_index.Box, {
       isRow: true,
-      alignSelf: "center"
+      alignSelf: "center",
+      gap: "sm"
     }, (0, _react2.jsx)(_index.IconButton, {
       "aria-label": "create-icon"
     }, (0, _react2.jsx)(_index.Icon, {

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

@@ -667,14 +667,10 @@ var buttons = [{
 
 var Default = function Default() {
   var state = (0, _useModalState["default"])();
-  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Button, {
-    onPress: state.open,
-    "aria-label": "Open modal"
-  }, "Open Modal"), state.isOpen && (0, _react2.jsx)(_index.Modal, {
-    isOpen: state.isOpen,
+  return (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Modal, {
+    isOpen: true,
     onClose: state.close,
-    contentProps: sx.contentProps,
-    isDismissable: true
+    contentProps: sx.contentProps
   }, (0, _react2.jsx)(_index.Box, {
     contentProps: true
   }, (0, _react2.jsx)(_index.IconButton, {
@@ -701,7 +697,7 @@ var Default = function Default() {
     }, (0, _react2.jsx)(_index.Icon, {
       icon: button.icon,
       sx: sx.iconStyle,
-      size: "58"
+      size: 58
     }), (0, _react2.jsx)(_index.Text, {
       sx: sx.buttonLabelStyle
     }, button.name)));

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

@@ -36,13 +36,13 @@ var base = {
   display: 'flex'
 };
 var card = {
-  boxShadow: 'standard',
+  boxShadow: '0px 1px 14px rgba(37, 55, 70, 0.15)',
+  borderRadius: '3px',
   p: 'lg',
-  alignItems: 'center',
-  justifyContent: 'center',
   flex: '1 1 0',
-  fontWeight: 1,
-  fontSize: 'md'
+  fontWeight: 0,
+  fontSize: 'md',
+  color: 'text.primary'
 }; // Used to give a border to radio elements
 
 var radioContainer = {
@@ -96,7 +96,7 @@ var listViewItem = _objectSpread(_objectSpread({}, base), {}, {
   },
   '&.has-separator': {
     borderBottom: '1px solid',
-    borderBottomColor: 'line.hairline'
+    borderBottomColor: 'neutral.80'
   },
   '&.is-focused': {
     boxShadow: '0 0 0 1px inset #D033FF'

package/lib/cjs/utils/devUtils/constants/text.js

@@ -0,0 +1,11 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.DummyText = void 0;
+var DummyText = "\nSed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,\ntotam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae\ndicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, \nsed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, \nqui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora\nincidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum\nexercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel\neum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem \neum fugiat quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis \npraesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate \nnon provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. \nEt harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi \noptio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis \ndolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et \nvoluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut \nreiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.\n";
+exports.DummyText = DummyText;

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

@@ -41,8 +41,7 @@ export var Default = function Default() {
     ml: "sm",
     bg: "background"
   }, ___EmotionJSX(Box, {
-    isRow: true,
-    mb: "xs"
+    isRow: true
   }, ___EmotionJSX(Chip, {
     label: "Any",
     bg: "neutral.20",
@@ -57,7 +56,6 @@ export var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), ___EmotionJSX(Box, {
       mt: "md",
-      ml: "xs",
       variant: "forms.input.container",
       bg: "white",
       isRow: true,

package/lib/components/Breadcrumbs/Breadcrumbs.js

@@ -55,7 +55,7 @@ var Breadcrumbs = /*#__PURE__*/forwardRef(function (props, ref) {
       "aria-hidden": "true",
       icon: icon,
       mx: 5,
-      size: 16
+      size: "xs"
     }, iconProps)));
   }, [children.length, filteredChildren, icon, iconProps, onAction]);
   return ___EmotionJSX("nav", {

package/lib/components/Breadcrumbs/Breadcrumbs.stories.js

@@ -61,17 +61,4 @@ export var Default = function Default(args) {
     "data-id": "march",
     href: "https://www.pingidentity.com"
   }, "March 2020 Assets"));
-};
-export var WithSpan = function WithSpan() {
-  return ___EmotionJSX(Breadcrumbs, {
-    icon: ChevronRightIcon
-  }, ___EmotionJSX(Item, {
-    key: "Parent",
-    "aria-label": "parent",
-    elementType: "span"
-  }, "Parent"), ___EmotionJSX(Item, {
-    key: "FonsVernall",
-    "aria-label": "fons-vernall",
-    elementType: "span"
-  }, "Fons Vernall"));
 };

package/lib/components/Card/Card.js

@@ -1,6 +1,13 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp"];
 import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { mergeProps } from '@react-aria/utils';
+import { useHover, usePress } from '@react-aria/interactions';
+import { useFocusRing } from '@react-aria/focus';
 import Box from '../Box';
+import { useStatusClasses } from '../../hooks';
 /**
  * A Box component built for the common "Card" use case. Has default variant of card.
  * See Box for list of props.
@@ -8,10 +15,111 @@ import Box from '../Box';
 
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Card = /*#__PURE__*/forwardRef(function (props, ref) {
+  var className = props.className,
+      onHoverStart = props.onHoverStart,
+      onHoverChange = props.onHoverChange,
+      onHoverEnd = props.onHoverEnd,
+      onPress = props.onPress,
+      onPressStart = props.onPressStart,
+      onPressEnd = props.onPressEnd,
+      onPressChange = props.onPressChange,
+      onPressUp = props.onPressUp,
+      others = _objectWithoutProperties(props, _excluded);
+
+  var _useHover = useHover(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useFocusRing = useFocusRing(),
+      focusProps = _useFocusRing.focusProps,
+      isFocusVisible = _useFocusRing.isFocusVisible;
+
+  var _usePress = usePress({
+    ref: ref,
+    onPress: onPress,
+    onPressStart: onPressStart,
+    onPressEnd: onPressEnd,
+    onPressChange: onPressChange,
+    onPressUp: onPressUp
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
+  var _useFocusRing2 = useFocusRing({
+    within: true
+  }),
+      focusWithinProps = _useFocusRing2.focusProps,
+      isFocusedWithin = _useFocusRing2.isFocusVisible;
+
+  var _useStatusClasses = useStatusClasses(className, {
+    isHovered: isHovered,
+    isPressed: isPressed,
+    isFocused: isFocusVisible || isFocusedWithin
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var ariaLabel = props['aria-label'];
   return ___EmotionJSX(Box, _extends({
+    "aria-label": ariaLabel,
     variant: "boxes.card",
-    ref: ref
-  }, props));
+    className: classNames,
+    ref: ref,
+    isFocused: isFocusVisible
+  }, others, mergeProps(hoverProps, pressProps, focusProps, focusWithinProps)));
 });
+Card.propTypes = {
+  /** Defines a string value that labels the current element. */
+  'aria-label': PropTypes.string,
+
+  /**
+   * Handler that is called when a hover interaction starts.
+   * (e: HoverEvent) => void
+   */
+  onHoverStart: PropTypes.func,
+
+  /**
+  * Handler that is called when a hover interaction ends.
+  * (e: HoverEvent) => void
+  */
+  onHoverEnd: PropTypes.func,
+
+  /**
+  * Handler that is called when the hover state changes.
+  * (isHovering: boolean) => void
+  */
+  onHoverChange: PropTypes.func,
+
+  /**
+  * Handler that is called when the press is released over the target.
+  * (e: PressEvent) => void
+  */
+  onPress: PropTypes.func,
+
+  /**
+  * Handler that is called when a press interaction starts.
+  * (e: PressEvent) => void
+  */
+  onPressStart: PropTypes.func,
+
+  /**
+  * Handler that is called when a press interaction ends, either over the target or when the
+  * pointer leaves the target.
+  * (e: PressEvent) => void
+  */
+  onPressEnd: PropTypes.func,
+
+  /**
+  * Handler that is called when the press state changes.
+  * (isPressed: boolean) => void
+  */
+  onPressChange: PropTypes.func,
+
+  /**
+  * Handler that is called when a press is released over the target, regardless of whether it
+  * started on the target or not.
+  * (e: PressEvent) => void
+  */
+  onPressUp: PropTypes.func
+};
 Card.displayName = 'Card';
 export default Card;

package/lib/components/Card/Card.stories.js

@@ -1,6 +1,6 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
-import Card from './Card';
-import Box from '../Box';
+import { Box, Button, Card } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Card',
@@ -8,7 +8,7 @@ export default {
   argTypes: {
     children: {
       description: 'Card content.',
-      defaultValue: 'Card Children',
+      defaultValue: 'Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut at enim nunc. Cras congue consequat odio, ac sodales lacus imperdiet quis. In id ex eu lorem sollicitudin hendrerit feugiat ultrices elit. Curabitur imperdiet libero vitae luctus blandit. Ut ac dignissim tortor. Pellentesque convallis eu metus vitae mollis. Donec sapien felis, laoreet eu egestas eu, blandit quis tellus. Donec luctus suscipit nibh, et tincidunt nisl facilisis ut. Mauris molestie purus at lectus venenatis, ac ultrices felis ultrices.',
       table: {
         type: {}
       },
@@ -21,7 +21,7 @@ export default {
 export var Default = function Default(args) {
   return ___EmotionJSX(Card, args);
 };
-export var CardRow = function CardRow() {
+export var CardRow = function CardRow(args) {
   var sx = {
     li: {
       display: 'inline',
@@ -40,17 +40,42 @@ export var CardRow = function CardRow() {
   }, ___EmotionJSX(Box, {
     as: "li",
     sx: sx.li
-  }, ___EmotionJSX(Card, {
+  }, ___EmotionJSX(Card, _extends({
     sx: sx.card
-  }, "First")), ___EmotionJSX(Box, {
+  }, args))), ___EmotionJSX(Box, {
     as: "li",
     sx: sx.li
-  }, ___EmotionJSX(Card, {
+  }, ___EmotionJSX(Card, _extends({
     sx: sx.card
-  }, "Second")), ___EmotionJSX(Box, {
+  }, args))), ___EmotionJSX(Box, {
     as: "li",
     sx: sx.li
-  }, ___EmotionJSX(Card, {
+  }, ___EmotionJSX(Card, _extends({
     sx: sx.card
-  }, "Third")));
+  }, args))));
+};
+export var InteractiveCard = function InteractiveCard() {
+  var sx = {
+    alignContent: 'center',
+    height: '221px',
+    justifyContent: 'center',
+    textAlign: 'center',
+    width: '233px'
+  };
+  return ___EmotionJSX(Card, {
+    onPress: function onPress() {
+      return console.log('card pressed');
+    },
+    onHoverStart: function onHoverStart() {
+      return console.log('card hovered');
+    },
+    tabIndex: "0",
+    sx: sx
+  }, "Interactive Card", ___EmotionJSX(Button, {
+    variant: "inline",
+    mt: "md",
+    onPress: function onPress() {
+      return console.log('button pressed');
+    }
+  }, "Explore"));
 };

package/lib/components/Card/Card.test.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import Card from './Card';
 import Button from '../Button';
 import axeTest from '../../utils/testUtils/testAxe';
@@ -31,4 +32,39 @@ test('renders children within Card component', function () {
   });
   var mockedChildren = screen.getByRole('button');
   expect(mockedChildren).toBeInTheDocument();
+});
+test('card allows hover, focus, and press events', function () {
+  var children = ___EmotionJSX(Button, null);
+
+  var onPress = jest.fn();
+  getComponent({
+    children: children,
+    onPress: onPress,
+    tabIndex: 0
+  });
+  var card = screen.getByTestId(testId);
+  expect(card).not.toHaveClass('is-hovered');
+  userEvent.hover(card);
+  expect(card).toHaveClass('is-hovered');
+  userEvent.click(card);
+  expect(onPress).toHaveBeenCalled();
+  expect(card).not.toHaveClass('is-focused');
+  userEvent.tab();
+  expect(card).toHaveClass('is-focused');
+});
+test('allows focus within card', function () {
+  var children = ___EmotionJSX(Button, null);
+
+  getComponent({
+    children: children,
+    tabIndex: 0
+  });
+  var button = screen.getByRole('button');
+  var card = screen.getByTestId(testId);
+  expect(button).not.toHaveClass('is-focused');
+  userEvent.tab();
+  expect(button).not.toHaveClass('is-focused');
+  expect(card).toHaveClass('is-focused');
+  userEvent.tab();
+  expect(button).toHaveClass('is-focused');
 });

package/lib/components/CheckboxField/CheckboxField.js

@@ -17,6 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React, { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
 import { useCheckbox } from '@react-aria/checkbox';
 import { useToggleState } from '@react-stately/toggle';
+import { usePress } from '@react-aria/interactions';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
 import { Box, Checkbox, FieldHelperText, Label } from '../../';
@@ -47,6 +48,9 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
     defaultSelected: isDefaultSelected || controlProps.isDefaultSelected
   }, props), controlProps);
 
+  var _usePress = usePress(props),
+      containerPressProps = _usePress.pressProps;
+
   var state = useToggleState(checkboxProps);
   var checkboxRef = useRef();
   usePropWarning(props, 'disabled', 'isDisabled');
@@ -66,7 +70,7 @@ var CheckboxField = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useCheckbox = useCheckbox(checkboxProps, state, checkboxRef),
       inputProps = _useCheckbox.inputProps;
 
-  var _useField = useField(_objectSpread(_objectSpread({}, props), {}, {
+  var _useField = useField(_objectSpread(_objectSpread(_objectSpread({}, containerPressProps), props), {}, {
     statusClasses: {
       isIndeterminate: isIndeterminate
     },

package/lib/components/ComboBoxField/ComboBoxField.stories.js

@@ -88,6 +88,7 @@ var animals = [{
 }];
 var withSection = [{
   name: 'Animals',
+  key: 'Animals',
   children: [{
     name: 'Raccoon'
   }, {
@@ -97,6 +98,7 @@ var withSection = [{
   }]
 }, {
   name: 'People',
+  key: 'People',
   children: [{
     name: 'Michael'
   }, {
@@ -104,6 +106,16 @@ var withSection = [{
   }, {
     name: 'Creed'
   }]
+}, {
+  name: null,
+  key: 'fruit',
+  children: [{
+    name: 'Apple'
+  }, {
+    name: 'Orange'
+  }, {
+    name: 'Banana'
+  }]
 }];
 var actions = {
   onOpenChange: action('onOpenChange'),
@@ -192,7 +204,7 @@ export var WithSections = function WithSections(args) {
     items: withSection
   }, args), function (section) {
     return ___EmotionJSX(Section, {
-      key: section.name,
+      key: section.key,
       items: section.children,
       title: section.name
     }, function (item) {