@payloadcms/ui 4.0.0-internal.5d5a2b2 → 4.0.0-internal.63f8536

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

@@ -34,6 +34,7 @@
     border-radius: var(--popup-item-radius);
     display: flex;
     align-items: stretch;
+    flex: 1;
     color: var(--popup-item-color, var(--color-text));
     font-family: var(--text-body-medium-font-family);
     font-size: var(--text-body-medium-font-size);
@@ -45,6 +46,11 @@
   .popup-button-list__label {
     display: flex;
     align-items: center;
+    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);
+    line-height: var(--text-body-medium-line-height);
     padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-1);
   }
 
@@ -84,6 +90,22 @@
   /* Hide icon element by default (outside RadioGroup/MenuItem) */
   .popup-button-list__icon {
     display: none;
+    flex-shrink: 0;
+  }
+
+  .popup-button-list__submenu-icon {
+    flex-shrink: 0;
+  }
+
+  /* RadioGroup - selected items show only the checkmark, no background fill */
+  .popup-button-list--with-icons .popup-button-list__button--selected {
+    background-color: transparent;
+    color: var(--popup-item-color, var(--color-text));
+  }
+
+  .popup-button-list--with-icons .popup-button-list__button--selected:hover {
+    background-color: var(--popup-item-bg-hover, var(--color-bg-selected-strong));
+    color: var(--popup-item-color-hover, var(--color-text-onselected-strong));
   }
 
   /* RadioGroup - for radio-style selection rows with 16px icons */
@@ -95,7 +117,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0;
     width: calc(var(--spacer-3) + var(--spacer-1));
     padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
   }
@@ -114,7 +135,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    flex-shrink: 0;
     width: calc(var(--spacer-3) + var(--spacer-1));
     padding: var(--spacer-1) 0 var(--spacer-1) var(--spacer-1);
   }
@@ -124,7 +144,31 @@
   }
 
   .popup-button-list--large .popup-button-list__icon {
-    width: var(--spacer-4);
-    padding: 0;
+    width: auto;
+    padding: 0 0 0 var(--spacer-1);
+  }
+
+  /* Submenu trigger buttons: icon on left, label in middle, chevron pushed right */
+  .popup-button-list__button--submenu-trigger {
+    align-items: center;
+  }
+
+  .popup-button-list__submenu-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-inline-start: var(--spacer-1);
+  }
+
+  .popup-button-list__chevron {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    opacity: 0.5;
+  }
+
+  .popup-button-list__button--submenu-trigger:hover .popup-button-list__chevron,
+  .popup-button-list__button--selected .popup-button-list__chevron {
+    opacity: 1;
   }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,mBAAmB,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE/E,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACxC,CAUA,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CACzB,CAUA,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAGA,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmE5C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAElE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,aAAa,CAAA;AAIpB,OAAO,EAAE,gBAAgB,IAAI,OAAO,EAAE,MAAM,0BAA0B,CAAA;AACtE,OAAO,EAAE,mBAAmB,IAAI,UAAU,EAAE,MAAM,6BAA6B,CAAA;AAE/E,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC;IACjC,UAAU,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;CACxC,CAUA,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAA;CACzB,CAUA,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAGA,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAA;CACzC,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAmE5C,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC,CAUlE,CAAA"}

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

@@ -116,6 +116,7 @@ export const Button = ({
 export const RadioGroupItem = props => {
   return /*#__PURE__*/_jsx(Button, {
     ...props,
+    className: [`${baseClass}__button--radio-group-item`, props.className].filter(Boolean).join(' '),
     icon: props.active ? /*#__PURE__*/_jsx(CheckIcon, {
       size: 16
     }) : undefined

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 <Button {...props} icon={props.active ? <CheckIcon size={16} /> : undefined} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"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":[]}

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

@@ -1,9 +1,24 @@
 @layer payload-default {
   .popup-list-group-label {
     color: var(--color-text-secondary);
-    font-weight: 500;
-    line-height: 1;
-    margin-top: var(--spacer-1);
-    margin-bottom: var(--spacer-2);
+    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);
+    line-height: var(--text-body-medium-line-height);
+    padding-block: var(--spacer-1);
+    padding-inline: var(--spacer-3);
+  }
+
+  /* Align the label's text with its sibling button labels, which carry a
+     var(--spacer-1) inset. The icon variants reserve an extra icon-slot
+     inset, so their labels sit one more var(--spacer-1) in. */
+  .popup-button-list .popup-list-group-label {
+    padding-inline-start: var(--spacer-1);
+  }
+
+  .popup-button-list--with-actions .popup-list-group-label,
+  .popup-button-list--with-icons .popup-list-group-label {
+    padding-inline-start: var(--spacer-2);
   }
 }

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

@@ -10,6 +10,7 @@ export type PopupButtonRenderProps = {
 export type PopupTriggerProps = {
     active: boolean;
     button?: React.ReactNode;
+    buttonAriaLabel?: string;
     buttonType: 'custom' | 'default';
     className?: string;
     disabled?: boolean;

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,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,CA6EpD,CAAA"}
+{"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"}

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

@@ -8,6 +8,7 @@ export const PopupTrigger = props => {
   const {
     active,
     button,
+    buttonAriaLabel,
     buttonType,
     className,
     disabled,
@@ -40,6 +41,7 @@ export const PopupTrigger = props => {
   }
   if (buttonType === 'custom') {
     return /*#__PURE__*/_jsx("div", {
+      "aria-label": buttonAriaLabel,
       className: classes,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
@@ -49,6 +51,7 @@ export const PopupTrigger = props => {
     });
   }
   return /*#__PURE__*/_jsx("button", {
+    "aria-label": buttonAriaLabel,
     className: classes,
     disabled: disabled,
     onClick: handleClick,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","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  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    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        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      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;AAsBlB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IACJC,MAAM;IACNC,MAAM;IACNC,UAAU;IACVC,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,SAAS;IACTC;EAAI,CACL,GAAGT,KAAA;EAEJ,MAAMU,OAAA,GAAU,CACdZ,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,EAC3CW,IAAA,IAAQ,GAAGX,SAAA,UAAmBW,IAAA,EAAM,EACpCJ,QAAA,IAAY,GAAGP,SAAA,YAAqB,EACpCG,MAAA,IAAU,GAAGH,SAAA,UAAmB,CACjC,CACEa,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAuCA,CAAA;IAC3CN,SAAA,CAAU,CAACP,MAAA,EAAQ;EACrB;EAEA,MAAMc,aAAA,GAA6CC,CAAA;IACjD,IAAIA,CAAA,CAAEC,GAAG,KAAK,WAAWD,CAAA,CAAEC,GAAG,KAAK,KAAK;MACtCD,CAAA,CAAEE,cAAc;MAChBV,SAAA,CAAU,CAACP,MAAA,EAAQ;IACrB;EACF;EAEA;EACA,IAAIM,YAAA,EAAc;IAChB,oBACEY,IAAA,CAAAC,SAAA;gBACGb,YAAA,CAAa;QACZN,MAAA;QACA,iBAAiBA,MAAA;QACjB,iBAAiB;QACjBoB,OAAA,EAASP,WAAA;QACTQ,SAAA,EAAWP;MACb;;EAGN;EAEA,IAAIZ,UAAA,KAAe,UAAU;IAC3B,oBACEgB,IAAA,CAAC;MACCf,SAAA,EAAWM,OAAA;MACXW,OAAA,EAASP,WAAA;MACTQ,SAAA,EAAWP,aAAA;MACXQ,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETtB;;EAGP;EAEA,oBACEiB,IAAA,CAAC;IACCf,SAAA,EAAWM,OAAA;IACXL,QAAA,EAAUA,QAAA;IACVgB,OAAA,EAASP,WAAA;IACTQ,SAAA,EAAWP,aAAA;IACXS,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJvB;;AAGP","ignoreList":[]}
+{"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":[]}

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

@@ -6,6 +6,12 @@ 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.
      */
@@ -61,7 +67,14 @@ export type PopupProps = {
      * @default false
      */
     showScrollbar?: boolean;
-    size?: 'fit-content' | 'large' | 'medium' | 'small';
+    /**
+     * Position the popup to the side of the trigger instead of above/below.
+     * The popup's top edge aligns with the trigger's top edge (with viewport clamping).
+     * Automatically flips to the opposite side if there is not enough space.
+     * When set, `verticalAlign`, `horizontalAlign`, and the caret are ignored.
+     */
+    side?: 'left' | 'right';
+    size?: 'fit-content' | 'large' | 'small';
     /**
      * Theme for the popup content. Defaults to 'dark'.
      * Set to 'auto' to inherit the current theme.

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,KAAmD,MAAM,OAAO,CAAA;AAIvE,OAAO,aAAa,CAAA;AAuBpB,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;;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,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD;;;;;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,CAoZtC,CAAA"}
+{"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"}

package/dist/elements/Popup/index.js

@@ -1,17 +1,33 @@
 'use client';
 
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export * as PopupList from './PopupButtonList/index.js';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { createContext, use, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useEffectEvent } from '../../hooks/useEffectEvent.js';
+import { ThemeProvider } from '../../providers/Theme/index.js';
 import './index.css';
 import { PopupTrigger } from './PopupTrigger/index.js';
 const baseClass = 'popup';
+const PopupContext = /*#__PURE__*/createContext(null);
 /**
  * Selector for all elements the browser considers tabbable.
  */
 const TABBABLE_SELECTOR = ['a[href]', 'button:not(:disabled)', 'input:not(:disabled):not([type="hidden"])', 'select:not(:disabled)', 'textarea:not(:disabled)', '[tabindex]', '[contenteditable]:not([contenteditable="false"])', 'audio[controls]', 'video[controls]', 'summary'].map(s => `${s}:not([tabindex="-1"])`).join(', ');
+/**
+ * Returns whether the element has a `position: fixed` ancestor (e.g. an open Drawer).
+ * Such popups must be positioned with `fixed` so they don't drift when the background scrolls.
+ */
+const hasFixedAncestor = element => {
+  let node = element?.parentElement;
+  while (node && node !== document.body) {
+    if (window.getComputedStyle(node).position === 'fixed') {
+      return true;
+    }
+    node = node.parentElement;
+  }
+  return false;
+};
 /**
  * Component that renders a popup, as well as a button that triggers the popup.
  *
@@ -22,6 +38,7 @@ export const Popup = props => {
   const {
     id,
     button,
+    buttonAriaLabel,
     buttonClassName,
     buttonSize,
     buttonType = 'default',
@@ -40,18 +57,25 @@ export const Popup = props => {
     renderButton,
     showOnHover = false,
     showScrollbar = false,
-    size = 'medium',
+    side,
+    size = 'fit-content',
     theme = 'dark',
     verticalAlign = 'bottom'
   } = props;
   const popupRef = useRef(null);
   const triggerRef = useRef(null);
   /**
+  * Whether the trigger is inside a `position: fixed` ancestor (e.g. a Drawer),
+  * in which case the popup is positioned with `fixed` instead of `absolute`.
+  */
+  const isFixedRef = useRef(false);
+  /**
   * Keeps track of whether the popup was opened via keyboard.
   * This is used to determine whether to autofocus the first element in the popup.
   * If the popup was opened via mouse, we do not want to autofocus the first element.
   */
   const openedViaKeyboardRef = useRef(false);
+  const parentPopup = use(PopupContext);
   const [mounted, setMounted] = useState(false);
   const [active, setActiveInternal] = useState(initActive);
   const [isOnTop, setIsOnTop] = useState(verticalAlign === 'top');
@@ -83,52 +107,94 @@ export const Popup = props => {
     }
     const triggerRect = trigger.getBoundingClientRect();
     const popupRect = popup.getBoundingClientRect();
+    // Inside a fixed ancestor, use `fixed` (no scroll offset) so background scrolling
+    // doesn't shift the popup. Otherwise use page coordinates (absolute).
+    const useFixed = isFixedRef.current;
+    const scrollY = useFixed ? 0 : window.scrollY;
+    const scrollX = useFixed ? 0 : window.scrollX;
     // Gap between the popup and the trigger/viewport edges (in pixels)
     const offset = 10;
-    // /////////////////////////////////////
-    // Vertical Positioning
-    // Calculates the `top` position in absolute page coordinates.
-    // Uses `verticalAlign` prop as the preferred direction, but flips
-    // to the opposite side if there's not enough viewport space.
-    // /////////////////////////////////////
+    // Additional gap used in side mode so the child popup has breathing room from its parent
+    const sideOffset = 4;
     let top;
-    let onTop = verticalAlign === 'top';
-    if (verticalAlign === 'bottom') {
-      top = triggerRect.bottom + window.scrollY + offset;
-      if (triggerRect.bottom + popupRect.height + offset > window.innerHeight) {
-        // Try to flip above — only do so if there's actually enough room
-        const topIfAbove = triggerRect.top + window.scrollY - popupRect.height - offset;
-        if (topIfAbove >= window.scrollY) {
-          top = topIfAbove;
-          onTop = true;
+    let left;
+    let caretLeft;
+    if (side) {
+      // /////////////////////////////////////
+      // Side Positioning
+      // Places the popup to the left or right of the parent popup (not just the trigger),
+      // top-aligned with the trigger. Flips to the opposite side if there is not enough
+      // viewport space.
+      // /////////////////////////////////////
+      // Top: align with trigger top, clamped to viewport
+      top = triggerRect.top + scrollY;
+      const maxTop = scrollY + window.innerHeight - popupRect.height - offset;
+      top = Math.max(scrollY + offset, Math.min(top, maxTop));
+      // Use the parent popup's bounding rect as the reference for left/right positioning
+      // so the child appears 4px from the parent popup edge, not just the trigger button.
+      const anchorRect = parentPopup?.popupRef.current ? parentPopup.popupRef.current.getBoundingClientRect() : triggerRect;
+      if (side === 'left') {
+        left = anchorRect.left - popupRect.width - sideOffset;
+        if (left < offset) {
+          // flip to right side
+          left = anchorRect.right + sideOffset;
+        }
+      } else {
+        left = anchorRect.right + sideOffset;
+        if (left + popupRect.width + offset > window.innerWidth) {
+          // flip to left side
+          left = anchorRect.left - popupRect.width - sideOffset;
         }
-        // else: not enough room above either — keep below and let it overflow rather than going off-screen
       }
+      left = left + scrollX;
+      // Caret not used in side mode; set a neutral value
+      caretLeft = popupRect.width / 2;
+      setIsOnTop(false);
     } else {
-      top = triggerRect.top + window.scrollY - popupRect.height - offset;
-      if (triggerRect.top - popupRect.height - offset < 0) {
-        top = triggerRect.bottom + window.scrollY + offset;
-        onTop = false;
+      // /////////////////////////////////////
+      // Vertical Positioning
+      // Calculates the `top` position in absolute page coordinates.
+      // Uses `verticalAlign` prop as the preferred direction, but flips
+      // to the opposite side if there's not enough viewport space.
+      // /////////////////////////////////////
+      let onTop = verticalAlign === 'top';
+      if (verticalAlign === 'bottom') {
+        top = triggerRect.bottom + scrollY + offset;
+        if (triggerRect.bottom + popupRect.height + offset > window.innerHeight) {
+          // Try to flip above — only do so if there's actually enough room
+          const topIfAbove = triggerRect.top + scrollY - popupRect.height - offset;
+          if (topIfAbove >= scrollY) {
+            top = topIfAbove;
+            onTop = true;
+          }
+          // else: not enough room above either — keep below and let it overflow rather than going off-screen
+        }
+      } else {
+        top = triggerRect.top + scrollY - popupRect.height - offset;
+        if (triggerRect.top - popupRect.height - offset < 0) {
+          top = triggerRect.bottom + scrollY + offset;
+          onTop = false;
+        }
       }
+      setIsOnTop(onTop);
+      // /////////////////////////////////////
+      // Horizontal Positioning
+      // Calculates the `left` position based on `horizontalAlign` prop:
+      // - 'left': aligns popup's left edge with trigger's left edge
+      // - 'right': aligns popup's right edge with trigger's right edge
+      // - 'center': centers popup horizontally relative to trigger
+      // Then clamps to keep the popup within viewport bounds.
+      // /////////////////////////////////////
+      left = horizontalAlign === 'right' ? triggerRect.right - popupRect.width : horizontalAlign === 'center' ? triggerRect.left + triggerRect.width / 2 - popupRect.width / 2 : triggerRect.left;
+      left = Math.max(offset, Math.min(left, window.innerWidth - popupRect.width - offset));
+      // /////////////////////////////////////
+      // Caret Positioning
+      // Positions the caret arrow to point at the trigger's horizontal center.
+      // Clamps between 12px from edges to prevent caret from overflowing the popup.
+      // /////////////////////////////////////
+      const triggerCenter = triggerRect.left + triggerRect.width / 2;
+      caretLeft = Math.max(12, Math.min(triggerCenter - left, popupRect.width - 12));
     }
-    setIsOnTop(onTop);
-    // /////////////////////////////////////
-    // Horizontal Positioning
-    // Calculates the `left` position based on `horizontalAlign` prop:
-    // - 'left': aligns popup's left edge with trigger's left edge
-    // - 'right': aligns popup's right edge with trigger's right edge
-    // - 'center': centers popup horizontally relative to trigger
-    // Then clamps to keep the popup within viewport bounds.
-    // /////////////////////////////////////
-    let left = horizontalAlign === 'right' ? triggerRect.right - popupRect.width : horizontalAlign === 'center' ? triggerRect.left + triggerRect.width / 2 - popupRect.width / 2 : triggerRect.left;
-    left = Math.max(offset, Math.min(left, window.innerWidth - popupRect.width - offset));
-    // /////////////////////////////////////
-    // Caret Positioning
-    // Positions the caret arrow to point at the trigger's horizontal center.
-    // Clamps between 12px from edges to prevent caret from overflowing the popup.
-    // /////////////////////////////////////
-    const triggerCenter = triggerRect.left + triggerRect.width / 2;
-    const caretLeft = Math.max(12, Math.min(triggerCenter - left, popupRect.width - 12));
     // /////////////////////////////////////
     // Apply Styles (only if changed)
     // Compares calculated position with current styles to avoid unnecessary
@@ -138,8 +204,12 @@ export const Popup = props => {
     // Values are rounded to match browser's CSS precision and avoid false updates.
     // /////////////////////////////////////
     const newTop = `${Math.round(top)}px`;
-    const newLeft = `${Math.round(left + window.scrollX)}px`;
+    const newLeft = `${Math.round(left + scrollX)}px`;
     const newCaretLeft = `${Math.round(caretLeft)}px`;
+    const newPosition = useFixed ? 'fixed' : '';
+    if (popup.style.position !== newPosition) {
+      popup.style.position = newPosition;
+    }
     if (popup.style.top !== newTop) {
       popup.style.top = newTop;
     }
@@ -222,6 +292,10 @@ export const Popup = props => {
     // Check if the clicked element or any ancestor is an actionable element
     const actionable = target_0.closest('button, a[href], [role="button"], [role="menuitem"]');
     if (actionable && popupRef.current?.contains(actionable)) {
+      // Don't close if clicking a nested popup's trigger — it will manage its own open state
+      if (actionable.closest(`.${baseClass}__trigger-wrap`)) {
+        return;
+      }
       setActive(false);
     }
   });
@@ -230,10 +304,20 @@ export const Popup = props => {
   // /////////////////////////////////////
   useEffect(() => {
     if (!active) {
+      const popup_1 = popupRef.current;
+      if (popup_1) {
+        // Clear inline position styles so the CSS `top: -9999px` rule on
+        // `.popup__hidden-content` takes effect. Without this, the inline
+        // styles set during positioning would win over the CSS rule, keeping
+        // portaled children (e.g. a ReactSelect menu) visually on-screen.
+        popup_1.style.position = '';
+        popup_1.style.top = '';
+        popup_1.style.left = '';
+      }
       return;
     }
-    const popup_1 = popupRef.current;
-    if (!popup_1) {
+    const popup_2 = popupRef.current;
+    if (!popup_2) {
       return;
     }
     // /////////////////////////////////////
@@ -247,9 +331,11 @@ export const Popup = props => {
     // after the browser has finished laying out the newly-visible popup
     // content. The rAF call is the authoritative one — it catches cases
     // where the popup height wasn't stable yet during the first call
-    // (e.g. ColumnSelector content rendering after hidden → visible
+    // (e.g. ColumnSelection popup content rendering after hidden → visible
     // class switch), which was causing incorrect flip-to-top decisions.
     // /////////////////////////////////////
+    // Decide the positioning strategy once per open.
+    isFixedRef.current = hasFixedAncestor(triggerRef.current);
     updatePosition();
     const rafId = requestAnimationFrame(() => {
       updatePosition();
@@ -262,7 +348,7 @@ export const Popup = props => {
     if (openedViaKeyboardRef.current) {
       // Use requestAnimationFrame to ensure DOM is ready.
       requestAnimationFrame(() => {
-        const firstFocusable = popup_1.querySelector(TABBABLE_SELECTOR);
+        const firstFocusable = popup_2.querySelector(TABBABLE_SELECTOR);
         firstFocusable?.focus();
       });
     }
@@ -279,7 +365,7 @@ export const Popup = props => {
     });
     document.addEventListener('mousedown', handleClickOutside);
     document.addEventListener('keydown', handleKeyDown);
-    popup_1.addEventListener('click', handleActionableClick);
+    popup_2.addEventListener('click', handleActionableClick);
     return () => {
       cancelAnimationFrame(rafId);
       window.removeEventListener('resize', updatePosition);
@@ -288,7 +374,7 @@ export const Popup = props => {
       });
       document.removeEventListener('mousedown', handleClickOutside);
       document.removeEventListener('keydown', handleKeyDown);
-      popup_1.removeEventListener('click', handleActionableClick);
+      popup_2.removeEventListener('click', handleActionableClick);
     };
   }, [active]);
   useEffect(() => {
@@ -299,6 +385,7 @@ export const Popup = props => {
   const Trigger = /*#__PURE__*/_jsx(PopupTrigger, {
     active: active,
     button: button,
+    buttonAriaLabel: buttonAriaLabel,
     buttonType: buttonType,
     className: buttonClassName,
     disabled: disabled,
@@ -326,21 +413,33 @@ export const Popup = props => {
     // Otherwise, modals opened from the popup will close unexpectedly when clicking within the modal, since
     // that closes the popup due to the click outside handler.
     /*#__PURE__*/
-    createPortal(/*#__PURE__*/_jsxs("div", {
-      className: active ? [`${baseClass}__content`, `${baseClass}--size-${size}`, isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`, portalClassName].filter(Boolean).join(' ') :
-      // tests do not accidentally target inactive popups.
-      `${baseClass}__hidden-content`,
-      "data-popup-id": id || undefined,
-      "data-theme": theme === 'auto' ? undefined : theme,
-      ref: popupRef,
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: `${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`,
-        children: [render?.({
-          close: () => setActive(false)
-        }), children]
-      }), caret && /*#__PURE__*/_jsx("div", {
-        className: `${baseClass}__caret`
-      })]
+    createPortal(/*#__PURE__*/_jsx(PopupContext, {
+      value: {
+        popupRef
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        className: active ? [`${baseClass}__content`, `${baseClass}--size-${size}`, side ? `${baseClass}--side-${side}` : isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`, portalClassName].filter(Boolean).join(' ') :
+        // tests do not accidentally target inactive popups.
+        `${baseClass}__hidden-content`,
+        "data-popup-id": id || undefined,
+        "data-theme": theme === 'auto' ? undefined : theme,
+        ref: popupRef,
+        children: [/*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`,
+          children: theme === 'auto' ? /*#__PURE__*/_jsxs(_Fragment, {
+            children: [render?.({
+              close: () => setActive(false)
+            }), children]
+          }) : /*#__PURE__*/_jsxs(ThemeProvider, {
+            theme: theme,
+            children: [render?.({
+              close: () => setActive(false)
+            }), children]
+          })
+        }), caret && !side && /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__caret`
+        })]
+      })
     }), document.body) : null]
   });
 };