@strapi/design-system 1.7.6 → 1.7.7
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/BaseButton/BaseButton.cjs +3 -3
- package/dist/BaseButton/BaseButton.js +5 -5
- package/dist/CarouselInput/Carousel.cjs +6 -7
- package/dist/CarouselInput/Carousel.js +25 -79
- package/dist/CarouselInput/CarouselActions.cjs +1 -1
- package/dist/CarouselInput/CarouselActions.js +1 -14
- package/dist/CarouselInput/CarouselImage.cjs +3 -4
- package/dist/CarouselInput/CarouselImage.js +13 -23
- package/dist/CarouselInput/CarouselInput.cjs +1 -1
- package/dist/CarouselInput/CarouselInput.js +12 -75
- package/dist/CarouselInput/CarouselSlide.cjs +1 -3
- package/dist/CarouselInput/CarouselSlide.js +4 -29
- package/dist/Checkbox/Checkbox.cjs +3 -3
- package/dist/Checkbox/Checkbox.js +18 -40
- package/dist/Dialog/Dialog.cjs +5 -5
- package/dist/Dialog/Dialog.js +21 -49
- package/dist/Dialog/DialogBody.cjs +2 -2
- package/dist/Dialog/DialogBody.js +6 -19
- package/dist/Dialog/DialogFooter.cjs +2 -2
- package/dist/Dialog/DialogFooter.js +7 -21
- package/dist/ModalLayout/ModalBody.cjs +2 -2
- package/dist/ModalLayout/ModalBody.js +4 -5
- package/dist/ModalLayout/ModalContext.cjs +1 -1
- package/dist/ModalLayout/ModalContext.js +2 -1
- package/dist/ModalLayout/ModalFooter.cjs +2 -6
- package/dist/ModalLayout/ModalFooter.js +9 -26
- package/dist/ModalLayout/ModalHeader.cjs +2 -2
- package/dist/ModalLayout/ModalHeader.js +10 -22
- package/dist/ModalLayout/ModalLayout.cjs +3 -5
- package/dist/ModalLayout/ModalLayout.js +10 -30
- package/dist/NumberInput/NumberInput.cjs +2 -2
- package/dist/NumberInput/NumberInput.js +68 -168
- package/dist/Pagination/Pagination.cjs +1 -5
- package/dist/Pagination/Pagination.js +7 -21
- package/dist/Pagination/components.cjs +7 -10
- package/dist/Pagination/components.js +34 -81
- package/dist/Popover/Popover.cjs +3 -3
- package/dist/Popover/Popover.js +67 -66
- package/dist/ProgressBar/ProgressBar.cjs +5 -5
- package/dist/ProgressBar/ProgressBar.js +6 -37
- package/dist/Radio/Radio.cjs +1 -4
- package/dist/Radio/Radio.js +5 -18
- package/dist/Searchbar/SearchForm.cjs +1 -1
- package/dist/Searchbar/SearchForm.js +2 -3
- package/dist/Searchbar/Searchbar.cjs +10 -11
- package/dist/Searchbar/Searchbar.js +25 -54
- package/dist/Status/Status.cjs +6 -6
- package/dist/Status/Status.js +8 -46
- package/dist/Switch/Switch.cjs +5 -5
- package/dist/Switch/Switch.js +16 -52
- package/dist/Tabs/TabGroup.cjs +1 -1
- package/dist/Tabs/TabGroup.js +13 -37
- package/dist/Tabs/TabPanels.cjs +1 -1
- package/dist/Tabs/TabPanels.js +11 -22
- package/dist/Tabs/Tabs.cjs +2 -2
- package/dist/Tabs/Tabs.js +55 -110
- package/dist/Tabs/TabsContext.cjs +1 -1
- package/dist/Tabs/TabsContext.js +11 -4
- package/dist/Textarea/Textarea.cjs +14 -12
- package/dist/Textarea/Textarea.js +33 -55
- package/dist/ToggleCheckbox/ToggleCheckbox.cjs +8 -8
- package/dist/ToggleCheckbox/ToggleCheckbox.js +25 -121
- package/dist/ToggleInput/ToggleInput.cjs +3 -3
- package/dist/ToggleInput/ToggleInput.js +17 -70
- package/dist/Typography/Typography.cjs +1 -1
- package/dist/Typography/Typography.js +6 -6
- package/dist/hooks/useControllableState.cjs +1 -1
- package/dist/hooks/useControllableState.js +6 -6
- package/dist/themes/utils.cjs +2 -2
- package/dist/themes/utils.js +1 -1
- package/package.json +4 -4
- package/dist/Tabs/useTabsFocus.cjs +0 -1
- package/dist/Tabs/useTabsFocus.js +0 -17
- package/dist/Textarea/TextareaInput.cjs +0 -30
- package/dist/Textarea/TextareaInput.js +0 -65
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime")
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),d=require("styled-components"),n=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),i=e=>e&&e.__esModule?e:{default:e},r=i(d),l=r.default(n.Box)`
|
|
2
2
|
svg {
|
|
3
3
|
width: ${({theme:e})=>e.spaces[6]};
|
|
4
4
|
height: ${({theme:e})=>e.spaces[6]};
|
|
@@ -7,4 +7,4 @@
|
|
|
7
7
|
fill: ${({theme:e})=>e.colors.danger600};
|
|
8
8
|
}
|
|
9
9
|
}
|
|
10
|
-
`,
|
|
10
|
+
`,a=({children:e,icon:o})=>t.jsxs(n.Box,{paddingTop:8,paddingBottom:8,paddingLeft:6,paddingRight:6,children:[o&&t.jsx(l,{paddingBottom:2,children:t.jsx(s.Flex,{justifyContent:"center",children:o})}),e]});exports.DialogBody=a;
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import "react";
|
|
3
|
-
import d from "prop-types";
|
|
1
|
+
import { jsxs as d, jsx as i } from "react/jsx-runtime";
|
|
4
2
|
import n from "styled-components";
|
|
5
|
-
import { Box as
|
|
6
|
-
import { Flex as
|
|
7
|
-
const
|
|
3
|
+
import { Box as r } from "../Box/Box.js";
|
|
4
|
+
import { Flex as e } from "../Flex/Flex.js";
|
|
5
|
+
const p = n(r)`
|
|
8
6
|
svg {
|
|
9
7
|
width: ${({ theme: o }) => o.spaces[6]};
|
|
10
8
|
height: ${({ theme: o }) => o.spaces[6]};
|
|
@@ -13,18 +11,7 @@ const a = n(e)`
|
|
|
13
11
|
fill: ${({ theme: o }) => o.colors.danger600};
|
|
14
12
|
}
|
|
15
13
|
}
|
|
16
|
-
`,
|
|
17
|
-
r && /* @__PURE__ */ t(a, { paddingBottom: 2, children: /* @__PURE__ */ t(s, { justifyContent: "center", children: r }) }),
|
|
18
|
-
o
|
|
19
|
-
] });
|
|
20
|
-
i.displayName = "DialogBody";
|
|
21
|
-
i.defaultProps = {
|
|
22
|
-
icon: void 0
|
|
23
|
-
};
|
|
24
|
-
i.propTypes = {
|
|
25
|
-
children: d.node.isRequired,
|
|
26
|
-
icon: d.node
|
|
27
|
-
};
|
|
14
|
+
`, c = ({ children: o, icon: t }) => d(r, { paddingTop: 8, paddingBottom: 8, paddingLeft: 6, paddingRight: 6, children: [t && i(p, { paddingBottom: 2, children: i(e, { justifyContent: "center", children: t }) }), o] });
|
|
28
15
|
export {
|
|
29
|
-
|
|
16
|
+
c as DialogBody
|
|
30
17
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),r=require("styled-components"),n=require("../Box/Box.cjs"),l=require("../Flex/Flex.cjs"),s=e=>e&&e.__esModule?e:{default:e},i=s(r),u=i.default(n.Box)`
|
|
2
2
|
border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
|
|
3
3
|
|
|
4
4
|
button {
|
|
@@ -6,4 +6,4 @@
|
|
|
6
6
|
display: inline-flex;
|
|
7
7
|
justify-content: center;
|
|
8
8
|
}
|
|
9
|
-
`,
|
|
9
|
+
`,d=({startAction:e,endAction:o})=>t.jsx(u,{padding:4,children:t.jsxs(l.Flex,{gap:2,children:[e,o]})});exports.DialogFooter=d;
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import "
|
|
3
|
-
import
|
|
4
|
-
import p from "
|
|
5
|
-
|
|
6
|
-
import { Flex as s } from "../Flex/Flex.js";
|
|
7
|
-
const l = p(d)`
|
|
1
|
+
import { jsx as t, jsxs as e } from "react/jsx-runtime";
|
|
2
|
+
import i from "styled-components";
|
|
3
|
+
import { Box as n } from "../Box/Box.js";
|
|
4
|
+
import { Flex as p } from "../Flex/Flex.js";
|
|
5
|
+
const l = i(n)`
|
|
8
6
|
border-top: 1px solid ${({ theme: o }) => o.colors.neutral150};
|
|
9
7
|
|
|
10
8
|
button {
|
|
@@ -12,19 +10,7 @@ const l = p(d)`
|
|
|
12
10
|
display: inline-flex;
|
|
13
11
|
justify-content: center;
|
|
14
12
|
}
|
|
15
|
-
`,
|
|
16
|
-
o,
|
|
17
|
-
e
|
|
18
|
-
] }) });
|
|
19
|
-
t.displayName = "DialogFooter";
|
|
20
|
-
t.defaultProps = {
|
|
21
|
-
endAction: void 0,
|
|
22
|
-
startAction: void 0
|
|
23
|
-
};
|
|
24
|
-
t.propTypes = {
|
|
25
|
-
endAction: r.node,
|
|
26
|
-
startAction: r.node
|
|
27
|
-
};
|
|
13
|
+
`, x = ({ startAction: o, endAction: r }) => t(l, { padding: 4, children: e(p, { gap: 2, children: [o, r] }) });
|
|
28
14
|
export {
|
|
29
|
-
|
|
15
|
+
x as DialogFooter
|
|
30
16
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime")
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),t=require("styled-components"),d=require("../Box/Box.cjs"),r=e=>e&&e.__esModule?e:{default:e},l=r(t),s=l.default(d.Box)`
|
|
2
2
|
overflow: auto;
|
|
3
3
|
max-height: 60vh;
|
|
4
|
-
`,
|
|
4
|
+
`,u=e=>o.jsx(s,{padding:7,...e});exports.ModalBody=u;
|
|
@@ -1,11 +1,10 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import "react";
|
|
3
2
|
import t from "styled-components";
|
|
4
|
-
import { Box as
|
|
5
|
-
const
|
|
3
|
+
import { Box as d } from "../Box/Box.js";
|
|
4
|
+
const m = t(d)`
|
|
6
5
|
overflow: auto;
|
|
7
6
|
max-height: 60vh;
|
|
8
|
-
`,
|
|
7
|
+
`, i = (o) => r(m, { padding: 7, ...o });
|
|
9
8
|
export {
|
|
10
|
-
|
|
9
|
+
i as ModalBody
|
|
11
10
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(),o=()=>e.useContext(t);exports.ModalContext=t;exports.useModal=o;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),t=e.createContext(()=>{}),o=()=>e.useContext(t);exports.ModalContext=t;exports.useModal=o;
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),d=require("styled-components"),n=require("../Box/Box.cjs"),r=require("../Flex/Flex.cjs"),s=e=>e&&e.__esModule?e:{default:e},l=s(d),a=l.default(n.Box)`
|
|
2
2
|
border-radius: 0 0 ${({theme:e})=>e.borderRadius} ${({theme:e})=>e.borderRadius};
|
|
3
3
|
border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
|
|
4
|
-
`,
|
|
5
|
-
& > * + * {
|
|
6
|
-
margin-left: ${({theme:e})=>e.spaces[2]};
|
|
7
|
-
}
|
|
8
|
-
`,o=({startActions:e,endActions:a})=>t.jsx(p,{paddingTop:4,paddingBottom:4,paddingLeft:5,paddingRight:5,background:"neutral100",children:t.jsxs(s.Flex,{justifyContent:"space-between",children:[t.jsx(d,{children:e}),t.jsx(d,{children:a})]})});o.defaultProps={endActions:void 0,startActions:void 0};o.propTypes={endActions:r.default.node,startActions:r.default.node};exports.ModalFooter=o;
|
|
4
|
+
`,i=({startActions:e,endActions:t})=>o.jsx(a,{paddingTop:4,paddingBottom:4,paddingLeft:5,paddingRight:5,background:"neutral100",children:o.jsxs(r.Flex,{justifyContent:"space-between",children:[o.jsx(r.Flex,{gap:2,children:e}),o.jsx(r.Flex,{gap:2,children:t})]})});exports.ModalFooter=i;
|
|
@@ -1,28 +1,11 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import "
|
|
3
|
-
import
|
|
4
|
-
import d from "
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
border-top: 1px solid ${({ theme: o }) => o.colors.neutral150};
|
|
10
|
-
`, e = d(i)`
|
|
11
|
-
& > * + * {
|
|
12
|
-
margin-left: ${({ theme: o }) => o.spaces[2]};
|
|
13
|
-
}
|
|
14
|
-
`, n = ({ startActions: o, endActions: p }) => /* @__PURE__ */ r(c, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: /* @__PURE__ */ s(i, { justifyContent: "space-between", children: [
|
|
15
|
-
/* @__PURE__ */ r(e, { children: o }),
|
|
16
|
-
/* @__PURE__ */ r(e, { children: p })
|
|
17
|
-
] }) });
|
|
18
|
-
n.defaultProps = {
|
|
19
|
-
endActions: void 0,
|
|
20
|
-
startActions: void 0
|
|
21
|
-
};
|
|
22
|
-
n.propTypes = {
|
|
23
|
-
endActions: t.node,
|
|
24
|
-
startActions: t.node
|
|
25
|
-
};
|
|
1
|
+
import { jsx as o, jsxs as t } from "react/jsx-runtime";
|
|
2
|
+
import i from "styled-components";
|
|
3
|
+
import { Box as n } from "../Box/Box.js";
|
|
4
|
+
import { Flex as d } from "../Flex/Flex.js";
|
|
5
|
+
const p = i(n)`
|
|
6
|
+
border-radius: 0 0 ${({ theme: r }) => r.borderRadius} ${({ theme: r }) => r.borderRadius};
|
|
7
|
+
border-top: 1px solid ${({ theme: r }) => r.colors.neutral150};
|
|
8
|
+
`, m = ({ startActions: r, endActions: e }) => o(p, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: t(d, { justifyContent: "space-between", children: [o(d, { gap: 2, children: r }), o(d, { gap: 2, children: e })] }) });
|
|
26
9
|
export {
|
|
27
|
-
|
|
10
|
+
m as ModalFooter
|
|
28
11
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime")
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("@strapi/icons"),d=require("styled-components"),s=require("./ModalContext.cjs"),a=require("../IconButton/IconButton.cjs"),l=require("../Box/Box.cjs"),i=require("../Flex/Flex.cjs"),u=e=>e&&e.__esModule?e:{default:e},c=u(d),p=c.default(l.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
|
-
`,
|
|
4
|
+
`,x=({children:e,closeLabel:t="Close the modal"})=>{const r=s.useModal();return o.jsx(p,{paddingTop:4,paddingBottom:4,paddingLeft:5,paddingRight:5,background:"neutral100",children:o.jsxs(i.Flex,{justifyContent:"space-between",children:[e,o.jsx(a.IconButton,{onClick:r,"aria-label":t,icon:o.jsx(n.Cross,{})})]})})};exports.ModalHeader=x;
|
|
@@ -1,29 +1,17 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import "
|
|
3
|
-
import { Cross as p } from "@strapi/icons";
|
|
4
|
-
import e from "prop-types";
|
|
1
|
+
import { jsx as r, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import { Cross as i } from "@strapi/icons";
|
|
5
3
|
import a from "styled-components";
|
|
6
4
|
import { useModal as n } from "./ModalContext.js";
|
|
7
|
-
import { IconButton as
|
|
8
|
-
import { Box as
|
|
9
|
-
import { Flex as
|
|
10
|
-
const
|
|
5
|
+
import { IconButton as s } from "../IconButton/IconButton.js";
|
|
6
|
+
import { Box as l } from "../Box/Box.js";
|
|
7
|
+
import { Flex as m } from "../Flex/Flex.js";
|
|
8
|
+
const p = a(l)`
|
|
11
9
|
border-radius: ${({ theme: o }) => o.borderRadius} ${({ theme: o }) => o.borderRadius} 0 0;
|
|
12
10
|
border-bottom: 1px solid ${({ theme: o }) => o.colors.neutral150};
|
|
13
|
-
`,
|
|
14
|
-
const
|
|
15
|
-
return
|
|
16
|
-
o,
|
|
17
|
-
/* @__PURE__ */ r(l, { onClick: i, "aria-label": d, icon: /* @__PURE__ */ r(p, {}) })
|
|
18
|
-
] }) });
|
|
19
|
-
};
|
|
20
|
-
t.defaultProps = {
|
|
21
|
-
closeLabel: "Close the modal"
|
|
22
|
-
};
|
|
23
|
-
t.propTypes = {
|
|
24
|
-
children: e.node.isRequired,
|
|
25
|
-
closeLabel: e.string
|
|
11
|
+
`, h = ({ children: o, closeLabel: e = "Close the modal" }) => {
|
|
12
|
+
const t = n();
|
|
13
|
+
return r(p, { paddingTop: 4, paddingBottom: 4, paddingLeft: 5, paddingRight: 5, background: "neutral100", children: d(m, { justifyContent: "space-between", children: [o, r(s, { onClick: t, "aria-label": e, icon: r(i, {}) })] }) });
|
|
26
14
|
};
|
|
27
15
|
export {
|
|
28
|
-
|
|
16
|
+
h as ModalHeader
|
|
29
17
|
};
|
|
@@ -1,6 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime")
|
|
2
|
-
inset: 0;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),i=require("styled-components"),a=require("./ModalContext.cjs"),s=require("../DismissibleLayer/index.cjs"),d=require("../hooks/useLockScroll.cjs"),l=require("../Flex/Flex.cjs"),u=require("../Portal/Portal.cjs"),c=require("../FocusTrap/FocusTrap.cjs"),x=require("../Box/Box.cjs"),p=e=>e&&e.__esModule?e:{default:e},h=p(i),y=h.default(l.Flex)`
|
|
3
2
|
background: ${({theme:e})=>`${e.colors.neutral800}1F`};
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
`,s=({onClose:e,labelledBy:i,...a})=>(x(!0),o.jsx(q.Portal,{children:o.jsx(c.ModalContext.Provider,{value:e,children:o.jsx(h,{justifyContent:"center",paddingLeft:8,paddingRight:8,position:"fixed",zIndex:4,children:o.jsx(g.FocusTrap,{children:o.jsx(p.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e,children:o.jsx(j,{"aria-labelledby":i,onClick:l=>l.stopPropagation(),background:"neutral0",hasRadius:!0,shadow:"popupShadow",role:"dialog","aria-modal":!0,...a})})})})})}));s.propTypes={labelledBy:r.default.string.isRequired,onClose:r.default.func.isRequired};exports.ModalLayout=s;
|
|
3
|
+
inset: 0;
|
|
4
|
+
`,g=({onClose:e,labelledBy:r,...t})=>(d(!0),o.jsx(u.Portal,{children:o.jsx(a.ModalContext.Provider,{value:e,children:o.jsx(y,{justifyContent:"center",paddingLeft:8,paddingRight:8,position:"fixed",zIndex:4,children:o.jsx(c.FocusTrap,{children:o.jsx(s.DismissibleLayer,{onEscapeKeyDown:e,onPointerDownOutside:e,children:o.jsx(x.Box,{"aria-labelledby":r,"aria-modal":!0,onClick:n=>n.stopPropagation(),background:"neutral0",hasRadius:!0,role:"dialog",shadow:"popupShadow",width:`${830/16}rem`,...t})})})})})}));exports.ModalLayout=g;
|
|
@@ -1,36 +1,16 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import "
|
|
3
|
-
import e from "prop-types";
|
|
4
|
-
import i from "styled-components";
|
|
2
|
+
import a from "styled-components";
|
|
5
3
|
import { ModalContext as d } from "./ModalContext.js";
|
|
6
|
-
import { DismissibleLayer as
|
|
4
|
+
import { DismissibleLayer as n } from "../DismissibleLayer/index.js";
|
|
7
5
|
import l from "../hooks/useLockScroll.js";
|
|
8
|
-
import { Flex as
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
const
|
|
13
|
-
inset: 0;
|
|
6
|
+
import { Flex as p } from "../Flex/Flex.js";
|
|
7
|
+
import { Portal as m } from "../Portal/Portal.js";
|
|
8
|
+
import { FocusTrap as s } from "../FocusTrap/FocusTrap.js";
|
|
9
|
+
import { Box as c } from "../Box/Box.js";
|
|
10
|
+
const u = a(p)`
|
|
14
11
|
background: ${({ theme: r }) => `${r.colors.neutral800}1F`};
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
`, y = ({ onClose: r, labelledBy: t, ...n }) => (l(!0), /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(d.Provider, { value: r, children: /* @__PURE__ */ o(f, { justifyContent: "center", paddingLeft: 8, paddingRight: 8, position: "fixed", zIndex: 4, children: /* @__PURE__ */ o(c, { children: /* @__PURE__ */ o(p, { onEscapeKeyDown: r, onPointerDownOutside: r, children: /* @__PURE__ */ o(
|
|
18
|
-
h,
|
|
19
|
-
{
|
|
20
|
-
"aria-labelledby": t,
|
|
21
|
-
onClick: (a) => a.stopPropagation(),
|
|
22
|
-
background: "neutral0",
|
|
23
|
-
hasRadius: !0,
|
|
24
|
-
shadow: "popupShadow",
|
|
25
|
-
role: "dialog",
|
|
26
|
-
"aria-modal": !0,
|
|
27
|
-
...n
|
|
28
|
-
}
|
|
29
|
-
) }) }) }) }) }));
|
|
30
|
-
y.propTypes = {
|
|
31
|
-
labelledBy: e.string.isRequired,
|
|
32
|
-
onClose: e.func.isRequired
|
|
33
|
-
};
|
|
12
|
+
inset: 0;
|
|
13
|
+
`, P = ({ onClose: r, labelledBy: t, ...i }) => (l(!0), o(m, { children: o(d.Provider, { value: r, children: o(u, { justifyContent: "center", paddingLeft: 8, paddingRight: 8, position: "fixed", zIndex: 4, children: o(s, { children: o(n, { onEscapeKeyDown: r, onPointerDownOutside: r, children: o(c, { "aria-labelledby": t, "aria-modal": !0, onClick: (e) => e.stopPropagation(), background: "neutral0", hasRadius: !0, role: "dialog", shadow: "popupShadow", width: `${830 / 16}rem`, ...i }) }) }) }) }) }));
|
|
34
14
|
export {
|
|
35
|
-
|
|
15
|
+
P as ModalLayout
|
|
36
16
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),l=require("react"),x=require("@internationalized/number"),g=require("@strapi/icons"),v=require("styled-components"),M=require("../helpers/getDefaultLocale.cjs"),h=require("../helpers/keyboardKeys.cjs"),B=require("../hooks/useControllableState.cjs"),E=require("../hooks/useId.cjs"),U=require("../Field/Field.cjs"),H=require("../Flex/Flex.cjs"),O=require("../Field/FieldLabel.cjs"),T=require("../Field/FieldInput.cjs"),N=require("../Icon/Icon.cjs"),z=require("../Field/FieldHint.cjs"),W=require("../Field/FieldError.cjs"),q=r=>r&&r.__esModule?r:{default:r},X=q(l),Y=q(v),y=Y.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
|
+
`,G="",J=X.default.forwardRef(({size:r="M",startAction:I,name:F,hint:w,error:j,label:d,labelAction:D,locale:V,id:C,onValueChange:A,value:f,step:a=1,required:R=!1,disabled:u=!1,..._},k)=>{const K=E.useId(C),m=V||M.getDefaultLocale(),i=l.useRef(new x.NumberParser(m,{style:"decimal"})),c=l.useRef(new x.NumberFormatter(m,{maximumFractionDigits:20})),[o,S]=B.useControllableState({prop(e){const n=String(f);return isNaN(Number(n))||n!==e&&e!==""?e:c.current.format(Number(f))},defaultProp:G,onChange(e){const n=i.current.parse(e??"");A(isNaN(n)?void 0:n)}}),s=e=>{S(String(e))},L=({target:{value:e}})=>{i.current.isValidPartialNumber(e)&&s(e)},b=()=>{if(!o){s(a);return}const e=i.current.parse(o),n=isNaN(e)?a:e+a;s(c.current.format(n))},p=()=>{if(!o){s(-a);return}const e=i.current.parse(o),n=isNaN(e)?-a:e-a;s(c.current.format(n))},P=e=>{if(!u)switch(e.key){case h.KeyboardKeys.DOWN:{e.preventDefault(),p();break}case h.KeyboardKeys.UP:{e.preventDefault(),b();break}}},$=()=>{if(o){const e=i.current.parse(o),n=isNaN(e)?"":c.current.format(e);s(n)}};return t.jsx(U.Field,{name:F,hint:w,error:j,id:K,required:R,children:t.jsxs(H.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[d&&t.jsx(O.FieldLabel,{action:D,children:d}),t.jsx(T.FieldInput,{ref:k,startAction:I,disabled:u,type:"text",inputMode:"decimal",onChange:L,onKeyDown:P,onBlur:$,value:o,size:r,endAction:t.jsxs(t.Fragment,{children:[t.jsx(y,{disabled:u,"aria-hidden":!0,reverse:!0,onClick:b,tabIndex:-1,type:"button","data-testid":"ArrowUp",children:t.jsx(N.Icon,{as:g.CarretDown,color:"neutral500"})}),t.jsx(y,{disabled:u,"aria-hidden":!0,onClick:p,tabIndex:-1,type:"button","data-testid":"ArrowDown",children:t.jsx(N.Icon,{as:g.CarretDown,color:"neutral500"})})]}),..._}),t.jsx(z.FieldHint,{}),t.jsx(W.FieldError,{})]})})});exports.NumberInput=J;
|
|
@@ -1,179 +1,79 @@
|
|
|
1
|
-
import { jsx as n, jsxs as h, Fragment as
|
|
2
|
-
import
|
|
3
|
-
import { NumberParser as
|
|
1
|
+
import { jsx as n, jsxs as h, Fragment as U } from "react/jsx-runtime";
|
|
2
|
+
import _, { useRef as b } from "react";
|
|
3
|
+
import { NumberParser as j, NumberFormatter as E } from "@internationalized/number";
|
|
4
4
|
import { CarretDown as N } from "@strapi/icons";
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import { FieldLabel as X } from "../Field/FieldLabel.js";
|
|
15
|
-
import { FieldInput as Y } from "../Field/FieldInput.js";
|
|
5
|
+
import M from "styled-components";
|
|
6
|
+
import { getDefaultLocale as q } from "../helpers/getDefaultLocale.js";
|
|
7
|
+
import { KeyboardKeys as g } from "../helpers/keyboardKeys.js";
|
|
8
|
+
import { useControllableState as z } from "../hooks/useControllableState.js";
|
|
9
|
+
import { useId as H } from "../hooks/useId.js";
|
|
10
|
+
import { Field as O } from "../Field/Field.js";
|
|
11
|
+
import { Flex as T } from "../Flex/Flex.js";
|
|
12
|
+
import { FieldLabel as W } from "../Field/FieldLabel.js";
|
|
13
|
+
import { FieldInput as X } from "../Field/FieldInput.js";
|
|
16
14
|
import { Icon as w } from "../Icon/Icon.js";
|
|
17
|
-
import { FieldHint as
|
|
18
|
-
import { FieldError as
|
|
19
|
-
const x =
|
|
15
|
+
import { FieldHint as Y } from "../Field/FieldHint.js";
|
|
16
|
+
import { FieldError as G } from "../Field/FieldError.js";
|
|
17
|
+
const x = M.button`
|
|
20
18
|
display: flex;
|
|
21
19
|
height: 1rem;
|
|
22
|
-
align-items: ${({ reverse:
|
|
23
|
-
transform: translateY(${({ reverse:
|
|
24
|
-
cursor: ${({ disabled:
|
|
20
|
+
align-items: ${({ reverse: t }) => t ? "flex-end" : "flex-start"};
|
|
21
|
+
transform: translateY(${({ reverse: t }) => t ? "-2px" : "2px"});
|
|
22
|
+
cursor: ${({ disabled: t }) => t ? "not-allowed" : void 0};
|
|
25
23
|
svg {
|
|
26
24
|
display: block;
|
|
27
25
|
height: ${4 / 16}rem;
|
|
28
|
-
transform: ${({ reverse:
|
|
26
|
+
transform: ${({ reverse: t }) => t ? "rotateX(180deg)" : void 0};
|
|
29
27
|
}
|
|
30
|
-
`,
|
|
31
|
-
({
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
return;
|
|
66
|
-
}
|
|
67
|
-
const e = s.current.parse(a), t = isNaN(e) ? i : e + i;
|
|
68
|
-
l(m.current.format(t));
|
|
69
|
-
}, g = () => {
|
|
70
|
-
if (!a) {
|
|
71
|
-
l(-i);
|
|
72
|
-
return;
|
|
73
|
-
}
|
|
74
|
-
const e = s.current.parse(a), t = isNaN(e) ? -i : e - i;
|
|
75
|
-
l(m.current.format(t));
|
|
76
|
-
};
|
|
77
|
-
return /* @__PURE__ */ n(M, { name: A, hint: V, error: D, id: $, required: R, children: /* @__PURE__ */ h(W, { direction: "column", alignItems: "stretch", gap: 1, children: [
|
|
78
|
-
c && /* @__PURE__ */ n(X, { action: F, children: c }),
|
|
79
|
-
/* @__PURE__ */ n(
|
|
80
|
-
Y,
|
|
81
|
-
{
|
|
82
|
-
ref: O,
|
|
83
|
-
startAction: I,
|
|
84
|
-
disabled: d,
|
|
85
|
-
type: "text",
|
|
86
|
-
inputmode: "decimal",
|
|
87
|
-
onChange: B,
|
|
88
|
-
onKeyDown: (e) => {
|
|
89
|
-
if (!d)
|
|
90
|
-
switch (e.key) {
|
|
91
|
-
case v.DOWN: {
|
|
92
|
-
e.preventDefault(), g();
|
|
93
|
-
break;
|
|
94
|
-
}
|
|
95
|
-
case v.UP: {
|
|
96
|
-
e.preventDefault(), b();
|
|
97
|
-
break;
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
onBlur: () => {
|
|
102
|
-
if (a) {
|
|
103
|
-
const e = s.current.parse(a), t = isNaN(e) ? "" : m.current.format(e);
|
|
104
|
-
l(t);
|
|
105
|
-
}
|
|
106
|
-
},
|
|
107
|
-
value: a,
|
|
108
|
-
size: o,
|
|
109
|
-
endAction: /* @__PURE__ */ h(L, { children: [
|
|
110
|
-
/* @__PURE__ */ n(
|
|
111
|
-
x,
|
|
112
|
-
{
|
|
113
|
-
disabled: d,
|
|
114
|
-
"aria-hidden": !0,
|
|
115
|
-
reverse: !0,
|
|
116
|
-
onClick: b,
|
|
117
|
-
tabIndex: -1,
|
|
118
|
-
type: "button",
|
|
119
|
-
"data-testid": "ArrowUp",
|
|
120
|
-
children: /* @__PURE__ */ n(w, { as: N, color: "neutral500" })
|
|
121
|
-
}
|
|
122
|
-
),
|
|
123
|
-
/* @__PURE__ */ n(
|
|
124
|
-
x,
|
|
125
|
-
{
|
|
126
|
-
disabled: d,
|
|
127
|
-
"aria-hidden": !0,
|
|
128
|
-
onClick: g,
|
|
129
|
-
tabIndex: -1,
|
|
130
|
-
type: "button",
|
|
131
|
-
"data-testid": "ArrowDown",
|
|
132
|
-
children: /* @__PURE__ */ n(w, { as: N, color: "neutral500" })
|
|
133
|
-
}
|
|
134
|
-
)
|
|
135
|
-
] }),
|
|
136
|
-
...K
|
|
28
|
+
`, J = "", pr = _.forwardRef(({ size: t = "M", startAction: y, name: I, hint: F, error: V, label: c, labelAction: D, locale: A, id: C, onValueChange: k, value: d, step: a = 1, required: P = !1, disabled: m = !1, ...R }, $) => {
|
|
29
|
+
const K = H(C), u = A || q(), s = b(new j(u, { style: "decimal" })), l = b(new E(u, { maximumFractionDigits: 20 })), [o, L] = z({
|
|
30
|
+
prop(r) {
|
|
31
|
+
const e = String(d);
|
|
32
|
+
return isNaN(Number(e)) || e !== r && r !== "" ? r : l.current.format(Number(d));
|
|
33
|
+
},
|
|
34
|
+
defaultProp: J,
|
|
35
|
+
onChange(r) {
|
|
36
|
+
const e = s.current.parse(r ?? "");
|
|
37
|
+
k(isNaN(e) ? void 0 : e);
|
|
38
|
+
}
|
|
39
|
+
}), i = (r) => {
|
|
40
|
+
L(String(r));
|
|
41
|
+
}, S = ({ target: { value: r } }) => {
|
|
42
|
+
s.current.isValidPartialNumber(r) && i(r);
|
|
43
|
+
}, f = () => {
|
|
44
|
+
if (!o) {
|
|
45
|
+
i(a);
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
const r = s.current.parse(o), e = isNaN(r) ? a : r + a;
|
|
49
|
+
i(l.current.format(e));
|
|
50
|
+
}, p = () => {
|
|
51
|
+
if (!o) {
|
|
52
|
+
i(-a);
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
const r = s.current.parse(o), e = isNaN(r) ? -a : r - a;
|
|
56
|
+
i(l.current.format(e));
|
|
57
|
+
}, v = (r) => {
|
|
58
|
+
if (!m)
|
|
59
|
+
switch (r.key) {
|
|
60
|
+
case g.DOWN: {
|
|
61
|
+
r.preventDefault(), p();
|
|
62
|
+
break;
|
|
137
63
|
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
)
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
hint:
|
|
150
|
-
|
|
151
|
-
label: void 0,
|
|
152
|
-
labelAction: void 0,
|
|
153
|
-
locale: void 0,
|
|
154
|
-
required: !1,
|
|
155
|
-
size: "M",
|
|
156
|
-
startAction: void 0,
|
|
157
|
-
step: 1,
|
|
158
|
-
value: void 0
|
|
159
|
-
};
|
|
160
|
-
u.propTypes = {
|
|
161
|
-
"aria-label": r.string,
|
|
162
|
-
disabled: r.bool,
|
|
163
|
-
error: r.string,
|
|
164
|
-
hint: r.oneOfType([r.string, r.node, r.arrayOf(r.node)]),
|
|
165
|
-
id: r.string,
|
|
166
|
-
label: r.string,
|
|
167
|
-
labelAction: r.element,
|
|
168
|
-
locale: r.string,
|
|
169
|
-
name: r.string.isRequired,
|
|
170
|
-
onValueChange: r.func.isRequired,
|
|
171
|
-
required: r.bool,
|
|
172
|
-
size: r.oneOf(Object.keys(H.input)),
|
|
173
|
-
startAction: r.element,
|
|
174
|
-
step: r.number,
|
|
175
|
-
value: r.number
|
|
176
|
-
};
|
|
64
|
+
case g.UP: {
|
|
65
|
+
r.preventDefault(), f();
|
|
66
|
+
break;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}, B = () => {
|
|
70
|
+
if (o) {
|
|
71
|
+
const r = s.current.parse(o), e = isNaN(r) ? "" : l.current.format(r);
|
|
72
|
+
i(e);
|
|
73
|
+
}
|
|
74
|
+
};
|
|
75
|
+
return n(O, { name: I, hint: F, error: V, id: K, required: P, children: h(T, { direction: "column", alignItems: "stretch", gap: 1, children: [c && n(W, { action: D, children: c }), n(X, { ref: $, startAction: y, disabled: m, type: "text", inputMode: "decimal", onChange: S, onKeyDown: v, onBlur: B, value: o, size: t, endAction: h(U, { children: [n(x, { disabled: m, "aria-hidden": !0, reverse: !0, onClick: f, tabIndex: -1, type: "button", "data-testid": "ArrowUp", children: n(w, { as: N, color: "neutral500" }) }), n(x, { disabled: m, "aria-hidden": !0, onClick: p, tabIndex: -1, type: "button", "data-testid": "ArrowDown", children: n(w, { as: N, color: "neutral500" }) })] }), ...R }), n(Y, {}), n(G, {})] }) });
|
|
76
|
+
});
|
|
177
77
|
export {
|
|
178
|
-
|
|
78
|
+
pr as NumberInput
|
|
179
79
|
};
|
|
@@ -1,5 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
-
& > * + * {
|
|
3
|
-
margin-left: ${({theme:e})=>e.spaces[1]};
|
|
4
|
-
}
|
|
5
|
-
`,o=({children:e,label:n,activePage:t,pageCount:r})=>{const c=l.useMemo(()=>({activePage:t,pageCount:r}),[t,r]);return i.jsx(P.PaginationContext.Provider,{value:c,children:i.jsx(j,{"aria-label":n,children:i.jsx(x,{as:"ul",children:l.Children.map(e,(d,f)=>i.jsx("li",{children:d},f))})})})};o.defaultProps={label:"pagination"};o.propTypes={activePage:a.default.number.isRequired,children:a.default.node.isRequired,label:a.default.string,pageCount:a.default.number.isRequired};exports.Pagination=o;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),l=require("react"),u=require("./PaginationContext.cjs"),d=require("../Box/Box.cjs"),x=require("../Flex/Flex.cjs");function g(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const r=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(n,t,r.get?r:{enumerable:!0,get:()=>e[t]})}}return n.default=e,Object.freeze(n)}const i=g(l),f=({children:e,label:n="Pagination",activePage:t,pageCount:r})=>{const a=i.useMemo(()=>({activePage:t,pageCount:r}),[t,r]);return o.jsx(u.PaginationContext.Provider,{value:a,children:o.jsx(d.Box,{"aria-label":n,as:"nav",children:o.jsx(x.Flex,{as:"ol",gap:1,children:i.Children.map(e,(c,s)=>o.jsx("li",{children:c},s))})})})};exports.Pagination=f;
|