@moises.ai/design-system 3.10.11 → 3.10.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.10.11",
+  "version": "3.10.13",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/DataTable/DataTable.module.css

@@ -303,6 +303,7 @@
   width: 100%;
   min-width: 0;
   min-height: 100%;
+  font: inherit;
   padding: 0;
   border: 0;
   background: transparent;

package/src/components/Sidebar/Sidebar.jsx

@@ -52,6 +52,9 @@ export const Sidebar = ({
     }
   }
 
+  const desktopLogoAriaLabel = effectiveCollapsed ? 'Expand menu' : 'Moises'
+  const mobileLogoAriaLabel = 'Moises'
+
   const logoContent = (
     <>
       <div
@@ -100,16 +103,24 @@ export const Sidebar = ({
               [styles.mobileTopBarOpen]: isMobile && mobileOpen,
             })}
           >
-            <Flex
-              align="center"
-              gap="2"
-              height="38px"
-              onClick={onLogoClick}
-              style={{ cursor: onLogoClick ? 'pointer' : 'default' }}
+            <button
+              type="button"
+              className={styles.logoButton}
+              onClick={handleLogoClick}
+              aria-label={mobileLogoAriaLabel}
             >
+              <Flex
+                align="center"
+                gap="2"
+                height="38px"
+                style={{
+                  cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
+                }}
+              >
               <MoisesLogoIcon width={32} height={17} />
               <MoisesIcon height={12.269} />
-            </Flex>
+              </Flex>
+            </button>
 
             <IconButton
               variant="ghost"
@@ -159,24 +170,32 @@ export const Sidebar = ({
                       [styles.headerCollapsed]: effectiveCollapsed,
                     })}
                   >
-                  <Flex
-                    align="center"
-                    gap="2"
+                  <button
+                    type="button"
+                    className={styles.logoButton}
                     onClick={handleLogoClick}
-                    style={{ cursor: 'pointer' }}
+                    aria-label={desktopLogoAriaLabel}
                   >
-                    {logoContent}
-                  </Flex>
-                  <Flex
-                    align="center"
-                    justify="center"
+                    <Flex
+                      align="center"
+                      gap="2"
+                      style={{
+                        cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
+                      }}
+                    >
+                      {logoContent}
+                    </Flex>
+                  </button>
+                  <button
+                    type="button"
                     onClick={handleToggleCollapse}
                     className={classNames(styles.toggleButton, {
                       [styles.toggleButtonHidden]: effectiveCollapsed,
                     })}
+                    aria-label="Collapse menu"
                   >
                     <SidebarLeftIcon width={16} height={16} />
-                  </Flex>
+                  </button>
                 </Flex>
               </div>
             </Tooltip>
@@ -190,24 +209,32 @@ export const Sidebar = ({
                   [styles.headerCollapsed]: effectiveCollapsed,
                 })}
               >
-              <Flex
-                align="center"
-                gap="2"
+              <button
+                type="button"
+                className={styles.logoButton}
                 onClick={handleLogoClick}
-                style={{ cursor: 'pointer' }}
+                aria-label={desktopLogoAriaLabel}
               >
-                {logoContent}
-              </Flex>
-              <Flex
-                align="center"
-                justify="center"
+                <Flex
+                  align="center"
+                  gap="2"
+                  style={{
+                    cursor: effectiveCollapsed || onLogoClick ? 'pointer' : 'default',
+                  }}
+                >
+                  {logoContent}
+                </Flex>
+              </button>
+              <button
+                type="button"
                 onClick={handleToggleCollapse}
                 className={classNames(styles.toggleButton, {
                   [styles.toggleButtonHidden]: effectiveCollapsed,
                 })}
+                aria-label="Collapse menu"
               >
                 <SidebarLeftIcon width={16} height={16} />
-              </Flex>
+              </button>
             </Flex>
             </div>
           )}

package/src/components/Sidebar/Sidebar.module.css

@@ -97,6 +97,14 @@
 }
 
 .toggleButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
   opacity: 1;
   transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
@@ -262,6 +270,33 @@
   transition: padding 280ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
+.logoButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+}
+
+.logoButton:not(:disabled) {
+  cursor: pointer;
+}
+
+.logoButton:disabled {
+  cursor: default;
+}
+
+.logoButton:focus-visible,
+.toggleButton:focus-visible {
+  outline: 2px solid var(--accent-8);
+  outline-offset: 4px;
+  border-radius: 6px;
+}
+
 .headerCollapsed {
   padding-left: 16px;
 }

package/src/components/ToastProvider/ToastProvider.jsx

@@ -1,4 +1,12 @@
-import React, { createContext, useCallback, useContext, useMemo, useState } from 'react'
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { Toast } from 'radix-ui'
 import { Callout } from '../Callout/Callout'
 import styles from './ToastProvider.module.css'
@@ -30,9 +38,31 @@ export const ToastProvider = ({
     return 'neutral'
   }, [])
 
+  const getCalloutStyle = useCallback((variant) => {
+    if (variant === 'success') {
+      return {
+        backgroundColor: '#113B29',
+        color: '#BBFFD7',
+      }
+    }
+    if (variant === 'error') {
+      return {
+        backgroundColor: '#201314',
+        color: '#FF9592',
+      }
+    }
+    return undefined
+  }, [])
+
   const [toasts, setToasts] = useState([])
+  const timeoutIdsRef = useRef(new Map())
 
   const dismiss = useCallback((id) => {
+    const timeoutId = timeoutIdsRef.current.get(id)
+    if (timeoutId) {
+      clearTimeout(timeoutId)
+      timeoutIdsRef.current.delete(id)
+    }
     setToasts((prev) => prev.filter((toastItem) => toastItem.id !== id))
   }, [])
 
@@ -43,10 +73,32 @@ export const ToastProvider = ({
         ...normalized,
         id: `${Date.now()}-${toastId++}`,
       }
-      setToasts((prev) => [...prev.slice(-(maxToasts - 1)), nextToast])
+
+      const toastDuration = nextToast.duration ?? duration
+      const timeoutId = setTimeout(() => {
+        dismiss(nextToast.id)
+      }, toastDuration)
+
+      timeoutIdsRef.current.set(nextToast.id, timeoutId)
+      setToasts((prev) => {
+        const nextToasts = [...prev.slice(-(maxToasts - 1)), nextToast]
+        const nextToastIds = new Set(nextToasts.map((toastItem) => toastItem.id))
+
+        prev.forEach((toastItem) => {
+          if (!nextToastIds.has(toastItem.id)) {
+            const staleTimeoutId = timeoutIdsRef.current.get(toastItem.id)
+            if (staleTimeoutId) {
+              clearTimeout(staleTimeoutId)
+              timeoutIdsRef.current.delete(toastItem.id)
+            }
+          }
+        })
+
+        return nextToasts
+      })
       return nextToast.id
     },
-    [maxToasts],
+    [dismiss, duration, maxToasts],
   )
 
   const success = useCallback(
@@ -73,6 +125,13 @@ export const ToastProvider = ({
     [show, success, error, dismiss],
   )
 
+  useEffect(() => {
+    return () => {
+      timeoutIdsRef.current.forEach((timeoutId) => clearTimeout(timeoutId))
+      timeoutIdsRef.current.clear()
+    }
+  }, [])
+
   return (
     <ToastContext.Provider value={value}>
       <Toast.Provider
@@ -98,6 +157,7 @@ export const ToastProvider = ({
                   title={toastItem.title}
                   text={toastItem.description}
                   className={styles.toastCallout}
+                  style={getCalloutStyle(toastItem.variant)}
                 />
               </div>
             </Toast.Description>