@strapi/design-system 1.12.1 → 1.12.2
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.
|
@@ -116,13 +116,6 @@ const ComboboxInput = React__namespace.forwardRef(({ allowCustomValue, autocompl
|
|
|
116
116
|
*/
|
|
117
117
|
skipWhen: !internalIsOpen,
|
|
118
118
|
});
|
|
119
|
-
React__namespace.useEffect(() => {
|
|
120
|
-
/**
|
|
121
|
-
* When the value prop changes "externally" update the text input value too
|
|
122
|
-
*/
|
|
123
|
-
handleTextValueChange(value || '');
|
|
124
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
125
|
-
}, [value]);
|
|
126
119
|
const hintId = `${generatedId}-hint`;
|
|
127
120
|
const errorId = `${generatedId}-error`;
|
|
128
121
|
return (jsxRuntime.jsxs(uiPrimitives.Combobox.Root, { autocomplete: autocomplete || (creatable ? 'list' : 'both'), onOpenChange: handleOpenChange, open: internalIsOpen, onTextValueChange: handleTextValueChange, textValue: internalTextValue, allowCustomValue: creatable || allowCustomValue, disabled: disabled, required: required, value: value, onValueChange: handleChange, filterValue: internalFilterValue, onFilterValueChange: handleFilterValueChange, isPrintableCharacter: isPrintableCharacter, children: [jsxRuntime.jsxs(Trigger, { "$hasError": Boolean(error), "$size": size, className: className, children: [jsxRuntime.jsxs(Flex.Flex, { flex: "1", as: "span", gap: 3, children: [startIcon ? (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })) : null, jsxRuntime.jsx(TextInput, { placeholder: placeholder, id: id, "aria-invalid": Boolean(error), "aria-describedby": `${hintId} ${errorId}`, onChange: handleInputChange, ref: composedTriggerRefs, ...restProps })] }), jsxRuntime.jsxs(Flex.Flex, { as: "span", gap: 3, children: [internalTextValue && onClear ? (jsxRuntime.jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", type: "button", onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, ref: clearRef, children: jsxRuntime.jsx(icons.Cross, {}) })) : null, jsxRuntime.jsx(DownIcon, { children: jsxRuntime.jsx(icons.CarretDown, {}) })] })] }), jsxRuntime.jsx(uiPrimitives.Combobox.Portal, { children: jsxRuntime.jsx(Content, { sideOffset: 4, children: jsxRuntime.jsxs(Viewport, { ref: viewportRef, children: [children, creatable ? (jsxRuntime.jsx(uiPrimitives.Combobox.CreateItem, { onPointerUp: handleCreateItemClick, onClick: handleCreateItemClick, asChild: true, children: jsxRuntime.jsx(OptionBox, { children: jsxRuntime.jsx(Typography.Typography, { children: createMessage(internalTextValue ?? '') }) }) })) : null, !creatable && !loading ? (jsxRuntime.jsx(uiPrimitives.Combobox.NoValueFound, { asChild: true, children: jsxRuntime.jsx(OptionBox, { "$hasHover": false, children: jsxRuntime.jsx(Typography.Typography, { children: noOptionsMessage(internalTextValue ?? '') }) }) })) : null, loading ? (jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: jsxRuntime.jsx(Loader.Loader, { small: true, children: loadingMessage }) })) : null, jsxRuntime.jsx(Box.Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }));
|
|
@@ -89,13 +89,6 @@ const ComboboxInput = React.forwardRef(({ allowCustomValue, autocomplete, childr
|
|
|
89
89
|
*/
|
|
90
90
|
skipWhen: !internalIsOpen,
|
|
91
91
|
});
|
|
92
|
-
React.useEffect(() => {
|
|
93
|
-
/**
|
|
94
|
-
* When the value prop changes "externally" update the text input value too
|
|
95
|
-
*/
|
|
96
|
-
handleTextValueChange(value || '');
|
|
97
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
98
|
-
}, [value]);
|
|
99
92
|
const hintId = `${generatedId}-hint`;
|
|
100
93
|
const errorId = `${generatedId}-error`;
|
|
101
94
|
return (jsxs(Combobox$1.Root, { autocomplete: autocomplete || (creatable ? 'list' : 'both'), onOpenChange: handleOpenChange, open: internalIsOpen, onTextValueChange: handleTextValueChange, textValue: internalTextValue, allowCustomValue: creatable || allowCustomValue, disabled: disabled, required: required, value: value, onValueChange: handleChange, filterValue: internalFilterValue, onFilterValueChange: handleFilterValueChange, isPrintableCharacter: isPrintableCharacter, children: [jsxs(Trigger, { "$hasError": Boolean(error), "$size": size, className: className, children: [jsxs(Flex, { flex: "1", as: "span", gap: 3, children: [startIcon ? (jsx(Box, { as: "span", "aria-hidden": true, children: startIcon })) : null, jsx(TextInput, { placeholder: placeholder, id: id, "aria-invalid": Boolean(error), "aria-describedby": `${hintId} ${errorId}`, onChange: handleInputChange, ref: composedTriggerRefs, ...restProps })] }), jsxs(Flex, { as: "span", gap: 3, children: [internalTextValue && onClear ? (jsx(IconBox, { as: "button", hasRadius: true, background: "transparent", type: "button", onClick: handleClearClick, "aria-disabled": disabled, "aria-label": clearLabel, title: clearLabel, ref: clearRef, children: jsx(Cross, {}) })) : null, jsx(DownIcon, { children: jsx(CarretDown, {}) })] })] }), jsx(Combobox$1.Portal, { children: jsx(Content, { sideOffset: 4, children: jsxs(Viewport, { ref: viewportRef, children: [children, creatable ? (jsx(Combobox$1.CreateItem, { onPointerUp: handleCreateItemClick, onClick: handleCreateItemClick, asChild: true, children: jsx(OptionBox, { children: jsx(Typography, { children: createMessage(internalTextValue ?? '') }) }) })) : null, !creatable && !loading ? (jsx(Combobox$1.NoValueFound, { asChild: true, children: jsx(OptionBox, { "$hasHover": false, children: jsx(Typography, { children: noOptionsMessage(internalTextValue ?? '') }) }) })) : null, loading ? (jsx(Flex, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: jsx(Loader, { small: true, children: loadingMessage }) })) : null, jsx(Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) })] }));
|
|
@@ -5,11 +5,10 @@ const handleResponsiveValues = (property, value, theme) => {
|
|
|
5
5
|
if (!value) {
|
|
6
6
|
return undefined;
|
|
7
7
|
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
if (transformedArray.length > 0) {
|
|
8
|
+
if (typeof value === 'object') {
|
|
9
|
+
const transformedArray = Array.isArray(value)
|
|
10
|
+
? value
|
|
11
|
+
: [value?.desktop, value?.tablet, value?.mobile];
|
|
13
12
|
const spaces = transformedArray.reduce((acc, curr, index) => {
|
|
14
13
|
if (curr) {
|
|
15
14
|
switch (index) {
|
|
@@ -28,7 +27,7 @@ const handleResponsiveValues = (property, value, theme) => {
|
|
|
28
27
|
return spaces;
|
|
29
28
|
}
|
|
30
29
|
// Fallback to the passed transformedArray when necessary
|
|
31
|
-
const realValue = theme.spaces[value]
|
|
30
|
+
const realValue = theme.spaces[value] ?? value;
|
|
32
31
|
return `${property}: ${realValue};`;
|
|
33
32
|
};
|
|
34
33
|
|
|
@@ -3,11 +3,10 @@ const handleResponsiveValues = (property, value, theme) => {
|
|
|
3
3
|
if (!value) {
|
|
4
4
|
return undefined;
|
|
5
5
|
}
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
if (transformedArray.length > 0) {
|
|
6
|
+
if (typeof value === 'object') {
|
|
7
|
+
const transformedArray = Array.isArray(value)
|
|
8
|
+
? value
|
|
9
|
+
: [value?.desktop, value?.tablet, value?.mobile];
|
|
11
10
|
const spaces = transformedArray.reduce((acc, curr, index) => {
|
|
12
11
|
if (curr) {
|
|
13
12
|
switch (index) {
|
|
@@ -26,7 +25,7 @@ const handleResponsiveValues = (property, value, theme) => {
|
|
|
26
25
|
return spaces;
|
|
27
26
|
}
|
|
28
27
|
// Fallback to the passed transformedArray when necessary
|
|
29
|
-
const realValue = theme.spaces[value]
|
|
28
|
+
const realValue = theme.spaces[value] ?? value;
|
|
30
29
|
return `${property}: ${realValue};`;
|
|
31
30
|
};
|
|
32
31
|
|
package/dist/types.js
ADDED
package/dist/types.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/design-system",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.2",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@radix-ui/react-dismissable-layer": "^1.0.5",
|
|
34
34
|
"@radix-ui/react-dropdown-menu": "^2.0.6",
|
|
35
35
|
"@radix-ui/react-focus-scope": "1.0.4",
|
|
36
|
-
"@strapi/ui-primitives": "^1.12.
|
|
36
|
+
"@strapi/ui-primitives": "^1.12.2",
|
|
37
37
|
"@uiw/react-codemirror": "^4.21.19",
|
|
38
38
|
"aria-hidden": "^1.2.3",
|
|
39
39
|
"compute-scroll-into-view": "^3.1.0",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@playwright/test": "1.38.1",
|
|
45
|
-
"@strapi/icons": "^1.12.
|
|
45
|
+
"@strapi/icons": "^1.12.2",
|
|
46
46
|
"@types/react-router-dom": "^5.3.3",
|
|
47
47
|
"@types/styled-components": "^5.1.26",
|
|
48
48
|
"axe-playwright": "^1.2.3",
|