@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.2

package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js

@@ -0,0 +1,197 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty2 = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty2(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-property"));
+
+var _defineProperties = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/define-properties"));
+
+var _getOwnPropertyDescriptors = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _getOwnPropertyDescriptor = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _select = require("@react-aria/select");
+
+var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = _interopRequireDefault(require("../Button"));
+
+var _FieldHelperText = _interopRequireDefault(require("../FieldHelperText"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _Label = _interopRequireDefault(require("../Label"));
+
+var _constants = require("../Label/constants");
+
+var _Loader = _interopRequireDefault(require("../Loader"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _react2 = require("@emotion/react");
+
+function ownKeys(object, enumerableOnly) { var keys = (0, _keys["default"])(object); if (_getOwnPropertySymbols["default"]) { var symbols = (0, _getOwnPropertySymbols["default"])(object); if (enumerableOnly) symbols = (0, _filter["default"])(symbols).call(symbols, function (sym) { return (0, _getOwnPropertyDescriptor["default"])(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; (0, _forEach["default"])(_context = ownKeys(Object(source), true)).call(_context, function (key) { (0, _defineProperty3["default"])(target, key, source[key]); }); } else if (_getOwnPropertyDescriptors["default"]) { (0, _defineProperties["default"])(target, (0, _getOwnPropertyDescriptors["default"])(source)); } else { var _context2; (0, _forEach["default"])(_context2 = ownKeys(Object(source))).call(_context2, function (key) { (0, _defineProperty2["default"])(target, key, (0, _getOwnPropertyDescriptor["default"])(source, key)); }); } } return target; }
+
+/**
+ * Select field (dropdown) that does not rely on native browser or mobile implementations.
+ *
+ * Utilizes [useSelect](https://react-spectrum.adobe.com/react-aria/useSelect.html) from React Aria
+ * and [useSelectState](https://react-spectrum.adobe.com/react-stately/useSelectState.html) from
+ * React Stately.
+ */
+var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var defaultText = props.defaultText,
+      helperText = props.helperText,
+      label = props.label,
+      name = props.name,
+      placeholder = props.placeholder,
+      status = props.status,
+      columnStyleProps = props.columnStyleProps,
+      fieldContainerProps = props.fieldContainerProps,
+      fieldControlProps = props.fieldControlProps,
+      fieldLabelProps = props.fieldLabelProps,
+      isLoadingInitial = props.isLoadingInitial,
+      overlay = props.overlay,
+      state = props.state,
+      trigger = props.trigger,
+      triggerProps = props.triggerProps,
+      triggerRef = props.triggerRef,
+      valueProps = props.valueProps;
+  var defaultTrigger = (0, _react2.jsx)(_Box["default"], {
+    className: fieldControlProps.className,
+    variant: "forms.input.container"
+  }, (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
+    ref: triggerRef,
+    variant: "forms.select",
+    className: fieldControlProps.className
+  }, triggerProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    as: "span",
+    variant: "forms.select.currentValue"
+  }, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_Text["default"], {
+    variant: "placeholder"
+  }, props.labelMode === _constants.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_Loader["default"], {
+    variant: "loader.withinInput"
+  }), (0, _react2.jsx)(_Box["default"], {
+    as: "span",
+    "aria-hidden": "true",
+    variant: "forms.select.arrow"
+  }, (0, _react2.jsx)(_Icon["default"], {
+    icon: _MenuDownIcon["default"],
+    sx: state.isOpen ? {
+      transform: 'rotate(180deg)'
+    } : null
+  }))));
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    ref: ref,
+    variant: "forms.input.wrapper"
+  }, fieldContainerProps, {
+    sx: _objectSpread(_objectSpread({}, columnStyleProps === null || columnStyleProps === void 0 ? void 0 : columnStyleProps.sx), fieldContainerProps === null || fieldContainerProps === void 0 ? void 0 : fieldContainerProps.sx)
+  }), (0, _react2.jsx)(_Label["default"], fieldLabelProps, label), (0, _react2.jsx)(_select.HiddenSelect, {
+    state: state,
+    triggerRef: triggerRef,
+    label: label,
+    name: name
+  }), trigger || defaultTrigger, overlay, helperText && (0, _react2.jsx)(_FieldHelperText["default"], {
+    status: status
+  }, helperText));
+});
+SelectFieldBase.propTypes = {
+  /** Default text rendered if no option is selected. Deprecated. */
+  defaultText: _propTypes["default"].string,
+
+  /** Text rendered below the input. */
+  helperText: _propTypes["default"].node,
+
+  /** The label for the select element. */
+  label: _propTypes["default"].node,
+
+  /** Determines the textarea status indicator and helper text styling. Eg. float. */
+  labelMode: _propTypes["default"].oneOf((0, _values["default"])(_constants.modes)),
+
+  /** The name for the select element, used when submitting a form. */
+  name: _propTypes["default"].string,
+
+  /** Temporary text that occupies the text input when it is empty. */
+  placeholder: _propTypes["default"].string,
+
+  /** Determines the type of label applied to the component. */
+  status: _propTypes["default"].oneOf((0, _values["default"])(_statuses["default"])),
+
+  /** Determines whether to use column styles. */
+  columnStyleProps: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].shape({})]),
+
+  /** Determines props that applied to root container. */
+  fieldContainerProps: _propTypes["default"].shape({
+    sx: _propTypes["default"].shape({})
+  }),
+
+  /** Determines props that applied to control field. */
+  fieldControlProps: _propTypes["default"].shape({
+    className: _propTypes["default"].string
+  }),
+
+  /** Determines props that applied to label of field. */
+  fieldLabelProps: _propTypes["default"].shape({}),
+
+  /** Determines whether elements are loading and whether they haven't already appeared in list. */
+  isLoadingInitial: _propTypes["default"].bool,
+
+  /** Container for list with options */
+  overlay: _propTypes["default"].node,
+
+  /** State returned by useSelectState */
+  state: _propTypes["default"].shape({
+    isOpen: _propTypes["default"].bool,
+    selectedItem: _propTypes["default"].shape({
+      rendered: _propTypes["default"].node
+    })
+  }),
+
+  /** Control for interaction with SelectField */
+  trigger: _propTypes["default"].node,
+
+  /** Props for the popup trigger element. */
+  triggerProps: _propTypes["default"].shape({}),
+
+  /** Determines ref that applied to control */
+  triggerRef: _propTypes["default"].shape({}),
+
+  /** Props for the element representing the selected value. */
+  valueProps: _propTypes["default"].shape({})
+};
+var _default = SelectFieldBase;
+exports["default"] = _default;

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

@@ -0,0 +1,471 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime-corejs3/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/asyncToGenerator"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _jestAxe = require("jest-axe");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _index = require("../../index");
+
+var _hooks = require("../../hooks");
+
+var _SelectFieldBase = _interopRequireDefault(require("./SelectFieldBase"));
+
+var _react2 = require("@emotion/react");
+
+var items = [{
+  name: 'a'
+}, {
+  name: 'b'
+}, {
+  name: 'c'
+}];
+var testId = 'test-dropdown';
+var controlTestId = "".concat(testId, "-input");
+var testValue = 'test';
+var defaultProps = {
+  align: 'start',
+  direction: 'bottom',
+  label: 'testLabel',
+  'data-testid': testId,
+  controlProps: {
+    'data-testid': controlTestId
+  },
+  value: testValue,
+  items: items
+};
+var SelectFieldWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _useSelectField = (0, _hooks.useSelectField)(props, ref),
+      selectFieldProps = (0, _extends2["default"])({}, _useSelectField);
+
+  return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({}, props, selectFieldProps));
+});
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+  var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref$renderFn = _ref.renderFn,
+      renderFn = _ref$renderFn === void 0 ? _testWrapper.render : _ref$renderFn;
+
+  return renderFn((0, _react2.jsx)(SelectFieldWrapper, (0, _extends2["default"])({}, defaultProps, props), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.name,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+
+var onSelectionChange = jest.fn();
+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('default select field', function () {
+  getComponent();
+
+  var container = _testWrapper.screen.getByTestId(testId);
+
+  var inputs = _testWrapper.screen.getAllByLabelText(defaultProps.label);
+
+  var hiddenInput = inputs[0];
+  var visibleInput = inputs[1];
+
+  var labels = _testWrapper.screen.getAllByText(defaultProps.label);
+
+  var visibleLabel = labels[0];
+  var hiddenLabel = labels[1];
+  expect(container).toBeInstanceOf(HTMLDivElement);
+  expect(hiddenInput).toBeInstanceOf(HTMLSelectElement);
+  expect(visibleInput).toBeInstanceOf(HTMLButtonElement);
+  expect(hiddenLabel).toBeInstanceOf(HTMLLabelElement);
+  expect(visibleLabel).toBeInstanceOf(HTMLLabelElement);
+  expect(container).toBeInTheDocument();
+  expect(hiddenInput).toBeInTheDocument();
+  expect(visibleInput).toBeInTheDocument();
+  expect(hiddenLabel).toBeInTheDocument();
+  expect(visibleLabel).toBeInTheDocument(); // jest-dom .toBeVisible does not take into account aria-hidden
+
+  /* eslint-disable testing-library/no-node-access */
+
+  expect(hiddenInput.closest('[aria-hidden="true"]')).not.toBeNull();
+  expect(visibleInput.closest('[aria-hidden="true"]')).toBeNull();
+  expect(hiddenLabel.closest('[aria-hidden="true"]')).not.toBeNull();
+  expect(visibleLabel.closest('[aria-hidden="true"]')).toBeNull();
+  /* eslint-enable testing-library/no-node-access */
+});
+test('control props work for visible button control', function () {
+  getComponent();
+
+  var inputs = _testWrapper.screen.getAllByLabelText(defaultProps.label);
+
+  var visibleInput = inputs[1];
+  expect(_testWrapper.screen.getByTestId("".concat(testId, "-input"))).toBe(visibleInput);
+});
+test('isDefaultOpen prop', function () {
+  getComponent({
+    isDefaultOpen: true
+  });
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+});
+test('should disable the label and control when isDisabled is true', function () {
+  getComponent({
+    isDisabled: true
+  });
+  expect(_testWrapper.screen.getAllByText(defaultProps.label)[0]).toHaveClass('is-disabled');
+  expect(_testWrapper.screen.getByTestId(controlTestId)).toHaveClass('is-disabled');
+});
+test('select field with helper text', function () {
+  var helperText = 'some text';
+  getComponent({
+    helperText: helperText,
+    status: _statuses["default"].ERROR
+  });
+
+  var fieldHelperText = _testWrapper.screen.getByText(helperText);
+
+  expect(fieldHelperText).toBeInTheDocument();
+  expect(fieldHelperText).toHaveClass("is-".concat(_statuses["default"].ERROR));
+});
+test('clicking on the visible button opens the popuplist', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+});
+test('clicking on an option then renders its text in the button', function () {
+  var defaultText = 'click me';
+  var placeholder = null;
+  getComponent({
+    defaultText: defaultText,
+    placeholder: placeholder
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).toHaveTextContent(defaultText);
+
+  _userEvent["default"].click(button);
+
+  var options = _testWrapper.screen.queryAllByRole('option');
+
+  _userEvent["default"].click(options[0]);
+
+  expect(button).toHaveTextContent(options[0].textContent);
+});
+test('hovering an option applies correct styles', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  _userEvent["default"].click(button);
+
+  var options = _testWrapper.screen.queryAllByRole('option');
+
+  expect(options[0]).not.toHaveClass('is-focused');
+
+  _userEvent["default"].hover(options[0]);
+
+  expect(options[0]).toHaveClass('is-focused');
+});
+test('onOpenChange prop for field', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(onOpenChange).not.toHaveBeenCalled();
+
+  _userEvent["default"].click(button);
+
+  expect(onOpenChange).toHaveBeenNthCalledWith(1, true);
+
+  _userEvent["default"].click(button);
+
+  expect(onOpenChange).toHaveBeenNthCalledWith(2, false);
+});
+test('onSelectionChange prop for field', function () {
+  getComponent({
+    onSelectionChange: onSelectionChange
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(onSelectionChange).not.toHaveBeenCalled();
+
+  _userEvent["default"].click(button);
+
+  _userEvent["default"].click(_testWrapper.screen.queryAllByRole('option')[0]);
+
+  expect(onSelectionChange).toHaveBeenNthCalledWith(1, 'a');
+
+  _userEvent["default"].click(button);
+
+  _userEvent["default"].click(_testWrapper.screen.queryAllByRole('option')[1]);
+
+  expect(onSelectionChange).toHaveBeenNthCalledWith(2, 'b');
+});
+test('selectedKey for controlled select field', function () {
+  getComponent({
+    selectedKey: 'b'
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).toHaveTextContent('b');
+
+  _userEvent["default"].click(button);
+
+  expect(_testWrapper.screen.queryAllByRole('option')[0]).not.toHaveClass('is-selected');
+  expect(_testWrapper.screen.queryAllByRole('option')[1]).toHaveClass('is-selected');
+  expect(_testWrapper.screen.queryAllByRole('option')[2]).not.toHaveClass('is-selected');
+});
+test('isRequired prop for select field', function () {
+  getComponent({
+    isRequired: true
+  });
+
+  var labels = _testWrapper.screen.getAllByText(defaultProps.label);
+
+  var visibleLabel = labels[0];
+  expect(visibleLabel).toHaveTextContent('testLabel');
+});
+test('clicking the visually hidden dismiss buttons close the listbox popup', function () {
+  getComponent({
+    isDefaultOpen: true
+  });
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument(); // Click first dismiss button
+
+  _userEvent["default"].click(_testWrapper.screen.getAllByLabelText('Dismiss')[0]);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument(); // Click second dismiss button
+
+  getComponent({
+    isDefaultOpen: true
+  });
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  _userEvent["default"].click(_testWrapper.screen.getAllByLabelText('Dismiss')[1]);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+});
+test('clicking outside of the listbox popup closes it', function () {
+  getComponent({
+    isDefaultOpen: true
+  });
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+
+  _userEvent["default"].click(global.document.body);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+});
+test('two listbox can not be open at the same time', function () {
+  getComponent({
+    items: [{
+      name: 'Alpha'
+    }, {
+      name: 'Bravo'
+    }]
+  });
+  getComponent({
+    items: [{
+      name: 'Whiskey'
+    }, {
+      name: 'Tango'
+    }, {
+      name: 'Foxtrot'
+    }]
+  });
+
+  var selectfields = _testWrapper.screen.getAllByTestId(testId);
+
+  expect(selectfields).toHaveLength(2);
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  var _screen$getAllByRole = _testWrapper.screen.getAllByRole('button'),
+      _screen$getAllByRole2 = (0, _slicedToArray2["default"])(_screen$getAllByRole, 2),
+      button1 = _screen$getAllByRole2[0],
+      button2 = _screen$getAllByRole2[1];
+
+  _userEvent["default"].click(button1);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(2);
+  expect(_testWrapper.screen.queryByRole('option', {
+    name: 'Alpha'
+  })).toBeInTheDocument();
+
+  _userEvent["default"].click(button2);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+
+  _userEvent["default"].click(button2);
+
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(_testWrapper.screen.queryAllByRole('option')).toHaveLength(3);
+  expect(_testWrapper.screen.queryByRole('option', {
+    name: 'Whiskey'
+  })).toBeInTheDocument();
+});
+test('Item accepts a data-id and the data-id can be found in the DOM', function () {
+  getComponent();
+
+  var button = _testWrapper.screen.queryByRole('button');
+
+  _userEvent["default"].click(button);
+
+  var options = _testWrapper.screen.queryAllByRole('option');
+
+  expect(options).toHaveLength(items.length);
+  expect(options[0]).toHaveAttribute('data-id', items[0].name);
+});
+describe('async loading', function () {
+  test('displays a loader while loading', function () {
+    var _getComponent = getComponent({
+      items: [],
+      isLoading: true
+    }),
+        rerender = _getComponent.rerender;
+
+    var button = _testWrapper.screen.getByRole('button');
+
+    var loader = (0, _testWrapper.within)(button).getByRole('progressbar');
+    expect(loader).toHaveAttribute('aria-label', 'Loading...');
+    expect(loader).not.toHaveAttribute('aria-valuenow');
+    getComponent({
+      items: []
+    }, {
+      renderFn: rerender
+    });
+    expect(loader).not.toBeInTheDocument();
+  });
+  test('displays a loader inside the listbox when loading more', function () {
+    var newItems = [{
+      name: 'Foo'
+    }, {
+      name: 'Bar'
+    }];
+
+    var _getComponent2 = getComponent({
+      items: newItems,
+      isLoading: true
+    }),
+        rerender = _getComponent2.rerender;
+
+    var button = _testWrapper.screen.getByRole('button');
+
+    _userEvent["default"].click(button);
+
+    var listbox = _testWrapper.screen.getByRole('listbox');
+
+    var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+    expect(options.length).toBe(2);
+    var loader = (0, _testWrapper.within)(listbox).getByRole('progressbar');
+    expect(loader).toHaveAttribute('aria-label', 'Loading more...');
+    expect(loader).not.toHaveAttribute('aria-valuenow');
+    getComponent({
+      items: newItems
+    }, {
+      renderFn: rerender
+    });
+    options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+    expect(options.length).toBe(2);
+    expect(loader).not.toBeInTheDocument();
+  });
+});
+test('form wrapper will have default max label column width when no custom width set', function () {
+  var labelMode = 'left';
+  getComponent({
+    labelMode: labelMode
+  });
+
+  var textAreaContainer = _testWrapper.screen.getByTestId(testId);
+
+  expect(textAreaContainer).toHaveStyle('grid-template-columns: 40% auto');
+});
+test('form wrapper will have a max label column width when custom width set', function () {
+  var labelMode = 'left';
+  var containerProps = {
+    sx: {
+      gridTemplateColumns: '120px auto'
+    }
+  };
+  getComponent({
+    labelMode: labelMode,
+    containerProps: containerProps
+  });
+
+  var textAreaContainer = _testWrapper.screen.getByTestId(testId);
+
+  expect(textAreaContainer).toHaveStyle('grid-template-columns: 120px auto');
+});
+test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var _getComponent3, container, results;
+
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent3 = getComponent(), container = _getComponent3.container;
+          _context.next = 4;
+          return (0, _jestAxe.axe)(container);
+
+        case 4:
+          results = _context.sent;
+          expect(results).toHaveNoViolations();
+
+        case 6:
+        case "end":
+          return _context.stop();
+      }
+    }
+  }, _callee);
+})));

package/lib/cjs/components/SelectFieldBase/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+_Object$defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _SelectFieldBase["default"];
+  }
+});
+
+var _SelectFieldBase = _interopRequireDefault(require("./SelectFieldBase"));