fix(Flex): FlexProps extends UIComponentProps

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Fix narration for `Menu` @miroslavstastny ([#1105](https://github.com/stardust-ui/react/pull/1105))
 - Fix `timestamp` to be shown if the `reactionGroup` prop is applied on the `ChatMessage` component in Teams theme @mnajdova ([#1100](https://github.com/stardust-ui/react/pull/1100))
+- Fix typings for `FlexProps` and `FlexItemProps` @miroslavstastny ([#1089](https://github.com/stardust-ui/react/pull/1089))
 
 ### Features
 - Add `attached` prop on the `ChatMessage` component, which is automatically set by the `ChatItem` component @mnajdova ([#1100](https://github.com/stardust-ui/react/pull/1100))

docs/src/prototypes/chatPane/chatPaneHeader.tsx

@@ -19,7 +19,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
     )
   }
 
-  private renderBanner(): React.ReactNode {
+  private renderBanner(): React.ReactElement {
     return (
       <Segment
         content={
@@ -41,7 +41,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
     )
   }
 
-  private renderMainArea(): React.ReactNode {
+  private renderMainArea(): React.ReactElement {
     const { chat } = this.props
 
     return (
@@ -74,7 +74,7 @@ class ChatPaneHeader extends React.PureComponent<ChatPaneHeaderProps> {
     )
   }
 
-  private renderHeaderButtons(): React.ReactNode {
+  private renderHeaderButtons(): React.ReactElement {
     return (
       <div style={{ display: 'inline-flex' }}>
         <Button.Group

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

@@ -2,13 +2,11 @@ import * as PropTypes from 'prop-types'
 import * as React from 'react'
 import * as _ from 'lodash'
 
-import { UIComponent, commonPropTypes } from '../../lib'
+import { UIComponent, commonPropTypes, UIComponentProps, ChildrenComponentProps } from '../../lib'
 import { ReactProps } from '../../types'
 import FlexItem from './FlexItem'
 
-export interface FlexProps {
-  [key: string]: any
-
+export interface FlexProps extends UIComponentProps, ChildrenComponentProps {
   /** Defines if container should be inline element. */
   inline?: boolean
 

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

@@ -2,11 +2,17 @@ import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import cx from 'classnames'
 import * as _ from 'lodash'
-import { UIComponent, commonPropTypes } from '../../lib'
+import { UIComponent, commonPropTypes, UIComponentProps, ChildrenComponentProps } from '../../lib'
 import { mergeStyles } from '../../lib/mergeThemes'
-import { Extendable } from '../../types'
+import { ReactProps } from '../../types'
 
-export interface FlexItemProps {
+export type FlexItemChildren =
+  | React.ReactElement<any>
+  | ((
+      { styles: ComponentSlotStylesPrepared, classes: ComponentSlotClasses },
+    ) => React.ReactElement<any>)
+
+export interface FlexItemProps extends UIComponentProps, ChildrenComponentProps<FlexItemChildren> {
   /** Controls item's alignment. */
   align?: 'auto' | 'start' | 'end' | 'center' | 'baseline' | 'stretch'
 
@@ -36,7 +42,7 @@ export interface FlexItemProps {
   flexDirection?: 'row' | 'column'
 }
 
-class FlexItem extends UIComponent<Extendable<FlexItemProps>> {
+class FlexItem extends UIComponent<ReactProps<FlexItemProps>> {
   static className = 'ui-flex__item'
 
   static displayName = 'FlexItem'