change the architecture of the enhance choice component, from heavily reliability with react-aria to less reliability

Author: kinishinai12

assets/build/beaver-builder/index.min.css

@@ -1,10 +1,13 @@
-import { useListBox } from "react-aria"; // FIX — useListBox was used but never imported
+import { useListBox } from "react-aria";
 import EnhancedOption from "./EnhancedOption";
 
-const EnhancedListBox = ({ listBoxRef, state, name, pendingKey, ...props }) => {
+const EnhancedListBox = ({ listBoxRef, state, name, pendingKey, pendingKeys, onSelectionChange, ...props }) => {
 
   const { listBoxProps } = useListBox(props, state, listBoxRef);
 
+  const isPendingKey = (key) =>
+    pendingKeys ? pendingKeys.includes(key) : pendingKey === key;
+
   return (
     <ul
       {...listBoxProps}
@@ -22,7 +25,8 @@ const EnhancedListBox = ({ listBoxRef, state, name, pendingKey, ...props }) => {
                   item={child}
                   state={state}
                   name={name}
-                  isPending={pendingKey === child.key}
+                  isPending={isPendingKey(child.key)}
+                  onSelectionChange={onSelectionChange}
                   isVisibilityEnabled={props.isVisibilityEnabled}
                   onToggleVisibility={props.onToggleVisibility}
                   visibility={props.visibility}
@@ -37,7 +41,8 @@ const EnhancedListBox = ({ listBoxRef, state, name, pendingKey, ...props }) => {
             state={state}
             name={name}
             visibility={props.visibility}
-            isPending={pendingKey === item.key}
+            isPending={isPendingKey(item.key)}
+            onSelectionChange={onSelectionChange}
             isVisibilityEnabled={props.isVisibilityEnabled}
             onToggleVisibility={props.onToggleVisibility}
           />

assets/build/default/index.min.css

@@ -2,7 +2,16 @@ import { useRef } from 'react';
 import { useOption, mergeProps, useFocusRing } from 'react-aria';
 import Checkbox from '../checkbox/Checkbox';
 
-const EnhancedOption = ({ item, state, isVisibilityEnabled, name, visibility = {}, onToggleVisibility, isPending }) => {
+const EnhancedOption = ({
+  item,
+  state,
+  isVisibilityEnabled,
+  name,
+  visibility = {},
+  onToggleVisibility,
+  isPending,
+  onSelectionChange,
+}) => {
   const ref = useRef(null);
 
   const {
@@ -18,7 +27,6 @@ const EnhancedOption = ({ item, state, isVisibilityEnabled, name, visibility = {
   const isSingle  = state.selectionManager.selectionMode === 'single';
 
   const handleEyeClick = (e) => {
-    e.stopPropagation();
     e.preventDefault();
     onToggleVisibility?.(item.key);
   };
@@ -27,17 +35,28 @@ const EnhancedOption = ({ item, state, isVisibilityEnabled, name, visibility = {
     e.stopPropagation();
   };
 
-  const isMarked = isSelected || isPending;
- 
+  const isMarked = isSingle ? (isSelected || isPending) : isPending;
+
   let classes = 'tf-enhanced-choice-option';
   if (isMarked)   classes += ' is-selected';
   if (isFocused)  classes += ' is-focused';
   if (isDisabled) classes += ' is-disabled';
-  if (isPending && !isSelected) classes += ' is-pending';
+
+  const handleMultipleClick = (e) => {
+    e.preventDefault();
+    if (!isDisabled) onSelectionChange?.(item.key);
+  };
+
+  const liProps = isSingle
+    ? mergeProps(optionProps, focusProps)
+    : mergeProps(optionProps, focusProps, {
+        onClick:     handleMultipleClick,
+        onMouseDown: (e) => e.preventDefault(),
+      });
 
   return (
     <li
-      {...mergeProps(optionProps, focusProps)}
+      {...liProps}
       ref={ref}
       className={classes}
       data-focus-visible={isFocusVisible}
@@ -54,7 +73,7 @@ const EnhancedOption = ({ item, state, isVisibilityEnabled, name, visibility = {
             />
           ) : (
             <Checkbox
-              isSelected={isSelected}
+              isSelected={isMarked}
               isDisabled={isDisabled}
             />
           )}