npm - @frontify/guideline-blocks-settings - Versions diffs - 0.30.0 → 0.30.2 - Mend

@frontify/guideline-blocks-settings 0.30.0 → 0.30.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 (24) hide show

package/CHANGELOG.md +27 -0
package/dist/components/Attachments/AttachmentItem.es.js +109 -128
package/dist/components/Attachments/AttachmentItem.es.js.map +1 -1
package/dist/components/Attachments/Attachments.es.js +74 -74
package/dist/components/Attachments/Attachments.es.js.map +1 -1
package/dist/components/Attachments/AttachmentsButtonTrigger.es.js +1 -1
package/dist/components/Attachments/AttachmentsButtonTrigger.es.js.map +1 -1
package/dist/components/BlockItemWrapper/Toolbar/ToolbarSegment.es.js +1 -1
package/dist/components/BlockItemWrapper/Toolbar/ToolbarSegment.es.js.map +1 -1
package/dist/index.cjs.js +3 -3
package/dist/index.cjs.js.map +1 -1
package/dist/index.d.ts +20 -2
package/dist/index.es.js +183 -181
package/dist/index.es.js.map +1 -1
package/dist/index.umd.js +3 -3
package/dist/index.umd.js.map +1 -1
package/dist/styles.css +1 -1
package/package.json +4 -4
package/src/components/Attachments/AttachmentItem.tsx +0 -20
package/src/components/Attachments/Attachments.spec.ct.tsx +0 -21
package/src/components/Attachments/Attachments.tsx +6 -5
package/src/components/Attachments/AttachmentsButtonTrigger.tsx +1 -1
package/src/components/BlockItemWrapper/Toolbar/ToolbarSegment.tsx +1 -1
package/src/components/BlockItemWrapper/index.ts +1 -0

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,32 @@
 # @frontify/guideline-blocks-settings
+## 0.30.2
+### Patch Changes
+- [#687](https://github.com/Frontify/brand-sdk/pull/687) [`b044981`](https://github.com/Frontify/brand-sdk/commit/b0449814d55554e82507e1341d0f42a35f17a5e5) Thanks [@ragi96](https://github.com/ragi96)! - chore(Attachments): replace deprecated functions with hooks
+- [#696](https://github.com/Frontify/brand-sdk/pull/696) [`edc00b0`](https://github.com/Frontify/brand-sdk/commit/edc00b0cb1b04753e1563231eb1e28f9e7d05670) Thanks [@SamCreasey](https://github.com/SamCreasey)! - fix(Attachments): Add line-height class to `AttachmentsButtonTrigger`.
+- [#695](https://github.com/Frontify/brand-sdk/pull/695) [`d7764c1`](https://github.com/Frontify/brand-sdk/commit/d7764c129ee1d61aaed4ce519e70eb5d0984bfec) Thanks [@ragi96](https://github.com/ragi96)! - chore: bump @frontify/fondue to v12.0.0-beta.395
+- [#689](https://github.com/Frontify/brand-sdk/pull/689) [`6c34c1c`](https://github.com/Frontify/brand-sdk/commit/6c34c1c8e354f95bb873a70bceef0939198574c4) Thanks [@fulopdaniel](https://github.com/fulopdaniel)! - feat(Attachments): temporarily disable sorting
+- Updated dependencies [[`d79e69a`](https://github.com/Frontify/brand-sdk/commit/d79e69a1c6d8f901b7f91866a92fd0d99363f07d), [`d7764c1`](https://github.com/Frontify/brand-sdk/commit/d7764c129ee1d61aaed4ce519e70eb5d0984bfec)]:
+  - @frontify/sidebar-settings@0.9.0
+## 0.30.1
+### Patch Changes
+- [#691](https://github.com/Frontify/brand-sdk/pull/691) [`2a2f106`](https://github.com/Frontify/brand-sdk/commit/2a2f106c0f79c7d43dfddf3d0193fa9eeb7835a3) Thanks [@SamCreasey](https://github.com/SamCreasey)! - Toolbar components and types have been made available in build
+- [#692](https://github.com/Frontify/brand-sdk/pull/692) [`43866c2`](https://github.com/Frontify/brand-sdk/commit/43866c28fa470d5dbf4e61a7d42796904629fead) Thanks [@SamCreasey](https://github.com/SamCreasey)! - BlockItemToolbar: Force line-height to be 1 on toolbar items to prevent wrapping element height from being miscalculated.
+- Updated dependencies [[`3fa74ba`](https://github.com/Frontify/brand-sdk/commit/3fa74badfedd8c52661f23e0528dc35d8a10062d)]:
+  - @frontify/app-bridge@3.0.2
+  - @frontify/sidebar-settings@0.8.3
 ## 0.30.0
 ### Minor Changes

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

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

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

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