diff --git a/pkg/lib/cockpit-components-checkbox-select.tsx b/pkg/lib/cockpit-components-checkbox-select.tsx index 20c3b13fd13a..3bd95f5ae408 100644 --- a/pkg/lib/cockpit-components-checkbox-select.tsx +++ b/pkg/lib/cockpit-components-checkbox-select.tsx @@ -64,22 +64,20 @@ 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 { - /** @hide Forwarded ref */ - innerRef?: React.Ref; +export interface CheckboxSelectProps extends Omit { /** 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,8 +92,7 @@ export interface CheckboxSelectProps extends Omit = ({ - innerRef, +export function CheckboxSelect({ options, selected, isDisabled = false, @@ -106,7 +103,7 @@ const CheckboxSelectBase: React.FunctionComponent = ({ toggleProps, noBadge = false, ...props -}: CheckboxSelectProps) => { +}: CheckboxSelectProps) { const [isOpen, setIsOpen] = React.useState(false); const checkboxSelectOptions = options?.map((option) => { @@ -125,9 +122,10 @@ const CheckboxSelectBase: React.FunctionComponent = ({ setIsOpen(!isOpen); }; - const _onSelect = (event: React.MouseEvent | undefined, value: string | number | undefined) => { - if (value && event) - onSelect(value, (event.target as HTMLInputElement).checked); + const _onSelect = (event: React.MouseEvent | undefined, value: T | undefined) => { + if (value && event) { + onSelect(value, (event.target as HTMLInputElement).checked); + } }; const toggle = (toggleRef: React.Ref) => ( @@ -155,13 +153,13 @@ 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..713840d495ca 100644 --- a/pkg/lib/cockpit-components-simple-select.tsx +++ b/pkg/lib/cockpit-components-simple-select.tsx @@ -69,27 +69,25 @@ 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 { - /** @hide Forwarded ref */ - innerRef?: React.Ref; +export interface SimpleSelectProps extends Omit { /** 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,8 +102,7 @@ export interface SimpleSelectProps extends Omit = ({ - innerRef, +export function SimpleSelect({ options, selected, isDisabled = false, @@ -116,10 +113,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 +132,10 @@ const SimpleSelectBase: React.FunctionComponent = ({ setIsOpen(!isOpen); }; - const _onSelect = (_event: React.MouseEvent | undefined, value: unknown) => { - if (value) + const _onSelect = (_event: React.MouseEvent | undefined, value: T | undefined) => { + if (value) { onSelect(value); + } onToggle && onToggle(true); setIsOpen(false); }; @@ -146,7 +144,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) => ( = ({