Fix errors

mui · Dec 29, 2021 · 72a19c4 · 72a19c4
1 parent 81b6b71
commit 72a19c4
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 30 deletions.
diff --git a/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.tsx b/packages/mui-base/src/MultiSelectUnstyled/MultiSelectUnstyled.tsx
@@ -8,11 +8,7 @@ import {
 import MultiSelectUnstyledProps, {
   MultiSelectUnstyledOwnerState,
 } from './MultiSelectUnstyledProps';
-import {
-  flattenOptionGroups,
-  getOptionsFromChildren,
-  useUtilityClasses,
-} from '../SelectUnstyled/utils';
+import { flattenOptionGroups, getOptionsFromChildren } from '../SelectUnstyled/utils';
 import useSelect from '../SelectUnstyled/useSelect';
 import { SelectChild, SelectOption } from '../SelectUnstyled/useSelectProps';
 import { appendOwnerState } from '../utils';
@@ -21,11 +17,31 @@ import {
   SelectUnstyledContext,
   SelectUnstyledContextType,
 } from '../SelectUnstyled/SelectUnstyledContext';
+import composeClasses from '../composeClasses';
+import { getSelectUnstyledUtilityClass } from '../SelectUnstyled/selectUnstyledClasses';
 
 function defaultRenderMultipleValues<TValue>(selectedOptions: SelectOption<TValue>[]) {
   return <React.Fragment>{selectedOptions.map((o) => o.label).join(', ')}</React.Fragment>;
 }
 
+function useUtilityClasses(ownerState: MultiSelectUnstyledOwnerState<any>) {
+  const { active, disabled, open, focusVisible } = ownerState;
+
+  const slots = {
+    button: [
+      'button',
+      disabled && 'disabled',
+      focusVisible && 'focusVisible',
+      active && 'active',
+      open && 'expanded',
+    ],
+    listbox: ['listbox', disabled && 'disabled'],
+    option: ['option'],
+  };
+
+  return composeClasses(slots, getSelectUnstyledUtilityClass, {});
+}
+
 /**
  * The foundation for building custom-styled multi-selection select components.
  */

diff --git a/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx b/packages/mui-base/src/SelectUnstyled/SelectUnstyled.tsx
@@ -6,17 +6,37 @@ import {
   unstable_useControlled as useControlled,
 } from '@mui/utils';
 import { SelectUnstyledOwnerState, SelectUnstyledProps } from './SelectUnstyledProps';
-import { flattenOptionGroups, getOptionsFromChildren, useUtilityClasses } from './utils';
+import { flattenOptionGroups, getOptionsFromChildren } from './utils';
 import useSelect from './useSelect';
 import { SelectChild, SelectOption } from './useSelectProps';
 import { appendOwnerState } from '../utils';
 import PopperUnstyled from '../PopperUnstyled';
 import { SelectUnstyledContext, SelectUnstyledContextType } from './SelectUnstyledContext';
+import composeClasses from '../composeClasses';
+import { getSelectUnstyledUtilityClass } from './selectUnstyledClasses';
 
 function defaultRenderSingleValue<TValue>(selectedOption: SelectOption<TValue> | null) {
   return selectedOption?.label ?? '';
 }
 
+function useUtilityClasses(ownerState: SelectUnstyledOwnerState<any>) {
+  const { active, disabled, open, focusVisible } = ownerState;
+
+  const slots = {
+    button: [
+      'button',
+      disabled && 'disabled',
+      focusVisible && 'focusVisible',
+      active && 'active',
+      open && 'expanded',
+    ],
+    listbox: ['listbox', disabled && 'disabled'],
+    option: ['option'],
+  };
+
+  return composeClasses(slots, getSelectUnstyledUtilityClass, {});
+}
+
 /**
  * The foundation for building custom-styled select components.
  */

diff --git a/packages/mui-base/src/SelectUnstyled/utils.tsx b/packages/mui-base/src/SelectUnstyled/utils.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
-import composeClasses from '../composeClasses';
 import { OptionUnstyledProps } from '../OptionUnstyled';
 import { OptionGroupUnstyledProps } from '../OptionGroupUnstyled';
-import { getSelectUnstyledUtilityClass } from './selectUnstyledClasses';
-import { SelectUnstyledOwnerState } from './SelectUnstyledProps';
-import { MultiSelectUnstyledOwnerState } from '../MultiSelectUnstyled/MultiSelectUnstyledProps';
 import { isOptionGroup, SelectChild, SelectOption, SelectOptionGroup } from './useSelectProps';
 
 export function areOptionsEqual<TValue>(
@@ -57,26 +53,6 @@ export function getOptionsFromChildren<TValue>(children: React.ReactNode): Selec
   return selectChildren ?? [];
 }
 
-export function useUtilityClasses(
-  ownerState: SelectUnstyledOwnerState<any> | MultiSelectUnstyledOwnerState<any>,
-) {
-  const { active, disabled, open, focusVisible } = ownerState;
-
-  const slots = {
-    button: [
-      'button',
-      disabled && 'disabled',
-      focusVisible && 'focusVisible',
-      active && 'active',
-      open && 'expanded',
-    ],
-    listbox: ['listbox', disabled && 'disabled'],
-    option: ['option'],
-  };
-
-  return composeClasses(slots, getSelectUnstyledUtilityClass, {});
-}
-
 export function flattenOptionGroups<TValue>(
   groupedOptions: SelectChild<TValue>[],
   isGroupDisabled: boolean = false,