@progress/kendo-react-labels 13.3.0-develop.9 → 13.4.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Error.d.ts +59 -0
- package/FloatingLabel.d.ts +113 -0
- package/Hint.d.ts +64 -0
- package/Label.d.ts +105 -0
- package/dist/cdn/js/kendo-react-labels.js +1 -1
- package/index.d.mts +5 -311
- package/index.d.ts +5 -311
- package/messages/index.d.ts +17 -0
- package/package-metadata.d.ts +12 -0
- package/package-metadata.mjs +13 -0
- package/package.json +10 -4
package/Error.d.ts
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { default as PropTypes } from 'prop-types';
|
|
9
|
+
import { LabelsClassStructure } from '@progress/kendo-react-common';
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
* Represents the props of the KendoReact Error component.
|
|
13
|
+
*/
|
|
14
|
+
export interface ErrorProps {
|
|
15
|
+
/**
|
|
16
|
+
* Represents the id of the Error element.
|
|
17
|
+
* The value should be also set to the editor's `ariaDescribedBy` property.
|
|
18
|
+
*/
|
|
19
|
+
id?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Specifies the alignment of the Error text.
|
|
22
|
+
*
|
|
23
|
+
* The possible values are:
|
|
24
|
+
* * (Default) `start`
|
|
25
|
+
* * `end`
|
|
26
|
+
*/
|
|
27
|
+
direction?: 'start' | 'end';
|
|
28
|
+
/**
|
|
29
|
+
* Determines the children nodes.
|
|
30
|
+
*/
|
|
31
|
+
children: any;
|
|
32
|
+
/**
|
|
33
|
+
* The styles that are applied to the Error.
|
|
34
|
+
*/
|
|
35
|
+
style?: React.CSSProperties;
|
|
36
|
+
/**
|
|
37
|
+
* Sets a class of the Error DOM element.
|
|
38
|
+
*/
|
|
39
|
+
className?: string;
|
|
40
|
+
/**
|
|
41
|
+
* @hidden
|
|
42
|
+
*/
|
|
43
|
+
unstyled?: LabelsClassStructure;
|
|
44
|
+
}
|
|
45
|
+
/**
|
|
46
|
+
* Represents the KendoReact Error component.
|
|
47
|
+
* Render the error text that will be shown underneath the form editor after a validation.
|
|
48
|
+
*/
|
|
49
|
+
export declare const Error: {
|
|
50
|
+
(props: ErrorProps): React.JSX.Element;
|
|
51
|
+
propTypes: {
|
|
52
|
+
id: PropTypes.Requireable<string>;
|
|
53
|
+
direction: PropTypes.Requireable<string>;
|
|
54
|
+
children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
55
|
+
style: PropTypes.Requireable<object>;
|
|
56
|
+
className: PropTypes.Requireable<string>;
|
|
57
|
+
};
|
|
58
|
+
displayName: string;
|
|
59
|
+
};
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { default as PropTypes } from 'prop-types';
|
|
9
|
+
import { KendoReactComponentBaseProps, LabelsClassStructure } from '@progress/kendo-react-common';
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
* Represents the props of the KendoReact FloatingLabel component.
|
|
13
|
+
*/
|
|
14
|
+
export interface FloatingLabelProps extends KendoReactComponentBaseProps {
|
|
15
|
+
/**
|
|
16
|
+
* Represent the [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) property, which will be set to the `label` element.
|
|
17
|
+
*/
|
|
18
|
+
editorId?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Specifies the value of the editor. Used to define if the editor is empty.
|
|
21
|
+
*/
|
|
22
|
+
editorValue?: any;
|
|
23
|
+
/**
|
|
24
|
+
* Specifies the placeholder of the editor. Used to define if the editor is empty.
|
|
25
|
+
*/
|
|
26
|
+
editorPlaceholder?: string;
|
|
27
|
+
/**
|
|
28
|
+
* Specifies if the validity of the editor. Used to define the editor is invalid.
|
|
29
|
+
*/
|
|
30
|
+
editorValid?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Specifies if the editor is disabled.
|
|
33
|
+
*/
|
|
34
|
+
editorDisabled?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Adds a floating label that describes the editor.
|
|
37
|
+
*/
|
|
38
|
+
label?: React.ReactNode;
|
|
39
|
+
/**
|
|
40
|
+
* The styles that are applied to the FloatingLabel.
|
|
41
|
+
*/
|
|
42
|
+
style?: React.CSSProperties;
|
|
43
|
+
/**
|
|
44
|
+
* Sets a class of the FloatingLabel DOM element.
|
|
45
|
+
*/
|
|
46
|
+
className?: string;
|
|
47
|
+
/**
|
|
48
|
+
* Sets the `className` of the label DOM element.
|
|
49
|
+
*/
|
|
50
|
+
labelClassName?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Specifies the direction of the label.
|
|
53
|
+
*/
|
|
54
|
+
dir?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Represents the id of the label element.
|
|
57
|
+
* The value should be also set to the editor's `ariaLabelledBy` property.
|
|
58
|
+
* Can be used when the editor is not containing native form element.
|
|
59
|
+
*/
|
|
60
|
+
id?: string;
|
|
61
|
+
/**
|
|
62
|
+
* If enabled, marks the label as optional.
|
|
63
|
+
*/
|
|
64
|
+
optional?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* @hidden
|
|
67
|
+
*/
|
|
68
|
+
unstyled?: LabelsClassStructure;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* @hidden
|
|
72
|
+
*/
|
|
73
|
+
export interface FloatingLabelState {
|
|
74
|
+
focused?: boolean;
|
|
75
|
+
}
|
|
76
|
+
/**
|
|
77
|
+
* Represents the KendoReact FloatingLabel component.
|
|
78
|
+
*
|
|
79
|
+
* @example
|
|
80
|
+
* ```jsx
|
|
81
|
+
* const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
|
|
82
|
+
* const App = () => {
|
|
83
|
+
* const [ddlState, setDdlState] = React.useState();
|
|
84
|
+
* const editorId = 'ddl-sizes';
|
|
85
|
+
* return (
|
|
86
|
+
* <FloatingLabel label={'Shirt Size:'} editorId={editorId} editorValue={ddlState}>
|
|
87
|
+
* <DropDownList
|
|
88
|
+
* id={editorId}
|
|
89
|
+
* value={ddlState}
|
|
90
|
+
* data={sizes}
|
|
91
|
+
* onChange={(e) => setDdlState(e.target.value)}
|
|
92
|
+
* />
|
|
93
|
+
* </FloatingLabel>
|
|
94
|
+
* );
|
|
95
|
+
* };
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
export declare const FloatingLabel: {
|
|
99
|
+
(props: FloatingLabelProps): React.JSX.Element;
|
|
100
|
+
propTypes: {
|
|
101
|
+
label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
102
|
+
editorId: PropTypes.Requireable<string>;
|
|
103
|
+
editorValue: PropTypes.Requireable<NonNullable<string | number | boolean | null | undefined>>;
|
|
104
|
+
editorPlaceholder: PropTypes.Requireable<string>;
|
|
105
|
+
editorValid: PropTypes.Requireable<boolean>;
|
|
106
|
+
editorDisabled: PropTypes.Requireable<boolean>;
|
|
107
|
+
id: PropTypes.Requireable<string>;
|
|
108
|
+
style: PropTypes.Requireable<object>;
|
|
109
|
+
className: PropTypes.Requireable<string>;
|
|
110
|
+
labelClassName: PropTypes.Requireable<string>;
|
|
111
|
+
optional: PropTypes.Requireable<boolean>;
|
|
112
|
+
};
|
|
113
|
+
};
|
package/Hint.d.ts
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { default as PropTypes } from 'prop-types';
|
|
9
|
+
import { LabelsClassStructure } from '@progress/kendo-react-common';
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
* Represents the props of the KendoReact Hint component.
|
|
13
|
+
*/
|
|
14
|
+
export interface HintProps {
|
|
15
|
+
/**
|
|
16
|
+
* Represents the id of the Hint element.
|
|
17
|
+
* The value should be set to the editor `ariaDescribedBy` property.
|
|
18
|
+
*/
|
|
19
|
+
id?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Spcifies the alignment of the Hint text.
|
|
22
|
+
*
|
|
23
|
+
* The possible values are:
|
|
24
|
+
* *(Default) `start`
|
|
25
|
+
* * `end`
|
|
26
|
+
*/
|
|
27
|
+
direction?: 'start' | 'end';
|
|
28
|
+
/**
|
|
29
|
+
* @hidden
|
|
30
|
+
*/
|
|
31
|
+
children: any;
|
|
32
|
+
/**
|
|
33
|
+
* The styles that are applied to the Hint.
|
|
34
|
+
*/
|
|
35
|
+
style?: React.CSSProperties;
|
|
36
|
+
/**
|
|
37
|
+
* Sets a class of the Hint DOM element.
|
|
38
|
+
*/
|
|
39
|
+
className?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Specifies if the editor is disabled.
|
|
42
|
+
*/
|
|
43
|
+
editorDisabled?: boolean;
|
|
44
|
+
/**
|
|
45
|
+
* @hidden
|
|
46
|
+
*/
|
|
47
|
+
unstyled?: LabelsClassStructure;
|
|
48
|
+
}
|
|
49
|
+
/**
|
|
50
|
+
* Represents the KendoReact Hint component.
|
|
51
|
+
* Render the hint text that will be shown underneath the form editor.
|
|
52
|
+
*/
|
|
53
|
+
export declare const Hint: {
|
|
54
|
+
(props: HintProps): React.JSX.Element;
|
|
55
|
+
propTypes: {
|
|
56
|
+
id: PropTypes.Requireable<string>;
|
|
57
|
+
direction: PropTypes.Requireable<string>;
|
|
58
|
+
children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
|
|
59
|
+
style: PropTypes.Requireable<object>;
|
|
60
|
+
className: PropTypes.Requireable<string>;
|
|
61
|
+
editorDisabled: PropTypes.Requireable<boolean>;
|
|
62
|
+
};
|
|
63
|
+
displayName: string;
|
|
64
|
+
};
|
package/Label.d.ts
ADDED
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { default as PropTypes } from 'prop-types';
|
|
9
|
+
import { LabelsClassStructure } from '@progress/kendo-react-common';
|
|
10
|
+
import * as React from 'react';
|
|
11
|
+
/**
|
|
12
|
+
* Represents the props of the KendoReact Label component.
|
|
13
|
+
*/
|
|
14
|
+
export interface LabelProps {
|
|
15
|
+
/**
|
|
16
|
+
* Represents the id of the label element.
|
|
17
|
+
* The value should be set to the editor `ariaLabelledBy` property.
|
|
18
|
+
* Can be used when the editor is not containing native form element.
|
|
19
|
+
*/
|
|
20
|
+
id?: string;
|
|
21
|
+
/**
|
|
22
|
+
* The id of the editor.
|
|
23
|
+
* Represent the [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) property, which will be set to the `label` element.
|
|
24
|
+
*/
|
|
25
|
+
editorId?: string;
|
|
26
|
+
/**
|
|
27
|
+
* An optional React ref to the editor.
|
|
28
|
+
* Used to redirect the click event to the editor when it does not contain native form element.
|
|
29
|
+
* To be able to work, the editor should have `focus` method or `actionElement` prop on it's ref.
|
|
30
|
+
*/
|
|
31
|
+
editorRef?: any;
|
|
32
|
+
/**
|
|
33
|
+
* The text that will be rendered inside the label element.
|
|
34
|
+
* Can be omitted for editors without label to keep form layout.
|
|
35
|
+
*/
|
|
36
|
+
children?: any;
|
|
37
|
+
/**
|
|
38
|
+
* Specifies the validity of the editor. Used to define the editor is invalid.
|
|
39
|
+
*/
|
|
40
|
+
editorValid?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Specifies if the editor is disabled.
|
|
43
|
+
*/
|
|
44
|
+
editorDisabled?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* If enabled marks the label as optional.
|
|
47
|
+
*/
|
|
48
|
+
optional?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* The styles that are applied to the Label.
|
|
51
|
+
*/
|
|
52
|
+
style?: React.CSSProperties;
|
|
53
|
+
/**
|
|
54
|
+
* Sets a class of the Label DOM element.
|
|
55
|
+
*/
|
|
56
|
+
className?: string;
|
|
57
|
+
/**
|
|
58
|
+
* @hidden
|
|
59
|
+
*/
|
|
60
|
+
unstyled?: LabelsClassStructure;
|
|
61
|
+
}
|
|
62
|
+
/**
|
|
63
|
+
* Represents the KendoReact Label component.
|
|
64
|
+
*
|
|
65
|
+
* @example
|
|
66
|
+
* ```jsx
|
|
67
|
+
* const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
|
|
68
|
+
* const App = () => {
|
|
69
|
+
* const ddlRef = React.useRef(null);
|
|
70
|
+
* const labelId = 'ddl-sizes-label';
|
|
71
|
+
* const editorId = 'ddl-sizes';
|
|
72
|
+
*
|
|
73
|
+
* return (
|
|
74
|
+
* <div>
|
|
75
|
+
* <Label id={labelId} editorId={editorId} editorRef={ddlRef}>
|
|
76
|
+
* Shirt Size:
|
|
77
|
+
* </Label>
|
|
78
|
+
* <DropDownList
|
|
79
|
+
* ref={ddlRef}
|
|
80
|
+
* id={editorId}
|
|
81
|
+
* ariaLabelledBy={labelId}
|
|
82
|
+
* data={sizes}
|
|
83
|
+
* />
|
|
84
|
+
* <br />
|
|
85
|
+
* </div>
|
|
86
|
+
* );
|
|
87
|
+
* };
|
|
88
|
+
* ```
|
|
89
|
+
*/
|
|
90
|
+
export declare const Label: {
|
|
91
|
+
(props: LabelProps): React.JSX.Element;
|
|
92
|
+
propTypes: {
|
|
93
|
+
id: PropTypes.Requireable<string>;
|
|
94
|
+
editorId: PropTypes.Requireable<string>;
|
|
95
|
+
editorRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
|
|
96
|
+
current: PropTypes.Requireable<any>;
|
|
97
|
+
}> | null | undefined>>;
|
|
98
|
+
editorValid: PropTypes.Requireable<boolean>;
|
|
99
|
+
editorDisabled: PropTypes.Requireable<boolean>;
|
|
100
|
+
style: PropTypes.Requireable<object>;
|
|
101
|
+
className: PropTypes.Requireable<string>;
|
|
102
|
+
optional: PropTypes.Requireable<boolean>;
|
|
103
|
+
};
|
|
104
|
+
displayName: string;
|
|
105
|
+
};
|
|
@@ -12,4 +12,4 @@
|
|
|
12
12
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
13
13
|
*-------------------------------------------------------------------------------------------
|
|
14
14
|
*/
|
|
15
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactLabels={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl)}(this,
|
|
15
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KendoReactLabels={},e.React,e.PropTypes,e.KendoReactCommon,e.KendoReactIntl)}(this,function(e,t,o,a,l){"use strict";function s(e){var t=Object.create(null);return e&&Object.keys(e).forEach(function(o){if("default"!==o){var a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(t,o,a.get?a:{enumerable:!0,get:function(){return e[o]}})}}),t.default=e,Object.freeze(t)}var r=s(t);const n="labels.optional",i={[n]:"(Optional)"},d=e=>{const{id:t,editorId:o,editorRef:s,editorDisabled:d,children:c,editorValid:u,style:p,className:m,optional:b}=e,f=l.useLocalization(),y=b?f.toLanguageString(n,i[n]):"",g=y&&r.createElement("span",{className:"k-label-optional"},y),N=a.useUnstyled(),E=N&&N.uLabel,h=r.useCallback(e=>{if(s&&s.current&&!d){s.current.focus&&(e.preventDefault(),s.current.focus());const t=s.current.actionElement;t&&(e.preventDefault(),t.click())}},[s]),L=r.useMemo(()=>a.classNames(a.uLabel.label({c:E,empty:!c,invalid:!1===u,disabled:!0===d}),m),[E,c,u,d,m]);return r.createElement("label",{id:t,htmlFor:o,onClick:h,style:p,className:L},c,g)};d.propTypes={id:o.string,editorId:o.string,editorRef:o.oneOfType([o.func,o.shape({current:o.any})]),editorValid:o.bool,editorDisabled:o.bool,style:o.object,className:o.string,optional:o.bool},d.displayName="KendoReactLabel";const c=e=>{const t={direction:"start",...e},o=a.useUnstyled(),l=o&&o.uError,s=r.useMemo(()=>a.classNames(a.uError.wrapper({c:l,direction:t.direction}),t.className),[l,t.direction,t.className]);return r.createElement("div",{id:t.id,role:"alert",style:t.style,className:s},t.children)};c.propTypes={id:o.string,direction:o.oneOf(["start","end"]),children:o.oneOfType([o.element,o.node]),style:o.object,className:o.string},c.displayName="KendoReactError";const u=e=>{const t={direction:"start",...e},o=a.useUnstyled(),l=o&&o.uHint,s=r.useMemo(()=>a.classNames(a.uHint.wrapper({c:l,direction:t.direction,disabled:!0===t.editorDisabled}),t.className),[l,t.direction,t.editorDisabled,t.className]);return r.createElement("div",{id:t.id,style:t.style,className:s},t.children)};u.propTypes={id:o.string,direction:o.oneOf(["start","end"]),children:o.oneOfType([o.element,o.node]),style:o.object,className:o.string,editorDisabled:o.bool},u.displayName="KendoReactHint";const p=e=>{const[t,o]=r.useState({focused:!1}),{label:s,editorId:d,className:c,labelClassName:u,editorValue:p,editorPlaceholder:m,editorValid:b,editorDisabled:f,style:y,id:g,optional:N,unstyled:E,...h}=e,L=l.useLocalization(),O=N?L.toLanguageString(n,i[n]):"",T=O&&r.createElement("span",{className:"k-label-optional"},O),j=E&&E.uFloatingLabel,k=!m&&!p&&0!==p,D=a.classNames(a.uFloatingLabel.wrapper({c:j,focused:t.focused,empty:k,notEmpty:!k,disabled:f,isRtl:"rtl"===e.dir}),c),R=a.classNames(a.uFloatingLabel.label({c:j,focused:t.focused,empty:k,notEmpty:!k,invalid:!1===b,disabled:f}),u);return r.createElement("span",{...h,id:e.id,className:D,onFocus:e=>{o({focused:!0})},onBlur:e=>{o({focused:!1})},style:y,dir:e.dir},e.children,s?d?r.createElement("label",{id:g,htmlFor:d,className:R},s,T):r.createElement("span",{id:g,className:R},s,T):null)};p.propTypes={label:o.node,editorId:o.string,editorValue:o.oneOfType([o.string,o.bool,o.number]),editorPlaceholder:o.string,editorValid:o.bool,editorDisabled:o.bool,id:o.string,style:o.object,className:o.string,labelClassName:o.string,optional:o.bool},e.Error=c,e.FloatingLabel=p,e.Hint=u,e.Label=d});
|
package/index.d.mts
CHANGED
|
@@ -5,314 +5,8 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Represents the KendoReact Error component.
|
|
16
|
-
* Render the error text that will be shown underneath the form editor after a validation.
|
|
17
|
-
*/
|
|
18
|
-
declare const Error_2: {
|
|
19
|
-
(props: ErrorProps): JSX.Element;
|
|
20
|
-
propTypes: {
|
|
21
|
-
id: default_2.Requireable<string>;
|
|
22
|
-
direction: default_2.Requireable<string>;
|
|
23
|
-
children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
|
|
24
|
-
style: default_2.Requireable<object>;
|
|
25
|
-
className: default_2.Requireable<string>;
|
|
26
|
-
};
|
|
27
|
-
displayName: string;
|
|
28
|
-
};
|
|
29
|
-
export { Error_2 as Error }
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Represents the props of the KendoReact Error component.
|
|
33
|
-
*/
|
|
34
|
-
export declare interface ErrorProps {
|
|
35
|
-
/**
|
|
36
|
-
* Represents the id of the Error element.
|
|
37
|
-
* The value should be also set to the editor's `ariaDescribedBy` property.
|
|
38
|
-
*/
|
|
39
|
-
id?: string;
|
|
40
|
-
/**
|
|
41
|
-
* Specifies the alignment of the Error text.
|
|
42
|
-
*
|
|
43
|
-
* The possible values are:
|
|
44
|
-
* * (Default) `start`
|
|
45
|
-
* * `end`
|
|
46
|
-
*/
|
|
47
|
-
direction?: 'start' | 'end';
|
|
48
|
-
/**
|
|
49
|
-
* Determines the children nodes.
|
|
50
|
-
*/
|
|
51
|
-
children: any;
|
|
52
|
-
/**
|
|
53
|
-
* The styles that are applied to the Error.
|
|
54
|
-
*/
|
|
55
|
-
style?: React_2.CSSProperties;
|
|
56
|
-
/**
|
|
57
|
-
* Sets a class of the Error DOM element.
|
|
58
|
-
*/
|
|
59
|
-
className?: string;
|
|
60
|
-
/**
|
|
61
|
-
* @hidden
|
|
62
|
-
*/
|
|
63
|
-
unstyled?: LabelsClassStructure;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Represents the KendoReact FloatingLabel component.
|
|
68
|
-
*
|
|
69
|
-
* @example
|
|
70
|
-
* ```jsx
|
|
71
|
-
* const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
|
|
72
|
-
* const App = () => {
|
|
73
|
-
* const [ddlState, setDdlState] = React.useState();
|
|
74
|
-
* const editorId = 'ddl-sizes';
|
|
75
|
-
* return (
|
|
76
|
-
* <FloatingLabel label={'Shirt Size:'} editorId={editorId} editorValue={ddlState}>
|
|
77
|
-
* <DropDownList
|
|
78
|
-
* id={editorId}
|
|
79
|
-
* value={ddlState}
|
|
80
|
-
* data={sizes}
|
|
81
|
-
* onChange={(e) => setDdlState(e.target.value)}
|
|
82
|
-
* />
|
|
83
|
-
* </FloatingLabel>
|
|
84
|
-
* );
|
|
85
|
-
* };
|
|
86
|
-
* ```
|
|
87
|
-
*/
|
|
88
|
-
export declare const FloatingLabel: {
|
|
89
|
-
(props: FloatingLabelProps): JSX.Element;
|
|
90
|
-
propTypes: {
|
|
91
|
-
label: default_2.Requireable<default_2.ReactNodeLike>;
|
|
92
|
-
editorId: default_2.Requireable<string>;
|
|
93
|
-
editorValue: default_2.Requireable<NonNullable<string | number | boolean | null | undefined>>;
|
|
94
|
-
editorPlaceholder: default_2.Requireable<string>;
|
|
95
|
-
editorValid: default_2.Requireable<boolean>;
|
|
96
|
-
editorDisabled: default_2.Requireable<boolean>;
|
|
97
|
-
id: default_2.Requireable<string>;
|
|
98
|
-
style: default_2.Requireable<object>;
|
|
99
|
-
className: default_2.Requireable<string>;
|
|
100
|
-
labelClassName: default_2.Requireable<string>;
|
|
101
|
-
optional: default_2.Requireable<boolean>;
|
|
102
|
-
};
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
/**
|
|
106
|
-
* Represents the props of the KendoReact FloatingLabel component.
|
|
107
|
-
*/
|
|
108
|
-
export declare interface FloatingLabelProps extends KendoReactComponentBaseProps {
|
|
109
|
-
/**
|
|
110
|
-
* Represent the [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) property, which will be set to the `label` element.
|
|
111
|
-
*/
|
|
112
|
-
editorId?: string;
|
|
113
|
-
/**
|
|
114
|
-
* Specifies the value of the editor. Used to define if the editor is empty.
|
|
115
|
-
*/
|
|
116
|
-
editorValue?: any;
|
|
117
|
-
/**
|
|
118
|
-
* Specifies the placeholder of the editor. Used to define if the editor is empty.
|
|
119
|
-
*/
|
|
120
|
-
editorPlaceholder?: string;
|
|
121
|
-
/**
|
|
122
|
-
* Specifies if the validity of the editor. Used to define the editor is invalid.
|
|
123
|
-
*/
|
|
124
|
-
editorValid?: boolean;
|
|
125
|
-
/**
|
|
126
|
-
* Specifies if the editor is disabled.
|
|
127
|
-
*/
|
|
128
|
-
editorDisabled?: boolean;
|
|
129
|
-
/**
|
|
130
|
-
* Adds a floating label that describes the editor.
|
|
131
|
-
*/
|
|
132
|
-
label?: React_2.ReactNode;
|
|
133
|
-
/**
|
|
134
|
-
* The styles that are applied to the FloatingLabel.
|
|
135
|
-
*/
|
|
136
|
-
style?: React_2.CSSProperties;
|
|
137
|
-
/**
|
|
138
|
-
* Sets a class of the FloatingLabel DOM element.
|
|
139
|
-
*/
|
|
140
|
-
className?: string;
|
|
141
|
-
/**
|
|
142
|
-
* Sets the `className` of the label DOM element.
|
|
143
|
-
*/
|
|
144
|
-
labelClassName?: string;
|
|
145
|
-
/**
|
|
146
|
-
* Specifies the direction of the label.
|
|
147
|
-
*/
|
|
148
|
-
dir?: string;
|
|
149
|
-
/**
|
|
150
|
-
* Represents the id of the label element.
|
|
151
|
-
* The value should be also set to the editor's `ariaLabelledBy` property.
|
|
152
|
-
* Can be used when the editor is not containing native form element.
|
|
153
|
-
*/
|
|
154
|
-
id?: string;
|
|
155
|
-
/**
|
|
156
|
-
* If enabled, marks the label as optional.
|
|
157
|
-
*/
|
|
158
|
-
optional?: boolean;
|
|
159
|
-
/**
|
|
160
|
-
* @hidden
|
|
161
|
-
*/
|
|
162
|
-
unstyled?: LabelsClassStructure;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
/**
|
|
166
|
-
* Represents the KendoReact Hint component.
|
|
167
|
-
* Render the hint text that will be shown underneath the form editor.
|
|
168
|
-
*/
|
|
169
|
-
export declare const Hint: {
|
|
170
|
-
(props: HintProps): JSX.Element;
|
|
171
|
-
propTypes: {
|
|
172
|
-
id: default_2.Requireable<string>;
|
|
173
|
-
direction: default_2.Requireable<string>;
|
|
174
|
-
children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
|
|
175
|
-
style: default_2.Requireable<object>;
|
|
176
|
-
className: default_2.Requireable<string>;
|
|
177
|
-
editorDisabled: default_2.Requireable<boolean>;
|
|
178
|
-
};
|
|
179
|
-
displayName: string;
|
|
180
|
-
};
|
|
181
|
-
|
|
182
|
-
/**
|
|
183
|
-
* Represents the props of the KendoReact Hint component.
|
|
184
|
-
*/
|
|
185
|
-
export declare interface HintProps {
|
|
186
|
-
/**
|
|
187
|
-
* Represents the id of the Hint element.
|
|
188
|
-
* The value should be set to the editor `ariaDescribedBy` property.
|
|
189
|
-
*/
|
|
190
|
-
id?: string;
|
|
191
|
-
/**
|
|
192
|
-
* Spcifies the alignment of the Hint text.
|
|
193
|
-
*
|
|
194
|
-
* The possible values are:
|
|
195
|
-
* *(Default) `start`
|
|
196
|
-
* * `end`
|
|
197
|
-
*/
|
|
198
|
-
direction?: 'start' | 'end';
|
|
199
|
-
/**
|
|
200
|
-
* @hidden
|
|
201
|
-
*/
|
|
202
|
-
children: any;
|
|
203
|
-
/**
|
|
204
|
-
* The styles that are applied to the Hint.
|
|
205
|
-
*/
|
|
206
|
-
style?: React_2.CSSProperties;
|
|
207
|
-
/**
|
|
208
|
-
* Sets a class of the Hint DOM element.
|
|
209
|
-
*/
|
|
210
|
-
className?: string;
|
|
211
|
-
/**
|
|
212
|
-
* Specifies if the editor is disabled.
|
|
213
|
-
*/
|
|
214
|
-
editorDisabled?: boolean;
|
|
215
|
-
/**
|
|
216
|
-
* @hidden
|
|
217
|
-
*/
|
|
218
|
-
unstyled?: LabelsClassStructure;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
/**
|
|
222
|
-
* Represents the KendoReact Label component.
|
|
223
|
-
*
|
|
224
|
-
* @example
|
|
225
|
-
* ```jsx
|
|
226
|
-
* const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
|
|
227
|
-
* const App = () => {
|
|
228
|
-
* const ddlRef = React.useRef(null);
|
|
229
|
-
* const labelId = 'ddl-sizes-label';
|
|
230
|
-
* const editorId = 'ddl-sizes';
|
|
231
|
-
*
|
|
232
|
-
* return (
|
|
233
|
-
* <div>
|
|
234
|
-
* <Label id={labelId} editorId={editorId} editorRef={ddlRef}>
|
|
235
|
-
* Shirt Size:
|
|
236
|
-
* </Label>
|
|
237
|
-
* <DropDownList
|
|
238
|
-
* ref={ddlRef}
|
|
239
|
-
* id={editorId}
|
|
240
|
-
* ariaLabelledBy={labelId}
|
|
241
|
-
* data={sizes}
|
|
242
|
-
* />
|
|
243
|
-
* <br />
|
|
244
|
-
* </div>
|
|
245
|
-
* );
|
|
246
|
-
* };
|
|
247
|
-
* ```
|
|
248
|
-
*/
|
|
249
|
-
export declare const Label: {
|
|
250
|
-
(props: LabelProps): JSX.Element;
|
|
251
|
-
propTypes: {
|
|
252
|
-
id: default_2.Requireable<string>;
|
|
253
|
-
editorId: default_2.Requireable<string>;
|
|
254
|
-
editorRef: default_2.Requireable<NonNullable<((...args: any[]) => any) | default_2.InferProps<{
|
|
255
|
-
current: default_2.Requireable<any>;
|
|
256
|
-
}> | null | undefined>>;
|
|
257
|
-
editorValid: default_2.Requireable<boolean>;
|
|
258
|
-
editorDisabled: default_2.Requireable<boolean>;
|
|
259
|
-
style: default_2.Requireable<object>;
|
|
260
|
-
className: default_2.Requireable<string>;
|
|
261
|
-
optional: default_2.Requireable<boolean>;
|
|
262
|
-
};
|
|
263
|
-
displayName: string;
|
|
264
|
-
};
|
|
265
|
-
|
|
266
|
-
/**
|
|
267
|
-
* Represents the props of the KendoReact Label component.
|
|
268
|
-
*/
|
|
269
|
-
export declare interface LabelProps {
|
|
270
|
-
/**
|
|
271
|
-
* Represents the id of the label element.
|
|
272
|
-
* The value should be set to the editor `ariaLabelledBy` property.
|
|
273
|
-
* Can be used when the editor is not containing native form element.
|
|
274
|
-
*/
|
|
275
|
-
id?: string;
|
|
276
|
-
/**
|
|
277
|
-
* The id of the editor.
|
|
278
|
-
* Represent the [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) property, which will be set to the `label` element.
|
|
279
|
-
*/
|
|
280
|
-
editorId?: string;
|
|
281
|
-
/**
|
|
282
|
-
* An optional React ref to the editor.
|
|
283
|
-
* Used to redirect the click event to the editor when it does not contain native form element.
|
|
284
|
-
* To be able to work, the editor should have `focus` method or `actionElement` prop on it's ref.
|
|
285
|
-
*/
|
|
286
|
-
editorRef?: any;
|
|
287
|
-
/**
|
|
288
|
-
* The text that will be rendered inside the label element.
|
|
289
|
-
* Can be omitted for editors without label to keep form layout.
|
|
290
|
-
*/
|
|
291
|
-
children?: any;
|
|
292
|
-
/**
|
|
293
|
-
* Specifies the validity of the editor. Used to define the editor is invalid.
|
|
294
|
-
*/
|
|
295
|
-
editorValid?: boolean;
|
|
296
|
-
/**
|
|
297
|
-
* Specifies if the editor is disabled.
|
|
298
|
-
*/
|
|
299
|
-
editorDisabled?: boolean;
|
|
300
|
-
/**
|
|
301
|
-
* If enabled marks the label as optional.
|
|
302
|
-
*/
|
|
303
|
-
optional?: boolean;
|
|
304
|
-
/**
|
|
305
|
-
* The styles that are applied to the Label.
|
|
306
|
-
*/
|
|
307
|
-
style?: React_2.CSSProperties;
|
|
308
|
-
/**
|
|
309
|
-
* Sets a class of the Label DOM element.
|
|
310
|
-
*/
|
|
311
|
-
className?: string;
|
|
312
|
-
/**
|
|
313
|
-
* @hidden
|
|
314
|
-
*/
|
|
315
|
-
unstyled?: LabelsClassStructure;
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
export { }
|
|
8
|
+
import { Label, LabelProps } from './Label.js';
|
|
9
|
+
import { Error, ErrorProps } from './Error.js';
|
|
10
|
+
import { Hint, HintProps } from './Hint.js';
|
|
11
|
+
import { FloatingLabel, FloatingLabelProps } from './FloatingLabel.js';
|
|
12
|
+
export { FloatingLabel, FloatingLabelProps, Label, LabelProps, Error, ErrorProps, Hint, HintProps };
|
package/index.d.ts
CHANGED
|
@@ -5,314 +5,8 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Represents the KendoReact Error component.
|
|
16
|
-
* Render the error text that will be shown underneath the form editor after a validation.
|
|
17
|
-
*/
|
|
18
|
-
declare const Error_2: {
|
|
19
|
-
(props: ErrorProps): JSX.Element;
|
|
20
|
-
propTypes: {
|
|
21
|
-
id: default_2.Requireable<string>;
|
|
22
|
-
direction: default_2.Requireable<string>;
|
|
23
|
-
children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
|
|
24
|
-
style: default_2.Requireable<object>;
|
|
25
|
-
className: default_2.Requireable<string>;
|
|
26
|
-
};
|
|
27
|
-
displayName: string;
|
|
28
|
-
};
|
|
29
|
-
export { Error_2 as Error }
|
|
30
|
-
|
|
31
|
-
/**
|
|
32
|
-
* Represents the props of the KendoReact Error component.
|
|
33
|
-
*/
|
|
34
|
-
export declare interface ErrorProps {
|
|
35
|
-
/**
|
|
36
|
-
* Represents the id of the Error element.
|
|
37
|
-
* The value should be also set to the editor's `ariaDescribedBy` property.
|
|
38
|
-
*/
|
|
39
|
-
id?: string;
|
|
40
|
-
/**
|
|
41
|
-
* Specifies the alignment of the Error text.
|
|
42
|
-
*
|
|
43
|
-
* The possible values are:
|
|
44
|
-
* * (Default) `start`
|
|
45
|
-
* * `end`
|
|
46
|
-
*/
|
|
47
|
-
direction?: 'start' | 'end';
|
|
48
|
-
/**
|
|
49
|
-
* Determines the children nodes.
|
|
50
|
-
*/
|
|
51
|
-
children: any;
|
|
52
|
-
/**
|
|
53
|
-
* The styles that are applied to the Error.
|
|
54
|
-
*/
|
|
55
|
-
style?: React_2.CSSProperties;
|
|
56
|
-
/**
|
|
57
|
-
* Sets a class of the Error DOM element.
|
|
58
|
-
*/
|
|
59
|
-
className?: string;
|
|
60
|
-
/**
|
|
61
|
-
* @hidden
|
|
62
|
-
*/
|
|
63
|
-
unstyled?: LabelsClassStructure;
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/**
|
|
67
|
-
* Represents the KendoReact FloatingLabel component.
|
|
68
|
-
*
|
|
69
|
-
* @example
|
|
70
|
-
* ```jsx
|
|
71
|
-
* const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
|
|
72
|
-
* const App = () => {
|
|
73
|
-
* const [ddlState, setDdlState] = React.useState();
|
|
74
|
-
* const editorId = 'ddl-sizes';
|
|
75
|
-
* return (
|
|
76
|
-
* <FloatingLabel label={'Shirt Size:'} editorId={editorId} editorValue={ddlState}>
|
|
77
|
-
* <DropDownList
|
|
78
|
-
* id={editorId}
|
|
79
|
-
* value={ddlState}
|
|
80
|
-
* data={sizes}
|
|
81
|
-
* onChange={(e) => setDdlState(e.target.value)}
|
|
82
|
-
* />
|
|
83
|
-
* </FloatingLabel>
|
|
84
|
-
* );
|
|
85
|
-
* };
|
|
86
|
-
* ```
|
|
87
|
-
*/
|
|
88
|
-
export declare const FloatingLabel: {
|
|
89
|
-
(props: FloatingLabelProps): JSX.Element;
|
|
90
|
-
propTypes: {
|
|
91
|
-
label: default_2.Requireable<default_2.ReactNodeLike>;
|
|
92
|
-
editorId: default_2.Requireable<string>;
|
|
93
|
-
editorValue: default_2.Requireable<NonNullable<string | number | boolean | null | undefined>>;
|
|
94
|
-
editorPlaceholder: default_2.Requireable<string>;
|
|
95
|
-
editorValid: default_2.Requireable<boolean>;
|
|
96
|
-
editorDisabled: default_2.Requireable<boolean>;
|
|
97
|
-
id: default_2.Requireable<string>;
|
|
98
|
-
style: default_2.Requireable<object>;
|
|
99
|
-
className: default_2.Requireable<string>;
|
|
100
|
-
labelClassName: default_2.Requireable<string>;
|
|
101
|
-
optional: default_2.Requireable<boolean>;
|
|
102
|
-
};
|
|
103
|
-
};
|
|
104
|
-
|
|
105
|
-
/**
|
|
106
|
-
* Represents the props of the KendoReact FloatingLabel component.
|
|
107
|
-
*/
|
|
108
|
-
export declare interface FloatingLabelProps extends KendoReactComponentBaseProps {
|
|
109
|
-
/**
|
|
110
|
-
* Represent the [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) property, which will be set to the `label` element.
|
|
111
|
-
*/
|
|
112
|
-
editorId?: string;
|
|
113
|
-
/**
|
|
114
|
-
* Specifies the value of the editor. Used to define if the editor is empty.
|
|
115
|
-
*/
|
|
116
|
-
editorValue?: any;
|
|
117
|
-
/**
|
|
118
|
-
* Specifies the placeholder of the editor. Used to define if the editor is empty.
|
|
119
|
-
*/
|
|
120
|
-
editorPlaceholder?: string;
|
|
121
|
-
/**
|
|
122
|
-
* Specifies if the validity of the editor. Used to define the editor is invalid.
|
|
123
|
-
*/
|
|
124
|
-
editorValid?: boolean;
|
|
125
|
-
/**
|
|
126
|
-
* Specifies if the editor is disabled.
|
|
127
|
-
*/
|
|
128
|
-
editorDisabled?: boolean;
|
|
129
|
-
/**
|
|
130
|
-
* Adds a floating label that describes the editor.
|
|
131
|
-
*/
|
|
132
|
-
label?: React_2.ReactNode;
|
|
133
|
-
/**
|
|
134
|
-
* The styles that are applied to the FloatingLabel.
|
|
135
|
-
*/
|
|
136
|
-
style?: React_2.CSSProperties;
|
|
137
|
-
/**
|
|
138
|
-
* Sets a class of the FloatingLabel DOM element.
|
|
139
|
-
*/
|
|
140
|
-
className?: string;
|
|
141
|
-
/**
|
|
142
|
-
* Sets the `className` of the label DOM element.
|
|
143
|
-
*/
|
|
144
|
-
labelClassName?: string;
|
|
145
|
-
/**
|
|
146
|
-
* Specifies the direction of the label.
|
|
147
|
-
*/
|
|
148
|
-
dir?: string;
|
|
149
|
-
/**
|
|
150
|
-
* Represents the id of the label element.
|
|
151
|
-
* The value should be also set to the editor's `ariaLabelledBy` property.
|
|
152
|
-
* Can be used when the editor is not containing native form element.
|
|
153
|
-
*/
|
|
154
|
-
id?: string;
|
|
155
|
-
/**
|
|
156
|
-
* If enabled, marks the label as optional.
|
|
157
|
-
*/
|
|
158
|
-
optional?: boolean;
|
|
159
|
-
/**
|
|
160
|
-
* @hidden
|
|
161
|
-
*/
|
|
162
|
-
unstyled?: LabelsClassStructure;
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
/**
|
|
166
|
-
* Represents the KendoReact Hint component.
|
|
167
|
-
* Render the hint text that will be shown underneath the form editor.
|
|
168
|
-
*/
|
|
169
|
-
export declare const Hint: {
|
|
170
|
-
(props: HintProps): JSX.Element;
|
|
171
|
-
propTypes: {
|
|
172
|
-
id: default_2.Requireable<string>;
|
|
173
|
-
direction: default_2.Requireable<string>;
|
|
174
|
-
children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
|
|
175
|
-
style: default_2.Requireable<object>;
|
|
176
|
-
className: default_2.Requireable<string>;
|
|
177
|
-
editorDisabled: default_2.Requireable<boolean>;
|
|
178
|
-
};
|
|
179
|
-
displayName: string;
|
|
180
|
-
};
|
|
181
|
-
|
|
182
|
-
/**
|
|
183
|
-
* Represents the props of the KendoReact Hint component.
|
|
184
|
-
*/
|
|
185
|
-
export declare interface HintProps {
|
|
186
|
-
/**
|
|
187
|
-
* Represents the id of the Hint element.
|
|
188
|
-
* The value should be set to the editor `ariaDescribedBy` property.
|
|
189
|
-
*/
|
|
190
|
-
id?: string;
|
|
191
|
-
/**
|
|
192
|
-
* Spcifies the alignment of the Hint text.
|
|
193
|
-
*
|
|
194
|
-
* The possible values are:
|
|
195
|
-
* *(Default) `start`
|
|
196
|
-
* * `end`
|
|
197
|
-
*/
|
|
198
|
-
direction?: 'start' | 'end';
|
|
199
|
-
/**
|
|
200
|
-
* @hidden
|
|
201
|
-
*/
|
|
202
|
-
children: any;
|
|
203
|
-
/**
|
|
204
|
-
* The styles that are applied to the Hint.
|
|
205
|
-
*/
|
|
206
|
-
style?: React_2.CSSProperties;
|
|
207
|
-
/**
|
|
208
|
-
* Sets a class of the Hint DOM element.
|
|
209
|
-
*/
|
|
210
|
-
className?: string;
|
|
211
|
-
/**
|
|
212
|
-
* Specifies if the editor is disabled.
|
|
213
|
-
*/
|
|
214
|
-
editorDisabled?: boolean;
|
|
215
|
-
/**
|
|
216
|
-
* @hidden
|
|
217
|
-
*/
|
|
218
|
-
unstyled?: LabelsClassStructure;
|
|
219
|
-
}
|
|
220
|
-
|
|
221
|
-
/**
|
|
222
|
-
* Represents the KendoReact Label component.
|
|
223
|
-
*
|
|
224
|
-
* @example
|
|
225
|
-
* ```jsx
|
|
226
|
-
* const sizes = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
|
|
227
|
-
* const App = () => {
|
|
228
|
-
* const ddlRef = React.useRef(null);
|
|
229
|
-
* const labelId = 'ddl-sizes-label';
|
|
230
|
-
* const editorId = 'ddl-sizes';
|
|
231
|
-
*
|
|
232
|
-
* return (
|
|
233
|
-
* <div>
|
|
234
|
-
* <Label id={labelId} editorId={editorId} editorRef={ddlRef}>
|
|
235
|
-
* Shirt Size:
|
|
236
|
-
* </Label>
|
|
237
|
-
* <DropDownList
|
|
238
|
-
* ref={ddlRef}
|
|
239
|
-
* id={editorId}
|
|
240
|
-
* ariaLabelledBy={labelId}
|
|
241
|
-
* data={sizes}
|
|
242
|
-
* />
|
|
243
|
-
* <br />
|
|
244
|
-
* </div>
|
|
245
|
-
* );
|
|
246
|
-
* };
|
|
247
|
-
* ```
|
|
248
|
-
*/
|
|
249
|
-
export declare const Label: {
|
|
250
|
-
(props: LabelProps): JSX.Element;
|
|
251
|
-
propTypes: {
|
|
252
|
-
id: default_2.Requireable<string>;
|
|
253
|
-
editorId: default_2.Requireable<string>;
|
|
254
|
-
editorRef: default_2.Requireable<NonNullable<((...args: any[]) => any) | default_2.InferProps<{
|
|
255
|
-
current: default_2.Requireable<any>;
|
|
256
|
-
}> | null | undefined>>;
|
|
257
|
-
editorValid: default_2.Requireable<boolean>;
|
|
258
|
-
editorDisabled: default_2.Requireable<boolean>;
|
|
259
|
-
style: default_2.Requireable<object>;
|
|
260
|
-
className: default_2.Requireable<string>;
|
|
261
|
-
optional: default_2.Requireable<boolean>;
|
|
262
|
-
};
|
|
263
|
-
displayName: string;
|
|
264
|
-
};
|
|
265
|
-
|
|
266
|
-
/**
|
|
267
|
-
* Represents the props of the KendoReact Label component.
|
|
268
|
-
*/
|
|
269
|
-
export declare interface LabelProps {
|
|
270
|
-
/**
|
|
271
|
-
* Represents the id of the label element.
|
|
272
|
-
* The value should be set to the editor `ariaLabelledBy` property.
|
|
273
|
-
* Can be used when the editor is not containing native form element.
|
|
274
|
-
*/
|
|
275
|
-
id?: string;
|
|
276
|
-
/**
|
|
277
|
-
* The id of the editor.
|
|
278
|
-
* Represent the [`htmlFor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLLabelElement/htmlFor) property, which will be set to the `label` element.
|
|
279
|
-
*/
|
|
280
|
-
editorId?: string;
|
|
281
|
-
/**
|
|
282
|
-
* An optional React ref to the editor.
|
|
283
|
-
* Used to redirect the click event to the editor when it does not contain native form element.
|
|
284
|
-
* To be able to work, the editor should have `focus` method or `actionElement` prop on it's ref.
|
|
285
|
-
*/
|
|
286
|
-
editorRef?: any;
|
|
287
|
-
/**
|
|
288
|
-
* The text that will be rendered inside the label element.
|
|
289
|
-
* Can be omitted for editors without label to keep form layout.
|
|
290
|
-
*/
|
|
291
|
-
children?: any;
|
|
292
|
-
/**
|
|
293
|
-
* Specifies the validity of the editor. Used to define the editor is invalid.
|
|
294
|
-
*/
|
|
295
|
-
editorValid?: boolean;
|
|
296
|
-
/**
|
|
297
|
-
* Specifies if the editor is disabled.
|
|
298
|
-
*/
|
|
299
|
-
editorDisabled?: boolean;
|
|
300
|
-
/**
|
|
301
|
-
* If enabled marks the label as optional.
|
|
302
|
-
*/
|
|
303
|
-
optional?: boolean;
|
|
304
|
-
/**
|
|
305
|
-
* The styles that are applied to the Label.
|
|
306
|
-
*/
|
|
307
|
-
style?: React_2.CSSProperties;
|
|
308
|
-
/**
|
|
309
|
-
* Sets a class of the Label DOM element.
|
|
310
|
-
*/
|
|
311
|
-
className?: string;
|
|
312
|
-
/**
|
|
313
|
-
* @hidden
|
|
314
|
-
*/
|
|
315
|
-
unstyled?: LabelsClassStructure;
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
export { }
|
|
8
|
+
import { Label, LabelProps } from './Label.js';
|
|
9
|
+
import { Error, ErrorProps } from './Error.js';
|
|
10
|
+
import { Hint, HintProps } from './Hint.js';
|
|
11
|
+
import { FloatingLabel, FloatingLabelProps } from './FloatingLabel.js';
|
|
12
|
+
export { FloatingLabel, FloatingLabelProps, Label, LabelProps, Error, ErrorProps, Hint, HintProps };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
/**
|
|
9
|
+
* @hidden
|
|
10
|
+
*/
|
|
11
|
+
export declare const labelsOptional = "labels.optional";
|
|
12
|
+
/**
|
|
13
|
+
* @hidden
|
|
14
|
+
*/
|
|
15
|
+
export declare const messages: {
|
|
16
|
+
"labels.optional": string;
|
|
17
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @license
|
|
3
|
+
*-------------------------------------------------------------------------------------------
|
|
4
|
+
* Copyright © 2026 Progress Software Corporation. All rights reserved.
|
|
5
|
+
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
+
*-------------------------------------------------------------------------------------------
|
|
7
|
+
*/
|
|
8
|
+
import { PackageMetadata } from '@progress/kendo-licensing';
|
|
9
|
+
/**
|
|
10
|
+
* @hidden
|
|
11
|
+
*/
|
|
12
|
+
export declare const packageMetadata: PackageMetadata;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
// Generated file. DO NOT EDIT.
|
|
2
|
+
/**
|
|
3
|
+
* @hidden
|
|
4
|
+
*/
|
|
5
|
+
export const packageMetadata = Object.freeze({
|
|
6
|
+
name: '@progress/kendo-react-labels',
|
|
7
|
+
productName: 'KendoReact',
|
|
8
|
+
productCode: 'KENDOUIREACT',
|
|
9
|
+
productCodes: ['KENDOUIREACT'],
|
|
10
|
+
publishDate: 0,
|
|
11
|
+
version: '13.4.0-develop.1',
|
|
12
|
+
licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
|
|
13
|
+
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-labels",
|
|
3
|
-
"version": "13.
|
|
3
|
+
"version": "13.4.0-develop.1",
|
|
4
4
|
"description": "React Labels package provides components for labelling form editors. KendoReact Labels package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"sideEffects": false,
|
|
27
27
|
"peerDependencies": {
|
|
28
28
|
"@progress/kendo-licensing": "^1.7.2",
|
|
29
|
-
"@progress/kendo-react-common": "13.
|
|
30
|
-
"@progress/kendo-react-intl": "13.
|
|
29
|
+
"@progress/kendo-react-common": "13.4.0-develop.1",
|
|
30
|
+
"@progress/kendo-react-intl": "13.4.0-develop.1",
|
|
31
31
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
32
32
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
|
33
33
|
},
|
|
@@ -53,7 +53,13 @@
|
|
|
53
53
|
],
|
|
54
54
|
"@progress": {
|
|
55
55
|
"friendlyName": "Labels",
|
|
56
|
-
"framework": "KendoReact"
|
|
56
|
+
"framework": "KendoReact",
|
|
57
|
+
"package": {
|
|
58
|
+
"productName": "KendoReact",
|
|
59
|
+
"productCode": "KENDOUIREACT",
|
|
60
|
+
"publishDate": 1770218749,
|
|
61
|
+
"licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
|
|
62
|
+
}
|
|
57
63
|
},
|
|
58
64
|
"repository": {
|
|
59
65
|
"type": "git",
|