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

package/src/Select/SelectButton.js

@@ -1,77 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,238 +0,0 @@
-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);
-    });
-  });
-});