rsuite 5.18.0 → 5.18.1-beta.4

package/cjs/toaster/toaster.js

@@ -5,6 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 exports.__esModule = true;
 exports.default = void 0;
 
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
 var _ToastContainer = _interopRequireDefault(require("./ToastContainer"));
 
 var defaultContainerId = 'default';
@@ -15,12 +19,8 @@ var containers = new Map();
  * @param options
  */
 
-function createContainer(containerId, props) {
-  var _ToastContainer$getIn = _ToastContainer.default.getInstance(props),
-      container = _ToastContainer$getIn[0];
-
-  containers.set(containerId || defaultContainerId, container);
-  return container;
+function createContainer(_x, _x2) {
+  return _createContainer.apply(this, arguments);
 }
 /**
  * Get the container by ID. Use default ID when ID is not available.
@@ -28,6 +28,33 @@ function createContainer(containerId, props) {
  */
 
 
+function _createContainer() {
+  _createContainer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(containerId, props) {
+    var _yield$ToastContainer, container;
+
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return _ToastContainer.default.getInstance(props);
+
+          case 2:
+            _yield$ToastContainer = _context.sent;
+            container = _yield$ToastContainer[0];
+            containers.set(containerId || defaultContainerId, container);
+            return _context.abrupt("return", container);
+
+          case 6:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  }));
+  return _createContainer.apply(this, arguments);
+}
+
 function getContainer(containerId) {
   if (containers.size == 0) {
     return null;
@@ -41,21 +68,24 @@ var toaster = function toaster(message) {
 };
 
 toaster.push = function (message, options) {
-  var _container$current;
+  var _options;
 
   if (options === void 0) {
     options = {};
   }
 
-  var container = getContainer(options.placement);
-
-  if (!container) {
-    var _options$placement;
+  var containerId = (_options = options) === null || _options === void 0 ? void 0 : _options.placement;
+  var container = getContainer(containerId);
 
-    container = createContainer((_options$placement = options.placement) !== null && _options$placement !== void 0 ? _options$placement : '', options);
+  if (container !== null && container !== void 0 && container.current) {
+    return container.current.push(message);
   }
 
-  return (_container$current = container.current) === null || _container$current === void 0 ? void 0 : _container$current.push(message);
+  return createContainer(containerId !== null && containerId !== void 0 ? containerId : '', options).then(function (ref) {
+    var _ref$current;
+
+    return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.push(message);
+  });
 };
 
 toaster.remove = function (key) {

package/cjs/toaster/useToaster.d.ts

@@ -5,7 +5,7 @@ import { ToastContainerProps } from './ToastContainer';
  * @returns toaster { push, remove, clear }
  */
 declare const useToaster: () => {
-    push: (message: React.ReactNode, options?: ToastContainerProps) => string | undefined;
+    push: (message: React.ReactNode, options?: ToastContainerProps) => string | Promise<string | undefined> | undefined;
     remove: (key: string) => void;
     clear: () => void;
 };

package/cjs/utils/BrowserDetection.d.ts

@@ -2,3 +2,10 @@ export declare const isIE: () => boolean;
 export declare const isIE10: () => boolean;
 export declare const isIE11: () => boolean;
 export declare const isEdge: () => boolean;
+export declare const getChromeVersion: () => number | false;
+export declare const getSafariVersion: () => number | false;
+/**
+ * flexbox-gap compatibility
+ * @see https://caniuse.com/flexbox-gap
+ */
+export declare const isSupportFlexGap: () => boolean;

package/cjs/utils/BrowserDetection.js

@@ -3,7 +3,7 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.isEdge = exports.isIE11 = exports.isIE10 = exports.isIE = void 0;
+exports.isSupportFlexGap = exports.getSafariVersion = exports.getChromeVersion = exports.isEdge = exports.isIE11 = exports.isIE10 = exports.isIE = void 0;
 
 var _canUseDOM = _interopRequireDefault(require("dom-lib/canUseDOM"));
 
@@ -32,4 +32,54 @@ var isEdge = function isEdge() {
   return _canUseDOM.default && !isIE() && 'styleMedia' in window;
 };
 
-exports.isEdge = isEdge;
+exports.isEdge = isEdge;
+
+var getChromeVersion = function getChromeVersion() {
+  if (_canUseDOM.default) {
+    var match = window.navigator.userAgent.match(/Chrom(e|ium)\/([\d\.]+)\./);
+    return match ? parseFloat(match[2]) : false;
+  }
+
+  return false;
+};
+
+exports.getChromeVersion = getChromeVersion;
+
+var getSafariVersion = function getSafariVersion() {
+  if (_canUseDOM.default) {
+    var match = window.navigator.userAgent.match(/Version\/([\d\.]+).*Safari/);
+    return match ? parseFloat(match[1]) : false;
+  }
+
+  return false;
+};
+/**
+ * flexbox-gap compatibility
+ * @see https://caniuse.com/flexbox-gap
+ */
+
+
+exports.getSafariVersion = getSafariVersion;
+
+var isSupportFlexGap = function isSupportFlexGap() {
+  if (isIE()) {
+    return false;
+  }
+
+  var chromeVersion = getChromeVersion();
+  var safariVersion = getSafariVersion(); // edge consider as chrome
+
+  if (chromeVersion) {
+    // flex-gap is support in Chrome 84+
+    return chromeVersion >= 84;
+  }
+
+  if (safariVersion) {
+    // flex-gap is support in Safari 14.1+
+    return safariVersion >= 14.1;
+  }
+
+  return true;
+};
+
+exports.isSupportFlexGap = isSupportFlexGap;

package/cjs/utils/dateUtils.d.ts

@@ -45,10 +45,10 @@ export declare const calendarOnlyProps: CalendarOnlyPropsType[];
  */
 export declare function disabledTime(props: any, date: Date): boolean;
 export declare const omitHideDisabledProps: <T extends Record<string, any>>(props: T) => Partial<Omit<T, CalendarOnlyPropsType>>;
-export declare const shouldTime: (format: string) => boolean;
-export declare const shouldMonth: (format: string) => boolean;
-export declare const shouldDate: (format: string) => boolean;
-export declare const shouldOnlyTime: (format: string) => boolean;
+export declare const shouldRenderTime: (format: string) => boolean;
+export declare const shouldRenderMonth: (format: string) => boolean;
+export declare const shouldRenderDate: (format: string) => boolean;
+export declare const shouldOnlyRenderTime: (format: string) => boolean;
 /**
  * Get all weeks of this month
  * @params monthDate

package/cjs/utils/dateUtils.js

@@ -6,7 +6,7 @@ exports.__esModule = true;
 exports.disabledTime = disabledTime;
 exports.getMonthView = getMonthView;
 exports.getDateMask = getDateMask;
-exports.shouldOnlyTime = exports.shouldDate = exports.shouldMonth = exports.shouldTime = exports.omitHideDisabledProps = exports.calendarOnlyProps = exports.set = exports.isValid = exports.isMatch = exports.subDays = exports.startOfWeek = exports.startOfMonth = exports.startOfISOWeek = exports.startOfDay = exports.setYear = exports.setSeconds = exports.setMonth = exports.setMinutes = exports.setHours = exports.setDate = exports.parseISO = exports.parse = exports.isSameSecond = exports.isSameMonth = exports.isSameDay = exports.isEqual = exports.isBefore = exports.isAfter = exports.getYear = exports.getSeconds = exports.getMonth = exports.getMinutes = exports.getHours = exports.getDaysInMonth = exports.getDay = exports.getDate = exports.format = exports.endOfWeek = exports.endOfMonth = exports.endOfISOWeek = exports.endOfDay = exports.compareAsc = exports.addMonths = exports.addDays = void 0;
+exports.shouldOnlyRenderTime = exports.shouldRenderDate = exports.shouldRenderMonth = exports.shouldRenderTime = exports.omitHideDisabledProps = exports.calendarOnlyProps = exports.set = exports.isValid = exports.isMatch = exports.subDays = exports.startOfWeek = exports.startOfMonth = exports.startOfISOWeek = exports.startOfDay = exports.setYear = exports.setSeconds = exports.setMonth = exports.setMinutes = exports.setHours = exports.setDate = exports.parseISO = exports.parse = exports.isSameSecond = exports.isSameMonth = exports.isSameDay = exports.isEqual = exports.isBefore = exports.isAfter = exports.getYear = exports.getSeconds = exports.getMonth = exports.getMinutes = exports.getHours = exports.getDaysInMonth = exports.getDay = exports.getDate = exports.format = exports.endOfWeek = exports.endOfMonth = exports.endOfISOWeek = exports.endOfDay = exports.compareAsc = exports.addMonths = exports.addDays = void 0;
 
 var _pick = _interopRequireDefault(require("lodash/pick"));
 
@@ -209,26 +209,26 @@ var omitHideDisabledProps = function omitHideDisabledProps(props) {
 
 exports.omitHideDisabledProps = omitHideDisabledProps;
 
-var shouldTime = function shouldTime(format) {
+var shouldRenderTime = function shouldRenderTime(format) {
   return /([Hhms])/.test(format);
 };
 
-exports.shouldTime = shouldTime;
+exports.shouldRenderTime = shouldRenderTime;
 
-var shouldMonth = function shouldMonth(format) {
+var shouldRenderMonth = function shouldRenderMonth(format) {
   return /[Yy]/.test(format) && /[ML]/.test(format);
 };
 
-exports.shouldMonth = shouldMonth;
+exports.shouldRenderMonth = shouldRenderMonth;
 
-var shouldDate = function shouldDate(format) {
+var shouldRenderDate = function shouldRenderDate(format) {
   return /[Yy]/.test(format) && /[ML]/.test(format) && /[Dd]/.test(format);
 }; // for date-fns v1 and v2
 
 
-exports.shouldDate = shouldDate;
+exports.shouldRenderDate = shouldRenderDate;
 
-var shouldOnlyTime = function shouldOnlyTime(format) {
+var shouldOnlyRenderTime = function shouldOnlyRenderTime(format) {
   return /([Hhms])/.test(format) && !/([YyMDd])/.test(format);
 }; // for date-fns v1 and v2
 
@@ -239,7 +239,7 @@ var shouldOnlyTime = function shouldOnlyTime(format) {
  */
 
 
-exports.shouldOnlyTime = shouldOnlyTime;
+exports.shouldOnlyRenderTime = shouldOnlyRenderTime;
 
 function getMonthView(monthDate, isoWeek) {
   var firstDayOfMonth = (0, _getDay.default)(monthDate);

package/cjs/utils/index.d.ts

@@ -23,6 +23,7 @@ export { default as composeFunctions } from './composeFunctions';
 export { default as reactToString } from './reactToString';
 export { default as scrollTopAnimation } from './scrollTopAnimation';
 export { default as appendTooltip } from './appendTooltip';
+export { default as render } from './render';
 /** Hooks **/
 export { default as useClassNames } from './useClassNames';
 export { default as useEventListener } from './useEventListener';

package/cjs/utils/index.js

@@ -25,6 +25,7 @@ var _exportNames = {
   reactToString: true,
   scrollTopAnimation: true,
   appendTooltip: true,
+  render: true,
   useClassNames: true,
   useEventListener: true,
   useElementResize: true,
@@ -48,7 +49,7 @@ var _exportNames = {
   DateUtils: true,
   TypeChecker: true
 };
-exports.TypeChecker = exports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.getDataGroupBy = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;
+exports.TypeChecker = exports.DateUtils = exports.globalKey = exports.getClassNamePrefix = exports.defaultClassPrefix = exports.useMount = exports.useIsMounted = exports.useUpdateEffect = exports.useWillUnmount = exports.useUpdatedRef = exports.useEventCallback = exports.stringToObject = exports.getSafeRegExpString = exports.useRootClose = exports.useControlled = exports.useTimeout = exports.createComponent = exports.usePortal = exports.useCustom = exports.useElementResize = exports.useEventListener = exports.useClassNames = exports.render = exports.appendTooltip = exports.scrollTopAnimation = exports.reactToString = exports.composeFunctions = exports.shallowEqualArray = exports.shallowEqual = exports.mergeRefs = exports.getDOMNode = exports.placementPolyfill = exports.clone = exports.getDataGroupBy = exports.previewFile = exports.ajaxUpload = exports.tplTransform = exports.ReactChildren = exports.isOneOf = exports.createChainedFunction = exports.prefix = exports.guid = void 0;
 
 var _BrowserDetection = require("./BrowserDetection");
 
@@ -173,6 +174,10 @@ var _appendTooltip = _interopRequireDefault(require("./appendTooltip"));
 
 exports.appendTooltip = _appendTooltip.default;
 
+var _render = _interopRequireDefault(require("./render"));
+
+exports.render = _render.default;
+
 var _useClassNames = _interopRequireDefault(require("./useClassNames"));
 
 exports.useClassNames = _useClassNames.default;

package/cjs/utils/render.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare function render(element: React.ReactElement<any>, container: HTMLElement): any;
+export default render;

package/cjs/utils/render.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+
+var majorVersion = parseInt(_react.default.version);
+var SuperposedReactDOM = ReactDOM;
+
+function render(element, container) {
+  var mountElement = document.createElement('div');
+  mountElement.className = 'rs-mount-element';
+  var containerElement = container || document.body; // Add the detached element to the root
+
+  containerElement.appendChild(mountElement);
+
+  if (majorVersion >= 18) {
+    /**
+     * ignore react 18 warnings
+     * Warning: You are importing createRoot from "react-dom" which is not supported. You should instead import it from "react-dom/client".
+     */
+    ReactDOM['__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED'].usingClientEntryPoint = true;
+    var createRoot = SuperposedReactDOM.createRoot;
+    var root = containerElement.__root || createRoot(mountElement, {
+      identifierPrefix: 'rs-root-'
+    });
+    root.render(element);
+    containerElement.__root = root;
+    return root;
+  }
+
+  SuperposedReactDOM.render(element, mountElement);
+  return {
+    unmount: function unmount() {
+      SuperposedReactDOM.unmountComponentAtNode(mountElement);
+      containerElement.removeChild(mountElement);
+    }
+  };
+}
+
+var _default = render;
+exports.default = _default;

package/cjs/utils/treeUtils.d.ts

@@ -4,7 +4,7 @@ import { TREE_NODE_DROP_POSITION } from '../utils';
 import { CheckTreePickerProps } from '../CheckTreePicker/CheckTreePicker';
 import { ItemDataType } from '../@types/common';
 import { TreePickerProps } from '../TreePicker/TreePicker';
-import { ListInstance } from '../Picker/VirtualizedList';
+import { ListHandle } from '../Windowing';
 declare type PartialTreeProps = Partial<TreePickerProps | CheckTreePickerProps>;
 /**
  * according node parentNode expand state decide node whether to show
@@ -236,7 +236,7 @@ export interface FocusToTreeNodeProps {
     activeNode: any;
     virtualized: boolean;
     container: HTMLElement | null;
-    list: ListInstance;
+    list: ListHandle;
     formattedNodes: TreeNodeType[];
 }
 /**

package/cjs/utils/useUniqueId.js

@@ -2,20 +2,28 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 exports.__esModule = true;
 exports.default = useUniqueId;
 
-var _react = require("react");
+var React = _interopRequireWildcard(require("react"));
 
 var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
 
+var reactUseId = React['useId' + ''];
 /**
  * Used for generating unique ID for DOM elements
  *
  * @param idProp If id is provided, it will be used instead of generating a new one
  */
+
 function useUniqueId(prefix, idProp) {
-  var idRef = (0, _react.useRef)();
+  var idRef = React.useRef();
+
+  if (reactUseId !== undefined) {
+    return idProp !== null && idProp !== void 0 ? idProp : "" + prefix + reactUseId();
+  }
 
   if (!idRef.current) {
     idRef.current = (0, _uniqueId.default)(prefix);

package/dist/rsuite-rtl.css

@@ -2854,8 +2854,8 @@ tbody.rs-anim-collapse.rs-anim-in {
 .rs-calendar-panel .rs-calendar-header-backward {
   float: none !important;
 }
-.rs-calendar-panel.rs-calendar-show-month-dropdown .rs-calendar-header-forward,
-.rs-calendar-panel.rs-calendar-show-month-dropdown .rs-calendar-header-backward {
+.rs-calendar-panel.rs-calendar-month-view .rs-calendar-header-forward,
+.rs-calendar-panel.rs-calendar-month-view .rs-calendar-header-backward {
   display: inline-block;
   visibility: hidden;
   pointer-events: none;
@@ -2863,11 +2863,11 @@ tbody.rs-anim-collapse.rs-anim-in {
 .rs-calendar-panel .rs-calendar-header-month-toolbar {
   width: auto !important;
 }
-.rs-calendar-panel.rs-calendar-show-month-dropdown .rs-calendar-header-month-toolbar {
+.rs-calendar-panel.rs-calendar-month-view .rs-calendar-header-month-toolbar {
   padding-right: 0;
   padding-left: 0;
 }
-.rs-calendar-panel .rs-calendar-show-month-dropdown {
+.rs-calendar-panel .rs-calendar-month-view {
   padding-right: 0;
   padding-left: 0;
 }
@@ -2941,37 +2941,59 @@ tbody.rs-anim-collapse.rs-anim-in {
 .rs-calendar-panel.rs-calendar-compact .rs-calendar-table-row:not(.rs-calendar-table-header-row) .rs-calendar-table-cell-content {
   height: 50px;
 }
-.rs-calendar-show-month-dropdown .rs-calendar-header-month-toolbar {
+.rs-calendar-btn-close {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  height: 14px;
+  padding: 0;
+  border: 0;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  background: #fff;
+  background: var(--rs-bg-overlay);
+  z-index: 1;
+}
+.rs-calendar-panel .rs-calendar-btn-close {
+  bottom: 11px;
+  margin: 0 20px;
+}
+.rs-calendar-month-view .rs-calendar-header-month-toolbar {
   padding-right: 24px;
   padding-left: 24px;
 }
-.rs-calendar-show-month-dropdown .rs-calendar-header-backward,
-.rs-calendar-show-month-dropdown .rs-calendar-header-forward {
+.rs-calendar-month-view .rs-calendar-header-backward,
+.rs-calendar-month-view .rs-calendar-header-forward {
   display: none;
 }
-.rs-calendar-show-month-dropdown .rs-calendar-header-title-date {
+.rs-calendar-month-view .rs-calendar-header-title-date {
   color: #1675e0;
   color: var(--rs-text-active);
   background: transparent;
 }
-.rs-calendar-show-month-dropdown .rs-calendar-header-title-date.rs-calendar-header-error {
+.rs-calendar-month-view .rs-calendar-header-title-date.rs-calendar-header-error {
   color: #f44336;
   color: var(--rs-text-error);
 }
-.rs-calendar-show-month-dropdown .rs-calendar-header-title-date.rs-calendar-header-error:focus,
-.rs-calendar-show-month-dropdown .rs-calendar-header-title-date.rs-calendar-header-error:hover:active {
+.rs-calendar-month-view .rs-calendar-header-title-date.rs-calendar-header-error:focus,
+.rs-calendar-month-view .rs-calendar-header-title-date.rs-calendar-header-error:hover:active {
   color: #fff !important;
 }
-.rs-calendar-show-time-dropdown .rs-calendar-header-title-time {
+.rs-calendar-time-view .rs-calendar-header-title-time {
   color: #1675e0;
   color: var(--rs-text-active);
   background: transparent;
 }
-.rs-calendar-show-time-dropdown .rs-calendar-header-title-time.rs-calendar-header-error {
+.rs-calendar-time-view .rs-calendar-header-title-time.rs-calendar-header-error {
   color: #f44336;
   color: var(--rs-text-error);
 }
-.rs-calendar-show-time-dropdown .rs-calendar-header-title-time.rs-calendar-header-error:hover:active {
+.rs-calendar-time-view .rs-calendar-header-title-time.rs-calendar-header-error:hover:active {
   color: #fff;
 }
 .rs-calendar-table-cell-selected,
@@ -3124,7 +3146,7 @@ tbody.rs-anim-collapse.rs-anim-in {
   -webkit-transform: rotate(180deg);
           transform: rotate(180deg);
 }
-.rs-calendar-view {
+.rs-calendar-body {
   padding: 4px 12px 12px;
 }
 .rs-calendar-table {
@@ -3246,10 +3268,10 @@ tbody.rs-anim-collapse.rs-anim-in {
   overflow: hidden;
   z-index: 1;
 }
-.rs-calendar-show-month-dropdown .rs-calendar-month-dropdown {
+.rs-calendar-month-view .rs-calendar-month-dropdown {
   display: block;
 }
-.rs-calendar-show-month-dropdown .rs-calendar-month-dropdown-content {
+.rs-calendar-month-view .rs-calendar-month-dropdown-content {
   -webkit-animation: 0.3s linear slideDown;
           animation: 0.3s linear slideDown;
 }
@@ -3353,10 +3375,10 @@ tbody.rs-anim-collapse.rs-anim-in {
   overflow: hidden;
   z-index: 1;
 }
-.rs-calendar-show-time-dropdown .rs-calendar-time-dropdown {
+.rs-calendar-time-view .rs-calendar-time-dropdown {
   display: block;
 }
-.rs-calendar-show-time-dropdown .rs-calendar-time-dropdown-content {
+.rs-calendar-time-view .rs-calendar-time-dropdown-content {
   -webkit-animation: 0.3s linear slideDown;
           animation: 0.3s linear slideDown;
 }
@@ -4454,7 +4476,7 @@ label:hover .rs-checkbox-wrapper .rs-checkbox-inner::before {
 }
 .rs-picker-daterange-menu .rs-calendar {
   display: inline-block;
-  height: 276px;
+  height: 274px;
   padding-bottom: 12px;
 }
 .rs-picker-daterange-menu .rs-calendar:first-child {
@@ -9513,6 +9535,7 @@ textarea.rs-picker-search-input {
 }
 .rs-nav .rs-dropdown > .rs-dropdown-toggle {
   height: 36px;
+  vertical-align: bottom;
 }
 .rs-nav-default .rs-nav-item,
 .rs-nav-tabs .rs-nav-item {