Add typescript types to fluidSelect and fluidSkeleton (#17369)

* fix: rename fluidSelect and skeleton as tsx files

* fix: add typescript types to fluidSelect and fluidSelectSkeleton

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

@@ -9,8 +9,17 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
+export interface FluidSelectSkeletonProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+}
 
-const FluidSelectSkeleton = ({ className, ...rest }) => {
+const FluidSelectSkeleton: React.FC<FluidSelectSkeletonProps> = ({
+  className,
+  ...rest
+}) => {
   const prefix = usePrefix();
   const wrapperClasses = cx(
     className,

packages/react/src/components/FluidSelect/FluidSelect.tsx

@@ -0,0 +1,148 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import Select from '../Select';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+
+export interface FluidSelectProps {
+  /**
+   * Provide the contents of your Select
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className?: string;
+
+  /**
+   * Optionally provide the default value of the `<select>`
+   */
+  defaultValue?: any;
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify a custom `id` for the `<select>`
+   */
+  id: string;
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid?: boolean;
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText?: React.ReactNode;
+
+  /**
+   * Provide label text to be read by screen readers when interacting with the
+   * control
+   */
+  labelText?: React.ReactNode;
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes
+   */
+  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
+
+  /**
+   * 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 FluidSelect = React.forwardRef<HTMLSelectElement, FluidSelectProps>(
+  function FluidSelect({ className, children, ...other }, ref) {
+    const prefix = usePrefix();
+    const classNames = classnames(`${prefix}--select--fluid`, className);
+
+    return (
+      <FormContext.Provider value={{ isFluid: true }}>
+        <Select ref={ref} className={classNames} {...other}>
+          {children}
+        </Select>
+      </FormContext.Provider>
+    );
+  }
+);
+
+FluidSelect.propTypes = {
+  /**
+   * Provide the contents of your Select
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className: PropTypes.string,
+
+  /**
+   * Optionally provide the default value of the `<select>`
+   */
+  defaultValue: PropTypes.any,
+
+  /**
+   * Specify whether the control is disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify a custom `id` for the `<select>`
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  invalid: PropTypes.bool,
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  invalidText: PropTypes.node,
+
+  /**
+   * Provide label text to be read by screen readers when interacting with the
+   * control
+   */
+  labelText: PropTypes.node,
+
+  /**
+   * Provide an optional `onChange` hook that is called each time the value of
+   * the underlying `<input>` changes
+   */
+  onChange: PropTypes.func,
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  warn: PropTypes.bool,
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  warnText: PropTypes.node,
+};
+
+export default FluidSelect;

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

@@ -6,7 +6,9 @@
  */
 
 import FluidSelect from './FluidSelect';
-
+import FluidSelectSkeletonProps from './FluidSelect.Skeleton';
+import FluidSelectProps from './FluidSelect.Skeleton';
+export type { FluidSelectSkeletonProps, FluidSelectProps };
 export default FluidSelect;
 export { FluidSelect };
 export { default as FluidSelectSkeleton } from './FluidSelect.Skeleton';