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

package/src/Select/components.js

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

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

package/src/Select/hooks/useButtonRef.js

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

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

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

package/src/Select/utils.js

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

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

@@ -0,0 +1,220 @@
+<!--- 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} />