cozy-ui 131.0.1 → 131.1.0-beta.2

package/react/ActionsMenu/ActionsMenuWrapper.jsx

@@ -1,82 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-import BottomSheet from '../BottomSheet'
-import Menu from '../Menu'
-import Paper from '../Paper'
-import { useActionMenuEffects } from '../deprecated/ActionMenu/ActionMenuEffects'
-import isTesting from '../helpers/isTesting'
-import useBreakpoints from '../providers/Breakpoints'
-
-const ActionsMenuFlagshipUI = ({ children }) => {
-  useActionMenuEffects()
-
-  return children
-}
-
-const ActionsMenuWrapper = ({
-  children,
-  autoClose,
-  open,
-  onClose,
-  ...props
-}) => {
-  const { isMobile } = useBreakpoints()
-
-  const overrideClick = props => ev => {
-    props.onClick?.(ev) // this is ActionsItems onClick prop
-    autoClose && onClose?.()
-  }
-
-  if (isMobile && open) {
-    return (
-      <ActionsMenuFlagshipUI>
-        <BottomSheet skipAnimation={isTesting()} backdrop onClose={onClose}>
-          <Paper square>
-            {React.Children.map(children, child =>
-              React.isValidElement(child)
-                ? React.cloneElement(child, {
-                    isListItem: true,
-                    size: 'small',
-                    onClick: overrideClick(child.props)
-                  })
-                : null
-            )}
-          </Paper>
-        </BottomSheet>
-      </ActionsMenuFlagshipUI>
-    )
-  }
-
-  return (
-    <Menu {...props} open={open} onClose={onClose}>
-      {React.Children.map(children, (child, idx) => {
-        // To keep accessibility, we spread the autofocus on the second child
-        // if the first one is ActionsMenuMobileHeader
-        const firstChild = React.Children.toArray(children)[0]
-        const firstChildComponentName =
-          firstChild?.type?.name || firstChild?.type?.displayName
-        const isFirstChildActionsMenuMobileHeader =
-          firstChildComponentName === 'ActionsMenuMobileHeader'
-        const autoFocus =
-          isFirstChildActionsMenuMobileHeader && idx === 1 ? true : undefined
-
-        return React.isValidElement(child)
-          ? React.cloneElement(child, {
-              autoFocus,
-              onClick: overrideClick(child.props)
-            })
-          : null
-      })}
-    </Menu>
-  )
-}
-
-ActionsMenuWrapper.propTypes = {
-  /** Whether the menu should automatically close itself when an item is clicked */
-  autoClose: PropTypes.bool,
-  /** Function triggered when closing the Menu of BottomSheet */
-  onClose: PropTypes.func
-}
-
-export default ActionsMenuWrapper

package/react/ActionsMenu/Readme.md

@@ -1,254 +0,0 @@
-Use an ActionsMenu to show a list of actions. ActionsMenu automatically switch display between desktop and mobile. The action list can be created entirely with lower level components, but it is recommanded to use a high level component and provide it with a previously created action list.
-
-You can pass a reference to a custom DOM element through the `ref` prop to attach the menu to that element. This is useful is you want to be able to have `autoClose` true and be able to close the menu by clicking on the same component that opens it.
-
-A header `ActionsMenuMobileHeader` can be used to provide context on the menu actions. Since on desktop, we display a popper and not a `BottomSheet`, context for the user is not lost, so the header would be redundant. This is why it is not rendered unless we are on mobile.
-
-### How to create and use actions
-
-An action is a simple function that returns an object with specific keys:
-
-* **name** : `<string>` – Action's name
-* **icon** : `<iconPropType>` – Action's icon
-* **label** : `<string>` – Action's label
-* **disabled** : `<func>` – Used to add `disable` effect (the action is still displayed)
-* **displayCondition** : `<func>` – Whether the action is displayed. Must return a boolean
-* **action** : `<func>` – Method triggered when clicking the action
-* **Component** : `<func>` – The returned component that manages the display
-
-```bash
-const actionExpl = options => ({
-  name: 'expl',
-  action: () => {},
-  disabled: false,
-  Component: props => {
-    return <SomeComponent {...props} />
-  }
-})
-```
-
-The method `makeActions` takes `actions` array as first argument, and `options` as second argument. `options` are then passed to the `actions` component as `props`.
-
-```bash
-const action1 = ({ option1, option2, option5 }) => ({
-  name: action1,
-  action: (doc, { option3, option4 }) => {}
-  Component: ({ onClick, ...props }) => <SomeComponent {...props} onClick={() => onClick({ option3 })}} />
-})
-
-const actions = makeActions([action1, action2], { option1, option2 })
-```
-
-Then you can use `ActionsItems` to render the actions, and pass options (as simple props) and component (in `component` prop) to be used for rendering.
-
-```bash
-<ActionsItems actions={actions} docs={[file]} component={ActionComponent} option5="" />
-```
-
-### ActionsMenu with an automatic creation of actions
-
-Use `makeActions` method and create (or use the predefined actions) to build the actions to pass to `ActionsMenu`. You can pass options to actions with `componentsProps.actionsItems.actionOptions` prop.
-
-```bash
-<ActionsMenu actions={actions} componentsProps={{ actionsItems: { actionOptions: { option4 }} }} />
-```
-
-```jsx
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
-import ActionsMenu from 'cozy-ui/transpiled/react/ActionsMenu'
-import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
-import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import FileTypeText from 'cozy-ui/transpiled/react/Icons/FileTypeText'
-import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
-
-import { makeActions, modify, emailTo, print, viewInContacts, viewInDrive, divider, smsTo, call } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
-
-initialState = { showMenu: isTesting() }
-
-const anchorRef = React.useRef(null)
-
-const showMenu = () => setState({ showMenu: true })
-const hideMenu = () => setState({ showMenu: false })
-const toggleMenu = () => setState(state => ({ showMenu: !state.showMenu }))
-
-const doc = {
-  _id: 'id01',
-  _type: 'io.cozy.contacts',
-  phone: [{ number: '0102030405' }],
-  email: [{ address: 'johndoe@cozy.cc' }],
-}
-
-const customAction = () => ({
-  name: 'customAction',
-  action: () => alert('click'),
-  Component: React.forwardRef((props, ref) => {
-    return (
-      <ActionsMenuItem {...props} ref={ref}>
-        <ListItemIcon>
-          <Icon icon={FileIcon} />
-        </ListItemIcon>
-        <ListItemText
-          primary="This is a custom action, with a very long text to show how it is displayed"
-          secondary="This is a custom action, with a very long text to show how it is displayed"
-        />
-      </ActionsMenuItem>
-    )
-  })
-})
-
-const actions = makeActions([ modify, viewInContacts, viewInDrive, divider, call, smsTo, emailTo, print, divider, customAction ])
-
-;
-
-<DemoProvider>
-  <DropdownButton
-    ref={anchorRef}
-    aria-controls="simple-menu"
-    aria-haspopup="true"
-    onClick={toggleMenu}
-  >
-    Show action menu
-  </DropdownButton>
-  <ActionsMenu
-    ref={anchorRef}
-    open={state.showMenu}
-    docs={[doc]}
-    actions={actions}
-    anchorOrigin={{
-      vertical: 'bottom',
-      horizontal: 'left'
-    }}
-    autoClose
-    onClose={hideMenu}
-  >
-    <ActionsMenuMobileHeader>
-      <ListItemIcon>
-        <Icon icon={FileTypeText} size={32} />
-      </ListItemIcon>
-      <ListItemText primary="Title" primaryTypographyProps={{ variant: 'h6' }} />
-    </ActionsMenuMobileHeader>
-  </ActionsMenu>
-</DemoProvider>
-```
-
-### ActionsMenu with a manual creation of the actions
-
-We don't use `makeActions` here, all actions are created "by hand". This is not the recommanded choice.
-
-```jsx
-import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
-import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton'
-import ActionsMenuWrapper from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuWrapper'
-import ActionsMenuItem from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuItem'
-import ActionsMenuMobileHeader from 'cozy-ui/transpiled/react/ActionsMenu/ActionsMenuMobileHeader'
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
-import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import CopyIcon from 'cozy-ui/transpiled/react/Icons/Copy'
-import PenIcon from 'cozy-ui/transpiled/react/Icons/Pen'
-import TelephoneIcon from 'cozy-ui/transpiled/react/Icons/Telephone'
-import PeopleIcon from 'cozy-ui/transpiled/react/Icons/People'
-import AttachmentIcon from 'cozy-ui/transpiled/react/Icons/Attachment'
-import ContrastIcon from 'cozy-ui/transpiled/react/Icons/Contrast'
-import AttentionIcon from 'cozy-ui/transpiled/react/Icons/Attention'
-import Divider from 'cozy-ui/transpiled/react/Divider'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import FileTypeText from 'cozy-ui/transpiled/react/Icons/FileTypeText'
-
-initialState = { showMenu: isTesting() }
-
-const anchorRef = React.useRef(null)
-
-const showMenu = () => setState({ showMenu: true })
-const hideMenu = () => setState({ showMenu: false })
-const toggleMenu = () => setState(state => ({ showMenu: !state.showMenu }))
-
-;
-
-<DemoProvider>
-  <DropdownButton
-    ref={anchorRef}
-    aria-controls="simple-menu"
-    aria-haspopup="true"
-    onClick={toggleMenu}
-  >
-    Show action menu
-  </DropdownButton>
-  {state.showMenu && (
-    <ActionsMenuWrapper
-      open={state.showMenu}
-      anchorEl={anchorRef.current}
-      getContentAnchorEl={null}
-      anchorOrigin={{
-        vertical: 'bottom',
-        horizontal: 'right'
-      }}
-      transformOrigin={{
-        vertical: 'top',
-        horizontal: 'right'
-      }}
-      keepMounted
-      autoClose
-      onClose={hideMenu}
-    >
-      <ActionsMenuMobileHeader>
-        <ListItemIcon>
-          <Icon icon={FileTypeText} size={32} />
-        </ListItemIcon>
-        <ListItemText primary="Title" primaryTypographyProps={{ variant: 'h6' }} />
-      </ActionsMenuMobileHeader>
-      <ActionsMenuItem autoFocus={true} onClick={() => alert('click')}>
-        <ListItemIcon>
-          <Icon icon={PenIcon} />
-        </ListItemIcon>
-        <ListItemText primary="Modify" />
-        <ListItemIcon>
-          <Typography color='error'>
-            <Icon icon={AttentionIcon} />
-          </Typography>
-        </ListItemIcon>
-      </ActionsMenuItem>
-      <ActionsMenuItem>
-        <ListItemIcon>
-          <Icon icon={PeopleIcon} />
-        </ListItemIcon>
-        <ListItemText primary="People" />
-      </ActionsMenuItem>
-      <ActionsMenuItem>
-        <ListItemIcon>
-          <Icon icon={AttachmentIcon} />
-        </ListItemIcon>
-        <ListItemText primary="Attachment" />
-      </ActionsMenuItem>
-      <ActionsMenuItem>
-        <ListItemText primary="Item without icon" />
-      </ActionsMenuItem>
-
-      <Divider className="u-mv-half" />
-
-      <ActionsMenuItem>
-        <ListItemIcon>
-          <Icon icon={TelephoneIcon} />
-        </ListItemIcon>
-        <ListItemText primary="Call" />
-      </ActionsMenuItem>
-      <ActionsMenuItem>
-        <ListItemIcon>
-          <Icon icon={ContrastIcon} />
-        </ListItemIcon>
-        <ListItemText primary="Contrast" />
-      </ActionsMenuItem>
-      <ActionsMenuItem>
-        <ListItemIcon>
-          <Icon icon={CopyIcon} />
-        </ListItemIcon>
-        <ListItemText primary="Copy" />
-      </ActionsMenuItem>
-    </ActionsMenuWrapper>
-  )}
-</DemoProvider>
-```

package/react/ActionsMenu/index.jsx

@@ -1,97 +0,0 @@
-import PropTypes from 'prop-types'
-import React, { forwardRef } from 'react'
-
-import ActionsItems from './ActionsItems'
-import ActionsMenuWrapper from './ActionsMenuWrapper'
-
-const useTransformOrigin = ({ vertical, horizontal }) => {
-  const v =
-    vertical === 'bottom' ? 'top' : vertical === 'top' ? 'bottom' : vertical
-
-  return { vertical: v, horizontal }
-}
-
-const ActionsMenu = forwardRef(
-  (
-    {
-      docs,
-      actions,
-      anchorOrigin,
-      children,
-      componentsProps,
-      onClose,
-      autoCloseOnContextMenu,
-      ...props
-    },
-    ref
-  ) => {
-    const transformOrigin = useTransformOrigin(anchorOrigin)
-
-    return (
-      <ActionsMenuWrapper
-        {...props}
-        anchorEl={ref?.current}
-        getContentAnchorEl={null}
-        anchorOrigin={anchorOrigin}
-        transformOrigin={transformOrigin}
-        keepMounted
-        {...(autoCloseOnContextMenu && {
-          onContextMenu: ev => {
-            ev.preventDefault()
-            onClose()
-          }
-        })}
-        onClose={onClose}
-      >
-        {children}
-        <ActionsItems
-          {...componentsProps.actionsItems}
-          docs={docs}
-          actions={actions}
-        />
-      </ActionsMenuWrapper>
-    )
-  }
-)
-
-ActionsMenu.defaultProps = {
-  anchorOrigin: {
-    vertical: 'bottom',
-    horizontal: 'left'
-  },
-  autoClose: true,
-  autoCloseOnContextMenu: true,
-  componentsProps: {}
-}
-
-ActionsMenu.propTypes = {
-  /** Whether the menu is open */
-  open: PropTypes.bool,
-  /** Reference documents for the actions */
-  docs: PropTypes.array,
-  /** List of actions */
-  actions: PropTypes.array,
-  /** Allows you to position the menu in relation to the anchor element */
-  anchorOrigin: PropTypes.shape({
-    vertical: PropTypes.oneOf(['bottom', 'center', 'top']),
-    horizontal: PropTypes.oneOf(['left', 'center', 'right'])
-  }),
-  /** Whether the menu should automatically close itself when an item is clicked */
-  autoClose: PropTypes.bool,
-  /** Whether the menu should automatically close itself when right-click is triggered */
-  autoCloseOnContextMenu: PropTypes.bool,
-  /* Props passed to components with the same name */
-  componentsProps: PropTypes.shape({
-    /** Props spread to ActionsItems component */
-    actionsItems: PropTypes.shape({
-      /** Props spread to action method of Actions component */
-      actionOptions: PropTypes.object,
-      /** onClick method spread to action method of Actions component */
-      onClick: PropTypes.func
-    })
-  }),
-  /** Function triggered when closing the menu */
-  onClose: PropTypes.func
-}
-
-export default ActionsMenu

package/react/Alert/Readme.md

@@ -1,150 +0,0 @@
-```jsx
-import Alert from 'cozy-ui/transpiled/react/Alert'
-import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
-import Button from 'cozy-ui/transpiled/react/Buttons'
-import IconButton from 'cozy-ui/transpiled/react/IconButton'
-import Icon from 'cozy-ui/transpiled/react/Icon'
-import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
-import DotsIcon from 'cozy-ui/transpiled/react/Icons/Dots'
-import Variants from 'cozy-ui/docs/components/Variants'
-import DeviceLaptopIcon from 'cozy-ui/transpiled/react/Icons/DeviceLaptop'
-import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
-
-const initialVariants = [{
-  longText: false,
-  title: false,
-  block: false,
-  color: false,
-  largeIcon: false,
-  noIcon: false,
-  square: false,
-  actionOne: false,
-  actionTwo: false,
-  actionThree: false,
-  filled: false,
-  close: false
-}]
-
-;
-
-<Variants initialVariants={initialVariants} screenshotAllVariants>
-  {variant => (
-    <Alert
-      color={variant.color ? "#EFA82D" : undefined}
-      variant={variant.filled ? 'filled' : undefined}
-      block={variant.block}
-      square={variant.square}
-      icon={variant.noIcon ? false : variant.largeIcon ? <Icon icon={DeviceLaptopIcon} color="var(--errorColor)" size={32} /> : undefined}
-      action={(variant.actionOne || variant.actionTwo || variant.actionThree) ?
-        <>
-          {variant.actionOne &&
-            <Button variant="text" size="small" label="Download" startIcon={<Icon icon={DownloadIcon} />} />
-          }
-          {variant.actionTwo &&
-            <Button variant="text" size="small" label="No, thanks!" />
-          }
-          {variant.actionThree &&
-            <ListItemIcon>
-              <IconButton>
-                <Icon icon={DotsIcon} />
-              </IconButton>
-            </ListItemIcon>
-          }
-        </>
-        : undefined
-      }
-      onClose={variant.close ? () => {} : undefined}
-    >
-      {variant.title && <AlertTitle>This is the title</AlertTitle>}
-      {variant.longText
-        ? content.ada.short
-        : "Get Cozy Drive for Desktop and synchronise your files safely to make them accessible at all times."
-      }
-    </Alert>
-  )}
-</Variants>
-```
-
-### Colors
-
-```jsx
-import Alert from 'cozy-ui/transpiled/react/Alert'
-import AlertTitle from 'cozy-ui/transpiled/react/AlertTitle'
-import Button from 'cozy-ui/transpiled/react/Buttons'
-import Typography from 'cozy-ui/transpiled/react/Typography'
-import Variants from 'cozy-ui/docs/components/Variants'
-
-const colors = ['primary', 'secondary','success', 'error', 'warning', 'info']
-const initialVariants = [{ title: true, block: false, close: false }]
-
-const makeButtonColor = color => ['primary', 'secondary'].includes(color) ? undefined : color
-
-;
-
-<Variants initialVariants={initialVariants} screenshotAllVariants>
-  {variant => (
-    <>
-      {colors.map(color =>
-        <div className="u-mb-1" key={color}>
-          <Alert
-            severity={color}
-            block={variant.block}
-            action={variant.close ? undefined : (
-              <Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />
-            )}
-            onClose={variant.close ? () => {} : undefined}
-          >
-            {variant.title && <AlertTitle>{color}</AlertTitle>}
-            This is a {color} alert
-          </Alert>
-        </div>
-      )}
-
-      <hr />
-      <Typography variant="h4" paragraph>Filled variant</Typography>
-
-      {colors.map(color =>
-        <div className="u-mb-1" key={color}>
-          <Alert
-            variant="filled"
-            severity={color}
-            block={variant.block}
-            action={variant.close ? undefined : (
-              <Button
-                variant='text'
-                style={{ color: `var(--${color}ContrastTextColor)` }}
-                size="small"
-                label="ACTION"
-              />
-            )}
-            onClose={variant.close ? () => {} : undefined}
-          >
-            {variant.title && <AlertTitle>{color}</AlertTitle>}
-            This is a {color} alert
-          </Alert>
-        </div>
-      )}
-
-      <hr />
-      <Typography variant="h4" paragraph>Outlined variant</Typography>
-
-      {colors.map(color =>
-        <div className="u-mb-1" key={color}>
-          <Alert
-            variant="outlined"
-            severity={color}
-            block={variant.block}
-            action={variant.close ? undefined : (
-              <Button variant="text" size="small" color={makeButtonColor(color)} label="ACTION" />
-            )}
-            onClose={variant.close ? () => {} : undefined}
-          >
-            {variant.title && <AlertTitle>{color}</AlertTitle>}
-            This is a {color} alert
-          </Alert>
-        </div>
-      )}
-    </>
-  )}
-</Variants>
-```