@pingux/astro 1.2.0-alpha.0 → 1.2.0-alpha.12

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

@@ -0,0 +1,246 @@
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/esm/asyncToGenerator";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { Section } from '@react-stately/collections';
+import { axe } from 'jest-axe';
+import { render, screen } from '../../utils/testUtils/testWrapper';
+import { EnvironmentBreadcrumb, Item, OverlayProvider } from '../../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testEnvBreadcrumb = 'test-env-breadcrumb';
+var testName = 'test-name';
+var testSelectedItem = 'test-selected-item';
+var testSearchLabel = 'test-Search-Label';
+var items = [{
+  name: 'a'
+}, {
+  name: 'b'
+}, {
+  name: 'c'
+}];
+var itemsWithSections = [{
+  name: 'Heading 1',
+  options: [{
+    name: 'Foo'
+  }, {
+    name: 'Bar'
+  }, {
+    name: 'Baz'
+  }]
+}];
+var defaultProps = {
+  'data-testid': testEnvBreadcrumb,
+  name: testName,
+  selectedItem: testSelectedItem,
+  searchProps: {
+    label: testSearchLabel
+  },
+  items: items
+};
+var defaultWithSectionsProps = {
+  'data-testid': testEnvBreadcrumb,
+  name: testName,
+  selectedItem: testSelectedItem,
+  searchProps: {
+    label: testSearchLabel
+  },
+  items: itemsWithSections
+};
+var onSelectionChange = jest.fn();
+
+var getComponent = function getComponent(props) {
+  return render(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(EnvironmentBreadcrumb, _extends({}, defaultProps, props), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name
+    }, item.name);
+  })));
+};
+
+var getSectionsComponent = function getSectionsComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  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,
+        name: section.name,
+        items: section.options
+      }, function (item) {
+        return ___EmotionJSX(Item, {
+          key: item.name,
+          childItems: item.options
+        }, item.name);
+      })
+    );
+  })));
+};
+
+beforeAll(function () {
+  jest.spyOn(window.HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  jest.spyOn(window.HTMLElement.prototype, 'clientHeight', 'get').mockImplementation(function () {
+    return 1000;
+  });
+  window.HTMLElement.prototype.scrollIntoView = jest.fn();
+  jest.spyOn(window.screen, 'width', 'get').mockImplementation(function () {
+    return 1024;
+  });
+  jest.spyOn(window, 'requestAnimationFrame').mockImplementation(function (cb) {
+    return cb();
+  });
+  jest.useFakeTimers();
+});
+afterEach(function () {
+  jest.clearAllMocks();
+  onSelectionChange.mockClear();
+});
+afterAll(function () {
+  jest.restoreAllMocks();
+});
+test('should render environment breadcrumb component by default', function () {
+  getComponent();
+  var imageUploadButton = screen.getByTestId(testEnvBreadcrumb);
+  expect(imageUploadButton).toBeInstanceOf(HTMLDivElement);
+  expect(imageUploadButton).toBeInTheDocument();
+});
+test('should display name', function () {
+  getComponent();
+  expect(screen.getByText(testName)).toBeInTheDocument();
+});
+test('should display selectedItem', function () {
+  getComponent();
+  expect(screen.getByText(testSelectedItem)).toBeInTheDocument();
+});
+test('should call onNamePress when name pressed', function () {
+  var onNamePressMock = jest.fn();
+  getComponent({
+    onNamePress: onNamePressMock
+  });
+  expect(onNamePressMock).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testName));
+  expect(onNamePressMock).toHaveBeenCalledTimes(1);
+});
+test('should not call onNamePress when current env button pressed', function () {
+  var onNamePressMock = jest.fn();
+  getComponent({
+    onNamePress: onNamePressMock
+  });
+  expect(onNamePressMock).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(onNamePressMock).not.toHaveBeenCalled();
+});
+test('should render items passed in props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          getComponent();
+          expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+          expect(screen.queryByRole('option')).not.toBeInTheDocument();
+          userEvent.click(screen.getByText(testSelectedItem));
+          expect(screen.queryByRole('listbox')).toBeInTheDocument();
+          expect(screen.queryAllByRole('option')).toHaveLength(3);
+
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));
+test('should render items with sections passed in props', function () {
+  getSectionsComponent();
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryByRole('option')).not.toBeInTheDocument();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.getByRole('group')).toBeInTheDocument();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).toHaveLength(3);
+});
+test('should call onSelectionChange when env clicked', function () {
+  var onSelectionChangeMock = jest.fn();
+  getComponent({
+    onSelectionChange: onSelectionChangeMock
+  });
+  expect(onSelectionChangeMock).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testSelectedItem));
+  userEvent.click(screen.getByText(items[0].name));
+  expect(onSelectionChangeMock).toHaveBeenNthCalledWith(1, items[0].name);
+});
+test('should disable item if his hey passed in the disabledKeys prop', function () {
+  getComponent({
+    disabledKeys: ['a']
+  });
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.getByText(items[0].name)).toHaveClass('is-disabled');
+});
+test('should call onPopoverOpen if it is passed in the props', function () {
+  var onPopoverOpenMock = jest.fn();
+  getComponent({
+    onPopoverOpen: onPopoverOpenMock
+  });
+  expect(onPopoverOpenMock).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(onPopoverOpenMock).toHaveBeenCalled();
+});
+test('should call onPopoverClose if it is passed in the props', function () {
+  var onPopoverCloseMock = jest.fn();
+  getComponent({
+    onPopoverClose: onPopoverCloseMock
+  });
+  expect(onPopoverCloseMock).not.toHaveBeenCalled();
+  userEvent.click(screen.getByText(testSelectedItem));
+  userEvent.click(screen.getByText(testName));
+  expect(onPopoverCloseMock).toHaveBeenCalled();
+});
+test('should close popover when other component clicked', function () {
+  getComponent();
+  userEvent.click(screen.getByText(testSelectedItem));
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).toHaveLength(3);
+  userEvent.click(screen.getByText(testName));
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(screen.queryAllByRole('option')).not.toHaveLength(3);
+});
+test('should render current env node if passed in props', function () {
+  var testSelectedItemId = 'testSelectedItemId';
+  getComponent({
+    selectedItem: ___EmotionJSX("div", {
+      "data-testid": testSelectedItemId
+    })
+  });
+  expect(screen.getByTestId(testSelectedItemId)).toBeInTheDocument();
+});
+test('should show empty state in search if there are no results', function () {
+  var testEmptySearchText = 'testEmptySearchText';
+  getComponent({
+    emptySearchText: testEmptySearchText
+  });
+  userEvent.click(screen.getByText(testSelectedItem));
+  userEvent.type(screen.getByRole('searchbox'), '111');
+  expect(screen.getByText(testEmptySearchText)).toBeInTheDocument();
+});
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+  var _getComponent, container, results;
+
+  return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+    while (1) {
+      switch (_context2.prev = _context2.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent = getComponent(), container = _getComponent.container;
+          _context2.next = 4;
+          return axe(container);
+
+        case 4:
+          results = _context2.sent;
+          expect(results).toHaveNoViolations();
+
+        case 6:
+        case "end":
+          return _context2.stop();
+      }
+    }
+  }, _callee2);
+})));

package/lib/components/EnvironmentBreadcrumb/index.js

@@ -0,0 +1 @@
+export { default } from './EnvironmentBreadcrumb';

package/lib/components/HelpHint/HelpHint.js

@@ -1,12 +1,32 @@
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
 import React, { forwardRef } from 'react';
-import HelpIcon from 'mdi-react/HelpIcon';
 import PropTypes from 'prop-types';
 import IconButton from '../IconButton';
 import TooltipTrigger, { Tooltip } from '../TooltipTrigger';
 import Icon from '../Icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var HelpIcon = function HelpIcon() {
+  return ___EmotionJSX("svg", {
+    width: "7",
+    height: "9",
+    viewBox: "0 0 7 9",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, ___EmotionJSX("path", {
+    d: "M2.56685 7.306V9H4.29385V7.306H2.56685ZM0.795848 3.676H2.41285C2.41285 3.478 2.43485 3.29467 2.47885 3.126C2.52285 2.95 2.58885 2.79967 2.67685 2.675C2.77218 2.543 2.88951 2.44033 3.02885 2.367C3.17551 2.28633 3.34785 2.246 3.54585 2.246C3.83918 2.246 4.06651 2.32667 4.22785 2.488C4.39651 2.64933 4.48085 2.89867 4.48085 3.236C4.48818 3.434 4.45151 3.599 4.37085 3.731C4.29751 3.863 4.19851 3.984 4.07385 4.094C3.94918 4.204 3.81351 4.314 3.66685 4.424C3.52018 4.534 3.38085 4.666 3.24885 4.82C3.11685 4.96667 2.99951 5.14633 2.89685 5.359C2.80151 5.57167 2.74285 5.83567 2.72085 6.151V6.646H4.20585V6.228C4.23518 6.008 4.30485 5.82467 4.41485 5.678C4.53218 5.53133 4.66418 5.403 4.81085 5.293C4.95751 5.17567 5.11151 5.062 5.27285 4.952C5.44151 4.83467 5.59185 4.69533 5.72385 4.534C5.86318 4.37267 5.97685 4.17833 6.06485 3.951C6.16018 3.72367 6.20785 3.434 6.20785 3.082C6.20785 2.86933 6.16018 2.642 6.06485 2.4C5.97685 2.15067 5.82651 1.91967 5.61385 1.707C5.40118 1.49433 5.11885 1.31833 4.76685 1.179C4.42218 1.03233 3.98951 0.959 3.46885 0.959C3.06551 0.959 2.69885 1.02867 2.36885 1.168C2.04618 1.3 1.76751 1.487 1.53285 1.729C1.30551 1.971 1.12585 2.257 0.993848 2.587C0.869181 2.917 0.803181 3.28 0.795848 3.676Z",
+    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,
       tooltipProps = props.tooltipProps,
@@ -14,14 +34,14 @@ var HelpHint = /*#__PURE__*/forwardRef(function (props, ref) {
       others = _objectWithoutProperties(props, ["children", "tooltipProps", "iconButtonProps"]);
 
   return ___EmotionJSX(TooltipTrigger, _extends({
-    ref: ref
-  }, others), ___EmotionJSX(IconButton, _extends({
+    ref: ref,
+    direction: "top"
+  }, others, tooltipProps), ___EmotionJSX(IconButton, _extends({
     variant: "helpHint",
     "aria-label": "label help hint",
     "data-testid": "help-hint__button"
   }, iconButtonProps), ___EmotionJSX(Icon, {
-    icon: HelpIcon,
-    size: "11px"
+    icon: HelpIcon
   })), ___EmotionJSX(Tooltip, tooltipProps, children));
 });
 HelpHint.propTypes = {

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import HelpHint from '.';
+import Box from '../Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'HelpHint',
+  component: HelpHint,
+  argTypes: {
+    children: {
+      description: 'Tooltip content',
+      defaultValue: 'Text of the tooltip right here...',
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+export var Default = function Default(args) {
+  return ___EmotionJSX(Box, {
+    p: 50
+  }, ___EmotionJSX(HelpHint, args));
+};
+export var WithTooltipAndIconButtonProps = function WithTooltipAndIconButtonProps() {
+  return ___EmotionJSX(Box, {
+    p: 50
+  }, ___EmotionJSX(HelpHint, {
+    tooltipProps: {
+      direction: 'bottom'
+    },
+    iconButtonProps: {
+      'aria-label': 'Help hint'
+    }
+  }, "Text of the tooltip right here..."));
+};

package/lib/components/HelpHint/HelpHint.test.js

@@ -0,0 +1,58 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { fireEvent, render, screen } from '../../utils/testUtils/testWrapper';
+import axeTest from '../../utils/testUtils/testAxe';
+import HelpHint from './HelpHint';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var testId = 'help-hint__button';
+var tooltipValue = 'Some text';
+var defaultProps = {
+  children: tooltipValue
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return render(___EmotionJSX(HelpHint, _extends({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+axeTest(getComponent);
+test('renders HelpHint component', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(helpHintButton).toBeInTheDocument();
+});
+test('shows tooltip on hover', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+  fireEvent.mouseMove(helpHintButton);
+  fireEvent.mouseEnter(helpHintButton);
+  expect(screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('shows tooltip on focus', function () {
+  getComponent();
+  var helpHintButton = screen.getByTestId(testId);
+  expect(screen.queryByText(tooltipValue)).not.toBeInTheDocument();
+  userEvent.tab();
+  expect(helpHintButton).toHaveFocus();
+  expect(screen.queryByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies tooltipProps', function () {
+  getComponent({
+    tooltipProps: {
+      isOpen: true
+    }
+  });
+  expect(screen.getByText(tooltipValue)).toBeInTheDocument();
+});
+test('applies iconButtonProps', function () {
+  var newLabel = 'New label';
+  getComponent({
+    iconButtonProps: {
+      'aria-label': newLabel
+    }
+  });
+  expect(screen.getByLabelText(newLabel)).toBeInTheDocument();
+});

package/lib/components/Messages/Messages.reducer.js

@@ -13,7 +13,7 @@ function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 import { messagesReducer as messagesReducerCore, multiMessagesReducer as multiMessagesReducerCore } from './utils';
-var messagesReducer = messagesReducerCore;
+export var messagesReducer = messagesReducerCore;
 export var multiMessagesReducer = multiMessagesReducerCore;
 
 var makeShowMessage = function makeShowMessage(status, timeout) {

package/lib/components/Messages/Messages.stories.js

@@ -23,7 +23,7 @@ import { Item } from '@react-stately/collections';
 import AccountIcon from 'mdi-react/AccountIcon';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { Box, Button, Messages } from '../..';
-import messagesReducer, { multiMessagesReducer } from './Messages.reducer';
+import { messagesReducerStory as messagesReducer, multiMessagesReducerStory as multiMessagesReducer } from './index';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export default {
   title: 'Messages',

package/lib/components/Messages/Messages.test.js

@@ -9,7 +9,7 @@ import { Item } from '@react-stately/collections';
 import userEvent from '@testing-library/user-event';
 import axeTest from '../../utils/testUtils/testAxe';
 import { render, screen } from '../../utils/testUtils/testWrapper';
-import Messages from '.';
+import Messages, { messagesReducerStory, multiMessagesReducerStory } from '.';
 import Button from '../Button';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 jest.mock('@react-aria/live-announcer');
@@ -173,4 +173,14 @@ describe('announcements', function () {
     expect(messages.childElementCount).toBe(1);
     expect(announce).toHaveBeenCalledWith('New message 1', 'polite');
   });
+});
+test('should render messages with messagesReducerStory', function () {
+  getComponent();
+  messagesReducerStory.actions.showSuccessMessage();
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
+});
+test('should render messages with multiMessagesReducerStory', function () {
+  getComponent();
+  multiMessagesReducerStory.actions.showSuccessMessage();
+  expect(screen.getByTestId(testId)).toBeInTheDocument();
 });

package/lib/components/Messages/index.js

@@ -1,2 +1,3 @@
 export { default } from './Messages';
-export * from './utils';
+export * from './utils';
+export { messagesReducer as messagesReducerStory, multiMessagesReducer as multiMessagesReducerStory } from './Messages.reducer';

package/lib/components/MultivaluesField/MultivaluesField.js

@@ -278,7 +278,9 @@ var MultivaluesField = /*#__PURE__*/forwardRef(function (props, ref) {
           height: '100%',
           m: 5,
           mr: 10,
-          py: 2
+          ml: 0,
+          py: 3,
+          pr: 0
         },
         textProps: {
           sx: {

package/lib/components/NumberField/NumberField.js

@@ -22,6 +22,7 @@ import { useNumberField } from '@react-aria/numberfield';
 import { useNumberFieldState } from '@react-stately/numberfield';
 import { useLocale } from '@react-aria/i18n';
 import { mergeProps } from '@react-aria/utils';
+import omit from 'lodash/omit';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { Box, FieldHelperText, Icon, IconButton, Input, Label } from '../../index';
 import { useField, usePropWarning } from '../../hooks';
@@ -94,7 +95,7 @@ var NumberField = /*#__PURE__*/forwardRef(function (props, ref) {
     ref: inputRef // we don't want to merge this props, we want to
     // overwrite them like defaultValue, value, ect.
 
-  }, fieldControlProps, inputProps)), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
+  }, fieldControlProps, omit(inputProps, 'name'))), ControlArrows), helperText && ___EmotionJSX(FieldHelperText, {
     status: status
   }, helperText)));
 });

package/lib/components/NumberField/NumberField.test.js

@@ -128,4 +128,11 @@ test('increment and decrement buttons shouldn\'t be able to be focused via keybo
   expect(screen.getByLabelText('arrow-up')).not.toHaveFocus();
   userEvent.tab();
   expect(screen.getByLabelText('arrow-down')).not.toHaveFocus();
+});
+test('number field input receiving name attribute', function () {
+  var testName = 'testName';
+  getComponent({
+    name: testName
+  });
+  expect(screen.getByLabelText(testLabel)).toHaveAttribute('name', testName);
 });

package/lib/components/OverlayPanel/OverlayPanel.js

@@ -1,9 +1,8 @@
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-import React, { forwardRef, useRef, useImperativeHandle, useEffect, useState } from 'react';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { FocusScope } from '@react-aria/focus';
 import Box from '../Box';
@@ -26,14 +25,8 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
       onClose = _useOverlayPanelState.onClose;
 
   var overlayPanelRef = useRef();
-
-  var _useState = useState(true),
-      _useState2 = _slicedToArray(_useState, 2),
-      contain = _useState2[0],
-      setIsContained = _useState2[1];
   /* istanbul ignore next */
 
-
   useImperativeHandle(ref, function () {
     return overlayPanelRef.current;
   });
@@ -47,18 +40,12 @@ var OverlayPanel = /*#__PURE__*/forwardRef(function (props, ref) {
     e.stopPropagation();
 
     if (e.key === 'Escape') {
-      setIsContained(false);
+      onClose(state, triggerRef, onCloseProp);
     }
   };
 
-  useEffect(function () {
-    if (!contain && onClose) {
-      onClose(state, triggerRef, onCloseProp);
-    }
-  }, [contain]);
   return ___EmotionJSX(FocusScope, {
-    autoFocus: true,
-    contain: contain
+    autoFocus: true
   }, ___EmotionJSX(Box, _extends({
     variant: "overlayPanel.overlayPanel",
     ref: overlayPanelRef

package/lib/components/OverlayPanel/OverlayPanel.test.js

@@ -60,6 +60,13 @@ test('onClose callback fires when provided', function () {
   });
   expect(onClose).toHaveBeenCalled();
 });
+test('custom classname can be passed', function () {
+  getComponent({
+    className: 'testing-class'
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  expect(overlayPanel).toHaveClass('testing-class');
+});
 test('neither callback fires when not provided', function () {
   var onClose = jest.fn();
   getComponent({
@@ -110,4 +117,35 @@ test('triggerRef.current.focus() fires when provided', function () {
     charCode: 27
   });
   expect(focusFunction).toHaveBeenCalled();
+});
+test('triggerRef.current.focus() does not fire when key other than esc is pressed', function () {
+  var onClose = jest.fn();
+  var focusFunction = jest.fn();
+  var state = {
+    close: onClose
+  };
+  var triggerRef = {
+    current: {
+      focus: focusFunction
+    }
+  };
+  getComponent({
+    state: state,
+    children: ___EmotionJSX("div", null, "Test"),
+    triggerRef: triggerRef
+  });
+  var overlayPanel = screen.getByTestId(testId);
+  fireEvent.keyDown(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+  fireEvent.keyUp(overlayPanel, {
+    key: 'KeyA',
+    code: 'KeyA',
+    keyCode: 65,
+    charCode: 65
+  });
+  expect(focusFunction).not.toHaveBeenCalled();
 });

package/lib/components/SearchField/SearchField.stories.js

@@ -101,17 +101,6 @@ export var NoClearButton = function NoClearButton() {
 
   });
 };
-export var MaxLength = function MaxLength(args) {
-  return ___EmotionJSX(SearchField, _extends({}, args, {
-    icon: SearchIcon,
-    "aria-label": "Search Groups",
-    onSubmit: function onSubmit(text) {
-      return alert(text);
-    } // eslint-disable-line no-alert
-    ,
-    maxLength: 9
-  }));
-};
 export var ControlledWithDebouncedInput = function ControlledWithDebouncedInput() {
   var _useState3 = useState(''),
       _useState4 = _slicedToArray(_useState3, 2),

package/lib/components/TextAreaField/TextAreaField.js

@@ -195,7 +195,7 @@ TextAreaField.defaultProps = {
   isReadOnly: false,
   isRequired: false,
   isUnresizable: false,
-  rows: 2,
+  rows: 4,
   status: statuses.DEFAULT
 };
 TextAreaField.displayName = 'TextAreaField';

package/lib/components/TextAreaField/TextAreaField.stories.js

@@ -2,7 +2,6 @@ import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _Object$values from "@babel/runtime-corejs3/core-js-stable/object/values";
 import React, { useState } from 'react';
 import TextAreaField from '.';
-import Box from '../Box';
 import statuses from '../../utils/devUtils/constants/statuses';
 import { modes as labelModes } from '../Label/constants';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -71,34 +70,6 @@ export var FloatLabel = function FloatLabel() {
     labelMode: "float"
   });
 };
-export var LeftLabel = function LeftLabel() {
-  return ___EmotionJSX(Box, {
-    gap: "xl",
-    width: "fit-content"
-  }, ___EmotionJSX(TextAreaField, {
-    label: "Example label",
-    labelMode: "left"
-  }), ___EmotionJSX(TextAreaField, {
-    label: "Example label that is much longer than the previous one",
-    labelMode: "left",
-    status: "error"
-  }), ___EmotionJSX(TextAreaField, {
-    label: "Example label with set width",
-    labelMode: "left",
-    containerProps: {
-      sx: {
-        gridTemplateColumns: '120px auto'
-      }
-    }
-  }));
-};
-LeftLabel.parameters = {
-  docs: {
-    description: {
-      story: 'Users are able to override the default 40% column width when using left label by providing a new gridTemplatesColumn value, as shown in the example below.'
-    }
-  }
-};
 export var Controlled = function Controlled() {
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -152,20 +123,6 @@ export var Error = function Error() {
     status: "error"
   });
 };
-export var Success = function Success() {
-  return ___EmotionJSX(TextAreaField, {
-    helperText: "Here is some helpful text...",
-    label: "Example Label",
-    status: "success"
-  });
-};
-export var Warning = function Warning() {
-  return ___EmotionJSX(TextAreaField, {
-    helperText: "Here is some helpful text...",
-    label: "Example Label",
-    status: "warning"
-  });
-};
 export var WithoutStatusIndicator = function WithoutStatusIndicator() {
   return ___EmotionJSX(TextAreaField, {
     label: "Example Label",