fix(rac): Register focus-visible variant in Aria components

Change-Id: Ib3b22b1c9d5c257208e97f1310f9bd45bcaafd28 GitOrigin-RevId: 2a429b8b2082b5b8f437478d930fe0fbbe9234a7
plasmicapp · Nov 21, 2024 · b2568a9 · b2568a9
1 parent 7629d4a
commit b2568a9
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 9 deletions.
diff --git a/plasmicpkgs/react-aria/src/registerInput.tsx b/plasmicpkgs/react-aria/src/registerInput.tsx
@@ -15,6 +15,7 @@ import { pickAriaComponentVariants, WithVariants } from "./variant-utils";
 
 const INPUT_VARIANTS = [
   "focused" as const,
+  "focusVisible" as const,
   "hovered" as const,
   "disabled" as const,
 ];
@@ -84,14 +85,19 @@ export function BaseInput(props: BaseInputProps) {
           hovered: isHovered,
         });
       }}
-      onFocus={() => {
-        plasmicUpdateVariant?.({
-          focused: true,
+      onFocus={(e) => {
+        setTimeout(() => {
+          // using settimeout to update the variant, as the input only gets the `data-focus-visible` attribute in the next tick
+          plasmicUpdateVariant?.({
+            focused: true,
+            focusVisible: !!e.target.getAttribute("data-focus-visible"),
+          });
         });
       }}
       onBlur={() => {
         plasmicUpdateVariant?.({
           focused: false,
+          focusVisible: false,
         });
       }}
       {...mergedProps}

diff --git a/plasmicpkgs/react-aria/src/registerListBox.tsx b/plasmicpkgs/react-aria/src/registerListBox.tsx
@@ -14,18 +14,24 @@ import {
   Registerable,
   registerComponentHelper,
 } from "./utils";
+import { pickAriaComponentVariants, WithVariants } from "./variant-utils";
 
 export interface BaseListBoxControlContextData {
   itemIds: string[];
   isStandalone: boolean;
 }
 
+const LISTBOX_VARIANTS = ["focused" as const, "focusVisible" as const];
+
+const { variants } = pickAriaComponentVariants(LISTBOX_VARIANTS);
+
 export interface BaseListBoxProps
   extends Omit<
       React.ComponentProps<typeof ListBox>,
       "selectedKeys" | "defaultSelectedKeys"
     >,
-    HasControlContextData<BaseListBoxControlContextData> {
+    HasControlContextData<BaseListBoxControlContextData>,
+    WithVariants<typeof LISTBOX_VARIANTS> {
   children?: React.ReactNode;
   selectedKeys?: string | string[] | undefined;
   defaultSelectedKeys?: string | string[] | undefined;
@@ -55,12 +61,12 @@ export function BaseListBox(props: BaseListBoxProps) {
     children,
     selectedKeys,
     defaultSelectedKeys,
+    plasmicUpdateVariant,
     ...rest
   } = props;
   const context = React.useContext(PlasmicListBoxContext);
   const isStandalone = !context;
   const [ids, setIds] = useState<string[]>([]);
-
   const idManager = useMemo(
     () => context?.idManager ?? new ListBoxItemIdManager(),
     []
@@ -83,6 +89,21 @@ export function BaseListBox(props: BaseListBoxProps) {
     <ListBox
       selectedKeys={normalizeSelectedKeys(selectedKeys)}
       defaultSelectedKeys={normalizeSelectedKeys(defaultSelectedKeys)}
+      onFocus={(e) => {
+        setTimeout(() => {
+          // using settimeout to update the variant, as it only gets the `data-focus-visible` attribute in the next tick
+          plasmicUpdateVariant?.({
+            focused: true,
+            focusVisible: !!e.target.getAttribute("data-focus-visible"),
+          });
+        });
+      }}
+      onBlur={() => {
+        plasmicUpdateVariant?.({
+          focused: false,
+          focusVisible: false,
+        });
+      }}
       {...rest}
     >
       {children}
@@ -174,6 +195,7 @@ export function registerListBox(
       displayName: "Aria ListBox",
       importPath: "@plasmicpkgs/react-aria/skinny/registerListBox",
       importName: "BaseListBox",
+      variants,
       defaultStyles: {
         width: "250px",
         borderWidth: "1px",

diff --git a/plasmicpkgs/react-aria/src/registerSelect.tsx b/plasmicpkgs/react-aria/src/registerSelect.tsx
@@ -81,7 +81,11 @@ export interface BaseSelectControlContextData {
   itemIds: string[];
 }
 
-const SELECT_VARIANTS = ["disabled" as const];
+const SELECT_VARIANTS = [
+  "focused" as const,
+  "focusVisible" as const,
+  "disabled" as const,
+];
 
 const { variants: SELECT_VARIANTS_DATA } =
   pickAriaComponentVariants(SELECT_VARIANTS);
@@ -139,6 +143,21 @@ export function BaseSelect(props: BaseSelectProps) {
       name={name}
       disabledKeys={disabledKeys}
       aria-label={ariaLabel}
+      onFocus={(e) => {
+        setTimeout(() => {
+          // using settimeout to update the variant, as it only gets the `data-focus-visible` attribute in the next tick
+          plasmicUpdateVariant?.({
+            focused: true,
+            focusVisible: !!e.target.getAttribute("data-focus-visible"),
+          });
+        });
+      }}
+      onBlur={() => {
+        plasmicUpdateVariant?.({
+          focused: false,
+          focusVisible: false,
+        });
+      }}
       {...extractPlasmicDataProps(props)}
     >
       <SelectAutoOpen {...props} />

diff --git a/plasmicpkgs/react-aria/src/registerTextArea.tsx b/plasmicpkgs/react-aria/src/registerTextArea.tsx
@@ -15,6 +15,7 @@ import { pickAriaComponentVariants, WithVariants } from "./variant-utils";
 
 const TEXTAREA_VARIANTS = [
   "focused" as const,
+  "focusVisible" as const,
   "hovered" as const,
   "disabled" as const,
 ];
@@ -59,14 +60,19 @@ export function BaseTextArea(props: BaseTextAreaProps) {
 
   return (
     <TextArea
-      onFocus={() => {
-        plasmicUpdateVariant?.({
-          focused: true,
+      onFocus={(e) => {
+        setTimeout(() => {
+          // using settimeout to update the variant, as it only gets the `data-focus-visible` attribute in the next tick
+          plasmicUpdateVariant?.({
+            focused: true,
+            focusVisible: !!e.target.getAttribute("data-focus-visible"),
+          });
         });
       }}
       onBlur={() => {
         plasmicUpdateVariant?.({
           focused: false,
+          focusVisible: false,
         });
       }}
       onHoverChange={(isHovered) => {