@payloadcms/ui 3.0.0-beta.9 → 3.0.0-beta.91

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

@@ -1,53 +1,62 @@
 'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import LinkImport from 'next/link.js';
 import * as React from 'react'; // TODO: abstract this out to support all routers
+import './index.scss';
 const Link = LinkImport.default || LinkImport;
 const baseClass = 'popup-button-list';
-export const ButtonGroup = ({ buttonSize = 'default', children, className, textAlign = 'left' })=>{
-    const classes = [
-        baseClass,
-        className,
-        `${baseClass}__text-align--${textAlign}`,
-        `${baseClass}__button-size--${buttonSize}`
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes
-    }, children);
+export const ButtonGroup = ({
+  buttonSize = 'default',
+  children,
+  className,
+  textAlign = 'left'
+}) => {
+  const classes = [baseClass, className, `${baseClass}__text-align--${textAlign}`, `${baseClass}__button-size--${buttonSize}`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    children: children
+  });
 };
-export const Button = ({ id, active, children, className, href, onClick })=>{
-    const classes = [
-        `${baseClass}__button`,
-        active && `${baseClass}__button--selected`,
-        className
-    ].filter(Boolean).join(' ');
-    if (href) {
-        return /*#__PURE__*/ React.createElement(Link, {
-            className: classes,
-            href: href,
-            id: id,
-            onClick: ()=>{
-                if (onClick) {
-                    onClick();
-                }
-            }
-        }, children);
-    }
-    if (onClick) {
-        return /*#__PURE__*/ React.createElement("button", {
-            className: classes,
-            id: id,
-            onClick: ()=>{
-                if (onClick) {
-                    onClick();
-                }
-            },
-            type: "button"
-        }, children);
-    }
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes,
-        id: id
-    }, children);
+export const Button = ({
+  id,
+  active,
+  children,
+  className,
+  href,
+  onClick
+}) => {
+  const classes = [`${baseClass}__button`, active && `${baseClass}__button--selected`, className].filter(Boolean).join(' ');
+  if (href) {
+    return /*#__PURE__*/_jsx(Link, {
+      className: classes,
+      href: href,
+      id: id,
+      onClick: e => {
+        if (onClick) {
+          onClick(e);
+        }
+      },
+      children: children
+    });
+  }
+  if (onClick) {
+    return /*#__PURE__*/_jsx("button", {
+      className: classes,
+      id: id,
+      onClick: e => {
+        if (onClick) {
+          onClick(e);
+        }
+      },
+      type: "button",
+      children: children
+    });
+  }
+  return /*#__PURE__*/_jsx("div", {
+    className: classes,
+    id: id,
+    children: children
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/link` dependency out from this component\nimport type { LinkProps } from 'next/link.js'\n\nimport LinkImport from 'next/link.js'\nimport * as React from 'react' // TODO: abstract this out to support all routers\n\nimport './index.scss'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nconst baseClass = 'popup-button-list'\n\nexport const ButtonGroup: React.FC<{\n  buttonSize?: 'default' | 'small'\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\ntype MenuButtonProps = {\n  active?: boolean\n  children: React.ReactNode\n  className?: string\n  href?: LinkProps['href']\n  id?: string\n  onClick?: () => void\n}\n\nexport const Button: React.FC<MenuButtonProps> = ({\n  id,\n  active,\n  children,\n  className,\n  href,\n  onClick,\n}) => {\n  const classes = [`${baseClass}__button`, active && `${baseClass}__button--selected`, className]\n    .filter(Boolean)\n    .join(' ')\n\n  if (href) {\n    return (\n      <Link\n        className={classes}\n        href={href}\n        id={id}\n        onClick={() => {\n          if (onClick) {\n            onClick()\n          }\n        }}\n      >\n        {children}\n      </Link>\n    )\n  }\n\n  if (onClick) {\n    return (\n      <button\n        className={classes}\n        id={id}\n        onClick={() => {\n          if (onClick) {\n            onClick()\n          }\n        }}\n        type=\"button\"\n      >\n        {children}\n      </button>\n    )\n  }\n\n  return (\n    <div className={classes} id={id}>\n      {children}\n    </div>\n  )\n}\n"],"names":["LinkImport","React","Link","default","baseClass","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","div","Button","id","active","href","onClick","button","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;AAIA,OAAOA,gBAAgB,eAAc;AACrC,YAAYC,WAAW,QAAO,CAAC,iDAAiD;AAIhF,MAAMC,OAAQF,WAAWG,OAAO,IAAIH;AAEpC,MAAMI,YAAY;AAElB,OAAO,MAAMC,cAKR,CAAC,EAAEC,aAAa,SAAS,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,YAAY,MAAM,EAAE;IACvE,MAAMC,UAAU;QACdN;QACAI;QACA,CAAC,EAAEJ,UAAU,cAAc,EAAEK,UAAU,CAAC;QACxC,CAAC,EAAEL,UAAU,eAAe,EAAEE,WAAW,CAAC;KAC3C,CACEK,MAAM,CAACC,SACPC,IAAI,CAAC;IACR,qBAAO,oBAACC;QAAIN,WAAWE;OAAUH;AACnC,EAAC;AAWD,OAAO,MAAMQ,SAAoC,CAAC,EAChDC,EAAE,EACFC,MAAM,EACNV,QAAQ,EACRC,SAAS,EACTU,IAAI,EACJC,OAAO,EACR;IACC,MAAMT,UAAU;QAAC,CAAC,EAAEN,UAAU,QAAQ,CAAC;QAAEa,UAAU,CAAC,EAAEb,UAAU,kBAAkB,CAAC;QAAEI;KAAU,CAC5FG,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIK,MAAM;QACR,qBACE,oBAAChB;YACCM,WAAWE;YACXQ,MAAMA;YACNF,IAAIA;YACJG,SAAS;gBACP,IAAIA,SAAS;oBACXA;gBACF;YACF;WAECZ;IAGP;IAEA,IAAIY,SAAS;QACX,qBACE,oBAACC;YACCZ,WAAWE;YACXM,IAAIA;YACJG,SAAS;gBACP,IAAIA,SAAS;oBACXA;gBACF;YACF;YACAE,MAAK;WAEJd;IAGP;IAEA,qBACE,oBAACO;QAAIN,WAAWE;QAASM,IAAIA;OAC1BT;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["LinkImport","React","Link","default","baseClass","ButtonGroup","buttonSize","children","className","textAlign","classes","filter","Boolean","join","_jsx","Button","id","active","href","onClick","e","type"],"sources":["../../../../src/elements/Popup/PopupButtonList/index.tsx"],"sourcesContent":["'use client'\n// TODO: abstract the `next/link` dependency out from this component\nimport type { LinkProps } from 'next/link.js'\n\nimport LinkImport from 'next/link.js'\nimport * as React from 'react' // TODO: abstract this out to support all routers\n\nimport './index.scss'\n\nconst Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default\n\nconst baseClass = 'popup-button-list'\n\nexport const ButtonGroup: React.FC<{\n  buttonSize?: 'default' | 'small'\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\ntype MenuButtonProps = {\n  active?: boolean\n  children: React.ReactNode\n  className?: string\n  href?: LinkProps['href']\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  href,\n  onClick,\n}) => {\n  const classes = [`${baseClass}__button`, active && `${baseClass}__button--selected`, className]\n    .filter(Boolean)\n    .join(' ')\n\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      >\n        {children}\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        {children}\n      </button>\n    )\n  }\n\n  return (\n    <div className={classes} id={id}>\n      {children}\n    </div>\n  )\n}\n"],"mappings":"AAAA;;;AAIA,OAAOA,UAAA,MAAgB;AACvB,YAAYC,KAAA,MAAW,QAAO,CAAC;AAE/B,OAAO;AAEP,MAAMC,IAAA,GAAQF,UAAA,CAAWG,OAAO,IAAIH,UAAA;AAEpC,MAAMI,SAAA,GAAY;AAElB,OAAO,MAAMC,WAAA,GAKRA,CAAC;EAAEC,UAAA,GAAa,SAAS;EAAEC,QAAQ;EAAEC,SAAS;EAAEC,SAAA,GAAY;AAAM,CAAE;EACvE,MAAMC,OAAA,GAAU,CACdN,SAAA,EACAI,SAAA,EACA,GAAGJ,SAAA,iBAA0BK,SAAA,EAAW,EACxC,GAAGL,SAAA,kBAA2BE,UAAA,EAAY,CAC3C,CACEK,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EACR,oBAAOC,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;cAAUH;;AACnC;AAWA,OAAO,MAAMQ,MAAA,GAAoCA,CAAC;EAChDC,EAAE;EACFC,MAAM;EACNV,QAAQ;EACRC,SAAS;EACTU,IAAI;EACJC;AAAO,CACR;EACC,MAAMT,OAAA,GAAU,CAAC,GAAGN,SAAA,UAAmB,EAAEa,MAAA,IAAU,GAAGb,SAAA,oBAA6B,EAAEI,SAAA,CAAU,CAC5FG,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,IAAIK,IAAA,EAAM;IACR,oBACEJ,IAAA,CAACZ,IAAA;MACCM,SAAA,EAAWE,OAAA;MACXQ,IAAA,EAAMA,IAAA;MACNF,EAAA,EAAIA,EAAA;MACJG,OAAA,EAAUC,CAAA;QACR,IAAID,OAAA,EAAS;UACXA,OAAA,CAAQC,CAAA;QACV;MACF;gBAECb;;EAGP;EAEA,IAAIY,OAAA,EAAS;IACX,oBACEL,IAAA,CAAC;MACCN,SAAA,EAAWE,OAAA;MACXM,EAAA,EAAIA,EAAA;MACJG,OAAA,EAAUC,CAAA;QACR,IAAID,OAAA,EAAS;UACXA,OAAA,CAAQC,CAAA;QACV;MACF;MACAC,IAAA,EAAK;gBAEJd;;EAGP;EAEA,oBACEO,IAAA,CAAC;IAAIN,SAAA,EAAWE,OAAA;IAASM,EAAA,EAAIA,EAAA;cAC1BT;;AAGP","ignoreList":[]}

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

@@ -5,6 +5,8 @@ export type PopupTriggerProps = {
     button: React.ReactNode;
     buttonType: 'custom' | 'default' | 'none';
     className?: string;
+    disabled?: boolean;
+    noBackground?: boolean;
     setActive: (active: boolean) => void;
 };
 export declare const PopupTrigger: React.FC<PopupTriggerProps>;

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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAkCpD,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,cAAc,CAAA;AAIrB,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,UAAU,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAA;IACzC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;CACrC,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+CpD,CAAA"}

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

@@ -1,35 +1,45 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
+import './index.scss';
 const baseClass = 'popup-button';
-export const PopupTrigger = (props)=>{
-    const { active, button, buttonType, className, setActive } = props;
-    const classes = [
-        baseClass,
-        className,
-        `${baseClass}--${buttonType}`
-    ].filter(Boolean).join(' ');
-    const handleClick = ()=>{
-        setActive(!active);
-    };
-    if (buttonType === 'none') {
-        return null;
-    }
-    if (buttonType === 'custom') {
-        return /*#__PURE__*/ React.createElement("div", {
-            className: classes,
-            onClick: handleClick,
-            onKeyDown: (e)=>{
-                if (e.key === 'Enter') handleClick();
-            },
-            role: "button",
-            tabIndex: 0
-        }, button);
-    }
-    return /*#__PURE__*/ React.createElement("button", {
-        className: classes,
-        onClick: ()=>setActive(!active),
-        tabIndex: 0,
-        type: "button"
-    }, button);
+export const PopupTrigger = props => {
+  const {
+    active,
+    button,
+    buttonType,
+    className,
+    disabled,
+    noBackground,
+    setActive
+  } = props;
+  const classes = [baseClass, className, `${baseClass}--${buttonType}`, !noBackground && `${baseClass}--background`].filter(Boolean).join(' ');
+  const handleClick = () => {
+    setActive(!active);
+  };
+  if (buttonType === 'none') {
+    return null;
+  }
+  if (buttonType === 'custom') {
+    return /*#__PURE__*/_jsx("div", {
+      className: classes,
+      onClick: handleClick,
+      onKeyDown: e => {
+        if (e.key === 'Enter') handleClick();
+      },
+      role: "button",
+      tabIndex: 0,
+      children: button
+    });
+  }
+  return /*#__PURE__*/_jsx("button", {
+    className: classes,
+    disabled: disabled,
+    onClick: handleClick,
+    tabIndex: 0,
+    type: "button",
+    children: button
+  });
 };
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Popup/PopupTrigger/index.tsx"],"sourcesContent":["import 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  setActive: (active: boolean) => void\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, setActive } = props\n\n  const classes = [baseClass, className, `${baseClass}--${buttonType}`].filter(Boolean).join(' ')\n\n  const handleClick = () => {\n    setActive(!active)\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={(e) => {\n          if (e.key === 'Enter') handleClick()\n        }}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {button}\n      </div>\n    )\n  }\n\n  return (\n    <button className={classes} onClick={() => setActive(!active)} tabIndex={0} type=\"button\">\n      {button}\n    </button>\n  )\n}\n"],"names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","setActive","classes","filter","Boolean","join","handleClick","div","onClick","onKeyDown","e","key","role","tabIndex","type"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAAOA,WAAW,QAAO;AAIzB,MAAMC,YAAY;AAUlB,OAAO,MAAMC,eAA4C,CAACC;IACxD,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,SAAS,EAAE,GAAGL;IAE7D,MAAMM,UAAU;QAACR;QAAWM;QAAW,CAAC,EAAEN,UAAU,EAAE,EAAEK,WAAW,CAAC;KAAC,CAACI,MAAM,CAACC,SAASC,IAAI,CAAC;IAE3F,MAAMC,cAAc;QAClBL,UAAU,CAACJ;IACb;IAEA,IAAIE,eAAe,QAAQ;QACzB,OAAO;IACT;IAEA,IAAIA,eAAe,UAAU;QAC3B,qBACE,oBAACQ;YACCP,WAAWE;YACXM,SAASF;YACTG,WAAW,CAACC;gBACV,IAAIA,EAAEC,GAAG,KAAK,SAASL;YACzB;YACAM,MAAK;YACLC,UAAU;WAETf;IAGP;IAEA,qBACE,oBAACA;QAAOE,WAAWE;QAASM,SAAS,IAAMP,UAAU,CAACJ;QAASgB,UAAU;QAAGC,MAAK;OAC9EhB;AAGP,EAAC"}
+{"version":3,"file":"index.js","names":["React","baseClass","PopupTrigger","props","active","button","buttonType","className","disabled","noBackground","setActive","classes","filter","Boolean","join","handleClick","_jsx","onClick","onKeyDown","e","key","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) => void\n}\n\nexport const PopupTrigger: React.FC<PopupTriggerProps> = (props) => {\n  const { active, button, buttonType, className, disabled, noBackground, setActive } = props\n\n  const classes = [\n    baseClass,\n    className,\n    `${baseClass}--${buttonType}`,\n    !noBackground && `${baseClass}--background`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const handleClick = () => {\n    setActive(!active)\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={(e) => {\n          if (e.key === 'Enter') handleClick()\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      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;AAYlB,OAAO,MAAMC,YAAA,GAA6CC,KAAA;EACxD,MAAM;IAAEC,MAAM;IAAEC,MAAM;IAAEC,UAAU;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,YAAY;IAAEC;EAAS,CAAE,GAAGP,KAAA;EAErF,MAAMQ,OAAA,GAAU,CACdV,SAAA,EACAM,SAAA,EACA,GAAGN,SAAA,KAAcK,UAAA,EAAY,EAC7B,CAACG,YAAA,IAAgB,GAAGR,SAAA,cAAuB,CAC5C,CACEW,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;EAER,MAAMC,WAAA,GAAcA,CAAA;IAClBL,SAAA,CAAU,CAACN,MAAA;EACb;EAEA,IAAIE,UAAA,KAAe,QAAQ;IACzB,OAAO;EACT;EAEA,IAAIA,UAAA,KAAe,UAAU;IAC3B,oBACEU,IAAA,CAAC;MACCT,SAAA,EAAWI,OAAA;MACXM,OAAA,EAASF,WAAA;MACTG,SAAA,EAAYC,CAAA;QACV,IAAIA,CAAA,CAAEC,GAAG,KAAK,SAASL,WAAA;MACzB;MACAM,IAAA,EAAK;MACLC,QAAA,EAAU;gBAETjB;;EAGP;EAEA,oBACEW,IAAA,CAAC;IACCT,SAAA,EAAWI,OAAA;IACXH,QAAA,EAAUA,QAAA;IACVS,OAAA,EAASF,WAAA;IACTO,QAAA,EAAU;IACVC,IAAA,EAAK;cAEJlB;;AAGP","ignoreList":[]}

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

@@ -7,8 +7,11 @@
   font-size: inherit;
   line-height: inherit;
   font-family: inherit;
-  background: transparent;
   border: 0;
   cursor: pointer;
   display: inline-flex;
+
+  &--background {
+    background: transparent;
+  }
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/elements/Popup/PopupTrigger/types.ts"],"names":[],"rangeMappings":"","mappings":""}
+{"version":3,"file":"types.js","names":[],"sources":["../../../../src/elements/Popup/PopupTrigger/types.ts"],"sourcesContent":[null],"mappings":"","ignoreList":[]}

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

@@ -4,16 +4,18 @@ import React from 'react';
 import './index.scss';
 export type PopupProps = {
     backgroundColor?: CSSProperties['backgroundColor'];
-    boundingRef?: React.MutableRefObject<HTMLElement>;
+    boundingRef?: React.RefObject<HTMLElement>;
     button?: React.ReactNode;
     buttonClassName?: string;
     buttonType?: 'custom' | 'default' | 'none';
     caret?: boolean;
     children?: React.ReactNode;
     className?: string;
+    disabled?: boolean;
     forceOpen?: boolean;
     horizontalAlign?: 'center' | 'left' | 'right';
     initActive?: boolean;
+    noBackground?: boolean;
     onToggleOpen?: (active: boolean) => void;
     render?: (any: any) => React.ReactNode;
     showOnHover?: boolean;

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,gBAAgB,CAAC,WAAW,CAAC,CAAA;IACjD,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,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,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,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,CAkKtC,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;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,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,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,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,CAkLtC,CAAA"}

package/dist/elements/Popup/index.js

@@ -1,142 +1,163 @@
 'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export * as PopupList from './PopupButtonList/index.js';
-import * as facelessUIImport from '@faceless-ui/window-info';
+import { useWindowInfo } from '@faceless-ui/window-info';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntersect } from '../../hooks/useIntersect.js';
 import { PopupTrigger } from './PopupTrigger/index.js';
+import './index.scss';
 const baseClass = 'popup';
-export const Popup = (props)=>{
-    const { boundingRef, button, buttonClassName, buttonType = 'default', caret = true, children, className, forceOpen, horizontalAlign: horizontalAlignFromProps = 'left', initActive = false, onToggleOpen, render, showOnHover = false, showScrollbar = false, size = 'medium', verticalAlign: verticalAlignFromProps = 'top' } = props;
-    const { useWindowInfo } = facelessUIImport;
-    const { height: windowHeight, width: windowWidth } = useWindowInfo();
-    const [intersectionRef, intersectionEntry] = useIntersect({
-        root: boundingRef?.current || null,
-        rootMargin: '-100px 0px 0px 0px',
-        threshold: 1
-    });
-    const contentRef = useRef(null);
-    const [active, setActive] = useState(initActive);
-    const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps);
-    const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps);
-    const setPosition = useCallback(({ horizontal = false, vertical = false })=>{
-        if (contentRef.current) {
-            const bounds = contentRef.current.getBoundingClientRect();
-            const { bottom: contentBottomPos, left: contentLeftPos, right: contentRightPos, top: contentTopPos } = bounds;
-            let boundingTopPos = 100;
-            let boundingRightPos = document.documentElement.clientWidth;
-            let boundingBottomPos = document.documentElement.clientHeight;
-            let boundingLeftPos = 0;
-            if (boundingRef?.current) {
-                ({ bottom: boundingBottomPos, left: boundingLeftPos, right: boundingRightPos, top: boundingTopPos } = boundingRef.current.getBoundingClientRect());
-            }
-            if (horizontal) {
-                if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {
-                    setHorizontalAlign('right');
-                } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {
-                    setHorizontalAlign('left');
-                }
-            }
-            if (vertical) {
-                if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {
-                    setVerticalAlign('bottom');
-                } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {
-                    setVerticalAlign('top');
-                }
-            }
-        }
-    }, [
-        boundingRef
-    ]);
-    const handleClickOutside = useCallback((e)=>{
-        if (contentRef.current.contains(e.target)) {
-            return;
+export const Popup = props => {
+  const {
+    boundingRef,
+    button,
+    buttonClassName,
+    buttonType = 'default',
+    caret = true,
+    children,
+    className,
+    disabled,
+    forceOpen,
+    horizontalAlign: horizontalAlignFromProps = 'left',
+    initActive = false,
+    noBackground,
+    onToggleOpen,
+    render,
+    showOnHover = false,
+    showScrollbar = false,
+    size = 'medium',
+    verticalAlign: verticalAlignFromProps = 'top'
+  } = props;
+  const {
+    height: windowHeight,
+    width: windowWidth
+  } = useWindowInfo();
+  const [intersectionRef, intersectionEntry] = useIntersect({
+    root: boundingRef?.current || null,
+    rootMargin: '-100px 0px 0px 0px',
+    threshold: 1
+  });
+  const contentRef = useRef(null);
+  const [active, setActive] = useState(initActive);
+  const [verticalAlign, setVerticalAlign] = useState(verticalAlignFromProps);
+  const [horizontalAlign, setHorizontalAlign] = useState(horizontalAlignFromProps);
+  const setPosition = useCallback(({
+    horizontal = false,
+    vertical = false
+  }) => {
+    if (contentRef.current) {
+      const bounds = contentRef.current.getBoundingClientRect();
+      const {
+        bottom: contentBottomPos,
+        left: contentLeftPos,
+        right: contentRightPos,
+        top: contentTopPos
+      } = bounds;
+      let boundingTopPos = 100;
+      let boundingRightPos = document.documentElement.clientWidth;
+      let boundingBottomPos = document.documentElement.clientHeight;
+      let boundingLeftPos = 0;
+      if (boundingRef?.current) {
+        ({
+          bottom: boundingBottomPos,
+          left: boundingLeftPos,
+          right: boundingRightPos,
+          top: boundingTopPos
+        } = boundingRef.current.getBoundingClientRect());
+      }
+      if (horizontal) {
+        if (contentRightPos > boundingRightPos && contentLeftPos > boundingLeftPos) {
+          setHorizontalAlign('right');
+        } else if (contentLeftPos < boundingLeftPos && contentRightPos < boundingRightPos) {
+          setHorizontalAlign('left');
         }
-        setActive(false);
-    }, [
-        contentRef
-    ]);
-    useEffect(()=>{
-        setPosition({
-            horizontal: true
-        });
-    }, [
-        intersectionEntry,
-        setPosition,
-        windowWidth
-    ]);
-    useEffect(()=>{
-        setPosition({
-            vertical: true
-        });
-    }, [
-        intersectionEntry,
-        setPosition,
-        windowHeight
-    ]);
-    useEffect(()=>{
-        if (typeof onToggleOpen === 'function') onToggleOpen(active);
-        if (active) {
-            document.addEventListener('mousedown', handleClickOutside);
-        } else {
-            document.removeEventListener('mousedown', handleClickOutside);
+      }
+      if (vertical) {
+        if (contentTopPos < boundingTopPos && contentBottomPos < boundingBottomPos) {
+          setVerticalAlign('bottom');
+        } else if (contentBottomPos > boundingBottomPos && contentTopPos > boundingTopPos) {
+          setVerticalAlign('top');
         }
-        return ()=>{
-            document.removeEventListener('mousedown', handleClickOutside);
-        };
-    }, [
-        active,
-        handleClickOutside,
-        onToggleOpen
-    ]);
-    useEffect(()=>{
-        setActive(forceOpen);
-    }, [
-        forceOpen
-    ]);
-    const classes = [
-        baseClass,
-        className,
-        `${baseClass}--size-${size}`,
-        `${baseClass}--v-align-${verticalAlign}`,
-        `${baseClass}--h-align-${horizontalAlign}`,
-        active && `${baseClass}--active`,
-        showScrollbar && `${baseClass}--show-scrollbar`
-    ].filter(Boolean).join(' ');
-    return /*#__PURE__*/ React.createElement("div", {
-        className: classes
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__trigger-wrap`
-    }, showOnHover ? /*#__PURE__*/ React.createElement("div", {
+      }
+    }
+  }, [boundingRef]);
+  const handleClickOutside = useCallback(e => {
+    if (contentRef.current.contains(e.target)) {
+      return;
+    }
+    setActive(false);
+  }, [contentRef]);
+  useEffect(() => {
+    setPosition({
+      horizontal: true
+    });
+  }, [intersectionEntry, setPosition, windowWidth]);
+  useEffect(() => {
+    setPosition({
+      vertical: true
+    });
+  }, [intersectionEntry, setPosition, windowHeight]);
+  useEffect(() => {
+    if (typeof onToggleOpen === 'function') onToggleOpen(active);
+    if (active) {
+      document.addEventListener('mousedown', handleClickOutside);
+    } else {
+      document.removeEventListener('mousedown', handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [active, handleClickOutside, onToggleOpen]);
+  useEffect(() => {
+    setActive(forceOpen);
+  }, [forceOpen]);
+  const classes = [baseClass, className, `${baseClass}--size-${size}`, `${baseClass}--v-align-${verticalAlign}`, `${baseClass}--h-align-${horizontalAlign}`, active && `${baseClass}--active`, showScrollbar && `${baseClass}--show-scrollbar`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs("div", {
+    className: classes,
+    children: [/*#__PURE__*/_jsx("div", {
+      className: `${baseClass}__trigger-wrap`,
+      children: showOnHover ? /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__on-hover-watch`,
-        onMouseEnter: ()=>setActive(true),
-        onMouseLeave: ()=>setActive(false)
-    }, /*#__PURE__*/ React.createElement(PopupTrigger, {
+        onMouseEnter: () => setActive(true),
+        onMouseLeave: () => setActive(false),
+        children: /*#__PURE__*/_jsx(PopupTrigger, {
+          active,
+          button,
+          buttonType,
+          className: buttonClassName,
+          disabled,
+          noBackground,
+          setActive
+        })
+      }) : /*#__PURE__*/_jsx(PopupTrigger, {
         active,
         button,
         buttonType,
         className: buttonClassName,
+        disabled,
+        noBackground,
         setActive
-    })) : /*#__PURE__*/ React.createElement(PopupTrigger, {
-        active,
-        button,
-        buttonType,
-        className: buttonClassName,
-        setActive
-    })), /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__content`,
-        ref: contentRef
-    }, /*#__PURE__*/ React.createElement("div", {
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__content`,
+      ref: contentRef,
+      children: [/*#__PURE__*/_jsx("div", {
         className: `${baseClass}__hide-scrollbar`,
-        ref: intersectionRef
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__scroll-container`
-    }, /*#__PURE__*/ React.createElement("div", {
-        className: `${baseClass}__scroll-content`
-    }, render && render({
-        close: ()=>setActive(false)
-    }), children && children))), caret && /*#__PURE__*/ React.createElement("div", {
+        ref: intersectionRef,
+        children: /*#__PURE__*/_jsx("div", {
+          className: `${baseClass}__scroll-container`,
+          children: /*#__PURE__*/_jsxs("div", {
+            className: `${baseClass}__scroll-content`,
+            children: [render && render({
+              close: () => setActive(false)
+            }), children && children]
+          })
+        })
+      }), caret && /*#__PURE__*/_jsx("div", {
         className: `${baseClass}__caret`
-    })));
+      })]
+    })]
+  });
 };
-
 //# sourceMappingURL=index.js.map