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

package/dist/Table/Table.js

@@ -1,77 +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 RawTable = require('../RawTable/RawTable.js');
-const Box = require('../Box/Box.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const TableContainer = styled__default.default(Box.Box) `
-  overflow: hidden;
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const TableWrapper = styled__default.default(RawTable.RawTable) `
-  width: 100%;
-  white-space: nowrap;
-`;
-const TableBox = styled__default.default(Box.Box) `
-  &:before {
-    // TODO: make sure to add a token for this weird stuff
-    background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
-    opacity: 0.2;
-    position: absolute;
-    height: 100%;
-    content: ${({ overflowing }) => (overflowing === 'both' || overflowing === 'left' ? "''" : undefined)};
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-    width: ${({ theme }) => theme.spaces[2]};
-    left: 0;
-  }
-
-  &:after {
-    // TODO: make sure to add a token for this weird stuff
-    background: linear-gradient(270deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
-    opacity: 0.2;
-    position: absolute;
-    height: 100%;
-    content: ${({ overflowing }) => (overflowing === 'both' || overflowing === 'right' ? "''" : undefined)};
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-    width: ${({ theme }) => theme.spaces[2]};
-    right: 0;
-    top: 0;
-  }
-`;
-const ScrollContainer = styled__default.default(Box.Box) `
-  overflow-x: auto;
-`;
-const Table = ({ footer, ...props }) => {
-    const tableRef = React.useRef(null);
-    const [overflowing, setOverflowing] = React.useState();
-    const handleScroll = (e) => {
-        const maxScrollLeft = e.target.scrollWidth - e.target.clientWidth;
-        if (e.target.scrollLeft === 0) {
-            setOverflowing('right');
-            return;
-        }
-        if (e.target.scrollLeft === maxScrollLeft) {
-            setOverflowing('left');
-            return;
-        }
-        if (e.target.scrollLeft > 0) {
-            setOverflowing('both');
-        }
-    };
-    React.useEffect(() => {
-        if (tableRef.current.scrollWidth > tableRef.current.clientWidth) {
-            setOverflowing('right');
-        }
-    }, []);
-    return (jsxRuntime.jsxs(TableContainer, { shadow: "tableShadow", hasRadius: true, background: "neutral0", children: [jsxRuntime.jsx(TableBox, { overflowing: overflowing, position: "relative", children: jsxRuntime.jsx(ScrollContainer, { ref: tableRef, onScroll: handleScroll, paddingLeft: 6, paddingRight: 6, children: jsxRuntime.jsx(TableWrapper, { ...props }) }) }), footer] }));
-};
-
-exports.Table = Table;

package/dist/Table/Table.mjs

@@ -1,69 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect } from 'react';
-import styled from 'styled-components';
-import { RawTable } from '../RawTable/RawTable.mjs';
-import { Box } from '../Box/Box.mjs';
-
-const TableContainer = styled(Box) `
-  overflow: hidden;
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const TableWrapper = styled(RawTable) `
-  width: 100%;
-  white-space: nowrap;
-`;
-const TableBox = styled(Box) `
-  &:before {
-    // TODO: make sure to add a token for this weird stuff
-    background: linear-gradient(90deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
-    opacity: 0.2;
-    position: absolute;
-    height: 100%;
-    content: ${({ overflowing }) => (overflowing === 'both' || overflowing === 'left' ? "''" : undefined)};
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-    width: ${({ theme }) => theme.spaces[2]};
-    left: 0;
-  }
-
-  &:after {
-    // TODO: make sure to add a token for this weird stuff
-    background: linear-gradient(270deg, #c0c0cf 0%, rgba(0, 0, 0, 0) 100%);
-    opacity: 0.2;
-    position: absolute;
-    height: 100%;
-    content: ${({ overflowing }) => (overflowing === 'both' || overflowing === 'right' ? "''" : undefined)};
-    box-shadow: ${({ theme }) => theme.shadows.tableShadow};
-    width: ${({ theme }) => theme.spaces[2]};
-    right: 0;
-    top: 0;
-  }
-`;
-const ScrollContainer = styled(Box) `
-  overflow-x: auto;
-`;
-const Table = ({ footer, ...props }) => {
-    const tableRef = useRef(null);
-    const [overflowing, setOverflowing] = useState();
-    const handleScroll = (e) => {
-        const maxScrollLeft = e.target.scrollWidth - e.target.clientWidth;
-        if (e.target.scrollLeft === 0) {
-            setOverflowing('right');
-            return;
-        }
-        if (e.target.scrollLeft === maxScrollLeft) {
-            setOverflowing('left');
-            return;
-        }
-        if (e.target.scrollLeft > 0) {
-            setOverflowing('both');
-        }
-    };
-    useEffect(() => {
-        if (tableRef.current.scrollWidth > tableRef.current.clientWidth) {
-            setOverflowing('right');
-        }
-    }, []);
-    return (jsxs(TableContainer, { shadow: "tableShadow", hasRadius: true, background: "neutral0", children: [jsx(TableBox, { overflowing: overflowing, position: "relative", children: jsx(ScrollContainer, { ref: tableRef, onScroll: handleScroll, paddingLeft: 6, paddingRight: 6, children: jsx(TableWrapper, { ...props }) }) }), footer] }));
-};
-
-export { Table };

package/dist/Table/Tbody.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const RawTbody = require('../RawTable/RawTbody.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const TbodyWrapper = styled__default.default(RawTbody.RawTbody) `
-  & tr:last-of-type {
-    border-bottom: none;
-  }
-`;
-const Tbody = ({ children, ...props }) => {
-    return jsxRuntime.jsx(TbodyWrapper, { ...props, children: children });
-};
-
-exports.Tbody = Tbody;

package/dist/Table/Tbody.mjs

@@ -1,14 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { RawTbody } from '../RawTable/RawTbody.mjs';
-
-const TbodyWrapper = styled(RawTbody) `
-  & tr:last-of-type {
-    border-bottom: none;
-  }
-`;
-const Tbody = ({ children, ...props }) => {
-    return jsx(TbodyWrapper, { ...props, children: children });
-};
-
-export { Tbody };

package/dist/Table/Thead.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const RawThead = require('../RawTable/RawThead.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const TheadWrapper = styled__default.default(RawThead.RawThead) `
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const Thead = ({ children, ...props }) => {
-    return jsxRuntime.jsx(TheadWrapper, { ...props, children: children });
-};
-
-exports.Thead = Thead;

package/dist/Table/Thead.mjs

@@ -1,12 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { RawThead } from '../RawTable/RawThead.mjs';
-
-const TheadWrapper = styled(RawThead) `
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
-`;
-const Thead = ({ children, ...props }) => {
-    return jsx(TheadWrapper, { ...props, children: children });
-};
-
-export { Thead };

package/dist/Table/Tr.js

@@ -1,37 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const styled = require('styled-components');
-const RawTr = require('../RawTable/RawTr.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const TrWrapper = styled__default.default(RawTr.RawTr) `
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
-
-  & td,
-  & th {
-    padding: ${({ theme }) => theme.spaces[4]};
-  }
-
-  & td:first-of-type,
-  & th:first-of-type {
-    padding: 0 ${({ theme }) => theme.spaces[1]};
-  }
-
-  // Resetting padding values and fixing a height
-  th {
-    padding-top: 0;
-    padding-bottom: 0;
-    height: ${56 / 16}rem;
-  }
-`;
-const Tr = (props) => {
-    return jsxRuntime.jsx(TrWrapper, { ...props });
-};
-
-exports.Tr = Tr;

package/dist/Table/Tr.mjs

@@ -1,29 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import styled from 'styled-components';
-import { RawTr } from '../RawTable/RawTr.mjs';
-
-const TrWrapper = styled(RawTr) `
-  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
-
-  & td,
-  & th {
-    padding: ${({ theme }) => theme.spaces[4]};
-  }
-
-  & td:first-of-type,
-  & th:first-of-type {
-    padding: 0 ${({ theme }) => theme.spaces[1]};
-  }
-
-  // Resetting padding values and fixing a height
-  th {
-    padding-top: 0;
-    padding-bottom: 0;
-    height: ${56 / 16}rem;
-  }
-`;
-const Tr = (props) => {
-    return jsx(TrWrapper, { ...props });
-};
-
-export { Tr };

package/dist/Table/index.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const Table = require('./Table.js');
-const Tbody = require('./Tbody.js');
-const Thead = require('./Thead.js');
-const Tr = require('./Tr.js');
-const Cell = require('./Cell.js');
-const TFooter = require('./TFooter.js');
-
-
-
-exports.Table = Table.Table;
-exports.Tbody = Tbody.Tbody;
-exports.Thead = Thead.Thead;
-exports.Tr = Tr.Tr;
-exports.Td = Cell.Td;
-exports.Th = Cell.Th;
-exports.TFooter = TFooter.TFooter;

package/dist/Table/index.mjs

@@ -1,6 +0,0 @@
-export { Table } from './Table.mjs';
-export { Tbody } from './Tbody.mjs';
-export { Thead } from './Thead.mjs';
-export { Tr } from './Tr.mjs';
-export { Td, Th } from './Cell.mjs';
-export { TFooter } from './TFooter.mjs';

package/dist/Tabs/TabGroup.js

@@ -1,47 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const TabsContext = require('./TabsContext.js');
-const useControllableState = require('../hooks/useControllableState.js');
-const useId = require('../hooks/useId.js');
-
-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 TabGroup = React__namespace.forwardRef(({ id, initialSelectedTabIndex, label, onTabChange, selectedTabIndex: selectedTabIndexProp, variant, ...props }, ref) => {
-    const tabsId = useId.useId(id);
-    const [selectedTabIndex = 0, setSelectedTabIndex] = useControllableState.useControllableState({
-        prop: selectedTabIndexProp,
-        defaultProp: initialSelectedTabIndex,
-        // @ts-expect-error
-        onChange: onTabChange,
-    });
-    React__namespace.useImperativeHandle(ref, () => ({
-        _handlers: { setSelectedTabIndex },
-    }));
-    const context = React__namespace.useMemo(() => ({ id: tabsId, selectedTabIndex, selectTabIndex: setSelectedTabIndex, label, variant, onTabChange }), [label, onTabChange, selectedTabIndex, tabsId, variant, setSelectedTabIndex]);
-    return (jsxRuntime.jsx(TabsContext.TabsContext.Provider, { value: context, children: jsxRuntime.jsx("div", { ...props }) }));
-});
-TabGroup.displayName = 'TabGroup';
-
-exports.TabGroup = TabGroup;

package/dist/Tabs/TabGroup.mjs

@@ -1,23 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { TabsContext } from './TabsContext.mjs';
-import { useControllableState } from '../hooks/useControllableState.mjs';
-import { useId } from '../hooks/useId.mjs';
-
-const TabGroup = React.forwardRef(({ id, initialSelectedTabIndex, label, onTabChange, selectedTabIndex: selectedTabIndexProp, variant, ...props }, ref) => {
-    const tabsId = useId(id);
-    const [selectedTabIndex = 0, setSelectedTabIndex] = useControllableState({
-        prop: selectedTabIndexProp,
-        defaultProp: initialSelectedTabIndex,
-        // @ts-expect-error
-        onChange: onTabChange,
-    });
-    React.useImperativeHandle(ref, () => ({
-        _handlers: { setSelectedTabIndex },
-    }));
-    const context = React.useMemo(() => ({ id: tabsId, selectedTabIndex, selectTabIndex: setSelectedTabIndex, label, variant, onTabChange }), [label, onTabChange, selectedTabIndex, tabsId, variant, setSelectedTabIndex]);
-    return (jsx(TabsContext.Provider, { value: context, children: jsx("div", { ...props }) }));
-});
-TabGroup.displayName = 'TabGroup';
-
-export { TabGroup };

package/dist/Tabs/TabPanels.js

@@ -1,23 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const TabsContext = require('./TabsContext.js');
-
-const TabPanels = ({ children, ...props }) => {
-    const { id, selectedTabIndex } = TabsContext.useTabs();
-    const childrenArray = React.Children.toArray(children)
-        .map((node, index) => React.cloneElement(node, { id: `${id}-${index}` }))
-        .filter((_, index) => index === selectedTabIndex);
-    return jsxRuntime.jsx("div", { ...props, children: childrenArray });
-};
-const TabPanel = ({ id, ...props }) => {
-    const tabId = `${id}-tab`;
-    const tabPanelId = `${id}-tabpanel`;
-    return jsxRuntime.jsx("div", { id: tabPanelId, role: "tabpanel", tabIndex: 0, "aria-labelledby": tabId, ...props });
-};
-
-exports.TabPanel = TabPanel;
-exports.TabPanels = TabPanels;

package/dist/Tabs/TabPanels.mjs

@@ -1,18 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { Children, cloneElement } from 'react';
-import { useTabs } from './TabsContext.mjs';
-
-const TabPanels = ({ children, ...props }) => {
-    const { id, selectedTabIndex } = useTabs();
-    const childrenArray = Children.toArray(children)
-        .map((node, index) => cloneElement(node, { id: `${id}-${index}` }))
-        .filter((_, index) => index === selectedTabIndex);
-    return jsx("div", { ...props, children: childrenArray });
-};
-const TabPanel = ({ id, ...props }) => {
-    const tabId = `${id}-tab`;
-    const tabPanelId = `${id}-tabpanel`;
-    return jsx("div", { id: tabPanelId, role: "tabpanel", tabIndex: 0, "aria-labelledby": tabId, ...props });
-};
-
-export { TabPanel, TabPanels };

package/dist/Tabs/Tabs.js

@@ -1,153 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const uiPrimitives = require('@strapi/ui-primitives');
-const styled = require('styled-components');
-const components = require('./components.js');
-const TabsContext = require('./TabsContext.js');
-const keyboardKeys = require('../helpers/keyboardKeys.js');
-const Typography = require('../Typography/Typography.js');
-
-const _interopDefault = e => e && e.__esModule ? e : { default: e };
-
-const styled__default = /*#__PURE__*/_interopDefault(styled);
-
-const useTabsFocus = (selectedTabIndex, onTabChange) => {
-    const tabsRef = React.useRef(null);
-    const mountedRef = React.useRef(false);
-    const handleTabChange = uiPrimitives.useCallbackRef(onTabChange);
-    React.useEffect(() => {
-        if (!tabsRef.current)
-            return;
-        // We don't' want to send the focus to the tab when it mounts
-        // It could break the navigating flow of the users if the focus was supposed to be
-        // on another element
-        if (mountedRef.current) {
-            const nextFocusEl = tabsRef.current.querySelector('[tabindex="0"]');
-            if (nextFocusEl) {
-                nextFocusEl.focus();
-                handleTabChange(selectedTabIndex);
-            }
-        }
-        if (!mountedRef.current) {
-            mountedRef.current = true;
-        }
-    }, [selectedTabIndex, handleTabChange]);
-    return tabsRef;
-};
-const TabButton = styled__default.default.button `
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-`;
-const Tabs = ({ children, ...props }) => {
-    const { id, selectedTabIndex, selectTabIndex, label, variant, onTabChange } = TabsContext.useTabs();
-    const tabsRef = useTabsFocus(selectedTabIndex, onTabChange);
-    const childrenArray = React.Children.toArray(children).map((node, index) => React.cloneElement(node, {
-        id: `${id}-${index}`,
-        index,
-        selectedTabIndex,
-        onTabClick: () => selectTabIndex(index),
-        variant,
-    }));
-    const handleKeyDown = (e) => {
-        const hasAllChildrenDisabled = childrenArray.every((node) => node.props.disabled);
-        if (hasAllChildrenDisabled) {
-            return;
-        }
-        switch (e.key) {
-            case keyboardKeys.KeyboardKeys.RIGHT: {
-                const nextWantedIndex = selectedTabIndex + 1;
-                const findNextIndex = (ref) => {
-                    const isDisabled = childrenArray[ref].props.disabled;
-                    if (!isDisabled) {
-                        return ref;
-                    }
-                    if (ref === childrenArray.length - 1) {
-                        return findNextIndex(0);
-                    }
-                    return findNextIndex(ref + 1);
-                };
-                const nextIndex = findNextIndex(nextWantedIndex >= childrenArray.length ? 0 : nextWantedIndex);
-                selectTabIndex(nextIndex);
-                break;
-            }
-            case keyboardKeys.KeyboardKeys.LEFT: {
-                const nextWantedIndex = selectedTabIndex - 1;
-                const findNextIndex = (ref) => {
-                    const isDisabled = childrenArray[ref].props.disabled;
-                    if (!isDisabled) {
-                        return ref;
-                    }
-                    if (ref === 0) {
-                        return findNextIndex(childrenArray.length - 1);
-                    }
-                    return findNextIndex(ref - 1);
-                };
-                const nextIndex = findNextIndex(nextWantedIndex < 0 ? childrenArray.length - 1 : nextWantedIndex);
-                selectTabIndex(nextIndex);
-                break;
-            }
-            case keyboardKeys.KeyboardKeys.HOME: {
-                const nextIndex = childrenArray.findIndex((node) => !node.props.disabled);
-                selectTabIndex(nextIndex);
-                break;
-            }
-            case keyboardKeys.KeyboardKeys.END: {
-                const arrayOfChildrenProps = childrenArray.map((node, index) => ({ isDisabled: node.props.disabled, index }));
-                const firstNonDisabledChildren = arrayOfChildrenProps.reverse().find(({ isDisabled }) => !isDisabled);
-                if (firstNonDisabledChildren) {
-                    selectTabIndex(firstNonDisabledChildren.index);
-                }
-                break;
-            }
-        }
-    };
-    if (variant === 'simple') {
-        return (
-        // TODO: This needs to be reviewed how to handle correctly since it's supposed to have focus.
-        // eslint-disable-next-line jsx-a11y/interactive-supports-focus
-        jsxRuntime.jsx("div", { ref: tabsRef, role: "tablist", "aria-label": label, onKeyDown: handleKeyDown, ...props, children: childrenArray }));
-    }
-    return (jsxRuntime.jsx(components.DefaultTabsRow, { ref: tabsRef, role: "tablist", alignItems: "flex-end", "aria-label": label, onKeyDown: handleKeyDown, ...props, children: childrenArray }));
-};
-const Tab = ({ disabled = false, id, children, variant, hasError = false, index, selectedTabIndex, onTabClick, ...props }) => {
-    const tabId = `${id}-tab`;
-    const tabPanelId = `${id}-tabpanel`;
-    const selected = index === selectedTabIndex;
-    const handleClick = () => {
-        if (disabled) {
-            return;
-        }
-        if (onTabClick) {
-            onTabClick();
-        }
-    };
-    if (variant === 'simple') {
-        let textColor;
-        if (hasError) {
-            textColor = 'danger600';
-        }
-        else if (selected) {
-            textColor = 'primary600';
-        }
-        else if (disabled) {
-            textColor = 'neutral600';
-        }
-        else {
-            textColor = 'neutral600';
-        }
-        return (jsxRuntime.jsx(TabButton, { id: tabId, role: "tab", "aria-controls": selected ? tabPanelId : undefined, tabIndex: selected ? 0 : -1, "aria-selected": selected, type: "button", onClick: handleClick, "aria-disabled": disabled, ...props, children: jsxRuntime.jsx(components.SimpleTabBox, { padding: 4, selected: selected, hasError: hasError, children: jsxRuntime.jsx(Typography.Typography, { variant: "sigma", textColor: textColor, children: children }) }) }));
-    }
-    if (hasError) {
-        console.warn('The "hasError" prop is only available for the "simple" variant.');
-    }
-    const showRightBorder = selectedTabIndex && selectedTabIndex - 1 === index;
-    return (jsxRuntime.jsx(components.DefaultTabButton, { id: tabId, role: "tab", type: "button", "aria-controls": selected ? tabPanelId : undefined, tabIndex: selected ? 0 : -1, "aria-selected": selected, onClick: handleClick, "aria-disabled": disabled, showRightBorder: Boolean(showRightBorder), ...props, children: jsxRuntime.jsx(components.DefaultTabBox, { padding: selected ? 4 : 3, background: selected ? 'neutral0' : 'neutral100', selected: selected, children: jsxRuntime.jsx(Typography.Typography, { fontWeight: "bold", textColor: selected ? 'primary700' : 'neutral600', children: children }) }) }));
-};
-
-exports.Tab = Tab;
-exports.Tabs = Tabs;