@strapi/design-system 1.9.0 → 1.10.0-alpha.0

package/dist/v2/Pagination/components.js

@@ -1,62 +1,83 @@
-import { jsxs as d, jsx as o } from "react/jsx-runtime";
-import l from "react";
-import { ChevronLeft as m, ChevronRight as v } from "@strapi/icons";
-import c from "styled-components";
-import { usePagination as f } from "./PaginationContext.js";
-import { buttonFocusStyle as g } from "../../themes/utils.js";
-import { BaseLink as b } from "../../BaseLink/BaseLink.js";
-import { VisuallyHidden as s } from "../../VisuallyHidden/VisuallyHidden.js";
-import { Typography as h } from "../../Typography/Typography.js";
-import { Box as x } from "../../Box/Box.js";
-const w = {
-  active: !0
-}, u = c(b).withConfig({
-  shouldForwardProp: (e, r) => !w[e] && r(e)
-})`
-  padding: ${({ theme: e }) => e.spaces[3]};
-  border-radius: ${({ theme: e }) => e.borderRadius};
-  box-shadow: ${({ active: e, theme: r }) => e ? r.shadows.filterShadow : void 0};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const PaginationContext = require('./PaginationContext.js');
+const utils = require('../../themes/utils.js');
+const BaseLink = require('../../BaseLink/BaseLink.js');
+const VisuallyHidden = require('../../VisuallyHidden/VisuallyHidden.js');
+const Typography = require('../../Typography/Typography.js');
+const Box = require('../../Box/Box.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+const React__default = /*#__PURE__*/_interopDefault(React);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const transientProps = {
+    active: true,
+};
+const LinkWrapper = styled__default.default(BaseLink.BaseLink).withConfig({
+    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+}) `
+  padding: ${({ theme }) => theme.spaces[3]};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  box-shadow: ${({ active, theme }) => (active ? theme.shadows.filterShadow : undefined)};
   text-decoration: none;
   display: flex;
 
-  ${g}
-`, $ = c(u)`
-  color: ${({ theme: e, active: r }) => r ? e.colors.primary700 : e.colors.neutral800};
-  background: ${({ theme: e, active: r }) => r ? e.colors.neutral0 : void 0};
+  ${utils.buttonFocusStyle}
+`;
+const PageLinkWrapper = styled__default.default(LinkWrapper) `
+  color: ${({ theme, active }) => (active ? theme.colors.primary700 : theme.colors.neutral800)};
+  background: ${({ theme, active }) => (active ? theme.colors.neutral0 : undefined)};
 
   &:hover {
-    box-shadow: ${({ theme: e }) => e.shadows.filterShadow};
+    box-shadow: ${({ theme }) => theme.shadows.filterShadow};
   }
-`, p = c(u)`
+`;
+const ActionLinkWrapper = styled__default.default(LinkWrapper) `
   font-size: ${11 / 16}rem;
 
   svg path {
-    fill: ${(e) => e["aria-disabled"] ? e.theme.colors.neutral300 : e.theme.colors.neutral600};
+    fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral600)};
   }
 
   &:focus,
   &:hover {
     svg path {
-      fill: ${(e) => e["aria-disabled"] ? e.theme.colors.neutral300 : e.theme.colors.neutral700};
+      fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral700)};
     }
   }
 
-  ${(e) => e["aria-disabled"] ? `
+  ${(p) => p['aria-disabled']
+    ? `
   pointer-events: none;
-    ` : void 0}
-`, A = l.forwardRef(({ children: e, ...r }, t) => {
-  const { activePage: n } = f(), i = n === 1;
-  return d(p, { ref: t, "aria-disabled": i, tabIndex: i ? -1 : void 0, ...r, children: [o(s, { children: e }), o(m, { "aria-hidden": !0 })] });
-}), B = l.forwardRef(({ children: e, ...r }, t) => {
-  const { activePage: n, pageCount: i } = f(), a = n === i;
-  return d(p, { ref: t, "aria-disabled": a, tabIndex: a ? -1 : void 0, ...r, children: [o(s, { children: e }), o(v, { "aria-hidden": !0 })] });
-}), F = l.forwardRef(({ number: e, children: r, ...t }, n) => {
-  const { activePage: i } = f(), a = i === e;
-  return d($, { ref: n, ...t, active: a, children: [o(s, { children: r }), o(h, { "aria-hidden": !0, fontWeight: a ? "bold" : void 0, lineHeight: "revert", variant: "pi", children: e })] });
-}), I = ({ children: e, ...r }) => d(x, { ...r, children: [o(s, { children: e }), o(h, { "aria-hidden": !0, lineHeight: "revert", textColor: "neutral800", variant: "pi", children: "…" })] });
-export {
-  I as Dots,
-  B as NextLink,
-  F as PageLink,
-  A as PreviousLink
-};
+    `
+    : undefined}
+`;
+const PreviousLink = React__default.default.forwardRef(({ children, ...props }, ref) => {
+    const { activePage } = PaginationContext.usePagination();
+    const disabled = activePage === 1;
+    return (jsxRuntime.jsxs(ActionLinkWrapper, { ref: ref, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsx(icons.ChevronLeft, { "aria-hidden": true })] }));
+});
+const NextLink = React__default.default.forwardRef(({ children, ...props }, ref) => {
+    const { activePage, pageCount } = PaginationContext.usePagination();
+    const disabled = activePage === pageCount;
+    return (jsxRuntime.jsxs(ActionLinkWrapper, { ref: ref, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsx(icons.ChevronRight, { "aria-hidden": true })] }));
+});
+const PageLink = React__default.default.forwardRef(({ number, children, ...props }, ref) => {
+    const { activePage } = PaginationContext.usePagination();
+    const isActive = activePage === number;
+    return (jsxRuntime.jsxs(PageLinkWrapper, { ref: ref, ...props, active: isActive, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsx(Typography.Typography, { "aria-hidden": true, fontWeight: isActive ? 'bold' : undefined, lineHeight: "revert", variant: "pi", children: number })] }));
+});
+const Dots = ({ children, ...props }) => (jsxRuntime.jsxs(Box.Box, { ...props, children: [jsxRuntime.jsx(VisuallyHidden.VisuallyHidden, { children: children }), jsxRuntime.jsx(Typography.Typography, { "aria-hidden": true, lineHeight: "revert", textColor: "neutral800", variant: "pi", children: "\u2026" })] }));
+
+exports.Dots = Dots;
+exports.NextLink = NextLink;
+exports.PageLink = PageLink;
+exports.PreviousLink = PreviousLink;

package/dist/v2/Pagination/components.mjs

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { ChevronLeft, ChevronRight } from '@strapi/icons';
+import styled from 'styled-components';
+import { usePagination } from './PaginationContext.mjs';
+import { buttonFocusStyle } from '../../themes/utils.mjs';
+import { BaseLink } from '../../BaseLink/BaseLink.mjs';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden.mjs';
+import { Typography } from '../../Typography/Typography.mjs';
+import { Box } from '../../Box/Box.mjs';
+
+const transientProps = {
+    active: true,
+};
+const LinkWrapper = styled(BaseLink).withConfig({
+    shouldForwardProp: (prop, defPropValFN) => !transientProps[prop] && defPropValFN(prop),
+}) `
+  padding: ${({ theme }) => theme.spaces[3]};
+  border-radius: ${({ theme }) => theme.borderRadius};
+  box-shadow: ${({ active, theme }) => (active ? theme.shadows.filterShadow : undefined)};
+  text-decoration: none;
+  display: flex;
+
+  ${buttonFocusStyle}
+`;
+const PageLinkWrapper = styled(LinkWrapper) `
+  color: ${({ theme, active }) => (active ? theme.colors.primary700 : theme.colors.neutral800)};
+  background: ${({ theme, active }) => (active ? theme.colors.neutral0 : undefined)};
+
+  &:hover {
+    box-shadow: ${({ theme }) => theme.shadows.filterShadow};
+  }
+`;
+const ActionLinkWrapper = styled(LinkWrapper) `
+  font-size: ${11 / 16}rem;
+
+  svg path {
+    fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral600)};
+  }
+
+  &:focus,
+  &:hover {
+    svg path {
+      fill: ${(p) => (p['aria-disabled'] ? p.theme.colors.neutral300 : p.theme.colors.neutral700)};
+    }
+  }
+
+  ${(p) => p['aria-disabled']
+    ? `
+  pointer-events: none;
+    `
+    : undefined}
+`;
+const PreviousLink = React__default.forwardRef(({ children, ...props }, ref) => {
+    const { activePage } = usePagination();
+    const disabled = activePage === 1;
+    return (jsxs(ActionLinkWrapper, { ref: ref, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsx(VisuallyHidden, { children: children }), jsx(ChevronLeft, { "aria-hidden": true })] }));
+});
+const NextLink = React__default.forwardRef(({ children, ...props }, ref) => {
+    const { activePage, pageCount } = usePagination();
+    const disabled = activePage === pageCount;
+    return (jsxs(ActionLinkWrapper, { ref: ref, "aria-disabled": disabled, tabIndex: disabled ? -1 : undefined, ...props, children: [jsx(VisuallyHidden, { children: children }), jsx(ChevronRight, { "aria-hidden": true })] }));
+});
+const PageLink = React__default.forwardRef(({ number, children, ...props }, ref) => {
+    const { activePage } = usePagination();
+    const isActive = activePage === number;
+    return (jsxs(PageLinkWrapper, { ref: ref, ...props, active: isActive, children: [jsx(VisuallyHidden, { children: children }), jsx(Typography, { "aria-hidden": true, fontWeight: isActive ? 'bold' : undefined, lineHeight: "revert", variant: "pi", children: number })] }));
+});
+const Dots = ({ children, ...props }) => (jsxs(Box, { ...props, children: [jsx(VisuallyHidden, { children: children }), jsx(Typography, { "aria-hidden": true, lineHeight: "revert", textColor: "neutral800", variant: "pi", children: "\u2026" })] }));
+
+export { Dots, NextLink, PageLink, PreviousLink };

package/dist/v2/Pagination/index.js

@@ -1,9 +1,14 @@
-import { Pagination as e } from "./Pagination.js";
-import { Dots as r, NextLink as t, PageLink as a, PreviousLink as k } from "./components.js";
-export {
-  r as Dots,
-  t as NextLink,
-  a as PageLink,
-  e as Pagination,
-  k as PreviousLink
-};
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Pagination = require('./Pagination.js');
+const components = require('./components.js');
+
+
+
+exports.Pagination = Pagination.Pagination;
+exports.Dots = components.Dots;
+exports.NextLink = components.NextLink;
+exports.PageLink = components.PageLink;
+exports.PreviousLink = components.PreviousLink;

package/dist/v2/Pagination/index.mjs

@@ -0,0 +1,2 @@
+export { Pagination } from './Pagination.mjs';
+export { Dots, NextLink, PageLink, PreviousLink } from './components.mjs';

package/dist/v2/SimpleMenu/Menu.js

@@ -1,18 +1,51 @@
-import { jsx as e, jsxs as s } 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 { extractStyleFromTheme as x } from "../../helpers/theme.js";
-import { Link as y } from "../Link/Link.js";
-import { Button as C } from "../../Button/Button.js";
-import { Box as $ } from "../../Box/Box.js";
-import { Flex as c } from "../../Flex/Flex.js";
-import { Typography as i } from "../../Typography/Typography.js";
-const v = n.Root, k = a(({ size: r, endIcon: o = e(f, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": !0 }), ...t }, d) => e(n.Trigger, { asChild: !0, children: e(C, { ref: d, type: "button", variant: "ghost", endIcon: o, paddingTop: r === "S" ? 1 : 2, paddingBottom: r === "S" ? 1 : 2, paddingLeft: r === "S" ? 3 : 4, paddingRight: r === "S" ? 3 : 4, ...t }) })), R = a(({ children: r, intersectionId: o, popoverPlacement: t = "bottom-start", ...d }, p) => {
-  const [b, m] = t.split("-");
-  return e(n.Portal, { children: e(n.Content, { align: m, side: b, loop: !0, asChild: !0, children: s(u, { 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", ...d, children: [r, e($, { id: o, width: "100%", height: "1px" })] }) }) });
-}), u = l(c)`
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const DropdownMenu = require('@radix-ui/react-dropdown-menu');
+const icons = require('@strapi/icons');
+const styled = require('styled-components');
+const theme = require('../../helpers/theme.js');
+const Link = require('../Link/Link.js');
+const Button = require('../../Button/Button.js');
+const Box = require('../../Box/Box.js');
+const Flex = require('../../Flex/Flex.js');
+const Typography = require('../../Typography/Typography.js');
+
+const _interopDefault = e => e && e.__esModule ? e : { default: e };
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const DropdownMenu__namespace = /*#__PURE__*/_interopNamespace(DropdownMenu);
+const styled__default = /*#__PURE__*/_interopDefault(styled);
+
+const MenuRoot = DropdownMenu__namespace.Root;
+const MenuTrigger = React.forwardRef(({ size, endIcon = jsxRuntime.jsx(icons.CarretDown, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": true }), ...props }, ref) => {
+    return (jsxRuntime.jsx(DropdownMenu__namespace.Trigger, { asChild: true, children: jsxRuntime.jsx(Button.Button, { ref: ref, type: "button", variant: "ghost", endIcon: endIcon, paddingTop: size === 'S' ? 1 : 2, paddingBottom: size === 'S' ? 1 : 2, paddingLeft: size === 'S' ? 3 : 4, paddingRight: size === 'S' ? 3 : 4, ...props }) }));
+});
+const MenuContent = React.forwardRef(({ children, intersectionId, popoverPlacement = 'bottom-start', ...props }, ref) => {
+    const [side, align] = popoverPlacement.split('-');
+    return (jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: jsxRuntime.jsx(DropdownMenu__namespace.Content, { align: align, side: side, loop: true, asChild: true, children: jsxRuntime.jsxs(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", position: "relative", overflow: "auto", ...props, children: [children, jsxRuntime.jsx(Box.Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) }));
+});
+const Viewport = styled__default.default(Flex.Flex) `
   scrollbar-width: none;
   -ms-overflow-style: none;
   -webkit-overflow-scrolling: touch;
@@ -20,26 +53,30 @@ const v = n.Root, k = a(({ size: r, endIcon: o = e(f, { width: `${6 / 16}rem`, h
   &::-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(g, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...t, children: e(i, { children: t.children }) }) }), h = ({ theme: r }) => w`
+`;
+const MenuItem = ({ onSelect, disabled = false, ...props }) => {
+    return (jsxRuntime.jsx(DropdownMenu__namespace.Item, { asChild: true, onSelect: onSelect, disabled: disabled, children: props.isLink || props.isExternal ? (jsxRuntime.jsx(OptionLink, { color: "neutral800", ...props, isExternal: props.isExternal ?? false, children: jsxRuntime.jsx(Typography.Typography, { children: props.children }) })) : (jsxRuntime.jsx(OptionButton, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...props, children: jsxRuntime.jsx(Typography.Typography, { children: props.children }) })) }));
+};
+const getOptionStyle = ({ theme }) => styled.css `
   text-align: left;
   width: 100%;
-  border-radius: ${r.borderRadius};
-  padding: ${r.spaces[2]} ${r.spaces[4]};
+  border-radius: ${theme.borderRadius};
+  padding: ${theme.spaces[2]} ${theme.spaces[4]};
 
-  ${i} {
+  ${Typography.Typography} {
     color: inherit;
   }
 
   &[aria-disabled] {
     cursor: not-allowed;
 
-    ${i} {
-      color: ${r.colors.neutral500};
+    ${Typography.Typography} {
+      color: ${theme.colors.neutral500};
     }
   }
 
   &[data-highlighted] {
-    background-color: ${r.colors.primary100};
+    background-color: ${theme.colors.primary100};
   }
 
   &:focus-visible {
@@ -49,11 +86,13 @@ const v = n.Root, k = a(({ size: r, endIcon: o = e(f, { width: `${6 / 16}rem`, h
       content: none;
     }
   }
-`, g = l(c)`
-  ${h}
-`, L = l(y)`
+`;
+const OptionButton = styled__default.default(Flex.Flex) `
+  ${getOptionStyle}
+`;
+const OptionLink = styled__default.default(Link.Link) `
   /* 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 }) => x(r.colors, o, void 0)};
+  color: ${({ theme: theme$1, color }) => theme.extractStyleFromTheme(theme$1.colors, color, undefined)};
   text-decoration: none;
 
   &:hover {
@@ -65,25 +104,43 @@ const v = n.Root, k = a(({ size: r, endIcon: o = e(f, { width: `${6 / 16}rem`, h
     fill: currentColor;
   }
 
-  ${h}
-`, 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: s(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(g)`
+  ${getOptionStyle}
+`;
+const MenuLabel = React.forwardRef((props, ref) => (jsxRuntime.jsx(DropdownMenu__namespace.Label, { asChild: true, children: jsxRuntime.jsx(StyledLabel, { ref: ref, variant: "sigma", textColor: "neutral600", ...props }) })));
+const StyledLabel = styled__default.default(Typography.Typography) `
+  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
+`;
+const MenuSubRoot = DropdownMenu__namespace.Sub;
+const MenuSubTrigger = React.forwardRef(({ disabled = false, ...props }, ref) => {
+    return (jsxRuntime.jsx(DropdownMenu__namespace.SubTrigger, { asChild: true, disabled: disabled, children: jsxRuntime.jsxs(SubmenuTrigger, { ref: ref, color: "neutral800", as: "button", type: "button", background: "transparent", borderStyle: "none", gap: 5, ...props, children: [jsxRuntime.jsx(Typography.Typography, { children: props.children }), jsxRuntime.jsx(TriggerArrow, { height: 12, width: 12 })] }) }));
+});
+const SubmenuTrigger = styled__default.default(OptionButton) `
   &[data-state='open'] {
-    background-color: ${({ theme: r }) => r.colors.primary100};
+    background-color: ${({ theme }) => theme.colors.primary100};
   }
-`, W = l(S)`
+`;
+const TriggerArrow = styled__default.default(icons.ChevronRight) `
   path {
-    fill: ${({ theme: r }) => r.colors.neutral500};
+    fill: ${({ theme }) => theme.colors.neutral500};
   }
-`, j = a((r, o) => e(n.Portal, { children: e(n.SubContent, { sideOffset: 8, asChild: !0, children: e(u, { ref: o, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: !0, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", overflow: "auto", ...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
-};
+`;
+const MenuSubContent = React.forwardRef((props, ref) => {
+    return (jsxRuntime.jsx(DropdownMenu__namespace.Portal, { children: jsxRuntime.jsx(DropdownMenu__namespace.SubContent, { sideOffset: 8, asChild: true, children: jsxRuntime.jsx(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", overflow: "auto", ...props }) }) }));
+});
+const Root = MenuRoot;
+const Trigger = MenuTrigger;
+const Content = MenuContent;
+const Item = MenuItem;
+const Label = MenuLabel;
+const SubRoot = MenuSubRoot;
+const SubTrigger = MenuSubTrigger;
+const SubContent = MenuSubContent;
+
+exports.Content = Content;
+exports.Item = Item;
+exports.Label = Label;
+exports.Root = Root;
+exports.SubContent = SubContent;
+exports.SubRoot = SubRoot;
+exports.SubTrigger = SubTrigger;
+exports.Trigger = Trigger;

package/dist/v2/SimpleMenu/Menu.mjs

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { CarretDown, ChevronRight } from '@strapi/icons';
+import styled, { css } from 'styled-components';
+import { extractStyleFromTheme } from '../../helpers/theme.mjs';
+import { Link } from '../Link/Link.mjs';
+import { Button } from '../../Button/Button.mjs';
+import { Box } from '../../Box/Box.mjs';
+import { Flex } from '../../Flex/Flex.mjs';
+import { Typography } from '../../Typography/Typography.mjs';
+
+const MenuRoot = DropdownMenu.Root;
+const MenuTrigger = forwardRef(({ size, endIcon = jsx(CarretDown, { width: `${6 / 16}rem`, height: `${4 / 16}rem`, "aria-hidden": true }), ...props }, ref) => {
+    return (jsx(DropdownMenu.Trigger, { asChild: true, children: jsx(Button, { ref: ref, type: "button", variant: "ghost", endIcon: endIcon, paddingTop: size === 'S' ? 1 : 2, paddingBottom: size === 'S' ? 1 : 2, paddingLeft: size === 'S' ? 3 : 4, paddingRight: size === 'S' ? 3 : 4, ...props }) }));
+});
+const MenuContent = forwardRef(({ children, intersectionId, popoverPlacement = 'bottom-start', ...props }, ref) => {
+    const [side, align] = popoverPlacement.split('-');
+    return (jsx(DropdownMenu.Portal, { children: jsx(DropdownMenu.Content, { align: align, side: side, loop: true, asChild: true, children: jsxs(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", position: "relative", overflow: "auto", ...props, children: [children, jsx(Box, { id: intersectionId, width: "100%", height: "1px" })] }) }) }));
+});
+const Viewport = styled(Flex) `
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+const MenuItem = ({ onSelect, disabled = false, ...props }) => {
+    return (jsx(DropdownMenu.Item, { asChild: true, onSelect: onSelect, disabled: disabled, children: props.isLink || props.isExternal ? (jsx(OptionLink, { color: "neutral800", ...props, isExternal: props.isExternal ?? false, children: jsx(Typography, { children: props.children }) })) : (jsx(OptionButton, { cursor: "pointer", color: "neutral800", background: "transparent", borderStyle: "none", ...props, children: jsx(Typography, { children: props.children }) })) }));
+};
+const getOptionStyle = ({ theme }) => css `
+  text-align: left;
+  width: 100%;
+  border-radius: ${theme.borderRadius};
+  padding: ${theme.spaces[2]} ${theme.spaces[4]};
+
+  ${Typography} {
+    color: inherit;
+  }
+
+  &[aria-disabled] {
+    cursor: not-allowed;
+
+    ${Typography} {
+      color: ${theme.colors.neutral500};
+    }
+  }
+
+  &[data-highlighted] {
+    background-color: ${theme.colors.primary100};
+  }
+
+  &:focus-visible {
+    outline: none;
+
+    &:after {
+      content: none;
+    }
+  }
+`;
+const OptionButton = styled(Flex) `
+  ${getOptionStyle}
+`;
+const OptionLink = styled(Link) `
+  /* We include this here again because typically when people use OptionLink they provide an as prop which cancels the Box props */
+  color: ${({ theme, color }) => extractStyleFromTheme(theme.colors, color, undefined)};
+  text-decoration: none;
+
+  &:hover {
+    color: unset;
+  }
+
+  svg > path,
+  &:focus-visible svg > path {
+    fill: currentColor;
+  }
+
+  ${getOptionStyle}
+`;
+const MenuLabel = forwardRef((props, ref) => (jsx(DropdownMenu.Label, { asChild: true, children: jsx(StyledLabel, { ref: ref, variant: "sigma", textColor: "neutral600", ...props }) })));
+const StyledLabel = styled(Typography) `
+  padding: ${({ theme }) => theme.spaces[2]} ${({ theme }) => theme.spaces[4]};
+`;
+const MenuSubRoot = DropdownMenu.Sub;
+const MenuSubTrigger = forwardRef(({ disabled = false, ...props }, ref) => {
+    return (jsx(DropdownMenu.SubTrigger, { asChild: true, disabled: disabled, children: jsxs(SubmenuTrigger, { ref: ref, color: "neutral800", as: "button", type: "button", background: "transparent", borderStyle: "none", gap: 5, ...props, children: [jsx(Typography, { children: props.children }), jsx(TriggerArrow, { height: 12, width: 12 })] }) }));
+});
+const SubmenuTrigger = styled(OptionButton) `
+  &[data-state='open'] {
+    background-color: ${({ theme }) => theme.colors.primary100};
+  }
+`;
+const TriggerArrow = styled(ChevronRight) `
+  path {
+    fill: ${({ theme }) => theme.colors.neutral500};
+  }
+`;
+const MenuSubContent = forwardRef((props, ref) => {
+    return (jsx(DropdownMenu.Portal, { children: jsx(DropdownMenu.SubContent, { sideOffset: 8, asChild: true, children: jsx(Viewport, { ref: ref, direction: "column", borderStyle: "solid", borderWidth: "1px", borderColor: "neutral150", hasRadius: true, background: "neutral0", shadow: "filterShadow", maxHeight: "15rem", padding: 1, alignItems: "flex-start", overflow: "auto", ...props }) }) }));
+});
+const Root = MenuRoot;
+const Trigger = MenuTrigger;
+const Content = MenuContent;
+const Item = MenuItem;
+const Label = MenuLabel;
+const SubRoot = MenuSubRoot;
+const SubTrigger = MenuSubTrigger;
+const SubContent = MenuSubContent;
+
+export { Content, Item, Label, Root, SubContent, SubRoot, SubTrigger, Trigger };

package/dist/v2/SimpleMenu/SimpleMenu.js

@@ -1,27 +1,48 @@
-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 R, Content as C, Item as M } from "./Menu.js";
-import * as $ from "./Menu.js";
-import { stripReactIdOfColon as j } from "../../helpers/strings.js";
-import { useId as y } from "../../hooks/useId.js";
-import { useIntersection as O } from "../../hooks/useIntersection.js";
-const P = ({ children: c, onOpen: t, onClose: n, popoverPlacement: f, onReachEnd: o, ...r }) => {
-  const m = h(null), [l, p] = g(!1), a = (e) => {
-    o && o(e);
-  }, d = (e) => {
-    e && typeof t == "function" ? t() : !e && typeof n == "function" && n(), p(e);
-  }, u = y(), i = `intersection-${j(u)}`;
-  return O(m, a, {
-    selectorToWatch: `#${i}`,
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Menu = require('./Menu.js');
+const strings = require('../../helpers/strings.js');
+const useId = require('../../hooks/useId.js');
+const useIntersection = require('../../hooks/useIntersection.js');
+
+const SimpleMenu = ({ children, onOpen, onClose, popoverPlacement, onReachEnd, ...props }) => {
     /**
-     * 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.
+     * Used for the intersection observer
      */
-    skipWhen: !l
-  }), I(x, { onOpenChange: d, children: [s(R, { ...r, children: r.label }), s(C, { intersectionId: i, popoverPlacement: f, children: c })] });
-}, q = M;
-export {
-  $ as Menu,
-  q as MenuItem,
-  P as SimpleMenu
+    const contentRef = React.useRef(null);
+    const [internalIsOpen, setInternalIsOpen] = React.useState(false);
+    const handleReachEnd = (entry) => {
+        if (onReachEnd) {
+            onReachEnd(entry);
+        }
+    };
+    const handleOpenChange = (isOpen) => {
+        if (isOpen && typeof onOpen === 'function') {
+            onOpen();
+        }
+        else if (!isOpen && typeof onClose === 'function') {
+            onClose();
+        }
+        setInternalIsOpen(isOpen);
+    };
+    const generatedId = useId.useId();
+    const intersectionId = `intersection-${strings.stripReactIdOfColon(generatedId)}`;
+    useIntersection.useIntersection(contentRef, handleReachEnd, {
+        selectorToWatch: `#${intersectionId}`,
+        /**
+         * 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: !internalIsOpen,
+    });
+    return (jsxRuntime.jsxs(Menu.Root, { onOpenChange: handleOpenChange, children: [jsxRuntime.jsx(Menu.Trigger, { ...props, children: props.label }), jsxRuntime.jsx(Menu.Content, { intersectionId: intersectionId, popoverPlacement: popoverPlacement, children: children })] }));
 };
+const MenuItem = Menu.Item;
+
+exports.Menu = Menu;
+exports.MenuItem = MenuItem;
+exports.SimpleMenu = SimpleMenu;