npm - @frontify/guideline-blocks-settings - Versions diffs - 0.28.2 → 0.28.3 - Mend

@frontify/guideline-blocks-settings 0.28.2 → 0.28.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Attachments.es.js","sources":["../../../src/components/Attachments/Attachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport {\n DndContext,\n DragEndEvent,\n DragOverlay,\n DragStartEvent,\n KeyboardSensor,\n PointerSensor,\n closestCenter,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { Asset, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport {\n AssetInput,\n AssetInputSize,\n Flyout,\n FlyoutPlacement,\n IconCaretDown12,\n IconPaperclip16,\n Tooltip,\n TooltipPosition,\n} from '@frontify/fondue';\nimport { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';\nimport { AttachmentsProps } from './types';\nimport { restrictToWindowEdges } from '@dnd-kit/modifiers';\n\nexport const Attachments = ({\n items = [],\n onDelete,\n onReplaceWithBrowse,\n onReplaceWithUpload,\n onBrowse,\n onUpload,\n onSorted,\n appBridge,\n}: AttachmentsProps) => {\n const [internalItems, setInternalItems] = useState<Asset[]>(items);\n const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);\n const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));\n const [draggedAssetId, setDraggedAssetId] = useState<number \| undefined>(undefined);\n const [isUploadLoading, setIsUploadLoading] = useState(false);\n const [assetIdsLoading, setAssetIdsLoading] = useState<number[]>([]);\n const [selectedFiles, setSelectedFiles] = useState<FileList \| null>(null);\n const isEditing = useEditorState(appBridge);\n\n const draggedItem = internalItems?.find((item) => item.id === draggedAssetId);\n\n const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({\n onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),\n });\n\n useEffect(() => {\n setInternalItems(items);\n }, [items]);\n\n useEffect(() => {\n if (selectedFiles) {\n setIsUploadLoading(true);\n uploadFile(selectedFiles);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedFiles]);\n\n useEffect(() => {\n const uploadDone = async () => {\n if (doneAll) {\n await onUpload(uploadResults);\n setIsUploadLoading(false);\n }\n };\n uploadDone();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [doneAll, uploadResults]);\n\n const onOpenAssetChooser = () => {\n setIsFlyoutOpen(false);\n appBridge.openAssetChooser(\n (result: Asset[]) => {\n onBrowse(result);\n appBridge.closeAssetChooser();\n setIsFlyoutOpen(true);\n },\n {\n multiSelection: true,\n selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n },\n );\n };\n\n const onReplaceItemWithBrowse = (toReplace: Asset) => {\n setIsFlyoutOpen(false);\n appBridge.openAssetChooser(\n async (result: Asset[]) => {\n setIsFlyoutOpen(true);\n appBridge.closeAssetChooser();\n setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n await onReplaceWithBrowse(toReplace, result[0]);\n setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n },\n {\n multiSelection: false,\n selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n },\n );\n };\n\n const onReplaceItemWithUpload = async (toReplace: Asset, uploadedAsset: Asset) => {\n setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n await onReplaceWithUpload(toReplace, uploadedAsset);\n setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n };\n\n const handleDragStart = (event: DragStartEvent) => {\n const { active } = event;\n setDraggedAssetId(active.id as number);\n };\n\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n if (over && active.id !== over.id && internalItems) {\n const oldIndex = internalItems.findIndex((i) => i.id === active.id);\n const newIndex = internalItems.findIndex((i) => i.id === over.id);\n const sortedItems = arrayMove(internalItems, oldIndex, newIndex);\n setInternalItems(sortedItems);\n onSorted(sortedItems);\n }\n setDraggedAssetId(undefined);\n };\n\n return isEditing \|\| (internalItems?.length ?? 0) > 0 ? (\n <Tooltip\n withArrow\n position={TooltipPosition.Top}\n content=\"Attachments\"\n disabled={isFlyoutOpen}\n enterDelay={500}\n triggerElement={\n <div data-test-id=\"attachments-flyout-button\">\n <Flyout\n placement={FlyoutPlacement.BottomRight}\n onOpenChange={(isOpen) => setIsFlyoutOpen(!!draggedItem ? true : isOpen)}\n isOpen={isFlyoutOpen}\n hug={false}\n fitContent\n legacyFooter={false}\n trigger={\n <div className=\"tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-[1px] tw-p-[6px] tw-outline-line\">\n <IconPaperclip16 />\n <div>{items.length > 0 ? items.length : 'Add'}</div>\n <IconCaretDown12 />\n </div>\n }\n >\n <div className=\"tw-w-[300px]\">\n {internalItems.length > 0 && (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n modifiers={[restrictToWindowEdges]}\n >\n <SortableContext items={internalItems} strategy={rectSortingStrategy}>\n <div className=\"tw-border-b tw-border-b-line\">\n {internalItems.map((item) => (\n <SortableAttachmentItem\n isEditing={isEditing}\n isLoading={assetIdsLoading.includes(item.id)}\n key={item.id}\n item={item}\n onDelete={() => onDelete(item)}\n onReplaceWithBrowse={() => onReplaceItemWithBrowse(item)}\n onReplaceWithUpload={(uploadedAsset: Asset) =>\n onReplaceItemWithUpload(item, uploadedAsset)\n }\n />\n ))}\n </div>\n </SortableContext>\n <DragOverlay>\n {draggedItem && (\n <AttachmentItem\n isOverlay={true}\n isEditing={isEditing}\n key={draggedAssetId}\n item={draggedItem}\n isDragging={true}\n onDelete={() => onDelete(draggedItem)}\n onReplaceWithBrowse={() => onReplaceItemWithBrowse(draggedItem)}\n onReplaceWithUpload={(uploadedAsset: Asset) =>\n onReplaceItemWithUpload(draggedItem, uploadedAsset)\n }\n />\n )}\n </DragOverlay>\n </DndContext>\n )}\n {isEditing && (\n <div className=\"tw-px-5 tw-py-3\">\n <div className=\"tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4\">\n Add attachments\n </div>\n <AssetInput\n isLoading={isUploadLoading}\n size={AssetInputSize.Small}\n onUploadClick={(fileList) => setSelectedFiles(fileList)}\n onLibraryClick={onOpenAssetChooser}\n />\n </div>\n )}\n </div>\n </Flyout>\n </div>\n }\n />\n ) : null;\n};\n"],"names":["Attachments","items","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onBrowse","onUpload","onSorted","appBridge","internalItems","setInternalItems","useState","isFlyoutOpen","setIsFlyoutOpen","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","jsx","Tooltip","TooltipPosition","Flyout","FlyoutPlacement","isOpen","jsxs","IconPaperclip16","IconCaretDown12","DndContext","closestCenter","restrictToWindowEdges","SortableContext","rectSortingStrategy","SortableAttachmentItem","DragOverlay","AttachmentItem","AssetInput","AssetInputSize","fileList"],"mappings":"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"}
1	+ {"version":3,"file":"Attachments.es.js","sources":["../../../src/components/Attachments/Attachments.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useEffect, useState } from 'react';\nimport {\n DndContext,\n DragEndEvent,\n DragOverlay,\n DragStartEvent,\n KeyboardSensor,\n PointerSensor,\n closestCenter,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { Asset, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport {\n AssetInput,\n AssetInputSize,\n Flyout,\n FlyoutPlacement,\n IconCaretDown12,\n IconPaperclip16,\n Tooltip,\n TooltipPosition,\n} from '@frontify/fondue';\nimport { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';\nimport { AttachmentsProps } from './types';\nimport { restrictToWindowEdges } from '@dnd-kit/modifiers';\n\nexport const Attachments = ({\n items = [],\n onDelete,\n onReplaceWithBrowse,\n onReplaceWithUpload,\n onBrowse,\n onUpload,\n onSorted,\n appBridge,\n}: AttachmentsProps) => {\n const [internalItems, setInternalItems] = useState<Asset[]>(items);\n const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);\n const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor));\n const [draggedAssetId, setDraggedAssetId] = useState<number \| undefined>(undefined);\n const [isUploadLoading, setIsUploadLoading] = useState(false);\n const [assetIdsLoading, setAssetIdsLoading] = useState<number[]>([]);\n const [selectedFiles, setSelectedFiles] = useState<FileList \| null>(null);\n const isEditing = useEditorState(appBridge);\n\n const draggedItem = internalItems?.find((item) => item.id === draggedAssetId);\n\n const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload({\n onUploadProgress: () => !isUploadLoading && setIsUploadLoading(true),\n });\n\n useEffect(() => {\n setInternalItems(items);\n }, [items]);\n\n useEffect(() => {\n if (selectedFiles) {\n setIsUploadLoading(true);\n uploadFile(selectedFiles);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedFiles]);\n\n useEffect(() => {\n const uploadDone = async () => {\n if (doneAll) {\n await onUpload(uploadResults);\n setIsUploadLoading(false);\n }\n };\n uploadDone();\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [doneAll, uploadResults]);\n\n const onOpenAssetChooser = () => {\n setIsFlyoutOpen(false);\n appBridge.openAssetChooser(\n (result: Asset[]) => {\n onBrowse(result);\n appBridge.closeAssetChooser();\n setIsFlyoutOpen(true);\n },\n {\n multiSelection: true,\n selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n },\n );\n };\n\n const onReplaceItemWithBrowse = (toReplace: Asset) => {\n setIsFlyoutOpen(false);\n appBridge.openAssetChooser(\n async (result: Asset[]) => {\n setIsFlyoutOpen(true);\n appBridge.closeAssetChooser();\n setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n await onReplaceWithBrowse(toReplace, result[0]);\n setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n },\n {\n multiSelection: false,\n selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n },\n );\n };\n\n const onReplaceItemWithUpload = async (toReplace: Asset, uploadedAsset: Asset) => {\n setAssetIdsLoading([...assetIdsLoading, toReplace.id]);\n await onReplaceWithUpload(toReplace, uploadedAsset);\n setAssetIdsLoading(assetIdsLoading.filter((id) => id !== toReplace.id));\n };\n\n const handleDragStart = (event: DragStartEvent) => {\n const { active } = event;\n setDraggedAssetId(active.id as number);\n };\n\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n if (over && active.id !== over.id && internalItems) {\n const oldIndex = internalItems.findIndex((i) => i.id === active.id);\n const newIndex = internalItems.findIndex((i) => i.id === over.id);\n const sortedItems = arrayMove(internalItems, oldIndex, newIndex);\n setInternalItems(sortedItems);\n onSorted(sortedItems);\n }\n setDraggedAssetId(undefined);\n };\n\n return isEditing \|\| (internalItems?.length ?? 0) > 0 ? (\n <Tooltip\n withArrow\n position={TooltipPosition.Top}\n content=\"Attachments\"\n disabled={isFlyoutOpen}\n enterDelay={500}\n triggerElement={\n <div data-test-id=\"attachments-flyout-button\">\n <Flyout\n placement={FlyoutPlacement.BottomRight}\n onOpenChange={(isOpen) => setIsFlyoutOpen(!!draggedItem ? true : isOpen)}\n isOpen={isFlyoutOpen}\n hug={false}\n fitContent\n legacyFooter={false}\n trigger={\n <div className=\"tw-flex tw-text-[13px] tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-bg-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-inverse-hover active:tw-bg-box-neutral-strong-inverse-pressed tw-text-box-neutral-strong tw-outline tw-outline-1 tw-outline-offset-[1px] tw-p-[6px] tw-outline-line\">\n <IconPaperclip16 />\n <div>{items.length > 0 ? items.length : 'Add'}</div>\n <IconCaretDown12 />\n </div>\n }\n >\n <div className=\"tw-w-[300px]\">\n {internalItems.length > 0 && (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCenter}\n onDragStart={handleDragStart}\n onDragEnd={handleDragEnd}\n modifiers={[restrictToWindowEdges]}\n >\n <SortableContext items={internalItems} strategy={rectSortingStrategy}>\n <div className=\"tw-border-b tw-border-b-line\">\n {internalItems.map((item) => (\n <SortableAttachmentItem\n isEditing={isEditing}\n isLoading={assetIdsLoading.includes(item.id)}\n key={item.id}\n item={item}\n onDelete={() => onDelete(item)}\n onReplaceWithBrowse={() => onReplaceItemWithBrowse(item)}\n onReplaceWithUpload={(uploadedAsset: Asset) =>\n onReplaceItemWithUpload(item, uploadedAsset)\n }\n />\n ))}\n </div>\n </SortableContext>\n <DragOverlay>\n {draggedItem && (\n <AttachmentItem\n isOverlay={true}\n isEditing={isEditing}\n key={draggedAssetId}\n item={draggedItem}\n isDragging={true}\n onDelete={() => onDelete(draggedItem)}\n onReplaceWithBrowse={() => onReplaceItemWithBrowse(draggedItem)}\n onReplaceWithUpload={(uploadedAsset: Asset) =>\n onReplaceItemWithUpload(draggedItem, uploadedAsset)\n }\n />\n )}\n </DragOverlay>\n </DndContext>\n )}\n {isEditing && (\n <div className=\"tw-px-5 tw-py-3\">\n <div className=\"tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4\">\n Add attachments\n </div>\n <AssetInput\n isLoading={isUploadLoading}\n size={AssetInputSize.Small}\n onUploadClick={(fileList) => setSelectedFiles(fileList)}\n onLibraryClick={onOpenAssetChooser}\n />\n </div>\n )}\n </div>\n </Flyout>\n </div>\n }\n />\n ) : null;\n};\n"],"names":["Attachments","items","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onBrowse","onUpload","onSorted","appBridge","internalItems","setInternalItems","useState","isFlyoutOpen","setIsFlyoutOpen","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","jsx","Tooltip","TooltipPosition","Flyout","FlyoutPlacement","isOpen","jsxs","IconPaperclip16","IconCaretDown12","DndContext","closestCenter","restrictToWindowEdges","SortableContext","rectSortingStrategy","SortableAttachmentItem","DragOverlay","AttachmentItem","AssetInput","AssetInputSize","fileList"],"mappings":"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"}

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

@@ -1,54 +1,54 @@
-import { j as t } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { LoadingCircle as y, IconExclamationMarkTriangle as z, Flyout as O, ActionMenu as R, MenuItemContentSize as p, IconArrowCircleUp20 as X, IconImageStack20 as A } from "@frontify/fondue";
-import { useState as b, useRef as F } from "react";
-import { joinClassNames as T } from "../../utilities/react/joinClassNames.es.js";
-import { FileExtensionSets as V } from "@frontify/app-bridge";
-const D = ({
-  onDrop: n,
-  label: c,
-  icon: h,
-  secondaryLabel: u,
+import { jsxs as c, jsx as e, Fragment as z } from "react/jsx-runtime";
+import { LoadingCircle as O, IconExclamationMarkTriangle as X, Flyout as A, ActionMenu as F, MenuItemContentSize as I, IconArrowCircleUp20 as R, IconImageStack20 as T } from "@frontify/fondue";
+import { useState as g, useRef as V } from "react";
+import { joinClassNames as P } from "../../utilities/react/joinClassNames.es.js";
+import { FileExtensionSets as Y } from "@frontify/app-bridge";
+const H = ({
+  onDrop: s,
+  label: u,
+  icon: p,
+  secondaryLabel: f,
   isLoading: l,
-  fillParentContainer: k,
-  onAssetChooseClick: g,
-  onUploadClick: j,
-  withMenu: I = !0,
-  onClick: f,
-  validFileType: m,
-  verticalLayout: N
+  fillParentContainer: N,
+  onAssetChooseClick: x,
+  onUploadClick: k,
+  withMenu: j = !0,
+  onClick: m,
+  validFileType: v,
+  verticalLayout: M
 }) => {
-  const [d, v] = b(!1), [i, w] = b(), x = F(null), [o, a] = b(void 0), M = (e) => {
-    if (e.preventDefault(), v(!1), !E(e.dataTransfer.files)) {
+  const [d, b] = g(!1), [i, w] = g(), h = V(null), [o, a] = g(void 0), S = (t) => {
+    if (t.preventDefault(), b(!1), !B(t.dataTransfer.files)) {
       a("Invalid"), setTimeout(() => {
         a(void 0);
       }, 1e3);
       return;
     }
-    n == null || n(e.dataTransfer.files);
-  }, E = (e) => {
-    if (!m)
+    s == null || s(t.dataTransfer.files);
+  }, B = (t) => {
+    if (!v)
       return !0;
-    for (let r = 0; r < e.length; r++) {
-      const s = e[r].name.split(".").pop() ?? "";
-      if (!V[m].includes(s))
+    for (let r = 0; r < t.length; r++) {
+      const n = t[r].name.split(".").pop() ?? "";
+      if (!Y[v].includes(n))
         return !1;
     }
     return !0;
-  }, S = (e) => {
-    if (!x.current || l)
+  }, C = (t) => {
+    if (!h.current || l)
       return;
-    const { left: r, top: s } = x.current.getBoundingClientRect(), B = e.clientX - r, C = e.clientY - s;
-    w([B, C]);
+    const { left: r, top: n } = h.current.getBoundingClientRect(), E = t.clientX - r, y = t.clientY - n;
+    w([E, y]);
   };
-  return /* @__PURE__ */ t.jsxs(
+  return /* @__PURE__ */ c(
     "button",
     {
-      ref: x,
+      ref: h,
       "data-test-id": "block-inject-button",
-      className: T([
+      className: P([
         "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 ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr",
-        k ? "tw-h-full" : "tw-h-[72px]",
+        M ? "[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl" : "[&:not(:first-child)]:tw-border-l-0  first:tw-rounded-bl last:tw-rounded-tr",
+        N ? "tw-h-full" : "tw-h-[72px]",
         d && !l ? "tw-border-dashed" : "tw-border-solid",
         i && "tw-bg-blank-state-pressed-inverse",
         d && "tw-bg-blank-state-weak-inverse",
@@ -56,34 +56,34 @@ const D = ({
         l || i || d || o ? "" : "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",
         (d || i) && !o ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
       ]),
-      onDragEnter: n ? (e) => {
+      onDragEnter: s ? (t) => {
         var r;
-        if (v(!0), m === "Images")
-          for (const s of Array.from(e.dataTransfer.items))
-            (r = s == null ? void 0 : s.type) != null && r.startsWith("image/") ? a(void 0) : a("Invalid");
+        if (b(!0), v === "Images")
+          for (const n of Array.from(t.dataTransfer.items))
+            (r = n == null ? void 0 : n.type) != null && r.startsWith("image/") ? a(void 0) : a("Invalid");
       } : void 0,
-      onDragLeave: n ? () => {
-        v(!1), a(void 0);
+      onDragLeave: s ? () => {
+        b(!1), a(void 0);
       } : void 0,
-      onDrop: n ? M : void 0,
-      onClick: (e) => {
-        I && S(e), f == null || f();
+      onDrop: s ? S : void 0,
+      onClick: (t) => {
+        j && C(t), m == null || m();
       },
       children: [
-        l ? /* @__PURE__ */ t.jsx(y, {}) : (
+        l ? /* @__PURE__ */ e(O, {}) : (
           // eslint-disable-next-line unicorn/no-nested-ternary
-          o ? /* @__PURE__ */ t.jsxs("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
-            /* @__PURE__ */ t.jsx(z, {}),
+          o ? /* @__PURE__ */ c("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
+            /* @__PURE__ */ e(X, {}),
             o
-          ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
-            h && /* @__PURE__ */ t.jsx("div", { children: h }),
-            (c || u) && /* @__PURE__ */ t.jsxs("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
-              c && /* @__PURE__ */ t.jsx("div", { className: "tw-font-medium", children: c }),
-              u && /* @__PURE__ */ t.jsx("div", { className: "tw-font-normal", children: u })
+          ] }) : /* @__PURE__ */ c(z, { children: [
+            p && /* @__PURE__ */ e("div", { children: p }),
+            (u || f) && /* @__PURE__ */ c("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
+              u && /* @__PURE__ */ e("div", { className: "tw-font-medium", children: u }),
+              f && /* @__PURE__ */ e("div", { className: "tw-font-normal", children: f })
             ] })
           ] })
         ),
-        i && /* @__PURE__ */ t.jsx(
+        i && /* @__PURE__ */ e(
           "div",
           {
             className: "tw-absolute tw-left-0 tw-top-full tw-z-20",
@@ -91,44 +91,44 @@ const D = ({
               left: i[0],
               top: i[1]
             },
-            children: /* @__PURE__ */ t.jsx(
-              O,
+            children: /* @__PURE__ */ e(
+              A,
               {
-                onOpenChange: (e) => !e && w(void 0),
+                onOpenChange: (t) => !t && w(void 0),
                 isOpen: !0,
                 fitContent: !0,
                 hug: !1,
                 legacyFooter: !1,
-                trigger: /* @__PURE__ */ t.jsx("div", {}),
-                children: /* @__PURE__ */ t.jsx(
-                  R,
+                trigger: /* @__PURE__ */ e("div", {}),
+                children: /* @__PURE__ */ e(
+                  F,
                   {
                     menuBlocks: [
                       {
                         id: "menu",
                         menuItems: [
-                          ...j ? [
+                          ...k ? [
                             {
                               id: "upload",
-                              size: p.XSmall,
+                              size: I.XSmall,
                               title: "Upload asset",
                               onClick: () => {
-                                j(), w(void 0);
+                                k(), w(void 0);
                               },
                               initialValue: !0,
-                              decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(X, {}) })
+                              decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(R, {}) })
                             }
                           ] : [],
-                          ...g ? [
+                          ...x ? [
                             {
                               id: "asset",
-                              size: p.XSmall,
+                              size: I.XSmall,
                               title: "Browse asset",
                               onClick: () => {
-                                g(), w(void 0);
+                                x(), w(void 0);
                               },
                               initialValue: !0,
-                              decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(A, {}) })
+                              decorator: /* @__PURE__ */ e("div", { className: "tw-mr-2", children: /* @__PURE__ */ e(T, {}) })
                             }
                           ] : []
                         ]
@@ -145,6 +145,6 @@ const D = ({
   );
 };
 export {
-  D as BlockInjectButton
+  H as BlockInjectButton
 };
 //# sourceMappingURL=BlockInjectButton.es.js.map

package/dist/components/BlockInjectButton/BlockInjectButton.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport {\n ActionMenu,\n Flyout,\n IconArrowCircleUp20,\n IconExclamationMarkTriangle,\n IconImageStack20,\n LoadingCircle,\n MenuItemContentSize,\n} from '@frontify/fondue';\nimport { DragEventHandler, MouseEventHandler, useRef, useState } from 'react';\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\nimport { BlockInjectButtonProps } from './types';\nimport { FileExtension, FileExtensionSets } from '@frontify/app-bridge';\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 { left, top } = buttonRef.current.getBoundingClientRect();\n const XInsideComponent = event.clientX - left;\n const YInsideComponent = event.clientY - top;\n setMenuPosition([XInsideComponent, YInsideComponent]);\n };\n\n return (\n <button\n ref={buttonRef}\n data-test-id=\"block-inject-button\"\n className={joinClassNames([\n 'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n verticalLayout\n ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n menuPosition && 'tw-bg-blank-state-pressed-inverse',\n isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n isLoading \|\| menuPosition \|\| isDraggingOver \|\| errorMsg\n ? ''\n : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n (isDraggingOver \|\| !!menuPosition) && !errorMsg\n ? '[&>]:tw-pointer-events-none tw-border-blank-state-line-hover'\n : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n ])}\n onDragEnter={\n onDrop\n ? (event) => {\n setIsDraggingOver(true);\n // is now only used for images, can be adapted if needed\n if (validFileType === 'Images') {\n for (const item of Array.from(event.dataTransfer.items)) {\n if (!item?.type?.startsWith('image/')) {\n setErrorMsg('Invalid');\n } else {\n setErrorMsg(undefined);\n }\n }\n }\n }\n : undefined\n }\n onDragLeave={\n onDrop\n ? () => {\n setIsDraggingOver(false);\n setErrorMsg(undefined);\n }\n : undefined\n }\n onDrop={onDrop ? handleDrop : undefined}\n onClick={(event) => {\n withMenu && openMenu(event);\n onClick?.();\n }}\n >\n {isLoading ? (\n <LoadingCircle />\n ) : // eslint-disable-next-line unicorn/no-nested-ternary\n errorMsg ? (\n <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n <IconExclamationMarkTriangle />\n {errorMsg}\n </div>\n ) : (\n <>\n {icon && <div>{icon}</div>}\n {(label \|\| secondaryLabel) && (\n <div className=\"tw-flex tw-flex-col tw-items-start\">\n {label && <div className=\"tw-font-medium\">{label}</div>}\n {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n </div>\n )}\n </>\n )}\n {menuPosition && (\n <div\n className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n style={{\n left: menuPosition[0],\n top: menuPosition[1],\n }}\n >\n <Flyout\n onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}\n isOpen={true}\n fitContent\n hug={false}\n legacyFooter={false}\n trigger={<div />}\n >\n <ActionMenu\n menuBlocks={[\n {\n id: 'menu',\n menuItems: [\n ...(onUploadClick\n ? [\n {\n id: 'upload',\n size: MenuItemContentSize.XSmall,\n title: 'Upload asset',\n onClick: () => {\n onUploadClick();\n setMenuPosition(undefined);\n },\n\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconArrowCircleUp20 />\n </div>\n ),\n },\n ]\n : []),\n ...(onAssetChooseClick\n ? [\n {\n id: 'asset',\n size: MenuItemContentSize.XSmall,\n title: 'Browse asset',\n onClick: () => {\n onAssetChooseClick();\n setMenuPosition(undefined);\n },\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconImageStack20 />\n </div>\n ),\n },\n ]\n : []),\n ],\n },\n ]}\n />\n </Flyout>\n </div>\n )}\n </button>\n );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","left","top","XInsideComponent","YInsideComponent","jsxs","joinClassNames","item","_a","LoadingCircle","jsx","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20"],"mappings":";;;;;AAgBO,MAAMA,IAAoB,CAAC;AAAA,EAC9B,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,MAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC;AACJ,MAA8B;AAC1B,QAAM,CAACC,GAAgBC,CAAiB,IAAIC,EAAS,EAAK,GACpD,CAACC,GAAcC,CAAe,IAAIF,EAAuC,GACzEG,IAAYC,EAA0B,IAAI,GAC1C,CAACC,GAAUC,CAAW,IAAIN,EAA6B,MAAS,GAEhEO,IAAkD,CAACC,MAAU;AAG/D,QAFAA,EAAM,eAAe,GACrBT,EAAkB,EAAK,GACnB,CAACU,EAAaD,EAAM,aAAa,KAAK,GAAG;AACzC,MAAAF,EAAY,SAAS,GACrB,WAAW,MAAM;AACb,QAAAA,EAAY,MAAS;AAAA,SACtB,GAAI;AACP;AAAA,IACJ;AACS,IAAApB,KAAA,QAAAA,EAAAsB,EAAM,aAAa;AAAA,EAAK,GAG/BC,IAAe,CAACC,MAAoB;AACtC,QAAI,CAACd;AACM,aAAA;AAEX,aAASe,IAAI,GAAGA,IAAID,EAAM,QAAQC,KAAK;AAC7B,YAAAC,IAAwBF,EAAMC,CAAC,EAAE,KAAK,MAAM,GAAG,EAAE,IAAS,KAAA;AAChE,UAAI,CAACE,EAAkBjB,CAAa,EAAE,SAASgB,CAAoB;AACxD,eAAA;AAAA,IAEf;AACO,WAAA;AAAA,EAAA,GAGLE,IAAiD,CAACN,MAAU;AAC1D,QAAA,CAACL,EAAU,WAAWb;AACtB;AAEJ,UAAM,EAAE,MAAAyB,GAAM,KAAAC,EAAA,IAAQb,EAAU,QAAQ,yBAClCc,IAAmBT,EAAM,UAAUO,GACnCG,IAAmBV,EAAM,UAAUQ;AACzB,IAAAd,EAAA,CAACe,GAAkBC,CAAgB,CAAC;AAAA,EAAA;AAIpD,SAAAC,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKhB;AAAA,MACL,gBAAa;AAAA,MACb,WAAWiB,EAAe;AAAA,QACtB;AAAA,QACAvB,IACM,+EACA;AAAA,QACNN,IAAsB,cAAc;AAAA,QACpCO,KAAkB,CAACR,IAAY,qBAAqB;AAAA,QACpDW,KAAgB;AAAA,QAChBH,KAAkB;AAAA,QAClBO,IAAW,6CAA6C;AAAA,QACxDf,KAAaW,KAAgBH,KAAkBO,IACzC,KACA;AAAA,SACLP,KAAoBG,MAAiB,CAACI,IACjC,kEACA;AAAA,MAAA,CACT;AAAA,MACD,aACInB,IACM,CAACsB,MAAU;;AAGP,YAFAT,EAAkB,EAAI,GAElBH,MAAkB;AAClB,qBAAWyB,KAAQ,MAAM,KAAKb,EAAM,aAAa,KAAK;AAClD,aAAKc,IAAAD,KAAA,gBAAAA,EAAM,SAAN,QAAAC,EAAY,WAAW,YAGxBhB,EAAY,MAAS,IAFrBA,EAAY,SAAS;AAAA,MAOrC,IAAA;AAAA,MAEV,aACIpB,IACM,MAAM;AACF,QAAAa,EAAkB,EAAK,GACvBO,EAAY,MAAS;AAAA,MAEzB,IAAA;AAAA,MAEV,QAAQpB,IAASqB,IAAa;AAAA,MAC9B,SAAS,CAACC,MAAU;AAChB,QAAAd,KAAYoB,EAASN,CAAK,GAChBb,KAAA,QAAAA;AAAA,MACd;AAAA,MAEC,UAAA;AAAA,QAAAL,0BACIiC,GAAc,EAAA;AAAA;AAAA,UAEnBlB,IACIc,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,4EACX,UAAA;AAAA,YAAAK,gBAAAA,EAAA,IAACC,GAA4B,EAAA;AAAA,YAC5BpB;AAAA,UAAA,EAAA,CACL,IAGKc,gBAAAA,EAAAA,KAAAO,EAAA,UAAA,EAAA,UAAA;AAAA,YAAQtC,KAAAoC,gBAAAA,EAAAA,IAAC,SAAK,UAAKpC,EAAA,CAAA;AAAA,aAClBD,KAASE,MACN8B,gBAAAA,EAAA,KAAA,OAAA,EAAI,WAAU,sCACV,UAAA;AAAA,cAAAhC,KAAUqC,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAU,kBAAkB,UAAMrC,GAAA;AAAA,cAChDE,KAAkBmC,gBAAAA,EAAA,IAAC,OAAI,EAAA,WAAU,kBAAkB,UAAenC,GAAA;AAAA,YAAA,GACvE;AAAA,UAAA,GAER;AAAA;AAAA,QAEHY,KACGuB,gBAAAA,EAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAU;AAAA,YACV,OAAO;AAAA,cACH,MAAMvB,EAAa,CAAC;AAAA,cACpB,KAAKA,EAAa,CAAC;AAAA,YACvB;AAAA,YAEA,UAAAuB,gBAAAA,EAAA;AAAA,cAACG;AAAA,cAAA;AAAA,gBACG,cAAc,CAACC,MAAW,CAACA,KAAU1B,EAAgB,MAAS;AAAA,gBAC9D,QAAQ;AAAA,gBACR,YAAU;AAAA,gBACV,KAAK;AAAA,gBACL,cAAc;AAAA,gBACd,+BAAU,OAAI,EAAA;AAAA,gBAEd,UAAAsB,gBAAAA,EAAA;AAAA,kBAACK;AAAA,kBAAA;AAAA,oBACG,YAAY;AAAA,sBACR;AAAA,wBACI,IAAI;AAAA,wBACJ,WAAW;AAAA,0BACP,GAAIpC,IACE;AAAA,4BACI;AAAA,8BACI,IAAI;AAAA,8BACJ,MAAMqC,EAAoB;AAAA,8BAC1B,OAAO;AAAA,8BACP,SAAS,MAAM;AACG,gCAAArC,KACdS,EAAgB,MAAS;AAAA,8BAC7B;AAAA,8BAEA,cAAc;AAAA,8BACd,WACKsB,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAU,WACX,UAAAA,gBAAAA,MAACO,IAAoB,CAAA,GACzB;AAAA,4BAER;AAAA,0BAAA,IAEJ,CAAC;AAAA,0BACP,GAAIvC,IACE;AAAA,4BACI;AAAA,8BACI,IAAI;AAAA,8BACJ,MAAMsC,EAAoB;AAAA,8BAC1B,OAAO;AAAA,8BACP,SAAS,MAAM;AACQ,gCAAAtC,KACnBU,EAAgB,MAAS;AAAA,8BAC7B;AAAA,8BACA,cAAc;AAAA,8BACd,WACKsB,gBAAAA,EAAA,IAAA,OAAA,EAAI,WAAU,WACX,UAAAA,gBAAAA,MAACQ,IAAiB,CAAA,GACtB;AAAA,4BAER;AAAA,0BAAA,IAEJ,CAAC;AAAA,wBACX;AAAA,sBACJ;AAAA,oBACJ;AAAA,kBAAA;AAAA,gBACJ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIhB;"}
1	+ {"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport {\n ActionMenu,\n Flyout,\n IconArrowCircleUp20,\n IconExclamationMarkTriangle,\n IconImageStack20,\n LoadingCircle,\n MenuItemContentSize,\n} from '@frontify/fondue';\nimport { DragEventHandler, MouseEventHandler, useRef, useState } from 'react';\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\nimport { BlockInjectButtonProps } from './types';\nimport { FileExtension, FileExtensionSets } from '@frontify/app-bridge';\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 { left, top } = buttonRef.current.getBoundingClientRect();\n const XInsideComponent = event.clientX - left;\n const YInsideComponent = event.clientY - top;\n setMenuPosition([XInsideComponent, YInsideComponent]);\n };\n\n return (\n <button\n ref={buttonRef}\n data-test-id=\"block-inject-button\"\n className={joinClassNames([\n 'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n verticalLayout\n ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n menuPosition && 'tw-bg-blank-state-pressed-inverse',\n isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n isLoading \|\| menuPosition \|\| isDraggingOver \|\| errorMsg\n ? ''\n : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n (isDraggingOver \|\| !!menuPosition) && !errorMsg\n ? '[&>]:tw-pointer-events-none tw-border-blank-state-line-hover'\n : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n ])}\n onDragEnter={\n onDrop\n ? (event) => {\n setIsDraggingOver(true);\n // is now only used for images, can be adapted if needed\n if (validFileType === 'Images') {\n for (const item of Array.from(event.dataTransfer.items)) {\n if (!item?.type?.startsWith('image/')) {\n setErrorMsg('Invalid');\n } else {\n setErrorMsg(undefined);\n }\n }\n }\n }\n : undefined\n }\n onDragLeave={\n onDrop\n ? () => {\n setIsDraggingOver(false);\n setErrorMsg(undefined);\n }\n : undefined\n }\n onDrop={onDrop ? handleDrop : undefined}\n onClick={(event) => {\n withMenu && openMenu(event);\n onClick?.();\n }}\n >\n {isLoading ? (\n <LoadingCircle />\n ) : // eslint-disable-next-line unicorn/no-nested-ternary\n errorMsg ? (\n <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n <IconExclamationMarkTriangle />\n {errorMsg}\n </div>\n ) : (\n <>\n {icon && <div>{icon}</div>}\n {(label \|\| secondaryLabel) && (\n <div className=\"tw-flex tw-flex-col tw-items-start\">\n {label && <div className=\"tw-font-medium\">{label}</div>}\n {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n </div>\n )}\n </>\n )}\n {menuPosition && (\n <div\n className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n style={{\n left: menuPosition[0],\n top: menuPosition[1],\n }}\n >\n <Flyout\n onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}\n isOpen={true}\n fitContent\n hug={false}\n legacyFooter={false}\n trigger={<div />}\n >\n <ActionMenu\n menuBlocks={[\n {\n id: 'menu',\n menuItems: [\n ...(onUploadClick\n ? [\n {\n id: 'upload',\n size: MenuItemContentSize.XSmall,\n title: 'Upload asset',\n onClick: () => {\n onUploadClick();\n setMenuPosition(undefined);\n },\n\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconArrowCircleUp20 />\n </div>\n ),\n },\n ]\n : []),\n ...(onAssetChooseClick\n ? [\n {\n id: 'asset',\n size: MenuItemContentSize.XSmall,\n title: 'Browse asset',\n onClick: () => {\n onAssetChooseClick();\n setMenuPosition(undefined);\n },\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconImageStack20 />\n </div>\n ),\n },\n ]\n : []),\n ],\n },\n ]}\n />\n </Flyout>\n </div>\n )}\n </button>\n );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","left","top","XInsideComponent","YInsideComponent","jsxs","joinClassNames","item","_a","LoadingCircle","jsx","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20"],"mappings":"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"}

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

@@ -1,73 +1,73 @@
-import { j as l } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { useState as a, useRef as j, useEffect as g } from "react";
-import { Toolbar as F } from "./Toolbar.es.js";
-import { joinClassNames as p } from "../../utilities/react/joinClassNames.es.js";
-const R = ({
-  children: r,
-  toolbarFlyoutItems: c,
+import { jsxs as g, jsx as r } from "react/jsx-runtime";
+import { useState as a, useRef as F, useEffect as b } from "react";
+import { Toolbar as h } from "./Toolbar.es.js";
+import { joinClassNames as c } from "../../utilities/react/joinClassNames.es.js";
+const E = ({
+  children: l,
+  toolbarFlyoutItems: p,
   toolbarItems: e,
   shouldHideWrapper: w,
   shouldHideComponent: n = !1,
   isDragging: u,
   shouldFillContainer: f,
   outlineOffset: o = 2,
-  shouldBeShown: s = !1
+  shouldBeShown: i = !1
 }) => {
-  const [t, m] = a(s), [y, i] = a(!1), x = j(null);
-  if (g(() => {
-    t || i(!0);
+  const [t, m] = a(i), [y, s] = a(!1), v = F(null);
+  if (b(() => {
+    t || s(!0);
   }, [t]), w)
-    return r;
-  const v = e == null ? void 0 : e.filter((d) => d !== void 0);
-  return /* @__PURE__ */ l.jsxs(
+    return l;
+  const x = e == null ? void 0 : e.filter((d) => d !== void 0);
+  return /* @__PURE__ */ g(
     "div",
     {
-      ref: x,
-      onFocus: () => i(!1),
-      onPointerEnter: () => i(!1),
+      ref: v,
+      onFocus: () => s(!1),
+      onPointerEnter: () => s(!1),
       "data-test-id": "block-item-wrapper",
       style: {
         outlineOffset: o
       },
-      className: p([
+      className: c([
         "tw-relative tw-group tw-outline-1 tw-outline-box-selected-inverse",
         f && "tw-flex-1 tw-h-full tw-w-full",
         "hover:tw-outline focus-within:tw-outline",
-        (t || s) && "tw-outline",
+        (t || i) && "tw-outline",
         n && "tw-opacity-0"
       ]),
       children: [
-        /* @__PURE__ */ l.jsx(
+        /* @__PURE__ */ r(
           "div",
           {
             style: {
               right: -1 - o,
               bottom: `calc(100% - ${2 + o}px)`
             },
-            className: p([
+            className: c([
               "tw-pointer-events-none tw-absolute tw-bottom-[calc(100%-4px)] tw-right-[-3px] tw-w-full tw-opacity-0 tw-z-10",
               "group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100",
-              (t || s) && "tw-opacity-100"
+              (t || i) && "tw-opacity-100"
             ]),
-            children: /* @__PURE__ */ l.jsx(
-              F,
+            children: /* @__PURE__ */ r(
+              h,
               {
                 isFlyoutOpen: t,
                 isFlyoutDisabled: y,
                 setIsFlyoutOpen: m,
-                flyoutItems: c,
-                items: v,
+                flyoutItems: p,
+                items: x,
                 isDragging: u
               }
             )
           }
         ),
-        r
+        l
       ]
     }
   );
 };
 export {
-  R as BlockItemWrapper
+  E as BlockItemWrapper
 };
 //# sourceMappingURL=BlockItemWrapper.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { joinClassNames } from '../../utilities';\nimport { Toolbar } from './Toolbar';\nimport { BlockItemWrapperProps, ToolbarItem } 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}: PropsWithChildren<BlockItemWrapperProps>) => {\n const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);\n const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isFlyoutOpen) {\n // This prevents automatic refocusing of the trigger element\n setIsFlyoutDisabled(true);\n }\n }, [isFlyoutOpen]);\n\n if (shouldHideWrapper) {\n return children;\n }\n\n const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n return (\n <div\n ref={wrapperRef}\n onFocus={() => setIsFlyoutDisabled(false)}\n onPointerEnter={() => setIsFlyoutDisabled(false)}\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 (isFlyoutOpen \|\| shouldBeShown) && '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-10',\n 'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n (isFlyoutOpen \|\| shouldBeShown) && 'tw-opacity-100',\n ])}\n >\n <Toolbar\n isFlyoutOpen={isFlyoutOpen}\n isFlyoutDisabled={isFlyoutDisabled}\n setIsFlyoutOpen={setIsFlyoutOpen}\n flyoutItems={toolbarFlyoutItems}\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","isFlyoutOpen","setIsFlyoutOpen","useState","isFlyoutDisabled","setIsFlyoutDisabled","wrapperRef","useRef","useEffect","items","item","jsxs","joinClassNames","jsx","Toolbar"],"mappings":";;;;AAOO,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;AACpB,MAAgD;AAC5C,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASH,CAAa,GACxD,CAACI,GAAkBC,CAAmB,IAAIF,EAAS,EAAK,GACxDG,IAAaC,EAAuB,IAAI;AAS9C,MAPAC,EAAU,MAAM;AACZ,IAAKP,KAEDI,EAAoB,EAAI;AAAA,EAC5B,GACD,CAACJ,CAAY,CAAC,GAEbN;AACO,WAAAH;AAGX,QAAMiB,IAAQf,KAAA,gBAAAA,EAAc,OAAO,CAACgB,MAA8BA,MAAS;AAGvE,~~SAAAC~~,~~gBAAAA,EAAA~~;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKL;AAAA,MACL,SAAS,MAAMD,EAAoB,EAAK;AAAA,MACxC,gBAAgB,MAAMA,EAAoB,EAAK;AAAA,MAC/C,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAN;AAAA,MACJ;AAAA,MACA,WAAWa,EAAe;AAAA,QACtB;AAAA,QACAd,KAAuB;AAAA,QACvB;AAAA,SACCG,KAAgBD,MAAkB;AAAA,QACnCJ,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,~~QAAAiB~~,~~gBAAAA,EAAA~~;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKd;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWa,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,eACCX,KAAgBD,MAAkB;AAAA,YAAA,CACtC;AAAA,YAED,~~UAAAa~~,~~gBAAAA,EAAA~~;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,cAAAb;AAAA,gBACA,kBAAAG;AAAA,gBACA,iBAAAF;AAAA,gBACA,aAAaT;AAAA,gBACb,OAAAgB;AAAA,gBACA,YAAAZ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
1	+ {"version":3,"file":"BlockItemWrapper.es.js","sources":["../../../src/components/BlockItemWrapper/BlockItemWrapper.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { PropsWithChildren, useEffect, useRef, useState } from 'react';\nimport { joinClassNames } from '../../utilities';\nimport { Toolbar } from './Toolbar';\nimport { BlockItemWrapperProps, ToolbarItem } 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}: PropsWithChildren<BlockItemWrapperProps>) => {\n const [isFlyoutOpen, setIsFlyoutOpen] = useState(shouldBeShown);\n const [isFlyoutDisabled, setIsFlyoutDisabled] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n if (!isFlyoutOpen) {\n // This prevents automatic refocusing of the trigger element\n setIsFlyoutDisabled(true);\n }\n }, [isFlyoutOpen]);\n\n if (shouldHideWrapper) {\n return children;\n }\n\n const items = toolbarItems?.filter((item): item is ToolbarItem => item !== undefined);\n\n return (\n <div\n ref={wrapperRef}\n onFocus={() => setIsFlyoutDisabled(false)}\n onPointerEnter={() => setIsFlyoutDisabled(false)}\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 (isFlyoutOpen \|\| shouldBeShown) && '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-10',\n 'group-hover:tw-opacity-100 group-focus:tw-opacity-100 focus-within:tw-opacity-100',\n (isFlyoutOpen \|\| shouldBeShown) && 'tw-opacity-100',\n ])}\n >\n <Toolbar\n isFlyoutOpen={isFlyoutOpen}\n isFlyoutDisabled={isFlyoutDisabled}\n setIsFlyoutOpen={setIsFlyoutOpen}\n flyoutItems={toolbarFlyoutItems}\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","isFlyoutOpen","setIsFlyoutOpen","useState","isFlyoutDisabled","setIsFlyoutDisabled","wrapperRef","useRef","useEffect","items","item","jsxs","joinClassNames","jsx","Toolbar"],"mappings":";;;;AAOO,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;AACpB,MAAgD;AAC5C,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAASH,CAAa,GACxD,CAACI,GAAkBC,CAAmB,IAAIF,EAAS,EAAK,GACxDG,IAAaC,EAAuB,IAAI;AAS9C,MAPAC,EAAU,MAAM;AACZ,IAAKP,KAEDI,EAAoB,EAAI;AAAA,EAC5B,GACD,CAACJ,CAAY,CAAC,GAEbN;AACO,WAAAH;AAGX,QAAMiB,IAAQf,KAAA,gBAAAA,EAAc,OAAO,CAACgB,MAA8BA,MAAS;AAGvE,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKL;AAAA,MACL,SAAS,MAAMD,EAAoB,EAAK;AAAA,MACxC,gBAAgB,MAAMA,EAAoB,EAAK;AAAA,MAC/C,gBAAa;AAAA,MACb,OAAO;AAAA,QACH,eAAAN;AAAA,MACJ;AAAA,MACA,WAAWa,EAAe;AAAA,QACtB;AAAA,QACAd,KAAuB;AAAA,QACvB;AAAA,SACCG,KAAgBD,MAAkB;AAAA,QACnCJ,KAAuB;AAAA,MAAA,CAC1B;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAiB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,OAAO;AAAA,cACH,OAAO,KAAKd;AAAA,cACZ,QAAQ,eAAe,IAAIA,CAAa;AAAA,YAC5C;AAAA,YACA,WAAWa,EAAe;AAAA,cACtB;AAAA,cACA;AAAA,eACCX,KAAgBD,MAAkB;AAAA,YAAA,CACtC;AAAA,YAED,UAAA,gBAAAa;AAAA,cAACC;AAAA,cAAA;AAAA,gBACG,cAAAb;AAAA,gBACA,kBAAAG;AAAA,gBACA,iBAAAF;AAAA,gBACA,aAAaT;AAAA,gBACb,OAAAgB;AAAA,gBACA,YAAAZ;AAAA,cAAA;AAAA,YACJ;AAAA,UAAA;AAAA,QACJ;AAAA,QACCL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}