Update ref types

microsoft · Sep 16, 2020 · a7691e3 · a7691e3
1 parent fb61485
commit a7691e3
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/packages/react-next/etc/react-next.api.md b/packages/react-next/etc/react-next.api.md
@@ -152,7 +152,7 @@ export const ColorPickerGridCell: React.FunctionComponent<IColorPickerGridCellPr
 export const ColorPickerGridCellBase: React.FunctionComponent<IColorPickerGridCellProps>;
 
 // @public (undocumented)
-export const ComboBox: React.ForwardRefExoticComponent<IComboBoxProps & React.RefAttributes<HTMLDivElement>>;
+export const ComboBox: React.FunctionComponent<IComboBoxProps>;
 
 // @public
 export const ContextualMenu: React.FunctionComponent<IContextualMenuProps>;
@@ -678,7 +678,7 @@ export interface IComboBoxOptionStyles extends IButtonStyles {
 }
 
 // @public (undocumented)
-export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox, IComboBox> {
+export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox, IComboBox>, React.RefAttributes<HTMLDivElement> {
     allowFreeform?: boolean;
     ariaDescribedBy?: string;
     autoComplete?: 'on' | 'off';

diff --git a/packages/react-next/src/components/ComboBox/ComboBox.tsx b/packages/react-next/src/components/ComboBox/ComboBox.tsx
@@ -155,9 +155,9 @@ function useOptionsState({ options, defaultSelectedKey, selectedKey }: IComboBox
   ] as const;
 }
 
-export const ComboBox = React.forwardRef(
+export const ComboBox: React.FunctionComponent<IComboBoxProps> = React.forwardRef<HTMLDivElement, IComboBoxProps>(
   (propsWithoutDefaults: IComboBoxProps, forwardedRef: React.Ref<HTMLDivElement>) => {
-    const props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
+    const { ref, ...props } = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);
     const rootRef = React.useRef<HTMLDivElement>(null);
 
     const mergedRootRef = useMergedRefs(rootRef, forwardedRef);
@@ -190,7 +190,7 @@ export const ComboBox = React.forwardRef(
 );
 ComboBox.displayName = COMPONENT_NAME;
 
-interface IComboBoxInternalProps extends IComboBoxProps {
+interface IComboBoxInternalProps extends Omit<IComboBoxProps, 'ref'> {
   hoisted: {
     mergedRootRef: React.Ref<HTMLDivElement>;
     rootRef: React.RefObject<HTMLDivElement>;

diff --git a/packages/react-next/src/components/ComboBox/ComboBox.types.ts b/packages/react-next/src/components/ComboBox/ComboBox.types.ts
@@ -54,7 +54,9 @@ export interface IComboBoxOption extends ISelectableOption {
 /**
  * {@docCategory ComboBox}
  */
-export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox, IComboBox> {
+export interface IComboBoxProps
+  extends ISelectableDroppableTextProps<IComboBox, IComboBox>,
+    React.RefAttributes<HTMLDivElement> {
   /**
    * Optional callback to access the IComboBox interface. Use this instead of ref for accessing
    * the public methods and properties of the component.