@iota/apps-ui-kit 0.10.1 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "sideEffects": false,
   "repository": "https://github.com/iotaledger/ts-packages",
   "license": "Apache-2.0",

package/src/lib/components/atoms/badge/Badge.tsx

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import cx from 'classnames';
+import type { ReactNode } from 'react';
 import { BadgeSize, BadgeType } from './badge.enums';
 import { BACKGROUND_COLORS, BORDER_COLORS, TEXT_COLORS } from './badge.classes';
 
@@ -18,9 +19,18 @@ interface BadgeProps {
      * The size of the badge
      */
     size?: BadgeSize;
+    /**
+     * An icon rendered before the label.
+     */
+    icon?: ReactNode;
 }
 
-export function Badge({ type, label, size = BadgeSize.Medium }: BadgeProps): React.JSX.Element {
+export function Badge({
+    type,
+    label,
+    size = BadgeSize.Medium,
+    icon,
+}: BadgeProps): React.JSX.Element {
     const backgroundClasses = BACKGROUND_COLORS[type];
     const textClasses = TEXT_COLORS[type];
     const isSmall = size === BadgeSize.Small;
@@ -31,7 +41,8 @@ export function Badge({ type, label, size = BadgeSize.Medium }: BadgeProps): Rea
     return (
         <div
             className={cx(
-                'inline-flex items-center space-x-2 rounded-full disabled:opacity-30',
+                'inline-flex items-center rounded-full disabled:opacity-30',
+                icon ? 'gap-xxs' : 'space-x-2',
                 { border: !isSmall },
                 { [BORDER_COLORS[type]]: !isSmall },
                 { 'badge-ring-outlined': isSmall && isOutlined },
@@ -39,6 +50,11 @@ export function Badge({ type, label, size = BadgeSize.Medium }: BadgeProps): Rea
                 labelClasses,
             )}
         >
+            {icon && (
+                <span className={cx('flex h-4 w-4 items-center justify-center', textClasses)}>
+                    {icon}
+                </span>
+            )}
             <span className={cx(textSizeClass, textClasses)}>{label}</span>
         </div>
     );

package/src/lib/components/atoms/button/Button.tsx

@@ -26,7 +26,7 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     /**
      * The text of the button.
      */
-    text?: string;
+    text?: React.ReactNode;
     /**
      The icon of the button
      */

package/src/lib/components/atoms/checkbox/Checkbox.tsx

@@ -98,7 +98,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
                 <span
                     onClick={() => inputRef.current?.click()}
                     className={cx(
-                        'checkbox-base checkbox-state checkbox-icon checkbox-icon-hidden',
+                        'checkbox-base checkbox-state checkbox-icon checkbox-icon-hidden shrink-0',
                         'checkbox-border-default',
                         'peer-[&:is(:checked,:indeterminate)]:checkbox-border-checked',
                         'peer-[&:is(:checked,:indeterminate)]:checkbox-bg-checked',
@@ -119,7 +119,7 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
 
 function LabelText({ label, name }: Pick<CheckboxProps, 'label' | 'name'>) {
     return (
-        <label htmlFor={name} className="checkbox-label checkbox-label-disabled">
+        <label htmlFor={name} className="checkbox-label checkbox-label-disabled flex-1">
             {label}
         </label>
     );

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

@@ -41,7 +41,9 @@ export function InfoBox({
     return (
         <div
             className={cx('flex flex-row items-start gap-4 py-xs pr-lg', backgroundClass, {
-                'rounded-lg pl-xs': style === InfoBoxStyle.Elevated,
+                'rounded-lg': style === InfoBoxStyle.Elevated,
+                'pl-xs': style === InfoBoxStyle.Elevated && !!icon,
+                'pl-lg': style === InfoBoxStyle.Elevated && !icon,
             })}
         >
             {icon && (

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

@@ -13,7 +13,11 @@ interface KeyValueProps {
     /**
      * The key of the KeyValue.
      */
-    keyText: string;
+    keyText: ReactNode;
+    /**
+     * An icon shown next to the key text (optional).
+     */
+    keyIcon?: ReactNode;
     /**
      * The value of the KeyValue.
      */
@@ -29,7 +33,7 @@ interface KeyValueProps {
     /**
      * The supporting label of the KeyValue (optional).
      */
-    supportingLabel?: string;
+    supportingLabel?: string | ReactNode;
     /**
      * The size of the value (optional).
      */
@@ -58,6 +62,11 @@ interface KeyValueProps {
      * Reverse the KeyValue (optional).
      */
     isReverse?: boolean;
+    /**
+     * Use a receipt-style row with a dotted leader and right-aligned value.
+     * This is opt-in so existing KeyValueInfo layouts remain unchanged.
+     */
+    layout?: 'default' | 'receipt';
     /**
      * Text shown on value hover.
      */
@@ -66,6 +75,7 @@ interface KeyValueProps {
 
 export function KeyValueInfo({
     keyText,
+    keyIcon,
     value,
     tooltipPosition,
     tooltipText,
@@ -77,9 +87,11 @@ export function KeyValueInfo({
     onCopyError,
     fullwidth,
     isReverse = false,
+    layout = 'default',
     valueHoverTitle,
 }: KeyValueProps): React.JSX.Element {
     const flexDirectionClass = isReverse ? 'flex-row-reverse' : 'flex-row';
+    const isReceiptLayout = layout === 'receipt';
     async function handleCopyClick(event: React.MouseEvent<HTMLButtonElement>) {
         if (!navigator.clipboard) {
             return;
@@ -102,32 +114,44 @@ export function KeyValueInfo({
                 'flex w-full items-baseline gap-xs py-xxs font-inter',
                 flexDirectionClass,
                 {
-                    'justify-between': fullwidth,
+                    'flex-wrap justify-between': fullwidth,
                 },
             )}
         >
             <div
                 className={cx('flex shrink-0 flex-row items-center gap-x-0.5', {
-                    'w-1/4': !fullwidth,
+                    'w-1/4': !fullwidth && !isReceiptLayout,
                 })}
             >
-                <span className="key-value-key-text-color text-body-md">{keyText}</span>
+                {keyIcon}
+                <span className="key-value-key-text-color break-normal text-body-md">
+                    {keyText}
+                </span>
                 {tooltipText && (
                     <Tooltip text={tooltipText} position={tooltipPosition}>
                         <Info className="key-supporting-text-color" />
                     </Tooltip>
                 )}
             </div>
+            {isReceiptLayout && !fullwidth && (
+                <span
+                    aria-hidden="true"
+                    className="mb-1 min-w-[0.5rem] flex-1 border-b border-dotted border-iota-neutral-80 opacity-60 dark:border-iota-neutral-20"
+                />
+            )}
             <div
-                className={cx('flex flex-row items-baseline gap-1 break-all', {
-                    'w-3/4': !fullwidth,
+                className={cx('flex min-w-0 flex-row items-baseline gap-1 break-all', {
+                    'w-3/4': !fullwidth && !isReceiptLayout,
+                    'max-w-[60%] justify-end text-right': !fullwidth && isReceiptLayout,
+                    'flex-wrap': fullwidth,
+                    'justify-end text-right': fullwidth && isReceiptLayout,
                     truncate: isTruncated,
                 })}
             >
                 <span
                     title={valueHoverTitle}
                     className={cx(
-                        'key-value-hover-text-color',
+                        'key-value-hover-text-color min-w-0',
                         size === ValueSize.Medium ? 'text-body-lg' : 'text-body-md',
                         { truncate: isTruncated },
                     )}

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

@@ -49,51 +49,78 @@ export function Tooltip({
         closeTimer.current = setTimeout(() => setVisible(false), closeDelay);
     };
 
-    useLayoutEffect(() => {
-        if (!visible) return;
-
-        const rect = triggerRef.current?.getBoundingClientRect();
-        if (!rect) return;
-
-        const pos = {
+    const computePosition = (rect: DOMRect) =>
+        ({
             [TooltipPosition.Top]: {
                 top: rect.top - offset,
                 left: rect.left + rect.width / 2,
                 transform: 'translate(-50%, -100%)',
+                anchorX: 0.5,
+                anchorY: 1,
             },
             [TooltipPosition.Bottom]: {
                 top: rect.bottom + offset,
                 left: rect.left + rect.width / 2,
                 transform: 'translate(-50%, 0)',
+                anchorX: 0.5,
+                anchorY: 0,
             },
             [TooltipPosition.Left]: {
                 top: rect.top + rect.height / 2,
                 left: rect.left - offset,
                 transform: 'translate(-100%, -50%)',
+                anchorX: 1,
+                anchorY: 0.5,
             },
             [TooltipPosition.Right]: {
                 top: rect.top + rect.height / 2,
                 left: rect.right + offset,
                 transform: 'translate(0, -50%)',
+                anchorX: 0,
+                anchorY: 0.5,
             },
-        }[position];
+        })[position];
+
+    const clampDelta = (boxStart: number, size: number, viewportSize: number, margin: number) => {
+        const boxEnd = boxStart + size;
+        if (boxEnd > viewportSize - margin) return viewportSize - margin - boxEnd;
+        if (boxStart < margin) return margin - boxStart;
+        return 0;
+    };
+
+    useLayoutEffect(() => {
+        if (!visible) return;
+
+        const rect = triggerRef.current?.getBoundingClientRect();
+        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 boxLeft = pos.left - width * pos.anchorX;
+        const boxTop = pos.top - height * pos.anchorY;
+
+        const deltaX = clampDelta(boxLeft, width, window.innerWidth, margin);
+        const deltaY = clampDelta(boxTop, height, window.innerHeight, margin);
 
-        setCoords({ top: pos.top, left: pos.left });
-        tooltipRef.current!.style.transform = pos.transform;
+        setCoords({ top: pos.top + deltaY, left: pos.left + deltaX });
     }, [visible, position, offset]);
 
     useLayoutEffect(() => {
         if (!visible) return;
-        const update = () => {
-            const rect = triggerRef.current?.getBoundingClientRect();
-            if (!rect) return;
-            setCoords((prev) => ({ ...prev, left: rect.left + rect.width / 2 }));
+        const dismiss = () => {
+            clearTimers();
+            setVisible(false);
         };
-        window.addEventListener('scroll', update, true);
-        window.addEventListener('resize', update);
+        window.addEventListener('scroll', dismiss, true);
+        window.addEventListener('resize', dismiss);
         return () => {
-            window.removeEventListener('scroll', update, true);
-            window.removeEventListener('resize', update);
+            window.removeEventListener('scroll', dismiss, true);
+            window.removeEventListener('resize', dismiss);
         };
     }, [visible]);
 

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

@@ -6,8 +6,8 @@ import { CardActionType } from './card.enums';
 import { Button, ButtonSize, ButtonType } from '@/components/atoms/button';
 
 export type CardActionProps = {
-    title?: string;
-    subtitle?: string;
+    title?: React.ReactNode;
+    subtitle?: string | React.ReactNode;
     type: CardActionType;
     onClick?: () => void;
     icon?: React.ReactNode;

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

@@ -39,7 +39,7 @@ export function CardBody({
                 })}
             >
                 <div
-                    className={cx('card-body-title-color font-inter text-title-md', {
+                    className={cx('card-body-title-color text-start font-inter text-title-md', {
                         truncate: isTextTruncated,
                     })}
                 >
@@ -61,7 +61,7 @@ export function CardBody({
             </div>
             {subtitle && (
                 <div
-                    className={cx('card-body-subtitle-color font-inter text-body-md', {
+                    className={cx('card-body-subtitle-color text-start font-inter text-body-md', {
                         truncate: isTextTruncated,
                     })}
                 >

package/src/lib/components/molecules/display-stats/DisplayStats.tsx

@@ -28,7 +28,7 @@ interface DisplayStatsProps {
     /**
      * The tooltip text.
      */
-    tooltipText?: string;
+    tooltipText?: ReactNode;
     /**
      * The value of the stats.
      */
@@ -123,7 +123,7 @@ export function DisplayStats({
                 {icon && <span className="display-stats-icon-color">{icon}</span>}
             </div>
             <div className="flex w-full flex-row items-baseline gap-xxs">
-                <span className={cx('break-all', valueClass)}>{value}</span>
+                <span className={cx('min-w-0 break-all', valueClass)}>{value}</span>
                 {supportingLabel && (
                     <span className={cx('opacity-40', supportingLabelTextClass)}>
                         {supportingLabel}

package/src/lib/components/molecules/input/Input.tsx

@@ -31,7 +31,7 @@ export interface BaseInputProps extends InputWrapperProps {
     /**
      * Amount counter that is shown at the side of the caption text.
      */
-    amountCounter?: string | number;
+    amountCounter?: React.ReactNode;
     /**
      * Trailing element that is shown after the input
      */
@@ -47,7 +47,7 @@ export interface BaseInputProps extends InputWrapperProps {
     /**
      * Text that is shown below the value of the input.
      */
-    supportingValue?: string | null;
+    supportingValue?: React.ReactNode;
     /**
      * Default value of the input
      */

package/src/lib/components/molecules/input/InputWrapper.tsx

@@ -5,6 +5,7 @@ import cx from 'classnames';
 import { SecondaryText } from '@/components/atoms/secondary-text';
 import { LABEL_CLASSES } from './input.classes';
 import { createElement } from 'react';
+import type { ReactNode } from 'react';
 
 export enum LabelHtmlTag {
     Label = 'label',
@@ -19,7 +20,7 @@ export interface InputWrapperProps {
     /**
      * Shows a caption with the text below the input.
      */
-    caption?: string;
+    caption?: ReactNode;
     /**
      * Error Message. Overrides the caption.
      */
@@ -27,7 +28,7 @@ export interface InputWrapperProps {
     /**
      * Amount counter that is shown at the side of the caption text.
      */
-    amountCounter?: string | number;
+    amountCounter?: React.ReactNode;
     /**
      * Is the input required
      */

package/src/lib/components/molecules/table-cell/TableCell.tsx

@@ -17,15 +17,21 @@ interface TableCellBaseProps {
      * Whether the cell content should be centered.
      */
     isContentCentered?: boolean;
+    /**
+     * The number of columns the cell should span.
+     */
+    colSpan?: number;
 }
 
 export function TableCellBase({
     children,
     hasLastBorderNoneClass,
     isContentCentered,
+    colSpan,
 }: PropsWithChildren<TableCellBaseProps>) {
     return (
         <td
+            colSpan={colSpan}
             className={cx(
                 'table-cell-border-color h-14  border-b px-md',
                 { 'last:border-none': hasLastBorderNoneClass },

package/src/lib/components/molecules/table-header-cell/TableHeaderCell.tsx

@@ -60,6 +60,8 @@ export interface TableHeaderCellProps extends React.AriaAttributes {
 export function TableHeaderCell({
     label,
     columnKey,
+    actionLeft,
+    actionRight,
     hasSort,
     hasCheckbox,
     isChecked,
@@ -136,15 +138,19 @@ export function TableHeaderCell({
                         onCheckedChange={onCheckboxChange}
                     />
                 ) : (
-                    <span
-                        className={cx({
-                            'text-left': !isContentCentered,
-                        })}
-                    >
-                        {label}
-                    </span>
+                    <>
+                        {actionLeft}
+                        <span
+                            className={cx({
+                                'text-left': !isContentCentered,
+                            })}
+                        >
+                            {label}
+                        </span>
+                    </>
                 )}
                 {sortElement}
+                {actionRight}
             </div>
         </th>
     );

package/src/lib/components/organisms/accordion/Accordion.tsx

@@ -30,6 +30,13 @@ export interface AccordionHeaderProps {
      * Flag for hiding border.
      */
     hideBorder?: boolean;
+
+    /**
+     * Disable the header state layer while an interactive child is active.
+     * This keeps the parent hover treatment from competing with child links
+     * and controls.
+     */
+    disableStateLayer?: boolean;
 }
 
 interface AccordionContentProps {
@@ -44,6 +51,7 @@ export function AccordionHeader({
     children,
     isExpanded,
     hideArrow,
+    disableStateLayer = false,
 }: PropsWithChildren<AccordionHeaderProps>) {
     return (
         <div
@@ -51,7 +59,8 @@ export function AccordionHeader({
             role="button"
             aria-expanded={isExpanded}
             className={cx(
-                'state-layer relative flex cursor-pointer items-center justify-between gap-md overflow-hidden rounded-xl py-sm--rs',
+                'relative flex cursor-pointer items-center justify-between gap-md overflow-hidden rounded-xl py-sm--rs',
+                !disableStateLayer && 'state-layer',
                 {
                     'pr-md--rs': !hideArrow,
                 },

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

@@ -177,9 +177,19 @@ export function TableHeader({ children }: PropsWithChildren): JSX.Element {
 export function TableRow({
     children,
     leading,
-}: PropsWithChildren<{ leading?: React.ReactNode }>): JSX.Element {
+    onClick,
+}: PropsWithChildren<{
+    leading?: React.ReactNode;
+    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
+}>): JSX.Element {
     return (
-        <tr>
+        <tr
+            onClick={onClick}
+            className={cx({
+                'cursor-pointer hover:bg-shader-neutral-light-8 dark:hover:bg-shader-neutral-dark-8':
+                    onClick,
+            })}
+        >
             {leading}
             {children}
         </tr>