@strapi/design-system 1.12.0 → 1.12.1
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,6 +116,13 @@ 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]);
|
|
119
126
|
const hintId = `${generatedId}-hint`;
|
|
120
127
|
const errorId = `${generatedId}-error`;
|
|
121
128
|
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,6 +89,13 @@ 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]);
|
|
92
99
|
const hintId = `${generatedId}-hint`;
|
|
93
100
|
const errorId = `${generatedId}-error`;
|
|
94
101
|
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" })] }) }) })] }));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/design-system",
|
|
3
|
-
"version": "1.12.
|
|
3
|
+
"version": "1.12.1",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -29,12 +29,12 @@
|
|
|
29
29
|
"@codemirror/lang-json": "^6.0.1",
|
|
30
30
|
"@floating-ui/react-dom": "^2.0.2",
|
|
31
31
|
"@internationalized/date": "^3.5.0",
|
|
32
|
-
"@internationalized/number": "^3.
|
|
32
|
+
"@internationalized/number": "^3.3.0",
|
|
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.
|
|
37
|
-
"@uiw/react-codemirror": "^4.21.
|
|
36
|
+
"@strapi/ui-primitives": "^1.12.1",
|
|
37
|
+
"@uiw/react-codemirror": "^4.21.19",
|
|
38
38
|
"aria-hidden": "^1.2.3",
|
|
39
39
|
"compute-scroll-into-view": "^3.1.0",
|
|
40
40
|
"prop-types": "^15.8.1",
|
|
@@ -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.1",
|
|
46
46
|
"@types/react-router-dom": "^5.3.3",
|
|
47
47
|
"@types/styled-components": "^5.1.26",
|
|
48
48
|
"axe-playwright": "^1.2.3",
|