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

package/dist/Select/Select.js

@@ -1,74 +1,75 @@
-var ie = Object.defineProperty;
-var I = Object.getOwnPropertySymbols;
-var q = Object.prototype.hasOwnProperty, z = Object.prototype.propertyIsEnumerable;
-var P = (o, l, i) => l in o ? ie(o, l, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[l] = i, G = (o, l) => {
+var se = Object.defineProperty;
+var B = Object.getOwnPropertySymbols;
+var G = Object.prototype.hasOwnProperty, H = Object.prototype.propertyIsEnumerable;
+var z = (o, l, i) => l in o ? se(o, l, { enumerable: !0, configurable: !0, writable: !0, value: i }) : o[l] = i, W = (o, l) => {
   for (var i in l || (l = {}))
-    q.call(l, i) && P(o, i, l[i]);
-  if (I)
-    for (var i of I(l))
-      z.call(l, i) && P(o, i, l[i]);
+    G.call(l, i) && z(o, i, l[i]);
+  if (B)
+    for (var i of B(l))
+      H.call(l, i) && z(o, i, l[i]);
   return o;
 };
-var H = (o, l) => {
+var N = (o, l) => {
   var i = {};
-  for (var a in o)
-    q.call(o, a) && l.indexOf(a) < 0 && (i[a] = o[a]);
-  if (o != null && I)
-    for (var a of I(o))
-      l.indexOf(a) < 0 && z.call(o, a) && (i[a] = o[a]);
+  for (var s in o)
+    G.call(o, s) && l.indexOf(s) < 0 && (i[s] = o[s]);
+  if (o != null && B)
+    for (var s of B(o))
+      l.indexOf(s) < 0 && H.call(o, s) && (i[s] = o[s]);
   return i;
 };
-import r, { useState as le, useRef as ae, Children as W, cloneElement as _ } from "react";
+import r, { useState as ae, useRef as pe, Children as J, cloneElement as K } from "react";
 import e from "prop-types";
-import se from "@strapi/icons/CarretDown";
-import pe from "@strapi/icons/Cross";
-import { sizes as ce } from "../themes/sizes.js";
-import { SelectButton as me } from "./SelectButton.js";
-import { Field as de } from "../Field/Field.js";
-import { FieldLabel as fe } from "../Field/FieldLabel.js";
+import ce from "@strapi/icons/CarretDown";
+import me from "@strapi/icons/Cross";
+import de from "styled-components";
+import { sizes as fe } from "../themes/sizes.js";
+import { SelectButton as ue } from "./SelectButton.js";
+import { Field as he } from "../Field/Field.js";
+import { FieldLabel as Ee } from "../Field/FieldLabel.js";
 import "../Field/FieldInput.js";
-import { FieldHint as ue } from "../Field/FieldHint.js";
-import { FieldError as he } from "../Field/FieldError.js";
+import { FieldHint as be } from "../Field/FieldHint.js";
+import { FieldError as ye } from "../Field/FieldError.js";
 import "../Field/FieldContext.js";
 import "../Field/FieldAction.js";
-import { Popover as Ee } from "../Popover/Popover.js";
-import { Stack as be } from "../Stack/Stack.js";
-import { Typography as N } from "../Typography/Typography.js";
-import { Flex as $ } from "../Flex/Flex.js";
-import { Box as J } from "../Box/Box.js";
-import { useId as ye } from "../helpers/useId.js";
-import { SelectList as ge } from "./SelectList.js";
-import { SelectButtonWrapper as ve, IconBox as Ie, CaretBox as Oe } from "./components.js";
-import { useButtonRef as Ce } from "./hooks/useButtonRef.js";
-import { VisuallyHidden as K } from "../VisuallyHidden/VisuallyHidden.js";
-import { DownState as Se } from "./constants.js";
-import { escapeSelector as Q } from "../helpers/escapeSelector.js";
-import { SelectTags as xe } from "./SelectTags.js";
-import Be from "styled-components";
-const Te = Be($)`
+import { Popover as ge } from "../Popover/Popover.js";
+import { Stack as ve } from "../Stack/Stack.js";
+import { Typography as Q } from "../Typography/Typography.js";
+import { Flex as R } from "../Flex/Flex.js";
+import { Box as U } from "../Box/Box.js";
+import { useId as Be } from "../helpers/useId.js";
+import { SelectList as Oe } from "./SelectList.js";
+import { SelectButtonWrapper as Te, IconBox as Ce, CaretBox as Ie } from "./components.js";
+import { useButtonRef as Se } from "./hooks/useButtonRef.js";
+import { VisuallyHidden as X } from "../VisuallyHidden/VisuallyHidden.js";
+import { DownState as xe } from "./constants.js";
+import { escapeSelector as Y } from "../helpers/escapeSelector.js";
+import { SelectTags as $e } from "./SelectTags.js";
+const Re = de(R)`
   width: 100%;
-`, U = ($e) => {
-  var w = $e, {
+`, Z = (we) => {
+  var F = we, {
     label: o,
     labelAction: l,
     id: i,
-    children: a,
+    children: s,
     customizeContent: h,
     placeholder: O,
-    onChange: C,
+    onChange: T,
     value: n,
-    hint: S,
-    error: u,
+    hint: C,
+    error: E,
     disabled: m,
-    clearLabel: X,
-    onClear: R,
-    onReachEnd: Y,
+    clearLabel: w,
+    onClear: D,
+    onReachEnd: V,
     multi: p,
-    required: Z,
-    size: V,
+    required: ee,
+    selectButtonTitle: te,
+    size: re,
     startIcon: L,
-    withTags: E
-  } = w, ee = H(w, [
+    withTags: b
+  } = F, oe = N(F, [
     "label",
     "labelAction",
     "id",
@@ -85,134 +86,136 @@ const Te = Be($)`
     "onReachEnd",
     "multi",
     "required",
+    "selectButtonTitle",
     "size",
     "startIcon",
     "withTags"
   ]);
-  const s = ye("select", i), [b, y] = le(void 0), D = Ce(b), F = ae(null), x = `${s}-label`, g = `${s}-content`, te = u ? `${s}-error` : S ? `${s}-hint` : void 0;
-  if (E && !p)
+  const a = Be("select", i), [y, g] = ae(void 0), M = Se(y), k = pe(null), I = `${a}-label`, v = `${a}-content`, j = typeof E == "string";
+  let S;
+  if (j ? S = `${a}-error` : C && (S = `${a}-hint`), b && !p)
     throw new Error('The "withTags" props can only be used when the "multi" prop is present');
-  const re = () => {
-    y(void 0);
-  }, oe = () => {
-    m || (R(), D.current.focus());
-  }, M = (t) => {
-    t.preventDefault(), !m && (t.nativeEvent.which === 3 || t.nativeEvent.button === 2 || y(Se.Mouse));
-  }, B = (t, c = !0) => {
-    p ? C(n.includes(t) ? n.filter((f) => f !== t) : [...n, t]) : (C(t), c && y(void 0));
-  }, k = (t) => {
-    C(
-      n.includes(t[0]) ? n.filter(function(c) {
-        return this.indexOf(c) < 0;
-      }, t) : [...n, ...t]
+  const ne = () => {
+    g(void 0);
+  }, ie = () => {
+    m || (D(), M.current.focus());
+  }, A = (t) => {
+    t.preventDefault(), !m && (t.nativeEvent.which === 3 || t.nativeEvent.button === 2 || g(xe.Mouse));
+  }, x = (t, c = !0) => {
+    p ? T(n.includes(t) ? n.filter((d) => d !== t) : [...n, t]) : (T(t), c && g(void 0));
+  }, P = (t) => {
+    T(
+      n.includes(t[0]) ? n.filter((c, d, u) => u.indexOf(c) < 0, t) : [...n, ...t]
     );
   };
-  let T, j = [];
-  const A = (t, c) => {
-    const f = `${s}-option-${t.props.value}`, v = p ? n.includes(t.props.value) : t.props.value === n;
-    return v && (E ? j.push({ label: t.props.children, value: t.props.value }) : T = t.props.children), _(t, {
-      id: Q(f),
-      onClick: () => B(t.props.value),
-      selected: v,
+  let $, _ = [];
+  const q = (t, c) => {
+    const d = `${a}-option-${t.props.value}`, u = p ? n.includes(t.props.value) : t.props.value === n;
+    return u && (b ? _.push({ label: t.props.children, value: t.props.value }) : $ = t.props.children), K(t, {
+      id: Y(d),
+      onClick: () => x(t.props.value),
+      selected: u,
       multi: p,
       isChild: c
     });
-  }, ne = W.toArray(a).map((t) => {
+  }, le = J.toArray(s).map((t) => {
     if (t.type.displayName === "OptGroup") {
-      const c = `${s}-option-${t.props.label}`, f = t.props.children.every((d) => n.includes(d.props.value)), v = !f && t.props.children.some((d) => n.includes(d.props.value));
-      return _(t, {
-        id: Q(c),
-        onClick: () => k(t.props.children.map((d) => d.props.value)),
-        selected: f,
-        indeterminate: v,
+      const c = `${a}-option-${t.props.label}`, d = t.props.children.every((f) => n.includes(f.props.value)), u = !d && t.props.children.some((f) => n.includes(f.props.value));
+      return K(t, {
+        id: Y(c),
+        onClick: () => P(t.props.children.map((f) => f.props.value)),
+        selected: d,
+        indeterminate: u,
         multi: p,
-        children: W.toArray(t.props.children).map((d) => A(d, !0)),
+        children: J.toArray(t.props.children).map((f) => q(f, !0)),
         value: t.props.label
       });
-    } else
-      return A(t);
+    }
+    return q(t);
   });
-  return /* @__PURE__ */ r.createElement(de, {
-    hint: S,
-    error: u,
-    id: s
-  }, /* @__PURE__ */ r.createElement(be, {
-    spacing: o || S || u ? 1 : 0
-  }, o && /* @__PURE__ */ r.createElement(fe, {
-    required: Z,
+  return /* @__PURE__ */ r.createElement(he, {
+    hint: C,
+    error: E,
+    id: a
+  }, /* @__PURE__ */ r.createElement(ve, {
+    spacing: o || C || j ? 1 : 0
+  }, o && /* @__PURE__ */ r.createElement(Ee, {
+    required: ee,
     as: "span",
-    id: x,
+    id: I,
     action: l
-  }, o), /* @__PURE__ */ r.createElement(ve, {
-    size: V,
-    hasError: Boolean(u),
+  }, o), /* @__PURE__ */ r.createElement(Te, {
+    size: re,
+    hasError: Boolean(E),
     disabled: m,
-    ref: F
-  }, /* @__PURE__ */ r.createElement(me, G({
-    ref: D,
-    labelledBy: `${x} ${g}`,
-    "aria-describedby": te,
-    expanded: Boolean(b),
-    onTrigger: y,
-    id: s,
-    hasError: Boolean(u),
+    ref: k
+  }, /* @__PURE__ */ r.createElement(ue, W({
+    ref: M,
+    labelledBy: `${I} ${v}`,
+    "aria-describedby": S,
+    expanded: Boolean(y),
+    onTrigger: g,
+    id: a,
+    hasError: Boolean(E),
     disabled: m,
-    onMouseDown: M
-  }, ee)), /* @__PURE__ */ r.createElement(Te, {
+    onMouseDown: A
+  }, oe)), /* @__PURE__ */ r.createElement(Re, {
     justifyContent: "space-between"
-  }, /* @__PURE__ */ r.createElement($, null, L && /* @__PURE__ */ r.createElement(J, {
+  }, /* @__PURE__ */ r.createElement(R, null, L && /* @__PURE__ */ r.createElement(U, {
     paddingLeft: 3,
     "aria-hidden": !0
-  }, L), E && /* @__PURE__ */ r.createElement(xe, {
-    tags: j,
-    onRemoveTag: B,
+  }, L), b && /* @__PURE__ */ r.createElement($e, {
+    tags: _,
+    onRemoveTag: x,
     disabled: m
-  }), /* @__PURE__ */ r.createElement(J, {
+  }), /* @__PURE__ */ r.createElement(U, {
     paddingLeft: 4,
     paddingRight: 4
-  }, E ? /* @__PURE__ */ r.createElement(r.Fragment, null, !n || n.length === 0 ? /* @__PURE__ */ r.createElement(N, {
+  }, b ? /* @__PURE__ */ r.createElement(r.Fragment, null, !n || n.length === 0 ? /* @__PURE__ */ r.createElement(Q, {
     ellipsis: !0,
-    id: g,
+    id: v,
     textColor: "neutral600"
-  }, O) : null, /* @__PURE__ */ r.createElement(K, {
+  }, O) : null, /* @__PURE__ */ r.createElement(X, {
     as: "span",
-    id: g
-  }, h ? h(n) : T || O, n.join(", "))) : /* @__PURE__ */ r.createElement(N, {
+    id: v
+  }, h ? h(n) : $ || O, n.join(", "))) : /* @__PURE__ */ r.createElement(Q, {
     ellipsis: !0,
-    id: g,
+    id: v,
     textColor: n ? "neutral800" : "neutral600"
-  }, h ? h(n) : T || O, p && /* @__PURE__ */ r.createElement(K, {
+  }, h ? h(n) : $ || O, p && /* @__PURE__ */ r.createElement(X, {
     as: "span"
-  }, n.join(", "))))), /* @__PURE__ */ r.createElement($, null, (p && n && n.length || !p && n) && R && /* @__PURE__ */ r.createElement(Ie, {
+  }, n.join(", "))))), /* @__PURE__ */ r.createElement(R, null, (p && n && n.length || !p && n) && D && /* @__PURE__ */ r.createElement(Ce, {
     as: "button",
     type: "button",
-    onClick: oe,
-    "aria-label": X,
-    "aria-disabled": m
-  }, /* @__PURE__ */ r.createElement(pe, null)), /* @__PURE__ */ r.createElement(Oe, {
+    onClick: ie,
+    "aria-label": w,
+    "aria-disabled": m,
+    title: w
+  }, /* @__PURE__ */ r.createElement(me, null)), /* @__PURE__ */ r.createElement(Ie, {
     paddingLeft: 3,
     "aria-hidden": !0,
     as: "button",
     type: "button",
-    onMouseDown: M,
+    onMouseDown: A,
     tabIndex: -1,
-    disabled: m
-  }, /* @__PURE__ */ r.createElement(se, null))))), /* @__PURE__ */ r.createElement(ue, null), /* @__PURE__ */ r.createElement(he, null)), b && /* @__PURE__ */ r.createElement(Ee, {
-    source: F,
+    disabled: m,
+    title: te
+  }, /* @__PURE__ */ r.createElement(ce, null))))), /* @__PURE__ */ r.createElement(be, null), /* @__PURE__ */ r.createElement(ye, null)), y && /* @__PURE__ */ r.createElement(ge, {
+    source: k,
     spacing: 4,
     fullWidth: !0,
-    intersectionId: `select-list-intersection-${s}`,
-    onReachEnd: Y
-  }, /* @__PURE__ */ r.createElement(ge, {
-    selectId: s,
-    labelledBy: o ? x : void 0,
-    onEscape: re,
-    expanded: b,
-    onSelectItem: (t, c) => c ? k(t) : B(t, !1),
+    intersectionId: `select-list-intersection-${a}`,
+    onReachEnd: V
+  }, /* @__PURE__ */ r.createElement(Oe, {
+    selectId: a,
+    labelledBy: o ? I : void 0,
+    onEscape: ne,
+    expanded: y,
+    onSelectItem: (t, c) => c ? P(t) : x(t, !1),
     multi: p
-  }, ne)));
+  }, le)));
 };
-U.defaultProps = {
+Z.defaultProps = {
   "aria-label": void 0,
   children: [],
   clearLabel: "Clear",
@@ -222,7 +225,7 @@ U.defaultProps = {
   label: void 0,
   labelAction: void 0,
   multi: !1,
-  onChange: () => {
+  onChange() {
   },
   onClear: void 0,
   onReachEnd: void 0,
@@ -231,17 +234,18 @@ U.defaultProps = {
   error: void 0,
   placeholder: "Select...",
   required: !1,
+  selectButtonTitle: "Carret Down Button",
   size: "M",
   startIcon: void 0,
   withTags: !1
 };
-U.propTypes = {
+Z.propTypes = {
   "aria-label": e.string,
   children: e.oneOfType([e.arrayOf(e.node), e.node]),
   clearLabel: e.string,
   customizeContent: e.func,
   disabled: e.bool,
-  error: e.string,
+  error: e.oneOfType([e.string, e.bool]),
   hint: e.oneOfType([e.string, e.node, e.arrayOf(e.node)]),
   id: e.oneOfType([e.string, e.number]),
   label: e.string,
@@ -252,7 +256,8 @@ U.propTypes = {
   onReachEnd: e.func,
   placeholder: e.string,
   required: e.bool,
-  size: e.oneOf(Object.keys(ce.input)),
+  selectButtonTitle: e.string,
+  size: e.oneOf(Object.keys(fe.input)),
   startIcon: e.element,
   value: e.oneOfType([
     e.arrayOf(e.oneOfType([e.string, e.number])),
@@ -262,5 +267,5 @@ U.propTypes = {
   withTags: e.bool
 };
 export {
-  U as Select
+  Z as Select
 };

package/dist/SimpleMenu/SimpleMenu.cjs

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