Fix pluralization of listbox' selectedValue

mui · Mar 2, 2023 · 8cb3eab · 8cb3eab
1 parent 091c288
commit 8cb3eab
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/packages/mui-base/src/useListbox/defaultListboxReducer.test.ts b/packages/mui-base/src/useListbox/defaultListboxReducer.test.ts
@@ -5,7 +5,7 @@ import defaultReducer from './defaultListboxReducer';
 
 describe('useListbox defaultReducer', () => {
   describe('action: setControlledValue', () => {
-    it("assigns the provided value to the state's selectedValue", () => {
+    it("assigns the provided value to the state's selectedValues", () => {
       const state: ListboxState<string> = {
         highlightedValue: 'a',
         selectedValues: [],
@@ -57,7 +57,7 @@ describe('useListbox defaultReducer', () => {
   });
 
   describe('action: optionClick', () => {
-    it('sets the selectedValue to the clicked value', () => {
+    it('sets the selectedValues to the clicked value', () => {
       const state: ListboxState<string> = {
         highlightedValue: 'a',
         selectedValues: [],
@@ -82,7 +82,7 @@ describe('useListbox defaultReducer', () => {
       expect(result.selectedValues).to.deep.equal(['two']);
     });
 
-    it('replaces the selectedValue with the clicked value if selectionLimit = 1', () => {
+    it('replaces the selectedValues with the clicked value if selectionLimit = 1', () => {
       const state: ListboxState<string> = {
         highlightedValue: 'a',
         selectedValues: ['one'],
@@ -324,7 +324,7 @@ describe('useListbox defaultReducer', () => {
         expect(result.selectedValues).to.deep.equal(['two']);
       });
 
-      it('replaces the selectedValue with the highlighted value if selectionLimit = 1', () => {
+      it('replaces the selectedValues with the highlighted value if selectionLimit = 1', () => {
         const state: ListboxState<string> = {
           highlightedValue: 'two',
           selectedValues: ['one'],

diff --git a/packages/mui-base/src/useListbox/useControllableReducer.ts b/packages/mui-base/src/useListbox/useControllableReducer.ts
@@ -18,7 +18,7 @@ function getControlledState<TOption>(
   props: UseListboxParametersWithDefaults<TOption>,
 ) {
   if (props.value !== undefined) {
-    return { ...internalState, selectedValue: props.value };
+    return { ...internalState, selectedValues: props.value };
   }
 
   return internalState;

diff --git a/packages/mui-base/src/useTabsList/useTabsList.ts b/packages/mui-base/src/useTabsList/useTabsList.ts
@@ -67,7 +67,7 @@ function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue
     listOrientation = isRtl ? 'horizontal-rtl' : 'horizontal-ltr';
   }
 
-  const stateReducer: ListboxReducer<string | number> = React.useCallback(
+  const stateReducer: ListboxReducer<string | number | null> = React.useCallback(
     (state, action) => {
       const newState = defaultListboxReducer(state, action);
 
@@ -81,7 +81,7 @@ function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue
       if (selectionFollowsFocus) {
         return {
           ...newState,
-          selectedValue: [newState.highlightedValue],
+          selectedValues: [newState.highlightedValue],
         };
       }
 
@@ -126,6 +126,7 @@ function useTabsList(parameters: UseTabsListParameters): UseTabsListReturnValue
     onChange: handleChange,
     options: subitemKeys,
     orientation: listOrientation,
+    selectionLimit: 1,
     stateReducer,
     value: listboxValue,
   });