@refraction-ui/react 0.3.3 → 0.3.4

package/dist/index.cjs

@@ -10962,7 +10962,7 @@ var selectContentVariants = cva({
   }
 });
 var selectItemVariants = cva({
-  base: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  base: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
   variants: {
     selected: {
       true: "bg-accent/50",
@@ -11076,8 +11076,47 @@ var SelectTrigger = React41__namespace.forwardRef(
 );
 SelectTrigger.displayName = "SelectTrigger";
 var SelectContent = React41__namespace.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    const { open, contentId, triggerId } = React41__namespace.useContext(SelectContext);
+  ({ className, children, ...props }, forwardedRef) => {
+    const { open, contentId, triggerId, setOpen } = React41__namespace.useContext(SelectContext);
+    const containerRef = React41__namespace.useRef(null);
+    const ref = React41__namespace.useCallback(
+      (node) => {
+        containerRef.current = node;
+        if (typeof forwardedRef === "function") forwardedRef(node);
+        else if (forwardedRef) forwardedRef.current = node;
+      },
+      [forwardedRef]
+    );
+    React41__namespace.useEffect(() => {
+      if (open && containerRef.current) {
+        const firstOption = containerRef.current.querySelector('[role="option"]:not([aria-disabled="true"])');
+        if (firstOption) {
+          setTimeout(() => firstOption.focus(), 0);
+        }
+      }
+    }, [open]);
+    const handleKeyDown = (e) => {
+      if (!containerRef.current) return;
+      const options = Array.from(
+        containerRef.current.querySelectorAll('[role="option"]:not([aria-disabled="true"])')
+      );
+      if (!options.length) return;
+      const currentIndex = options.indexOf(document.activeElement);
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        const nextIndex = currentIndex < options.length - 1 ? currentIndex + 1 : 0;
+        options[nextIndex]?.focus();
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        const prevIndex = currentIndex > 0 ? currentIndex - 1 : options.length - 1;
+        options[prevIndex]?.focus();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        setOpen(false);
+        const trigger = document.getElementById(triggerId);
+        if (trigger) trigger.focus();
+      }
+    };
     if (!open) return null;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -11088,6 +11127,8 @@ var SelectContent = React41__namespace.forwardRef(
         role: "listbox",
         "aria-labelledby": triggerId,
         "data-state": open ? "open" : "closed",
+        onKeyDown: handleKeyDown,
+        tabIndex: -1,
         ...props,
         children
       }
@@ -11097,12 +11138,14 @@ var SelectContent = React41__namespace.forwardRef(
 SelectContent.displayName = "SelectContent";
 var SelectItem = React41__namespace.forwardRef(
   ({ className, children, value: itemValue, disabled: itemDisabled = false, ...props }, ref) => {
-    const { value, onValueChange, setOpen } = React41__namespace.useContext(SelectContext);
+    const { value, onValueChange, setOpen, triggerId } = React41__namespace.useContext(SelectContext);
     const isSelected = value === itemValue;
     const handleClick = () => {
       if (!itemDisabled) {
         onValueChange(itemValue);
         setOpen(false);
+        const trigger = document.getElementById(triggerId);
+        if (trigger) setTimeout(() => trigger.focus(), 0);
       }
     };
     const handleKeyDown = (e) => {
@@ -11110,6 +11153,8 @@ var SelectItem = React41__namespace.forwardRef(
         e.preventDefault();
         onValueChange(itemValue);
         setOpen(false);
+        const trigger = document.getElementById(triggerId);
+        if (trigger) setTimeout(() => trigger.focus(), 0);
       }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs(