@strapi/design-system 1.8.0 → 1.8.1

package/dist/MainNav/NavSection.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),o=require("react"),x=require("prop-types"),g=require("./MainNavContext.cjs"),h=require("../Divider/Divider.cjs"),i=require("../Flex/Flex.cjs"),l=require("../Box/Box.cjs"),m=require("../VisuallyHidden/VisuallyHidden.cjs"),j=require("../Typography/Typography.cjs"),q=n=>n&&n.__esModule?n:{default:n},u=q(x),p=({label:n,children:d,spacing:a=2,horizontal:r=!1,...c})=>g.useMainNav()?e.jsxs(i.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsxs(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",hasRadius:!0,as:"span",children:[e.jsx(h.Divider,{}),e.jsx(m.VisuallyHidden,{children:e.jsx("span",{children:n})})]}),e.jsx(i.Flex,{as:"ul",gap:a,direction:r?"row":"column",alignItems:r?"center":"stretch",...c,children:o.Children.map(d,(t,s)=>e.jsx("li",{children:t},s))})]}):e.jsxs(i.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsx(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",paddingRight:3,paddingLeft:3,hasRadius:!0,as:"span",children:e.jsx(j.Typography,{variant:"sigma",textColor:"neutral600",children:n})}),e.jsx(i.Flex,{as:"ul",gap:a,direction:r?"row":"column",alignItems:r?"center":"stretch",...c,children:o.Children.map(d,(t,s)=>e.jsx("li",{children:t},s))})]});p.propTypes={children:u.default.node.isRequired,label:u.default.string.isRequired};exports.NavSection=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),u=require("react"),x=require("./MainNavContext.cjs"),g=require("../Divider/Divider.cjs"),r=require("../Flex/Flex.cjs"),l=require("../Box/Box.cjs"),p=require("../VisuallyHidden/VisuallyHidden.cjs"),h=require("../Typography/Typography.cjs"),m=n=>n&&n.__esModule?n:{default:n},o=m(u),j=({label:n,children:a,spacing:d=2,horizontal:t=!1,...c})=>x.useMainNav()?e.jsxs(r.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsxs(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",hasRadius:!0,as:"span",children:[e.jsx(g.Divider,{}),e.jsx(p.VisuallyHidden,{children:e.jsx("span",{children:n})})]}),e.jsx(r.Flex,{as:"ul",gap:d,direction:t?"row":"column",alignItems:t?"center":"stretch",...c,children:o.default.Children.map(a,(i,s)=>e.jsx("li",{children:i},s))})]}):e.jsxs(r.Flex,{direction:"column",alignItems:"stretch",gap:2,children:[e.jsx(l.Box,{paddingTop:1,paddingBottom:1,background:"neutral0",paddingRight:3,paddingLeft:3,hasRadius:!0,as:"span",children:e.jsx(h.Typography,{variant:"sigma",textColor:"neutral600",children:n})}),e.jsx(r.Flex,{as:"ul",gap:d,direction:t?"row":"column",alignItems:t?"center":"stretch",...c,children:o.default.Children.map(a,(i,s)=>e.jsx("li",{children:i},s))})]});exports.NavSection=j;

package/dist/MainNav/NavSection.js

@@ -1,46 +1,12 @@
 import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { Children as m } from "react";
-import p from "prop-types";
-import { useMainNav as u } from "./MainNavContext.js";
-import { Divider as g } from "../Divider/Divider.js";
-import { Flex as i } from "../Flex/Flex.js";
-import { Box as l } from "../Box/Box.js";
-import { VisuallyHidden as h } from "../VisuallyHidden/VisuallyHidden.js";
-import { Typography as f } from "../Typography/Typography.js";
-const x = ({ label: o, children: a, spacing: s = 2, horizontal: e = !1, ...c }) => u() ? /* @__PURE__ */ d(i, { direction: "column", alignItems: "stretch", gap: 2, children: [
-  /* @__PURE__ */ d(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span", children: [
-    /* @__PURE__ */ r(g, {}),
-    /* @__PURE__ */ r(h, { children: /* @__PURE__ */ r("span", { children: o }) })
-  ] }),
-  /* @__PURE__ */ r(
-    i,
-    {
-      as: "ul",
-      gap: s,
-      direction: e ? "row" : "column",
-      alignItems: e ? "center" : "stretch",
-      ...c,
-      children: m.map(a, (n, t) => /* @__PURE__ */ r("li", { children: n }, t))
-    }
-  )
-] }) : /* @__PURE__ */ d(i, { direction: "column", alignItems: "stretch", gap: 2, children: [
-  /* @__PURE__ */ r(l, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span", children: /* @__PURE__ */ r(f, { variant: "sigma", textColor: "neutral600", children: o }) }),
-  /* @__PURE__ */ r(
-    i,
-    {
-      as: "ul",
-      gap: s,
-      direction: e ? "row" : "column",
-      alignItems: e ? "center" : "stretch",
-      ...c,
-      children: m.map(a, (n, t) => /* @__PURE__ */ r("li", { children: n }, t))
-    }
-  )
-] });
-x.propTypes = {
-  children: p.node.isRequired,
-  label: p.string.isRequired
-};
+import l from "react";
+import { useMainNav as p } from "./MainNavContext.js";
+import { Divider as u } from "../Divider/Divider.js";
+import { Flex as n } from "../Flex/Flex.js";
+import { Box as s } from "../Box/Box.js";
+import { VisuallyHidden as g } from "../VisuallyHidden/VisuallyHidden.js";
+import { Typography as h } from "../Typography/Typography.js";
+const j = ({ label: a, children: o, spacing: c = 2, horizontal: e = !1, ...m }) => p() ? d(n, { direction: "column", alignItems: "stretch", gap: 2, children: [d(s, { paddingTop: 1, paddingBottom: 1, background: "neutral0", hasRadius: !0, as: "span", children: [r(u, {}), r(g, { children: r("span", { children: a }) })] }), r(n, { as: "ul", gap: c, direction: e ? "row" : "column", alignItems: e ? "center" : "stretch", ...m, children: l.Children.map(o, (i, t) => r("li", { children: i }, t)) })] }) : d(n, { direction: "column", alignItems: "stretch", gap: 2, children: [r(s, { paddingTop: 1, paddingBottom: 1, background: "neutral0", paddingRight: 3, paddingLeft: 3, hasRadius: !0, as: "span", children: r(h, { variant: "sigma", textColor: "neutral600", children: a }) }), r(n, { as: "ul", gap: c, direction: e ? "row" : "column", alignItems: e ? "center" : "stretch", ...m, children: l.Children.map(o, (i, t) => r("li", { children: i }, t)) })] });
 export {
-  x as NavSection
+  j as NavSection
 };

package/dist/MainNav/NavSections.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),u=require("prop-types"),a=require("styled-components"),p=require("../Box/Box.cjs"),f=require("../Flex/Flex.cjs"),o=e=>e&&e.__esModule?e:{default:e},g=o(u),x=o(a),y=x.default(p.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),c=require("react"),d=require("styled-components"),a=require("../Box/Box.cjs"),u=require("../Flex/Flex.cjs"),n=e=>e&&e.__esModule?e:{default:e},f=n(c),g=n(d),x=g.default(a.Box)`
   flex-grow: 1;
   overflow-y: auto;
-`,n=({children:e,spacing:s=4,horizontal:r=!1,...i})=>t.jsx(y,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8,children:t.jsx(f.Flex,{as:"ul",gap:s,direction:r?"row":"column",alignItems:r?"center":"stretch",...i,children:c.Children.map(e,(d,l)=>t.jsx("li",{children:d},l))})});n.propTypes={children:g.default.node.isRequired};exports.NavSections=n;
+`,p=({children:e,spacing:r=4,horizontal:o=!1,...s})=>t.jsx(x,{paddingLeft:3,paddingRight:2,paddingTop:3,paddingBottom:8,children:t.jsx(u.Flex,{as:"ul",gap:r,direction:o?"row":"column",alignItems:o?"center":"stretch",...s,children:f.default.Children.map(e,(i,l)=>t.jsx("li",{children:i},l))})});exports.NavSections=p;

package/dist/MainNav/NavSections.js

@@ -1,26 +1,12 @@
-import { jsx as r } from "react/jsx-runtime";
-import { Children as d } from "react";
-import m from "prop-types";
+import { jsx as o } from "react/jsx-runtime";
+import m from "react";
 import l from "styled-components";
-import { Box as s } from "../Box/Box.js";
-import { Flex as c } from "../Flex/Flex.js";
-const a = l(s)`
+import { Box as p } from "../Box/Box.js";
+import { Flex as a } from "../Flex/Flex.js";
+const c = l(p)`
   flex-grow: 1;
   overflow-y: auto;
-`, f = ({ children: e, spacing: i = 4, horizontal: o = !1, ...t }) => /* @__PURE__ */ r(a, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: /* @__PURE__ */ r(
-  c,
-  {
-    as: "ul",
-    gap: i,
-    direction: o ? "row" : "column",
-    alignItems: o ? "center" : "stretch",
-    ...t,
-    children: d.map(e, (p, n) => /* @__PURE__ */ r("li", { children: p }, n))
-  }
-) });
-f.propTypes = {
-  children: m.node.isRequired
-};
+`, h = ({ children: t, spacing: e = 4, horizontal: r = !1, ...i }) => o(c, { paddingLeft: 3, paddingRight: 2, paddingTop: 3, paddingBottom: 8, children: o(a, { as: "ul", gap: e, direction: r ? "row" : "column", alignItems: r ? "center" : "stretch", ...i, children: m.Children.map(t, (n, d) => o("li", { children: n }, d)) }) });
 export {
-  f as NavSections
+  h as NavSections
 };

package/dist/MainNav/NavUser.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),p=require("react"),x=require("prop-types"),f=require("styled-components"),y=require("./MainNavContext.cjs"),a=require("../Avatar/Avatar.cjs"),d=require("../Box/Box.cjs"),v=require("../Flex/Flex.cjs"),g=require("../VisuallyHidden/VisuallyHidden.cjs"),j=require("../Typography/Typography.cjs"),i=e=>e&&e.__esModule?e:{default:e},q=i(p),s=i(x),h=i(f),_=h.default(d.Box)`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("react"),c=require("styled-components"),x=require("./MainNavContext.cjs"),s=require("../Avatar/Avatar.cjs"),i=require("../Box/Box.cjs"),p=require("../Flex/Flex.cjs"),f=require("../VisuallyHidden/VisuallyHidden.cjs"),h=require("../Typography/Typography.cjs"),o=e=>e&&e.__esModule?e:{default:e},j=o(u),y=o(c),g=y.default(i.Box)`
   border-top: 1px solid ${({theme:e})=>e.colors.neutral150};
-`,r=q.default.forwardRef(({src:e,children:n,initials:l,...u},c)=>{const o=y.useMainNav();return t.jsx(_,{paddingTop:3,paddingBottom:3,paddingLeft:5,paddingRight:5,...u,children:t.jsxs(v.Flex,{as:"button",justifyContent:o?"center":void 0,ref:c,children:[e?t.jsx(a.Avatar,{src:e,alt:"","aria-hidden":!0}):t.jsx(a.Initials,{children:l}),o?t.jsx(g.VisuallyHidden,{children:t.jsx("span",{children:n})}):t.jsx(d.Box,{width:`${130/16}rem`,paddingLeft:2,as:"span",children:t.jsx(j.Typography,{ellipsis:!0,textColor:"neutral600",children:n})})]})})});r.displayName="NavUser";r.defaultProps={src:void 0,initials:void 0};r.propTypes={children:s.default.node.isRequired,initials:s.default.node,src:s.default.string};exports.NavUser=r;
+`,q=j.default.forwardRef(({src:e,children:r,initials:a,...d},l)=>{const n=x.useMainNav();return t.jsx(g,{paddingTop:3,paddingBottom:3,paddingLeft:5,paddingRight:5,...d,children:t.jsxs(p.Flex,{as:"button",justifyContent:n?"center":void 0,ref:l,children:[e?t.jsx(s.Avatar,{src:e,alt:"","aria-hidden":!0}):t.jsx(s.Initials,{children:a}),n?t.jsx(f.VisuallyHidden,{children:t.jsx("span",{children:r})}):t.jsx(i.Box,{width:`${130/16}rem`,paddingLeft:2,as:"span",children:t.jsx(h.Typography,{ellipsis:!0,textColor:"neutral600",children:r})})]})})});exports.NavUser=q;

package/dist/MainNav/NavUser.js

@@ -1,32 +1,18 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import m from "react";
-import i from "prop-types";
-import f from "styled-components";
-import { useMainNav as c } from "./MainNavContext.js";
-import { Avatar as u, Initials as h } from "../Avatar/Avatar.js";
-import { Box as n } from "../Box/Box.js";
-import { Flex as g } from "../Flex/Flex.js";
-import { VisuallyHidden as v } from "../VisuallyHidden/VisuallyHidden.js";
+import { jsx as r, jsxs as p } from "react/jsx-runtime";
+import s from "react";
+import l from "styled-components";
+import { useMainNav as m } from "./MainNavContext.js";
+import { Avatar as f, Initials as c } from "../Avatar/Avatar.js";
+import { Box as i } from "../Box/Box.js";
+import { Flex as u } from "../Flex/Flex.js";
+import { VisuallyHidden as h } from "../VisuallyHidden/VisuallyHidden.js";
 import { Typography as x } from "../Typography/Typography.js";
-const y = f(n)`
+const g = l(i)`
   border-top: 1px solid ${({ theme: o }) => o.colors.neutral150};
-`, t = m.forwardRef(({ src: o, children: e, initials: a, ...s }, p) => {
-  const d = c();
-  return /* @__PURE__ */ r(y, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...s, children: /* @__PURE__ */ l(g, { as: "button", justifyContent: d ? "center" : void 0, ref: p, children: [
-    o ? /* @__PURE__ */ r(u, { src: o, alt: "", "aria-hidden": !0 }) : /* @__PURE__ */ r(h, { children: a }),
-    d ? /* @__PURE__ */ r(v, { children: /* @__PURE__ */ r("span", { children: e }) }) : /* @__PURE__ */ r(n, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: /* @__PURE__ */ r(x, { ellipsis: !0, textColor: "neutral600", children: e }) })
-  ] }) });
+`, L = s.forwardRef(({ src: o, children: t, initials: n, ...d }, a) => {
+  const e = m();
+  return r(g, { paddingTop: 3, paddingBottom: 3, paddingLeft: 5, paddingRight: 5, ...d, children: p(u, { as: "button", justifyContent: e ? "center" : void 0, ref: a, children: [o ? r(f, { src: o, alt: "", "aria-hidden": !0 }) : r(c, { children: n }), e ? r(h, { children: r("span", { children: t }) }) : r(i, { width: `${130 / 16}rem`, paddingLeft: 2, as: "span", children: r(x, { ellipsis: !0, textColor: "neutral600", children: t }) })] }) });
 });
-t.displayName = "NavUser";
-t.defaultProps = {
-  src: void 0,
-  initials: void 0
-};
-t.propTypes = {
-  children: i.node.isRequired,
-  initials: i.node,
-  src: i.string
-};
 export {
-  t as NavUser
+  L as NavUser
 };

package/dist/SimpleMenu/SimpleMenu.cjs

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

package/dist/SimpleMenu/SimpleMenu.js

@@ -1,29 +1,28 @@
-import { jsx as t, jsxs as z } from "react/jsx-runtime";
-import B, { useRef as T, useEffect as E, useState as K, Children as H, cloneElement as U } from "react";
-import { CarretDown as G } from "@strapi/icons";
-import { useCallbackRef as $ } from "@strapi/ui-primitives";
-import e from "prop-types";
-import { NavLink as J } from "react-router-dom";
-import y from "styled-components";
+import { jsx as t, jsxs as F } from "react/jsx-runtime";
+import x, { useRef as S, useEffect as E, useState as $, Children as _, cloneElement as H } from "react";
+import { CarretDown as U } from "@strapi/icons";
+import { useCallbackRef as P } from "@strapi/ui-primitives";
+import { NavLink as q } from "react-router-dom";
+import m from "styled-components";
 import { getOptionStyle as b } from "./utils.js";
-import { KeyboardKeys as i } from "../helpers/keyboardKeys.js";
-import { useId as Q } from "../hooks/useId.js";
-import { Link as X } from "../Link/Link.js";
+import { KeyboardKeys as r } from "../helpers/keyboardKeys.js";
+import { useId as z } from "../hooks/useId.js";
+import { Link as G } from "../Link/Link.js";
 import { Button as L } from "../Button/Button.js";
-import { POPOVER_PLACEMENTS as Y, Popover as Z } from "../Popover/Popover.js";
-import { Box as C } from "../Box/Box.js";
-import { Typography as O } from "../Typography/Typography.js";
-import { Flex as ee } from "../Flex/Flex.js";
-const ne = y.button`
+import { Popover as J } from "../Popover/Popover.js";
+import { Box as k } from "../Box/Box.js";
+import { Typography as R } from "../Typography/Typography.js";
+import { Flex as Q } from "../Flex/Flex.js";
+const X = m.button`
   border: none;
   padding: 0;
   background: transparent;
   cursor: pointer;
   ${b}
-`, oe = y(J)`
+`, Y = m(q)`
   text-decoration: none;
   ${b}
-`, te = y(X)`
+`, Z = m(G)`
   /* Removing Link hover effect */
   &:hover {
     color: currentColor;
@@ -31,7 +30,7 @@ const ne = y.button`
 
   &:focus-visible {
     /* Removing Link focus-visible after properties and reset to global outline */
-    outline: 2px solid ${({ theme: o }) => o.colors.primary600};
+    outline: 2px solid ${({ theme: n }) => n.colors.primary600};
     outline-offset: 2px;
     &:after {
       content: none;
@@ -39,160 +38,72 @@ const ne = y.button`
   }
 
   ${b}
-`, re = y.span`
+`, ee = m.span`
   display: flex;
   align-items: center;
   svg {
     height: 4px;
     width: 6px;
   }
-`, ie = y(L)`
-  padding: ${({ theme: o }) => `${o.spaces[1]} ${o.spaces[3]}`};
-`, A = ({ children: o, onClick: h, to: s, isFocused: c, href: a, ...x }) => {
-  const d = T();
+`, ne = m(L)`
+  padding: ${({ theme: n }) => `${n.spaces[1]} ${n.spaces[3]}`};
+`, xe = ({ children: n, onClick: h = () => {
+}, to: i, isFocused: s = !1, href: c, ...D }) => {
+  const a = S();
   E(() => {
-    c && d.current && d.current.focus();
-  }, [c]);
+    s && a.current && a.current.focus();
+  }, [s]);
   const l = {
-    tabIndex: c ? 0 : -1,
-    ref: d,
+    tabIndex: s ? 0 : -1,
+    ref: a,
     role: "menuitem",
-    ...x
-  }, p = (g) => {
-    (g.key === i.SPACE || g.key === i.ENTER) && h();
+    ...D
+  }, u = (y) => {
+    (y.key === r.SPACE || y.key === r.ENTER) && h();
   };
-  return s && !a ? /* @__PURE__ */ t(oe, { to: s, ...l, children: /* @__PURE__ */ t(C, { padding: 2, children: /* @__PURE__ */ t(O, { children: o }) }) }) : a && !s ? /* @__PURE__ */ t(te, { isExternal: !0, href: a, ...l, children: /* @__PURE__ */ t(C, { padding: 2, children: /* @__PURE__ */ t(O, { children: o }) }) }) : /* @__PURE__ */ t(ne, { onKeyDown: p, onMouseDown: h, type: "button", ...l, children: /* @__PURE__ */ t(C, { padding: 2, children: /* @__PURE__ */ t(O, { children: o }) }) });
-};
-A.defaultProps = {
-  as: void 0,
-  href: void 0,
-  isFocused: !1,
-  onClick() {
-  },
-  to: void 0
-};
-A.propTypes = {
-  as: e.elementType,
-  children: e.node.isRequired,
-  href: e.string,
-  isFocused: e.bool,
-  onClick: e.func,
-  to: e.string
-};
-const k = ({
-  label: o,
-  children: h,
-  id: s,
-  as: c,
-  onOpen: a = () => {
-  },
-  onClose: x = () => {
-  },
-  size: d,
-  popoverPlacement: l,
-  onReachEnd: p,
-  ...g
-}) => {
-  const u = T(), P = Q(s), R = T(!1), [f, m] = K(!1), [D, I] = K(0), v = H.toArray(h), N = c || (d === "S" ? ie : L), S = !!p && typeof p == "function";
+  return i && !c ? t(Y, { to: i, ...l, children: t(k, { padding: 2, children: t(R, { children: n }) }) }) : c && !i ? t(Z, { isExternal: !0, href: c, ...l, children: t(k, { padding: 2, children: t(R, { children: n }) }) }) : t(X, { onKeyDown: u, onMouseDown: h, type: "button", ...l, children: t(k, { padding: 2, children: t(R, { children: n }) }) });
+}, Ee = ({ label: n, children: h, id: i, as: s, onOpen: c = () => {
+}, onClose: D = () => {
+}, size: a = "M", popoverPlacement: l = "bottom-start", onReachEnd: u, ...y }) => {
+  const d = S(void 0), I = z(i), C = S(!1), [f, p] = $(!1), [v, w] = $(0), g = _.toArray(h), O = s || (a === "S" ? ne : L), B = !!u && typeof u == "function";
   E(() => {
-    if (["string", "number"].includes(typeof o)) {
-      const n = v.findIndex((r) => r.props.children === o);
-      n !== -1 && I(n);
+    if (["string", "number"].includes(typeof n)) {
+      const e = g.findIndex((o) => x.isValidElement(o) && o.props.children === n || o === n);
+      e !== -1 && w(e);
     }
-  }, [o]);
-  const w = $(a), M = $(x);
+  }, [n]);
+  const K = P(c), M = P(D);
   E(() => {
-    R?.current ? f ? w() : M() : R.current = !0;
-  }, [R, M, w, f]), E(() => {
-    B.isValidElement(o) && D === -1 && u.current.focus();
-  }, [o, D]);
-  const F = (n) => {
-    f && (n.key === i.ESCAPE && (n.stopPropagation(), m(!1), u.current.focus()), n.key === i.DOWN && I((r) => r === v.length - 1 ? 0 : r + 1), n.key === i.UP && I((r) => r === 0 ? v.length - 1 : r - 1));
-  }, V = (n) => {
-    (n.key === i.ENTER || n.key === i.SPACE) && m((r) => !r);
-  }, j = (n) => {
-    n.preventDefault(), n.currentTarget.contains(n.relatedTarget) || m(!1);
-  }, q = (n) => {
-    n.preventDefault(), m((r) => !r);
-  }, W = () => {
-    S && p();
-  }, _ = v.map((n, r) => (
+    C?.current ? f ? K() : M() : C.current = !0;
+  }, [C, M, K, f]), E(() => {
+    x.isValidElement(n) && v === -1 && d.current.focus();
+  }, [n, v]);
+  const T = (e) => {
+    f && (e.key === r.ESCAPE && (e.stopPropagation(), p(!1), d.current.focus()), e.key === r.DOWN && w((o) => o === g.length - 1 ? 0 : o + 1), e.key === r.UP && w((o) => o === 0 ? g.length - 1 : o - 1));
+  }, A = (e) => {
+    (e.key === r.ENTER || e.key === r.SPACE) && p((o) => !o);
+  }, V = (e) => {
+    e.preventDefault(), e.currentTarget.contains(e.relatedTarget) || p(!1);
+  }, N = (e) => {
+    e.preventDefault(), p((o) => !o);
+  }, j = () => {
+    B && u();
+  }, W = g.map((e, o) => (
     // eslint-disable-next-line react/no-array-index-key
-    /* @__PURE__ */ t(ee, { as: "li", justifyContent: "center", role: "menuitem", children: U(n, {
+    t(Q, { as: "li", justifyContent: "center", role: "menuitem", children: x.isValidElement(e) ? H(e, {
       onClick() {
-        n.props.onClick(), m(!1), u.current.focus();
+        e.props.onClick(), p(!1), d.current.focus();
       },
-      isFocused: D === r
-    }) }, r)
+      isFocused: v === o
+    }) : e }, o)
   ));
   return (
     // TODO: review why we need to eslint it and how to solve this issue.
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    /* @__PURE__ */ z("div", { onKeyDown: F, children: [
-      /* @__PURE__ */ t(
-        N,
-        {
-          label: B.isValidElement(o) ? null : o,
-          "aria-haspopup": !0,
-          "aria-expanded": f,
-          "aria-controls": P,
-          onKeyDown: V,
-          onMouseDown: q,
-          ref: u,
-          type: "button",
-          variant: "ghost",
-          endIcon: /* @__PURE__ */ t(re, { children: /* @__PURE__ */ t(G, { "aria-hidden": !0 }) }),
-          ...g,
-          children: o
-        }
-      ),
-      f && /* @__PURE__ */ t(
-        Z,
-        {
-          onBlur: j,
-          placement: l,
-          source: u,
-          onReachEnd: W,
-          intersectionId: S ? `popover-${P}` : void 0,
-          spacing: 4,
-          children: /* @__PURE__ */ t(C, { role: "menu", as: "ul", padding: 1, id: P, children: _ })
-        }
-      )
-    ] })
+    F("div", { onKeyDown: T, children: [t(O, { label: x.isValidElement(n) ? null : n, "aria-haspopup": !0, "aria-expanded": f, "aria-controls": I, onKeyDown: A, onMouseDown: N, ref: d, type: "button", variant: "ghost", endIcon: t(ee, { children: t(U, { "aria-hidden": !0 }) }), ...y, children: n }), f && t(J, { onBlur: V, placement: l, source: d, onReachEnd: j, intersectionId: B ? `popover-${I}` : void 0, spacing: 4, children: t(k, { role: "menu", as: "ul", padding: 1, id: I, children: W }) })] })
   );
 };
-k.defaultProps = {
-  as: void 0
-};
-k.displayName = "SimpleMenu";
-k.defaultProps = {
-  id: void 0,
-  onOpen: void 0,
-  onClose: void 0,
-  onReachEnd: void 0,
-  popoverPlacement: "bottom-start",
-  size: "M"
-};
-k.propTypes = {
-  as: e.any,
-  children: e.oneOfType([e.arrayOf(e.node), e.node]).isRequired,
-  id: e.string,
-  label: e.oneOfType([e.string, e.number, e.element]).isRequired,
-  onClose: e.func,
-  onOpen: e.func,
-  /**
-   * Callback function to be called when the popover reaches the end of the scrollable content
-   */
-  onReachEnd: e.func,
-  popoverPlacement: e.oneOf(Y),
-  /**
-   * Size of the trigger button.
-   * Note: in case a custom component is passed through the "as"
-   * prop, the size prop is passed along too, but needs to be handled there
-   */
-  size: e.oneOf(["S", "M"])
-};
 export {
-  A as MenuItem,
-  k as SimpleMenu
+  xe as MenuItem,
+  Ee as SimpleMenu
 };

package/dist/SubNav/SubNav.cjs

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime");require("react");const u=require("prop-types"),a=require("styled-components"),n=require("../Grid/Grid.cjs"),t=e=>e&&e.__esModule?e:{default:e},l=t(u),d=t(a),r=`${232/16}rem`,c=d.default(n.Grid)`
-  width: ${r};
-  background: ${({theme:e})=>e.colors.neutral100};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("styled-components"),u=require("../Grid/Grid.cjs"),a=t=>t&&t.__esModule?t:{default:t},i=a(s),e=`${232/16}rem`,n=i.default(u.Grid)`
+  width: ${e};
+  background: ${({theme:t})=>t.colors.neutral100};
   position: sticky;
   top: 0;
   height: 100vh;
   overflow-y: auto;
-  border-right: 1px solid ${({theme:e})=>e.colors.neutral200};
+  border-right: 1px solid ${({theme:t})=>t.colors.neutral200};
   z-index: 1;
-`,o=({ariaLabel:e,...s})=>i.jsx(c,{"aria-label":e,as:"nav",...s});o.propTypes={ariaLabel:l.default.string.isRequired};exports.SubNav=o;exports.subNavWidth=r;
+`,l=({ariaLabel:t,...r})=>o.jsx(n,{"aria-label":t,as:"nav",...r});exports.SubNav=l;exports.subNavWidth=e;

package/dist/SubNav/SubNav.js

@@ -1,22 +1,17 @@
 import { jsx as t } from "react/jsx-runtime";
-import "react";
-import i from "prop-types";
-import e from "styled-components";
+import i from "styled-components";
 import { Grid as a } from "../Grid/Grid.js";
-const p = `${232 / 16}rem`, s = e(a)`
-  width: ${p};
-  background: ${({ theme: r }) => r.colors.neutral100};
+const e = `${232 / 16}rem`, s = i(a)`
+  width: ${e};
+  background: ${({ theme: o }) => o.colors.neutral100};
   position: sticky;
   top: 0;
   height: 100vh;
   overflow-y: auto;
-  border-right: 1px solid ${({ theme: r }) => r.colors.neutral200};
+  border-right: 1px solid ${({ theme: o }) => o.colors.neutral200};
   z-index: 1;
-`, n = ({ ariaLabel: r, ...o }) => /* @__PURE__ */ t(s, { "aria-label": r, as: "nav", ...o });
-n.propTypes = {
-  ariaLabel: i.string.isRequired
-};
+`, d = ({ ariaLabel: o, ...r }) => t(s, { "aria-label": o, as: "nav", ...r });
 export {
-  n as SubNav,
-  p as subNavWidth
+  d as SubNav,
+  e as subNavWidth
 };

package/dist/SubNav/SubNavHeader.cjs

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