@strapi/design-system 1.7.0-alpha.3 → 1.7.0-alpha.5

package/dist/Select/MultiSelect.cjs

@@ -1,9 +1,9 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),N=require("react"),X=require("@strapi/icons"),I=require("styled-components"),i=require("./SelectParts.cjs"),Y=require("../BaseCheckbox/assets/checkmark.cjs"),F=require("../Box/Box.cjs"),J=require("../Field/Field.cjs"),K=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const Q=require("../Field/FieldHint.cjs"),U=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const Z=require("../Flex/Flex.cjs"),ee=require("../hooks/useId.cjs"),te=require("../hooks/useIntersection.cjs"),re=require("../Tag/Tag.cjs"),C=require("../Typography/Typography.cjs"),ne=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function ie(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,s.get?s:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const a=ie(N),oe=ne(I),se=({children:e,clearLabel:n="Clear",customizeContent:r=f=>f?.join(",")??"",disabled:s,error:l,hint:d,id:u,label:p,labelAction:O,onChange:x,onClear:M,onReachEnd:b,placeholder:R,required:m,selectButtonTitle:ae,startIcon:v,size:B="M",value:j,withTags:q,..._})=>{const f=a.useRef(null),[k,T]=a.useState(),[L,P]=a.useState(!1),h=ee.useId(u),z=`${h}-hint`,E=`${h}-error`,V=o=>{x?x(o):T(o)},A=o=>()=>{const g=Array.isArray(j)?j.filter(y=>y!==o):(k??[]).filter(y=>y!==o);x?x(g):T(g)},G=o=>{P(o)},S=a.useRef(null),H=()=>{S.current.focus()},$=`intersection-${h}`,D=o=>{b&&b(o)};te.useIntersection(f,D,{selectorToWatch:`#${$}`,skipWhen:!L});const c=typeof j<"u"?j:k,W=({value:o,textValue:g})=>t.jsx(re.Tag,{tabIndex:-1,disabled:s,icon:t.jsx(X.Cross,{}),onClick:A(o),children:g},o);return t.jsx(J.Field,{hint:d,error:l,id:h,required:m,children:t.jsxs(Z.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(K.FieldLabel,{onClick:H,action:O,children:p}),t.jsxs(i.Root,{onOpenChange:G,disabled:s,required:m,onValueChange:V,value:c,..._,multi:!0,children:[t.jsx(i.Trigger,{ref:S,"aria-label":p,"aria-describedby":`${z} ${E}`,id:h,startIcon:v,size:B,hasError:Boolean(l),disabled:s,clearLabel:n,onClear:c?.length?M:void 0,paddingLeft:q&&c?.length?1:3,children:t.jsx(i.Value,{placeholder:R,textColor:c?.length?"neutral800":"neutral600",children:c?.length?q?W:r(c):null})}),t.jsx(i.Portal,{children:t.jsx(i.Content,{position:"popper",sideOffset:4,children:t.jsxs(i.Viewport,{ref:f,children:[e,t.jsx(F.Box,{id:$,width:"100%",height:"1px"})]})})})]}),t.jsx(Q.FieldHint,{}),t.jsx(U.FieldError,{})]})})},le=a.forwardRef(({value:e,children:n,startIcon:r,...s},l)=>t.jsxs(i.Item,{ref:l,value:e.toString(),...s,children:[r&&t.jsx(F.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(i.ItemIndicator,{children:({isSelected:d,isIntermediate:u})=>t.jsx(w,{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(i.ItemText,{children:n})})]})),w=oe.default(F.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),N=require("react"),X=require("@strapi/icons"),y=require("styled-components"),i=require("./SelectParts.cjs"),Y=require("../BaseCheckbox/assets/checkmark.cjs"),g=require("../Box/Box.cjs"),J=require("../Field/Field.cjs"),K=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const Q=require("../Field/FieldHint.cjs"),U=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const Z=require("../Flex/Flex.cjs"),ee=require("../hooks/useId.cjs"),te=require("../hooks/useIntersection.cjs"),re=require("../Tag/Tag.cjs"),C=require("../Typography/Typography.cjs"),ne=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function ie(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(n,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return n.default=e,Object.freeze(n)}const a=ie(N),se=ne(y),oe=({children:e,clearLabel:n="Clear",customizeContent:r,disabled:o,error:l,hint:d,id:u,label:p,labelAction:O,onChange:x,onClear:M,onReachEnd:I,placeholder:R,required:b,selectButtonTitle:ae,startIcon:v,size:B="M",value:j,withTags:m,..._})=>{const q=a.useRef(null),[k,T]=a.useState(),[L,P]=a.useState(!1),h=ee.useId(u),E=`${h}-hint`,V=`${h}-error`,z=s=>{x?x(s):T(s)},A=s=>()=>{const f=Array.isArray(j)?j.filter(F=>F!==s):(k??[]).filter(F=>F!==s);x?x(f):T(f)},G=s=>{P(s)},S=a.useRef(null),H=()=>{S.current.focus()},$=`intersection-${h}`,D=s=>{I&&I(s)};te.useIntersection(q,D,{selectorToWatch:`#${$}`,skipWhen:!L});const c=typeof j<"u"?j:k,W=({value:s,textValue:f})=>t.jsx(re.Tag,{tabIndex:-1,disabled:o,icon:t.jsx(X.Cross,{}),onClick:A(s),children:f},s);return t.jsx(J.Field,{hint:d,error:l,id:h,required:b,children:t.jsxs(Z.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[t.jsx(K.FieldLabel,{onClick:H,action:O,children:p}),t.jsxs(i.Root,{onOpenChange:G,disabled:o,required:b,onValueChange:z,value:c,..._,multi:!0,children:[t.jsx(i.Trigger,{ref:S,"aria-label":p,"aria-describedby":`${E} ${V}`,id:h,startIcon:v,size:B,hasError:Boolean(l),disabled:o,clearLabel:n,onClear:c?.length?M:void 0,paddingLeft:m&&c?.length?1:3,children:t.jsx(i.Value,{placeholder:R,textColor:c?.length?"neutral800":"neutral600",children:c?.length?m?W:r?r(c):void 0:void 0})}),t.jsx(i.Portal,{children:t.jsx(i.Content,{position:"popper",sideOffset:4,children:t.jsxs(i.Viewport,{ref:q,children:[e,t.jsx(g.Box,{id:$,width:"100%",height:"1px"})]})})})]}),t.jsx(Q.FieldHint,{}),t.jsx(U.FieldError,{})]})})},le=a.forwardRef(({value:e,children:n,startIcon:r,...o},l)=>t.jsxs(i.Item,{ref:l,value:e.toString(),...o,children:[r&&t.jsx(g.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(i.ItemIndicator,{children:({isSelected:d,isIntermediate:u})=>t.jsx(w,{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(i.ItemText,{children:n})})]})),w=se.default(g.Box)`
   border: 1px solid
     ${({theme:e,$selected:n,$indeterminate:r})=>n||r?e.colors.primary600:e.colors.neutral300};
   background-color: ${({theme:e,$selected:n,$indeterminate:r})=>n||r?e.colors.primary600:e.colors.neutral0};
 
-  ${({theme:e,$indeterminate:n})=>n&&I.css`
+  ${({theme:e,$indeterminate:n})=>n&&y.css`
       &::after {
         content: '';
         display: block;
@@ -18,7 +18,7 @@
       }
     `}
 
-  ${({$selected:e})=>e&&I.css`
+  ${({$selected:e})=>e&&y.css`
       &::after {
         content: '';
         background: url(${Y}) no-repeat no-repeat center center;
@@ -27,4 +27,4 @@
         position: absolute;
       }
     `}
-`,ce=a.forwardRef(({children:e,label:n,startIcon:r,values:s=[],...l},d)=>t.jsxs(i.Group,{ref:d,children:[t.jsxs(i.Item,{value:s,...l,children:[r&&t.jsx(F.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(i.ItemIndicator,{children:({isSelected:u,isIntermediate:p})=>t.jsx(w,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:p,$selected:u,zIndex:1,height:"18px",width:"18px"})}),t.jsx(C.Typography,{textColor:"neutral800",children:t.jsx(i.ItemText,{children:n})})]}),e]}));exports.MultiSelect=se;exports.MultiSelectGroup=ce;exports.MultiSelectOption=le;
+`,ce=a.forwardRef(({children:e,label:n,startIcon:r,values:o=[],...l},d)=>t.jsxs(i.Group,{ref:d,children:[t.jsxs(i.Item,{value:o,...l,children:[r&&t.jsx(g.Box,{as:"span","aria-hidden":!0,children:r}),t.jsx(i.ItemIndicator,{children:({isSelected:u,isIntermediate:p})=>t.jsx(w,{hasRadius:!0,overflow:"hidden",position:"relative",$indeterminate:p,$selected:u,zIndex:1,height:"18px",width:"18px"})}),t.jsx(C.Typography,{textColor:"neutral800",children:t.jsx(i.ItemText,{children:n})})]}),e]}));exports.MultiSelect=oe;exports.MultiSelectGroup=ce;exports.MultiSelectOption=le;

package/dist/Select/MultiSelect.js

@@ -1,26 +1,26 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import * as c from "react";
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import * as a from "react";
 import { Cross as J } from "@strapi/icons";
 import K, { css as T } from "styled-components";
 import { Item as S, ItemIndicator as F, ItemText as O, Group as N, Root as Q, Trigger as U, Value as Z, Portal as ee, Content as re, Viewport as te } from "./SelectParts.js";
 import ne from "../BaseCheckbox/assets/checkmark.js";
-import { Box as I } from "../Box/Box.js";
+import { Box as x } from "../Box/Box.js";
 import { Field as oe } from "../Field/Field.js";
 import { FieldLabel as ie } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
 import { FieldHint as le } from "../Field/FieldHint.js";
-import { FieldError as ae } from "../Field/FieldError.js";
+import { FieldError as de } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Flex as ce } from "../Flex/Flex.js";
-import { useId as de } from "../hooks/useId.js";
+import { Flex as ae } from "../Flex/Flex.js";
+import { useId as ce } from "../hooks/useId.js";
 import { useIntersection as se } from "../hooks/useIntersection.js";
 import { Tag as he } from "../Tag/Tag.js";
 import { Typography as M } from "../Typography/Typography.js";
 const Be = ({
   children: r,
-  clearLabel: n = "Clear",
-  customizeContent: o = (g) => g?.join(",") ?? "",
+  clearLabel: o = "Clear",
+  customizeContent: t,
   disabled: i,
   error: l,
   hint: s,
@@ -29,48 +29,48 @@ const Be = ({
   labelAction: L,
   onChange: f,
   onClear: V,
-  onReachEnd: b,
-  placeholder: j,
-  required: k,
+  onReachEnd: $,
+  placeholder: E,
+  required: b,
   selectButtonTitle: pe,
-  startIcon: z,
-  size: E = "M",
+  startIcon: j,
+  size: z = "M",
   value: m,
-  withTags: C,
+  withTags: k,
   ...A
 }) => {
-  const g = c.useRef(null), [w, R] = c.useState(), [G, W] = c.useState(!1), p = de(h), q = `${p}-hint`, H = `${p}-error`, P = (t) => {
-    f ? f(t) : R(t);
-  }, X = (t) => () => {
-    const x = Array.isArray(m) ? m.filter(($) => $ !== t) : (w ?? []).filter(($) => $ !== t);
-    f ? f(x) : R(x);
-  }, Y = (t) => {
-    W(t);
-  }, y = c.useRef(null), _ = () => {
+  const w = a.useRef(null), [C, R] = a.useState(), [G, W] = a.useState(!1), p = ce(h), q = `${p}-hint`, H = `${p}-error`, P = (n) => {
+    f ? f(n) : R(n);
+  }, X = (n) => () => {
+    const g = Array.isArray(m) ? m.filter((I) => I !== n) : (C ?? []).filter((I) => I !== n);
+    f ? f(g) : R(g);
+  }, Y = (n) => {
+    W(n);
+  }, y = a.useRef(null), _ = () => {
     y.current.focus();
   }, v = `intersection-${p}`;
-  se(g, (t) => {
-    b && b(t);
+  se(w, (n) => {
+    $ && $(n);
   }, {
     selectorToWatch: `#${v}`,
     skipWhen: !G
   });
-  const a = typeof m < "u" ? m : w, D = ({
-    value: t,
-    textValue: x
+  const d = typeof m < "u" ? m : C, D = ({
+    value: n,
+    textValue: g
   }) => e(he, {
     tabIndex: -1,
     disabled: i,
     icon: e(J, {}),
-    onClick: X(t),
-    children: x
-  }, t);
+    onClick: X(n),
+    children: g
+  }, n);
   return e(oe, {
     hint: s,
     error: l,
     id: p,
-    required: k,
-    children: d(ce, {
+    required: b,
+    children: c(ae, {
       direction: "column",
       alignItems: "stretch",
       gap: 1,
@@ -78,12 +78,12 @@ const Be = ({
         onClick: _,
         action: L,
         children: u
-      }), d(Q, {
+      }), c(Q, {
         onOpenChange: Y,
         disabled: i,
-        required: k,
+        required: b,
         onValueChange: P,
-        value: a,
+        value: d,
         ...A,
         multi: !0,
         children: [e(U, {
@@ -91,25 +91,25 @@ const Be = ({
           "aria-label": u,
           "aria-describedby": `${q} ${H}`,
           id: p,
-          startIcon: z,
-          size: E,
+          startIcon: j,
+          size: z,
           hasError: Boolean(l),
           disabled: i,
-          clearLabel: n,
-          onClear: a?.length ? V : void 0,
-          paddingLeft: C && a?.length ? 1 : 3,
+          clearLabel: o,
+          onClear: d?.length ? V : void 0,
+          paddingLeft: k && d?.length ? 1 : 3,
           children: e(Z, {
-            placeholder: j,
-            textColor: a?.length ? "neutral800" : "neutral600",
-            children: a?.length ? C ? D : o(a) : null
+            placeholder: E,
+            textColor: d?.length ? "neutral800" : "neutral600",
+            children: d?.length ? k ? D : t ? t(d) : void 0 : void 0
           })
         }), e(ee, {
           children: e(re, {
             position: "popper",
             sideOffset: 4,
-            children: d(te, {
-              ref: g,
-              children: [r, e(I, {
+            children: c(te, {
+              ref: w,
+              children: [r, e(x, {
                 id: v,
                 width: "100%",
                 height: "1px"
@@ -117,22 +117,22 @@ const Be = ({
             })
           })
         })]
-      }), e(le, {}), e(ae, {})]
+      }), e(le, {}), e(de, {})]
     })
   });
-}, Le = c.forwardRef(({
+}, Le = a.forwardRef(({
   value: r,
-  children: n,
-  startIcon: o,
+  children: o,
+  startIcon: t,
   ...i
-}, l) => d(S, {
+}, l) => c(S, {
   ref: l,
   value: r.toString(),
   ...i,
-  children: [o && e(I, {
+  children: [t && e(x, {
     as: "span",
     "aria-hidden": !0,
-    children: o
+    children: t
   }), e(F, {
     children: ({
       isSelected: s,
@@ -150,26 +150,26 @@ const Be = ({
   }), e(M, {
     textColor: "neutral800",
     children: e(O, {
-      children: n
+      children: o
     })
   })]
-})), B = K(I)`
+})), B = K(x)`
   border: 1px solid
     ${({
   theme: r,
-  $selected: n,
-  $indeterminate: o
-}) => n || o ? r.colors.primary600 : r.colors.neutral300};
+  $selected: o,
+  $indeterminate: t
+}) => o || t ? r.colors.primary600 : r.colors.neutral300};
   background-color: ${({
   theme: r,
-  $selected: n,
-  $indeterminate: o
-}) => n || o ? r.colors.primary600 : r.colors.neutral0};
+  $selected: o,
+  $indeterminate: t
+}) => o || t ? r.colors.primary600 : r.colors.neutral0};
 
   ${({
   theme: r,
-  $indeterminate: n
-}) => n && T`
+  $indeterminate: o
+}) => o && T`
       &::after {
         content: '';
         display: block;
@@ -195,21 +195,21 @@ const Be = ({
         position: absolute;
       }
     `}
-`, Ve = c.forwardRef(({
+`, Ve = a.forwardRef(({
   children: r,
-  label: n,
-  startIcon: o,
+  label: o,
+  startIcon: t,
   values: i = [],
   ...l
-}, s) => d(N, {
+}, s) => c(N, {
   ref: s,
-  children: [d(S, {
+  children: [c(S, {
     value: i,
     ...l,
-    children: [o && e(I, {
+    children: [t && e(x, {
       as: "span",
       "aria-hidden": !0,
-      children: o
+      children: t
     }), e(F, {
       children: ({
         isSelected: h,
@@ -227,7 +227,7 @@ const Be = ({
     }), e(M, {
       textColor: "neutral800",
       children: e(O, {
-        children: n
+        children: o
       })
     })]
   }), r]

package/dist/Select/SingleSelect.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("react"),l=require("./SelectParts.cjs"),q=require("../Box/Box.cjs"),V=require("../Field/Field.cjs"),H=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const z=require("../Field/FieldHint.cjs"),W=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const A=require("../Flex/Flex.cjs"),D=require("../hooks/useId.cjs"),G=require("../hooks/useIntersection.cjs"),J=require("../Typography/Typography.cjs");function K(t){if(t&&t.__esModule)return t;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const i in t)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(n,i,s.get?s:{enumerable:!0,get:()=>t[i]})}}return n.default=t,Object.freeze(n)}const d=K(N),Q=({children:t,clearLabel:n="Clear",customizeContent:i=p=>p?.toString()??"",disabled:s,error:u,hint:m,id:y,label:x,labelAction:O,onChange:a,onClear:h,onReachEnd:f,placeholder:T,required:g,selectButtonTitle:X,startIcon:B,size:C="M",value:j,...R})=>{const[p,F]=d.useState(),[_,k]=d.useState(!1),o=D.useId(y),v=`${o}-hint`,P=`${o}-error`,$=r=>{a?a(typeof j=="number"?Number(r):r):F(r)},w=r=>{k(r)},L=r=>{h&&h(r),a||F("")},b=d.useRef(null),M=()=>{b.current.focus()},S=d.useRef(null),I=`intersection-${o}`,E=r=>{f&&f(r)};G.useIntersection(S,E,{selectorToWatch:`#${I}`,skipWhen:!_});const c=(typeof j<"u"?j.toString():p)??"";return e.jsx(V.Field,{hint:m,error:u,id:o,required:g,children:e.jsxs(A.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsx(H.FieldLabel,{onClick:M,action:O,children:x}),e.jsxs(l.Root,{onOpenChange:w,disabled:s,required:g,onValueChange:$,value:c,...R,children:[e.jsx(l.Trigger,{ref:b,"aria-label":x,"aria-describedby":`${v} ${P}`,id:o,startIcon:B,size:C,hasError:Boolean(u),disabled:s,clearLabel:n,onClear:c&&h?L:void 0,children:e.jsx(l.Value,{placeholder:T,textColor:c?"neutral800":"neutral600",children:c?i(c):null})}),e.jsx(l.Portal,{children:e.jsx(l.Content,{position:"popper",sideOffset:4,children:e.jsxs(l.Viewport,{ref:S,children:[t,e.jsx(q.Box,{id:I,width:"100%",height:"1px"})]})})})]}),e.jsx(z.FieldHint,{}),e.jsx(W.FieldError,{})]})})},U=d.forwardRef(({value:t,startIcon:n,children:i,...s},u)=>e.jsxs(l.Item,{ref:u,value:t.toString(),...s,children:[n&&e.jsx(q.Box,{as:"span","aria-hidden":!0,children:n}),e.jsx(J.Typography,{textColor:"neutral800",children:e.jsx(l.ItemText,{children:i})})]}));exports.SingleSelect=Q;exports.SingleSelectOption=U;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),N=require("react"),s=require("./SelectParts.cjs"),I=require("../Box/Box.cjs"),V=require("../Field/Field.cjs"),H=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const W=require("../Field/FieldHint.cjs"),z=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const A=require("../Flex/Flex.cjs"),D=require("../hooks/useId.cjs"),G=require("../hooks/useIntersection.cjs"),J=require("../Typography/Typography.cjs");function K(t){if(t&&t.__esModule)return t;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(i,r,l.get?l:{enumerable:!0,get:()=>t[r]})}}return i.default=t,Object.freeze(i)}const d=K(N),Q=({children:t,clearLabel:i="Clear",customizeContent:r,disabled:l,error:u,hint:q,id:y,label:p,labelAction:m,onChange:a,onClear:h,onReachEnd:f,placeholder:O,required:x,selectButtonTitle:X,startIcon:T,size:B="M",value:j,...R})=>{const[C,g]=d.useState(),[_,k]=d.useState(!1),o=D.useId(y),v=`${o}-hint`,P=`${o}-error`,$=n=>{a?a(typeof j=="number"?Number(n):n):g(n)},w=n=>{k(n)},L=n=>{h&&h(n),a||g("")},F=d.useRef(null),M=()=>{F.current.focus()},b=d.useRef(null),S=`intersection-${o}`,E=n=>{f&&f(n)};G.useIntersection(b,E,{selectorToWatch:`#${S}`,skipWhen:!_});const c=(typeof j<"u"?j.toString():C)??"";return e.jsx(V.Field,{hint:q,error:u,id:o,required:x,children:e.jsxs(A.Flex,{direction:"column",alignItems:"stretch",gap:1,children:[e.jsx(H.FieldLabel,{onClick:M,action:m,children:p}),e.jsxs(s.Root,{onOpenChange:w,disabled:l,required:x,onValueChange:$,value:c,...R,children:[e.jsx(s.Trigger,{ref:F,"aria-label":p,"aria-describedby":`${v} ${P}`,id:o,startIcon:T,size:B,hasError:Boolean(u),disabled:l,clearLabel:i,onClear:c&&h?L:void 0,children:e.jsx(s.Value,{placeholder:O,textColor:c?"neutral800":"neutral600",children:c&&r?r(c):void 0})}),e.jsx(s.Portal,{children:e.jsx(s.Content,{position:"popper",sideOffset:4,children:e.jsxs(s.Viewport,{ref:b,children:[t,e.jsx(I.Box,{id:S,width:"100%",height:"1px"})]})})})]}),e.jsx(W.FieldHint,{}),e.jsx(z.FieldError,{})]})})},U=d.forwardRef(({value:t,startIcon:i,children:r,...l},u)=>e.jsxs(s.Item,{ref:u,value:t.toString(),...l,children:[i&&e.jsx(I.Box,{as:"span","aria-hidden":!0,children:i}),e.jsx(J.Typography,{textColor:"neutral800",children:e.jsx(s.ItemText,{children:r})})]}));exports.SingleSelect=Q;exports.SingleSelectOption=U;

package/dist/Select/SingleSelect.js

@@ -1,6 +1,6 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import * as o from "react";
-import { Item as q, ItemText as z, Root as H, Trigger as M, Value as P, Portal as _, Content as A, Viewport as D } from "./SelectParts.js";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as i from "react";
+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";
 import { Box as R } from "../Box/Box.js";
 import { Field as G } from "../Field/Field.js";
 import { FieldLabel as J } from "../Field/FieldLabel.js";
@@ -14,86 +14,86 @@ import { useId as X } from "../hooks/useId.js";
 import { useIntersection as Y } from "../hooks/useIntersection.js";
 import { Typography as Z } from "../Typography/Typography.js";
 const Ie = ({
-  children: a,
-  clearLabel: i = "Clear",
-  customizeContent: s = (u) => u?.toString() ?? "",
-  disabled: l,
+  children: s,
+  clearLabel: o = "Clear",
+  customizeContent: l,
+  disabled: d,
   error: c,
-  hint: O,
-  id: B,
-  label: f,
-  labelAction: F,
+  hint: C,
+  id: O,
+  label: m,
+  labelAction: B,
   onChange: h,
-  onClear: m,
-  onReachEnd: g,
-  placeholder: T,
-  required: I,
+  onClear: p,
+  onReachEnd: u,
+  placeholder: F,
+  required: g,
   selectButtonTitle: ee,
-  startIcon: $,
-  size: y = "M",
-  value: p,
-  ...w
+  startIcon: T,
+  size: $ = "M",
+  value: f,
+  ...y
 }) => {
-  const [u, b] = o.useState(), [V, k] = o.useState(!1), t = X(B), v = `${t}-hint`, E = `${t}-error`, L = (r) => {
-    h ? h(typeof p == "number" ? Number(r) : r) : b(r);
+  const [w, I] = i.useState(), [V, k] = i.useState(!1), t = X(O), v = `${t}-hint`, E = `${t}-error`, L = (r) => {
+    h ? h(typeof f == "number" ? Number(r) : r) : I(r);
   }, N = (r) => {
     k(r);
   }, j = (r) => {
-    m && m(r), h || b("");
-  }, S = o.useRef(null), W = () => {
-    S.current.focus();
-  }, x = o.useRef(null), C = `intersection-${t}`;
+    p && p(r), h || I("");
+  }, b = i.useRef(null), W = () => {
+    b.current.focus();
+  }, x = i.useRef(null), S = `intersection-${t}`;
   Y(x, (r) => {
-    g && g(r);
+    u && u(r);
   }, {
-    selectorToWatch: `#${C}`,
+    selectorToWatch: `#${S}`,
     skipWhen: !V
   });
-  const n = (typeof p < "u" ? p.toString() : u) ?? "";
+  const n = (typeof f < "u" ? f.toString() : w) ?? "";
   return e(G, {
-    hint: O,
+    hint: C,
     error: c,
     id: t,
-    required: I,
-    children: d(U, {
+    required: g,
+    children: a(U, {
       direction: "column",
       alignItems: "stretch",
       gap: 1,
       children: [e(J, {
         onClick: W,
-        action: F,
-        children: f
-      }), d(H, {
+        action: B,
+        children: m
+      }), a(M, {
         onOpenChange: N,
-        disabled: l,
-        required: I,
+        disabled: d,
+        required: g,
         onValueChange: L,
         value: n,
-        ...w,
-        children: [e(M, {
-          ref: S,
-          "aria-label": f,
+        ...y,
+        children: [e(P, {
+          ref: b,
+          "aria-label": m,
           "aria-describedby": `${v} ${E}`,
           id: t,
-          startIcon: $,
-          size: y,
+          startIcon: T,
+          size: $,
           hasError: Boolean(c),
-          disabled: l,
-          clearLabel: i,
-          onClear: n && m ? j : void 0,
-          children: e(P, {
-            placeholder: T,
+          disabled: d,
+          clearLabel: o,
+          onClear: n && p ? j : void 0,
+          children: e(_, {
+            placeholder: F,
             textColor: n ? "neutral800" : "neutral600",
-            children: n ? s(n) : null
+            children: n && l ? l(n) : void 0
           })
-        }), e(_, {
+        }), e(z, {
           children: e(A, {
             position: "popper",
             sideOffset: 4,
-            children: d(D, {
+            children: a(D, {
               ref: x,
-              children: [a, e(R, {
-                id: C,
+              children: [s, e(R, {
+                id: S,
                 width: "100%",
                 height: "1px"
               })]
@@ -103,23 +103,23 @@ const Ie = ({
       }), e(K, {}), e(Q, {})]
     })
   });
-}, be = o.forwardRef(({
-  value: a,
-  startIcon: i,
-  children: s,
-  ...l
-}, c) => d(q, {
+}, be = i.forwardRef(({
+  value: s,
+  startIcon: o,
+  children: l,
+  ...d
+}, c) => a(q, {
   ref: c,
-  value: a.toString(),
-  ...l,
-  children: [i && e(R, {
+  value: s.toString(),
+  ...d,
+  children: [o && e(R, {
     as: "span",
     "aria-hidden": !0,
-    children: i
+    children: o
   }), e(Z, {
     textColor: "neutral800",
-    children: e(z, {
-      children: s
+    children: e(H, {
+      children: l
     })
   })]
 }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.7.0-alpha.3",
+  "version": "1.7.0-alpha.5",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -23,14 +23,14 @@
     "@internationalized/number": "^3.2.0",
     "@radix-ui/react-dropdown-menu": "^2.0.4",
     "@radix-ui/react-use-callback-ref": "^1.0.0",
-    "@strapi/ui-primitives": "^1.7.0-alpha.3",
+    "@strapi/ui-primitives": "^1.7.0-alpha.5",
     "@uiw/react-codemirror": "^4.19.7",
     "compute-scroll-into-view": "^1.0.17",
     "prop-types": "^15.7.2"
   },
   "devDependencies": {
     "@playwright/test": "1.27.1",
-    "@strapi/icons": "^1.7.0-alpha.3",
+    "@strapi/icons": "^1.7.0-alpha.5",
     "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.26",
     "axe-playwright": "^1.1.11",
@@ -65,5 +65,5 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2"
   },
-  "gitHead": "73c2ca60fb63ee7f97807ea2b11f37ee4dd347e5"
+  "gitHead": "d1e66b3426b71272f8a6ec4249944c32f4b77fd9"
 }