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

@frontify/guideline-blocks-settings 0.28.2 → 0.28.4

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

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,22 @@
 # @frontify/guideline-blocks-settings
+## 0.28.4
+### Patch Changes
+- [#503](https://github.com/Frontify/brand-sdk/pull/503) [`c56e7e9`](https://github.com/Frontify/brand-sdk/commit/c56e7e9112e04ae0e9ae35e4b7a98c11665045f2) Thanks [@fulopdaniel](https://github.com/fulopdaniel)! - feat(RTE): add dir to serializer
+- [`22684e3`](https://github.com/Frontify/brand-sdk/commit/22684e358fd2b073790a0959606c6a5d44e35c4e) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Update dependencies
+- Updated dependencies [[`22684e3`](https://github.com/Frontify/brand-sdk/commit/22684e358fd2b073790a0959606c6a5d44e35c4e)]:
+  - @frontify/sidebar-settings@0.6.2
+## 0.28.3
+### Patch Changes
+- [`07624cb`](https://github.com/Frontify/brand-sdk/commit/07624cb8fba8d9ede4e5ea5db43780658f69f0ba) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Fix react being bundled into the package
 ## 0.28.2
 ### Patch Changes

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

@@ -1,11 +1,11 @@
-import { j as t } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { forwardRef as E, useState as U, useEffect as v } from "react";
-import { useFileInput as L, useAssetUpload as M } from "@frontify/app-bridge";
-import { useSortable as P } from "@dnd-kit/sortable";
-import { useFocusRing as V } from "@react-aria/focus";
-import { LoadingCircle as B, LoadingCircleSize as O, FOCUS_STYLE as $, IconGrabHandle20 as T, Flyout as X, FlyoutPlacement as G, Button as H, IconPen20 as _, ButtonEmphasis as Y, ActionMenu as q, MenuItemContentSize as f, IconArrowCircleUp20 as J, IconImageStack20 as K, MenuItemStyle as Q, IconTrashBin20 as W, IconImage24 as Z, IconPlayFrame24 as tt, IconMusicNote24 as et, IconDocument24 as ot } from "@frontify/fondue";
-import { joinClassNames as h } from "../../utilities/react/joinClassNames.es.js";
-const at = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Z, {}) : e === "VIDEO" ? /* @__PURE__ */ t.jsx(tt, {}) : e === "AUDIO" ? /* @__PURE__ */ t.jsx(et, {}) : /* @__PURE__ */ t.jsx(ot, {}), I = E(
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
+import { forwardRef as E, useState as L, useEffect as y } from "react";
+import { useFileInput as M, useAssetUpload as P } from "@frontify/app-bridge";
+import { useSortable as V } from "@dnd-kit/sortable";
+import { useFocusRing as B } from "@react-aria/focus";
+import { LoadingCircle as O, LoadingCircleSize as $, FOCUS_STYLE as T, IconGrabHandle20 as X, Flyout as G, FlyoutPlacement as H, Button as _, IconPen20 as Y, ButtonEmphasis as q, ActionMenu as J, MenuItemContentSize as g, IconArrowCircleUp20 as K, IconImageStack20 as Q, MenuItemStyle as W, IconTrashBin20 as Z, IconImage24 as tt, IconPlayFrame24 as et, IconMusicNote24 as ot, IconDocument24 as at } from "@frontify/fondue";
+import { joinClassNames as v } from "../../utilities/react/joinClassNames.es.js";
+const rt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(tt, {}) : e === "VIDEO" ? /* @__PURE__ */ t(et, {}) : e === "AUDIO" ? /* @__PURE__ */ t(ot, {}) : /* @__PURE__ */ t(at, {}), k = E(
   ({
     item: e,
     isEditing: c,
@@ -13,90 +13,90 @@ const at = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Z, {}) : e === "VIDEO" ?
     transformStyle: u,
     isDragging: o,
     isOverlay: r,
-    isLoading: s,
+    isLoading: i,
     onDelete: w,
     onReplaceWithBrowse: m,
-    onReplaceWithUpload: y
-  }, k) => {
-    const [a, n] = U(), [S, { selectedFiles: i }] = L({ multiple: !0, accept: "image/*" }), [N, { results: g, doneAll: x }] = M(), { focusProps: C, isFocusVisible: j } = V();
-    v(() => {
-      i && N(i[0]);
-    }, [i]), v(() => {
-      x && y(g[0]);
-    }, [x, g]);
-    const F = (l, p) => {
-      fetch(l).then((z) => {
-        z.blob().then((D) => {
-          const A = URL.createObjectURL(D), b = document.createElement("a");
-          b.href = A, b.download = p, b.click();
+    onReplaceWithUpload: S
+  }, N) => {
+    const [a, n] = L(), [C, { selectedFiles: l }] = M({ multiple: !0, accept: "image/*" }), [F, { results: x, doneAll: p }] = P(), { focusProps: R, isFocusVisible: I } = B();
+    y(() => {
+      l && F(l[0]);
+    }, [l]), y(() => {
+      p && S(x[0]);
+    }, [p, x]);
+    const z = (s, b) => {
+      fetch(s).then((A) => {
+        A.blob().then((U) => {
+          const j = URL.createObjectURL(U), f = document.createElement("a");
+          f.href = j, f.download = b, f.click();
         });
       });
-    }, R = s || i && !x;
-    return /* @__PURE__ */ t.jsxs(
+    }, D = i || l && !p;
+    return /* @__PURE__ */ h(
       "button",
       {
         "aria-label": "Download attachment",
         "data-test-id": "attachments-item",
-        onClick: () => F(e.genericUrl, e.fileName),
-        ref: k,
+        onClick: () => z(e.genericUrl, e.fileName),
+        ref: N,
         style: {
           ...u,
           opacity: o && !r ? 0.3 : 1,
           fontFamily: "var(-f-theme-settings-body-font-family)"
         },
-        className: h([
+        className: v([
           "tw-cursor-pointer tw-text-left tw-w-full tw-relative tw-flex tw-gap-3 tw-px-5 tw-py-3 tw-items-center tw-group hover:tw-bg-box-neutral-hover",
           o ? "tw-bg-box-neutral-hover" : ""
         ]),
         children: [
-          /* @__PURE__ */ t.jsx("div", { className: "tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: R ? /* @__PURE__ */ t.jsx(B, { size: O.Small }) : at(e.objectType) }),
-          /* @__PURE__ */ t.jsxs("div", { className: "tw-text-s tw-flex-1 tw-min-w-0", children: [
-            /* @__PURE__ */ t.jsx("div", { className: "tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: e.title }),
-            /* @__PURE__ */ t.jsx("div", { className: "tw-text-text-weak", children: `${e.fileSizeHumanReadable} - ${e.extension}` })
+          /* @__PURE__ */ t("div", { className: "tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: D ? /* @__PURE__ */ t(O, { size: $.Small }) : rt(e.objectType) }),
+          /* @__PURE__ */ h("div", { className: "tw-text-s tw-flex-1 tw-min-w-0", children: [
+            /* @__PURE__ */ t("div", { className: "tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: e.title }),
+            /* @__PURE__ */ t("div", { className: "tw-text-text-weak", children: `${e.fileSizeHumanReadable} - ${e.extension}` })
           ] }),
-          c && /* @__PURE__ */ t.jsxs(
+          c && /* @__PURE__ */ h(
             "div",
             {
               "data-test-id": "attachments-actionbar",
-              className: h([
+              className: v([
                 "tw-flex tw-gap-0.5 group-focus:tw-opacity-100 focus-visible:tw-opacity-100 focus-within:tw-opacity-100 group-hover:tw-opacity-100",
                 r || (a == null ? void 0 : a.id) === e.id ? "tw-opacity-100" : "tw-opacity-0"
               ]),
               children: [
-                /* @__PURE__ */ t.jsx(
+                /* @__PURE__ */ t(
                   "button",
                   {
-                    ...C,
+                    ...R,
                     ...d,
                     "aria-label": "Drag attachment",
-                    className: h([
+                    className: v([
                       " tw-border-button-border tw-bg-button-background active:tw-bg-button-background-pressed tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-outline-none tw-font-medium tw-rounded tw-h-9 tw-w-9 ",
                       o || r ? "tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed" : "tw-cursor-grab hover:tw-bg-button-background-hover",
-                      j && $,
-                      j && "tw-z-[2]"
+                      I && T,
+                      I && "tw-z-[2]"
                     ]),
-                    children: /* @__PURE__ */ t.jsx(T, {})
+                    children: /* @__PURE__ */ t(X, {})
                   }
                 ),
-                /* @__PURE__ */ t.jsx("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ t.jsx(
-                  X,
+                /* @__PURE__ */ t("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ t(
+                  G,
                   {
-                    placement: G.Right,
+                    placement: H.Right,
                     isOpen: (a == null ? void 0 : a.id) === e.id,
                     fitContent: !0,
                     legacyFooter: !1,
-                    onOpenChange: (l) => n(l ? e : void 0),
-                    trigger: (l, p) => /* @__PURE__ */ t.jsx(
-                      H,
+                    onOpenChange: (s) => n(s ? e : void 0),
+                    trigger: (s, b) => /* @__PURE__ */ t(
+                      _,
                       {
-                        ref: p,
-                        icon: /* @__PURE__ */ t.jsx(_, {}),
-                        emphasis: Y.Default,
+                        ref: b,
+                        icon: /* @__PURE__ */ t(Y, {}),
+                        emphasis: q.Default,
                         onClick: () => n(e)
                       }
                     ),
-                    children: /* @__PURE__ */ t.jsx(
-                      q,
+                    children: /* @__PURE__ */ t(
+                      J,
                       {
                         menuBlocks: [
                           {
@@ -104,23 +104,23 @@ const at = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Z, {}) : e === "VIDEO" ?
                             menuItems: [
                               {
                                 id: "upload",
-                                size: f.XSmall,
+                                size: g.XSmall,
                                 title: "Replace with upload",
                                 onClick: () => {
-                                  S(), n(void 0);
+                                  C(), n(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(J, {}) })
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(K, {}) })
                               },
                               {
                                 id: "asset",
-                                size: f.XSmall,
+                                size: g.XSmall,
                                 title: "Replace with asset",
                                 onClick: () => {
                                   m(), n(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(K, {}) })
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(Q, {}) })
                               }
                             ]
                           },
@@ -129,14 +129,14 @@ const at = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Z, {}) : e === "VIDEO" ?
                             menuItems: [
                               {
                                 id: "delete",
-                                size: f.XSmall,
+                                size: g.XSmall,
                                 title: "Delete",
-                                style: Q.Danger,
+                                style: W.Danger,
                                 onClick: () => {
                                   w(), n(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(W, {}) })
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(Z, {}) })
                               }
                             ]
                           }
@@ -153,20 +153,20 @@ const at = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Z, {}) : e === "VIDEO" ?
     );
   }
 );
-I.displayName = "AttachmentItem";
-const ut = (e) => {
-  const { attributes: c, listeners: d, setNodeRef: u, transform: o, transition: r, isDragging: s } = P({
+k.displayName = "AttachmentItem";
+const wt = (e) => {
+  const { attributes: c, listeners: d, setNodeRef: u, transform: o, transition: r, isDragging: i } = V({
     id: e.item.id
   }), w = {
     transform: o ? `translate(${o.x}px, ${o.y}px)` : "",
     transition: r,
-    zIndex: s ? 2 : 1
+    zIndex: i ? 2 : 1
   }, m = { ...c, ...d };
-  return /* @__PURE__ */ t.jsx(
-    I,
+  return /* @__PURE__ */ t(
+    k,
     {
       ref: u,
-      isDragging: s,
+      isDragging: i,
       transformStyle: w,
       draggableProps: m,
       ...e
@@ -174,7 +174,7 @@ const ut = (e) => {
   );
 };
 export {
-  I as AttachmentItem,
-  ut as SortableAttachmentItem
+  k as AttachmentItem,
+  wt as SortableAttachmentItem
 };
 //# sourceMappingURL=AttachmentItem.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AttachmentItem.es.js","sources":["../../../src/components/Attachments/AttachmentItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { MutableRefObject, forwardRef, useEffect, useState } from 'react';\nimport { Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport {\n ActionMenu,\n Button,\n ButtonEmphasis,\n FOCUS_STYLE,\n Flyout,\n FlyoutPlacement,\n IconArrowCircleUp20,\n IconDocument24,\n IconGrabHandle20,\n IconImage24,\n IconImageStack20,\n IconMusicNote24,\n IconPen20,\n IconPlayFrame24,\n IconTrashBin20,\n LoadingCircle,\n LoadingCircleSize,\n MenuItemContentSize,\n MenuItemStyle,\n} from '@frontify/fondue';\nimport { AttachmentItemProps, SortableAttachmentItemProps } from './types';\nimport { joinClassNames } from '../../utilities';\n\nconst getDecorator = (type: string) => {\n if (type === 'IMAGE') {\n return <IconImage24 />;\n } else if (type === 'VIDEO') {\n return <IconPlayFrame24 />;\n } else if (type === 'AUDIO') {\n return <IconMusicNote24 />;\n } else {\n return <IconDocument24 />;\n }\n};\n\nexport const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>(\n (\n {\n item,\n isEditing,\n draggableProps,\n transformStyle,\n isDragging,\n isOverlay,\n isLoading,\n onDelete,\n onReplaceWithBrowse,\n onReplaceWithUpload,\n },\n ref,\n ) => {\n const [selectedAsset, setSelectedAsset] = useState<Asset \| undefined>();\n const [openFileDialog, { selectedFiles }] = useFileInput({ multiple: true, accept: 'image/' });\n const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload();\n const { focusProps, isFocusVisible } = useFocusRing();\n\n useEffect(() => {\n if (selectedFiles) {\n uploadFile(selectedFiles[0]);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedFiles]);\n\n useEffect(() => {\n if (doneAll) {\n onReplaceWithUpload(uploadResults[0]);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [doneAll, uploadResults]);\n\n const download = (url: string, filename: string) => {\n fetch(url).then((response) => {\n response.blob().then((blob) => {\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = filename;\n a.click();\n });\n });\n };\n\n const showLoadingCircle = isLoading \|\| (selectedFiles && !doneAll);\n\n return (\n <button\n aria-label=\"Download attachment\"\n data-test-id=\"attachments-item\"\n onClick={() => download(item.genericUrl, item.fileName)}\n ref={ref}\n style={{\n ...transformStyle,\n opacity: isDragging && !isOverlay ? 0.3 : 1,\n fontFamily: 'var(-f-theme-settings-body-font-family)',\n }}\n className={joinClassNames([\n 'tw-cursor-pointer tw-text-left tw-w-full tw-relative tw-flex tw-gap-3 tw-px-5 tw-py-3 tw-items-center tw-group hover:tw-bg-box-neutral-hover',\n isDragging ? 'tw-bg-box-neutral-hover' : '',\n ])}\n >\n <div className=\"tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover\">\n {showLoadingCircle ? (\n <LoadingCircle size={LoadingCircleSize.Small} />\n ) : (\n getDecorator(item.objectType)\n )}\n </div>\n <div className=\"tw-text-s tw-flex-1 tw-min-w-0\">\n <div className=\"tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover\">\n {item.title}\n </div>\n <div className=\"tw-text-text-weak\">{`${item.fileSizeHumanReadable} - ${item.extension}`}</div>\n </div>\n {isEditing && (\n <div\n data-test-id=\"attachments-actionbar\"\n className={joinClassNames([\n 'tw-flex tw-gap-0.5 group-focus:tw-opacity-100 focus-visible:tw-opacity-100 focus-within:tw-opacity-100 group-hover:tw-opacity-100',\n isOverlay \|\| selectedAsset?.id === item.id ? 'tw-opacity-100' : 'tw-opacity-0',\n ])}\n >\n <button\n {...focusProps}\n {...draggableProps}\n aria-label=\"Drag attachment\"\n className={joinClassNames([\n ' tw-border-button-border tw-bg-button-background active:tw-bg-button-background-pressed tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-outline-none tw-font-medium tw-rounded tw-h-9 tw-w-9 ',\n isDragging \|\| isOverlay\n ? 'tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed'\n : 'tw-cursor-grab hover:tw-bg-button-background-hover',\n isFocusVisible && FOCUS_STYLE,\n isFocusVisible && 'tw-z-[2]',\n ])}\n >\n <IconGrabHandle20 />\n </button>\n <div data-test-id=\"attachments-actionbar-flyout\">\n <Flyout\n placement={FlyoutPlacement.Right}\n isOpen={selectedAsset?.id === item.id}\n fitContent\n legacyFooter={false}\n onOpenChange={(isOpen) => setSelectedAsset(isOpen ? item : undefined)}\n trigger={(_, ref) => (\n <Button\n ref={ref as MutableRefObject<HTMLButtonElement>}\n icon={<IconPen20 />}\n emphasis={ButtonEmphasis.Default}\n onClick={() => setSelectedAsset(item)}\n />\n )}\n >\n <ActionMenu\n menuBlocks={[\n {\n id: 'menu',\n menuItems: [\n {\n id: 'upload',\n size: MenuItemContentSize.XSmall,\n title: 'Replace with upload',\n onClick: () => {\n openFileDialog();\n setSelectedAsset(undefined);\n },\n\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconArrowCircleUp20 />\n </div>\n ),\n },\n\n {\n id: 'asset',\n size: MenuItemContentSize.XSmall,\n title: 'Replace with asset',\n onClick: () => {\n onReplaceWithBrowse();\n setSelectedAsset(undefined);\n },\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconImageStack20 />\n </div>\n ),\n },\n ],\n },\n {\n id: 'menu-delete',\n menuItems: [\n {\n id: 'delete',\n size: MenuItemContentSize.XSmall,\n title: 'Delete',\n style: MenuItemStyle.Danger,\n onClick: () => {\n onDelete();\n setSelectedAsset(undefined);\n },\n\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconTrashBin20 />\n </div>\n ),\n },\n ],\n },\n ]}\n />\n </Flyout>\n </div>\n </div>\n )}\n </button>\n );\n },\n);\n\nAttachmentItem.displayName = 'AttachmentItem';\n\nexport const SortableAttachmentItem = (props: SortableAttachmentItemProps) => {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: props.item.id,\n });\n\n const transformStyle = {\n transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : '',\n transition,\n zIndex: isDragging ? 2 : 1,\n };\n\n const draggableProps = { ...attributes, ...listeners };\n\n return (\n <AttachmentItem\n ref={setNodeRef}\n isDragging={isDragging}\n transformStyle={transformStyle}\n draggableProps={draggableProps}\n {...props}\n />\n );\n};\n"],"names":["getDecorator","type","IconImage24","IconPlayFrame24","IconMusicNote24","IconDocument24","AttachmentItem","forwardRef","item","isEditing","draggableProps","transformStyle","isDragging","isOverlay","isLoading","onDelete","onReplaceWithBrowse","onReplaceWithUpload","ref","selectedAsset","setSelectedAsset","useState","openFileDialog","selectedFiles","useFileInput","uploadFile","uploadResults","doneAll","useAssetUpload","focusProps","isFocusVisible","useFocusRing","useEffect","download","url","filename","response","blob","a","showLoadingCircle","jsxs","joinClassNames","jsx","LoadingCircle","LoadingCircleSize","FOCUS_STYLE","IconGrabHandle20","Flyout","FlyoutPlacement","isOpen","_","Button","IconPen20","ButtonEmphasis","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20","MenuItemStyle","IconTrashBin20","SortableAttachmentItem","props","attributes","listeners","setNodeRef","transform","transition","useSortable"],"mappings":"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"}
1	+ {"version":3,"file":"AttachmentItem.es.js","sources":["../../../src/components/Attachments/AttachmentItem.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. /\n\nimport { MutableRefObject, forwardRef, useEffect, useState } from 'react';\nimport { Asset, useAssetUpload, useFileInput } from '@frontify/app-bridge';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { useFocusRing } from '@react-aria/focus';\n\nimport {\n ActionMenu,\n Button,\n ButtonEmphasis,\n FOCUS_STYLE,\n Flyout,\n FlyoutPlacement,\n IconArrowCircleUp20,\n IconDocument24,\n IconGrabHandle20,\n IconImage24,\n IconImageStack20,\n IconMusicNote24,\n IconPen20,\n IconPlayFrame24,\n IconTrashBin20,\n LoadingCircle,\n LoadingCircleSize,\n MenuItemContentSize,\n MenuItemStyle,\n} from '@frontify/fondue';\nimport { AttachmentItemProps, SortableAttachmentItemProps } from './types';\nimport { joinClassNames } from '../../utilities';\n\nconst getDecorator = (type: string) => {\n if (type === 'IMAGE') {\n return <IconImage24 />;\n } else if (type === 'VIDEO') {\n return <IconPlayFrame24 />;\n } else if (type === 'AUDIO') {\n return <IconMusicNote24 />;\n } else {\n return <IconDocument24 />;\n }\n};\n\nexport const AttachmentItem = forwardRef<HTMLButtonElement, AttachmentItemProps>(\n (\n {\n item,\n isEditing,\n draggableProps,\n transformStyle,\n isDragging,\n isOverlay,\n isLoading,\n onDelete,\n onReplaceWithBrowse,\n onReplaceWithUpload,\n },\n ref,\n ) => {\n const [selectedAsset, setSelectedAsset] = useState<Asset \| undefined>();\n const [openFileDialog, { selectedFiles }] = useFileInput({ multiple: true, accept: 'image/' });\n const [uploadFile, { results: uploadResults, doneAll }] = useAssetUpload();\n const { focusProps, isFocusVisible } = useFocusRing();\n\n useEffect(() => {\n if (selectedFiles) {\n uploadFile(selectedFiles[0]);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedFiles]);\n\n useEffect(() => {\n if (doneAll) {\n onReplaceWithUpload(uploadResults[0]);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [doneAll, uploadResults]);\n\n const download = (url: string, filename: string) => {\n fetch(url).then((response) => {\n response.blob().then((blob) => {\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = filename;\n a.click();\n });\n });\n };\n\n const showLoadingCircle = isLoading \|\| (selectedFiles && !doneAll);\n\n return (\n <button\n aria-label=\"Download attachment\"\n data-test-id=\"attachments-item\"\n onClick={() => download(item.genericUrl, item.fileName)}\n ref={ref}\n style={{\n ...transformStyle,\n opacity: isDragging && !isOverlay ? 0.3 : 1,\n fontFamily: 'var(-f-theme-settings-body-font-family)',\n }}\n className={joinClassNames([\n 'tw-cursor-pointer tw-text-left tw-w-full tw-relative tw-flex tw-gap-3 tw-px-5 tw-py-3 tw-items-center tw-group hover:tw-bg-box-neutral-hover',\n isDragging ? 'tw-bg-box-neutral-hover' : '',\n ])}\n >\n <div className=\"tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover\">\n {showLoadingCircle ? (\n <LoadingCircle size={LoadingCircleSize.Small} />\n ) : (\n getDecorator(item.objectType)\n )}\n </div>\n <div className=\"tw-text-s tw-flex-1 tw-min-w-0\">\n <div className=\"tw-whitespace-nowrap tw-overflow-hidden tw-text-ellipsis tw-font-bold tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover\">\n {item.title}\n </div>\n <div className=\"tw-text-text-weak\">{`${item.fileSizeHumanReadable} - ${item.extension}`}</div>\n </div>\n {isEditing && (\n <div\n data-test-id=\"attachments-actionbar\"\n className={joinClassNames([\n 'tw-flex tw-gap-0.5 group-focus:tw-opacity-100 focus-visible:tw-opacity-100 focus-within:tw-opacity-100 group-hover:tw-opacity-100',\n isOverlay \|\| selectedAsset?.id === item.id ? 'tw-opacity-100' : 'tw-opacity-0',\n ])}\n >\n <button\n {...focusProps}\n {...draggableProps}\n aria-label=\"Drag attachment\"\n className={joinClassNames([\n ' tw-border-button-border tw-bg-button-background active:tw-bg-button-background-pressed tw-group tw-border tw-box-box tw-relative tw-flex tw-items-center tw-justify-center tw-outline-none tw-font-medium tw-rounded tw-h-9 tw-w-9 ',\n isDragging \|\| isOverlay\n ? 'tw-cursor-grabbing tw-bg-button-background-pressed hover:tw-bg-button-background-pressed'\n : 'tw-cursor-grab hover:tw-bg-button-background-hover',\n isFocusVisible && FOCUS_STYLE,\n isFocusVisible && 'tw-z-[2]',\n ])}\n >\n <IconGrabHandle20 />\n </button>\n <div data-test-id=\"attachments-actionbar-flyout\">\n <Flyout\n placement={FlyoutPlacement.Right}\n isOpen={selectedAsset?.id === item.id}\n fitContent\n legacyFooter={false}\n onOpenChange={(isOpen) => setSelectedAsset(isOpen ? item : undefined)}\n trigger={(_, ref) => (\n <Button\n ref={ref as MutableRefObject<HTMLButtonElement>}\n icon={<IconPen20 />}\n emphasis={ButtonEmphasis.Default}\n onClick={() => setSelectedAsset(item)}\n />\n )}\n >\n <ActionMenu\n menuBlocks={[\n {\n id: 'menu',\n menuItems: [\n {\n id: 'upload',\n size: MenuItemContentSize.XSmall,\n title: 'Replace with upload',\n onClick: () => {\n openFileDialog();\n setSelectedAsset(undefined);\n },\n\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconArrowCircleUp20 />\n </div>\n ),\n },\n\n {\n id: 'asset',\n size: MenuItemContentSize.XSmall,\n title: 'Replace with asset',\n onClick: () => {\n onReplaceWithBrowse();\n setSelectedAsset(undefined);\n },\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconImageStack20 />\n </div>\n ),\n },\n ],\n },\n {\n id: 'menu-delete',\n menuItems: [\n {\n id: 'delete',\n size: MenuItemContentSize.XSmall,\n title: 'Delete',\n style: MenuItemStyle.Danger,\n onClick: () => {\n onDelete();\n setSelectedAsset(undefined);\n },\n\n initialValue: true,\n decorator: (\n <div className=\"tw-mr-2\">\n <IconTrashBin20 />\n </div>\n ),\n },\n ],\n },\n ]}\n />\n </Flyout>\n </div>\n </div>\n )}\n </button>\n );\n },\n);\n\nAttachmentItem.displayName = 'AttachmentItem';\n\nexport const SortableAttachmentItem = (props: SortableAttachmentItemProps) => {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: props.item.id,\n });\n\n const transformStyle = {\n transform: transform ? `translate(${transform.x}px, ${transform.y}px)` : '',\n transition,\n zIndex: isDragging ? 2 : 1,\n };\n\n const draggableProps = { ...attributes, ...listeners };\n\n return (\n <AttachmentItem\n ref={setNodeRef}\n isDragging={isDragging}\n transformStyle={transformStyle}\n draggableProps={draggableProps}\n {...props}\n />\n );\n};\n"],"names":["getDecorator","type","IconImage24","IconPlayFrame24","IconMusicNote24","IconDocument24","AttachmentItem","forwardRef","item","isEditing","draggableProps","transformStyle","isDragging","isOverlay","isLoading","onDelete","onReplaceWithBrowse","onReplaceWithUpload","ref","selectedAsset","setSelectedAsset","useState","openFileDialog","selectedFiles","useFileInput","uploadFile","uploadResults","doneAll","useAssetUpload","focusProps","isFocusVisible","useFocusRing","useEffect","download","url","filename","response","blob","a","showLoadingCircle","jsxs","joinClassNames","jsx","LoadingCircle","LoadingCircleSize","FOCUS_STYLE","IconGrabHandle20","Flyout","FlyoutPlacement","isOpen","_","Button","IconPen20","ButtonEmphasis","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20","MenuItemStyle","IconTrashBin20","SortableAttachmentItem","props","attributes","listeners","setNodeRef","transform","transition","useSortable"],"mappings":"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"}

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

@@ -1,135 +1,135 @@
-import { j as e } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { useState as r, useEffect as m } from "react";
-import { useSensors as M, useSensor as E, PointerSensor as q, KeyboardSensor as B, DndContext as G, closestCenter as H, DragOverlay as J } from "@dnd-kit/core";
-import { SortableContext as Q, rectSortingStrategy as X, arrayMove as Y } from "@dnd-kit/sortable";
-import { useEditorState as Z, useAssetUpload as _ } from "@frontify/app-bridge";
-import { Tooltip as $, TooltipPosition as tt, Flyout as et, FlyoutPlacement as st, IconPaperclip16 as ot, IconCaretDown12 as nt, AssetInput as it, AssetInputSize as rt } from "@frontify/fondue";
-import { SortableAttachmentItem as lt, AttachmentItem as dt } from "./AttachmentItem.es.js";
-import { restrictToWindowEdges as at } from "@dnd-kit/modifiers";
-const ft = ({
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import { useState as r, useEffect as f } from "react";
+import { useSensors as q, useSensor as E, PointerSensor as B, KeyboardSensor as G, DndContext as H, closestCenter as J, DragOverlay as Q } from "@dnd-kit/core";
+import { SortableContext as X, rectSortingStrategy as Y, arrayMove as Z } from "@dnd-kit/sortable";
+import { useEditorState as _, useAssetUpload as $ } from "@frontify/app-bridge";
+import { Tooltip as tt, TooltipPosition as et, Flyout as ot, FlyoutPlacement as st, IconPaperclip16 as nt, IconCaretDown12 as it, AssetInput as rt, AssetInputSize as lt } from "@frontify/fondue";
+import { SortableAttachmentItem as dt, AttachmentItem as at } from "./AttachmentItem.es.js";
+import { restrictToWindowEdges as ct } from "@dnd-kit/modifiers";
+const vt = ({
   items: l = [],
-  onDelete: w,
-  onReplaceWithBrowse: F,
-  onReplaceWithUpload: U,
-  onBrowse: L,
-  onUpload: O,
-  onSorted: W,
+  onDelete: x,
+  onReplaceWithBrowse: L,
+  onReplaceWithUpload: O,
+  onBrowse: W,
+  onUpload: N,
+  onSorted: P,
   appBridge: d
 }) => {
-  const [s, f] = r(l), [v, a] = r(!1), N = M(E(q), E(B)), [y, I] = r(void 0), [b, g] = r(!1), [c, u] = r([]), [x, P] = r(null), p = Z(d), i = s == null ? void 0 : s.find((t) => t.id === y), [R, { results: j, doneAll: A }] = _({
-    onUploadProgress: () => !b && g(!0)
+  const [e, v] = r(l), [y, a] = r(!1), R = q(E(B), E(G)), [I, b] = r(void 0), [A, h] = r(!1), [c, u] = r([]), [m, T] = r(null), p = _(d), i = e == null ? void 0 : e.find((t) => t.id === I), [j, { results: S, doneAll: D }] = $({
+    onUploadProgress: () => !A && h(!0)
   });
-  m(() => {
-    f(l);
-  }, [l]), m(() => {
-    x && (g(!0), R(x));
-  }, [x]), m(() => {
+  f(() => {
+    v(l);
+  }, [l]), f(() => {
+    m && (h(!0), j(m));
+  }, [m]), f(() => {
     (async () => {
-      A && (await O(j), g(!1));
+      D && (await N(S), h(!1));
     })();
-  }, [A, j]);
-  const T = () => {
+  }, [D, S]);
+  const k = () => {
     a(!1), d.openAssetChooser(
       (t) => {
-        L(t), d.closeAssetChooser(), a(!0);
+        W(t), d.closeAssetChooser(), a(!0);
       },
       {
         multiSelection: !0,
-        selectedValueIds: s.map((t) => t.id)
+        selectedValueIds: e.map((t) => t.id)
       }
     );
-  }, S = (t) => {
+  }, C = (t) => {
     a(!1), d.openAssetChooser(
-      async (o) => {
-        a(!0), d.closeAssetChooser(), u([...c, t.id]), await F(t, o[0]), u(c.filter((n) => n !== t.id));
+      async (s) => {
+        a(!0), d.closeAssetChooser(), u([...c, t.id]), await L(t, s[0]), u(c.filter((n) => n !== t.id));
       },
       {
         multiSelection: !1,
-        selectedValueIds: s.map((o) => o.id)
+        selectedValueIds: e.map((s) => s.id)
       }
     );
-  }, D = async (t, o) => {
-    u([...c, t.id]), await U(t, o), u(c.filter((n) => n !== t.id));
-  }, k = (t) => {
-    const { active: o } = t;
-    I(o.id);
+  }, F = async (t, s) => {
+    u([...c, t.id]), await O(t, s), u(c.filter((n) => n !== t.id));
   }, z = (t) => {
-    const { active: o, over: n } = t;
-    if (n && o.id !== n.id && s) {
-      const V = s.findIndex((h) => h.id === o.id), K = s.findIndex((h) => h.id === n.id), C = Y(s, V, K);
-      f(C), W(C);
+    const { active: s } = t;
+    b(s.id);
+  }, V = (t) => {
+    const { active: s, over: n } = t;
+    if (n && s.id !== n.id && e) {
+      const K = e.findIndex((w) => w.id === s.id), M = e.findIndex((w) => w.id === n.id), U = Z(e, K, M);
+      v(U), P(U);
     }
-    I(void 0);
+    b(void 0);
   };
-  return p || ((s == null ? void 0 : s.length) ?? 0) > 0 ? /* @__PURE__ */ e.jsx(
-    $,
+  return p || ((e == null ? void 0 : e.length) ?? 0) > 0 ? /* @__PURE__ */ o(
+    tt,
     {
       withArrow: !0,
-      position: tt.Top,
+      position: et.Top,
       content: "Attachments",
-      disabled: v,
+      disabled: y,
       enterDelay: 500,
-      triggerElement: /* @__PURE__ */ e.jsx("div", { "data-test-id": "attachments-flyout-button", children: /* @__PURE__ */ e.jsx(
-        et,
+      triggerElement: /* @__PURE__ */ o("div", { "data-test-id": "attachments-flyout-button", children: /* @__PURE__ */ o(
+        ot,
         {
           placement: st.BottomRight,
           onOpenChange: (t) => a(i ? !0 : t),
-          isOpen: v,
+          isOpen: y,
           hug: !1,
           fitContent: !0,
           legacyFooter: !1,
-          trigger: /* @__PURE__ */ e.jsxs("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", children: [
-            /* @__PURE__ */ e.jsx(ot, {}),
-            /* @__PURE__ */ e.jsx("div", { children: l.length > 0 ? l.length : "Add" }),
-            /* @__PURE__ */ e.jsx(nt, {})
+          trigger: /* @__PURE__ */ g("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", children: [
+            /* @__PURE__ */ o(nt, {}),
+            /* @__PURE__ */ o("div", { children: l.length > 0 ? l.length : "Add" }),
+            /* @__PURE__ */ o(it, {})
           ] }),
-          children: /* @__PURE__ */ e.jsxs("div", { className: "tw-w-[300px]", children: [
-            s.length > 0 && /* @__PURE__ */ e.jsxs(
-              G,
+          children: /* @__PURE__ */ g("div", { className: "tw-w-[300px]", children: [
+            e.length > 0 && /* @__PURE__ */ g(
+              H,
               {
-                sensors: N,
-                collisionDetection: H,
-                onDragStart: k,
-                onDragEnd: z,
-                modifiers: [at],
+                sensors: R,
+                collisionDetection: J,
+                onDragStart: z,
+                onDragEnd: V,
+                modifiers: [ct],
                 children: [
-                  /* @__PURE__ */ e.jsx(Q, { items: s, strategy: X, children: /* @__PURE__ */ e.jsx("div", { className: "tw-border-b tw-border-b-line", children: s.map((t) => /* @__PURE__ */ e.jsx(
-                    lt,
+                  /* @__PURE__ */ o(X, { items: e, strategy: Y, children: /* @__PURE__ */ o("div", { className: "tw-border-b tw-border-b-line", children: e.map((t) => /* @__PURE__ */ o(
+                    dt,
                     {
                       isEditing: p,
                       isLoading: c.includes(t.id),
                       item: t,
-                      onDelete: () => w(t),
-                      onReplaceWithBrowse: () => S(t),
-                      onReplaceWithUpload: (o) => D(t, o)
+                      onDelete: () => x(t),
+                      onReplaceWithBrowse: () => C(t),
+                      onReplaceWithUpload: (s) => F(t, s)
                     },
                     t.id
                   )) }) }),
-                  /* @__PURE__ */ e.jsx(J, { children: i && /* @__PURE__ */ e.jsx(
-                    dt,
+                  /* @__PURE__ */ o(Q, { children: i && /* @__PURE__ */ o(
+                    at,
                     {
                       isOverlay: !0,
                       isEditing: p,
                       item: i,
                       isDragging: !0,
-                      onDelete: () => w(i),
-                      onReplaceWithBrowse: () => S(i),
-                      onReplaceWithUpload: (t) => D(i, t)
+                      onDelete: () => x(i),
+                      onReplaceWithBrowse: () => C(i),
+                      onReplaceWithUpload: (t) => F(i, t)
                     },
-                    y
+                    I
                   ) })
                 ]
               }
             ),
-            p && /* @__PURE__ */ e.jsxs("div", { className: "tw-px-5 tw-py-3", children: [
-              /* @__PURE__ */ e.jsx("div", { className: "tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4", children: "Add attachments" }),
-              /* @__PURE__ */ e.jsx(
-                it,
+            p && /* @__PURE__ */ g("div", { className: "tw-px-5 tw-py-3", children: [
+              /* @__PURE__ */ o("div", { className: "tw-font-body tw-font-medium tw-text-text tw-text-s tw-my-4", children: "Add attachments" }),
+              /* @__PURE__ */ o(
+                rt,
                 {
-                  isLoading: b,
-                  size: rt.Small,
-                  onUploadClick: (t) => P(t),
-                  onLibraryClick: T
+                  isLoading: A,
+                  size: lt.Small,
+                  onUploadClick: (t) => T(t),
+                  onLibraryClick: k
                 }
               )
             ] })
@@ -140,6 +140,6 @@ const ft = ({
   ) : null;
 };
 export {
-  ft as Attachments
+  vt as Attachments
 };
 //# sourceMappingURL=Attachments.es.js.map