@strapi/design-system 1.5.0-alpha.0 → 1.6.0-alpha.0

package/dist/v2/MainNav/NavCondense.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),i=require("prop-types"),d=require("styled-components"),l=require("@strapi/icons/ChevronRight"),u=require("@strapi/icons/ChevronLeft"),c=require("../../Icon/Icon.cjs"),f=require("../../VisuallyHidden/VisuallyHidden.cjs"),h=require("./MainNavContext.cjs"),t=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=t(a),p=t(i),v=t(d),g=t(l),y=t(u),m=v.default.button`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),d=require("prop-types"),l=require("styled-components"),s=require("@strapi/icons"),c=require("../../Icon/Icon.cjs"),u=require("../../VisuallyHidden/VisuallyHidden.cjs"),p=require("./MainNavContext.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},n=o(i),f=o(d),h=o(l),y=h.default.button`
   background: ${({theme:e})=>e.colors.neutral0};
   border: 1px solid ${({theme:e})=>e.colors.neutral150};
   border-radius: ${({theme:e})=>e.borderRadius};
@@ -7,7 +7,7 @@
   justify-content: center;
   position: absolute;
   bottom: ${(9+4)/16}rem; // 9 is the height of the svg and 4 is the padding below
-  right: ${({theme:e,condensed:n})=>n?0:e.spaces[5]};
+  right: ${({theme:e,condensed:t})=>t?0:e.spaces[5]};
   transform: ${({condensed:e})=>e?"translateX(50%)":void 0};
   z-index: 2;
   width: ${18/16}rem;
@@ -17,4 +17,4 @@
     width: ${6/16}rem;
     height: ${9/16}rem;
   }
-`,s=({children:e,...n})=>{const r=h.useMainNav();return o.default.createElement(m,{as:"button",condensed:r,...n},o.default.createElement(c.Icon,{as:r?g.default:y.default,"aria-hidden":!0,color:"neutral600"}),o.default.createElement(f.VisuallyHidden,null,e))};s.propTypes={children:p.default.string.isRequired};exports.NavCondense=s;
+`,a=({children:e,...t})=>{const r=p.useMainNav();return n.default.createElement(y,{as:"button",condensed:r,...t},n.default.createElement(c.Icon,{as:r?s.ChevronRight:s.ChevronLeft,"aria-hidden":!0,color:"neutral600"}),n.default.createElement(u.VisuallyHidden,null,e))};a.propTypes={children:f.default.string.isRequired};exports.NavCondense=a;

package/dist/v2/MainNav/NavCondense.js

@@ -1,8 +1,7 @@
 import t from "react";
 import n from "prop-types";
 import i from "styled-components";
-import s from "@strapi/icons/ChevronRight";
-import a from "@strapi/icons/ChevronLeft";
+import { ChevronRight as s, ChevronLeft as a } from "@strapi/icons";
 import { Icon as d } from "../../Icon/Icon.js";
 import { VisuallyHidden as m } from "../../VisuallyHidden/VisuallyHidden.js";
 import { useMainNav as l } from "./MainNavContext.js";

package/dist/v2/MainNav/NavSections.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("react"),l=require("prop-types"),d=require("styled-components"),u=require("../../Stack/Stack.cjs"),i=require("../../Box/Box.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(r),p=o(l),f=o(d),y=f.default(i.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),d=require("prop-types"),l=require("styled-components"),u=require("../../Stack/Stack.cjs"),i=require("../../Box/Box.cjs"),o=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=o(a),p=o(d),f=o(l),y=f.default(i.Box)`
   flex-grow: 1;
-  overflow-y: scroll;
-`,a=({children:e,...c})=>t.default.createElement(y,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8},t.default.createElement(u.Stack,{as:"ul",spacing:4,...c},r.Children.map(e,(n,s)=>t.default.createElement("li",{key:s},n))));a.propTypes={children:p.default.node.isRequired};exports.NavSections=a;
+  overflow-y: auto;
+`,r=({children:e,...c})=>t.default.createElement(y,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8},t.default.createElement(u.Stack,{as:"ul",spacing:4,...c},a.Children.map(e,(n,s)=>t.default.createElement("li",{key:s},n))));r.propTypes={children:p.default.node.isRequired};exports.NavSections=r;

package/dist/v2/MainNav/NavSections.js

@@ -1,17 +1,17 @@
 import e, { Children as i } from "react";
 import n from "prop-types";
-import m from "styled-components";
-import { Stack as a } from "../../Stack/Stack.js";
+import a from "styled-components";
+import { Stack as m } from "../../Stack/Stack.js";
 import { Box as d } from "../../Box/Box.js";
-const l = m(d)`
+const l = a(d)`
   flex-grow: 1;
-  overflow-y: scroll;
+  overflow-y: auto;
 `, c = ({ children: o, ...r }) => /* @__PURE__ */ e.createElement(l, {
   paddingLeft: 3,
   paddingRight: 2,
   paddingTop: 3,
   paddingBottom: 8
-}, /* @__PURE__ */ e.createElement(a, {
+}, /* @__PURE__ */ e.createElement(m, {
   as: "ul",
   spacing: 4,
   ...r

package/dist/v2/Pagination/components.cjs

@@ -1,21 +1,21 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("react"),L=require("styled-components"),k=require("prop-types"),q=require("@strapi/icons/ChevronLeft"),R=require("@strapi/icons/ChevronRight"),u=require("../../VisuallyHidden/VisuallyHidden.cjs"),c=require("./PaginationContext.cjs"),T=require("../../Typography/Typography.cjs"),_=require("../../themes/utils.cjs"),x=require("../../BaseLink/BaseLink.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=s(b),l=s(L),d=s(k),E=s(q),w=s(R),g=l.default(T.Typography)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const L=require("react"),k=require("styled-components"),q=require("prop-types"),g=require("@strapi/icons"),d=require("../../VisuallyHidden/VisuallyHidden.cjs"),u=require("./PaginationContext.cjs"),T=require("../../Typography/Typography.cjs"),x=require("../../themes/utils.cjs"),E=require("../../BaseLink/BaseLink.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},a=c(L),s=c(k),l=c(q),v=s.default(T.Typography)`
   line-height: revert;
-`,$={active:!0},f=l.default(x.BaseLink).withConfig({shouldForwardProp:(e,t)=>!$[e]&&t(e)})`
+`,w={active:!0},p=s.default(E.BaseLink).withConfig({shouldForwardProp:(e,t)=>!w[e]&&t(e)})`
   padding: ${({theme:e})=>e.spaces[3]};
   border-radius: ${({theme:e})=>e.borderRadius};
   box-shadow: ${({active:e,theme:t})=>e?t.shadows.filterShadow:void 0};
   text-decoration: none;
   display: flex;
 
-  ${_.buttonFocusStyle}
-`,C=l.default(f)`
+  ${x.buttonFocusStyle}
+`,R=s.default(p)`
   color: ${({theme:e,active:t})=>t?e.colors.primary700:e.colors.neutral800};
   background: ${({theme:e,active:t})=>t?e.colors.neutral0:void 0};
 
   &:hover {
     box-shadow: ${({theme:e})=>e.shadows.filterShadow};
   }
-`,v=l.default(f)`
+`,m=s.default(p)`
   font-size: 0.7rem;
   svg path {
     fill: ${e=>e["aria-disabled"]?e.theme.colors.neutral300:e.theme.colors.neutral600};
@@ -31,6 +31,6 @@
   ${e=>e["aria-disabled"]?`
   pointer-events: none;
     `:void 0}
-`,j=l.default(f)`
+`,$=s.default(p)`
   color: ${({theme:e})=>e.colors.neutral800};
-`,p=a.default.forwardRef(({children:e,...t},n)=>{const{activePage:i}=c.usePagination(),r=i===1;return a.default.createElement(v,{ref:n,"aria-disabled":r,tabIndex:r?-1:void 0,...t},a.default.createElement(u.VisuallyHidden,null,e),a.default.createElement(E.default,{"aria-hidden":!0}))});p.displayName="PreviousLink";const h=a.default.forwardRef(({children:e,...t},n)=>{const{activePage:i,pageCount:r}=c.usePagination(),o=i===r;return a.default.createElement(v,{ref:n,"aria-disabled":o,tabIndex:o?-1:void 0,...t},a.default.createElement(u.VisuallyHidden,null,e),a.default.createElement(w.default,{"aria-hidden":!0}))});h.displayName="NextLink";const y=a.default.forwardRef(({number:e,children:t,...n},i)=>{const{activePage:r}=c.usePagination(),o=r===e;return a.default.createElement(C,{ref:i,...n,active:o},a.default.createElement(u.VisuallyHidden,null,t),a.default.createElement(g,{"aria-hidden":!0,variant:"pi",fontWeight:o?"bold":null},e))});y.displayName="PageLink";const m=({children:e,...t})=>a.default.createElement(j,{...t,as:"div"},a.default.createElement(u.VisuallyHidden,null,e),a.default.createElement(g,{"aria-hidden":!0,variant:"pi"},"\u2026"));y.propTypes={children:d.default.node.isRequired,number:d.default.number.isRequired};const P={children:d.default.node.isRequired};h.propTypes=P;p.propTypes=P;m.propTypes={children:d.default.node.isRequired};exports.Dots=m;exports.NextLink=h;exports.PageLink=y;exports.PreviousLink=p;
+`,f=a.default.forwardRef(({children:e,...t},n)=>{const{activePage:i}=u.usePagination(),r=i===1;return a.default.createElement(m,{ref:n,"aria-disabled":r,tabIndex:r?-1:void 0,...t},a.default.createElement(d.VisuallyHidden,null,e),a.default.createElement(g.ChevronLeft,{"aria-hidden":!0}))});f.displayName="PreviousLink";const y=a.default.forwardRef(({children:e,...t},n)=>{const{activePage:i,pageCount:r}=u.usePagination(),o=i===r;return a.default.createElement(m,{ref:n,"aria-disabled":o,tabIndex:o?-1:void 0,...t},a.default.createElement(d.VisuallyHidden,null,e),a.default.createElement(g.ChevronRight,{"aria-hidden":!0}))});y.displayName="NextLink";const h=a.default.forwardRef(({number:e,children:t,...n},i)=>{const{activePage:r}=u.usePagination(),o=r===e;return a.default.createElement(R,{ref:i,...n,active:o},a.default.createElement(d.VisuallyHidden,null,t),a.default.createElement(v,{"aria-hidden":!0,variant:"pi",fontWeight:o?"bold":null},e))});h.displayName="PageLink";const P=({children:e,...t})=>a.default.createElement($,{...t,as:"div"},a.default.createElement(d.VisuallyHidden,null,e),a.default.createElement(v,{"aria-hidden":!0,variant:"pi"},"\u2026"));h.propTypes={children:l.default.node.isRequired,number:l.default.number.isRequired};const b={children:l.default.node.isRequired};y.propTypes=b;f.propTypes=b;P.propTypes={children:l.default.node.isRequired};exports.Dots=P;exports.NextLink=y;exports.PageLink=h;exports.PreviousLink=f;

package/dist/v2/Pagination/components.js

@@ -1,8 +1,7 @@
-import o from "react";
+import t from "react";
 import s from "styled-components";
 import d from "prop-types";
-import b from "@strapi/icons/ChevronLeft";
-import y from "@strapi/icons/ChevronRight";
+import { ChevronLeft as b, ChevronRight as y } from "@strapi/icons";
 import { VisuallyHidden as l } from "../../VisuallyHidden/VisuallyHidden.js";
 import { usePagination as c } from "./PaginationContext.js";
 import { Typography as P } from "../../Typography/Typography.js";
@@ -47,47 +46,47 @@ const m = s(P)`
     ` : void 0}
 `, $ = s(p)`
   color: ${({ theme: e }) => e.colors.neutral800};
-`, h = o.forwardRef(({ children: e, ...r }, a) => {
-  const { activePage: i } = c(), t = i === 1;
-  return /* @__PURE__ */ o.createElement(u, {
+`, h = t.forwardRef(({ children: e, ...r }, a) => {
+  const { activePage: i } = c(), o = i === 1;
+  return /* @__PURE__ */ t.createElement(u, {
     ref: a,
-    "aria-disabled": t,
-    tabIndex: t ? -1 : void 0,
+    "aria-disabled": o,
+    tabIndex: o ? -1 : void 0,
     ...r
-  }, /* @__PURE__ */ o.createElement(l, null, e), /* @__PURE__ */ o.createElement(b, {
+  }, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(b, {
     "aria-hidden": !0
   }));
 });
 h.displayName = "PreviousLink";
-const f = o.forwardRef(({ children: e, ...r }, a) => {
-  const { activePage: i, pageCount: t } = c(), n = i === t;
-  return /* @__PURE__ */ o.createElement(u, {
+const f = t.forwardRef(({ children: e, ...r }, a) => {
+  const { activePage: i, pageCount: o } = c(), n = i === o;
+  return /* @__PURE__ */ t.createElement(u, {
     ref: a,
     "aria-disabled": n,
     tabIndex: n ? -1 : void 0,
     ...r
-  }, /* @__PURE__ */ o.createElement(l, null, e), /* @__PURE__ */ o.createElement(y, {
+  }, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(y, {
     "aria-hidden": !0
   }));
 });
 f.displayName = "NextLink";
-const v = o.forwardRef(({ number: e, children: r, ...a }, i) => {
-  const { activePage: t } = c(), n = t === e;
-  return /* @__PURE__ */ o.createElement(L, {
+const v = t.forwardRef(({ number: e, children: r, ...a }, i) => {
+  const { activePage: o } = c(), n = o === e;
+  return /* @__PURE__ */ t.createElement(L, {
     ref: i,
     ...a,
     active: n
-  }, /* @__PURE__ */ o.createElement(l, null, r), /* @__PURE__ */ o.createElement(m, {
+  }, /* @__PURE__ */ t.createElement(l, null, r), /* @__PURE__ */ t.createElement(m, {
     "aria-hidden": !0,
     variant: "pi",
     fontWeight: n ? "bold" : null
   }, e));
 });
 v.displayName = "PageLink";
-const x = ({ children: e, ...r }) => /* @__PURE__ */ o.createElement($, {
+const x = ({ children: e, ...r }) => /* @__PURE__ */ t.createElement($, {
   ...r,
   as: "div"
-}, /* @__PURE__ */ o.createElement(l, null, e), /* @__PURE__ */ o.createElement(m, {
+}, /* @__PURE__ */ t.createElement(l, null, e), /* @__PURE__ */ t.createElement(m, {
   "aria-hidden": !0,
   variant: "pi"
 }, "\u2026"));

package/dist/v2/SimpleMenu/SimpleMenu.cjs

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

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -1,28 +1,28 @@
-import t, { useRef as I, useEffect as g, useState as w, Children as q, cloneElement as W } from "react";
+import t, { useRef as b, useEffect as E, useState as B, Children as z, cloneElement as j } from "react";
 import e from "prop-types";
-import d from "styled-components";
-import { useCallbackRef as M } from "@radix-ui/react-use-callback-ref";
-import _ from "@strapi/icons/CarretDown";
-import { Link as z } from "../Link/Link.js";
-import { Typography as b } from "../../Typography/Typography.js";
-import { Box as k } from "../../Box/Box.js";
-import { Flex as j } from "../../Flex/Flex.js";
-import { Button as B } from "../../Button/Button.js";
-import { BaseLink as U } from "../../BaseLink/BaseLink.js";
-import { POPOVER_PLACEMENTS as G, Popover as H } from "../../Popover/Popover.js";
-import { getOptionStyle as R } from "./utils.js";
-import { useId as J } from "../../helpers/useId.js";
-import { KeyboardKeys as i } from "../../helpers/keyboardKeys.js";
-const Q = d.button`
+import f from "styled-components";
+import { useCallbackRef as L } from "@radix-ui/react-use-callback-ref";
+import { CarretDown as H } from "@strapi/icons";
+import { Link as U } from "../Link/Link.js";
+import { Typography as O } from "../../Typography/Typography.js";
+import { Box as g } from "../../Box/Box.js";
+import { Flex as G } from "../../Flex/Flex.js";
+import { Button as K } from "../../Button/Button.js";
+import { BaseLink as J } from "../../BaseLink/BaseLink.js";
+import { POPOVER_PLACEMENTS as Q, Popover as X } from "../../Popover/Popover.js";
+import { getOptionStyle as T } from "./utils.js";
+import { useId as Y } from "../../helpers/useId.js";
+import { KeyboardKeys as a } from "../../helpers/keyboardKeys.js";
+const Z = f.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
-  ${R}
-`, X = d(U)`
+  ${T}
+`, ee = f(J)`
   text-decoration: none;
-  ${R}
-`, Y = d(z)`
+  ${T}
+`, ne = f(U)`
   &:focus-visible {
     /* Removes Link focus-visible after properties and reset to global outline */
     outline: 2px solid ${({ theme: o }) => o.colors.primary600};
@@ -35,49 +35,49 @@ const Q = d.button`
   svg path {
     fill: currentColor;
   }
-  ${R}
-`, Z = d.span`
+  ${T}
+`, te = f.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`, ee = d(B)`
+`, oe = f(K)`
   padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[3]}`};
-`, L = ({ as: o, children: a, onClick: y, isFocused: l, isLink: C, isExternal: x, ...v }) => {
-  const c = I();
-  g(() => {
-    l && c.current && c.current.focus();
-  }, [l]);
-  const p = {
-    tabIndex: l ? 0 : -1,
-    ref: c,
+`, $ = ({ as: o, children: l, onClick: d, isFocused: c, isLink: k, isExternal: v, ...C }) => {
+  const p = b();
+  E(() => {
+    c && p.current && p.current.focus();
+  }, [c]);
+  const i = {
+    tabIndex: c ? 0 : -1,
+    ref: p,
     role: "menuitem",
-    ...v
-  }, s = (u) => {
-    (u.key === i.SPACE || u.key === i.ENTER) && y();
+    ...C
+  }, x = (s) => {
+    (s.key === a.SPACE || s.key === a.ENTER) && d();
   };
-  return C ? /* @__PURE__ */ t.createElement(X, {
+  return k ? /* @__PURE__ */ t.createElement(ee, {
     as: o,
-    ...p
-  }, /* @__PURE__ */ t.createElement(k, {
+    ...i
+  }, /* @__PURE__ */ t.createElement(g, {
     padding: 2
-  }, /* @__PURE__ */ t.createElement(b, null, a))) : x ? /* @__PURE__ */ t.createElement(Y, {
+  }, /* @__PURE__ */ t.createElement(O, null, l))) : v ? /* @__PURE__ */ t.createElement(ne, {
     isExternal: !0,
-    ...p
-  }, /* @__PURE__ */ t.createElement(k, {
+    ...i
+  }, /* @__PURE__ */ t.createElement(g, {
     padding: 2
-  }, /* @__PURE__ */ t.createElement(b, null, a))) : /* @__PURE__ */ t.createElement(Q, {
-    onKeyDown: s,
-    onMouseDown: y,
+  }, /* @__PURE__ */ t.createElement(O, null, l))) : /* @__PURE__ */ t.createElement(Z, {
+    onKeyDown: x,
+    onMouseDown: d,
     type: "button",
-    ...p
-  }, /* @__PURE__ */ t.createElement(k, {
+    ...i
+  }, /* @__PURE__ */ t.createElement(g, {
     padding: 2
-  }, /* @__PURE__ */ t.createElement(b, null, a)));
+  }, /* @__PURE__ */ t.createElement(O, null, l)));
 };
-L.defaultProps = {
+$.defaultProps = {
   as: void 0,
   onClick() {
   },
@@ -85,7 +85,7 @@ L.defaultProps = {
   isFocused: !1,
   isLink: !1
 };
-L.propTypes = {
+$.propTypes = {
   as: e.elementType,
   children: e.node.isRequired,
   isExternal: e.bool,
@@ -95,76 +95,81 @@ L.propTypes = {
 };
 const h = ({
   label: o,
-  children: a,
-  id: y,
-  as: l,
-  onOpen: C = () => {
+  children: l,
+  id: d,
+  as: c,
+  onOpen: k = () => {
   },
-  onClose: x = () => {
+  onClose: v = () => {
   },
-  size: v,
-  popoverPlacement: c,
-  ...p
+  size: C,
+  popoverPlacement: p,
+  onReachEnd: i,
+  ...x
 }) => {
-  const s = I(), u = J("simplemenu", y), P = I(!1), [m, f] = w(!1), [D, O] = w(0), E = q.toArray(a), K = l || (v === "S" ? ee : B);
-  g(() => {
+  const s = b(), P = Y("simplemenu", d), R = b(!1), [u, m] = B(!1), [D, I] = B(0), y = z.toArray(l), A = c || (C === "S" ? oe : K), S = !!i && typeof i == "function";
+  E(() => {
     if (["string", "number"].includes(typeof o)) {
-      const n = E.findIndex((r) => r.props.children === o);
-      n !== -1 && O(n);
+      const n = y.findIndex((r) => r.props.children === o);
+      n !== -1 && I(n);
     }
   }, [o]);
-  const T = M(C), S = M(x);
-  g(() => {
-    P?.current ? m ? T() : S() : P.current = !0;
-  }, [P, m, T, S]), g(() => {
+  const w = L(k), M = L(v);
+  E(() => {
+    R?.current ? u ? w() : M() : R.current = !0;
+  }, [R, u, w, M]), E(() => {
     t.isValidElement(o) && D === -1 && s.current.focus();
   }, [o, D]);
-  const $ = (n) => {
-    m && (n.key === i.ESCAPE && (n.stopPropagation(), f(!1), s.current.focus()), n.key === i.DOWN && O((r) => r === E.length - 1 ? 0 : r + 1), n.key === i.UP && O((r) => r === 0 ? E.length - 1 : r - 1));
-  }, A = (n) => {
-    (n.key === i.ENTER || n.key === i.SPACE) && f((r) => !r);
-  }, N = (n) => {
-    n.preventDefault(), n.currentTarget.contains(n.relatedTarget) || f(!1);
+  const N = (n) => {
+    u && (n.key === a.ESCAPE && (n.stopPropagation(), m(!1), s.current.focus()), n.key === a.DOWN && I((r) => r === y.length - 1 ? 0 : r + 1), n.key === a.UP && I((r) => r === 0 ? y.length - 1 : r - 1));
   }, F = (n) => {
-    n.preventDefault(), f((r) => !r);
-  }, V = E.map((n, r) => /* @__PURE__ */ t.createElement(j, {
+    (n.key === a.ENTER || n.key === a.SPACE) && m((r) => !r);
+  }, V = (n) => {
+    n.preventDefault(), n.currentTarget.contains(n.relatedTarget) || m(!1);
+  }, q = (n) => {
+    n.preventDefault(), m((r) => !r);
+  }, W = () => {
+    S && i();
+  }, _ = y.map((n, r) => /* @__PURE__ */ t.createElement(G, {
     as: "li",
     key: r,
     justifyContent: "center",
     role: "menuitem"
-  }, W(n, {
+  }, j(n, {
     onClick() {
-      n.props.onClick(), f(!1), s.current.focus();
+      n.props.onClick(), m(!1), s.current.focus();
     },
     isFocused: D === r
   })));
   return /* @__PURE__ */ t.createElement("div", {
-    onKeyDown: $
-  }, /* @__PURE__ */ t.createElement(K, {
+    onKeyDown: N
+  }, /* @__PURE__ */ t.createElement(A, {
     label: t.isValidElement(o) ? null : o,
     "aria-haspopup": !0,
-    "aria-expanded": m,
-    "aria-controls": u,
-    onKeyDown: A,
-    onMouseDown: F,
+    "aria-expanded": u,
+    "aria-controls": P,
+    onKeyDown: F,
+    onMouseDown: q,
     ref: s,
     type: "button",
     variant: "ghost",
-    endIcon: /* @__PURE__ */ t.createElement(Z, null, /* @__PURE__ */ t.createElement(_, {
+    endIcon: /* @__PURE__ */ t.createElement(te, null, /* @__PURE__ */ t.createElement(H, {
       "aria-hidden": !0
     })),
-    ...p
-  }, o), m && /* @__PURE__ */ t.createElement(H, {
-    onBlur: N,
-    placement: c,
+    ...x
+  }, o), u && /* @__PURE__ */ t.createElement(X, {
+    onBlur: V,
+    placement: p,
     source: s,
+    onReachEnd: W,
+    intersectionId: S ? `popover-${P}` : void 0,
     spacing: 4
-  }, /* @__PURE__ */ t.createElement(k, {
+  }, /* @__PURE__ */ t.createElement(g, {
     role: "menu",
     as: "ul",
     padding: 1,
-    id: u
-  }, V)));
+    id: P
+  }, _)));
 };
 h.defaultProps = {
   as: void 0
@@ -176,6 +181,7 @@ h.defaultProps = {
   },
   onOpen() {
   },
+  onReachEnd: void 0,
   popoverPlacement: "bottom-start",
   size: "M"
 };
@@ -186,10 +192,11 @@ h.propTypes = {
   label: e.oneOfType([e.string, e.number, e.element]).isRequired,
   onClose: e.func,
   onOpen: e.func,
-  popoverPlacement: e.oneOf(G),
+  onReachEnd: e.func,
+  popoverPlacement: e.oneOf(Q),
   size: e.oneOf(["S", "M"])
 };
 export {
-  L as MenuItem,
+  $ as MenuItem,
   h 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"),C=require("prop-types"),_=require("styled-components"),I=require("@strapi/icons/Search"),R=require("../../Flex/Flex.cjs"),D=require("../../Typography/Typography.cjs"),P=require("../../IconButton/IconButton.cjs"),s=require("../../Box/Box.cjs"),F=require("../../Divider/Divider.cjs"),K=require("../../Searchbar/Searchbar.cjs"),L=require("../../Searchbar/SearchForm.cjs"),k=require("../../helpers/useId.cjs"),w=require("../../helpers/usePrevious.cjs"),O=require("../../helpers/keyboardKeys.cjs"),l=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=l(o),r=l(C),H=l(_),M=l(I),h=H.default(F.Divider)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),C=require("prop-types"),I=require("styled-components"),R=require("@strapi/icons"),_=require("../../Flex/Flex.cjs"),D=require("../../Typography/Typography.cjs"),P=require("../../IconButton/IconButton.cjs"),s=require("../../Box/Box.cjs"),F=require("../../Divider/Divider.cjs"),K=require("../../Searchbar/Searchbar.cjs"),L=require("../../Searchbar/SearchForm.cjs"),k=require("../../helpers/useId.cjs"),w=require("../../helpers/usePrevious.cjs"),O=require("../../helpers/keyboardKeys.cjs"),d=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},e=d(o),r=d(C),H=d(I),h=H.default(F.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),p=w.usePrevious(n),q=k.useId("subnav-searchbar-clear",B),c=o.useRef(),d=o.useRef();o.useEffect(()=>{n&&c.current&&c.current.focus(),p&&!n&&d.current&&d.current.focus()},[n,p]);const E=()=>{u(a=>!a)},j=a=>{S(a),c.current.focus()},T=a=>{a.relatedTarget?.id!==q&&u(!1)},x=a=>{a.key===O.KeyboardKeys.ESCAPE&&u(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(L.SearchForm,null,e.default.createElement(K.Searchbar,{name:"searchbar",value:m,onChange:y,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(R.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(D.Typography,{variant:"beta",as:t},g),b&&e.default.createElement(P.IconButton,{ref:d,onClick:E,label:f,icon:e.default.createElement(M.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:g,searchLabel:f,searchable:b,onChange:y,value:m,onClear:S,onSubmit:v,id:B})=>{const[n,l]=o.useState(!1),p=w.usePrevious(n),q=k.useId("subnav-searchbar-clear",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===O.KeyboardKeys.ESCAPE&&l(!1)};return n?e.default.createElement(s.Box,{paddingLeft:4,paddingTop:5,paddingBottom:2,paddingRight:4},e.default.createElement(L.SearchForm,null,e.default.createElement(K.Searchbar,{name:"searchbar",value:m,onChange:y,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(_.Flex,{justifyContent:"space-between",alignItems:"flex-start"},e.default.createElement(D.Typography,{variant:"beta",as:t},g),b&&e.default.createElement(P.IconButton,{ref:u,onClick:E,label:f,icon:e.default.createElement(R.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

@@ -1,7 +1,7 @@
 import e, { useState as L, useRef as p, useEffect as w } from "react";
 import r from "prop-types";
 import x from "styled-components";
-import D from "@strapi/icons/Search";
+import { Search as D } from "@strapi/icons";
 import { Flex as I } from "../../Flex/Flex.js";
 import { Typography as K } from "../../Typography/Typography.js";
 import { IconButton as P } from "../../IconButton/IconButton.js";

package/dist/v2/SubNav/SubNavLink.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),b=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons/Dot"),n=require("../../Box/Box.cjs"),c=require("../../Typography/Typography.cjs"),i=require("../../Flex/Flex.cjs"),B=require("../../BaseLink/BaseLink.cjs"),r=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=r(m),o=r(b),s=r(h),$=r(x),v=s.default(n.Box)`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react"),b=require("prop-types"),h=require("styled-components"),x=require("@strapi/icons"),a=require("../../Box/Box.cjs"),c=require("../../Typography/Typography.cjs"),i=require("../../Flex/Flex.cjs"),B=require("../../BaseLink/BaseLink.cjs"),n=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},t=n(m),o=n(b),s=n(h),$=s.default(a.Box)`
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -25,15 +25,15 @@
   &:focus-visible {
     outline-offset: -2px;
   }
-`,u=s.default($.default)`
+`,u=s.default(x.Dot)`
   width: ${12/16}rem;
   height: ${4/16}rem;
   * {
     fill: ${({theme:e,$active:l})=>l?e.colors.primary600:e.colors.neutral600};
   }
-`,L=s.default.div`
+`,v=s.default.div`
   svg {
     height: ${12/16}rem;
     width: ${12/16}rem;
   }
-`,a=t.default.forwardRef(({children:e,icon:l,withBullet:d,as:p,isSubSectionChild:f,...y},g)=>t.default.createElement(v,{as:p,icon:l,background:"neutral100",paddingLeft:f?9:7,paddingBottom:2,paddingTop:2,ref:g,...y},t.default.createElement(i.Flex,null,l?t.default.createElement(L,null,l):t.default.createElement(u,null),t.default.createElement(n.Box,{paddingLeft:2},t.default.createElement(c.Typography,{as:"span"},e))),d&&t.default.createElement(n.Box,{as:i.Flex,paddingRight:4},t.default.createElement(u,{$active:!0}))));a.displayName="SubNavLink";a.defaultProps={as:B.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};a.propTypes={as:o.default.elementType,children:o.default.node.isRequired,icon:o.default.element,isSubSectionChild:o.default.bool,withBullet:o.default.bool};exports.SubNavLink=a;
+`,r=t.default.forwardRef(({children:e,icon:l,withBullet:d,as:p,isSubSectionChild:f,...y},g)=>t.default.createElement($,{as:p,icon:l,background:"neutral100",paddingLeft:f?9:7,paddingBottom:2,paddingTop:2,ref:g,...y},t.default.createElement(i.Flex,null,l?t.default.createElement(v,null,l):t.default.createElement(u,null),t.default.createElement(a.Box,{paddingLeft:2},t.default.createElement(c.Typography,{as:"span"},e))),d&&t.default.createElement(a.Box,{as:i.Flex,paddingRight:4},t.default.createElement(u,{$active:!0}))));r.displayName="SubNavLink";r.defaultProps={as:B.BaseLink,icon:null,isSubSectionChild:!1,withBullet:!1};r.propTypes={as:o.default.elementType,children:o.default.node.isRequired,icon:o.default.element,isSubSectionChild:o.default.bool,withBullet:o.default.bool};exports.SubNavLink=r;

package/dist/v2/SubNav/SubNavLink.js

@@ -1,7 +1,7 @@
 import r from "react";
 import t from "prop-types";
 import i from "styled-components";
-import g from "@strapi/icons/Dot";
+import { Dot as g } from "@strapi/icons";
 import { Box as l } from "../../Box/Box.js";
 import { Typography as p } from "../../Typography/Typography.js";
 import { Flex as a } from "../../Flex/Flex.js";