@frontify/guideline-blocks-settings 2.1.17 → 3.0.1

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

@@ -1 +1 @@
-{"version":3,"file":"Attachments.es.js","sources":["../../../src/components/Attachments/Attachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    DndContext,\n    type DragEndEvent,\n    type DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    closestCenter,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { type Asset, useAssetChooser, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport { AssetInput, AssetInputSize } from '@frontify/fondue';\nimport { Tooltip, Flyout } from '@frontify/fondue/components';\nimport { useEffect, useState } from 'react';\n\nimport { SortableAttachmentItem } from './AttachmentItem';\nimport { AttachmentsButtonTrigger } from './AttachmentsButtonTrigger';\nimport { type AttachmentsProps } from './types';\n\nexport const Attachments = ({\n    items = [],\n    onDelete,\n    onReplaceWithBrowse,\n    onReplaceWithUpload,\n    onBrowse,\n    onUpload,\n    onSorted,\n    appBridge,\n    triggerComponent: TriggerComponent = AttachmentsButtonTrigger,\n    isOpen,\n    onOpenChange,\n}: AttachmentsProps) => {\n    const [internalItems, setInternalItems] = useState<Asset[]>(items);\n    const [isFlyoutOpenInternal, setIsFlyoutOpenInternal] = useState(false);\n    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));\n    const [draggedAssetId, setDraggedAssetId] = useState<number | undefined>(undefined);\n    const [isUploadLoading, setIsUploadLoading] = useState(false);\n    const [assetIdsLoading, setAssetIdsLoading] = useState<number[]>([]);\n    const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);\n    const isEditing = useEditorState(appBridge);\n    const { openAssetChooser, closeAssetChooser } = useAssetChooser(appBridge);\n    const isControllingStateExternally = isOpen !== undefined;\n    const isFlyoutOpen = isControllingStateExternally ? isOpen : isFlyoutOpenInternal;\n\n    const draggedItem = internalItems?.find((item) => item.id === draggedAssetId);\n\n    const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({\n        onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),\n    });\n\n    const handleFlyoutOpenChange = (isOpen: boolean) => {\n        const stateSetter = isControllingStateExternally ? onOpenChange : setIsFlyoutOpenInternal;\n\n        stateSetter?.(isOpen);\n    };\n\n    useEffect(() => {\n        setInternalItems(items);\n    }, [items]);\n\n    useEffect(() => {\n        if (selectedFiles) {\n            setIsUploadLoading(true);\n            uploadFile(selectedFiles);\n        }\n        // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, [selectedFiles]);\n\n    useEffect(() => {\n        const uploadDone = async () => {\n            if (doneAll) {\n                await onUpload(uploadResults);\n                setIsUploadLoading(false);\n            }\n        };\n        uploadDone();\n        // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, [doneAll, uploadResults]);\n\n    const onOpenAssetChooser = () => {\n        handleFlyoutOpenChange(false);\n        openAssetChooser(\n            (result: Asset[]) => {\n                onBrowse(result);\n                closeAssetChooser();\n                handleFlyoutOpenChange(true);\n            },\n            {\n                multiSelection: true,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithBrowse = (toReplace: Asset) => {\n        handleFlyoutOpenChange(false);\n        openAssetChooser(\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            async (result: Asset[]) => {\n                handleFlyoutOpenChange(true);\n                closeAssetChooser();\n                setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n                await onReplaceWithBrowse(toReplace, result[0]);\n                setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n            },\n            {\n                multiSelection: false,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithUpload = async (toReplace: Asset, uploadedAsset: Asset) => {\n        setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n        await onReplaceWithUpload(toReplace, uploadedAsset);\n        setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setDraggedAssetId(active.id as number);\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        const { active, over } = event;\n        if (over && active.id !== over.id && internalItems) {\n            const oldIndex = internalItems.findIndex((i) => i.id === active.id);\n            const newIndex = internalItems.findIndex((i) => i.id === over.id);\n            const sortedItems = arrayMove(internalItems, oldIndex, newIndex);\n            setInternalItems(sortedItems);\n            onSorted(sortedItems);\n        }\n        setDraggedAssetId(undefined);\n    };\n\n    const autoFocusModifier = {\n        onEscapeKeyDown: (event: Event) => {\n            event.stopPropagation();\n            handleFlyoutOpenChange(false);\n        },\n    };\n\n    return isEditing || (internalItems?.length ?? 0) > 0 ? (\n        <div data-test-id=\"attachments-flyout-button\">\n            <Flyout.Root\n                open={isFlyoutOpen}\n                onOpenChange={(isOpen) => handleFlyoutOpenChange(draggedItem ? true : isOpen)}\n            >\n                <Tooltip.Root enterDelay={500}>\n                    <Tooltip.Trigger asChild>\n                        <Flyout.Trigger asChild data-test-id=\"attachments-button-trigger\">\n                            <TriggerComponent isFlyoutOpen={isFlyoutOpen}>\n                                <div>{items.length > 0 ? items.length : 'Add'}</div>\n                            </TriggerComponent>\n                        </Flyout.Trigger>\n                    </Tooltip.Trigger>\n                    <Flyout.Content side=\"bottom\" align=\"end\" {...autoFocusModifier}>\n                        <div className=\"tw-w-[300px]\" data-test-id=\"attachments-flyout-content\">\n                            {internalItems.length > 0 && (\n                                <DndContext\n                                    sensors={sensors}\n                                    collisionDetection={closestCenter}\n                                    onDragStart={handleDragStart}\n                                    onDragEnd={handleDragEnd}\n                                    modifiers={[restrictToVerticalAxis]}\n                                >\n                                    <SortableContext items={internalItems} strategy={rectSortingStrategy}>\n                                        <div className=\"tw-border-b tw-border-b-line tw-relative\">\n                                            {internalItems.map((item) => (\n                                                <SortableAttachmentItem\n                                                    isEditing={isEditing}\n                                                    isLoading={assetIdsLoading.includes(item.id)}\n                                                    key={item.id}\n                                                    item={item}\n                                                    onDelete={() => onDelete(item)}\n                                                    onReplaceWithBrowse={() => onReplaceItemWithBrowse(item)}\n                                                    onReplaceWithUpload={(uploadedAsset: Asset) =>\n                                                        onReplaceItemWithUpload(item, uploadedAsset)\n                                                    }\n                                                    onDownload={() =>\n                                                        appBridge.dispatch({\n                                                            name: 'downloadAsset',\n                                                            payload: item,\n                                                        })\n                                                    }\n                                                />\n                                            ))}\n                                        </div>\n                                    </SortableContext>\n                                </DndContext>\n                            )}\n                            {isEditing && (\n                                <div className=\"tw-px-5 tw-py-3\">\n                                    <div className=\"tw-font-primary tw-font-medium tw-text-primary tw-text-small tw-my-4\">\n                                        Add attachments\n                                    </div>\n                                    <AssetInput\n                                        isLoading={isUploadLoading}\n                                        size={AssetInputSize.Small}\n                                        onUploadClick={(fileList) => setSelectedFiles(fileList)}\n                                        onLibraryClick={onOpenAssetChooser}\n                                    />\n                                </div>\n                            )}\n                        </div>\n                    </Flyout.Content>\n                    <Tooltip.Content side=\"top\">Attachments</Tooltip.Content>\n                </Tooltip.Root>\n            </Flyout.Root>\n        </div>\n    ) : null;\n};\n"],"names":["Attachments","items","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onBrowse","onUpload","onSorted","appBridge","TriggerComponent","AttachmentsButtonTrigger","isOpen","onOpenChange","internalItems","setInternalItems","useState","isFlyoutOpenInternal","setIsFlyoutOpenInternal","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","openAssetChooser","closeAssetChooser","useAssetChooser","isControllingStateExternally","isFlyoutOpen","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","handleFlyoutOpenChange","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","autoFocusModifier","jsx","Flyout","jsxs","Tooltip","DndContext","closestCenter","restrictToVerticalAxis","SortableContext","rectSortingStrategy","SortableAttachmentItem","AssetInput","AssetInputSize","fileList"],"mappings":"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"}
+{"version":3,"file":"Attachments.es.js","sources":["../../../src/components/Attachments/Attachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    DndContext,\n    type DragEndEvent,\n    type DragStartEvent,\n    KeyboardSensor,\n    PointerSensor,\n    closestCenter,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { restrictToParentElement } from '@dnd-kit/modifiers';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { type Asset, useAssetChooser, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport { Tooltip, Flyout, AssetInput, Flex } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack } from '@frontify/fondue/icons';\nimport { useEffect, useState } from 'react';\n\nimport { SortableAttachmentItem } from './AttachmentItem';\nimport { AttachmentsButtonTrigger } from './AttachmentsButtonTrigger';\nimport { type AttachmentsProps } from './types';\n\nexport const Attachments = ({\n    items = [],\n    onDelete,\n    onReplaceWithBrowse,\n    onReplaceWithUpload,\n    onBrowse,\n    onUpload,\n    onSorted,\n    appBridge,\n    triggerComponent: TriggerComponent = AttachmentsButtonTrigger,\n    isOpen,\n    onOpenChange,\n}: AttachmentsProps) => {\n    const [internalItems, setInternalItems] = useState<Asset[]>(items);\n    const [isFlyoutOpenInternal, setIsFlyoutOpenInternal] = useState(false);\n    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));\n    const [draggedAssetId, setDraggedAssetId] = useState<number | undefined>(undefined);\n    const [isUploadLoading, setIsUploadLoading] = useState(false);\n    const [isBrowseLoading, setIsBrowseLoading] = useState(false);\n    const [assetIdsLoading, setAssetIdsLoading] = useState<number[]>([]);\n    const [selectedFiles, setSelectedFiles] = useState<FileList | null>(null);\n    const isEditing = useEditorState(appBridge);\n    const { openAssetChooser, closeAssetChooser } = useAssetChooser(appBridge);\n    const isControllingStateExternally = isOpen !== undefined;\n    const isFlyoutOpen = isControllingStateExternally ? isOpen : isFlyoutOpenInternal;\n\n    const draggedItem = internalItems?.find((item) => item.id === draggedAssetId);\n\n    const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({\n        onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),\n    });\n\n    const handleFlyoutOpenChange = (isOpen: boolean) => {\n        const stateSetter = isControllingStateExternally ? onOpenChange : setIsFlyoutOpenInternal;\n\n        stateSetter?.(isOpen);\n    };\n\n    useEffect(() => {\n        setInternalItems(items);\n    }, [items]);\n\n    useEffect(() => {\n        if (selectedFiles) {\n            setIsUploadLoading(true);\n            uploadFile(selectedFiles);\n        }\n        // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, [selectedFiles]);\n\n    useEffect(() => {\n        const uploadDone = async () => {\n            if (doneAll) {\n                await onUpload(uploadResults);\n                setIsUploadLoading(false);\n            }\n        };\n        uploadDone();\n        // eslint-disable-next-line @eslint-react/exhaustive-deps\n    }, [doneAll, uploadResults]);\n\n    const onOpenAssetChooser = () => {\n        handleFlyoutOpenChange(false);\n        openAssetChooser(\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            async (result: Asset[]) => {\n                closeAssetChooser();\n                handleFlyoutOpenChange(true);\n                setIsBrowseLoading(true);\n                await onBrowse(result);\n                setIsBrowseLoading(false);\n            },\n            {\n                multiSelection: true,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithBrowse = (toReplace: Asset) => {\n        handleFlyoutOpenChange(false);\n        openAssetChooser(\n            // eslint-disable-next-line @typescript-eslint/no-misused-promises\n            async (result: Asset[]) => {\n                handleFlyoutOpenChange(true);\n                closeAssetChooser();\n                setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n                await onReplaceWithBrowse(toReplace, result[0]);\n                setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n            },\n            {\n                multiSelection: false,\n                selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n            },\n        );\n    };\n\n    const onReplaceItemWithUpload = async (toReplace: Asset, uploadedAsset: Asset) => {\n        setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n        await onReplaceWithUpload(toReplace, uploadedAsset);\n        setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setDraggedAssetId(active.id as number);\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        const { active, over } = event;\n        if (over && active.id !== over.id && internalItems) {\n            const oldIndex = internalItems.findIndex((i) => i.id === active.id);\n            const newIndex = internalItems.findIndex((i) => i.id === over.id);\n            const sortedItems = arrayMove(internalItems, oldIndex, newIndex);\n            setInternalItems(sortedItems);\n            onSorted(sortedItems);\n        }\n        setDraggedAssetId(undefined);\n    };\n\n    const autoFocusModifier = {\n        onEscapeKeyDown: (event: Event) => {\n            event.stopPropagation();\n            handleFlyoutOpenChange(false);\n        },\n    };\n\n    return isEditing || (internalItems?.length ?? 0) > 0 ? (\n        <div data-test-id=\"attachments-flyout-button\">\n            <Flyout.Root\n                open={isFlyoutOpen}\n                onOpenChange={(isOpen) => handleFlyoutOpenChange(draggedItem ? true : isOpen)}\n            >\n                <Tooltip.Root enterDelay={500}>\n                    <Tooltip.Trigger asChild>\n                        <Flyout.Trigger asChild data-test-id=\"attachments-button-trigger\">\n                            <TriggerComponent isFlyoutOpen={isFlyoutOpen}>\n                                <div>{items.length > 0 ? items.length : 'Add'}</div>\n                            </TriggerComponent>\n                        </Flyout.Trigger>\n                    </Tooltip.Trigger>\n                    <Flyout.Content side=\"bottom\" align=\"end\" width=\"300px\" {...autoFocusModifier}>\n                        <div className=\"tw-w-full\" data-test-id=\"attachments-flyout-content\">\n                            {internalItems.length > 0 && (\n                                <DndContext\n                                    sensors={sensors}\n                                    collisionDetection={closestCenter}\n                                    onDragStart={handleDragStart}\n                                    onDragEnd={handleDragEnd}\n                                    modifiers={[restrictToParentElement]}\n                                >\n                                    <SortableContext items={internalItems} strategy={rectSortingStrategy}>\n                                        <div className=\"tw-border-b tw-border-b-line tw-relative\">\n                                            {internalItems.map((item) => (\n                                                <SortableAttachmentItem\n                                                    isEditing={isEditing}\n                                                    isLoading={assetIdsLoading.includes(item.id)}\n                                                    key={item.id}\n                                                    item={item}\n                                                    onDelete={() => onDelete(item)}\n                                                    onReplaceWithBrowse={() => onReplaceItemWithBrowse(item)}\n                                                    onReplaceWithUpload={(uploadedAsset: Asset) =>\n                                                        onReplaceItemWithUpload(item, uploadedAsset)\n                                                    }\n                                                    onDownload={() =>\n                                                        appBridge.dispatch({\n                                                            name: 'downloadAsset',\n                                                            payload: item,\n                                                        })\n                                                    }\n                                                />\n                                            ))}\n                                        </div>\n                                    </SortableContext>\n                                </DndContext>\n                            )}\n                            {isEditing && (\n                                <div className=\"tw-px-5 tw-py-3\" data-test-id=\"asset-input-placeholder\">\n                                    <div className=\"tw-font-primary tw-font-medium tw-text-primary tw-text-small tw-my-4\">\n                                        Add attachments\n                                    </div>\n                                    {isUploadLoading || isBrowseLoading ? (\n                                        <AssetInput.Root orientation=\"horizontal\">\n                                            <AssetInput.Preview>\n                                                <AssetInput.PreviewLoading />\n                                            </AssetInput.Preview>\n                                            <AssetInput.Title>Asset</AssetInput.Title>\n                                            <AssetInput.Metadata>\n                                                <AssetInput.MetadataItem>\n                                                    <Flex align=\"center\" gap={0.5}>\n                                                        {isBrowseLoading ? (\n                                                            <IconImageStack size={16} />\n                                                        ) : (\n                                                            <IconArrowCircleUp size={16} />\n                                                        )}\n                                                        {isBrowseLoading ? 'Loading' : 'Uploading'}\n                                                    </Flex>\n                                                </AssetInput.MetadataItem>\n                                            </AssetInput.Metadata>\n                                        </AssetInput.Root>\n                                    ) : (\n                                        <AssetInput.Placeholder>\n                                            <AssetInput.UploadInput\n                                                allowMultiple\n                                                onSelect={(event) => setSelectedFiles(event.target.files)}\n                                            />\n                                            <AssetInput.BrowseInput onBrowse={onOpenAssetChooser} />\n                                        </AssetInput.Placeholder>\n                                    )}\n                                </div>\n                            )}\n                        </div>\n                    </Flyout.Content>\n                    <Tooltip.Content side=\"top\">Attachments</Tooltip.Content>\n                </Tooltip.Root>\n            </Flyout.Root>\n        </div>\n    ) : null;\n};\n"],"names":["Attachments","items","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onBrowse","onUpload","onSorted","appBridge","TriggerComponent","AttachmentsButtonTrigger","isOpen","onOpenChange","internalItems","setInternalItems","useState","isFlyoutOpenInternal","setIsFlyoutOpenInternal","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","isBrowseLoading","setIsBrowseLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","openAssetChooser","closeAssetChooser","useAssetChooser","isControllingStateExternally","isFlyoutOpen","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","handleFlyoutOpenChange","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","autoFocusModifier","jsx","Flyout","jsxs","Tooltip","DndContext","closestCenter","restrictToParentElement","SortableContext","rectSortingStrategy","SortableAttachmentItem","AssetInput","Flex","IconImageStack","IconArrowCircleUp"],"mappings":"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"}

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

@@ -1,99 +1,100 @@
 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 x, Dropdown as w } from "@frontify/fondue/components";
+import { LoadingCircle as K, Flyout as I, Dropdown as f } 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 { useState as y, useRef as G, useCallback as H, useMemo as J } from "react";
 import { joinClassNames as Q } from "../../utilities/react/joinClassNames.es.js";
 const et = ({
-  onDrop: s,
-  label: f,
+  onDrop: i,
+  label: u,
   icon: j,
-  secondaryLabel: u,
-  isLoading: a,
+  secondaryLabel: w,
+  isLoading: c,
   fillParentContainer: S,
   onAssetChooseClick: m,
-  onUploadClick: v,
+  onUploadClick: g,
   withMenu: C = !0,
   onClick: D,
-  validFileType: h,
+  validFileType: p,
   verticalLayout: E
 }) => {
-  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)) {
+  const [d, v] = y(!1), [n, h] = y(), b = G(null), [s, l] = y(void 0), M = (t) => {
+    if (t.preventDefault(), v(!1), !O(t.dataTransfer.files)) {
       l("Invalid"), setTimeout(() => {
         l(void 0);
       }, 1e3);
       return;
     }
-    s?.(t.dataTransfer.files);
+    i?.(t.dataTransfer.files);
   }, O = (t) => {
-    if (!h)
+    if (!p)
       return !0;
     for (let r = 0; r < t.length; r++) {
-      const c = t[r].name.split(".").pop() ?? "";
-      if (!A[h].includes(c))
+      const a = t[r].name.split(".").pop() ?? "";
+      if (!A[p].includes(a))
         return !1;
     }
     return !0;
-  }, y = (t) => {
-    if (!p.current || a)
+  }, R = (t) => {
+    if (!b.current || c)
       return;
-    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 { clientX: r, clientY: a } = t, N = r === 0 && a === 0, { left: z, top: B, width: k, height: F } = b.current.getBoundingClientRect(), P = N ? k / 2 : r - z, X = N ? F / 2 : a - B;
+    h([P, X]);
+  }, x = H((t) => {
+    t(), h(void 0);
+  }, []), T = J(() => {
     const t = [];
-    return v && t.push({
-      onSelect: () => k(v),
+    return g && t.push({
+      onSelect: () => x(g),
       title: "Upload asset",
       icon: /* @__PURE__ */ e(V, { size: "20" })
     }), m && t.push({
-      onSelect: () => k(m),
+      onSelect: () => x(m),
       title: "Browse asset",
       icon: /* @__PURE__ */ e(W, { size: "20" })
     }), t;
-  }, [m, v, k]);
+  }, [m, g, x]);
   return /* @__PURE__ */ o(
     "button",
     {
-      ref: p,
+      type: "button",
+      ref: b,
       "data-test-id": "block-inject-button",
       className: Q([
         "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",
-        d && "tw-bg-blank-state-weak-inverse",
-        i ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-blank-state-line",
-        a || n || d || i ? "" : "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",
-        (d || n) && !i ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
+        d && !c ? "tw-border-dashed" : "tw-border-solid",
+        n && "tw-bg-surface-hover",
+        d && "tw-bg-surface",
+        s ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-line-mid",
+        c || n || d || s ? "" : "tw-text-secondary hover:tw-text-primary hover:tw-bg-surface hover:tw-border-line-strong active:tw-text-primary active:tw-bg-surface-hover active:tw-border-line-strong",
+        (d || n) && !s ? "[&>*]:tw-pointer-events-none tw-border-line-strong" : "tw-bg-surface-dim tw-text-secondary"
       ]),
-      onDragEnter: s ? (t) => {
-        if (b(!0), h === "Images")
+      onDragEnter: i ? (t) => {
+        if (v(!0), p === "Images")
           for (const r of Array.from(t.dataTransfer.items))
             r?.type?.startsWith("image/") ? l(void 0) : l("Invalid");
       } : void 0,
-      onDragOver: s ? (t) => {
+      onDragOver: i ? (t) => {
         t.preventDefault();
       } : void 0,
-      onDragLeave: s ? () => {
-        b(!1), l(void 0);
+      onDragLeave: i ? () => {
+        v(!1), l(void 0);
       } : void 0,
-      onDrop: s ? M : void 0,
+      onDrop: i ? M : void 0,
       onClick: (t) => {
-        C && !n && y(t), D?.();
+        C && !n && R(t), D?.();
       },
       children: [
-        a ? /* @__PURE__ */ e(K, {}) : i ? /* @__PURE__ */ o("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
+        c ? /* @__PURE__ */ e(K, {}) : s ? /* @__PURE__ */ o("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
           /* @__PURE__ */ e(q, { size: "16" }),
-          i
+          s
         ] }) : /* @__PURE__ */ o(Y, { children: [
           j && /* @__PURE__ */ e("div", { children: j }),
-          (f || u) && /* @__PURE__ */ o("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
-            f && /* @__PURE__ */ e("div", { className: "tw-font-medium", children: f }),
-            u && /* @__PURE__ */ e("div", { className: "tw-font-normal", children: u })
+          (u || w) && /* @__PURE__ */ o("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
+            u && /* @__PURE__ */ e("div", { className: "tw-font-medium", children: u }),
+            w && /* @__PURE__ */ e("div", { className: "tw-font-normal", children: w })
           ] })
         ] }),
         n && /* @__PURE__ */ e(
@@ -104,11 +105,11 @@ const et = ({
               left: n[0],
               top: n[1]
             },
-            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: [
+            children: /* @__PURE__ */ o(I.Root, { open: !0, onOpenChange: (t) => !t && h(void 0), children: [
+              /* @__PURE__ */ e(I.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
+              /* @__PURE__ */ e(I.Content, { triggerOffset: "compact", children: /* @__PURE__ */ o(f.Root, { open: !0, children: [
+                /* @__PURE__ */ e(f.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
+                /* @__PURE__ */ e(f.Content, { triggerOffset: "compact", children: T.map((t) => /* @__PURE__ */ o(f.Item, { onSelect: t.onSelect, children: [
                   t.icon,
                   t.title
                 ] }, t.title)) })

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-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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"}
+{"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            type=\"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-surface-hover',\n                isDraggingOver && 'tw-bg-surface',\n                errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-line-mid',\n                isLoading || menuPosition || isDraggingOver || errorMsg\n                    ? ''\n                    : 'tw-text-secondary hover:tw-text-primary hover:tw-bg-surface hover:tw-border-line-strong active:tw-text-primary active:tw-bg-surface-hover active:tw-border-line-strong',\n                (isDraggingOver || !!menuPosition) && !errorMsg\n                    ? '[&>*]:tw-pointer-events-none tw-border-line-strong'\n                    : 'tw-bg-surface-dim tw-text-secondary',\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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"}