diff --git a/examples/controls_example/public/react_controls/data_controls/data_control_editor.tsx b/examples/controls_example/public/react_controls/data_controls/data_control_editor.tsx index 9f0db921b0778..c35462b66ecb2 100644 --- a/examples/controls_example/public/react_controls/data_controls/data_control_editor.tsx +++ b/examples/controls_example/public/react_controls/data_controls/data_control_editor.tsx @@ -30,7 +30,15 @@ import { EuiTitle, EuiToolTip, } from '@elastic/eui'; +import { + ControlWidth, + DEFAULT_CONTROL_GROW, + DEFAULT_CONTROL_WIDTH, +} from '@kbn/controls-plugin/common'; +import { CONTROL_WIDTH_OPTIONS } from '@kbn/controls-plugin/public'; +import { DataControlFieldRegistry } from '@kbn/controls-plugin/public/types'; import { DataViewField } from '@kbn/data-views-plugin/common'; +import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public'; import { useBatchedPublishingSubjects } from '@kbn/presentation-publishing'; import { LazyDataViewPicker, @@ -38,13 +46,6 @@ import { withSuspense, } from '@kbn/presentation-util-plugin/public'; -import { - ControlWidth, - DEFAULT_CONTROL_GROW, - DEFAULT_CONTROL_WIDTH, -} from '@kbn/controls-plugin/common'; -import { CONTROL_WIDTH_OPTIONS } from '@kbn/controls-plugin/public'; -import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public'; import { getAllControlTypes, getControlFactory } from '../control_factory_registry'; import { ControlGroupApi } from '../control_group/types'; import { ControlStateManager } from '../types'; @@ -69,6 +70,65 @@ export interface ControlEditorProps< const FieldPicker = withSuspense(LazyFieldPicker, null); const DataViewPicker = withSuspense(LazyDataViewPicker, null); +const CompatibleControlTypesComponent = ({ + fieldRegistry, + selectedFieldName, + selectedControlType, + setSelectedControlType, +}: { + fieldRegistry?: DataControlFieldRegistry; + selectedFieldName: string; + selectedControlType?: string; + setSelectedControlType: (type: string) => void; +}) => { + const dataControlFactories = useMemo(() => { + return getAllControlTypes() + .map((type) => getControlFactory(type)) + .filter((factory) => { + return isDataControlFactory(factory); + }); + }, []); + + return ( + + {dataControlFactories.map((factory) => { + const disabled = + fieldRegistry && selectedFieldName + ? !fieldRegistry[selectedFieldName]?.compatibleControlTypes.includes(factory.type) + : true; + const keyPadMenuItem = ( + setSelectedControlType(factory.type)} + label={factory.getDisplayName()} + > + + + ); + + return disabled ? ( + + {keyPadMenuItem} + + ) : ( + keyPadMenuItem + ); + })} + + ); +}; + export const DataControlEditor = ({ controlId, controlType, @@ -139,57 +199,6 @@ export const DataControlEditor = ({ ); }, [selectedFieldName, setControlEditorValid, selectedDataView, selectedControlType]); - const dataControlFactories = useMemo(() => { - return getAllControlTypes() - .map((type) => getControlFactory(type)) - .filter((factory) => { - return isDataControlFactory(factory); - }); - }, []); - - const CompatibleControlTypesComponent = useMemo(() => { - return ( - - {dataControlFactories.map((factory) => { - const disabled = - fieldRegistry && selectedFieldName - ? !fieldRegistry[selectedFieldName]?.compatibleControlTypes.includes(factory.type) - : true; - const keyPadMenuItem = ( - setSelectedControlType(factory.type)} - label={factory.getDisplayName()} - > - - - ); - - return disabled ? ( - - {keyPadMenuItem} - - ) : ( - keyPadMenuItem - ); - })} - - ); - }, [selectedFieldName, fieldRegistry, selectedControlType, controlType, dataControlFactories]); - const CustomSettingsComponent = useMemo(() => { if (!selectedControlType || !selectedFieldName || !fieldRegistry) return; @@ -254,6 +263,7 @@ export const DataControlEditor = ({ selectedDataViewId={selectedDataViewId} onChangeDataViewId={(newDataViewId) => { stateManager.dataViewId.next(newDataViewId); + setSelectedControlType(undefined); }} trigger={{ label: @@ -300,7 +310,15 @@ export const DataControlEditor = ({ - {CompatibleControlTypesComponent} + {/* wrapping in `div` so that focus gets passed properly to the form row */} +
+ +