@payloadcms/ui 3.69.0-internal.424436e → 3.69.0

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

@@ -1,12 +1,10 @@
 'use client';
 
-import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import './index.scss';
 const baseClass = 'popup-button';
 export const PopupTrigger = props => {
-  const $ = _c(24);
   const {
     active,
     button,
@@ -17,103 +15,37 @@ export const PopupTrigger = props => {
     setActive,
     size
   } = props;
-  const t0 = `${baseClass}--${buttonType}`;
-  const t1 = !noBackground && `${baseClass}--background`;
-  const t2 = size && `${baseClass}--size-${size}`;
-  const t3 = disabled && `${baseClass}--disabled`;
-  let t4;
-  if ($[0] !== className || $[1] !== t0 || $[2] !== t1 || $[3] !== t2 || $[4] !== t3) {
-    t4 = [baseClass, className, t0, t1, t2, t3].filter(Boolean);
-    $[0] = className;
-    $[1] = t0;
-    $[2] = t1;
-    $[3] = t2;
-    $[4] = t3;
-    $[5] = t4;
-  } else {
-    t4 = $[5];
-  }
-  const classes = t4.join(" ");
-  let t5;
-  if ($[6] !== active || $[7] !== setActive) {
-    t5 = () => {
-      setActive(!active);
-    };
-    $[6] = active;
-    $[7] = setActive;
-    $[8] = t5;
-  } else {
-    t5 = $[8];
-  }
-  const handleClick = t5;
-  if (buttonType === "none") {
-    return null;
-  }
-  if (buttonType === "custom") {
-    let t6;
-    if ($[9] !== handleClick) {
-      t6 = e => {
-        if (e.key === "Enter") {
-          handleClick();
-        }
-      };
-      $[9] = handleClick;
-      $[10] = t6;
-    } else {
-      t6 = $[10];
+  const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`, size && `${baseClass}--size-${size}`, disabled && `${baseClass}--disabled`].filter(Boolean).join(' ');
+  const handleClick = () => {
+    setActive(!active, false);
+  };
+  const handleKeyDown = e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setActive(!active, true);
     }
-    let t7;
-    if ($[11] !== button || $[12] !== classes || $[13] !== handleClick || $[14] !== t6) {
-      t7 = _jsx("div", {
-        className: classes,
-        onClick: handleClick,
-        onKeyDown: t6,
-        role: "button",
-        tabIndex: 0,
-        children: button
-      });
-      $[11] = button;
-      $[12] = classes;
-      $[13] = handleClick;
-      $[14] = t6;
-      $[15] = t7;
-    } else {
-      t7 = $[15];
-    }
-    return t7;
-  }
-  let t6;
-  if ($[16] !== handleClick) {
-    t6 = e_0 => {
-      if (e_0.key === "Enter") {
-        handleClick();
-      }
-    };
-    $[16] = handleClick;
-    $[17] = t6;
-  } else {
-    t6 = $[17];
+  };
+  if (buttonType === 'none') {
+    return null;
   }
-  let t7;
-  if ($[18] !== button || $[19] !== classes || $[20] !== disabled || $[21] !== handleClick || $[22] !== t6) {
-    t7 = _jsx("button", {
+  if (buttonType === 'custom') {
+    return /*#__PURE__*/_jsx("div", {
       className: classes,
-      disabled,
       onClick: handleClick,
-      onKeyDown: t6,
+      onKeyDown: handleKeyDown,
+      role: "button",
       tabIndex: 0,
-      type: "button",
       children: button
     });
-    $[18] = button;
-    $[19] = classes;
-    $[20] = disabled;
-    $[21] = handleClick;
-    $[22] = t6;
-    $[23] = t7;
-  } else {
-    t7 = $[23];
   }
-  return t7;
+  return /*#__PURE__*/_jsx("button", {
+    className: classes,
+    disabled: disabled,
+    onClick: handleClick,
+    onKeyDown: handleKeyDown,
+    tabIndex: 0,
+    type: "button",
+    children: button
+  });
 };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","baseClass","PopupTrigger","props","$","active","button","buttonType","className","disabled","noBackground","setActive","size","t0","t1","t2","t3","t4","filter","Boolean","classes","join","t5","handleClick","t6","e","key","t7","_jsx","onClick","onKeyDown","role","tabIndex","children","e_0","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-button'\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button: React.ReactNode\n  buttonType: 'custom' | 'default' | 'none'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  setActive: (active: boolean) => void\n  size?: 'large' | 'medium' | 'small' | 'xsmall'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, disabled, noBackground, setActive, size } = 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  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = React.useCallback(() => {\n    setActive(!active)\n  }, [active, setActive])\n\n  if (buttonType === 'none') {\n    return null\n  }\n\n  if (buttonType === 'custom') {\n    return (\n      <div\n        className={classes}\n        onClick={handleClick}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            handleClick()\n          }\n        }}\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={(e) => {\n        if (e.key === 'Enter') {\n          handleClick()\n        }\n      }}\n      tabIndex={0}\n      type=\"button\"\n    >\n      {button}\n    </button>\n  )\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","setActive","size","classes","filter","Boolean","join","handleClick","handleKeyDown","e","key","preventDefault","_jsx","onClick","onKeyDown","role","tabIndex","type"],"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["'use client'\nimport React from 'react'\n\nimport './index.scss'\n\nconst baseClass = 'popup-button'\n\nexport type PopupTriggerProps = {\n  active: boolean\n  button: React.ReactNode\n  buttonType: 'custom' | 'default' | 'none'\n  className?: string\n  disabled?: boolean\n  noBackground?: boolean\n  setActive: (active: boolean, viaKeyboard?: boolean) => void\n  size?: 'large' | 'medium' | 'small' | 'xsmall'\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, disabled, noBackground, setActive, size } = 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  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = () => {\n    setActive(!active, false)\n  }\n\n  const handleKeyDown = (e: React.KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      setActive(!active, true)\n    }\n  }\n\n  if (buttonType === 'none') {\n    return null\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;AAalB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,YAAY;IAAEC,SAAS;IAAEC;EAAI,CAAE,GAAGR,KAAA;EAE3F,MAAMS,OAAA,GAAU,CACdX,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,EAC3CU,IAAA,IAAQ,GAAGV,SAAA,UAAmBU,IAAA,EAAM,EACpCH,QAAA,IAAY,GAAGP,SAAA,YAAqB,CACrC,CACEY,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAcA,CAAA;IAClBN,SAAA,CAAU,CAACN,MAAA,EAAQ;EACrB;EAEA,MAAMa,aAAA,GAAiBC,CAAA;IACrB,IAAIA,CAAA,CAAEC,GAAG,KAAK,WAAWD,CAAA,CAAEC,GAAG,KAAK,KAAK;MACtCD,CAAA,CAAEE,cAAc;MAChBV,SAAA,CAAU,CAACN,MAAA,EAAQ;IACrB;EACF;EAEA,IAAIE,UAAA,KAAe,QAAQ;IACzB,OAAO;EACT;EAEA,IAAIA,UAAA,KAAe,UAAU;IAC3B,oBACEe,IAAA,CAAC;MACCd,SAAA,EAAWK,OAAA;MACXU,OAAA,EAASN,WAAA;MACTO,SAAA,EAAWN,aAAA;MACXO,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETpB;;EAGP;EAEA,oBACEgB,IAAA,CAAC;IACCd,SAAA,EAAWK,OAAA;IACXJ,QAAA,EAAUA,QAAA;IACVc,OAAA,EAASN,WAAA;IACTO,SAAA,EAAWN,aAAA;IACXQ,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJrB;;AAGP","ignoreList":[]}

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

@@ -13,18 +13,49 @@ export type PopupProps = {
     children?: React.ReactNode;
     className?: string;
     disabled?: boolean;
+    /**
+     * Force control the open state of the popup, regardless of the trigger.
+     */
     forceOpen?: boolean;
+    /**
+     * Preferred horizontal alignment of the popup, if there is enough space available.
+     *
+     * @default 'left'
+     */
     horizontalAlign?: 'center' | 'left' | 'right';
     id?: string;
     initActive?: boolean;
     noBackground?: boolean;
     onToggleClose?: () => void;
     onToggleOpen?: (active: boolean) => void;
-    render?: (any: any) => React.ReactNode;
+    render?: (args: {
+        close: () => void;
+    }) => React.ReactNode;
     showOnHover?: boolean;
+    /**
+     * By default, the scrollbar is hidden. If you want to show it, set this to true.
+     * In both cases, the container is still scrollable.
+     *
+     * @default false
+     */
     showScrollbar?: boolean;
     size?: 'fit-content' | 'large' | 'medium' | 'small';
+    /**
+     * Preferred vertical alignment of the popup (position below or above the trigger),
+     * if there is enough space available.
+     *
+     * If the popup is too close to the edge of the viewport, it will flip to the opposite side
+     * regardless of the preferred vertical alignment.
+     *
+     * @default 'bottom'
+     */
     verticalAlign?: 'bottom' | 'top';
 };
+/**
+ * Component that renders a popup, as well as a button that triggers the popup.
+ *
+ * The popup is rendered in a portal, and is automatically positioned above / below the trigger,
+ * depending on the verticalAlign prop and the space available.
+ */
 export declare const Popup: React.FC<PopupProps>;
 //# sourceMappingURL=index.d.ts.map

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;AAGvD,OAAO,KAAmD,MAAM,OAAO,CAAA;AAIvE,OAAO,cAAc,CAAA;AAIrB,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,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,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,GAAG,KAAA,KAAK,KAAK,CAAC,SAAS,CAAA;IACjC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,IAAI,CAAC,EAAE,aAAa,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnD,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAA;CACjC,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAuMtC,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,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"}