# @react-form-builder/components-fast-qr ## Interfaces - [FastQrProps](interfaces/FastQrProps.md) ## Variables - [fastQrComponent](variables/fastQrComponent.md) - [fastQrModel](variables/fastQrModel.md) --- # Interface: FastQrProps The Fast QR component properties. ## Properties ### backgroundColor? > `optional` **backgroundColor**: `string` The background color. *** ### className? > `optional` **className**: `string` The CSS class name. *** ### content > **content**: `string` The QR code content. *** ### errorCorrectionLevel? > `optional` **errorCorrectionLevel**: `number` The error correction coding level. *** ### image? > `optional` **image**: `string` The image, base64 or URL. *** ### imageBackgroundColor? > `optional` **imageBackgroundColor**: `string` The image background color. *** ### imageBackgroundShape? > `optional` **imageBackgroundShape**: `number` The image background shape. *** ### imageGap? > `optional` **imageGap**: `number` Image gap in module units. *** ### imagePositionX? > `optional` **imagePositionX**: `number` The image X position in module units. *** ### imagePositionY? > `optional` **imagePositionY**: `number` The image Y position in module units. *** ### imageSize? > `optional` **imageSize**: `number` Image size in module units. *** ### margin? > `optional` **margin**: `number` The margin. *** ### moduleColor? > `optional` **moduleColor**: `string` The module color. *** ### shape? > `optional` **shape**: `number` The different possible shapes to represent modules. *** ### version? > `optional` **version**: `number` The QR code version. *** ### width? > `optional` **width**: `number` The QR code width. --- # Variable: fastQrComponent > `const` **fastQrComponent**: [`Definer`](../../core/classes/Definer.md)\<[`FastQrProps`](../interfaces/FastQrProps.md)\> = `fastQr` --- # Variable: fastQrModel > `const` **fastQrModel**: [`Model`](../../core/classes/Model.md)\<`any`\> --- # Function: toAddress() > **toAddress**(`components`): [`Address`](../type-aliases/Address.md) Converts the address components to an address object. Original source code from https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform. ## Parameters • **components**: `GeocoderAddressComponent`[] the address components. ## Returns [`Address`](../type-aliases/Address.md) the address object. --- # @react-form-builder/components-google-map ## Interfaces - [GoogleMapProps](interfaces/GoogleMapProps.md) ## Type Aliases - [Address](type-aliases/Address.md) - [MapMarker](type-aliases/MapMarker.md) ## Variables - [googleMapComponent](variables/googleMapComponent.md) - [googleMapModel](variables/googleMapModel.md) ## Functions - [toAddress](functions/toAddress.md) --- # Interface: GoogleMapProps Props for the GoogleMap component. ## Properties ### addMarkerOnSearch > **addMarkerOnSearch**: `boolean` Whether to add a marker on search. *** ### allowChangingMarkers > **allowChangingMarkers**: `boolean` If true, the user can change the markers. *** ### allowMultipleMarkers? > `optional` **allowMultipleMarkers**: `boolean` Whether multiple markers can be added to the map. Defaults to false. *** ### apiKey > **apiKey**: `string` Google Maps API key used to load the map. *** ### className? > `optional` **className**: `string` The CSS class name. *** ### collisionBehavior? > `optional` **collisionBehavior**: `CollisionBehavior` The markers collision behavior. *** ### colorScheme? > `optional` **colorScheme**: `"DARK"` \| `"LIGHT"` \| `"FOLLOW_SYSTEM"` The color scheme to use for the map. *** ### gestureHandling? > `optional` **gestureHandling**: `"none"` \| `"auto"` \| `"cooperative"` \| `"greedy"` This setting controls how the API handles gestures on the map. *** ### label? > `optional` **label**: `string` The label of the component. *** ### language? > `optional` **language**: `string` Use a specific language for the map. Read more about localizing the Map: https://developers.google.com/maps/documentation/javascript/localization. Part of: https://developers.google.com/maps/documentation/javascript/url-params. *** ### latitude > **latitude**: `number` Latitude of the center point on the map. *** ### longitude > **longitude**: `number` Longitude of the center point on the map. *** ### mapControlPosition > **mapControlPosition**: `ControlPosition` The position of the map control. *** ### mapId? > `optional` **mapId**: `string` The map ID is an identifier that's associated with a specific map style or feature. *** ### mapTypeId > **mapTypeId**: `"hybrid"` \| `"roadmap"` \| `"satellite"` \| `"terrain"` The default map type to use. *** ### markerWindowTitle > **markerWindowTitle**: `string` The title for the marker window. *** ### markers? > `optional` **markers**: [`MapMarker`](../type-aliases/MapMarker.md)[] Coordinates of the markers *** ### onMapClick()? > `optional` **onMapClick**: (`event`) => `void` The callback function called when the map is clicked. #### Parameters • **event**: `MapMouseEvent` #### Returns `void` *** ### onMarkerAdd()? > `optional` **onMarkerAdd**: (`marker`) => `void` The callback function called when a marker is added. #### Parameters • **marker**: [`MapMarker`](../type-aliases/MapMarker.md) #### Returns `void` *** ### onMarkerClick()? > `optional` **onMarkerClick**: (`marker`, `element`) => `void` The callback function called when a marker is clicked. #### Parameters • **marker**: `null` \| [`MapMarker`](../type-aliases/MapMarker.md) • **element**: `AdvancedMarkerElement` #### Returns `void` *** ### onMarkerDelete()? > `optional` **onMarkerDelete**: (`marker`) => `void` The callback function called when a marker is deleted. #### Parameters • **marker**: [`MapMarker`](../type-aliases/MapMarker.md) #### Returns `void` *** ### onPlaceSelect()? > `optional` **onPlaceSelect**: (`place`, `address`?) => `void` The callback function called when a place is selected. #### Parameters • **place**: `PlaceResult` the selected place. • **address?**: [`Address`](../type-aliases/Address.md) the address of the selected place. #### Returns `void` *** ### region? > `optional` **region**: `string` Sets the map to a specific region. Read more about localizing the Map: https://developers.google.com/maps/documentation/javascript/localization. Part of: https://developers.google.com/maps/documentation/javascript/url-params. *** ### removeMarkerCaption > **removeMarkerCaption**: `string` The caption for the remove marker button. *** ### searchPlaceholder? > `optional` **searchPlaceholder**: `string` The search input placeholder. *** ### showMapControl > **showMapControl**: `ControlPosition` Whether to show the map control. *** ### zoom > **zoom**: `number` Zoom level of the map. --- # Type Alias: Address > **Address**: `object` Represents an address. ## Type declaration ### address? > `optional` **address**: `string` The first line of the address. ### city? > `optional` **city**: `string` The city of the address. ### country? > `optional` **country**: `string` The country of the address. ### postalCode? > `optional` **postalCode**: `string` The postal code of the address. ### state? > `optional` **state**: `string` The state of the address. --- # Type Alias: MapMarker > **MapMarker**: `object` Represents the marker data on the map. ## Type declaration ### address? > `optional` **address**: [`Address`](Address.md) The address of the location. ### id > **id**: `string` The unique identifier of the marker. ### position > **position**: `google.maps.LatLngLiteral` Latitude and longitude of the geographical location. ### title? > `optional` **title**: `string` The title of the marker. ### zIndex > **zIndex**: `number` The z-index of the marker. --- # Variable: googleMapComponent > `const` **googleMapComponent**: [`Definer`](../../core/classes/Definer.md)\<[`GoogleMapProps`](../interfaces/GoogleMapProps.md)\> = `googleMap` --- # Variable: googleMapModel > `const` **googleMapModel**: [`Model`](../../core/classes/Model.md)\<`any`\> --- # @react-form-builder/components-rich-text ## Interfaces - [RichTextEditorProps](interfaces/RichTextEditorProps.md) ## Variables - [richTextComponent](variables/richTextComponent.md) - [richTextModel](variables/richTextModel.md) --- # Interface: RichTextEditorProps The Rich text editor component properties. ## Extends - `ReactQuillProps` ## Properties ### bounds? > `optional` **bounds**: `string` \| `HTMLElement` #### Inherited from `ReactQuill.ReactQuillProps.bounds` *** ### children? > `optional` **children**: `ReactElement`\<`any`, `string` \| `JSXElementConstructor`\<`any`\>\> #### Inherited from `ReactQuill.ReactQuillProps.children` *** ### className? > `optional` **className**: `string` The CSS class name. #### Overrides `ReactQuill.ReactQuillProps.className` *** ### defaultValue? > `optional` **defaultValue**: `Value` #### Inherited from `ReactQuill.ReactQuillProps.defaultValue` *** ### formats? > `optional` **formats**: `string`[] #### Inherited from `ReactQuill.ReactQuillProps.formats` *** ### id? > `optional` **id**: `string` #### Inherited from `ReactQuill.ReactQuillProps.id` *** ### initialValue? > `optional` **initialValue**: `string` The initial value for the editor. *** ### label? > `optional` **label**: `string` The label for the component. *** ### modules? > `optional` **modules**: `Record`\<`string`, `unknown`\> Allows to customize the behavior and functionality of the editor. #### Overrides `ReactQuill.ReactQuillProps.modules` *** ### onChange() > **onChange**: (`value`?) => `void` Triggered after the content changed. #### Parameters • **value?**: `string` #### Returns `void` #### Overrides `ReactQuill.ReactQuillProps.onChange` *** ### onKeyDown()? > `optional` **onKeyDown**: (`event`) => `void` #### Parameters • **event**: `any` #### Returns `void` #### Inherited from `ReactQuill.ReactQuillProps.onKeyDown` *** ### onKeyPress()? > `optional` **onKeyPress**: (`event`) => `void` #### Parameters • **event**: `any` #### Returns `void` #### Inherited from `ReactQuill.ReactQuillProps.onKeyPress` *** ### onKeyUp()? > `optional` **onKeyUp**: (`event`) => `void` #### Parameters • **event**: `any` #### Returns `void` #### Inherited from `ReactQuill.ReactQuillProps.onKeyUp` *** ### placeholder? > `optional` **placeholder**: `string` #### Inherited from `ReactQuill.ReactQuillProps.placeholder` *** ### preserveWhitespace? > `optional` **preserveWhitespace**: `boolean` #### Inherited from `ReactQuill.ReactQuillProps.preserveWhitespace` *** ### readOnly? > `optional` **readOnly**: `boolean` #### Inherited from `ReactQuill.ReactQuillProps.readOnly` *** ### style? > `optional` **style**: `CSSProperties` #### Inherited from `ReactQuill.ReactQuillProps.style` *** ### tabIndex? > `optional` **tabIndex**: `number` #### Inherited from `ReactQuill.ReactQuillProps.tabIndex` *** ### theme? > `optional` **theme**: `string` #### Inherited from `ReactQuill.ReactQuillProps.theme` *** ### toolbarOptions? > `optional` **toolbarOptions**: (`"header"` \| `"script"` \| `"color"` \| `"size"` \| `"list"` \| `"direction"` \| `"font"` \| `"clean"` \| `"align"` \| `"decoration"` \| `"block"` \| `"indent"` \| `"insert"`)[] Groups of buttons to be displayed on the toolbar. *** ### value? > `optional` **value**: `Value` #### Inherited from `ReactQuill.ReactQuillProps.value` ## Methods ### onBlur()? > `optional` **onBlur**(`previousSelection`, `source`, `editor`): `void` #### Parameters • **previousSelection**: `Range` • **source**: `EmitterSource` • **editor**: `UnprivilegedEditor` #### Returns `void` #### Inherited from `ReactQuill.ReactQuillProps.onBlur` *** ### onChangeSelection()? > `optional` **onChangeSelection**(`selection`, `source`, `editor`): `void` #### Parameters • **selection**: `Range` • **source**: `EmitterSource` • **editor**: `UnprivilegedEditor` #### Returns `void` #### Inherited from `ReactQuill.ReactQuillProps.onChangeSelection` *** ### onFocus()? > `optional` **onFocus**(`selection`, `source`, `editor`): `void` #### Parameters • **selection**: `Range` • **source**: `EmitterSource` • **editor**: `UnprivilegedEditor` #### Returns `void` #### Inherited from `ReactQuill.ReactQuillProps.onFocus` --- # Variable: richTextComponent > `const` **richTextComponent**: [`Definer`](../../core/classes/Definer.md)\<[`RichTextEditorProps`](../interfaces/RichTextEditorProps.md)\> = `richTextEditor` --- # Variable: richTextModel > `const` **richTextModel**: [`Model`](../../core/classes/Model.md)\<`any`\> --- # Function: RsLocalizationWrapper() > **RsLocalizationWrapper**(`props`): `Element` Wrapper component for RSuite components localization. ## Parameters • **props**: [`FormViewerWrapperComponentProps`](../../core/interfaces/FormViewerWrapperComponentProps.md) the component props. ## Returns `Element` the wrapped components with localization settings applied. --- # Function: formEngineRsuiteCssLoader() > **formEngineRsuiteCssLoader**(): `Promise`\<`void`\> Loads FormEngine specific styles over "rsuite" library. ## Returns `Promise`\<`void`\> the Promise that resolves when the custom styles have been loaded successfully. --- # Function: ltrCssLoader() > **ltrCssLoader**(): `Promise`\<`void`\> Loads the Left-To-Right (LTR) CSS for the "rsuite" library. ## Returns `Promise`\<`void`\> the Promise that resolves when the LTR CSS has been loaded successfully. --- # Function: rtlCssLoader() > **rtlCssLoader**(): `Promise`\<`void`\> Loads the Right-to-Left (RTL) CSS for the "rsuite" library. ## Returns `Promise`\<`void`\> the Promise that resolves when the RTL CSS has been loaded successfully. --- # @react-form-builder/components-rsuite ## Interfaces - [RsErrorMessageProps](interfaces/RsErrorMessageProps.md) - [RsTooltipProps](interfaces/RsTooltipProps.md) ## Variables - [builderViewWithCss](variables/builderViewWithCss.md) - [models](variables/models.md) - [rSuiteComponents](variables/rSuiteComponents.md) - [rsErrorMessage](variables/rsErrorMessage.md) - [rsTooltip](variables/rsTooltip.md) - [view](variables/view.md) - [viewWithCss](variables/viewWithCss.md) ## Functions - [RsLocalizationWrapper](functions/RsLocalizationWrapper.md) - [formEngineRsuiteCssLoader](functions/formEngineRsuiteCssLoader.md) - [ltrCssLoader](functions/ltrCssLoader.md) - [rtlCssLoader](functions/rtlCssLoader.md) --- # Interface: RsErrorMessageProps The properties of RsErrorMessage component. ## Extends - [`ErrorWrapperProps`](../../core/interfaces/ErrorWrapperProps.md) ## Properties ### children? > `optional` **children**: `ReactNode` The wrapped component. #### Inherited from [`ErrorWrapperProps`](../../core/interfaces/ErrorWrapperProps.md).[`children`](../../core/interfaces/ErrorWrapperProps.md#children) *** ### className? > `optional` **className**: `string` The CSS class name. #### Inherited from [`ErrorWrapperProps`](../../core/interfaces/ErrorWrapperProps.md).[`className`](../../core/interfaces/ErrorWrapperProps.md#classname) *** ### error? > `optional` **error**: `string` The error text. #### Inherited from [`ErrorWrapperProps`](../../core/interfaces/ErrorWrapperProps.md).[`error`](../../core/interfaces/ErrorWrapperProps.md#error) *** ### placement? > `optional` **placement**: `Placement8` The placement of an error message. --- # Interface: RsTooltipProps The properties of RsTooltip component. ## Extends - [`WrapperProps`](../../core/interfaces/WrapperProps.md) ## Properties ### children > **children**: `ReactNode` The React child node. #### Inherited from [`WrapperProps`](../../core/interfaces/WrapperProps.md).[`children`](../../core/interfaces/WrapperProps.md#children) *** ### className? > `optional` **className**: `string` The CSS class name. #### Inherited from [`WrapperProps`](../../core/interfaces/WrapperProps.md).[`className`](../../core/interfaces/WrapperProps.md#classname) *** ### placement > **placement**: `Placement` The placement of a tooltip. *** ### text > **text**: `string` The tooltip text. *** ### trigger > **trigger**: `OverlayTriggerType` The tooltip trigger. --- # Variable: builderViewWithCss > `const` **builderViewWithCss**: [`BuilderView`](../../core/classes/BuilderView.md) An assembled set of rSuite components metadata, ready to be passed as a property to the FormBuilder. This view contains CSS loaders. --- # Variable: models > `const` **models**: [`Model`](../../core/classes/Model.md)\<`any`\>[] An array of rSuite component metadata for use in FormViewer. --- # Variable: rSuiteComponents > `const` **rSuiteComponents**: [`Definer`](../../core/classes/Definer.md)\<`any`\>[] = `[]` An array of rSuite component metadata factories. --- # Variable: rsErrorMessage > `const` **rsErrorMessage**: [`Definer`](../../core/classes/Definer.md)\<[`RsErrorMessageProps`](../interfaces/RsErrorMessageProps.md)\> Metadata builder for rSuite-based error display component. --- # Variable: rsTooltip > `const` **rsTooltip**: [`Definer`](../../core/classes/Definer.md)\<[`RsTooltipProps`](../interfaces/RsTooltipProps.md)\> Metadata builder for rSuite-based tooltip display component. --- # Variable: view > `const` **view**: [`View`](../../core/classes/View.md) An assembled set of rSuite components, ready to be passed as a property to the FormViewer. --- # Variable: viewWithCss > `const` **viewWithCss**: [`View`](../../core/classes/View.md) An assembled set of rSuite components, ready to be passed as a property to the FormViewer. This view contains CSS loaders. --- # @react-form-builder/components-signature ## Interfaces - [SignatureProps](interfaces/SignatureProps.md) ## Variables - [signatureComponent](variables/signatureComponent.md) - [signatureModel](variables/signatureModel.md) --- # Interface: SignatureProps The Signature pad properties. ## Extends - `Omit`\<`ComponentPropsWithoutRef`\<`"canvas"`\>, `"width"` \| `"height"` \| `"onChange"`\> ## Properties ### about? > `optional` **about**: `string` #### Inherited from `Omit.about` *** ### accessKey? > `optional` **accessKey**: `string` #### Inherited from `Omit.accessKey` *** ### aria-activedescendant? > `optional` **aria-activedescendant**: `string` Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. #### Inherited from `Omit.aria-activedescendant` *** ### aria-atomic? > `optional` **aria-atomic**: `Booleanish` Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. #### Inherited from `Omit.aria-atomic` *** ### aria-autocomplete? > `optional` **aria-autocomplete**: `"inline"` \| `"none"` \| `"list"` \| `"both"` Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. #### Inherited from `Omit.aria-autocomplete` *** ### aria-braillelabel? > `optional` **aria-braillelabel**: `string` Defines a string value that labels the current element, which is intended to be converted into Braille. #### See aria-label. #### Inherited from `Omit.aria-braillelabel` *** ### aria-brailleroledescription? > `optional` **aria-brailleroledescription**: `string` Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. #### See aria-roledescription. #### Inherited from `Omit.aria-brailleroledescription` *** ### aria-busy? > `optional` **aria-busy**: `Booleanish` #### Inherited from `Omit.aria-busy` *** ### aria-checked? > `optional` **aria-checked**: `boolean` \| `"true"` \| `"false"` \| `"mixed"` Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. #### See - aria-pressed - aria-selected. #### Inherited from `Omit.aria-checked` *** ### aria-colcount? > `optional` **aria-colcount**: `number` Defines the total number of columns in a table, grid, or treegrid. #### See aria-colindex. #### Inherited from `Omit.aria-colcount` *** ### aria-colindex? > `optional` **aria-colindex**: `number` Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. #### See - aria-colcount - aria-colspan. #### Inherited from `Omit.aria-colindex` *** ### aria-colindextext? > `optional` **aria-colindextext**: `string` Defines a human readable text alternative of aria-colindex. #### See aria-rowindextext. #### Inherited from `Omit.aria-colindextext` *** ### aria-colspan? > `optional` **aria-colspan**: `number` Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. #### See - aria-colindex - aria-rowspan. #### Inherited from `Omit.aria-colspan` *** ### aria-controls? > `optional` **aria-controls**: `string` Identifies the element (or elements) whose contents or presence are controlled by the current element. #### See aria-owns. #### Inherited from `Omit.aria-controls` *** ### aria-current? > `optional` **aria-current**: `boolean` \| `"time"` \| `"date"` \| `"true"` \| `"false"` \| `"page"` \| `"step"` \| `"location"` Indicates the element that represents the current item within a container or set of related elements. #### Inherited from `Omit.aria-current` *** ### aria-describedby? > `optional` **aria-describedby**: `string` Identifies the element (or elements) that describes the object. #### See aria-labelledby #### Inherited from `Omit.aria-describedby` *** ### aria-description? > `optional` **aria-description**: `string` Defines a string value that describes or annotates the current element. #### See related aria-describedby. #### Inherited from `Omit.aria-description` *** ### aria-details? > `optional` **aria-details**: `string` Identifies the element that provides a detailed, extended description for the object. #### See aria-describedby. #### Inherited from `Omit.aria-details` *** ### aria-disabled? > `optional` **aria-disabled**: `Booleanish` Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. #### See - aria-hidden - aria-readonly. #### Inherited from `Omit.aria-disabled` *** ### ~~aria-dropeffect?~~ > `optional` **aria-dropeffect**: `"link"` \| `"none"` \| `"copy"` \| `"execute"` \| `"move"` \| `"popup"` Indicates what functions can be performed when a dragged object is released on the drop target. #### Deprecated in ARIA 1.1 #### Inherited from `Omit.aria-dropeffect` *** ### aria-errormessage? > `optional` **aria-errormessage**: `string` Identifies the element that provides an error message for the object. #### See - aria-invalid - aria-describedby. #### Inherited from `Omit.aria-errormessage` *** ### aria-expanded? > `optional` **aria-expanded**: `Booleanish` Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. #### Inherited from `Omit.aria-expanded` *** ### aria-flowto? > `optional` **aria-flowto**: `string` Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. #### Inherited from `Omit.aria-flowto` *** ### ~~aria-grabbed?~~ > `optional` **aria-grabbed**: `Booleanish` Indicates an element's "grabbed" state in a drag-and-drop operation. #### Deprecated in ARIA 1.1 #### Inherited from `Omit.aria-grabbed` *** ### aria-haspopup? > `optional` **aria-haspopup**: `boolean` \| `"dialog"` \| `"menu"` \| `"true"` \| `"false"` \| `"grid"` \| `"listbox"` \| `"tree"` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. #### Inherited from `Omit.aria-haspopup` *** ### aria-hidden? > `optional` **aria-hidden**: `Booleanish` Indicates whether the element is exposed to an accessibility API. #### See aria-disabled. #### Inherited from `Omit.aria-hidden` *** ### aria-invalid? > `optional` **aria-invalid**: `boolean` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"` Indicates the entered value does not conform to the format expected by the application. #### See aria-errormessage. #### Inherited from `Omit.aria-invalid` *** ### aria-keyshortcuts? > `optional` **aria-keyshortcuts**: `string` Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. #### Inherited from `Omit.aria-keyshortcuts` *** ### aria-label? > `optional` **aria-label**: `string` Defines a string value that labels the current element. #### See aria-labelledby. #### Inherited from `Omit.aria-label` *** ### aria-labelledby? > `optional` **aria-labelledby**: `string` Identifies the element (or elements) that labels the current element. #### See aria-describedby. #### Inherited from `Omit.aria-labelledby` *** ### aria-level? > `optional` **aria-level**: `number` Defines the hierarchical level of an element within a structure. #### Inherited from `Omit.aria-level` *** ### aria-live? > `optional` **aria-live**: `"off"` \| `"assertive"` \| `"polite"` Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. #### Inherited from `Omit.aria-live` *** ### aria-modal? > `optional` **aria-modal**: `Booleanish` Indicates whether an element is modal when displayed. #### Inherited from `Omit.aria-modal` *** ### aria-multiline? > `optional` **aria-multiline**: `Booleanish` Indicates whether a text box accepts multiple lines of input or only a single line. #### Inherited from `Omit.aria-multiline` *** ### aria-multiselectable? > `optional` **aria-multiselectable**: `Booleanish` Indicates that the user may select more than one item from the current selectable descendants. #### Inherited from `Omit.aria-multiselectable` *** ### aria-orientation? > `optional` **aria-orientation**: `"horizontal"` \| `"vertical"` Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. #### Inherited from `Omit.aria-orientation` *** ### aria-owns? > `optional` **aria-owns**: `string` Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. #### See aria-controls. #### Inherited from `Omit.aria-owns` *** ### aria-placeholder? > `optional` **aria-placeholder**: `string` Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. #### Inherited from `Omit.aria-placeholder` *** ### aria-posinset? > `optional` **aria-posinset**: `number` Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. #### See aria-setsize. #### Inherited from `Omit.aria-posinset` *** ### aria-pressed? > `optional` **aria-pressed**: `boolean` \| `"true"` \| `"false"` \| `"mixed"` Indicates the current "pressed" state of toggle buttons. #### See - aria-checked - aria-selected. #### Inherited from `Omit.aria-pressed` *** ### aria-readonly? > `optional` **aria-readonly**: `Booleanish` Indicates that the element is not editable, but is otherwise operable. #### See aria-disabled. #### Inherited from `Omit.aria-readonly` *** ### aria-relevant? > `optional` **aria-relevant**: `"text"` \| `"all"` \| `"additions"` \| `"additions removals"` \| `"additions text"` \| `"removals"` \| `"removals additions"` \| `"removals text"` \| `"text additions"` \| `"text removals"` Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. #### See aria-atomic. #### Inherited from `Omit.aria-relevant` *** ### aria-required? > `optional` **aria-required**: `Booleanish` Indicates that user input is required on the element before a form may be submitted. #### Inherited from `Omit.aria-required` *** ### aria-roledescription? > `optional` **aria-roledescription**: `string` Defines a human-readable, author-localized description for the role of an element. #### Inherited from `Omit.aria-roledescription` *** ### aria-rowcount? > `optional` **aria-rowcount**: `number` Defines the total number of rows in a table, grid, or treegrid. #### See aria-rowindex. #### Inherited from `Omit.aria-rowcount` *** ### aria-rowindex? > `optional` **aria-rowindex**: `number` Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. #### See - aria-rowcount - aria-rowspan. #### Inherited from `Omit.aria-rowindex` *** ### aria-rowindextext? > `optional` **aria-rowindextext**: `string` Defines a human readable text alternative of aria-rowindex. #### See aria-colindextext. #### Inherited from `Omit.aria-rowindextext` *** ### aria-rowspan? > `optional` **aria-rowspan**: `number` Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. #### See - aria-rowindex - aria-colspan. #### Inherited from `Omit.aria-rowspan` *** ### aria-selected? > `optional` **aria-selected**: `Booleanish` Indicates the current "selected" state of various widgets. #### See - aria-checked - aria-pressed. #### Inherited from `Omit.aria-selected` *** ### aria-setsize? > `optional` **aria-setsize**: `number` Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. #### See aria-posinset. #### Inherited from `Omit.aria-setsize` *** ### aria-sort? > `optional` **aria-sort**: `"none"` \| `"ascending"` \| `"descending"` \| `"other"` Indicates if items in a table or grid are sorted in ascending or descending order. #### Inherited from `Omit.aria-sort` *** ### aria-valuemax? > `optional` **aria-valuemax**: `number` Defines the maximum allowed value for a range widget. #### Inherited from `Omit.aria-valuemax` *** ### aria-valuemin? > `optional` **aria-valuemin**: `number` Defines the minimum allowed value for a range widget. #### Inherited from `Omit.aria-valuemin` *** ### aria-valuenow? > `optional` **aria-valuenow**: `number` Defines the current value for a range widget. #### See aria-valuetext. #### Inherited from `Omit.aria-valuenow` *** ### aria-valuetext? > `optional` **aria-valuetext**: `string` Defines the human readable text alternative of aria-valuenow for a range widget. #### Inherited from `Omit.aria-valuetext` *** ### autoCapitalize? > `optional` **autoCapitalize**: `string` & `object` \| `"off"` \| `"none"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"` #### Inherited from `Omit.autoCapitalize` *** ### autoCorrect? > `optional` **autoCorrect**: `string` #### Inherited from `Omit.autoCorrect` *** ### autoFocus? > `optional` **autoFocus**: `boolean` #### Inherited from `Omit.autoFocus` *** ### autoSave? > `optional` **autoSave**: `string` #### Inherited from `Omit.autoSave` *** ### backgroundColor? > `optional` **backgroundColor**: `Fill` The background color. *** ### children? > `optional` **children**: `ReactI18NextChild` \| `Iterable`\<`ReactI18NextChild`\> #### Inherited from `Omit.children` *** ### className? > `optional` **className**: `string` #### Inherited from `Omit.className` *** ### clearButtonText? > `optional` **clearButtonText**: `string` Clear button label. *** ### color? > `optional` **color**: `string` #### Inherited from `Omit.color` *** ### content? > `optional` **content**: `string` #### Inherited from `Omit.content` *** ### contentEditable? > `optional` **contentEditable**: `"inherit"` \| `Booleanish` \| `"plaintext-only"` #### Inherited from `Omit.contentEditable` *** ### contextMenu? > `optional` **contextMenu**: `string` #### Inherited from `Omit.contextMenu` *** ### dangerouslySetInnerHTML? > `optional` **dangerouslySetInnerHTML**: `object` #### \_\_html > **\_\_html**: `string` \| `TrustedHTML` #### Inherited from `Omit.dangerouslySetInnerHTML` *** ### datatype? > `optional` **datatype**: `string` #### Inherited from `Omit.datatype` *** ### defaultChecked? > `optional` **defaultChecked**: `boolean` #### Inherited from `Omit.defaultChecked` *** ### defaultValue? > `optional` **defaultValue**: `string` \| `number` \| readonly `string`[] #### Inherited from `Omit.defaultValue` *** ### dir? > `optional` **dir**: `string` #### Inherited from `Omit.dir` *** ### draggable? > `optional` **draggable**: `Booleanish` #### Inherited from `Omit.draggable` *** ### enterKeyHint? > `optional` **enterKeyHint**: `"search"` \| `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"previous"` \| `"send"` #### Inherited from `Omit.enterKeyHint` *** ### height? > `optional` **height**: `number` The canvas height. #### Default ```ts 150 ``` *** ### hidden? > `optional` **hidden**: `boolean` #### Inherited from `Omit.hidden` *** ### id? > `optional` **id**: `string` #### Inherited from `Omit.id` *** ### inert? > `optional` **inert**: `boolean` #### See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert #### Inherited from `Omit.inert` *** ### inlist? > `optional` **inlist**: `any` #### Inherited from `Omit.inlist` *** ### inputMode? > `optional` **inputMode**: `"search"` \| `"text"` \| `"none"` \| `"tel"` \| `"url"` \| `"email"` \| `"numeric"` \| `"decimal"` Hints at the type of data that might be entered by the user while editing the element or its contents #### See [https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute) #### Inherited from `Omit.inputMode` *** ### is? > `optional` **is**: `string` Specify that a standard HTML element should behave like a defined custom built-in element #### See [https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is](https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is) #### Inherited from `Omit.is` *** ### itemID? > `optional` **itemID**: `string` #### Inherited from `Omit.itemID` *** ### itemProp? > `optional` **itemProp**: `string` #### Inherited from `Omit.itemProp` *** ### itemRef? > `optional` **itemRef**: `string` #### Inherited from `Omit.itemRef` *** ### itemScope? > `optional` **itemScope**: `boolean` #### Inherited from `Omit.itemScope` *** ### itemType? > `optional` **itemType**: `string` #### Inherited from `Omit.itemType` *** ### key? > `optional` **key**: `null` \| `Key` #### Inherited from `Omit.key` *** ### label? > `optional` **label**: `string` The label for the component. *** ### lang? > `optional` **lang**: `string` #### Inherited from `Omit.lang` *** ### lineWidth? > `optional` **lineWidth**: `number` The line width. #### Default ```ts 1.5 ``` *** ### nonce? > `optional` **nonce**: `string` #### Inherited from `Omit.nonce` *** ### onAbort? > `optional` **onAbort**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onAbort` *** ### onAbortCapture? > `optional` **onAbortCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onAbortCapture` *** ### onAnimationEnd? > `optional` **onAnimationEnd**: `AnimationEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onAnimationEnd` *** ### onAnimationEndCapture? > `optional` **onAnimationEndCapture**: `AnimationEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onAnimationEndCapture` *** ### onAnimationIteration? > `optional` **onAnimationIteration**: `AnimationEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onAnimationIteration` *** ### onAnimationIterationCapture? > `optional` **onAnimationIterationCapture**: `AnimationEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onAnimationIterationCapture` *** ### onAnimationStart? > `optional` **onAnimationStart**: `AnimationEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onAnimationStart` *** ### onAnimationStartCapture? > `optional` **onAnimationStartCapture**: `AnimationEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onAnimationStartCapture` *** ### onAuxClick? > `optional` **onAuxClick**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onAuxClick` *** ### onAuxClickCapture? > `optional` **onAuxClickCapture**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onAuxClickCapture` *** ### onBeforeInput? > `optional` **onBeforeInput**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onBeforeInput` *** ### onBeforeInputCapture? > `optional` **onBeforeInputCapture**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onBeforeInputCapture` *** ### onBeforeToggle? > `optional` **onBeforeToggle**: `ToggleEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onBeforeToggle` *** ### onBlur? > `optional` **onBlur**: `FocusEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onBlur` *** ### onBlurCapture? > `optional` **onBlurCapture**: `FocusEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onBlurCapture` *** ### onCanPlay? > `optional` **onCanPlay**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCanPlay` *** ### onCanPlayCapture? > `optional` **onCanPlayCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCanPlayCapture` *** ### onCanPlayThrough? > `optional` **onCanPlayThrough**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCanPlayThrough` *** ### onCanPlayThroughCapture? > `optional` **onCanPlayThroughCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCanPlayThroughCapture` *** ### onChange()? > `optional` **onChange**: (`value`?) => `void` Triggered after stroke update. #### Parameters • **value?**: `string` #### Returns `void` *** ### onChangeCapture? > `optional` **onChangeCapture**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onChangeCapture` *** ### onClick? > `optional` **onClick**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onClick` *** ### onClickCapture? > `optional` **onClickCapture**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onClickCapture` *** ### onCompositionEnd? > `optional` **onCompositionEnd**: `CompositionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCompositionEnd` *** ### onCompositionEndCapture? > `optional` **onCompositionEndCapture**: `CompositionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCompositionEndCapture` *** ### onCompositionStart? > `optional` **onCompositionStart**: `CompositionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCompositionStart` *** ### onCompositionStartCapture? > `optional` **onCompositionStartCapture**: `CompositionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCompositionStartCapture` *** ### onCompositionUpdate? > `optional` **onCompositionUpdate**: `CompositionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCompositionUpdate` *** ### onCompositionUpdateCapture? > `optional` **onCompositionUpdateCapture**: `CompositionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCompositionUpdateCapture` *** ### onContextMenu? > `optional` **onContextMenu**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onContextMenu` *** ### onContextMenuCapture? > `optional` **onContextMenuCapture**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onContextMenuCapture` *** ### onCopy? > `optional` **onCopy**: `ClipboardEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCopy` *** ### onCopyCapture? > `optional` **onCopyCapture**: `ClipboardEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCopyCapture` *** ### onCut? > `optional` **onCut**: `ClipboardEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCut` *** ### onCutCapture? > `optional` **onCutCapture**: `ClipboardEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onCutCapture` *** ### onDoubleClick? > `optional` **onDoubleClick**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDoubleClick` *** ### onDoubleClickCapture? > `optional` **onDoubleClickCapture**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDoubleClickCapture` *** ### onDrag? > `optional` **onDrag**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDrag` *** ### onDragCapture? > `optional` **onDragCapture**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragCapture` *** ### onDragEnd? > `optional` **onDragEnd**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragEnd` *** ### onDragEndCapture? > `optional` **onDragEndCapture**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragEndCapture` *** ### onDragEnter? > `optional` **onDragEnter**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragEnter` *** ### onDragEnterCapture? > `optional` **onDragEnterCapture**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragEnterCapture` *** ### onDragExit? > `optional` **onDragExit**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragExit` *** ### onDragExitCapture? > `optional` **onDragExitCapture**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragExitCapture` *** ### onDragLeave? > `optional` **onDragLeave**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragLeave` *** ### onDragLeaveCapture? > `optional` **onDragLeaveCapture**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragLeaveCapture` *** ### onDragOver? > `optional` **onDragOver**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragOver` *** ### onDragOverCapture? > `optional` **onDragOverCapture**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragOverCapture` *** ### onDragStart? > `optional` **onDragStart**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragStart` *** ### onDragStartCapture? > `optional` **onDragStartCapture**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDragStartCapture` *** ### onDrop? > `optional` **onDrop**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDrop` *** ### onDropCapture? > `optional` **onDropCapture**: `DragEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDropCapture` *** ### onDurationChange? > `optional` **onDurationChange**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDurationChange` *** ### onDurationChangeCapture? > `optional` **onDurationChangeCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onDurationChangeCapture` *** ### onEmptied? > `optional` **onEmptied**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onEmptied` *** ### onEmptiedCapture? > `optional` **onEmptiedCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onEmptiedCapture` *** ### onEncrypted? > `optional` **onEncrypted**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onEncrypted` *** ### onEncryptedCapture? > `optional` **onEncryptedCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onEncryptedCapture` *** ### onEnded? > `optional` **onEnded**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onEnded` *** ### onEndedCapture? > `optional` **onEndedCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onEndedCapture` *** ### onError? > `optional` **onError**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onError` *** ### onErrorCapture? > `optional` **onErrorCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onErrorCapture` *** ### onFocus? > `optional` **onFocus**: `FocusEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onFocus` *** ### onFocusCapture? > `optional` **onFocusCapture**: `FocusEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onFocusCapture` *** ### onGotPointerCapture? > `optional` **onGotPointerCapture**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onGotPointerCapture` *** ### onGotPointerCaptureCapture? > `optional` **onGotPointerCaptureCapture**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onGotPointerCaptureCapture` *** ### onInput? > `optional` **onInput**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onInput` *** ### onInputCapture? > `optional` **onInputCapture**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onInputCapture` *** ### onInvalid? > `optional` **onInvalid**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onInvalid` *** ### onInvalidCapture? > `optional` **onInvalidCapture**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onInvalidCapture` *** ### onKeyDown? > `optional` **onKeyDown**: `KeyboardEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onKeyDown` *** ### onKeyDownCapture? > `optional` **onKeyDownCapture**: `KeyboardEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onKeyDownCapture` *** ### ~~onKeyPress?~~ > `optional` **onKeyPress**: `KeyboardEventHandler`\<`HTMLCanvasElement`\> #### Deprecated Use `onKeyUp` or `onKeyDown` instead #### Inherited from `Omit.onKeyPress` *** ### ~~onKeyPressCapture?~~ > `optional` **onKeyPressCapture**: `KeyboardEventHandler`\<`HTMLCanvasElement`\> #### Deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead #### Inherited from `Omit.onKeyPressCapture` *** ### onKeyUp? > `optional` **onKeyUp**: `KeyboardEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onKeyUp` *** ### onKeyUpCapture? > `optional` **onKeyUpCapture**: `KeyboardEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onKeyUpCapture` *** ### onLoad? > `optional` **onLoad**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onLoad` *** ### onLoadCapture? > `optional` **onLoadCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onLoadCapture` *** ### onLoadStart? > `optional` **onLoadStart**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onLoadStart` *** ### onLoadStartCapture? > `optional` **onLoadStartCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onLoadStartCapture` *** ### onLoadedData? > `optional` **onLoadedData**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onLoadedData` *** ### onLoadedDataCapture? > `optional` **onLoadedDataCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onLoadedDataCapture` *** ### onLoadedMetadata? > `optional` **onLoadedMetadata**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onLoadedMetadata` *** ### onLoadedMetadataCapture? > `optional` **onLoadedMetadataCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onLoadedMetadataCapture` *** ### onLostPointerCapture? > `optional` **onLostPointerCapture**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onLostPointerCapture` *** ### onLostPointerCaptureCapture? > `optional` **onLostPointerCaptureCapture**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onLostPointerCaptureCapture` *** ### onMouseDown? > `optional` **onMouseDown**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseDown` *** ### onMouseDownCapture? > `optional` **onMouseDownCapture**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseDownCapture` *** ### onMouseEnter? > `optional` **onMouseEnter**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseEnter` *** ### onMouseLeave? > `optional` **onMouseLeave**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseLeave` *** ### onMouseMove? > `optional` **onMouseMove**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseMove` *** ### onMouseMoveCapture? > `optional` **onMouseMoveCapture**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseMoveCapture` *** ### onMouseOut? > `optional` **onMouseOut**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseOut` *** ### onMouseOutCapture? > `optional` **onMouseOutCapture**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseOutCapture` *** ### onMouseOver? > `optional` **onMouseOver**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseOver` *** ### onMouseOverCapture? > `optional` **onMouseOverCapture**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseOverCapture` *** ### onMouseUp? > `optional` **onMouseUp**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseUp` *** ### onMouseUpCapture? > `optional` **onMouseUpCapture**: `MouseEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onMouseUpCapture` *** ### onPaste? > `optional` **onPaste**: `ClipboardEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPaste` *** ### onPasteCapture? > `optional` **onPasteCapture**: `ClipboardEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPasteCapture` *** ### onPause? > `optional` **onPause**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPause` *** ### onPauseCapture? > `optional` **onPauseCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPauseCapture` *** ### onPlay? > `optional` **onPlay**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPlay` *** ### onPlayCapture? > `optional` **onPlayCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPlayCapture` *** ### onPlaying? > `optional` **onPlaying**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPlaying` *** ### onPlayingCapture? > `optional` **onPlayingCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPlayingCapture` *** ### onPointerCancel? > `optional` **onPointerCancel**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerCancel` *** ### onPointerCancelCapture? > `optional` **onPointerCancelCapture**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerCancelCapture` *** ### onPointerDown? > `optional` **onPointerDown**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerDown` *** ### onPointerDownCapture? > `optional` **onPointerDownCapture**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerDownCapture` *** ### onPointerEnter? > `optional` **onPointerEnter**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerEnter` *** ### onPointerLeave? > `optional` **onPointerLeave**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerLeave` *** ### onPointerMove? > `optional` **onPointerMove**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerMove` *** ### onPointerMoveCapture? > `optional` **onPointerMoveCapture**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerMoveCapture` *** ### onPointerOut? > `optional` **onPointerOut**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerOut` *** ### onPointerOutCapture? > `optional` **onPointerOutCapture**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerOutCapture` *** ### onPointerOver? > `optional` **onPointerOver**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerOver` *** ### onPointerOverCapture? > `optional` **onPointerOverCapture**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerOverCapture` *** ### onPointerUp? > `optional` **onPointerUp**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerUp` *** ### onPointerUpCapture? > `optional` **onPointerUpCapture**: `PointerEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onPointerUpCapture` *** ### onProgress? > `optional` **onProgress**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onProgress` *** ### onProgressCapture? > `optional` **onProgressCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onProgressCapture` *** ### onRateChange? > `optional` **onRateChange**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onRateChange` *** ### onRateChangeCapture? > `optional` **onRateChangeCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onRateChangeCapture` *** ### onReset? > `optional` **onReset**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onReset` *** ### onResetCapture? > `optional` **onResetCapture**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onResetCapture` *** ### onResize? > `optional` **onResize**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onResize` *** ### onResizeCapture? > `optional` **onResizeCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onResizeCapture` *** ### onScroll? > `optional` **onScroll**: `UIEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onScroll` *** ### onScrollCapture? > `optional` **onScrollCapture**: `UIEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onScrollCapture` *** ### onSeeked? > `optional` **onSeeked**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onSeeked` *** ### onSeekedCapture? > `optional` **onSeekedCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onSeekedCapture` *** ### onSeeking? > `optional` **onSeeking**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onSeeking` *** ### onSeekingCapture? > `optional` **onSeekingCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onSeekingCapture` *** ### onSelect? > `optional` **onSelect**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onSelect` *** ### onSelectCapture? > `optional` **onSelectCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onSelectCapture` *** ### onStalled? > `optional` **onStalled**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onStalled` *** ### onStalledCapture? > `optional` **onStalledCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onStalledCapture` *** ### onSubmit? > `optional` **onSubmit**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onSubmit` *** ### onSubmitCapture? > `optional` **onSubmitCapture**: `FormEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onSubmitCapture` *** ### onSuspend? > `optional` **onSuspend**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onSuspend` *** ### onSuspendCapture? > `optional` **onSuspendCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onSuspendCapture` *** ### onTimeUpdate? > `optional` **onTimeUpdate**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTimeUpdate` *** ### onTimeUpdateCapture? > `optional` **onTimeUpdateCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTimeUpdateCapture` *** ### onToggle? > `optional` **onToggle**: `ToggleEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onToggle` *** ### onTouchCancel? > `optional` **onTouchCancel**: `TouchEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTouchCancel` *** ### onTouchCancelCapture? > `optional` **onTouchCancelCapture**: `TouchEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTouchCancelCapture` *** ### onTouchEnd? > `optional` **onTouchEnd**: `TouchEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTouchEnd` *** ### onTouchEndCapture? > `optional` **onTouchEndCapture**: `TouchEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTouchEndCapture` *** ### onTouchMove? > `optional` **onTouchMove**: `TouchEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTouchMove` *** ### onTouchMoveCapture? > `optional` **onTouchMoveCapture**: `TouchEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTouchMoveCapture` *** ### onTouchStart? > `optional` **onTouchStart**: `TouchEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTouchStart` *** ### onTouchStartCapture? > `optional` **onTouchStartCapture**: `TouchEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTouchStartCapture` *** ### onTransitionCancel? > `optional` **onTransitionCancel**: `TransitionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTransitionCancel` *** ### onTransitionCancelCapture? > `optional` **onTransitionCancelCapture**: `TransitionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTransitionCancelCapture` *** ### onTransitionEnd? > `optional` **onTransitionEnd**: `TransitionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTransitionEnd` *** ### onTransitionEndCapture? > `optional` **onTransitionEndCapture**: `TransitionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTransitionEndCapture` *** ### onTransitionRun? > `optional` **onTransitionRun**: `TransitionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTransitionRun` *** ### onTransitionRunCapture? > `optional` **onTransitionRunCapture**: `TransitionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTransitionRunCapture` *** ### onTransitionStart? > `optional` **onTransitionStart**: `TransitionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTransitionStart` *** ### onTransitionStartCapture? > `optional` **onTransitionStartCapture**: `TransitionEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onTransitionStartCapture` *** ### onVolumeChange? > `optional` **onVolumeChange**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onVolumeChange` *** ### onVolumeChangeCapture? > `optional` **onVolumeChangeCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onVolumeChangeCapture` *** ### onWaiting? > `optional` **onWaiting**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onWaiting` *** ### onWaitingCapture? > `optional` **onWaitingCapture**: `ReactEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onWaitingCapture` *** ### onWheel? > `optional` **onWheel**: `WheelEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onWheel` *** ### onWheelCapture? > `optional` **onWheelCapture**: `WheelEventHandler`\<`HTMLCanvasElement`\> #### Inherited from `Omit.onWheelCapture` *** ### penColor? > `optional` **penColor**: `Fill` The pen color. *** ### popover? > `optional` **popover**: `""` \| `"auto"` \| `"manual"` #### Inherited from `Omit.popover` *** ### popoverTarget? > `optional` **popoverTarget**: `string` #### Inherited from `Omit.popoverTarget` *** ### popoverTargetAction? > `optional` **popoverTargetAction**: `"toggle"` \| `"show"` \| `"hide"` #### Inherited from `Omit.popoverTargetAction` *** ### prefix? > `optional` **prefix**: `string` #### Inherited from `Omit.prefix` *** ### property? > `optional` **property**: `string` #### Inherited from `Omit.property` *** ### radioGroup? > `optional` **radioGroup**: `string` #### Inherited from `Omit.radioGroup` *** ### readOnly? > `optional` **readOnly**: `boolean` Flag, if true - the component is running in read-only mode. *** ### rel? > `optional` **rel**: `string` #### Inherited from `Omit.rel` *** ### resource? > `optional` **resource**: `string` #### Inherited from `Omit.resource` *** ### results? > `optional` **results**: `number` #### Inherited from `Omit.results` *** ### rev? > `optional` **rev**: `string` #### Inherited from `Omit.rev` *** ### role? > `optional` **role**: `AriaRole` #### Inherited from `Omit.role` *** ### security? > `optional` **security**: `string` #### Inherited from `Omit.security` *** ### slot? > `optional` **slot**: `string` #### Inherited from `Omit.slot` *** ### spellCheck? > `optional` **spellCheck**: `Booleanish` #### Inherited from `Omit.spellCheck` *** ### style? > `optional` **style**: `CSSProperties` #### Inherited from `Omit.style` *** ### suppressContentEditableWarning? > `optional` **suppressContentEditableWarning**: `boolean` #### Inherited from `Omit.suppressContentEditableWarning` *** ### suppressHydrationWarning? > `optional` **suppressHydrationWarning**: `boolean` #### Inherited from `Omit.suppressHydrationWarning` *** ### tabIndex? > `optional` **tabIndex**: `number` #### Inherited from `Omit.tabIndex` *** ### title? > `optional` **title**: `string` #### Inherited from `Omit.title` *** ### translate? > `optional` **translate**: `"yes"` \| `"no"` #### Inherited from `Omit.translate` *** ### typeof? > `optional` **typeof**: `string` #### Inherited from `Omit.typeof` *** ### unselectable? > `optional` **unselectable**: `"off"` \| `"on"` #### Inherited from `Omit.unselectable` *** ### value? > `optional` **value**: `string` The initial data URL for drawing the signature image. *** ### vocab? > `optional` **vocab**: `string` #### Inherited from `Omit.vocab` *** ### width? > `optional` **width**: `number` The canvas width. #### Default ```ts 300 ``` --- # Variable: signatureComponent > `const` **signatureComponent**: [`Definer`](../../core/classes/Definer.md)\<[`SignatureProps`](../interfaces/SignatureProps.md)\> = `signature` --- # Variable: signatureModel > `const` **signatureModel**: [`Model`](../../core/classes/Model.md)\<`any`\> --- # Class: ActionDefinition Represents the definition of an action. ## Constructors ### new ActionDefinition() > **new ActionDefinition**(`func`, `body`?, `params`?): [`ActionDefinition`](ActionDefinition.md) Creates a new instance of the ActionDefinition class. #### Parameters • **func**: [`Func`](../type-aliases/Func.md) the function of an action. • **body?**: `string` the source code of the Action. • **params?**: [`ActionParameters`](../type-aliases/ActionParameters.md) = `{}` the parameters of the Action. #### Returns [`ActionDefinition`](ActionDefinition.md) ## Properties ### body? > `readonly` `optional` **body**: `string` the source code of the Action. *** ### func > `readonly` **func**: [`Func`](../type-aliases/Func.md) the function of an action. *** ### params > `readonly` **params**: [`ActionParameters`](../type-aliases/ActionParameters.md) = `{}` the parameters of the Action. ## Methods ### createFromObject() > `static` **createFromObject**(`value`): [`ActionDefinition`](ActionDefinition.md) Correctly creates the [ActionDefinition](ActionDefinition.md) from deserialized data. #### Parameters • **value**: `any` the deserialized data. #### Returns [`ActionDefinition`](ActionDefinition.md) the ActionDefinition instance. *** ### functionalAction() > `static` **functionalAction**(`func`, `params`): [`ActionDefinition`](ActionDefinition.md) Creates an action from the function. #### Parameters • **func**: [`Func`](../type-aliases/Func.md) the function of an action. • **params**: [`ActionParameters`](../type-aliases/ActionParameters.md) = `{}` the parameters of the Action. #### Returns [`ActionDefinition`](ActionDefinition.md) the new instance of the ActionDefinition class. *** ### sourceAction() > `static` **sourceAction**(`body`, `params`): [`ActionDefinition`](ActionDefinition.md) Creates an action from the source code. #### Parameters • **body**: `string` the source code of the Action. • **params**: [`ActionParameters`](../type-aliases/ActionParameters.md) = `{}` the parameters of the Action. #### Returns [`ActionDefinition`](ActionDefinition.md) the new instance of the ActionDefinition class. --- # Class: ActionEventArgs Arguments passed to the event handler. ## Constructors ### new ActionEventArgs() > **new ActionEventArgs**(`type`, `sender`, `store`, `args`, `renderedProps`): [`ActionEventArgs`](ActionEventArgs.md) Creates arguments for the event handler. #### Parameters • **type**: `string` the event type. • **sender**: [`ComponentData`](ComponentData.md) the component that triggered the event. • **store**: [`Store`](Store.md) the form viewer settings. • **args**: `any`[] the event arguments. • **renderedProps**: `Record`\<`string`, `any`\> the component properties that were used to render the sender component. #### Returns [`ActionEventArgs`](ActionEventArgs.md) ## Properties ### args > `readonly` **args**: `any`[] the event arguments. *** ### index? > `readonly` `optional` **index**: `number` The index of the component in the array, if the component is in the array. *** ### renderedProps > `readonly` **renderedProps**: `Record`\<`string`, `any`\> the component properties that were used to render the sender component. *** ### sender > `readonly` **sender**: [`ComponentData`](ComponentData.md) the component that triggered the event. *** ### store > `readonly` **store**: [`Store`](Store.md) the form viewer settings. *** ### type > `readonly` **type**: `string` the event type. ## Accessors ### data #### Get Signature > **get** **data**(): `Record`\<`string`, `unknown`\> ##### Returns `Record`\<`string`, `unknown`\> the object for reading and changing form data. *** ### event #### Get Signature > **get** **event**(): `null` \| `SyntheticEvent`\<`Element`, `Event`\> ##### Returns `null` \| `SyntheticEvent`\<`Element`, `Event`\> the event handled by the event handler. *** ### parentData #### Get Signature > **get** **parentData**(): `undefined` \| `Record`\<`string`, `unknown`\> ##### Returns `undefined` \| `Record`\<`string`, `unknown`\> the object to read and modify parent data (available for array elements). *** ### rootData #### Get Signature > **get** **rootData**(): `Record`\<`string`, `unknown`\> ##### Returns `Record`\<`string`, `unknown`\> the object to read and modify root form data. *** ### value #### Get Signature > **get** **value**(): `any` ##### Returns `any` the first element of the event argument array, which is treated as a value. ## Methods ### setUserDefinedProps() > **setUserDefinedProps**(`props`?): `void` Sets user-defined properties for the React component that override other properties of the component. #### Parameters • **props?**: `Record`\<`string`, `any`\> the component properties. #### Returns `void` --- # Class: Annotation Basic metadata class for a React component property for the form builder. ## Extended by - [`ContainerAnnotation`](ContainerAnnotation.md) - [`EventAnnotation`](EventAnnotation.md) - [`ModuleAnnotation`](ModuleAnnotation.md) - [`StyleAnnotation`](StyleAnnotation.md) - [`PropertyAnnotation`](PropertyAnnotation.md) ## Constructors ### new Annotation() > **new Annotation**(`key`, `name`): [`Annotation`](Annotation.md) Creates metadata for a React component property. #### Parameters • **key**: `string` the property name. • **name**: `string` the human-readable property name. #### Returns [`Annotation`](Annotation.md) ## Properties ### bindingType? > `readonly` `optional` **bindingType**: [`ComponentPropertyBindType`](../type-aliases/ComponentPropertyBindType.md) The component property binding type. *** ### calculable > `readonly` **calculable**: `boolean` = `true` True if the property value can be a calculated property, false otherwise. *** ### default? > `readonly` `optional` **default**: `any` The default property value. *** ### disabled > `readonly` **disabled**: `boolean` = `false` True if the property value controls a disabled flag, false otherwise. *** ### editor > `readonly` **editor**: `string` The name of the component's property editor. *** ### editorProps? > `readonly` `optional` **editorProps**: `any` Additional properties for the component property editor. *** ### errorMap? > `readonly` `optional` **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) Message and/or error code for the validation function. *** ### hint? > `readonly` `optional` **hint**: `ReactNode` The hint for the component property. *** ### key > `readonly` **key**: `string` The component property key. *** ### localizable > `readonly` **localizable**: `boolean` = `false` True if the property value can be localized, false otherwise. *** ### name > `readonly` **name**: `string` The component property name. *** ### readOnly > `readonly` **readOnly**: `boolean` = `false` True if the property value controls a read-only flag, false otherwise. *** ### required > `readonly` **required**: `boolean` = `false` True if the component property is required, false otherwise. *** ### slotConditionBuilder()? > `readonly` `optional` **slotConditionBuilder**: (`props`) => `string` A function that returns a string containing the source code of the function to bind child components. #### Parameters • **props**: `any` the properties of the component, which are available only inside Form Builder Designer. #### Returns `string` *** ### type? > `readonly` `optional` **type**: keyof SchemaTypeMap The data type for the value of the property. *** ### uncontrolledValue? > `readonly` `optional` **uncontrolledValue**: `unknown` The property value for the uncontrolled state. *** ### validator? > `readonly` `optional` **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md) The function for validating the property value. *** ### valued > `readonly` **valued**: `boolean` = `false` True if the property value is bound to form data, false otherwise. ## Methods ### clone() > **clone**(): `any` #### Returns `any` the metadata clone. --- # Class: AnnotationBuilder\ The builder class to define the metadata property of the form builder component. ## Extends - [`BaseBuilder`](BaseBuilder.md)\<`T`\> ## Extended by - [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md) ## Type Parameters • **T** the property type. ## Constructors ### new AnnotationBuilder() > **new AnnotationBuilder**\<`T`\>(`editor`): [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> Creates a component property metadata builder. #### Parameters • **editor**: `string` the property editor type. #### Returns [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> #### Overrides [`BaseBuilder`](BaseBuilder.md).[`constructor`](BaseBuilder.md#constructors) ## Properties ### annotation > **annotation**: [`PreAnnotation`](../type-aliases/PreAnnotation.md) Partial metadata for a component property. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`annotation`](BaseBuilder.md#annotation) *** ### options > **options**: [`BuilderOptions`](BuilderOptions.md) Options for building an annotation. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`options`](BaseBuilder.md#options) ## Accessors ### array #### Get Signature > **get** **array**(): [`ArrayBuilder`](ArrayBuilder.md)\<`undefined` \| `T`[]\> Sets the property as a "array" property. ##### Returns [`ArrayBuilder`](ArrayBuilder.md)\<`undefined` \| `T`[]\> the instance of the metadata property builder. *** ### localize #### Get Signature > **get** **localize**(): `this` ##### Returns `this` the component property that can be localized. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`localize`](BaseBuilder.md#localize) *** ### notLocalize #### Get Signature > **get** **notLocalize**(): `this` ##### Returns `this` the non-localizable component property. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`notLocalize`](BaseBuilder.md#notlocalize) *** ### valued #### Get Signature > **get** **valued**(): `this` ##### Returns `this` the main component property that is used as form data and for validation rules. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`valued`](BaseBuilder.md#valued) ## Methods ### build() > **build**(`key`): [`Annotation`](Annotation.md) Creates component property metadata for the form builder. #### Parameters • **key**: `string` the unique key of the component property. #### Returns [`Annotation`](Annotation.md) the instance of the component property metadata for the form builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`build`](BaseBuilder.md#build) *** ### calculable() > **calculable**(`calculable`): [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> Marks the component property as calculable. #### Parameters • **calculable**: `boolean` true if the property is calculable. #### Returns [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`calculable`](BaseBuilder.md#calculable) *** ### clone() > **clone**(): `this` Clones the instance of the builder. #### Returns `this` the cloned instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`clone`](BaseBuilder.md#clone) *** ### getName() > `protected` **getName**(`key`): `string` Returns the annotation name. #### Parameters • **key**: `string` the property name #### Returns `string` the annotation name. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`getName`](BaseBuilder.md#getname) *** ### hideEditor() > **hideEditor**(): `this` Hides the component property editor. #### Returns `this` the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`hideEditor`](BaseBuilder.md#hideeditor) *** ### hinted() > **hinted**(`hint`): [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> Adds the hint to the property name of the component. #### Parameters • **hint**: `ReactNode` the hint. #### Returns [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`hinted`](BaseBuilder.md#hinted) *** ### named() > **named**(`name`): [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> Specifies the name of the component property. #### Parameters • **name**: `string` the property name. #### Returns [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`named`](BaseBuilder.md#named) *** ### oneOf() > **oneOf**\<`U`\>(...`values`): [`OneOfBuilder`](OneOfBuilder.md)\<`U`\> Sets the property as a "single select" property. #### Type Parameters • **U** *extends* `string` \| `number` #### Parameters • ...**values**: `U`[] the possible values for the property. #### Returns [`OneOfBuilder`](OneOfBuilder.md)\<`U`\> the instance of the metadata property builder. *** ### setup() > **setup**(`options`): `this` Modifies the component property metadata builder with custom options. #### Parameters • **options**: `Partial`\<`Partial`\<`Omit`\<[`Annotation`](Annotation.md), `"key"`\>\> & `Pick`\<[`Annotation`](Annotation.md), `"editor"`\> & [`BuilderOptions`](BuilderOptions.md)\> the custom options. #### Returns `this` the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`setup`](BaseBuilder.md#setup) *** ### someOf() > **someOf**\<`U`\>(...`values`): [`SomeOfBuilder`](SomeOfBuilder.md)\<`U`\> Sets the property as a "multiple select" property. #### Type Parameters • **U** *extends* `string` \| `number` #### Parameters • ...**values**: `U`[] the possible values for the property. #### Returns [`SomeOfBuilder`](SomeOfBuilder.md)\<`U`\> the instance of the metadata property builder. *** ### typed() > **typed**\<`T`\>(`type`): [`TypedBuilder`](TypedBuilder.md)\<`undefined` \| [`SchemaTypeMap`](../type-aliases/SchemaTypeMap.md)\[`T`\]\> Sets the field type for the component property. #### Type Parameters • **T** *extends* keyof [`SchemaTypeMap`](../type-aliases/SchemaTypeMap.md) #### Parameters • **type**: `T` the field type. #### Returns [`TypedBuilder`](TypedBuilder.md)\<`undefined` \| [`SchemaTypeMap`](../type-aliases/SchemaTypeMap.md)\[`T`\]\> the instance of the metadata property builder. *** ### uncontrolledValue() > **uncontrolledValue**(`uncontrolledValue`): [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> Sets the value for the property that prevents uncontrolled state. #### Parameters • **uncontrolledValue**: `unknown` the value for the uncontrolled state. #### Returns [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`uncontrolledValue`](BaseBuilder.md#uncontrolledvalue) *** ### withEditorProps() > **withEditorProps**(`props`): `this` Sets custom properties for the component's property editor. #### Parameters • **props**: `any` the custom properties #### Returns `this` the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`withEditorProps`](BaseBuilder.md#witheditorprops) *** ### create() > `static` **create**\<`T`\>(`editor`): [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> Creates a component property metadata builder. #### Type Parameters • **T** the property type. #### Parameters • **editor**: `string` the property editor type. #### Returns [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> the component property metadata builder. --- # Class: ArrayBuilder\ The builder class to define the metadata property of the form builder component. Used for properties where the property value is an array. ## Extends - [`TypedBuilder`](TypedBuilder.md)\<`T`\> ## Type Parameters • **T** the property type. ## Constructors ### new ArrayBuilder() > **new ArrayBuilder**\<`T`\>(): [`ArrayBuilder`](ArrayBuilder.md)\<`T`\> #### Returns [`ArrayBuilder`](ArrayBuilder.md)\<`T`\> #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`constructor`](TypedBuilder.md#constructors) ## Properties ### annotation > **annotation**: [`PreAnnotation`](../type-aliases/PreAnnotation.md) Partial metadata for a component property. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`annotation`](TypedBuilder.md#annotation) *** ### options > **options**: [`BuilderOptions`](BuilderOptions.md) Options for building an annotation. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`options`](TypedBuilder.md#options) *** ### subType? > `optional` **subType**: keyof SchemaTypeMap ## Accessors ### localize #### Get Signature > **get** **localize**(): `this` ##### Returns `this` the component property that can be localized. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`localize`](TypedBuilder.md#localize) *** ### notLocalize #### Get Signature > **get** **notLocalize**(): `this` ##### Returns `this` the non-localizable component property. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`notLocalize`](TypedBuilder.md#notlocalize) *** ### ofObject #### Get Signature > **get** **ofObject**(): [`ArrayBuilder`](ArrayBuilder.md)\<`undefined` \| `object`[]\> Sets the component's value type to an array of objects. ##### Returns [`ArrayBuilder`](ArrayBuilder.md)\<`undefined` \| `object`[]\> the modified instance of the builder. *** ### ofString #### Get Signature > **get** **ofString**(): [`ArrayBuilder`](ArrayBuilder.md)\<`undefined` \| `string`[]\> Sets the component's value type to an array of strings. ##### Returns [`ArrayBuilder`](ArrayBuilder.md)\<`undefined` \| `string`[]\> the modified instance of the builder. *** ### required #### Get Signature > **get** **required**(): [`TypedBuilder`](TypedBuilder.md)\<`NonNullable`\<`T`\>\> Marks the component property as required. ##### Returns [`TypedBuilder`](TypedBuilder.md)\<`NonNullable`\<`T`\>\> the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`required`](TypedBuilder.md#required) *** ### valued #### Get Signature > **get** **valued**(): `this` ##### Returns `this` the main component property that is used as form data and for validation rules. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`valued`](TypedBuilder.md#valued) ## Methods ### build() > **build**(`key`): [`Annotation`](Annotation.md) Creates component property metadata for the form builder. #### Parameters • **key**: `string` the unique key of the component property. #### Returns [`Annotation`](Annotation.md) the instance of the component property metadata for the form builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`build`](TypedBuilder.md#build) *** ### calculable() > **calculable**(`calculable`): [`ArrayBuilder`](ArrayBuilder.md)\<`T`\> Marks the component property as calculable. #### Parameters • **calculable**: `boolean` true if the property is calculable. #### Returns [`ArrayBuilder`](ArrayBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`calculable`](TypedBuilder.md#calculable) *** ### clone() > **clone**(): `this` Clones the instance of the builder. #### Returns `this` the cloned instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`clone`](TypedBuilder.md#clone) *** ### default() > **default**(`value`): `this` Sets the default value for the component property. #### Parameters • **value**: `T` the default value. #### Returns `this` the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`default`](TypedBuilder.md#default) *** ### getName() > `protected` **getName**(`key`): `string` Returns the annotation name. #### Parameters • **key**: `string` the property name #### Returns `string` the annotation name. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`getName`](TypedBuilder.md#getname) *** ### hideEditor() > **hideEditor**(): `this` Hides the component property editor. #### Returns `this` the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`hideEditor`](TypedBuilder.md#hideeditor) *** ### hinted() > **hinted**(`hint`): [`ArrayBuilder`](ArrayBuilder.md)\<`T`\> Adds the hint to the property name of the component. #### Parameters • **hint**: `ReactNode` the hint. #### Returns [`ArrayBuilder`](ArrayBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`hinted`](TypedBuilder.md#hinted) *** ### named() > **named**(`name`): [`ArrayBuilder`](ArrayBuilder.md)\<`T`\> Specifies the name of the component property. #### Parameters • **name**: `string` the property name. #### Returns [`ArrayBuilder`](ArrayBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`named`](TypedBuilder.md#named) *** ### setup() > **setup**(`options`): `this` Modifies the component property metadata builder with custom options. #### Parameters • **options**: `Partial`\<`Partial`\<`Omit`\<[`Annotation`](Annotation.md), `"key"`\>\> & `Pick`\<[`Annotation`](Annotation.md), `"editor"`\> & [`BuilderOptions`](BuilderOptions.md)\> the custom options. #### Returns `this` the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`setup`](TypedBuilder.md#setup) *** ### uncontrolledValue() > **uncontrolledValue**(`uncontrolledValue`): [`ArrayBuilder`](ArrayBuilder.md)\<`T`\> Sets the value for the property that prevents uncontrolled state. #### Parameters • **uncontrolledValue**: `unknown` the value for the uncontrolled state. #### Returns [`ArrayBuilder`](ArrayBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`uncontrolledValue`](TypedBuilder.md#uncontrolledvalue) *** ### validated() > **validated**(`validator`, `errorMap`): `this` Modifies the component property metadata builder with validation properties. #### Parameters • **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md)\<`T`\> the validation function. • **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) the validation error settings. #### Returns `this` the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`validated`](TypedBuilder.md#validated) *** ### withEditorProps() > **withEditorProps**(`props`): `this` Sets custom properties for the component's property editor. #### Parameters • **props**: `any` the custom properties #### Returns `this` the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`withEditorProps`](TypedBuilder.md#witheditorprops) --- # Class: BaseBuilder\ The base builder class to define the metadata property of the form builder component. ## Extended by - [`AnnotationBuilder`](AnnotationBuilder.md) - [`TypedBuilder`](TypedBuilder.md) ## Type Parameters • **T** the property type. ## Constructors ### new BaseBuilder() > **new BaseBuilder**\<`T`\>(): [`BaseBuilder`](BaseBuilder.md)\<`T`\> #### Returns [`BaseBuilder`](BaseBuilder.md)\<`T`\> ## Properties ### annotation > **annotation**: [`PreAnnotation`](../type-aliases/PreAnnotation.md) Partial metadata for a component property. *** ### options > **options**: [`BuilderOptions`](BuilderOptions.md) Options for building an annotation. ## Accessors ### localize #### Get Signature > **get** **localize**(): `this` ##### Returns `this` the component property that can be localized. *** ### notLocalize #### Get Signature > **get** **notLocalize**(): `this` ##### Returns `this` the non-localizable component property. *** ### valued #### Get Signature > **get** **valued**(): `this` ##### Returns `this` the main component property that is used as form data and for validation rules. ## Methods ### build() > **build**(`key`): [`Annotation`](Annotation.md) Creates component property metadata for the form builder. #### Parameters • **key**: `string` the unique key of the component property. #### Returns [`Annotation`](Annotation.md) the instance of the component property metadata for the form builder. *** ### calculable() > **calculable**(`calculable`): [`BaseBuilder`](BaseBuilder.md)\<`T`\> Marks the component property as calculable. #### Parameters • **calculable**: `boolean` true if the property is calculable. #### Returns [`BaseBuilder`](BaseBuilder.md)\<`T`\> the modified instance of the builder. *** ### clone() > **clone**(): `this` Clones the instance of the builder. #### Returns `this` the cloned instance of the builder. *** ### getName() > `protected` **getName**(`key`): `string` Returns the annotation name. #### Parameters • **key**: `string` the property name #### Returns `string` the annotation name. *** ### hideEditor() > **hideEditor**(): `this` Hides the component property editor. #### Returns `this` the modified instance of the builder. *** ### hinted() > **hinted**(`hint`): [`BaseBuilder`](BaseBuilder.md)\<`T`\> Adds the hint to the property name of the component. #### Parameters • **hint**: `ReactNode` the hint. #### Returns [`BaseBuilder`](BaseBuilder.md)\<`T`\> the modified instance of the builder. *** ### named() > **named**(`name`): [`BaseBuilder`](BaseBuilder.md)\<`T`\> Specifies the name of the component property. #### Parameters • **name**: `string` the property name. #### Returns [`BaseBuilder`](BaseBuilder.md)\<`T`\> the modified instance of the builder. *** ### setup() > **setup**(`options`): `this` Modifies the component property metadata builder with custom options. #### Parameters • **options**: `Partial`\<`Partial`\<`Omit`\<[`Annotation`](Annotation.md), `"key"`\>\> & `Pick`\<[`Annotation`](Annotation.md), `"editor"`\> & [`BuilderOptions`](BuilderOptions.md)\> the custom options. #### Returns `this` the modified instance of the builder. *** ### uncontrolledValue() > **uncontrolledValue**(`uncontrolledValue`): [`BaseBuilder`](BaseBuilder.md)\<`T`\> Sets the value for the property that prevents uncontrolled state. #### Parameters • **uncontrolledValue**: `unknown` the value for the uncontrolled state. #### Returns [`BaseBuilder`](BaseBuilder.md)\<`T`\> the modified instance of the builder. *** ### withEditorProps() > **withEditorProps**(`props`): `this` Sets custom properties for the component's property editor. #### Parameters • **props**: `any` the custom properties #### Returns `this` the modified instance of the builder. --- # Class: BuilderOptions Options for building an annotation. ## Constructors ### new BuilderOptions() > **new BuilderOptions**(): [`BuilderOptions`](BuilderOptions.md) #### Returns [`BuilderOptions`](BuilderOptions.md) ## Properties ### annotationType > **annotationType**: [`AnnotationType`](../type-aliases/AnnotationType.md) = `'Module'` Type of component property description in the form builder. *** ### autoName > **autoName**: `boolean` = `true` Flag if true, the property name will be automatically converted in the designer from a camel case string to a human-readable string. --- # Class: BuilderView Represents all the metadata of the form builder components. ## Extends - [`View`](View.md) ## Constructors ### new BuilderView() > **new BuilderView**(`builderComponents`): [`BuilderView`](BuilderView.md) Creates metadata for form builder components. #### Parameters • **builderComponents**: [`BuilderComponent`](../interfaces/BuilderComponent.md)[] the array of metadata of form builder components. #### Returns [`BuilderView`](BuilderView.md) #### Overrides [`View`](View.md).[`constructor`](View.md#constructors) ## Properties ### builderComponents > **builderComponents**: [`BuilderComponent`](../interfaces/BuilderComponent.md)[] the array of metadata of form builder components. ## Accessors ### errors #### Get Signature > **get** **errors**(): `string`[] ##### Returns `string`[] the array of strings with the names of the component types of the error. *** ### tooltips #### Get Signature > **get** **tooltips**(): `string`[] ##### Returns `string`[] the array of strings with the names of the component types of the tooltip. *** ### viewerWrappers #### Get Signature > **get** **viewerWrappers**(): [`FormViewerWrapper`](../type-aliases/FormViewerWrapper.md)[] Retrieves the viewer wrappers array. ##### Returns [`FormViewerWrapper`](../type-aliases/FormViewerWrapper.md)[] the viewer wrappers array. #### Inherited from [`View`](View.md).[`viewerWrappers`](View.md#viewerwrappers) ## Methods ### addComponent() > **addComponent**(`component`): `void` Adds the component metadata to the form builder. #### Parameters • **component**: [`BuilderComponent`](../interfaces/BuilderComponent.md) the component metadata. #### Returns `void` *** ### all() > **all**(): [`Model`](Model.md)\<`any`\>[] #### Returns [`Model`](Model.md)\<`any`\>[] all component metadata for the form viewer. #### Inherited from [`View`](View.md).[`all`](View.md#all) *** ### define() > **define**(`model`): `void` Defines the component's metadata for the form viewer. #### Parameters • **model**: [`Model`](Model.md)\<`any`\> the component's metadata. #### Returns `void` #### Inherited from [`View`](View.md).[`define`](View.md#define) *** ### find() > **find**(`type`): `undefined` \| [`Model`](Model.md)\<`any`\> Returns the component's metadata for the form viewer for the specified type. #### Parameters • **type**: `string` the component type. #### Returns `undefined` \| [`Model`](Model.md)\<`any`\> the component metadata for the form viewer for the specified type or undefined. #### Inherited from [`View`](View.md).[`find`](View.md#find) *** ### findMeta() > **findMeta**(`type`): `undefined` \| [`Meta`](Meta.md) Returns the component metadata for the specified component type name or undefined. #### Parameters • **type**: `string` the component type name. #### Returns `undefined` \| [`Meta`](Meta.md) the component metadata for the specified component type name or undefined. *** ### get() > **get**(`type`): [`Model`](Model.md)\<`any`\> Returns the component's metadata for the form viewer for the specified type. #### Parameters • **type**: `string` the component type. #### Returns [`Model`](Model.md)\<`any`\> the component metadata for the form viewer for the specified type. #### Inherited from [`View`](View.md).[`get`](View.md#get) *** ### getCssLoaders() > **getCssLoaders**(`biDi`): () => `Promise`\<`void`\>[] Retrieves the CSS loaders for a given BiDi. #### Parameters • **biDi**: [`BiDi`](../enumerations/BiDi.md) the BiDi object for which to retrieve the CSS loaders. #### Returns () => `Promise`\<`void`\>[] the array containing the CSS loaders for the specified BiDi. #### Inherited from [`View`](View.md).[`getCssLoaders`](View.md#getcssloaders) *** ### getErrorAnnotations() > **getErrorAnnotations**(`name`): `undefined` \| [`Annotation`](Annotation.md)[] Returns the array of metadata properties of the error component. #### Parameters • **name**: `string` the name of the error component type. #### Returns `undefined` \| [`Annotation`](Annotation.md)[] the array of metadata properties of the error component. *** ### getMeta() > **getMeta**(`type`): [`Meta`](Meta.md) Returns the component metadata for the specified component type name. #### Parameters • **type**: `string` the component type name. #### Returns [`Meta`](Meta.md) the component metadata for the specified component type name. *** ### getTooltipAnnotations() > **getTooltipAnnotations**(`name`): `undefined` \| [`Annotation`](Annotation.md)[] Returns the array of metadata properties of the tooltip component. #### Parameters • **name**: `string` the name of the tooltip component type. #### Returns `undefined` \| [`Annotation`](Annotation.md)[] the array of metadata properties of the tooltip component. *** ### removeComponent() > **removeComponent**(`name`): `void` Removes the component metadata from the form builder. #### Parameters • **name**: `string` the component type name. #### Returns `void` *** ### withCssLoader() > **withCssLoader**(`cssLoaderType`, `loader`): [`BuilderView`](BuilderView.md) Applies the given CSS loader to the component based on the BiDi layout. #### Parameters • **cssLoaderType**: [`CssLoaderType`](../type-aliases/CssLoaderType.md) the BiDi layout type, either 'common', 'ltr', or 'rtl'. • **loader** the function that returns a Promise to load CSS or other required localization resources. #### Returns [`BuilderView`](BuilderView.md) the [View](View.md) instance. #### Inherited from [`View`](View.md).[`withCssLoader`](View.md#withcssloader) *** ### withErrorMeta() > **withErrorMeta**(`builderComponent`): `this` Sets the metadata of the component that displays form's errors. #### Parameters • **builderComponent**: [`BuilderComponent`](../interfaces/BuilderComponent.md) the metadata of the component that displays the form's errors. #### Returns `this` the instance of the [BuilderView](BuilderView.md) class. *** ### withTemplates() > **withTemplates**(`templates`): `this` Creates metadata for the form builder for templates from the specified template names. #### Parameters • **templates**: `string`[] the array of template names. #### Returns `this` the instance of the [BuilderView](BuilderView.md) class. *** ### withTooltipMeta() > **withTooltipMeta**(`builderComponent`): `this` Sets the metadata of the component that displays the form's tooltips. #### Parameters • **builderComponent**: [`BuilderComponent`](../interfaces/BuilderComponent.md) the metadata of the component that displays the form's tooltips. #### Returns `this` the instance of the [BuilderView](BuilderView.md) class. *** ### withViewerWrapper() > **withViewerWrapper**(`wrapper`): [`BuilderView`](BuilderView.md) Adds a wrapper to the list of viewers for this viewer wrapper. #### Parameters • **wrapper**: [`FormViewerWrapper`](../type-aliases/FormViewerWrapper.md) the viewer wrapper to be added. The wrapper is a component that wraps the form viewer. #### Returns [`BuilderView`](BuilderView.md) the [View](View.md) instance. #### Inherited from [`View`](View.md).[`withViewerWrapper`](View.md#withviewerwrapper) *** ### create() > `static` **create**(`models`): [`View`](View.md) Static wrapper for the [View](View.md) constructor. #### Parameters • **models**: [`Model`](Model.md)\<`any`\>[] the components metadata. #### Returns [`View`](View.md) the [View](View.md) instance. #### Inherited from [`View`](View.md).[`create`](View.md#create) *** ### createTemplateComponent() > `static` **createTemplateComponent**(`name`): [`BuilderComponent`](../interfaces/BuilderComponent.md) Creates an instance of BuilderComponent for the specified template name. #### Parameters • **name**: `string` the template name #### Returns [`BuilderComponent`](../interfaces/BuilderComponent.md) the BuilderComponent instance. --- # Class: CalculableResult Calculable result. ## Constructors ### new CalculableResult() > **new CalculableResult**(`error`, `result`?, `exceptions`?, `warning`?): [`CalculableResult`](CalculableResult.md) Constructor. #### Parameters • **error**: `boolean` = `false` the error. • **result?**: `any` the result. • **exceptions?**: `Error`[] the exceptions. • **warning?**: `boolean` the warning. #### Returns [`CalculableResult`](CalculableResult.md) ## Properties ### error > `readonly` **error**: `boolean` = `false` the error. *** ### exceptions? > `readonly` `optional` **exceptions**: `Error`[] the exceptions. *** ### result? > `readonly` `optional` **result**: `any` the result. *** ### warning? > `readonly` `optional` **warning**: `boolean` the warning. ## Methods ### error() > `static` **error**(`exceptions`): [`CalculableResult`](CalculableResult.md) Creates a new instance of CalculableResult class with an error. #### Parameters • **exceptions**: `Error`[] the exception array. #### Returns [`CalculableResult`](CalculableResult.md) the new instance of CalculableResult class. *** ### success() > `static` **success**(`result`): [`CalculableResult`](CalculableResult.md) Creates a new instance of the CalculableResult class with a successful result. #### Parameters • **result**: `any` the calculable result. #### Returns [`CalculableResult`](CalculableResult.md) the new instance of CalculableResult class. *** ### warning() > `static` **warning**(`result`): [`CalculableResult`](CalculableResult.md) Creates a new instance of the CalculableResult class with a warning result. #### Parameters • **result**: `any` the calculable result. #### Returns [`CalculableResult`](CalculableResult.md) the new instance of CalculableResult class. --- # Class: ComponentData This tree of elements contains the data required to display the component. It is synchronized with the ComponentStore tree. ## Implements - [`IFormData`](../interfaces/IFormData.md) ## Constructors ### new ComponentData() > **new ComponentData**(`componentStore`, `model`, `childFactory`, `getFormValidationResult`?): [`ComponentData`](ComponentData.md) Constructor. #### Parameters • **componentStore**: [`ComponentStore`](ComponentStore.md) the component settings. • **model**: [`Model`](Model.md)\<`any`\> the component metadata for the form viewer. • **childFactory** the factory function that creates [ComponentData](ComponentData.md) instance. • **getFormValidationResult?** the function that returns a form validation results. #### Returns [`ComponentData`](ComponentData.md) ## Properties ### children > **children**: [`ComponentData`](ComponentData.md)[] = `[]` The child nodes in the component data tree. *** ### componentState > **componentState**: [`IComponentState`](../interfaces/IComponentState.md) = `defaultComponentState` The state of the component. **Internal use only. *** ### dataRootProvider? > `optional` **dataRootProvider**: [`IDataRootProvider`](../interfaces/IDataRootProvider.md) Specifies the root component for the data in the component tree. **Internal use only.** *** ### field? > `optional` **field**: [`Field`](../interfaces/Field.md) The field with the form data. *** ### getInitialData()? > `optional` **getInitialData**: () => `unknown` The function for getting initial data. #### Returns `unknown` *** ### id > `readonly` **id**: `string` The unique identifier. *** ### index? > `optional` **index**: `number` Specifies the index in the array if the component is in the component array. This is not an index in a parent-child structure. #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`index`](../interfaces/IFormData.md#index) *** ### model > `readonly` **model**: [`Model`](Model.md)\<`any`\> The component metadata. *** ### parent? > `optional` **parent**: [`ComponentData`](ComponentData.md) The parent node in the component data tree. *** ### store > `readonly` **store**: [`ComponentStore`](ComponentStore.md) The component settings. *** ### userDefinedProps? > `optional` **userDefinedProps**: `Record`\<`string`, `any`\> User defined properties of the React component. *** ### validating > **validating**: `boolean` = `false` If true, then validation is in progress. ## Accessors ### allChildren #### Get Signature > **get** **allChildren**(): [`ComponentData`](ComponentData.md)[] ##### Returns [`ComponentData`](ComponentData.md)[] an array of all children components. *** ### allComponentFields #### Get Signature > **get** **allComponentFields**(): [`ComponentField`](../interfaces/ComponentField.md)[] ##### Returns [`ComponentField`](../interfaces/ComponentField.md)[] an array of all component fields, including non-unique data keys. *** ### allFields #### Get Signature > **get** **allFields**(): [`Field`](../interfaces/Field.md)[] ##### Returns [`Field`](../interfaces/Field.md)[] an array of all fields, including non-unique data keys. *** ### data #### Get Signature > **get** **data**(): `Record`\<`string`, `unknown`\> ##### Returns `Record`\<`string`, `unknown`\> the Record with all the form data. #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`data`](../interfaces/IFormData.md#data) *** ### dataRoot #### Get Signature > **get** **dataRoot**(): [`ComponentData`](ComponentData.md) ##### Returns [`ComponentData`](ComponentData.md) the root component for the data in the component tree. *** ### errors #### Get Signature > **get** **errors**(): `Record`\<`string`, `unknown`\> ##### Returns `Record`\<`string`, `unknown`\> the Record with all validation error messages. #### Set Signature > **set** **errors**(`errors`): `void` Sets the form error messages. ##### Parameters • **errors**: `Record`\<`string`, `unknown`\> ##### Returns `void` #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`errors`](../interfaces/IFormData.md#errors) *** ### events #### Get Signature > **get** **events**(): [`ComponentDataEvents`](ComponentDataEvents.md) ##### Returns [`ComponentDataEvents`](ComponentDataEvents.md) the ComponentDataEvents object. *** ### fields #### Get Signature > **get** **fields**(): `Map`\<`string`, [`Field`](../interfaces/Field.md)\> ##### Returns `Map`\<`string`, [`Field`](../interfaces/Field.md)\> all the fields in the tree as a map. Starts from this node. *** ### fluentData #### Get Signature > **get** **fluentData**(): `Record`\<`string`, `FluentVariable`\> ##### Returns `Record`\<`string`, `FluentVariable`\> all the form data that is of the FluentVariable type. Additionally, the keys of the returned object are converted to the snake case. #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`fluentData`](../interfaces/IFormData.md#fluentdata) *** ### hasErrors #### Get Signature > **get** **hasErrors**(): `boolean` true if the form contains errors, otherwise false. ##### Returns `boolean` #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`hasErrors`](../interfaces/IFormData.md#haserrors) *** ### initialData #### Get Signature > **get** **initialData**(): `unknown` ##### Returns `unknown` the initial data. *** ### isRoot #### Get Signature > **get** **isRoot**(): `boolean` ##### Returns `boolean` true if it has no parent [ComponentData](ComponentData.md), false otherwise. *** ### isValidating #### Get Signature > **get** **isValidating**(): `boolean` If true, then validation is in progress. ##### Returns `boolean` #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`isValidating`](../interfaces/IFormData.md#isvalidating) *** ### key #### Get Signature > **get** **key**(): `string` ##### Returns `string` the key of this node (same as the key of the ComponentStore). *** ### nearestIndex #### Get Signature > **get** **nearestIndex**(): `undefined` \| `number` ##### Returns `undefined` \| `number` the index in the array if the component is in the component array (looks for the nearest index in the component hierarchy). *** ### parentData #### Get Signature > **get** **parentData**(): `undefined` \| `Record`\<`string`, `unknown`\> ##### Returns `undefined` \| `Record`\<`string`, `unknown`\> the object to read and modify parent data (available for array elements). #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`parentData`](../interfaces/IFormData.md#parentdata) *** ### root #### Get Signature > **get** **root**(): [`ComponentData`](ComponentData.md) ##### Returns [`ComponentData`](ComponentData.md) the root of the component tree. *** ### rootData #### Get Signature > **get** **rootData**(): `Record`\<`string`, `unknown`\> ##### Returns `Record`\<`string`, `unknown`\> the object to read and modify root form data. #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`rootData`](../interfaces/IFormData.md#rootdata) *** ### state #### Get Signature > **get** **state**(): `Record`\<`string`, `unknown`\> ##### Returns `Record`\<`string`, `unknown`\> A user-defined key-value observable storage. Utilize it to store and share any custom data. #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`state`](../interfaces/IFormData.md#state) ## Methods ### clear() > **clear**(): `void` Clears the form data. #### Returns `void` #### Inherit Doc #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`clear`](../interfaces/IFormData.md#clear) *** ### delete() > **delete**(): `void` Deletes this node from the tree. #### Returns `void` *** ### dispose() > **dispose**(): `void` Dispose method that releases resources used by the object. It disposes the field and all the children objects. #### Returns `void` *** ### findByKey() > **findByKey**(`key`): `undefined` \| [`ComponentData`](ComponentData.md) Find the node with the given key. #### Parameters • **key**: `string` the key to find. #### Returns `undefined` \| [`ComponentData`](ComponentData.md) the node or undefined if not found. *** ### getValidationResult() > **getValidationResult**(): `Promise`\<`undefined`\> Returns the validation results without triggering an events and changing the state of the form. #### Returns `Promise`\<`undefined`\> the [ValidationMessages](../type-aliases/ValidationMessages.md) validation results. #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`getValidationResult`](../interfaces/IFormData.md#getvalidationresult) *** ### insertAfterMe() > **insertAfterMe**(`inserted`): `void` Inserts the given node after this node. #### Parameters • **inserted**: [`ComponentData`](ComponentData.md) the node to insert. #### Returns `void` *** ### insertBeforeMe() > **insertBeforeMe**(`inserted`): `void` Inserts the given node before this node. #### Parameters • **inserted**: [`ComponentData`](ComponentData.md) the node to insert. #### Returns `void` *** ### reset() > **reset**(): `void` Sets the form to its default value. #### Returns `void` #### Inherit Doc #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`reset`](../interfaces/IFormData.md#reset) *** ### setAllErrors() > **setAllErrors**(`message`?): `void` Sets the validation error message for all form data fields. #### Parameters • **message?**: `string` #### Returns `void` #### Inherit Doc #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`setAllErrors`](../interfaces/IFormData.md#setallerrors) *** ### setParent() > **setParent**(`newParent`): `void` Sets the new parent for this node. #### Parameters • **newParent**: [`ComponentData`](ComponentData.md) the new parent. #### Returns `void` *** ### unifyKeys() > **unifyKeys**(`root`): `Map`\<`string`, `string`\> Assigns unique keys to the items in the tree. #### Parameters • **root**: [`ComponentData`](ComponentData.md) the root of the tree to unify keys. Defaults to the root of this tree. #### Returns `Map`\<`string`, `string`\> the map of new keys to old keys. *** ### unifyTree() > **unifyTree**(): `void` Assigns unique keys to the items in the tree. #### Returns `void` *** ### validate() > **validate**(): `Promise`\<[`ValidationMessages`](../type-aliases/ValidationMessages.md)\> Validates the data in the form. #### Returns `Promise`\<[`ValidationMessages`](../type-aliases/ValidationMessages.md)\> the [ValidationMessages](../type-aliases/ValidationMessages.md) validation results. #### Implementation of [`IFormData`](../interfaces/IFormData.md).[`validate`](../interfaces/IFormData.md#validate) --- # Class: ComponentDataEvents Represents a class that holds events related to component data. ## Constructors ### new ComponentDataEvents() > **new ComponentDataEvents**(): [`ComponentDataEvents`](ComponentDataEvents.md) #### Returns [`ComponentDataEvents`](ComponentDataEvents.md) ## Properties ### onAfterKeyChanged > `readonly` **onAfterKeyChanged**: [`SyncEvent`](SyncEvent.md)\<[`ComponentData`](ComponentData.md), [`ComponentKeyChangedEventArgs`](ComponentKeyChangedEventArgs.md)\> An event that occurs after a component key change. *** ### onBeforeDelete > `readonly` **onBeforeDelete**: [`SyncEvent`](SyncEvent.md)\<[`ComponentData`](ComponentData.md), `undefined`\> An event that occurs before a component is removed from the component tree. ## Methods ### dispose() > **dispose**(): `void` Unsubscribe from all events. #### Returns `void` --- # Class: ComponentKeyChangedEventArgs Represents the event argument for the event when the component key changes. ## Constructors ### new ComponentKeyChangedEventArgs() > **new ComponentKeyChangedEventArgs**(`oldKey`, `newKey`): [`ComponentKeyChangedEventArgs`](ComponentKeyChangedEventArgs.md) Constructs a new instance of the ComponentKeyChangedEventArgs class. #### Parameters • **oldKey**: `string` the old key. • **newKey**: `string` the new key. #### Returns [`ComponentKeyChangedEventArgs`](ComponentKeyChangedEventArgs.md) ## Properties ### newKey > `readonly` **newKey**: `string` the new key. *** ### oldKey > `readonly` **oldKey**: `string` the old key. --- # Class: ComponentState Calculates all the properties of the form view component. ## Implements - [`IComponentState`](../interfaces/IComponentState.md) ## Constructors ### new ComponentState() > **new ComponentState**(`data`, `store`, `localizer`, `computeChildren`): [`ComponentState`](ComponentState.md) Creates an instance that calculates the properties of the form viewer component. #### Parameters • **data**: [`ComponentData`](ComponentData.md) the data needed to display the component. • **store**: [`Store`](Store.md) the form viewer settings. • **localizer**: [`ComponentStoreLocalizer`](../type-aliases/ComponentStoreLocalizer.md) the function to localize the properties of a component, returns a Record with localized properties. • **computeChildren**: [`ComputeChildren`](../type-aliases/ComputeChildren.md) the function that calculates all child properties of a component. #### Returns [`ComponentState`](ComponentState.md) ## Properties ### computeChildren > `readonly` **computeChildren**: [`ComputeChildren`](../type-aliases/ComputeChildren.md) the function that calculates all child properties of a component. *** ### data > `readonly` **data**: [`ComponentData`](ComponentData.md) the data needed to display the component. *** ### localizer > `readonly` **localizer**: [`ComponentStoreLocalizer`](../type-aliases/ComponentStoreLocalizer.md) the function to localize the properties of a component, returns a Record with localized properties. *** ### store > `readonly` **store**: [`Store`](Store.md) the form viewer settings. ## Accessors ### calculatedProps #### Get Signature > **get** **calculatedProps**(): `Record`\<`string`, `any`\> ##### Returns `Record`\<`string`, `any`\> the values for all properties of the component, calculates the values of the calculated properties. *** ### className #### Get Signature > **get** **className**(): `object` Calculates and returns className property. ##### Returns `object` the Record that contains the className property for the component. ###### className > **className**: `string` *** ### disabled #### Get Signature > **get** **disabled**(): `undefined` \| `object` ##### Returns `undefined` \| `object` the disabled property of a component if the component has a disabled flag. *** ### events #### Get Signature > **get** **events**(): `Record`\<`string`, `Function`\> ##### Returns `Record`\<`string`, `Function`\> the component event handlers that send events to the event bus. *** ### get #### Get Signature > **get** **get**(): `Record`\<`string`, `any`\> ##### Returns `Record`\<`string`, `any`\> combined in order of priority component properties. #### Implementation of [`IComponentState`](../interfaces/IComponentState.md).[`get`](../interfaces/IComponentState.md#get) *** ### htmlAttributes #### Get Signature > **get** **htmlAttributes**(): `undefined` \| [`HtmlAttribute`](../type-aliases/HtmlAttribute.md) ##### Returns `undefined` \| [`HtmlAttribute`](../type-aliases/HtmlAttribute.md) all arbitrary HTML attributes of the component. *** ### isDisabled #### Get Signature > **get** **isDisabled**(): `any` ##### Returns `any` true if the component has a disabled property and this property is true, false otherwise. #### Implementation of [`IComponentState`](../interfaces/IComponentState.md).[`isDisabled`](../interfaces/IComponentState.md#isdisabled) *** ### isReadOnly #### Get Signature > **get** **isReadOnly**(): `any` ##### Returns `any` true if the component has a read-only property and this property is true, false otherwise. #### Implementation of [`IComponentState`](../interfaces/IComponentState.md).[`isReadOnly`](../interfaces/IComponentState.md#isreadonly) *** ### localizedProps #### Get Signature > **get** **localizedProps**(): `Record`\<`string`, `any`\> ##### Returns `Record`\<`string`, `any`\> component localized properties. *** ### ownProps #### Get Signature > **get** **ownProps**(): `object` ##### Returns `object` combined in order of priority component properties without children props. ###### className > **className**: `string` #### Implementation of [`IComponentState`](../interfaces/IComponentState.md).[`ownProps`](../interfaces/IComponentState.md#ownprops) *** ### propsWithoutChildren #### Get Signature > **get** **propsWithoutChildren**(): `Record`\<`string`, `any`\> ##### Returns `Record`\<`string`, `any`\> combined component properties in order of priority, excluding child components, the className property does not contain styles additionally defined for the component. #### Implementation of [`IComponentState`](../interfaces/IComponentState.md).[`propsWithoutChildren`](../interfaces/IComponentState.md#propswithoutchildren) *** ### readOnly #### Get Signature > **get** **readOnly**(): `undefined` \| `object` ##### Returns `undefined` \| `object` the read-only property of a component if the component has a read-only flag. *** ### value #### Get Signature > **get** **value**(): `undefined` \| `object` ##### Returns `undefined` \| `object` the component's field value data, if the component can have a field value. *** ### wrapperClassName #### Get Signature > **get** **wrapperClassName**(): `string` Calculates and returns wrapper className property. ##### Returns `string` the Record that contains the className property for the wrapper of component. #### Implementation of [`IComponentState`](../interfaces/IComponentState.md).[`wrapperClassName`](../interfaces/IComponentState.md#wrapperclassname) ## Methods ### children() > **children**(`props`): `Record`\<`string`, `any`\> Calculates and returns all child components. #### Parameters • **props**: `any` the React component properties. #### Returns `Record`\<`string`, `any`\> the Record that contains the child components of a component. *** ### onDidMount() > **onDidMount**(): `void` The method that is called when the component is mounted. #### Returns `void` #### Implementation of [`IComponentState`](../interfaces/IComponentState.md).[`onDidMount`](../interfaces/IComponentState.md#ondidmount) *** ### onWillUnmount() > **onWillUnmount**(): `void` The method that is called when the component is unmounted. #### Returns `void` #### Implementation of [`IComponentState`](../interfaces/IComponentState.md).[`onWillUnmount`](../interfaces/IComponentState.md#onwillunmount) --- # Class: ComponentStore Component settings for serialization in JSON. ## Constructors ### new ComponentStore() > **new ComponentStore**(`key`, `type`): [`ComponentStore`](ComponentStore.md) Creates the component settings. #### Parameters • **key**: `string` the React component key. • **type**: `string` the component type of the form viewer. #### Returns [`ComponentStore`](ComponentStore.md) ## Properties ### children? > `optional` **children**: [`ComponentStore`](ComponentStore.md)[] The array of child components. *** ### css? > `optional` **css**: [`Css`](../type-aliases/Css.md) The component CSS styles. *** ### dataKey? > `optional` **dataKey**: `string` The component data key. *** ### events? > `optional` **events**: `Record`\<`string`, [`ActionData`](../type-aliases/ActionData.md)[]\> The set of event handlers. *** ### htmlAttributes? > `optional` **htmlAttributes**: [`HtmlAttribute`](../type-aliases/HtmlAttribute.md)[] The set of arbitrary HTML attributes added to the component. *** ### key > **key**: `string` = `''` The React component key. *** ### props > **props**: `Record`\<`string`, [`ComponentProperty`](../interfaces/ComponentProperty.md)\> = `{}` The component properties. *** ### renderWhen? > `optional` **renderWhen**: [`ComponentProperty`](../interfaces/ComponentProperty.md) The expression or function to conditionally render a component. *** ### schema? > `optional` **schema**: [`BoundValueSchema`](../type-aliases/BoundValueSchema.md) The component value validation settings. *** ### slot? > `optional` **slot**: `string` The name of the occupied component property in the parent component. *** ### slotCondition? > `optional` **slotCondition**: `string` The condition for binding a child element to a parent element. *** ### tooltipProps? > `optional` **tooltipProps**: `Record`\<`string`, [`ComponentProperty`](../interfaces/ComponentProperty.md)\> The tooltip settings. *** ### type > **type**: `string` = `''` The component type of the form viewer. *** ### wrapperCss? > `optional` **wrapperCss**: [`Css`](../type-aliases/Css.md) The component wrapper CSS styles. ## Methods ### addEventHandler() > `static` **addEventHandler**(`store`, `eventName`, `data`): `void` Adds the event handler for component. #### Parameters • **store**: [`ComponentStore`](ComponentStore.md) the target [ComponentStore](ComponentStore.md). • **eventName**: `string` the target event name. • **data**: [`ActionData`](../type-aliases/ActionData.md) the [ActionData](../type-aliases/ActionData.md). #### Returns `void` *** ### createFromObject() > `static` **createFromObject**(`value`): `any` Correctly creates the [ComponentStore](ComponentStore.md) from deserialized data. #### Parameters • **value**: `any` the deserialized data. #### Returns `any` the component Store. --- # Class: ContainerAnnotation Metadata for the component container property for the form builder. The Container property of a component can contain other React components. ## Extends - [`Annotation`](Annotation.md) ## Constructors ### new ContainerAnnotation() > **new ContainerAnnotation**(`key`, `name`): [`ContainerAnnotation`](ContainerAnnotation.md) Creates metadata for a React component property. #### Parameters • **key**: `string` the property name. • **name**: `string` the human-readable property name. #### Returns [`ContainerAnnotation`](ContainerAnnotation.md) #### Inherited from [`Annotation`](Annotation.md).[`constructor`](Annotation.md#constructors) ## Properties ### bindingType? > `readonly` `optional` **bindingType**: [`ComponentPropertyBindType`](../type-aliases/ComponentPropertyBindType.md) The component property binding type. #### Inherited from [`Annotation`](Annotation.md).[`bindingType`](Annotation.md#bindingtype) *** ### calculable > `readonly` **calculable**: `boolean` = `true` True if the property value can be a calculated property, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`calculable`](Annotation.md#calculable) *** ### default? > `readonly` `optional` **default**: `any` The default property value. #### Inherited from [`Annotation`](Annotation.md).[`default`](Annotation.md#default) *** ### disabled > `readonly` **disabled**: `boolean` = `false` True if the property value controls a disabled flag, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`disabled`](Annotation.md#disabled) *** ### editor > `readonly` **editor**: `string` The name of the component's property editor. #### Inherited from [`Annotation`](Annotation.md).[`editor`](Annotation.md#editor) *** ### editorProps? > `readonly` `optional` **editorProps**: `any` Additional properties for the component property editor. #### Inherited from [`Annotation`](Annotation.md).[`editorProps`](Annotation.md#editorprops) *** ### errorMap? > `readonly` `optional` **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) Message and/or error code for the validation function. #### Inherited from [`Annotation`](Annotation.md).[`errorMap`](Annotation.md#errormap) *** ### hint? > `readonly` `optional` **hint**: `ReactNode` The hint for the component property. #### Inherited from [`Annotation`](Annotation.md).[`hint`](Annotation.md#hint) *** ### insertPredicate()? > `optional` **insertPredicate**: (`self`, `child`) => `boolean` The function that checks whether a child component can be inserted into a parent component. #### Parameters • **self**: [`ComponentData`](ComponentData.md) • **child**: [`ComponentData`](ComponentData.md) #### Returns `boolean` *** ### key > `readonly` **key**: `string` The component property key. #### Inherited from [`Annotation`](Annotation.md).[`key`](Annotation.md#key) *** ### localizable > `readonly` **localizable**: `boolean` = `false` True if the property value can be localized, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`localizable`](Annotation.md#localizable) *** ### name > `readonly` **name**: `string` The component property name. #### Inherited from [`Annotation`](Annotation.md).[`name`](Annotation.md#name) *** ### readOnly > `readonly` **readOnly**: `boolean` = `false` True if the property value controls a read-only flag, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`readOnly`](Annotation.md#readonly) *** ### required > `readonly` **required**: `boolean` = `false` True if the component property is required, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`required`](Annotation.md#required) *** ### slotConditionBuilder()? > `readonly` `optional` **slotConditionBuilder**: (`props`) => `string` A function that returns a string containing the source code of the function to bind child components. #### Parameters • **props**: `any` the properties of the component, which are available only inside Form Builder Designer. #### Returns `string` #### Inherited from [`Annotation`](Annotation.md).[`slotConditionBuilder`](Annotation.md#slotconditionbuilder) *** ### type? > `readonly` `optional` **type**: keyof SchemaTypeMap The data type for the value of the property. #### Inherited from [`Annotation`](Annotation.md).[`type`](Annotation.md#type) *** ### uncontrolledValue? > `readonly` `optional` **uncontrolledValue**: `unknown` The property value for the uncontrolled state. #### Inherited from [`Annotation`](Annotation.md).[`uncontrolledValue`](Annotation.md#uncontrolledvalue) *** ### validator? > `readonly` `optional` **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md) The function for validating the property value. #### Inherited from [`Annotation`](Annotation.md).[`validator`](Annotation.md#validator) *** ### valued > `readonly` **valued**: `boolean` = `false` True if the property value is bound to form data, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`valued`](Annotation.md#valued) ## Methods ### clone() > **clone**(): `any` #### Returns `any` the metadata clone. #### Inherited from [`Annotation`](Annotation.md).[`clone`](Annotation.md#clone) --- # Class: DataValidator Binds all parts of the validation and performs the validation. ## Methods ### dispose() > **dispose**(): `void` Releases allocated resources, must be used when destroying an object instance. #### Returns `void` *** ### getValidationResult() > **getValidationResult**(`value`): `Promise`\<`undefined` \| [`ValidationResult`](../type-aliases/ValidationResult.md)[]\> Returns the validation results without triggering an events and changing the state of the form. #### Parameters • **value**: `any` the validated value. #### Returns `Promise`\<`undefined` \| [`ValidationResult`](../type-aliases/ValidationResult.md)[]\> the validation results. *** ### sendValidationEvent() > **sendValidationEvent**(`value`): `void` Generates an event to perform validation. #### Parameters • **value**: `any` the validated value. #### Returns `void` *** ### validate() > **validate**(`value`): `Promise`\<`undefined` \| `string`\> Performs a validation of the value. #### Parameters • **value**: `any` the validated value. #### Returns `Promise`\<`undefined` \| `string`\> the Promise with the result of the validation. *** ### create() > `static` **create**\<`T`\>(`store`, `getFormData`, `resolver`, `args`, `setter`, `localizer`?): [`DataValidator`](DataValidator.md) Creates a DataValidator instance. #### Type Parameters • **T** the validation function factory arguments. #### Parameters • **store**: [`IStore`](../interfaces/IStore.md) the form viewer settings. • **getFormData** the function that returns a form data. • **resolver**: [`SchemaResolver`](../type-aliases/SchemaResolver.md)\<`T`\> the validation function factory. • **args**: `T` the validation function factory arguments. • **setter**: [`Setter`](../type-aliases/Setter.md)\<`undefined` \| `string`\> the callback function called to set a validation error. • **localizer?**: [`ErrorMessageLocalizer`](../type-aliases/ErrorMessageLocalizer.md) the function that localizes validation error messages. #### Returns [`DataValidator`](DataValidator.md) the DataValidator instance. --- # Class: Definer\ The builder class to define the metadata of the form builder component. ## Type Parameters • **T** *extends* `object` React component property type. ## Properties ### data > **data**: [`DefinerData`](../type-aliases/DefinerData.md)\<`T`\> Definer class data. #### Template React component property type. ## Methods ### actions() > **actions**(`fn`): [`Definer`](Definer.md)\<`T`\> Adds the metadata of the component's actions. **Internal use only.** #### Parameters • **fn**: [`ActionsInitializer`](../type-aliases/ActionsInitializer.md) the function that initializes an actions on a component. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### build() > **build**(): [`BuilderComponent`](../interfaces/BuilderComponent.md) Creates component metadata for the form builder and form viewer. #### Returns [`BuilderComponent`](../interfaces/BuilderComponent.md) component metadata for the form builder and form viewer. *** ### category() > **category**(`category`): [`Definer`](Definer.md)\<`T`\> Sets the category of the component. #### Parameters • **category**: `string` the component category. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### css() > **css**(`css`): [`Definer`](Definer.md)\<`T`\> Sets the component CSS metadata. #### Parameters • **css**: [`Annotations`](../type-aliases/Annotations.md)\<`CSSObject`\> the component CSS metadata. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### eventListeners() > **eventListeners**(`eventListeners`?): [`Definer`](Definer.md)\<`T`\> Sets the component metadata event listeners. #### Parameters • **eventListeners?**: [`ComponentMetadataEventListeners`](../interfaces/ComponentMetadataEventListeners.md) the component metadata event listeners. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### getType() > **getType**(): `string` #### Returns `string` the component type name. *** ### icon() > **icon**(`icon`): [`Definer`](Definer.md)\<`T`\> Sets the icon of the component. #### Parameters • **icon**: `ComponentType` the component icon. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### initialJson() > **initialJson**(`initialJson`?): [`Definer`](Definer.md)\<`T`\> Sets initial component JSON. #### Parameters • **initialJson?**: `string` the JSON source for the component (instance of [ComponentStore](ComponentStore.md) class serialised to JSON). #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### insertRestriction() > **insertRestriction**(`insertRestriction`?): [`Definer`](Definer.md)\<`T`\> Sets the function that restricts the insertion of a component into another component. #### Parameters • **insertRestriction?**: [`InsertRestrictionFn`](../type-aliases/InsertRestrictionFn.md) the function that restricts the insertion of a component into another component. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### kind() > **kind**(`kind`): [`Definer`](Definer.md)\<`T`\> Sets the kind of the component. #### Parameters • **kind**: [`ComponentKind`](../type-aliases/ComponentKind.md) the component kind. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### name() > **name**(`name`): [`Definer`](Definer.md)\<`T`\> Sets the name of the component. #### Parameters • **name**: `string` the component name. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### preview() > **preview**(`customPreview`): [`Definer`](Definer.md)\<`T`\> Adds the custom component to be displayed in the component list. **Internal use only.** #### Parameters • **customPreview**: `ReactNode` the custom component. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### props() > **props**(`properties`): [`Definer`](Definer.md)\<`T`\> Sets the metadata of the component's properties. #### Parameters • **properties**: [`Annotations`](../type-aliases/Annotations.md)\<`T`\> the metadata of the component's properties. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### type() > **type**(`type`): [`Definer`](Definer.md)\<`T`\> Sets the type of the component. #### Parameters • **type**: `string` the component type. #### Returns [`Definer`](Definer.md)\<`T`\> the modified Definer class instance. *** ### define() > `static` **define**\<`T`\>(`component`, `displayName`?): [`Definer`](Definer.md)\<`T`\> Static method to create an instance of the component's metadata builder class. #### Type Parameters • **T** *extends* `object` #### Parameters • **component**: `ComponentType`\<`T`\> the React component. • **displayName?**: `string` the display name for the anonymous component. #### Returns [`Definer`](Definer.md)\<`T`\> the instance of the [Definer](Definer.md) class. *** ### definePreset() > `static` **definePreset**(`name`, `components`): [`Definer`](Definer.md)\<`object`\> Static method to create an instance of the preset component's metadata builder class. #### Parameters • **name**: `string` the preset name. • **components**: [`ComponentStore`](ComponentStore.md)[] the components of the preset. #### Returns [`Definer`](Definer.md)\<`object`\> the instance of the [Definer](Definer.md) class. --- # Class: EventAnnotation Metadata for the component event property for the form builder. ## Extends - [`Annotation`](Annotation.md) ## Constructors ### new EventAnnotation() > **new EventAnnotation**(`key`, `name`): [`EventAnnotation`](EventAnnotation.md) Creates metadata for a React component property. #### Parameters • **key**: `string` the property name. • **name**: `string` the human-readable property name. #### Returns [`EventAnnotation`](EventAnnotation.md) #### Inherited from [`Annotation`](Annotation.md).[`constructor`](Annotation.md#constructors) ## Properties ### bindingType? > `readonly` `optional` **bindingType**: [`ComponentPropertyBindType`](../type-aliases/ComponentPropertyBindType.md) The component property binding type. #### Inherited from [`Annotation`](Annotation.md).[`bindingType`](Annotation.md#bindingtype) *** ### calculable > `readonly` **calculable**: `boolean` = `true` True if the property value can be a calculated property, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`calculable`](Annotation.md#calculable) *** ### default? > `readonly` `optional` **default**: `any` The default property value. #### Inherited from [`Annotation`](Annotation.md).[`default`](Annotation.md#default) *** ### disabled > `readonly` **disabled**: `boolean` = `false` True if the property value controls a disabled flag, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`disabled`](Annotation.md#disabled) *** ### editor > `readonly` **editor**: `string` The name of the component's property editor. #### Inherited from [`Annotation`](Annotation.md).[`editor`](Annotation.md#editor) *** ### editorProps? > `readonly` `optional` **editorProps**: `any` Additional properties for the component property editor. #### Inherited from [`Annotation`](Annotation.md).[`editorProps`](Annotation.md#editorprops) *** ### errorMap? > `readonly` `optional` **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) Message and/or error code for the validation function. #### Inherited from [`Annotation`](Annotation.md).[`errorMap`](Annotation.md#errormap) *** ### hint? > `readonly` `optional` **hint**: `ReactNode` The hint for the component property. #### Inherited from [`Annotation`](Annotation.md).[`hint`](Annotation.md#hint) *** ### key > `readonly` **key**: `string` The component property key. #### Inherited from [`Annotation`](Annotation.md).[`key`](Annotation.md#key) *** ### localizable > `readonly` **localizable**: `boolean` = `false` True if the property value can be localized, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`localizable`](Annotation.md#localizable) *** ### name > `readonly` **name**: `string` The component property name. #### Inherited from [`Annotation`](Annotation.md).[`name`](Annotation.md#name) *** ### readOnly > `readonly` **readOnly**: `boolean` = `false` True if the property value controls a read-only flag, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`readOnly`](Annotation.md#readonly) *** ### required > `readonly` **required**: `boolean` = `false` True if the component property is required, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`required`](Annotation.md#required) *** ### slotConditionBuilder()? > `readonly` `optional` **slotConditionBuilder**: (`props`) => `string` A function that returns a string containing the source code of the function to bind child components. #### Parameters • **props**: `any` the properties of the component, which are available only inside Form Builder Designer. #### Returns `string` #### Inherited from [`Annotation`](Annotation.md).[`slotConditionBuilder`](Annotation.md#slotconditionbuilder) *** ### type? > `readonly` `optional` **type**: keyof SchemaTypeMap The data type for the value of the property. #### Inherited from [`Annotation`](Annotation.md).[`type`](Annotation.md#type) *** ### uncontrolledValue? > `readonly` `optional` **uncontrolledValue**: `unknown` The property value for the uncontrolled state. #### Inherited from [`Annotation`](Annotation.md).[`uncontrolledValue`](Annotation.md#uncontrolledvalue) *** ### validator? > `readonly` `optional` **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md) The function for validating the property value. #### Inherited from [`Annotation`](Annotation.md).[`validator`](Annotation.md#validator) *** ### valued > `readonly` **valued**: `boolean` = `false` True if the property value is bound to form data, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`valued`](Annotation.md#valued) ## Methods ### clone() > **clone**(): `any` #### Returns `any` the metadata clone. #### Inherited from [`Annotation`](Annotation.md).[`clone`](Annotation.md#clone) --- # Class: Form Represents a form that is rendered in Viewer or edited in Builder. ## Constructors ### new Form() > **new Form**(`componentTree`, `localization`, `actions`, `languages`, `defaultLanguage`): [`Form`](Form.md) Creates a new instance of Form. #### Parameters • **componentTree**: [`ComponentData`](ComponentData.md) the root component of the form. • **localization**: [`LocalizationStore`](LocalizationStore.md) the localization of the form. • **actions**: [`ActionValues`](../type-aliases/ActionValues.md) the form custom actions. • **languages**: [`Language`](Language.md)[] the localization languages of the form. • **defaultLanguage**: [`Language`](Language.md) the default localization language of the form. #### Returns [`Form`](Form.md) ## Properties ### actions > `readonly` **actions**: [`ActionValues`](../type-aliases/ActionValues.md) The set of action definitions. *** ### componentTree > `readonly` **componentTree**: [`ComponentData`](ComponentData.md) Root component of the form. *** ### defaultLanguage > **defaultLanguage**: [`Language`](Language.md) Default localization language of the form. *** ### errorProps > **errorProps**: `any` = `{}` Properties of the component displaying the error. *** ### errorType? > `optional` **errorType**: `string` The type name of the component displaying the error. *** ### formValidator? > `optional` **formValidator**: `string` The form validator. *** ### languages > `readonly` **languages**: [`Language`](Language.md)[] = `[]` Localization languages of the form. *** ### localization > `readonly` **localization**: [`LocalizationStore`](LocalizationStore.md) Localization of the form. *** ### tooltipType? > `optional` **tooltipType**: `string` The type name of the component displaying the tooltip. ## Accessors ### actionNames #### Get Signature > **get** **actionNames**(): `string`[] ##### Returns `string`[] the actions names array. *** ### formValidatorFunction #### Get Signature > **get** **formValidatorFunction**(): `undefined` \| [`FormValidator`](../type-aliases/FormValidator.md) ##### Returns `undefined` \| [`FormValidator`](../type-aliases/FormValidator.md) the form validator function. ## Methods ### cloneAction() > **cloneAction**(`namedAction`): `void` Clones the action. #### Parameters • **namedAction**: [`NamedActionDefinition`](../type-aliases/NamedActionDefinition.md) the named action to clone. #### Returns `void` *** ### dispose() > **dispose**(): `void` Disposes the form. Disposes all the components and localization. #### Returns `void` *** ### initFields() > **initFields**(): `void` Initializes form fields. #### Returns `void` *** ### removeAction() > **removeAction**(`name`): `void` Removes the action from the form. #### Parameters • **name**: `string` the action name to remove. #### Returns `void` *** ### updateOrAddAction() > **updateOrAddAction**(`oldActionName`, `newAction`): `void` Changes the existing action to the new one, adds the action if the existing action is not found. #### Parameters • **oldActionName**: `string` the existing action name. • **newAction**: [`NamedActionDefinition`](../type-aliases/NamedActionDefinition.md) the new named action. #### Returns `void` --- # Class: FormViewerPropsStore Represents the props passed to the FormViewer Store. **Internal use only.** ## Constructors ### new FormViewerPropsStore() > **new FormViewerPropsStore**(`formViewerProps`?): [`FormViewerPropsStore`](FormViewerPropsStore.md) Constructs a new FormViewerPropsStore from the given FormViewerProps. #### Parameters • **formViewerProps?**: [`FormViewerProps`](../interfaces/FormViewerProps.md) the FormViewer props. #### Returns [`FormViewerPropsStore`](FormViewerPropsStore.md) the FormViewerPropsStore. ## Properties ### actions? > `optional` **actions**: [`ActionValues`](../type-aliases/ActionValues.md) Custom actions for the form viewer. *** ### disabled? > `optional` **disabled**: `boolean` If true, the form is disabled. *** ### errorWrapper? > `optional` **errorWrapper**: `ComponentType`\<[`ErrorWrapperProps`](../interfaces/ErrorWrapperProps.md)\> The default error wrapper used when errorType is not specified in the form. *** ### formValidators? > `optional` **formValidators**: [`FormValidators`](../type-aliases/FormValidators.md) The set of functions that validate the form data. *** ### initialData > **initialData**: `Record`\<`string`, `unknown`\> = `{}` The initial form data. *** ### localizer? > `optional` **localizer**: [`ComponentLocalizer`](../type-aliases/ComponentLocalizer.md) The function to localize the properties of a component. *** ### propsLanguage? > `optional` **propsLanguage**: \`$\{string\}-$\{string\}\` The full language code passed in the FormViewer properties, e.g. 'en-US'. *** ### readOnly? > `optional` **readOnly**: `boolean` If true, the form is read-only. *** ### showAllValidationErrors? > `optional` **showAllValidationErrors**: `boolean` If true, all validation errors will be displayed. *** ### validators? > `optional` **validators**: `Partial`\<`Record`\\> The set of metadata of validation rules, grouped by the type of value being validated. *** ### view > **view**: [`View`](View.md) The metadata of the form viewer components. ## Methods ### applyProps() > **applyProps**(`formViewerProps`): `void` Applies the given FormViewerProps. #### Parameters • **formViewerProps**: [`FormViewerProps`](../interfaces/FormViewerProps.md) the properties to apply. #### Returns `void` *** ### clone() > **clone**(): [`FormViewerPropsStore`](FormViewerPropsStore.md) Returns the clone of the FormViewerPropsStore object. #### Returns [`FormViewerPropsStore`](FormViewerPropsStore.md) the clone of the FormViewerPropsStore object. --- # Class: Language The language to localize the form builder. ## Constructors ### new Language() > **new Language**(`code`, `dialect`, `name`, `description`, `bidi`): [`Language`](Language.md) Creates a localization language for the form builder. #### Parameters • **code**: `string` the language code, for example, 'en'. • **dialect**: `string` the dialect code, for example, 'US'. • **name**: `string` the name of the language, for example 'English'. • **description**: `string` the description of the language, for example 'American English'. • **bidi**: [`BiDi`](../enumerations/BiDi.md) = `BiDi.LTR` the type of text layout, for example, BiDi.LTR. #### Returns [`Language`](Language.md) ## Properties ### bidi > `readonly` **bidi**: [`BiDi`](../enumerations/BiDi.md) = `BiDi.LTR` the type of text layout, for example, BiDi.LTR. *** ### code > `readonly` **code**: `string` the language code, for example, 'en'. *** ### description > `readonly` **description**: `string` the description of the language, for example 'American English'. *** ### dialect > `readonly` **dialect**: `string` the dialect code, for example, 'US'. *** ### name > `readonly` **name**: `string` the name of the language, for example 'English'. ## Accessors ### fullCode #### Get Signature > **get** **fullCode**(): \`$\{string\}-$\{string\}\` ##### Returns \`$\{string\}-$\{string\}\` Full code of the Language i.e en-US, en-GB etc. ## Methods ### clone() > `static` **clone**(`source`): [`Language`](Language.md) Clones an existing instance of the language. #### Parameters • **source**: [`Language`](Language.md) the cloning object. #### Returns [`Language`](Language.md) the object clone. --- # Class: LocalizationStore Observable storage of localization. **Internal use only.** ## Constructors ### new LocalizationStore() > **new LocalizationStore**(`value`): [`LocalizationStore`](LocalizationStore.md) The constructor. #### Parameters • **value**: [`LocalizationValue`](../type-aliases/LocalizationValue.md) = `{}` the initial localization value. #### Returns [`LocalizationStore`](LocalizationStore.md) ## Properties ### value > `readonly` **value**: [`LocalizationValue`](../type-aliases/LocalizationValue.md) = `{}` The localization data. ## Accessors ### langCodes #### Get Signature > **get** **langCodes**(): \`$\{string\}-$\{string\}\`[] ##### Returns \`$\{string\}-$\{string\}\`[] the available language codes. ## Methods ### addLocalizationWithNewKey() > **addLocalizationWithNewKey**(`localization`, `oldComponentKey`, `newComponentKey`): `void` Inserts the localization values for a given component key. Replaces the old component key with the new component key. #### Parameters • **localization**: [`LocalizationValue`](../type-aliases/LocalizationValue.md) the localization object for insertion. • **oldComponentKey**: `string` the old component key that needs to be replaced. • **newComponentKey**: `string` the new component key to be added. #### Returns `void` *** ### changeComponentKey() > **changeComponentKey**(`oldComponentKey`, `newComponentKey`): `void` Changes the component key for all languages in the value object. #### Parameters • **oldComponentKey**: `string` the old component key to be replaced. • **newComponentKey**: `string` the new component key to replace the old component key. #### Returns `void` *** ### getFluentBundle() > **getFluentBundle**(`languageFullCode`): `FluentBundle` If the FluentBundle for the specified language is found, this function returns it. Otherwise, an empty FluentBundle is returned. #### Parameters • **languageFullCode**: \`$\{string\}-$\{string\}\` the full code (en-US, en-GB etc.) of the language to get fluent bundle. #### Returns `FluentBundle` the FluentBundle for the specified language. *** ### getLocalization() > **getLocalization**(`languageFullCode`, `componentKey`, `propertyName`, `type`): `undefined` \| `string` Returns value of localization constant. #### Parameters • **languageFullCode**: \`$\{string\}-$\{string\}\` the full code (en-US, en-GB etc.) of the language we are looking to localize. • **componentKey**: `string` the component we are looking to localize. • **propertyName**: `string` the property name we are looking to localize. • **type**: `string` the type of localization. #### Returns `undefined` \| `string` the value of localization constant. *** ### getLocalizationForComponent() > **getLocalizationForComponent**(`componentKey`): [`LocalizationValue`](../type-aliases/LocalizationValue.md) Retrieves the localization values for a given component key. #### Parameters • **componentKey**: `string` the key of the component to retrieve localization for. #### Returns [`LocalizationValue`](../type-aliases/LocalizationValue.md) the object containing the localization values for the component in each supported language. *** ### hasLanguage() > **hasLanguage**(`languageFullCode`): `boolean` Checks that the specified language exists in the localization. #### Parameters • **languageFullCode**: \`$\{string\}-$\{string\}\` The full code (en-US, en-GB etc.) of the language to be checked. #### Returns `boolean` true if the specified language exists in the localization. *** ### hasLocalization() > **hasLocalization**(`componentKey`, `propertyName`, `type`): `boolean` Checks that the specified property has localization. #### Parameters • **componentKey**: `string` the component we are looking to localize. • **propertyName**: `string` the component's property name to be localized. • **type**: `string` the type of localization. #### Returns `boolean` true if the specified property has localization in at least one language. *** ### removeLocalization() > **removeLocalization**(`componentKey`): `void` Removes localization for component. #### Parameters • **componentKey**: `string` the component key that requires localization removal. #### Returns `void` *** ### removeLocalizationForType() > **removeLocalizationForType**(`componentKey`, `type`): `void` Removes localization for component with specified type. #### Parameters • **componentKey**: `string` the component key that requires localization removal. • **type**: `string` the localization type. #### Returns `void` *** ### setLocalization() > **setLocalization**(`languageFullCode`, `componentKey`, `propertyName`, `type`, `value`): `void` Sets localization for component property. #### Parameters • **languageFullCode**: \`$\{string\}-$\{string\}\` the full code (en-US, en-GB etc.) of the language in which localization will be set. • **componentKey**: `string` the component key that requires localization. • **propertyName**: `string` the component's property name to be localized. • **type**: `string` the type of localization. • **value**: `string` the localization value. #### Returns `void` --- # Class: Meta Component metadata for the form builder. ## Constructors ### new Meta() > **new Meta**(`type`, `properties`, `css`, `wrapperCss`, `modules`, `customPreview`?, `valuedAn`?, `kind`?, `initialJson`?, `eventListeners`?, `icon`?, `insertRestriction`?): [`Meta`](Meta.md) Creates the component metadata for the form builder. #### Parameters • **type**: `string` the component type name. • **properties**: [`Annotation`](Annotation.md)[] the component's properties metadata. • **css**: [`Annotation`](Annotation.md)[] the component's CSS metadata. • **wrapperCss**: [`Annotation`](Annotation.md)[] the component's wrapper CSS metadata. • **modules**: [`Annotation`](Annotation.md)[] common metadata for the component. • **customPreview?**: `ReactNode` the custom ReactNode to be drawn on the toolbar. • **valuedAn?**: [`Annotation`](Annotation.md) the metadata for the component value. • **kind?**: [`ComponentKind`](../type-aliases/ComponentKind.md) = `'component'` the component kind. • **initialJson?**: `string` the JSON source for the component (instance of [ComponentStore](ComponentStore.md) class serialised to JSON). • **eventListeners?**: [`ComponentMetadataEventListeners`](../interfaces/ComponentMetadataEventListeners.md) the component metadata event listeners. • **icon?**: `ComponentType` the component icon. • **insertRestriction?**: [`InsertRestrictionFn`](../type-aliases/InsertRestrictionFn.md) the function that restricts the insertion of a component into another component. #### Returns [`Meta`](Meta.md) ## Properties ### css > `readonly` **css**: [`Annotation`](Annotation.md)[] the component's CSS metadata. *** ### customPreview? > `readonly` `optional` **customPreview**: `ReactNode` the custom ReactNode to be drawn on the toolbar. *** ### eventListeners? > `readonly` `optional` **eventListeners**: [`ComponentMetadataEventListeners`](../interfaces/ComponentMetadataEventListeners.md) the component metadata event listeners. *** ### icon? > `readonly` `optional` **icon**: `ComponentType` the component icon. *** ### initialJson? > `readonly` `optional` **initialJson**: `string` the JSON source for the component (instance of [ComponentStore](ComponentStore.md) class serialised to JSON). *** ### insertRestriction? > `readonly` `optional` **insertRestriction**: [`InsertRestrictionFn`](../type-aliases/InsertRestrictionFn.md) the function that restricts the insertion of a component into another component. *** ### kind > `readonly` **kind**: [`ComponentKind`](../type-aliases/ComponentKind.md) = `'component'` the component kind. *** ### modules > `readonly` **modules**: [`Annotation`](Annotation.md)[] common metadata for the component. *** ### properties > `readonly` **properties**: [`Annotation`](Annotation.md)[] the component's properties metadata. *** ### type > `readonly` **type**: `string` the component type name. *** ### valuedAn? > `readonly` `optional` **valuedAn**: [`Annotation`](Annotation.md) the metadata for the component value. *** ### wrapperCss > `readonly` **wrapperCss**: [`Annotation`](Annotation.md)[] the component's wrapper CSS metadata. --- # Class: Model\ Represents component metadata for the form viewer. ## Type Parameters • **T** = `any` the type of React component properties. ## Constructors ### new Model() > **new Model**\<`T`\>(`component`, `name`?, `actionsInitializer`?, `valued`?, `valueType`?, `defaultProps`?, `css`?, `wrapperCss`?, `typeName`?, `kind`?, `readOnly`?, `propsBindingTypes`?, `uncontrolledValue`?, `disabled`?): [`Model`](Model.md)\<`T`\> Creates component metadata for the form viewer. #### Parameters • **component**: `ComponentType`\<`T`\> the React component. • **name?**: `string` the component name. • **actionsInitializer?**: [`ActionsInitializer`](../type-aliases/ActionsInitializer.md) the function to initialize actions in the component. • **valued?**: `string` the name of the component property where the component value is stored. • **valueType?**: keyof SchemaTypeMap the type of the component value. • **defaultProps?**: `Readonly`\<`Record`\<`string`, `any`\>\> the component's default property values. • **css?**: [`Css`](../type-aliases/Css.md) the component's CSS values. • **wrapperCss?**: [`Css`](../type-aliases/Css.md) the component's wrapper CSS values. • **typeName?**: `string` the component type name. • **kind?**: [`ComponentKind`](../type-aliases/ComponentKind.md) = `'component'` the component kind. • **readOnly?**: `string` the name of the component property that stores the read-only flag. • **propsBindingTypes?**: `Readonly`\<`Record`\<`string`, [`ComponentPropertyBindType`](../type-aliases/ComponentPropertyBindType.md)\>\> = `{}` the component property binding types. • **uncontrolledValue?**: `unknown` the value for the uncontrolled (undefined) state. • **disabled?**: `string` the name of the component property that stores the disabled flag. #### Returns [`Model`](Model.md)\<`T`\> ## Properties ### actionsInitializer? > `readonly` `optional` **actionsInitializer**: [`ActionsInitializer`](../type-aliases/ActionsInitializer.md) the function to initialize actions in the component. *** ### component > `readonly` **component**: `ComponentType`\<`T`\> The React component. *** ### css? > `readonly` `optional` **css**: [`Css`](../type-aliases/Css.md) the component's CSS values. *** ### defaultProps? > `readonly` `optional` **defaultProps**: `Readonly`\<`Record`\<`string`, `any`\>\> the component's default property values. *** ### disabled? > `readonly` `optional` **disabled**: `string` the name of the component property that stores the disabled flag. *** ### kind > `readonly` **kind**: [`ComponentKind`](../type-aliases/ComponentKind.md) = `'component'` the component kind. *** ### propsBindingTypes > `readonly` **propsBindingTypes**: `Readonly`\<`Record`\<`string`, [`ComponentPropertyBindType`](../type-aliases/ComponentPropertyBindType.md)\>\> = `{}` the component property binding types. *** ### readOnly? > `readonly` `optional` **readOnly**: `string` the name of the component property that stores the read-only flag. *** ### typeName? > `readonly` `optional` **typeName**: `string` the component type name. *** ### uncontrolledValue? > `readonly` `optional` **uncontrolledValue**: `unknown` the value for the uncontrolled (undefined) state. *** ### valueType? > `readonly` `optional` **valueType**: keyof SchemaTypeMap the type of the component value. *** ### valued? > `readonly` `optional` **valued**: `string` the name of the component property where the component value is stored. *** ### wrapperCss? > `readonly` `optional` **wrapperCss**: [`Css`](../type-aliases/Css.md) the component's wrapper CSS values. ## Accessors ### name #### Get Signature > **get** **name**(): `string` ##### Returns `string` the component name, or type if there is no component name. *** ### type #### Get Signature > **get** **type**(): `string` ##### Returns `string` the component type name. --- # Class: ModuleAnnotation Metadata for a component property that is not a property of the component itself, but is supplied by the form builder. ## Extends - [`Annotation`](Annotation.md) ## Constructors ### new ModuleAnnotation() > **new ModuleAnnotation**(`key`, `name`): [`ModuleAnnotation`](ModuleAnnotation.md) Creates metadata for a React component property. #### Parameters • **key**: `string` the property name. • **name**: `string` the human-readable property name. #### Returns [`ModuleAnnotation`](ModuleAnnotation.md) #### Inherited from [`Annotation`](Annotation.md).[`constructor`](Annotation.md#constructors) ## Properties ### bindingType? > `readonly` `optional` **bindingType**: [`ComponentPropertyBindType`](../type-aliases/ComponentPropertyBindType.md) The component property binding type. #### Inherited from [`Annotation`](Annotation.md).[`bindingType`](Annotation.md#bindingtype) *** ### calculable > `readonly` **calculable**: `boolean` = `true` True if the property value can be a calculated property, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`calculable`](Annotation.md#calculable) *** ### default? > `readonly` `optional` **default**: `any` The default property value. #### Inherited from [`Annotation`](Annotation.md).[`default`](Annotation.md#default) *** ### disabled > `readonly` **disabled**: `boolean` = `false` True if the property value controls a disabled flag, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`disabled`](Annotation.md#disabled) *** ### editor > `readonly` **editor**: `string` The name of the component's property editor. #### Inherited from [`Annotation`](Annotation.md).[`editor`](Annotation.md#editor) *** ### editorProps? > `readonly` `optional` **editorProps**: `any` Additional properties for the component property editor. #### Inherited from [`Annotation`](Annotation.md).[`editorProps`](Annotation.md#editorprops) *** ### errorMap? > `readonly` `optional` **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) Message and/or error code for the validation function. #### Inherited from [`Annotation`](Annotation.md).[`errorMap`](Annotation.md#errormap) *** ### hint? > `readonly` `optional` **hint**: `ReactNode` The hint for the component property. #### Inherited from [`Annotation`](Annotation.md).[`hint`](Annotation.md#hint) *** ### key > `readonly` **key**: `string` The component property key. #### Inherited from [`Annotation`](Annotation.md).[`key`](Annotation.md#key) *** ### localizable > `readonly` **localizable**: `boolean` = `false` True if the property value can be localized, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`localizable`](Annotation.md#localizable) *** ### name > `readonly` **name**: `string` The component property name. #### Inherited from [`Annotation`](Annotation.md).[`name`](Annotation.md#name) *** ### readOnly > `readonly` **readOnly**: `boolean` = `false` True if the property value controls a read-only flag, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`readOnly`](Annotation.md#readonly) *** ### required > `readonly` **required**: `boolean` = `false` True if the component property is required, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`required`](Annotation.md#required) *** ### slotConditionBuilder()? > `readonly` `optional` **slotConditionBuilder**: (`props`) => `string` A function that returns a string containing the source code of the function to bind child components. #### Parameters • **props**: `any` the properties of the component, which are available only inside Form Builder Designer. #### Returns `string` #### Inherited from [`Annotation`](Annotation.md).[`slotConditionBuilder`](Annotation.md#slotconditionbuilder) *** ### type? > `readonly` `optional` **type**: keyof SchemaTypeMap The data type for the value of the property. #### Inherited from [`Annotation`](Annotation.md).[`type`](Annotation.md#type) *** ### uncontrolledValue? > `readonly` `optional` **uncontrolledValue**: `unknown` The property value for the uncontrolled state. #### Inherited from [`Annotation`](Annotation.md).[`uncontrolledValue`](Annotation.md#uncontrolledvalue) *** ### validator? > `readonly` `optional` **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md) The function for validating the property value. #### Inherited from [`Annotation`](Annotation.md).[`validator`](Annotation.md#validator) *** ### valued > `readonly` **valued**: `boolean` = `false` True if the property value is bound to form data, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`valued`](Annotation.md#valued) ## Methods ### clone() > **clone**(): `any` #### Returns `any` the metadata clone. #### Inherited from [`Annotation`](Annotation.md).[`clone`](Annotation.md#clone) --- # Class: NodeAnnotationBuilder\ The builder class to define the node metadata property. ## Extends - [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> ## Type Parameters • **T** the property type. ## Constructors ### new NodeAnnotationBuilder() > **new NodeAnnotationBuilder**\<`T`\>(`editor`): [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> Creates a component property metadata builder. #### Parameters • **editor**: `string` the property editor type. #### Returns [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> #### Overrides [`AnnotationBuilder`](AnnotationBuilder.md).[`constructor`](AnnotationBuilder.md#constructors) ## Properties ### annotation > **annotation**: [`PreAnnotation`](../type-aliases/PreAnnotation.md) Partial metadata for a component property. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`annotation`](AnnotationBuilder.md#annotation) *** ### insertPredicate()? > `optional` **insertPredicate**: (`self`, `child`) => `boolean` The function that checks whether a child component can be inserted into a parent component. #### Parameters • **self**: [`ComponentData`](ComponentData.md) • **child**: [`ComponentData`](ComponentData.md) #### Returns `boolean` *** ### options > **options**: [`BuilderOptions`](BuilderOptions.md) Options for building an annotation. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`options`](AnnotationBuilder.md#options) ## Accessors ### array #### Get Signature > **get** **array**(): [`ArrayBuilder`](ArrayBuilder.md)\<`undefined` \| `T`[]\> Sets the property as a "array" property. ##### Returns [`ArrayBuilder`](ArrayBuilder.md)\<`undefined` \| `T`[]\> the instance of the metadata property builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`array`](AnnotationBuilder.md#array) *** ### localize #### Get Signature > **get** **localize**(): `this` ##### Returns `this` the component property that can be localized. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`localize`](AnnotationBuilder.md#localize) *** ### notLocalize #### Get Signature > **get** **notLocalize**(): `this` ##### Returns `this` the non-localizable component property. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`notLocalize`](AnnotationBuilder.md#notlocalize) *** ### valued #### Get Signature > **get** **valued**(): `this` ##### Returns `this` the main component property that is used as form data and for validation rules. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`valued`](AnnotationBuilder.md#valued) ## Methods ### build() > **build**(`key`): [`Annotation`](Annotation.md) Creates component property metadata for the form builder. #### Parameters • **key**: `string` the unique key of the component property. #### Returns [`Annotation`](Annotation.md) the instance of the component property metadata for the form builder. #### Overrides [`AnnotationBuilder`](AnnotationBuilder.md).[`build`](AnnotationBuilder.md#build) *** ### calculable() > **calculable**(`calculable`): [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> Marks the component property as calculable. #### Parameters • **calculable**: `boolean` true if the property is calculable. #### Returns [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`calculable`](AnnotationBuilder.md#calculable) *** ### clone() > **clone**(): `this` Clones the instance of the builder. #### Returns `this` the cloned instance of the builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`clone`](AnnotationBuilder.md#clone) *** ### getName() > `protected` **getName**(`key`): `string` Returns the annotation name. #### Parameters • **key**: `string` the property name #### Returns `string` the annotation name. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`getName`](AnnotationBuilder.md#getname) *** ### hideEditor() > **hideEditor**(): `this` Hides the component property editor. #### Returns `this` the modified instance of the builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`hideEditor`](AnnotationBuilder.md#hideeditor) *** ### hinted() > **hinted**(`hint`): [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> Adds the hint to the property name of the component. #### Parameters • **hint**: `ReactNode` the hint. #### Returns [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`hinted`](AnnotationBuilder.md#hinted) *** ### named() > **named**(`name`): [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> Specifies the name of the component property. #### Parameters • **name**: `string` the property name. #### Returns [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`named`](AnnotationBuilder.md#named) *** ### oneOf() > **oneOf**\<`U`\>(...`values`): [`OneOfBuilder`](OneOfBuilder.md)\<`U`\> Sets the property as a "single select" property. #### Type Parameters • **U** *extends* `string` \| `number` #### Parameters • ...**values**: `U`[] the possible values for the property. #### Returns [`OneOfBuilder`](OneOfBuilder.md)\<`U`\> the instance of the metadata property builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`oneOf`](AnnotationBuilder.md#oneof) *** ### setup() > **setup**(`options`): `this` Modifies the component property metadata builder with custom options. #### Parameters • **options**: `Partial`\<`Partial`\<`Omit`\<[`Annotation`](Annotation.md), `"key"`\>\> & `Pick`\<[`Annotation`](Annotation.md), `"editor"`\> & [`BuilderOptions`](BuilderOptions.md)\> the custom options. #### Returns `this` the modified instance of the builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`setup`](AnnotationBuilder.md#setup) *** ### someOf() > **someOf**\<`U`\>(...`values`): [`SomeOfBuilder`](SomeOfBuilder.md)\<`U`\> Sets the property as a "multiple select" property. #### Type Parameters • **U** *extends* `string` \| `number` #### Parameters • ...**values**: `U`[] the possible values for the property. #### Returns [`SomeOfBuilder`](SomeOfBuilder.md)\<`U`\> the instance of the metadata property builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`someOf`](AnnotationBuilder.md#someof) *** ### typed() > **typed**\<`T`\>(`type`): [`TypedBuilder`](TypedBuilder.md)\<`undefined` \| [`SchemaTypeMap`](../type-aliases/SchemaTypeMap.md)\[`T`\]\> Sets the field type for the component property. #### Type Parameters • **T** *extends* keyof [`SchemaTypeMap`](../type-aliases/SchemaTypeMap.md) #### Parameters • **type**: `T` the field type. #### Returns [`TypedBuilder`](TypedBuilder.md)\<`undefined` \| [`SchemaTypeMap`](../type-aliases/SchemaTypeMap.md)\[`T`\]\> the instance of the metadata property builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`typed`](AnnotationBuilder.md#typed) *** ### uncontrolledValue() > **uncontrolledValue**(`uncontrolledValue`): [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> Sets the value for the property that prevents uncontrolled state. #### Parameters • **uncontrolledValue**: `unknown` the value for the uncontrolled state. #### Returns [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`uncontrolledValue`](AnnotationBuilder.md#uncontrolledvalue) *** ### withEditorProps() > **withEditorProps**(`props`): `this` Sets custom properties for the component's property editor. #### Parameters • **props**: `any` the custom properties #### Returns `this` the modified instance of the builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`withEditorProps`](AnnotationBuilder.md#witheditorprops) *** ### withInsertRestriction() > **withInsertRestriction**(`predicate`?): [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> Specifies a function that checks whether a child component can be inserted into a parent component. #### Parameters • **predicate?** the function that returns a boolean value. #### Returns [`NodeAnnotationBuilder`](NodeAnnotationBuilder.md)\<`T`\> the modified instance of the builder. *** ### withSlotConditionBuilder() > **withSlotConditionBuilder**(`slotConditionBuilder`): `this` Specifies a function that will create conditions that check if a child component can be bound to a parent slot. #### Parameters • **slotConditionBuilder** the function that returns a string containing the source code of the function to bind child components. #### Returns `this` the instance of the metadata property builder. *** ### create() > `static` **create**\<`T`\>(`editor`): [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> Creates a component property metadata builder. #### Type Parameters • **T** the property type. #### Parameters • **editor**: `string` the property editor type. #### Returns [`AnnotationBuilder`](AnnotationBuilder.md)\<`T`\> the component property metadata builder. #### Inherited from [`AnnotationBuilder`](AnnotationBuilder.md).[`create`](AnnotationBuilder.md#create) --- # Class: OneOfBuilder\ The builder class to define the metadata property of the form builder component. Used for properties where the property value can be selected from one of the predefined values. ## Extends - [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> ## Type Parameters • **T** the property type. ## Constructors ### new OneOfBuilder() > **new OneOfBuilder**\<`T`\>(): [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> #### Returns [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`constructor`](QuantifierBuilder.md#constructors) ## Properties ### annotation > **annotation**: [`PreAnnotation`](../type-aliases/PreAnnotation.md) Partial metadata for a component property. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`annotation`](QuantifierBuilder.md#annotation) *** ### labels? > `optional` **labels**: `string`[] Labels for the possible values of the property. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`labels`](QuantifierBuilder.md#labels) *** ### options > **options**: [`BuilderOptions`](BuilderOptions.md) Options for building an annotation. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`options`](QuantifierBuilder.md#options) *** ### values > **values**: (`string` \| `number`)[] Possible values for the property. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`values`](QuantifierBuilder.md#values) ## Accessors ### localize #### Get Signature > **get** **localize**(): `this` ##### Returns `this` the component property that can be localized. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`localize`](QuantifierBuilder.md#localize) *** ### notLocalize #### Get Signature > **get** **notLocalize**(): `this` ##### Returns `this` the non-localizable component property. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`notLocalize`](QuantifierBuilder.md#notlocalize) *** ### required #### Get Signature > **get** **required**(): [`QuantifierBuilder`](QuantifierBuilder.md)\<`NonNullable`\<`T`\>\> Marks the component property as required. ##### Returns [`QuantifierBuilder`](QuantifierBuilder.md)\<`NonNullable`\<`T`\>\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`required`](QuantifierBuilder.md#required) *** ### valued #### Get Signature > **get** **valued**(): `this` ##### Returns `this` the main component property that is used as form data and for validation rules. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`valued`](QuantifierBuilder.md#valued) ## Methods ### build() > **build**(`key`): [`Annotation`](Annotation.md) Creates component property metadata for the form builder. #### Parameters • **key**: `string` the unique key of the component property. #### Returns [`Annotation`](Annotation.md) the instance of the component property metadata for the form builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`build`](QuantifierBuilder.md#build) *** ### calculable() > **calculable**(`calculable`): [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> Marks the component property as calculable. #### Parameters • **calculable**: `boolean` true if the property is calculable. #### Returns [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`calculable`](QuantifierBuilder.md#calculable) *** ### clone() > **clone**(): `this` Clones the instance of the builder. #### Returns `this` the cloned instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`clone`](QuantifierBuilder.md#clone) *** ### default() > **default**(`value`): `this` Sets the default value for the component property. #### Parameters • **value**: `T` the default value. #### Returns `this` the modified instance of the builder. #### Overrides [`QuantifierBuilder`](QuantifierBuilder.md).[`default`](QuantifierBuilder.md#default) *** ### getName() > `protected` **getName**(`key`): `string` Returns the annotation name. #### Parameters • **key**: `string` the property name #### Returns `string` the annotation name. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`getName`](QuantifierBuilder.md#getname) *** ### hideEditor() > **hideEditor**(): `this` Hides the component property editor. #### Returns `this` the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`hideEditor`](QuantifierBuilder.md#hideeditor) *** ### hinted() > **hinted**(`hint`): [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> Adds the hint to the property name of the component. #### Parameters • **hint**: `ReactNode` the hint. #### Returns [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`hinted`](QuantifierBuilder.md#hinted) *** ### labeled() > **labeled**(...`labels`): [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> Sets the labels for predefined values. #### Parameters • ...**labels**: `string`[] the labels. #### Returns [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`labeled`](QuantifierBuilder.md#labeled) *** ### named() > **named**(`name`): [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> Specifies the name of the component property. #### Parameters • **name**: `string` the property name. #### Returns [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`named`](QuantifierBuilder.md#named) *** ### radio() > **radio**(): [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> Sets the radio buttons as the component's property editor. #### Returns [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> the modified instance of the builder. *** ### setup() > **setup**(`options`): `this` Modifies the component property metadata builder with custom options. #### Parameters • **options**: `Partial`\<`Partial`\<`Omit`\<[`Annotation`](Annotation.md), `"key"`\>\> & `Pick`\<[`Annotation`](Annotation.md), `"editor"`\> & [`BuilderOptions`](BuilderOptions.md)\> the custom options. #### Returns `this` the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`setup`](QuantifierBuilder.md#setup) *** ### uncontrolledValue() > **uncontrolledValue**(`uncontrolledValue`): [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> Sets the value for the property that prevents uncontrolled state. #### Parameters • **uncontrolledValue**: `unknown` the value for the uncontrolled state. #### Returns [`OneOfBuilder`](OneOfBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`uncontrolledValue`](QuantifierBuilder.md#uncontrolledvalue) *** ### validated() > **validated**(`validator`, `errorMap`): `this` Modifies the component property metadata builder with validation properties. #### Parameters • **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md)\<`T`\> the validation function. • **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) the validation error settings. #### Returns `this` the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`validated`](QuantifierBuilder.md#validated) *** ### withEditorProps() > **withEditorProps**(`props`): `this` Sets custom properties for the component's property editor. #### Parameters • **props**: `any` the custom properties #### Returns `this` the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`withEditorProps`](QuantifierBuilder.md#witheditorprops) --- # Class: PropertyAnnotation Metadata for the component property for the form builder. ## Extends - [`Annotation`](Annotation.md) ## Constructors ### new PropertyAnnotation() > **new PropertyAnnotation**(`key`, `name`): [`PropertyAnnotation`](PropertyAnnotation.md) Creates metadata for a React component property. #### Parameters • **key**: `string` the property name. • **name**: `string` the human-readable property name. #### Returns [`PropertyAnnotation`](PropertyAnnotation.md) #### Inherited from [`Annotation`](Annotation.md).[`constructor`](Annotation.md#constructors) ## Properties ### bindingType? > `readonly` `optional` **bindingType**: [`ComponentPropertyBindType`](../type-aliases/ComponentPropertyBindType.md) The component property binding type. #### Inherited from [`Annotation`](Annotation.md).[`bindingType`](Annotation.md#bindingtype) *** ### calculable > `readonly` **calculable**: `boolean` = `true` True if the property value can be a calculated property, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`calculable`](Annotation.md#calculable) *** ### data > **data**: [`LabeledValue`](../interfaces/LabeledValue.md)[] Possible values for the property. *** ### default? > `readonly` `optional` **default**: `any` The default property value. #### Inherited from [`Annotation`](Annotation.md).[`default`](Annotation.md#default) *** ### disabled > `readonly` **disabled**: `boolean` = `false` True if the property value controls a disabled flag, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`disabled`](Annotation.md#disabled) *** ### editor > `readonly` **editor**: `string` The name of the component's property editor. #### Inherited from [`Annotation`](Annotation.md).[`editor`](Annotation.md#editor) *** ### editorProps? > `readonly` `optional` **editorProps**: `any` Additional properties for the component property editor. #### Inherited from [`Annotation`](Annotation.md).[`editorProps`](Annotation.md#editorprops) *** ### errorMap? > `readonly` `optional` **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) Message and/or error code for the validation function. #### Inherited from [`Annotation`](Annotation.md).[`errorMap`](Annotation.md#errormap) *** ### hint? > `readonly` `optional` **hint**: `ReactNode` The hint for the component property. #### Inherited from [`Annotation`](Annotation.md).[`hint`](Annotation.md#hint) *** ### key > `readonly` **key**: `string` The component property key. #### Inherited from [`Annotation`](Annotation.md).[`key`](Annotation.md#key) *** ### localizable > `readonly` **localizable**: `boolean` = `false` True if the property value can be localized, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`localizable`](Annotation.md#localizable) *** ### name > `readonly` **name**: `string` The component property name. #### Inherited from [`Annotation`](Annotation.md).[`name`](Annotation.md#name) *** ### readOnly > `readonly` **readOnly**: `boolean` = `false` True if the property value controls a read-only flag, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`readOnly`](Annotation.md#readonly) *** ### required > `readonly` **required**: `boolean` = `false` True if the component property is required, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`required`](Annotation.md#required) *** ### slotConditionBuilder()? > `readonly` `optional` **slotConditionBuilder**: (`props`) => `string` A function that returns a string containing the source code of the function to bind child components. #### Parameters • **props**: `any` the properties of the component, which are available only inside Form Builder Designer. #### Returns `string` #### Inherited from [`Annotation`](Annotation.md).[`slotConditionBuilder`](Annotation.md#slotconditionbuilder) *** ### type? > `readonly` `optional` **type**: keyof SchemaTypeMap The data type for the value of the property. #### Inherited from [`Annotation`](Annotation.md).[`type`](Annotation.md#type) *** ### uncontrolledValue? > `readonly` `optional` **uncontrolledValue**: `unknown` The property value for the uncontrolled state. #### Inherited from [`Annotation`](Annotation.md).[`uncontrolledValue`](Annotation.md#uncontrolledvalue) *** ### validator? > `readonly` `optional` **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md) The function for validating the property value. #### Inherited from [`Annotation`](Annotation.md).[`validator`](Annotation.md#validator) *** ### valued > `readonly` **valued**: `boolean` = `false` True if the property value is bound to form data, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`valued`](Annotation.md#valued) ## Methods ### clone() > **clone**(): `any` #### Returns `any` the metadata clone. #### Inherited from [`Annotation`](Annotation.md).[`clone`](Annotation.md#clone) --- # Class: `abstract` QuantifierBuilder\ The abstract builder class to define the metadata property of the form builder component. Used for properties where the property value can be selected from predefined values. ## Extends - [`TypedBuilder`](TypedBuilder.md)\<`T`\> ## Extended by - [`OneOfBuilder`](OneOfBuilder.md) - [`SomeOfBuilder`](SomeOfBuilder.md) ## Type Parameters • **T** the property type. ## Constructors ### new QuantifierBuilder() > **new QuantifierBuilder**\<`T`\>(): [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> #### Returns [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`constructor`](TypedBuilder.md#constructors) ## Properties ### annotation > **annotation**: [`PreAnnotation`](../type-aliases/PreAnnotation.md) Partial metadata for a component property. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`annotation`](TypedBuilder.md#annotation) *** ### labels? > `optional` **labels**: `string`[] Labels for the possible values of the property. *** ### options > **options**: [`BuilderOptions`](BuilderOptions.md) Options for building an annotation. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`options`](TypedBuilder.md#options) *** ### values > **values**: (`string` \| `number`)[] Possible values for the property. ## Accessors ### localize #### Get Signature > **get** **localize**(): `this` ##### Returns `this` the component property that can be localized. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`localize`](TypedBuilder.md#localize) *** ### notLocalize #### Get Signature > **get** **notLocalize**(): `this` ##### Returns `this` the non-localizable component property. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`notLocalize`](TypedBuilder.md#notlocalize) *** ### required #### Get Signature > **get** **required**(): [`QuantifierBuilder`](QuantifierBuilder.md)\<`NonNullable`\<`T`\>\> Marks the component property as required. ##### Returns [`QuantifierBuilder`](QuantifierBuilder.md)\<`NonNullable`\<`T`\>\> the modified instance of the builder. #### Overrides [`TypedBuilder`](TypedBuilder.md).[`required`](TypedBuilder.md#required) *** ### valued #### Get Signature > **get** **valued**(): `this` ##### Returns `this` the main component property that is used as form data and for validation rules. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`valued`](TypedBuilder.md#valued) ## Methods ### build() > **build**(`key`): [`Annotation`](Annotation.md) Creates component property metadata for the form builder. #### Parameters • **key**: `string` the unique key of the component property. #### Returns [`Annotation`](Annotation.md) the instance of the component property metadata for the form builder. #### Overrides [`TypedBuilder`](TypedBuilder.md).[`build`](TypedBuilder.md#build) *** ### calculable() > **calculable**(`calculable`): [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> Marks the component property as calculable. #### Parameters • **calculable**: `boolean` true if the property is calculable. #### Returns [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`calculable`](TypedBuilder.md#calculable) *** ### clone() > **clone**(): `this` Clones the instance of the builder. #### Returns `this` the cloned instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`clone`](TypedBuilder.md#clone) *** ### default() > **default**(`value`): `this` Sets the default value for the component property. #### Parameters • **value**: `T` \| `T`[] the default value, can be an array of values. #### Returns `this` the modified instance of the builder. #### Overrides [`TypedBuilder`](TypedBuilder.md).[`default`](TypedBuilder.md#default) *** ### getName() > `protected` **getName**(`key`): `string` Returns the annotation name. #### Parameters • **key**: `string` the property name #### Returns `string` the annotation name. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`getName`](TypedBuilder.md#getname) *** ### hideEditor() > **hideEditor**(): `this` Hides the component property editor. #### Returns `this` the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`hideEditor`](TypedBuilder.md#hideeditor) *** ### hinted() > **hinted**(`hint`): [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> Adds the hint to the property name of the component. #### Parameters • **hint**: `ReactNode` the hint. #### Returns [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`hinted`](TypedBuilder.md#hinted) *** ### labeled() > **labeled**(...`labels`): [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> Sets the labels for predefined values. #### Parameters • ...**labels**: `string`[] the labels. #### Returns [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> the modified instance of the builder. *** ### named() > **named**(`name`): [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> Specifies the name of the component property. #### Parameters • **name**: `string` the property name. #### Returns [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`named`](TypedBuilder.md#named) *** ### setup() > **setup**(`options`): `this` Modifies the component property metadata builder with custom options. #### Parameters • **options**: `Partial`\<`Partial`\<`Omit`\<[`Annotation`](Annotation.md), `"key"`\>\> & `Pick`\<[`Annotation`](Annotation.md), `"editor"`\> & [`BuilderOptions`](BuilderOptions.md)\> the custom options. #### Returns `this` the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`setup`](TypedBuilder.md#setup) *** ### uncontrolledValue() > **uncontrolledValue**(`uncontrolledValue`): [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> Sets the value for the property that prevents uncontrolled state. #### Parameters • **uncontrolledValue**: `unknown` the value for the uncontrolled state. #### Returns [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`uncontrolledValue`](TypedBuilder.md#uncontrolledvalue) *** ### validated() > **validated**(`validator`, `errorMap`): `this` Modifies the component property metadata builder with validation properties. #### Parameters • **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md)\<`T`\> the validation function. • **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) the validation error settings. #### Returns `this` the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`validated`](TypedBuilder.md#validated) *** ### withEditorProps() > **withEditorProps**(`props`): `this` Sets custom properties for the component's property editor. #### Parameters • **props**: `any` the custom properties #### Returns `this` the modified instance of the builder. #### Inherited from [`TypedBuilder`](TypedBuilder.md).[`withEditorProps`](TypedBuilder.md#witheditorprops) --- # Class: SomeOfBuilder\ The builder class to define the metadata property of the form builder component. Used for properties where the property value can be a set of predefined values. ## Extends - [`QuantifierBuilder`](QuantifierBuilder.md)\<`T`\> ## Type Parameters • **T** the property type. ## Constructors ### new SomeOfBuilder() > **new SomeOfBuilder**\<`T`\>(): [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> #### Returns [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`constructor`](QuantifierBuilder.md#constructors) ## Properties ### annotation > **annotation**: [`PreAnnotation`](../type-aliases/PreAnnotation.md) Partial metadata for a component property. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`annotation`](QuantifierBuilder.md#annotation) *** ### labels? > `optional` **labels**: `string`[] Labels for the possible values of the property. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`labels`](QuantifierBuilder.md#labels) *** ### options > **options**: [`BuilderOptions`](BuilderOptions.md) Options for building an annotation. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`options`](QuantifierBuilder.md#options) *** ### values > **values**: (`string` \| `number`)[] Possible values for the property. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`values`](QuantifierBuilder.md#values) ## Accessors ### localize #### Get Signature > **get** **localize**(): `this` ##### Returns `this` the component property that can be localized. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`localize`](QuantifierBuilder.md#localize) *** ### notLocalize #### Get Signature > **get** **notLocalize**(): `this` ##### Returns `this` the non-localizable component property. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`notLocalize`](QuantifierBuilder.md#notlocalize) *** ### required #### Get Signature > **get** **required**(): [`QuantifierBuilder`](QuantifierBuilder.md)\<`NonNullable`\<`T`\>\> Marks the component property as required. ##### Returns [`QuantifierBuilder`](QuantifierBuilder.md)\<`NonNullable`\<`T`\>\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`required`](QuantifierBuilder.md#required) *** ### valued #### Get Signature > **get** **valued**(): `this` ##### Returns `this` the main component property that is used as form data and for validation rules. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`valued`](QuantifierBuilder.md#valued) ## Methods ### build() > **build**(`key`): [`Annotation`](Annotation.md) Creates component property metadata for the form builder. #### Parameters • **key**: `string` the unique key of the component property. #### Returns [`Annotation`](Annotation.md) the instance of the component property metadata for the form builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`build`](QuantifierBuilder.md#build) *** ### calculable() > **calculable**(`calculable`): [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> Marks the component property as calculable. #### Parameters • **calculable**: `boolean` true if the property is calculable. #### Returns [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`calculable`](QuantifierBuilder.md#calculable) *** ### clone() > **clone**(): `this` Clones the instance of the builder. #### Returns `this` the cloned instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`clone`](QuantifierBuilder.md#clone) *** ### default() > **default**(`value`): `this` Sets the default value for the component property. #### Parameters • **value**: `T`[] the default value. #### Returns `this` the modified instance of the builder. #### Overrides [`QuantifierBuilder`](QuantifierBuilder.md).[`default`](QuantifierBuilder.md#default) *** ### getName() > `protected` **getName**(`key`): `string` Returns the annotation name. #### Parameters • **key**: `string` the property name #### Returns `string` the annotation name. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`getName`](QuantifierBuilder.md#getname) *** ### hideEditor() > **hideEditor**(): `this` Hides the component property editor. #### Returns `this` the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`hideEditor`](QuantifierBuilder.md#hideeditor) *** ### hinted() > **hinted**(`hint`): [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> Adds the hint to the property name of the component. #### Parameters • **hint**: `ReactNode` the hint. #### Returns [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`hinted`](QuantifierBuilder.md#hinted) *** ### labeled() > **labeled**(...`labels`): [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> Sets the labels for predefined values. #### Parameters • ...**labels**: `string`[] the labels. #### Returns [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`labeled`](QuantifierBuilder.md#labeled) *** ### named() > **named**(`name`): [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> Specifies the name of the component property. #### Parameters • **name**: `string` the property name. #### Returns [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`named`](QuantifierBuilder.md#named) *** ### setup() > **setup**(`options`): `this` Modifies the component property metadata builder with custom options. #### Parameters • **options**: `Partial`\<`Partial`\<`Omit`\<[`Annotation`](Annotation.md), `"key"`\>\> & `Pick`\<[`Annotation`](Annotation.md), `"editor"`\> & [`BuilderOptions`](BuilderOptions.md)\> the custom options. #### Returns `this` the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`setup`](QuantifierBuilder.md#setup) *** ### uncontrolledValue() > **uncontrolledValue**(`uncontrolledValue`): [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> Sets the value for the property that prevents uncontrolled state. #### Parameters • **uncontrolledValue**: `unknown` the value for the uncontrolled state. #### Returns [`SomeOfBuilder`](SomeOfBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`uncontrolledValue`](QuantifierBuilder.md#uncontrolledvalue) *** ### validated() > **validated**(`validator`, `errorMap`): `this` Modifies the component property metadata builder with validation properties. #### Parameters • **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md)\<`T`\> the validation function. • **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) the validation error settings. #### Returns `this` the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`validated`](QuantifierBuilder.md#validated) *** ### withEditorProps() > **withEditorProps**(`props`): `this` Sets custom properties for the component's property editor. #### Parameters • **props**: `any` the custom properties #### Returns `this` the modified instance of the builder. #### Inherited from [`QuantifierBuilder`](QuantifierBuilder.md).[`withEditorProps`](QuantifierBuilder.md#witheditorprops) --- # Class: Store The form viewer settings. **Internal use only.** ## Implements - [`IStore`](../interfaces/IStore.md) - [`IFormViewer`](../interfaces/IFormViewer.md) - [`IComponentDataFactory`](../interfaces/IComponentDataFactory.md) ## Constructors ### new Store() > **new Store**(`formViewerPropsStore`, `componentStateFactory`, `parentStore`?, `getInitialData`?): [`Store`](Store.md) Creates form viewer settings. #### Parameters • **formViewerPropsStore**: [`FormViewerPropsStore`](FormViewerPropsStore.md) the form viewer store settings. • **componentStateFactory**: [`ComponentStateFactory`](../type-aliases/ComponentStateFactory.md) the factory for creating component states. • **parentStore?**: [`Store`](Store.md) the form viewer settings, used in templates. • **getInitialData?**: [`GetInitialDataFn`](../type-aliases/GetInitialDataFn.md) the function to get initial data for the Store. #### Returns [`Store`](Store.md) ## Properties ### componentStateFactory > `readonly` **componentStateFactory**: [`ComponentStateFactory`](../type-aliases/ComponentStateFactory.md) the factory for creating component states. *** ### form > **form**: [`Form`](Form.md) The form. #### Implementation of [`IStore`](../interfaces/IStore.md).[`form`](../interfaces/IStore.md#form) *** ### formLoadError? > `optional` **formLoadError**: `string` The loading form error. *** ### formViewerPropsStore > **formViewerPropsStore**: [`FormViewerPropsStore`](FormViewerPropsStore.md) the form viewer store settings. *** ### getInitialData? > `readonly` `optional` **getInitialData**: [`GetInitialDataFn`](../type-aliases/GetInitialDataFn.md) the function to get initial data for the Store. *** ### parentStore? > `readonly` `optional` **parentStore**: [`Store`](Store.md) the form viewer settings, used in templates. *** ### selectedLanguage? > `optional` **selectedLanguage**: [`Language`](Language.md) The currently selected language. *** ### viewMode > **viewMode**: [`ViewMode`](../type-aliases/ViewMode.md) = `'desktop'` Current display resolution type. ## Accessors ### commonActions #### Get Signature > **get** **commonActions**(): [`ActionValues`](../type-aliases/ActionValues.md) ##### Returns [`ActionValues`](../type-aliases/ActionValues.md) the Record with the common actions. *** ### displayedLanguage #### Get Signature > **get** **displayedLanguage**(): [`Language`](Language.md) ##### Returns [`Language`](Language.md) the current display language. *** ### formData #### Get Signature > **get** **formData**(): [`ComponentData`](ComponentData.md) ##### Returns [`ComponentData`](ComponentData.md) the [IFormData](../interfaces/IFormData.md) with all the form data. #### Implementation of [`IFormViewer`](../interfaces/IFormViewer.md).[`formData`](../interfaces/IFormViewer.md#formdata) *** ### initialDataSlice #### Get Signature > **get** **initialDataSlice**(): `unknown` ##### Returns `unknown` the slice of the initial data in accordance with the Store hierarchy. **Internal use only.** #### Implementation of [`IStore`](../interfaces/IStore.md).[`initialDataSlice`](../interfaces/IStore.md#initialdataslice) *** ### showAllValidationErrors #### Get Signature > **get** **showAllValidationErrors**(): `undefined` \| `boolean` ##### Returns `undefined` \| `boolean` true if all validation errors are to be displayed, false otherwise. #### Implementation of [`IStore`](../interfaces/IStore.md).[`showAllValidationErrors`](../interfaces/IStore.md#showallvalidationerrors) ## Methods ### applyPersistedForm() > **applyPersistedForm**(`persistedForm`): `void` Populates the value of this store with the values of the saved form. #### Parameters • **persistedForm**: [`PersistedForm`](../interfaces/PersistedForm.md) saved form value. #### Returns `void` *** ### applyStringForm() > **applyStringForm**(`text`): `void` Populates the value of this store with the values of the saved form. #### Parameters • **text**: `string` saved form value. #### Returns `void` *** ### clear() > **clear**(): `void` Clears the form in Form Viewer. #### Returns `void` *** ### createComponentData() > **createComponentData**(`componentStore`, `deferFieldCalculation`): [`ComponentData`](ComponentData.md) Creates the element for the component tree. **Internal use only.** #### Parameters • **componentStore**: [`ComponentStore`](ComponentStore.md) the component settings. • **deferFieldCalculation**: `boolean` = `false` if true, then the calculated field must be explicitly initialized. #### Returns [`ComponentData`](ComponentData.md) the element for the component tree. #### Implementation of [`IComponentDataFactory`](../interfaces/IComponentDataFactory.md).[`createComponentData`](../interfaces/IComponentDataFactory.md#createcomponentdata) *** ### dispose() > **dispose**(): `void` Correctly clears allocated resources, the function must be called when destroying an instance of the class. #### Returns `void` #### Inherit Doc #### Implementation of [`IStore`](../interfaces/IStore.md).[`dispose`](../interfaces/IStore.md#dispose) *** ### findAction() > **findAction**(`actionData`): [`ActionDefinition`](ActionDefinition.md) Searches for an action, returns definition for the found action. #### Parameters • **actionData**: [`ActionData`](../type-aliases/ActionData.md) the action's data. #### Returns [`ActionDefinition`](ActionDefinition.md) the action definition. #### Throws Error, if action was not found. *** ### getAction() > **getAction**(`name`, `type`): [`ActionDefinition`](ActionDefinition.md) Returns an action by the specified action name and action type. #### Parameters • **name**: `string` the action name. • **type**: [`ActionType`](../type-aliases/ActionType.md) the action type. #### Returns [`ActionDefinition`](ActionDefinition.md) the action. *** ### getModel() > **getModel**(`type`): [`Model`](Model.md)\<`Record`\<`string`, `any`\>\> \| [`Model`](Model.md)\<[`InternalErrorProps`](../interfaces/InternalErrorProps.md)\> Returns model for the specified type. #### Parameters • **type**: `string` the component type. #### Returns [`Model`](Model.md)\<`Record`\<`string`, `any`\>\> \| [`Model`](Model.md)\<[`InternalErrorProps`](../interfaces/InternalErrorProps.md)\> the model for the specified type. *** ### getValidationRules() > **getValidationRules**(`type`): [`FormViewerValidationRules`](../type-aliases/FormViewerValidationRules.md) Returns the object with validators for the specified value type. #### Parameters • **type**: keyof [`SchemaTypeMap`](../type-aliases/SchemaTypeMap.md) the value type. #### Returns [`FormViewerValidationRules`](../type-aliases/FormViewerValidationRules.md) the object with validators for the specified value type. *** ### ~~loadForm()~~ > **loadForm**(`getForm`?, `formName`?): `void` #### Parameters • **getForm?** the function that loads the form. • **formName?**: `string` the form name. #### Returns `void` #### Deprecated Loads a form by form name and sets that form in the form viewer. *** ### localizeComponent() > **localizeComponent**(`type`, `formData`, `componentStore`): `Record`\<`string`, `any`\> Localizes a component store based on the given localization type. If a custom localizer is available, it will be used. #### Parameters • **type**: `string` the type of localization. • **formData**: [`IFormData`](../interfaces/IFormData.md) the form data. • **componentStore**: [`ComponentStore`](ComponentStore.md) the component settings. #### Returns `Record`\<`string`, `any`\> the Record with the localized properties. #### Implementation of [`IStore`](../interfaces/IStore.md).[`localizeComponent`](../interfaces/IStore.md#localizecomponent) *** ### localizeErrorMessages() > **localizeErrorMessages**(`formData`, `componentStore`, `validationResults`?): `undefined` \| `string` The function to localize the validation error message. #### Parameters • **formData**: [`IFormData`](../interfaces/IFormData.md) the form data. • **componentStore**: [`ComponentStore`](ComponentStore.md) the component settings. • **validationResults?**: [`ValidationResult`](../type-aliases/ValidationResult.md)[] the results of the validation. #### Returns `undefined` \| `string` the result of localization or undefined. #### Implementation of [`IStore`](../interfaces/IStore.md).[`localizeErrorMessages`](../interfaces/IStore.md#localizeerrormessages) *** ### reduceScreen() > **reduceScreen**\<`T`\>(`callback`, `initialValue`): `T` Performs the callback function on each element of the component tree, accumulates the return values. #### Type Parameters • **T** the return value type. #### Parameters • **callback** the function that calculates the value for the accumulator. • **initialValue**: `T` the initial value for the accumulator. #### Returns `T` the accumulated value. #### Implementation of [`IStore`](../interfaces/IStore.md).[`reduceScreen`](../interfaces/IStore.md#reducescreen) --- # Class: StyleAnnotation Metadata for the component style property for the form builder. ## Extends - [`Annotation`](Annotation.md) ## Constructors ### new StyleAnnotation() > **new StyleAnnotation**(`key`, `name`): [`StyleAnnotation`](StyleAnnotation.md) Creates metadata for a React component property. #### Parameters • **key**: `string` the property name. • **name**: `string` the human-readable property name. #### Returns [`StyleAnnotation`](StyleAnnotation.md) #### Inherited from [`Annotation`](Annotation.md).[`constructor`](Annotation.md#constructors) ## Properties ### bindingType? > `readonly` `optional` **bindingType**: [`ComponentPropertyBindType`](../type-aliases/ComponentPropertyBindType.md) The component property binding type. #### Inherited from [`Annotation`](Annotation.md).[`bindingType`](Annotation.md#bindingtype) *** ### calculable > `readonly` **calculable**: `boolean` = `true` True if the property value can be a calculated property, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`calculable`](Annotation.md#calculable) *** ### default? > `readonly` `optional` **default**: `any` The default property value. #### Inherited from [`Annotation`](Annotation.md).[`default`](Annotation.md#default) *** ### disabled > `readonly` **disabled**: `boolean` = `false` True if the property value controls a disabled flag, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`disabled`](Annotation.md#disabled) *** ### editor > `readonly` **editor**: `string` The name of the component's property editor. #### Inherited from [`Annotation`](Annotation.md).[`editor`](Annotation.md#editor) *** ### editorProps? > `readonly` `optional` **editorProps**: `any` Additional properties for the component property editor. #### Inherited from [`Annotation`](Annotation.md).[`editorProps`](Annotation.md#editorprops) *** ### errorMap? > `readonly` `optional` **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) Message and/or error code for the validation function. #### Inherited from [`Annotation`](Annotation.md).[`errorMap`](Annotation.md#errormap) *** ### hint? > `readonly` `optional` **hint**: `ReactNode` The hint for the component property. #### Inherited from [`Annotation`](Annotation.md).[`hint`](Annotation.md#hint) *** ### key > `readonly` **key**: `string` The component property key. #### Inherited from [`Annotation`](Annotation.md).[`key`](Annotation.md#key) *** ### localizable > `readonly` **localizable**: `boolean` = `false` True if the property value can be localized, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`localizable`](Annotation.md#localizable) *** ### name > `readonly` **name**: `string` The component property name. #### Inherited from [`Annotation`](Annotation.md).[`name`](Annotation.md#name) *** ### readOnly > `readonly` **readOnly**: `boolean` = `false` True if the property value controls a read-only flag, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`readOnly`](Annotation.md#readonly) *** ### required > `readonly` **required**: `boolean` = `false` True if the component property is required, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`required`](Annotation.md#required) *** ### slotConditionBuilder()? > `readonly` `optional` **slotConditionBuilder**: (`props`) => `string` A function that returns a string containing the source code of the function to bind child components. #### Parameters • **props**: `any` the properties of the component, which are available only inside Form Builder Designer. #### Returns `string` #### Inherited from [`Annotation`](Annotation.md).[`slotConditionBuilder`](Annotation.md#slotconditionbuilder) *** ### type? > `readonly` `optional` **type**: keyof SchemaTypeMap The data type for the value of the property. #### Inherited from [`Annotation`](Annotation.md).[`type`](Annotation.md#type) *** ### uncontrolledValue? > `readonly` `optional` **uncontrolledValue**: `unknown` The property value for the uncontrolled state. #### Inherited from [`Annotation`](Annotation.md).[`uncontrolledValue`](Annotation.md#uncontrolledvalue) *** ### validator? > `readonly` `optional` **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md) The function for validating the property value. #### Inherited from [`Annotation`](Annotation.md).[`validator`](Annotation.md#validator) *** ### valued > `readonly` **valued**: `boolean` = `false` True if the property value is bound to form data, false otherwise. #### Inherited from [`Annotation`](Annotation.md).[`valued`](Annotation.md#valued) ## Methods ### clone() > **clone**(): `any` #### Returns `any` the metadata clone. #### Inherited from [`Annotation`](Annotation.md).[`clone`](Annotation.md#clone) --- # Class: SyncEvent\ Represents a synchronous event that can be subscribed to and invoked. **Internal use only.** ## Type Parameters • **TSender** the type of the object that raises the event. • **TEventArgs** the type of the event arguments. ## Constructors ### new SyncEvent() > **new SyncEvent**\<`TSender`, `TEventArgs`\>(): [`SyncEvent`](SyncEvent.md)\<`TSender`, `TEventArgs`\> #### Returns [`SyncEvent`](SyncEvent.md)\<`TSender`, `TEventArgs`\> ## Accessors ### isSubscribed #### Get Signature > **get** **isSubscribed**(): `boolean` Returns true if the object has subscribers, false otherwise. ##### Returns `boolean` true if the object has handlers registered for events, otherwise returns false. ## Methods ### dispose() > **dispose**(): `void` Dispose method to release all handlers. #### Returns `void` *** ### invoke() > **invoke**(`sender`, `eventArgs`): `void` Invokes the event by calling all registered event handlers. #### Parameters • **sender**: `TSender` the sender of the event. • **eventArgs**: `TEventArgs` the event arguments. #### Returns `void` *** ### subscribe() > **subscribe**(`handler`): `void` Adds a handler to the list of subscribers. #### Parameters • **handler**: [`SyncEventHandler`](../type-aliases/SyncEventHandler.md)\<`TSender`, `TEventArgs`\> the handler function to be added. #### Returns `void` *** ### unsubscribe() > **unsubscribe**(`handler`): `void` Removes the specified event handler from the list of handlers. #### Parameters • **handler**: [`SyncEventHandler`](../type-aliases/SyncEventHandler.md)\<`TSender`, `TEventArgs`\> the event handler to remove. #### Returns `void` --- # Class: TemplateField The field with the form data, contains the value of the nested form. **Internal use only.** ## Implements - [`Field`](../interfaces/Field.md) ## Constructors ### new TemplateField() > **new TemplateField**(`componentStore`, `viewerStore`): [`TemplateField`](TemplateField.md) Creates the nested form field with form data for the component. #### Parameters • **componentStore**: [`ComponentStore`](ComponentStore.md) the component settings. • **viewerStore**: [`IStore`](../interfaces/IStore.md) viewerStore the form viewer settings. #### Returns [`TemplateField`](TemplateField.md) ## Properties ### componentStore > `readonly` **componentStore**: [`ComponentStore`](ComponentStore.md) the component settings. *** ### touched > **touched**: `boolean` = `false` Flag, true, if the field is marked as touched. #### Implementation of [`Field`](../interfaces/Field.md).[`touched`](../interfaces/Field.md#touched) *** ### valued > **valued**: `string` = `''` The name of the component property that contains the field value. #### Implementation of [`Field`](../interfaces/Field.md).[`valued`](../interfaces/Field.md#valued) *** ### viewerStore > `readonly` **viewerStore**: [`IStore`](../interfaces/IStore.md) viewerStore the form viewer settings. ## Accessors ### errors #### Get Signature > **get** **errors**(): `Record`\<`string`, `unknown`\> Contains a field validation errors if the field provides multiple errors (i.e. field is template). Contains an array of field validation errors if the field contains an array of components. ##### Returns `Record`\<`string`, `unknown`\> Contains a field validation errors if the field provides multiple errors (i.e. field is template). Contains an array of field validation errors if the field contains an array of components. #### Implementation of [`Field`](../interfaces/Field.md).[`errors`](../interfaces/Field.md#errors) *** ### fieldType #### Get Signature > **get** **fieldType**(): [`FieldType`](../type-aliases/FieldType.md) The field type. ##### Returns [`FieldType`](../type-aliases/FieldType.md) The field type. #### Implementation of [`Field`](../interfaces/Field.md).[`fieldType`](../interfaces/Field.md#fieldtype) *** ### form #### Get Signature > **get** **form**(): [`ComponentData`](ComponentData.md) ##### Returns [`ComponentData`](ComponentData.md) the form for the field. *** ### storeDataInParentForm #### Get Signature > **get** **storeDataInParentForm**(): `any` Flag, false if nested form data show as nested object, true otherwise. ##### Returns `any` Flag, false if nested form data show as nested object, true otherwise. #### Implementation of [`Field`](../interfaces/Field.md).[`storeDataInParentForm`](../interfaces/Field.md#storedatainparentform) *** ### value #### Get Signature > **get** **value**(): `unknown` Value of the field. ##### Returns `unknown` Value of the field. #### Implementation of [`Field`](../interfaces/Field.md).[`value`](../interfaces/Field.md#value) ## Methods ### clear() > **clear**(): `void` Clears the data in the field. #### Returns `void` #### Inherit Doc #### Implementation of [`Field`](../interfaces/Field.md).[`clear`](../interfaces/Field.md#clear) *** ### dispose() > **dispose**(): `void` Releases allocated resources, must be used when destroying an object instance. #### Returns `void` #### Inherit Doc #### Implementation of [`Field`](../interfaces/Field.md).[`dispose`](../interfaces/Field.md#dispose) *** ### getValidationResult() > **getValidationResult**(): `Promise`\<`undefined`\> Returns the validation results without triggering an events and changing the state of the form. #### Returns `Promise`\<`undefined`\> the [ValidationMessages](../type-aliases/ValidationMessages.md) validation results. #### Implementation of [`Field`](../interfaces/Field.md).[`getValidationResult`](../interfaces/Field.md#getvalidationresult) *** ### init() > **init**(): `void` Initializes the value of the field. #### Returns `void` #### Inherit Doc #### Implementation of [`Field`](../interfaces/Field.md).[`init`](../interfaces/Field.md#init) *** ### reset() > **reset**(): `void` Sets the field to its default value. #### Returns `void` #### Inherit Doc #### Implementation of [`Field`](../interfaces/Field.md).[`reset`](../interfaces/Field.md#reset) *** ### setError() > **setError**(`error`): `void` Sets the error value. #### Parameters • **error**: `unknown` #### Returns `void` #### Inherit Doc #### Implementation of [`Field`](../interfaces/Field.md).[`setError`](../interfaces/Field.md#seterror) *** ### setTouched() > **setTouched**(): `void` Marks the field as touched. #### Returns `void` #### Inherit Doc #### Implementation of [`Field`](../interfaces/Field.md).[`setTouched`](../interfaces/Field.md#settouched) *** ### setValue() > **setValue**(`value`): `void` Sets the value of the field. #### Parameters • **value**: `unknown` #### Returns `void` #### Inherit Doc #### Implementation of [`Field`](../interfaces/Field.md).[`setValue`](../interfaces/Field.md#setvalue) *** ### validate() > **validate**(): `Promise`\<`void`\> Validates the field value. #### Returns `Promise`\<`void`\> #### Inherit Doc #### Implementation of [`Field`](../interfaces/Field.md).[`validate`](../interfaces/Field.md#validate) --- # Class: TypedBuilder\ The builder class to define the metadata property of the form builder component. Used for properties where the property value can be validated. ## Extends - [`BaseBuilder`](BaseBuilder.md)\<`T`\> ## Extended by - [`ArrayBuilder`](ArrayBuilder.md) - [`QuantifierBuilder`](QuantifierBuilder.md) ## Type Parameters • **T** the property type. ## Constructors ### new TypedBuilder() > **new TypedBuilder**\<`T`\>(): [`TypedBuilder`](TypedBuilder.md)\<`T`\> #### Returns [`TypedBuilder`](TypedBuilder.md)\<`T`\> #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`constructor`](BaseBuilder.md#constructors) ## Properties ### annotation > **annotation**: [`PreAnnotation`](../type-aliases/PreAnnotation.md) Partial metadata for a component property. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`annotation`](BaseBuilder.md#annotation) *** ### options > **options**: [`BuilderOptions`](BuilderOptions.md) Options for building an annotation. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`options`](BaseBuilder.md#options) ## Accessors ### localize #### Get Signature > **get** **localize**(): `this` ##### Returns `this` the component property that can be localized. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`localize`](BaseBuilder.md#localize) *** ### notLocalize #### Get Signature > **get** **notLocalize**(): `this` ##### Returns `this` the non-localizable component property. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`notLocalize`](BaseBuilder.md#notlocalize) *** ### required #### Get Signature > **get** **required**(): [`TypedBuilder`](TypedBuilder.md)\<`NonNullable`\<`T`\>\> Marks the component property as required. ##### Returns [`TypedBuilder`](TypedBuilder.md)\<`NonNullable`\<`T`\>\> the modified instance of the builder. *** ### valued #### Get Signature > **get** **valued**(): `this` ##### Returns `this` the main component property that is used as form data and for validation rules. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`valued`](BaseBuilder.md#valued) ## Methods ### build() > **build**(`key`): [`Annotation`](Annotation.md) Creates component property metadata for the form builder. #### Parameters • **key**: `string` the unique key of the component property. #### Returns [`Annotation`](Annotation.md) the instance of the component property metadata for the form builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`build`](BaseBuilder.md#build) *** ### calculable() > **calculable**(`calculable`): [`TypedBuilder`](TypedBuilder.md)\<`T`\> Marks the component property as calculable. #### Parameters • **calculable**: `boolean` true if the property is calculable. #### Returns [`TypedBuilder`](TypedBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`calculable`](BaseBuilder.md#calculable) *** ### clone() > **clone**(): `this` Clones the instance of the builder. #### Returns `this` the cloned instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`clone`](BaseBuilder.md#clone) *** ### default() > **default**(`value`): `this` Sets the default value for the component property. #### Parameters • **value**: `T` the default value. #### Returns `this` the modified instance of the builder. *** ### getName() > `protected` **getName**(`key`): `string` Returns the annotation name. #### Parameters • **key**: `string` the property name #### Returns `string` the annotation name. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`getName`](BaseBuilder.md#getname) *** ### hideEditor() > **hideEditor**(): `this` Hides the component property editor. #### Returns `this` the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`hideEditor`](BaseBuilder.md#hideeditor) *** ### hinted() > **hinted**(`hint`): [`TypedBuilder`](TypedBuilder.md)\<`T`\> Adds the hint to the property name of the component. #### Parameters • **hint**: `ReactNode` the hint. #### Returns [`TypedBuilder`](TypedBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`hinted`](BaseBuilder.md#hinted) *** ### named() > **named**(`name`): [`TypedBuilder`](TypedBuilder.md)\<`T`\> Specifies the name of the component property. #### Parameters • **name**: `string` the property name. #### Returns [`TypedBuilder`](TypedBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`named`](BaseBuilder.md#named) *** ### setup() > **setup**(`options`): `this` Modifies the component property metadata builder with custom options. #### Parameters • **options**: `Partial`\<`Partial`\<`Omit`\<[`Annotation`](Annotation.md), `"key"`\>\> & `Pick`\<[`Annotation`](Annotation.md), `"editor"`\> & [`BuilderOptions`](BuilderOptions.md)\> the custom options. #### Returns `this` the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`setup`](BaseBuilder.md#setup) *** ### uncontrolledValue() > **uncontrolledValue**(`uncontrolledValue`): [`TypedBuilder`](TypedBuilder.md)\<`T`\> Sets the value for the property that prevents uncontrolled state. #### Parameters • **uncontrolledValue**: `unknown` the value for the uncontrolled state. #### Returns [`TypedBuilder`](TypedBuilder.md)\<`T`\> the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`uncontrolledValue`](BaseBuilder.md#uncontrolledvalue) *** ### validated() > **validated**(`validator`, `errorMap`): `this` Modifies the component property metadata builder with validation properties. #### Parameters • **validator**: [`RuleValidator`](../type-aliases/RuleValidator.md)\<`T`\> the validation function. • **errorMap**: [`ErrorMap`](../type-aliases/ErrorMap.md) the validation error settings. #### Returns `this` the modified instance of the builder. *** ### withEditorProps() > **withEditorProps**(`props`): `this` Sets custom properties for the component's property editor. #### Parameters • **props**: `any` the custom properties #### Returns `this` the modified instance of the builder. #### Inherited from [`BaseBuilder`](BaseBuilder.md).[`withEditorProps`](BaseBuilder.md#witheditorprops) --- # Class: View Represents all the metadata of the form viewer components. ## Extended by - [`BuilderView`](BuilderView.md) ## Constructors ### new View() > **new View**(`models`): [`View`](View.md) Creates an instance of the [View](View.md). #### Parameters • **models**: [`Model`](Model.md)\<`any`\>[] = `[]` the components metadata. #### Returns [`View`](View.md) ## Accessors ### viewerWrappers #### Get Signature > **get** **viewerWrappers**(): [`FormViewerWrapper`](../type-aliases/FormViewerWrapper.md)[] Retrieves the viewer wrappers array. ##### Returns [`FormViewerWrapper`](../type-aliases/FormViewerWrapper.md)[] the viewer wrappers array. ## Methods ### all() > **all**(): [`Model`](Model.md)\<`any`\>[] #### Returns [`Model`](Model.md)\<`any`\>[] all component metadata for the form viewer. *** ### define() > **define**(`model`): `void` Defines the component's metadata for the form viewer. #### Parameters • **model**: [`Model`](Model.md)\<`any`\> the component's metadata. #### Returns `void` *** ### find() > **find**(`type`): `undefined` \| [`Model`](Model.md)\<`any`\> Returns the component's metadata for the form viewer for the specified type. #### Parameters • **type**: `string` the component type. #### Returns `undefined` \| [`Model`](Model.md)\<`any`\> the component metadata for the form viewer for the specified type or undefined. *** ### get() > **get**(`type`): [`Model`](Model.md)\<`any`\> Returns the component's metadata for the form viewer for the specified type. #### Parameters • **type**: `string` the component type. #### Returns [`Model`](Model.md)\<`any`\> the component metadata for the form viewer for the specified type. *** ### getCssLoaders() > **getCssLoaders**(`biDi`): () => `Promise`\<`void`\>[] Retrieves the CSS loaders for a given BiDi. #### Parameters • **biDi**: [`BiDi`](../enumerations/BiDi.md) the BiDi object for which to retrieve the CSS loaders. #### Returns () => `Promise`\<`void`\>[] the array containing the CSS loaders for the specified BiDi. *** ### withCssLoader() > **withCssLoader**(`cssLoaderType`, `loader`): [`View`](View.md) Applies the given CSS loader to the component based on the BiDi layout. #### Parameters • **cssLoaderType**: [`CssLoaderType`](../type-aliases/CssLoaderType.md) the BiDi layout type, either 'common', 'ltr', or 'rtl'. • **loader** the function that returns a Promise to load CSS or other required localization resources. #### Returns [`View`](View.md) the [View](View.md) instance. *** ### withViewerWrapper() > **withViewerWrapper**(`wrapper`): [`View`](View.md) Adds a wrapper to the list of viewers for this viewer wrapper. #### Parameters • **wrapper**: [`FormViewerWrapper`](../type-aliases/FormViewerWrapper.md) the viewer wrapper to be added. The wrapper is a component that wraps the form viewer. #### Returns [`View`](View.md) the [View](View.md) instance. *** ### create() > `static` **create**(`models`): [`View`](View.md) Static wrapper for the [View](View.md) constructor. #### Parameters • **models**: [`Model`](Model.md)\<`any`\>[] the components metadata. #### Returns [`View`](View.md) the [View](View.md) instance. --- # Enumeration: BiDi The enumeration of bidirectional text layout types. ## Enumeration Members ### LTR > **LTR**: `"ltr"` Left to right. *** ### RTL > **RTL**: `"rtl"` Right to left. --- # Enumeration: PersistedFormVersion The version of the saved form. ## Enumeration Members ### version1 > **version1**: `"1"` --- # Function: BuilderModeProvider() > **BuilderModeProvider**(`props`): `null` \| `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\> The BuilderMode context provider. ## Parameters • **props**: `ProviderProps`\<[`BuilderMode`](../type-aliases/BuilderMode.md)\> ## Returns `null` \| `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\> --- # Function: ComponentDataProvider() > **ComponentDataProvider**(`props`): `null` \| `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\> Context provider for the useComponentData hook. **Internal use only.** ## Parameters • **props**: `ProviderProps`\<[`ComponentData`](../classes/ComponentData.md)\> ## Returns `null` \| `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\> --- # Function: ComponentTree() > **ComponentTree**(`props`): `Element` The React component that displays an array of ComponentData. **Internal use only.** ## Parameters • **props**: [`ComponentTreeProps`](../interfaces/ComponentTreeProps.md) the React component properties. ## Returns `Element` the React element. --- # Function: DefaultWrapper() > **DefaultWrapper**(`props`): `Element` The React component that wraps every component in a form. ## Parameters • **props**: `DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLDivElement`\>, `HTMLDivElement`\> the React component properties. ## Returns `Element` the React element. --- # Function: FormViewer() > **FormViewer**(`props`): `Element` The main React component of the form viewer. ## Parameters • **props**: [`FormViewerProps`](../interfaces/FormViewerProps.md) the React component properties. ## Returns `Element` the React element. --- # Function: SDiv() > **SDiv**(`props`): `Element` The React component that wraps every component in a form. ## Parameters • **props**: `DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLDivElement`\>, `HTMLDivElement`\> the React component properties. ## Returns `Element` the React element. --- # Function: StoreContext() > **StoreContext**(`props`): `null` \| `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\> **Internal use only.** ## Parameters • **props**: `ProviderProps`\<`null` \| [`Store`](../classes/Store.md)\> ## Returns `null` \| `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\> --- # Function: StoreProvider() > **StoreProvider**(`props`): `null` \| `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\> **Internal use only.** ## Parameters • **props**: `ProviderProps`\<[`Store`](../classes/Store.md)\> ## Returns `null` \| `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\> --- # Function: SuppressResizeObserverErrors() > **SuppressResizeObserverErrors**(`props`): `Element` SuppressResizeObserverErrors component is used to suppress ResizeObserver errors. **Internal use only.** ## Parameters • **props**: [`SuppressResizeObserverErrorsProps`](../interfaces/SuppressResizeObserverErrorsProps.md) the component props. ## Returns `Element` the rendered child elements. --- # Function: ViewerPropsProvider() > **ViewerPropsProvider**(`props`): `null` \| `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\> **Internal use only.** ## Parameters • **props**: `ProviderProps`\<`Readonly`\<[`FormViewerProps`](../interfaces/FormViewerProps.md)\>\> ## Returns `null` \| `ReactElement`\<`unknown`, `string` \| `JSXElementConstructor`\<`any`\>\> --- # Function: buildForm() > **buildForm**(`options`?): [`IFormJsonBuilder`](../interfaces/IFormJsonBuilder.md) Creates and returns a new form JSON builder instance. ## Parameters • **options?**: [`FormOptions`](../type-aliases/FormOptions.md) the optional configuration options for the form. ## Returns [`IFormJsonBuilder`](../interfaces/IFormJsonBuilder.md) the instance of [IFormJsonBuilder](../interfaces/IFormJsonBuilder.md) to start building the form. --- # Function: calculatePropertyValue() > **calculatePropertyValue**(`componentProperty`, `formViewerData`): [`CalculableResult`](../classes/CalculableResult.md) Calculates the value for the component property. **Internal use only.** ## Parameters • **componentProperty**: [`ComponentProperty`](../interfaces/ComponentProperty.md) the component property. • **formViewerData**: [`IFormData`](../interfaces/IFormData.md) the formViewerData data. ## Returns [`CalculableResult`](../classes/CalculableResult.md) the calculated value. --- # Function: checkSlotCondition() > **checkSlotCondition**(`childStore`, `parentProps`): `any` Performs the function of checking if the child component can be bound. **Internal use only.** ## Parameters • **childStore**: [`ComponentStore`](../classes/ComponentStore.md) the child component settings. • **parentProps**: `any` the parent component properties. ## Returns `any` true, if the child component can be bound, false otherwise. --- # Function: createActionValuesFromObject() > **createActionValuesFromObject**(`obj`): [`ActionValues`](../type-aliases/ActionValues.md) Converts the input object to an ActionValues object. **Internal use only.** ## Parameters • **obj**: `any` the input object. ## Returns [`ActionValues`](../type-aliases/ActionValues.md) the converted ActionValues object. --- # Function: createAnnotation() > **createAnnotation**\<`T`\>(`editor`): [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`T`\> Creates a component property metadata builder. ## Type Parameters • **T** the property type. ## Parameters • **editor**: `string` the property editor type. ## Returns [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`T`\> the component property metadata builder. --- # Function: createNonNullableContext() > **createNonNullableContext**\<`T`\>(`name`, `defaultValue`): [() => `T`, `Provider`\<`T`\>, `Context`\<`T` \| `null`\>] Creates non-nullable React context. **Internal use only.** ## Type Parameters • **T** ## Parameters • **name**: `string` the context name. • **defaultValue**: `null` \| `T` = `null` the optional default value. ## Returns [() => `T`, `Provider`\<`T`\>, `Context`\<`T` \| `null`\>] the tuple [hook, provider, and common context] for interactions with a non-nullable context. --- # Function: createProperty() > **createProperty**(`editor`): [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> Creates an instance of the builder class to define the property's metadata. ## Parameters • **editor**: `string` editor type for editing the property. ## Returns [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> the instance of the builder class to define the property's metadata. --- # Function: createView() > **createView**(`models`): [`View`](../classes/View.md) Static wrapper for the [View](../classes/View.md) constructor. ## Parameters • **models**: [`Model`](../classes/Model.md)\<`any`\>[] the components metadata. ## Returns [`View`](../classes/View.md) the [View](../classes/View.md) instance. --- # Function: define() > **define**\<`T`\>(`component`, `displayName`?): [`Definer`](../classes/Definer.md)\<`T`\> Static method to create an instance of the component's metadata builder class. ## Type Parameters • **T** *extends* `object` ## Parameters • **component**: `ComponentType`\<`T`\> the React component. • **displayName?**: `string` the display name for the anonymous component. ## Returns [`Definer`](../classes/Definer.md)\<`T`\> the instance of the [Definer](../classes/Definer.md) class. --- # Function: definePreset() > **definePreset**(`name`, `components`): [`Definer`](../classes/Definer.md)\<`object`\> Static method to create an instance of the preset component's metadata builder class. ## Parameters • **name**: `string` the preset name. • **components**: [`ComponentStore`](../classes/ComponentStore.md)[] the components of the preset. ## Returns [`Definer`](../classes/Definer.md)\<`object`\> the instance of the [Definer](../classes/Definer.md) class. --- # Function: findLanguage() > **findLanguage**(`languages`, `language`): [`Language`](../classes/Language.md) \| `undefined` Finds [Language](../classes/Language.md) by language code. ## Parameters • **languages**: [`Language`](../classes/Language.md)[] the array of languages to look in. • **language**: \`$\{string\}-$\{string\}\` the language code. ## Returns [`Language`](../classes/Language.md) \| `undefined` found [Language](../classes/Language.md), or the default Language if no Language exists for the language code. --- # Function: findTreeElementDepth() > **findTreeElementDepth**\<`T`\>(`value`, `element`?, `depth`?): `number` \| `undefined` Finds the depth of a given element in a tree. **Internal use only.** ## Type Parameters • **T** *extends* `object` ## Parameters • **value**: `T` the root of the tree. • **element?**: `T` the element to find the depth of. • **depth?**: `number` = `0` the current depth of the tree (optional, default is 0). ## Returns `number` \| `undefined` the depth of the element in the tree, or undefined if the element is not found. --- # Function: forwardRef() > **forwardRef**\<`T`, `P`\>(`render`): `ForwardRefExoticComponent`\<`P`\> \| `ForwardRefExoticComponent`\<`PropsWithoutRef`\<`P`\> & `RefAttributes`\<`T`\>\> Shim to be compatible with React 19. ## Type Parameters • **T** • **P** = `object` ## Parameters • **render**: `ForwardRefRenderFunction`\<`T`, `P` & `object`\> the forward ref render function. ## Returns `ForwardRefExoticComponent`\<`P`\> \| `ForwardRefExoticComponent`\<`PropsWithoutRef`\<`P`\> & `RefAttributes`\<`T`\>\> the React component. --- # Function: generateTemplateTypeName() > **generateTemplateTypeName**(`name`): `string` Generates the template type name from the specified template name. **Internal use only.** ## Parameters • **name**: `string` the template name. ## Returns `string` the template type name. --- # Function: generateUniqueName() > **generateUniqueName**(`prefix`, `existingNames`): `string` Generates a unique name with the specified prefix. **Internal use only.** ## Parameters • **prefix**: `string` the prefix. • **existingNames**: `Set`\<`string`\> the set of existing names to match with which uniqueness will be checked. ## Returns `string` the generated name. --- # Function: getChildren() > **getChildren**(`data`, `componentTreeItem`, `componentProps`): `Record`\<`string`, `any`\> Returns the Record with all child components. **Internal use only.** ## Parameters • **data**: [`ComponentData`](../classes/ComponentData.md) the parent component's data necessary to display the component. • **componentTreeItem**: `ComponentType`\<[`ComponentTreeProps`](../interfaces/ComponentTreeProps.md)\> the type of React component that wraps child components. • **componentProps**: `Record`\<`string`, `any`\> the properties of the parent component. ## Returns `Record`\<`string`, `any`\> the Record with all child components. --- # Function: getDefault() > **getDefault**(`annotations`): `Readonly`\<`Record`\<`string`, `any`\>\> Extracts component properties default values from annotations . **Internal use only.** ## Parameters • **annotations**: [`Annotation`](../classes/Annotation.md)[] the array of component annotations. ## Returns `Readonly`\<`Record`\<`string`, `any`\>\> the object containing component properties default values. --- # Function: getDefaultCss() > **getDefaultCss**(`annotations`): `Readonly`\<`Record`\<`string`, `any`\>\> Extracts CSS properties default values from annotations . **Internal use only.** ## Parameters • **annotations**: [`Annotation`](../classes/Annotation.md)[] the array of component annotations. ## Returns `Readonly`\<`Record`\<`string`, `any`\>\> the object with CSS properties default values. --- # Function: getFluentCompatibleId() > **getFluentCompatibleId**(`rawId`): `string` Converts the raw id to a Fluent compatible id, i.e. replaces all the spaces with underscores. **Internal use only.** ## Parameters • **rawId**: `string` some raw id. ## Returns `string` the Fluent compatible id. --- # Function: getFluentData() > **getFluentData**(`data`, `parentKey`): `Record`\<`string`, `FluentVariable`\> Converts the form data to a Fluent compatible. **Internal use only.** ## Parameters • **data**: `Record`\<`string`, `unknown`\> the form data. • **parentKey**: `string` = `''` the parent property key. ## Returns `Record`\<`string`, `FluentVariable`\> all the form data that is of the FluentVariable type. Additionally, the keys of the returned object are converted to the snake case. --- # Function: getKey() > **getKey**(): `string` Generates the random string. **Internal use only.** ## Returns `string` the generated random string. --- # Function: getValidatorPropertyBlockType() > **getValidatorPropertyBlockType**(`ruleKey`): `string` Retrieves the property block type for a given rule key. **Internal use only.** ## Parameters • **ruleKey**: `string` the rule key. ## Returns `string` the property block type. Validator property block types are prefixed with 'validator-'. --- # Function: groupBy() > **groupBy**\<`T`\>(`array`, `predicate`): `Record`\<`string`, `T`[]\> Groups the array of values by function predicate. **Internal use only.** ## Type Parameters • **T** ## Parameters • **array**: `T`[] the array of values. • **predicate** the function that returns a string to group the values of the array. ## Returns `Record`\<`string`, `T`[]\> the Record with grouped values. --- # Function: initFormFields() > **initFormFields**(`form`): `Record`\<`string`, `unknown`\> Replaces empty form fields with an empty string. **Internal use only.** ## Parameters • **form**: [`ComponentData`](../classes/ComponentData.md) the form. ## Returns `Record`\<`string`, `unknown`\> all form data where empty fields are filled with empty strings. --- # Function: isContainer() > **isContainer**(`value`): `value is ContainerAnnotation` Type predicate, asserts that the value is an instance of ContainerAnnotation. **Internal use only.** ## Parameters • **value**: [`Annotation`](../classes/Annotation.md) the value. ## Returns `value is ContainerAnnotation` true if the value is an instance of ContainerAnnotation, false otherwise. --- # Function: isFunctionalProperty() > **isFunctionalProperty**(`componentProperty`?): `boolean` Returns true if the property value is calculated by the function, otherwise false. **Internal use only.** ## Parameters • **componentProperty?**: [`ComponentProperty`](../interfaces/ComponentProperty.md) the component property. ## Returns `boolean` true if the property value is calculated by the function, otherwise false. --- # Function: isLocalizedProperty() > **isLocalizedProperty**(`componentProperty`?): `boolean` Returns true if the property value is localized, otherwise false. **Internal use only.** ## Parameters • **componentProperty?**: [`ComponentProperty`](../interfaces/ComponentProperty.md) the component property. ## Returns `boolean` true if the property value is localized, otherwise false. --- # Function: isPromise() > **isPromise**\<`T`\>(`value`): `value is Promise` Type predicate, asserts that the value is a Promise. **Internal use only.** ## Type Parameters • **T** = `any` ## Parameters • **value**: `any` the value. ## Returns `value is Promise` true if the value is a Promise, false otherwise. --- # Function: isProperty() > **isProperty**(`value`): `value is PropertyAnnotation` Type predicate, asserts that the value is an instance of PropertyAnnotation. **Internal use only.** ## Parameters • **value**: [`Annotation`](../classes/Annotation.md) the value. ## Returns `value is PropertyAnnotation` true if the value is an instance of PropertyAnnotation, false otherwise. --- # Function: isString() > **isString**(`value`): `value is string` Type predicate, asserts that the value is a string. **Internal use only.** ## Parameters • **value**: `any` the value. ## Returns `value is string` true if the value is a string, false otherwise. --- # Function: isUniqueKey() > **isUniqueKey**(`value`, `store`, `args`?, `formData`?): [`RuleValidatorResult`](../type-aliases/RuleValidatorResult.md) \| `Promise`\<[`RuleValidatorResult`](../type-aliases/RuleValidatorResult.md)\> Returns true if the component key is unique across the entire component tree. **Internal use only.** ## Parameters • **value**: `string` the component key. • **store**: [`IStore`](../interfaces/IStore.md) the form viewer settings. • **args?**: `Record`\<`string`, `unknown`\> • **formData?**: [`IFormData`](../interfaces/IFormData.md) ## Returns [`RuleValidatorResult`](../type-aliases/RuleValidatorResult.md) \| `Promise`\<[`RuleValidatorResult`](../type-aliases/RuleValidatorResult.md)\> true if the component key is unique across the entire component tree. --- # Function: isValidatorPropertyBlockType() > **isValidatorPropertyBlockType**(`type`): `boolean` Determines if the given type is a validator property block type. **Internal use only.** ## Parameters • **type**: `string` the type to be checked. ## Returns `boolean` the boolean value indicating if the type is a validator property block type. --- # Function: loadResource() > **loadResource**(`id`, `href`, `rel`): `Promise`\<`void`\> Loads a resource into the document head asynchronously. **Internal use only.** ## Parameters • **id**: `string` the identifier of the resource. • **href**: `string` represents a URL to the resource. • **rel**: `string` the relationship of the resource to the document. ## Returns `Promise`\<`void`\> the promise that resolves when the resource has been loaded successfully. --- # Function: nameAutorun() > **nameAutorun**(`owner`, `name`, `params`): `string` Computes the autorun name based on the owner, name, and parameters. **Internal use only.** ## Parameters • **owner**: `string` the owner of the autorun. • **name**: `string` the name of the autorun. • **params**: `Record`\<`string`, `any`\> = `{}` the parameters for specific autorun. ## Returns `string` the computed autorun name. --- # Function: nameObservable() > **nameObservable**(`owner`, `params`): `string` Computes the observable name based on the owner, name, and parameters. **Internal use only.** ## Parameters • **owner**: `string` the owner of the observable. • **params**: `Record`\<`string`, `any`\> = `{}` the parameters for specific observable. ## Returns `string` the computed observable name. --- # Function: namedObserver() > **namedObserver**\<`T`\>(`displayName`, `component`): `T` Creates the observable React component. **Internal use only.** ## Type Parameters • **T** *extends* `ComponentType`\<`any`\> ## Parameters • **displayName**: `string` the displayName value of the React component. • **component**: `T` the React component. ## Returns `T` the observable React component. --- # Function: oneOf() > **oneOf**\<`U`\>(...`values`): [`OneOfBuilder`](../classes/OneOfBuilder.md)\<`U`\> The annotation builder for a component property with type 'enum', the property value can only be one of enum. ## Type Parameters • **U** *extends* `string` \| `number` ## Parameters • ...**values**: `U`[] the possible values for the property. ## Returns [`OneOfBuilder`](../classes/OneOfBuilder.md)\<`U`\> the instance of the metadata property builder. --- # Function: someOf() > **someOf**\<`U`\>(...`values`): [`SomeOfBuilder`](../classes/SomeOfBuilder.md)\<`U`\> The annotation builder for a component property with type 'enum', the property value can contain multiple enum values. ## Type Parameters • **U** *extends* `string` \| `number` ## Parameters • ...**values**: `U`[] the possible values for the property. ## Returns [`SomeOfBuilder`](../classes/SomeOfBuilder.md)\<`U`\> the instance of the metadata property builder. --- # Function: testFluentLocalization() > **testFluentLocalization**(`request`): [`CalculableResult`](../classes/CalculableResult.md) Localization testing function. **Internal use only.** ## Parameters • **request**: [`LocalizationTestRequest`](../type-aliases/LocalizationTestRequest.md) the localization testing request. ## Returns [`CalculableResult`](../classes/CalculableResult.md) the localization testing result. --- # Function: toArray() > **toArray**\<`T`\>(`annotations`?, `setup`?): [`Annotation`](../classes/Annotation.md)[] Converts the object containing component property metadata into an array. **Internal use only.** ## Type Parameters • **T** *extends* `object` = `any` ## Parameters • **annotations?**: [`Annotations`](../type-aliases/Annotations.md)\<`T`\> the object containing component property metadata. • **setup?**: `Partial`\<`Partial`\<`Omit`\<[`Annotation`](../classes/Annotation.md), `"key"`\>\> & `Pick`\<[`Annotation`](../classes/Annotation.md), `"editor"`\> & [`BuilderOptions`](../classes/BuilderOptions.md)\> = `{}` the custom options for the component's property metadata builder. ## Returns [`Annotation`](../classes/Annotation.md)[] the metadata array of the component properties. --- # Function: toLabeledValues() > **toLabeledValues**(`items`, `upper`): `object`[] Converts the array of elements into the array of [LabeledValue](../interfaces/LabeledValue.md) elements. ## Parameters • **items**: `string`[] \| [`LabeledValue`](../interfaces/LabeledValue.md)[] the array of elements. • **upper**: `boolean` = `true` if true, the first character in [LabeledValue.label](../interfaces/LabeledValue.md#label) will be capitalized. ## Returns `object`[] the array of [LabeledValue](../interfaces/LabeledValue.md) elements. --- # Function: treeForEach() > **treeForEach**\<`T`\>(`tree`, `fn`): `void` Executes a given function on each node of a tree. **Internal use only.** ## Type Parameters • **T** *extends* `object` ## Parameters • **tree**: `T` the root node of the tree. • **fn** the function to be executed on each node of the tree. ## Returns `void` --- # Function: unloadResource() > **unloadResource**(`id`): `void` Unloads a resource from the DOM based on its ID. **Internal use only.** ## Parameters • **id**: `string` the ID of the resource to unload. ## Returns `void` --- # Function: useAriaAttributes() > **useAriaAttributes**(): `object` ## Returns `object` a record with an 'aria' attributes. ### aria-errormessage > **aria-errormessage**: `string` ### aria-invalid > **aria-invalid**: `boolean` = `error` ### aria-labelledby > **aria-labelledby**: `string` --- # Function: useAriaAttributesIds() > **useAriaAttributesIds**(): `AriaAttributesIds` ## Returns `AriaAttributesIds` a map of aria attributes ids. --- # Function: useAriaInvalid() > **useAriaInvalid**(): `object` ## Returns `object` a record with an 'aria-invalid' attribute. ### aria-invalid > **aria-invalid**: `boolean` = `error` --- # Function: useBuilderMode() > **useBuilderMode**(): [`BuilderMode`](../type-aliases/BuilderMode.md) ## Returns [`BuilderMode`](../type-aliases/BuilderMode.md) the [BuilderMode](../type-aliases/BuilderMode.md) builder mode value. --- # Function: useComponentData() > **useComponentData**(): [`ComponentData`](../classes/ComponentData.md) ## Returns [`ComponentData`](../classes/ComponentData.md) the instance of the ComponentData of the currently rendered component. --- # Function: useDisposable() > **useDisposable**\<`T`\>(`factory`): `T` \| `undefined` Creates a disposable object and dispose the object when the React component is unmounted. **Internal use only.** ## Type Parameters • **T** *extends* [`IDisposable`](../type-aliases/IDisposable.md) ## Parameters • **factory** the factory function to create a disposable object. ## Returns `T` \| `undefined` the disposable object. --- # Function: useErrorModel() > **useErrorModel**(): [`Model`](../classes/Model.md)\<[`ErrorWrapperProps`](../interfaces/ErrorWrapperProps.md)\> ## Returns [`Model`](../classes/Model.md)\<[`ErrorWrapperProps`](../interfaces/ErrorWrapperProps.md)\> the model of React component used to display the error. --- # Function: useStore() > **useStore**(): [`Store`](../classes/Store.md) **Internal use only.** ## Returns [`Store`](../classes/Store.md) --- # Function: useTooltipType() > **useTooltipType**(): `undefined` \| `string` ## Returns `undefined` \| `string` the type of React component used to display the tooltip. **Internal use only.** --- # Function: useViewerProps() > **useViewerProps**(): `Readonly`\<[`FormViewerProps`](../interfaces/FormViewerProps.md)\> **Internal use only.** ## Returns `Readonly`\<[`FormViewerProps`](../interfaces/FormViewerProps.md)\> --- # @react-form-builder/core ## Enumerations - [BiDi](enumerations/BiDi.md) - [PersistedFormVersion](enumerations/PersistedFormVersion.md) ## Classes - [ActionDefinition](classes/ActionDefinition.md) - [ActionEventArgs](classes/ActionEventArgs.md) - [Annotation](classes/Annotation.md) - [AnnotationBuilder](classes/AnnotationBuilder.md) - [ArrayBuilder](classes/ArrayBuilder.md) - [BaseBuilder](classes/BaseBuilder.md) - [BuilderOptions](classes/BuilderOptions.md) - [BuilderView](classes/BuilderView.md) - [CalculableResult](classes/CalculableResult.md) - [ComponentData](classes/ComponentData.md) - [ComponentDataEvents](classes/ComponentDataEvents.md) - [ComponentKeyChangedEventArgs](classes/ComponentKeyChangedEventArgs.md) - [ComponentState](classes/ComponentState.md) - [ComponentStore](classes/ComponentStore.md) - [ContainerAnnotation](classes/ContainerAnnotation.md) - [DataValidator](classes/DataValidator.md) - [Definer](classes/Definer.md) - [EventAnnotation](classes/EventAnnotation.md) - [Form](classes/Form.md) - [FormViewerPropsStore](classes/FormViewerPropsStore.md) - [Language](classes/Language.md) - [LocalizationStore](classes/LocalizationStore.md) - [Meta](classes/Meta.md) - [Model](classes/Model.md) - [ModuleAnnotation](classes/ModuleAnnotation.md) - [NodeAnnotationBuilder](classes/NodeAnnotationBuilder.md) - [OneOfBuilder](classes/OneOfBuilder.md) - [PropertyAnnotation](classes/PropertyAnnotation.md) - [QuantifierBuilder](classes/QuantifierBuilder.md) - [SomeOfBuilder](classes/SomeOfBuilder.md) - [Store](classes/Store.md) - [StyleAnnotation](classes/StyleAnnotation.md) - [SyncEvent](classes/SyncEvent.md) - [TemplateField](classes/TemplateField.md) - [TypedBuilder](classes/TypedBuilder.md) - [View](classes/View.md) ## Interfaces - [BaseCompilationResult](interfaces/BaseCompilationResult.md) - [BuilderComponent](interfaces/BuilderComponent.md) - [ComponentField](interfaces/ComponentField.md) - [ComponentMetadataEventListeners](interfaces/ComponentMetadataEventListeners.md) - [ComponentProperty](interfaces/ComponentProperty.md) - [ComponentTreeProps](interfaces/ComponentTreeProps.md) - [ErrorWrapperProps](interfaces/ErrorWrapperProps.md) - [Field](interfaces/Field.md) - [FormViewerProps](interfaces/FormViewerProps.md) - [FormViewerWrapperComponentProps](interfaces/FormViewerWrapperComponentProps.md) - [IComponentBuilder](interfaces/IComponentBuilder.md) - [IComponentDataFactory](interfaces/IComponentDataFactory.md) - [IComponentState](interfaces/IComponentState.md) - [IDataRootProvider](interfaces/IDataRootProvider.md) - [IEventHandlerBuilder](interfaces/IEventHandlerBuilder.md) - [IFormData](interfaces/IFormData.md) - [IFormJsonBuilder](interfaces/IFormJsonBuilder.md) - [IFormViewer](interfaces/IFormViewer.md) - [IStore](interfaces/IStore.md) - [IValidationBuilder](interfaces/IValidationBuilder.md) - [InternalErrorProps](interfaces/InternalErrorProps.md) - [LabeledValue](interfaces/LabeledValue.md) - [PersistedForm](interfaces/PersistedForm.md) - [ScreenProps](interfaces/ScreenProps.md) - [SuppressResizeObserverErrorsProps](interfaces/SuppressResizeObserverErrorsProps.md) - [WrapperProps](interfaces/WrapperProps.md) ## Type Aliases - [ActionData](type-aliases/ActionData.md) - [ActionEventHandler](type-aliases/ActionEventHandler.md) - [ActionHandler](type-aliases/ActionHandler.md) - [ActionParameters](type-aliases/ActionParameters.md) - [ActionType](type-aliases/ActionType.md) - [ActionValues](type-aliases/ActionValues.md) - [ActionsInitializer](type-aliases/ActionsInitializer.md) - [AnnotationType](type-aliases/AnnotationType.md) - [Annotations](type-aliases/Annotations.md) - [ArgumentValue](type-aliases/ArgumentValue.md) - [Arguments](type-aliases/Arguments.md) - [BoundValueSchema](type-aliases/BoundValueSchema.md) - [BuilderMode](type-aliases/BuilderMode.md) - [BuilderSetup](type-aliases/BuilderSetup.md) - [ComponentKey](type-aliases/ComponentKey.md) - [ComponentKind](type-aliases/ComponentKind.md) - [ComponentLocalizer](type-aliases/ComponentLocalizer.md) - [ComponentPropertyBindType](type-aliases/ComponentPropertyBindType.md) - [ComponentPropertyComputeType](type-aliases/ComponentPropertyComputeType.md) - [ComponentPropertyName](type-aliases/ComponentPropertyName.md) - [ComponentPropsLocalization](type-aliases/ComponentPropsLocalization.md) - [ComponentStateFactory](type-aliases/ComponentStateFactory.md) - [ComponentStoreLocalizer](type-aliases/ComponentStoreLocalizer.md) - [ComponentsLocalization](type-aliases/ComponentsLocalization.md) - [ComputeChildren](type-aliases/ComputeChildren.md) - [Css](type-aliases/Css.md) - [CssLoaderType](type-aliases/CssLoaderType.md) - [CssPart](type-aliases/CssPart.md) - [CustomActions](type-aliases/CustomActions.md) - [CustomValidationRuleSettings](type-aliases/CustomValidationRuleSettings.md) - [CustomValidationRules](type-aliases/CustomValidationRules.md) - [DefineActionHelper](type-aliases/DefineActionHelper.md) - [DefinerData](type-aliases/DefinerData.md) - [Device](type-aliases/Device.md) - [DeviceStyle](type-aliases/DeviceStyle.md) - [EditorType](type-aliases/EditorType.md) - [ErrorMap](type-aliases/ErrorMap.md) - [ErrorMessageLocalizer](type-aliases/ErrorMessageLocalizer.md) - [EventName](type-aliases/EventName.md) - [FieldType](type-aliases/FieldType.md) - [FirstParameter](type-aliases/FirstParameter.md) - [FormOptions](type-aliases/FormOptions.md) - [FormValidator](type-aliases/FormValidator.md) - [FormValidators](type-aliases/FormValidators.md) - [FormViewerValidationRules](type-aliases/FormViewerValidationRules.md) - [FormViewerWrapper](type-aliases/FormViewerWrapper.md) - [Func](type-aliases/Func.md) - [GetInitialDataFn](type-aliases/GetInitialDataFn.md) - [HtmlAttribute](type-aliases/HtmlAttribute.md) - [IDisposable](type-aliases/IDisposable.md) - [InsertRestrictionFn](type-aliases/InsertRestrictionFn.md) - [LanguageFullCode](type-aliases/LanguageFullCode.md) - [LocalizationTestRequest](type-aliases/LocalizationTestRequest.md) - [LocalizationType](type-aliases/LocalizationType.md) - [LocalizationValue](type-aliases/LocalizationValue.md) - [MessagesMap](type-aliases/MessagesMap.md) - [NamedActionDefinition](type-aliases/NamedActionDefinition.md) - [ParameterDefinition](type-aliases/ParameterDefinition.md) - [ParameterName](type-aliases/ParameterName.md) - [ParameterType](type-aliases/ParameterType.md) - [PreAnnotation](type-aliases/PreAnnotation.md) - [PropertyBlockType](type-aliases/PropertyBlockType.md) - [PropertyKey](type-aliases/PropertyKey.md) - [Rel](type-aliases/Rel.md) - [ResolvedValidator](type-aliases/ResolvedValidator.md) - [RuleValidator](type-aliases/RuleValidator.md) - [RuleValidatorResult](type-aliases/RuleValidatorResult.md) - [SchemaResolver](type-aliases/SchemaResolver.md) - [SchemaType](type-aliases/SchemaType.md) - [SchemaTypeMap](type-aliases/SchemaTypeMap.md) - [Setter](type-aliases/Setter.md) - [SyncEventHandler](type-aliases/SyncEventHandler.md) - [TypedLocalization](type-aliases/TypedLocalization.md) - [ValidationMessages](type-aliases/ValidationMessages.md) - [ValidationResult](type-aliases/ValidationResult.md) - [ValidationRule](type-aliases/ValidationRule.md) - [ValidationRuleParameter](type-aliases/ValidationRuleParameter.md) - [ValidationRuleSet](type-aliases/ValidationRuleSet.md) - [ValidationRuleSettings](type-aliases/ValidationRuleSettings.md) - [ValidatorFactory](type-aliases/ValidatorFactory.md) - [ValidatorType](type-aliases/ValidatorType.md) - [Validators](type-aliases/Validators.md) - [ViewMode](type-aliases/ViewMode.md) ## Variables - [ActionEventArgsDeclaration](variables/ActionEventArgsDeclaration.md) - [AsyncFunction](variables/AsyncFunction.md) - [DidMountEvent](variables/DidMountEvent.md) - [IFormDataDeclaration](variables/IFormDataDeclaration.md) - [KeySymbol](variables/KeySymbol.md) - [WillUnmountEvent](variables/WillUnmountEvent.md) - [array](variables/array.md) - [boolean](variables/boolean.md) - [className](variables/className.md) - [color](variables/color.md) - [commonStyles](variables/commonStyles.md) - [containerStyles](variables/containerStyles.md) - [cssSize](variables/cssSize.md) - [date](variables/date.md) - [disabled](variables/disabled.md) - [emotionCache](variables/emotionCache.md) - [emptyComponentStore](variables/emptyComponentStore.md) - [errorMessageModel](variables/errorMessageModel.md) - [event](variables/event.md) - [globalDefaultLanguage](variables/globalDefaultLanguage.md) - [htmlAttributes](variables/htmlAttributes.md) - [internalErrorModel](variables/internalErrorModel.md) - [key](variables/key.md) - [node](variables/node.md) - [nodeArray](variables/nodeArray.md) - [number](variables/number.md) - [object](variables/object.md) - [readOnly](variables/readOnly.md) - [renderWhen](variables/renderWhen.md) - [screenModel](variables/screenModel.md) - [size](variables/size.md) - [slotModel](variables/slotModel.md) - [string](variables/string.md) - [time](variables/time.md) - [timeFormat](variables/timeFormat.md) - [tooltipProps](variables/tooltipProps.md) - [tooltipType](variables/tooltipType.md) - [validation](variables/validation.md) ## Functions - [BuilderModeProvider](functions/BuilderModeProvider.md) - [ComponentDataProvider](functions/ComponentDataProvider.md) - [ComponentTree](functions/ComponentTree.md) - [DefaultWrapper](functions/DefaultWrapper.md) - [FormViewer](functions/FormViewer.md) - [SDiv](functions/SDiv.md) - [StoreContext](functions/StoreContext.md) - [StoreProvider](functions/StoreProvider.md) - [SuppressResizeObserverErrors](functions/SuppressResizeObserverErrors.md) - [ViewerPropsProvider](functions/ViewerPropsProvider.md) - [buildForm](functions/buildForm.md) - [calculatePropertyValue](functions/calculatePropertyValue.md) - [checkSlotCondition](functions/checkSlotCondition.md) - [createActionValuesFromObject](functions/createActionValuesFromObject.md) - [createAnnotation](functions/createAnnotation.md) - [createNonNullableContext](functions/createNonNullableContext.md) - [createProperty](functions/createProperty.md) - [createView](functions/createView.md) - [define](functions/define.md) - [definePreset](functions/definePreset.md) - [findLanguage](functions/findLanguage.md) - [findTreeElementDepth](functions/findTreeElementDepth.md) - [forwardRef](functions/forwardRef.md) - [generateTemplateTypeName](functions/generateTemplateTypeName.md) - [generateUniqueName](functions/generateUniqueName.md) - [getChildren](functions/getChildren.md) - [getDefault](functions/getDefault.md) - [getDefaultCss](functions/getDefaultCss.md) - [getFluentCompatibleId](functions/getFluentCompatibleId.md) - [getFluentData](functions/getFluentData.md) - [getKey](functions/getKey.md) - [getValidatorPropertyBlockType](functions/getValidatorPropertyBlockType.md) - [groupBy](functions/groupBy.md) - [initFormFields](functions/initFormFields.md) - [isContainer](functions/isContainer.md) - [isFunctionalProperty](functions/isFunctionalProperty.md) - [isLocalizedProperty](functions/isLocalizedProperty.md) - [isPromise](functions/isPromise.md) - [isProperty](functions/isProperty.md) - [isString](functions/isString.md) - [isUniqueKey](functions/isUniqueKey.md) - [isValidatorPropertyBlockType](functions/isValidatorPropertyBlockType.md) - [loadResource](functions/loadResource.md) - [nameAutorun](functions/nameAutorun.md) - [nameObservable](functions/nameObservable.md) - [namedObserver](functions/namedObserver.md) - [oneOf](functions/oneOf.md) - [someOf](functions/someOf.md) - [testFluentLocalization](functions/testFluentLocalization.md) - [toArray](functions/toArray.md) - [toLabeledValues](functions/toLabeledValues.md) - [treeForEach](functions/treeForEach.md) - [unloadResource](functions/unloadResource.md) - [useAriaAttributes](functions/useAriaAttributes.md) - [useAriaAttributesIds](functions/useAriaAttributesIds.md) - [useAriaInvalid](functions/useAriaInvalid.md) - [useBuilderMode](functions/useBuilderMode.md) - [useComponentData](functions/useComponentData.md) - [useDisposable](functions/useDisposable.md) - [useErrorModel](functions/useErrorModel.md) - [useStore](functions/useStore.md) - [useTooltipType](functions/useTooltipType.md) - [useViewerProps](functions/useViewerProps.md) --- # Interface: BaseCompilationResult The result of compiling of anything. **Internal use only.** ## Properties ### error > **error**: `boolean` Flag if true - compilation failed, false otherwise. *** ### exceptions? > `optional` **exceptions**: `Error`[] The array of compilation errors. --- # Interface: BuilderComponent Description of the React component that connects to the form builder. Contains metadata for the form builder and metadata for the form viewer. ## Properties ### category? > `readonly` `optional` **category**: `string` The name of the component category in the designer. *** ### meta > `readonly` **meta**: [`Meta`](../classes/Meta.md) The component metadata for the form builder. *** ### model > `readonly` **model**: [`Model`](../classes/Model.md)\<`any`\> The component metadata for the form viewer. --- # Interface: ComponentField Describes the field of the component. ## Properties ### dataKey > **dataKey**: `string` The component data key. *** ### field > **field**: [`Field`](Field.md) The component field. --- # Interface: ComponentMetadataEventListeners Component metadata event listeners. ## Properties ### onSelectNode()? > `optional` **onSelectNode**: (`node`, `self`) => `void` The callback function that is called when the component is selected. #### Parameters • **node**: [`ComponentData`](../classes/ComponentData.md) the selected component data. • **self**: [`ComponentData`](../classes/ComponentData.md) the component data. #### Returns `void` --- # Interface: ComponentProperty The value of the component property. ## Properties ### computeType? > `optional` **computeType**: [`ComponentPropertyComputeType`](../type-aliases/ComponentPropertyComputeType.md) Type of the component's calculated property. If not specified - the value from value is used. *** ### fnSource? > `optional` **fnSource**: `string` Source code of the function for calculating the value of a component property. *** ### value? > `optional` **value**: `any` The simple value of a component property. --- # Interface: ComponentTreeProps Properties of a form component tree element. ## Properties ### componentDataViewer? > `optional` **componentDataViewer**: `ComponentType` The component displaying an item. *** ### data > **data**: [`ComponentData`](../classes/ComponentData.md)[] An array of child elements of the tree. --- # Interface: ErrorWrapperProps Properties of the React component that wraps the form view component and displays validation errors. ## Extended by ## Properties ### children? > `optional` **children**: `ReactNode` The wrapped component. *** ### className? > `optional` **className**: `string` The CSS class name. *** ### error? > `optional` **error**: `string` The error text. --- # Interface: Field Field with the form data. ## Properties ### clear() > **clear**: () => `void` Clears the data in the field. #### Returns `void` *** ### dispose() > **dispose**: () => `void` Releases allocated resources, must be used when destroying an object instance. #### Returns `void` *** ### error? > `optional` **error**: `string` Contains a field validation error if the field data is not valid. *** ### errors? > `optional` **errors**: `Record`\<`string`, `unknown`\> \| `Record`\<`string`, `unknown`\>[] Contains a field validation errors if the field provides multiple errors (i.e. field is template). Contains an array of field validation errors if the field contains an array of components. *** ### fieldType > **fieldType**: [`FieldType`](../type-aliases/FieldType.md) The field type. *** ### getValidationResult() > **getValidationResult**: () => `Promise`\<[`ValidationMessages`](../type-aliases/ValidationMessages.md) \| [`ValidationMessages`](../type-aliases/ValidationMessages.md)[]\> Returns the validation results without triggering an events and changing the state of the form. #### Returns `Promise`\<[`ValidationMessages`](../type-aliases/ValidationMessages.md) \| [`ValidationMessages`](../type-aliases/ValidationMessages.md)[]\> the [ValidationMessages](../type-aliases/ValidationMessages.md) validation results. *** ### init() > **init**: () => `void` Initializes the value of the field. #### Returns `void` *** ### reset() > **reset**: () => `void` Sets the field to its default value. #### Returns `void` *** ### setError() > **setError**: (`error`) => `void` Sets the error value. #### Parameters • **error**: `unknown` The error value to be set. #### Returns `void` *** ### setTouched() > **setTouched**: () => `void` Marks the field as touched. #### Returns `void` *** ### setValue() > **setValue**: (`value`) => `void` Sets the value of the field. #### Parameters • **value**: `unknown` the value. #### Returns `void` *** ### storeDataInParentForm? > `optional` **storeDataInParentForm**: `boolean` Flag, false if nested form data show as nested object, true otherwise. *** ### touched > **touched**: `boolean` Flag, true, if the field is marked as touched. *** ### validate() > **validate**: () => `Promise`\<`void`\> Validates the field value. #### Returns `Promise`\<`void`\> *** ### value > **value**: `unknown` Value of the field. *** ### valued > **valued**: `string` The name of the component property that contains the field value. --- # Interface: FormViewerProps Form viewer React component properties. ## Properties ### actions? > `optional` **actions**: [`CustomActions`](../type-aliases/CustomActions.md) Custom actions for the form viewer. *** ### componentWrapper? > `optional` **componentWrapper**: `ComponentType`\<`any`\> The React component that wraps every component in a form. **Internal use only.** *** ### disabled? > `optional` **disabled**: `boolean` If true, the form is disabled. *** ### erroneous? > `optional` **erroneous**: `boolean` If true, the component will not be wrapped by the error display component. **Attention! Don't use it! Unstable API.** *** ### errorWrapper? > `optional` **errorWrapper**: `ComponentType`\<[`ErrorWrapperProps`](ErrorWrapperProps.md)\> The default error wrapper used when errorType is not specified in the form. *** ### errors? > `optional` **errors**: `Record`\<`string`, `unknown`\> The form validation errors. *** ### formName? > `optional` **formName**: `string` The form name. *** ### formValidators? > `optional` **formValidators**: [`FormValidators`](../type-aliases/FormValidators.md) The set of functions that validate the form data. *** ### getForm()? > `optional` **getForm**: (`name`?) => `string` \| `Promise`\<`string`\> Loads the form. #### Parameters • **name?**: `string` the form name. #### Returns `string` \| `Promise`\<`string`\> the string or Promise with the form. *** ### initialData? > `optional` **initialData**: `Record`\<`string`, `unknown`\> The initial data of the form. *** ### language? > `optional` **language**: \`$\{string\}-$\{string\}\` The language of the form, e.g. 'en-US'. *** ### localize? > `optional` **localize**: [`ComponentLocalizer`](../type-aliases/ComponentLocalizer.md) The function to localize the properties of a component. *** ### onFormDataChange()? > `optional` **onFormDataChange**: (`data`) => `void` The event is called whenever a form data changes. #### Parameters • **data**: [`IFormData`](IFormData.md) the [IFormData](IFormData.md) with all the form data. #### Returns `void` *** ### readOnly? > `optional` **readOnly**: `boolean` If true, the form is read-only. *** ### showAllValidationErrors? > `optional` **showAllValidationErrors**: `boolean` If true, all validation errors will be displayed. *** ### validators? > `optional` **validators**: `Partial`\<`Record`\\> The set of metadata of validation rules, grouped by the type of value being validated. *** ### view > **view**: [`View`](../classes/View.md) All the metadata of the components of the form viewer. *** ### viewMode? > `optional` **viewMode**: [`ViewMode`](../type-aliases/ViewMode.md) Display resolution type. *** ### viewerRef? > `optional` **viewerRef**: `ForwardedRef`\<[`IFormViewer`](IFormViewer.md)\> The reference to [IFormViewer](IFormViewer.md). --- # Interface: FormViewerWrapperComponentProps Represents the props for the WrapperComponent. WrapperComponent is a component that wraps the form viewer. Can be added externally. ## Properties ### children > **children**: `ReactNode` The React child node. *** ### language > **language**: [`Language`](../classes/Language.md) The FormViewer language. --- # Interface: IComponentBuilder Interface for configuring a specific component within the form. ## Extends - [`IFormJsonBuilder`](IFormJsonBuilder.md) ## Extended by - [`IEventHandlerBuilder`](IEventHandlerBuilder.md) - [`IValidationBuilder`](IValidationBuilder.md) ## Methods ### children() > **children**(`childrenBuilder`): [`IComponentBuilder`](IComponentBuilder.md) Adds child components inside this component. #### Parameters • **childrenBuilder** the function that builds the child components. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for method chaining. *** ### component() > **component**(`key`, `type`): [`IComponentBuilder`](IComponentBuilder.md) Adds a component to the form. #### Parameters • **key**: `string` the unique identifier of the component. • **type**: `string` the type of the component. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for further configuration. #### Inherited from [`IFormJsonBuilder`](IFormJsonBuilder.md).[`component`](IFormJsonBuilder.md#component) *** ### event() > **event**(`eventName`): [`IEventHandlerBuilder`](IEventHandlerBuilder.md) Starts configuring an event handler for the given event name. #### Parameters • **eventName**: `string` the name of the event (e.g., "onClick", "onChange"). #### Returns [`IEventHandlerBuilder`](IEventHandlerBuilder.md) the event handler builder. *** ### json() > **json**(): `string` Serializes the current state of the form into a JSON string. #### Returns `string` JSON representation of the form. #### Inherited from [`IFormJsonBuilder`](IFormJsonBuilder.md).[`json`](IFormJsonBuilder.md#json) *** ### prop() > **prop**(`key`, `value`): [`IComponentBuilder`](IComponentBuilder.md) Sets a property on the component. #### Parameters • **key**: `string` the name of the property. • **value**: `any` the value of the property. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for method chaining. *** ### style() > **style**(`value`, `device`?): [`IComponentBuilder`](IComponentBuilder.md) Applies styles to the component, optionally per device. #### Parameters • **value**: `string` \| `CSSProperties` the style string (e.g., "color: red") or object with style properties. • **device?**: [`Device`](../type-aliases/Device.md) the optional device-specific styling. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for method chaining. *** ### validation() > **validation**(`key`): [`IValidationBuilder`](IValidationBuilder.md) Starts configuring validation rules for the specified field. #### Parameters • **key**: `string` the name of the validation rule. #### Returns [`IValidationBuilder`](IValidationBuilder.md) the validation builder for defining arguments. --- # Interface: IComponentDataFactory The factory for creating ComponentData instances. **Internal use only.** ## Methods ### createComponentData() > **createComponentData**(`componentStore`, `deferFieldCalculation`): [`ComponentData`](../classes/ComponentData.md) Creates the element for the component tree. **Internal use only.** #### Parameters • **componentStore**: [`ComponentStore`](../classes/ComponentStore.md) the component settings. • **deferFieldCalculation**: `boolean` if true, then the calculated field must be explicitly initialized. #### Returns [`ComponentData`](../classes/ComponentData.md) the element for the component tree. --- # Interface: IComponentState Calculates all the properties of the form view component. ## Accessors ### get #### Get Signature > **get** **get**(): `Record`\<`string`, `any`\> ##### Returns `Record`\<`string`, `any`\> combined in order of priority component properties. *** ### isDisabled #### Get Signature > **get** **isDisabled**(): `boolean` ##### Returns `boolean` true if the component has a disabled property and this property is true, false otherwise. *** ### isReadOnly #### Get Signature > **get** **isReadOnly**(): `boolean` ##### Returns `boolean` true if the component has a read-only property and this property is true, false otherwise. *** ### ownProps #### Get Signature > **get** **ownProps**(): `Record`\<`string`, `any`\> ##### Returns `Record`\<`string`, `any`\> combined in order of priority component properties without children props. *** ### propsWithoutChildren #### Get Signature > **get** **propsWithoutChildren**(): `Record`\<`string`, `any`\> ##### Returns `Record`\<`string`, `any`\> combined component properties in order of priority, excluding child components, the className property does not contain styles additionally defined for the component. *** ### wrapperClassName #### Get Signature > **get** **wrapperClassName**(): `string` Calculates and returns wrapper className property. ##### Returns `string` the Record that contains the className property for the wrapper of component. ## Methods ### onDidMount() > **onDidMount**(): `void` The method that is called when the component is mounted. #### Returns `void` *** ### onWillUnmount() > **onWillUnmount**(): `void` The method that is called when the component is unmounted. #### Returns `void` --- # Interface: IDataRootProvider Provides the root component for the data in the component tree. ## Accessors ### dataRoot #### Get Signature > **get** **dataRoot**(): [`ComponentData`](../classes/ComponentData.md) ##### Returns [`ComponentData`](../classes/ComponentData.md) the root component for the data in the component tree. --- # Interface: IEventHandlerBuilder Interface for defining event handlers for a component. ## Extends - [`IComponentBuilder`](IComponentBuilder.md) ## Methods ### args() > **args**(`val`): [`IEventHandlerBuilder`](IEventHandlerBuilder.md) Specifies the arguments passed to the event handler. #### Parameters • **val**: `any` the arguments to pass to the handler. #### Returns [`IEventHandlerBuilder`](IEventHandlerBuilder.md) the event handler builder. *** ### children() > **children**(`childrenBuilder`): [`IComponentBuilder`](IComponentBuilder.md) Adds child components inside this component. #### Parameters • **childrenBuilder** the function that builds the child components. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for method chaining. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`children`](IComponentBuilder.md#children) *** ### commonAction() > **commonAction**(`name`): [`IEventHandlerBuilder`](IEventHandlerBuilder.md) Sets a common handler for the event. #### Parameters • **name**: `string` the name of the common handler. #### Returns [`IEventHandlerBuilder`](IEventHandlerBuilder.md) the event handler builder. *** ### component() > **component**(`key`, `type`): [`IComponentBuilder`](IComponentBuilder.md) Adds a component to the form. #### Parameters • **key**: `string` the unique identifier of the component. • **type**: `string` the type of the component. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for further configuration. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`component`](IComponentBuilder.md#component) *** ### customAction() > **customAction**(`name`): [`IEventHandlerBuilder`](IEventHandlerBuilder.md) Sets a custom handler for the event. #### Parameters • **name**: `string` the name of the custom handler function. #### Returns [`IEventHandlerBuilder`](IEventHandlerBuilder.md) the event handler builder. *** ### event() > **event**(`eventName`): [`IEventHandlerBuilder`](IEventHandlerBuilder.md) Starts configuring an event handler for the given event name. #### Parameters • **eventName**: `string` the name of the event (e.g., "onClick", "onChange"). #### Returns [`IEventHandlerBuilder`](IEventHandlerBuilder.md) the event handler builder. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`event`](IComponentBuilder.md#event) *** ### json() > **json**(): `string` Serializes the current state of the form into a JSON string. #### Returns `string` JSON representation of the form. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`json`](IComponentBuilder.md#json) *** ### prop() > **prop**(`key`, `value`): [`IComponentBuilder`](IComponentBuilder.md) Sets a property on the component. #### Parameters • **key**: `string` the name of the property. • **value**: `any` the value of the property. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for method chaining. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`prop`](IComponentBuilder.md#prop) *** ### style() > **style**(`value`, `device`?): [`IComponentBuilder`](IComponentBuilder.md) Applies styles to the component, optionally per device. #### Parameters • **value**: `string` \| `CSSProperties` the style string (e.g., "color: red") or object with style properties. • **device?**: [`Device`](../type-aliases/Device.md) the optional device-specific styling. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for method chaining. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`style`](IComponentBuilder.md#style) *** ### validation() > **validation**(`key`): [`IValidationBuilder`](IValidationBuilder.md) Starts configuring validation rules for the specified field. #### Parameters • **key**: `string` the name of the validation rule. #### Returns [`IValidationBuilder`](IValidationBuilder.md) the validation builder for defining arguments. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`validation`](IComponentBuilder.md#validation) --- # Interface: IFormData The interface for accessing the form data. ## Properties ### clear() > **clear**: () => `void` Clears the form data. #### Returns `void` *** ### getValidationResult() > **getValidationResult**: () => `Promise`\<[`ValidationMessages`](../type-aliases/ValidationMessages.md)\> Returns the validation results without triggering an events and changing the state of the form. #### Returns `Promise`\<[`ValidationMessages`](../type-aliases/ValidationMessages.md)\> the [ValidationMessages](../type-aliases/ValidationMessages.md) validation results. *** ### index? > `optional` **index**: `number` #### Returns the index in the array if the component is in the component array. *** ### reset() > **reset**: () => `void` Sets the form to its default value. #### Returns `void` *** ### setAllErrors() > **setAllErrors**: (`message`?) => `void` Sets the validation error message for all form data fields. #### Parameters • **message?**: `string` the validation error message. #### Returns `void` *** ### validate() > **validate**: () => `Promise`\<[`ValidationMessages`](../type-aliases/ValidationMessages.md)\> Validates the data in the form. #### Returns `Promise`\<[`ValidationMessages`](../type-aliases/ValidationMessages.md)\> the [ValidationMessages](../type-aliases/ValidationMessages.md) validation results. ## Accessors ### data #### Get Signature > **get** **data**(): `Record`\<`string`, `unknown`\> ##### Returns `Record`\<`string`, `unknown`\> the Record with all the form data. *** ### errors #### Get Signature > **get** **errors**(): `Record`\<`string`, `unknown`\> ##### Returns `Record`\<`string`, `unknown`\> the Record with all validation error messages. #### Set Signature > **set** **errors**(`errors`): `void` Sets the form error messages. ##### Parameters • **errors**: `Record`\<`string`, `unknown`\> ##### Returns `void` *** ### fluentData #### Get Signature > **get** **fluentData**(): `Record`\<`string`, `FluentVariable`\> ##### Returns `Record`\<`string`, `FluentVariable`\> all the form data that is of the FluentVariable type. Additionally, the keys of the returned object are converted to the snake case. *** ### hasErrors #### Get Signature > **get** **hasErrors**(): `boolean` true if the form contains errors, otherwise false. ##### Returns `boolean` *** ### isValidating #### Get Signature > **get** **isValidating**(): `boolean` If true, then validation is in progress. ##### Returns `boolean` *** ### parentData #### Get Signature > **get** **parentData**(): `undefined` \| `Record`\<`string`, `unknown`\> ##### Returns `undefined` \| `Record`\<`string`, `unknown`\> the object to read and modify parent data (available for array elements). *** ### rootData #### Get Signature > **get** **rootData**(): `Record`\<`string`, `unknown`\> ##### Returns `Record`\<`string`, `unknown`\> the object to read and modify root form data. *** ### state #### Get Signature > **get** **state**(): `Record`\<`string`, `unknown`\> ##### Returns `Record`\<`string`, `unknown`\> A user-defined key-value observable storage. Utilize it to store and share any custom data. --- # Interface: IFormJsonBuilder Interface for building a form JSON. ## Extended by - [`IComponentBuilder`](IComponentBuilder.md) ## Methods ### component() > **component**(`key`, `type`): [`IComponentBuilder`](IComponentBuilder.md) Adds a component to the form. #### Parameters • **key**: `string` the unique identifier of the component. • **type**: `string` the type of the component. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for further configuration. *** ### json() > **json**(): `string` Serializes the current state of the form into a JSON string. #### Returns `string` JSON representation of the form. --- # Interface: IFormViewer The form viewer settings interface. ## Accessors ### formData #### Get Signature > **get** **formData**(): [`IFormData`](IFormData.md) ##### Returns [`IFormData`](IFormData.md) the [IFormData](IFormData.md) with all the form data. --- # Interface: IStore The form viewer settings interface. ## Properties ### dispose() > **dispose**: () => `void` Correctly clears allocated resources, the function must be called when destroying an instance of the class. #### Returns `void` *** ### form > **form**: [`Form`](../classes/Form.md) The displayed form. *** ### reduceScreen() > **reduceScreen**: \<`T`\>(`callback`, `initialValue`) => `T` Performs the callback function on each element of the component tree, accumulates the return values. #### Type Parameters • **T** the return value type. #### Parameters • **callback** the function that calculates the value for the accumulator. • **initialValue**: `T` the initial value for the accumulator. #### Returns `T` the accumulated value. ## Accessors ### initialDataSlice #### Get Signature > **get** **initialDataSlice**(): `unknown` ##### Returns `unknown` the slice of the initial data in accordance with the Store hierarchy. **Internal use only.** *** ### showAllValidationErrors #### Get Signature > **get** **showAllValidationErrors**(): `undefined` \| `boolean` ##### Returns `undefined` \| `boolean` true if all validation errors are to be displayed, false otherwise. ## Methods ### localizeComponent() > **localizeComponent**(`type`, `formData`, `componentStore`): `Record`\<`string`, `unknown`\> Localizes a component store based on the given localization type. If a custom localizer is available, it will be used. #### Parameters • **type**: `string` the type of localization. • **formData**: [`IFormData`](IFormData.md) the form data. • **componentStore**: [`ComponentStore`](../classes/ComponentStore.md) the component settings. #### Returns `Record`\<`string`, `unknown`\> the Record with the localized properties. *** ### localizeErrorMessages() > **localizeErrorMessages**(`formData`, `componentStore`, `validationResults`?): `undefined` \| `string` The function to localize the validation error message. #### Parameters • **formData**: [`IFormData`](IFormData.md) the form data. • **componentStore**: [`ComponentStore`](../classes/ComponentStore.md) the component settings. • **validationResults?**: [`ValidationResult`](../type-aliases/ValidationResult.md)[] the results of the validation. #### Returns `undefined` \| `string` the result of localization or undefined. --- # Interface: IValidationBuilder Interface for defining validation rules for a component. ## Extends - [`IComponentBuilder`](IComponentBuilder.md) ## Methods ### args() > **args**(`val`): [`IComponentBuilder`](IComponentBuilder.md) Specifies the arguments for the validation rule. #### Parameters • **val**: `any` the validation arguments. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for method chaining. *** ### children() > **children**(`childrenBuilder`): [`IComponentBuilder`](IComponentBuilder.md) Adds child components inside this component. #### Parameters • **childrenBuilder** the function that builds the child components. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for method chaining. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`children`](IComponentBuilder.md#children) *** ### component() > **component**(`key`, `type`): [`IComponentBuilder`](IComponentBuilder.md) Adds a component to the form. #### Parameters • **key**: `string` the unique identifier of the component. • **type**: `string` the type of the component. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for further configuration. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`component`](IComponentBuilder.md#component) *** ### event() > **event**(`eventName`): [`IEventHandlerBuilder`](IEventHandlerBuilder.md) Starts configuring an event handler for the given event name. #### Parameters • **eventName**: `string` the name of the event (e.g., "onClick", "onChange"). #### Returns [`IEventHandlerBuilder`](IEventHandlerBuilder.md) the event handler builder. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`event`](IComponentBuilder.md#event) *** ### json() > **json**(): `string` Serializes the current state of the form into a JSON string. #### Returns `string` JSON representation of the form. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`json`](IComponentBuilder.md#json) *** ### prop() > **prop**(`key`, `value`): [`IComponentBuilder`](IComponentBuilder.md) Sets a property on the component. #### Parameters • **key**: `string` the name of the property. • **value**: `any` the value of the property. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for method chaining. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`prop`](IComponentBuilder.md#prop) *** ### style() > **style**(`value`, `device`?): [`IComponentBuilder`](IComponentBuilder.md) Applies styles to the component, optionally per device. #### Parameters • **value**: `string` \| `CSSProperties` the style string (e.g., "color: red") or object with style properties. • **device?**: [`Device`](../type-aliases/Device.md) the optional device-specific styling. #### Returns [`IComponentBuilder`](IComponentBuilder.md) the component builder for method chaining. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`style`](IComponentBuilder.md#style) *** ### validation() > **validation**(`key`): [`IValidationBuilder`](IValidationBuilder.md) Starts configuring validation rules for the specified field. #### Parameters • **key**: `string` the name of the validation rule. #### Returns [`IValidationBuilder`](IValidationBuilder.md) the validation builder for defining arguments. #### Inherited from [`IComponentBuilder`](IComponentBuilder.md).[`validation`](IComponentBuilder.md#validation) --- # Interface: InternalErrorProps React component properties that display an internal form view error. **Internal use only.** ## Properties ### error > **error**: `any` The internal error. --- # Interface: LabeledValue The element with the value and the label. ## Properties ### label? > `optional` **label**: `string` The label. *** ### value > **value**: `string` \| `number` The value. --- # Interface: PersistedForm The format for saving a form designed in Form Builder. ## Properties ### actions? > `optional` **actions**: [`ActionValues`](../type-aliases/ActionValues.md) Represents a set of action definitions. *** ### defaultLanguage > **defaultLanguage**: `string` The default form language. *** ### errorProps? > `optional` **errorProps**: `any` Properties of the component displaying the error. *** ### errorType? > `optional` **errorType**: `string` Name of the type of component displaying the error. *** ### form > **form**: [`ComponentStore`](../classes/ComponentStore.md) Settings for components that display the form. *** ### formValidator? > `optional` **formValidator**: `string` The form validator. *** ### languages > **languages**: [`Language`](../classes/Language.md)[] Form languages. *** ### localization > **localization**: [`LocalizationValue`](../type-aliases/LocalizationValue.md) Localization of the form. *** ### tooltipType? > `optional` **tooltipType**: `string` Name of the type of component that displays the tooltip. *** ### version? > `optional` **version**: [`version1`](../enumerations/PersistedFormVersion.md#version1) The version of the saved form. --- # Interface: ScreenProps Properties of the root component of the form. **Internal use only.** ## Properties ### children > **children**: `ReactNode` The React child node. *** ### disabled? > `optional` **disabled**: `boolean` If true, the children are in disabled state. *** ### readOnly? > `optional` **readOnly**: `boolean` If true, the children are in read-only state. --- # Interface: SuppressResizeObserverErrorsProps Represents the props for the SuppressResizeObserverErrors component. **Internal use only.** ## Properties ### children > **children**: `ReactNode` The React child node. --- # Interface: WrapperProps React wrapper component properties. ## Extended by ## Properties ### children > **children**: `ReactNode` The React child node. *** ### className? > `optional` **className**: `string` The CSS class name. --- # Type Alias: ActionData > **ActionData**: `object` Action Storage. Used for add a new action, store information about it. ## Type declaration ### \[KeySymbol\]? > `optional` **\[KeySymbol\]**: `string` The unique action key. ### args? > `optional` **args**: [`Arguments`](Arguments.md) The action arguments. ### name > **name**: `string` The action name. ### type > **type**: [`ActionType`](ActionType.md) The action type. --- # Type Alias: ActionEventHandler() > **ActionEventHandler**: (`e`) => `void` \| `Promise`\<`void`\> Event handler function type. ## Parameters • **e**: [`ActionEventArgs`](../classes/ActionEventArgs.md) the action arguments. ## Returns `void` \| `Promise`\<`void`\> --- # Type Alias: ActionHandler()\ > **ActionHandler**\<`T`\>: (`e`, `params`) => `void` \| `Promise`\<`void`\> Action function type. ## Type Parameters • **T** the type of action parameters. ## Parameters • **e**: [`ActionEventArgs`](../classes/ActionEventArgs.md) the action arguments. • **params**: `{ [k in keyof T]: any }` the action parameters arguments. ## Returns `void` \| `Promise`\<`void`\> --- # Type Alias: ActionParameters > **ActionParameters**: `Record`\<[`ParameterName`](ParameterName.md), [`ParameterType`](ParameterType.md)\> Represents a set of action parameters. --- # Type Alias: ActionType > **ActionType**: `"common"` \| `"code"` \| `"custom"` Action type. --- # Type Alias: ActionValues > **ActionValues**: `Record`\<`string`, [`ActionDefinition`](../classes/ActionDefinition.md)\> Represents a set of action definitions. --- # Type Alias: ActionsInitializer() > **ActionsInitializer**: (`props`, `def`) => `Record`\<[`EventName`](EventName.md), [`ActionEventHandler`](ActionEventHandler.md) \| [`ActionDefinition`](../classes/ActionDefinition.md)\> The type of function that initializes an actions on a component. **Internal use only.** ## Parameters • **props**: [`ComponentStore`](../classes/ComponentStore.md)\[`"props"`\] the component's property settings. • **def**: [`DefineActionHelper`](DefineActionHelper.md) the helper to create an action event handler. ## Returns `Record`\<[`EventName`](EventName.md), [`ActionEventHandler`](ActionEventHandler.md) \| [`ActionDefinition`](../classes/ActionDefinition.md)\> the Record with action event handlers. --- # Type Alias: AnnotationType > **AnnotationType**: `"Property"` \| `"Container"` \| `"Event"` \| `"Module"` \| `"Style"` Type of component property description in the form builder. --- # Type Alias: Annotations\ > **Annotations**\<`T`\>: \{ \[key in keyof T\]: BaseBuilder\ \| undefined \} The type-safe description of the component's metadata property builders. ## Type Parameters • **T** *extends* `object` the component property name type. --- # Type Alias: ArgumentValue > **ArgumentValue**: `string` \| `number` \| `boolean` The type of the argument value of the function. --- # Type Alias: Arguments > **Arguments**: `Record`\<[`ParameterName`](ParameterName.md), [`ArgumentValue`](ArgumentValue.md)\> It will be transformed in arguments before passing in action. --- # Type Alias: BoundValueSchema > **BoundValueSchema**: `object` Value validation rules. ## Type declaration ### autoValidate? > `optional` **autoValidate**: `boolean` Flag, if true then automatic validation of the value works, false otherwise. ### validations? > `optional` **validations**: [`ValidationRuleSettings`](ValidationRuleSettings.md)[] The array of validation rule settings. --- # Type Alias: BuilderMode > **BuilderMode**: `"builder"` \| `"viewer"` Form builder mode. Builder or viewer. --- # Type Alias: BuilderSetup > **BuilderSetup**: `Partial`\<[`PreAnnotation`](PreAnnotation.md) & [`BuilderOptions`](../classes/BuilderOptions.md)\> The type representing custom options for the component's property metadata builder. --- # Type Alias: ComponentKey > **ComponentKey**: `string` The component key. --- # Type Alias: ComponentKind > **ComponentKind**: `"container"` \| `"component"` \| `"slot"` \| `"template"` \| `"repeater"` \| `"preset"` The component kind type. --- # Type Alias: ComponentLocalizer() > **ComponentLocalizer**: (`componentStore`, `language`) => `Record`\<`string`, `any`\> The function to localize the properties of a component. ## Parameters • **componentStore**: [`ComponentStore`](../classes/ComponentStore.md) the component settings. • **language**: [`Language`](../classes/Language.md) the language selected in the form viewer. ## Returns `Record`\<`string`, `any`\> the Record with the localized properties of a component. --- # Type Alias: ComponentPropertyBindType > **ComponentPropertyBindType**: `"single"` \| `"array"` The component property binding type. --- # Type Alias: ComponentPropertyComputeType > **ComponentPropertyComputeType**: `"function"` \| `"localization"` The component property value type. --- # Type Alias: ComponentPropertyName > **ComponentPropertyName**: `string` The component property name. --- # Type Alias: ComponentPropsLocalization > **ComponentPropsLocalization**: `Record`\<[`ComponentPropertyName`](ComponentPropertyName.md), `string`\> A record containing localizations for the component properties. --- # Type Alias: ComponentStateFactory() > **ComponentStateFactory**: (`data`, `store`) => [`IComponentState`](../interfaces/IComponentState.md) The component state factory that calculates the properties of the form viewer component. ## Parameters • **data**: [`ComponentData`](../classes/ComponentData.md) the data needed to display the component. • **store**: [`Store`](../classes/Store.md) the form viewer settings. ## Returns [`IComponentState`](../interfaces/IComponentState.md) the component property calculator. --- # Type Alias: ComponentStoreLocalizer() > **ComponentStoreLocalizer**: (`componentStore`) => `Record`\<`string`, `any`\> Represents a function that localizes components based on the supplied component store. ## Parameters • **componentStore**: [`ComponentStore`](../classes/ComponentStore.md) ## Returns `Record`\<`string`, `any`\> --- # Type Alias: ComponentsLocalization > **ComponentsLocalization**: `Record`\<[`ComponentKey`](ComponentKey.md), [`TypedLocalization`](TypedLocalization.md)\> A record containing localizations grouped by component key. --- # Type Alias: ComputeChildren() > **ComputeChildren**: (`componentData`, `componentProps`) => `Record`\<`string`, `any`\> Function that calculates all child properties of a component. **Internal use only.** ## Parameters • **componentData**: [`ComponentData`](../classes/ComponentData.md) the data required to display a component. • **componentProps**: `Record`\<`string`, `any`\> the calculated properties of the component. ## Returns `Record`\<`string`, `any`\> the Record with calculated child properties. --- # Type Alias: Css > **Css**: `object` The type for the CSS property of a React component. ## Type declaration ### any? > `optional` **any**: [`DeviceStyle`](DeviceStyle.md) CSS styles for arbitrary device. ### desktop? > `optional` **desktop**: [`DeviceStyle`](DeviceStyle.md) CSS styles for desktop devices. ### mobile? > `optional` **mobile**: [`DeviceStyle`](DeviceStyle.md) CSS styles for mobile devices. ### tablet? > `optional` **tablet**: [`DeviceStyle`](DeviceStyle.md) CSS styles for tablet devices. --- # Type Alias: CssLoaderType > **CssLoaderType**: [`BiDi`](../enumerations/BiDi.md) \| `"common"` Represents the type of CSS loader. Can be either BiDi or common for both BiDi. --- # Type Alias: CssPart > **CssPart**: `"css"` \| `"wrapperCss"` The part of the CSS properties of a component. --- # Type Alias: CustomActions > **CustomActions**: `Record`\<`string`, [`ActionDefinition`](../classes/ActionDefinition.md) \| [`ActionEventHandler`](ActionEventHandler.md)\> Custom actions for the form viewer. --- # Type Alias: CustomValidationRuleSettings > **CustomValidationRuleSettings**: `object` Custom validation rule settings. ## Type declaration ### params? > `optional` **params**: [`ValidationRuleParameter`](ValidationRuleParameter.md)[] Metadata of validation rule parameters. ### validate > **validate**: [`RuleValidator`](RuleValidator.md) The function that validates the value. --- # Type Alias: CustomValidationRules > **CustomValidationRules**: `Record`\<`string`, [`CustomValidationRuleSettings`](CustomValidationRuleSettings.md)\> A set of metadata of custom validation rules, grouped by rule name. --- # Type Alias: DefineActionHelper() > **DefineActionHelper**: \<`T`\>(`name`, `func`, `params`?, `description`?) => [`ActionDefinition`](../classes/ActionDefinition.md) The defineAction helper type. **Internal use only.** ## Type Parameters • **T** the type of action parameter. ## Parameters • **name**: `string` the action name. • **func**: [`ActionHandler`](ActionHandler.md)\<`T`\> the action handler. • **params?**: [`ParameterDefinition`](ParameterDefinition.md)\<`T`\>[] the definition of action parameters. • **description?**: `string` the action description. ## Returns [`ActionDefinition`](../classes/ActionDefinition.md) the definition of an action. --- # Type Alias: DefinerData\ > **DefinerData**\<`T`\>: `object` Definer class data. ## Type Parameters • **T** *extends* `object` React component property type. ## Type declaration ### actionsInitializer? > `readonly` `optional` **actionsInitializer**: [`ActionsInitializer`](ActionsInitializer.md) The function that initializes an actions on a component (for internal use only). ### category? > `optional` **category**: `string` The component category. ### component > `readonly` **component**: `ComponentType`\<`T`\> The React component. ### cssObject? > `optional` **cssObject**: [`Annotations`](Annotations.md)\<`CSSObject`\> The CSS metadata. ### customPreview? > `optional` **customPreview**: `ReactNode` The custom component to display in the component list (unused). ### eventListeners? > `optional` **eventListeners**: [`ComponentMetadataEventListeners`](../interfaces/ComponentMetadataEventListeners.md) The component metadata event listeners. ### icon? > `optional` **icon**: `ComponentType` The component icon. ### initialJson? > `optional` **initialJson**: `string` The JSON source for the component (instance of [ComponentStore](../classes/ComponentStore.md) class serialised to JSON). ### insertRestriction? > `optional` **insertRestriction**: [`InsertRestrictionFn`](InsertRestrictionFn.md) The function that restricts the insertion of a component into another component. ### kind? > `optional` **kind**: [`ComponentKind`](ComponentKind.md) The component kind. ### name? > `optional` **name**: `string` The component name. ### properties? > `optional` **properties**: [`Annotations`](Annotations.md)\<`T`\> The property metadata. --- # Type Alias: Device > **Device**: `"any"` \| `"desktop"` \| `"mobile"` \| `"tablet"` Represents the target device for applying styles. --- # Type Alias: DeviceStyle > **DeviceStyle**: `object` CSS styles for a device. ## Type declaration ### object? > `optional` **object**: `CSSObject` CSS styles defined in the general style settings. ### string? > `optional` **string**: `string` CSS styles defined in the style code editor. --- # Type Alias: EditorType > **EditorType**: `string` A type that denotes the name of the property editor. --- # Type Alias: ErrorMap > **ErrorMap**: `object` The result of validating a component property in the form builder. ## Type declaration ### code? > `optional` **code**: `string` The validation code. ### message? > `optional` **message**: `string` The validation message. --- # Type Alias: ErrorMessageLocalizer() > **ErrorMessageLocalizer**: (`value`) => `string` \| `undefined` A function that localizes validation error messages. ## Parameters • **value**: [`ValidationResult`](ValidationResult.md)[] \| `undefined` the results of the validation. ## Returns `string` \| `undefined` the localization result or undefined. --- # Type Alias: EventName > **EventName**: `string` The type for the event name. --- # Type Alias: FieldType > **FieldType**: `"simple"` \| `"template"` \| `"repeater"` The field type. --- # Type Alias: FirstParameter\ > **FirstParameter**\<`T`\>: `Parameters`\<`T`\>\[`0`\] The generic type that returns the first parameter of the generic type T. **Internal use only.** ## Type Parameters • **T** *extends* (...`args`) => `any` --- # Type Alias: FormOptions > **FormOptions**: `object` Options for configuring the form behavior. ## Type declaration ### errorType? > `optional` **errorType**: `string` The type of component that displays validation errors. --- # Type Alias: FormValidator() > **FormValidator**: (`data`) => `Promise`\<`Record`\<`string`, `string`\> \| `undefined`\> Represents a function that validate the form data. ## Parameters • **data**: `Record`\<`string`, `unknown`\> the form data. ## Returns `Promise`\<`Record`\<`string`, `string`\> \| `undefined`\> the Record with form field errors. --- # Type Alias: FormValidators > **FormValidators**: [`FormValidator`](FormValidator.md)[] Represents an array of functions that validate the form data. --- # Type Alias: FormViewerValidationRules > **FormViewerValidationRules**: `object` Validation rules for FormViewer. ## Type declaration ### custom? > `optional` **custom**: [`CustomValidationRules`](CustomValidationRules.md) The set of custom validators. ### internal > **internal**: [`ValidationRuleSet`](ValidationRuleSet.md) The set of internal validators. --- # Type Alias: FormViewerWrapper > **FormViewerWrapper**: `ComponentType`\<[`FormViewerWrapperComponentProps`](../interfaces/FormViewerWrapperComponentProps.md)\> Represents a form viewer Wrapper component. --- # Type Alias: Func() > **Func**: (...`arg`) => `void` \| `Promise`\<`void`\> The type of arbitrary function that returns void or Promise<void>. ## Parameters • ...**arg**: `any`[] ## Returns `void` \| `Promise`\<`void`\> --- # Type Alias: GetInitialDataFn() > **GetInitialDataFn**: () => `unknown` Returns the initial data for the field. ## Returns `unknown` --- # Type Alias: HtmlAttribute > **HtmlAttribute**: `Record`\<`string`, `string`\> The arbitrary HTML attributes for the component. --- # Type Alias: IDisposable > **IDisposable**: `object` Type of disposable object. ## Type declaration ### dispose() > **dispose**: () => `void` Performs the tasks necessary to release resources correctly. #### Returns `void` --- # Type Alias: InsertRestrictionFn() > **InsertRestrictionFn**: (`self`, `target`, `slot`?) => `boolean` The function that restricts the insertion of a component into another component. ## Parameters • **self**: [`ComponentData`](../classes/ComponentData.md) • **target**: [`ComponentData`](../classes/ComponentData.md) • **slot?**: `string` ## Returns `boolean` --- # Type Alias: LanguageFullCode > **LanguageFullCode**: \`$\{string\}-$\{string\}\` The full language code, e.g. 'en-US'. --- # Type Alias: LocalizationTestRequest > **LocalizationTestRequest**: `object` Localization testing request. ## Type declaration ### data > **data**: `Record`\<`string`, `FluentVariable`\> The test form data. ### language > **language**: [`Language`](../classes/Language.md) The localization Language. ### localization > **localization**: `string` Localization value to be tested. ### localizationStringId > **localizationStringId**: `string` The identifier of the localization string. --- # Type Alias: LocalizationType > **LocalizationType**: `"component"` \| `"tooltip"` \| `string` Represents the type of localization. The localization can be for a component, tooltip or for validator. --- # Type Alias: LocalizationValue > **LocalizationValue**: `Record`\<[`LanguageFullCode`](LanguageFullCode.md), [`ComponentsLocalization`](ComponentsLocalization.md)\> The format in which localization is stored. ## Example ```ts { * "en-US" : * { * "componentKey: * { * "property" : "This {$value} is localized!" * } * } * } ``` --- # Type Alias: MessagesMap > **MessagesMap**: `Record`\<`string`, `string`[] \| `Record`\<`string`, `string`[] \| `any`\>\> The validation result messages map. --- # Type Alias: NamedActionDefinition > **NamedActionDefinition**: `object` Represents a named action definition. ## Type declaration ### actionDefinition > **actionDefinition**: [`ActionDefinition`](../classes/ActionDefinition.md) The definition of an action. ### name > **name**: `string` The name of action definition. --- # Type Alias: ParameterDefinition\ > **ParameterDefinition**\<`T`\>: [[`PropertyKey`](PropertyKey.md)\<`T`\>, [`ParameterType`](ParameterType.md)] The type to describe the action parameter. ## Type Parameters • **T** the type of action parameter. --- # Type Alias: ParameterName > **ParameterName**: `string` The type for the parameter name. --- # Type Alias: ParameterType > **ParameterType**: `"string"` \| `"number"` \| `"boolean"` Parameter type. --- # Type Alias: PreAnnotation > **PreAnnotation**: `Partial`\<`Omit`\<[`Annotation`](../classes/Annotation.md), `"key"`\>\> & `Pick`\<[`Annotation`](../classes/Annotation.md), `"editor"`\> Type for component property metadata without the 'key' property, but with the 'editor' property. --- # Type Alias: PropertyBlockType > **PropertyBlockType**: `"component"` \| `"tooltip"` \| `string` Represents the type of property block. --- # Type Alias: PropertyKey\ > **PropertyKey**\<`T`\>: keyof `T` & `string` Component property key type. ## Type Parameters • **T** the type of action parameter --- # Type Alias: Rel > **Rel**: `"stylesheet"` \| `string` Represents a relationship attribute value used in HTML. --- # Type Alias: ResolvedValidator() > **ResolvedValidator**: (`value`, `store`, `getFormData`?) => `Promise`\<[`ValidationResult`](ValidationResult.md)[] \| `undefined`\> The function that validates a value and returns the validation result. ## Parameters • **value**: `any` the validated value. • **store**: [`IStore`](../interfaces/IStore.md) the form viewer settings. • **getFormData?** the function that returns a form data. ## Returns `Promise`\<[`ValidationResult`](ValidationResult.md)[] \| `undefined`\> the Promise with the results of the validation. --- # Type Alias: RuleValidator()\ > **RuleValidator**\<`T`\>: (`value`, `store`, `args`?, `formData`?) => [`RuleValidatorResult`](RuleValidatorResult.md) \| `Promise`\<[`RuleValidatorResult`](RuleValidatorResult.md)\> The function that checks the value and returns the result of the rule validation, see [RuleValidatorResult](RuleValidatorResult.md). ## Type Parameters • **T** = `any` the value type. ## Parameters • **value**: `T` the value. • **store**: [`IStore`](../interfaces/IStore.md) the form viewer settings • **args?**: `Record`\<`string`, `unknown`\> the rule arguments. • **formData?**: [`IFormData`](../interfaces/IFormData.md) the form data. ## Returns [`RuleValidatorResult`](RuleValidatorResult.md) \| `Promise`\<[`RuleValidatorResult`](RuleValidatorResult.md)\> --- # Type Alias: RuleValidatorResult > **RuleValidatorResult**: `string` \| `boolean` The result of validation of a single rule, true means validation was successful, false means validation failed, string means error message. --- # Type Alias: SchemaResolver()\ > **SchemaResolver**\<`T`\>: (`value`) => [`ResolvedValidator`](ResolvedValidator.md) The validation function factory. ## Type Parameters • **T** the validation function factory arguments. ## Parameters • **value**: `T` the validated value. ## Returns [`ResolvedValidator`](ResolvedValidator.md) the function that validates a value. --- # Type Alias: SchemaType > **SchemaType**: keyof [`SchemaTypeMap`](SchemaTypeMap.md) The value type name. --- # Type Alias: SchemaTypeMap > **SchemaTypeMap**: `object` Describes the mapping of a value type name to a type. ## Type declaration ### array > **array**: `any`[] The array. ### boolean > **boolean**: `boolean` The boolean. ### date > **date**: `Date` The date. ### enum > **enum**: `any` The enumeration. ### number > **number**: `number` The number. ### object > **object**: `object` The object. ### string > **string**: `string` The string. ### time > **time**: `string` The time. --- # Type Alias: Setter()\ > **Setter**\<`T`\>: (`value`) => `void` Value setting function type. ## Type Parameters • **T** = `any` the value type. ## Parameters • **value**: `T` the value. ## Returns `void` --- # Type Alias: SyncEventHandler()\ > **SyncEventHandler**\<`TSender`, `TEventArgs`\>: (`source`, `eventArgs`) => `void` Represents a synchronous event handler. ## Type Parameters • **TSender** the type of the event source. • **TEventArgs** the type of the event arguments. ## Parameters • **source**: `TSender` • **eventArgs**: `TEventArgs` ## Returns `void` --- # Type Alias: TypedLocalization > **TypedLocalization**: `Partial`\<`Record`\<[`LocalizationType`](LocalizationType.md), [`ComponentPropsLocalization`](ComponentPropsLocalization.md)\>\> A record containing localizations grouped by localization type. --- # Type Alias: ValidationMessages > **ValidationMessages**: `string`[] \| [`MessagesMap`](MessagesMap.md) \| `undefined` The validation result messages. --- # Type Alias: ValidationResult > **ValidationResult**: `object` The result of the validation. ## Type declaration ### message? > `optional` **message**: `string` The validation error message text. ### settings > **settings**: [`ValidationRuleSettings`](ValidationRuleSettings.md) The validation rule settings. --- # Type Alias: ValidationRule > **ValidationRule**: `object` Validation rule metadata required to create a validation function. ## Type declaration ### params? > `optional` **params**: [`ValidationRuleParameter`](ValidationRuleParameter.md)[] Metadata of validation rule parameters. ### validatorFactory > **validatorFactory**: [`ValidatorFactory`](ValidatorFactory.md)\<`any`\> The validation function factory. --- # Type Alias: ValidationRuleParameter > **ValidationRuleParameter**: `object` Describes the settings of the validation rule parameter. ## Type declaration ### default? > `optional` **default**: `unknown` The default value. ### editorType? > `optional` **editorType**: `string` The editor type of the setting value. ### key > **key**: `string` The unique setting key of the parameter. ### required > **required**: `boolean` Flag whether the setting value must be filled in. ### type > **type**: [`SchemaType`](SchemaType.md) The type of value. --- # Type Alias: ValidationRuleSet > **ValidationRuleSet**: `Record`\<`string`, [`ValidationRule`](ValidationRule.md)\> Describes a set of validation rules. --- # Type Alias: ValidationRuleSettings > **ValidationRuleSettings**: `object` The validation rule settings. ## Type declaration ### args? > `optional` **args**: `Record`\<`string`, `any`\> Arguments of the validation rule. ### key > **key**: `string` The unique key of the validation rule. The key is unique within the value type. ### type? > `optional` **type**: [`ValidatorType`](ValidatorType.md) The type of validator. ### validateWhen? > `optional` **validateWhen**: [`ComponentProperty`](../interfaces/ComponentProperty.md) The property that determines when validation needs to be performed. --- # Type Alias: ValidatorFactory()\ > **ValidatorFactory**\<`Params`\>: (`args`) => [`RuleValidator`](RuleValidator.md) The validation function factory. ## Type Parameters • **Params** the factory arguments type. ## Parameters • **args**: `Params` the factory arguments. ## Returns [`RuleValidator`](RuleValidator.md) the function that checks the value and returns the result of the rule validation --- # Type Alias: ValidatorType > **ValidatorType**: `"internal"` \| `"custom"` The type of validator. --- # Type Alias: Validators > **Validators**: `Partial`\<`Record`\<[`SchemaType`](SchemaType.md), [`CustomValidationRules`](CustomValidationRules.md)\>\> The set of metadata of custom validation rules, grouped by the type of value being validated. --- # Type Alias: ViewMode > **ViewMode**: `"desktop"` \| `"mobile"` \| `"tablet"` Display resolution type. --- # Variable: ActionEventArgsDeclaration > `const` **ActionEventArgsDeclaration**: "\n/\*\*\n \* Arguments passed to the event handler.\n \*/\ndeclare class ActionEventArgs \{\n\n /\*\*\n \* The event type.\n \*/\n readonly type: string\n\n /\*\*\n \* The component that triggered the event.\n \*/\n readonly sender: ComponentData\n \n /\*\*\n \* The component properties that were used to render the sender component.\n \*/\n readonly renderedProps: Record\\n\n /\*\*\n \* The index of the component in the array, if the component is in the array.\n \*/\n readonly index?: number\n\n /\*\*\n \* Sets current props of component.\n \*/\n readonly setUserDefinedProps: (props: Record\) =\> void\n\n /\*\*\n \* The form viewer settings.\n \*/\n readonly store: Store\n\n /\*\*\n \* The event arguments.\n \*/\n readonly args: any\[\]\n\n /\*\*\n \* @returns the event handled by the event handler.\n \*/\n get event(): SyntheticEvent \| null\n\n /\*\*\n \* @returns the first element of the event argument array, which is treated as a value.\n \*/\n get value(): any\n \n /\*\*\n \* @returns the object for reading and changing form data.\n \*/\n get data(): Record\\n \n /\*\*\n \* @returns the object to read and modify parent data (available for array elements).\n \*/\n get parentData(): Record\ \| undefined\n\n /\*\*\n \* @returns the object to read and modify root form data.\n \*/\n get rootData(): Record\\n\}\n" Description of the event argument type for the code editor. --- # Variable: AsyncFunction > `const` **AsyncFunction**: `Function` Asynchronous function constructor. --- # Variable: DidMountEvent > `const` **DidMountEvent**: `"onDidMount"` = `'onDidMount'` The DidMountEvent event name. --- # Variable: IFormDataDeclaration > `const` **IFormDataDeclaration**: "declare interface IFormData \{\n /\*\*\n \* @returns the \{@link Record\} with all the form data.\n \*/\n get data(): Record\\n\n /\*\*\n \* @returns the object to read and modify parent data (available for array elements).\n \*/\n get parentData(): Record\ \| undefined\n\n /\*\*\n \* @returns the object to read and modify root form data.\n \*/\n get rootData(): Record\\n\n /\*\*\n \* @returns the \{@link Record\} with all validation error messages.\n \*/\n get errors(): Record\\n\n /\*\*\n \* true if the form contains errors, otherwise false.\n \*/\n get hasErrors(): boolean\n\n /\*\*\n \* @returns A user-defined key-value observable storage. Utilize it to store and share any custom data.\n \*/\n get state(): Record\\n\n /\*\*\n \* Sets the validation error message for all form data fields.\n \* @param message the validation error message.\n \*/\n setAllErrors(message?: string): void\n\n /\*\*\n \* Validates the data in the form.\n \*/\n validate(): Promise\\n \n /\*\*\n \* Returns the validation results without triggering an events and changing the state of the form.\n \* @returns the validation results.\n \*/\n getValidationResult: () =\> Promise\\n\n /\*\*\n \* If true, then validation is in progress.\n \*/\n get isValidating(): boolean\n\n /\*\*\n \* Sets the form to its default value.\n \*/\n reset(): void\n\n /\*\*\n \* Clears the form data.\n \*/\n clear(): void\n\n /\*\*\n \* @returns the index in the array if the component is in the component array.\n \*/\n index?: number\n\}" Description of the form data for the code editor. --- # Variable: KeySymbol > `const` **KeySymbol**: *typeof* [`KeySymbol`](KeySymbol.md) The unique Symbol for the key property. --- # Variable: WillUnmountEvent > `const` **WillUnmountEvent**: `"onWillUnmount"` = `'onWillUnmount'` The WillUnmountEvent event name. --- # Variable: array > `const` **array**: [`ArrayBuilder`](../classes/ArrayBuilder.md)\<`undefined` \| `unknown`[]\> The annotation builder for a component property with type 'Array'. --- # Variable: boolean > `const` **boolean**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `boolean`\> The annotation builder for a component property with type 'boolean'. --- # Variable: className > `const` **className**: [`Annotation`](../classes/Annotation.md) The annotation builder for the component property containing the CSS class name. --- # Variable: color > `const` **color**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `string`\> The annotation builder for a component property with type 'color' (e.g. rgba(71, 167, 122, 0.72)). --- # Variable: commonStyles > `const` **commonStyles**: `object` The annotations for generic CSS properties of a component. ## Type declaration ### backgroundColor > **backgroundColor**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> = `cssColor` ### color > **color**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> = `cssColor` ### height > **height**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> = `cssSize` ### marginBottom > **marginBottom**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> = `cssSize` ### marginLeft > **marginLeft**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> = `cssSize` ### marginRight > **marginRight**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> = `cssSize` ### marginTop > **marginTop**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> = `cssSize` ### width > **width**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> --- # Variable: containerStyles > `const` **containerStyles**: `object` The annotations for generic CSS properties of a container component. ## Type declaration ### alignItems > **alignItems**: [`OneOfBuilder`](../classes/OneOfBuilder.md)\<`"center"` \| `"start"` \| `"baseline"` \| `"end"` \| `"stretch"`\> ### flexDirection > **flexDirection**: [`OneOfBuilder`](../classes/OneOfBuilder.md)\<`"column"` \| `"row"` \| `"column-reverse"` \| `"row-reverse"`\> ### flexWrap > **flexWrap**: [`OneOfBuilder`](../classes/OneOfBuilder.md)\<`"wrap"` \| `"nowrap"` \| `"wrap-reverse"`\> ### gap > **gap**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `string`\> = `size` ### justifyContent > **justifyContent**: [`OneOfBuilder`](../classes/OneOfBuilder.md)\<`"center"` \| `"start"` \| `"end"` \| `"flex-start"` \| `"flex-end"` \| `"space-between"` \| `"space-around"` \| `"space-evenly"` \| `"left"` \| `"right"`\> --- # Variable: cssSize > `const` **cssSize**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> The annotation builder for a component property containing a CSS dimension. --- # Variable: date > `const` **date**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `Date`\> The annotation builder for a component property with type 'Date'. --- # Variable: disabled > `const` **disabled**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `boolean`\> Annotation builder for a disabled property of a component with type 'boolean'. --- # Variable: emotionCache > `const` **emotionCache**: `object` The CSS style cache. **Internal use only.** ## Type declaration ### LTR > **LTR**: `EmotionCache` ### RTL > **RTL**: `EmotionCache` --- # Variable: emptyComponentStore > `const` **emptyComponentStore**: [`ComponentStore`](../classes/ComponentStore.md) The empty component settings object. **Internal use only.** --- # Variable: errorMessageModel > `const` **errorMessageModel**: [`Model`](../classes/Model.md)\<[`ErrorWrapperProps`](../interfaces/ErrorWrapperProps.md)\> The component metadata for error message. **Internal use only.** --- # Variable: event > `const` **event**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`Function`\> The annotation builder for a component property with type 'event' (or event handler, or just a function). --- # Variable: globalDefaultLanguage > `const` **globalDefaultLanguage**: [`Language`](../classes/Language.md) The default language for the application. --- # Variable: htmlAttributes > `const` **htmlAttributes**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> The annotation builder for the 'key' property of a component. --- # Variable: internalErrorModel > `const` **internalErrorModel**: [`Model`](../classes/Model.md)\<[`InternalErrorProps`](../interfaces/InternalErrorProps.md)\> **`Internal`** Form viewer internal error metadata. **Internal use only.** --- # Variable: key > `const` **key**: [`Annotation`](../classes/Annotation.md) The annotation for the 'key' property of the component. --- # Variable: node > `const` **node**: [`NodeAnnotationBuilder`](../classes/NodeAnnotationBuilder.md)\<`ReactNode`\> The annotation builder for a component property with type 'ReactNode'. --- # Variable: nodeArray > `const` **nodeArray**: [`NodeAnnotationBuilder`](../classes/NodeAnnotationBuilder.md)\<`ReactNode`[]\> The annotation builder for a component property with type 'ReactNode[]'. --- # Variable: number > `const` **number**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `number`\> The annotation builder for a component property with type 'number'. --- # Variable: object > `const` **object**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `object`\> The annotation builder for a component property with type 'object'. It can accommodate any nested POJO that contains primitive values. --- # Variable: readOnly > `const` **readOnly**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `boolean`\> Annotation builder for a read-only property of a component with type 'boolean'. --- # Variable: renderWhen > `const` **renderWhen**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `boolean`\> The annotation builder for the synthetic 'renderWhen' property of the component. --- # Variable: screenModel > `const` **screenModel**: [`Model`](../classes/Model.md)\<`DetailedHTMLProps`\<`HTMLAttributes`\<`HTMLDivElement`\>, `HTMLDivElement`\>\> Form viewer screen metadata. **Internal use only.** --- # Variable: size > `const` **size**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `string`\> The annotation builder for a component property with type 'CSS unit' (width, height, etc.). --- # Variable: slotModel > `const` **slotModel**: [`Model`](../classes/Model.md)\<`any`\> Form viewer slot metadata. **Internal use only.** --- # Variable: string > `const` **string**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `string`\> The annotation builder for a component property with type 'string'. --- # Variable: time > `const` **time**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `string`\> The annotation builder for a component property with type 'Time'. --- # Variable: timeFormat > `const` **timeFormat**: `"HH:mm:ss"` = `'HH:mm:ss'` The string format for a value of the Time type. --- # Variable: tooltipProps > `const` **tooltipProps**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> The annotation builder for component tooltip properties. --- # Variable: tooltipType > `const` **tooltipType**: [`TypedBuilder`](../classes/TypedBuilder.md)\<`undefined` \| `string`\> The annotation builder for the form property describing the type of form tooltip. --- # Variable: validation > `const` **validation**: [`AnnotationBuilder`](../classes/AnnotationBuilder.md)\<`unknown`\> The annotation builder for arbitrary HTML attributes of a component. --- # Class: BuilderView Represents all the metadata of the form builder components. ## Extends - [`View`](../../core/classes/View.md) ## Constructors ### new BuilderView() > **new BuilderView**(`builderComponents`): [`BuilderView`](BuilderView.md) Creates metadata for form builder components. #### Parameters • **builderComponents**: [`BuilderComponent`](../../core/interfaces/BuilderComponent.md)[] the array of metadata of form builder components. #### Returns [`BuilderView`](BuilderView.md) #### Overrides [`View`](../../core/classes/View.md).[`constructor`](../../core/classes/View.md#constructors) ## Properties ### builderComponents > **builderComponents**: [`BuilderComponent`](../../core/interfaces/BuilderComponent.md)[] the array of metadata of form builder components. ## Accessors ### errors #### Get Signature > **get** **errors**(): `string`[] ##### Returns `string`[] the array of strings with the names of the component types of the error. *** ### tooltips #### Get Signature > **get** **tooltips**(): `string`[] ##### Returns `string`[] the array of strings with the names of the component types of the tooltip. *** ### viewerWrappers #### Get Signature > **get** **viewerWrappers**(): [`FormViewerWrapper`](../../core/type-aliases/FormViewerWrapper.md)[] Retrieves the viewer wrappers array. ##### Returns [`FormViewerWrapper`](../../core/type-aliases/FormViewerWrapper.md)[] the viewer wrappers array. #### Inherited from [`View`](../../core/classes/View.md).[`viewerWrappers`](../../core/classes/View.md#viewerwrappers) ## Methods ### addComponent() > **addComponent**(`component`): `void` Adds the component metadata to the form builder. #### Parameters • **component**: [`BuilderComponent`](../../core/interfaces/BuilderComponent.md) the component metadata. #### Returns `void` *** ### all() > **all**(): [`Model`](../../core/classes/Model.md)\<`any`\>[] #### Returns [`Model`](../../core/classes/Model.md)\<`any`\>[] all component metadata for the form viewer. #### Inherited from [`View`](../../core/classes/View.md).[`all`](../../core/classes/View.md#all) *** ### define() > **define**(`model`): `void` Defines the component's metadata for the form viewer. #### Parameters • **model**: [`Model`](../../core/classes/Model.md)\<`any`\> the component's metadata. #### Returns `void` #### Inherited from [`View`](../../core/classes/View.md).[`define`](../../core/classes/View.md#define) *** ### find() > **find**(`type`): `undefined` \| [`Model`](../../core/classes/Model.md)\<`any`\> Returns the component's metadata for the form viewer for the specified type. #### Parameters • **type**: `string` the component type. #### Returns `undefined` \| [`Model`](../../core/classes/Model.md)\<`any`\> the component metadata for the form viewer for the specified type or undefined. #### Inherited from [`View`](../../core/classes/View.md).[`find`](../../core/classes/View.md#find) *** ### findMeta() > **findMeta**(`type`): `undefined` \| [`Meta`](../../core/classes/Meta.md) Returns the component metadata for the specified component type name or undefined. #### Parameters • **type**: `string` the component type name. #### Returns `undefined` \| [`Meta`](../../core/classes/Meta.md) the component metadata for the specified component type name or undefined. *** ### get() > **get**(`type`): [`Model`](../../core/classes/Model.md)\<`any`\> Returns the component's metadata for the form viewer for the specified type. #### Parameters • **type**: `string` the component type. #### Returns [`Model`](../../core/classes/Model.md)\<`any`\> the component metadata for the form viewer for the specified type. #### Inherited from [`View`](../../core/classes/View.md).[`get`](../../core/classes/View.md#get) *** ### getCssLoaders() > **getCssLoaders**(`biDi`): () => `Promise`\<`void`\>[] Retrieves the CSS loaders for a given BiDi. #### Parameters • **biDi**: [`BiDi`](../../core/enumerations/BiDi.md) the BiDi object for which to retrieve the CSS loaders. #### Returns () => `Promise`\<`void`\>[] the array containing the CSS loaders for the specified BiDi. #### Inherited from [`View`](../../core/classes/View.md).[`getCssLoaders`](../../core/classes/View.md#getcssloaders) *** ### getErrorAnnotations() > **getErrorAnnotations**(`name`): `undefined` \| [`Annotation`](../../core/classes/Annotation.md)[] Returns the array of metadata properties of the error component. #### Parameters • **name**: `string` the name of the error component type. #### Returns `undefined` \| [`Annotation`](../../core/classes/Annotation.md)[] the array of metadata properties of the error component. *** ### getMeta() > **getMeta**(`type`): [`Meta`](../../core/classes/Meta.md) Returns the component metadata for the specified component type name. #### Parameters • **type**: `string` the component type name. #### Returns [`Meta`](../../core/classes/Meta.md) the component metadata for the specified component type name. *** ### getTooltipAnnotations() > **getTooltipAnnotations**(`name`): `undefined` \| [`Annotation`](../../core/classes/Annotation.md)[] Returns the array of metadata properties of the tooltip component. #### Parameters • **name**: `string` the name of the tooltip component type. #### Returns `undefined` \| [`Annotation`](../../core/classes/Annotation.md)[] the array of metadata properties of the tooltip component. *** ### removeComponent() > **removeComponent**(`name`): `void` Removes the component metadata from the form builder. #### Parameters • **name**: `string` the component type name. #### Returns `void` *** ### withCssLoader() > **withCssLoader**(`cssLoaderType`, `loader`): [`BuilderView`](BuilderView.md) Applies the given CSS loader to the component based on the BiDi layout. #### Parameters • **cssLoaderType**: [`CssLoaderType`](../../core/type-aliases/CssLoaderType.md) the BiDi layout type, either 'common', 'ltr', or 'rtl'. • **loader** the function that returns a Promise to load CSS or other required localization resources. #### Returns [`BuilderView`](BuilderView.md) the [View](../../core/classes/View.md) instance. #### Inherited from [`View`](../../core/classes/View.md).[`withCssLoader`](../../core/classes/View.md#withcssloader) *** ### withErrorMeta() > **withErrorMeta**(`builderComponent`): `this` Sets the metadata of the component that displays form's errors. #### Parameters • **builderComponent**: [`BuilderComponent`](../../core/interfaces/BuilderComponent.md) the metadata of the component that displays the form's errors. #### Returns `this` the instance of the [BuilderView](BuilderView.md) class. *** ### withTemplates() > **withTemplates**(`templates`): `this` Creates metadata for the form builder for templates from the specified template names. #### Parameters • **templates**: `string`[] the array of template names. #### Returns `this` the instance of the [BuilderView](BuilderView.md) class. *** ### withTooltipMeta() > **withTooltipMeta**(`builderComponent`): `this` Sets the metadata of the component that displays the form's tooltips. #### Parameters • **builderComponent**: [`BuilderComponent`](../../core/interfaces/BuilderComponent.md) the metadata of the component that displays the form's tooltips. #### Returns `this` the instance of the [BuilderView](BuilderView.md) class. *** ### withViewerWrapper() > **withViewerWrapper**(`wrapper`): [`BuilderView`](BuilderView.md) Adds a wrapper to the list of viewers for this viewer wrapper. #### Parameters • **wrapper**: [`FormViewerWrapper`](../../core/type-aliases/FormViewerWrapper.md) the viewer wrapper to be added. The wrapper is a component that wraps the form viewer. #### Returns [`BuilderView`](BuilderView.md) the [View](../../core/classes/View.md) instance. #### Inherited from [`View`](../../core/classes/View.md).[`withViewerWrapper`](../../core/classes/View.md#withviewerwrapper) *** ### create() > `static` **create**(`models`): [`View`](../../core/classes/View.md) Static wrapper for the [View](../../core/classes/View.md) constructor. #### Parameters • **models**: [`Model`](../../core/classes/Model.md)\<`any`\>[] the components metadata. #### Returns [`View`](../../core/classes/View.md) the [View](../../core/classes/View.md) instance. #### Inherited from [`View`](../../core/classes/View.md).[`create`](../../core/classes/View.md#create) *** ### createTemplateComponent() > `static` **createTemplateComponent**(`name`): [`BuilderComponent`](../../core/interfaces/BuilderComponent.md) Creates an instance of BuilderComponent for the specified template name. #### Parameters • **name**: `string` the template name #### Returns [`BuilderComponent`](../../core/interfaces/BuilderComponent.md) the BuilderComponent instance. --- # Class: PresetComponentLocalStorage Class for working with the preset components in the local storage. ## Constructors ### new PresetComponentLocalStorage() > **new PresetComponentLocalStorage**(`presetsKey`): [`PresetComponentLocalStorage`](PresetComponentLocalStorage.md) Creates an instance of preset storage in local storage. #### Parameters • **presetsKey**: `string` = `'presetComponents'` the key for the preset components in the local storage. #### Returns [`PresetComponentLocalStorage`](PresetComponentLocalStorage.md) ## Methods ### loadPresets() > **loadPresets**(): [`PresetComponent`](../interfaces/PresetComponent.md)[] Loads the preset components from the local storage. #### Returns [`PresetComponent`](../interfaces/PresetComponent.md)[] the preset components. *** ### removePreset() > **removePreset**(`name`): `void` Removes the preset component from the local storage. #### Parameters • **name**: `string` the name of the preset component. #### Returns `void` *** ### savePreset() > **savePreset**(`preset`): `void` Saves the preset component to the local storage. #### Parameters • **preset**: [`PresetComponent`](../interfaces/PresetComponent.md) the preset component to save. #### Returns `void` --- # Function: ActionCell() > **ActionCell**(`props`): `Element` The React component that displays the table cell with the icon button. **Internal use only.** ## Parameters • **props**: [`ActionCellProps`](../interfaces/ActionCellProps.md) the React component properties. ## Returns `Element` the React element. --- # Function: CheckCell() > **CheckCell**(`props`): `Element` The React component that displays the table cell with the checkbox. **Internal use only.** ## Parameters • **props**: [`InputCellProps`](../interfaces/InputCellProps.md) the React component properties. ## Returns `Element` the React element. --- # Function: EditableTable() > **EditableTable**(`props`): `Element` The React component that displays the table with editable cells. **Internal use only.** ## Parameters • **props**: [`EditableTableProps`](../interfaces/EditableTableProps.md) the React component properties. ## Returns `Element` the React element. --- # Function: FormBuilder() > **FormBuilder**(`props`): `Element` The React component that displays the form builder. ## Parameters • **props**: [`FormBuilderProps`](../interfaces/FormBuilderProps.md) the React component properties. ## Returns `Element` the React element. --- # Function: InputCell() > **InputCell**(`props`): `Element` The React component that displays the table cell with the input. **Internal use only.** ## Parameters • **props**: [`InputCellProps`](../interfaces/InputCellProps.md) the React component properties. ## Returns `Element` the React element. --- # Function: SCell() > **SCell**(`props`): `null` \| `ReactElement`\<`any`, `any`\> ## Parameters • **props**: `InnerCellProps`\<`RowDataType`\<`any`\>, `string` \| `number`\> & `RefAttributes`\<`HTMLDivElement`\> & `object` ## Returns `null` \| `ReactElement`\<`any`, `any`\> --- # Function: SelectCell() > **SelectCell**(`props`): `Element` The React component that displays the table cell with the select input. **Internal use only.** ## Parameters • **props**: [`SelectCellProps`](../interfaces/SelectCellProps.md) the React component properties. ## Returns `Element` the React element. --- # Function: makeColumns() > **makeColumns**(`columns`): `Element`[] Creates table columns based on their descriptions. **Internal use only.** ## Parameters • **columns**: [`ColumnDescription`](../interfaces/ColumnDescription.md)[] the column descriptions. ## Returns `Element`[] the array with React elements. --- # Function: useFormBuilder() > **useFormBuilder**(): [`IFormBuilder`](../interfaces/IFormBuilder.md) The hook to get the form builder settings. ## Returns [`IFormBuilder`](../interfaces/IFormBuilder.md) --- # @react-form-builder/designer ## Classes - [BuilderView](classes/BuilderView.md) - [PresetComponentLocalStorage](classes/PresetComponentLocalStorage.md) ## Interfaces - [ActionCellProps](interfaces/ActionCellProps.md) - [AnnotationEditorProps](interfaces/AnnotationEditorProps.md) - [CalculableEditorProps](interfaces/CalculableEditorProps.md) - [ColumnDescription](interfaces/ColumnDescription.md) - [EditableTableProps](interfaces/EditableTableProps.md) - [EditableTableState](interfaces/EditableTableState.md) - [FormBuilderProps](interfaces/FormBuilderProps.md) - [IFormBuilder](interfaces/IFormBuilder.md) - [IFormStorage](interfaces/IFormStorage.md) - [IPresetComponentOptions](interfaces/IPresetComponentOptions.md) - [InputCellProps](interfaces/InputCellProps.md) - [PresetComponent](interfaces/PresetComponent.md) - [SelectCellProps](interfaces/SelectCellProps.md) ## Type Aliases - [ComputePropertiesParameters](type-aliases/ComputePropertiesParameters.md) - [ComputeTypeParams](type-aliases/ComputeTypeParams.md) - [CustomizableKey](type-aliases/CustomizableKey.md) - [CustomizationMap](type-aliases/CustomizationMap.md) - [FormBuilderI18n](type-aliases/FormBuilderI18n.md) - [FormBuilderI18nData](type-aliases/FormBuilderI18nData.md) - [FormBuilderTheme](type-aliases/FormBuilderTheme.md) - [LocalizationComputeCodeParams](type-aliases/LocalizationComputeCodeParams.md) - [Options](type-aliases/Options.md) ## Variables - [CustomizableZone](variables/CustomizableZone.md) ## Functions - [ActionCell](functions/ActionCell.md) - [CheckCell](functions/CheckCell.md) - [EditableTable](functions/EditableTable.md) - [FormBuilder](functions/FormBuilder.md) - [InputCell](functions/InputCell.md) - [SCell](functions/SCell.md) - [SelectCell](functions/SelectCell.md) - [makeColumns](functions/makeColumns.md) - [useFormBuilder](functions/useFormBuilder.md) --- # Interface: ActionCellProps The properties of ActionCell component. ## Extends - `InnerCellProps`\<`RowDataType`, `string` \| `number`\> ## Properties ### about? > `optional` **about**: `string` #### Inherited from `InnerCellProps.about` *** ### accessKey? > `optional` **accessKey**: `string` #### Inherited from `InnerCellProps.accessKey` *** ### align? > `optional` **align**: `JustifyContent` #### Inherited from `InnerCellProps.align` *** ### aria-activedescendant? > `optional` **aria-activedescendant**: `string` Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. #### Inherited from `InnerCellProps.aria-activedescendant` *** ### aria-atomic? > `optional` **aria-atomic**: `Booleanish` Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. #### Inherited from `InnerCellProps.aria-atomic` *** ### aria-autocomplete? > `optional` **aria-autocomplete**: `"none"` \| `"list"` \| `"inline"` \| `"both"` Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. #### Inherited from `InnerCellProps.aria-autocomplete` *** ### aria-braillelabel? > `optional` **aria-braillelabel**: `string` Defines a string value that labels the current element, which is intended to be converted into Braille. #### See aria-label. #### Inherited from `InnerCellProps.aria-braillelabel` *** ### aria-brailleroledescription? > `optional` **aria-brailleroledescription**: `string` Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. #### See aria-roledescription. #### Inherited from `InnerCellProps.aria-brailleroledescription` *** ### aria-busy? > `optional` **aria-busy**: `Booleanish` #### Inherited from `InnerCellProps.aria-busy` *** ### aria-checked? > `optional` **aria-checked**: `boolean` \| `"true"` \| `"false"` \| `"mixed"` Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. #### See - aria-pressed - aria-selected. #### Inherited from `InnerCellProps.aria-checked` *** ### aria-colcount? > `optional` **aria-colcount**: `number` Defines the total number of columns in a table, grid, or treegrid. #### See aria-colindex. #### Inherited from `InnerCellProps.aria-colcount` *** ### aria-colindex? > `optional` **aria-colindex**: `number` Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. #### See - aria-colcount - aria-colspan. #### Inherited from `InnerCellProps.aria-colindex` *** ### aria-colindextext? > `optional` **aria-colindextext**: `string` Defines a human readable text alternative of aria-colindex. #### See aria-rowindextext. #### Inherited from `InnerCellProps.aria-colindextext` *** ### aria-colspan? > `optional` **aria-colspan**: `number` Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. #### See - aria-colindex - aria-rowspan. #### Inherited from `InnerCellProps.aria-colspan` *** ### aria-controls? > `optional` **aria-controls**: `string` Identifies the element (or elements) whose contents or presence are controlled by the current element. #### See aria-owns. #### Inherited from `InnerCellProps.aria-controls` *** ### aria-current? > `optional` **aria-current**: `boolean` \| `"time"` \| `"date"` \| `"true"` \| `"false"` \| `"page"` \| `"step"` \| `"location"` Indicates the element that represents the current item within a container or set of related elements. #### Inherited from `InnerCellProps.aria-current` *** ### aria-describedby? > `optional` **aria-describedby**: `string` Identifies the element (or elements) that describes the object. #### See aria-labelledby #### Inherited from `InnerCellProps.aria-describedby` *** ### aria-description? > `optional` **aria-description**: `string` Defines a string value that describes or annotates the current element. #### See related aria-describedby. #### Inherited from `InnerCellProps.aria-description` *** ### aria-details? > `optional` **aria-details**: `string` Identifies the element that provides a detailed, extended description for the object. #### See aria-describedby. #### Inherited from `InnerCellProps.aria-details` *** ### aria-disabled? > `optional` **aria-disabled**: `Booleanish` Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. #### See - aria-hidden - aria-readonly. #### Inherited from `InnerCellProps.aria-disabled` *** ### ~~aria-dropeffect?~~ > `optional` **aria-dropeffect**: `"link"` \| `"none"` \| `"copy"` \| `"execute"` \| `"move"` \| `"popup"` Indicates what functions can be performed when a dragged object is released on the drop target. #### Deprecated in ARIA 1.1 #### Inherited from `InnerCellProps.aria-dropeffect` *** ### aria-errormessage? > `optional` **aria-errormessage**: `string` Identifies the element that provides an error message for the object. #### See - aria-invalid - aria-describedby. #### Inherited from `InnerCellProps.aria-errormessage` *** ### aria-expanded? > `optional` **aria-expanded**: `Booleanish` Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. #### Inherited from `InnerCellProps.aria-expanded` *** ### aria-flowto? > `optional` **aria-flowto**: `string` Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. #### Inherited from `InnerCellProps.aria-flowto` *** ### ~~aria-grabbed?~~ > `optional` **aria-grabbed**: `Booleanish` Indicates an element's "grabbed" state in a drag-and-drop operation. #### Deprecated in ARIA 1.1 #### Inherited from `InnerCellProps.aria-grabbed` *** ### aria-haspopup? > `optional` **aria-haspopup**: `boolean` \| `"dialog"` \| `"menu"` \| `"true"` \| `"false"` \| `"grid"` \| `"listbox"` \| `"tree"` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. #### Inherited from `InnerCellProps.aria-haspopup` *** ### aria-hidden? > `optional` **aria-hidden**: `Booleanish` Indicates whether the element is exposed to an accessibility API. #### See aria-disabled. #### Inherited from `InnerCellProps.aria-hidden` *** ### aria-invalid? > `optional` **aria-invalid**: `boolean` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"` Indicates the entered value does not conform to the format expected by the application. #### See aria-errormessage. #### Inherited from `InnerCellProps.aria-invalid` *** ### aria-keyshortcuts? > `optional` **aria-keyshortcuts**: `string` Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. #### Inherited from `InnerCellProps.aria-keyshortcuts` *** ### aria-label? > `optional` **aria-label**: `string` Defines a string value that labels the current element. #### See aria-labelledby. #### Inherited from `InnerCellProps.aria-label` *** ### aria-labelledby? > `optional` **aria-labelledby**: `string` Identifies the element (or elements) that labels the current element. #### See aria-describedby. #### Inherited from `InnerCellProps.aria-labelledby` *** ### aria-level? > `optional` **aria-level**: `number` Defines the hierarchical level of an element within a structure. #### Inherited from `InnerCellProps.aria-level` *** ### aria-live? > `optional` **aria-live**: `"off"` \| `"assertive"` \| `"polite"` Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. #### Inherited from `InnerCellProps.aria-live` *** ### aria-modal? > `optional` **aria-modal**: `Booleanish` Indicates whether an element is modal when displayed. #### Inherited from `InnerCellProps.aria-modal` *** ### aria-multiline? > `optional` **aria-multiline**: `Booleanish` Indicates whether a text box accepts multiple lines of input or only a single line. #### Inherited from `InnerCellProps.aria-multiline` *** ### aria-multiselectable? > `optional` **aria-multiselectable**: `Booleanish` Indicates that the user may select more than one item from the current selectable descendants. #### Inherited from `InnerCellProps.aria-multiselectable` *** ### aria-orientation? > `optional` **aria-orientation**: `"horizontal"` \| `"vertical"` Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. #### Inherited from `InnerCellProps.aria-orientation` *** ### aria-owns? > `optional` **aria-owns**: `string` Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. #### See aria-controls. #### Inherited from `InnerCellProps.aria-owns` *** ### aria-placeholder? > `optional` **aria-placeholder**: `string` Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. #### Inherited from `InnerCellProps.aria-placeholder` *** ### aria-posinset? > `optional` **aria-posinset**: `number` Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. #### See aria-setsize. #### Inherited from `InnerCellProps.aria-posinset` *** ### aria-pressed? > `optional` **aria-pressed**: `boolean` \| `"true"` \| `"false"` \| `"mixed"` Indicates the current "pressed" state of toggle buttons. #### See - aria-checked - aria-selected. #### Inherited from `InnerCellProps.aria-pressed` *** ### aria-readonly? > `optional` **aria-readonly**: `Booleanish` Indicates that the element is not editable, but is otherwise operable. #### See aria-disabled. #### Inherited from `InnerCellProps.aria-readonly` *** ### aria-relevant? > `optional` **aria-relevant**: `"text"` \| `"all"` \| `"additions"` \| `"additions removals"` \| `"additions text"` \| `"removals"` \| `"removals additions"` \| `"removals text"` \| `"text additions"` \| `"text removals"` Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. #### See aria-atomic. #### Inherited from `InnerCellProps.aria-relevant` *** ### aria-required? > `optional` **aria-required**: `Booleanish` Indicates that user input is required on the element before a form may be submitted. #### Inherited from `InnerCellProps.aria-required` *** ### aria-roledescription? > `optional` **aria-roledescription**: `string` Defines a human-readable, author-localized description for the role of an element. #### Inherited from `InnerCellProps.aria-roledescription` *** ### aria-rowcount? > `optional` **aria-rowcount**: `number` Defines the total number of rows in a table, grid, or treegrid. #### See aria-rowindex. #### Inherited from `InnerCellProps.aria-rowcount` *** ### aria-rowindex? > `optional` **aria-rowindex**: `number` Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. #### See - aria-rowcount - aria-rowspan. #### Inherited from `InnerCellProps.aria-rowindex` *** ### aria-rowindextext? > `optional` **aria-rowindextext**: `string` Defines a human readable text alternative of aria-rowindex. #### See aria-colindextext. #### Inherited from `InnerCellProps.aria-rowindextext` *** ### aria-rowspan? > `optional` **aria-rowspan**: `number` Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. #### See - aria-rowindex - aria-colspan. #### Inherited from `InnerCellProps.aria-rowspan` *** ### aria-selected? > `optional` **aria-selected**: `Booleanish` Indicates the current "selected" state of various widgets. #### See - aria-checked - aria-pressed. #### Inherited from `InnerCellProps.aria-selected` *** ### aria-setsize? > `optional` **aria-setsize**: `number` Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. #### See aria-posinset. #### Inherited from `InnerCellProps.aria-setsize` *** ### aria-sort? > `optional` **aria-sort**: `"none"` \| `"ascending"` \| `"descending"` \| `"other"` Indicates if items in a table or grid are sorted in ascending or descending order. #### Inherited from `InnerCellProps.aria-sort` *** ### aria-valuemax? > `optional` **aria-valuemax**: `number` Defines the maximum allowed value for a range widget. #### Inherited from `InnerCellProps.aria-valuemax` *** ### aria-valuemin? > `optional` **aria-valuemin**: `number` Defines the minimum allowed value for a range widget. #### Inherited from `InnerCellProps.aria-valuemin` *** ### aria-valuenow? > `optional` **aria-valuenow**: `number` Defines the current value for a range widget. #### See aria-valuetext. #### Inherited from `InnerCellProps.aria-valuenow` *** ### aria-valuetext? > `optional` **aria-valuetext**: `string` Defines the human readable text alternative of aria-valuenow for a range widget. #### Inherited from `InnerCellProps.aria-valuetext` *** ### autoCapitalize? > `optional` **autoCapitalize**: `string` & `object` \| `"off"` \| `"none"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"` #### Inherited from `InnerCellProps.autoCapitalize` *** ### autoCorrect? > `optional` **autoCorrect**: `string` #### Inherited from `InnerCellProps.autoCorrect` *** ### autoFocus? > `optional` **autoFocus**: `boolean` #### Inherited from `InnerCellProps.autoFocus` *** ### autoSave? > `optional` **autoSave**: `string` #### Inherited from `InnerCellProps.autoSave` *** ### children? > `optional` **children**: `ReactNode` \| (`rowData`, `rowIndex`?) => `ReactNode` #### Inherited from `InnerCellProps.children` *** ### className? > `optional` **className**: `string` Additional classes #### Inherited from `InnerCellProps.className` *** ### classPrefix? > `optional` **classPrefix**: `string` The prefix of the component CSS class #### Inherited from `InnerCellProps.classPrefix` *** ### color? > `optional` **color**: `string` #### Inherited from `InnerCellProps.color` *** ### content? > `optional` **content**: `string` #### Inherited from `InnerCellProps.content` *** ### contentEditable? > `optional` **contentEditable**: `"inherit"` \| `Booleanish` \| `"plaintext-only"` #### Inherited from `InnerCellProps.contentEditable` *** ### contextMenu? > `optional` **contextMenu**: `string` #### Inherited from `InnerCellProps.contextMenu` *** ### dangerouslySetInnerHTML? > `optional` **dangerouslySetInnerHTML**: `object` #### \_\_html > **\_\_html**: `string` \| `TrustedHTML` #### Inherited from `InnerCellProps.dangerouslySetInnerHTML` *** ### dataKey? > `optional` **dataKey**: `string` Data binding key, but also a sort of key #### Inherited from `InnerCellProps.dataKey` *** ### datatype? > `optional` **datatype**: `string` #### Inherited from `InnerCellProps.datatype` *** ### defaultChecked? > `optional` **defaultChecked**: `boolean` #### Inherited from `InnerCellProps.defaultChecked` *** ### defaultValue? > `optional` **defaultValue**: `string` \| `number` \| readonly `string`[] #### Inherited from `InnerCellProps.defaultValue` *** ### depth? > `optional` **depth**: `number` #### Inherited from `InnerCellProps.depth` *** ### dir? > `optional` **dir**: `string` #### Inherited from `InnerCellProps.dir` *** ### draggable? > `optional` **draggable**: `Booleanish` #### Inherited from `InnerCellProps.draggable` *** ### enterKeyHint? > `optional` **enterKeyHint**: `"search"` \| `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"previous"` \| `"send"` #### Inherited from `InnerCellProps.enterKeyHint` *** ### expanded? > `optional` **expanded**: `boolean` #### Inherited from `InnerCellProps.expanded` *** ### firstColumn? > `optional` **firstColumn**: `boolean` #### Inherited from `InnerCellProps.firstColumn` *** ### fullText? > `optional` **fullText**: `boolean` #### Inherited from `InnerCellProps.fullText` *** ### hasChildren? > `optional` **hasChildren**: `boolean` #### Inherited from `InnerCellProps.hasChildren` *** ### headerHeight? > `optional` **headerHeight**: `number` #### Inherited from `InnerCellProps.headerHeight` *** ### height? > `optional` **height**: `number` \| (`rowData`) => `number` #### Inherited from `InnerCellProps.height` *** ### hidden? > `optional` **hidden**: `boolean` #### Inherited from `InnerCellProps.hidden` *** ### icon() > **icon**: () => `ReactElement`\<`IconProps`, `string` \| `JSXElementConstructor`\<`any`\>\> The cell icon. #### Returns `ReactElement`\<`IconProps`, `string` \| `JSXElementConstructor`\<`any`\>\> *** ### id? > `optional` **id**: `string` #### Inherited from `InnerCellProps.id` *** ### inert? > `optional` **inert**: `boolean` #### See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert #### Inherited from `InnerCellProps.inert` *** ### inlist? > `optional` **inlist**: `any` #### Inherited from `InnerCellProps.inlist` *** ### inputMode? > `optional` **inputMode**: `"search"` \| `"text"` \| `"none"` \| `"tel"` \| `"url"` \| `"email"` \| `"numeric"` \| `"decimal"` Hints at the type of data that might be entered by the user while editing the element or its contents #### See [https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute) #### Inherited from `InnerCellProps.inputMode` *** ### is? > `optional` **is**: `string` Specify that a standard HTML element should behave like a defined custom built-in element #### See [https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is](https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is) #### Inherited from `InnerCellProps.is` *** ### isHeaderCell? > `optional` **isHeaderCell**: `boolean` #### Inherited from `InnerCellProps.isHeaderCell` *** ### itemID? > `optional` **itemID**: `string` #### Inherited from `InnerCellProps.itemID` *** ### itemProp? > `optional` **itemProp**: `string` #### Inherited from `InnerCellProps.itemProp` *** ### itemRef? > `optional` **itemRef**: `string` #### Inherited from `InnerCellProps.itemRef` *** ### itemScope? > `optional` **itemScope**: `boolean` #### Inherited from `InnerCellProps.itemScope` *** ### itemType? > `optional` **itemType**: `string` #### Inherited from `InnerCellProps.itemType` *** ### lang? > `optional` **lang**: `string` #### Inherited from `InnerCellProps.lang` *** ### lastColumn? > `optional` **lastColumn**: `boolean` #### Inherited from `InnerCellProps.lastColumn` *** ### left? > `optional` **left**: `number` #### Inherited from `InnerCellProps.left` *** ### nonce? > `optional` **nonce**: `string` #### Inherited from `InnerCellProps.nonce` *** ### onAbort? > `optional` **onAbort**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAbort` *** ### onAbortCapture? > `optional` **onAbortCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAbortCapture` *** ### onAction() > **onAction**: (`rowIndex`?) => `void` The callback function called when the cell is clicked. #### Parameters • **rowIndex?**: `number` the row index. #### Returns `void` *** ### onAnimationEnd? > `optional` **onAnimationEnd**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationEnd` *** ### onAnimationEndCapture? > `optional` **onAnimationEndCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationEndCapture` *** ### onAnimationIteration? > `optional` **onAnimationIteration**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationIteration` *** ### onAnimationIterationCapture? > `optional` **onAnimationIterationCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationIterationCapture` *** ### onAnimationStart? > `optional` **onAnimationStart**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationStart` *** ### onAnimationStartCapture? > `optional` **onAnimationStartCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationStartCapture` *** ### onAuxClick? > `optional` **onAuxClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAuxClick` *** ### onAuxClickCapture? > `optional` **onAuxClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAuxClickCapture` *** ### onBeforeInput? > `optional` **onBeforeInput**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onBeforeInput` *** ### onBeforeInputCapture? > `optional` **onBeforeInputCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onBeforeInputCapture` *** ### onBeforeToggle? > `optional` **onBeforeToggle**: `ToggleEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onBeforeToggle` *** ### onBlur? > `optional` **onBlur**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onBlur` *** ### onBlurCapture? > `optional` **onBlurCapture**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onBlurCapture` *** ### onCanPlay? > `optional` **onCanPlay**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCanPlay` *** ### onCanPlayCapture? > `optional` **onCanPlayCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCanPlayCapture` *** ### onCanPlayThrough? > `optional` **onCanPlayThrough**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCanPlayThrough` *** ### onCanPlayThroughCapture? > `optional` **onCanPlayThroughCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCanPlayThroughCapture` *** ### onChange? > `optional` **onChange**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onChange` *** ### onChangeCapture? > `optional` **onChangeCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onChangeCapture` *** ### onClick? > `optional` **onClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onClick` *** ### onClickCapture? > `optional` **onClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onClickCapture` *** ### onCompositionEnd? > `optional` **onCompositionEnd**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionEnd` *** ### onCompositionEndCapture? > `optional` **onCompositionEndCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionEndCapture` *** ### onCompositionStart? > `optional` **onCompositionStart**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionStart` *** ### onCompositionStartCapture? > `optional` **onCompositionStartCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionStartCapture` *** ### onCompositionUpdate? > `optional` **onCompositionUpdate**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionUpdate` *** ### onCompositionUpdateCapture? > `optional` **onCompositionUpdateCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionUpdateCapture` *** ### onContextMenu? > `optional` **onContextMenu**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onContextMenu` *** ### onContextMenuCapture? > `optional` **onContextMenuCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onContextMenuCapture` *** ### onCopy? > `optional` **onCopy**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCopy` *** ### onCopyCapture? > `optional` **onCopyCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCopyCapture` *** ### onCut? > `optional` **onCut**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCut` *** ### onCutCapture? > `optional` **onCutCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCutCapture` *** ### onDoubleClick? > `optional` **onDoubleClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDoubleClick` *** ### onDoubleClickCapture? > `optional` **onDoubleClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDoubleClickCapture` *** ### onDrag? > `optional` **onDrag**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDrag` *** ### onDragCapture? > `optional` **onDragCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragCapture` *** ### onDragEnd? > `optional` **onDragEnd**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragEnd` *** ### onDragEndCapture? > `optional` **onDragEndCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragEndCapture` *** ### onDragEnter? > `optional` **onDragEnter**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragEnter` *** ### onDragEnterCapture? > `optional` **onDragEnterCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragEnterCapture` *** ### onDragExit? > `optional` **onDragExit**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragExit` *** ### onDragExitCapture? > `optional` **onDragExitCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragExitCapture` *** ### onDragLeave? > `optional` **onDragLeave**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragLeave` *** ### onDragLeaveCapture? > `optional` **onDragLeaveCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragLeaveCapture` *** ### onDragOver? > `optional` **onDragOver**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragOver` *** ### onDragOverCapture? > `optional` **onDragOverCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragOverCapture` *** ### onDragStart? > `optional` **onDragStart**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragStart` *** ### onDragStartCapture? > `optional` **onDragStartCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragStartCapture` *** ### onDrop? > `optional` **onDrop**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDrop` *** ### onDropCapture? > `optional` **onDropCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDropCapture` *** ### onDurationChange? > `optional` **onDurationChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDurationChange` *** ### onDurationChangeCapture? > `optional` **onDurationChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDurationChangeCapture` *** ### onEmptied? > `optional` **onEmptied**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEmptied` *** ### onEmptiedCapture? > `optional` **onEmptiedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEmptiedCapture` *** ### onEncrypted? > `optional` **onEncrypted**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEncrypted` *** ### onEncryptedCapture? > `optional` **onEncryptedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEncryptedCapture` *** ### onEnded? > `optional` **onEnded**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEnded` *** ### onEndedCapture? > `optional` **onEndedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEndedCapture` *** ### onError? > `optional` **onError**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onError` *** ### onErrorCapture? > `optional` **onErrorCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onErrorCapture` *** ### onFocus? > `optional` **onFocus**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onFocus` *** ### onFocusCapture? > `optional` **onFocusCapture**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onFocusCapture` *** ### onGotPointerCapture? > `optional` **onGotPointerCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onGotPointerCapture` *** ### onGotPointerCaptureCapture? > `optional` **onGotPointerCaptureCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onGotPointerCaptureCapture` *** ### onInput? > `optional` **onInput**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onInput` *** ### onInputCapture? > `optional` **onInputCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onInputCapture` *** ### onInvalid? > `optional` **onInvalid**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onInvalid` *** ### onInvalidCapture? > `optional` **onInvalidCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onInvalidCapture` *** ### onKeyDown? > `optional` **onKeyDown**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onKeyDown` *** ### onKeyDownCapture? > `optional` **onKeyDownCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onKeyDownCapture` *** ### ~~onKeyPress?~~ > `optional` **onKeyPress**: `KeyboardEventHandler`\<`HTMLElement`\> #### Deprecated Use `onKeyUp` or `onKeyDown` instead #### Inherited from `InnerCellProps.onKeyPress` *** ### ~~onKeyPressCapture?~~ > `optional` **onKeyPressCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead #### Inherited from `InnerCellProps.onKeyPressCapture` *** ### onKeyUp? > `optional` **onKeyUp**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onKeyUp` *** ### onKeyUpCapture? > `optional` **onKeyUpCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onKeyUpCapture` *** ### onLoad? > `optional` **onLoad**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoad` *** ### onLoadCapture? > `optional` **onLoadCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadCapture` *** ### onLoadStart? > `optional` **onLoadStart**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadStart` *** ### onLoadStartCapture? > `optional` **onLoadStartCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadStartCapture` *** ### onLoadedData? > `optional` **onLoadedData**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadedData` *** ### onLoadedDataCapture? > `optional` **onLoadedDataCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadedDataCapture` *** ### onLoadedMetadata? > `optional` **onLoadedMetadata**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadedMetadata` *** ### onLoadedMetadataCapture? > `optional` **onLoadedMetadataCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadedMetadataCapture` *** ### onLostPointerCapture? > `optional` **onLostPointerCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLostPointerCapture` *** ### onLostPointerCaptureCapture? > `optional` **onLostPointerCaptureCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLostPointerCaptureCapture` *** ### onMouseDown? > `optional` **onMouseDown**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseDown` *** ### onMouseDownCapture? > `optional` **onMouseDownCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseDownCapture` *** ### onMouseEnter? > `optional` **onMouseEnter**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseEnter` *** ### onMouseLeave? > `optional` **onMouseLeave**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseLeave` *** ### onMouseMove? > `optional` **onMouseMove**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseMove` *** ### onMouseMoveCapture? > `optional` **onMouseMoveCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseMoveCapture` *** ### onMouseOut? > `optional` **onMouseOut**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseOut` *** ### onMouseOutCapture? > `optional` **onMouseOutCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseOutCapture` *** ### onMouseOver? > `optional` **onMouseOver**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseOver` *** ### onMouseOverCapture? > `optional` **onMouseOverCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseOverCapture` *** ### onMouseUp? > `optional` **onMouseUp**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseUp` *** ### onMouseUpCapture? > `optional` **onMouseUpCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseUpCapture` *** ### onPaste? > `optional` **onPaste**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPaste` *** ### onPasteCapture? > `optional` **onPasteCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPasteCapture` *** ### onPause? > `optional` **onPause**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPause` *** ### onPauseCapture? > `optional` **onPauseCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPauseCapture` *** ### onPlay? > `optional` **onPlay**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPlay` *** ### onPlayCapture? > `optional` **onPlayCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPlayCapture` *** ### onPlaying? > `optional` **onPlaying**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPlaying` *** ### onPlayingCapture? > `optional` **onPlayingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPlayingCapture` *** ### onPointerCancel? > `optional` **onPointerCancel**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerCancel` *** ### onPointerCancelCapture? > `optional` **onPointerCancelCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerCancelCapture` *** ### onPointerDown? > `optional` **onPointerDown**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerDown` *** ### onPointerDownCapture? > `optional` **onPointerDownCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerDownCapture` *** ### onPointerEnter? > `optional` **onPointerEnter**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerEnter` *** ### onPointerLeave? > `optional` **onPointerLeave**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerLeave` *** ### onPointerMove? > `optional` **onPointerMove**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerMove` *** ### onPointerMoveCapture? > `optional` **onPointerMoveCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerMoveCapture` *** ### onPointerOut? > `optional` **onPointerOut**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerOut` *** ### onPointerOutCapture? > `optional` **onPointerOutCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerOutCapture` *** ### onPointerOver? > `optional` **onPointerOver**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerOver` *** ### onPointerOverCapture? > `optional` **onPointerOverCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerOverCapture` *** ### onPointerUp? > `optional` **onPointerUp**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerUp` *** ### onPointerUpCapture? > `optional` **onPointerUpCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerUpCapture` *** ### onProgress? > `optional` **onProgress**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onProgress` *** ### onProgressCapture? > `optional` **onProgressCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onProgressCapture` *** ### onRateChange? > `optional` **onRateChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onRateChange` *** ### onRateChangeCapture? > `optional` **onRateChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onRateChangeCapture` *** ### onReset? > `optional` **onReset**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onReset` *** ### onResetCapture? > `optional` **onResetCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onResetCapture` *** ### onResize? > `optional` **onResize**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onResize` *** ### onResizeCapture? > `optional` **onResizeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onResizeCapture` *** ### onScroll? > `optional` **onScroll**: `UIEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onScroll` *** ### onScrollCapture? > `optional` **onScrollCapture**: `UIEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onScrollCapture` *** ### onSeeked? > `optional` **onSeeked**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSeeked` *** ### onSeekedCapture? > `optional` **onSeekedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSeekedCapture` *** ### onSeeking? > `optional` **onSeeking**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSeeking` *** ### onSeekingCapture? > `optional` **onSeekingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSeekingCapture` *** ### onSelect? > `optional` **onSelect**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSelect` *** ### onSelectCapture? > `optional` **onSelectCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSelectCapture` *** ### onStalled? > `optional` **onStalled**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onStalled` *** ### onStalledCapture? > `optional` **onStalledCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onStalledCapture` *** ### onSubmit? > `optional` **onSubmit**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSubmit` *** ### onSubmitCapture? > `optional` **onSubmitCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSubmitCapture` *** ### onSuspend? > `optional` **onSuspend**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSuspend` *** ### onSuspendCapture? > `optional` **onSuspendCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSuspendCapture` *** ### onTimeUpdate? > `optional` **onTimeUpdate**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTimeUpdate` *** ### onTimeUpdateCapture? > `optional` **onTimeUpdateCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTimeUpdateCapture` *** ### onToggle? > `optional` **onToggle**: `ToggleEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onToggle` *** ### onTouchCancel? > `optional` **onTouchCancel**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchCancel` *** ### onTouchCancelCapture? > `optional` **onTouchCancelCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchCancelCapture` *** ### onTouchEnd? > `optional` **onTouchEnd**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchEnd` *** ### onTouchEndCapture? > `optional` **onTouchEndCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchEndCapture` *** ### onTouchMove? > `optional` **onTouchMove**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchMove` *** ### onTouchMoveCapture? > `optional` **onTouchMoveCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchMoveCapture` *** ### onTouchStart? > `optional` **onTouchStart**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchStart` *** ### onTouchStartCapture? > `optional` **onTouchStartCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchStartCapture` *** ### onTransitionCancel? > `optional` **onTransitionCancel**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionCancel` *** ### onTransitionCancelCapture? > `optional` **onTransitionCancelCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionCancelCapture` *** ### onTransitionEnd? > `optional` **onTransitionEnd**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionEnd` *** ### onTransitionEndCapture? > `optional` **onTransitionEndCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionEndCapture` *** ### onTransitionRun? > `optional` **onTransitionRun**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionRun` *** ### onTransitionRunCapture? > `optional` **onTransitionRunCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionRunCapture` *** ### onTransitionStart? > `optional` **onTransitionStart**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionStart` *** ### onTransitionStartCapture? > `optional` **onTransitionStartCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionStartCapture` *** ### onTreeToggle()? > `optional` **onTreeToggle**: (`rowKey`?, `rowIndex`?, `rowData`?, `event`?) => `void` #### Parameters • **rowKey?**: `string` \| `number` • **rowIndex?**: `number` • **rowData?**: `RowDataType`\<`any`\> • **event?**: `MouseEvent`\<`Element`, `MouseEvent`\> #### Returns `void` #### Inherited from `InnerCellProps.onTreeToggle` *** ### onVolumeChange? > `optional` **onVolumeChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onVolumeChange` *** ### onVolumeChangeCapture? > `optional` **onVolumeChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onVolumeChangeCapture` *** ### onWaiting? > `optional` **onWaiting**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onWaiting` *** ### onWaitingCapture? > `optional` **onWaitingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onWaitingCapture` *** ### onWheel? > `optional` **onWheel**: `WheelEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onWheel` *** ### onWheelCapture? > `optional` **onWheelCapture**: `WheelEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onWheelCapture` *** ### popover? > `optional` **popover**: `""` \| `"auto"` \| `"manual"` #### Inherited from `InnerCellProps.popover` *** ### popoverTarget? > `optional` **popoverTarget**: `string` #### Inherited from `InnerCellProps.popoverTarget` *** ### popoverTargetAction? > `optional` **popoverTargetAction**: `"toggle"` \| `"show"` \| `"hide"` #### Inherited from `InnerCellProps.popoverTargetAction` *** ### predefinedStyle? > `optional` **predefinedStyle**: `CSSProperties` #### Inherited from `InnerCellProps.predefinedStyle` *** ### prefix? > `optional` **prefix**: `string` #### Inherited from `InnerCellProps.prefix` *** ### property? > `optional` **property**: `string` #### Inherited from `InnerCellProps.property` *** ### radioGroup? > `optional` **radioGroup**: `string` #### Inherited from `InnerCellProps.radioGroup` *** ### rel? > `optional` **rel**: `string` #### Inherited from `InnerCellProps.rel` *** ### removed? > `optional` **removed**: `boolean` #### Inherited from `InnerCellProps.removed` *** ### renderCell()? > `optional` **renderCell**: (`contentChildren`) => `ReactNode` #### Parameters • **contentChildren**: `any` #### Returns `ReactNode` #### Inherited from `InnerCellProps.renderCell` *** ### renderTreeToggle()? > `optional` **renderTreeToggle**: (`expandButton`, `rowData`?, `expanded`?) => `ReactNode` #### Parameters • **expandButton**: `ReactNode` • **rowData?**: `RowDataType`\<`any`\> • **expanded?**: `boolean` #### Returns `ReactNode` #### Inherited from `InnerCellProps.renderTreeToggle` *** ### resource? > `optional` **resource**: `string` #### Inherited from `InnerCellProps.resource` *** ### results? > `optional` **results**: `number` #### Inherited from `InnerCellProps.results` *** ### rev? > `optional` **rev**: `string` #### Inherited from `InnerCellProps.rev` *** ### role? > `optional` **role**: `AriaRole` #### Inherited from `InnerCellProps.role` *** ### rowData? > `optional` **rowData**: `RowDataType`\<`any`\> Row Data #### Inherited from `InnerCellProps.rowData` *** ### rowIndex? > `optional` **rowIndex**: `number` Row Number #### Inherited from `InnerCellProps.rowIndex` *** ### rowKey? > `optional` **rowKey**: `string` \| `number` #### Inherited from `InnerCellProps.rowKey` *** ### rowSpan? > `optional` **rowSpan**: `number` #### Inherited from `InnerCellProps.rowSpan` *** ### security? > `optional` **security**: `string` #### Inherited from `InnerCellProps.security` *** ### slot? > `optional` **slot**: `string` #### Inherited from `InnerCellProps.slot` *** ### spellCheck? > `optional` **spellCheck**: `Booleanish` #### Inherited from `InnerCellProps.spellCheck` *** ### style? > `optional` **style**: `CSSProperties` Additional style #### Inherited from `InnerCellProps.style` *** ### suppressContentEditableWarning? > `optional` **suppressContentEditableWarning**: `boolean` #### Inherited from `InnerCellProps.suppressContentEditableWarning` *** ### suppressHydrationWarning? > `optional` **suppressHydrationWarning**: `boolean` #### Inherited from `InnerCellProps.suppressHydrationWarning` *** ### tabIndex? > `optional` **tabIndex**: `number` #### Inherited from `InnerCellProps.tabIndex` *** ### title? > `optional` **title**: `string` #### Inherited from `InnerCellProps.title` *** ### translate? > `optional` **translate**: `"yes"` \| `"no"` #### Inherited from `InnerCellProps.translate` *** ### treeCol? > `optional` **treeCol**: `boolean` #### Inherited from `InnerCellProps.treeCol` *** ### typeof? > `optional` **typeof**: `string` #### Inherited from `InnerCellProps.typeof` *** ### unselectable? > `optional` **unselectable**: `"off"` \| `"on"` #### Inherited from `InnerCellProps.unselectable` *** ### verticalAlign? > `optional` **verticalAlign**: `"bottom"` \| `"top"` \| `AlignItems` \| `"middle"` #### Inherited from `InnerCellProps.verticalAlign` *** ### vocab? > `optional` **vocab**: `string` #### Inherited from `InnerCellProps.vocab` *** ### width? > `optional` **width**: `number` #### Inherited from `InnerCellProps.width` *** ### wordWrap? > `optional` **wordWrap**: `boolean` \| `"break-all"` \| `"break-word"` \| `"keep-all"` #### Inherited from `InnerCellProps.wordWrap` --- # Interface: AnnotationEditorProps Props for the AnnotationEditor component. ## Extends - [`CalculableEditorProps`](CalculableEditorProps.md) ## Properties ### annotation > **annotation**: [`Annotation`](../../core/classes/Annotation.md) Annotation editor annotation. *** ### componentData > **componentData**: [`ComponentData`](../../core/classes/ComponentData.md) The component data. *** ### disableCompute() > **disableCompute**: () => `void` Disables the ability to make the property computable. #### Returns `void` #### Inherited from [`CalculableEditorProps`](CalculableEditorProps.md).[`disableCompute`](CalculableEditorProps.md#disablecompute) *** ### getComputeCode() > **getComputeCode**: \<`T`\>(`type`, `params`?) => `string` Returns the code of the computed property. #### Type Parameters • **T** *extends* [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) the component property value type. #### Parameters • **type**: `T` the component property value type. • **params?**: [`ComputeTypeParams`](../type-aliases/ComputeTypeParams.md)\<`T`\> the parameters of the compute code. #### Returns `string` the code of the computed property. #### Inherited from [`CalculableEditorProps`](CalculableEditorProps.md).[`getComputeCode`](CalculableEditorProps.md#getcomputecode) *** ### getComputeType() > **getComputeType**: () => `undefined` \| [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) Returns the type of calculation for the property. #### Returns `undefined` \| [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) #### Inherited from [`CalculableEditorProps`](CalculableEditorProps.md).[`getComputeType`](CalculableEditorProps.md#getcomputetype) *** ### hasComputeCode() > **hasComputeCode**: (`type`) => `boolean` Returns true if the property has a compute code for the specified type, false otherwise. #### Parameters • **type**: [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) the compute type. #### Returns `boolean` true if the property has a compute code for the specified type, false otherwise. #### Inherited from [`CalculableEditorProps`](CalculableEditorProps.md).[`hasComputeCode`](CalculableEditorProps.md#hascomputecode) *** ### onChange() > **onChange**: (`value`) => `void` Annotation editor onChange handler. #### Parameters • **value**: `any` #### Returns `void` *** ### onClean() > **onClean**: () => `void` Annotation editor onClean handler. #### Returns `void` *** ### setComputeCode() > **setComputeCode**: \<`T`\>(`value`, `type`, `params`?) => `void` Sets the computed property code. #### Type Parameters • **T** *extends* [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) the component property value type. #### Parameters • **value**: `string` the code of computed property. • **type**: `T` the component property value type. • **params?**: [`ComputeTypeParams`](../type-aliases/ComputeTypeParams.md)\<`T`\> the parameters of the compute code. #### Returns `void` #### Inherited from [`CalculableEditorProps`](CalculableEditorProps.md).[`setComputeCode`](CalculableEditorProps.md#setcomputecode) *** ### showError()? > `optional` **showError**: (`message`?) => `void` Displays an error message to the user. #### Parameters • **message?**: `string` #### Returns `void` *** ### value > **value**: `any` Annotation editor value. --- # Interface: CalculableEditorProps Represents the props used to edit a calculable property. ## Extended by - [`AnnotationEditorProps`](AnnotationEditorProps.md) ## Properties ### disableCompute() > **disableCompute**: () => `void` Disables the ability to make the property computable. #### Returns `void` *** ### getComputeCode() > **getComputeCode**: \<`T`\>(`type`, `params`?) => `string` Returns the code of the computed property. #### Type Parameters • **T** *extends* [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) the component property value type. #### Parameters • **type**: `T` the component property value type. • **params?**: [`ComputeTypeParams`](../type-aliases/ComputeTypeParams.md)\<`T`\> the parameters of the compute code. #### Returns `string` the code of the computed property. *** ### getComputeType() > **getComputeType**: () => `undefined` \| [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) Returns the type of calculation for the property. #### Returns `undefined` \| [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) *** ### hasComputeCode() > **hasComputeCode**: (`type`) => `boolean` Returns true if the property has a compute code for the specified type, false otherwise. #### Parameters • **type**: [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) the compute type. #### Returns `boolean` true if the property has a compute code for the specified type, false otherwise. *** ### setComputeCode() > **setComputeCode**: \<`T`\>(`value`, `type`, `params`?) => `void` Sets the computed property code. #### Type Parameters • **T** *extends* [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) the component property value type. #### Parameters • **value**: `string` the code of computed property. • **type**: `T` the component property value type. • **params?**: [`ComputeTypeParams`](../type-aliases/ComputeTypeParams.md)\<`T`\> the parameters of the compute code. #### Returns `void` --- # Interface: ColumnDescription The description of the table column. ## Properties ### input? > `optional` **input**: `ComponentType` The React component that displays the value of a column. *** ### inputProps? > `optional` **inputProps**: `any` The properties of the React component that displays the value of the column. *** ### name > **name**: `string` The column name. *** ### title? > `optional` **title**: `string` The column title. --- # Interface: EditableTableProps The React component properties for the [EditableTable](../functions/EditableTable.md) component. ## Extends - `TableProps`\<`any`, `any`\> ## Properties ### about? > `optional` **about**: `string` #### Inherited from `TableProps.about` *** ### accessKey? > `optional` **accessKey**: `string` #### Inherited from `TableProps.accessKey` *** ### affixHeader? > `optional` **affixHeader**: `number` \| `boolean` Affix the table header to the specified position on the page #### Inherited from `TableProps.affixHeader` *** ### affixHorizontalScrollbar? > `optional` **affixHorizontalScrollbar**: `number` \| `boolean` Affix the table horizontal scrollbar to the specified position on the page #### Inherited from `TableProps.affixHorizontalScrollbar` *** ### aria-activedescendant? > `optional` **aria-activedescendant**: `string` Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. #### Inherited from `TableProps.aria-activedescendant` *** ### aria-atomic? > `optional` **aria-atomic**: `Booleanish` Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. #### Inherited from `TableProps.aria-atomic` *** ### aria-autocomplete? > `optional` **aria-autocomplete**: `"none"` \| `"list"` \| `"inline"` \| `"both"` Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. #### Inherited from `TableProps.aria-autocomplete` *** ### aria-braillelabel? > `optional` **aria-braillelabel**: `string` Defines a string value that labels the current element, which is intended to be converted into Braille. #### See aria-label. #### Inherited from `TableProps.aria-braillelabel` *** ### aria-brailleroledescription? > `optional` **aria-brailleroledescription**: `string` Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. #### See aria-roledescription. #### Inherited from `TableProps.aria-brailleroledescription` *** ### aria-busy? > `optional` **aria-busy**: `Booleanish` #### Inherited from `TableProps.aria-busy` *** ### aria-checked? > `optional` **aria-checked**: `boolean` \| `"true"` \| `"false"` \| `"mixed"` Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. #### See - aria-pressed - aria-selected. #### Inherited from `TableProps.aria-checked` *** ### aria-colcount? > `optional` **aria-colcount**: `number` Defines the total number of columns in a table, grid, or treegrid. #### See aria-colindex. #### Inherited from `TableProps.aria-colcount` *** ### aria-colindex? > `optional` **aria-colindex**: `number` Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. #### See - aria-colcount - aria-colspan. #### Inherited from `TableProps.aria-colindex` *** ### aria-colindextext? > `optional` **aria-colindextext**: `string` Defines a human readable text alternative of aria-colindex. #### See aria-rowindextext. #### Inherited from `TableProps.aria-colindextext` *** ### aria-colspan? > `optional` **aria-colspan**: `number` Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. #### See - aria-colindex - aria-rowspan. #### Inherited from `TableProps.aria-colspan` *** ### aria-controls? > `optional` **aria-controls**: `string` Identifies the element (or elements) whose contents or presence are controlled by the current element. #### See aria-owns. #### Inherited from `TableProps.aria-controls` *** ### aria-current? > `optional` **aria-current**: `boolean` \| `"time"` \| `"date"` \| `"true"` \| `"false"` \| `"page"` \| `"step"` \| `"location"` Indicates the element that represents the current item within a container or set of related elements. #### Inherited from `TableProps.aria-current` *** ### aria-describedby? > `optional` **aria-describedby**: `string` Identifies the element (or elements) that describes the object. #### See aria-labelledby #### Inherited from `TableProps.aria-describedby` *** ### aria-description? > `optional` **aria-description**: `string` Defines a string value that describes or annotates the current element. #### See related aria-describedby. #### Inherited from `TableProps.aria-description` *** ### aria-details? > `optional` **aria-details**: `string` Identifies the element that provides a detailed, extended description for the object. #### See aria-describedby. #### Inherited from `TableProps.aria-details` *** ### aria-disabled? > `optional` **aria-disabled**: `Booleanish` Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. #### See - aria-hidden - aria-readonly. #### Inherited from `TableProps.aria-disabled` *** ### ~~aria-dropeffect?~~ > `optional` **aria-dropeffect**: `"link"` \| `"none"` \| `"copy"` \| `"execute"` \| `"move"` \| `"popup"` Indicates what functions can be performed when a dragged object is released on the drop target. #### Deprecated in ARIA 1.1 #### Inherited from `TableProps.aria-dropeffect` *** ### aria-errormessage? > `optional` **aria-errormessage**: `string` Identifies the element that provides an error message for the object. #### See - aria-invalid - aria-describedby. #### Inherited from `TableProps.aria-errormessage` *** ### aria-expanded? > `optional` **aria-expanded**: `Booleanish` Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. #### Inherited from `TableProps.aria-expanded` *** ### aria-flowto? > `optional` **aria-flowto**: `string` Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. #### Inherited from `TableProps.aria-flowto` *** ### ~~aria-grabbed?~~ > `optional` **aria-grabbed**: `Booleanish` Indicates an element's "grabbed" state in a drag-and-drop operation. #### Deprecated in ARIA 1.1 #### Inherited from `TableProps.aria-grabbed` *** ### aria-haspopup? > `optional` **aria-haspopup**: `boolean` \| `"dialog"` \| `"menu"` \| `"true"` \| `"false"` \| `"grid"` \| `"listbox"` \| `"tree"` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. #### Inherited from `TableProps.aria-haspopup` *** ### aria-hidden? > `optional` **aria-hidden**: `Booleanish` Indicates whether the element is exposed to an accessibility API. #### See aria-disabled. #### Inherited from `TableProps.aria-hidden` *** ### aria-invalid? > `optional` **aria-invalid**: `boolean` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"` Indicates the entered value does not conform to the format expected by the application. #### See aria-errormessage. #### Inherited from `TableProps.aria-invalid` *** ### aria-keyshortcuts? > `optional` **aria-keyshortcuts**: `string` Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. #### Inherited from `TableProps.aria-keyshortcuts` *** ### aria-label? > `optional` **aria-label**: `string` Defines a string value that labels the current element. #### See aria-labelledby. #### Inherited from `TableProps.aria-label` *** ### aria-labelledby? > `optional` **aria-labelledby**: `string` Identifies the element (or elements) that labels the current element. #### See aria-describedby. #### Inherited from `TableProps.aria-labelledby` *** ### aria-level? > `optional` **aria-level**: `number` Defines the hierarchical level of an element within a structure. #### Inherited from `TableProps.aria-level` *** ### aria-live? > `optional` **aria-live**: `"off"` \| `"assertive"` \| `"polite"` Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. #### Inherited from `TableProps.aria-live` *** ### aria-modal? > `optional` **aria-modal**: `Booleanish` Indicates whether an element is modal when displayed. #### Inherited from `TableProps.aria-modal` *** ### aria-multiline? > `optional` **aria-multiline**: `Booleanish` Indicates whether a text box accepts multiple lines of input or only a single line. #### Inherited from `TableProps.aria-multiline` *** ### aria-multiselectable? > `optional` **aria-multiselectable**: `Booleanish` Indicates that the user may select more than one item from the current selectable descendants. #### Inherited from `TableProps.aria-multiselectable` *** ### aria-orientation? > `optional` **aria-orientation**: `"horizontal"` \| `"vertical"` Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. #### Inherited from `TableProps.aria-orientation` *** ### aria-owns? > `optional` **aria-owns**: `string` Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. #### See aria-controls. #### Inherited from `TableProps.aria-owns` *** ### aria-placeholder? > `optional` **aria-placeholder**: `string` Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. #### Inherited from `TableProps.aria-placeholder` *** ### aria-posinset? > `optional` **aria-posinset**: `number` Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. #### See aria-setsize. #### Inherited from `TableProps.aria-posinset` *** ### aria-pressed? > `optional` **aria-pressed**: `boolean` \| `"true"` \| `"false"` \| `"mixed"` Indicates the current "pressed" state of toggle buttons. #### See - aria-checked - aria-selected. #### Inherited from `TableProps.aria-pressed` *** ### aria-readonly? > `optional` **aria-readonly**: `Booleanish` Indicates that the element is not editable, but is otherwise operable. #### See aria-disabled. #### Inherited from `TableProps.aria-readonly` *** ### aria-relevant? > `optional` **aria-relevant**: `"text"` \| `"all"` \| `"additions"` \| `"additions removals"` \| `"additions text"` \| `"removals"` \| `"removals additions"` \| `"removals text"` \| `"text additions"` \| `"text removals"` Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. #### See aria-atomic. #### Inherited from `TableProps.aria-relevant` *** ### aria-required? > `optional` **aria-required**: `Booleanish` Indicates that user input is required on the element before a form may be submitted. #### Inherited from `TableProps.aria-required` *** ### aria-roledescription? > `optional` **aria-roledescription**: `string` Defines a human-readable, author-localized description for the role of an element. #### Inherited from `TableProps.aria-roledescription` *** ### aria-rowcount? > `optional` **aria-rowcount**: `number` Defines the total number of rows in a table, grid, or treegrid. #### See aria-rowindex. #### Inherited from `TableProps.aria-rowcount` *** ### aria-rowindex? > `optional` **aria-rowindex**: `number` Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. #### See - aria-rowcount - aria-rowspan. #### Inherited from `TableProps.aria-rowindex` *** ### aria-rowindextext? > `optional` **aria-rowindextext**: `string` Defines a human readable text alternative of aria-rowindex. #### See aria-colindextext. #### Inherited from `TableProps.aria-rowindextext` *** ### aria-rowspan? > `optional` **aria-rowspan**: `number` Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. #### See - aria-rowindex - aria-colspan. #### Inherited from `TableProps.aria-rowspan` *** ### aria-selected? > `optional` **aria-selected**: `Booleanish` Indicates the current "selected" state of various widgets. #### See - aria-checked - aria-pressed. #### Inherited from `TableProps.aria-selected` *** ### aria-setsize? > `optional` **aria-setsize**: `number` Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. #### See aria-posinset. #### Inherited from `TableProps.aria-setsize` *** ### aria-sort? > `optional` **aria-sort**: `"none"` \| `"ascending"` \| `"descending"` \| `"other"` Indicates if items in a table or grid are sorted in ascending or descending order. #### Inherited from `TableProps.aria-sort` *** ### aria-valuemax? > `optional` **aria-valuemax**: `number` Defines the maximum allowed value for a range widget. #### Inherited from `TableProps.aria-valuemax` *** ### aria-valuemin? > `optional` **aria-valuemin**: `number` Defines the minimum allowed value for a range widget. #### Inherited from `TableProps.aria-valuemin` *** ### aria-valuenow? > `optional` **aria-valuenow**: `number` Defines the current value for a range widget. #### See aria-valuetext. #### Inherited from `TableProps.aria-valuenow` *** ### aria-valuetext? > `optional` **aria-valuetext**: `string` Defines the human readable text alternative of aria-valuenow for a range widget. #### Inherited from `TableProps.aria-valuetext` *** ### autoAdd? > `optional` **autoAdd**: `boolean` Flag, if true, one new row will be automatically added when editing the last row of the table, false otherwise. *** ### autoCapitalize? > `optional` **autoCapitalize**: `string` & `object` \| `"off"` \| `"none"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"` #### Inherited from `TableProps.autoCapitalize` *** ### autoCorrect? > `optional` **autoCorrect**: `string` #### Inherited from `TableProps.autoCorrect` *** ### autoFocus? > `optional` **autoFocus**: `boolean` #### Inherited from `TableProps.autoFocus` *** ### autoHeight? > `optional` **autoHeight**: `boolean` The height of the table will be automatically expanded according to the number of data rows, and no vertical scroll bar will appear #### Inherited from `TableProps.autoHeight` *** ### autoSave? > `optional` **autoSave**: `string` #### Inherited from `TableProps.autoSave` *** ### ~~bodyRef()?~~ > `optional` **bodyRef**: (`ref`) => `void` A ref attached to the table body element #### Parameters • **ref**: `HTMLElement` #### Returns `void` #### Deprecated use `ref` instead (see `ref.current.body`) #### Inherited from `TableProps.bodyRef` *** ### bordered? > `optional` **bordered**: `boolean` Show the border of the table #### Inherited from `TableProps.bordered` *** ### cellBordered? > `optional` **cellBordered**: `boolean` Display the borders of table cells #### Inherited from `TableProps.cellBordered` *** ### children? > `optional` **children**: `ReactNode` \| `ReactNode`[] \| (`props`) => ReactNode \| ReactNode\[\] #### Inherited from `TableProps.children` *** ### className? > `optional` **className**: `string` Additional classes #### Inherited from `TableProps.className` *** ### classPrefix? > `optional` **classPrefix**: `string` The prefix of the component CSS class #### Inherited from `TableProps.classPrefix` *** ### color? > `optional` **color**: `string` #### Inherited from `TableProps.color` *** ### columns? > `optional` **columns**: `Element`[] The columns of the table. *** ### content? > `optional` **content**: `string` #### Inherited from `TableProps.content` *** ### contentEditable? > `optional` **contentEditable**: `"inherit"` \| `Booleanish` \| `"plaintext-only"` #### Inherited from `TableProps.contentEditable` *** ### contextMenu? > `optional` **contextMenu**: `string` #### Inherited from `TableProps.contextMenu` *** ### dangerouslySetInnerHTML? > `optional` **dangerouslySetInnerHTML**: `object` #### \_\_html > **\_\_html**: `string` \| `TrustedHTML` #### Inherited from `TableProps.dangerouslySetInnerHTML` *** ### data > **data**: `RowDataType`\<`any`\>[] The table data. #### Overrides `TableProps.data` *** ### datatype? > `optional` **datatype**: `string` #### Inherited from `TableProps.datatype` *** ### defaultChecked? > `optional` **defaultChecked**: `boolean` #### Inherited from `TableProps.defaultChecked` *** ### defaultExpandAllRows? > `optional` **defaultExpandAllRows**: `boolean` Expand all nodes By default #### Inherited from `TableProps.defaultExpandAllRows` *** ### defaultExpandedRowKeys? > `optional` **defaultExpandedRowKeys**: readonly `any`[] Specify the default expanded row by rowkey #### Inherited from `TableProps.defaultExpandedRowKeys` *** ### defaultSortType? > `optional` **defaultSortType**: `SortType` Default sort type #### Inherited from `TableProps.defaultSortType` *** ### defaultValue? > `optional` **defaultValue**: `string` \| `number` \| readonly `string`[] #### Inherited from `TableProps.defaultValue` *** ### dir? > `optional` **dir**: `string` #### Inherited from `TableProps.dir` *** ### disabledScroll? > `optional` **disabledScroll**: `boolean` Disable scroll bar #### Inherited from `TableProps.disabledScroll` *** ### draggable? > `optional` **draggable**: `Booleanish` #### Inherited from `TableProps.draggable` *** ### enterKeyHint? > `optional` **enterKeyHint**: `"search"` \| `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"previous"` \| `"send"` #### Inherited from `TableProps.enterKeyHint` *** ### errorMessage? > `optional` **errorMessage**: `string` The error message. *** ### expandedRowKeys? > `optional` **expandedRowKeys**: readonly `any`[] Specify the default expanded row by rowkey (Controlled) #### Inherited from `TableProps.expandedRowKeys` *** ### fillHeight? > `optional` **fillHeight**: `boolean` Force the height of the table to be equal to the height of its parent container. Cannot be used together with autoHeight. #### Inherited from `TableProps.fillHeight` *** ### headerHeight? > `optional` **headerHeight**: `number` The height of the table header #### Inherited from `TableProps.headerHeight` *** ### height? > `optional` **height**: `number` The visible height of the table (the height of the scrollable container). #### Inherited from `TableProps.height` *** ### hidden? > `optional` **hidden**: `boolean` #### Inherited from `TableProps.hidden` *** ### hideHeader? > `optional` **hideHeader**: `boolean` Flag, if true then the table header will be hidden, false otherwise. *** ### hover? > `optional` **hover**: `boolean` The row of the table has a mouseover effect #### Inherited from `TableProps.hover` *** ### id? > `optional` **id**: `string` #### Inherited from `TableProps.id` *** ### inert? > `optional` **inert**: `boolean` #### See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert #### Inherited from `TableProps.inert` *** ### inlist? > `optional` **inlist**: `any` #### Inherited from `TableProps.inlist` *** ### inputMode? > `optional` **inputMode**: `"search"` \| `"text"` \| `"none"` \| `"tel"` \| `"url"` \| `"email"` \| `"numeric"` \| `"decimal"` Hints at the type of data that might be entered by the user while editing the element or its contents #### See [https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute) #### Inherited from `TableProps.inputMode` *** ### is? > `optional` **is**: `string` Specify that a standard HTML element should behave like a defined custom built-in element #### See [https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is](https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is) #### Inherited from `TableProps.is` *** ### isTree? > `optional` **isTree**: `boolean` The table will be displayed as a tree structure #### Inherited from `TableProps.isTree` *** ### itemID? > `optional` **itemID**: `string` #### Inherited from `TableProps.itemID` *** ### itemProp? > `optional` **itemProp**: `string` #### Inherited from `TableProps.itemProp` *** ### itemRef? > `optional` **itemRef**: `string` #### Inherited from `TableProps.itemRef` *** ### itemScope? > `optional` **itemScope**: `boolean` #### Inherited from `TableProps.itemScope` *** ### itemType? > `optional` **itemType**: `string` #### Inherited from `TableProps.itemType` *** ### label? > `optional` **label**: `string` The table label. *** ### lang? > `optional` **lang**: `string` #### Inherited from `TableProps.lang` *** ### loadAnimation? > `optional` **loadAnimation**: `boolean` Whether to enable loading animation #### Inherited from `TableProps.loadAnimation` *** ### loading? > `optional` **loading**: `boolean` Show loading #### Inherited from `TableProps.loading` *** ### locale? > `optional` **locale**: `TableLocaleType` The component localized character set. #### Inherited from `TableProps.locale` *** ### maxHeight? > `optional` **maxHeight**: `number` The maximum height of the table. Usually used together with `autoHeight`. When the height of the table exceeds `maxHeight`, the table will have a scroll bar. #### Inherited from `TableProps.maxHeight` *** ### maxRows? > `optional` **maxRows**: `number` Maximum number of rows to be displayed. *** ### minHeight? > `optional` **minHeight**: `number` The minimum height of the table. The height is maintained even when the content is not stretched. #### Inherited from `TableProps.minHeight` *** ### nonce? > `optional` **nonce**: `string` #### Inherited from `TableProps.nonce` *** ### onAbort? > `optional` **onAbort**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onAbort` *** ### onAbortCapture? > `optional` **onAbortCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onAbortCapture` *** ### onAdd()? > `optional` **onAdd**: (`index`) => `void` The callback function called when data in the table is added. #### Parameters • **index**: `number` #### Returns `void` *** ### onAnimationEnd? > `optional` **onAnimationEnd**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onAnimationEnd` *** ### onAnimationEndCapture? > `optional` **onAnimationEndCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onAnimationEndCapture` *** ### onAnimationIteration? > `optional` **onAnimationIteration**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onAnimationIteration` *** ### onAnimationIterationCapture? > `optional` **onAnimationIterationCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onAnimationIterationCapture` *** ### onAnimationStart? > `optional` **onAnimationStart**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onAnimationStart` *** ### onAnimationStartCapture? > `optional` **onAnimationStartCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onAnimationStartCapture` *** ### onAuxClick? > `optional` **onAuxClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onAuxClick` *** ### onAuxClickCapture? > `optional` **onAuxClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onAuxClickCapture` *** ### onBeforeInput? > `optional` **onBeforeInput**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onBeforeInput` *** ### onBeforeInputCapture? > `optional` **onBeforeInputCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onBeforeInputCapture` *** ### onBeforeToggle? > `optional` **onBeforeToggle**: `ToggleEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onBeforeToggle` *** ### onBlur? > `optional` **onBlur**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onBlur` *** ### onBlurCapture? > `optional` **onBlurCapture**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onBlurCapture` *** ### onCanPlay? > `optional` **onCanPlay**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCanPlay` *** ### onCanPlayCapture? > `optional` **onCanPlayCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCanPlayCapture` *** ### onCanPlayThrough? > `optional` **onCanPlayThrough**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCanPlayThrough` *** ### onCanPlayThroughCapture? > `optional` **onCanPlayThroughCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCanPlayThroughCapture` *** ### onChange? > `optional` **onChange**: `FormEventHandler`\<`HTMLElement`\> The callback function called when data in the table is changed. #### Overrides `TableProps.onChange` *** ### onChangeCapture? > `optional` **onChangeCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onChangeCapture` *** ### onClick? > `optional` **onClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onClick` *** ### onClickCapture? > `optional` **onClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onClickCapture` *** ### onCompositionEnd? > `optional` **onCompositionEnd**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCompositionEnd` *** ### onCompositionEndCapture? > `optional` **onCompositionEndCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCompositionEndCapture` *** ### onCompositionStart? > `optional` **onCompositionStart**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCompositionStart` *** ### onCompositionStartCapture? > `optional` **onCompositionStartCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCompositionStartCapture` *** ### onCompositionUpdate? > `optional` **onCompositionUpdate**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCompositionUpdate` *** ### onCompositionUpdateCapture? > `optional` **onCompositionUpdateCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCompositionUpdateCapture` *** ### onContextMenu? > `optional` **onContextMenu**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onContextMenu` *** ### onContextMenuCapture? > `optional` **onContextMenuCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onContextMenuCapture` *** ### onCopy? > `optional` **onCopy**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCopy` *** ### onCopyCapture? > `optional` **onCopyCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCopyCapture` *** ### onCut? > `optional` **onCut**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCut` *** ### onCutCapture? > `optional` **onCutCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onCutCapture` *** ### ~~onDataUpdated()?~~ > `optional` **onDataUpdated**: (`nextData`, `scrollTo`) => `void` Callback after table data update. #### Parameters • **nextData**: `any`[] • **scrollTo** #### Returns `void` #### Deprecated use `shouldUpdateScroll` instead #### Inherited from `TableProps.onDataUpdated` *** ### onDoubleClick? > `optional` **onDoubleClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDoubleClick` *** ### onDoubleClickCapture? > `optional` **onDoubleClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDoubleClickCapture` *** ### onDrag? > `optional` **onDrag**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDrag` *** ### onDragCapture? > `optional` **onDragCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragCapture` *** ### onDragEnd? > `optional` **onDragEnd**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragEnd` *** ### onDragEndCapture? > `optional` **onDragEndCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragEndCapture` *** ### onDragEnter? > `optional` **onDragEnter**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragEnter` *** ### onDragEnterCapture? > `optional` **onDragEnterCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragEnterCapture` *** ### onDragExit? > `optional` **onDragExit**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragExit` *** ### onDragExitCapture? > `optional` **onDragExitCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragExitCapture` *** ### onDragLeave? > `optional` **onDragLeave**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragLeave` *** ### onDragLeaveCapture? > `optional` **onDragLeaveCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragLeaveCapture` *** ### onDragOver? > `optional` **onDragOver**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragOver` *** ### onDragOverCapture? > `optional` **onDragOverCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragOverCapture` *** ### onDragStart? > `optional` **onDragStart**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragStart` *** ### onDragStartCapture? > `optional` **onDragStartCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDragStartCapture` *** ### onDrop? > `optional` **onDrop**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDrop` *** ### onDropCapture? > `optional` **onDropCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDropCapture` *** ### onDurationChange? > `optional` **onDurationChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDurationChange` *** ### onDurationChangeCapture? > `optional` **onDurationChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onDurationChangeCapture` *** ### onEmptied? > `optional` **onEmptied**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onEmptied` *** ### onEmptiedCapture? > `optional` **onEmptiedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onEmptiedCapture` *** ### onEncrypted? > `optional` **onEncrypted**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onEncrypted` *** ### onEncryptedCapture? > `optional` **onEncryptedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onEncryptedCapture` *** ### onEnded? > `optional` **onEnded**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onEnded` *** ### onEndedCapture? > `optional` **onEndedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onEndedCapture` *** ### onError? > `optional` **onError**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onError` *** ### onErrorCapture? > `optional` **onErrorCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onErrorCapture` *** ### onExpandChange()? > `optional` **onExpandChange**: (`expanded`, `rowData`) => `void` Tree table, the callback function in the expanded node #### Parameters • **expanded**: `boolean` • **rowData**: `any` #### Returns `void` #### Inherited from `TableProps.onExpandChange` *** ### onFocus? > `optional` **onFocus**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onFocus` *** ### onFocusCapture? > `optional` **onFocusCapture**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onFocusCapture` *** ### onGotPointerCapture? > `optional` **onGotPointerCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onGotPointerCapture` *** ### onGotPointerCaptureCapture? > `optional` **onGotPointerCaptureCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onGotPointerCaptureCapture` *** ### onInput? > `optional` **onInput**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onInput` *** ### onInputCapture? > `optional` **onInputCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onInputCapture` *** ### onInvalid? > `optional` **onInvalid**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onInvalid` *** ### onInvalidCapture? > `optional` **onInvalidCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onInvalidCapture` *** ### onKeyDown? > `optional` **onKeyDown**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onKeyDown` *** ### onKeyDownCapture? > `optional` **onKeyDownCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onKeyDownCapture` *** ### ~~onKeyPress?~~ > `optional` **onKeyPress**: `KeyboardEventHandler`\<`HTMLElement`\> #### Deprecated Use `onKeyUp` or `onKeyDown` instead #### Inherited from `TableProps.onKeyPress` *** ### ~~onKeyPressCapture?~~ > `optional` **onKeyPressCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead #### Inherited from `TableProps.onKeyPressCapture` *** ### onKeyUp? > `optional` **onKeyUp**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onKeyUp` *** ### onKeyUpCapture? > `optional` **onKeyUpCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onKeyUpCapture` *** ### onLoad? > `optional` **onLoad**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onLoad` *** ### onLoadCapture? > `optional` **onLoadCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onLoadCapture` *** ### onLoadStart? > `optional` **onLoadStart**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onLoadStart` *** ### onLoadStartCapture? > `optional` **onLoadStartCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onLoadStartCapture` *** ### onLoadedData? > `optional` **onLoadedData**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onLoadedData` *** ### onLoadedDataCapture? > `optional` **onLoadedDataCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onLoadedDataCapture` *** ### onLoadedMetadata? > `optional` **onLoadedMetadata**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onLoadedMetadata` *** ### onLoadedMetadataCapture? > `optional` **onLoadedMetadataCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onLoadedMetadataCapture` *** ### onLostPointerCapture? > `optional` **onLostPointerCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onLostPointerCapture` *** ### onLostPointerCaptureCapture? > `optional` **onLostPointerCaptureCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onLostPointerCaptureCapture` *** ### onMouseDown? > `optional` **onMouseDown**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseDown` *** ### onMouseDownCapture? > `optional` **onMouseDownCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseDownCapture` *** ### onMouseEnter? > `optional` **onMouseEnter**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseEnter` *** ### onMouseLeave? > `optional` **onMouseLeave**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseLeave` *** ### onMouseMove? > `optional` **onMouseMove**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseMove` *** ### onMouseMoveCapture? > `optional` **onMouseMoveCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseMoveCapture` *** ### onMouseOut? > `optional` **onMouseOut**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseOut` *** ### onMouseOutCapture? > `optional` **onMouseOutCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseOutCapture` *** ### onMouseOver? > `optional` **onMouseOver**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseOver` *** ### onMouseOverCapture? > `optional` **onMouseOverCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseOverCapture` *** ### onMouseUp? > `optional` **onMouseUp**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseUp` *** ### onMouseUpCapture? > `optional` **onMouseUpCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onMouseUpCapture` *** ### onPaste? > `optional` **onPaste**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPaste` *** ### onPasteCapture? > `optional` **onPasteCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPasteCapture` *** ### onPause? > `optional` **onPause**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPause` *** ### onPauseCapture? > `optional` **onPauseCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPauseCapture` *** ### onPlay? > `optional` **onPlay**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPlay` *** ### onPlayCapture? > `optional` **onPlayCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPlayCapture` *** ### onPlaying? > `optional` **onPlaying**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPlaying` *** ### onPlayingCapture? > `optional` **onPlayingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPlayingCapture` *** ### onPointerCancel? > `optional` **onPointerCancel**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerCancel` *** ### onPointerCancelCapture? > `optional` **onPointerCancelCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerCancelCapture` *** ### onPointerDown? > `optional` **onPointerDown**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerDown` *** ### onPointerDownCapture? > `optional` **onPointerDownCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerDownCapture` *** ### onPointerEnter? > `optional` **onPointerEnter**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerEnter` *** ### onPointerLeave? > `optional` **onPointerLeave**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerLeave` *** ### onPointerMove? > `optional` **onPointerMove**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerMove` *** ### onPointerMoveCapture? > `optional` **onPointerMoveCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerMoveCapture` *** ### onPointerOut? > `optional` **onPointerOut**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerOut` *** ### onPointerOutCapture? > `optional` **onPointerOutCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerOutCapture` *** ### onPointerOver? > `optional` **onPointerOver**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerOver` *** ### onPointerOverCapture? > `optional` **onPointerOverCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerOverCapture` *** ### onPointerUp? > `optional` **onPointerUp**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerUp` *** ### onPointerUpCapture? > `optional` **onPointerUpCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onPointerUpCapture` *** ### onProgress? > `optional` **onProgress**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onProgress` *** ### onProgressCapture? > `optional` **onProgressCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onProgressCapture` *** ### onRateChange? > `optional` **onRateChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onRateChange` *** ### onRateChangeCapture? > `optional` **onRateChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onRateChangeCapture` *** ### onRemove()? > `optional` **onRemove**: (`index`) => `void` The callback function called when data in the table is removed. #### Parameters • **index**: `number` #### Returns `void` *** ### onReset? > `optional` **onReset**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onReset` *** ### onResetCapture? > `optional` **onResetCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onResetCapture` *** ### onResize? > `optional` **onResize**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onResize` *** ### onResizeCapture? > `optional` **onResizeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onResizeCapture` *** ### onRowClick()? > `optional` **onRowClick**: (`rowData`, `event`) => `void` Click the callback function after the row and return to rowDate #### Parameters • **rowData**: `any` • **event**: `MouseEvent`\<`Element`, `MouseEvent`\> #### Returns `void` #### Inherited from `TableProps.onRowClick` *** ### onRowContextMenu()? > `optional` **onRowContextMenu**: (`rowData`, `event`) => `void` Callback after right-click row #### Parameters • **rowData**: `any` • **event**: `MouseEvent`\<`Element`, `MouseEvent`\> #### Returns `void` #### Inherited from `TableProps.onRowContextMenu` *** ### onScroll()? > `optional` **onScroll**: (`scrollX`, `scrollY`) => `void` Callback function for scroll bar scrolling #### Parameters • **scrollX**: `number` • **scrollY**: `number` #### Returns `void` #### Inherited from `TableProps.onScroll` *** ### onScrollCapture? > `optional` **onScrollCapture**: `UIEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onScrollCapture` *** ### onSeeked? > `optional` **onSeeked**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onSeeked` *** ### onSeekedCapture? > `optional` **onSeekedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onSeekedCapture` *** ### onSeeking? > `optional` **onSeeking**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onSeeking` *** ### onSeekingCapture? > `optional` **onSeekingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onSeekingCapture` *** ### onSelect? > `optional` **onSelect**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onSelect` *** ### onSelectCapture? > `optional` **onSelectCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onSelectCapture` *** ### onSortColumn()? > `optional` **onSortColumn**: (`dataKey`, `sortType`?) => `void` Click the callback function of the sort sequence to return the value sortColumn, sortType #### Parameters • **dataKey**: `string` • **sortType?**: `SortType` #### Returns `void` #### Inherited from `TableProps.onSortColumn` *** ### onStalled? > `optional` **onStalled**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onStalled` *** ### onStalledCapture? > `optional` **onStalledCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onStalledCapture` *** ### onSubmit? > `optional` **onSubmit**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onSubmit` *** ### onSubmitCapture? > `optional` **onSubmitCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onSubmitCapture` *** ### onSuspend? > `optional` **onSuspend**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onSuspend` *** ### onSuspendCapture? > `optional` **onSuspendCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onSuspendCapture` *** ### onTimeUpdate? > `optional` **onTimeUpdate**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTimeUpdate` *** ### onTimeUpdateCapture? > `optional` **onTimeUpdateCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTimeUpdateCapture` *** ### onToggle? > `optional` **onToggle**: `ToggleEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onToggle` *** ### onTouchCancel? > `optional` **onTouchCancel**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTouchCancel` *** ### onTouchCancelCapture? > `optional` **onTouchCancelCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTouchCancelCapture` *** ### onTouchEnd()? > `optional` **onTouchEnd**: (`event`) => `void` Callback for the `touchend` event. #### Parameters • **event**: `TouchEvent`\<`Element`\> #### Returns `void` #### Inherited from `TableProps.onTouchEnd` *** ### onTouchEndCapture? > `optional` **onTouchEndCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTouchEndCapture` *** ### onTouchMove()? > `optional` **onTouchMove**: (`event`) => `void` Callback for the `touchmove` event. #### Parameters • **event**: `TouchEvent`\<`Element`\> #### Returns `void` #### Inherited from `TableProps.onTouchMove` *** ### onTouchMoveCapture? > `optional` **onTouchMoveCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTouchMoveCapture` *** ### onTouchStart()? > `optional` **onTouchStart**: (`event`) => `void` Callback for the `touchstart` event. #### Parameters • **event**: `TouchEvent`\<`Element`\> #### Returns `void` #### Inherited from `TableProps.onTouchStart` *** ### onTouchStartCapture? > `optional` **onTouchStartCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTouchStartCapture` *** ### onTransitionCancel? > `optional` **onTransitionCancel**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTransitionCancel` *** ### onTransitionCancelCapture? > `optional` **onTransitionCancelCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTransitionCancelCapture` *** ### onTransitionEnd? > `optional` **onTransitionEnd**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTransitionEnd` *** ### onTransitionEndCapture? > `optional` **onTransitionEndCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTransitionEndCapture` *** ### onTransitionRun? > `optional` **onTransitionRun**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTransitionRun` *** ### onTransitionRunCapture? > `optional` **onTransitionRunCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTransitionRunCapture` *** ### onTransitionStart? > `optional` **onTransitionStart**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTransitionStart` *** ### onTransitionStartCapture? > `optional` **onTransitionStartCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onTransitionStartCapture` *** ### onVolumeChange? > `optional` **onVolumeChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onVolumeChange` *** ### onVolumeChangeCapture? > `optional` **onVolumeChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onVolumeChangeCapture` *** ### onWaiting? > `optional` **onWaiting**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onWaiting` *** ### onWaitingCapture? > `optional` **onWaitingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onWaitingCapture` *** ### onWheel? > `optional` **onWheel**: `WheelEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onWheel` *** ### onWheelCapture? > `optional` **onWheelCapture**: `WheelEventHandler`\<`HTMLElement`\> #### Inherited from `TableProps.onWheelCapture` *** ### popover? > `optional` **popover**: `""` \| `"auto"` \| `"manual"` #### Inherited from `TableProps.popover` *** ### popoverTarget? > `optional` **popoverTarget**: `string` #### Inherited from `TableProps.popoverTarget` *** ### popoverTargetAction? > `optional` **popoverTargetAction**: `"toggle"` \| `"show"` \| `"hide"` #### Inherited from `TableProps.popoverTargetAction` *** ### prefix? > `optional` **prefix**: `string` #### Inherited from `TableProps.prefix` *** ### property? > `optional` **property**: `string` #### Inherited from `TableProps.property` *** ### radioGroup? > `optional` **radioGroup**: `string` #### Inherited from `TableProps.radioGroup` *** ### rel? > `optional` **rel**: `string` #### Inherited from `TableProps.rel` *** ### renderEmpty()? > `optional` **renderEmpty**: (`info`) => `ReactNode` Customized data is empty display content #### Parameters • **info**: `ReactNode` #### Returns `ReactNode` #### Inherited from `TableProps.renderEmpty` *** ### renderLoading()? > `optional` **renderLoading**: (`loading`) => `ReactNode` Customize the display content in the data load #### Parameters • **loading**: `ReactNode` #### Returns `ReactNode` #### Inherited from `TableProps.renderLoading` *** ### renderRow()? > `optional` **renderRow**: (`children`?, `rowData`?) => `ReactNode` Custom row element #### Parameters • **children?**: `ReactNode` • **rowData?**: `any` #### Returns `ReactNode` #### Inherited from `TableProps.renderRow` *** ### renderRowExpanded()? > `optional` **renderRowExpanded**: (`rowData`?) => `ReactNode` Customize what you can do to expand a zone #### Parameters • **rowData?**: `any` #### Returns `ReactNode` #### Inherited from `TableProps.renderRowExpanded` *** ### renderTreeToggle()? > `optional` **renderTreeToggle**: (`expandButton`, `rowData`?, `expanded`?) => `ReactNode` Tree table, the callback function in the expanded node #### Parameters • **expandButton**: `ReactNode` • **rowData?**: `any` • **expanded?**: `boolean` #### Returns `ReactNode` #### Inherited from `TableProps.renderTreeToggle` *** ### resource? > `optional` **resource**: `string` #### Inherited from `TableProps.resource` *** ### results? > `optional` **results**: `number` #### Inherited from `TableProps.results` *** ### rev? > `optional` **rev**: `string` #### Inherited from `TableProps.rev` *** ### role? > `optional` **role**: `AriaRole` #### Inherited from `TableProps.role` *** ### rowClassName? > `optional` **rowClassName**: `string` \| (`rowData`, `rowIndex`) => `string` Add an optional extra class name to row #### Inherited from `TableProps.rowClassName` *** ### rowExpandedHeight? > `optional` **rowExpandedHeight**: `number` \| (`rowData`?) => `number` Set the height of an expandable area #### Inherited from `TableProps.rowExpandedHeight` *** ### rowHeight? > `optional` **rowHeight**: `number` \| (`rowData`?) => `number` The row height of the table #### Inherited from `TableProps.rowHeight` *** ### rowKey? > `optional` **rowKey**: `RowKeyType` Each row corresponds to the unique key in data #### Inherited from `TableProps.rowKey` *** ### rtl? > `optional` **rtl**: `boolean` Right to left #### Inherited from `TableProps.rtl` *** ### security? > `optional` **security**: `string` #### Inherited from `TableProps.security` *** ### shouldUpdateScroll? > `optional` **shouldUpdateScroll**: `boolean` \| (`event`) => `object` Use the return value of `shouldUpdateScroll` to determine whether to update the scroll after the table size is updated. #### Inherited from `TableProps.shouldUpdateScroll` *** ### showHeader? > `optional` **showHeader**: `boolean` Whether to display the header of the table #### Inherited from `TableProps.showHeader` *** ### slot? > `optional` **slot**: `string` #### Inherited from `TableProps.slot` *** ### sortColumn? > `optional` **sortColumn**: `string` Sort Column Name #### Inherited from `TableProps.sortColumn` *** ### sortType? > `optional` **sortType**: `SortType` Sort type #### Inherited from `TableProps.sortType` *** ### spellCheck? > `optional` **spellCheck**: `Booleanish` #### Inherited from `TableProps.spellCheck` *** ### style? > `optional` **style**: `CSSProperties` Additional style #### Inherited from `TableProps.style` *** ### suppressContentEditableWarning? > `optional` **suppressContentEditableWarning**: `boolean` #### Inherited from `TableProps.suppressContentEditableWarning` *** ### suppressHydrationWarning? > `optional` **suppressHydrationWarning**: `boolean` #### Inherited from `TableProps.suppressHydrationWarning` *** ### tabIndex? > `optional` **tabIndex**: `number` #### Inherited from `TableProps.tabIndex` *** ### title? > `optional` **title**: `string` #### Inherited from `TableProps.title` *** ### translate? > `optional` **translate**: `"yes"` \| `"no"` #### Inherited from `TableProps.translate` *** ### translate3d? > `optional` **translate3d**: `boolean` Enable 3D transition rendering to improve performance when scrolling. #### Inherited from `TableProps.translate3d` *** ### typeof? > `optional` **typeof**: `string` #### Inherited from `TableProps.typeof` *** ### unselectable? > `optional` **unselectable**: `"off"` \| `"on"` #### Inherited from `TableProps.unselectable` *** ### virtualized? > `optional` **virtualized**: `boolean` Effectively render large tabular data #### Inherited from `TableProps.virtualized` *** ### vocab? > `optional` **vocab**: `string` #### Inherited from `TableProps.vocab` *** ### width? > `optional` **width**: `number` The width of the table. When it is not set, it will adapt according to the container #### Inherited from `TableProps.width` *** ### wordWrap? > `optional` **wordWrap**: `boolean` \| `"break-all"` \| `"break-word"` \| `"keep-all"` Whether to appear line breaks where text overflows its content box https://developer.mozilla.org/en-US/docs/Web/CSS/word-break #### Inherited from `TableProps.wordWrap` --- # Interface: EditableTableState The state of the [EditableTable](../functions/EditableTable.md) component. ## Properties ### autoHeight? > `optional` **autoHeight**: `boolean` Flag, if true, the table height will be calculated automatically, false otherwise. *** ### maxHeight? > `optional` **maxHeight**: `number` The maximum height of the table. --- # Interface: FormBuilderProps Properties of the React Form builder component. ## Extends - `Omit`\<[`FormViewerProps`](../../core/interfaces/FormViewerProps.md), `"view"`\> ## Properties ### actions? > `optional` **actions**: [`CustomActions`](../../core/type-aliases/CustomActions.md) Custom actions for the form viewer. #### Inherited from `Omit.actions` *** ### builderRef? > `optional` **builderRef**: `ForwardedRef`\<[`IFormBuilder`](IFormBuilder.md)\> The reference to [IFormBuilder](IFormBuilder.md). *** ### componentWrapper? > `optional` **componentWrapper**: `ComponentType`\<`any`\> The React component that wraps every component in a form. **Internal use only.** #### Inherited from `Omit.componentWrapper` *** ### customization? > `optional` **customization**: `Partial`\<`Record`\<`string`, [`Options`](../type-aliases/Options.md)\>\> The map of customizations for the FormBuilder components. *** ### disabled? > `optional` **disabled**: `boolean` If true, the form is disabled. #### Inherited from `Omit.disabled` *** ### erroneous? > `optional` **erroneous**: `boolean` If true, the component will not be wrapped by the error display component. **Attention! Don't use it! Unstable API.** #### Inherited from `Omit.erroneous` *** ### errorWrapper? > `optional` **errorWrapper**: `ComponentType`\<[`ErrorWrapperProps`](../../core/interfaces/ErrorWrapperProps.md)\> The default error wrapper used when errorType is not specified in the form. #### Inherited from `Omit.errorWrapper` *** ### errors? > `optional` **errors**: `Record`\<`string`, `unknown`\> The form validation errors. #### Inherited from `Omit.errors` *** ### formName? > `optional` **formName**: `string` The form name. #### Inherited from `Omit.formName` *** ### formStorage? > `optional` **formStorage**: [`IFormStorage`](IFormStorage.md) The external form storage. *** ### formValidators? > `optional` **formValidators**: [`FormValidators`](../../core/type-aliases/FormValidators.md) The set of functions that validate the form data. #### Inherited from `Omit.formValidators` *** ### getForm()? > `optional` **getForm**: (`name`?) => `string` \| `Promise`\<`string`\> Loads the form. #### Parameters • **name?**: `string` the form name. #### Returns `string` \| `Promise`\<`string`\> the string or Promise with the form. #### Inherited from `Omit.getForm` *** ### i18n? > `optional` **i18n**: [`FormBuilderI18n`](../type-aliases/FormBuilderI18n.md) The i18n data of the form builder. *** ### initialData? > `optional` **initialData**: `Record`\<`string`, `unknown`\> The initial data of the form. #### Inherited from `Omit.initialData` *** ### language? > `optional` **language**: \`$\{string\}-$\{string\}\` The language of the form, e.g. 'en-US'. #### Inherited from `Omit.language` *** ### licenseKey? > `optional` **licenseKey**: `string` The FormEngine license key. *** ### localize? > `optional` **localize**: [`ComponentLocalizer`](../../core/type-aliases/ComponentLocalizer.md) The function to localize the properties of a component. #### Inherited from `Omit.localize` *** ### onFormDataChange()? > `optional` **onFormDataChange**: (`data`) => `void` The event is called whenever a form data changes. #### Parameters • **data**: [`IFormData`](../../core/interfaces/IFormData.md) the [IFormData](../../core/interfaces/IFormData.md) with all the form data. #### Returns `void` #### Inherited from `Omit.onFormDataChange` *** ### onFormSchemaChange()? > `optional` **onFormSchemaChange**: (`formSchema`) => `void` The event is called whenever a form schema changes. #### Parameters • **formSchema**: `string` the current form schema serialized to JSON. #### Returns `void` *** ### presetComponentOptions? > `optional` **presetComponentOptions**: [`IPresetComponentOptions`](IPresetComponentOptions.md) The preset component options. *** ### propertyEditors? > `optional` **propertyEditors**: `Record`\<`string`, `ComponentType`\<[`AnnotationEditorProps`](AnnotationEditorProps.md)\>\> Custom component property editors. **Attention! Unstable API.** *** ### readOnly? > `optional` **readOnly**: `boolean` If true, the form is read-only. #### Inherited from `Omit.readOnly` *** ### showAllValidationErrors? > `optional` **showAllValidationErrors**: `boolean` If true, all validation errors will be displayed. #### Inherited from `Omit.showAllValidationErrors` *** ### theme? > `optional` **theme**: [`FormBuilderTheme`](../type-aliases/FormBuilderTheme.md) Indicates the theme preference. *** ### validators? > `optional` **validators**: `Partial`\<`Record`\\> The set of metadata of validation rules, grouped by the type of value being validated. #### Inherited from `Omit.validators` *** ### view > **view**: [`BuilderView`](../classes/BuilderView.md) All the metadata of the components of the form builder. *** ### viewMode? > `optional` **viewMode**: [`ViewMode`](../../core/type-aliases/ViewMode.md) Display resolution type. #### Inherited from `Omit.viewMode` *** ### viewerRef? > `optional` **viewerRef**: `ForwardedRef`\<[`IFormViewer`](../../core/interfaces/IFormViewer.md)\> The reference to [IFormViewer](../../core/interfaces/IFormViewer.md). #### Inherited from `Omit.viewerRef` --- # Interface: IFormBuilder The form builder settings interface. ## Properties ### parseForm() > **parseForm**: (`text`) => `void` Sets the form serialized in JSON as the current form. #### Parameters • **text**: `string` the form serialized in JSON. #### Returns `void` ## Accessors ### builderMode #### Get Signature > **get** **builderMode**(): [`BuilderMode`](../../core/type-aliases/BuilderMode.md) ##### Returns [`BuilderMode`](../../core/type-aliases/BuilderMode.md) the current form builder mode. Builder or viewer. #### Set Signature > **set** **builderMode**(`mode`): `void` Sets the form builder mode. Builder or viewer. ##### Parameters • **mode**: [`BuilderMode`](../../core/type-aliases/BuilderMode.md) ##### Returns `void` *** ### formAsString #### Get Signature > **get** **formAsString**(): `string` ##### Returns `string` the current form serialized to JSON. --- # Interface: IFormStorage Interface for storing forms in an external storage. ## Properties ### getForm() > **getForm**: (`formName`) => `Promise`\<`string`\> Returns the form serialized in JSON by the form name. #### Parameters • **formName**: `string` the form name. #### Returns `Promise`\<`string`\> the Promise with the form serialized in JSON. *** ### getFormNames() > **getFormNames**: () => `Promise`\<`string`[]\> #### Returns `Promise`\<`string`[]\> the Promise with an array of form names. *** ### removeForm() > **removeForm**: (`formName`) => `Promise`\<`any`\> Removes the form by form name. #### Parameters • **formName**: `string` the form name. #### Returns `Promise`\<`any`\> the Promise with the result of removal. *** ### saveForm() > **saveForm**: (`formName`, `formValue`) => `Promise`\<`any`\> Saves the form serialized in JSON. #### Parameters • **formName**: `string` the form name. • **formValue**: `string` the form serialized in JSON. #### Returns `Promise`\<`any`\> the Promise with the result of saving the form. --- # Interface: IPresetComponentOptions Interface for configuring preset component options. ## Properties ### components? > `optional` **components**: [`PresetComponent`](PresetComponent.md)[] The default preset components. *** ### disable? > `optional` **disable**: `boolean` The flag to disable the preset component feature. *** ### disableCreation? > `optional` **disableCreation**: `boolean` The flag to disable the creation of preset components. *** ### disableRemoving? > `optional` **disableRemoving**: `boolean` The flag to disable the removing of preset components. *** ### onCreate()? > `optional` **onCreate**: (`preset`) => `void` The callback function called when a new preset component is created. #### Parameters • **preset**: [`PresetComponent`](PresetComponent.md) #### Returns `void` *** ### onRemove()? > `optional` **onRemove**: (`name`) => `void` The callback function called when a preset component is removed. #### Parameters • **name**: `string` #### Returns `void` --- # Interface: InputCellProps The properties of InputCell component. ## Extends - `InnerCellProps`\<`RowDataType`, `string` \| `number`\> ## Extended by - [`SelectCellProps`](SelectCellProps.md) ## Properties ### about? > `optional` **about**: `string` #### Inherited from `InnerCellProps.about` *** ### accessKey? > `optional` **accessKey**: `string` #### Inherited from `InnerCellProps.accessKey` *** ### align? > `optional` **align**: `JustifyContent` #### Inherited from `InnerCellProps.align` *** ### aria-activedescendant? > `optional` **aria-activedescendant**: `string` Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. #### Inherited from `InnerCellProps.aria-activedescendant` *** ### aria-atomic? > `optional` **aria-atomic**: `Booleanish` Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. #### Inherited from `InnerCellProps.aria-atomic` *** ### aria-autocomplete? > `optional` **aria-autocomplete**: `"none"` \| `"list"` \| `"inline"` \| `"both"` Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. #### Inherited from `InnerCellProps.aria-autocomplete` *** ### aria-braillelabel? > `optional` **aria-braillelabel**: `string` Defines a string value that labels the current element, which is intended to be converted into Braille. #### See aria-label. #### Inherited from `InnerCellProps.aria-braillelabel` *** ### aria-brailleroledescription? > `optional` **aria-brailleroledescription**: `string` Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. #### See aria-roledescription. #### Inherited from `InnerCellProps.aria-brailleroledescription` *** ### aria-busy? > `optional` **aria-busy**: `Booleanish` #### Inherited from `InnerCellProps.aria-busy` *** ### aria-checked? > `optional` **aria-checked**: `boolean` \| `"true"` \| `"false"` \| `"mixed"` Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. #### See - aria-pressed - aria-selected. #### Inherited from `InnerCellProps.aria-checked` *** ### aria-colcount? > `optional` **aria-colcount**: `number` Defines the total number of columns in a table, grid, or treegrid. #### See aria-colindex. #### Inherited from `InnerCellProps.aria-colcount` *** ### aria-colindex? > `optional` **aria-colindex**: `number` Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. #### See - aria-colcount - aria-colspan. #### Inherited from `InnerCellProps.aria-colindex` *** ### aria-colindextext? > `optional` **aria-colindextext**: `string` Defines a human readable text alternative of aria-colindex. #### See aria-rowindextext. #### Inherited from `InnerCellProps.aria-colindextext` *** ### aria-colspan? > `optional` **aria-colspan**: `number` Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. #### See - aria-colindex - aria-rowspan. #### Inherited from `InnerCellProps.aria-colspan` *** ### aria-controls? > `optional` **aria-controls**: `string` Identifies the element (or elements) whose contents or presence are controlled by the current element. #### See aria-owns. #### Inherited from `InnerCellProps.aria-controls` *** ### aria-current? > `optional` **aria-current**: `boolean` \| `"time"` \| `"date"` \| `"true"` \| `"false"` \| `"page"` \| `"step"` \| `"location"` Indicates the element that represents the current item within a container or set of related elements. #### Inherited from `InnerCellProps.aria-current` *** ### aria-describedby? > `optional` **aria-describedby**: `string` Identifies the element (or elements) that describes the object. #### See aria-labelledby #### Inherited from `InnerCellProps.aria-describedby` *** ### aria-description? > `optional` **aria-description**: `string` Defines a string value that describes or annotates the current element. #### See related aria-describedby. #### Inherited from `InnerCellProps.aria-description` *** ### aria-details? > `optional` **aria-details**: `string` Identifies the element that provides a detailed, extended description for the object. #### See aria-describedby. #### Inherited from `InnerCellProps.aria-details` *** ### aria-disabled? > `optional` **aria-disabled**: `Booleanish` Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. #### See - aria-hidden - aria-readonly. #### Inherited from `InnerCellProps.aria-disabled` *** ### ~~aria-dropeffect?~~ > `optional` **aria-dropeffect**: `"link"` \| `"none"` \| `"copy"` \| `"execute"` \| `"move"` \| `"popup"` Indicates what functions can be performed when a dragged object is released on the drop target. #### Deprecated in ARIA 1.1 #### Inherited from `InnerCellProps.aria-dropeffect` *** ### aria-errormessage? > `optional` **aria-errormessage**: `string` Identifies the element that provides an error message for the object. #### See - aria-invalid - aria-describedby. #### Inherited from `InnerCellProps.aria-errormessage` *** ### aria-expanded? > `optional` **aria-expanded**: `Booleanish` Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. #### Inherited from `InnerCellProps.aria-expanded` *** ### aria-flowto? > `optional` **aria-flowto**: `string` Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. #### Inherited from `InnerCellProps.aria-flowto` *** ### ~~aria-grabbed?~~ > `optional` **aria-grabbed**: `Booleanish` Indicates an element's "grabbed" state in a drag-and-drop operation. #### Deprecated in ARIA 1.1 #### Inherited from `InnerCellProps.aria-grabbed` *** ### aria-haspopup? > `optional` **aria-haspopup**: `boolean` \| `"dialog"` \| `"menu"` \| `"true"` \| `"false"` \| `"grid"` \| `"listbox"` \| `"tree"` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. #### Inherited from `InnerCellProps.aria-haspopup` *** ### aria-hidden? > `optional` **aria-hidden**: `Booleanish` Indicates whether the element is exposed to an accessibility API. #### See aria-disabled. #### Inherited from `InnerCellProps.aria-hidden` *** ### aria-invalid? > `optional` **aria-invalid**: `boolean` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"` Indicates the entered value does not conform to the format expected by the application. #### See aria-errormessage. #### Inherited from `InnerCellProps.aria-invalid` *** ### aria-keyshortcuts? > `optional` **aria-keyshortcuts**: `string` Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. #### Inherited from `InnerCellProps.aria-keyshortcuts` *** ### aria-label? > `optional` **aria-label**: `string` Defines a string value that labels the current element. #### See aria-labelledby. #### Inherited from `InnerCellProps.aria-label` *** ### aria-labelledby? > `optional` **aria-labelledby**: `string` Identifies the element (or elements) that labels the current element. #### See aria-describedby. #### Inherited from `InnerCellProps.aria-labelledby` *** ### aria-level? > `optional` **aria-level**: `number` Defines the hierarchical level of an element within a structure. #### Inherited from `InnerCellProps.aria-level` *** ### aria-live? > `optional` **aria-live**: `"off"` \| `"assertive"` \| `"polite"` Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. #### Inherited from `InnerCellProps.aria-live` *** ### aria-modal? > `optional` **aria-modal**: `Booleanish` Indicates whether an element is modal when displayed. #### Inherited from `InnerCellProps.aria-modal` *** ### aria-multiline? > `optional` **aria-multiline**: `Booleanish` Indicates whether a text box accepts multiple lines of input or only a single line. #### Inherited from `InnerCellProps.aria-multiline` *** ### aria-multiselectable? > `optional` **aria-multiselectable**: `Booleanish` Indicates that the user may select more than one item from the current selectable descendants. #### Inherited from `InnerCellProps.aria-multiselectable` *** ### aria-orientation? > `optional` **aria-orientation**: `"horizontal"` \| `"vertical"` Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. #### Inherited from `InnerCellProps.aria-orientation` *** ### aria-owns? > `optional` **aria-owns**: `string` Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. #### See aria-controls. #### Inherited from `InnerCellProps.aria-owns` *** ### aria-placeholder? > `optional` **aria-placeholder**: `string` Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. #### Inherited from `InnerCellProps.aria-placeholder` *** ### aria-posinset? > `optional` **aria-posinset**: `number` Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. #### See aria-setsize. #### Inherited from `InnerCellProps.aria-posinset` *** ### aria-pressed? > `optional` **aria-pressed**: `boolean` \| `"true"` \| `"false"` \| `"mixed"` Indicates the current "pressed" state of toggle buttons. #### See - aria-checked - aria-selected. #### Inherited from `InnerCellProps.aria-pressed` *** ### aria-readonly? > `optional` **aria-readonly**: `Booleanish` Indicates that the element is not editable, but is otherwise operable. #### See aria-disabled. #### Inherited from `InnerCellProps.aria-readonly` *** ### aria-relevant? > `optional` **aria-relevant**: `"text"` \| `"all"` \| `"additions"` \| `"additions removals"` \| `"additions text"` \| `"removals"` \| `"removals additions"` \| `"removals text"` \| `"text additions"` \| `"text removals"` Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. #### See aria-atomic. #### Inherited from `InnerCellProps.aria-relevant` *** ### aria-required? > `optional` **aria-required**: `Booleanish` Indicates that user input is required on the element before a form may be submitted. #### Inherited from `InnerCellProps.aria-required` *** ### aria-roledescription? > `optional` **aria-roledescription**: `string` Defines a human-readable, author-localized description for the role of an element. #### Inherited from `InnerCellProps.aria-roledescription` *** ### aria-rowcount? > `optional` **aria-rowcount**: `number` Defines the total number of rows in a table, grid, or treegrid. #### See aria-rowindex. #### Inherited from `InnerCellProps.aria-rowcount` *** ### aria-rowindex? > `optional` **aria-rowindex**: `number` Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. #### See - aria-rowcount - aria-rowspan. #### Inherited from `InnerCellProps.aria-rowindex` *** ### aria-rowindextext? > `optional` **aria-rowindextext**: `string` Defines a human readable text alternative of aria-rowindex. #### See aria-colindextext. #### Inherited from `InnerCellProps.aria-rowindextext` *** ### aria-rowspan? > `optional` **aria-rowspan**: `number` Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. #### See - aria-rowindex - aria-colspan. #### Inherited from `InnerCellProps.aria-rowspan` *** ### aria-selected? > `optional` **aria-selected**: `Booleanish` Indicates the current "selected" state of various widgets. #### See - aria-checked - aria-pressed. #### Inherited from `InnerCellProps.aria-selected` *** ### aria-setsize? > `optional` **aria-setsize**: `number` Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. #### See aria-posinset. #### Inherited from `InnerCellProps.aria-setsize` *** ### aria-sort? > `optional` **aria-sort**: `"none"` \| `"ascending"` \| `"descending"` \| `"other"` Indicates if items in a table or grid are sorted in ascending or descending order. #### Inherited from `InnerCellProps.aria-sort` *** ### aria-valuemax? > `optional` **aria-valuemax**: `number` Defines the maximum allowed value for a range widget. #### Inherited from `InnerCellProps.aria-valuemax` *** ### aria-valuemin? > `optional` **aria-valuemin**: `number` Defines the minimum allowed value for a range widget. #### Inherited from `InnerCellProps.aria-valuemin` *** ### aria-valuenow? > `optional` **aria-valuenow**: `number` Defines the current value for a range widget. #### See aria-valuetext. #### Inherited from `InnerCellProps.aria-valuenow` *** ### aria-valuetext? > `optional` **aria-valuetext**: `string` Defines the human readable text alternative of aria-valuenow for a range widget. #### Inherited from `InnerCellProps.aria-valuetext` *** ### autoCapitalize? > `optional` **autoCapitalize**: `string` & `object` \| `"off"` \| `"none"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"` #### Inherited from `InnerCellProps.autoCapitalize` *** ### autoCorrect? > `optional` **autoCorrect**: `string` #### Inherited from `InnerCellProps.autoCorrect` *** ### autoFocus? > `optional` **autoFocus**: `boolean` #### Inherited from `InnerCellProps.autoFocus` *** ### autoSave? > `optional` **autoSave**: `string` #### Inherited from `InnerCellProps.autoSave` *** ### children? > `optional` **children**: `ReactNode` \| (`rowData`, `rowIndex`?) => `ReactNode` #### Inherited from `InnerCellProps.children` *** ### className? > `optional` **className**: `string` Additional classes #### Inherited from `InnerCellProps.className` *** ### classPrefix? > `optional` **classPrefix**: `string` The prefix of the component CSS class #### Inherited from `InnerCellProps.classPrefix` *** ### color? > `optional` **color**: `string` #### Inherited from `InnerCellProps.color` *** ### content? > `optional` **content**: `string` #### Inherited from `InnerCellProps.content` *** ### contentEditable? > `optional` **contentEditable**: `"inherit"` \| `Booleanish` \| `"plaintext-only"` #### Inherited from `InnerCellProps.contentEditable` *** ### contextMenu? > `optional` **contextMenu**: `string` #### Inherited from `InnerCellProps.contextMenu` *** ### dangerouslySetInnerHTML? > `optional` **dangerouslySetInnerHTML**: `object` #### \_\_html > **\_\_html**: `string` \| `TrustedHTML` #### Inherited from `InnerCellProps.dangerouslySetInnerHTML` *** ### dataKey > **dataKey**: `string` The cell data key. #### Overrides `InnerCellProps.dataKey` *** ### datatype? > `optional` **datatype**: `string` #### Inherited from `InnerCellProps.datatype` *** ### defaultChecked? > `optional` **defaultChecked**: `boolean` #### Inherited from `InnerCellProps.defaultChecked` *** ### defaultValue? > `optional` **defaultValue**: `string` \| `number` \| readonly `string`[] #### Inherited from `InnerCellProps.defaultValue` *** ### depth? > `optional` **depth**: `number` #### Inherited from `InnerCellProps.depth` *** ### dir? > `optional` **dir**: `string` #### Inherited from `InnerCellProps.dir` *** ### draggable? > `optional` **draggable**: `Booleanish` #### Inherited from `InnerCellProps.draggable` *** ### enterKeyHint? > `optional` **enterKeyHint**: `"search"` \| `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"previous"` \| `"send"` #### Inherited from `InnerCellProps.enterKeyHint` *** ### expanded? > `optional` **expanded**: `boolean` #### Inherited from `InnerCellProps.expanded` *** ### firstColumn? > `optional` **firstColumn**: `boolean` #### Inherited from `InnerCellProps.firstColumn` *** ### fullText? > `optional` **fullText**: `boolean` #### Inherited from `InnerCellProps.fullText` *** ### hasChildren? > `optional` **hasChildren**: `boolean` #### Inherited from `InnerCellProps.hasChildren` *** ### headerHeight? > `optional` **headerHeight**: `number` #### Inherited from `InnerCellProps.headerHeight` *** ### height? > `optional` **height**: `number` \| (`rowData`) => `number` #### Inherited from `InnerCellProps.height` *** ### hidden? > `optional` **hidden**: `boolean` #### Inherited from `InnerCellProps.hidden` *** ### id? > `optional` **id**: `string` #### Inherited from `InnerCellProps.id` *** ### inert? > `optional` **inert**: `boolean` #### See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert #### Inherited from `InnerCellProps.inert` *** ### inlist? > `optional` **inlist**: `any` #### Inherited from `InnerCellProps.inlist` *** ### inputMode? > `optional` **inputMode**: `"search"` \| `"text"` \| `"none"` \| `"tel"` \| `"url"` \| `"email"` \| `"numeric"` \| `"decimal"` Hints at the type of data that might be entered by the user while editing the element or its contents #### See [https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute) #### Inherited from `InnerCellProps.inputMode` *** ### is? > `optional` **is**: `string` Specify that a standard HTML element should behave like a defined custom built-in element #### See [https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is](https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is) #### Inherited from `InnerCellProps.is` *** ### isHeaderCell? > `optional` **isHeaderCell**: `boolean` #### Inherited from `InnerCellProps.isHeaderCell` *** ### itemID? > `optional` **itemID**: `string` #### Inherited from `InnerCellProps.itemID` *** ### itemProp? > `optional` **itemProp**: `string` #### Inherited from `InnerCellProps.itemProp` *** ### itemRef? > `optional` **itemRef**: `string` #### Inherited from `InnerCellProps.itemRef` *** ### itemScope? > `optional` **itemScope**: `boolean` #### Inherited from `InnerCellProps.itemScope` *** ### itemType? > `optional` **itemType**: `string` #### Inherited from `InnerCellProps.itemType` *** ### lang? > `optional` **lang**: `string` #### Inherited from `InnerCellProps.lang` *** ### lastColumn? > `optional` **lastColumn**: `boolean` #### Inherited from `InnerCellProps.lastColumn` *** ### left? > `optional` **left**: `number` #### Inherited from `InnerCellProps.left` *** ### nonce? > `optional` **nonce**: `string` #### Inherited from `InnerCellProps.nonce` *** ### onAbort? > `optional` **onAbort**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAbort` *** ### onAbortCapture? > `optional` **onAbortCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAbortCapture` *** ### onAnimationEnd? > `optional` **onAnimationEnd**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationEnd` *** ### onAnimationEndCapture? > `optional` **onAnimationEndCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationEndCapture` *** ### onAnimationIteration? > `optional` **onAnimationIteration**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationIteration` *** ### onAnimationIterationCapture? > `optional` **onAnimationIterationCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationIterationCapture` *** ### onAnimationStart? > `optional` **onAnimationStart**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationStart` *** ### onAnimationStartCapture? > `optional` **onAnimationStartCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAnimationStartCapture` *** ### onAuxClick? > `optional` **onAuxClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAuxClick` *** ### onAuxClickCapture? > `optional` **onAuxClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onAuxClickCapture` *** ### onBeforeInput? > `optional` **onBeforeInput**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onBeforeInput` *** ### onBeforeInputCapture? > `optional` **onBeforeInputCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onBeforeInputCapture` *** ### onBeforeToggle? > `optional` **onBeforeToggle**: `ToggleEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onBeforeToggle` *** ### onBlur? > `optional` **onBlur**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onBlur` *** ### onBlurCapture? > `optional` **onBlurCapture**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onBlurCapture` *** ### onCanPlay? > `optional` **onCanPlay**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCanPlay` *** ### onCanPlayCapture? > `optional` **onCanPlayCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCanPlayCapture` *** ### onCanPlayThrough? > `optional` **onCanPlayThrough**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCanPlayThrough` *** ### onCanPlayThroughCapture? > `optional` **onCanPlayThroughCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCanPlayThroughCapture` *** ### onChange()? > `optional` **onChange**: (`value`?, `dataKey`?, `rowIndex`?) => `void` The callback function called when the data in a cell is changed. #### Parameters • **value?**: `any` the value. • **dataKey?**: `string` the cell data key. • **rowIndex?**: `number` the cell row index. #### Returns `void` #### Overrides `InnerCellProps.onChange` *** ### onChangeCapture? > `optional` **onChangeCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onChangeCapture` *** ### onClick? > `optional` **onClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onClick` *** ### onClickCapture? > `optional` **onClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onClickCapture` *** ### onCompositionEnd? > `optional` **onCompositionEnd**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionEnd` *** ### onCompositionEndCapture? > `optional` **onCompositionEndCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionEndCapture` *** ### onCompositionStart? > `optional` **onCompositionStart**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionStart` *** ### onCompositionStartCapture? > `optional` **onCompositionStartCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionStartCapture` *** ### onCompositionUpdate? > `optional` **onCompositionUpdate**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionUpdate` *** ### onCompositionUpdateCapture? > `optional` **onCompositionUpdateCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCompositionUpdateCapture` *** ### onContextMenu? > `optional` **onContextMenu**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onContextMenu` *** ### onContextMenuCapture? > `optional` **onContextMenuCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onContextMenuCapture` *** ### onCopy? > `optional` **onCopy**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCopy` *** ### onCopyCapture? > `optional` **onCopyCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCopyCapture` *** ### onCut? > `optional` **onCut**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCut` *** ### onCutCapture? > `optional` **onCutCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onCutCapture` *** ### onDoubleClick? > `optional` **onDoubleClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDoubleClick` *** ### onDoubleClickCapture? > `optional` **onDoubleClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDoubleClickCapture` *** ### onDrag? > `optional` **onDrag**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDrag` *** ### onDragCapture? > `optional` **onDragCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragCapture` *** ### onDragEnd? > `optional` **onDragEnd**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragEnd` *** ### onDragEndCapture? > `optional` **onDragEndCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragEndCapture` *** ### onDragEnter? > `optional` **onDragEnter**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragEnter` *** ### onDragEnterCapture? > `optional` **onDragEnterCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragEnterCapture` *** ### onDragExit? > `optional` **onDragExit**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragExit` *** ### onDragExitCapture? > `optional` **onDragExitCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragExitCapture` *** ### onDragLeave? > `optional` **onDragLeave**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragLeave` *** ### onDragLeaveCapture? > `optional` **onDragLeaveCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragLeaveCapture` *** ### onDragOver? > `optional` **onDragOver**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragOver` *** ### onDragOverCapture? > `optional` **onDragOverCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragOverCapture` *** ### onDragStart? > `optional` **onDragStart**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragStart` *** ### onDragStartCapture? > `optional` **onDragStartCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDragStartCapture` *** ### onDrop? > `optional` **onDrop**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDrop` *** ### onDropCapture? > `optional` **onDropCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDropCapture` *** ### onDurationChange? > `optional` **onDurationChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDurationChange` *** ### onDurationChangeCapture? > `optional` **onDurationChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onDurationChangeCapture` *** ### onEmptied? > `optional` **onEmptied**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEmptied` *** ### onEmptiedCapture? > `optional` **onEmptiedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEmptiedCapture` *** ### onEncrypted? > `optional` **onEncrypted**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEncrypted` *** ### onEncryptedCapture? > `optional` **onEncryptedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEncryptedCapture` *** ### onEnded? > `optional` **onEnded**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEnded` *** ### onEndedCapture? > `optional` **onEndedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onEndedCapture` *** ### onError? > `optional` **onError**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onError` *** ### onErrorCapture? > `optional` **onErrorCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onErrorCapture` *** ### onFocus? > `optional` **onFocus**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onFocus` *** ### onFocusCapture? > `optional` **onFocusCapture**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onFocusCapture` *** ### onGotPointerCapture? > `optional` **onGotPointerCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onGotPointerCapture` *** ### onGotPointerCaptureCapture? > `optional` **onGotPointerCaptureCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onGotPointerCaptureCapture` *** ### onInput? > `optional` **onInput**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onInput` *** ### onInputCapture? > `optional` **onInputCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onInputCapture` *** ### onInvalid? > `optional` **onInvalid**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onInvalid` *** ### onInvalidCapture? > `optional` **onInvalidCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onInvalidCapture` *** ### onKeyDown? > `optional` **onKeyDown**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onKeyDown` *** ### onKeyDownCapture? > `optional` **onKeyDownCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onKeyDownCapture` *** ### ~~onKeyPress?~~ > `optional` **onKeyPress**: `KeyboardEventHandler`\<`HTMLElement`\> #### Deprecated Use `onKeyUp` or `onKeyDown` instead #### Inherited from `InnerCellProps.onKeyPress` *** ### ~~onKeyPressCapture?~~ > `optional` **onKeyPressCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead #### Inherited from `InnerCellProps.onKeyPressCapture` *** ### onKeyUp? > `optional` **onKeyUp**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onKeyUp` *** ### onKeyUpCapture? > `optional` **onKeyUpCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onKeyUpCapture` *** ### onLoad? > `optional` **onLoad**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoad` *** ### onLoadCapture? > `optional` **onLoadCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadCapture` *** ### onLoadStart? > `optional` **onLoadStart**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadStart` *** ### onLoadStartCapture? > `optional` **onLoadStartCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadStartCapture` *** ### onLoadedData? > `optional` **onLoadedData**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadedData` *** ### onLoadedDataCapture? > `optional` **onLoadedDataCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadedDataCapture` *** ### onLoadedMetadata? > `optional` **onLoadedMetadata**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadedMetadata` *** ### onLoadedMetadataCapture? > `optional` **onLoadedMetadataCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLoadedMetadataCapture` *** ### onLostPointerCapture? > `optional` **onLostPointerCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLostPointerCapture` *** ### onLostPointerCaptureCapture? > `optional` **onLostPointerCaptureCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onLostPointerCaptureCapture` *** ### onMouseDown? > `optional` **onMouseDown**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseDown` *** ### onMouseDownCapture? > `optional` **onMouseDownCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseDownCapture` *** ### onMouseEnter? > `optional` **onMouseEnter**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseEnter` *** ### onMouseLeave? > `optional` **onMouseLeave**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseLeave` *** ### onMouseMove? > `optional` **onMouseMove**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseMove` *** ### onMouseMoveCapture? > `optional` **onMouseMoveCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseMoveCapture` *** ### onMouseOut? > `optional` **onMouseOut**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseOut` *** ### onMouseOutCapture? > `optional` **onMouseOutCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseOutCapture` *** ### onMouseOver? > `optional` **onMouseOver**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseOver` *** ### onMouseOverCapture? > `optional` **onMouseOverCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseOverCapture` *** ### onMouseUp? > `optional` **onMouseUp**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseUp` *** ### onMouseUpCapture? > `optional` **onMouseUpCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onMouseUpCapture` *** ### onPaste? > `optional` **onPaste**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPaste` *** ### onPasteCapture? > `optional` **onPasteCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPasteCapture` *** ### onPause? > `optional` **onPause**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPause` *** ### onPauseCapture? > `optional` **onPauseCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPauseCapture` *** ### onPlay? > `optional` **onPlay**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPlay` *** ### onPlayCapture? > `optional` **onPlayCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPlayCapture` *** ### onPlaying? > `optional` **onPlaying**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPlaying` *** ### onPlayingCapture? > `optional` **onPlayingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPlayingCapture` *** ### onPointerCancel? > `optional` **onPointerCancel**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerCancel` *** ### onPointerCancelCapture? > `optional` **onPointerCancelCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerCancelCapture` *** ### onPointerDown? > `optional` **onPointerDown**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerDown` *** ### onPointerDownCapture? > `optional` **onPointerDownCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerDownCapture` *** ### onPointerEnter? > `optional` **onPointerEnter**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerEnter` *** ### onPointerLeave? > `optional` **onPointerLeave**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerLeave` *** ### onPointerMove? > `optional` **onPointerMove**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerMove` *** ### onPointerMoveCapture? > `optional` **onPointerMoveCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerMoveCapture` *** ### onPointerOut? > `optional` **onPointerOut**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerOut` *** ### onPointerOutCapture? > `optional` **onPointerOutCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerOutCapture` *** ### onPointerOver? > `optional` **onPointerOver**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerOver` *** ### onPointerOverCapture? > `optional` **onPointerOverCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerOverCapture` *** ### onPointerUp? > `optional` **onPointerUp**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerUp` *** ### onPointerUpCapture? > `optional` **onPointerUpCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onPointerUpCapture` *** ### onProgress? > `optional` **onProgress**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onProgress` *** ### onProgressCapture? > `optional` **onProgressCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onProgressCapture` *** ### onRateChange? > `optional` **onRateChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onRateChange` *** ### onRateChangeCapture? > `optional` **onRateChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onRateChangeCapture` *** ### onReset? > `optional` **onReset**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onReset` *** ### onResetCapture? > `optional` **onResetCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onResetCapture` *** ### onResize? > `optional` **onResize**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onResize` *** ### onResizeCapture? > `optional` **onResizeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onResizeCapture` *** ### onScroll? > `optional` **onScroll**: `UIEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onScroll` *** ### onScrollCapture? > `optional` **onScrollCapture**: `UIEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onScrollCapture` *** ### onSeeked? > `optional` **onSeeked**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSeeked` *** ### onSeekedCapture? > `optional` **onSeekedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSeekedCapture` *** ### onSeeking? > `optional` **onSeeking**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSeeking` *** ### onSeekingCapture? > `optional` **onSeekingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSeekingCapture` *** ### onSelect? > `optional` **onSelect**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSelect` *** ### onSelectCapture? > `optional` **onSelectCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSelectCapture` *** ### onStalled? > `optional` **onStalled**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onStalled` *** ### onStalledCapture? > `optional` **onStalledCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onStalledCapture` *** ### onSubmit? > `optional` **onSubmit**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSubmit` *** ### onSubmitCapture? > `optional` **onSubmitCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSubmitCapture` *** ### onSuspend? > `optional` **onSuspend**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSuspend` *** ### onSuspendCapture? > `optional` **onSuspendCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onSuspendCapture` *** ### onTimeUpdate? > `optional` **onTimeUpdate**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTimeUpdate` *** ### onTimeUpdateCapture? > `optional` **onTimeUpdateCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTimeUpdateCapture` *** ### onToggle? > `optional` **onToggle**: `ToggleEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onToggle` *** ### onTouchCancel? > `optional` **onTouchCancel**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchCancel` *** ### onTouchCancelCapture? > `optional` **onTouchCancelCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchCancelCapture` *** ### onTouchEnd? > `optional` **onTouchEnd**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchEnd` *** ### onTouchEndCapture? > `optional` **onTouchEndCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchEndCapture` *** ### onTouchMove? > `optional` **onTouchMove**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchMove` *** ### onTouchMoveCapture? > `optional` **onTouchMoveCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchMoveCapture` *** ### onTouchStart? > `optional` **onTouchStart**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchStart` *** ### onTouchStartCapture? > `optional` **onTouchStartCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTouchStartCapture` *** ### onTransitionCancel? > `optional` **onTransitionCancel**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionCancel` *** ### onTransitionCancelCapture? > `optional` **onTransitionCancelCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionCancelCapture` *** ### onTransitionEnd? > `optional` **onTransitionEnd**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionEnd` *** ### onTransitionEndCapture? > `optional` **onTransitionEndCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionEndCapture` *** ### onTransitionRun? > `optional` **onTransitionRun**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionRun` *** ### onTransitionRunCapture? > `optional` **onTransitionRunCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionRunCapture` *** ### onTransitionStart? > `optional` **onTransitionStart**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionStart` *** ### onTransitionStartCapture? > `optional` **onTransitionStartCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onTransitionStartCapture` *** ### onTreeToggle()? > `optional` **onTreeToggle**: (`rowKey`?, `rowIndex`?, `rowData`?, `event`?) => `void` #### Parameters • **rowKey?**: `string` \| `number` • **rowIndex?**: `number` • **rowData?**: `RowDataType`\<`any`\> • **event?**: `MouseEvent`\<`Element`, `MouseEvent`\> #### Returns `void` #### Inherited from `InnerCellProps.onTreeToggle` *** ### onVolumeChange? > `optional` **onVolumeChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onVolumeChange` *** ### onVolumeChangeCapture? > `optional` **onVolumeChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onVolumeChangeCapture` *** ### onWaiting? > `optional` **onWaiting**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onWaiting` *** ### onWaitingCapture? > `optional` **onWaitingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onWaitingCapture` *** ### onWheel? > `optional` **onWheel**: `WheelEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onWheel` *** ### onWheelCapture? > `optional` **onWheelCapture**: `WheelEventHandler`\<`HTMLElement`\> #### Inherited from `InnerCellProps.onWheelCapture` *** ### popover? > `optional` **popover**: `""` \| `"auto"` \| `"manual"` #### Inherited from `InnerCellProps.popover` *** ### popoverTarget? > `optional` **popoverTarget**: `string` #### Inherited from `InnerCellProps.popoverTarget` *** ### popoverTargetAction? > `optional` **popoverTargetAction**: `"toggle"` \| `"show"` \| `"hide"` #### Inherited from `InnerCellProps.popoverTargetAction` *** ### predefinedStyle? > `optional` **predefinedStyle**: `CSSProperties` #### Inherited from `InnerCellProps.predefinedStyle` *** ### prefix? > `optional` **prefix**: `string` #### Inherited from `InnerCellProps.prefix` *** ### property? > `optional` **property**: `string` #### Inherited from `InnerCellProps.property` *** ### radioGroup? > `optional` **radioGroup**: `string` #### Inherited from `InnerCellProps.radioGroup` *** ### rel? > `optional` **rel**: `string` #### Inherited from `InnerCellProps.rel` *** ### removed? > `optional` **removed**: `boolean` #### Inherited from `InnerCellProps.removed` *** ### renderCell()? > `optional` **renderCell**: (`contentChildren`) => `ReactNode` #### Parameters • **contentChildren**: `any` #### Returns `ReactNode` #### Inherited from `InnerCellProps.renderCell` *** ### renderTreeToggle()? > `optional` **renderTreeToggle**: (`expandButton`, `rowData`?, `expanded`?) => `ReactNode` #### Parameters • **expandButton**: `ReactNode` • **rowData?**: `RowDataType`\<`any`\> • **expanded?**: `boolean` #### Returns `ReactNode` #### Inherited from `InnerCellProps.renderTreeToggle` *** ### resource? > `optional` **resource**: `string` #### Inherited from `InnerCellProps.resource` *** ### results? > `optional` **results**: `number` #### Inherited from `InnerCellProps.results` *** ### rev? > `optional` **rev**: `string` #### Inherited from `InnerCellProps.rev` *** ### role? > `optional` **role**: `AriaRole` #### Inherited from `InnerCellProps.role` *** ### rowData > **rowData**: `RowDataType`\<`any`\> Rows data. #### Overrides `InnerCellProps.rowData` *** ### rowIndex? > `optional` **rowIndex**: `number` Row Number #### Inherited from `InnerCellProps.rowIndex` *** ### rowKey? > `optional` **rowKey**: `string` \| `number` #### Inherited from `InnerCellProps.rowKey` *** ### rowSpan? > `optional` **rowSpan**: `number` #### Inherited from `InnerCellProps.rowSpan` *** ### security? > `optional` **security**: `string` #### Inherited from `InnerCellProps.security` *** ### slot? > `optional` **slot**: `string` #### Inherited from `InnerCellProps.slot` *** ### spellCheck? > `optional` **spellCheck**: `Booleanish` #### Inherited from `InnerCellProps.spellCheck` *** ### style? > `optional` **style**: `CSSProperties` Additional style #### Inherited from `InnerCellProps.style` *** ### suppressContentEditableWarning? > `optional` **suppressContentEditableWarning**: `boolean` #### Inherited from `InnerCellProps.suppressContentEditableWarning` *** ### suppressHydrationWarning? > `optional` **suppressHydrationWarning**: `boolean` #### Inherited from `InnerCellProps.suppressHydrationWarning` *** ### tabIndex? > `optional` **tabIndex**: `number` #### Inherited from `InnerCellProps.tabIndex` *** ### title? > `optional` **title**: `string` #### Inherited from `InnerCellProps.title` *** ### translate? > `optional` **translate**: `"yes"` \| `"no"` #### Inherited from `InnerCellProps.translate` *** ### treeCol? > `optional` **treeCol**: `boolean` #### Inherited from `InnerCellProps.treeCol` *** ### type > **type**: `string` The input type. *** ### typeof? > `optional` **typeof**: `string` #### Inherited from `InnerCellProps.typeof` *** ### unselectable? > `optional` **unselectable**: `"off"` \| `"on"` #### Inherited from `InnerCellProps.unselectable` *** ### verticalAlign? > `optional` **verticalAlign**: `"bottom"` \| `"top"` \| `AlignItems` \| `"middle"` #### Inherited from `InnerCellProps.verticalAlign` *** ### vocab? > `optional` **vocab**: `string` #### Inherited from `InnerCellProps.vocab` *** ### width? > `optional` **width**: `number` #### Inherited from `InnerCellProps.width` *** ### wordWrap? > `optional` **wordWrap**: `boolean` \| `"break-all"` \| `"break-word"` \| `"keep-all"` #### Inherited from `InnerCellProps.wordWrap` --- # Interface: PresetComponent The preset component settings. ## Properties ### category? > `optional` **category**: `string` The category of the preset component. *** ### components > **components**: [`ComponentStore`](../../core/classes/ComponentStore.md)[] The components of the preset component. *** ### name > **name**: `string` The name of the preset component. --- # Interface: SelectCellProps The properties of SelectCell component. ## Extends - [`InputCellProps`](InputCellProps.md) ## Properties ### about? > `optional` **about**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`about`](InputCellProps.md#about) *** ### accessKey? > `optional` **accessKey**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`accessKey`](InputCellProps.md#accesskey) *** ### align? > `optional` **align**: `JustifyContent` #### Inherited from [`InputCellProps`](InputCellProps.md).[`align`](InputCellProps.md#align) *** ### aria-activedescendant? > `optional` **aria-activedescendant**: `string` Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-activedescendant`](InputCellProps.md#aria-activedescendant) *** ### aria-atomic? > `optional` **aria-atomic**: `Booleanish` Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-atomic`](InputCellProps.md#aria-atomic) *** ### aria-autocomplete? > `optional` **aria-autocomplete**: `"none"` \| `"list"` \| `"inline"` \| `"both"` Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-autocomplete`](InputCellProps.md#aria-autocomplete) *** ### aria-braillelabel? > `optional` **aria-braillelabel**: `string` Defines a string value that labels the current element, which is intended to be converted into Braille. #### See aria-label. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-braillelabel`](InputCellProps.md#aria-braillelabel) *** ### aria-brailleroledescription? > `optional` **aria-brailleroledescription**: `string` Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille. #### See aria-roledescription. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-brailleroledescription`](InputCellProps.md#aria-brailleroledescription) *** ### aria-busy? > `optional` **aria-busy**: `Booleanish` #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-busy`](InputCellProps.md#aria-busy) *** ### aria-checked? > `optional` **aria-checked**: `boolean` \| `"true"` \| `"false"` \| `"mixed"` Indicates the current "checked" state of checkboxes, radio buttons, and other widgets. #### See - aria-pressed - aria-selected. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-checked`](InputCellProps.md#aria-checked) *** ### aria-colcount? > `optional` **aria-colcount**: `number` Defines the total number of columns in a table, grid, or treegrid. #### See aria-colindex. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-colcount`](InputCellProps.md#aria-colcount) *** ### aria-colindex? > `optional` **aria-colindex**: `number` Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid. #### See - aria-colcount - aria-colspan. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-colindex`](InputCellProps.md#aria-colindex) *** ### aria-colindextext? > `optional` **aria-colindextext**: `string` Defines a human readable text alternative of aria-colindex. #### See aria-rowindextext. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-colindextext`](InputCellProps.md#aria-colindextext) *** ### aria-colspan? > `optional` **aria-colspan**: `number` Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid. #### See - aria-colindex - aria-rowspan. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-colspan`](InputCellProps.md#aria-colspan) *** ### aria-controls? > `optional` **aria-controls**: `string` Identifies the element (or elements) whose contents or presence are controlled by the current element. #### See aria-owns. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-controls`](InputCellProps.md#aria-controls) *** ### aria-current? > `optional` **aria-current**: `boolean` \| `"time"` \| `"date"` \| `"true"` \| `"false"` \| `"page"` \| `"step"` \| `"location"` Indicates the element that represents the current item within a container or set of related elements. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-current`](InputCellProps.md#aria-current) *** ### aria-describedby? > `optional` **aria-describedby**: `string` Identifies the element (or elements) that describes the object. #### See aria-labelledby #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-describedby`](InputCellProps.md#aria-describedby) *** ### aria-description? > `optional` **aria-description**: `string` Defines a string value that describes or annotates the current element. #### See related aria-describedby. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-description`](InputCellProps.md#aria-description) *** ### aria-details? > `optional` **aria-details**: `string` Identifies the element that provides a detailed, extended description for the object. #### See aria-describedby. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-details`](InputCellProps.md#aria-details) *** ### aria-disabled? > `optional` **aria-disabled**: `Booleanish` Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable. #### See - aria-hidden - aria-readonly. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-disabled`](InputCellProps.md#aria-disabled) *** ### ~~aria-dropeffect?~~ > `optional` **aria-dropeffect**: `"link"` \| `"none"` \| `"copy"` \| `"execute"` \| `"move"` \| `"popup"` Indicates what functions can be performed when a dragged object is released on the drop target. #### Deprecated in ARIA 1.1 #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-dropeffect`](InputCellProps.md#aria-dropeffect) *** ### aria-errormessage? > `optional` **aria-errormessage**: `string` Identifies the element that provides an error message for the object. #### See - aria-invalid - aria-describedby. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-errormessage`](InputCellProps.md#aria-errormessage) *** ### aria-expanded? > `optional` **aria-expanded**: `Booleanish` Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-expanded`](InputCellProps.md#aria-expanded) *** ### aria-flowto? > `optional` **aria-flowto**: `string` Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion, allows assistive technology to override the general default of reading in document source order. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-flowto`](InputCellProps.md#aria-flowto) *** ### ~~aria-grabbed?~~ > `optional` **aria-grabbed**: `Booleanish` Indicates an element's "grabbed" state in a drag-and-drop operation. #### Deprecated in ARIA 1.1 #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-grabbed`](InputCellProps.md#aria-grabbed) *** ### aria-haspopup? > `optional` **aria-haspopup**: `boolean` \| `"dialog"` \| `"menu"` \| `"true"` \| `"false"` \| `"grid"` \| `"listbox"` \| `"tree"` Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-haspopup`](InputCellProps.md#aria-haspopup) *** ### aria-hidden? > `optional` **aria-hidden**: `Booleanish` Indicates whether the element is exposed to an accessibility API. #### See aria-disabled. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-hidden`](InputCellProps.md#aria-hidden) *** ### aria-invalid? > `optional` **aria-invalid**: `boolean` \| `"true"` \| `"false"` \| `"grammar"` \| `"spelling"` Indicates the entered value does not conform to the format expected by the application. #### See aria-errormessage. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-invalid`](InputCellProps.md#aria-invalid) *** ### aria-keyshortcuts? > `optional` **aria-keyshortcuts**: `string` Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-keyshortcuts`](InputCellProps.md#aria-keyshortcuts) *** ### aria-label? > `optional` **aria-label**: `string` Defines a string value that labels the current element. #### See aria-labelledby. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-label`](InputCellProps.md#aria-label) *** ### aria-labelledby? > `optional` **aria-labelledby**: `string` Identifies the element (or elements) that labels the current element. #### See aria-describedby. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-labelledby`](InputCellProps.md#aria-labelledby) *** ### aria-level? > `optional` **aria-level**: `number` Defines the hierarchical level of an element within a structure. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-level`](InputCellProps.md#aria-level) *** ### aria-live? > `optional` **aria-live**: `"off"` \| `"assertive"` \| `"polite"` Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-live`](InputCellProps.md#aria-live) *** ### aria-modal? > `optional` **aria-modal**: `Booleanish` Indicates whether an element is modal when displayed. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-modal`](InputCellProps.md#aria-modal) *** ### aria-multiline? > `optional` **aria-multiline**: `Booleanish` Indicates whether a text box accepts multiple lines of input or only a single line. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-multiline`](InputCellProps.md#aria-multiline) *** ### aria-multiselectable? > `optional` **aria-multiselectable**: `Booleanish` Indicates that the user may select more than one item from the current selectable descendants. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-multiselectable`](InputCellProps.md#aria-multiselectable) *** ### aria-orientation? > `optional` **aria-orientation**: `"horizontal"` \| `"vertical"` Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-orientation`](InputCellProps.md#aria-orientation) *** ### aria-owns? > `optional` **aria-owns**: `string` Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship between DOM elements where the DOM hierarchy cannot be used to represent the relationship. #### See aria-controls. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-owns`](InputCellProps.md#aria-owns) *** ### aria-placeholder? > `optional` **aria-placeholder**: `string` Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value. A hint could be a sample value or a brief description of the expected format. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-placeholder`](InputCellProps.md#aria-placeholder) *** ### aria-posinset? > `optional` **aria-posinset**: `number` Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. #### See aria-setsize. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-posinset`](InputCellProps.md#aria-posinset) *** ### aria-pressed? > `optional` **aria-pressed**: `boolean` \| `"true"` \| `"false"` \| `"mixed"` Indicates the current "pressed" state of toggle buttons. #### See - aria-checked - aria-selected. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-pressed`](InputCellProps.md#aria-pressed) *** ### aria-readonly? > `optional` **aria-readonly**: `Booleanish` Indicates that the element is not editable, but is otherwise operable. #### See aria-disabled. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-readonly`](InputCellProps.md#aria-readonly) *** ### aria-relevant? > `optional` **aria-relevant**: `"text"` \| `"all"` \| `"additions"` \| `"additions removals"` \| `"additions text"` \| `"removals"` \| `"removals additions"` \| `"removals text"` \| `"text additions"` \| `"text removals"` Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified. #### See aria-atomic. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-relevant`](InputCellProps.md#aria-relevant) *** ### aria-required? > `optional` **aria-required**: `Booleanish` Indicates that user input is required on the element before a form may be submitted. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-required`](InputCellProps.md#aria-required) *** ### aria-roledescription? > `optional` **aria-roledescription**: `string` Defines a human-readable, author-localized description for the role of an element. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-roledescription`](InputCellProps.md#aria-roledescription) *** ### aria-rowcount? > `optional` **aria-rowcount**: `number` Defines the total number of rows in a table, grid, or treegrid. #### See aria-rowindex. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-rowcount`](InputCellProps.md#aria-rowcount) *** ### aria-rowindex? > `optional` **aria-rowindex**: `number` Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid. #### See - aria-rowcount - aria-rowspan. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-rowindex`](InputCellProps.md#aria-rowindex) *** ### aria-rowindextext? > `optional` **aria-rowindextext**: `string` Defines a human readable text alternative of aria-rowindex. #### See aria-colindextext. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-rowindextext`](InputCellProps.md#aria-rowindextext) *** ### aria-rowspan? > `optional` **aria-rowspan**: `number` Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid. #### See - aria-rowindex - aria-colspan. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-rowspan`](InputCellProps.md#aria-rowspan) *** ### aria-selected? > `optional` **aria-selected**: `Booleanish` Indicates the current "selected" state of various widgets. #### See - aria-checked - aria-pressed. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-selected`](InputCellProps.md#aria-selected) *** ### aria-setsize? > `optional` **aria-setsize**: `number` Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM. #### See aria-posinset. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-setsize`](InputCellProps.md#aria-setsize) *** ### aria-sort? > `optional` **aria-sort**: `"none"` \| `"ascending"` \| `"descending"` \| `"other"` Indicates if items in a table or grid are sorted in ascending or descending order. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-sort`](InputCellProps.md#aria-sort) *** ### aria-valuemax? > `optional` **aria-valuemax**: `number` Defines the maximum allowed value for a range widget. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-valuemax`](InputCellProps.md#aria-valuemax) *** ### aria-valuemin? > `optional` **aria-valuemin**: `number` Defines the minimum allowed value for a range widget. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-valuemin`](InputCellProps.md#aria-valuemin) *** ### aria-valuenow? > `optional` **aria-valuenow**: `number` Defines the current value for a range widget. #### See aria-valuetext. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-valuenow`](InputCellProps.md#aria-valuenow) *** ### aria-valuetext? > `optional` **aria-valuetext**: `string` Defines the human readable text alternative of aria-valuenow for a range widget. #### Inherited from [`InputCellProps`](InputCellProps.md).[`aria-valuetext`](InputCellProps.md#aria-valuetext) *** ### autoCapitalize? > `optional` **autoCapitalize**: `string` & `object` \| `"off"` \| `"none"` \| `"on"` \| `"sentences"` \| `"words"` \| `"characters"` #### Inherited from [`InputCellProps`](InputCellProps.md).[`autoCapitalize`](InputCellProps.md#autocapitalize) *** ### autoCorrect? > `optional` **autoCorrect**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`autoCorrect`](InputCellProps.md#autocorrect) *** ### autoFocus? > `optional` **autoFocus**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`autoFocus`](InputCellProps.md#autofocus) *** ### autoSave? > `optional` **autoSave**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`autoSave`](InputCellProps.md#autosave) *** ### children? > `optional` **children**: `ReactNode` \| (`rowData`, `rowIndex`?) => `ReactNode` #### Inherited from [`InputCellProps`](InputCellProps.md).[`children`](InputCellProps.md#children) *** ### className? > `optional` **className**: `string` Additional classes #### Inherited from [`InputCellProps`](InputCellProps.md).[`className`](InputCellProps.md#classname) *** ### classPrefix? > `optional` **classPrefix**: `string` The prefix of the component CSS class #### Inherited from [`InputCellProps`](InputCellProps.md).[`classPrefix`](InputCellProps.md#classprefix) *** ### color? > `optional` **color**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`color`](InputCellProps.md#color) *** ### content? > `optional` **content**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`content`](InputCellProps.md#content) *** ### contentEditable? > `optional` **contentEditable**: `"inherit"` \| `Booleanish` \| `"plaintext-only"` #### Inherited from [`InputCellProps`](InputCellProps.md).[`contentEditable`](InputCellProps.md#contenteditable) *** ### contextMenu? > `optional` **contextMenu**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`contextMenu`](InputCellProps.md#contextmenu) *** ### dangerouslySetInnerHTML? > `optional` **dangerouslySetInnerHTML**: `object` #### \_\_html > **\_\_html**: `string` \| `TrustedHTML` #### Inherited from [`InputCellProps`](InputCellProps.md).[`dangerouslySetInnerHTML`](InputCellProps.md#dangerouslysetinnerhtml) *** ### dataKey > **dataKey**: `string` The cell data key. #### Inherited from [`InputCellProps`](InputCellProps.md).[`dataKey`](InputCellProps.md#datakey) *** ### datatype? > `optional` **datatype**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`datatype`](InputCellProps.md#datatype) *** ### defaultChecked? > `optional` **defaultChecked**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`defaultChecked`](InputCellProps.md#defaultchecked) *** ### defaultValue? > `optional` **defaultValue**: `string` \| `number` \| readonly `string`[] #### Inherited from [`InputCellProps`](InputCellProps.md).[`defaultValue`](InputCellProps.md#defaultvalue) *** ### depth? > `optional` **depth**: `number` #### Inherited from [`InputCellProps`](InputCellProps.md).[`depth`](InputCellProps.md#depth) *** ### dir? > `optional` **dir**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`dir`](InputCellProps.md#dir) *** ### draggable? > `optional` **draggable**: `Booleanish` #### Inherited from [`InputCellProps`](InputCellProps.md).[`draggable`](InputCellProps.md#draggable) *** ### enterKeyHint? > `optional` **enterKeyHint**: `"search"` \| `"enter"` \| `"done"` \| `"go"` \| `"next"` \| `"previous"` \| `"send"` #### Inherited from [`InputCellProps`](InputCellProps.md).[`enterKeyHint`](InputCellProps.md#enterkeyhint) *** ### expanded? > `optional` **expanded**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`expanded`](InputCellProps.md#expanded) *** ### firstColumn? > `optional` **firstColumn**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`firstColumn`](InputCellProps.md#firstcolumn) *** ### fullText? > `optional` **fullText**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`fullText`](InputCellProps.md#fulltext) *** ### hasChildren? > `optional` **hasChildren**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`hasChildren`](InputCellProps.md#haschildren) *** ### headerHeight? > `optional` **headerHeight**: `number` #### Inherited from [`InputCellProps`](InputCellProps.md).[`headerHeight`](InputCellProps.md#headerheight) *** ### height? > `optional` **height**: `number` \| (`rowData`) => `number` #### Inherited from [`InputCellProps`](InputCellProps.md).[`height`](InputCellProps.md#height) *** ### hidden? > `optional` **hidden**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`hidden`](InputCellProps.md#hidden) *** ### id? > `optional` **id**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`id`](InputCellProps.md#id) *** ### inert? > `optional` **inert**: `boolean` #### See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert #### Inherited from [`InputCellProps`](InputCellProps.md).[`inert`](InputCellProps.md#inert) *** ### inlist? > `optional` **inlist**: `any` #### Inherited from [`InputCellProps`](InputCellProps.md).[`inlist`](InputCellProps.md#inlist) *** ### inputMode? > `optional` **inputMode**: `"search"` \| `"text"` \| `"none"` \| `"tel"` \| `"url"` \| `"email"` \| `"numeric"` \| `"decimal"` Hints at the type of data that might be entered by the user while editing the element or its contents #### See [https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute](https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute) #### Inherited from [`InputCellProps`](InputCellProps.md).[`inputMode`](InputCellProps.md#inputmode) *** ### is? > `optional` **is**: `string` Specify that a standard HTML element should behave like a defined custom built-in element #### See [https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is](https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is) #### Inherited from [`InputCellProps`](InputCellProps.md).[`is`](InputCellProps.md#is) *** ### isHeaderCell? > `optional` **isHeaderCell**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`isHeaderCell`](InputCellProps.md#isheadercell) *** ### itemID? > `optional` **itemID**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`itemID`](InputCellProps.md#itemid) *** ### itemProp? > `optional` **itemProp**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`itemProp`](InputCellProps.md#itemprop) *** ### itemRef? > `optional` **itemRef**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`itemRef`](InputCellProps.md#itemref) *** ### itemScope? > `optional` **itemScope**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`itemScope`](InputCellProps.md#itemscope) *** ### itemType? > `optional` **itemType**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`itemType`](InputCellProps.md#itemtype) *** ### lang? > `optional` **lang**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`lang`](InputCellProps.md#lang) *** ### lastColumn? > `optional` **lastColumn**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`lastColumn`](InputCellProps.md#lastcolumn) *** ### left? > `optional` **left**: `number` #### Inherited from [`InputCellProps`](InputCellProps.md).[`left`](InputCellProps.md#left) *** ### nonce? > `optional` **nonce**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`nonce`](InputCellProps.md#nonce) *** ### onAbort? > `optional` **onAbort**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onAbort`](InputCellProps.md#onabort) *** ### onAbortCapture? > `optional` **onAbortCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onAbortCapture`](InputCellProps.md#onabortcapture) *** ### onAnimationEnd? > `optional` **onAnimationEnd**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onAnimationEnd`](InputCellProps.md#onanimationend) *** ### onAnimationEndCapture? > `optional` **onAnimationEndCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onAnimationEndCapture`](InputCellProps.md#onanimationendcapture) *** ### onAnimationIteration? > `optional` **onAnimationIteration**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onAnimationIteration`](InputCellProps.md#onanimationiteration) *** ### onAnimationIterationCapture? > `optional` **onAnimationIterationCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onAnimationIterationCapture`](InputCellProps.md#onanimationiterationcapture) *** ### onAnimationStart? > `optional` **onAnimationStart**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onAnimationStart`](InputCellProps.md#onanimationstart) *** ### onAnimationStartCapture? > `optional` **onAnimationStartCapture**: `AnimationEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onAnimationStartCapture`](InputCellProps.md#onanimationstartcapture) *** ### onAuxClick? > `optional` **onAuxClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onAuxClick`](InputCellProps.md#onauxclick) *** ### onAuxClickCapture? > `optional` **onAuxClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onAuxClickCapture`](InputCellProps.md#onauxclickcapture) *** ### onBeforeInput? > `optional` **onBeforeInput**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onBeforeInput`](InputCellProps.md#onbeforeinput) *** ### onBeforeInputCapture? > `optional` **onBeforeInputCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onBeforeInputCapture`](InputCellProps.md#onbeforeinputcapture) *** ### onBeforeToggle? > `optional` **onBeforeToggle**: `ToggleEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onBeforeToggle`](InputCellProps.md#onbeforetoggle) *** ### onBlur? > `optional` **onBlur**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onBlur`](InputCellProps.md#onblur) *** ### onBlurCapture? > `optional` **onBlurCapture**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onBlurCapture`](InputCellProps.md#onblurcapture) *** ### onCanPlay? > `optional` **onCanPlay**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCanPlay`](InputCellProps.md#oncanplay) *** ### onCanPlayCapture? > `optional` **onCanPlayCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCanPlayCapture`](InputCellProps.md#oncanplaycapture) *** ### onCanPlayThrough? > `optional` **onCanPlayThrough**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCanPlayThrough`](InputCellProps.md#oncanplaythrough) *** ### onCanPlayThroughCapture? > `optional` **onCanPlayThroughCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCanPlayThroughCapture`](InputCellProps.md#oncanplaythroughcapture) *** ### onChange()? > `optional` **onChange**: (`value`?, `dataKey`?, `rowIndex`?) => `void` The callback function called when the data in a cell is changed. #### Parameters • **value?**: `any` the value. • **dataKey?**: `string` the cell data key. • **rowIndex?**: `number` the cell row index. #### Returns `void` #### Inherited from [`InputCellProps`](InputCellProps.md).[`onChange`](InputCellProps.md#onchange) *** ### onChangeCapture? > `optional` **onChangeCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onChangeCapture`](InputCellProps.md#onchangecapture) *** ### onClick? > `optional` **onClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onClick`](InputCellProps.md#onclick) *** ### onClickCapture? > `optional` **onClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onClickCapture`](InputCellProps.md#onclickcapture) *** ### onCompositionEnd? > `optional` **onCompositionEnd**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCompositionEnd`](InputCellProps.md#oncompositionend) *** ### onCompositionEndCapture? > `optional` **onCompositionEndCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCompositionEndCapture`](InputCellProps.md#oncompositionendcapture) *** ### onCompositionStart? > `optional` **onCompositionStart**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCompositionStart`](InputCellProps.md#oncompositionstart) *** ### onCompositionStartCapture? > `optional` **onCompositionStartCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCompositionStartCapture`](InputCellProps.md#oncompositionstartcapture) *** ### onCompositionUpdate? > `optional` **onCompositionUpdate**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCompositionUpdate`](InputCellProps.md#oncompositionupdate) *** ### onCompositionUpdateCapture? > `optional` **onCompositionUpdateCapture**: `CompositionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCompositionUpdateCapture`](InputCellProps.md#oncompositionupdatecapture) *** ### onContextMenu? > `optional` **onContextMenu**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onContextMenu`](InputCellProps.md#oncontextmenu) *** ### onContextMenuCapture? > `optional` **onContextMenuCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onContextMenuCapture`](InputCellProps.md#oncontextmenucapture) *** ### onCopy? > `optional` **onCopy**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCopy`](InputCellProps.md#oncopy) *** ### onCopyCapture? > `optional` **onCopyCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCopyCapture`](InputCellProps.md#oncopycapture) *** ### onCut? > `optional` **onCut**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCut`](InputCellProps.md#oncut) *** ### onCutCapture? > `optional` **onCutCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onCutCapture`](InputCellProps.md#oncutcapture) *** ### onDoubleClick? > `optional` **onDoubleClick**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDoubleClick`](InputCellProps.md#ondoubleclick) *** ### onDoubleClickCapture? > `optional` **onDoubleClickCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDoubleClickCapture`](InputCellProps.md#ondoubleclickcapture) *** ### onDrag? > `optional` **onDrag**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDrag`](InputCellProps.md#ondrag) *** ### onDragCapture? > `optional` **onDragCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragCapture`](InputCellProps.md#ondragcapture) *** ### onDragEnd? > `optional` **onDragEnd**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragEnd`](InputCellProps.md#ondragend) *** ### onDragEndCapture? > `optional` **onDragEndCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragEndCapture`](InputCellProps.md#ondragendcapture) *** ### onDragEnter? > `optional` **onDragEnter**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragEnter`](InputCellProps.md#ondragenter) *** ### onDragEnterCapture? > `optional` **onDragEnterCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragEnterCapture`](InputCellProps.md#ondragentercapture) *** ### onDragExit? > `optional` **onDragExit**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragExit`](InputCellProps.md#ondragexit) *** ### onDragExitCapture? > `optional` **onDragExitCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragExitCapture`](InputCellProps.md#ondragexitcapture) *** ### onDragLeave? > `optional` **onDragLeave**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragLeave`](InputCellProps.md#ondragleave) *** ### onDragLeaveCapture? > `optional` **onDragLeaveCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragLeaveCapture`](InputCellProps.md#ondragleavecapture) *** ### onDragOver? > `optional` **onDragOver**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragOver`](InputCellProps.md#ondragover) *** ### onDragOverCapture? > `optional` **onDragOverCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragOverCapture`](InputCellProps.md#ondragovercapture) *** ### onDragStart? > `optional` **onDragStart**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragStart`](InputCellProps.md#ondragstart) *** ### onDragStartCapture? > `optional` **onDragStartCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDragStartCapture`](InputCellProps.md#ondragstartcapture) *** ### onDrop? > `optional` **onDrop**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDrop`](InputCellProps.md#ondrop) *** ### onDropCapture? > `optional` **onDropCapture**: `DragEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDropCapture`](InputCellProps.md#ondropcapture) *** ### onDurationChange? > `optional` **onDurationChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDurationChange`](InputCellProps.md#ondurationchange) *** ### onDurationChangeCapture? > `optional` **onDurationChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onDurationChangeCapture`](InputCellProps.md#ondurationchangecapture) *** ### onEmptied? > `optional` **onEmptied**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onEmptied`](InputCellProps.md#onemptied) *** ### onEmptiedCapture? > `optional` **onEmptiedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onEmptiedCapture`](InputCellProps.md#onemptiedcapture) *** ### onEncrypted? > `optional` **onEncrypted**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onEncrypted`](InputCellProps.md#onencrypted) *** ### onEncryptedCapture? > `optional` **onEncryptedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onEncryptedCapture`](InputCellProps.md#onencryptedcapture) *** ### onEnded? > `optional` **onEnded**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onEnded`](InputCellProps.md#onended) *** ### onEndedCapture? > `optional` **onEndedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onEndedCapture`](InputCellProps.md#onendedcapture) *** ### onError? > `optional` **onError**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onError`](InputCellProps.md#onerror) *** ### onErrorCapture? > `optional` **onErrorCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onErrorCapture`](InputCellProps.md#onerrorcapture) *** ### onFocus? > `optional` **onFocus**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onFocus`](InputCellProps.md#onfocus) *** ### onFocusCapture? > `optional` **onFocusCapture**: `FocusEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onFocusCapture`](InputCellProps.md#onfocuscapture) *** ### onGotPointerCapture? > `optional` **onGotPointerCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onGotPointerCapture`](InputCellProps.md#ongotpointercapture) *** ### onGotPointerCaptureCapture? > `optional` **onGotPointerCaptureCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onGotPointerCaptureCapture`](InputCellProps.md#ongotpointercapturecapture) *** ### onInput? > `optional` **onInput**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onInput`](InputCellProps.md#oninput) *** ### onInputCapture? > `optional` **onInputCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onInputCapture`](InputCellProps.md#oninputcapture) *** ### onInvalid? > `optional` **onInvalid**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onInvalid`](InputCellProps.md#oninvalid) *** ### onInvalidCapture? > `optional` **onInvalidCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onInvalidCapture`](InputCellProps.md#oninvalidcapture) *** ### onKeyDown? > `optional` **onKeyDown**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onKeyDown`](InputCellProps.md#onkeydown) *** ### onKeyDownCapture? > `optional` **onKeyDownCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onKeyDownCapture`](InputCellProps.md#onkeydowncapture) *** ### ~~onKeyPress?~~ > `optional` **onKeyPress**: `KeyboardEventHandler`\<`HTMLElement`\> #### Deprecated Use `onKeyUp` or `onKeyDown` instead #### Inherited from [`InputCellProps`](InputCellProps.md).[`onKeyPress`](InputCellProps.md#onkeypress) *** ### ~~onKeyPressCapture?~~ > `optional` **onKeyPressCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead #### Inherited from [`InputCellProps`](InputCellProps.md).[`onKeyPressCapture`](InputCellProps.md#onkeypresscapture) *** ### onKeyUp? > `optional` **onKeyUp**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onKeyUp`](InputCellProps.md#onkeyup) *** ### onKeyUpCapture? > `optional` **onKeyUpCapture**: `KeyboardEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onKeyUpCapture`](InputCellProps.md#onkeyupcapture) *** ### onLoad? > `optional` **onLoad**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onLoad`](InputCellProps.md#onload) *** ### onLoadCapture? > `optional` **onLoadCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onLoadCapture`](InputCellProps.md#onloadcapture) *** ### onLoadStart? > `optional` **onLoadStart**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onLoadStart`](InputCellProps.md#onloadstart) *** ### onLoadStartCapture? > `optional` **onLoadStartCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onLoadStartCapture`](InputCellProps.md#onloadstartcapture) *** ### onLoadedData? > `optional` **onLoadedData**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onLoadedData`](InputCellProps.md#onloadeddata) *** ### onLoadedDataCapture? > `optional` **onLoadedDataCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onLoadedDataCapture`](InputCellProps.md#onloadeddatacapture) *** ### onLoadedMetadata? > `optional` **onLoadedMetadata**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onLoadedMetadata`](InputCellProps.md#onloadedmetadata) *** ### onLoadedMetadataCapture? > `optional` **onLoadedMetadataCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onLoadedMetadataCapture`](InputCellProps.md#onloadedmetadatacapture) *** ### onLostPointerCapture? > `optional` **onLostPointerCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onLostPointerCapture`](InputCellProps.md#onlostpointercapture) *** ### onLostPointerCaptureCapture? > `optional` **onLostPointerCaptureCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onLostPointerCaptureCapture`](InputCellProps.md#onlostpointercapturecapture) *** ### onMouseDown? > `optional` **onMouseDown**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseDown`](InputCellProps.md#onmousedown) *** ### onMouseDownCapture? > `optional` **onMouseDownCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseDownCapture`](InputCellProps.md#onmousedowncapture) *** ### onMouseEnter? > `optional` **onMouseEnter**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseEnter`](InputCellProps.md#onmouseenter) *** ### onMouseLeave? > `optional` **onMouseLeave**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseLeave`](InputCellProps.md#onmouseleave) *** ### onMouseMove? > `optional` **onMouseMove**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseMove`](InputCellProps.md#onmousemove) *** ### onMouseMoveCapture? > `optional` **onMouseMoveCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseMoveCapture`](InputCellProps.md#onmousemovecapture) *** ### onMouseOut? > `optional` **onMouseOut**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseOut`](InputCellProps.md#onmouseout) *** ### onMouseOutCapture? > `optional` **onMouseOutCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseOutCapture`](InputCellProps.md#onmouseoutcapture) *** ### onMouseOver? > `optional` **onMouseOver**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseOver`](InputCellProps.md#onmouseover) *** ### onMouseOverCapture? > `optional` **onMouseOverCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseOverCapture`](InputCellProps.md#onmouseovercapture) *** ### onMouseUp? > `optional` **onMouseUp**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseUp`](InputCellProps.md#onmouseup) *** ### onMouseUpCapture? > `optional` **onMouseUpCapture**: `MouseEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onMouseUpCapture`](InputCellProps.md#onmouseupcapture) *** ### onPaste? > `optional` **onPaste**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPaste`](InputCellProps.md#onpaste) *** ### onPasteCapture? > `optional` **onPasteCapture**: `ClipboardEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPasteCapture`](InputCellProps.md#onpastecapture) *** ### onPause? > `optional` **onPause**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPause`](InputCellProps.md#onpause) *** ### onPauseCapture? > `optional` **onPauseCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPauseCapture`](InputCellProps.md#onpausecapture) *** ### onPlay? > `optional` **onPlay**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPlay`](InputCellProps.md#onplay) *** ### onPlayCapture? > `optional` **onPlayCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPlayCapture`](InputCellProps.md#onplaycapture) *** ### onPlaying? > `optional` **onPlaying**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPlaying`](InputCellProps.md#onplaying) *** ### onPlayingCapture? > `optional` **onPlayingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPlayingCapture`](InputCellProps.md#onplayingcapture) *** ### onPointerCancel? > `optional` **onPointerCancel**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerCancel`](InputCellProps.md#onpointercancel) *** ### onPointerCancelCapture? > `optional` **onPointerCancelCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerCancelCapture`](InputCellProps.md#onpointercancelcapture) *** ### onPointerDown? > `optional` **onPointerDown**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerDown`](InputCellProps.md#onpointerdown) *** ### onPointerDownCapture? > `optional` **onPointerDownCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerDownCapture`](InputCellProps.md#onpointerdowncapture) *** ### onPointerEnter? > `optional` **onPointerEnter**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerEnter`](InputCellProps.md#onpointerenter) *** ### onPointerLeave? > `optional` **onPointerLeave**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerLeave`](InputCellProps.md#onpointerleave) *** ### onPointerMove? > `optional` **onPointerMove**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerMove`](InputCellProps.md#onpointermove) *** ### onPointerMoveCapture? > `optional` **onPointerMoveCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerMoveCapture`](InputCellProps.md#onpointermovecapture) *** ### onPointerOut? > `optional` **onPointerOut**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerOut`](InputCellProps.md#onpointerout) *** ### onPointerOutCapture? > `optional` **onPointerOutCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerOutCapture`](InputCellProps.md#onpointeroutcapture) *** ### onPointerOver? > `optional` **onPointerOver**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerOver`](InputCellProps.md#onpointerover) *** ### onPointerOverCapture? > `optional` **onPointerOverCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerOverCapture`](InputCellProps.md#onpointerovercapture) *** ### onPointerUp? > `optional` **onPointerUp**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerUp`](InputCellProps.md#onpointerup) *** ### onPointerUpCapture? > `optional` **onPointerUpCapture**: `PointerEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onPointerUpCapture`](InputCellProps.md#onpointerupcapture) *** ### onProgress? > `optional` **onProgress**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onProgress`](InputCellProps.md#onprogress) *** ### onProgressCapture? > `optional` **onProgressCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onProgressCapture`](InputCellProps.md#onprogresscapture) *** ### onRateChange? > `optional` **onRateChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onRateChange`](InputCellProps.md#onratechange) *** ### onRateChangeCapture? > `optional` **onRateChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onRateChangeCapture`](InputCellProps.md#onratechangecapture) *** ### onReset? > `optional` **onReset**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onReset`](InputCellProps.md#onreset) *** ### onResetCapture? > `optional` **onResetCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onResetCapture`](InputCellProps.md#onresetcapture) *** ### onResize? > `optional` **onResize**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onResize`](InputCellProps.md#onresize) *** ### onResizeCapture? > `optional` **onResizeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onResizeCapture`](InputCellProps.md#onresizecapture) *** ### onScroll? > `optional` **onScroll**: `UIEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onScroll`](InputCellProps.md#onscroll) *** ### onScrollCapture? > `optional` **onScrollCapture**: `UIEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onScrollCapture`](InputCellProps.md#onscrollcapture) *** ### onSeeked? > `optional` **onSeeked**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onSeeked`](InputCellProps.md#onseeked) *** ### onSeekedCapture? > `optional` **onSeekedCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onSeekedCapture`](InputCellProps.md#onseekedcapture) *** ### onSeeking? > `optional` **onSeeking**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onSeeking`](InputCellProps.md#onseeking) *** ### onSeekingCapture? > `optional` **onSeekingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onSeekingCapture`](InputCellProps.md#onseekingcapture) *** ### onSelect? > `optional` **onSelect**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onSelect`](InputCellProps.md#onselect) *** ### onSelectCapture? > `optional` **onSelectCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onSelectCapture`](InputCellProps.md#onselectcapture) *** ### onStalled? > `optional` **onStalled**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onStalled`](InputCellProps.md#onstalled) *** ### onStalledCapture? > `optional` **onStalledCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onStalledCapture`](InputCellProps.md#onstalledcapture) *** ### onSubmit? > `optional` **onSubmit**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onSubmit`](InputCellProps.md#onsubmit) *** ### onSubmitCapture? > `optional` **onSubmitCapture**: `FormEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onSubmitCapture`](InputCellProps.md#onsubmitcapture) *** ### onSuspend? > `optional` **onSuspend**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onSuspend`](InputCellProps.md#onsuspend) *** ### onSuspendCapture? > `optional` **onSuspendCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onSuspendCapture`](InputCellProps.md#onsuspendcapture) *** ### onTimeUpdate? > `optional` **onTimeUpdate**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTimeUpdate`](InputCellProps.md#ontimeupdate) *** ### onTimeUpdateCapture? > `optional` **onTimeUpdateCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTimeUpdateCapture`](InputCellProps.md#ontimeupdatecapture) *** ### onToggle? > `optional` **onToggle**: `ToggleEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onToggle`](InputCellProps.md#ontoggle) *** ### onTouchCancel? > `optional` **onTouchCancel**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTouchCancel`](InputCellProps.md#ontouchcancel) *** ### onTouchCancelCapture? > `optional` **onTouchCancelCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTouchCancelCapture`](InputCellProps.md#ontouchcancelcapture) *** ### onTouchEnd? > `optional` **onTouchEnd**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTouchEnd`](InputCellProps.md#ontouchend) *** ### onTouchEndCapture? > `optional` **onTouchEndCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTouchEndCapture`](InputCellProps.md#ontouchendcapture) *** ### onTouchMove? > `optional` **onTouchMove**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTouchMove`](InputCellProps.md#ontouchmove) *** ### onTouchMoveCapture? > `optional` **onTouchMoveCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTouchMoveCapture`](InputCellProps.md#ontouchmovecapture) *** ### onTouchStart? > `optional` **onTouchStart**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTouchStart`](InputCellProps.md#ontouchstart) *** ### onTouchStartCapture? > `optional` **onTouchStartCapture**: `TouchEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTouchStartCapture`](InputCellProps.md#ontouchstartcapture) *** ### onTransitionCancel? > `optional` **onTransitionCancel**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTransitionCancel`](InputCellProps.md#ontransitioncancel) *** ### onTransitionCancelCapture? > `optional` **onTransitionCancelCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTransitionCancelCapture`](InputCellProps.md#ontransitioncancelcapture) *** ### onTransitionEnd? > `optional` **onTransitionEnd**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTransitionEnd`](InputCellProps.md#ontransitionend) *** ### onTransitionEndCapture? > `optional` **onTransitionEndCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTransitionEndCapture`](InputCellProps.md#ontransitionendcapture) *** ### onTransitionRun? > `optional` **onTransitionRun**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTransitionRun`](InputCellProps.md#ontransitionrun) *** ### onTransitionRunCapture? > `optional` **onTransitionRunCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTransitionRunCapture`](InputCellProps.md#ontransitionruncapture) *** ### onTransitionStart? > `optional` **onTransitionStart**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTransitionStart`](InputCellProps.md#ontransitionstart) *** ### onTransitionStartCapture? > `optional` **onTransitionStartCapture**: `TransitionEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTransitionStartCapture`](InputCellProps.md#ontransitionstartcapture) *** ### onTreeToggle()? > `optional` **onTreeToggle**: (`rowKey`?, `rowIndex`?, `rowData`?, `event`?) => `void` #### Parameters • **rowKey?**: `string` \| `number` • **rowIndex?**: `number` • **rowData?**: `RowDataType`\<`any`\> • **event?**: `MouseEvent`\<`Element`, `MouseEvent`\> #### Returns `void` #### Inherited from [`InputCellProps`](InputCellProps.md).[`onTreeToggle`](InputCellProps.md#ontreetoggle) *** ### onVolumeChange? > `optional` **onVolumeChange**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onVolumeChange`](InputCellProps.md#onvolumechange) *** ### onVolumeChangeCapture? > `optional` **onVolumeChangeCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onVolumeChangeCapture`](InputCellProps.md#onvolumechangecapture) *** ### onWaiting? > `optional` **onWaiting**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onWaiting`](InputCellProps.md#onwaiting) *** ### onWaitingCapture? > `optional` **onWaitingCapture**: `ReactEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onWaitingCapture`](InputCellProps.md#onwaitingcapture) *** ### onWheel? > `optional` **onWheel**: `WheelEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onWheel`](InputCellProps.md#onwheel) *** ### onWheelCapture? > `optional` **onWheelCapture**: `WheelEventHandler`\<`HTMLElement`\> #### Inherited from [`InputCellProps`](InputCellProps.md).[`onWheelCapture`](InputCellProps.md#onwheelcapture) *** ### options > **options**: [`LabeledValue`](../../core/interfaces/LabeledValue.md)[] The select options. *** ### popover? > `optional` **popover**: `""` \| `"auto"` \| `"manual"` #### Inherited from [`InputCellProps`](InputCellProps.md).[`popover`](InputCellProps.md#popover) *** ### popoverTarget? > `optional` **popoverTarget**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`popoverTarget`](InputCellProps.md#popovertarget) *** ### popoverTargetAction? > `optional` **popoverTargetAction**: `"toggle"` \| `"show"` \| `"hide"` #### Inherited from [`InputCellProps`](InputCellProps.md).[`popoverTargetAction`](InputCellProps.md#popovertargetaction) *** ### predefinedStyle? > `optional` **predefinedStyle**: `CSSProperties` #### Inherited from [`InputCellProps`](InputCellProps.md).[`predefinedStyle`](InputCellProps.md#predefinedstyle) *** ### prefix? > `optional` **prefix**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`prefix`](InputCellProps.md#prefix) *** ### property? > `optional` **property**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`property`](InputCellProps.md#property) *** ### radioGroup? > `optional` **radioGroup**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`radioGroup`](InputCellProps.md#radiogroup) *** ### rel? > `optional` **rel**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`rel`](InputCellProps.md#rel) *** ### removed? > `optional` **removed**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`removed`](InputCellProps.md#removed) *** ### renderCell()? > `optional` **renderCell**: (`contentChildren`) => `ReactNode` #### Parameters • **contentChildren**: `any` #### Returns `ReactNode` #### Inherited from [`InputCellProps`](InputCellProps.md).[`renderCell`](InputCellProps.md#rendercell) *** ### renderTreeToggle()? > `optional` **renderTreeToggle**: (`expandButton`, `rowData`?, `expanded`?) => `ReactNode` #### Parameters • **expandButton**: `ReactNode` • **rowData?**: `RowDataType`\<`any`\> • **expanded?**: `boolean` #### Returns `ReactNode` #### Inherited from [`InputCellProps`](InputCellProps.md).[`renderTreeToggle`](InputCellProps.md#rendertreetoggle) *** ### resource? > `optional` **resource**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`resource`](InputCellProps.md#resource) *** ### results? > `optional` **results**: `number` #### Inherited from [`InputCellProps`](InputCellProps.md).[`results`](InputCellProps.md#results) *** ### rev? > `optional` **rev**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`rev`](InputCellProps.md#rev) *** ### role? > `optional` **role**: `AriaRole` #### Inherited from [`InputCellProps`](InputCellProps.md).[`role`](InputCellProps.md#role) *** ### rowData > **rowData**: `RowDataType`\<`any`\> Rows data. #### Inherited from [`InputCellProps`](InputCellProps.md).[`rowData`](InputCellProps.md#rowdata) *** ### rowIndex? > `optional` **rowIndex**: `number` Row Number #### Inherited from [`InputCellProps`](InputCellProps.md).[`rowIndex`](InputCellProps.md#rowindex) *** ### rowKey? > `optional` **rowKey**: `string` \| `number` #### Inherited from [`InputCellProps`](InputCellProps.md).[`rowKey`](InputCellProps.md#rowkey) *** ### rowSpan? > `optional` **rowSpan**: `number` #### Inherited from [`InputCellProps`](InputCellProps.md).[`rowSpan`](InputCellProps.md#rowspan) *** ### security? > `optional` **security**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`security`](InputCellProps.md#security) *** ### slot? > `optional` **slot**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`slot`](InputCellProps.md#slot) *** ### spellCheck? > `optional` **spellCheck**: `Booleanish` #### Inherited from [`InputCellProps`](InputCellProps.md).[`spellCheck`](InputCellProps.md#spellcheck) *** ### style? > `optional` **style**: `CSSProperties` Additional style #### Inherited from [`InputCellProps`](InputCellProps.md).[`style`](InputCellProps.md#style) *** ### suppressContentEditableWarning? > `optional` **suppressContentEditableWarning**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`suppressContentEditableWarning`](InputCellProps.md#suppresscontenteditablewarning) *** ### suppressHydrationWarning? > `optional` **suppressHydrationWarning**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`suppressHydrationWarning`](InputCellProps.md#suppresshydrationwarning) *** ### tabIndex? > `optional` **tabIndex**: `number` #### Inherited from [`InputCellProps`](InputCellProps.md).[`tabIndex`](InputCellProps.md#tabindex) *** ### title? > `optional` **title**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`title`](InputCellProps.md#title) *** ### translate? > `optional` **translate**: `"yes"` \| `"no"` #### Inherited from [`InputCellProps`](InputCellProps.md).[`translate`](InputCellProps.md#translate) *** ### treeCol? > `optional` **treeCol**: `boolean` #### Inherited from [`InputCellProps`](InputCellProps.md).[`treeCol`](InputCellProps.md#treecol) *** ### type > **type**: `string` The input type. #### Inherited from [`InputCellProps`](InputCellProps.md).[`type`](InputCellProps.md#type) *** ### typeof? > `optional` **typeof**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`typeof`](InputCellProps.md#typeof) *** ### unselectable? > `optional` **unselectable**: `"off"` \| `"on"` #### Inherited from [`InputCellProps`](InputCellProps.md).[`unselectable`](InputCellProps.md#unselectable) *** ### verticalAlign? > `optional` **verticalAlign**: `"bottom"` \| `"top"` \| `AlignItems` \| `"middle"` #### Inherited from [`InputCellProps`](InputCellProps.md).[`verticalAlign`](InputCellProps.md#verticalalign) *** ### vocab? > `optional` **vocab**: `string` #### Inherited from [`InputCellProps`](InputCellProps.md).[`vocab`](InputCellProps.md#vocab) *** ### width? > `optional` **width**: `number` #### Inherited from [`InputCellProps`](InputCellProps.md).[`width`](InputCellProps.md#width) *** ### wordWrap? > `optional` **wordWrap**: `boolean` \| `"break-all"` \| `"break-word"` \| `"keep-all"` #### Inherited from [`InputCellProps`](InputCellProps.md).[`wordWrap`](InputCellProps.md#wordwrap) --- # Type Alias: ComputePropertiesParameters > **ComputePropertiesParameters**: `object` The parameter type of the component property value parameters. ## Type declaration ### function > **function**: `never` Function parameters. ### localization > **localization**: [`LocalizationComputeCodeParams`](LocalizationComputeCodeParams.md) Localization parameters. --- # Type Alias: ComputeTypeParams\ > **ComputeTypeParams**\<`T`\>: [`ComputePropertiesParameters`](ComputePropertiesParameters.md)\[`T`\] The compute type parameters. ## Type Parameters • **T** *extends* [`ComponentPropertyComputeType`](../../core/type-aliases/ComponentPropertyComputeType.md) the component property value type. --- # Type Alias: CustomizableKey > **CustomizableKey**: *typeof* [`CustomizableZone`](../variables/CustomizableZone.md) *extends* `Set`\ ? `U` : `never` The available keys of the customizable components. --- # Type Alias: CustomizationMap > **CustomizationMap**: `Partial`\<`Record`\<[`CustomizableKey`](CustomizableKey.md), [`Options`](Options.md)\>\> The map of customizations for the FormBuilder components. --- # Type Alias: FormBuilderI18n > **FormBuilderI18n**: `object` The i18n data of the form builder. ## Type declaration ### getData() > **getData**: (`languageFullCode`) => `Promise`\<[`FormBuilderI18nData`](FormBuilderI18nData.md)\> The callback function called when loading data for i18n. Accepts the full code (en-US, en-GB, etc.) of a language. #### Parameters • **languageFullCode**: `string` #### Returns `Promise`\<[`FormBuilderI18nData`](FormBuilderI18nData.md)\> ### languages > **languages**: [`Language`](../../core/classes/Language.md)[] The languages. --- # Type Alias: FormBuilderI18nData > **FormBuilderI18nData**: `object` Data required to translate the form builder interface. ## Type declaration ### componentsLocale? > `optional` **componentsLocale**: `any` The locale for translating rSuite components https://rsuitejs.com/guide/i18n/#supported-locales. ### data > **data**: `any` The JSON with translation. --- # Type Alias: FormBuilderTheme > **FormBuilderTheme**: `"light"` \| `"dark"` \| `"system"` Indicates the theme preference. --- # Type Alias: LocalizationComputeCodeParams > **LocalizationComputeCodeParams**: `object` Localization compute parameters. ## Type declaration ### langCode? > `optional` **langCode**: [`LanguageFullCode`](../../core/type-aliases/LanguageFullCode.md) The full language code. --- # Type Alias: Options > **Options**: `object` Customization options for the FormBuilder component. ## Type declaration ### className? > `optional` **className**: `string` The component className. ### customRenderer()? > `optional` **customRenderer**: (`defaultElement`, `component`, `props`) => `ReactElement` The component custom renderer. #### Parameters • **defaultElement**: `ReactElement` the default rendering result. • **component**: `ComponentType`\<`any`\> the React component. • **props**: `any` the props that were sent to the component. #### Returns `ReactElement` the customized ReactElement. ### hidden? > `optional` **hidden**: `boolean` True if you want to hide the component. ### style? > `optional` **style**: `CSSProperties` \| `string` The component style. Supported formats - CSSProperties object, standard CSS as string, nested selectors. --- # Variable: CustomizableZone > `const` **CustomizableZone**: `Set`\<`string`\> Set with names of all customizable zones. --- # Class: ActionDefinition Represents the definition of an action. ## Constructors ### new ActionDefinition() > **new ActionDefinition**(`func`, `body`?, `params`?): [`ActionDefinition`](ActionDefinition.md) Creates a new instance of the ActionDefinition class. #### Parameters • **func**: [`Func`](../../core/type-aliases/Func.md) the function of an action. • **body?**: `string` the source code of the Action. • **params?**: [`ActionParameters`](../../core/type-aliases/ActionParameters.md) = `{}` the parameters of the Action. #### Returns [`ActionDefinition`](ActionDefinition.md) ## Properties ### body? > `readonly` `optional` **body**: `string` the source code of the Action. *** ### func > `readonly` **func**: [`Func`](../../core/type-aliases/Func.md) the function of an action. *** ### params > `readonly` **params**: [`ActionParameters`](../../core/type-aliases/ActionParameters.md) = `{}` the parameters of the Action. ## Methods ### createFromObject() > `static` **createFromObject**(`value`): [`ActionDefinition`](ActionDefinition.md) Correctly creates the [ActionDefinition](ActionDefinition.md) from deserialized data. #### Parameters • **value**: `any` the deserialized data. #### Returns [`ActionDefinition`](ActionDefinition.md) the ActionDefinition instance. *** ### functionalAction() > `static` **functionalAction**(`func`, `params`): [`ActionDefinition`](ActionDefinition.md) Creates an action from the function. #### Parameters • **func**: [`Func`](../../core/type-aliases/Func.md) the function of an action. • **params**: [`ActionParameters`](../../core/type-aliases/ActionParameters.md) = `{}` the parameters of the Action. #### Returns [`ActionDefinition`](ActionDefinition.md) the new instance of the ActionDefinition class. *** ### sourceAction() > `static` **sourceAction**(`body`, `params`): [`ActionDefinition`](ActionDefinition.md) Creates an action from the source code. #### Parameters • **body**: `string` the source code of the Action. • **params**: [`ActionParameters`](../../core/type-aliases/ActionParameters.md) = `{}` the parameters of the Action. #### Returns [`ActionDefinition`](ActionDefinition.md) the new instance of the ActionDefinition class. --- # Class: Language The language to localize the form builder. ## Constructors ### new Language() > **new Language**(`code`, `dialect`, `name`, `description`, `bidi`): [`Language`](Language.md) Creates a localization language for the form builder. #### Parameters • **code**: `string` the language code, for example, 'en'. • **dialect**: `string` the dialect code, for example, 'US'. • **name**: `string` the name of the language, for example 'English'. • **description**: `string` the description of the language, for example 'American English'. • **bidi**: [`BiDi`](../../core/enumerations/BiDi.md) = `BiDi.LTR` the type of text layout, for example, BiDi.LTR. #### Returns [`Language`](Language.md) ## Properties ### bidi > `readonly` **bidi**: [`BiDi`](../../core/enumerations/BiDi.md) = `BiDi.LTR` the type of text layout, for example, BiDi.LTR. *** ### code > `readonly` **code**: `string` the language code, for example, 'en'. *** ### description > `readonly` **description**: `string` the description of the language, for example 'American English'. *** ### dialect > `readonly` **dialect**: `string` the dialect code, for example, 'US'. *** ### name > `readonly` **name**: `string` the name of the language, for example 'English'. ## Accessors ### fullCode #### Get Signature > **get** **fullCode**(): \`$\{string\}-$\{string\}\` ##### Returns \`$\{string\}-$\{string\}\` Full code of the Language i.e en-US, en-GB etc. ## Methods ### clone() > `static` **clone**(`source`): [`Language`](Language.md) Clones an existing instance of the language. #### Parameters • **source**: [`Language`](Language.md) the cloning object. #### Returns [`Language`](Language.md) the object clone. --- # Function: buildForm() > **buildForm**(`options`?): [`IFormJsonBuilder`](../../core/interfaces/IFormJsonBuilder.md) Creates and returns a new form JSON builder instance. ## Parameters • **options?**: [`FormOptions`](../../core/type-aliases/FormOptions.md) the optional configuration options for the form. ## Returns [`IFormJsonBuilder`](../../core/interfaces/IFormJsonBuilder.md) the instance of [IFormJsonBuilder](../../core/interfaces/IFormJsonBuilder.md) to start building the form. --- # Function: renderFormBuilder() > **renderFormBuilder**(`elementId`, `props`): `Root` Displays the FormBuilder component on the specified HTML element. ## Parameters • **elementId**: `string` the HTML element identifier. • **props**: `Partial`\<[`FormBuilderProps`](../../designer/interfaces/FormBuilderProps.md)\> the component properties. ## Returns `Root` React Root. --- # Function: renderFormBuilderTo() > **renderFormBuilderTo**(`container`, `props`): `Root` Displays the FormBuilder component on the specified HTML element. ## Parameters • **container**: `HTMLElement` the HTML element. • **props**: `Partial`\<[`FormBuilderProps`](../../designer/interfaces/FormBuilderProps.md)\> the component properties. ## Returns `Root` React Root. --- # @react-form-builder/designer-bundle ## Classes - [ActionDefinition](classes/ActionDefinition.md) - [Language](classes/Language.md) ## Functions - [buildForm](functions/buildForm.md) - [renderFormBuilder](functions/renderFormBuilder.md) - [renderFormBuilderTo](functions/renderFormBuilderTo.md) --- # Class: ActionDefinition Represents the definition of an action. ## Constructors ### new ActionDefinition() > **new ActionDefinition**(`func`, `body`?, `params`?): [`ActionDefinition`](ActionDefinition.md) Creates a new instance of the ActionDefinition class. #### Parameters • **func**: [`Func`](../../core/type-aliases/Func.md) the function of an action. • **body?**: `string` the source code of the Action. • **params?**: [`ActionParameters`](../../core/type-aliases/ActionParameters.md) = `{}` the parameters of the Action. #### Returns [`ActionDefinition`](ActionDefinition.md) ## Properties ### body? > `readonly` `optional` **body**: `string` the source code of the Action. *** ### func > `readonly` **func**: [`Func`](../../core/type-aliases/Func.md) the function of an action. *** ### params > `readonly` **params**: [`ActionParameters`](../../core/type-aliases/ActionParameters.md) = `{}` the parameters of the Action. ## Methods ### createFromObject() > `static` **createFromObject**(`value`): [`ActionDefinition`](ActionDefinition.md) Correctly creates the [ActionDefinition](ActionDefinition.md) from deserialized data. #### Parameters • **value**: `any` the deserialized data. #### Returns [`ActionDefinition`](ActionDefinition.md) the ActionDefinition instance. *** ### functionalAction() > `static` **functionalAction**(`func`, `params`): [`ActionDefinition`](ActionDefinition.md) Creates an action from the function. #### Parameters • **func**: [`Func`](../../core/type-aliases/Func.md) the function of an action. • **params**: [`ActionParameters`](../../core/type-aliases/ActionParameters.md) = `{}` the parameters of the Action. #### Returns [`ActionDefinition`](ActionDefinition.md) the new instance of the ActionDefinition class. *** ### sourceAction() > `static` **sourceAction**(`body`, `params`): [`ActionDefinition`](ActionDefinition.md) Creates an action from the source code. #### Parameters • **body**: `string` the source code of the Action. • **params**: [`ActionParameters`](../../core/type-aliases/ActionParameters.md) = `{}` the parameters of the Action. #### Returns [`ActionDefinition`](ActionDefinition.md) the new instance of the ActionDefinition class. --- # Class: Language The language to localize the form builder. ## Constructors ### new Language() > **new Language**(`code`, `dialect`, `name`, `description`, `bidi`): [`Language`](Language.md) Creates a localization language for the form builder. #### Parameters • **code**: `string` the language code, for example, 'en'. • **dialect**: `string` the dialect code, for example, 'US'. • **name**: `string` the name of the language, for example 'English'. • **description**: `string` the description of the language, for example 'American English'. • **bidi**: [`BiDi`](../../core/enumerations/BiDi.md) = `BiDi.LTR` the type of text layout, for example, BiDi.LTR. #### Returns [`Language`](Language.md) ## Properties ### bidi > `readonly` **bidi**: [`BiDi`](../../core/enumerations/BiDi.md) = `BiDi.LTR` the type of text layout, for example, BiDi.LTR. *** ### code > `readonly` **code**: `string` the language code, for example, 'en'. *** ### description > `readonly` **description**: `string` the description of the language, for example 'American English'. *** ### dialect > `readonly` **dialect**: `string` the dialect code, for example, 'US'. *** ### name > `readonly` **name**: `string` the name of the language, for example 'English'. ## Accessors ### fullCode #### Get Signature > **get** **fullCode**(): \`$\{string\}-$\{string\}\` ##### Returns \`$\{string\}-$\{string\}\` Full code of the Language i.e en-US, en-GB etc. ## Methods ### clone() > `static` **clone**(`source`): [`Language`](Language.md) Clones an existing instance of the language. #### Parameters • **source**: [`Language`](Language.md) the cloning object. #### Returns [`Language`](Language.md) the object clone. --- # Function: buildForm() > **buildForm**(`options`?): [`IFormJsonBuilder`](../../core/interfaces/IFormJsonBuilder.md) Creates and returns a new form JSON builder instance. ## Parameters • **options?**: [`FormOptions`](../../core/type-aliases/FormOptions.md) the optional configuration options for the form. ## Returns [`IFormJsonBuilder`](../../core/interfaces/IFormJsonBuilder.md) the instance of [IFormJsonBuilder](../../core/interfaces/IFormJsonBuilder.md) to start building the form. --- # Function: renderFormViewer() > **renderFormViewer**(`elementId`, `props`): `Root` Displays the FormViewer component on the specified HTML element. ## Parameters • **elementId**: `string` the HTML element identifier. • **props**: `Partial`\<[`FormViewerProps`](../../core/interfaces/FormViewerProps.md)\> the component properties. ## Returns `Root` React Root. --- # Function: renderFormViewerTo() > **renderFormViewerTo**(`container`, `props`): `Root` Displays the FormViewer component on the specified HTML element. ## Parameters • **container**: `HTMLElement` the HTML element. • **props**: `Partial`\<[`FormViewerProps`](../../core/interfaces/FormViewerProps.md)\> the component properties. ## Returns `Root` React Root. --- # @react-form-builder/viewer-bundle ## Namespaces - [rSuiteComponents](namespaces/rSuiteComponents/index.md) ## Classes - [ActionDefinition](classes/ActionDefinition.md) - [Language](classes/Language.md) ## Functions - [buildForm](functions/buildForm.md) - [renderFormViewer](functions/renderFormViewer.md) - [renderFormViewerTo](functions/renderFormViewerTo.md) --- # Function: RsLocalizationWrapper() > **RsLocalizationWrapper**(`props`): `Element` Wrapper component for RSuite components localization. ## Parameters • **props**: [`FormViewerWrapperComponentProps`](../../../../core/interfaces/FormViewerWrapperComponentProps.md) the component props. ## Returns `Element` the wrapped components with localization settings applied. --- # Function: formEngineRsuiteCssLoader() > **formEngineRsuiteCssLoader**(): `Promise`\<`void`\> Loads FormEngine specific styles over "rsuite" library. ## Returns `Promise`\<`void`\> the Promise that resolves when the custom styles have been loaded successfully. --- # Function: ltrCssLoader() > **ltrCssLoader**(): `Promise`\<`void`\> Loads the Left-To-Right (LTR) CSS for the "rsuite" library. ## Returns `Promise`\<`void`\> the Promise that resolves when the LTR CSS has been loaded successfully. --- # Function: rtlCssLoader() > **rtlCssLoader**(): `Promise`\<`void`\> Loads the Right-to-Left (RTL) CSS for the "rsuite" library. ## Returns `Promise`\<`void`\> the Promise that resolves when the RTL CSS has been loaded successfully. --- # rSuiteComponents ## Index ### Interfaces - [RsErrorMessageProps](interfaces/RsErrorMessageProps.md) - [RsTooltipProps](interfaces/RsTooltipProps.md) ### Variables - [builderViewWithCss](variables/builderViewWithCss.md) - [models](variables/models.md) - [rSuiteComponents](variables/rSuiteComponents.md) - [rsErrorMessage](variables/rsErrorMessage.md) - [rsTooltip](variables/rsTooltip.md) - [view](variables/view.md) - [viewWithCss](variables/viewWithCss.md) ### Functions - [RsLocalizationWrapper](functions/RsLocalizationWrapper.md) - [formEngineRsuiteCssLoader](functions/formEngineRsuiteCssLoader.md) - [ltrCssLoader](functions/ltrCssLoader.md) - [rtlCssLoader](functions/rtlCssLoader.md) --- # Interface: RsErrorMessageProps The properties of RsErrorMessage component. ## Extends - [`ErrorWrapperProps`](../../../../core/interfaces/ErrorWrapperProps.md) ## Properties ### children? > `optional` **children**: `ReactNode` The wrapped component. #### Inherited from [`ErrorWrapperProps`](../../../../core/interfaces/ErrorWrapperProps.md).[`children`](../../../../core/interfaces/ErrorWrapperProps.md#children) *** ### className? > `optional` **className**: `string` The CSS class name. #### Inherited from [`ErrorWrapperProps`](../../../../core/interfaces/ErrorWrapperProps.md).[`className`](../../../../core/interfaces/ErrorWrapperProps.md#classname) *** ### error? > `optional` **error**: `string` The error text. #### Inherited from [`ErrorWrapperProps`](../../../../core/interfaces/ErrorWrapperProps.md).[`error`](../../../../core/interfaces/ErrorWrapperProps.md#error) *** ### placement? > `optional` **placement**: `Placement8` The placement of an error message. --- # Interface: RsTooltipProps The properties of RsTooltip component. ## Extends - [`WrapperProps`](../../../../core/interfaces/WrapperProps.md) ## Properties ### children > **children**: `ReactNode` The React child node. #### Inherited from [`WrapperProps`](../../../../core/interfaces/WrapperProps.md).[`children`](../../../../core/interfaces/WrapperProps.md#children) *** ### className? > `optional` **className**: `string` The CSS class name. #### Inherited from [`WrapperProps`](../../../../core/interfaces/WrapperProps.md).[`className`](../../../../core/interfaces/WrapperProps.md#classname) *** ### placement > **placement**: `Placement` The placement of a tooltip. *** ### text > **text**: `string` The tooltip text. *** ### trigger > **trigger**: `OverlayTriggerType` The tooltip trigger. --- # Variable: builderViewWithCss > `const` **builderViewWithCss**: [`BuilderView`](../../../../core/classes/BuilderView.md) An assembled set of rSuite components metadata, ready to be passed as a property to the FormBuilder. This view contains CSS loaders. --- # Variable: models > `const` **models**: [`Model`](../../../../core/classes/Model.md)\<`any`\>[] An array of rSuite component metadata for use in FormViewer. --- # Variable: rSuiteComponents > `const` **rSuiteComponents**: [`Definer`](../../../../core/classes/Definer.md)\<`any`\>[] = `[]` An array of rSuite component metadata factories. --- # Variable: rsErrorMessage > `const` **rsErrorMessage**: [`Definer`](../../../../core/classes/Definer.md)\<[`RsErrorMessageProps`](../interfaces/RsErrorMessageProps.md)\> Metadata builder for rSuite-based error display component. --- # Variable: rsTooltip > `const` **rsTooltip**: [`Definer`](../../../../core/classes/Definer.md)\<[`RsTooltipProps`](../interfaces/RsTooltipProps.md)\> Metadata builder for rSuite-based tooltip display component. --- # Variable: view > `const` **view**: [`View`](../../../../core/classes/View.md) An assembled set of rSuite components, ready to be passed as a property to the FormViewer. --- # Variable: viewWithCss > `const` **viewWithCss**: [`View`](../../../../core/classes/View.md) An assembled set of rSuite components, ready to be passed as a property to the FormViewer. This view contains CSS loaders. --- # API reference ## Packages - [@react-form-builder/core](@react-form-builder/core/index.md) - [@react-form-builder/designer](@react-form-builder/designer/index.md) - [@react-form-builder/designer-bundle](@react-form-builder/designer-bundle/index.md) - [@react-form-builder/viewer-bundle](@react-form-builder/viewer-bundle/index.md) - [@react-form-builder/components-fast-qr](@react-form-builder/components-fast-qr/index.md) - [@react-form-builder/components-rich-text](@react-form-builder/components-rich-text/index.md) - [@react-form-builder/components-google-map](@react-form-builder/components-google-map/index.md) - [@react-form-builder/components-rsuite](@react-form-builder/components-rsuite/index.md) - [@react-form-builder/components-signature](@react-form-builder/components-signature/index.md) --- At the bottom of the _Main_ properties menu, you can find additional options: - Render When: Provides conditional rendering for your calendar as described in [the corresponding chapter](/conditional-rendering). - HTML attributes: Allows you to provide [custom HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) for your form. --- Not used in the components library. Available for connection via API [custom-components](/custom-components). --- - **For Device**: You can provide component's style customization for all devices or specific devices by using this dropdown list. Refer to [Adaptive Layout](/adaptive-layout) for more details. --- import StyleWrapper from './\_style-wrapper.mdx'; import StyleForDevice from './\_style-for-device.mdx' These are properties that allow to customize the size, color and other style properties of your component: - **Component > Class Name**: Add a class name for your component for the subsequent styling if necessary. --- - **Wrapper**: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the _For Device_ property: | Name | Type | Description | |:-----------------------------|:---------|:-----------------------------------------| | Width | `number` | Specifies the width for your component | | Height | `number` | Specifies the height for your component | | Margin top/right/bottom/left | `number` | Margin values for you component | | Color | `string` | Allows customizing the text color | | Background color | `string` | Enables customizing the background color | --- # Calendar URL: https://formengine.io/documentation/components-library/fields/calendar import StyleBlock from '../_style-props.mdx'; import AdditionalOptions from '../_additional-options.mdx'; ## Introduction The [Calendar](https://rsuitejs.com/components/calendar/) component, as its name suggests, enables you to add a calendar to your form. This component displays your provided data in a calendar format and allows you to customize calendar's appearance and behavior by modifying various properties. This component enables users to easily select dates and time ranges for form fields, such as scheduling appointments or events. Additionally, the calendar component can prevent invalid date entries, ensuring accurate data collection. This component is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). The following instructions showcase configuration and customization of the calendar component. Explore the various properties and options available to tailor its behavior and appearance to your requirements. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:--------------|:----------|:--------------------------------------------------------------------------------------------------------------------| | Label | `string` | Provide a title for your component | | Key | `string` | A unique key (name) for you calendar | | Bordered | `boolean` | Adds visible borders when checked | | Compact | `string` | Makes your calendar compact (smaller) when checked | | Default value | `Date` | Sets a default value (default date) for your calendar | | Read Only | `boolean` | If set to _true_, makes your checkbox unavailable to interact with | | Iso week | `boolean` | Enables [ISO 8601 standard](https://en.wikipedia.org/wiki/ISO_week_date), starts each week with Monday when checked | | Value | `Date` | Sets a controlled value (selected date) for your calendar | ## Style properties --- # Checkbox URL: https://formengine.io/documentation/components-library/fields/checkbox import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The [Checkbox](https://rsuitejs.com/components/checkbox/) component allows your users to confirm or agree with your provided statement. This component is useful for gathering a simple "yes" or "no" response to a question, such as agreeing to terms and conditions or opting in to a newsletter. Checkboxes can be also used in groups, which allow your users to select one or more values from a set. This component is a part of [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). You can customize a checkbox component to fit your needs by using available options and properties that are introduced and described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:--------------|:----------|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Label | `string` | Text that is displayed for your checkbox | | Checked | `boolean` | Makes your checkbox checked or unchecked by default | | Disabled | `boolean` | If set to _true_, makes your checkbox inactive | | Read Only | `boolean` | If set to _true_, makes your checkbox unavailable to interact with | | Indeterminate | `boolean` | When being a checkbox, setting styles after the child part is selected. In other words, when a checkbox is partially checked, this property controls whether to apply a specific visual style to it | | Inline | `boolean` | Switches to the inline layout | | Title | `string` | Used to enter HTML title for your checkbox | ## Style properties --- # DatePicker URL: https://formengine.io/documentation/components-library/fields/date-picker import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction [DatePicker](https://rsuitejs.com/components/date-picker/) represents a highly customizable component that allows users to enter and pick dates and times in different formats. Specifically, it provides a text input field and a calendar where users can manually enter their required date. You can configure this component to work with specific date format, restrict date ranges, change its appearance, and so on. This component is a part of [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). The following introduces and describes available properties and options for the DatePicker component. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-----------------------|:----------|:-----------------------------------------------------------------------------------------------------------------------------------------| | Label | `string` | Provide a title for your component | | Appearance | `choice` | Select either _subtle_ or _default_ appearance for the component. The subtle option removes borders for the input field and the calendar | | Calendar Default Value | `date` | Sets default date value for calendar panel | | Cleanable | `boolean` | If set to _true_, allows users to change specified date | | Default open | `boolean` | If set to _true_, the calendar will be opened for users by default. Otherwise, calendar will be opened upon clicking | | Default value | `boolean` | Sets default date value for the input field | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | If set to _true_, makes your checkbox unavailable to interact with | | Editable | `boolean` | If set to _true_, the date can be entered via the keyboard | | Format | `string` | Format of the date when rendered in the input (e.g., `yyyy-MM-dd`) | | ISO Week | `boolean` | Enables [ISO 8601 standard](https://en.wikipedia.org/wiki/ISO_week_date), starts each week with Monday when checked | | Limit End Year | `number` | Maximum selectable year based on the currently selected date | | Limit Start Year | `number` | Minimum selectable year based on the currently selected date | | One tap | `boolean` | One click to complete the selection value | | Open | `boolean` | Whether open the calendar; correlates with the _default open_ property | | Placeholder | `string` | Placeholder string | | Placement | `choice` | Select the placement of component (e.g., _bottom end_, _top start_, etc.) | | Prevent Overflow | `boolean` | Prevents floating element overflow | | Show meridian | `boolean` | If set to _true_, displays hours in 12 format | | Show week numbers | `boolean` | If set to _true_, displays week numbers | | Size | `choice` | Select the size of the input field (e.g., _large_, _small_, etc.) | | Value | `date` | Provide value for the input field | ## Style properties --- # Dropdown URL: https://formengine.io/documentation/components-library/fields/dropdown import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction Dropdown is a component that is used to create a list of predefined choices and options. It allows users to select a single option from the available choices by clicking on the dropdown. This component is particularly useful when there are multiple options to choose from, such as selecting a country, category, and so on. The dropdown component is based on [Input Picker](https://rsuitejs.com/components/input-picker/). It is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). This component can be customized to include a range of custom choices and also to change the format and appearance of the dropdown list by using various properties that are presented and described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:------------|:----------|:------------------------------------------------------------------------------------------------------------------------| | Label | `string` | Text that is displayed for the component | | Value | `string` | Sets default value for the component | | Placeholder | `string` | Placeholder string | | Placement | `choice` | Select the placement of component (e.g., _bottom end_, _top start_, etc.) | | Size | `choice` | Select the size of the input field (e.g., _large_, _small_, etc. ) | | Preload | `boolean` | If set to _true_, the data is downloaded in advance, before the user opens dropdown | | Data | `string` | Used to define _values_ and _labels_ for your dropdown list. Add more options by using the corresponding (**+**) button | | Cleanable | `boolean` | If set to _true_, allows users to clear their selection | | Creatable | `boolean` | If set to _true_, allows users to create and select their own option | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | If set to _true_, makes your component unavailable for users to interact with | | Group by | `string` | Used to specify the key; i.e., criteria for grouping data | ## Style properties --- # Google Map URL: https://formengine.io/documentation/components-library/fields/google-map import StyleBlock from '../_style-props.mdx'; import AdditionalOptions from '../_additional-options.mdx'; ## Introduction The [Google Map](https://developers.google.com/maps/documentation) component allows you to add an interactive map with customizable markers and controls to your form. It enables users to select locations, view map markers, and interact with the map by adding or changing markers. This component is included within the following NPM package: [@react-form-builder/components-google-map](https://www.npmjs.com/package/@react-form-builder/components-google-map). The following sections describe the configuration and customization options available for the Google Map component. Customize it to suit your specific needs by setting the various properties listed below. Also see [the guide](/enabling-google-maps-autocomplete) on how to use Google Maps to autocomplete an address. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-----------------------|:----------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------| | Label | `string` | Provide a title for your component | | Latitude | `number` | Sets the latitude of the map's center point | | Longitude | `number` | Sets the longitude of the map's center point | | Zoom | `number` | Controls the initial zoom level of the map | | API Key | `string` | Google Maps API key required to load the map | | Map ID | `string` | A map ID is an identifier that's associated with a specific map style or feature, [more info](https://developers.google.com/maps/documentation/get-map-id) | | Language | `string` | Specifies a language for map localization, [more info](https://developers.google.com/maps/documentation/javascript/localization) | | Region | `string` | Sets a specific map region, [more info](https://developers.google.com/maps/documentation/javascript/url-params) | | Color Scheme | `choice` | Sets the map's color theme (_DARK_, _LIGHT_, _FOLLOW_SYSTEM_) | | Map Type | `choice` | Specifies the default map type (_roadmap_, _satellite_, _terrain_, _hybrid_) | | Gesture Handling | `choice` | Defines how users can interact with the map via gestures (_none_, _auto_, _cooperative_, _greedy_) | | Show Map Control | `boolean` | Displays map control options when enabled | | Search placeholder | `string` | Placeholder text for the map search input | | Map Control Position | `choice` | Specifies the position of the map control (e.g., _top right_, _bottom left_) | | Add Marker on Search | `boolean` | If enabled, adds a marker when a search is performed | | Allow Multiple Markers | `boolean` | Enables multiple markers to be placed on the map. Default is _false_ | | Allow Changing Markers | `boolean` | If enabled, allows users to add, move, or delete markers | | Collision Behavior | `choice` | Manages how markers behave when they overlap | | Markers | `json` | Marker data | | Marker window title | `string` | Title for the marker window | | Remove marker caption | `string` | The caption on the marker removal button | ## Style properties --- # Input URL: https://formengine.io/documentation/components-library/fields/input import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction Input represents a text input field that allows users to enter and edit text. It provides a more flexible and customizable alternative to native HTML input controls, and can be used to collect user input, such as names, email addresses, or passwords. The input component is based on [Input and InputGroup](https://rsuitejs.com/components/input/). It is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). The Input component can be styled and configured to fit specific design and functionality requirements by using various properties that are presented and described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:--------------|:----------|:---------------------------------------------------------------------------------------------------------| | Label | `string` | Text that is displayed for the component | | Placeholder | `string` | Placeholder string | | Size | `choice` | Sets the size of the input field (e.g., _large_, _small_, etc. ) | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | If set to _true_, makes your component unavailable for users to interact with | | Value | `string` | Sets the default value for the input field | | Password mask | `boolean` | Adds an icon that displays and hides the password; especially helpful for creating password input fields | ## Style properties --- # Number format URL: https://formengine.io/documentation/components-library/fields/number-format import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction [Number format](https://www.npmjs.com/package/react-number-format) is a powerful input formatter that allows you to restrict and format user input to specific numeric or string patterns. This component is a part of [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). This component is used to format the input value for display, making it easier to work with and ensuring that users can only enter text valid for your specific use case. It also offers a range of features to help you control and customize user input. These include prefix, suffix, decimal and thousands separators, scales, and more. Additionally, the component is fully customizable, allowing you to tailor its behavior and appearance to meet your specific needs. The following introduces and describes available properties for this component. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:---------------------------|:----------|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Label | `string` | Provide a name for your input field | | Value | `string` | Enter default value for the input field | | Placeholder | `string` | Specify placeholder for the input field. Will not visible if a _Value_ is provided | | Size | `choice` | Select the component size from extra small to large | | Disabled | `boolean` | If set to _true_, disables the component | | Read Only | `boolean` | If set to _true_, makes the component unavailable for users to interact with | | Allowed decimal separators | `string` | Specifies the characters that can be used as decimal separators. Defaults to "." if left empty | | Allow leading zeroes | `boolean` | If set to _true_, allows the presence of leading zeroes in the input; otherwise, all leading zeroes are removed | | Allow negative | `boolean` | If set to _true_, allows the input of negative values by prefixing them with a minus sign ("-"); otherwise, only positive values are allowed | | Decimal scale | `number` | The number of decimal places to display and accept in the input value. For example, a decimal scale of "2" would allow up to two decimal places | | Decimal separator | `string` | Specifies the character used to separate the integer and fractional parts of a number | | Fixed decimal scale | `boolean` | If set to _true_, trailing zeroes will be added after decimal separators to match the specified decimal scale | | Prefix | `string` | Prepends given prefix character to the input value, can be used to provide measurement unit or any other prefix | | Suffix | `string` | Appends given suffix character to the input value, can be used to provide currency symbol or any other suffix | | Thousands group style | `choice` | Specifies the style for grouping thousands, such as _thousand_ (e.g., 123,456,789), indian _lakh_ (e.g., 12,34,56,789), chinese _wan_ (e.g., 1,2345,6789), or _none_ (no grouping) | | Thousand Separator | `string` | Specifies the character used to separate groups of thousands, such as a comma, a dot, etc. | ## Style properties --- # Pattern format URL: https://formengine.io/documentation/components-library/fields/pattern-format import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction [Pattern format](https://www.npmjs.com/package/react-number-format) represents a component that is used for formatting and displaying numbers and numeric values according to your specified pattern. This component is a part of [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). Pattern format is used to format numeric values, such as phone numbers, credit card numbers, or other types of numeric data. It takes a provided value as input and returns a formatted string that matches your provided configuration. By leveraging provided options and properties, you can create a customized format component that meets your specific use case and enhances your form. ## Main properties The properties located within the _Main_ tab. These allow you to provide general format configuration: | Name | Type | Description | |:-----------------------|:----------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Label | `string` | Provide a name for your input field | | Value | `string` | Enter default value for the input field | | Placeholder | `string` | Specify placeholder for the input field. Will not visible if a _Value_ is provided | | Size | `choice` | Select the component size from extra small to large | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | Makes the component read-only | | Format | `string` | Defines the format pattern using the # (or a _Pattern char_ ) character. `#` is the placeholder character for numbers | | Mask | `string` | Use this to specify a mask character for each numeric position. The mask character will be displayed until a numeric character is entered. You can use different mask characters for each position by providing an array of mask characters. **Important**: Make sure the number of mask characters matches the number of pattern characters | | Pattern char | `string` | Helps define the format pattern character; i.e., replace `#` | | Allow empty formatting | `boolean` | By default, PatternFormat component does not apply formatting when value is empty (`null`, `undefined` or empty string). If you want to apply formatting on empty values, set this to true | ## Style properties --- # Radio group URL: https://formengine.io/documentation/components-library/fields/radio-group import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction Radio group is used to define a collection of radio buttons that allow users to select one option from a list of choices. It is particularly helpful when there are multiple options available, but only one option should be selected at a time. Thus, each defined radio button represents a specific option, and only one option can be selected at a time. The radio group component is based on [RadioGroup](https://rsuitejs.com/components/radio/). It is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). This component can be customized to include a range of custom choices and also to change the appearance of the radio group by using various properties that are presented and described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-----------|:----------|:----------------------------------------------------------------------------------------------------------------------| | Name | `string` | Sets the name for the component | | Appearance | `choice` | Select either _default_ or _picker_ appearance for the radio group | | Label | `string` | Text that is displayed for the radio group component | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | If set to _true_, makes your component unavailable for users to interact with | | Items | `string` | Used to define _values_ and _labels_ for your radio group. Add more options by using the corresponding (**+**) button | | Value | `string` | Sets default value for the component | ## Style properties --- # Rich text editor URL: https://formengine.io/documentation/components-library/fields/rich-text-editor import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction RichTextEditor is a thin wrapper around the rich text editor [Quill](https://quilljs.com). This component is in a separate package [@react-form-builder/components-rich-text](https://www.npmjs.com/package/@react-form-builder/components-rich-text). ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:----------------|:---------|:-------------------------------------------------------------------------------------------------------------------------------| | Initial Value | `string` | Initial value for the editor | | Label | `string` | Provide a title for your component | | Placeholder | `string` | Placeholder string | | Read only | `string` | If set to _true_, makes your component unavailable for users to interact with | | Toolbar options | `choice` | Groups of buttons to display on the toolbar. The order in which the values are selected determines the order of the buttons | | Modules | `json` | Allows to customize the behavior and functionality of the editor. [Read docs](https://quilljs.com/docs/modules) for more info. | Example of a value for Modules property: ```json { "toolbar": [ [{ "header": [1, 2, 3, 4, 5, 6, false] }], ["bold", "italic", "underline", "strike"], [{ "list": "ordered" }, { "list": "bullet" }], [{ "script": "sub" }, { "script": "super" }], [{ "indent": "-1" }, { "indent": "+1" }], [{ "direction": "rtl" }], [{ "size": ["small", false, "large", "huge"] }], [{ "color": [] }, { "background": [] }], [{ "font": [] }], [{ "align": [] }], ["link", "image", "video"], ["clean"] ] } ``` ## Style properties --- # Search URL: https://formengine.io/documentation/components-library/fields/search import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The Search component represents a user interface element that allows users to search for specific information within your specified dataset. This component consists of an input field where users can enter their search query and a search button to initiate the search. It provides a convenient way for users to quickly find relevant information by filtering and narrowing down the available options. This component is based on [Input Picker](https://rsuitejs.com/components/input-picker/). It is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). You can customize this component to fit your needs by using available options and properties that are introduced and described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:------------|:----------|:------------------------------------------------------------------------------------------------------------------| | Label | `string` | Text that is displayed for your search component | | Value | `string` | Sets default value for the component | | Placeholder | `string` | Placeholder for the search field | | Placement | `choice` | Select the placement of component (e.g., _bottom end_, _top start_, etc.) | | Size | `choice` | Select the size of the input field (e.g., _large_, _small_, etc. ) | | Preload | `boolean` | If set to _true_, the data is downloaded in advance, before the user starts searching | | Data | `string` | Used to define _values_ and _labels_ for subsequent search. Add options by using the corresponding (**+**) button | | Cleanable | `boolean` | If set to _true_, allows users to clear their selection | | Creatable | `boolean` | If set to _true_, allows users to create and select their own data | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | If set to _true_, makes your component unavailable for users to interact with | | Group by | `string` | Used to specify the key; i.e., criteria for grouping data | ## Style properties --- # Signature URL: https://formengine.io/documentation/components-library/fields/signature import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The [Signature](https://www.npmjs.com/package/signature_pad) component is a digital signature field that enables users to create and capture handwritten signatures digitally. It provides a drawing area where users can sign their names using a mouse, touchpad, or other input devices. This feature is particularly useful for signing documents, forms, contracts, and more. This component is available as a standalone package, [@react-form-builder/components-signature](https://www.npmjs.com/package/@react-form-builder/components-signature), under a commercial license. For commercial use, please contact our sales team at [sales@optimajet.com](mailto:sales@optimajet.com). The signature component offers various customization properties such as options to adjust the thickness or color of the signature, select canvas color, and more. The following introduces and describes available properties and options of this component. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:------------------|:----------|:------------------------------------------------------------| | Value | `string` | Enter value for the component | | Label | `string` | Text that is displayed for the component | | Clear Button Text | `string` | Customize the text for clear button if necessary | | Width | `number` | The width of the signature component in pixels | | Height | `number` | The height of the signature component in pixels | | Line Width | `number` | The thickness of the pen stroke when drawing the signature | | Pen color | `color` | The color of the pen stroke when drawing the signature | | Background color | `color` | The canvas (drawing area) color of the signature component | | Read Only | `boolean` | If set to _true_, makes the component unavailable for users | ## Style properties --- # Tag picker URL: https://formengine.io/documentation/components-library/fields/tag-picker import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction [Tag picker](https://rsuitejs.com/components/tag-picker/) represents a dropdown list that allows users to select one or multiple tags from a predefined list. This component is specifically useful for forms where users need to categorize or label items with tags. The tag picker component consist of an input field that provides users with your defined tags. Users can select tags from the suggestions or enter their own custom tags in case the corresponding option is enabled. This component is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). This component provides a wide range of options and properties that change the behavior and the appearance of the tag picker. These properties are presented and described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:------------|:----------|:---------------------------------------------------------------------------------------------------------------| | Label | `string` | Text that is displayed for your component | | Value | `string` | Sets default value for the component | | Placeholder | `string` | Placeholder for the search field | | Placement | `choice` | Select the placement of component (e.g., _bottom end_, _top start_, etc.) | | Size | `choice` | Select the size of the input field (e.g., _large_, _small_, etc. ) | | Data | `string` | Used to define _values_ and _labels_ for available tags. Add options by using the corresponding (**+**) button | | Cleanable | `boolean` | If set to _true_, allows users to clear their selection | | Creatable | `boolean` | If set to _true_, allows users to create and select their own data | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | If set to _true_, makes your component unavailable for users to interact with | | Group by | `string` | Used to specify the key; i.e., criteria for grouping data | ## Style properties --- # Text area URL: https://formengine.io/documentation/components-library/fields/text-area import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction Text Area represents a component that allows users to enter and edit multiple lines of text. It provides a larger input field compared to a regular input, allowing users to enter longer paragraphs or multiline text. It is especially useful for collecting longer blocks of text, such as comments, descriptions, or feedback. This component is based on [Input](https://rsuitejs.com/components/input/). It is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). The text area component can be customized in terms of size, rows, placeholder text, and style to align with your design and requirements. The following introduces and describes available properties and customization options. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:------------|:----------|:---------------------------------------------------------------------------------| | Label | `string` | Text that is displayed for the component | | Value | `string` | Enter default value for the text area | | Placeholder | `string` | Specify placeholder for the text area. Will not visible if a _Value_ is provided | | Rows | `number` | Sets the number of displayed rows for the text area | | Size | `choice` | Sets the size of the text area (e.g., _large_, _small_, etc. ) | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | If set to _true_, makes your component unavailable for users to interact with | ## Style properties --- # TimePicker URL: https://formengine.io/documentation/components-library/fields/time-picker import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction [TimePicker](https://rsuitejs.com/components/date-picker/) represents a highly customizable component that allows users to enter and pick time in various formats. In particular, it provides a text input field and a selection element where users can select the desired time. You can customise this component to work with a specific time format, change its appearance, etc. This component is a part of [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). The following introduces and describes available properties and options for the TimePicker component. TimePicker component data is stored in `HH:mm:ss` format. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:--------------|:----------|:--------------------------------------------------------------------------| | Label | `string` | Provide a title for your component | | Placeholder | `string` | Placeholder string | | Value | `string` | Provide value for the input field | | Default value | `boolean` | Sets default time value for the input field | | Format | `string` | Format of the time when rendered in the input (e.g., `HH:mm:ss`) | | Editable | `boolean` | If set to _true_, the time can be entered via the keyboard | | Cleanable | `boolean` | If set to _true_, allows users to change specified time | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | If set to _true_, makes your checkbox unavailable to interact with | | Open | `boolean` | Whether the time selection window is open | | Placement | `choice` | Select the placement of component (e.g., _bottom end_, _top start_, etc.) | | Size | `choice` | Select the size of the input field (e.g., _large_, _small_, etc.) | ## Style properties --- # Toggle URL: https://formengine.io/documentation/components-library/fields/toggle import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The [Toggle](https://rsuitejs.com/components/toggle/) represents a binary switch that allows users to toggle between two states, typically representing an on/off or true/false condition. The toggle component provides a visual indicator and allows users to easily switch between the two states with a single click or tap. It is commonly used as visual representation of consent or agreement, show or hide content, and so on. This component is a part of [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). You can customize this component to fit your design and requirements by using various options and properties that are introduced and described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:---------------|:----------|:-------------------------------------------------------------------| | Label | `string` | Text that is displayed alongside the toggle | | Checked | `boolean` | Makes your toggle active or inactive by default | | Checked text | `string` | Text to display when the toggle is in the active state | | Unchecked text | `string` | Text to display when the toggle is in the inactive state | | Disabled | `boolean` | If set to _true_, makes your component inactive | | Read Only | `boolean` | If set to _true_, makes your checkbox unavailable to interact with | | Size | `choice` | Sets the size of the component (e.g., _large_, _small_, etc.) | | Color | `choice` | Sets the color of the component (e.g., _red_, _blue_, etc.) | | Loading | `boolean` | If set to true, displays a loading indicator on the toggle | ## Style properties --- # Uploader URL: https://formengine.io/documentation/components-library/fields/uploader import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The Uploader component is a practical element that enables users to upload files from their device to the form by clicking the corresponding button or via drag-and-drop. It is particularly useful for attaching documents, images, videos, audios, and other files to the form submission. This component is based on [Uploader](https://rsuitejs.com/components/uploader/). It is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). This component can be configured to accept specific file types, configure methods, enable or disable drag-and-drop functionality, and so on. These properties along with the style options are listed and described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-------------------|:------------------------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Label | `string` | Provide a title for your component | | Action | `string` | Required field that sets your uploading URL | | Accept | `string` | Comma-separated list of one or more file types (e.g., _.pdf_, _audio_, etc.). Refer to [HTML attribute accept](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers) for more information | | Auto upload | `boolean` | If set to _true_, automatically uploads files after selecting them | | Custom Element | `boolean` | If set to _true_, turns the upload button into a custom element | | Disable multipart | `boolean` | If set to _true_, disables the use of a multipart form for file upload and streams the file instead. This is useful for APIs that expect file uploads to be streamed, such as Amazon S3 | | Disabled | `boolean` | If set to _true_, disables the component | | Read Only | `boolean` | If set to _true_, makes your checkbox unavailable to interact with | | Disabled File Item | `boolean` | If set to _true_, disables the the file list | | Draggable | `boolean` | If set to _true_, enables drag-and-drop to upload | | File List Visible | `boolean` | If set to _false_, makes the file list invisible | | List Type | `choice` | Sets the list style (i.e., _text_, _picture-text_, or _picture_) | | Method | `string` | The HTTP (_POST_) method of upload request | | Multiple | `boolean` | If set to _true_, allows multiple file uploads to be selected at a time | | Name | `string` | Specifies the parameter name for the uploaded file | | Removable | `boolean` | Is set to _true_, makes file list removable | | Timeout | `number` | Specifies the time limit in milliseconds for the file upload to complete | | With credentials | `boolean` | If set to _true_, carries cookies when uploading, allowing the server to authenticate upload requests | | File List | [file type](https://rsuitejs.com/components/uploader/#code-ts-file-type-code) | Sets the list of uploaded files. Includes _Name_ (file name string), _FileKey_ (unique file ID), and _URL_ (preview link) | ## Style properties ## 📦 File Upload Server example To test the **Uploader** component, you can use the [File Upload Server](https://github.com/optimajet/formengine/tree/master/community/examples/file-upload-server/README.md). This Node.js server demonstrates how to handle file uploads and serve them via static endpoints. For more details, refer to the [File Upload Server documentation](https://github.com/optimajet/formengine/tree/community/master/examples/file-upload-server/README.md). --- # Components library URL: https://formengine.io/documentation/components-library/index.md # Components library Components based on the React Suite package are available in the package [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). To install the components, run the following command: ```bash npm install @react-form-builder/components-rsuite ``` :::tip If your package manager does not support automatic installation of peer dependencies, for example you use the `--legacy-peer-deps` flag in npm, then you need to install peer dependencies manually. ```bash npm install @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 @rsuite/icons@1.0.2 react-number-format@5.1.4 rsuite@5.59.1 --save-exact ``` ::: You can see an example of connecting components to [FormBuilder](/usage#designer) in this section of the documentation. An example of connecting components to [FormViewer](/usage#viewer) in this section of the documentation. An example of connecting components to `FormBuilder` can be seen in [this section](/usage#designer) of the documentation. An example of connecting components to `FormViewer` can be found in [this section](/usage#viewer) of the documentation. The components are divided into the following categories: - **Fields** - components that store form data. - **Static** - components for displaying information, do not contain form data. - **Structure** - components that structure other components. - **Templates** - template-related components, such as the Slot component. ## Fields components - [Calendar](https://rsuitejs.com/components/calendar/). - [Checkbox](https://rsuitejs.com/components/checkbox/). - [DatePicker](https://rsuitejs.com/components/date-picker/). - [TimePicker](https://rsuitejs.com/components/date-picker/). - [TagPicker](https://rsuitejs.com/components/tag-picker/). - Dropdown is a component based on [InputPicker](https://rsuitejs.com/components/input-picker/). - Input is a component based on [Input and InputGroup](https://rsuitejs.com/components/input/). - Number format is a component based on [NumericFormat](https://www.npmjs.com/package/react-number-format). - Pattern format is a component based on [PatternFormat](https://www.npmjs.com/package/react-number-format). - Radio group is a component based on [RadioGroup](https://rsuitejs.com/components/radio/). - Search is a component based on [InputPicker](https://rsuitejs.com/components/input-picker/). - Text area is a component based on [Input](https://rsuitejs.com/components/input/). - Uploader is a component based on [Uploader](https://rsuitejs.com/components/uploader/). - [Rich text editor](/components-library/fields-components/rich-text-editor). This component is in a separate [package](https://www.npmjs.com/package/@react-form-builder/components-rich-text). ## Static components - [Button](https://rsuitejs.com/components/button/). - Error message - a component that displays a form validation error. - Header is a component that displays HTML headers (h1-h6). - Image is a component that displays an image. - Label is a component that displays the HTML tag `label`. - Menu is a component that displays menus, based on [Nav](https://rsuitejs.com/components/nav/). - [Message](https://rsuitejs.com/components/message/). - [Progress circle](https://rsuitejs.com/components/progress/#code-lt-progress-circle-gt-code). - [Progress line](https://rsuitejs.com/components/progress/#code-lt-progress-line-gt-code). - Static content - displays the text in the HTML `span` tag. - Tooltip - displays a tooltip using [Whisper](https://rsuitejs.com/components/whisper/) and [Tooltip](https://rsuitejs.com/components/tooltip/). - [QR code](/components-library/static-components/qr-code). This component is in a separate [package](https://www.npmjs.com/package/@react-form-builder/components-fast-qr). ## Structure components - Breadcrumb displays the current path on the page using [Breadcrumb](https://rsuitejs.com/components/breadcrumb/). - Card - displays a title card using [Panel](https://rsuitejs.com/components/panel/). - Container displays the HTML `div` tag. - Tab displays a tabbed component based on [Nav](https://rsuitejs.com/components/nav/). ## Template components - Slot is a component used to display the components of the parent form in the child form. --- # React Suite components URL: https://formengine.io/documentation/components-library/rsuite-components import CustomComponents from './_custom-components.mdx' export const RSuiteComponentsDocItem = ({link, caption}) => { return !link ? caption : {caption} } export const ComponentLink = ({tag, link}) => { const caption = `<${tag}>` return !link ? caption : } # React Suite components [React Suite](https://rsuitejs.com/) is a great UI component library with an extensive [set of components](https://rsuitejs.com/components/overview/) for just about everything. The FormEngine [component library](/components-library) is based on React Suite components. Here is a list of the components used, as well as components that you can connect yourself. ## Layout
Component Remark
. Container is a layout component that can be used to wrap other components.
<Container>
<Header>
<Footer>
<Content>
<Sidebar>
. Divider are used to group content horizontally or vertically.
. FlexboxGrid is a layout component that can be used to create a grid layout.
. A Grid layout component that provides 24 grids, referring to the responsive design of Bootstrap.
. Quickly layout components through Flexbox, support vertical and horizontal stacking, support custom spacing and wrap.
## Buttons
Component Remark
. Commonly used operating buttons.
Use the [Button](/components-library/static-components/button) component.
. Icon button renders an icon within in a button.
. A button group gives users access to frequently performed, related actions.
## Status
Component Remark
. Used for buttons, numbers or status markers next to icons.
. A component that provides state during data loading.
. Used to show important tips on a page.
Use the [Message](/components-library/static-components/message) component.
. Used for system notifications. Generally used to push messages.
. Display the current progress of an operation flow.
Use the [Progress Line](/components-library/static-components/progress-line) component.
Use the [Progress Circle](/components-library/static-components/progress-circle) component.
. Placeholder before component loaded.
. Toaster display brief, temporary notifications of actions, errors, or other events in an application. It is often used with the Message and Notification components.
Embedding hooks as components is not supported. Create a discussion on [GitHub](https://github.com/optimajet/formengine/discussions/new/choose) if you need it.
## Typography
Component Remark
. A heading is a title or subtitle at the beginning of a page, section, or subsection.
Use the [Header](/components-library/static-components/header) component.
. Used to mark or highlight matched text content. For example, used to highlight search results.
. Text is a basic component that allows you to display text content on the page.
Use the [Static Content](/components-library/static-components/static-content) component.
## Overlays
Component Remark
. A panel that slides out from the edge of the page can replace Modal to present more content.
. A drop-down menu is a navigation that uses selectpicker if you want to select a value.
Use the [Dropdown](/components-library/fields-components/dropdown) component.
. A modal dialog box component for message prompts, acknowledgement messages, and submissions. You can use Drawer if you need to place more content.
. When the mouse clicks/moves in, the pop-up pop-up box is used to display more content.
. A text tip for secondary, which replaces the default title property of an HTML element.
Use the [Tooltip](/components-library/static-components/tooltip) component.
## Navigation
Component Remark
. Components such as navigation, buttons, etc. can be fixed in the visible range. Commonly used for pages with long content, fixed the specified elements in the visible range of the page to assist in quick operation.
. Used to display the current page path and quickly return to the history page.
Use the [Breadcrumb](/components-library/structure-components/breadcrumb) component.
. Provides a list of various forms of navigation menus, which can be landscape and portrait layout.
Use the [Menu](/components-library/static-components/menu) component.
. For navigation at the top of the page.
. An encapsulation of the Nav for the sidebar of the page.
. Steps is a navigation bar that guides users through the steps of a task.
Use the [Wizard](/components-library/structure-components/wizard) component.
Use the [Wizard step](/components-library/structure-components/wizard-step) component.
. Paging navigation, used to assist long lists to load only part of the data, you can quickly switch to the specified data page.
## Media and icons
Component Remark
. Used to display an avatar or brand.
. React Suite provides some guidance and suggestions for using icons in React Suite applications.
. Use the image component to display images.
Use the [Image](/components-library/static-components/image) component.
## Form
Component Remark
. A set of components and models that process form data.
Use the [fields](/components-library/fields-components) components.
.
Use the [built-in validation](/validation#built-in-validators) that builds on top of the [Zod](https://zod.dev/) library. Use [code validation](/validation#code-validator) and [full form validation](/validation#form-validation).
## Data Entry
Component Remark
. Provide auto-complete functionality for input box.
. The Cascader component displays a hierarchical list of options.
. CascadeTree is a component that displays tree-structured data in columns.
. Used for multiple data selection, support grouping.
. CheckTreePicker are supported in multiple selectors for multiple selection of complex data structures.
. CheckTree is used to display a tree structure data and supports Checkbox selection.
. Check boxes are usually used in groups. Allow users to select one or more values from a set.
Use the [Checkbox](/components-library/fields-components/checkbox) component.
. Instead of HTML native controls, input, textarea.
Use the [Input](/components-library/fields-components/input) component.
Use the [Input](/components-library/fields-components/input) component.
. An input component that can only enter numbers.
Use the [Number format](/components-library/fields-components/number-format) component.
. Single item selector with text box input.
Use the [Dropdown](/components-library/fields-components/dropdown) component.
. An inline edit displays a custom input component that switches between reading and editing on the same page.
. The MultiCascader component is used to select multiple values from cascading options.
. Radios are used when only one choice may be selected in a series of options.
Use the [Radio group](/components-library/fields-components/radio-group) component.
. A series of selectable tile components that behave like Radio.
. A rating indicates user interest in content.
. For a single data selection, support grouping.
Use the [Dropdown](/components-library/fields-components/dropdown) component.
. A Slider component for displaying current value.
. Multi-select by tag and support new options.
Use the [TagPicker](/components-library/fields-components/tag-picker) component.
. The enhancement of Input supports input tags and management tags.
. Toggle switch, used for selection between two values.
Use the [Toggle](/components-library/fields-components/toggle) component.
. Selector component, tree single selector.
. Used to show a tree-structured data.
. Upload files by clicking or drag-and-drop, it supports previewing the uploaded image.
Use the [Uploader](/components-library/fields-components/uploader) component.
## Date and Time
Component Remark
. A component that displays data by calendar.
Use the [Calendar](/components-library/fields-components/calendar) component.
. The DateInput component lets users select a date with the keyboard.
Use the [DatePicker](/components-library/fields-components/date-picker) component.
. DatePicker is a highly customizable component that allows users to enter and pick dates and times in different formats.
Use the [DatePicker](/components-library/fields-components/date-picker) component.
. The DateRangeInput components let the user select a date range with the keyboard.
. DateRangePicker is used to quickly enter or pick a date and time range.
. TimePicker is a component that allows users to select a time value.
Use the [TimePicker](/components-library/fields-components/time-picker) component.
. The TimeRangePicker component is used to select a time range.
## Data Grid
Component Remark
. A table displays rows of data.
## Data Display
Component Remark
. Card is a container component for displaying data, which can contain multiple child components such as images, buttons, and text. It is used to display information in a structured way.
. Display a set of elements in a carousel.
. The List component is used to display a group of data, suitable for presenting list-like content, and supports drag-and-drop sorting.
. Used to display statistical data with a title and its corresponding value, emphasizing the current value of a particular attribute.
. Tag for categorizing or markup.
. Vertical display timeline.
. A content panel that supports collapsible, shadow, and border containers.
## Disclosure
Component Remark
. The Accordion component is used to expand and collapse the content area by clicking the title. It is often used to display a large amount of content in a limited space.
. Tabs are a set of layered sections of content, known as tab panels, that display one panel of content at a time.
Use the [Tab](/components-library/structure-components/tab) component.
. VisuallyHidden is a component that visually hides its children while keeping them accessible to screen readers.
## Utilities
Component Remark
. Animation component is a set of animation components. You can achieve animation effects by configuring related properties.
. Support personalized configurations such as localization, Right to Left, and themes.
See also the [localization](/localization) documentation.
. The Whisper component is used to display a floating element. It is usually used with the Tooltip and Popover components.
See also the [Tooltip](/components-library/static-components/tooltip) comopnent.
--- # Button URL: https://formengine.io/documentation/components-library/static/button import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The [Button](https://rsuitejs.com/components/button/) component is a clickable element that allows users to perform an action or trigger an event. It can be customized with different styles, labels, and behaviors to fit various use cases. When the button is clicked, it can submit a user responses, navigate to a specific page, or trigger a specific action, depending on how it is configured. This component is a part of [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). The following introduces and describes available properties and options for the Button component. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-----------|:----------|:----------------------------------------------------------------------------------------------| | Active | `boolean` | If set to _true_, your button will visually indicate that it is the currently selected option | | Appearance | `choice` | Select appearance for the component (e.g., _primary_, _link_, etc.) | | Content | `string` | Mandatory text for your button | | Color | `choice` | Sets color for your button component (e.g., _red_, _blue_, etc) | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | If set to _true_, makes your component unavailable for users to interact with | | Href | `string` | If a URL is provided within this field, it will render the component as an anchor tag | | Loading | `boolean` | If set to _true_, the button will show a loading indicator | | Size | `choice` | Select the size of the button component (e.g., _large_, _small_, etc. ) | ## Style properties --- # Error message URL: https://formengine.io/documentation/components-library/static/error-message import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction This component is used to display an error message to the user, typically in response to form validation error (i.e., in case of invalid input or an error that occurred during a specific process). You can choose the placement of the error message and customize its style like any other component. The error message text, as well as additional error options for your form, are configured within the **Settings** menu, which can be accessed by using the left side panel. The error message component is a part of [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). The following introduces and describes available properties and options that are available within the right side panel. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-----------|:---------|:---------------------------------------------------------------------------------------| | Placement | `choice` | Select the placement of component (e.g., _bottom end_, _top start_, etc.) | | Class Name | `string` | Adds a class name for your component, which is also used within the _Style properties_ | ## Style properties --- # Header URL: https://formengine.io/documentation/components-library/static/header import AdditionalOptions from '../\_additional-options.mdx'; import StyleWrapper from '../\_style-wrapper.mdx'; import StyleForDevice from '../\_style-for-device.mdx' ## Introduction The Header component is a text element that displays a title or heading on the form. It can be used to provide context, highlight important information, or organize the form into sections. The Header component can be customized with different sizes, colors, and styles to match your design and requirements. The following introduces and describes properties and options presented for the header component customization. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:------------|:---------|:----------------------------------------------------| | Content | `string` | Text for your header component | | Header Size | `choice` | Size of your header (e.g., _H 1_, _H 2_, and so on) | ## Style properties These are properties that allow to customize the size, color and other style properties of your component: - **Component**: - _Background_: Sets the background color for the component. Corresponds to the similar property within the Wrapper options. - _Alignment_: Sets the alignment for the header (i.e., _Start_, _Center_, or _End_) - _Color_: Sets the text color for the header. Corresponds to the similar property within the Wrapper options. - _Class Name_: Add a class name for your component for the subsequent styling if necessary. --- # Image URL: https://formengine.io/documentation/components-library/static/image import AdditionalOptions from '../\_additional-options.mdx'; import StyleWrapper from '../\_style-wrapper.mdx'; import StyleForDevice from '../\_style-for-device.mdx' ## Introduction The Image component allows you to add an image to your form. You can enter a URL to display an image from any URL. This component can be used to add visual interest, illustrate a point, or provide additional context to the form. You can also customize the image's size, alignment, and caption to fit your needs. The following introduces and describes properties and options presented for the image component customization. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:------------|:---------|:----------------------------------------------| | Src | `string` | Required property that defines your image URL | | Description | `string` | Optional description for your image | ## Style properties These are properties that allow to customize the size, color and other style properties of your component: - **Component**: - _Position_: Sets the position of your image (i.e., _Top_, _Center_, _Left_, etc.) - _Fit_: Specifies how the image should be resized to fit (e.g., _Cover_, _Fill_, etc.) - _Class Name_: Add a class name for your component for the subsequent styling if necessary. --- # Label URL: https://formengine.io/documentation/components-library/static/label import AdditionalOptions from '../\_additional-options.mdx'; import StyleForDevice from '../\_style-for-device.mdx' ## Introduction The Label component is a basic HTML element that associates a text label with a form control. It can be used to provide descriptive text or captions on the form. This component is especially useful to label other components, making it easier for users to understand the purpose of each utilized component or expected action. The following introduces and describes properties and options presented for the label component customization. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-----|:---------|:--------------------------------------| | Text | `string` | The text content of the label element | ## Style properties These are properties that allow to customize the size, color and other style properties of your component: - **Component**: - _Alignment_: Sets the alignment of your component (i.e., _Start_, _Center_, or _End_). - _Font Size_: Specifies the font size of the component. - _Font Weight_: Sets the font weight (i.e., _Normal_, _Lighter_, or _Bold_) for the component. - _Color_: Sets the text color for the label text. Corresponds to the similar property within the Wrapper options. - _Class Name_: Add a class name for your component for the subsequent styling if necessary. - **Wrapper**: The options below enable you to tailor the appearance of your component and customize it for a specific device type, as selected in the _For Device_ property: | Name | Type | Description | |:-----------------------------|:---------|:-----------------------------------------| | Width | `number` | Specifies the width for your component | | Height | `number` | Specifies the height for your component | | Margin top/right/bottom/left | `number` | Margin values for you component | | Color | `string` | Allows customizing the text color | | Background color | `string` | Enables customizing the background color | --- # Link URL: https://formengine.io/documentation/components-library/static/link import AdditionalOptions from '../\_additional-options.mdx'; import StyleWrapper from '../\_style-wrapper.mdx'; import StyleForDevice from '../\_style-for-device.mdx' ## Introduction The Link component, as the name suggests, creates a hyperlink to another webpage, email address, or file. It allows users to navigate to a different location by interacting with the link. The Link component can be customized to represent a text element or a custom component on the form, enabling you to create interactive elements that trigger specific actions or behaviors. By customizing the Link component, you can also improve the accessibility and usability of your form, making it easier for your users to navigate and interact with. The following introduces and describes properties and options presented for the link component customization. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:------------------|:----------|:------------------------------------------------------------------------------------------------------------| | Content | `choice` | Specifies whether the link content is a _Text_ element or _Custom_ component | | Text | `string` | The text content of the link | | Href | `string` | The URL or address that the link points to | | Target | `string` | Specifies where the linked URL should be opened (e.g., _blank_, _self_, _parent_, _top_, or _unfenced top_) | | Download | `boolean` | If set to _true_, the linked URL will be downloaded instead of opened in a browser | | Download filename | `string` | The filename that will be used when downloading the linked URL | ## Style properties These are properties that allow to customize the size, color and other style properties of your component: - **Component**: - _Alignment_: Sets the alignment of your component (i.e., _Start_, _Center_, or _End_). - _Font Size_: Specifies the font size of the component. - _Font Weight_: Sets the font weight (i.e., _Normal_, _Lighter_, or _Bold_). - _Color_: Sets the text color for the link text. Corresponds to the similar property within the Wrapper options. - _Class Name_: Add a class name for your component for the subsequent styling if necessary. --- # Menu URL: https://formengine.io/documentation/components-library/static/menu import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The Menu component represents a navigation element that allows users to create interactive menus within their forms or applications. It is based on the [Nav](https://rsuitejs.com/components/nav/) and is used to provide a structured and organized way to navigate through different sections or pages. This component is especially helpful to create navigation menus, sidebar menus, or other similar formats for presenting a list of options or actions. You can customize the appearance, layout, and behavior of the Menu component. The available customization properties are introduced and described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-----------|:----------|:----------------------------------------------------------------------------------------------------------------------------| | Active Key | `string` | The key of the currently selected menu element, corresponding to one of values specified in Items | | Appearance | `choice` | The visual style of the menu (i.e., _default_, _tabs_, or _subtle_) | | Items | `array` | The list of menu items, including their labels (_Title_) and links (_URL_). Use the add (**+**) button to append a new item | | Justified | `boolean` | If set to _true_, the menu items will be justified to take up the full width of the menu. | | Reversed | `boolean` | If set to _true_, reverses the direction of menu elements | | Vertical | `boolean` | If set to _true_, the menu will be displayed vertically instead of horizontally | | Items As | `choice` | HTML element name to render menu item | ## Style properties --- # Message URL: https://formengine.io/documentation/components-library/static/message import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The [Message](https://rsuitejs.com/components/message/) component is a versatile element that allows users to display various information or notifications to the user. It can be used to provide feedback, warnings, or information to the user, and can be customized with different types, such as success, error, or warning. This allows you to include up to two custom components to define a message for your users. This might include a header and an error message, or any other combination of components required for your specific use case. This component is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). The following introduces and describes properties and options presented for the message component customization. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:---------|:----------|:-----------------------------------------------------------------------| | Closable | `boolean` | If set to _true_, allows users to close your message | | Type | `choice` | Sets the message type (i.e., _info_, _success_, _error_, or _warning_) | ## Style properties --- # Progress Circle URL: https://formengine.io/documentation/components-library/static/progress-circle import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The [Progress Circle](https://rsuitejs.com/components/progress/#code-lt-progress-circle-gt-code) component represents the progress or completion of a task or process in a circular format. It is typically used to show the progress of form completion, file uploads, or any other task that involves a sequential process. This component is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). This component typically includes a circular shape with a customizable color and size, along with a percentage or label indicating the progress value. You can customize the appearance of the progress circle, including the color, size, behavior, and more. All available properties and options of this component is presented below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:---------------|:----------|:----------------------------------------------------------------------------------------| | Class Prefix | `string` | The prefix for the CSS class names of the progress circle | | Percent | `number` | The presented percentage value of the progress circle | | Show Info | `boolean` | If set to _true_, the progress circle will display the percentage value | | Status | `choice` | The status and the color of the progress circle (i.e., _success_, _active_, or _fail_) | | Stroke Color | `color` | Sets the custom color of the progress circle's stroke | | Stroke Width | `number` | The width of the progress circle's stroke | | Gap Degree | `number` | The degree of the gap in the progress circle | | Gap Position | `choice` | The position of the gap in the progress circle (i.e., _top_, _bottom_, _left_, _right_) | | Stroke Linecap | `choice` | The shape of the progress circle's stroke linecap (i.e., _butt_, _round_, _square_) | | Trail Color | `color` | The color of the progress circle's trail | | Trail Width | `number` | The width of the progress circle's trail | ## Style properties --- # Progress Line URL: https://formengine.io/documentation/components-library/static/progress-line import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The [Progress Line](https://rsuitejs.com/components/progress/#code-lt-progress-line-gt-code) component represents the progress or completion of a task or process in a linear format. It is commonly used to show the progress of file downloads, form completion, or any other task that involves a sequential or incremental process. This component is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). In general, this component displays a horizontal line with a customizable color and length, along with a percentage or label indicating the progress value. It allows customizing the appearance of the progress bar, including the color, size, behavior, and more. All available properties and options of this component is presented below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-------------|:----------|:-------------------------------------------------------------------------------------| | Class Prefix | `string` | The prefix for the CSS class names of the progress line | | Percent | `number` | The presented percentage value of the progress line | | Show Info | `boolean` | If set to _true_, the progress line will display the percentage value | | Status | `choice` | The status and the color of the progress line (i.e., _success_, _active_, or _fail_) | | Stroke Color | `color` | Sets the custom color of the progress line's stroke | | Stroke Width | `number` | The width of the progress line's stroke | | Vertical | `boolean` | If set to _true_, the progress line will be displayed vertically | ## Style properties --- # QR code URL: https://formengine.io/documentation/components-library/static/qr-code.md # QR code ## Overview This component is in a separate NPM package [@react-form-builder/components-fast-qr](https://www.npmjs.com/package/@react-form-builder/components-fast-qr). It is based on [fast_qr](https://www.npmjs.com/package/fast_qr) package. ## Installation Use the following command to install the package: ```bash npm install @react-form-builder/components-fast-qr ``` ## Connection to FormBuilder component The example below assumes that you also have the components from the [@react-form-builder/components-rsuite](/components-library/) package installed and the QR code component is additionally attached: ```typescript jsx {3,6} import {rSuiteComponents} from '@react-form-builder/components-rsuite' import {BuilderView, FormBuilder} from '@react-form-builder/designer' import {fastQrComponent} from '@react-form-builder/components-fast-qr' const components = rSuiteComponents.map((c) => c.build()) const builderView = new BuilderView([...components, fastQrComponent.build()]) function App() { return } ``` ## Connect to FormViewer component The example below shows how to connect the QR code component along with the [@react-form-builder/components-rsuite](/components-library/) components: ```typescript jsx showLineNumbers {1,7,17-21} import {fastQrModel} from '@react-form-builder/components-fast-qr' import {rSuiteComponents} from '@react-form-builder/components-rsuite' import {FormViewer, View} from '@react-form-builder/core' const components = [ ...rSuiteComponents.map((c) => c.build().model), fastQrModel, ] const view = new View(components) const form = `{ "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "qrCode", "type": "FastQR", "props": {} } ] } }` function App() { return form}/> } ``` --- # Static Content URL: https://formengine.io/documentation/components-library/static/static-content import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction Static content represents a component a text element that displays static text content within an HTML span tag. This component is typically used display labels or present any other text that does not require user interaction or dynamic updates. This component can be used to add plain text to your form or customized to include HTML, change colors, and so on. The following introduces and describes properties and options presented for the static content component customization. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-----------|:----------|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Content | `string` | Specifies the content to be displayed within the component. This property is required and can accept both plain text and HTML code (in case _Allow HTML_ is enabled) | | Allow HTML | `boolean` | If set to _true_, enables you to use HTML for your content (e.g., use `

` tags to convert the content to a header) | ## Style properties --- # Tooltip URL: https://formengine.io/documentation/components-library/static/tooltip import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The Tooltip component is used to provide a pop-up text box that appears when a user hovers over, activates, focuses or clicks on a component within your form. This component is commonly used to display explanatory text, hints, descriptions, or context for any component, allowing for complex and dynamic tooltip content. This component displays the pop-up messages using [Whisper](https://rsuitejs.com/components/whisper/) and [Tooltip](https://rsuitejs.com/components/tooltip/). It can be customized to appear on a specific trigger, and can also be customized with different placement, colors, and styles. The following introduces and describes properties and options presented for the tooltip component customization. ## Main properties These are the properties that are available within the _Main_ tab. Note that all provided properties are **required**. | Name | Type | Description | |:----------|:---------|:-------------------------------------------------------------------------------------------------------| | Text | `string` | Determines the text content of the tooltip | | Placement | `choice` | The position of the tooltip relative to the trigger element (e.g., _Top_, _Bottom_, _Left_, and so on) | | Trigger | `choice` | The event that triggers the tooltip to appear. Refer to trigger options below for more details | ### Trigger options These trigger options provide users with flexibility in determining how the tooltip should be activated based on different user interactions: - _Click_: The tooltip will be triggered when the element is clicked and closed when clicked again. - _Context Menu_: It will be triggered when you trigger context menu on the component. - _Focus_: Typically triggered when the user clicks, taps on an element or selects it with the keyboard's tab key. - _Hover_: Will be triggered when the cursor (mouse pointer) is hovering over the component. - _Active_: Will be triggered when the element is activated. - _None_: No trigger event, generally used when it needs to be triggered by a method. ## Style properties --- # Breadcrumb URL: https://formengine.io/documentation/components-library/structure/breadcrumb import AdditionalOptions from '../\_additional-options.mdx'; import StyleWrapper from '../\_style-wrapper.mdx' import StyleForDevice from '../\_style-for-device.mdx' ## Introduction The [Breadcrumb](https://rsuitejs.com/components/breadcrumb/) component is a navigational element that is typically used as a hierarchical trail of links, representing the current page's location within your form. It provides users with a visual representation of their navigation path, allowing them to easily understand their current position and navigate back to previous pages or sections. This component is a part of [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). This component typically consists of multiple clickable links, separated by a forward slash or any other delimiter of your choice. You can also set the number of items within the breadcrumb component and customize other properties that are described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:----------|:---------|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Separator | `string` | Character used to separate the breadcrumb items | | Max Items | `number` | The maximum number of breadcrumb items to display. If there are more items than this limit, the excess items will be truncated or hidden | | Items | `string` | Used to define _values_ and _labels_ for your items. If the active checkbox set to _true_, makes your item focused and removes the underline. Add more items by using the corresponding (**+**) button | ## Style properties These are properties that allow to customize the size, color and other style properties of your component: - **Component**: - _Justify_: Sets the alignment of your component's items (i.e., _Left_, _Center_, or _Right_). - _Class Name_: Add a class name for your component for the subsequent styling if necessary. --- # Card URL: https://formengine.io/documentation/components-library/structure/card import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The Card component is used to create and organize layouts for your components. It allows displaying information or content in a visually appealing and structured manner. Cards are typically used to present a container or collection of related data, such as product details, articles, or user profiles. Cards can provide images with descriptions or any other combinations of components that are required for your use case. This component is based on [Panel](https://rsuitejs.com/components/panel/). This component is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). You can customize the appearance of the card component by enabling or disabling borders, shadows, making it collapsible and so on. It also provides other properties and styling options that are presented below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-----------------|:----------|:--------------------------------------------------------------| | Title | `string` | Sets the card title | | Header Size | `string` | Specifies the title size (e.g., _h4_, _h3_, etc.) | | Body Fill | `boolean` | If set to _true_, content area will be filled with containers | | Bordered | `boolean` | If set to _true_, the component will include a border | | Shaded | `boolean` | If set to _true_, the card will have a shaded background | | Default Expanded | `boolean` | If set to _true_, the card will be expanded by default | | Collapsible | `boolean` | If set to _true_, the card can be collapsed and expanded | | Event Key | `string` | The key of the event that corresponds to this element | ## Style properties --- # Container URL: https://formengine.io/documentation/components-library/structure/container import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The Container component represents a `div` tag that wraps other components, providing a way to group and organize content. It can be used to add padding, margins, and other styles to a group of components. It is also especially useful to define and maintain a consistent layout for components within your form. Container does not provide any _Main_ properties aside from the required _Key_ configuration and additional options. However, it provides a comprehensive list of style properties that corresponds to general screen style configuration options. ## Main properties ## Style properties These properties allow you to customize the size, color, and other style options: | Name | Type | Description | |:-------------------------------|:----------|:--------------------------------------------------------------------------------------------------------| | [For Device](/adaptive-layout) | `choice` | Provide component's style customization for all devices or specific devices by using this dropdown list | | Direction | `choice` | Direction of the container's layout (e.g., _row_, _column_, etc.) | | Gap | `number` | Spacing between the container's children (e.g., _10px_). | | Align Items | `choice` | Alignment of the container's children (e.g., _center_, _start_, etc.) | | Justify | `choice` | Justification of the container's children (e.g., _center_, _space-between_, etc.) | | Flex Wrap | `choice` | Specified the wrap options for the container's children (i.e., _wrap_, _nowrap_, or _wrap reverse_) | | Width | `number` | Sets the width of the container | | Height | `number` | The height of the container | | Margin Top | `number` | The top margin of the container | | Margin Right | `number` | The right margin of the container | | Margin Bottom | `number` | The bottom margin of the container | | Margin Left | `number` | The left margin of the container | | Color | `number` | The text color of the container | | Background Color | `number` | The background color of the container | | Class Name | `string` | Add a class name for your container for the subsequent styling if necessary | | Disabled | `boolean` | Disables the component | | Read Only | `boolean` | If set to _true_, makes your component unavailable for users to interact with | --- # Repeater URL: https://formengine.io/documentation/components-library/structure/repeater import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The Repeater component is a special component that is responsible for displaying an array of repeating components. For example, you have a hotel booking form in which the user must specify the number of guests and specify their full names. At the same time, the number of names entered changes dynamically, depending on the number of residents. The Repeater component is just made for such cases. When you work with Repeater, the data available to you in [actions](/actions) and [computed properties](/computed-properties) differs from the data in the usual form. In general, you have the following properties (see [ActionEventArgs](/api-reference/@react-form-builder/core/classes/ActionEventArgs) and [IFormData](/api-reference/@react-form-builder/core/interfaces/IFormData)): - `data`: data of the current form, for example, form data or repeater item data; - `parentData`: parent form data, such as the data of the form's parent repeater item, or form data if the form is not in a repeater; - `rootData`: the all form data; - `index`: index of the current repeater item, if the component is inside the repeater; Below is a picture explaining the data for the first level repeater: ![Repeater data](/assets/components-library/structure/repeater/repeater-01.png "Repeater level 1") For a level two repeater: ![Repeater data](/assets/components-library/structure/repeater/repeater-02.png "Repeater level 2") See [this guide](/using-repeater) for more information on using the Repeater. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:-----------------|:---------|:----------------------------------------------------------------------------------------------------------------------| | Item Render When | `string` | Works like the [_Render When_](/conditional-rendering) property, but hides or shows a specific element from the array | | Value | `array` | Data for the component, is an array of objects | ## Style properties These are properties that allow you to customize the placement of components within the Repeater: - **Component > Direction**: Defines how components are placed within a single Repeater element (e.g., _column_, _row_, etc.). - **Component > Item gap**: Defines the gap between components within a single Repeater element. - **Wrapper > Direction**: Defines how the elements of the Repeater are arranged (e.g., _column_, _row_, etc.). - **Wrapper > Item gap**: Defines the gap between the Repeater elements. - **Wrapper > Class Name**: Add a class name for your component for the subsequent styling if necessary. --- # Tab URL: https://formengine.io/documentation/components-library/structure/tab import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The Tab component represents a navigation element that allows users to switch between different views or panels. It is used to organize content, reduce clutter, and improve user experience. This component is based on [Nav](https://rsuitejs.com/components/nav/). This component is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). The tab component typically consists of a set of tabs, each representing a different section or page. Users can click on a tab to access its associated content. Each tab allows adding a component by using the add button on the interface. You can also customize the behavior and appearance of this component by using various properties and options that are described below. ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:----------------|:----------|:--------------------------------------------------------------------------------------------------------------------| | Active Key | `string` | The key of the currently selected menu element, corresponding to one of values specified in Items | | Appearance | `choice` | The visual style of the component (i.e., _default_, _tabs_, or _subtle_) | | Items | `array` | The list of component items, including their _Values_ and _Labels_. Use the add (**+**) button to append a new item | | Justified | `boolean` | If set to _true_, the items will be justified to take up the full width of the menu | | Reversed | `boolean` | If set to _true_, reverses the direction of tabs | | Vertical | `boolean` | If set to _true_, the items will be displayed vertically instead of horizontally | | Show Navigation | `boolean` | Makes the navigation visible and invisible | ## Style properties --- # Wizard step URL: https://formengine.io/documentation/components-library/structure/wizard-step import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The Wizard step component introduces the ability for users to add an individual step to the [Wizard](/components-library/structure-components/wizard) component. It is essentially a container for the elements that are displayed in the step. This component is based on [Step.Item](https://rsuitejs.com/components/steps/#code-lt-steps-item-gt-code). This component is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:------|:---------|:-----------------------------| | Label | `string` | The title of the wizard step | ## Style properties --- # Wizard URL: https://formengine.io/documentation/components-library/structure/wizard import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Introduction The Wizard component is a component for creating step-by-step forms with the ability to transition between steps. The component allows you to validate nested components in each [step](/components-library/structure-components/wizard-step). It is also possible to validate all steps when the Wizard is completed. This component is based on [Steps](https://rsuitejs.com/components/steps/). This component is included within the following NPM package: [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). ## Main properties The following general properties are available within the _Main_ tab: | Name | Type | Description | |:----------------------|:----------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | Active index | `number` | Active step index starting from `0` | | Steps navigation | `choice` | The type of navigation by steps (i.e., _disable_, _only visited_, or _any_) | | Steps | `array` | Allows you to edit step labels, essentially editing the labels of nested [Wizard steps](/components-library/structure-components/wizard-step) | | Previous button label | `string` | Label for the step back button | | Next button label | `string` | Label for the step forward button | | Finish button label | `string` | Label for the finish button | | Show steps | `boolean` | If set to _true_, step navigation will be displayed | | Show steps labels | `boolean` | If set to _true_, the step label will be displayed next to the step number | | Vertical steps | `boolean` | If set to _true_, the step navigation will be vertical instead of horizontal | | Validate on next | `boolean` | If set to _true_, the components of the current step will be validated before moving to the next step. It is possible to move to the next step only after successful validation | | Validate on finish | `boolean` | If set to _true_, all steps will be validated before the Wizard is finished | ## Style properties --- # Slot URL: https://formengine.io/documentation/components-library/templates/slot import StyleBlock from '../\_style-props.mdx'; import AdditionalOptions from '../\_additional-options.mdx'; ## Overview The Slot component serves as a placeholder element that allows you to dynamically insert new components within new forms. Namely, it is used to insert a new component slot into a specific location within a form and subsequently pass the defined results to new forms that will use this template. This component does not provide general properties aside from the required _Key_ configuration and additional properties. However, it does provide standard set of style properties and options. ### How to use slots The slot component has a unique purpose and usage compared to other available components. As such, it is essential to understand the associated workflow before integrating this component into your forms. The following steps illustrate the standard usage of the Slot component: 1. Create a form and add a new _Slot_ component to your form. 2. Save your form by using the corresponding button on the interface. Thus, your form with a slot will be saved as a new template. 3. Create a new form and add the saved template from the components list. 4. Add components into the corresponding slot within the new form. As a result, your new form will feature all elements from its parent along with your defined component in the designated slot. You can also switch to the _Preview_ mode to see the rendered form with the results. ## Main properties ## Style properties --- # Form Builder URL: https://formengine.io/documentation/documentation.md # Form Builder Form Builder is a client-side library for creating web forms. The library allows you to map a form from JSON to a dynamic HTML form and send the results to your server. The library has no built-in visual components to display the form. Instead, it is made to display your components. However, if you don't have your component set, there is a ready-made component set based on [React Suite](/components-library/) to work with. ## Key features - **UI-Agnostic Components:** Works seamlessly with any UI library ([MUI](https://mui.com/), [Ant Design](https://ant.design/), [shadcn/ui](https://ui.shadcn.com/) and [others](/custom-components)). - **Pre-Built React Suite Integration:** Includes a ready-to-use component library – [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). - Framework Support: - **Next.js Integration**: Seamlessly works with [Next.js](/usage-with-nextjs). - **Remix Compatibility**: Fully supports [Remix](/usage-with-remix). - **Framework-Agnostic**: Can also be used [without any framework](/installation#cdn) via CDN. - **Multi-Database Support:** Compatible with MySQL, PostgreSQL, MongoDB, SQLite, and more. - **Built-in Validation with Zod:** Includes pre-configured validation rules powered by [Zod](https://github.com/colinhacks/zod). - **Extensible Validation Support:** Works with [Yup](https://github.com/jquense/yup), [AJV](https://github.com/ajv-validator/ajv), [Zod](https://github.com/colinhacks/zod), [Superstruct](https://github.com/ianstormtaylor/superstruct), [Joi](https://github.com/hapijs/joi), and other custom validation libraries. - **Responsive Layouts**: Build forms that automatically [adapt](/adaptive-layout) to all screen sizes. - **Custom Actions**: Enhance forms with interactive logic through [custom JavaScript code](/actions). - **Dynamic Properties**: Implement real-time component changes with [MobX](https://github.com/mobxjs/mobx)-powered reactive properties. - **Flexible Storage Options**: - Store complete form definitions as JSON. - Programmatically generate forms [via code](/building-forms-via-code). ## Paid features - **Drag & Drop Form Designer**: intuitive form building with easy drag-and-drop functionality. [Demo](https://demo.formengine.io/). - **Customizable Designer**: tailor the form builder to match your workflow and [branding](/designer-customization). - **Templates**: create [reusable components](/nested-components#templates) from your forms. - **Signature Component**: capture [digital signatures](/components-library/fields-components/signature) directly in your forms. - **QR Code Component**: generate and embed [QR codes](/components-library/static-components/qr-code) dynamically. - **Table Component** _(in development)_: structured data display and input. - **Preset Componens**: save and reuse [custom-configured form elements](/presets-components). - **i18n Support**: built-in multilingual form [localization](/localization). - **Repeater Component**: create [repeatable](/components-library/structure-components/repeater) sections for dynamic form fields. ## Quick start Let's create a sample form application from scratch. We will need to do the following: - Create the application itself. - Install the library. - Add the form to the page. - Run the application. - Submit the form. In the end, we will get a simple web form: ![Form example](/assets/landing/landing-01.png) Let's create an application and install dependencies. import Tracking from '@site/src/components/Tracking'; ```bash npx create-vite formbuilder-app --template react-ts cd formbuilder-app npm install @react-form-builder/core @react-form-builder/components-rsuite ``` So now we have a Vite application. Let's add a form to the application. ### Form description Each form is just JSON with a description of the form. The library takes care of form rendering and event handling. Each form element is a component described by a unique key and type, and a set of properties. They can also describe how the component should be validated and what CSS styles should be applied. You can create form's JSON using the builder: ```typescript {2,6,11,17,22} const simpleForm = buildForm({errorType: 'RsErrorMessage'}) .component('container', 'RsContainer') .style({flexDirection: 'row'}) .children((builder) => builder .component('firstName', 'RsInput') .prop('placeholder', 'Enter your first name') .prop('label', 'First Name') .validation('required') .component('lastName', 'RsInput') .prop('placeholder', 'Enter your last name') .prop('label', 'Last Name') .validation('required') ) .component('birthDate', 'RsDatePicker') .prop('label', 'Birth Date') .prop('oneTap', true) .validation('min').args({value: '1900-01-07T12:25:37.000Z'}) .component('submit', 'RsButton') .prop('children', 'Submit') .prop('color', 'blue') .prop('appearance', 'primary') .event('onClick') .commonAction('validate').args({failOnError: true}) .customAction('onSubmit') .json() ``` ### Add the form to the page The component that displays forms is called `FormViewer`. It is necessary to pass to this component the `getForm` function to get the JSON of the form and the `view` property, this is the set of components for rendering the form. In this example, we will use `viewWithCss` for a [React Suite library](/components-library/). You can also pass your custom actions to the `actions` property to submit the form to the backend. In this example, we will simply call the `alert` function. ```tsx title='src/App.tsx' {1-2,31,38-47} src/App.tsx showLineNumbers import {viewWithCss} from '@react-form-builder/components-rsuite' import {buildForm, FormViewer} from '@react-form-builder/core' const simpleForm = buildForm({errorType: 'RsErrorMessage'}) .component('container', 'RsContainer') .style({flexDirection: 'row'}) .children((builder) => builder .component('firstName', 'RsInput') .prop('placeholder', 'Enter your first name') .prop('label', 'First Name') .validation('required') .component('lastName', 'RsInput') .prop('placeholder', 'Enter your last name') .prop('label', 'Last Name') .validation('required') ) .component('birthDate', 'RsDatePicker') .prop('label', 'Birth Date') .prop('oneTap', true) .validation('min').args({value: '1900-01-07T12:25:37.000Z'}) .component('submit', 'RsButton') .prop('children', 'Submit') .prop('color', 'blue') .prop('appearance', 'primary') .event('onClick') .commonAction('validate').args({failOnError: true}) .customAction('onSubmit') .json() /** * @returns the App element. */ export const App = () => { return simpleForm} actions={{ onSubmit: (e) => { // submit the form to the backend alert('Form data: ' + JSON.stringify(e.data)) }, }} /> } export default App ``` Modify the contents of the `src/App.tsx` file as in the example above to finalize the application. ### Run the application Now we can run the application. In the terminal, run: ```bash npm run dev ``` Open your browser and go to [http://localhost:5173](http://localhost:5173) (your port may be different). You should see the form we created. ![Form example](/assets/landing/landing-01.png) You can click on the _Submit_ button without filling out the form, and you will see an error message. ![Form example](/assets/landing/landing-02.png) If you fill out the form and click _Submit_, you will see an alert with the form data. ![Form example](/assets/landing/landing-03.png) ## Creating a form using Designer Creating forms using JSON may not be as convenient as creating them visually in the Form Designer. Let's run the Form Designer locally. To do this, it is enough to install the package with the designer and connect components to it. ```bash npm install @react-form-builder/designer @react-form-builder/components-rsuite ``` In the simplest configuration, the `FormBuilder` component has one mandatory `view` property, a visual description of the components. We will use the ready-made React Suite, you can use your own components. ```tsx title='src/Designer.tsx' import {builderViewWithCss} from '@react-form-builder/components-rsuite' import {FormBuilder} from '@react-form-builder/designer' /** * @returns the Designer element. */ export const Designer = () => { return } ``` When you launch the Designer, you'll see roughly the following: ![Form example](/assets/landing/landing-04.png) Now you can create a form right on the page, customize components, and more. For a more complete example, see [the link](/usage#designer). ## Further reading - Component styling [using CSS](/component-styling). - [Validation](/validation). - Connecting [form storage](/form-storage) to Designer. - Using with [Next.js](/usage-with-nextjs). - Using with [Remix](/usage-with-remix). - Using without any framework [via CDN](/installation#cdn). --- # External API access URL: https://formengine.io/documentation/faq/external-api-access.md # Access to external API from Form Designer You can access the desired API via [custom actions](/actions#custom-actions), which are called on a specific event, such as `onClick`. 1. Adding a custom action to `FormBuilder` props: ```tsx { const {param1, param2, param3} = args MyApi.call(param1, param2, param3) }, { param1: 'string', param2: 'boolean', param3: 'number' }) }} /> ``` 2. Adding a custom action to a component in the editor: ![Access external API 01](/assets/faq/access-external-api-01.png) 3. Setting the action parameters: ![Access external API 02](/assets/faq/access-external-api-02.png) --- # Getting form data URL: https://formengine.io/documentation/faq/getting-form-data.md # Getting form data in a React component If you need to retrieve data from a form when the user fills it out, you can get [formData](/api-reference/@react-form-builder/core/interfaces/IFormViewer#formdata) field from the `FormViewer` ref, and also use [onFormDataChange](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#onformdatachange) callback in `FormViewer` props. ```tsx export const Viewer = () => { const ref = useRef() const setRef = (viewer: IFormViewer | null) => { if (viewer) { ref.current = viewer const formJSON = JSON.stringify(ref.current.formData) console.log('formJSON ', ref.current) } } return ( { const formJSON = JSON.stringify(data) console.log('onFormDataChange', formJSON) }} viewerRef={setRef} {...otherProps} /> ) } ``` --- # Getting form JSON URL: https://formengine.io/documentation/faq/getting-form-json.md # Getting JSON form in React component ## Using FormBuilder ref If you need JSON that contains the form model in `FormBuilder`, you can use [formAsString](/api-reference/@react-form-builder/designer/interfaces/IFormBuilder#formasstring) method from the `FormBuilder` ref: ```tsx const FormBuilderApp = () => { const builderRef = useRef() const setRef = (builder: IFormBuilder | null) => { if (builder) { builderRef.current = builder const formJSON = builder.formAsString console.log(formJSON) } } return } ``` ## Using onFormSchemaChange callback You can also use [onFormSchemaChange](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#onformschemachange) callback in `FormBuilder` props. ```tsx const FormBuilderApp = () => ( { console.log('onFormSchemaChange', formSchema) }} {...otherProps} /> ) ``` ## Using FormStorage You can also use [formStorage](/form-storage#example-of-iformstorage-working-with-indexeddb). In this case, you will receive the form that was saved the last time you clicked the Save button. Please be aware that the layout may have changed since then, and the resulting form may differ from its current state. ```tsx const formStorage = new IndexedDbFormStorage('form-builder-store', 'form-store') const FormBuilderApp = () => { const handleClick = async () => { const form = await formStorage?.getForm(sampleFormName) console.log(form) } return
} ``` --- # Storing user-defined data URL: https://formengine.io/documentation/faq/storing-user-defined-data.md # Storing user-defined data Each component that implements [IFormData](/api-reference/@react-form-builder/core/interfaces/IFormData) can maintain a user-defined data object of any shape. This functionality is not confined to forms; it can be applied to any component. When you exceed the capabilities of the FormEngine's core features, you can extend the behavior with this custom storage. By placing it at the form level, it becomes accessible to all dependent components and is updated in the same way the FormEngine updates. The example below illustrates how to fetch data and store it at the form level: ```tsx async function Action(e, args) { fetch('https://gist.githubusercontent.com/rogargon/5534902/raw/434445021e155240ca78e378f10f70391dd594ea/countries.json') .then(data => data.json()) .then(data => { const preparedData = data.map(value => ({value, label: value})) e.store.formData.state.items = preparedData }) } ``` As a result, any component downstream in the hierarchy can utilize this data for tasks such as populating fields or executing calculations. ```tsx function Calculation(form) { return form.state.items } ``` --- # Theme manipulation URL: https://formengine.io/documentation/faq/theme-manipulation.md # Theme manipulation You can control the theme (light, dark, or system default) in your application by passing the [theme](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#theme) prop to the `FormBuilder` component or by directly modifying `theme` value in `localStorage`. ## Setting the theme ### Using the theme property in FormBuilder component To set the theme in [FormBuilder](/api-reference/@react-form-builder/designer/functions/FormBuilder), simply pass one of the following values to the [theme](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#theme) property: - `light` - forces the application to use the light theme. - `dark` - forces the application to use the dark theme. - `system` - adapts to the user's system theme preference (light or dark). #### Example ```tsx ``` ### Setting the theme via localStorage Alternatively, you can control the theme by directly setting the `theme` value in `localStorage`. #### Example ```typescript localStorage.setItem('theme', 'light'); ``` --- # Actions URL: https://formengine.io/documentation/features/actions.md # Actions ## Overview Actions are reusable, asynchronous JavaScript functions that enable you to handle events and interact with your form in a flexible and efficient way. There are three types of actions: - __Common__: These are pre-defined actions that provide a convenient way to perform common tasks with a form, such as: - _validate_: Validates the form. - _clear_: Clears the form fields. - _reset_: Sets the value of form fields to their default value. - __Code__: These actions allow you to write custom JavaScript code directly in the designer's code editor. - __Custom__: These are custom actions that can be passed as properties to the FormBuilder or FormViewer component. ## Events Two events are described for each component connected to Form Builder: `onDidMount`, `onWillUnmount`. These events are triggered when a component is mounted and unmounted, as for a typical React component. If you want to use other component events, you must use [event](/api-reference/@react-form-builder/core/classes/ActionEventArgs#event) to define the component property you need. Example: ```typescript {7} export const myButton = define(MyButton, 'MyButton') .name('MyButton') .props({ children: string.required.named('Content').hinted('Caption').default('My Button'), danger: boolean.hinted('Set the danger status of button'), disabled: boolean.hinted('Disabled state of button'), onClick: event }) ``` In the above code, the `onClick` property is defined as `event`. After connecting the component to the designer, you will see the `onClick` event in the list of available component events and will be able to bind an action to this event. ## Working with actions ### Description Actions work [asynchronously](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing), which means that they are executed in a sequential, step-by-step manner. This approach allows for efficient processing of multiple actions, ensuring that your form remains responsive and interactive. Here's how actions work: 1. When an event is triggered, the assigned actions are executed one by one, in the order they were defined. 2. Each action is executed independently, allowing the next action to start only when the previous one has completed. 3. If an action encounters an error and returns a failure, the entire sequence of actions will be terminated, and no further actions will be executed. The asynchronous approach ensures improved performance, flexibility to define complex workflows, and simplified error handling. To illustrate this concept, let's consider an example: Suppose you have a form that inquires users to enter their data and click _Save_. The Save button incorporates two onClick actions: - First for validating the results - Second for showing the validation results Therefore, in case the first validation action fails due to invalid data, the entire sequence will be terminated, and the following action will not be executed. For more details, follow the example below that illustrates how to define this sequence and such actions. ### Example Let's open our [demo](https://demo.formengine.io/) and select the _Save_ button in the designer, as shown in the screenshot below. In the right panel, select the "Actions" tab. ![Actions 01](/assets/actions/actions-01.png) There are two handlers attached to the `onClick` event: `validate` and `showValidationResult`. The `showValidationResult` action is editable because it is a "Code" action. The actions are executed sequentially, one after the other. You can change the order in which the actions are called by simply dragging and dropping their names in the list. And of course you can add and remove actions. Click on the pen icon next to `showValidationResult` to open the action code editor. You should see similar to the screenshot below: ![Actions 02](/assets/actions/actions-02.png) As you can see, an action is simply an asynchronous JavaScript function. The mandatory parameter is the action name and handler code. In the right part you can specify the action parameters. If the action has parameters, you can pass the values of the arguments to the parameters in the binding of the action to the event. Let's take a closer look at the action code. ```javascript title='showValidationResult' {6,12-14} showLineNumbers /** * @param {ActionEventArgs} e - the action arguments. * @param {} args - the action parameters arguments. */ async function Action (e, args) { const setVisible = (key, visible) => { const componentStore = e.store.form.componentTree.findByKey(key)?.store if (componentStore) { componentStore.renderWhen = {value: visible} } } const hasErrors = e.store.form.componentTree.hasErrors setVisible('errorMessage', hasErrors) setVisible('successMessage', !hasErrors) } ``` There are two parameters in this function: 1. e is an object of type [ActionEventArgs](/api-reference/@react-form-builder/core/classes/ActionEventArgs). 2. args - this object will store values of arguments of action parameters. Line 6 contains the `setVisible` function, which is responsible for hiding or displaying the component on the form using the `renderWhen` property. The `hasErrors` variable gets the value `true` if the form contains validation errors (line 12). Lines 13 and 14 show/hide components with `key` field "errorMessage" and "successMessage". That is, in fact, this function just shows the component displaying the error or the component displaying the success of validation of the whole form. ## Custom actions Custom actions can be passed through the [actions](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#actions) parameter. The passed custom actions will be available in the selection in the form designer. You can find an example [this](/usage#designer) page. ```jsx console.log(e), assertArgs: ActionDefinition.functionalAction((e, args) => { console.log(e, args) }, { p1: 'string', p2: 'boolean', p3: 'number' }) }} /> ``` In the simplest case, a custom function is just an arrow function like `logEventArgs` from the example above. If you need a function with parameters, use the [ActionDefinition.functionalAction](/api-reference/@react-form-builder/core/classes/ActionDefinition#functionalaction) function to define the action, as in the case of `assertArgs`. ## Common actions Common actions, also known as _common functions_, are reusable functions that can be used across multiple forms to perform specific tasks. These functions enable the reuse of various events on form inputs, making it easier to manage and maintain complex form logic. These common functions can be used via both _FormBuilder_ and _FormViewer_. Common functions are defined via the [actions](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#actions) parameter. The following provides an example that showcases how to define a new common function for __FormBuilder__ via this property: ```tsx {13-27} { console.log('onFormDataChange', {data, errors}) }} viewerRef={setRef} validators={customValidators} actions={{ weatherRequest: ActionDefinition.functionalAction(async (e, args) => { let latitude = Number(e.data.latitude) if (Number.isNaN(latitude)) latitude = 40.416763 let longitude = Number(e.data.longitude) if (Number.isNaN(longitude)) longitude = -3.703999 try { const request = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true&ourly=temperature_2m,elativehumidity_2m,windspeed_10m`, {signal: AbortSignal.timeout(10000)}) const value = await request.json() e.setUserDefinedProps({children: `Current weather is ${value.current_weather.temperature} °C`}) } catch (error) { e.setUserDefinedProps({children: `Current weather is not available`}) } }) }} /> ``` This example function is called `weatherRequest` and it is implemented via the Open Meteo API. As the name implies, this function is used to check the weather and display the results within forms. This function requires to specify coordinates. In case the weather data is available for specified coordinates the function returns the temperature in Celsius. The code snippet below showcases how to define a form that works with this function: ```JSON { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "rsContainer1", "type": "RsContainer", "props": {}, "css": { "any": { "object": { "flexDirection": "row" } } }, "children": [ { "key": "latitude", "type": "RsInput", "props": { "label": { "value": "Latitude" }, "placeholder": { "value": "Enter latitude, for example 40.416763" } } }, { "key": "longitude", "type": "RsInput", "props": { "placeholder": { "value": "Enter longitude, for example -3.703999" }, "label": { "value": "Longitude" } } } ] }, { "key": "rsButton1", "type": "RsButton", "props": { "active": { "value": false }, "appearance": { "value": "primary" }, "color": { "value": "blue" }, "children": { "value": "Check weather" } }, "events": { "onClick": [ { "name": "weatherRequest", "type": "custom" } ] } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` The following snippet showcases how to implement the `weatherRequest` function for __FormViewer__: ```tsx { let latitude = Number(e.data.latitude) if (Number.isNaN(latitude)) latitude = 40.416763 let longitude = Number(e.data.longitude) if (Number.isNaN(longitude)) longitude = -3.703999 try { const request = await fetch(`https://api.open-meteo.com/v1/forecast?latitude=${latitude}&longitude=${longitude}¤t_weather=true&ourly=temperature_2m,elativehumidity_2m,windspeed_10m`, {signal: AbortSignal.timeout(10000)}) const value = await request.json() e.setUserDefinedProps({children: `Current weather is ${value.current_weather.temperature} °C`}) } catch (error) { e.setUserDefinedProps({children: `Current weather is not available`}) } }) }} {...otherProps} /> ``` Therefore, by adding the `weatherRequest` function to FormViewer or FormBuilder and using the provided example form, you can enter the coordinates and display the temperature data. You will also be able to use this function as a common action within your other defined forms. --- # Adaptive layout URL: https://formengine.io/documentation/features/adaptive-layout.md # Adaptive layout Form Builder allows you to set different styles for different layouts. In the "For device" drop-down menu on the "Style" tab, you can select the device for which the styles will be applied. The device is determined by the width of the window: 1. **Any** - these styles are applied to all devices, regardless of window width. 2. **Desktop** - for desktop devices with a window width greater than 900 pixels. 3. **Mobile** - for mobile devices where the window width is less than or equal to 600 pixels. 4. **Tablet** - for tablet devices where the window width is less than or equal to 900 pixels. 5. **Custom breakpoints** - this functionality is in development. Will be added later. Let's take a look at how this works. To demonstrate, let's create a form with three fields located in one container. ![Adaptive layout 01](/assets/adaptive-layout/adaptive-layout-01.png) This is a ready-made JSON form with this example. You can copy it to the JSON form editor for see how it works. Click the **</>** button, then paste the code below and close the "Edit JSON" window.
Form JSON ```json { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "css": { "any": { "string": "" }, "desktop": { "string": " padding: 20px;\n border: 1px solid lightgrey;\n border-radius: 6px;" } }, "children": [ { "key": "container", "type": "RsContainer", "props": {}, "css": { "any": { "object": { "flexDirection": "row" } }, "mobile": { "object": { "flexDirection": "row", "flexWrap": "wrap" } } }, "children": [ { "key": "name", "type": "RsInput", "props": { "label": { "value": "Name" } }, "wrapperCss": { "mobile": { "object": { "width": "100%" } }, "any": { "object": { "width": "100%" } } } }, { "key": "surname", "type": "RsInput", "props": { "label": { "value": "Surname" } }, "wrapperCss": { "mobile": { "object": { "width": "auto" }, "string": " flex: 1;" }, "any": { "object": { "width": "100%" } } }, "css": { "mobile": { "string": " " } } }, { "key": "sex", "type": "RsDropdown", "props": { "label": { "value": "Sex" } }, "wrapperCss": { "mobile": { "object": { "width": "auto" }, "string": " flex: 1;" } } } ] } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ```
We have added the following styles for the `Screen` in `Desktop` mode: ```scss element.style { padding: 20px; border: 1px solid lightgrey; border-radius: 6px; } ``` ![Adaptive layout 02](/assets/adaptive-layout/adaptive-layout-02.png) This is how it looks in Preview mode: ![Adaptive layout 03](/assets/adaptive-layout/adaptive-layout-03.png) We have also set the `Direction: row` and `Flex wrap: wrap` for the container in `Mobile` mode: ![Adaptive layout 04](/assets/adaptive-layout/adaptive-layout-04.png) And set `Width: auto` and `flex: 1` for `Surname` and `Sex` inputs `Wrapper`: ![Adaptive layout 05](/assets/adaptive-layout/adaptive-layout-05.png) Now we can look at the result by switching between devices in display modes: ![Adaptive layout 06](/assets/adaptive-layout/adaptive-layout-06.png) --- # Component styling URL: https://formengine.io/documentation/features/component-styling.md # Component styling ## Overview Styling of components in Form Builder is quite simple - you can customize styles for a component on the "Style" tab. The styles will be compiled into a CSS class. The name of this CSS class will be passed to the component's rendering function as the `className` property. Also, you can to set different styles for [different layouts](/adaptive-layout). ![Component styling 10](/assets/component-styling/component-styling-10.png) ### Structure Each component (except Containers) in the form is placed in an outer wrapper, a tooltip and a wrapper for displaying errors during rendering. This is what the nesting structure of a regular component looks like: ```tsx ``` Styles specific to different HTML elements (for example `font-size` for the `Label` component or `fit` for the `Image` component) are applied directly to it. These properties can be edited on the `Style` tab, under the `Component` heading. The sizing, padding, positioning and other styles inherent in all components are applied to the outer wrapper of the component. They are located under the `Wrapper` heading. You can also enter the CSS code for the component or wrapper into the editor at the bottom. There you can use all CSS properties such selectors, pseudo-classes, etc. ![Component styling 09](/assets/component-styling/component-styling-09.png) ![Component styling 11](/assets/component-styling/component-styling-11.png) The `Container` components has no outer wrappers, and all styles are attached to it: ```tsx {children} ``` ## Styling a header component Stylize the simple `Header` component on the demo page. Open a browser at [demo.formengine.io](https://demo.formengine.io/). Select the `Subheader` component and click on the "Style" tab as in the screenshot below: ![Component styling 06](/assets/component-styling/component-styling-06.png) Now select the "Center" value in the "Alignment" property. In the Component style code editor, copy the value of the **selected** lines: ```scss element.style { // highlight-start font-size: 48px; padding: 20px; color: rgba(0, 3, 4, 0.596); background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c); // highlight-end } ``` As a result, the component will be styled roughly as in the screenshot: ![Component styling 07](/assets/component-styling/component-styling-07.png) Now let's look at how styling works for custom components. ## Styling a simple component First, let's make a simple component that will render `div`: ```tsx title='StyledDiv.tsx' import {define} from '@react-form-builder/core' import type {ReactNode} from 'react' export interface StyledDivProps { children?: ReactNode // highlight-next-line className?: string } export const StyledDiv = (props: StyledDivProps) => { return
{props.children}
} export const styledDiv = define(StyledDiv, 'StyledDiv') .name('StyledDiv') ``` In the properties of the `StyledDivProps` component, the `className` property is defined, which is responsible for the name of the CSS class. In the component's rendering function, the `className` property was passed to `div`. It's simple. Let's add a component to the application. For simplicity, we will have a designer with only one component: ```tsx title='App.tsx' import {BuilderView, FormBuilder} from '@react-form-builder/designer' import {styledDiv} from './StyledDiv.tsx' const builderView = new BuilderView([styledDiv.build()]) export const App = () => { return } export default App ``` Open your application and add the `StyledDiv` component to the form. Then switch to the "Styled" tab in the right pane. You should see something like this: ![Component styling 01](/assets/component-styling/component-styling-01.png) ### Custom style properties You can also bind CSS properties using the [css](/api-reference/@react-form-builder/core/classes/Definer#css) annotation. Take a look at the code below: ```tsx title='StyledDiv.tsx' import {define, oneOf, size} from '@react-form-builder/core' import type {ReactNode} from 'react' //... export const styledDiv = define(StyledDiv, 'StyledDiv') .name('StyledDiv') // highlight-start .css({ borderStyle: oneOf('solid', 'dashed', 'dotted', 'double', 'center', 'groove').default('solid'), borderWidth: size.default('1px'), borderRadius: number.default(0), borderColor: color.default('black'), textAlign: oneOf('start', 'end', 'left', 'right', 'center', 'justify') }) // highlight-end ``` Use the [css](/api-reference/@react-form-builder/core/classes/Definer#css) annotation to describe the CSS styles of the component for the designer. After description is added - the style editors will appear on the "Style" tab: ![Component styling 08](/assets/component-styling/component-styling-08.png) --- # Computed properties URL: https://formengine.io/documentation/features/computed-properties.md # Computed properties When designing a form in the designer, you can set the values of the component properties in the right pane. Opposite the component properties there is a button that allows you to set a calculated value for the property. There are the following types of calculated properties - localization and function. You can read about localization in [this section](/localization) of the documentation. ## A simple example Let's take a simple form containing two input fields, the values of which we need to multiply and display the result. Below is the JSON of this form, you can upload it to the [public demo](https://demo.formengine.io/) via Menu => Upload. ```json { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "Container", "type": "RsContainer", "props": {}, "children": [ { "key": "Input 1", "type": "RsNumberFormat", "props": { "label": { "value": "Amount" } } }, { "key": "Input 2", "type": "RsNumberFormat", "props": { "label": { "value": "Fee" } } }, { "key": "Input 3", "type": "RsNumberFormat", "props": { "label": { "value": "Total" }, "readOnly": { "value": true } } } ], "css": { "any": { "object": { "flexDirection": "row" } } } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` As soon as the form is loaded, select the input field with the label "Amount" and set the key "amount" for it so that we can then access the field value using this key. After that, set the keys for the "Fee" and "Total" fields ("fee" and "total" respectively) in the same way. ![Computed properties 01](/assets/computed-properties/computed-properties-01.png) Now select the "Total" field and click on the button with the pen icon located near the "Value" property. ![Computed properties 02](/assets/computed-properties/computed-properties-02.png) A panel with the property editor appears at the bottom of the screen. Here you can select: 1. Calculable value - to set the value of the property via JavaScript function. 2. Simple value - if you select this option, the property value will no longer be calculable. ![Computed properties 03](/assets/computed-properties/computed-properties-03.png) Select "Calculated Value" and enter the highlighted lines into the code editor as shown below: ```javascript /** * @param {IFormData} form * @return {string} */ function Calculation(form) { // highlight-start const {amount, fee} = form.data if (amount && fee) return amount * fee // highlight-end } ``` ![Computed properties 04](/assets/computed-properties/computed-properties-04.png) Let's break down our function. The function receives the `form` parameter of [IFormData](/api-reference/@react-form-builder/core/interfaces/IFormData) type and should return a `number`. Inside the function we get the data entered in the input field through the `form.data.name` construct. [form.data](/api-reference/@react-form-builder/core/interfaces/IFormData#data) is an object through which we can get and set the form data, `name` is the value of the `key` field of our input field. And then everything is simple, if there is data in the input fields and the data is not zero, the result of the function will be their product. Otherwise, the function returns nothing (undefined). ![Computed properties 05](/assets/computed-properties/computed-properties-05.png) Also, to the right of the code editor, you can see a panel with the test data of the form. You can enter the test data into the editor and click "Run" to test what the function will return. Or you can use the "Autorun" checkbox to automatically test the function when the code changes. You can see an example in the screenshot above. ![Computed properties 06](/assets/computed-properties/computed-properties-06.png) Let's test the form in action. Click the "Save" button in the code editor, and then click on "Preview" in the page header to view the form. Now, if you enter numeric values in the Amount and Fee fields, the value in the Total field will be automatically updated. ![Computed properties 07](/assets/computed-properties/computed-properties-07.png) Here we have made the simplest computable property. ## How it's stored in JSON When editing a form, the values of component properties are set, which are then stored in JSON format. A component property in JSON format is described by the type [ComponentProperty](/api-reference/@react-form-builder/core/interfaces/ComponentProperty). Below is an example of the created form: ```json {41-44} { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "Container", "type": "RsContainer", "props": {}, "children": [ { "key": "amount", "type": "RsNumberFormat", "props": { "label": { "value": "Amount" } } }, { "key": "fee", "type": "RsNumberFormat", "props": { "label": { "value": "Fee" } } }, { "key": "total", "type": "RsNumberFormat", "props": { "label": { "value": "Total" }, "readOnly": { "value": true }, "value": { "computeType": "function", "fnSource": " const {amount, fee} = form.data\n if (amount && fee) return amount * fee" } } } ], "css": { "any": { "object": { "flexDirection": "row" } } } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` Note the highlighted lines. There is a `value` property. The property is set to `"computeType": "function"`, and the body of the function is described in the `fnSource` property. That's it. Try to set the property to a simple value and see the resulting JSON. --- # Conditional rendering URL: https://formengine.io/documentation/features/conditional-rendering.md # Conditional rendering ## Overview FormBuilder out of the box supports conditional rendering for components. For this purpose, a special component property [renderWhen](/api-reference/@react-form-builder/core/classes/ComponentStore#renderwhen) is used. The value of the property is treated as an expression that should return `true` when the component needs to be rendered. The expression in this case is the function text, without the `return` keyword. A `form` variable of type [IFormData](/api-reference/@react-form-builder/core/interfaces/IFormData) is available in the body of the expression, just as it is in [computed properties](/computed-properties). You can also make the property computed if you want to write a full function that calculates whether the component should be displayed. ## Example Create a simple form with two controls: 1. A checkbox with the `checkbox` key. 2. Button (the key of this component does not matter for us). And the Button component will only be rendered if the checkbox is checked. ![Conditional rendering 01](/assets/conditional-rendering/conditional-rendering-01.png) Here is the JSON of the form: ```json {9,31-33} title='SampleForm.json' showLineNumbers { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "checkbox", "type": "RsCheckbox", "props": { "children": { "value": "I agree to receive emails from the subscription." } } }, { "key": "subscribeButton", "type": "RsButton", "props": { "children": { "value": "Subscribe" }, "appearance": { "value": "primary" }, "color": { "value": "green" } }, "renderWhen": { "value": "form.data.checkbox" } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` You can upload this form to our [public demo](https://demo.formengine.io/) to check how it works. Switch to "Preview" mode and click on the checkbox component. The button will only be displayed if the value of the checkbox component is equivalent to `true`. The button will not render if the value is not `true`. The button will also not be in the DOM tree. ![Conditional rendering 02](/assets/conditional-rendering/conditional-rendering-02.png) You can achieve the same behavior by making the property computable: ![Conditional rendering 03](/assets/conditional-rendering/conditional-rendering-03.png) --- # Custom components URL: https://formengine.io/documentation/features/custom-components.md # Custom components ## Overview Custom components in Form Builder are regular React components that are described using the Form Builder API. Describing a component using the API makes it clear to the Form Builder designer which properties of the component can be edited and with which property editors. To add a custom component to the Form Builder tool, you must do the following: 1. Have a custom component (obviously). 2. Describe your custom component using the Form Builder API. 3. Connect your component to the Form Builder designer. Component description consists of defining meta-information about the component - component name, component type, component properties. Meta-information on component properties in Form Builder is called an annotation. Form Builder has the following APIs for describing a component: 1. [define](/api-reference/@react-form-builder/core/functions/define) - is the primary method for defining a component. 2. [string](/api-reference/@react-form-builder/core/variables/string) - annotation builder for properties of type `string`. 3. [boolean](/api-reference/@react-form-builder/core/variables/boolean) - annotation builder for properties of type `boolean`. 4. [number](/api-reference/@react-form-builder/core/variables/number) - annotation builder for properties of type `number`. 5. [size](/api-reference/@react-form-builder/core/variables/size) - annotation builder for properties of type 'CSS unit'. 6. [date](/api-reference/@react-form-builder/core/variables/date) - annotation builder for properties of type `Date`. 7. [time](/api-reference/@react-form-builder/core/variables/time) - annotation builder for properties of type `Time`. 8. [array](/api-reference/@react-form-builder/core/variables/array) - annotation builder for properties of type `array`. 9. [color](/api-reference/@react-form-builder/core/variables/color) - annotation builder for properties of type `color`. 10. [className](/api-reference/@react-form-builder/core/variables/className) - annotation builder for properties containing the CSS class name. 11. [event](/api-reference/@react-form-builder/core/variables/event) - annotation builder for properties of type `event`. 12. [node](/api-reference/@react-form-builder/core/variables/node) - annotation builder for properties of type `ReactNode`. 13. [oneOf](/api-reference/@react-form-builder/core/functions/oneOf) - annotation builder for properties of type `enum`, the property value can only be one of enum. 14. [someOf](/api-reference/@react-form-builder/core/functions/someOf) - annotation builder for properties of type `enum`, the property value can contain multiple enum values. 15. [readOnly](/api-reference/@react-form-builder/core/variables/readOnly) - annotation builder for `boolean` properties that make a component read-only. 16. There are other APIs for describing component properties, you can find them in the documentation, these APIs deal with describing synthetic properties of a component (e.g. a set of arbitrary HTML attributes). ## Example of a custom component definition Well, let's describe some existing component from the popular [MUI](https://mui.com/) library. As an example, let's take a [Button](https://mui.com/material-ui/api/button/): ```typescript import {Button} from '@mui/material' import {boolean, define, event, oneOf, string} from '@react-form-builder/core' // Let's call our component matButton, using the prefix 'mat' to make it easy to understand // from the name that the component belongs to the MUI library. // // Here we call the define function and pass it two parameters - the Button component // and the unique name of the component type. export const matButton = define(Button, 'MatButton') // component name displayed in the component panel in the designer .name('Button') // define the component properties that we want to edit in the designer .props({ // button text children: string.named('Caption').default('Button'), // button color color: oneOf('inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'), // button disable flag disabled: boolean, // callback fired when the button is clicked. onClick: event, }) ``` ## Define a custom component from own component library The definition from your own component is completely similar to the example. You can use any React component. ```tsx import {define, event, string} from '@react-form-builder/core' const MyButton = ({children, disabled, ...props}: ComponentProps) => { return } export const myButton = define(MyButton, 'MyButton') .name('My Button') .category('Custom') .props({ // button text children: string.named('Caption').default('Button'), // callback fired when the button is clicked. onClick: event, }) ``` ## Example of an application with a custom component Let's create a React application from scratch and connect this button to the application. We will use [Create React App](https://create-react-app.dev/) to create the application. Open a shell and run the following commands: ### Creating an application that displays Form Builder ```bash npx create-react-app my-app --template typescript cd my-app ``` Then install the Form Builder dependencies: ```bash npm install @react-form-builder/core @react-form-builder/designer ``` - @react-form-builder/core - this package is needed to define components and display them. - @react-form-builder/designer - this package is the actual Form Builder designer. Then open the file `src/index.tsx` and copy and paste the following contents into it (we have removed the styles imported from the `index.css` file): ```tsx title='src/index.tsx' import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import reportWebVitals from './reportWebVitals' const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ) root.render( ) // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals() ``` Now open the file `src/App.tsx` and copy and paste the following contents there: ```tsx title='src/App.tsx' import React from 'react' // highlight-next-line import {BuilderView, FormBuilder} from '@react-form-builder/designer' // highlight-next-line const builderView = new BuilderView([]) function App() { // highlight-next-line return } export default App ``` Open a shell and run the application using the following command: ```bash npm run start ``` Once the application is compiled, the Form Builder should appear on the web page: ![Custom components 01](/assets/custom-components/custom-components-01.png) Now let's break down what we did. 1. Imported [BuilderView](/api-reference/@react-form-builder/core/classes/BuilderView), [FormBuilder](/api-reference/@react-form-builder/designer/functions/FormBuilder) from `@react-form-builder/designer` package. 2. Created a `builderView` variable of type `BuilderView`. We passed an empty array as a parameter to the `BuilderView` constructor - this is an empty array with the component's metadata. 3. In the React component `App`, we rendered the `FormBuilder` component with the component metadata from the `builderView` variable. ### Adding a custom component Open the shell and stop the application (Ctrl+C). Then add the `@mui/material` library with the following command: ```bash npm install @mui/material ``` Create a file `src/MatButton.tsx` with the following contents (similar to the one discussed earlier in this article): ```tsx title='src/MatButton.tsx' import {Button} from '@mui/material' import {boolean, define, oneOf, string, event} from '@react-form-builder/core' // Let's call our component matButton, using the prefix 'mat' to make it easy to understand // from the name that the component belongs to the MUI library. // // Here we call the define function and pass it two parameters - the Button component // and the unique name of the component type. export const matButton = define(Button, 'MatButton') // component name displayed in the component panel in the designer .name('Button') // define the component properties that we want to edit in the designer .props({ // button text children: string.named('Caption').default('Button'), // button color color: oneOf('inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'), // button disable flag disabled: boolean, // callback fired when the button is clicked. onClick: event, }) ``` And now we only need to connect our custom component to `BuilderView`. To do this, we need to import our custom component into the `src/App.tsx` file and add it to the array in the `BuilderView` constructor parameter. Take a look at the modified `src/App.tsx` file: ```tsx title='src/App.tsx' import React from 'react' import {BuilderView, FormBuilder} from '@react-form-builder/designer' // highlight-next-line import {matButton} from './MatButton' // highlight-next-line const builderView = new BuilderView([matButton.build()]) function App() { return } export default App ``` We use the `matButton.build()` method because the `matButton` variable is the component's metadata builder. After calling the [build](/api-reference/@react-form-builder/core/classes/Definer#build) method, we will get an instance of [BuilderComponent](/api-reference/@react-form-builder/core/interfaces/BuilderComponent), which contains the metadata needed at design time and at runtime. Now it's time to check how our component looks in the designer. Launch the application using the command: ```bash npm run start ``` You will see in your browser that the component has appeared in the list of components on the left: ![Custom components 02](/assets/custom-components/custom-components-02.png) Drag the component onto the form from the panel on the left, or add it using the "+" button. In the right pane, you can see that the component properties we defined are available for editing: ![Custom components 03](/assets/custom-components/custom-components-03.png) Now you can work with a custom component in the same way as inbuilt components, based on React Suite. By changing the properties of the component we can see how the component changes on the form: ![Custom components 04](/assets/custom-components/custom-components-04.png) ### Form with custom component After creating a form in the designer, you can copy (or download) the form code and pass the form code to the [FormViewer](/api-reference/@react-form-builder/core/functions/FormViewer), a component for displaying forms. Here is an example of a form with a custom component: ```json { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "MatButton 1", "type": "MatButton", "props": { "children": { "value": "Hello World!" }, "color": { "value": "warning" } }, "events": { "onClick": [ { "name": "log", "type": "common" } ] } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` Let's display this form in the `FormViewer` component. Copy and paste the following code into the `src/App.tsx` file: ```tsx title='src/App.tsx' // highlight-next-line import {createView, FormViewer} from '@react-form-builder/core' import {BuilderView, FormBuilder} from '@react-form-builder/designer' import React from 'react' import {matButton} from './MatButton' const builderView = new BuilderView([matButton.build()]) // highlight-next-line const view = createView([matButton.build().model]) // highlight-start const form = { 'version': '1', 'form': { 'key': 'Screen', 'type': 'Screen', 'props': {}, 'children': [ { 'key': 'MatButton 1', 'type': 'MatButton', 'props': { 'children': { 'value': 'Hello World!' }, 'color': { 'value': 'warning' } }, 'events': { 'onClick': [ { 'name': 'log', 'type': 'common' } ] } } ] }, 'localization': {}, 'languages': [ { 'code': 'en', 'dialect': 'US', 'name': 'English', 'description': 'American English', 'bidi': 'ltr' } ], 'defaultLanguage': 'en-US' } // highlight-end function App() { // highlight-start // return return JSON.stringify(form)}/> // highlight-end } export default App ``` Let's take a look at what has changed in the application: 1. Imported createView, [FormViewer](/api-reference/@react-form-builder/core/functions/FormViewer) from @react-form-builder/core package. 2. Created a set of metadata for `FormViewer` and saved it to a view variable. The `FormViewer` component does not need all the metadata of the component, what is in the `model` field is enough. The [createView](/api-reference/@react-form-builder/core/functions/createView) function creates a [View](/api-reference/@react-form-builder/core/classes/View) object that contains information about the components required to display the form. 3. Added a form and saved it to the `form` variable. 4. Finally, instead of the FormBuilder component, we rendered the FormViewer component, passing `view` and the `getForm` function to it. The `getForm` function should return a string containing the JSON of the form. Opening the application in a browser you can see a simple form with a custom component. When you click on the component, the event is logged to the console. ![Custom components 05](/assets/custom-components/custom-components-05.png) ### Custom component containing data Okay, but what if we need a component that contains data? For that, we must also define a component, but we must also apply the [valued](/api-reference/@react-form-builder/core/classes/Annotation#valued) method to one of the component's properties. Once we do this, Form Builder will realise that this property of the component contains its value. The component must also have an `onChange` property, which must take the value of the component as a parameter. To summarise, you need to: 1. Define one of the component properties as [valued](/api-reference/@react-form-builder/core/classes/Annotation#valued). 2. Define a `onChange` functional property in the component, such as this: ```typescript onChange?: (value: any) => void ``` Let's add the [Input](https://mui.com/material-ui/api/input/) component to the designer. Note that this component already has a [onChange](https://mui.com/material-ui/api/input-base/#InputBase-prop-onChange) property, and its signature doesn't fit Form Builder: ```typescript function onChange(event: React.ChangeEvent): void ``` Well, we can just make a wrapper component and define everything we need in it. Create a file `src/MatInput.tsx` and add the following content to it: ```tsx title='src/MatInput.tsx' import {Input, InputProps} from '@mui/material' import {define, string} from '@react-form-builder/core' // highlight-start type MatInputProps = InputProps & { onChange?: (value: any) => void } // highlight-end const MatInput = (props: MatInputProps) => { const {onChange, ...otherProps} = props // highlight-start return { onChange?.(event.target.value) }}/> // highlight-end } export const matInput = define(MatInput, 'MatInput') .name('Input') .props({ // highlight-next-line value: string.valued.default('') }) ``` From the code above, you can see that: 1. We defined the `MatInputProps` type, which extends `InputProps` with the required `onChange` method. 2. We defined a `MatInput` component where we set the required behaviour for the `onChange` property. 3. We described the component by adding the `value` property as a string containing a value and having the default value of an empty string (this is to prevent React from writing errors about uncontrolled value to the console). Now you can add this component to `src/App.tsx`. For simplicity only the code for the designer is shown: ```tsx import {BuilderView, FormBuilder} from '@react-form-builder/designer' import React from 'react' import {matButton} from './MatButton' // highlight-next-line import {matInput} from './MatInput' // highlight-next-line const builderView = new BuilderView([matButton.build(), matInput.build()]) function App() { return } export default App ``` By launching the application and adding Input to the form, you can enter data into the Input component and observe how the data on the form changes: ![Custom components 06](/assets/custom-components/custom-components-06.png) ### Kind of a component Also, in some cases, you may need to set the [`kind`](/api-reference/@react-form-builder/core/classes/Definer#kind) of the component. This is a property that shows [how to render](/component-styling#structure) the component. For regular components, it is set to `'component'` by default. You can the `kind` value to `'container'` in case you need the component to be only a container, for its children, without having its own wrappers. ```typescript const myContainer = define(MyContainer) .type('MyContainer') .name('Container') // highlight-next-line .kind('container') .props({children: node}) .css({ flexDirection: flexDirection.default('column'), gap: gap.default('10px') }) ``` ### Component icon If you want to change the component icon that is displayed next to the component name, it is quite easy to do so. Just call the [icon](/api-reference/@react-form-builder/core/classes/Definer#icon) method when selecting a component and pass React `ComponentType` to it, which will draw the icon. Illustrating example: ```typescript jsx {1-5,14} title='Component icon example' showLineNumbers const MyIcon = () => { return } const MyButton = (props: ComponentProps) => { return } const myButton = define(MyButton, 'MyButton') .name('My Button') .category('Custom') .icon(MyIcon) ``` This simple example shows how to connect an icon to a component. On lines 1-5, the React component `MyIcon` that displays the icon is defined - in our case, it's just a circle. On line 14, the `MyIcon` component is connected as an icon for the `MyButton` component. Once the component is connected to the designer, the component icon will be displayed next to the text: ![Custom components 07](/assets/custom-components/custom-components-07.png) ## Conclusion This article showed how to easily connect a custom component to use it in the designer. And also how a custom component is connected and displayed on a form. --- # Designer customization URL: https://formengine.io/documentation/features/designer-customization.md # Designer customization ## Customizing the FormBuilder interface Using the [customization](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#customization) `FormBuilder` prop, you can hide, style, or replace any parts of the FormBuilder interface. A [customization map](/api-reference/@react-form-builder/designer/type-aliases/CustomizationMap) object is passed to this property, in which the [options](/api-reference/@react-form-builder/designer/type-aliases/Options) of the desired component are set using its [customizable key](/api-reference/@react-form-builder/designer/type-aliases/CustomizableKey). You can manage the FormBuilder and get its state in custom components using [useFormBuilder](/api-reference/@react-form-builder/designer/functions/useFormBuilder). It provides access to [IFormBuilder](/api-reference/@react-form-builder/designer/interfaces/IFormBuilder). The management options are limited at the moment, but they will be expanded in the future. Another option for customizing the component is to use pure CSS. Each component has a static CSS class named with the component's name prefixed by `FE_`. This class is applied to the same element as the style or className attributes, utilizing the [customization map](/api-reference/@react-form-builder/designer/type-aliases/CustomizationMap). The components palette in the left panel also has some [additional rules](#components-palette) for CSS customization. A list of customizable components is also available as a [Set](/api-reference/@react-form-builder/designer/variables/CustomizableZone). ### Example ```tsx import {type CustomizationMap, FormBuilder, useFormBuilder} from '@react-form-builder/designer' import {useCallback} from 'react' const CustomToggleModeButton = () => { const builder = useFormBuilder() const label = builder.builderMode === 'builder' ? 'PreviewMode' : 'EditMode' const toggleMode = useCallback(() => { builder.builderMode = builder.builderMode === 'builder' ? 'viewer' : 'builder' }, [builder]) return } const simpleCustomization: CustomizationMap = { // Hiding the "Download" item in the main menu by using nested CSS selectors. MainMenu_Dropdown: { style: ` #menuitem-\\:r5\\: { display: none; } ` }, // Customizing Header styles Header: { className: 'MyClassName', style: { backgroundColor: 'rgba(52,152,255,.25)', borderRadius: '10px', margin: 5, marginBottom: 10, padding: '8px!important' } }, // Adding a custom button to the header toolbar. Header_Toolbar: { customRenderer: defaultElement =>
{defaultElement}
}, // Changing the "Toggle mode" button to a custom component. ToggleModeButton: { customRenderer: () => }, // Hiding the localization dropdown. LocalizationSelect: { hidden: true }, // Hiding the "Json view" button JsonViewButton: { hidden: true }, // Hiding the property code button PropertyCodeButton: { hidden: true } } const FormBuilderApp = () => { return } ``` ![Customization 03](/assets/customization/customization-03.png) ### Complete list of customizable component keys ![Customization 01](/assets/customization/customization-01.png) | # | Name | className | |:--:|:-------------------|-----------------------| | 1 | MainContainer | FE_MainContainer | | 2 | LeftPanel | FE_LeftPanel | | 3 | CentralPanel | FE_CentralPanel | | 4 | RightPanel | FE_RightPanel | | 5 | LeftPanel_Nav | FE_LeftPanel_Nav | | 6 | LeftPanel_Content | FE_LeftPanel_Content | | 7 | Header | FE_Header | | 8 | FormContainer | FE_FormContainer | | 9 | RightPanel_Nav | FE_RightPanel_Nav | | 10 | RightPanel_Content | FE_RightPanel_Content | | 11 | MainMenu_Dropdown | FE_MainMenu_Dropdown | | 12 | MainMenu_Button | FE_MainMenu_Button | | 13 | Header_Toolbar | FE_Header_Toolbar | | 14 | ToggleModeButton | FE_ToggleModeButton | | 15 | ResolutionSelect | FE_ResolutionSelect | | 16 | LocalizationSelect | FE_LocalizationSelect | | 17 | JsonViewButton | FE_JsonViewButton | | 18 | ToggleThemeButton | FE_ToggleThemeButton | ![Customization 02](/assets/customization/customization-02.png) | # | Name | className | |:--:|:-------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------| | 1 | Components_Tab | FE_Components_Tab | | 2 | Components_Tab_Content | FE_Components_Tab_Content | | 3 | Tree_Tab | FE_Tree_Tab | | 4 | Tree_Tab_Content | FE_Tree_Tab_Content | | 5 | Settings_Tab | FE_Settings_Tab | | 6 | Settings_Tab_Content | FE_Settings_Tab_Content | | 7 | Forms_Tab | FE_Forms_Tab | | 8 | Forms_Tab_Content | FE_Forms_Tab_Content | | 9 | Main_Tab | FE_Main_Tab | | 10 | Style_Tab | FE_Style_Tab | | 11 | Actions_Tab | FE_Actions_Tab | | 12 | Rules_Tab | FE_Rules_Tab | | 13 | Main_Tab_Content,
Style_Tab_Content,
Actions_Tab_Content,
Rules_Tab_Content | FE_Main_Tab_Content,
FE_Style_Tab_Content,
FE_Actions_Tab_Content,
FE_Rules_Tab_Content | | 14 | LabeledProperty | FE_LabeledProperty | | 15 | PropertyCodeButton | FE_PropertyCodeButton | | 16 | PropertyLabel | FE_PropertyLabel | | 17 | PropertyInput | FE_PropertyInput | ### Components palette Each group and component receives a set of classes composed of its name and type. When defining a component, you can specify its category. Components with the same category are merged into component groups on the palette. ```typescript {3} export const richTextEditor = define(RichTextEditor, 'RichTextEditor') .name('Rich text editor') .category('fields') .props({ //... }) ``` #### Components group A component group receives the static class `FE_Palette_ComponentGroup` plus a category name prefixed with FE_. ![Groups classes](/assets/customization/customization-groups-classes.png) #### Single component A component receives the static class `FE_Palette_Component` composed with its title and name, both prefixed with FE_. ```typescript {2} export const rsCalendar = define(RsCalendar, 'RsCalendar') .name('Calendar') .props({ // ... }) ``` ![Component classes](/assets/customization/customization-component-classes.png) ## Custom property editors Using the [propertyEditors](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#propertyeditors) FormBuilder prop, you can override existing component property editors or set editor for your [custom property](/api-reference/@react-form-builder/core/functions/createProperty). ### Example ```tsx import type {AnnotationEditorProps} from '@react-form-builder/designer' import {FormBuilder} from '@react-form-builder/designer' import {RgbaColorPicker} from 'react-colorful' const MyKeyInput = (props: AnnotationEditorProps) => { const {value, onChange} = props return onChange(event.target.value)}/> } /** * Converts the string containing a rgba color value into an object. * @param value the string containing a rgba color. * @returns the object with properties '{r, g, b, a}'. */ export function rgbFromString(value: string): RgbaColor { const matchColors = /^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+(?:\.\d+)?))?\)$/ const [, r, g, b, a] = matchColors.exec(value) || [] return {r: Number(r), g: Number(g), b: Number(b), a: Number(a)} } const MyColorInput = (props: AnnotationEditorProps) => { const {value, onChange, onClean, showError, annotation} = props const onColorChange = useCallback((newColor?: RgbaColor) => { if (newColor) { const {r, g, b, a} = newColor onChange(`rgba(${r}, ${g}, ${b}, ${a})`) return } onChange(newColor) }, [onChange]) const color = rgbFromString(value ?? 'rgba(255, 255, 255, 0)') return
} const FormBuilderApp = () => { return } ``` --- # Designer localization URL: https://formengine.io/documentation/features/designer-localization.md Using custom languages in Designer can greatly enhance your project by allowing you to target a specific audience or customize the user experience. You can localize elements such as menu names, component names, property names, and so on. By using custom languages, you can ensure that these elements are displayed in the desired language. To provide localization for Designer, it is required to use [i18n](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#i18n) property. This will ensure that the interface is displayed in the desired language, providing users with a more customized experience. Below is an example of how to configure and manage custom languages for Designer. Let's provide custom localization for the left static menu to French and Turkish by using the following snippet: ```tsx import {frFR, trTR} from 'rsuite/esm/locales/index.js' const builderLanguages: FormBuilderI18n = { languages: [ new Language('fr', 'FR', 'French', 'Français'), new Language('tr', 'TR', 'Turkish', 'Türkçe'), ], getData: async languageFullCode => { if (languageFullCode === 'tr-TR') { return { data: {leftMenu: {menu: 'Menü'}}, componentsLocale: trTR } } return { data: {leftMenu: {menu: 'Menu'}}, componentsLocale: frFR } } } ``` Therefore, the left menu should be localized to French and Turkish. Use similar logic to customize other elements of the Designer. The translation files can be found in the `@react-form-builder/designer/dist/locales/` folder (inside your `node_modules` directory): ![Translation files](/assets/features/designer-localization/designer-localization-01.png "Translation files") --- # Disabled and read-only URL: https://formengine.io/documentation/features/disabled-and-read-only.md # Disabled and read-only properties You can make all or part of the form disabled or read-only. There are several mechanisms for this. :::info Important For components that do not have `readOnly` and `disabled` properties this mechanism does not apply. ::: ## The FormViewer component properties disabled and readOnly Use the [readOnly](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#disabled) property to make the form read-only. Use the [disabled](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#readonly) property to disable components. These properties apply to any form. ```typescript jsx {3,4} const App = () => { return } ``` ## Screen component properties These properties are stored in the form and affect all child components of the form. ![Screen disabled](/assets/features/disabled-and-read-only/disabled-and-read-only-01.png) ## Container component properties These properties will affect all child components of the [Container](/components-library/structure-components/container) component. ![Container disabled](/assets/features/disabled-and-read-only/disabled-and-read-only-02.png) ## Template properties These properties will affect the entire template used. ![Template disabled](/assets/features/disabled-and-read-only/disabled-and-read-only-03.png) ## Custom component properties To describe a component property as `disabled` use the [disabled](/api-reference/@react-form-builder/core/variables/disabled) variable. To describe a component property as `readOnly` use the [readOnly](/api-reference/@react-form-builder/core/variables/readOnly) variable. ```tsx {1,4,5,9,18-19} showLineNumbers import {buildForm, createView, define, disabled, FormViewer, readOnly} from '@react-form-builder/core' interface MyComponentProps { disabled?: boolean readOnly?: boolean } const MyComponent = (props: MyComponentProps) => { const {disabled, readOnly} = props return
{disabled ? 'Disabled' : 'Enabled'}
{readOnly ? 'Read-only' : 'Writable'}
} const myComponent = define(MyComponent, 'MyComponent') .props({ disabled: disabled, readOnly: readOnly, }) const view = createView([myComponent.build().model]) const form = buildForm() .component('myComponent', 'MyComponent') .json() export const MyViewer = () => { return form} /> } ``` --- # Form storage URL: https://formengine.io/documentation/features/form-storage.md # Form storage By default, the designer does not use external form stores. In this mode you can create forms, export and import forms to JSON files. If this is not enough for you and you would like to save forms in the form store, you can do it by connecting an external form store. The first thing you need to do is to implement the [IFormStorage](/api-reference/@react-form-builder/designer/interfaces/IFormStorage) interface. Then you need to pass the `IFormStorage` implementation to the [formStorage](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#formstorage) property of the `FormBuilder` component. ```jsx title='Sample code' const formStorage = new MyFormStorage() return ``` ## Example of IFormStorage working with IndexedDB The example below works with the npm package [idb-keyval](https://www.npmjs.com/package/idb-keyval), which you can install with the command: ```bash npm install idb-keyval ``` ```typescript title='IndexedDbFormStorage.ts' import type {IFormStorage} from '@react-form-builder/designer' import type {UseStore} from 'idb-keyval' import {kvClear, kvCreateStore, kvDel, kvGet, kvKeys, kvSet} from './KeyValueStorage' /** * Stores forms in IndexedDB. */ export class IndexedDbFormStorage implements IFormStorage { #customStore: UseStore /** * Constructor. * @param dbName the database name. * @param storeName the store name. */ constructor(dbName: string, storeName: string) { this.#customStore = kvCreateStore(dbName, storeName) } /** * Init IndexedDB with specified initial data. * @param initialData the initial data. */ async init(initialData: Record) { for (const formName in initialData) { const formNames = await this.getFormNames() if (formNames.indexOf(formName) === -1) { await this.saveForm(formName, initialData[formName]) } } } /** * @inheritDoc */ async getForm(formName: string) { const formValue = await kvGet(formName, this.#customStore) if (!formValue) throw new Error(`Cannot find form '${formName}'`) return formValue } /** * @inheritDoc */ getFormNames(): Promise { return kvKeys(this.#customStore) } /** * @inheritDoc */ removeForm(formName: string): Promise { return kvDel(formName, this.#customStore) } /** * @inheritDoc */ async saveForm(formName: string, formValue: string): Promise { return await kvSet(formName, formValue, this.#customStore) } /** * Clears all values in the storage. * @returns the Promise with the result of the work. */ async clear() { return await kvClear(this.#customStore) } } ``` ```typescript title='KeyValueStorage.ts' import {clear, createStore, del, get, keys, set, UseStore} from 'idb-keyval' const indexedDbExists = !!window.indexedDB /** * Creates key-value storage. * @param dbName the database name. * @param storeName the store name. * @returns the object for storage management. */ export const kvCreateStore = (dbName: string, storeName: string): UseStore => { if (!indexedDbExists) return {} as UseStore return createStore(dbName, storeName) } /** * Removes the value from the store by the specified key. * @param key the key. * @param customStore the store. * @returns the Promise, which can be rejected if operations failed to complete. */ export const kvDel = (key: IDBValidKey, customStore?: UseStore): Promise => { if (!indexedDbExists) return Promise.reject() return del(key, customStore) } /** * Returns a value from the store for the specified key. * @param key the key. * @param customStore the store. * @returns the Promise with a value or undefined if no value is found. */ export const kvGet = (key: IDBValidKey, customStore?: UseStore): Promise => { if (!indexedDbExists) return Promise.reject() return get(key, customStore) } /** * Returns an array with all available keys from the store. * @param customStore the store. * @returns the Promise with the array with all available keys. */ export const kvKeys = (customStore?: UseStore): Promise => { if (!indexedDbExists) return Promise.reject() return keys(customStore) } /** * Sets the value in the store by the specified key. * @param key the key. * @param value the value. * @param customStore the store. * @returns the Promise, which can be rejected if operations failed to complete. */ export const kvSet = (key: IDBValidKey, value: any, customStore?: UseStore): Promise => { if (!indexedDbExists) return Promise.reject() return set(key, value, customStore) } /** * Clears all values in the store. * @param customStore the store. * @returns the Promise, which can be rejected if operations failed to complete. */ export const kvClear = (customStore?: UseStore): Promise => { if (!indexedDbExists) return Promise.reject() return clear(customStore) } ``` --- # Form's JSON Each form created in the form designer is JSON. With the designer, you can export a form to JSON, and you can import a form from JSON. Let's take for example the form from [this section](/overview#creating-a-simple-form) of the documentation. ## Export form to JSON To export a JSON form, go to the designer interface and click the blue menu button and select "Download". ![Form's JSON 01](/assets/forms-json/forms-json-01.png) The form will be saved to a file with the extension `.json`. ## Get the form's JSON in React component If you need get the form's JSON inside the React component body, you can use the [IFormBuilder](/api-reference/@react-form-builder/designer/interfaces/IFormBuilder) ref: ```tsx const FormBuilderApp = () => { const builderRef = useRef() const setRef = (builder: IFormBuilder | null) => { if (builder) { builderRef.current = builder const formJSON = builder.formAsString console.log(formJSON) } } return } ``` ## Import form from JSON To import a form in JSON format, select the blue menu button in the designer, and then select "Upload". ![Form's JSON 02](/assets/forms-json/forms-json-02.png) ## Embedded JSON form editor You can also edit the form data in JSON directly in the form designer. To do this, you need to click the "Edit JSON" button, as in the screenshot below. ![img.png](/assets/forms-json/forms-json-03.png) This opens the built-in JSON form code editor. After you close the form by clicking the close button in the top right corner of the screen, the JSON with the form code will be applied in the form designer. ![img_1.png](/assets/forms-json/forms-json-04.png) ## JSON form description Let's take a look at what a JSON form is, below is an example: ```json { "version": "1", "actions": { "logValue": { "body": " console.log('Name', e.data.name)", "params": {} } }, "tooltipType": "RsTooltip", "errorType": "RsErrorMessage", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "name", "type": "RsInput", "props": { "label": { "value": "Name" } }, "schema": { "validations": [ { "key": "required" }, { "key": "min", "args": { "limit": 3 } } ] } }, { "key": "RsButton 1", "type": "RsButton", "props": { "children": { "value": "Submit" } }, "events": { "onClick": [ { "name": "validate", "type": "common" }, { "name": "logValue", "type": "code" } ] }, "tooltipProps": { "text": { "value": "Hello, world!" }, "trigger": { "value": [ "hover", "focus" ] } } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` The form is represented by the [PersistedForm](/api-reference/@react-form-builder/core/interfaces/PersistedForm) type. Let's take a closer look at the parts of this JSON. ### Version This is the version of the form saved in JSON format. The list of possible versions is listed in [PersistedFormVersion](/api-reference/@react-form-builder/core/enumerations/PersistedFormVersion). ```json { "version": "1", ... } ``` ### Actions A list of actions is simply a Record, the key in that Record is the name of the action, the value is the function body and function parameters. ```json { "actions": { "logValue": { "body": " console.log('Name', e.data.name)", "params": {} } }, ... } ``` ### Types of error and tooltip components - `tooltipType` - the name of the component type (usually the displayName of the React component) that displays the tooltip. - `errorType` - the name of the component type (usually the displayName of the React component) that displays the error. ```json { ... "tooltipType": "RsTooltip", "errorType": "RsErrorMessage", ... } ``` ### Form This describes the form itself, which is represented by a component tree, see the [ComponentStore](/api-reference/@react-form-builder/core/classes/ComponentStore) type for more details. form is the root element of the component tree. ```json { ..., "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "name", "type": "RsInput", "props": { "label": { "value": "Name" } }, "schema": { "validations": [ { "key": "required" }, { "key": "min", "args": { "limit": 3 } } ] } }, { "key": "RsButton 1", "type": "RsButton", "props": { "children": { "value": "Submit" } }, "events": { "onClick": [ { "name": "validate", "type": "common" }, { "name": "logValue", "type": "code" } ] }, "tooltipProps": { "text": { "value": "Hello, world!" }, "trigger": { "value": [ "hover", "focus" ] } } } ] }, ... } ``` ### Localization The next set of data relates to localization. - `localization` - a form localization data ( see [LocalizationValue](/api-reference/@react-form-builder/core/type-aliases/LocalizationValue)). The [Fluent](https://projectfluent.org/) language is used for localization. - `languages` - an array of languages that the form supports. The language is described by the [Language](/api-reference/@react-form-builder/core/classes/Language) type. - `defaultLanguage` - the default form language, e.g. 'en-US'. ```json { ... "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` --- # Localization URL: https://formengine.io/documentation/features/localization.md # Localization ## Overview Some component properties can be localized. In order for a component property to be localizable, the following conditions must be met - the property must be of type [string](/api-reference/@react-form-builder/core/variables/string) and the [notLocalize](/api-reference/@react-form-builder/core/classes/BaseBuilder#notlocalize) method has not been called for this property. Here is an example of a component where the `name` property is localized, but the `value` property is not: ```typescript jsx title='MyComponent.tsx' import {define, string} from '@react-form-builder/core' interface MyComponentProps { name: string value: string } const MyComponent = (props: MyComponentProps) => { return {props.name}: {props.value} } export const myComponent = define(MyComponent) .name('MyComponent') .type('MyComponent') .props({ name: string, value: string.notLocalize }) ``` ## Example of localization The form builder uses the [Fluent](https://projectfluent.org/) library to localize component properties. We recommend that you follow this link and familiarize yourself with the capabilities of this library. For the example, we will create a form to display the data as in the example on the Fluent website. The form will have a field for entering the username, fields for entering the number of photos and selecting the gender. At the bottom of the form there will be two static fields to display localized data. You can simply copy the JSON below and upload it to the public [demo](https://demo.formengine.io/). ```json {9,18,27,58-61,68-71,80,85,92,99,127} showLineNumbers { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "userName", "type": "RsInput", "props": { "label": { "value": "User name" } } }, { "key": "photoCount", "type": "RsNumberFormat", "props": { "label": { "value": "Photo count" } } }, { "key": "userGender", "type": "RsRadioGroup", "props": { "name": { "value": "Gender" }, "label": { "value": "Gender" }, "items": { "value": [ { "value": "male", "label": "Male" }, { "value": "female", "label": "Female" }, { "value": "unspecified", "label": "Unspecified" } ] } } }, { "key": "RsStaticContent 1", "type": "RsStaticContent", "props": { "content": { "value": "Greetings", "computeType": "localization" } } }, { "key": "RsStaticContent 2", "type": "RsStaticContent", "props": { "content": { "value": "shared photos", "computeType": "localization" } } } ] }, "localization": { "en-US": { "RsStaticContent_1": { "component": { "content": "Hello, {$userName}!" } }, "RsStaticContent_2": { "component": { "content": "{$userName} {$photoCount ->\n [one] added a new photo\n *[other] added {$photoCount} new photos\n } to {$userGender ->\n [male] his stream\n [female] her stream\n *[other] their stream\n }." } } }, "de-DE": { "RsStaticContent_1": { "component": { "content": "Hallo, {$userName}!" } } }, "fr-FR": { "RsStaticContent_1": { "component": { "content": "Bonjour, {$userName}!" } } } }, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" }, { "code": "de", "dialect": "DE", "name": "Deutsch", "description": "German", "bidi": "ltr" }, { "code": "fr", "dialect": "FR", "name": "Français", "description": "French", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` Click on the "Preview" button to test the form. The form language switch is set to "English", which means that localization for English will be applied. The default language for the form is also set to English, see line 127 in JSON. ![Localization 01](/assets/localization/localization-01.png) Let's enter the data into the form. In the "User name" field enter the value "Mark", in the "Photo count" field set the value "3", and in the "Gender" field select "Male". As you enter data, you will see how the value in the text at the bottom of the form changes. After entering the data, you should get a form like this: ![Localization 02](/assets/localization/localization-02.png) Great, let's now switch the language to German in the language switcher on the toolbar. Notice that only the welcome text has changed. This is because only the welcome text is translated into 3 languages - English, German and French (lines 80, 92, 99 in JSON respectively). ![Localization 03](/assets/localization/localization-03.png) Switch the language of the form to French, and the welcome text will change as well. ![Localization 04](/assets/localization/localization-04.png) You can also try switching the form language to other languages and see what happens. If there is no localization for some language - the localization for the default language will work. ## Localization editing Click the "Edit" button to return to editing the form. In the panel on the left you can switch to the "Settings" section, where the form settings are located. In the "Language settings" section you can see the default language settings. ![Localization 05](/assets/localization/localization-05.png) Now select the "RsStaticContent 2" component on the form. In the right pane you can see a blue globe icon next to the "Content" property - this means that the property is defined using localization. ![Localization 06](/assets/localization/localization-06.png) Click on the blue globe icon. And switch to English in the language switcher under the code editor. This language switch changes the language for the localization editor. On the right is a panel with test form data, where you can change the data and check how this or that localization will work. ![Localization 07](/assets/localization/localization-07.png) Switch the language under the code editor to German and paste the text "Vielen Dank!" as in the screenshot below. On the right side you can click the "Run" button to get the localization result. Or select the "Autorun" checkbox to have the localization result recalculated automatically when the data changes. To save the data - click the "Save" button. ![Localization 08](/assets/localization/localization-08.png) Also if you need to access data within nested objects, you can do so using dot notation. This method allows you to retrieve values at deeper levels by specifying the full path. ![Localization 09](/assets/localization/localization-09.png) Click the "Close" button to close the localization editor. Change the language of the form in the switch above, as on the screenshot - the text will change to the one we just wrote. ![Localization 09](/assets/localization/localization-10.png) ## Custom localization If you want to use your localization system, you can plug it in. To do this, you need to pass the localization function through the [localize](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#localize) property. The [parameters](/api-reference/@react-form-builder/core/type-aliases/ComponentLocalizer) are passed to the function input: - localization language. - component settings. Your function should return a `Record` with the localized values of the component's properties. If the function does not localize the component properties, it should return an empty object. A simple example of a localization function: ```typescript function localizer(componentStore: ComponentStore, language: Language): Record { return componentStore.key === 'comment' ? {'placeholder': `${language?.fullCode || 'default language'}`} : {} } ``` This function localizes only the `placeholder` property and only on a component with the `comment` key. The `placeholder` property is set to the full code of the selected language. You can pass the current language through the [language](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#language) property. ## Additional localization functions In addition to localization properties and functions mentioned above, there are several functions that allow you to customize specific aspects of localization. For example, such functions can determine the direction of text, which is crucial for certain languages. ### withViewerWrapper The [withViewerWrapper](/api-reference/@react-form-builder/core/classes/View#withviewerwrapper) allows you to add a wrapper to the form viewer. This wrapper can be utilized to modify various localization properties and provide a customized experience for different languages or locales. The wrapper component accepts properties of type [FormViewerWrapperComponentProps](/api-reference/@react-form-builder/core/interfaces/FormViewerWrapperComponentProps). You can define your own wrapper for your component library and pass it to the `withViewerWrapper` function. One practical example of using the `withViewerWrapper` function is by implementing the [RsLocalizationWrapper](/api-reference/@react-form-builder/components-rsuite/functions/RsLocalizationWrapper) for React Suite components, i.e.: ```typescript view.withViewerWrapper(RsLocalizationWrapper) ``` This wrapper allows you to configure localization settings for components. For example, this is how the `RsLocalizationWrapper` component implementation looks like: ```tsx export const RsLocalizationWrapper = ({language, children}: FormViewerWrapperComponentProps) => { return {children} } ``` Let's take a closer look at what this code does. The `RsLocalizationWrapper` function returns the [CustomProvider](https://rsuitejs.com/components/custom-provider/#custom-provider) component, setting the `rtl` property to `true` if the language has the [bidi](/api-reference/@react-form-builder/core/classes/Language#bidi) property set to `rtl`, and also sets the locale for the components. The `children` are the child components to be wrapped. You can write a similar wrapper if you use [MUI components](https://mui.com/material-ui/customization/right-to-left/), for example. ### withCssLoader The [withCssLoader](/api-reference/@react-form-builder/core/classes/View#withcssloader) allows you to apply a CSS loader to the component based on the BiDi (Bidirectional) layout. This enables you to load specific CSS styles based on the text direction and provides flexibility in customizing the component's appearance. Here are examples of how the withCssLoader function can be implemented: ```typescript view .withCssLoader(BiDi.LTR, ltrCssLoader) .withCssLoader(BiDi.RTL, rtlCssLoader) .withCssLoader('common', formEngineRsuiteCssLoader) ``` The first loader, [ltrCssLoader](/api-reference/@react-form-builder/components-rsuite/functions/ltrCssLoader), provides a CSS loader for left-to-right (LTR) text direction. This loader will be applied to the component when the text direction is LTR. Similarly, on the next line is a CSS loader for right-to-left (RTL) text direction, [rtlCssLoader](/api-reference/@react-form-builder/components-rsuite/functions/rtlCssLoader). This loader will be applied when the text direction is RTL. Finally, the last line specifies a CSS loader named [formEngineRsuiteCssLoader](/api-reference/@react-form-builder/components-rsuite/functions/formEngineRsuiteCssLoader), which is loaded regardless of the text direction. The following snippet showcases how the loaders can be implemented: ```typescript /** * Represents a relationship attribute value used in HTML. */ export type Rel = 'stylesheet' | string /** * Loads a resource into the document head asynchronously. * @param id the identifier of the resource. * @param href represents a URL to the resource. * @param rel the relationship of the resource to the document. * @returns the promise that resolves when the resource has been loaded successfully. */ export const loadResource = (id: string, href: string, rel: Rel) => { return new Promise((resolve, reject) => { if (document.getElementById(id)) return resolve() const link = document.createElement('link') link.id = id link.rel = rel link.href = href link.onload = () => { resolve() } link.onerror = reject document.head.appendChild(link) }) } /** * Unloads a resource from the DOM based on its ID. * @param id the ID of the resource to unload. */ export const unloadResource = (id: string) => { const link = document.getElementById(id) link?.parentNode?.removeChild(link) } export const ltrCssLoader = async () => { const href = (await import('../public/css/rsuite-no-reset.min.css?url')).default await loadResource(resourceIds[BiDi.LTR], href, 'stylesheet') unloadResource(resourceIds[BiDi.RTL]) } export const rtlCssLoader = async () => { const href = (await import('../public/css/rsuite-no-reset-rtl.min.css?url')).default await loadResource(resourceIds[BiDi.RTL], href, 'stylesheet') unloadResource(resourceIds[BiDi.LTR]) } export const formEngineRsuiteCssLoader = async () => { const href = (await import('../public/css/formengine-rsuite.css?url')).default await loadResource('form-engine-css', href, 'stylesheet') } ``` In the example above, the `ltrCssLoader` function loads the Left-To-Right (LTR) CSS for the React Suite library. It imports the CSS file and uses the `loadResource` function to load the CSS dynamically. Similarly, the `rtlCssLoader` function loads the Right-to-Left (RTL) CSS for the React Suite library. It imports the RTL CSS file and uses the `loadResource` function to load it. The `formEngineRsuiteCssLoader` function loads custom styles for the FormEngine over the React Suite library. ## Setting the form language To set the language of the form, you can pass the current language through the [language](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#language) property: ```tsx ``` ## Conclusion We have shown how localization of component properties works in Form Builder. Localization works the same way as [computed properties](/computed-properties) work, except that the Fluent language is used for localization. We also showed that localization works reactively when data changes. --- # Nested components URL: https://formengine.io/documentation/features/nested-components.md # Nested components Form Builder supports nested components out of the box. There are two types of nested components: 1. Simple nested components. 2. Templates. ## Simple nested components Simple nested component is a React component, that binds to one of the component property. For example your have your React component, where one of the properties described as the [node](/api-reference/@react-form-builder/core/variables/node). The `children` property is also treated as a `node` property. A component that is specified in the `node` property is considered a nested component. ## Templates A template is simply a form within another form. The template is treated as a normal component, but with some features: 1. The [FormViewer](/api-reference/@react-form-builder/core/functions/FormViewer) component is used to display the template. 2. The data inside the template is isolated from the parent form. 3. Data can be transferred to the parent form as a nested object, or as a part of the parent form (regulated by the "Store data in parent form" flag). ## Slots Each component property defined as a `node` property is treated as a slot where child components can be added. A component can have any number of slots to which child components can be added. As an example, let's see how the [Message](https://rsuitejs.com/components/message/#props-amp-hooks) component from the React Suite library is described in Form Builder: ```typescript title='RsMessage.tsx' import {boolean, define, node, oneOf} from '@react-form-builder/core' import {Message} from 'rsuite' export const rsMessage = define(Message) .type('RsMessage') .name('Message') .props({ // highlight-next-line children: node, closeable: boolean, // highlight-next-line header: node, type: oneOf('info', 'success', 'warning', 'error').default('info') }) ``` There are two component properties that are described as `node`: children and header. You can use this component on our public [demo](https://demo.formengine.io/). Here is a form with a Message component. The Input component is bound to the `header` slot, and the Button component is bound to the `children` slot. Note that if the slot is named `children`, the slot name will be missing in the JSON with the form, because `children` is the default slot name. ```json {11,16} title='Example of a form' { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "RsMessage 1", "type": "RsMessage", "props": {}, "children": [ { "key": "RsInput 1", "type": "RsInput", "props": {}, "slot": "header" }, { "key": "RsButton 1", "type": "RsButton", "props": {} } ] } ] } } ``` This is roughly what the form looks like in the screenshot below. In the components tree on the left, you can see that the Input and Button components are children of the Message component. ![Nested Components](/assets/nested-components/nested-components-01.png "Nested Components") ## How it works When rendering a component, the Form Builder first calculates all the properties of the component. After that, all child components are calculated and bound to the component properties by the slot name specified in the child component. If there is no slot name, the default slot, `children`, is used. --- # Preset components URL: https://formengine.io/documentation/features/preset-component.md # Preset components ## Overview When you design a form in Designer, you can save one or more components and their settings to a preset. After saving, the preset will be available for quick insertion as a component on the `Components` tab. To create a preset, select the necessary components and click the `Create a preset component` button (with a bookmark icon) on the toolbar. Differences with [templates](/nested-components#templates): - The components from the preset are inserted into the form separately, without combining into a new entity. - You can edit the components after insertion directly on the form and this will not entail changing the original preset. ## Example 1. Create a simple form with two inputs: 2. Set the label 'Name' to the first input, and 'Email' to the second input. 3. Set the other settings, for example, for the email input field, add the 'Email' validation on the Rules tab. ![Preset component 01](/assets/preset-component/preset-component-01.png) 4. Select both components by pressing Shift and clicking on the components in turn. 5. Click the _Create a preset component_ button (with a bookmark icon) on the toolbar. ![Preset component 02](/assets/preset-component/preset-component-02.png) 6. Set the name and category for the preset in the dialog box. ![Preset component 03](/assets/preset-component/preset-component-03.png) 7. The preset is now available on the components tab. To insert it, drag it onto the form. ![Preset component 04](/assets/preset-component/preset-component-04.png) :::info In the current version, localization is not saved in the preset. We plan to add this feature in the future. ::: ## Predefined presets You can pre-define presets that will be immediately available to the user in the designer. They are created in the same way as regular components, through the [definePreset](/api-reference/@react-form-builder/core/functions/definePreset) function. Here is an example: ```tsx import {rSuiteComponents} from '@react-form-builder/components-rsuite' import {ComponentStore, definePreset} from '@react-form-builder/core' import {BuilderView, FormBuilder} from '@react-form-builder/designer' import {UserInfo} from '@rsuite/icons' const rawComponents = [ { "key": "rsInput1", "type": "RsInput", "props": { "label": { "value": "Name" } } }, { "key": "rsInput3", "type": "RsInput", "props": { "label": { "value": "Email" } }, "schema": { "validations": [ { "key": "email" } ] } } ] const componentStores = rawComponents.map(component => { return Object.assign(new ComponentStore('', component.key), component) }) const userInfoPreset = definePreset('User info', componentStores) .category('fields') .icon(UserInfo) const components = [...rSuiteComponents, userInfoPreset] .map(definer => definer.build()) const view = new BuilderView(components) const FormBuilderApp = () => { return } ``` ## Presets options You can set [preset options](/api-reference/@react-form-builder/designer/interfaces/IPresetComponentOptions) via [componentPresetOptions](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#presetcomponentoptions) FormBuilder prop. ## Custom presets storage Also, using the [onCreate](/api-reference/@react-form-builder/designer/interfaces/IPresetComponentOptions#oncreate) and [onRemove](/api-reference/@react-form-builder/designer/interfaces/IPresetComponentOptions#onremove) callbacks of [componentPresetOptions](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#presetcomponentoptions), you can implement your own preset storage: ```tsx import {rSuiteComponents} from '@react-form-builder/components-rsuite' import {BuilderView, FormBuilder, PresetComponentLocalStorage} from '@react-form-builder/designer' import {useMemo} from 'react' const components = [...rSuiteComponents] .map(definer => definer.build()) const view = new BuilderView(components) export const FormBuilderApp = () => { const storage = useMemo(() => { return new PresetComponentLocalStorage('my-key') }, []) const presets = useMemo(() => storage.loadPresets(), [storage]) return storage.savePreset(preset), onRemove: (name) => storage.removePreset(name) }}/> } ``` Here is the code for the [PresetComponentLocalStorage](/api-reference/@react-form-builder/designer/classes/PresetComponentLocalStorage) class: ```tsx title='PresetComponentLocalStorage.ts' import type {PresetComponent} from './PresetComponent' /** * Class for working with the preset components in the local storage. */ export class PresetComponentLocalStorage { private readonly presetsKey: string /** * Creates an instance of preset storage in local storage. * @param presetsKey the key for the preset components in the local storage. */ constructor(presetsKey = 'presetComponents') { this.presetsKey = presetsKey } /** * Loads the preset components from the local storage. * @returns the preset components. */ loadPresets = (): PresetComponent[] => { return Object.values(this.loadAll()) } /** * Saves the preset component to the local storage. * @param preset the preset component to save. */ savePreset = (preset: PresetComponent): void => { const current = this.loadAll() current[preset.name] = preset this.saveAll(current) } /** * Removes the preset component from the local storage. * @param name the name of the preset component. */ removePreset = (name: string): void => { const current = this.loadAll() delete current[name] this.saveAll(current) } private loadAll = (): Record => { return JSON.parse(localStorage.getItem(this.presetsKey) ?? '{}') ?? {} } private saveAll = (presets: Record): void => { localStorage.setItem(this.presetsKey, JSON.stringify(presets)) } } ``` --- # User defined properties URL: https://formengine.io/documentation/features/user-defined-props.md # User defined properties In cases where you need to change (override) the properties of a component inside the form action or the component code in React, you can use [userDefinedProps](/api-reference/@react-form-builder/core/classes/ComponentData#userdefinedprops) and [setUserDefinedProps](/api-reference/@react-form-builder/core/classes/ActionEventArgs#setuserdefinedprops). It overwrites the properties that will go into the component, replacing the calculated properties as well as the default properties. ## Overriding component properties using an action Imagine that you need to upload a list of cities from the server to **Dropdown** once, when rendering the component. To do this, you need: 1. Add **Dropdown** to the form, select it, and go to the **Actions** tab. 2. Add a new **Code action** in the **onDidMount** event. ![User defined props 01](/assets/user-defined-props/user-defined-props-01.png) 3. Add the following code to the action editor and save: ```typescript /** * @param {ActionEventArgs} e - the action arguments. * @param {} args - the action parameters arguments. */ async function Action(e, args) { const response = await fetch('https://gist.githubusercontent.com/rogargon/5534902/raw/434445021e155240ca78e378f10f70391dd594ea/countries.json') const data = await response.json() const preparedData = data.map(value => ({value, label: value})) e.setUserDefinedProps({data: preparedData}) } ``` ![User defined props 02](/assets/user-defined-props/user-defined-props-02.png) 4. Go to Preview and check it out. The list of countries is now loaded into Dropdown. ![User defined props 03](/assets/user-defined-props/user-defined-props-03.png) ## Overriding the properties of an arbitrary component Inside the React component, you can use the [useComponentData](/api-reference/@react-form-builder/core/functions/useComponentData) hook to access the [userDefinedProps](/api-reference/@react-form-builder/core/classes/ComponentData#userdefinedprops) and [setUserDefinedProps](/api-reference/@react-form-builder/core/classes/ActionEventArgs#setuserdefinedprops) of the current component. You can consider its use using the example of the [Tabs component implementation](/using-tabs). You can also change the properties of another component. Here is an example: ```typescript jsx import {useStore} from '@react-form-builder/core' const MyComponent = () => { const {componentTree} = useStore().form const handleClick = () => { const componentData = componentTree.findByKey('passwordInput') if (componentData) { const currentValue = componentData.userDefinedProps?.passwordMask ?? false componentData.userDefinedProps ??= {} componentData.userDefinedProps.passwordMask = !currentValue } } return } ``` --- # Using tabs URL: https://formengine.io/documentation/features/using-tabs.md # Using tabs Imagine you have a component that displays tabs. As an example, let's use the [Nav](https://rsuitejs.com/components/nav/#nav) component from the React Suite library. The `Nav` component only displays the navigation, but what if we need to display different content when the user switches navigation tabs in the same place? In this case, we can use conditional binding of the child component to the parent component. ## Conditional binding First of all, you need to familiarise yourself with the component slots from this [article](/nested-components#slots). Let's create a custom component that will display tabs and different components depending on which tab is currently active. ```typescript jsx {16,19,20,23-27,55-59} title='RsTab.tsx' showLineNumbers import styled from '@emotion/styled' import {array, boolean, define, node, toLabeledValues, useComponentData} from '@react-form-builder/core' import type {ReactNode, SyntheticEvent} from 'react' import type {NavProps} from 'rsuite' import {Nav} from 'rsuite' import {navProps} from '../commonProperties' type RsItem = { label: string value: string } interface RsTabProps extends NavProps { items?: RsItem[] showNavigation?: boolean pane: ReactNode } const RsTab = ({pane, onSelect, showNavigation, items, ...props}: RsTabProps) => { const componentData = useComponentData() if (!items?.length) return null const onNavSelect = (eventKey: string, event: SyntheticEvent) => { componentData.userDefinedProps ??= {} componentData.userDefinedProps.activeKey = eventKey onSelect?.(eventKey, event) } const activeKey = props.activeKey ?? items?.[0].value return <> {showNavigation === true && {items.map((item, index) => {item.label} )} }
{pane}
} const SNav = styled(Nav)` .builder & .rs-nav-item { z-index: 7; } ` export const rsTab = define(RsTab) .type('RsTab') .name('Tab') .props({ ...navProps, items: array.default(toLabeledValues(['Item1', 'Item2', 'Item3'])), showNavigation: boolean.hinted('Show or hide navigation').default(true), pane: node .withSlotConditionBuilder(props => { return `return parentProps.activeKey === '${props.activeKey?.value ?? props.activeKey}'`; }) .calculable(false).hinted('A child component of the tab'), }) ``` Let's take an in-depth look at how this component works. - Lines 13-17 define the type of properties of the `RsTabProps` component. Line 16 shows that the `pane` property is of type `ReactNode`. - In lines 19-40, the React component `RsTab` is defined. It is a functional React component that receives properties of type `RsTabProps`. - In line 20, the `RsTab` component uses the Form Builder [useComponentData](/api-reference/@react-form-builder/core/functions/useComponentData) hook. This hook returns an instance of class [ComponentData](/api-reference/@react-form-builder/core/classes/ComponentData). The `ComponentData` class is responsible for storing all the data needed to render the component. - The `ComponentData` contains the [userDefinedProps](/api-reference/@react-form-builder/core/classes/ComponentData#userdefinedprops) property. You can set component properties in `userDefinedProps` to override component properties that have been computed by the Form Builder. - Lines 23-27 define the `onNavSelect` handler, which changes the `activeKey` property, the name of the active tab, when the tab is clicked. The `activeKey` property is set via `userDefinedProps`. - Lines 48-60 define the metadata of the `RsTab` component for the Form Builder. - The `pane` property is defined on lines 55-59. - On lines 56-58, the [withSlotConditionBuilder](/api-reference/@react-form-builder/core/classes/NodeAnnotationBuilder#withslotconditionbuilder) function is called. This is where the most entertaining part starts. The `withSlotConditionBuilder` function takes as input a function that should return a text with the source code of another function. ## Slot condition The function that is passed to `withSlotConditionBuilder` receives the `props` parameter as input. **`props` are properties of the component, which are available only inside Form Builder Designer!** :::info When you use a component inside Form Builder Designer, the function passed in `withSlotConditionBuilder` is called, and this function must return the **text** of a function that will run in the component's display mode, that is, outside of Form Builder Designer. The string with the text of the conditional binding function will be calculated at the form design stage and written to the form's JSON. When the form is rendered, Form Builder will compile and execute a function from the saved text. If the function returns `true`, the child component will be bound to the component slot, otherwise the component will not be rendered. ::: Let's take a look at the text of the function that will check the binding condition: ```typescript {2} withSlotConditionBuilder(props => { return `return parentProps.activeKey === '${props.activeKey?.value ?? props.activeKey}'`; }) ``` This function takes as input the `parentProps` parameter, which are the properties of the component to which the child component will be bound. That is, these are also properties of our `RsTab` component, but only used when the component is displayed, not when the component is designed. ## Example form For example, let's open [demo](https://demo.formengine.io/) and add a Tab component to the form. On the first tab let's add Checkbox, on the second tab add TextArea, on the third tab add Image, and look at the resulting JSON of the form: ```json {16-17,23-24,30-31} title='Form.json' showLineNumbers { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "RsTab 1", "type": "RsTab", "props": {}, "children": [ { "key": "RsCheckbox 1", "type": "RsCheckbox", "props": {}, "slot": "pane", "slotCondition": "return parentProps.activeKey === 'Item1'" }, { "key": "RsTextArea 1", "type": "RsTextArea", "props": {}, "slot": "pane", "slotCondition": "return parentProps.activeKey === 'Item2'" }, { "key": "RsImage 1", "type": "RsImage", "props": {}, "slot": "pane", "slotCondition": "return parentProps.activeKey === 'Item3'" } ] } ] } } ``` When we added the Checkbox component to the form, the active tab in the component properties was "Item1". So Form Builder Designer evaluated the function and got the following string as a result: `return parentProps.activeKey === 'Item1'`. This string was stored in the `slotCondition` field, and the slot name was written to the `slot` field with the value `pane`. `pane` is a property of the component to which the conditional binding is performed. The conditions were also calculated for the TextArea component - the active tab was "Item2". Therefore, the text of the check function is `return parentProps.activeKey === 'Item2'`. For the Image component, the active tab at the time of form design was the "Item3" tab. The calculated text of the check function is as follows - `return parentProps.activeKey === 'Item3'`. :::info When Form Builder displays a form, it evaluates the functions from the `slotCondition` and displays the components if the function returned `true`. Since all three functions above are mutually exclusive, only one component, either Checkbox, TextArea or Image, will be bound to the `pane` property and displayed. ::: --- # Validation URL: https://formengine.io/documentation/features/validation.md # Validation ## Overview There are two types of validation in FormBuilder: 1. Field validation - this type of validator will validate only one form field, obviously. 2. Form validation - this type of validator validates the whole form. When validating a form, all validators are executed as asynchronous functions. The validators for fields are called first, then the validators for the form are called. ## Field validation Field validators come in different types: 1. Built-in FormBuilder. There are a number of predefined validators for different data types (string, number, etc.). 2. Defined by code inside the FormBuilder. 3. Passed externally to the FormBuilder/FormViewer component via the [validators](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#validators) parameter. In the simplest case, a validator is a function that returns `true` or `false` or an error text. Field validators are grouped by the type of value being validated (string, number, etc.), i.e. a validator for the string type will not be available in the designer interface for a numeric value, etc. ### Built-in validators To add a validator to a component - select the component in the designer and go to the "Rules" tab as in the screenshot below: ![Validation 01](/assets/validation/validation-01.png) If the "Auto validate" flag is enabled, validators for the component will be automatically called when the value of the field changes, i.e., essentially immediately upon data entry. To add a validator, you can click the "Add a validation rule" button: ![Validation 02](/assets/validation/validation-02.png) For example, we added a "Min" validator that checks that the field value contains at least 5 letters (set in the "Limit" parameter). We left the "Message" parameter blank - if the validation fails, the standard text provided by the built-in validator will be used. If you fill in the "Message" parameter, this value will be used, which can be localized using Fluent! ![Validation 03](/assets/validation/validation-03.png) We can switch to form view mode and start entering data to see how the validator works: ![Validation 04](/assets/validation/validation-04.png) ### Conditional validation If you want the [built-in](#built-in-validators) or [custom](#user-defined-validators) validation to be executed only when certain conditions are met, then you can use the _Validate when_ property. :::info Automatic validation is triggered only when the value of its field is changed. For example, if the form data has been changed, but the field with conditional validation has not changed, then automatic conditional validation for the field will not be triggered. ::: ![Validation 08](/assets/validation/validation-08.png) It is located in the list of parameters of each validation rule and allows you to set the condition in two ways: * Simplified, through the input field, where you can specify a one-line expression, for example `form.data.check1 === true`. * Through the code editor, which can be opened by clicking on the pen icon to the left of the _Validate when_ label. ![Validation 09](/assets/validation/validation-09.png) #### Example 1. Create a simple form with three controls: `Checkbox`, `Input` and `Button`. 2. Set the `check1` key to the checkbox. ![Validation 15](/assets/validation/validation-15.png) 3. For the button, add the action `validate`. ![Validation 10](/assets/validation/validation-10.png) 4. For the input field, add the validation `Required`. ![Validation 11](/assets/validation/validation-11.png) 5. Set the _Validate when_ property for the `Required` validator to `form.data.check1`. ![Validation 12](/assets/validation/validation-12.png) 6. Now, go to the `Preview` mode and press the checkbox to the off position. 7. Click the validation button. You'll notice that no validation is triggered, despite the email field being empty. ![Validation 13](/assets/validation/validation-13.png) 8. If you check the checkbox and then click on the validation button, validation will be triggered. ![Validation 14](/assets/validation/validation-14.png) ### Code validator This type of validation is defined for data of type string. To use this validator - select "Code" from the drop-down menu. ![Validation 05](/assets/validation/validation-05.png) Then click the "Edit code" button to edit the validation function code. Paste the highlighted lines into the code editor. ```javascript /** * @param {string} value the validated value. * @param {IFormData} form the form. * @return {boolean} the validation result. */ async (value, form) => { // highlight-next-line return value !== 'test' && value !== form.data.lastName } ``` Also add the text "no test, please" to the "Message" parameter of the validator as shown in the screenshot below: ![Validation 06](/assets/validation/validation-06.png) As you can see from the code - the validator should return true in case of validation success, in case of error - false. The error text will be taken from the "Message" parameter, as in the case with built-in validators. Click the "Save" button, and go into form preview mode (the "Preview" button), to test how our validator works. If you re-enter the "test" value in the field, you will see two error messages separated by a space. There are two messages because two validators have been triggered - the minimum field length validator and the validator defined by the code. ![Validation 07](/assets/validation/validation-07.png) ### User-defined validators This kind of validators is passed through the [validators](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#validators) property and works the same way as the built-in validators. You can see an example in [this](/usage#viewer) section of the documentation. Once validators are connected via a property, they will be available for selection in the designer and can be handled in the same way as built-in validators. A simple example of validators: ```typescript // You can define custom validators for form fields const customValidators: Validators = { 'string': { 'isHex': { validate: value => /^[0-9A-F]*$/i.test(value) }, 'isHappy': { params: [], validate: value => value === 'Happy' }, 'equals': { params: [ {key: 'value', type: 'string', required: false, default: 'Ring'}, {key: 'message', type: 'string', required: false, default: 'Value must be equals to '} ], validate: (value, _, args) => { const errorMessage = args?.['message'] as string const checkedValue = args?.['value'] as string const errorResult = errorMessage ? errorMessage + checkedValue : false return value !== args?.['value'] ? errorResult : true } } }, 'number': {}, 'boolean': { 'onlyTrue': { validate: value => value === true } }, } ``` ## Form validation ### Form validator editor When editing a form in the designer, you can set a code that will validate the entire form. To do this, go to the **Settings** tab and click the **Edit code** button at the **Form validator** property. ![Validation 16](/assets/validation/validation-16.png) In the edit window, write your validation function, which receives form data as input and returns the result in object format, where the key is the field key and the value is the error text. You can also return an empty object or `undefined` if validation is successful. Example: ```ts /** * @param {Record} formData the form data. * @returns {Record | undefined} the validation result. */ async (formData) => { const result = {} if (formData.input0 !== 'input0') result.input0 = 'invalid input0' if (formData.input2 !== 'input2') result.input2 = 'invalid input2' return result } ``` ### External Whole form validation can be implemented if validators have been passed to the FormBuilder/FormViewer properties in the [formValidators](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#formvalidators) property. [FormValidators](/api-reference/@react-form-builder/core/type-aliases/FormValidators) is an array of the [validation function](/api-reference/@react-form-builder/core/type-aliases/FormValidator). Each form validation function is an asynchronous function that takes form data as input and returns an object with form field validation errors, or an empty object if the form validation is successful. Below is a simple example of validating a form by checking the "login" and "agreeCheckbox" fields: ```typescript const formValidators: FormValidators = [ async (data) => { const result: any = {} if (data.login === 'sun') { result.login = 'Login already exists - sun' } if (data.agreeCheckbox === false) { result.agreeCheckbox = 'Agree checkbox must be checked' } return result } ] ``` --- # Getting started URL: https://formengine.io/documentation/getting-started/index.md ## Key features of Form Builder 1. Web interface with drag and drop functionality. 2. [Adaptive layout](/adaptive-layout). 3. [Built-in form validation or optional external validation](/validation). 4. Built-in web components based on React Suite library. 5. [Easy integration of custom components](/custom-components). 6. [Export form to JSON and import form from JSON](/forms-json). 7. [Powerful internationalization](/localization). 8. [Custom actions](/actions). 9. [Computable properties](/computed-properties). 10. [Templates](/nested-components#templates) (forms within a form). 11. [Camunda FormBuilder](/camunda-integration). 12. [Designer customization](/designer-customization). ## Overview The basic idea behind the Form Builder is simple - an online form is a number of components organized in a tree structure. Each component has a set of properties: 1. Different CSS styles for different screen resolutions. 2. Simple properties (`string`, `boolean`, `number`, etc.). 3. Events (`onClick`, `onSelect`, `onClose`, etc.). 4. Actions are simply functions that are called when some event occurs. 5. A set of rules for validating the value of a component. Some component properties can be calculated using a JavaScript function or translated using the [Fluent](https://projectfluent.org/) localization system. **Form Builder allows you to declaratively describe such components and then use them to create forms in the form designer.** ## Further reading import DocCardList from '@theme/DocCardList'; --- # Installation URL: https://formengine.io/documentation/getting-started/installation.md # Installation ## Designer The form designer in Form Builder is represented by the React component [FormBuilder](/api-reference/@react-form-builder/designer/functions/FormBuilder). The `FormBuilder` component is located in the package [@react-form-builder/designer](https://www.npmjs.com/package/@react-form-builder/designer). To install the package in your application, use the command: ```bash npm install @react-form-builder/designer ``` :::tip If your package manager does not support automatic installation of peer dependencies, for example you use the `--legacy-peer-deps` flag in npm, then you need to install peer dependencies manually. ```bash npm install @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 mobx@6.9.0 rsuite@5.59.1 rsuite-table@5.10.3 --save-exact ``` ::: Below is sample code for embedding the `FormBuilder` component into your application: ```tsx title='App.tsx' import React from 'react' import {BuilderView, FormBuilder} from '@react-form-builder/designer' const builderView = new BuilderView([]) function App() { return } export default App ``` You can find a description of the component properties in the [FormBuilderProps](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps) API. The only mandatory property is [view](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#view), which is a description of the component [metadata](/api-reference/@react-form-builder/core/classes/BuilderView) used to design the form. You can use the pre-built components found in the [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite) package to start a form designer with a populated set of components. Run the following command to install the package: ```bash npm install @react-form-builder/components-rsuite ``` :::tip If your package manager does not support automatic installation of peer dependencies, for example you use the `--legacy-peer-deps` flag in npm, then you need to install peer dependencies manually. ```bash npm install @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 @rsuite/icons@1.0.2 react-number-format@5.1.4 rsuite@5.59.1 --save-exact ``` ::: Then copy and paste the code below: ```tsx title='App.tsx' import React from 'react' // highlight-next-line import {rSuiteComponents} from '@react-form-builder/components-rsuite' import {BuilderView, FormBuilder} from '@react-form-builder/designer' // highlight-next-line const components = rSuiteComponents.map(c => c.build()) // highlight-next-line const builderView = new BuilderView(components) function App() { return } export default App ``` This is the minimal React component code with which you can add a form designer to your application. ## Viewer The [FormViewer](/api-reference/@react-form-builder/core/functions/FormViewer) component is responsible for displaying the form in Form Builder. The [FormBuilder](/api-reference/@react-form-builder/designer/functions/FormBuilder) uses the `FormViewer` component to display the form in the center panel. To install the package in your application, use the command: ```bash npm install @react-form-builder/core ``` :::tip If your package manager does not support automatic installation of peer dependencies, for example you use the `--legacy-peer-deps` flag in npm, then you need to install peer dependencies manually. ```bash npm install @emotion/cache@11.10.5 @emotion/css@11.10.5 @emotion/react@11.10.5 mobx@6.9.0 mobx-react@7.6.0 rxjs@7.8.0 stylis-plugin-rtl@2.1.1 --save-exact ``` ::: The `FormViewer` component receives as input the properties described in the type [FormViewerProps](/api-reference/@react-form-builder/core/interfaces/FormViewerProps). Let's look at an example of a simple application using a `FormViewer` component with a set of components from the React Suite library: ```tsx title='App.tsx' import React from 'react' import {view} from '@react-form-builder/components-rsuite' import {FormViewer} from '@react-form-builder/core' const form = `{ "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "RsInput 1", "type": "RsInput", "props": {} } ] } }` function App() { return form}/> } export default App ``` This code sample creates a `form` variable that contains a JSON form string, there is one input field on the form. In the component `FormViewer` is passed the mandatory [view](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#view) property, which is a set of component metadata for the React Suite library. As well as the [getForm](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#getform) property, which accepts a function that returns the value of the `form` variable. ## CDN You can immediately start using the FormEngine without using npm, bundlers and other frontend infrastructure by installing it via CDN. Two bundles are provided: - designer bundle: https://unpkg.com/@react-form-builder/designer-bundle@latest/dist/index.iife.js - viewer bundle: https://unpkg.com/@react-form-builder/viewer-bundle@latest/dist/index.iife.js Here's an example of the usage: ```html FormEngine bundle embedding example
``` --- # Overview URL: https://formengine.io/documentation/getting-started/overview.md # Overview Form Builder consists of the following NPM packages: 1. [@react-form-builder/core](https://www.npmjs.com/package/@react-form-builder/core). 2. [@react-form-builder/designer](https://www.npmjs.com/package/@react-form-builder/designer). 3. [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). 4. [@react-form-builder/components-fast-qr](https://www.npmjs.com/package/@react-form-builder/components-fast-qr). 5. [@react-form-builder/components-rich-text](https://www.npmjs.com/package/@react-form-builder/components-rich-text). :::tip Form Builder packages rely on peer dependencies, make sure your package manager automatically installs peer dependencies. ::: ## @react-form-builder/core package This is the main Form Builder package that contains the React methods and components for displaying the form. This package must be used at runtime. ```mermaid graph TD; core["@react-form-builder/core"] core --> define["API for component metadata"] core --> validation["Validation"] core --> localization["Localization"] core --> viewer["Form renderer (FormViewer)"] ``` ## @react-form-builder/designer package This is a package containing a visual form designer. This package is only needed for designing forms, it is not needed for displaying forms. ```mermaid graph TD; designer["@react-form-builder/designer"] designer --> dnd["Drag & Drop form designer"] designer --> form-settings["Form settings"] designer --> editors["Component editors"] editors --> property-editors["Property"] editors --> css-editors["Style"] editors --> validation-editors["Validation"] editors --> action-editors["Action"] designer --> localization["Localization settings"] ``` ## @react-form-builder/components-rsuite package This package contains components and metadata for components from the [React Suite](https://rsuitejs.com/) library. You may or may not use it. You can plug in your favorite component library and use that instead. ```mermaid graph TD; components["@react-form-builder/components-rsuite"] components --> fields["Components containing data"] components --> static["Simple components"] components --> structure["Structural components"] ``` ## @react-form-builder/components-fast-qr This package contains QR code component, based on [Fast QR](https://www.npmjs.com/package/fast_qr) library. ## @react-form-builder/components-rich-text This package contains Rich text editor component, based on [Quill](https://quilljs.com/) library. ## Example Clone our [GitHub](https://github.com/optimajet/formengine) repository with the example and follow the instructions to run it. The example on GitHub combines all three libraries: 1. [@react-form-builder/core](https://www.npmjs.com/package/@react-form-builder/core). 2. [@react-form-builder/designer](https://www.npmjs.com/package/@react-form-builder/designer). 3. [@react-form-builder/components-rsuite](https://www.npmjs.com/package/@react-form-builder/components-rsuite). ## Creating a simple form Open your browser at our demo page - https://demo.formengine.io/. You will see the following screen: ![Demo](/assets/getting-started/getting-started-01.png "Demo") The screen divided to three parts: 1. Left side with tabs: - Tree - on this tab, you can see the tree of components that make up the form. - Components - on this tab you can see the list of components available for use. - Settings - this tab displays the form settings. - Forms - this tab displays the list of forms. 2. Centre part of the screen: - Menu button. - Undo/Redo buttons. - Toggle Preview/Edit button. - Adaptive mode toggle buttons. - Control to select the current form language. - Button to show JSON of the form. - Dark/light theme switch. 3. Right side with tabs: - Main - on this tab you can edit the properties of the selected component. - Style - on this tab you can edit the styles of the selected component. - Actions - on this tab you can edit the actions of the selected component. - Rules - on this tab you can edit the rules of validation of the selected component value. Go to the **Forms** tab and click on the **Add New Form** button: ![New form](/assets/getting-started/getting-started-02.png "New form") Enter the name of the form and click the **OK** button: ![Getting started 03](/assets/getting-started/getting-started-03.png) The new form has been created and appears in the list of forms on the left. Click on the pencil icon to start editing the new form: ![Getting started 04](/assets/getting-started/getting-started-04.png) You should now see an empty form: ![Getting started 05](/assets/getting-started/getting-started-05.png) Now let's add some components to the form. Switch to the Components tab and drag and drop the "Input" and "Button" components: ![Getting started 06](/assets/getting-started/getting-started-06.png) Now let's give the name "name" to the "Input" component. And set the button label to "Submit". First, select the "Input" component by clicking on it on the form. In the right pane of the "Main" tab, enter "name" in the "Key" property and click the "✓" button. ![Getting started 07](/assets/getting-started/getting-started-07.png) Then in the "Label" property, type in the value "Name" as well. ![Getting started 08](/assets/getting-started/getting-started-08.png) Now select the button on the form and in the "Content" property, type in the value "Submit". ![Getting started 09](/assets/getting-started/getting-started-09.png) We have one input field and one button - let's add validation on the value for the input field, and when the button is clicked it will write the form data to the console. Select the input fields in the center portion of the form, and then switch to the "Rules" tab. ![Getting started 10](/assets/getting-started/getting-started-10.png) Now click on the "Add rule" button and select "Required" from the drop-down list. Click the "Add rule" button again and select "Min" from the drop-down list. In the "Limit" field for the "Min" rule, set the value to "3". In this way we have added two value validation rules - the first rule requires the field to be populated, the second rule requires the field value to have a minimum of three characters. The "Auto validate" checkbox means that the field value will be automatically validated while entering the value into the field. Note that we have not filled in the "Message" fields, so we will get a built-in error message for this validator. ![Getting started 11](/assets/getting-started/getting-started-11.png) Validation added. Now let's add an event handler for the button. To do this, select the button in the central part of the form and go to the "Actions" tab. ![Getting started 12](/assets/getting-started/getting-started-12.png) Validation added. Now let's add an event handler for the button. To do this, select the button in the central part of the form and go to the "Actions" tab. Click on the "Add action" button after "onClick", select "Custom" => "Add custom action" in the dropdown menu. ![Getting started 13](/assets/getting-started/getting-started-13.png) The action code editor appears at the bottom of the screen. Enter the action name and code as in the screenshot below, then click the "Save" button. ![Getting started 14](/assets/getting-started/getting-started-14.png) This is our simplest action: ```javascript /** * @param {ActionEventArgs} e - the action arguments. * @param {} args - the action parameters arguments. */ async function Action(e, args) { console.log('Name', e.data.name) } ``` - [ActionEventArgs](/api-reference/@react-form-builder/core/classes/ActionEventArgs) `e` is a variable containing the event data. - [Record<string, unknown>](/api-reference/@react-form-builder/core/classes/ActionEventArgs#data) `e.data` is the data of the form. :::info Using the `e.data` object, you can read and write form data, as in this example. We have a form input component with the `name` key. We can use the following code to read the value: `e.data.name`. To write the value, we can use the following code: `e.data.name = 'Some value'`. ::: Change the action code to the following to see how you can change the data in the form using the action: ```javascript /** * @param {ActionEventArgs} e - the action arguments. * @param {} args - the action parameters arguments. */ async function Action(e, args) { console.log('Name', e.data.name) // highlight-next-line e.data.name = `Marta ${new Date().getTime()}` } ``` ## Testing the created form It's time to test our form in action. To do this, click the big "Preview" button - the button change its label to "Edit" - which means that we are now in the form preview mode. Try entering different values in the input box and click the "Submit" button to see the value of the form in the console. ![Getting started 15](/assets/getting-started/getting-started-15.png) Now we want validation to occur before the data is output to the console. Well, there is a built-in "validate" action to validate the form, let's use it. Go to the form edit mode by clicking "Edit" button, select the button in the center of the screen, and then go to the "Actions" tab. ![Getting started 16](/assets/getting-started/getting-started-16.png) Click on the "Add action" button located after our "logValue" action, select "Common" => "validate". Then simply drag the "validate" action in front of the "logValue" action. ![Getting started 17](/assets/getting-started/getting-started-17.png) And let's make our error message a little more sympathetic. To do this, go to the "Settings" tab on the left side of the screen and select "Rs Error Message" in the "Error type" field. ![Getting started 18](/assets/getting-started/getting-started-18.png) And let's also select a component on this tab that will display tooltips. To do this, select the "Rs Tooltip" value in the "Tooltip type" field. ![Getting started 19](/assets/getting-started/getting-started-19.png) Since we have selected a component that can display tooltips, we have a "Tooltip" section in the right-hand properties panel of the component where we can configure a tooltip for each component. Let's add a tooltip for the button. Select the button in the center pane, and in the right pane, select the "Main" section. Click the checkbox next to "Tooltip" and enter the tooltip text in the "Text" field, as in the screen below. ![Getting started 20](/assets/getting-started/getting-started-20.png) Switch to form view and hover over the form, you should see something like the screenshot below. Note that the error message is now displayed differently. ![Getting started 21](/assets/getting-started/getting-started-21.png) ## Conclusion In this section, we created a simple form, added an onClick event handler for the form, and added validation on the input field. We also added a tooltip for the button and changed the format of the error message display. --- # Usage URL: https://formengine.io/documentation/getting-started/usage.md # Usage ## Designer :::info Don't let the large code example scare you. This example is large because everything is placed in one file for clarity. ::: To add dependencies for the example below, install the packages using the following command: ```bash npm install @react-form-builder/core @react-form-builder/components-rsuite @react-form-builder/designer ``` You can simply copy and paste the below code into your project and use the `Designer` component in your application: ```tsx title='Designer.tsx' import { formEngineRsuiteCssLoader, ltrCssLoader, rsErrorMessage, RsLocalizationWrapper, rsTooltip, rSuiteComponents, rtlCssLoader } from '@react-form-builder/components-rsuite' import {ActionDefinition, BiDi, ComponentLocalizer, IFormViewer, Validators} from '@react-form-builder/core' import {BuilderView, FormBuilder, IFormStorage} from '@react-form-builder/designer' import {useCallback, useRef} from 'react' // Here you can pass the metadata of your components const componentsMetadata = rSuiteComponents.map(definer => definer.build()) const builderView = new BuilderView(componentsMetadata) // You can pass multiple components to display error messages by calling the withErrorMeta function multiple times .withErrorMeta(rsErrorMessage.build()) // You can pass multiple components to display tooltip messages by calling the withTooltipMeta function multiple times .withTooltipMeta(rsTooltip.build()) // Pass an array of template names to the withTemplates function to display them in the designer .withTemplates([]) // The following parameters are required for correct CSS loading in LTR and RTL modes .withViewerWrapper(RsLocalizationWrapper) .withCssLoader(BiDi.LTR, ltrCssLoader) .withCssLoader(BiDi.RTL, rtlCssLoader) .withCssLoader('common', formEngineRsuiteCssLoader) // This is where you can define the custom storage for the designer const formStorage: IFormStorage | undefined = undefined // You can define custom validators for form fields const customValidators: Validators = { 'string': { 'isHex': { validate: value => /^[0-9A-F]*$/i.test(value) }, 'isHappy': { params: [], validate: value => value === 'Happy' }, 'equals': { params: [ {key: 'value', type: 'string', required: false, default: 'Ring'}, {key: 'message', type: 'string', required: false, default: 'Value must be equals to '} ], validate: (value, _, args) => { const errorMessage = args?.['message'] as string const checkedValue = args?.['value'] as string const errorResult = errorMessage ? errorMessage + checkedValue : false return value !== args?.['value'] ? errorResult : true } } }, 'number': {}, 'boolean': { 'onlyTrue': { validate: value => value === true } }, } // Example form, in JSON format const emptyForm = ` { "version": "1", "tooltipType": "RsTooltip", "errorType": "RsErrorMessage", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "name", "type": "RsInput", "props": { "placeholder": { "value": "Enter your name" }, "label": { "value": "Name" } }, "schema": { "validations": [ { "key": "required" } ] }, "tooltipProps": { "text": { "value": "Name" } } }, { "key": "password", "type": "RsInput", "props": { "label": { "value": "Password" }, "passwordMask": { "value": true } }, "schema": { "validations": [ { "key": "required" } ] }, "tooltipProps": { "text": { "value": "Password" }, "placement": { "value": "left" } } }, { "key": "submit", "type": "RsButton", "props": { "children": { "value": "Login" }, "color": { "value": "blue" }, "appearance": { "value": "primary" } }, "events": { "onClick": [ { "name": "validate", "type": "common" }, { "name": "logEventArgs", "type": "custom" } ] } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ` const formName = 'Example' async function getFormFn(name?: string) { if (name === formName) return emptyForm throw new Error(`Form '${name}' is not found.`) } export const Designer = () => { const ref = useRef() const setRef = useCallback((viewer: IFormViewer | null) => { if (viewer) { // if you want to work with the internal FormViewer component in an imperative style ref.current = viewer console.log(ref.current) } }, []) // custom function for localizing component properties const localizeFn = useCallback((componentStore, language) => { // localizes only the component whose key has the value "password" return componentStore.key === 'submit' && language.code === 'en' ? {'children': `Submit`} : {} }, []) return ( { console.log('onFormDataChange', {data, errors}) }} viewerRef={setRef} validators={customValidators} actions={{ logEventArgs: e => console.log(e), assertArgs: ActionDefinition.functionalAction((e, args) => { console.log(e, args) }, { p1: 'string', p2: 'boolean', p3: 'number' }) }} /> ) } ``` ## Viewer :::info Don't let the large code example scare you. This example is large because everything is placed in one file for clarity. ::: To add dependencies for the example below, install the packages using the following command: ```bash npm install @react-form-builder/core @react-form-builder/components-rsuite ``` :::tip If your package manager does not support automatic installation of peer dependencies, for example you use the `--legacy-peer-deps` flag in npm, then you need to install peer dependencies manually. ```bash npm install @emotion/cache@11.10.5 @emotion/css@11.10.5 @emotion/react@11.10.5 @emotion/styled@11.10.5 mobx@6.9.0 mobx-react@7.6.0 rxjs@7.8.0 stylis-plugin-rtl@2.1.1 @rsuite/icons@1.0.2 react-number-format@5.1.4 rsuite@5.59.1 --save-exact ``` ::: The code below passes almost the same properties as the example for the [designer](#designer). The difference is that you can pass additional properties to the properties of the `FormBuilder` component that are needed only in the form design mode. You can simply copy and paste the below code into your project and use the `Viewer` component in your application: ```tsx title='Viewer.tsx' import { formEngineRsuiteCssLoader, ltrCssLoader, RsLocalizationWrapper, rSuiteComponents, rtlCssLoader } from '@react-form-builder/components-rsuite' import {ActionDefinition, BiDi, ComponentLocalizer, createView, FormViewer, IFormViewer, Validators} from '@react-form-builder/core' import {useCallback, useRef} from 'react' // highlight-start // Here you can pass the metadata of your components const componentsMetadata = rSuiteComponents.map(definer => definer.build().model) // highlight-end // highlight-start const view = createView(componentsMetadata) // The following parameters are required for correct CSS loading in LTR and RTL modes .withViewerWrapper(RsLocalizationWrapper) .withCssLoader(BiDi.LTR, ltrCssLoader) .withCssLoader(BiDi.RTL, rtlCssLoader) .withCssLoader('common', formEngineRsuiteCssLoader) // highlight-end // You can define custom validators for form fields const customValidators: Validators = { 'string': { 'isHex': { validate: value => /^[0-9A-F]*$/i.test(value) }, 'isHappy': { params: [], validate: value => value === 'Happy' }, 'equals': { params: [ {key: 'value', type: 'string', required: false, default: 'Ring'}, {key: 'message', type: 'string', required: false, default: 'Value must be equals to '} ], validate: (value, _, args) => { const errorMessage = args?.['message'] as string const checkedValue = args?.['value'] as string const errorResult = errorMessage ? errorMessage + checkedValue : false return value !== args?.['value'] ? errorResult : true } } }, 'number': {}, 'boolean': { 'onlyTrue': { validate: value => value === true } }, } // Example form, in JSON format const emptyForm = ` { "version": "1", "tooltipType": "RsTooltip", "errorType": "RsErrorMessage", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "name", "type": "RsInput", "props": { "placeholder": { "value": "Enter your name" }, "label": { "value": "Name" } }, "schema": { "validations": [ { "key": "required" } ] }, "tooltipProps": { "text": { "value": "Name" } } }, { "key": "password", "type": "RsInput", "props": { "label": { "value": "Password" }, "passwordMask": { "value": true } }, "schema": { "validations": [ { "key": "required" } ] }, "tooltipProps": { "text": { "value": "Password" }, "placement": { "value": "left" } } }, { "key": "submit", "type": "RsButton", "props": { "children": { "value": "Login" }, "color": { "value": "blue" }, "appearance": { "value": "primary" } }, "events": { "onClick": [ { "name": "validate", "type": "common" }, { "name": "logEventArgs", "type": "custom" } ] } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ` const formName = 'Example' async function getFormFn(name?: string) { if (name === formName) return emptyForm throw new Error(`Form '${name}' is not found.`) } export const Viewer = () => { const ref = useRef() const setRef = useCallback((viewer: IFormViewer | null) => { if (viewer) { // if you want to work with the internal FormViewer component in an imperative style ref.current = viewer console.log(ref.current) } }, []) // custom function for localizing component properties const localizeFn = useCallback((componentStore, language) => { // localizes only the component whose key has the value "password" return componentStore.key === 'submit' && language.code === 'en' ? {'children': `Submit`} : {} }, []) // highlight-start return ( { console.log('onFormDataChange', {data, errors}) }} viewerRef={setRef} validators={customValidators} actions={{ logEventArgs: e => console.log(e), assertArgs: ActionDefinition.functionalAction((e, args) => { console.log(e, args) }, { p1: 'string', p2: 'boolean', p3: 'number' }) }} /> ) // highlight-end } ``` --- # Building forms via code URL: https://formengine.io/documentation/guides/building-forms-via-code.md # Building forms via code ## Introduction Building a form using code is an alternative to building a form through the graphical user interface. With code-based form creation, you have full control over the form structure and fields, allowing you to create complex and customized forms efficiently. This approach provides a more flexible and efficient way to create forms, allowing you to define a complex form with multiple fields and conditions in a single, self-contained object. Additionally, you can use this method to create a form from scratch or edit existing forms, giving you full control over the form's structure and behavior. In the following sections, we will explore the process of building forms using code, providing an example to guide you through the form creation process. ## Example Form In this example, we define a simple form with three components: a name input field, a password input field, and a submit button. Each component is created using a specific class, which allows us to define the properties and behavior of each form element. ```typescript import {ComponentStore, PersistedForm} from '@react-form-builder/core' const createSimpleForm = (): ComponentStore => { const nameInput = new ComponentStore('name', 'RsInput') // value - simple value of the prop, the prop value can also be a localized value or a calculated value nameInput.props.placeholder = {value: 'Enter your name'} nameInput.props.label = {value: 'Name'} // make this field required nameInput.schema = { validations: [{key: 'required'}], } // set the properties of the tooltip nameInput.tooltipProps = { text: {value: 'Name'} } const passwordInput = new ComponentStore('password', 'RsInput') passwordInput.props = { placeholder: {value: 'Enter you password'}, label: {value: 'Password'}, passwordMask: {value: true}, } passwordInput.tooltipProps = { text: {value: 'Password'}, placement: {value: 'top'}, } const submitButton = new ComponentStore('submit', 'RsButton') submitButton.props = { children: {value: 'Login'}, color: {value: 'blue'}, appearance: {value: 'primary'}, } // add a validate action submitButton.events = { onClick: [ { name: 'validate', type: 'common', } ] } // root element of the form, always screen const root = new ComponentStore('screen', 'Screen') root.children = [ nameInput, passwordInput, submitButton, ] return root } const createForm = (): PersistedForm => { // main object return { defaultLanguage: 'en-US', form: createSimpleForm(), languages: [], localization: {}, // type of component that displays the tooltip tooltipType: 'RsTooltip', // type of component that displays the error errorType: 'RsErrorMessage', } } export const codeGeneratedForm = (): string => { const persistedForm = createForm() return JSON.stringify(persistedForm) } ``` The `createSimpleForm` function creates the form structure by defining the properties for each component. We set properties such as placeholder, label, validation rules, and event handlers for the form elements. The `createForm` function creates the main form object, which includes the form structure, default language, localization settings, and tooltip/error component types. Finally, the `codeGeneratedForm` function returns the JSON representation of the form object using `JSON.stringify`. This allows you to easily generate the form code and use it in your application. --- # Camunda integration URL: https://formengine.io/documentation/guides/camunda.md # Camunda integration Camunda is a comprehensive workflow automation and decision-making platform that provides process management solutions for organizations of all sizes. It offers tools for creating, managing, and deploying workflows and decision models in production environments. In this article, we will use an example from the Camunda repository, [Using React Forms with Tasklist](https://github.com/camunda/camunda-bpm-examples/tree/master/usertask/task-form-embedded-react), and modify it so that the forms are displayed using FormEngine. ### Requirements To follow along, you will need the following: 1. [Java Development Kit (JDK) 17](https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html) 2. [Camunda 7 Community Edition](https://downloads.camunda.cloud/release/camunda-bpm/tomcat/7.21/camunda-bpm-tomcat-7.21.0.zip) 3. [Camunda Modeler](https://camunda.com/download/modeler/) Ensure that both Camunda 7 Community Edition and Camunda Modeler are installed on your system if they are not already. ## Starting with the React Example The Camunda repository on GitHub provides a simple and clear [instruction](https://github.com/camunda/camunda-bpm-examples/blob/master/usertask/task-form-embedded-react/README.md) for using React in Tasklist. Let's walk through it together. 1. **Add `loadReact.js` to Camunda Tasklist:** Download [loadReact.js](https://github.com/camunda/camunda-bpm-examples/blob/master/usertask/task-form-embedded-react/config/react/loadReact.js) and place it in the `app/tasklist/scripts/react` directory of the Camunda Tasklist webapp. For example, if you are using Tomcat, the path will be `/webapps/camunda/app/tasklist/scripts/react`. This script will load React and ReactDOM from a CDN and add them to the global scope. If you prefer to use different versions of React, adjust the import paths in the script accordingly. 2. **Add the loader as a custom script:** Modify the `app/tasklist/scripts/config.js` file of the Camunda Tasklist webapp to include the loader script. For Tomcat, this file is located at `/webapps/camunda/app/tasklist/scripts/config.js`. Update the file as shown in the [example](https://github.com/camunda/camunda-bpm-examples/blob/master/usertask/task-form-embedded-react/config/config.js). ```javascript title='config.js' customScripts: [ 'scripts/react/loadReact.js' ] ``` Launch Camunda if it is not already running. Next, we need to upload the process definition and forms from GitHub, then upload them to Camunda using Camunda Modeler and start the process. Let's do it step by step: 1. **Download the following files:** - [react-example.bpmn](https://raw.githubusercontent.com/camunda/camunda-bpm-examples/master/usertask/task-form-embedded-react/src/main/resources/react-example.bpmn) - [start-form.html](https://raw.githubusercontent.com/camunda/camunda-bpm-examples/master/usertask/task-form-embedded-react/src/main/webapp/start-form.html) - [task-form.html](https://raw.githubusercontent.com/camunda/camunda-bpm-examples/master/usertask/task-form-embedded-react/src/main/webapp/task-form.html) 2. **Open Camunda Modeler and load the `react-example.bpmn` file:** ![Camunda Modeler](/assets/guides/camunda/camunda-01.png) 3. **Update the form keys:** - Click the "Invoice Received" element and change the Form key from `embedded:app:start-form.html` to `embedded:deployment:start-form.html`: ![Camunda Modeler](/assets/guides/camunda/camunda-02.png) - Click the "Approve Invoice" element and change the Form key from `embedded:app:task-form.html` to `embedded:deployment:task-form.html`: ![Camunda Modeler](/assets/guides/camunda/camunda-03.png) 4. **Deploy the process:** - Click the Rocket button at the bottom of the screen, then click the plus button next to "Include additional files" and add the previously downloaded `start-form.html` and `task-form.html` files: ![Camunda Modeler](/assets/guides/camunda/camunda-04.png) - Click the "Deploy" button. You should see a message indicating that the Process Definition has been successfully deployed: ![Camunda Modeler](/assets/guides/camunda/camunda-05.png) To ensure everything works correctly, follow these steps to test the setup in the Camunda web interface. If Camunda is running locally, the address will be something like [http://localhost:8080/camunda-welcome/index.html](http://localhost:8080/camunda-welcome/index.html): 1. **Open the Camunda web interface:** ![Camunda admin](/assets/guides/camunda/camunda-06.png) 2. **Access the Tasklist:** - Click on the Tasklist image. - Log in using the credentials **demo**/**demo**: ![Camunda login](/assets/guides/camunda/camunda-07.png) 3. **Start the process:** - Click on the "Start Process" button on the top panel: ![Camunda Tasklist](/assets/guides/camunda/camunda-08.png) - Select "React example" in the "Start process" window: ![Camunda Tasklist](/assets/guides/camunda/camunda-09.png) 4. **Fill in the start form:** - The form for starting the process, uploaded from `start-form.html`, should now be displayed. - Fill in the form with the necessary data and click the "Start" button: ![Camunda Tasklist](/assets/guides/camunda/camunda-10.png) 5. **View the task list:** - The process has started. Now click on "All Tasks" on the left panel. - You should see your task in the task list: ![Camunda Tasklist](/assets/guides/camunda/camunda-11.png) 6. **Claim the task:** - Click on the task: ![Camunda Tasklist](/assets/guides/camunda/camunda-12.png) - Claim the task by clicking on the "Claim" link, which will change to "Demo Demo": ![Camunda Tasklist](/assets/guides/camunda/camunda-13.png) 7. **Complete the task:** - The form you see is uploaded from the `task-form.html` file. - Fill out the form by clicking on the "I approve this Invoice" checkbox, then click the "Complete" button: ![Camunda Tasklist](/assets/guides/camunda/camunda-14.png) 8. **Verify completion:** - The task will be completed: ![Camunda Tasklist](/assets/guides/camunda/camunda-15.png) ## Creating forms To connect FormEngine to Camunda, we will use a package that includes a set of components based on React Suite. These components are utilized in our [demo](https://demo.formengine.io/). First, we need two forms to replace the React forms from the Camunda example. We will omit the process of creating these forms, as it is straightforward to accomplish. For instance, you can use our [demo](https://demo.formengine.io/). Simply drag and drop the necessary components onto the form and configure their properties as required. Below are the JSON files containing the forms themselves.
Click to view start-form. ```json title="start-form.json" { "version": "1", "actions": { "onChange": { "body": " const setInvoiceDocument = document => e.store.formData.state['invoiceDocument'] = document;\n\n const blobFile = e.args[0]?.[0]?.blobFile;\n if (blobFile) {\n const reader = new FileReader();\n reader.readAsDataURL(blobFile);\n reader.onload = () => {\n setInvoiceDocument(reader.result.replace(/^data:(.*;base64,)?/, ''));\n };\n reader.onerror = () => {\n setInvoiceDocument(undefined);\n }\n } else {\n setInvoiceDocument(undefined);\n }", "params": {} } }, "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "RsContainer 1", "type": "RsContainer", "props": {}, "children": [ { "key": "RsLabel 1", "type": "RsLabel", "props": { "text": { "value": "Invoice Document:" } } }, { "key": "invoiceDocument", "type": "RsUploader", "props": { "autoUpload": { "value": false } }, "events": { "onChange": [ { "name": "onChange", "type": "code" } ] } } ] }, { "key": "creditor", "type": "RsInput", "props": { "label": { "value": "Creditor:" }, "placeholder": { "value": "e.g. \"Super Awesome Pizza\"" }, "size": { "value": "md" } } }, { "key": "amount", "type": "RsNumberFormat", "props": { "label": { "value": "Amount:" }, "placeholder": { "value": "e.g. \"30.00\"" }, "allowNegative": { "value": false } } }, { "key": "invoiceCategory", "type": "RsDropdown", "props": { "label": { "value": "Invoice Category:" }, "data": { "value": [ { "value": "Travel Expenses", "label": "Travel Expenses" }, { "value": "Business Meals", "label": "Business Meals" }, { "value": "Other", "label": "Other" } ] }, "value": { "value": "" } } }, { "key": "invoiceNumber", "type": "RsInput", "props": { "placeholder": { "value": "e.g. \"I-12345\"" }, "label": { "value": "Invoice Number:" } } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ```
You can see the "start-form" in the screenshot below: ![FormEngine](/assets/guides/camunda/camunda-16.png) The second form is similar to the first.
Click to view task-form. ```json title="task-form" { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "RsContainer 1", "type": "RsContainer", "props": {}, "children": [ { "key": "RsLabel 1", "type": "RsLabel", "props": { "text": { "value": "Download Invoice:" } } }, { "key": "invoiceDocument", "type": "RsLink", "props": { "text": { "value": "invoice.pdf" }, "href": { "value": "about:blank" } } } ] }, { "key": "amount", "type": "RsNumberFormat", "props": { "label": { "value": "Amount:" }, "placeholder": { "value": "" }, "allowNegative": { "value": false }, "readOnly": { "value": false }, "disabled": { "value": true } } }, { "key": "creditor", "type": "RsInput", "props": { "label": { "value": "Creditor:" }, "placeholder": { "value": "" }, "size": { "value": "md" }, "disabled": { "value": true } } }, { "key": "category", "type": "RsInput", "props": { "label": { "value": "Invoice Category:" }, "disabled": { "value": true } } }, { "key": "invoiceID", "type": "RsInput", "props": { "placeholder": { "value": "" }, "label": { "value": "Invoice Number:" }, "disabled": { "value": true } } }, { "key": "approve", "type": "RsCheckbox", "props": { "children": { "value": "I approve this Invoice" }, "checked": { "value": false } } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ```
This is what the second form looks like: ![FormEngine](/assets/guides/camunda/camunda-17.png) ## Connecting FormEngine to Camunda When connecting FormEngine to Camunda, we decided to use a [bundle](/installation#cdn) designed for use on any web page. This method does not require a separate React connection. During the connection process, we discovered that Camunda uses a strict Content Security Policy, which prohibits some inline CSS used in the bundle. Therefore, we will connect the component styles separately. 1. **Add `loadFormEngine.js`:** Place `loadFormEngine.js` in `app/tasklist/scripts/formEngine` of the Camunda Tasklist webapp (e.g., for Tomcat, it will be `/webapps/camunda/app/tasklist/scripts/formEngine`). ```javascript title="loadFormEngine.js" const formEngine = document.createElement('script'); formEngine.crossOrigin = true; formEngine.src = 'https://unpkg.com/@react-form-builder/viewer-bundle@1.2.0/dist/index.umd.js'; document.body.append(formEngine); ``` 2. **Add the loader to `config.js`:** Modify `app/tasklist/scripts/config.js` of the Camunda Tasklist webapp to include the loader script. For Tomcat, the path will be `/webapps/camunda/app/tasklist/scripts/config.js`. ```javascript title="config.js" customScripts: [ 'scripts/react/loadReact.js', // highlight-next-line 'scripts/formEngine/loadFormEngine.js' ] ``` 3. **Download and add the CSS files:** Download the [rsuite-no-reset.min.css](https://unpkg.com/@react-form-builder/viewer-bundle@1.2.0/dist/rsuite-no-reset.min.css) file and the [formengine-rsuite.css](https://unpkg.com/@react-form-builder/viewer-bundle@1.2.0/dist/formengine-rsuite.css) file. Place them in the `app/tasklist/styles` folder. To avoid configuring the CSP policy, download the styles locally. 4. **Modify `user-styles.css`:** Add the following highlighted lines to `app/tasklist/styles/user-styles.css`: ```css title="user-styles.css" {13-18} /* .navbar-brand { text-indent: -999em; background-image: url(./path/to/the/logo.png); width: 80px; } [cam-widget-header] { border-bottom-color: blue; } */ @import url('./rsuite-no-reset.min.css'); @import url('./formengine-rsuite.css'); .rs-picker-select-menu.rs-picker-popup { z-index: 2000; } ``` ## Modifying Forms In the code of both forms, we will use a simple `renderFormEngineForm` function that will render the form into an HTML element. The function accepts the following parameters: 1. `form` is the JSON of the form. 2. `container` is the HTML element where the form will be rendered. 3. `additionalProps` are the additional [properties](/api-reference/@react-form-builder/core/interfaces/FormViewerProps) of the [FormViewer](/api-reference/@react-form-builder/core/functions/FormViewer) component. ```javascript function renderFormEngineForm(form, container, additionalProps) { const viewerRef = {current: null}; const viewerBundle = window.FormEngineViewerBundle; const components = viewerBundle.rSuiteComponents; const view = components.view.withViewerWrapper(components.RsLocalizationWrapper); const props = { getForm: () => form, view, viewerRef, ...additionalProps }; viewerBundle.renderFormViewerTo(container, props); return viewerRef; } ``` Each form's code will have its own `renderCamundaForm` function that will link the FormEngine form and the Camunda form, which is stored in the `camForm` object. In general, the form code is similar to the forms from the React example. See the form code below for reference.
Click to view start-form. ```html title="start-form.html" {2,18,56,189-194,199,202}
```
Click to view task-form. ```html title="task-form.html" {2,18,20,51,150-168,173,194}
```
**The JSON for the form and the basic code for rendering the form are included in HTML files for this example. In practice, it's likely better to use a separate JavaScript module.** ## Running FormEngine Forms in Camunda 1. **Deploy the FormEngine Forms:** - Open Camunda Modeler and click the rocket icon button. - Delete the selected forms `start-form.html` and `task-form.html`. - Add the forms created for FormEngine. - Click the Deploy button. ![Camunda Modeler](/assets/guides/camunda/camunda-18.png) 2. **Open the Camunda Tasklist Web Interface:** - Navigate to [http://localhost:8080/camunda/app/tasklist/](http://localhost:8080/camunda/app/tasklist/) and refresh the page. ![Camunda Tasklist](/assets/guides/camunda/camunda-19.png) 3. **Start the Process:** - Click on the “Start Process” button on the top panel. - Select "React example" in the "Start process" window. You should see the form made with FormEngine. ![Camunda Tasklist](/assets/guides/camunda/camunda-20.png) 4. **Fill Out the Form and Start the Process:** - Fill out the form and click the Start button. - The process has started. Now click on "All Tasks" on the left panel. ![Camunda Tasklist](/assets/guides/camunda/camunda-21.png) 5. **Select and Claim the Task:** - Select the created task from the top. ![Camunda Tasklist](/assets/guides/camunda/camunda-22.png) - Claim the task by clicking on the "Claim" link. The link text will change to "Demo Demo". ![Camunda Tasklist](/assets/guides/camunda/camunda-23.png) 6. **Verify Task Variables and Fill Out the Form:** - You should see that the variables have been populated. Click on the link next to the highlighted text "React Example". ![Camunda Tasklist](/assets/guides/camunda/camunda-24.png) - The form should be correctly filled out. ![Camunda Tasklist](/assets/guides/camunda/camunda-25.png) - Fill out the form and click Complete. ![Camunda Tasklist](/assets/guides/camunda/camunda-26.png) That's it! Your FormEngine forms are now running in Camunda. ## Conclusion In this article, we have successfully connected FormEngine as a form rendering engine for Camunda. This allows you to use your custom components to render forms by passing a set of your components through properties. If you encounter any issues or have questions, feel free to reach out to us on [GitHub](https://github.com/optimajet/formengine/discussions). --- # Components with multiple children URL: https://formengine.io/documentation/guides/components-with-multiple-children.md # Components with multiple children In many cases, you may want to create a component that contains multiple child components. This can be especially useful for defining complex layouts, grouping related components together, and consequently designing detailed forms. By creating a component with multiple children, you can encapsulate the layout and behavior of the child components within a single parent component, making it easier to manage, customize and reuse them. The following example showcases how to create a message component that contains multiple child components, including a header, a body, and a closable button. ## Message Component with multiple children In this example, we have a [message](/components-library/static-components/message) component that allows users to specify the name of the component and the type of message, such as _info_, _success_, _warning_, or _error_. This component incorporates multiple child components, which can be any components of your choice. In this case, the `children` and `header` properties are properties that can contain a collection of child components. ```typescript {14,16} import styled from '@emotion/styled' import {boolean, define, node, oneOf} from '@react-form-builder/core' import {Message} from 'rsuite' const SMessage = styled(Message)` .rs-message-header { overflow: initial; } ` export const rsMessage = define(SMessage, 'RsMessage') .name('Message') .props({ children: node, closable: boolean.default(false), header: node, type: oneOf('info', 'success', 'warning', 'error').default('info') }) ``` The message component is called `RsMessage` and it incorporates the following properties: - `children`: this property represents the main content of the message. It can be any type of node, such as input, image, or any other component. - `closable`: this property is a boolean that indicates whether the message is closable. - `header`: this property allows you to provide a header for the message. It also accepts any node, allowing you to pass any component. - `type`: this property specifies the type of message, which can be one of `info`, `success`, `warning`, or `error`. It defaults to `info`. If you add a component to the form, you will see that there are green buttons for adding child components at the places where the `children` and `header` properties should be displayed. ![Empty slots](/assets/guides/components-with-multiple-children/components-with-multiple-children-01.png) If you add a header and subheader, as well as the text of the message, you can see that the green buttons are no longer there, and the child components are already displayed: ![Filled slots](/assets/guides/components-with-multiple-children/components-with-multiple-children-02.png) By defining such components with multiple children, you can create a complex and reusable forms that can be easily customized and extended. --- # Dynamic dropdown population URL: https://formengine.io/documentation/guides/dynamic-dropdown-population.md # Dynamic dropdown population ## Introduction Dynamic dropdown population refers to the process of loading data into a [dropdown component](/components-library/fields-components/dropdown) at runtime, based on certain conditions or user interaction. Namely, it allows you to load dropdown options on demand, rather than preloading a fixed set of options. This approach can be particularly useful when working with large datasets or when the options need to be filtered based on user input. By loading options dynamically, you can improve the performance and responsiveness of your application, while also providing a more seamless user experience. ## Example of dynamic dropdown population The following example showcases how to dynamically populate a dropdown component with a list of names. Instead of manually maintaining a static list of names, the dropdown is designed to fetch the names from an external API endpoint: ```json { "version": "1", "actions": { "loadData": { "body": " const [searchValue, loadCallback, currentDataLength] = e.args\n\n fetch ('https://raw.githubusercontent.com/dominictarr/random-name/master/first-names.json')\n .then (data => data.json())\n .then (data => {\n const preparedData = data\n .filter(value => value.toLowerCase().includes(searchValue.toLowerCase()))\n .slice(currentDataLength, currentDataLength + 20)\n .map(value => ({value, label: value}))\n\n loadCallback(preparedData) \n })", "params": {} } }, "tooltipType": "RsTooltip", "errorType": "RsErrorMessage", "form": { "key": "screen 1", "type": "Screen", "props": {}, "children": [ { "key": "name", "type": "RsDropdown", "props": { "data": { "value": [] }, "label": { "value": "Name" } }, "events": { "onLoadData": [ { "name": "loadData", "type": "code" } ] } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` To dynamically load data into dropdown, the `onLoadData` event is used, to which the `loadData` handler is bound. ![Dynamic dropdown population](/assets/guides/dynamic-dropdown-population/dynamic-dropdown-population-01.png "Dynamic dropdown population") The handler code is quite simple, pay attention to the `loadCallback` method call - this method allows you to transfer data to dropdown. The handler code is shown below: ```javascript {8,16} /** * @param {ActionEventArgs} e - the action arguments. * @param {} args - the action parameters arguments. */ async function Action(e, args) { const [searchValue, loadCallback, currentDataLength] = e.args fetch('https://raw.githubusercontent.com/dominictarr/random-name/master/first-names.json') .then(data => data.json()) .then(data => { const preparedData = data .filter(value => value.toLowerCase().includes(searchValue.toLowerCase())) .slice(currentDataLength, currentDataLength + 20) .map(value => ({value, label: value})) loadCallback(preparedData) }) } ``` When the user interacts with the dropdown, the `loadData` action is triggered, which sends a request to a remote JSON file containing a list of names. The fetched names are then dynamically displayed in the dropdown, allowing the user to easily select their desired name. The list can also be filtered to include only names that match the user's input, and the resulting options are loaded into the dropdown. By utilizing dynamic dropdown population, the form provides users with a seamless and efficient selection process. It eliminates the need for manual maintenance of the dropdown options, as the form automatically fetches and updates the data in real-time. --- # Formik integration URL: https://formengine.io/documentation/guides/formik.md # Formik integration ## Introduction to FormEngine In the world of React development, managing forms can often become a complex task. Enter Formik, a beloved open-source library that simplifies form management by handling state, validation, and submission seamlessly. However, if you're looking for even more features and capabilities, look no further than FormEngine. This powerful library not only matches Formik's capabilities but also extends them, offering advanced features for form management. In this article, we’ll explore how to integrate Formik with FormEngine, allowing you to leverage the strengths of both libraries. Whether you want to reuse existing code or prefer the familiar Formik setup, this guide will help you get started. Let's omit some boilerplate code and highlight only important things. :::tip Full source code along with other examples available at our public [GitHub repository](https://github.com/optimajet/formengine/tree/master/premium/examples/with-formik). ::: ### Code changes Highlighted lines indicate the ones that need attention. If the file is created for the first time, then any modified lines are not marked in it. If the file is modified within the tutorial, then the modified, added, and deleted lines are marked in it as follows. ```js // &att var x = 42; // highlighted line of code // &chg var x = 42; // modified line of code // &new var x = 42; // added new line of code // &del var x = 42; // deleted line of code ``` ## Getting Started with FormEngine and Formik To kick off, create a new React project and install the necessary dependencies. Open your terminal and run the following commands: ```shell npx create-react-app with-formik --template typescript cd with-formik npm add formik yup @react-form-builder/core @react-form-builder/components-rsuite @react-form-builder/designer npm run start ``` ## Initializing the FormEngine Designer Next, replace the contents of `App.tsx` with the following code to set up FormEngine's Designer: ```tsx title='src/App.tsx' import React from 'react' import {BuilderView, FormBuilder, IFormStorage} from '@react-form-builder/designer' import { formEngineRsuiteCssLoader, ltrCssLoader, RsLocalizationWrapper, rSuiteComponents, rtlCssLoader } from '@react-form-builder/components-rsuite'; import {BiDi} from '@react-form-builder/core'; const componentsMetadata = rSuiteComponents.map(definer => definer.build()) const formName = 'formikForm' const formStorage: IFormStorage = { getForm: async () => localStorage.getItem(formName) || '{"form":{"key":"Screen","type":"Screen"}}', saveForm: async (_, form) => localStorage.setItem(formName, form), getFormNames: () => Promise.resolve([formName]), removeForm: () => Promise.resolve() } const loadForm = () => formStorage.getForm('') const builderView = new BuilderView(componentsMetadata) .withViewerWrapper(RsLocalizationWrapper) .withCssLoader(BiDi.LTR, ltrCssLoader) .withCssLoader(BiDi.RTL, rtlCssLoader) .withCssLoader('common', formEngineRsuiteCssLoader) // We're hiding the form panel because it's not fully functional in this example const customization = { Forms_Tab: { hidden: true } } function App() { return } export default App ``` Now, you have a minimal FormEngine Designer up and running! ![Designer](/assets/guides/formik/formik-designer.png) ## Creating a Simple Booking Form Let’s create a simple booking form with the following fields: - Customer's Full Name - Check-in Date - Total Number of Guests You can either drag and drop components in the designer or use a pre-made form definition bellow. Name fields accordingly: `fullName`, `checkinDate`, `guestCount`.
form.json ```json { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "fullName", "type": "RsInput", "props": { "label": { "value": "Full name" } } }, { "key": "checkinDate", "type": "RsDatePicker", "props": { "label": { "value": "Check-in date" } } }, { "key": "guestCount", "type": "RsNumberFormat", "props": { "label": { "value": "Guest count" } } }, { "key": "rsButton1", "type": "RsButton", "props": { "children": { "value": "Send" } } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ```
![Booking form](/assets/guides/formik/formik-form.png) ## Integrating Formik with Your Booking Form If you have an existing form implemented with Formik using hooks, you can easily integrate it with FormEngine. Here’s how you can set up the `src/useBookingForm.ts`:
src/useBookingForm.ts ```typescript import {useFormik} from 'formik'; import {useMemo, useState} from 'react'; import {FormikProps} from 'formik/dist/types'; export type BookingForm = Partial<{ fullName: string, guestCount: number, checkinDate: Date }> export type BookingFormErrors = Partial> export const useBookingForm = (): [FormikProps, BookingForm] => { const [formData, setFormData] = useState({}); const initialValues = useMemo(() => ({ fullName: '', guestCount: 1, checkinDate: new Date() }), []); const formik = useFormik({ initialValues, validate: ({checkinDate, fullName, guestCount}) => { let errors: Partial> = {}; if (!fullName) { errors.fullName = 'Name is required.'; } else if (fullName.trim().split(' ').length < 2) { errors.fullName = 'Please enter a full name.' } if (!checkinDate) { errors.checkinDate = 'Date is required.'; } if (!isFinite(guestCount as number) || (guestCount as number) < 1) { errors.guestCount = 'No guest entered.'; } return errors; }, onSubmit: (data) => { setFormData(data); console.log(data); formik.resetForm(); } }); return [formik, formData] } ```
## Bridging FormEngine and Formik Firstly, we need to change the `target` for TypeScript (because we are using iteration on object properties): ```json title='tsconfig.json' { "compilerOptions": { // &chg> "target": "es2015", // <&chg "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "react-jsx" }, "include": [ "src" ] } ``` To connect FormEngine with Formik, we need to pass values between them and handle validation errors. Update the `App.tsx` file, you can just replace the contents with the code below (major changes are highlighted): ```tsx title='src/App.tsx' // &chg> import {ActionDefinition, BiDi, ComponentData, Field, IFormData} from '@react-form-builder/core'; import React, {useCallback, useMemo} from 'react' // <&chg // &new> import {BookingFormErrors, useBookingForm} from './useBookingForm' import debounce from 'lodash/debounce'; // <&new import {BuilderView, FormBuilder, IFormStorage} from '@react-form-builder/designer' import { formEngineRsuiteCssLoader, ltrCssLoader, RsLocalizationWrapper, rSuiteComponents, rtlCssLoader } from '@react-form-builder/components-rsuite'; const componentsMetadata = rSuiteComponents.map(definer => definer.build()) const formName = 'formikForm' const formStorage: IFormStorage = { getForm: async () => localStorage.getItem(formName) || '{"form":{"key":"Screen","type":"Screen"}}', saveForm: async (_, form) => localStorage.setItem(formName, form), getFormNames: () => Promise.resolve([formName]), removeForm: () => Promise.resolve() } const loadForm = () => formStorage.getForm('') const builderView = new BuilderView(componentsMetadata) .withViewerWrapper(RsLocalizationWrapper) .withCssLoader(BiDi.LTR, ltrCssLoader) .withCssLoader(BiDi.RTL, rtlCssLoader) .withCssLoader('common', formEngineRsuiteCssLoader) // We're hiding the form panel because it's not fully functional in this example const customization = { Forms_Tab: { hidden: true } } function App() { // &new> const [formik] = useBookingForm() const setFormikValues = useMemo(() => debounce(async (form: IFormData) => { const {fields} = form as ComponentData for (const [key, {value}] of fields) { const field = formik.getFieldProps(key) if (value !== field.value) { try { await formik.setFieldValue(key, value) await formik.validateField(key) } catch (e) { console.warn(e) } } } }, 400), [formik]) const setFormEngineErrors = useCallback((errors: BookingFormErrors, form: ComponentData) => { const {fields} = form Object.entries(errors).forEach(([key, error]) => { if (fields.has(key)) { (fields.get(key) as Field).setError(error) } }) }, []) return { const errors = await formik.validateForm() if (Object.keys(errors).length > 0) { return setFormEngineErrors(errors, e.store.formData) } await formik.submitForm() }), }} /> // <&new } export default App ``` Notice that we've added a common action. Now you can bind the action to the _Send_ button, as in the screenshot below. ![Formik submit](/assets/guides/formik/formik-submit.png)
Click to view the full JSON of the form. ```json { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "fullName", "type": "RsInput", "props": { "label": { "value": "Full name" } } }, { "key": "checkinDate", "type": "RsDatePicker", "props": { "label": { "value": "Check-in date" } } }, { "key": "guestCount", "type": "RsNumberFormat", "props": { "label": { "value": "Guest count" } } }, { "key": "rsButton1", "type": "RsButton", "props": { "children": { "value": "Send" } // &new> }, "events": { "onClick": [ { "name": "submitForm", "type": "custom" } ] // <&new } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ```
Now press _Send_ button and see everything works, data passed to Formik and validation errors sent back to our form. ![Form synced data and errors](/assets/guides/formik/formik-sync.png) ## Leveraging Yup for Validation Yup is a powerful validation library that works seamlessly with Formik and is recommended by its team. To enhance our validation process, we can define Yup validators and integrate them into our FormEngine setup. Let's rewrite our validation using Yup and use it. We are going to bind Yup validators directly to FormEngine native validation, but we also can use it inside Formik form definition as shown above. Create a `validators.ts` file: ```typescript title='src/validators.ts' import * as Yup from 'yup' export const fullName = Yup.string().required().test({ message: 'Please enter a full name', test: (value: string) => !!value && value.trim().split(' ').length > 1 }) export const dateTodayOrInTheFuture = Yup.date().required().test({ message: 'Dates in the past are impossible to book', test: (value: Date) => { const today = new Date() const date = new Date(value) today.setHours(0, 0, 0, 0); date.setHours(0, 0, 0, 0); return date >= today } }) export const checkGuestsCount = Yup.number().required().min(1).max(6) ``` Define common validators and small helper function `toFormEngineValidate` which will be the bridge between two libraries. Please notice validation is now done by FormEngine and we sync errors back to Formik. Then, update your `App.tsx` to utilize these validators within FormEngine (major changes are highlighted): ```tsx title='src/App.tsx' // &chg> import {ActionDefinition, BiDi, ComponentData, IFormData, RuleValidatorResult, Validators} from '@react-form-builder/core'; import React, {useMemo} from 'react' import {useBookingForm} from './useBookingForm' // <&chg import debounce from 'lodash/debounce'; import {BuilderView, FormBuilder, IFormStorage} from '@react-form-builder/designer' import { formEngineRsuiteCssLoader, ltrCssLoader, RsLocalizationWrapper, rSuiteComponents, rtlCssLoader } from '@react-form-builder/components-rsuite'; // &new> import * as validator from './validators' import {Schema} from 'yup' // <&new const componentsMetadata = rSuiteComponents.map(definer => definer.build()) const formName = 'formikForm' const formStorage: IFormStorage = { getForm: async () => localStorage.getItem(formName) || '{"form":{"key":"Screen","type":"Screen"}}', saveForm: async (_, form) => localStorage.setItem(formName, form), getFormNames: () => Promise.resolve([formName]), removeForm: () => Promise.resolve() } const loadForm = () => formStorage.getForm('') const builderView = new BuilderView(componentsMetadata) .withViewerWrapper(RsLocalizationWrapper) .withCssLoader(BiDi.LTR, ltrCssLoader) .withCssLoader(BiDi.RTL, rtlCssLoader) .withCssLoader('common', formEngineRsuiteCssLoader) // We're hiding the form panel because it's not fully functional in this example const customization = { Forms_Tab: { hidden: true } } // &new> const toFormEngineValidate = (yupValidator: typeof Schema.prototype) => async (value: unknown): Promise => { let err: RuleValidatorResult = true try { await yupValidator.validate(value) } catch (e) { err = (e as Error).message } return err } const customValidators: Validators = { 'string': { 'isFullName': { validate: toFormEngineValidate(validator.fullName) }, }, 'date': { 'dateInTheFuture': { validate: toFormEngineValidate(validator.dateTodayOrInTheFuture) } }, 'number': { 'checkGuestCount': { validate: toFormEngineValidate(validator.checkGuestsCount) } } } // <&new function App() { const [formik] = useBookingForm() const setFormikValues = useMemo(() => debounce(async (form: IFormData) => { const {fields} = form as ComponentData // &chg> for (const [key, {value, error}] of fields) { // <&chg const field = formik.getFieldProps(key) if (value !== field.value) { try { await formik.setFieldValue(key, value) // &chg> formik.setFieldError(key, error) // <&chg } catch (e) { console.warn(e) } } } }, 400), [formik]) return validators={customValidators} // <&new view={builderView} customization={customization} formStorage={formStorage} initialData={formik.values} onFormDataChange={setFormikValues} getForm={loadForm} actions={{ submitForm: ActionDefinition.functionalAction(async (e) => { // &chg> await e.store.formData.validate() if (Object.keys(e.store.formData.errors).length < 1) { await formik.submitForm() // <&chg } }), }} /> } export default App ``` You can now add validators to fields on the form, full JSON form below.
Click to view the full JSON of the form. ```json { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "fullName", "type": "RsInput", "props": { "label": { "value": "Full name" } // &new> }, "schema": { "validations": [ { "key": "isFullName", "type": "custom" } ] // <&new } }, { "key": "checkinDate", "type": "RsDatePicker", "props": { "label": { "value": "Check-in date" } // &new> }, "schema": { "validations": [ { "key": "dateInTheFuture", "type": "custom" } ] // <&new } }, { "key": "guestCount", "type": "RsNumberFormat", "props": { "label": { "value": "Guest count" } // &new> }, "schema": { "validations": [ { "key": "checkGuestCount", "type": "custom" } ] // <&new } }, { "key": "rsButton1", "type": "RsButton", "props": { "children": { "value": "Send" } }, "events": { "onClick": [ { "name": "submitForm", "type": "custom" } ] } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ```
![FormEngine validators](/assets/guides/formik/formik-validators.png) No need for embedded inline form validators, so drop them. ```tsx title='useBookingForm.ts' // ... export const useBookingForm = (): [FormikProps, BookingForm] => { // ... const formik = useFormik({ initialValues, // &del> validate: ({checkinDate, fullName, guestCount}) => { let errors: Partial> = {}; if (!fullName) { errors.fullName = 'Name is required.'; } else if (fullName.trim().split(' ').length < 2) { errors.fullName = 'Please enter a full name.' } if (!checkinDate) { errors.checkinDate = 'Date is required.'; } if (!isFinite(guestCount as number) || (guestCount as number) < 1) { errors.guestCount = 'No guest entered.'; } return errors; }, // <&del onSubmit: (data) => { ``` If you fill out the form, you will see that it is now processed by separate Yup validators. ![Yup validators](/assets/guides/formik/formik-yup.png) ## Conclusion By integrating FormEngine with Formik, you can create powerful, user-friendly forms in your React applications. This combination allows you to leverage the strengths of both libraries, ensuring efficient form management and validation. With the steps outlined in this guide, you can easily sync data and validation errors between FormEngine and Formik, enhancing your development experience. For the complete source code and additional examples, visit our public [GitHub repository](https://github.com/optimajet/formengine/tree/master/premium/examples/with-formik). Start building better forms today with FormEngine and Formik! --- # Integration with Electron URL: https://formengine.io/documentation/guides/integration-with-electron.md # Integration with Electron ## Overview In this article, we will run FormEngine inside [Electron](https://www.electronjs.org/), and also make the [Monaco editor](https://microsoft.github.io/monaco-editor/) work locally, without CDN. ## Bootstrap application We will use [electron-react-boilerplate](https://github.com/electron-react-boilerplate/electron-react-boilerplate) to create our simple Electron application. Open your shell and execute the following commands: ```bash git clone --depth 1 --branch main https://github.com/electron-react-boilerplate/electron-react-boilerplate.git electron-formengine cd electron-formengine npm install ``` Now you can run application by executing following command: ```bash npm run start ``` ![Electron FormEngine](/assets/guides/integration-with-electron/integration-with-electron-01.png) ## Installing FormEngine Let's install the packages, run the following commands: ```bash npm install @react-form-builder/designer @react-form-builder/components-rsuite npm install ``` Now change the contents of the `App.tsx` file: ```typescript jsx title='src/renderer/App.tsx' import React from 'react' import {BuilderView, FormBuilder} from '@react-form-builder/designer' const builderView = new BuilderView([]) function App() { return } export default App ``` Great, now you can launch the application and see the error loading the Monaco scripts: ```bash npm run start ``` ![Electron FormEngine](/assets/guides/integration-with-electron/integration-with-electron-02.png) The thing is that the Monaco editor is set to download from CDN by default. Let's change this behavior. ## Monaco settings First of all, we need to add settings to load the Monaco editor from the local NPM package. Create a file `src/renderer/monaco-settings.ts` with the following contents: ```typescript jsx title='src/renderer/monaco-settings.ts' import * as monaco from 'monaco-editor'; import {loader} from '@monaco-editor/react'; // eslint-disable-next-line no-restricted-globals self.MonacoEnvironment = { getWorkerUrl: (_, label) => { if (label === 'json') { return './json.worker.bundle.js'; } if (label === 'css' || label === 'scss' || label === 'less') { return './css.worker.bundle.js'; } if (label === 'html' || label === 'handlebars' || label === 'razor') { return './html.worker.bundle.js'; } if (label === 'typescript' || label === 'javascript') { return './ts.worker.bundle.js'; } return './editor.worker.bundle.js'; }, }; loader.config({monaco}); ``` FormEngine is using JavaScript code actions, which violates the CSP policies defined in the `src/renderer/index.ejs` file. Remove the `meta` tag for "Content-Security-Policy" and your file will look like this: ```html title='src/renderer/index.ejs' Hello Electron React!
``` Now let's add the use of `monaco-settings` to `App.tsx`, and add the components. Change the contents of `App.tsx` to the following: ```typescript jsx title='src/renderer/App.tsx' {1} import './monaco-settings'; import React from 'react'; import {BuilderView, FormBuilder} from '@react-form-builder/designer'; import {rSuiteComponents} from '@react-form-builder/components-rsuite'; const components = rSuiteComponents.map((c) => c.build()); const builderView = new BuilderView(components); export default function App() { return (
); } ``` The last bit is fixing the webpack configuration files to package Monaco workers. You can find many examples of how to do this in the official [Monaco repository](https://github.com/microsoft/monaco-editor/tree/main/samples). Take a look at this [example](https://github.com/microsoft/monaco-editor/blob/main/samples/electron-esm-webpack/webpack.config.js). Open `.erb/configs/webpack.config.renderer.dev.ts` and change `entry` to the highlighted one, also change `output.filename` as below: ```javascript title='.erb/configs/webpack.config.renderer.dev.ts' {3-12,17} const configuration: webpack.Configuration = { //... entry: { client: `webpack-dev-server/client?http://localhost:${port}/dist`, devServer: 'webpack/hot/only-dev-server', renderer: path.join(webpackPaths.srcRendererPath, 'index.tsx'), 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js', 'json.worker': 'monaco-editor/esm/vs/language/json/json.worker', 'css.worker': 'monaco-editor/esm/vs/language/css/css.worker', 'html.worker': 'monaco-editor/esm/vs/language/html/html.worker', 'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { path: webpackPaths.distRendererPath, publicPath: '/', filename: '[name].bundle.js', library: { type: 'umd', }, }, //... }; ``` Now let's add similar changes to the `.erb/configs/webpack.config.renderer.prod.ts` file - change `entry` and `output.filename`: ```javascript title='.erb/configs/webpack.config.renderer.prod.ts' {3-10,15} const configuration: webpack.Configuration = { //... entry: { renderer: path.join(webpackPaths.srcRendererPath, 'index.tsx'), 'editor.worker': 'monaco-editor/esm/vs/editor/editor.worker.js', 'json.worker': 'monaco-editor/esm/vs/language/json/json.worker', 'css.worker': 'monaco-editor/esm/vs/language/css/css.worker', 'html.worker': 'monaco-editor/esm/vs/language/html/html.worker', 'ts.worker': 'monaco-editor/esm/vs/language/typescript/ts.worker', }, output: { path: webpackPaths.distRendererPath, publicPath: './', filename: '[name].bundle.js', library: { type: 'umd', }, }, //... }; ``` ## Running application Launch the application using the command: ```bash npm run start ``` You will see something similar to what is shown in the screenshot below (the CSP warning only exists in development mode): ![Electron FormEngine](/assets/guides/integration-with-electron/integration-with-electron-03.png) Go to the "Settings" tab in the left panel and click "Add a code action" button. The code editor has successfully loaded: ![Electron FormEngine](/assets/guides/integration-with-electron/integration-with-electron-04.png) ## Building for production To package the application for production run the command: ```bash npm run package ``` You can find the binaries for your platform in the `release/build` folder. For example, for macOS this would be `release/build/mac-arm64`. Let's check how the CSS editor works. Select the "Screen" component, and then open the "Style" tab in the right pane. Start typing text in the code editor, notice that IntelliSense is working: ![Electron FormEngine](/assets/guides/integration-with-electron/integration-with-electron-05.png) ## Conclusion Packaging a FormEngine application in Electron is not much different from packaging any other React application, only packaging the Monaco editor can cause difficulties. We hope this article will help you save your time. --- # Linking dropdown components URL: https://formengine.io/documentation/guides/linking-dropdowns.md # Linking dropdown components Linking components refers to establishing relationships between different components within your form via specific functions. Namely, you can define an action that updates the value of one component based on the value of another component. Therefore, your form can feature more complex workflows and provide better user experience. The following guide showcases how to link two dropdown components using an `onChange` action. Once the value of the first dropdown list is configured, the value of the second dropdown list will be updated automatically. ## Linking dropdown lists example This example incorporates two dropdown components: _country_ and _city_. The __city__ dropdown component's options depend on the selected value of the __country__ dropdown component. When the user selects a country, the options in the city dropdown should update accordingly: ```json { "version": "1", "actions": { "onCountryChange": { "body": " e.data.city = undefined", "params": {} } }, "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "country", "type": "RsDropdown", "props": { "data": { "value": [ { "value": "at", "label": "Austria" }, { "value": "cn", "label": "China" }, { "label": "Turkey", "value": "tr" }, { "label": "USA", "value": "us" } ] }, "label": { "value": "Country" }, "creatable": { "value": true } }, "events": { "onChange": [ { "name": "onCountryChange", "type": "code" } ] } }, { "key": "city", "type": "RsDropdown", "props": { "label": { "value": "City" }, "data": { "value": [], "computeType": "function", "fnSource": " const cities = {\n 'at': [\n {label: 'Innsbruck', value: 'Innsbruck'},\n {label: 'Salzburg', value: 'Salzburg'},\n {label: 'Vienna', value: 'Vienna'},\n ],\n 'cn': [\n {label: 'Shanghai', value: 'Shanghai'},\n {label: 'Beijing', value: 'Beijing'},\n {label: 'Guangzhou', value: 'Guangzhou'},\n ],\n 'tr': [\n {label: 'Istanbul', value: 'Istanbul'},\n {label: 'Antalya', value: 'Antalya'},\n {label: 'Izmir', value: 'Izmir'},\n {label: 'Ankara', value: 'Ankara'},\n ],\n 'us': [\n {label: 'New York', value: 'New York'},\n {label: 'Los Angeles', value: 'Los Angeles'},\n {label: 'Washington', value: 'Washington'},\n ],\n }\n\nconsole.log('recalc values for ', form.data.country, cities[form.data.country] ?? [])\n return cities[form.data.country] ?? []" }, "creatable": { "value": true } }, "events": { "onLoadData": [] } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` Two features of this form are noteworthy: 1. Upon changing the value in the dropdown list of countries, the `onCountryChange` action code is triggered. 2. The `Data` property, which represents the list of possible values for the **city** dropdown, is a computed field that assumes different values based on the value of the **country** field. When the **country** dropdown value changes, the `onCountryChange` action is executed. Inside the action, the value of the `city` dropdown is set to `undefined`. This ensures that the selected city is reset whenever the country changes. Here's the code: ```javascript title='onCountryChange' {6} /** * @param {ActionEventArgs} e - the action arguments. * @param {} args - the action parameters arguments. */ async function Action(e, args) { e.data.city = undefined } ``` By attaching the `onCountryChange` action to the `onChange` event of the country dropdown, the action is automatically triggered whenever the user selects a different country. This allows the `city` dropdown to be dynamically updated with the cities corresponding to the selected country, creating a linked relationship between the two dropdowns. When the value in **country** changes, the list of possible values in the **city** field is automatically recalculated. Here is the code of the calculated field: ```javascript {31} /** * @param {IFormData} form * @return {array} */ function Calculation(form) { const cities = { 'at': [ {label: 'Innsbruck', value: 'Innsbruck'}, {label: 'Salzburg', value: 'Salzburg'}, {label: 'Vienna', value: 'Vienna'}, ], 'cn': [ {label: 'Shanghai', value: 'Shanghai'}, {label: 'Beijing', value: 'Beijing'}, {label: 'Guangzhou', value: 'Guangzhou'}, ], 'tr': [ {label: 'Istanbul', value: 'Istanbul'}, {label: 'Antalya', value: 'Antalya'}, {label: 'Izmir', value: 'Izmir'}, {label: 'Ankara', value: 'Ankara'}, ], 'us': [ {label: 'New York', value: 'New York'}, {label: 'Los Angeles', value: 'Los Angeles'}, {label: 'Washington', value: 'Washington'}, ], } console.log('recalc values for ', form.data.country, cities[form.data.country] ?? []) return cities[form.data.country] ?? [] } ``` By following this example, you can link your own dropdown components together and update the options of one dropdown based on the selection of the other dropdown. --- # Google Maps address autocomplete URL: https://formengine.io/documentation/guides/maps-with-address-autocomplete.md # Google Maps address autocomplete ## Introduction This guide explains how to set up [Google Maps](/components-library/fields-components/google-map) with autocomplete functionality for address fields. ### Set up the Google Maps component with Autocomplete - In your form definition, add a `GoogleMap` component to display the map. - Fill the `API key` property with your Google Maps API key. - Enable the `Show Map Control` property to show map control options. ![MapProperties](/assets/guides/maps-with-address-autocomplete/map-properties.png) ### Add required input fields for address details After creating the `GoogleMap` component, add only the necessary `Input` components for each part of the address that you need, such as _Address_, _City_, _Country_, _ZIP_, and _State_. ![AddressInputs](/assets/guides/maps-with-address-autocomplete/map-address-inputs.png) ### Define an action to populate the address fields - Select the map component in Designer. - Go to the _Actions_ tab. - Create a new [code action](/actions) for the `onPlaceSelect` event. - Choose the newly created action to handle address population. ![MapOnPlaceSelectAction](/assets/guides/maps-with-address-autocomplete/map-on-place-select-action.png) Here's the sample action code where we fill in the form data to populate the address input fields: ```javascript /** * @param {ActionEventArgs} e - the action arguments. * @param {} args - the action parameters arguments. */ async function Action(e, args) { console.log(e); const addr = e.args[1]; if (!addr) return; e.data.address = addr.address; e.data.city = addr.city; e.data.country = addr.country; e.data.postalCode = addr.postalCode; e.data.state = addr.state; } ``` This action listens to the `onPlaceSelect` event from the `GoogleMap` component and updates the fields with the relevant address details. Now, as you enter an address in the Google Maps search bar and make a selection, the input fields automatically populate with the correct values for each part of the address. ### Map JSON form example ```json {3-7,18-20,33-35,53-58} title='MapForm.json' showLineNumbers { "version": "1", "actions": { "fillAddress": { "body": " console.log(e)\n const addr = e.args[1]\n if (!addr) return\n e.data.address = addr.address\n e.data.city = addr.city\n e.data.country = addr.country\n e.data.postalCode = addr.postalCode\n e.data.state = addr.state", "params": {} } }, "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "googleMap", "type": "GoogleMap", "props": { "apiKey": { "value": "Your Google Map Api Key" }, "mapId": { "value": "DEMO_MAP_ID" }, "addMarkerOnSearch": { "value": true }, "allowChangingMarkers": { "value": true }, "allowMultipleMarkers": { "value": true }, "showMapControl": { "value": true }, "gestureHandling": { "value": "none" }, "language": { "value": "En" }, "region": { "value": "En" }, "colorScheme": { "value": "LIGHT" }, "mapTypeId": { "value": "roadmap" } }, "events": { "onPlaceSelect": [ { "name": "fillAddress", "type": "code" } ] } }, { "key": "rsContainer1", "type": "RsContainer", "props": {}, "children": [ { "key": "address", "type": "RsInput", "props": { "label": { "value": "Address" } } }, { "key": "city", "type": "RsInput", "props": { "label": { "value": "City" } } }, { "key": "country", "type": "RsInput", "props": { "label": { "value": "Country" } } }, { "key": "postalCode", "type": "RsInput", "props": { "label": { "value": "ZIP" } } }, { "key": "state", "type": "RsInput", "props": { "label": { "value": "State" } } } ] } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` --- # Styling multiple components URL: https://formengine.io/documentation/guides/styling-multiple-components.md # Styling multiple components ## Introduction When working with complex forms, it can be time-consuming and repetitive to customize and style every single component individually. However, there is a way to define and apply a single style for multiple components via the graphical user interface, saving you time and effort. The most simple and efficient way to style multiple components is to define a CSS class for the components. This allows you to apply the same styles to multiple components at once, making it easy to maintain consistency in your design. This guide will walk you through the process of creating a CSS class and applying this class to multiple components at once. ## Styling Example Assume you want to create a form with 3 checkboxes. You want to style these components to have a consistent color scheme, making each checkbox green. To ensure consistent styling across all components, follow the example below. ### Define class name Create your first component and enter its class name within the _Style_ properties menu. In this example a new checkbox component is created and its class name is assigned to __green-checkbox__. ![New_class](/assets/guides/styling-multiple-components/multicss1.png) ### Copy component selectors Once you have defined the component and its class name, you need to copy the CSS selectors of the component using a code inspection tool like Chrome DevTools. In this example, the checkbox component incorporates the following selectors: ```css .green-checkbox.rs-checkbox-checked .rs-checkbox-inner:before ``` The selectors in this example are listed within the `::before` element. ![Copy_selectors](/assets/guides/styling-multiple-components/multicss2.png) ### Provide CSS code to Screen component After identifying the associated CSS selectors for your component, navigate to the __Screen's Style properties__ within the user interface. Use the code editor at the bottom of the _Style_ menu to provide the desired styling for your component. Make sure to use the copied selectors to target the component for customization. In this example, the checkbox component will be styled with a green background color and green border color as follows: ```css element.style { .green-checkbox.rs-checkbox-checked .rs-checkbox-inner:before { background-color: green !important; border-color: green; } } ``` Therefore, the color of the checkbox component will be switched to green as shown below. ![CSS_code](/assets/guides/styling-multiple-components/multicss3.png) ### Apply class to new components Once you have successfully defined the styling for your form's screen, you can easily apply the same styling to new components by assigning them the defined class name. In this example, two additional checkboxes are created. By assigning them the __green-checkbox__ class, they will automatically change their color to green. ![Apply_class](/assets/guides/styling-multiple-components/multicss4.png) By following this workflow, you can ensure consistent styling across all your required components. --- # Tracking form changes URL: https://formengine.io/documentation/guides/tracking-form-changes.md # Tracking form changes Detecting and tracking changes to data that is submitted to your form can be a crucial aspect of your form management. To detect changes to your provided form, the [onFormDataChange](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#onformdatachange) function is available for working with forms. You can use this function to detect unsaved changes. ## How onFormDataChange works The `onFormDataChange` function is used to track changes to form data. This can include changes to input or text fields, drop-down menus, checkboxes, and other form components that require user interaction. When form data changes, the `onFormDataChange` function is called to allow custom code to be executed. For example, if you have a _Save_ button to save form data, you can disable it if the data on the form is the same as it was originally. ## Example workflow The following provides an example that showcases how the `onFormDataChange` functionality is used to track changes. ### Form configuration Define the logic for the `onFormDataChange` function and define input fields, dropdown lists, or other form components that require interactions from users. The following snippet provides an example of implemented `onFormDataChange` and a simple form in JSON format: ```tsx {62-66,92-95,104-108} import { formEngineRsuiteCssLoader, ltrCssLoader, RsLocalizationWrapper, rSuiteComponents, rtlCssLoader, } from '@react-form-builder/components-rsuite' import {BiDi, createView, FormViewer} from '@react-form-builder/core' // Here you can pass the metadata of your components const componentsMetadata = rSuiteComponents.map( (definer) => definer.build().model, ) const view = createView(componentsMetadata) // The following parameters are required for correct CSS loading in LTR and RTL modes .withViewerWrapper(RsLocalizationWrapper) .withCssLoader(BiDi.LTR, ltrCssLoader) .withCssLoader(BiDi.RTL, rtlCssLoader) .withCssLoader('common', formEngineRsuiteCssLoader) // Example form, in JSON format const emptyForm = ` { "version": "1", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "firstName", "type": "RsInput", "props": { "label": { "value": "First name" } } }, { "key": "lastName", "type": "RsInput", "props": { "label": { "value": "Last Name" } } }, { "key": "rsButton1", "type": "RsButton", "props": { "appearance": { "value": "primary" }, "children": { "value": "Save" }, "color": { "value": "blue" }, "disabled": { "value": false, "computeType": "function", "fnSource": " return form.state.dataChanged !== true;" } } } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ` const formName = 'Example' async function getFormFn(name?: string) { if (name === formName) return emptyForm throw new Error(`Form '${name}' is not found.`) } const initialData = { firstName: 'Mars', lastName: 'Jupiter', } const App = () => { return ( { const sourceData = JSON.stringify(initialData) const currentData = JSON.stringify(data) state.dataChanged = sourceData !== currentData }} /> ) } export default App ``` Here, initial form data is defined within `initialData`. The `onFormDataChange` function compares initial data with the current form data (i.e., `data`). Both initial data and current data are stringified to facilitate the comparison process. The comparison results are saved within a user defined key-value observable storage called `state`. Learn more about the state storage by using [the API-reference](/api-reference/@react-form-builder/core/interfaces/IFormData#state) and [the article in FAQ](/storing-user-defined-data). ### Previewing form Once your form is configured and the logic for `onFormDataChange` is defined, you can preview the form and the workflow by using the corresponding __Preview__ button. The example form includes the _Save_ button component with the functional __Disabled__ property that switches on and off depending on the user data state: ![Functional_disable](/assets/guides/tracking-form-changes/disable-button.png) Therefore, in case the current provided data equals to the initial stored data, the __Save__ button will be disabled. Consequently, users will be able to track changes and save the input only if changes and updates are provided. --- # Updating RSuite library URL: https://formengine.io/documentation/guides/updating-rsuite.md # Updating RSuite library To update the RSuite library in Optimajet’s Designer or Components RSuite, you need to gain access to the source code. After updating, copy `rsuite-no-reset.min.css` and `rsuite-no-reset-rtl.min.css` from `node_modules/rsuite/dist` to `packages/designer/public/css`and `packages/views/rsuite/public/css` --- # Using Repeater URL: https://formengine.io/documentation/guides/using-repeater.md # Using Repeater In this guide, we will look at how to work with the Repeater component, show you how to work with the component data that is inside the Repeater. You can find a description of the component properties on [this page](/components-library/structure-components/repeater). The Repeater component differs from other components in that it displays differently in designer mode and form view mode. In designer mode Repeater displays child components like a normal container, but in view mode Repeater displays an array of components based on the value from the `Value` property. If the `Value` property does not contain data (or contains an empty array), the component will not display child components. The data in the `Value` property is an array of objects. Each object in the array is the data of one Repeater row/column. Let's move on to a Repeater use case where we show how data is handled inside Repeater and how actions, validation, localization and calculated fields are handled. ## Repeater actions You can use built-in actions to manage rows in Repeater. The following actions are available: - `addRow`: adds a new row to Repeater. - `removeRow`: removes the last row from Repeater. This guide does not use these actions to give you an understanding of how to manipulate data in Repeater. ### addRow action Use this action to add a new row to Repeater. The action has the following optional parameters: - `dataKey`: Repeater's data key in the form data. If the parameter is not specified, the action will try to find a Repeater that is parent to this component. - `rowData`: data string (JSON) for the new row. If the parameter is not specified, an empty object will be used as data for the new row. - `index`: index of the new row. If the parameter is not specified, the new row will be added to the end of Repeater. - `max`: maximum number of rows in Repeater. If the parameter is not specified, the maximum number of rows is not limited. ### removeRow action - `dataKey`: Repeater's data key in the form data. If the parameter is not specified, the action will try to find a Repeater that is parent to this component. - `index`: index of the row to be deleted. If no parameter is specified, the action will use the index from the parameters, see [e.index](/api-reference/@react-form-builder/core/classes/ActionEventArgs#index) or `-1` (last row). - `min`: minimum number of rows in Repeater. If the parameter is not specified, the minimum number of rows is not limited. ## Repeater example Take a look at the form below, JSON below (you can upload this form to our [demo](https://demo.formengine.io/) to see how it works):
Example of a booking form ```json { "version": "1", "actions": { "addRepeaterElement": { "body": " const data = e.data[args.name] ?? []\n if (typeof args.max !== 'undefined') {\n if (data.length >= args.max) return\n }\n data.push({})\n e.data[args.name] = [...data]", "params": { "name": "string", "max": "number" } }, "increment": { "body": " let value = e.data[args.item] + 1\n value = value > args.max ? args.max : value\n e.data[args.item] = value", "params": { "item": "string", "max": "number" } }, "decrement": { "body": " let value = e.data[args.item] - 1\n value = value < args.min ? args.min : value\n e.data[args.item] = value", "params": { "item": "string", "min": "number" } }, "removeChildAge": { "body": " const data = e.data.childrenAges ?? []\n const length = e.data.childrenAges.length\n if (length) {\n e.data.childrenAges = data.toSpliced(length - 1)\n }", "params": {} }, "removeParentRepeaterItem": { "body": " const data = e.parentData[args.name]\n e.parentData[args.name] = data.toSpliced(e.index, 1)", "params": { "name": "string" } }, "removeRepeaterElement": { "body": " const data = e.data[args.name]\n if (data.length <= args.min) return\n e.data[args.name] = data.toSpliced(data.length - 1, 1)", "params": { "name": "string", "min": "number" } } }, "tooltipType": "RsTooltip", "errorType": "RsErrorMessage", "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "header", "type": "RsHeader", "props": { "content": { "value": "Hotel booking" } } }, { "key": "date", "type": "RsDatePicker", "props": { "editable": { "value": false }, "oneTap": { "value": true }, "label": { "value": "Date" } } }, { "key": "rsContainer1", "type": "RsContainer", "props": {}, "children": [ { "key": "bookButton", "type": "RsButton", "props": { "children": { "value": "Button", "computeType": "localization" }, "appearance": { "value": "primary" }, "color": { "value": "green" } }, "events": { "onClick": [ { "name": "addRepeaterElement", "type": "code", "args": { "name": "rooms" } } ] } } ] }, { "key": "rooms", "type": "Repeater", "props": { "value": { "value": [] } }, "children": [ { "key": "rsContainer7", "type": "RsContainer", "props": {}, "css": { "any": { "object": { "flexDirection": "row" } } }, "children": [ { "key": "rsContainer6", "type": "RsContainer", "props": {}, "children": [ { "key": "roomType", "type": "RsDropdown", "props": { "cleanable": { "value": false }, "data": { "value": [ { "value": "standart", "label": "Standart" }, { "value": "luxe", "label": "Luxe" } ] }, "label": { "value": "Room" } }, "schema": { "validations": [ { "key": "required" } ] }, "wrapperCss": { "any": { "object": {} } } }, { "key": "removeRoomButton", "type": "RsButton", "props": { "children": { "value": "Remove room", "computeType": "function", "fnSource": " const index = (form.index ?? 0) + 1\n return `Remove room #${index}`" } }, "events": { "onClick": [ { "name": "removeParentRepeaterItem", "type": "code", "args": { "name": "rooms" } } ] } }, { "key": "rsStaticContent1", "type": "RsStaticContent", "props": { "content": { "computeType": "localization" } } } ] }, { "key": "rsContainer5", "type": "RsContainer", "props": {}, "children": [ { "key": "rsContainer2", "type": "RsContainer", "props": {}, "css": { "any": { "object": { "flexDirection": "row" } } }, "children": [ { "key": "minusAdultButton", "type": "RsButton", "props": { "children": { "value": "-" } }, "wrapperCss": { "any": { "object": { "marginTop": "auto" } } }, "events": { "onClick": [ { "name": "decrement", "type": "code", "args": { "item": "adults", "min": 1 } }, { "name": "removeRepeaterElement", "type": "code", "args": { "name": "names", "min": 1 } } ] } }, { "key": "adults", "type": "RsNumberFormat", "props": { "allowNegative": { "value": false }, "label": { "value": "Adults" }, "value": { "value": 1 }, "disabled": { "value": true } }, "schema": { "validations": [] }, "wrapperCss": { "any": { "object": { "marginTop": "auto" } } }, "tooltipProps": { "text": { "computeType": "function", "fnSource": " const index = form.index ?? 0\n return `Adults in room #${index + 1}`" } } }, { "key": "plusAdultButton", "type": "RsButton", "props": { "children": { "value": "+" } }, "wrapperCss": { "any": { "object": { "marginTop": "auto" } } }, "events": { "onClick": [ { "name": "increment", "type": "code", "args": { "item": "adults", "max": 5 } }, { "name": "addRepeaterElement", "type": "code", "args": { "name": "names" } } ] } } ] }, { "key": "rsContainer4", "type": "RsContainer", "props": {}, "css": { "any": { "object": { "flexDirection": "row" } } }, "children": [ { "key": "minusChildButton", "type": "RsButton", "props": { "children": { "value": "-" } }, "wrapperCss": { "any": { "object": { "marginTop": "auto" } } }, "events": { "onClick": [ { "name": "decrement", "type": "code", "args": { "item": "children", "min": 0 } }, { "name": "removeChildAge", "type": "code" } ] } }, { "key": "children", "type": "RsNumberFormat", "props": { "allowNegative": { "value": false }, "label": { "value": "Children" }, "value": { "value": 0 }, "disabled": { "value": true } }, "schema": { "validations": [] } }, { "key": "plusChildButton", "type": "RsButton", "props": { "children": { "value": "+" } }, "wrapperCss": { "any": { "object": { "marginTop": "auto" } } }, "events": { "onClick": [ { "name": "increment", "type": "code", "args": { "item": "children", "max": 7 } }, { "name": "addRepeaterElement", "type": "code", "args": { "name": "childrenAges", "max": 7 } } ] } } ] }, { "key": "rsContainer3", "type": "RsContainer", "props": {}, "css": { "any": { "object": { "flexDirection": "column" } } }, "children": [ { "key": "childrenAges", "type": "Repeater", "props": {}, "children": [ { "key": "childAge", "type": "RsDropdown", "props": { "data": { "value": [ { "value": "none", "label": "Age needed" }, { "value": "0", "label": "0 years old" }, { "value": "1", "label": "1 year old" }, { "value": "2", "label": "2 years old" }, { "value": "3", "label": "3 years old" }, { "value": "4", "label": "4 years old" }, { "value": "5", "label": "5 years old" }, { "value": "6", "label": "6 years old" }, { "value": "7", "label": "7 years old" }, { "value": "8", "label": "8 years old" }, { "value": "9", "label": "9 years old" }, { "value": "10", "label": "10 years old" }, { "value": "11", "label": "11 years old" }, { "value": "12", "label": "12 years old" }, { "value": "13", "label": "13 years old" }, { "value": "14", "label": "14 years old" }, { "value": "15", "label": "15 years old" }, { "value": "16", "label": "16 years old" }, { "value": "17", "label": "17 years old" } ] }, "cleanable": { "value": false }, "value": { "value": "none" }, "label": { "value": "" } }, "schema": { "validations": [ { "key": "code", "args": { "code": " return value !== 'none'" } } ] }, "css": { "any": { "string": "" } }, "tooltipProps": { "text": { "computeType": "function", "fnSource": " const index = form.index ?? 0\n const date = form.rootData.date?.toISOString() ?? 'unknown'\n const room = form.parentData?.roomType ?? 'unknown'\n return `Child #${index + 1} in room ${room}, date: ${date}`" } } } ], "css": { "any": { "object": {}, "string": " flex-wrap: wrap;\n border: 1px silver dashed;" } }, "wrapperCss": { "any": { "object": { "flexDirection": "row" } } } } ], "wrapperCss": { "any": { "object": { "marginTop": "auto" } } } } ] } ] }, { "key": "names", "type": "Repeater", "props": { "value": { "value": [ {} ] } }, "children": [ { "key": "rsContainer9", "type": "RsContainer", "props": {}, "css": { "any": { "object": { "flexDirection": "row" }, "string": " border: 1px orchid dashed;" } }, "children": [ { "key": "firstName", "type": "RsInput", "props": { "label": { "value": "First name" } }, "schema": { "validations": [ { "key": "required" } ], "autoValidate": false } }, { "key": "lastName", "type": "RsInput", "props": { "label": { "value": "Last name" } }, "schema": { "validations": [ { "key": "required" } ] } } ] } ] } ], "css": { "any": { "object": { "flexDirection": "column" }, "string": " border: 1px darkorange dashed;" } } }, { "key": "validateButton", "type": "RsButton", "props": { "appearance": { "value": "primary" }, "children": { "value": "Validate" } }, "events": { "onClick": [ { "name": "validate", "type": "common" } ] } } ] }, "localization": { "en-US": { "bookButton": { "component": { "children": " Book a room" } }, "rsStaticContent1": { "component": { "content": "Room {$roomType}" } } }, "de-DE": { "bookButton": { "component": { "children": " Zimmer buchen" } }, "rsStaticContent1": { "component": { "content": "Zimmer {$roomType}" } } } }, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" }, { "code": "de", "dialect": "DE", "name": "Deutsch", "description": "German", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ```
For example, we will take a simplified hotel booking form. There are three elements of type Repeater in the form: 1. Rooms 2. Names 3. Children's ages For illustrative purposes, these elements are circled with dashed lines of different colors. There are also the following fields on the form: - field for entering the date of booking - fields for selecting room type (standard/suite) - button for deleting the added room - static element for displaying the selected room type - buttons to increase/decrease the number of adults - buttons to increase/decrease the number of children - fields for selecting the age of children (if children are indicated) - fields for entering the first and last name of adults - button for validating the whole form This is how the form looks like in designer mode: ![Repeater](/assets/guides/using-repeater/using-repeater-01.png "Booking form") And this is how the form looks like in view mode (English): ![Repeater](/assets/guides/using-repeater/using-repeater-02.png "Booking form (English)") And this is how the form might look in German: ![Repeater](/assets/guides/using-repeater/using-repeater-03.png "Booking form (Deutsch)") ## Explanation When you work with the Repeater component in designer mode, it appears as a regular container on the screen. However, when you switch to view the form, things change. In this mode, the Repeater uses an array that is populated from the `Value` property (which is reflected in the form data) and displays your components multiple times, depending on how many elements are in the array. By modifying the form data, you can manipulate the number of items in the Repeater. There is another important difference in the behavior of the components that are inside the Repeater. The data of these components is isolated, as it were. You can think of a single Repeater element as one mini-form with its own data set. Let's look at how you can add and remove items in the Repeater. ### Adding items to the Repeater If we look at the "Book a room" button, then the [Action](/actions) `addRepeaterElement` is linked to this button. This action has a fairly general code that can be used in other forms too. The action parameters `name` and `max` define the name of the Repeater property in the form data and the maximum number of elements that can be added to the repeater, respectively. The action code is pretty straightforward, it gets the current repeater data from the form data and then adds a new element to the data array if the number of elements is lower than the maximum. After changing the data, the Repeater component will automatically display the set of components on the form. In our case, a set of components for booking a room will be added. ```javascript title='addRepeaterElement' /** * @param {ActionEventArgs} e - the action arguments. * @param {{name: string, max: number}} args - the action parameters arguments. */ async function Action(e, args) { const data = e.data[args.name] ?? [] if (typeof args.max !== 'undefined') { if (data.length >= args.max) return } data.push({}) e.data[args.name] = [...data] } ``` The `plusAdultButton` and `plusChildButton` buttons that increase the number of elements in the Repeaters to specify the names of residents and specify the ages of children also use this action. ### Removing items from the Repeater Removing items from Repeater is similar to the add operation, you need to modify the array in the form data by removing items from the array. There is a `removeParentRepeaterItem` action bound to the `removeRoomButton` to remove a room. This action has a `name` parameter that also defines the name of the property in the form data that stores the Repeater data array. The code of this action contains only a few lines, it basically just removes an element from the array in the form data by a certain key. Pay attention to the features: 1. The code operates on the data in [e.parentData](/api-reference/@react-form-builder/core/classes/ActionEventArgs#parentdata). 2. The code uses the index from [e.index](/api-reference/@react-form-builder/core/classes/ActionEventArgs#index). ```javascript title='removeParentRepeaterItem' /** * @param {ActionEventArgs} e - the action arguments. * @param {{name: string}} args - the action parameters arguments. */ async function Action(e, args) { const data = e.parentData[args.name] e.parentData[args.name] = data.toSpliced(e.index, 1) } ``` Since the button is inside the Repeater component, the data in [e.data](/api-reference/@react-form-builder/core/classes/ActionEventArgs#data) will be different, this property will contain the data that is in this Repeater element. The [e.index](/api-reference/@react-form-builder/core/classes/ActionEventArgs#index) property will contain the index of the element in the Repeater data array. You can access the data of the parent form through the [e.parentData](/api-reference/@react-form-builder/core/classes/ActionEventArgs#parentdata) property. And through the [e.rootData](/api-reference/@react-form-builder/core/classes/ActionEventArgs#rootdata) property, you can get the data of the entire form. When the component to remove elements from the Repeater is outside the Repeater, you need to operate `e.data` as the `removeRepeaterElement` action on the `minusAdultButton` does. ```javascript title='removeRepeaterElement' /** * @param {ActionEventArgs} e - the action arguments. * @param {{name: string, min: number}} args - the action parameters arguments. */ async function Action(e, args) { const data = e.data[args.name] if (data.length <= args.min) return e.data[args.name] = data.toSpliced(data.length - 1, 1) } ``` ### Computed properties In [computed properties](/computed-properties) you have the same data available to you as in actions. For example, you can look at the `childAge` component (the field for selecting the child's age), which has the tooltip text set as a calculated field. ```javascript title='childAge.Text tooltip text' /** * @param {IFormData} form * @return {string} */ function Calculation(form) { const index = form.index ?? 0 const date = form.rootData.date?.toISOString() ?? 'unknown' const room = form.parentData?.roomType ?? 'unknown' return `Child #${index + 1} in room ${room}, date: ${date}` ``` The tooltip text is glued together from these components, which are at different levels: - Date, found at the topmost level of the form `form.rootData.date`. - The room type `form.parentData?.roomType`, located in the Repeater element a level above. - The actual index of the component in the Repeater. ### Validation [Validating](/validation) the value of a component that is inside the Repeater is not different from normal validation. The validation function also operates on the value of the component. Validation messages can also be localized. The data of the components inside the Repeater will be organized into an array. Component validation errors will also be in the corresponding array elements. The following are examples. ```json title='An example of JSON with data' { "date": "2024-12-03T21:00:00.000Z", "rooms": [ { "roomType": "luxe", "adults": 1, "children": 2, "childrenAges": [ { "childAge": "none" }, { "childAge": "none" } ], "names": [ {} ] } ] } ``` ```json title='An example of JSON with errors' { "rooms": [ { "childrenAges": [ {}, { "childAge": "Invalid input" } ], "names": [ { "lastName": "Required" } ] } ] } ``` ### Localization In [localization](/localization), only the data of the current element inside the Repeater is available to you. This is how the localization of the `Content` property for the `rsStaticContent1` component looks like: ```text title='EN' rsStaticContent1_content =Room {$roomType} ``` ```text title='DE' rsStaticContent1_content =Zimmer {$roomType} ``` You can only use properties that are on the first data level of a given Repeater element. I.e., you cannot write expressions using `.`, this is the current limitation. --- # Adding WASM component URL: https://formengine.io/documentation/guides/wasm-component.md # Adding WASM component :::info You can find the ready-to-connect component in the [@react-form-builder/components-fast-qr](https://www.npmjs.com/package/@react-form-builder/components-fast-qr) NPM package. You can find information on connecting the component in [this section](/components-library/static-components/qr-code). ::: ## Overview [WebAssembly](https://developer.mozilla.org/en-US/docs/WebAssembly) is a popular technology that is becoming more and more popular on the Internet. Let's see how you can connect a WASM (WebAssembly) component to FormEngine. Currently, WASM components use JavaScript helper code to work with the DOM. So we will take a component that already has this code. In this article we will connect a component that generates a QR code from the [fast_qr](https://www.npmjs.com/package/fast_qr) library. The author of the library claims that it is a very fast generator. The library is written in [Rust](https://www.rust-lang.org/), compiled in WASM, and has TypeScript type definitions. A great set of technologies. Well, let's get started! ## Bootstrapping application Let's create a React application, we will use [Vite](https://vitejs.dev/), open the console and run the following commands: ```bash npm create vite@latest my-react-app -- --template react-ts cd my-react-app npm install npm run dev ``` OK, now stop the application and install the FormEngine dependencies (see this [article](https://formengine.io/documentation/installation) for details): ```bash npm install @react-form-builder/core @react-form-builder/designer @react-form-builder/components-rsuite ``` Let's remove the default styles from `src/main.tsx`, your `main.tsx` will look like this: ```typescript jsx title='src/main.tsx' import React from 'react' import ReactDOM from 'react-dom/client' import App from './App.tsx' ReactDOM.createRoot(document.getElementById('root')!).render( , ) ``` Replace the contents of the `src/App.tsx` file with the following: ```typescript jsx title='src/App.tsx' import {rSuiteComponents} from '@react-form-builder/components-rsuite' import {BuilderView, FormBuilder} from '@react-form-builder/designer' const components = rSuiteComponents.map(c => c.build()) const builderView = new BuilderView(components) function App() { return } export default App ``` Basically the application is ready, you can run it using the `npm run dev` command. In the browser you will see a ready window with the designer: ![WASM component](/assets/guides/wasm-component/wasm-component-01.png) ## Adding QR code component First we need to install the `fast_qr` library as a dependency: ```bash npm install fast_qr ``` Second, we need to understand how the component should be used. GitHub has the following example in [description](https://github.com/erwanvivien/fast_qr?tab=readme-ov-file#javascript--typescript): ```javascript /// Once `init` is called, `qr_svg` can be called any number of times import init, {qr_svg, SvgOptions, Shape} from '/pkg/fast_qr.js' const options = new SvgOptions() .margin(4) .shape(Shape.Square) .image("") // Can be a URL or a base64 encoded image .background_color("#b8a4e5") .module_color("#ffffff"); // Using then / catch: init() .then(() => { for (let i = 0; i < 10; i++) { const svg = qr_svg("https://fast-qr.com", options); console.log(svg); } }) .catch(console.error); // Or using modern async await: await init(); for (let i = 0; i < 10; i++) { const svg = qr_svg("https://fast-qr.com", options); console.log(svg); } ``` It looks simple and straightforward. First you need to call the `init` function, and then you can call the `qr_svg` function, which will return a line containing the SVG with the QR code. Let's make a React component that encapsulates this logic. Create a file `src/QrCode.tsx` with the following content: ```typescript jsx title='src/QrCode.tsx' showLineNumbers {1,5,17-25,27,42} import init, {qr_svg, Shape, SvgOptions} from 'fast_qr' import {RefObject, useEffect, useRef} from 'react' import {define} from '@react-form-builder/core' export interface QrCodeProps { /** * The QR code width. */ width?: number /** * The CSS class name. */ className?: string } export const QrCode = (props: QrCodeProps) => { const ref = useRef(null) useEffect(() => { renderQr(ref).catch(console.error) }, []) return
} async function renderQr(ref: RefObject) { await init() if (!ref.current) return const options = new SvgOptions() .margin(4) .shape(Shape.Square) .image("") // Can be a URL or a base64 encoded image .background_color("#b8a4e5") .module_color("#ffffff") ref.current.innerHTML = qr_svg("https://fast-qr.com", options) } export const qrCode = define(QrCode, 'QrCode') .name('QR code') .category('static') ``` So, we have defined the component properties as the `QrCodeProps` interface. We also defined the React functional component `QrCode` that displays `div`. The imperative logic is defined in the `renderQr` function - here the `init` method is called, and if we already have a reference to the rendered `div`, then the created SVG with QR code is installed via the `innerHTML` property. At the end, we defined a constant `qrCode` with the description of the component to connect it to the list of components. It's time to add the component and run the application. Modify the `src/App.tsx` file as shown in the example below: ```typescript jsx title='src/App.tsx' {3,6} import {rSuiteComponents} from '@react-form-builder/components-rsuite' import {BuilderView, FormBuilder} from '@react-form-builder/designer' import {qrCode} from './QrCode' const components = rSuiteComponents.map(c => c.build()) const builderView = new BuilderView([...components, qrCode.build()]) function App() { return } export default App ``` Run the application with the `npm run dev` command, open the browser, you should see that the QR code component is in the left pane: ![WASM component](/assets/guides/wasm-component/wasm-component-02.png) Great, now drag and drop the QR code component into the center panel: ![WASM component](/assets/guides/wasm-component/wasm-component-03.png) Wait, what's that blue line, and where's our generated QR code? Well, the Frontend is dark and full of terrors. Just kidding! If you open the browser console, you will see an error there: ![WASM component](/assets/guides/wasm-component/wasm-component-04.png) Two things are evident here: 1. WASM module is being loaded - in the console the message starts with `WebAssembly.instantiateStreaming`. There was an error due to a MIME-type mismatch, the web server (Vite in this case) returned `text/html` while `application/wasm` was expected. 2. There is a stack-trace of the error. Judging from the stack trace, the problem occurred in `QrCode.tsx:28`. And this is nothing more than calling the `init` function, which internally calls the `__wbg_init` function, which in turn calls the `__wbg_load` function. If you click on the links from the console, you can see the code of these functions. At the moment of writing this article we are using the library version `0.12.5`, in your case the code may be different. Below is the code of these functions, the lines we are interested in are highlighted. ```javascript title='function __wbg_init' {4-6,15} async function __wbg_init(input) { if (wasm !== undefined) return wasm; if (typeof input === 'undefined') { input = new URL('fast_qr_bg.wasm', import.meta.url); } const imports = __wbg_get_imports(); if (typeof input === 'string' || (typeof Request === 'function' && input instanceof Request) || (typeof URL === 'function' && input instanceof URL)) { input = fetch(input); } __wbg_init_memory(imports); const {instance, module} = await __wbg_load(await input, imports); return __wbg_finalize_init(instance, module); } ``` ```javascript title='function __wbg_load' {18} async function __wbg_load(module, imports) { if (typeof Response === 'function' && module instanceof Response) { if (typeof WebAssembly.instantiateStreaming === 'function') { try { return await WebAssembly.instantiateStreaming(module, imports); } catch (e) { if (module.headers.get('Content-Type') != 'application/wasm') { console.warn("`WebAssembly.instantiateStreaming` failed because your server does not serve wasm with `application/wasm` MIME type. Falling back to `WebAssembly.instantiate` which is slower. Original error:\n", e); } else { throw e; } } } const bytes = await module.arrayBuffer(); return await WebAssembly.instantiate(bytes, imports); } else { const instance = await WebAssembly.instantiate(module, imports); if (instance instanceof WebAssembly.Instance) { return {instance, module}; } else { return instance; } } } ``` If you're curious about the cryptic prefixes in the function name `__wbg_`, it's short for [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen), a utility that generates helper code for WASM modules written in Rust. Okay, how do we solve this problem? Let's load the WASM module using Vite. ## Loading WASM module Vite supports loading WebAssembly modules [out of the box](https://vitejs.dev/guide/features.html#webassembly). We just need to add `?init` to the import statement as indicated in the example in the documentation. Also, the `init` function in the `fast_qr` library can take the loaded WASM module as a parameter. The `init` function can also take the path to a WASM module as an argument. You can see the `init` function declaration, usually - in the IDE you can just do a "Go to definition" (Ctrl+Click / ⌘+ Click). Here is the type description from the library (yes, yes, the `init` function is `__wbg_init`): ```typescript export default function __wbg_init(module_or_path?: InitInput | Promise): Promise; ``` Loading the module path is also supported in Vite [out of the box](https://vitejs.dev/guide/assets.html#explicit-url-imports), all you need to do is add `?url` to the import statement. Okay, which module should I load? It's easy to understand if you open the "Network" tab in the browser, and we can see that only one module `fast_qr_bg.wasm` is loaded: ![WASM component](/assets/guides/wasm-component/wasm-component-05.png) The fact that the module loads twice is normal, we are in development mode, and we have React [StrictMode](https://react.dev/reference/react/StrictMode) enabled. In this article, we will load the path to the module, and pass this path to the `init` function. Here is the full text of the `src/QrCode.tsx` file (changed lines are highlighted): ```typescript jsx title='src/QrCode.tsx' {2,29} import init, {qr_svg, Shape, SvgOptions} from 'fast_qr' import module from 'fast_qr/fast_qr_bg.wasm?url' import {RefObject, useEffect, useRef} from 'react' import {define} from '@react-form-builder/core' export interface QrCodeProps { /** * The QR code width. */ width?: number /** * The CSS class name. */ className?: string } export const QrCode = (props: QrCodeProps) => { const ref = useRef(null) useEffect(() => { renderQr(ref).catch(console.error) }, []) return
} async function renderQr(ref: RefObject) { await init(module) if (!ref.current) return const options = new SvgOptions() .margin(4) .shape(Shape.Square) .image("") // Can be a URL or a base64 encoded image .background_color("#b8a4e5") .module_color("#ffffff") ref.current.innerHTML = qr_svg("https://fast-qr.com", options) } export const qrCode = define(QrCode, 'QrCode') .name('QR code') .category('static') ``` Go back to your browser, add the QR code to the form, and you'll see something like this: ![WASM component](/assets/guides/wasm-component/wasm-component-06.png) Great, all that's left is to add properties to the component and make them editable in the designer. ## Adding properties As you may have noticed, the library uses the `SvgOptions` class to customize the parameters of the QR code. This class is a regular builder that is configured through a chain of function calls: ```typescript const options = new SvgOptions() .margin(4) .shape(Shape.Square) .image("") // Can be a URL or a base64 encoded image .background_color("#b8a4e5") .module_color("#ffffff") ``` You can find the type descriptions in the file `fast_qr.d.ts` (in the `fast_qr` package in the `node_modules` folder), the file is quite large, so it is under the cut:
fast_qr.d.ts ```typescript title='fast_qr.d.ts' /* tslint:disable */ /* eslint-disable */ /** * Generate a QR code from a string. All parameters are automatically set. * @param {string} content * @returns {Uint8Array} */ export function qr(content: string): Uint8Array; /** * Generate a QR code from a string. All parameters are automatically set. * @param {string} content * @param {SvgOptions} options * @returns {string} */ export function qr_svg(content: string, options: SvgOptions): string; /** * Enum containing all possible `QRCode` versions */ export enum Version { /** * Version n°01 */ V01 = 0, /** * Version n°02 */ V02 = 1, /** * Version n°03 */ V03 = 2, /** * Version n°04 */ V04 = 3, /** * Version n°05 */ V05 = 4, /** * Version n°06 */ V06 = 5, /** * Version n°07 */ V07 = 6, /** * Version n°08 */ V08 = 7, /** * Version n°09 */ V09 = 8, /** * Version n°10 */ V10 = 9, /** * Version n°11 */ V11 = 10, /** * Version n°12 */ V12 = 11, /** * Version n°13 */ V13 = 12, /** * Version n°14 */ V14 = 13, /** * Version n°15 */ V15 = 14, /** * Version n°16 */ V16 = 15, /** * Version n°17 */ V17 = 16, /** * Version n°18 */ V18 = 17, /** * Version n°19 */ V19 = 18, /** * Version n°20 */ V20 = 19, /** * Version n°21 */ V21 = 20, /** * Version n°22 */ V22 = 21, /** * Version n°23 */ V23 = 22, /** * Version n°24 */ V24 = 23, /** * Version n°25 */ V25 = 24, /** * Version n°26 */ V26 = 25, /** * Version n°27 */ V27 = 26, /** * Version n°28 */ V28 = 27, /** * Version n°29 */ V29 = 28, /** * Version n°30 */ V30 = 29, /** * Version n°31 */ V31 = 30, /** * Version n°32 */ V32 = 31, /** * Version n°33 */ V33 = 32, /** * Version n°34 */ V34 = 33, /** * Version n°35 */ V35 = 34, /** * Version n°36 */ V36 = 35, /** * Version n°37 */ V37 = 36, /** * Version n°38 */ V38 = 37, /** * Version n°39 */ V39 = 38, /** * Version n°40 */ V40 = 39, } /** * Error Correction Coding has 4 levels */ export enum ECL { /** * Low, 7% */ L = 0, /** * Medium, 15% */ M = 1, /** * Quartile, 25% */ Q = 2, /** * High, 30% */ H = 3, } /** * Different possible Shapes to represent modules in a [`crate::QRCode`] */ export enum Shape { /** * Square Shape */ Square = 0, /** * Circle Shape */ Circle = 1, /** * RoundedSquare Shape */ RoundedSquare = 2, /** * Vertical Shape */ Vertical = 3, /** * Horizontal Shape */ Horizontal = 4, /** * Diamond Shape */ Diamond = 5, } /** * Different possible image background shapes */ export enum ImageBackgroundShape { /** * Square shape */ Square = 0, /** * Circle shape */ Circle = 1, /** * Rounded square shape */ RoundedSquare = 2, } /** * Configuration for the SVG output. */ export class SvgOptions { free(): void; /** * Updates the shape of the QRCode modules. * @param {Shape} shape * @returns {SvgOptions} */ shape(shape: Shape): SvgOptions; /** * Updates the module color of the QRCode. Tales a string in the format `#RRGGBB[AA]`. * @param {string} module_color * @returns {SvgOptions} */ module_color(module_color: string): SvgOptions; /** * Updates the margin of the QRCode. * @param {number} margin * @returns {SvgOptions} */ margin(margin: number): SvgOptions; /** * Updates the background color of the QRCode. Tales a string in the format `#RRGGBB[AA]`. * @param {string} background_color * @returns {SvgOptions} */ background_color(background_color: string): SvgOptions; /** * Updates the image of the QRCode. Takes base64 or a url. * @param {string} image * @returns {SvgOptions} */ image(image: string): SvgOptions; /** * Updates the background color of the image. Takes a string in the format `#RRGGBB[AA]`. * @param {string} image_background_color * @returns {SvgOptions} */ image_background_color(image_background_color: string): SvgOptions; /** * Updates the shape of the image background. Takes an convert::ImageBackgroundShape. * @param {ImageBackgroundShape} image_background_shape * @returns {SvgOptions} */ image_background_shape(image_background_shape: ImageBackgroundShape): SvgOptions; /** * Updates the size of the image. Takes a size and a gap (unit being module size). * @param {number} size * @param {number} gap * @returns {SvgOptions} */ image_size(size: number, gap: number): SvgOptions; /** * Updates the position of the image. Takes an array [x, y] (unit being module size). * @param {Float64Array} image_position * @returns {SvgOptions} */ image_position(image_position: Float64Array): SvgOptions; /** * Updates the error correction level of the QRCode (can increase the size of the QRCode) * @param {ECL} ecl * @returns {SvgOptions} */ ecl(ecl: ECL): SvgOptions; /** * Forces the version of the QRCode * @param {Version} version * @returns {SvgOptions} */ version(version: Version): SvgOptions; /** * Creates a new SvgOptions object. */ constructor(); } export type InitInput = RequestInfo | URL | Response | BufferSource | WebAssembly.Module; export interface InitOutput { readonly memory: WebAssembly.Memory; readonly qr: (a: number, b: number, c: number) => void; readonly __wbg_svgoptions_free: (a: number) => void; readonly svgoptions_shape: (a: number, b: number) => number; readonly svgoptions_module_color: (a: number, b: number, c: number) => number; readonly svgoptions_margin: (a: number, b: number) => number; readonly svgoptions_background_color: (a: number, b: number, c: number) => number; readonly svgoptions_image: (a: number, b: number, c: number) => number; readonly svgoptions_image_background_color: (a: number, b: number, c: number) => number; readonly svgoptions_image_background_shape: (a: number, b: number) => number; readonly svgoptions_image_size: (a: number, b: number, c: number) => number; readonly svgoptions_image_position: (a: number, b: number, c: number) => number; readonly svgoptions_ecl: (a: number, b: number) => number; readonly svgoptions_version: (a: number, b: number) => number; readonly svgoptions_new: () => number; readonly qr_svg: (a: number, b: number, c: number, d: number) => void; readonly __wbindgen_add_to_stack_pointer: (a: number) => number; readonly __wbindgen_malloc: (a: number, b: number) => number; readonly __wbindgen_realloc: (a: number, b: number, c: number, d: number) => number; readonly __wbindgen_free: (a: number, b: number, c: number) => void; } export type SyncInitInput = BufferSource | WebAssembly.Module; /** * Instantiates the given `module`, which can either be bytes or * a precompiled `WebAssembly.Module`. * * @param {SyncInitInput} module * * @returns {InitOutput} */ export function initSync(module: SyncInitInput): InitOutput; /** * If `module_or_path` is {RequestInfo} or {URL}, makes a request and * for everything else, calls `WebAssembly.instantiate` directly. * * @param {InitInput | Promise} module_or_path * * @returns {Promise} */ export default function __wbg_init(module_or_path?: InitInput | Promise): Promise; ```
What's left to do: 1. Add the necessary properties to the `QrCodeProps` interface for our `QrCode` component. 2. Pass the property values to the corresponding methods of the `SvgOptions` object. 3. Describe the added properties in the `qrCode` object using `props`. Below is the code of the component, it adds all of the above. In the code you will also find a color converter from the rgba format, which is passed by the designer property editor, to the hex format used by the component.
src/QrCode.tsx ```typescript jsx title='src/QrCode.tsx' import init, {qr_svg, SvgOptions} from 'fast_qr' import module from 'fast_qr/fast_qr_bg.wasm?url' import {RefObject, useEffect, useRef} from 'react' import {color, define, number, oneOf, string} from '@react-form-builder/core' export interface QrCodeProps { /** * The QR code width. */ width?: number /** * The CSS class name. */ className?: string /** * The QR code content. */ content: string /** * The different possible shapes to represent modules. */ shape?: number /** * The background color. */ backgroundColor?: string /** * The module color. */ moduleColor?: string /** * The margin. */ margin?: number /** * The image, base64 or URL. */ image?: string /** * The image background color. */ imageBackgroundColor?: string /** * The image background shape. */ imageBackgroundShape?: number /** * The image X position in module units. */ imagePositionX?: number /** * The image Y position in module units. */ imagePositionY?: number /** * Image size in module units. */ imageSize?: number /** * Image gap in module units. */ imageGap?: number /** * The error correction coding level. */ errorCorrectionLevel?: number /** * The QR code version. */ version?: number } export const QrCode = (props: QrCodeProps) => { const ref = useRef(null) useEffect(() => { renderQr(props, ref).catch(console.error) }, [props]) return
} const colorPartToHex = (color: number) => { if (color % 1 === 0) return (color | 1 << 8).toString(16).slice(1) return Math.trunc((color * 255) | 1 << 8).toString(16).slice(1) } const rgbaColorToHex = (color?: string) => { if (!color) return undefined const index = color.indexOf(')') if (color.startsWith('rgba(') && index >= 0) { const colors = color.substring(5, index) .split(',') .map(s => s.trim()) .map(s => Number(s)) .map(colorPartToHex) .join('') return `#${colors}` } } async function renderQr(props: QrCodeProps, ref: RefObject) { await init(module) if (!ref.current) return let svgOptions = new SvgOptions() if (props.margin) svgOptions = svgOptions.margin(props.margin) const backgroundColor = rgbaColorToHex(props.backgroundColor) if (backgroundColor) svgOptions = svgOptions.background_color(backgroundColor) const moduleColor = rgbaColorToHex(props.moduleColor) if (moduleColor) svgOptions = svgOptions.module_color(moduleColor) if (props.shape) svgOptions = svgOptions.shape(props.shape) if (props.image) svgOptions = svgOptions.image(props.image) const imageBackgroundColor = rgbaColorToHex(props.imageBackgroundColor) if (imageBackgroundColor) svgOptions = svgOptions.image_background_color(imageBackgroundColor) if (props.imageBackgroundShape) svgOptions = svgOptions.image_background_shape(props.imageBackgroundShape) if (props.imageSize !== undefined && props.imageGap !== undefined) { svgOptions = svgOptions.image_size(props.imageSize, props.imageGap) } if (props.imagePositionX && props.imagePositionY) { const position = new Float64Array([props.imagePositionX, props.imagePositionY]) svgOptions = svgOptions.image_position(position) } if (props.errorCorrectionLevel) svgOptions = svgOptions.ecl(props.errorCorrectionLevel) if (props.version) svgOptions = svgOptions.version(props.version) ref.current.innerHTML = qr_svg(props.content, svgOptions) } const nonNegNumber = number.withEditorProps({min: 0}) export const qrCode = define(QrCode, 'QrCode') .name('QR code') .category('static') .props({ width: nonNegNumber.default(300).hinted('The QR code width'), content: string.default('https://formengine.io').hinted('The QR code content'), moduleColor: color.hinted('The module color'), shape: oneOf(0, 1, 2, 3, 4, 5).default(0) .labeled('Square', 'Circle', 'RoundedSquare', 'Vertical', 'Horizontal', 'Diamond') .withEditorProps({creatable: false}) .hinted('The different possible shapes to represent modules'), errorCorrectionLevel: oneOf(0, 1, 2, 3).default(0) .labeled('Low, 7%', 'Medium, 15%', 'Quartile, 25%', 'High, 30%') .withEditorProps({creatable: false}) .hinted('The error correction coding level'), version: number.withEditorProps({min: 0, max: 39}) .named('QR version') .hinted('The QR code version'), image: string.hinted('The image, base64 or URL'), imageBackgroundColor: color.hinted('The image background color'), imageBackgroundShape: oneOf(0, 1, 2).default(0) .labeled('Square', 'Circle', 'RoundedSquare') .withEditorProps({creatable: false}) .hinted('The image background shape'), }) ```
Now we have a fully functional component that we can play with in the designer: ![WASM component](/assets/guides/wasm-component/wasm-component-07.png) ## Conclusion Connecting a WASM component to a React application is not a difficult task. We will add the QR code component to the FormEngine component collection so that you can easily connect it via the usual npm dependency. --- # Writing values via actions and computed properties URL: https://formengine.io/documentation/guides/writing-values-via-actions.md # Writing values via actions and computed properties In certain scenarios it might be necessary to create values that are dynamic and dependent on user interactions or other values provided by your users. This functionality can be useful for combining input values, validating user input, or updating values based on changes, and so on. By defining actions and computed properties, you can create values that can be updated dynamically. Therefore, you can define a function that can receive a value from one input, process this value, and return in within another component. This allows you to create more complex and interactive forms that adapt to user interactions. The following introduces an example that showcases how to create a dynamic value that combines the values of two input fields by using [computed properties](/computed-properties) and an [action](/actions) that passes a value from one component to another. ## Creating dynamic values The example below consists of a form with two input fields for the __First Name__ and __Last Name__. This form also provides another input field with computed properties that combines first and last name values dynamically. In addition, the form includes a text area that also reflects the value in the first name input using an [action](/actions). ```json { "version": "1", "actions": { "action1": { "body": " e.data.textArea = e.args[0]", "params": {} } }, "form": { "key": "Screen", "type": "Screen", "props": {}, "children": [ { "key": "RsContainer 1", "type": "RsContainer", "props": {}, "children": [ { "key": "firstName", "type": "RsInput", "props": { "label": { "value": "First name" } }, "events": { "onChange": [ { "name": "action1", "type": "code" } ] } }, { "key": "lastName", "type": "RsInput", "props": { "label": { "value": "Last name" } } } ], "css": { "any": { "object": { "flexDirection": "row" } } } }, { "key": "RsInput 1", "type": "RsInput", "props": { "label": { "value": "first_name_and_last_name" }, "value": { "computeType": "function", "fnSource": " return `${form.data.firstName ?? ''} ${form.data.lastName ?? ''}`.trim()" } } }, { "key": "textArea", "type": "RsTextArea", "props": {} } ] }, "localization": {}, "languages": [ { "code": "en", "dialect": "US", "name": "English", "description": "American English", "bidi": "ltr" } ], "defaultLanguage": "en-US" } ``` The action that passes the value from one component to another is called `action1` and it is defined within the `onChange` event. Therefore, when the first name is defined within the corresponding input, its value is passed to the text area component. The action code is simple, the value is set for the component with the `textArea` key: ```javascript {6} title='action1' /** * @param {ActionEventArgs} e - the action arguments. * @param {} args - the action parameters arguments. */ async function Action(e, args) { e.data.textArea = e.args[0] } ``` ![Action](/assets/guides/writing-values-via-actions/writing-values-via-actions-01.png) The input component called `first_name_and_last_name` has the `Value` property defined as a computed property. The value is calculated as a combination of the values from the _first name_ and _last name_ inputs. The combined value is trimmed using a JavaScript method: ```javascript {6} /** * @param {IFormData} form * @return {string} */ function Calculation(form) { return `${form.data.firstName ?? ''} ${form.data.lastName ?? ''}`.trim() } ``` ![Computed property](/assets/guides/writing-values-via-actions/writing-values-via-actions-02.png) By following this example, you can learn how to use actions and computed properties to create your own dynamic values and take advantage of the benefits of interactive and responsive forms. ![Result](/assets/guides/writing-values-via-actions/writing-values-via-actions-03.png) --- # License key URL: https://formengine.io/documentation/license-key.md # License key Contact our [sales department](https://formengine.io/pricing) to obtain a licence key. Once you have the licence key, you need to pass it to the `FormBuilder` component [property](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#licensekey). Examples: ```typescript jsx ``` :::info Important! The licence check will work correctly either on `localhost` or under HTTPS. These are limitations of browser cryptography! ::: --- # Release notes URL: https://formengine.io/documentation/release-notes.md ## 5.0.1 _June_ 26, 2025 In this release, we have reorganized the structure of our [public repository](https://github.com/optimajet/formengine/) and added license files for your convenience. ### New - Added an [article](/user-defined-properties) on how to use [userDefinedProps](/api-reference/@react-form-builder/core/classes/ComponentData#userdefinedprops). ## 5.0.0 _June_ 23, 2025 With this release, we have published the code for the following packages in our [open-source repository](https://github.com/optimajet/formengine): - `@react-form-builder/core` - `@react-form-builder/components-rsuite` - `@react-form-builder/viewer-bundle` ### Breaking changes - The **Signature** component has been moved to a [separate package](https://www.npmjs.com/package/@react-form-builder/components-signature). - Removed `computeChildren` prop from [FormViewerProps](/api-reference/@react-form-builder/core/interfaces/FormViewerProps). - Removed `onDataLoad` prop from `TagPicker` component. - Removed `licenseKey` prop from `FormViewer` component. ### Changed - Migrated examples and demo app to **Vite**. ### New - Added **ARIA attributes** `aria-errormessage`, `aria-invalid`, `aria-labelledby` to all input components. ### Fixed bugs - Fixed **keyboard navigation** in dropdown lists. The virtualized list must be disabled via an option. - Removed unnecessary `stylis-plugin-rtl` dependency from `@react-form-builder/designer` package. ## 4.3.2 _June_ 16, 2025 - Fixed a bug where the **Designer** application crashed trying to access the `process.env`. ### Updated internal dependencies - _brace-expansion_ from 1.1.11 to 1.1.12. ## 4.3.1 _June_ 13, 2025 - Fixed a bug where the **Designer** application crashed trying to access the `process.env`. ## 4.3.0 _June_ 12, 2025 ### New - The [disabled and readOnly](/disabled-and-read-only) properties have been added to the [Screen, Container, and Template](/components-library/structure-components/container#main-properties) components. These properties allow you to make the entire form or part of it disabled or read-only. - A [form validation editor](/validation#form-validator-editor) has been added to the designer. It allows you to set a code that will check the entire form. - Added localizations in **Hindi**, **Serbian**, **Japanese**, and **Korean**. - Now the required validation parameters are displayed above the optional ones. ### Fixed bugs - Fixed a bug where when the user entered a value into a numeric input field and then erased it, the field value turned to `0` instead of being cleared. - Fixed minor style issues in the **Settings** and **Forms** panels. ### Updated internal dependencies - _multer_ from 2.0.0 to 2.0.1. - _tar-fs_ from 2.1.2 to 2.1.3. ## 4.2.0 _June_ 3, 2025 - Now the "required" class name will be applied to components with "required" validation. - In the [RSuite components](/components-library/#fields-components), the required fields are marked with a red asterisk. - Required validation has been added for fields with the `date`, `number`, `boolean`, `array`, and `object` types. - The `label` property has been added to the [Calendar](/components-library/fields-components/calendar), [Google Map](/components-library/fields-components/google-map) and to the [Uploader](/components-library/fields-components/uploader) components. - The `errors` property which allows you to manually set form validation errors has been added to the [FormViewerProps](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#errors), [FormBuilderProps](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#errors) and to the [IFormData](/api-reference/@react-form-builder/core/interfaces/IFormData#errors). - The [loadForm](/api-reference/@react-form-builder/core/classes/Store#loadform) method is marked as deprecated. ## 4.1.0 _May_ 23, 2025 ### New - Added [Conditional validation](/validation#conditional-validation) that is performed only if certain conditions are met. - The form data has been added to the [Code validation](/validation#code-validator) function so that the field can be validated based on other values from the form. - Added a new method [allComponentFields](/api-reference/@react-form-builder/core/classes/ComponentData#allcomponentfields) to `ComponentData` that returns an array of all component fields, including non-unique data keys. ### Fixed bugs - Fixed a bug where the styles of cloned nested elements are applied to the original elements instead of the new ones. - Now, when uploading a form with non-unique keys, the keys are corrected to unique ones so that errors do not occur. ### Updated internal dependencies - _undici_ from 6.21.1 to 6.21.3. ## 4.0.0 _May_ 15, 2025 With this release, the following packages are distributed under the [MIT license](https://opensource.org/license/mit): - `@react-form-builder/core` - `@react-form-builder/components-rsuite` - `@react-form-builder/viewer-bundle` Commercial license keys now use a different format, and the licensing scheme has changed. For details, contact [support@optimajet.com](mailto:support@optimajet.com). **This change does not affect current customers, all existing keys will continue to work as before.** ### Breaking changes - `useBuilderContext` hook has been removed. - [FormViewerProps.language](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#language) is now a `string` representing language full code. ### Changed - Default links in [Menu](/components-library/static-components/menu) now use hash-based navigation. - The parameter `model` has been removed from [createComponentData](/api-reference/@react-form-builder/core/classes/Store#createcomponentdata). ### New - Added [FormJsonBuilder](/api-reference/@react-form-builder/core/functions/buildForm#returns), a code-based tool for form creation. - [useBuilderMode](/api-reference/@react-form-builder/core/functions/useBuilderMode) hook has been introduced. - [Tab](/components-library/structure-components/tab) and [Menu](/components-library/static-components/menu) components now supports `pill` display variant. ### Fixed bugs - Fixed an issue where calculated values inside Repeater children might not display correctly. - Resolved validation errors for min/max date constraints. ### Updated internal dependencies - _rsuite_ from 5.64.2 to 5.80.2 - _vite_ from v4.5.13 to v4.5.14. ## 3.6.0 _May_ 2, 2025 - The `failOnError` parameter has been added for the validation action. If it is enabled, then if validation fails, the actions that go on will not be triggered. - Fixed a bug where events triggered in the `useEffect` of custom components did not fire. - Fixed several grammatical typos in the localization and messages of the application. ## 3.5.0 _April_ 25, 2025 ### New - [Preset components](/presets-components). - License verification errors now log to the console. - The [IFormData.validate()](/api-reference/@react-form-builder/core/interfaces/IFormData#validate) function now returns validation errors. ### Fixed bugs - Fixed broken validation for property values of type `Date`. - Fixed cases where `ComponentData` was not properly disposed. - Fixed cursor icon display over labels in the components palette. ### Updated internal dependencies - vite from v4.5.10 to v4.5.12. ## 3.4.1 _April_ 15, 2025 - Rolled back the changes that caused `initialJson` to work incorrectly in the added components. ## 3.4.0 _April_ 14, 2025 - Now the custom localization is combined with the built-in one if the user wants to expand the existing one. - Added the [globalDefaultLanguage](/api-reference/@react-form-builder/core/variables/globalDefaultLanguage) constant which contains information about the default language. - The internal logic of building and destroying the component tree has also been improved, which improves performance. - Fixed a bug in ActionEventArgs where the parentData parameter could be incorrectly set. ### Updated internal dependencies - vite from v4.5.10 to v4.5.12. ## 3.3.0 _March_ 31, 2025 - Added the [useFormBuilder](/api-reference/@react-form-builder/designer/functions/useFormBuilder) hook to get and manage the Form Builder from [customization](/designer-customization). - Now the insertion order when moving several elements corresponds to their position on the form. Previously, they were inserted in the order in which the user selected them. ## 3.2.0 _March_ 19, 2025 - The ability to enter values for calculated fields has been returned. - For properties that are declared as valued, you can now set an [uncontrolled value](/api-reference/@react-form-builder/core/classes/Annotation#uncontrolledvalue) that will replace undefined. This is necessary to avoid the React error "A component is changing a controlled input to be uncontrolled". - Fixed a bug that caused the reset button in the numeric property editor to not work. - Fixed a potential memory leak in the Repeater component. - Fixed a bug where components were sometimes not displayed in view mode. - Fixed a typo in localization. ## 3.1.0 _February_ 27, 2025 ### New - Designer: added static CSS classes for [customizable components and components palette](/designer-customization). - Added ability to restrict drag-and-drop for [node](/api-reference/@react-form-builder/core/classes/NodeAnnotationBuilder#withinsertrestriction) and `nodeArray`. - Added ability to restrict drag-and-drop for [components](/api-reference/@react-form-builder/core/classes/Definer#insertrestriction). - Added a clear button for the `string` type property editor. ### Changed - The `pullRight` option has been removed from the Menu and Tab components. - The `ComponentState` internal component no longer uses `viewerProps`. - [Tab](/components-library/structure-components/tab) now uses buttons instead of tab anchors. - The _Item as_ option has been added to the select element to render navigation buttons to the [Menu](/components-library/static-components/menu) component. - Tabs in the Designer now use buttons instead of anchors. ### Fixed bugs - In rare cases, a warning of type `Cannot update a component while rendering a different component` may occur. - Fixed `__DOT__` in localized messages in some cases. - Resolved issues with inactive dropzone outlines in some cases. ### Documentation - Updated the [Designer customization](/designer-customization) with new options. - Extended the [description](/components-library/) of components. - Fixed the missing customization [description](/designer-customization#complete-list-of-customizable-component-keys) for `FormContainer` block. ### Updated internal dependencies - monaco-editor from v0.43.0 to v0.52.2. - @monaco-editor/react from v4.6.0 to v4.7.0. ## 3.0.2 _January_ 26, 2025 ### Fixed bugs - The @rsuite/icons package is set to version 1.0.3. ## 3.0.1 _January_ 26, 2025 ### Fixed bugs - Fixed incorrect import of `@rsuite/icons/esm/icons/status/RemindFill.js`. - vite rolled back to version 4.5.9. - undici update from 6.21.0 to 6.21.1 in '/examples/with-remix/with-remix-v2'. ## 3.0.0 _January_ 24, 2025 ### Breaking changes - Added React 19 support. - Model.icon property moved to [Meta](/api-reference/@react-form-builder/core/classes/Meta). - The initial value and value properties of the [Rich text editor](/components-library/fields-components/rich-text-editor) are now of type string. - @emotion/cache updated to 11.14.0. - @emotion/css updated to 11.13.5. - @emotion/react updated to 11.14.0. - mobx updated updated to 6.13.5. - mobx-react updated to 9.2.0. ### New - Components can be deleted by pressing Delete button. - Added [upload server](https://github.com/optimajet/formengine/tree/master/community/examples/file-upload-server/README.md) example. ### Fixed bugs - A phantom selection remains after a drag and drop operation. - Some minor bugs related to adding components by double-clicking. - Fixed the bug of being able to select multiple files without setting the Multiple option in the [Uploader](/components-library/fields-components/uploader) component. - A component cannot be added after undo by double-clicking it. - The text of the ‘Add New Item’ button was not visible in dark mode. - Broken form label markup when the form is empty. ### Updated internal dependencies - vite from 4.2.1 to 6.0.7. ## 2.4.0 _January_ 16, 2025 - Components can now be added by double-clicking in Designer. - Updated internal dependencies: - braces from 3.0.2 to 3.0.3. - nanoid from 3.3.6 to 3.3.8. ### Fixed bugs - Incorrect display of custom validation in Designer. - Display an empty error object for the repeater if all fields are valid. ## 2.3.0 _December_ 16, 2024 - Added a search field on the Forms tab. - Added the ability to use hooks and functions inside [custom property editors](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#propertyeditors) to access component and engine data. These are, for example, [useComponentData](/api-reference/@react-form-builder/core/functions/useComponentData), [useStore](/api-reference/@react-form-builder/core/functions/useStore), and [others](/api-reference/@react-form-builder/core/#functions). - The [formLoadError](/api-reference/@react-form-builder/core/classes/Store#formloaderror) field has been added to the FormViewer API that signals the failure of loading the form, and also contains the error text. - Now, if the form is loaded unsuccessfully, a message about this is displayed in the form designer, as well as a suggestion to create a new form. ### Fixed bugs - When changing the value of [actions](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#actions) in FormViewer props after initialization, their value inside the engine did not change. - Saving the form is called twice when creating a new form, as well as in some other cases. ## 2.2.0 _November_ 25, 2024 - Added [actions](/using-repeater#repeater-actions) for managing rows in the Repeater component. - Added the ability to [work with objects](/localization#localization-editing) in localization. - Added guide for [usage with Remix](/usage-with-remix). - Now, if there are several validation errors in one field, then by default, only the first one is displayed for better readability. - The [showAllValidationErrors](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#showallvalidationerrors) option has been added to `FormViewerProps` to display all validation errors on the field, not just the first one. ### Fixed bugs - The list of templates did not load completely when the page was first opened. - A non-empty value is set by default for numeric and boolean action arguments. ## 2.1.0 _November_ 8, 2024 - Added the Map component and its [usage guide](/enabling-google-maps-autocomplete). - Added a [sample application](/usage-with-nextjs) for Next.js. - Added the option to select type attribute for RsInput component. ### Fixed bugs - Fixed console errors that occur when a variable inside localization is not defined. - Fixed the calculated value for HTML attributes. - Fixed the display of simple values as calculated after rolling back from a calculated state. ## 2.0.0 _October_ 29, 2024 **This release changes parts of the public and internal API.** - Added the [Repeater](/components-library/structure-components/repeater) component that is responsible for displaying an array of repeating components. - Added the [Using Repeater](/using-repeater) guide. ## 1.14.1 _October_ 28, 2024 - The changes `Fixed a bug that prevented events set in the useEffect of user components from being triggered` from the previous release were canceled because it broke other functionality. A non-breaking fix will be released soon. For now, we recommend using React 18 to avoid encountering this bug. ## 1.14.0 _October_ 25, 2024 - Added the [Wizard](/components-library/structure-components/wizard) component for creating step-by-step forms with the ability to transition between steps. - Containers now display their keys when dragging components to make it easier to navigate. - Fixed a bug that prevented events set in the useEffect of user components from being triggered. - Fixed a bug where dragging inside Tabs, Message and Card components didn't work. ## 1.13.0 _October_ 15, 2024 - The `readOnly` property that allows the user to view the form in read only mode has been added to the [FormViewerProps](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#readonly) and to the [FormBuilderProps](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#readonly). - For all valued components, a `readOnly` property has been added. - Fixed and improved Drag and drop behavior for components. - The [ActionDefinition](/api-reference/@react-form-builder/core/classes/ActionDefinition) and [Language](/api-reference/@react-form-builder/core/classes/Language) classes were exported from [designer-bundle and viewer-bundle](/installation#cdn). - The dependency on the `@emotion/styled` package has been removed from the core package. - Added documentation for the [Rich text editor](/components-library/fields-components/rich-text-editor) and [TimePicker](/components-library/fields-components/time-picker) components. ## 1.12.0 _September_ 24, 2024 - Now the [component id](/api-reference/@react-form-builder/core/classes/ComponentData#id) is used instead of the [component key](/api-reference/@react-form-builder/core/classes/ComponentStore#key) when processing and filtering events. - Now the function [onFormDataChange](/api-reference/@react-form-builder/core/interfaces/FormViewerProps#onformdatachange) will not be called inside the templates. This call should only be made by the parent form. - Several minor bugs affecting performance have also been fixed. ## 1.11.0 _September_ 13, 2024 - Added the `Time picker` component. - Added the [time](/api-reference/@react-form-builder/core/variables/time) annotation builder and property editor for editing properties with the `time` type. - Added the `Rich text editor` component. - Added the [object](/api-reference/@react-form-builder/core/variables/object) annotation builder and property editor for editing properties with the `object` type. - Added the [BuilderContextProvider](/api-reference/@react-form-builder/core/functions/BuilderModeProvider) and [useBuilderContext](/api-reference/@react-form-builder/core/functions/useBuilderMode) hook to use the Designer's state in custom components. - Fixed a bug where the `One tap` property in the `Date picker` component had the `event` type instead of `boolean`. - Fixed a bug where the application crashed if the date was entered from the keyboard into the `Date picker` component. - Fixed the height of the property editors. - The `this` property is now bound in implementations of the `Field` interface. ### Documentation - Added the [Formik integration](/formik-integration) guide. - The documentation on the [Actions](/actions) has been significantly updated. ## 1.10.0 _August_ 19, 2024 - Added a FormBuilder prop to [control the designer's theme](/theme-manipulation). - Added an [hideEditor()](/api-reference/@react-form-builder/core/classes/AnnotationBuilder#hideeditor) option that allows hide the component property editor when creating annotations (defining component properties). ### Fixed bugs - After unchecking the `Auto validate` checkbox, the checkbox stops working and the list of previously created validators is deleted. - When clicking on the `Delete` button without selecting a component, the currently selected component will lose its selection ## 1.9.0 _August_ 6, 2024 - Added the `preload` property to the `Dropdown` and `Search` components. It enables preloading data before opening the drop-down list (on component mount). - The [onFormSchemaChange](/getting-form-json#using-onformschemachange-callback) callback has been added to the `FormBuilder` props. It is called whenever a form schema changes. - Now the component keys are generated as valid `JavaScript` identifiers - in camelCase and without spaces. - Now the active tabs in the left and right panels of the `Designer` are saved after the page is reloaded, as well as when switching between components. ## 1.8.0 _July_ 31, 2024 - Now the entered value in the component key editor is also applied by pressing Enter. ### Fixed bugs - The `IFormBuilder` ref does not work. - A string date value passed via `initialData` to the `DatePicker` component causes an error. - If the name of an existing form is used to create a new form, the existing form will be overwritten. ## 1.7.0 _July_ 24, 2024 - Added validation for the format property in the `DatePicker` component. - Fixed a bug that prevented the string property editor from turning into a text area when inserting large text. - Fixed a bug in the "Key" property editor, due to which the key verification message was not updated when duplicating a component with the same key value. - Added support for Esc and Enter hotkeys in the prompt dialog. - After creating a new form, the old one is automatically saved and the designer switches to the new form. - Made the `props` attribute optional when parsing JSON for components. - The API reference documentation has been updated. - Added a new component `TagPicker`. ## 1.6.0 _July_ 16, 2024 - Added the `QR Code` component for generating and displaying QR codes. - Added a [guide](/adding-wasm-component) to connecting the WASM component. - Now information about files is displayed, instead of an empty object in the Data view (located to the left of the form preview). - Added the `Read-only` option to the `Signature` component. - Fixed a bug where localization was not applied in the `Calendar` component. - Removed the default value `0` for the `timeout` property of the `Uploader` component (the `0` value, like `undefined`, is no timeout). ## 1.5.2 _July_ 5, 2024 ### Fixed bugs - Clearing the RSuite components with default value not triggering touched flag. - Clearing the date property is not working correctly. - The DatePicker crashes when the format is incorrect. - The defaultValue does not work in DatePicker. - The NumberFormat crashes with a negative decimal scale. - The value of the Number property changes to NaN when backspace is pressed on a negative value. ## 1.5.1 _July_ 3, 2024 - Fixed incorrectly set default values for DatePicker and Uploader components (the bug was introduced in the 1.5.0 release). - Fixed `closable` property for Message component. ## 1.5.0 _July_ 2, 2024 - Added Toggle component. - Added guide for [integration with Electron](/documentation/integration-with-electron). - An error handler has been added to the `FormBuilder` component to prevent the application from crashing if a faulty component is used. - Added default values to all boolean properties of components - Fixed a bug that caused hook `useUniqueId` to break the build. - Other minor style fixes. ## 1.4.0 _June_ 21, 2024 - Updated documentation on using `ref` with `FormBuilder` and `FormViewer` components. - Added ability to pass custom component [errorWrapper](/api-reference/@react-form-builder/core/classes/FormViewerPropsStore#errorwrapper). - The React Suite library has been updated to version 5.64.2. - Fixed bug where only the first action handler was executed on the `onWillUnmount` event. - Fixed keyboard navigation in Dropdown component. - The `key` property is now passed separately from other component properties, previous behavior caused a warning in React 18.3.1. - Added ability to define validators using code for all value types. - Updated internal dependencies: - braces from 3.0.2 to 3.0.3. - ws from 7.5.9 to 7.5.10. ## 1.3.1 _June_ 14, 2024 - Fixed a bug that caused calculated properties to not work. ## 1.3.0 _June_ 13, 2024 - Added the `RsSignature` component for drawing signatures. - The text of the form data and errors in the left panel on the designer preview is now scrollable. - Fixed minor style breakdowns in the designer scrollbars. ## 1.2.0 _June_ 5, 2024 - Added the `RsLink` component to be used as a hyperlink. - Improved error logging when launching custom functions: - The error text now includes the source code of the function. - Removed unnecessary logging to the console during testing in the editor. - Added documentation for [storing user-defined data](/storing-user-defined-data). - Styles have been added to the [bundle](/installation#cdn) for the viewer. ### Fixed bugs - Fixed minor style breakdowns in the Mozilla Firefox browser. - The last selected form is not loaded when the designer is opened. - The `onWillUnmount` event does not work. - Changes to the `Placement` property in `Error settings` are not applied to the form in real time. ## 1.1.0 _May_ 3, 2024 - React Suite updated to version 5.59.1. ## 1.0.9 _April_ 17, 2024 - The "Edit JSON" button in the designer has been moved to the layout switches. - Changed appearance of the language switch - the language code is shown instead of the language name. - Updated documentation on computed properties. - Fixed a typo in the custom component documentation. ## 1.0.8 _April_ 11, 2024 - Added localization for Farsi language in Designer. - Added documentation on how to use FormEngine via [CDN](/installation#cdn). ## 1.0.7 _March_ 14, 2024 - Fixed the bug when the focus in the property editor was reset when entering each character. ## 1.0.6 _March_ 8, 2024 - Added the FormBuilder UI [customization](/api-reference/@react-form-builder/designer/interfaces/FormBuilderProps#customization) feature. - Add `IFormBuilder.parseForm(formString)` method that sets the form serialized in JSON as the current form. - Fixed the bug when FormBuilder UI breaks with `create-react-app`. ## 1.0.5 _February_ 16, 2024 - Added the FormBuilder ref to provide access to BuilderStore. It can also be used to [get a form's JSON](/forms-json#get-the-forms-json-in-react-component). - Fixed a bug in the Dropdown component that caused the original elements to be lost after adding a new element. ## 1.0.4 _January_ 26, 2024 - Added FormEngine embedding library to [unpkg.com](https://www.unpkg.com/) CDN. - The label property has been added to the `RsDatePicker` component. - Fixed bugs: - The form handles null values incorrectly. - Some children disappear in slot dropzone. - The input text in `RsDropdown` component is not visible. - Dropdowns marked as required do not show invalid state after clear. ## 1.0.3 _December_ 22, 2023 - Fixed dark theme styles. - Fixed incorrect behavior of `renderWhen` property. ## 1.0.2 _December_ 21, 2023 - Added `IFormData.getValidationResult()` method that returns validation results without changing the form state. - Added the user defined observable state - `IFormData.state`. - Added the `initialValue` to `RsUploader` component. - Fixed bugs: - `RsDropdown` component is not reset. - Elements flipping positions after saving. - Lost styles in `FormViewer`. - An empty string in the `renderWhen` property works as `false`. - Anonymous component error in bundle. ## 1.0.1 _November_ 28, 2023 - The RSuite styles has been isolated so that they do not affect the elements outside the designer and viewer. - Fixed the bug with infinite loading in rsPicker. - Updated axios from 1.3.4 to 1.6.1. - Other fixes and updates. ## 1.0.0 _November_ 10, 2023 - Fixed `z-index` for the component search field in the designer. ## 0.0.14 _November_ 9, 2023 - Styling of components has changed. We will write more about it in the documentation. - Some bugs have been fixed. - Small improvements to the user interface have been made. ## 0.0.13 _October_ 31, 2023 - The custom validator has been renamed to code validator. - External actions have been renamed to custom actions. - Improvements to the user interface in the validation settings section. - Added version to JSON file format. - Other fixes and updates to vulnerable NPM packages. --- # Roadmap URL: https://formengine.io/documentation/roadmap.md # Roadmap On this page you can see what tasks are planned to improve FormEngine. As well as tasks that may be done, but are not yet planned. The FormEngine team constantly makes sure that NPM packages are updated and do not contain vulnerable dependencies. The team tries to update vulnerable packages as quickly as possible if patches are available for those packages. :::info feature request If you want to add a feature to our roadmap - please open an issue in our [GitHub repository](https://github.com/optimajet/formengine/issues). ::: | Task | Status | |---------------------------------------------------------------------|-------------| | Integration with Camunda | Done | | Hand-drawn signature component | Done | | QR-code component | Done | | Wizard component | Done | | Component working with data arrays (repeater) | Done | | Support for properties of type "object" | In progress | | Table component | Planned | | Integrations with other popular component libraries (MUI, Tailwind) | Planned | | React 19 support | Done | | Camera component | Analysis | | Support Server-Side Rendering | Analysis | | Export form to PDF | Analysis | | Support React Native | Analysis | | Role-based access | Analysis | --- # Support URL: https://formengine.io/documentation/support.md # Support ## Bugs Found a bug? You can submit an issue to the [public GitHub repository](https://github.com/optimajet/formengine/issues). Or you can email to [support@optimajet.com](mailto:support@optimajet.com). ## Discussion, questions, feature requests If you need help, want to ask something, or have an idea - you can use [GitHub Discussions](https://github.com/optimajet/formengine/discussions) for that. ## Commercial support Please contact us at [support@optimajet.com](mailto:support@optimajet.com). --- # Usage with Next.js URL: https://formengine.io/documentation/usage-with-nextjs.md # Usage with Next.js The FormEngine is fully compatible with the latest versions of the [Next.js](https://nextjs.org/). :::tip A fully functional example is available in our [GitHub repository](https://github.com/optimajet/formengine), located in the [examples](https://github.com/optimajet/formengine/tree/master/premium/examples/with-nextjs/) folder. We encourage you to explore the code and see how the various components work together. If you have any questions or need further assistance, feel free to reach out! ::: :::caution Please note that Next.js version 12 incorrectly minifies JavaScript code containing the `??` operator. To ensure the FormEngine library functions correctly, either disable [swcMinify](https://nextjs.org/docs/architecture/nextjs-compiler#minification) in your `next.config.js` file or update to the latest version of Next.js. ::: Currently, FormEngine does not support Server-Side Rendering (SSR). To disable SSR at the component level, include the `use client` directive at the top of the component that utilizes FormEngine components. Additionally, wrap the components in a `dynamic` import with SSR disabled. Here’s an example of how to implement this: ```tsx 'use client' // ... import dynamic from 'next/dynamic' const FormViewer = dynamic(() => import('@react-form-builder/core').then((mod) => mod.FormViewer), { ssr: false }) // ... const Viewer = () => { // ... return ( ) } ``` --- # Usage with Remix URL: https://formengine.io/documentation/usage-with-remix.md # Usage with Remix The FormEngine is fully compatible with the latest versions of the [Remix](https://remix.run/). :::tip A fully functional example is available in our [GitHub repository](https://github.com/optimajet/formengine), specifically located in the [examples](https://github.com/optimajet/formengine/tree/master/premium/examples/with-remix/with-remix-v2). We encourage you to explore the code to see how the various components interact and work together seamlessly. If you have any questions or require further assistance, please don't hesitate to reach out! ::: ## Code changes Highlighted lines indicate the ones that need attention. ```js // &att var x = 42; // highlighted line of code // &chg var x = 42; // modified line of code // &new var x = 42; // added new line of code // &del var x = 42; // deleted line of code ``` ## The setup Currently, FormEngine does not support Server-Side Rendering (SSR). To disable SSR at the component level, place FormEngine-related components in a `.client.tsx` file. Additionally, implement some form of dynamic loading. For example, you can use the following pattern: ```tsx title='viewer._index.tsx' import {lazy, useEffect, useState} from 'react' const ViewerClient = lazy(() => import('~/components/viewer.client.js')); export default function Viewer_index() { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); return mounted ? : null; } ``` ## Troubleshooting The default Remix setup does not support heterogeneous modules (ESM/CJS). If you need support for heterogeneous modules, try adding a bootloader shim: ```json5 title='package.json' { //... "scripts": { "build": "remix vite:build", // &del> "dev": "remix vite:dev", // <&del // &new> "dev": "NODE_OPTIONS=--import=specifier-resolution-node/register remix vite:dev", // <&new //... "devDependencies": { //... // &new> "specifier-resolution-node": "^1.1.4", // <&new "tailwindcss": "^3.4.4", "typescript": "^5.1.6", "vite": "^5.1.0", "vite-tsconfig-paths": "^4.2.1" } } } ```