@frontify/guideline-blocks-settings 2.1.5 → 2.1.7

package/dist/components/Attachments/AttachmentsButtonTrigger.es.js

@@ -1,28 +1,27 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { IconPaperclip as c, IconCaretDown as i } from "@frontify/fondue/icons";
-import { forwardRef as s } from "react";
-import { joinClassNames as w } from "../../utilities/react/joinClassNames.es.js";
-const d = s(
-  ({ children: e, isFlyoutOpen: n, ...o }, r) => /* @__PURE__ */ a(
-    "button",
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { Button as s } from "@frontify/fondue/components";
+import { IconPaperclip as a, IconCaretDown as m } from "@frontify/fondue/icons";
+import { forwardRef as n } from "react";
+const p = n(
+  ({ children: r, ...o }, e) => /* @__PURE__ */ i(
+    s,
     {
-      ref: r,
-      className: w([
-        "tw-flex tw-text-x-small tw-font-primary tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line-mid",
-        n ? "tw-bg-container-secondary-active tw-text-container-secondary-on-secondary-container" : "tw-bg-surface hover:tw-bg-container-secondary-hover active:tw-bg-container-secondary-active tw-text-container-secondary-on-secondary-container hover:tw-text-container-secondary-on-secondary-container active:tw-text-container-secondary-on-secondary-container"
-      ]),
+      ref: e,
+      size: "small",
+      rounding: "full",
+      emphasis: "default",
       "data-test-id": "attachments-button-trigger",
       ...o,
       children: [
-        /* @__PURE__ */ t(c, { size: "16" }),
-        e,
-        /* @__PURE__ */ t(i, { size: "12" })
+        /* @__PURE__ */ t(a, { size: "16" }),
+        r,
+        /* @__PURE__ */ t(m, { size: "12" })
       ]
     }
   )
 );
-d.displayName = "AttachmentsButtonTrigger";
+p.displayName = "AttachmentsButtonTrigger";
 export {
-  d as AttachmentsButtonTrigger
+  p as AttachmentsButtonTrigger
 };
 //# sourceMappingURL=AttachmentsButtonTrigger.es.js.map

package/dist/components/Attachments/AttachmentsButtonTrigger.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsButtonTrigger.es.js","sources":["../../../src/components/Attachments/AttachmentsButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconPaperclip } from '@frontify/fondue/icons';\nimport { forwardRef } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type AttachmentsTriggerProps } from './types';\n\nexport const AttachmentsButtonTrigger = forwardRef<HTMLButtonElement, AttachmentsTriggerProps>(\n    ({ children, isFlyoutOpen, ...props }, ref) => (\n        <button\n            ref={ref}\n            className={joinClassNames([\n                'tw-flex tw-text-x-small tw-font-primary tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line-mid',\n                isFlyoutOpen\n                    ? 'tw-bg-container-secondary-active tw-text-container-secondary-on-secondary-container'\n                    : 'tw-bg-surface hover:tw-bg-container-secondary-hover active:tw-bg-container-secondary-active tw-text-container-secondary-on-secondary-container hover:tw-text-container-secondary-on-secondary-container active:tw-text-container-secondary-on-secondary-container',\n            ])}\n            data-test-id=\"attachments-button-trigger\"\n            {...props}\n        >\n            <IconPaperclip size=\"16\" />\n            {children}\n            <IconCaretDown size=\"12\" />\n        </button>\n    ),\n);\n\nAttachmentsButtonTrigger.displayName = 'AttachmentsButtonTrigger';\n"],"names":["AttachmentsButtonTrigger","forwardRef","children","isFlyoutOpen","props","ref","jsxs","joinClassNames","jsx","IconPaperclip","IconCaretDown"],"mappings":";;;;AASO,MAAMA,IAA2BC;AAAA,EACpC,CAAC,EAAE,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GAASC,MACnC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,WAAWE,EAAe;AAAA,QACtB;AAAA,QACAJ,IACM,wFACA;AAAA,MAAA,CACT;AAAA,MACD,gBAAa;AAAA,MACZ,GAAGC;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACC,GAAA,EAAc,MAAK,KAAA,CAAK;AAAA,QACxBP;AAAA,QACD,gBAAAM,EAACE,GAAA,EAAc,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrC;AAEAV,EAAyB,cAAc;"}
+{"version":3,"file":"AttachmentsButtonTrigger.es.js","sources":["../../../src/components/Attachments/AttachmentsButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button } from '@frontify/fondue/components';\nimport { IconCaretDown, IconPaperclip } from '@frontify/fondue/icons';\nimport { forwardRef } from 'react';\n\nimport { type AttachmentsTriggerProps } from './types';\n\nexport const AttachmentsButtonTrigger = forwardRef<HTMLButtonElement, AttachmentsTriggerProps>(\n    ({ children, ...props }, ref) => (\n        <Button\n            ref={ref}\n            size=\"small\"\n            rounding=\"full\"\n            emphasis=\"default\"\n            data-test-id=\"attachments-button-trigger\"\n            {...props}\n        >\n            <IconPaperclip size=\"16\" />\n            {children}\n            <IconCaretDown size=\"12\" />\n        </Button>\n    ),\n);\n\nAttachmentsButtonTrigger.displayName = 'AttachmentsButtonTrigger';\n"],"names":["AttachmentsButtonTrigger","forwardRef","children","props","ref","jsxs","Button","jsx","IconPaperclip","IconCaretDown"],"mappings":";;;;AAQO,MAAMA,IAA2BC;AAAA,EACpC,CAAC,EAAE,UAAAC,GAAU,GAAGC,EAAA,GAASC,MACrB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,KAAAF;AAAA,MACA,MAAK;AAAA,MACL,UAAS;AAAA,MACT,UAAS;AAAA,MACT,gBAAa;AAAA,MACZ,GAAGD;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACC,GAAA,EAAc,MAAK,KAAA,CAAK;AAAA,QACxBN;AAAA,QACD,gBAAAK,EAACE,GAAA,EAAc,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrC;AAEAT,EAAyB,cAAc;"}

package/dist/components/BlockInjectButton/BlockInjectButton.es.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as o, Fragment as Y } from "react/jsx-runtime";
 import { FileExtensionSets as A } from "@frontify/app-bridge";
-import { LoadingCircle as K, Flyout as k, Dropdown as w } from "@frontify/fondue/components";
+import { LoadingCircle as K, Flyout as x, Dropdown as w } from "@frontify/fondue/components";
 import { IconArrowCircleUp as V, IconImageStack as W, IconExclamationMarkTriangle as q } from "@frontify/fondue/icons";
 import { useState as I, useRef as G, useCallback as H, useMemo as J } from "react";
 import { joinClassNames as Q } from "../../utilities/react/joinClassNames.es.js";
@@ -18,8 +18,8 @@ const et = ({
   validFileType: h,
   verticalLayout: E
 }) => {
-  const [d, g] = I(!1), [n, p] = I(), b = G(null), [i, l] = I(void 0), M = (t) => {
-    if (t.preventDefault(), g(!1), !O(t.dataTransfer.files)) {
+  const [d, b] = I(!1), [n, g] = I(), p = G(null), [i, l] = I(void 0), M = (t) => {
+    if (t.preventDefault(), b(!1), !O(t.dataTransfer.files)) {
       l("Invalid"), setTimeout(() => {
         l(void 0);
       }, 1e3);
@@ -36,32 +36,32 @@ const et = ({
     }
     return !0;
   }, y = (t) => {
-    if (!b.current || a)
+    if (!p.current || a)
       return;
-    const { clientX: r, clientY: c } = t, N = r === 0 && c === 0, { left: T, top: z, width: B, height: F } = b.current.getBoundingClientRect(), P = N ? B / 2 : r - T, X = N ? F / 2 : c - z;
-    p([P, X]);
-  }, x = H((t) => {
-    t(), p(void 0);
+    const { clientX: r, clientY: c } = t, N = r === 0 && c === 0, { left: T, top: z, width: B, height: F } = p.current.getBoundingClientRect(), P = N ? B / 2 : r - T, X = N ? F / 2 : c - z;
+    g([P, X]);
+  }, k = H((t) => {
+    t(), g(void 0);
   }, []), R = J(() => {
     const t = [];
     return v && t.push({
-      onSelect: () => x(v),
+      onSelect: () => k(v),
       title: "Upload asset",
       icon: /* @__PURE__ */ e(V, { size: "20" })
     }), m && t.push({
-      onSelect: () => x(m),
+      onSelect: () => k(m),
       title: "Browse asset",
       icon: /* @__PURE__ */ e(W, { size: "20" })
     }), t;
-  }, [m, v, x]);
+  }, [m, v, k]);
   return /* @__PURE__ */ o(
     "button",
     {
-      ref: b,
+      ref: p,
       "data-test-id": "block-inject-button",
       className: Q([
-        "tw-font-primary tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br",
-        E ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr",
+        "tw-body-medium tw-relative tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br",
+        E ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr",
         S ? "tw-h-full" : "tw-h-[72px]",
         d && !a ? "tw-border-dashed" : "tw-border-solid",
         n && "tw-bg-blank-state-pressed-inverse",
@@ -71,7 +71,7 @@ const et = ({
         (d || n) && !i ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
       ]),
       onDragEnter: s ? (t) => {
-        if (g(!0), h === "Images")
+        if (b(!0), h === "Images")
           for (const r of Array.from(t.dataTransfer.items))
             r?.type?.startsWith("image/") ? l(void 0) : l("Invalid");
       } : void 0,
@@ -79,7 +79,7 @@ const et = ({
         t.preventDefault();
       } : void 0,
       onDragLeave: s ? () => {
-        g(!1), l(void 0);
+        b(!1), l(void 0);
       } : void 0,
       onDrop: s ? M : void 0,
       onClick: (t) => {
@@ -104,9 +104,9 @@ const et = ({
               left: n[0],
               top: n[1]
             },
-            children: /* @__PURE__ */ o(k.Root, { open: !0, onOpenChange: (t) => !t && p(void 0), children: [
-              /* @__PURE__ */ e(k.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
-              /* @__PURE__ */ e(k.Content, { triggerOffset: "compact", children: /* @__PURE__ */ o(w.Root, { open: !0, children: [
+            children: /* @__PURE__ */ o(x.Root, { open: !0, onOpenChange: (t) => !t && g(void 0), children: [
+              /* @__PURE__ */ e(x.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
+              /* @__PURE__ */ e(x.Content, { triggerOffset: "compact", children: /* @__PURE__ */ o(w.Root, { open: !0, children: [
                 /* @__PURE__ */ e(w.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
                 /* @__PURE__ */ e(w.Content, { triggerOffset: "compact", children: R.map((t) => /* @__PURE__ */ o(w.Item, { onSelect: t.onSelect, children: [
                   t.icon,

package/dist/components/BlockInjectButton/BlockInjectButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack, IconExclamationMarkTriangle } from '@frontify/fondue/icons';\nimport { type DragEventHandler, type MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n    onDrop,\n    label,\n    icon,\n    secondaryLabel,\n    isLoading,\n    fillParentContainer,\n    onAssetChooseClick,\n    onUploadClick,\n    withMenu = true,\n    onClick,\n    validFileType,\n    verticalLayout,\n}: BlockInjectButtonProps) => {\n    const [isDraggingOver, setIsDraggingOver] = useState(false);\n    const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n    const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n        event.preventDefault();\n        setIsDraggingOver(false);\n        if (!isValidAsset(event.dataTransfer.files)) {\n            setErrorMsg('Invalid');\n            setTimeout(() => {\n                setErrorMsg(undefined);\n            }, 1000);\n            return;\n        }\n        onDrop?.(event.dataTransfer.files);\n    };\n\n    const isValidAsset = (files: FileList) => {\n        if (!validFileType) {\n            return true;\n        }\n        for (let i = 0; i < files.length; i++) {\n            const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n            if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (!buttonRef.current || isLoading) {\n            return;\n        }\n        const { clientX, clientY } = event;\n        const isKeyboardEvent = clientX === 0 && clientY === 0;\n        const { left, top, width, height } = buttonRef.current.getBoundingClientRect();\n        const XInsideComponent = !isKeyboardEvent ? clientX - left : width / 2;\n        const YInsideComponent = !isKeyboardEvent ? clientY - top : height / 2;\n        setMenuPosition([XInsideComponent, YInsideComponent]);\n    };\n\n    const onItemClick = useCallback((callback: () => unknown) => {\n        callback();\n        setMenuPosition(undefined);\n    }, []);\n\n    const menuItems = useMemo(() => {\n        const items = [];\n        if (onUploadClick) {\n            items.push({\n                onSelect: () => onItemClick(onUploadClick),\n                title: 'Upload asset',\n                icon: <IconArrowCircleUp size=\"20\" />,\n            });\n        }\n        if (onAssetChooseClick) {\n            items.push({\n                onSelect: () => onItemClick(onAssetChooseClick),\n                title: 'Browse asset',\n                icon: <IconImageStack size=\"20\" />,\n            });\n        }\n        return items;\n    }, [onAssetChooseClick, onUploadClick, onItemClick]);\n    return (\n        <button\n            ref={buttonRef}\n            data-test-id=\"block-inject-button\"\n            className={joinClassNames([\n                'tw-font-primary tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n                verticalLayout\n                    ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n                    : '[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr',\n                fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n                isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n                menuPosition && 'tw-bg-blank-state-pressed-inverse',\n                isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n                errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n                isLoading || menuPosition || isDraggingOver || errorMsg\n                    ? ''\n                    : 'tw-text-secondary hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n                (isDraggingOver || !!menuPosition) && !errorMsg\n                    ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n                    : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n            ])}\n            onDragEnter={\n                onDrop\n                    ? (event) => {\n                          setIsDraggingOver(true);\n                          // is now only used for images, can be adapted if needed\n                          if (validFileType === 'Images') {\n                              for (const item of Array.from(event.dataTransfer.items)) {\n                                  if (!item?.type?.startsWith('image/')) {\n                                      setErrorMsg('Invalid');\n                                  } else {\n                                      setErrorMsg(undefined);\n                                  }\n                              }\n                          }\n                      }\n                    : undefined\n            }\n            onDragOver={\n                onDrop\n                    ? (event) => {\n                          event.preventDefault();\n                      }\n                    : undefined\n            }\n            onDragLeave={\n                onDrop\n                    ? () => {\n                          setIsDraggingOver(false);\n                          setErrorMsg(undefined);\n                      }\n                    : undefined\n            }\n            onDrop={onDrop ? handleDrop : undefined}\n            onClick={(event) => {\n                if (withMenu && !menuPosition) {\n                    openMenu(event);\n                }\n                onClick?.();\n            }}\n        >\n            {isLoading ? (\n                <LoadingCircle />\n            ) : errorMsg ? (\n                <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n                    <IconExclamationMarkTriangle size=\"16\" />\n                    {errorMsg}\n                </div>\n            ) : (\n                <>\n                    {icon && <div>{icon}</div>}\n                    {(label || secondaryLabel) && (\n                        <div className=\"tw-flex tw-flex-col tw-items-start\">\n                            {label && <div className=\"tw-font-medium\">{label}</div>}\n                            {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n                        </div>\n                    )}\n                </>\n            )}\n            {menuPosition && (\n                <div\n                    className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n                    style={{\n                        left: menuPosition[0],\n                        top: menuPosition[1],\n                    }}\n                >\n                    <Flyout.Root open onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}>\n                        <Flyout.Trigger>\n                            <div />\n                        </Flyout.Trigger>\n                        <Flyout.Content triggerOffset=\"compact\">\n                            <Dropdown.Root open>\n                                <Dropdown.Trigger>\n                                    <div />\n                                </Dropdown.Trigger>\n                                <Dropdown.Content triggerOffset=\"compact\">\n                                    {menuItems.map((item) => (\n                                        <Dropdown.Item key={item.title} onSelect={item.onSelect}>\n                                            {item.icon}\n                                            {item.title}\n                                        </Dropdown.Item>\n                                    ))}\n                                </Dropdown.Content>\n                            </Dropdown.Root>\n                        </Flyout.Content>\n                    </Flyout.Root>\n                </div>\n            )}\n        </button>\n    );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","clientX","clientY","isKeyboardEvent","left","top","width","height","XInsideComponent","YInsideComponent","onItemClick","useCallback","callback","menuItems","useMemo","items","jsx","IconArrowCircleUp","IconImageStack","jsxs","joinClassNames","item","LoadingCircle","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","Dropdown"],"mappings":"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"}
+{"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack, IconExclamationMarkTriangle } from '@frontify/fondue/icons';\nimport { type DragEventHandler, type MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n    onDrop,\n    label,\n    icon,\n    secondaryLabel,\n    isLoading,\n    fillParentContainer,\n    onAssetChooseClick,\n    onUploadClick,\n    withMenu = true,\n    onClick,\n    validFileType,\n    verticalLayout,\n}: BlockInjectButtonProps) => {\n    const [isDraggingOver, setIsDraggingOver] = useState(false);\n    const [menuPosition, setMenuPosition] = useState<[number, number] | undefined>();\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const [errorMsg, setErrorMsg] = useState<string | undefined>(undefined);\n\n    const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n        event.preventDefault();\n        setIsDraggingOver(false);\n        if (!isValidAsset(event.dataTransfer.files)) {\n            setErrorMsg('Invalid');\n            setTimeout(() => {\n                setErrorMsg(undefined);\n            }, 1000);\n            return;\n        }\n        onDrop?.(event.dataTransfer.files);\n    };\n\n    const isValidAsset = (files: FileList) => {\n        if (!validFileType) {\n            return true;\n        }\n        for (let i = 0; i < files.length; i++) {\n            const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n            if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (!buttonRef.current || isLoading) {\n            return;\n        }\n        const { clientX, clientY } = event;\n        const isKeyboardEvent = clientX === 0 && clientY === 0;\n        const { left, top, width, height } = buttonRef.current.getBoundingClientRect();\n        const XInsideComponent = !isKeyboardEvent ? clientX - left : width / 2;\n        const YInsideComponent = !isKeyboardEvent ? clientY - top : height / 2;\n        setMenuPosition([XInsideComponent, YInsideComponent]);\n    };\n\n    const onItemClick = useCallback((callback: () => unknown) => {\n        callback();\n        setMenuPosition(undefined);\n    }, []);\n\n    const menuItems = useMemo(() => {\n        const items = [];\n        if (onUploadClick) {\n            items.push({\n                onSelect: () => onItemClick(onUploadClick),\n                title: 'Upload asset',\n                icon: <IconArrowCircleUp size=\"20\" />,\n            });\n        }\n        if (onAssetChooseClick) {\n            items.push({\n                onSelect: () => onItemClick(onAssetChooseClick),\n                title: 'Browse asset',\n                icon: <IconImageStack size=\"20\" />,\n            });\n        }\n        return items;\n    }, [onAssetChooseClick, onUploadClick, onItemClick]);\n    return (\n        <button\n            ref={buttonRef}\n            data-test-id=\"block-inject-button\"\n            className={joinClassNames([\n                'tw-body-medium tw-relative tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n                verticalLayout\n                    ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n                    : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n                fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n                isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n                menuPosition && 'tw-bg-blank-state-pressed-inverse',\n                isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n                errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n                isLoading || menuPosition || isDraggingOver || errorMsg\n                    ? ''\n                    : 'tw-text-secondary hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n                (isDraggingOver || !!menuPosition) && !errorMsg\n                    ? '[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover'\n                    : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n            ])}\n            onDragEnter={\n                onDrop\n                    ? (event) => {\n                          setIsDraggingOver(true);\n                          // is now only used for images, can be adapted if needed\n                          if (validFileType === 'Images') {\n                              for (const item of Array.from(event.dataTransfer.items)) {\n                                  if (!item?.type?.startsWith('image/')) {\n                                      setErrorMsg('Invalid');\n                                  } else {\n                                      setErrorMsg(undefined);\n                                  }\n                              }\n                          }\n                      }\n                    : undefined\n            }\n            onDragOver={\n                onDrop\n                    ? (event) => {\n                          event.preventDefault();\n                      }\n                    : undefined\n            }\n            onDragLeave={\n                onDrop\n                    ? () => {\n                          setIsDraggingOver(false);\n                          setErrorMsg(undefined);\n                      }\n                    : undefined\n            }\n            onDrop={onDrop ? handleDrop : undefined}\n            onClick={(event) => {\n                if (withMenu && !menuPosition) {\n                    openMenu(event);\n                }\n                onClick?.();\n            }}\n        >\n            {isLoading ? (\n                <LoadingCircle />\n            ) : errorMsg ? (\n                <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n                    <IconExclamationMarkTriangle size=\"16\" />\n                    {errorMsg}\n                </div>\n            ) : (\n                <>\n                    {icon && <div>{icon}</div>}\n                    {(label || secondaryLabel) && (\n                        <div className=\"tw-flex tw-flex-col tw-items-start\">\n                            {label && <div className=\"tw-font-medium\">{label}</div>}\n                            {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n                        </div>\n                    )}\n                </>\n            )}\n            {menuPosition && (\n                <div\n                    className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n                    style={{\n                        left: menuPosition[0],\n                        top: menuPosition[1],\n                    }}\n                >\n                    <Flyout.Root open onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}>\n                        <Flyout.Trigger>\n                            <div />\n                        </Flyout.Trigger>\n                        <Flyout.Content triggerOffset=\"compact\">\n                            <Dropdown.Root open>\n                                <Dropdown.Trigger>\n                                    <div />\n                                </Dropdown.Trigger>\n                                <Dropdown.Content triggerOffset=\"compact\">\n                                    {menuItems.map((item) => (\n                                        <Dropdown.Item key={item.title} onSelect={item.onSelect}>\n                                            {item.icon}\n                                            {item.title}\n                                        </Dropdown.Item>\n                                    ))}\n                                </Dropdown.Content>\n                            </Dropdown.Root>\n                        </Flyout.Content>\n                    </Flyout.Root>\n                </div>\n            )}\n        </button>\n    );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","clientX","clientY","isKeyboardEvent","left","top","width","height","XInsideComponent","YInsideComponent","onItemClick","useCallback","callback","menuItems","useMemo","items","jsx","IconArrowCircleUp","IconImageStack","jsxs","joinClassNames","item","LoadingCircle","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","Dropdown"],"mappings":"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"}

package/dist/components/DownloadButton/DownloadButton.es.js

@@ -1,32 +1,26 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { Tooltip as o } from "@frontify/fondue/components";
-import { IconArrowCircleDown as w } from "@frontify/fondue/icons";
-import { useFocusRing as s } from "@react-aria/focus";
-import { joinClassNames as m } from "../../utilities/react/joinClassNames.es.js";
-const g = ({ onDownload: r, ariaLabel: e }) => {
-  const { isFocused: n, focusProps: i } = s();
-  return /* @__PURE__ */ a(o.Root, { enterDelay: 500, children: [
-    /* @__PURE__ */ t(o.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
-      "button",
-      {
-        type: "button",
-        tabIndex: 0,
-        "aria-label": e ?? "Download",
-        ...i,
-        className: m([
-          "tw-outline-none tw-rounded-medium",
-          n && "tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none"
-        ]),
-        onClick: r,
-        onPointerDown: (l) => l.preventDefault(),
-        "data-test-id": "download-button",
-        children: /* @__PURE__ */ t("span", { className: "tw-flex tw-text-x-small tw-font-primary tw-items-center tw-gap-1 tw-rounded-full tw-bg-primary-on-primary hover:tw-bg-primary-on-primary active:tw-bg-primary-on-primary tw-text-primary tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line-mid", children: /* @__PURE__ */ t(w, { size: "16" }) })
-      }
-    ) }),
-    /* @__PURE__ */ t(o.Content, { side: "top", children: "Download" })
-  ] });
-};
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { Tooltip as t, Button as i } from "@frontify/fondue/components";
+import { IconArrowCircleDown as l } from "@frontify/fondue/icons";
+const u = ({ onDownload: e, ariaLabel: r }) => /* @__PURE__ */ n(t.Root, { enterDelay: 500, children: [
+  /* @__PURE__ */ o(t.Trigger, { asChild: !0, children: /* @__PURE__ */ o(
+    i,
+    {
+      "aria-label": r ?? "Download",
+      onPress: e,
+      "data-test-id": "download-button",
+      aspect: "square",
+      emphasis: "default",
+      rounding: "full",
+      size: "small",
+      type: "button",
+      variant: "default",
+      hugWidth: !0,
+      children: /* @__PURE__ */ o(l, { size: 16 })
+    }
+  ) }),
+  /* @__PURE__ */ o(t.Content, { side: "top", children: "Download" })
+] });
 export {
-  g as DownloadButton
+  u as DownloadButton
 };
 //# sourceMappingURL=DownloadButton.es.js.map

package/dist/components/DownloadButton/DownloadButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DownloadButton.es.js","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Tooltip } from '@frontify/fondue/components';\nimport { IconArrowCircleDown } from '@frontify/fondue/icons';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type DownloadButtonProps } from './types';\n\nexport const DownloadButton = ({ onDownload, ariaLabel }: DownloadButtonProps) => {\n    const { isFocused, focusProps } = useFocusRing();\n\n    return (\n        <Tooltip.Root enterDelay={500}>\n            <Tooltip.Trigger asChild>\n                <button\n                    type=\"button\"\n                    tabIndex={0}\n                    aria-label={ariaLabel ?? 'Download'}\n                    {...focusProps}\n                    className={joinClassNames([\n                        'tw-outline-none tw-rounded-medium',\n                        isFocused &&\n                            'tw-ring-4 tw-ring-blue tw-ring-offset-2 dark:tw-ring-offset-black tw-outline-none',\n                    ])}\n                    onClick={onDownload}\n                    onPointerDown={(e) => e.preventDefault()}\n                    data-test-id=\"download-button\"\n                >\n                    <span className=\"tw-flex tw-text-x-small tw-font-primary tw-items-center tw-gap-1 tw-rounded-full tw-bg-primary-on-primary hover:tw-bg-primary-on-primary active:tw-bg-primary-on-primary tw-text-primary tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line-mid\">\n                        <IconArrowCircleDown size=\"16\" />\n                    </span>\n                </button>\n            </Tooltip.Trigger>\n            <Tooltip.Content side=\"top\">Download</Tooltip.Content>\n        </Tooltip.Root>\n    );\n};\n"],"names":["DownloadButton","onDownload","ariaLabel","isFocused","focusProps","useFocusRing","jsxs","Tooltip","jsx","joinClassNames","e","IconArrowCircleDown"],"mappings":";;;;;AAUO,MAAMA,IAAiB,CAAC,EAAE,YAAAC,GAAY,WAAAC,QAAqC;AAC9E,QAAM,EAAE,WAAAC,GAAW,YAAAC,EAAA,IAAeC,EAAA;AAElC,SACI,gBAAAC,EAACC,EAAQ,MAAR,EAAa,YAAY,KACtB,UAAA;AAAA,IAAA,gBAAAC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACpB,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,MAAK;AAAA,QACL,UAAU;AAAA,QACV,cAAYN,KAAa;AAAA,QACxB,GAAGE;AAAA,QACJ,WAAWK,EAAe;AAAA,UACtB;AAAA,UACAN,KACI;AAAA,QAAA,CACP;AAAA,QACD,SAASF;AAAA,QACT,eAAe,CAACS,MAAMA,EAAE,eAAA;AAAA,QACxB,gBAAa;AAAA,QAEb,UAAA,gBAAAF,EAAC,UAAK,WAAU,qQACZ,4BAACG,GAAA,EAAoB,MAAK,MAAK,EAAA,CACnC;AAAA,MAAA;AAAA,IAAA,GAER;AAAA,sBACCJ,EAAQ,SAAR,EAAgB,MAAK,OAAM,UAAA,WAAA,CAAQ;AAAA,EAAA,GACxC;AAER;"}
+{"version":3,"file":"DownloadButton.es.js","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, Tooltip } from '@frontify/fondue/components';\nimport { IconArrowCircleDown } from '@frontify/fondue/icons';\n\nimport { type DownloadButtonProps } from './types';\n\nexport const DownloadButton = ({ onDownload, ariaLabel }: DownloadButtonProps) => {\n    return (\n        <Tooltip.Root enterDelay={500}>\n            <Tooltip.Trigger asChild>\n                <Button\n                    aria-label={ariaLabel ?? 'Download'}\n                    onPress={onDownload}\n                    data-test-id=\"download-button\"\n                    aspect=\"square\"\n                    emphasis=\"default\"\n                    rounding=\"full\"\n                    size=\"small\"\n                    type=\"button\"\n                    variant=\"default\"\n                    hugWidth\n                >\n                    <IconArrowCircleDown size={16} />\n                </Button>\n            </Tooltip.Trigger>\n            <Tooltip.Content side=\"top\">Download</Tooltip.Content>\n        </Tooltip.Root>\n    );\n};\n"],"names":["DownloadButton","onDownload","ariaLabel","jsxs","Tooltip","jsx","Button","IconArrowCircleDown"],"mappings":";;;AAOO,MAAMA,IAAiB,CAAC,EAAE,YAAAC,GAAY,WAAAC,QAErC,gBAAAC,EAACC,EAAQ,MAAR,EAAa,YAAY,KACtB,UAAA;AAAA,EAAA,gBAAAC,EAACD,EAAQ,SAAR,EAAgB,SAAO,IACpB,UAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,cAAYJ,KAAa;AAAA,MACzB,SAASD;AAAA,MACT,gBAAa;AAAA,MACb,QAAO;AAAA,MACP,UAAS;AAAA,MACT,UAAS;AAAA,MACT,MAAK;AAAA,MACL,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,UAAQ;AAAA,MAER,UAAA,gBAAAI,EAACE,GAAA,EAAoB,MAAM,GAAA,CAAI;AAAA,IAAA;AAAA,EAAA,GAEvC;AAAA,oBACCH,EAAQ,SAAR,EAAgB,MAAK,OAAM,UAAA,WAAA,CAAQ;AAAA,GACxC;"}