Hotfix: dom props

packages/react-forms-dom/src/abstractions/base-form-button.tsx

@@ -4,13 +4,15 @@ import { Iterable } from "immutable";
 
 import { BaseContainer, BaseContainerProps } from "@simplr/react-forms";
 
-export interface BaseFormButtonProps extends BaseContainerProps, React.HTMLProps<HTMLButtonElement> {
+export interface BaseFormButtonProps extends BaseContainerProps {
     disableOnError?: boolean;
     disableOnBusy?: boolean;
     disableOnPristine?: boolean;
     busy?: boolean;
     disabled?: boolean;
     busyClassName?: string;
+    style?: React.CSSProperties;
+    className?: string;
 }
 
 export interface BaseFormButtonState {
@@ -117,5 +119,19 @@ export abstract class BaseFormButton<TProps extends BaseFormButtonProps, TState
         return className.length > 0 ? className : undefined;
     }
 
+    protected GetHTMLProps(props: BaseFormButtonProps): {} {
+        const {
+            disableOnError,
+            disableOnBusy,
+            disableOnPristine,
+            busy,
+            busyClassName,
+            formId,
+            ...restProps
+        } = props;
+
+        return restProps;
+    }
+
     public abstract render(): JSX.Element | null;
 }

packages/react-forms-dom/src/components/clear.tsx

@@ -5,9 +5,12 @@ import {
     BaseFormButtonProps,
     BaseFormButtonStateRecord
 } from "../abstractions/base-form-button";
+import { HTMLElementProps } from "../contracts/field";
 
-export interface ClearProps extends BaseFormButtonProps {
+export interface ClearProps extends BaseFormButtonProps, HTMLElementProps<HTMLButtonElement> {
     fieldIds?: string[];
+
+    ref?: React.Ref<Clear>;
 }
 
 export class Clear extends BaseFormButton<ClearProps, BaseFormButtonStateRecord> {
@@ -20,14 +23,24 @@ export class Clear extends BaseFormButton<ClearProps, BaseFormButtonStateRecord>
         }
     }
 
+    protected GetHTMLProps(props: ClearProps): {} {
+        const filteredProps = super.GetHTMLProps(props) as ClearProps;
+        const {
+            fieldIds,
+            ...restProps
+        } = filteredProps;
+
+        return restProps;
+    }
+
     public render(): JSX.Element {
-        // TODO: Pass all other props.
         return <button
             type="button"
             className={this.ClassName}
             style={this.InlineStyles}
             disabled={this.Disabled}
             onClick={this.OnButtonClick}
+            {...this.GetHTMLProps(this.props) }
         >
             {this.props.children}
         </button>;

packages/react-forms-dom/src/components/fields-array.tsx

@@ -4,8 +4,13 @@ import {
     FieldsArrayState as CoreState
 } from "@simplr/react-forms/contracts";
 import { BaseFieldsArray } from "@simplr/react-forms";
+import { HTMLElementProps } from "../contracts/field";
 
-export type FieldsArrayProps = CoreProps;
+export interface FieldsArrayProps extends CoreProps, HTMLElementProps<HTMLDivElement> {
+    name: string;
+
+    ref?: React.Ref<FieldsArray>;
+}
 
 export type FieldsArrayState = CoreState;
 

packages/react-forms-dom/src/components/fields-group.tsx

@@ -4,8 +4,13 @@ import {
     FieldsGroupState as CoreState
 } from "@simplr/react-forms/contracts";
 import { BaseFieldsGroup } from "@simplr/react-forms";
+import { HTMLElementProps } from "../contracts/field";
 
-export type FieldsGroupProps = CoreProps;
+export interface FieldsGroupProps extends CoreProps, HTMLElementProps<HTMLDivElement> {
+    name: string;
+
+    ref?: React.Ref<FieldsGroup>;
+}
 
 export type FieldsGroupState = CoreState;
 

packages/react-forms-dom/src/components/reset.tsx

@@ -5,9 +5,12 @@ import {
     BaseFormButtonProps,
     BaseFormButtonStateRecord
 } from "../abstractions/base-form-button";
+import { HTMLElementProps } from "../contracts/field";
 
-export interface ResetProps extends BaseFormButtonProps {
+export interface ResetProps extends BaseFormButtonProps, HTMLElementProps<HTMLButtonElement> {
     fieldIds?: string[];
+
+    ref?: React.Ref<Reset>;
 }
 
 export class Reset extends BaseFormButton<ResetProps, BaseFormButtonStateRecord> {
@@ -20,14 +23,24 @@ export class Reset extends BaseFormButton<ResetProps, BaseFormButtonStateRecord>
         }
     }
 
+    protected GetHTMLProps(props: ResetProps): {} {
+        const filteredProps = super.GetHTMLProps(props) as ResetProps;
+        const {
+            fieldIds,
+            ...restProps
+        } = filteredProps;
+
+        return restProps;
+    }
+
     public render(): JSX.Element {
-        // TODO: Pass all other props.
         return <button
             type="button"
             className={this.ClassName}
             style={this.InlineStyles}
             disabled={this.Disabled}
             onClick={this.OnButtonClick}
+            {...this.GetHTMLProps(this.props) }
         >
             {this.props.children}
         </button>;