@strapi/design-system 1.7.4-alpha.0 → 1.7.4
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/Combobox/Combobox.cjs +11 -11
- package/dist/Combobox/Combobox.js +55 -49
- package/dist/Divider/Divider.cjs +2 -2
- package/dist/Divider/Divider.js +6 -16
- package/dist/EmptyStateLayout/EmptyStateLayout.cjs +2 -7
- package/dist/EmptyStateLayout/EmptyStateLayout.js +7 -29
- package/dist/Main/Main.cjs +2 -2
- package/dist/Main/Main.js +6 -13
- package/dist/Main/SkipToContent.cjs +4 -7
- package/dist/Main/SkipToContent.js +6 -26
- package/dist/Popover/Popover.cjs +3 -3
- package/dist/Popover/Popover.js +34 -32
- package/dist/Select/MultiSelect.cjs +5 -5
- package/dist/Select/MultiSelect.js +40 -39
- package/dist/Select/SingleSelect.cjs +1 -1
- package/dist/Select/SingleSelect.js +29 -28
- package/dist/SimpleMenu/SimpleMenu.cjs +5 -5
- package/dist/SimpleMenu/SimpleMenu.js +1 -1
- package/dist/Tabs/useTabsFocus.cjs +1 -1
- package/dist/Tabs/useTabsFocus.js +1 -1
- package/dist/helpers/strings.cjs +1 -0
- package/dist/helpers/strings.js +4 -0
- package/dist/hooks/useControllableState.cjs +1 -1
- package/dist/hooks/useControllableState.js +1 -1
- package/dist/hooks/useIntersection.cjs +1 -1
- package/dist/hooks/useIntersection.js +1 -1
- package/dist/hooks/useResizeObserver.cjs +1 -1
- package/dist/hooks/useResizeObserver.js +1 -1
- package/dist/v2/SimpleMenu/SimpleMenu.cjs +1 -1
- package/dist/v2/SimpleMenu/SimpleMenu.js +18 -17
- package/package.json +4 -5
- package/dist/helpers/escapeSelector.cjs +0 -1
- package/dist/helpers/escapeSelector.js +0 -4
|
@@ -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"),pe=require("react"),P=require("@strapi/icons"),n=require("@strapi/ui-primitives"),be=require("styled-components"),xe=require("../helpers/strings.cjs"),j=require("../hooks/useControllableState.cjs"),E=require("../hooks/useId.cjs"),fe=require("../hooks/useIntersection.cjs"),ge=require("../themes/utils.cjs"),me=require("../Loader/Loader.cjs"),y=require("../Box/Box.cjs"),d=require("../Typography/Typography.cjs"),Ce=require("../Field/Field.cjs"),h=require("../Flex/Flex.cjs"),$e=require("../Field/FieldLabel.cjs"),je=require("../Field/FieldHint.cjs"),ye=require("../Field/FieldError.cjs"),Ie=e=>e&&e.__esModule?e:{default:e};function we(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(r,l,a.get?a:{enumerable:!0,get:()=>e[l]})}}return r.default=e,Object.freeze(r)}const p=we(pe),s=Ie(be),z=({children:e,clearLabel:r="clear",creatable:l=!1,createMessage:a=c=>`Create "${c}"`,defaultFilterValue:x,defaultTextValue:f,defaultOpen:D=!1,open:H,onOpenChange:L,disabled:g=!1,error:m,filterValue:M,hasMoreItems:N=!1,hint:W,id:U,label:A,labelAction:G,loading:C=!1,loadingMessage:J="Loading content...",noOptionsMessage:K=()=>"No results found",onChange:I,onClear:$,onCreateOption:w,onFilterValueChange:Q,onInputChange:q,onTextValueChange:X,onLoadMore:F,placeholder:Y="Select or enter a value",required:T=!1,startIcon:v,textValue:Z,value:R})=>{const[c,ee]=j.useControllableState({prop:H,defaultProp:D,onChange:L}),[i,V]=j.useControllableState({prop:Z,defaultProp:f,onChange:X}),[oe,O]=j.useControllableState({prop:M,defaultProp:x,onChange:Q}),k=p.useRef(null),S=p.useRef(null),re=p.useRef(null),u=E.useId(U),te=t=>{$&&!g&&(V(""),O(""),$(t),S.current.focus())},ne=t=>{ee(t)},le=t=>{V(t)},se=t=>{O(t)},ae=t=>{q&&q(t)},ie=t=>{I&&I(t)},de=E.useId(),B=`intersection-${xe.stripReactIdOfColon(de)}`,ce=t=>{F&&N&&!C&&F(t)},_=()=>{w&&i&&w(i)};fe.useIntersection(k,ce,{selectorToWatch:`#${B}`,skipWhen:!c});const ue=`${u}-hint`,he=`${u}-error`;return o.jsx(Ce.Field,{hint:W,error:m,id:u,required:T,children:o.jsxs(h.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx($e.FieldLabel,{action:G,children:A}),o.jsxs(n.Combobox.Root,{autocomplete:l?"list":"both",open:c,onOpenChange:ne,onTextValueChange:le,textValue:i,allowCustomValue:!0,disabled:g,required:T,value:R===null?void 0:R,onValueChange:ie,filterValue:oe,onFilterValueChange:se,children:[o.jsxs(Te,{$hasError:!!m,children:[o.jsxs(h.Flex,{flex:"1",as:"span",gap:3,children:[v?o.jsx(y.Box,{as:"span","aria-hidden":!0,children:v}):null,o.jsx(ve,{placeholder:Y,id:u,"aria-invalid":!!m,"aria-labelledby":`${ue} ${he}`,onChange:ae,ref:S})]}),o.jsxs(h.Flex,{as:"span",gap:3,children:[i&&$?o.jsx(Fe,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:te,"aria-disabled":g,"aria-label":r,title:r,ref:re,children:o.jsx(P.Cross,{})}):null,o.jsx(Re,{children:o.jsx(P.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(Ve,{sideOffset:4,children:o.jsxs(Oe,{ref:k,children:[e,l?o.jsx(n.Combobox.CreateItem,{onPointerUp:_,onClick:_,asChild:!0,children:o.jsx(b,{children:o.jsx(d.Typography,{children:a(i??"")})})}):null,!l&&!C?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(b,{$hasHover:!1,children:o.jsx(d.Typography,{children:K(i??"")})})}):null,C?o.jsx(h.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(me.Loader,{small:!0,children:J})}):null,o.jsx(y.Box,{id:B,width:"100%",height:"1px"})]})})})]}),o.jsx(je.FieldHint,{}),o.jsx(ye.FieldError,{})]})})},qe=e=>o.jsx(z,{...e,creatable:!0}),Fe=s.default(y.Box)`
|
|
2
2
|
border: none;
|
|
3
3
|
|
|
4
4
|
svg {
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
svg path {
|
|
10
10
|
fill: ${({theme:e})=>e.colors.neutral600};
|
|
11
11
|
}
|
|
12
|
-
`,
|
|
12
|
+
`,Te=s.default(n.Combobox.Trigger)`
|
|
13
13
|
position: relative;
|
|
14
14
|
border: 1px solid ${({theme:e,$hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
|
|
15
15
|
padding-right: ${({theme:e})=>e.spaces[3]};
|
|
@@ -33,8 +33,8 @@
|
|
|
33
33
|
outline: none;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
|
-
${({theme:e,$hasError:r})=>
|
|
37
|
-
`,
|
|
36
|
+
${({theme:e,$hasError:r})=>ge.inputFocusStyle()({theme:e,hasError:r})};
|
|
37
|
+
`,ve=s.default(n.Combobox.TextInput)`
|
|
38
38
|
width: 100%;
|
|
39
39
|
font-size: ${14/16}rem;
|
|
40
40
|
color: ${({theme:e})=>e.colors.neutral800};
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
&[aria-disabled='true'] {
|
|
50
50
|
cursor: inherit;
|
|
51
51
|
}
|
|
52
|
-
`,
|
|
52
|
+
`,Re=s.default(n.Combobox.Icon)`
|
|
53
53
|
& > svg {
|
|
54
54
|
width: ${6/16}rem;
|
|
55
55
|
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
&[aria-disabled='true'] {
|
|
62
62
|
cursor: inherit;
|
|
63
63
|
}
|
|
64
|
-
`,
|
|
64
|
+
`,Ve=s.default(n.Combobox.Content)`
|
|
65
65
|
background: ${({theme:e})=>e.colors.neutral0};
|
|
66
66
|
box-shadow: ${({theme:e})=>e.shadows.filterShadow};
|
|
67
67
|
border: 1px solid ${({theme:e})=>e.colors.neutral150};
|
|
@@ -70,9 +70,9 @@
|
|
|
70
70
|
/* This is from the design-system figma file. */
|
|
71
71
|
max-height: 15rem;
|
|
72
72
|
z-index: ${({theme:e})=>e.zIndices[1]};
|
|
73
|
-
`,
|
|
73
|
+
`,Oe=s.default(n.Combobox.Viewport)`
|
|
74
74
|
padding: ${({theme:e})=>e.spaces[1]};
|
|
75
|
-
`,
|
|
75
|
+
`,ke=p.forwardRef(({children:e,value:r,disabled:l,textValue:a,...x},f)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:l,textValue:a,children:o.jsx(b,{ref:f,...x,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(d.Typography,{children:e})})})})),b=s.default.div`
|
|
76
76
|
width: 100%;
|
|
77
77
|
border: none;
|
|
78
78
|
text-align: left;
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
&[data-selected] {
|
|
86
86
|
background-color: ${({theme:e})=>e.colors.primary100};
|
|
87
87
|
|
|
88
|
-
${
|
|
88
|
+
${d.Typography} {
|
|
89
89
|
color: ${({theme:e})=>e.colors.primary600};
|
|
90
90
|
font-weight: bold;
|
|
91
91
|
}
|
|
@@ -98,9 +98,9 @@
|
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
&[data-highlighted] {
|
|
101
|
-
${
|
|
101
|
+
${d.Typography} {
|
|
102
102
|
color: ${({theme:e})=>e.colors.primary600};
|
|
103
103
|
font-weight: bold;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
|
-
`;exports.Combobox=
|
|
106
|
+
`;exports.Combobox=z;exports.CreatableCombobox=qe;exports.Option=ke;exports.OptionBox=b;
|
|
@@ -1,56 +1,62 @@
|
|
|
1
1
|
import { jsx as r, jsxs as a } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
3
|
-
import { Cross as
|
|
2
|
+
import * as p from "react";
|
|
3
|
+
import { Cross as he, CarretDown as pe } from "@strapi/icons";
|
|
4
4
|
import { Combobox as t } from "@strapi/ui-primitives";
|
|
5
5
|
import l from "styled-components";
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
6
|
+
import { stripReactIdOfColon as fe } from "../helpers/strings.js";
|
|
7
|
+
import { useControllableState as I } from "../hooks/useControllableState.js";
|
|
8
|
+
import { useId as q } from "../hooks/useId.js";
|
|
9
|
+
import { useIntersection as me } from "../hooks/useIntersection.js";
|
|
10
|
+
import { inputFocusStyle as ge } from "../themes/utils.js";
|
|
11
|
+
import { Loader as be } from "../Loader/Loader.js";
|
|
11
12
|
import { Box as w } from "../Box/Box.js";
|
|
12
|
-
import { Typography as
|
|
13
|
-
import { Field as
|
|
13
|
+
import { Typography as d } from "../Typography/Typography.js";
|
|
14
|
+
import { Field as $e } from "../Field/Field.js";
|
|
14
15
|
import { Flex as h } from "../Flex/Flex.js";
|
|
15
|
-
import { FieldLabel as
|
|
16
|
-
import { FieldHint as
|
|
17
|
-
import { FieldError as
|
|
18
|
-
const
|
|
19
|
-
const [
|
|
20
|
-
prop:
|
|
16
|
+
import { FieldLabel as Ce } from "../Field/FieldLabel.js";
|
|
17
|
+
import { FieldHint as xe } from "../Field/FieldHint.js";
|
|
18
|
+
import { FieldError as Ie } from "../Field/FieldError.js";
|
|
19
|
+
const we = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMessage: f = (c) => `Create "${c}"`, defaultFilterValue: m, defaultTextValue: g, defaultOpen: D = !1, open: H, onOpenChange: N, disabled: b = !1, error: $, filterValue: W, hasMoreItems: L = !1, hint: U, id: A, label: G, labelAction: J, loading: C = !1, loadingMessage: K = "Loading content...", noOptionsMessage: Q = () => "No results found", onChange: V, onClear: x, onCreateOption: v, onFilterValueChange: X, onInputChange: y, onTextValueChange: Y, onLoadMore: k, placeholder: Z = "Select or enter a value", required: T = !1, startIcon: F, textValue: _, value: O }) => {
|
|
20
|
+
const [c, M] = I({
|
|
21
|
+
prop: H,
|
|
22
|
+
defaultProp: D,
|
|
23
|
+
onChange: N
|
|
24
|
+
}), [i, B] = I({
|
|
25
|
+
prop: _,
|
|
26
|
+
defaultProp: g,
|
|
27
|
+
onChange: Y
|
|
28
|
+
}), [ee, P] = I({
|
|
29
|
+
prop: W,
|
|
21
30
|
defaultProp: m,
|
|
22
|
-
onChange:
|
|
23
|
-
}),
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
}, _ = (o) => {
|
|
29
|
-
Q(o);
|
|
30
|
-
}, M = (o) => {
|
|
31
|
-
S(o);
|
|
32
|
-
}, ee = (o) => {
|
|
31
|
+
onChange: X
|
|
32
|
+
}), S = p.useRef(null), j = p.useRef(null), re = p.useRef(null), u = q(A), oe = (o) => {
|
|
33
|
+
x && !b && (B(""), P(""), x(o), j.current.focus());
|
|
34
|
+
}, te = (o) => {
|
|
35
|
+
M(o);
|
|
36
|
+
}, ne = (o) => {
|
|
33
37
|
B(o);
|
|
34
|
-
},
|
|
38
|
+
}, le = (o) => {
|
|
39
|
+
P(o);
|
|
40
|
+
}, ie = (o) => {
|
|
35
41
|
y && y(o);
|
|
36
|
-
},
|
|
42
|
+
}, ae = (o) => {
|
|
37
43
|
V && V(o);
|
|
38
|
-
}, E = `intersection-${
|
|
39
|
-
|
|
40
|
-
},
|
|
44
|
+
}, se = q(), E = `intersection-${fe(se)}`, de = (o) => {
|
|
45
|
+
k && L && !C && k(o);
|
|
46
|
+
}, z = () => {
|
|
41
47
|
v && i && v(i);
|
|
42
48
|
};
|
|
43
|
-
|
|
49
|
+
me(S, de, {
|
|
44
50
|
selectorToWatch: `#${E}`,
|
|
45
51
|
/**
|
|
46
52
|
* We need to know when the select is open because only then will viewportRef
|
|
47
53
|
* not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
|
|
48
54
|
*/
|
|
49
|
-
skipWhen: !
|
|
55
|
+
skipWhen: !c
|
|
50
56
|
});
|
|
51
|
-
const
|
|
52
|
-
return r(
|
|
53
|
-
},
|
|
57
|
+
const ce = `${u}-hint`, ue = `${u}-error`;
|
|
58
|
+
return r($e, { hint: U, error: $, id: u, required: T, children: a(h, { direction: "column", alignItems: "stretch", gap: 1, children: [r(Ce, { action: J, children: G }), a(t.Root, { autocomplete: s ? "list" : "both", open: c, onOpenChange: te, onTextValueChange: ne, textValue: i, allowCustomValue: !0, disabled: b, required: T, value: O === null ? void 0 : O, onValueChange: ae, filterValue: ee, onFilterValueChange: le, children: [a(Ve, { $hasError: !!$, children: [a(h, { flex: "1", as: "span", gap: 3, children: [F ? r(w, { as: "span", "aria-hidden": !0, children: F }) : null, r(ve, { placeholder: Z, id: u, "aria-invalid": !!$, "aria-labelledby": `${ce} ${ue}`, onChange: ie, ref: j })] }), a(h, { as: "span", gap: 3, children: [i && x ? r(Re, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: oe, "aria-disabled": b, "aria-label": n, title: n, ref: re, children: r(he, {}) }) : null, r(ye, { children: r(pe, {}) })] })] }), r(t.Portal, { children: r(ke, { sideOffset: 4, children: a(Te, { ref: S, children: [e, s ? r(t.CreateItem, { onPointerUp: z, onClick: z, asChild: !0, children: r(R, { children: r(d, { children: f(i ?? "") }) }) }) : null, !s && !C ? r(t.NoValueFound, { asChild: !0, children: r(R, { $hasHover: !1, children: r(d, { children: Q(i ?? "") }) }) }) : null, C ? r(h, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(be, { small: !0, children: K }) }) : null, r(w, { id: E, width: "100%", height: "1px" })] }) }) })] }), r(xe, {}), r(Ie, {})] }) });
|
|
59
|
+
}, Je = (e) => r(we, { ...e, creatable: !0 }), Re = l(w)`
|
|
54
60
|
border: none;
|
|
55
61
|
|
|
56
62
|
svg {
|
|
@@ -61,7 +67,7 @@ const ge = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
|
|
|
61
67
|
svg path {
|
|
62
68
|
fill: ${({ theme: e }) => e.colors.neutral600};
|
|
63
69
|
}
|
|
64
|
-
`,
|
|
70
|
+
`, Ve = l(t.Trigger)`
|
|
65
71
|
position: relative;
|
|
66
72
|
border: 1px solid ${({ theme: e, $hasError: n }) => n ? e.colors.danger600 : e.colors.neutral200};
|
|
67
73
|
padding-right: ${({ theme: e }) => e.spaces[3]};
|
|
@@ -85,8 +91,8 @@ const ge = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
|
|
|
85
91
|
outline: none;
|
|
86
92
|
}
|
|
87
93
|
|
|
88
|
-
${({ theme: e, $hasError: n }) =>
|
|
89
|
-
`,
|
|
94
|
+
${({ theme: e, $hasError: n }) => ge()({ theme: e, hasError: n })};
|
|
95
|
+
`, ve = l(t.TextInput)`
|
|
90
96
|
width: 100%;
|
|
91
97
|
font-size: ${14 / 16}rem;
|
|
92
98
|
color: ${({ theme: e }) => e.colors.neutral800};
|
|
@@ -101,7 +107,7 @@ const ge = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
|
|
|
101
107
|
&[aria-disabled='true'] {
|
|
102
108
|
cursor: inherit;
|
|
103
109
|
}
|
|
104
|
-
`,
|
|
110
|
+
`, ye = l(t.Icon)`
|
|
105
111
|
& > svg {
|
|
106
112
|
width: ${6 / 16}rem;
|
|
107
113
|
|
|
@@ -113,7 +119,7 @@ const ge = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
|
|
|
113
119
|
&[aria-disabled='true'] {
|
|
114
120
|
cursor: inherit;
|
|
115
121
|
}
|
|
116
|
-
`,
|
|
122
|
+
`, ke = l(t.Content)`
|
|
117
123
|
background: ${({ theme: e }) => e.colors.neutral0};
|
|
118
124
|
box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
|
|
119
125
|
border: 1px solid ${({ theme: e }) => e.colors.neutral150};
|
|
@@ -122,9 +128,9 @@ const ge = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
|
|
|
122
128
|
/* This is from the design-system figma file. */
|
|
123
129
|
max-height: 15rem;
|
|
124
130
|
z-index: ${({ theme: e }) => e.zIndices[1]};
|
|
125
|
-
`,
|
|
131
|
+
`, Te = l(t.Viewport)`
|
|
126
132
|
padding: ${({ theme: e }) => e.spaces[1]};
|
|
127
|
-
`,
|
|
133
|
+
`, Ke = p.forwardRef(({ children: e, value: n, disabled: s, textValue: f, ...m }, g) => r(t.ComboboxItem, { asChild: !0, value: n, disabled: s, textValue: f, children: r(R, { ref: g, ...m, children: r(t.ItemText, { asChild: !0, children: r(d, { children: e }) }) }) })), R = l.div`
|
|
128
134
|
width: 100%;
|
|
129
135
|
border: none;
|
|
130
136
|
text-align: left;
|
|
@@ -137,7 +143,7 @@ const ge = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
|
|
|
137
143
|
&[data-selected] {
|
|
138
144
|
background-color: ${({ theme: e }) => e.colors.primary100};
|
|
139
145
|
|
|
140
|
-
${
|
|
146
|
+
${d} {
|
|
141
147
|
color: ${({ theme: e }) => e.colors.primary600};
|
|
142
148
|
font-weight: bold;
|
|
143
149
|
}
|
|
@@ -150,15 +156,15 @@ const ge = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMes
|
|
|
150
156
|
}
|
|
151
157
|
|
|
152
158
|
&[data-highlighted] {
|
|
153
|
-
${
|
|
159
|
+
${d} {
|
|
154
160
|
color: ${({ theme: e }) => e.colors.primary600};
|
|
155
161
|
font-weight: bold;
|
|
156
162
|
}
|
|
157
163
|
}
|
|
158
164
|
`;
|
|
159
165
|
export {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
166
|
+
we as Combobox,
|
|
167
|
+
Je as CreatableCombobox,
|
|
168
|
+
Ke as Option,
|
|
169
|
+
R as OptionBox
|
|
164
170
|
};
|
package/dist/Divider/Divider.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),n=require("styled-components"),i=require("../Box/Box.cjs"),o=e=>e&&e.__esModule?e:{default:e},s=o(n),u=s.default(i.Box)`
|
|
2
2
|
height: 1px;
|
|
3
3
|
border: none;
|
|
4
4
|
/* If contained in a Flex parent we want to prevent the Divider to shink */
|
|
5
5
|
flex-shrink: 0;
|
|
6
6
|
${({unsetMargin:e})=>e?"margin: 0;":""}
|
|
7
|
-
`,
|
|
7
|
+
`,a=({unsetMargin:e=!0,...t})=>r.jsx(u,{...t,background:"neutral150",as:"hr",unsetMargin:e});exports.Divider=a;
|
package/dist/Divider/Divider.js
CHANGED
|
@@ -1,23 +1,13 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import "
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
import { Box as p } from "../Box/Box.js";
|
|
6
|
-
const a = i(p)`
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import n from "styled-components";
|
|
3
|
+
import { Box as i } from "../Box/Box.js";
|
|
4
|
+
const o = n(i)`
|
|
7
5
|
height: 1px;
|
|
8
6
|
border: none;
|
|
9
7
|
/* If contained in a Flex parent we want to prevent the Divider to shink */
|
|
10
8
|
flex-shrink: 0;
|
|
11
9
|
${({ unsetMargin: r }) => r ? "margin: 0;" : ""}
|
|
12
|
-
`,
|
|
13
|
-
e.defaultProps = {
|
|
14
|
-
background: "neutral150",
|
|
15
|
-
unsetMargin: !0
|
|
16
|
-
};
|
|
17
|
-
e.propTypes = {
|
|
18
|
-
background: o.string,
|
|
19
|
-
unsetMargin: o.bool
|
|
20
|
-
};
|
|
10
|
+
`, d = ({ unsetMargin: r = !0, ...e }) => t(o, { ...e, background: "neutral150", as: "hr", unsetMargin: r });
|
|
21
11
|
export {
|
|
22
|
-
|
|
12
|
+
d as Divider
|
|
23
13
|
};
|
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
2
|
-
display: flex;
|
|
3
|
-
flex-direction: column;
|
|
4
|
-
align-items: center;
|
|
5
|
-
text-align: center;
|
|
6
|
-
`,g=d.default(o.Box)`
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("styled-components"),r=require("../Box/Box.cjs"),s=require("../Flex/Flex.cjs"),l=require("../Typography/Typography.cjs"),u=t=>t&&t.__esModule?t:{default:t},c=u(i),p=c.default(r.Box)`
|
|
7
2
|
svg {
|
|
8
3
|
height: ${88/16}rem;
|
|
9
4
|
}
|
|
10
|
-
`,
|
|
5
|
+
`,y=({icon:t,content:o,action:n,hasRadius:a=!0,shadow:d="tableShadow"})=>e.jsxs(s.Flex,{alignItems:"center",direction:"column",padding:11,background:"neutral0",hasRadius:a,shadow:d,children:[e.jsx(p,{paddingBottom:6,"aria-hidden":!0,children:t}),e.jsx(r.Box,{paddingBottom:4,children:e.jsx(l.Typography,{variant:"delta",as:"p",textAlign:"center",textColor:"neutral600",children:o})}),n]});exports.EmptyStateLayout=y;
|
|
@@ -1,35 +1,13 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import "
|
|
3
|
-
import
|
|
4
|
-
import
|
|
5
|
-
import { Box as o } from "../Box/Box.js";
|
|
1
|
+
import { jsxs as d, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import m from "styled-components";
|
|
3
|
+
import { Box as r } from "../Box/Box.js";
|
|
4
|
+
import { Flex as p } from "../Flex/Flex.js";
|
|
6
5
|
import { Typography as l } from "../Typography/Typography.js";
|
|
7
|
-
const c = r
|
|
8
|
-
display: flex;
|
|
9
|
-
flex-direction: column;
|
|
10
|
-
align-items: center;
|
|
11
|
-
text-align: center;
|
|
12
|
-
`, h = r(o)`
|
|
6
|
+
const c = m(r)`
|
|
13
7
|
svg {
|
|
14
8
|
height: ${88 / 16}rem;
|
|
15
9
|
}
|
|
16
|
-
`,
|
|
17
|
-
/* @__PURE__ */ e(h, { paddingBottom: 6, "aria-hidden": !0, children: a }),
|
|
18
|
-
/* @__PURE__ */ e(o, { paddingBottom: 4, children: /* @__PURE__ */ e(l, { variant: "delta", as: "p", textColor: "neutral600", children: n }) }),
|
|
19
|
-
d
|
|
20
|
-
] });
|
|
21
|
-
i.defaultProps = {
|
|
22
|
-
action: void 0,
|
|
23
|
-
hasRadius: !0,
|
|
24
|
-
shadow: "tableShadow"
|
|
25
|
-
};
|
|
26
|
-
i.propTypes = {
|
|
27
|
-
action: t.node,
|
|
28
|
-
content: t.string.isRequired,
|
|
29
|
-
hasRadius: t.bool,
|
|
30
|
-
icon: t.node.isRequired,
|
|
31
|
-
shadow: t.string
|
|
32
|
-
};
|
|
10
|
+
`, y = ({ icon: e, content: o, action: a, hasRadius: n = !0, shadow: i = "tableShadow" }) => d(p, { alignItems: "center", direction: "column", padding: 11, background: "neutral0", hasRadius: n, shadow: i, children: [t(c, { paddingBottom: 6, "aria-hidden": !0, children: e }), t(r, { paddingBottom: 4, children: t(l, { variant: "delta", as: "p", textAlign: "center", textColor: "neutral600", children: o }) }), a] });
|
|
33
11
|
export {
|
|
34
|
-
|
|
12
|
+
y as EmptyStateLayout
|
|
35
13
|
};
|
package/dist/Main/Main.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),o=require("styled-components"),i=require("../Box/Box.cjs"),a=e=>e&&e.__esModule?e:{default:e},l=a(o),s=l.default(i.Box)`
|
|
2
2
|
// To prevent global outline on focus visible to force an outline when Main is focused
|
|
3
3
|
&:focus-visible {
|
|
4
4
|
outline: none;
|
|
5
5
|
}
|
|
6
|
-
`,
|
|
6
|
+
`,u=({labelledBy:e="main-content-title",...t})=>n.jsx(s,{"aria-labelledby":e,as:"main",id:"main-content",tabIndex:-1,...t});exports.Main=u;
|
package/dist/Main/Main.js
CHANGED
|
@@ -1,19 +1,12 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import "
|
|
3
|
-
import t from "
|
|
4
|
-
|
|
5
|
-
const a = l.main`
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import i from "styled-components";
|
|
3
|
+
import { Box as t } from "../Box/Box.js";
|
|
4
|
+
const a = i(t)`
|
|
6
5
|
// To prevent global outline on focus visible to force an outline when Main is focused
|
|
7
6
|
&:focus-visible {
|
|
8
7
|
outline: none;
|
|
9
8
|
}
|
|
10
|
-
`,
|
|
11
|
-
e.defaultProps = {
|
|
12
|
-
labelledBy: void 0
|
|
13
|
-
};
|
|
14
|
-
e.propTypes = {
|
|
15
|
-
labelledBy: t.string
|
|
16
|
-
};
|
|
9
|
+
`, m = ({ labelledBy: o = "main-content-title", ...n }) => e(a, { "aria-labelledby": o, as: "main", id: "main-content", tabIndex: -1, ...n });
|
|
17
10
|
export {
|
|
18
|
-
|
|
11
|
+
m as Main
|
|
19
12
|
};
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("styled-components"),n=require("../Box/Box.cjs"),s=t=>t&&t.__esModule?t:{default:t},r=s(o),a=r.default(n.Box)`
|
|
2
2
|
text-decoration: none;
|
|
3
|
-
z-index: 9999;
|
|
4
|
-
left: -100%;
|
|
5
|
-
top: -100%;
|
|
6
3
|
|
|
7
4
|
&:focus {
|
|
8
|
-
left: ${({theme:
|
|
9
|
-
top: ${({theme:
|
|
5
|
+
left: ${({theme:t})=>t.spaces[3]};
|
|
6
|
+
top: ${({theme:t})=>t.spaces[3]};
|
|
10
7
|
}
|
|
11
|
-
`,
|
|
8
|
+
`,u=({children:t})=>e.jsx(a,{as:"a",href:"#main-content",background:"primary600",color:"neutral0",left:"-100%",padding:3,position:"absolute",top:"-100%",hasRadius:!0,zIndex:9999,children:t});exports.SkipToContent=u;
|
|
@@ -1,34 +1,14 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import "
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
import { Box as n } from "../Box/Box.js";
|
|
6
|
-
const p = e(n)`
|
|
1
|
+
import { jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import r from "styled-components";
|
|
3
|
+
import { Box as e } from "../Box/Box.js";
|
|
4
|
+
const n = r(e)`
|
|
7
5
|
text-decoration: none;
|
|
8
|
-
z-index: 9999;
|
|
9
|
-
left: -100%;
|
|
10
|
-
top: -100%;
|
|
11
6
|
|
|
12
7
|
&:focus {
|
|
13
8
|
left: ${({ theme: o }) => o.spaces[3]};
|
|
14
9
|
top: ${({ theme: o }) => o.spaces[3]};
|
|
15
10
|
}
|
|
16
|
-
`,
|
|
17
|
-
p,
|
|
18
|
-
{
|
|
19
|
-
as: "a",
|
|
20
|
-
href: "#main-content",
|
|
21
|
-
background: "primary600",
|
|
22
|
-
color: "neutral0",
|
|
23
|
-
padding: 3,
|
|
24
|
-
position: "absolute",
|
|
25
|
-
hasRadius: !0,
|
|
26
|
-
children: o
|
|
27
|
-
}
|
|
28
|
-
);
|
|
29
|
-
i.propTypes = {
|
|
30
|
-
children: t.node.isRequired
|
|
31
|
-
};
|
|
11
|
+
`, p = ({ children: o }) => t(n, { as: "a", href: "#main-content", background: "primary600", color: "neutral0", left: "-100%", padding: 3, position: "absolute", top: "-100%", hasRadius: !0, zIndex: 9999, children: o });
|
|
32
12
|
export {
|
|
33
|
-
|
|
13
|
+
p as SkipToContent
|
|
34
14
|
};
|
package/dist/Popover/Popover.cjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),j=require("react"),a=require("@floating-ui/react-dom"),O=require("styled-components"),f=require("../helpers/strings.cjs"),_=require("../hooks/useId.cjs"),k=require("../hooks/useIntersection.cjs"),d=require("../Box/Box.cjs"),S=require("../Portal/Portal.cjs"),v=e=>e&&e.__esModule?e:{default:e};function q(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,o.get?o:{enumerable:!0,get:()=>e[t]})}}return r.default=e,Object.freeze(r)}const l=q(j),p=v(O),R=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],$=p.default(d.Box)`
|
|
2
2
|
box-shadow: ${({theme:e})=>e.shadows.filterShadow};
|
|
3
3
|
z-index: ${({theme:e})=>e.zIndices[0]};
|
|
4
4
|
border: 1px solid ${({theme:e})=>e.colors.neutral150};
|
|
5
5
|
background: ${({theme:e})=>e.colors.neutral0};
|
|
6
|
-
`,
|
|
6
|
+
`,b=({source:e,children:r,spacing:t=0,fullWidth:o=!1,placement:n="bottom-start",centered:s=!1,...c})=>{const[g,m]=l.useState(void 0),{x,y:w,reference:u,floating:P,strategy:y}=a.useFloating({strategy:"fixed",placement:s?"bottom":n,middleware:[a.offset({mainAxis:t}),a.shift(),a.flip()],whileElementsMounted:a.autoUpdate});return l.useLayoutEffect(()=>{u(e.current)},[e,u]),l.useLayoutEffect(()=>{o&&m(e.current.offsetWidth)},[o,e]),i.jsx($,{ref:P,style:{left:x,top:w,position:y,width:g||void 0},hasRadius:!0,background:"neutral0",padding:1,...c,children:r})},h=({children:e,intersectionId:r,onReachEnd:t,...o})=>{const n=l.useRef(null),s=_.useId();return k.useIntersection(n,t??(()=>{}),{selectorToWatch:`#${f.stripReactIdOfColon(s)}`,skipWhen:!r||!t}),i.jsxs(I,{ref:n,...o,children:[e,r&&t&&i.jsx(d.Box,{id:f.stripReactIdOfColon(s),width:"100%",height:"1px"})]})},I=p.default(d.Box)`
|
|
7
7
|
// 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
|
|
8
8
|
max-height: ${3*5}rem;
|
|
9
9
|
overflow-y: auto;
|
|
@@ -23,4 +23,4 @@
|
|
|
23
23
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
24
24
|
margin-right: 10px;
|
|
25
25
|
}
|
|
26
|
-
`,E=({children:e,source:
|
|
26
|
+
`,E=({children:e,source:r,spacing:t,fullWidth:o,placement:n,centered:s,...c})=>i.jsx(S.Portal,{children:i.jsx(b,{source:r,spacing:t,fullWidth:o,placement:n,centered:s,children:i.jsx(h,{...c,children:e})})});exports.Content=b;exports.POPOVER_PLACEMENTS=R;exports.Popover=E;exports.Scrolling=h;
|
package/dist/Popover/Popover.js
CHANGED
|
@@ -1,11 +1,13 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as n, jsxs as w } from "react/jsx-runtime";
|
|
2
2
|
import * as a from "react";
|
|
3
|
-
import { useFloating as
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
3
|
+
import { useFloating as k, offset as $, shift as y, flip as v, autoUpdate as P } from "@floating-ui/react-dom";
|
|
4
|
+
import p from "styled-components";
|
|
5
|
+
import { stripReactIdOfColon as f } from "../helpers/strings.js";
|
|
6
|
+
import { useId as I } from "../hooks/useId.js";
|
|
7
|
+
import { useIntersection as R } from "../hooks/useIntersection.js";
|
|
6
8
|
import { Box as d } from "../Box/Box.js";
|
|
7
|
-
import { Portal as
|
|
8
|
-
const
|
|
9
|
+
import { Portal as S } from "../Portal/Portal.js";
|
|
10
|
+
const N = [
|
|
9
11
|
"top",
|
|
10
12
|
"top-start",
|
|
11
13
|
"top-end",
|
|
@@ -18,42 +20,42 @@ const T = [
|
|
|
18
20
|
"left",
|
|
19
21
|
"left-start",
|
|
20
22
|
"left-end"
|
|
21
|
-
], W =
|
|
23
|
+
], W = p(d)`
|
|
22
24
|
box-shadow: ${({ theme: t }) => t.shadows.filterShadow};
|
|
23
25
|
z-index: ${({ theme: t }) => t.zIndices[0]};
|
|
24
26
|
border: 1px solid ${({ theme: t }) => t.colors.neutral150};
|
|
25
27
|
background: ${({ theme: t }) => t.colors.neutral0};
|
|
26
|
-
`,
|
|
27
|
-
const [
|
|
28
|
+
`, E = ({ source: t, children: o, spacing: e = 0, fullWidth: r = !1, placement: s = "bottom-start", centered: i = !1, ...l }) => {
|
|
29
|
+
const [m, u] = a.useState(void 0), { x: h, y: b, reference: c, floating: g, strategy: x } = k({
|
|
28
30
|
strategy: "fixed",
|
|
29
|
-
placement:
|
|
31
|
+
placement: i ? "bottom" : s,
|
|
30
32
|
middleware: [
|
|
31
|
-
|
|
32
|
-
mainAxis:
|
|
33
|
+
$({
|
|
34
|
+
mainAxis: e
|
|
33
35
|
}),
|
|
34
|
-
|
|
35
|
-
|
|
36
|
+
y(),
|
|
37
|
+
v()
|
|
36
38
|
],
|
|
37
|
-
whileElementsMounted:
|
|
39
|
+
whileElementsMounted: P
|
|
38
40
|
});
|
|
39
41
|
return a.useLayoutEffect(() => {
|
|
40
42
|
c(t.current);
|
|
41
43
|
}, [t, c]), a.useLayoutEffect(() => {
|
|
42
44
|
r && u(t.current.offsetWidth);
|
|
43
|
-
}, [r, t]),
|
|
45
|
+
}, [r, t]), n(W, { ref: g, style: {
|
|
44
46
|
left: h,
|
|
45
|
-
top:
|
|
46
|
-
position:
|
|
47
|
-
width:
|
|
48
|
-
}, hasRadius: !0, background: "neutral0", padding: 1, ...l, children:
|
|
49
|
-
},
|
|
50
|
-
const s = a.useRef(null);
|
|
51
|
-
return
|
|
47
|
+
top: b,
|
|
48
|
+
position: x,
|
|
49
|
+
width: m || void 0
|
|
50
|
+
}, hasRadius: !0, background: "neutral0", padding: 1, ...l, children: o });
|
|
51
|
+
}, z = ({ children: t, intersectionId: o, onReachEnd: e, ...r }) => {
|
|
52
|
+
const s = a.useRef(null), i = I();
|
|
53
|
+
return R(s, e ?? (() => {
|
|
52
54
|
}), {
|
|
53
|
-
selectorToWatch: `#${
|
|
54
|
-
skipWhen: !
|
|
55
|
-
}),
|
|
56
|
-
},
|
|
55
|
+
selectorToWatch: `#${f(i)}`,
|
|
56
|
+
skipWhen: !o || !e
|
|
57
|
+
}), w(C, { ref: s, ...r, children: [t, o && e && n(d, { id: f(i), width: "100%", height: "1px" })] });
|
|
58
|
+
}, C = p(d)`
|
|
57
59
|
// 16 is base base size, 3 is the factor to get closer to 40px and 5 is the number of elements visible in the list
|
|
58
60
|
max-height: ${3 * 5}rem;
|
|
59
61
|
overflow-y: auto;
|
|
@@ -73,10 +75,10 @@ const T = [
|
|
|
73
75
|
border-radius: ${({ theme: t }) => t.borderRadius};
|
|
74
76
|
margin-right: 10px;
|
|
75
77
|
}
|
|
76
|
-
`,
|
|
78
|
+
`, U = ({ children: t, source: o, spacing: e, fullWidth: r, placement: s, centered: i, ...l }) => n(S, { children: n(E, { source: o, spacing: e, fullWidth: r, placement: s, centered: i, children: n(z, { ...l, children: t }) }) });
|
|
77
79
|
export {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
80
|
+
E as Content,
|
|
81
|
+
N as POPOVER_PLACEMENTS,
|
|
82
|
+
U as Popover,
|
|
83
|
+
z as Scrolling
|
|
82
84
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
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"),Y=require("react"),J=require("@strapi/icons"),I=require("styled-components"),o=require("./SelectParts.cjs"),K=require("../BaseCheckbox/assets/checkmark.svg.cjs"),Q=require("../helpers/strings.cjs"),w=require("../hooks/useId.cjs"),U=require("../hooks/useIntersection.cjs"),Z=require("../Tag/Tag.cjs"),j=require("../Box/Box.cjs"),C=require("../Typography/Typography.cjs"),ee=require("../Field/Field.cjs"),te=require("../Flex/Flex.cjs"),re=require("../Field/FieldLabel.cjs"),ne=require("../Field/FieldHint.cjs"),ie=require("../Field/FieldError.cjs"),oe=e=>e&&e.__esModule?e:{default:e};function le(e){if(e&&e.__esModule)return e;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(i,r,l.get?l:{enumerable:!0,get:()=>e[r]})}}return i.default=e,Object.freeze(i)}const a=le(Y),se=oe(I),ce=({children:e,clearLabel:i="Clear",customizeContent:r,disabled:l,error:s,hint:d,id:u,label:p,labelAction:T,onChange:f,onClear:M,onReachEnd:b,placeholder:F,required:y,selectButtonTitle:ue,startIcon:_,size:B="M",value:h,withTags:q,...L})=>{const m=a.useRef(null),[$,S]=a.useState(),[P,V]=a.useState(!1),x=w.useId(u),z=`${x}-hint`,E=`${x}-error`,G=n=>{f?f(n):S(n)},A=n=>()=>{const O=Array.isArray(h)?h.filter(g=>g!==n):($??[]).filter(g=>g!==n);f?f(O):S(O)},D=n=>{V(n)},k=a.useRef(null),H=()=>{k.current.focus()},W=w.useId(),v=`intersection-${Q.stripReactIdOfColon(W)}`,N=n=>{b&&b(n)};U.useIntersection(m,N,{selectorToWatch:`#${v}`,skipWhen:!P});const c=typeof h<"u"&&h!==null?h:$,X=n=>n&&typeof n=="object"&&n.value?t.jsx(Z.Tag,{tabIndex:-1,disabled:l,icon:t.jsx(J.Cross,{}),onClick:A(n.value),children:n.textValue},n.value):null;return t.jsx(ee.Field,{hint:d,error:s,id:x,required:y,children:t.jsxs(te.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(re.FieldLabel,{onClick:H,action:T,children:p}),t.jsxs(o.Root,{onOpenChange:D,disabled:l,required:y,onValueChange:G,value:c,...L,multi:!0,children:[t.jsx(o.Trigger,{ref:k,"aria-label":p,"aria-describedby":`${z} ${E}`,id:x,startIcon:_,size:B,hasError:!!s,disabled:l,clearLabel:i,onClear:c?.length?M:void 0,paddingLeft:q&&c?.length?1:3,children:t.jsx(o.Value,{placeholder:F,textColor:c?.length?"neutral800":"neutral600",children:c?.length?q?X:r?r(c):void 0:void 0})}),t.jsx(o.Portal,{children:t.jsx(o.Content,{position:"popper",sideOffset:4,children:t.jsxs(o.Viewport,{ref:m,children:[e,t.jsx(j.Box,{id:v,width:"100%",height:"1px"})]})})})]}),t.jsx(ne.FieldHint,{}),t.jsx(ie.FieldError,{})]})})},ae=a.forwardRef(({value:e,children:i,startIcon:r,...l},s)=>t.jsxs(o.Item,{ref:s,value:e.toString(),...l,children:[r&&t.jsx(j.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(o.ItemIndicator,{children:({isSelected:d,isIntermediate:u})=>t.jsx(R,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:u,$selected:d,zIndex:1,height:"18px",width:"18px"})}),t.jsx(C.Typography,{textColor:"neutral800",children:t.jsx(o.ItemText,{children:i})})]})),R=se.default(j.Box)`
|
|
2
2
|
border: 1px solid
|
|
3
3
|
${({theme:e,$selected:i,$indeterminate:r})=>i||r?e.colors.primary600:e.colors.neutral300};
|
|
4
4
|
background-color: ${({theme:e,$selected:i,$indeterminate:r})=>i||r?e.colors.primary600:e.colors.neutral0};
|
|
5
5
|
|
|
6
|
-
${({theme:e,$indeterminate:i})=>i&&
|
|
6
|
+
${({theme:e,$indeterminate:i})=>i&&I.css`
|
|
7
7
|
&::after {
|
|
8
8
|
content: '';
|
|
9
9
|
display: block;
|
|
@@ -18,13 +18,13 @@
|
|
|
18
18
|
}
|
|
19
19
|
`}
|
|
20
20
|
|
|
21
|
-
${({$selected:e})=>e&&
|
|
21
|
+
${({$selected:e})=>e&&I.css`
|
|
22
22
|
&::after {
|
|
23
23
|
content: '';
|
|
24
|
-
background: url(${
|
|
24
|
+
background: url(${K}) no-repeat no-repeat center center;
|
|
25
25
|
width: 100%;
|
|
26
26
|
height: 100%;
|
|
27
27
|
position: absolute;
|
|
28
28
|
}
|
|
29
29
|
`}
|
|
30
|
-
`,
|
|
30
|
+
`,de=a.forwardRef(({children:e,label:i,startIcon:r,values:l=[],...s},d)=>t.jsxs(o.Group,{ref:d,children:[t.jsxs(o.Item,{value:l,...s,children:[r&&t.jsx(j.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(o.ItemIndicator,{children:({isSelected:u,isIntermediate:p})=>t.jsx(R,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:p,$selected:u,zIndex:1,height:"18px",width:"18px"})}),t.jsx(C.Typography,{textColor:"neutral800",children:i})]}),e]}));exports.MultiSelect=ce;exports.MultiSelectGroup=de;exports.MultiSelectOption=ae;
|
|
@@ -1,48 +1,49 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import * as
|
|
3
|
-
import { Cross as
|
|
4
|
-
import
|
|
5
|
-
import { Item as
|
|
6
|
-
import
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
1
|
+
import { jsxs as a, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import * as d from "react";
|
|
3
|
+
import { Cross as K } from "@strapi/icons";
|
|
4
|
+
import N, { css as T } from "styled-components";
|
|
5
|
+
import { Item as S, ItemIndicator as F, ItemText as Q, Group as U, Root as Z, Trigger as ee, Value as re, Portal as te, Content as ne, Viewport as oe } from "./SelectParts.js";
|
|
6
|
+
import ie from "../BaseCheckbox/assets/checkmark.svg.js";
|
|
7
|
+
import { stripReactIdOfColon as le } from "../helpers/strings.js";
|
|
8
|
+
import { useId as O } from "../hooks/useId.js";
|
|
9
|
+
import { useIntersection as ce } from "../hooks/useIntersection.js";
|
|
10
|
+
import { Tag as de } from "../Tag/Tag.js";
|
|
11
|
+
import { Box as g } from "../Box/Box.js";
|
|
12
|
+
import { Typography as M } from "../Typography/Typography.js";
|
|
13
|
+
import { Field as ae } from "../Field/Field.js";
|
|
14
|
+
import { Flex as se } from "../Flex/Flex.js";
|
|
15
|
+
import { FieldLabel as he } from "../Field/FieldLabel.js";
|
|
16
|
+
import { FieldHint as ue } from "../Field/FieldHint.js";
|
|
17
|
+
import { FieldError as pe } from "../Field/FieldError.js";
|
|
18
|
+
const Be = ({ children: t, clearLabel: o = "Clear", customizeContent: n, disabled: i, error: l, hint: s, id: h, label: p, labelAction: L, onChange: f, onClear: V, onReachEnd: I, placeholder: j, required: $, selectButtonTitle: fe, startIcon: E, size: z = "M", value: u, withTags: b, ...A }) => {
|
|
19
|
+
const k = d.useRef(null), [C, v] = d.useState(), [G, W] = d.useState(!1), m = O(h), q = `${m}-hint`, H = `${m}-error`, P = (r) => {
|
|
20
|
+
f ? f(r) : v(r);
|
|
21
|
+
}, X = (r) => () => {
|
|
22
|
+
const y = Array.isArray(u) ? u.filter((x) => x !== r) : (C ?? []).filter((x) => x !== r);
|
|
23
|
+
f ? f(y) : v(y);
|
|
24
|
+
}, Y = (r) => {
|
|
25
|
+
W(r);
|
|
26
|
+
}, w = d.useRef(null), _ = () => {
|
|
26
27
|
w.current.focus();
|
|
27
|
-
},
|
|
28
|
-
|
|
28
|
+
}, D = O(), R = `intersection-${le(D)}`;
|
|
29
|
+
ce(k, (r) => {
|
|
29
30
|
I && I(r);
|
|
30
31
|
}, {
|
|
31
|
-
selectorToWatch: `#${
|
|
32
|
+
selectorToWatch: `#${R}`,
|
|
32
33
|
/**
|
|
33
34
|
* We need to know when the select is open because only then will viewportRef
|
|
34
35
|
* not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
|
|
35
36
|
*/
|
|
36
|
-
skipWhen: !
|
|
37
|
+
skipWhen: !G
|
|
37
38
|
});
|
|
38
|
-
const c = typeof u < "u" && u !== null ? u : C,
|
|
39
|
-
return e(
|
|
40
|
-
},
|
|
39
|
+
const c = typeof u < "u" && u !== null ? u : C, J = (r) => r && typeof r == "object" && r.value ? e(de, { tabIndex: -1, disabled: i, icon: e(K, {}), onClick: X(r.value), children: r.textValue }, r.value) : null;
|
|
40
|
+
return e(ae, { hint: s, error: l, id: m, required: $, children: a(se, { direction: "column", alignItems: "stretch", gap: 1, children: [e(he, { onClick: _, action: L, children: p }), a(Z, { onOpenChange: Y, disabled: i, required: $, onValueChange: P, value: c, ...A, multi: !0, children: [e(ee, { ref: w, "aria-label": p, "aria-describedby": `${q} ${H}`, id: m, startIcon: E, size: z, hasError: !!l, disabled: i, clearLabel: o, onClear: c?.length ? V : void 0, paddingLeft: b && c?.length ? 1 : 3, children: e(re, { placeholder: j, textColor: c?.length ? "neutral800" : "neutral600", children: c?.length ? b ? J : n ? n(c) : void 0 : void 0 }) }), e(te, { children: e(ne, { position: "popper", sideOffset: 4, children: a(oe, { ref: k, children: [t, e(g, { id: R, width: "100%", height: "1px" })] }) }) })] }), e(ue, {}), e(pe, {})] }) });
|
|
41
|
+
}, Le = d.forwardRef(({ value: t, children: o, startIcon: n, ...i }, l) => a(S, { ref: l, value: t.toString(), ...i, children: [n && e(g, { as: "span", "aria-hidden": !0, children: n }), e(F, { children: ({ isSelected: s, isIntermediate: h }) => e(B, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: h, $selected: s, zIndex: 1, height: "18px", width: "18px" }) }), e(M, { textColor: "neutral800", children: e(Q, { children: o }) })] })), B = N(g)`
|
|
41
42
|
border: 1px solid
|
|
42
43
|
${({ theme: t, $selected: o, $indeterminate: n }) => o || n ? t.colors.primary600 : t.colors.neutral300};
|
|
43
44
|
background-color: ${({ theme: t, $selected: o, $indeterminate: n }) => o || n ? t.colors.primary600 : t.colors.neutral0};
|
|
44
45
|
|
|
45
|
-
${({ theme: t, $indeterminate: o }) => o &&
|
|
46
|
+
${({ theme: t, $indeterminate: o }) => o && T`
|
|
46
47
|
&::after {
|
|
47
48
|
content: '';
|
|
48
49
|
display: block;
|
|
@@ -57,18 +58,18 @@ const Fe = ({ children: t, clearLabel: o = "Clear", customizeContent: n, disable
|
|
|
57
58
|
}
|
|
58
59
|
`}
|
|
59
60
|
|
|
60
|
-
${({ $selected: t }) => t &&
|
|
61
|
+
${({ $selected: t }) => t && T`
|
|
61
62
|
&::after {
|
|
62
63
|
content: '';
|
|
63
|
-
background: url(${
|
|
64
|
+
background: url(${ie}) no-repeat no-repeat center center;
|
|
64
65
|
width: 100%;
|
|
65
66
|
height: 100%;
|
|
66
67
|
position: absolute;
|
|
67
68
|
}
|
|
68
69
|
`}
|
|
69
|
-
`,
|
|
70
|
+
`, Ve = d.forwardRef(({ children: t, label: o, startIcon: n, values: i = [], ...l }, s) => a(U, { ref: s, children: [a(S, { value: i, ...l, children: [n && e(g, { as: "span", "aria-hidden": !0, children: n }), e(F, { children: ({ isSelected: h, isIntermediate: p }) => e(B, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: p, $selected: h, zIndex: 1, height: "18px", width: "18px" }) }), e(M, { textColor: "neutral800", children: o })] }), t] }));
|
|
70
71
|
export {
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
72
|
+
Be as MultiSelect,
|
|
73
|
+
Ve as MultiSelectGroup,
|
|
74
|
+
Le as MultiSelectOption
|
|
74
75
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),H=require("react"),o=require("./SelectParts.cjs"),W=require("../helpers/strings.cjs"),O=require("../hooks/useId.cjs"),z=require("../hooks/useIntersection.cjs"),q=require("../Box/Box.cjs"),D=require("../Typography/Typography.cjs"),A=require("../Field/Field.cjs"),G=require("../Flex/Flex.cjs"),J=require("../Field/FieldLabel.cjs"),K=require("../Field/FieldHint.cjs"),Q=require("../Field/FieldError.cjs");function U(t){if(t&&t.__esModule)return t;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const s=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(i,n,s.get?s:{enumerable:!0,get:()=>t[n]})}}return i.default=t,Object.freeze(i)}const c=U(H),X=({children:t,clearLabel:i="Clear",customizeContent:n,disabled:s,error:d,hint:m,id:y,label:p,labelAction:F,onChange:h,onClear:f,onReachEnd:g,placeholder:R,required:x,selectButtonTitle:Z,startIcon:T,size:B="M",value:u,...C})=>{const[_,j]=c.useState(),[$,v]=c.useState(!1),a=O.useId(y),w=`${a}-hint`,P=`${a}-error`,k=r=>{h?h(typeof u=="number"?Number(r):r):j(r)},L=r=>{v(r)},M=r=>{f&&f(r),h||j("")},b=c.useRef(null),N=()=>{b.current.focus()},I=c.useRef(null),E=O.useId(),S=`intersection-${W.stripReactIdOfColon(E)}`,V=r=>{g&&g(r)};z.useIntersection(I,V,{selectorToWatch:`#${S}`,skipWhen:!$});const l=(typeof u<"u"&&u!==null?u.toString():_)??"";return e.jsx(A.Field,{hint:m,error:d,id:a,required:x,children:e.jsxs(G.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsx(J.FieldLabel,{onClick:N,action:F,children:p}),e.jsxs(o.Root,{onOpenChange:L,disabled:s,required:x,onValueChange:k,value:l,...C,children:[e.jsx(o.Trigger,{ref:b,"aria-label":p,"aria-describedby":`${w} ${P}`,id:a,startIcon:T,size:B,hasError:!!d,disabled:s,clearLabel:i,onClear:l&&f?M:void 0,children:e.jsx(o.Value,{placeholder:R,textColor:l?"neutral800":"neutral600",children:l&&n?n(l):void 0})}),e.jsx(o.Portal,{children:e.jsx(o.Content,{position:"popper",sideOffset:4,children:e.jsxs(o.Viewport,{ref:I,children:[t,e.jsx(q.Box,{id:S,width:"100%",height:"1px"})]})})})]}),e.jsx(K.FieldHint,{}),e.jsx(Q.FieldError,{})]})})},Y=c.forwardRef(({value:t,startIcon:i,children:n,...s},d)=>e.jsxs(o.Item,{ref:d,value:t.toString(),...s,children:[i&&e.jsx(q.Box,{as:"span","aria-hidden":!0,children:i}),e.jsx(D.Typography,{textColor:"neutral800",children:e.jsx(o.ItemText,{children:n})})]}));exports.SingleSelect=X;exports.SingleSelectOption=Y;
|
|
@@ -1,39 +1,40 @@
|
|
|
1
1
|
import { jsxs as s, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
3
|
-
import { Item as
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
2
|
+
import * as n from "react";
|
|
3
|
+
import { Item as M, ItemText as P, Root as _, Trigger as z, Value as A, Portal as D, Content as G, Viewport as J } from "./SelectParts.js";
|
|
4
|
+
import { stripReactIdOfColon as K } from "../helpers/strings.js";
|
|
5
|
+
import { useId as S } from "../hooks/useId.js";
|
|
6
|
+
import { useIntersection as Q } from "../hooks/useIntersection.js";
|
|
6
7
|
import { Box as C } from "../Box/Box.js";
|
|
7
|
-
import { Typography as
|
|
8
|
-
import { Field as
|
|
9
|
-
import { Flex as
|
|
10
|
-
import { FieldLabel as
|
|
11
|
-
import { FieldHint as
|
|
12
|
-
import { FieldError as
|
|
13
|
-
const
|
|
14
|
-
const [
|
|
15
|
-
f ? f(typeof
|
|
16
|
-
}, V = (r) => {
|
|
17
|
-
v(r);
|
|
8
|
+
import { Typography as U } from "../Typography/Typography.js";
|
|
9
|
+
import { Field as X } from "../Field/Field.js";
|
|
10
|
+
import { Flex as Y } from "../Flex/Flex.js";
|
|
11
|
+
import { FieldLabel as Z } from "../Field/FieldLabel.js";
|
|
12
|
+
import { FieldHint as ee } from "../Field/FieldHint.js";
|
|
13
|
+
import { FieldError as re } from "../Field/FieldError.js";
|
|
14
|
+
const Ie = ({ children: h, clearLabel: o = "Clear", customizeContent: i, disabled: l, error: d, hint: O, id: B, label: p, labelAction: F, onChange: f, onClear: m, onReachEnd: u, placeholder: T, required: g, selectButtonTitle: te, startIcon: $, size: y = "M", value: c, ...w }) => {
|
|
15
|
+
const [k, I] = n.useState(), [v, E] = n.useState(!1), a = S(B), L = `${a}-hint`, N = `${a}-error`, V = (r) => {
|
|
16
|
+
f ? f(typeof c == "number" ? Number(r) : r) : I(r);
|
|
18
17
|
}, j = (r) => {
|
|
19
|
-
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
}, b =
|
|
23
|
-
|
|
24
|
-
|
|
18
|
+
E(r);
|
|
19
|
+
}, W = (r) => {
|
|
20
|
+
m && m(r), f || I("");
|
|
21
|
+
}, b = n.useRef(null), q = () => {
|
|
22
|
+
b.current.focus();
|
|
23
|
+
}, x = n.useRef(null), H = S(), R = `intersection-${K(H)}`;
|
|
24
|
+
Q(x, (r) => {
|
|
25
|
+
u && u(r);
|
|
25
26
|
}, {
|
|
26
|
-
selectorToWatch: `#${
|
|
27
|
+
selectorToWatch: `#${R}`,
|
|
27
28
|
/**
|
|
28
29
|
* We need to know when the select is open because only then will viewportRef
|
|
29
30
|
* not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
|
|
30
31
|
*/
|
|
31
|
-
skipWhen: !
|
|
32
|
+
skipWhen: !v
|
|
32
33
|
});
|
|
33
|
-
const
|
|
34
|
-
return e(
|
|
35
|
-
},
|
|
34
|
+
const t = (typeof c < "u" && c !== null ? c.toString() : k) ?? "";
|
|
35
|
+
return e(X, { hint: O, error: d, id: a, required: g, children: s(Y, { direction: "column", alignItems: "stretch", gap: 1, children: [e(Z, { onClick: q, action: F, children: p }), s(_, { onOpenChange: j, disabled: l, required: g, onValueChange: V, value: t, ...w, children: [e(z, { ref: b, "aria-label": p, "aria-describedby": `${L} ${N}`, id: a, startIcon: $, size: y, hasError: !!d, disabled: l, clearLabel: o, onClear: t && m ? W : void 0, children: e(A, { placeholder: T, textColor: t ? "neutral800" : "neutral600", children: t && i ? i(t) : void 0 }) }), e(D, { children: e(G, { position: "popper", sideOffset: 4, children: s(J, { ref: x, children: [h, e(C, { id: R, width: "100%", height: "1px" })] }) }) })] }), e(ee, {}), e(re, {})] }) });
|
|
36
|
+
}, be = n.forwardRef(({ value: h, startIcon: o, children: i, ...l }, d) => s(M, { ref: d, value: h.toString(), ...l, children: [o && e(C, { as: "span", "aria-hidden": !0, children: o }), e(U, { textColor: "neutral800", children: e(P, { children: i }) })] }));
|
|
36
37
|
export {
|
|
37
|
-
|
|
38
|
-
|
|
38
|
+
Ie as SingleSelect,
|
|
39
|
+
be as SingleSelectOption
|
|
39
40
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),r=require("react"),H=require("@strapi/icons"),M=require("@strapi/ui-primitives"),U=require("prop-types"),G=require("react-router-dom"),J=require("styled-components"),C=require("./utils.cjs"),i=require("../helpers/keyboardKeys.cjs"),Q=require("../hooks/useId.cjs"),X=require("../Link/Link.cjs"),w=require("../Button/Button.cjs"),_=require("../Popover/Popover.cjs"),b=require("../Box/Box.cjs"),q=require("../Typography/Typography.cjs"),Y=require("../Flex/Flex.cjs"),O=e=>e&&e.__esModule?e:{default:e},B=O(r),n=O(U),h=O(J),Z=h.default.button`
|
|
2
2
|
border: none;
|
|
3
3
|
padding: 0;
|
|
4
4
|
background: transparent;
|
|
5
5
|
cursor: pointer;
|
|
6
|
-
${
|
|
6
|
+
${C.getOptionStyle}
|
|
7
7
|
`,ee=h.default(G.NavLink)`
|
|
8
8
|
text-decoration: none;
|
|
9
|
-
${
|
|
9
|
+
${C.getOptionStyle}
|
|
10
10
|
`,ne=h.default(X.Link)`
|
|
11
11
|
/* Removing Link hover effect */
|
|
12
12
|
&:hover {
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
${
|
|
25
|
+
${C.getOptionStyle}
|
|
26
26
|
`,te=h.default.span`
|
|
27
27
|
display: flex;
|
|
28
28
|
align-items: center;
|
|
@@ -32,4 +32,4 @@
|
|
|
32
32
|
}
|
|
33
33
|
`,oe=h.default(w.Button)`
|
|
34
34
|
padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
|
|
35
|
-
`,S=({children:e,onClick:g,to:
|
|
35
|
+
`,S=({children:e,onClick:g,to:u,isFocused:a,href:d,...R})=>{const l=r.useRef();r.useEffect(()=>{a&&l.current&&l.current.focus()},[a]);const c={tabIndex:a?0:-1,ref:l,role:"menuitem",...R},f=v=>{(v.key===i.KeyboardKeys.SPACE||v.key===i.KeyboardKeys.ENTER)&&g()};return u&&!d?o.jsx(ee,{to:u,...c,children:o.jsx(b.Box,{padding:2,children:o.jsx(q.Typography,{children:e})})}):d&&!u?o.jsx(ne,{isExternal:!0,href:d,...c,children:o.jsx(b.Box,{padding:2,children:o.jsx(q.Typography,{children:e})})}):o.jsx(Z,{onKeyDown:f,onMouseDown:g,type:"button",...c,children:o.jsx(b.Box,{padding:2,children:o.jsx(q.Typography,{children:e})})})};S.defaultProps={as:void 0,href:void 0,isFocused:!1,onClick(){},to:void 0};S.propTypes={as:n.default.elementType,children:n.default.node.isRequired,href:n.default.string,isFocused:n.default.bool,onClick:n.default.func,to:n.default.string};const x=({label:e,children:g,id:u,as:a,onOpen:d=()=>{},onClose:R=()=>{},size:l,popoverPlacement:c,onReachEnd:f,...v})=>{const p=r.useRef(),k=Q.useId(u),K=r.useRef(!1),[y,m]=r.useState(!1),[P,j]=r.useState(0),E=r.Children.toArray(g),L=l==="S"?oe:w.Button,$=a||L,T=!!f&&typeof f=="function";r.useEffect(()=>{if(["string","number"].includes(typeof e)){const t=E.findIndex(s=>s.props.children===e);t!==-1&&j(t)}},[e]);const I=M.useCallbackRef(d),D=M.useCallbackRef(R);r.useEffect(()=>{K?.current?y?I():D():K.current=!0},[K,D,I,y]),r.useEffect(()=>{B.default.isValidElement(e)&&P===-1&&p.current.focus()},[e,P]);const A=t=>{y&&(t.key===i.KeyboardKeys.ESCAPE&&(t.stopPropagation(),m(!1),p.current.focus()),t.key===i.KeyboardKeys.DOWN&&j(s=>s===E.length-1?0:s+1),t.key===i.KeyboardKeys.UP&&j(s=>s===0?E.length-1:s-1))},N=t=>{(t.key===i.KeyboardKeys.ENTER||t.key===i.KeyboardKeys.SPACE)&&m(s=>!s)},F=t=>{t.preventDefault(),t.currentTarget.contains(t.relatedTarget)||m(!1)},V=t=>{t.preventDefault(),m(s=>!s)},W=()=>{T&&f()},z=E.map((t,s)=>o.jsx(Y.Flex,{as:"li",justifyContent:"center",role:"menuitem",children:r.cloneElement(t,{onClick(){t.props.onClick(),m(!1),p.current.focus()},isFocused:P===s})},s));return o.jsxs("div",{onKeyDown:A,children:[o.jsx($,{label:B.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":y,"aria-controls":k,onKeyDown:N,onMouseDown:V,ref:p,type:"button",variant:"ghost",endIcon:o.jsx(te,{children:o.jsx(H.CarretDown,{"aria-hidden":!0})}),...v,children:e}),y&&o.jsx(_.Popover,{onBlur:F,placement:c,source:p,onReachEnd:W,intersectionId:T?`popover-${k}`:void 0,spacing:4,children:o.jsx(b.Box,{role:"menu",as:"ul",padding:1,id:k,children:z})})]})};x.defaultProps={as:void 0};x.displayName="SimpleMenu";x.defaultProps={id:void 0,onOpen:void 0,onClose:void 0,onReachEnd:void 0,popoverPlacement:"bottom-start",size:"M"};x.propTypes={as:n.default.any,children:n.default.oneOfType([n.default.arrayOf(n.default.node),n.default.node]).isRequired,id:n.default.string,label:n.default.oneOfType([n.default.string,n.default.number,n.default.element]).isRequired,onClose:n.default.func,onOpen:n.default.func,onReachEnd:n.default.func,popoverPlacement:n.default.oneOf(_.POPOVER_PLACEMENTS),size:n.default.oneOf(["S","M"])};exports.MenuItem=S;exports.SimpleMenu=x;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as t, jsxs as z } from "react/jsx-runtime";
|
|
2
2
|
import B, { useRef as T, useEffect as E, useState as K, Children as H, cloneElement as U } from "react";
|
|
3
|
-
import { useCallbackRef as $ } from "@radix-ui/react-use-callback-ref";
|
|
4
3
|
import { CarretDown as G } from "@strapi/icons";
|
|
4
|
+
import { useCallbackRef as $ } from "@strapi/ui-primitives";
|
|
5
5
|
import e from "prop-types";
|
|
6
6
|
import { NavLink as J } from "react-router-dom";
|
|
7
7
|
import y from "styled-components";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react"),o=require("@strapi/ui-primitives"),i=(r,c)=>{const e=u.useRef(null),t=u.useRef(null),n=o.useCallbackRef(c);return u.useEffect(()=>{if(e.current){if(t.current){const s=e.current.querySelector('[tabindex="0"]');s&&(s.focus(),n(r))}t.current||(t.current=!0)}},[r,n]),e};exports.useTabsFocus=i;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useRef as c, useEffect as f } from "react";
|
|
2
|
-
import { useCallbackRef as s } from "@
|
|
2
|
+
import { useCallbackRef as s } from "@strapi/ui-primitives";
|
|
3
3
|
const i = (t, o) => {
|
|
4
4
|
const e = c(null), r = c(null), u = s(o);
|
|
5
5
|
return f(() => {
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>e.replaceAll(":","");exports.stripReactIdOfColon=t;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("react"),f=require("@strapi/ui-primitives");function g(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const t=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(o,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return o.default=e,Object.freeze(o)}const u=g(S);function p({prop:e,defaultProp:o,onChange:n=()=>{}}){const[t,c]=v({defaultProp:o,onChange:n}),r=e!==void 0,l=typeof e=="function"?e(t):e,d=r?l:t,a=f.useCallbackRef(n),b=u.useCallback(s=>{if(r){const i=typeof s=="function"?s(l):s;i!==l&&(a(i),c(s))}else c(s)},[r,l,c,a]);return[d,b]}function v({defaultProp:e,onChange:o}){const n=u.useState(e),[t]=n,c=u.useRef(t),r=f.useCallbackRef(o);return u.useEffect(()=>{c.current!==t&&(r(t),c.current=t)},[t,c,r]),n}exports.useControllableState=p;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as r from "react";
|
|
2
|
-
import { useCallbackRef as i } from "@
|
|
2
|
+
import { useCallbackRef as i } from "@strapi/ui-primitives";
|
|
3
3
|
function R({ prop: n, defaultProp: u, onChange: c = () => {
|
|
4
4
|
} }) {
|
|
5
5
|
const [t, e] = m({ defaultProp: u, onChange: c }), o = n !== void 0, l = typeof n == "function" ? n(t) : n, d = o ? l : t, f = i(c), C = r.useCallback((s) => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),d=require("@
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),d=require("@strapi/ui-primitives"),f=(t,s,{selectorToWatch:n,skipWhen:e=!1})=>{const r=d.useCallbackRef(s);I.useEffect(()=>{if(e||!t.current)return;const u={root:t.current,rootMargin:"0px"},g=v=>{v.forEach(o=>{o.isIntersecting&&t.current&&t.current.scrollHeight>t.current.clientHeight&&r(o)})},i=new IntersectionObserver(g,u),c=t.current.querySelector(n);return c&&i.observe(c),()=>{i.disconnect()}},[e,r,n,t])};exports.useIntersection=f;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useEffect as m } from "react";
|
|
2
|
-
import { useCallbackRef as p } from "@
|
|
2
|
+
import { useCallbackRef as p } from "@strapi/ui-primitives";
|
|
3
3
|
const E = (t, s, { selectorToWatch: n, skipWhen: r = !1 }) => {
|
|
4
4
|
const o = p(s);
|
|
5
5
|
m(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),c=require("@strapi/ui-primitives"),u=(e,s)=>{const t=c.useCallbackRef(s);n.useLayoutEffect(()=>{const r=new ResizeObserver(t);return Array.isArray(e)?e.forEach(i=>{i.current&&r.observe(i.current)}):e.current&&r.observe(e.current),()=>{r.disconnect()}},[e,t])};exports.useResizeObserver=u;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),n=require("./Menu.cjs"),M=require("../../hooks/useId.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),n=require("./Menu.cjs"),p=require("../../helpers/strings.cjs"),M=require("../../hooks/useId.cjs"),q=require("../../hooks/useIntersection.cjs"),R=({children:l,onOpen:s,onClose:r,popoverPlacement:a,onReachEnd:o,...c})=>{const d=u.useRef(null),[I,f]=u.useState(!1),h=e=>{o&&o(e)},g=e=>{e&&typeof s=="function"?s():!e&&typeof r=="function"&&r(),f(e)},m=M.useId(),i=`intersection-${p.stripReactIdOfColon(m)}`;return q.useIntersection(d,h,{selectorToWatch:`#${i}`,skipWhen:!I}),t.jsxs(n.Root,{onOpenChange:g,children:[t.jsx(n.Trigger,{...c,children:c.label}),t.jsx(n.Content,{intersectionId:i,popoverPlacement:a,children:l})]})},j=n.Item;exports.Menu=n;exports.MenuItem=j;exports.SimpleMenu=R;
|
|
@@ -1,26 +1,27 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { useRef as
|
|
3
|
-
import { Root as
|
|
4
|
-
import * as
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import { jsxs as I, jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as h, useState as g } from "react";
|
|
3
|
+
import { Root as x, Trigger as R, Content as C, Item as M } from "./Menu.js";
|
|
4
|
+
import * as $ from "./Menu.js";
|
|
5
|
+
import { stripReactIdOfColon as j } from "../../helpers/strings.js";
|
|
6
|
+
import { useId as y } from "../../hooks/useId.js";
|
|
7
|
+
import { useIntersection as O } from "../../hooks/useIntersection.js";
|
|
8
|
+
const P = ({ children: c, onOpen: t, onClose: n, popoverPlacement: f, onReachEnd: o, ...r }) => {
|
|
9
|
+
const m = h(null), [l, p] = g(!1), a = (e) => {
|
|
9
10
|
o && o(e);
|
|
10
11
|
}, d = (e) => {
|
|
11
12
|
e && typeof t == "function" ? t() : !e && typeof n == "function" && n(), p(e);
|
|
12
|
-
},
|
|
13
|
-
return
|
|
14
|
-
selectorToWatch: `#${
|
|
13
|
+
}, u = y(), i = `intersection-${j(u)}`;
|
|
14
|
+
return O(m, a, {
|
|
15
|
+
selectorToWatch: `#${i}`,
|
|
15
16
|
/**
|
|
16
17
|
* We need to know when the select is open because only then will viewportRef
|
|
17
18
|
* not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
|
|
18
19
|
*/
|
|
19
|
-
skipWhen: !
|
|
20
|
-
}),
|
|
21
|
-
},
|
|
20
|
+
skipWhen: !l
|
|
21
|
+
}), I(x, { onOpenChange: d, children: [s(R, { ...r, children: r.label }), s(C, { intersectionId: i, popoverPlacement: f, children: c })] });
|
|
22
|
+
}, q = M;
|
|
22
23
|
export {
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
$ as Menu,
|
|
25
|
+
q as MenuItem,
|
|
26
|
+
P as SimpleMenu
|
|
26
27
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/design-system",
|
|
3
|
-
"version": "1.7.4
|
|
3
|
+
"version": "1.7.4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -23,15 +23,14 @@
|
|
|
23
23
|
"@internationalized/number": "^3.2.0",
|
|
24
24
|
"@radix-ui/react-dismissable-layer": "^1.0.3",
|
|
25
25
|
"@radix-ui/react-dropdown-menu": "^2.0.4",
|
|
26
|
-
"@
|
|
27
|
-
"@strapi/ui-primitives": "^1.7.4-alpha.0",
|
|
26
|
+
"@strapi/ui-primitives": "^1.7.4",
|
|
28
27
|
"@uiw/react-codemirror": "^4.19.16",
|
|
29
28
|
"compute-scroll-into-view": "^3.0.3",
|
|
30
29
|
"prop-types": "^15.8.1"
|
|
31
30
|
},
|
|
32
31
|
"devDependencies": {
|
|
33
32
|
"@playwright/test": "1.33.0",
|
|
34
|
-
"@strapi/icons": "^1.7.4
|
|
33
|
+
"@strapi/icons": "^1.7.4",
|
|
35
34
|
"@types/react-router-dom": "^5.3.3",
|
|
36
35
|
"@types/styled-components": "^5.1.26",
|
|
37
36
|
"axe-playwright": "^1.2.3",
|
|
@@ -62,5 +61,5 @@
|
|
|
62
61
|
"test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
|
|
63
62
|
"test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
|
|
64
63
|
},
|
|
65
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "bd4615f8f25e7b1c4ff931569cdc1b7c78b51a1d"
|
|
66
65
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=e=>e.replace(":","-");exports.escapeSelector=t;
|