@progress/kendo-react-layout 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.
@@ -31,7 +31,7 @@ export var BottomNavigationItem = React.forwardRef(function (props, ref) {
31
31
  var ItemComp = item;
32
32
  var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
33
33
  (React.createElement(React.Fragment, null,
34
- (icon || svgIcon) && React.createElement(IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon }),
34
+ (icon || svgIcon) && React.createElement(IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon, size: 'xlarge' }),
35
35
  text && React.createElement("span", { className: 'k-bottom-nav-item-text', style: { userSelect: 'none' } }, text)))));
36
36
  return renderer !== undefined ? renderer.call(undefined, bottomNavItem, props) : bottomNavItem;
37
37
  });
@@ -64,7 +64,7 @@ export var Breadcrumb = React.forwardRef(function (props, ref) {
64
64
  React.createElement(React.Fragment, null, props.data.map(function (item, index, data) {
65
65
  var key = item[valueField];
66
66
  return (React.createElement(ListItemComponent, { key: key, isFirstItem: index === 0, isLastItem: data.length - 1 === index },
67
- index !== 0 && React.createElement(DelimiterComponent, null),
67
+ index !== 0 && React.createElement(DelimiterComponent, { dir: dir }),
68
68
  React.createElement(LinkComponent, __assign({ isLast: data.length - 1 === index, isFirst: index === 0, id: String(key), icon: item[iconField] || undefined, iconClass: item[iconClassField] ? String(item[iconClassField]) : undefined, text: item[textField] ? String(item[textField]) : undefined, disabled: item.disabled || false, onItemSelect: handleItemSelect, onKeyDown: handleKeyDown }, props))));
69
69
  })))));
70
70
  });
@@ -19,6 +19,10 @@ export interface BreadcrumbDelimiterProps {
19
19
  * Sets the `tabIndex` attribute to the BreadcrumbDelimiter.
20
20
  */
21
21
  tabIndex?: number;
22
+ /**
23
+ * @hidden
24
+ */
25
+ dir?: string;
22
26
  }
23
27
  /**
24
28
  * Represents the target (element, props, and focus()) of the BreadcrumbDelimiter.
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import * as PropTypes from 'prop-types';
3
3
  import { validatePackage } from '@progress/kendo-licensing';
4
4
  import { IconWrap } from '@progress/kendo-react-common';
5
- import { chevronRightIcon } from '@progress/kendo-svg-icons';
5
+ import { chevronLeftIcon, chevronRightIcon } from '@progress/kendo-svg-icons';
6
6
  import { packageMetadata } from '../package-metadata';
7
7
  /**
8
8
  * Represents the BreadcrumbDelimiter component.
@@ -19,13 +19,14 @@ export var BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
19
19
  });
20
20
  });
21
21
  React.useImperativeHandle(ref, function () { return target.current; });
22
- return (React.createElement(IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, "aria-hidden": true, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", icon: chevronRightIcon, className: "k-breadcrumb-delimiter-icon" }));
22
+ return (React.createElement(IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, "aria-hidden": true, tabIndex: props.tabIndex, style: props.style, name: props.dir === 'rtl' ? 'chevron-left' : 'chevron-right', icon: props.dir === 'rtl' ? chevronLeftIcon : chevronRightIcon, className: "k-breadcrumb-delimiter-icon", size: 'xsmall' }));
23
23
  });
24
24
  var propTypes = {
25
25
  id: PropTypes.string,
26
26
  className: PropTypes.string,
27
27
  style: PropTypes.object,
28
- tabIndex: PropTypes.number
28
+ tabIndex: PropTypes.number,
29
+ dir: PropTypes.string
29
30
  };
30
31
  BreadcrumbDelimiter.displayName = 'KendoReactBreadcrumbDelimiter';
31
32
  BreadcrumbDelimiter.propTypes = propTypes;
@@ -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: 1684510550,
8
+ publishDate: 1684998399,
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
  };
@@ -121,7 +121,7 @@ var Splitter = /** @class */ (function (_super) {
121
121
  var barKey = paneKey + 1;
122
122
  if (index + 1 < panes.length) {
123
123
  var next = panes[index + 1];
124
- splitterBar = (React.createElement(SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, ariaLabel: ariaLabel, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize }));
124
+ splitterBar = (React.createElement(SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, ariaLabel: ariaLabel, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize, isRtl: _this.isRtl }));
125
125
  }
126
126
  var splitterPane = (React.createElement(SplitterPane, __assign({ key: paneKey }, pane), panesContent[index]));
127
127
  return [splitterPane, splitterBar];
@@ -9,6 +9,7 @@ export interface SplitterBarProps {
9
9
  prev: SplitterPaneExtendedProps;
10
10
  next: SplitterPaneExtendedProps;
11
11
  ariaLabel?: string;
12
+ isRtl?: boolean;
12
13
  onDrag: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
13
14
  onToggle: (index: number, nativeEvent: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
14
15
  onKeyboardResize: (element: HTMLDivElement, index: number, delta: number, nativeEvent: React.KeyboardEvent<HTMLDivElement>) => void;
@@ -144,39 +144,39 @@ var SplitterBar = /** @class */ (function (_super) {
144
144
  React.createElement(IconWrap, { name: this.props.prev.collapsible
145
145
  ? isHorizontal
146
146
  ? this.props.prev.collapsed
147
- ? 'caret-alt-right'
148
- : 'caret-alt-left'
147
+ ? (this.props.isRtl ? 'caret-alt-left' : 'caret-alt-right')
148
+ : (this.props.isRtl ? 'caret-alt-right' : 'caret-alt-left')
149
149
  : this.props.prev.collapsed
150
150
  ? 'caret-alt-down'
151
151
  : 'caret-alt-up'
152
152
  : undefined, icon: this.props.prev.collapsible
153
153
  ? isHorizontal
154
154
  ? this.props.prev.collapsed
155
- ? caretAltRightIcon
156
- : caretAltLeftIcon
155
+ ? (this.props.isRtl ? caretAltLeftIcon : caretAltRightIcon)
156
+ : (this.props.isRtl ? caretAltRightIcon : caretAltLeftIcon)
157
157
  : this.props.prev.collapsed
158
158
  ? caretAltDownIcon
159
159
  : caretAltUpIcon
160
- : undefined })),
160
+ : undefined, size: 'xsmall' })),
161
161
  React.createElement("div", { className: 'k-resize-handle' }),
162
162
  this.props.next.collapsible && React.createElement("div", { className: 'k-collapse-next', onClick: this.onNextToggle },
163
163
  React.createElement(IconWrap, { name: this.props.next.collapsible
164
164
  ? isHorizontal
165
165
  ? this.props.next.collapsed
166
- ? 'caret-alt-left'
167
- : 'caret-alt-right'
166
+ ? (this.props.isRtl ? 'caret-alt-right' : 'caret-alt-left')
167
+ : (this.props.isRtl ? 'caret-alt-left' : 'caret-alt-right')
168
168
  : this.props.next.collapsed
169
169
  ? 'caret-alt-up'
170
170
  : 'caret-alt-down'
171
- : undefined, icon: this.props.prev.collapsible
171
+ : undefined, icon: this.props.next.collapsible
172
172
  ? isHorizontal
173
- ? this.props.prev.collapsed
174
- ? caretAltLeftIcon
175
- : caretAltRightIcon
176
- : this.props.prev.collapsed
173
+ ? this.props.next.collapsed
174
+ ? (this.props.isRtl ? caretAltRightIcon : caretAltLeftIcon)
175
+ : (this.props.isRtl ? caretAltLeftIcon : caretAltRightIcon)
176
+ : this.props.next.collapsed
177
177
  ? caretAltUpIcon
178
178
  : caretAltDownIcon
179
- : undefined })))));
179
+ : undefined, size: 'xsmall' })))));
180
180
  };
181
181
  return SplitterBar;
182
182
  }(React.Component));
@@ -29,6 +29,7 @@ import * as PropTypes from 'prop-types';
29
29
  import { TabStripNavigationItem } from './TabStripNavigationItem';
30
30
  import { classNames } from '@progress/kendo-react-common';
31
31
  import { Button } from '@progress/kendo-react-buttons';
32
+ import { caretAltDownIcon, caretAltLeftIcon, caretAltRightIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
32
33
  /**
33
34
  * @hidden
34
35
  */
@@ -118,16 +119,26 @@ var TabStripNavigation = /** @class */ (function (_super) {
118
119
  var directions = {
119
120
  prev: {
120
121
  arrowTab: 'k-tabstrip-prev',
121
- arrow: horizontal ? 'caret-alt-left' : 'caret-alt-up'
122
+ fontIcon: horizontal ?
123
+ _this.isRtl() ? 'caret-alt-right' : 'caret-alt-left'
124
+ : 'caret-alt-up',
125
+ svgIcon: horizontal ?
126
+ _this.isRtl() ? caretAltRightIcon : caretAltLeftIcon
127
+ : caretAltUpIcon
122
128
  },
123
129
  next: {
124
130
  arrowTab: 'k-tabstrip-next',
125
- arrow: horizontal ? 'caret-alt-right' : 'caret-alt-down'
131
+ fontIcon: horizontal ?
132
+ _this.isRtl() ? 'caret-alt-left' : 'caret-alt-right'
133
+ : 'caret-alt-down',
134
+ svgIcon: horizontal ?
135
+ _this.isRtl() ? caretAltLeftIcon : caretAltRightIcon
136
+ : caretAltDownIcon
126
137
  }
127
138
  };
128
139
  var ButtonComponent = (type === PREV ? _this.props.prevButton : _this.props.nextButton) || Button;
129
140
  var onClick = (type === PREV ? _this.arrowClickPrev : _this.arrowClickNext);
130
- return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].arrow, onMouseDown: preventDefault, tabIndex: -1, fillMode: "flat" }));
141
+ return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].fontIcon, svgIcon: directions[type].svgIcon, onMouseDown: preventDefault, tabIndex: -1, fillMode: "flat" }));
131
142
  };
132
143
  _this.state = {
133
144
  disabledPrev: _this.props.selected === 0,
@@ -34,7 +34,7 @@ exports.BottomNavigationItem = React.forwardRef(function (props, ref) {
34
34
  var ItemComp = item;
35
35
  var bottomNavItem = (React.createElement("span", { ref: elementRef, className: itemClasses, style: style, role: 'link', id: id, tabIndex: tabIndex, onClick: handleClick, onKeyDown: handleKeyDown, "aria-current": selected, "aria-disabled": disabled }, ItemComp ? React.createElement(ItemComp, { itemIndex: index, item: dataItem }) :
36
36
  (React.createElement(React.Fragment, null,
37
- (icon || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon }),
37
+ (icon || svgIcon) && React.createElement(kendo_react_common_1.IconWrap, { className: 'k-bottom-nav-item-icon', name: icon, icon: svgIcon, size: 'xlarge' }),
38
38
  text && React.createElement("span", { className: 'k-bottom-nav-item-text', style: { userSelect: 'none' } }, text)))));
39
39
  return renderer !== undefined ? renderer.call(undefined, bottomNavItem, props) : bottomNavItem;
40
40
  });
@@ -67,7 +67,7 @@ exports.Breadcrumb = React.forwardRef(function (props, ref) {
67
67
  React.createElement(React.Fragment, null, props.data.map(function (item, index, data) {
68
68
  var key = item[valueField];
69
69
  return (React.createElement(ListItemComponent, { key: key, isFirstItem: index === 0, isLastItem: data.length - 1 === index },
70
- index !== 0 && React.createElement(DelimiterComponent, null),
70
+ index !== 0 && React.createElement(DelimiterComponent, { dir: dir }),
71
71
  React.createElement(LinkComponent, __assign({ isLast: data.length - 1 === index, isFirst: index === 0, id: String(key), icon: item[iconField] || undefined, iconClass: item[iconClassField] ? String(item[iconClassField]) : undefined, text: item[textField] ? String(item[textField]) : undefined, disabled: item.disabled || false, onItemSelect: handleItemSelect, onKeyDown: handleKeyDown }, props))));
72
72
  })))));
73
73
  });
@@ -19,6 +19,10 @@ export interface BreadcrumbDelimiterProps {
19
19
  * Sets the `tabIndex` attribute to the BreadcrumbDelimiter.
20
20
  */
21
21
  tabIndex?: number;
22
+ /**
23
+ * @hidden
24
+ */
25
+ dir?: string;
22
26
  }
23
27
  /**
24
28
  * Represents the target (element, props, and focus()) of the BreadcrumbDelimiter.
@@ -22,13 +22,14 @@ exports.BreadcrumbDelimiter = React.forwardRef(function (props, ref) {
22
22
  });
23
23
  });
24
24
  React.useImperativeHandle(ref, function () { return target.current; });
25
- return (React.createElement(kendo_react_common_1.IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, "aria-hidden": true, tabIndex: props.tabIndex, style: props.style, name: "chevron-right", icon: kendo_svg_icons_1.chevronRightIcon, className: "k-breadcrumb-delimiter-icon" }));
25
+ return (React.createElement(kendo_react_common_1.IconWrap, { ref: breadcrumbDelimiterRef, id: props.id, "aria-hidden": true, tabIndex: props.tabIndex, style: props.style, name: props.dir === 'rtl' ? 'chevron-left' : 'chevron-right', icon: props.dir === 'rtl' ? kendo_svg_icons_1.chevronLeftIcon : kendo_svg_icons_1.chevronRightIcon, className: "k-breadcrumb-delimiter-icon", size: 'xsmall' }));
26
26
  });
27
27
  var propTypes = {
28
28
  id: PropTypes.string,
29
29
  className: PropTypes.string,
30
30
  style: PropTypes.object,
31
- tabIndex: PropTypes.number
31
+ tabIndex: PropTypes.number,
32
+ dir: PropTypes.string
32
33
  };
33
34
  exports.BreadcrumbDelimiter.displayName = 'KendoReactBreadcrumbDelimiter';
34
35
  exports.BreadcrumbDelimiter.propTypes = propTypes;
@@ -8,7 +8,7 @@ exports.packageMetadata = {
8
8
  name: '@progress/kendo-react-layout',
9
9
  productName: 'KendoReact',
10
10
  productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
11
- publishDate: 1684510550,
11
+ publishDate: 1684998399,
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
  };
@@ -124,7 +124,7 @@ var Splitter = /** @class */ (function (_super) {
124
124
  var barKey = paneKey + 1;
125
125
  if (index + 1 < panes.length) {
126
126
  var next = panes[index + 1];
127
- splitterBar = (React.createElement(SplitterBar_1.SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, ariaLabel: ariaLabel, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize }));
127
+ splitterBar = (React.createElement(SplitterBar_1.SplitterBar, { key: barKey, index: index, orientation: pane.orientation, prev: pane, next: next, ariaLabel: ariaLabel, onDrag: _this.onBarDragResize, onToggle: _this.onBarToggle, onKeyboardResize: _this.onBarKeyboardResize, isRtl: _this.isRtl }));
128
128
  }
129
129
  var splitterPane = (React.createElement(SplitterPane_1.SplitterPane, __assign({ key: paneKey }, pane), panesContent[index]));
130
130
  return [splitterPane, splitterBar];
@@ -9,6 +9,7 @@ export interface SplitterBarProps {
9
9
  prev: SplitterPaneExtendedProps;
10
10
  next: SplitterPaneExtendedProps;
11
11
  ariaLabel?: string;
12
+ isRtl?: boolean;
12
13
  onDrag: (event: any, element: HTMLDivElement, index: number, isFirst: boolean, isLast: boolean) => void;
13
14
  onToggle: (index: number, nativeEvent: React.MouseEvent<HTMLDivElement, MouseEvent> | React.KeyboardEvent<HTMLDivElement>) => void;
14
15
  onKeyboardResize: (element: HTMLDivElement, index: number, delta: number, nativeEvent: React.KeyboardEvent<HTMLDivElement>) => void;
@@ -147,39 +147,39 @@ var SplitterBar = /** @class */ (function (_super) {
147
147
  React.createElement(kendo_react_common_1.IconWrap, { name: this.props.prev.collapsible
148
148
  ? isHorizontal
149
149
  ? this.props.prev.collapsed
150
- ? 'caret-alt-right'
151
- : 'caret-alt-left'
150
+ ? (this.props.isRtl ? 'caret-alt-left' : 'caret-alt-right')
151
+ : (this.props.isRtl ? 'caret-alt-right' : 'caret-alt-left')
152
152
  : this.props.prev.collapsed
153
153
  ? 'caret-alt-down'
154
154
  : 'caret-alt-up'
155
155
  : undefined, icon: this.props.prev.collapsible
156
156
  ? isHorizontal
157
157
  ? this.props.prev.collapsed
158
- ? kendo_svg_icons_1.caretAltRightIcon
159
- : kendo_svg_icons_1.caretAltLeftIcon
158
+ ? (this.props.isRtl ? kendo_svg_icons_1.caretAltLeftIcon : kendo_svg_icons_1.caretAltRightIcon)
159
+ : (this.props.isRtl ? kendo_svg_icons_1.caretAltRightIcon : kendo_svg_icons_1.caretAltLeftIcon)
160
160
  : this.props.prev.collapsed
161
161
  ? kendo_svg_icons_1.caretAltDownIcon
162
162
  : kendo_svg_icons_1.caretAltUpIcon
163
- : undefined })),
163
+ : undefined, size: 'xsmall' })),
164
164
  React.createElement("div", { className: 'k-resize-handle' }),
165
165
  this.props.next.collapsible && React.createElement("div", { className: 'k-collapse-next', onClick: this.onNextToggle },
166
166
  React.createElement(kendo_react_common_1.IconWrap, { name: this.props.next.collapsible
167
167
  ? isHorizontal
168
168
  ? this.props.next.collapsed
169
- ? 'caret-alt-left'
170
- : 'caret-alt-right'
169
+ ? (this.props.isRtl ? 'caret-alt-right' : 'caret-alt-left')
170
+ : (this.props.isRtl ? 'caret-alt-left' : 'caret-alt-right')
171
171
  : this.props.next.collapsed
172
172
  ? 'caret-alt-up'
173
173
  : 'caret-alt-down'
174
- : undefined, icon: this.props.prev.collapsible
174
+ : undefined, icon: this.props.next.collapsible
175
175
  ? isHorizontal
176
- ? this.props.prev.collapsed
177
- ? kendo_svg_icons_1.caretAltLeftIcon
178
- : kendo_svg_icons_1.caretAltRightIcon
179
- : this.props.prev.collapsed
176
+ ? this.props.next.collapsed
177
+ ? (this.props.isRtl ? kendo_svg_icons_1.caretAltRightIcon : kendo_svg_icons_1.caretAltLeftIcon)
178
+ : (this.props.isRtl ? kendo_svg_icons_1.caretAltLeftIcon : kendo_svg_icons_1.caretAltRightIcon)
179
+ : this.props.next.collapsed
180
180
  ? kendo_svg_icons_1.caretAltUpIcon
181
181
  : kendo_svg_icons_1.caretAltDownIcon
182
- : undefined })))));
182
+ : undefined, size: 'xsmall' })))));
183
183
  };
184
184
  return SplitterBar;
185
185
  }(React.Component));
@@ -32,6 +32,7 @@ var PropTypes = require("prop-types");
32
32
  var TabStripNavigationItem_1 = require("./TabStripNavigationItem");
33
33
  var kendo_react_common_1 = require("@progress/kendo-react-common");
34
34
  var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
35
+ var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
35
36
  /**
36
37
  * @hidden
37
38
  */
@@ -121,16 +122,26 @@ var TabStripNavigation = /** @class */ (function (_super) {
121
122
  var directions = {
122
123
  prev: {
123
124
  arrowTab: 'k-tabstrip-prev',
124
- arrow: horizontal ? 'caret-alt-left' : 'caret-alt-up'
125
+ fontIcon: horizontal ?
126
+ _this.isRtl() ? 'caret-alt-right' : 'caret-alt-left'
127
+ : 'caret-alt-up',
128
+ svgIcon: horizontal ?
129
+ _this.isRtl() ? kendo_svg_icons_1.caretAltRightIcon : kendo_svg_icons_1.caretAltLeftIcon
130
+ : kendo_svg_icons_1.caretAltUpIcon
125
131
  },
126
132
  next: {
127
133
  arrowTab: 'k-tabstrip-next',
128
- arrow: horizontal ? 'caret-alt-right' : 'caret-alt-down'
134
+ fontIcon: horizontal ?
135
+ _this.isRtl() ? 'caret-alt-left' : 'caret-alt-right'
136
+ : 'caret-alt-down',
137
+ svgIcon: horizontal ?
138
+ _this.isRtl() ? kendo_svg_icons_1.caretAltLeftIcon : kendo_svg_icons_1.caretAltRightIcon
139
+ : kendo_svg_icons_1.caretAltDownIcon
129
140
  }
130
141
  };
131
142
  var ButtonComponent = (type === PREV ? _this.props.prevButton : _this.props.nextButton) || kendo_react_buttons_1.Button;
132
143
  var onClick = (type === PREV ? _this.arrowClickPrev : _this.arrowClickNext);
133
- return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].arrow, onMouseDown: preventDefault, tabIndex: -1, fillMode: "flat" }));
144
+ return (React.createElement(ButtonComponent, { disabled: disabled, className: "".concat(directions[type].arrowTab), onClick: onClick, icon: directions[type].fontIcon, svgIcon: directions[type].svgIcon, onMouseDown: preventDefault, tabIndex: -1, fillMode: "flat" }));
134
145
  };
135
146
  _this.state = {
136
147
  disabledPrev: _this.props.selected === 0,