diff --git a/pkg/lib/cockpit-components-checkbox-select.tsx b/pkg/lib/cockpit-components-checkbox-select.tsx index 20c3b13fd13a..39b66248e7ba 100644 --- a/pkg/lib/cockpit-components-checkbox-select.tsx +++ b/pkg/lib/cockpit-components-checkbox-select.tsx @@ -64,22 +64,22 @@ import { SelectProps } from '@patternfly/react-core'; -export interface CheckboxSelectOption extends Omit { +export interface CheckboxSelectOption extends Omit { /** Content of the select option. */ content: React.ReactNode; /** Value of the select option. */ - value: unknown; + value: T; } -export interface CheckboxSelectProps extends Omit { +export interface CheckboxSelectProps extends Omit { /** @hide Forwarded ref */ innerRef?: React.Ref; /** Options of the select. */ - options?: CheckboxSelectOption[]; + options?: CheckboxSelectOption[]; /** Currently checked options */ - selected: unknown[]; + selected: T[]; /** Callback triggered when checking or unchecking an option. */ - onSelect: (value: unknown, checked: boolean) => void; + onSelect: (value: T, checked: boolean) => void; /** Callback triggered when the select opens or closes. */ onToggle?: (nextIsOpen: boolean) => void; /** Flag indicating the select should be disabled. */ @@ -94,7 +94,7 @@ export interface CheckboxSelectProps extends Omit = ({ +export function CheckboxSelect({ innerRef, options, selected, @@ -106,7 +106,7 @@ const CheckboxSelectBase: React.FunctionComponent = ({ toggleProps, noBadge = false, ...props -}: CheckboxSelectProps) => { +}: CheckboxSelectProps) { const [isOpen, setIsOpen] = React.useState(false); const checkboxSelectOptions = options?.map((option) => { @@ -126,8 +126,10 @@ const CheckboxSelectBase: React.FunctionComponent = ({ }; const _onSelect = (event: React.MouseEvent | undefined, value: string | number | undefined) => { - if (value && event) - onSelect(value, (event.target as HTMLInputElement).checked); + if (value && event) { + // https://github.com/patternfly/patternfly-react/issues/11361 + onSelect(value as T, (event.target as HTMLInputElement).checked); + } }; const toggle = (toggleRef: React.Ref) => ( @@ -169,7 +171,3 @@ const CheckboxSelectBase: React.FunctionComponent = ({ ); }; - -export const CheckboxSelect = React.forwardRef((props: CheckboxSelectProps, ref: React.Ref) => ( - -)); diff --git a/pkg/lib/cockpit-components-simple-select.tsx b/pkg/lib/cockpit-components-simple-select.tsx index e471683ce227..b18acaf24cec 100644 --- a/pkg/lib/cockpit-components-simple-select.tsx +++ b/pkg/lib/cockpit-components-simple-select.tsx @@ -69,27 +69,27 @@ export interface SimpleSelectDividerOption { key: string | number; }; -export interface SimpleSelectMenuOption extends Omit { +export interface SimpleSelectMenuOption extends Omit { decorator?: undefined; /** Content of the select option. */ content: React.ReactNode; /** Value of the select option. */ - value: unknown; + value: T; } -export type SimpleSelectOption = SimpleSelectMenuOption | - SimpleSelectDividerOption; +export type SimpleSelectOption = SimpleSelectMenuOption | + SimpleSelectDividerOption; -export interface SimpleSelectProps extends Omit { +export interface SimpleSelectProps extends Omit { /** @hide Forwarded ref */ innerRef?: React.Ref; /** Initial options of the select. */ - options: SimpleSelectOption[]; + options: SimpleSelectOption[]; /** Selected option */ selected: unknown; /** Callback triggered on selection. */ - onSelect: (selection: unknown) => void; + onSelect: (selection: T) => void; /** Callback triggered when the select opens or closes. */ onToggle?: (nextIsOpen: boolean) => void; /** Flag indicating the select should be disabled. */ @@ -104,7 +104,7 @@ export interface SimpleSelectProps extends Omit = ({ +export function SimpleSelect({ innerRef, options, selected, @@ -116,10 +116,10 @@ const SimpleSelectBase: React.FunctionComponent = ({ toggleProps, placeholder = '', ...props -}: SimpleSelectProps) => { +}: SimpleSelectProps) { const [isOpen, setIsOpen] = React.useState(false); - const simpleSelectOptions = options.map((option, index) => { + const simpleSelectOptions = options.map(option => { if (option.decorator == "divider") return ; const { content, value, key, ...props } = option; @@ -135,9 +135,11 @@ const SimpleSelectBase: React.FunctionComponent = ({ setIsOpen(!isOpen); }; - const _onSelect = (_event: React.MouseEvent | undefined, value: unknown) => { - if (value) - onSelect(value); + const _onSelect = (_event: React.MouseEvent | undefined, value: string | number | undefined) => { + if (value) { + // https://github.com/patternfly/patternfly-react/issues/11361 + onSelect(value as T); + } onToggle && onToggle(true); setIsOpen(false); }; @@ -146,7 +148,7 @@ const SimpleSelectBase: React.FunctionComponent = ({ if (toggleContent) content = toggleContent; else if (selected) - content = options.find((o): o is SimpleSelectMenuOption => !o.decorator && o.value == selected)?.content; + content = options.find((o): o is SimpleSelectMenuOption => !o.decorator && o.value == selected)?.content; const toggle = (toggleRef: React.Ref) => ( = ({ ); }; -export const SimpleSelect = React.forwardRef((props: SimpleSelectProps, ref: React.Ref) => ( - -)); - SimpleSelect.displayName = 'SimpleSelect';