From 8b8cedf0524aa61de37a17074da869f0f4bbb31c Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Wed, 25 Oct 2023 17:08:29 +0100
Subject: [PATCH] chore: update LemonUI types (#17755)

---
 .../src/lib/lemon-ui/LemonMenu/LemonMenu.tsx  |  4 ++--
 .../lib/lemon-ui/LemonSelect/LemonSelect.tsx  |  2 +-
 .../src/lib/lemon-ui/LemonTable/TableRow.tsx  |  4 +++-
 frontend/src/lib/lemon-ui/hooks.ts            |  2 +-
 .../scenes/persons/RelatedFeatureFlags.tsx    | 19 +++++++++++--------
 5 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
index 44e0a952e9646..c00145d40f449 100644
--- a/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
+++ b/frontend/src/lib/lemon-ui/LemonMenu/LemonMenu.tsx
@@ -98,7 +98,7 @@ export function LemonMenu({
     )
 
     const _onVisibilityChange = useCallback(
-        (visible) => {
+        (visible: boolean) => {
             onVisibilityChange?.(visible)
             if (visible && activeItemIndex && activeItemIndex > -1) {
                 // Scroll the active item into view once the menu is open (i.e. in the next tick)
@@ -256,7 +256,7 @@ const LemonMenuItemButton: FunctionComponent<LemonMenuItemButtonProps & React.Re
                     size={size}
                     {...buttonProps}
                 >
-                    {label}
+                    {label as string | JSX.Element}
                     {keyboardShortcut && (
                         <div className="-mr-0.5 inline-flex grow justify-end">
                             {/* Show the keyboard shortcut on the right */}
diff --git a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
index 8b5c6ab2cdf70..5686b6af19412 100644
--- a/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
+++ b/frontend/src/lib/lemon-ui/LemonSelect/LemonSelect.tsx
@@ -93,7 +93,7 @@ export interface LemonSelectPropsNonClearable<T> extends LemonSelectPropsBase<T>
 
 export type LemonSelectProps<T> = LemonSelectPropsClearable<T> | LemonSelectPropsNonClearable<T>
 
-export function LemonSelect<T>({
+export function LemonSelect<T extends string | number | boolean | null>({
     value = null,
     onChange,
     onSelect,
diff --git a/frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx b/frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx
index e67c574711ec9..6071cc7b08183 100644
--- a/frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx
+++ b/frontend/src/lib/lemon-ui/LemonTable/TableRow.tsx
@@ -132,6 +132,8 @@ function TableRowRaw<T extends Record<string, any>>({
 // of a class indicating that scrollability to `table` caused the component to lag due to unneded rerendering of rows.
 export const TableRow = React.memo(TableRowRaw) as typeof TableRowRaw
 
-function isTableCellRepresentation(contents: React.ReactNode): contents is TableCellRepresentation {
+function isTableCellRepresentation(
+    contents: React.ReactNode | TableCellRepresentation
+): contents is TableCellRepresentation {
     return !!contents && typeof contents === 'object' && !React.isValidElement(contents)
 }
diff --git a/frontend/src/lib/lemon-ui/hooks.ts b/frontend/src/lib/lemon-ui/hooks.ts
index ba4afca720d23..32625c2d499bd 100644
--- a/frontend/src/lib/lemon-ui/hooks.ts
+++ b/frontend/src/lib/lemon-ui/hooks.ts
@@ -6,7 +6,7 @@ import { useLayoutEffect, useRef, useState } from 'react'
  * @private
  */
 export function useSliderPositioning<C extends HTMLElement, S extends HTMLElement>(
-    currentValue: string | number | null | undefined,
+    currentValue: React.Key | null | undefined,
     transitionMs: number
 ): {
     containerRef: React.RefObject<C>
diff --git a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx b/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
index 08a3d1e23dc6f..ffef288d633f5 100644
--- a/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
+++ b/frontend/src/scenes/persons/RelatedFeatureFlags.tsx
@@ -117,6 +117,16 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
             },
         },
     ]
+
+    const options = [
+        { label: 'All types', value: 'all' },
+        {
+            label: FeatureFlagReleaseType.ReleaseToggle,
+            value: FeatureFlagReleaseType.ReleaseToggle,
+        },
+        { label: FeatureFlagReleaseType.Variants, value: FeatureFlagReleaseType.Variants },
+    ]
+
     return (
         <>
             <div className="flex justify-between mb-4">
@@ -131,14 +141,7 @@ export function RelatedFeatureFlags({ distinctId, groups }: Props): JSX.Element
                         <b>Type</b>
                     </span>
                     <LemonSelect
-                        options={[
-                            { label: 'All types', value: 'all' },
-                            {
-                                label: FeatureFlagReleaseType.ReleaseToggle,
-                                value: FeatureFlagReleaseType.ReleaseToggle,
-                            },
-                            { label: FeatureFlagReleaseType.Variants, value: FeatureFlagReleaseType.Variants },
-                        ]}
+                        options={options}
                         onChange={(type) => {
                             if (type) {
                                 if (type === 'all') {