refactor: rename focus strategy values

formwerkjs · Jan 15, 2025 · 39d5e0f · 39d5e0f
1 parent e78ad0f
commit 39d5e0f
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 11 deletions.
diff --git a/packages/core/src/useComboBox/useComboBox.ts b/packages/core/src/useComboBox/useComboBox.ts
@@ -142,7 +142,7 @@ export function useComboBox<TOption, TValue = TOption>(
     renderedOptions,
   } = useListBox<TOption, TValue>({
     labeledBy: () => labelledByProps.value['aria-labelledby'],
-    focusStrategy: 'VIRTUAL_WITH_SELECTED',
+    focusStrategy: 'FOCUS_ATTR_SELECTED',
     collection: collectionOptions?.collection,
     disabled: isDisabled,
     label: props.label,

diff --git a/packages/core/src/useListBox/useListBox.ts b/packages/core/src/useListBox/useListBox.ts
@@ -8,7 +8,7 @@ import { FieldTypePrefixes } from '../constants';
 import { useBasicOptionFinder } from './basicOptionFinder';
 import { CollectionManager } from '../collections';
 
-export type FocusStrategy = 'DOM_FOCUS' | 'VIRTUAL_WITH_SELECTED';
+export type FocusStrategy = 'FOCUS_DOM' | 'FOCUS_ATTR_SELECTED';
 
 export interface ListBoxProps<TOption, TValue = TOption> {
   label: string;
@@ -106,7 +106,7 @@ export function useListBox<TOption, TValue = TOption>(
     },
     isValueSelected: props.isValueSelected,
     toggleValue: props.handleToggleValue,
-    getFocusStrategy: () => toValue(props.focusStrategy) ?? 'DOM_FOCUS',
+    getFocusStrategy: () => toValue(props.focusStrategy) ?? 'FOCUS_DOM',
     isPopupOpen: () => isOpen.value,
   };
 
@@ -171,7 +171,7 @@ export function useListBox<TOption, TValue = TOption>(
   };
 
   function focusAndToggleIfShiftPressed(option: OptionRegistration<TValue>) {
-    if (listManager.getFocusStrategy() !== 'DOM_FOCUS') {
+    if (listManager.getFocusStrategy() !== 'FOCUS_DOM') {
       findFocusedOption()?.unfocus();
     }
 
@@ -202,7 +202,7 @@ export function useListBox<TOption, TValue = TOption>(
     const domOptions = getDomOptions();
 
     const focusedOptionIdx =
-      focusStrategy === 'DOM_FOCUS'
+      focusStrategy === 'FOCUS_DOM'
         ? domOptions.findIndex(opt => opt.tabIndex === 0)
         : domOptions.findIndex(opt => opt.ariaSelected === 'true');
 

diff --git a/packages/core/src/useOption/useOption.ts b/packages/core/src/useOption/useOption.ts
@@ -70,7 +70,7 @@ export function useOption<TOption>(_props: Reactivify<OptionProps<TOption>>, ele
     focus: () => {
       isFocused.value = true;
       nextTick(() => {
-        if (listManager?.getFocusStrategy() === 'DOM_FOCUS') {
+        if (listManager?.getFocusStrategy() === 'FOCUS_DOM') {
           optionEl.value?.focus();
           return;
         }
@@ -111,18 +111,17 @@ export function useOption<TOption>(_props: Reactivify<OptionProps<TOption>>, ele
   const optionProps = computed<OptionDomProps>(() => {
     const isMultiple = listManager?.isMultiple() ?? false;
     const focusStrategy = listManager?.getFocusStrategy();
-    const isVirtuallyFocused =
-      focusStrategy === 'VIRTUAL_WITH_SELECTED' && isFocused.value && listManager?.isPopupOpen();
+    const isVirtuallyFocused = focusStrategy === 'FOCUS_ATTR_SELECTED' && isFocused.value && listManager?.isPopupOpen();
 
     return withRefCapture(
       {
         id: optionId,
         role: 'option',
-        tabindex: isFocused.value && focusStrategy === 'DOM_FOCUS' ? '0' : '-1',
+        tabindex: isFocused.value && focusStrategy === 'FOCUS_DOM' ? '0' : '-1',
         'aria-selected':
-          isVirtuallyFocused || (isMultiple ? undefined : isSelected.value && focusStrategy === 'DOM_FOCUS'),
+          isVirtuallyFocused || (isMultiple ? undefined : isSelected.value && focusStrategy === 'FOCUS_DOM'),
         'aria-checked':
-          isMultiple || focusStrategy === 'VIRTUAL_WITH_SELECTED' ? isSelected.value || undefined : undefined,
+          isMultiple || focusStrategy === 'FOCUS_ATTR_SELECTED' ? isSelected.value || undefined : undefined,
         'aria-disabled': isDisabled.value || undefined,
         ...handlers,
       },