@progress/kendo-react-labels 6.1.1 → 7.0.0-develop.1

package/dist/es/FloatingLabel.d.ts

@@ -1,123 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
-/**
- * Represents the props of the KendoReact FloatingLabel component.
- */
-export interface FloatingLabelProps extends KendoReactComponentBaseProps {
-    /**
-     * Represent the [`htmlFor`](https://reactjs.org/docs/dom-elements.html#htmlfor) property, which will be set to the `label` element.
-     */
-    editorId?: string;
-    /**
-     * Specifies the value of the editor. Used to define if the editor is empty.
-     */
-    editorValue?: any;
-    /**
-     * Specifies the placeholder of the editor. Used to define if the editor is empty.
-     */
-    editorPlaceholder?: string;
-    /**
-     * Specifies if the validity of the editor. Used to define the editor is invalid.
-     */
-    editorValid?: boolean;
-    /**
-     * Specifies if the editor is disabled.
-     */
-    editorDisabled?: boolean;
-    /**
-     * Adds a floating label that describes the editor.
-     */
-    label?: string;
-    /**
-     * The styles that are applied to the FloatingLabel.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets a class of the FloatingLabel DOM element.
-     */
-    className?: string;
-    /**
-     * Sets the `className` of the label DOM element.
-     */
-    labelClassName?: string;
-    /**
-     * Specifies the direction of the label.
-     */
-    dir?: string;
-    /**
-     * Represents the id of the label element.
-     * The value should be also set to the editor's `ariaLabelledBy` property.
-     * Can be used when the editor is not containing native form element.
-     */
-    id?: string;
-    /**
-     * If enabled, marks the label as optional.
-     */
-    optional?: boolean;
-}
-/**
- * @hidden
- */
-export interface FloatingLabelState {
-    focused?: boolean;
-}
-/**
- * Represents the KendoReact FloatingLabel component.
- *
- * @example
- * ```jsx
- * const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
- * const App = () => {
- *     const [ddlState, setDdlState] = React.useState();
- *     const editorId = 'ddl-sizes';
- *     return (
- *         <FloatingLabel label={'Shirt Size:'} editorId={editorId} editorValue={ddlState}>
- *             <DropDownList
- *                 id={editorId}
- *                 value={ddlState}
- *                 data={sizes}
- *                 onChange={(e) => setDdlState(e.target.value)}
- *             />
- *         </FloatingLabel>
- *     );
- * };
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export declare class FloatingLabel extends React.Component<FloatingLabelProps, FloatingLabelState> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        label: PropTypes.Requireable<string>;
-        editorId: PropTypes.Requireable<string>;
-        editorValue: PropTypes.Requireable<NonNullable<string | number | boolean | null | undefined>>;
-        editorPlaceholder: PropTypes.Requireable<string>;
-        editorValid: PropTypes.Requireable<boolean>;
-        editorDisabled: PropTypes.Requireable<boolean>;
-        id: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-        className: PropTypes.Requireable<string>;
-        labelClassName: PropTypes.Requireable<string>;
-        optional: PropTypes.Requireable<boolean>;
-    };
-    /**
-     * @hidden
-     */
-    readonly state: FloatingLabelState;
-    constructor(props: FloatingLabelProps);
-    /**
-     * @hidden
-     */
-    handleFocus: (_: React.SyntheticEvent<HTMLSpanElement>) => void;
-    /**
-     * @hidden
-     */
-    handleBlur: (_: React.SyntheticEvent<HTMLSpanElement>) => void;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element;
-}

package/dist/es/FloatingLabel.js

@@ -1,124 +0,0 @@
-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 __());
-    };
-})();
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
-import { labelsOptional, messages } from './messages';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from './package-metadata';
-/**
- * Represents the KendoReact FloatingLabel component.
- *
- * @example
- * ```jsx
- * const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
- * const App = () => {
- *     const [ddlState, setDdlState] = React.useState();
- *     const editorId = 'ddl-sizes';
- *     return (
- *         <FloatingLabel label={'Shirt Size:'} editorId={editorId} editorValue={ddlState}>
- *             <DropDownList
- *                 id={editorId}
- *                 value={ddlState}
- *                 data={sizes}
- *                 onChange={(e) => setDdlState(e.target.value)}
- *             />
- *         </FloatingLabel>
- *     );
- * };
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var FloatingLabel = /** @class */ (function (_super) {
-    __extends(FloatingLabel, _super);
-    function FloatingLabel(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this.state = {
-            focused: false
-        };
-        /**
-         * @hidden
-         */
-        _this.handleFocus = function (_) {
-            _this.setState({ focused: true });
-        };
-        /**
-         * @hidden
-         */
-        _this.handleBlur = function (_) {
-            _this.setState({ focused: false });
-        };
-        validatePackage(packageMetadata);
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    FloatingLabel.prototype.render = function () {
-        var _a = this.props, label = _a.label, editorId = _a.editorId, className = _a.className, labelClassName = _a.labelClassName, editorValue = _a.editorValue, editorPlaceholder = _a.editorPlaceholder, editorValid = _a.editorValid, editorDisabled = _a.editorDisabled, style = _a.style, id = _a.id, optional = _a.optional;
-        var localizationService = provideLocalizationService(this);
-        var localizedOptional = optional ? localizationService
-            .toLanguageString(labelsOptional, messages[labelsOptional]) : '';
-        var optionalElement = localizedOptional && (React.createElement("span", { className: 'k-label-optional' }, localizedOptional));
-        var spanClassNames = classNames({
-            'k-floating-label-container': true,
-            'k-focus': this.state.focused,
-            'k-empty': !editorPlaceholder && !editorValue && (editorValue !== 0),
-            'k-text-disabled': editorDisabled,
-            'k-rtl': this.props.dir === 'rtl'
-        }, className);
-        var labelClassNames = classNames({
-            'k-label': true,
-            'k-text-error': editorValid === false,
-            'k-text-disabled': editorDisabled
-        }, labelClassName);
-        return (React.createElement("span", { id: this.props.id, className: spanClassNames, onFocus: this.handleFocus, onBlur: this.handleBlur, style: style, dir: this.props.dir },
-            this.props.children,
-            label
-                ? editorId
-                    ? React.createElement("label", { id: id, htmlFor: editorId, className: labelClassNames },
-                        label,
-                        optionalElement)
-                    : React.createElement("span", { id: id, className: labelClassNames },
-                        label,
-                        optionalElement)
-                : null));
-    };
-    /**
-     * @hidden
-     */
-    FloatingLabel.propTypes = {
-        label: PropTypes.string,
-        editorId: PropTypes.string,
-        editorValue: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
-        editorPlaceholder: PropTypes.string,
-        editorValid: PropTypes.bool,
-        editorDisabled: PropTypes.bool,
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        labelClassName: PropTypes.string,
-        optional: PropTypes.bool
-    };
-    return FloatingLabel;
-}(React.Component));
-export { FloatingLabel };
-registerForLocalization(FloatingLabel);

package/dist/es/Hint.js

@@ -1,43 +0,0 @@
-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);
-};
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from './package-metadata';
-/**
- * Represents the KendoReact Hint component.
- * Render the hint text that will be shown underneath the form editor.
- */
-export var Hint = function (props) {
-    var combinedProps = __assign({ direction: 'start' }, props);
-    validatePackage(packageMetadata);
-    var hintClassName = classNames({
-        'k-form-hint': true,
-        'k-text-start': combinedProps.direction === 'start',
-        'k-text-end': combinedProps.direction === 'end',
-        'k-text-disabled': combinedProps.editorDisabled === true
-    }, combinedProps.className);
-    return (React.createElement("div", { id: combinedProps.id, style: combinedProps.style, className: hintClassName }, combinedProps.children));
-};
-Hint.propTypes = {
-    id: PropTypes.string,
-    direction: PropTypes.oneOf(['start', 'end']),
-    children: PropTypes.oneOfType([
-        PropTypes.element,
-        PropTypes.node
-    ]),
-    style: PropTypes.object,
-    className: PropTypes.string,
-    editorDisabled: PropTypes.bool
-};
-Hint.displayName = 'KendoReactHint';

package/dist/es/Label.js

@@ -1,81 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { classNames } from '@progress/kendo-react-common';
-import { labelsOptional, messages } from './messages';
-import { useLocalization } from '@progress/kendo-react-intl';
-import { validatePackage } from '@progress/kendo-react-common';
-import { packageMetadata } from './package-metadata';
-/**
- * Represents the KendoReact Label component.
- *
- * @example
- * ```jsx
- * const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
- * const App = () => {
- *     const ddlRef = React.useRef(null);
- *     const labelId = 'ddl-sizes-label';
- *     const editorId = 'ddl-sizes';
- *
- *     return (
- *         <div>
- *             <Label id={labelId} editorId={editorId} editorRef={ddlRef}>
- *                 Shirt Size:
- *             </Label>
- *             <DropDownList
- *                 ref={ddlRef}
- *                 id={editorId}
- *                 ariaLabelledBy={labelId}
- *                 data={sizes}
- *             />
- *             <br />
- *         </div>
- *     );
- * };
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-export var Label = function (props) {
-    validatePackage(packageMetadata);
-    var id = props.id, editorId = props.editorId, editorRef = props.editorRef, editorDisabled = props.editorDisabled, children = props.children, editorValid = props.editorValid, style = props.style, className = props.className, optional = props.optional;
-    var localizationService = useLocalization();
-    var localizedOptional = optional ? localizationService
-        .toLanguageString(labelsOptional, messages[labelsOptional]) : '';
-    var optionalElement = localizedOptional && (React.createElement("span", { className: 'k-label-optional' }, localizedOptional));
-    var onLabelClick = React.useCallback(function (e) {
-        if (editorRef && editorRef.current && !editorDisabled) {
-            if (editorRef.current.focus) {
-                e.preventDefault();
-                editorRef.current.focus();
-            }
-            var editorActionElement = editorRef.current.actionElement;
-            if (editorActionElement) {
-                e.preventDefault();
-                editorActionElement.click();
-            }
-        }
-    }, [editorRef]);
-    var labelClassName = classNames({
-        'k-label': true,
-        'k-label-empty': !children,
-        'k-text-error': editorValid === false,
-        'k-text-disabled': editorDisabled === true
-    }, className);
-    return (React.createElement("label", { id: id, htmlFor: editorId, onClick: onLabelClick, style: style, className: labelClassName },
-        children,
-        optionalElement));
-};
-Label.propTypes = {
-    id: PropTypes.string,
-    editorId: PropTypes.string,
-    editorRef: PropTypes.oneOfType([
-        PropTypes.func,
-        PropTypes.shape({ current: PropTypes.any })
-    ]),
-    editorValid: PropTypes.bool,
-    editorDisabled: PropTypes.bool,
-    style: PropTypes.object,
-    className: PropTypes.string,
-    optional: PropTypes.bool
-};
-Label.displayName = 'KendoReactLabel';

package/dist/es/main.d.ts

@@ -1,5 +0,0 @@
-import { Label, LabelProps } from './Label';
-import { Error, ErrorProps } from './Error';
-import { Hint, HintProps } from './Hint';
-import { FloatingLabel, FloatingLabelProps } from './FloatingLabel';
-export { FloatingLabel, FloatingLabelProps, Label, LabelProps, Error, ErrorProps, Hint, HintProps };

package/dist/es/main.js

@@ -1,5 +0,0 @@
-import { Label } from './Label';
-import { Error } from './Error';
-import { Hint } from './Hint';
-import { FloatingLabel } from './FloatingLabel';
-export { FloatingLabel, Label, Error, Hint };

package/dist/es/messages/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * @hidden
- */
-export declare const labelsOptional = "labels.optional";
-/**
- * @hidden
- */
-export declare const messages: {
-    "labels.optional": string;
-};

package/dist/es/messages/index.js

@@ -1,11 +0,0 @@
-var _a;
-/**
- * @hidden
- */
-export var labelsOptional = 'labels.optional';
-/**
- * @hidden
- */
-export var messages = (_a = {},
-    _a[labelsOptional] = '(Optional)',
-    _a);

package/dist/es/package-metadata.d.ts

@@ -1,5 +0,0 @@
-import { PackageMetadata } from '@progress/kendo-licensing';
-/**
- * @hidden
- */
-export declare const packageMetadata: PackageMetadata;

package/dist/es/package-metadata.js

@@ -1,11 +0,0 @@
-/**
- * @hidden
- */
-export var packageMetadata = {
-    name: '@progress/kendo-react-labels',
-    productName: 'KendoReact',
-    productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1700063806,
-    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/Error.d.ts

@@ -1,47 +0,0 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-/**
- * Represents the props of the KendoReact Error component.
- */
-export interface ErrorProps {
-    /**
-     * Represents the id of the Error element.
-     * The value should be also set to the editor's `ariaDescribedBy` property.
-     */
-    id?: string;
-    /**
-     * Specifies the alignment of the Error text.
-     *
-     * The possible values are:
-     * * (Default) `start`
-     * * `end`
-     */
-    direction?: 'start' | 'end';
-    /**
-     * Determines the children nodes.
-     */
-    children: any;
-    /**
-     * The styles that are applied to the Error.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Sets a class of the Error DOM element.
-     */
-    className?: string;
-}
-/**
- * Represents the KendoReact Error component.
- * Render the error text that will be shown underneath the form editor after a validation.
- */
-export declare const Error: {
-    (props: ErrorProps): JSX.Element;
-    propTypes: {
-        id: PropTypes.Requireable<string>;
-        direction: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        style: PropTypes.Requireable<object>;
-        className: PropTypes.Requireable<string>;
-    };
-    displayName: string;
-};

package/dist/npm/Error.js

@@ -1,45 +0,0 @@
-"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);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Error = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("./package-metadata");
-/**
- * Represents the KendoReact Error component.
- * Render the error text that will be shown underneath the form editor after a validation.
- */
-var Error = function (props) {
-    var combinedProps = __assign({ direction: 'start' }, props);
-    (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-    var errorClassName = (0, kendo_react_common_1.classNames)({
-        'k-form-error': true,
-        'k-text-start': combinedProps.direction === 'start',
-        'k-text-end': combinedProps.direction === 'end'
-    }, combinedProps.className);
-    return (React.createElement("div", { id: combinedProps.id, role: 'alert', style: combinedProps.style, className: errorClassName }, combinedProps.children));
-};
-exports.Error = Error;
-exports.Error.propTypes = {
-    id: PropTypes.string,
-    direction: PropTypes.oneOf(['start', 'end']),
-    children: PropTypes.oneOfType([
-        PropTypes.element,
-        PropTypes.node
-    ]),
-    style: PropTypes.object,
-    className: PropTypes.string
-};
-exports.Error.displayName = 'KendoReactError';

package/dist/npm/FloatingLabel.js

@@ -1,127 +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 __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingLabel = void 0;
-var React = require("react");
-var PropTypes = require("prop-types");
-var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_intl_1 = require("@progress/kendo-react-intl");
-var messages_1 = require("./messages");
-var kendo_react_common_2 = require("@progress/kendo-react-common");
-var package_metadata_1 = require("./package-metadata");
-/**
- * Represents the KendoReact FloatingLabel component.
- *
- * @example
- * ```jsx
- * const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
- * const App = () => {
- *     const [ddlState, setDdlState] = React.useState();
- *     const editorId = 'ddl-sizes';
- *     return (
- *         <FloatingLabel label={'Shirt Size:'} editorId={editorId} editorValue={ddlState}>
- *             <DropDownList
- *                 id={editorId}
- *                 value={ddlState}
- *                 data={sizes}
- *                 onChange={(e) => setDdlState(e.target.value)}
- *             />
- *         </FloatingLabel>
- *     );
- * };
- *
- * ReactDOM.render(<App />, document.querySelector('my-app'));
- * ```
- */
-var FloatingLabel = /** @class */ (function (_super) {
-    __extends(FloatingLabel, _super);
-    function FloatingLabel(props) {
-        var _this = _super.call(this, props) || this;
-        /**
-         * @hidden
-         */
-        _this.state = {
-            focused: false
-        };
-        /**
-         * @hidden
-         */
-        _this.handleFocus = function (_) {
-            _this.setState({ focused: true });
-        };
-        /**
-         * @hidden
-         */
-        _this.handleBlur = function (_) {
-            _this.setState({ focused: false });
-        };
-        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
-        return _this;
-    }
-    /**
-     * @hidden
-     */
-    FloatingLabel.prototype.render = function () {
-        var _a = this.props, label = _a.label, editorId = _a.editorId, className = _a.className, labelClassName = _a.labelClassName, editorValue = _a.editorValue, editorPlaceholder = _a.editorPlaceholder, editorValid = _a.editorValid, editorDisabled = _a.editorDisabled, style = _a.style, id = _a.id, optional = _a.optional;
-        var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
-        var localizedOptional = optional ? localizationService
-            .toLanguageString(messages_1.labelsOptional, messages_1.messages[messages_1.labelsOptional]) : '';
-        var optionalElement = localizedOptional && (React.createElement("span", { className: 'k-label-optional' }, localizedOptional));
-        var spanClassNames = (0, kendo_react_common_1.classNames)({
-            'k-floating-label-container': true,
-            'k-focus': this.state.focused,
-            'k-empty': !editorPlaceholder && !editorValue && (editorValue !== 0),
-            'k-text-disabled': editorDisabled,
-            'k-rtl': this.props.dir === 'rtl'
-        }, className);
-        var labelClassNames = (0, kendo_react_common_1.classNames)({
-            'k-label': true,
-            'k-text-error': editorValid === false,
-            'k-text-disabled': editorDisabled
-        }, labelClassName);
-        return (React.createElement("span", { id: this.props.id, className: spanClassNames, onFocus: this.handleFocus, onBlur: this.handleBlur, style: style, dir: this.props.dir },
-            this.props.children,
-            label
-                ? editorId
-                    ? React.createElement("label", { id: id, htmlFor: editorId, className: labelClassNames },
-                        label,
-                        optionalElement)
-                    : React.createElement("span", { id: id, className: labelClassNames },
-                        label,
-                        optionalElement)
-                : null));
-    };
-    /**
-     * @hidden
-     */
-    FloatingLabel.propTypes = {
-        label: PropTypes.string,
-        editorId: PropTypes.string,
-        editorValue: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]),
-        editorPlaceholder: PropTypes.string,
-        editorValid: PropTypes.bool,
-        editorDisabled: PropTypes.bool,
-        id: PropTypes.string,
-        style: PropTypes.object,
-        className: PropTypes.string,
-        labelClassName: PropTypes.string,
-        optional: PropTypes.bool
-    };
-    return FloatingLabel;
-}(React.Component));
-exports.FloatingLabel = FloatingLabel;
-(0, kendo_react_intl_1.registerForLocalization)(FloatingLabel);