@strapi/design-system 1.8.2 → 1.10.0-alpha.0

package/dist/Select/SelectParts.mjs

@@ -0,0 +1,133 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Cross, CarretDown } from '@strapi/icons';
+import { Select } from '@strapi/ui-primitives';
+import styled, { css } from 'styled-components';
+import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { Box } from '../Box/Box.mjs';
+import { getThemeSize, inputFocusStyle } from '../themes/utils.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const SelectTrigger = React.forwardRef(({ onClear, clearLabel = 'Clear', startIcon, disabled, hasError, size = 'M', children, ...restProps }, ref) => {
+    const triggerRef = React.useRef(null);
+    const handleClearClick = (e) => {
+        if (onClear && !disabled) {
+            onClear(e);
+            triggerRef.current.focus();
+        }
+    };
+    const composedRefs = useComposedRefs(triggerRef, ref);
+    return (jsx(Select.Trigger, { asChild: true, children: 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, gap: 4, cursor: "default", width: "100%", ...restProps, children: [jsxs(Flex, { flex: "1", as: "span", gap: 3, children: [startIcon && (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })), children] }), jsxs(Flex, { as: "span", gap: 3, children: [onClear ? (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: jsx(Cross, {}) })) : null, jsx(DownIcon, { children: jsx(CarretDown, {}) })] })] }) }));
+});
+const IconBox = styled(Box) `
+  border: none;
+
+  svg {
+    height: ${11 / 16}rem;
+    width: ${11 / 16}rem;
+  }
+
+  svg path {
+    fill: ${({ theme }) => theme.colors.neutral600};
+  }
+`;
+const StyledTrigger = styled(Flex) `
+  border: 1px solid ${({ theme, $hasError }) => ($hasError ? theme.colors.danger600 : theme.colors.neutral200)};
+  min-height: ${({ theme, $size }) => 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 }) => inputFocusStyle()({ theme, hasError: $hasError })};
+`;
+const DownIcon = styled(Select.Icon) `
+  & > svg {
+    width: ${6 / 16}rem;
+
+    & > path {
+      fill: ${({ theme }) => theme.colors.neutral600};
+    }
+  }
+`;
+const SelectValue = React.forwardRef(({ children, placeholder, ...restProps }, ref) => (jsx(ValueType, { ref: ref, ellipsis: true, ...restProps, children: jsx(StyledValue, { placeholder: placeholder, children: children }) })));
+const ValueType = styled(Typography) `
+  flex: 1;
+`;
+const StyledValue = styled(Select.Value) `
+  display: flex;
+  gap: ${({ theme }) => theme.spaces[1]};
+  flex-wrap: wrap;
+`;
+/* -------------------------------------------------------------------------------------------------
+ * SelectContent
+ * -----------------------------------------------------------------------------------------------*/
+const SelectContent = styled(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(Select.Viewport) `
+  padding: ${({ theme }) => theme.spaces[1]};
+`;
+const SelectItem = React.forwardRef((props, ref) => (jsx(StyledSelectItem, { ref: ref, ...props })));
+const itemStyles = 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(Select.Item) `
+  ${itemStyles}
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.primary100};
+  }
+
+  &[data-state='checked'] {
+    ${Typography} {
+      font-weight: bold;
+      color: ${({ theme }) => theme.colors.primary600};
+    }
+  }
+`;
+const Root = Select.Root;
+const Trigger = SelectTrigger;
+const Value = SelectValue;
+const Portal = Select.Portal;
+const Content = SelectContent;
+const Viewport = SelectViewport;
+const Item = SelectItem;
+const ItemIndicator = Select.ItemIndicator;
+const ItemText = Select.ItemText;
+const Group = Select.Group;
+
+export { Content, Group, Item, ItemIndicator, ItemText, Portal, Root, Trigger, Value, Viewport };

package/dist/Select/SingleSelect.js

@@ -1,44 +1,111 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import * as u from "react";
-import { Item as q, ItemText as W, Root as _, Trigger as H, Value as M, Portal as P, Content as z, Viewport as A } from "./SelectParts.js";
-import { stripReactIdOfColon as D } from "../helpers/strings.js";
-import { useId as R } from "../hooks/useId.js";
-import { useIntersection as G } from "../hooks/useIntersection.js";
-import { Box as x } from "../Box/Box.js";
-import { Typography as J } from "../Typography/Typography.js";
-import { Field as K } from "../Field/Field.js";
-import { Flex as Q } from "../Flex/Flex.js";
-import { FieldLabel as U } from "../Field/FieldLabel.js";
-import { FieldHint as X } from "../Field/FieldHint.js";
-import { FieldError as Y } from "../Field/FieldError.js";
-const me = ({ error: c, hint: t, id: d, label: n, labelAction: i, required: a, selectButtonTitle: g, ...p }) => {
-  const o = R(d), l = u.useRef(null);
-  return e(K, { hint: t, error: c, id: o, required: a, children: h(Q, { direction: "column", alignItems: "stretch", gap: 1, children: [n ? e(U, { onClick: () => {
-    l.current.focus();
-  }, action: i, children: n }) : null, e(Z, { label: n, id: o, triggerRef: l, required: a, ...p }), e(X, {}), e(Y, {})] }) });
-}, Z = ({ "aria-label": c, id: t, children: d, clearLabel: n = "Clear", customizeContent: i, disabled: a, error: g, label: p, onChange: o, onClear: l, onReachEnd: m, placeholder: C, required: B, selectButtonTitle: ee, startIcon: O, size: T = "M", value: f, triggerRef: F, ...$ }) => {
-  const [y, I] = u.useState(), [k, w] = u.useState(!1), L = (r) => {
-    w(r);
-  }, v = (r) => {
-    l && l(r), o || I("");
-  }, E = `${t}-hint`, N = `${t}-error`, V = (r) => {
-    o ? o(typeof f == "number" ? Number(r) : r) : I(r);
-  }, b = u.useRef(null), j = R(), S = `intersection-${D(j)}`;
-  G(b, (r) => {
-    m && m(r);
-  }, {
-    selectorToWatch: `#${S}`,
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const SelectParts = require('./SelectParts.js');
+const strings = require('../helpers/strings.js');
+const useComposeRefs = require('../hooks/useComposeRefs.js');
+const useId = require('../hooks/useId.js');
+const useIntersection = require('../hooks/useIntersection.js');
+const Field = require('../Field/Field.js');
+const Flex = require('../Flex/Flex.js');
+const FieldLabel = require('../Field/FieldLabel.js');
+const FieldHint = require('../Field/FieldHint.js');
+const FieldError = require('../Field/FieldError.js');
+const Box = require('../Box/Box.js');
+const Typography = require('../Typography/Typography.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 SingleSelect = React__namespace.forwardRef(({ error, hint, id, label, labelAction, required, selectButtonTitle: _deprecatedSelectButtonTitle, ...restProps }, forwardedRef) => {
+    const generatedId = useId.useId(id);
     /**
-     * We need to know when the select is open because only then will viewportRef
-     * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
+     * Because the trigger needs to be a `div` to allow the clear
+     * button & tags to be clickable, we need to manually focus it.
      */
-    skipWhen: !k
-  });
-  const s = (typeof f < "u" && f !== null ? f.toString() : y) ?? "";
-  return h(_, { onOpenChange: L, disabled: a, required: B, onValueChange: V, value: s, ...$, children: [e(H, { ref: F, "aria-label": p ?? c, "aria-describedby": t ? `${E} ${N}` : void 0, id: t, startIcon: O, size: T, hasError: !!g, disabled: a, clearLabel: n, onClear: s && l ? v : void 0, children: e(M, { placeholder: C, textColor: s ? "neutral800" : "neutral600", children: s && i ? i(s) : void 0 }) }), e(P, { children: e(z, { position: "popper", sideOffset: 4, children: h(A, { ref: b, children: [d, e(x, { id: S, width: "100%", height: "1px" })] }) }) })] });
-}, ge = u.forwardRef(({ value: c, startIcon: t, children: d, ...n }, i) => h(q, { ref: i, value: c.toString(), ...n, children: [t && e(x, { as: "span", "aria-hidden": !0, children: t }), e(J, { textColor: "neutral800", children: e(W, { children: d }) })] }));
-export {
-  me as SingleSelect,
-  Z as SingleSelectInput,
-  ge as SingleSelectOption
-};
+    const triggerRef = React__namespace.useRef(null);
+    const handleFieldLabelClick = () => {
+        triggerRef.current.focus();
+    };
+    const composedTriggerRefs = useComposeRefs.useComposedRefs(forwardedRef, triggerRef);
+    return (jsxRuntime.jsx(Field.Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxRuntime.jsxs(Flex.Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label ? (jsxRuntime.jsx(FieldLabel.FieldLabel, { onClick: handleFieldLabelClick, action: labelAction, children: label })) : null, jsxRuntime.jsx(SingleSelectInput, { label: label, id: generatedId, ref: composedTriggerRefs, required: required, ...restProps }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
+});
+const SingleSelectInput = React__namespace.forwardRef(({ 'aria-label': ariaLabel, id, children, clearLabel = 'Clear', customizeContent, disabled, error, label, onChange, onClear, onReachEnd, placeholder, required, selectButtonTitle: _deprecatedSelectButtonTitle, startIcon, size = 'M', value: passedValue, ...restProps }, forwardedRef) => {
+    /**
+     * These values are drawn out from the internals of the Radix component
+     * We can then use them to react to visual changes for the component
+     */
+    const [internalValue, setInternalValue] = React__namespace.useState();
+    const [internalIsOpen, setInternalIsOpen] = React__namespace.useState(false);
+    const handleOpenChange = (open) => {
+        setInternalIsOpen(open);
+    };
+    const handleOnClear = (e) => {
+        if (onClear) {
+            onClear(e);
+        }
+        if (!onChange) {
+            setInternalValue('');
+        }
+    };
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const handleValueChange = (value) => {
+        /**
+         * If it's being externally managed then we shouldn't
+         * both setting our copy of the internal value.
+         */
+        if (onChange) {
+            const shouldBeNumber = typeof passedValue === 'number';
+            onChange(shouldBeNumber ? Number(value) : value);
+        }
+        else {
+            setInternalValue(value);
+        }
+    };
+    const viewportRef = React__namespace.useRef(null);
+    const generatedIntersectionId = useId.useId();
+    const intersectionId = `intersection-${strings.stripReactIdOfColon(generatedIntersectionId)}`;
+    const handleReachEnd = (entry) => {
+        if (onReachEnd) {
+            onReachEnd(entry);
+        }
+    };
+    useIntersection.useIntersection(viewportRef, handleReachEnd, {
+        selectorToWatch: `#${intersectionId}`,
+        /**
+         * We need to know when the select is open because only then will viewportRef
+         * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
+         */
+        skipWhen: !internalIsOpen,
+    });
+    const value = (typeof passedValue !== 'undefined' && passedValue !== null ? passedValue.toString() : internalValue) ?? '';
+    return (jsxRuntime.jsxs(SelectParts.Root, { onOpenChange: handleOpenChange, disabled: disabled, required: required, onValueChange: handleValueChange, value: value, ...restProps, children: [jsxRuntime.jsx(SelectParts.Trigger, { ref: forwardedRef, "aria-label": label ?? ariaLabel, "aria-describedby": id ? `${hintId} ${errorId}` : undefined, id: id, startIcon: startIcon, size: size, hasError: Boolean(error), disabled: disabled, clearLabel: clearLabel, onClear: value && onClear ? handleOnClear : undefined, children: jsxRuntime.jsx(SelectParts.Value, { placeholder: placeholder, textColor: value ? 'neutral800' : 'neutral600', children: value && customizeContent ? customizeContent(value) : undefined }) }), jsxRuntime.jsx(SelectParts.Portal, { children: jsxRuntime.jsx(SelectParts.Content, { position: "popper", sideOffset: 4, children: jsxRuntime.jsxs(SelectParts.Viewport, { ref: viewportRef, children: [children, jsxRuntime.jsx(Box.Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }));
+});
+const SingleSelectOption = React__namespace.forwardRef(({ value, startIcon, children, ...restProps }, ref) => {
+    return (jsxRuntime.jsxs(SelectParts.Item, { ref: ref, value: value.toString(), ...restProps, children: [startIcon && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })), jsxRuntime.jsx(Typography.Typography, { textColor: "neutral800", children: jsxRuntime.jsx(SelectParts.ItemText, { children: children }) })] }));
+});
+
+exports.SingleSelect = SingleSelect;
+exports.SingleSelectInput = SingleSelectInput;
+exports.SingleSelectOption = SingleSelectOption;

package/dist/Select/SingleSelect.mjs

@@ -0,0 +1,85 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Root, Trigger, Value, Portal, Content, Viewport, Item, ItemText } from './SelectParts.mjs';
+import { stripReactIdOfColon } from '../helpers/strings.mjs';
+import { useComposedRefs } from '../hooks/useComposeRefs.mjs';
+import { useId } from '../hooks/useId.mjs';
+import { useIntersection } from '../hooks/useIntersection.mjs';
+import { Field } from '../Field/Field.mjs';
+import { Flex } from '../Flex/Flex.mjs';
+import { FieldLabel } from '../Field/FieldLabel.mjs';
+import { FieldHint } from '../Field/FieldHint.mjs';
+import { FieldError } from '../Field/FieldError.mjs';
+import { Box } from '../Box/Box.mjs';
+import { Typography } from '../Typography/Typography.mjs';
+
+const SingleSelect = React.forwardRef(({ error, hint, id, label, labelAction, required, selectButtonTitle: _deprecatedSelectButtonTitle, ...restProps }, forwardedRef) => {
+    const generatedId = useId(id);
+    /**
+     * Because the trigger needs to be a `div` to allow the clear
+     * button & tags to be clickable, we need to manually focus it.
+     */
+    const triggerRef = React.useRef(null);
+    const handleFieldLabelClick = () => {
+        triggerRef.current.focus();
+    };
+    const composedTriggerRefs = useComposedRefs(forwardedRef, triggerRef);
+    return (jsx(Field, { hint: hint, error: error, id: generatedId, required: required, children: jsxs(Flex, { direction: "column", alignItems: "stretch", gap: 1, children: [label ? (jsx(FieldLabel, { onClick: handleFieldLabelClick, action: labelAction, children: label })) : null, jsx(SingleSelectInput, { label: label, id: generatedId, ref: composedTriggerRefs, required: required, ...restProps }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
+});
+const SingleSelectInput = React.forwardRef(({ 'aria-label': ariaLabel, id, children, clearLabel = 'Clear', customizeContent, disabled, error, label, onChange, onClear, onReachEnd, placeholder, required, selectButtonTitle: _deprecatedSelectButtonTitle, startIcon, size = 'M', value: passedValue, ...restProps }, forwardedRef) => {
+    /**
+     * These values are drawn out from the internals of the Radix component
+     * We can then use them to react to visual changes for the component
+     */
+    const [internalValue, setInternalValue] = React.useState();
+    const [internalIsOpen, setInternalIsOpen] = React.useState(false);
+    const handleOpenChange = (open) => {
+        setInternalIsOpen(open);
+    };
+    const handleOnClear = (e) => {
+        if (onClear) {
+            onClear(e);
+        }
+        if (!onChange) {
+            setInternalValue('');
+        }
+    };
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const handleValueChange = (value) => {
+        /**
+         * If it's being externally managed then we shouldn't
+         * both setting our copy of the internal value.
+         */
+        if (onChange) {
+            const shouldBeNumber = typeof passedValue === 'number';
+            onChange(shouldBeNumber ? Number(value) : value);
+        }
+        else {
+            setInternalValue(value);
+        }
+    };
+    const viewportRef = React.useRef(null);
+    const generatedIntersectionId = useId();
+    const intersectionId = `intersection-${stripReactIdOfColon(generatedIntersectionId)}`;
+    const handleReachEnd = (entry) => {
+        if (onReachEnd) {
+            onReachEnd(entry);
+        }
+    };
+    useIntersection(viewportRef, handleReachEnd, {
+        selectorToWatch: `#${intersectionId}`,
+        /**
+         * We need to know when the select is open because only then will viewportRef
+         * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
+         */
+        skipWhen: !internalIsOpen,
+    });
+    const value = (typeof passedValue !== 'undefined' && passedValue !== null ? passedValue.toString() : internalValue) ?? '';
+    return (jsxs(Root, { onOpenChange: handleOpenChange, disabled: disabled, required: required, onValueChange: handleValueChange, value: value, ...restProps, children: [jsx(Trigger, { ref: forwardedRef, "aria-label": label ?? ariaLabel, "aria-describedby": id ? `${hintId} ${errorId}` : undefined, id: id, startIcon: startIcon, size: size, hasError: Boolean(error), disabled: disabled, clearLabel: clearLabel, onClear: value && onClear ? handleOnClear : undefined, children: jsx(Value, { placeholder: placeholder, textColor: value ? 'neutral800' : 'neutral600', children: value && customizeContent ? customizeContent(value) : undefined }) }), jsx(Portal, { children: jsx(Content, { position: "popper", sideOffset: 4, children: jsxs(Viewport, { ref: viewportRef, children: [children, jsx(Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }));
+});
+const SingleSelectOption = React.forwardRef(({ value, startIcon, children, ...restProps }, ref) => {
+    return (jsxs(Item, { ref: ref, value: value.toString(), ...restProps, children: [startIcon && (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })), jsx(Typography, { textColor: "neutral800", children: jsx(ItemText, { children: children }) })] }));
+});
+
+export { SingleSelect, SingleSelectInput, SingleSelectOption };

package/dist/Select/index.js

@@ -1,19 +1,24 @@
-import { MultiSelectNested as o } from "./MultiSelectNested.js";
-import { MultiSelect as l, MultiSelectGroup as p, MultiSelectOption as i } from "./MultiSelect.js";
-import { SingleSelect as c, SingleSelectOption as f } from "./SingleSelect.js";
-import { Select as x } from "./Select.js";
-import { Option as n } from "./Option.js";
-import { OptGroup as O } from "./OptGroup.js";
-import { SelectList as s } from "./SelectList.js";
-export {
-  l as MultiSelect,
-  p as MultiSelectGroup,
-  o as MultiSelectNested,
-  i as MultiSelectOption,
-  O as OptGroup,
-  n as Option,
-  x as Select,
-  s as SelectList,
-  c as SingleSelect,
-  f as SingleSelectOption
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const MultiSelectNested = require('./MultiSelectNested.js');
+const MultiSelect = require('./MultiSelect.js');
+const SingleSelect = require('./SingleSelect.js');
+const Select = require('./Select.js');
+const Option = require('./Option.js');
+const OptGroup = require('./OptGroup.js');
+const SelectList = require('./SelectList.js');
+
+
+
+exports.MultiSelectNested = MultiSelectNested.MultiSelectNested;
+exports.MultiSelect = MultiSelect.MultiSelect;
+exports.MultiSelectGroup = MultiSelect.MultiSelectGroup;
+exports.MultiSelectOption = MultiSelect.MultiSelectOption;
+exports.SingleSelect = SingleSelect.SingleSelect;
+exports.SingleSelectOption = SingleSelect.SingleSelectOption;
+exports.Select = Select.Select;
+exports.Option = Option.Option;
+exports.OptGroup = OptGroup.OptGroup;
+exports.SelectList = SelectList.SelectList;

package/dist/Select/index.mjs

@@ -0,0 +1,7 @@
+export { MultiSelectNested } from './MultiSelectNested.mjs';
+export { MultiSelect, MultiSelectGroup, MultiSelectOption } from './MultiSelect.mjs';
+export { SingleSelect, SingleSelectOption } from './SingleSelect.mjs';
+export { Select } from './Select.mjs';
+export { Option } from './Option.mjs';
+export { OptGroup } from './OptGroup.mjs';
+export { SelectList } from './SelectList.mjs';