refactor(ui): fix review comments

mark-karnaukh-extern-sap · mark-karnaukh-extern-sap · commit b4296554fa0e · 2025-07-02T17:32:03.000+02:00
diff --git a/packages/ui-components/src/components/ComboBox/components/ComboBoxContent.tsx b/packages/ui-components/src/components/ComboBox/components/ComboBoxContent.tsx
@@ -3,32 +3,29 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { ReactNode, useEffect, useCallback } from "react"
+import React, { ReactNode, useEffect } from "react"
 import { Combobox } from "@headlessui/react"
 import { useComboBoxContext } from "../context"
 
 interface ComboBoxContentProps {
   children: ReactNode
 }
-const ComboBoxContent: React.FC<ComboBoxContentProps> = ({ children }) => {
+export const ComboBoxContent: React.FC<ComboBoxContentProps> = ({ children }) => {
   const {
     state: { selectedValue, isOpen, setIsOpen, setSelectedValue },
     derivedProps: { defaultValue, disabled, loading: isLoading, error: hasError, name, onChange },
     restProps,
   } = useComboBoxContext()
 
-  const handleChange = useCallback(
-    (value: string) => {
-      setSelectedValue(value)
+  const handleChange = (value: string) => {
+    setSelectedValue(value)
 
-      if (value) {
-        setIsOpen(false)
-      }
+    if (value) {
+      setIsOpen(false)
+    }
 
-      onChange?.(value)
-    },
-    [onChange]
-  )
+    onChange?.(value)
+  }
 
   return (
     <Combobox
@@ -54,5 +51,3 @@ const ComboBoxContent: React.FC<ComboBoxContentProps> = ({ children }) => {
     </Combobox>
   )
 }
-
-export default ComboBoxContent
diff --git a/packages/ui-components/src/components/ComboBox/components/ComboBoxFloatingMenu.tsx b/packages/ui-components/src/components/ComboBox/components/ComboBoxFloatingMenu.tsx
@@ -5,12 +5,12 @@
 
 import React from "react"
 import { ComboboxOptions } from "@headlessui/react"
-import { usePortalRef } from "../../PortalProvider/index"
 import { createPortal } from "react-dom"
+import { usePortalRef } from "../../PortalProvider/index"
 import { useComboBoxContext } from "../context"
 import useComboBoxStyles from "../styles"
 
-const ComboBoxFloatingMenu: React.FC = () => {
+export const ComboBoxFloatingMenu: React.FC = () => {
   const {
     state: { isOpen },
     floating: { refs, strategy, x, y, getFloatingProps },
diff --git a/packages/ui-components/src/components/ComboBox/components/ComboBoxInput.tsx b/packages/ui-components/src/components/ComboBox/components/ComboBoxInput.tsx
@@ -3,14 +3,14 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React, { useCallback, ReactNode } from "react"
+import React, { ReactNode } from "react"
 import { ComboboxInput } from "@headlessui/react"
 import { OptionValuesAndLabelsKey } from "../hooks"
 import { useComboBoxContext } from "../context"
 import { safeToString } from "../../../utils"
 import useComboBoxStyles from "../styles"
 
-const ComboBoxInput: React.FC = () => {
+export const ComboBoxInput: React.FC = () => {
   const {
     inputElementId,
     helpTextId,
@@ -32,50 +32,35 @@ const ComboBoxInput: React.FC = () => {
 
   const { inputStyles } = useComboBoxStyles()
 
-  const handleInputChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const newQuery = event?.target?.value || ""
-      setQuery(newQuery)
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newQuery = event?.target?.value || ""
+    setQuery(newQuery)
 
-      // Only trigger onInputChange if it exists
-      onInputChange?.(event)
-    },
-    [onInputChange]
-  )
+    // Only trigger onInputChange if it exists
+    onInputChange?.(event)
+  }
 
-  const handleFocus = useCallback(
-    (event: React.FocusEvent<HTMLInputElement>) => {
-      setFocus(true)
+  const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {
+    setFocus(true)
 
-      if (!isOpen) {
-        setIsOpen(true)
-      }
+    if (!isOpen) {
+      setIsOpen(true)
+    }
 
-      onFocus?.(event)
-    },
-    [isOpen, onFocus]
-  )
+    onFocus?.(event)
+  }
 
-  const handleBlur = useCallback(
-    (event: React.FocusEvent<HTMLInputElement>) => {
-      setFocus(false)
-      setIsOpen(false)
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
+    setFocus(false)
+    setIsOpen(false)
 
-      onBlur?.(event)
-    },
-    [onBlur]
-  )
+    onBlur?.(event)
+  }
 
-  // Memoized display value calculation
-  const displayValue = useCallback(
-    (val: ReactNode) => {
-      const option = mappedOptions.get(val)
-      return (
-        (option?.children && safeToString(option.children)) || option?.label || valueLabel || safeToString(val) || ""
-      )
-    },
-    [mappedOptions, valueLabel]
-  )
+  const displayValue = (val: ReactNode) => {
+    const option = mappedOptions.get(val)
+    return (option?.children && safeToString(option.children)) || option?.label || valueLabel || safeToString(val) || ""
+  }
 
   return (
     <ComboboxInput<OptionValuesAndLabelsKey>
@@ -92,5 +77,3 @@ const ComboBoxInput: React.FC = () => {
     />
   )
 }
-
-export default ComboBoxInput
diff --git a/packages/ui-components/src/components/ComboBox/components/ComboBoxInputWrapper.tsx b/packages/ui-components/src/components/ComboBox/components/ComboBoxInputWrapper.tsx
@@ -10,7 +10,7 @@ import useComboBoxStyles from "../styles"
 interface ComboBoxInputWrapperProps {
   children: ReactNode
 }
-const ComboBoxInputWrapper: React.FC<ComboBoxInputWrapperProps> = ({ children }) => {
+export const ComboBoxInputWrapper: React.FC<ComboBoxInputWrapperProps> = ({ children }) => {
   const { inputWrapperStyles } = useComboBoxStyles()
 
   const {
@@ -23,5 +23,3 @@ const ComboBoxInputWrapper: React.FC<ComboBoxInputWrapperProps> = ({ children })
     </div>
   )
 }
-
-export default ComboBoxInputWrapper
diff --git a/packages/ui-components/src/components/ComboBox/components/ComboBoxLabel.tsx b/packages/ui-components/src/components/ComboBox/components/ComboBoxLabel.tsx
@@ -9,7 +9,7 @@ import { useComboBoxContext } from "../context"
 import { isNotEmptyString } from "../../../utils"
 import useComboBoxStyles from "../styles"
 
-const ComboBoxLabel: React.FC = () => {
+export const ComboBoxLabel: React.FC = () => {
   const {
     inputElementId,
     derivedProps: { label, placeholder, loading: isLoading, error: hasError, required, disabled },
@@ -45,5 +45,3 @@ const ComboBoxLabel: React.FC = () => {
     </>
   )
 }
-
-export default ComboBoxLabel
diff --git a/packages/ui-components/src/components/ComboBox/components/ComboBoxOuterWrapper.tsx b/packages/ui-components/src/components/ComboBox/components/ComboBoxOuterWrapper.tsx
@@ -9,10 +9,8 @@ import useComboBoxStyles from "../styles"
 interface ComboBoxOuterWrapperProps {
   children: ReactNode
 }
-const ComboBoxOuterWrapper: React.FC<ComboBoxOuterWrapperProps> = ({ children }) => {
+export const ComboBoxOuterWrapper: React.FC<ComboBoxOuterWrapperProps> = ({ children }) => {
   const { outerWrapperStyles } = useComboBoxStyles()
 
   return <div className={outerWrapperStyles}>{children}</div>
 }
-
-export default ComboBoxOuterWrapper
diff --git a/packages/ui-components/src/components/ComboBox/components/ComboBoxStatusIcon.tsx b/packages/ui-components/src/components/ComboBox/components/ComboBoxStatusIcon.tsx
@@ -9,7 +9,7 @@ import { Icon } from "../../Icon/index"
 import { useComboBoxContext } from "../context"
 import useComboBoxStyles from "../styles"
 
-const ComboBoxStatusIcon: React.FC = () => {
+export const ComboBoxStatusIcon: React.FC = () => {
   const {
     derivedProps: { loading: isLoading, error: hasError },
     validation: { isInvalid, isValid },
@@ -46,5 +46,3 @@ const ComboBoxStatusIcon: React.FC = () => {
 
   return <>{renderStatusIcon()}</>
 }
-
-export default ComboBoxStatusIcon
diff --git a/packages/ui-components/src/components/ComboBox/components/ComboBoxStatusMessage.tsx b/packages/ui-components/src/components/ComboBox/components/ComboBoxStatusMessage.tsx
@@ -8,7 +8,7 @@ import { FormHint } from "../../FormHint/index"
 import { isNotEmptyString } from "../../../utils"
 import { useComboBoxContext } from "../context"
 
-const ComboBoxStatusMessage: React.FC = () => {
+export const ComboBoxStatusMessage: React.FC = () => {
   const {
     helpTextId,
     derivedProps: { helptext, successtext, errortext },
@@ -22,5 +22,3 @@ const ComboBoxStatusMessage: React.FC = () => {
     </>
   )
 }
-
-export default ComboBoxStatusMessage
diff --git a/packages/ui-components/src/components/ComboBox/components/ComboBoxToggleButton.tsx b/packages/ui-components/src/components/ComboBox/components/ComboBoxToggleButton.tsx
@@ -9,7 +9,7 @@ import { Icon } from "../../Icon/index"
 import { useComboBoxContext } from "../context"
 import useComboBoxStyles from "../styles"
 
-const ComboBoxToggleButton: React.FC = () => {
+export const ComboBoxToggleButton: React.FC = () => {
   const {
     derivedProps: { error: hasError, loading: isLoading },
     state: { isOpen },
@@ -27,5 +27,3 @@ const ComboBoxToggleButton: React.FC = () => {
     </>
   )
 }
-
-export default ComboBoxToggleButton
diff --git a/packages/ui-components/src/components/ComboBox/components/index.ts b/packages/ui-components/src/components/ComboBox/components/index.ts
@@ -3,12 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { default as ComboBoxInput } from "./ComboBoxInput"
-export { default as ComboBoxLabel } from "./ComboBoxLabel"
-export { default as ComboBoxStatusIcon } from "./ComboBoxStatusIcon"
-export { default as ComboBoxStatusMessage } from "./ComboBoxStatusMessage"
-export { default as ComboBoxToggleButton } from "./ComboBoxToggleButton"
-export { default as ComboBoxFloatingMenu } from "./ComboBoxFloatingMenu"
-export { default as ComboBoxContent } from "./ComboBoxContent"
-export { default as ComboBoxOuterWrapper } from "./ComboBoxOuterWrapper"
-export { default as ComboBoxInputWrapper } from "./ComboBoxInputWrapper"
+export { ComboBoxInput } from "./ComboBoxInput"
+export { ComboBoxLabel } from "./ComboBoxLabel"
+export { ComboBoxStatusIcon } from "./ComboBoxStatusIcon"
+export { ComboBoxStatusMessage } from "./ComboBoxStatusMessage"
+export { ComboBoxToggleButton } from "./ComboBoxToggleButton"
+export { ComboBoxFloatingMenu } from "./ComboBoxFloatingMenu"
+export { ComboBoxContent } from "./ComboBoxContent"
+export { ComboBoxOuterWrapper } from "./ComboBoxOuterWrapper"
+export { ComboBoxInputWrapper } from "./ComboBoxInputWrapper"
diff --git a/packages/ui-components/src/components/ComboBox/context/ComboBoxContext.tsx b/packages/ui-components/src/components/ComboBox/context/ComboBoxContext.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { useContext, createContext, useMemo } from "react"
+import { useContext, createContext } from "react"
 import {
   ComboBoxFilteredOptions,
   ComboBoxFloating,
@@ -68,20 +68,17 @@ export const useComboBoxContextValue = (
   mappedOptions: ComboBoxMappedOptions,
   filteredOptions: ComboBoxFilteredOptions
 ): ComboBoxContextValue => {
-  const contextValue = useMemo(
-    () => ({
-      inputElementId,
-      helpTextId,
-      derivedProps,
-      restProps,
-      state,
-      floating,
-      validation,
-      mappedOptions,
-      filteredOptions,
-    }),
-    [inputElementId, helpTextId, derivedProps, restProps, state, floating, validation, mappedOptions, filteredOptions]
-  )
+  const contextValue = {
+    inputElementId,
+    helpTextId,
+    derivedProps,
+    restProps,
+    state,
+    floating,
+    validation,
+    mappedOptions,
+    filteredOptions,
+  }
 
   return contextValue
 }
diff --git a/packages/ui-components/src/components/ComboBox/hooks/index.ts b/packages/ui-components/src/components/ComboBox/hooks/index.ts
@@ -4,15 +4,15 @@
  */
 
 export {
-  default as useComboBoxOptionMapping,
+  useComboBoxOptionMapping,
   type OptionValuesAndLabelsKey,
   type OptionValuesAndLabelsValue,
 } from "./useComboBoxOptionMapping"
 
-export { default as useComboBoxFloating } from "./useComboBoxFloating"
+export { useComboBoxFloating } from "./useComboBoxFloating"
 
-export { default as useComboBoxOptionFiltering } from "./useComboBoxOptionFiltering"
+export { useComboBoxOptionFiltering } from "./useComboBoxOptionFiltering"
 
-export { default as useComboBoxState } from "./useComboBoxState"
+export { useComboBoxState } from "./useComboBoxState"
 
-export { default as useComboBoxValidation } from "./useComboBoxValidation"
+export { useComboBoxValidation } from "./useComboBoxValidation"
diff --git a/packages/ui-components/src/components/ComboBox/hooks/useComboBoxFloating.ts b/packages/ui-components/src/components/ComboBox/hooks/useComboBoxFloating.ts
@@ -26,7 +26,7 @@ import { ComboBoxFloating } from "../types"
  * @param setIsOpen - Describes the state setter function's purpose
  * @returns - Details what the returned object contains (positioning, refs, prop getters)
  */
-function useComboBoxFloating(
+export function useComboBoxFloating(
   isOpen: boolean,
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
 ): ComboBoxFloating {
@@ -58,5 +58,3 @@ function useComboBoxFloating(
 
   return { x, y, strategy, refs, getReferenceProps, getFloatingProps }
 }
-
-export default useComboBoxFloating
diff --git a/packages/ui-components/src/components/ComboBox/hooks/useComboBoxOptionFiltering.ts b/packages/ui-components/src/components/ComboBox/hooks/useComboBoxOptionFiltering.ts
@@ -26,7 +26,7 @@ interface OptimizedOptionData {
  * @param debounceDelay - Delay in milliseconds for debouncing the search query
  * @returns Object containing filtered children that match the search query
  */
-function useComboBoxOptionFiltering(
+export function useComboBoxOptionFiltering(
   children: ReactNode,
   query: string,
   debounceDelay: number
@@ -84,5 +84,3 @@ function useComboBoxOptionFiltering(
 
   return filteredChildren
 }
-
-export default useComboBoxOptionFiltering
diff --git a/packages/ui-components/src/components/ComboBox/hooks/useComboBoxOptionMapping.ts b/packages/ui-components/src/components/ComboBox/hooks/useComboBoxOptionMapping.ts
@@ -25,7 +25,7 @@ export type OptionValuesAndLabelsValue = {
  * @param children - Specifies it expects React children with ComboBoxOption components
  * @returns - Explains the returned Map structure and its purpose for lookups
  */
-function useComboBoxOptionMapping(children: ReactNode): ComboBoxMappedOptions {
+export function useComboBoxOptionMapping(children: ReactNode): ComboBoxMappedOptions {
   const [optionValuesAndLabels, setOptionValuesAndLabels] = useState(
     new Map<OptionValuesAndLabelsKey, OptionValuesAndLabelsValue>()
   )
@@ -62,5 +62,3 @@ function useComboBoxOptionMapping(children: ReactNode): ComboBoxMappedOptions {
 
   return optionValuesAndLabels
 }
-
-export default useComboBoxOptionMapping
diff --git a/packages/ui-components/src/components/ComboBox/hooks/useComboBoxState.ts b/packages/ui-components/src/components/ComboBox/hooks/useComboBoxState.ts
@@ -22,7 +22,7 @@ import { ComboBoxState } from "../types"
  * - hasFocus: Boolean indicating if the combobox has focus
  * - setFocus: Function to update focus state
  */
-function useComboBoxState(initialValue: string): ComboBoxState {
+export function useComboBoxState(initialValue: string): ComboBoxState {
   const [isOpen, setIsOpen] = useState(false)
   const [query, setQuery] = useState("")
   const [selectedValue, setSelectedValue] = useState(initialValue)
@@ -39,5 +39,3 @@ function useComboBoxState(initialValue: string): ComboBoxState {
     setFocus,
   }
 }
-
-export default useComboBoxState
diff --git a/packages/ui-components/src/components/ComboBox/hooks/useComboBoxValidation.ts b/packages/ui-components/src/components/ComboBox/hooks/useComboBoxValidation.ts

Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ import useComboBoxStyles from "../styles"`
`10`	`10`	`interface ComboBoxInputWrapperProps {`
`11`	`11`	`children: ReactNode`
`12`	`12`	`}`
`13`		`-const ComboBoxInputWrapper: React.FC<ComboBoxInputWrapperProps> = ({ children }) => {`
	`13`	`+export const ComboBoxInputWrapper: React.FC<ComboBoxInputWrapperProps> = ({ children }) => {`
`14`	`14`	`const { inputWrapperStyles } = useComboBoxStyles()`
`15`	`15`
`16`	`16`	`const {`
`@@ -23,5 +23,3 @@ const ComboBoxInputWrapper: React.FC<ComboBoxInputWrapperProps> = ({ children })`
`23`	`23`	`</div>`
`24`	`24`	`)`
`25`	`25`	`}`
`26`		`-`
`27`		`-export default ComboBoxInputWrapper`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ import { useComboBoxContext } from "../context"`
`9`	`9`	`import { isNotEmptyString } from "../../../utils"`
`10`	`10`	`import useComboBoxStyles from "../styles"`
`11`	`11`
`12`		`-const ComboBoxLabel: React.FC = () => {`
	`12`	`+export const ComboBoxLabel: React.FC = () => {`
`13`	`13`	`const {`
`14`	`14`	`inputElementId,`
`15`	`15`	`derivedProps: { label, placeholder, loading: isLoading, error: hasError, required, disabled },`
`@@ -45,5 +45,3 @@ const ComboBoxLabel: React.FC = () => {`
`45`	`45`	`</>`
`46`	`46`	`)`
`47`	`47`	`}`
`48`		`-`
`49`		`-export default ComboBoxLabel`
Original file line number	Diff line number	Diff line change
`@@ -9,10 +9,8 @@ import useComboBoxStyles from "../styles"`
`9`	`9`	`interface ComboBoxOuterWrapperProps {`
`10`	`10`	`children: ReactNode`
`11`	`11`	`}`
`12`		`-const ComboBoxOuterWrapper: React.FC<ComboBoxOuterWrapperProps> = ({ children }) => {`
	`12`	`+export const ComboBoxOuterWrapper: React.FC<ComboBoxOuterWrapperProps> = ({ children }) => {`
`13`	`13`	`const { outerWrapperStyles } = useComboBoxStyles()`
`14`	`14`
`15`	`15`	`return <div className={outerWrapperStyles}>{children}</div>`
`16`	`16`	`}`
`17`		`-`
`18`		`-export default ComboBoxOuterWrapper`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@ import { FormHint } from "../../FormHint/index"`
`8`	`8`	`import { isNotEmptyString } from "../../../utils"`
`9`	`9`	`import { useComboBoxContext } from "../context"`
`10`	`10`
`11`		`-const ComboBoxStatusMessage: React.FC = () => {`
	`11`	`+export const ComboBoxStatusMessage: React.FC = () => {`
`12`	`12`	`const {`
`13`	`13`	`helpTextId,`
`14`	`14`	`derivedProps: { helptext, successtext, errortext },`
`@@ -22,5 +22,3 @@ const ComboBoxStatusMessage: React.FC = () => {`
`22`	`22`	`</>`
`23`	`23`	`)`
`24`	`24`	`}`
`25`		`-`
`26`		`-export default ComboBoxStatusMessage`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ import { Icon } from "../../Icon/index"`
`9`	`9`	`import { useComboBoxContext } from "../context"`
`10`	`10`	`import useComboBoxStyles from "../styles"`
`11`	`11`
`12`		`-const ComboBoxToggleButton: React.FC = () => {`
	`12`	`+export const ComboBoxToggleButton: React.FC = () => {`
`13`	`13`	`const {`
`14`	`14`	`derivedProps: { error: hasError, loading: isLoading },`
`15`	`15`	`state: { isOpen },`
`@@ -27,5 +27,3 @@ const ComboBoxToggleButton: React.FC = () => {`
`27`	`27`	`</>`
`28`	`28`	`)`
`29`	`29`	`}`
`30`		`-`
`31`		`-export default ComboBoxToggleButton`