Undo wrapper

mui · Oct 21, 2024 · 90b4b8e · 90b4b8e
1 parent ed586f8
commit 90b4b8e
Showing 1 changed file with 55 additions and 55 deletions.
diff --git a/packages/mui-base/src/Select/Option/SelectOption.tsx b/packages/mui-base/src/Select/Option/SelectOption.tsx
@@ -14,62 +14,64 @@ import { commonStyleHooks } from '../utils/commonStyleHooks';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { useCompositeListItem } from '../../Composite/List/useCompositeListItem';
 
-const InnerSelectOption = React.forwardRef(function InnerSelectOption(
-  props: InnerSelectOptionProps,
-  forwardedRef: React.ForwardedRef<Element>,
-) {
-  const {
-    className,
-    disabled = false,
-    highlighted,
-    selected,
-    id,
-    getItemProps: getRootItemProps,
-    render,
-    setOpen,
-    typingRef,
-    handleSelect,
-    selectionRef,
-    open,
-    ...otherProps
-  } = props;
+const InnerSelectOption = React.memo(
+  React.forwardRef(function InnerSelectOption(
+    props: InnerSelectOptionProps,
+    forwardedRef: React.ForwardedRef<Element>,
+  ) {
+    const {
+      className,
+      disabled = false,
+      highlighted,
+      selected,
+      id,
+      getItemProps: getRootItemProps,
+      render,
+      setOpen,
+      typingRef,
+      handleSelect,
+      selectionRef,
+      open,
+      ...otherProps
+    } = props;
 
-  const { getItemProps } = useSelectOption({
-    setOpen,
-    disabled,
-    highlighted,
-    selected,
-    id,
-    ref: forwardedRef,
-    typingRef,
-    handleSelect,
-    selectionRef,
-  });
+    const { getItemProps } = useSelectOption({
+      setOpen,
+      disabled,
+      highlighted,
+      selected,
+      id,
+      ref: forwardedRef,
+      typingRef,
+      handleSelect,
+      selectionRef,
+    });
 
-  const ownerState: SelectOption.OwnerState = React.useMemo(
-    () => ({ open, disabled, highlighted, selected }),
-    [open, disabled, highlighted, selected],
-  );
+    const ownerState: SelectOption.OwnerState = React.useMemo(
+      () => ({ open, disabled, highlighted, selected }),
+      [open, disabled, highlighted, selected],
+    );
 
-  const { renderElement } = useComponentRenderer({
-    render: render ?? 'div',
-    className,
-    ownerState,
-    propGetter: (externalProps) => {
-      // Preserve the component prop `id` if it's provided.
-      const { id: idProp, ...rootItemProps } = getRootItemProps({
-        ...externalProps,
-        selected,
-        active: highlighted,
-      });
-      return getItemProps(rootItemProps);
-    },
-    extraProps: otherProps,
-    customStyleHookMapping: commonStyleHooks,
-  });
+    const { renderElement } = useComponentRenderer({
+      render: render ?? 'div',
+      className,
+      ownerState,
+      propGetter: (externalProps) => {
+        // Preserve the component prop `id` if it's provided.
+        const { id: idProp, ...rootItemProps } = getRootItemProps({
+          ...externalProps,
+          selected,
+          active: highlighted,
+        });
+        return getItemProps(rootItemProps);
+      },
+      extraProps: otherProps,
+      customStyleHookMapping: commonStyleHooks,
+    });
 
-  return renderElement();
-});
+    return renderElement();
+  }),
+);
 
 InnerSelectOption.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -147,8 +149,6 @@ InnerSelectOption.propTypes /* remove-proptypes */ = {
   }).isRequired,
 } as any;
 
-const MemoizedInnerSelectOption = React.memo(InnerSelectOption);
-
 /**
  *
  * Demos:
@@ -210,7 +210,7 @@ const SelectOption = React.forwardRef(function SelectOption(
 
   return (
     <SelectOptionContext.Provider value={contextValue}>
-      <MemoizedInnerSelectOption
+      <InnerSelectOption
         {...otherProps}
         id={id}
         ref={mergedRef}