Decouple Select.Custom and Select.Option

[egucciar]

If we want to expose custom wrappers for Select.Option (for whatever reason), this will break the API of select. I recommend to leverage context to "register" select options.

[egucciar]

I found a unique workaround, which is setting default props on the component after re-exporting it!

SelectCustom.Option.defaultProps = {
    size: "small",
};

[egucciar]

I came up with another solution for establishing some default. This is good if there isnt a ton of customization behind the need for wrapping.

// Custom Select with our enhancements
const SelectCustom = ({
  size = 'small',
  className,
  children,
  ...props
}: SelectCustomProps) => {
  // Add size="small" to children (Select.Option) if they don't already have a size prop
  const childrenWithSize = React.Children.map(children, child => {
    if (React.isValidElement(child) && !(child.props as any).size) {
      return React.cloneElement(child, { size: 'small' } as any)
    }
    return child
  })

  return (
    <ReshapedSelectCustom
      size={size}
      {...props}
      className={classNames(styles.container, className)}
    >
      {childrenWithSize}
    </ReshapedSelectCustom>
  )
}

[blvdmitry]

Making some related v4 changes, was this example basically about matching the size of Select and Select items used inside?