@pingux/astro 1.27.0-alpha.25 → 1.27.0-alpha.26

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

@@ -0,0 +1,530 @@
+"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 _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+var _jestAxe = require("jest-axe");
+
+var _index = require("../../index");
+
+var _testWrapper = require("../../utils/testUtils/testWrapper");
+
+var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
+
+var _react2 = require("@emotion/react");
+
+var items = [{
+  id: 1,
+  name: 'Aardvark',
+  key: 'Aardvark'
+}, {
+  id: 2,
+  name: 'Kangaroo',
+  key: 'Kangaroo'
+}, {
+  id: 3,
+  name: 'Snake',
+  key: 'Snake'
+}];
+var defaultProps = {
+  items: items,
+  label: 'Field Label'
+};
+
+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.OverlayProvider, null, (0, _react2.jsx)(_index.MultivaluesField, (0, _extends2["default"])({}, defaultProps, props), function (item) {
+    return (0, _react2.jsx)(_index.Item, {
+      key: item.key,
+      "data-id": item.name
+    }, 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();
+});
+afterAll(function () {
+  jest.restoreAllMocks();
+});
+test('renders MultivaluesField component', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var label = _testWrapper.screen.getByText(defaultProps.label);
+
+  expect(input).toBeInTheDocument();
+  expect(label).toBeInTheDocument();
+});
+test('opens listbox on focus and fires "onFocus', function () {
+  var onFocus = jest.fn();
+  getComponent({
+    onFocus: onFocus
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+  expect(_testWrapper.screen.getByRole('listbox')).toBeInTheDocument();
+
+  var options = _testWrapper.screen.getAllByRole('option');
+
+  expect(options.length).toBe(items.length);
+  expect(options[0]).toHaveTextContent(items[0].name);
+  expect(onFocus).toBeCalled();
+});
+test('closes listbox on blur and fires "onBlur"', function () {
+  var onBlur = jest.fn();
+  getComponent({
+    onBlur: onBlur
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  input.blur();
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onBlur).toBeCalled();
+});
+test('opening and closing listbox fires "onOpenChange"', function () {
+  var onOpenChange = jest.fn();
+  getComponent({
+    onOpenChange: onOpenChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+  expect(_testWrapper.screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  input.blur();
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
+test('multiple selection is enabled, option disappears after selection', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  var secondOption = options[1];
+  secondOption.click();
+  expect(secondOption).not.toBeInTheDocument();
+});
+test('clicking an option renders chip with option name', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var options = _testWrapper.screen.getAllByRole('option');
+
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+
+  var chip = _testWrapper.screen.getByText(items[0].name);
+
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+});
+test('clicking on delete button deletes selection, and re-adds option to list', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var options = _testWrapper.screen.getAllByRole('option');
+
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+
+  var chip = _testWrapper.screen.getByText(items[0].name);
+
+  expect(chip).toBeInTheDocument();
+  var deleteButton = chip.nextSibling;
+  deleteButton.click();
+  expect(chip).not.toBeInTheDocument();
+  input.focus();
+
+  var updatedOptions = _testWrapper.screen.getAllByRole('option');
+
+  expect(updatedOptions[0]).toBeInTheDocument();
+  expect(updatedOptions[0]).toHaveTextContent(items[0].name);
+});
+test('clicking an option fires "onSelectionChange"', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  var secondOption = options[1];
+  secondOption.click();
+  expect(secondOption).not.toBeInTheDocument();
+  expect(onSelectionChange).toBeCalledTimes(2);
+  expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
+  expect(onSelectionChange.mock.calls[1][0].has(items[1].name)).toBeTruthy();
+});
+test('changing the input value opens listbox, filters options, and fires "onInputChange"', function () {
+  var onInputChange = jest.fn();
+  getComponent({
+    onInputChange: onInputChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var value = 'aa';
+
+  _userEvent["default"].type(input, value);
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  expect(listbox).toBeInTheDocument();
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  expect(options.length).toBe(1);
+  expect(onInputChange).toBeCalledTimes(value.length);
+  expect(onInputChange).toHaveBeenCalledWith(value);
+});
+test('changing the input value and hitting enter by default do nothing', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(input).toHaveValue('');
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue(value);
+  expect(_testWrapper.screen.queryByRole('listbox')).not.toBeInTheDocument();
+});
+test('changing the input value and hitting enter creates new value in non-restrictive mode', function () {
+  getComponent({
+    mode: 'non-restrictive'
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  expect(input).toHaveValue('');
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  expect(input).toHaveValue(value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue('');
+
+  var chip = _testWrapper.screen.queryByText(value);
+
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+});
+test('in non-restrictive mode "onSelectionChange" returns entered keys', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  var chip = _testWrapper.screen.queryByText(value);
+
+  expect(chip).toBeInTheDocument();
+  expect(onSelectionChange).toBeCalledTimes(1);
+  expect(onSelectionChange.mock.calls[0][0].has(value)).toBeTruthy();
+});
+test('in non-restrictive mode the same value cannot be applied twice', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  var value = 'custom';
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  var chip = _testWrapper.screen.queryByText(value);
+
+  expect(chip).toBeInTheDocument();
+  expect(input).toHaveValue('');
+
+  _userEvent["default"].type(input, value);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue(value);
+  expect(onSelectionChange).toBeCalledTimes(1);
+});
+test('in non-restrictive mode the value that was already selected using the list cannot be applied', function () {
+  var onSelectionChange = jest.fn();
+  getComponent({
+    mode: 'non-restrictive',
+    onSelectionChange: onSelectionChange
+  });
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
+  onSelectionChange.mockClear();
+
+  _userEvent["default"].type(input, items[0].name);
+
+  _userEvent["default"].type(input, '{enter}');
+
+  expect(input).toHaveValue(items[0].name);
+  expect(onSelectionChange).not.toBeCalled();
+});
+test('options can be focused via keyboard', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  expect(listbox).toBeInTheDocument();
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+
+  _userEvent["default"].type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+
+  expect(options[0]).toHaveClass('is-focused');
+
+  _userEvent["default"].type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+
+  expect(options[1]).toHaveClass('is-focused');
+});
+test('options can be selected via keyboard', function () {
+  getComponent();
+
+  var input = _testWrapper.screen.getByRole('combobox');
+
+  input.focus();
+
+  var listbox = _testWrapper.screen.getByRole('listbox');
+
+  expect(listbox).toBeInTheDocument();
+  var options = (0, _testWrapper.within)(listbox).getAllByRole('option');
+
+  _userEvent["default"].type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+
+  expect(options[0]).toHaveClass('is-focused');
+
+  _userEvent["default"].type(options[0], '{enter}');
+
+  expect(options[0]).not.toBeInTheDocument();
+
+  var chip = _testWrapper.screen.getByText(items[0].name);
+
+  expect(chip).toBeInTheDocument();
+  var chipContainer = chip.parentElement;
+  expect(chipContainer).toHaveAttribute('role', 'presentation');
+});
+test('default selected keys', function () {
+  getComponent({
+    defaultSelectedKeys: [items[1].key, items[2].key]
+  });
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+
+  var firstChip = _testWrapper.screen.getByText(items[1].name);
+
+  expect(firstChip).toBeInTheDocument();
+
+  var secondChip = _testWrapper.screen.getByText(items[2].name);
+
+  expect(secondChip).toBeInTheDocument();
+});
+test('selected keys', function () {
+  getComponent({
+    selectedKeys: [items[1].key, items[2].key]
+  });
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+
+  var firstChip = _testWrapper.screen.getByText(items[1].name);
+
+  expect(firstChip).toBeInTheDocument();
+
+  var secondChip = _testWrapper.screen.getByText(items[2].name);
+
+  expect(secondChip).toBeInTheDocument();
+});
+test('should have no accessibility violations', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+  var _getComponent, container, results;
+
+  return _regenerator["default"].wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent = getComponent(), container = _getComponent.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);
+})));
+test('read only keys', function () {
+  getComponent({
+    readOnlyKeys: [items[1].key, items[2].key]
+  });
+
+  var listbox = _testWrapper.screen.queryByRole('listbox');
+
+  expect(listbox).not.toBeInTheDocument();
+
+  var firstChip = _testWrapper.screen.getByText(items[1].name);
+
+  var deleteButton1 = firstChip.nextSibling;
+  expect(firstChip).toBeInTheDocument();
+  expect(deleteButton1).toBeNull();
+
+  var secondChip = _testWrapper.screen.getByText(items[2].name);
+
+  expect(secondChip).toBeInTheDocument();
+  var deleteButton2 = firstChip.nextSibling;
+  expect(deleteButton2).toBeNull();
+});
+test(' multivalue field with helper text', function () {
+  var helperText = 'helper text';
+  getComponent({
+    helperText: helperText,
+    status: _statuses["default"].ERROR
+  });
+
+  var helper = _testWrapper.screen.getByText(helperText);
+
+  expect(helper).toBeInTheDocument();
+  expect(helper).toHaveClass("is-".concat(_statuses["default"].ERROR));
+});
+test('read only field', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly
+  });
+
+  var chip = _testWrapper.screen.queryAllByRole('presentation');
+
+  expect(chip[0]).toHaveAttribute('label', items[0].name);
+  expect(chip[1]).toHaveAttribute('label', items[1].name);
+  expect(chip[2]).toHaveAttribute('label', items[2].name);
+
+  var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
+
+  expect(textArea).toHaveClass('is-read-only');
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+});
+test('read only keys with read only field', function () {
+  var isReadOnly = true;
+  getComponent({
+    isReadOnly: isReadOnly,
+    readOnlyKeys: [items[1].key, items[2].key]
+  });
+
+  var chip = _testWrapper.screen.queryAllByRole('presentation');
+
+  expect(chip[0]).toHaveAttribute('label', items[1].name);
+  expect(chip[1]).toHaveAttribute('label', items[2].name);
+
+  var textArea = _testWrapper.screen.getByLabelText(defaultProps.label);
+
+  expect(textArea).toHaveClass('is-read-only');
+  expect(_testWrapper.screen.queryByRole('option')).not.toBeInTheDocument();
+});

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

package/lib/cjs/components/NavBar/NavBar.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _NavBarContext = require("../../context/NavBarContext");
+
+var _isIterable = require("../../utils/devUtils/props/isIterable");
+
+var _Box = _interopRequireDefault(require("../Box/Box"));
+
+var _useProgressiveState3 = _interopRequireDefault(require("../../hooks/useProgressiveState"));
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * Composed component that spreads children.
+ *
+ * This component is built to have the NavBarSection component passed into it.
+ *
+ * NavBarSection is an iterative component that
+ * will build an AccordionGridGroup using
+ * the array of objects that is passed into it.
+ *
+ */
+var NavBar = function NavBar(props) {
+  var defaultSelectedKeys = props.defaultSelectedKeys,
+      selectedKeysProp = props.selectedKeys,
+      setSelectedKeysProp = props.setSelectedKeys,
+      defaultExpandedKeys = props.defaultExpandedKeys;
+
+  var _useState = (0, _react.useState)(defaultExpandedKeys),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      expandedKeys = _useState2[0],
+      setExpandedKeys = _useState2[1];
+
+  var _useProgressiveState = (0, _useProgressiveState3["default"])(selectedKeysProp, defaultSelectedKeys),
+      _useProgressiveState2 = (0, _slicedToArray2["default"])(_useProgressiveState, 2),
+      selectedKeys = _useProgressiveState2[0],
+      setSelectedKeys = _useProgressiveState2[1];
+
+  return (0, _react2.jsx)(_NavBarContext.NavBarContext.Provider, {
+    value: {
+      selectedKey: selectedKeys,
+      setSelectedKey: setSelectedKeysProp || setSelectedKeys,
+      expandedKeys: expandedKeys,
+      setExpandedKeys: setExpandedKeys
+    }
+  }, (0, _react2.jsx)(_Box["default"], {
+    variant: "navBar.container",
+    role: "navigation",
+    as: "nav"
+  }, props.children));
+};
+
+NavBar.propTypes = {
+  /** The initial selected key in the collection (uncontrolled). */
+  defaultSelectedKeys: _isIterable.isIterableProp,
+
+  /** The initial expanded keys in the collection (uncontrolled). */
+  defaultExpandedKeys: _isIterable.isIterableProp,
+  selectedKeys: _isIterable.isIterableProp,
+  setSelectedKeys: _propTypes["default"].func
+};
+NavBar.defaultProps = {
+  defaultSelectedKeys: []
+};
+var _default = NavBar;
+exports["default"] = _default;