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

package/docs/colorpalette/index.md

@@ -1,47 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact ColorPalette delivers and use the component in React projects."
-slug: overview_colorpalette
-position: 1
----
-
-# KendoReact ColorPalette Overview
-
-The KendoReact ColorPalette renders colors by using sets of predefined colors (color presets) or by implementing a custom color palette.
-
-The KendoReact ColorPalette 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 ColorPalette in action.
-
-
-
-{% meta height:550 %}
-{% variant title:Hooks %}
-{% embed_file colorpalette/overview/basic/func/main.tsx preview %}
-{% embed_file colorpalette/overview/basic/func/styles.css %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorpalette/overview/basic/class/main.tsx preview %}
-{% embed_file colorpalette/overview/basic/class/styles.css %}
-{% endvariant %}
-{% endmeta %}
-
->The ColorPalette 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 ColorPalette and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Disabled ColorPalette]({% slug disabled_colorpalette %})&mdash;You can render a disabled ColorPalette by setting a single property and keep it disabled until certain requirements are met.
-* [Controlled mode]({% slug controlled_colorpalette %})&mdash;Take advantage of the built-in options that allow you to control the value of the ColorPalette.
-* [Color presets]({% slug presets_colorpalette %})&mdash;The ColorPalette provides a set of ready-to-use color presets.
-* [Custom ColorPalette]({% slug custom_colorpalette %})&mdash;You can customize the rendering of the ColorPalette by specifying the number of its columns and tile size.
-* [Keyboard navigation]({% slug keyboard_navigation_colorpalette %})&mdash; The ColorPalette supports keyboard shortcuts that allow the users to interact with the component.
-* [Events]({% slug events_colorpalette %})&mdash;To tailor the behavior of the ColorPalette to your specific requirements, handle the events that the control generates.
-
-## 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 ColorPalette]({% slug api_inputs_colorpalette %})
-* [React ColorPalette High-Level Overview](https://www.telerik.com/kendo-react-ui/colorpalette/)

package/docs/colorpalette/keyboard-navigation.md

@@ -1,36 +0,0 @@
----
-title: Keyboard Navigation
-description: "Use the KendoReact ColorPalette keyboard navigation in React projects."
-slug: keyboard_navigation_colorpalette
-position: 60
----
-
-# Keyboard Navigation
-
-By default, the keyboard navigation of the ColorPalette is enabled.
-
-The ColorPalette supports the following keyboard shortcuts:
-
-| Shortcut                            | Description         |
-|:---                                 |:---                 |
-| `Down Arrow`                        | Moves down the selection. |
-| `Up Arrow`                          | Moves up the selection. |
-| `Left Arrow`                        | Moves the selection to the left.  |
-| `Right Arrow`                       | Moves the selection to the right.  |
-| `Enter`                             | Changes the color to the selected one.  |
-
-
-
-{% meta height:350 %}
-{% variant title:Hooks %}
-{% embed_file colorpalette/keyboard/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorpalette/keyboard/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the ColorPalette]({% slug api_inputs_colorpalette %})

package/docs/colorpalette/presets.md

@@ -1,23 +0,0 @@
----
-title: ColorPalette Presets
-description: "Use and implement the available color presets in the KendoReact ColorPalette in React projects."
-slug: presets_colorpalette
-position: 4
----
-
-# Color Presets
-
-The ColorPalette provides a set of predefined color palettes such as `office`, `basic`, and `apex`.
-
-The following example demonstrates how to use the predefined color presets of the ColorPalette.
-
-
-
-{% meta height:600 %}
-{% embed_file colorpalette/presets/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the ColorPalette]({% slug api_inputs_colorpalette %})

package/docs/colorpicker/_meta.yml

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

package/docs/colorpicker/appearance.md

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

package/docs/colorpicker/color-contrast.md

@@ -1,33 +0,0 @@
----
-title: Color Contrast Tool
-description: "Use the KendoReact ColorPicker to check the color contrast of two colors in React projects."
-slug: colorcontrast_colorpicker
-position: 6
----
-
-# Color Contrast Tool
-
-The ColorPicker 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, use the [`gradientSettings`]({% slug api_inputs_colorpickergradientsettings %}) configuration and set its [`backgroundColor`]({% slug api_inputs_colorpickergradientsettings %}#toc-backgroundColor) property.
-
-The following example demonstrates how to display the Color Contrast tool in the ColorPicker gradient popup.
-
-{% meta height:550 %}
-{% variant title:Hooks %}
-{% embed_file colorpicker/colorcontrast/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorpicker/colorcontrast/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the ColorPicker]({% slug api_inputs_colorpickerprops %})

package/docs/colorpicker/combined-views.md

@@ -1,46 +0,0 @@
----
-title: Views
-description: "Customize the view options of the KendoReact ColorPicker in React projects."
-slug: combinedview_colorpicker
-position: 5
----
-
-# Views
-
-The ColorPicker provides options for [configuring its popup view](#toc-configuring-popup-view) and [implementing combined views](#toc-implementing-combined-views).
-
-## Configuring Popup View
-
-You can configure the ColorPicker to render either a [ColorGradient]({% slug api_inputs_colorgradient %}) or a [ColorPalette]({% slug api_inputs_colorpalette %}) in its popup. To choose between the two, provide either `gradient` or `palette` to the [`view`]({% slug api_inputs_colorpickerprops %}#toc-view) input property of the component. By default, the ColorPicker uses the `palette` view.
-
-
-
-{% meta height:550 %}
-{% variant title:Hooks %}
-{% embed_file colorpicker/view/popup/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorpicker/view/popup/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Implementing Combined Views
-
-To set a combined view and render both the ColorPalette and ColorGradient in the popup of the ColorPicker, set the [`view`]({% slug api_inputs_colorpickerprops %}#toc-view) property to `combo`.
-
-
-
-{% meta height:580 %}
-{% variant title:Hooks %}
-{% embed_file colorpicker/view/combined/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorpicker/view/combined/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the ColorPicker]({% slug api_inputs_colorpickerprops %})

package/docs/colorpicker/controlled.md

@@ -1,57 +0,0 @@
----
-title: Controlled Mode
-description: "Control the value of the KendoReact ColorPicker in React projects."
-slug: controlled_colorpicker
-position: 3
----
-
-# Controlled Mode
-
-By default, the ColorPicker is in an uncontrolled state.
-
-The ColorPicker provides options for:
-
-* [Controlling its value](#toc-controlling-the-value)
-* [Controlling its popup state](#toc-controlling-the-popup-state)
-
-## Controlling the Value
-
-To manage the value of the ColorPicker:
-
-1. Use its [`value`]({% slug api_inputs_colorpickerprops %}#toc-value) property.
-1. Handle the [`onChange`]({% slug api_inputs_colorpickerprops %}#toc-onchange) event.
-1. Pass the new value through the props.
-
-
-
-{% meta height:300 %}
-{% variant title:Hooks %}
-{% embed_file colorpicker/controlled/value/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorpicker/controlled/value/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Controlling the Popup State
-
-To manage the popup and set the open state of the ColorPicker, use its [`open`]({% slug api_inputs_colorpickerprops %}#toc-open) property.
-
-The following example demonstrates how to control the state of the ColorPicker upon display.
-
-
-
-{% meta height:300 %}
-{% variant title:Hooks %}
-{% embed_file colorpicker/controlled/popup/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorpicker/controlled/popup/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Suggested Links
-
-* [API Reference of the ColorPicker]({% slug api_inputs_colorpickerprops %})

package/docs/colorpicker/custom.md

@@ -1,67 +0,0 @@
----
-title: Custom ColorPicker
-description: "Customize the rendering, columns, tile sizes, and color palettes of the KendoReact ColorPicker in React projects."
-slug: customizecolorpicker_colorpicker
-position: 7
----
-
-# Custom ColorPicker
-
-The ColorPicker enables you to customize its appearance.
-
-The component supports the following options:
-* [Customizing the palette popup](#toc-customizing-the-palette-popup)
-* [Customizing the gradient popup](#toc-customizing-the-gradient-popup)
-* [Displaying KendoReact icons in the button](#toc-displaying-kendo-ui-icons)
-* [Displaying custom icons in the button](#toc-displaying-custom-icons)
-
-## Customizing the Palette Popup
-
-To specify the rendering, columns, and tile sizes of the ColorPicker, and to customize the color formats of its palette, use the [`paletteSettings`]({% slug api_inputs_colorpickerpalettesettings %}) option.
-
-
-
-{% meta height:300 %}
-{% embed_file colorpicker/custom/palette/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Customizing the Gradient Popup
-
-To customize the gradient options of the ColorPicker, use the [`gradientSettings`]({% slug api_inputs_colorpickergradientsettings %}) configuration.
-
-The following example demonstrates how to specify if the opacity slider of the ColorGradient will be displayed.
-
-
-
-{% meta height:400 %}
-{% embed_file colorpicker/custom/gradient/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Displaying KendoReact Icons
-
-To display an [existing KendoReact icon]({% slug icons %}) in the ColorPicker button, provide the name of that icon without the `k-icon` class and the `k-i-` prefix to the `icon` property of the component. For example, instead of `k-icon k-i-edit-tools`, add `edit-tools`.
-
-
-
-{% meta height:400 %}
-{% embed_file colorpicker/custom/kendo-icons/func/main.tsx preview %}
-{% endmeta %}
-
-
-## Displaying Custom Icons
-
-To display a custom icon in the ColorPicker button, provide the full CSS class name of the icon to the [`iconClassName`]({% slug api_inputs_colorpickerprops %}#toc-iconclassname) property of the component.
-
-
-
-{% meta height:400 %}
-{% embed_file colorpicker/custom/custom-icons/func/main.tsx preview %}
-{% endmeta %}
-
-
-
-## Suggested Links
-
-* [API Reference of the ColorPicker]({% slug api_inputs_colorpickerprops %})

package/docs/colorpicker/default-value.md

@@ -1,20 +0,0 @@
----
-title: Default Value
-description: "Set the default value of the KendoReact ColorPicker in React projects."
-slug: default_value_colorpicker
-position: 4
----
-
-# Default Value
-
-By default, the ColorPicker value is not set and the popup is hidden.
-
-To set the initial value that is rendered by the ColorPicker, set the [`defaultValue`]({% slug api_inputs_colorpickerprops %}#toc-defaultvalue) property. As a result, the component displays a value upon its initial render while remaining in an uncontrolled state.
-
-{% meta %}
-{% embed_file colorpicker/default/func/main.tsx preview %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the ColorPicker]({% slug api_inputs_colorpickerprops %})

package/docs/colorpicker/disabled.md

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

package/docs/colorpicker/index.md

@@ -1,41 +0,0 @@
----
-title: Overview
-description: "Get an overview of the features the KendoReact ColorPicker delivers and use the component in React projects."
-slug: overview_colorpicker
-position: 1
----
-
-# KendoReact ColorPicker Overview
-
-The ColorPicker enables the user to select and submit color values.
-
-The ColorPicker is designed to replace the `<input type="color">` HTML5 tag which is not widely supported in browsers.
-
-<div data-component="StartFreeTrialSection"></div>
-
-
-The following example demonstrates the ColorPicker with the [`palette`]({% slug api_inputs_colorpickerprops %}#toc-view) and with [`gradient`]({% slug api_inputs_colorpickerprops %}#toc-view) popup view in action.
-
-
-
-{% meta height:450 %}
-{% embed_file colorpicker/overview/func/main.tsx preview %}
-{% endmeta %}
-
->The ColorPicker 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 ColorPicker and the rest of the components in the package, see the [Getting Started with the KendoReact Inputs]({% slug getstarted_inputs %}) guide.
-
-## Key Features
-
-* [Disabled ColorPicker]({% slug disabled_colorpicker %})&mdash;You can render a disabled ColorPicker and keep it disabled until certain requirements are met.
-* [Controlled mode]({% slug controlled_colorpicker %})&mdash;Take advantage of the built-in options that allow you to control the value of the ColorPicker.
-* [Default value]({% slug default_value_colorpicker %})&mdash;You can set an initial value for the ColorPicker.
-* [Views]({% slug combinedview_colorpicker %})&mdash;You can configure the ColorPicker to render a color gradient, a color palette, or a combination of both.
-* [Custom ColorPicker]({% slug customizecolorpicker_colorpicker %})&mdash;The built-in appearance customization options allow you to adjust the palette and gradient popup to your specific requirements.
-* [Keyboard navigation]({% slug keyboard_navigation_colorpicker %})&mdash;The ColorPicker supports numerous keyboard shortcuts that allow users to interact with the component.
-
-## 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 ColorPicker]({% slug api_inputs_colorpickerprops %})
-* [React ColorPicker High-Level Overview](https://www.telerik.com/kendo-react-ui/colorpicker/)

package/docs/colorpicker/keyboard-navigation.md

@@ -1,39 +0,0 @@
----
-title: Keyboard Navigation
-description: "Use the KendoReact ColorPicker keyboard navigation in React projects."
-slug: keyboard_navigation_colorpicker
-position: 60
----
-
-# Keyboard Navigation
-
-By default, the keyboard navigation of the ColorPicker is enabled.
-
-The ColorPicker supports the following keyboard shortcuts:
-
-| Shortcut                            | Description         |
-|:---                                 |:---                 |
-| `Alt`+`Down Arrow`                  | Opens the popup and moves the focus to the ColorGradient or ColorPalette. |
-| `Alt`+`Up Arrow`                    | Closes the popup and moves the focus to the `input` element. |
-| `Enter`                             | Closes the popup and moves the focus to the `input` element. |
-| `Esc`                               | Closes the popup and moves the focus to the `input` element. |
-
-
-
-{% meta height:400 %}
-{% variant title:Hooks %}
-{% embed_file colorpicker/keyboard/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file colorpicker/keyboard/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-
-## Navigation Scenarios
-
-When the popup of the ColorPicker is opened, it adopts the same keyboard shortcuts as the keyboard shortcuts of the [ColorPalette]({% slug keyboard_navigation_colorpalette %}) and [ColorGradient]({% slug overview_colorgradient %}).
-
-## Suggested Links
-
-* [API Reference of the ColorPicker]({% slug api_inputs_colorpickerprops %})

package/docs/custom-attributes.md

@@ -1,27 +0,0 @@
----
-title: Custom attributes
-description: "Implement custom attributes in the KendoReact Inputs components."
-slug: custom_attr_inputs
-position: 19
----
-
-# Custom Attributes
-
-The following code demonstrates how to add another [attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes) to any of the input components. The first step is to implement the ref of the component. Having the ref, use the `setAttribute` functionality on it and add the desired attribute and value.
-
-The example includes adding `form` attribute in the Input, Rating and RangeSlider components.
-
-{% meta height:250 %}
-{% variant title:Hooks %}
-{% embed_file attribute/func/main.tsx preview %}
-{% endvariant %}
-{% variant title:Classes %}
-{% embed_file attribute/class/main.tsx preview %}
-{% endvariant %}
-{% endmeta %}
-
-## Suggested Links
-
-* [API Reference of the Input Component]({% slug api_inputs_inputprops %})
-* [Get Started with the Rating]({% slug overview_rating %})
-* [Get Started with the RangeSlider]({% slug overview_rangeslider %})

package/docs/examples/attribute/class/main.tsx

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { Input, Rating, RangeSlider } from '@progress/kendo-react-inputs';
-
-class App extends React.Component {
-  render() {
-    return (
-      <div className="row">
-        <div className="m-2">
-          <p>Input</p>
-          <Input
-            ref={(el) => el && el.element ? el.element.setAttribute('form', 'myForm') : el}
-            id={'input-id'}
-            />
-        </div>
-        <div className="m-2">
-          <p>Rating</p>
-          <Rating
-            ref={(el) => el && el.element ? el.element.setAttribute('form', 'myForm') : el}
-            id={'rating-id'}
-            defaultValue={3}
-            />
-        </div>
-        <div className="m-2">
-          <p>RangeSlider</p>
-          <RangeSlider
-            ref={(el) => el && el.element ? el.element.setAttribute('form', 'myForm') : el}
-            id={'range-slider-id'}
-            defaultValue={{start: 30, end: 70}}
-            step={1}
-            min={0}
-            max={100}
-            />
-        </div>
-      </div >
-    );
-  }
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

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

@@ -1,58 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { Input, Rating, RangeSlider, RatingHandle, RangeSliderHandle } from '@progress/kendo-react-inputs';
-
-const setAttribute = (componentRef: React.RefObject<any>, attr: string, value: string) => {
-  if (componentRef && componentRef.current && componentRef.current.element) {
-    componentRef.current.element. setAttribute(`${attr}`, `${value}`);
-  }
-}
-
-const App = () => {
-    const inputRef  = React.useRef<Input>(null);
-    const ratingRef = React.useRef<RatingHandle>(null);
-    const sliderRef = React.useRef<RangeSliderHandle>(null);
-
-    React.useEffect(() => {
-      setAttribute(inputRef, 'form', 'inputForm');
-      setAttribute(ratingRef, 'form', 'ratingForm');
-      setAttribute(sliderRef, 'form', 'sliderForm');
-    });
-
-    return (
-      <div className="row">
-        <div className="m-2">
-          <p>Input</p>
-          <Input
-            ref={inputRef}
-            id={'input-id'}
-            />
-        </div>
-        <div className="m-2">
-          <p>Rating</p>
-          <Rating
-            ref={ratingRef}
-            id={'rating-id'}
-            defaultValue={3}
-            />
-        </div>
-        <div className="m-2">
-          <p>RangeSlider</p>
-          <RangeSlider
-            ref={sliderRef}
-            id={'range-slider-id'}
-            defaultValue={{start: 30, end: 70}}
-            step={1}
-            min={0}
-            max={100}
-            />
-        </div>
-      </div >
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/checkbox/appearance/func/main.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { Checkbox } from '@progress/kendo-react-inputs';
-
-import { CheckboxStyleConfigurator } from './checkbox-style-configurator';
-
-const App = () => {
-    const [size, setSize] = React.useState<'small' | 'medium' | 'large'>('medium');
-    const [rounded, setRounded] = React.useState<'small' | 'medium' | 'large'>('medium');
-
-    return (
-      <div>
-        <CheckboxStyleConfigurator
-          size={size}
-          onSizeChange={setSize}
-
-          rounded={rounded}
-          onRoundedChange={setRounded}
-        />
-        <Checkbox
-          size={size}
-          rounded={rounded}
-          label="Checkbox appearance"
-        />
-      </div>
-    )
-}
-
-ReactDOM.render(
-  <App />,
-  document.querySelector('my-app')
-);

package/docs/examples/checkbox/controlled/checked/class/main.tsx

@@ -1,32 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { Checkbox, CheckboxChangeEvent } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  checked: boolean
-}
-
-class App extends React.Component {
-  state: AppState = {
-    checked: true
-  }
-
-  render() {
-    return (
-      <div className={'k-d-flex k-align-items-center'}>
-        <button className={'k-button k-button-md k-rounded-md k-button-solid k-button-solid-base k-mr-4'} onClick={this.handleClick}>Change state</button>
-        <Checkbox checked={this.state.checked} onChange={this.handleChange} label={'Controlled checked'} />
-      </div>
-    );
-  }
-
-  handleClick = () => this.setState({ checked: !this.state.checked });
-
-  handleChange = (event: CheckboxChangeEvent) =>  this.setState({ checked: event.value });
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);