@strapi/design-system 1.8.0 → 1.8.2

package/dist/Select/SingleSelect.js

@@ -1,44 +1,44 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
 import * as u from "react";
-import { Item as j, ItemText as q, Root as W, Trigger as _, Value as H, Portal as M, Content as P, Viewport as z } from "./SelectParts.js";
-import { stripReactIdOfColon as A } from "../helpers/strings.js";
+import { Item as q, ItemText as W, Root as _, Trigger as H, Value as M, Portal as P, Content as z, Viewport as A } from "./SelectParts.js";
+import { stripReactIdOfColon as D } from "../helpers/strings.js";
 import { useId as R } from "../hooks/useId.js";
-import { useIntersection as D } from "../hooks/useIntersection.js";
+import { useIntersection as G } from "../hooks/useIntersection.js";
 import { Box as x } from "../Box/Box.js";
-import { Typography as G } from "../Typography/Typography.js";
-import { Field as J } from "../Field/Field.js";
-import { Flex as K } from "../Flex/Flex.js";
-import { FieldLabel as Q } from "../Field/FieldLabel.js";
-import { FieldHint as U } from "../Field/FieldHint.js";
-import { FieldError as X } from "../Field/FieldError.js";
-const pe = ({ error: r, hint: i, id: c, label: n, labelAction: o, required: f, selectButtonTitle: m, ...d }) => {
-  const l = R(c), a = u.useRef(null);
-  return e(J, { hint: i, error: r, id: l, required: f, children: p(K, { direction: "column", alignItems: "stretch", gap: 1, children: [e(Q, { onClick: () => {
-    a.current.focus();
-  }, action: o, children: n }), e(Y, { label: n, id: l, triggerRef: a, required: f, ...d }), e(U, {}), e(X, {})] }) });
-}, Y = ({ id: r, children: i, clearLabel: c = "Clear", customizeContent: n, disabled: o, error: f, label: m, onChange: d, onClear: l, onReachEnd: a, placeholder: g, required: C, selectButtonTitle: Z, startIcon: B, size: O = "M", value: h, triggerRef: T, ...F }) => {
-  const [$, I] = u.useState(), [y, k] = u.useState(!1), w = (t) => {
-    k(t);
-  }, L = (t) => {
-    l && l(t), d || I("");
-  }, v = `${r}-hint`, E = `${r}-error`, N = (t) => {
-    d ? d(typeof h == "number" ? Number(t) : t) : I(t);
-  }, b = u.useRef(null), V = R(), S = `intersection-${A(V)}`;
-  D(b, (t) => {
-    a && a(t);
+import { Typography as J } from "../Typography/Typography.js";
+import { Field as K } from "../Field/Field.js";
+import { Flex as Q } from "../Flex/Flex.js";
+import { FieldLabel as U } from "../Field/FieldLabel.js";
+import { FieldHint as X } from "../Field/FieldHint.js";
+import { FieldError as Y } from "../Field/FieldError.js";
+const me = ({ error: c, hint: t, id: d, label: n, labelAction: i, required: a, selectButtonTitle: g, ...p }) => {
+  const o = R(d), l = u.useRef(null);
+  return e(K, { hint: t, error: c, id: o, required: a, children: h(Q, { direction: "column", alignItems: "stretch", gap: 1, children: [n ? e(U, { onClick: () => {
+    l.current.focus();
+  }, action: i, children: n }) : null, e(Z, { label: n, id: o, triggerRef: l, required: a, ...p }), e(X, {}), e(Y, {})] }) });
+}, Z = ({ "aria-label": c, id: t, children: d, clearLabel: n = "Clear", customizeContent: i, disabled: a, error: g, label: p, onChange: o, onClear: l, onReachEnd: m, placeholder: C, required: B, selectButtonTitle: ee, startIcon: O, size: T = "M", value: f, triggerRef: F, ...$ }) => {
+  const [y, I] = u.useState(), [k, w] = u.useState(!1), L = (r) => {
+    w(r);
+  }, v = (r) => {
+    l && l(r), o || I("");
+  }, E = `${t}-hint`, N = `${t}-error`, V = (r) => {
+    o ? o(typeof f == "number" ? Number(r) : r) : I(r);
+  }, b = u.useRef(null), j = R(), S = `intersection-${D(j)}`;
+  G(b, (r) => {
+    m && m(r);
   }, {
     selectorToWatch: `#${S}`,
     /**
      * We need to know when the select is open because only then will viewportRef
      * not be null. Because it uses a portal that (sensibly) is not mounted 24/7.
      */
-    skipWhen: !y
+    skipWhen: !k
   });
-  const s = (typeof h < "u" && h !== null ? h.toString() : $) ?? "";
-  return p(W, { onOpenChange: w, disabled: o, required: C, onValueChange: N, value: s, ...F, children: [e(_, { ref: T, "aria-label": m, "aria-describedby": r ? `${v} ${E}` : void 0, id: r, startIcon: B, size: O, hasError: !!f, disabled: o, clearLabel: c, onClear: s && l ? L : void 0, children: e(H, { placeholder: g, textColor: s ? "neutral800" : "neutral600", children: s && n ? n(s) : void 0 }) }), e(M, { children: e(P, { position: "popper", sideOffset: 4, children: p(z, { ref: b, children: [i, e(x, { id: S, width: "100%", height: "1px" })] }) }) })] });
-}, me = u.forwardRef(({ value: r, startIcon: i, children: c, ...n }, o) => p(j, { ref: o, value: r.toString(), ...n, children: [i && e(x, { as: "span", "aria-hidden": !0, children: i }), e(G, { textColor: "neutral800", children: e(q, { children: c }) })] }));
+  const s = (typeof f < "u" && f !== null ? f.toString() : y) ?? "";
+  return h(_, { onOpenChange: L, disabled: a, required: B, onValueChange: V, value: s, ...$, children: [e(H, { ref: F, "aria-label": p ?? c, "aria-describedby": t ? `${E} ${N}` : void 0, id: t, startIcon: O, size: T, hasError: !!g, disabled: a, clearLabel: n, onClear: s && l ? v : void 0, children: e(M, { placeholder: C, textColor: s ? "neutral800" : "neutral600", children: s && i ? i(s) : void 0 }) }), e(P, { children: e(z, { position: "popper", sideOffset: 4, children: h(A, { ref: b, children: [d, e(x, { id: S, width: "100%", height: "1px" })] }) }) })] });
+}, ge = u.forwardRef(({ value: c, startIcon: t, children: d, ...n }, i) => h(q, { ref: i, value: c.toString(), ...n, children: [t && e(x, { as: "span", "aria-hidden": !0, children: t }), e(J, { textColor: "neutral800", children: e(W, { children: d }) })] }));
 export {
-  pe as SingleSelect,
-  Y as SingleSelectInput,
-  me as SingleSelectOption
+  me as SingleSelect,
+  Z as SingleSelectInput,
+  ge as SingleSelectOption
 };

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;

package/dist/SubNav/SubNavHeader.js

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