@frontify/guideline-blocks-settings 1.0.13 → 2.0.1

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 { 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                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 />\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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"}
+{"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-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                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/BlockItemWrapper/BlockItemWrapper.es.js

@@ -1,39 +1,39 @@
 import { jsx as t, Fragment as v, jsxs as h } from "react/jsx-runtime";
-import { memo as x, useState as g, useRef as N } from "react";
-import { DragPreviewContextProvider as b } from "./Toolbar/context/DragPreviewContext.es.js";
+import { memo as x, useState as b, useRef as g } from "react";
+import { DragPreviewContextProvider as N } from "./Toolbar/context/DragPreviewContext.es.js";
 import { MultiFlyoutContextProvider as F } from "./Toolbar/context/MultiFlyoutContext.es.js";
-import { DEFAULT_MENU_BUTTON_ID as T } from "./Toolbar/MenuToolbarButton/MenuToolbarButton.es.js";
-import { Toolbar as j } from "./Toolbar/Toolbar.es.js";
-import { joinClassNames as a } from "../../utilities/react/joinClassNames.es.js";
-const D = x(
+import { DEFAULT_MENU_BUTTON_ID as I } from "./Toolbar/MenuToolbarButton/MenuToolbarButton.es.js";
+import { Toolbar as T } from "./Toolbar/Toolbar.es.js";
+import { joinClassNames as s } from "../../utilities/react/joinClassNames.es.js";
+const j = x(
   ({
-    children: r,
-    toolbarItems: e,
+    children: o,
+    toolbarItems: a,
     shouldHideWrapper: p,
     shouldHideComponent: w = !1,
     isDragging: n = !1,
     shouldFillContainer: c,
-    outlineOffset: o = 0,
-    shouldBeShown: i = !1,
+    outlineOffset: e = 0,
+    shouldBeShown: r = !1,
     showAttachments: m = !1
   }) => {
-    const [l, u] = g(i ? [T] : []), f = N(null);
+    const [i, u] = b(r ? [I] : []), f = g(null);
     if (p)
-      return /* @__PURE__ */ t(v, { children: r });
-    const d = e == null ? void 0 : e.filter((y) => y !== void 0), s = l.length > 0 || i;
-    return /* @__PURE__ */ t(b, { isDragPreview: n, children: /* @__PURE__ */ t(F, { openFlyoutIds: l, setOpenFlyoutIds: u, children: /* @__PURE__ */ h(
+      return /* @__PURE__ */ t(v, { children: o });
+    const d = a?.filter((y) => y !== void 0), l = i.length > 0 || r;
+    return /* @__PURE__ */ t(N, { isDragPreview: n, children: /* @__PURE__ */ t(F, { openFlyoutIds: i, setOpenFlyoutIds: u, children: /* @__PURE__ */ h(
       "div",
       {
         ref: f,
         "data-test-id": "block-item-wrapper",
         style: {
-          outlineOffset: o
+          outlineOffset: e
         },
-        className: a([
+        className: s([
           "tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse",
           c && "tw-flex-1 tw-h-full tw-w-full",
           "hover:tw-outline focus-within:tw-outline",
-          s && "tw-outline",
+          l && "tw-outline",
           w && "tw-opacity-0"
         ]),
         children: [
@@ -41,17 +41,17 @@ const D = x(
             "div",
             {
               style: {
-                right: -1 - o,
-                bottom: `calc(100% - ${2 + o}px)`
+                right: -1 - e,
+                bottom: `calc(100% - ${2 + e}px)`
               },
-              className: a([
+              className: s([
                 "tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]",
                 "group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100",
                 "tw-flex tw-justify-end",
-                s && "tw-opacity-100"
+                l && "tw-opacity-100"
               ]),
               children: /* @__PURE__ */ t(
-                j,
+                T,
                 {
                   attachments: {
                     isEnabled: m
@@ -61,14 +61,14 @@ const D = x(
               )
             }
           ),
-          r
+          o
         ]
       }
     ) }) });
   }
 );
-D.displayName = "BlockItemWrapper";
+j.displayName = "BlockItemWrapper";
 export {
-  D as BlockItemWrapper
+  j as BlockItemWrapper
 };
 //# sourceMappingURL=BlockItemWrapper.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, memo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\nimport { type BlockItemWrapperProps } from './types';\n\nexport const BlockItemWrapper = memo(\n    ({\n        children,\n        toolbarItems,\n        shouldHideWrapper,\n        shouldHideComponent = false,\n        isDragging = false,\n        shouldFillContainer,\n        outlineOffset = 0,\n        shouldBeShown = false,\n        showAttachments = false,\n    }: BlockItemWrapperProps): ReactElement => {\n        const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);\n        const wrapperRef = useRef<HTMLDivElement>(null);\n\n        if (shouldHideWrapper) {\n            return <>{children}</>;\n        }\n\n        const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n        const shouldToolbarBeVisible = openFlyoutIds.length > 0 || shouldBeShown;\n\n        return (\n            <DragPreviewContextProvider isDragPreview={isDragging}>\n                <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>\n                    <div\n                        ref={wrapperRef}\n                        data-test-id=\"block-item-wrapper\"\n                        style={{\n                            outlineOffset,\n                        }}\n                        className={joinClassNames([\n                            'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',\n                            shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                            'hover:tw-outline focus-within:tw-outline',\n                            shouldToolbarBeVisible && 'tw-outline',\n                            shouldHideComponent && 'tw-opacity-0',\n                        ])}\n                    >\n                        <div\n                            style={{\n                                right: -1 - outlineOffset,\n                                bottom: `calc(100% - ${2 + outlineOffset}px)`,\n                            }}\n                            className={joinClassNames([\n                                'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',\n                                'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                                'tw-flex tw-justify-end',\n                                shouldToolbarBeVisible && 'tw-opacity-100',\n                            ])}\n                        >\n                            <Toolbar\n                                attachments={{\n                                    isEnabled: showAttachments,\n                                }}\n                                items={items}\n                            />\n                        </div>\n                        {children}\n                    </div>\n                </MultiFlyoutContextProvider>\n            </DragPreviewContextProvider>\n        );\n    },\n);\n\nBlockItemWrapper.displayName = 'BlockItemWrapper';\n"],"names":["BlockItemWrapper","memo","children","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","showAttachments","openFlyoutIds","setOpenFlyoutIds","useState","DEFAULT_MENU_BUTTON_ID","wrapperRef","useRef","items","item","shouldToolbarBeVisible","DragPreviewContextProvider","jsx","MultiFlyoutContextProvider","jsxs","joinClassNames","Toolbar"],"mappings":";;;;;;;AAWO,MAAMA,IAAmBC;AAAA,EAC5B,CAAC;AAAA,IACG,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,YAAAC,IAAa;AAAA,IACb,qBAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,iBAAAC,IAAkB;AAAA,EAAA,MACqB;AACvC,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAmBJ,IAAgB,CAACK,CAAsB,IAAI,EAAE,GACpGC,IAAaC,EAAuB,IAAI;AAE9C,QAAIZ;AACA,oCAAU,UAAAF,GAAS;AAGvB,UAAMe,IAAQd,KAAA,gBAAAA,EAAc,OAAO,CAACe,MAA8BA,MAAS,SAErEC,IAAyBR,EAAc,SAAS,KAAKF;AAE3D,6BACKW,GAAA,EAA2B,eAAed,GACvC,UAAA,gBAAAe,EAACC,GAAA,EAA2B,eAAAX,GAA8B,kBAAAC,GACtD,UAAA,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKR;AAAA,QACL,gBAAa;AAAA,QACb,OAAO;AAAA,UACH,eAAAP;AAAA,QAAA;AAAA,QAEJ,WAAWgB,EAAe;AAAA,UACtB;AAAA,UACAjB,KAAuB;AAAA,UACvB;AAAA,UACAY,KAA0B;AAAA,UAC1Bd,KAAuB;AAAA,QAAA,CAC1B;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAgB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,OAAO;AAAA,gBACH,OAAO,KAAKb;AAAA,gBACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,cAAA;AAAA,cAE5C,WAAWgB,EAAe;AAAA,gBACtB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACAL,KAA0B;AAAA,cAAA,CAC7B;AAAA,cAED,UAAA,gBAAAE;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACG,aAAa;AAAA,oBACT,WAAWf;AAAA,kBAAA;AAAA,kBAEf,OAAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,UAEHf;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAET,EAAA,CACJ;AAAA,EAER;AACJ;AAEAF,EAAiB,cAAc;"}
+{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, memo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\nimport { type BlockItemWrapperProps } from './types';\n\nexport const BlockItemWrapper = memo(\n    ({\n        children,\n        toolbarItems,\n        shouldHideWrapper,\n        shouldHideComponent = false,\n        isDragging = false,\n        shouldFillContainer,\n        outlineOffset = 0,\n        shouldBeShown = false,\n        showAttachments = false,\n    }: BlockItemWrapperProps): ReactElement => {\n        const [openFlyoutIds, setOpenFlyoutIds] = useState<string[]>(shouldBeShown ? [DEFAULT_MENU_BUTTON_ID] : []);\n        const wrapperRef = useRef<HTMLDivElement>(null);\n\n        if (shouldHideWrapper) {\n            return <>{children}</>;\n        }\n\n        const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n        const shouldToolbarBeVisible = openFlyoutIds.length > 0 || shouldBeShown;\n\n        return (\n            <DragPreviewContextProvider isDragPreview={isDragging}>\n                <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>\n                    <div\n                        ref={wrapperRef}\n                        data-test-id=\"block-item-wrapper\"\n                        style={{\n                            outlineOffset,\n                        }}\n                        className={joinClassNames([\n                            'tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse',\n                            shouldFillContainer && 'tw-flex-1 tw-h-full tw-w-full',\n                            'hover:tw-outline focus-within:tw-outline',\n                            shouldToolbarBeVisible && 'tw-outline',\n                            shouldHideComponent && 'tw-opacity-0',\n                        ])}\n                    >\n                        <div\n                            style={{\n                                right: -1 - outlineOffset,\n                                bottom: `calc(100% - ${2 + outlineOffset}px)`,\n                            }}\n                            className={joinClassNames([\n                                'tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-[60]',\n                                'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n                                'tw-flex tw-justify-end',\n                                shouldToolbarBeVisible && 'tw-opacity-100',\n                            ])}\n                        >\n                            <Toolbar\n                                attachments={{\n                                    isEnabled: showAttachments,\n                                }}\n                                items={items}\n                            />\n                        </div>\n                        {children}\n                    </div>\n                </MultiFlyoutContextProvider>\n            </DragPreviewContextProvider>\n        );\n    },\n);\n\nBlockItemWrapper.displayName = 'BlockItemWrapper';\n"],"names":["BlockItemWrapper","memo","children","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","showAttachments","openFlyoutIds","setOpenFlyoutIds","useState","DEFAULT_MENU_BUTTON_ID","wrapperRef","useRef","items","item","shouldToolbarBeVisible","DragPreviewContextProvider","jsx","MultiFlyoutContextProvider","jsxs","joinClassNames","Toolbar"],"mappings":";;;;;;;AAWO,MAAMA,IAAmBC;AAAA,EAC5B,CAAC;AAAA,IACG,UAAAC;AAAA,IACA,cAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,YAAAC,IAAa;AAAA,IACb,qBAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,eAAAC,IAAgB;AAAA,IAChB,iBAAAC,IAAkB;AAAA,EAAA,MACqB;AACvC,UAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAmBJ,IAAgB,CAACK,CAAsB,IAAI,EAAE,GACpGC,IAAaC,EAAuB,IAAI;AAE9C,QAAIZ;AACA,oCAAU,UAAAF,GAAS;AAGvB,UAAMe,IAAQd,GAAc,OAAO,CAACe,MAA8BA,MAAS,MAAS,GAE9EC,IAAyBR,EAAc,SAAS,KAAKF;AAE3D,6BACKW,GAAA,EAA2B,eAAed,GACvC,UAAA,gBAAAe,EAACC,GAAA,EAA2B,eAAAX,GAA8B,kBAAAC,GACtD,UAAA,gBAAAW;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,KAAKR;AAAA,QACL,gBAAa;AAAA,QACb,OAAO;AAAA,UACH,eAAAP;AAAA,QAAA;AAAA,QAEJ,WAAWgB,EAAe;AAAA,UACtB;AAAA,UACAjB,KAAuB;AAAA,UACvB;AAAA,UACAY,KAA0B;AAAA,UAC1Bd,KAAuB;AAAA,QAAA,CAC1B;AAAA,QAED,UAAA;AAAA,UAAA,gBAAAgB;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,OAAO;AAAA,gBACH,OAAO,KAAKb;AAAA,gBACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,cAAA;AAAA,cAE5C,WAAWgB,EAAe;AAAA,gBACtB;AAAA,gBACA;AAAA,gBACA;AAAA,gBACAL,KAA0B;AAAA,cAAA,CAC7B;AAAA,cAED,UAAA,gBAAAE;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACG,aAAa;AAAA,oBACT,WAAWf;AAAA,kBAAA;AAAA,kBAEf,OAAAO;AAAA,gBAAA;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,UAEHf;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,GAET,EAAA,CACJ;AAAA,EAER;AACJ;AAEAF,EAAiB,cAAc;"}

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

@@ -1,19 +1,19 @@
 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(
+import { IconPaperclip as m, IconCaretDown as n } from "@frontify/fondue/icons";
+import { forwardRef as s } from "react";
+import { BaseToolbarButton as c } from "../BaseToolbarButton.es.js";
+const l = s(
   ({ children: o, isFlyoutOpen: r, ...e }, a) => /* @__PURE__ */ i(
-    s,
+    c,
     {
       forceActiveStyle: r,
       "data-test-id": "attachments-toolbar-button-trigger",
       ref: a,
       ...e,
       children: [
-        /* @__PURE__ */ t(m, {}),
+        /* @__PURE__ */ t(m, { size: "16" }),
         o,
-        /* @__PURE__ */ t(n, {})
+        /* @__PURE__ */ t(n, { size: "12" })
       ]
     }
   )

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';\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,EAAA,GAASC,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,GAAA,EAAgB;AAAA,QAChBP;AAAA,0BACAQ,GAAA,CAAA,CAAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG7B;AAEAV,EAAgC,cAAc;"}
+{"version":3,"file":"AttachmentsToolbarButtonTrigger.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown, IconPaperclip } from '@frontify/fondue/icons';\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            <IconPaperclip size=\"16\" />\n            {children}\n            <IconCaretDown size=\"12\" />\n        </BaseToolbarButton>\n    ),\n);\n\nAttachmentsToolbarButtonTrigger.displayName = 'AttachmentsToolbarButtonTrigger';\n"],"names":["AttachmentsToolbarButtonTrigger","forwardRef","children","isFlyoutOpen","props","ref","jsxs","BaseToolbarButton","jsx","IconPaperclip","IconCaretDown"],"mappings":";;;;AAQO,MAAMA,IAAkCC;AAAA,EAC3C,CAAC,EAAE,UAAAC,GAAU,cAAAC,GAAc,GAAGC,EAAA,GAASC,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,GAAA,EAAc,MAAK,KAAA,CAAK;AAAA,QACxBP;AAAA,QACD,gBAAAM,EAACE,GAAA,EAAc,MAAK,KAAA,CAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGrC;AAEAV,EAAgC,cAAc;"}

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

@@ -1,10 +1,10 @@
 import { jsx as o, jsxs as l } from "react/jsx-runtime";
 import { useMemoizedId as h } from "@frontify/fondue";
+import { Flyout as t } from "@frontify/fondue/components";
 import { BaseToolbarButton as u } from "../BaseToolbarButton.es.js";
 import { ToolbarButtonTooltip as f } from "../ToolbarButtonTooltip.es.js";
 import { useDragPreviewContext as b } from "../context/DragPreviewContext.es.js";
 import { useMultiFlyoutState as w } from "../hooks/useMultiFlyoutState.es.js";
-import { Flyout as t } from "../../../../node_modules/.pnpm/@frontify_fondue-components@24.0.0_@frontify_fondue-icons@0.22.0_react-dom@18.3.1_react_870f8cc1d831f9180d95daa07a18de35/node_modules/@frontify/fondue-components/dist/fondue-components13.es.js";
 const F = ({
   content: d,
   icon: a,