analytica-frontend-lib 1.0.19 → 1.0.20

package/dist/index.css

@@ -116,10 +116,10 @@
     --color-indicator-primary: #373737;
     --color-indicator-info: #5399ec;
     --color-indicator-error: #b91c1c;
-    --color-exame-1: #e3f1fb;
-    --color-exame-2: #fde5fa;
-    --color-exame-3: #fff4d1;
-    --color-exame-4: #ddf5e5;
+    --color-exam-1: #e3f1fb;
+    --color-exam-2: #fde5fa;
+    --color-exam-3: #fff4d1;
+    --color-exam-4: #ddf5e5;
     --color-typography-1: #b00c9e;
     --color-typography-2: #745A07;
     --font-weight-hairline: 100;
@@ -412,6 +412,9 @@
   .my-4 {
     margin-block: calc(var(--spacing) * 4);
   }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -427,6 +430,9 @@
   .mr-2 {
     margin-right: calc(var(--spacing) * 2);
   }
+  .mb-0\.5 {
+    margin-bottom: calc(var(--spacing) * 0.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -517,6 +523,9 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-\[384px\] {
+    width: 384px;
+  }
   .w-full {
     width: 100%;
   }
@@ -711,6 +720,9 @@
   .border-success-500 {
     border-color: var(--color-success-500);
   }
+  .border-transparent {
+    border-color: transparent;
+  }
   .border-warning-200 {
     border-color: var(--color-warning-200);
   }
@@ -738,17 +750,17 @@
   .bg-error-500 {
     background-color: var(--color-error-500);
   }
-  .bg-exame-1 {
-    background-color: var(--color-exame-1);
+  .bg-exam-1 {
+    background-color: var(--color-exam-1);
   }
-  .bg-exame-2 {
-    background-color: var(--color-exame-2);
+  .bg-exam-2 {
+    background-color: var(--color-exam-2);
   }
-  .bg-exame-3 {
-    background-color: var(--color-exame-3);
+  .bg-exam-3 {
+    background-color: var(--color-exam-3);
   }
-  .bg-exame-4 {
-    background-color: var(--color-exame-4);
+  .bg-exam-4 {
+    background-color: var(--color-exam-4);
   }
   .bg-indicator-error {
     background-color: var(--color-indicator-error);
@@ -1291,6 +1303,11 @@
       border-width: 0px;
     }
   }
+  .focus-visible\:bg-background-50 {
+    &:focus-visible {
+      background-color: var(--color-background-50);
+    }
+  }
   .focus-visible\:bg-error-500 {
     &:focus-visible {
       background-color: var(--color-error-500);
@@ -1672,10 +1689,10 @@
     --color-indicator-primary: #f7f7f7;
     --color-indicator-info: #a1c7f5;
     --color-indicator-error: #e84645;
-    --color-exame-1: #e3f1fb;
-    --color-exame-2: #fde5fa;
-    --color-exame-3: #fff4d1;
-    --color-exame-4: #ddf5e5;
+    --color-exam-1: #e3f1fb;
+    --color-exam-2: #fde5fa;
+    --color-exam-3: #fff4d1;
+    --color-exam-4: #ddf5e5;
     --color-subject-1: #b7dfff;
     --color-subject-2: #fbd1a5;
     --color-subject-3: #b2e7e8;
@@ -1833,10 +1850,10 @@
     --color-indicator-primary: #373737;
     --color-indicator-info: #5399ec;
     --color-indicator-error: #b91c1c;
-    --color-exame-1: #e3f1fb;
-    --color-exame-2: #fde5fa;
-    --color-exame-3: #fff4d1;
-    --color-exame-4: #ddf5e5;
+    --color-exam-1: #e3f1fb;
+    --color-exam-2: #fde5fa;
+    --color-exam-3: #fff4d1;
+    --color-exam-4: #ddf5e5;
     --color-subject-1: #b7dfff;
     --color-subject-2: #fbd1a5;
     --color-subject-3: #b2e7e8;

package/dist/index.js

@@ -276,10 +276,10 @@ var VARIANT_ACTION_CLASSES2 = {
     muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
   },
   exams: {
-    exam1: "bg-exame-1 text-info-200 focus-visible:outline-none",
-    exam2: "bg-exame-2 text-typography-1 focus-visible:outline-none",
-    exam3: "bg-exame-3 text-typography-2 focus-visible:outline-none",
-    exam4: "bg-exame-4 text-success-700 focus-visible:outline-none"
+    exam1: "bg-exam-1 text-info-200 focus-visible:outline-none",
+    exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
+    exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
+    exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
   },
   resultStatus: {
     negative: "bg-error text-error-800 focus-visible:outline-none",
@@ -630,9 +630,32 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     [isControlled, onOpenChange]
   );
   const menuRef = (0, import_react4.useRef)(null);
-  const handleEscape = (event) => {
+  const handleArrowDownOrArrowUp = (event) => {
+    const menuContent = menuRef.current?.querySelector('[role="menu"]');
+    if (menuContent) {
+      event.preventDefault();
+      const items = Array.from(
+        menuContent.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        )
+      ).filter((el) => el instanceof HTMLElement);
+      if (items.length === 0) return;
+      const focusedItem = document.activeElement;
+      const currentIndex = items.findIndex((item) => item === focusedItem);
+      let nextIndex;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+      } else {
+        nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+      }
+      items[nextIndex]?.focus();
+    }
+  };
+  const handleDownkey = (event) => {
     if (event.key === "Escape") {
       setOpen(false);
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      handleArrowDownOrArrowUp(event);
     }
   };
   const handleClickOutside = (event) => {
@@ -643,11 +666,11 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
   (0, import_react4.useEffect)(() => {
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
+      document.addEventListener("keydown", handleDownkey);
     }
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
   const value = (0, import_react4.useMemo)(
@@ -780,6 +803,7 @@ var MenuItem = (0, import_react4.forwardRef)(
         role: "menuitem",
         "aria-disabled": disabled,
         className: `
+          focus-visible:bg-background-50
           relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
           ${inset && "pl-8"}
           ${sizeClasses}

package/dist/index.mjs

@@ -225,10 +225,10 @@ var VARIANT_ACTION_CLASSES2 = {
     muted: "bg-background-muted text-background-800 border border-border-300 focus-visible:outline-none"
   },
   exams: {
-    exam1: "bg-exame-1 text-info-200 focus-visible:outline-none",
-    exam2: "bg-exame-2 text-typography-1 focus-visible:outline-none",
-    exam3: "bg-exame-3 text-typography-2 focus-visible:outline-none",
-    exam4: "bg-exame-4 text-success-700 focus-visible:outline-none"
+    exam1: "bg-exam-1 text-info-200 focus-visible:outline-none",
+    exam2: "bg-exam-2 text-typography-1 focus-visible:outline-none",
+    exam3: "bg-exam-3 text-typography-2 focus-visible:outline-none",
+    exam4: "bg-exam-4 text-success-700 focus-visible:outline-none"
   },
   resultStatus: {
     negative: "bg-error text-error-800 focus-visible:outline-none",
@@ -592,9 +592,32 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
     [isControlled, onOpenChange]
   );
   const menuRef = useRef(null);
-  const handleEscape = (event) => {
+  const handleArrowDownOrArrowUp = (event) => {
+    const menuContent = menuRef.current?.querySelector('[role="menu"]');
+    if (menuContent) {
+      event.preventDefault();
+      const items = Array.from(
+        menuContent.querySelectorAll(
+          '[role="menuitem"]:not([aria-disabled="true"])'
+        )
+      ).filter((el) => el instanceof HTMLElement);
+      if (items.length === 0) return;
+      const focusedItem = document.activeElement;
+      const currentIndex = items.findIndex((item) => item === focusedItem);
+      let nextIndex;
+      if (event.key === "ArrowDown") {
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % items.length;
+      } else {
+        nextIndex = currentIndex === -1 ? items.length - 1 : (currentIndex - 1 + items.length) % items.length;
+      }
+      items[nextIndex]?.focus();
+    }
+  };
+  const handleDownkey = (event) => {
     if (event.key === "Escape") {
       setOpen(false);
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      handleArrowDownOrArrowUp(event);
     }
   };
   const handleClickOutside = (event) => {
@@ -605,11 +628,11 @@ var DropdownMenu = ({ children, open, onOpenChange }) => {
   useEffect(() => {
     if (currentOpen) {
       document.addEventListener("mousedown", handleClickOutside);
-      document.addEventListener("keydown", handleEscape);
+      document.addEventListener("keydown", handleDownkey);
     }
     return () => {
       document.removeEventListener("mousedown", handleClickOutside);
-      document.removeEventListener("keydown", handleEscape);
+      document.removeEventListener("keydown", handleDownkey);
     };
   }, [currentOpen]);
   const value = useMemo(
@@ -742,6 +765,7 @@ var MenuItem = forwardRef4(
         role: "menuitem",
         "aria-disabled": disabled,
         className: `
+          focus-visible:bg-background-50
           relative flex select-none items-center gap-2 rounded-sm p-3 text-sm outline-none transition-colors [&>svg]:size-4 [&>svg]:shrink-0
           ${inset && "pl-8"}
           ${sizeClasses}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "analytica-frontend-lib",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "description": "Repositório público dos componentes utilizados nas plataformas da Analytica Ensino",
   "main": "dist/index.cjs",
   "module": "./dist/index.js",