[Typescript]: Fix 9.x exported members (#1633)

* fix exported members

* #1633 changelog entry

Author: thompsongl

CHANGELOG.md

@@ -1,6 +1,8 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `9.0.0`.
+**Bug fixes**
+
+- Fixed definition exports for converted Typescript components ([#1633](https://github.com/elastic/eui/pull/1633))
 
 ## [`9.0.0`](https://github.com/elastic/eui/tree/v9.0.0)
 

src/components/flyout/flyout_body.tsx

@@ -2,9 +2,15 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 
-export const EuiFlyoutBody: FunctionComponent<
+export type EuiFlyoutBodyProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
-> = ({ children, className, ...rest }) => {
+>;
+
+export const EuiFlyoutBody: EuiFlyoutBodyProps = ({
+  children,
+  className,
+  ...rest
+}) => {
   const classes = classNames('euiFlyoutBody', className);
 
   return (

src/components/flyout/flyout_footer.tsx

@@ -2,9 +2,15 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 
-export const EuiFlyoutFooter: FunctionComponent<
+export type EuiFlyoutFooterProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
-> = ({ children, className, ...rest }) => {
+>;
+
+export const EuiFlyoutFooter: EuiFlyoutFooterProps = ({
+  children,
+  className,
+  ...rest
+}) => {
   const classes = classNames('euiFlyoutFooter', className);
 
   return (

src/components/flyout/flyout_header.tsx

@@ -2,12 +2,14 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 
-export type EuiFlyoutHeaderProps = HTMLAttributes<HTMLDivElement> &
-  CommonProps & {
-    hasBorder?: boolean;
-  };
+export type EuiFlyoutHeaderProps = FunctionComponent<
+  HTMLAttributes<HTMLDivElement> &
+    CommonProps & {
+      hasBorder?: boolean;
+    }
+>;
 
-export const EuiFlyoutHeader: FunctionComponent<EuiFlyoutHeaderProps> = ({
+export const EuiFlyoutHeader: EuiFlyoutHeaderProps = ({
   children,
   className,
   hasBorder = false,

src/components/flyout/index.d.ts

@@ -1,5 +1,9 @@
 import { CommonProps } from '../common';
 
+import { EuiFlyoutFooterProps } from './flyout_footer';
+import { EuiFlyoutHeaderProps } from './flyout_header';
+import { EuiFlyoutBodyProps } from './flyout_body';
+
 declare module '@elastic/eui' {
   export interface EuiFlyoutProps {
     onClose: () => void;
@@ -27,4 +31,25 @@ declare module '@elastic/eui' {
   }
 
   export const EuiFlyout: React.FunctionComponent<CommonProps & EuiFlyoutProps>;
+
+  /**
+   * Flyout body type defs
+   *
+   * @see './flyout_body.js'
+   */
+  export const EuiFlyoutBody: EuiFlyoutBodyProps;
+
+  /**
+   * Flyout footer type defs
+   *
+   * @see './flyout_footer.js'
+   */
+  export const EuiFlyoutFooter: EuiFlyoutFooterProps;
+
+  /**
+   * Flyout header type defs
+   *
+   * @see './flyout_header.js'
+   */
+  export const EuiFlyoutHeader: EuiFlyoutHeaderProps;
 }

src/components/modal/index.d.ts

@@ -4,6 +4,11 @@ import { CommonProps, Omit } from '../common';
 
 import { ReactNode, FunctionComponent, HTMLAttributes } from 'react';
 
+import { EuiModalFooterProps } from './modal_footer';
+import { EuiModalHeaderProps } from './modal_header';
+import { EuiModalBodyProps } from './modal_body';
+import { EuiModalHeaderTitleProps } from './modal_header_title';
+
 declare module '@elastic/eui' {
   /**
    * Modal type defs
@@ -66,4 +71,32 @@ declare module '@elastic/eui' {
       Omit<HTMLAttributes<HTMLDivElement>, 'title'> &
       EuiConfirmModalProps
   >;
+
+  /**
+   * Modal body type defs
+   *
+   * @see './modal_body.js'
+   */
+  export const EuiModalBody: EuiModalBodyProps;
+
+  /**
+   * Modal footer type defs
+   *
+   * @see './modal_footer.js'
+   */
+  export const EuiModalFooter: EuiModalFooterProps;
+
+  /**
+   * Modal header type defs
+   *
+   * @see './modal_header.js'
+   */
+  export const EuiModalHeader: EuiModalHeaderProps;
+
+  /**
+   * Modal header title type defs
+   *
+   * @see './modal_header_title.js'
+   */
+  export const EuiModalHeaderTitle: EuiModalHeaderTitleProps;
 }

src/components/modal/modal_body.tsx

@@ -2,9 +2,15 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { CommonProps } from '../common';
 
-export const EuiModalBody: FunctionComponent<
+export type EuiModalBodyProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
-> = ({ className, children, ...rest }) => {
+>;
+
+export const EuiModalBody: EuiModalBodyProps = ({
+  className,
+  children,
+  ...rest
+}) => {
   const classes = classnames('euiModalBody', className);
   return (
     <div className={classes} {...rest}>

src/components/modal/modal_footer.tsx

@@ -2,9 +2,15 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { CommonProps } from '../common';
 
-export const EuiModalFooter: FunctionComponent<
+export type EuiModalFooterProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
-> = ({ className, children, ...rest }) => {
+>;
+
+export const EuiModalFooter: EuiModalFooterProps = ({
+  className,
+  children,
+  ...rest
+}) => {
   const classes = classnames('euiModalFooter', className);
   return (
     <div className={classes} {...rest}>

src/components/modal/modal_header.tsx

@@ -2,9 +2,15 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { CommonProps } from '../common';
 
-export const EuiModalHeader: FunctionComponent<
+export type EuiModalHeaderProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
-> = ({ className, children, ...rest }) => {
+>;
+
+export const EuiModalHeader: EuiModalHeaderProps = ({
+  className,
+  children,
+  ...rest
+}) => {
   const classes = classnames('euiModalHeader', className);
   return (
     <div className={classes} {...rest}>

src/components/modal/modal_header_title.tsx

@@ -2,9 +2,15 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { CommonProps } from '../common';
 
-export const EuiModalHeaderTitle: FunctionComponent<
+export type EuiModalHeaderTitleProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
-> = ({ className, children, ...rest }) => {
+>;
+
+export const EuiModalHeaderTitle: EuiModalHeaderTitleProps = ({
+  className,
+  children,
+  ...rest
+}) => {
   const classes = classnames('euiModalHeader__title', className);
   return (
     <div className={classes} {...rest}>