Add typescript types to fluid date picker and its skeleton state and fluid datepicker input

packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.js → packages/react/src/components/FluidDatePicker/FluidDatePicker.Skeleton.tsx

@@ -12,11 +12,22 @@ import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
 import { Calendar } from '@carbon/icons-react';
 
-function FluidDatePickerSkeleton({
+export interface FluidDatePickerSkeletonProps {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className?: string;
+  /**
+   * Specify which variant of the DatePicker the skeleton should mimic
+   */
+  datePickerType?: 'simple' | 'single' | 'range';
+}
+
+const FluidDatePickerSkeleton: React.FC<FluidDatePickerSkeletonProps> = ({
   className,
   datePickerType = 'single',
   ...other
-}) {
+}) => {
   const prefix = usePrefix();
 
   const classNames = classnames(
@@ -54,7 +65,7 @@ function FluidDatePickerSkeleton({
       </div>
     </FormContext.Provider>
   );
-}
+};
 
 FluidDatePickerSkeleton.propTypes = {
   /**

packages/react/src/components/FluidDatePicker/FluidDatePicker.js → packages/react/src/components/FluidDatePicker/FluidDatePicker.tsx

@@ -6,13 +6,47 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
 import classnames from 'classnames';
 import DatePicker from '../DatePicker';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm/FormContext';
+import React from 'react';
+
+export interface FluidDatePickerProps {
+  /**
+   * The child node(s)
+   */
+  children?: React.ReactNode;
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className?: string;
+  /**
+   * Specify whether or not the control is invalid
+   */
+  invalid?: boolean;
+  /**
+   * Provide the text that is displayed when the control is in error state
+   */
+  invalidText?: React.ReactNode;
+  /**
+   * Whether the input should be read-only
+   */
+  readOnly?: boolean;
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn?: boolean;
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText?: React.ReactNode;
+}
 
-const FluidDatePicker = React.forwardRef(function FluidDatePicker(
+const FluidDatePicker: React.FC<FluidDatePickerProps> = React.forwardRef<
+  HTMLInputElement,
+  FluidDatePickerProps
+>(function FluidDatePicker(
   {
     className,
     children,

packages/react/src/components/FluidDatePicker/index.js → packages/react/src/components/FluidDatePicker/index.tsx

@@ -6,7 +6,9 @@
  */
 
 import FluidDatePicker from './FluidDatePicker';
-
+import type { FluidDatePickerProps } from './FluidDatePicker';
+import { FluidDatePickerSkeletonProps } from './FluidDatePicker.Skeleton';
+export type { FluidDatePickerProps, FluidDatePickerSkeletonProps };
 export { default as FluidDatePickerSkeleton } from './FluidDatePicker.Skeleton';
 export default FluidDatePicker;
 export { FluidDatePicker };

packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.js → packages/react/src/components/FluidDatePickerInput/FluidDatePickerInput.tsx

@@ -6,12 +6,12 @@
  */
 
 import React from 'react';
-import DatePickerInput from '../DatePickerInput';
+import DatePickerInput, { DatePickerInputProps } from '../DatePickerInput';
 import { FormContext } from '../FluidForm/FormContext';
 
 const FluidDatePickerInput = React.forwardRef(function FluidDatePickerInput(
-  { ...other },
-  ref
+  { ...other }: DatePickerInputProps,
+  ref: React.Ref<HTMLDivElement>
 ) {
   return (
     <FormContext.Provider value={{ isFluid: true }}>