@iota/apps-ui-kit 0.9.2 → 0.9.4

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

@@ -16,7 +16,9 @@ export type SelectOption =
     | { id: string; renderLabel: () => React.JSX.Element }
     | { id: string; label: React.ReactNode };
 
-interface SelectProps extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'> {
+interface SelectProps
+    extends Pick<React.HTMLProps<HTMLSelectElement>, 'disabled'>,
+        React.AriaAttributes {
     /**
      * The selected option value.
      */
@@ -83,6 +85,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
             value,
             dropdownPosition = DropdownPosition.Bottom,
             size = SelectSize.Default,
+            ...ariaProps
         },
         ref,
     ) => {
@@ -156,10 +159,13 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                         ref={ref}
                         onClick={onSelectorClick}
                         disabled={disabled}
+                        aria-expanded={isOpen}
+                        aria-haspopup="listbox"
                         className={cx(
                             'select-container select-border-color focus-visible:enabled:select-border-focus-color active:enabled:select-border-focus-color group-[.errored]:select-border-error-color group-[.opened]:select-border-focus-color [&:is(:focus,_:focus-visible,_:active)]:enabled:select-border-focus-color hover:enabled:select-border-hover-color flex flex-row items-center gap-x-3 rounded-lg border py-sm disabled:cursor-not-allowed [&_svg]:h-5 [&_svg]:w-5',
                             selectPadding,
                         )}
+                        {...ariaProps}
                     >
                         {leadingIcon && <span className="select-icon-color">{leadingIcon}</span>}
 
@@ -195,29 +201,31 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                             onClick={closeDropdown}
                         />
                     )}
-                    <div
-                        className={cx('absolute z-50 min-w-full', {
-                            hidden: !isOpen,
-                            'top-full':
-                                !dropdownPosition || dropdownPosition === DropdownPosition.Bottom,
-                            'bottom-full': dropdownPosition === DropdownPosition.Top,
-                        })}
-                    >
-                        <Dropdown>
-                            {options.map((option) => {
-                                const optionIsString = typeof option === 'string';
-                                return (
-                                    <ListItem
-                                        onClick={() => handleOptionClick(option)}
-                                        hideBottomBorder
-                                        key={optionIsString ? option : option.id}
-                                    >
-                                        <OptionLabel option={option} />
-                                    </ListItem>
-                                );
-                            })}
-                        </Dropdown>
-                    </div>
+                    {isOpen && (
+                        <div
+                            className={cx(
+                                'absolute z-50 min-w-full animate-dropdown-show',
+                                dropdownPosition === DropdownPosition.Top
+                                    ? 'bottom-full origin-bottom'
+                                    : 'top-full origin-top',
+                            )}
+                        >
+                            <Dropdown>
+                                {options.map((option) => {
+                                    const optionIsString = typeof option === 'string';
+                                    return (
+                                        <ListItem
+                                            onClick={() => handleOptionClick(option)}
+                                            hideBottomBorder
+                                            key={optionIsString ? option : option.id}
+                                        >
+                                            <OptionLabel option={option} />
+                                        </ListItem>
+                                    );
+                                })}
+                            </Dropdown>
+                        </div>
+                    )}
                 </div>
             </InputWrapper>
         );

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

@@ -6,7 +6,7 @@ import cx from 'classnames';
 import { Checkbox } from '@/components/atoms/checkbox';
 import { TableHeaderCellSortOrder } from './tableHeaderCell.enums';
 
-export interface TableHeaderCellProps {
+export interface TableHeaderCellProps extends React.AriaAttributes {
     /**
      * The column key.
      */
@@ -68,6 +68,7 @@ export function TableHeaderCell({
     onSortClick,
     onCheckboxChange,
     sortOrder,
+    ...ariaProps
 }: TableHeaderCellProps): JSX.Element {
     const handleSort = () => {
         const newSortOrder =
@@ -107,6 +108,16 @@ export function TableHeaderCell({
                     'cursor-pointer': hasSort,
                 },
             )}
+            aria-sort={
+                hasSort
+                    ? sortOrder === TableHeaderCellSortOrder.Asc
+                        ? 'ascending'
+                        : sortOrder === TableHeaderCellSortOrder.Desc
+                          ? 'descending'
+                          : 'none'
+                    : undefined
+            }
+            {...ariaProps}
         >
             <div
                 className={cx(

package/src/lib/components/molecules/visual-asset-card/VisualAssetCard.tsx

@@ -7,7 +7,7 @@ import cx from 'classnames';
 import { AssetMediaRenderer } from '../../molecules/asset-media-renderer';
 import type { AssetMediaRendererProps } from '../../molecules/asset-media-renderer';
 
-interface VisualAssetBaseProps {
+interface VisualAssetBaseProps extends React.AriaAttributes {
     /**
      * The onClick event for the icon.
      */
@@ -73,6 +73,7 @@ export function VisualAssetCard({
                 <ButtonUnstyled
                     className="visual-asset-icon-color absolute right-2 top-2 z-10 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5"
                     onClick={handleIconClick}
+                    aria-label="More options"
                 >
                     {icon}
                 </ButtonUnstyled>

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

@@ -48,6 +48,8 @@ export function AccordionHeader({
     return (
         <div
             onClick={onToggle}
+            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',
                 {

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

@@ -42,11 +42,15 @@ const DialogOverlay = React.forwardRef<
     <RadixDialog.Overlay
         ref={ref}
         className={cx(
-            ' dialog-overlay-bg absolute h-full w-full backdrop-blur-md names:backdrop-blur-lg',
+            'dialog-overlay-bg absolute h-full w-full backdrop-blur-md names:backdrop-blur-lg',
+            'data-[state=open]:animate-dialog-overlay-show',
         )}
         {...props}
     >
-        <DialogClose className={cx('fixed right-3 top-3', { hidden: !showCloseIcon })}>
+        <DialogClose
+            className={cx('fixed right-3 top-3', { hidden: !showCloseIcon })}
+            aria-label="Close"
+        >
             <Close className="button-text-color-neutral" />
         </DialogClose>
     </RadixDialog.Overlay>
@@ -104,7 +108,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}>
@@ -115,6 +119,9 @@ const DialogContent = React.forwardRef<
                             'dialog-content-bg dialog-outline absolute flex flex-col justify-center',
                             dialogPositioning,
                             widthClass,
+                            position === DialogPosition.Right
+                                ? 'data-[state=open]:animate-dialog-panel-show'
+                                : 'data-[state=open]:animate-dialog-content-show',
                         )}
                         {...props}
                     >

package/src/lib/components/organisms/navbar/Navbar.tsx

@@ -61,6 +61,8 @@ export function Navbar({
                     <div
                         className="state-layer navbar-icon-color relative rounded-full p-xs hover:cursor-pointer sm:hidden [&_svg]:h-6 [&_svg]:w-6"
                         onClick={onToggleNavbar}
+                        role="button"
+                        aria-label="Toggle menu"
                     >
                         <MenuIcon />
                     </div>

package/src/lib/components/organisms/navbar/NavbarSlideout.tsx

@@ -38,6 +38,7 @@ export function NavbarSlideout({
                             type={ButtonType.Ghost}
                             onClick={onToggleNavbar}
                             icon={<ArrowBack />}
+                            aria-label="Close menu"
                         />
                     </div>
                     {items.map((item) => (

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

@@ -119,6 +119,7 @@ export function Table({
                                         icon={<DoubleArrowLeft />}
                                         disabled={!paginationOptions.hasFirst}
                                         onClick={paginationOptions.onFirst}
+                                        aria-label="First page"
                                     />
                                     <Button
                                         type={ButtonType.Secondary}
@@ -126,6 +127,7 @@ export function Table({
                                         icon={<ArrowLeft />}
                                         disabled={!paginationOptions.hasPrev}
                                         onClick={paginationOptions.onPrev}
+                                        aria-label="Previous page"
                                     />
                                     <Button
                                         type={ButtonType.Secondary}
@@ -133,6 +135,7 @@ export function Table({
                                         icon={<ArrowRight />}
                                         disabled={!paginationOptions.hasNext}
                                         onClick={paginationOptions.onNext}
+                                        aria-label="Next page"
                                     />
                                     <Button
                                         type={ButtonType.Secondary}
@@ -140,6 +143,7 @@ export function Table({
                                         icon={<DoubleArrowRight />}
                                         disabled={!paginationOptions.hasLast}
                                         onClick={paginationOptions.onLast}
+                                        aria-label="Last page"
                                     />
                                 </>
                             )}
@@ -192,11 +196,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 +213,7 @@ export function TableRowCheckbox({
                     onCheckboxChange(event.target.checked);
                 }}
                 isChecked={selectedRowIndexes.has(rowIndex)}
+                isDisabled={isDisabled}
             />
         </TableCellBase>
     );

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

@@ -53,6 +53,48 @@ export const BASE_CONFIG: Config = {
             backgroundImage: {
                 ...NAMES_GRADIENTS,
             },
+            keyframes: {
+                'dialog-overlay-show': {
+                    from: { opacity: '0' },
+                    to: { opacity: '1' },
+                },
+                'dialog-content-show': {
+                    from: {
+                        opacity: '0',
+                        transform: 'translate(-50%, -50%) scale(0.92)',
+                    },
+                    to: {
+                        opacity: '1',
+                        transform: 'translate(-50%, -50%) scale(1)',
+                    },
+                },
+                'dialog-panel-show': {
+                    from: {
+                        opacity: '0',
+                        transform: 'translateX(12px)',
+                    },
+                    to: {
+                        opacity: '1',
+                        transform: 'translateX(0)',
+                    },
+                },
+                'dropdown-show': {
+                    from: {
+                        opacity: '0',
+                        transform: 'scale(0.94)',
+                    },
+                    to: {
+                        opacity: '1',
+                        transform: 'scale(1)',
+                    },
+                },
+            },
+            animation: {
+                'dialog-overlay-show': 'dialog-overlay-show 170ms ease-out',
+                'dialog-content-show': 'dialog-content-show 170ms ease-out',
+                'dialog-panel-show': 'dialog-panel-show 210ms ease-out',
+                'dropdown-show': 'dropdown-show 125ms ease-out',
+            },
         },
     },
 };

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',
         },