@progress/kendo-react-layout 5.11.0-dev.202301301227 → 5.11.0-dev.202301311203

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 (9) 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.d.ts +14 -9
  4. package/dist/es/tabstrip/TabStripNavigation.js +66 -27
  5. package/dist/npm/package-metadata.js +1 -1
  6. package/dist/npm/tabstrip/TabStripNavigation.d.ts +14 -9
  7. package/dist/npm/tabstrip/TabStripNavigation.js +66 -27
  8. package/dist/systemjs/kendo-react-layout.js +1 -1
  9. 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: 1675080179,
8
+ publishDate: 1675165567,
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.d.ts CHANGED
@@ -56,18 +56,12 @@ export interface TabStripNavigationProps {
56
56
  * @hidden
57
57
  */
58
58
  nextButton?: React.ComponentType<ButtonProps>;
59
- }
60
- export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, TabStripNavigationStateProps, {}> {
61
- private itemsNavRef;
62
- constructor(props: TabStripNavigationProps);
63
59
  /**
64
60
  * @hidden
65
61
  */
66
- componentDidMount(): void;
67
- /**
68
- * @hidden
69
- */
70
- componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
62
+ dir?: 'ltr' | 'rtl';
63
+ }
64
+ export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, TabStripNavigationStateProps, {}> {
71
65
  /**
72
66
  * @hidden
73
67
  */
@@ -78,12 +72,23 @@ export declare class TabStripNavigation extends React.Component<TabStripNavigati
78
72
  selected: PropTypes.Requireable<number>;
79
73
  tabIndex: PropTypes.Requireable<number>;
80
74
  };
75
+ private itemsNavRef;
76
+ constructor(props: TabStripNavigationProps);
77
+ /**
78
+ * @hidden
79
+ */
80
+ componentDidMount(): void;
81
+ /**
82
+ * @hidden
83
+ */
84
+ componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
81
85
  /**
82
86
  * @hidden
83
87
  */
84
88
  render(): JSX.Element;
85
89
  private scrollToSelected;
86
90
  private horizontalScroll;
91
+ private isRtl;
87
92
  private onWheel;
88
93
  private arrowClickPrev;
89
94
  private arrowClickNext;
package/dist/es/tabstrip/TabStripNavigation.js CHANGED
@@ -42,10 +42,11 @@ var TabStripNavigation = /** @class */ (function (_super) {
42
42
  function TabStripNavigation(props) {
43
43
  var _this = _super.call(this, props) || this;
44
44
  _this.itemsNavRef = React.createRef();
45
- _this.onWheel = function (event) {
46
- event.stopPropagation();
47
- var direction = event.deltaY < 0 ? PREV : NEXT;
48
- _this.setNewScrollPosition(direction, event);
45
+ _this.isRtl = function () { return _this.props.dir === 'rtl'; };
46
+ _this.onWheel = function (e) {
47
+ e.stopPropagation();
48
+ var direction = e.deltaY < 0 ? PREV : NEXT;
49
+ _this.setNewScrollPosition(direction, e);
49
50
  };
50
51
  _this.arrowClickPrev = function (e) {
51
52
  _this.handleArrowClick(PREV, e);
@@ -64,29 +65,52 @@ var TabStripNavigation = /** @class */ (function (_super) {
64
65
  var horizontal = _this.horizontalScroll();
65
66
  var scrollEnd = horizontal ? list.scrollWidth - list.offsetWidth : list.scrollHeight - list.offsetHeight;
66
67
  var increment = (e.type === 'click' ? _this.props.buttonScrollSpeed : _this.props.mouseScrollSpeed) || 0;
67
- var prevScrollPosition = horizontal ? list.scrollLeft : list.scrollTop;
68
- if (direction === PREV && prevScrollPosition > 0) {
69
- prevScrollPosition -= increment;
68
+ var scrollPosition = horizontal ? list.scrollLeft : list.scrollTop;
69
+ var nextScrollPosition = horizontal ? list.scrollWidth - list.scrollLeft : list.scrollHeight - list.scrollTop;
70
+ var nextScrollPositionRtl = list.scrollWidth - (list.scrollLeft * -1);
71
+ if (_this.isRtl() && _this.horizontalScroll()) {
72
+ if (direction === PREV && scrollPosition < 0) {
73
+ scrollPosition += increment;
74
+ nextScrollPositionRtl += increment;
75
+ }
76
+ if (direction === NEXT && scrollPosition < scrollEnd) {
77
+ scrollPosition -= increment;
78
+ nextScrollPositionRtl -= increment;
79
+ }
80
+ scrollPosition = Math.min(0, Math.min(scrollEnd, scrollPosition));
70
81
  }
71
- if (direction === NEXT && prevScrollPosition < scrollEnd) {
72
- prevScrollPosition += increment;
82
+ else {
83
+ if (direction === PREV && scrollPosition > 0) {
84
+ scrollPosition -= increment;
85
+ nextScrollPosition += increment;
86
+ }
87
+ if (direction === NEXT && scrollPosition < scrollEnd) {
88
+ scrollPosition += increment;
89
+ nextScrollPosition -= increment;
90
+ }
91
+ scrollPosition = Math.max(0, Math.min(scrollEnd, scrollPosition));
73
92
  }
74
- prevScrollPosition = Math.max(0, Math.min(scrollEnd, prevScrollPosition));
93
+ var calculatePrev = scrollPosition === 0;
94
+ var scrollBehavior = e.type === 'click' ? DEFAULT_SCROLL_BEHAVIOR : undefined;
75
95
  if (horizontal) {
76
- list.scrollTo({ left: prevScrollPosition });
96
+ var calculateNext = _this.isRtl()
97
+ ? Math.round(nextScrollPositionRtl) <= list.clientWidth
98
+ || Math.floor(nextScrollPositionRtl) <= list.clientWidth
99
+ : Math.round(nextScrollPosition) <= list.clientWidth
100
+ || Math.floor(nextScrollPosition) <= list.clientWidth;
77
101
  _this.setState({
78
- disabledPrev: prevScrollPosition === 0,
79
- disabledNext: Math.round(list.scrollWidth - list.scrollLeft) === list.clientWidth
80
- || Math.floor(list.scrollWidth - list.scrollLeft) === list.clientWidth
102
+ disabledPrev: calculatePrev,
103
+ disabledNext: calculateNext
81
104
  });
105
+ list.scrollTo({ left: scrollPosition, behavior: scrollBehavior });
82
106
  }
83
107
  else {
84
- list.scrollTo({ top: prevScrollPosition });
85
108
  _this.setState({
86
- disabledPrev: prevScrollPosition === 0,
87
- disabledNext: Math.round(list.scrollHeight - list.scrollTop) === list.clientHeight
88
- || Math.floor(list.scrollHeight - list.scrollTop) === list.clientHeight
109
+ disabledPrev: calculatePrev,
110
+ disabledNext: Math.round(nextScrollPosition) <= list.clientHeight
111
+ || Math.floor(nextScrollPosition) <= list.clientHeight
89
112
  });
113
+ list.scrollTo({ top: scrollPosition, behavior: scrollBehavior });
90
114
  }
91
115
  };
92
116
  _this.renderArrow = function (type, disabled) {
@@ -165,30 +189,45 @@ var TabStripNavigation = /** @class */ (function (_super) {
165
189
  this.renderArrow(NEXT, this.state.disabledNext))) : (React.createElement("ul", { className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown }, tabs))));
166
190
  };
167
191
  TabStripNavigation.prototype.scrollToSelected = function () {
168
- var _a, _b;
192
+ var _a, _b, _c, _d;
169
193
  var list = this.itemsNavRef.current;
170
194
  var tab = list && list.children[this.props.selected || 0];
171
195
  if (tab instanceof HTMLElement && list instanceof HTMLElement) {
172
196
  var horizontal = this.horizontalScroll();
173
- var currentScrollOffset = horizontal ? list.scrollLeft : list.scrollTop;
174
197
  var listSize = horizontal ? list.offsetWidth : list.offsetHeight;
175
- var tabOffset = horizontal ? tab.offsetLeft - list.offsetLeft : tab.offsetTop - list.offsetTop;
176
198
  var tabSize = horizontal ? tab.offsetWidth : tab.offsetHeight;
177
199
  var scrollDir = horizontal ? 'left' : 'top';
200
+ var currentScrollOffset = horizontal ? list.scrollLeft : list.scrollTop;
178
201
  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));
202
+ if (this.isRtl()) {
203
+ var tabOffset = tab.offsetLeft;
204
+ currentScrollOffset = currentScrollOffset * -1;
205
+ if (tabOffset < 0) {
206
+ scrollPosition = tabOffset - tabSize + list.offsetLeft;
207
+ list.scrollTo((_a = {}, _a[scrollDir] = scrollPosition, _a.behavior = DEFAULT_SCROLL_BEHAVIOR, _a));
208
+ }
209
+ else if (tabOffset + tabSize > listSize - currentScrollOffset) {
210
+ scrollPosition = currentScrollOffset + tabOffset - tabSize;
211
+ list.scrollTo((_b = {}, _b[scrollDir] = scrollPosition, _b.behavior = DEFAULT_SCROLL_BEHAVIOR, _b));
212
+ }
182
213
  }
183
- else if (currentScrollOffset > tabOffset) {
184
- scrollPosition = tabOffset;
185
- list.scrollTo((_b = {}, _b[scrollDir] = scrollPosition, _b.behavior = DEFAULT_SCROLL_BEHAVIOR, _b));
214
+ else {
215
+ var tabOffset = horizontal ? tab.offsetLeft - list.offsetLeft : tab.offsetTop - list.offsetTop;
216
+ if (currentScrollOffset + listSize < tabOffset + tabSize) {
217
+ scrollPosition = tabOffset + tabSize - listSize;
218
+ list.scrollTo((_c = {}, _c[scrollDir] = scrollPosition, _c.behavior = DEFAULT_SCROLL_BEHAVIOR, _c));
219
+ }
220
+ else if (currentScrollOffset > tabOffset) {
221
+ scrollPosition = tabOffset;
222
+ list.scrollTo((_d = {}, _d[scrollDir] = scrollPosition, _d.behavior = DEFAULT_SCROLL_BEHAVIOR, _d));
223
+ }
186
224
  }
187
225
  }
188
226
  };
189
227
  TabStripNavigation.prototype.horizontalScroll = function () {
190
228
  return /top|bottom/.test(this.props.tabPosition || 'top');
191
229
  };
230
+ ;
192
231
  /**
193
232
  * @hidden
194
233
  */
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: 1675080179,
11
+ publishDate: 1675165567,
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.d.ts CHANGED
@@ -56,18 +56,12 @@ export interface TabStripNavigationProps {
56
56
  * @hidden
57
57
  */
58
58
  nextButton?: React.ComponentType<ButtonProps>;
59
- }
60
- export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, TabStripNavigationStateProps, {}> {
61
- private itemsNavRef;
62
- constructor(props: TabStripNavigationProps);
63
59
  /**
64
60
  * @hidden
65
61
  */
66
- componentDidMount(): void;
67
- /**
68
- * @hidden
69
- */
70
- componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
62
+ dir?: 'ltr' | 'rtl';
63
+ }
64
+ export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, TabStripNavigationStateProps, {}> {
71
65
  /**
72
66
  * @hidden
73
67
  */
@@ -78,12 +72,23 @@ export declare class TabStripNavigation extends React.Component<TabStripNavigati
78
72
  selected: PropTypes.Requireable<number>;
79
73
  tabIndex: PropTypes.Requireable<number>;
80
74
  };
75
+ private itemsNavRef;
76
+ constructor(props: TabStripNavigationProps);
77
+ /**
78
+ * @hidden
79
+ */
80
+ componentDidMount(): void;
81
+ /**
82
+ * @hidden
83
+ */
84
+ componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
81
85
  /**
82
86
  * @hidden
83
87
  */
84
88
  render(): JSX.Element;
85
89
  private scrollToSelected;
86
90
  private horizontalScroll;
91
+ private isRtl;
87
92
  private onWheel;
88
93
  private arrowClickPrev;
89
94
  private arrowClickNext;
package/dist/npm/tabstrip/TabStripNavigation.js CHANGED
@@ -45,10 +45,11 @@ var TabStripNavigation = /** @class */ (function (_super) {
45
45
  function TabStripNavigation(props) {
46
46
  var _this = _super.call(this, props) || this;
47
47
  _this.itemsNavRef = React.createRef();
48
- _this.onWheel = function (event) {
49
- event.stopPropagation();
50
- var direction = event.deltaY < 0 ? PREV : NEXT;
51
- _this.setNewScrollPosition(direction, event);
48
+ _this.isRtl = function () { return _this.props.dir === 'rtl'; };
49
+ _this.onWheel = function (e) {
50
+ e.stopPropagation();
51
+ var direction = e.deltaY < 0 ? PREV : NEXT;
52
+ _this.setNewScrollPosition(direction, e);
52
53
  };
53
54
  _this.arrowClickPrev = function (e) {
54
55
  _this.handleArrowClick(PREV, e);
@@ -67,29 +68,52 @@ var TabStripNavigation = /** @class */ (function (_super) {
67
68
  var horizontal = _this.horizontalScroll();
68
69
  var scrollEnd = horizontal ? list.scrollWidth - list.offsetWidth : list.scrollHeight - list.offsetHeight;
69
70
  var increment = (e.type === 'click' ? _this.props.buttonScrollSpeed : _this.props.mouseScrollSpeed) || 0;
70
- var prevScrollPosition = horizontal ? list.scrollLeft : list.scrollTop;
71
- if (direction === PREV && prevScrollPosition > 0) {
72
- prevScrollPosition -= increment;
71
+ var scrollPosition = horizontal ? list.scrollLeft : list.scrollTop;
72
+ var nextScrollPosition = horizontal ? list.scrollWidth - list.scrollLeft : list.scrollHeight - list.scrollTop;
73
+ var nextScrollPositionRtl = list.scrollWidth - (list.scrollLeft * -1);
74
+ if (_this.isRtl() && _this.horizontalScroll()) {
75
+ if (direction === PREV && scrollPosition < 0) {
76
+ scrollPosition += increment;
77
+ nextScrollPositionRtl += increment;
78
+ }
79
+ if (direction === NEXT && scrollPosition < scrollEnd) {
80
+ scrollPosition -= increment;
81
+ nextScrollPositionRtl -= increment;
82
+ }
83
+ scrollPosition = Math.min(0, Math.min(scrollEnd, scrollPosition));
73
84
  }
74
- if (direction === NEXT && prevScrollPosition < scrollEnd) {
75
- prevScrollPosition += increment;
85
+ else {
86
+ if (direction === PREV && scrollPosition > 0) {
87
+ scrollPosition -= increment;
88
+ nextScrollPosition += increment;
89
+ }
90
+ if (direction === NEXT && scrollPosition < scrollEnd) {
91
+ scrollPosition += increment;
92
+ nextScrollPosition -= increment;
93
+ }
94
+ scrollPosition = Math.max(0, Math.min(scrollEnd, scrollPosition));
76
95
  }
77
- prevScrollPosition = Math.max(0, Math.min(scrollEnd, prevScrollPosition));
96
+ var calculatePrev = scrollPosition === 0;
97
+ var scrollBehavior = e.type === 'click' ? DEFAULT_SCROLL_BEHAVIOR : undefined;
78
98
  if (horizontal) {
79
- list.scrollTo({ left: prevScrollPosition });
99
+ var calculateNext = _this.isRtl()
100
+ ? Math.round(nextScrollPositionRtl) <= list.clientWidth
101
+ || Math.floor(nextScrollPositionRtl) <= list.clientWidth
102
+ : Math.round(nextScrollPosition) <= list.clientWidth
103
+ || Math.floor(nextScrollPosition) <= list.clientWidth;
80
104
  _this.setState({
81
- disabledPrev: prevScrollPosition === 0,
82
- disabledNext: Math.round(list.scrollWidth - list.scrollLeft) === list.clientWidth
83
- || Math.floor(list.scrollWidth - list.scrollLeft) === list.clientWidth
105
+ disabledPrev: calculatePrev,
106
+ disabledNext: calculateNext
84
107
  });
108
+ list.scrollTo({ left: scrollPosition, behavior: scrollBehavior });
85
109
  }
86
110
  else {
87
- list.scrollTo({ top: prevScrollPosition });
88
111
  _this.setState({
89
- disabledPrev: prevScrollPosition === 0,
90
- disabledNext: Math.round(list.scrollHeight - list.scrollTop) === list.clientHeight
91
- || Math.floor(list.scrollHeight - list.scrollTop) === list.clientHeight
112
+ disabledPrev: calculatePrev,
113
+ disabledNext: Math.round(nextScrollPosition) <= list.clientHeight
114
+ || Math.floor(nextScrollPosition) <= list.clientHeight
92
115
  });
116
+ list.scrollTo({ top: scrollPosition, behavior: scrollBehavior });
93
117
  }
94
118
  };
95
119
  _this.renderArrow = function (type, disabled) {
@@ -168,30 +192,45 @@ var TabStripNavigation = /** @class */ (function (_super) {
168
192
  this.renderArrow(NEXT, this.state.disabledNext))) : (React.createElement("ul", { className: navClasses, role: 'tablist', tabIndex: this.props.tabIndex, onKeyDown: onKeyDown }, tabs))));
169
193
  };
170
194
  TabStripNavigation.prototype.scrollToSelected = function () {
171
- var _a, _b;
195
+ var _a, _b, _c, _d;
172
196
  var list = this.itemsNavRef.current;
173
197
  var tab = list && list.children[this.props.selected || 0];
174
198
  if (tab instanceof HTMLElement && list instanceof HTMLElement) {
175
199
  var horizontal = this.horizontalScroll();
176
- var currentScrollOffset = horizontal ? list.scrollLeft : list.scrollTop;
177
200
  var listSize = horizontal ? list.offsetWidth : list.offsetHeight;
178
- var tabOffset = horizontal ? tab.offsetLeft - list.offsetLeft : tab.offsetTop - list.offsetTop;
179
201
  var tabSize = horizontal ? tab.offsetWidth : tab.offsetHeight;
180
202
  var scrollDir = horizontal ? 'left' : 'top';
203
+ var currentScrollOffset = horizontal ? list.scrollLeft : list.scrollTop;
181
204
  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));
205
+ if (this.isRtl()) {
206
+ var tabOffset = tab.offsetLeft;
207
+ currentScrollOffset = currentScrollOffset * -1;
208
+ if (tabOffset < 0) {
209
+ scrollPosition = tabOffset - tabSize + list.offsetLeft;
210
+ list.scrollTo((_a = {}, _a[scrollDir] = scrollPosition, _a.behavior = DEFAULT_SCROLL_BEHAVIOR, _a));
211
+ }
212
+ else if (tabOffset + tabSize > listSize - currentScrollOffset) {
213
+ scrollPosition = currentScrollOffset + tabOffset - tabSize;
214
+ list.scrollTo((_b = {}, _b[scrollDir] = scrollPosition, _b.behavior = DEFAULT_SCROLL_BEHAVIOR, _b));
215
+ }
185
216
  }
186
- else if (currentScrollOffset > tabOffset) {
187
- scrollPosition = tabOffset;
188
- list.scrollTo((_b = {}, _b[scrollDir] = scrollPosition, _b.behavior = DEFAULT_SCROLL_BEHAVIOR, _b));
217
+ else {
218
+ var tabOffset = horizontal ? tab.offsetLeft - list.offsetLeft : tab.offsetTop - list.offsetTop;
219
+ if (currentScrollOffset + listSize < tabOffset + tabSize) {
220
+ scrollPosition = tabOffset + tabSize - listSize;
221
+ list.scrollTo((_c = {}, _c[scrollDir] = scrollPosition, _c.behavior = DEFAULT_SCROLL_BEHAVIOR, _c));
222
+ }
223
+ else if (currentScrollOffset > tabOffset) {
224
+ scrollPosition = tabOffset;
225
+ list.scrollTo((_d = {}, _d[scrollDir] = scrollPosition, _d.behavior = DEFAULT_SCROLL_BEHAVIOR, _d));
226
+ }
189
227
  }
190
228
  }
191
229
  };
192
230
  TabStripNavigation.prototype.horizontalScroll = function () {
193
231
  return /top|bottom/.test(this.props.tabPosition || 'top');
194
232
  };
233
+ ;
195
234
  /**
196
235
  * @hidden
197
236
  */