@strapi/design-system 1.3.1 → 1.4.0-beta.1

package/dist/themes/extendTheme.cjs

@@ -1,13 +1,13 @@
-"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertySymbols;var a=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;var h=(t,e,o)=>e in t?i(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,c=(t,e)=>{for(var o in e||(e={}))a.call(e,o)&&h(t,o,e[o]);if(s)for(var o of s(e))l.call(e,o)&&h(t,o,e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./lightTheme/index.cjs"),m=t=>`
+"use strict";var m=Object.defineProperty;var s=Object.getOwnPropertySymbols;var a=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;var h=(t,e,o)=>e in t?m(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,c=(t,e)=>{for(var o in e||(e={}))a.call(e,o)&&h(t,o,e[o]);if(s)for(var o of s(e))l.call(e,o)&&h(t,o,e[o]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./lightTheme/index.cjs"),u=t=>`
 ${t}
 
 The following is an example:
 
 
-import { lightTheme, extendTheme } from '@strapi/design-system/themes';
+import { lightTheme, extendTheme } from '@strapi/design-system';
 
 const myCustomTheme = extendTheme(lightTheme, {
     ${Object.keys(d.lightTheme).map(e=>`${e}: /* put the overrides for the ${e} key */,`).join(`
 `)}
 })
-`,r=t=>t&&typeof t=="object"&&!Array.isArray(t),u=(t,e)=>{const o=c({},t);return r(t)&&r(e)&&Object.keys(e).forEach(n=>{r(e[n])&&t.hasOwnProperty(n)?o[n]=u(t[n],e[n]):o[n]=e[n]}),o},f=(t,e)=>{if(!r(t)){const o=m("The first argument should be an object and corresponds to the theme you want to extend.");throw new Error(o)}if(!r(e)){const o=m("The second argument should be an object and corresponds to the keys of the theme you want to override.");throw new Error(o)}return u(t,e)};exports.extendTheme=f;
+`,r=t=>t&&typeof t=="object"&&!Array.isArray(t),i=(t,e)=>{const o=c({},t);return r(t)&&r(e)&&Object.keys(e).forEach(n=>{r(e[n])&&t.hasOwnProperty(n)?o[n]=i(t[n],e[n]):o[n]=e[n]}),o},f=(t,e)=>{if(!r(t)){const o=u("The first argument should be an object and corresponds to the theme you want to extend.");throw new Error(o)}if(!r(e)){const o=u("The second argument should be an object and corresponds to the keys of the theme you want to override.");throw new Error(o)}return i(t,e)};exports.extendTheme=f;

package/dist/themes/extendTheme.js

@@ -1,7 +1,7 @@
 var f = Object.defineProperty;
 var h = Object.getOwnPropertySymbols;
 var p = Object.prototype.hasOwnProperty, u = Object.prototype.propertyIsEnumerable;
-var s = (t, e, o) => e in t ? f(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, m = (t, e) => {
+var s = (t, e, o) => e in t ? f(t, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : t[e] = o, c = (t, e) => {
   for (var o in e || (e = {}))
     p.call(e, o) && s(t, o, e[o]);
   if (h)
@@ -10,32 +10,32 @@ var s = (t, e, o) => e in t ? f(t, e, { enumerable: !0, configurable: !0, writab
   return t;
 };
 import { lightTheme as i } from "./lightTheme/index.js";
-const c = (t) => `
+const m = (t) => `
 ${t}
 
 The following is an example:
 
 
-import { lightTheme, extendTheme } from '@strapi/design-system/themes';
+import { lightTheme, extendTheme } from '@strapi/design-system';
 
 const myCustomTheme = extendTheme(lightTheme, {
     ${Object.keys(i).map((e) => `${e}: /* put the overrides for the ${e} key */,`).join(`
 `)}
 })
 `, r = (t) => t && typeof t == "object" && !Array.isArray(t), a = (t, e) => {
-  const o = m({}, t);
+  const o = c({}, t);
   return r(t) && r(e) && Object.keys(e).forEach((n) => {
     r(e[n]) && t.hasOwnProperty(n) ? o[n] = a(t[n], e[n]) : o[n] = e[n];
   }), o;
 }, b = (t, e) => {
   if (!r(t)) {
-    const o = c(
+    const o = m(
       "The first argument should be an object and corresponds to the theme you want to extend."
     );
     throw new Error(o);
   }
   if (!r(e)) {
-    const o = c(
+    const o = m(
       "The second argument should be an object and corresponds to the keys of the theme you want to override."
     );
     throw new Error(o);

package/dist/themes/sizes.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={input:{S:`${32/16}rem`,M:`${40/16}rem`},accordions:{S:`${48/16}rem`,M:`${88/16}rem`},button:{S:`${32/16}rem`,M:`${36/16}rem`,L:`${40/16}rem`}};exports.sizes=e;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={input:{S:`${32/16}rem`,M:`${40/16}rem`},accordions:{S:`${48/16}rem`,M:`${88/16}rem`},badge:{S:`${16/16}rem`,M:`${24/16}rem`},button:{S:`${32/16}rem`,M:`${36/16}rem`,L:`${40/16}rem`}};exports.sizes=e;

package/dist/themes/sizes.js

@@ -7,6 +7,10 @@ const e = {
     S: `${3}rem`,
     M: `${5.5}rem`
   },
+  badge: {
+    S: `${1}rem`,
+    M: `${1.5}rem`
+  },
   button: {
     S: `${2}rem`,
     M: `${2.25}rem`,

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.cjs

@@ -1,8 +1,8 @@
-"use strict";var m=Object.defineProperty;var n=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var s=(e,t,r)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,i=(e,t)=>{for(var r in t||(t={}))c.call(t,r)&&s(e,r,t[r]);if(n)for(var r of n(t))d.call(t,r)&&s(e,r,t[r]);return e};var p=(e,t)=>{var r={};for(var u in e)c.call(e,u)&&t.indexOf(u)<0&&(r[u]=e[u]);if(e!=null&&n)for(var u of n(e))t.indexOf(u)<0&&d.call(e,u)&&(r[u]=e[u]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("prop-types"),S=require("react"),_=require("styled-components"),M=require("../../Button/Button.cjs"),b=require("../SimpleMenu/SimpleMenu.cjs"),q=require("@strapi/icons/CarretDown"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=l(y),f=l(S),g=l(_),B=l(q),C=g.default(M.Button)`
+"use strict";var m=Object.defineProperty;var n=Object.getOwnPropertySymbols;var c=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable;var s=(e,t,r)=>t in e?m(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,i=(e,t)=>{for(var r in t||(t={}))c.call(t,r)&&s(e,r,t[r]);if(n)for(var r of n(t))d.call(t,r)&&s(e,r,t[r]);return e};var p=(e,t)=>{var r={};for(var u in e)c.call(e,u)&&t.indexOf(u)<0&&(r[u]=e[u]);if(e!=null&&n)for(var u of n(e))t.indexOf(u)<0&&d.call(e,u)&&(r[u]=e[u]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("prop-types"),S=require("react"),_=require("styled-components"),M=require("@strapi/icons/CarretDown"),b=require("../../Button/Button.cjs"),q=require("../SimpleMenu/SimpleMenu.cjs"),l=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=l(y),f=l(S),g=l(_),B=l(M),C=g.default(b.Button)`
   padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
 
   :hover,
   :focus {
     background-color: ${({theme:e})=>e.colors.neutral200};
   }
-`,a=r=>{var u=r,{children:e}=u,t=p(u,["children"]);return f.default.createElement(b.SimpleMenu,i({noBorder:!0,icon:f.default.createElement(B.default,null),as:C,size:"S"},t),e)};a.displayName="CrumbSimpleMenu";a.propTypes={"aria-label":o.default.string.isRequired,children:o.default.oneOfType([o.default.arrayOf(o.default.node),o.default.node]).isRequired};exports.CrumbSimpleMenu=a;
+`,a=r=>{var u=r,{children:e}=u,t=p(u,["children"]);return f.default.createElement(q.SimpleMenu,i({noBorder:!0,icon:f.default.createElement(B.default,null),as:C,size:"S"},t),e)};a.displayName="CrumbSimpleMenu";a.propTypes={"aria-label":o.default.string.isRequired,children:o.default.oneOfType([o.default.arrayOf(o.default.node),o.default.node]).isRequired};exports.CrumbSimpleMenu=a;

package/dist/v2/Breadcrumbs/CrumbSimpleMenu.js

@@ -21,10 +21,10 @@ var s = (e, r) => {
 import n from "prop-types";
 import u from "react";
 import f from "styled-components";
-import { Button as y } from "../../Button/Button.js";
-import { SimpleMenu as S } from "../SimpleMenu/SimpleMenu.js";
-import b from "@strapi/icons/CarretDown";
-const $ = f(y)`
+import y from "@strapi/icons/CarretDown";
+import { Button as S } from "../../Button/Button.js";
+import { SimpleMenu as b } from "../SimpleMenu/SimpleMenu.js";
+const $ = f(S)`
   padding: ${({ theme: e }) => `${e.spaces[1]} ${e.spaces[3]}`};
 
   :hover,
@@ -33,9 +33,9 @@ const $ = f(y)`
   }
 `, c = (o) => {
   var t = o, { children: e } = t, r = s(t, ["children"]);
-  return /* @__PURE__ */ u.createElement(S, l({
+  return /* @__PURE__ */ u.createElement(b, l({
     noBorder: !0,
-    icon: /* @__PURE__ */ u.createElement(b, null),
+    icon: /* @__PURE__ */ u.createElement(y, null),
     as: $,
     size: "S"
   }, r), e);

package/dist/v2/LinkButton/LinkButton.cjs

@@ -30,4 +30,4 @@
   display: inline-flex;
   text-decoration: none;
   pointer-events: ${({disabled:e})=>e?"none":void 0};
-`,s=n.default.forwardRef((O,L)=>{var y=O,{variant:e,startIcon:t,endIcon:a,disabled:o,children:f,size:p,as:k}=y,S=m(y,["variant","startIcon","endIcon","disabled","children","size","as"]);return n.default.createElement(N,h(v({ref:L,"aria-disabled":o,size:p,variant:e},S),{as:k||T.BaseLink}),t&&n.default.createElement(u.Box,{"aria-hidden":!0,paddingRight:2},t),p==="S"?n.default.createElement(l.Typography,{variant:"pi",fontWeight:"bold"},f):n.default.createElement(l.Typography,{fontWeight:"bold"},f),a&&n.default.createElement(u.Box,{"aria-hidden":!0,paddingLeft:2},a))});s.displayName="LinkButton";s.defaultProps={as:T.BaseLink,disabled:!1,startIcon:void 0,endIcon:void 0,size:"S",variant:"default",onClick:void 0,href:void 0,to:void 0};s.propTypes={as:r.default.elementType,children:r.default.node.isRequired,disabled:r.default.bool,endIcon:r.default.element,href:e=>{if(!e.disabled&&!e.to&&!e.href)return new Error("href must be defined")},onClick:r.default.func,size:r.default.oneOf($.BUTTON_SIZES),startIcon:r.default.element,to:e=>{if(!e.disabled&&!e.href&&!e.to)return new Error("to must be defined")},variant:r.default.oneOf($.VARIANTS)};exports.LinkButton=s;
+`,s=n.default.forwardRef((O,L)=>{var y=O,{variant:e,startIcon:t,endIcon:a,disabled:o,children:f,size:p,as:k}=y,S=m(y,["variant","startIcon","endIcon","disabled","children","size","as"]);return n.default.createElement(N,h(v({ref:L,"aria-disabled":o,size:p,variant:e},S),{as:k||T.BaseLink}),t&&n.default.createElement(u.Box,{"aria-hidden":!0,paddingRight:2},t),p==="S"?n.default.createElement(l.Typography,{variant:"pi",fontWeight:"bold"},f):n.default.createElement(l.Typography,{fontWeight:"bold"},f),a&&n.default.createElement(u.Box,{"aria-hidden":!0,paddingLeft:2},a))});s.displayName="LinkButton";s.defaultProps={as:T.BaseLink,disabled:!1,startIcon:void 0,endIcon:void 0,size:"S",variant:"default",onClick:void 0,href:void 0,to:void 0};s.propTypes={as:r.default.elementType,children:r.default.node.isRequired,disabled:r.default.bool,endIcon:r.default.element,href(e){if(!e.disabled&&!e.to&&!e.href)return new Error("href must be defined")},onClick:r.default.func,size:r.default.oneOf($.BUTTON_SIZES),startIcon:r.default.element,to(e){if(!e.disabled&&!e.href&&!e.to)return new Error("to must be defined")},variant:r.default.oneOf($.VARIANTS)};exports.LinkButton=s;

package/dist/v2/LinkButton/LinkButton.js

@@ -2,22 +2,22 @@ var x = Object.defineProperty, B = Object.defineProperties;
 var T = Object.getOwnPropertyDescriptors;
 var n = Object.getOwnPropertySymbols;
 var u = Object.prototype.hasOwnProperty, b = Object.prototype.propertyIsEnumerable;
-var c = (e, t, r) => t in e ? x(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r, v = (e, t) => {
-  for (var r in t || (t = {}))
-    u.call(t, r) && c(e, r, t[r]);
+var c = (e, r, t) => r in e ? x(e, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[r] = t, v = (e, r) => {
+  for (var t in r || (r = {}))
+    u.call(r, t) && c(e, t, r[t]);
   if (n)
-    for (var r of n(t))
-      b.call(t, r) && c(e, r, t[r]);
+    for (var t of n(r))
+      b.call(r, t) && c(e, t, r[t]);
   return e;
-}, y = (e, t) => B(e, T(t));
-var $ = (e, t) => {
-  var r = {};
+}, y = (e, r) => B(e, T(r));
+var $ = (e, r) => {
+  var t = {};
   for (var o in e)
-    u.call(e, o) && t.indexOf(o) < 0 && (r[o] = e[o]);
+    u.call(e, o) && r.indexOf(o) < 0 && (t[o] = e[o]);
   if (e != null && n)
     for (var o of n(e))
-      t.indexOf(o) < 0 && b.call(e, o) && (r[o] = e[o]);
-  return r;
+      r.indexOf(o) < 0 && b.call(e, o) && (t[o] = e[o]);
+  return t;
 };
 import a from "react";
 import L from "styled-components";
@@ -29,7 +29,7 @@ import { BUTTON_SIZES as P, VARIANTS as W } from "../../Button/constants.js";
 import { BaseButtonWrapper as w } from "../../BaseButton/BaseButton.js";
 import { BaseLink as h } from "../../BaseLink/BaseLink.js";
 const A = L(w)`
-  padding: ${({ theme: e, size: t }) => `${t === "S" ? e.spaces[2] : "10px"} ${e.spaces[4]}`};
+  padding: ${({ theme: e, size: r }) => `${r === "S" ? e.spaces[2] : "10px"} ${e.spaces[4]}`};
   background: ${({ theme: e }) => e.colors.buttonPrimary600};
   border: 1px solid ${({ theme: e }) => e.colors.buttonPrimary600};
   border-radius: ${({ theme: e }) => e.borderRadius};
@@ -62,7 +62,7 @@ const A = L(w)`
   pointer-events: ${({ disabled: e }) => e ? "none" : void 0};
 `, s = a.forwardRef(
   (O, E) => {
-    var p = O, { variant: e, startIcon: t, endIcon: r, disabled: o, children: f, size: m, as: S } = p, k = $(p, ["variant", "startIcon", "endIcon", "disabled", "children", "size", "as"]);
+    var p = O, { variant: e, startIcon: r, endIcon: t, disabled: o, children: f, size: m, as: S } = p, k = $(p, ["variant", "startIcon", "endIcon", "disabled", "children", "size", "as"]);
     return /* @__PURE__ */ a.createElement(A, y(v({
       ref: E,
       "aria-disabled": o,
@@ -70,18 +70,18 @@ const A = L(w)`
       variant: e
     }, k), {
       as: S || h
-    }), t && /* @__PURE__ */ a.createElement(l, {
+    }), r && /* @__PURE__ */ a.createElement(l, {
       "aria-hidden": !0,
       paddingRight: 2
-    }, t), m === "S" ? /* @__PURE__ */ a.createElement(d, {
+    }, r), m === "S" ? /* @__PURE__ */ a.createElement(d, {
       variant: "pi",
       fontWeight: "bold"
     }, f) : /* @__PURE__ */ a.createElement(d, {
       fontWeight: "bold"
-    }, f), r && /* @__PURE__ */ a.createElement(l, {
+    }, f), t && /* @__PURE__ */ a.createElement(l, {
       "aria-hidden": !0,
       paddingLeft: 2
-    }, r));
+    }, t));
   }
 );
 s.displayName = "LinkButton";
@@ -101,14 +101,14 @@ s.propTypes = {
   children: i.node.isRequired,
   disabled: i.bool,
   endIcon: i.element,
-  href: (e) => {
+  href(e) {
     if (!e.disabled && !e.to && !e.href)
       return new Error("href must be defined");
   },
   onClick: i.func,
   size: i.oneOf(P),
   startIcon: i.element,
-  to: (e) => {
+  to(e) {
     if (!e.disabled && !e.href && !e.to)
       return new Error("to must be defined");
   },

package/dist/v2/SimpleMenu/SimpleMenu.cjs

@@ -1,19 +1,19 @@
-"use strict";var G=Object.defineProperty;var P=Object.getOwnPropertySymbols;var O=Object.prototype.hasOwnProperty,R=Object.prototype.propertyIsEnumerable;var M=(e,s,t)=>s in e?G(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,m=(e,s)=>{for(var t in s||(s={}))O.call(s,t)&&M(e,t,s[t]);if(P)for(var t of P(s))R.call(s,t)&&M(e,t,s[t]);return e};var S=(e,s)=>{var t={};for(var r in e)O.call(e,r)&&s.indexOf(r)<0&&(t[r]=e[r]);if(e!=null&&P)for(var r of P(e))s.indexOf(r)<0&&R.call(e,r)&&(t[r]=e[r]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),H=require("prop-types"),J=require("styled-components"),Q=require("@strapi/icons/CarretDown"),j=require("../../Typography/Typography.cjs"),q=require("../../Box/Box.cjs"),X=require("../../Flex/Flex.cjs"),_=require("../../Button/Button.cjs"),Y=require("../../BaseLink/BaseLink.cjs"),L=require("../../Popover/Popover.cjs"),F=require("./utils.cjs"),Z=require("../../helpers/useId.cjs"),d=require("../../helpers/keyboardKeys.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=b(l),o=b(H),T=b(J),ee=b(Q),te=T.default.button`
+"use strict";var Q=Object.defineProperty;var b=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,_=Object.prototype.propertyIsEnumerable;var M=(e,s,t)=>s in e?Q(e,s,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[s]=t,m=(e,s)=>{for(var t in s||(s={}))j.call(s,t)&&M(e,t,s[t]);if(b)for(var t of b(s))_.call(s,t)&&M(e,t,s[t]);return e};var D=(e,s)=>{var t={};for(var a in e)j.call(e,a)&&s.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&b)for(var a of b(e))s.indexOf(a)<0&&_.call(e,a)&&(t[a]=e[a]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("react"),X=require("prop-types"),Y=require("styled-components"),L=require("@radix-ui/react-use-callback-ref"),Z=require("@strapi/icons/CarretDown"),F=require("../../Typography/Typography.cjs"),I=require("../../Box/Box.cjs"),ee=require("../../Flex/Flex.cjs"),A=require("../../Button/Button.cjs"),te=require("../../BaseLink/BaseLink.cjs"),N=require("../../Popover/Popover.cjs"),$=require("./utils.cjs"),ne=require("../../helpers/useId.cjs"),d=require("../../helpers/keyboardKeys.cjs"),K=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},r=K(l),o=K(X),B=K(Y),oe=K(Z),se=B.default.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${F.getOptionStyle}
-`,ne=T.default(Y.BaseLink)`
+  ${$.getOptionStyle}
+`,ae=B.default(te.BaseLink)`
   text-decoration: none;
-  ${F.getOptionStyle}
-`,oe=T.default.span`
+  ${$.getOptionStyle}
+`,re=B.default.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`,se=T.default(_.Button)`
+`,ue=B.default(A.Button)`
   padding: ${({theme:e})=>`${e.spaces[1]} ${e.spaces[3]}`};
-`,C=v=>{var K=v,{as:e,children:s,onClick:t,isFocused:r,isLink:g}=K,h=S(K,["as","children","onClick","isFocused","isLink"]);const i=l.useRef();l.useEffect(()=>{r&&i.current&&i.current.focus()},[r]);const x=m({tabIndex:r?0:-1,ref:i,role:"menuitem"},h),k=c=>{(c.key===d.KeyboardKeys.SPACE||c.key===d.KeyboardKeys.ENTER)&&t()};return g?a.default.createElement(ne,m({as:e},x),a.default.createElement(q.Box,{padding:2},a.default.createElement(j.Typography,null,s))):a.default.createElement(te,m({onKeyDown:k,onMouseDown:t,type:"button"},x),a.default.createElement(q.Box,{padding:2},a.default.createElement(j.Typography,null,s)))};C.defaultProps={onClick:()=>{},isFocused:!1,isLink:!1};C.propTypes={as:o.default.elementType,children:o.default.node.isRequired,isFocused:o.default.bool,isLink:o.default.bool,onClick:o.default.func};const E=x=>{var k=x,{label:e,children:s,id:t,as:r,onOpen:g=()=>{},onClose:h=()=>{},size:v,popoverPlacement:K}=k,i=S(k,["label","children","id","as","onOpen","onClose","size","popoverPlacement"]);const c=l.useRef(),w=Z.useId("simplemenu",t),f=l.useRef(!1),[p,y]=l.useState(!1),[D,I]=l.useState(0),B=l.Children.toArray(s),A=v==="S"?se:_.Button,N=r||A;l.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=B.findIndex(u=>u.props.children===e);n!==-1&&I(n)}},[e]),l.useEffect(()=>{f!=null&&f.current?p&&typeof g=="function"?g():typeof h=="function"&&h():f.current=!0},[f,p]),l.useEffect(()=>{a.default.isValidElement(e)&&D==-1&&c.current.focus()},[e,D]);const $=n=>{p&&(n.key===d.KeyboardKeys.ESCAPE&&(n.stopPropagation(),y(!1),c.current.focus()),n.key===d.KeyboardKeys.DOWN&&I(u=>u===B.length-1?0:u+1),n.key===d.KeyboardKeys.UP&&I(u=>u===0?B.length-1:u-1))},V=n=>{(n.key===d.KeyboardKeys.ENTER||n.key===d.KeyboardKeys.SPACE)&&y(u=>!u)},W=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||y(!1)},z=n=>{n.preventDefault(),y(u=>!u)},U=B.map((n,u)=>a.default.createElement(X.Flex,{as:"li",key:u,justifyContent:"center",role:"menuitem"},l.cloneElement(n,{onClick:()=>{n.props.onClick(),y(!1),c.current.focus()},isFocused:D===u})));return a.default.createElement("div",{onKeyDown:$},a.default.createElement(N,m({label:a.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":p,"aria-controls":w,onKeyDown:V,onMouseDown:z,ref:c,type:"button",variant:"ghost",endIcon:a.default.createElement(oe,null,a.default.createElement(ee.default,{"aria-hidden":!0}))},i),e),p&&a.default.createElement(L.Popover,{onBlur:W,placement:K,source:c,spacing:4},a.default.createElement(q.Box,{role:"menu",as:"ul",padding:1,id:w},U)))};E.defaultProps={as:void 0};E.displayName="SimpleMenu";E.defaultProps={popoverPlacement:"bottom-start",size:"M"};E.propTypes={as:o.default.any,children:o.default.oneOfType([o.default.arrayOf(o.default.node),o.default.node]).isRequired,id:o.default.string,label:o.default.oneOfType([o.default.string,o.default.number,o.default.element]).isRequired,onClose:o.default.func,onOpen:o.default.func,popoverPlacement:o.default.oneOf(L.POPOVER_PLACEMENTS),size:o.default.oneOf(["S","M"])};exports.MenuItem=C;exports.SimpleMenu=E;
+`,S=O=>{var g=O,{as:e,children:s,onClick:t,isFocused:a,isLink:C}=g,P=D(g,["as","children","onClick","isFocused","isLink"]);const i=l.useRef();l.useEffect(()=>{a&&i.current&&i.current.focus()},[a]);const x=m({tabIndex:a?0:-1,ref:i,role:"menuitem"},P),h=c=>{(c.key===d.KeyboardKeys.SPACE||c.key===d.KeyboardKeys.ENTER)&&t()};return C?r.default.createElement(ae,m({as:e},x),r.default.createElement(I.Box,{padding:2},r.default.createElement(F.Typography,null,s))):r.default.createElement(se,m({onKeyDown:h,onMouseDown:t,type:"button"},x),r.default.createElement(I.Box,{padding:2},r.default.createElement(F.Typography,null,s)))};S.defaultProps={as:void 0,onClick(){},isFocused:!1,isLink:!1};S.propTypes={as:o.default.elementType,children:o.default.node.isRequired,isFocused:o.default.bool,isLink:o.default.bool,onClick:o.default.func};const E=x=>{var h=x,{label:e,children:s,id:t,as:a,onOpen:C=()=>{},onClose:P=()=>{},size:O,popoverPlacement:g}=h,i=D(h,["label","children","id","as","onOpen","onClose","size","popoverPlacement"]);const c=l.useRef(),R=ne.useId("simplemenu",t),f=l.useRef(!1),[p,y]=l.useState(!1),[T,q]=l.useState(0),k=l.Children.toArray(s),V=O==="S"?ue:A.Button,W=a||V;l.useEffect(()=>{if(["string","number"].includes(typeof e)){const n=k.findIndex(u=>u.props.children===e);n!==-1&&q(n)}},[e]);const v=L.useCallbackRef(C),w=L.useCallbackRef(P);l.useEffect(()=>{f!=null&&f.current?p?v():w():f.current=!0},[f,p,v,w]),l.useEffect(()=>{r.default.isValidElement(e)&&T===-1&&c.current.focus()},[e,T]);const z=n=>{p&&(n.key===d.KeyboardKeys.ESCAPE&&(n.stopPropagation(),y(!1),c.current.focus()),n.key===d.KeyboardKeys.DOWN&&q(u=>u===k.length-1?0:u+1),n.key===d.KeyboardKeys.UP&&q(u=>u===0?k.length-1:u-1))},U=n=>{(n.key===d.KeyboardKeys.ENTER||n.key===d.KeyboardKeys.SPACE)&&y(u=>!u)},G=n=>{n.preventDefault(),n.currentTarget.contains(n.relatedTarget)||y(!1)},H=n=>{n.preventDefault(),y(u=>!u)},J=k.map((n,u)=>r.default.createElement(ee.Flex,{as:"li",key:u,justifyContent:"center",role:"menuitem"},l.cloneElement(n,{onClick(){n.props.onClick(),y(!1),c.current.focus()},isFocused:T===u})));return r.default.createElement("div",{onKeyDown:z},r.default.createElement(W,m({label:r.default.isValidElement(e)?null:e,"aria-haspopup":!0,"aria-expanded":p,"aria-controls":R,onKeyDown:U,onMouseDown:H,ref:c,type:"button",variant:"ghost",endIcon:r.default.createElement(re,null,r.default.createElement(oe.default,{"aria-hidden":!0}))},i),e),p&&r.default.createElement(N.Popover,{onBlur:G,placement:g,source:c,spacing:4},r.default.createElement(I.Box,{role:"menu",as:"ul",padding:1,id:R},J)))};E.defaultProps={as:void 0};E.displayName="SimpleMenu";E.defaultProps={id:void 0,onClose(){},onOpen(){},popoverPlacement:"bottom-start",size:"M"};E.propTypes={as:o.default.any,children:o.default.oneOfType([o.default.arrayOf(o.default.node),o.default.node]).isRequired,id:o.default.string,label:o.default.oneOfType([o.default.string,o.default.number,o.default.element]).isRequired,onClose:o.default.func,onOpen:o.default.func,popoverPlacement:o.default.oneOf(N.POPOVER_PLACEMENTS),size:o.default.oneOf(["S","M"])};exports.MenuItem=S;exports.SimpleMenu=E;

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -1,105 +1,107 @@
-var U = Object.defineProperty;
-var P = Object.getOwnPropertySymbols;
-var v = Object.prototype.hasOwnProperty, K = Object.prototype.propertyIsEnumerable;
-var M = (e, r, n) => r in e ? U(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n, d = (e, r) => {
+var J = Object.defineProperty;
+var h = Object.getOwnPropertySymbols;
+var A = Object.prototype.hasOwnProperty, L = Object.prototype.propertyIsEnumerable;
+var K = (e, r, n) => r in e ? J(e, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[r] = n, d = (e, r) => {
   for (var n in r || (r = {}))
-    v.call(r, n) && M(e, n, r[n]);
-  if (P)
-    for (var n of P(r))
-      K.call(r, n) && M(e, n, r[n]);
+    A.call(r, n) && K(e, n, r[n]);
+  if (h)
+    for (var n of h(r))
+      L.call(r, n) && K(e, n, r[n]);
   return e;
 };
-var x = (e, r) => {
+var w = (e, r) => {
   var n = {};
   for (var s in e)
-    v.call(e, s) && r.indexOf(s) < 0 && (n[s] = e[s]);
-  if (e != null && P)
-    for (var s of P(e))
-      r.indexOf(s) < 0 && K.call(e, s) && (n[s] = e[s]);
+    A.call(e, s) && r.indexOf(s) < 0 && (n[s] = e[s]);
+  if (e != null && h)
+    for (var s of h(e))
+      r.indexOf(s) < 0 && L.call(e, s) && (n[s] = e[s]);
   return n;
 };
-import i, { useRef as O, useEffect as D, useState as A, Children as G, cloneElement as H } from "react";
+import i, { useRef as x, useEffect as C, useState as N, Children as Q, cloneElement as X } from "react";
 import o from "prop-types";
-import C from "styled-components";
-import J from "@strapi/icons/CarretDown";
-import { Typography as L } from "../../Typography/Typography.js";
+import k from "styled-components";
+import { useCallbackRef as $ } from "@radix-ui/react-use-callback-ref";
+import Y from "@strapi/icons/CarretDown";
+import { Typography as F } from "../../Typography/Typography.js";
 import { Box as R } from "../../Box/Box.js";
-import { Flex as Q } from "../../Flex/Flex.js";
-import { Button as N } from "../../Button/Button.js";
-import { BaseLink as X } from "../../BaseLink/BaseLink.js";
-import { POPOVER_PLACEMENTS as Y, Popover as Z } from "../../Popover/Popover.js";
-import { getOptionStyle as $ } from "./utils.js";
-import { useId as ee } from "../../helpers/useId.js";
-import { KeyboardKeys as l } from "../../helpers/keyboardKeys.js";
-const ne = C.button`
+import { Flex as Z } from "../../Flex/Flex.js";
+import { Button as V } from "../../Button/Button.js";
+import { BaseLink as ee } from "../../BaseLink/BaseLink.js";
+import { POPOVER_PLACEMENTS as ne, Popover as te } from "../../Popover/Popover.js";
+import { getOptionStyle as q } from "./utils.js";
+import { useId as oe } from "../../helpers/useId.js";
+import { KeyboardKeys as c } from "../../helpers/keyboardKeys.js";
+const re = k.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${$}
-`, te = C(X)`
+  ${q}
+`, se = k(ee)`
   text-decoration: none;
-  ${$}
-`, oe = C.span`
+  ${q}
+`, ie = k.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`, re = C(N)`
+`, ae = k(V)`
   padding: ${({ theme: e }) => `${e.spaces[1]} ${e.spaces[3]}`};
-`, F = (b) => {
-  var g = b, { as: e, children: r, onClick: n, isFocused: s, isLink: y } = g, E = x(g, ["as", "children", "onClick", "isFocused", "isLink"]);
-  const p = O();
-  D(() => {
+`, W = (b) => {
+  var y = b, { as: e, children: r, onClick: n, isFocused: s, isLink: D } = y, I = w(y, ["as", "children", "onClick", "isFocused", "isLink"]);
+  const p = x();
+  C(() => {
     s && p.current && p.current.focus();
   }, [s]);
-  const T = d({
+  const O = d({
     tabIndex: s ? 0 : -1,
     ref: p,
     role: "menuitem"
-  }, E), h = (c) => {
-    (c.key === l.SPACE || c.key === l.ENTER) && n();
+  }, I), E = (l) => {
+    (l.key === c.SPACE || l.key === c.ENTER) && n();
   };
-  return y ? /* @__PURE__ */ i.createElement(te, d({
+  return D ? /* @__PURE__ */ i.createElement(se, d({
     as: e
-  }, T), /* @__PURE__ */ i.createElement(R, {
+  }, O), /* @__PURE__ */ i.createElement(R, {
     padding: 2
-  }, /* @__PURE__ */ i.createElement(L, null, r))) : /* @__PURE__ */ i.createElement(ne, d({
-    onKeyDown: h,
+  }, /* @__PURE__ */ i.createElement(F, null, r))) : /* @__PURE__ */ i.createElement(re, d({
+    onKeyDown: E,
     onMouseDown: n,
     type: "button"
-  }, T), /* @__PURE__ */ i.createElement(R, {
+  }, O), /* @__PURE__ */ i.createElement(R, {
     padding: 2
-  }, /* @__PURE__ */ i.createElement(L, null, r)));
+  }, /* @__PURE__ */ i.createElement(F, null, r)));
 };
-F.defaultProps = {
-  onClick: () => {
+W.defaultProps = {
+  as: void 0,
+  onClick() {
   },
   isFocused: !1,
   isLink: !1
 };
-F.propTypes = {
+W.propTypes = {
   as: o.elementType,
   children: o.node.isRequired,
   isFocused: o.bool,
   isLink: o.bool,
   onClick: o.func
 };
-const I = (T) => {
-  var h = T, {
+const P = (O) => {
+  var E = O, {
     label: e,
     children: r,
     id: n,
     as: s,
-    onOpen: y = () => {
+    onOpen: D = () => {
     },
-    onClose: E = () => {
+    onClose: I = () => {
     },
     size: b,
-    popoverPlacement: g
-  } = h, p = x(h, [
+    popoverPlacement: y
+  } = E, p = w(E, [
     "label",
     "children",
     "id",
@@ -109,82 +111,89 @@ const I = (T) => {
     "size",
     "popoverPlacement"
   ]);
-  const c = O(), B = ee("simplemenu", n), u = O(!1), [m, f] = A(!1), [S, w] = A(0), k = G.toArray(r), V = s || (b === "S" ? re : N);
-  D(() => {
+  const l = x(), v = oe("simplemenu", n), u = x(!1), [m, f] = N(!1), [T, S] = N(0), g = Q.toArray(r), _ = s || (b === "S" ? ae : V);
+  C(() => {
     if (["string", "number"].includes(typeof e)) {
-      const t = k.findIndex((a) => a.props.children === e);
-      t !== -1 && w(t);
+      const t = g.findIndex((a) => a.props.children === e);
+      t !== -1 && S(t);
     }
-  }, [e]), D(() => {
-    u != null && u.current ? m && typeof y == "function" ? y() : typeof E == "function" && E() : u.current = !0;
-  }, [u, m]), D(() => {
-    i.isValidElement(e) && S == -1 && c.current.focus();
-  }, [e, S]);
-  const q = (t) => {
-    m && (t.key === l.ESCAPE && (t.stopPropagation(), f(!1), c.current.focus()), t.key === l.DOWN && w((a) => a === k.length - 1 ? 0 : a + 1), t.key === l.UP && w((a) => a === 0 ? k.length - 1 : a - 1));
-  }, W = (t) => {
-    (t.key === l.ENTER || t.key === l.SPACE) && f((a) => !a);
-  }, _ = (t) => {
+  }, [e]);
+  const B = $(D), M = $(I);
+  C(() => {
+    u != null && u.current ? m ? B() : M() : u.current = !0;
+  }, [u, m, B, M]), C(() => {
+    i.isValidElement(e) && T === -1 && l.current.focus();
+  }, [e, T]);
+  const z = (t) => {
+    m && (t.key === c.ESCAPE && (t.stopPropagation(), f(!1), l.current.focus()), t.key === c.DOWN && S((a) => a === g.length - 1 ? 0 : a + 1), t.key === c.UP && S((a) => a === 0 ? g.length - 1 : a - 1));
+  }, j = (t) => {
+    (t.key === c.ENTER || t.key === c.SPACE) && f((a) => !a);
+  }, U = (t) => {
     t.preventDefault(), t.currentTarget.contains(t.relatedTarget) || f(!1);
-  }, z = (t) => {
+  }, G = (t) => {
     t.preventDefault(), f((a) => !a);
-  }, j = k.map((t, a) => /* @__PURE__ */ i.createElement(Q, {
+  }, H = g.map((t, a) => /* @__PURE__ */ i.createElement(Z, {
     as: "li",
     key: a,
     justifyContent: "center",
     role: "menuitem"
-  }, H(t, {
-    onClick: () => {
-      t.props.onClick(), f(!1), c.current.focus();
+  }, X(t, {
+    onClick() {
+      t.props.onClick(), f(!1), l.current.focus();
     },
-    isFocused: S === a
+    isFocused: T === a
   })));
   return /* @__PURE__ */ i.createElement("div", {
-    onKeyDown: q
-  }, /* @__PURE__ */ i.createElement(V, d({
+    onKeyDown: z
+  }, /* @__PURE__ */ i.createElement(_, d({
     label: i.isValidElement(e) ? null : e,
     "aria-haspopup": !0,
     "aria-expanded": m,
-    "aria-controls": B,
-    onKeyDown: W,
-    onMouseDown: z,
-    ref: c,
+    "aria-controls": v,
+    onKeyDown: j,
+    onMouseDown: G,
+    ref: l,
     type: "button",
     variant: "ghost",
-    endIcon: /* @__PURE__ */ i.createElement(oe, null, /* @__PURE__ */ i.createElement(J, {
+    endIcon: /* @__PURE__ */ i.createElement(ie, null, /* @__PURE__ */ i.createElement(Y, {
       "aria-hidden": !0
     }))
-  }, p), e), m && /* @__PURE__ */ i.createElement(Z, {
-    onBlur: _,
-    placement: g,
-    source: c,
+  }, p), e), m && /* @__PURE__ */ i.createElement(te, {
+    onBlur: U,
+    placement: y,
+    source: l,
     spacing: 4
   }, /* @__PURE__ */ i.createElement(R, {
     role: "menu",
     as: "ul",
     padding: 1,
-    id: B
-  }, j)));
+    id: v
+  }, H)));
 };
-I.defaultProps = {
+P.defaultProps = {
   as: void 0
 };
-I.displayName = "SimpleMenu";
-I.defaultProps = {
+P.displayName = "SimpleMenu";
+P.defaultProps = {
+  id: void 0,
+  onClose() {
+  },
+  onOpen() {
+  },
   popoverPlacement: "bottom-start",
   size: "M"
 };
-I.propTypes = {
+P.propTypes = {
   as: o.any,
   children: o.oneOfType([o.arrayOf(o.node), o.node]).isRequired,
   id: o.string,
   label: o.oneOfType([o.string, o.number, o.element]).isRequired,
   onClose: o.func,
   onOpen: o.func,
-  popoverPlacement: o.oneOf(Y),
+  popoverPlacement: o.oneOf(ne),
   size: o.oneOf(["S", "M"])
 };
 export {
-  F as MenuItem,
-  I as SimpleMenu
+  W as MenuItem,
+  P as SimpleMenu
 };

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