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

package/docs/examples/colorpicker/controlled/popup/func/main.tsx

@@ -1,31 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [open, setOpen] = React.useState<boolean>(false);
-
-    const handleOnClick = () => setOpen(!open);
-
-    return (
-      <div className="row">
-        <div className="col-xs-12 col-md-6 example-col">
-          <p>Controlled ColorPicker</p>
-          <ColorPicker open={open} />&nbsp;
-          <button className="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" onClick={handleOnClick}>Toggle</button>
-        </div>
-        <div className="col-xs-12 col-md-6 example-col">
-          <p>Always shown</p>
-          <ColorPicker
-            open={true}
-                />
-        </div>
-      </div>
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/controlled/value/class/main.tsx

@@ -1,25 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker, ColorPickerChangeEvent } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  value: string
-}
-
-class App extends React.Component {
-  state: AppState = {
-    value: 'rgba(237, 126, 50, 1)'
-  };
-
-  render() {
-    return <ColorPicker value={this.state.value} onChange={this.onChange} />;
-  }
-
-  onChange = (event: ColorPickerChangeEvent) => this.setState({ value: event.value });
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/controlled/value/func/main.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker, ColorPickerChangeEvent } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [value, setValue] = React.useState('rgba(237, 126, 50, 1)');
-
-    const handleOnChange = (event: ColorPickerChangeEvent) => setValue(event.value);
-
-    return <ColorPicker value={value} onChange={handleOnChange} />;
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/custom/custom-icons/func/main.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    return (
-      <ColorPicker
-        view={'gradient'}
-        iconClassName={'k-icon k-i-edit-tools'}
-        />
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/custom/gradient/func/main.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const selectedColor: string = 'rgba(237, 126, 50, 1)';
-    const gradientSettings: {opacity: boolean} = {
-        opacity: false
-    };
-
-    return (
-      <ColorPicker
-        defaultValue={selectedColor}
-        view={'gradient'}
-        gradientSettings={gradientSettings}
-        />
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/custom/kendo-icons/func/main.tsx

@@ -1,18 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    return (
-      <ColorPicker
-        view={'gradient'}
-        icon={'edit-tools'}
-        />
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/custom/palette/func/main.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const selectedColor = 'rgba(237, 126, 50, 1)';
-    const paletteSettings= {
-        palette: [
-            "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
-            "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
-            "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
-            "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
-            "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
-        ],
-        columns: 5,
-        tileSize: 30
-    };
-    
-    return (
-      <ColorPicker defaultValue={selectedColor} paletteSettings={paletteSettings} />
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/default/func/main.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const defaultValue: string = 'rgba(237, 126, 50, 1)';
-
-    return (
-      <div className="row">
-        <div className="col-xs-12 col-md-12 example-col">
-          <p>ColorPicker with default value</p>
-          <ColorPicker
-            defaultValue={defaultValue}
-          />
-        </div>
-      </div>
-    )
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/disabled/func/main.tsx

@@ -1,17 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    return (
-      <div className="example-wrapper">
-        <ColorPicker disabled={true} />
-      </div>
-    )
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/keyboard/class/main.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-class App extends React.Component {
-  value: string = 'rgba(237, 126, 50, 1)';
-  colorPicker;
-
-  componentDidMount() {
-    this.colorPicker.element.focus();
-  }
-
-  render() {
-    return (
-      <div className="example-wrapper">
-        <ColorPicker
-          ref={(colorPicker) => { this.colorPicker = colorPicker }}
-          defaultValue={this.value}
-            />
-        <p>(use Alt+<code>↓</code> to open the popup, <code>←↓↑→</code> to navigate, <code>enter</code> to select the value)</p>
-      </div>
-    )
-  }
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/keyboard/func/main.tsx

@@ -1,29 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const colorPickerRef = React.useRef<any>(null);
-    const value: string = 'rgba(237, 126, 50, 1)';
-
-    React.useEffect(() => {
-      if(colorPickerRef.current) {
-        colorPickerRef.current.focus();
-      }
-    });
-
-    return (
-      <div className="example-wrapper">
-        <ColorPicker
-          ref={colorPickerRef}
-          defaultValue={value}
-            />
-        <p>(use Alt+<code>↓</code> to open the popup, <code>←↓↑→</code> to navigate, <code>enter</code> to select the value)</p>
-      </div>
-    )
-}
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/overview/func/main.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    return (
-      <div className="row">
-        <div className="m-3">
-          <p>ColorPicker with predefined colors</p>
-          <ColorPicker view="palette" defaultValue={'rgba(237, 126, 50, 1)'} />
-        </div>
-        <div className="m-3">
-          <p>ColorPicker with gradient</p>
-          <ColorPicker view="gradient" defaultValue={'green'} />
-        </div>
-      </div >
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/view/combined/class/main.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker, ColorPickerChangeEvent } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  selectedColor: string
-}
-
-class App extends React.Component {
-  state: AppState = {
-    selectedColor: 'rgba(237, 126, 50, 1)'
-  };
-
-  render() {
-    return (
-      <div>
-        <div style={{ color: this.state.selectedColor }}>{this.state.selectedColor}</div>
-        <ColorPicker
-          view={'combo'}
-          value={this.state.selectedColor}
-          onChange={this.onChange}
-            />
-      </div>
-    )
-  }
-
-  onChange = (e: ColorPickerChangeEvent) => {
-    this.setState({
-      selectedColor: e.value
-    })
-  };
-}
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/view/combined/func/main.tsx

@@ -1,27 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker, ColorPickerChangeEvent } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [selectedColor, setSelectedColor] = React.useState<string>('rgba(237, 126, 50, 1)');
-
-    const handleOnChange = (e: ColorPickerChangeEvent) => {
-        setSelectedColor(e.value);
-    };
-
-    return (
-      <div>
-        <div style={{ color: selectedColor }}>{selectedColor}</div>
-        <ColorPicker
-          view={'combo'}
-          value={selectedColor}
-          onChange={handleOnChange}
-            />
-      </div>
-    );
-}
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/view/popup/class/main.tsx

@@ -1,66 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-interface AppState {
-  view?: any,
-  value: string
-}
-
-class App extends React.Component {
-  state: AppState = {
-    view: 'gradient',
-    value: 'rgba(237, 126, 50, 1)'
-  };
-
-  render() {
-    return (
-      <div>
-        <div className="example-config">
-          <div>
-            <input
-              type={'radio'}
-              name={'view'}
-              value={'gradient'}
-              className={'k-radio k-radio-md'}
-              id={'gradient'}
-              checked={this.state.view === 'gradient'}
-              onChange={this.onRadioChange}
-                    />
-            <label className={'k-radio-label'} htmlFor={'gradient'}>Gradient</label>
-          </div>
-          <div>
-            <input
-              type={'radio'}
-              name={'view'}
-              value={'palette'}
-              className={'k-radio k-radio-md'}
-              id={'palette'}
-              checked={this.state.view === 'palette'}
-              onChange={this.onRadioChange}
-                    />
-            <label className={'k-radio-label'} htmlFor={'palette'}>Palette</label>
-          </div>
-        </div>
-        <div>
-          <ColorPicker
-            value={this.state.value}
-            view={this.state.view}
-                />
-        </div>
-      </div>
-    )
-  }
-
-  onRadioChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    this.setState({
-      view: e.target.value
-    });
-  }
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/colorpicker/view/popup/func/main.tsx

@@ -1,55 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { ColorPicker, ColorPickerView } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    const [view, setView] = React.useState<ColorPickerView>('gradient');
-    const value: string = 'rgba(237, 126, 50, 1)';
-
-    const handleOnRadioChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setView(e.target.value);
-    }
-
-    return (
-      <div>
-        <div className="example-config">
-          <div>
-            <input
-              type={'radio'}
-              name={'view'}
-              value={'gradient'}
-              className={'k-radio k-radio-md'}
-              id={'gradient'}
-              checked={view === 'gradient'}
-              onChange={handleOnRadioChange}
-                    />
-            <label className={'k-radio-label'} htmlFor={'gradient'}>Gradient</label>
-          </div>
-          <div>
-            <input
-              type={'radio'}
-              name={'view'}
-              value={'palette'}
-              className={'k-radio k-radio-md'}
-              id={'palette'}
-              checked={view === 'palette'}
-              onChange={handleOnRadioChange}
-                    />
-            <label className={'k-radio-label'} htmlFor={'palette'}>Palette</label>
-          </div>
-        </div>
-        <div>
-          <ColorPicker
-            value={value}
-            view={view}
-          />
-        </div>
-      </div>
-    )
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/flatcolorpicker/basic/func/main.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { FlatColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    return <FlatColorPicker />;
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/flatcolorpicker/customization/footer/func/main.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { FlatColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    return <FlatColorPicker showButtons={false} />;
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/flatcolorpicker/customization/header/func/main.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { FlatColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    return <FlatColorPicker showClearButton={false} showPreview={false} />;
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/flatcolorpicker/disabled/func/main.tsx

@@ -1,13 +0,0 @@
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { FlatColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-    return <FlatColorPicker disabled={true} />;
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/get-started/func/main.tsx

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { ColorPicker } from '@progress/kendo-react-inputs';
-
-const App = () => {
-  return (
-    <div className="example-wrapper">
-      <ColorPicker view="gradient" defaultValue={'green'} />
-    </div>
-  );
-};
-
-ReactDOM.render(<App />, document.querySelector('my-app'));

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

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { IntlProvider , load, loadMessages, LocalizationProvider } from '@progress/kendo-react-intl';
-import { NumericTextBox } from '@progress/kendo-react-inputs';
-
-import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
-import currencyData from 'cldr-core/supplemental/currencyData.json';
-import esNumbers from 'cldr-numbers-full/main/es/numbers.json';
-import esCurrencies from 'cldr-numbers-full/main/es/currencies.json';
-
-load(likelySubtags , currencyData, esNumbers, esCurrencies);
-
-import esMessages from './es.json';
-loadMessages(esMessages, 'es');
-
-const App = () => {
-    return (
-      <div className="example-wrapper row">
-        <div className="col-xs-12 col-sm-6 example-col">
-          <LocalizationProvider language="es">
-            <IntlProvider locale="en">
-              <NumericTextBox
-                defaultValue={123.45}
-                format="c2"
-                        />
-            </IntlProvider>
-          </LocalizationProvider>
-        </div>
-        <div className="col-xs-12 col-sm-6 example-col">
-          <LocalizationProvider language="es">
-            <IntlProvider locale="es">
-              <NumericTextBox
-                defaultValue={123.45}
-                format="c2"
-                        />
-            </IntlProvider>
-          </LocalizationProvider>
-        </div>
-      </div>
-    );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);

package/docs/examples/input/counter/main.tsx

@@ -1,30 +0,0 @@
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-
-import { Input, InputChangeEvent } from '@progress/kendo-react-inputs';
-import { Hint } from '@progress/kendo-react-labels';
-
-const App = () => {
-  const [value, setValue] = React.useState<string>('');
-  const max: number = 20;
-
-  const handleChange = (e: InputChangeEvent) => {
-    setValue(e.value);
-  }
-
-  return (
-    <div style={{ position: 'absolute' }}>
-      <Input
-        maxLength={max}
-        value={value}
-        onChange={handleChange}
-      />
-      <Hint direction={'end'}>{value.length} / {max}</Hint>
-    </div>
-  );
-}
-
-ReactDOM.render(
-  <App />,
-    document.querySelector('my-app')
-);