@progress/kendo-react-inputs 5.6.0-next.202208151055 → 5.6.0-next.202208310638

package/dist/npm/main.d.ts

@@ -50,3 +50,9 @@ export * from './textarea/interfaces/TextAreaFocusEvent';
 export * from './rating/Rating';
 export * from './rating/RatingItem';
 export * from './rating/models/index';
+export { TextBox, TextBoxProps, TextBoxHandle, TextBoxChangeEvent } from './textbox/Textbox';
+export { InputClearValue, InputClearValueProps, InputClearValueHandle } from './input/InputClearValue';
+export { InputPrefix, InputPrefixProps, InputPrefixHandle } from './input/InputPrefix';
+export { InputSeparator, InputSeparatorProps, InputSeparatorHandle } from './input/InputSeparator';
+export { InputSuffix, InputSuffixProps, InputSuffixHandle } from './input/InputSuffix';
+export { InputValidationIcon, InputValidationIconProps, InputValidationIconHandle } from './input/InputValidationIcon';

package/dist/npm/main.js

@@ -14,7 +14,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SwitchPropsContext = exports.Switch = exports.SliderPropsContext = exports.Slider = exports.MaskedTextBoxPropsContext = exports.MaskedTextBox = exports.InputPropsContext = exports.Input = exports.ColorPalettePropsContext = exports.ColorPalette = exports.ColorGradientPropsContext = exports.ColorGradient = void 0;
+exports.InputValidationIcon = exports.InputSuffix = exports.InputSeparator = exports.InputPrefix = exports.InputClearValue = exports.TextBox = exports.SwitchPropsContext = exports.Switch = exports.SliderPropsContext = exports.Slider = exports.MaskedTextBoxPropsContext = exports.MaskedTextBox = exports.InputPropsContext = exports.Input = exports.ColorPalettePropsContext = exports.ColorPalette = exports.ColorGradientPropsContext = exports.ColorGradient = void 0;
 var ColorGradient_1 = require("./colors/ColorGradient");
 Object.defineProperty(exports, "ColorGradient", { enumerable: true, get: function () { return ColorGradient_1.ColorGradient; } });
 Object.defineProperty(exports, "ColorGradientPropsContext", { enumerable: true, get: function () { return ColorGradient_1.ColorGradientPropsContext; } });
@@ -75,3 +75,15 @@ __exportStar(require("./textarea/interfaces/TextAreaFocusEvent"), exports);
 __exportStar(require("./rating/Rating"), exports);
 __exportStar(require("./rating/RatingItem"), exports);
 __exportStar(require("./rating/models/index"), exports);
+var Textbox_1 = require("./textbox/Textbox");
+Object.defineProperty(exports, "TextBox", { enumerable: true, get: function () { return Textbox_1.TextBox; } });
+var InputClearValue_1 = require("./input/InputClearValue");
+Object.defineProperty(exports, "InputClearValue", { enumerable: true, get: function () { return InputClearValue_1.InputClearValue; } });
+var InputPrefix_1 = require("./input/InputPrefix");
+Object.defineProperty(exports, "InputPrefix", { enumerable: true, get: function () { return InputPrefix_1.InputPrefix; } });
+var InputSeparator_1 = require("./input/InputSeparator");
+Object.defineProperty(exports, "InputSeparator", { enumerable: true, get: function () { return InputSeparator_1.InputSeparator; } });
+var InputSuffix_1 = require("./input/InputSuffix");
+Object.defineProperty(exports, "InputSuffix", { enumerable: true, get: function () { return InputSuffix_1.InputSuffix; } });
+var InputValidationIcon_1 = require("./input/InputValidationIcon");
+Object.defineProperty(exports, "InputValidationIcon", { enumerable: true, get: function () { return InputValidationIcon_1.InputValidationIcon; } });

package/dist/npm/package-metadata.js

@@ -8,7 +8,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-inputs',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1660559919,
+    publishDate: 1661926871,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/radiobutton/RadioGroup.js

@@ -77,7 +77,7 @@ exports.RadioGroup = React.forwardRef(function (directProps, target) {
                 : (noOptionChecked && index === 0) || isCurrentlyChecked
                     ? 0
                     : -1, index: index, name: name || radioGroupName, onChange: handleChange, onFocus: handleFocus });
-        return (React.createElement(Item, { className: (0, kendo_react_common_1.classNames)('k-radio-item', { 'k-disabled': radioButtonProps.disabled || disabled }), key: index, role: 'radio' },
+        return (React.createElement(Item, { className: (0, kendo_react_common_1.classNames)('k-radio-item', { 'k-disabled': radioButtonProps.disabled || disabled }), key: index, role: 'none' },
             React.createElement(RadioButton_1.RadioButton, __assign({}, radioButtonProps))));
     }));
     return (React.createElement("ul", { role: "radiogroup", className: radioGroupClasses, ref: elementRef, dir: dir, style: style, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy }, radioOptions));

package/dist/npm/textbox/Textbox.d.ts

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { BaseEvent, CustomComponent } from '@progress/kendo-react-common';
+export interface TextBoxChangeEvent extends BaseEvent<TextBoxHandle> {
+    syntheticEvent: React.ChangeEvent<HTMLInputElement>;
+    value: React.InputHTMLAttributes<HTMLInputElement>['value'];
+}
+/**
+ * Represents the properties of the KendoReact [TextBox]({% slug api_inputs_textbox %}) component
+ */
+export interface TextBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'onChange'> {
+    /**
+     * Configures the `size` of the TextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - null&mdash;Does not set a size `className`.
+     *
+     * @default `medium`
+     */
+    size?: null | 'small' | 'medium' | 'large';
+    /**
+     * Configures the `roundness` of the TextBox.
+     *
+     * The available options are:
+     * - small
+     * - medium
+     * - large
+     * - full
+     * - null&mdash;Does not set a rounded `className`.
+     *
+     * @default `medium`
+     */
+    rounded?: null | 'small' | 'medium' | 'large' | 'full';
+    /**
+     * Configures the `fillMode` of the TextBox.
+     *
+     * The available options are:
+     * - solid
+     * - outline
+     * - flat
+     * - null&mdash;Does not set a fillMode `className`.
+     *
+     * @default `solid`
+     */
+    fillMode?: null | 'solid' | 'flat' | 'outline';
+    /**
+     * The `onChange` callback of the `input` element inside the TextBox.
+     */
+    onChange?: (event: TextBoxChangeEvent) => void;
+    /**
+     * Indicates if the component is in `valid` state
+     */
+    valid?: boolean;
+    prefix?: CustomComponent<any>;
+    suffix?: CustomComponent<any>;
+}
+/**
+ * Represent the `ref` of the TextBox component.
+ */
+export declare type TextBoxHandle = {
+    element: HTMLInputElement | null;
+    value: TextBoxProps['value'];
+};
+/**
+ * Represents the [KendoReact TextBox component]({% slug overview_textbox %}).
+ */
+export declare const TextBox: React.ForwardRefExoticComponent<TextBoxProps & React.RefAttributes<TextBoxHandle | null>>;

package/dist/npm/textbox/Textbox.js

@@ -0,0 +1,114 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextBox = void 0;
+var React = require("react");
+var PropTypes = require("prop-types");
+var kendo_react_common_1 = require("@progress/kendo-react-common");
+var package_metadata_1 = require("../package-metadata");
+;
+/**
+ * Represents the [KendoReact TextBox component]({% slug overview_textbox %}).
+ */
+exports.TextBox = React.forwardRef(function (props, ref) {
+    var _a;
+    (0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
+    var element = React.useRef(null);
+    var target = React.useRef(null);
+    var valueDuringChangeRef = React.useRef();
+    var valueGetter = React.useCallback(function () {
+        var _a;
+        if (valueDuringChangeRef.current !== undefined) {
+            return valueDuringChangeRef.current;
+        }
+        else {
+            return (_a = element.current) === null || _a === void 0 ? void 0 : _a.value;
+        }
+    }, []);
+    React.useImperativeHandle(target, function () {
+        var result = {
+            element: element.current
+        };
+        Object.defineProperty(result, 'value', { get: valueGetter });
+        return result;
+    });
+    React.useImperativeHandle(ref, function () { return target.current; });
+    var _b = props, size = _b.size, fillMode = _b.fillMode, rounded = _b.rounded, className = _b.className, dir = _b.dir, style = _b.style, _c = _b.prefix, prefix = _c === void 0 ? defaultProps.prefix : _c, _d = _b.suffix, suffix = _d === void 0 ? defaultProps.suffix : _d, valid = _b.valid, 
+    // Destruct to avoid warning when used inside a form field
+    _modified = _b.modified, _touched = _b.touched, _visited = _b.visited, other = __rest(_b, ["size", "fillMode", "rounded", "className", "dir", "style", "prefix", "suffix", "valid", "modified", "touched", "visited"]);
+    var Prefix = (0, kendo_react_common_1.useCustomComponent)(prefix)[0];
+    var Suffix = (0, kendo_react_common_1.useCustomComponent)(suffix)[0];
+    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
+    var handleFocus = function (_) {
+        setFocused(true);
+    };
+    var handleBlur = function (_) {
+        setFocused(false);
+    };
+    var handleChange = React.useCallback(function (event) {
+        valueDuringChangeRef.current = event.target.value;
+        if (props.onChange) {
+            props.onChange.call(undefined, {
+                syntheticEvent: event,
+                nativeEvent: event.nativeEvent,
+                value: event.target.value,
+                target: target.current
+            });
+        }
+        valueDuringChangeRef.current = undefined;
+    }, [props.onChange]);
+    var _f = (0, kendo_react_common_1.useAsyncFocusBlur)({
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onSyncFocus: props.onFocus,
+        onSyncBlur: props.onBlur
+    }), onFocus = _f.onFocus, onBlur = _f.onBlur;
+    return (React.createElement("span", { style: style, dir: dir, className: (0, kendo_react_common_1.classNames)('k-input', (_a = {},
+            _a["k-input-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
+            _a["k-input-".concat(fillMode)] = fillMode,
+            _a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
+            _a), {
+            'k-focus': focused,
+            'k-required': props.required,
+            'k-disabled': props.disabled,
+            'k-invalid': props.valid === false
+        }, className), onFocus: onFocus, onBlur: onBlur },
+        React.createElement(Prefix, null),
+        React.createElement("input", __assign({ ref: element, className: "k-input-inner" }, other, { onChange: handleChange })),
+        React.createElement(Suffix, null)));
+});
+var defaultProps = {
+    prefix: function (_) { return null; },
+    suffix: function (_) { return null; },
+    size: 'medium',
+    rounded: 'medium',
+    fillMode: 'solid'
+};
+exports.TextBox.propTypes = {
+    size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
+    rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
+    fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
+};
+exports.TextBox.displayName = 'KendoReactTextBoxComponent';
+exports.TextBox.defaultProps = defaultProps;