@frontify/guideline-blocks-settings 0.34.12 → 0.34.14

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

@@ -1,71 +1,74 @@
-import { jsx as t, Fragment as y, jsxs as h } from "react/jsx-runtime";
-import { useState as x, useRef as g } from "react";
+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 { MultiFlyoutContextProvider as F } from "./Toolbar/context/MultiFlyoutContext.es.js";
-import { DEFAULT_MENU_BUTTON_ID as N } from "./Toolbar/MenuToolbarButton/MenuToolbarButton.es.js";
-import { Toolbar as T } from "./Toolbar/Toolbar.es.js";
-import { joinClassNames as w } from "../../utilities/react/joinClassNames.es.js";
-const k = ({
-  children: i,
-  toolbarItems: e,
-  shouldHideWrapper: a,
-  shouldHideComponent: n = !1,
-  isDragging: p = !1,
-  shouldFillContainer: c,
-  outlineOffset: o = 2,
-  shouldBeShown: r = !1,
-  showAttachments: u = !1
-}) => {
-  const [l, f] = x(r ? [N] : []), m = g(null);
-  if (a)
-    return /* @__PURE__ */ t(y, { children: i });
-  const d = e == null ? void 0 : e.filter((v) => v !== void 0), s = l.length > 0 || r;
-  return /* @__PURE__ */ t(b, { isDragPreview: p, children: /* @__PURE__ */ t(F, { openFlyoutIds: l, setOpenFlyoutIds: f, children: /* @__PURE__ */ h(
-    "div",
-    {
-      ref: m,
-      "data-test-id": "block-item-wrapper",
-      style: {
-        outlineOffset: o
-      },
-      className: w([
-        "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",
-        n && "tw-opacity-0"
-      ]),
-      children: [
-        /* @__PURE__ */ t(
-          "div",
-          {
-            style: {
-              right: -1 - o,
-              bottom: `calc(100% - ${2 + o}px)`
-            },
-            className: w([
-              "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"
-            ]),
-            children: /* @__PURE__ */ t(
-              T,
-              {
-                attachments: {
-                  isEnabled: u
-                },
-                items: d
-              }
-            )
-          }
-        ),
-        i
-      ]
-    }
-  ) }) });
-};
+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(
+  ({
+    children: r,
+    toolbarItems: e,
+    shouldHideWrapper: p,
+    shouldHideComponent: w = !1,
+    isDragging: n = !1,
+    shouldFillContainer: c,
+    outlineOffset: o = 2,
+    shouldBeShown: i = !1,
+    showAttachments: m = !1
+  }) => {
+    const [l, u] = g(i ? [T] : []), f = N(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(
+      "div",
+      {
+        ref: f,
+        "data-test-id": "block-item-wrapper",
+        style: {
+          outlineOffset: o
+        },
+        className: a([
+          "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",
+          w && "tw-opacity-0"
+        ]),
+        children: [
+          /* @__PURE__ */ t(
+            "div",
+            {
+              style: {
+                right: -1 - o,
+                bottom: `calc(100% - ${2 + o}px)`
+              },
+              className: a([
+                "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"
+              ]),
+              children: /* @__PURE__ */ t(
+                j,
+                {
+                  attachments: {
+                    isEnabled: m
+                  },
+                  items: d
+                }
+              )
+            }
+          ),
+          r
+        ]
+      }
+    ) }) });
+  }
+);
+D.displayName = "BlockItemWrapper";
 export {
-  k as BlockItemWrapper
+  D 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 { 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 = ({\n    children,\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                            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","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,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,UAAAF,EAAS,CAAA;AAGvB,QAAMe,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,aAAa;AAAA,kBACT,WAAWf;AAAA,gBACf;AAAA,gBACA,OAAAO;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCf;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAET,CAAA,EACJ,CAAA;AAER;"}
+{"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 = 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                                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;AACjC,UAAA,CAACC,GAAeC,CAAgB,IAAIC,EAAmBJ,IAAgB,CAACK,CAAsB,IAAI,CAAA,CAAE,GACpGC,IAAaC,EAAuB,IAAI;AAE9C,QAAIZ;AAEA,oCAAU,UAAAF,EAAS,CAAA;AAGvB,UAAMe,IAAQd,KAAA,gBAAAA,EAAc,OAAO,CAACe,MAA8BA,MAAS,SAErEC,IAAyBR,EAAc,SAAS,KAAKF;AAE3D,6BACKW,GAA2B,EAAA,eAAed,GACvC,UAAC,gBAAAe,EAAAC,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,QACJ;AAAA,QACA,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,cAC5C;AAAA,cACA,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,kBACf;AAAA,kBACA,OAAAO;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACJ;AAAA,UACCf;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EAET,CAAA,EACJ,CAAA;AAAA,EAER;AACJ;AAEAF,EAAiB,cAAc;"}