@payloadcms/ui 3.0.0-canary.fb81f02 → 3.0.0

package/dist/elements/BulkUpload/index.js

@@ -0,0 +1,194 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useModal } from '@faceless-ui/modal';
+import { validateMimeType } from 'payload/shared';
+import React from 'react';
+import { toast } from 'sonner';
+import { useConfig } from '../../providers/Config/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import { Drawer, useDrawerDepth } from '../Drawer/index.js';
+import { AddFilesView } from './AddFilesView/index.js';
+import { AddingFilesView } from './AddingFilesView/index.js';
+import { FormsManagerProvider, useFormsManager } from './FormsManager/index.js';
+const drawerSlug = 'bulk-upload-drawer-slug';
+function DrawerContent() {
+  const {
+    addFiles,
+    forms,
+    isInitializing
+  } = useFormsManager();
+  const {
+    closeModal
+  } = useModal();
+  const {
+    collectionSlug,
+    drawerSlug
+  } = useBulkUpload();
+  const {
+    config
+  } = useConfig();
+  const {
+    t
+  } = useTranslation();
+  const uploadCollection = config.collections.find(col => col.slug === collectionSlug);
+  const uploadConfig = uploadCollection?.upload;
+  const uploadMimeTypes = uploadConfig?.mimeTypes;
+  const onDrop = React.useCallback(acceptedFiles => {
+    const fileTransfer = new DataTransfer();
+    for (const candidateFile of acceptedFiles) {
+      if (uploadMimeTypes === undefined || uploadMimeTypes.length === 0 || validateMimeType(candidateFile.type, uploadMimeTypes)) {
+        fileTransfer.items.add(candidateFile);
+      }
+    }
+    if (fileTransfer.files.length === 0) {
+      toast.error(t('error:invalidFileType'));
+    } else {
+      void addFiles(fileTransfer.files);
+    }
+  }, [addFiles, t, uploadMimeTypes]);
+  if (!collectionSlug) {
+    return null;
+  }
+  if (!forms.length && !isInitializing) {
+    return /*#__PURE__*/_jsx(AddFilesView, {
+      acceptMimeTypes: uploadMimeTypes?.join(', '),
+      onCancel: () => closeModal(drawerSlug),
+      onDrop: onDrop
+    });
+  } else {
+    return /*#__PURE__*/_jsx(AddingFilesView, {});
+  }
+}
+export function BulkUploadDrawer() {
+  const $ = _c(2);
+  const {
+    drawerSlug
+  } = useBulkUpload();
+  let t0;
+  if ($[0] !== drawerSlug) {
+    t0 = _jsx(Drawer, {
+      gutter: false,
+      Header: null,
+      slug: drawerSlug,
+      children: _jsx(FormsManagerProvider, {
+        children: _jsx(DrawerContent, {})
+      })
+    });
+    $[0] = drawerSlug;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+const Context = /*#__PURE__*/React.createContext({
+  collectionSlug: '',
+  drawerSlug: '',
+  initialFiles: undefined,
+  maxFiles: undefined,
+  onCancel: () => null,
+  onSuccess: () => null,
+  setCollectionSlug: () => null,
+  setInitialFiles: () => null,
+  setMaxFiles: () => null,
+  setOnCancel: () => null,
+  setOnSuccess: () => null
+});
+export function BulkUploadProvider(t0) {
+  const $ = _c(14);
+  const {
+    children
+  } = t0;
+  const [collection, setCollection] = React.useState();
+  const [onSuccessFunction, setOnSuccessFunction] = React.useState();
+  const [onCancelFunction, setOnCancelFunction] = React.useState();
+  const [initialFiles, setInitialFiles] = React.useState(undefined);
+  const [maxFiles, setMaxFiles] = React.useState(undefined);
+  const drawerSlug = useBulkUploadDrawerSlug();
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = slug => {
+      setCollection(slug);
+    };
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  const setCollectionSlug = t1;
+  let t2;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = onSuccess => {
+      setOnSuccessFunction(() => onSuccess);
+    };
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const setOnSuccess = t2;
+  let t3;
+  if ($[2] !== onCancelFunction) {
+    t3 = () => {
+      if (typeof onCancelFunction === "function") {
+        onCancelFunction();
+      }
+    };
+    $[2] = onCancelFunction;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] !== onSuccessFunction) {
+    t4 = (docIDs, errorCount) => {
+      if (typeof onSuccessFunction === "function") {
+        onSuccessFunction(docIDs, errorCount);
+      }
+    };
+    $[4] = onSuccessFunction;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  let t5;
+  if ($[6] !== collection || $[7] !== drawerSlug || $[8] !== initialFiles || $[9] !== maxFiles || $[10] !== t3 || $[11] !== t4 || $[12] !== children) {
+    t5 = _jsx(Context.Provider, {
+      value: {
+        collectionSlug: collection,
+        drawerSlug,
+        initialFiles,
+        maxFiles,
+        onCancel: t3,
+        onSuccess: t4,
+        setCollectionSlug,
+        setInitialFiles,
+        setMaxFiles,
+        setOnCancel: setOnCancelFunction,
+        setOnSuccess
+      },
+      children: _jsxs(React.Fragment, {
+        children: [children, _jsx(BulkUploadDrawer, {})]
+      })
+    });
+    $[6] = collection;
+    $[7] = drawerSlug;
+    $[8] = initialFiles;
+    $[9] = maxFiles;
+    $[10] = t3;
+    $[11] = t4;
+    $[12] = children;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  return t5;
+}
+export const useBulkUpload = () => {
+  return React.useContext(Context);
+};
+export function useBulkUploadDrawerSlug() {
+  const depth = useDrawerDepth();
+  return `${drawerSlug}-${depth || 1}`;
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","useModal","validateMimeType","React","toast","useConfig","useTranslation","Drawer","useDrawerDepth","AddFilesView","AddingFilesView","FormsManagerProvider","useFormsManager","drawerSlug","DrawerContent","addFiles","forms","isInitializing","closeModal","collectionSlug","useBulkUpload","config","t","uploadCollection","collections","find","col","slug","uploadConfig","upload","uploadMimeTypes","mimeTypes","onDrop","useCallback","acceptedFiles","fileTransfer","DataTransfer","candidateFile","undefined","length","type","items","add","files","error","_jsx","acceptMimeTypes","join","onCancel","BulkUploadDrawer","$","t0","gutter","Header","children","Context","createContext","initialFiles","maxFiles","onSuccess","setCollectionSlug","setInitialFiles","setMaxFiles","setOnCancel","setOnSuccess","BulkUploadProvider","collection","setCollection","useState","onSuccessFunction","setOnSuccessFunction","onCancelFunction","setOnCancelFunction","useBulkUploadDrawerSlug","t1","Symbol","for","t2","t3","t4","docIDs","errorCount","t5","Provider","value","_jsxs","Fragment","useContext","depth"],"sources":["../../../src/elements/BulkUpload/index.tsx"],"sourcesContent":["'use client'\n\nimport type { JsonObject } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { validateMimeType } from 'payload/shared'\nimport React from 'react'\nimport { toast } from 'sonner'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { Drawer, useDrawerDepth } from '../Drawer/index.js'\nimport { AddFilesView } from './AddFilesView/index.js'\nimport { AddingFilesView } from './AddingFilesView/index.js'\nimport { FormsManagerProvider, useFormsManager } from './FormsManager/index.js'\n\nconst drawerSlug = 'bulk-upload-drawer-slug'\n\nfunction DrawerContent() {\n  const { addFiles, forms, isInitializing } = useFormsManager()\n  const { closeModal } = useModal()\n  const { collectionSlug, drawerSlug } = useBulkUpload()\n  const { config } = useConfig()\n  const { t } = useTranslation()\n\n  const uploadCollection = config.collections.find((col) => col.slug === collectionSlug)\n  const uploadConfig = uploadCollection?.upload\n  const uploadMimeTypes = uploadConfig?.mimeTypes\n\n  const onDrop = React.useCallback(\n    (acceptedFiles: FileList) => {\n      const fileTransfer = new DataTransfer()\n      for (const candidateFile of acceptedFiles) {\n        if (\n          uploadMimeTypes === undefined ||\n          uploadMimeTypes.length === 0 ||\n          validateMimeType(candidateFile.type, uploadMimeTypes)\n        ) {\n          fileTransfer.items.add(candidateFile)\n        }\n      }\n      if (fileTransfer.files.length === 0) {\n        toast.error(t('error:invalidFileType'))\n      } else {\n        void addFiles(fileTransfer.files)\n      }\n    },\n    [addFiles, t, uploadMimeTypes],\n  )\n\n  if (!collectionSlug) {\n    return null\n  }\n\n  if (!forms.length && !isInitializing) {\n    return (\n      <AddFilesView\n        acceptMimeTypes={uploadMimeTypes?.join(', ')}\n        onCancel={() => closeModal(drawerSlug)}\n        onDrop={onDrop}\n      />\n    )\n  } else {\n    return <AddingFilesView />\n  }\n}\n\nexport type BulkUploadProps = {\n  readonly children: React.ReactNode\n}\n\nexport function BulkUploadDrawer() {\n  const { drawerSlug } = useBulkUpload()\n\n  return (\n    <Drawer gutter={false} Header={null} slug={drawerSlug}>\n      <FormsManagerProvider>\n        <DrawerContent />\n      </FormsManagerProvider>\n    </Drawer>\n  )\n}\n\ntype BulkUploadContext = {\n  collectionSlug: string\n  drawerSlug: string\n  initialFiles: FileList\n  maxFiles: number\n  onCancel: () => void\n  onSuccess: (newDocs: JsonObject[], errorCount: number) => void\n  setCollectionSlug: (slug: string) => void\n  setInitialFiles: (files: FileList) => void\n  setMaxFiles: (maxFiles: number) => void\n  setOnCancel: (onCancel: BulkUploadContext['onCancel']) => void\n  setOnSuccess: (onSuccess: BulkUploadContext['onSuccess']) => void\n}\n\nconst Context = React.createContext<BulkUploadContext>({\n  collectionSlug: '',\n  drawerSlug: '',\n  initialFiles: undefined,\n  maxFiles: undefined,\n  onCancel: () => null,\n  onSuccess: () => null,\n  setCollectionSlug: () => null,\n  setInitialFiles: () => null,\n  setMaxFiles: () => null,\n  setOnCancel: () => null,\n  setOnSuccess: () => null,\n})\nexport function BulkUploadProvider({ children }: { readonly children: React.ReactNode }) {\n  const [collection, setCollection] = React.useState<string>()\n  const [onSuccessFunction, setOnSuccessFunction] = React.useState<BulkUploadContext['onSuccess']>()\n  const [onCancelFunction, setOnCancelFunction] = React.useState<BulkUploadContext['onCancel']>()\n  const [initialFiles, setInitialFiles] = React.useState<FileList>(undefined)\n  const [maxFiles, setMaxFiles] = React.useState<number>(undefined)\n  const drawerSlug = useBulkUploadDrawerSlug()\n\n  const setCollectionSlug: BulkUploadContext['setCollectionSlug'] = (slug) => {\n    setCollection(slug)\n  }\n\n  const setOnSuccess: BulkUploadContext['setOnSuccess'] = (onSuccess) => {\n    setOnSuccessFunction(() => onSuccess)\n  }\n\n  return (\n    <Context.Provider\n      value={{\n        collectionSlug: collection,\n        drawerSlug,\n        initialFiles,\n        maxFiles,\n        onCancel: () => {\n          if (typeof onCancelFunction === 'function') {\n            onCancelFunction()\n          }\n        },\n        onSuccess: (docIDs, errorCount) => {\n          if (typeof onSuccessFunction === 'function') {\n            onSuccessFunction(docIDs, errorCount)\n          }\n        },\n        setCollectionSlug,\n        setInitialFiles,\n        setMaxFiles,\n        setOnCancel: setOnCancelFunction,\n        setOnSuccess,\n      }}\n    >\n      <React.Fragment>\n        {children}\n        <BulkUploadDrawer />\n      </React.Fragment>\n    </Context.Provider>\n  )\n}\n\nexport const useBulkUpload = () => React.useContext(Context)\n\nexport function useBulkUploadDrawerSlug() {\n  const depth = useDrawerDepth()\n\n  return `${drawerSlug}-${depth || 1}`\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAEnE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AASvC,OAAO,cAAc,CAAA;AAarB,eAAO,MAAM,cAAc;;;;;uBAqB1B,CAAA;AAED,eAAO,MAAM,MAAM,qGAgGjB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Button/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+C,MAAM,OAAO,CAAA;AAEnE,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAUvC,OAAO,cAAc,CAAA;AAarB,eAAO,MAAM,cAAc;;;;;uBAqB1B,CAAA;AAED,eAAO,MAAM,MAAM,qGAmJjB,CAAA"}

package/dist/elements/Button/index.js

@@ -1,129 +1,175 @@
 'use client';
+
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { Fragment, forwardRef, isValidElement } from 'react';
+import React, { forwardRef, Fragment, isValidElement } from 'react';
 import { ChevronIcon } from '../../icons/Chevron/index.js';
 import { EditIcon } from '../../icons/Edit/index.js';
 import { LinkIcon } from '../../icons/Link/index.js';
 import { PlusIcon } from '../../icons/Plus/index.js';
 import { SwapIcon } from '../../icons/Swap/index.js';
 import { XIcon } from '../../icons/X/index.js';
+import { Popup } from '../Popup/index.js';
 import { Tooltip } from '../Tooltip/index.js';
 import './index.scss';
 const icons = {
-    chevron: ChevronIcon,
-    edit: EditIcon,
-    link: LinkIcon,
-    plus: PlusIcon,
-    swap: SwapIcon,
-    x: XIcon
+  chevron: ChevronIcon,
+  edit: EditIcon,
+  link: LinkIcon,
+  plus: PlusIcon,
+  swap: SwapIcon,
+  x: XIcon
 };
 const baseClass = 'btn';
-export const ButtonContents = ({ children, icon, showTooltip, tooltip })=>{
-    const BuiltInIcon = icons[icon];
-    return /*#__PURE__*/ _jsxs(Fragment, {
-        children: [
-            tooltip && /*#__PURE__*/ _jsx(Tooltip, {
-                className: `${baseClass}__tooltip`,
-                show: showTooltip,
-                children: tooltip
-            }),
-            /*#__PURE__*/ _jsxs("span", {
-                className: `${baseClass}__content`,
-                children: [
-                    children && /*#__PURE__*/ _jsx("span", {
-                        className: `${baseClass}__label`,
-                        children: children
-                    }),
-                    icon && /*#__PURE__*/ _jsxs("span", {
-                        className: `${baseClass}__icon`,
-                        children: [
-                            /*#__PURE__*/ isValidElement(icon) && icon,
-                            BuiltInIcon && /*#__PURE__*/ _jsx(BuiltInIcon, {})
-                        ]
-                    })
-                ]
-            })
-        ]
-    });
+export const ButtonContents = ({
+  children,
+  icon,
+  showTooltip,
+  tooltip
+}) => {
+  const BuiltInIcon = icons[icon];
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [tooltip && /*#__PURE__*/_jsx(Tooltip, {
+      className: `${baseClass}__tooltip`,
+      show: showTooltip,
+      children: tooltip
+    }), /*#__PURE__*/_jsxs("span", {
+      className: `${baseClass}__content`,
+      children: [children && /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__label`,
+        children: children
+      }), icon && /*#__PURE__*/_jsxs("span", {
+        className: `${baseClass}__icon`,
+        children: [/*#__PURE__*/isValidElement(icon) && icon, BuiltInIcon && /*#__PURE__*/_jsx(BuiltInIcon, {})]
+      })]
+    })]
+  });
 };
-export const Button = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { id, type = 'button', Link, 'aria-label': ariaLabel, buttonStyle = 'primary', children, className, disabled, el = 'button', icon, iconPosition = 'right', iconStyle = 'without-border', newTab, onClick, round, size = 'medium', to, tooltip, url } = props;
-    const [showTooltip, setShowTooltip] = React.useState(false);
-    const classes = [
-        baseClass,
-        className && className,
-        buttonStyle && `${baseClass}--style-${buttonStyle}`,
-        icon && `${baseClass}--icon`,
-        iconStyle && `${baseClass}--icon-style-${iconStyle}`,
-        icon && !children && `${baseClass}--icon-only`,
-        disabled && `${baseClass}--disabled`,
-        round && `${baseClass}--round`,
-        size && `${baseClass}--size-${size}`,
-        icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,
-        tooltip && `${baseClass}--has-tooltip`
-    ].filter(Boolean).join(' ');
-    function handleClick(event) {
-        setShowTooltip(false);
-        if (type !== 'submit' && onClick) event.preventDefault();
-        if (onClick) onClick(event);
+export const Button = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    id,
+    type = 'button',
+    'aria-label': ariaLabel,
+    buttonStyle = 'primary',
+    children,
+    className,
+    disabled,
+    el = 'button',
+    icon,
+    iconPosition = 'right',
+    iconStyle = 'without-border',
+    Link,
+    newTab,
+    onClick,
+    onMouseDown,
+    round,
+    size = 'medium',
+    SubMenuPopupContent,
+    to,
+    tooltip,
+    url
+  } = props;
+  const [showTooltip, setShowTooltip] = React.useState(false);
+  const classes = [baseClass, className && className, icon && `${baseClass}--icon`, iconStyle && `${baseClass}--icon-style-${iconStyle}`, icon && !children && `${baseClass}--icon-only`, size && `${baseClass}--size-${size}`, icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`, tooltip && `${baseClass}--has-tooltip`, !SubMenuPopupContent && `${baseClass}--withoutPopup`].filter(Boolean).join(' ');
+  function handleClick(event) {
+    setShowTooltip(false);
+    if (type !== 'submit' && onClick) {
+      event.preventDefault();
     }
-    const buttonProps = {
-        id,
-        type,
-        'aria-disabled': disabled,
-        'aria-label': ariaLabel,
-        className: classes,
-        disabled,
-        onClick: !disabled ? handleClick : undefined,
-        onMouseEnter: tooltip ? ()=>setShowTooltip(true) : undefined,
-        onMouseLeave: tooltip ? ()=>setShowTooltip(false) : undefined,
-        rel: newTab ? 'noopener noreferrer' : undefined,
-        target: newTab ? '_blank' : undefined
-    };
-    switch(el){
-        case 'link':
-            if (!Link) {
-                console.error('Link is required when using el="link"', children);
-                return null;
-            }
-            return /*#__PURE__*/ _jsx(Link, {
-                ...buttonProps,
-                href: to || url,
-                to: to || url,
-                children: /*#__PURE__*/ _jsx(ButtonContents, {
-                    icon: icon,
-                    showTooltip: showTooltip,
-                    tooltip: tooltip,
-                    children: children
-                })
-            });
-        case 'anchor':
-            return /*#__PURE__*/ _jsx("a", {
-                ...buttonProps,
-                href: url,
-                ref: ref,
-                children: /*#__PURE__*/ _jsx(ButtonContents, {
-                    icon: icon,
-                    showTooltip: showTooltip,
-                    tooltip: tooltip,
-                    children: children
-                })
-            });
-        default:
-            const Tag = el // eslint-disable-line no-case-declarations
-            ;
-            return /*#__PURE__*/ _jsx(Tag, {
-                ref: ref,
-                type: "submit",
-                ...buttonProps,
-                children: /*#__PURE__*/ _jsx(ButtonContents, {
-                    icon: icon,
-                    showTooltip: showTooltip,
-                    tooltip: tooltip,
-                    children: children
-                })
-            });
+    if (onClick) {
+      onClick(event);
     }
+  }
+  const styleClasses = [buttonStyle && `${baseClass}--style-${buttonStyle}`, disabled && `${baseClass}--disabled`, round && `${baseClass}--round`, SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`].filter(Boolean).join(' ');
+  const buttonProps = {
+    id,
+    type,
+    'aria-disabled': disabled,
+    'aria-label': ariaLabel,
+    className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,
+    disabled,
+    onClick: !disabled ? handleClick : undefined,
+    onMouseDown: !disabled ? onMouseDown : undefined,
+    onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,
+    onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,
+    rel: newTab ? 'noopener noreferrer' : undefined,
+    target: newTab ? '_blank' : undefined
+  };
+  let buttonElement;
+  let prefetch;
+  switch (el) {
+    case 'anchor':
+      buttonElement = /*#__PURE__*/_jsx("a", {
+        ...buttonProps,
+        href: !disabled ? url : undefined,
+        ref: ref,
+        children: /*#__PURE__*/_jsx(ButtonContents, {
+          icon: icon,
+          showTooltip: showTooltip,
+          tooltip: tooltip,
+          children: children
+        })
+      });
+      break;
+    case 'link':
+      if (!Link) {
+        console.error('Link is required when using el="link"', children);
+        return null;
+      }
+      let LinkTag = Link // eslint-disable-line no-case-declarations
+      ;
+      if (disabled) {
+        LinkTag = 'div';
+      } else {
+        prefetch = false;
+      }
+      buttonElement = /*#__PURE__*/_jsx(LinkTag, {
+        ...buttonProps,
+        href: to || url,
+        prefetch: prefetch,
+        to: to || url,
+        children: /*#__PURE__*/_jsx(ButtonContents, {
+          icon: icon,
+          showTooltip: showTooltip,
+          tooltip: tooltip,
+          children: children
+        })
+      });
+      break;
+    default:
+      const Tag = el // eslint-disable-line no-case-declarations
+      ;
+      buttonElement = /*#__PURE__*/_jsx(Tag, {
+        ref: ref,
+        type: "submit",
+        ...buttonProps,
+        children: /*#__PURE__*/_jsx(ButtonContents, {
+          icon: icon,
+          showTooltip: showTooltip,
+          tooltip: tooltip,
+          children: children
+        })
+      });
+      break;
+  }
+  if (SubMenuPopupContent) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: styleClasses,
+      children: [buttonElement, /*#__PURE__*/_jsx(Popup, {
+        button: /*#__PURE__*/_jsx(ChevronIcon, {}),
+        buttonSize: size,
+        className: disabled ? `${baseClass}--popup-disabled` : '',
+        horizontalAlign: "right",
+        noBackground: true,
+        render: ({
+          close
+        }) => SubMenuPopupContent({
+          close: () => close()
+        }),
+        size: "large",
+        verticalAlign: "bottom"
+      })]
+    });
+  }
+  return buttonElement;
 });
-
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { Fragment, forwardRef, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst icons = {\n  chevron: ChevronIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n  const BuiltInIcon = icons[icon]\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isValidElement(icon) && icon}\n            {BuiltInIcon && <BuiltInIcon />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => {\n  const {\n    id,\n    type = 'button',\n    Link,\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    icon,\n    iconPosition = 'right',\n    iconStyle = 'without-border',\n    newTab,\n    onClick,\n    round,\n    size = 'medium',\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n\n  const classes = [\n    baseClass,\n    className && className,\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    icon && `${baseClass}--icon`,\n    iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n    icon && !children && `${baseClass}--icon-only`,\n    disabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    size && `${baseClass}--size-${size}`,\n    icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) event.preventDefault()\n    if (onClick) onClick(event)\n  }\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    className: classes,\n    disabled,\n    onClick: !disabled ? handleClick : undefined,\n    onMouseEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onMouseLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n  }\n\n  switch (el) {\n    case 'link':\n      if (!Link) {\n        console.error('Link is required when using el=\"link\"', children)\n        return null\n      }\n\n      return (\n        <Link {...buttonProps} href={to || url} to={to || url}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Link>\n      )\n\n    case 'anchor':\n      return (\n        <a {...buttonProps} href={url} ref={ref as React.Ref<HTMLAnchorElement>}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      return (\n        <Tag ref={ref} type=\"submit\" {...buttonProps}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n  }\n})\n"],"names":["React","Fragment","forwardRef","isValidElement","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SwapIcon","XIcon","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","className","show","span","Button","props","ref","id","type","Link","ariaLabel","buttonStyle","disabled","el","iconPosition","iconStyle","newTab","onClick","round","size","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","buttonProps","undefined","onMouseEnter","onMouseLeave","rel","target","console","error","href","a","Tag"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","forwardRef","Fragment","isValidElement","ChevronIcon","EditIcon","LinkIcon","PlusIcon","SwapIcon","XIcon","Popup","Tooltip","icons","chevron","edit","link","plus","swap","x","baseClass","ButtonContents","children","icon","showTooltip","tooltip","BuiltInIcon","_jsxs","_jsx","className","show","Button","props","ref","id","type","ariaLabel","buttonStyle","disabled","el","iconPosition","iconStyle","Link","newTab","onClick","onMouseDown","round","size","SubMenuPopupContent","to","url","setShowTooltip","useState","classes","filter","Boolean","join","handleClick","event","preventDefault","styleClasses","buttonProps","undefined","onPointerEnter","onPointerLeave","rel","target","buttonElement","prefetch","href","console","error","LinkTag","Tag","button","buttonSize","horizontalAlign","noBackground","render","close","verticalAlign"],"sources":["../../../src/elements/Button/index.tsx"],"sourcesContent":["'use client'\nimport React, { forwardRef, Fragment, isValidElement } from 'react'\n\nimport type { Props } from './types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { EditIcon } from '../../icons/Edit/index.js'\nimport { LinkIcon } from '../../icons/Link/index.js'\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { SwapIcon } from '../../icons/Swap/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Popup } from '../Popup/index.js'\nimport { Tooltip } from '../Tooltip/index.js'\nimport './index.scss'\n\nconst icons = {\n  chevron: ChevronIcon,\n  edit: EditIcon,\n  link: LinkIcon,\n  plus: PlusIcon,\n  swap: SwapIcon,\n  x: XIcon,\n}\n\nconst baseClass = 'btn'\n\nexport const ButtonContents = ({ children, icon, showTooltip, tooltip }) => {\n  const BuiltInIcon = icons[icon]\n\n  return (\n    <Fragment>\n      {tooltip && (\n        <Tooltip className={`${baseClass}__tooltip`} show={showTooltip}>\n          {tooltip}\n        </Tooltip>\n      )}\n      <span className={`${baseClass}__content`}>\n        {children && <span className={`${baseClass}__label`}>{children}</span>}\n        {icon && (\n          <span className={`${baseClass}__icon`}>\n            {isValidElement(icon) && icon}\n            {BuiltInIcon && <BuiltInIcon />}\n          </span>\n        )}\n      </span>\n    </Fragment>\n  )\n}\n\nexport const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, Props>((props, ref) => {\n  const {\n    id,\n    type = 'button',\n    'aria-label': ariaLabel,\n    buttonStyle = 'primary',\n    children,\n    className,\n    disabled,\n    el = 'button',\n    icon,\n    iconPosition = 'right',\n    iconStyle = 'without-border',\n    Link,\n    newTab,\n    onClick,\n    onMouseDown,\n    round,\n    size = 'medium',\n    SubMenuPopupContent,\n    to,\n    tooltip,\n    url,\n  } = props\n\n  const [showTooltip, setShowTooltip] = React.useState(false)\n\n  const classes = [\n    baseClass,\n    className && className,\n    icon && `${baseClass}--icon`,\n    iconStyle && `${baseClass}--icon-style-${iconStyle}`,\n    icon && !children && `${baseClass}--icon-only`,\n    size && `${baseClass}--size-${size}`,\n    icon && iconPosition && `${baseClass}--icon-position-${iconPosition}`,\n    tooltip && `${baseClass}--has-tooltip`,\n    !SubMenuPopupContent && `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  function handleClick(event) {\n    setShowTooltip(false)\n    if (type !== 'submit' && onClick) {\n      event.preventDefault()\n    }\n    if (onClick) {\n      onClick(event)\n    }\n  }\n\n  const styleClasses = [\n    buttonStyle && `${baseClass}--style-${buttonStyle}`,\n    disabled && `${baseClass}--disabled`,\n    round && `${baseClass}--round`,\n    SubMenuPopupContent ? `${baseClass}--withPopup` : `${baseClass}--withoutPopup`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  const buttonProps = {\n    id,\n    type,\n    'aria-disabled': disabled,\n    'aria-label': ariaLabel,\n    className: !SubMenuPopupContent ? [classes, styleClasses].join(' ') : classes,\n    disabled,\n    onClick: !disabled ? handleClick : undefined,\n    onMouseDown: !disabled ? onMouseDown : undefined,\n    onPointerEnter: tooltip ? () => setShowTooltip(true) : undefined,\n    onPointerLeave: tooltip ? () => setShowTooltip(false) : undefined,\n    rel: newTab ? 'noopener noreferrer' : undefined,\n    target: newTab ? '_blank' : undefined,\n  }\n\n  let buttonElement\n  let prefetch\n\n  switch (el) {\n    case 'anchor':\n      buttonElement = (\n        <a\n          {...buttonProps}\n          href={!disabled ? url : undefined}\n          ref={ref as React.Ref<HTMLAnchorElement>}\n        >\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </a>\n      )\n      break\n\n    case 'link':\n      if (!Link) {\n        console.error('Link is required when using el=\"link\"', children)\n        return null\n      }\n\n      let LinkTag = Link // eslint-disable-line no-case-declarations\n\n      if (disabled) {\n        LinkTag = 'div'\n      } else {\n        prefetch = false\n      }\n\n      buttonElement = (\n        <LinkTag {...buttonProps} href={to || url} prefetch={prefetch} to={to || url}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </LinkTag>\n      )\n      break\n\n    default:\n      const Tag = el // eslint-disable-line no-case-declarations\n\n      buttonElement = (\n        <Tag ref={ref} type=\"submit\" {...buttonProps}>\n          <ButtonContents icon={icon} showTooltip={showTooltip} tooltip={tooltip}>\n            {children}\n          </ButtonContents>\n        </Tag>\n      )\n      break\n  }\n  if (SubMenuPopupContent) {\n    return (\n      <div className={styleClasses}>\n        {buttonElement}\n        <Popup\n          button={<ChevronIcon />}\n          buttonSize={size}\n          className={disabled ? `${baseClass}--popup-disabled` : ''}\n          horizontalAlign=\"right\"\n          noBackground\n          render={({ close }) => SubMenuPopupContent({ close: () => close() })}\n          size=\"large\"\n          verticalAlign=\"bottom\"\n        />\n      </div>\n    )\n  }\n\n  return buttonElement\n})\n"],"mappings":"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","ignoreList":[]}