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

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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,30 @@
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,30 @@
+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')
+);