@strapi/design-system 1.2.7 → 1.3.0-beta.1

package/src/Select/SelectButton.js

@@ -0,0 +1,77 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { KeyboardKeys } from '../helpers/keyboardKeys';
+import { DownState, UpState } from './constants';
+
+const StyledSelectButton = styled.button`
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  width: 100%;
+  background: transparent;
+  border: none;
+
+  // The focus state is moved to the parent thanks to :focus-within
+  &:focus {
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+`;
+
+export const SelectButton = forwardRef(({ labelledBy, expanded, onTrigger, disabled, ...props }, ref) => {
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+
+    switch (e.key) {
+      case KeyboardKeys.DOWN:
+      case KeyboardKeys.SPACE:
+      case KeyboardKeys.ENTER: {
+        e.preventDefault();
+        onTrigger(DownState.Keyboard);
+        break;
+      }
+
+      case KeyboardKeys.UP: {
+        e.preventDefault();
+        onTrigger(UpState.Keyboard);
+        break;
+      }
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <StyledSelectButton
+      ref={ref}
+      aria-labelledby={labelledBy}
+      aria-haspopup="listbox"
+      aria-expanded={expanded}
+      onKeyDown={handleKeyDown}
+      aria-disabled={disabled}
+      type="button"
+      {...props}
+    />
+  );
+});
+
+SelectButton.displayName = 'SelectButton';
+
+SelectButton.defaultProps = {
+  expanded: false,
+  disabled: false,
+};
+
+SelectButton.propTypes = {
+  disabled: PropTypes.bool,
+  expanded: PropTypes.bool,
+  labelledBy: PropTypes.string.isRequired,
+  onTrigger: PropTypes.func.isRequired,
+};

package/src/Select/SelectList.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { KeyboardKeys } from '../helpers/keyboardKeys';
+import { Stack } from '../Stack';
+import { changeDescendant, getActiveDescendant } from './utils';
+import { useListRef } from './hooks/useListRef';
+import { DownState, UpState } from './constants';
+
+export const SelectList = ({ labelledBy, onSelectItem, children, multi, onEscape, expanded }) => {
+  const listRef = useListRef(expanded);
+
+  const handleKeyDown = (e) => {
+    switch (e.key) {
+      case KeyboardKeys.ESCAPE: {
+        e.stopPropagation();
+        onEscape();
+        break;
+      }
+
+      case KeyboardKeys.DOWN: {
+        e.preventDefault();
+        const currentOption = getActiveDescendant(listRef.current);
+        if (!currentOption) return;
+
+        const nextOption = currentOption.nextSibling;
+
+        if (nextOption) {
+          changeDescendant(listRef.current, nextOption);
+        } else {
+          const options = listRef.current.querySelectorAll('[role="option"]');
+          const firstOption = options[0];
+
+          changeDescendant(listRef.current, firstOption);
+        }
+        break;
+      }
+
+      case KeyboardKeys.UP: {
+        e.preventDefault();
+        const currentOption = getActiveDescendant(listRef.current);
+        if (!currentOption) return;
+
+        const previousOption = currentOption.previousSibling;
+
+        if (previousOption) {
+          changeDescendant(listRef.current, previousOption);
+        } else {
+          const options = listRef.current.querySelectorAll('[role="option"]');
+          const lastOption = options[options.length - 1];
+
+          changeDescendant(listRef.current, lastOption);
+        }
+        break;
+      }
+
+      case KeyboardKeys.SPACE:
+      case KeyboardKeys.ENTER: {
+        e.preventDefault();
+
+        const currentOption = getActiveDescendant(listRef.current);
+
+        if (currentOption.getAttribute('data-opt-group')) {
+          onSelectItem(
+            currentOption.getAttribute('data-opt-group-children').split(','),
+            currentOption.getAttribute('data-opt-group'),
+          );
+        } else {
+          onSelectItem(currentOption.getAttribute('data-strapi-value'));
+        }
+
+        if (!multi) {
+          onEscape();
+        }
+
+        break;
+      }
+
+      default:
+        break;
+    }
+  };
+
+  return (
+    <Stack
+      as="ul"
+      spacing={1}
+      role="listbox"
+      aria-labelledby={labelledBy}
+      tabIndex={-1}
+      ref={listRef}
+      onKeyDown={handleKeyDown}
+      onBlur={onEscape}
+      aria-multiselectable={multi}
+      // aria-activedescendant, this props is dynamically added in the useListRef
+    >
+      {children}
+    </Stack>
+  );
+};
+
+SelectList.defaultProps = {
+  labelledBy: undefined,
+  multi: false,
+};
+
+SelectList.propTypes = {
+  children: PropTypes.node.isRequired,
+  expanded: PropTypes.oneOf([UpState.Keyboard, UpState.Mouse, DownState.Keyboard, DownState.Mouse]).isRequired,
+  labelledBy: PropTypes.string,
+  multi: PropTypes.bool,
+  onEscape: PropTypes.func.isRequired,
+  onSelectItem: PropTypes.func.isRequired,
+};

package/src/Select/SelectTags.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Cross from '@strapi/icons/Cross';
+import styled from 'styled-components';
+import { Tag } from '../Tag';
+import { Flex } from '../Flex';
+
+const SelectTagsWrapper = styled.div`
+  margin-bottom: ${({ theme }) => theme.spaces[1]};
+`;
+
+const SelectTag = styled(Tag)`
+  position: relative;
+  z-index: 1;
+  margin-left: ${({ theme }) => theme.spaces[1]};
+  margin-top: ${({ theme }) => theme.spaces[1]};
+`;
+
+export const SelectTags = ({ tags, onRemoveTag, disabled }) => {
+  return (
+    <SelectTagsWrapper>
+      <Flex wrap="wrap">
+        {tags.map((tag) => (
+          <SelectTag
+            icon={<Cross />}
+            disabled={disabled}
+            onClick={() => onRemoveTag(tag.value)}
+            tabIndex={-1}
+            key={`tag-${tag.value}`}
+          >
+            {tag.label}
+          </SelectTag>
+        ))}
+      </Flex>
+    </SelectTagsWrapper>
+  );
+};
+
+SelectTags.defaultProps = {
+  disabled: false,
+  tags: [],
+};
+
+SelectTags.propTypes = {
+  disabled: PropTypes.bool,
+  onRemoveTag: PropTypes.func.isRequired,
+  tags: PropTypes.arrayOf(
+    PropTypes.shape({ label: PropTypes.string, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]) }),
+  ),
+};

package/src/Select/__tests__/Select.e2e.js

@@ -0,0 +1,238 @@
+import { injectAxe, checkA11y } from 'axe-playwright';
+
+import { test, expect } from '@playwright/test';
+
+// FIXME
+// const getListDescendant = async () =>
+//   page.$eval('[role="listbox"]', (node) => node.getAttribute('aria-activedescendant'));
+
+test.describe.parallel('Select', () => {
+  test.describe('light mode', () => {
+    test.describe('simple', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-components-select--base&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      test('triggers axe on the document when the popover is opened', async ({ page }) => {
+        await page.click('text="Choose your meal"');
+        await checkA11y(page);
+      });
+
+      test('triggers axe on the document when the button is disabled', async ({ page }) => {
+        await page.click('text=Show the disabled state');
+        await checkA11y(page);
+      });
+
+      // FIXME
+      // describe('Keyboard interactions', () => {
+      //   it.each(['Enter', 'ArrowDown', 'Space'])(
+      //     'opens the listbox and highlights the first item when pressing %s',
+      //     async (key) => {
+      //       await page.focus('#select1');
+      //       await page.keyboard.press(key);
+
+      //       const ariaDescendant = await getListDescendant();
+      //       await expect(ariaDescendant).toBe('select1-option-pizza');
+      //     },
+      //   );
+
+      //   it('opens the listbox and highlights the last item when pressing ArrowUp', async () => {
+      //     await page.focus('#select1');
+      //     await page.keyboard.press('ArrowUp');
+
+      //     const ariaDescendant = await getListDescendant();
+      //     await expect(ariaDescendant).toBe('select1-option-bagel');
+      //   });
+
+      //   it('opens the listbox and highlights the different items when pressing ArrowDown', async () => {
+      //     await page.focus('#select1');
+      //     await page.keyboard.press('ArrowDown');
+
+      //     const ariaDescendant1 = await getListDescendant();
+      //     await expect(ariaDescendant1).toBe('select1-option-pizza');
+
+      //     await page.keyboard.press('ArrowDown');
+      //     const ariaDescendant2 = await getListDescendant();
+      //     await expect(ariaDescendant2).toBe('select1-option-hamburger');
+
+      //     await page.keyboard.press('ArrowDown');
+      //     const ariaDescendant3 = await getListDescendant();
+      //     await expect(ariaDescendant3).toBe('select1-option-bagel');
+
+      //     await page.keyboard.press('ArrowDown');
+      //     const ariaDescendant4 = await getListDescendant();
+      //     await expect(ariaDescendant4).toBe('select1-option-pizza');
+      //   });
+
+      //   it('opens the listbox and highlights the different items when pressing ArrowUp', async () => {
+      //     await page.focus('#select1');
+      //     await page.keyboard.press('ArrowUp');
+
+      //     const ariaDescendant1 = await getListDescendant();
+      //     await expect(ariaDescendant1).toBe('select1-option-bagel');
+
+      //     await page.keyboard.press('ArrowUp');
+      //     const ariaDescendant2 = await getListDescendant();
+      //     await expect(ariaDescendant2).toBe('select1-option-hamburger');
+
+      //     await page.keyboard.press('ArrowUp');
+      //     const ariaDescendant3 = await getListDescendant();
+      //     await expect(ariaDescendant3).toBe('select1-option-pizza');
+
+      //     await page.keyboard.press('ArrowUp');
+      //     const ariaDescendant4 = await getListDescendant();
+      //     await expect(ariaDescendant4).toBe('select1-option-bagel');
+      //   });
+
+      //   it('sends back the focus to the select button when pressing escape when the popover is visible', async () => {
+      //     await page.focus('#select1');
+      //     await page.keyboard.press('ArrowUp');
+
+      //     await page.keyboard.press('Escape');
+
+      //     // FIXME: The timeout is quite buggy.
+      //     await expect(page.locator('[role="listbox"]')).not.toBeVisible({ timeout: 1000 });
+
+      //     await expect(page.locator('#select1')).toBeFocused();
+      //   });
+
+      //   it('does NOT send back the focus to the select button when closing the select with a mouse', async () => {
+      //     await page.click('#select1');
+      //     // FIXME: The timeout is quite buggy.
+      //     await expect(page.locator('[role="listbox"]')).toBeVisible({ timeout: 1000 });
+
+      //     await page.click('body');
+      //     // FIXME: The timeout is quite buggy.
+      //     await expect(page.locator('[role="listbox"]')).not.toBeVisible({ timeout: 1000 });
+
+      //     await expect(page.locator('#select1').not.toBeFocused();
+      //   });
+
+      //   it('changes the button content and the select value when pressing Enter on an item', async () => {
+      //     await page.focus('#select1');
+      //     await page.keyboard.press('ArrowUp');
+
+      //     await page.keyboard.press('Enter');
+
+      //     await expect(await page.$('text=Current value is bagel')).toBeTruthy();
+      //     await expect(page.locator('#select1-content')).toHaveText('Bagel');
+      //   });
+
+      //   it('focuses the previously selected item when one is selected and the user reopens the popover', async () => {
+      //     await page.focus('#select1');
+      //     await page.keyboard.press('ArrowUp');
+
+      //     await page.keyboard.press('Enter');
+      //     // FIXME: The timeout is quite buggy.
+      //     await expect(page.locator('[role="listbox"]')).not.toBeVisible({ timeout: 1000 });
+
+      //     await page.keyboard.press('Enter');
+      //     const ariaDescendant = await getListDescendant();
+      //     await expect(ariaDescendant).toBe('select1-option-bagel');
+      //   });
+
+      //   // FIXME: The timeout is quite buggy.
+      //   // it.each(['Enter', 'Space'])(
+      //   //   'should not do anything when pressing %s when the element is disabled',
+      //   //   async (key) => {
+      //   //     await page.click('text=Show the disabled state');
+      //   //     await page.focus('#select1');
+      //   //     await page.keyboard.press(key);
+
+      //     await expect(page.locator('[role="listbox"]')).not.toBeVisible({ timeout: 1000 });
+      //   //   },
+      //   // );
+      // });
+
+      test('clears the value when pressing the clear button', async ({ page }) => {
+        await page.click('#select1');
+        await page.click('text="Hamburger"');
+
+        await page.click('[aria-label="Clear the meal"]');
+        await expect(page.locator('#select1-content')).toHaveText('Your example');
+      });
+    });
+
+    test.describe('multi', () => {
+      test.beforeEach(async ({ page }) => {
+        // This is the URL of the Storybook Iframe
+        await page.goto('/iframe.html?id=design-system-components-select--multi&viewMode=story');
+        await injectAxe(page);
+      });
+
+      test('triggers axe on the document', async ({ page }) => {
+        await checkA11y(page);
+      });
+
+      test('triggers axe on the document when the popover is opened', async ({ page }) => {
+        await page.click('text="Choose your meal"');
+        await checkA11y(page);
+      });
+
+      test('selects one value after the other when using the mouse and clears the selected values', async ({
+        page,
+      }) => {
+        await page.click('#select1');
+
+        // FIXME: The timeout is quite buggy.
+        //     await expect(page.locator('[role="listbox"]')).toBeVisible({ timeout: 1000 });
+
+        await page.click('text="Hamburger"');
+        await page.click('text="Pizza"');
+
+        await expect(page.locator('#select1-content')).toHaveText('2 currently selectedhamburger, pizza');
+        await expect(page.locator('h2')).toHaveText('Current value is hamburger, pizza');
+
+        await page.click('[aria-label="Clear the meal"]');
+        await expect(page.locator('#select1-content')).toHaveText('0 currently selected');
+      });
+
+      // FIXME
+      // describe('keyboard interactions', () => {
+      //   it('selects multiple values', async () => {
+      //     await page.focus('#select1');
+      //     await page.keyboard.press('ArrowDown');
+      //     await page.keyboard.press('Enter');
+      //     await page.keyboard.press('ArrowDown');
+      //     await page.keyboard.press('Enter');
+
+      //     await expect(page.locator('h2')).toHaveText('Current value is pizza, hamburger');
+      //     await expect(page.locator('#select1-content')).toHaveText('2 currently selected');
+      //   });
+
+      //   it('focuses the previously (first) selected item when one is selected and the user reopens the popover', async () => {
+      //     await page.focus('#select1');
+      //     await page.keyboard.press('ArrowDown');
+      //     await page.keyboard.press('ArrowDown');
+      //     await page.keyboard.press('Enter');
+      //     await page.keyboard.press('ArrowDown');
+      //     await page.keyboard.press('Enter');
+
+      //     await page.keyboard.press('Escape');
+      //     await page.keyboard.press('Enter');
+
+      //     // FIXME: The timeout is quite buggy.
+      //     await expect(page.locator('[role="listbox"]')).toBeVisible({ timeout: 1000 });
+
+      //     const ariaDescendant = await getListDescendant();
+      //     await expect(ariaDescendant).toBe('select1-option-hamburger');
+      //   });
+      // });
+    });
+  });
+
+  test.describe('dark mode', () => {
+    test('base A11y', async ({ page }) => {
+      // This is the URL of the Storybook Iframe
+      await page.goto('/iframe.html?id=design-system-components-select--base&viewMode=story&theme=dark');
+      await injectAxe(page);
+      await checkA11y(page);
+    });
+  });
+});