@payloadcms/ui 4.0.0-internal.e7d4ebc → 4.0.0-internal.ec73d44

package/dist/elements/Popup/PopupButtonList/index.js

@@ -6,8 +6,18 @@ import { CheckIcon } from '../../../icons/Check/index.js';
 import { Link } from '../../Link/index.js';
 import './index.css';
 const baseClass = 'popup-button-list';
+const Group = ({
+  children,
+  className,
+  role
+}) => /*#__PURE__*/_jsx("div", {
+  className: className,
+  role: role,
+  children: children
+});
 export { PopupListDivider as Divider } from '../PopupDivider/index.js';
 export { PopupListGroupLabel as GroupLabel } from '../PopupGroupLabel/index.js';
+export { SubmenuTrigger } from './SubmenuTrigger/index.js';
 export const ButtonGroup = ({
   buttonSize = 'default',
   children,
@@ -15,7 +25,7 @@ export const ButtonGroup = ({
   textAlign = 'left'
 }) => {
   const classes = [baseClass, className, `${baseClass}__text-align--${textAlign}`, `${baseClass}__button-size--${buttonSize}`].filter(Boolean).join(' ');
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Group, {
     className: classes,
     children: children
   });
@@ -30,7 +40,7 @@ export const MenuItem = ({
   size = 'large'
 }) => {
   const classes = [baseClass, className, `${baseClass}--with-actions`, size === 'large' && `${baseClass}--large`].filter(Boolean).join(' ');
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Group, {
     className: classes,
     children: children
   });
@@ -44,20 +54,25 @@ export const RadioGroup = ({
   className
 }) => {
   const classes = [baseClass, className, `${baseClass}--with-icons`].filter(Boolean).join(' ');
-  return /*#__PURE__*/_jsx("div", {
+  return /*#__PURE__*/_jsx(Group, {
     className: classes,
+    role: "group",
     children: children
   });
 };
+export const CheckboxGroup = RadioGroup;
 export const Button = ({
   id,
   active,
+  ariaChecked,
+  ariaCurrent,
   children,
   className,
   disabled,
   href,
   icon,
-  onClick
+  onClick,
+  role
 }) => {
   const classes = [`${baseClass}__button`, disabled && `${baseClass}__disabled`, active && `${baseClass}__button--selected`, className].filter(Boolean).join(' ');
   // Always render icon element - CSS hides it outside RadioGroup/MenuItem
@@ -68,6 +83,8 @@ export const Button = ({
   if (!disabled) {
     if (href) {
       return /*#__PURE__*/_jsxs(Link, {
+        "aria-checked": ariaChecked,
+        "aria-current": ariaCurrent,
         className: classes,
         href: href,
         id: id,
@@ -77,6 +94,8 @@ export const Button = ({
           }
         },
         prefetch: false,
+        role: role ?? 'menuitem',
+        tabIndex: -1,
         children: [iconElement, /*#__PURE__*/_jsx("span", {
           className: `${baseClass}__label`,
           children: children
@@ -85,6 +104,8 @@ export const Button = ({
     }
     if (onClick) {
       return /*#__PURE__*/_jsxs("button", {
+        "aria-checked": ariaChecked,
+        "aria-current": ariaCurrent,
         className: classes,
         id: id,
         onClick: e => {
@@ -92,6 +113,8 @@ export const Button = ({
             onClick(e);
           }
         },
+        role: role ?? 'menuitem',
+        tabIndex: -1,
         type: "button",
         children: [iconElement, /*#__PURE__*/_jsx("span", {
           className: `${baseClass}__label`,
@@ -100,9 +123,21 @@ export const Button = ({
       });
     }
   }
-  return /*#__PURE__*/_jsxs("div", {
+  return /*#__PURE__*/_jsxs("button", {
+    "aria-current": ariaCurrent,
+    "aria-disabled": "true",
     className: classes,
+    "data-popup-prevent-close": true,
     id: id,
+    onClick: event => event.preventDefault(),
+    onKeyDown: event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+      }
+    },
+    role: role ?? 'menuitem',
+    tabIndex: -1,
+    type: "button",
     children: [iconElement, /*#__PURE__*/_jsx("span", {
       className: `${baseClass}__label`,
       children: children
@@ -116,10 +151,24 @@ export const Button = ({
 export const RadioGroupItem = props => {
   return /*#__PURE__*/_jsx(Button, {
     ...props,
+    ariaChecked: Boolean(props.active),
+    className: [`${baseClass}__button--radio-group-item`, props.className].filter(Boolean).join(' '),
+    icon: props.active ? /*#__PURE__*/_jsx(CheckIcon, {
+      size: 16
+    }) : undefined,
+    role: "menuitemradio"
+  });
+};
+/** A Button variant for independently selectable items within CheckboxGroup. */
+export const CheckboxGroupItem = props => {
+  return /*#__PURE__*/_jsx(Button, {
+    ...props,
+    ariaChecked: Boolean(props.active),
     className: [`${baseClass}__button--radio-group-item`, props.className].filter(Boolean).join(' '),
     icon: props.active ? /*#__PURE__*/_jsx(CheckIcon, {
       size: 16
-    }) : undefined
+    }) : undefined,
+    role: "menuitemcheckbox"
   });
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/Popup/PopupButtonList/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","CheckIcon","Link","baseClass","PopupListDivider","Divider","PopupListGroupLabel","GroupLabel","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","_jsx","MenuItem","size","RadioGroup","Button","id","active","disabled","href","icon","onClick","iconElement","_jsxs","e","prefetch","type","RadioGroupItem","props","undefined"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\nimport type { LinkAdapterProps } from 'payload'\n\nimport * as React from 'react'\n\nimport { CheckIcon } from '../../../icons/Check/index.js'\nimport { Link } from '../../Link/index.js'\nimport './index.css'\n\nconst baseClass = 'popup-button-list'\n\nexport { PopupListDivider as Divider } from '../PopupDivider/index.js'\nexport { PopupListGroupLabel as GroupLabel } from '../PopupGroupLabel/index.js'\n\nexport const ButtonGroup: React.FC<{\n  buttonSize?: 'default' | 'medium'\n  children: React.ReactNode\n  className?: string\n  textAlign?: 'center' | 'left' | 'right'\n}> = ({ buttonSize = 'default', children, className, textAlign = 'left' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}__text-align--${textAlign}`,\n    `${baseClass}__button-size--${buttonSize}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <div className={classes}>{children}</div>\n}\n\n/**\n * A ButtonGroup variant for action menu items.\n * @param size - 'large' for 24px icons (default), 'small' for 16px icons\n */\nexport const MenuItem: React.FC<{\n  children: React.ReactNode\n  className?: string\n  size?: 'large' | 'small'\n}> = ({ children, className, size = 'large' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--with-actions`,\n    size === 'large' && `${baseClass}--large`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <div className={classes}>{children}</div>\n}\n\n/**\n * A ButtonGroup variant for radio-style selection items.\n * Uses 16px icons with padding on label - ideal for checkbox/selection rows.\n */\nexport const RadioGroup: React.FC<{\n  children: React.ReactNode\n  className?: string\n}> = ({ children, className }) => {\n  const classes = [baseClass, className, `${baseClass}--with-icons`].filter(Boolean).join(' ')\n  return <div className={classes}>{children}</div>\n}\n\ntype MenuButtonProps = {\n  active?: boolean\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  href?: LinkAdapterProps['href']\n  icon?: React.ReactNode\n  id?: string\n  onClick?: (e?: React.MouseEvent) => void\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n  id,\n  active,\n  children,\n  className,\n  disabled,\n  href,\n  icon,\n  onClick,\n}) => {\n  const classes = [\n    `${baseClass}__button`,\n    disabled && `${baseClass}__disabled`,\n    active && `${baseClass}__button--selected`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  // Always render icon element - CSS hides it outside RadioGroup/MenuItem\n  const iconElement = <span className={`${baseClass}__icon`}>{icon}</span>\n\n  if (!disabled) {\n    if (href) {\n      return (\n        <Link\n          className={classes}\n          href={href}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          prefetch={false}\n        >\n          {iconElement}\n          <span className={`${baseClass}__label`}>{children}</span>\n        </Link>\n      )\n    }\n\n    if (onClick) {\n      return (\n        <button\n          className={classes}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          type=\"button\"\n        >\n          {iconElement}\n          <span className={`${baseClass}__label`}>{children}</span>\n        </button>\n      )\n    }\n  }\n\n  return (\n    <div className={classes} id={id}>\n      {iconElement}\n      <span className={`${baseClass}__label`}>{children}</span>\n    </div>\n  )\n}\n\n/**\n * A Button variant for use within RadioGroup.\n * Automatically shows a checkmark icon when active.\n */\nexport const RadioGroupItem: React.FC<Omit<MenuButtonProps, 'icon'>> = (props) => {\n  return (\n    <Button\n      {...props}\n      className={[`${baseClass}__button--radio-group-item`, props.className]\n        .filter(Boolean)\n        .join(' ')}\n      icon={props.active ? <CheckIcon size={16} /> : undefined}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","CheckIcon","Link","baseClass","Group","children","className","role","_jsx","PopupListDivider","Divider","PopupListGroupLabel","GroupLabel","SubmenuTrigger","ButtonGroup","buttonSize","textAlign","classes","filter","Boolean","join","MenuItem","size","RadioGroup","CheckboxGroup","Button","id","active","ariaChecked","ariaCurrent","disabled","href","icon","onClick","iconElement","_jsxs","e","prefetch","tabIndex","type","event","preventDefault","onKeyDown","key","RadioGroupItem","props","undefined","CheckboxGroupItem"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\nimport type { LinkAdapterProps } from 'payload'\n\nimport * as React from 'react'\n\nimport { CheckIcon } from '../../../icons/Check/index.js'\nimport { Link } from '../../Link/index.js'\nimport './index.css'\n\nconst baseClass = 'popup-button-list'\n\nconst Group: React.FC<{\n  children: React.ReactNode\n  className?: string\n  role?: 'group'\n}> = ({ children, className, role }) => (\n  <div className={className} role={role}>\n    {children}\n  </div>\n)\n\nexport { PopupListDivider as Divider } from '../PopupDivider/index.js'\nexport { PopupListGroupLabel as GroupLabel } from '../PopupGroupLabel/index.js'\nexport { SubmenuTrigger } from './SubmenuTrigger/index.js'\n\nexport const ButtonGroup: React.FC<{\n  buttonSize?: 'default' | 'medium'\n  children: React.ReactNode\n  className?: string\n  textAlign?: 'center' | 'left' | 'right'\n}> = ({ buttonSize = 'default', children, className, textAlign = 'left' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}__text-align--${textAlign}`,\n    `${baseClass}__button-size--${buttonSize}`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <Group className={classes}>{children}</Group>\n}\n\n/**\n * A ButtonGroup variant for action menu items.\n * @param size - 'large' for 24px icons (default), 'small' for 16px icons\n */\nexport const MenuItem: React.FC<{\n  children: React.ReactNode\n  className?: string\n  size?: 'large' | 'small'\n}> = ({ children, className, size = 'large' }) => {\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--with-actions`,\n    size === 'large' && `${baseClass}--large`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n  return <Group className={classes}>{children}</Group>\n}\n\n/**\n * A ButtonGroup variant for radio-style selection items.\n * Uses 16px icons with padding on label - ideal for checkbox/selection rows.\n */\nexport const RadioGroup: React.FC<{\n  children: React.ReactNode\n  className?: string\n}> = ({ children, className }) => {\n  const classes = [baseClass, className, `${baseClass}--with-icons`].filter(Boolean).join(' ')\n  return (\n    <Group className={classes} role=\"group\">\n      {children}\n    </Group>\n  )\n}\n\nexport const CheckboxGroup = RadioGroup\n\ntype MenuButtonProps = {\n  active?: boolean\n  ariaChecked?: boolean\n  ariaCurrent?: React.AriaAttributes['aria-current']\n  children: React.ReactNode\n  className?: string\n  disabled?: boolean\n  href?: LinkAdapterProps['href']\n  icon?: React.ReactNode\n  id?: string\n  onClick?: (e?: React.MouseEvent) => void\n  role?: 'menuitem' | 'menuitemcheckbox' | 'menuitemradio'\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n  id,\n  active,\n  ariaChecked,\n  ariaCurrent,\n  children,\n  className,\n  disabled,\n  href,\n  icon,\n  onClick,\n  role,\n}) => {\n  const classes = [\n    `${baseClass}__button`,\n    disabled && `${baseClass}__disabled`,\n    active && `${baseClass}__button--selected`,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  // Always render icon element - CSS hides it outside RadioGroup/MenuItem\n  const iconElement = <span className={`${baseClass}__icon`}>{icon}</span>\n\n  if (!disabled) {\n    if (href) {\n      return (\n        <Link\n          aria-checked={ariaChecked}\n          aria-current={ariaCurrent}\n          className={classes}\n          href={href}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          prefetch={false}\n          role={role ?? 'menuitem'}\n          tabIndex={-1}\n        >\n          {iconElement}\n          <span className={`${baseClass}__label`}>{children}</span>\n        </Link>\n      )\n    }\n\n    if (onClick) {\n      return (\n        <button\n          aria-checked={ariaChecked}\n          aria-current={ariaCurrent}\n          className={classes}\n          id={id}\n          onClick={(e) => {\n            if (onClick) {\n              onClick(e)\n            }\n          }}\n          role={role ?? 'menuitem'}\n          tabIndex={-1}\n          type=\"button\"\n        >\n          {iconElement}\n          <span className={`${baseClass}__label`}>{children}</span>\n        </button>\n      )\n    }\n  }\n\n  return (\n    <button\n      aria-current={ariaCurrent}\n      aria-disabled=\"true\"\n      className={classes}\n      data-popup-prevent-close\n      id={id}\n      onClick={(event) => event.preventDefault()}\n      onKeyDown={(event) => {\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault()\n        }\n      }}\n      role={role ?? 'menuitem'}\n      tabIndex={-1}\n      type=\"button\"\n    >\n      {iconElement}\n      <span className={`${baseClass}__label`}>{children}</span>\n    </button>\n  )\n}\n\n/**\n * A Button variant for use within RadioGroup.\n * Automatically shows a checkmark icon when active.\n */\nexport const RadioGroupItem: React.FC<Omit<MenuButtonProps, 'icon'>> = (props) => {\n  return (\n    <Button\n      {...props}\n      ariaChecked={Boolean(props.active)}\n      className={[`${baseClass}__button--radio-group-item`, props.className]\n        .filter(Boolean)\n        .join(' ')}\n      icon={props.active ? <CheckIcon size={16} /> : undefined}\n      role=\"menuitemradio\"\n    />\n  )\n}\n\n/** A Button variant for independently selectable items within CheckboxGroup. */\nexport const CheckboxGroupItem: React.FC<Omit<MenuButtonProps, 'icon'>> = (props) => {\n  return (\n    <Button\n      {...props}\n      ariaChecked={Boolean(props.active)}\n      className={[`${baseClass}__button--radio-group-item`, props.className]\n        .filter(Boolean)\n        .join(' ')}\n      icon={props.active ? <CheckIcon size={16} /> : undefined}\n      role=\"menuitemcheckbox\"\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Popup/PopupGroupLabel/index.css

@@ -1,7 +1,6 @@
 @layer payload-default {
   .popup-list-group-label {
     color: var(--color-text-secondary);
-    font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
     font-weight: var(--text-body-medium-font-weight);
     letter-spacing: var(--text-body-medium-letter-spacing);

package/dist/elements/Popup/PopupTrigger/index.d.ts

@@ -1,11 +1,15 @@
+import type { AriaAttributes } from 'react';
 import React from 'react';
 import './index.css';
 export type PopupButtonRenderProps = {
     active: boolean;
-    'aria-expanded': boolean;
-    'aria-haspopup': true;
+    'aria-controls': AriaAttributes['aria-controls'];
+    'aria-expanded': AriaAttributes['aria-expanded'];
+    'aria-haspopup'?: AriaAttributes['aria-haspopup'];
     onClick: React.MouseEventHandler;
     onKeyDown: React.KeyboardEventHandler;
+    role?: 'menuitem';
+    tabIndex?: -1;
 };
 export type PopupTriggerProps = {
     active: boolean;
@@ -13,8 +17,11 @@ export type PopupTriggerProps = {
     buttonAriaLabel?: string;
     buttonType: 'custom' | 'default';
     className?: string;
+    contentId: string;
     disabled?: boolean;
+    isMenuItem?: boolean;
     noBackground?: boolean;
+    popupType?: AriaAttributes['aria-haspopup'];
     renderButton?: (props: PopupButtonRenderProps) => React.ReactNode;
     setActive: (active: boolean, viaKeyboard?: boolean) => void;
     size?: 'large' | 'medium';

package/dist/elements/Popup/PopupTrigger/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,eAAe,EAAE,OAAO,CAAA;IACxB,eAAe,EAAE,IAAI,CAAA;IACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;CACtC,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgFpD,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,sBAAsB,GAAG;IACnC,MAAM,EAAE,OAAO,CAAA;IACf,eAAe,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAChD,eAAe,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAChD,eAAe,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IACjD,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;IAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;IACrC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAA;CACd,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkJpD,CAAA"}

package/dist/elements/Popup/PopupTrigger/index.js

@@ -11,17 +11,36 @@ export const PopupTrigger = props => {
     buttonAriaLabel,
     buttonType,
     className,
+    contentId,
     disabled,
+    isMenuItem,
     noBackground,
+    popupType,
     renderButton,
     setActive,
     size
   } = props;
   const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`, size && `${baseClass}--size-${size}`, disabled && `${baseClass}--disabled`, active && `${baseClass}--active`].filter(Boolean).join(' ');
-  const handleClick = () => {
+  const handleClick = event => {
+    if (disabled) {
+      event.preventDefault();
+      return;
+    }
     setActive(!active, false);
   };
   const handleKeyDown = e => {
+    if (e.key === 'Escape' && active) {
+      e.preventDefault();
+      e.stopPropagation();
+      setActive(false);
+      return;
+    }
+    if (disabled) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+      }
+      return;
+    }
     if (e.key === 'Enter' || e.key === ' ') {
       e.preventDefault();
       setActive(!active, true);
@@ -32,31 +51,64 @@ export const PopupTrigger = props => {
     return /*#__PURE__*/_jsx(_Fragment, {
       children: renderButton({
         active,
+        'aria-controls': contentId,
         'aria-expanded': active,
-        'aria-haspopup': true,
+        'aria-haspopup': popupType,
         onClick: handleClick,
-        onKeyDown: handleKeyDown
+        onKeyDown: handleKeyDown,
+        role: isMenuItem ? 'menuitem' : undefined,
+        tabIndex: isMenuItem ? -1 : undefined
       })
     });
   }
   if (buttonType === 'custom') {
+    if (/*#__PURE__*/React.isValidElement(button)) {
+      const originalOnClick = button.props.onClick;
+      const originalOnKeyDown = button.props.onKeyDown;
+      // Apply the trigger contract to the supplied control instead of adding another interactive wrapper.
+      // eslint-disable-next-line @eslint-react/no-clone-element
+      return /*#__PURE__*/React.cloneElement(button, {
+        'aria-controls': contentId,
+        'aria-expanded': active,
+        'aria-haspopup': popupType,
+        'aria-label': buttonAriaLabel ?? button.props['aria-label'],
+        className: [classes, button.props.className].filter(Boolean).join(' '),
+        onClick: event => {
+          originalOnClick?.(event);
+          handleClick(event);
+        },
+        onKeyDown: event => {
+          originalOnKeyDown?.(event);
+          handleKeyDown(event);
+        },
+        role: isMenuItem ? 'menuitem' : button.props.role,
+        tabIndex: isMenuItem ? -1 : button.props.tabIndex ?? 0
+      });
+    }
     return /*#__PURE__*/_jsx("div", {
+      "aria-controls": contentId,
+      "aria-expanded": active,
+      "aria-haspopup": popupType,
       "aria-label": buttonAriaLabel,
       className: classes,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
-      role: "button",
-      tabIndex: 0,
+      role: isMenuItem ? 'menuitem' : 'button',
+      tabIndex: isMenuItem ? -1 : 0,
       children: button
     });
   }
   return /*#__PURE__*/_jsx("button", {
+    "aria-controls": contentId,
+    "aria-expanded": active,
+    "aria-haspopup": popupType,
     "aria-label": buttonAriaLabel,
     className: classes,
     disabled: disabled,
     onClick: handleClick,
     onKeyDown: handleKeyDown,
-    tabIndex: 0,
+    role: isMenuItem ? 'menuitem' : undefined,
+    tabIndex: isMenuItem ? -1 : 0,
     type: "button",
     children: button
   });

package/dist/elements/Popup/PopupTrigger/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonAriaLabel","buttonType","className","disabled","noBackground","renderButton","setActive","size","classes","filter","Boolean","join","handleClick","handleKeyDown","e","key","preventDefault","_jsx","_Fragment","onClick","onKeyDown","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-button'\n\nexport type PopupButtonRenderProps = {\n  active: boolean\n  'aria-expanded': boolean\n  'aria-haspopup': true\n  onClick: React.MouseEventHandler\n  onKeyDown: React.KeyboardEventHandler\n}\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button?: React.ReactNode\n  buttonAriaLabel?: string\n  buttonType: 'custom' | 'default'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  renderButton?: (props: PopupButtonRenderProps) => React.ReactNode\n  setActive: (active: boolean, viaKeyboard?: boolean) => void\n  size?: 'large' | 'medium'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const {\n    active,\n    button,\n    buttonAriaLabel,\n    buttonType,\n    className,\n    disabled,\n    noBackground,\n    renderButton,\n    setActive,\n    size,\n  } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n    active && `${baseClass}--active`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick: React.MouseEventHandler = () => {\n    setActive(!active, false)\n  }\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setActive(!active, true)\n    }\n  }\n\n  // Render prop mode: consumer provides the button, we provide the handlers\n  if (renderButton) {\n    return (\n      <>\n        {renderButton({\n          active,\n          'aria-expanded': active,\n          'aria-haspopup': true,\n          onClick: handleClick,\n          onKeyDown: handleKeyDown,\n        })}\n      </>\n    )\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        aria-label={buttonAriaLabel}\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      aria-label={buttonAriaLabel}\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,MAAW;AAElB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAuBlB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IACJC,MAAM;IACNC,MAAM;IACNC,eAAe;IACfC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,SAAS;IACTC;EAAI,CACL,GAAGV,KAAA;EAEJ,MAAMW,OAAA,GAAU,CACdb,SAAA,EACAO,SAAA,EACA,GAAGP,SAAA,KAAcM,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGT,SAAA,cAAuB,EAC3CY,IAAA,IAAQ,GAAGZ,SAAA,UAAmBY,IAAA,EAAM,EACpCJ,QAAA,IAAY,GAAGR,SAAA,YAAqB,EACpCG,MAAA,IAAU,GAAGH,SAAA,UAAmB,CACjC,CACEc,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAuCA,CAAA;IAC3CN,SAAA,CAAU,CAACR,MAAA,EAAQ;EACrB;EAEA,MAAMe,aAAA,GAA6CC,CAAA;IACjD,IAAIA,CAAA,CAAEC,GAAG,KAAK,WAAWD,CAAA,CAAEC,GAAG,KAAK,KAAK;MACtCD,CAAA,CAAEE,cAAc;MAChBV,SAAA,CAAU,CAACR,MAAA,EAAQ;IACrB;EACF;EAEA;EACA,IAAIO,YAAA,EAAc;IAChB,oBACEY,IAAA,CAAAC,SAAA;gBACGb,YAAA,CAAa;QACZP,MAAA;QACA,iBAAiBA,MAAA;QACjB,iBAAiB;QACjBqB,OAAA,EAASP,WAAA;QACTQ,SAAA,EAAWP;MACb;;EAGN;EAEA,IAAIZ,UAAA,KAAe,UAAU;IAC3B,oBACEgB,IAAA,CAAC;MACC,cAAYjB,eAAA;MACZE,SAAA,EAAWM,OAAA;MACXW,OAAA,EAASP,WAAA;MACTQ,SAAA,EAAWP,aAAA;MACXQ,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETvB;;EAGP;EAEA,oBACEkB,IAAA,CAAC;IACC,cAAYjB,eAAA;IACZE,SAAA,EAAWM,OAAA;IACXL,QAAA,EAAUA,QAAA;IACVgB,OAAA,EAASP,WAAA;IACTQ,SAAA,EAAWP,aAAA;IACXS,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJxB;;AAGP","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonAriaLabel","buttonType","className","contentId","disabled","isMenuItem","noBackground","popupType","renderButton","setActive","size","classes","filter","Boolean","join","handleClick","event","preventDefault","handleKeyDown","e","key","stopPropagation","_jsx","_Fragment","onClick","onKeyDown","role","undefined","tabIndex","isValidElement","originalOnClick","originalOnKeyDown","cloneElement","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport type { AriaAttributes } from 'react'\n\nimport React from 'react'\n\nimport './index.css'\n\nconst baseClass = 'popup-button'\n\nexport type PopupButtonRenderProps = {\n  active: boolean\n  'aria-controls': AriaAttributes['aria-controls']\n  'aria-expanded': AriaAttributes['aria-expanded']\n  'aria-haspopup'?: AriaAttributes['aria-haspopup']\n  onClick: React.MouseEventHandler\n  onKeyDown: React.KeyboardEventHandler\n  role?: 'menuitem'\n  tabIndex?: -1\n}\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button?: React.ReactNode\n  buttonAriaLabel?: string\n  buttonType: 'custom' | 'default'\n  className?: string\n  contentId: string\n  disabled?: boolean\n  isMenuItem?: boolean\n  noBackground?: boolean\n  popupType?: AriaAttributes['aria-haspopup']\n  renderButton?: (props: PopupButtonRenderProps) => React.ReactNode\n  setActive: (active: boolean, viaKeyboard?: boolean) => void\n  size?: 'large' | 'medium'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const {\n    active,\n    button,\n    buttonAriaLabel,\n    buttonType,\n    className,\n    contentId,\n    disabled,\n    isMenuItem,\n    noBackground,\n    popupType,\n    renderButton,\n    setActive,\n    size,\n  } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n    size && `${baseClass}--size-${size}`,\n    disabled && `${baseClass}--disabled`,\n    active && `${baseClass}--active`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick: React.MouseEventHandler = (event) => {\n    if (disabled) {\n      event.preventDefault()\n      return\n    }\n    setActive(!active, false)\n  }\n\n  const handleKeyDown: React.KeyboardEventHandler = (e) => {\n    if (e.key === 'Escape' && active) {\n      e.preventDefault()\n      e.stopPropagation()\n      setActive(false)\n      return\n    }\n    if (disabled) {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n      }\n      return\n    }\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setActive(!active, true)\n    }\n  }\n\n  // Render prop mode: consumer provides the button, we provide the handlers\n  if (renderButton) {\n    return (\n      <>\n        {renderButton({\n          active,\n          'aria-controls': contentId,\n          'aria-expanded': active,\n          'aria-haspopup': popupType,\n          onClick: handleClick,\n          onKeyDown: handleKeyDown,\n          role: isMenuItem ? 'menuitem' : undefined,\n          tabIndex: isMenuItem ? -1 : undefined,\n        })}\n      </>\n    )\n  }\n\n  if (buttonType === 'custom') {\n    if (\n      React.isValidElement<{\n        'aria-controls'?: AriaAttributes['aria-controls']\n        'aria-expanded'?: AriaAttributes['aria-expanded']\n        'aria-haspopup'?: AriaAttributes['aria-haspopup']\n        'aria-label'?: string\n        className?: string\n        onClick?: React.MouseEventHandler\n        onKeyDown?: React.KeyboardEventHandler\n        role?: React.AriaRole\n        tabIndex?: number\n      }>(button)\n    ) {\n      const originalOnClick = button.props.onClick\n      const originalOnKeyDown = button.props.onKeyDown\n\n      // Apply the trigger contract to the supplied control instead of adding another interactive wrapper.\n      // eslint-disable-next-line @eslint-react/no-clone-element\n      return React.cloneElement(button, {\n        'aria-controls': contentId,\n        'aria-expanded': active,\n        'aria-haspopup': popupType,\n        'aria-label': buttonAriaLabel ?? button.props['aria-label'],\n        className: [classes, button.props.className].filter(Boolean).join(' '),\n        onClick: (event) => {\n          originalOnClick?.(event)\n          handleClick(event)\n        },\n        onKeyDown: (event) => {\n          originalOnKeyDown?.(event)\n          handleKeyDown(event)\n        },\n        role: isMenuItem ? 'menuitem' : button.props.role,\n        tabIndex: isMenuItem ? -1 : (button.props.tabIndex ?? 0),\n      })\n    }\n\n    return (\n      <div\n        aria-controls={contentId}\n        aria-expanded={active}\n        aria-haspopup={popupType}\n        aria-label={buttonAriaLabel}\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={handleKeyDown}\n        role={isMenuItem ? 'menuitem' : 'button'}\n        tabIndex={isMenuItem ? -1 : 0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button\n      aria-controls={contentId}\n      aria-expanded={active}\n      aria-haspopup={popupType}\n      aria-label={buttonAriaLabel}\n      className={classes}\n      disabled={disabled}\n      onClick={handleClick}\n      onKeyDown={handleKeyDown}\n      role={isMenuItem ? 'menuitem' : undefined}\n      tabIndex={isMenuItem ? -1 : 0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/Popup/SubmenuScope.d.ts

@@ -0,0 +1,19 @@
+export type SubmenuNode = {
+    closeBranch: () => void;
+    id: string;
+    isPointerProtected?: () => boolean;
+    open: (viaKeyboard: boolean) => void;
+};
+export type SubmenuScope = {
+    activeChildId: null | string;
+    closeActiveBranch: () => void;
+    register: (node: SubmenuNode) => () => void;
+    release: (id: string) => void;
+    requestOpen: (args: {
+        id: string;
+        viaKeyboard?: boolean;
+        viaPointer?: boolean;
+    }) => void;
+};
+export declare const createSubmenuScope: () => SubmenuScope;
+//# sourceMappingURL=SubmenuScope.d.ts.map

package/dist/elements/Popup/SubmenuScope.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmenuScope.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/SubmenuScope.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IACxB,WAAW,EAAE,MAAM,IAAI,CAAA;IACvB,EAAE,EAAE,MAAM,CAAA;IACV,kBAAkB,CAAC,EAAE,MAAM,OAAO,CAAA;IAClC,IAAI,EAAE,CAAC,WAAW,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,EAAE,IAAI,GAAG,MAAM,CAAA;IAC5B,iBAAiB,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,MAAM,IAAI,CAAA;IAC3C,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,WAAW,EAAE,CAAC,IAAI,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,OAAO,CAAC;QAAC,UAAU,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;CACzF,CAAA;AAED,eAAO,MAAM,kBAAkB,QAAO,YAyCrC,CAAA"}

package/dist/elements/Popup/SubmenuScope.js

@@ -0,0 +1,45 @@
+export const createSubmenuScope = () => {
+  const nodes = new Map();
+  let activeChildId = null;
+  return {
+    get activeChildId() {
+      return activeChildId;
+    },
+    closeActiveBranch: () => {
+      nodes.get(activeChildId ?? '')?.closeBranch();
+      activeChildId = null;
+    },
+    register: node => {
+      nodes.set(node.id, node);
+      return () => {
+        if (activeChildId === node.id) {
+          activeChildId = null;
+        }
+        nodes.delete(node.id);
+      };
+    },
+    release: id => {
+      if (activeChildId === id) {
+        activeChildId = null;
+      }
+    },
+    requestOpen: ({
+      id,
+      viaKeyboard = false,
+      viaPointer = false
+    }) => {
+      if (activeChildId === id) {
+        return;
+      }
+      const node = nodes.get(id);
+      const activeNode = nodes.get(activeChildId ?? '');
+      if (!node || viaPointer && activeNode?.isPointerProtected?.()) {
+        return;
+      }
+      activeNode?.closeBranch();
+      activeChildId = id;
+      node.open(viaKeyboard);
+    }
+  };
+};
+//# sourceMappingURL=SubmenuScope.js.map

package/dist/elements/Popup/SubmenuScope.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubmenuScope.js","names":["createSubmenuScope","nodes","Map","activeChildId","closeActiveBranch","get","closeBranch","register","node","set","id","delete","release","requestOpen","viaKeyboard","viaPointer","activeNode","isPointerProtected","open"],"sources":["../../../src/elements/Popup/SubmenuScope.ts"],"sourcesContent":["export type SubmenuNode = {\n  closeBranch: () => void\n  id: string\n  isPointerProtected?: () => boolean\n  open: (viaKeyboard: boolean) => void\n}\n\nexport type SubmenuScope = {\n  activeChildId: null | string\n  closeActiveBranch: () => void\n  register: (node: SubmenuNode) => () => void\n  release: (id: string) => void\n  requestOpen: (args: { id: string; viaKeyboard?: boolean; viaPointer?: boolean }) => void\n}\n\nexport const createSubmenuScope = (): SubmenuScope => {\n  const nodes = new Map<string, SubmenuNode>()\n  let activeChildId: null | string = null\n\n  return {\n    get activeChildId() {\n      return activeChildId\n    },\n    closeActiveBranch: () => {\n      nodes.get(activeChildId ?? '')?.closeBranch()\n      activeChildId = null\n    },\n    register: (node) => {\n      nodes.set(node.id, node)\n      return () => {\n        if (activeChildId === node.id) {\n          activeChildId = null\n        }\n        nodes.delete(node.id)\n      }\n    },\n    release: (id) => {\n      if (activeChildId === id) {\n        activeChildId = null\n      }\n    },\n    requestOpen: ({ id, viaKeyboard = false, viaPointer = false }) => {\n      if (activeChildId === id) {\n        return\n      }\n      const node = nodes.get(id)\n      const activeNode = nodes.get(activeChildId ?? '')\n\n      if (!node || (viaPointer && activeNode?.isPointerProtected?.())) {\n        return\n      }\n      activeNode?.closeBranch()\n      activeChildId = id\n      node.open(viaKeyboard)\n    },\n  }\n}\n"],"mappings":"AAeA,OAAO,MAAMA,kBAAA,GAAqBA,CAAA;EAChC,MAAMC,KAAA,GAAQ,IAAIC,GAAA;EAClB,IAAIC,aAAA,GAA+B;EAEnC,OAAO;IACL,IAAIA,cAAA,EAAgB;MAClB,OAAOA,aAAA;IACT;IACAC,iBAAA,EAAmBA,CAAA;MACjBH,KAAA,CAAMI,GAAG,CAACF,aAAA,IAAiB,KAAKG,WAAA;MAChCH,aAAA,GAAgB;IAClB;IACAI,QAAA,EAAWC,IAAA;MACTP,KAAA,CAAMQ,GAAG,CAACD,IAAA,CAAKE,EAAE,EAAEF,IAAA;MACnB,OAAO;QACL,IAAIL,aAAA,KAAkBK,IAAA,CAAKE,EAAE,EAAE;UAC7BP,aAAA,GAAgB;QAClB;QACAF,KAAA,CAAMU,MAAM,CAACH,IAAA,CAAKE,EAAE;MACtB;IACF;IACAE,OAAA,EAAUF,EAAA;MACR,IAAIP,aAAA,KAAkBO,EAAA,EAAI;QACxBP,aAAA,GAAgB;MAClB;IACF;IACAU,WAAA,EAAaA,CAAC;MAAEH,EAAE;MAAEI,WAAA,GAAc,KAAK;MAAEC,UAAA,GAAa;IAAK,CAAE;MAC3D,IAAIZ,aAAA,KAAkBO,EAAA,EAAI;QACxB;MACF;MACA,MAAMF,IAAA,GAAOP,KAAA,CAAMI,GAAG,CAACK,EAAA;MACvB,MAAMM,UAAA,GAAaf,KAAA,CAAMI,GAAG,CAACF,aAAA,IAAiB;MAE9C,IAAI,CAACK,IAAA,IAASO,UAAA,IAAcC,UAAA,EAAYC,kBAAA,MAAyB;QAC/D;MACF;MACAD,UAAA,EAAYV,WAAA;MACZH,aAAA,GAAgBO,EAAA;MAChBF,IAAA,CAAKU,IAAI,CAACJ,WAAA;IACZ;EACF;AACF","ignoreList":[]}

package/dist/elements/Popup/index.css

@@ -14,6 +14,11 @@
     display: contents;
   }
 
+  .popup__submenu-hover-watch {
+    flex: 1;
+    min-width: 0;
+  }
+
   .popup__hidden-content {
     position: absolute;
     top: -9999px;
@@ -33,8 +38,10 @@
     color: var(--popup-text, var(--color-text));
     border-radius: var(--popup-radius);
     min-width: 80px;
-    max-width: 400px;
+    max-width: min(calc(var(--spacer-6) * 10), calc(100vw - var(--spacer-3)));
     box-shadow: var(--elevation-400-menu-panel);
+    border: 0;
+    margin: 0;
   }
 
   .popup__content[data-theme='dark'] {
@@ -42,6 +49,21 @@
     color: var(--popup-text, var(--color-text-ontooltip));
   }
 
+  .popup__content[data-submenu-safe-area] {
+    overflow: visible;
+  }
+
+  .popup__content[data-submenu-safe-area]::before {
+    /* Debug safe area: uncomment to show the protected path.
+    background-color: color-mix(in srgb, var(--color-bg-assistive) 35%, transparent);
+    */
+    content: '';
+    position: fixed;
+    inset: 0;
+    clip-path: var(--popup-safe-area);
+    pointer-events: none;
+  }
+
   .popup__content.popup--size-small {
     min-width: 80px;
   }
@@ -57,7 +79,7 @@
   .popup__scroll-container {
     overflow-x: hidden;
     overflow-y: auto;
-    max-height: calc(var(--spacer-5) * 10);
+    max-height: min(calc(var(--spacer-5) * 10), calc(100vh - var(--spacer-3)));
     padding: var(--spacer-2) 0;
   }
 

package/dist/elements/Popup/index.d.ts

@@ -1,49 +1,37 @@
-import type { CSSProperties } from 'react';
+import type { AriaAttributes, CSSProperties } from 'react';
 export * as PopupList from './PopupButtonList/index.js';
 import React from 'react';
 import './index.css';
+import { type PopupButtonRenderProps } from './PopupTrigger/index.js';
 export type PopupProps = {
     backgroundColor?: CSSProperties['backgroundColor'];
     boundingRef?: React.RefObject<HTMLElement>;
     button?: React.ReactNode;
-    /**
-     * Accessible label for the trigger button.
-     * Necessary when the button has an icon-only content,
-     * so the button has an accessible name for screen readers.
-     */
     buttonAriaLabel?: string;
-    /**
-     * The class name to apply to the button that triggers the popup.
-     */
     buttonClassName?: string;
     buttonSize?: 'large' | 'medium';
     buttonType?: 'custom' | 'default';
     caret?: boolean;
     children?: React.ReactNode;
-    /**
-     * The class name to apply to the popup container containing the trigger.
-     * This does not wrap the actual popup content, which is rendered in a portal.
-     */
     className?: string;
     disabled?: boolean;
-    /**
-     * Force control the open state of the popup, regardless of the trigger.
-     */
     forceOpen?: boolean;
     /**
      * Preferred horizontal alignment of the popup, if there is enough space available.
+     * Nested menu popups use 'left' and 'right' as their preferred side instead.
+     * When omitted, nested menu popups prefer the right side.
      *
      * @default 'left'
      */
     horizontalAlign?: 'center' | 'left' | 'right';
+    hoverSubmenu?: boolean;
     id?: string;
     initActive?: boolean;
     noBackground?: boolean;
     onToggleClose?: () => void;
     onToggleOpen?: (active: boolean) => void;
-    /**
-     * Class name to apply to the portal container.
-     */
+    popupAriaLabel?: string;
+    popupType?: AriaAttributes['aria-haspopup'];
     portalClassName?: string;
     render?: (args: {
         close: () => void;
@@ -52,13 +40,7 @@ export type PopupProps = {
      * Render prop for custom trigger button. Receives onClick/onKeyDown/aria props.
      * When provided, `button` and `buttonType` are ignored.
      */
-    renderButton?: (props: {
-        active: boolean;
-        'aria-expanded': boolean;
-        'aria-haspopup': true;
-        onClick: React.MouseEventHandler;
-        onKeyDown: React.KeyboardEventHandler;
-    }) => React.ReactNode;
+    renderButton?: (props: PopupButtonRenderProps) => React.ReactNode;
     showOnHover?: boolean;
     /**
      * By default, the scrollbar is hidden. If you want to show it, set this to true.
@@ -96,7 +78,7 @@ export type PopupProps = {
 /**
  * Component that renders a popup, as well as a button that triggers the popup.
  *
- * The popup is rendered in a portal, and is automatically positioned above / below the trigger,
+ * The popup is rendered next to its trigger in the DOM and positioned above / below it,
  * depending on the verticalAlign prop and the space available.
  */
 export declare const Popup: React.FC<PopupProps>;

package/dist/elements/Popup/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KAAuE,MAAM,OAAO,CAAA;AAK3F,OAAO,aAAa,CAAA;AA4CpB,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;OAIG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE;QACrB,MAAM,EAAE,OAAO,CAAA;QACf,eAAe,EAAE,OAAO,CAAA;QACxB,eAAe,EAAE,IAAI,CAAA;QACrB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAA;QAChC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAA;KACtC,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAsftC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Popup/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAY,aAAa,EAAE,MAAM,OAAO,CAAA;AAEpE,OAAO,KAAK,SAAS,MAAM,4BAA4B,CAAA;AAEvD,OAAO,KASN,MAAM,OAAO,CAAA;AAKd,OAAO,aAAa,CAAA;AACpB,OAAO,EAAE,KAAK,sBAAsB,EAAgB,MAAM,yBAAyB,CAAA;AAyCnF,MAAM,MAAM,UAAU,GAAG;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAA;IAClD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC1C,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAC/B,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACjC,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAA;IAC1B,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IACxC,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,SAAS,CAAC,EAAE,cAAc,CAAC,eAAe,CAAC,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,sBAAsB,KAAK,KAAK,CAAC,SAAS,CAAA;IACjE,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;IACxC;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;IACjC;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CA0rBtC,CAAA"}