feat(TU-9582): Export correct prop types for react components (#646)

Features:
* Export new types for react components (PopoverProps, PopupButtonProps, SidetabProp, SliderButtonProps, WidgetProps) - closes #643 

Bug fixes:
* Make children prop optional in the PopupButton and SliderButton

packages/embed-react/src/components/make-button-component.tsx

@@ -6,21 +6,22 @@ import React, {
   useMemo,
   useRef,
   ReactHTML,
-  HTMLAttributes,
+  AriaAttributes,
 } from 'react'
+import { ButtonProps } from '@typeform/embed'
 
 import { InlineStyle } from './inline-style'
 
 type ButtonComponentBaseProps = {
   id: string
   as?: keyof ReactHTML
-  buttonProps?: HTMLAttributes<HTMLElement> & Record<string, string>
+  buttonProps?: ButtonProps & AriaAttributes
   style?: CSSProperties
   className?: string
-  children: ReactNode
+  children?: ReactNode
 }
 
-type ButtonComponentProps<T> = T & ButtonComponentBaseProps
+export type ButtonComponentProps<T> = T & ButtonComponentBaseProps
 
 type CreateFnProps<T> = Omit<ButtonComponentProps<T>, keyof ButtonComponentBaseProps>
 

packages/embed-react/src/components/make-initializer-component.tsx

@@ -6,7 +6,7 @@ type InitializerComponentBaseProps = {
   id: string
 }
 
-type InitializerComponentProps<T> = T & InitializerComponentBaseProps
+export type InitializerComponentProps<T> = T & InitializerComponentBaseProps
 
 type CreateFnProps<T> = Omit<InitializerComponentProps<T>, keyof InitializerComponentBaseProps>
 

packages/embed-react/src/components/widget.tsx

@@ -3,7 +3,7 @@ import { createWidget, WidgetOptions } from '@typeform/embed'
 
 import { InlineStyle } from './inline-style'
 
-type WidgetProps = Omit<WidgetOptions, 'container'> & {
+export type WidgetProps = Omit<WidgetOptions, 'container'> & {
   id: string
   style?: CSSProperties
   className?: string

packages/embed-react/src/index.tsx

@@ -9,17 +9,27 @@ import {
   SidetabOptions,
 } from '@typeform/embed'
 
-import { makeButtonComponent, makeInitializerComponent, Widget as WidgetComponent } from './components'
+import {
+  ButtonComponentProps,
+  InitializerComponentProps,
+  makeButtonComponent,
+  makeInitializerComponent,
+  Widget as WidgetComponent,
+  WidgetProps,
+} from './components'
 import { memoComponent } from './utils'
 
-const Widget = memoComponent(WidgetComponent)
-
-const PopupButton = memoComponent(makeButtonComponent<PopupOptions>(createPopup, 'popup'))
+export { WidgetProps }
+export const Widget = memoComponent<WidgetProps>(WidgetComponent)
 
-const SliderButton = memoComponent(makeButtonComponent<SliderOptions>(createSlider, 'slider'))
+export type PopupButtonProps = ButtonComponentProps<PopupOptions>
+export const PopupButton = memoComponent<PopupButtonProps>(makeButtonComponent<PopupOptions>(createPopup, 'popup'))
 
-const Popover = memoComponent(makeInitializerComponent<PopoverOptions>(createPopover, 'popover'))
+export type SliderButtonProps = ButtonComponentProps<SliderOptions>
+export const SliderButton = memoComponent<SliderButtonProps>(makeButtonComponent<SliderOptions>(createSlider, 'slider'))
 
-const Sidetab = memoComponent(makeInitializerComponent<SidetabOptions>(createSidetab, 'sidetab'))
+export type PopoverProps = InitializerComponentProps<PopoverOptions>
+export const Popover = memoComponent<PopoverProps>(makeInitializerComponent<PopoverOptions>(createPopover, 'popover'))
 
-export { Widget, PopupButton, SliderButton, Popover, Sidetab }
+export type SidetabProps = InitializerComponentProps<SidetabOptions>
+export const Sidetab = memoComponent<SidetabProps>(makeInitializerComponent<SidetabOptions>(createSidetab, 'sidetab'))

packages/embed/src/index.ts

@@ -3,3 +3,4 @@ export * from './factories/create-popup'
 export * from './factories/create-slider'
 export * from './factories/create-widget'
 export * from './factories/create-sidetab'
+export { ButtonProps } from './base'