@strapi/design-system 1.10.1 → 1.12.0-typescript.0

package/dist/DateTimePicker/DateTimePicker.js

@@ -23,10 +23,28 @@ const FieldError = require('../Field/FieldError.js');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
 
-const React__default = /*#__PURE__*/_interopDefault(React);
+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 DateTimePicker = React.forwardRef(({ 
+const DateTimePicker = React__namespace.forwardRef(({ 
 /**
  * @preserve
  * @deprecated This is no longer used.
@@ -37,7 +55,7 @@ ariaLabel: _ariaLabel, clearLabel = 'clear', dateLabel = 'Choose date', timeLabe
  * @deprecated This is no longer used.
  */
 selectButtonTitle: _selectButtonTitle, size = 'M', step, value, initialDate, ...props }, forwardedRef) => {
-    const DatePickerElement = React__default.default.useRef(null);
+    const DatePickerElement = React__namespace.useRef(null);
     const [dateValue, setDateValue] = useControllableState.useControllableState({
         defaultProp: initialDate ? convertUTCDateToCalendarDateTime(initialDate, false) : undefined,
         prop: value ? convertUTCDateToCalendarDateTime(value, false) : value ?? undefined,
@@ -140,7 +158,7 @@ const DatePicker = styled__default.default(DatePicker$1.DatePickerInput) `
 `;
 const TimePicker = styled__default.default(TimePicker$1.TimePickerInput) `
   flex: 1 1 30%;
-  min-width: 120px;
+  min-width: 140px;
 `;
 
 exports.DateTimePicker = DateTimePicker;

package/dist/DateTimePicker/DateTimePicker.mjs

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { forwardRef } from 'react';
+import * as React from 'react';
 import { getLocalTimeZone, parseAbsoluteToLocal, toCalendarDateTime } from '@internationalized/date';
 import styled from 'styled-components';
 import { DatePickerInput } from '../DatePicker/DatePicker.mjs';
@@ -17,7 +17,7 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.mjs';
 import { FieldHint } from '../Field/FieldHint.mjs';
 import { FieldError } from '../Field/FieldError.mjs';
 
-const DateTimePicker = forwardRef(({ 
+const DateTimePicker = React.forwardRef(({ 
 /**
  * @preserve
  * @deprecated This is no longer used.
@@ -28,7 +28,7 @@ ariaLabel: _ariaLabel, clearLabel = 'clear', dateLabel = 'Choose date', timeLabe
  * @deprecated This is no longer used.
  */
 selectButtonTitle: _selectButtonTitle, size = 'M', step, value, initialDate, ...props }, forwardedRef) => {
-    const DatePickerElement = React__default.useRef(null);
+    const DatePickerElement = React.useRef(null);
     const [dateValue, setDateValue] = useControllableState({
         defaultProp: initialDate ? convertUTCDateToCalendarDateTime(initialDate, false) : undefined,
         prop: value ? convertUTCDateToCalendarDateTime(value, false) : value ?? undefined,
@@ -131,7 +131,7 @@ const DatePicker = styled(DatePickerInput) `
 `;
 const TimePicker = styled(TimePickerInput) `
   flex: 1 1 30%;
-  min-width: 120px;
+  min-width: 140px;
 `;
 
 export { DateTimePicker, convertUTCDateToCalendarDateTime };

package/dist/Select/MultiSelect.js

@@ -44,7 +44,7 @@ function _interopNamespace(e) {
 const React__namespace = /*#__PURE__*/_interopNamespace(React);
 const styled__default = /*#__PURE__*/_interopDefault(styled);
 
-const MultiSelect = React__namespace.forwardRef(({ 'aria-label': ariaLabel, children, clearLabel = 'Clear', customizeContent, disabled, error, hint, id, label, labelAction, onChange, onClear, onReachEnd, placeholder, required, selectButtonTitle: _deprecatedSelectButtonTitle, startIcon, size = 'M', value: passedValue, withTags, ...restProps }, forwardedRef) => {
+const MultiSelect = React__namespace.forwardRef(({ 'aria-label': ariaLabel, children, clearLabel = 'Clear', customizeContent, disabled, error, hint, id, label, labelAction, onChange, onClear, onCloseAutoFocus, onReachEnd, placeholder, required, selectButtonTitle: _deprecatedSelectButtonTitle, startIcon, size = 'M', value: passedValue, withTags, ...restProps }, forwardedRef) => {
     /**
      * Used for the intersection observer
      */
@@ -121,7 +121,7 @@ const MultiSelect = React__namespace.forwardRef(({ 'aria-label': ariaLabel, chil
                                         : customizeContent
                                             ? customizeContent(value)
                                             : undefined
-                                    : 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" })] }) }) })] }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
+                                    : undefined }) }), jsxRuntime.jsx(SelectParts.Portal, { children: jsxRuntime.jsx(SelectParts.Content, { position: "popper", sideOffset: 4, onCloseAutoFocus: onCloseAutoFocus, children: jsxRuntime.jsxs(SelectParts.Viewport, { ref: viewportRef, children: [children, jsxRuntime.jsx(Box.Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }), jsxRuntime.jsx(FieldHint.FieldHint, {}), jsxRuntime.jsx(FieldError.FieldError, {})] }) }));
 });
 const MultiSelectOption = React__namespace.forwardRef(({ value, children, startIcon, ...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(SelectParts.ItemIndicator, { children: ({ isSelected, isIntermediate }) => (jsxRuntime.jsx(CheckMark, { hasRadius: true, overflow: "hidden", position: "relative", "$indeterminate": isIntermediate, "$selected": isSelected, zIndex: 1, height: "18px", width: "18px" })) }), jsxRuntime.jsx(Typography.Typography, { textColor: "neutral800", children: jsxRuntime.jsx(SelectParts.ItemText, { children: children }) })] }));

package/dist/Select/MultiSelect.mjs

@@ -17,7 +17,7 @@ import { FieldHint } from '../Field/FieldHint.mjs';
 import { FieldError } from '../Field/FieldError.mjs';
 import { Typography } from '../Typography/Typography.mjs';
 
-const MultiSelect = React.forwardRef(({ 'aria-label': ariaLabel, children, clearLabel = 'Clear', customizeContent, disabled, error, hint, id, label, labelAction, onChange, onClear, onReachEnd, placeholder, required, selectButtonTitle: _deprecatedSelectButtonTitle, startIcon, size = 'M', value: passedValue, withTags, ...restProps }, forwardedRef) => {
+const MultiSelect = React.forwardRef(({ 'aria-label': ariaLabel, children, clearLabel = 'Clear', customizeContent, disabled, error, hint, id, label, labelAction, onChange, onClear, onCloseAutoFocus, onReachEnd, placeholder, required, selectButtonTitle: _deprecatedSelectButtonTitle, startIcon, size = 'M', value: passedValue, withTags, ...restProps }, forwardedRef) => {
     /**
      * Used for the intersection observer
      */
@@ -94,7 +94,7 @@ const MultiSelect = React.forwardRef(({ 'aria-label': ariaLabel, children, clear
                                         : customizeContent
                                             ? customizeContent(value)
                                             : undefined
-                                    : 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" })] }) }) })] }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
+                                    : undefined }) }), jsx(Portal, { children: jsx(Content, { position: "popper", sideOffset: 4, onCloseAutoFocus: onCloseAutoFocus, children: jsxs(Viewport, { ref: viewportRef, children: [children, jsx(Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }), jsx(FieldHint, {}), jsx(FieldError, {})] }) }));
 });
 const MultiSelectOption = React.forwardRef(({ value, children, startIcon, ...restProps }, ref) => {
     return (jsxs(Item, { ref: ref, value: value.toString(), ...restProps, children: [startIcon && (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })), jsx(ItemIndicator, { children: ({ isSelected, isIntermediate }) => (jsx(CheckMark, { hasRadius: true, overflow: "hidden", position: "relative", "$indeterminate": isIntermediate, "$selected": isSelected, zIndex: 1, height: "18px", width: "18px" })) }), jsx(Typography, { textColor: "neutral800", children: jsx(ItemText, { children: children }) })] }));

package/dist/Select/SingleSelect.js

@@ -50,7 +50,7 @@ const SingleSelect = React__namespace.forwardRef(({ error, hint, id, label, labe
     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) => {
+const SingleSelectInput = React__namespace.forwardRef(({ 'aria-label': ariaLabel, id, children, clearLabel = 'Clear', customizeContent, disabled, error, label, onChange, onClear, onCloseAutoFocus, 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
@@ -100,7 +100,7 @@ const SingleSelectInput = React__namespace.forwardRef(({ 'aria-label': ariaLabel
         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" })] }) }) })] }));
+    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, onCloseAutoFocus: onCloseAutoFocus, 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 }) })] }));

package/dist/Select/SingleSelect.mjs

@@ -26,7 +26,7 @@ const SingleSelect = React.forwardRef(({ error, hint, id, label, labelAction, re
     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) => {
+const SingleSelectInput = React.forwardRef(({ 'aria-label': ariaLabel, id, children, clearLabel = 'Clear', customizeContent, disabled, error, label, onChange, onClear, onCloseAutoFocus, 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
@@ -76,7 +76,7 @@ const SingleSelectInput = React.forwardRef(({ 'aria-label': ariaLabel, id, child
         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" })] }) }) })] }));
+    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, onCloseAutoFocus: onCloseAutoFocus, 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 }) })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.10.1",
+  "version": "1.12.0-typescript.0",
   "license": "MIT",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -28,21 +28,21 @@
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
     "@floating-ui/react-dom": "^2.0.2",
-    "@internationalized/date": "^3.4.0",
+    "@internationalized/date": "^3.5.0",
     "@internationalized/number": "^3.2.1",
-    "@radix-ui/react-dismissable-layer": "^1.0.4",
-    "@radix-ui/react-dropdown-menu": "^2.0.5",
-    "@radix-ui/react-focus-scope": "1.0.3",
-    "@strapi/ui-primitives": "^1.10.1",
-    "@uiw/react-codemirror": "^4.21.13",
+    "@radix-ui/react-dismissable-layer": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
+    "@radix-ui/react-focus-scope": "1.0.4",
+    "@strapi/ui-primitives": "1.12.0-typescript.0",
+    "@uiw/react-codemirror": "^4.21.18",
     "aria-hidden": "^1.2.3",
-    "compute-scroll-into-view": "^3.0.3",
+    "compute-scroll-into-view": "^3.1.0",
     "prop-types": "^15.8.1",
     "react-remove-scroll": "^2.5.6"
   },
   "devDependencies": {
-    "@playwright/test": "1.37.1",
-    "@strapi/icons": "^1.10.1",
+    "@playwright/test": "1.38.1",
+    "@strapi/icons": "1.12.0-typescript.0",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.2.3",
@@ -51,7 +51,7 @@
     "styled-components": "^5.3.11"
   },
   "peerDependencies": {
-    "@strapi/icons": "^1.5.0",
+    "@strapi/icons": "1.12.0-typescript.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-router-dom": "^5.2.0",