@strapi/design-system 1.8.1 → 1.8.2
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 +2 -2
- package/dist/Combobox/Combobox.js +9 -9
- package/dist/DatePicker/DatePicker.cjs +9 -9
- package/dist/DatePicker/DatePicker.js +66 -65
- package/dist/Popover/Popover.cjs +3 -3
- package/dist/Popover/Popover.js +52 -51
- package/dist/Select/MultiSelect.cjs +5 -5
- package/dist/Select/MultiSelect.js +41 -41
- package/dist/Select/SingleSelect.cjs +1 -1
- package/dist/Select/SingleSelect.js +32 -32
- package/dist/ToggleInput/ToggleInput.cjs +20 -4
- package/dist/ToggleInput/ToggleInput.js +43 -18
- package/dist/Typography/Typography.cjs +1 -1
- package/dist/Typography/Typography.js +6 -6
- package/dist/Typography/utils.cjs +1 -1
- package/dist/Typography/utils.js +4 -5
- package/package.json +10 -10
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),me=require("react"),M=require("@strapi/icons"),n=require("@strapi/ui-primitives"),Ce=require("styled-components"),$e=require("../helpers/strings.cjs"),j=require("../hooks/useControllableState.cjs"),I=require("../hooks/useId.cjs"),je=require("../hooks/useIntersection.cjs"),N=require("../themes/utils.cjs"),Ie=require("../Loader/Loader.cjs"),y=require("../Box/Box.cjs"),u=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),ye=require("../Field/Field.cjs"),we=require("../Field/FieldLabel.cjs"),qe=require("../Field/FieldHint.cjs"),Fe=require("../Field/FieldError.cjs"),Te=e=>e&&e.__esModule?e:{default:e};function ve(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),me=require("react"),M=require("@strapi/icons"),n=require("@strapi/ui-primitives"),Ce=require("styled-components"),$e=require("../helpers/strings.cjs"),j=require("../hooks/useControllableState.cjs"),I=require("../hooks/useId.cjs"),je=require("../hooks/useIntersection.cjs"),N=require("../themes/utils.cjs"),Ie=require("../Loader/Loader.cjs"),y=require("../Box/Box.cjs"),u=require("../Typography/Typography.cjs"),b=require("../Flex/Flex.cjs"),ye=require("../Field/Field.cjs"),we=require("../Field/FieldLabel.cjs"),qe=require("../Field/FieldHint.cjs"),Fe=require("../Field/FieldError.cjs"),Te=e=>e&&e.__esModule?e:{default:e};function ve(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const l=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(r,s,l.get?l:{enumerable:!0,get:()=>e[s]})}}return r.default=e,Object.freeze(r)}const x=ve(me),a=Te(Ce),H=({allowCustomValue:e,autocomplete:r,children:s,className:l,clearLabel:d="clear",creatable:i=!1,createMessage:f=p=>`Create "${p}"`,defaultFilterValue:h,defaultTextValue:w,defaultOpen:W=!1,open:U,onOpenChange:A,disabled:m=!1,error:q,filterValue:G,hasMoreItems:J=!1,id:F,isPrintableCharacter:K,loading:C=!1,loadingMessage:Q="Loading content...",noOptionsMessage:X=()=>"No results found",onChange:T,onClear:$,onCreateOption:v,onFilterValueChange:Y,onInputChange:R,onTextValueChange:Z,onLoadMore:k,placeholder:ee="Select or enter a value",required:oe=!1,size:re="M",startIcon:O,textValue:te,value:V,...ne})=>{const[p,se]=j.useControllableState({prop:U,defaultProp:W,onChange:A}),[c,S]=j.useControllableState({prop:te,defaultProp:e&&!w?V:w,onChange:Z}),[le,B]=j.useControllableState({prop:G,defaultProp:h,onChange:Y}),P=x.useRef(null),_=x.useRef(null),ie=x.useRef(null),ae=t=>{$&&!m&&(S(""),B(""),$(t),_.current.focus())},de=t=>{se(t)},ce=t=>{S(t)},ue=t=>{B(t)},he=t=>{R&&R(t)},pe=t=>{T&&T(t)},be=t=>{k&&J&&!C&&k(t)},z=()=>{v&&c&&v(c)},E=I.useId(F),xe=I.useId(),D=`intersection-${$e.stripReactIdOfColon(xe)}`;je.useIntersection(P,be,{selectorToWatch:`#${D}`,skipWhen:!p});const ge=`${E}-hint`,fe=`${E}-error`;return o.jsxs(n.Combobox.Root,{autocomplete:r||(i?"list":"both"),onOpenChange:de,open:p,onTextValueChange:ce,textValue:c,allowCustomValue:i||e,disabled:m,required:oe,value:V,onValueChange:pe,filterValue:le,onFilterValueChange:ue,isPrintableCharacter:K,children:[o.jsxs(Oe,{$hasError:!!q,$size:re,className:l,children:[o.jsxs(b.Flex,{flex:"1",as:"span",gap:3,children:[O?o.jsx(y.Box,{as:"span","aria-hidden":!0,children:O}):null,o.jsx(Ve,{placeholder:ee,id:F,"aria-invalid":!!q,"aria-describedby":`${ge} ${fe}`,onChange:he,ref:_,...ne})]}),o.jsxs(b.Flex,{as:"span",gap:3,children:[c&&$?o.jsx(ke,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:ae,"aria-disabled":m,"aria-label":d,title:d,ref:ie,children:o.jsx(M.Cross,{})}):null,o.jsx(Se,{children:o.jsx(M.CarretDown,{})})]})]}),o.jsx(n.Combobox.Portal,{children:o.jsx(Be,{sideOffset:4,children:o.jsxs(Pe,{ref:P,children:[s,i?o.jsx(n.Combobox.CreateItem,{onPointerUp:z,onClick:z,asChild:!0,children:o.jsx(g,{children:o.jsx(u.Typography,{children:f(c??"")})})}):null,!i&&!C?o.jsx(n.Combobox.NoValueFound,{asChild:!0,children:o.jsx(g,{$hasHover:!1,children:o.jsx(u.Typography,{children:X(c??"")})})}):null,C?o.jsx(b.Flex,{justifyContent:"center",alignItems:"center",paddingTop:2,paddingBottom:2,children:o.jsx(Ie.Loader,{small:!0,children:Q})}):null,o.jsx(y.Box,{id:D,width:"100%",height:"1px"})]})})})]})},L=({error:e,hint:r,id:s,label:l,labelAction:d,required:i=!1,...f})=>{const h=I.useId(s);return o.jsx(ye.Field,{hint:r,error:e,id:h,required:i,children:o.jsxs(b.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[l?o.jsx(we.FieldLabel,{action:d,children:l}):null,o.jsx(H,{id:h,error:e,required:i,...f}),o.jsx(qe.FieldHint,{}),o.jsx(Fe.FieldError,{})]})})},Re=e=>o.jsx(L,{...e,creatable:!0}),ke=a.default(y.Box)`
|
|
2
2
|
border: none;
|
|
3
3
|
|
|
4
4
|
svg {
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
z-index: ${({theme:e})=>e.zIndices[1]};
|
|
74
74
|
`,Pe=a.default(n.Combobox.Viewport)`
|
|
75
75
|
padding: ${({theme:e})=>e.spaces[1]};
|
|
76
|
-
`,_e=x.forwardRef(({children:e,value:r,disabled:s,textValue:
|
|
76
|
+
`,_e=x.forwardRef(({children:e,value:r,disabled:s,textValue:l,...d},i)=>o.jsx(n.Combobox.ComboboxItem,{asChild:!0,value:r,disabled:s,textValue:l,children:o.jsx(g,{ref:i,...d,children:o.jsx(n.Combobox.ItemText,{asChild:!0,children:o.jsx(u.Typography,{children:e})})})})),g=a.default.div`
|
|
77
77
|
width: 100%;
|
|
78
78
|
border: none;
|
|
79
79
|
text-align: left;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
1
|
+
import { jsx as r, jsxs as c } from "react/jsx-runtime";
|
|
2
2
|
import * as m from "react";
|
|
3
3
|
import { Cross as me, CarretDown as ge } from "@strapi/icons";
|
|
4
4
|
import { Combobox as n } from "@strapi/ui-primitives";
|
|
@@ -16,12 +16,12 @@ import { Field as we } from "../Field/Field.js";
|
|
|
16
16
|
import { FieldLabel as Re } from "../Field/FieldLabel.js";
|
|
17
17
|
import { FieldHint as ve } from "../Field/FieldHint.js";
|
|
18
18
|
import { FieldError as ye } from "../Field/FieldError.js";
|
|
19
|
-
const ke = ({ allowCustomValue: e, autocomplete: o, children:
|
|
19
|
+
const ke = ({ allowCustomValue: e, autocomplete: o, children: u, className: a, clearLabel: s = "clear", creatable: i = !1, createMessage: b = (f) => `Create "${f}"`, defaultFilterValue: p, defaultTextValue: y, defaultOpen: W = !1, open: L, onOpenChange: U, disabled: $ = !1, error: k, filterValue: A, hasMoreItems: G = !1, id: V, isPrintableCharacter: J, loading: C = !1, loadingMessage: K = "Loading content...", noOptionsMessage: M = () => "No results found", onChange: T, onClear: x, onCreateOption: F, onFilterValueChange: Q, onInputChange: O, onTextValueChange: X, onLoadMore: z, placeholder: Y = "Select or enter a value", required: Z = !1, size: _ = "M", startIcon: B, textValue: ee, value: P, ...re }) => {
|
|
20
20
|
const [f, oe] = I({
|
|
21
21
|
prop: L,
|
|
22
22
|
defaultProp: W,
|
|
23
23
|
onChange: U
|
|
24
|
-
}), [
|
|
24
|
+
}), [d, S] = I({
|
|
25
25
|
prop: ee,
|
|
26
26
|
defaultProp: e && !y ? P : y,
|
|
27
27
|
onChange: X
|
|
@@ -44,7 +44,7 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: c, className: u, c
|
|
|
44
44
|
}, ue = (t) => {
|
|
45
45
|
z && G && !C && z(t);
|
|
46
46
|
}, N = () => {
|
|
47
|
-
F &&
|
|
47
|
+
F && d && F(d);
|
|
48
48
|
}, D = w(V), he = w(), H = `intersection-${be(he)}`;
|
|
49
49
|
$e(E, ue, {
|
|
50
50
|
selectorToWatch: `#${H}`,
|
|
@@ -55,10 +55,10 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: c, className: u, c
|
|
|
55
55
|
skipWhen: !f
|
|
56
56
|
});
|
|
57
57
|
const pe = `${D}-hint`, fe = `${D}-error`;
|
|
58
|
-
return
|
|
59
|
-
}, Ve = ({ error: e, hint: o, id:
|
|
60
|
-
const p = w(
|
|
61
|
-
return r(we, { hint: o, error: e, id: p, required: i, children:
|
|
58
|
+
return c(n.Root, { autocomplete: o || (i ? "list" : "both"), onOpenChange: le, open: f, onTextValueChange: ae, textValue: d, allowCustomValue: i || e, disabled: $, required: Z, value: P, onValueChange: ce, filterValue: te, onFilterValueChange: se, isPrintableCharacter: J, children: [c(Fe, { $hasError: !!k, $size: _, className: a, children: [c(g, { flex: "1", as: "span", gap: 3, children: [B ? r(R, { as: "span", "aria-hidden": !0, children: B }) : null, r(Oe, { placeholder: Y, id: V, "aria-invalid": !!k, "aria-describedby": `${pe} ${fe}`, onChange: de, ref: q, ...re })] }), c(g, { as: "span", gap: 3, children: [d && x ? r(Te, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ie, "aria-disabled": $, "aria-label": s, title: s, ref: ne, children: r(me, {}) }) : null, r(ze, { children: r(ge, {}) })] })] }), r(n.Portal, { children: r(Be, { sideOffset: 4, children: c(Pe, { ref: E, children: [u, i ? r(n.CreateItem, { onPointerUp: N, onClick: N, asChild: !0, children: r(v, { children: r(h, { children: b(d ?? "") }) }) }) : null, !i && !C ? r(n.NoValueFound, { asChild: !0, children: r(v, { $hasHover: !1, children: r(h, { children: M(d ?? "") }) }) }) : null, C ? r(g, { justifyContent: "center", alignItems: "center", paddingTop: 2, paddingBottom: 2, children: r(Ie, { small: !0, children: K }) }) : null, r(R, { id: H, width: "100%", height: "1px" })] }) }) })] });
|
|
59
|
+
}, Ve = ({ error: e, hint: o, id: u, label: a, labelAction: s, required: i = !1, ...b }) => {
|
|
60
|
+
const p = w(u);
|
|
61
|
+
return r(we, { hint: o, error: e, id: p, required: i, children: c(g, { direction: "column", alignItems: "stretch", gap: 1, children: [a ? r(Re, { action: s, children: a }) : null, r(ke, { id: p, error: e, required: i, ...b }), r(ve, {}), r(ye, {})] }) });
|
|
62
62
|
}, Ye = (e) => r(Ve, { ...e, creatable: !0 }), Te = l(R)`
|
|
63
63
|
border: none;
|
|
64
64
|
|
|
@@ -134,7 +134,7 @@ const ke = ({ allowCustomValue: e, autocomplete: o, children: c, className: u, c
|
|
|
134
134
|
z-index: ${({ theme: e }) => e.zIndices[1]};
|
|
135
135
|
`, Pe = l(n.Viewport)`
|
|
136
136
|
padding: ${({ theme: e }) => e.spaces[1]};
|
|
137
|
-
`, Ze = m.forwardRef(({ children: e, value: o, disabled:
|
|
137
|
+
`, Ze = m.forwardRef(({ children: e, value: o, disabled: u, textValue: a, ...s }, i) => r(n.ComboboxItem, { asChild: !0, value: o, disabled: u, textValue: a, children: r(v, { ref: i, ...s, children: r(n.ItemText, { asChild: !0, children: r(h, { children: e }) }) }) })), v = l.div`
|
|
138
138
|
width: 100%;
|
|
139
139
|
border: none;
|
|
140
140
|
text-align: left;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ye=require("react"),$=require("@floating-ui/react-dom"),D=require("@internationalized/date"),xe=require("@radix-ui/react-focus-guards"),Ce=require("@radix-ui/react-focus-scope"),oe=require("@strapi/icons"),q=require("@strapi/ui-primitives"),be=require("react-dom"),we=require("react-remove-scroll"),ke=require("styled-components"),Te=require("../DesignSystemProvider.cjs"),Pe=require("../DismissibleLayer/index.cjs"),Se=require("../helpers/context.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),ye=require("react"),$=require("@floating-ui/react-dom"),D=require("@internationalized/date"),xe=require("@radix-ui/react-focus-guards"),Ce=require("@radix-ui/react-focus-scope"),oe=require("@strapi/icons"),q=require("@strapi/ui-primitives"),be=require("react-dom"),we=require("react-remove-scroll"),ke=require("styled-components"),Te=require("../DesignSystemProvider.cjs"),Pe=require("../DismissibleLayer/index.cjs"),Se=require("../helpers/context.cjs"),je=require("../helpers/deprecations.cjs"),J=require("../hooks/useComposeRefs.cjs"),Ee=require("../hooks/useControllableState.cjs"),R=require("../hooks/useDateFormatter.cjs"),se=require("../hooks/useId.cjs"),Y=require("../Select/SingleSelect.cjs"),Ie=require("../Portal/Portal.cjs"),B=require("../Flex/Flex.cjs"),ne=require("../themes/utils.cjs"),U=require("../Box/Box.cjs"),W=require("../Typography/Typography.cjs"),Fe=require("../Field/Field.cjs"),Re=require("../Field/FieldLabel.cjs"),ve=require("../Field/FieldHint.cjs"),Ae=require("../Field/FieldError.cjs"),Me=e=>e&&e.__esModule?e:{default:e};function qe(e){if(e&&e.__esModule)return e;const r=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(r,n,t.get?t:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const c=qe(ye),E=Me(ke),_e=200,re=15,[Oe,_]=Se.createContext("DatePicker"),le=c.forwardRef(({calendarLabel:e,className:r,initialDate:n,locale:t,maxDate:o,minDate:i,monthSelectLabel:g="Month",onChange:d,selectedDate:l,yearSelectLabel:b="Year",error:k,id:h,disabled:x=!1,placeholder:T,required:w=!1,onClear:S,clearLabel:j="Clear",size:u,ariaLabel:p,selectedDateLabel:s,...f},m)=>{const P=D.getLocalTimeZone(),v=Te.useDesignSystem("DatePicker"),A=t??v.locale,M=R.useDateFormatter(A,{day:"2-digit",month:"2-digit",year:"numeric"}),[O,H]=c.useState(!1),[Z,C]=c.useState(null),[I,G]=c.useState(null),[ce,ue]=c.useState(null),[V,N]=c.useState(),[L,Q]=Ee.useControllableState({defaultProp:n?F(n):void 0,prop:l?F(l):void 0,onChange(y){d&&d(y?.toDate(P))}}),[ee,te]=c.useMemo(()=>{const y=n?F(n):D.today("UTC"),z=i?F(i):y.set({day:1,month:1,year:y.year-_e});let X=o?F(o):y.set({day:31,month:12,year:y.year+re});return X.compare(z)<0&&(X=z.set({day:31,month:12,year:z.year+re})),[z,X]},[i,o,n]),[de,K]=c.useState(Ne({currentValue:L,minDate:ee,maxDate:te})),fe=se.useId(),he=c.useRef(null),me=y=>{S&&!x&&(N(""),Q(void 0),S(y),I?.focus())},pe=c.useCallback(y=>{y&&L&&K(L),H(y)},[L]);c.useLayoutEffect(()=>{if(l){const y=F(l);N(M.format(y.toDate(P))),K(y)}else N("")},[l,M,P]),c.useLayoutEffect(()=>{if(n&&V===void 0){const y=F(n);N(M.format(y.toDate(P)))}},[n,V,M,P]);const ge=`${h}-hint`,De=`${h}-error`;return a.jsxs(Oe,{calendarDate:de,content:ce,contentId:fe,disabled:x,locale:A,minDate:ee,maxDate:te,open:O,onCalendarDateChange:K,onContentChange:ue,onOpenChange:pe,onTextInputChange:G,onTextValueChange:N,onTriggerChange:C,onValueChange:Q,required:w,textInput:I,textValue:V,timeZone:P,trigger:Z,value:L,children:[a.jsxs($e,{className:r,size:u,hasError:!!k,children:[a.jsx(Ye,{"aria-hidden":!0}),a.jsx(Ue,{ref:m,placeholder:T,"aria-describedby":`${ge} ${De}`,id:h,...f}),V&&S?a.jsx(ze,{as:"button",hasRadius:!0,background:"transparent",type:"button",onClick:me,"aria-disabled":x,"aria-label":j,title:j,ref:he,children:a.jsx(oe.Cross,{})}):null]}),a.jsx(Ie.Portal,{children:a.jsx(Ge,{label:e,children:a.jsx(et,{monthSelectLabel:g,yearSelectLabel:b})})})]})}),ae=e=>!!e.match(/^[^a-zA-Z]*$/),Ne=({currentValue:e,minDate:r,maxDate:n})=>{const t=D.today("UTC");return e||(D.minDate(r,t)===r&&D.maxDate(n,t)===n?t:D.minDate(r,t)===t?r:D.maxDate(n,t)===t?n:t)},Le="DatePickerTrigger",$e=c.forwardRef(({hasError:e,size:r="M",...n},t)=>{const o=_(Le),i=J.useComposedRefs(t,d=>o.onTriggerChange(d)),g=()=>{o.disabled||o.onOpenChange(!0)};return a.jsx(Ce.FocusScope,{asChild:!0,trapped:o.open,onMountAutoFocus:d=>{d.preventDefault()},onUnmountAutoFocus:d=>{document.getSelection()?.empty(),d.preventDefault()},children:a.jsx(Ve,{ref:i,$hasError:e,$size:r,...n,paddingLeft:3,paddingRight:3,hasRadius:!0,gap:3,overflow:"hidden",background:o.disabled?"neutral150":"neutral0",onClick:q.composeEventHandlers(n.onClick,()=>{o.textInput?.focus()}),onPointerDown:q.composeEventHandlers(n.onPointerDown,d=>{const l=d.target;l.hasPointerCapture(d.pointerId)&&l.releasePointerCapture(d.pointerId),(l.closest("button")??l.closest("div"))===d.currentTarget&&d.button===0&&d.ctrlKey===!1&&(g(),o.textInput?.focus())})})})}),Ve=E.default(B.Flex)`
|
|
2
2
|
border: 1px solid ${({theme:e,$hasError:r})=>r?e.colors.danger600:e.colors.neutral200};
|
|
3
3
|
min-height: ${({theme:e,$size:r})=>ne.getThemeSize("input")({theme:e,size:r})};
|
|
4
4
|
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
}
|
|
15
15
|
|
|
16
16
|
${({theme:e,$hasError:r})=>ne.inputFocusStyle()({theme:e,hasError:r})};
|
|
17
|
-
`,ze=
|
|
17
|
+
`,ze=E.default(U.Box)`
|
|
18
18
|
border: none;
|
|
19
19
|
|
|
20
20
|
svg {
|
|
@@ -25,11 +25,11 @@
|
|
|
25
25
|
svg path {
|
|
26
26
|
fill: ${({theme:e})=>e.colors.neutral600};
|
|
27
27
|
}
|
|
28
|
-
`,Ye=
|
|
28
|
+
`,Ye=E.default(oe.Calendar)`
|
|
29
29
|
& > path {
|
|
30
30
|
fill: ${({theme:e})=>e.colors.neutral500};
|
|
31
31
|
}
|
|
32
|
-
`,Be="DatePickerTextInput",Ue=c.forwardRef(({placeholder:e,...r},n)=>{const t=_(Be),{onTextValueChange:o,textValue:i,onTextInputChange:g,onOpenChange:d,disabled:l,locale:b}=t,k=J.useComposedRefs(n,u=>g(u)),
|
|
32
|
+
`,Be="DatePickerTextInput",Ue=c.forwardRef(({placeholder:e,...r},n)=>{const t=_(Be),{onTextValueChange:o,textValue:i,onTextInputChange:g,onOpenChange:d,disabled:l,locale:b}=t,k=J.useComposedRefs(n,u=>g(u)),h=()=>{l||d(!0)},x=R.useDateFormatter(b,{year:"numeric",month:"2-digit",day:"2-digit"}),[T,w,S]=c.useMemo(()=>{const u=x.formatToParts(new Date),p=u.filter(m=>m.type==="year"||m.type==="month"||m.type==="day"),s=p.map(m=>{switch(m.type){case"day":return"DD";case"month":return"MM";case"year":return"YYYY";default:return""}}),f=u.find(m=>m.type==="literal")?.value??"";return[s,f,p]},[x]),j=T.map(u=>`\\d${u.length}`).join(w);return a.jsx(He,{role:"combobox",type:"text",inputMode:"numeric",ref:k,"aria-autocomplete":"none","aria-controls":t.contentId,"aria-disabled":t.disabled,"aria-expanded":t.open,"aria-required":t.required,"aria-haspopup":"dialog","data-state":t.open?"open":"closed",disabled:l,"data-disabled":l?"":void 0,pattern:j,placeholder:e??T.join(w),...r,value:i??"",onBlur:q.composeEventHandlers(r.onBlur,()=>{if(!t.textValue){t.onValueChange(void 0);return}t.onTextValueChange(x.format(t.calendarDate.toDate(t.timeZone))),t.onValueChange(t.calendarDate)}),onChange:q.composeEventHandlers(r.onChange,u=>{if(ae(u.target.value)){const p=u.target.value.split(w),[s,f,m]=S.map((C,I)=>{const G=p[I];return{...C,value:G}}).sort((C,I)=>C.type==="year"?1:I.type==="year"?-1:C.type==="month"?1:I.type==="month"?-1:0).map(C=>C.value),P=t.calendarDate.year;let v=t.calendarDate.year;if(m){let C=m.length===1?`0${m}`:m;v=m.length<3?Number(`${P}`.slice(0,4-C.length)+C):Number(C)}m&&m.length<3&&v>t.maxDate.year&&(v-=100);const A=t.calendarDate.set({year:v}),M=A.calendar.getMonthsInYear(A),O=A.set({month:f&&Number(f)<=M?Number(f):void 0}),H=O.calendar.getDaysInMonth(O),Z=O.set({day:s&&Number(s)<=H?Number(s):void 0});t.onCalendarDateChange(We(Z,t.minDate,t.maxDate)),t.onTextValueChange(u.target.value)}}),onKeyDown:q.composeEventHandlers(r.onKeyDown,u=>{if(!t.open&&(ae(u.key)||["ArrowDown","Backspace"].includes(u.key)))h();else if(["Tab"].includes(u.key)&&t.open)u.preventDefault();else if(["Escape"].includes(u.key))t.open?t.onOpenChange(!1):(t.onValueChange(void 0),t.onTextValueChange("")),u.preventDefault();else if(t.open&&["ArrowDown","ArrowUp","ArrowLeft","ArrowRight"].includes(u.key))switch(u.preventDefault(),u.key){case"ArrowDown":{const p=t.calendarDate.add({weeks:1});if(t.maxDate&&p.compare(t.maxDate)>0)return;t.onCalendarDateChange(p);return}case"ArrowRight":{const p=t.calendarDate.add({days:1});if(t.maxDate&&p.compare(t.maxDate)>0)return;t.onCalendarDateChange(p);return}case"ArrowUp":{const p=t.calendarDate.subtract({weeks:1});if(t.minDate&&p.compare(t.minDate)<0)return;t.onCalendarDateChange(p);return}case"ArrowLeft":{const p=t.calendarDate.subtract({days:1});if(t.minDate&&p.compare(t.minDate)<0)return;t.onCalendarDateChange(p)}}else t.open&&["Enter"].includes(u.key)&&(u.preventDefault(),o(x.format(t.calendarDate.toDate(t.timeZone))),t.onValueChange(t.calendarDate),t.onOpenChange(!1))})})});function We(e,r,n){return r&&(e=D.maxDate(e,r)),n&&(e=D.minDate(e,n)),e}const He=E.default.input`
|
|
33
33
|
width: 100%;
|
|
34
34
|
font-size: ${14/16}rem;
|
|
35
35
|
color: ${({theme:e})=>e.colors.neutral800};
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
&[aria-disabled='true'] {
|
|
45
45
|
cursor: inherit;
|
|
46
46
|
}
|
|
47
|
-
`,Ze="DatePickerContent",Ge=c.forwardRef((e,r)=>{const[n,t]=c.useState(),o=_(Ze);if(c.useLayoutEffect(()=>{t(new DocumentFragment)},[]),!o.open){const i=n;return i?be.createPortal(a.jsx("div",{children:e.children}),i):null}return a.jsx(Xe,{...e,ref:r})}),Ke="DatePickerContent",Xe=c.forwardRef((e,r)=>{const{label:n="Choose date",...t}=e,{onOpenChange:o,...i}=_(Ke),{x:g,y:d,
|
|
47
|
+
`,Ze="DatePickerContent",Ge=c.forwardRef((e,r)=>{const[n,t]=c.useState(),o=_(Ze);if(c.useLayoutEffect(()=>{t(new DocumentFragment)},[]),!o.open){const i=n;return i?be.createPortal(a.jsx("div",{children:e.children}),i):null}return a.jsx(Xe,{...e,ref:r})}),Ke="DatePickerContent",Xe=c.forwardRef((e,r)=>{const{label:n="Choose date",...t}=e,{onOpenChange:o,...i}=_(Ke),{x:g,y:d,refs:l,strategy:b}=$.useFloating({strategy:"fixed",placement:"bottom-start",middleware:[$.offset({mainAxis:4}),$.shift(),$.flip()],elements:{reference:i.trigger},whileElementsMounted:$.autoUpdate});c.useEffect(()=>{const h=()=>{o(!1)};return window.addEventListener("blur",h),window.addEventListener("resize",h),()=>{window.removeEventListener("blur",h),window.removeEventListener("resize",h)}},[o]);const k=J.useComposedRefs(r,h=>i.onContentChange(h),l.setFloating);return xe.useFocusGuards(),a.jsx(we.RemoveScroll,{allowPinchZoom:!0,children:a.jsx(Pe.DismissibleLayer,{asChild:!0,onFocusOutside:h=>{h.preventDefault()},onDismiss:()=>{o(!1)},children:a.jsx(Je,{ref:k,"data-state":i.open?"open":"closed",onContextMenu:h=>h.preventDefault(),id:i.contentId,role:"dialog","aria-modal":"true","aria-label":n,style:{left:g,top:d,position:b},hasRadius:!0,background:"neutral0",padding:1,...t})})})}),Je=E.default(U.Box)`
|
|
48
48
|
box-shadow: ${({theme:e})=>e.shadows.filterShadow};
|
|
49
49
|
z-index: ${({theme:e})=>e.zIndices[0]};
|
|
50
50
|
border: 1px solid ${({theme:e})=>e.colors.neutral150};
|
|
51
|
-
`,Qe="DatePickerCalendar",et=c.forwardRef(({monthSelectLabel:e,yearSelectLabel:r,...n},t)=>{const{locale:o,timeZone:i,minDate:g,maxDate:d,calendarDate:l,onCalendarDateChange:b}=_(Qe),k=D.startOfMonth(l),
|
|
51
|
+
`,Qe="DatePickerCalendar",et=c.forwardRef(({monthSelectLabel:e,yearSelectLabel:r,...n},t)=>{const{locale:o,timeZone:i,minDate:g,maxDate:d,calendarDate:l,onCalendarDateChange:b}=_(Qe),k=D.startOfMonth(l),h=c.useMemo(()=>{const s=g.year,f=d.year;return[...Array(f-s+1).keys()].map(m=>(s+m).toString())},[g,d]),x=R.useDateFormatter(o,{month:"long"}),T=c.useMemo(()=>[...Array(l.calendar.getMonthsInYear(l)).keys()].map(s=>x.format(l.set({month:s+1}).toDate(i))),[l,x,i]),w=R.useDateFormatter(o,{weekday:"short"}),S=c.useMemo(()=>{let s=D.startOfWeek(D.today(i),o);return[...new Array(7).keys()].map(f=>{let P=s.add({days:f}).toDate(i);return w.format(P)})},[i,o,w]),j=s=>{if(typeof s=="number")return;const f=l.set({month:T.indexOf(s)+1});b(f)},u=s=>{if(typeof s=="number")return;const f=l.set({year:parseInt(s,10)});b(f)},p=tt(k,o);return a.jsxs(B.Flex,{ref:t,direction:"column",alignItems:"stretch",padding:4,...n,children:[a.jsxs(nt,{justifyContent:"flex-start",paddingBottom:4,paddingLeft:2,paddingRight:2,gap:2,children:[a.jsx(Y.SingleSelectInput,{label:e,size:"S",value:T[l.month-1],onChange:j,children:T.map(s=>a.jsx(Y.SingleSelectOption,{value:s,children:s},s))}),a.jsx(Y.SingleSelectInput,{size:"S",value:l.year.toString(),label:r,onChange:u,children:h.map(s=>a.jsx(Y.SingleSelectOption,{value:s,children:s},s))})]}),a.jsxs("table",{role:"grid",children:[a.jsx("thead",{"aria-hidden":!0,children:a.jsx("tr",{"aria-rowindex":0,children:S.map((s,f)=>a.jsx(rt,{"aria-colindex":f,children:s},s))})}),a.jsx("tbody",{children:[...new Array(6).keys()].map(s=>a.jsx("tr",{"aria-rowindex":s+2,children:p(s).map((f,m)=>f?a.jsx(st,{"aria-colindex":m+1,date:f,startDate:k},f.toString()):a.jsx(ie,{"aria-colindex":m+1}))},s))})]})]})}),tt=(e,r)=>n=>{let t=e.add({weeks:n}),o=[];t=D.startOfWeek(t,r);let i=D.getDayOfWeek(t,r);for(let g=0;g<i;g++)o.push(null);for(;o.length<7;){o.push(t);let g=t.add({days:1});if(D.isSameDay(t,g))break;t=g}for(;o.length<7;)o.push(null);return o},nt=E.default(B.Flex)`
|
|
52
52
|
div[role='combobox'] {
|
|
53
53
|
border: 1px solid transparent;
|
|
54
54
|
background: transparent;
|
|
@@ -69,10 +69,10 @@
|
|
|
69
69
|
background-color: ${({theme:e})=>e.colors.neutral100};
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
|
-
`,rt=c.forwardRef(({children:e,...r},n)=>a.jsx(at,{as:"th",role:"gridcell",ref:n,...r,height:`${24/16}rem`,width:`${32/16}rem`,children:a.jsx(W.Typography,{variant:"pi",fontWeight:"bold",color:"neutral800",children:e.slice(0,2)})})),at=
|
|
72
|
+
`,rt=c.forwardRef(({children:e,...r},n)=>a.jsx(at,{as:"th",role:"gridcell",ref:n,...r,height:`${24/16}rem`,width:`${32/16}rem`,children:a.jsx(W.Typography,{variant:"pi",fontWeight:"bold",color:"neutral800",children:e.slice(0,2)})})),at=E.default(U.Box)`
|
|
73
73
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
74
74
|
text-transform: capitalize;
|
|
75
|
-
`,ot="DatePickerCalendarCell",st=c.forwardRef(({date:e,startDate:r,...n},t)=>{const{timeZone:o,locale:i,calendarDate:g,onValueChange:d,onOpenChange:l,onTextValueChange:b,onCalendarDateChange:k}=_(ot),
|
|
75
|
+
`,ot="DatePickerCalendarCell",st=c.forwardRef(({date:e,startDate:r,...n},t)=>{const{timeZone:o,locale:i,calendarDate:g,onValueChange:d,onOpenChange:l,onTextValueChange:b,onCalendarDateChange:k}=_(ot),h=D.isSameDay(g,e),x=R.useDateFormatter(i,{weekday:"long",day:"numeric",month:"long",year:"numeric"}),T=c.useMemo(()=>x.format(e.toDate(o)),[x,e,o]),w=R.useDateFormatter(i,{day:"numeric",calendar:e.calendar.identifier}),S=c.useMemo(()=>w.formatToParts(e.toDate(o)).find(f=>f.type==="day").value,[w,e,o]),j=R.useDateFormatter(i,{day:"2-digit",month:"2-digit",year:"numeric"}),u=D.endOfMonth(r),p=e.compare(r)<0||e.compare(u)>0;let s="neutral900";return h?s="primary600":p&&(s="neutral600"),a.jsx(ie,{as:"td",role:"gridcell",ref:t,"aria-selected":h,...n,hasRadius:!0,"aria-label":T,tabIndex:h?0:-1,background:h?"primary100":"neutral0",cursor:"pointer",onPointerDown:q.composeEventHandlers(n.onPointerDown,f=>{f.preventDefault(),k(e),d(e),b(j.format(e.toDate(o))),l(!1)}),children:a.jsx(W.Typography,{variant:"pi",textColor:s,children:S})})}),ie=E.default(U.Box)`
|
|
76
76
|
text-align: center;
|
|
77
77
|
padding: ${7/16}rem;
|
|
78
78
|
// Trick to prevent the outline from overflowing because of the general outline-offset
|
|
@@ -85,4 +85,4 @@
|
|
|
85
85
|
color: ${({theme:e})=>e.colors.primary600};
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
|
-
`,lt=c.forwardRef((e,r)=>{const{error:n,hint:t,id:o,required:i,label:g,...d}=e,l=se.useId(o);return a.jsx(
|
|
88
|
+
`,lt=c.forwardRef((e,r)=>{const{error:n,hint:t,id:o,required:i,label:g,...d}=e,l=se.useId(o);return a.jsx(Fe.Field,{error:n,hint:t,required:i,ref:r,id:l,children:a.jsxs(B.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[a.jsx(Re.FieldLabel,{children:g}),a.jsx(le,{id:l,error:n,required:i,...d}),a.jsx(ve.FieldHint,{}),a.jsx(Ae.FieldError,{})]})})}),it=je.once(console.warn),F=e=>{if(typeof e=="string"){it("It looks like you're passing a string as representation of a Date to the DatePicker. This is deprecated, look to passing a Date instead.");const t=Date.parse(e);Number.isNaN(t)?e=new Date:e=new Date(t)}const r=e.toISOString(),n=D.parseAbsolute(r,"UTC");return D.toCalendarDate(n)},ct=lt;exports.DatePicker=ct;exports.DatePickerInput=le;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { jsxs as F, jsx as i } from "react/jsx-runtime";
|
|
2
2
|
import * as c from "react";
|
|
3
3
|
import { useFloating as be, offset as we, shift as xe, flip as ke, autoUpdate as Te } from "@floating-ui/react-dom";
|
|
4
|
-
import { getLocalTimeZone as
|
|
4
|
+
import { getLocalTimeZone as Pe, today as J, minDate as H, maxDate as X, startOfMonth as Ee, startOfWeek as le, getDayOfWeek as Ie, isSameDay as se, endOfMonth as Ae, parseAbsolute as Re, toCalendarDate as Se } from "@internationalized/date";
|
|
5
5
|
import { useFocusGuards as Me } from "@radix-ui/react-focus-guards";
|
|
6
6
|
import { FocusScope as ve } from "@radix-ui/react-focus-scope";
|
|
7
7
|
import { Cross as $e, Calendar as Fe } from "@strapi/icons";
|
|
8
|
-
import { composeEventHandlers as
|
|
9
|
-
import { createPortal as
|
|
10
|
-
import { RemoveScroll as
|
|
8
|
+
import { composeEventHandlers as N } from "@strapi/ui-primitives";
|
|
9
|
+
import { createPortal as Ne } from "react-dom";
|
|
10
|
+
import { RemoveScroll as Le } from "react-remove-scroll";
|
|
11
11
|
import I from "styled-components";
|
|
12
12
|
import { useDesignSystem as Oe } from "../DesignSystemProvider.js";
|
|
13
13
|
import { DismissibleLayer as _e } from "../DismissibleLayer/index.js";
|
|
@@ -27,7 +27,7 @@ import { Field as Ze } from "../Field/Field.js";
|
|
|
27
27
|
import { FieldLabel as qe } from "../Field/FieldLabel.js";
|
|
28
28
|
import { FieldHint as Ke } from "../Field/FieldHint.js";
|
|
29
29
|
import { FieldError as Ge } from "../Field/FieldError.js";
|
|
30
|
-
const je = 200, oe = 15, [He,
|
|
30
|
+
const je = 200, oe = 15, [He, L] = Ve("DatePicker"), Xe = c.forwardRef(({
|
|
31
31
|
/**
|
|
32
32
|
* DatePickerCalendar props
|
|
33
33
|
*/
|
|
@@ -45,12 +45,12 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
|
|
|
45
45
|
* Combobox props
|
|
46
46
|
*/
|
|
47
47
|
error: x,
|
|
48
|
-
id:
|
|
49
|
-
disabled:
|
|
48
|
+
id: f,
|
|
49
|
+
disabled: y = !1,
|
|
50
50
|
placeholder: k,
|
|
51
51
|
required: w = !1,
|
|
52
|
-
onClear:
|
|
53
|
-
clearLabel:
|
|
52
|
+
onClear: P,
|
|
53
|
+
clearLabel: E = "Clear",
|
|
54
54
|
size: d,
|
|
55
55
|
/**
|
|
56
56
|
* @preserve
|
|
@@ -62,9 +62,9 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
|
|
|
62
62
|
* @deprecated This is no longer used.
|
|
63
63
|
*/
|
|
64
64
|
selectedDateLabel: o,
|
|
65
|
-
...
|
|
65
|
+
...m
|
|
66
66
|
}, p) => {
|
|
67
|
-
const T =
|
|
67
|
+
const T = Pe(), M = Oe("DatePicker"), v = t ?? M.locale, $ = S(v, {
|
|
68
68
|
day: "2-digit",
|
|
69
69
|
month: "2-digit",
|
|
70
70
|
year: "numeric"
|
|
@@ -83,7 +83,7 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
|
|
|
83
83
|
minDate: te,
|
|
84
84
|
maxDate: re
|
|
85
85
|
})), pe = ce(), he = c.useRef(null), ge = (D) => {
|
|
86
|
-
|
|
86
|
+
P && !y && (_(""), ee(void 0), P(D), A?.focus());
|
|
87
87
|
}, De = c.useCallback((D) => {
|
|
88
88
|
D && V && G(V), Z(D);
|
|
89
89
|
}, [V]);
|
|
@@ -99,13 +99,13 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
|
|
|
99
99
|
_($.format(D.toDate(T)));
|
|
100
100
|
}
|
|
101
101
|
}, [n, Y, $, T]);
|
|
102
|
-
const ye = `${
|
|
103
|
-
return F(He, { calendarDate: fe, content: ue, contentId: pe, disabled:
|
|
102
|
+
const ye = `${f}-hint`, Ce = `${f}-error`;
|
|
103
|
+
return F(He, { calendarDate: fe, content: ue, contentId: pe, disabled: y, locale: v, minDate: te, maxDate: re, open: O, onCalendarDateChange: G, onContentChange: me, onOpenChange: De, onTextInputChange: K, onTextValueChange: _, onTriggerChange: C, onValueChange: ee, required: w, textInput: A, textValue: Y, timeZone: T, trigger: q, value: V, children: [F(et, { className: r, size: d, hasError: !!x, children: [i(nt, { "aria-hidden": !0 }), i(ot, { ref: p, placeholder: k, "aria-describedby": `${ye} ${Ce}`, id: f, ...m }), Y && P ? i(rt, { as: "button", hasRadius: !0, background: "transparent", type: "button", onClick: ge, "aria-disabled": y, "aria-label": E, title: E, ref: he, children: i($e, {}) }) : null] }), i(Ue, { children: i(ct, { label: e, children: i(pt, { monthSelectLabel: g, yearSelectLabel: b }) }) })] });
|
|
104
104
|
}), ie = (e) => !!e.match(/^[^a-zA-Z]*$/), Je = ({ currentValue: e, minDate: r, maxDate: n }) => {
|
|
105
105
|
const t = J("UTC");
|
|
106
106
|
return e || (H(r, t) === r && X(n, t) === n ? t : H(r, t) === t ? r : X(n, t) === t ? n : t);
|
|
107
107
|
}, Qe = "DatePickerTrigger", et = c.forwardRef(({ hasError: e, size: r = "M", ...n }, t) => {
|
|
108
|
-
const a =
|
|
108
|
+
const a = L(Qe), s = Q(t, (u) => a.onTriggerChange(u)), g = () => {
|
|
109
109
|
a.disabled || a.onOpenChange(!0);
|
|
110
110
|
};
|
|
111
111
|
return i(ve, {
|
|
@@ -119,9 +119,9 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
|
|
|
119
119
|
onUnmountAutoFocus: (u) => {
|
|
120
120
|
document.getSelection()?.empty(), u.preventDefault();
|
|
121
121
|
},
|
|
122
|
-
children: i(tt, { ref: s, $hasError: e, $size: r, ...n, paddingLeft: 3, paddingRight: 3, hasRadius: !0, gap: 3, overflow: "hidden", background: a.disabled ? "neutral150" : "neutral0", onClick:
|
|
122
|
+
children: i(tt, { ref: s, $hasError: e, $size: r, ...n, paddingLeft: 3, paddingRight: 3, hasRadius: !0, gap: 3, overflow: "hidden", background: a.disabled ? "neutral150" : "neutral0", onClick: N(n.onClick, () => {
|
|
123
123
|
a.textInput?.focus();
|
|
124
|
-
}), onPointerDown:
|
|
124
|
+
}), onPointerDown: N(n.onPointerDown, (u) => {
|
|
125
125
|
const l = u.target;
|
|
126
126
|
l.hasPointerCapture(u.pointerId) && l.releasePointerCapture(u.pointerId), (l.closest("button") ?? l.closest("div")) === u.currentTarget && u.button === 0 && u.ctrlKey === !1 && (g(), a.textInput?.focus());
|
|
127
127
|
}) })
|
|
@@ -158,14 +158,14 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
|
|
|
158
158
|
fill: ${({ theme: e }) => e.colors.neutral500};
|
|
159
159
|
}
|
|
160
160
|
`, at = "DatePickerTextInput", ot = c.forwardRef(({ placeholder: e, ...r }, n) => {
|
|
161
|
-
const t =
|
|
161
|
+
const t = L(at), { onTextValueChange: a, textValue: s, onTextInputChange: g, onOpenChange: u, disabled: l, locale: b } = t, x = Q(n, (d) => g(d)), f = () => {
|
|
162
162
|
l || u(!0);
|
|
163
|
-
},
|
|
163
|
+
}, y = S(b, {
|
|
164
164
|
year: "numeric",
|
|
165
165
|
month: "2-digit",
|
|
166
166
|
day: "2-digit"
|
|
167
|
-
}), [k, w,
|
|
168
|
-
const d =
|
|
167
|
+
}), [k, w, P] = c.useMemo(() => {
|
|
168
|
+
const d = y.formatToParts(/* @__PURE__ */ new Date()), h = d.filter((p) => p.type === "year" || p.type === "month" || p.type === "day"), o = h.map((p) => {
|
|
169
169
|
switch (p.type) {
|
|
170
170
|
case "day":
|
|
171
171
|
return "DD";
|
|
@@ -176,18 +176,18 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
|
|
|
176
176
|
default:
|
|
177
177
|
return "";
|
|
178
178
|
}
|
|
179
|
-
}),
|
|
180
|
-
return [o,
|
|
181
|
-
}, [
|
|
182
|
-
return i(lt, { role: "combobox", type: "text", inputMode: "numeric", ref: x, "aria-autocomplete": "none", "aria-controls": t.contentId, "aria-disabled": t.disabled, "aria-expanded": t.open, "aria-required": t.required, "aria-haspopup": "dialog", "data-state": t.open ? "open" : "closed", disabled: l, "data-disabled": l ? "" : void 0, pattern:
|
|
179
|
+
}), m = d.find((p) => p.type === "literal")?.value ?? "";
|
|
180
|
+
return [o, m, h];
|
|
181
|
+
}, [y]), E = k.map((d) => `\\d${d.length}`).join(w);
|
|
182
|
+
return i(lt, { role: "combobox", type: "text", inputMode: "numeric", ref: x, "aria-autocomplete": "none", "aria-controls": t.contentId, "aria-disabled": t.disabled, "aria-expanded": t.open, "aria-required": t.required, "aria-haspopup": "dialog", "data-state": t.open ? "open" : "closed", disabled: l, "data-disabled": l ? "" : void 0, pattern: E, placeholder: e ?? k.join(w), ...r, value: s ?? "", onBlur: N(r.onBlur, () => {
|
|
183
183
|
if (!t.textValue) {
|
|
184
184
|
t.onValueChange(void 0);
|
|
185
185
|
return;
|
|
186
186
|
}
|
|
187
|
-
t.onTextValueChange(
|
|
188
|
-
}), onChange:
|
|
187
|
+
t.onTextValueChange(y.format(t.calendarDate.toDate(t.timeZone))), t.onValueChange(t.calendarDate);
|
|
188
|
+
}), onChange: N(r.onChange, (d) => {
|
|
189
189
|
if (ie(d.target.value)) {
|
|
190
|
-
const h = d.target.value.split(w), [o,
|
|
190
|
+
const h = d.target.value.split(w), [o, m, p] = P.map((C, A) => {
|
|
191
191
|
const K = h[A];
|
|
192
192
|
return {
|
|
193
193
|
...C,
|
|
@@ -201,15 +201,15 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
|
|
|
201
201
|
}
|
|
202
202
|
p && p.length < 3 && M > t.maxDate.year && (M -= 100);
|
|
203
203
|
const v = t.calendarDate.set({ year: M }), $ = v.calendar.getMonthsInYear(v), O = v.set({
|
|
204
|
-
month:
|
|
204
|
+
month: m && Number(m) <= $ ? Number(m) : void 0
|
|
205
205
|
}), Z = O.calendar.getDaysInMonth(O), q = O.set({
|
|
206
206
|
day: o && Number(o) <= Z ? Number(o) : void 0
|
|
207
207
|
});
|
|
208
208
|
t.onCalendarDateChange(it(q, t.minDate, t.maxDate)), t.onTextValueChange(d.target.value);
|
|
209
209
|
}
|
|
210
|
-
}), onKeyDown:
|
|
210
|
+
}), onKeyDown: N(r.onKeyDown, (d) => {
|
|
211
211
|
if (!t.open && (ie(d.key) || ["ArrowDown", "Backspace"].includes(d.key)))
|
|
212
|
-
|
|
212
|
+
f();
|
|
213
213
|
else if (["Tab"].includes(d.key) && t.open)
|
|
214
214
|
d.preventDefault();
|
|
215
215
|
else if (["Escape"].includes(d.key))
|
|
@@ -245,7 +245,7 @@ const je = 200, oe = 15, [He, N] = Ve("DatePicker"), Xe = c.forwardRef(({
|
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
247
|
else
|
|
248
|
-
t.open && ["Enter"].includes(d.key) && (d.preventDefault(), a(
|
|
248
|
+
t.open && ["Enter"].includes(d.key) && (d.preventDefault(), a(y.format(t.calendarDate.toDate(t.timeZone))), t.onValueChange(t.calendarDate), t.onOpenChange(!1));
|
|
249
249
|
}) });
|
|
250
250
|
});
|
|
251
251
|
function it(e, r, n) {
|
|
@@ -267,16 +267,16 @@ const lt = I.input`
|
|
|
267
267
|
cursor: inherit;
|
|
268
268
|
}
|
|
269
269
|
`, st = "DatePickerContent", ct = c.forwardRef((e, r) => {
|
|
270
|
-
const [n, t] = c.useState(), a =
|
|
270
|
+
const [n, t] = c.useState(), a = L(st);
|
|
271
271
|
if (c.useLayoutEffect(() => {
|
|
272
272
|
t(new DocumentFragment());
|
|
273
273
|
}, []), !a.open) {
|
|
274
274
|
const s = n;
|
|
275
|
-
return s ?
|
|
275
|
+
return s ? Ne(i("div", { children: e.children }), s) : null;
|
|
276
276
|
}
|
|
277
277
|
return i(ut, { ...e, ref: r });
|
|
278
278
|
}), dt = "DatePickerContent", ut = c.forwardRef((e, r) => {
|
|
279
|
-
const { label: n = "Choose date", ...t } = e, { onOpenChange: a, ...s } =
|
|
279
|
+
const { label: n = "Choose date", ...t } = e, { onOpenChange: a, ...s } = L(dt), { x: g, y: u, refs: l, strategy: b } = be({
|
|
280
280
|
strategy: "fixed",
|
|
281
281
|
placement: "bottom-start",
|
|
282
282
|
middleware: [
|
|
@@ -286,33 +286,34 @@ const lt = I.input`
|
|
|
286
286
|
xe(),
|
|
287
287
|
ke()
|
|
288
288
|
],
|
|
289
|
+
elements: {
|
|
290
|
+
reference: s.trigger
|
|
291
|
+
},
|
|
289
292
|
whileElementsMounted: Te
|
|
290
293
|
});
|
|
291
294
|
c.useEffect(() => {
|
|
292
|
-
const
|
|
295
|
+
const f = () => {
|
|
293
296
|
a(!1);
|
|
294
297
|
};
|
|
295
|
-
return window.addEventListener("blur",
|
|
296
|
-
window.removeEventListener("blur",
|
|
298
|
+
return window.addEventListener("blur", f), window.addEventListener("resize", f), () => {
|
|
299
|
+
window.removeEventListener("blur", f), window.removeEventListener("resize", f);
|
|
297
300
|
};
|
|
298
|
-
}, [a])
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
const y = Q(r, (m) => s.onContentChange(m), b);
|
|
302
|
-
return Me(), i(Ne, { allowPinchZoom: !0, children: i(_e, {
|
|
301
|
+
}, [a]);
|
|
302
|
+
const x = Q(r, (f) => s.onContentChange(f), l.setFloating);
|
|
303
|
+
return Me(), i(Le, { allowPinchZoom: !0, children: i(_e, {
|
|
303
304
|
asChild: !0,
|
|
304
305
|
// When focus is trapped, a focusout event may still happen.
|
|
305
306
|
// We make sure we don't trigger our `onDismiss` in such case.
|
|
306
|
-
onFocusOutside: (
|
|
307
|
-
|
|
307
|
+
onFocusOutside: (f) => {
|
|
308
|
+
f.preventDefault();
|
|
308
309
|
},
|
|
309
310
|
onDismiss: () => {
|
|
310
311
|
a(!1);
|
|
311
312
|
},
|
|
312
|
-
children: i(mt, { ref:
|
|
313
|
+
children: i(mt, { ref: x, "data-state": s.open ? "open" : "closed", onContextMenu: (f) => f.preventDefault(), id: s.contentId, role: "dialog", "aria-modal": "true", "aria-label": n, style: {
|
|
313
314
|
left: g,
|
|
314
315
|
top: u,
|
|
315
|
-
position:
|
|
316
|
+
position: b
|
|
316
317
|
}, hasRadius: !0, background: "neutral0", padding: 1, ...t })
|
|
317
318
|
}) });
|
|
318
319
|
}), mt = I(W)`
|
|
@@ -320,27 +321,27 @@ const lt = I.input`
|
|
|
320
321
|
z-index: ${({ theme: e }) => e.zIndices[0]};
|
|
321
322
|
border: 1px solid ${({ theme: e }) => e.colors.neutral150};
|
|
322
323
|
`, ft = "DatePickerCalendar", pt = c.forwardRef(({ monthSelectLabel: e, yearSelectLabel: r, ...n }, t) => {
|
|
323
|
-
const { locale: a, timeZone: s, minDate: g, maxDate: u, calendarDate: l, onCalendarDateChange: b } =
|
|
324
|
-
const o = g.year,
|
|
325
|
-
return [...Array(
|
|
326
|
-
}, [g, u]),
|
|
324
|
+
const { locale: a, timeZone: s, minDate: g, maxDate: u, calendarDate: l, onCalendarDateChange: b } = L(ft), x = Ee(l), f = c.useMemo(() => {
|
|
325
|
+
const o = g.year, m = u.year;
|
|
326
|
+
return [...Array(m - o + 1).keys()].map((p) => (o + p).toString());
|
|
327
|
+
}, [g, u]), y = S(a, { month: "long" }), k = c.useMemo(() => [...Array(l.calendar.getMonthsInYear(l)).keys()].map((o) => y.format(l.set({ month: o + 1 }).toDate(s))), [l, y, s]), w = S(a, { weekday: "short" }), P = c.useMemo(() => {
|
|
327
328
|
let o = le(J(s), a);
|
|
328
|
-
return [...new Array(7).keys()].map((
|
|
329
|
-
let T = o.add({ days:
|
|
329
|
+
return [...new Array(7).keys()].map((m) => {
|
|
330
|
+
let T = o.add({ days: m }).toDate(s);
|
|
330
331
|
return w.format(T);
|
|
331
332
|
});
|
|
332
|
-
}, [s, a, w]),
|
|
333
|
+
}, [s, a, w]), E = (o) => {
|
|
333
334
|
if (typeof o == "number")
|
|
334
335
|
return;
|
|
335
|
-
const
|
|
336
|
-
b(
|
|
336
|
+
const m = l.set({ month: k.indexOf(o) + 1 });
|
|
337
|
+
b(m);
|
|
337
338
|
}, d = (o) => {
|
|
338
339
|
if (typeof o == "number")
|
|
339
340
|
return;
|
|
340
|
-
const
|
|
341
|
-
b(
|
|
341
|
+
const m = l.set({ year: parseInt(o, 10) });
|
|
342
|
+
b(m);
|
|
342
343
|
}, h = ht(x, a);
|
|
343
|
-
return F(U, { ref: t, direction: "column", alignItems: "stretch", padding: 4, ...n, children: [F(gt, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [i(ne, { label: e, size: "S", value: k[l.month - 1], onChange:
|
|
344
|
+
return F(U, { ref: t, direction: "column", alignItems: "stretch", padding: 4, ...n, children: [F(gt, { justifyContent: "flex-start", paddingBottom: 4, paddingLeft: 2, paddingRight: 2, gap: 2, children: [i(ne, { label: e, size: "S", value: k[l.month - 1], onChange: E, children: k.map((o) => i(ae, { value: o, children: o }, o)) }), i(ne, { size: "S", value: l.year.toString(), label: r, onChange: d, children: f.map((o) => i(ae, { value: o, children: o }, o)) })] }), F("table", { role: "grid", children: [i("thead", { "aria-hidden": !0, children: i("tr", { "aria-rowindex": 0, children: P.map((o, m) => i(Dt, { "aria-colindex": m, children: o }, o)) }) }), i("tbody", { children: [...new Array(6).keys()].map((o) => i("tr", { "aria-rowindex": o + 2, children: h(o).map((m, p) => m ? i(bt, { "aria-colindex": p + 1, date: m, startDate: x }, m.toString()) : i(de, { "aria-colindex": p + 1 })) }, o)) })] })] });
|
|
344
345
|
}), ht = (e, r) => (n) => {
|
|
345
346
|
let t = e.add({ weeks: n }), a = [];
|
|
346
347
|
t = le(t, r);
|
|
@@ -382,23 +383,23 @@ const lt = I.input`
|
|
|
382
383
|
border-radius: ${({ theme: e }) => e.borderRadius};
|
|
383
384
|
text-transform: capitalize;
|
|
384
385
|
`, Ct = "DatePickerCalendarCell", bt = c.forwardRef(({ date: e, startDate: r, ...n }, t) => {
|
|
385
|
-
const { timeZone: a, locale: s, calendarDate: g, onValueChange: u, onOpenChange: l, onTextValueChange: b, onCalendarDateChange: x } =
|
|
386
|
+
const { timeZone: a, locale: s, calendarDate: g, onValueChange: u, onOpenChange: l, onTextValueChange: b, onCalendarDateChange: x } = L(Ct), f = se(g, e), y = S(s, {
|
|
386
387
|
weekday: "long",
|
|
387
388
|
day: "numeric",
|
|
388
389
|
month: "long",
|
|
389
390
|
year: "numeric"
|
|
390
|
-
}), k = c.useMemo(() =>
|
|
391
|
+
}), k = c.useMemo(() => y.format(e.toDate(a)), [y, e, a]), w = S(s, {
|
|
391
392
|
day: "numeric",
|
|
392
393
|
calendar: e.calendar.identifier
|
|
393
|
-
}),
|
|
394
|
+
}), P = c.useMemo(() => w.formatToParts(e.toDate(a)).find((m) => m.type === "day").value, [w, e, a]), E = S(s, {
|
|
394
395
|
day: "2-digit",
|
|
395
396
|
month: "2-digit",
|
|
396
397
|
year: "numeric"
|
|
397
398
|
}), d = Ae(r), h = e.compare(r) < 0 || e.compare(d) > 0;
|
|
398
399
|
let o = "neutral900";
|
|
399
|
-
return
|
|
400
|
-
|
|
401
|
-
}), children: i(B, { variant: "pi", textColor: o, children:
|
|
400
|
+
return f ? o = "primary600" : h && (o = "neutral600"), i(de, { as: "td", role: "gridcell", ref: t, "aria-selected": f, ...n, hasRadius: !0, "aria-label": k, tabIndex: f ? 0 : -1, background: f ? "primary100" : "neutral0", cursor: "pointer", onPointerDown: N(n.onPointerDown, (m) => {
|
|
401
|
+
m.preventDefault(), x(e), u(e), b(E.format(e.toDate(a))), l(!1);
|
|
402
|
+
}), children: i(B, { variant: "pi", textColor: o, children: P }) });
|
|
402
403
|
}), de = I(W)`
|
|
403
404
|
text-align: center;
|
|
404
405
|
padding: ${7 / 16}rem;
|
package/dist/Popover/Popover.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),$=require("react"),u=require("@floating-ui/react-dom"),M=require("@radix-ui/react-focus-scope"),m=require("@strapi/ui-primitives"),z=require("aria-hidden"),T=require("react-remove-scroll"),W=require("styled-components"),A=require("../DismissibleLayer/index.cjs"),x=require("../helpers/strings.cjs"),B=require("../hooks/useComposeRefs.cjs"),H=require("../hooks/useId.cjs"),K=require("../hooks/useIntersection.cjs"),g=require("../Box/Box.cjs"),N=require("../Portal/Portal.cjs"),U=e=>e&&e.__esModule?e:{default:e};function V(e){if(e&&e.__esModule)return e;const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,n.get?n:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const i=V($),P=U(W),Z=["top","top-start","top-end","right","right-start","right-end","bottom","bottom-start","bottom-end","left","left-start","left-end"],G=P.default(g.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
|
+
`,R=i.forwardRef(({source:e,children:o,spacing:t=0,fullWidth:n=!1,placement:c="bottom-start",centered:l=!1,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,onFocusOutside:p,...y},O)=>{const[h,S]=i.useState(null),[k,j]=i.useState(void 0),w=i.useRef(!1),{x:q,y:C,refs:D,strategy:_}=u.useFloating({strategy:"fixed",placement:l?"bottom":c,middleware:[u.offset({mainAxis:t}),u.shift(),u.flip()],elements:{reference:e.current},whileElementsMounted:u.autoUpdate});i.useLayoutEffect(()=>{n&&j(e.current.offsetWidth)},[n,e]),i.useEffect(()=>{if(h)return z.hideOthers(h)},[h]);const v=m.useCallbackRef(a);i.useEffect(()=>{const r=()=>{v()};return window.addEventListener("blur",r),window.addEventListener("resize",r),()=>{window.removeEventListener("blur",r),window.removeEventListener("resize",r)}},[v]);const L=B.useComposedRefs(O,r=>S(r),D.setFloating);return s.jsx(T.RemoveScroll,{allowPinchZoom:!0,children:s.jsx(M.FocusScope,{asChild:!0,loop:!0,trapped:!0,onUnmountAutoFocus:r=>{r.preventDefault(),w.current||e.current?.focus({preventScroll:!0})},children:s.jsx(A.DismissibleLayer,{asChild:!0,onEscapeKeyDown:d,onPointerDownOutside:m.composeEventHandlers(f,r=>{const b=r.detail.originalEvent,F=b.button===0&&b.ctrlKey===!0,I=b.button===2||F;w.current=I},{checkForDefaultPrevented:!1}),onFocusOutside:m.composeEventHandlers(p,r=>r.preventDefault(),{checkForDefaultPrevented:!1}),onDismiss:a,children:s.jsx(G,{ref:L,style:{left:q,top:C,position:_,width:k||void 0},hasRadius:!0,background:"neutral0",padding:1,...y,children:o})})})})}),E=({children:e,intersectionId:o,onReachEnd:t,...n})=>{const c=i.useRef(null),l=H.useId();return K.useIntersection(c,t??(()=>{}),{selectorToWatch:`#${x.stripReactIdOfColon(l)}`,skipWhen:!o||!t}),s.jsxs(J,{ref:c,...n,children:[e,o&&t&&s.jsx(g.Box,{id:x.stripReactIdOfColon(l),width:"100%",height:"1px"})]})},J=P.default(g.Box)`
|
|
6
6
|
// 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
|
|
7
7
|
max-height: ${3*5}rem;
|
|
8
8
|
overflow-y: auto;
|
|
@@ -22,4 +22,4 @@
|
|
|
22
22
|
border-radius: ${({theme:e})=>e.borderRadius};
|
|
23
23
|
margin-right: 10px;
|
|
24
24
|
}
|
|
25
|
-
`,
|
|
25
|
+
`,Q=({children:e,source:o,spacing:t,fullWidth:n,placement:c,centered:l,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,...p})=>s.jsx(N.Portal,{children:s.jsx(R,{source:o,spacing:t,fullWidth:n,placement:c,centered:l,onEscapeKeyDown:d,onPointerDownOutside:f,onDismiss:a,children:s.jsx(E,{...p,children:e})})});exports.Content=R;exports.POPOVER_PLACEMENTS=Z;exports.Popover=Q;exports.Scrolling=E;
|