npm - @frontify/guideline-blocks-settings - Versions diffs - 0.32.1 → 0.32.2 - Mend

@frontify/guideline-blocks-settings 0.32.1 → 0.32.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 (96) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,45 @@
 # @frontify/guideline-blocks-settings
+## 0.32.2
+### Patch Changes
+- [#749](https://github.com/Frontify/brand-sdk/pull/749) [`5393e3a`](https://github.com/Frontify/brand-sdk/commit/5393e3aed9822bb00521a22b1cc75a62fafb4a59) Thanks [@SamCreasey](https://github.com/SamCreasey)! - - refactor (Toolbar): split Toolbar into smaller subcomponents. `ToolbarFlyoutState` type has been removed, as well as `flyoutMenu.isOpen`, `flyoutMenu.onOpenChange`, `attachments.isOpen`, `attachments.onOpenChange` props that could be passed to the `Toolbar` compnent. To control the state of open `Flyouts` the `Toolbar` must instead be wrapped in a `MultiFlyoutContextProvider`.
+  Migration Example:
+  ```jsx
+  // Inside your component
+  const [flyoutIsOpen, setFlyoutIsOpen] = useState(false);
+  const [attachmentsIsOpen, setAttachmentsIsOpen] = useState(false);
+  return (
+    <Toolbar
+      flyoutMenu={{ isOpen: flyoutIsOpen, onOpenChange: setFlyoutIsOpen }}
+      attachments={{
+        isOpen: attachmentsIsOpen,
+        onOpenChange: setAttachmentsIsOpen,
+      }}
+    />
+  );
+  ```
+  The above component should now be written as:
+  ```jsx
+  // Inside your component
+  const [openFlyoutIds, setOpenFlyoutIds] = useState([]);
+  return(
+      <MultiFlyoutContextProvider openFlyoutIds={openFlyoutIds} setOpenFlyoutIds={setOpenFlyoutIds}>
+          <Toolbar />
+      <MultiFlyoutContextProvider>)
+  ```
+- [#757](https://github.com/Frontify/brand-sdk/pull/757) [`07f2dd3`](https://github.com/Frontify/brand-sdk/commit/07f2dd356663f678b8912c9bf669834c515f43f7) Thanks [@fulopdaniel](https://github.com/fulopdaniel)! - feat(Attachments): allow sorting
+- [#744](https://github.com/Frontify/brand-sdk/pull/744) [`7aad48f`](https://github.com/Frontify/brand-sdk/commit/7aad48f022aab38577cf0233c108b4997587c939) Thanks [@ragi96](https://github.com/ragi96)! - feat: add support for the new color type of app-bridge v4
 ## 0.32.1
 ### Patch Changes

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

@@ -1,126 +1,145 @@
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { forwardRef as F, useState as z, useEffect as v } from "react";
-import { useFileInput as A, useAssetUpload as R } from "@frontify/app-bridge";
-import { useSortable as D } from "@dnd-kit/sortable";
-import { LoadingCircle as M, LoadingCircleSize as j, Flyout as B, FlyoutPlacement as E, Button as P, IconPen20 as V, ButtonEmphasis as $, ActionMenu as L, MenuItemContentSize as f, IconArrowCircleUp20 as O, IconImageStack20 as U, MenuItemStyle as X, IconTrashBin20 as T, IconImage24 as G, IconPlayFrame24 as H, IconMusicNote24 as _, IconDocument24 as q } from "@frontify/fondue";
-import { joinClassNames as I } from "../../utilities/react/joinClassNames.es.js";
-const J = (e) => e === "IMAGE" ? /* @__PURE__ */ t(G, {}) : e === "VIDEO" ? /* @__PURE__ */ t(H, {}) : e === "AUDIO" ? /* @__PURE__ */ t(_, {}) : /* @__PURE__ */ t(q, {}), y = F(
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { forwardRef as A, useState as j, useEffect as I } from "react";
+import { useFileInput as D, useAssetUpload as E } from "@frontify/app-bridge";
+import { useSortable as M } from "@dnd-kit/sortable";
+import { LoadingCircle as P, LoadingCircleSize as V, FOCUS_STYLE as B, IconGrabHandle20 as L, Flyout as U, FlyoutPlacement as $, Button as O, IconPen20 as T, ButtonEmphasis as X, ActionMenu as G, MenuItemContentSize as f, IconArrowCircleUp20 as H, IconImageStack20 as _, MenuItemStyle as Y, IconTrashBin20 as q, IconImage24 as J, IconPlayFrame24 as K, IconMusicNote24 as Q, IconDocument24 as W } from "@frontify/fondue";
+import { useFocusRing as Z } from "@react-aria/focus";
+import { joinClassNames as h } from "../../utilities/react/joinClassNames.es.js";
+const tt = (e) => e === "IMAGE" ? /* @__PURE__ */ t(J, {}) : e === "VIDEO" ? /* @__PURE__ */ t(K, {}) : e === "AUDIO" ? /* @__PURE__ */ t(Q, {}) : /* @__PURE__ */ t(W, {}), y = A(
   ({
     item: e,
     isEditing: s,
-    transformStyle: c,
-    isDragging: r,
-    isOverlay: i,
-    isLoading: m,
-    onDelete: l,
-    onReplaceWithBrowse: d,
-    onReplaceWithUpload: u,
+    draggableProps: c,
+    transformStyle: u,
+    isDragging: o,
+    isOverlay: a,
+    isLoading: n,
+    onDelete: d,
+    onReplaceWithBrowse: m,
+    onReplaceWithUpload: S,
     onDownload: w
-  }, b) => {
-    const [a, o] = z(), [S, { selectedFiles: n }] = A({ multiple: !0, accept: "image/*" }), [C, { results: h, doneAll: p }] = R();
-    v(() => {
-      n && C(n[0]);
-    }, [n]), v(() => {
-      p && u(h[0]);
-    }, [p, h]);
-    const N = m || n && !p;
-    return /* @__PURE__ */ g(
+  }, k) => {
+    const [r, i] = j(), [C, { selectedFiles: l }] = D({ multiple: !0, accept: "image/*" }), [N, { results: g, doneAll: p }] = E(), { focusProps: F, isFocusVisible: v } = Z();
+    I(() => {
+      l && N(l[0]);
+    }, [l]), I(() => {
+      p && S(g[0]);
+    }, [p, g]);
+    const z = n || l && !p;
+    return /* @__PURE__ */ b(
       "button",
       {
         "aria-label": "Download attachment",
         "data-test-id": "attachments-item",
         onClick: () => w == null ? void 0 : w(),
-        ref: b,
+        ref: k,
         style: {
-          ...c,
-          opacity: r && !i ? 0.3 : 1,
+          ...u,
+          opacity: o && !a ? 0.3 : 1,
           fontFamily: "var(-f-theme-settings-body-font-family)"
         },
-        className: I([
+        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",
-          r ? "tw-bg-box-neutral-hover" : ""
+          o ? "tw-bg-box-neutral-hover" : ""
         ]),
         children: [
-          /* @__PURE__ */ t("div", { className: "tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: N ? /* @__PURE__ */ t(M, { size: j.Small }) : J(e.objectType) }),
-          /* @__PURE__ */ g("div", { className: "tw-text-s tw-flex-1 tw-min-w-0", children: [
+          /* @__PURE__ */ t("div", { className: "tw-text-text-weak group-hover:tw-text-box-neutral-inverse-hover", children: z ? /* @__PURE__ */ t(P, { size: V.Small }) : tt(e.objectType) }),
+          /* @__PURE__ */ b("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}` })
           ] }),
-          s && /* @__PURE__ */ t(
+          s && /* @__PURE__ */ b(
             "div",
             {
               "data-test-id": "attachments-actionbar",
-              className: I([
+              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",
-                i || (a == null ? void 0 : a.id) === e.id ? "tw-opacity-100" : "tw-opacity-0"
+                a || (r == null ? void 0 : r.id) === e.id ? "tw-opacity-100" : "tw-opacity-0"
               ]),
-              children: /* @__PURE__ */ t("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ t(
-                B,
-                {
-                  placement: E.Right,
-                  isOpen: (a == null ? void 0 : a.id) === e.id,
-                  fitContent: !0,
-                  legacyFooter: !1,
-                  onOpenChange: (x) => o(x ? e : void 0),
-                  trigger: (x, k) => /* @__PURE__ */ t(
-                    P,
-                    {
-                      ref: k,
-                      icon: /* @__PURE__ */ t(V, {}),
-                      emphasis: $.Default,
-                      onClick: () => o(e)
-                    }
-                  ),
-                  children: /* @__PURE__ */ t(
-                    L,
-                    {
-                      menuBlocks: [
-                        {
-                          id: "menu",
-                          menuItems: [
-                            {
-                              id: "upload",
-                              size: f.XSmall,
-                              title: "Replace with upload",
-                              onClick: () => {
-                                S(), o(void 0);
+              children: [
+                /* @__PURE__ */ t(
+                  "button",
+                  {
+                    ...F,
+                    ...c,
+                    "aria-label": "Drag attachment",
+                    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 || a ? "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]"
+                    ]),
+                    children: /* @__PURE__ */ t(L, {})
+                  }
+                ),
+                /* @__PURE__ */ t("div", { "data-test-id": "attachments-actionbar-flyout", children: /* @__PURE__ */ t(
+                  U,
+                  {
+                    placement: $.Right,
+                    isOpen: (r == null ? void 0 : r.id) === e.id,
+                    fitContent: !0,
+                    legacyFooter: !1,
+                    onOpenChange: (x) => i(x ? e : void 0),
+                    trigger: (x, R) => /* @__PURE__ */ t(
+                      O,
+                      {
+                        ref: R,
+                        icon: /* @__PURE__ */ t(T, {}),
+                        emphasis: X.Default,
+                        onClick: () => i(e)
+                      }
+                    ),
+                    children: /* @__PURE__ */ t(
+                      G,
+                      {
+                        menuBlocks: [
+                          {
+                            id: "menu",
+                            menuItems: [
+                              {
+                                id: "upload",
+                                size: f.XSmall,
+                                title: "Replace with upload",
+                                onClick: () => {
+                                  C(), i(void 0);
+                                },
+                                initialValue: !0,
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(H, {}) })
                               },
-                              initialValue: !0,
-                              decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(O, {}) })
-                            },
-                            {
-                              id: "asset",
-                              size: f.XSmall,
-                              title: "Replace with asset",
-                              onClick: () => {
-                                d(), o(void 0);
-                              },
-                              initialValue: !0,
-                              decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(U, {}) })
-                            }
-                          ]
-                        },
-                        {
-                          id: "menu-delete",
-                          menuItems: [
-                            {
-                              id: "delete",
-                              size: f.XSmall,
-                              title: "Delete",
-                              style: X.Danger,
-                              onClick: () => {
-                                l(), o(void 0);
-                              },
-                              initialValue: !0,
-                              decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(T, {}) })
-                            }
-                          ]
-                        }
-                      ]
-                    }
-                  )
-                }
-              ) })
+                              {
+                                id: "asset",
+                                size: f.XSmall,
+                                title: "Replace with asset",
+                                onClick: () => {
+                                  m(), i(void 0);
+                                },
+                                initialValue: !0,
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(_, {}) })
+                              }
+                            ]
+                          },
+                          {
+                            id: "menu-delete",
+                            menuItems: [
+                              {
+                                id: "delete",
+                                size: f.XSmall,
+                                title: "Delete",
+                                style: Y.Danger,
+                                onClick: () => {
+                                  d(), i(void 0);
+                                },
+                                initialValue: !0,
+                                decorator: /* @__PURE__ */ t("div", { className: "tw-mr-2", children: /* @__PURE__ */ t(q, {}) })
+                              }
+                            ]
+                          }
+                        ]
+                      }
+                    )
+                  }
+                ) })
+              ]
             }
           )
         ]
@@ -129,27 +148,27 @@ const J = (e) => e === "IMAGE" ? /* @__PURE__ */ t(G, {}) : e === "VIDEO" ? /* @
   }
 );
 y.displayName = "AttachmentItem";
-const et = (e) => {
-  const { attributes: s, listeners: c, setNodeRef: r, transform: i, transition: m, isDragging: l } = D({
+const st = (e) => {
+  const { attributes: s, listeners: c, setNodeRef: u, transform: o, transition: a, isDragging: n } = M({
     id: e.item.id
   }), d = {
-    transform: i ? `translate(${i.x}px, ${i.y}px)` : "",
-    transition: m,
-    zIndex: l ? 2 : 1
-  }, u = { ...s, ...c };
+    transform: o ? `translate(${o.x}px, ${o.y}px)` : "",
+    transition: a,
+    zIndex: n ? 2 : 1
+  }, m = { ...s, ...c };
   return /* @__PURE__ */ t(
     y,
     {
-      ref: r,
-      isDragging: l,
+      ref: u,
+      isDragging: n,
       transformStyle: d,
-      draggableProps: u,
+      draggableProps: m,
       ...e
     }
   );
 };
 export {
   y as AttachmentItem,
-  et as SortableAttachmentItem
+  st 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';\n\nimport {\n ActionMenu,\n Button,\n ButtonEmphasis,\n Flyout,\n FlyoutPlacement,\n IconArrowCircleUp20,\n IconDocument24,\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 transformStyle,\n isDragging,\n isOverlay,\n isLoading,\n onDelete,\n onReplaceWithBrowse,\n onReplaceWithUpload,\n onDownload,\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\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 showLoadingCircle = isLoading \|\| (selectedFiles && !doneAll);\n\n return (\n <button\n aria-label=\"Download attachment\"\n data-test-id=\"attachments-item\"\n onClick={() => onDownload?.()}\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 <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","transformStyle","isDragging","isOverlay","isLoading","onDelete","onReplaceWithBrowse","onReplaceWithUpload","onDownload","ref","selectedAsset","setSelectedAsset","useState","openFileDialog","selectedFiles","useFileInput","uploadFile","uploadResults","doneAll","useAssetUpload","useEffect","showLoadingCircle","jsxs","joinClassNames","jsx","LoadingCircle","LoadingCircleSize","Flyout","FlyoutPlacement","isOpen","_","Button","IconPen20","ButtonEmphasis","ActionMenu","MenuItemContentSize","IconArrowCircleUp20","IconImageStack20","MenuItemStyle","IconTrashBin20","SortableAttachmentItem","props","attributes","listeners","setNodeRef","transform","transition","useSortable","draggableProps"],"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';\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';\nimport { useFocusRing } from '@react-aria/focus';\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 onDownload,\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\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 showLoadingCircle = isLoading \|\| (selectedFiles && !doneAll);\n\n return (\n <button\n aria-label=\"Download attachment\"\n data-test-id=\"attachments-item\"\n onClick={() => onDownload?.()}\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","onDownload","ref","selectedAsset","setSelectedAsset","useState","openFileDialog","selectedFiles","useFileInput","uploadFile","uploadResults","doneAll","useAssetUpload","focusProps","isFocusVisible","useFocusRing","useEffect","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

@@ -85,7 +85,15 @@ const Et = ({
           hug: !1,
           fitContent: !0,
           legacyFooter: !1,
-          trigger: /* @__PURE__ */ n(k, { isFlyoutOpen: m, children: /* @__PURE__ */ n("div", { children: a.length > 0 ? a.length : "Add" }) }),
+          trigger: (t, e) => /* @__PURE__ */ n(
+            k,
+            {
+              isFlyoutOpen: m,
+              triggerProps: t,
+              triggerRef: e,
+              children: /* @__PURE__ */ n("div", { children: a.length > 0 ? a.length : "Add" })
+            }
+          ),
           children: /* @__PURE__ */ y("div", { className: "tw-w-[300px]", "data-test-id": "attachments-flyout-content", children: [
             o.length > 0 && /* @__PURE__ */ y(
               tt,

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 { restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { Asset, useAssetChooser, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport {\n AssetInput,\n AssetInputSize,\n Flyout,\n FlyoutPlacement,\n LegacyTooltip as Tooltip,\n TooltipPosition,\n} from '@frontify/fondue';\n\nimport { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';\nimport { type AttachmentsProps } from './types';\nimport { AttachmentsButtonTrigger } from './AttachmentsButtonTrigger';\n\nexport const Attachments = ({\n items = [],\n onDelete,\n onReplaceWithBrowse,\n onReplaceWithUpload,\n onBrowse,\n onUpload,\n onSorted,\n appBridge,\n triggerComponent: TriggerComponent = AttachmentsButtonTrigger,\n isOpen,\n onOpenChange,\n}: AttachmentsProps) => {\n const [internalItems, setInternalItems] = useState<Asset[]>(items);\n const [isFlyoutOpenInternal, setIsFlyoutOpenInternal] = 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 const { openAssetChooser, closeAssetChooser } = useAssetChooser(appBridge);\n const isControllingStateExternally = isOpen !== undefined;\n const isFlyoutOpen = isControllingStateExternally ? isOpen : isFlyoutOpenInternal;\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 const handleFlyoutOpenChange = (isOpen: boolean) => {\n const stateSetter = isControllingStateExternally ? onOpenChange : setIsFlyoutOpenInternal;\n\n stateSetter?.(isOpen);\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 handleFlyoutOpenChange(false);\n openAssetChooser(\n (result: Asset[]) => {\n onBrowse(result);\n closeAssetChooser();\n handleFlyoutOpenChange(true);\n },\n {\n multiSelection: true,\n selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n },\n );\n };\n\n const onReplaceItemWithBrowse = (toReplace: Asset) => {\n handleFlyoutOpenChange(false);\n openAssetChooser(\n async (result: Asset[]) => {\n handleFlyoutOpenChange(true);\n 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) => handleFlyoutOpenChange(!!draggedItem ? true : isOpen)}\n isOpen={isFlyoutOpen}\n hug={false}\n fitContent\n legacyFooter={false}\n trigger={\n <TriggerComponent isFlyoutOpen={isFlyoutOpen}>\n <div>{items.length > 0 ? items.length : 'Add'}</div>\n </TriggerComponent>\n }\n >\n <div className=\"tw-w-[300px]\" data-test-id=\"attachments-flyout-content\">\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 onDownload={() =>\n appBridge.dispatch({\n name: 'downloadAsset',\n payload: item,\n })\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","TriggerComponent","AttachmentsButtonTrigger","isOpen","onOpenChange","internalItems","setInternalItems","useState","isFlyoutOpenInternal","setIsFlyoutOpenInternal","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","openAssetChooser","closeAssetChooser","useAssetChooser","isControllingStateExternally","isFlyoutOpen","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","handleFlyoutOpenChange","stateSetter","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","jsx","Tooltip","TooltipPosition","Flyout","FlyoutPlacement","jsxs","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 { MutableRefObject, 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 { restrictToWindowEdges } from '@dnd-kit/modifiers';\nimport { SortableContext, arrayMove, rectSortingStrategy } from '@dnd-kit/sortable';\nimport { Asset, useAssetChooser, useAssetUpload, useEditorState } from '@frontify/app-bridge';\nimport {\n AssetInput,\n AssetInputSize,\n Flyout,\n FlyoutPlacement,\n LegacyTooltip as Tooltip,\n TooltipPosition,\n} from '@frontify/fondue';\n\nimport { AttachmentItem, SortableAttachmentItem } from './AttachmentItem';\nimport { type AttachmentsProps } from './types';\nimport { AttachmentsButtonTrigger } from './AttachmentsButtonTrigger';\n\nexport const Attachments = ({\n items = [],\n onDelete,\n onReplaceWithBrowse,\n onReplaceWithUpload,\n onBrowse,\n onUpload,\n onSorted,\n appBridge,\n triggerComponent: TriggerComponent = AttachmentsButtonTrigger,\n isOpen,\n onOpenChange,\n}: AttachmentsProps) => {\n const [internalItems, setInternalItems] = useState<Asset[]>(items);\n const [isFlyoutOpenInternal, setIsFlyoutOpenInternal] = 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 const { openAssetChooser, closeAssetChooser } = useAssetChooser(appBridge);\n const isControllingStateExternally = isOpen !== undefined;\n const isFlyoutOpen = isControllingStateExternally ? isOpen : isFlyoutOpenInternal;\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 const handleFlyoutOpenChange = (isOpen: boolean) => {\n const stateSetter = isControllingStateExternally ? onOpenChange : setIsFlyoutOpenInternal;\n\n stateSetter?.(isOpen);\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 handleFlyoutOpenChange(false);\n openAssetChooser(\n (result: Asset[]) => {\n onBrowse(result);\n closeAssetChooser();\n handleFlyoutOpenChange(true);\n },\n {\n multiSelection: true,\n selectedValueIds: internalItems.map((internalItem) => internalItem.id),\n },\n );\n };\n\n const onReplaceItemWithBrowse = (toReplace: Asset) => {\n handleFlyoutOpenChange(false);\n openAssetChooser(\n async (result: Asset[]) => {\n handleFlyoutOpenChange(true);\n 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) => handleFlyoutOpenChange(!!draggedItem ? true : isOpen)}\n isOpen={isFlyoutOpen}\n hug={false}\n fitContent\n legacyFooter={false}\n trigger={(triggerProps, triggerRef) => (\n <TriggerComponent\n isFlyoutOpen={isFlyoutOpen}\n triggerProps={triggerProps}\n triggerRef={triggerRef as MutableRefObject<HTMLButtonElement>}\n >\n <div>{items.length > 0 ? items.length : 'Add'}</div>\n </TriggerComponent>\n )}\n >\n <div className=\"tw-w-[300px]\" data-test-id=\"attachments-flyout-content\">\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 onDownload={() =>\n appBridge.dispatch({\n name: 'downloadAsset',\n payload: item,\n })\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","TriggerComponent","AttachmentsButtonTrigger","isOpen","onOpenChange","internalItems","setInternalItems","useState","isFlyoutOpenInternal","setIsFlyoutOpenInternal","sensors","useSensors","useSensor","PointerSensor","KeyboardSensor","draggedAssetId","setDraggedAssetId","isUploadLoading","setIsUploadLoading","assetIdsLoading","setAssetIdsLoading","selectedFiles","setSelectedFiles","isEditing","useEditorState","openAssetChooser","closeAssetChooser","useAssetChooser","isControllingStateExternally","isFlyoutOpen","draggedItem","item","uploadFile","uploadResults","doneAll","useAssetUpload","handleFlyoutOpenChange","stateSetter","useEffect","onOpenAssetChooser","result","internalItem","onReplaceItemWithBrowse","toReplace","id","onReplaceItemWithUpload","uploadedAsset","handleDragStart","event","active","handleDragEnd","over","oldIndex","i","newIndex","sortedItems","arrayMove","jsx","Tooltip","TooltipPosition","Flyout","FlyoutPlacement","triggerProps","triggerRef","jsxs","DndContext","closestCenter","restrictToWindowEdges","SortableContext","rectSortingStrategy","SortableAttachmentItem","DragOverlay","AttachmentItem","AssetInput","AssetInputSize","fileList"],"mappings":"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"}

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

@@ -1,21 +1,29 @@
-import { jsxs as o, jsx as t } from "react/jsx-runtime";
-import { IconPaperclip16 as n, IconCaretDown12 as s } from "@frontify/fondue";
-import { joinClassNames as i } from "../../utilities/react/joinClassNames.es.js";
-const x = ({ children: e, isFlyoutOpen: r }) => /* @__PURE__ */ o(
-  "div",
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { IconPaperclip16 as a, IconCaretDown12 as i } from "@frontify/fondue";
+import { joinClassNames as w } from "../../utilities/react/joinClassNames.es.js";
+const b = ({
+  children: e,
+  isFlyoutOpen: r,
+  triggerProps: o,
+  triggerRef: n
+}) => /* @__PURE__ */ s(
+  "button",
   {
-    className: i([
+    className: w([
       "tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line",
       r ? "tw-bg-box-neutral-pressed tw-text-box-neutral-inverse-pressed" : "tw-bg-base hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed tw-text-box-neutral-inverse hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed"
     ]),
+    ...o,
+    ref: n,
+    "data-test-id": "attachments-button-trigger",
     children: [
-      /* @__PURE__ */ t(n, {}),
+      /* @__PURE__ */ t(a, {}),
       e,
-      /* @__PURE__ */ t(s, {})
+      /* @__PURE__ */ t(i, {})
     ]
   }
 );
 export {
-  x as AttachmentsButtonTrigger
+  b as AttachmentsButtonTrigger
 };
 //# sourceMappingURL=AttachmentsButtonTrigger.es.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"AttachmentsButtonTrigger.es.js","sources":["../../../src/components/Attachments/AttachmentsButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type AttachmentsTriggerProps } from './types';\n\nexport const AttachmentsButtonTrigger = ({ children, isFlyoutOpen }: AttachmentsTriggerProps) => (\n <~~div~~\n className={joinClassNames([\n 'tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line',\n isFlyoutOpen\n ? 'tw-bg-box-neutral-pressed tw-text-box-neutral-inverse-pressed'\n : 'tw-bg-base hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed tw-text-box-neutral-inverse hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',\n ])}\n >\n <IconPaperclip16 />\n {children}\n <IconCaretDown12 />\n </~~div~~>\n);\n"],"names":["AttachmentsButtonTrigger","children","isFlyoutOpen","jsxs","joinClassNames","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;AAQO,MAAMA,IAA2B,CAAC,~~EAAE~~,UAAAC,~~GAAU~~,cAAAC,~~EACjD~~,~~MAAA~~,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAe;AAAA,MACtB;AAAA,~~MACAF~~,IACM,kEACA;AAAA,IAAA,CACT;AAAA,~~IAED~~,UAAA;AAAA,MAAA,gBAAAG,EAACC,GAAgB,EAAA;AAAA,~~MAChBL~~;AAAA,~~wBACAM~~,GAAgB,EAAA;AAAA,IAAA;AAAA,EAAA;AACrB;"}
1	+ {"version":3,"file":"AttachmentsButtonTrigger.es.js","sources":["../../../src/components/Attachments/AttachmentsButtonTrigger.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCaretDown12, IconPaperclip16 } from '@frontify/fondue';\n\nimport { joinClassNames } from '../../utilities';\n\nimport { type AttachmentsTriggerProps } from './types';\n\nexport const AttachmentsButtonTrigger = ({\n children,\n isFlyoutOpen,\n triggerProps,\n triggerRef,\n}: AttachmentsTriggerProps) => (\n <button\n className={joinClassNames([\n 'tw-flex tw-text-xs tw-font-body tw-items-center tw-gap-1 tw-rounded-full tw-outline tw-outline-1 tw-outline-offset-1 tw-p-1.5 tw-outline-line',\n isFlyoutOpen\n ? 'tw-bg-box-neutral-pressed tw-text-box-neutral-inverse-pressed'\n : 'tw-bg-base hover:tw-bg-box-neutral-hover active:tw-bg-box-neutral-pressed tw-text-box-neutral-inverse hover:tw-text-box-neutral-inverse-hover active:tw-text-box-neutral-inverse-pressed',\n ])}\n {...triggerProps}\n ref={triggerRef}\n data-test-id=\"attachments-button-trigger\"\n >\n <IconPaperclip16 />\n {children}\n <IconCaretDown12 />\n </button>\n);\n"],"names":["AttachmentsButtonTrigger","children","isFlyoutOpen","triggerProps","triggerRef","jsxs","joinClassNames","jsx","IconPaperclip16","IconCaretDown12"],"mappings":";;;AAQO,MAAMA,IAA2B,CAAC;AAAA,EACrC,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AACJ,MACI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAWC,EAAe;AAAA,MACtB;AAAA,MACAJ,IACM,kEACA;AAAA,IAAA,CACT;AAAA,IACA,GAAGC;AAAA,IACJ,KAAKC;AAAA,IACL,gBAAa;AAAA,IAEb,UAAA;AAAA,MAAA,gBAAAG,EAACC,GAAgB,EAAA;AAAA,MAChBP;AAAA,wBACAQ,GAAgB,EAAA;AAAA,IAAA;AAAA,EAAA;AACrB;"}