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

package/dist/Select/OptGroup.mjs

@@ -1,10 +0,0 @@
-import { MultiSelectGroup } from './MultiSelect.mjs';
-
-/**
- * @preserve
- * @deprecated This component is only fit for the MultiSelect component.
- * Therefore, you should import the MultiSelectGroup component instead.
- */
-const OptGroup = MultiSelectGroup;
-
-export { OptGroup };

package/dist/Select/Option.js

@@ -1,20 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const MultiSelect = require('./MultiSelect.js');
-const Select = require('./Select.js');
-const SingleSelect = require('./SingleSelect.js');
-
-/**
- * @preserve
- * @deprecated You should import the specific type of option you want to render,
- * e.g. `import { MultiSelectOption } from '@strapi/design-system';`
- */
-const Option = ({ multi, ...restProps }) => {
-    const context = Select.useSelectContext();
-    return multi || context.multi ? jsxRuntime.jsx(MultiSelect.MultiSelectOption, { ...restProps }) : jsxRuntime.jsx(SingleSelect.SingleSelectOption, { ...restProps });
-};
-
-exports.Option = Option;

package/dist/Select/Option.mjs

@@ -1,16 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import { MultiSelectOption } from './MultiSelect.mjs';
-import { useSelectContext } from './Select.mjs';
-import { SingleSelectOption } from './SingleSelect.mjs';
-
-/**
- * @preserve
- * @deprecated You should import the specific type of option you want to render,
- * e.g. `import { MultiSelectOption } from '@strapi/design-system';`
- */
-const Option = ({ multi, ...restProps }) => {
-    const context = useSelectContext();
-    return multi || context.multi ? jsx(MultiSelectOption, { ...restProps }) : jsx(SingleSelectOption, { ...restProps });
-};
-
-export { Option };

package/dist/Select/Select.js

@@ -1,44 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const MultiSelect = require('./MultiSelect.js');
-const SingleSelect = require('./SingleSelect.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 SelectContext = React__namespace.createContext({ multi: false });
-const useSelectContext = () => React__namespace.useContext(SelectContext);
-/**
- * @preserve
- * @deprecated You should import the specific type of select you want to render
- *
- * e.g. `import { MultiSelect } from '@strapi/design-system';`
- */
-const Select = (props) => {
-    const contextValue = React__namespace.useMemo(() => ({ multi: Boolean(props.multi || props.withTags) }), [props.multi, props.withTags]);
-    return (jsxRuntime.jsx(SelectContext.Provider, { value: contextValue, children: props.multi || props.withTags ? jsxRuntime.jsx(MultiSelect.MultiSelect, { ...props }) : jsxRuntime.jsx(SingleSelect.SingleSelect, { ...props }) }));
-};
-
-exports.Select = Select;
-exports.useSelectContext = useSelectContext;

package/dist/Select/Select.mjs

@@ -1,19 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { MultiSelect } from './MultiSelect.mjs';
-import { SingleSelect } from './SingleSelect.mjs';
-
-const SelectContext = React.createContext({ multi: false });
-const useSelectContext = () => React.useContext(SelectContext);
-/**
- * @preserve
- * @deprecated You should import the specific type of select you want to render
- *
- * e.g. `import { MultiSelect } from '@strapi/design-system';`
- */
-const Select = (props) => {
-    const contextValue = React.useMemo(() => ({ multi: Boolean(props.multi || props.withTags) }), [props.multi, props.withTags]);
-    return (jsx(SelectContext.Provider, { value: contextValue, children: props.multi || props.withTags ? jsx(MultiSelect, { ...props }) : jsx(SingleSelect, { ...props }) }));
-};
-
-export { Select, useSelectContext };

package/dist/Select/SelectList.js

@@ -1,150 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const computeScrollIntoView = require('compute-scroll-into-view');
-const keyboardKeys = require('../helpers/keyboardKeys.js');
-const Flex = require('../Flex/Flex.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 DownState = {
-    Keyboard: 'down:keyboard',
-    Mouse: 'down:mouse',
-};
-const UpState = { Keyboard: 'up:keyboard', Mouse: 'up:mouse' };
-/**
- * @preserve
- * @deprecated This component will be removed in the next major release.
- * If you need a custom listbox I would recommend opening a new issue.
- */
-const SelectList = ({ labelledBy, onSelectItem, children, multi = false, onEscape, expanded, }) => {
-    const listRef = useListRef(expanded);
-    const handleKeyDown = (e) => {
-        switch (e.key) {
-            case keyboardKeys.KeyboardKeys.ESCAPE: {
-                e.stopPropagation();
-                onEscape();
-                break;
-            }
-            case keyboardKeys.KeyboardKeys.DOWN: {
-                e.preventDefault();
-                const currentOption = getActiveDescendant(listRef.current);
-                if (!currentOption)
-                    return;
-                const nextOption = currentOption.nextSibling;
-                if (nextOption) {
-                    changeDescendant(listRef.current, nextOption);
-                }
-                else {
-                    const options = listRef.current.querySelectorAll('[role="option"]');
-                    const firstOption = options[0];
-                    changeDescendant(listRef.current, firstOption);
-                }
-                break;
-            }
-            case keyboardKeys.KeyboardKeys.UP: {
-                e.preventDefault();
-                const currentOption = getActiveDescendant(listRef.current);
-                if (!currentOption)
-                    return;
-                const previousOption = currentOption.previousSibling;
-                if (previousOption) {
-                    changeDescendant(listRef.current, previousOption);
-                }
-                else {
-                    const options = listRef.current.querySelectorAll('[role="option"]');
-                    const lastOption = options[options.length - 1];
-                    changeDescendant(listRef.current, lastOption);
-                }
-                break;
-            }
-            case keyboardKeys.KeyboardKeys.SPACE:
-            case keyboardKeys.KeyboardKeys.ENTER: {
-                e.preventDefault();
-                const currentOption = getActiveDescendant(listRef.current);
-                if (currentOption.getAttribute('data-opt-group')) {
-                    onSelectItem(currentOption.getAttribute('data-opt-group-children').split(','), currentOption.getAttribute('data-opt-group'));
-                }
-                else {
-                    onSelectItem(currentOption.getAttribute('data-strapi-value'));
-                }
-                if (!multi) {
-                    onEscape();
-                }
-                break;
-            }
-        }
-    };
-    return (jsxRuntime.jsx(Flex.Flex, { as: "ul", gap: 1, direction: "column", alignItems: "stretch", role: "listbox", "aria-labelledby": labelledBy, tabIndex: -1, ref: listRef, onKeyDown: handleKeyDown, onBlur: onEscape, children: children }));
-};
-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.compute(option, {
-        scrollMode: 'if-needed',
-        block: 'nearest',
-        inline: 'nearest',
-    });
-    actions.forEach(({ el, top, left }) => {
-        el.scrollTop = top;
-        el.scrollLeft = left;
-    });
-};
-const useListRef = (expanded) => {
-    const listRef = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
-        listRef.current.focus();
-    }, []);
-    React__namespace.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);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return listRef;
-};
-const getActiveDescendant = (list) => {
-    const id = list.getAttribute('aria-activedescendant');
-    return list.querySelector(`#${id}`);
-};
-
-exports.SelectList = SelectList;

package/dist/Select/SelectList.mjs

@@ -1,126 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-import * as React from 'react';
-import { compute } from 'compute-scroll-into-view';
-import { KeyboardKeys } from '../helpers/keyboardKeys.mjs';
-import { Flex } from '../Flex/Flex.mjs';
-
-const DownState = {
-    Keyboard: 'down:keyboard',
-    Mouse: 'down:mouse',
-};
-const UpState = { Keyboard: 'up:keyboard', Mouse: 'up:mouse' };
-/**
- * @preserve
- * @deprecated This component will be removed in the next major release.
- * If you need a custom listbox I would recommend opening a new issue.
- */
-const SelectList = ({ labelledBy, onSelectItem, children, multi = false, onEscape, expanded, }) => {
-    const listRef = useListRef(expanded);
-    const handleKeyDown = (e) => {
-        switch (e.key) {
-            case KeyboardKeys.ESCAPE: {
-                e.stopPropagation();
-                onEscape();
-                break;
-            }
-            case KeyboardKeys.DOWN: {
-                e.preventDefault();
-                const currentOption = getActiveDescendant(listRef.current);
-                if (!currentOption)
-                    return;
-                const nextOption = currentOption.nextSibling;
-                if (nextOption) {
-                    changeDescendant(listRef.current, nextOption);
-                }
-                else {
-                    const options = listRef.current.querySelectorAll('[role="option"]');
-                    const firstOption = options[0];
-                    changeDescendant(listRef.current, firstOption);
-                }
-                break;
-            }
-            case KeyboardKeys.UP: {
-                e.preventDefault();
-                const currentOption = getActiveDescendant(listRef.current);
-                if (!currentOption)
-                    return;
-                const previousOption = currentOption.previousSibling;
-                if (previousOption) {
-                    changeDescendant(listRef.current, previousOption);
-                }
-                else {
-                    const options = listRef.current.querySelectorAll('[role="option"]');
-                    const lastOption = options[options.length - 1];
-                    changeDescendant(listRef.current, lastOption);
-                }
-                break;
-            }
-            case KeyboardKeys.SPACE:
-            case KeyboardKeys.ENTER: {
-                e.preventDefault();
-                const currentOption = getActiveDescendant(listRef.current);
-                if (currentOption.getAttribute('data-opt-group')) {
-                    onSelectItem(currentOption.getAttribute('data-opt-group-children').split(','), currentOption.getAttribute('data-opt-group'));
-                }
-                else {
-                    onSelectItem(currentOption.getAttribute('data-strapi-value'));
-                }
-                if (!multi) {
-                    onEscape();
-                }
-                break;
-            }
-        }
-    };
-    return (jsx(Flex, { as: "ul", gap: 1, direction: "column", alignItems: "stretch", role: "listbox", "aria-labelledby": labelledBy, tabIndex: -1, ref: listRef, onKeyDown: handleKeyDown, onBlur: onEscape, children: children }));
-};
-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 = compute(option, {
-        scrollMode: 'if-needed',
-        block: 'nearest',
-        inline: 'nearest',
-    });
-    actions.forEach(({ el, top, left }) => {
-        el.scrollTop = top;
-        el.scrollLeft = left;
-    });
-};
-const useListRef = (expanded) => {
-    const listRef = React.useRef(null);
-    React.useEffect(() => {
-        listRef.current.focus();
-    }, []);
-    React.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);
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-    return listRef;
-};
-const getActiveDescendant = (list) => {
-    const id = list.getAttribute('aria-activedescendant');
-    return list.querySelector(`#${id}`);
-};
-
-export { SelectList };

package/dist/Select/SelectParts.js

@@ -1,169 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const jsxRuntime = require('react/jsx-runtime');
-const React = require('react');
-const icons = require('@strapi/icons');
-const uiPrimitives = require('@strapi/ui-primitives');
-const styled = require('styled-components');
-const useComposeRefs = require('../hooks/useComposeRefs.js');
-const Flex = require('../Flex/Flex.js');
-const Box = require('../Box/Box.js');
-const utils = require('../themes/utils.js');
-const Typography = require('../Typography/Typography.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);
-
-const SelectTrigger = React__namespace.forwardRef(({ onClear, clearLabel = 'Clear', startIcon, disabled, hasError, size = 'M', children, ...restProps }, ref) => {
-    const triggerRef = React__namespace.useRef(null);
-    const handleClearClick = (e) => {
-        if (onClear && !disabled) {
-            onClear(e);
-            triggerRef.current.focus();
-        }
-    };
-    const composedRefs = useComposeRefs.useComposedRefs(triggerRef, ref);
-    return (jsxRuntime.jsx(uiPrimitives.Select.Trigger, { asChild: true, children: jsxRuntime.jsxs(StyledTrigger, { "aria-disabled": disabled, "$hasError": hasError, "$size": size, ref: composedRefs, alignItems: "center", justifyContent: "space-between", position: "relative", overflow: "hidden", hasRadius: true, background: disabled ? 'neutral150' : 'neutral0', paddingLeft: 3, paddingRight: 3, paddingTop: 1, paddingBottom: 1, gap: 4, cursor: "default", width: "100%", ...restProps, children: [jsxRuntime.jsxs(Flex.Flex, { flex: "1", as: "span", gap: 3, children: [startIcon && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })), children] }), jsxRuntime.jsxs(Flex.Flex, { as: "span", gap: 3, children: [onClear ? (jsxRuntime.jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", role: "button", tabIndex: 0, onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, cursor: "pointer", children: jsxRuntime.jsx(icons.Cross, {}) })) : null, jsxRuntime.jsx(DownIcon, { children: jsxRuntime.jsx(icons.CarretDown, {}) })] })] }) }));
-});
-const IconBox = styled__default.default(Box.Box) `
-  border: none;
-
-  svg {
-    height: ${11 / 16}rem;
-    width: ${11 / 16}rem;
-  }
-
-  svg path {
-    fill: ${({ theme }) => theme.colors.neutral600};
-  }
-`;
-const StyledTrigger = styled__default.default(Flex.Flex) `
-  border: 1px solid ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};
-  min-height: ${({ theme, $size }) => utils.getThemeSize('input')({ theme, size: $size })};
-
-  &[aria-disabled='true'] {
-    color: ${(props) => props.theme.colors.neutral600};
-  }
-
-  /* Required to ensure the below inputFocusStyles are adhered too */
-  &:focus-visible {
-    outline: none;
-  }
-
-  ${({ theme, $hasError }) => utils.inputFocusStyle()({ theme, hasError: $hasError })};
-`;
-const DownIcon = styled__default.default(uiPrimitives.Select.Icon) `
-  & > svg {
-    width: ${6 / 16}rem;
-
-    & > path {
-      fill: ${({ theme }) => theme.colors.neutral600};
-    }
-  }
-`;
-const SelectValue = React__namespace.forwardRef(({ children, placeholder, ...restProps }, ref) => (jsxRuntime.jsx(ValueType, { ref: ref, ellipsis: true, ...restProps, children: jsxRuntime.jsx(StyledValue, { placeholder: placeholder, children: children }) })));
-const ValueType = styled__default.default(Typography.Typography) `
-  flex: 1;
-`;
-const StyledValue = styled__default.default(uiPrimitives.Select.Value) `
-  display: flex;
-  gap: ${({ theme }) => theme.spaces[1]};
-  flex-wrap: wrap;
-`;
-/* -------------------------------------------------------------------------------------------------
- * SelectContent
- * -----------------------------------------------------------------------------------------------*/
-const SelectContent = styled__default.default(uiPrimitives.Select.Content) `
-  background: ${({ theme }) => theme.colors.neutral0};
-  box-shadow: ${({ theme }) => theme.shadows.filterShadow};
-  border: 1px solid ${({ theme }) => theme.colors.neutral150};
-  border-radius: ${({ theme }) => theme.borderRadius};
-  min-width: var(--radix-select-trigger-width);
-  /* This is from the design-system figma file. */
-  max-height: 15rem;
-  z-index: ${({ theme }) => theme.zIndices[1]};
-`;
-/* -------------------------------------------------------------------------------------------------
- * SelectViewport
- * -----------------------------------------------------------------------------------------------*/
-const SelectViewport = styled__default.default(uiPrimitives.Select.Viewport) `
-  padding: ${({ theme }) => theme.spaces[1]};
-`;
-const SelectItem = React__namespace.forwardRef((props, ref) => (jsxRuntime.jsx(StyledSelectItem, { ref: ref, ...props })));
-const itemStyles = styled.css `
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline-offset: -3px;
-  border-radius: ${(props) => props.theme.borderRadius};
-  padding: ${(props) => `${props.theme.spaces[2]} ${props.theme.spaces[4]}`};
-  padding-left: ${({ theme }) => theme.spaces[4]};
-  background-color: ${({ theme }) => theme.colors.neutral0};
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.spaces[2]};
-  white-space: nowrap;
-  user-select: none;
-
-  &:focus-visible {
-    outline: none;
-    background-color: ${({ theme }) => theme.colors.primary100};
-  }
-`;
-const StyledSelectItem = styled__default.default(uiPrimitives.Select.Item) `
-  ${itemStyles}
-
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.primary100};
-  }
-
-  &[data-state='checked'] {
-    ${Typography.Typography} {
-      font-weight: bold;
-      color: ${({ theme }) => theme.colors.primary600};
-    }
-  }
-`;
-const Root = uiPrimitives.Select.Root;
-const Trigger = SelectTrigger;
-const Value = SelectValue;
-const Portal = uiPrimitives.Select.Portal;
-const Content = SelectContent;
-const Viewport = SelectViewport;
-const Item = SelectItem;
-const ItemIndicator = uiPrimitives.Select.ItemIndicator;
-const ItemText = uiPrimitives.Select.ItemText;
-const Group = uiPrimitives.Select.Group;
-
-exports.Content = Content;
-exports.Group = Group;
-exports.Item = Item;
-exports.ItemIndicator = ItemIndicator;
-exports.ItemText = ItemText;
-exports.Portal = Portal;
-exports.Root = Root;
-exports.Trigger = Trigger;
-exports.Value = Value;
-exports.Viewport = Viewport;