@frontify/guideline-blocks-settings 0.33.1 → 0.33.3

package/{.eslintrc.js → .eslintrc.cjs}

@@ -3,6 +3,11 @@
 module.exports = {
     extends: ['@frontify/eslint-config-react'],
     plugins: ['notice'],
+    settings: {
+        react: {
+            version: 'detect',
+        },
+    },
     overrides: [
         {
             files: ['*.js', '*.ts', '*.tsx'],

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @frontify/guideline-blocks-settings
 
+## 0.33.3
+
+### Patch Changes
+
+- [`b0424c0`](https://github.com/Frontify/brand-sdk/commit/b0424c0a6dc1beef011c0d32124f53aed2e2a4b7) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Update dependencies
+
+- [#776](https://github.com/Frontify/brand-sdk/pull/776) [`29ef8e1`](https://github.com/Frontify/brand-sdk/commit/29ef8e1e64a6372d580af06a86ef39ca2052662a) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Remove CJS to embrace ESM
+
+- Updated dependencies [[`b0424c0`](https://github.com/Frontify/brand-sdk/commit/b0424c0a6dc1beef011c0d32124f53aed2e2a4b7), [`29ef8e1`](https://github.com/Frontify/brand-sdk/commit/29ef8e1e64a6372d580af06a86ef39ca2052662a), [`b0424c0`](https://github.com/Frontify/brand-sdk/commit/b0424c0a6dc1beef011c0d32124f53aed2e2a4b7)]:
+  - @frontify/sidebar-settings@0.9.4
+
+## 0.33.2
+
+### Patch Changes
+
+- [#766](https://github.com/Frontify/brand-sdk/pull/766) [`3775b46`](https://github.com/Frontify/brand-sdk/commit/3775b4651b6d700e7179a360190a92e7f0fe51e6) Thanks [@SamuelAlev](https://github.com/SamuelAlev)! - Update dependencies
+
+- Updated dependencies [[`3775b46`](https://github.com/Frontify/brand-sdk/commit/3775b4651b6d700e7179a360190a92e7f0fe51e6)]:
+  - @frontify/sidebar-settings@0.9.3
+
 ## 0.33.1
 
 ### Patch Changes

package/package.json

@@ -1,76 +1,75 @@
 {
   "name": "@frontify/guideline-blocks-settings",
-  "version": "0.33.1",
+  "type": "module",
+  "version": "0.33.3",
   "description": "Provides types and helpers for the guideline block development",
-  "sideEffects": false,
-  "main": "dist/index.umd.js",
-  "unpkg": "dist/index.umd.js",
-  "jsdelivr": "dist/index.umd.js",
-  "module": "dist/index.es.js",
-  "types": "dist/index.d.ts",
   "author": "Frontify Developers <developers@frontify.com>",
   "repository": {
     "type": "git",
     "url": "https://github.com/Frontify/brand-sdk",
     "directory": "packages/guideline-blocks-settings"
   },
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.es.js",
-      "require": "./dist/index.umd.js"
+      "require": "./dist/index.umd.js",
+      "import": "./dist/index.es.js"
     },
     "./styles": "./dist/styles.css"
   },
-  "devDependencies": {
-    "@babel/core": "^7.23.3",
-    "@frontify/eslint-config-typescript": "^0.16.2",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^14.1.2",
-    "@testing-library/user-event": "14.5.2",
-    "@types/node": "^18.18.11",
-    "@types/react": "^18.2.38",
-    "@types/react-dom": "^18.2.16",
-    "@types/sinon": "^17.0.2",
-    "@vitejs/plugin-react": "^4.2.0",
-    "autoprefixer": "^10.4.16",
-    "cypress": "^13.5.1",
-    "cypress-real-events": "^1.11.0",
-    "eslint": "^8.54.0",
-    "eslint-plugin-notice": "^0.9.10",
-    "happy-dom": "^12.10.3",
-    "mitt": "^3.0.1",
-    "msw": "^1.3.2",
-    "postcss": "^8.4.31",
-    "prettier": "^3.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rollup": "^3.29.4",
-    "sinon": "17.0.1",
-    "tailwindcss": "^3.4.1",
-    "typescript": "^5.3.2",
-    "vite": "^4.5.0",
-    "vite-plugin-dts": "^3.6.3",
-    "vite-plugin-externals": "^0.6.2",
-    "vitest": "^0.34.6"
+  "main": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "peerDependencies": {
+    "@frontify/app-bridge": "^3.0.0 || ^4.0.0-alpha.0",
+    "react": "^18",
+    "react-dom": "^18"
   },
   "dependencies": {
-    "@ctrl/tinycolor": "^4.0.2",
+    "@ctrl/tinycolor": "^4.0.3",
     "@dnd-kit/core": "^6.1.0",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
-    "@frontify/fondue": "12.0.0-beta.396",
+    "@frontify/fondue": "12.0.0-beta.404",
     "@react-aria/focus": "^3.14.0",
     "@react-stately/overlays": "^3.6.1",
     "@udecode/plate": "^21.5.0",
     "slate": "^0.94.1",
     "slate-react": "^0.98.3",
-    "@frontify/sidebar-settings": "^0.9.2"
+    "@frontify/sidebar-settings": "^0.9.4"
   },
-  "peerDependencies": {
-    "@frontify/app-bridge": "^3.0.0 || ^4.0.0-alpha.0",
-    "react": "^18",
-    "react-dom": "^18"
+  "devDependencies": {
+    "@babel/core": "^7.23.9",
+    "@frontify/eslint-config-react": "^0.16.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "14.5.2",
+    "@types/node": "^18.19.18",
+    "@types/react": "^18.2.58",
+    "@types/react-dom": "^18.2.19",
+    "@types/sinon": "^17.0.3",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^1.3.1",
+    "autoprefixer": "^10.4.17",
+    "cypress": "^13.6.6",
+    "cypress-real-events": "^1.12.0",
+    "eslint": "^8.56.0",
+    "eslint-plugin-notice": "^0.9.10",
+    "happy-dom": "^13.4.1",
+    "mitt": "^3.0.1",
+    "msw": "^1.3.2",
+    "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.12.0",
+    "sinon": "17.0.1",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3",
+    "vite": "^5.1.4",
+    "vite-plugin-dts": "^3.7.3",
+    "vite-plugin-externals": "^0.6.2",
+    "vitest": "^1.3.1"
   },
   "scripts": {
     "build": "vite build",
@@ -80,6 +79,7 @@
     "prettier:fix": "prettier --write .",
     "test": "vitest run --silent",
     "test:watch": "vitest",
+    "test:ui": "vitest --ui",
     "typecheck": "tsc --noEmit"
   }
 }

package/src/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/DragHandleToolbarButton.spec.tsx

@@ -82,7 +82,7 @@ describe('DragHandleToolbarButton', () => {
             <DragHandleToolbarButton tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} draggableProps={{}} />,
         );
 
-        const icons = [...getByTestId(TOOLBAR_BUTTON_ID).querySelectorAll('svg')];
+        const icons = [...getByTestId(TOOLBAR_BUTTON_ID).getElementsByTagName('svg')];
         expect(icons).toHaveLength(1);
         expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
     });

package/src/components/BlockItemWrapper/Toolbar/DragHandleToolbarButton/DragHandleToolbarButton.tsx

@@ -1,6 +1,6 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import { DEFAULT_DRAGGING_TOOLTIP, DEFAULT_DRAG_TOOLTIP } from '../../constants';
 import { useDragPreviewContext } from '../context/DragPreviewContext';
 import { BaseToolbarButton } from '../BaseToolbarButton';

package/src/components/BlockItemWrapper/Toolbar/FlyoutToolbarButton/FlyoutToolbarButton.spec.tsx

@@ -12,10 +12,10 @@ const TOOLTIP_ID = 'toolbar-button-tooltip';
 
 const TEST_FLYOUT_ID = 'test';
 const TEST_TOOLTIP = 'tooltip';
+
 /**
  * @vitest-environment happy-dom
  */
-
 describe('FlyoutToolbarButton', () => {
     it('should log error if not inside a flyout provider when opening', async () => {
         vi.spyOn(console, 'error');
@@ -109,7 +109,7 @@ describe('FlyoutToolbarButton', () => {
             </MultiFlyoutContextProvider>,
         );
 
-        const icons = [...getByTestId(BUTTON_ID).querySelectorAll('svg')];
+        const icons = [...getByTestId(BUTTON_ID).getElementsByTagName('svg')];
         expect(icons).toHaveLength(1);
         expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
     });

package/src/components/BlockItemWrapper/Toolbar/ToolbarButton/ToolbarButton.spec.tsx

@@ -63,7 +63,7 @@ describe('ToolbarButton', () => {
             <ToolbarButton onClick={vi.fn()} tooltip={TOOLTIP_CONTENT} icon={<IconAdobeCreativeCloud />} />,
         );
 
-        const icons = [...getByTestId(TOOLBAR_BUTTON_ID).querySelectorAll('svg')];
+        const icons = [...getByTestId(TOOLBAR_BUTTON_ID).getElementsByTagName('svg')];
         expect(icons).toHaveLength(1);
         expect(icons[0].outerHTML).toMatch('IconAdobeCreativeCloud');
     });

package/src/components/RichTextEditor/plugins/ButtonPlugin/createButtonPlugin.ts

@@ -77,7 +77,7 @@ export const createButtonPlugin = (appBridge: AppBridgeBlock) =>
             triggerFloatingButtonHotkeys: 'command+shift+k, ctrl+shift+k',
             appBridge,
         },
-        then: (editor, { type }) => ({
+        then: (_editor, { type }) => ({
             deserializeHtml: {
                 rules: [
                     {

package/tsconfig.json

@@ -1,27 +1,24 @@
 {
     "compilerOptions": {
-        "baseUrl": ".",
-        "strictNullChecks": true,
-        "strictFunctionTypes": true,
-        "alwaysStrict": true,
-        "isolatedModules": true,
+        "target": "ES2021",
+        "useDefineForClassFields": true,
+        "lib": ["ES2021", "DOM", "DOM.Iterable"],
         "module": "ESNext",
+        "skipLibCheck": true,
         "moduleResolution": "bundler",
-        "noImplicitAny": true,
-        "noImplicitReturns": true,
-        "noImplicitThis": true,
-        "noUnusedLocals": true,
-        "sourceMap": true,
-        "strict": true,
-        "target": "es6",
-        "jsx": "react-jsx",
-        "lib": ["dom", "dom.iterable", "esnext"],
+        "allowImportingTsExtensions": true,
         "resolveJsonModule": true,
-        "declaration": true,
-        "esModuleInterop": true,
-        "skipLibCheck": true,
-        "types": ["cypress", "node", "cypress-real-events"]
+        "isolatedModules": true,
+        "noEmit": true,
+        "jsx": "react-jsx",
+        "strict": true,
+        "noUncheckedIndexedAccess": false,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "noFallthroughCasesInSwitch": true,
+        "baseUrl": ".",
+        "types": ["@testing-library/jest-dom", "cypress", "cypress-real-events", "node"]
     },
-    "include": ["src/**/*", "./setupTests.ts"],
-    "exclude": ["node_modules", "dist"]
+    "include": ["src", "setupTests.ts"],
+    "references": [{ "path": "./tsconfig.node.json" }]
 }

package/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+    "compilerOptions": {
+        "composite": true,
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "allowSyntheticDefaultImports": true,
+        "resolveJsonModule": true,
+        "lib": ["ESNext"],
+        "target": "ESNext"
+    },
+    "include": [".eslintrc.cjs", "tailwind.config.ts", "vite.config.ts", "package.json"]
+}

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

@@ -1,174 +0,0 @@
-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,
-    draggableProps: c,
-    transformStyle: u,
-    isDragging: o,
-    isOverlay: a,
-    isLoading: n,
-    onDelete: d,
-    onReplaceWithBrowse: m,
-    onReplaceWithUpload: S,
-    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 } = 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: k,
-        style: {
-          ...u,
-          opacity: o && !a ? 0.3 : 1,
-          fontFamily: "var(-f-theme-settings-body-font-family)"
-        },
-        className: h([
-          "tw-cursor-pointer tw-text-left tw-w-full tw-relative tw-flex tw-gap-3 tw-px-5 tw-py-3 tw-items-center tw-group hover:tw-bg-box-neutral-hover",
-          o ? "tw-bg-box-neutral-hover" : ""
-        ]),
-        children: [
-          /* @__PURE__ */ t("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__ */ b(
-            "div",
-            {
-              "data-test-id": "attachments-actionbar",
-              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",
-                a || (r == null ? void 0 : r.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 && 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, {}) })
-                              },
-                              {
-                                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, {}) })
-                              }
-                            ]
-                          }
-                        ]
-                      }
-                    )
-                  }
-                ) })
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-y.displayName = "AttachmentItem";
-const st = (e) => {
-  const { attributes: s, listeners: c, setNodeRef: u, transform: o, transition: a, isDragging: n } = M({
-    id: e.item.id
-  }), d = {
-    transform: o ? `translate(${o.x}px, ${o.y}px)` : "",
-    transition: a,
-    zIndex: n ? 2 : 1
-  }, m = { ...s, ...c };
-  return /* @__PURE__ */ t(
-    y,
-    {
-      ref: u,
-      isDragging: n,
-      transformStyle: d,
-      draggableProps: m,
-      ...e
-    }
-  );
-};
-export {
-  y as AttachmentItem,
-  st as SortableAttachmentItem
-};
-//# sourceMappingURL=AttachmentItem.es.js.map

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

@@ -1 +0,0 @@
-{"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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"}