@progress/kendo-react-inputs 5.14.0-dev.202305191608 → 5.14.0-dev.202305250741
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/dist/cdn/js/kendo-react-inputs.js +1 -1
- package/dist/es/checkbox/Checkbox.js +1 -1
- package/dist/es/package-metadata.js +1 -1
- package/dist/es/rating/Rating.js +18 -15
- package/dist/es/slider/Slider.js +6 -2
- package/dist/npm/checkbox/Checkbox.js +1 -1
- package/dist/npm/package-metadata.js +1 -1
- package/dist/npm/rating/Rating.js +18 -15
- package/dist/npm/slider/Slider.js +6 -2
- package/dist/systemjs/kendo-react-inputs.js +1 -1
- package/package.json +16 -16
|
@@ -143,7 +143,7 @@ export var Checkbox = React.forwardRef(function (directProps, target) {
|
|
|
143
143
|
}
|
|
144
144
|
}, [onBlur, disabled, getImperativeHandle]);
|
|
145
145
|
var dir = useDir(elementRef, props.dir);
|
|
146
|
-
var checkboxClasses = classNames(
|
|
146
|
+
var checkboxClasses = classNames('k-checkbox-wrap', className);
|
|
147
147
|
var inputProps = __assign(__assign({ type: 'checkbox', className: classNames('k-checkbox', (_a = {},
|
|
148
148
|
_a["k-checkbox-".concat(kendoThemeMaps.sizeMap[size] || size)] = size,
|
|
149
149
|
_a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
|
|
@@ -5,7 +5,7 @@ export var packageMetadata = {
|
|
|
5
5
|
name: '@progress/kendo-react-inputs',
|
|
6
6
|
productName: 'KendoReact',
|
|
7
7
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate:
|
|
8
|
+
publishDate: 1684998588,
|
|
9
9
|
version: '',
|
|
10
10
|
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'
|
|
11
11
|
};
|
package/dist/es/rating/Rating.js
CHANGED
|
@@ -46,7 +46,6 @@ export var RatingPropsContext = createPropsContext();
|
|
|
46
46
|
* Obtaining the `ref` returns an object of type [RatingHandle]({% slug api_inputs_ratinghandle %}).
|
|
47
47
|
*/
|
|
48
48
|
export var Rating = React.forwardRef(function (directProps, ref) {
|
|
49
|
-
var _a;
|
|
50
49
|
var props = usePropsContext(RatingPropsContext, directProps);
|
|
51
50
|
var localization = useLocalization();
|
|
52
51
|
var target = React.useRef(null);
|
|
@@ -73,19 +72,19 @@ export var Rating = React.forwardRef(function (directProps, ref) {
|
|
|
73
72
|
var readonly = React.useMemo(function () { return props.readonly || defaultProps.readonly; }, [props.readonly]);
|
|
74
73
|
var disabled = React.useMemo(function () { return props.disabled || defaultProps.disabled; }, [props.disabled]);
|
|
75
74
|
var Item = React.useMemo(function () { return props.item || defaultProps.item; }, [props.item]);
|
|
76
|
-
var
|
|
75
|
+
var _a = useRating(props.defaultValue || defaultProps.defaultValue, {
|
|
77
76
|
state: props.value,
|
|
78
77
|
min: min,
|
|
79
78
|
max: max,
|
|
80
79
|
step: precision === 'half' ? step / 2 : step
|
|
81
|
-
}, handleChange), stateValue =
|
|
82
|
-
var
|
|
80
|
+
}, handleChange), stateValue = _a[0], dispatchStateValue = _a[1];
|
|
81
|
+
var _b = useRating(null, {
|
|
83
82
|
state: props.value,
|
|
84
83
|
min: min,
|
|
85
84
|
max: max,
|
|
86
85
|
step: precision === 'half' ? step / 2 : step,
|
|
87
86
|
precision: precision
|
|
88
|
-
}), stateHover =
|
|
87
|
+
}), stateHover = _b[0], dispatchStateHover = _b[1];
|
|
89
88
|
var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);
|
|
90
89
|
var hoveredValue = React.useMemo(function () { return stateHover; }, [stateHover]);
|
|
91
90
|
var selection = React.useMemo(function () { return props.selection || defaultProps.selection; }, [props.selection]);
|
|
@@ -204,18 +203,22 @@ export var Rating = React.forwardRef(function (directProps, ref) {
|
|
|
204
203
|
var selected = isSelected(itemValue, hoveredValue !== null ? hoveredValue : value, step, selection);
|
|
205
204
|
var hovered = isSelected(itemValue, hoveredValue, step, selection);
|
|
206
205
|
items.push(React.createElement(Item, { key: itemValue, value: itemValue, dir: dir, title: String(half ? toRound(itemValue - (step / 2), base) : itemValue), icon: props.icon, svgIcon: props.svgIcon, half: half, selected: selectedValue || selected, hovered: hovered, onClick: handleItemClick, onMouseMove: handleItemMouseMove, onMouseLeave: handleMouseLeave },
|
|
207
|
-
half && (React.createElement("span", { className: 'k-rating-precision-complement'
|
|
208
|
-
!(props.icon || props.svgIconOutline) &&
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
206
|
+
half && (React.createElement("span", { className: 'k-rating-precision-complement' },
|
|
207
|
+
!(props.icon || props.svgIconOutline) &&
|
|
208
|
+
React.createElement(IconWrap, { name: 'star-outline', icon: starOutlineIcon, style: { clipPath: "".concat(dir === 'rtl' ? 'inset(0 50% 0 0)' : 'inset(0 0 0 50%)') }, size: 'xlarge' }),
|
|
209
|
+
(props.icon || props.svgIconOutline) &&
|
|
210
|
+
React.createElement(IconWrap, { name: toIconName("".concat(props.icon, "-outline")), icon: props.svgIconOutline, size: 'xlarge' }))),
|
|
211
|
+
half && (React.createElement("span", { className: 'k-rating-precision-part' },
|
|
212
|
+
!(props.icon || props.svgIcon) &&
|
|
213
|
+
React.createElement(IconWrap, { name: 'star', icon: starIcon, style: { clipPath: "".concat(dir === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)') }, size: 'xlarge' }),
|
|
214
|
+
(props.icon || props.svgIcon) &&
|
|
215
|
+
React.createElement(IconWrap, { name: props.icon ? toIconName(props.icon) : undefined, icon: props.svgIcon, size: 'xlarge' }))),
|
|
213
216
|
half && (React.createElement("span", { style: { width: '24px', height: '24px', display: 'block' } })),
|
|
214
217
|
!half &&
|
|
215
|
-
(!(props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(IconWrap, { name: 'star', icon: starIcon })) ||
|
|
216
|
-
(!(props.icon || props.svgIcon) && !hovered && React.createElement(IconWrap, { name: 'star-outline', icon: starOutlineIcon })) ||
|
|
217
|
-
((props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(IconWrap, { name: props.icon, icon: props.svgIcon })) ||
|
|
218
|
-
((props.icon || props.svgIcon) && !hovered && React.createElement(IconWrap, { name: toIconName("".concat(props.icon, "-outline")), icon: props.svgIconOutline }))));
|
|
218
|
+
(!(props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(IconWrap, { name: 'star', icon: starIcon, size: 'xlarge' })) ||
|
|
219
|
+
(!(props.icon || props.svgIcon) && !hovered && !selected && React.createElement(IconWrap, { name: 'star-outline', icon: starOutlineIcon, size: 'xlarge' })) ||
|
|
220
|
+
((props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(IconWrap, { name: props.icon, icon: props.svgIcon, size: 'xlarge' })) ||
|
|
221
|
+
((props.icon || props.svgIcon) && !hovered && React.createElement(IconWrap, { name: toIconName("".concat(props.icon, "-outline")), icon: props.svgIconOutline, size: 'xlarge' }))));
|
|
219
222
|
}
|
|
220
223
|
return (React.createElement("span", { id: props.id, style: props.style, ref: ratingRef, role: "slider", dir: dir, tabIndex: getTabIndex(props.tabIndex, props.disabled, undefined), className: classNames('k-rating', {
|
|
221
224
|
'k-rtl': dir === 'rtl',
|
package/dist/es/slider/Slider.js
CHANGED
|
@@ -56,10 +56,14 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
56
56
|
if (!props.enabled) {
|
|
57
57
|
return props.children;
|
|
58
58
|
}
|
|
59
|
+
var increaseSvgArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? caretAltUpIcon : caretAltLeftIcon) : (_this.props.vertical ? caretAltUpIcon : caretAltRightIcon);
|
|
60
|
+
var decreaseSvgArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? caretAltDownIcon : caretAltRightIcon) : (_this.props.vertical ? caretAltDownIcon : caretAltLeftIcon);
|
|
61
|
+
var increaseFontArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? 'caret-alt-up' : 'caret-alt-left') : (_this.props.vertical ? 'caret-alt-up' : 'caret-alt-right');
|
|
62
|
+
var decreaseFontArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? 'caret-alt-down' : 'caret-alt-right') : (_this.props.vertical ? 'caret-alt-down' : 'caret-alt-left');
|
|
59
63
|
return (React.createElement(React.Fragment, null,
|
|
60
|
-
React.createElement(Button, { className: "k-button-decrease", rounded: 'full', icon:
|
|
64
|
+
React.createElement(Button, { className: "k-button-decrease", rounded: 'full', icon: decreaseFontArrow, svgIcon: decreaseSvgArrow, title: props.decrementTitle, onClick: props.decrement }),
|
|
61
65
|
props.children,
|
|
62
|
-
React.createElement(Button, { className: "k-button-increase", rounded: 'full', icon:
|
|
66
|
+
React.createElement(Button, { className: "k-button-increase", rounded: 'full', icon: increaseFontArrow, svgIcon: increaseSvgArrow, title: props.incrementTitle, onClick: props.increment })));
|
|
63
67
|
};
|
|
64
68
|
/**
|
|
65
69
|
* @hidden
|
|
@@ -146,7 +146,7 @@ exports.Checkbox = React.forwardRef(function (directProps, target) {
|
|
|
146
146
|
}
|
|
147
147
|
}, [onBlur, disabled, getImperativeHandle]);
|
|
148
148
|
var dir = (0, kendo_react_common_1.useDir)(elementRef, props.dir);
|
|
149
|
-
var checkboxClasses = (0, kendo_react_common_1.classNames)(
|
|
149
|
+
var checkboxClasses = (0, kendo_react_common_1.classNames)('k-checkbox-wrap', className);
|
|
150
150
|
var inputProps = __assign(__assign({ type: 'checkbox', className: (0, kendo_react_common_1.classNames)('k-checkbox', (_a = {},
|
|
151
151
|
_a["k-checkbox-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[size] || size)] = size,
|
|
152
152
|
_a["k-rounded-".concat(kendo_react_common_1.kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded,
|
|
@@ -8,7 +8,7 @@ exports.packageMetadata = {
|
|
|
8
8
|
name: '@progress/kendo-react-inputs',
|
|
9
9
|
productName: 'KendoReact',
|
|
10
10
|
productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
|
|
11
|
-
publishDate:
|
|
11
|
+
publishDate: 1684998588,
|
|
12
12
|
version: '',
|
|
13
13
|
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'
|
|
14
14
|
};
|
|
@@ -49,7 +49,6 @@ exports.RatingPropsContext = (0, kendo_react_common_1.createPropsContext)();
|
|
|
49
49
|
* Obtaining the `ref` returns an object of type [RatingHandle]({% slug api_inputs_ratinghandle %}).
|
|
50
50
|
*/
|
|
51
51
|
exports.Rating = React.forwardRef(function (directProps, ref) {
|
|
52
|
-
var _a;
|
|
53
52
|
var props = (0, kendo_react_common_1.usePropsContext)(exports.RatingPropsContext, directProps);
|
|
54
53
|
var localization = (0, kendo_react_intl_1.useLocalization)();
|
|
55
54
|
var target = React.useRef(null);
|
|
@@ -76,19 +75,19 @@ exports.Rating = React.forwardRef(function (directProps, ref) {
|
|
|
76
75
|
var readonly = React.useMemo(function () { return props.readonly || defaultProps.readonly; }, [props.readonly]);
|
|
77
76
|
var disabled = React.useMemo(function () { return props.disabled || defaultProps.disabled; }, [props.disabled]);
|
|
78
77
|
var Item = React.useMemo(function () { return props.item || defaultProps.item; }, [props.item]);
|
|
79
|
-
var
|
|
78
|
+
var _a = useRating(props.defaultValue || defaultProps.defaultValue, {
|
|
80
79
|
state: props.value,
|
|
81
80
|
min: min,
|
|
82
81
|
max: max,
|
|
83
82
|
step: precision === 'half' ? step / 2 : step
|
|
84
|
-
}, handleChange), stateValue =
|
|
85
|
-
var
|
|
83
|
+
}, handleChange), stateValue = _a[0], dispatchStateValue = _a[1];
|
|
84
|
+
var _b = useRating(null, {
|
|
86
85
|
state: props.value,
|
|
87
86
|
min: min,
|
|
88
87
|
max: max,
|
|
89
88
|
step: precision === 'half' ? step / 2 : step,
|
|
90
89
|
precision: precision
|
|
91
|
-
}), stateHover =
|
|
90
|
+
}), stateHover = _b[0], dispatchStateHover = _b[1];
|
|
92
91
|
var value = React.useMemo(function () { return props.value || stateValue; }, [props.value, stateValue]);
|
|
93
92
|
var hoveredValue = React.useMemo(function () { return stateHover; }, [stateHover]);
|
|
94
93
|
var selection = React.useMemo(function () { return props.selection || defaultProps.selection; }, [props.selection]);
|
|
@@ -207,18 +206,22 @@ exports.Rating = React.forwardRef(function (directProps, ref) {
|
|
|
207
206
|
var selected = (0, utils_1.isSelected)(itemValue, hoveredValue !== null ? hoveredValue : value, step, selection);
|
|
208
207
|
var hovered = (0, utils_1.isSelected)(itemValue, hoveredValue, step, selection);
|
|
209
208
|
items.push(React.createElement(Item, { key: itemValue, value: itemValue, dir: dir, title: String(half ? (0, utils_1.toRound)(itemValue - (step / 2), base) : itemValue), icon: props.icon, svgIcon: props.svgIcon, half: half, selected: selectedValue || selected, hovered: hovered, onClick: handleItemClick, onMouseMove: handleItemMouseMove, onMouseLeave: handleMouseLeave },
|
|
210
|
-
half && (React.createElement("span", { className: 'k-rating-precision-complement'
|
|
211
|
-
!(props.icon || props.svgIconOutline) &&
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
209
|
+
half && (React.createElement("span", { className: 'k-rating-precision-complement' },
|
|
210
|
+
!(props.icon || props.svgIconOutline) &&
|
|
211
|
+
React.createElement(kendo_react_common_1.IconWrap, { name: 'star-outline', icon: kendo_svg_icons_1.starOutlineIcon, style: { clipPath: "".concat(dir === 'rtl' ? 'inset(0 50% 0 0)' : 'inset(0 0 0 50%)') }, size: 'xlarge' }),
|
|
212
|
+
(props.icon || props.svgIconOutline) &&
|
|
213
|
+
React.createElement(kendo_react_common_1.IconWrap, { name: (0, kendo_react_common_1.toIconName)("".concat(props.icon, "-outline")), icon: props.svgIconOutline, size: 'xlarge' }))),
|
|
214
|
+
half && (React.createElement("span", { className: 'k-rating-precision-part' },
|
|
215
|
+
!(props.icon || props.svgIcon) &&
|
|
216
|
+
React.createElement(kendo_react_common_1.IconWrap, { name: 'star', icon: kendo_svg_icons_1.starIcon, style: { clipPath: "".concat(dir === 'rtl' ? 'inset(0 0 0 50%)' : 'inset(0 50% 0 0)') }, size: 'xlarge' }),
|
|
217
|
+
(props.icon || props.svgIcon) &&
|
|
218
|
+
React.createElement(kendo_react_common_1.IconWrap, { name: props.icon ? (0, kendo_react_common_1.toIconName)(props.icon) : undefined, icon: props.svgIcon, size: 'xlarge' }))),
|
|
216
219
|
half && (React.createElement("span", { style: { width: '24px', height: '24px', display: 'block' } })),
|
|
217
220
|
!half &&
|
|
218
|
-
(!(props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(kendo_react_common_1.IconWrap, { name: 'star', icon: kendo_svg_icons_1.starIcon })) ||
|
|
219
|
-
(!(props.icon || props.svgIcon) && !hovered && React.createElement(kendo_react_common_1.IconWrap, { name: 'star-outline', icon: kendo_svg_icons_1.starOutlineIcon })) ||
|
|
220
|
-
((props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(kendo_react_common_1.IconWrap, { name: props.icon, icon: props.svgIcon })) ||
|
|
221
|
-
((props.icon || props.svgIcon) && !hovered && React.createElement(kendo_react_common_1.IconWrap, { name: (0, kendo_react_common_1.toIconName)("".concat(props.icon, "-outline")), icon: props.svgIconOutline }))));
|
|
221
|
+
(!(props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(kendo_react_common_1.IconWrap, { name: 'star', icon: kendo_svg_icons_1.starIcon, size: 'xlarge' })) ||
|
|
222
|
+
(!(props.icon || props.svgIcon) && !hovered && !selected && React.createElement(kendo_react_common_1.IconWrap, { name: 'star-outline', icon: kendo_svg_icons_1.starOutlineIcon, size: 'xlarge' })) ||
|
|
223
|
+
((props.icon || props.svgIcon) && (hovered || (selected && !hovered)) && React.createElement(kendo_react_common_1.IconWrap, { name: props.icon, icon: props.svgIcon, size: 'xlarge' })) ||
|
|
224
|
+
((props.icon || props.svgIcon) && !hovered && React.createElement(kendo_react_common_1.IconWrap, { name: (0, kendo_react_common_1.toIconName)("".concat(props.icon, "-outline")), icon: props.svgIconOutline, size: 'xlarge' }))));
|
|
222
225
|
}
|
|
223
226
|
return (React.createElement("span", { id: props.id, style: props.style, ref: ratingRef, role: "slider", dir: dir, tabIndex: (0, kendo_react_common_1.getTabIndex)(props.tabIndex, props.disabled, undefined), className: (0, kendo_react_common_1.classNames)('k-rating', {
|
|
224
227
|
'k-rtl': dir === 'rtl',
|
|
@@ -59,10 +59,14 @@ var SliderWithoutContext = /** @class */ (function (_super) {
|
|
|
59
59
|
if (!props.enabled) {
|
|
60
60
|
return props.children;
|
|
61
61
|
}
|
|
62
|
+
var increaseSvgArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? kendo_svg_icons_1.caretAltUpIcon : kendo_svg_icons_1.caretAltLeftIcon) : (_this.props.vertical ? kendo_svg_icons_1.caretAltUpIcon : kendo_svg_icons_1.caretAltRightIcon);
|
|
63
|
+
var decreaseSvgArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? kendo_svg_icons_1.caretAltDownIcon : kendo_svg_icons_1.caretAltRightIcon) : (_this.props.vertical ? kendo_svg_icons_1.caretAltDownIcon : kendo_svg_icons_1.caretAltLeftIcon);
|
|
64
|
+
var increaseFontArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? 'caret-alt-up' : 'caret-alt-left') : (_this.props.vertical ? 'caret-alt-up' : 'caret-alt-right');
|
|
65
|
+
var decreaseFontArrow = _this.state.dir === 'rtl' ? (_this.props.vertical ? 'caret-alt-down' : 'caret-alt-right') : (_this.props.vertical ? 'caret-alt-down' : 'caret-alt-left');
|
|
62
66
|
return (React.createElement(React.Fragment, null,
|
|
63
|
-
React.createElement(kendo_react_buttons_1.Button, { className: "k-button-decrease", rounded: 'full', icon:
|
|
67
|
+
React.createElement(kendo_react_buttons_1.Button, { className: "k-button-decrease", rounded: 'full', icon: decreaseFontArrow, svgIcon: decreaseSvgArrow, title: props.decrementTitle, onClick: props.decrement }),
|
|
64
68
|
props.children,
|
|
65
|
-
React.createElement(kendo_react_buttons_1.Button, { className: "k-button-increase", rounded: 'full', icon:
|
|
69
|
+
React.createElement(kendo_react_buttons_1.Button, { className: "k-button-increase", rounded: 'full', icon: increaseFontArrow, svgIcon: increaseSvgArrow, title: props.incrementTitle, onClick: props.increment })));
|
|
66
70
|
};
|
|
67
71
|
/**
|
|
68
72
|
* @hidden
|