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

package/docs/checkbox/appearance.md

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

package/docs/checkbox/controlled.md

@@ -1,57 +0,0 @@
----
-title: Controlled Mode
-description: "Control the value of the KendoReact Checkbox in React projects."
-slug: controlled_checkbox
-position: 3
----
-
-# Controlled Mode
-
-By default, the Checkbox is in an uncontrolled state.
-
-The Checkbox provides options for controlling the Value and Checked state. It supports setting it's boolean value using either `value` or `checked` prop. Note that if you provide both props, the `value` prop will be passed to the underlying `input` element.
-
-## Controlling the Value
-
-To manage the value of the Checkbox:
-
-1. Use its [`value`]({% slug api_inputs_checkboxprops %}#toc-value) property.
-1. Handle the [`onChange`]({% slug api_inputs_checkboxprops %}#toc-onchange) event.
-1. Pass the new value through the props.
-
-
-
-{% meta height:100 %}
-{% variant title:Hooks %}
-{% embed_file checkbox/controlled/value/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file checkbox/controlled/value/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-## Controlling the Checked state
-
-To manage the checked state of the Checkbox:
-
-1. Use its [`checked`]({% slug api_inputs_checkboxprops %}#toc-checked) property.
-1. Handle the [`onChange`]({% slug api_inputs_checkboxprops %}#toc-onchange) event.
-1. Pass the new value through the props.
-
-
-
-{% meta height:100 %}
-{% variant title:Hooks %}
-{% embed_file checkbox/controlled/checked/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file checkbox/controlled/checked/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Checkbox]({% slug api_inputs_checkboxprops %})

package/docs/checkbox/default-state.md

@@ -1,24 +0,0 @@
----
-title: Default State
-description: "Set the initial value of the KendoReact Checkbox in React projects."
-slug: default_checkbox
-position: 4
----
-
-# Default State
-
-The Checkbox enables you to set its initial value when used in uncontrolled mode.
-
-In this way, each subsequent click toggles the newly-selected state.
-
-
-
-{% meta height:100 %}
-{% embed_file checkbox/default/func/main.tsx preview %}
-{% endmeta %}
-
-
-
-## Suggested Links
-
-* [API Reference of the Checkbox]({% slug api_inputs_checkbox %})

package/docs/checkbox/disabled.md

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

package/docs/checkbox/forms-support.md

@@ -1,90 +0,0 @@
----
-title: Forms support
-description: "Use the native HTML5 forms implementation of the KendoReact Checkbox component in React projects."
-slug: forms_support_checkbox
-position: 8
----
-
-# Forms Support
-
-The Checkbox 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 checkbox values and prevent the submission of forms which are in an invalid state.
-
-> In addition to the exposed form support settings, the [Checkbox]({% slug api_inputs_checkbox %}) 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)
-* [Disabling the Validation Styling](#toc-disabling-the-validation-styling)
-
-### 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 checkbox a terms agreement.
-
-
-
-{% meta height:430 %}
-{% embed_file checkbox/forms/kendo-react-form/func/main.tsx preview %}
-{% endmeta %}
-
-
-### Setting Validation Requirements
-
-The Checkbox supports props for setting basic validation. For example, the [`required`]({% slug api_inputs_checkboxprops %}#toc-required) property which prevents form submission when Checkbox is not checked.
-
-
-
-{% meta height:400 %}
-{% variant title:Hooks %}
-{% embed_file checkbox/forms/basic/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file checkbox/forms/basic/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-### Setting Custom Validation Messages
-
-You can implement custom error messages which will be displayed when the Checkbox is in an invalid state and the user tries to submit the form. To render a custom validation message, set the [`validationMessage`]({% slug api_inputs_checkboxprops %}#toc-validationmessage) prop.
-
-
-
-{% meta height:550 %}
-{% variant title:Hooks %}
-{% embed_file checkbox/forms/custom-message/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file checkbox/forms/custom-message/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-### Disabling the Validation Styling
-
-By default, to achieve a visual representation of its invalid state, the Checkbox applies the `k-invalid` class name to the wrapping component. To disable the utilization of `k-invalid`, set the [`validityStyles`]({% slug api_inputs_checkboxprops %}#toc-validitystyles) property to `false`.
-
-
-
-{% meta height:550 %}
-{% variant title:Hooks %}
-{% embed_file checkbox/forms/disable-styles/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file checkbox/forms/disable-styles/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-## Suggested Links
-
-* [API Reference of the Checkbox Props]({% slug api_inputs_checkboxprops %})

package/docs/checkbox/index.md

@@ -1,46 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact Checkbox delivers and use the component in React projects."
-slug: overview_checkbox
-position: 1
----
-
-# KendoReact Checkbox Overview
-
-The KendoReact Checkbox lets the user toggle between checked, unchecked and the optional indeterminate states.
-
-The Checkbox is designed to replace the `<input type="checkbox">` HTML5 tag and provides the KendoReact specific styling.
-
-<div data-component="StartFreeTrialSection"></div>
-
-The CheckBox is typically used to represent boolean values via a binary checked state. All regular [`input type="checkbox"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox) HTML attributes are applicable.
-
-The KendoReact Checkbox 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).
-
-The following example demonstrates the Checkbox component in action.
-
-
-
-{% meta height:150 %}
-{% embed_file checkbox/main/func/main.tsx preview %}
-{% endmeta %}
-
->The Checkbox 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 Checkbox and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Disabled Checkbox]({% slug disabled_checkbox %})&mdash;You can render a disabled Checkbox by setting a single property and keep it disabled until certain requirements are met.
-* [Controlled mode]({% slug controlled_checkbox %})&mdash;You can take advantage of the built-in options that allow you to control the value and the checked state of the Checkbox.
-* [Default state]({% slug default_checkbox %})&mdash;To control the initial value of the Checkbox, you can use the `defaultChecked` property.
-* [Labels]({% slug labels_checkbox %})&mdash;You can add labels and set their position. The Checkbox supports custom labels as well.
-* [Forms support]({% slug forms_support_checkbox %})&mdash;You can easily integrate the Checkbox with an [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms), the [KendoReact Form component]({% slug overview_form %}), or a third-party React form library.
-* [Globalization]({% slug globalization_inputs %})&mdash;The KendoReact Checkbox comes with globalization features that allow you to create applications that can be used all over the world.
-* [Keyboard navigation]({% slug keyboard_navigation_checkbox %})&mdash;The Checkbox supports numerous keyboard shortcuts that allow users to interact with the component.
-* [Accessibility]({% slug accessibility_checkbox %})&mdash;The Checkbox 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 Checkbox]({% slug api_inputs_checkbox %})
-* [React Checkbox High-Level Overview](https://www.telerik.com/kendo-react-ui/checkbox/)

package/docs/checkbox/keyboard-navigation.md

@@ -1,36 +0,0 @@
----
-title: Keyboard Navigation
-description: "Use the KendoReact Checkbox keyboard navigation in React projects."
-slug: keyboard_navigation_checkbox
-position: 9
----
-
-# Keyboard Navigation
-
-The keyboard navigation of the Checkbox is always available.
-
-The Checkbox supports the following keyboard shortcuts:
-
-| SHORTCUT                            | DESCRIPTION         |
-|:---                                 |:---                 |
-| `Tab`                               | (Accessibility mode) Focuses the Checkbox element. |
-| `Space`                             | Toggles the component checked state. |
-
-
-
-
-{% meta height:110 %}
-{% variant title:Hooks %}
-{% embed_file checkbox/keyboard/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file checkbox/keyboard/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Checkbox Component]({% slug api_inputs_checkbox %})
-* [API Reference of the Checkbox props]({% slug api_inputs_checkboxprops %})
-* [Accessibility ]({% slug accessibility_checkbox %})

package/docs/checkbox/labels.md

@@ -1,36 +0,0 @@
----
-title: Labels
-description: "Set the labels of the KendoReact Checkbox in React projects."
-slug: labels_checkbox
-position: 5
----
-
-# Labels
-
-The Checkbox enables you to add label next to the input, either before or after it.
-
-## Setting Up the Label
-
-To set the label, use the [`label`]({% slug api_inputs_checkboxprops %}#toc-label) property, which accept `string`. To set position of the label, use the [`labelPlacement`]({% slug api_inputs_checkboxprops %}#toc-labelPlacement) property, which accept `before` and `after` values.
-
-
-
-{% meta height:130 %}
-{% embed_file checkbox/labels/setup/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Custom labels
-
-To create a custom labels, set `id` prop of the Checkbox and provide custom markup for the label, including the `for` attribute for it.
-
-
-
-{% meta height:130 %}
-{% embed_file checkbox/labels/custom/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Checkbox]({% slug api_inputs_checkbox %})

package/docs/colorgradient/_meta.yml

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

package/docs/colorgradient/color-contrast.md

@@ -1,34 +0,0 @@
----
-title: Color Contrast Tool
-description: "Use the KendoReact ColorGradient to check the color contrast of two colors in React projects."
-slug: colorcontrast_colorgradient
-position: 5
----
-
-
-# Color Contrast Tool
-
-The ColorGradient component provides options for checking the color contrast ratio between two colors. Color contrast between text and background is important on web pages. It affects some people’s ability to perceive the information.
-
-This tool follows the Web Content Accessibility Guidelines (WCAG), which are a series of recommendations for making the web more accessible.
-
-Regarding colors, the WCAG standard defines two levels of contrast ratio:
-* `AA (minimum contrast)`—The level AA requires a contrast ratio of at least 4.5:1 for normal text.
-* `AAA (enhanced contrast)`—The level AAA requires a contrast ratio of at least 7:1 for normal text.
-
-To enable the functionality, set its [`backgroundColor`]({% slug api_inputs_colorpickergradientsettings %}#toc-backgroundColor) property.
-
-The following example demonstrates how to display the Color Contrast tool in the ColorGradient.
-
-{% meta height:550 %}
-{% variant title:Hooks %}
-{% embed_file colorgradient/colorcontrast/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorgradient/colorcontrast/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the ColorGradient]({% slug api_inputs_colorgradient %})

package/docs/colorgradient/controlled.md

@@ -1,32 +0,0 @@
----
-title: Controlled Mode
-description: "Control the value of the KendoReact ColorGradient in React projects."
-slug: controlled_colorgradient
-position: 3
----
-
-# Controlled Mode
-
-By default, the ColorGradient is in an uncontrolled state.
-
-To manage the state of the ColorGradient:
-
-1. Use its [`value`]({% slug api_inputs_colorgradientprops %}#toc-value) property.
-1. Handle the [`onChange`]({% slug api_inputs_colorgradientprops %}#toc-onchange) event.
-1. Pass the new value through the props.
-
-
-
-{% meta height:450 %}
-{% variant title:Hooks %}
-{% embed_file colorgradient/controlled/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorgradient/controlled/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the ColorGradient]({% slug api_inputs_colorgradient %})

package/docs/colorgradient/disabled.md

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

package/docs/colorgradient/index.md

@@ -1,42 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact ColorGradient delivers and use the component in React projects."
-slug: overview_colorgradient
-position: 1
----
-
-# KendoReact ColorGradient Overview
-
-The KendoReact ColorGradient renders a gradient, a hue and an alpha slider, and inputs to manually enter the desired color.
-
-The KendoReact ColorGradient 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 ColorGradient in action.
-
-
-
-{% meta height:700 %}
-{% variant title:Hooks %}
-{% embed_file colorgradient/overview/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorgradient/overview/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
->The ColorGradient 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 ColorGradient and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Disabled ColorGradient]({% slug disabled_colorgradient %})&mdash;You can render a disabled ColorGradient by setting a single property and keep it disabled until certain requirements are met.
-* [Controlled mode]({% slug controlled_colorgradient %})&mdash;You can take advantage of the built-in options that allow you to control the value of the ColorGradient.
-* [Removing opacity inputs]({% slug no_opacity_colorgradient %})&mdash;The ColorGradient supports options that allow the user to specify whether an alpha slider and an alpha input will be rendered.
-
-## 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 ColorGradient]({% slug api_inputs_colorgradient %})
-* [React ColorGradient High-Level Overview](https://www.telerik.com/kendo-react-ui/colorgradient/)

package/docs/colorgradient/noopacity.md

@@ -1,28 +0,0 @@
----
-title: Removing Opacity Inputs
-description: "Do not show the opacity inputs of the KendoReact ColorGradient in React projects."
-slug: no_opacity_colorgradient
-position: 4
----
-
-# Removing Opacity Inputs
-
-The ColorGradient provides options for the user to specify whether an alpha slider and an alpha input will be rendered.
-
-The following example demonstrates how to remove the opacity-related fields.
-
-
-
-{% meta height:500 %}
-{% variant title:Hooks %}
-{% embed_file colorgradient/opacity/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorgradient/opacity/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the ColorGradient]({% slug api_inputs_colorgradient %})

package/docs/colorpalette/_meta.yml

@@ -1,3 +0,0 @@
-title: ColorPalette
-tags: component
-position: 4

package/docs/colorpalette/controlled.md

@@ -1,32 +0,0 @@
----
-title: Controlled Mode
-description: "Control the value of the KendoReact ColorPalette in React projects."
-slug: controlled_colorpalette
-position: 3
----
-
-# Controlled Mode
-
-By default, the ColorPalette is in an uncontrolled state.
-
-To manage the state of the ColorPalette:
-
-1. Use its [`value`]({% slug api_inputs_colorpaletteprops %}#toc-value) property.
-1. Handle the [`onChange`]({% slug api_inputs_colorpaletteprops %}#toc-onchange) event.
-1. Pass the new value through the props.
-
-
-
-{% meta height:200 %}
-{% variant title:Hooks %}
-{% embed_file colorpalette/controlled/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorpalette/controlled/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the ColorPalette]({% slug api_inputs_colorpalette %})

package/docs/colorpalette/custom.md

@@ -1,23 +0,0 @@
----
-title: Custom ColorPalette
-description: "Customize the KendoReact ColorPalette in React projects."
-slug: custom_colorpalette
-position: 5
----
-
-# Custom ColorPalette
-
-The ColorPalette provides options for the user to specify the number of its columns and its tile size.
-
-The following example demonstrates how to customize the rendering of the ColorPalette.
-
-
-
-{% meta height:250 %}
-{% embed_file colorpalette/custom/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the ColorPalette]({% slug api_inputs_colorpalette %})

package/docs/colorpalette/disabled.md

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

package/docs/colorpalette/events.md

@@ -1,27 +0,0 @@
----
-title: Events
-description: "Using the KendoReact ColorPalette events in React projects."
-slug: events_colorpalette
-position: 7
----
-
-# Events
-
-The KendoReact ColorPalette generates events that you can handle. This allows you to tailor the behavior of the ColorPalette to your specific requirements.
-
-The following example demonstrates the [`change`]({% slug api_inputs_colorpalettechangeevent %}) event of the ColorPalette.
-
-
-{% meta height:300 %}
-{% variant title:Hooks %}
-{% embed_file colorpalette/overview/events/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorpalette/overview/events/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the ColorPalette]({% slug api_inputs_colorpalette %})