@strapi/design-system 1.18.0 → 2.0.0-beta.0

package/dist/FocusTrap/FocusTrap.js

@@ -1,69 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const getFocusableNodes = require('../helpers/getFocusableNodes.js');
-const keyboardKeys = require('../helpers/keyboardKeys.js');
-
-const FocusTrap = ({ onEscape, restoreFocus = true, skipAutoFocus = false, ...props }) => {
-    const trappedRef = React.useRef(null);
-    /**
-     * Restore the focus to the previously focused element (often, it's the CTA that opened the trap)
-     */
-    React.useEffect(() => {
-        let currentFocus = null;
-        if (restoreFocus) {
-            currentFocus = document.activeElement;
-        }
-        return () => {
-            if (currentFocus) {
-                currentFocus.focus();
-            }
-        };
-    }, [restoreFocus]);
-    /**
-     * Sends the focus to the first element of the focus trap tree
-     */
-    React.useEffect(() => {
-        if (!trappedRef.current || skipAutoFocus)
-            return;
-        const focusableChildren = getFocusableNodes.getFocusableNodes(trappedRef.current);
-        if (focusableChildren.length > 0) {
-            const firstElement = focusableChildren[0];
-            firstElement.focus();
-        }
-        else {
-            console.warn('[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.');
-        }
-    }, [skipAutoFocus]);
-    const handleKeyDown = (e) => {
-        if (e.key === keyboardKeys.KeyboardKeys.ESCAPE && onEscape) {
-            onEscape();
-            return;
-        }
-        if (e.key !== keyboardKeys.KeyboardKeys.TAB)
-            return;
-        const focusableChildren = getFocusableNodes.getFocusableNodes(trappedRef.current);
-        if (focusableChildren.length > 0) {
-            const firstElement = focusableChildren[0];
-            const lastElement = focusableChildren[focusableChildren.length - 1];
-            // e.shiftKey allows to verify reverse tab
-            if (e.shiftKey) {
-                if (firstElement === document.activeElement) {
-                    e.preventDefault();
-                    lastElement.focus();
-                }
-            }
-            else if (lastElement === document.activeElement) {
-                e.preventDefault();
-                firstElement.focus();
-            }
-        }
-    };
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    return jsxRuntime.jsx("div", { ref: trappedRef, onKeyDown: handleKeyDown, ...props });
-};
-
-exports.FocusTrap = FocusTrap;

package/dist/FocusTrap/FocusTrap.mjs

@@ -1,65 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import { getFocusableNodes } from '../helpers/getFocusableNodes.mjs';
-import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
-
-const FocusTrap = ({ onEscape, restoreFocus = true, skipAutoFocus = false, ...props }) => {
-    const trappedRef = useRef(null);
-    /**
-     * Restore the focus to the previously focused element (often, it's the CTA that opened the trap)
-     */
-    useEffect(() => {
-        let currentFocus = null;
-        if (restoreFocus) {
-            currentFocus = document.activeElement;
-        }
-        return () => {
-            if (currentFocus) {
-                currentFocus.focus();
-            }
-        };
-    }, [restoreFocus]);
-    /**
-     * Sends the focus to the first element of the focus trap tree
-     */
-    useEffect(() => {
-        if (!trappedRef.current || skipAutoFocus)
-            return;
-        const focusableChildren = getFocusableNodes(trappedRef.current);
-        if (focusableChildren.length > 0) {
-            const firstElement = focusableChildren[0];
-            firstElement.focus();
-        }
-        else {
-            console.warn('[FocusTrap]: it seems there are no focusable elements in the focus trap tree. Make sure there s at least one.');
-        }
-    }, [skipAutoFocus]);
-    const handleKeyDown = (e) => {
-        if (e.key === KeyboardKeys.ESCAPE && onEscape) {
-            onEscape();
-            return;
-        }
-        if (e.key !== KeyboardKeys.TAB)
-            return;
-        const focusableChildren = getFocusableNodes(trappedRef.current);
-        if (focusableChildren.length > 0) {
-            const firstElement = focusableChildren[0];
-            const lastElement = focusableChildren[focusableChildren.length - 1];
-            // e.shiftKey allows to verify reverse tab
-            if (e.shiftKey) {
-                if (firstElement === document.activeElement) {
-                    e.preventDefault();
-                    lastElement.focus();
-                }
-            }
-            else if (lastElement === document.activeElement) {
-                e.preventDefault();
-                firstElement.focus();
-            }
-        }
-    };
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    return jsx("div", { ref: trappedRef, onKeyDown: handleKeyDown, ...props });
-};
-
-export { FocusTrap };

package/dist/FocusTrap/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const FocusTrap = require('./FocusTrap.js');
-
-
-
-exports.FocusTrap = FocusTrap.FocusTrap;

package/dist/FocusTrap/index.mjs

@@ -1 +0,0 @@
-export { FocusTrap } from './FocusTrap.mjs';

package/dist/Grid/Grid.js

@@ -1,24 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const handleResponsiveValues = require('../helpers/handleResponsiveValues.js');
-const Box = require('../Box/Box.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const GridWrapper = styled__default.default(Box.Box) `
-  display: grid;
-  grid-template-columns: repeat(${({ gridCols }) => gridCols}, 1fr);
-  ${({ theme, gap }) => handleResponsiveValues('gap', gap, theme)}
-`;
-const Grid = (props) => {
-    const { gap = '0', gridCols = 12, ...rest } = props;
-    return jsxRuntime.jsx(GridWrapper, { gap: gap, gridCols: gridCols, ...rest });
-};
-
-exports.Grid = Grid;

package/dist/Grid/Grid.mjs

@@ -1,16 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import handleResponsiveValues from '../helpers/handleResponsiveValues.mjs';
-import { Box } from '../Box/Box.mjs';
-
-const GridWrapper = styled(Box) `
-  display: grid;
-  grid-template-columns: repeat(${({ gridCols }) => gridCols}, 1fr);
-  ${({ theme, gap }) => handleResponsiveValues('gap', gap, theme)}
-`;
-const Grid = (props) => {
-    const { gap = '0', gridCols = 12, ...rest } = props;
-    return jsx(GridWrapper, { gap: gap, gridCols: gridCols, ...rest });
-};
-
-export { Grid };

package/dist/Grid/GridItem.js

@@ -1,25 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const styled = require('styled-components');
-const Box = require('../Box/Box.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const GridItem = styled__default.default(Box.Box) `
-  grid-column: span ${({ col }) => col};
-  max-width: 100%;
-
-  ${({ theme }) => theme.mediaQueries.tablet} {
-    grid-column: span ${({ s }) => s};
-  }
-
-  ${({ theme }) => theme.mediaQueries.mobile} {
-    grid-column: span ${({ xs }) => xs};
-  }
-`;
-
-exports.GridItem = GridItem;

package/dist/Grid/GridItem.mjs

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-import { Box } from '../Box/Box.mjs';
-
-const GridItem = styled(Box) `
-  grid-column: span ${({ col }) => col};
-  max-width: 100%;
-
-  ${({ theme }) => theme.mediaQueries.tablet} {
-    grid-column: span ${({ s }) => s};
-  }
-
-  ${({ theme }) => theme.mediaQueries.mobile} {
-    grid-column: span ${({ xs }) => xs};
-  }
-`;
-
-export { GridItem };

package/dist/Grid/index.js

@@ -1,11 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Grid = require('./Grid.js');
-const GridItem = require('./GridItem.js');
-
-
-
-exports.Grid = Grid.Grid;
-exports.GridItem = GridItem.GridItem;

package/dist/Grid/index.mjs

@@ -1,2 +0,0 @@
-export { Grid } from './Grid.mjs';
-export { GridItem } from './GridItem.mjs';

package/dist/Icon/Icon.js

@@ -1,27 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const styled = require('styled-components');
-const theme = require('../helpers/theme.js');
-const Box = require('../Box/Box.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const React__default = /*#__PURE__*/_interopDefault(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const IconWrapper = styled__default.default(Box.Box) `
-  path {
-    fill: ${({ color, theme: theme$1 }) => theme.extractStyleFromTheme(theme$1.colors, color, undefined)};
-  }
-  ${({ theme, colors }) => colors(theme)}
-`;
-const Icon = React__default.default.forwardRef(({ color = 'neutral600', colors = () => '', ...restProps }, ref) => {
-    return jsxRuntime.jsx(IconWrapper, { ref: ref, color: color, colors: colors, ...restProps });
-});
-Icon.displayName = 'Icon';
-
-exports.Icon = Icon;

package/dist/Icon/Icon.mjs

@@ -1,18 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import React__default from 'react';
-import styled from 'styled-components';
-import { extractStyleFromTheme } from '../helpers/theme.mjs';
-import { Box } from '../Box/Box.mjs';
-
-const IconWrapper = styled(Box) `
-  path {
-    fill: ${({ color, theme }) => extractStyleFromTheme(theme.colors, color, undefined)};
-  }
-  ${({ theme, colors }) => colors(theme)}
-`;
-const Icon = React__default.forwardRef(({ color = 'neutral600', colors = () => '', ...restProps }, ref) => {
-    return jsx(IconWrapper, { ref: ref, color: color, colors: colors, ...restProps });
-});
-Icon.displayName = 'Icon';
-
-export { Icon };

package/dist/Icon/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Icon = require('./Icon.js');
-
-
-
-exports.Icon = Icon.Icon;

package/dist/Icon/index.mjs

@@ -1 +0,0 @@
-export { Icon } from './Icon.mjs';

package/dist/IconButton/IconButton.js

@@ -1,155 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const styled = require('styled-components');
-const VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const Tooltip = require('../Tooltip/Tooltip.js');
-const BaseButton = require('../BaseButton/BaseButton.js');
-const Flex = require('../Flex/Flex.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
-  if (e) {
-    for (const k in e) {
-      if (k !== 'default') {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-const React__namespace = /*#__PURE__*/_interopNamespace(React);
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-// TODO: we should align the default state in v2 with the Button
-// component
-const VARIANT_DEFAULT = 'tertiary';
-const VARIANT_SECONDARY = 'secondary';
-const SIZES = ['S', 'M', 'L'];
-const VARIANTS = [VARIANT_DEFAULT, VARIANT_SECONDARY];
-const IconButton = React__namespace.forwardRef(({ label, background, borderWidth, noBorder = false, children, icon, disabled = false, onClick, size = SIZES[0], 'aria-label': ariaLabel, variant = VARIANTS[0], ...restProps }, ref) => {
-    const handleClick = (e) => {
-        if (!disabled && onClick) {
-            onClick(e);
-        }
-    };
-    const component = (jsxRuntime.jsxs(IconButtonWrapper, { "aria-disabled": disabled, background: disabled ? 'neutral150' : background, borderWidth: noBorder ? 0 : borderWidth, justifyContent: "center", ...restProps, ref: ref, size: size, onClick: handleClick, variant: variant, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { as: "span", children: label ?? ariaLabel }), React__namespace.cloneElement((icon || children), {
-                'aria-hidden': true,
-                focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
-            })] }));
-    return label ? jsxRuntime.jsx(Tooltip.Tooltip, { label: label, children: component }) : component;
-});
-const IconButtonWrapper = styled__default.default(BaseButton.BaseButton) `
-  background-color: ${({ theme, variant }) => {
-    if (variant === VARIANT_SECONDARY) {
-        return theme.colors.primary100;
-    }
-    return undefined;
-}};
-  border-color: ${({ theme, variant }) => {
-    if (variant === VARIANT_SECONDARY) {
-        return theme.colors.primary200;
-    }
-    return theme.colors.neutral200;
-}};
-  height: ${({ theme, size }) => theme.sizes.button[size]};
-  width: ${({ theme, size }) => theme.sizes.button[size]};
-
-  svg {
-    g,
-    path {
-      fill: ${({ theme, variant }) => {
-    if (variant === VARIANT_SECONDARY) {
-        return theme.colors.primary500;
-    }
-    return theme.colors.neutral500;
-}};
-    }
-  }
-
-  :hover,
-  :focus {
-    svg {
-      g,
-      path {
-        fill: ${({ theme, variant }) => {
-    if (variant === VARIANT_SECONDARY) {
-        return theme.colors.primary600;
-    }
-    return theme.colors.neutral600;
-}};
-      }
-    }
-  }
-
-  &[aria-disabled='true'] {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral600};
-      }
-    }
-  }
-`;
-const IconButtonGroup = styled__default.default(Flex.Flex) `
-  & span:first-child button {
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
-  }
-
-  & span:last-child button {
-    border-radius: ${({ theme }) => `0 ${theme.borderRadius} ${theme.borderRadius} 0`};
-  }
-
-  & ${IconButtonWrapper} {
-    border-radius: 0;
-    border-left: none;
-
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral700};
-      }
-    }
-
-    &:hover {
-      background-color: ${({ theme }) => theme.colors.neutral100};
-
-      svg {
-        path {
-          fill: ${({ theme }) => theme.colors.neutral800};
-        }
-      }
-    }
-
-    &:active {
-      background-color: ${({ theme }) => theme.colors.neutral150};
-      svg {
-        path {
-          fill: ${({ theme }) => theme.colors.neutral900};
-        }
-      }
-    }
-
-    &[aria-disabled='true'] {
-      svg {
-        path {
-          fill: ${({ theme }) => theme.colors.neutral600};
-        }
-      }
-    }
-  }
-`;
-
-exports.IconButton = IconButton;
-exports.IconButtonGroup = IconButtonGroup;

package/dist/IconButton/IconButton.mjs

@@ -1,127 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import styled from 'styled-components';
-import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
-import { Tooltip } from '../Tooltip/Tooltip.mjs';
-import { BaseButton } from '../BaseButton/BaseButton.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-// TODO: we should align the default state in v2 with the Button
-// component
-const VARIANT_DEFAULT = 'tertiary';
-const VARIANT_SECONDARY = 'secondary';
-const SIZES = ['S', 'M', 'L'];
-const VARIANTS = [VARIANT_DEFAULT, VARIANT_SECONDARY];
-const IconButton = React.forwardRef(({ label, background, borderWidth, noBorder = false, children, icon, disabled = false, onClick, size = SIZES[0], 'aria-label': ariaLabel, variant = VARIANTS[0], ...restProps }, ref) => {
-    const handleClick = (e) => {
-        if (!disabled && onClick) {
-            onClick(e);
-        }
-    };
-    const component = (jsxs(IconButtonWrapper, { "aria-disabled": disabled, background: disabled ? 'neutral150' : background, borderWidth: noBorder ? 0 : borderWidth, justifyContent: "center", ...restProps, ref: ref, size: size, onClick: handleClick, variant: variant, children: [jsx(VisuallyHidden, { as: "span", children: label ?? ariaLabel }), React.cloneElement((icon || children), {
-                'aria-hidden': true,
-                focusable: false, // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
-            })] }));
-    return label ? jsx(Tooltip, { label: label, children: component }) : component;
-});
-const IconButtonWrapper = styled(BaseButton) `
-  background-color: ${({ theme, variant }) => {
-    if (variant === VARIANT_SECONDARY) {
-        return theme.colors.primary100;
-    }
-    return undefined;
-}};
-  border-color: ${({ theme, variant }) => {
-    if (variant === VARIANT_SECONDARY) {
-        return theme.colors.primary200;
-    }
-    return theme.colors.neutral200;
-}};
-  height: ${({ theme, size }) => theme.sizes.button[size]};
-  width: ${({ theme, size }) => theme.sizes.button[size]};
-
-  svg {
-    g,
-    path {
-      fill: ${({ theme, variant }) => {
-    if (variant === VARIANT_SECONDARY) {
-        return theme.colors.primary500;
-    }
-    return theme.colors.neutral500;
-}};
-    }
-  }
-
-  :hover,
-  :focus {
-    svg {
-      g,
-      path {
-        fill: ${({ theme, variant }) => {
-    if (variant === VARIANT_SECONDARY) {
-        return theme.colors.primary600;
-    }
-    return theme.colors.neutral600;
-}};
-      }
-    }
-  }
-
-  &[aria-disabled='true'] {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral600};
-      }
-    }
-  }
-`;
-const IconButtonGroup = styled(Flex) `
-  & span:first-child button {
-    border-left: 1px solid ${({ theme }) => theme.colors.neutral200};
-    border-radius: ${({ theme }) => `${theme.borderRadius} 0 0 ${theme.borderRadius}`};
-  }
-
-  & span:last-child button {
-    border-radius: ${({ theme }) => `0 ${theme.borderRadius} ${theme.borderRadius} 0`};
-  }
-
-  & ${IconButtonWrapper} {
-    border-radius: 0;
-    border-left: none;
-
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral700};
-      }
-    }
-
-    &:hover {
-      background-color: ${({ theme }) => theme.colors.neutral100};
-
-      svg {
-        path {
-          fill: ${({ theme }) => theme.colors.neutral800};
-        }
-      }
-    }
-
-    &:active {
-      background-color: ${({ theme }) => theme.colors.neutral150};
-      svg {
-        path {
-          fill: ${({ theme }) => theme.colors.neutral900};
-        }
-      }
-    }
-
-    &[aria-disabled='true'] {
-      svg {
-        path {
-          fill: ${({ theme }) => theme.colors.neutral600};
-        }
-      }
-    }
-  }
-`;
-
-export { IconButton, IconButtonGroup };

package/dist/IconButton/index.js

@@ -1,10 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const IconButton = require('./IconButton.js');
-
-
-
-exports.IconButton = IconButton.IconButton;
-exports.IconButtonGroup = IconButton.IconButtonGroup;

package/dist/IconButton/index.mjs

@@ -1 +0,0 @@
-export { IconButton, IconButtonGroup } from './IconButton.mjs';