fix(ui): typing improvements

packages/ui-components/src/components/ComboBox/ComboBox.component.tsx

@@ -13,7 +13,7 @@ import { Spinner } from "../Spinner/index"
 import { flip, offset, shift, size } from "@floating-ui/react-dom"
 import { usePortalRef } from "../PortalProvider/index"
 import { createPortal } from "react-dom"
-import { ComboBoxOptionProps } from "../ComboBoxOption/index"
+import { ComboBoxOptionProps } from "../ComboBoxOption/ComboBoxOption.component"
 
 // STYLES
 
@@ -455,7 +455,7 @@ export type ComboBoxWidth = "full" | "auto"
 //eslint-disable-next-line no-unused-vars
 type OnChangeHandler = (value: string) => void
 
-export type ComboBoxProps = {
+export interface ComboBoxProps {
   /** The aria-label of the ComboBox. Defaults to the label if label was passed. */
   ariaLabel?: string
   /** The children to Render. Use `ComboBox.Option` elements. */

packages/ui-components/src/components/ComboBox/ComboBox.stories.tsx

@@ -37,28 +37,18 @@ export default {
   ],
 }
 
-const Template = ({ children, ...args }: TemplateProps) => {
+const Template = ({ children, ...args }: ComboBoxProps) => {
   return <ComboBox {...args}>{children}</ComboBox>
 }
 
-// define prop types fro Template
-type TemplateProps = {
-  children: React.ReactNode
-} & ComboBoxProps
-
-const ConstrainedWidthTemplate = ({ children, ...args }: ConstrainedWidthTemplateProps) => {
+const ConstrainedWidthTemplate = ({ children, ...args }: ComboBoxProps) => {
   return (
     <div style={{ width: "300px" }}>
       <ComboBox {...args}>{children}</ComboBox>
     </div>
   )
 }
 
-// define prop types for ConstrainedWidthTemplate
-type ConstrainedWidthTemplateProps = {
-  children: React.ReactNode
-} & ComboBoxProps
-
 const ControlledTemplate = ({ value, children }: ControlledTemplateProps) => {
   const [v, setV] = useState(value)
 
@@ -70,10 +60,9 @@ const ControlledTemplate = ({ value, children }: ControlledTemplateProps) => {
 }
 
 // define prop types for ControlledTemplate
-type ControlledTemplateProps = {
+interface ControlledTemplateProps extends ComboBoxProps {
   value: string
-  children: React.ReactNode
-} & ComboBoxProps
+}
 
 export const Default = {
   render: Template,

packages/ui-components/src/components/ComboBoxOption/ComboBoxOption.component.tsx

@@ -99,10 +99,10 @@ export const ComboBoxOption = ({
   )
 }
 
-export type ComboBoxOptionProps = {
+export interface ComboBoxOptionProps extends React.HTMLProps<HTMLLIElement> {
   children?: string
   disabled?: boolean
   value?: string
   label?: string
   className?: string
-} & React.HTMLProps<HTMLLIElement>
+} 

packages/ui-components/src/components/ComboBoxOption/index.ts

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { ComboBoxOption, type ComboBoxOptionProps } from "./ComboBoxOption.component"
+export { ComboBoxOption } from "./ComboBoxOption.component"