Pass and sanitize CommonProps passed to Group and Input

Author: ebonow

.changeset/shy-onions-repeat.md

@@ -0,0 +1,5 @@
+---
+'react-select': minor
+---
+
+Pass and sanitize CommonProps passed to Group and Input components

packages/react-select/src/Select.js

@@ -771,25 +771,25 @@ export default class Select extends Component<Props, State> {
       cx,
       getStyles,
       getValue,
-      setValue,
       selectOption,
+      setValue,
       props,
     } = this;
     const { isMulti, isRtl, options } = props;
     const hasValue = this.hasValue();
 
     return {
-      cx,
       clearValue,
+      cx,
       getStyles,
       getValue,
       hasValue,
       isMulti,
       isRtl,
       options,
       selectOption,
-      setValue,
       selectProps: props,
+      setValue,
       theme: this.getTheme(),
     };
   }
@@ -1446,6 +1446,7 @@ export default class Select extends Component<Props, State> {
     } = this.props;
     const { Input } = this.components;
     const { inputIsHidden } = this.state;
+    const { commonProps } = this;
 
     const id = inputId || this.getElementId('input');
 
@@ -1475,27 +1476,22 @@ export default class Select extends Component<Props, State> {
       );
     }
 
-    const { cx, theme, selectProps } = this.commonProps;
-
     return (
       <Input
+        {...commonProps}
         autoCapitalize="none"
         autoComplete="off"
         autoCorrect="off"
-        cx={cx}
-        getStyles={this.getStyles}
         id={id}
         innerRef={this.getInputRef}
         isDisabled={isDisabled}
         isHidden={inputIsHidden}
         onBlur={this.onInputBlur}
         onChange={this.handleInputChange}
         onFocus={this.onInputFocus}
-        selectProps={selectProps}
         spellCheck="false"
         tabIndex={tabIndex}
         form={form}
-        theme={theme}
         type="text"
         value={inputValue}
         {...ariaAttributes}

packages/react-select/src/components/Group.js

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { type Node, type ComponentType } from 'react';
 import { jsx } from '@emotion/core';
+import { cleanCommonProps } from '../utils';
 
 import type { CommonProps } from '../types';
 
@@ -14,6 +15,8 @@ type ComponentProps = {
   headingProps: any,
   /** Label to be displayed in the heading component. */
   label: Node,
+  /* The data of the group. */
+  data: any,
 };
 export type GroupProps = CommonProps & ComponentProps;
 
@@ -67,12 +70,13 @@ export const groupHeadingCSS = ({ theme: { spacing } }: GroupProps) => ({
 });
 
 export const GroupHeading = (props: any) => {
-  const { className, cx, getStyles, theme, selectProps, ...cleanProps } = props;
+  const { getStyles, cx, className } = props;
+  const { data, ...innerProps } = cleanCommonProps(props);
   return (
     <div
-      css={getStyles('groupHeading', { theme, ...cleanProps })}
+      css={getStyles('groupHeading', props)}
       className={cx({ 'group-heading': true }, className)}
-      {...cleanProps}
+      {...innerProps}
     />
   );
 };

packages/react-select/src/components/Input.js

@@ -4,17 +4,16 @@ import { type ElementRef } from 'react';
 import { jsx } from '@emotion/core';
 import AutosizeInput from 'react-input-autosize';
 
-import type { PropsWithStyles, ClassNamesState } from '../types';
+import type { CommonProps } from '../types';
+import { cleanCommonProps } from '../utils';
 
-export type InputProps = PropsWithStyles & {
-  cx: (?ClassNamesState, ?string) => string | void,
+export type InputProps = CommonProps & {
   /** Reference to the internal element */
   innerRef: (ElementRef<*>) => void,
   /** Set whether the input should be visible. Does not affect input size. */
   isHidden: boolean,
   /** Whether the input is disabled */
   isDisabled?: boolean,
-  className?: string,
   /** The ID of the form that the input belongs to */
   form?: string,
 };
@@ -40,26 +39,23 @@ const inputStyle = isHidden => ({
   color: 'inherit',
 });
 
-const Input = ({
-  className,
-  cx,
-  getStyles,
-  innerRef,
-  isHidden,
-  isDisabled,
-  theme,
-  selectProps,
-  ...props
-}: InputProps) => (
-  <div css={getStyles('input', { theme, ...props })}>
-    <AutosizeInput
-      className={cx({ input: true }, className)}
-      inputRef={innerRef}
-      inputStyle={inputStyle(isHidden)}
-      disabled={isDisabled}
-      {...props}
-    />
-  </div>
-);
+const Input = (props: InputProps) => {
+  const { className, cx, getStyles } = props;
+  const { innerRef, isDisabled, isHidden, ...innerProps } = cleanCommonProps(
+    props
+  );
+
+  return (
+    <div css={getStyles('input', props)}>
+      <AutosizeInput
+        className={cx({ input: true }, className)}
+        inputRef={innerRef}
+        inputStyle={inputStyle(isHidden)}
+        disabled={isDisabled}
+        {...innerProps}
+      />
+    </div>
+  );
+};
 
 export default Input;

packages/react-select/src/types.js

@@ -64,14 +64,15 @@ export type CommonProps = {
     See the `styles` object for the properties available.
   */
   getStyles: (string, any) => {},
-  theme: Theme,
   getValue: () => ValueType,
   hasValue: boolean,
   isMulti: boolean,
+  isRtl: boolean,
   options: OptionsType,
   selectOption: OptionType => void,
   selectProps: any,
   setValue: (ValueType, ActionTypes) => void,
+  theme: Theme,
 };
 
 export type ActionTypes =

packages/react-select/src/utils.js

@@ -3,6 +3,7 @@
 import { type ElementRef } from 'react';
 import type {
   ClassNamesState,
+  CommonProps,
   InputActionMeta,
   OptionsType,
   ValueType,
@@ -67,6 +68,31 @@ export const cleanValue = (value: ValueType): OptionsType => {
   return [];
 };
 
+// ==============================
+// Clean Common Props
+// ==============================
+
+export const cleanCommonProps = (props: CommonProps): any => {
+  //className
+  const {
+    className, // not listed in commonProps documentation, needs to be removed to allow Emotion to generate classNames
+    clearValue,
+    cx,
+    getStyles,
+    getValue,
+    hasValue,
+    isMulti,
+    isRtl,
+    options, // not listed in commonProps documentation
+    selectOption,
+    selectProps,
+    setValue,
+    theme, // not listed in commonProps documentation
+    ...innerProps
+  } = props;
+  return { ...innerProps };
+};
+
 // ==============================
 // Handle Input Change
 // ==============================