@strapi/design-system 1.6.4 → 1.6.5

package/dist/v2/SimpleMenu/SimpleMenu.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),D=require("@radix-ui/react-use-callback-ref"),z=require("@strapi/icons"),U=require("prop-types"),H=require("styled-components"),T=require("./utils.cjs"),G=require("../../BaseLink/BaseLink.cjs"),k=require("../../Box/Box.cjs"),M=require("../../Button/Button.cjs"),J=require("../../Flex/Flex.cjs"),u=require("../../helpers/keyboardKeys.cjs"),Q=require("../../helpers/useId.cjs"),j=require("../../Popover/Popover.cjs"),C=require("../../Typography/Typography.cjs"),X=require("../Link/Link.cjs"),q=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=q(a),t=q(U),y=q(H),Y=y.default.button`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),D=require("@radix-ui/react-use-callback-ref"),z=require("@strapi/icons"),U=require("prop-types"),H=require("styled-components"),T=require("./utils.cjs"),G=require("../../BaseLink/BaseLink.cjs"),k=require("../../Box/Box.cjs"),M=require("../../Button/Button.cjs"),J=require("../../Flex/Flex.cjs"),u=require("../../helpers/keyboardKeys.cjs"),Q=require("../../hooks/useId.cjs"),j=require("../../Popover/Popover.cjs"),C=require("../../Typography/Typography.cjs"),X=require("../Link/Link.cjs"),q=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=q(a),t=q(U),y=q(H),Y=y.default.button`
   border: none;
   padding: 0;
   background: transparent;

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -9,7 +9,7 @@ import { Box as g } from "../../Box/Box.js";
 import { Button as K } from "../../Button/Button.js";
 import { Flex as G } from "../../Flex/Flex.js";
 import { KeyboardKeys as a } from "../../helpers/keyboardKeys.js";
-import { useId as J } from "../../helpers/useId.js";
+import { useId as J } from "../../hooks/useId.js";
 import { POPOVER_PLACEMENTS as Q, Popover as X } from "../../Popover/Popover.js";
 import { Typography as O } from "../../Typography/Typography.js";
 import { Link as Y } from "../Link/Link.js";

package/dist/v2/SubNav/SubNavHeader.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),C=require("@strapi/icons"),I=require("prop-types"),R=require("styled-components"),s=require("../../Box/Box.cjs"),_=require("../../Divider/Divider.cjs"),D=require("../../Flex/Flex.cjs"),P=require("../../helpers/keyboardKeys.cjs"),F=require("../../helpers/useId.cjs"),K=require("../../helpers/usePrevious.cjs"),L=require("../../IconButton/IconButton.cjs"),k=require("../../Searchbar/Searchbar.cjs"),w=require("../../Searchbar/SearchForm.cjs"),O=require("../../Typography/Typography.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=d(o),r=d(I),H=d(R),h=H.default(_.Divider)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),C=require("@strapi/icons"),I=require("prop-types"),R=require("styled-components"),s=require("../../Box/Box.cjs"),_=require("../../Divider/Divider.cjs"),D=require("../../Flex/Flex.cjs"),P=require("../../helpers/keyboardKeys.cjs"),k=require("../../hooks/useId.cjs"),F=require("../../hooks/usePrevious.cjs"),K=require("../../IconButton/IconButton.cjs"),L=require("../../Searchbar/Searchbar.cjs"),w=require("../../Searchbar/SearchForm.cjs"),O=require("../../Typography/Typography.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=d(o),r=d(I),H=d(R),h=H.default(_.Divider)`
   width: ${24/16}rem;
   background-color: ${({theme:t})=>t.colors.neutral200};
-`,i=({as:t,label:g,searchLabel:f,searchable:y,onChange:b,value:m,onClear:S,onSubmit:v,id:B})=>{const[n,l]=o.useState(!1),p=K.usePrevious(n),q=F.useId(B),c=o.useRef(),u=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),p&&!n&&u.current&&u.current.focus()},[n,p]);const E=()=>{l(a=>!a)},j=a=>{S(a),c.current.focus()},T=a=>{a.relatedTarget?.id!==q&&l(!1)},x=a=>{a.key===P.KeyboardKeys.ESCAPE&&l(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(w.SearchForm,null,e.default.createElement(k.Searchbar,{name:"searchbar",value:m,onChange:b,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:x,ref:c,onBlur:T,onClear:j,onSubmit:v,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(h,null))):e.default.createElement(s.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4},e.default.createElement(D.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(O.Typography,{variant:"beta",as:t},g),y&&e.default.createElement(L.IconButton,{ref:u,onClick:E,label:f,icon:e.default.createElement(C.Search,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(h,null)))};i.defaultProps={as:"h2",searchable:!1,onChange(){},onClear(){},onSubmit(){},value:"",searchLabel:"",id:void 0};i.propTypes={as:r.default.string,id:r.default.string,label:r.default.string.isRequired,onChange:r.default.func,onClear:r.default.func,onSubmit:r.default.func,searchLabel:r.default.string,searchable:r.default.bool,value:r.default.string};exports.SubNavHeader=i;
+`,i=({as:t,label:g,searchLabel:f,searchable:y,onChange:b,value:m,onClear:S,onSubmit:v,id:B})=>{const[n,l]=o.useState(!1),p=F.usePrevious(n),q=k.useId(B),c=o.useRef(),u=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),p&&!n&&u.current&&u.current.focus()},[n,p]);const E=()=>{l(a=>!a)},j=a=>{S(a),c.current.focus()},T=a=>{a.relatedTarget?.id!==q&&l(!1)},x=a=>{a.key===P.KeyboardKeys.ESCAPE&&l(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(w.SearchForm,null,e.default.createElement(L.Searchbar,{name:"searchbar",value:m,onChange:b,placeholder:"e.g: strapi-plugin-abcd",onKeyDown:x,ref:c,onBlur:T,onClear:j,onSubmit:v,clearLabel:"Clear",size:"S"},f)),e.default.createElement(s.Box,{paddingLeft:2,paddingTop:4},e.default.createElement(h,null))):e.default.createElement(s.Box,{paddingLeft:6,paddingTop:6,paddingBottom:2,paddingRight:4},e.default.createElement(D.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(O.Typography,{variant:"beta",as:t},g),y&&e.default.createElement(K.IconButton,{ref:u,onClick:E,label:f,icon:e.default.createElement(C.Search,null)})),e.default.createElement(s.Box,{paddingTop:4},e.default.createElement(h,null)))};i.defaultProps={as:"h2",searchable:!1,onChange(){},onClear(){},onSubmit(){},value:"",searchLabel:"",id:void 0};i.propTypes={as:r.default.string,id:r.default.string,label:r.default.string.isRequired,onChange:r.default.func,onClear:r.default.func,onSubmit:r.default.func,searchLabel:r.default.string,searchable:r.default.bool,value:r.default.string};exports.SubNavHeader=i;

package/dist/v2/SubNav/SubNavHeader.js

@@ -6,8 +6,8 @@ import { Box as n } from "../../Box/Box.js";
 import { Divider as I } from "../../Divider/Divider.js";
 import { Flex as K } from "../../Flex/Flex.js";
 import { KeyboardKeys as P } from "../../helpers/keyboardKeys.js";
-import { useId as k } from "../../helpers/useId.js";
-import { usePrevious as O } from "../../helpers/usePrevious.js";
+import { useId as k } from "../../hooks/useId.js";
+import { usePrevious as O } from "../../hooks/usePrevious.js";
 import { IconButton as F } from "../../IconButton/IconButton.js";
 import { Searchbar as _ } from "../../Searchbar/Searchbar.js";
 import { SearchForm as $ } from "../../Searchbar/SearchForm.js";

package/dist/v2/SubNav/SubNavLinkSection.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),m=require("@strapi/icons"),h=require("prop-types"),x=require("styled-components"),l=require("../../Box/Box.cjs"),b=require("../../Flex/Flex.cjs"),S=require("../../helpers/useId.cjs"),q=require("../../Typography/Typography.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(o),r=d(h),i=d(x),E=i.default(l.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),m=require("@strapi/icons"),h=require("prop-types"),x=require("styled-components"),l=require("../../Box/Box.cjs"),b=require("../../Flex/Flex.cjs"),S=require("../../hooks/useId.cjs"),k=require("../../Typography/Typography.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=d(o),r=d(h),i=d(x),q=i.default(l.Box)`
   svg {
     height: ${4/16}rem;
     path {
       fill: ${({theme:e})=>e.colors.neutral700};
     }
   }
-`,k=i.default.button`
+`,E=i.default.button`
   border: none;
   padding: 0;
   background: transparent;
@@ -16,4 +16,4 @@
   align-items: center;
   width: ${12/16}rem;
   transform: rotateX(${({rotated:e})=>e?"0deg":"180deg"});
-`,s=({label:e,children:c,id:p})=>{const[n,f]=o.useState(!0),u=S.useId(p),g=()=>{f(a=>!a)};return t.default.createElement(l.Box,null,t.default.createElement(E,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(k,{onClick:g,"aria-expanded":n,"aria-controls":u},t.default.createElement(v,{rotated:n},t.default.createElement(m.CarretDown,{"aria-hidden":!0})),t.default.createElement(l.Box,{paddingLeft:2},t.default.createElement(q.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),n&&t.default.createElement("ul",{id:u},o.Children.map(c,(a,y)=>t.default.createElement("li",{key:y},a))))};s.defaultProps={id:void 0};s.propTypes={children:r.default.node.isRequired,id:r.default.string,label:r.default.string.isRequired};exports.SubNavLinkSection=s;
+`,s=({label:e,children:c,id:p})=>{const[n,f]=o.useState(!0),u=S.useId(p),g=()=>{f(a=>!a)};return t.default.createElement(l.Box,null,t.default.createElement(q,{paddingLeft:7,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(b.Flex,{justifyContent:"space-between"},t.default.createElement(E,{onClick:g,"aria-expanded":n,"aria-controls":u},t.default.createElement(v,{rotated:n},t.default.createElement(m.CarretDown,{"aria-hidden":!0})),t.default.createElement(l.Box,{paddingLeft:2},t.default.createElement(k.Typography,{as:"span",fontWeight:"semiBold",textColor:"neutral800"},e))))),n&&t.default.createElement("ul",{id:u},o.Children.map(c,(a,y)=>t.default.createElement("li",{key:y},a))))};s.defaultProps={id:void 0};s.propTypes={children:r.default.node.isRequired,id:r.default.string,label:r.default.string.isRequired};exports.SubNavLinkSection=s;

package/dist/v2/SubNav/SubNavLinkSection.js

@@ -4,7 +4,7 @@ import o from "prop-types";
 import a from "styled-components";
 import { Box as i } from "../../Box/Box.js";
 import { Flex as E } from "../../Flex/Flex.js";
-import { useId as y } from "../../helpers/useId.js";
+import { useId as y } from "../../hooks/useId.js";
 import { Typography as b } from "../../Typography/Typography.js";
 const k = a(i)`
   svg {

package/dist/v2/SubNav/SubNavSection.cjs

@@ -1,8 +1,8 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),m=require("prop-types"),v=require("styled-components"),y=require("./SubNavSectionLabel.cjs"),h=require("../../Badge/Badge.cjs"),u=require("../../Box/Box.cjs"),q=require("../../helpers/useId.cjs"),B=require("../../Stack/Stack.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(n),a=r(m),k=r(v),_=k.default(u.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),S=require("prop-types"),h=require("styled-components"),v=require("./SubNavSectionLabel.cjs"),x=require("../../Badge/Badge.cjs"),u=require("../../Box/Box.cjs"),y=require("../../Flex/Flex.cjs"),q=require("../../hooks/useId.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(n),a=r(S),B=r(h),_=B.default(u.Box)`
   svg {
     height: ${4/16}rem;
     path {
       fill: ${({theme:e})=>e.colors.neutral500};
     }
   }
-`,s=({collapsable:e,label:c,badgeLabel:o,children:p,id:f})=>{const[i,g]=n.useState(!0),d=q.useId(f),S=()=>{g(l=>!l)};return t.default.createElement(B.Stack,{spacing:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:o?6:0},t.default.createElement(y.SubNavSectionLabel,{onClick:S,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),o&&t.default.createElement(h.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},o))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(l,b)=>t.default.createElement("li",{key:b},l))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node.isRequired,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;
+`,s=({collapsable:e,label:c,badgeLabel:l,children:p,id:f})=>{const[i,g]=n.useState(!0),d=q.useId(f),b=()=>{g(o=>!o)};return t.default.createElement(y.Flex,{direction:"column",alignItems:"stretch",gap:1},t.default.createElement(_,{paddingLeft:6,paddingTop:2,paddingBottom:2,paddingRight:4},t.default.createElement(u.Box,{position:"relative",paddingRight:l?6:0},t.default.createElement(v.SubNavSectionLabel,{onClick:b,ariaExpanded:i,ariaControls:d,collapsable:e,label:c}),l&&t.default.createElement(x.Badge,{backgroundColor:"neutral150",textColor:"neutral600",position:"absolute",right:0,top:"50%",transform:"translateY(-50%)"},l))),(!e||i)&&t.default.createElement("ol",{id:d},n.Children.map(p,(o,m)=>t.default.createElement("li",{key:m},o))))};s.defaultProps={badgeLabel:null,collapsable:!1,id:void 0};s.propTypes={badgeLabel:a.default.string,children:a.default.node.isRequired,collapsable:a.default.bool,id:a.default.string,label:a.default.string.isRequired};exports.SubNavSection=s;

package/dist/v2/SubNav/SubNavSection.js

@@ -1,12 +1,12 @@
-import e, { useState as f, Children as b } from "react";
+import e, { useState as f, Children as h } from "react";
 import t from "prop-types";
-import h from "styled-components";
+import b from "styled-components";
 import { SubNavSectionLabel as E } from "./SubNavSectionLabel.js";
 import { Badge as S } from "../../Badge/Badge.js";
 import { Box as l } from "../../Box/Box.js";
-import { useId as k } from "../../helpers/useId.js";
-import { Stack as v } from "../../Stack/Stack.js";
-const C = h(l)`
+import { Flex as v } from "../../Flex/Flex.js";
+import { useId as C } from "../../hooks/useId.js";
+const k = b(l)`
   svg {
     height: ${4 / 16}rem;
     path {
@@ -14,15 +14,15 @@ const C = h(l)`
     }
   }
 `, p = ({ collapsable: r, label: s, badgeLabel: o, children: d, id: m }) => {
-  const [a, c] = f(!0), n = k(m), u = () => {
+  const [n, c] = f(!0), a = C(m), u = () => {
     c((i) => !i);
   };
-  return /* @__PURE__ */ e.createElement(v, { spacing: 1 }, /* @__PURE__ */ e.createElement(C, { paddingLeft: 6, paddingTop: 2, paddingBottom: 2, paddingRight: 4 }, /* @__PURE__ */ e.createElement(l, { position: "relative", paddingRight: o ? 6 : 0 }, /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ e.createElement(v, { direction: "column", alignItems: "stretch", gap: 1 }, /* @__PURE__ */ e.createElement(k, { paddingLeft: 6, paddingTop: 2, paddingBottom: 2, paddingRight: 4 }, /* @__PURE__ */ e.createElement(l, { position: "relative", paddingRight: o ? 6 : 0 }, /* @__PURE__ */ e.createElement(
     E,
     {
       onClick: u,
-      ariaExpanded: a,
-      ariaControls: n,
+      ariaExpanded: n,
+      ariaControls: a,
       collapsable: r,
       label: s
     }
@@ -37,7 +37,7 @@ const C = h(l)`
       transform: "translateY(-50%)"
     },
     o
-  ))), (!r || a) && /* @__PURE__ */ e.createElement("ol", { id: n }, b.map(d, (i, g) => /* @__PURE__ */ e.createElement("li", { key: g }, i))));
+  ))), (!r || n) && /* @__PURE__ */ e.createElement("ol", { id: a }, h.map(d, (i, g) => /* @__PURE__ */ e.createElement("li", { key: g }, i))));
 };
 p.defaultProps = {
   badgeLabel: null,

package/dist/v2/SubNav/SubNavSections.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),s=require("prop-types"),l=require("../../Box/Box.cjs"),i=require("../../Stack/Stack.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(o),d=a(s),r=({children:e,...c})=>t.default.createElement(l.Box,{paddingTop:2,paddingBottom:4},t.default.createElement(i.Stack,{as:"ol",spacing:2,...c},o.Children.map(e,(n,u)=>t.default.createElement("li",{key:u},n))));r.propTypes={children:d.default.node.isRequired};exports.SubNavSections=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),i=require("prop-types"),d=require("../../Box/Box.cjs"),p=require("../../Flex/Flex.cjs"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=a(r),f=a(i),c=({children:e,spacing:l=2,horizontal:o=!1,...n})=>t.default.createElement(d.Box,{paddingTop:2,paddingBottom:4},t.default.createElement(p.Flex,{as:"ol",gap:l,direction:o?"row":"column",alignItems:o?"center":"stretch",...n},r.Children.map(e,(s,u)=>t.default.createElement("li",{key:u},s))));c.propTypes={children:f.default.node.isRequired};exports.SubNavSections=c;

package/dist/v2/SubNav/SubNavSections.js

@@ -1,11 +1,21 @@
 import e, { Children as i } from "react";
-import m from "prop-types";
-import { Box as n } from "../../Box/Box.js";
-import { Stack as a } from "../../Stack/Stack.js";
-const c = ({ children: r, ...t }) => /* @__PURE__ */ e.createElement(n, { paddingTop: 2, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(a, { as: "ol", spacing: 2, ...t }, i.map(r, (o, p) => /* @__PURE__ */ e.createElement("li", { key: p }, o))));
-c.propTypes = {
-  children: m.node.isRequired
+import a from "prop-types";
+import { Box as c } from "../../Box/Box.js";
+import { Flex as l } from "../../Flex/Flex.js";
+const d = ({ children: t, spacing: o = 2, horizontal: r = !1, ...m }) => /* @__PURE__ */ e.createElement(c, { paddingTop: 2, paddingBottom: 4 }, /* @__PURE__ */ e.createElement(
+  l,
+  {
+    as: "ol",
+    gap: o,
+    direction: r ? "row" : "column",
+    alignItems: r ? "center" : "stretch",
+    ...m
+  },
+  i.map(t, (n, p) => /* @__PURE__ */ e.createElement("li", { key: p }, n))
+));
+d.propTypes = {
+  children: a.node.isRequired
 };
 export {
-  c as SubNavSections
+  d as SubNavSections
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@strapi/design-system",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "license": "MIT",
   "type": "module",
   "sideEffects": false,
@@ -29,11 +29,12 @@
   "devDependencies": {
     "@juggle/resize-observer": "^3.4.0",
     "@playwright/test": "1.27.1",
-    "@strapi/icons": "^1.6.4",
+    "@strapi/icons": "^1.6.5",
     "@swc/core": "^1.3.11",
     "@swc/jest": "^0.2.23",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.4",
+    "@testing-library/user-event": "^14.4.3",
     "@types/jest": "^29.2.6",
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2",
@@ -76,5 +77,5 @@
     "@types/react": "17.0.2",
     "@types/react-dom": "17.0.2"
   },
-  "gitHead": "6c4710e399055cb8831c50d3b4a02bfbcc57aa04"
+  "gitHead": "0c136e23f46fcce45a4d005c1cd99a6197ec35d1"
 }

package/dist/Select/SingleSelect.cjs

@@ -1,82 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),W=require("react"),U=require("@radix-ui/react-select"),w=require("@strapi/icons"),Y=require("styled-components"),G=require("../Field/Field.cjs"),J=require("../Field/FieldLabel.cjs");require("../Field/FieldInput.cjs");const Q=require("../Field/FieldHint.cjs"),X=require("../Field/FieldError.cjs");require("../Field/FieldContext.cjs");require("../Field/FieldAction.cjs");const Z=require("../Stack/Stack.cjs"),g=require("../Box/Box.cjs"),q=require("../Flex/Flex.cjs"),j=require("../Typography/Typography.cjs"),ee=require("../hooks/useId.cjs"),te=require("../hooks/useIntersection.cjs"),I=require("../themes/utils.cjs"),re=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function k(e){if(e&&e.__esModule)return e;const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const s in e)if(s!=="default"){const i=Object.getOwnPropertyDescriptor(e,s);Object.defineProperty(n,s,i.get?i:{enumerable:!0,get:()=>e[s]})}}return n.default=e,Object.freeze(n)}const h=k(W),o=k(U),c=re(Y),ne=[" ","Enter","ArrowUp","ArrowDown"],oe=({children:e,clearLabel:n="Clear",customizeContent:s=p=>p.toString(),disabled:i,error:b,hint:v,id:R,label:T,labelAction:O,onChange:$,onClear:a,onReachEnd:m,placeholder:_,required:y,selectButtonTitle:he,startIcon:S,size:B="M",value:f})=>{const p=h.useRef(null),x=h.useRef(null),d=h.useRef(null),[D,C]=h.useState(""),[E,P]=h.useState(!1),u=ee.useId(R),V=`${u}-hint`,M=`${u}-error`,N=r=>{$?$(typeof f=="number"?Number(r):r):C(r)},z=r=>{a&&!i&&(a(r),x.current.focus())},A=r=>{P(r)},H=r=>{d.current&&d.current===r.target.closest("div")&&r.preventDefault()},K=r=>{ne.includes(r.key)&&d.current&&d.current===r.target.closest("div")&&!i&&a&&(r.preventDefault(),a(r),x.current.focus())},F=`intersection-${u}`,L=r=>{m&&m(r)};te.useIntersection(p,L,{selectorToWatch:`#${F}`,skipWhen:!E});const l=typeof f<"u"?f.toString():D;return t.jsx(G.Field,{hint:v,error:b,id:u,required:y,children:t.jsxs(Z.Stack,{spacing:1,children:[t.jsx(J.FieldLabel,{action:O,children:T}),t.jsxs(o.Root,{onOpenChange:A,disabled:i,required:y,onValueChange:N,value:l,children:[t.jsxs(ie,{id:u,"aria-labelledby":`${V} ${M}`,"aria-disabled":i,$hasError:Boolean(b),$size:B,onPointerDown:H,onKeyDown:K,ref:x,children:[t.jsxs(q.Flex,{as:"span",gap:4,children:[S&&t.jsx(g.Box,{as:"span","aria-hidden":!0,children:S}),t.jsx(j.Typography,{ellipsis:!0,textColor:l?"neutral800":"neutral600",children:t.jsx(o.Value,{"aria-label":l,children:l?s(l):_})})]}),t.jsxs(q.Flex,{as:"span",gap:3,children:[l&&a?t.jsx(se,{hasRadius:!0,background:"transparent",role:"button",tabIndex:0,onClick:z,"aria-disabled":i,"aria-label":n,title:n,ref:d,children:t.jsx(w.Cross,{})}):null,t.jsx(le,{children:t.jsx(w.CarretDown,{})})]})]}),t.jsx(o.Portal,{children:t.jsx(ce,{position:"popper",sideOffset:4,children:t.jsxs(ae,{ref:p,children:[e,t.jsx(g.Box,{id:F,width:"100%",height:"1px"})]})})})]}),t.jsx(Q.FieldHint,{}),t.jsx(X.FieldError,{})]})})},se=c.default(g.Box)`
-  border: none;
-
-  svg {
-    height: ${11/16}rem;
-    width: ${11/16}rem;
-  }
-
-  svg path {
-    fill: ${({theme:e})=>e.colors.neutral600};
-  }
-`,ie=c.default(o.Trigger)`
-  position: relative;
-  border: 1px solid ${({theme:e,$hasError:n})=>n?e.colors.danger600:e.colors.neutral200};
-  padding-right: ${({theme:e})=>e.spaces[3]};
-  padding-left: ${({theme:e})=>e.spaces[3]};
-  border-radius: ${({theme:e})=>e.borderRadius};
-  background: ${({theme:e})=>e.colors.neutral0};
-  overflow: hidden;
-  min-height: ${({theme:e,$size:n})=>I.getThemeSize("input")({theme:e,size:n})};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${({theme:e})=>e.spaces[4]};
-
-  &[aria-disabled='true'] {
-    color: ${e=>e.theme.colors.neutral600};
-    background: ${e=>e.theme.colors.neutral150};
-  }
-
-  /* Required to ensure the below inputFocusStyles are adhered too */
-  &:focus-visible {
-    outline: none;
-  }
-
-  ${({theme:e,$hasError:n})=>I.inputFocusStyle()({theme:e,hasError:n})};
-`,le=c.default(o.Icon)`
-  & > svg {
-    width: ${6/16}rem;
-
-    & > path {
-      fill: ${({theme:e})=>e.colors.neutral600};
-    }
-  }
-`,ce=c.default(o.Content)`
-  background: ${({theme:e})=>e.colors.neutral0};
-  box-shadow: ${({theme:e})=>e.shadows.filterShadow};
-  border: 1px solid ${({theme:e})=>e.colors.neutral150};
-  border-radius: ${({theme:e})=>e.borderRadius};
-  width: var(--radix-select-trigger-width);
-  /* This is from the design-system figma file. */
-  max-height: 15rem;
-`,ae=c.default(o.Viewport)`
-  padding: ${({theme:e})=>e.spaces[1]};
-`,de=({children:e,startIcon:n,value:s})=>t.jsxs(ue,{textValue:e.toString(),value:s.toString(),children:[n&&t.jsx(g.Box,{as:"span",paddingRight:2,"aria-hidden":!0,children:n}),t.jsx(j.Typography,{textColor:"neutral800",children:t.jsx(o.ItemText,{children:e})})]}),ue=c.default(o.Item)`
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline-offset: -3px;
-  border-radius: ${e=>e.theme.borderRadius};
-  padding: ${e=>`${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
-  padding-left: ${({theme:e})=>e.spaces[4]};
-  background-color: ${({theme:e})=>e.colors.neutral0};
-  display: flex;
-  align-items: center;
-
-  &:focus-visible {
-    outline: none;
-    background-color: ${({theme:e})=>e.colors.primary100};
-  }
-
-  &:hover {
-    background-color: ${({theme:e})=>e.colors.primary100};
-  }
-
-  &[data-state='checked'] {
-    ${j.Typography} {
-      font-weight: bold;
-      color: ${({theme:e})=>e.colors.primary600};
-    }
-  }
-`;exports.SingleSelect=oe;exports.SingleSelectOption=de;

package/dist/Select/SingleSelect.js

@@ -1,285 +0,0 @@
-import { jsx as t, jsxs as i } from "react/jsx-runtime";
-import * as h from "react";
-import * as n from "@radix-ui/react-select";
-import { Cross as H, CarretDown as M } from "@strapi/icons";
-import s from "styled-components";
-import { Field as U } from "../Field/Field.js";
-import { FieldLabel as Y } from "../Field/FieldLabel.js";
-import "../Field/FieldInput.js";
-import { FieldHint as _ } from "../Field/FieldHint.js";
-import { FieldError as G } from "../Field/FieldError.js";
-import "../Field/FieldContext.js";
-import "../Field/FieldAction.js";
-import { Stack as J } from "../Stack/Stack.js";
-import { Box as m } from "../Box/Box.js";
-import { Flex as I } from "../Flex/Flex.js";
-import { Typography as b } from "../Typography/Typography.js";
-import { useId as L } from "../hooks/useId.js";
-import { useIntersection as Q } from "../hooks/useIntersection.js";
-import { getThemeSize as X, inputFocusStyle as Z } from "../themes/utils.js";
-const ee = [" ", "Enter", "ArrowUp", "ArrowDown"], Te = ({
-  children: e,
-  clearLabel: o = "Clear",
-  customizeContent: g = (p) => p.toString(),
-  disabled: a,
-  error: w,
-  hint: k,
-  id: T,
-  label: C,
-  labelAction: D,
-  onChange: x,
-  onClear: c,
-  onReachEnd: y,
-  placeholder: E,
-  required: S,
-  selectButtonTitle: se,
-  startIcon: v,
-  size: F = "M",
-  value: f
-}) => {
-  const p = h.useRef(null), $ = h.useRef(null), d = h.useRef(null), [O, B] = h.useState(""), [V, N] = h.useState(!1), u = L(T), P = `${u}-hint`, j = `${u}-error`, z = (r) => {
-    x ? x(typeof f == "number" ? Number(r) : r) : B(r);
-  }, K = (r) => {
-    c && !a && (c(r), $.current.focus());
-  }, q = (r) => {
-    N(r);
-  }, A = (r) => {
-    d.current && d.current === r.target.closest("div") && r.preventDefault();
-  }, W = (r) => {
-    ee.includes(r.key) && d.current && d.current === r.target.closest("div") && !a && c && (r.preventDefault(), c(r), $.current.focus());
-  }, R = `intersection-${u}`;
-  Q(p, (r) => {
-    y && y(r);
-  }, {
-    selectorToWatch: `#${R}`,
-    skipWhen: !V
-  });
-  const l = typeof f < "u" ? f.toString() : O;
-  return t(U, {
-    hint: k,
-    error: w,
-    id: u,
-    required: S,
-    children: i(J, {
-      spacing: 1,
-      children: [t(Y, {
-        action: D,
-        children: C
-      }), i(n.Root, {
-        onOpenChange: q,
-        disabled: a,
-        required: S,
-        onValueChange: z,
-        value: l,
-        children: [i(te, {
-          id: u,
-          "aria-labelledby": `${P} ${j}`,
-          "aria-disabled": a,
-          $hasError: Boolean(w),
-          $size: F,
-          onPointerDown: A,
-          onKeyDown: W,
-          ref: $,
-          children: [i(I, {
-            as: "span",
-            gap: 4,
-            children: [v && t(m, {
-              as: "span",
-              "aria-hidden": !0,
-              children: v
-            }), t(b, {
-              ellipsis: !0,
-              textColor: l ? "neutral800" : "neutral600",
-              children: t(n.Value, {
-                "aria-label": l,
-                children: l ? g(l) : E
-              })
-            })]
-          }), i(I, {
-            as: "span",
-            gap: 3,
-            children: [l && c ? t(re, {
-              hasRadius: !0,
-              background: "transparent",
-              role: "button",
-              tabIndex: 0,
-              onClick: K,
-              "aria-disabled": a,
-              "aria-label": o,
-              title: o,
-              ref: d,
-              children: t(H, {})
-            }) : null, t(oe, {
-              children: t(M, {})
-            })]
-          })]
-        }), t(n.Portal, {
-          children: t(ne, {
-            position: "popper",
-            sideOffset: 4,
-            children: i(ie, {
-              ref: p,
-              children: [e, t(m, {
-                id: R,
-                width: "100%",
-                height: "1px"
-              })]
-            })
-          })
-        })]
-      }), t(_, {}), t(G, {})]
-    })
-  });
-}, re = s(m)`
-  border: none;
-
-  svg {
-    height: ${11 / 16}rem;
-    width: ${11 / 16}rem;
-  }
-
-  svg path {
-    fill: ${({
-  theme: e
-}) => e.colors.neutral600};
-  }
-`, te = s(n.Trigger)`
-  position: relative;
-  border: 1px solid ${({
-  theme: e,
-  $hasError: o
-}) => o ? e.colors.danger600 : e.colors.neutral200};
-  padding-right: ${({
-  theme: e
-}) => e.spaces[3]};
-  padding-left: ${({
-  theme: e
-}) => e.spaces[3]};
-  border-radius: ${({
-  theme: e
-}) => e.borderRadius};
-  background: ${({
-  theme: e
-}) => e.colors.neutral0};
-  overflow: hidden;
-  min-height: ${({
-  theme: e,
-  $size: o
-}) => X("input")({
-  theme: e,
-  size: o
-})};
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: ${({
-  theme: e
-}) => e.spaces[4]};
-
-  &[aria-disabled='true'] {
-    color: ${(e) => e.theme.colors.neutral600};
-    background: ${(e) => e.theme.colors.neutral150};
-  }
-
-  /* Required to ensure the below inputFocusStyles are adhered too */
-  &:focus-visible {
-    outline: none;
-  }
-
-  ${({
-  theme: e,
-  $hasError: o
-}) => Z()({
-  theme: e,
-  hasError: o
-})};
-`, oe = s(n.Icon)`
-  & > svg {
-    width: ${6 / 16}rem;
-
-    & > path {
-      fill: ${({
-  theme: e
-}) => e.colors.neutral600};
-    }
-  }
-`, ne = s(n.Content)`
-  background: ${({
-  theme: e
-}) => e.colors.neutral0};
-  box-shadow: ${({
-  theme: e
-}) => e.shadows.filterShadow};
-  border: 1px solid ${({
-  theme: e
-}) => e.colors.neutral150};
-  border-radius: ${({
-  theme: e
-}) => e.borderRadius};
-  width: var(--radix-select-trigger-width);
-  /* This is from the design-system figma file. */
-  max-height: 15rem;
-`, ie = s(n.Viewport)`
-  padding: ${({
-  theme: e
-}) => e.spaces[1]};
-`, Ce = ({
-  children: e,
-  startIcon: o,
-  value: g
-}) => i(le, {
-  textValue: e.toString(),
-  value: g.toString(),
-  children: [o && t(m, {
-    as: "span",
-    paddingRight: 2,
-    "aria-hidden": !0,
-    children: o
-  }), t(b, {
-    textColor: "neutral800",
-    children: t(n.ItemText, {
-      children: e
-    })
-  })]
-}), le = s(n.Item)`
-  width: 100%;
-  border: none;
-  text-align: left;
-  outline-offset: -3px;
-  border-radius: ${(e) => e.theme.borderRadius};
-  padding: ${(e) => `${e.theme.spaces[2]} ${e.theme.spaces[4]}`};
-  padding-left: ${({
-  theme: e
-}) => e.spaces[4]};
-  background-color: ${({
-  theme: e
-}) => e.colors.neutral0};
-  display: flex;
-  align-items: center;
-
-  &:focus-visible {
-    outline: none;
-    background-color: ${({
-  theme: e
-}) => e.colors.primary100};
-  }
-
-  &:hover {
-    background-color: ${({
-  theme: e
-}) => e.colors.primary100};
-  }
-
-  &[data-state='checked'] {
-    ${b} {
-      font-weight: bold;
-      color: ${({
-  theme: e
-}) => e.colors.primary600};
-    }
-  }
-`;
-export {
-  Te as SingleSelect,
-  Ce as SingleSelectOption
-};