@frontify/guideline-blocks-settings 0.32.1 → 0.32.2

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

@@ -1,67 +1,65 @@
-import { jsx as o, Fragment as O, jsxs as b } from "react/jsx-runtime";
-import { useState as p, useRef as F } from "react";
+import { jsx as t, Fragment as h, jsxs as x } from "react/jsx-runtime";
+import { useState as g, useRef as b } from "react";
+import { DragPreviewContextProvider as F } from "./Toolbar/context/DragPreviewContext.es.js";
+import { MultiFlyoutContextProvider as N } 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 r } from "../../utilities/react/joinClassNames.es.js";
-const A = ({
+import { joinClassNames as n } from "../../utilities/react/joinClassNames.es.js";
+const k = ({
   children: i,
   toolbarFlyoutItems: w,
-  toolbarItems: t,
-  shouldHideWrapper: c,
-  shouldHideComponent: u = !1,
-  isDragging: f,
-  shouldFillContainer: m,
-  outlineOffset: e = 2,
-  shouldBeShown: n = !1,
-  showAttachments: y = !1
+  toolbarItems: e,
+  shouldHideWrapper: a,
+  shouldHideComponent: p = !1,
+  isDragging: c = !1,
+  shouldFillContainer: u,
+  outlineOffset: o = 2,
+  shouldBeShown: r = !1,
+  showAttachments: f = !1
 }) => {
-  const [s, h] = p(n), [l, d] = p(!1), x = F(null);
-  if (c)
-    return /* @__PURE__ */ o(O, { children: i });
-  const g = t == null ? void 0 : t.filter((v) => v !== void 0), a = s || l || n;
-  return /* @__PURE__ */ b(
+  const [l, m] = g(r ? [T] : []), d = b(null);
+  if (a)
+    return /* @__PURE__ */ t(h, { children: i });
+  const y = e == null ? void 0 : e.filter((v) => v !== void 0), s = l.length > 0 || r;
+  return /* @__PURE__ */ t(F, { isDragPreview: c, children: /* @__PURE__ */ t(N, { openFlyoutIds: l, setOpenFlyoutIds: m, children: /* @__PURE__ */ x(
     "div",
     {
-      ref: x,
+      ref: d,
       "data-test-id": "block-item-wrapper",
       style: {
-        outlineOffset: e
+        outlineOffset: o
       },
-      className: r([
+      className: n([
         "tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse",
-        m && "tw-flex-1 tw-h-full tw-w-full",
+        u && "tw-flex-1 tw-h-full tw-w-full",
         "hover:tw-outline focus-within:tw-outline",
-        a && "tw-outline",
-        u && "tw-opacity-0"
+        s && "tw-outline",
+        p && "tw-opacity-0"
       ]),
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ t(
           "div",
           {
             style: {
-              right: -1 - e,
-              bottom: `calc(100% - ${2 + e}px)`
+              right: -1 - o,
+              bottom: `calc(100% - ${2 + o}px)`
             },
-            className: r([
+            className: n([
               "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",
-              a && "tw-opacity-100"
+              s && "tw-opacity-100"
             ]),
-            children: /* @__PURE__ */ o(
+            children: /* @__PURE__ */ t(
               j,
               {
                 flyoutMenu: {
-                  items: w,
-                  isOpen: s,
-                  onOpenChange: h
+                  items: w
                 },
                 attachments: {
-                  isEnabled: y,
-                  isOpen: l,
-                  onOpenChange: d
+                  isEnabled: f
                 },
-                items: g,
-                isDragging: f
+                items: y
               }
             )
           }
@@ -69,9 +67,9 @@ const A = ({
         i
       ]
     }
-  );
+  ) }) });
 };
 export {
-  A as BlockItemWrapper
+  k 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, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { Toolbar, type ToolbarItem } from './Toolbar';\nimport { type BlockItemWrapperProps } from './types';\n\nexport const BlockItemWrapper = ({\n    children,\n    toolbarFlyoutItems,\n    toolbarItems,\n    shouldHideWrapper,\n    shouldHideComponent = false,\n    isDragging,\n    shouldFillContainer,\n    outlineOffset = 2,\n    shouldBeShown = false,\n    showAttachments = false,\n}: BlockItemWrapperProps): ReactElement => {\n    const [isMenuFlyoutOpen, setIsMenuFlyoutOpen] = useState(shouldBeShown);\n    const [isAttachmentFlyoutOpen, setIsAttachmentFlyoutOpen] = useState(false);\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    if (shouldHideWrapper) {\n        // eslint-disable-next-line react/jsx-no-useless-fragment\n        return <>{children}</>;\n    }\n\n    const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n    const shouldToolbarBeVisible = isMenuFlyoutOpen || isAttachmentFlyoutOpen || shouldBeShown;\n\n    return (\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                    flyoutMenu={{\n                        items: toolbarFlyoutItems,\n                        isOpen: isMenuFlyoutOpen,\n                        onOpenChange: setIsMenuFlyoutOpen,\n                    }}\n                    attachments={{\n                        isEnabled: showAttachments,\n                        isOpen: isAttachmentFlyoutOpen,\n                        onOpenChange: setIsAttachmentFlyoutOpen,\n                    }}\n                    items={items}\n                    isDragging={isDragging}\n                />\n            </div>\n            {children}\n        </div>\n    );\n};\n"],"names":["BlockItemWrapper","children","toolbarFlyoutItems","toolbarItems","shouldHideWrapper","shouldHideComponent","isDragging","shouldFillContainer","outlineOffset","shouldBeShown","showAttachments","isMenuFlyoutOpen","setIsMenuFlyoutOpen","useState","isAttachmentFlyoutOpen","setIsAttachmentFlyoutOpen","wrapperRef","useRef","items","item","shouldToolbarBeVisible","jsxs","joinClassNames","jsx","Toolbar"],"mappings":";;;;AASO,MAAMA,IAAmB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,iBAAAC,IAAkB;AACtB,MAA2C;AACvC,QAAM,CAACC,GAAkBC,CAAmB,IAAIC,EAASJ,CAAa,GAChE,CAACK,GAAwBC,CAAyB,IAAIF,EAAS,EAAK,GACpEG,IAAaC,EAAuB,IAAI;AAE9C,MAAIb;AAEA,kCAAU,UAAAH,EAAS,CAAA;AAGvB,QAAMiB,IAAQf,KAAA,gBAAAA,EAAc,OAAO,CAACgB,MAA8BA,MAAS,SAErEC,IAAyBT,KAAoBG,KAA0BL;AAGzE,SAAA,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKL;AAAA,MACL,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAR;AAAA,MACJ;AAAA,MACA,WAAWc,EAAe;AAAA,QACtB;AAAA,QACAf,KAAuB;AAAA,QACvB;AAAA,QACAa,KAA0B;AAAA,QAC1Bf,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAkB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKf;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWc,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,cACA;AAAA,cACAF,KAA0B;AAAA,YAAA,CAC7B;AAAA,YAED,UAAA,gBAAAG;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,YAAY;AAAA,kBACR,OAAOtB;AAAA,kBACP,QAAQS;AAAA,kBACR,cAAcC;AAAA,gBAClB;AAAA,gBACA,aAAa;AAAA,kBACT,WAAWF;AAAA,kBACX,QAAQI;AAAA,kBACR,cAAcC;AAAA,gBAClB;AAAA,gBACA,OAAAG;AAAA,gBACA,YAAAZ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type ReactElement, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { DEFAULT_MENU_BUTTON_ID, Toolbar, type ToolbarItem } from './Toolbar';\nimport { type BlockItemWrapperProps } from './types';\nimport { DragPreviewContextProvider } from './Toolbar/context/DragPreviewContext';\nimport { MultiFlyoutContextProvider } from './Toolbar/context/MultiFlyoutContext';\n\nexport const BlockItemWrapper = ({\n    children,\n    toolbarFlyoutItems,\n    toolbarItems,\n    shouldHideWrapper,\n    shouldHideComponent = false,\n    isDragging = false,\n    shouldFillContainer,\n    outlineOffset = 2,\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        // eslint-disable-next-line react/jsx-no-useless-fragment\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                            flyoutMenu={{\n                                items: toolbarFlyoutItems,\n                            }}\n                            attachments={{\n                                isEnabled: showAttachments,\n                            }}\n                            items={items}\n                        />\n                    </div>\n                    {children}\n                </div>\n            </MultiFlyoutContextProvider>\n        </DragPreviewContextProvider>\n    );\n};\n"],"names":["BlockItemWrapper","children","toolbarFlyoutItems","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,IAAmB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,YAAAC,IAAa;AAAA,EACb,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,eAAAC,IAAgB;AAAA,EAChB,iBAAAC,IAAkB;AACtB,MAA2C;AACjC,QAAA,CAACC,GAAeC,CAAgB,IAAIC,EAAmBJ,IAAgB,CAACK,CAAsB,IAAI,CAAA,CAAE,GACpGC,IAAaC,EAAuB,IAAI;AAE9C,MAAIZ;AAEA,kCAAU,UAAAH,EAAS,CAAA;AAGvB,QAAMgB,IAAQd,KAAA,gBAAAA,EAAc,OAAO,CAACe,MAA8BA,MAAS,SAErEC,IAAyBR,EAAc,SAAS,KAAKF;AAE3D,2BACKW,GAA2B,EAAA,eAAed,GACvC,UAAC,gBAAAe,EAAAC,GAAA,EAA2B,eAAAX,GAA8B,kBAAAC,GACtD,UAAA,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKR;AAAA,MACL,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAP;AAAA,MACJ;AAAA,MACA,WAAWgB,EAAe;AAAA,QACtB;AAAA,QACAjB,KAAuB;AAAA,QACvB;AAAA,QACAY,KAA0B;AAAA,QAC1Bd,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAgB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKb;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWgB,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,cACA;AAAA,cACAL,KAA0B;AAAA,YAAA,CAC7B;AAAA,YAED,UAAA,gBAAAE;AAAA,cAACI;AAAA,cAAA;AAAA,gBACG,YAAY;AAAA,kBACR,OAAOvB;AAAA,gBACX;AAAA,gBACA,aAAa;AAAA,kBACT,WAAWQ;AAAA,gBACf;AAAA,gBACA,OAAAO;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACChB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAET,CAAA,EACJ,CAAA;AAER;"}

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

@@ -0,0 +1,33 @@
+import { jsx as h } from "react/jsx-runtime";
+import { useMemoizedId as A } from "@frontify/fondue";
+import { useMultiFlyoutState as l } from "../hooks/useMultiFlyoutState.es.js";
+import { AttachmentsToolbarButtonTrigger as d } from "./AttachmentsToolbarButtonTrigger.es.js";
+import { useDragPreviewContext as u } from "../context/DragPreviewContext.es.js";
+import { useAttachmentsContext as T } from "../../../../hooks/useAttachments.es.js";
+import { Attachments as g } from "../../../Attachments/Attachments.es.js";
+const f = "attachments", U = ({
+  flyoutId: o = f
+}) => {
+  const n = A(o), { appBridge: r, attachments: m, onAttachmentsAdd: t, onAttachmentDelete: s, onAttachmentReplace: e, onAttachmentsSorted: a } = T(), { isOpen: i, onOpenChange: c } = l(n), p = u();
+  return /* @__PURE__ */ h(
+    g,
+    {
+      onUpload: t,
+      onDelete: s,
+      onReplaceWithBrowse: e,
+      onReplaceWithUpload: e,
+      onSorted: a,
+      onBrowse: t,
+      items: m,
+      appBridge: r,
+      triggerComponent: d,
+      isOpen: i && !p,
+      onOpenChange: c
+    }
+  );
+};
+export {
+  U as AttachmentsToolbarButton,
+  f as DEFAULT_ATTACHMENTS_BUTTON_ID
+};
+//# sourceMappingURL=AttachmentsToolbarButton.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AttachmentsToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/AttachmentsToolbarButton/AttachmentsToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useMemoizedId } from '@frontify/fondue';\n\nimport { useAttachmentsContext } from '../../../../hooks';\nimport { Attachments } from '../../../Attachments';\nimport { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';\n\nimport { AttachmentsToolbarButtonTrigger } from './AttachmentsToolbarButtonTrigger';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\n\nexport const DEFAULT_ATTACHMENTS_BUTTON_ID = 'attachments';\n\ntype AttachmentsToolbarButtonProps = { flyoutId?: string };\n\nexport const AttachmentsToolbarButton = ({\n    flyoutId = DEFAULT_ATTACHMENTS_BUTTON_ID,\n}: AttachmentsToolbarButtonProps) => {\n    const id = useMemoizedId(flyoutId);\n\n    const { appBridge, attachments, onAttachmentsAdd, onAttachmentDelete, onAttachmentReplace, onAttachmentsSorted } =\n        useAttachmentsContext();\n\n    const { isOpen, onOpenChange } = useMultiFlyoutState(id);\n    const isDragPreview = useDragPreviewContext();\n\n    return (\n        <Attachments\n            onUpload={onAttachmentsAdd}\n            onDelete={onAttachmentDelete}\n            onReplaceWithBrowse={onAttachmentReplace}\n            onReplaceWithUpload={onAttachmentReplace}\n            onSorted={onAttachmentsSorted}\n            onBrowse={onAttachmentsAdd}\n            items={attachments}\n            appBridge={appBridge}\n            triggerComponent={AttachmentsToolbarButtonTrigger}\n            isOpen={isOpen && !isDragPreview}\n            onOpenChange={onOpenChange}\n        />\n    );\n};\n"],"names":["DEFAULT_ATTACHMENTS_BUTTON_ID","AttachmentsToolbarButton","flyoutId","id","useMemoizedId","appBridge","attachments","onAttachmentsAdd","onAttachmentDelete","onAttachmentReplace","onAttachmentsSorted","useAttachmentsContext","isOpen","onOpenChange","useMultiFlyoutState","isDragPreview","useDragPreviewContext","jsx","Attachments","AttachmentsToolbarButtonTrigger"],"mappings":";;;;;;;AAWO,MAAMA,IAAgC,eAIhCC,IAA2B,CAAC;AAAA,EACrC,UAAAC,IAAWF;AACf,MAAqC;AAC3B,QAAAG,IAAKC,EAAcF,CAAQ,GAE3B,EAAE,WAAAG,GAAW,aAAAC,GAAa,kBAAAC,GAAkB,oBAAAC,GAAoB,qBAAAC,GAAqB,qBAAAC,MACvFC,KAEE,EAAE,QAAAC,GAAQ,cAAAC,EAAa,IAAIC,EAAoBX,CAAE,GACjDY,IAAgBC;AAGlB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,UAAUX;AAAA,MACV,UAAUC;AAAA,MACV,qBAAqBC;AAAA,MACrB,qBAAqBA;AAAA,MACrB,UAAUC;AAAA,MACV,UAAUH;AAAA,MACV,OAAOD;AAAA,MACP,WAAAD;AAAA,MACA,kBAAkBc;AAAA,MAClB,QAAQP,KAAU,CAACG;AAAA,MACnB,cAAAF;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,26 @@
+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, {})
+    ]
+  }
+);
+export {
+  f as AttachmentsToolbarButtonTrigger
+};
+//# sourceMappingURL=AttachmentsToolbarButtonTrigger.es.js.map

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

@@ -0,0 +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 { type AttachmentsTriggerProps } from '../../../Attachments/types';\n\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;"}

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

@@ -0,0 +1,28 @@
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { getToolbarButtonClassNames as l } from "./helpers.es.js";
+const n = i(
+  ({
+    onClick: t,
+    children: o,
+    forceActiveStyle: a,
+    cursor: r = "pointer",
+    "data-test-id": s = "base-toolbar-button",
+    ...e
+  }, m) => /* @__PURE__ */ b(
+    "button",
+    {
+      onClick: t,
+      className: l(r, a),
+      "data-test-id": s,
+      ...e,
+      ref: m,
+      children: o
+    }
+  )
+);
+n.displayName = "BaseToolbarButton";
+export {
+  n as BaseToolbarButton
+};
+//# sourceMappingURL=BaseToolbarButton.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BaseToolbarButton.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/BaseToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type HTMLAttributes, type ReactNode, forwardRef } from 'react';\nimport { getToolbarButtonClassNames } from './helpers';\n\ntype BaseToolbarButtonProps = {\n    children: ReactNode;\n    forceActiveStyle?: boolean;\n    cursor?: 'pointer' | 'grab';\n    'data-test-id'?: string;\n} & HTMLAttributes<HTMLButtonElement>;\n\nexport const BaseToolbarButton = forwardRef<HTMLButtonElement, BaseToolbarButtonProps>(\n    (\n        {\n            onClick,\n            children,\n            forceActiveStyle,\n            cursor = 'pointer',\n            'data-test-id': dataTestId = 'base-toolbar-button',\n            ...props\n        },\n        ref,\n    ) => (\n        <button\n            onClick={onClick}\n            className={getToolbarButtonClassNames(cursor, forceActiveStyle)}\n            data-test-id={dataTestId}\n            {...props}\n            ref={ref}\n        >\n            {children}\n        </button>\n    ),\n);\n\nBaseToolbarButton.displayName = 'BaseToolbarButton';\n"],"names":["BaseToolbarButton","forwardRef","onClick","children","forceActiveStyle","cursor","dataTestId","props","ref","jsx","getToolbarButtonClassNames"],"mappings":";;;AAYO,MAAMA,IAAoBC;AAAA,EAC7B,CACI;AAAA,IACI,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,KAEPC,MAEA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,SAAAP;AAAA,MACA,WAAWQ,EAA2BL,GAAQD,CAAgB;AAAA,MAC9D,gBAAcE;AAAA,MACb,GAAGC;AAAA,MACJ,KAAAC;AAAA,MAEC,UAAAL;AAAA,IAAA;AAAA,EACL;AAER;AAEAH,EAAkB,cAAc;"}

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

@@ -0,0 +1,35 @@
+import { jsx as r } from "react/jsx-runtime";
+import { DEFAULT_DRAGGING_TOOLTIP as a, DEFAULT_DRAG_TOOLTIP as l } from "../../constants.es.js";
+import { useDragPreviewContext as m } from "../context/DragPreviewContext.es.js";
+import { BaseToolbarButton as c } from "../BaseToolbarButton.es.js";
+import { ToolbarButtonTooltip as p } from "../ToolbarButtonTooltip.es.js";
+const D = ({
+  tooltip: t,
+  icon: e,
+  setActivatorNodeRef: i,
+  draggableProps: n
+}) => {
+  const o = m();
+  return /* @__PURE__ */ r(
+    p,
+    {
+      open: o,
+      content: /* @__PURE__ */ r("div", { children: o ? a : t ?? l }),
+      children: /* @__PURE__ */ r(
+        c,
+        {
+          ref: i,
+          "data-test-id": "block-item-wrapper-toolbar-btn",
+          forceActiveStyle: o,
+          cursor: "grab",
+          ...n,
+          children: e
+        }
+      )
+    }
+  );
+};
+export {
+  D as DragHandleToolbarButton
+};
+//# sourceMappingURL=DragHandleToolbarButton.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandleToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/DragHandleToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from '../../constants';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\nimport { BaseToolbarButton } from '../BaseToolbarButton';\nimport { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';\n\nexport type DragHandleToolbarButtonProps = {\n    icon: JSX.Element;\n    tooltip?: string;\n    draggableProps: Record<string, unknown>;\n    setActivatorNodeRef?: (node: HTMLElement | null) => void;\n};\n\nexport const DragHandleToolbarButton = ({\n    tooltip,\n    icon,\n    setActivatorNodeRef,\n    draggableProps,\n}: DragHandleToolbarButtonProps) => {\n    const isDragPreview = useDragPreviewContext();\n\n    return (\n        <ToolbarButtonTooltip\n            open={isDragPreview}\n            content={<div>{isDragPreview ? DEFAULT_DRAGGING_TOOLTIP : tooltip ?? DEFAULT_DRAG_TOOLTIP}</div>}\n        >\n            <BaseToolbarButton\n                ref={setActivatorNodeRef}\n                data-test-id=\"block-item-wrapper-toolbar-btn\"\n                forceActiveStyle={isDragPreview}\n                cursor=\"grab\"\n                {...draggableProps}\n            >\n                {icon}\n            </BaseToolbarButton>\n        </ToolbarButtonTooltip>\n    );\n};\n"],"names":["DragHandleToolbarButton","tooltip","icon","setActivatorNodeRef","draggableProps","isDragPreview","useDragPreviewContext","jsx","ToolbarButtonTooltip","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","BaseToolbarButton"],"mappings":";;;;;AAcO,MAAMA,IAA0B,CAAC;AAAA,EACpC,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,gBAAAC;AACJ,MAAoC;AAChC,QAAMC,IAAgBC;AAGlB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAMH;AAAA,MACN,SAAU,gBAAAE,EAAA,OAAA,EAAK,UAAgBF,IAAAI,IAA2BR,KAAWS,GAAqB;AAAA,MAE1F,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,KAAKR;AAAA,UACL,gBAAa;AAAA,UACb,kBAAkBE;AAAA,UAClB,QAAO;AAAA,UACN,GAAGD;AAAA,UAEH,UAAAF;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAGZ;"}

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

@@ -0,0 +1,44 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useDragPreviewContext as u } from "../context/DragPreviewContext.es.js";
+import { ToolbarButtonTooltip as p } from "../ToolbarButtonTooltip.es.js";
+import { useMemoizedId as h, Flyout as g, FlyoutPlacement as w } from "@frontify/fondue";
+import { BaseToolbarButton as x } from "../BaseToolbarButton.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
+}) => {
+  const m = h(n), { isOpen: e, onOpenChange: f } = y(m), o = u();
+  return /* @__PURE__ */ t(p, { 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(
+    g,
+    {
+      isOpen: e && !o,
+      legacyFooter: !1,
+      fixedFooter: a,
+      fixedHeader: s,
+      fitContent: !0,
+      hug: !1,
+      placement: w.BottomRight,
+      onOpenChange: f,
+      trigger: (c, d) => /* @__PURE__ */ t(
+        x,
+        {
+          "data-test-id": "block-item-wrapper-toolbar-flyout",
+          forceActiveStyle: e && !o,
+          ...c,
+          ref: d,
+          children: i
+        }
+      ),
+      children: r
+    }
+  ) }) });
+};
+export {
+  O as FlyoutToolbarButton
+};
+//# sourceMappingURL=FlyoutToolbarButton.es.js.map

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

@@ -0,0 +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 { type MutableRefObject, type ReactNode } from 'react';\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\nimport { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';\nimport { Flyout, FlyoutPlacement, useMemoizedId } from '@frontify/fondue';\nimport { BaseToolbarButton } from '../BaseToolbarButton';\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":";;;;;;AAkBO,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;"}

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

@@ -0,0 +1,25 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useMemoizedId as m, IconDotsHorizontal16 as e } from "@frontify/fondue";
+import { ToolbarFlyoutMenu as i } from "./ToolbarFlyoutMenu.es.js";
+import { FlyoutToolbarButton as l } from "../FlyoutToolbarButton/FlyoutToolbarButton.es.js";
+const s = "menu", d = ({
+  items: n,
+  flyoutId: r = s,
+  tooltip: u = "Options"
+}) => {
+  const t = m(r);
+  return /* @__PURE__ */ o(
+    l,
+    {
+      icon: /* @__PURE__ */ o(e, {}),
+      tooltip: u,
+      flyoutId: t,
+      content: /* @__PURE__ */ o(i, { items: n, flyoutId: t })
+    }
+  );
+};
+export {
+  s as DEFAULT_MENU_BUTTON_ID,
+  d as MenuToolbarButton
+};
+//# sourceMappingURL=MenuToolbarButton.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/MenuToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconDotsHorizontal16, useMemoizedId } from '@frontify/fondue';\nimport { ToolbarFlyoutMenu, ToolbarFlyoutMenuItem } from './ToolbarFlyoutMenu';\nimport { FlyoutToolbarButton } from '../FlyoutToolbarButton/FlyoutToolbarButton';\n\nexport const DEFAULT_MENU_BUTTON_ID = 'menu';\n\nexport type MenuToolbarButtonProps = {\n    items: ToolbarFlyoutMenuItem[][];\n    flyoutId?: string;\n    tooltip?: string;\n};\n\nexport const MenuToolbarButton = ({\n    items,\n    flyoutId = DEFAULT_MENU_BUTTON_ID,\n    tooltip = 'Options',\n}: MenuToolbarButtonProps) => {\n    const id = useMemoizedId(flyoutId);\n\n    return (\n        <FlyoutToolbarButton\n            icon={<IconDotsHorizontal16 />}\n            tooltip={tooltip}\n            flyoutId={id}\n            content={<ToolbarFlyoutMenu items={items} flyoutId={id} />}\n        />\n    );\n};\n"],"names":["DEFAULT_MENU_BUTTON_ID","MenuToolbarButton","items","flyoutId","tooltip","id","useMemoizedId","jsx","FlyoutToolbarButton","IconDotsHorizontal16","ToolbarFlyoutMenu"],"mappings":";;;;AAMO,MAAMA,IAAyB,QAQzBC,IAAoB,CAAC;AAAA,EAC9B,OAAAC;AAAA,EACA,UAAAC,IAAWH;AAAA,EACX,SAAAI,IAAU;AACd,MAA8B;AACpB,QAAAC,IAAKC,EAAcH,CAAQ;AAG7B,SAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,wBAAOC,GAAqB,EAAA;AAAA,MAC5B,SAAAL;AAAA,MACA,UAAUC;AAAA,MACV,SAAS,gBAAAE,EAACG,GAAkB,EAAA,OAAAR,GAAc,UAAUG,GAAI;AAAA,IAAA;AAAA,EAAA;AAGpE;"}

package/dist/components/BlockItemWrapper/Toolbar/MenuToolbarButton/ToolbarFlyoutMenu.es.js

@@ -0,0 +1,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ActionMenu as m, MenuItemContentSize as s } from "@frontify/fondue";
+import { useMultiFlyoutState as u } from "../hooks/useMultiFlyoutState.es.js";
+const d = ({ items: n, flyoutId: i }) => {
+  const { onOpenChange: r } = u(i);
+  return /* @__PURE__ */ e(
+    m,
+    {
+      menuBlocks: n.map((l, o) => ({
+        id: o.toString(),
+        menuItems: l.map((t, a) => ({
+          id: o.toString() + a.toString(),
+          size: s.XSmall,
+          title: t.title,
+          style: t.style,
+          onClick: () => {
+            r(!1), t.onClick();
+          },
+          initialValue: !0,
+          decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: t.icon })
+        }))
+      }))
+    }
+  );
+};
+export {
+  d as ToolbarFlyoutMenu
+};
+//# sourceMappingURL=ToolbarFlyoutMenu.es.js.map

package/dist/components/BlockItemWrapper/Toolbar/MenuToolbarButton/ToolbarFlyoutMenu.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarFlyoutMenu.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/MenuToolbarButton/ToolbarFlyoutMenu.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ActionMenu, MenuItemContentSize, MenuItemStyle } from '@frontify/fondue';\nimport { useMultiFlyoutState } from '../hooks/useMultiFlyoutState';\n\nexport type ToolbarFlyoutMenuItem = {\n    title: string;\n    onClick: () => void;\n    icon: JSX.Element;\n    style?: MenuItemStyle;\n};\n\nexport type ToolbarFlyoutMenuProps = {\n    items: ToolbarFlyoutMenuItem[][];\n    flyoutId: string;\n};\n\nexport const ToolbarFlyoutMenu = ({ items, flyoutId }: ToolbarFlyoutMenuProps) => {\n    const { onOpenChange } = useMultiFlyoutState(flyoutId);\n\n    return (\n        <ActionMenu\n            menuBlocks={items.map((block, blockIndex) => ({\n                id: blockIndex.toString(),\n                menuItems: block.map((item, itemIndex) => ({\n                    id: blockIndex.toString() + itemIndex.toString(),\n                    size: MenuItemContentSize.XSmall,\n                    title: item.title,\n                    style: item.style,\n                    onClick: () => {\n                        onOpenChange(false);\n                        item.onClick();\n                    },\n                    initialValue: true,\n                    decorator: <div className=\"tw-mr-2\">{item.icon}</div>,\n                })),\n            }))}\n        />\n    );\n};\n"],"names":["ToolbarFlyoutMenu","items","flyoutId","onOpenChange","useMultiFlyoutState","jsx","ActionMenu","block","blockIndex","item","itemIndex","MenuItemContentSize"],"mappings":";;;AAiBO,MAAMA,IAAoB,CAAC,EAAE,OAAAC,GAAO,UAAAC,QAAuC;AAC9E,QAAM,EAAE,cAAAC,EAAA,IAAiBC,EAAoBF,CAAQ;AAGjD,SAAA,gBAAAG;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,YAAYL,EAAM,IAAI,CAACM,GAAOC,OAAgB;AAAA,QAC1C,IAAIA,EAAW,SAAS;AAAA,QACxB,WAAWD,EAAM,IAAI,CAACE,GAAMC,OAAe;AAAA,UACvC,IAAIF,EAAW,aAAaE,EAAU,SAAS;AAAA,UAC/C,MAAMC,EAAoB;AAAA,UAC1B,OAAOF,EAAK;AAAA,UACZ,OAAOA,EAAK;AAAA,UACZ,SAAS,MAAM;AACX,YAAAN,EAAa,EAAK,GAClBM,EAAK,QAAQ;AAAA,UACjB;AAAA,UACA,cAAc;AAAA,UACd,WAAY,gBAAAJ,EAAA,OAAA,EAAI,WAAU,WAAW,YAAK,MAAK;AAAA,QAAA,EACjD;AAAA,MAAA,EACJ;AAAA,IAAA;AAAA,EAAA;AAGd;"}

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

@@ -1,123 +1,26 @@
-import { jsxs as p, jsx as e } from "react/jsx-runtime";
-import { LegacyTooltip as a, TooltipPosition as s, Flyout as h, IconDotsHorizontal16 as b, ActionMenu as O, MenuItemContentSize as T } from "@frontify/fondue";
-import { DEFAULT_DRAGGING_TOOLTIP as v, DEFAULT_DRAG_TOOLTIP as f } from "../constants.es.js";
-import { ToolbarSegment as c } from "./ToolbarSegment.es.js";
-import { ToolbarAttachments as C } from "./ToolbarAttachments.es.js";
-import { getToolbarButtonClassNames as d } from "./helpers.es.js";
-const y = ({ items: m, flyoutMenu: r, attachments: l, isDragging: o }) => /* @__PURE__ */ p(
+import { jsxs as a, jsx as o } from "react/jsx-runtime";
+import { ToolbarSegment as n } from "./ToolbarSegment.es.js";
+import { AttachmentsToolbarButton as d } from "./AttachmentsToolbarButton/AttachmentsToolbarButton.es.js";
+import { DragHandleToolbarButton as m } from "./DragHandleToolbarButton/DragHandleToolbarButton.es.js";
+import { ToolbarButton as s } from "./ToolbarButton/ToolbarButton.es.js";
+import { MenuToolbarButton as b } from "./MenuToolbarButton/MenuToolbarButton.es.js";
+const x = ({ items: l, flyoutMenu: r, attachments: i }) => /* @__PURE__ */ a(
   "div",
   {
     "data-test-id": "block-item-wrapper-toolbar",
     className: "tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate",
     children: [
-      l.isEnabled && /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
-        C,
-        {
-          isOpen: l.isOpen && !o,
-          onOpenChange: l.onOpenChange
-        }
-      ) }),
-      /* @__PURE__ */ p(c, { children: [
-        m.map(
-          (t, n) => "draggableProps" in t ? /* @__PURE__ */ e(
-            a,
-            {
-              withArrow: !0,
-              hoverDelay: 0,
-              enterDelay: 300,
-              open: o,
-              position: s.Top,
-              content: /* @__PURE__ */ e("div", { children: o ? v : t.tooltip ?? f }),
-              triggerElement: /* @__PURE__ */ e(
-                "button",
-                {
-                  ref: t.setActivatorNodeRef,
-                  "data-test-id": "block-item-wrapper-toolbar-btn",
-                  ...t.draggableProps,
-                  className: d("grab", o),
-                  children: t.icon
-                }
-              )
-            },
-            n
-          ) : /* @__PURE__ */ e(
-            a,
-            {
-              withArrow: !0,
-              enterDelay: 300,
-              hoverDelay: 0,
-              disabled: o,
-              position: s.Top,
-              content: /* @__PURE__ */ e("div", { children: t.tooltip ?? "" }),
-              triggerElement: /* @__PURE__ */ e(
-                "button",
-                {
-                  "data-test-id": "block-item-wrapper-toolbar-btn",
-                  onClick: t.onClick,
-                  className: d("pointer"),
-                  children: t.icon
-                }
-              )
-            },
-            n
-          )
+      i.isEnabled && /* @__PURE__ */ o(n, { children: /* @__PURE__ */ o(d, {}) }),
+      /* @__PURE__ */ a(n, { children: [
+        l.map(
+          (t, e) => "draggableProps" in t ? /* @__PURE__ */ o(m, { ...t }, e) : /* @__PURE__ */ o(s, { ...t }, e)
         ),
-        r.items.length > 0 && /* @__PURE__ */ e(
-          a,
-          {
-            withArrow: !0,
-            hoverDelay: 0,
-            enterDelay: 300,
-            disabled: o || r.isOpen,
-            position: s.Top,
-            content: /* @__PURE__ */ e("div", { children: "Options" }),
-            triggerElement: /* @__PURE__ */ e("div", { className: "tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative", children: /* @__PURE__ */ e(
-              h,
-              {
-                isOpen: r.isOpen && !o,
-                legacyFooter: !1,
-                fitContent: !0,
-                hug: !1,
-                onOpenChange: r.onOpenChange,
-                trigger: /* @__PURE__ */ e(
-                  "div",
-                  {
-                    "data-test-id": "block-item-wrapper-toolbar-flyout",
-                    className: d(
-                      "pointer",
-                      r.isOpen && !o
-                    ),
-                    children: /* @__PURE__ */ e(b, {})
-                  }
-                ),
-                children: /* @__PURE__ */ e(
-                  O,
-                  {
-                    menuBlocks: r.items.map((t, n) => ({
-                      id: n.toString(),
-                      menuItems: t.map((i, w) => ({
-                        id: n.toString() + w.toString(),
-                        size: T.XSmall,
-                        title: i.title,
-                        style: i.style,
-                        onClick: () => {
-                          r.onOpenChange(!1), i.onClick();
-                        },
-                        initialValue: !0,
-                        decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: i.icon })
-                      }))
-                    }))
-                  }
-                )
-              }
-            ) })
-          }
-        )
+        r.items.length > 0 && /* @__PURE__ */ o(b, { ...r })
       ] })
     ]
   }
 );
 export {
-  y as Toolbar
+  x as Toolbar
 };
 //# sourceMappingURL=Toolbar.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    ActionMenu,\n    Flyout,\n    IconDotsHorizontal16,\n    MenuItemContentSize,\n    LegacyTooltip as Tooltip,\n    TooltipPosition,\n} from '@frontify/fondue';\n\nimport { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from '../constants';\n\nimport { ToolbarSegment } from './ToolbarSegment';\nimport { ToolbarAttachments } from './ToolbarAttachments';\nimport { getToolbarButtonClassNames } from './helpers';\nimport { type ToolbarProps } from './types';\n\nexport const Toolbar = ({ items, flyoutMenu, attachments, isDragging }: ToolbarProps) => {\n    return (\n        <div\n            data-test-id=\"block-item-wrapper-toolbar\"\n            className=\"tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate\"\n        >\n            {attachments.isEnabled && (\n                <ToolbarSegment>\n                    <ToolbarAttachments\n                        isOpen={attachments.isOpen && !isDragging}\n                        onOpenChange={attachments.onOpenChange}\n                    />\n                </ToolbarSegment>\n            )}\n            <ToolbarSegment>\n                {items.map((item, i) =>\n                    'draggableProps' in item ? (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            hoverDelay={0}\n                            enterDelay={300}\n                            open={isDragging}\n                            position={TooltipPosition.Top}\n                            content={\n                                <div>\n                                    {isDragging ? DEFAULT_DRAGGING_TOOLTIP : item.tooltip ?? DEFAULT_DRAG_TOOLTIP}\n                                </div>\n                            }\n                            triggerElement={\n                                <button\n                                    ref={item.setActivatorNodeRef}\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    {...item.draggableProps}\n                                    className={getToolbarButtonClassNames('grab', isDragging)}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ) : (\n                        <Tooltip\n                            key={i}\n                            withArrow\n                            enterDelay={300}\n                            hoverDelay={0}\n                            disabled={isDragging}\n                            position={TooltipPosition.Top}\n                            content={<div>{item.tooltip ?? ''}</div>}\n                            triggerElement={\n                                <button\n                                    data-test-id=\"block-item-wrapper-toolbar-btn\"\n                                    onClick={item.onClick}\n                                    className={getToolbarButtonClassNames('pointer')}\n                                >\n                                    {item.icon}\n                                </button>\n                            }\n                        />\n                    ),\n                )}\n                {flyoutMenu.items.length > 0 && (\n                    <Tooltip\n                        withArrow\n                        hoverDelay={0}\n                        enterDelay={300}\n                        disabled={isDragging || flyoutMenu.isOpen}\n                        position={TooltipPosition.Top}\n                        content={<div>Options</div>}\n                        triggerElement={\n                            <div className=\"tw-flex tw-flex-shrink-0 tw-flex-1 tw-h-6 tw-relative\">\n                                <Flyout\n                                    isOpen={flyoutMenu.isOpen && !isDragging}\n                                    legacyFooter={false}\n                                    fitContent\n                                    hug={false}\n                                    onOpenChange={flyoutMenu.onOpenChange}\n                                    trigger={\n                                        <div\n                                            data-test-id=\"block-item-wrapper-toolbar-flyout\"\n                                            className={getToolbarButtonClassNames(\n                                                'pointer',\n                                                flyoutMenu.isOpen && !isDragging,\n                                            )}\n                                        >\n                                            <IconDotsHorizontal16 />\n                                        </div>\n                                    }\n                                >\n                                    <ActionMenu\n                                        menuBlocks={flyoutMenu.items.map((block, blockIndex) => ({\n                                            id: blockIndex.toString(),\n                                            menuItems: block.map((item, itemIndex) => ({\n                                                id: blockIndex.toString() + itemIndex.toString(),\n                                                size: MenuItemContentSize.XSmall,\n                                                title: item.title,\n                                                style: item.style,\n                                                onClick: () => {\n                                                    flyoutMenu.onOpenChange(false);\n                                                    item.onClick();\n                                                },\n                                                initialValue: true,\n                                                decorator: <div className=\"tw-mr-2\">{item.icon}</div>,\n                                            })),\n                                        }))}\n                                    />\n                                </Flyout>\n                            </div>\n                        }\n                    />\n                )}\n            </ToolbarSegment>\n        </div>\n    );\n};\n"],"names":["Toolbar","items","flyoutMenu","attachments","isDragging","jsxs","ToolbarSegment","jsx","ToolbarAttachments","item","i","Tooltip","TooltipPosition","DEFAULT_DRAGGING_TOOLTIP","DEFAULT_DRAG_TOOLTIP","getToolbarButtonClassNames","Flyout","IconDotsHorizontal16","ActionMenu","block","blockIndex","itemIndex","MenuItemContentSize"],"mappings":"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"}
+{"version":3,"file":"Toolbar.es.js","sources":["../../../../src/components/BlockItemWrapper/Toolbar/Toolbar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ToolbarSegment } from './ToolbarSegment';\nimport { AttachmentsToolbarButton } from './AttachmentsToolbarButton';\nimport { type ToolbarProps } from './types';\nimport { ToolbarButton } from './ToolbarButton';\nimport { DragHandleToolbarButton } from './DragHandleToolbarButton';\nimport { MenuToolbarButton } from './MenuToolbarButton';\n\nexport const Toolbar = ({ items, flyoutMenu, attachments }: ToolbarProps) => (\n    <div\n        data-test-id=\"block-item-wrapper-toolbar\"\n        className=\"tw-rounded-md tw-bg-base tw-border tw-border-line-strong tw-divide-x tw-divide-line-strong tw-shadow-lg tw-flex tw-flex-none tw-items-center tw-isolate\"\n    >\n        {attachments.isEnabled && (\n            <ToolbarSegment>\n                <AttachmentsToolbarButton />\n            </ToolbarSegment>\n        )}\n        <ToolbarSegment>\n            {items.map((item, i) =>\n                'draggableProps' in item ? (\n                    <DragHandleToolbarButton key={i} {...item} />\n                ) : (\n                    <ToolbarButton key={i} {...item} />\n                ),\n            )}\n            {flyoutMenu.items.length > 0 && <MenuToolbarButton {...flyoutMenu} />}\n        </ToolbarSegment>\n    </div>\n);\n"],"names":["Toolbar","items","flyoutMenu","attachments","jsxs","jsx","ToolbarSegment","AttachmentsToolbarButton","item","i","DragHandleToolbarButton","ToolbarButton","MenuToolbarButton"],"mappings":";;;;;;AASO,MAAMA,IAAU,CAAC,EAAE,OAAAC,GAAO,YAAAC,GAAY,aAAAC,EACzC,MAAA,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAU;AAAA,IAET,UAAA;AAAA,MAAAD,EAAY,aACT,gBAAAE,EAACC,GACG,EAAA,UAAA,gBAAAD,EAACE,IAAyB,CAAA,GAC9B;AAAA,wBAEHD,GACI,EAAA,UAAA;AAAA,QAAML,EAAA;AAAA,UAAI,CAACO,GAAMC,MACd,oBAAoBD,IACf,gBAAAH,EAAAK,GAAA,EAAiC,GAAGF,EAAA,GAAPC,CAAa,IAE3C,gBAAAJ,EAACM,GAAuB,EAAA,GAAGH,KAAPC,CAAa;AAAA,QAEzC;AAAA,QACCP,EAAW,MAAM,SAAS,KAAM,gBAAAG,EAAAO,GAAA,EAAmB,GAAGV,GAAY;AAAA,MAAA,GACvE;AAAA,IAAA;AAAA,EAAA;AACJ;"}

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

@@ -0,0 +1,12 @@
+import { jsx as o } from "react/jsx-runtime";
+import { useDragPreviewContext as n } from "../context/DragPreviewContext.es.js";
+import { BaseToolbarButton as a } from "../BaseToolbarButton.es.js";
+import { ToolbarButtonTooltip as l } from "../ToolbarButtonTooltip.es.js";
+const c = ({ tooltip: t, icon: r, onClick: e }) => {
+  const i = n();
+  return /* @__PURE__ */ o(l, { disabled: i, content: t ?? "", children: /* @__PURE__ */ o(a, { "data-test-id": "block-item-wrapper-toolbar-btn", onClick: e, children: r }) });
+};
+export {
+  c as ToolbarButton
+};
+//# sourceMappingURL=ToolbarButton.es.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.es.js","sources":["../../../../../src/components/BlockItemWrapper/Toolbar/ToolbarButton/ToolbarButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useDragPreviewContext } from '../context/DragPreviewContext';\nimport { BaseToolbarButton } from '../BaseToolbarButton';\nimport { ToolbarButtonTooltip } from '../ToolbarButtonTooltip';\n\nexport type ToolbarButtonProps = { icon: JSX.Element; tooltip?: string; onClick: () => void };\n\nexport const ToolbarButton = ({ tooltip, icon, onClick }: ToolbarButtonProps) => {\n    const isDragPreview = useDragPreviewContext();\n\n    return (\n        <ToolbarButtonTooltip disabled={isDragPreview} content={tooltip ?? ''}>\n            <BaseToolbarButton data-test-id=\"block-item-wrapper-toolbar-btn\" onClick={onClick}>\n                {icon}\n            </BaseToolbarButton>\n        </ToolbarButtonTooltip>\n    );\n};\n"],"names":["ToolbarButton","tooltip","icon","onClick","isDragPreview","useDragPreviewContext","jsx","ToolbarButtonTooltip","BaseToolbarButton"],"mappings":";;;;AAQO,MAAMA,IAAgB,CAAC,EAAE,SAAAC,GAAS,MAAAC,GAAM,SAAAC,QAAkC;AAC7E,QAAMC,IAAgBC;AAEtB,SACK,gBAAAC,EAAAC,GAAA,EAAqB,UAAUH,GAAe,SAASH,KAAW,IAC/D,UAAA,gBAAAK,EAACE,GAAkB,EAAA,gBAAa,kCAAiC,SAAAL,GAC5D,aACL,EACJ,CAAA;AAER;"}