@pingux/astro 1.41.0-alpha.1 → 1.41.0

package/lib/cjs/components/DataTable/DataTable.js

@@ -97,10 +97,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__*/(0, _react.forwardRef)(function (props, ref) {
@@ -256,12 +275,30 @@ var DataTable = /*#__PURE__*/(0, _react.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["default"].string,
 
+  /** Sets the height of table. */
+  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
+
+  /** Determine if the header should be hidden. */
+  hasHiddenHeader: _propTypes["default"].bool,
+
+  /** Bool that determines if the items are sortable. */
+  isSortable: _propTypes["default"].bool,
+
+  /** The list of DataTable items. */
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({})),
+
+  /** Reflects current loading state. */
+  loadingState: _propTypes["default"].oneOf(['error', 'filtering', 'idle', 'loading', 'loadingMore', 'sorting']),
+
+  /** Handler that is called when a user performs an action on a row. */
+  onAction: _propTypes["default"].func,
+
   /**
    * Sets the overflow behavior for the cell contents.
    * overflowMode: 'wrap' | 'truncate'
@@ -269,10 +306,17 @@ DataTable.propTypes = {
    */
   overflowMode: _propTypes["default"].string,
 
-  /** Handler that is called when a user performs an action on a row. */
-  onAction: _propTypes["default"].func,
-  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
-  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
+  /** Callback function that fires when more data should be loaded on demand as user scrolls. */
+  onLoadMore: _propTypes["default"].func,
+
+  /** Callback function that fires when sortable column header is pressed. */
+  onSortChange: _propTypes["default"].func,
+
+  /** Defines the current column key to sort by and the sort direction. */
+  sortDescriptor: _propTypes["default"].oneOf(['ascending', 'descending']),
+
+  /** Sets the width of table. */
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
 };
 DataTable.defaultProps = {
   width: '100%',

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

@@ -1,5 +1,19 @@
 "use strict";
 
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+
 var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
 
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
@@ -12,6 +26,10 @@ exports["default"] = exports.Default = exports.CustomContent = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
 
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _setTimeout2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/set-timeout"));
+
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
 
 var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
@@ -30,6 +48,8 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _data = require("@react-stately/data");
@@ -42,10 +62,16 @@ var _faker = require("@faker-js/faker");
 
 var _isChromatic = _interopRequireDefault(require("chromatic/isChromatic"));
 
+var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
+
 var _index = require("../../index");
 
 var _react2 = require("@emotion/react");
 
+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) { (0, _defineProperty2["default"])(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; }
+
 var _default = {
   title: 'Components/DataTable',
   component: _index.DataTable,
@@ -56,34 +82,68 @@ var _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.'
     }
-  }
+  }, _ariaAttributes.ariaAttributeBaseArgTypes)
 };
 exports["default"] = _default;
 
@@ -120,7 +180,8 @@ var Default = function Default(args) {
     continent: 'Europe'
   }];
   return (0, _react2.jsx)(_index.DataTable, (0, _extends2["default"])({}, args, {
-    "aria-label": "Static table"
+    "aria-label": "Static table",
+    height: "100%"
   }), (0, _react2.jsx)(_index.DataTableHeader, {
     columns: columns
   }, function (column) {
@@ -170,12 +231,17 @@ var CustomContent = function CustomContent(args) {
     key: 'menu',
     isSortable: false
   }];
+
+  var random = function random(items) {
+    return items[Math.floor(Math.random() * items.length)];
+  };
+
   var list = (0, _data.useAsyncList)({
     load: function load(_ref) {
       return (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
         var _context, _context2, _context3;
 
-        var signal, cursor, res, json, random, fakeData, tableData;
+        var signal, cursor, res, json, fakeData, tableData;
         return _regenerator["default"].wrap(function _callee$(_context5) {
           while (1) {
             switch (_context5.prev = _context5.next) {
@@ -199,11 +265,12 @@ var CustomContent = function CustomContent(args) {
 
               case 7:
                 json = _context5.sent;
+                _context5.next = 10;
+                return new _promise["default"](function (resolve) {
+                  return (0, _setTimeout2["default"])(resolve, cursor ? 2000 : 3000);
+                });
 
-                random = function random(items) {
-                  return items[Math.floor(Math.random() * items.length)];
-                };
-
+              case 10:
                 fakeData = (0, _map["default"])(_context = (0, _concat["default"])(_context2 = []).call(_context2, (0, _keys["default"])(_context3 = Array(json.results.length)).call(_context3))).call(_context, function (key) {
                   var _context4;
 
@@ -233,7 +300,7 @@ var CustomContent = function CustomContent(args) {
                   cursor: json.next
                 });
 
-              case 12:
+              case 13:
               case "end":
                 return _context5.stop();
             }

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

@@ -936,7 +936,7 @@ describe('Sortable DataTable with useAsyncList', function () {
   var sortableDataTable = function sortableDataTable(_ref16) {
     var result = _ref16.result;
     return (0, _react2.render)((0, _react3.jsx)(_DataTable["default"], (0, _extends2["default"])({}, defaultProps, {
-      sortDescriptor: result.current.sortDescriptor,
+      sortDescriptor: result.current.sortDescriptor.direction,
       onSortChange: (0, _sort2["default"])(result.current)
     }), (0, _react3.jsx)(_index.DataTableHeader, {
       columns: columns
@@ -1290,16 +1290,48 @@ 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 (0, _react2.render)((0, _react3.jsx)(_DataTable["default"], {
+      "aria-label": "Table"
+    }, (0, _react3.jsx)(_index.DataTableHeader, {
+      columns: columns
+    }, function (column) {
+      return (0, _react3.jsx)(_index.DataTableColumn, {
+        align: "center"
+      }, column.name);
+    }), (0, _react3.jsx)(_index.DataTableBody, null, [])));
+  };
+
+  it('should display header row only when there are no items', function () {
+    staticDataTable();
+
+    var staticTable = _react2.screen.getByRole('grid');
+
+    var tRows = (0, _react2.within)(staticTable).getByRole('row');
+    expect(staticTable).toBeInTheDocument();
+    expect(staticTable).toBeVisible();
+    expect(tRows).toBeInTheDocument();
+  });
 });

package/lib/cjs/components/EnvironmentBreadcrumb/EnvironmentBreadcrumb.js

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

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

@@ -108,6 +108,7 @@ var defaultEnvironments = [{
 }];
 var environmentsWithSections = [{
   name: 'Recent',
+  key: 'Recent',
   options: [{
     name: 'Default'
   }, {
@@ -117,6 +118,7 @@ var environmentsWithSections = [{
   }]
 }, {
   name: 'All',
+  key: 'All',
   options: [{
     name: 'Consumer Banking Prod'
   }, {
@@ -133,6 +135,17 @@ var environmentsWithSections = [{
   }, {
     name: 'Mine'
   }]
+}, {
+  name: null,
+  key: 'Other',
+  options: [{
+    name: 'Default'
+  }, {
+    name: 'Auth test',
+    isSandbox: true
+  }, {
+    name: 'Mike’s Workforce'
+  }]
 }];
 
 var Default = function Default(args) {
@@ -270,12 +283,14 @@ 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 (0, _react2.jsx)(_index.Section, {
-      key: sectionName,
+      key: sectionKey,
       title: sectionName,
       items: sectionOptions
     }, function (_ref4) {

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

@@ -63,6 +63,7 @@ var items = [{
 }];
 var itemsWithSections = [{
   name: 'Heading 1',
+  key: 'Heading 1',
   options: [{
     name: 'Foo'
   }, {
@@ -72,12 +73,13 @@ var itemsWithSections = [{
   }]
 }, {
   name: 'Heading 2',
+  key: 'Heading 2',
   options: [{
-    name: 'Foo'
+    name: 'Foo1'
   }, {
-    name: 'Zod'
+    name: 'Bar1'
   }, {
-    name: 'Zay'
+    name: 'Baz1'
   }]
 }];
 var defaultProps = {
@@ -118,7 +120,8 @@ var getSectionsComponent = function getSectionsComponent() {
   return (0, _testWrapper.render)((0, _react2.jsx)(_index.OverlayProvider, null, (0, _react2.jsx)(_index.EnvironmentBreadcrumb, (0, _extends2["default"])({}, defaultWithSectionsProps, props), function (section) {
     return (// eslint-disable-next-line testing-library/no-node-access
       (0, _react2.jsx)(_collections.Section, {
-        key: section.name,
+        key: section.key,
+        name: section.name,
         title: section.name,
         items: section.options
       }, function (item) {
@@ -241,6 +244,17 @@ test('should render items with sections passed in props', function () {
 
   _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
 
+  expect(_testWrapper.screen.getAllByRole('group')).toHaveLength(2);
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(6);
+});
+test('should render the separators', function () {
+  getSectionsComponent();
+
+  _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem));
+
+  expect(_testWrapper.screen.queryAllByRole('separator')).toHaveLength(3);
+
   var groups = _testWrapper.screen.getAllByRole('group');
 
   expect(groups).toHaveLength(2);
@@ -409,7 +423,7 @@ test('should hide section title if no search results within it', function () {
   _userEvent["default"].click(_testWrapper.screen.getByText(testSelectedItem)); // Search for option exclusive to only one section
 
 
-  _userEvent["default"].type(_testWrapper.screen.getByRole('searchbox'), 'Zod'); // 'Heading 1' should not be rendered, but 'Heading 2' should be
+  _userEvent["default"].type(_testWrapper.screen.getByRole('searchbox'), 'Bar1'); // 'Heading 1' should not be rendered, but 'Heading 2' should be
 
 
   expect(_testWrapper.screen.queryByText(itemsWithSections[0].name)).not.toBeInTheDocument();

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

@@ -125,7 +125,7 @@ exports.FallbackImage = FallbackImage;
 
 var WithSkeletonLoadSuccess = function WithSkeletonLoadSuccess(_ref2) {
   var useLocalSrc = _ref2.useLocalSrc;
-  var imageSrc = useLocalSrc ? _images.pingImg : 'https://deelay.me/3000/https://picsum.photos/150/150';
+  var imageSrc = useLocalSrc ? _images.pingImg : 'https://app.requestly.io/delay/3000/https://picsum.photos/150/150';
   return (0, _react2.jsx)(_["default"], {
     src: imageSrc,
     sx: {
@@ -143,7 +143,7 @@ WithSkeletonLoadSuccess.args = {
 
 var WithSkeletonLoadTimeout = function WithSkeletonLoadTimeout() {
   return (0, _react2.jsx)(_["default"], {
-    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/cjs/components/ListBox/ListBoxSection.js

@@ -28,8 +28,12 @@ var _i18n = require("@react-aria/i18n");
 
 var _virtualizer = require("@react-aria/virtualizer");
 
+var _ListBoxContext = require("./ListBoxContext");
+
 var _Box = _interopRequireDefault(require("../Box"));
 
+var _Separator = _interopRequireDefault(require("../Separator"));
+
 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); }
@@ -58,6 +62,7 @@ var ListBoxSection = function ListBoxSection(props) {
   var _useLocale = (0, _i18n.useLocale)(),
       direction = _useLocale.direction;
 
+  var state = (0, _react.useContext)(_ListBoxContext.ListBoxContext);
   return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
     as: "ul",
     ref: headerRef,
@@ -66,7 +71,9 @@ var ListBoxSection = function ListBoxSection(props) {
     sx: {
       paddingInlineStart: '0px'
     }
-  }, groupProps), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
+  }, groupProps), item.key !== state.collection.getFirstKey() && (0, _react2.jsx)(_Separator["default"], {
+    mt: "0px"
+  }), item.rendered && (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({}, headingProps, {
     variant: "boxes.listBoxSectionTitle"
   }), item.rendered)), (0, _react2.jsx)(_Box["default"], {
     style: (0, _virtualizer.layoutInfoToStyle)(reusableView.layoutInfo, direction)

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

@@ -572,14 +572,15 @@ var ListElement = function ListElement(_ref) {
   }, (0, _react2.jsx)(_Icon["default"], {
     icon: _FormSelectIcon["default"],
     mr: "sm",
-    color: "text.primary",
+    color: "accent.40",
     size: "md"
   }), (0, _react2.jsx)(_Text["default"], {
     variant: "itemTitle",
     alignSelf: "center"
   }, item.name)), (0, _react2.jsx)(_Box["default"], {
     isRow: true,
-    alignSelf: "center"
+    alignSelf: "center",
+    gap: "sm"
   }, (0, _react2.jsx)(_IconButton["default"], {
     "aria-label": "create-icon"
   }, (0, _react2.jsx)(_Icon["default"], {
@@ -611,14 +612,15 @@ var Default = function Default(_ref2) {
     }, (0, _react2.jsx)(_Icon["default"], {
       icon: _FormSelectIcon["default"],
       mr: "sm",
-      color: "text.primary",
+      color: "accent.40",
       size: "md"
     }), (0, _react2.jsx)(_Text["default"], {
       variant: "itemTitle",
       alignSelf: "center"
     }, item.name)), (0, _react2.jsx)(_Box["default"], {
       isRow: true,
-      alignSelf: "center"
+      alignSelf: "center",
+      gap: "sm"
     }, (0, _react2.jsx)(_IconButton["default"], {
       "aria-label": "create-icon"
     }, (0, _react2.jsx)(_Icon["default"], {

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) {