@strapi/design-system 1.7.3 → 1.7.4-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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"),ae=require("react"),_=require("@strapi/icons"),n=require("@strapi/ui-primitives"),ie=require("styled-components"),P=require("../hooks/useControllableState.cjs"),de=require("../hooks/useId.cjs"),ce=require("../hooks/useIntersection.cjs"),ue=require("../themes/utils.cjs"),he=require("../Loader/Loader.cjs"),j=require("../Box/Box.cjs"),u=require("../Typography/Typography.cjs"),be=require("../Field/Field.cjs"),h=require("../Flex/Flex.cjs"),xe=require("../Field/FieldLabel.cjs"),pe=require("../Field/FieldHint.cjs"),fe=require("../Field/FieldError.cjs"),ge=e=>e&&e.__esModule?e:{default:e};function me(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 c=me(ae),s=ge(ie),E=({children:e,clearLabel:r="clear",creatable:l=!1,createMessage:a=$=>`Create "${$}"`,defaultTextValue:x,defaultOpen:p=!1,open:z,onOpenChange:D,disabled:f=!1,error:g,hasMoreItems:H=!1,hint:L,id:M,label:N,labelAction:W,loading:m=!1,loadingMessage:U="Loading content...",noOptionsMessage:A=()=>"No results found",onChange:y,onClear:C,onCreateOption:w,onInputChange:I,onLoadMore:F,placeholder:G="Select or enter a value",required:T=!1,startIcon:q,textValue:J,value:v})=>{const[$,K]=P.useControllableState({prop:z,defaultProp:p,onChange:D}),[i,R]=P.useControllableState({prop:J,defaultProp:x}),[Q,V]=c.useState(""),k=c.useRef(null),O=c.useRef(null),X=c.useRef(null),d=de.useId(M),Y=t=>{C&&!f&&(R(""),V(""),C(t),O.current.focus())},Z=t=>{K(t)},ee=t=>{R(t)},oe=t=>{V(t)},re=t=>{I&&I(t)},te=t=>{y&&y(t)},S=`intersection-${CSS.escape(d)}`,ne=t=>{F&&H&&!m&&F(t)},B=()=>{w&&i&&w(i)};ce.useIntersection(k,ne,{selectorToWatch:`#${S}`,skipWhen:!$});const le=`${d}-hint`,se=`${d}-error`;return o.jsx(be.Field,{hint:L,error:g,id:d,required:T,children:o.jsxs(h.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[o.jsx(xe.FieldLabel,{action:W,children:N}),o.jsxs(n.Combobox.Root,{autocomplete:l?"list":"both",onOpenChange:Z,onTextValueChange:ee,textValue:i,allowCustomValue:!0,disabled:f,required:T,value:v===null?void 0:v,onValueChange:te,filterValue:Q,onFilterValueChange:oe,children:[o.jsxs(je,{$hasError:!!g,children:[o.jsxs(h.Flex,{flex:"1",as:"span",gap:3,children:[q?o.jsx(j.Box,{as:"span","aria-hidden":!0,children:q}):null,o.jsx(ye,{placeholder:G,id:d,"aria-invalid":!!g,"aria-labelledby":`${le} ${se}`,onChange:re,ref:O})]}),o.jsxs(h.Flex,{as:"span",gap:3,children:[i&&C?o.jsx($e,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:Y,"aria-disabled":f,"aria-label":r,title:r,ref:X,children:o.jsx(_.Cross,{})}):null,o.jsx(we,{children:o.jsx(_.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(Ie,{sideOffset:4,children:o.jsxs(Fe,{ref:k,children:[e,l?o.jsx(n.Combobox.CreateItem,{onPointerUp:B,onClick:B,asChild:!0,children:o.jsx(b,{children:o.jsx(u.Typography,{children:a(i??"")})})}):null,!l&&!m?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(b,{$hasHover:!1,children:o.jsx(u.Typography,{children:A(i??"")})})}):null,m?o.jsx(h.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(he.Loader,{small:!0,children:U})}):null,o.jsx(j.Box,{id:S,width:"100%",height:"1px"})]})})})]}),o.jsx(pe.FieldHint,{}),o.jsx(fe.FieldError,{})]})})},Ce=e=>o.jsx(E,{...e,creatable:!0}),$e=s.default(j.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
|
+
`,je=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})=>ue.inputFocusStyle()({theme:e,hasError:r})};
|
|
37
|
+
`,ye=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
|
+
`,we=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
|
+
`,Ie=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
|
+
`,Fe=s.default(n.Combobox.Viewport)`
|
|
74
74
|
padding: ${({theme:e})=>e.spaces[1]};
|
|
75
|
-
`,
|
|
75
|
+
`,Te=c.forwardRef(({children:e,value:r,disabled:l,textValue:a,...x},p)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:l,textValue:a,children:o.jsx(b,{ref:p,...x,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(u.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
|
+
${u.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
|
+
${u.Typography} {
|
|
102
102
|
color: ${({theme:e})=>e.colors.primary600};
|
|
103
103
|
font-weight: bold;
|
|
104
104
|
}
|
|
105
105
|
}
|
|
106
|
-
`;exports.Combobox=
|
|
106
|
+
`;exports.Combobox=E;exports.CreatableCombobox=Ce;exports.Option=Te;exports.OptionBox=b;
|
|
@@ -1,52 +1,56 @@
|
|
|
1
1
|
import { jsx as r, jsxs as a } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
3
|
-
import { Cross as
|
|
2
|
+
import * as c from "react";
|
|
3
|
+
import { Cross as ie, CarretDown as ae } from "@strapi/icons";
|
|
4
4
|
import { Combobox as t } from "@strapi/ui-primitives";
|
|
5
5
|
import l from "styled-components";
|
|
6
|
-
import { useControllableState as
|
|
7
|
-
import { useId as
|
|
8
|
-
import { useIntersection as
|
|
9
|
-
import { inputFocusStyle as
|
|
10
|
-
import { Loader as
|
|
11
|
-
import { Box as
|
|
12
|
-
import { Typography as
|
|
13
|
-
import { Field as
|
|
14
|
-
import { Flex as
|
|
15
|
-
import { FieldLabel as
|
|
16
|
-
import { FieldHint as
|
|
17
|
-
import { FieldError as
|
|
18
|
-
const
|
|
19
|
-
const [
|
|
20
|
-
prop:
|
|
21
|
-
defaultProp: m
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
}, X = (o) => {
|
|
27
|
-
|
|
28
|
-
}, Y = (o) => {
|
|
29
|
-
F(o);
|
|
30
|
-
}, Z = (o) => {
|
|
31
|
-
V && V(o);
|
|
6
|
+
import { useControllableState as z } from "../hooks/useControllableState.js";
|
|
7
|
+
import { useId as se } from "../hooks/useId.js";
|
|
8
|
+
import { useIntersection as de } from "../hooks/useIntersection.js";
|
|
9
|
+
import { inputFocusStyle as ce } from "../themes/utils.js";
|
|
10
|
+
import { Loader as ue } from "../Loader/Loader.js";
|
|
11
|
+
import { Box as w } from "../Box/Box.js";
|
|
12
|
+
import { Typography as u } from "../Typography/Typography.js";
|
|
13
|
+
import { Field as he } from "../Field/Field.js";
|
|
14
|
+
import { Flex as h } from "../Flex/Flex.js";
|
|
15
|
+
import { FieldLabel as pe } from "../Field/FieldLabel.js";
|
|
16
|
+
import { FieldHint as fe } from "../Field/FieldHint.js";
|
|
17
|
+
import { FieldError as me } from "../Field/FieldError.js";
|
|
18
|
+
const ge = ({ children: e, clearLabel: n = "clear", creatable: s = !1, createMessage: p = (C) => `Create "${C}"`, defaultTextValue: f, defaultOpen: m = !1, open: q, onOpenChange: D, disabled: g = !1, error: b, hasMoreItems: H = !1, hint: N, id: W, label: L, labelAction: U, loading: $ = !1, loadingMessage: A = "Loading content...", noOptionsMessage: G = () => "No results found", onChange: V, onClear: x, onCreateOption: v, onInputChange: y, onLoadMore: R, placeholder: J = "Select or enter a value", required: k = !1, startIcon: T, textValue: K, value: F }) => {
|
|
19
|
+
const [C, Q] = z({
|
|
20
|
+
prop: q,
|
|
21
|
+
defaultProp: m,
|
|
22
|
+
onChange: D
|
|
23
|
+
}), [i, S] = z({
|
|
24
|
+
prop: K,
|
|
25
|
+
defaultProp: f
|
|
26
|
+
}), [X, B] = c.useState(""), O = c.useRef(null), j = c.useRef(null), Y = c.useRef(null), d = se(W), Z = (o) => {
|
|
27
|
+
x && !g && (S(""), B(""), x(o), j.current.focus());
|
|
32
28
|
}, _ = (o) => {
|
|
33
|
-
|
|
34
|
-
},
|
|
35
|
-
|
|
36
|
-
},
|
|
29
|
+
Q(o);
|
|
30
|
+
}, M = (o) => {
|
|
31
|
+
S(o);
|
|
32
|
+
}, ee = (o) => {
|
|
33
|
+
B(o);
|
|
34
|
+
}, re = (o) => {
|
|
35
|
+
y && y(o);
|
|
36
|
+
}, oe = (o) => {
|
|
37
|
+
V && V(o);
|
|
38
|
+
}, E = `intersection-${CSS.escape(d)}`, te = (o) => {
|
|
39
|
+
R && H && !$ && R(o);
|
|
40
|
+
}, P = () => {
|
|
37
41
|
v && i && v(i);
|
|
38
42
|
};
|
|
39
|
-
|
|
40
|
-
selectorToWatch: `#${
|
|
43
|
+
de(O, te, {
|
|
44
|
+
selectorToWatch: `#${E}`,
|
|
41
45
|
/**
|
|
42
46
|
* We need to know when the select is open because only then will viewportRef
|
|
43
47
|
* not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
|
|
44
48
|
*/
|
|
45
|
-
skipWhen: !
|
|
49
|
+
skipWhen: !C
|
|
46
50
|
});
|
|
47
|
-
const
|
|
48
|
-
return r(
|
|
49
|
-
},
|
|
51
|
+
const ne = `${d}-hint`, le = `${d}-error`;
|
|
52
|
+
return r(he, { hint: N, error: b, id: d, required: k, children: a(h, { direction: "column", alignItems: "stretch", gap: 1, children: [r(pe, { action: U, children: L }), a(t.Root, { autocomplete: s ? "list" : "both", onOpenChange: _, onTextValueChange: M, textValue: i, allowCustomValue: !0, disabled: g, required: k, value: F === null ? void 0 : F, onValueChange: oe, filterValue: X, onFilterValueChange: ee, children: [a($e, { $hasError: !!b, children: [a(h, { flex: "1", as: "span", gap: 3, children: [T ? r(w, { as: "span", "aria-hidden": !0, children: T }) : null, r(xe, { placeholder: J, id: d, "aria-invalid": !!b, "aria-labelledby": `${ne} ${le}`, onChange: re, ref: j })] }), a(h, { as: "span", gap: 3, children: [i && x ? r(be, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: Z, "aria-disabled": g, "aria-label": n, title: n, ref: Y, children: r(ie, {}) }) : null, r(Ce, { children: r(ae, {}) })] })] }), r(t.Portal, { children: r(we, { sideOffset: 4, children: a(Ie, { ref: O, children: [e, s ? r(t.CreateItem, { onPointerUp: P, onClick: P, asChild: !0, children: r(I, { children: r(u, { children: p(i ?? "") }) }) }) : null, !s && !$ ? r(t.NoValueFound, { asChild: !0, children: r(I, { $hasHover: !1, children: r(u, { children: G(i ?? "") }) }) }) : null, $ ? r(h, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(ue, { small: !0, children: A }) }) : null, r(w, { id: E, width: "100%", height: "1px" })] }) }) })] }), r(fe, {}), r(me, {})] }) });
|
|
53
|
+
}, He = (e) => r(ge, { ...e, creatable: !0 }), be = l(w)`
|
|
50
54
|
border: none;
|
|
51
55
|
|
|
52
56
|
svg {
|
|
@@ -57,7 +61,7 @@ const pe = ({ children: e, clearLabel: n = "clear", creatable: d = !1, createMes
|
|
|
57
61
|
svg path {
|
|
58
62
|
fill: ${({ theme: e }) => e.colors.neutral600};
|
|
59
63
|
}
|
|
60
|
-
`,
|
|
64
|
+
`, $e = l(t.Trigger)`
|
|
61
65
|
position: relative;
|
|
62
66
|
border: 1px solid ${({ theme: e, $hasError: n }) => n ? e.colors.danger600 : e.colors.neutral200};
|
|
63
67
|
padding-right: ${({ theme: e }) => e.spaces[3]};
|
|
@@ -81,8 +85,8 @@ const pe = ({ children: e, clearLabel: n = "clear", creatable: d = !1, createMes
|
|
|
81
85
|
outline: none;
|
|
82
86
|
}
|
|
83
87
|
|
|
84
|
-
${({ theme: e, $hasError: n }) =>
|
|
85
|
-
`,
|
|
88
|
+
${({ theme: e, $hasError: n }) => ce()({ theme: e, hasError: n })};
|
|
89
|
+
`, xe = l(t.TextInput)`
|
|
86
90
|
width: 100%;
|
|
87
91
|
font-size: ${14 / 16}rem;
|
|
88
92
|
color: ${({ theme: e }) => e.colors.neutral800};
|
|
@@ -97,7 +101,7 @@ const pe = ({ children: e, clearLabel: n = "clear", creatable: d = !1, createMes
|
|
|
97
101
|
&[aria-disabled='true'] {
|
|
98
102
|
cursor: inherit;
|
|
99
103
|
}
|
|
100
|
-
`,
|
|
104
|
+
`, Ce = l(t.Icon)`
|
|
101
105
|
& > svg {
|
|
102
106
|
width: ${6 / 16}rem;
|
|
103
107
|
|
|
@@ -109,7 +113,7 @@ const pe = ({ children: e, clearLabel: n = "clear", creatable: d = !1, createMes
|
|
|
109
113
|
&[aria-disabled='true'] {
|
|
110
114
|
cursor: inherit;
|
|
111
115
|
}
|
|
112
|
-
`,
|
|
116
|
+
`, we = l(t.Content)`
|
|
113
117
|
background: ${({ theme: e }) => e.colors.neutral0};
|
|
114
118
|
box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
|
|
115
119
|
border: 1px solid ${({ theme: e }) => e.colors.neutral150};
|
|
@@ -118,9 +122,9 @@ const pe = ({ children: e, clearLabel: n = "clear", creatable: d = !1, createMes
|
|
|
118
122
|
/* This is from the design-system figma file. */
|
|
119
123
|
max-height: 15rem;
|
|
120
124
|
z-index: ${({ theme: e }) => e.zIndices[1]};
|
|
121
|
-
`,
|
|
125
|
+
`, Ie = l(t.Viewport)`
|
|
122
126
|
padding: ${({ theme: e }) => e.spaces[1]};
|
|
123
|
-
`,
|
|
127
|
+
`, Ne = c.forwardRef(({ children: e, value: n, disabled: s, textValue: p, ...f }, m) => r(t.ComboboxItem, { asChild: !0, value: n, disabled: s, textValue: p, children: r(I, { ref: m, ...f, children: r(t.ItemText, { asChild: !0, children: r(u, { children: e }) }) }) })), I = l.div`
|
|
124
128
|
width: 100%;
|
|
125
129
|
border: none;
|
|
126
130
|
text-align: left;
|
|
@@ -133,7 +137,7 @@ const pe = ({ children: e, clearLabel: n = "clear", creatable: d = !1, createMes
|
|
|
133
137
|
&[data-selected] {
|
|
134
138
|
background-color: ${({ theme: e }) => e.colors.primary100};
|
|
135
139
|
|
|
136
|
-
${
|
|
140
|
+
${u} {
|
|
137
141
|
color: ${({ theme: e }) => e.colors.primary600};
|
|
138
142
|
font-weight: bold;
|
|
139
143
|
}
|
|
@@ -146,15 +150,15 @@ const pe = ({ children: e, clearLabel: n = "clear", creatable: d = !1, createMes
|
|
|
146
150
|
}
|
|
147
151
|
|
|
148
152
|
&[data-highlighted] {
|
|
149
|
-
${
|
|
153
|
+
${u} {
|
|
150
154
|
color: ${({ theme: e }) => e.colors.primary600};
|
|
151
155
|
font-weight: bold;
|
|
152
156
|
}
|
|
153
157
|
}
|
|
154
158
|
`;
|
|
155
159
|
export {
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
+
ge as Combobox,
|
|
161
|
+
He as CreatableCombobox,
|
|
162
|
+
Ne as Option,
|
|
163
|
+
I as OptionBox
|
|
160
164
|
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("react"),X=require("@strapi/icons"),b=require("styled-components"),o=require("./SelectParts.cjs"),Y=require("../BaseCheckbox/assets/checkmark.svg.cjs"),J=require("../hooks/useId.cjs"),K=require("../hooks/useIntersection.cjs"),Q=require("../Tag/Tag.cjs"),j=require("../Box/Box.cjs"),C=require("../Typography/Typography.cjs"),U=require("../Field/Field.cjs"),Z=require("../Flex/Flex.cjs"),ee=require("../Field/FieldLabel.cjs"),te=require("../Field/FieldHint.cjs"),re=require("../Field/FieldError.cjs"),ne=e=>e&&e.__esModule?e:{default:e};function ie(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=ie(N),oe=ne(b),le=({children:e,clearLabel:i="Clear",customizeContent:r,disabled:l,error:s,hint:d,id:u,label:
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),N=require("react"),X=require("@strapi/icons"),b=require("styled-components"),o=require("./SelectParts.cjs"),Y=require("../BaseCheckbox/assets/checkmark.svg.cjs"),J=require("../hooks/useId.cjs"),K=require("../hooks/useIntersection.cjs"),Q=require("../Tag/Tag.cjs"),j=require("../Box/Box.cjs"),C=require("../Typography/Typography.cjs"),U=require("../Field/Field.cjs"),Z=require("../Flex/Flex.cjs"),ee=require("../Field/FieldLabel.cjs"),te=require("../Field/FieldHint.cjs"),re=require("../Field/FieldError.cjs"),ne=e=>e&&e.__esModule?e:{default:e};function ie(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=ie(N),oe=ne(b),le=({children:e,clearLabel:i="Clear",customizeContent:r,disabled:l,error:s,hint:d,id:u,label:x,labelAction:T,onChange:f,onClear:M,onReachEnd:I,placeholder:R,required:y,selectButtonTitle:ae,startIcon:F,size:_="M",value:h,withTags:m,...B})=>{const q=a.useRef(null),[S,$]=a.useState(),[L,P]=a.useState(!1),p=J.useId(u),V=`${p}-hint`,z=`${p}-error`,E=n=>{f?f(n):$(n)},G=n=>()=>{const w=Array.isArray(h)?h.filter(g=>g!==n):(S??[]).filter(g=>g!==n);f?f(w):$(w)},A=n=>{P(n)},k=a.useRef(null),D=()=>{k.current.focus()},v=`intersection-${CSS.escape(p)}`,H=n=>{I&&I(n)};K.useIntersection(q,H,{selectorToWatch:`#${v}`,skipWhen:!L});const c=typeof h<"u"&&h!==null?h:S,W=n=>n&&typeof n=="object"&&n.value?t.jsx(Q.Tag,{tabIndex:-1,disabled:l,icon:t.jsx(X.Cross,{}),onClick:G(n.value),children:n.textValue},n.value):null;return t.jsx(U.Field,{hint:d,error:s,id:p,required:y,children:t.jsxs(Z.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(ee.FieldLabel,{onClick:D,action:T,children:x}),t.jsxs(o.Root,{onOpenChange:A,disabled:l,required:y,onValueChange:E,value:c,...B,multi:!0,children:[t.jsx(o.Trigger,{ref:k,"aria-label":x,"aria-describedby":`${V} ${z}`,id:p,startIcon:F,size:_,hasError:!!s,disabled:l,clearLabel:i,onClear:c?.length?M:void 0,paddingLeft:m&&c?.length?1:3,children:t.jsx(o.Value,{placeholder:R,textColor:c?.length?"neutral800":"neutral600",children:c?.length?m?W: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:q,children:[e,t.jsx(j.Box,{id:v,width:"100%",height:"1px"})]})})})]}),t.jsx(te.FieldHint,{}),t.jsx(re.FieldError,{})]})})},se=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(O,{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})})]})),O=oe.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};
|
|
@@ -27,4 +27,4 @@
|
|
|
27
27
|
position: absolute;
|
|
28
28
|
}
|
|
29
29
|
`}
|
|
30
|
-
`,ce=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:
|
|
30
|
+
`,ce=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:x})=>t.jsx(O,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:x,$selected:u,zIndex:1,height:"18px",width:"18px"})}),t.jsx(C.Typography,{textColor:"neutral800",children:i})]}),e]}));exports.MultiSelect=le;exports.MultiSelectGroup=ce;exports.MultiSelectOption=se;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs as d, jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import * as
|
|
2
|
+
import * as a from "react";
|
|
3
3
|
import { Cross as D } from "@strapi/icons";
|
|
4
4
|
import J, { css as S } from "styled-components";
|
|
5
5
|
import { Item as T, ItemIndicator as F, ItemText as K, Group as N, Root as Q, Trigger as U, Value as Z, Portal as ee, Content as re, Viewport as te } from "./SelectParts.js";
|
|
@@ -9,22 +9,22 @@ import { useIntersection as ie } from "../hooks/useIntersection.js";
|
|
|
9
9
|
import { Tag as le } from "../Tag/Tag.js";
|
|
10
10
|
import { Box as x } from "../Box/Box.js";
|
|
11
11
|
import { Typography as O } from "../Typography/Typography.js";
|
|
12
|
-
import { Field as
|
|
13
|
-
import { Flex as
|
|
12
|
+
import { Field as ce } from "../Field/Field.js";
|
|
13
|
+
import { Flex as ae } from "../Flex/Flex.js";
|
|
14
14
|
import { FieldLabel as de } from "../Field/FieldLabel.js";
|
|
15
15
|
import { FieldHint as se } from "../Field/FieldHint.js";
|
|
16
16
|
import { FieldError as he } from "../Field/FieldError.js";
|
|
17
|
-
const Fe = ({ children: t, clearLabel: o = "Clear", customizeContent: n, disabled: i, error: l, hint: s, id: h, label:
|
|
18
|
-
const k =
|
|
19
|
-
|
|
17
|
+
const Fe = ({ children: t, clearLabel: o = "Clear", customizeContent: n, disabled: i, error: l, hint: s, id: h, label: f, labelAction: B, onChange: m, onClear: L, onReachEnd: I, placeholder: V, required: $, selectButtonTitle: ue, startIcon: j, size: E = "M", value: u, withTags: b, ...z }) => {
|
|
18
|
+
const k = a.useRef(null), [C, v] = a.useState(), [A, G] = a.useState(!1), p = oe(h), W = `${p}-hint`, q = `${p}-error`, H = (r) => {
|
|
19
|
+
m ? m(r) : v(r);
|
|
20
20
|
}, P = (r) => () => {
|
|
21
|
-
const R = Array.isArray(
|
|
22
|
-
|
|
21
|
+
const R = Array.isArray(u) ? u.filter((g) => g !== r) : (C ?? []).filter((g) => g !== r);
|
|
22
|
+
m ? m(R) : v(R);
|
|
23
23
|
}, X = (r) => {
|
|
24
24
|
G(r);
|
|
25
|
-
}, w =
|
|
25
|
+
}, w = a.useRef(null), Y = () => {
|
|
26
26
|
w.current.focus();
|
|
27
|
-
}, y = `intersection-${CSS.escape(
|
|
27
|
+
}, y = `intersection-${CSS.escape(p)}`;
|
|
28
28
|
ie(k, (r) => {
|
|
29
29
|
I && I(r);
|
|
30
30
|
}, {
|
|
@@ -35,9 +35,9 @@ const Fe = ({ children: t, clearLabel: o = "Clear", customizeContent: n, disable
|
|
|
35
35
|
*/
|
|
36
36
|
skipWhen: !A
|
|
37
37
|
});
|
|
38
|
-
const
|
|
39
|
-
return e(
|
|
40
|
-
}, Oe =
|
|
38
|
+
const c = typeof u < "u" && u !== null ? u : C, _ = (r) => r && typeof r == "object" && r.value ? e(le, { tabIndex: -1, disabled: i, icon: e(D, {}), onClick: P(r.value), children: r.textValue }, r.value) : null;
|
|
39
|
+
return e(ce, { hint: s, error: l, id: p, required: $, children: d(ae, { direction: "column", alignItems: "stretch", gap: 1, children: [e(de, { onClick: Y, action: B, children: f }), d(Q, { onOpenChange: X, disabled: i, required: $, onValueChange: H, value: c, ...z, multi: !0, children: [e(U, { ref: w, "aria-label": f, "aria-describedby": `${W} ${q}`, id: p, startIcon: j, size: E, hasError: !!l, disabled: i, clearLabel: o, onClear: c?.length ? L : void 0, paddingLeft: b && c?.length ? 1 : 3, children: e(Z, { placeholder: V, textColor: c?.length ? "neutral800" : "neutral600", children: c?.length ? b ? _ : n ? n(c) : void 0 : void 0 }) }), e(ee, { children: e(re, { position: "popper", sideOffset: 4, children: d(te, { ref: k, children: [t, e(x, { id: y, width: "100%", height: "1px" })] }) }) })] }), e(se, {}), e(he, {})] }) });
|
|
40
|
+
}, Oe = a.forwardRef(({ value: t, children: o, startIcon: n, ...i }, l) => d(T, { ref: l, value: t.toString(), ...i, children: [n && e(x, { as: "span", "aria-hidden": !0, children: n }), e(F, { children: ({ isSelected: s, isIntermediate: h }) => e(M, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: h, $selected: s, zIndex: 1, height: "18px", width: "18px" }) }), e(O, { textColor: "neutral800", children: e(K, { children: o }) })] })), M = J(x)`
|
|
41
41
|
border: 1px solid
|
|
42
42
|
${({ theme: t, $selected: o, $indeterminate: n }) => o || n ? t.colors.primary600 : t.colors.neutral300};
|
|
43
43
|
background-color: ${({ theme: t, $selected: o, $indeterminate: n }) => o || n ? t.colors.primary600 : t.colors.neutral0};
|
|
@@ -66,7 +66,7 @@ const Fe = ({ children: t, clearLabel: o = "Clear", customizeContent: n, disable
|
|
|
66
66
|
position: absolute;
|
|
67
67
|
}
|
|
68
68
|
`}
|
|
69
|
-
`, Me =
|
|
69
|
+
`, Me = a.forwardRef(({ children: t, label: o, startIcon: n, values: i = [], ...l }, s) => d(N, { ref: s, children: [d(T, { value: i, ...l, children: [n && e(x, { as: "span", "aria-hidden": !0, children: n }), e(F, { children: ({ isSelected: h, isIntermediate: f }) => e(M, { hasRadius: !0, overflow: "hidden", position: "relative", $indeterminate: f, $selected: h, zIndex: 1, height: "18px", width: "18px" }) }), e(O, { textColor: "neutral800", children: o })] }), t] }));
|
|
70
70
|
export {
|
|
71
71
|
Fe as MultiSelect,
|
|
72
72
|
Me as MultiSelectGroup,
|
|
@@ -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"),E=require("react"),l=require("./SelectParts.cjs"),V=require("../hooks/useId.cjs"),H=require("../hooks/useIntersection.cjs"),O=require("../Box/Box.cjs"),W=require("../Typography/Typography.cjs"),z=require("../Field/Field.cjs"),D=require("../Flex/Flex.cjs"),A=require("../Field/FieldLabel.cjs"),G=require("../Field/FieldHint.cjs"),J=require("../Field/FieldError.cjs");function K(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 o=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(i,n,o.get?o:{enumerable:!0,get:()=>t[n]})}}return i.default=t,Object.freeze(i)}const d=K(E),Q=({children:t,clearLabel:i="Clear",customizeContent:n,disabled:o,error:a,hint:m,id:q,label:p,labelAction:y,onChange:h,onClear:f,onReachEnd:x,placeholder:F,required:g,selectButtonTitle:X,startIcon:R,size:T="M",value:u,...B})=>{const[C,j]=d.useState(),[_,$]=d.useState(!1),s=V.useId(q),v=`${s}-hint`,w=`${s}-error`,P=r=>{h?h(typeof u=="number"?Number(r):r):j(r)},k=r=>{$(r)},L=r=>{f&&f(r),h||j("")},S=d.useRef(null),M=()=>{S.current.focus()},b=d.useRef(null),I=`intersection-${CSS.escape(s)}`,N=r=>{x&&x(r)};H.useIntersection(b,N,{selectorToWatch:`#${I}`,skipWhen:!_});const c=(typeof u<"u"&&u!==null?u.toString():C)??"";return e.jsx(z.Field,{hint:m,error:a,id:s,required:g,children:e.jsxs(D.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsx(A.FieldLabel,{onClick:M,action:y,children:p}),e.jsxs(l.Root,{onOpenChange:k,disabled:o,required:g,onValueChange:P,value:c,...B,children:[e.jsx(l.Trigger,{ref:S,"aria-label":p,"aria-describedby":`${v} ${w}`,id:s,startIcon:R,size:T,hasError:!!a,disabled:o,clearLabel:i,onClear:c&&f?L:void 0,children:e.jsx(l.Value,{placeholder:F,textColor:c?"neutral800":"neutral600",children:c&&n?n(c):void 0})}),e.jsx(l.Portal,{children:e.jsx(l.Content,{position:"popper",sideOffset:4,children:e.jsxs(l.Viewport,{ref:b,children:[t,e.jsx(O.Box,{id:I,width:"100%",height:"1px"})]})})})]}),e.jsx(G.FieldHint,{}),e.jsx(J.FieldError,{})]})})},U=d.forwardRef(({value:t,startIcon:i,children:n,...o},a)=>e.jsxs(l.Item,{ref:a,value:t.toString(),...o,children:[i&&e.jsx(O.Box,{as:"span","aria-hidden":!0,children:i}),e.jsx(W.Typography,{textColor:"neutral800",children:e.jsx(l.ItemText,{children:n})})]}));exports.SingleSelect=Q;exports.SingleSelectOption=U;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as s, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import * as i from "react";
|
|
3
3
|
import { Item as q, ItemText as H, Root as M, Trigger as P, Value as _, Portal as z, Content as A, Viewport as D } from "./SelectParts.js";
|
|
4
4
|
import { useId as G } from "../hooks/useId.js";
|
|
@@ -10,13 +10,13 @@ import { Flex as U } from "../Flex/Flex.js";
|
|
|
10
10
|
import { FieldLabel as X } from "../Field/FieldLabel.js";
|
|
11
11
|
import { FieldHint as Y } from "../Field/FieldHint.js";
|
|
12
12
|
import { FieldError as Z } from "../Field/FieldError.js";
|
|
13
|
-
const
|
|
14
|
-
const [w, I] = i.useState(), [
|
|
15
|
-
|
|
16
|
-
},
|
|
17
|
-
|
|
13
|
+
const pe = ({ children: h, clearLabel: o = "Clear", customizeContent: l, disabled: c, error: d, hint: R, id: O, label: p, labelAction: B, onChange: f, onClear: u, onReachEnd: m, placeholder: F, required: g, selectButtonTitle: ee, startIcon: T, size: $ = "M", value: a, ...y }) => {
|
|
14
|
+
const [w, I] = i.useState(), [k, v] = i.useState(!1), t = G(O), E = `${t}-hint`, L = `${t}-error`, N = (r) => {
|
|
15
|
+
f ? f(typeof a == "number" ? Number(r) : r) : I(r);
|
|
16
|
+
}, V = (r) => {
|
|
17
|
+
v(r);
|
|
18
18
|
}, j = (r) => {
|
|
19
|
-
|
|
19
|
+
u && u(r), f || I("");
|
|
20
20
|
}, S = i.useRef(null), W = () => {
|
|
21
21
|
S.current.focus();
|
|
22
22
|
}, b = i.useRef(null), x = `intersection-${CSS.escape(t)}`;
|
|
@@ -28,12 +28,12 @@ const ue = ({ children: s, clearLabel: o = "Clear", customizeContent: l, disable
|
|
|
28
28
|
* We need to know when the select is open because only then will viewportRef
|
|
29
29
|
* not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
|
|
30
30
|
*/
|
|
31
|
-
skipWhen: !
|
|
31
|
+
skipWhen: !k
|
|
32
32
|
});
|
|
33
|
-
const n = (typeof
|
|
34
|
-
return e(Q, { hint: R, error:
|
|
35
|
-
}, me = i.forwardRef(({ value:
|
|
33
|
+
const n = (typeof a < "u" && a !== null ? a.toString() : w) ?? "";
|
|
34
|
+
return e(Q, { hint: R, error: d, id: t, required: g, children: s(U, { direction: "column", alignItems: "stretch", gap: 1, children: [e(X, { onClick: W, action: B, children: p }), s(M, { onOpenChange: V, disabled: c, required: g, onValueChange: N, value: n, ...y, children: [e(P, { ref: S, "aria-label": p, "aria-describedby": `${E} ${L}`, id: t, startIcon: T, size: $, hasError: !!d, disabled: c, clearLabel: o, onClear: n && u ? j : void 0, children: e(_, { placeholder: F, textColor: n ? "neutral800" : "neutral600", children: n && l ? l(n) : void 0 }) }), e(z, { children: e(A, { position: "popper", sideOffset: 4, children: s(D, { ref: b, children: [h, e(C, { id: x, width: "100%", height: "1px" })] }) }) })] }), e(Y, {}), e(Z, {})] }) });
|
|
35
|
+
}, me = i.forwardRef(({ value: h, startIcon: o, children: l, ...c }, d) => s(q, { ref: d, value: h.toString(), ...c, children: [o && e(C, { as: "span", "aria-hidden": !0, children: o }), e(K, { textColor: "neutral800", children: e(H, { children: l }) })] }));
|
|
36
36
|
export {
|
|
37
|
-
|
|
37
|
+
pe as SingleSelect,
|
|
38
38
|
me as SingleSelectOption
|
|
39
39
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@strapi/design-system",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.4-alpha.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"sideEffects": false,
|
|
@@ -24,14 +24,14 @@
|
|
|
24
24
|
"@radix-ui/react-dismissable-layer": "^1.0.3",
|
|
25
25
|
"@radix-ui/react-dropdown-menu": "^2.0.4",
|
|
26
26
|
"@radix-ui/react-use-callback-ref": "^1.0.0",
|
|
27
|
-
"@strapi/ui-primitives": "^1.7.
|
|
27
|
+
"@strapi/ui-primitives": "^1.7.4-alpha.0",
|
|
28
28
|
"@uiw/react-codemirror": "^4.19.16",
|
|
29
29
|
"compute-scroll-into-view": "^3.0.3",
|
|
30
30
|
"prop-types": "^15.8.1"
|
|
31
31
|
},
|
|
32
32
|
"devDependencies": {
|
|
33
33
|
"@playwright/test": "1.33.0",
|
|
34
|
-
"@strapi/icons": "^1.7.
|
|
34
|
+
"@strapi/icons": "^1.7.4-alpha.0",
|
|
35
35
|
"@types/react-router-dom": "^5.3.3",
|
|
36
36
|
"@types/styled-components": "^5.1.26",
|
|
37
37
|
"axe-playwright": "^1.2.3",
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"test:e2e:watch": "chokidar '**/__tests__/*.e2e.js' -c 'npm run test:e2e -- --retries=0 {path}'",
|
|
63
63
|
"test:e2e:debug": "cross-env PWDEBUG=1 playwright test"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "2930a79482037e056d7900556e11c11881824459"
|
|
66
66
|
}
|