@frontify/guideline-blocks-settings 0.31.1 → 0.31.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frontify/guideline-blocks-settings",
-  "version": "0.31.1",
+  "version": "0.31.3",
   "description": "Provides types and helpers for the guideline block development",
   "sideEffects": false,
   "main": "dist/index.umd.js",
@@ -65,7 +65,7 @@
     "@frontify/sidebar-settings": "^0.9.1"
   },
   "peerDependencies": {
-    "@frontify/app-bridge": "^3.0.0",
+    "@frontify/app-bridge": "^3.0.0 || ^4.0.0-alpha.0",
     "react": "^18",
     "react-dom": "^18"
   },

package/setupTests.ts

@@ -1,11 +1,16 @@
 /* (c) Copyright Frontify Ltd., all rights reserved. */
 
-import { afterEach, vi } from 'vitest';
+import { afterEach, beforeAll, vi } from 'vitest';
+import { configure } from '@testing-library/react';
 
 vi.stubGlobal('crypto', {
     getRandomValues: vi.fn(),
 });
 
+beforeAll(() => {
+    configure({ testIdAttribute: 'data-test-id' });
+});
+
 afterEach(() => {
     vi.restoreAllMocks();
 });

package/src/hooks/useAttachments.spec.tsx

@@ -8,11 +8,7 @@ import { AttachmentsProvider, useAttachments, useAttachmentsContext, withAttachm
 
 const MOCK_SETTINGS_ID = 'attachments';
 
-/**
- * @vitest-environment happy-dom
- */
-
-describe('useAttachments', () => {
+describe('useAttachments', async () => {
     it('should have 1 attachment if attachment is added', async () => {
         const STUB_WITH_NO_ASSETS = getAppBridgeBlockStub({
             blockId: 1,
@@ -115,7 +111,7 @@ describe('withAttachmentsProvider', () => {
             return (
                 <ul>
                     {context.attachments.map((attachment) => (
-                        <li key={attachment.id} role="list">
+                        <li key={attachment.id} data-test-id="item-test">
                             {attachment.id}
                         </li>
                     ))}
@@ -123,8 +119,8 @@ describe('withAttachmentsProvider', () => {
             );
         }, MOCK_SETTINGS_ID);
 
-        const { getAllByRole } = render(<Component appBridge={STUB_WITH_THREE_ASSETS} />);
+        const { getAllByTestId } = render(<Component appBridge={STUB_WITH_THREE_ASSETS} />);
 
-        await waitFor(() => expect(getAllByRole('list')).toHaveLength(3));
+        await waitFor(() => expect(getAllByTestId('item-test')).toHaveLength(3));
     });
 });

package/src/hooks/useAttachments.tsx

@@ -5,24 +5,19 @@ import { type ReactNode, createContext, useContext } from 'react';
 
 import { type BlockProps } from '../index';
 
-export const useAttachments = (appBridge: AppBridgeBlock, assetId: string) => {
-    const { blockAssets, updateAssetIdsFromKey } = useBlockAssets(appBridge);
-    const attachments = blockAssets?.[assetId] || [];
+export const useAttachments = (appBridge: AppBridgeBlock, attachmentKey: string) => {
+    const { blockAssets, addAssetIdsToKey, deleteAssetIdsFromKey, updateAssetIdsFromKey } = useBlockAssets(appBridge);
+    const attachments = blockAssets?.[attachmentKey] || [];
 
     const onAttachmentsAdd = async (newAssets: Asset[]) => {
-        const newAssetIds = attachments.map((attachment) => attachment.id);
-        for (const asset of newAssets) {
-            newAssetIds.push(asset.id);
-        }
-        await updateAssetIdsFromKey(assetId, newAssetIds);
+        await addAssetIdsToKey(
+            attachmentKey,
+            newAssets.map((asset) => asset.id),
+        );
     };
 
     const onAttachmentDelete = async (assetToDelete: Asset) => {
-        const newAssetIds = attachments
-            .filter((attachment) => attachment.id !== assetToDelete.id)
-            .map((attachment) => attachment.id);
-
-        await updateAssetIdsFromKey(assetId, newAssetIds);
+        await deleteAssetIdsFromKey(attachmentKey, [assetToDelete.id]);
     };
 
     const onAttachmentReplace = async (attachmentToReplace: Asset, newAsset: Asset) => {
@@ -30,13 +25,13 @@ export const useAttachments = (appBridge: AppBridgeBlock, assetId: string) => {
             attachment.id === attachmentToReplace.id ? newAsset.id : attachment.id,
         );
 
-        await updateAssetIdsFromKey(assetId, newAssetIds);
+        await updateAssetIdsFromKey(attachmentKey, newAssetIds);
     };
 
     const onAttachmentsSorted = async (assets: Asset[]) => {
         const newAssetIds = assets.map((asset) => asset.id);
 
-        await updateAssetIdsFromKey(assetId, newAssetIds);
+        await updateAssetIdsFromKey(attachmentKey, newAssetIds);
     };
 
     return {