@strapi/design-system 1.17.0 → 1.18.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.
|
@@ -12,6 +12,7 @@ const TextButton = require('../TextButton/TextButton.js');
|
|
|
12
12
|
const Icon = require('../Icon/Icon.js');
|
|
13
13
|
const Flex = require('../Flex/Flex.js');
|
|
14
14
|
const Typography = require('../Typography/Typography.js');
|
|
15
|
+
const Box = require('../Box/Box.js');
|
|
15
16
|
|
|
16
17
|
const _interopDefault = e => e && e.__esModule ? e : { default: e };
|
|
17
18
|
|
|
@@ -79,8 +80,11 @@ const AccordionToggle = ({ title, description, as = 'span', togglePosition = 'ri
|
|
|
79
80
|
}
|
|
80
81
|
}
|
|
81
82
|
};
|
|
82
|
-
const dropdownIcon = (jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer',
|
|
83
|
-
|
|
83
|
+
const dropdownIcon = (jsxRuntime.jsx(Flex.Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer', shrink: 0, children: jsxRuntime.jsx(Icon.Icon, { as: icons.CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
|
|
84
|
+
const stopPropagation = (e) => {
|
|
85
|
+
e.stopPropagation();
|
|
86
|
+
};
|
|
87
|
+
return (jsxRuntime.jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, children: jsxRuntime.jsxs(Flex.Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsxRuntime.jsx(ToggleButton, { "aria-disabled": disabled, "aria-expanded": expanded, "aria-controls": ariaControls, "aria-labelledby": ariaLabelId, "data-strapi-accordion-toggle": true, expanded: expanded, type: "button", flex: 1, minWidth: 0, ...props, children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Accordion.AccordionTypography, { ...titleProps, children: title }), description && (jsxRuntime.jsx(Typography.Typography, { as: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description }))] }) }), togglePosition === 'right' && (jsxRuntime.jsxs(Flex.Flex, { gap: 3, children: [dropdownIcon, jsxRuntime.jsx(Box.Box, { as: "span", onClick: stopPropagation, children: action })] })), togglePosition === 'left' && (jsxRuntime.jsx(Box.Box, { as: "span", onClick: stopPropagation, children: action }))] }) }));
|
|
84
88
|
};
|
|
85
89
|
|
|
86
90
|
exports.AccordionToggle = AccordionToggle;
|
|
@@ -8,6 +8,7 @@ import { TextButton } from '../TextButton/TextButton.mjs';
|
|
|
8
8
|
import { Icon } from '../Icon/Icon.mjs';
|
|
9
9
|
import { Flex } from '../Flex/Flex.mjs';
|
|
10
10
|
import { Typography } from '../Typography/Typography.mjs';
|
|
11
|
+
import { Box } from '../Box/Box.mjs';
|
|
11
12
|
|
|
12
13
|
const ToggleButton = styled(TextButton) `
|
|
13
14
|
text-align: left;
|
|
@@ -71,8 +72,11 @@ const AccordionToggle = ({ title, description, as = 'span', togglePosition = 'ri
|
|
|
71
72
|
}
|
|
72
73
|
}
|
|
73
74
|
};
|
|
74
|
-
const dropdownIcon = (jsx(Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer',
|
|
75
|
-
|
|
75
|
+
const dropdownIcon = (jsx(Flex, { justifyContent: "center", borderRadius: "50%", height: iconSize, width: iconSize, transform: expanded ? `rotate(180deg)` : undefined, "data-strapi-dropdown": true, "aria-hidden": true, as: "span", background: iconColor, cursor: disabled ? 'not-allowed' : 'pointer', shrink: 0, children: jsx(Icon, { as: CarretDown, width: size === 'M' ? `${11 / 16}rem` : `${8 / 16}rem`, color: expanded ? 'primary600' : 'neutral600' }) }));
|
|
76
|
+
const stopPropagation = (e) => {
|
|
77
|
+
e.stopPropagation();
|
|
78
|
+
};
|
|
79
|
+
return (jsx(FlexWithSize, { paddingBottom: boxPaddingY, paddingLeft: boxPaddingX, paddingRight: boxPaddingX, paddingTop: boxPaddingY, background: boxBackground, expanded: expanded, size: size, justifyContent: "space-between", cursor: disabled ? 'not-allowed' : 'pointer', onClick: handleToggle, children: jsxs(Flex, { gap: 3, flex: 1, maxWidth: "100%", children: [togglePosition === 'left' && dropdownIcon, jsx(ToggleButton, { "aria-disabled": disabled, "aria-expanded": expanded, "aria-controls": ariaControls, "aria-labelledby": ariaLabelId, "data-strapi-accordion-toggle": true, expanded: expanded, type: "button", flex: 1, minWidth: 0, ...props, children: jsxs(Fragment, { children: [jsx(AccordionTypography, { ...titleProps, children: title }), description && (jsx(Typography, { as: "p", id: ariaDescriptionId, textColor: descriptionColor, children: description }))] }) }), togglePosition === 'right' && (jsxs(Flex, { gap: 3, children: [dropdownIcon, jsx(Box, { as: "span", onClick: stopPropagation, children: action })] })), togglePosition === 'left' && (jsx(Box, { as: "span", onClick: stopPropagation, children: action }))] }) }));
|
|
76
80
|
};
|
|
77
81
|
|
|
78
82
|
export { AccordionToggle };
|
package/dist/Dialog/Dialog.js
CHANGED
|
@@ -31,14 +31,14 @@ const DialogContainer = styled__default.default(Box.Box) `
|
|
|
31
31
|
const DialogHeader = styled__default.default(Flex.Flex) `
|
|
32
32
|
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
|
|
33
33
|
`;
|
|
34
|
-
const Dialog = ({ onClose, title, as = 'h2', isOpen, id, ...props }) => {
|
|
34
|
+
const Dialog = ({ onClose, title, as = 'h2', isOpen, id, zIndex = 4, ...props }) => {
|
|
35
35
|
const generatedId = useId.useId(id);
|
|
36
36
|
useLockScroll(isOpen);
|
|
37
37
|
if (!isOpen) {
|
|
38
38
|
return null;
|
|
39
39
|
}
|
|
40
40
|
const labelledBy = `${generatedId}-label`;
|
|
41
|
-
return (jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex:
|
|
41
|
+
return (jsxRuntime.jsx(Portal.Portal, { children: jsxRuntime.jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex: zIndex, children: jsxRuntime.jsx(FocusTrap.FocusTrap, { children: jsxRuntime.jsx(index.DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: jsxRuntime.jsxs(DialogContainer, { "aria-labelledby": labelledBy, "aria-modal": true, background: "neutral0", hasRadius: true, shadow: "popupShadow", role: "dialog", children: [jsxRuntime.jsx(DialogHeader, { padding: 6, justifyContent: "center", children: jsxRuntime.jsx(Typography.Typography, { variant: "beta", as: as, id: labelledBy, children: title }) }), jsxRuntime.jsx(Box.Box, { ...props })] }) }) }) }) }));
|
|
42
42
|
};
|
|
43
43
|
|
|
44
44
|
exports.Dialog = Dialog;
|
package/dist/Dialog/Dialog.mjs
CHANGED
|
@@ -23,14 +23,14 @@ const DialogContainer = styled(Box) `
|
|
|
23
23
|
const DialogHeader = styled(Flex) `
|
|
24
24
|
border-bottom: 1px solid ${({ theme }) => theme.colors.neutral150};
|
|
25
25
|
`;
|
|
26
|
-
const Dialog = ({ onClose, title, as = 'h2', isOpen, id, ...props }) => {
|
|
26
|
+
const Dialog = ({ onClose, title, as = 'h2', isOpen, id, zIndex = 4, ...props }) => {
|
|
27
27
|
const generatedId = useId(id);
|
|
28
28
|
useLockScroll(isOpen);
|
|
29
29
|
if (!isOpen) {
|
|
30
30
|
return null;
|
|
31
31
|
}
|
|
32
32
|
const labelledBy = `${generatedId}-label`;
|
|
33
|
-
return (jsx(Portal, { children: jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex:
|
|
33
|
+
return (jsx(Portal, { children: jsx(DialogWrapper, { padding: 8, position: "fixed", zIndex: zIndex, children: jsx(FocusTrap, { children: jsx(DismissibleLayer, { onEscapeKeyDown: onClose, onPointerDownOutside: onClose, children: jsxs(DialogContainer, { "aria-labelledby": labelledBy, "aria-modal": true, background: "neutral0", hasRadius: true, shadow: "popupShadow", role: "dialog", children: [jsx(DialogHeader, { padding: 6, justifyContent: "center", children: jsx(Typography, { variant: "beta", as: as, id: labelledBy, children: title }) }), jsx(Box, { ...props })] }) }) }) }) }));
|
|
34
34
|
};
|
|
35
35
|
|
|
36
36
|
export { Dialog };
|
|
@@ -45,7 +45,7 @@ const SelectTrigger = React__namespace.forwardRef(({ onClear, clearLabel = 'Clea
|
|
|
45
45
|
}
|
|
46
46
|
};
|
|
47
47
|
const composedRefs = useComposeRefs.useComposedRefs(triggerRef, ref);
|
|
48
|
-
return (jsxRuntime.jsx(uiPrimitives.Select.Trigger, { asChild: true, children: jsxRuntime.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: [jsxRuntime.jsxs(Flex.Flex, { flex: "1", as: "span", gap: 3, children: [startIcon && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })), children] }), jsxRuntime.jsxs(Flex.Flex, { as: "span", gap: 3, children: [onClear ? (jsxRuntime.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: jsxRuntime.jsx(icons.Cross, {}) })) : null, jsxRuntime.jsx(DownIcon, { children: jsxRuntime.jsx(icons.CarretDown, {}) })] })] }) }));
|
|
48
|
+
return (jsxRuntime.jsx(uiPrimitives.Select.Trigger, { asChild: true, children: jsxRuntime.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, paddingTop: 1, paddingBottom: 1, gap: 4, cursor: "default", width: "100%", ...restProps, children: [jsxRuntime.jsxs(Flex.Flex, { flex: "1", as: "span", gap: 3, children: [startIcon && (jsxRuntime.jsx(Box.Box, { as: "span", "aria-hidden": true, children: startIcon })), children] }), jsxRuntime.jsxs(Flex.Flex, { as: "span", gap: 3, children: [onClear ? (jsxRuntime.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: jsxRuntime.jsx(icons.Cross, {}) })) : null, jsxRuntime.jsx(DownIcon, { children: jsxRuntime.jsx(icons.CarretDown, {}) })] })] }) }));
|
|
49
49
|
});
|
|
50
50
|
const IconBox = styled__default.default(Box.Box) `
|
|
51
51
|
border: none;
|
|
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef(({ onClear, clearLabel = 'Clear', startIc
|
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
20
|
const composedRefs = useComposedRefs(triggerRef, ref);
|
|
21
|
-
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, {}) })] })] }) }));
|
|
21
|
+
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, paddingTop: 1, paddingBottom: 1, 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, {}) })] })] }) }));
|
|
22
22
|
});
|
|
23
23
|
const IconBox = styled(Box) `
|
|
24
24
|
border: none;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/design-system",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.18.0",
|
|
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.
|
|
36
|
+
"@strapi/ui-primitives": "^1.18.0",
|
|
37
37
|
"@uiw/react-codemirror": "^4.21.25",
|
|
38
38
|
"aria-hidden": "^1.2.4",
|
|
39
39
|
"compute-scroll-into-view": "^3.1.0",
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"react-remove-scroll": "^2.5.9"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@playwright/test": "1.
|
|
45
|
-
"@strapi/icons": "^1.
|
|
44
|
+
"@playwright/test": "1.43.0",
|
|
45
|
+
"@strapi/icons": "^1.18.0",
|
|
46
46
|
"@types/react-router-dom": "^5.3.3",
|
|
47
47
|
"@types/styled-components": "^5.1.26",
|
|
48
48
|
"axe-playwright": "^2.0.1",
|