rsuite 5.12.0 → 5.14.0

package/esm/Whisper/test/Whisper.test.js

@@ -0,0 +1,16 @@
+var _whisperRef$current, _whisperRef$current2, _whisperRef$current3, _whisperRef$current4, _whisperRef$current5;
+
+import React from 'react';
+import Whisper from '../Whisper';
+var whisperRef = /*#__PURE__*/React.createRef();
+
+/*#__PURE__*/
+React.createElement(Whisper, {
+  ref: whisperRef,
+  speaker: /*#__PURE__*/React.createElement("div", null)
+}, /*#__PURE__*/React.createElement("div", null));
+(_whisperRef$current = whisperRef.current) === null || _whisperRef$current === void 0 ? void 0 : _whisperRef$current.open();
+(_whisperRef$current2 = whisperRef.current) === null || _whisperRef$current2 === void 0 ? void 0 : _whisperRef$current2.open(300);
+(_whisperRef$current3 = whisperRef.current) === null || _whisperRef$current3 === void 0 ? void 0 : _whisperRef$current3.close();
+(_whisperRef$current4 = whisperRef.current) === null || _whisperRef$current4 === void 0 ? void 0 : _whisperRef$current4.close(300);
+(_whisperRef$current5 = whisperRef.current) === null || _whisperRef$current5 === void 0 ? void 0 : _whisperRef$current5.updatePosition();

package/esm/index.d.ts

@@ -7,7 +7,7 @@ export type { ButtonToolbarProps } from './ButtonToolbar';
 export { default as ButtonGroup } from './ButtonGroup';
 export type { ButtonGroupProps } from './ButtonGroup';
 export { default as Whisper } from './Whisper';
-export type { WhisperProps } from './Whisper';
+export type { WhisperProps, WhisperInstance } from './Whisper';
 export { default as Tooltip } from './Tooltip';
 export type { TooltipProps } from './Tooltip';
 export { default as Popover } from './Popover';
@@ -32,7 +32,7 @@ export { default as Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
 export { default as AvatarGroup } from './AvatarGroup';
 export type { AvatarGroupProps } from './AvatarGroup';
-export { default as toaster } from './toaster';
+export { default as toaster, useToaster } from './toaster';
 export type { Toaster } from './toaster';
 export { default as Dropdown } from './Dropdown';
 export type { DropdownProps, DropdownMenuItemProps, DropdownMenuProps } from './Dropdown';
@@ -51,7 +51,7 @@ export type { StepsProps, StepItemProps } from './Steps';
 export { default as Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
 export { default as Form, useFormClassNames } from './Form';
-export type { FormProps, FormGroupProps, FormErrorMessageProps, FormControlLabelProps, FormHelpTextProps, FormControlProps } from './Form';
+export type { FormProps, FormInstance, FormGroupProps, FormErrorMessageProps, FormControlLabelProps, FormHelpTextProps, FormControlProps } from './Form';
 export { default as Input } from './Input';
 export type { InputProps } from './Input';
 export { default as MaskedInput } from './MaskedInput';

package/esm/index.js

@@ -16,7 +16,7 @@ export { default as Placeholder } from './Placeholder';
 export { default as Badge } from './Badge';
 export { default as Avatar } from './Avatar';
 export { default as AvatarGroup } from './AvatarGroup';
-export { default as toaster } from './toaster';
+export { default as toaster, useToaster } from './toaster';
 // Nav
 export { default as Dropdown } from './Dropdown';
 export { default as Nav } from './Nav';

package/esm/toaster/ToastContainer.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export declare type PlacementType = 'topCenter' | 'bottomCenter' | 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';
+export declare const toastPlacements: PlacementType[];
 export interface ToastContainerProps extends WithAsProps {
     /** The placement of the message box */
     placement?: PlacementType;

package/esm/toaster/ToastContainer.js

@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
 import kebabCase from 'lodash/kebabCase';
 import Transition from '../Animation/Transition';
 import { useClassNames, guid, createChainedFunction } from '../utils';
+export var toastPlacements = ['topCenter', 'bottomCenter', 'topStart', 'topEnd', 'bottomStart', 'bottomEnd'];
 
 var useMessages = function useMessages() {
   var _useState = useState([]),

package/esm/toaster/index.d.ts

@@ -1,3 +1,4 @@
 import toaster from './toaster';
 export type { Toaster } from './toaster';
+export { default as useToaster } from './useToaster';
 export default toaster;

package/esm/toaster/index.js

@@ -1,2 +1,3 @@
 import toaster from './toaster';
+export { default as useToaster } from './useToaster';
 export default toaster;

package/esm/toaster/toaster.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { ToastContainerProps } from './ToastContainer';
-export declare type PlacementType = 'topStart' | 'topEnd' | 'bottomStart' | 'bottomEnd';
 export interface Toaster {
     /**
      * Add a message to the container.

package/esm/toaster/useToaster.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ToastContainerProps } from './ToastContainer';
+/**
+ * Hook to use the toaster
+ * @returns toaster { push, remove, clear }
+ */
+declare const useToaster: () => {
+    push: (message: React.ReactNode, options?: ToastContainerProps) => string | undefined;
+    remove: (key: string) => void;
+    clear: () => void;
+};
+export default useToaster;

package/esm/toaster/useToaster.js

@@ -0,0 +1,34 @@
+import toaster from './toaster';
+import { useCustom } from '../utils';
+/**
+ * Hook to use the toaster
+ * @returns toaster { push, remove, clear }
+ */
+
+var useToaster = function useToaster() {
+  var _useCustom = useCustom(),
+      toasters = _useCustom.toasters;
+
+  return {
+    push: function push(message, options) {
+      var _toasters$current;
+
+      var customToaster = toasters === null || toasters === void 0 ? void 0 : (_toasters$current = toasters.current) === null || _toasters$current === void 0 ? void 0 : _toasters$current.get((options === null || options === void 0 ? void 0 : options.placement) || 'topCenter');
+      return customToaster ? customToaster.push(message) : toaster.push(message, options);
+    },
+    remove: function remove(key) {
+      toasters ? Array.from(toasters.current).forEach(function (_ref) {
+        var c = _ref[1];
+        return c === null || c === void 0 ? void 0 : c.remove(key);
+      }) : toaster.remove(key);
+    },
+    clear: function clear() {
+      toasters ? Array.from(toasters.current).forEach(function (_ref2) {
+        var c = _ref2[1];
+        return c === null || c === void 0 ? void 0 : c.clear();
+      }) : toaster.clear();
+    }
+  };
+};
+
+export default useToaster;

package/esm/utils/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SIZE: string[];
+export declare const COLUMN_SIZE: string[];
 export declare const STATUS: string[];
 export declare const COLOR: string[];
 export declare const PLACEMENT_4: readonly ["top", "bottom", "right", "left"];

package/esm/utils/constants.js

@@ -1,4 +1,5 @@
 export var SIZE = ['lg', 'md', 'sm', 'xs'];
+export var COLUMN_SIZE = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
 export var STATUS = ['success', 'warning', 'error', 'info'];
 export var COLOR = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'violet'];
 export var PLACEMENT_4 = ['top', 'bottom', 'right', 'left'];

package/esm/utils/deprecateComponent.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useEffect } from 'react';
+import React from 'react';
+import warnOnce from './warnOnce';
 /**
  * HOC for display a deprecation message from a deprecated component
  * fixme: Only display deprecation message in non-production environment
@@ -10,9 +11,7 @@ export default function deprecateComponent(Component, message) {
 
   var componentDisplayName = (_Component$displayNam = Component.displayName) !== null && _Component$displayNam !== void 0 ? _Component$displayNam : Component.name;
   var Deprecated = /*#__PURE__*/React.forwardRef(function (props, ref) {
-    useEffect(function () {
-      console.warn(message);
-    }, []);
+    warnOnce(message);
     return /*#__PURE__*/React.createElement(Component, _extends({
       ref: ref
     }, props));

package/esm/utils/deprecatePropType.d.ts

@@ -1,6 +1,2 @@
 import * as PropTypes from 'prop-types';
-declare function deprecatePropType<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;
-declare namespace deprecatePropType {
-    var _resetWarned: () => void;
-}
-export default deprecatePropType;
+export default function deprecatePropType<T extends PropTypes.Validator<any>>(propType: T, explanation?: string): typeof propType;

package/esm/utils/deprecatePropType.js

@@ -1,15 +1,11 @@
 // Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
-var warned = {};
+import warnOnce from './warnOnce';
 export default function deprecatePropType(propType, explanation) {
   return function validate(props, propName, componentName) {
     // Note ...rest here
     if (props[propName] != null) {
       var message = "\"" + propName + "\" property of \"" + componentName + "\" has been deprecated.\n" + explanation;
-
-      if (!warned[message]) {
-        console.warn(message);
-        warned[message] = true;
-      }
+      warnOnce(message);
     }
 
     for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
@@ -18,10 +14,4 @@ export default function deprecatePropType(propType, explanation) {
 
     return propType.apply(void 0, [props, propName, componentName].concat(rest)); // and here
   };
-}
-
-function _resetWarned() {
-  warned = {};
-}
-
-deprecatePropType._resetWarned = _resetWarned;
+}

package/esm/utils/stringToObject.d.ts

@@ -1,2 +1,2 @@
-declare const _default: (value: any, labelKey?: string | undefined, valueKey?: string | undefined) => object | null;
+declare const _default: (value: any, labelKey?: string, valueKey?: string) => object | null;
 export default _default;

package/esm/utils/tplTransform.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-declare const _default: (pattern: string, ...data: any[]) => React.ReactNode;
 /**
  * tplTransform('Show {0} data', <i>100</i>);
  * output:
  * Show <span><i>100</i></span> data
  */
+declare const _default: (pattern: string, ...data: any[]) => React.ReactNode;
 export default _default;

package/esm/utils/treeUtils.d.ts

@@ -70,7 +70,7 @@ export declare function filterNodesOfTree(data: any, check: any): TreeNodeType[]
  * @param isSearching - component is in Searching
  * @returns
  */
-export declare const getFocusableItems: (filteredData: ItemDataType[], props: Required<Pick<PartialTreeProps, 'disabledItemValues' | 'valueKey' | 'childrenKey' | 'expandItemValues'>>, isSearching?: boolean | undefined) => TreeNodeType[];
+export declare const getFocusableItems: (filteredData: ItemDataType[], props: Required<Pick<PartialTreeProps, 'disabledItemValues' | 'valueKey' | 'childrenKey' | 'expandItemValues'>>, isSearching?: boolean) => TreeNodeType[];
 /**
  * return all focusable Item and active Element index
  * @param focusItemValue
@@ -190,7 +190,7 @@ interface UnSerializeListProps {
 export declare function useFlattenTreeData({ data, labelKey, valueKey, childrenKey, uncheckableItemValues, callback }: FlattenTreeDataProps): {
     forceUpdate: () => void;
     flattenNodes: TreeNodesType;
-    flattenTreeData: (treeData: TreeNodeType[], ref: string, parent?: TreeNodeType | undefined, layer?: any) => never[] | undefined;
+    flattenTreeData: (treeData: TreeNodeType[], ref: string, parent?: TreeNodeType, layer?: any) => never[] | undefined;
     serializeListOnlyParent: (nodes: TreeNodesType, key: string) => (string | number)[];
     unSerializeList: ({ nodes, key, value, cascade, uncheckableItemValues }: UnSerializeListProps) => void;
     formatVirtualizedTreeData: (nodes: TreeNodesType, data: any[], expandItemValues: ItemDataType[], options: {
@@ -203,7 +203,7 @@ export declare function useFlattenTreeData({ data, labelKey, valueKey, childrenK
  */
 export declare function useTreeNodeRefs(): {
     treeNodesRefs: {};
-    saveTreeNodeRef: (ref: React.Ref<any>, refKey?: string | undefined) => void;
+    saveTreeNodeRef: (ref: React.Ref<any>, refKey?: string) => void;
 };
 interface TreeSearchProps {
     labelKey: string;

package/esm/utils/treeUtils.js

@@ -686,11 +686,7 @@ export function useFlattenTreeData(_ref8) {
   var forceUpdate = useCallback(function () {
     dispatch(Object.create(null));
   }, [dispatch]);
-
-  var _useRef = useRef({}),
-      _useRef$current = _useRef.current,
-      flattenNodes = _useRef$current === void 0 ? {} : _useRef$current;
-
+  var flattenNodes = useRef({});
   var flattenTreeData = useCallback(function (treeData, ref, parent, layer) {
     if (layer === void 0) {
       layer = 1;
@@ -705,20 +701,20 @@ export function useFlattenTreeData(_ref8) {
 
       var refKey = ref + "-" + index;
       node.refKey = refKey;
-      flattenNodes[refKey] = _extends((_extends2 = {
+      flattenNodes.current[refKey] = _extends((_extends2 = {
         layer: layer
       }, _extends2[labelKey] = node[labelKey], _extends2[valueKey] = node[valueKey], _extends2.uncheckable = uncheckableItemValues.some(function (value) {
         return shallowEqual(node[valueKey], value);
       }), _extends2), node);
 
       if (parent) {
-        flattenNodes[refKey].parent = _omit(parent, 'parent', 'children');
+        flattenNodes.current[refKey].parent = _omit(parent, 'parent', 'children');
       }
 
       flattenTreeData(node[childrenKey], refKey, node, layer + 1);
     });
-    callback === null || callback === void 0 ? void 0 : callback(flattenNodes);
-  }, [childrenKey, valueKey, labelKey, callback, uncheckableItemValues, flattenNodes]);
+    callback === null || callback === void 0 ? void 0 : callback(flattenNodes.current);
+  }, [childrenKey, valueKey, labelKey, callback, uncheckableItemValues]);
   var serializeListOnlyParent = useCallback(function (nodes, key) {
     var list = [];
     Object.keys(nodes).forEach(function (refKey) {
@@ -819,12 +815,14 @@ export function useFlattenTreeData(_ref8) {
   };
 
   useEffect(function () {
+    // when data is changed, should clear the flattenNodes, avoid duplicate keys
+    flattenNodes.current = {};
     flattenTreeData(data, '0');
   }, [data]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return {
     forceUpdate: forceUpdate,
-    flattenNodes: flattenNodes,
+    flattenNodes: flattenNodes.current,
     flattenTreeData: flattenTreeData,
     serializeListOnlyParent: serializeListOnlyParent,
     unSerializeList: unSerializeList,

package/esm/utils/useCustom.d.ts

@@ -3,5 +3,5 @@ import { CustomValue } from '../CustomProvider/CustomProvider';
  * A hook to get custom configuration of `<CustomProvider>`
  * @param keys
  */
-declare function useCustom<T = any>(keys: string | string[], overrideLocale?: any): CustomValue<T>;
+declare function useCustom<T = any>(keys?: string | string[], overrideLocale?: any): CustomValue<T>;
 export default useCustom;

package/esm/utils/useCustom.js

@@ -29,11 +29,12 @@ function useCustom(keys, overrideLocale) {
       _useContext$rtl = _useContext.rtl,
       rtl = _useContext$rtl === void 0 ? getDefaultRTL() : _useContext$rtl,
       formatDate = _useContext.formatDate,
-      parseDate = _useContext.parseDate;
+      parseDate = _useContext.parseDate,
+      toasters = _useContext.toasters;
 
-  var componentLocale = _extends({}, locale === null || locale === void 0 ? void 0 : locale.common, typeof keys === 'string' ? locale === null || locale === void 0 ? void 0 : locale[keys] : mergeObject(keys.map(function (key) {
+  var componentLocale = _extends({}, locale === null || locale === void 0 ? void 0 : locale.common, typeof keys === 'string' ? locale === null || locale === void 0 ? void 0 : locale[keys] : typeof keys === 'object' ? mergeObject(keys.map(function (key) {
     return locale === null || locale === void 0 ? void 0 : locale[key];
-  }))); // Component custom locale
+  })) : {}); // Component custom locale
 
 
   if (overrideLocale) {
@@ -57,6 +58,7 @@ function useCustom(keys, overrideLocale) {
   return {
     locale: componentLocale,
     rtl: rtl,
+    toasters: toasters,
     formatDate: formatDate || defaultFormatDate,
     parseDate: parseDate || defaultParseDate
   };

package/esm/utils/useFocus.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export default function useFocus<E extends HTMLElement>(elementRef: React.RefObject<E>): {
     grab: () => void;
-    release: (options?: FocusOptions | undefined) => void;
+    release: (options?: FocusOptions) => void;
 };

package/esm/utils/useInternalId.d.ts

@@ -1,4 +1,4 @@
 /**
  * Used for generating unique ID for DOM elements
  */
-export default function useInternalId(prefix?: string): string;
+export default function useInternalId(namespace?: string): string;

package/esm/utils/useInternalId.js

@@ -4,11 +4,11 @@ import uniqueId from 'lodash/uniqueId';
  * Used for generating unique ID for DOM elements
  */
 
-export default function useInternalId(prefix) {
+export default function useInternalId(namespace) {
   var idRef = useRef();
 
   if (!idRef.current) {
-    idRef.current = uniqueId("internal://" + prefix);
+    idRef.current = uniqueId("internal://" + namespace);
   }
 
   useDebugValue(idRef.current);

package/esm/utils/warnOnce.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Logs a warning message
+ * but dont warn a same message twice
+ */
+declare function warnOnce(message: string): void;
+declare namespace warnOnce {
+    var _resetWarned: () => void;
+}
+export default warnOnce;

package/esm/utils/warnOnce.js

@@ -0,0 +1,18 @@
+var warned = {};
+/**
+ * Logs a warning message
+ * but dont warn a same message twice
+ */
+
+export default function warnOnce(message) {
+  if (!warned[message]) {
+    console.warn(message);
+    warned[message] = true;
+  }
+}
+
+warnOnce._resetWarned = function () {
+  for (var _message in warned) {
+    delete warned[_message];
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.12.0",
+  "version": "5.14.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/color-modes/dark.less

@@ -167,15 +167,18 @@
   --rs-sidenav-default-selected-text: @H500;
   --rs-sidenav-default-hover-bg: @B700;
   --rs-sidenav-default-hover-text: @B050;
+  --rs-sidenav-default-footer-border: @B600;
   --rs-sidenav-inverse-bg: @H700;
   --rs-sidenav-inverse-text: #fff;
   --rs-sidenav-inverse-selected-bg: @H400;
   --rs-sidenav-inverse-hover-bg: @H600;
+  --rs-sidenav-inverse-footer-border: @H600;
   --rs-sidenav-subtle-bg: transparent;
   --rs-sidenav-subtle-text: @B200;
   --rs-sidenav-subtle-selected-text: @H500;
   --rs-sidenav-subtle-hover-bg: @B700;
   --rs-sidenav-subtle-hover-text: @B050;
+  --rs-sidenav-subtle-footer-border: @B600;
 
   // Input
   --rs-input-bg: @B800;

package/styles/color-modes/high-contrast.less

@@ -175,16 +175,19 @@
   --rs-sidenav-default-selected-text: @H500;
   --rs-sidenav-default-hover-bg: transparent;
   --rs-sidenav-default-hover-text: @H500;
+  --rs-sidenav-default-footer-border: @B050;
   --rs-sidenav-inverse-bg: @B800;
   --rs-sidenav-inverse-text: @B050;
   --rs-sidenav-inverse-selected-bg: transparent;
   --rs-sidenav-inverse-selected-text: @H500;
   --rs-sidenav-inverse-hover-bg: transparent;
+  --rs-sidenav-inverse-footer-border: @B050;
   --rs-sidenav-subtle-bg: @B800;
   --rs-sidenav-subtle-text: @B050;
   --rs-sidenav-subtle-selected-text: @H500;
   --rs-sidenav-subtle-hover-bg: transparent;
   --rs-sidenav-subtle-hover-text: @H500;
+  --rs-sidenav-subtle-footer-border: @B050;
 
   // Input
   --rs-input-bg: @B800;

package/styles/color-modes/light.less

@@ -120,8 +120,8 @@
 
   // Dropdown
   --rs-dropdown-divider: @B200;
-  --rs-dropdown-item-bg-hover: @H050;
-  --rs-dropdown-item-bg-active: fade(@H050, 50);
+  --rs-dropdown-item-bg-hover: fade(@H100, 50%);
+  --rs-dropdown-item-bg-active: @H050;
   --rs-dropdown-item-text-active: @H700;
   --rs-dropdown-header-text: @B500;
   --rs-dropdown-shadow: 0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
@@ -174,15 +174,18 @@
   --rs-sidenav-default-selected-text: @H700;
   --rs-sidenav-default-hover-bg: @B200;
   --rs-sidenav-default-hover-text: @B800;
+  --rs-sidenav-default-footer-border: @B200;
   --rs-sidenav-inverse-bg: @H500;
   --rs-sidenav-inverse-text: #fff;
   --rs-sidenav-inverse-selected-bg: @H700;
   --rs-sidenav-inverse-hover-bg: @H600;
+  --rs-sidenav-inverse-footer-border: @H600;
   --rs-sidenav-subtle-bg: #fff;
   --rs-sidenav-subtle-text: @B600;
   --rs-sidenav-subtle-selected-text: @H700;
   --rs-sidenav-subtle-hover-bg: @B050;
   --rs-sidenav-subtle-hover-text: @B800;
+  --rs-sidenav-subtle-footer-border: @B200;
 
   // Input
   --rs-input-bg: @B000;

package/styles/variables.less

@@ -23,17 +23,25 @@
 // Media queries breakpoints
 // Define the breakpoints at which your layout will change, adapting to different screen sizes.
 
-// Extra small screen / phone
-// @screen-xs
-@screen-phone:        480px;
+// Small screen / phone
+// @screen-sm
+@screen-sm:      576px;
 
 // Medium screen / desktop
 // @screen-md
-@screen-desktop:      992px;
+@screen-md:      768px;
 
 // Large screen / wide desktop
 // @screen-lg
-@screen-lg-desktop:   1200px;
+@screen-lg:      992px;
+
+// Extra large devices / extra wide desktop
+// @screen-xl
+@screen-xl:      1200px;
+
+// Extra extra large devices / ultra wide desktop
+// @screen-xxl
+@screen-xxl:     1400px;
 
 
 // Grid system
@@ -48,16 +56,24 @@
 // Define the maximum width of `.container` for different screen sizes.
 
 // Small screen / phone / tablet
-@container-phone:         (480px + @grid-gutter-width);
-@container-sm:            @container-phone;
+@container-phone:                      (540px + @grid-gutter-width);
+@container-sm:                         @container-phone;
 
 // Medium screen / desktop
-@container-desktop:       (940px + @grid-gutter-width);
-@container-md:            @container-desktop;
+@container-desktop:                    (720px + @grid-gutter-width);
+@container-md:                         @container-desktop;
 
 // Large screen / wide desktop
-@container-large-desktop: (1140px + @grid-gutter-width);
-@container-lg:            @container-large-desktop;
+@container-large-desktop:              (960px + @grid-gutter-width);
+@container-lg:                         @container-large-desktop;
+
+// Extra large devices / ultra wide desktop
+@container-extra-large-desktop:        (1140px + @grid-gutter-width);
+@container-xl:                         @container-large-desktop;
+
+// Extra large devices / ultra wide desktop
+@container-extra-extra-large-desktop:  (1320px + @grid-gutter-width);
+@container-xxl:                        @container-large-desktop;
 
 // Color system
 
@@ -199,7 +215,6 @@
 @table-header-sort-wrapper-margin-left: 5px;
 
 @table-column-resize-spanner-width:                 3px;
-@table-column-resize-spanner-gap-width:             3px;
 @table-column-resize-spanner-triangle-side-length:  3px;
 
 @table-body-content-padding-vertical:   13px; // @deprecated use @table-cell-padding-y instead
@@ -323,6 +338,9 @@
 @dropdown-divider-bg:         @divider-border-color;
 @dropdown-shadow:             0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);
 
+@dropdown-menu-radius:              @border-radius;
+@dropdown-menu-padding-y:           @dropdown-menu-radius;
+
 @dropdown-item-padding-vertical:    8px; // @deprecated use @dropdown-item-padding-y instead
 @dropdown-item-padding-horizontal:  12px; // @deprecated use @dropdown-item-padding-x instead
 
@@ -394,14 +412,17 @@
 
 // Sidenav
 
+@sidenav-item-caret-size:               16px;
 @sidenav-padding-vertical:              15px;
 @sidenav-children-padding-vertical:     11px;
 @sidenav-padding-horizontal:            20px;
 @sidenav-collapse-in-width:             100%;
 @sidenav-default-width:                 56px;
+@sidenav-compact-width:                 @sidenav-default-width; // TODO Replace sidenav-default-width
 @sidenav-item-height:                   (@sidenav-padding-vertical * 2 + @line-height-computed);
 @sidenav-menu-max-height:               (@sidenav-item-height * 40);
 @sidenav-menu-animation-time:           1.5s;
+@sidenav-footer-height:                 @sidenav-item-height; // Footer is same height as a sidenav item
 @sidenav-level1-item-font-size:         @font-size-large;
 @sidenav-level1-item-line-height:       unit((@line-height-computed / @font-size-large));
 @sidenav-icon-spacing:                  20px;