@frontify/guideline-blocks-settings 0.38.0 → 1.0.0

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 {\n    ActionMenu,\n    Flyout,\n    IconArrowCircleUp20,\n    IconExclamationMarkTriangle,\n    IconImageStack20,\n    LoadingCircle,\n    MenuItemContentSize,\n} from '@frontify/fondue';\nimport { type DragEventHandler, type MouseEventHandler, 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    return (\n        <button\n            ref={buttonRef}\n            data-test-id=\"block-inject-button\"\n            className={joinClassNames([\n                'tw-font-body 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-text-weak 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            onDragLeave={\n                onDrop\n                    ? () => {\n                          setIsDraggingOver(false);\n                          setErrorMsg(undefined);\n                      }\n                    : undefined\n            }\n            onDrop={onDrop ? handleDrop : undefined}\n            onClick={(event) => {\n                withMenu && openMenu(event);\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 />\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\n                        onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}\n                        isOpen={true}\n                        fitContent\n                        hug={false}\n                        legacyFooter={false}\n                        trigger={<div />}\n                    >\n                        <ActionMenu\n                            menuBlocks={[\n                                {\n                                    id: 'menu',\n                                    menuItems: [\n                                        ...(onUploadClick\n                                            ? [\n                                                  {\n                                                      id: 'upload',\n                                                      size: MenuItemContentSize.XSmall,\n                                                      title: 'Upload asset',\n                                                      onClick: () => {\n                                                          onUploadClick();\n                                                          setMenuPosition(undefined);\n                                                      },\n\n                                                      initialValue: true,\n                                                      decorator: (\n                                                          <div className=\"tw-mr-2\">\n                                                              <IconArrowCircleUp20 />\n                                                          </div>\n                                                      ),\n                                                  },\n                                              ]\n                                            : []),\n                                        ...(onAssetChooseClick\n                                            ? [\n                                                  {\n                                                      id: 'asset',\n                                                      size: MenuItemContentSize.XSmall,\n                                                      title: 'Browse asset',\n                                                      onClick: () => {\n                                                          onAssetChooseClick();\n                                                          setMenuPosition(undefined);\n                                                      },\n                                                      initialValue: true,\n                                                      decorator: (\n                                                          <div className=\"tw-mr-2\">\n                                                              <IconImageStack20 />\n                                                          </div>\n                                                      ),\n                                                  },\n                                              ]\n                                            : []),\n                                    ],\n                                },\n                            ]}\n                        />\n                    </Flyout>\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","jsxs","joinClassNames","item","_a","LoadingCircle","jsx","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20"],"mappings":";;;;;AAkBO,MAAMA,IAAoB,CAAC;AAAA,EAC9B,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AACJ,MAA8B;AAC1B,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GACpD,CAACC,GAAcC,CAAe,IAAIF,EAAuC,GACzEG,IAAYC,EAA0B,IAAI,GAC1C,CAACC,GAAUC,CAAW,IAAIN,EAA6B,MAAS,GAEhEO,IAAkD,CAACC,MAAU;AAG/D,QAFAA,EAAM,eAAe,GACrBT,EAAkB,EAAK,GACnB,CAACU,EAAaD,EAAM,aAAa,KAAK,GAAG;AACzC,MAAAF,EAAY,SAAS,GACrB,WAAW,MAAM;AACb,QAAAA,EAAY,MAAS;AAAA,SACtB,GAAI;AACP;AAAA,IACJ;AACS,IAAApB,KAAA,QAAAA,EAAAsB,EAAM,aAAa;AAAA,EAAK,GAG/BC,IAAe,CAACC,MAAoB;AACtC,QAAI,CAACd;AACM,aAAA;AAEX,aAASe,IAAI,GAAGA,IAAID,EAAM,QAAQC,KAAK;AAC7B,YAAAC,IAAwBF,EAAMC,CAAC,EAAE,KAAK,MAAM,GAAG,EAAE,IAAS,KAAA;AAChE,UAAI,CAACE,EAAkBjB,CAAa,EAAE,SAASgB,CAAoB;AACxD,eAAA;AAAA,IAEf;AACO,WAAA;AAAA,EAAA,GAGLE,IAAiD,CAACN,MAAU;AAC1D,QAAA,CAACL,EAAU,WAAWb;AACtB;AAEE,UAAA,EAAE,SAAAyB,GAAS,SAAAC,EAAY,IAAAR,GACvBS,IAAkBF,MAAY,KAAKC,MAAY,GAC/C,EAAE,MAAAE,GAAM,KAAAC,GAAK,OAAAC,GAAO,QAAAC,MAAWlB,EAAU,QAAQ,yBACjDmB,IAAoBL,IAAmCG,IAAQ,IAAzBL,IAAUG,GAChDK,IAAoBN,IAAkCI,IAAS,IAAzBL,IAAUG;AACtC,IAAAjB,EAAA,CAACoB,GAAkBC,CAAgB,CAAC;AAAA,EAAA;AAIpD,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKrB;AAAA,MACL,gBAAa;AAAA,MACb,WAAWsB,EAAe;AAAA,QACtB;AAAA,QACA5B,IACM,+EACA;AAAA,QACNN,IAAsB,cAAc;AAAA,QACpCO,KAAkB,CAACR,IAAY,qBAAqB;AAAA,QACpDW,KAAgB;AAAA,QAChBH,KAAkB;AAAA,QAClBO,IAAW,6CAA6C;AAAA,QACxDf,KAAaW,KAAgBH,KAAkBO,IACzC,KACA;AAAA,SACLP,KAAoBG,MAAiB,CAACI,IACjC,kEACA;AAAA,MAAA,CACT;AAAA,MACD,aACInB,IACM,CAACsB,MAAU;;AAGP,YAFAT,EAAkB,EAAI,GAElBH,MAAkB;AAClB,qBAAW8B,KAAQ,MAAM,KAAKlB,EAAM,aAAa,KAAK;AAClD,aAAKmB,IAAAD,KAAA,gBAAAA,EAAM,SAAN,QAAAC,EAAY,WAAW,YAGxBrB,EAAY,MAAS,IAFrBA,EAAY,SAAS;AAAA,MAOrC,IAAA;AAAA,MAEV,aACIpB,IACM,MAAM;AACF,QAAAa,EAAkB,EAAK,GACvBO,EAAY,MAAS;AAAA,MAEzB,IAAA;AAAA,MAEV,QAAQpB,IAASqB,IAAa;AAAA,MAC9B,SAAS,CAACC,MAAU;AAChB,QAAAd,KAAYoB,EAASN,CAAK,GAChBb,KAAA,QAAAA;AAAA,MACd;AAAA,MAEC,UAAA;AAAA,QAAAL,sBACIsC,GAAc,CAAA,CAAA,IACfvB,IACC,gBAAAmB,EAAA,OAAA,EAAI,WAAU,4EACX,UAAA;AAAA,UAAA,gBAAAK,EAACC,GAA4B,EAAA;AAAA,UAC5BzB;AAAA,QAAA,EAAA,CACL,IAGK,gBAAAmB,EAAAO,GAAA,EAAA,UAAA;AAAA,UAAQ3C,KAAA,gBAAAyC,EAAC,SAAK,UAAKzC,EAAA,CAAA;AAAA,WAClBD,KAASE,MACN,gBAAAmC,EAAA,OAAA,EAAI,WAAU,sCACV,UAAA;AAAA,YAAArC,KAAU,gBAAA0C,EAAA,OAAA,EAAI,WAAU,kBAAkB,UAAM1C,GAAA;AAAA,YAChDE,KAAkB,gBAAAwC,EAAC,OAAI,EAAA,WAAU,kBAAkB,UAAexC,GAAA;AAAA,UAAA,GACvE;AAAA,QAAA,GAER;AAAA,QAEHY,KACG,gBAAA4B;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAU;AAAA,YACV,OAAO;AAAA,cACH,MAAM5B,EAAa,CAAC;AAAA,cACpB,KAAKA,EAAa,CAAC;AAAA,YACvB;AAAA,YAEA,UAAA,gBAAA4B;AAAA,cAACG;AAAA,cAAA;AAAA,gBACG,cAAc,CAACC,MAAW,CAACA,KAAU/B,EAAgB,MAAS;AAAA,gBAC9D,QAAQ;AAAA,gBACR,YAAU;AAAA,gBACV,KAAK;AAAA,gBACL,cAAc;AAAA,gBACd,2BAAU,OAAI,EAAA;AAAA,gBAEd,UAAA,gBAAA2B;AAAA,kBAACK;AAAA,kBAAA;AAAA,oBACG,YAAY;AAAA,sBACR;AAAA,wBACI,IAAI;AAAA,wBACJ,WAAW;AAAA,0BACP,GAAIzC,IACE;AAAA,4BACI;AAAA,8BACI,IAAI;AAAA,8BACJ,MAAM0C,EAAoB;AAAA,8BAC1B,OAAO;AAAA,8BACP,SAAS,MAAM;AACG,gCAAA1C,KACdS,EAAgB,MAAS;AAAA,8BAC7B;AAAA,8BAEA,cAAc;AAAA,8BACd,WACK,gBAAA2B,EAAA,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA,EAACO,IAAoB,CAAA,GACzB;AAAA,4BAER;AAAA,0BAAA,IAEJ,CAAC;AAAA,0BACP,GAAI5C,IACE;AAAA,4BACI;AAAA,8BACI,IAAI;AAAA,8BACJ,MAAM2C,EAAoB;AAAA,8BAC1B,OAAO;AAAA,8BACP,SAAS,MAAM;AACQ,gCAAA3C,KACnBU,EAAgB,MAAS;AAAA,8BAC7B;AAAA,8BACA,cAAc;AAAA,8BACd,WACK,gBAAA2B,EAAA,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA,EAACQ,IAAiB,CAAA,GACtB;AAAA,4BAER;AAAA,0BAAA,IAEJ,CAAC;AAAA,wBACX;AAAA,sBACJ;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;"}
+{"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 { IconExclamationMarkTriangle } from '@frontify/fondue';\nimport { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack } 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-body 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-text-weak 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            onDragLeave={\n                onDrop\n                    ? () => {\n                          setIsDraggingOver(false);\n                          setErrorMsg(undefined);\n                      }\n                    : undefined\n            }\n            onDrop={onDrop ? handleDrop : undefined}\n            onClick={(event) => {\n                withMenu && !menuPosition && openMenu(event);\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 />\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","_a","LoadingCircle","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","Dropdown"],"mappings":"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"}

package/dist/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.es.js

@@ -1,26 +1,25 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import { IconPaperclip16 as c, IconCaretDown12 as i } from "@frontify/fondue";
-import { BaseToolbarButton as m } from "../BaseToolbarButton.es.js";
-const f = ({
-  children: o,
-  isFlyoutOpen: r,
-  triggerProps: e,
-  triggerRef: a
-}) => /* @__PURE__ */ n(
-  m,
-  {
-    forceActiveStyle: r,
-    "data-test-id": "attachments-toolbar-button-trigger",
-    ...e,
-    ref: a,
-    children: [
-      /* @__PURE__ */ t(c, {}),
-      o,
-      /* @__PURE__ */ t(i, {})
-    ]
-  }
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { IconPaperclip16 as m, IconCaretDown12 as n } from "@frontify/fondue";
+import { forwardRef as c } from "react";
+import { BaseToolbarButton as s } from "../BaseToolbarButton.es.js";
+const l = c(
+  ({ children: o, isFlyoutOpen: r, ...e }, a) => /* @__PURE__ */ i(
+    s,
+    {
+      forceActiveStyle: r,
+      "data-test-id": "attachments-toolbar-button-trigger",
+      ref: a,
+      ...e,
+      children: [
+        /* @__PURE__ */ t(m, {}),
+        o,
+        /* @__PURE__ */ t(n, {})
+      ]
+    }
+  )
 );
+l.displayName = "AttachmentsToolbarButtonTrigger";
 export {
-  f as AttachmentsToolbarButtonTrigger
+  l as AttachmentsToolbarButtonTrigger
 };
 //# sourceMappingURL=AttachmentsToolbarButtonTrigger.es.js.map

package/dist/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"AttachmentsToolbarButtonTrigger.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\n\nimport { type AttachmentsTriggerProps } from '../../../Attachments/types';\nimport { BaseToolbarButton } from '../BaseToolbarButton';\n\nexport const AttachmentsToolbarButtonTrigger = ({\n    children,\n    isFlyoutOpen,\n    triggerProps,\n    triggerRef,\n}: AttachmentsTriggerProps) => (\n    <BaseToolbarButton\n        forceActiveStyle={isFlyoutOpen}\n        data-test-id=\"attachments-toolbar-button-trigger\"\n        {...triggerProps}\n        ref={triggerRef}\n    >\n        <IconPaperclip16 />\n        {children}\n        <IconCaretDown12 />\n    </BaseToolbarButton>\n);\n"],"names":["AttachmentsToolbarButtonTrigger","children","isFlyoutOpen","triggerProps","triggerRef","jsxs","BaseToolbarButton","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;AAOO,MAAMA,IAAkC,CAAC;AAAA,EAC5C,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AACJ,MACI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACG,kBAAkBJ;AAAA,IAClB,gBAAa;AAAA,IACZ,GAAGC;AAAA,IACJ,KAAKC;AAAA,IAEL,UAAA;AAAA,MAAA,gBAAAG,EAACC,GAAgB,EAAA;AAAA,MAChBP;AAAA,wBACAQ,GAAgB,EAAA;AAAA,IAAA;AAAA,EAAA;AACrB;"}
+{"version":3,"file":"AttachmentsToolbarButtonTrigger.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\nimport { forwardRef } from 'react';\n\nimport { type AttachmentsTriggerProps } from '../../../Attachments/types';\nimport { BaseToolbarButton } from '../BaseToolbarButton';\n\nexport const AttachmentsToolbarButtonTrigger = forwardRef<HTMLButtonElement, AttachmentsTriggerProps>(\n    ({ children, isFlyoutOpen, ...props }, ref) => (\n        <BaseToolbarButton\n            forceActiveStyle={isFlyoutOpen}\n            data-test-id=\"attachments-toolbar-button-trigger\"\n            ref={ref}\n            {...props}\n        >\n            <IconPaperclip16 />\n            {children}\n            <IconCaretDown12 />\n        </BaseToolbarButton>\n    ),\n);\n\nAttachmentsToolbarButtonTrigger.displayName = 'AttachmentsToolbarButtonTrigger';\n"],"names":["AttachmentsToolbarButtonTrigger","forwardRef","children","isFlyoutOpen","props","ref","jsxs","BaseToolbarButton","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;;AAQO,MAAMA,IAAkCC;AAAA,EAC3C,CAAC,EAAE,UAAAC,GAAU,cAAAC,GAAc,GAAGC,KAASC,MACnC,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,kBAAkBJ;AAAA,MAClB,gBAAa;AAAA,MACb,KAAAE;AAAA,MACC,GAAGD;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI,EAACC,GAAgB,EAAA;AAAA,QAChBP;AAAA,0BACAQ,GAAgB,EAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EACrB;AAER;AAEAV,EAAgC,cAAc;"}

package/dist/components/BlockItemWrapper/Toolbar/FlyoutToolbarButton/FlyoutToolbarButton.es.js

@@ -1,44 +1,36 @@
-import { jsx as t } from "react/jsx-runtime";
-import { useMemoizedId as u, Flyout as p, FlyoutPlacement as h } from "@frontify/fondue";
-import { BaseToolbarButton as g } from "../BaseToolbarButton.es.js";
-import { ToolbarButtonTooltip as w } from "../ToolbarButtonTooltip.es.js";
-import { useDragPreviewContext as x } from "../context/DragPreviewContext.es.js";
-import { useMultiFlyoutState as y } from "../hooks/useMultiFlyoutState.es.js";
-const O = ({
-  content: r,
-  icon: i,
-  tooltip: l,
-  flyoutId: n,
-  flyoutFooter: a,
-  flyoutHeader: s
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { useMemoizedId as h } from "@frontify/fondue";
+import { BaseToolbarButton as u } from "../BaseToolbarButton.es.js";
+import { ToolbarButtonTooltip as f } from "../ToolbarButtonTooltip.es.js";
+import { useDragPreviewContext as w } from "../context/DragPreviewContext.es.js";
+import { useMultiFlyoutState as b } from "../hooks/useMultiFlyoutState.es.js";
+import { Flyout as o } from "../../../../node_modules/.pnpm/@frontify_fondue-components@19.2.0_@frontify_fondue-icons@0.17.0_react@18.3.1__@frontify_fond_2ljulupxsngf67kv3awqop75em/node_modules/@frontify/fondue-components/dist/fondue-components13.es.js";
+const y = ({
+  content: s,
+  icon: a,
+  tooltip: d,
+  flyoutId: m,
+  flyoutFooter: i,
+  flyoutHeader: n
 }) => {
-  const m = u(n), { isOpen: e, onOpenChange: f } = y(m), o = x();
-  return /* @__PURE__ */ t(w, { disabled: o || e, content: l, children: /* @__PURE__ */ t("div", { className: "tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative", children: /* @__PURE__ */ t(
-    p,
-    {
-      isOpen: e && !o,
-      legacyFooter: !1,
-      fixedFooter: a,
-      fixedHeader: s,
-      fitContent: !0,
-      hug: !1,
-      placement: h.BottomRight,
-      onOpenChange: f,
-      trigger: (c, d) => /* @__PURE__ */ t(
-        g,
-        {
-          "data-test-id": "block-item-wrapper-toolbar-flyout",
-          forceActiveStyle: e && !o,
-          ...c,
-          ref: d,
-          children: i
-        }
-      ),
-      children: r
-    }
-  ) }) });
+  const c = h(m), { isOpen: e, onOpenChange: p } = b(c), r = w();
+  return /* @__PURE__ */ t(f, { disabled: r || e, content: d, children: /* @__PURE__ */ t("div", { className: "tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative", children: /* @__PURE__ */ l(o.Root, { open: e && !r, onOpenChange: p, children: [
+    /* @__PURE__ */ t(o.Trigger, { asChild: !0, children: /* @__PURE__ */ t(
+      u,
+      {
+        "data-test-id": "block-item-wrapper-toolbar-flyout",
+        forceActiveStyle: e && !r,
+        children: a
+      }
+    ) }),
+    /* @__PURE__ */ l(o.Content, { side: "bottom", align: "end", children: [
+      n && /* @__PURE__ */ t(o.Header, { children: n }),
+      s,
+      i && /* @__PURE__ */ t(o.Footer, { children: i })
+    ] })
+  ] }) }) });
 };
 export {
-  O as FlyoutToolbarButton
+  y as FlyoutToolbarButton
 };
 //# sourceMappingURL=FlyoutToolbarButton.es.js.map

package/dist/components/BlockItemWrapper/Toolbar/FlyoutToolbarButton/FlyoutToolbarButton.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlyoutToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/FlyoutToolbarButton/FlyoutToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Flyout, FlyoutPlacement, useMemoizedId } from '@frontify/fondue';\nimport { type MutableRefObject, type ReactNode } from 'react';\n\nimport { BaseToolbarButton } from '../BaseToolbarButton';\nimport { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\nimport { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';\n\nexport type FlyoutToolbarButtonProps = {\n    content: ReactNode;\n    icon: ReactNode;\n    tooltip: ReactNode;\n    flyoutId: string;\n    flyoutFooter?: ReactNode;\n    flyoutHeader?: ReactNode;\n};\n\nexport const FlyoutToolbarButton = ({\n    content,\n    icon,\n    tooltip,\n    flyoutId,\n    flyoutFooter,\n    flyoutHeader,\n}: FlyoutToolbarButtonProps) => {\n    const id = useMemoizedId(flyoutId);\n\n    const { isOpen, onOpenChange } = useMultiFlyoutState(id);\n\n    const isDragPreview = useDragPreviewContext();\n\n    return (\n        <ToolbarButtonTooltip disabled={isDragPreview || isOpen} content={tooltip}>\n            <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative\">\n                <Flyout\n                    isOpen={isOpen && !isDragPreview}\n                    legacyFooter={false}\n                    fixedFooter={flyoutFooter}\n                    fixedHeader={flyoutHeader}\n                    fitContent\n                    hug={false}\n                    placement={FlyoutPlacement.BottomRight}\n                    onOpenChange={onOpenChange}\n                    trigger={(triggerProps, triggerRef) => (\n                        <BaseToolbarButton\n                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                            forceActiveStyle={isOpen && !isDragPreview}\n                            {...triggerProps}\n                            ref={triggerRef as MutableRefObject<HTMLButtonElement>}\n                        >\n                            {icon}\n                        </BaseToolbarButton>\n                    )}\n                >\n                    {content}\n                </Flyout>\n            </div>\n        </ToolbarButtonTooltip>\n    );\n};\n"],"names":["FlyoutToolbarButton","content","icon","tooltip","flyoutId","flyoutFooter","flyoutHeader","id","useMemoizedId","isOpen","onOpenChange","useMultiFlyoutState","isDragPreview","useDragPreviewContext","jsx","ToolbarButtonTooltip","Flyout","FlyoutPlacement","triggerProps","triggerRef","BaseToolbarButton"],"mappings":";;;;;;AAmBO,MAAMA,IAAsB,CAAC;AAAA,EAChC,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AACJ,MAAgC;AACtB,QAAAC,IAAKC,EAAcJ,CAAQ,GAE3B,EAAE,QAAAK,GAAQ,cAAAC,EAAa,IAAIC,EAAoBJ,CAAE,GAEjDK,IAAgBC;AAGlB,SAAA,gBAAAC,EAACC,GAAqB,EAAA,UAAUH,KAAiBH,GAAQ,SAASN,GAC9D,UAAA,gBAAAW,EAAC,OAAI,EAAA,WAAU,yDACX,UAAA,gBAAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACG,QAAQP,KAAU,CAACG;AAAA,MACnB,cAAc;AAAA,MACd,aAAaP;AAAA,MACb,aAAaC;AAAA,MACb,YAAU;AAAA,MACV,KAAK;AAAA,MACL,WAAWW,EAAgB;AAAA,MAC3B,cAAAP;AAAA,MACA,SAAS,CAACQ,GAAcC,MACpB,gBAAAL;AAAA,QAACM;AAAA,QAAA;AAAA,UACG,gBAAa;AAAA,UACb,kBAAkBX,KAAU,CAACG;AAAA,UAC5B,GAAGM;AAAA,UACJ,KAAKC;AAAA,UAEJ,UAAAjB;AAAA,QAAA;AAAA,MACL;AAAA,MAGH,UAAAD;AAAA,IAAA;AAAA,EAAA,EAET,CAAA,EACJ,CAAA;AAER;"}
+{"version":3,"file":"FlyoutToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/FlyoutToolbarButton/FlyoutToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@frontify/fondue';\nimport { Flyout } from '@frontify/fondue/components';\nimport { type ReactNode } from 'react';\n\nimport { BaseToolbarButton } from '../BaseToolbarButton';\nimport { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\nimport { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';\n\nexport type FlyoutToolbarButtonProps = {\n    content: ReactNode;\n    icon: ReactNode;\n    tooltip: ReactNode;\n    flyoutId: string;\n    flyoutFooter?: ReactNode;\n    flyoutHeader?: ReactNode;\n};\n\nexport const FlyoutToolbarButton = ({\n    content,\n    icon,\n    tooltip,\n    flyoutId,\n    flyoutFooter,\n    flyoutHeader,\n}: FlyoutToolbarButtonProps) => {\n    const id = useMemoizedId(flyoutId);\n\n    const { isOpen, onOpenChange } = useMultiFlyoutState(id);\n\n    const isDragPreview = useDragPreviewContext();\n\n    return (\n        <ToolbarButtonTooltip disabled={isDragPreview || isOpen} content={tooltip}>\n            <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative\">\n                <Flyout.Root open={isOpen && !isDragPreview} onOpenChange={onOpenChange}>\n                    <Flyout.Trigger asChild>\n                        <BaseToolbarButton\n                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                            forceActiveStyle={isOpen && !isDragPreview}\n                        >\n                            {icon}\n                        </BaseToolbarButton>\n                    </Flyout.Trigger>\n                    <Flyout.Content side=\"bottom\" align=\"end\">\n                        {flyoutHeader && <Flyout.Header>{flyoutHeader}</Flyout.Header>}\n                        {content}\n                        {flyoutFooter && <Flyout.Footer>{flyoutFooter}</Flyout.Footer>}\n                    </Flyout.Content>\n                </Flyout.Root>\n            </div>\n        </ToolbarButtonTooltip>\n    );\n};\n"],"names":["FlyoutToolbarButton","content","icon","tooltip","flyoutId","flyoutFooter","flyoutHeader","id","useMemoizedId","isOpen","onOpenChange","useMultiFlyoutState","isDragPreview","useDragPreviewContext","ToolbarButtonTooltip","jsx","jsxs","Flyout","BaseToolbarButton"],"mappings":";;;;;;;AAoBO,MAAMA,IAAsB,CAAC;AAAA,EAChC,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AACJ,MAAgC;AACtB,QAAAC,IAAKC,EAAcJ,CAAQ,GAE3B,EAAE,QAAAK,GAAQ,cAAAC,EAAa,IAAIC,EAAoBJ,CAAE,GAEjDK,IAAgBC;AAEtB,2BACKC,GAAqB,EAAA,UAAUF,KAAiBH,GAAQ,SAASN,GAC9D,UAAC,gBAAAY,EAAA,OAAA,EAAI,WAAU,yDACX,UAAA,gBAAAC,EAACC,EAAO,MAAP,EAAY,MAAMR,KAAU,CAACG,GAAe,cAAAF,GACzC,UAAA;AAAA,IAAA,gBAAAK,EAACE,EAAO,SAAP,EAAe,SAAO,IACnB,UAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACG,gBAAa;AAAA,QACb,kBAAkBT,KAAU,CAACG;AAAA,QAE5B,UAAAV;AAAA,MAAA;AAAA,IAAA,GAET;AAAA,sBACCe,EAAO,SAAP,EAAe,MAAK,UAAS,OAAM,OAC/B,UAAA;AAAA,MAAAX,KAAiB,gBAAAS,EAAAE,EAAO,QAAP,EAAe,UAAaX,GAAA;AAAA,MAC7CL;AAAA,MACAI,KAAgB,gBAAAU,EAACE,EAAO,QAAP,EAAe,UAAaZ,GAAA;AAAA,IAAA,GAClD;AAAA,EAAA,GACJ,GACJ,EACJ,CAAA;AAER;"}