@opentrons/components 0.1.5 → 0.1.6-alpha.2

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@opentrons/components",
-  "version": "0.1.5",
+  "version": "0.1.6-alpha.2",
   "description": "React components library for Opentrons' projects",
   "source": "src/index.ts",
   "types": "lib/index.d.ts",
-  "style": "src/index.css",
+  "style": "src/index.module.css",
   "main": "lib/opentrons-components.js",
   "module": "src/index.ts",
   "repository": {
@@ -24,7 +24,7 @@
     "@types/react-router-dom": "5.3.3"
   },
   "dependencies": {
-    "@opentrons/shared-data": "0.1.5",
+    "@opentrons/shared-data": "0.1.6-alpha.2",
     "@popperjs/core": "2.1.1",
     "@react-spring/types": "9.6.1",
     "@react-spring/web": "9.6.1",
@@ -38,9 +38,10 @@
     "react-popper": "1.0.0",
     "react-remove-scroll": "2.4.3",
     "react-select": "5.4.0",
+    "redux": "4.0.5",
     "styled-components": "5.3.6"
   },
-  "browser": {
-    "jest-when": false
+  "devDependencies": {
+    "react-redux": "8.1.2"
   }
 }

package/tsconfig.json

@@ -8,8 +8,8 @@
   "compilerOptions": {
     "composite": true,
     "rootDir": "src",
-    "outDir": "lib"
+    "outDir": "lib",
   },
   "include": ["typings", "src"],
   "exclude": ["**/*.stories.tsx"]
-}
+}

package/typings/global.d.ts

@@ -1,2 +1 @@
-import 'jest-styled-components'
 import 'styled-components/cssprop'

package/vite.config.ts

@@ -0,0 +1,57 @@
+import path from 'path'
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import postCssImport from 'postcss-import'
+import postCssApply from 'postcss-apply'
+import postColorModFunction from 'postcss-color-mod-function'
+import postCssPresetEnv from 'postcss-preset-env'
+import lostCss from 'lost'
+
+export default defineConfig({
+  build: {
+    // Relative to the root
+    ssr: 'src/index.ts',
+    outDir: 'lib',
+    commonjsOptions: {
+      transformMixedEsModules: true,
+      esmExternals: true,
+    },
+  },
+  plugins: [
+    react({
+      include: '**/*.tsx',
+      babel: {
+        // Use babel.config.js files
+        configFile: true,
+      },
+    }),
+  ],
+  optimizeDeps: {
+    esbuildOptions: {
+      target: 'es2020',
+    },
+  },
+  css: {
+    postcss: {
+      plugins: [
+        postCssImport({ root: 'src/' }),
+        postCssApply(),
+        postColorModFunction(),
+        postCssPresetEnv({ stage: 0 }),
+        lostCss(),
+      ],
+    },
+  },
+  define: {
+    'process.env': process.env,
+    global: 'globalThis',
+  },
+  resolve: {
+    alias: {
+      '@opentrons/shared-data': path.resolve('../shared-data/js/index.ts'),
+      '@opentrons/components/styles': path.resolve(
+        '../components/src/index.module.css'
+      ),
+    },
+  },
+})

package/lib/__tests__/utils.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/alerts/AlertItem.d.ts

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import type { IconProps } from '../icons';
-export type AlertType = 'success' | 'warning' | 'error' | 'info';
-export interface AlertItemProps {
-    /** name constant of the icon to display */
-    type: AlertType;
-    /** title/main message of colored alert bar */
-    title: React.ReactNode;
-    /** Alert message body contents */
-    children?: React.ReactNode;
-    /** Additional class name */
-    className?: string;
-    /** optional handler to show close button/clear alert  */
-    onCloseClick?: () => unknown;
-    /** Override the default Alert Icon */
-    icon?: IconProps;
-}
-/**
- * @deprecated Use 'Banner' instead
- */
-export declare function AlertItem(props: AlertItemProps): JSX.Element;

package/lib/alerts/index.d.ts

@@ -1 +0,0 @@
-export * from './AlertItem';

package/lib/atoms/CheckboxField/__tests__/CheckboxField.test.d.ts

@@ -1 +0,0 @@
-import 'jest-styled-components';

package/lib/atoms/CheckboxField/index.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-export interface CheckboxFieldProps {
-    /** change handler */
-    onChange: React.ChangeEventHandler;
-    /** checkbox is checked if value is true */
-    value?: boolean;
-    /** name of field in form */
-    name?: string;
-    /** label text for checkbox */
-    label?: React.ReactNode;
-    /** checkbox is disabled if value is true */
-    disabled?: boolean;
-    /** html tabindex property */
-    tabIndex?: number;
-    /** props passed into label div. TODO IMMEDIATELY what is the Flow type? */
-    labelProps?: React.ComponentProps<'div'>;
-    /** if true, render indeterminate icon */
-    isIndeterminate?: boolean;
-}
-export declare function CheckboxField(props: CheckboxFieldProps): JSX.Element;

package/lib/atoms/StepMeter/index.d.ts

@@ -1,6 +0,0 @@
-interface StepMeterProps {
-    totalSteps: number;
-    currentStep: number | null;
-}
-export declare const StepMeter: (props: StepMeterProps) => JSX.Element;
-export {};

package/lib/atoms/buttons/AlertPrimaryButton.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const AlertPrimaryButton: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof JSX.IntrinsicElements, any, import("../../primitives").StyleProps, any>;

package/lib/atoms/buttons/PrimaryButton.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const PrimaryButton: import("styled-components").StyledComponent<import("react").ComponentType<any> | keyof JSX.IntrinsicElements, any, import("../../primitives").StyleProps, any>;

package/lib/atoms/buttons/SecondaryButton.d.ts

@@ -1,7 +0,0 @@
-import type { StyleProps } from '../../index';
-interface SecondaryButtonProps extends StyleProps {
-    /** button action is dangerous and may have non-reversible side-effects for user */
-    isDangerous?: boolean;
-}
-export declare const SecondaryButton: import("styled-components").StyledComponent<"button", any, SecondaryButtonProps, never>;
-export {};

package/lib/atoms/buttons/__tests__/AlertPrimaryButton.test.d.ts

@@ -1 +0,0 @@
-import 'jest-styled-components';

package/lib/atoms/buttons/__tests__/PrimaryButton.test.d.ts

@@ -1 +0,0 @@
-import 'jest-styled-components';

package/lib/atoms/buttons/__tests__/SecondaryButton.test.d.ts

@@ -1 +0,0 @@
-import 'jest-styled-components';

package/lib/atoms/buttons/index.d.ts

@@ -1,3 +0,0 @@
-export * from './AlertPrimaryButton';
-export * from './PrimaryButton';
-export * from './SecondaryButton';

package/lib/atoms/index.d.ts

@@ -1,3 +0,0 @@
-export * from './CheckboxField';
-export * from './StepMeter';
-export * from './buttons';

package/lib/barrel.d.ts

@@ -1,3 +0,0 @@
-export * from './hardware-sim';
-export * from './primitives';
-export * from './ui-style-constants';

package/lib/buttons/Button.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { BUTTON_TYPE_SUBMIT, BUTTON_TYPE_RESET, BUTTON_TYPE_BUTTON } from '../primitives';
-import type { IconName } from '../icons';
-import type { UseHoverTooltipTargetProps } from '../tooltips';
-export interface ButtonProps {
-    /** id attribute */
-    id?: string;
-    /** click handler */
-    onClick?: React.MouseEventHandler;
-    /** name attribute */
-    name?: string;
-    /** title attribute */
-    title?: string;
-    /** disabled attribute (setting disabled removes onClick) */
-    disabled?: boolean | null | undefined;
-    /** use hover style even when not hovered */
-    hover?: boolean | null | undefined;
-    /** optional Icon name */
-    iconName?: IconName;
-    /** classes to apply */
-    className?: string;
-    /** inverts the default color/background/border of default button style */
-    inverted?: boolean;
-    /** contents of the button */
-    children?: React.ReactNode;
-    /** type of button (default "button") */
-    type?: typeof BUTTON_TYPE_SUBMIT | typeof BUTTON_TYPE_RESET | typeof BUTTON_TYPE_BUTTON;
-    /** ID of form that button is for */
-    form?: string;
-    /** custom element or component to use instead of `<button>` */
-    Component?: React.ComponentType<any> | keyof JSX.IntrinsicElements;
-    /** handlers for HoverTooltipComponent */
-    hoverTooltipHandlers?: UseHoverTooltipTargetProps | null | undefined;
-    /** html tabindex property */
-    tabIndex?: number;
-    /** catch all prop for pass-through props */
-    [name: string]: any;
-}
-/**
- * Basic, un-styled button. You probably want to use a styled button
- * instead. All buttons take the same props.
- *
- * If you need access to the ButtonProps type, you can:
- * ```js
- * import {type ButtonProps} from '@opentrons/components'
- * ```
- * @deprecated Use {@link Btn}
- */
-export declare function Button(props: ButtonProps): JSX.Element;

package/lib/buttons/DeprecatedPrimaryButton.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import type { ButtonProps } from './Button';
-/**
- * Primary application button. Fills its container and has a dark
- * background with white text
- *
- * @deprecated Use {@link PrimaryButton}
- */
-export declare function DeprecatedPrimaryButton(props: ButtonProps): JSX.Element;

package/lib/buttons/FlatButton.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import type { ButtonProps } from './Button';
-/**
- * Flat-styled button with a default width of `9rem` and no background fill
- */
-export declare function FlatButton(props: ButtonProps): JSX.Element;

package/lib/buttons/IconButton.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from '../icons';
-import type { ButtonProps } from './Button';
-interface Props extends ButtonProps {
-    name: IconProps['name'];
-    spin?: IconProps['spin'];
-}
-/**
- * FlatButton variant for a button that is a single icon. Takes props of
- * both Button _and_ Icon. Use `name` to specify icon name.
- *
- * @deprecated Use {@link Btn} and {@link Icon}
- */
-export declare function IconButton(props: Props): JSX.Element;
-export {};

package/lib/buttons/OutlineButton.d.ts

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-import type { ButtonProps } from './Button';
-/**
- * Button with no background fill and a dark border.
- * Use inverted prop for buttons on dark backgrounds.
- *
- * @deprecated Use {@link SecondaryBtn}
- */
-export declare function OutlineButton(props: ButtonProps): JSX.Element;

package/lib/buttons/index.d.ts

@@ -1,5 +0,0 @@
-export * from './Button';
-export * from './FlatButton';
-export * from './DeprecatedPrimaryButton';
-export * from './IconButton';
-export * from './OutlineButton';

package/lib/controls/ControlInfo.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface ControlInfoProps {
-    children: React.ReactNode;
-    className?: string;
-}
-export declare function ControlInfo(props: ControlInfoProps): JSX.Element;

package/lib/controls/LabeledButton.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import type { ButtonProps } from '../buttons';
-export interface LabeledButtonProps {
-    label: string;
-    buttonProps: ButtonProps;
-    children: React.ReactNode;
-}
-export declare function LabeledButton(props: LabeledButtonProps): JSX.Element;

package/lib/controls/LabeledCheckbox.d.ts

@@ -1,10 +0,0 @@
-import * as React from 'react';
-export interface LabeledCheckboxProps {
-    label: string;
-    name: string;
-    value: boolean;
-    className?: string;
-    children: React.ReactNode;
-    onChange: React.ChangeEventHandler<HTMLInputElement>;
-}
-export declare function LabeledCheckbox(props: LabeledCheckboxProps): JSX.Element;

package/lib/controls/LabeledControl.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface LabeledControlProps {
-    label: string;
-    control: React.ReactNode;
-    children?: React.ReactNode;
-}
-export declare function LabeledControl(props: LabeledControlProps): JSX.Element;

package/lib/controls/LabeledRadioGroup.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import type { RadioGroupProps } from '../forms';
-export interface LabeledRadioGroupProps extends RadioGroupProps {
-    label: string;
-    children: React.ReactNode;
-    'data-test'?: string;
-}
-export declare function LabeledRadioGroup(props: LabeledRadioGroupProps): JSX.Element;

package/lib/controls/LabeledSelect.d.ts

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import type { DropdownFieldProps } from '../forms';
-export interface LabeledSelectProps extends DropdownFieldProps {
-    label: string;
-    children: React.ReactNode;
-    /** optional data test id for the container */
-    'data-test'?: string;
-}
-export declare function LabeledSelect(props: LabeledSelectProps): JSX.Element;

package/lib/controls/LabeledToggle.d.ts

@@ -1,11 +0,0 @@
-import * as React from 'react';
-export interface LabeledToggleProps {
-    label: string;
-    toggledOn: boolean;
-    disabled?: boolean;
-    children?: React.ReactNode;
-    onClick: () => unknown;
-    /** optional data test id for the container */
-    'data-test'?: string;
-}
-export declare function LabeledToggle(props: LabeledToggleProps): JSX.Element;

package/lib/controls/StackedLabeledControl.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-export interface StackedLabeledControlProps {
-    label: string;
-    control: React.ReactNode;
-    children?: React.ReactNode;
-}
-export declare function StackedLabeledControl(props: StackedLabeledControlProps): JSX.Element;

package/lib/controls/ToggleButton.d.ts

@@ -1,6 +0,0 @@
-/// <reference types="react" />
-import type { ButtonProps } from '../buttons';
-export interface ToggleButtonProps extends ButtonProps {
-    toggledOn: boolean;
-}
-export declare function ToggleButton(props: ToggleButtonProps): JSX.Element;

package/lib/controls/index.d.ts

@@ -1,6 +0,0 @@
-export * from './ToggleButton';
-export * from './LabeledToggle';
-export * from './LabeledButton';
-export * from './LabeledSelect';
-export * from './LabeledCheckbox';
-export * from './LabeledRadioGroup';

package/lib/forms/DeprecatedCheckboxField.d.ts

@@ -1,33 +0,0 @@
-import * as React from 'react';
-/**
- * Checkbox Field Properties.
- */
-export interface DeprecatedCheckboxFieldProps {
-    /** change handler */
-    onChange: React.ChangeEventHandler;
-    /** checkbox is checked if value is true */
-    value?: boolean;
-    /** classes to apply */
-    className?: string;
-    /** classes to apply to inner label text div. Deprecated. use labelProps.className */
-    labelTextClassName?: string | null | undefined;
-    /** name of field in form */
-    name?: string;
-    /** label text for checkbox */
-    label?: string;
-    /** if is included, checkbox will use error style. The content of the string is ignored. */
-    error?: string | null | undefined;
-    /** checkbox is disabled if value is true */
-    disabled?: boolean;
-    /** html tabindex property */
-    tabIndex?: number;
-    /** props passed into label div. TODO IMMEDIATELY what is the Flow type? */
-    labelProps?: React.ComponentProps<'div'>;
-    /** if true, render indeterminate icon */
-    isIndeterminate?: boolean;
-}
-/**
- * Checkbox Form Field
- * @deprecated
- */
-export declare function DeprecatedCheckboxField(props: DeprecatedCheckboxFieldProps): JSX.Element;

package/lib/forms/DropdownField.d.ts

@@ -1,38 +0,0 @@
-import * as React from 'react';
-export interface DropdownOption {
-    name: string;
-    value: string;
-    disabled?: boolean;
-}
-export type Options = DropdownOption[];
-export interface DropdownFieldProps {
-    /** change handler */
-    onChange: React.ChangeEventHandler<HTMLSelectElement>;
-    /** focus handler */
-    onFocus?: React.FocusEventHandler<HTMLSelectElement>;
-    /** blur handler */
-    onBlur?: React.FocusEventHandler<HTMLSelectElement>;
-    /** value that is selected */
-    value?: string | null | undefined;
-    /** optional id for the <select> element */
-    id?: string;
-    /** name of field in form */
-    name?: string;
-    /** Array of {name, value} data */
-    options: Options;
-    /** classes to apply */
-    className?: string;
-    /** optional caption. hidden when `error` is given */
-    caption?: string;
-    /** if included, DropdownField will use error style and display error instead of caption */
-    error?: string | null | undefined;
-    /** dropdown is disabled if value is true */
-    disabled?: boolean;
-    /** html tabindex property */
-    tabIndex?: number;
-    /** automatically focus field on render */
-    autoFocus?: boolean;
-    /** if true, render indeterminate unselectable option */
-    isIndeterminate?: boolean;
-}
-export declare function DropdownField(props: DropdownFieldProps): JSX.Element;

package/lib/forms/FormGroup.d.ts

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import type { HoverTooltipHandlers } from '../tooltips';
-export interface FormGroupProps {
-    /** text label */
-    label?: string;
-    /** form content */
-    children?: React.ReactNode;
-    /** classes to apply */
-    className?: string | null | undefined;
-    /** if is included, FormGroup title will use error style. The content of the string is ignored. */
-    error?: string | null | undefined;
-    /** enable disabled style. Overridden by truthy `error` */
-    disabled?: boolean | null | undefined;
-    /** handlers for HoverTooltipComponent */
-    hoverTooltipHandlers?: HoverTooltipHandlers | null | undefined;
-    /** boolean indicating formGroup used in pipette Settings slideout */
-    isPipetteSettingsSlideout?: boolean;
-}
-export declare function FormGroup(props: FormGroupProps): JSX.Element;

package/lib/forms/InputField.d.ts

@@ -1,51 +0,0 @@
-import * as React from 'react';
-export declare const INPUT_TYPE_TEXT: 'text';
-export declare const INPUT_TYPE_PASSWORD: 'password';
-export interface InputFieldProps {
-    /** field is disabled if value is true */
-    disabled?: boolean;
-    /** change handler */
-    onChange?: React.ChangeEventHandler<HTMLInputElement>;
-    /** classes to apply to outer element */
-    className?: string;
-    /** inline label text. DEPRECATED */
-    label?: string;
-    /** classes to apply to inner label text div */
-    labelTextClassName?: string | null | undefined;
-    /** name of field in form */
-    name?: string;
-    /** optional ID of <input> element */
-    id?: string;
-    /** placeholder text */
-    placeholder?: string;
-    /** optional suffix component, appears to the right of input text */
-    units?: React.ReactNode;
-    /** current value of text in box, defaults to '' */
-    value?: string | null | undefined;
-    /** if included, InputField will use error style and display error instead of caption */
-    error?: string | null | undefined;
-    /** optional caption. hidden when `error` is given */
-    caption?: string | null | undefined;
-    /** appears to the right of the caption. Used for character limits, eg '0/45' */
-    secondaryCaption?: string | null | undefined;
-    /** optional input type (default "text") */
-    type?: typeof INPUT_TYPE_TEXT | typeof INPUT_TYPE_PASSWORD;
-    /** mouse click handler */
-    onClick?: (event: React.MouseEvent<HTMLInputElement>) => unknown;
-    /** focus handler */
-    onFocus?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    /** blur handler */
-    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => unknown;
-    /** makes input field read-only */
-    readOnly?: boolean | undefined;
-    /** html tabindex property */
-    tabIndex?: number;
-    /** automatically focus field on render */
-    autoFocus?: boolean;
-    /** if true, clear out value and add '-' placeholder */
-    isIndeterminate?: boolean;
-}
-/**
- * @deprecated Use `InputField` in App/atoms instead
- */
-export declare function InputField(props: InputFieldProps): JSX.Element;

package/lib/forms/RadioGroup.d.ts

@@ -1,29 +0,0 @@
-import * as React from 'react';
-export interface RadioOption {
-    name: string;
-    value: string;
-    children?: React.ReactNode;
-}
-export interface RadioGroupProps {
-    /** blur handler */
-    onBlur?: React.FocusEventHandler<HTMLInputElement>;
-    /** change handler */
-    onChange: React.ChangeEventHandler;
-    /** value that is checked */
-    value?: string;
-    /** Array of {name, value} data with optional children */
-    options?: RadioOption[];
-    /** Show radio buttons inline instead of stacked */
-    inline?: boolean;
-    /** classes to apply to outer div */
-    className?: string;
-    /** classes to apply to inner label text div */
-    labelTextClassName?: string | null | undefined;
-    /** if is included, RadioGroup will use error style. The content of the string is ignored. */
-    error?: string | null | undefined;
-    /** 'name' attr of input */
-    name?: string;
-    /** optional prop to turn radio field blue when checked */
-    useBlueChecked?: boolean;
-}
-export declare function RadioGroup(props: RadioGroupProps): JSX.Element;

package/lib/forms/Select.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { components as reactSelectComponents } from 'react-select';
-import { POSITION_ABSOLUTE, POSITION_FIXED } from '../styles';
-import type { Props as ReactSelectProps } from 'react-select';
-export { reactSelectComponents };
-export declare const PLACEMENT_AUTO: 'auto';
-export declare const PLACEMENT_BOTTOM: 'bottom';
-export declare const PLACEMENT_TOP: 'top';
-export declare const CONTEXT_MENU: 'menu';
-export declare const CONTEXT_VALUE: 'value';
-export declare const SELECT_CX_PREFIX = "ot_select";
-export type ChangeAction = 'select-option' | 'deselect-option' | 'remove-value' | 'pop-value' | 'set-value' | 'clear' | 'create-option';
-export interface SelectOption {
-    value: string;
-    label?: string;
-    isDisabled?: boolean;
-}
-export interface SelectOptionGroup {
-    options: SelectOption[];
-    label?: string;
-}
-export type SelectOptionOrGroup = SelectOption | SelectOptionGroup;
-export type SelectPlacement = typeof PLACEMENT_AUTO | typeof PLACEMENT_BOTTOM | typeof PLACEMENT_TOP;
-export type SelectPosition = typeof POSITION_ABSOLUTE | typeof POSITION_FIXED;
-export type SelectOptionContext = typeof CONTEXT_MENU | typeof CONTEXT_VALUE;
-export type SelectProps = ReactSelectProps<SelectOption>;
-export declare function Select(props: SelectProps): JSX.Element;

package/lib/forms/SelectField.d.ts

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import type { SelectProps } from './Select';
-import type { ActionMeta } from 'react-select';
-import type { SelectOption } from '.';
-export interface SelectFieldProps {
-    /** optional HTML id for container */
-    id?: SelectProps['id'];
-    /** field name */
-    name: NonNullable<SelectProps['name']>;
-    /** react-Select option, usually label, value */
-    options: NonNullable<SelectProps['options']>;
-    /** currently selected value */
-    value?: string | null;
-    /** disable the select */
-    disabled?: SelectProps['isDisabled'];
-    /** optional placeholder  */
-    placeholder?: SelectProps['placeholder'];
-    /** menuPosition prop to send to react-select */
-    menuPosition?: SelectProps['menuPosition'];
-    /** render function for the option label passed to react-select */
-    formatOptionLabel?: SelectProps['formatOptionLabel'];
-    /** optional className */
-    className?: string;
-    /** optional caption. hidden when `error` is given */
-    caption?: React.ReactNode;
-    /** if included, use error style and display error instead of caption */
-    error?: string | null;
-    /** change handler called with (name, value) */
-    onValueChange?: (name: string, value: string, actionMeta: ActionMeta<SelectOption>) => void;
-    /** blur handler called with (name) */
-    onLoseFocus?: (name: string) => void;
-}
-export declare function SelectField(props: SelectFieldProps): JSX.Element;