@strapi/design-system 1.5.0 → 1.6.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.
- package/dist/Accordion/Accordion.cjs +8 -8
- package/dist/Accordion/Accordion.js +73 -67
- package/dist/Accordion/AccordionContent.cjs +1 -1
- package/dist/Accordion/AccordionContent.js +20 -17
- package/dist/Accordion/AccordionContext.cjs +1 -1
- package/dist/Accordion/AccordionContext.js +10 -4
- package/dist/Accordion/AccordionGroup.cjs +20 -20
- package/dist/Accordion/AccordionGroup.js +98 -59
- package/dist/Accordion/AccordionToggle.cjs +3 -3
- package/dist/Accordion/AccordionToggle.js +108 -89
- package/dist/Accordion/utils.cjs +1 -1
- package/dist/Accordion/utils.js +4 -4
- package/dist/Alert/Alert.cjs +7 -7
- package/dist/Alert/Alert.js +92 -85
- package/dist/Avatar/Avatar.cjs +6 -6
- package/dist/Avatar/Avatar.js +68 -67
- package/dist/Avatar/constants.cjs +1 -1
- package/dist/Avatar/constants.js +1 -1
- package/dist/Badge/Badge.cjs +4 -4
- package/dist/Badge/Badge.js +37 -37
- package/dist/BaseButton/BaseButton.cjs +3 -3
- package/dist/BaseButton/BaseButton.js +39 -27
- package/dist/BaseCheckbox/BaseCheckbox.cjs +6 -6
- package/dist/BaseCheckbox/BaseCheckbox.js +77 -59
- package/dist/BaseLink/BaseLink.cjs +2 -2
- package/dist/BaseLink/BaseLink.js +20 -27
- package/dist/BaseRadio/BaseRadio.cjs +7 -7
- package/dist/BaseRadio/BaseRadio.js +55 -35
- package/dist/BaseRadio/RadioGroup.cjs +1 -1
- package/dist/BaseRadio/RadioGroup.js +31 -28
- package/dist/BaseRadio/context.cjs +1 -1
- package/dist/BaseRadio/context.js +8 -4
- package/dist/BaseRadio/utils.cjs +1 -1
- package/dist/BaseRadio/utils.js +1 -1
- package/dist/Box/Box.cjs +31 -32
- package/dist/Box/Box.js +182 -59
- package/dist/Breadcrumbs/Breadcrumbs.cjs +3 -3
- package/dist/Breadcrumbs/Breadcrumbs.js +50 -39
- package/dist/Button/Button.cjs +20 -20
- package/dist/Button/Button.js +83 -74
- package/dist/Button/utils.cjs +23 -23
- package/dist/Button/utils.js +15 -15
- package/dist/Card/Card.cjs +1 -1
- package/dist/Card/Card.js +28 -29
- package/dist/Card/CardAction.cjs +4 -4
- package/dist/Card/CardAction.js +12 -6
- package/dist/Card/CardAsset.cjs +4 -4
- package/dist/Card/CardAsset.js +32 -26
- package/dist/Card/CardBadge.cjs +3 -3
- package/dist/Card/CardBadge.js +14 -10
- package/dist/Card/CardBody.cjs +1 -1
- package/dist/Card/CardBody.js +11 -10
- package/dist/Card/CardCheckbox.cjs +1 -1
- package/dist/Card/CardCheckbox.js +16 -13
- package/dist/Card/CardContent.cjs +2 -2
- package/dist/Card/CardContent.js +11 -11
- package/dist/Card/CardContext.cjs +1 -1
- package/dist/Card/CardContext.js +3 -1
- package/dist/Card/CardHeader.cjs +2 -2
- package/dist/Card/CardHeader.js +9 -7
- package/dist/Card/CardTimer.cjs +2 -2
- package/dist/Card/CardTimer.js +21 -16
- package/dist/Card/CardTitle.cjs +1 -1
- package/dist/Card/CardTitle.js +11 -9
- package/dist/CarouselInput/Carousel.cjs +4 -4
- package/dist/CarouselInput/Carousel.js +8 -9
- package/dist/Combobox/Combobox.cjs +1 -1
- package/dist/Combobox/Combobox.js +32 -33
- package/dist/DatePicker/DatePicker.cjs +1 -1
- package/dist/DatePicker/DatePicker.js +26 -29
- package/dist/Flex/Flex.cjs +5 -5
- package/dist/Flex/Flex.js +29 -17
- package/dist/Icon/Icon.cjs +3 -3
- package/dist/Icon/Icon.js +23 -19
- package/dist/JSONInput/JSONInput.cjs +1 -0
- package/dist/JSONInput/JSONInput.js +97 -0
- package/dist/JSONInput/JSONInputContainer.cjs +30 -0
- package/dist/JSONInput/JSONInputContainer.js +36 -0
- package/dist/JSONInput/index.cjs +1 -0
- package/dist/JSONInput/index.js +4 -0
- package/dist/JSONInput/utils/decorationExtension.cjs +1 -0
- package/dist/JSONInput/utils/decorationExtension.js +24 -0
- package/dist/KeyboardNavigable/KeyboardNavigable.cjs +1 -1
- package/dist/KeyboardNavigable/KeyboardNavigable.js +44 -49
- package/dist/Link/Link.cjs +5 -5
- package/dist/Link/Link.js +1 -1
- package/dist/LiveRegions/LiveRegions.cjs +1 -1
- package/dist/LiveRegions/LiveRegions.js +22 -20
- package/dist/LiveRegions/index.cjs +1 -1
- package/dist/LiveRegions/index.js +4 -2
- package/dist/MainNav/NavCondense.cjs +3 -3
- package/dist/MainNav/NavCondense.js +1 -2
- package/dist/MainNav/NavSections.cjs +3 -3
- package/dist/MainNav/NavSections.js +5 -5
- package/dist/ModalLayout/ModalHeader.cjs +2 -2
- package/dist/ModalLayout/ModalHeader.js +1 -1
- package/dist/NumberInput/NumberInput.cjs +2 -2
- package/dist/NumberInput/NumberInput.js +1 -1
- package/dist/Pagination/components.cjs +6 -6
- package/dist/Pagination/components.js +16 -17
- package/dist/Searchbar/Searchbar.cjs +7 -7
- package/dist/Searchbar/Searchbar.js +7 -8
- package/dist/Select/Select.cjs +2 -2
- package/dist/Select/Select.js +4 -5
- package/dist/Select/SelectTags.cjs +3 -3
- package/dist/Select/SelectTags.js +1 -1
- package/dist/SimpleMenu/SimpleMenu.cjs +9 -9
- package/dist/SimpleMenu/SimpleMenu.js +1 -1
- package/dist/Stack/Stack.cjs +5 -5
- package/dist/Stack/Stack.js +33 -33
- package/dist/SubNav/SubNavHeader.cjs +2 -2
- package/dist/SubNav/SubNavHeader.js +1 -1
- package/dist/SubNav/SubNavLink.cjs +4 -4
- package/dist/SubNav/SubNavLink.js +4 -4
- package/dist/SubNav/SubNavLinkSection.cjs +2 -2
- package/dist/SubNav/SubNavLinkSection.js +1 -1
- package/dist/SubNav/SubNavSectionLabel.cjs +3 -3
- package/dist/SubNav/SubNavSectionLabel.js +1 -1
- package/dist/TextButton/TextButton.cjs +6 -6
- package/dist/TextButton/TextButton.js +51 -50
- package/dist/ThemeProvider/ThemeProvider.cjs +2 -2
- package/dist/ThemeProvider/ThemeProvider.js +12 -11
- package/dist/TimePicker/TimePicker.cjs +2 -2
- package/dist/TimePicker/TimePicker.js +1 -1
- package/dist/Typography/Typography.cjs +7 -7
- package/dist/Typography/Typography.js +28 -17
- package/dist/Typography/utils.cjs +2 -2
- package/dist/Typography/utils.js +6 -6
- package/dist/helpers/arrays.cjs +1 -0
- package/dist/helpers/arrays.js +6 -0
- package/dist/helpers/handleResponsiveValues.cjs +1 -5
- package/dist/helpers/handleResponsiveValues.js +21 -15
- package/dist/helpers/objects.cjs +1 -0
- package/dist/helpers/objects.js +26 -0
- package/dist/helpers/setOpacity.cjs +1 -1
- package/dist/helpers/setOpacity.js +1 -1
- package/dist/helpers/theme.cjs +1 -0
- package/dist/helpers/theme.js +7 -0
- package/dist/helpers/useIntersection.cjs +1 -1
- package/dist/helpers/useIntersection.js +8 -8
- package/dist/hooks/useControllableState.cjs +1 -1
- package/dist/hooks/useControllableState.js +13 -16
- package/dist/index.cjs +1 -1
- package/dist/index.js +205 -201
- package/dist/themes/extendTheme.cjs +4 -4
- package/dist/themes/extendTheme.js +13 -21
- package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs +2 -2
- package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js +1 -1
- package/dist/v2/Link/Link.cjs +4 -4
- package/dist/v2/Link/Link.js +1 -1
- package/dist/v2/MainNav/NavCondense.cjs +3 -3
- package/dist/v2/MainNav/NavCondense.js +1 -2
- package/dist/v2/MainNav/NavSections.cjs +3 -3
- package/dist/v2/MainNav/NavSections.js +5 -5
- package/dist/v2/Pagination/components.cjs +7 -7
- package/dist/v2/Pagination/components.js +18 -19
- package/dist/v2/SimpleMenu/SimpleMenu.cjs +9 -9
- package/dist/v2/SimpleMenu/SimpleMenu.js +96 -89
- package/dist/v2/SubNav/SubNavHeader.cjs +2 -2
- package/dist/v2/SubNav/SubNavHeader.js +1 -1
- package/dist/v2/SubNav/SubNavLink.cjs +4 -4
- package/dist/v2/SubNav/SubNavLink.js +1 -1
- package/dist/v2/SubNav/SubNavLinkSection.cjs +4 -4
- package/dist/v2/SubNav/SubNavLinkSection.js +1 -1
- package/dist/v2/SubNav/SubNavSectionLabel.cjs +3 -3
- package/dist/v2/SubNav/SubNavSectionLabel.js +1 -1
- package/package.json +18 -15
- package/dist/Box/BoxProps.cjs +0 -1
- package/dist/Box/BoxProps.js +0 -51
- package/dist/Flex/FlexProps.cjs +0 -1
- package/dist/Flex/FlexProps.js +0 -41
- package/dist/FocusTrap/ExampleComponent.cjs +0 -1
- package/dist/FocusTrap/ExampleComponent.js +0 -71
- package/dist/LiveRegions/StoryComponent.cjs +0 -1
- package/dist/LiveRegions/StoryComponent.js +0 -18
- package/dist/Typography/TypographyProps.cjs +0 -1
- package/dist/Typography/TypographyProps.js +0 -31
- package/dist/themes/ColorButton.cjs +0 -3
- package/dist/themes/ColorButton.js +0 -25
- package/dist/themes/colors.cjs +0 -1
- package/dist/themes/colors.js +0 -49
|
@@ -1,58 +1,53 @@
|
|
|
1
|
-
import
|
|
2
|
-
import i from "
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { Box as i } from "../Box/Box.js";
|
|
3
|
+
import { KeyboardKeys as o } from "../helpers/keyboardKeys.js";
|
|
4
|
+
const v = ({
|
|
5
|
+
tagName: s,
|
|
6
|
+
attributeName: a = "",
|
|
7
|
+
...d
|
|
8
|
+
}) => {
|
|
9
|
+
const r = () => {
|
|
7
10
|
const e = document.activeElement;
|
|
8
|
-
return
|
|
9
|
-
},
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
return e ? s ? e.tagName.toLowerCase() === s : e.hasAttribute(a) : !1;
|
|
12
|
+
}, l = (e) => s ? e.querySelectorAll(s) : e.querySelectorAll(`[${a}]`);
|
|
13
|
+
return m(i, {
|
|
14
|
+
onKeyDown: (e) => {
|
|
15
|
+
switch (e.key) {
|
|
16
|
+
case o.RIGHT:
|
|
17
|
+
case o.DOWN: {
|
|
18
|
+
if (r()) {
|
|
19
|
+
e.preventDefault();
|
|
20
|
+
const n = document.activeElement, t = [...l(e.currentTarget)], c = t.findIndex((f) => f === n), u = c + 1 < t.length ? c + 1 : 0;
|
|
21
|
+
t[u].focus();
|
|
22
|
+
}
|
|
23
|
+
break;
|
|
17
24
|
}
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
25
|
+
case o.LEFT:
|
|
26
|
+
case o.UP: {
|
|
27
|
+
if (r()) {
|
|
28
|
+
e.preventDefault();
|
|
29
|
+
const n = document.activeElement, t = [...l(e.currentTarget)], c = t.findIndex((f) => f === n), u = c - 1 > -1 ? c - 1 : t.length - 1;
|
|
30
|
+
t[u].focus();
|
|
31
|
+
}
|
|
32
|
+
break;
|
|
26
33
|
}
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
34
|
+
case o.HOME: {
|
|
35
|
+
r() && (e.preventDefault(), l(e.currentTarget).item(0).focus());
|
|
36
|
+
break;
|
|
37
|
+
}
|
|
38
|
+
case o.END: {
|
|
39
|
+
if (r()) {
|
|
40
|
+
e.preventDefault();
|
|
41
|
+
const n = l(e.currentTarget);
|
|
42
|
+
n.item(n.length - 1).focus();
|
|
43
|
+
}
|
|
44
|
+
break;
|
|
38
45
|
}
|
|
39
|
-
break;
|
|
40
46
|
}
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
return /* @__PURE__ */ E.createElement(y, {
|
|
44
|
-
onKeyDown: p,
|
|
45
|
-
...m
|
|
47
|
+
},
|
|
48
|
+
...d
|
|
46
49
|
});
|
|
47
50
|
};
|
|
48
|
-
d.defaultProps = {
|
|
49
|
-
attributeName: void 0,
|
|
50
|
-
tagName: void 0
|
|
51
|
-
};
|
|
52
|
-
d.propTypes = {
|
|
53
|
-
attributeName: i.string,
|
|
54
|
-
tagName: i.string
|
|
55
|
-
};
|
|
56
51
|
export {
|
|
57
|
-
|
|
52
|
+
v as KeyboardNavigable
|
|
58
53
|
};
|
package/dist/Link/Link.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("react"),h=require("prop-types"),_=require("styled-components"),b=require("@strapi/icons"),q=require("react-router-dom"),u=require("../Typography/Typography.cjs"),E=require("../Box/Box.cjs"),L=require("../themes/utils.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=l(c),n=l(h),f=l(_),T=f.default.a`
|
|
2
2
|
display: inline-flex;
|
|
3
3
|
align-items: center;
|
|
4
4
|
text-decoration: none;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
font-size: ${10/16}rem;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
${
|
|
17
|
+
${u.Typography} {
|
|
18
18
|
transition: color 150ms ease-out;
|
|
19
19
|
color: currentColor;
|
|
20
20
|
}
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
color: ${({theme:e})=>e.colors.primary700};
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
${
|
|
31
|
-
`,i=f.default(
|
|
30
|
+
${L.buttonFocusStyle};
|
|
31
|
+
`,i=f.default(E.Box)`
|
|
32
32
|
display: flex;
|
|
33
|
-
`,
|
|
33
|
+
`,a=c.forwardRef(({href:e,to:r,children:p,disabled:o,startIcon:s,endIcon:d,...y},m)=>{const v=e?"_blank":void 0,g=e?"noreferrer noopener":void 0;return t.default.createElement(T,{as:r&&!o?q.NavLink:"a",target:v,rel:g,to:o?void 0:r,href:o?"#":e,disabled:o,ref:m,...y},s&&t.default.createElement(i,{as:"span","aria-hidden":!0,paddingRight:2},s),t.default.createElement(u.Typography,null,p),d&&!e&&t.default.createElement(i,{as:"span","aria-hidden":!0,paddingLeft:2},d),e&&t.default.createElement(i,{as:"span","aria-hidden":!0,paddingLeft:2},t.default.createElement(b.ExternalLink,null)))});a.displayName="Link";a.defaultProps={endIcon:void 0,href:void 0,to:void 0,disabled:!1,startIcon:void 0};a.propTypes={children:n.default.node.isRequired,disabled:n.default.bool,endIcon:n.default.element,href(e){if(!e.disabled&&!e.to&&!e.href)return new Error("href must be defined")},startIcon:n.default.element,to(e){if(!e.disabled&&!e.href&&!e.to)return new Error("to must be defined")}};exports.Link=a;
|
package/dist/Link/Link.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import r, { forwardRef as y } from "react";
|
|
2
2
|
import n from "prop-types";
|
|
3
3
|
import s from "styled-components";
|
|
4
|
-
import g from "@strapi/icons
|
|
4
|
+
import { ExternalLink as g } from "@strapi/icons";
|
|
5
5
|
import { NavLink as h } from "react-router-dom";
|
|
6
6
|
import { Typography as m } from "../Typography/Typography.js";
|
|
7
7
|
import { Box as E } from "../Box/Box.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),s=require("../VisuallyHidden/VisuallyHidden.cjs"),i=require("./constants.cjs"),l=()=>e.jsxs(s.VisuallyHidden,{children:[e.jsx("p",{role:"log","aria-live":"polite",id:i.LiveRegionIds.Log,"aria-relevant":"all"}),e.jsx("p",{role:"status","aria-live":"polite",id:i.LiveRegionIds.Status,"aria-relevant":"all"}),e.jsx("p",{role:"alert","aria-live":"assertive",id:i.LiveRegionIds.Alert,"aria-relevant":"all"})]});exports.LiveRegions=l;
|
|
@@ -1,22 +1,24 @@
|
|
|
1
|
-
import e from "react";
|
|
2
|
-
import { VisuallyHidden as
|
|
3
|
-
import { LiveRegionIds as
|
|
4
|
-
const
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
1
|
+
import { jsxs as r, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { VisuallyHidden as a } from "../VisuallyHidden/VisuallyHidden.js";
|
|
3
|
+
import { LiveRegionIds as i } from "./constants.js";
|
|
4
|
+
const s = () => r(a, {
|
|
5
|
+
children: [e("p", {
|
|
6
|
+
role: "log",
|
|
7
|
+
"aria-live": "polite",
|
|
8
|
+
id: i.Log,
|
|
9
|
+
"aria-relevant": "all"
|
|
10
|
+
}), e("p", {
|
|
11
|
+
role: "status",
|
|
12
|
+
"aria-live": "polite",
|
|
13
|
+
id: i.Status,
|
|
14
|
+
"aria-relevant": "all"
|
|
15
|
+
}), e("p", {
|
|
16
|
+
role: "alert",
|
|
17
|
+
"aria-live": "assertive",
|
|
18
|
+
id: i.Alert,
|
|
19
|
+
"aria-relevant": "all"
|
|
20
|
+
})]
|
|
21
|
+
});
|
|
20
22
|
export {
|
|
21
|
-
|
|
23
|
+
s as LiveRegions
|
|
22
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./useNotifyAT.cjs");exports.useNotifyAT=e.useNotifyAT;
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./useNotifyAT.cjs"),i=require("./LiveRegions.cjs");exports.useNotifyAT=e.useNotifyAT;exports.LiveRegions=i.LiveRegions;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),d=require("prop-types"),l=require("styled-components"),s=require("@strapi/icons"),c=require("../Icon/Icon.cjs"),u=require("../VisuallyHidden/VisuallyHidden.cjs"),p=require("./MainNavContext.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=o(i),f=o(d),h=o(l),y=h.default.button`
|
|
2
2
|
background: ${({theme:e})=>e.colors.neutral0};
|
|
3
3
|
border: 1px solid ${({theme:e})=>e.colors.neutral150};
|
|
4
4
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
justify-content: center;
|
|
8
8
|
position: absolute;
|
|
9
9
|
bottom: ${(9+4)/16}rem; // 9 is the height of the svg and 4 is the padding below
|
|
10
|
-
right: ${({theme:e,condensed:
|
|
10
|
+
right: ${({theme:e,condensed:t})=>t?0:e.spaces[5]};
|
|
11
11
|
transform: ${({condensed:e})=>e?"translateX(50%)":void 0};
|
|
12
12
|
z-index: 2;
|
|
13
13
|
width: ${18/16}rem;
|
|
@@ -17,4 +17,4 @@
|
|
|
17
17
|
width: ${6/16}rem;
|
|
18
18
|
height: ${9/16}rem;
|
|
19
19
|
}
|
|
20
|
-
`,
|
|
20
|
+
`,a=({children:e,...t})=>{const r=p.useMainNav();return n.default.createElement(y,{as:"button",condensed:r,...t},n.default.createElement(c.Icon,{as:r?s.ChevronRight:s.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),n.default.createElement(u.VisuallyHidden,null,e))};a.propTypes={children:f.default.string.isRequired};exports.NavCondense=a;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import t from "react";
|
|
2
2
|
import n from "prop-types";
|
|
3
3
|
import i from "styled-components";
|
|
4
|
-
import s from "@strapi/icons
|
|
5
|
-
import a from "@strapi/icons/ChevronLeft";
|
|
4
|
+
import { ChevronRight as s, ChevronLeft as a } from "@strapi/icons";
|
|
6
5
|
import { Icon as d } from "../Icon/Icon.js";
|
|
7
6
|
import { VisuallyHidden as m } from "../VisuallyHidden/VisuallyHidden.js";
|
|
8
7
|
import { useMainNav as l } from "./MainNavContext.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),d=require("prop-types"),l=require("styled-components"),u=require("../Stack/Stack.cjs"),i=require("../Box/Box.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(a),p=o(d),f=o(l),y=f.default(i.Box)`
|
|
2
2
|
flex-grow: 1;
|
|
3
|
-
overflow-y:
|
|
4
|
-
`,
|
|
3
|
+
overflow-y: auto;
|
|
4
|
+
`,r=({children:e,...c})=>t.default.createElement(y,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8},t.default.createElement(u.Stack,{as:"ul",spacing:4,...c},a.Children.map(e,(n,s)=>t.default.createElement("li",{key:s},n))));r.propTypes={children:p.default.node.isRequired};exports.NavSections=r;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import e, { Children as i } from "react";
|
|
2
2
|
import n from "prop-types";
|
|
3
|
-
import
|
|
4
|
-
import { Stack as
|
|
3
|
+
import a from "styled-components";
|
|
4
|
+
import { Stack as m } from "../Stack/Stack.js";
|
|
5
5
|
import { Box as d } from "../Box/Box.js";
|
|
6
|
-
const l =
|
|
6
|
+
const l = a(d)`
|
|
7
7
|
flex-grow: 1;
|
|
8
|
-
overflow-y:
|
|
8
|
+
overflow-y: auto;
|
|
9
9
|
`, c = ({ children: o, ...r }) => /* @__PURE__ */ e.createElement(l, {
|
|
10
10
|
paddingLeft: 3,
|
|
11
11
|
paddingRight: 2,
|
|
12
12
|
paddingTop: 3,
|
|
13
13
|
paddingBottom: 8
|
|
14
|
-
}, /* @__PURE__ */ e.createElement(
|
|
14
|
+
}, /* @__PURE__ */ e.createElement(m, {
|
|
15
15
|
as: "ul",
|
|
16
16
|
spacing: 4,
|
|
17
17
|
...r
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),d=require("styled-components"),c=require("prop-types"),u=require("@strapi/icons
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),d=require("styled-components"),c=require("prop-types"),u=require("@strapi/icons"),i=require("../Flex/Flex.cjs"),p=require("../Box/Box.cjs"),f=require("../IconButton/IconButton.cjs"),b=require("./ModalContext.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(s),x=o(d),n=o(c),y=x.default(p.Box)`
|
|
2
2
|
border-radius: ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius} 0 0;
|
|
3
3
|
border-bottom: 1px solid ${({theme:e})=>e.colors.neutral150};
|
|
4
|
-
`,r=({children:e,closeLabel:
|
|
4
|
+
`,r=({children:e,closeLabel:a})=>{const l=b.useModal();return t.default.createElement(y,{paddingTop:4,paddingBottom:4,paddingLeft:5,paddingRight:5,background:"neutral100"},t.default.createElement(i.Flex,{justifyContent:"space-between"},e,t.default.createElement(f.IconButton,{onClick:l,"aria-label":a,icon:t.default.createElement(u.Cross,null)})))};r.defaultProps={closeLabel:"Close the modal"};r.propTypes={children:n.default.node.isRequired,closeLabel:n.default.string};exports.ModalHeader=r;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import o from "react";
|
|
2
2
|
import l from "styled-components";
|
|
3
3
|
import r from "prop-types";
|
|
4
|
-
import n from "@strapi/icons
|
|
4
|
+
import { Cross as n } from "@strapi/icons";
|
|
5
5
|
import { Flex as i } from "../Flex/Flex.js";
|
|
6
6
|
import { Box as p } from "../Box/Box.js";
|
|
7
7
|
import { IconButton as m } from "../IconButton/IconButton.js";
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react"),O=require("prop-types"),T=require("styled-components"),F=require("@strapi/icons"),q=require("@internationalized/number"),$=require("../Field/Field.cjs"),B=require("../Field/FieldLabel.cjs"),H=require("../Field/FieldInput.cjs"),M=require("../Field/FieldHint.cjs"),U=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const W=require("../Stack/Stack.cjs"),h=require("../Icon/Icon.cjs"),X=require("../themes/sizes.cjs"),Y=require("../helpers/useId.cjs"),v=require("../helpers/keyboardKeys.cjs"),G=require("../helpers/getDefaultLocale.cjs"),J=require("../hooks/useControllableState.cjs"),m=r=>r&&typeof r=="object"&&"default"in r?r:{default:r},a=m(f),t=m(O),Q=m(T),I=Q.default.button`
|
|
2
2
|
display: flex;
|
|
3
3
|
height: 1rem;
|
|
4
4
|
align-items: ${({reverse:r})=>r?"flex-end":"flex-start"};
|
|
@@ -9,4 +9,4 @@
|
|
|
9
9
|
height: ${4/16}rem;
|
|
10
10
|
transform: ${({reverse:r})=>r?"rotateX(180deg)":void 0};
|
|
11
11
|
}
|
|
12
|
-
`,
|
|
12
|
+
`,Z="",d=a.default.forwardRef(({size:r,startAction:N,name:j,hint:w,error:E,label:p,labelAction:k,locale:D,id:A,onValueChange:C,value:S,step:o,required:V,disabled:s,...x},_)=>{const L=Y.useId("numberinput",A),b=D||G.getDefaultLocale(),i=f.useRef(new q.NumberParser(b,{style:"decimal"})),c=f.useRef(new q.NumberFormatter(b,{maximumFractionDigits:20})),[l,P]=J.useControllableState({prop(e){const n=String(S);return isNaN(n)||n!==e&&e!==""?e:n},defaultProp:Z,onChange(e){const n=i.current.parse(e);C(isNaN(n)?void 0:n)}}),u=e=>{P(String(e))},R=({target:{value:e}})=>{i.current.isValidPartialNumber(e)&&u(e)},y=()=>{if(!l){u(o);return}const e=i.current.parse(l),n=isNaN(e)?o:e+o;u(c.current.format(n))},g=()=>{if(!l){u(-o);return}const e=i.current.parse(l),n=isNaN(e)?-o:e-o;u(c.current.format(n))},K=e=>{if(!s)switch(e.key){case v.KeyboardKeys.DOWN:{e.preventDefault(),g();break}case v.KeyboardKeys.UP:{e.preventDefault(),y();break}}},z=()=>{if(l){const e=i.current.parse(l),n=isNaN(e)?"":c.current.format(e);u(n)}};return a.default.createElement($.Field,{name:j,hint:w,error:E,id:L,required:V},a.default.createElement(W.Stack,{spacing:1},p&&a.default.createElement(B.FieldLabel,{action:k},p),a.default.createElement(H.FieldInput,{ref:_,startAction:N,disabled:s,type:"text",inputmode:"decimal",onChange:R,onKeyDown:K,onBlur:z,value:l,size:r,endAction:a.default.createElement(a.default.Fragment,null,a.default.createElement(I,{disabled:s,"aria-hidden":!0,reverse:!0,onClick:y,tabIndex:-1,type:"button","data-testid":"ArrowUp"},a.default.createElement(h.Icon,{as:F.CarretDown,color:"neutral500"})),a.default.createElement(I,{disabled:s,"aria-hidden":!0,onClick:g,tabIndex:-1,type:"button","data-testid":"ArrowDown"},a.default.createElement(h.Icon,{as:F.CarretDown,color:"neutral500"}))),...x}),a.default.createElement(M.FieldHint,null),a.default.createElement(U.FieldError,null)))});d.displayName="NumberInput";d.defaultProps={"aria-label":void 0,disabled:!1,error:void 0,hint:void 0,id:void 0,label:void 0,labelAction:void 0,locale:void 0,required:!1,size:"M",startAction:void 0,step:1,value:void 0};d.propTypes={"aria-label":t.default.string,disabled:t.default.bool,error:t.default.string,hint:t.default.oneOfType([t.default.string,t.default.node,t.default.arrayOf(t.default.node)]),id:t.default.string,label:t.default.string,labelAction:t.default.element,locale:t.default.string,name:t.default.string.isRequired,onValueChange:t.default.func.isRequired,required:t.default.bool,size:t.default.oneOf(Object.keys(X.sizes.input)),startAction:t.default.element,step:t.default.number,value:t.default.number};exports.NumberInput=d;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import t, { useRef as g } from "react";
|
|
2
2
|
import r from "prop-types";
|
|
3
3
|
import L from "styled-components";
|
|
4
|
-
import v from "@strapi/icons
|
|
4
|
+
import { CarretDown as v } from "@strapi/icons";
|
|
5
5
|
import { NumberParser as T, NumberFormatter as z } from "@internationalized/number";
|
|
6
6
|
import { Field as B } from "../Field/Field.js";
|
|
7
7
|
import { FieldLabel as U } from "../Field/FieldLabel.js";
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react"),k=require("styled-components"),q=require("prop-types"),g=require("@strapi/icons"),T=require("react-router-dom"),l=require("../VisuallyHidden/VisuallyHidden.cjs"),u=require("./PaginationContext.cjs"),x=require("../Typography/Typography.cjs"),E=require("../themes/utils.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=c(L),s=c(k),o=c(q),v=s.default(x.Typography)`
|
|
2
2
|
line-height: revert;
|
|
3
|
-
|
|
3
|
+
`,$={active:!0},p=s.default(T.NavLink).withConfig({shouldForwardProp:(e,t)=>!$[e]&&t(e)})`
|
|
4
4
|
padding: ${({theme:e})=>e.spaces[3]};
|
|
5
5
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
6
6
|
box-shadow: ${({active:e,theme:t})=>e?t.shadows.filterShadow:void 0};
|
|
@@ -8,14 +8,14 @@
|
|
|
8
8
|
display: flex;
|
|
9
9
|
|
|
10
10
|
${E.buttonFocusStyle}
|
|
11
|
-
`,
|
|
11
|
+
`,R=s.default(p)`
|
|
12
12
|
color: ${({theme:e,active:t})=>t?e.colors.primary700:e.colors.neutral800};
|
|
13
13
|
background: ${({theme:e,active:t})=>t?e.colors.neutral0:void 0};
|
|
14
14
|
|
|
15
15
|
&:hover {
|
|
16
16
|
box-shadow: ${({theme:e})=>e.shadows.filterShadow};
|
|
17
17
|
}
|
|
18
|
-
`,
|
|
18
|
+
`,m=s.default(p)`
|
|
19
19
|
font-size: 0.7rem;
|
|
20
20
|
svg path {
|
|
21
21
|
fill: ${e=>e["aria-disabled"]?e.theme.colors.neutral300:e.theme.colors.neutral600};
|
|
@@ -31,6 +31,6 @@
|
|
|
31
31
|
${e=>e["aria-disabled"]?`
|
|
32
32
|
pointer-events: none;
|
|
33
33
|
`:void 0}
|
|
34
|
-
`,
|
|
34
|
+
`,_=s.default(p)`
|
|
35
35
|
color: ${({theme:e})=>e.colors.neutral800};
|
|
36
|
-
`,f=({children:e,to:t,...
|
|
36
|
+
`,f=({children:e,to:t,...i})=>{const{activePage:n}=u.usePagination(),r=n===1;return a.default.createElement(m,{to:r?"#":t,"aria-disabled":r,tabIndex:r?-1:void 0,...i},a.default.createElement(l.VisuallyHidden,null,e),a.default.createElement(g.ChevronLeft,{"aria-hidden":!0}))};f.displayName="PreviousLink";const y=({children:e,to:t,...i})=>{const{activePage:n,pageCount:r}=u.usePagination(),d=n===r;return a.default.createElement(m,{to:d?"#":t,"aria-disabled":d,tabIndex:d?-1:void 0,...i},a.default.createElement(l.VisuallyHidden,null,e),a.default.createElement(g.ChevronRight,{"aria-hidden":!0}))};y.displayName="NextLink";const h=({number:e,children:t,...i})=>{const{activePage:n}=u.usePagination(),r=n===e;return a.default.createElement(R,{...i,active:r},a.default.createElement(l.VisuallyHidden,null,t),a.default.createElement(v,{"aria-hidden":!0,variant:"pi",fontWeight:r?"bold":null},e))};h.displayName="PageLink";const P=({children:e,...t})=>a.default.createElement(_,{...t,as:"div"},a.default.createElement(l.VisuallyHidden,null,e),a.default.createElement(v,{"aria-hidden":!0,variant:"pi"},"\u2026"));h.propTypes={children:o.default.node.isRequired,number:o.default.number.isRequired};const b={children:o.default.node.isRequired,to:o.default.string.isRequired};y.propTypes=b;f.propTypes=b;P.propTypes={children:o.default.node.isRequired};exports.Dots=P;exports.NextLink=y;exports.PageLink=h;exports.PreviousLink=f;
|
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
import t from "react";
|
|
2
2
|
import s from "styled-components";
|
|
3
3
|
import n from "prop-types";
|
|
4
|
-
import b from "@strapi/icons
|
|
5
|
-
import y from "@strapi/icons/ChevronRight";
|
|
4
|
+
import { ChevronLeft as b, ChevronRight as y } from "@strapi/icons";
|
|
6
5
|
import { NavLink as P } from "react-router-dom";
|
|
7
6
|
import { VisuallyHidden as l } from "../VisuallyHidden/VisuallyHidden.js";
|
|
8
7
|
import { usePagination as c } from "./PaginationContext.js";
|
|
9
8
|
import { Typography as E } from "../Typography/Typography.js";
|
|
10
9
|
import { buttonFocusStyle as k } from "../themes/utils.js";
|
|
11
|
-
const
|
|
10
|
+
const u = s(E)`
|
|
12
11
|
line-height: revert;
|
|
13
12
|
`, L = {
|
|
14
13
|
active: !0
|
|
@@ -29,7 +28,7 @@ const m = s(E)`
|
|
|
29
28
|
&:hover {
|
|
30
29
|
box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
|
|
31
30
|
}
|
|
32
|
-
`,
|
|
31
|
+
`, m = s(p)`
|
|
33
32
|
font-size: 0.7rem;
|
|
34
33
|
svg path {
|
|
35
34
|
fill: ${(e) => e["aria-disabled"] ? e.theme.colors.neutral300 : e.theme.colors.neutral600};
|
|
@@ -47,36 +46,36 @@ const m = s(E)`
|
|
|
47
46
|
` : void 0}
|
|
48
47
|
`, x = s(p)`
|
|
49
48
|
color: ${({ theme: e }) => e.colors.neutral800};
|
|
50
|
-
`, h = ({ children: e, to: r, ...
|
|
51
|
-
const { activePage:
|
|
52
|
-
return /* @__PURE__ */ t.createElement(
|
|
49
|
+
`, h = ({ children: e, to: r, ...a }) => {
|
|
50
|
+
const { activePage: i } = c(), o = i === 1;
|
|
51
|
+
return /* @__PURE__ */ t.createElement(m, {
|
|
53
52
|
to: o ? "#" : r,
|
|
54
53
|
"aria-disabled": o,
|
|
55
54
|
tabIndex: o ? -1 : void 0,
|
|
56
|
-
...
|
|
55
|
+
...a
|
|
57
56
|
}, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(b, {
|
|
58
57
|
"aria-hidden": !0
|
|
59
58
|
}));
|
|
60
59
|
};
|
|
61
60
|
h.displayName = "PreviousLink";
|
|
62
|
-
const v = ({ children: e, to: r, ...
|
|
63
|
-
const { activePage:
|
|
64
|
-
return /* @__PURE__ */ t.createElement(
|
|
61
|
+
const v = ({ children: e, to: r, ...a }) => {
|
|
62
|
+
const { activePage: i, pageCount: o } = c(), d = i === o;
|
|
63
|
+
return /* @__PURE__ */ t.createElement(m, {
|
|
65
64
|
to: d ? "#" : r,
|
|
66
65
|
"aria-disabled": d,
|
|
67
66
|
tabIndex: d ? -1 : void 0,
|
|
68
|
-
...
|
|
67
|
+
...a
|
|
69
68
|
}, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(y, {
|
|
70
69
|
"aria-hidden": !0
|
|
71
70
|
}));
|
|
72
71
|
};
|
|
73
72
|
v.displayName = "NextLink";
|
|
74
|
-
const f = ({ number: e, children: r, ...
|
|
75
|
-
const { activePage:
|
|
73
|
+
const f = ({ number: e, children: r, ...a }) => {
|
|
74
|
+
const { activePage: i } = c(), o = i === e;
|
|
76
75
|
return /* @__PURE__ */ t.createElement($, {
|
|
77
|
-
...
|
|
76
|
+
...a,
|
|
78
77
|
active: o
|
|
79
|
-
}, /* @__PURE__ */ t.createElement(l, null, r), /* @__PURE__ */ t.createElement(
|
|
78
|
+
}, /* @__PURE__ */ t.createElement(l, null, r), /* @__PURE__ */ t.createElement(u, {
|
|
80
79
|
"aria-hidden": !0,
|
|
81
80
|
variant: "pi",
|
|
82
81
|
fontWeight: o ? "bold" : null
|
|
@@ -86,7 +85,7 @@ f.displayName = "PageLink";
|
|
|
86
85
|
const w = ({ children: e, ...r }) => /* @__PURE__ */ t.createElement(x, {
|
|
87
86
|
...r,
|
|
88
87
|
as: "div"
|
|
89
|
-
}, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(
|
|
88
|
+
}, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(u, {
|
|
90
89
|
"aria-hidden": !0,
|
|
91
90
|
variant: "pi"
|
|
92
91
|
}, "\u2026"));
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),E=require("prop-types"),S=require("styled-components"),d=require("@strapi/icons"),_=require("../themes/sizes.cjs"),v=require("../Field/Field.cjs"),x=require("../Field/FieldLabel.cjs"),a=require("../Field/FieldInput.cjs");require("../Field/FieldContext.cjs");require("../Typography/Typography.cjs");const $=require("../Field/FieldAction.cjs"),z=require("../VisuallyHidden/VisuallyHidden.cjs"),C=require("../themes/utils.cjs"),o=require("../Flex/Flex.cjs"),i=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=i(s),l=i(E),n=i(S),I=n.default(o.Flex)`
|
|
2
2
|
font-size: 0.5rem;
|
|
3
3
|
svg path {
|
|
4
4
|
fill: ${({theme:e})=>e.colors.neutral400};
|
|
5
5
|
}
|
|
6
|
-
`,
|
|
6
|
+
`,p=n.default(o.Flex)`
|
|
7
7
|
font-size: 0.8rem;
|
|
8
8
|
|
|
9
9
|
svg path {
|
|
10
10
|
fill: ${({theme:e})=>e.colors.neutral800};
|
|
11
11
|
}
|
|
12
|
-
`,
|
|
12
|
+
`,T=n.default.div`
|
|
13
13
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
14
14
|
box-shadow: ${({theme:e})=>e.shadows.filterShadow};
|
|
15
15
|
|
|
16
16
|
&:focus-within {
|
|
17
|
-
${
|
|
17
|
+
${p} {
|
|
18
18
|
svg path {
|
|
19
19
|
fill: ${({theme:e})=>e.colors.primary600};
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
${
|
|
24
|
+
${a.InputWrapper} {
|
|
25
25
|
border: 1px solid transparent;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
-
${
|
|
29
|
-
`,s
|
|
28
|
+
${C.inputFocusStyle(a.InputWrapper)}
|
|
29
|
+
`,r=s.forwardRef(({name:e,size:f,children:F,value:u,onClear:y,clearLabel:h,...m},q)=>{const c=s.useRef(null),b=u.length>0,g=R=>{y(R),c.current.focus()},j=q||c;return t.default.createElement(T,null,t.default.createElement(v.Field,{name:e},t.default.createElement(z.VisuallyHidden,null,t.default.createElement(x.FieldLabel,null,F)),t.default.createElement(a.FieldInput,{ref:j,value:u,startAction:t.default.createElement(p,null,t.default.createElement(d.Search,{"aria-hidden":!0})),size:f,endAction:b?t.default.createElement($.FieldAction,{label:h,onClick:g},t.default.createElement(I,null,t.default.createElement(d.Cross,null))):void 0,...m})))});r.displayName="Searchbar";r.defaultProps={value:"",size:"M"};r.propTypes={children:l.default.node.isRequired,clearLabel:l.default.string.isRequired,name:l.default.string.isRequired,onClear:l.default.func.isRequired,size:l.default.oneOf(Object.keys(_.sizes.input)),value:l.default.string};exports.Searchbar=r;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import r, { forwardRef as y, useRef as $ } from "react";
|
|
2
2
|
import t from "prop-types";
|
|
3
3
|
import o from "styled-components";
|
|
4
|
-
import S from "@strapi/icons
|
|
5
|
-
import v from "@strapi/icons/Cross";
|
|
4
|
+
import { Search as S, Cross as v } from "@strapi/icons";
|
|
6
5
|
import { sizes as C } from "../themes/sizes.js";
|
|
7
6
|
import { Field as F } from "../Field/Field.js";
|
|
8
7
|
import { FieldLabel as w } from "../Field/FieldLabel.js";
|
|
@@ -18,7 +17,7 @@ const W = o(s)`
|
|
|
18
17
|
svg path {
|
|
19
18
|
fill: ${({ theme: e }) => e.colors.neutral400};
|
|
20
19
|
}
|
|
21
|
-
`,
|
|
20
|
+
`, c = o(s)`
|
|
22
21
|
font-size: 0.8rem;
|
|
23
22
|
|
|
24
23
|
svg path {
|
|
@@ -29,7 +28,7 @@ const W = o(s)`
|
|
|
29
28
|
box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
|
|
30
29
|
|
|
31
30
|
&:focus-within {
|
|
32
|
-
${
|
|
31
|
+
${c} {
|
|
33
32
|
svg path {
|
|
34
33
|
fill: ${({ theme: e }) => e.colors.primary600};
|
|
35
34
|
}
|
|
@@ -41,19 +40,19 @@ const W = o(s)`
|
|
|
41
40
|
}
|
|
42
41
|
|
|
43
42
|
${I(a)}
|
|
44
|
-
`, l = y(({ name: e, size:
|
|
43
|
+
`, l = y(({ name: e, size: m, children: p, value: i, onClear: u, clearLabel: d, ...f }, h) => {
|
|
45
44
|
const n = $(null), b = i.length > 0, E = (g) => {
|
|
46
45
|
u(g), n.current.focus();
|
|
47
46
|
}, R = h || n;
|
|
48
47
|
return /* @__PURE__ */ r.createElement(A, null, /* @__PURE__ */ r.createElement(F, {
|
|
49
48
|
name: e
|
|
50
|
-
}, /* @__PURE__ */ r.createElement(x, null, /* @__PURE__ */ r.createElement(w, null,
|
|
49
|
+
}, /* @__PURE__ */ r.createElement(x, null, /* @__PURE__ */ r.createElement(w, null, p)), /* @__PURE__ */ r.createElement(z, {
|
|
51
50
|
ref: R,
|
|
52
51
|
value: i,
|
|
53
|
-
startAction: /* @__PURE__ */ r.createElement(
|
|
52
|
+
startAction: /* @__PURE__ */ r.createElement(c, null, /* @__PURE__ */ r.createElement(S, {
|
|
54
53
|
"aria-hidden": !0
|
|
55
54
|
})),
|
|
56
|
-
size:
|
|
55
|
+
size: m,
|
|
57
56
|
endAction: b ? /* @__PURE__ */ r.createElement(q, {
|
|
58
57
|
label: d,
|
|
59
58
|
onClick: E
|
package/dist/Select/Select.cjs
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const u=require("react"),le=require("prop-types"),ne=require("styled-components"),P=require("@strapi/icons"),re=require("../themes/sizes.cjs"),oe=require("./SelectButton.cjs"),ae=require("../Field/Field.cjs"),se=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const ie=require("../Field/FieldHint.cjs"),ce=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const de=require("../Popover/Popover.cjs"),ue=require("../Stack/Stack.cjs"),A=require("../Typography/Typography.cjs"),x=require("../Flex/Flex.cjs"),z=require("../Box/Box.cjs"),fe=require("../helpers/useId.cjs"),pe=require("./SelectList.cjs"),T=require("./components.cjs"),ye=require("./hooks/useButtonRef.cjs"),G=require("../VisuallyHidden/VisuallyHidden.cjs"),he=require("./constants.cjs"),W=require("../helpers/escapeSelector.cjs"),me=require("./SelectTags.cjs"),v=o=>o&&typeof o=="object"&&"default"in o?o:{default:o},l=v(u),e=v(le),Ee=v(ne),ge=Ee.default(x.Flex)`
|
|
2
2
|
width: 100%;
|
|
3
|
-
`,
|
|
3
|
+
`,I=({label:o,labelAction:N,id:J,children:K,customizeContent:p,placeholder:b,onChange:F,value:n,hint:S,error:y,disabled:i,clearLabel:C,onClear:O,onReachEnd:Q,multi:a,required:U,selectButtonTitle:V,size:X,startIcon:R,withTags:h,...Y})=>{const r=fe.useId("select",J),[m,E]=u.useState(void 0),L=ye.useButtonRef(m),$=u.useRef(null),_=`${r}-label`,g=`${r}-content`,k=typeof y=="string";let j;if(k?j=`${r}-error`:S&&(j=`${r}-hint`),h&&!a)throw new Error('The "withTags" props can only be used when the "multi" prop is present');const Z=()=>{E(void 0)},ee=()=>{i||(O(),L.current.focus())},D=t=>{t.preventDefault(),!i&&(t.nativeEvent.which===3||t.nativeEvent.button===2||E(he.DownState.Mouse))},q=(t,s=!0)=>{a?F(n.includes(t)?n.filter(c=>c!==t):[...n,t]):(F(t),s&&E(void 0))},w=t=>{F(n.includes(t[0])?n.filter((s,c,f)=>f.indexOf(s)<0,t):[...n,...t])};let B,H=[];const M=(t,s)=>{const c=`${r}-option-${t.props.value}`,f=a?n.includes(t.props.value):t.props.value===n;return f&&(h?H.push({label:t.props.children,value:t.props.value}):B=t.props.children),u.cloneElement(t,{id:W.escapeSelector(c),onClick:()=>q(t.props.value),selected:f,multi:a,isChild:s})},te=u.Children.toArray(K).map(t=>{if(t.type.displayName==="OptGroup"){const s=`${r}-option-${t.props.label}`,c=t.props.children.every(d=>n.includes(d.props.value)),f=!c&&t.props.children.some(d=>n.includes(d.props.value));return u.cloneElement(t,{id:W.escapeSelector(s),onClick:()=>w(t.props.children.map(d=>d.props.value)),selected:c,indeterminate:f,multi:a,children:u.Children.toArray(t.props.children).map(d=>M(d,!0)),value:t.props.label})}return M(t)});return l.default.createElement(ae.Field,{hint:S,error:y,id:r,required:U},l.default.createElement(ue.Stack,{spacing:o||S||k?1:0},o&&l.default.createElement(se.FieldLabel,{action:N},o),l.default.createElement(T.SelectButtonWrapper,{size:X,hasError:Boolean(y),disabled:i,ref:$},l.default.createElement(oe.SelectButton,{ref:L,labelledBy:`${r} ${_} ${g}`,"aria-describedby":j,expanded:Boolean(m),onTrigger:E,id:r,hasError:Boolean(y),disabled:i,onMouseDown:D,...Y}),l.default.createElement(ge,{justifyContent:"space-between"},l.default.createElement(x.Flex,null,R&&l.default.createElement(z.Box,{paddingLeft:3,"aria-hidden":!0},R),h&&l.default.createElement(me.SelectTags,{tags:H,onRemoveTag:q,disabled:i}),l.default.createElement(z.Box,{paddingLeft:4,paddingRight:4},h?l.default.createElement(l.default.Fragment,null,!n||n.length===0?l.default.createElement(A.Typography,{ellipsis:!0,id:g,textColor:"neutral600"},b):null,l.default.createElement(G.VisuallyHidden,{as:"span",id:g},p?p(n):B||b,n.join(", "))):l.default.createElement(A.Typography,{ellipsis:!0,id:g,textColor:n?"neutral800":"neutral600"},p?p(n):B||b,a&&l.default.createElement(G.VisuallyHidden,{as:"span"},n.join(", "))))),l.default.createElement(x.Flex,null,(a&&n&&n.length||!a&&n)&&O&&l.default.createElement(T.IconBox,{as:"button",type:"button",onClick:ee,"aria-label":C,"aria-disabled":i,title:C},l.default.createElement(P.Cross,null)),l.default.createElement(T.CaretBox,{paddingLeft:3,"aria-hidden":!0,as:"button",type:"button",onMouseDown:D,tabIndex:-1,disabled:i,title:V},l.default.createElement(P.CarretDown,null))))),l.default.createElement(ie.FieldHint,null),l.default.createElement(ce.FieldError,null)),m&&l.default.createElement(de.Popover,{source:$,spacing:4,fullWidth:!0,intersectionId:`select-list-intersection-${r}`,onReachEnd:Q},l.default.createElement(pe.SelectList,{selectId:r,labelledBy:o?_:void 0,onEscape:Z,expanded:m,onSelectItem:(t,s)=>s?w(t):q(t,!1),multi:a},te)))};I.defaultProps={"aria-label":void 0,children:[],clearLabel:"Clear",customizeContent:void 0,disabled:!1,id:void 0,label:void 0,labelAction:void 0,multi:!1,onChange(){},onClear:void 0,onReachEnd:void 0,value:void 0,hint:void 0,error:void 0,placeholder:"Select...",required:!1,selectButtonTitle:"Carret Down Button",size:"M",startIcon:void 0,withTags:!1};I.propTypes={"aria-label":e.default.string,children:e.default.oneOfType([e.default.arrayOf(e.default.node),e.default.node]),clearLabel:e.default.string,customizeContent:e.default.func,disabled:e.default.bool,error:e.default.oneOfType([e.default.string,e.default.bool]),hint:e.default.oneOfType([e.default.string,e.default.node,e.default.arrayOf(e.default.node)]),id:e.default.oneOfType([e.default.string,e.default.number]),label:e.default.string,labelAction:e.default.element,multi:e.default.bool,onChange:e.default.func,onClear:e.default.func,onReachEnd:e.default.func,placeholder:e.default.string,required:e.default.bool,selectButtonTitle:e.default.string,size:e.default.oneOf(Object.keys(re.sizes.input)),startIcon:e.default.element,value:e.default.oneOfType([e.default.arrayOf(e.default.oneOfType([e.default.string,e.default.number])),e.default.string,e.default.number]),withTags:e.default.bool};exports.Select=I;
|