@strapi/design-system 1.6.5 → 1.7.0-alpha.0

package/dist/v2/Link/Link.js

@@ -1,50 +1,65 @@
-import r from "react";
-import { ExternalLink as c } from "@strapi/icons";
-import t from "prop-types";
-import s from "styled-components";
-import { BaseLink as f } from "../../BaseLink/BaseLink.js";
-import { Box as y } from "../../Box/Box.js";
-import { buttonFocusStyle as u } from "../../themes/utils.js";
-import { Typography as v } from "../../Typography/Typography.js";
-const g = s(f)`
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import m from "react";
+import { ExternalLink as f } from "@strapi/icons";
+import c from "styled-components";
+import { BaseLink as y } from "../../BaseLink/BaseLink.js";
+import { buttonFocusStyle as d } from "../../themes/utils.js";
+import { Typography as u } from "../../Typography/Typography.js";
+const x = c(y)`
   display: inline-flex;
   align-items: center;
   text-decoration: none;
-  pointer-events: ${({ disabled: e }) => e ? "none" : void 0};
-
-  svg path {
-    fill: ${({ disabled: e, theme: o }) => e ? o.colors.neutral600 : o.colors.primary600};
-  }
+  gap: ${({
+  theme: r
+}) => r.spaces[2]};
+  pointer-events: ${({
+  disabled: r
+}) => r ? "none" : void 0};
 
   svg {
     font-size: ${10 / 16}rem;
+
+    path {
+      fill: ${({
+  disabled: r,
+  theme: o
+}) => r ? o.colors.neutral600 : o.colors.primary600};
+    }
+  }
+
+  &:hover {
+    color: ${({
+  theme: r
+}) => r.colors.primary500};
   }
 
-  &:hover,
   &:active {
-    color: ${({ theme: e }) => e.colors.primary800};
+    color: ${({
+  theme: r
+}) => r.colors.primary700};
   }
 
-  ${u};
-`, a = s(y)`
-  display: flex;
-`, i = r.forwardRef(({ children: e, href: o, disabled: l, startIcon: p, endIcon: n, ...d }, m) => /* @__PURE__ */ r.createElement(g, { ref: m, href: o, disabled: l, ...d }, p && /* @__PURE__ */ r.createElement(a, { as: "span", "aria-hidden": !0, paddingRight: 2 }, p), /* @__PURE__ */ r.createElement(v, { textColor: l ? "neutral600" : "primary600" }, e), n && /* @__PURE__ */ r.createElement(a, { as: "span", "aria-hidden": !0, paddingLeft: 2 }, n), o && !n && /* @__PURE__ */ r.createElement(a, { as: "span", "aria-hidden": !0, paddingLeft: 2 }, /* @__PURE__ */ r.createElement(c, null))));
-i.displayName = "Link";
-i.defaultProps = {
-  as: void 0,
-  href: void 0,
-  disabled: !1,
-  startIcon: void 0,
-  endIcon: void 0
-};
-i.propTypes = {
-  as: t.elementType,
-  children: t.node.isRequired,
-  disabled: t.bool,
-  endIcon: t.element,
-  href: t.string,
-  startIcon: t.element
-};
+  ${d};
+`, $ = m.forwardRef(({
+  children: r,
+  href: o,
+  disabled: e = !1,
+  startIcon: a,
+  endIcon: t,
+  isExternal: i = !0,
+  ...l
+}, p) => s(x, {
+  ref: p,
+  href: o,
+  disabled: e,
+  isExternal: i,
+  ...l,
+  children: [a, n(u, {
+    textColor: e ? "neutral600" : "primary600",
+    children: r
+  }), t, o && !t && i && n(f, {})]
+}));
+$.displayName = "Link";
 export {
-  i as Link
+  $ as Link
 };

package/dist/v2/SimpleMenu/Menu.cjs

@@ -0,0 +1,65 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("react/jsx-runtime"),a=require("react"),y=require("@radix-ui/react-dropdown-menu"),c=require("@strapi/icons"),d=require("styled-components"),j=require("../../Box/Box.cjs"),m=require("../../Button/Button.cjs"),u=require("../../Flex/Flex.cjs"),S=require("../../helpers/theme.cjs"),i=require("../../Typography/Typography.cjs"),w=require("../Link/Link.cjs"),T=e=>e&&typeof e=="object"&&"default"in e?e:{default:e};function C(e){if(e&&e.__esModule)return e;const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,l.get?l:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const n=C(y),s=T(d),R=n.Root,k=a.forwardRef(({size:e,...r},o)=>t.jsx(n.Trigger,{asChild:!0,children:t.jsx(m.Button,{ref:o,type:"button",variant:"ghost",endIcon:t.jsx(c.CarretDown,{width:`${6/16}rem`,height:`${4/16}rem`,"aria-hidden":!0}),paddingTop:e==="S"?1:2,paddingBottom:e==="S"?1:2,paddingLeft:e==="S"?3:4,paddingRight:e==="S"?3:4,...r})})),v=a.forwardRef(({children:e,intersectionId:r,popoverPlacement:o="bottom-start",...l},b)=>{const[f,x]=o.split("-");return t.jsx(n.Portal,{children:t.jsx(n.Content,{align:x,side:f,loop:!0,asChild:!0,children:t.jsxs(h,{ref:b,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",position:"relative",overflow:"auto",...l,children:[e,t.jsx(j.Box,{id:r,width:"100%",height:"1px"})]})})})}),h=s.default(u.Flex)`
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`,$=({onSelect:e,disabled:r=!1,...o})=>t.jsx(n.Item,{asChild:!0,onSelect:e,disabled:r,children:o.isLink||o.isExternal?t.jsx(L,{color:"neutral800",...o,isExternal:o.isExternal??!1,children:t.jsx(i.Typography,{children:o.children})}):t.jsx(p,{cursor:"pointer",color:"neutral800",background:"transparent",borderStyle:"none",...o,children:t.jsx(i.Typography,{children:o.children})})}),g=({theme:e})=>d.css`
+  text-align: left;
+  width: 100%;
+  border-radius: ${e.borderRadius};
+  padding: ${e.spaces[2]} ${e.spaces[4]};
+
+  ${i.Typography} {
+    color: inherit;
+  }
+
+  &[aria-disabled] {
+    cursor: not-allowed;
+
+    ${i.Typography} {
+      color: ${e.colors.neutral500};
+    }
+  }
+
+  &[data-highlighted] {
+    background-color: ${e.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &:after {
+      content: none;
+    }
+  }
+`,p=s.default(u.Flex)`
+  ${g}
+`,L=s.default(w.Link)`
+  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
+  color: ${({theme:e,color:r})=>S.extractStyleFromTheme(e.colors,r,void 0)};
+  text-decoration: none;
+
+  &:hover {
+    color: unset;
+  }
+
+  svg > path,
+  &:focus-visible svg > path {
+    fill: currentColor;
+  }
+
+  ${g}
+`,M=a.forwardRef((e,r)=>t.jsx(n.Label,{asChild:!0,children:t.jsx(q,{ref:r,variant:"sigma",textColor:"neutral600",...e})})),q=s.default(i.Typography)`
+  padding: ${({theme:e})=>e.spaces[2]} ${({theme:e})=>e.spaces[4]};
+`,B=n.Sub,O=a.forwardRef(({disabled:e=!1,...r},o)=>t.jsx(n.SubTrigger,{asChild:!0,disabled:e,children:t.jsxs(_,{ref:o,color:"neutral800",as:"button",type:"button",background:"transparent",borderStyle:"none",gap:5,...r,children:[t.jsx(i.Typography,{children:r.children}),t.jsx(I,{height:12,width:12})]})})),_=s.default(p)`
+  &[data-state='open'] {
+    background-color: ${({theme:e})=>e.colors.primary100};
+  }
+`,I=s.default(c.ChevronRight)`
+  path {
+    fill: ${({theme:e})=>e.colors.neutral500};
+  }
+`,F=a.forwardRef((e,r)=>t.jsx(n.Portal,{children:t.jsx(n.SubContent,{sideOffset:8,asChild:!0,children:t.jsx(h,{ref:r,direction:"column",borderStyle:"solid",borderWidth:"1px",borderColor:"neutral150",hasRadius:!0,background:"neutral0",shadow:"filterShadow",maxHeight:"15rem",padding:1,alignItems:"flex-start",...e})})})),D=R,P=k,E=v,W=$,H=M,A=B,N=O,V=F;exports.Content=E;exports.Item=W;exports.Label=H;exports.Root=D;exports.SubContent=V;exports.SubRoot=A;exports.SubTrigger=N;exports.Trigger=P;

package/dist/v2/SimpleMenu/Menu.js

@@ -0,0 +1,229 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import * as n from "@radix-ui/react-dropdown-menu";
+import { CarretDown as f, ChevronRight as S } from "@strapi/icons";
+import l, { css as w } from "styled-components";
+import { Box as x } from "../../Box/Box.js";
+import { Button as y } from "../../Button/Button.js";
+import { Flex as s } from "../../Flex/Flex.js";
+import { extractStyleFromTheme as C } from "../../helpers/theme.js";
+import { Typography as i } from "../../Typography/Typography.js";
+import { Link as $ } from "../Link/Link.js";
+const v = n.Root, k = a(({
+  size: r,
+  ...o
+}, t) => e(n.Trigger, {
+  asChild: !0,
+  children: e(y, {
+    ref: t,
+    type: "button",
+    variant: "ghost",
+    endIcon: e(f, {
+      width: `${6 / 16}rem`,
+      height: `${4 / 16}rem`,
+      "aria-hidden": !0
+    }),
+    paddingTop: r === "S" ? 1 : 2,
+    paddingBottom: r === "S" ? 1 : 2,
+    paddingLeft: r === "S" ? 3 : 4,
+    paddingRight: r === "S" ? 3 : 4,
+    ...o
+  })
+})), R = a(({
+  children: r,
+  intersectionId: o,
+  popoverPlacement: t = "bottom-start",
+  ...g
+}, p) => {
+  const [b, m] = t.split("-");
+  return e(n.Portal, {
+    children: e(n.Content, {
+      align: m,
+      side: b,
+      loop: !0,
+      asChild: !0,
+      children: d(c, {
+        ref: p,
+        direction: "column",
+        borderStyle: "solid",
+        borderWidth: "1px",
+        borderColor: "neutral150",
+        hasRadius: !0,
+        background: "neutral0",
+        shadow: "filterShadow",
+        maxHeight: "15rem",
+        padding: 1,
+        alignItems: "flex-start",
+        position: "relative",
+        overflow: "auto",
+        ...g,
+        children: [r, e(x, {
+          id: o,
+          width: "100%",
+          height: "1px"
+        })]
+      })
+    })
+  });
+}), c = l(s)`
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`, T = ({
+  onSelect: r,
+  disabled: o = !1,
+  ...t
+}) => e(n.Item, {
+  asChild: !0,
+  onSelect: r,
+  disabled: o,
+  children: t.isLink || t.isExternal ? e(L, {
+    color: "neutral800",
+    ...t,
+    isExternal: t.isExternal ?? !1,
+    children: e(i, {
+      children: t.children
+    })
+  }) : e(h, {
+    cursor: "pointer",
+    color: "neutral800",
+    background: "transparent",
+    borderStyle: "none",
+    ...t,
+    children: e(i, {
+      children: t.children
+    })
+  })
+}), u = ({
+  theme: r
+}) => w`
+  text-align: left;
+  width: 100%;
+  border-radius: ${r.borderRadius};
+  padding: ${r.spaces[2]} ${r.spaces[4]};
+
+  ${i} {
+    color: inherit;
+  }
+
+  &[aria-disabled] {
+    cursor: not-allowed;
+
+    ${i} {
+      color: ${r.colors.neutral500};
+    }
+  }
+
+  &[data-highlighted] {
+    background-color: ${r.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &:after {
+      content: none;
+    }
+  }
+`, h = l(s)`
+  ${u}
+`, L = l($)`
+  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
+  color: ${({
+  theme: r,
+  color: o
+}) => C(r.colors, o, void 0)};
+  text-decoration: none;
+
+  &:hover {
+    color: unset;
+  }
+
+  svg > path,
+  &:focus-visible svg > path {
+    fill: currentColor;
+  }
+
+  ${u}
+`, M = a((r, o) => e(n.Label, {
+  asChild: !0,
+  children: e(I, {
+    ref: o,
+    variant: "sigma",
+    textColor: "neutral600",
+    ...r
+  })
+})), I = l(i)`
+  padding: ${({
+  theme: r
+}) => r.spaces[2]} ${({
+  theme: r
+}) => r.spaces[4]};
+`, B = n.Sub, O = a(({
+  disabled: r = !1,
+  ...o
+}, t) => e(n.SubTrigger, {
+  asChild: !0,
+  disabled: r,
+  children: d(E, {
+    ref: t,
+    color: "neutral800",
+    as: "button",
+    type: "button",
+    background: "transparent",
+    borderStyle: "none",
+    gap: 5,
+    ...o,
+    children: [e(i, {
+      children: o.children
+    }), e(W, {
+      height: 12,
+      width: 12
+    })]
+  })
+})), E = l(h)`
+  &[data-state='open'] {
+    background-color: ${({
+  theme: r
+}) => r.colors.primary100};
+  }
+`, W = l(S)`
+  path {
+    fill: ${({
+  theme: r
+}) => r.colors.neutral500};
+  }
+`, j = a((r, o) => e(n.Portal, {
+  children: e(n.SubContent, {
+    sideOffset: 8,
+    asChild: !0,
+    children: e(c, {
+      ref: o,
+      direction: "column",
+      borderStyle: "solid",
+      borderWidth: "1px",
+      borderColor: "neutral150",
+      hasRadius: !0,
+      background: "neutral0",
+      shadow: "filterShadow",
+      maxHeight: "15rem",
+      padding: 1,
+      alignItems: "flex-start",
+      ...r
+    })
+  })
+})), N = v, Q = k, U = R, X = T, Y = M, Z = B, _ = O, z = j;
+export {
+  U as Content,
+  X as Item,
+  Y as Label,
+  N as Root,
+  z as SubContent,
+  Z as SubRoot,
+  _ as SubTrigger,
+  Q as Trigger
+};

package/dist/v2/SimpleMenu/SimpleMenu.cjs

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

package/dist/v2/SimpleMenu/SimpleMenu.js

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

package/dist/v2/SimpleMenu/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./SimpleMenu.cjs");exports.MenuItem=e.MenuItem;exports.SimpleMenu=e.SimpleMenu;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./SimpleMenu.cjs"),u=require("./Menu.cjs");exports.MenuItem=e.MenuItem;exports.SimpleMenu=e.SimpleMenu;exports.Menu=u;

package/dist/v2/SimpleMenu/index.js

@@ -1,5 +1,7 @@
-import { MenuItem as n, SimpleMenu as o } from "./SimpleMenu.js";
+import { MenuItem as r, SimpleMenu as p } from "./SimpleMenu.js";
+import * as e from "./Menu.js";
 export {
-  n as MenuItem,
-  o as SimpleMenu
+  e as Menu,
+  r as MenuItem,
+  p as SimpleMenu
 };