@iota/apps-ui-kit 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "sideEffects": false,
   "repository": "https://github.com/iotaledger/ts-packages",
   "license": "Apache-2.0",
@@ -27,7 +27,7 @@
     "classnames": "^2.5.1",
     "lodash.merge": "^4.6.2",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.7.5"
+    "@iota/apps-ui-icons": "0.7.6"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -58,12 +58,6 @@
     "vite-plugin-dts": "^4.5.4"
   },
   "scripts": {
-    "prettier:check": "prettier -c --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",
-    "prettier:fix": "prettier -w --ignore-unknown --ignore-path=../../.prettierignore --ignore-path=.prettierignore .",
-    "eslint:check": "eslint --max-warnings=0 .",
-    "eslint:fix": "pnpm run eslint:check --fix",
-    "lint": "pnpm run eslint:check && pnpm run prettier:check",
-    "lint:fix": "pnpm run eslint:fix && pnpm run prettier:fix",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build-package": "tsc --project tsconfig.package.json && vite build",

package/src/lib/components/atoms/divider/Divider.tsx

@@ -33,9 +33,8 @@ export function Divider({
     lineHeight = DEFAULT_LINE_HEIGHT,
 }: DividerProps): React.JSX.Element {
     // Set height and width of divider line based on type
-    const lineStyle = {
-        ...(type === DividerType.Horizontal ? { height: lineHeight } : { width: lineHeight }),
-    };
+    const lineStyle =
+        type === DividerType.Horizontal ? { height: lineHeight } : { width: lineHeight };
 
     let dividerSize = DIVIDER_FULL_WIDTH[type];
     if (width && type === DividerType.Horizontal) {

package/src/lib/components/atoms/info-box/InfoBox.tsx

@@ -59,7 +59,7 @@ export function InfoBox({
                     {icon}
                 </span>
             )}
-            <div className="flex flex-col gap-1">
+            <div className="flex min-w-0 flex-col gap-1 [overflow-wrap:anywhere]">
                 {title && <span className="infobox-text-title text-title-sm">{title}</span>}
                 {supportingText && (
                     <span className="infobox-supporting-text text-body-sm">{supportingText}</span>

package/src/lib/components/atoms/key-value-info/KeyValueInfo.tsx

@@ -119,12 +119,12 @@ export function KeyValueInfo({
             )}
         >
             <div
-                className={cx('flex shrink-0 flex-row items-center gap-x-0.5', {
+                className={cx('flex max-w-full shrink-0 flex-row items-center gap-x-0.5', {
                     'w-1/4': !fullwidth && !isReceiptLayout,
                 })}
             >
                 {keyIcon}
-                <span className="key-value-key-text-color break-normal text-body-md">
+                <span className="key-value-key-text-color min-w-0 break-words text-body-md">
                     {keyText}
                 </span>
                 {tooltipText && (

package/src/lib/components/atoms/tooltip/Tooltip.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useRef, useState, useLayoutEffect } from 'react';
-import type { PropsWithChildren, ReactNode } from 'react';
+import type { MouseEvent, PropsWithChildren, ReactNode } from 'react';
 import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import { TooltipPosition } from './tooltip.enums';
@@ -16,6 +16,13 @@ interface TooltipProps {
     closeDelay?: number;
 }
 
+const OPPOSITE_POSITION: Record<TooltipPosition, TooltipPosition> = {
+    [TooltipPosition.Top]: TooltipPosition.Bottom,
+    [TooltipPosition.Bottom]: TooltipPosition.Top,
+    [TooltipPosition.Left]: TooltipPosition.Right,
+    [TooltipPosition.Right]: TooltipPosition.Left,
+};
+
 export function Tooltip({
     text,
     position = TooltipPosition.Top,
@@ -29,7 +36,7 @@ export function Tooltip({
     const tooltipRef = useRef<HTMLDivElement>(null);
 
     const [visible, setVisible] = useState(false);
-    const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+    const [coords, setCoords] = useState({ top: 0, left: 0, overlapsTrigger: false });
 
     const openTimer = useRef<ReturnType<typeof setTimeout>>();
     const closeTimer = useRef<ReturnType<typeof setTimeout>>();
@@ -49,7 +56,7 @@ export function Tooltip({
         closeTimer.current = setTimeout(() => setVisible(false), closeDelay);
     };
 
-    const computePosition = (rect: DOMRect) =>
+    const computePosition = (rect: DOMRect, placement: TooltipPosition) =>
         ({
             [TooltipPosition.Top]: {
                 top: rect.top - offset,
@@ -79,7 +86,7 @@ export function Tooltip({
                 anchorX: 0,
                 anchorY: 0.5,
             },
-        })[position];
+        })[placement];
 
     const clampDelta = (boxStart: number, size: number, viewportSize: number, margin: number) => {
         const boxEnd = boxStart + size;
@@ -95,11 +102,23 @@ export function Tooltip({
         const tooltipEl = tooltipRef.current;
         if (!rect || !tooltipEl) return;
 
-        const pos = computePosition(rect);
-        tooltipEl.style.transform = pos.transform;
-
         const { width, height } = tooltipEl.getBoundingClientRect();
         const margin = 8;
+        const isVertical = position === TooltipPosition.Top || position === TooltipPosition.Bottom;
+
+        const fitsMainAxis = (pos: ReturnType<typeof computePosition>) =>
+            isVertical
+                ? clampDelta(pos.top - height * pos.anchorY, height, window.innerHeight, margin) ===
+                  0
+                : clampDelta(pos.left - width * pos.anchorX, width, window.innerWidth, margin) ===
+                  0;
+
+        let pos = computePosition(rect, position);
+        if (!fitsMainAxis(pos)) {
+            const flipped = computePosition(rect, OPPOSITE_POSITION[position]);
+            if (fitsMainAxis(flipped)) pos = flipped;
+        }
+        tooltipEl.style.transform = pos.transform;
 
         const boxLeft = pos.left - width * pos.anchorX;
         const boxTop = pos.top - height * pos.anchorY;
@@ -107,7 +126,15 @@ export function Tooltip({
         const deltaX = clampDelta(boxLeft, width, window.innerWidth, margin);
         const deltaY = clampDelta(boxTop, height, window.innerHeight, margin);
 
-        setCoords({ top: pos.top + deltaY, left: pos.left + deltaX });
+        const left = boxLeft + deltaX;
+        const top = boxTop + deltaY;
+        const overlapsTrigger =
+            left < rect.right &&
+            left + width > rect.left &&
+            top < rect.bottom &&
+            top + height > rect.top;
+
+        setCoords({ top: pos.top + deltaY, left: pos.left + deltaX, overlapsTrigger });
     }, [visible, position, offset]);
 
     useLayoutEffect(() => {
@@ -124,6 +151,15 @@ export function Tooltip({
         };
     }, [visible]);
 
+    // Keeps a link or button wrapping the trigger from acting on clicks meant to open the tooltip.
+    const handleTriggerClick = (event: MouseEvent<HTMLDivElement>) => {
+        const interactive = (event.target as Element).closest('a, button');
+        if (!interactive || triggerRef.current?.contains(interactive)) return;
+        event.preventDefault();
+        event.stopPropagation();
+        open();
+    };
+
     // z-[9999999999]: needed because we must exceed the popup’s ≈2 147 483 647 z-index;
     // otherwise the tooltip renders but stays invisible inside a Chrome extension
     const base = 'z-[9999999999] w-max rounded p-xs tooltip-bg tooltip-text-color';
@@ -137,6 +173,7 @@ export function Tooltip({
                 onFocus={open}
                 onMouseLeave={close}
                 onBlur={close}
+                onClick={handleTriggerClick}
             >
                 {children}
             </div>
@@ -153,7 +190,11 @@ export function Tooltip({
                             transition: 'opacity .15s ease',
                             opacity: 1,
                         }}
-                        className={cx(base, maxWidth)}
+                        className={cx(
+                            base,
+                            maxWidth,
+                            coords.overlapsTrigger && 'pointer-events-none',
+                        )}
                         onMouseEnter={open}
                         onMouseLeave={close}
                     >

package/src/lib/components/molecules/card/CardAction.tsx

@@ -51,7 +51,7 @@ export function CardAction({
                     <div className="card-action-title-color font-inter text-label-md">{title}</div>
                 )}
                 {subtitle && (
-                    <div className="card-action-subtitle-color font-inter text-label-sm">
+                    <div className="card-action-subtitle-color flex flex-row justify-end font-inter text-label-sm">
                         {subtitle}
                     </div>
                 )}

package/src/lib/components/molecules/card/CardBody.tsx

@@ -6,7 +6,7 @@ import { Tooltip } from '@/components/atoms/tooltip';
 import type { TooltipPosition } from '@/components/atoms/tooltip';
 
 export type CardBodyProps = {
-    title: string;
+    title: ReactNode;
     subtitle?: string | ReactNode;
     clickableAction?: React.ReactNode;
     icon?: React.ReactNode;

package/src/lib/components/molecules/select/Select.tsx

@@ -17,8 +17,7 @@ export type SelectOption =
     | { id: string; label: React.ReactNode };
 
 interface SelectProps
-    extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'>,
-        React.AriaAttributes {
+    extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'>, React.AriaAttributes {
     /**
      * The selected option value.
      */

package/src/lib/components/organisms/table/Table.tsx

@@ -8,6 +8,7 @@ import type { ButtonProps } from '@/components/atoms';
 import { Button, ButtonSize, ButtonType, Checkbox } from '@/components/atoms';
 import { TableCellBase, TableHeaderCell } from '@/components/molecules';
 import { ArrowLeft, DoubleArrowLeft, ArrowRight, DoubleArrowRight } from '@iota/apps-ui-icons';
+import { INTERACTIVE_ELEMENT_SELECTOR } from '@/lib/constants';
 
 export interface TablePaginationOptions {
     /**
@@ -147,7 +148,7 @@ export function Table({
                                     />
                                 </>
                             )}
-                            {action && action}
+                            {action}
                         </div>
                     )}
                     {supportingLabel || pageSizeSelector ? (
@@ -174,19 +175,36 @@ export function TableHeader({ children }: PropsWithChildren): JSX.Element {
     return <thead>{children}</thead>;
 }
 
+function isRowClickIgnored(event: React.MouseEvent<HTMLTableRowElement>): boolean {
+    const interactiveElement =
+        event.target instanceof Element && event.target.closest(INTERACTIVE_ELEMENT_SELECTOR);
+    if (interactiveElement && event.currentTarget.contains(interactiveElement)) return true;
+    return !!window.getSelection()?.toString();
+}
+
 export function TableRow({
     children,
     leading,
     onClick,
+    onAuxClick,
 }: PropsWithChildren<{
     leading?: React.ReactNode;
     onClick?: React.MouseEventHandler<HTMLTableRowElement>;
+    onAuxClick?: React.MouseEventHandler<HTMLTableRowElement>;
 }>): JSX.Element {
+    function withRowClickGuard(handler?: React.MouseEventHandler<HTMLTableRowElement>) {
+        if (!handler) return undefined;
+        return (event: React.MouseEvent<HTMLTableRowElement>) => {
+            if (!isRowClickIgnored(event)) handler(event);
+        };
+    }
+
     return (
         <tr
-            onClick={onClick}
+            onClick={withRowClickGuard(onClick)}
+            onAuxClick={withRowClickGuard(onAuxClick)}
             className={cx({
-                'cursor-pointer hover:bg-shader-neutral-light-8 dark:hover:bg-shader-neutral-dark-8':
+                'cursor-pointer row-hover:bg-shader-neutral-light-8 dark:row-hover:bg-shader-neutral-dark-8 inner-link:-mx-xxs inner-link:rounded inner-link:px-xxs inner-link:transition-colors inner-link-hover:bg-iota-primary-90/30 inner-link-hover:ring-1 inner-link-hover:ring-iota-primary-70/60 dark:inner-link-hover:bg-iota-primary-70/30':
                     onClick,
             })}
         >

package/src/lib/constants/index.ts

@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './colors.constants';
+export * from './interactive.constants';

package/src/lib/constants/interactive.constants.ts

@@ -0,0 +1,19 @@
+// Copyright (c) 2026 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const INTERACTIVE_ELEMENT_SELECTOR = [
+    'a',
+    'button',
+    'input',
+    'select',
+    'textarea',
+    'label',
+    '[role="button"]',
+    '[role="checkbox"]',
+    '[role="link"]',
+    '[role="switch"]',
+].join(',');
+
+export const ROW_LINK_ATTRIBUTE = 'data-row-link';
+
+export const ROW_LINK_PROPS = { [ROW_LINK_ATTRIBUTE]: true } as const;

package/src/lib/styles/base.css

@@ -40,8 +40,9 @@
     }
 
     :root.names {
-        --roboto-flex-variation-settings: 'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750,
-            'YTDE' -203, 'YTFI' 738, 'YTLC' 514, 'YTUC' 640, 'slnt' 0, 'wdth' 130;
+        --roboto-flex-variation-settings:
+            'GRAD' 0, 'XOPQ' 96, 'XTRA' 468, 'YOPQ' 79, 'YTAS' 750, 'YTDE' -203, 'YTFI' 738,
+            'YTLC' 514, 'YTUC' 640, 'slnt' 0, 'wdth' 130;
 
         .text-display-lg,
         .text-display-md,

package/src/lib/tailwind/base.presets.ts

@@ -16,13 +16,13 @@ import {
     generateVariableSpacing,
 } from './constants';
 import { THEMED_CUSTOM_COLORS } from './constants/customColors.constants';
-import { firefoxPlugin, namesVariant } from './plugins';
+import { firefoxPlugin, namesVariant, tableRowVariants } from './plugins';
 import { NAMES_GRADIENTS } from './constants/gradients.constants';
 
 export const BASE_CONFIG: Config = {
     content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
     darkMode: 'selector',
-    plugins: [firefoxPlugin, namesVariant],
+    plugins: [firefoxPlugin, namesVariant, tableRowVariants],
     theme: {
         extend: {
             fontSize: {

package/src/lib/tailwind/plugins.ts

@@ -2,6 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import plugin from 'tailwindcss/plugin';
+import {
+    INTERACTIVE_ELEMENT_SELECTOR,
+    ROW_LINK_ATTRIBUTE,
+} from '../constants/interactive.constants';
 
 export const firefoxPlugin = plugin(({ addVariant }) => {
     addVariant('firefox', '@-moz-document url-prefix()');
@@ -10,3 +14,13 @@ export const firefoxPlugin = plugin(({ addVariant }) => {
 export const namesVariant = plugin(({ addVariant }) => {
     addVariant('names', '&:is(.names *)');
 });
+
+export const tableRowVariants = plugin(({ addVariant }) => {
+    const innerLink = `a:not([${ROW_LINK_ATTRIBUTE}])`;
+    addVariant(
+        'row-hover',
+        `&:hover:not(:has(:is(${INTERACTIVE_ELEMENT_SELECTOR}):not([${ROW_LINK_ATTRIBUTE}]):hover))`,
+    );
+    addVariant('inner-link', `& ${innerLink}`);
+    addVariant('inner-link-hover', `& ${innerLink}:hover`);
+});

package/src/storybook/stories/atoms/Panel.stories.tsx

@@ -12,7 +12,7 @@ const meta: Meta<typeof Panel> = {
             <Panel {...props}>
                 <div className="flex flex-col items-start gap-2">
                     <Title title="Title" subtitle="subtitle" />
-                    <div className=" px-md--rs pb-sm--rs">
+                    <div className="px-md--rs pb-sm--rs">
                         <Address text="0x0d7...3f34" isCopyable />
                         <Address text="0x0d7...3f35" isCopyable />
                         <Address text="0x0d7...3f36" isCopyable />