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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/DateTimePicker/DateTimePicker.js +1 -1
  2. package/dist/DateTimePicker/DateTimePicker.mjs +1 -1
  3. package/dist/Select/MultiSelect.js +2 -2
  4. package/dist/Select/MultiSelect.mjs +2 -2
  5. package/dist/Select/SingleSelect.js +2 -2
  6. package/dist/Select/SingleSelect.mjs +2 -2
  7. package/package.json +10 -10
package/dist/DateTimePicker/DateTimePicker.js CHANGED
@@ -158,7 +158,7 @@ const DatePicker = styled__default.default(DatePicker$1.DatePickerInput) `
158
158
  `;
159
159
  const TimePicker = styled__default.default(TimePicker$1.TimePickerInput) `
160
160
  flex: 1 1 30%;
161
- min-width: 120px;
161
+ min-width: 140px;
162
162
  `;
163
163
 
164
164
  exports.DateTimePicker = DateTimePicker;
package/dist/DateTimePicker/DateTimePicker.mjs CHANGED
@@ -131,7 +131,7 @@ const DatePicker = styled(DatePickerInput) `
131
131
  `;
132
132
  const TimePicker = styled(TimePickerInput) `
133
133
  flex: 1 1 30%;
134
- min-width: 120px;
134
+ min-width: 140px;
135
135
  `;
136
136
 
137
137
  export { DateTimePicker, convertUTCDateToCalendarDateTime };
package/dist/Select/MultiSelect.js CHANGED
@@ -44,7 +44,7 @@ function _interopNamespace(e) {
44
44
  const React__namespace = /*#__PURE__*/_interopNamespace(React);
45
45
  const styled__default = /*#__PURE__*/_interopDefault(styled);
46
46
 
47
- 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) => {
47
+ 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) => {
48
48
  /**
49
49
  * Used for the intersection observer
50
50
  */
@@ -121,7 +121,7 @@ const MultiSelect = React__namespace.forwardRef(({ 'aria-label': ariaLabel, chil
121
121
  : customizeContent
122
122
  ? customizeContent(value)
123
123
  : undefined
124
- : 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, {})] }) }));
124
+ : 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, {})] }) }));
125
125
  });
126
126
  const MultiSelectOption = React__namespace.forwardRef(({ value, children, startIcon, ...restProps }, ref) => {
127
127
  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 CHANGED
@@ -17,7 +17,7 @@ import { FieldHint } from '../Field/FieldHint.mjs';
17
17
  import { FieldError } from '../Field/FieldError.mjs';
18
18
  import { Typography } from '../Typography/Typography.mjs';
19
19
 
20
- 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) => {
20
+ 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) => {
21
21
  /**
22
22
  * Used for the intersection observer
23
23
  */
@@ -94,7 +94,7 @@ const MultiSelect = React.forwardRef(({ 'aria-label': ariaLabel, children, clear
94
94
  : customizeContent
95
95
  ? customizeContent(value)
96
96
  : undefined
97
- : 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, {})] }) }));
97
+ : 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, {})] }) }));
98
98
  });
99
99
  const MultiSelectOption = React.forwardRef(({ value, children, startIcon, ...restProps }, ref) => {
100
100
  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 CHANGED
@@ -50,7 +50,7 @@ const SingleSelect = React__namespace.forwardRef(({ error, hint, id, label, labe
50
50
  const composedTriggerRefs = useComposeRefs.useComposedRefs(forwardedRef, triggerRef);
51
51
  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, {})] }) }));
52
52
  });
53
- 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) => {
53
+ 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) => {
54
54
  /**
55
55
  * These values are drawn out from the internals of the Radix component
56
56
  * 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
100
100
  skipWhen: !internalIsOpen,
101
101
  });
102
102
  const value = (typeof passedValue !== 'undefined' && passedValue !== null ? passedValue.toString() : internalValue) ?? '';
103
- 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" })] }) }) })] }));
103
+ 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" })] }) }) })] }));
104
104
  });
105
105
  const SingleSelectOption = React__namespace.forwardRef(({ value, startIcon, children, ...restProps }, ref) => {
106
106
  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 CHANGED
@@ -26,7 +26,7 @@ const SingleSelect = React.forwardRef(({ error, hint, id, label, labelAction, re
26
26
  const composedTriggerRefs = useComposedRefs(forwardedRef, triggerRef);
27
27
  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, {})] }) }));
28
28
  });
29
- 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) => {
29
+ 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) => {
30
30
  /**
31
31
  * These values are drawn out from the internals of the Radix component
32
32
  * 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
76
76
  skipWhen: !internalIsOpen,
77
77
  });
78
78
  const value = (typeof passedValue !== 'undefined' && passedValue !== null ? passedValue.toString() : internalValue) ?? '';
79
- 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" })] }) }) })] }));
79
+ 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" })] }) }) })] }));
80
80
  });
81
81
  const SingleSelectOption = React.forwardRef(({ value, startIcon, children, ...restProps }, ref) => {
82
82
  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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@strapi/design-system",
3
- "version": "1.11.0",
3
+ "version": "1.12.0-typescript.0",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/index.js",
@@ -30,19 +30,19 @@
30
30
  "@floating-ui/react-dom": "^2.0.2",
31
31
  "@internationalized/date": "^3.5.0",
32
32
  "@internationalized/number": "^3.2.1",
33
- "@radix-ui/react-dismissable-layer": "^1.0.4",
34
- "@radix-ui/react-dropdown-menu": "^2.0.5",
35
- "@radix-ui/react-focus-scope": "1.0.3",
36
- "@strapi/ui-primitives": "^1.11.0",
37
- "@uiw/react-codemirror": "^4.21.13",
33
+ "@radix-ui/react-dismissable-layer": "^1.0.5",
34
+ "@radix-ui/react-dropdown-menu": "^2.0.6",
35
+ "@radix-ui/react-focus-scope": "1.0.4",
36
+ "@strapi/ui-primitives": "1.12.0-typescript.0",
37
+ "@uiw/react-codemirror": "^4.21.18",
38
38
  "aria-hidden": "^1.2.3",
39
- "compute-scroll-into-view": "^3.0.3",
39
+ "compute-scroll-into-view": "^3.1.0",
40
40
  "prop-types": "^15.8.1",
41
41
  "react-remove-scroll": "^2.5.6"
42
42
  },
43
43
  "devDependencies": {
44
- "@playwright/test": "1.38.0",
45
- "@strapi/icons": "^1.11.0",
44
+ "@playwright/test": "1.38.1",
45
+ "@strapi/icons": "1.12.0-typescript.0",
46
46
  "@types/react-router-dom": "^5.3.3",
47
47
  "@types/styled-components": "^5.1.26",
48
48
  "axe-playwright": "^1.2.3",
@@ -51,7 +51,7 @@
51
51
  "styled-components": "^5.3.11"
52
52
  },
53
53
  "peerDependencies": {
54
- "@strapi/icons": "^1.5.0",
54
+ "@strapi/icons": "1.12.0-typescript.0",
55
55
  "react": "^17.0.0 || ^18.0.0",
56
56
  "react-dom": "^17.0.0 || ^18.0.0",
57
57
  "react-router-dom": "^5.2.0",