@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.
@@ -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({ 'k-disabled': disabled }, className);
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: 1684510733,
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
  };
@@ -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 _b = useRating(props.defaultValue || defaultProps.defaultValue, {
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 = _b[0], dispatchStateValue = _b[1];
82
- var _c = useRating(null, {
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 = _c[0], dispatchStateHover = _c[1];
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', style: (_a = { width: '12px' }, _a[dir === 'rtl' ? 'right' : 'left'] = '50%', _a) },
208
- !(props.icon || props.svgIconOutline) && React.createElement(IconWrap, { name: 'star-outline', icon: starOutlineIcon }),
209
- (props.icon || props.svgIconOutline) && React.createElement(IconWrap, { name: toIconName("".concat(props.icon, "-outline")), icon: props.svgIconOutline }))),
210
- half && (React.createElement("span", { className: 'k-rating-precision-part', style: { width: '12px' } },
211
- !(props.icon || props.svgIcon) && React.createElement(IconWrap, { name: 'star', icon: starIcon }),
212
- (props.icon || props.svgIcon) && React.createElement(IconWrap, { name: props.icon ? toIconName(props.icon) : undefined, icon: props.svgIcon }))),
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',
@@ -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: _this.props.vertical ? 'caret-alt-down' : 'caret-alt-left', svgIcon: _this.props.vertical ? caretAltDownIcon : caretAltLeftIcon, title: props.decrementTitle, onClick: props.decrement }),
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: _this.props.vertical ? 'caret-alt-up' : 'caret-alt-right', svgIcon: _this.props.vertical ? caretAltUpIcon : caretAltRightIcon, title: props.incrementTitle, onClick: props.increment })));
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)({ 'k-disabled': disabled }, className);
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: 1684510733,
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 _b = useRating(props.defaultValue || defaultProps.defaultValue, {
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 = _b[0], dispatchStateValue = _b[1];
85
- var _c = useRating(null, {
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 = _c[0], dispatchStateHover = _c[1];
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', style: (_a = { width: '12px' }, _a[dir === 'rtl' ? 'right' : 'left'] = '50%', _a) },
211
- !(props.icon || props.svgIconOutline) && React.createElement(kendo_react_common_1.IconWrap, { name: 'star-outline', icon: kendo_svg_icons_1.starOutlineIcon }),
212
- (props.icon || props.svgIconOutline) && React.createElement(kendo_react_common_1.IconWrap, { name: (0, kendo_react_common_1.toIconName)("".concat(props.icon, "-outline")), icon: props.svgIconOutline }))),
213
- half && (React.createElement("span", { className: 'k-rating-precision-part', style: { width: '12px' } },
214
- !(props.icon || props.svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { name: 'star', icon: kendo_svg_icons_1.starIcon }),
215
- (props.icon || props.svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { name: props.icon ? (0, kendo_react_common_1.toIconName)(props.icon) : undefined, icon: props.svgIcon }))),
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: _this.props.vertical ? 'caret-alt-down' : 'caret-alt-left', svgIcon: _this.props.vertical ? kendo_svg_icons_1.caretAltDownIcon : kendo_svg_icons_1.caretAltLeftIcon, title: props.decrementTitle, onClick: props.decrement }),
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: _this.props.vertical ? 'caret-alt-up' : 'caret-alt-right', svgIcon: _this.props.vertical ? kendo_svg_icons_1.caretAltUpIcon : kendo_svg_icons_1.caretAltRightIcon, title: props.incrementTitle, onClick: props.increment })));
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