@progress/kendo-react-inputs 5.6.0-dev.202208251227 → 5.7.0-sig.202208281415

package/docs/examples/textarea/counter/class/main.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { TextArea, TextAreaChangeEvent } from '@progress/kendo-react-inputs';
+
+interface AppState {
+  value: string
+}
+
+class App extends React.Component {
+  state: AppState = {
+    value: ''
+  }
+  max: number = 20;
+
+  render() {
+    return (
+      <div style={{ position: 'absolute' }}>
+        <TextArea
+          maxLength={this.max}
+          value={this.state.value}
+          onChange={this.handleChange}
+          rows={4}
+            />
+        <span className="k-form-hint k-text-end">{this.state.value.length} / {this.max}</span>
+      </div>
+    );
+  }
+
+  handleChange = (e: TextAreaChangeEvent) => {
+    this.setState({ value: e.value });
+  }
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/textarea/counter/func/main.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { Hint } from '@progress/kendo-react-labels';
+import { TextArea, TextAreaChangeEvent } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    const [value, setValue] = React.useState('');
+    const max = 20;
+
+    const handleChange = (e: TextAreaChangeEvent) => {
+        setValue(e.value);
+    }
+
+    return (
+      <div style={{ position: 'absolute' }}>
+        <TextArea
+          maxLength={max}
+          value={value}
+          onChange={handleChange}
+          rows={4}
+            />
+        <Hint direction={'end'}>{value.length} / {max}</Hint>
+      </div>
+    );
+}
+
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/textarea/default-state/func/main.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { TextArea } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <TextArea
+        defaultValue={'Textarea default value'}
+        rows={4}
+      />
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/textarea/disabled/func/main.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { TextArea } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <TextArea
+        disabled={true}
+        placeholder={'Disabled textarea'}
+        rows={4}
+      />
+    );
+}
+
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/textarea/forms/kendo-react-form/class/main.tsx

@@ -0,0 +1,152 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {
+  Form,
+  Field,
+  FormElement,
+  FieldWrapper
+} from "@progress/kendo-react-form";
+import { Label, Hint, Error } from "@progress/kendo-react-labels";
+import { Input, TextArea } from "@progress/kendo-react-inputs";
+import { Button } from "@progress/kendo-react-buttons";
+
+const firstNameValidator = value =>
+  !value
+    ? "First Name is required"
+    : value.length < 7
+    ? "First Name should be at least 7 characters long."
+    : "";
+
+const lastNameValidator = value =>
+  !value
+    ? "Last Name is required"
+    : value.length < 7
+    ? "Last Name should be at least 7 characters long."
+    : "";
+
+const textAreaValidator = value => (!value ? "Address is required" : "");
+
+class FormInput extends React.Component {
+  render() {
+    const showValidationMessage: boolean = this.props.touched && this.props.validationMessage;
+    const showHint: boolean = !showValidationMessage && this.props.hint;
+    const hindId: string = showHint ? `${this.props.id}_hint` : "";
+    const errorId: string = showValidationMessage ? `${this.props.id}_error` : "";
+
+    return (
+      <FieldWrapper>
+        <Label
+          editorId={this.props.id}
+          editorValid={this.props.valid}
+          editorDisabled={this.props.disabled}
+          optional={this.props.optional}
+        >
+          {this.props.label}
+        </Label>
+        <div className={"k-form-field-wrap"}>
+          <Input
+            valid={this.props.valid}
+            type={this.props.type}
+            id={this.props.id}
+            disabled={this.props.disabled}
+            ariaDescribedBy={`${hindId} ${errorId}`}
+            {...this.props}
+          />
+          {showHint && <Hint id={hindId}>{hint}</Hint>}
+          {showValidationMessage && (
+            <Error id={errorId}>{this.props.validationMessage}</Error>
+          )}
+        </div>
+      </FieldWrapper>
+    );
+  }
+}
+
+class FormTextArea extends React.Component {
+  render() {
+    const showValidationMessage: boolean = this.props.touched && this.props.validationMessage;
+    const showHint: boolean = !showValidationMessage && this.props.hint;
+    const hindId: string = showHint ? `${this.props.id}_hint` : "";
+    const errorId: string = showValidationMessage ? `${this.props.id}_error` : "";
+
+    return (
+      <FieldWrapper>
+        <Label
+          editorId={this.props.id}
+          editorValid={this.props.valid}
+          editorDisabled={this.props.disabled}
+          optional={this.props.optional}
+        >
+          {this.props.label}
+        </Label>
+        <div className={"k-form-field-wrap"}>
+          <TextArea
+            valid={this.props.valid}
+            type={this.props.type}
+            id={this.props.id}
+            disabled={this.props.disabled}
+            rows={4}
+            ariaDescribedBy={`${hindId} ${errorId}`}
+            {...this.props}
+          />
+          {showHint && <Hint id={hindId}>{this.props.hint}</Hint>}
+          {showValidationMessage && (
+            <Error id={errorId}>{this.props.validationMessage}</Error>
+          )}
+        </div>
+      </FieldWrapper>
+    );
+  }
+}
+
+class App extends React.Component {
+  render() {
+    return (
+      <Form
+        onSubmit={this.handleSubmit}
+        render={formRenderProps => (
+          <FormElement style={{ width: 290, margin: "0 auto" }}>
+            <fieldset className={"k-form-fieldset"}>
+              <legend className={"k-form-legend"}>User Details</legend>
+              <Field
+                id={"firstName"}
+                name={"firstName"}
+                label={"First Name"}
+                component={FormInput}
+                validator={firstNameValidator}
+              />
+              <Field
+                id={"lastName"}
+                name={"lastName"}
+                label={"Last Name"}
+                component={FormInput}
+                validator={lastNameValidator}
+              />
+              <Field
+                id={"address"}
+                name={"address"}
+                label={"Address"}
+                hint={"Hint: Enter your personal address"}
+                component={FormTextArea}
+                validator={textAreaValidator}
+              />
+              <div className="k-form-buttons">
+                <Button
+                  themeColor={'primary'}
+                  type={"submit"}
+                  disabled={!formRenderProps.allowSubmit}
+                >
+                  Submit
+                </Button>
+                <Button onClick={formRenderProps.onFormReset}>Clear</Button>
+              </div>
+            </fieldset>
+          </FormElement>
+        )}
+      />
+    );
+  }
+  handleSubmit = dataItem => alert(JSON.stringify(dataItem, null, 2));
+}
+
+ReactDOM.render(<App />, document.querySelector("my-app"));

package/docs/examples/textarea/forms/kendo-react-form/func/main.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Form, Field, FormElement, FieldWrapper } from '@progress/kendo-react-form';
+import { Label, Hint, Error } from '@progress/kendo-react-labels';
+import { Input, TextArea } from '@progress/kendo-react-inputs';
+import { Button } from '@progress/kendo-react-buttons';
+
+const firstNameValidator = (value) => !value ?
+    "First Name is required" :
+    value.length < 7 ? "First Name should be at least 7 characters long." : "";
+
+const lastNameValidator = (value) => !value ?
+    "Last Name is required" :
+    value.length < 7 ? "Last Name should be at least 7 characters long." : "";
+
+const textAreaValidator = (value) => !value ?
+    "Address is required" : "";
+
+const FormInput = (fieldRenderProps) => {
+    const { validationMessage, touched, label, id, valid, disabled, hint, type, optional, ...others } = fieldRenderProps;
+
+    const showValidationMessage = touched && validationMessage;
+    const showHint = !showValidationMessage && hint;
+    const hindId = showHint ? `${id}_hint` : '';
+    const errorId = showValidationMessage ? `${id}_error` : '';
+
+    return (
+      <FieldWrapper>
+        <Label editorId={id} editorValid={valid} editorDisabled={disabled} optional={optional}>{label}</Label>
+        <div className={'k-form-field-wrap'}>
+          <Input
+            valid={valid}
+            type={type}
+            id={id}
+            disabled={disabled}
+            ariaDescribedBy={`${hindId} ${errorId}`}
+            {...others}
+          />
+          {
+            showHint &&
+            <Hint id={hindId}>{hint}</Hint>
+          }
+          {
+            showValidationMessage &&
+            <Error id={errorId}>{validationMessage}</Error>
+          }
+        </div>
+      </FieldWrapper>
+    );
+};
+
+const FormTextArea = (fieldRenderProps) => {
+    const { validationMessage, touched, label, id, valid, disabled, hint, type, optional, ...others } = fieldRenderProps;
+
+    const showValidationMessage = touched && validationMessage;
+    const showHint = !showValidationMessage && hint;
+    const hindId = showHint ? `${id}_hint` : '';
+    const errorId = showValidationMessage ? `${id}_error` : '';
+
+    return (
+      <FieldWrapper>
+        <Label editorId={id} editorValid={valid} editorDisabled={disabled} optional={optional}>{label}</Label>
+        <div className={'k-form-field-wrap'}>
+          <TextArea
+            valid={valid}
+            type={type}
+            id={id}
+            disabled={disabled}
+            rows={4}
+            ariaDescribedBy={`${hindId} ${errorId}`}
+            {...others}
+          />
+          {
+            showHint &&
+            <Hint id={hindId}>{hint}</Hint>
+          }
+          {
+            showValidationMessage &&
+            <Error id={errorId}>{validationMessage}</Error>
+          }
+        </div>
+      </FieldWrapper>
+    );
+};
+
+const App = () => {
+    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
+    return (
+      <Form
+        onSubmit={handleSubmit}
+        render={(formRenderProps) => (
+          <FormElement style={{ width: 290, margin: '0 auto' }}>
+            <fieldset className={'k-form-fieldset'}>
+              <legend className={'k-form-legend'}>User Details</legend>
+              <Field
+                id={'firstName'}
+                name={'firstName'}
+                label={'First Name'}
+                component={FormInput}
+                validator={firstNameValidator}
+                        />
+              <Field
+                id={'lastName'}
+                name={'lastName'}
+                label={'Last Name'}
+                component={FormInput}
+                validator={lastNameValidator}
+                        />
+              <Field
+                id={'address'}
+                name={'address'}
+                label={'Address'}
+                hint={'Hint: Enter your personal address'}
+                component={FormTextArea}
+                validator={textAreaValidator}
+                        />
+              <div className="k-form-buttons">
+                <Button
+                  themeColor={'primary'}
+                  type={'submit'}
+                  disabled={!formRenderProps.allowSubmit}
+                            >
+                  Submit
+                </Button>
+                <Button onClick={formRenderProps.onFormReset}>
+                  Clear
+                </Button>
+              </div>
+            </fieldset>
+          </FormElement>
+            )}
+        />
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);
+

package/docs/examples/textarea/main/func/main.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { TextArea } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <TextArea rows={4} />
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/textarea/overview/class/main.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import {
+  Form,
+  Field,
+  FormElement,
+  FieldWrapper
+} from "@progress/kendo-react-form";
+import { Label, Hint, Error } from "@progress/kendo-react-labels";
+import { TextArea } from "@progress/kendo-react-inputs";
+import { Button } from "@progress/kendo-react-buttons";
+
+const textAreaValidator = value => (!value ? "Please enter a text." : "");
+
+class FormTextArea extends React.Component {
+  render() {
+    const showValidationMessage: boolean = this.props.touched && this.props.validationMessage;
+    const showHint: boolean = !showValidationMessage && this.props.hint;
+    const hindId: string = showHint ? `${this.props.id}_hint` : "";
+    const errorId: string = showValidationMessage ? `${this.props.id}_error` : "";
+
+    return (
+      <FieldWrapper>
+        <Label
+          editorId={this.props.id}
+          editorValid={this.props.valid}
+          editorDisabled={this.props.disabled}
+          optional={this.props.optional}
+        >
+          {this.props.label}
+        </Label>
+        <div className={"k-form-field-wrap"}>
+          <TextArea
+            valid={this.props.valid}
+            type={this.props.type}
+            id={this.props.id}
+            disabled={this.props.disabled}
+            maxlength={this.props.max}
+            rows={4}
+            ariaDescribedBy={`${hindId} ${errorId}`}
+            {...this.props}
+          />
+          <span
+            className="k-form-hint"
+            style={{ position: "absolute", right: 0 }}
+          >
+            {this.props.value} / {this.props.max}
+          </span>
+          {showHint && <Hint id={hindId}>{this.props.hint}</Hint>}
+          {showValidationMessage && (
+            <Error id={errorId}>{this.props.validationMessage}</Error>
+          )}
+        </div>
+      </FieldWrapper>
+    );
+  }
+}
+
+class App extends React.Component {
+  render() {
+    const max: number = 200;
+
+    return (
+      <Form
+        initialValues={{
+          sendInvitation: ""
+        }}
+        onSubmit={this.handleSubmit}
+        render={formRenderProps => (
+          <FormElement style={{ width: 250 }}>
+            <fieldset
+              className={"k-form-fieldset"}
+              style={{ position: "absolute" }}
+            >
+              <Field
+                id={"sendInvitation"}
+                name={"sendInvitation"}
+                label={"Send Invitation:"}
+                max={max}
+                value={formRenderProps.valueGetter("sendInvitation").length}
+                hint={"Hint: Enter your text here"}
+                component={FormTextArea}
+                validator={textAreaValidator}
+              />
+              <div className="k-form-buttons k-justify-content-end">
+                <Button
+                  themeColor={'primary'}
+                  type={"submit"}
+                  disabled={!formRenderProps.allowSubmit}
+                >
+                  Send
+                </Button>
+              </div>
+            </fieldset>
+          </FormElement>
+        )}
+      />
+    );
+  }
+  handleSubmit = dataItem => alert(JSON.stringify(dataItem, null, 2));
+}
+
+ReactDOM.render(<App />, document.querySelector("my-app"));

package/docs/examples/textarea/overview/func/main.tsx

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Form, Field, FormElement, FieldWrapper } from '@progress/kendo-react-form';
+import { Label, Hint, Error } from '@progress/kendo-react-labels';
+import { TextArea } from '@progress/kendo-react-inputs';
+import { Button } from '@progress/kendo-react-buttons';
+
+const textAreaValidator = (value) => !value ?
+    "Please enter a text." : "";
+
+const FormTextArea = (fieldRenderProps) => {
+    const { validationMessage, touched, label, id, valid, disabled, hint, type, optional, max, value, ...others } = fieldRenderProps;
+
+    const showValidationMessage = touched && validationMessage;
+    const showHint = !showValidationMessage && hint;
+    const hindId = showHint ? `${id}_hint` : '';
+    const errorId = showValidationMessage ? `${id}_error` : '';
+
+    return (
+      <FieldWrapper>
+        <Label editorId={id} editorValid={valid} editorDisabled={disabled} optional={optional}>{label}</Label>
+        <div className={'k-form-field-wrap'}>
+          <TextArea
+            valid={valid}
+            type={type}
+            id={id}
+            disabled={disabled}
+            maxlength={max}
+            rows={4}
+            ariaDescribedBy={`${hindId} ${errorId}`}
+            {...others}
+                />
+          <Hint direction={'end'} style={{ position: 'absolute', right: 0 }}>{value.length} / {max}</Hint>
+          {
+                    showHint &&
+                    <Hint id={hindId}>{hint}</Hint>
+                }
+          {
+                    showValidationMessage &&
+                    <Error id={errorId}>{validationMessage}</Error>
+                }
+        </div>
+      </FieldWrapper>
+    );
+};
+
+const App = () => {
+    const max = 200;
+    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem, null, 2));
+
+    return (
+      <Form
+        initialValues={{
+                sendInvitation: ''
+            }}
+        onSubmit={handleSubmit}
+        render={(formRenderProps) => (
+          <FormElement style={{ width: 250, position: 'absolute' }}>
+            <fieldset className={'k-form-fieldset'}>
+              <Field
+                id={'sendInvitation'}
+                name={'sendInvitation'}
+                label={'Send Invitation:'}
+                max={max}
+                value={formRenderProps.valueGetter('sendInvitation')}
+                hint={'Hint: Enter your text here'}
+                component={FormTextArea}
+                validator={textAreaValidator}
+                        />
+              <div className="k-form-buttons k-justify-content-end">
+                <Button
+                  themeColor={'primary'}
+                  type={'submit'}
+                  disabled={!formRenderProps.allowSubmit}
+                            >
+                  Send
+                </Button>
+              </div>
+            </fieldset>
+          </FormElement>
+            )}
+        />
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);
+

package/docs/examples/textarea/sizing/func/main.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+
+import { TextArea } from '@progress/kendo-react-inputs';
+
+const App = () => {
+    return (
+      <TextArea rows={5} />
+    );
+}
+
+ReactDOM.render(
+  <App />,
+    document.querySelector('my-app')
+);

package/docs/examples/tsconfig.json

@@ -0,0 +1,29 @@
+{
+    "compilerOptions": {
+        "baseUrl": ".",
+        "sourceMap": false,
+        "noImplicitAny": false,
+        "module": "commonjs",
+        "target": "ES5",
+        "jsx": "react",
+        "lib": [
+            "es2015",
+            "es2017",
+            "dom"
+        ],
+        "declaration": true,
+        "moduleResolution": "node",
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "strictNullChecks": true,
+        "paths": {
+            "@progress/kendo-react-inputs": [
+                "../../src/main.ts",
+            ]
+        }
+    },
+    "include": [
+        "**/*.ts",
+        "**/*.tsx",
+    ]
+}

package/docs/flatcolorpicker/_meta.yml

@@ -0,0 +1,3 @@
+title: FlatColorPicker
+tags: component
+position: 6