@pingux/astro 1.17.0-alpha.3 → 1.17.0-alpha.6

package/lib/components/MultivaluesField/MultivaluesField.stories.js

@@ -0,0 +1,319 @@
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import React, { useState } from 'react';
+import { Box, Item, MultivaluesField, OverlayProvider } from '../..';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Form/MultivaluesField',
+  component: MultivaluesField,
+  argTypes: {
+    direction: {
+      defaultValue: 'bottom'
+    },
+    hasAutoFocus: {},
+    hasNoStatusIndicator: {},
+    isDisabled: {},
+    isNotFlippable: {},
+    isReadOnly: {},
+    isRequired: {},
+    label: {
+      defaultValue: 'Field Label'
+    },
+    mode: {},
+    placeholder: {},
+    defaultSelectedKeys: {
+      control: {
+        type: 'none'
+      }
+    },
+    disabledKeys: {
+      control: {
+        type: 'none'
+      }
+    },
+    items: {
+      control: {
+        type: 'none'
+      }
+    },
+    selectedKeys: {
+      control: {
+        type: 'none'
+      }
+    }
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code'
+      }
+    },
+    a11y: {
+      config: {
+        /** The "color-contrast" test ends with an "incomplete" status
+         * since pseudo-element applies to the same container as selected values.
+         * A  workaround to disable "color-contrast" incomplete tests.
+         */
+        rules: [{
+          id: 'color-contrast',
+          enabled: false
+        }]
+      }
+    }
+  }
+};
+var items = [{
+  id: 1,
+  name: 'Aardvark',
+  key: 'Aardvark'
+}, {
+  id: 2,
+  name: 'Kangaroo',
+  key: 'Kangaroo'
+}, {
+  id: 3,
+  name: 'Snake',
+  key: 'Snake'
+}, {
+  id: 4,
+  name: 'Frog',
+  key: 'Frog'
+}, {
+  id: 5,
+  name: 'Seal',
+  key: 'Seal'
+}, {
+  id: 6,
+  name: 'Orangutan',
+  key: 'Orangutan'
+}, {
+  id: 7,
+  name: 'Shark',
+  key: 'Shark'
+}];
+
+var setOverlayStyle = function setOverlayStyle(direction, isOpen, mr, ml, mt) {
+  return {
+    marginRight: direction === 'right' && isOpen ? mr : 0,
+    marginLeft: direction === 'left' && isOpen ? ml : 0,
+    marginTop: direction === 'top' && isOpen ? mt : 0
+  };
+};
+
+export var Default = function Default(args) {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return (// const items = [
+    // { id: 1, name: 'Aardvark', key: 'Aardvark' },
+    // { id: 2, name: 'Kangaroo', key: 'Kangaroo' },
+    // { id: 3, name: 'Snake', key: 'Snake' },
+    // { id: 4, name: 'Frog', key: 'Frog' },
+    // { id: 5, name: 'Seal', key: 'Seal' },
+    // { id: 6, name: 'Orangutan', key: 'Orangutan' },
+    // { id: 7, name: 'Shark', key: 'Shark' },
+    // ];
+    ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+    , {
+      style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+    }, ___EmotionJSX(MultivaluesField, _extends({
+      items: items
+    }, args, {
+      onOpenChange: onOpenChange
+    }), function (item) {
+      return ___EmotionJSX(Item, {
+        key: item.key,
+        "data-id": item.name
+      }, item.name);
+    }))
+  );
+};
+export var WithCustomValues = function WithCustomValues(args) {
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isOpen = _useState4[0],
+      setIsOpen = _useState4[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
+    items: items,
+    mode: "non-restrictive"
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+WithCustomValues.argTypes = {
+  mode: {
+    defaultValue: 'non-restrictive'
+  }
+};
+export var WithDisabledKeys = function WithDisabledKeys(args) {
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isOpen = _useState6[0],
+      setIsOpen = _useState6[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
+    disabledKeys: ['Aardvark'],
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+export var Uncontrolled = function Uncontrolled(args) {
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      isOpen = _useState8[0],
+      setIsOpen = _useState8[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
+    defaultSelectedKeys: ['Aardvark', 'Snake'],
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+export var Controlled = function Controlled(args) {
+  var _useState9 = useState(['Aardvark', 'Snake']),
+      _useState10 = _slicedToArray(_useState9, 2),
+      selectedKeys = _useState10[0],
+      setSelectedKeys = _useState10[1];
+
+  var _useState11 = useState(false),
+      _useState12 = _slicedToArray(_useState11, 2),
+      isOpen = _useState12[0],
+      setIsOpen = _useState12[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
+    label: "Field Label"
+  }, args, {
+    items: items,
+    onSelectionChange: setSelectedKeys,
+    selectedKeys: selectedKeys,
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};
+export var WithCustomSize = function WithCustomSize(args) {
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      isOpen = _useState14[0],
+      setIsOpen = _useState14[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(Box, {
+    sx: {
+      width: '100%',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, ___EmotionJSX(Box, {
+    width: 300
+  }, ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '25%', '25%', '75%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }))));
+};
+export var WithReadOnlyValues = function WithReadOnlyValues(args) {
+  var _useState15 = useState(false),
+      _useState16 = _slicedToArray(_useState15, 2),
+      isOpen = _useState16[0],
+      setIsOpen = _useState16[1];
+
+  var direction = args.direction;
+
+  var onOpenChange = function onOpenChange() {
+    setIsOpen(true);
+  };
+
+  return ___EmotionJSX(OverlayProvider // note: spacing for demo purpose only so that the select list renders in the correct place
+  , {
+    style: setOverlayStyle(direction, isOpen, '50%', '50%', '20%')
+  }, ___EmotionJSX(MultivaluesField, _extends({
+    readOnlyKeys: ['Aardvark', 'Snake'],
+    items: items
+  }, args, {
+    onOpenChange: onOpenChange
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.key,
+      "data-id": item.name
+    }, item.name);
+  }));
+};

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

@@ -0,0 +1,360 @@
+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 { axe } from 'jest-axe';
+import { Item, MultivaluesField, OverlayProvider } from '../../index';
+import { render, screen, within } from '../../utils/testUtils/testWrapper';
+import { jsx as ___EmotionJSX } from "@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 ? render : _ref$renderFn;
+
+  return renderFn(___EmotionJSX(OverlayProvider, null, ___EmotionJSX(MultivaluesField, _extends({}, defaultProps, props), function (item) {
+    return ___EmotionJSX(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 = screen.getByRole('combobox');
+  var label = 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 = screen.getByRole('combobox');
+  input.focus();
+  expect(screen.getByRole('listbox')).toBeInTheDocument();
+  var options = 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 = screen.getByRole('combobox');
+  input.focus();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  input.blur();
+  expect(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 = screen.getByRole('combobox');
+  input.focus();
+  expect(screen.queryByRole('listbox')).toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(true);
+  input.blur();
+  expect(screen.queryByRole('listbox')).not.toBeInTheDocument();
+  expect(onOpenChange).toHaveBeenCalledWith(false);
+});
+test('multiple selection is enabled, option disappears after selection', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toHaveAttribute('aria-multiselectable', 'true');
+  var options = 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 = screen.getByRole('combobox');
+  input.focus();
+  var options = screen.getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  var chip = 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 = screen.getByRole('combobox');
+  input.focus();
+  var options = screen.getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(firstOption).not.toBeInTheDocument();
+  var chip = screen.getByText(items[0].name);
+  expect(chip).toBeInTheDocument();
+  var deleteButton = chip.nextSibling;
+  deleteButton.click();
+  expect(chip).not.toBeInTheDocument();
+  input.focus();
+  var updatedOptions = 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 = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  var options = 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 = screen.getByRole('combobox');
+  var value = 'aa';
+  userEvent.type(input, value);
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = 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 = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue(value);
+  expect(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 = screen.getByRole('combobox');
+  expect(input).toHaveValue('');
+  var value = 'custom';
+  userEvent.type(input, value);
+  expect(input).toHaveValue(value);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue('');
+  var chip = 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 = screen.getByRole('combobox');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  var chip = 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 = screen.getByRole('combobox');
+  var value = 'custom';
+  userEvent.type(input, value);
+  userEvent.type(input, '{enter}');
+  var chip = screen.queryByText(value);
+  expect(chip).toBeInTheDocument();
+  expect(input).toHaveValue('');
+  userEvent.type(input, value);
+  userEvent.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 = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  var options = within(listbox).getAllByRole('option');
+  var firstOption = options[0];
+  firstOption.click();
+  expect(onSelectionChange.mock.calls[0][0].has(items[0].name)).toBeTruthy();
+  onSelectionChange.mockClear();
+  userEvent.type(input, items[0].name);
+  userEvent.type(input, '{enter}');
+  expect(input).toHaveValue(items[0].name);
+  expect(onSelectionChange).not.toBeCalled();
+});
+test('options can be focused via keyboard', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = within(listbox).getAllByRole('option');
+  userEvent.type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  expect(options[0]).toHaveClass('is-focused');
+  userEvent.type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  expect(options[1]).toHaveClass('is-focused');
+});
+test('options can be selected via keyboard', function () {
+  getComponent();
+  var input = screen.getByRole('combobox');
+  input.focus();
+  var listbox = screen.getByRole('listbox');
+  expect(listbox).toBeInTheDocument();
+  var options = within(listbox).getAllByRole('option');
+  userEvent.type(listbox, '{arrowdown}', {
+    skipClick: true
+  });
+  expect(options[0]).toHaveClass('is-focused');
+  userEvent.type(options[0], '{enter}');
+  expect(options[0]).not.toBeInTheDocument();
+  var chip = 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 = screen.queryByRole('listbox');
+  expect(listbox).not.toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  expect(firstChip).toBeInTheDocument();
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
+});
+test('selected keys', function () {
+  getComponent({
+    selectedKeys: [items[1].key, items[2].key]
+  });
+  var listbox = screen.queryByRole('listbox');
+  expect(listbox).not.toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  expect(firstChip).toBeInTheDocument();
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
+});
+test('should have no accessibility violations', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+  var _getComponent, container, results;
+
+  return _regeneratorRuntime.wrap(function _callee$(_context) {
+    while (1) {
+      switch (_context.prev = _context.next) {
+        case 0:
+          jest.useRealTimers();
+          _getComponent = getComponent(), container = _getComponent.container;
+          _context.next = 4;
+          return 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 = screen.queryByRole('listbox');
+  expect(listbox).not.toBeInTheDocument();
+  var firstChip = screen.getByText(items[1].name);
+  var deleteButton1 = firstChip.nextSibling;
+  expect(firstChip).toBeInTheDocument();
+  expect(deleteButton1).toBeNull();
+  var secondChip = screen.getByText(items[2].name);
+  expect(secondChip).toBeInTheDocument();
+  var deleteButton2 = firstChip.nextSibling;
+  expect(deleteButton2).toBeNull();
+});

package/lib/components/MultivaluesField/index.js

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