rsuite 5.12.0 → 5.14.0

package/Button/styles/index.less

@@ -35,6 +35,7 @@
   .button-activated({
     color: var(--rs-btn-default-hover-text);
     background-color: var(--rs-btn-default-hover-bg);
+    text-decoration: none;
   });
 
   .button-pressed({

package/CHANGELOG.md

@@ -1,3 +1,52 @@
+# [5.14.0](https://github.com/rsuite/rsuite/compare/v5.13.1...v5.14.0) (2022-06-02)
+
+### Bug Fixes
+
+- **Button:** remove underline when hovered ([#2516](https://github.com/rsuite/rsuite/issues/2516)) ([8bbb10d](https://github.com/rsuite/rsuite/commit/8bbb10db425dadd4110db60b8b7066d8f97bab54))
+- **Dropdown:** fix vertical alignment of submenus ([#2524](https://github.com/rsuite/rsuite/issues/2524)) ([7c0ef52](https://github.com/rsuite/rsuite/commit/7c0ef52e9c7f57abfd97814725f5b3b82cc5dd70))
+- **Form:** make FormInstance methods non-nullable ([#2521](https://github.com/rsuite/rsuite/issues/2521)) ([225af8a](https://github.com/rsuite/rsuite/commit/225af8a9abdffaf76101f28e3690b7ede6a16139))
+- **Modal:** expose missing props ([#2522](https://github.com/rsuite/rsuite/issues/2522)) ([2ed7040](https://github.com/rsuite/rsuite/commit/2ed704002d03cec1478de879b08c0d3e7fd2dcf1))
+- **Panel:** fix accordion not collapsible expanded panel ([#2514](https://github.com/rsuite/rsuite/issues/2514)) ([10c80f2](https://github.com/rsuite/rsuite/commit/10c80f26622e2f5b8c2e81731b66e2276d5622c4))
+- **Sidenav:** display tooltip when hovering collapsed Sidenav item ([#2504](https://github.com/rsuite/rsuite/issues/2504)) ([d1238eb](https://github.com/rsuite/rsuite/commit/d1238ebb22e2458a780846903e042de72c1d8143))
+- **Sidenav:** remove subtle item bg when focused by mouse ([#2511](https://github.com/rsuite/rsuite/issues/2511)) ([819461c](https://github.com/rsuite/rsuite/commit/819461c918e809fa397fe3dc6146510a9ffb1bd2))
+- **Table:** fix elements in merged cells being occluded ([#2513](https://github.com/rsuite/rsuite/issues/2513)) ([22e5467](https://github.com/rsuite/rsuite/commit/22e54671cbeb3e63d8480469c3d53744732308f2))
+
+### Features
+
+- **grid:** synchronize all grid size and breakpoint with bootstrap5 ([e8d2d37](https://github.com/rsuite/rsuite/commit/e8d2d372e2280336482de648d9619607b9cb1798))
+- **Nav.Menu:** add `openDirection` prop ([#2523](https://github.com/rsuite/rsuite/issues/2523)) ([bd824ac](https://github.com/rsuite/rsuite/commit/bd824ac9359cc5cebb848424d8045986e32c6462))
+- **toaster:** add support for useToaster ([#2518](https://github.com/rsuite/rsuite/issues/2518)) ([75cb960](https://github.com/rsuite/rsuite/commit/75cb9601b56fbdc64a09b9bbc93aaf2b22b715c4))
+- **Tooltip,Popover:** add arrow props to hide arrow indicator ([48d876f](https://github.com/rsuite/rsuite/commit/48d876f7d2211f5e9cb1db7e8f552152821e05ac))
+- **Tooltip,Popover:** add followCursor props to enable speaker follow cursor ([e3bf75d](https://github.com/rsuite/rsuite/commit/e3bf75d4e4c537bf677c404fce84b76266531630))
+
+### Performance Improvements
+
+- **Dropdown:** improve contrast of active Dropdown item background color ([#2510](https://github.com/rsuite/rsuite/issues/2510)) ([35a418a](https://github.com/rsuite/rsuite/commit/35a418ae5f2104e6ac56ebe5c91d426025fce94a))
+
+## [5.13.1](https://github.com/rsuite/rsuite/compare/v5.13.0...v5.13.1) (2022-05-27)
+
+### Bug Fixes
+
+- **CheckTreePicker:** fix duplicated key when data changed ([#2486](https://github.com/rsuite/rsuite/issues/2486)) ([#2500](https://github.com/rsuite/rsuite/issues/2500)) ([d155719](https://github.com/rsuite/rsuite/commit/d155719a9ae9d9cec119a0c33281c628379b4a78))
+- **Sidenav:** correct Sidenav.Toggle styles ([#2497](https://github.com/rsuite/rsuite/issues/2497)) ([b3168e4](https://github.com/rsuite/rsuite/commit/b3168e426c3a2caad1689e9e9d3babf1d76022b8))
+- **Sidenav:** correct subtle Sidenav item hover styles ([#2498](https://github.com/rsuite/rsuite/issues/2498)) ([2d853ee](https://github.com/rsuite/rsuite/commit/2d853ee8419a3283683bbf897442b9bc789b5a2a))
+- **Sidenav:** fix Sidenav.Toggle icon direction ([#2495](https://github.com/rsuite/rsuite/issues/2495)) ([c490632](https://github.com/rsuite/rsuite/commit/c490632cc613807ff27124140b4250fc132aa8b2))
+- **Whisper:** correct type declarations for ref ([856877a](https://github.com/rsuite/rsuite/commit/856877aec5a20710b94f6ddf241be76ecd34c88d))
+
+### Features
+
+- export WhisperInstance ([1c4eb5f](https://github.com/rsuite/rsuite/commit/1c4eb5ffbb6b5e69987436c03cc133f39c245866))
+
+# [5.13.0](https://github.com/rsuite/rsuite/compare/v5.12.0...v5.13.0) (2022-05-19)
+
+### Bug Fixes
+
+- **listbox:** fix broken keyboard navigation after filtering ([#2491](https://github.com/rsuite/rsuite/issues/2491)) ([329623a](https://github.com/rsuite/rsuite/commit/329623a21e8d551db3e634894ddcbb3658b1579d))
+
+### Performance Improvements
+
+- **Cascader:** apply tree view pattern ([#2492](https://github.com/rsuite/rsuite/issues/2492)) ([f3a5808](https://github.com/rsuite/rsuite/commit/f3a5808eb60cc4f5250cce908322a702a91a9d96))
+
 # [5.12.0](https://github.com/rsuite/rsuite/compare/v5.11.0...v5.12.0) (2022-05-12)
 
 ### Features

package/Dropdown/styles/index.less

@@ -94,8 +94,8 @@
   font-size: @font-size-base;
   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
   background-color: var(--rs-bg-overlay);
-  border-radius: @border-radius;
-  padding: @border-radius 0;
+  border-radius: @dropdown-menu-radius;
+  padding: @dropdown-menu-padding-y 0;
   outline: 0;
 
   &:focus-visible {
@@ -202,7 +202,7 @@
 
     > .rs-dropdown-menu {
       position: absolute;
-      top: 0;
+      top: -@dropdown-menu-padding-y;
     }
   }
 
@@ -223,6 +223,11 @@
 
   .rs-dropdown-menu {
     left: 100%;
+
+    &[data-direction='start'] {
+      left: unset;
+      right: 100%;
+    }
   }
 
   // Open

package/Grid/styles/index.less

@@ -13,17 +13,25 @@
 .rs-grid-container {
   .container-fixed();
 
-  @media (min-width: @screen-phone) {
+  @media (min-width: @screen-sm) {
     width: @container-sm;
   }
 
-  @media (min-width: @screen-desktop) {
+  @media (min-width: @screen-md) {
     width: @container-md;
   }
 
-  @media (min-width: @screen-lg-desktop) {
+  @media (min-width: @screen-lg) {
     width: @container-lg;
   }
+
+  @media (min-width: @screen-xl) {
+    width: @container-xl;
+  }
+
+  @media (min-width: @screen-xxl) {
+    width: @container-xxl;
+  }
 }
 
 // Fluid container
@@ -60,7 +68,7 @@
 // Columns, offsets, pushes, and pulls for the small device range, from phones
 // to tablets / phones.
 
-@media (min-width: @screen-phone) {
+@media (min-width: @screen-sm) {
   .make-grid(sm);
 }
 
@@ -68,7 +76,7 @@
 //
 // Columns, offsets, pushes, and pulls for the desktop device range.
 
-@media (min-width: @screen-desktop) {
+@media (min-width: @screen-md) {
   .make-grid(md);
 }
 
@@ -76,26 +84,50 @@
 //
 // Columns, offsets, pushes, and pulls for the large desktop device range.
 
-@media (min-width: @screen-lg-desktop) {
+@media (min-width: @screen-lg) {
   .make-grid(lg);
 }
 
+// Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-xl) {
+  .make-grid(xl);
+}
+
+// Extra extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-xxl) {
+  .make-grid(xxl);
+}
+
 // Hiddens
 //
 // All hidden styles.
 
-@media (max-width: (@screen-phone - 1)) {
+@media (max-width: (@screen-sm - 1)) {
   .hidden(xs);
 }
 
-@media (min-width: @screen-phone) and (max-width: (@screen-desktop - 1)) {
+@media (min-width: @screen-sm) and (max-width: (@screen-md - 1)) {
   .hidden(sm);
 }
 
-@media (min-width: @screen-desktop) and (max-width: (@screen-lg-desktop - 1)) {
+@media (min-width: @screen-md) and (max-width: (@screen-lg - 1)) {
   .hidden(md);
 }
 
-@media (min-width: @screen-lg-desktop) {
+@media (min-width: @screen-lg) and (max-width: (@screen-xl - 1)) {
   .hidden(lg);
 }
+
+@media (min-width: @screen-xl) and (max-width: (@screen-xxl - 1)) {
+  .hidden(xl);
+}
+
+@media (min-width: @screen-xxl) {
+  .hidden(xxl);
+}

package/Nav/styles/index.less

@@ -82,9 +82,15 @@
     });
   }
 
-  > .rs-icon {
+  &-icon {
     margin-right: 6px;
   }
+
+  &-caret {
+    font-size: 16px;
+    vertical-align: text-bottom;
+    margin-left: 6px;
+  }
 }
 
 // Orientations

package/Navbar/styles/index.less

@@ -63,10 +63,15 @@
   display: flex;
   align-items: center;
 
-  > .rs-icon {
+  &-icon {
     font-size: 16px;
     margin-right: 5px;
   }
+
+  &-caret {
+    font-size: 16px;
+    margin-left: 6px;
+  }
 }
 
 // Focus style

package/Sidenav/styles/index.less

@@ -12,14 +12,16 @@
 .rs-sidenav {
   transition: width @sidenav-collapse-transition-config;
   width: @sidenav-default-width;
+  display: flex;
+  flex-direction: column;
 }
 
 .rs-sidenav-nav {
   list-style: none;
   padding: 0;
 
-  > .rs-sidenav-item,
-  > .rs-dropdown .rs-dropdown-toggle,
+  .rs-sidenav-item,
+  .rs-dropdown-toggle,
   .rs-dropdown-item,
   .rs-dropdown-item-toggle {
     padding: @sidenav-padding-vertical @sidenav-padding-horizontal;
@@ -68,11 +70,12 @@
 
       // Submenu toggle icon
       &-icon {
+        font-size: @sidenav-item-caret-size;
         position: absolute;
         right: @sidenav-padding-horizontal;
         top: @sidenav-children-padding-vertical;
-        width: auto;
-        height: @sidenav-dropdown-toggle-caret-width;
+        // width: auto;
+        // height: @sidenav-dropdown-toggle-caret-width;
         transform: rotate(90deg);
       }
     }
@@ -115,6 +118,7 @@
     padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
 
     .rs-dropdown-toggle-caret {
+      font-size: @sidenav-item-caret-size;
       right: @sidenav-padding-horizontal;
       top: @sidenav-padding-vertical;
 
@@ -183,6 +187,22 @@
   }
 }
 
+// TODO Consider rename as sidenav-footer
+.rs-sidenav-toggle {
+  height: @sidenav-footer-height;
+  border-top: 1px solid;
+  margin-top: auto;
+
+  &-button {
+    float: right;
+    width: @sidenav-compact-width;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+    color: inherit;
+  }
+}
+
 // Expanded styles
 .rs-sidenav-collapse-in {
   width: @sidenav-collapse-in-width;
@@ -412,12 +432,14 @@
   color: var(--rs-sidenav-default-text);
 
   .rs-sidenav-item,
-  .rs-dropdown-toggle {
+  .rs-dropdown-toggle,
+  .rs-sidenav-toggle-button {
     background-color: var(--rs-sidenav-default-bg);
   }
 
   .rs-sidenav-item:hover,
   .rs-dropdown .rs-dropdown-toggle:hover,
+  .rs-sidenav-toggle-button:hover,
   .rs-dropdown.rs-dropdown-open .rs-dropdown-toggle {
     background-color: var(--rs-sidenav-default-hover-bg);
     color: var(--rs-sidenav-default-hover-text);
@@ -425,10 +447,14 @@
 
   .rs-sidenav-item.rs-sidenav-item-active,
   .rs-dropdown-item.rs-dropdown-item-active,
-  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon {
+  .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
     color: var(--rs-sidenav-default-selected-text);
   }
 
+  .rs-sidenav-toggle {
+    border-top-color: var(--rs-sidenav-default-footer-border);
+  }
+
   // Collapsed
   &.rs-sidenav-collapse-out {
     .rs-dropdown-item.rs-dropdown-item-active {
@@ -466,7 +492,7 @@
 .rs-sidenav-default.rs-sidenav-collapsing,
 .rs-sidenav-default.rs-sidenav-collapse-out {
   // Set active Level1 style
-  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle-icon {
+  .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
     color: var(--rs-sidenav-default-selected-text);
   }
 }
@@ -478,6 +504,7 @@
 
   .rs-sidenav-item,
   .rs-dropdown .rs-dropdown-toggle,
+  .rs-sidenav-toggle-button,
   .rs-dropdown-item-submenu:hover > .rs-dropdown-item-toggle {
     background-color: var(--rs-sidenav-inverse-bg);
 
@@ -489,7 +516,8 @@
 
   .rs-dropdown-item,
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
-  .rs-dropdown-item > .rs-dropdown-item-toggle {
+  .rs-dropdown-item > .rs-dropdown-item-toggle,
+  .rs-sidenav-toggle-button {
     color: var(--rs-sidenav-inverse-text);
 
     &:hover,
@@ -525,20 +553,26 @@
   .rs-dropdown-item.rs-dropdown-item-active {
     background-color: var(--rs-sidenav-inverse-selected-bg);
   }
+
+  .rs-sidenav-toggle {
+    border-top-color: var(--rs-sidenav-inverse-footer-border);
+  }
 }
 
 // Subtle Sidenav
 .rs-sidenav-subtle {
   background-color: transparent;
-  color: var(--rs-sidenav-subtle-text);
 
   .rs-sidenav-item,
-  .rs-dropdown .rs-dropdown-toggle {
+  .rs-dropdown-toggle,
+  .rs-dropdown-item,
+  .rs-sidenav-toggle-button {
     background-color: transparent;
+    color: var(--rs-sidenav-subtle-text);
 
     &:hover,
-    &:focus {
-      background-color: transparent;
+    &:focus-visible {
+      background-color: var(--rs-sidenav-subtle-hover-bg);
       color: var(--rs-sidenav-subtle-hover-text);
     }
   }
@@ -546,7 +580,7 @@
   // Active
   .rs-sidenav-item.rs-sidenav-item-active,
   .rs-dropdown-item.rs-dropdown-item-active,
-  .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
+  .rs-dropdown.rs-dropdown-selected-within .rs-sidenav-item-icon {
     color: var(--rs-sidenav-subtle-selected-text);
   }
 
@@ -558,6 +592,10 @@
       background-color: var(--rs-sidenav-subtle-hover-bg);
     }
   }
+
+  .rs-sidenav-toggle {
+    border-top-color: var(--rs-sidenav-subtle-footer-border);
+  }
 }
 
 .rs-sidenav-subtle.rs-sidenav-collapse-in,
@@ -567,7 +605,7 @@
     color: var(--rs-sidenav-subtle-text);
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       background-color: var(--rs-sidenav-subtle-hover-bg);
       color: var(--rs-sidenav-subtle-hover-text);
     }
@@ -584,8 +622,6 @@
 .rs-sidenav-subtle.rs-sidenav-collapse-out {
   // Set active Level1 style
   .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
-    color: var(--rs-sidenav-subtle-text);
-
     &:hover {
       background-color: var(--rs-sidenav-subtle-hover-bg);
     }

package/Table/styles/index.less

@@ -222,9 +222,7 @@
   &-column-resize-spanner {
     .column-resize-spanner();
 
-    border-left: @table-column-resize-spanner-gap-width solid var(--rs-bg-card);
     box-sizing: content-box;
-    margin-left: (-1 * @table-column-resize-spanner-gap-width);
 
     &::after,
     &::before {

package/Tooltip/styles/index.less

@@ -31,8 +31,8 @@
   }
 
   // Arrows
-  &::before,
-  &::after {
+  &-arrow::before,
+  &-arrow::after {
     content: ' ';
     display: block;
     position: absolute;
@@ -42,14 +42,14 @@
     border-style: solid;
   }
 
-  &::before {
+  &-arrow::before {
     display: none;
   }
 
   .high-contrast-mode({
     border: 1px solid var(--rs-border-primary);
 
-    &::before {
+    &-arrow::before {
       display: block;
     }
   });

package/cjs/@types/common.d.ts

@@ -149,4 +149,10 @@ export interface Offset {
     height: number;
 }
 export declare type OnChangeCallback<T, E = React.SyntheticEvent> = (value: T, event: E) => void;
+export declare type CursorPosition = {
+    top: number;
+    left: number;
+    clientTop: number;
+    clientLeft: number;
+};
 export {};

package/cjs/Cascader/DropdownMenu.js

@@ -123,11 +123,13 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     return /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenuItem, {
       classPrefix: "picker-cascader-menu-item",
       as: 'li',
+      role: "treeitem",
       key: layer + "-" + onlyKey,
       disabled: disabled,
       active: !(0, _isUndefined.default)(activeItemValue) && (0, _utils.shallowEqual)(activeItemValue, value),
       focus: focus,
       value: value,
+      "aria-owns": node.children ? 'treeitem-' + value + '-children' : undefined,
       className: children ? prefix('has-children') : undefined,
       onSelect: function onSelect(_value, event) {
         return handleSelect(layer, node, event);
@@ -143,14 +145,15 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   };
   var cascadeNodes = cascadeData.map(function (children, layer) {
     var onlyKey = layer + "_" + children.length;
+    var parentNode = cascadePaths[layer - 1];
 
     var menu = /*#__PURE__*/_react.default.createElement("ul", {
-      role: "listbox"
+      role: layer === 0 ? 'none presentation' : 'group',
+      id: parentNode ? 'treeitem-' + parentNode[valueKey] + '-children' : undefined
     }, children.map(function (item, index) {
       return renderCascadeNode(item, index, layer, cascadePaths[layer] && (0, _utils.shallowEqual)(cascadePaths[layer][valueKey], item[valueKey]));
     }));
 
-    var parentNode = cascadePaths[layer - 1];
     return /*#__PURE__*/_react.default.createElement("div", {
       key: onlyKey,
       className: prefix('column'),
@@ -162,7 +165,9 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       }
     }, renderMenu ? renderMenu(children, menu, parentNode, layer) : menu);
   });
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    role: "tree"
+  }, rest, {
     ref: (0, _utils.mergeRefs)(rootRef, ref),
     className: classes
   }), /*#__PURE__*/_react.default.createElement("div", {

package/cjs/Cascader/utils.d.ts

@@ -6,7 +6,7 @@ export declare function getColumnsAndPaths<T extends ItemDataType>(data: T[], va
     paths: T[];
 };
 export declare function usePaths(props: CascaderProps): {
-    enforceUpdate: (nextValue: any, isAttachChildren?: boolean | undefined) => void;
+    enforceUpdate: (nextValue: any, isAttachChildren?: boolean) => void;
     columnData: ItemDataType<string | number>[][];
     valueToPaths: ItemDataType<string | number>[];
     selectedPaths: ItemDataType<string | number>[];

package/cjs/Col/Col.d.ts

@@ -1,21 +1,29 @@
 import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
 export interface ColProps extends WithAsProps {
-    /** The number of columns you wish to span for Extra small devices Phones (< 480px) */
+    /** The number of columns you wish to span for Extra small devices Phones (< 576px) */
     xs?: number;
-    /** The number of columns you wish to span for Small devices Tablets (≥ 480px) */
+    /** The number of columns you wish to span for Small devices Tablets (≥ 576px) */
     sm?: number;
-    /** The number of columns you wish to span for Medium devices Desktops (≥ 992px) */
+    /** The number of columns you wish to span for Medium devices Desktops (≥ 768px) */
     md?: number;
-    /** The number of columns you wish to span for Large devices Desktops (≥ 1200px) */
+    /** The number of columns you wish to span for Large devices Desktops (≥ 992px) */
     lg?: number;
+    /** The number of columns you wish to span for Extra Large devices Desktops (≥ 1200px) */
+    xl?: number;
+    /** The number of columns you wish to span for Ultra Large devices Desktops (≥ 1400px) */
+    xxl?: number;
     /** Move columns to the right for Extra small devices Phones */
     xsOffset?: number;
     /** Move columns to the right for Small devices Tablets */
     smOffset?: number;
     /** Move columns to the right for Medium devices Desktops */
     mdOffset?: number;
-    /** Move columns to the right for Medium devices Desktops */
+    /** Move columns to the right for Large devices Desktops */
     lgOffset?: number;
+    /** Move columns to the right for Extra large devices Desktops */
+    xlOffset?: number;
+    /** Move columns to the right for Ultra large devices Desktops */
+    xxlOffset?: number;
     /** Change the order of grid columns to the right for Extra small devices Phones */
     xsPush?: number;
     /** Change the order of grid columns to the right for Small devices Tablets */
@@ -24,6 +32,10 @@ export interface ColProps extends WithAsProps {
     mdPush?: number;
     /** Change the order of grid columns to the right for Large devices Desktops */
     lgPush?: number;
+    /** Change the order of grid columns to the right for Extra large devices Desktops */
+    xlPush?: number;
+    /** Change the order of grid columns to the right for Ultra large devices Desktops */
+    xxlPush?: number;
     /** Change the order of grid columns to the left for Extra small devices Phones */
     xsPull?: number;
     /** Change the order of grid columns to the left for Small devices Tablets */
@@ -32,6 +44,10 @@ export interface ColProps extends WithAsProps {
     mdPull?: number;
     /** Change the order of grid columns to the left for Large devices Desktops */
     lgPull?: number;
+    /** Change the order of grid columns to the left for Extra large devices Desktops */
+    xlPull?: number;
+    /** Change the order of grid columns to the left for Ultra large devices Desktops */
+    xxlPull?: number;
     /** Hide column on Extra small devices Phones */
     xsHidden?: boolean;
     /** Hide column on Small devices Tablets */
@@ -40,6 +56,10 @@ export interface ColProps extends WithAsProps {
     mdHidden?: boolean;
     /** Hide column on Large devices Desktops */
     lgHidden?: boolean;
+    /** Hide column on Extra large devices Desktops */
+    xlHidden?: boolean;
+    /** Hide column on Ultra large devices Desktops */
+    xxlHidden?: boolean;
 }
 declare const Col: RsRefForwardingComponent<'div', ColProps>;
 export default Col;

package/cjs/Col/Col.js

@@ -39,7 +39,7 @@ var Col = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     return rest[key];
   };
 
-  _utils.SIZE.forEach(function (size) {
+  _utils.COLUMN_SIZE.forEach(function (size) {
     var col = getPropValue(size);
     var hidden = getPropValue(size + "Hidden");
     var offset = getPropValue(size + "Offset");
@@ -70,10 +70,14 @@ Col.propTypes = {
   sm: _propTypes.default.number,
   md: _propTypes.default.number,
   lg: _propTypes.default.number,
+  xl: _propTypes.default.number,
+  xxl: _propTypes.default.number,
   xsOffset: _propTypes.default.number,
   smOffset: _propTypes.default.number,
   mdOffset: _propTypes.default.number,
   lgOffset: _propTypes.default.number,
+  xlOffset: _propTypes.default.number,
+  xxlOffset: _propTypes.default.number,
   xsPush: _propTypes.default.number,
   smPush: _propTypes.default.number,
   mdPush: _propTypes.default.number,
@@ -82,10 +86,14 @@ Col.propTypes = {
   smPull: _propTypes.default.number,
   mdPull: _propTypes.default.number,
   lgPull: _propTypes.default.number,
+  xlPull: _propTypes.default.number,
+  xxlPull: _propTypes.default.number,
   xsHidden: _propTypes.default.bool,
   smHidden: _propTypes.default.bool,
   mdHidden: _propTypes.default.bool,
   lgHidden: _propTypes.default.bool,
+  xlHidden: _propTypes.default.bool,
+  xxlHidden: _propTypes.default.bool,
   as: _propTypes.default.elementType
 };
 var _default = Col;