0.1.3 (#266)

* Added github releases (#264)

* Added github release

* Add github release

* Update changelog

* Added skip tests on draft PR (#265)

* Added skip tests on draft PR

* Update changelog

* Add test log

* Remove log

* Refactored unlock panel components (#255)

* Refactored unlock panel footer

* Updated unlock panel footer

* Refactored unlock-panel-group component

* Updated imports

* Fixed trim component flickering

* Fixed trim flickering

* Fixes after review

* Refactored unlock-provider-button to functional component

* Fixed trim flickering

* Update changelog

* updates

* Upgraded version

---------

Co-authored-by: Gavrila Andrei <[email protected]>

Author: iuliacimpeanu

.github/workflows/changelog.yml

@@ -1,4 +1,4 @@
-name: "CHANGELOG entry secretary"
+name: 'CHANGELOG entry secretary'
 on:
   pull_request:
     branches: [main, development]
@@ -9,8 +9,9 @@ on:
     types: [opened, synchronize, reopened, ready_for_review, labeled, unlabeled]
 
 jobs:
-  # Enforces the update of a changelog file on every pull request 
+  # Enforces the update of a changelog file on every pull request
   changelog:
     runs-on: ubuntu-latest
+    if: ${{ !github.event.pull_request.draft }}
     steps:
-    - uses: dangoslen/changelog-enforcer@v3
+      - uses: dangoslen/changelog-enforcer@v3

.github/workflows/npm-publish.yml

@@ -47,6 +47,28 @@ jobs:
         id: package
         uses: andreigiura/[email protected]
 
+      - name: Create GitHub Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        if: ${{ steps.package.outputs.is-prerelease == 'false' }}
+        run: |
+          RELEASE_TAG=v${{ steps.package.outputs.version }}
+          echo "Creating release for version: $RELEASE_TAG"
+
+          changelog_content=$(awk "/^## \[\[?${RELEASE_TAG#v}[^\]]*\]/{flag=1; next} /^## \[/{flag=0} flag" CHANGELOG.md)
+
+          cat > release_notes.md << EOF
+          ## What's Changed
+
+          $changelog_content
+          EOF
+
+          # Create the release
+          gh release create "$RELEASE_TAG" \
+            --target=$GITHUB_SHA \
+            --title="$RELEASE_TAG" \
+            --notes-file release_notes.md
+
       - name: Publish to npmjs next version
         env:
           NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

.github/workflows/pre-merge-unit-tests.yml

@@ -1,6 +1,7 @@
 name: 'Stencil Unit Tests'
 on:
   pull_request:
+    types: [opened, synchronize, reopened, ready_for_review]
     branches: [main, development]
     paths:
       - 'src/**'
@@ -18,6 +19,7 @@ concurrency:
 jobs:
   run-unit-tests:
     runs-on: ubuntu-latest
+    if: ${{ !github.event.pull_request.draft }}
     steps:
       - name: Fix permissions
         run: |

CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [[0.1.3](https://github.com/multiversx/mx-sdk-dapp-ui/pull/266)] - 2025-11-12
+
+- [Added skip tests if PR is in draft](https://github.com/multiversx/mx-sdk-dapp-ui/pull/265)
+- [Refactored unlock panel components](https://github.com/multiversx/mx-sdk-dapp-ui/pull/255)
+- [Added github release on publish](https://github.com/multiversx/mx-sdk-dapp-ui/pull/264)
+
 ## [[0.1.2](https://github.com/multiversx/mx-sdk-dapp-ui/pull/263)] - 2025-11-06
 
 - [Added expose EventBus from utils](https://github.com/multiversx/mx-sdk-dapp-ui/pull/262)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiversx/sdk-dapp-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "A library to hold UI components for a dApp on the MultiversX blockchain",
   "author": "MultiversX",
   "license": "MIT",
@@ -141,4 +141,4 @@
     "typescript": "^5.7.3",
     "vite": "^7.0.6"
   }
-}
+}

src/common/Trim/Trim.tsx

@@ -22,6 +22,8 @@ export function Trim({
     let currentTrimFontSize = '1rem';
     let trimFullElement: HTMLDivElement;
     let trimWrapperElement: HTMLDivElement;
+    let isCurrentlyOverflowing: boolean | null = null;
+    let isCheckingOverflow = false;
 
     const handleTrimElementReference = (element: HTMLDivElement) => {
         if (element) {
@@ -64,43 +66,94 @@ export function Trim({
     }
 
     const checkOverflow = () => {
-        if (!fullWidthUntrimmedElementReference || !trimElementReference || !trimFullElement || !trimWrapperElement) {
+        if (isCheckingOverflow) {
             return;
         }
 
-        const hiddenFullWidthElementWidth = fullWidthUntrimmedElementReference.scrollWidth;
-        const trimmedElementWidth = trimElementReference.clientWidth;
-        const isTrimElementOverflowing = hiddenFullWidthElementWidth > trimmedElementWidth;
-
-        if (safeWindow) {
-            currentTrimFontSize = safeWindow.getComputedStyle(trimElementReference).fontSize;
+        if (!fullWidthUntrimmedElementReference || !trimElementReference || !trimFullElement || !trimWrapperElement) {
+            return;
         }
 
-        const getIdentifierClass = (classes: string) => classes.split(' ')[0];
-
-        const trimLeftSelector = `.${getIdentifierClass(styles.trimLeft)}`;
-        const trimRightSelector = `.${getIdentifierClass(styles.trimRight)}`;
+        isCheckingOverflow = true;
 
-        const trimLeftElement = trimElementReference.querySelector(trimLeftSelector) as HTMLElement;
-        const trimRightElement = trimElementReference.querySelector(trimRightSelector) as HTMLElement;
-        if (trimLeftElement) {
-            trimLeftElement.style.fontSize = currentTrimFontSize;
+        if (resizeObserver) {
+            resizeObserver.disconnect();
         }
 
-        if (trimRightElement) {
-            trimRightElement.style.fontSize = currentTrimFontSize;
-        }
+
+        const getIdentifierClass = (classes: string) => classes.split(' ')[0];
 
         const trimFullVisibleClasses = styles.trimFullVisible.split(/\s+/);
         const trimWrapperVisibleClasses = styles.trimWrapperVisible.split(/\s+/);
 
-        if (isTrimElementOverflowing) {
+        const hasFullVisible = trimFullElement.classList.contains(getIdentifierClass(styles.trimFullVisible));
+        const hasWrapperVisible = trimWrapperElement.classList.contains(getIdentifierClass(styles.trimWrapperVisible));
+
+        if (hasFullVisible) {
             trimFullElement.classList.remove(...trimFullVisibleClasses);
-            trimWrapperElement.classList.add(...trimWrapperVisibleClasses);
-        } else {
-            trimFullElement.classList.add(...trimFullVisibleClasses);
+        }
+        if (hasWrapperVisible) {
             trimWrapperElement.classList.remove(...trimWrapperVisibleClasses);
         }
+
+        const hiddenFullWidthElementWidth = fullWidthUntrimmedElementReference.scrollWidth;
+        const trimmedElementWidth = trimElementReference.clientWidth;
+        const isTrimElementOverflowing = hiddenFullWidthElementWidth > trimmedElementWidth;
+
+        if (isCurrentlyOverflowing === isTrimElementOverflowing) {
+            if (hasFullVisible) {
+                trimFullElement.classList.add(...trimFullVisibleClasses);
+            }
+            if (hasWrapperVisible) {
+                trimWrapperElement.classList.add(...trimWrapperVisibleClasses);
+            }
+
+            isCheckingOverflow = false;
+
+            setTimeout(() => {
+                if (resizeObserver && trimElementReference) {
+                    resizeObserver.observe(trimElementReference);
+                }
+            });
+            return;
+        }
+
+        isCurrentlyOverflowing = isTrimElementOverflowing;
+
+        requestAnimationFrame(() => {
+            if (safeWindow) {
+                currentTrimFontSize = safeWindow.getComputedStyle(trimElementReference).fontSize;
+            }
+
+            const trimLeftSelector = `.${getIdentifierClass(styles.trimLeft)}`;
+            const trimRightSelector = `.${getIdentifierClass(styles.trimRight)}`;
+
+            const trimLeftElement = trimElementReference.querySelector(trimLeftSelector) as HTMLElement;
+            const trimRightElement = trimElementReference.querySelector(trimRightSelector) as HTMLElement;
+            if (trimLeftElement) {
+                trimLeftElement.style.fontSize = currentTrimFontSize;
+            }
+
+            if (trimRightElement) {
+                trimRightElement.style.fontSize = currentTrimFontSize;
+            }
+
+            if (isTrimElementOverflowing) {
+                trimFullElement.classList.remove(...trimFullVisibleClasses);
+                trimWrapperElement.classList.add(...trimWrapperVisibleClasses);
+            } else {
+                trimFullElement.classList.add(...trimFullVisibleClasses);
+                trimWrapperElement.classList.remove(...trimWrapperVisibleClasses);
+            }
+
+            isCheckingOverflow = false;
+
+            requestAnimationFrame(() => {
+                if (resizeObserver && trimElementReference) {
+                    resizeObserver.observe(trimElementReference);
+                }
+            });
+        });
     };
 
     const middleTextIndex = Math.floor(text.length / 2);

src/common/UnlockButton/UnlockButton.tsx

@@ -13,17 +13,7 @@ import { safeWindow } from 'constants/window.constants';
 import type { IProviderBase } from 'types/provider.types';
 import { ProviderTypeEnum } from 'types/provider.types';
 import { getDetectedBrowser } from 'utils/getDetectedBrowser';
-
-// prettier-ignore
-const styles = {
-  unlockButton: 'unlock-button mvx:pl-3 mvx:pr-4 mvx:h-15 mvx:flex! mvx:gap-4 mvx:cursor-pointer mvx:items-center mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:bg-secondary mvx:hover:bg-hover',
-  unlockButtonIcon: 'unlock-button-icon mvx:-order-1 mvx:h-10 mvx:flex mvx:relative mvx:z-1 mvx:items-center mvx:justify-center mvx:w-10',
-  unlockButtonIconClipped: 'mvx:items-end mvx:justify-start',
-  unlockButtonLabel: 'unlock-button-label mvx:text-base mvx:relative mvx:z-1 mvx:text-primary mvx:leading-none',
-  unlockButtonStatus: 'unlock-button-status mvx:ml-auto mvx:relative mvx:rounded-3xl mvx:z-1 mvx:leading-none mvx:flex mvx:items-center mvx:py-1 mvx:px-2 mvx:font-medium mvx:gap-1 mvx:text-xs mvx:bg-surface mvx:border mvx:border-solid mvx:border-outline',
-  unlockButtonStatusText: 'unlock-button-status-text mvx:text-accent',
-  unlockButtonStatusIcon: 'unlock-button-status-icon mvx:flex mvx:items-center mvx:text-accent mvx:w-2.5 mvx:h-2.5',
-} satisfies Record<string, string>;
+import styles from './unlockButton.styles';
 
 interface UnlockButtonPropsType {
   label: string;

src/common/UnlockButton/unlockButton.styles.ts

@@ -0,0 +1,10 @@
+// prettier-ignore
+export default {
+    unlockButton: 'unlock-button mvx:pl-3 mvx:pr-4 mvx:h-15 mvx:flex mvx:gap-4 mvx:cursor-pointer mvx:items-center mvx:transition-all mvx:duration-200 mvx:ease-in-out mvx:bg-secondary mvx:hover:bg-hover',
+    unlockButtonIcon: 'unlock-button-icon mvx:-order-1 mvx:h-10 mvx:flex mvx:relative mvx:z-1 mvx:items-center mvx:justify-center mvx:w-10',
+    unlockButtonIconClipped: 'mvx:items-end mvx:justify-start',
+    unlockButtonLabel: 'unlock-button-label mvx:text-base mvx:relative mvx:z-1 mvx:text-primary mvx:leading-none',
+    unlockButtonStatus: 'unlock-button-status mvx:ml-auto mvx:relative mvx:rounded-3xl mvx:z-1 mvx:leading-none mvx:flex mvx:items-center mvx:py-1 mvx:px-2 mvx:font-medium mvx:gap-1 mvx:text-xs mvx:bg-surface mvx:border mvx:border-solid mvx:border-outline',
+    unlockButtonStatusText: 'unlock-button-status-text mvx:text-accent',
+    unlockButtonStatusIcon: 'unlock-button-status-icon mvx:flex mvx:items-center mvx:text-accent mvx:w-2.5 mvx:h-2.5',
+} satisfies Record<string, string>;

src/components.d.ts

@@ -17,7 +17,7 @@ import { ITransactionListItem as ITransactionListItem1 } from "./components/visu
 import { IToastDataState, ITransactionProgressState } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type";
 import { TransactionStatusEnum } from "./constants/transactionStatus.enum";
 import { TransactionRowType } from "./components/controlled/transactions-table/transactions-table.type";
-import { IProviderBase, ProviderTypeEnum } from "./types/provider.types";
+import { IProviderBase } from "./types/provider.types";
 import { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d";
 export { IAddressTableData } from "./types/address-table.types";
 export { ButtonSizeEnum, ButtonVariantEnum } from "./components/visual/button/button.types";
@@ -31,7 +31,7 @@ export { ITransactionListItem as ITransactionListItem1 } from "./components/visu
 export { IToastDataState, ITransactionProgressState } from "./components/functional/toasts-list/components/transaction-toast/transaction-toast.type";
 export { TransactionStatusEnum } from "./constants/transactionStatus.enum";
 export { TransactionRowType } from "./components/controlled/transactions-table/transactions-table.type";
-export { IProviderBase, ProviderTypeEnum } from "./types/provider.types";
+export { IProviderBase } from "./types/provider.types";
 export { IEventBus as IEventBus1, unknown as IWalletConnectPanelData } from "./components.d";
 export namespace Components {
     interface MvxAddressTable {
@@ -397,20 +397,6 @@ export namespace Components {
         "closeWithAnimation": () => Promise<unknown>;
         "getEventBus": () => Promise<IEventBus>;
     }
-    interface MvxUnlockPanelFooter {
-        "walletAddress": string;
-    }
-    interface MvxUnlockPanelGroup {
-        "class"?: string;
-        /**
-          * @default []
-         */
-        "providers": IProviderBase[];
-    }
-    interface MvxUnlockProviderButton {
-        "class"?: string;
-        "provider": IProviderBase<ProviderTypeEnum>;
-    }
     interface MvxWalletConnect {
         /**
           * @default { wcURI: '' }
@@ -514,10 +500,6 @@ export interface MvxTransactionToastContentCustomEvent<T> extends CustomEvent<T>
     detail: T;
     target: HTMLMvxTransactionToastContentElement;
 }
-export interface MvxUnlockPanelGroupCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLMvxUnlockPanelGroupElement;
-}
 export interface MvxWalletConnectScanCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMvxWalletConnectScanElement;
@@ -1024,35 +1006,6 @@ declare global {
         prototype: HTMLMvxUnlockPanelElement;
         new (): HTMLMvxUnlockPanelElement;
     };
-    interface HTMLMvxUnlockPanelFooterElement extends Components.MvxUnlockPanelFooter, HTMLStencilElement {
-    }
-    var HTMLMvxUnlockPanelFooterElement: {
-        prototype: HTMLMvxUnlockPanelFooterElement;
-        new (): HTMLMvxUnlockPanelFooterElement;
-    };
-    interface HTMLMvxUnlockPanelGroupElementEventMap {
-        "login": IProviderBase;
-    }
-    interface HTMLMvxUnlockPanelGroupElement extends Components.MvxUnlockPanelGroup, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLMvxUnlockPanelGroupElementEventMap>(type: K, listener: (this: HTMLMvxUnlockPanelGroupElement, ev: MvxUnlockPanelGroupCustomEvent<HTMLMvxUnlockPanelGroupElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLMvxUnlockPanelGroupElementEventMap>(type: K, listener: (this: HTMLMvxUnlockPanelGroupElement, ev: MvxUnlockPanelGroupCustomEvent<HTMLMvxUnlockPanelGroupElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLMvxUnlockPanelGroupElement: {
-        prototype: HTMLMvxUnlockPanelGroupElement;
-        new (): HTMLMvxUnlockPanelGroupElement;
-    };
-    interface HTMLMvxUnlockProviderButtonElement extends Components.MvxUnlockProviderButton, HTMLStencilElement {
-    }
-    var HTMLMvxUnlockProviderButtonElement: {
-        prototype: HTMLMvxUnlockProviderButtonElement;
-        new (): HTMLMvxUnlockProviderButtonElement;
-    };
     interface HTMLMvxWalletConnectElement extends Components.MvxWalletConnect, HTMLStencilElement {
     }
     var HTMLMvxWalletConnectElement: {
@@ -1176,9 +1129,6 @@ declare global {
         "mvx-trim": HTMLMvxTrimElement;
         "mvx-unlock-button": HTMLMvxUnlockButtonElement;
         "mvx-unlock-panel": HTMLMvxUnlockPanelElement;
-        "mvx-unlock-panel-footer": HTMLMvxUnlockPanelFooterElement;
-        "mvx-unlock-panel-group": HTMLMvxUnlockPanelGroupElement;
-        "mvx-unlock-provider-button": HTMLMvxUnlockProviderButtonElement;
         "mvx-wallet-connect": HTMLMvxWalletConnectElement;
         "mvx-wallet-connect-app-gallery-icon": HTMLMvxWalletConnectAppGalleryIconElement;
         "mvx-wallet-connect-app-store-icon": HTMLMvxWalletConnectAppStoreIconElement;
@@ -1561,21 +1511,6 @@ declare namespace LocalJSX {
     }
     interface MvxUnlockPanel {
     }
-    interface MvxUnlockPanelFooter {
-        "walletAddress"?: string;
-    }
-    interface MvxUnlockPanelGroup {
-        "class"?: string;
-        "onLogin"?: (event: MvxUnlockPanelGroupCustomEvent<IProviderBase>) => void;
-        /**
-          * @default []
-         */
-        "providers"?: IProviderBase[];
-    }
-    interface MvxUnlockProviderButton {
-        "class"?: string;
-        "provider"?: IProviderBase<ProviderTypeEnum>;
-    }
     interface MvxWalletConnect {
         /**
           * @default { wcURI: '' }
@@ -1680,9 +1615,6 @@ declare namespace LocalJSX {
         "mvx-trim": MvxTrim;
         "mvx-unlock-button": MvxUnlockButton;
         "mvx-unlock-panel": MvxUnlockPanel;
-        "mvx-unlock-panel-footer": MvxUnlockPanelFooter;
-        "mvx-unlock-panel-group": MvxUnlockPanelGroup;
-        "mvx-unlock-provider-button": MvxUnlockProviderButton;
         "mvx-wallet-connect": MvxWalletConnect;
         "mvx-wallet-connect-app-gallery-icon": MvxWalletConnectAppGalleryIcon;
         "mvx-wallet-connect-app-store-icon": MvxWalletConnectAppStoreIcon;
@@ -1755,9 +1687,6 @@ declare module "@stencil/core" {
             "mvx-trim": LocalJSX.MvxTrim & JSXBase.HTMLAttributes<HTMLMvxTrimElement>;
             "mvx-unlock-button": LocalJSX.MvxUnlockButton & JSXBase.HTMLAttributes<HTMLMvxUnlockButtonElement>;
             "mvx-unlock-panel": LocalJSX.MvxUnlockPanel & JSXBase.HTMLAttributes<HTMLMvxUnlockPanelElement>;
-            "mvx-unlock-panel-footer": LocalJSX.MvxUnlockPanelFooter & JSXBase.HTMLAttributes<HTMLMvxUnlockPanelFooterElement>;
-            "mvx-unlock-panel-group": LocalJSX.MvxUnlockPanelGroup & JSXBase.HTMLAttributes<HTMLMvxUnlockPanelGroupElement>;
-            "mvx-unlock-provider-button": LocalJSX.MvxUnlockProviderButton & JSXBase.HTMLAttributes<HTMLMvxUnlockProviderButtonElement>;
             "mvx-wallet-connect": LocalJSX.MvxWalletConnect & JSXBase.HTMLAttributes<HTMLMvxWalletConnectElement>;
             "mvx-wallet-connect-app-gallery-icon": LocalJSX.MvxWalletConnectAppGalleryIcon & JSXBase.HTMLAttributes<HTMLMvxWalletConnectAppGalleryIconElement>;
             "mvx-wallet-connect-app-store-icon": LocalJSX.MvxWalletConnectAppStoreIcon & JSXBase.HTMLAttributes<HTMLMvxWalletConnectAppStoreIconElement>;