@payloadcms/ui 3.74.0-internal.097fb57 → 3.74.0-internal.1b84a48

package/dist/elements/FolderView/FolderTypeField/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/FolderTypeField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAwB,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAE3E,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,eAAO,MAAM,eAAe,UAAW,sBAAsB,sBA0H5D,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/FolderView/FolderTypeField/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAgB,sBAAsB,EAAE,MAAM,SAAS,CAAA;AAEnE,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,eAAO,MAAM,eAAe,UAAW,sBAAsB,sBA0H5D,CAAA"}

package/dist/elements/FolderView/FolderTypeField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","mergeFieldStyles","formatOptions","SelectInput","useField","useFolder","useTranslation","FolderTypeField","props","field","name","admin","className","isClearable","isSortable","placeholder","hasMany","label","localized","options","allSelectOptions","required","onChange","onChangeFromProps","path","pathFromProps","readOnly","validate","t","folderType","useMemo","length","filter","option","value","includes","memoizedValidate","useCallback","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","selectFilterOptions","setValue","showError","potentiallyStalePath","selectedOption","newValue","Array","isArray","map","styles","_jsx","description","filterOption","some","undefined","style"],"sources":["../../../../src/elements/FolderView/FolderTypeField/index.tsx"],"sourcesContent":["import type { Option, OptionObject, SelectFieldClientProps } from 'payload'\n\nimport React from 'react'\n\nimport type { ReactSelectAdapterProps } from '../../ReactSelect/types.js'\n\nimport { mergeFieldStyles } from '../../../fields/mergeFieldStyles.js'\nimport { formatOptions } from '../../../fields/Select/index.js'\nimport { SelectInput } from '../../../fields/Select/Input.js'\nimport { useField } from '../../../forms/useField/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nexport const FolderTypeField = (props: SelectFieldClientProps) => {\n  const {\n    field,\n    field: {\n      name,\n      admin: {\n        className,\n        isClearable = true,\n        isSortable = true,\n        placeholder,\n      } = {} as SelectFieldClientProps['field']['admin'],\n      hasMany = false,\n      label,\n      localized,\n      options: allSelectOptions = [],\n      required,\n    },\n    onChange: onChangeFromProps,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n  const { t } = useTranslation()\n\n  const { folderType } = useFolder()\n\n  const options = React.useMemo(() => {\n    if (!folderType || folderType.length === 0) {\n      return formatOptions(allSelectOptions)\n    }\n    return formatOptions(\n      allSelectOptions.filter((option) => {\n        if (typeof option === 'object' && option.value) {\n          return folderType.includes(option.value)\n        }\n        return true\n      }),\n    )\n  }, [allSelectOptions, folderType])\n\n  const memoizedValidate = React.useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, hasMany, options, required })\n      }\n    },\n    [validate, required, hasMany, options],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    selectFilterOptions,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const onChange: ReactSelectAdapterProps['onChange'] = React.useCallback(\n    (selectedOption: OptionObject | OptionObject[]) => {\n      if (!readOnly || disabled) {\n        let newValue: string | string[] = null\n        if (selectedOption && hasMany) {\n          if (Array.isArray(selectedOption) && selectedOption.length > 0) {\n            newValue = selectedOption.map((option) => option.value)\n          } else {\n            newValue = null\n          }\n        } else if (selectedOption && !Array.isArray(selectedOption)) {\n          newValue = selectedOption.value\n        }\n\n        if (typeof onChangeFromProps === 'function') {\n          onChangeFromProps(newValue)\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, disabled, hasMany, setValue, onChangeFromProps],\n  )\n\n  const styles = React.useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <SelectInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      className={className}\n      Description={Description}\n      description={t('folder:folderTypeDescription')}\n      Error={Error}\n      filterOption={\n        selectFilterOptions\n          ? ({ value }) =>\n              selectFilterOptions?.some(\n                (option) => (typeof option === 'string' ? option : option.value) === value,\n              )\n          : undefined\n      }\n      hasMany={hasMany}\n      isClearable={isClearable}\n      isSortable={isSortable}\n      Label={Label}\n      label={label}\n      localized={localized}\n      name={name}\n      onChange={onChange}\n      options={options}\n      path={path}\n      placeholder={placeholder}\n      readOnly={readOnly || disabled}\n      required={required || (Array.isArray(folderType) && folderType.length > 0)}\n      showError={showError}\n      style={styles}\n      value={value as string | string[]}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","mergeFieldStyles","formatOptions","SelectInput","useField","useFolder","useTranslation","FolderTypeField","props","field","name","admin","className","isClearable","isSortable","placeholder","hasMany","label","localized","options","allSelectOptions","required","onChange","onChangeFromProps","path","pathFromProps","readOnly","validate","t","folderType","useMemo","length","filter","option","value","includes","memoizedValidate","useCallback","validationOptions","customComponents","AfterInput","BeforeInput","Description","Error","Label","disabled","selectFilterOptions","setValue","showError","potentiallyStalePath","selectedOption","newValue","Array","isArray","map","styles","_jsx","description","filterOption","some","undefined","style"],"sources":["../../../../src/elements/FolderView/FolderTypeField/index.tsx"],"sourcesContent":["import type { OptionObject, SelectFieldClientProps } from 'payload'\n\nimport React from 'react'\n\nimport type { ReactSelectAdapterProps } from '../../ReactSelect/types.js'\n\nimport { mergeFieldStyles } from '../../../fields/mergeFieldStyles.js'\nimport { formatOptions } from '../../../fields/Select/index.js'\nimport { SelectInput } from '../../../fields/Select/Input.js'\nimport { useField } from '../../../forms/useField/index.js'\nimport { useFolder } from '../../../providers/Folders/index.js'\nimport { useTranslation } from '../../../providers/Translation/index.js'\n\nexport const FolderTypeField = (props: SelectFieldClientProps) => {\n  const {\n    field,\n    field: {\n      name,\n      admin: {\n        className,\n        isClearable = true,\n        isSortable = true,\n        placeholder,\n      } = {} as SelectFieldClientProps['field']['admin'],\n      hasMany = false,\n      label,\n      localized,\n      options: allSelectOptions = [],\n      required,\n    },\n    onChange: onChangeFromProps,\n    path: pathFromProps,\n    readOnly,\n    validate,\n  } = props\n  const { t } = useTranslation()\n\n  const { folderType } = useFolder()\n\n  const options = React.useMemo(() => {\n    if (!folderType || folderType.length === 0) {\n      return formatOptions(allSelectOptions)\n    }\n    return formatOptions(\n      allSelectOptions.filter((option) => {\n        if (typeof option === 'object' && option.value) {\n          return folderType.includes(option.value)\n        }\n        return true\n      }),\n    )\n  }, [allSelectOptions, folderType])\n\n  const memoizedValidate = React.useCallback(\n    (value, validationOptions) => {\n      if (typeof validate === 'function') {\n        return validate(value, { ...validationOptions, hasMany, options, required })\n      }\n    },\n    [validate, required, hasMany, options],\n  )\n\n  const {\n    customComponents: { AfterInput, BeforeInput, Description, Error, Label } = {},\n    disabled,\n    path,\n    selectFilterOptions,\n    setValue,\n    showError,\n    value,\n  } = useField({\n    potentiallyStalePath: pathFromProps,\n    validate: memoizedValidate,\n  })\n\n  const onChange: ReactSelectAdapterProps['onChange'] = React.useCallback(\n    (selectedOption: OptionObject | OptionObject[]) => {\n      if (!readOnly || disabled) {\n        let newValue: string | string[] = null\n        if (selectedOption && hasMany) {\n          if (Array.isArray(selectedOption) && selectedOption.length > 0) {\n            newValue = selectedOption.map((option) => option.value)\n          } else {\n            newValue = null\n          }\n        } else if (selectedOption && !Array.isArray(selectedOption)) {\n          newValue = selectedOption.value\n        }\n\n        if (typeof onChangeFromProps === 'function') {\n          onChangeFromProps(newValue)\n        }\n\n        setValue(newValue)\n      }\n    },\n    [readOnly, disabled, hasMany, setValue, onChangeFromProps],\n  )\n\n  const styles = React.useMemo(() => mergeFieldStyles(field), [field])\n\n  return (\n    <SelectInput\n      AfterInput={AfterInput}\n      BeforeInput={BeforeInput}\n      className={className}\n      Description={Description}\n      description={t('folder:folderTypeDescription')}\n      Error={Error}\n      filterOption={\n        selectFilterOptions\n          ? ({ value }) =>\n              selectFilterOptions?.some(\n                (option) => (typeof option === 'string' ? option : option.value) === value,\n              )\n          : undefined\n      }\n      hasMany={hasMany}\n      isClearable={isClearable}\n      isSortable={isSortable}\n      Label={Label}\n      label={label}\n      localized={localized}\n      name={name}\n      onChange={onChange}\n      options={options}\n      path={path}\n      placeholder={placeholder}\n      readOnly={readOnly || disabled}\n      required={required || (Array.isArray(folderType) && folderType.length > 0)}\n      showError={showError}\n      style={styles}\n      value={value as string | string[]}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Link/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,MAAM,cAAc,CAAA;AAEzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,QAAA,MAAM,QAAQ;eA4E+nF,MAAO,SAAS;2CA5EvkF,CAAA;AAgBtF,KAAK,KAAK,GAAG;IACX;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkDhC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Link/index.tsx"],"names":[],"mappings":"AACA,OAAO,cAAc,MAAM,cAAc,CAAA;AAEzC,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,QAAA,MAAM,QAAQ;eA4E2mF,MAAO,SAAS;2CA5EnjF,CAAA;AAgBtF,KAAK,KAAK,GAAG;IACX;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAA;CACzB,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAA;AAElC,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkDhC,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,SAAS,GACjB,cAAc,GACd,MAAM,GACN,OAAO,GACP,OAAO,GACP,YAAY,GACZ,SAAS,GACT,SAAS,GACT,OAAO,CAAA;AAEX,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE;QACb,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;KACpC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAGD,OAAO,cAAc,CAAA;AA2FrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAOpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,OAAO,CAAA;AAExD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,MAAM,MAAM,SAAS,GACjB,cAAc,GACd,MAAM,GACN,OAAO,GACP,OAAO,GACP,YAAY,GACZ,SAAS,GACT,SAAS,GACT,OAAO,CAAA;AAEX,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE;QACb,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;KACpC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAGD,OAAO,cAAc,CAAA;AAoGrB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAOpC,CAAA"}

package/dist/elements/Pill/index.js

@@ -2,7 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react'; // TODO: abstract this out to support all routers
+import React, { useEffect, useState } from 'react'; // TODO: abstract this out to support all routers
 import { Link } from '../Link/index.js';
 import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
 import './index.scss';
@@ -68,51 +68,121 @@ const DraggablePill = props => {
   return t4;
 };
 const StaticPill = props => {
+  const $ = _c(27);
   const {
     id,
-    alignIcon = 'right',
-    'aria-checked': ariaChecked,
-    'aria-controls': ariaControls,
-    'aria-expanded': ariaExpanded,
-    'aria-label': ariaLabel,
+    alignIcon: t0,
+    "aria-checked": ariaChecked,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-label": ariaLabel,
     children,
     className,
     draggable,
     elementProps,
     icon,
     onClick,
-    pillStyle = 'light',
+    pillStyle: t1,
     rounded,
-    size = 'medium',
+    size: t2,
     to
   } = props;
-  const classes = [baseClass, `${baseClass}--style-${pillStyle}`, `${baseClass}--size-${size}`, className && className, to && `${baseClass}--has-link`, (to || onClick) && `${baseClass}--has-action`, icon && `${baseClass}--has-icon`, icon && `${baseClass}--align-icon-${alignIcon}`, draggable && `${baseClass}--draggable`, rounded && `${baseClass}--rounded`].filter(Boolean).join(' ');
-  let Element = 'div';
-  if (onClick && !to) {
-    Element = 'button';
+  const alignIcon = t0 === undefined ? "right" : t0;
+  const pillStyle = t1 === undefined ? "light" : t1;
+  const size = t2 === undefined ? "medium" : t2;
+  const [isHydrated, setIsHydrated] = useState(false);
+  let t3;
+  let t4;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = () => {
+      setIsHydrated(true);
+    };
+    t4 = [];
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t3 = $[0];
+    t4 = $[1];
+  }
+  useEffect(t3, t4);
+  const isButton = onClick && !to;
+  const t5 = `${baseClass}--style-${pillStyle}`;
+  const t6 = `${baseClass}--size-${size}`;
+  const t7 = className && className;
+  const t8 = to && `${baseClass}--has-link`;
+  const t9 = (to || onClick) && `${baseClass}--has-action`;
+  const t10 = icon && `${baseClass}--has-icon`;
+  const t11 = icon && `${baseClass}--align-icon-${alignIcon}`;
+  const t12 = draggable && `${baseClass}--draggable`;
+  const t13 = rounded && `${baseClass}--rounded`;
+  let t14;
+  if ($[2] !== t10 || $[3] !== t11 || $[4] !== t12 || $[5] !== t13 || $[6] !== t5 || $[7] !== t6 || $[8] !== t7 || $[9] !== t8 || $[10] !== t9) {
+    t14 = [baseClass, t5, t6, t7, t8, t9, t10, t11, t12, t13].filter(Boolean);
+    $[2] = t10;
+    $[3] = t11;
+    $[4] = t12;
+    $[5] = t13;
+    $[6] = t5;
+    $[7] = t6;
+    $[8] = t7;
+    $[9] = t8;
+    $[10] = t9;
+    $[11] = t14;
+  } else {
+    t14 = $[11];
+  }
+  const classes = t14.join(" ");
+  let Element = "div";
+  if (isButton) {
+    Element = "button";
   }
   if (to) {
     Element = Link;
   }
-  return /*#__PURE__*/_jsxs(Element, {
-    ...elementProps,
-    "aria-checked": ariaChecked,
-    "aria-controls": ariaControls,
-    "aria-expanded": ariaExpanded,
-    "aria-label": ariaLabel,
-    className: classes,
-    href: to || null,
-    id: id,
-    onClick: onClick,
-    type: Element === 'button' ? 'button' : undefined,
-    children: [/*#__PURE__*/_jsx("span", {
-      className: `${baseClass}__label`,
-      children: children
-    }), Boolean(icon) && /*#__PURE__*/_jsx("span", {
-      className: `${baseClass}__icon`,
-      children: icon
-    })]
-  });
+  const t15 = isButton ? !isHydrated : undefined;
+  const t16 = to || null;
+  const t17 = isButton ? "button" : undefined;
+  let t18;
+  if ($[12] !== Element || $[13] !== ariaChecked || $[14] !== ariaControls || $[15] !== ariaExpanded || $[16] !== ariaLabel || $[17] !== children || $[18] !== classes || $[19] !== elementProps || $[20] !== icon || $[21] !== id || $[22] !== onClick || $[23] !== t15 || $[24] !== t16 || $[25] !== t17) {
+    t18 = _jsxs(Element, {
+      ...elementProps,
+      "aria-checked": ariaChecked,
+      "aria-controls": ariaControls,
+      "aria-expanded": ariaExpanded,
+      "aria-label": ariaLabel,
+      className: classes,
+      disabled: t15,
+      href: t16,
+      id,
+      onClick,
+      type: t17,
+      children: [_jsx("span", {
+        className: `${baseClass}__label`,
+        children
+      }), Boolean(icon) && _jsx("span", {
+        className: `${baseClass}__icon`,
+        children: icon
+      })]
+    });
+    $[12] = Element;
+    $[13] = ariaChecked;
+    $[14] = ariaControls;
+    $[15] = ariaExpanded;
+    $[16] = ariaLabel;
+    $[17] = children;
+    $[18] = classes;
+    $[19] = elementProps;
+    $[20] = icon;
+    $[21] = id;
+    $[22] = onClick;
+    $[23] = t15;
+    $[24] = t16;
+    $[25] = t17;
+    $[26] = t18;
+  } else {
+    t18 = $[26];
+  }
+  return t18;
 };
 export const Pill = props => {
   const {

package/dist/elements/Pill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","Link","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","size","to","classes","Element","_jsxs","href","type","undefined","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport React from 'react' // TODO: abstract this out to support all routers\n\nimport { Link } from '../Link/index.js'\n\nexport type PillStyle =\n  | 'always-white'\n  | 'dark'\n  | 'error'\n  | 'light'\n  | 'light-gray'\n  | 'success'\n  | 'warning'\n  | 'white'\n\nexport type PillProps = {\n  alignIcon?: 'left' | 'right'\n  'aria-checked'?: boolean\n  'aria-controls'?: string\n  'aria-expanded'?: boolean\n  'aria-label'?: string\n  children?: React.ReactNode\n  className?: string\n  draggable?: boolean\n  elementProps?: {\n    ref: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  /**\n   * @default 'light'\n   */\n  pillStyle?: PillStyle\n  rounded?: boolean\n  size?: 'medium' | 'small'\n  to?: string\n}\n\nexport type RenderedTypeProps = {\n  children: React.ReactNode\n  className?: string\n  onClick?: () => void\n  to: string\n  type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n  const { id, className } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <StaticPill\n      {...props}\n      className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n      elementProps={{\n        ...listeners,\n        ...attributes,\n        ref: setNodeRef,\n        style: {\n          transform,\n        },\n      }}\n    />\n  )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n  const {\n    id,\n    alignIcon = 'right',\n    'aria-checked': ariaChecked,\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-label': ariaLabel,\n    children,\n    className,\n    draggable,\n    elementProps,\n    icon,\n    onClick,\n    pillStyle = 'light',\n    rounded,\n    size = 'medium',\n    to,\n  } = props\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    `${baseClass}--size-${size}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n    draggable && `${baseClass}--draggable`,\n    rounded && `${baseClass}--rounded`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n  if (onClick && !to) {\n    Element = 'button'\n  }\n\n  if (to) {\n    Element = Link\n  }\n\n  return (\n    <Element\n      {...elementProps}\n      aria-checked={ariaChecked}\n      aria-controls={ariaControls}\n      aria-expanded={ariaExpanded}\n      aria-label={ariaLabel}\n      className={classes}\n      href={to || null}\n      id={id}\n      onClick={onClick}\n      type={Element === 'button' ? 'button' : undefined}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {Boolean(icon) && <span className={`${baseClass}__icon`}>{icon}</span>}\n    </Element>\n  )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggablePill {...props} />\n  }\n  return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useState","Link","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","size","to","undefined","isHydrated","setIsHydrated","Symbol","for","isButton","t5","t6","t7","t8","t9","t10","t11","t12","t13","t14","classes","Element","t15","t16","t17","t18","_jsxs","disabled","href","type","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport React, { useEffect, useState } from 'react' // TODO: abstract this out to support all routers\n\nimport { Link } from '../Link/index.js'\n\nexport type PillStyle =\n  | 'always-white'\n  | 'dark'\n  | 'error'\n  | 'light'\n  | 'light-gray'\n  | 'success'\n  | 'warning'\n  | 'white'\n\nexport type PillProps = {\n  alignIcon?: 'left' | 'right'\n  'aria-checked'?: boolean\n  'aria-controls'?: string\n  'aria-expanded'?: boolean\n  'aria-label'?: string\n  children?: React.ReactNode\n  className?: string\n  draggable?: boolean\n  elementProps?: {\n    ref: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  /**\n   * @default 'light'\n   */\n  pillStyle?: PillStyle\n  rounded?: boolean\n  size?: 'medium' | 'small'\n  to?: string\n}\n\nexport type RenderedTypeProps = {\n  children: React.ReactNode\n  className?: string\n  onClick?: () => void\n  to: string\n  type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n  const { id, className } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <StaticPill\n      {...props}\n      className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n      elementProps={{\n        ...listeners,\n        ...attributes,\n        ref: setNodeRef,\n        style: {\n          transform,\n        },\n      }}\n    />\n  )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n  const {\n    id,\n    alignIcon = 'right',\n    'aria-checked': ariaChecked,\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-label': ariaLabel,\n    children,\n    className,\n    draggable,\n    elementProps,\n    icon,\n    onClick,\n    pillStyle = 'light',\n    rounded,\n    size = 'medium',\n    to,\n  } = props\n\n  const [isHydrated, setIsHydrated] = useState(false)\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const isButton = onClick && !to\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    `${baseClass}--size-${size}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n    draggable && `${baseClass}--draggable`,\n    rounded && `${baseClass}--rounded`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n  if (isButton) {\n    Element = 'button'\n  }\n\n  if (to) {\n    Element = Link\n  }\n\n  return (\n    <Element\n      {...elementProps}\n      aria-checked={ariaChecked}\n      aria-controls={ariaControls}\n      aria-expanded={ariaExpanded}\n      aria-label={ariaLabel}\n      className={classes}\n      disabled={isButton ? !isHydrated : undefined}\n      href={to || null}\n      id={id}\n      onClick={onClick}\n      type={isButton ? 'button' : undefined}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {Boolean(icon) && <span className={`${baseClass}__icon`}>{icon}</span>}\n    </Element>\n  )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggablePill {...props} />\n  }\n  return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -6,11 +6,18 @@ export type PopupProps = {
     backgroundColor?: CSSProperties['backgroundColor'];
     boundingRef?: React.RefObject<HTMLElement>;
     button?: React.ReactNode;
+    /**
+     * The class name to apply to the button that triggers the popup.
+     */
     buttonClassName?: string;
     buttonSize?: 'large' | 'medium' | 'small' | 'xsmall';
     buttonType?: 'custom' | 'default' | 'none';
     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;
     /**
@@ -28,6 +35,10 @@ export type PopupProps = {
     noBackground?: boolean;
     onToggleClose?: () => void;
     onToggleOpen?: (active: boolean) => void;
+    /**
+     * Class name to apply to the portal container.
+     */
+    portalClassName?: string;
     render?: (args: {
         close: () => void;
     }) => React.ReactNode;

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,cAAc,CAAA;AAuBrB,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,UAAU,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAC1C,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;;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,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAA;IACzD,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;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAwWtC,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,KAAmD,MAAM,OAAO,CAAA;AAIvE,OAAO,cAAc,CAAA;AAuBrB,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,GAAG,OAAO,GAAG,QAAQ,CAAA;IACpD,UAAU,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IAC1C,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,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;;;;;;;;OAQG;IACH,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED;;;;;GAKG;AACH,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAgXtC,CAAA"}

package/dist/elements/Popup/index.js

@@ -35,6 +35,7 @@ export const Popup = props => {
     noBackground,
     onToggleClose,
     onToggleOpen,
+    portalClassName,
     render,
     showOnHover = false,
     showScrollbar = false,
@@ -197,6 +198,10 @@ export const Popup = props => {
   // /////////////////////////////////////
   const handleActionableClick = useEffectEvent(e_1 => {
     const target = e_1.target;
+    // Allow opting out with data-popup-prevent-close attribute on element or ancestor
+    if (target.closest('[data-popup-prevent-close]')) {
+      return;
+    }
     // Check if the clicked element or any ancestor is an actionable element
     const actionable = target.closest('button, a[href], [role="button"], [role="menuitem"]');
     if (actionable && popupRef.current?.contains(actionable)) {
@@ -290,7 +295,7 @@ export const Popup = props => {
     // 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`].filter(Boolean).join(' ') :
+      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,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["PopupList","React","useCallback","useEffect","useRef","useState","createPortal","useEffectEvent","PopupTrigger","baseClass","TABBABLE_SELECTOR","map","s","join","Popup","props","id","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","initActive","noBackground","onToggleClose","onToggleOpen","render","showOnHover","showScrollbar","size","verticalAlign","popupRef","triggerRef","openedViaKeyboardRef","mounted","setMounted","active","setActiveInternal","isOnTop","setIsOnTop","setActive","isActive","viaKeyboard","current","updatePosition","trigger","popup","triggerRect","getBoundingClientRect","popupRect","offset","top","onTop","bottom","window","scrollY","height","innerHeight","left","right","width","Math","max","min","innerWidth","triggerCenter","caretLeft","newTop","round","newLeft","scrollX","newCaretLeft","style","getPropertyValue","setProperty","handleClickOutside","e","isOutsidePopup","contains","target","isOutsideTrigger","handleKeyDown","key","preventDefault","querySelector","focus","focusable","Array","from","querySelectorAll","length","currentIndex","findIndex","el","document","activeElement","goBackward","shiftKey","nextIndex","handleActionableClick","actionable","closest","requestAnimationFrame","firstFocusable","addEventListener","capture","passive","removeEventListener","undefined","Trigger","_jsx","_jsxs","filter","Boolean","ref","onMouseEnter","onMouseLeave","role","tabIndex","close","body"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport './index.scss'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\n/**\n * Selector for all elements the browser considers tabbable.\n */\nconst TABBABLE_SELECTOR = [\n  'a[href]',\n  'button:not(:disabled)',\n  'input:not(:disabled):not([type=\"hidden\"])',\n  'select:not(:disabled)',\n  'textarea:not(:disabled)',\n  '[tabindex]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  'audio[controls]',\n  'video[controls]',\n  'summary',\n]\n  .map((s) => `${s}:not([tabindex=\"-1\"])`)\n  .join(', ')\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.RefObject<HTMLElement>\n  button?: React.ReactNode\n  buttonClassName?: string\n  buttonSize?: 'large' | 'medium' | 'small' | 'xsmall'\n  buttonType?: 'custom' | 'default' | 'none'\n  caret?: boolean\n  children?: React.ReactNode\n  className?: string\n  disabled?: boolean\n  /**\n   * Force control the open state of the popup, regardless of the trigger.\n   */\n  forceOpen?: boolean\n  /**\n   * Preferred horizontal alignment of the popup, if there is enough space available.\n   *\n   * @default 'left'\n   */\n  horizontalAlign?: 'center' | 'left' | 'right'\n  id?: string\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleClose?: () => void\n  onToggleOpen?: (active: boolean) => void\n  render?: (args: { close: () => void }) => React.ReactNode\n  showOnHover?: boolean\n  /**\n   * By default, the scrollbar is hidden. If you want to show it, set this to true.\n   * In both cases, the container is still scrollable.\n   *\n   * @default false\n   */\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  /**\n   * Preferred vertical alignment of the popup (position below or above the trigger),\n   * if there is enough space available.\n   *\n   * If the popup is too close to the edge of the viewport, it will flip to the opposite side\n   * regardless of the preferred vertical alignment.\n   *\n   * @default 'bottom'\n   */\n  verticalAlign?: 'bottom' | 'top'\n}\n\n/**\n * Component that renders a popup, as well as a button that triggers the popup.\n *\n * The popup is rendered in a portal, and is automatically positioned above / below the trigger,\n * depending on the verticalAlign prop and the space available.\n */\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    id,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign = 'left',\n    initActive = false,\n    noBackground,\n    onToggleClose,\n    onToggleOpen,\n    render,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    verticalAlign = 'bottom',\n  } = props\n\n  const popupRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  /**\n   * Keeps track of whether the popup was opened via keyboard.\n   * This is used to determine whether to autofocus the first element in the popup.\n   * If the popup was opened via mouse, we do not want to autofocus the first element.\n   */\n  const openedViaKeyboardRef = useRef(false)\n\n  const [mounted, setMounted] = useState(false)\n  const [active, setActiveInternal] = useState(initActive)\n  const [isOnTop, setIsOnTop] = useState(verticalAlign === 'top')\n\n  // Track when component is mounted to avoid SSR/client hydration mismatch\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const setActive = useCallback(\n    (isActive: boolean, viaKeyboard = false) => {\n      if (isActive) {\n        openedViaKeyboardRef.current = viaKeyboard\n        onToggleOpen?.(true)\n      } else {\n        onToggleClose?.()\n      }\n      setActiveInternal(isActive)\n    },\n    [onToggleClose, onToggleOpen],\n  )\n\n  // /////////////////////////////////////\n  // Position Calculation\n  //\n  // Calculates and applies popup position relative to trigger.\n  // Always checks viewport bounds (for flipping), but only updates\n  // styles if the calculated position differs from current position.\n  // /////////////////////////////////////\n\n  const updatePosition = useEffectEvent(() => {\n    const trigger = triggerRef.current\n    const popup = popupRef.current\n    if (!trigger || !popup) {\n      return\n    }\n\n    const triggerRect = trigger.getBoundingClientRect()\n    const popupRect = popup.getBoundingClientRect()\n\n    // Gap between the popup and the trigger/viewport edges (in pixels)\n    const offset = 10\n\n    // /////////////////////////////////////\n    // Vertical Positioning\n    // Calculates the `top` position in absolute page coordinates.\n    // Uses `verticalAlign` prop as the preferred direction, but flips\n    // to the opposite side if there's not enough viewport space.\n    // /////////////////////////////////////\n\n    let top: number\n    let onTop = verticalAlign === 'top'\n\n    if (verticalAlign === 'bottom') {\n      top = triggerRect.bottom + window.scrollY + offset\n\n      if (triggerRect.bottom + popupRect.height + offset > window.innerHeight) {\n        top = triggerRect.top + window.scrollY - popupRect.height - offset\n        onTop = true\n      }\n    } else {\n      top = triggerRect.top + window.scrollY - popupRect.height - offset\n\n      if (triggerRect.top - popupRect.height - offset < 0) {\n        top = triggerRect.bottom + window.scrollY + offset\n        onTop = false\n      }\n    }\n\n    setIsOnTop(onTop)\n\n    // /////////////////////////////////////\n    // Horizontal Positioning\n    // Calculates the `left` position based on `horizontalAlign` prop:\n    // - 'left': aligns popup's left edge with trigger's left edge\n    // - 'right': aligns popup's right edge with trigger's right edge\n    // - 'center': centers popup horizontally relative to trigger\n    // Then clamps to keep the popup within viewport bounds.\n    // /////////////////////////////////////\n\n    let left =\n      horizontalAlign === 'right'\n        ? triggerRect.right - popupRect.width\n        : horizontalAlign === 'center'\n          ? triggerRect.left + triggerRect.width / 2 - popupRect.width / 2\n          : triggerRect.left\n\n    left = Math.max(offset, Math.min(left, window.innerWidth - popupRect.width - offset))\n\n    // /////////////////////////////////////\n    // Caret Positioning\n    // Positions the caret arrow to point at the trigger's horizontal center.\n    // Clamps between 12px from edges to prevent caret from overflowing the popup.\n    // /////////////////////////////////////\n\n    const triggerCenter = triggerRect.left + triggerRect.width / 2\n    const caretLeft = Math.max(12, Math.min(triggerCenter - left, popupRect.width - 12))\n\n    // /////////////////////////////////////\n    // Apply Styles (only if changed)\n    // Compares calculated position with current styles to avoid unnecessary\n    // DOM updates during scroll. This prevents visual lag by relying on the absolute\n    // positioning where possible (popup slightly lags behind when scrolling really fast),\n    // while still allowing position changes when needed (e.g., sticky parent, viewport flip).\n    // Values are rounded to match browser's CSS precision and avoid false updates.\n    // /////////////////////////////////////\n\n    const newTop = `${Math.round(top)}px`\n    const newLeft = `${Math.round(left + window.scrollX)}px`\n    const newCaretLeft = `${Math.round(caretLeft)}px`\n\n    if (popup.style.top !== newTop) {\n      popup.style.top = newTop\n    }\n    if (popup.style.left !== newLeft) {\n      popup.style.left = newLeft\n    }\n    if (popup.style.getPropertyValue('--caret-left') !== newCaretLeft) {\n      popup.style.setProperty('--caret-left', newCaretLeft)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Outside Handler\n  // Closes popup when clicking outside both the popup and trigger.\n  // /////////////////////////////////////\n\n  const handleClickOutside = useEffectEvent((e: MouseEvent) => {\n    const isOutsidePopup = !popupRef.current?.contains(e.target as Node)\n    const isOutsideTrigger = !triggerRef.current?.contains(e.target as Node)\n\n    if (isOutsidePopup && isOutsideTrigger) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Keyboard Navigation\n  // Handles keyboard interactions when popup is open:\n  // - Escape: closes popup and returns focus to trigger\n  // - Tab/Shift+Tab: cycles through focusable items with wrapping\n  // - ArrowUp/ArrowDown: same as Shift+Tab/Tab for menu-style navigation\n  // Focus is managed manually to support elements the browser might skip.\n  // /////////////////////////////////////\n\n  const handleKeyDown = useEffectEvent((e: KeyboardEvent) => {\n    const popup = popupRef.current\n    if (!popup || !active) {\n      return\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      setActive(false)\n      triggerRef.current?.querySelector<HTMLElement>('button, [tabindex=\"0\"]')?.focus()\n      return\n    }\n\n    if (e.key === 'Tab' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      const focusable = Array.from(popup.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR))\n      if (focusable.length === 0) {\n        return\n      }\n\n      e.preventDefault()\n\n      const currentIndex = focusable.findIndex((el) => el === document.activeElement)\n      const goBackward = e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)\n\n      let nextIndex: number\n      if (currentIndex === -1) {\n        nextIndex = goBackward ? focusable.length - 1 : 0\n      } else if (goBackward) {\n        nextIndex = currentIndex === 0 ? focusable.length - 1 : currentIndex - 1\n      } else {\n        nextIndex = currentIndex === focusable.length - 1 ? 0 : currentIndex + 1\n      }\n\n      focusable[nextIndex].focus()\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Handler for Actionable Elements\n  // Closes popup when buttons/links inside are clicked (includes Enter/Space activation).\n  // /////////////////////////////////////\n\n  const handleActionableClick = useEffectEvent((e: MouseEvent) => {\n    const target = e.target as HTMLElement\n    // Check if the clicked element or any ancestor is an actionable element\n    const actionable = target.closest('button, a[href], [role=\"button\"], [role=\"menuitem\"]')\n    if (actionable && popupRef.current?.contains(actionable)) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Effect: Setup/Teardown position and focus management\n  // /////////////////////////////////////\n\n  useEffect(() => {\n    if (!active) {\n      return\n    }\n\n    const popup = popupRef.current\n    if (!popup) {\n      return\n    }\n\n    // /////////////////////////////////////\n    // Initial Position\n    // Calculate and apply popup position immediately on open.\n    // /////////////////////////////////////\n\n    updatePosition()\n\n    // /////////////////////////////////////\n    // Focus Management\n    // When opened via keyboard, autofocus the first focusable button.\n    // When opened via mouse, skip autofocus to avoid unwanted highlights.\n    // /////////////////////////////////////\n\n    if (openedViaKeyboardRef.current) {\n      // Use requestAnimationFrame to ensure DOM is ready.\n      requestAnimationFrame(() => {\n        const firstFocusable = popup.querySelector<HTMLElement>(TABBABLE_SELECTOR)\n        firstFocusable?.focus()\n      })\n    }\n\n    // /////////////////////////////////////\n    // Event Listeners\n    // - resize/scroll: recalculate position (only applies styles if changed)\n    // - mousedown: detect clicks outside to close\n    // - keydown: handle keyboard navigation\n    // /////////////////////////////////////\n\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, { capture: true, passive: true })\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n    popup.addEventListener('click', handleActionableClick)\n\n    return () => {\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, { capture: true })\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n      popup.removeEventListener('click', handleActionableClick)\n    }\n  }, [active])\n\n  useEffect(() => {\n    if (forceOpen !== undefined) {\n      setActive(forceOpen)\n    }\n  }, [forceOpen, setActive])\n\n  const Trigger = (\n    <PopupTrigger\n      active={active}\n      button={button}\n      buttonType={buttonType}\n      className={buttonClassName}\n      disabled={disabled}\n      noBackground={noBackground}\n      setActive={setActive}\n      size={buttonSize}\n    />\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} id={id}>\n      <div className={`${baseClass}__trigger-wrap`} ref={triggerRef}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n            role=\"button\"\n            tabIndex={0}\n          >\n            {Trigger}\n          </div>\n        ) : (\n          Trigger\n        )}\n      </div>\n\n      {mounted\n        ? // We need to make sure the popup is part of the DOM (although invisible), even if it's not active.\n          // This ensures that components within the popup, like modals, do not unmount when the popup closes.\n          // Otherwise, modals opened from the popup will close unexpectedly when clicking within the modal, since\n          // that closes the popup due to the click outside handler.\n          createPortal(\n            <div\n              className={\n                active\n                  ? [\n                      `${baseClass}__content`,\n                      `${baseClass}--size-${size}`,\n                      isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')\n                  : // Do not share any class names between active and disabled popups, to make sure\n                    // tests do not accidentally target inactive popups.\n                    `${baseClass}__hidden-content`\n              }\n              data-popup-id={id || undefined}\n              ref={popupRef}\n            >\n              <div\n                className={`${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`}\n              >\n                {render?.({ close: () => setActive(false) })}\n                {children}\n              </div>\n              {caret && <div className={`${baseClass}__caret`} />}\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["PopupList","React","useCallback","useEffect","useRef","useState","createPortal","useEffectEvent","PopupTrigger","baseClass","TABBABLE_SELECTOR","map","s","join","Popup","props","id","button","buttonClassName","buttonSize","buttonType","caret","children","className","disabled","forceOpen","horizontalAlign","initActive","noBackground","onToggleClose","onToggleOpen","portalClassName","render","showOnHover","showScrollbar","size","verticalAlign","popupRef","triggerRef","openedViaKeyboardRef","mounted","setMounted","active","setActiveInternal","isOnTop","setIsOnTop","setActive","isActive","viaKeyboard","current","updatePosition","trigger","popup","triggerRect","getBoundingClientRect","popupRect","offset","top","onTop","bottom","window","scrollY","height","innerHeight","left","right","width","Math","max","min","innerWidth","triggerCenter","caretLeft","newTop","round","newLeft","scrollX","newCaretLeft","style","getPropertyValue","setProperty","handleClickOutside","e","isOutsidePopup","contains","target","isOutsideTrigger","handleKeyDown","key","preventDefault","querySelector","focus","focusable","Array","from","querySelectorAll","length","currentIndex","findIndex","el","document","activeElement","goBackward","shiftKey","nextIndex","handleActionableClick","closest","actionable","requestAnimationFrame","firstFocusable","addEventListener","capture","passive","removeEventListener","undefined","Trigger","_jsx","_jsxs","filter","Boolean","ref","onMouseEnter","onMouseLeave","role","tabIndex","close","body"],"sources":["../../../src/elements/Popup/index.tsx"],"sourcesContent":["'use client'\nimport type { CSSProperties } from 'react'\n\nexport * as PopupList from './PopupButtonList/index.js'\n\nimport React, { useCallback, useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useEffectEvent } from '../../hooks/useEffectEvent.js'\nimport './index.scss'\nimport { PopupTrigger } from './PopupTrigger/index.js'\n\nconst baseClass = 'popup'\n\n/**\n * Selector for all elements the browser considers tabbable.\n */\nconst TABBABLE_SELECTOR = [\n  'a[href]',\n  'button:not(:disabled)',\n  'input:not(:disabled):not([type=\"hidden\"])',\n  'select:not(:disabled)',\n  'textarea:not(:disabled)',\n  '[tabindex]',\n  '[contenteditable]:not([contenteditable=\"false\"])',\n  'audio[controls]',\n  'video[controls]',\n  'summary',\n]\n  .map((s) => `${s}:not([tabindex=\"-1\"])`)\n  .join(', ')\n\nexport type PopupProps = {\n  backgroundColor?: CSSProperties['backgroundColor']\n  boundingRef?: React.RefObject<HTMLElement>\n  button?: React.ReactNode\n  /**\n   * The class name to apply to the button that triggers the popup.\n   */\n  buttonClassName?: string\n  buttonSize?: 'large' | 'medium' | 'small' | 'xsmall'\n  buttonType?: 'custom' | 'default' | 'none'\n  caret?: boolean\n  children?: React.ReactNode\n  /**\n   * The class name to apply to the popup container containing the trigger.\n   * This does not wrap the actual popup content, which is rendered in a portal.\n   */\n  className?: string\n  disabled?: boolean\n  /**\n   * Force control the open state of the popup, regardless of the trigger.\n   */\n  forceOpen?: boolean\n  /**\n   * Preferred horizontal alignment of the popup, if there is enough space available.\n   *\n   * @default 'left'\n   */\n  horizontalAlign?: 'center' | 'left' | 'right'\n  id?: string\n  initActive?: boolean\n  noBackground?: boolean\n  onToggleClose?: () => void\n  onToggleOpen?: (active: boolean) => void\n  /**\n   * Class name to apply to the portal container.\n   */\n  portalClassName?: string\n  render?: (args: { close: () => void }) => React.ReactNode\n  showOnHover?: boolean\n  /**\n   * By default, the scrollbar is hidden. If you want to show it, set this to true.\n   * In both cases, the container is still scrollable.\n   *\n   * @default false\n   */\n  showScrollbar?: boolean\n  size?: 'fit-content' | 'large' | 'medium' | 'small'\n  /**\n   * Preferred vertical alignment of the popup (position below or above the trigger),\n   * if there is enough space available.\n   *\n   * If the popup is too close to the edge of the viewport, it will flip to the opposite side\n   * regardless of the preferred vertical alignment.\n   *\n   * @default 'bottom'\n   */\n  verticalAlign?: 'bottom' | 'top'\n}\n\n/**\n * Component that renders a popup, as well as a button that triggers the popup.\n *\n * The popup is rendered in a portal, and is automatically positioned above / below the trigger,\n * depending on the verticalAlign prop and the space available.\n */\nexport const Popup: React.FC<PopupProps> = (props) => {\n  const {\n    id,\n    button,\n    buttonClassName,\n    buttonSize,\n    buttonType = 'default',\n    caret = true,\n    children,\n    className,\n    disabled,\n    forceOpen,\n    horizontalAlign = 'left',\n    initActive = false,\n    noBackground,\n    onToggleClose,\n    onToggleOpen,\n    portalClassName,\n    render,\n    showOnHover = false,\n    showScrollbar = false,\n    size = 'medium',\n    verticalAlign = 'bottom',\n  } = props\n\n  const popupRef = useRef<HTMLDivElement>(null)\n  const triggerRef = useRef<HTMLDivElement>(null)\n\n  /**\n   * Keeps track of whether the popup was opened via keyboard.\n   * This is used to determine whether to autofocus the first element in the popup.\n   * If the popup was opened via mouse, we do not want to autofocus the first element.\n   */\n  const openedViaKeyboardRef = useRef(false)\n\n  const [mounted, setMounted] = useState(false)\n  const [active, setActiveInternal] = useState(initActive)\n  const [isOnTop, setIsOnTop] = useState(verticalAlign === 'top')\n\n  // Track when component is mounted to avoid SSR/client hydration mismatch\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  const setActive = useCallback(\n    (isActive: boolean, viaKeyboard = false) => {\n      if (isActive) {\n        openedViaKeyboardRef.current = viaKeyboard\n        onToggleOpen?.(true)\n      } else {\n        onToggleClose?.()\n      }\n      setActiveInternal(isActive)\n    },\n    [onToggleClose, onToggleOpen],\n  )\n\n  // /////////////////////////////////////\n  // Position Calculation\n  //\n  // Calculates and applies popup position relative to trigger.\n  // Always checks viewport bounds (for flipping), but only updates\n  // styles if the calculated position differs from current position.\n  // /////////////////////////////////////\n\n  const updatePosition = useEffectEvent(() => {\n    const trigger = triggerRef.current\n    const popup = popupRef.current\n    if (!trigger || !popup) {\n      return\n    }\n\n    const triggerRect = trigger.getBoundingClientRect()\n    const popupRect = popup.getBoundingClientRect()\n\n    // Gap between the popup and the trigger/viewport edges (in pixels)\n    const offset = 10\n\n    // /////////////////////////////////////\n    // Vertical Positioning\n    // Calculates the `top` position in absolute page coordinates.\n    // Uses `verticalAlign` prop as the preferred direction, but flips\n    // to the opposite side if there's not enough viewport space.\n    // /////////////////////////////////////\n\n    let top: number\n    let onTop = verticalAlign === 'top'\n\n    if (verticalAlign === 'bottom') {\n      top = triggerRect.bottom + window.scrollY + offset\n\n      if (triggerRect.bottom + popupRect.height + offset > window.innerHeight) {\n        top = triggerRect.top + window.scrollY - popupRect.height - offset\n        onTop = true\n      }\n    } else {\n      top = triggerRect.top + window.scrollY - popupRect.height - offset\n\n      if (triggerRect.top - popupRect.height - offset < 0) {\n        top = triggerRect.bottom + window.scrollY + offset\n        onTop = false\n      }\n    }\n\n    setIsOnTop(onTop)\n\n    // /////////////////////////////////////\n    // Horizontal Positioning\n    // Calculates the `left` position based on `horizontalAlign` prop:\n    // - 'left': aligns popup's left edge with trigger's left edge\n    // - 'right': aligns popup's right edge with trigger's right edge\n    // - 'center': centers popup horizontally relative to trigger\n    // Then clamps to keep the popup within viewport bounds.\n    // /////////////////////////////////////\n\n    let left =\n      horizontalAlign === 'right'\n        ? triggerRect.right - popupRect.width\n        : horizontalAlign === 'center'\n          ? triggerRect.left + triggerRect.width / 2 - popupRect.width / 2\n          : triggerRect.left\n\n    left = Math.max(offset, Math.min(left, window.innerWidth - popupRect.width - offset))\n\n    // /////////////////////////////////////\n    // Caret Positioning\n    // Positions the caret arrow to point at the trigger's horizontal center.\n    // Clamps between 12px from edges to prevent caret from overflowing the popup.\n    // /////////////////////////////////////\n\n    const triggerCenter = triggerRect.left + triggerRect.width / 2\n    const caretLeft = Math.max(12, Math.min(triggerCenter - left, popupRect.width - 12))\n\n    // /////////////////////////////////////\n    // Apply Styles (only if changed)\n    // Compares calculated position with current styles to avoid unnecessary\n    // DOM updates during scroll. This prevents visual lag by relying on the absolute\n    // positioning where possible (popup slightly lags behind when scrolling really fast),\n    // while still allowing position changes when needed (e.g., sticky parent, viewport flip).\n    // Values are rounded to match browser's CSS precision and avoid false updates.\n    // /////////////////////////////////////\n\n    const newTop = `${Math.round(top)}px`\n    const newLeft = `${Math.round(left + window.scrollX)}px`\n    const newCaretLeft = `${Math.round(caretLeft)}px`\n\n    if (popup.style.top !== newTop) {\n      popup.style.top = newTop\n    }\n    if (popup.style.left !== newLeft) {\n      popup.style.left = newLeft\n    }\n    if (popup.style.getPropertyValue('--caret-left') !== newCaretLeft) {\n      popup.style.setProperty('--caret-left', newCaretLeft)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Outside Handler\n  // Closes popup when clicking outside both the popup and trigger.\n  // /////////////////////////////////////\n\n  const handleClickOutside = useEffectEvent((e: MouseEvent) => {\n    const isOutsidePopup = !popupRef.current?.contains(e.target as Node)\n    const isOutsideTrigger = !triggerRef.current?.contains(e.target as Node)\n\n    if (isOutsidePopup && isOutsideTrigger) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Keyboard Navigation\n  // Handles keyboard interactions when popup is open:\n  // - Escape: closes popup and returns focus to trigger\n  // - Tab/Shift+Tab: cycles through focusable items with wrapping\n  // - ArrowUp/ArrowDown: same as Shift+Tab/Tab for menu-style navigation\n  // Focus is managed manually to support elements the browser might skip.\n  // /////////////////////////////////////\n\n  const handleKeyDown = useEffectEvent((e: KeyboardEvent) => {\n    const popup = popupRef.current\n    if (!popup || !active) {\n      return\n    }\n\n    if (e.key === 'Escape') {\n      e.preventDefault()\n      setActive(false)\n      triggerRef.current?.querySelector<HTMLElement>('button, [tabindex=\"0\"]')?.focus()\n      return\n    }\n\n    if (e.key === 'Tab' || e.key === 'ArrowDown' || e.key === 'ArrowUp') {\n      const focusable = Array.from(popup.querySelectorAll<HTMLElement>(TABBABLE_SELECTOR))\n      if (focusable.length === 0) {\n        return\n      }\n\n      e.preventDefault()\n\n      const currentIndex = focusable.findIndex((el) => el === document.activeElement)\n      const goBackward = e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)\n\n      let nextIndex: number\n      if (currentIndex === -1) {\n        nextIndex = goBackward ? focusable.length - 1 : 0\n      } else if (goBackward) {\n        nextIndex = currentIndex === 0 ? focusable.length - 1 : currentIndex - 1\n      } else {\n        nextIndex = currentIndex === focusable.length - 1 ? 0 : currentIndex + 1\n      }\n\n      focusable[nextIndex].focus()\n    }\n  })\n\n  // /////////////////////////////////////\n  // Click Handler for Actionable Elements\n  // Closes popup when buttons/links inside are clicked (includes Enter/Space activation).\n  // /////////////////////////////////////\n\n  const handleActionableClick = useEffectEvent((e: MouseEvent) => {\n    const target = e.target as HTMLElement\n\n    // Allow opting out with data-popup-prevent-close attribute on element or ancestor\n    if (target.closest('[data-popup-prevent-close]')) {\n      return\n    }\n\n    // Check if the clicked element or any ancestor is an actionable element\n    const actionable = target.closest('button, a[href], [role=\"button\"], [role=\"menuitem\"]')\n    if (actionable && popupRef.current?.contains(actionable)) {\n      setActive(false)\n    }\n  })\n\n  // /////////////////////////////////////\n  // Effect: Setup/Teardown position and focus management\n  // /////////////////////////////////////\n\n  useEffect(() => {\n    if (!active) {\n      return\n    }\n\n    const popup = popupRef.current\n    if (!popup) {\n      return\n    }\n\n    // /////////////////////////////////////\n    // Initial Position\n    // Calculate and apply popup position immediately on open.\n    // /////////////////////////////////////\n\n    updatePosition()\n\n    // /////////////////////////////////////\n    // Focus Management\n    // When opened via keyboard, autofocus the first focusable button.\n    // When opened via mouse, skip autofocus to avoid unwanted highlights.\n    // /////////////////////////////////////\n\n    if (openedViaKeyboardRef.current) {\n      // Use requestAnimationFrame to ensure DOM is ready.\n      requestAnimationFrame(() => {\n        const firstFocusable = popup.querySelector<HTMLElement>(TABBABLE_SELECTOR)\n        firstFocusable?.focus()\n      })\n    }\n\n    // /////////////////////////////////////\n    // Event Listeners\n    // - resize/scroll: recalculate position (only applies styles if changed)\n    // - mousedown: detect clicks outside to close\n    // - keydown: handle keyboard navigation\n    // /////////////////////////////////////\n\n    window.addEventListener('resize', updatePosition)\n    window.addEventListener('scroll', updatePosition, { capture: true, passive: true })\n    document.addEventListener('mousedown', handleClickOutside)\n    document.addEventListener('keydown', handleKeyDown)\n    popup.addEventListener('click', handleActionableClick)\n\n    return () => {\n      window.removeEventListener('resize', updatePosition)\n      window.removeEventListener('scroll', updatePosition, { capture: true })\n      document.removeEventListener('mousedown', handleClickOutside)\n      document.removeEventListener('keydown', handleKeyDown)\n      popup.removeEventListener('click', handleActionableClick)\n    }\n  }, [active])\n\n  useEffect(() => {\n    if (forceOpen !== undefined) {\n      setActive(forceOpen)\n    }\n  }, [forceOpen, setActive])\n\n  const Trigger = (\n    <PopupTrigger\n      active={active}\n      button={button}\n      buttonType={buttonType}\n      className={buttonClassName}\n      disabled={disabled}\n      noBackground={noBackground}\n      setActive={setActive}\n      size={buttonSize}\n    />\n  )\n\n  return (\n    <div className={[baseClass, className].filter(Boolean).join(' ')} id={id}>\n      <div className={`${baseClass}__trigger-wrap`} ref={triggerRef}>\n        {showOnHover ? (\n          <div\n            className={`${baseClass}__on-hover-watch`}\n            onMouseEnter={() => setActive(true)}\n            onMouseLeave={() => setActive(false)}\n            role=\"button\"\n            tabIndex={0}\n          >\n            {Trigger}\n          </div>\n        ) : (\n          Trigger\n        )}\n      </div>\n\n      {mounted\n        ? // We need to make sure the popup is part of the DOM (although invisible), even if it's not active.\n          // This ensures that components within the popup, like modals, do not unmount when the popup closes.\n          // Otherwise, modals opened from the popup will close unexpectedly when clicking within the modal, since\n          // that closes the popup due to the click outside handler.\n          createPortal(\n            <div\n              className={\n                active\n                  ? [\n                      `${baseClass}__content`,\n                      `${baseClass}--size-${size}`,\n                      isOnTop ? `${baseClass}--v-top` : `${baseClass}--v-bottom`,\n                      portalClassName,\n                    ]\n                      .filter(Boolean)\n                      .join(' ')\n                  : // Do not share any class names between active and disabled popups, to make sure\n                    // tests do not accidentally target inactive popups.\n                    `${baseClass}__hidden-content`\n              }\n              data-popup-id={id || undefined}\n              ref={popupRef}\n            >\n              <div\n                className={`${baseClass}__scroll-container${showScrollbar ? ` ${baseClass}__scroll-container--show-scrollbar` : ''}`}\n              >\n                {render?.({ close: () => setActive(false) })}\n                {children}\n              </div>\n              {caret && <div className={`${baseClass}__caret`} />}\n            </div>,\n            document.body,\n          )\n        : null}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/PublishButton/ScheduleDrawer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/PublishButton/ScheduleDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,eAAe,EAAS,MAAM,SAAS,CAAA;AAS7D,OAAO,KAA+B,MAAM,OAAO,CAAA;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,YAAY,CAAA;AAgB5D,OAAO,cAAc,CAAA;AASrB,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,qBAAqB,CAAC,EAAE,eAAe,CAAA;IACvC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA0V1C,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/elements/PublishButton/ScheduleDrawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,eAAe,EAAS,MAAM,SAAS,CAAA;AAS7D,OAAO,KAA+B,MAAM,OAAO,CAAA;AAGnD,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,YAAY,CAAA;AAgB5D,OAAO,cAAc,CAAA;AASrB,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,qBAAqB,CAAC,EAAE,eAAe,CAAA;IACvC,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAOD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA8U1C,CAAA"}

package/dist/elements/PublishButton/ScheduleDrawer/index.js

@@ -55,8 +55,7 @@ export const ScheduleDrawer = ({
       localization,
       routes: {
         api
-      },
-      serverURL
+      }
     }
   } = useConfig();
   const {
@@ -159,7 +158,7 @@ export const ScheduleDrawer = ({
       t
     }));
     setUpcoming(docs);
-  }, [collectionSlug, globalSlug, serverURL, api, i18n, dateFormat, localization, supportedTimezones, t, id]);
+  }, [collectionSlug, globalSlug, api, i18n, dateFormat, localization, supportedTimezones, t, id]);
   const deleteHandler = React.useCallback(async id_0 => {
     try {
       await schedulePublish({
@@ -180,9 +179,9 @@ export const ScheduleDrawer = ({
       return toast.error(t('general:noDateSelected'));
     }
     setProcessing(true);
-    let publishSpecificLocale;
+    let localeToPublish;
     if (typeof locale === 'object' && locale.value !== 'all' && type === 'publish') {
-      publishSpecificLocale = locale.value;
+      localeToPublish = locale.value;
     }
     try {
       await schedulePublish({
@@ -193,7 +192,7 @@ export const ScheduleDrawer = ({
           value: String(id)
         } : undefined,
         global: globalSlug || undefined,
-        locale: publishSpecificLocale,
+        localeToPublish,
         timezone
       });
       setDate(undefined);