@pingux/astro 1.41.0-alpha.1 → 1.41.0

package/lib/cjs/Patterns/UnsavedChangesPattern.stories.hidden.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = exports.Default = void 0;
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _hooks = require("../hooks");
+
+var _index = require("../index");
+
+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 _default = {
+  title: 'Design Patterns/Unsaved Changes'
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  var state = (0, _hooks.useModalState)();
+
+  var _useState = (0, _react.useState)(''),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      isShowingNeutral = _useState4[0],
+      setIsShowingNeutral = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
+      isShowingSuccess = _useState6[0],
+      setIsShowingSuccess = _useState6[1];
+
+  var closeModalAndClearInput = function closeModalAndClearInput() {
+    setValue('');
+    state.close();
+    setIsShowingNeutral(true);
+    (0, _setTimeout2["default"])(function () {
+      return setIsShowingNeutral(false);
+    }, 3000);
+  };
+
+  var closeModalAndShowSuccess = function closeModalAndShowSuccess() {
+    setValue('');
+    state.close();
+    setIsShowingSuccess(true);
+    (0, _setTimeout2["default"])(function () {
+      return setIsShowingSuccess(null);
+    }, 3000);
+  };
+
+  var sx = {
+    mainContentBox: {
+      p: 'xx'
+    },
+    textFieldBoxStyle: {
+      p: 'sm'
+    },
+    modalTextSaveChanges: {
+      mb: 'lg',
+      fontWeight: '0',
+      fontSize: 'xx',
+      lineHeight: '23px'
+    },
+    modalTextSaveOrDiscard: {
+      mb: 'lg',
+      fontSize: 'md',
+      lineHeight: '17.89px',
+      fontWeight: '0'
+    }
+  };
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.Box, {
+    sx: sx.mainContentBox,
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.Box, {
+    sx: sx.textFieldBoxStyle,
+    gap: "lg"
+  }, (0, _react2.jsx)(_index.TextField, {
+    label: "Place Holder",
+    onChange: function onChange(e) {
+      return setValue(e.target.value);
+    },
+    value: value
+  })), (0, _react2.jsx)(_index.Link, {
+    onPress: state.open,
+    "aria-label": "Open modal"
+  }, "Go Somewhere Else")), state.isOpen && (0, _react2.jsx)(_index.Modal, {
+    isOpen: state.isOpen,
+    onClose: state.close,
+    hasCloseButton: true
+  }, (0, _react2.jsx)(_index.Text, {
+    sx: sx.modalTextSaveChanges,
+    variant: "Bold"
+  }, "Save Changes?"), (0, _react2.jsx)(_index.Text, {
+    sx: sx.modalTextSaveOrDiscard
+  }, "Save or discard your changes before leaving this page."), (0, _react2.jsx)(_index.Box, {
+    isRow: true,
+    gap: "md"
+  }, (0, _react2.jsx)(_index.Button, {
+    variant: "primary",
+    onPress: closeModalAndShowSuccess
+  }, "Save"), (0, _react2.jsx)(_index.Button, {
+    onPress: closeModalAndClearInput
+  }, "Discard Changes"), (0, _react2.jsx)(_index.Button, {
+    variant: "link",
+    onPress: state.close
+  }, "Cancel"))), (0, _react2.jsx)(_index.Messages, null, isShowingNeutral && (0, _react2.jsx)(_index.Item, null, "Changes have been Discarded."), isShowingSuccess && (0, _react2.jsx)(_index.Item, {
+    status: "success"
+  }, "Form has been saved successfully."))));
+};
+
+exports.Default = Default;

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

@@ -61,8 +61,7 @@ var Default = function Default() {
     ml: "sm",
     bg: "background"
   }, (0, _react2.jsx)(_index.Box, {
-    isRow: true,
-    mb: "xs"
+    isRow: true
   }, (0, _react2.jsx)(_index.Chip, {
     label: "Any",
     bg: "neutral.20",
@@ -77,7 +76,6 @@ var Default = function Default() {
       isLast: index === anyConditions.length - 1
     }), (0, _react2.jsx)(_index.Box, {
       mt: "md",
-      ml: "xs",
       variant: "forms.input.container",
       bg: "white",
       isRow: true,

package/lib/cjs/components/Breadcrumbs/Breadcrumbs.js

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

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

@@ -8,7 +8,7 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.WithSpan = exports.Default = void 0;
+exports["default"] = exports.Default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
@@ -86,20 +86,4 @@ var Default = function Default(args) {
   }, "March 2020 Assets"));
 };
 
-exports.Default = Default;
-
-var WithSpan = function WithSpan() {
-  return (0, _react2.jsx)(_Breadcrumbs["default"], {
-    icon: _ChevronRightIcon["default"]
-  }, (0, _react2.jsx)(_collections.Item, {
-    key: "Parent",
-    "aria-label": "parent",
-    elementType: "span"
-  }, "Parent"), (0, _react2.jsx)(_collections.Item, {
-    key: "FonsVernall",
-    "aria-label": "fons-vernall",
-    elementType: "span"
-  }, "Fons Vernall"));
-};
-
-exports.WithSpan = WithSpan;
+exports.Default = Default;

package/lib/cjs/components/Card/Card.js

@@ -18,12 +18,26 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireWildcard(require("react"));
 
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("@react-aria/utils");
+
+var _interactions = require("@react-aria/interactions");
+
+var _focus = require("@react-aria/focus");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _hooks = require("../../hooks");
+
 var _react2 = require("@emotion/react");
 
+var _excluded = ["className", "onHoverStart", "onHoverChange", "onHoverEnd", "onPress", "onPressStart", "onPressEnd", "onPressChange", "onPressUp"];
+
 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; }
@@ -33,11 +47,112 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * See Box for list of props.
  */
 var Card = /*#__PURE__*/(0, _react.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 = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  var _useHover = (0, _interactions.useHover)(props),
+      hoverProps = _useHover.hoverProps,
+      isHovered = _useHover.isHovered;
+
+  var _useFocusRing = (0, _focus.useFocusRing)(),
+      focusProps = _useFocusRing.focusProps,
+      isFocusVisible = _useFocusRing.isFocusVisible;
+
+  var _usePress = (0, _interactions.usePress)({
+    ref: ref,
+    onPress: onPress,
+    onPressStart: onPressStart,
+    onPressEnd: onPressEnd,
+    onPressChange: onPressChange,
+    onPressUp: onPressUp
+  }),
+      pressProps = _usePress.pressProps,
+      isPressed = _usePress.isPressed;
+
+  var _useFocusRing2 = (0, _focus.useFocusRing)({
+    within: true
+  }),
+      focusWithinProps = _useFocusRing2.focusProps,
+      isFocusedWithin = _useFocusRing2.isFocusVisible;
+
+  var _useStatusClasses = (0, _hooks.useStatusClasses)(className, {
+    isHovered: isHovered,
+    isPressed: isPressed,
+    isFocused: isFocusVisible || isFocusedWithin
+  }),
+      classNames = _useStatusClasses.classNames;
+
+  var ariaLabel = props['aria-label'];
   return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    "aria-label": ariaLabel,
     variant: "boxes.card",
-    ref: ref
-  }, props));
+    className: classNames,
+    ref: ref,
+    isFocused: isFocusVisible
+  }, others, (0, _utils.mergeProps)(hoverProps, pressProps, focusProps, focusWithinProps)));
 });
+Card.propTypes = {
+  /** Defines a string value that labels the current element. */
+  'aria-label': _propTypes["default"].string,
+
+  /**
+   * Handler that is called when a hover interaction starts.
+   * (e: HoverEvent) => void
+   */
+  onHoverStart: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when a hover interaction ends.
+  * (e: HoverEvent) => void
+  */
+  onHoverEnd: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when the hover state changes.
+  * (isHovering: boolean) => void
+  */
+  onHoverChange: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when the press is released over the target.
+  * (e: PressEvent) => void
+  */
+  onPress: _propTypes["default"].func,
+
+  /**
+  * Handler that is called when a press interaction starts.
+  * (e: PressEvent) => void
+  */
+  onPressStart: _propTypes["default"].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["default"].func,
+
+  /**
+  * Handler that is called when the press state changes.
+  * (isPressed: boolean) => void
+  */
+  onPressChange: _propTypes["default"].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["default"].func
+};
 Card.displayName = 'Card';
 var _default = Card;
 exports["default"] = _default;

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

@@ -8,23 +8,23 @@ _Object$defineProperty(exports, "__esModule", {
   value: true
 });
 
-exports["default"] = exports.Default = exports.CardRow = void 0;
+exports["default"] = exports.InteractiveCard = exports.Default = exports.CardRow = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
-var _Card = _interopRequireDefault(require("./Card"));
+var _react = _interopRequireDefault(require("react"));
 
-var _Box = _interopRequireDefault(require("../Box"));
+var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
 var _default = {
   title: 'Components/Card',
-  component: _Card["default"],
+  component: _index.Card,
   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: {}
       },
@@ -37,12 +37,12 @@ var _default = {
 exports["default"] = _default;
 
 var Default = function Default(args) {
-  return (0, _react2.jsx)(_Card["default"], args);
+  return (0, _react2.jsx)(_index.Card, args);
 };
 
 exports.Default = Default;
 
-var CardRow = function CardRow() {
+var CardRow = function CardRow(args) {
   var sx = {
     li: {
       display: 'inline',
@@ -53,27 +53,55 @@ var CardRow = function CardRow() {
       display: 'block'
     }
   };
-  return (0, _react2.jsx)(_Box["default"], {
+  return (0, _react2.jsx)(_index.Box, {
     isRow: true,
     gap: "md",
     as: "ul",
     pl: "0px"
-  }, (0, _react2.jsx)(_Box["default"], {
+  }, (0, _react2.jsx)(_index.Box, {
     as: "li",
     sx: sx.li
-  }, (0, _react2.jsx)(_Card["default"], {
+  }, (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({
     sx: sx.card
-  }, "First")), (0, _react2.jsx)(_Box["default"], {
+  }, args))), (0, _react2.jsx)(_index.Box, {
     as: "li",
     sx: sx.li
-  }, (0, _react2.jsx)(_Card["default"], {
+  }, (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({
     sx: sx.card
-  }, "Second")), (0, _react2.jsx)(_Box["default"], {
+  }, args))), (0, _react2.jsx)(_index.Box, {
     as: "li",
     sx: sx.li
-  }, (0, _react2.jsx)(_Card["default"], {
+  }, (0, _react2.jsx)(_index.Card, (0, _extends2["default"])({
     sx: sx.card
-  }, "Third")));
+  }, args))));
+};
+
+exports.CardRow = CardRow;
+
+var InteractiveCard = function InteractiveCard() {
+  var sx = {
+    alignContent: 'center',
+    height: '221px',
+    justifyContent: 'center',
+    textAlign: 'center',
+    width: '233px'
+  };
+  return (0, _react2.jsx)(_index.Card, {
+    onPress: function onPress() {
+      return console.log('card pressed');
+    },
+    onHoverStart: function onHoverStart() {
+      return console.log('card hovered');
+    },
+    tabIndex: "0",
+    sx: sx
+  }, "Interactive Card", (0, _react2.jsx)(_index.Button, {
+    variant: "inline",
+    mt: "md",
+    onPress: function onPress() {
+      return console.log('button pressed');
+    }
+  }, "Explore"));
 };
 
-exports.CardRow = CardRow;
+exports.InteractiveCard = InteractiveCard;

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

@@ -8,6 +8,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
 var _Card = _interopRequireDefault(require("./Card"));
 
 var _Button = _interopRequireDefault(require("../Button"));
@@ -45,4 +47,52 @@ test('renders children within Card component', function () {
   var mockedChildren = _react2.screen.getByRole('button');
 
   expect(mockedChildren).toBeInTheDocument();
+});
+test('card allows hover, focus, and press events', function () {
+  var children = (0, _react3.jsx)(_Button["default"], null);
+  var onPress = jest.fn();
+  getComponent({
+    children: children,
+    onPress: onPress,
+    tabIndex: 0
+  });
+
+  var card = _react2.screen.getByTestId(testId);
+
+  expect(card).not.toHaveClass('is-hovered');
+
+  _userEvent["default"].hover(card);
+
+  expect(card).toHaveClass('is-hovered');
+
+  _userEvent["default"].click(card);
+
+  expect(onPress).toHaveBeenCalled();
+  expect(card).not.toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(card).toHaveClass('is-focused');
+});
+test('allows focus within card', function () {
+  var children = (0, _react3.jsx)(_Button["default"], null);
+  getComponent({
+    children: children,
+    tabIndex: 0
+  });
+
+  var button = _react2.screen.getByRole('button');
+
+  var card = _react2.screen.getByTestId(testId);
+
+  expect(button).not.toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(button).not.toHaveClass('is-focused');
+  expect(card).toHaveClass('is-focused');
+
+  _userEvent["default"].tab();
+
+  expect(button).toHaveClass('is-focused');
 });

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

@@ -134,6 +134,7 @@ var animals = [{
 }];
 var withSection = [{
   name: 'Animals',
+  key: 'Animals',
   children: [{
     name: 'Raccoon'
   }, {
@@ -143,6 +144,7 @@ var withSection = [{
   }]
 }, {
   name: 'People',
+  key: 'People',
   children: [{
     name: 'Michael'
   }, {
@@ -150,6 +152,16 @@ var withSection = [{
   }, {
     name: 'Creed'
   }]
+}, {
+  name: null,
+  key: 'fruit',
+  children: [{
+    name: 'Apple'
+  }, {
+    name: 'Orange'
+  }, {
+    name: 'Banana'
+  }]
 }];
 var actions = {
   onOpenChange: (0, _addonActions.action)('onOpenChange'),
@@ -243,7 +255,7 @@ var WithSections = function WithSections(args) {
     items: withSection
   }, args), function (section) {
     return (0, _react2.jsx)(_.Section, {
-      key: section.name,
+      key: section.key,
       items: section.children,
       title: section.name
     }, function (item) {

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

@@ -82,6 +82,37 @@ var items = [{
   name: 'Snake',
   id: '3'
 }];
+var withSection = [{
+  name: 'Animals',
+  key: 'Animals',
+  kids: [{
+    name: 'Raccoon'
+  }, {
+    name: 'Kangaroo'
+  }, {
+    name: 'Opossum'
+  }]
+}, {
+  name: 'People',
+  key: 'People',
+  kids: [{
+    name: 'Michael'
+  }, {
+    name: 'Dwight'
+  }, {
+    name: 'Creed'
+  }]
+}, {
+  name: null,
+  key: 'fruit',
+  kids: [{
+    name: 'Apple'
+  }, {
+    name: 'Orange'
+  }, {
+    name: 'Banana'
+  }]
+}];
 var defaultProps = {
   defaultItems: items,
   label: 'Test Label'
@@ -102,6 +133,28 @@ var getComponent = function getComponent() {
   })));
 };
 
+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, _react3.jsx)(_index.OverlayProvider, null, (0, _react3.jsx)(_index.ComboBoxField, (0, _extends2["default"])({}, defaultProps, props, {
+    items: withSection
+  }), function (section) {
+    return (0, _react3.jsx)(_index.Section, {
+      key: section.key,
+      items: section.kids,
+      title: section.name
+    }, function (item) {
+      return (0, _react3.jsx)(_index.Item, {
+        key: item.name
+      }, item.name);
+    });
+  })));
+};
+
 var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
   var _useFilter = (0, _i18n.useFilter)({
     sensitivity: 'base'
@@ -118,8 +171,8 @@ var ComboBoxWithCustomFilter = function ComboBoxWithCustomFilter() {
       setFieldState = _useState2[1];
 
   var onSelectionChange = function onSelectionChange(key) {
-    var selectedItem = (0, _filter["default"])(items).call(items, function (_ref2) {
-      var id = _ref2.id;
+    var selectedItem = (0, _filter["default"])(items).call(items, function (_ref3) {
+      var id = _ref3.id;
       return id === key;
     });
     setFieldState({
@@ -189,8 +242,8 @@ var ComboBoxWithAddOption = function ComboBoxWithAddOption() {
       setSelectedKey = _useState8[1];
 
   var onSelectionChange = function onSelectionChange(key) {
-    if (key && !(0, _find["default"])(options).call(options, function (_ref3) {
-      var name = _ref3.name;
+    if (key && !(0, _find["default"])(options).call(options, function (_ref4) {
+      var name = _ref4.name;
       return name === key;
     })) {
       var _context;
@@ -1216,6 +1269,24 @@ test('popover closes on input blur', function () {
   expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
 });
+test('passing sections, renders separators', function () {
+  getComponentWithSections();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryAllByRole('separator')).toHaveLength(4);
+});
+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();
+});
 describe('when isReadOnly is true', function () {
   var testProp = {
     isReadOnly: true