[chore] Exporting missing types for PlaybackControls (#2650)

Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>

src/components/src/common/animation-control/playback-controls.tsx

@@ -57,7 +57,7 @@ const DEFAULT_ANIMATE_ITEMS = {
     tooltip: 'tooltip.animationByIncremental'
   }
 };
-interface PlaybackControlsProps {
+export interface PlaybackControlsProps {
   isAnimatable?: boolean;
   isAnimating?: boolean;
   width?: number;

src/components/src/common/icon-button.tsx

@@ -4,6 +4,7 @@
 import {MouseEvent, ReactNode} from 'react';
 import styled from 'styled-components';
 import {Button, ButtonProps} from './styled-components';
+
 interface IconButtonProps extends ButtonProps {
   collapsed?: boolean;
   theme?: object;

src/components/src/common/styled-components.tsx

@@ -5,8 +5,9 @@ import styled from 'styled-components';
 import DatePicker from 'react-date-picker';
 import TimePicker from 'react-time-picker';
 import ReactTooltip from 'react-tooltip';
-import {media} from '@kepler.gl/styles';
 import classnames from 'classnames';
+
+import {media} from '@kepler.gl/styles';
 import {RGBColor} from '@kepler.gl/types';
 
 export const SelectText = styled.span`
@@ -185,7 +186,10 @@ export const Tooltip = styled(ReactTooltip)`
   }
 `;
 
-export interface ButtonProps {
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  className?: string;
+  ref?: React.ForwardedRef<HTMLElement>;
+  children?: React.ReactNode;
   negative?: boolean;
   secondary?: boolean;
   link?: boolean;
@@ -196,7 +200,7 @@ export interface ButtonProps {
   disabled?: boolean;
   width?: string;
   inactive?: boolean;
-}
+};
 
 // this needs to be an actual button to be able to set disabled attribute correctly
 export const Button = styled.button.attrs(props => ({

src/components/src/index.ts

@@ -297,11 +297,7 @@ export {default as EffectTimeConfiguratorFactory} from './effects/effect-time-co
 
 export {default as HowToButton} from './side-panel/layer-panel/how-to-button';
 // eslint-disable-next-line prettier/prettier
-export type {
-  ButtonProps,
-  StyledPanelHeaderProps,
-  StyledExportSectionProps
-} from './common';
+export type {ButtonProps, StyledPanelHeaderProps, StyledExportSectionProps} from './common';
 
 export type {CollapseButtonProps} from './side-panel/side-bar';
 export type {PanelTabProps} from './side-panel/panel-tab';
@@ -324,6 +320,7 @@ export type {
   OptionDropdownProps,
   FormatterDropdownProps
 } from './common/data-table/option-dropdown';
+export type {PlaybackControlsProps} from './common/animation-control/playback-controls';
 export type {LayerListProps, LayerListFactoryDeps} from './side-panel/layer-panel/layer-list';
 export type {MapContainerProps} from './map-container';
 export type {MapControlProps} from './map/map-control';

src/components/src/side-panel/layer-panel/custom-palette.tsx

@@ -1,7 +1,7 @@
 // SPDX-License-Identifier: MIT
 // Copyright contributors to the kepler.gl project
 
-import React, {Component, createRef, MouseEventHandler, MouseEvent, PropsWithChildren} from 'react';
+import React, {Component, createRef, MouseEventHandler, PropsWithChildren} from 'react';
 import classnames from 'classnames';
 import styled, {css} from 'styled-components';
 import {
@@ -27,7 +27,7 @@ type CustomPaletteProps = {
   setCustomPalette: (c: NestedPartial<ColorRange>) => void;
   onCancel: () => void;
   onToggleSketcher: (i: boolean | number) => void;
-  onApply: (p: ColorRange, e: MouseEvent) => void;
+  onApply: (p: ColorRange, e: React.MouseEvent) => void;
 };
 
 const dragHandleActive = css`