@iota/apps-ui-kit 0.9.1 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iota/apps-ui-kit",
-  "version": "0.9.1",
+  "version": "0.9.3",
   "sideEffects": false,
   "repository": "https://github.com/iotaledger/iota",
   "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.1"
+    "@iota/apps-ui-icons": "0.7.3"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -43,7 +43,7 @@
     "@storybook/react": "^7.1.0",
     "@storybook/react-vite": "^7.1.0",
     "@types/lodash.merge": "^4.6.9",
-    "@types/node": "^20.14.10",
+    "@types/node": "^24.0.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react-swc": "^3.3.2",

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

@@ -91,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="shrink-0 font-inter">{label}</span>
+                <span className="text-start font-inter">{label}</span>
             </div>
         </ButtonUnstyled>
     );

package/src/lib/components/atoms/toggle/toggle.classes.ts

@@ -17,15 +17,15 @@ export const TOGGLE_SIZE = {
     [ToggleSize.Default]: 'h-6 w-12',
 };
 
-export const TOGGLE_THUMB = 'absolute rounded-full transition-all duration-200 ease-in';
+export const TOGGLE_THUMB = 'absolute rounded-full transition-all duration-200 ease-in-out';
 export const TOGGLE_THUMB_POSITION = {
     [ToggleSize.Small]: {
         unchecked: 'left-1',
-        checked: 'left-8 -translate-x-full',
+        checked: 'left-[34px] -translate-x-full',
     },
     [ToggleSize.Default]: {
         unchecked: 'left-1',
-        checked: 'left-10 -translate-x-full',
+        checked: 'left-[42px] -translate-x-full',
     },
 };
 export const TOGGLE_THUMB_COLOR = {

package/src/lib/components/molecules/account/Account.tsx

@@ -4,13 +4,7 @@
 import cx from 'classnames';
 import type { BadgeType } from '@/components/atoms';
 import { Badge, Tooltip, TooltipPosition, ButtonUnstyled } from '@/components/atoms';
-import {
-    LockLocked,
-    LockUnlocked,
-    MoreHoriz,
-    CheckmarkFilled,
-    RadioOff,
-} from '@iota/apps-ui-icons';
+import { MoreHoriz, CheckmarkFilled, RadioOff } from '@iota/apps-ui-icons';
 import { Address } from '../address';
 
 interface AccountProps {
@@ -22,26 +16,14 @@ interface AccountProps {
      * The subtitle of the account.
      */
     subtitle: string;
-    /**
-     * Whether the account is unlocked.
-     */
-    isLocked?: boolean;
     /**
      * Handler for more options click.
      */
     onOptionsClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Handler for the lock account icon click.
-     */
-    onLockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * Handle for the unlock account icon click.
-     */
-    onUnlockAccountClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     /**
      * Function to render avatar content.
      */
-    avatarContent: ({ isLocked }: { isLocked?: boolean }) => React.JSX.Element;
+    avatarContent: () => React.JSX.Element;
     /**
      * The onCopy event of the Address  (optional).
      */
@@ -97,11 +79,8 @@ export function Account({
     subtitle,
     badgeType,
     badgeText,
-    isLocked,
     avatarContent,
     onOptionsClick,
-    onLockAccountClick,
-    onUnlockAccountClick,
     onCopy,
     copyText,
     onOpen,
@@ -117,17 +96,15 @@ export function Account({
 
     return (
         <div
+            data-testid="account-tile"
             className={cx(
                 'state-layer group relative flex w-full items-center justify-between space-x-3 rounded-xl px-sm py-xs hover:cursor-pointer',
                 isActive && 'state-active',
-                {
-                    'opacity-60': isLocked && showSelected,
-                },
             )}
         >
             <div className="flex w-full items-center gap-x-3">
                 <div>
-                    <Avatar isLocked={isLocked} />
+                    <Avatar />
                 </div>
                 <div className="flex w-full min-w-0 flex-col items-start py-xs">
                     <div className="flex w-full min-w-0 items-center space-x-2">
@@ -161,23 +138,6 @@ export function Account({
                                 <MoreHoriz />
                             </ButtonUnstyled>
                         )}
-                        {onLockAccountClick &&
-                            onUnlockAccountClick &&
-                            (isLocked ? (
-                                <div className="flex items-center">
-                                    <ButtonUnstyled
-                                        onClick={onUnlockAccountClick}
-                                        testId="account-unlock"
-                                        className="locked"
-                                    >
-                                        <LockLocked />
-                                    </ButtonUnstyled>
-                                </div>
-                            ) : (
-                                <ButtonUnstyled onClick={onLockAccountClick} testId="account-lock">
-                                    <LockUnlocked />
-                                </ButtonUnstyled>
-                            ))}
                     </div>
                     {showSelected && (
                         <ButtonUnstyled>

package/src/lib/components/molecules/address/Address.tsx

@@ -72,9 +72,8 @@ export function Address({
         if (externalLink) {
             const newWindow = window.open(externalLink, '_blank', 'noopener noreferrer');
             if (newWindow) newWindow.opener = null;
-        } else {
-            onOpen?.(event);
         }
+        onOpen?.(event);
     }
 
     return (

package/src/lib/components/organisms/dialog/Dialog.tsx

@@ -104,7 +104,7 @@ const DialogContent = React.forwardRef<
                 : 'overflow-y-auto overflow-x-hidden left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-xl';
         const widthClass =
             position === DialogPosition.Right ? 'md:w-96 max-w-[500px]' : customWidth;
-        const heightClass = position === DialogPosition.Right ? 'h-screen' : 'max-h-[80vh] h-full';
+        const heightClass = position === DialogPosition.Right ? 'h-screen' : 'max-h-[90vh] h-full';
         return (
             <RadixDialog.Portal container={containerElement}>
                 <DialogContainer isFixedPosition={isFixedPosition}>

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

@@ -192,11 +192,13 @@ export function TableBody({ children }: PropsWithChildren): JSX.Element {
 export interface TableRowCheckboxProps {
     rowIndex: number;
     onCheckboxChange: (checked: boolean) => void;
+    isDisabled?: boolean;
 }
 
 export function TableRowCheckbox({
     rowIndex,
     onCheckboxChange,
+    isDisabled,
 }: TableRowCheckboxProps): React.JSX.Element {
     const { selectedRowIndexes } = useTableContext();
 
@@ -207,6 +209,7 @@ export function TableRowCheckbox({
                     onCheckboxChange(event.target.checked);
                 }}
                 isChecked={selectedRowIndexes.has(rowIndex)}
+                isDisabled={isDisabled}
             />
         </TableCellBase>
     );

package/src/storybook/stories/molecules/Account.stories.tsx

@@ -3,7 +3,6 @@
 
 import type { Meta, StoryObj } from '@storybook/react';
 import { Account, BadgeType } from '@/components';
-import cx from 'classnames';
 
 const meta: Meta<typeof Account> = {
     component: Account,
@@ -21,10 +20,7 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-const Avatar = ({ isLocked }: { isLocked?: boolean }) => {
-    const circleFillClass = isLocked
-        ? 'fill-iota-neutral-80 dark:fill-iota-neutral-30 names:fill-names-neutral-30'
-        : 'fill-iota-primary-30';
+const Avatar = () => {
     return (
         <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -33,7 +29,7 @@ const Avatar = ({ isLocked }: { isLocked?: boolean }) => {
             viewBox="0 0 33 32"
             fill="none"
         >
-            <circle cx="16.5" cy="16" r="16" className={cx(circleFillClass)} />
+            <circle cx="16.5" cy="16" r="16" className="fill-iota-primary-30" />
         </svg>
     );
 };
@@ -42,7 +38,6 @@ export const Default: Story = {
     args: {
         title: 'Account',
         subtitle: '0x0d7...3f37',
-        isLocked: true,
         avatarContent: Avatar,
     },
     argTypes: {
@@ -50,17 +45,10 @@ export const Default: Story = {
             control: 'select',
             options: Object.values(BadgeType),
         },
-        isLocked: {
-            control: 'boolean',
-        },
         onOptionsClick: {
             action: 'onOptionsClick',
             control: 'none',
         },
-        onLockAccountClick: {
-            action: 'onLockAccount',
-            control: 'none',
-        },
         avatarContent: {
             control: 'none',
         },