@pingux/astro 1.41.0-alpha.1 → 1.41.0-alpha.3

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,20 @@ 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 DocsLayout from '../../../.storybook/storybookDocsLayout';
+import DataTableReadme from './DataTable.mdx';
+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 {
@@ -21,39 +40,76 @@ export default {
   component: DataTable,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(DataTableReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }
     }
   },
-  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: {
-        type: 'number'
+        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: {
+        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 +144,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 +192,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 +226,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 +261,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

@@ -39,8 +39,6 @@ export var breadCrumbDataIds = {
   environmentButton: 'breadcrumb--environment-button',
   orgButton: 'breadcrumb--org-button'
 };
-/** The Environment Picker with Search and Sections support */
-
 var EnvironmentBreadcrumb = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       imperativeDisabledKeys = props.disabledKeys,
@@ -271,7 +269,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

@@ -22,12 +22,17 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import React, { useState } from 'react';
 import EnvironmentBreadcrumb from './EnvironmentBreadcrumb';
 import { Item, Section, Chip, Box, Text } from '../../index';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import EnvironmentBreadcrumbReadme from './EnvironmentBreadcrumb.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/EnvironmentBreadcrumb',
   component: EnvironmentBreadcrumb,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EnvironmentBreadcrumbReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }
@@ -68,6 +73,7 @@ var defaultEnvironments = [{
 }];
 var environmentsWithSections = [{
   name: 'Recent',
+  key: 'Recent',
   options: [{
     name: 'Default'
   }, {
@@ -77,6 +83,7 @@ var environmentsWithSections = [{
   }]
 }, {
   name: 'All',
+  key: 'All',
   options: [{
     name: 'Consumer Banking Prod'
   }, {
@@ -93,6 +100,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 +248,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/HelpHint/HelpHint.js

@@ -21,13 +21,6 @@ var HelpIcon = function HelpIcon() {
     fill: "#3B4A58"
   }));
 };
-/**
- * A `HelpHint` is a composed component using tooltip trigger and icon button.
- *
- * For customization the trigger icon,
- * please see the [TooltipTrigger](./?path=/docs/tooltiptrigger--default) docs.
- */
-
 
 var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,

package/lib/components/HelpHint/HelpHint.stories.js

@@ -1,10 +1,19 @@
 import React from 'react';
 import HelpHint from '.';
 import Box from '../Box';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import HelpHintReadme from './HelpHint.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/HelpHint',
   component: HelpHint,
+  parameters: {
+    docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(HelpHintReadme, null), ___EmotionJSX(DocsLayout, null));
+      }
+    }
+  },
   argTypes: {
     children: {
       description: 'Tooltip content',

package/lib/components/Icon/Icon.js

@@ -17,19 +17,6 @@ import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Box from '../Box';
 import { useTShirtSize } from '../../hooks';
-/**
- * Basic icon component.
- * Icons will fill the given container, which is '1em' x '1em' by default, and will maintain their
- * aspect ratio.
- * Use SVGR to import SVG files as React components and pass them into this component, and you can
- * use the theme to color the icon. But ensure you pass `dimensions: false` in webpack config
- * (see [SVGR docs](https://react-svgr.com/docs/options/#dimensions)).
- * Otherwise icon will not be resizable by `size` prop.
- * Icons can also be used from the [Material UI Icon Library](https://materialdesignicons.com/).
- * Built on top of the [Box from Theme-UI](https://theme-ui.com/components/box/) and uses the
- * available [props from Theme-UI](https://theme-ui.com/sx-prop).
-*/
-
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var Icon = /*#__PURE__*/forwardRef(function (props, ref) {
   var color = props.color,

package/lib/components/Icon/Icon.stories.js

@@ -12,12 +12,17 @@ import { v4 as uuid } from 'uuid';
 import { Box, Icon, Table, TableBody, TableCell, TableHead, TableRow, Text } from '../../index';
 import { flatColorList } from '../../styles/colors';
 import { tShirtSizes } from '../../utils/devUtils/constants/tShirtSizes';
+import DocsLayout from '../../../.storybook/storybookDocsLayout';
+import IconReadme from './Icon.mdx';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Components/Icon',
   component: Icon,
   parameters: {
     docs: {
+      page: function page() {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(IconReadme, null), ___EmotionJSX(DocsLayout, null));
+      },
       source: {
         type: 'code'
       }

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