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

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

@@ -1,38 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,152 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

@@ -1,29 +0,0 @@
-{
-    "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

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