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

@frontify/guideline-blocks-settings 0.28.1 → 0.28.2

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

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,16 @@
 # @frontify/guideline-blocks-settings
+## 0.28.2
+### Patch Changes
+- [`fa969e9`](https://github.com/Frontify/brand-sdk/commit/fa969e90c980411273ff3c8c6f015b303fd59fe3) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Update dependencies
+- [`fa969e9`](https://github.com/Frontify/brand-sdk/commit/fa969e90c980411273ff3c8c6f015b303fd59fe3) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Fix issues with styles export
+- Updated dependencies [[`fa969e9`](https://github.com/Frontify/brand-sdk/commit/fa969e90c980411273ff3c8c6f015b303fd59fe3)]:
+  - @frontify/sidebar-settings@0.6.1
 ## 0.28.1
 ### Patch Changes

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

@@ -1,37 +1,37 @@
 import { j as t } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { r as c } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
-import { useFileInput as A, useAssetUpload as U } from "@frontify/app-bridge";
-import { useSortable as L } from "@dnd-kit/sortable";
-import { useFocusRing as M } from "@react-aria/focus";
-import { LoadingCircle as P, LoadingCircleSize as V, FOCUS_STYLE as B, IconGrabHandle20 as O, Flyout as $, FlyoutPlacement as T, Button as X, IconPen20 as G, ButtonEmphasis as H, ActionMenu as _, MenuItemContentSize as h, IconArrowCircleUp20 as Y, IconImageStack20 as q, MenuItemStyle as J, IconTrashBin20 as K, IconImage24 as Q, IconPlayFrame24 as W, IconMusicNote24 as Z, IconDocument24 as tt } from "@frontify/fondue";
-import { joinClassNames as g } from "../../utilities/react/joinClassNames.es.js";
-const et = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Q, {}) : e === "VIDEO" ? /* @__PURE__ */ t.jsx(W, {}) : e === "AUDIO" ? /* @__PURE__ */ t.jsx(Z, {}) : /* @__PURE__ */ t.jsx(tt, {}), I = c.forwardRef(
+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(
   ({
     item: e,
-    isEditing: u,
+    isEditing: c,
     draggableProps: d,
-    transformStyle: w,
+    transformStyle: u,
     isDragging: o,
     isOverlay: r,
     isLoading: s,
-    onDelete: m,
-    onReplaceWithBrowse: x,
+    onDelete: w,
+    onReplaceWithBrowse: m,
     onReplaceWithUpload: y
   }, k) => {
-    const [a, n] = c.useState(), [S, { selectedFiles: i }] = A({ multiple: !0, accept: "image/*" }), [N, { results: j, doneAll: p }] = U(), { focusProps: C, isFocusVisible: v } = M();
-    c.useEffect(() => {
+    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]), c.useEffect(() => {
-      p && y(j[0]);
-    }, [p, j]);
-    const F = (l, b) => {
+    }, [i]), v(() => {
+      x && y(g[0]);
+    }, [x, g]);
+    const F = (l, p) => {
       fetch(l).then((z) => {
         z.blob().then((D) => {
-          const E = URL.createObjectURL(D), f = document.createElement("a");
-          f.href = E, f.download = b, f.click();
+          const A = URL.createObjectURL(D), b = document.createElement("a");
+          b.href = A, b.download = p, b.click();
         });
       });
-    }, R = s || i && !p;
+    }, R = s || i && !x;
     return /* @__PURE__ */ t.jsxs(
       "button",
       {
@@ -40,25 +40,25 @@ const et = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Q, {}) : e === "VIDEO" ?
         onClick: () => F(e.genericUrl, e.fileName),
         ref: k,
         style: {
-          ...w,
+          ...u,
           opacity: o && !r ? 0.3 : 1,
           fontFamily: "var(-f-theme-settings-body-font-family)"
         },
-        className: g([
+        className: h([
           "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(P, { size: V.Small }) : et(e.objectType) }),
+          /* @__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}` })
           ] }),
-          u && /* @__PURE__ */ t.jsxs(
+          c && /* @__PURE__ */ t.jsxs(
             "div",
             {
               "data-test-id": "attachments-actionbar",
-              className: g([
+              className: h([
                 "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"
               ]),
@@ -69,34 +69,34 @@ const et = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Q, {}) : e === "VIDEO" ?
                     ...C,
                     ...d,
                     "aria-label": "Drag attachment",
-                    className: g([
+                    className: h([
                       " 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",
-                      v && B,
-                      v && "tw-z-[2]"
+                      j && $,
+                      j && "tw-z-[2]"
                     ]),
-                    children: /* @__PURE__ */ t.jsx(O, {})
+                    children: /* @__PURE__ */ t.jsx(T, {})
                   }
                 ),
                 /* @__PURE__ */ t.jsx("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ t.jsx(
-                  $,
+                  X,
                   {
-                    placement: T.Right,
+                    placement: G.Right,
                     isOpen: (a == null ? void 0 : a.id) === e.id,
                     fitContent: !0,
                     legacyFooter: !1,
                     onOpenChange: (l) => n(l ? e : void 0),
-                    trigger: (l, b) => /* @__PURE__ */ t.jsx(
-                      X,
+                    trigger: (l, p) => /* @__PURE__ */ t.jsx(
+                      H,
                       {
-                        ref: b,
-                        icon: /* @__PURE__ */ t.jsx(G, {}),
-                        emphasis: H.Default,
+                        ref: p,
+                        icon: /* @__PURE__ */ t.jsx(_, {}),
+                        emphasis: Y.Default,
                         onClick: () => n(e)
                       }
                     ),
                     children: /* @__PURE__ */ t.jsx(
-                      _,
+                      q,
                       {
                         menuBlocks: [
                           {
@@ -104,23 +104,23 @@ const et = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Q, {}) : e === "VIDEO" ?
                             menuItems: [
                               {
                                 id: "upload",
-                                size: h.XSmall,
+                                size: f.XSmall,
                                 title: "Replace with upload",
                                 onClick: () => {
                                   S(), n(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(Y, {}) })
+                                decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(J, {}) })
                               },
                               {
                                 id: "asset",
-                                size: h.XSmall,
+                                size: f.XSmall,
                                 title: "Replace with asset",
                                 onClick: () => {
-                                  x(), n(void 0);
+                                  m(), n(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(q, {}) })
+                                decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(K, {}) })
                               }
                             ]
                           },
@@ -129,14 +129,14 @@ const et = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Q, {}) : e === "VIDEO" ?
                             menuItems: [
                               {
                                 id: "delete",
-                                size: h.XSmall,
+                                size: f.XSmall,
                                 title: "Delete",
-                                style: J.Danger,
+                                style: Q.Danger,
                                 onClick: () => {
-                                  m(), n(void 0);
+                                  w(), n(void 0);
                                 },
                                 initialValue: !0,
-                                decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(K, {}) })
+                                decorator: /* @__PURE__ */ t.jsx("div", { className: "tw-mr-2", children: /* @__PURE__ */ t.jsx(W, {}) })
                               }
                             ]
                           }
@@ -154,27 +154,27 @@ const et = (e) => e === "IMAGE" ? /* @__PURE__ */ t.jsx(Q, {}) : e === "VIDEO" ?
   }
 );
 I.displayName = "AttachmentItem";
-const ct = (e) => {
-  const { attributes: u, listeners: d, setNodeRef: w, transform: o, transition: r, isDragging: s } = L({
+const ut = (e) => {
+  const { attributes: c, listeners: d, setNodeRef: u, transform: o, transition: r, isDragging: s } = P({
     id: e.item.id
-  }), m = {
+  }), w = {
     transform: o ? `translate(${o.x}px, ${o.y}px)` : "",
     transition: r,
     zIndex: s ? 2 : 1
-  }, x = { ...u, ...d };
+  }, m = { ...c, ...d };
   return /* @__PURE__ */ t.jsx(
     I,
     {
-      ref: w,
+      ref: u,
       isDragging: s,
-      transformStyle: m,
-      draggableProps: x,
+      transformStyle: w,
+      draggableProps: m,
       ...e
     }
   );
 };
 export {
   I as AttachmentItem,
-  ct as SortableAttachmentItem
+  ut 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,122 +1,122 @@
 import { j as e } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
-import { r as n } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/index.es.js";
-import { useSensors as K, useSensor as C, PointerSensor as M, KeyboardSensor as q, DndContext as B, closestCenter as G, DragOverlay as H } from "@dnd-kit/core";
-import { SortableContext as J, rectSortingStrategy as Q, arrayMove as X } from "@dnd-kit/sortable";
-import { useEditorState as Y, useAssetUpload as Z } from "@frontify/app-bridge";
-import { Tooltip as _, TooltipPosition as $, Flyout as tt, FlyoutPlacement as et, IconPaperclip16 as st, IconCaretDown12 as ot, AssetInput as nt, AssetInputSize as rt } from "@frontify/fondue";
-import { SortableAttachmentItem as it, AttachmentItem as lt } from "./AttachmentItem.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 mt = ({
+const ft = ({
   items: l = [],
-  onDelete: h,
-  onReplaceWithBrowse: E,
-  onReplaceWithUpload: F,
-  onBrowse: U,
-  onUpload: L,
-  onSorted: O,
-  appBridge: a
+  onDelete: w,
+  onReplaceWithBrowse: F,
+  onReplaceWithUpload: U,
+  onBrowse: L,
+  onUpload: O,
+  onSorted: W,
+  appBridge: d
 }) => {
-  const [s, m] = n.useState(l), [w, d] = n.useState(!1), W = K(C(M), C(q)), [S, v] = n.useState(void 0), [y, g] = n.useState(!1), [c, u] = n.useState([]), [x, N] = n.useState(null), p = Y(a), i = s == null ? void 0 : s.find((t) => t.id === S), [P, { results: I, doneAll: b }] = Z({
-    onUploadProgress: () => !y && g(!0)
+  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)
   });
-  n.useEffect(() => {
-    m(l);
-  }, [l]), n.useEffect(() => {
-    x && (g(!0), P(x));
-  }, [x]), n.useEffect(() => {
+  m(() => {
+    f(l);
+  }, [l]), m(() => {
+    x && (g(!0), R(x));
+  }, [x]), m(() => {
     (async () => {
-      b && (await L(I), g(!1));
+      A && (await O(j), g(!1));
     })();
-  }, [b, I]);
-  const R = () => {
-    d(!1), a.openAssetChooser(
+  }, [A, j]);
+  const T = () => {
+    a(!1), d.openAssetChooser(
       (t) => {
-        U(t), a.closeAssetChooser(), d(!0);
+        L(t), d.closeAssetChooser(), a(!0);
       },
       {
         multiSelection: !0,
         selectedValueIds: s.map((t) => t.id)
       }
     );
-  }, j = (t) => {
-    d(!1), a.openAssetChooser(
+  }, S = (t) => {
+    a(!1), d.openAssetChooser(
       async (o) => {
-        d(!0), a.closeAssetChooser(), u([...c, t.id]), await E(t, o[0]), u(c.filter((r) => r !== t.id));
+        a(!0), d.closeAssetChooser(), u([...c, t.id]), await F(t, o[0]), u(c.filter((n) => n !== t.id));
       },
       {
         multiSelection: !1,
         selectedValueIds: s.map((o) => o.id)
       }
     );
-  }, A = async (t, o) => {
-    u([...c, t.id]), await F(t, o), u(c.filter((r) => r !== t.id));
-  }, T = (t) => {
-    const { active: o } = t;
-    v(o.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, over: r } = t;
-    if (r && o.id !== r.id && s) {
-      const z = s.findIndex((f) => f.id === o.id), V = s.findIndex((f) => f.id === r.id), D = X(s, z, V);
-      m(D), O(D);
+    const { active: o } = t;
+    I(o.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);
     }
-    v(void 0);
+    I(void 0);
   };
   return p || ((s == null ? void 0 : s.length) ?? 0) > 0 ? /* @__PURE__ */ e.jsx(
-    _,
+    $,
     {
       withArrow: !0,
-      position: $.Top,
+      position: tt.Top,
       content: "Attachments",
-      disabled: w,
+      disabled: v,
       enterDelay: 500,
       triggerElement: /* @__PURE__ */ e.jsx("div", { "data-test-id": "attachments-flyout-button", children: /* @__PURE__ */ e.jsx(
-        tt,
+        et,
         {
-          placement: et.BottomRight,
-          onOpenChange: (t) => d(i ? !0 : t),
-          isOpen: w,
+          placement: st.BottomRight,
+          onOpenChange: (t) => a(i ? !0 : t),
+          isOpen: v,
           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(st, {}),
+            /* @__PURE__ */ e.jsx(ot, {}),
             /* @__PURE__ */ e.jsx("div", { children: l.length > 0 ? l.length : "Add" }),
-            /* @__PURE__ */ e.jsx(ot, {})
+            /* @__PURE__ */ e.jsx(nt, {})
           ] }),
           children: /* @__PURE__ */ e.jsxs("div", { className: "tw-w-[300px]", children: [
             s.length > 0 && /* @__PURE__ */ e.jsxs(
-              B,
+              G,
               {
-                sensors: W,
-                collisionDetection: G,
-                onDragStart: T,
-                onDragEnd: k,
+                sensors: N,
+                collisionDetection: H,
+                onDragStart: k,
+                onDragEnd: z,
                 modifiers: [at],
                 children: [
-                  /* @__PURE__ */ e.jsx(J, { items: s, strategy: Q, children: /* @__PURE__ */ e.jsx("div", { className: "tw-border-b tw-border-b-line", children: s.map((t) => /* @__PURE__ */ e.jsx(
-                    it,
+                  /* @__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,
                     {
                       isEditing: p,
                       isLoading: c.includes(t.id),
                       item: t,
-                      onDelete: () => h(t),
-                      onReplaceWithBrowse: () => j(t),
-                      onReplaceWithUpload: (o) => A(t, o)
+                      onDelete: () => w(t),
+                      onReplaceWithBrowse: () => S(t),
+                      onReplaceWithUpload: (o) => D(t, o)
                     },
                     t.id
                   )) }) }),
-                  /* @__PURE__ */ e.jsx(H, { children: i && /* @__PURE__ */ e.jsx(
-                    lt,
+                  /* @__PURE__ */ e.jsx(J, { children: i && /* @__PURE__ */ e.jsx(
+                    dt,
                     {
                       isOverlay: !0,
                       isEditing: p,
                       item: i,
                       isDragging: !0,
-                      onDelete: () => h(i),
-                      onReplaceWithBrowse: () => j(i),
-                      onReplaceWithUpload: (t) => A(i, t)
+                      onDelete: () => w(i),
+                      onReplaceWithBrowse: () => S(i),
+                      onReplaceWithUpload: (t) => D(i, t)
                     },
-                    S
+                    y
                   ) })
                 ]
               }
@@ -124,12 +124,12 @@ const mt = ({
             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(
-                nt,
+                it,
                 {
-                  isLoading: y,
+                  isLoading: b,
                   size: rt.Small,
-                  onUploadClick: (t) => N(t),
-                  onLibraryClick: R
+                  onUploadClick: (t) => P(t),
+                  onLibraryClick: T
                 }
               )
             ] })
@@ -140,6 +140,6 @@ const mt = ({
   ) : null;
 };
 export {
-  mt as Attachments
+  ft as Attachments
 };
 //# sourceMappingURL=Attachments.es.js.map

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

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