@progress/kendo-react-layout 5.9.0-dev.202210250906 → 5.9.0

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.
Files changed (7) hide show
  1. package/dist/cdn/js/kendo-react-layout.js +1 -1
  2. package/dist/es/package-metadata.js +1 -1
  3. package/dist/es/tabstrip/TabStripNavigation.js +22 -4
  4. package/dist/npm/package-metadata.js +1 -1
  5. package/dist/npm/tabstrip/TabStripNavigation.js +22 -4
  6. package/dist/systemjs/kendo-react-layout.js +1 -1
  7. package/package.json +13 -13
package/dist/es/package-metadata.js CHANGED
@@ -5,7 +5,7 @@ export var packageMetadata = {
5
5
  name: '@progress/kendo-react-layout',
6
6
  productName: 'KendoReact',
7
7
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
8
- publishDate: 1666687829,
8
+ publishDate: 1666770995,
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/tabstrip/TabStripNavigation.js CHANGED
@@ -34,6 +34,7 @@ import { Button } from '@progress/kendo-react-buttons';
34
34
  */
35
35
  var times = function (count) { return Array.apply(null, Array(count)); };
36
36
  var preventDefault = function (e) { return e.preventDefault(); };
37
+ var DEFAULT_SCROLL_BEHAVIOR = 'smooth';
37
38
  var PREV = 'prev';
38
39
  var NEXT = 'next';
39
40
  var TabStripNavigation = /** @class */ (function (_super) {
@@ -72,17 +73,19 @@ var TabStripNavigation = /** @class */ (function (_super) {
72
73
  }
73
74
  prevScrollPosition = Math.max(0, Math.min(scrollEnd, prevScrollPosition));
74
75
  if (horizontal) {
75
- list.scrollLeft = prevScrollPosition;
76
+ list.scrollTo({ left: prevScrollPosition });
76
77
  _this.setState({
77
78
  disabledPrev: prevScrollPosition === 0,
78
79
  disabledNext: Math.round(list.scrollWidth - list.scrollLeft) === list.clientWidth
80
+ || Math.floor(list.scrollWidth - list.scrollLeft) === list.clientWidth
79
81
  });
80
82
  }
81
83
  else {
82
- list.scrollTop = prevScrollPosition;
84
+ list.scrollTo({ top: prevScrollPosition });
83
85
  _this.setState({
84
86
  disabledPrev: prevScrollPosition === 0,
85
87
  disabledNext: Math.round(list.scrollHeight - list.scrollTop) === list.clientHeight
88
+ || Math.floor(list.scrollHeight - list.scrollTop) === list.clientHeight
86
89
  });
87
90
  }
88
91
  };
@@ -162,10 +165,25 @@ var TabStripNavigation = /** @class */ (function (_super) {
162
165
  this.renderArrow(NEXT, this.state.disabledNext))) : (React.createElement("ul", { className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown }, tabs))));
163
166
  };
164
167
  TabStripNavigation.prototype.scrollToSelected = function () {
168
+ var _a, _b;
165
169
  var list = this.itemsNavRef.current;
166
170
  var tab = list && list.children[this.props.selected || 0];
167
- if (tab) {
168
- tab.scrollIntoView({ behavior: 'smooth' });
171
+ if (tab instanceof HTMLElement && list instanceof HTMLElement) {
172
+ var horizontal = this.horizontalScroll();
173
+ var currentScrollOffset = horizontal ? list.scrollLeft : list.scrollTop;
174
+ var listSize = horizontal ? list.offsetWidth : list.offsetHeight;
175
+ var tabOffset = horizontal ? tab.offsetLeft - list.offsetLeft : tab.offsetTop - list.offsetTop;
176
+ var tabSize = horizontal ? tab.offsetWidth : tab.offsetHeight;
177
+ var scrollDir = horizontal ? 'left' : 'top';
178
+ var scrollPosition = 0;
179
+ if (currentScrollOffset + listSize < tabOffset + tabSize) {
180
+ scrollPosition = tabOffset + tabSize - listSize;
181
+ list.scrollTo((_a = {}, _a[scrollDir] = scrollPosition, _a.behavior = DEFAULT_SCROLL_BEHAVIOR, _a));
182
+ }
183
+ else if (currentScrollOffset > tabOffset) {
184
+ scrollPosition = tabOffset;
185
+ list.scrollTo((_b = {}, _b[scrollDir] = scrollPosition, _b.behavior = DEFAULT_SCROLL_BEHAVIOR, _b));
186
+ }
169
187
  }
170
188
  };
171
189
  TabStripNavigation.prototype.horizontalScroll = function () {
package/dist/npm/package-metadata.js CHANGED
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-react-layout',
9
9
  productName: 'KendoReact',
10
10
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
11
- publishDate: 1666687829,
11
+ publishDate: 1666770995,
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
  };
package/dist/npm/tabstrip/TabStripNavigation.js CHANGED
@@ -37,6 +37,7 @@ var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
37
37
  */
38
38
  var times = function (count) { return Array.apply(null, Array(count)); };
39
39
  var preventDefault = function (e) { return e.preventDefault(); };
40
+ var DEFAULT_SCROLL_BEHAVIOR = 'smooth';
40
41
  var PREV = 'prev';
41
42
  var NEXT = 'next';
42
43
  var TabStripNavigation = /** @class */ (function (_super) {
@@ -75,17 +76,19 @@ var TabStripNavigation = /** @class */ (function (_super) {
75
76
  }
76
77
  prevScrollPosition = Math.max(0, Math.min(scrollEnd, prevScrollPosition));
77
78
  if (horizontal) {
78
- list.scrollLeft = prevScrollPosition;
79
+ list.scrollTo({ left: prevScrollPosition });
79
80
  _this.setState({
80
81
  disabledPrev: prevScrollPosition === 0,
81
82
  disabledNext: Math.round(list.scrollWidth - list.scrollLeft) === list.clientWidth
83
+ || Math.floor(list.scrollWidth - list.scrollLeft) === list.clientWidth
82
84
  });
83
85
  }
84
86
  else {
85
- list.scrollTop = prevScrollPosition;
87
+ list.scrollTo({ top: prevScrollPosition });
86
88
  _this.setState({
87
89
  disabledPrev: prevScrollPosition === 0,
88
90
  disabledNext: Math.round(list.scrollHeight - list.scrollTop) === list.clientHeight
91
+ || Math.floor(list.scrollHeight - list.scrollTop) === list.clientHeight
89
92
  });
90
93
  }
91
94
  };
@@ -165,10 +168,25 @@ var TabStripNavigation = /** @class */ (function (_super) {
165
168
  this.renderArrow(NEXT, this.state.disabledNext))) : (React.createElement("ul", { className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown }, tabs))));
166
169
  };
167
170
  TabStripNavigation.prototype.scrollToSelected = function () {
171
+ var _a, _b;
168
172
  var list = this.itemsNavRef.current;
169
173
  var tab = list && list.children[this.props.selected || 0];
170
- if (tab) {
171
- tab.scrollIntoView({ behavior: 'smooth' });
174
+ if (tab instanceof HTMLElement && list instanceof HTMLElement) {
175
+ var horizontal = this.horizontalScroll();
176
+ var currentScrollOffset = horizontal ? list.scrollLeft : list.scrollTop;
177
+ var listSize = horizontal ? list.offsetWidth : list.offsetHeight;
178
+ var tabOffset = horizontal ? tab.offsetLeft - list.offsetLeft : tab.offsetTop - list.offsetTop;
179
+ var tabSize = horizontal ? tab.offsetWidth : tab.offsetHeight;
180
+ var scrollDir = horizontal ? 'left' : 'top';
181
+ var scrollPosition = 0;
182
+ if (currentScrollOffset + listSize < tabOffset + tabSize) {
183
+ scrollPosition = tabOffset + tabSize - listSize;
184
+ list.scrollTo((_a = {}, _a[scrollDir] = scrollPosition, _a.behavior = DEFAULT_SCROLL_BEHAVIOR, _a));
185
+ }
186
+ else if (currentScrollOffset > tabOffset) {
187
+ scrollPosition = tabOffset;
188
+ list.scrollTo((_b = {}, _b[scrollDir] = scrollPosition, _b.behavior = DEFAULT_SCROLL_BEHAVIOR, _b));
189
+ }
172
190
  }
173
191
  };
174
192
  TabStripNavigation.prototype.horizontalScroll = function () {