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

package/docs/rangeslider/disabled.md

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

package/docs/rangeslider/index.md

@@ -1,41 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact RangeSlider delivers and use the component in React projects."
-slug: overview_rangeslider
-position: 0
----
-
-# KendoReact RangeSlider Overview
-
-The KendoReact RangeSlider enables the user to increase, decrease, and select predefined values by dragging its handle along the track or by clicking the value on the scale or using the arrow keys.
-
-The KendoReact RangeSlider component is part of the KendoReact library of React UI components. It is distributed through NPM under the [kendo-react-inputs NPM package](https://www.npmjs.com/package/@progress/kendo-react-inputs).
-
-<div data-component="StartFreeTrialSection"></div>
-
-The following example demonstrates the RangeSlider in action.
-
-
-
-{% meta height:130 %}
-{% embed_file rangeslider/overview/func/main.tsx preview %}
-{% endmeta %}
-
-
->The RangeSlider 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 RangeSlider and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Labels]({% slug labels_rangeslider %})&mdash;You can use labels to define names for specific positions on the RangeSlider.
-* [Orientation]({% slug orientation_rangeslider %})&mdash;You can render the RangeSlider vertically or horizontally.
-* [Disabled]({% slug disabled_rangeslider %})&mdash;To prevent users from interacting with the RangeSlider, you can render it as disabled.
-* [Controlled mode]({% slug controlled_rangeslider %})&mdash;Take advantage of the built-in options that allow you to control the value of the RangeSlider.
-* [Keyboard navigation]({% slug keyboard_navigation_rangeslider %})&mdash;The RangeSlider support numerous keyboard shortcuts that allow users to interact with the component.
-* [Accessibility]({% slug accessibility_rangeslider %})&mdash;The RangeSlider 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 RangeSlider Component]({% slug api_inputs_rangeslider %})
-* [React RangeSlider High-Level Overview](https://www.telerik.com/kendo-react-ui/rangeslider/)

package/docs/rangeslider/keyboard-navigation.md

@@ -1,33 +0,0 @@
----
-title: Keyboard Navigation
-description: "Use the KendoReact RangeSlider keyboard navigation in React projects."
-slug: keyboard_navigation_rangeslider
-position: 7
----
-
-# Keyboard Navigation
-
-The keyboard navigation of the RangeSlider is always available.
-
-The RangeSlider supports the following keyboard shortcuts:
-
-| SHORTCUT                            | DESCRIPTION         |
-|:---                                 |:---                 |
-| `Upper Arrow` & `Right Arrow` keys  | Increases the RangeSlider value with the predefined step. |
-| `Down Arrow` & `Left Arrow` keys    | Decreases the RangeSlider value with the predefined step. |
-| `Home`                              | Sets the RangeSlider to its minimum value.                |
-| `End`                               | Sets the RangeSlider to its maximum value.                |
-| `Tab`                               | Focus the next DragHandle inside the RangeSlider.         |
-
-
-
-{% meta height:130 %}
-{% embed_file rangeslider/overview/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the RangeSlider Component]({% slug api_inputs_rangeslider %})
-* [API Reference of the RangeSlider props]({% slug api_inputs_rangesliderprops %})
-* [Accessibility ]({% slug accessibility_rangeslider %})

package/docs/rangeslider/orientation.md

@@ -1,24 +0,0 @@
----
-title: Orientation
-description: "Set the orientation of the KendoReact RangeSlider component in React projects."
-slug: orientation_rangeslider
-position: 5
----
-
-# Orientation
-
-The RangeSlider supports a horizontal and a vertical mode of orientation.
-
-By default, the component is in its horizontal mode. To enable the vertical mode, set the [`vertical`]({% slug api_inputs_rangesliderprops %}#toc-vertical) property to `true`.
-
-
-
-{% meta height:270 %}
-{% embed_file rangeslider/orientation/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the RangeSlider Component]({% slug api_inputs_rangeslider %})
-* [API Reference of the RangeSlider props]({% slug api_inputs_rangesliderprops %})

package/docs/rangeslider/ticks.md

@@ -1,26 +0,0 @@
----
-title: Labels
-description: "Manage the labels of the KendoReact RangeSlider in React projects."
-slug: labels_rangeslider
-position: 3
----
-
-# Labels
-
-You can provide names for specific RangeSlider values by defining labels along the track.
-
-The labels are rendered by the [SliderLabel Component]({% slug api_inputs_sliderlabel %}). The [SliderLabel properties]({% slug api_inputs_sliderlabelprops %}) allow you to configure the content, position, title, and click handler of the RangeSlider.
-
-
-
-{% meta height:130 %}
-{% embed_file rangeslider/labels/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the RangeSlider Component]({% slug api_inputs_rangeslider %})
-* [API Reference of the RangeSlider Props]({% slug api_inputs_rangesliderprops %})
-* [API Reference of the SliderLabel Component]({% slug api_inputs_sliderlabel %})
-* [API Reference of the SliderLabel Props]({% slug api_inputs_sliderlabelprops %})

package/docs/rating/_meta.yml

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

package/docs/rating/accessibility.md

@@ -1,26 +0,0 @@
----
-title: Accessibility
-description: "Apply the accessibility support provided by the KendoReact Rating."
-slug: accessibility_rating
-position: 5
----
-
-# Accessibility
-
-The Rating is designed to be accessible by on-screen readers and provides full [WAI-ARIA accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) support.
-
-## WAI-ARIA Support
-
-The Rating has a role="slider" attribute that semantically defines the rating and uses `ariaLabelledBy` and `ariaDescribedBy` properties. The Rating is WAI ARIA-accessible through the `Tab` key. The `aria-valuemin`, `aria-valuemax`, and `aria-valuenow` properties define the accessibility values when the user select icon from the Rating or interacts with the Rating through the arrow keys. The Rating uses the `aria-disabled` property which defines the accessibility state.
-
-The Rating also follows the [WAI-ARIA best practices](https://www.w3.org/TR/wai-aria-practices/) for implementing the [keyboard navigation]({% slug keyboard_navigation_rating %}) for its component [role](https://www.w3.org/TR/wai-aria#roles) and is tested against the popular screen readers.
-
-## Section 508
-
-The Rating is compliant with the [Section 508](https://www.section508.gov/) requirements.
-
-## Suggested Links
-
-* [API Reference of the Rating Component]({% slug api_inputs_rating %})
-* [API Reference of the Rating props]({% slug api_inputs_ratingprops %})
-* [Keyboard Navigation]({% slug keyboard_navigation_rating %})

package/docs/rating/forms_support.md

@@ -1,39 +0,0 @@
----
-title: Forms Support
-description: "Integrate the KendoReact Form with the KendoReact Rating."
-slug: forms_support_rating
-position: 2
----
-
-# Forms Support
-
-The Rating component can be easily integrated with our [KendoReact Form]({% slug overview_form %}) as well as the [HTML5 form](https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms) (or other third-party solutions).
-
-The form enables you to validate the rating and prevent the submission of forms which are in an invalid state.
-
-
-### Support for KendoReact Form
-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 Rating within a KendoReact Form component.
-
-
-
-{% meta height:500 %}
-{% variant title:Hooks %}
-{% embed_file rating/forms/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file rating/forms/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-## Suggested Links
-
-* [API Reference of the Rating Component]({% slug api_inputs_rating %})
-* [API Reference of the Rating props]({% slug api_inputs_ratingprops %})
-* [Keyboard Navigation]({% slug keyboard_navigation_rating %})

package/docs/rating/functionality-and-features/_meta.yml

@@ -1,2 +0,0 @@
-title: Functionality and Features
-position: 1

package/docs/rating/functionality-and-features/controlled.md

@@ -1,34 +0,0 @@
----
-title: Controlled Mode
-description: "Control the value of the KendoReact Rating in React projects."
-slug: controlled_rating
-position: 7
----
-
-# Controlled Mode
-
-By default, the Rating is in an uncontrolled state.
-
-Set the [defaultValue]({% slug api_inputs_ratingprops %}#toc-defaultValue) property if you want to stay in uncontrolled mode.
-
-To control the state of the Rating:
-
-1. Use its [`value`]({% slug api_inputs_ratingprops %}#toc-value) property.
-1. Handle the [`onChange`]({% slug api_inputs_ratingprops %}#toc-onchange) event.
-1. Pass the new value through the props.
-
-
-
-{% meta height:130 %}
-{% variant title:Hooks %}
-{% embed_file rating/controlled/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file rating/controlled/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Rating]({% slug api_inputs_rating %})

package/docs/rating/functionality-and-features/disabled.md

@@ -1,23 +0,0 @@
----
-title: Disabled
-description: "Sets the disabled mode of the KendoReact Rating in React projects."
-slug: disabled_rating
-position: 6
----
-
-# Disabled
-
-By default, the Rating is shown and it's disabled value is set to `false`.
-
-To set the Rating to disabled mode set it's [`disabled`]({% slug api_inputs_ratingprops %}#toc-disabled) property to `true`.
-
-
-
-{% meta height:130 %}
-{% embed_file rating/disabled/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the RatingProps]({% slug api_inputs_ratingprops %})

package/docs/rating/functionality-and-features/icon.md

@@ -1,27 +0,0 @@
----
-title: Icon
-description: "Sets the icon of the KendoReact Rating in React projects."
-slug: icon_rating
-position: 4
----
-
-# Icon
-
-By default, the Rating item is set to visualize a 'star' icon.
-
-To change the default Rating icon set it's [`icon`]({% slug api_inputs_ratingprops %}#toc-icon) property to the new wanted value.
-
-The following example demonstrates how to implement different icon for the Rating.
-
-
-
-{% meta height:100 %}
-{% embed_file rating/icon/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [KendoReact Icons Article](https://www.telerik.com/kendo-react-ui-develop/components/styling/icons/)
-* [Rating Item customization]({% slug item_customization_ratingitem %})
-* [API Reference of the RatingProps]({% slug api_inputs_ratingprops %})

package/docs/rating/functionality-and-features/items.md

@@ -1,24 +0,0 @@
----
-title: Number Of Items
-description: "Sets the number of items of the KendoReact Rating in React projects."
-slug: items_rating
-position: 2
----
-
-# Number of items
-
-By default, the Rating renders five items.
-
-To set different number of items to the Rating component set it's [`max`]({% slug api_inputs_ratingprops %}#toc-max) property to the desired amount of items.
-The following example demonstrates the behavior in action.
-
-
-{% meta height:130 %}
-{% embed_file rating/items/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [Rating Item customization]({% slug item_customization_ratingitem %})
-* [API Reference of the RatingProps]({% slug api_inputs_ratingprops %})

package/docs/rating/functionality-and-features/label.md

@@ -1,28 +0,0 @@
----
-title: Label
-description: "Sets the label of the KendoReact Rating in React projects."
-slug: label_rating
-position: 3
----
-
-# Label
-
-By default, the Rating does not have a label.
-
-To customize the Rating component label, set its [`label`]({% slug api_inputs_ratingprops %}#toc-label) property to custom string label.
-
-
-
-{% meta height:150 %}
-{% variant title:Hooks %}
-{% embed_file rating/label/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file rating/label/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the RatingProps]({% slug api_inputs_ratingprops %})

package/docs/rating/functionality-and-features/precision.md

@@ -1,51 +0,0 @@
----
-title: Precision
-description: "Sets the precision mode of the KendoReact Rating in React projects."
-slug: precision_rating
-position: 1
----
-
-# Precision Mode
-
-By default, the Rating precision is set to `item`.
-
-To change the component precision, set its [`precision`]({% slug api_inputs_ratingprops %}#toc-precision) property to `half`. Setting the new value enables the user to select half value on the component icons.
-
-
-
-{% meta height:260 %}
-{% embed_file rating/precision/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Enabling First Item Half Selection
-
-The `min` value is represented by the first rendered `item`. Because of this the component does not allow selecting the first half of the fist `item` since it's value is out of the defined `min-max` range.
-
-The Rating does support first item half selection when the defined `min-max` range enables `even` number of possible selections.
-
-For Example, the following configurations allows for a total of `5` possible values, which is an `odd` number of possible selection. This means that the `Rating` should disable `half` selection for one of the items.
-```jsx-no-run
-    <Rating 
-        min={1}
-        max={3}
-        precision={"half"}
-    />
-```
-The possible values in the range of `[1-3]` are: `1`, `1.5`, `2`, `2.5` and `3`
-
-If the application design requires us to enable `first-item half-selection`, it can be achieved by adding a sixth possible value for `0.5`.
-```jsx-no-run
-    <Rating 
-        min={0.5}
-        max={3}
-        precision={"half"}
-    />
-```
-
-Now, the possible values in the range of `[0.5-3]` are: `0.5`, `1`, `1.5`, `2`, `2.5` and `3`
-The `Rating` component will detect such use-cases when the `precision` is set to `half` and render the `0.5` value as the first-half of the first-item.
-
-## Suggested Links
-
-* [API Reference of the RatingProps]({% slug api_inputs_ratingprops %})

package/docs/rating/functionality-and-features/readonly.md

@@ -1,23 +0,0 @@
----
-title: Readonly
-description: "Sets the readonly mode of the KendoReact Rating in React projects."
-slug: readonly_rating
-position: 5
----
-
-# Readonly
-
-By default, the Rating is shown and it's readonly value is set to `false`.
-
-To enable the Rating readonly mode set it's [`readonly`]({% slug api_inputs_ratingprops %}#toc-readonly) property to `true`.
-
-
-
-{% meta height:130 %}
-{% embed_file rating/readonly/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the RatingProps]({% slug api_inputs_ratingprops %})

package/docs/rating/functionality-and-features/selection.md

@@ -1,23 +0,0 @@
----
-title: Selection
-description: "Sets the selection mode of the KendoReact Rating in React projects."
-slug: selection_rating
-position: 0
----
-
-# Selection Mode
-
-By default, the Rating selection is set to `continues`.
-
-To change the component selection, set its [`selection`]({% slug api_inputs_ratingprops %}#toc-selection) property to `single`. Setting the `single` selection value allow to the user to select only one icon - the selection is no longer `continues`.
-
-
-
-{% meta height:260 %}
-{% embed_file rating/selection/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the RatingProps]({% slug api_inputs_ratingprops %})

package/docs/rating/index.md

@@ -1,45 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact Rating delivers and use the component in React projects."
-slug: overview_rating
-position: 0
----
-
-# KendoReact Rating Overview
-
-The KendoReact Rating component enables the user to increase, decrease, and select predefined values by clicking it's icons along or using the arrow keys.
-
-The KendoReact Rating component is part of the KendoReact library of React UI components. It is distributed through NPM under the [kendo-react-inputs NPM package](https://www.npmjs.com/package/@progress/kendo-react-inputs).
-
-<div data-component="StartFreeTrialSection"></div>
-
-
-The following example demonstrates the Rating in action.
-
-{% meta height:100 %}
-{% embed_file rating/overview/func/main.tsx preview %}
-{% endmeta %}
-
-
->The Rating 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 Rating and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Selection]({% slug selection_rating %})&mdash;The Rating allows you to configure it for continuous or single selection mode.
-* [Precision]({% slug precision_rating %})&mdash;You can configure the Rating and allow it to render half-full items.
-* [Label]({% slug label_rating %})&mdash;The Rating allows you to use a custom string as a label.
-* [Icon]({% slug icon_rating %})&mdash;The Rating allows you to change the default icon.
-* [Readonly]({% slug readonly_rating %})&mdash;You can override the default active state of the Rating.
-* [Disabled]({% slug disabled_rating %})&mdash;You can render a disabled Rating and keep it disabled until certain requirements are met.
-* [Controlled mode]({% slug controlled_rating %})&mdash;Take advantage of the built-in options that allow you to control the value of the Rating.
-* [Forms Support]({% slug forms_support_rating %})&mdash;You can easily integrate the Rating 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.
-* [Rating Item customization]({% slug item_customization_ratingitem %})&mdash;You can use the RatingItem component to customize the appearance of the Rating or to completely transform the RatingItem children.
-* [Keyboard navigation]({% slug keyboard_navigation_rating %})&mdash;The Rating supports numerous keyboard shortcuts that allow users to interact with the component.
-* [Accessibility]({% slug accessibility_rating %})&mdash;The Rating 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 Rating Component]({% slug api_inputs_rating %})
-* [React Rating High-Level Overview](https://www.telerik.com/kendo-react-ui/rating/)

package/docs/rating/item_custamization.md

@@ -1,45 +0,0 @@
----
-title: RatingItem customization
-description: "Get an overview of the features the KendoReact RatingItem delivers and use the component in React projects."
-slug: item_customization_ratingitem
-position: 3
----
-
-# RatingItem and Rating component
-
-The KendoReact RatingItem enables the user to implement different styles for the RatingItem children.
-
-## RatingItem customization
-
-The RatingItem component could be used for customization of the existing rating item. The following example demonstrates the RatingItem in action, changing the icon visualization to `k-i-heart` icon, based on the existing RatingItem rendering.
-
-
-
-{% meta height:130 %}
-{% embed_file rating/rating-item/overview/func/main.tsx preview %}
-{% endmeta %}
-
-
-## RatingItem override
-
-The RatingItem look can be also completely changed and override the existing RatingItem rendering. The following example uses new custom rendering for the RatingItem - overwriting the old look. It also sets new custom labels.
-
-
-
-{% meta height:130 %}
-{% variant title:Hooks %}
-{% embed_file rating/rating-item/advanced/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file rating/rating-item/advanced/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-
-## Suggested Links
-
-* [Rating icon prop]({% slug icon_rating %})
-* [KendoReact Icons Article](https://www.telerik.com/kendo-react-ui-develop/components/styling/icons/)
-* [API Reference of the Rating props]({% slug api_inputs_ratingprops %})
-* [API Reference of the Rating Component]({% slug api_inputs_rating %})

package/docs/rating/keyboard-navigation.md

@@ -1,33 +0,0 @@
----
-title: Keyboard Navigation
-description: "Use the KendoReact Rating keyboard navigation in React projects."
-slug: keyboard_navigation_rating
-position: 4
----
-
-# Keyboard Navigation
-
-The keyboard navigation of the Rating is always available.
-
-The Rating supports the following keyboard shortcuts:
-
-| SHORTCUT           | DESCRIPTION         |
-|:---                |:---                 |
-| `Right Arrow`      | Increases the Rating value with the predefined step or step/2 if the precision is set to `half`. |
-| `Left Arrow`       | Decreases the Rating value with the predefined step or step/2 if the precision is set to `half`. |
-| `Home`             | Sets the Rating to its maximum value.                                                            |
-| `End`              | Sets the Rating value to its minimum value.                                                      |
-| `Esc`              | Deselect the currently selected value.                                                           |
-
-
-
-{% meta height:100 %}
-{% embed_file rating/navigation/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the Rating Component]({% slug api_inputs_rating %})
-* [API Reference of the Rating props]({% slug api_inputs_ratingprops %})
-* [Accessibility ]({% slug accessibility_rating %})

package/docs/signature/_meta.yml

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