@pingux/astro 1.41.0-alpha.1 → 1.41.0

package/lib/components/DataTable/DataTable.js

@@ -52,10 +52,29 @@ var ROW_HEIGHTS = {
   }
 };
 /**
- * DataTable component using react aria Spectrum TableView
- * Primarily utilizes [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
- * Cross platform state management react hook for DataTable
- * Primarily utilizes [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
+ * Inspired by [TableView](https://react-spectrum.adobe.com/react-spectrum/TableView.html)
+ * from React Spectrum and [useTableState](https://react-spectrum.adobe.com/react-stately/useTableState.html)
+ * from React Stately.
+ *
+ * DataTable is a complex collection component that is built from many child elements including
+ * columns, rows and cells. Columns are defined within DataTableHeader element via DataTableColumn
+ * and rows are defined within a DataTableBody element via DataTableRow. Rows contain DataTableCell
+ * elements that correspond to each column.
+ *
+ * [TableHeader](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=defined%20using%20the-,TableHeader,-%2C%20Column%2C)
+ * uses the alias DataTableHeader.
+ *
+ * [Column](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=the%20TableHeader%2C-,Column,-%2C%20TableBody%2C)
+ * uses the alias DataTableColumn.
+ *
+ * [Cell](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=Row%2C%20and-,Cell,-components%2C%20which%20support)
+ * uses the alias DataTableCell.
+ *
+ * [Row](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20TableBody%2C-,Row,-%2C%20and%20Cell%20components)
+ * uses the alias DataTableCell.
+ *
+ * [TableBody](https://react-spectrum.adobe.com/react-aria/useTable.html#:~:text=%2C%20Column%2C-,TableBody,-%2C%20Row%2C%20and)
+ * uses the alias DataTableBody.
 */
 
 var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
@@ -211,12 +230,30 @@ var DataTable = /*#__PURE__*/forwardRef(function (props, ref) {
 });
 DataTable.propTypes = {
   /**
-   * Sets the amount of vertical padding within each cell.
-   * density: 'compact' | 'regular' | 'spacious'
-   * @default 'regular'
-   */
+    * Sets the amount of vertical padding within each cell.
+    * density: 'compact' | 'regular' | 'spacious'
+    * @default 'regular'
+  */
   density: PropTypes.string,
 
+  /** Sets the height of table. */
+  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
+  /** Determine if the header should be hidden. */
+  hasHiddenHeader: PropTypes.bool,
+
+  /** Bool that determines if the items are sortable. */
+  isSortable: PropTypes.bool,
+
+  /** The list of DataTable items. */
+  items: PropTypes.arrayOf(PropTypes.shape({})),
+
+  /** Reflects current loading state. */
+  loadingState: PropTypes.oneOf(['error', 'filtering', 'idle', 'loading', 'loadingMore', 'sorting']),
+
+  /** Handler that is called when a user performs an action on a row. */
+  onAction: PropTypes.func,
+
   /**
    * Sets the overflow behavior for the cell contents.
    * overflowMode: 'wrap' | 'truncate'
@@ -224,10 +261,17 @@ DataTable.propTypes = {
    */
   overflowMode: PropTypes.string,
 
-  /** Handler that is called when a user performs an action on a row. */
-  onAction: PropTypes.func,
-  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  height: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  /** Callback function that fires when more data should be loaded on demand as user scrolls. */
+  onLoadMore: PropTypes.func,
+
+  /** Callback function that fires when sortable column header is pressed. */
+  onSortChange: PropTypes.func,
+
+  /** Defines the current column key to sort by and the sort direction. */
+  sortDescriptor: PropTypes.oneOf(['ascending', 'descending']),
+
+  /** Sets the width of table. */
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
 DataTable.defaultProps = {
   width: '100%',

package/lib/components/DataTable/DataTable.stories.js

@@ -1,6 +1,17 @@
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
 import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Promise from "@babel/runtime-corejs3/core-js-stable/promise";
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _keysInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/keys";
@@ -8,12 +19,18 @@ import _Object$assign from "@babel/runtime-corejs3/core-js-stable/object/assign"
 import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context8, _context9; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context8 = ownKeys(Object(source), !0)).call(_context8, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context9 = ownKeys(Object(source))).call(_context9, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 import React from 'react';
 import { useAsyncList } from '@react-stately/data';
 import ApplicationIcon from 'mdi-react/ApplicationIcon';
 import { action } from '@storybook/addon-actions';
 import { faker } from '@faker-js/faker';
 import isChromatic from 'chromatic/isChromatic';
+import { ariaAttributeBaseArgTypes } from '../../utils/devUtils/props/ariaAttributes';
 import { DataTable, DataTableBody, DataTableCell, DataTableColumn, DataTableHeader, DataTableRow, DataTableChip, DataTableMenu, DataTableMultiLine } from '../../index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
@@ -26,34 +43,68 @@ export default {
       }
     }
   },
-  argTypes: {
+  argTypes: _objectSpread({
     density: {
       control: {
-        type: 'radio',
-        options: ['compact', 'regular', 'spacious']
+        disable: true
       },
       defaultValue: 'spacious'
     },
     overflowMode: {
       control: {
-        type: 'radio',
-        options: ['truncate', 'wrap']
+        disable: true
       },
       defaultValue: 'truncate'
     },
     width: {
-      defaultValue: '100%',
+      description: 'Sets the width of the data table.',
       control: {
-        type: 'text'
+        disable: true
       }
     },
     height: {
-      defaultValue: 565,
+      description: 'Sets the height of the data table.',
+      control: {
+        disable: true
+      }
+    },
+    sortDescriptor: {
+      description: 'Defines the current column key to sort by and the sort direction.',
+      control: {
+        disable: true
+      }
+    },
+    onSortChange: {
+      description: 'Callback function that fires when sortable column header is pressed.'
+    },
+    allowsSorting: {
+      description: 'Determine if the column supports sorting.',
+      control: {
+        disable: true
+      }
+    },
+    hideHeader: {
+      description: 'Determine if the header should be hidden.',
+      control: {
+        disable: true
+      }
+    },
+    loadingState: {
+      description: 'Reflects current loading state.',
       control: {
-        type: 'number'
+        disable: true
       }
+    },
+    onLoadMore: {
+      description: 'Callback function that fires when more data should be loaded on demand as user scrolls.'
+    },
+    items: {
+      control: {
+        disable: true
+      },
+      description: 'The list of DataTable items.'
     }
-  }
+  }, ariaAttributeBaseArgTypes)
 };
 export var Default = function Default(args) {
   var columns = [{
@@ -88,7 +139,8 @@ export var Default = function Default(args) {
     continent: 'Europe'
   }];
   return ___EmotionJSX(DataTable, _extends({}, args, {
-    "aria-label": "Static table"
+    "aria-label": "Static table",
+    height: "100%"
   }), ___EmotionJSX(DataTableHeader, {
     columns: columns
   }, function (column) {
@@ -135,12 +187,17 @@ export var CustomContent = function CustomContent(args) {
     key: 'menu',
     isSortable: false
   }];
+
+  var random = function random(items) {
+    return items[Math.floor(Math.random() * items.length)];
+  };
+
   var list = useAsyncList({
     load: function load(_ref) {
       return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
         var _context, _context2, _context3;
 
-        var signal, cursor, res, json, random, fakeData, tableData;
+        var signal, cursor, res, json, fakeData, tableData;
         return _regeneratorRuntime.wrap(function _callee$(_context5) {
           while (1) {
             switch (_context5.prev = _context5.next) {
@@ -164,11 +221,12 @@ export var CustomContent = function CustomContent(args) {
 
               case 7:
                 json = _context5.sent;
+                _context5.next = 10;
+                return new _Promise(function (resolve) {
+                  return _setTimeout(resolve, cursor ? 2000 : 3000);
+                });
 
-                random = function random(items) {
-                  return items[Math.floor(Math.random() * items.length)];
-                };
-
+              case 10:
                 fakeData = _mapInstanceProperty(_context = _concatInstanceProperty(_context2 = []).call(_context2, _keysInstanceProperty(_context3 = Array(json.results.length)).call(_context3))).call(_context, function (key) {
                   var _context4;
 
@@ -198,7 +256,7 @@ export var CustomContent = function CustomContent(args) {
                   cursor: json.next
                 });
 
-              case 12:
+              case 13:
               case "end":
                 return _context5.stop();
             }

package/lib/components/DataTable/DataTable.test.js

@@ -885,7 +885,7 @@ describe('Sortable DataTable with useAsyncList', function () {
   var sortableDataTable = function sortableDataTable(_ref16) {
     var result = _ref16.result;
     return render(___EmotionJSX(DataTable, _extends({}, defaultProps, {
-      sortDescriptor: result.current.sortDescriptor,
+      sortDescriptor: result.current.sortDescriptor.direction,
       onSortChange: _sortInstanceProperty(result.current)
     }), ___EmotionJSX(DataTableHeader, {
       columns: columns
@@ -1239,16 +1239,46 @@ describe('Sortable DataTable with useAsyncList', function () {
             })));
 
           case 31:
-            expect(result.current.items[0].country).toBe('USA');
-            expect(result.current.items[1].country).toBe('France');
-            expect(result.current.items[2].country).toBe('China');
-            expect(result.current.items[3].country).toBe('Canada');
+            expect(result.current.items[0].country).toBe('Canada');
+            expect(result.current.items[1].country).toBe('China');
+            expect(result.current.items[2].country).toBe('France');
+            expect(result.current.items[3].country).toBe('USA');
+            expect(result.current.items[0].continent).toBe('North America');
+            expect(result.current.items[1].continent).toBe('Asia');
+            expect(result.current.items[2].continent).toBe('Europe');
+            expect(result.current.items[3].continent).toBe('North America');
+            expect(result.current.items[0].population).toBe(37000000);
+            expect(result.current.items[1].population).toBe(1398000000);
+            expect(result.current.items[2].population).toBe(67000000);
+            expect(result.current.items[3].population).toBe(320000000);
 
-          case 35:
+          case 43:
           case "end":
             return _context34.stop();
         }
       }
     }, _callee30);
   })));
+});
+describe('Empty DataTable', function () {
+  var staticDataTable = function staticDataTable() {
+    return render(___EmotionJSX(DataTable, {
+      "aria-label": "Table"
+    }, ___EmotionJSX(DataTableHeader, {
+      columns: columns
+    }, function (column) {
+      return ___EmotionJSX(DataTableColumn, {
+        align: "center"
+      }, column.name);
+    }), ___EmotionJSX(DataTableBody, null, [])));
+  };
+
+  it('should display header row only when there are no items', function () {
+    staticDataTable();
+    var staticTable = screen.getByRole('grid');
+    var tRows = within(staticTable).getByRole('row');
+    expect(staticTable).toBeInTheDocument();
+    expect(staticTable).toBeVisible();
+    expect(tRows).toBeInTheDocument();
+  });
 });

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

@@ -271,7 +271,7 @@ var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
     iconProps: {
       color: 'neutral.70',
       mx: 5,
-      size: 16
+      size: 'xs'
     }
   }, others), ___EmotionJSX(Item, {
     key: "name",

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.stories.js

@@ -68,6 +68,7 @@ var defaultEnvironments = [{
 }];
 var environmentsWithSections = [{
   name: 'Recent',
+  key: 'Recent',
   options: [{
     name: 'Default'
   }, {
@@ -77,6 +78,7 @@ var environmentsWithSections = [{
   }]
 }, {
   name: 'All',
+  key: 'All',
   options: [{
     name: 'Consumer Banking Prod'
   }, {
@@ -93,6 +95,17 @@ var environmentsWithSections = [{
   }, {
     name: 'Mine'
   }]
+}, {
+  name: null,
+  key: 'Other',
+  options: [{
+    name: 'Default'
+  }, {
+    name: 'Auth test',
+    isSandbox: true
+  }, {
+    name: 'Mike’s Workforce'
+  }]
 }];
 export var Default = function Default(args) {
   var _useState = useState({
@@ -230,12 +243,14 @@ export var WithSections = function WithSections() {
     items: environments,
     name: "Globochem",
     selectedItem: envNode,
-    onSelectionChange: handleEnvPress
+    onSelectionChange: handleEnvPress,
+    isDefaultOpen: true
   }, function (_ref3) {
     var sectionName = _ref3.name,
-        sectionOptions = _ref3.options;
+        sectionOptions = _ref3.options,
+        sectionKey = _ref3.key;
     return ___EmotionJSX(Section, {
-      key: sectionName,
+      key: sectionKey,
       title: sectionName,
       items: sectionOptions
     }, function (_ref4) {

package/lib/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.test.js

@@ -37,6 +37,7 @@ var items = [{
 }];
 var itemsWithSections = [{
   name: 'Heading 1',
+  key: 'Heading 1',
   options: [{
     name: 'Foo'
   }, {
@@ -46,12 +47,13 @@ var itemsWithSections = [{
   }]
 }, {
   name: 'Heading 2',
+  key: 'Heading 2',
   options: [{
-    name: 'Foo'
+    name: 'Foo1'
   }, {
-    name: 'Zod'
+    name: 'Bar1'
   }, {
-    name: 'Zay'
+    name: 'Baz1'
   }]
 }];
 var defaultProps = {
@@ -92,7 +94,8 @@ var getSectionsComponent = function getSectionsComponent() {
   return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultWithSectionsProps, props), function (section) {
     return (// eslint-disable-next-line testing-library/no-node-access
       ___EmotionJSX(Section, {
-        key: section.name,
+        key: section.key,
+        name: section.name,
         title: section.name,
         items: section.options
       }, function (item) {
@@ -199,6 +202,14 @@ test('should render items with sections passed in props', function () {
   expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
   expect(screen.queryByRole('option')).not.toBeInTheDocument();
   userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.getAllByRole('group')).toHaveLength(2);
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).toHaveLength(6);
+});
+test('should render the separators', function () {
+  getSectionsComponent();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.queryAllByRole('separator')).toHaveLength(3);
   var groups = screen.getAllByRole('group');
   expect(groups).toHaveLength(2);
   expect(screen.queryByRole('listbox')).toBeInTheDocument();
@@ -342,7 +353,7 @@ test('should hide section title if no search results within it', function () {
 
   userEvent.click(screen.getByText(testSelectedItem)); // Search for option exclusive to only one section
 
-  userEvent.type(screen.getByRole('searchbox'), 'Zod'); // 'Heading 1' should not be rendered, but 'Heading 2' should be
+  userEvent.type(screen.getByRole('searchbox'), 'Bar1'); // 'Heading 1' should not be rendered, but 'Heading 2' should be
 
   expect(screen.queryByText(itemsWithSections[0].name)).not.toBeInTheDocument();
   expect(screen.queryByText(itemsWithSections[1].name)).toBeInTheDocument();

package/lib/components/Image/Image.stories.js

@@ -78,7 +78,7 @@ export var FallbackImage = function FallbackImage() {
 };
 export var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
   var useLocalSrc = _ref2.useLocalSrc;
-  var imageSrc = useLocalSrc ? pingImg : 'https://deelay.me/3000/https://picsum.photos/150/150';
+  var imageSrc = useLocalSrc ? pingImg : 'https://app.requestly.io/delay/3000/https://picsum.photos/150/150';
   return ___EmotionJSX(Image, {
     src: imageSrc,
     sx: {
@@ -93,7 +93,7 @@ WithSkeletonLoadSuccess.args = {
 };
 export var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
   return ___EmotionJSX(Image, {
-    src: "https://deelay.me/7000/https://picsum.photos/150/150",
+    src: "https://app.requestly.io/delay/7000/https://picsum.photos/150/150",
     sx: {
       width: '150px',
       height: '150px'

package/lib/components/ListBox/ListBoxSection.js

@@ -1,10 +1,12 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
-import React, { useRef } from 'react';
+import React, { useRef, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useListBoxSection } from '@react-aria/listbox';
 import { useLocale } from '@react-aria/i18n';
 import { layoutInfoToStyle, useVirtualizerItem } from '@react-aria/virtualizer';
+import { ListBoxContext } from './ListBoxContext';
 import Box from '../Box';
+import Separator from '../Separator';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 var ListBoxSection = function ListBoxSection(props) {
@@ -29,6 +31,7 @@ var ListBoxSection = function ListBoxSection(props) {
   var _useLocale = useLocale(),
       direction = _useLocale.direction;
 
+  var state = useContext(ListBoxContext);
   return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Box, _extends({
     as: "ul",
     ref: headerRef,
@@ -37,7 +40,9 @@ var ListBoxSection = function ListBoxSection(props) {
     sx: {
       paddingInlineStart: '0px'
     }
-  }, groupProps), item.rendered && ___EmotionJSX(Box, _extends({}, headingProps, {
+  }, groupProps), item.key !== state.collection.getFirstKey() && ___EmotionJSX(Separator, {
+    mt: "0px"
+  }), item.rendered && ___EmotionJSX(Box, _extends({}, headingProps, {
     variant: "boxes.listBoxSectionTitle"
   }), item.rendered)), ___EmotionJSX(Box, {
     style: layoutInfoToStyle(reusableView.layoutInfo, direction)

package/lib/components/ListView/ListView.stories.js

@@ -536,14 +536,15 @@ var ListElement = function ListElement(_ref) {
   }, ___EmotionJSX(Icon, {
     icon: FormSelectIcon,
     mr: "sm",
-    color: "text.primary",
+    color: "accent.40",
     size: "md"
   }), ___EmotionJSX(Text, {
     variant: "itemTitle",
     alignSelf: "center"
   }, item.name)), ___EmotionJSX(Box, {
     isRow: true,
-    alignSelf: "center"
+    alignSelf: "center",
+    gap: "sm"
   }, ___EmotionJSX(IconButton, {
     "aria-label": "create-icon"
   }, ___EmotionJSX(Icon, {
@@ -576,14 +577,15 @@ export var Default = function Default(_ref2) {
     }, ___EmotionJSX(Icon, {
       icon: FormSelectIcon,
       mr: "sm",
-      color: "text.primary",
+      color: "accent.40",
       size: "md"
     }), ___EmotionJSX(Text, {
       variant: "itemTitle",
       alignSelf: "center"
     }, item.name)), ___EmotionJSX(Box, {
       isRow: true,
-      alignSelf: "center"
+      alignSelf: "center",
+      gap: "sm"
     }, ___EmotionJSX(IconButton, {
       "aria-label": "create-icon"
     }, ___EmotionJSX(Icon, {

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

@@ -167,7 +167,8 @@ export var InnerPanel = function InnerPanel(_ref2) {
     }, "Open Panel"), outer), messagesOpen && ___EmotionJSX(Messages, {
       sx: {
         zIndex: 11
-      }
+      },
+      onClose: toggleMessagesOpen
     }, ___EmotionJSX(Item, {
       key: "message2",
       status: "success"

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

@@ -80,6 +80,7 @@ var animals = [{
 }];
 var withSection = [{
   name: 'Animals',
+  key: 'Animals',
   children: [{
     name: 'Aardvark'
   }, {
@@ -89,6 +90,7 @@ var withSection = [{
   }]
 }, {
   name: 'People',
+  key: 'People',
   children: [{
     name: 'Michael'
   }, {
@@ -96,6 +98,16 @@ var withSection = [{
   }, {
     name: 'Creed'
   }]
+}, {
+  name: null,
+  key: 'Fruit',
+  children: [{
+    name: 'Apple'
+  }, {
+    name: 'Strawberry'
+  }, {
+    name: 'Blueberry'
+  }]
 }];
 export default {
   title: 'Form/SelectField',
@@ -174,7 +186,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) {

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

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import React from 'react';
+import { OverlayProvider } from '@react-aria/overlays';
+import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import { SelectField, Item } from '../../index';
+import { SelectField, Item, Section } from '../../index';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var items = [{
@@ -12,6 +14,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';
@@ -37,6 +70,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 ? render : _ref2$renderFn;
+
+  return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(SelectField, _extends({}, defaultProps, props, {
+    items: withSection
+  }), function (section) {
+    return ___EmotionJSX(Section, {
+      key: section.key,
+      items: section.kids,
+      title: section.name
+    }, function (item) {
+      return ___EmotionJSX(Item, {
+        key: item.name
+      }, item.name);
+    });
+  })));
 }; // Need to be added to each test file to test accessibility using axe.
 
 
@@ -82,4 +137,16 @@ 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(screen.getByRole('button')).toHaveAttribute('aria-describedby', helperTextID);
+});
+test('passing sections, renders separators', function () {
+  getComponentWithSections();
+  var button = screen.getByRole('button');
+  userEvent.click(button);
+  expect(screen.queryAllByRole('separator')).toHaveLength(2);
+});
+test('a blank title does not render', function () {
+  getComponentWithSections();
+  var button = screen.getByRole('button');
+  userEvent.click(button);
+  expect(screen.queryByText('Fruit')).not.toBeInTheDocument();
 });