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

package/src/Select/components.js

@@ -1,51 +0,0 @@
-import styled from 'styled-components';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-import { getThemeSize, inputFocusStyle } from '../themes/utils';
-
-export const SelectButtonWrapper = styled(Flex)`
-  position: relative;
-  border: 1px solid ${({ theme, hasError }) => (hasError ? theme.colors.danger600 : theme.colors.neutral200)};
-  padding-right: ${({ theme }) => theme.spaces[3]};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  background: ${({ theme }) => theme.colors.neutral0};
-  overflow: hidden;
-  min-height: ${getThemeSize('input')};
-
-  ${({ theme, disabled }) =>
-    disabled
-      ? `
-    color: ${theme.colors.neutral600};
-    background: ${theme.colors.neutral150};
-  `
-      : undefined}
-
-  ${inputFocusStyle()}
-`;
-
-export const IconBox = styled(Box)`
-  background: transparent;
-  border: none;
-  position: relative;
-  z-index: 1;
-
-  svg {
-    height: ${11 / 16}rem;
-    width: ${11 / 16}rem;
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-
-export const CaretBox = styled(IconBox)`
-  display: flex;
-  background: none;
-  border: none;
-  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : undefined)};
-
-  svg {
-    width: ${6 / 16}rem;
-  }
-`;

package/src/Select/constants.js

@@ -1,6 +0,0 @@
-export const DownState = {
-  Keyboard: 'down:keyboard',
-  Mouse: 'down:mouse',
-};
-
-export const UpState = { Keyboard: 'up:keyboard', Mouse: 'up:mouse' };

package/src/Select/hooks/useButtonRef.js

@@ -1,31 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { DownState, UpState } from '../constants';
-
-export const useButtonRef = (expanded) => {
-  const buttonRef = useRef(null);
-  const mountedRef = useRef(null);
-  /**
-   * Allows to make sure to re-send the focus only when the last action was
-   * triggered by a keyboard event
-   */
-  const previousState = useRef();
-
-  if (expanded) {
-    previousState.current = expanded;
-  }
-
-  useEffect(() => {
-    if (!mountedRef.current) return;
-    if (expanded) return;
-
-    if (previousState.current === DownState.Keyboard || previousState.current === UpState.Keyboard) {
-      buttonRef.current.focus();
-    }
-  }, [expanded]);
-
-  useEffect(() => {
-    mountedRef.current = true;
-  }, []);
-
-  return buttonRef;
-};

package/src/Select/hooks/useListRef.js

@@ -1,35 +0,0 @@
-import { useRef, useEffect } from 'react';
-import { DownState, UpState } from '../constants';
-import { changeDescendant } from '../utils';
-
-export const useListRef = (expanded) => {
-  const listRef = useRef(null);
-
-  useEffect(() => {
-    listRef.current.focus();
-  }, []);
-
-  useEffect(() => {
-    if (!listRef.current) return;
-    const lastSelected = listRef.current.querySelector('[aria-selected="true"]');
-    const options = listRef.current.querySelectorAll('[role="option"]');
-
-    let nextOption;
-
-    if (lastSelected) {
-      nextOption = lastSelected;
-    } else if (expanded === UpState.Keyboard) {
-      nextOption = options[options.length - 1];
-    } else if (expanded === DownState.Keyboard) {
-      nextOption = options[0];
-    }
-
-    if (nextOption) {
-      if (expanded === UpState.Keyboard || expanded === DownState.Keyboard) {
-        changeDescendant(listRef.current, nextOption);
-      }
-    }
-  }, []);
-
-  return listRef;
-};

package/src/Select/index.js

@@ -1,5 +0,0 @@
-export * from './Select';
-export * from './Option';
-export * from './OptGroup';
-export * from './MultiSelectNested';
-export * from './SelectList';

package/src/Select/utils.js

@@ -1,27 +0,0 @@
-import computeScrollIntoView from 'compute-scroll-into-view';
-
-export const changeDescendant = (list, option) => {
-  list.setAttribute('aria-activedescendant', option.getAttribute('id'));
-
-  const options = list.querySelectorAll('[role="option"]');
-
-  options.forEach((opt) => opt.classList.remove('is-focused'));
-  option.classList.add('is-focused');
-
-  const actions = computeScrollIntoView(option, {
-    scrollMode: 'if-needed',
-    block: 'nearest',
-    inline: 'nearest',
-  });
-
-  actions.forEach(({ el, top, left }) => {
-    el.scrollTop = top;
-    el.scrollLeft = left;
-  });
-};
-
-export const getActiveDescendant = (list) => {
-  const id = list.getAttribute('aria-activedescendant');
-
-  return list.querySelector(`#${id}`);
-};

package/src/SimpleMenu/SimpleMenu.js

@@ -1,252 +0,0 @@
-import React, { useRef, useState, Children, cloneElement, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import CarretDown from '@strapi/icons/CarretDown';
-import { NavLink } from 'react-router-dom';
-import { Typography } from '../Typography';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-import { Button } from '../Button';
-import { Popover, POPOVER_PLACEMENTS } from '../Popover';
-import { getOptionStyle } from './utils';
-import { useId } from '../helpers/useId';
-import { KeyboardKeys } from '../helpers/keyboardKeys';
-
-const OptionButton = styled.button`
-  border: none;
-  padding: 0;
-  background: transparent;
-  cursor: pointer;
-  ${getOptionStyle}
-`;
-
-const OptionLink = styled(NavLink)`
-  text-decoration: none;
-  ${getOptionStyle}
-`;
-
-const IconWrapper = styled.span`
-  display: flex;
-  align-items: center;
-  svg {
-    height: 4px;
-    width: 6px;
-  }
-`;
-
-const StyledButtonSmall = styled(Button)`
-  padding: ${({ theme }) => `${theme.spaces[1]} ${theme.spaces[3]}`};
-`;
-
-export const MenuItem = ({ children, onClick, to, isFocused, ...props }) => {
-  const menuItemRef = useRef();
-
-  useEffect(() => {
-    if (isFocused && menuItemRef.current) {
-      menuItemRef.current.focus();
-    }
-  }, [isFocused]);
-
-  const menuItemProps = {
-    tabIndex: isFocused ? 0 : -1,
-    ref: menuItemRef,
-    role: 'menuitem',
-    ...props,
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === KeyboardKeys.SPACE || e.key === KeyboardKeys.ENTER) {
-      onClick();
-    }
-  };
-
-  return to ? (
-    <OptionLink to={to} {...menuItemProps}>
-      <Box padding={2}>
-        <Typography>{children}</Typography>
-      </Box>
-    </OptionLink>
-  ) : (
-    <OptionButton onKeyDown={handleKeyDown} onMouseDown={onClick} type="button" {...menuItemProps}>
-      <Box padding={2}>
-        <Typography>{children}</Typography>
-      </Box>
-    </OptionButton>
-  );
-};
-
-MenuItem.defaultProps = {
-  onClick: () => {},
-  isFocused: false,
-  to: undefined,
-};
-
-MenuItem.propTypes = {
-  as: PropTypes.elementType,
-  children: PropTypes.node.isRequired,
-  isFocused: PropTypes.bool,
-  onClick: PropTypes.func,
-  to: PropTypes.string,
-};
-
-export const SimpleMenu = ({
-  label,
-  children,
-  id,
-  as: asComp,
-  onOpen = () => {},
-  onClose = () => {},
-  size,
-  popoverPlacement,
-  ...props
-}) => {
-  const menuButtonRef = useRef();
-  const menuId = useId('simplemenu', id);
-  const didMount = useRef(false);
-  const [visible, setVisible] = useState(false);
-  const [focusedItemIndex, setFocusItem] = useState(0);
-  const childrenArray = Children.toArray(children);
-  const DefaultComponent = size === 'S' ? StyledButtonSmall : Button;
-  const Component = asComp || DefaultComponent;
-
-  useEffect(() => {
-    if (['string', 'number'].includes(typeof label)) {
-      // Useful to focus the selected item in the list
-      const defaultItemIndexToFocus = childrenArray.findIndex((c) => c.props.children === label);
-
-      if (defaultItemIndexToFocus !== -1) {
-        setFocusItem(defaultItemIndexToFocus);
-      }
-    }
-  }, [label]);
-
-  useEffect(() => {
-    if (didMount?.current) {
-      if (visible && typeof onOpen === 'function') {
-        onOpen();
-      } else if (typeof onClose === 'function') {
-        onClose();
-      }
-    } else {
-      didMount.current = true;
-    }
-  }, [didMount, visible]);
-
-  /* in case `label` is a custom react component, we know it is going to be
-      a child of the menu button.
-  */
-  useEffect(() => {
-    if (React.isValidElement(label) && focusedItemIndex == -1) {
-      menuButtonRef.current.focus();
-    }
-  }, [label, focusedItemIndex]);
-
-  const handleWrapperKeyDown = (e) => {
-    if (visible) {
-      if (e.key === KeyboardKeys.ESCAPE) {
-        e.stopPropagation();
-        setVisible(false);
-        menuButtonRef.current.focus();
-      }
-
-      if (e.key === KeyboardKeys.DOWN) {
-        setFocusItem((prev) => (prev === childrenArray.length - 1 ? 0 : prev + 1));
-      }
-
-      if (e.key === KeyboardKeys.UP) {
-        setFocusItem((prev) => (prev === 0 ? childrenArray.length - 1 : prev - 1));
-      }
-    }
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === KeyboardKeys.ENTER || e.key === KeyboardKeys.SPACE) {
-      setVisible((prevVisible) => !prevVisible);
-    }
-  };
-
-  const handleBlur = (e) => {
-    e.preventDefault();
-    if (!e.currentTarget.contains(e.relatedTarget)) {
-      setVisible(false);
-    }
-  };
-
-  const handleMenuButtonMouseDown = (e) => {
-    e.preventDefault();
-    setVisible((prevVisible) => !prevVisible);
-  };
-
-  const childrenClone = childrenArray.map((child, index) => (
-    <Flex as="li" key={index} justifyContent="center" role="menuitem">
-      {cloneElement(child, {
-        onClick: () => {
-          child.props.onClick();
-          setVisible(false);
-          menuButtonRef.current.focus();
-        },
-        isFocused: focusedItemIndex === index,
-      })}
-    </Flex>
-  ));
-
-  return (
-    <div onKeyDown={handleWrapperKeyDown}>
-      <Component
-        label={React.isValidElement(label) ? null : label}
-        aria-haspopup
-        aria-expanded={visible}
-        aria-controls={menuId}
-        onKeyDown={handleKeyDown}
-        onMouseDown={handleMenuButtonMouseDown}
-        ref={menuButtonRef}
-        type="button"
-        variant="ghost"
-        endIcon={
-          <IconWrapper>
-            <CarretDown aria-hidden />
-          </IconWrapper>
-        }
-        {...props}
-      >
-        {label}
-      </Component>
-      {visible && (
-        <Popover onBlur={handleBlur} placement={popoverPlacement} source={menuButtonRef} spacing={4}>
-          <Box role="menu" as="ul" padding={1} id={menuId}>
-            {childrenClone}
-          </Box>
-        </Popover>
-      )}
-    </div>
-  );
-};
-
-SimpleMenu.defaultProps = {
-  as: undefined,
-};
-
-SimpleMenu.displayName = 'SimpleMenu';
-
-SimpleMenu.defaultProps = {
-  popoverPlacement: 'bottom-start',
-  size: 'M',
-};
-
-SimpleMenu.propTypes = {
-  as: PropTypes.any,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
-  id: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.element]).isRequired,
-  onClose: PropTypes.func,
-  onOpen: PropTypes.func,
-  popoverPlacement: PropTypes.oneOf(POPOVER_PLACEMENTS),
-
-  /**
-   * Size of the trigger button.
-   * Note: in case a custom component is passed through the "as"
-   * prop, the size prop is passed along too, but needs to be handled there
-   */
-
-  size: PropTypes.oneOf(['S', 'M']),
-};

package/src/SimpleMenu/SimpleMenu.stories.mdx

@@ -1,220 +0,0 @@
-<!--- SimpleMenu.stories.mdx --->
-
-import { useState } from 'react';
-import { ArgsTable } from '@storybook/addon-docs';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import CarretDown from '@strapi/icons/CarretDown';
-import { SimpleMenu, MenuItem } from './SimpleMenu';
-import { IconButton } from '../IconButton';
-import { Stack } from '../Stack';
-
-<Meta title="Design System/Components/SimpleMenu" component={SimpleMenu} />
-
-# SimpleMenu
-
-A menu displays a list of potential options or actions via a Popover component. A menu is used to give choices to the users in small spaces. However, a single option or action should be taken via a menu.
-
-**Best practices**
-
-- Use menu for small spaces. When there is more space, use Select component.
-- Use menu if you want the user to make a single choice. When you need your user to select one or several options, use Select component.
-- Try to have a sort logic in the popover of the menu.
-
-[View source](https://github.com/strapi/design-system-experiments/tree/main/packages/strapi-design-system/src/SimpleMenu)
-
-## Imports
-
-```js
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-```
-
-## Usage
-
-The label of the menu can be replaced by the option selected. For instance, in a Date picker component, the menu label will be replaced by the active month.
-
-By passing `aria-disabled` hover styles on `MenuItem`s can be disabled.
-
-<Canvas>
-  <Story
-    name="base"
-    parameters={{
-      docs: {
-        source: {
-          code: `
-const [val, setValue] = useState('January');\n
-return (
-  <SimpleMenu id="label" label={val}>
-    <MenuItem id="menuItem-January" onClick={() => setValue('January')}>
-      January
-    </MenuItem>
-    <MenuItem id="menuItem-February" onClick={() => setValue('February')}>
-      February
-    </MenuItem>
-  </SimpleMenu>
-);
-  `,
-        },
-      },
-    }}
-  >
-    {() => {
-      const [val, setValue] = useState('January');
-      return (
-        <SimpleMenu id="label" label={val}>
-          <MenuItem id="menuItem-January" onClick={() => setValue('January')}>
-            January
-          </MenuItem>
-          <MenuItem id="menuItem-February" onClick={() => setValue('February')}>
-            February
-          </MenuItem>
-        </SimpleMenu>
-      );
-    }}
-  </Story>
-</Canvas>
-
-### With links
-
-<Canvas>
-  <Story
-    name="with-links"
-    parameters={{
-      docs: {
-        source: {
-          code: `
-<SimpleMenu label="Menu">
-  <MenuItem to="/">
-    Home
-  </MenuItem>
-  <MenuItem to="/somewhere">
-    Somewhere internal
-  </MenuItem>
-</SimpleMenu>
-  `,
-        },
-      },
-    }}
-  >
-    <SimpleMenu label="Menu">
-      <MenuItem to="/">Home</MenuItem>
-      <MenuItem to="/somewhere">Somewhere internal</MenuItem>
-    </SimpleMenu>
-  </Story>
-</Canvas>
-
-A menu can allow the user to make actions. It can redirect the user to another page or another part of the product.
-
-### With IconButton
-
-<Canvas>
-  <Story name="with-iconbutton">
-    <SimpleMenu label="Menu" as={IconButton} icon={<CarretDown />}>
-      <MenuItem>Home</MenuItem>
-      <MenuItem>Somewhere internal</MenuItem>
-    </SimpleMenu>
-  </Story>
-</Canvas>
-
-### Sizes
-
-Use the size prop to change the size of the button. You can set the value to `S` or `M` (by default `M` is being used).
-If a custom component is rendered (through the `as` prop), the size is passed through, but needs to be handled in
-that component.
-
-Size `S` can be useful if the component is being used in places, where it needs to align on the left (ex: within tables).
-
-<Canvas>
-  <Story name="sizes">
-    <Stack horizontal spacing={4}>
-      <SimpleMenu label="Small Menu" size="S" icon={<CarretDown />}>
-        <MenuItem>Home</MenuItem>
-        <MenuItem>Somewhere internal</MenuItem>
-      </SimpleMenu>
-      <SimpleMenu label="Medium Menu" icon={<CarretDown />}>
-        <MenuItem>Home</MenuItem>
-        <MenuItem>Somewhere internal</MenuItem>
-      </SimpleMenu>
-    </Stack>
-  </Story>
-</Canvas>
-
-### With Custom Label
-
-<Canvas>
-  <Story
-    name="with-custom-label"
-    parameters={{
-      docs: {
-        source: {
-          code: `
-const Label = <><span>2</span> special items</>;
-return (
-  <SimpleMenu label={Label}>
-    <MenuItem>Home</MenuItem>
-    <MenuItem>Somewhere internal</MenuItem>
-  </SimpleMenu>
-);
-  `,
-        },
-      },
-    }}
-  >
-    {() => {
-      const Label = (
-        <>
-          <span>2</span> special items
-        </>
-      );
-      return (
-        <SimpleMenu label={Label}>
-          <MenuItem>Home</MenuItem>
-          <MenuItem>Somewhere internal</MenuItem>
-        </SimpleMenu>
-      );
-    }}
-  </Story>
-</Canvas>
-
-### with other routing libraries
-
-To use the SimpleMenu/MenuItem components with a routing library (e.g. react-router-dom), you'll need to pass the `NavLink` component to the `as` prop in order to replace the default HTML anchor `<a />`.
-You'll also need to pass the `isLink` props to the `MenuItem` component.
-
-```jsx
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import { NavLink as RouterNavLink } from 'react-router-dom';
-
-<SimpleMenu label={Label}>
-  <MenuItem as={RouterNavLink} to="/">
-    Home
-  </MenuItem>
-</SimpleMenu>;
-```
-
-#### with NextJS
-
-For NextJS, you'll need to wrap the `NavLink` with the `NextLink` component
-
-```jsx
-import { SimpleMenu, MenuItem } from '@strapi/design-system/SimpleMenu';
-import NextLink from 'next/link';
-
-<SimpleMenu label={Label}>
-  <NextLink href="/home" passHref>
-    <MenuItem>Home</MenuItem>
-  </NextLink>
-</SimpleMenu>;
-```
-
-## Accessibility
-
-- When the menu button has focus, `Space` or `Enter` opens or closes the menu.
-- When the menu is open, the navigation between menu items can be done with the `ArrowDown` or `ArrowUp`
-
-## SimpleMenu props
-
-<ArgsTable of={SimpleMenu} />
-
-## MenuItem props
-
-<ArgsTable of={MenuItem} />