npm - @frontify/guideline-blocks-settings - Versions diffs - 2.0.0 → 2.0.1 - Mend

@frontify/guideline-blocks-settings 2.0.0 → 2.0.1

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 (111) hide show

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

@@ -1,112 +1,111 @@
-import { jsx as e, jsxs as o, Fragment as A } from "react/jsx-runtime";
-import { FileExtensionSets as D } from "@frontify/app-bridge";
+import { jsx as e, jsxs as o, Fragment as Y } from "react/jsx-runtime";
+import { FileExtensionSets as A } from "@frontify/app-bridge";
 import { LoadingCircle as K, Flyout as k, Dropdown as w } from "@frontify/fondue/components";
 import { IconArrowCircleUp as V, IconImageStack as W, IconExclamationMarkTriangle as q } from "@frontify/fondue/icons";
-import { useState as j, useRef as G, useCallback as H, useMemo as J } from "react";
+import { useState as I, useRef as G, useCallback as H, useMemo as J } from "react";
 import { joinClassNames as Q } from "../../utilities/react/joinClassNames.es.js";
 const et = ({
-  onDrop: i,
+  onDrop: l,
   label: f,
-  icon: N,
+  icon: j,
   secondaryLabel: u,
-  isLoading: d,
-  fillParentContainer: E,
+  isLoading: a,
+  fillParentContainer: S,
   onAssetChooseClick: m,
   onUploadClick: v,
-  withMenu: M = !0,
-  onClick: h,
-  validFileType: b,
-  verticalLayout: O
+  withMenu: C = !0,
+  onClick: E,
+  validFileType: h,
+  verticalLayout: M
 }) => {
-  const [c, g] = j(!1), [s, p] = j(), x = G(null), [a, l] = j(void 0), R = (t) => {
-    if (t.preventDefault(), g(!1), !T(t.dataTransfer.files)) {
-      l("Invalid"), setTimeout(() => {
-        l(void 0);
+  const [d, b] = I(!1), [n, g] = I(), p = G(null), [s, i] = I(void 0), D = (t) => {
+    if (t.preventDefault(), b(!1), !O(t.dataTransfer.files)) {
+      i("Invalid"), setTimeout(() => {
+        i(void 0);
       }, 1e3);
       return;
     }
-    i == null || i(t.dataTransfer.files);
-  }, T = (t) => {
-    if (!b)
+    l?.(t.dataTransfer.files);
+  }, O = (t) => {
+    if (!h)
       return !0;
     for (let r = 0; r < t.length; r++) {
-      const n = t[r].name.split(".").pop() ?? "";
-      if (!D[b].includes(n))
+      const c = t[r].name.split(".").pop() ?? "";
+      if (!A[h].includes(c))
         return !1;
     }
     return !0;
-  }, y = (t) => {
-    if (!x.current || d)
+  }, R = (t) => {
+    if (!p.current || a)
       return;
-    const { clientX: r, clientY: n } = t, S = r === 0 && n === 0, { left: B, top: C, width: F, height: P } = x.current.getBoundingClientRect(), X = S ? F / 2 : r - B, Y = S ? P / 2 : n - C;
-    p([X, Y]);
-  }, I = H((t) => {
-    t(), p(void 0);
-  }, []), z = J(() => {
+    const { clientX: r, clientY: c } = t, N = r === 0 && c === 0, { left: y, top: z, width: B, height: F } = p.current.getBoundingClientRect(), P = N ? B / 2 : r - y, X = N ? F / 2 : c - z;
+    g([P, X]);
+  }, x = H((t) => {
+    t(), g(void 0);
+  }, []), T = J(() => {
     const t = [];
     return v && t.push({
-      onSelect: () => I(v),
+      onSelect: () => x(v),
       title: "Upload asset",
       icon: /* @__PURE__ */ e(V, { size: "20" })
     }), m && t.push({
-      onSelect: () => I(m),
+      onSelect: () => x(m),
       title: "Browse asset",
       icon: /* @__PURE__ */ e(W, { size: "20" })
     }), t;
-  }, [m, v, I]);
+  }, [m, v, x]);
   return /* @__PURE__ */ o(
     "button",
     {
-      ref: x,
+      ref: p,
       "data-test-id": "block-inject-button",
       className: Q([
         "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",
-        O ? "[&: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",
-        E ? "tw-h-full" : "tw-h-[72px]",
-        c && !d ? "tw-border-dashed" : "tw-border-solid",
-        s && "tw-bg-blank-state-pressed-inverse",
-        c && "tw-bg-blank-state-weak-inverse",
-        a ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-blank-state-line",
-        d || s || c || a ? "" : "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",
-        (c || s) && !a ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
+        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",
+        S ? "tw-h-full" : "tw-h-[72px]",
+        d && !a ? "tw-border-dashed" : "tw-border-solid",
+        n && "tw-bg-blank-state-pressed-inverse",
+        d && "tw-bg-blank-state-weak-inverse",
+        s ? "!tw-border-red-50 !tw-cursor-not-allowed" : " tw-border-blank-state-line",
+        a || n || d || s ? "" : "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 || n) && !s ? "[&>*]:tw-pointer-events-none tw-border-blank-state-line-hover" : "tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded"
       ]),
-      onDragEnter: i ? (t) => {
-        var r;
-        if (g(!0), b === "Images")
-          for (const n of Array.from(t.dataTransfer.items))
-            (r = n == null ? void 0 : n.type) != null && r.startsWith("image/") ? l(void 0) : l("Invalid");
+      onDragEnter: l ? (t) => {
+        if (b(!0), h === "Images")
+          for (const r of Array.from(t.dataTransfer.items))
+            r?.type?.startsWith("image/") ? i(void 0) : i("Invalid");
       } : void 0,
-      onDragLeave: i ? () => {
-        g(!1), l(void 0);
+      onDragLeave: l ? () => {
+        b(!1), i(void 0);
       } : void 0,
-      onDrop: i ? R : void 0,
+      onDrop: l ? D : void 0,
       onClick: (t) => {
-        M && !s && y(t), h == null || h();
+        C && !n && R(t), E?.();
       },
       children: [
-        d ? /* @__PURE__ */ e(K, {}) : a ? /* @__PURE__ */ o("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
+        a ? /* @__PURE__ */ e(K, {}) : s ? /* @__PURE__ */ o("div", { className: " tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium", children: [
           /* @__PURE__ */ e(q, { size: "16" }),
-          a
-        ] }) : /* @__PURE__ */ o(A, { children: [
-          N && /* @__PURE__ */ e("div", { children: N }),
+          s
+        ] }) : /* @__PURE__ */ o(Y, { children: [
+          j && /* @__PURE__ */ e("div", { children: j }),
           (f || u) && /* @__PURE__ */ o("div", { className: "tw-flex tw-flex-col tw-items-start", children: [
             f && /* @__PURE__ */ e("div", { className: "tw-font-medium", children: f }),
             u && /* @__PURE__ */ e("div", { className: "tw-font-normal", children: u })
           ] })
         ] }),
-        s && /* @__PURE__ */ e(
+        n && /* @__PURE__ */ e(
           "div",
           {
             className: "tw-absolute tw-left-0 tw-top-full tw-z-20",
             style: {
-              left: s[0],
-              top: s[1]
+              left: n[0],
+              top: n[1]
             },
-            children: /* @__PURE__ */ o(k.Root, { open: !0, onOpenChange: (t) => !t && p(void 0), children: [
+            children: /* @__PURE__ */ o(k.Root, { open: !0, onOpenChange: (t) => !t && g(void 0), children: [
               /* @__PURE__ */ e(k.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
               /* @__PURE__ */ e(k.Content, { triggerOffset: "compact", children: /* @__PURE__ */ o(w.Root, { open: !0, children: [
                 /* @__PURE__ */ e(w.Trigger, { children: /* @__PURE__ */ e("div", {}) }),
-                /* @__PURE__ */ e(w.Content, { triggerOffset: "compact", children: z.map((t) => /* @__PURE__ */ o(w.Item, { onSelect: t.onSelect, children: [
+                /* @__PURE__ */ e(w.Content, { triggerOffset: "compact", children: T.map((t) => /* @__PURE__ */ o(w.Item, { onSelect: t.onSelect, children: [
                   t.icon,
                   t.title
                 ] }, t.title)) })

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 { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack, IconExclamationMarkTriangle } from '@frontify/fondue/icons';\nimport { type DragEventHandler, type MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n onDrop,\n label,\n icon,\n secondaryLabel,\n isLoading,\n fillParentContainer,\n onAssetChooseClick,\n onUploadClick,\n withMenu = true,\n onClick,\n validFileType,\n verticalLayout,\n}: BlockInjectButtonProps) => {\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const [menuPosition, setMenuPosition] = useState<[number, number] \| undefined>();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [errorMsg, setErrorMsg] = useState<string \| undefined>(undefined);\n\n const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n setIsDraggingOver(false);\n if (!isValidAsset(event.dataTransfer.files)) {\n setErrorMsg('Invalid');\n setTimeout(() => {\n setErrorMsg(undefined);\n }, 1000);\n return;\n }\n onDrop?.(event.dataTransfer.files);\n };\n\n const isValidAsset = (files: FileList) => {\n if (!validFileType) {\n return true;\n }\n for (let i = 0; i < files.length; i++) {\n const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n return false;\n }\n }\n return true;\n };\n\n const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!buttonRef.current \|\| isLoading) {\n return;\n }\n const { clientX, clientY } = event;\n const isKeyboardEvent = clientX === 0 && clientY === 0;\n const { left, top, width, height } = buttonRef.current.getBoundingClientRect();\n const XInsideComponent = !isKeyboardEvent ? clientX - left : width / 2;\n const YInsideComponent = !isKeyboardEvent ? clientY - top : height / 2;\n setMenuPosition([XInsideComponent, YInsideComponent]);\n };\n\n const onItemClick = useCallback((callback: () => unknown) => {\n callback();\n setMenuPosition(undefined);\n }, []);\n\n const menuItems = useMemo(() => {\n const items = [];\n if (onUploadClick) {\n items.push({\n onSelect: () => onItemClick(onUploadClick),\n title: 'Upload asset',\n icon: <IconArrowCircleUp size=\"20\" />,\n });\n }\n if (onAssetChooseClick) {\n items.push({\n onSelect: () => onItemClick(onAssetChooseClick),\n title: 'Browse asset',\n icon: <IconImageStack size=\"20\" />,\n });\n }\n return items;\n }, [onAssetChooseClick, onUploadClick, onItemClick]);\n return (\n <button\n ref={buttonRef}\n data-test-id=\"block-inject-button\"\n className={joinClassNames([\n 'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n verticalLayout\n ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n menuPosition && 'tw-bg-blank-state-pressed-inverse',\n isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n isLoading \|\| menuPosition \|\| isDraggingOver \|\| errorMsg\n ? ''\n : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n (isDraggingOver \|\| !!menuPosition) && !errorMsg\n ? '[&>]:tw-pointer-events-none tw-border-blank-state-line-hover'\n : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n ])}\n onDragEnter={\n onDrop\n ? (event) => {\n setIsDraggingOver(true);\n // is now only used for images, can be adapted if needed\n if (validFileType === 'Images') {\n for (const item of Array.from(event.dataTransfer.items)) {\n if (!item?.type?.startsWith('image/')) {\n setErrorMsg('Invalid');\n } else {\n setErrorMsg(undefined);\n }\n }\n }\n }\n : undefined\n }\n onDragLeave={\n onDrop\n ? () => {\n setIsDraggingOver(false);\n setErrorMsg(undefined);\n }\n : undefined\n }\n onDrop={onDrop ? handleDrop : undefined}\n onClick={(event) => {\n if (withMenu && !menuPosition) {\n openMenu(event);\n }\n onClick?.();\n }}\n >\n {isLoading ? (\n <LoadingCircle />\n ) : errorMsg ? (\n <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n <IconExclamationMarkTriangle size=\"16\" />\n {errorMsg}\n </div>\n ) : (\n <>\n {icon && <div>{icon}</div>}\n {(label \|\| secondaryLabel) && (\n <div className=\"tw-flex tw-flex-col tw-items-start\">\n {label && <div className=\"tw-font-medium\">{label}</div>}\n {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n </div>\n )}\n </>\n )}\n {menuPosition && (\n <div\n className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n style={{\n left: menuPosition[0],\n top: menuPosition[1],\n }}\n >\n <Flyout.Root open onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}>\n <Flyout.Trigger>\n <div />\n </Flyout.Trigger>\n <Flyout.Content triggerOffset=\"compact\">\n <Dropdown.Root open>\n <Dropdown.Trigger>\n <div />\n </Dropdown.Trigger>\n <Dropdown.Content triggerOffset=\"compact\">\n {menuItems.map((item) => (\n <Dropdown.Item key={item.title} onSelect={item.onSelect}>\n {item.icon}\n {item.title}\n </Dropdown.Item>\n ))}\n </Dropdown.Content>\n </Dropdown.Root>\n </Flyout.Content>\n </Flyout.Root>\n </div>\n )}\n </button>\n );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","clientX","clientY","isKeyboardEvent","left","top","width","height","XInsideComponent","YInsideComponent","onItemClick","useCallback","callback","menuItems","useMemo","items","jsx","IconArrowCircleUp","IconImageStack","jsxs","joinClassNames","item","_a","LoadingCircle","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","Dropdown"],"mappings":"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"}
1	+ {"version":3,"file":"BlockInjectButton.es.js","sources":["../../../src/components/BlockInjectButton/BlockInjectButton.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { type FileExtension, FileExtensionSets } from '@frontify/app-bridge';\nimport { Dropdown, Flyout, LoadingCircle } from '@frontify/fondue/components';\nimport { IconArrowCircleUp, IconImageStack, IconExclamationMarkTriangle } from '@frontify/fondue/icons';\nimport { type DragEventHandler, type MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';\n\nimport { joinClassNames } from '../../utilities/react/joinClassNames';\n\nimport { type BlockInjectButtonProps } from './types';\n\nexport const BlockInjectButton = ({\n onDrop,\n label,\n icon,\n secondaryLabel,\n isLoading,\n fillParentContainer,\n onAssetChooseClick,\n onUploadClick,\n withMenu = true,\n onClick,\n validFileType,\n verticalLayout,\n}: BlockInjectButtonProps) => {\n const [isDraggingOver, setIsDraggingOver] = useState(false);\n const [menuPosition, setMenuPosition] = useState<[number, number] \| undefined>();\n const buttonRef = useRef<HTMLButtonElement>(null);\n const [errorMsg, setErrorMsg] = useState<string \| undefined>(undefined);\n\n const handleDrop: DragEventHandler<HTMLButtonElement> = (event) => {\n event.preventDefault();\n setIsDraggingOver(false);\n if (!isValidAsset(event.dataTransfer.files)) {\n setErrorMsg('Invalid');\n setTimeout(() => {\n setErrorMsg(undefined);\n }, 1000);\n return;\n }\n onDrop?.(event.dataTransfer.files);\n };\n\n const isValidAsset = (files: FileList) => {\n if (!validFileType) {\n return true;\n }\n for (let i = 0; i < files.length; i++) {\n const droppedFileExtension = (files[i].name.split('.').pop() ?? '') as FileExtension;\n if (!FileExtensionSets[validFileType].includes(droppedFileExtension)) {\n return false;\n }\n }\n return true;\n };\n\n const openMenu: MouseEventHandler<HTMLButtonElement> = (event) => {\n if (!buttonRef.current \|\| isLoading) {\n return;\n }\n const { clientX, clientY } = event;\n const isKeyboardEvent = clientX === 0 && clientY === 0;\n const { left, top, width, height } = buttonRef.current.getBoundingClientRect();\n const XInsideComponent = !isKeyboardEvent ? clientX - left : width / 2;\n const YInsideComponent = !isKeyboardEvent ? clientY - top : height / 2;\n setMenuPosition([XInsideComponent, YInsideComponent]);\n };\n\n const onItemClick = useCallback((callback: () => unknown) => {\n callback();\n setMenuPosition(undefined);\n }, []);\n\n const menuItems = useMemo(() => {\n const items = [];\n if (onUploadClick) {\n items.push({\n onSelect: () => onItemClick(onUploadClick),\n title: 'Upload asset',\n icon: <IconArrowCircleUp size=\"20\" />,\n });\n }\n if (onAssetChooseClick) {\n items.push({\n onSelect: () => onItemClick(onAssetChooseClick),\n title: 'Browse asset',\n icon: <IconImageStack size=\"20\" />,\n });\n }\n return items;\n }, [onAssetChooseClick, onUploadClick, onItemClick]);\n return (\n <button\n ref={buttonRef}\n data-test-id=\"block-inject-button\"\n className={joinClassNames([\n 'tw-font-body tw-relative tw-text-sm tw-leading-4 tw-border tw-flex tw-items-center tw-justify-center tw-cursor-pointer tw-gap-3 tw-w-full first:tw-rounded-tl last:tw-rounded-br',\n verticalLayout\n ? '[&:not(:first-child)]:tw-border-t-0 first:tw-rounded-tr last:tw-rounded-bl'\n : '[&:not(:first-child)]:tw-border-l-0 first:tw-rounded-bl last:tw-rounded-tr',\n fillParentContainer ? 'tw-h-full' : 'tw-h-[72px]',\n isDraggingOver && !isLoading ? 'tw-border-dashed' : 'tw-border-solid',\n menuPosition && 'tw-bg-blank-state-pressed-inverse',\n isDraggingOver && 'tw-bg-blank-state-weak-inverse',\n errorMsg ? '!tw-border-red-50 !tw-cursor-not-allowed' : ' tw-border-blank-state-line',\n isLoading \|\| menuPosition \|\| isDraggingOver \|\| errorMsg\n ? ''\n : 'tw-text-text-weak hover:tw-text-blank-state-hover hover:tw-bg-blank-state-hover-inverse hover:tw-border-blank-state-line-hover active:tw-text-blank-state-pressed active:tw-bg-blank-state-pressed-inverse active:tw-border-blank-state-line-hover',\n (isDraggingOver \|\| !!menuPosition) && !errorMsg\n ? '[&>]:tw-pointer-events-none tw-border-blank-state-line-hover'\n : 'tw-bg-blank-state-shaded-inverse tw-text-blank-state-shaded',\n ])}\n onDragEnter={\n onDrop\n ? (event) => {\n setIsDraggingOver(true);\n // is now only used for images, can be adapted if needed\n if (validFileType === 'Images') {\n for (const item of Array.from(event.dataTransfer.items)) {\n if (!item?.type?.startsWith('image/')) {\n setErrorMsg('Invalid');\n } else {\n setErrorMsg(undefined);\n }\n }\n }\n }\n : undefined\n }\n onDragLeave={\n onDrop\n ? () => {\n setIsDraggingOver(false);\n setErrorMsg(undefined);\n }\n : undefined\n }\n onDrop={onDrop ? handleDrop : undefined}\n onClick={(event) => {\n if (withMenu && !menuPosition) {\n openMenu(event);\n }\n onClick?.();\n }}\n >\n {isLoading ? (\n <LoadingCircle />\n ) : errorMsg ? (\n <div className=\" tw-flex tw-items-center tw-justify-center tw-text-red-60 tw-font-medium\">\n <IconExclamationMarkTriangle size=\"16\" />\n {errorMsg}\n </div>\n ) : (\n <>\n {icon && <div>{icon}</div>}\n {(label \|\| secondaryLabel) && (\n <div className=\"tw-flex tw-flex-col tw-items-start\">\n {label && <div className=\"tw-font-medium\">{label}</div>}\n {secondaryLabel && <div className=\"tw-font-normal\">{secondaryLabel}</div>}\n </div>\n )}\n </>\n )}\n {menuPosition && (\n <div\n className=\"tw-absolute tw-left-0 tw-top-full tw-z-20\"\n style={{\n left: menuPosition[0],\n top: menuPosition[1],\n }}\n >\n <Flyout.Root open onOpenChange={(isOpen) => !isOpen && setMenuPosition(undefined)}>\n <Flyout.Trigger>\n <div />\n </Flyout.Trigger>\n <Flyout.Content triggerOffset=\"compact\">\n <Dropdown.Root open>\n <Dropdown.Trigger>\n <div />\n </Dropdown.Trigger>\n <Dropdown.Content triggerOffset=\"compact\">\n {menuItems.map((item) => (\n <Dropdown.Item key={item.title} onSelect={item.onSelect}>\n {item.icon}\n {item.title}\n </Dropdown.Item>\n ))}\n </Dropdown.Content>\n </Dropdown.Root>\n </Flyout.Content>\n </Flyout.Root>\n </div>\n )}\n </button>\n );\n};\n"],"names":["BlockInjectButton","onDrop","label","icon","secondaryLabel","isLoading","fillParentContainer","onAssetChooseClick","onUploadClick","withMenu","onClick","validFileType","verticalLayout","isDraggingOver","setIsDraggingOver","useState","menuPosition","setMenuPosition","buttonRef","useRef","errorMsg","setErrorMsg","handleDrop","event","isValidAsset","files","i","droppedFileExtension","FileExtensionSets","openMenu","clientX","clientY","isKeyboardEvent","left","top","width","height","XInsideComponent","YInsideComponent","onItemClick","useCallback","callback","menuItems","useMemo","items","jsx","IconArrowCircleUp","IconImageStack","jsxs","joinClassNames","item","LoadingCircle","IconExclamationMarkTriangle","Fragment","Flyout","isOpen","Dropdown"],"mappings":"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"}

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

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

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

package/dist/components/BlockItemWrapper/Toolbar/context/MultiFlyoutContext.es.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import { useContext as l, useMemo as i, createContext as s } from "react";
+import { useMemo as l, useContext as i, createContext as s } from "react";
 const t = s({
   openFlyoutIds: [],
   setOpenFlyoutIds: () => console.error("No MultiFlyoutContext Provider found")
@@ -10,9 +10,9 @@ const C = ({
   openFlyoutIds: o,
   setOpenFlyoutIds: e
 }) => {
-  const u = i(() => ({ openFlyoutIds: o, setOpenFlyoutIds: e }), [o, e]);
+  const u = l(() => ({ openFlyoutIds: o, setOpenFlyoutIds: e }), [o, e]);
   return /* @__PURE__ */ n(t.Provider, { value: u, children: r });
-}, c = () => l(t);
+}, c = () => i(t);
 export {
   C as MultiFlyoutContextProvider,
   c as useMultiFlyoutContext

package/dist/components/Link/LinkInput.es.js CHANGED Viewed

@@ -1,64 +1,64 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { FormControl as h } from "@frontify/fondue";
-import { TextInput as v, Checkbox as D, Label as I } from "@frontify/fondue/components";
-import { isValidUrlOrEmpty as f } from "./utils/url.es.js";
-import { LinkSelector as y } from "./LinkSelector/LinkSelector.es.js";
-const S = ({
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { FormControl as g } from "@frontify/fondue";
+import { TextInput as x, Checkbox as v, Label as D } from "@frontify/fondue/components";
+import { isValidUrlOrEmpty as b } from "./utils/url.es.js";
+import { LinkSelector as I } from "./LinkSelector/LinkSelector.es.js";
+const N = ({
   onUrlChange: i,
-  onToggleTab: c,
-  isValidUrlOrEmpty: o,
-  appBridge: n,
-  placeholder: d,
-  newTab: l,
-  url: m = "",
-  required: r,
-  info: s,
+  onToggleTab: r,
+  isValidUrlOrEmpty: l,
+  appBridge: o,
+  placeholder: s,
+  newTab: a,
+  url: n = "",
+  required: d,
+  info: m,
   label: u,
   buttonSize: p,
-  hideInternalLinkButton: w
+  hideInternalLinkButton: h
 }) => {
-  const x = o ? o(m) : f(m);
-  return /* @__PURE__ */ a("div", { "data-test-id": "link-input", children: [
+  const w = l ? l(n) : b(n);
+  return /* @__PURE__ */ c("div", { "data-test-id": "link-input", children: [
     /* @__PURE__ */ t(
-      h,
+      g,
       {
         label: {
           children: u,
           htmlFor: "url",
-          required: r,
-          tooltip: s ? { content: s, position: "top" } : void 0
+          required: d,
+          tooltip: m ? { content: m, position: "top" } : void 0
         },
         children: /* @__PURE__ */ t(
-          v,
+          x,
           {
             "data-test-id": "text-input",
             id: "url",
-            value: m,
-            onChange: (e) => i == null ? void 0 : i(e.target.value),
-            placeholder: d ?? "https://example.com"
+            value: n,
+            onChange: (e) => i?.(e.target.value),
+            placeholder: s ?? "https://example.com"
           }
         )
       }
     ),
-    !x && /* @__PURE__ */ t("div", { className: "tw-text-text-negative tw-mt-1 tw-text-s", children: "Please enter a valid URL." }),
-    !w && /* @__PURE__ */ t("div", { className: "tw-mt-3", children: /* @__PURE__ */ t(
-      y,
+    !w && /* @__PURE__ */ t("div", { className: "tw-text-text-negative tw-mt-1 tw-text-s", children: "Please enter a valid URL." }),
+    !h && /* @__PURE__ */ t("div", { className: "tw-mt-3", children: /* @__PURE__ */ t(
+      I,
       {
-        url: m,
+        url: n,
         onUrlChange: i,
         buttonSize: p ?? "medium",
-        getAllDocuments: () => n.getAllDocuments(),
-        getDocumentPagesByDocumentId: (e) => n.getDocumentPagesByDocumentId(e),
-        getDocumentSectionsByDocumentPageId: (e) => n.getDocumentSectionsByDocumentPageId(e)
+        getAllDocuments: () => o.getAllDocuments(),
+        getDocumentPagesByDocumentId: (e) => o.getDocumentPagesByDocumentId(e),
+        getDocumentSectionsByDocumentPageId: (e) => o.getDocumentSectionsByDocumentPageId(e)
       }
     ) }),
-    /* @__PURE__ */ a("div", { className: "tw-mt-3 tw-flex tw-items-center tw-gap-1.5", children: [
-      /* @__PURE__ */ t(D, { id: "new-tab", value: l, onChange: () => c == null ? void 0 : c(!l) }),
-      /* @__PURE__ */ t(I, { id: "new-tab-label", htmlFor: "new-tab", className: "tw-whitespace-nowrap", children: "Open in new tab" })
+    /* @__PURE__ */ c("div", { className: "tw-mt-3 tw-flex tw-items-center tw-gap-1.5", children: [
+      /* @__PURE__ */ t(v, { id: "new-tab", value: a, onChange: () => r?.(!a) }),
+      /* @__PURE__ */ t(D, { id: "new-tab-label", htmlFor: "new-tab", className: "tw-whitespace-nowrap", children: "Open in new tab" })
     ] })
   ] });
 };
 export {
-  S as LinkInput
+  N as LinkInput
 };
 //# sourceMappingURL=LinkInput.es.js.map

package/dist/components/Link/LinkInput.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LinkInput.es.js","sources":["../../../src/components/Link/LinkInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type AppBridgeBlock } from '@frontify/app-bridge';\nimport { FormControl } from '@frontify/fondue';\nimport { TextInput, Checkbox, Label } from '@frontify/fondue/components';\n\nimport { LinkSelector } from './LinkSelector';\nimport { isValidUrlOrEmpty as internalIsValidUrlOrEmpty } from './utils';\n\ntype LinkInputProps = {\n url?: string;\n info?: string;\n label?: string;\n required?: boolean;\n newTab?: boolean;\n onUrlChange?: (value: string) => void;\n onToggleTab?: (checked: boolean) => void;\n isValidUrlOrEmpty?: (url: string) => boolean;\n appBridge: AppBridgeBlock;\n placeholder?: string;\n buttonSize?: 'small' \| 'medium' \| 'large';\n hideInternalLinkButton?: boolean;\n};\n\nexport const LinkInput = ({\n onUrlChange,\n onToggleTab,\n isValidUrlOrEmpty,\n appBridge,\n placeholder,\n newTab,\n url = '',\n required,\n info,\n label,\n buttonSize,\n hideInternalLinkButton,\n}: LinkInputProps) => {\n const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);\n return (\n <div data-test-id=\"link-input\">\n <FormControl\n label={{\n children: label,\n htmlFor: 'url',\n required,\n tooltip: info ? { content: info, position: 'top' } : undefined,\n }}\n >\n <TextInput\n data-test-id=\"text-input\"\n id=\"url\"\n value={url}\n onChange={(event) => onUrlChange?.(event.target.value)}\n placeholder={placeholder ?? 'https://example.com'}\n />\n </FormControl>\n {!isUrlValid && <div className=\"tw-text-text-negative tw-mt-1 tw-text-s\">Please enter a valid URL.</div>}\n\n {!hideInternalLinkButton && (\n <div className=\"tw-mt-3\">\n <LinkSelector\n url={url}\n onUrlChange={onUrlChange}\n buttonSize={buttonSize ?? 'medium'}\n getAllDocuments={() => appBridge.getAllDocuments()}\n getDocumentPagesByDocumentId={(documentId) =>\n appBridge.getDocumentPagesByDocumentId(documentId)\n }\n getDocumentSectionsByDocumentPageId={(documentPageId) =>\n appBridge.getDocumentSectionsByDocumentPageId(documentPageId)\n }\n />\n </div>\n )}\n\n <div className=\"tw-mt-3 tw-flex tw-items-center tw-gap-1.5\">\n <Checkbox id=\"new-tab\" value={newTab} onChange={() => onToggleTab?.(!newTab)} />\n <Label id=\"new-tab-label\" htmlFor=\"new-tab\" className=\"tw-whitespace-nowrap\">\n Open in new tab\n </Label>\n </div>\n </div>\n );\n};\n"],"names":["LinkInput","onUrlChange","onToggleTab","isValidUrlOrEmpty","appBridge","placeholder","newTab","url","required","info","label","buttonSize","hideInternalLinkButton","isUrlValid","internalIsValidUrlOrEmpty","jsxs","jsx","FormControl","TextInput","event","LinkSelector","documentId","documentPageId","Checkbox","Label"],"mappings":";;;;;AAwBO,MAAMA,IAAY,CAAC;AAAA,EACtB,aAAAC;AAAA,EACA,aAAAC;AAAA,EAAA,mBACAC;AAAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,wBAAAC;AACJ,MAAsB;AAClB,QAAMC,IAAaV,IAAoBA,EAAkBI,CAAG,IAAIO,EAA0BP,CAAG;AAC7F,SACI,gBAAAQ,EAAC,OAAA,EAAI,gBAAa,cACd,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAUP;AAAA,UACV,SAAS;AAAA,UACT,UAAAF;AAAA,UACA,SAASC,IAAO,EAAE,SAASA,GAAM,UAAU,UAAU;AAAA,QAAA;AAAA,QAGzD,UAAA,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,gBAAa;AAAA,YACb,IAAG;AAAA,YACH,OAAOX;AAAA,YACP,UAAU,CAACY,MAAUlB,~~KAAA~~,~~gBAAAA,EAAckB,~~EAAM,OAAO;AAAA,~~YAChD~~,aAAad,KAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,IAEH,CAACQ,KAAc,gBAAAG,EAAC,OAAA,EAAI,WAAU,2CAA0C,UAAA,6BAAyB;AAAA,IAEjG,CAACJ,KACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,KAAAb;AAAA,QACA,aAAAN;AAAA,QACA,YAAYU,KAAc;AAAA,QAC1B,iBAAiB,MAAMP,EAAU,gBAAA;AAAA,QACjC,8BAA8B,CAACiB,MAC3BjB,EAAU,6BAA6BiB,CAAU;AAAA,QAErD,qCAAqC,CAACC,MAClClB,EAAU,oCAAoCkB,CAAc;AAAA,MAAA;AAAA,IAAA,GAGxE;AAAA,IAGJ,gBAAAP,EAAC,OAAA,EAAI,WAAU,8CACX,UAAA;AAAA,MAAA,gBAAAC,EAACO,GAAA,EAAS,IAAG,WAAU,OAAOjB,GAAQ,UAAU,MAAMJ,~~KAAA~~,~~gBAAAA~~,~~EAAc~~,~~CAACI~~,~~GAAM,~~CAAG;AAAA,MAC9E,gBAAAU,EAACQ,KAAM,IAAG,iBAAgB,SAAQ,WAAU,WAAU,wBAAuB,UAAA,kBAAA,CAE7E;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}
1	+ {"version":3,"file":"LinkInput.es.js","sources":["../../../src/components/Link/LinkInput.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type AppBridgeBlock } from '@frontify/app-bridge';\nimport { FormControl } from '@frontify/fondue';\nimport { TextInput, Checkbox, Label } from '@frontify/fondue/components';\n\nimport { LinkSelector } from './LinkSelector';\nimport { isValidUrlOrEmpty as internalIsValidUrlOrEmpty } from './utils';\n\ntype LinkInputProps = {\n url?: string;\n info?: string;\n label?: string;\n required?: boolean;\n newTab?: boolean;\n onUrlChange?: (value: string) => void;\n onToggleTab?: (checked: boolean) => void;\n isValidUrlOrEmpty?: (url: string) => boolean;\n appBridge: AppBridgeBlock;\n placeholder?: string;\n buttonSize?: 'small' \| 'medium' \| 'large';\n hideInternalLinkButton?: boolean;\n};\n\nexport const LinkInput = ({\n onUrlChange,\n onToggleTab,\n isValidUrlOrEmpty,\n appBridge,\n placeholder,\n newTab,\n url = '',\n required,\n info,\n label,\n buttonSize,\n hideInternalLinkButton,\n}: LinkInputProps) => {\n const isUrlValid = isValidUrlOrEmpty ? isValidUrlOrEmpty(url) : internalIsValidUrlOrEmpty(url);\n return (\n <div data-test-id=\"link-input\">\n <FormControl\n label={{\n children: label,\n htmlFor: 'url',\n required,\n tooltip: info ? { content: info, position: 'top' } : undefined,\n }}\n >\n <TextInput\n data-test-id=\"text-input\"\n id=\"url\"\n value={url}\n onChange={(event) => onUrlChange?.(event.target.value)}\n placeholder={placeholder ?? 'https://example.com'}\n />\n </FormControl>\n {!isUrlValid && <div className=\"tw-text-text-negative tw-mt-1 tw-text-s\">Please enter a valid URL.</div>}\n\n {!hideInternalLinkButton && (\n <div className=\"tw-mt-3\">\n <LinkSelector\n url={url}\n onUrlChange={onUrlChange}\n buttonSize={buttonSize ?? 'medium'}\n getAllDocuments={() => appBridge.getAllDocuments()}\n getDocumentPagesByDocumentId={(documentId) =>\n appBridge.getDocumentPagesByDocumentId(documentId)\n }\n getDocumentSectionsByDocumentPageId={(documentPageId) =>\n appBridge.getDocumentSectionsByDocumentPageId(documentPageId)\n }\n />\n </div>\n )}\n\n <div className=\"tw-mt-3 tw-flex tw-items-center tw-gap-1.5\">\n <Checkbox id=\"new-tab\" value={newTab} onChange={() => onToggleTab?.(!newTab)} />\n <Label id=\"new-tab-label\" htmlFor=\"new-tab\" className=\"tw-whitespace-nowrap\">\n Open in new tab\n </Label>\n </div>\n </div>\n );\n};\n"],"names":["LinkInput","onUrlChange","onToggleTab","isValidUrlOrEmpty","appBridge","placeholder","newTab","url","required","info","label","buttonSize","hideInternalLinkButton","isUrlValid","internalIsValidUrlOrEmpty","jsxs","jsx","FormControl","TextInput","event","LinkSelector","documentId","documentPageId","Checkbox","Label"],"mappings":";;;;;AAwBO,MAAMA,IAAY,CAAC;AAAA,EACtB,aAAAC;AAAA,EACA,aAAAC;AAAA,EAAA,mBACAC;AAAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,QAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,wBAAAC;AACJ,MAAsB;AAClB,QAAMC,IAAaV,IAAoBA,EAAkBI,CAAG,IAAIO,EAA0BP,CAAG;AAC7F,SACI,gBAAAQ,EAAC,OAAA,EAAI,gBAAa,cACd,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAO;AAAA,UACH,UAAUP;AAAA,UACV,SAAS;AAAA,UACT,UAAAF;AAAA,UACA,SAASC,IAAO,EAAE,SAASA,GAAM,UAAU,UAAU;AAAA,QAAA;AAAA,QAGzD,UAAA,gBAAAO;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,gBAAa;AAAA,YACb,IAAG;AAAA,YACH,OAAOX;AAAA,YACP,UAAU,CAACY,MAAUlB,IAAckB,EAAM,OAAO,KAAK;AAAA,YACrD,aAAad,KAAe;AAAA,UAAA;AAAA,QAAA;AAAA,MAChC;AAAA,IAAA;AAAA,IAEH,CAACQ,KAAc,gBAAAG,EAAC,OAAA,EAAI,WAAU,2CAA0C,UAAA,6BAAyB;AAAA,IAEjG,CAACJ,KACE,gBAAAI,EAAC,OAAA,EAAI,WAAU,WACX,UAAA,gBAAAA;AAAA,MAACI;AAAA,MAAA;AAAA,QACG,KAAAb;AAAA,QACA,aAAAN;AAAA,QACA,YAAYU,KAAc;AAAA,QAC1B,iBAAiB,MAAMP,EAAU,gBAAA;AAAA,QACjC,8BAA8B,CAACiB,MAC3BjB,EAAU,6BAA6BiB,CAAU;AAAA,QAErD,qCAAqC,CAACC,MAClClB,EAAU,oCAAoCkB,CAAc;AAAA,MAAA;AAAA,IAAA,GAGxE;AAAA,IAGJ,gBAAAP,EAAC,OAAA,EAAI,WAAU,8CACX,UAAA;AAAA,MAAA,gBAAAC,EAACO,GAAA,EAAS,IAAG,WAAU,OAAOjB,GAAQ,UAAU,MAAMJ,IAAc,CAACI,CAAM,EAAA,CAAG;AAAA,MAC9E,gBAAAU,EAACQ,KAAM,IAAG,iBAAgB,SAAQ,WAAU,WAAU,wBAAuB,UAAA,kBAAA,CAE7E;AAAA,IAAA,EAAA,CACJ;AAAA,EAAA,GACJ;AAER;"}

package/dist/components/Link/LinkSelector/LinkSelector.es.js CHANGED Viewed

@@ -1,28 +1,28 @@
 import { jsx as n, jsxs as i } from "react/jsx-runtime";
-import { Dialog as o, Button as d, ScrollArea as y } from "@frontify/fondue/components";
-import { IconLink as x } from "@frontify/fondue/icons";
-import { useState as m, useEffect as L } from "react";
+import { Dialog as o, Button as a, ScrollArea as P } from "@frontify/fondue/components";
+import { IconLink as y } from "@frontify/fondue/icons";
+import { useState as p, useEffect as x } from "react";
 /* empty css                    */
-import { DocumentLinks as O } from "./DocumentLinks.es.js";
-const j = ({
+import { DocumentLinks as L } from "./DocumentLinks.es.js";
+const I = ({
   url: r,
-  onUrlChange: s,
-  buttonSize: l = "medium",
-  getAllDocuments: f,
-  getDocumentPagesByDocumentId: h,
+  onUrlChange: h,
+  buttonSize: s = "medium",
+  getAllDocuments: m,
+  getDocumentPagesByDocumentId: f,
   getDocumentSectionsByDocumentPageId: u
 }) => {
-  const [k, a] = m(!1), [t, c] = m(r), D = (e) => {
-    c(e);
-  }, P = (e) => {
-    e.key === "Enter" && (e.preventDefault(), p());
+  const [g, l] = p(!1), [t, d] = p(r), k = (e) => {
+    d(e);
+  }, C = (e) => {
+    e.key === "Enter" && (e.preventDefault(), c());
   };
-  L(() => {
-    r && !t && c(r);
+  x(() => {
+    r && !t && d(r);
   }, [r, t]);
-  const p = () => {
-    s == null || s(t), a(!1);
-  }, g = {
+  const c = () => {
+    h?.(t), l(!1);
+  }, D = {
     onOpenAutoFocus: () => {
     },
     showUnderlay: !0,
@@ -41,27 +41,27 @@ const j = ({
           e.stopPropagation(), e.preventDefault();
         },
         "data-test-id": "internal-link-selector",
-        onKeyDown: P,
-        children: /* @__PURE__ */ i(o.Root, { modal: !0, open: k, onOpenChange: a, children: [
-          /* @__PURE__ */ n(o.Trigger, { asChild: !0, children: /* @__PURE__ */ i(d, { size: l, emphasis: "default", children: [
-            /* @__PURE__ */ n(x, { size: "20" }),
+        onKeyDown: C,
+        children: /* @__PURE__ */ i(o.Root, { modal: !0, open: g, onOpenChange: l, children: [
+          /* @__PURE__ */ n(o.Trigger, { asChild: !0, children: /* @__PURE__ */ i(a, { size: s, emphasis: "default", children: [
+            /* @__PURE__ */ n(y, { size: "20" }),
             "Internal link"
           ] }) }),
-          /* @__PURE__ */ i(o.Content, { ...g, children: [
+          /* @__PURE__ */ i(o.Content, { ...D, children: [
             /* @__PURE__ */ n(o.Header, { children: /* @__PURE__ */ n(o.Title, { children: "Select internal link" }) }),
-            /* @__PURE__ */ n(o.Body, { padding: "none", children: /* @__PURE__ */ n(y, { padding: "compact", children: /* @__PURE__ */ n(
-              O,
+            /* @__PURE__ */ n(o.Body, { padding: "none", children: /* @__PURE__ */ n(P, { padding: "compact", children: /* @__PURE__ */ n(
+              L,
               {
                 selectedUrl: t,
-                onSelectUrl: D,
-                getAllDocuments: f,
-                getDocumentPagesByDocumentId: h,
+                onSelectUrl: k,
+                getAllDocuments: m,
+                getDocumentPagesByDocumentId: f,
                 getDocumentSectionsByDocumentPageId: u
               }
             ) }) }),
             /* @__PURE__ */ i(o.Footer, { children: [
-              /* @__PURE__ */ n(d, { size: l, emphasis: "default", onPress: () => a(!1), children: "Cancel" }),
-              /* @__PURE__ */ n(d, { size: l, disabled: !t, emphasis: "strong", onPress: () => p(), children: "Choose" })
+              /* @__PURE__ */ n(a, { size: s, emphasis: "default", onPress: () => l(!1), children: "Cancel" }),
+              /* @__PURE__ */ n(a, { size: s, disabled: !t, emphasis: "strong", onPress: () => c(), children: "Choose" })
             ] })
           ] })
         ] })
@@ -70,6 +70,6 @@ const j = ({
   );
 };
 export {
-  j as LinkSelector
+  I as LinkSelector
 };
 //# sourceMappingURL=LinkSelector.es.js.map