@iota/apps-ui-kit 0.5.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "repository": {
     "type": "git",
     "url": "github.com:iotaledger/iota.git"
@@ -30,7 +30,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-number-format": "^5.2.2",
-    "@iota/apps-ui-icons": "0.3.0"
+    "@iota/apps-ui-icons": "0.3.1"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.0",
@@ -43,6 +43,7 @@
     "@types/lodash.merge": "^4.6.9",
     "@types/node": "^20.14.10",
     "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.3.2",
     "autoprefixer": "^10.4.19",
     "cross-env": "^7.0.3",

package/src/lib/components/atoms/button-segment/ButtonSegment.tsx

@@ -38,6 +38,10 @@ interface ButtonSegmentProps {
      * The type of the button.
      */
     type?: ButtonSegmentType;
+    /**
+     * If the button is nested inside a parent button.
+     */
+    isNested?: boolean;
 }
 
 export function ButtonSegment({
@@ -47,6 +51,7 @@ export function ButtonSegment({
     disabled,
     onClick,
     type = ButtonSegmentType.Rounded,
+    isNested = false,
 }: ButtonSegmentProps): React.JSX.Element {
     const isUnderlined = type === ButtonSegmentType.Underlined;
 
@@ -58,9 +63,16 @@ export function ButtonSegment({
 
     const underlined = isUnderlined ? (selected ? UNDERLINED_SELECTED : UNDERLINED) : '';
     const textColors = selected ? TEXT_COLORS_SELECTED : TEXT_COLORS;
-    const padding = isUnderlined ? 'px-lg py-md' : 'px-sm py-[6px]';
+    const padding = isUnderlined ? (isNested ? 'px-md py-sm' : 'px-lg py-md') : 'px-sm py-[6px]';
     const borderRadius = isUnderlined ? '' : 'rounded-full';
-    const textSize = isUnderlined ? 'text-title-md' : 'text-label-lg';
+    const textSize = isNested
+        ? isUnderlined
+            ? 'text-title-sm'
+            : 'text-label-md'
+        : isUnderlined
+          ? 'text-title-md'
+          : 'text-label-lg';
+
     return (
         <ButtonUnstyled
             onClick={onClick}
@@ -79,7 +91,7 @@ export function ButtonSegment({
         >
             <div className={cx('flex flex-row items-center justify-center gap-2', textSize)}>
                 {icon && <span>{icon}</span>}
-                <span className="font-inter">{label}</span>
+                <span className="shrink-0 font-inter">{label}</span>
             </div>
         </ButtonUnstyled>
     );

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

@@ -1,37 +1,138 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { useRef, useState, useLayoutEffect } from 'react';
 import type { PropsWithChildren } from 'react';
+import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import { TooltipPosition } from './tooltip.enums';
-import { TOOLTIP_POSITION } from './tooltip.classes';
 
 interface TooltipProps {
     text: string;
     position?: TooltipPosition;
     maxWidth?: string;
+    offset?: number;
+    openDelay?: number;
+    closeDelay?: number;
 }
 
 export function Tooltip({
     text,
     position = TooltipPosition.Top,
     maxWidth = 'max-w-[200px]',
+    offset = 8,
+    openDelay = 0,
+    closeDelay = 100,
     children,
-}: PropsWithChildren<TooltipProps>): React.JSX.Element {
-    const tooltipPositionClass = TOOLTIP_POSITION[position];
+}: PropsWithChildren<TooltipProps>) {
+    const triggerRef = useRef<HTMLDivElement>(null);
+    const tooltipRef = useRef<HTMLDivElement>(null);
+
+    const [visible, setVisible] = useState(false);
+    const [coords, setCoords] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
+
+    const openTimer = useRef<ReturnType<typeof setTimeout>>();
+    const closeTimer = useRef<ReturnType<typeof setTimeout>>();
+
+    const clearTimers = () => {
+        clearTimeout(openTimer.current);
+        clearTimeout(closeTimer.current);
+    };
+
+    const open = () => {
+        clearTimers();
+        openTimer.current = setTimeout(() => setVisible(true), openDelay);
+    };
+
+    const close = () => {
+        clearTimers();
+        closeTimer.current = setTimeout(() => setVisible(false), closeDelay);
+    };
+
+    useLayoutEffect(() => {
+        if (!visible) return;
+
+        const rect = triggerRef.current?.getBoundingClientRect();
+        if (!rect) return;
+
+        const pos = {
+            [TooltipPosition.Top]: {
+                top: rect.top - offset,
+                left: rect.left + rect.width / 2,
+                transform: 'translate(-50%, -100%)',
+            },
+            [TooltipPosition.Bottom]: {
+                top: rect.bottom + offset,
+                left: rect.left + rect.width / 2,
+                transform: 'translate(-50%, 0)',
+            },
+            [TooltipPosition.Left]: {
+                top: rect.top + rect.height / 2,
+                left: rect.left - offset,
+                transform: 'translate(-100%, -50%)',
+            },
+            [TooltipPosition.Right]: {
+                top: rect.top + rect.height / 2,
+                left: rect.right + offset,
+                transform: 'translate(0, -50%)',
+            },
+        }[position];
+
+        setCoords({ top: pos.top, left: pos.left });
+        tooltipRef.current!.style.transform = pos.transform;
+    }, [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 }));
+        };
+        window.addEventListener('scroll', update, true);
+        window.addEventListener('resize', update);
+        return () => {
+            window.removeEventListener('scroll', update, true);
+            window.removeEventListener('resize', update);
+        };
+    }, [visible]);
+
+    const base =
+        'z-[999] w-max rounded bg-neutral-80 p-xs text-neutral-10 dark:bg-neutral-30 dark:text-neutral-92';
+
     return (
-        <div className="group/tooltip relative inline-block">
-            {children}
+        <>
             <div
-                className={cx(
-                    'absolute z-[999] hidden w-max rounded bg-neutral-80 p-xs text-neutral-10 opacity-0 transition-opacity duration-300 group-hover/tooltip:block group-hover/tooltip:opacity-100 group-focus/tooltip:opacity-100 dark:bg-neutral-30 dark:text-neutral-92',
-                    tooltipPositionClass,
-                    maxWidth,
-                )}
-                role="tooltip"
+                ref={triggerRef}
+                className="inline-block cursor-pointer"
+                onMouseEnter={open}
+                onFocus={open}
+                onMouseLeave={close}
+                onBlur={close}
             >
-                <p className="w-full break-words">{text}</p>
+                {children}
             </div>
-        </div>
+
+            {visible &&
+                createPortal(
+                    <div
+                        ref={tooltipRef}
+                        role="tooltip"
+                        style={{
+                            position: 'fixed',
+                            top: coords.top,
+                            left: coords.left,
+                            transition: 'opacity .15s ease',
+                            opacity: 1,
+                        }}
+                        className={cx(base, maxWidth)}
+                        onMouseEnter={open}
+                        onMouseLeave={close}
+                    >
+                        <p className="w-full break-words">{text}</p>
+                    </div>,
+                    document.body,
+                )}
+        </>
     );
 }

package/src/lib/components/molecules/segmented-button/SegmentedButton.tsx

@@ -26,8 +26,12 @@ export function SegmentedButton({
     const backgroundColors = BACKGROUND_COLORS[type];
     const borderColors = type === SegmentedButtonType.Outlined ? OUTLINED_BORDER : '';
     const borderShape = shape === ButtonSegmentType.Rounded ? 'rounded-full gap-1 p-xxs' : '';
+    const scrollable =
+        shape === ButtonSegmentType.Rounded ? 'flex-wrap' : 'flex-nowrap overflow-x-auto';
     return (
-        <div className={cx('flex flex-row flex-wrap', backgroundColors, borderColors, borderShape)}>
+        <div
+            className={cx('flex flex-row', backgroundColors, borderColors, borderShape, scrollable)}
+        >
             {children}
         </div>
     );

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

@@ -103,9 +103,9 @@ export function Table({
                     </table>
                 </div>
                 <div
-                    className={cx('flex w-full items-center gap-2 pt-md', {
+                    className={cx('flex w-full items-center gap-sm pt-md', {
                         hidden: !supportingLabel && !paginationOptions && !action,
-                        'justify-between': paginationOptions,
+                        'flex-col justify-between sm:flex-row': paginationOptions,
                         'justify-end': !paginationOptions && action,
                     })}
                 >

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

@@ -24,7 +24,7 @@ const responsivePreset: Config = merge({}, BASE_CONFIG, {
             center: true,
             screens,
             padding: {
-                DEFAULT: pxToRem(24),
+                DEFAULT: pxToRem(20),
                 md: pxToRem(48),
                 lg: pxToRem(120),
                 xl: pxToRem(240),