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

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

@@ -0,0 +1,230 @@
+"use strict";
+
+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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _jestAxe = require("jest-axe");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _index = require("../../index");
+
+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 = {
+  label: 'testLabel',
+  'data-testid': testId,
+  controlProps: {
+    'data-testid': controlTestId
+  },
+  value: testValue,
+  items: items
+};
+
+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)(_index.LinkSelectField, (0, _extends2["default"])({}, defaultProps, props), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: 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('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('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('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('selectedKey for controlled select field', function () {
+  getComponent({
+    selectedKey: 'b'
+  });
+
+  var button = _testWrapper.screen.getByRole('button');
+
+  expect(button).toHaveTextContent('Select');
+
+  _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('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('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('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var _getComponent2, container, results;
+
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent2 = getComponent(), container = _getComponent2.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/LinkSelectField/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 _LinkSelectField["default"];
+  }
+});
+
+var _LinkSelectField = _interopRequireDefault(require("./LinkSelectField"));

package/lib/cjs/components/List/List.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime-corejs3/helpers/interopRequireWildcard");
+
+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
+});
+
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box/Box"));
+
+var _hooks = require("../../hooks");
+
+var _react2 = require("@emotion/react");
+
+/**
+ * The intended use of List is to hold a collection of <ListItem/> components.
+ * Accepts most of the styling props from [styled-system](https://styled-system.com/table).
+*/
+var List = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+      others = (0, _objectWithoutProperties2["default"])(props, ["children"]);
+  (0, _hooks.useDeprecationWarning)('The  List component will be deprecated in Astro-UI 2.0.0, use ListView instead.');
+  return (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
+    ref: ref,
+    role: "list",
+    as: "ul",
+    pl: "0"
+  }, others), children);
+});
+List.displayName = 'List';
+var _default = List;
+exports["default"] = _default;

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

@@ -0,0 +1,66 @@
+"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
+});
+
+exports.Default = exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = _interopRequireDefault(require("."));
+
+var _ListItem = _interopRequireDefault(require("../ListItem"));
+
+var _Text = _interopRequireDefault(require("../Text"));
+
+var _Separator = _interopRequireDefault(require("../Separator"));
+
+var _withDeprecationWarning = _interopRequireDefault(require("../../utils/devUtils/decorators/withDeprecationWarning"));
+
+var _react2 = require("@emotion/react");
+
+var _default = {
+  title: 'Deprecated/List',
+  component: [_["default"], _ListItem["default"]],
+  decorators: [function (Story, context) {
+    return (0, _withDeprecationWarning["default"])(Story, context, 'The `List` component will be deprecated in Astro-UI 2.0.0, use `ListView` instead.');
+  }]
+};
+exports["default"] = _default;
+
+var Default = function Default() {
+  return (0, _react2.jsx)(_react["default"].Fragment, null, (0, _react2.jsx)(_Text["default"], {
+    variant: "itemTitle",
+    mb: "md",
+    color: "text.secondary"
+  }, "Registration Forms"), (0, _react2.jsx)(_["default"], null, (0, _react2.jsx)(_ListItem["default"], null, (0, _react2.jsx)(_Text["default"], {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 1")), (0, _react2.jsx)(_Separator["default"], {
+    margin: "0"
+  }), (0, _react2.jsx)(_ListItem["default"], {
+    title: "Form 2"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 2")), (0, _react2.jsx)(_Separator["default"], {
+    margin: "0"
+  }), (0, _react2.jsx)(_ListItem["default"], {
+    title: "Form 3"
+  }, (0, _react2.jsx)(_Text["default"], {
+    variant: "itemTitle",
+    alignSelf: "center",
+    mr: "auto"
+  }, "Form 3")), (0, _react2.jsx)(_Separator["default"], {
+    margin: "0"
+  })));
+};
+
+exports.Default = Default;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _List = _interopRequireDefault(require("./List"));
+
+var _testAxe = _interopRequireDefault(require("../../utils/testUtils/testAxe"));
+
+var _react3 = require("@emotion/react");
+
+var testLabel = 'Test Label';
+var defaultProps = {
+  title: testLabel
+};
+
+var getComponent = function getComponent() {
+  var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (0, _react2.render)((0, _react3.jsx)(_List["default"], (0, _extends2["default"])({}, defaultProps, props)));
+}; // Need to be added to each test file to test accessibility using axe.
+
+
+(0, _testAxe["default"])(getComponent);
+test('renders List component', function () {
+  getComponent();
+
+  var list = _react2.screen.getByRole('list');
+
+  expect(list).toBeInstanceOf(HTMLUListElement);
+  expect(list).toBeInTheDocument();
+});

package/lib/cjs/components/List/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 _List["default"];
+  }
+});
+
+var _List = _interopRequireDefault(require("./List"));

package/lib/cjs/components/ListBox/ListBox.js

@@ -0,0 +1,264 @@
+"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.useListBoxLayout = useListBoxLayout;
+exports["default"] = exports.collectionTypes = 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 _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 _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _find = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find"));
+
+var _defineProperty3 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _listbox = require("@react-aria/listbox");
+
+var _utils = require("@react-aria/utils");
+
+var _virtualizer = require("@react-aria/virtualizer");
+
+var _i18n = require("@react-aria/i18n");
+
+var _layout = require("@react-stately/layout");
+
+var _ListBoxContext = require("./ListBoxContext");
+
+var _index = require("./index.js");
+
+var _isIterable = require("../../utils/devUtils/props/isIterable");
+
+var _Loader = _interopRequireDefault(require("../Loader"));
+
+var _ListBoxSection = _interopRequireDefault(require("./ListBoxSection"));
+
+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; }
+
+var collectionTypes = {
+  ITEM: 'item',
+  LOADER: 'loader',
+  PLACEHOLDER: 'placeholder'
+};
+exports.collectionTypes = collectionTypes;
+
+function useListBoxLayout(state) {
+  var collator = (0, _i18n.useCollator)({
+    usage: 'search',
+    sensitivity: 'base'
+  });
+  var layout = (0, _react.useMemo)(function () {
+    return new _layout.ListLayout({
+      estimatedRowHeight: 41,
+      estimatedHeadingHeight: 26,
+      padding: 4,
+      loaderHeight: 41,
+      placeholderHeight: 41,
+      collator: collator
+    });
+  }, [collator]);
+  layout.collection = state.collection;
+  layout.disabledKeys = state.disabledKeys;
+  return layout;
+}
+
+var ListBox = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _state$selectionManag;
+
+  var defaultSelectedKeys = props.defaultSelectedKeys,
+      disabledKeys = props.disabledKeys,
+      hasAutoFocus = props.hasAutoFocus,
+      hasFocusWrap = props.hasFocusWrap,
+      hasNoEmptySelection = props.hasNoEmptySelection,
+      hasVirtualFocus = props.hasVirtualFocus,
+      id = props.id,
+      isLoading = props.isLoading,
+      isFocusedOnHover = props.isFocusedOnHover,
+      isSelectedOnPressUp = props.isSelectedOnPressUp,
+      isVirtualized = props.isVirtualized,
+      items = props.items,
+      keyboardDelegate = props.keyboardDelegate,
+      label = props.label,
+      onLoadMore = props.onLoadMore,
+      onScroll = props.onScroll,
+      onSelectionChange = props.onSelectionChange,
+      renderEmptyState = props.renderEmptyState,
+      selectedKeys = props.selectedKeys,
+      selectionMode = props.selectionMode,
+      state = props.state,
+      ariaLabel = props['aria-label'],
+      ariaLabelledby = props['aria-labelledby'],
+      ariaDescribedby = props['aria-describedby'],
+      ariaDetails = props['aria-details'],
+      others = (0, _objectWithoutProperties2["default"])(props, ["defaultSelectedKeys", "disabledKeys", "hasAutoFocus", "hasFocusWrap", "hasNoEmptySelection", "hasVirtualFocus", "id", "isLoading", "isFocusedOnHover", "isSelectedOnPressUp", "isVirtualized", "items", "keyboardDelegate", "label", "onLoadMore", "onScroll", "onSelectionChange", "renderEmptyState", "selectedKeys", "selectionMode", "state", "aria-label", "aria-labelledby", "aria-describedby", "aria-details"]);
+  var focusStrategy = state.focusStrategy; // Object matching React Aria API with all options
+
+  var listBoxOptions = {
+    autoFocus: hasAutoFocus || focusStrategy,
+    defaultSelectedKeys: defaultSelectedKeys,
+    disabledKeys: disabledKeys,
+    disallowEmptySelection: hasNoEmptySelection,
+    id: id,
+    isLoading: isLoading,
+    isVirtualized: isVirtualized,
+    items: items,
+    keyboardDelegate: keyboardDelegate,
+    label: label,
+    onLoadMore: onLoadMore,
+    onScroll: onScroll,
+    onSelectionChange: onSelectionChange,
+    renderEmptyState: renderEmptyState,
+    selectedKeys: selectedKeys,
+    selectionMode: selectionMode,
+    shouldFocusOnHover: isFocusedOnHover,
+    shouldFocusWrap: hasFocusWrap,
+    shouldSelectOnPressUp: isSelectedOnPressUp,
+    shouldUseVirtualFocus: hasVirtualFocus,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledby,
+    'aria-describedby': ariaDescribedby,
+    'aria-details': ariaDetails
+  };
+  var listBoxRef = (0, _react.useRef)();
+  /* istanbul ignore next */
+
+  (0, _react.useImperativeHandle)(ref, function () {
+    return listBoxRef.current;
+  });
+  var layout = useListBoxLayout(state);
+  layout.isLoading = props.isLoading; // Get props for the listbox
+
+  var _useListBox = (0, _listbox.useListBox)(_objectSpread(_objectSpread({}, listBoxOptions), {}, {
+    keyboardDelegate: layout,
+    isVirtualized: true
+  }), state, listBoxRef),
+      listBoxProps = _useListBox.listBoxProps;
+
+  var renderWrapper = function renderWrapper(parent, reusableView, children, renderChildren) {
+    if (reusableView.viewType === 'section') {
+      return (0, _react2.jsx)(_ListBoxSection["default"], {
+        key: reusableView.key,
+        reusableView: reusableView,
+        header: (0, _find["default"])(children).call(children, function (c) {
+          return c.viewType === 'header';
+        })
+      }, renderChildren((0, _filter["default"])(children).call(children, function (c) {
+        return c.viewType === 'item';
+      })));
+    }
+
+    return (0, _react2.jsx)(_virtualizer.VirtualizerItem, {
+      key: reusableView.key,
+      reusableView: reusableView,
+      parent: parent
+    });
+  };
+
+  return (0, _react2.jsx)(_ListBoxContext.ListBoxContext.Provider, {
+    value: state
+  }, (0, _react2.jsx)(_virtualizer.Virtualizer, (0, _extends2["default"])({}, (0, _utils.mergeProps)(listBoxProps, others), {
+    style: {
+      outline: 'none'
+    },
+    ref: listBoxRef,
+    focusedKey: state === null || state === void 0 ? void 0 : (_state$selectionManag = state.selectionManager) === null || _state$selectionManag === void 0 ? void 0 : _state$selectionManag.focusedKey,
+    sizeToFit: "height",
+    scrollDirection: "vertical",
+    collection: state.collection,
+    renderWrapper: renderWrapper,
+    transitionDuration: 0,
+    layout: layout,
+    isLoading: isLoading,
+    onLoadMore: onLoadMore,
+    shouldUseVirtualFocus: hasVirtualFocus,
+    onScroll: onScroll
+  }), function (type, item) {
+    // Type can be used like so: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/listbox/src/ListBoxBase.tsx#L129
+    if (type === collectionTypes.ITEM) {
+      return (0, _react2.jsx)(_index.Option, {
+        key: item.key,
+        item: item,
+        hasVirtualFocus: hasVirtualFocus
+      });
+    } else if (type === collectionTypes.LOADER) {
+      return (0, _react2.jsx)(_Loader["default"], {
+        variant: "loader.withinListbox",
+        "aria-label": "Loading more..."
+      });
+    }
+
+    return null;
+  }));
+});
+ListBox.propTypes = {
+  defaultSelectedKeys: _isIterable.isIterableProp,
+  disabledKeys: _isIterable.isIterableProp,
+  hasAutoFocus: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].string]),
+  hasFocusWrap: _propTypes["default"].bool,
+  hasNoEmptySelection: _propTypes["default"].bool,
+  hasVirtualFocus: _propTypes["default"].bool,
+  id: _propTypes["default"].string,
+  isFocusedOnHover: _propTypes["default"].bool,
+  isLoading: _propTypes["default"].bool,
+  isSelectedOnPressUp: _propTypes["default"].bool,
+  isVirtualized: _propTypes["default"].bool,
+  items: _isIterable.isIterableProp,
+  keyboardDelegate: _propTypes["default"].shape({}),
+  label: _propTypes["default"].node,
+  onLoadMore: _propTypes["default"].func,
+  onScroll: _propTypes["default"].func,
+  onSelectionChange: _propTypes["default"].func,
+  renderEmptyState: _propTypes["default"].node,
+  selectedKeys: _isIterable.isIterableProp,
+  selectionMode: _propTypes["default"].oneOf(['none', 'single', 'multiple']),
+  'aria-label': _propTypes["default"].string,
+  'aria-labelledby': _propTypes["default"].string,
+  'aria-describedby': _propTypes["default"].string,
+  'aria-details': _propTypes["default"].string,
+  state: _propTypes["default"].shape({
+    close: _propTypes["default"].func,
+    collection: _propTypes["default"].shape({}),
+    focusStrategy: _propTypes["default"].string,
+    isOpen: _propTypes["default"].bool,
+    selectionManager: _propTypes["default"].shape({
+      focusedKey: _propTypes["default"].string
+    })
+  })
+};
+ListBox.defaultProps = {
+  state: {}
+};
+var _default = ListBox;
+exports["default"] = _default;