@progress/kendo-react-inputs 6.1.1 → 7.0.0-develop.2

package/dist/npm/maskedtextbox/MaskedTextBox.js

@@ -1,437 +0,0 @@
-"use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MaskedTextBox = exports.MaskedTextBoxPropsContext = exports.MaskedTextBoxWithoutContext = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var masking_service_1 = require("./masking.service");
-var utils_1 = require("./utils");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_labels_1 = require("@progress/kendo-react-labels");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("../package-metadata");
-/** @hidden */
-var MaskedTextBoxWithoutContext = /** @class */ (function (_super) {
-    __extends(MaskedTextBoxWithoutContext, _super);
-    function MaskedTextBoxWithoutContext(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this.state = {};
-        _this._inputId = "k-".concat((0, kendo_react_common_1.guid)());
-        _this._service = new masking_service_1.MaskingService();
-        _this._isPasted = false;
-        _this._selection = [null, null];
-        _this._input = null;
-        /**
-         * @hidden
-         */
-        _this.focus = function () {
-            if (_this._input) {
-                _this._input.focus();
-            }
-        };
-        _this.pasteHandler = function (event) {
-            var _a = event.target, selectionStart = _a.selectionStart, selectionEnd = _a.selectionEnd;
-            if (selectionEnd === selectionStart) {
-                return;
-            }
-            _this._isPasted = true;
-            _this._selection = [selectionStart || 0, selectionEnd || 0];
-        };
-        _this.onChangeHandler = function (event) {
-            var input = event.currentTarget;
-            var value = input.value;
-            var start = _this._selection[0] || 0;
-            var end = _this._selection[1] || 0;
-            if (!_this.props.mask) {
-                _this._isPasted = false;
-                _this._selection = [null, null];
-                _this.triggerOnChange(value, event);
-                return;
-            }
-            var maskedValue = _this.value;
-            var result;
-            if (_this._isPasted) {
-                _this._isPasted = false;
-                var rightPart = maskedValue.length - end;
-                var to = value.length - rightPart;
-                result = _this._service.maskInRange(value.slice(start, to), maskedValue, start, end);
-            }
-            else {
-                result = _this._service.maskInput(value, maskedValue, input.selectionStart || 0);
-            }
-            _this._selection = [result.selection, result.selection];
-            _this.triggerOnChange(result.value, event);
-        };
-        _this.focusHandler = function (event) {
-            if (!_this.state.focused) {
-                _this.setState({ focused: true });
-                if (_this.props.onFocus) {
-                    _this.props.onFocus.call(undefined, {
-                        target: _this,
-                        syntheticEvent: event,
-                        nativeEvent: event.nativeEvent
-                    });
-                }
-            }
-        };
-        _this.blurHandler = function (event) {
-            if (_this.state.focused) {
-                _this.setState({ focused: false });
-                if (_this.props.onBlur) {
-                    _this.props.onBlur.call(undefined, {
-                        target: _this,
-                        syntheticEvent: event,
-                        nativeEvent: event.nativeEvent
-                    });
-                }
-            }
-        };
-        _this.setValidity = function () {
-            if (_this.element) {
-                _this.element.setCustomValidity(_this.validity.valid
-                    ? ''
-                    : _this.props.validationMessage || '');
-            }
-        };
-        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-        return _this;
-    }
-    Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "element", {
-        /**
-         * Gets the element of the MaskedTextBox.
-         *
-         * @return - An `HTMLInputElement`.
-         *
-         * @example
-         * ```jsx
-         * class App extends React.Component {
-         *     constructor(props) {
-         *         super(props);
-         *     }
-         *     element = null;
-         *     render() {
-         *         return (
-         *             <div>
-         *                 <MaskedTextBox
-         *                     ref={(component) =>
-         *                         this.element = component ? component.element : null}
-         *                 />
-         *                 <button onClick={() => console.log(this.element)}>console.log the element</button>
-         *             </div>
-         *         );
-         *     }
-         * }
-         *
-         * ReactDOM.render(
-         *     <App />,
-         *     document.getElementsByTagName('my-app')[0]
-         * );
-         * ```
-         */
-        get: function () {
-            return this._input;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "value", {
-        /**
-         * Gets the value with the mask of the MaskedTextBox.
-         */
-        get: function () {
-            if (this._valueDuringOnChange !== undefined) {
-                return this._valueDuringOnChange;
-            }
-            else if (this.props.value !== undefined) {
-                return this.props.value;
-            }
-            else if (this.state.value !== undefined) {
-                return this.state.value;
-            }
-            else if (this.props.defaultValue !== undefined) {
-                return this.props.defaultValue;
-            }
-            return '';
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "rawValue", {
-        /**
-         * Gets the raw value without the mask of the MaskedTextBox.
-         */
-        get: function () {
-            return this._service.rawValue(this.value);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "validity", {
-        /**
-         * Represents the validity state into which the MaskedTextBox is set.
-         */
-        get: function () {
-            var maskedValue = this.value;
-            var value = this._service.validationValue(maskedValue);
-            var customError = this.props.validationMessage !== undefined;
-            var valid = (this.props.valid !== undefined ?
-                this.props.valid : ((!this.required || !!value)) &&
-                (!this.props.maskValidation || !this.props.prompt || maskedValue.indexOf(this.props.prompt) === -1));
-            return {
-                customError: customError,
-                valid: valid,
-                valueMissing: !value
-            };
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "validityStyles", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.props.validityStyles !== undefined
-                ? this.props.validityStyles
-                : MaskedTextBoxWithoutContext.defaultProps.validityStyles;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "required", {
-        /**
-         * @hidden
-         */
-        get: function () {
-            return this.props.required !== undefined
-                ? this.props.required
-                : MaskedTextBoxWithoutContext.defaultProps.required;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "name", {
-        /**
-         * Gets the `name` property of the MaskedTextBox.
-         */
-        get: function () {
-            return this.props.name;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /**
-     * @hidden
-     */
-    MaskedTextBoxWithoutContext.prototype.componentDidUpdate = function (prevProps, prevState) {
-        if (this.element && this.state.focused && prevState.focused) {
-            var _a = this._selection, start = _a[0], end = _a[1];
-            var prevSelection = prevProps.selection;
-            var nextSelection = this.props.selection;
-            if ((!prevSelection && nextSelection) ||
-                (prevSelection && nextSelection &&
-                    (prevSelection.start !== nextSelection.start || prevSelection.end !== nextSelection.end))) {
-                start = nextSelection.start;
-                end = nextSelection.end;
-            }
-            if (start !== null && end !== null) {
-                this.element.setSelectionRange(start, end);
-            }
-        }
-        if ((0, utils_1.maskingChanged)(prevProps, this.props)) {
-            this.updateService();
-        }
-        this.setValidity();
-    };
-    /**
-     * @hidden
-     */
-    MaskedTextBoxWithoutContext.prototype.componentDidMount = function () {
-        this.updateService();
-        this.setValidity();
-    };
-    /**
-     * @hidden
-     */
-    MaskedTextBoxWithoutContext.prototype.render = function () {
-        var _a;
-        var _this = this;
-        var _b = this.props, _c = _b.size, size = _c === void 0 ? MaskedTextBoxWithoutContext.defaultProps.size : _c, _d = _b.fillMode, fillMode = _d === void 0 ? MaskedTextBoxWithoutContext.defaultProps.fillMode : _d, _e = _b.rounded, rounded = _e === void 0 ? MaskedTextBoxWithoutContext.defaultProps.rounded : _e;
-        var inputId = this.props.id || this._inputId;
-        var isValid = !this.validityStyles || this.validity.valid;
-        var style = this.props.style || {};
-        var _f = this.props, _g = _f.prefix, prefix = _g === void 0 ? MaskedTextBoxWithoutContext.defaultProps.prefix : _g, _h = _f.suffix, suffix = _h === void 0 ? MaskedTextBoxWithoutContext.defaultProps.suffix : _h;
-        var Prefix = (0, kendo_react_common_1.useCustomComponent)(prefix)[0];
-        var Suffix = (0, kendo_react_common_1.useCustomComponent)(suffix)[0];
-        var component = (React.createElement("span", { dir: this.props.dir, className: (0, kendo_react_common_1.classNames)('k-maskedtextbox 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-invalid'] = !isValid,
-                _a['k-required'] = this.required,
-                _a['k-disabled'] = this.props.disabled,
-                _a), this.props.className), style: !this.props.label
-                ? __assign({ width: this.props.width }, style) : style },
-            React.createElement(Prefix, null),
-            React.createElement("input", { type: "text", autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, className: "k-input-inner", value: this.value, id: inputId, "aria-labelledby": this.props.ariaLabelledBy, "aria-describedby": this.props.ariaDescribedBy, "aria-placeholder": this.props.mask, name: this.props.name, tabIndex: (0, kendo_react_common_1.getTabIndex)(this.props.tabIndex, this.props.disabled, true), accessKey: this.props.accessKey, title: this.props.title, disabled: this.props.disabled || undefined, readOnly: this.props.readonly || undefined, placeholder: this.props.placeholder, ref: function (input) { return _this._input = input; }, onChange: this.onChangeHandler, onPaste: this.pasteHandler, onFocus: this.focusHandler, onBlur: this.blurHandler, onDragStart: utils_1.returnFalse, onDrop: utils_1.returnFalse }),
-            React.createElement(Suffix, null)));
-        return this.props.label
-            ? (React.createElement(kendo_react_labels_1.FloatingLabel, { label: this.props.label, editorId: inputId, editorValue: this.value, editorValid: isValid, editorDisabled: this.props.disabled, editorPlaceholder: this.props.placeholder, children: component, style: { width: this.props.width }, dir: this.props.dir }))
-            : component;
-    };
-    MaskedTextBoxWithoutContext.prototype.triggerOnChange = function (maskedValue, event) {
-        this.setState({
-            value: maskedValue
-        });
-        if (this.props.onChange) {
-            this._valueDuringOnChange = maskedValue;
-            var ev = {
-                syntheticEvent: event,
-                nativeEvent: event.nativeEvent,
-                selectionStart: this._selection[0],
-                selectionEnd: this._selection[1],
-                target: this,
-                value: this.value
-            };
-            this.props.onChange.call(undefined, ev);
-            this._valueDuringOnChange = undefined;
-        }
-    };
-    MaskedTextBoxWithoutContext.prototype.updateService = function (extra) {
-        var config = Object.assign({
-            includeLiterals: this.props.includeLiterals,
-            mask: this.props.mask,
-            prompt: this.props.prompt,
-            promptPlaceholder: this.props.promptPlaceholder,
-            rules: this.rules
-        }, extra); // tslint:disable-line:align
-        this._service.update(config);
-    };
-    Object.defineProperty(MaskedTextBoxWithoutContext.prototype, "rules", {
-        get: function () {
-            return Object.assign({}, utils_1.defaultRules, this.props.rules);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    MaskedTextBoxWithoutContext.displayName = 'MaskedTextBox';
-    /**
-     * @hidden
-     */
-    MaskedTextBoxWithoutContext.propTypes = {
-        value: PropTypes.string,
-        defaultValue: PropTypes.string,
-        placeholder: PropTypes.string,
-        title: PropTypes.string,
-        dir: PropTypes.string,
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        prefix: PropTypes.any,
-        suffix: PropTypes.any,
-        ariaLabelledBy: PropTypes.string,
-        ariaDescribedBy: PropTypes.string,
-        width: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.number
-        ]),
-        tabIndex: PropTypes.number,
-        accessKey: PropTypes.string,
-        disabled: PropTypes.bool,
-        readonly: PropTypes.bool,
-        prompt: PropTypes.string,
-        promptPlaceholder: PropTypes.string,
-        includeLiterals: PropTypes.bool,
-        maskValidation: PropTypes.bool,
-        mask: PropTypes.string,
-        rules: function (props, propName, componentName) {
-            var rules = props.rules;
-            if (rules !== undefined) {
-                var valid = Object.entries(rules)
-                    .some(function (e) { return typeof e !== 'string' || !(rules[e] instanceof RegExp); });
-                if (!valid) {
-                    return new Error('Invalid prop `' + propName + '` supplied to' +
-                        ' `' + componentName + '`. Validation failed.');
-                }
-            }
-            return null;
-        },
-        selection: PropTypes.shape({
-            start: PropTypes.number.isRequired,
-            end: PropTypes.number.isRequired
-        }),
-        name: PropTypes.string,
-        label: PropTypes.string,
-        validationMessage: PropTypes.string,
-        required: PropTypes.bool,
-        valid: PropTypes.bool,
-        validityStyles: PropTypes.bool,
-        onChange: PropTypes.func,
-        size: PropTypes.oneOf([null, 'small', 'medium', 'large']),
-        rounded: PropTypes.oneOf([null, 'small', 'medium', 'large', 'full']),
-        fillMode: PropTypes.oneOf([null, 'solid', 'flat', 'outline'])
-    };
-    /**
-     * @hidden
-     */
-    MaskedTextBoxWithoutContext.defaultProps = {
-        prompt: '_',
-        promptPlaceholder: ' ',
-        includeLiterals: false,
-        maskValidation: true,
-        rules: utils_1.defaultRules,
-        required: false,
-        validityStyles: true,
-        prefix: function (_) { return null; },
-        suffix: function (_) { return null; },
-        size: 'medium',
-        rounded: 'medium',
-        fillMode: 'solid'
-    };
-    return MaskedTextBoxWithoutContext;
-}(React.Component));
-exports.MaskedTextBoxWithoutContext = MaskedTextBoxWithoutContext;
-/**
- * Represents the PropsContext of the `MaskedTextBox` component.
- * Used for global configuration of all `MaskedTextBox` instances.
- *
- * For more information, refer to the [Inputs Props Context]({% slug props-context_inputs %}) article.
- */
-exports.MaskedTextBoxPropsContext = (0, kendo_react_common_1.createPropsContext)();
-/* eslint-disable @typescript-eslint/no-redeclare -- intentionally naming the component the same as the type */
-/**
- * Represents the props of the [KendoReact MaskedTextBox component]({% slug overview_maskedtextbox %}).
- *
- * Accepts properties of type [MaskedTextBoxProps]({% slug api_inputs_maskedtextboxprops %}).
- * Obtaining the `ref` returns an object of type [MaskedTextBoxHandle]({% slug api_inputs_maskedtextboxhandle %}).
- */
-exports.MaskedTextBox = (0, kendo_react_common_1.withPropsContext)(exports.MaskedTextBoxPropsContext, MaskedTextBoxWithoutContext);
-exports.MaskedTextBox.displayName = 'KendoReactMaskedTextBox';

package/dist/npm/maskedtextbox/MaskedTextBoxProps.d.ts

@@ -1,197 +0,0 @@
-/// <reference types="react" />
-import { CustomComponent, FormComponentProps } from '@progress/kendo-react-common';
-import { MaskedTextBox } from './MaskedTextBox';
-/**
- * The arguments for a MaskedTextBox event.
- */
-export interface MaskedTextBoxEvent {
-    /**
-     * A native DOM event.
-     */
-    nativeEvent: Event;
-    /**
-     * A React [`SyntheticEvent`](https://reactjs.org/docs/events.html).
-     */
-    syntheticEvent: React.SyntheticEvent<HTMLElement>;
-    /**
-     * An event target.
-     */
-    target: MaskedTextBox;
-}
-/**
- * The arguments for the `change` event of the MaskedTextBox.
- */
-export interface MaskedTextBoxChangeEvent extends MaskedTextBoxEvent {
-    /**
-     * Specifies the start of the selection which will be set to the MaskedTextBox when it is updated.
-     */
-    selectionStart: number;
-    /**
-     * Specifies the end of the selection which will be set to the MaskedTextBox when it is updated.
-     */
-    selectionEnd: number;
-    /**
-     * The current value of the component.
-     */
-    value: any;
-}
-/**
- * Represents the props of the [KendoReact MaskedTextBox component]({% slug overview_maskedtextbox %}).
- */
-export interface MaskedTextBoxProps extends FormComponentProps {
-    /**
-     * Sets a class of the MaskedTextBox DOM element.
-     */
-    className?: string;
-    /**
-     * Sets additional CSS styles to the MaskedTextBox DOM element.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Specifies the value of the MaskedTextBox.
-     */
-    value?: string;
-    /**
-     * Specifies the initial value. Leaves the subsequent updates uncontrolled.
-     */
-    defaultValue?: string;
-    /**
-     * Specifies the input placeholder.
-     */
-    placeholder?: string;
-    /**
-     * Sets the title of the `input` element of the MaskedTextBox.
-     */
-    title?: string;
-    /**
-     * Represents the `dir` HTML attribute.
-     */
-    dir?: string;
-    /**
-     * Sets the `tabIndex` property of the MaskedTextBox.
-     */
-    tabIndex?: number;
-    /**
-     * Specifies the `accessKey` of the MaskedTextBox.
-     */
-    accessKey?: string;
-    /**
-     * Specifies the width of the MaskedTextBox.
-     */
-    width?: number | string;
-    /**
-     * Determines whether the MaskedTextBox is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Renders a floating label for the MaskedTextBox.
-     */
-    label?: string;
-    /**
-     * Sets the `id` of the `input` DOM element.
-     */
-    id?: string;
-    /**
-     * Sets a custom prefix to the MaskedTextBox component.
-     */
-    prefix?: CustomComponent<any>;
-    /**
-     * Sets a custom suffix to the MaskedTextBox component.
-     */
-    suffix?: CustomComponent<any>;
-    /**
-     * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
-     * For example these elements could contain error or hint message.
-     */
-    ariaDescribedBy?: string;
-    /**
-     * Identifies the element(s) which will label the component.
-     */
-    ariaLabelledBy?: string;
-    /**
-     * Determines whether the MaskedTextBox is in its read-only state.
-     */
-    readonly?: boolean;
-    /**
-     * Represents a prompt character for the masked value. Defaults to `_`.
-     */
-    prompt?: string;
-    /**
-     * Indicates a character which represents an empty position in the raw value. Defaults to ` `.
-     */
-    promptPlaceholder?: string;
-    /**
-     * Indicates whether to include literals in the raw value. Defaults to `false`.
-     */
-    includeLiterals?: boolean;
-    /**
-     * Determines whether the built-in mask validator is enforced when a form is validated. Defaults to `true`.
-     */
-    maskValidation?: boolean;
-    /**
-     * Represents the current mask. If no mask is set, the component behaves as a standard `type="text"` input.
-     */
-    mask?: string;
-    /**
-     * Represents the RegExp-based mask validation array.
-     */
-    rules?: {
-        [key: string]: RegExp;
-    };
-    /**
-     * Represents the beginning and ending of the selected portion of the input content that will be applied the next time when the MaskedTextBox is rendered.
-     */
-    selection?: {
-        start: number;
-        end: number;
-    };
-    /**
-     * Determines the event handler that will be fired when the user edits the value.
-     */
-    onChange?: (event: MaskedTextBoxChangeEvent) => void;
-    /**
-     * Fires each time the user focuses the MaskedTextBox.
-     */
-    onFocus?: (event: MaskedTextBoxEvent) => void;
-    /**
-     * Fires each time the MaskedTextBox gets blurred.
-     */
-    onBlur?: (event: MaskedTextBoxEvent) => void;
-    /**
-     * Configures the `size` of the MaskedTextBox.
-     *
-     * 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 MaskedTextBox.
-     *
-     * 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 MaskedTextBox.
-     *
-     * The available options are:
-     * - solid
-     * - outline
-     * - flat
-     * - null&mdash;Does not set a fillMode `className`.
-     *
-     * @default `solid`
-     */
-    fillMode?: null | 'solid' | 'flat' | 'outline';
-}

package/dist/npm/maskedtextbox/MaskedTextBoxProps.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-// tslint:enable:max-line-length