fix(types): make *Props interface extendable

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Do not propagate keyboard events outside `Popup`'s content only when focus trap is used @sophieH29 ([#1028](https://github.com/stardust-ui/react/pull/1028))
 - Narrate the first adding/selection of a `Dropdown` item using aria live @silviuavram ([#1032](https://github.com/stardust-ui/react/pull/1032))
+- `*Props` interfaces accept additional props @layershifter ([#1042](https://github.com/stardust-ui/react/pull/1042))
 
 ### Features
 - Add `inline` prop in the `Popup` for rendering the content next to the trigger element @mnajdova ([#1017](https://github.com/stardust-ui/react/pull/1017))

docs/src/prototypes/chatPane/composeMessage.tsx

@@ -9,8 +9,6 @@ import {
 } from '@stardust-ui/react'
 import style from './chatProtoStyle'
 
-type ToolbarProps = MenuItemProps & { key: string; 'aria-label'?: string }
-
 class ComposeMessage extends React.Component {
   public render() {
     return (
@@ -49,7 +47,7 @@ class ComposeMessage extends React.Component {
   }
 
   private renderToolbar(): React.ReactNode {
-    const items: (ToolbarProps | JSX.Element)[] = [
+    const items: MenuItemProps[] = [
       'compose',
       'attach',
       'smile',
@@ -74,10 +72,7 @@ class ComposeMessage extends React.Component {
     )
   }
 
-  private getMenuItem(
-    name: string,
-    index: number,
-  ): MenuItemProps & { key: string; 'aria-label': string } {
+  private getMenuItem(name: string, index: number): MenuItemProps {
     return {
       key: `${index}-${name}`,
       icon: {

packages/react/src/components/Animation/Animation.tsx

@@ -10,7 +10,7 @@ import {
 } from '../../lib'
 import { AnimationProp } from '../../themes/types'
 import createAnimationStyles from '../../lib/createAnimationStyles'
-import { ReactPropsStrict } from '../../types'
+import { ReactProps } from '../../types'
 
 export interface AnimationProps
   extends StyledComponentProps,
@@ -82,7 +82,7 @@ export interface AnimationProps
 /**
  * An animation allows the user to animate their own components.
  */
-class Animation extends UIComponent<ReactPropsStrict<AnimationProps>, any> {
+class Animation extends UIComponent<ReactProps<AnimationProps>, any> {
   static create: Function
 
   static className = 'ui-animation'

packages/react/src/components/Flex/Flex.tsx

@@ -9,6 +9,8 @@ import FlexItem from './FlexItem'
 import FlexGap from './FlexGap'
 
 export interface FlexProps {
+  [key: string]: any
+
   /** Defines if container should be inline element. */
   inline?: boolean
 

packages/react/src/components/Portal/Portal.tsx

@@ -18,7 +18,7 @@ import Ref from '../Ref/Ref'
 import PortalInner from './PortalInner'
 import { FocusTrapZone, FocusTrapZoneProps } from '../../lib/accessibility/FocusZone'
 import { AccessibilityAttributes, OnKeyDownHandler } from '../../lib/accessibility/types'
-import { ReactPropsStrict } from '../../types'
+import { ReactProps } from '../../types'
 
 type ReactMouseEvent = React.MouseEvent<HTMLElement>
 export type TriggerAccessibility = {
@@ -81,7 +81,7 @@ export interface PortalState {
 /**
  * A component that allows you to render children outside their parent.
  */
-class Portal extends AutoControlledComponent<ReactPropsStrict<PortalProps>, PortalState> {
+class Portal extends AutoControlledComponent<ReactProps<PortalProps>, PortalState> {
   private portalNode: HTMLElement
   private triggerNode: HTMLElement
 

packages/react/src/components/Portal/PortalInner.tsx

@@ -3,7 +3,7 @@ import * as _ from 'lodash'
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { isBrowser, ChildrenComponentProps, commonPropTypes } from '../../lib'
-import { ReactPropsStrict } from '../../types'
+import { ReactProps } from '../../types'
 
 export interface PortalInnerProps extends ChildrenComponentProps {
   /** Existing element the portal should be bound to. */
@@ -27,7 +27,7 @@ export interface PortalInnerProps extends ChildrenComponentProps {
 /**
  * An inner component that allows you to render children outside their parent.
  */
-class PortalInner extends React.Component<ReactPropsStrict<PortalInnerProps>> {
+class PortalInner extends React.Component<ReactProps<PortalInnerProps>> {
   public static propTypes = {
     ...commonPropTypes.createCommon({
       accessibility: false,

packages/react/src/components/Ref/Ref.tsx

@@ -3,7 +3,7 @@ import * as React from 'react'
 import { isForwardRef } from 'react-is'
 
 import { ChildrenComponentProps, customPropTypes } from '../../lib'
-import { ReactPropsStrict } from '../../types'
+import { ReactProps } from '../../types'
 import RefFindNode from './RefFindNode'
 import RefForward from './RefForward'
 
@@ -16,7 +16,7 @@ export interface RefProps extends ChildrenComponentProps<React.ReactElement<any>
   innerRef: React.Ref<any>
 }
 
-const Ref: React.FunctionComponent<ReactPropsStrict<RefProps>> = props => {
+const Ref: React.FunctionComponent<ReactProps<RefProps>> = props => {
   const { children, innerRef } = props
 
   const child = React.Children.only(children)

packages/react/src/lib/commonPropInterfaces.ts

@@ -18,6 +18,8 @@ export interface AnimatedComponentProps {
 export interface UIComponentProps<P = any, V = any>
   extends StyledComponentProps<P, V>,
     AnimatedComponentProps {
+  [key: string]: any
+
   /** An element type to render as (string or function). */
   as?: any
 

packages/react/src/types.ts

@@ -26,8 +26,7 @@ export type ObjectOrFunc<TResult, TArg = {}> = ((arg: TArg) => TResult) | TResul
 export type Props<T = {}> = T & ObjectOf<any>
 export type ReactChildren = React.ReactNodeArray | React.ReactNode
 
-export type ReactPropsStrict<T> = { [K in keyof T]: NullableIfUndefined<T[K]> }
-export type ReactProps<T> = Extendable<ReactPropsStrict<T>>
+export type ReactProps<T> = { [K in keyof T]: NullableIfUndefined<T[K]> }
 
 export type ComponentEventHandler<TProps> = (
   event: React.SyntheticEvent<HTMLElement>,