chore: update LemonUI types (#17755)

PostHog · Oct 25, 2023 · 8b8cedf · 8b8cedf
1 parent 886c804
commit 8b8cedf
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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') {