Pass and sanitize commonProps passed to GroupHeader and Input

[ebonow]

Purpose:

When styling components, it would be beneficial to have commonProps accessible as the documentation states that they should be. This also resolves a bug introduced in v3.2

Proposal:

Currently these two components do not use commonProps. It is likely because they pass extra props directly to the components wrapper as DOM attributes. It's worth noting that they do not follow the same innerProps paradigm as the other components.

Since all the cleanedProps are passed directly to the DOM as attributes, it was just a matter of removing the commonProp keys from the props as a util function.

Resolves:

Issue: "input" object of the styles object should receive the same state as the other components #3982

Issue: Unreported side effect from
Pass down extra props to group header as item.data #3046

Result of the PR is that GroupHeader now renders with data attribute in the DOM represented as data=[Object Object]

The included code resolves this by destructuring data from the sanitized props prior to passing them in as "innerProps"

[changeset-bot]

🦋 Changeset detected

Latest commit: 665f7ae

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
react-select	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 665f7ae:

Sandbox	Source
react-codesandboxer-example	Configuration

[Methuselah96]

I'm probably missing something, but I don't see how the commonProps are getting passed to GroupHeading (besides the ones that are manually specified (i.e., selectProps, them, getStyles, and cx)).

[ebonow]

Common props weren't being passed and this aims to add them for the sake of consistency.

The previous implementation was...

  const { className, cx, getStyles, theme, selectProps, ...cleanProps } = props;
   return (
    <div
      css={getStyles('groupHeading', { theme, ...cleanProps })}
      className={cx({ 'group-heading': true }, className)}
      {...cleanProps}
    />
  );

Both GroupHeading and Input lack innerProps and instead all the extra props are passed to the wrapper DOM element as if they were innerProps. My guess is this is why there are no commonProps added.

The intention with this was to create a function that would cleanse the common props in a similar way, so that all of the commonProps are available to the styles api, but then sanitized for the DOM in a consistent way.

[Methuselah96]

Okay, got it, should we go ahead and pass ...commonProps to GroupHeading then?