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

package/docs/switch/default-state.md

@@ -1,20 +0,0 @@
----
-title: Default State
-description: "Set the initial value of the KendoReact Switch in React projects."
-slug: default_state
-position: 4
----
-
-# Default State
-
-The Switch enables you to set its initial value.
-
-In this way, each subsequent click moves the handle over the newly-selected state.
-
-{% meta height:140 %}
-{% embed_file switch/default/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the Switch]({% slug api_inputs_switch %})

package/docs/switch/disabled-state.md

@@ -1,20 +0,0 @@
----
-title: Disabled Switch
-description: "Enable or disable the KendoReact Switch in React projects."
-slug: disabled_switch
-position: 2
----
-
-# Disabled Switch
-
-By default, the Switch is enabled.
-
-To disable the user interaction with the component, set the [`disabled`]({% slug api_inputs_switchprops %}#toc-disabled) property to `true`.
-
-{% meta height:130 %}
-{% embed_file switch/disabled/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the Switch]({% slug api_inputs_switch %})

package/docs/switch/forms-support.md

@@ -1,78 +0,0 @@
----
-title: Forms support
-description: "Use the native HTML5 forms implementation of the KendoReact Switch component in React projects."
-slug: forms_support_switch
-position: 9
----
-
-# Forms Support
-
-The Switch component can be easily integrated with [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms) as well as [KendoReact Form]({% slug overview_form %}) (or other third-party solutions).
-
-The forms supports enables you to validate switch values and prevent the submission of forms which are in an invalid state.
-
-> In addition to the exposed form support settings, the [Switch]({% slug api_inputs_switch %}) provides the same properties and behaves in the same way as a native HTML [`input[type=checkbox]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) element.
-
-## Functionality and Features
-
-* [Support for KendoReact Form and Setting Custom Behavior](#toc-support-for-kendoreact-form)
-* [Setting Validation Requirements](#toc-setting-validation-requirements)
-* [Setting Custom Validation Messages](#toc-setting-custom-validation-messages)
-
-### Support for KendoReact Form and  Setting Custom Behavior
-The KendoReact Form component [integrates with all KendoReact components](https://www.telerik.com/kendo-react-ui/components/form/custom-components/).
-
-You can display error messages and fully customize the behavior of the rendered component by using the additional properties of the Field component.
-
-The following example demonstrates how to render a required custom switch.
-
-
-
-{% meta height:500 %}
-{% variant title:Hooks %}
-{% embed_file switch/forms/kendo-react-form/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file switch/forms/kendo-react-form/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-### Setting Validation Requirements
-
-The Switch supports props for setting basic validation requirements. For example, the [`required`]({% slug api_inputs_switchprops %}#toc-required) property which enables the successful form submission.
-
-
-
-{% meta height:400 %}
-{% variant title:Hooks %}
-{% embed_file switch/forms/basic/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file switch/forms/basic/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-### Setting Custom Validation Messages
-
-You can implement custom error messages which will be displayed if the Switch is not turned on and the user tries to submit the form. To render a custom validation message, set the [`validationMessage`]({% slug api_inputs_switchprops %}#toc-validationmessage) prop.
-
-
-
-{% meta height:530 %}
-{% variant title:Hooks %}
-{% embed_file switch/forms/custom-message/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file switch/forms/custom-message/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-## Suggested Links
-
-* [API Reference of the Switch Props]({% slug api_inputs_switchprops %})

package/docs/switch/index.md

@@ -1,44 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact Switch delivers and use the component in React projects."
-slug: overview_switch
-position: 1
----
-
-# KendoReact Switch Overview
-
-The KendoReact Switch lets the user toggle between checked and unchecked states.
-
-The KendoReact Switch component is part of the KendoReact library of React UI components. It is distributed through NPM under the [kendo-react-inputs package](https://www.npmjs.com/package/@progress/kendo-react-inputs).
-
-<div data-component="StartFreeTrialSection"></div>
-
-
-The following example demonstrates the Switch in action.
-
-
-
-{% meta height:110 %}
-{% embed_file switch/overview/basic/func/main.tsx preview %}
-{% endmeta %}
-
-
->The Switch component is part of the [KendoReact Inputs]({% slug overview_inputs %}) component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the Switch and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Disabled Switch]({% slug disabled_switch %})&mdash;You can render a disabled Switch and keep it disabled until certain requirements are met.
-* [Controlled mode]({% slug controlled_switch %})&mdash;Take advantage of the built-in options that allow you to control the value of the Switch.
-* [Default state]({% slug default_state %})&mdash;The Switch allows you to set its default value.
-* [Labels]({% slug labels_switch %})&mdash;You can set strings as labels for the Switch.
-* [Globalization]({% slug globalization_inputs %})&mdash;The KendoReact Switch comes with globalization features that allow you to create applications that can be used all over the world.
-* [Keyboard navigation]({% slug keyboard_navigation_switch %})&mdash;The Switch allows end-users to control the state of the component with the `space` and `enter` keys.
-support numerous keyboard shortcuts that allow users to interact with the component.
-* [Accessibility]({% slug accessibility_switch %})&mdash;The Switch component is accessible for screen readers and provides full WAI-ARIA support.
-
-## Suggested Links
-
-* [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %})
-* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/)
-* [API Reference of the Switch]({% slug api_inputs_switch %})
-* [React Switch High-Level Overview](https://www.telerik.com/kendo-react-ui/switch/)

package/docs/switch/keyboard-navigation.md

@@ -1,31 +0,0 @@
----
-title: Keyboard Navigation
-description: "Use the KendoReact Switch keyboard navigation in React projects."
-slug: keyboard_navigation_switch
-position: 8
----
-
-# Keyboard Navigation
-
-The keyboard navigation of the Switch is always available.
-
-The Switch supports the following keyboard shortcuts:
-
-| SHORTCUT        | DESCRIPTION         |
-|:---             |:---                 |
-| `Space` key     | Toggles the component checked state. |
-| `Enter` key     | Toggles the component checked state. |
-
-{% meta height:150 %}
-{% variant title:Hooks %}
-{% embed_file switch/keyboard/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file switch/keyboard/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the Switch]({% slug api_inputs_switch %})
-* [Accessibility]({% slug accessibility_switch %})

package/docs/switch/labels.md

@@ -1,29 +0,0 @@
----
-title: Labels
-description: "Set the labels of the KendoReact Switch in React projects."
-slug: labels_switch
-position: 5
----
-
-# Labels
-
-The Switch enables you to control the title of its labels.
-
-## Setting Up the Titles
-
-To set the behavior of the labels, use the [`onLabel`]({% slug api_inputs_switchprops %}#toc-onlabel) and [`offLabel`]({% slug api_inputs_switchprops %}#toc-offlabel) properties, which accept `string` parameters. Note that the Switch does not support long custom labels.
-
-
-
-{% meta height:110 %}
-{% embed_file switch/labels/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Styling the Labels
-
-By design, the Switch does not render any labels when the component is styled with the KendoReact Bootstrap or Material theme. To change the default setup and achieve any of the additional predefined layouts, refer to the article on [changing the Switch layout](https://github.com/telerik/kendo-themes/wiki/Change-the-Switch-Layout) in the kendo-themes Wiki. For more information, refer to [issue #567](https://github.com/telerik/kendo-themes/issues/567).
-
-## Suggested Links
-
-* [API Reference of the Switch]({% slug api_inputs_switch %})

package/docs/textarea/_meta.yml

@@ -1,3 +0,0 @@
-title: TextArea
-tags: component
-position: 17

package/docs/textarea/appearance.md

@@ -1,30 +0,0 @@
----
-title: Appearance
-description: "Add alternative styling options to the KendoReact TextArea in React projects."
-slug: appearance_textarea
-position: 6
----
-
-# Appearance
-
-The TextArea provides a predefined set of appearance options.
-
-Apart from the default vision of the TextArea, these alternative styling options enable you to configure each individual aspect of the appearance of a TextArea.
-
-- [`size`]({% slug api_inputs_textareaprops %}#toc-size)
-- [`fillMode`]({% slug api_inputs_textareaprops %}#toc-fillMode)
-- [`rounded`]({% slug api_inputs_textareaprops %}#toc-rounded)
-
-The following example demonstrates configuring different aspects of a TextArea appearance through a configurator.
-
-{% meta %}
-{% embed_file textarea/appearance/func/main.tsx preview %}
-{% embed_file shared/style-configurator.tsx %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the TextArea]({% slug api_inputs_textareaprops %})
-* [TextArea `size` options]({% slug api_inputs_textareaprops %}#toc-size)
-* [TextArea `fillMode` options]({% slug api_inputs_textareaprops %}#toc-fillMode)
-* [TextArea `rounded` options]({% slug api_inputs_textareaprops %}#toc-rounded)

package/docs/textarea/controlled_mode.md

@@ -1,37 +0,0 @@
----
-title: Controlled Mode
-description: "Control the value of the KendoReact TextArea in React projects."
-slug: controlled_textarea
-position: 3
----
-
-# Controlled Mode
-
-By default, the TextArea is in an uncontrolled state.
-
-The TextArea provides options for controlling the value. It supports setting it's value using `value` prop to the underlying `textarea` element.
-
-## Controlling the Value
-
-To manage the value of the TextArea:
-
-1. Use its [`value`]({% slug api_inputs_textareaprops %}#toc-value) property.
-1. Handle the [`onChange`]({% slug api_inputs_textareaprops %}#toc-onchange) event.
-1. Pass the new value through the props.
-
-
-
-{% meta height:170 %}
-{% variant title:Hooks %}
-{% embed_file textarea/controlled/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file textarea/controlled/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the TextArea]({% slug api_inputs_textarea %})
-* [API Reference of the TextAreaProps]({% slug api_inputs_textareaprops %})

package/docs/textarea/counter.md

@@ -1,28 +0,0 @@
----
-title: Characters Counter
-description: "Implement a counter of the KendoReact TextArea component in React projects."
-slug: counter_textarea
-position: 6
----
-
-# Characters Counter
-
-The following example demonstrates the TextArea component with a characters counter in action.
-
-
-
-{% meta height:180 %}
-{% variant title:Hooks %}
-{% embed_file textarea/counter/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file textarea/counter/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-## Suggested Links
-
-* [API Reference of the TextArea]({% slug api_inputs_textarea %})
-* [API Reference of the TextAreaProps]({% slug api_inputs_textareaprops %})

package/docs/textarea/default_state.md

@@ -1,25 +0,0 @@
----
-title: Default State
-description: "Set the initial value of the KendoReact TextArea in React projects."
-slug: default_textarea
-position: 4
----
-
-# Default State
-
-The TextArea enables you to set its initial value when used in uncontrolled mode.
-
-Use its [`defaultValue`]({% slug api_inputs_textareaprops %}#toc-defaultValue) property.
-
-
-
-{% meta height:170 %}
-{% embed_file textarea/default-state/func/main.tsx preview %}
-{% endmeta %}
-
-
-
-## Suggested Links
-
-* [API Reference of the TextArea]({% slug api_inputs_textarea %})
-* [API Reference of the TextAreaProps]({% slug api_inputs_textareaprops %})

package/docs/textarea/disabled.md

@@ -1,24 +0,0 @@
----
-title: Disabled TextArea
-description: "Enable or disable the KendoReact TextArea in React projects."
-slug: disabled_textarea
-position: 2
----
-
-# Disabled TextArea
-
-By default, the TextArea is enabled.
-
-To disable the component, set its [`disabled`]({% slug api_inputs_textareaprops %}#toc-disabled) property to `true`.
-
-
-
-{% meta height:170 %}
-{% embed_file textarea/disabled/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the TextArea]({% slug api_inputs_textarea %})
-* [API Reference of the TextAreaProps]({% slug api_inputs_textareaprops %})

package/docs/textarea/forms_support.md

@@ -1,39 +0,0 @@
----
-title: Forms support
-description: "Use the native HTML5 forms implementation of the KendoReact TextArea component in React projects."
-slug: forms_support_textarea
-position: 7
----
-
-# Forms Support
-
-The TextArea component can be easily integrated with [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms) as well as [KendoReact Form]({% slug overview_form %}) (or other third-party solutions).
-
-The form enables you to validate textarea value and prevent the submission of forms which are in an invalid state.
-
-### Support for KendoReact Form
-
-The KendoReact Form component [integrates with all KendoReact form components](https://www.telerik.com/kendo-react-ui/components/form/guidelines-with-examples/).
-
-You can display error messages and fully customize the behavior of the rendered component by using the additional properties of the Field component.
-
-The following example demonstrates how to render a required TextArea within a KendoReact Form component.
-
-
-
-{% meta height:550 %}
-{% variant title:Hooks %}
-{% embed_file textarea/forms/kendo-react-form/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file textarea/forms/kendo-react-form/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-## Suggested Links
-
-* [API Reference of the TextArea]({% slug api_inputs_textarea %})
-* [API Reference of the TextAreaProps]({% slug api_inputs_textareaprops %})
-

package/docs/textarea/index.md

@@ -1,51 +0,0 @@
----
-title: Overview
-description: "Try the React Textarea component by KendoReact that covers everything from configuring default values to form validation."
-slug: overview_textarea
-position: 0
----
-
-# KendoReact TextArea Overview
-
-The KendoReact TextArea component offers a highly customizable interface for the user to submit value on multiple lines.
-
-Its features cover everything from setting a default value and character counter to form validation.
-
-<div data-component="StartFreeTrialSection"></div>
-
-
-{% meta height:280 %}
-{% variant title:Hooks %}
-{% embed_file textarea/overview/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file textarea/overview/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-This demo implements some of the features that are available in the TextArea:
-
-* You can **resize** the TextArea.
-* You can use the **character counter** to count and limit the input characters.
-* You can use the TextArea with **form validation**.
-
->The TextArea component is part of the [KendoReact Inputs]({% slug overview_inputs %}) component library. The procedures for installing, importing, and using all components in the library are identical. To learn how to use the TextArea and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Disabled TextArea]({% slug disabled_textarea %})&mdash;You can render a disabled TextArea component and keep it disabled until certain requirements are met.
-* [Controlled mode]({% slug controlled_textarea %})&mdash;Take advantage of the built-in options that allow you to control the value of the TextArea.
-* [Default state]({% slug default_textarea %})&mdash;The TextArea allows you to set its default value.
-* [Sizing]({% slug sizing_textarea %})&mdash;You can configure the auto size option and the initial height of the TextArea.
-* [Characters Counter]({% slug counter_textarea %})&mdash;The TextArea component is easily customizable and allows you to integrate it with a character counter.
-* [Forms support]({% slug forms_support_textarea %})&mdash;You can easily integrate the TextArea with an [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), a [KendoReact Form]({% slug overview_form %}), or a third-party React form library.
-* [Globalization]({% slug globalization_inputs %})&mdash;The KendoReact TextArea comes with globalization features that allow you to create applications that can be used all over the world.
-
-## Suggested Links
-
-* [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %})
-* [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/)
-* [API Reference of the TextArea]({% slug api_inputs_textarea %})
-* [API Reference of the TextAreaProps]({% slug api_inputs_textareaprops %})
-* [React TextArea High-Level Overview](https://www.telerik.com/kendo-react-ui/textarea/)

package/docs/textarea/sizing.md

@@ -1,38 +0,0 @@
----
-title: Sizing
-description: "Set the height of the KendoReact TextArea component in React projects."
-slug: sizing_textarea
-position: 5
----
-
-# Sizing
-
-You can easily set the initial height of the TextArea component as well as setting an auto size option as the user types.
-
-## Setting the Initial Rows
-
-To set initial rows of the TextArea, use its [`rows`]({% slug api_inputs_textareaprops %}#toc-rows) property.
-
-
-
-{% meta height:200 %}
-{% embed_file textarea/sizing/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Auto-Resizing
-
-To automatically adjust the height of the TextArea as the user types, set its [`autoSize`]({% slug api_inputs_textareaprops %}#toc-autoSize) property to `true`.
-
-
-
-{% meta height:250 %}
-{% embed_file textarea/auto-sizing/func/main.tsx preview %}
-{% endmeta %}
-
-
-
-## Suggested Links
-
-* [API Reference of the TextArea]({% slug api_inputs_textarea %})
-* [API Reference of the TextAreaProps]({% slug api_inputs_textareaprops %})

package/e2e/a11y.tests.ts

@@ -1,154 +0,0 @@
-import { Browser } from '@progress/kendo-e2e';
-import { LOCATORS } from '../../../e2eUtils/const';
-let browser: Browser;
-
-beforeAll( async () => {
-  browser = new Browser();
-  await browser.navigateTo('http://localhost:8888/examples/e2e/accessibility/main.html');
-  await browser.find(LOCATORS.APP);
-});
-
-afterAll(async () => {
-  await browser.close();
-});
-
-describe('checkbox test', () => {
-    it.each([
-    '#uncheckedCheckbox',
-    '#checkedCheckbox',
-    '#disabledCheckbox'
-    ])('%s checkbox should not violate accessibility', async (checkbox) => {
-
-      const errors = await browser.getAccessibilityViolations(checkbox, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('colorGradient test', () => {
-    it.each([
-    '#basicColorGradient',
-    '#disabledColorGradient'
-    ])('%s colorGradient should not violate accessibility', async (colorGradient) => {
-
-      const errors = await browser.getAccessibilityViolations(colorGradient, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('colorPalette test', () => {
-    it.each([
-    '#basicColorPalette',
-    '#disabledColorPalette'
-    ])('%s colorPalette should not violate accessibility', async (colorPalette) => {
-
-      const errors = await browser.getAccessibilityViolations(colorPalette, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('colorPicker test', () => {
-    it.each([
-    '#basicPaletteColorPicker',
-    '#basicGradientColorPicker',
-    '#disabledPaletteColorPicker'
-    ])('%s rating should not violate accessibility', async (colorPicker) => {
-
-      const errors = await browser.getAccessibilityViolations(colorPicker, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-describe('input test', () => {
-    it.each([
-    '#defaultInput',
-    '#disabledInput'
-    ])('%s input should not violate accessibility', async (input) => {
-
-      const errors = await browser.getAccessibilityViolations(input, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('maskedTextBox test', () => {
-    it.each([
-    '#basicMaskedTextBox',
-    '#disabledMaskedTextBox'
-    ])('%s maskedTextBox should not violate accessibility', async (maskedTextBox) => {
-      const errors = await browser.getAccessibilityViolations(maskedTextBox, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('numericTextBox test', () => {
-    it.each([
-    '#defaultNumericTextBox',
-    '#disabledNumericTextBox'
-    ])('%s numericTextBox should not violate accessibility', async (numericTextBox) => {
-      const errors = await browser.getAccessibilityViolations(numericTextBox, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('radioButton test', () => {
-    it.each([
-    '#trueRadioButton',
-    '#falseRadioButton'
-    ])('%s radioButton should not violate accessibility', async (radioButton) => {
-      const errors = await browser.getAccessibilityViolations(radioButton, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('rangeSlider test', () => {
-    it.each([
-    '#basicRangeSlider'
-    ])('%s rangeSlider should not violate accessibility', async (rangeSlider) => {
-
-      const errors = await browser.getAccessibilityViolations(rangeSlider, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('rating test', () => {
-    it.each([
-    '#basicRating'
-    ])('%s rating should not violate accessibility', async (rating) => {
-
-      const errors = await browser.getAccessibilityViolations(rating, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('slider test', () => {
-    it.each([
-    '#basicSlider'
-    ])('%s slider should not violate accessibility', async (slider) => {
-
-      const errors = await browser.getAccessibilityViolations(slider, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('switch test', () => {
-    it.each([
-    '#defaultSwitch',
-    '#disabledSwitch',
-    '#checkedSwitch'
-    ])('%s switch should not violate accessibility', async (sw) => {
-
-      const errors = await browser.getAccessibilityViolations(sw, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-  describe('textarea test', () => {
-    it.each([
-    '#basicTextArea',
-    '#disabledTextArea'
-    ])('%s textarea should not violate accessibility', async (textarea) => {
-      const errors = await browser.getAccessibilityViolations(textarea, []);
-      expect(errors).toEqual([]);
-    });
-  });
-
-