rsuite 5.4.2 → 5.5.1

package/Button/styles/index.less

@@ -14,7 +14,6 @@
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
-  outline: 0 !important;
   white-space: nowrap;
   transition: @btn-transition;
   // Reset border style in all browser
@@ -31,10 +30,7 @@
 
   .rs-btn-md();
 
-  &:focus {
-    outline: 0;
-    box-shadow: var(--rs-state-focus-shadow);
-  }
+  .with-focus-ring();
 
   .button-activated({
     color: var(--rs-btn-default-hover-text);

package/CHANGELOG.md

@@ -1,3 +1,50 @@
+## [5.5.1](https://github.com/rsuite/rsuite/compare/v5.5.0...v5.5.1) (2022-01-21)
+
+### Bug Fixes
+
+- **Carousel:** add a flex-wrap property on toolbar buttons ([#2302](https://github.com/rsuite/rsuite/issues/2302)) ([a9a9113](https://github.com/rsuite/rsuite/commit/a9a911378c4aaeba43233dd3acdc05913a9bf6ae))
+- **CheckTreePicker:** fix CheckTreePicker label style ([#2304](https://github.com/rsuite/rsuite/issues/2304)) ([07eb5ac](https://github.com/rsuite/rsuite/commit/07eb5acd4e8283529619ad2b4d6003b0c4f8614d))
+- **DateRangePicker:** fix month not selectable on calendar ([#2312](https://github.com/rsuite/rsuite/issues/2312)) ([5199845](https://github.com/rsuite/rsuite/commit/5199845ee435e923c807da5e0813f4ba06a86798))
+- **Sidenav:** hide focus ring when interacting with mouse ([#2311](https://github.com/rsuite/rsuite/issues/2311)) ([9413bc9](https://github.com/rsuite/rsuite/commit/9413bc9a48fb8a3f915cc811b3392ba4e65b0b70))
+
+### Performance Improvements
+
+- Responsive for small screen ([#2293](https://github.com/rsuite/rsuite/issues/2293)) ([cadc42e](https://github.com/rsuite/rsuite/commit/cadc42e39baee174ff7d5577ea933cb471ef5bd0))
+
+# [5.5.0](https://github.com/rsuite/rsuite/compare/v5.4.4...v5.5.0) (2022-01-13)
+
+### Bug Fixes
+
+- **Dropdown:** infer toggleAs component props ([#2299](https://github.com/rsuite/rsuite/issues/2299)) ([84611cc](https://github.com/rsuite/rsuite/commit/84611cc6f88e1d9cd712bc3f08be559d0a146ba0))
+- **InputNumber:** inherit html input attributes ([#2298](https://github.com/rsuite/rsuite/issues/2298)) ([d7622ee](https://github.com/rsuite/rsuite/commit/d7622eed72b36ed15e91f606027d2e540391bdc7))
+- **MultiCascader:** fix not rendering the count of selected values ([#2289](https://github.com/rsuite/rsuite/issues/2289)) ([324e90c](https://github.com/rsuite/rsuite/commit/324e90c8499adf58cb25083fd5c99fe98eb9ecba))
+- **Tree:** fix dragNode has cyclic object ([#2281](https://github.com/rsuite/rsuite/issues/2281)) ([26cbaf2](https://github.com/rsuite/rsuite/commit/26cbaf2fd92ab562174e19cf55388c01fe22143a)), closes [#2268](https://github.com/rsuite/rsuite/issues/2268)
+
+### Features
+
+- **InputNumber:** support keyboard interaction ([#2294](https://github.com/rsuite/rsuite/issues/2294)) ([46993e2](https://github.com/rsuite/rsuite/commit/46993e235ca3d3ee8b6faa16a5fa11a8ed544e3b))
+- **RangeSlider:** add `constraint` prop ([#2291](https://github.com/rsuite/rsuite/issues/2291)) ([a2d38a8](https://github.com/rsuite/rsuite/commit/a2d38a8efe4f85c28ce1f4ee79a89eda1e1cf7b0))
+
+### Performance Improvements
+
+- **styles:** simplify compound selectors over 4 levels ([#2282](https://github.com/rsuite/rsuite/issues/2282)) ([304e8da](https://github.com/rsuite/rsuite/commit/304e8da0c2057d148bbad36674aba33382439949))
+
+## [5.4.4](https://github.com/rsuite/rsuite/compare/v5.4.3...v5.4.4) (2022-01-06)
+
+### Bug Fixes
+
+- **CheckTreePicker:** fix root node style incorrect ([#2279](https://github.com/rsuite/rsuite/issues/2279)) ([c09226e](https://github.com/rsuite/rsuite/commit/c09226e141f7881b11fe5594d802974f49e789a9))
+- **DatePicker:** fix clear button not working ([#2273](https://github.com/rsuite/rsuite/issues/2273)) ([649362a](https://github.com/rsuite/rsuite/commit/649362aa697a292af28c5ec666e4337a7bd449c7))
+- **Dropdown:** wrong submenu placement in RTL direction ([#2280](https://github.com/rsuite/rsuite/issues/2280)) ([c3735c3](https://github.com/rsuite/rsuite/commit/c3735c335d5a8ca6e9954af1e5b77c453b5bd4d2))
+- **Navbar:** fix Whisper on Nav.Item within Navbar wrong positioning ([#2274](https://github.com/rsuite/rsuite/issues/2274)) ([bd0f5e3](https://github.com/rsuite/rsuite/commit/bd0f5e316e6bb910d9a41e43770b4d1a61528d9f)), closes [#2263](https://github.com/rsuite/rsuite/issues/2263)
+
+## [5.4.3](https://github.com/rsuite/rsuite/compare/v5.4.2...v5.4.3) (2021-12-30)
+
+### Bug Fixes
+
+- **Drawer:** fix Drawer cannot be closed when backdrop is clicked ([#2259](https://github.com/rsuite/rsuite/issues/2259)) ([a49ee03](https://github.com/rsuite/rsuite/commit/a49ee03db33c11db30597221ca61ce6daa088c4b))
+- **Picker:** add ref to PickerComponentProps ([#2261](https://github.com/rsuite/rsuite/issues/2261)) ([6e3e6c5](https://github.com/rsuite/rsuite/commit/6e3e6c57932af142dc1a74da6b7fffb57ae628ca))
+
 ## [5.4.2](https://github.com/rsuite/rsuite/compare/v5.4.1...v5.4.2) (2021-12-24)
 
 ### Bug Fixes

package/Carousel/styles/index.less

@@ -53,6 +53,7 @@
 
     > ul {
       display: flex;
+      flex-wrap: wrap;
       list-style: none;
       margin: 0;
       padding: 0;

package/CheckTreePicker/styles/index.less

@@ -1,6 +1,7 @@
 @import '../../styles/common';
-@import '../../Picker/styles/mixin';
+@import '../../Picker/styles/index';
 @import '../../TreePicker/styles/mixin';
+@import '../../Checkbox/styles/index';
 
 // **Check Tree Picker
 // **----------------------
@@ -23,38 +24,16 @@
       }
     }
   }
-}
-
-.rs-check-tree-node {
-  position: relative;
-  font-size: @picker-tree-node-font-size;
-  line-height: @picker-tree-node-line-height;
-
-  &-label {
-    .rs-check-item {
-      display: inline-block;
-
-      .rs-picker-menu & {
-        display: block;
-      }
-    }
 
-    &:focus .rs-check-item .rs-checkbox-checker > label {
-      .picker-item-hover();
-    }
-
-    .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
-      .picker-item-active();
-    }
-
-    .rs-check-item .rs-checkbox-checker > label {
+  .rs-check-item .rs-checkbox-checker {
+    > label {
       text-align: left;
       position: relative;
       margin: 0;
       //padding-left: 16px;
       padding: @picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal;
-      //text gap + checkbox space
-      padding-left: 58px; // 10px + 36px + 12px
+      //text gap + checkbox space + label gap
+      padding-left: 50px; // 10px + 36px + 4px
 
       &::before {
         content: '';
@@ -65,39 +44,61 @@
 
         height: 100%;
         top: 0;
-        margin-left: -58px; // 10px + 36px + 12px
+        margin-left: -52px; // 10px + 36px + 6px
       }
+    }
 
-      .rs-checkbox-wrapper {
-        left: (@checkbox-sense-width + 10px);
-      }
+    .rs-checkbox-wrapper {
+      left: (@checkbox-sense-width + 10px);
+    }
+  }
+}
 
-      // Only has the first level
-      .without-children & {
-        padding-left: 34px; //text gap + checkbox space
+// Only has the first level
+.rs-check-tree-without-children .rs-check-item .rs-checkbox-checker {
+  > label {
+    padding-left: 32px; //text gap + checkbox space
 
-        &::before {
-          width: 28px;
-          margin-left: -36px;
-        }
+    &::before {
+      width: 28px;
+      margin-left: -34px;
+    }
+  }
 
-        .rs-checkbox-wrapper {
-          left: 0;
-        }
-      }
+  .rs-checkbox-wrapper {
+    left: 0;
+  }
+}
+
+.rs-check-tree-node {
+  position: relative;
+  font-size: @picker-tree-node-font-size;
+  line-height: @picker-tree-node-line-height;
+
+  .rs-check-item {
+    display: inline-block;
+
+    .rs-picker-menu & {
+      display: block;
     }
   }
 
+  &:focus .rs-check-item .rs-checkbox-checker > label {
+    .picker-item-hover();
+  }
+
+  .rs-check-item.rs-checkbox-checked .rs-checkbox-checker > label {
+    .picker-item-active();
+  }
+
   // Uncheckable state
-  &-all-uncheckable > .rs-check-tree-node-label {
-    .rs-check-item .rs-checkbox-checker > label {
-      padding-left: 22px; // 10px + 12px
+  &-all-uncheckable > .rs-check-item .rs-checkbox-checker > label {
+    padding-left: 22px; // 10px + 12px
 
-      &::before {
-        width: 14px;
-        margin-left: 0;
-        left: 0;
-      }
+    &::before {
+      width: 14px;
+      margin-left: 0;
+      left: 0;
     }
   }
 }

package/Drawer/styles/index.less

@@ -6,6 +6,9 @@
   position: fixed;
   z-index: @zindex-drawer;
   top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 // Container that the drawer scrolls within

package/Dropdown/styles/index.less

@@ -108,6 +108,7 @@
     z-index: @zindex-dropdown + 1;
     float: left;
     box-shadow: var(--rs-dropdown-shadow);
+    outline: none;
 
     .high-contrast-mode({
       border: 1px solid var(--rs-border-primary);
@@ -219,26 +220,9 @@
       right: @dropdown-caret-icon-padding-horizontal;
     }
   }
-  //
-  //&.rs-dropdown-menu-pull-left {
-  //  &.rs-dropdown-item {
-  //    padding-left: @dropdown-item-padding-x+ @dropdown-item-submenu-icon-angle-spacing +
-  //      @dropdown-item-submenu-icon-angle-width;
-  //
-  //    > .rs-dropdown-menu-toggle .rs-dropdown-menu-toggle-icon {
-  //      left: @dropdown-caret-icon-padding-horizontal;
-  //    }
-  //  }
-  //}
-
-  // Pull right
-  .rs-dropdown-item-pull-right ~ .rs-dropdown-menu {
-    left: 100%;
-  }
 
-  // Pull Left
-  .rs-dropdown-item-pull-left ~ .rs-dropdown-menu {
-    right: 100%;
+  .rs-dropdown-menu {
+    left: 100%;
   }
 
   // Open

package/Dropdown/styles/mixin.less

@@ -39,8 +39,6 @@
   padding-right: @dropdown-toggle-padding-right;
   // Fixed: Content is not centered when customizing renderTitle.
   display: inline-block;
-  // Rest `:focus` blue border.
-  outline: none;
   cursor: pointer;
 }
 

package/Modal/styles/mixin.less

@@ -1,3 +1,4 @@
 .content-width(@width) {
   width: @width;
+  max-width: calc(100% - 10px);
 }

package/Navbar/styles/index.less

@@ -73,8 +73,6 @@
 .rs-navbar-brand,
 .rs-navbar-item,
 .rs-navbar-nav > .rs-dropdown-item {
-  outline: 0;
-
   &,
   &:hover,
   &:focus,
@@ -83,7 +81,9 @@
   }
 
   &:focus-visible {
-    .focus-ring();
+    // Navbar is usually placed by the top edge of the page
+    // thus use an inset focus ring to prevent overflow clipping
+    .focus-ring(inset);
 
     .high-contrast-mode({
       .focus-ring(slim-inset);
@@ -108,6 +108,11 @@
 .rs-navbar-nav > .rs-dropdown .rs-dropdown-toggle {
   &:extend(.rs-navbar-item);
 
+  &:focus,
+  &:focus-visible {
+    &:extend(.rs-navbar-item:focus-visible);
+  }
+
   padding-right: @navbar-item-padding-x+ @dropdown-caret-width+ @dropdown-caret-padding;
 
   .high-contrast-mode({

package/Picker/styles/mixin.less

@@ -265,7 +265,8 @@
     line-height: @line-height;
   }
 
-  .rs-picker-input.rs-picker-tag & ~ .rs-picker-tag-wrapper {
+  // FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons.
+  .rs-picker-tag & ~ .rs-picker-tag-wrapper {
     padding-bottom: @padding-vertical - 3px;
 
     .rs-tag {
@@ -278,7 +279,7 @@
       font-size: @font-size;
     }
 
-    .rs-picker-search-input input {
+    input {
       height: @line-height * @font-size - 2px;
     }
   }

package/README.md

@@ -8,7 +8,7 @@ English | [中文版][readm-cn]
 
 [![npm][npm-svg]][npm-home]
 [![GitHub Actions][actions-svg]][actions-home]
-[![codecov](https://codecov.io/gh/rsuite/rsuite/branch/next/graph/badge.svg?token=HGeKd0BD3t)](https://codecov.io/gh/rsuite/rsuite)
+[![codecov](https://codecov.io/gh/rsuite/rsuite/branch/main/graph/badge.svg?token=HGeKd0BD3t)](https://codecov.io/gh/rsuite/rsuite)
 [![Discord][discord-svg]][discord-invite]
 [![Gitter][gitter-svg]][gitter]
 [![Gitter][gitter-cn-svg]][gitter-cn]

package/Sidenav/styles/index.less

@@ -37,34 +37,59 @@
     margin: 0 !important;
   }
 
-  .high-contrast-mode({
-    .rs-dropdown-toggle,
-    .rs-dropdown-menu {
-      border: none;
-    }
-  });
+  // <Dropdown> within <Sidenav>
+  > .rs-dropdown {
+    // Submenu toggle
+    .rs-dropdown-item-toggle {
+      display: block;
+      width: 100%;
+      text-align: start;
+      background: none;
+      padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
+      position: relative;
 
-  .rs-dropdown-item-toggle {
-    display: block;
-    width: 100%;
-    text-align: start;
-    background: none;
+      .rs-sidenav-collapse-in & {
+        padding-left: @sidenav-level2-retract;
+      }
 
-    &:focus {
-      outline: 0;
-    }
+      &:focus {
+        outline: 0;
+      }
 
-    &:focus-visible {
-      .focus-ring(inset);
+      &:focus-visible {
+        .focus-ring(inset);
 
-      .high-contrast-mode({
-        .focus-ring(slim-inset);
-      });
+        .high-contrast-mode({
+          .focus-ring(slim-inset);
+        });
 
-      z-index: 1;
+        z-index: 1;
+      }
+
+      // Submenu toggle icon
+      &-icon {
+        position: absolute;
+        right: @sidenav-padding-horizontal;
+        top: @sidenav-children-padding-vertical;
+        width: auto;
+        height: @sidenav-dropdown-toggle-caret-width;
+        transform: rotate(90deg);
+      }
+    }
+
+    // Expanded submenu toggle icon
+    .rs-dropdown-item-expand .rs-dropdown-item-toggle-icon {
+      transform: rotate(270deg);
     }
   }
 
+  .high-contrast-mode({
+    .rs-dropdown-toggle,
+    .rs-dropdown-menu {
+      border: none;
+    }
+  });
+
   .rs-sidenav-item:focus-visible {
     .focus-ring(inset);
 
@@ -110,6 +135,12 @@
     width: 100%;
     white-space: normal;
 
+    // Sidenav is usually placed by the left/right edge of the page
+    // thus use an inset focus ring to prevent overflow clipping
+    &:focus-visible {
+      .focus-ring(inset);
+    }
+
     > .rs-icon:not(.rs-dropdown-toggle-caret) {
       font-size: @sidenav-level1-item-font-size;
       margin-right: @sidenav-icon-spacing;
@@ -219,32 +250,17 @@
       transform: rotate(180deg);
     }
 
-    .rs-dropdown-item.rs-dropdown-item-expand
-      > .rs-dropdown-item-toggle
-      > .rs-dropdown-item-toggle-icon {
-      transform: rotate(270deg);
-    }
-
     // Dropdown menu
-    > .rs-dropdown-menu {
+    .rs-dropdown-menu {
       .reset-sidenav-dropdown-menu();
+    }
 
-      // Submenu
-      .rs-dropdown-item-submenu {
-        padding: 0;
-
-        > .rs-dropdown-menu-toggle {
-          display: block;
-          padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
-        }
-
-        > .rs-dropdown-menu {
-          .reset-sidenav-dropdown-menu();
-        }
+    // Submenu
+    .rs-dropdown-item-submenu {
+      padding: 0;
 
-        &:hover {
-          background-color: transparent;
-        }
+      &:hover {
+        background-color: transparent;
       }
     }
   }
@@ -277,21 +293,6 @@
   // @warn Here we can only use absolute positioning because of the limitations of using <Dropdown/> component.
 
   .rs-dropdown-item-submenu {
-    > .rs-dropdown-item-toggle {
-      padding-left: @sidenav-level2-retract;
-      padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
-      position: relative;
-
-      > .rs-dropdown-item-toggle-icon {
-        position: absolute;
-        right: @sidenav-padding-horizontal;
-        top: @sidenav-children-padding-vertical;
-        width: auto;
-        height: @sidenav-dropdown-toggle-caret-width;
-        transform: rotate(90deg);
-      }
-    }
-
     > .rs-dropdown-item-menu-icon {
       padding-top: @sidenav-children-padding-vertical;
       padding-bottom: @sidenav-children-padding-vertical;
@@ -336,7 +337,7 @@
     // supplement padding
     padding-left: @sidenav-default-width;
 
-    &:focus {
+    &:focus-visible {
       .focus-ring();
 
       .high-contrast-mode({

package/TreePicker/styles/index.less

@@ -34,7 +34,7 @@
   text-align: left;
   margin: 0 0 4px 0;
 
-  > .rs-tree-node-label {
+  &-label {
     position: relative;
     margin: 0;
     //text gap
@@ -44,7 +44,7 @@
     font-size: @picker-tree-node-font-size;
     line-height: @picker-tree-node-line-height;
 
-    > .rs-tree-node-label-content {
+    &-content {
       padding: @custom-picker-tree-node-padding-vertical @picker-tree-node-padding-horizontal
         @custom-picker-tree-node-padding-vertical @picker-tree-arrow-down-gap;
       display: inline-block;
@@ -59,7 +59,7 @@
     }
   }
 
-  &&-active > .rs-tree-node-label > .rs-tree-node-label-content {
+  &-active &-label-content {
     .picker-item-active();
 
     color: var(--rs-text-link);

package/cjs/Calendar/useCalendarDate.d.ts

@@ -1,4 +1,4 @@
-declare const useCalendarDate: (value: Date | undefined, defaultDate: Date | undefined) => {
+declare const useCalendarDate: (value: Date | null | undefined, defaultDate: Date | undefined) => {
     calendarDate: Date;
     setCalendarDate: (date: Date | undefined) => void;
 };

package/cjs/Calendar/useCalendarDate.js

@@ -25,7 +25,7 @@ var useCalendarDate = function useCalendarDate(value, defaultDate) {
     var _valueRef$current;
 
     if ((value === null || value === void 0 ? void 0 : value.valueOf()) !== ((_valueRef$current = valueRef.current) === null || _valueRef$current === void 0 ? void 0 : _valueRef$current.valueOf())) {
-      setCalendarDate(value);
+      setCalendarDate(value !== null && value !== void 0 ? value : new Date());
       valueRef.current = value;
     }
   }, [value]);

package/cjs/Carousel/Carousel.js

@@ -62,7 +62,13 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       lastIndex = _useState2[0],
       setLastIndex = _useState2[1];
 
+  var rootRef = (0, _react.useRef)(null);
+
   var handleSlide = function handleSlide(nextActiveIndex, event) {
+    if (!rootRef.current) {
+      return;
+    }
+
     clear();
     var index = nextActiveIndex !== null && nextActiveIndex !== void 0 ? nextActiveIndex : activeIndex + 1; // When index is greater than count, start from 1 again.
 
@@ -129,7 +135,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var sliderStyles = (_sliderStyles = {}, _sliderStyles[lengthKey] = count * 100 + "%", _sliderStyles.transform = vertical ? "translate3d(0, " + activeRatio + " ,0)" : "translate3d(" + activeRatio + ", 0 ,0)", _sliderStyles);
   var showMask = count > 1 && activeIndex === 0 && activeIndex !== lastIndex;
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends4.default)({}, rest, {
-    ref: ref,
+    ref: (0, _utils.mergeRefs)(ref, rootRef),
     className: classes
   }), /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('content')

package/cjs/Cascader/Cascader.js

@@ -211,10 +211,18 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
   }, [getSearchResult, onSearch, setFocusItemValue, setKeys, setLayer, valueKey]);
   var handleEntered = (0, _react.useCallback)(function () {
+    if (!targetRef.current) {
+      return;
+    }
+
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
   }, [onOpen]);
   var handleExited = (0, _react.useCallback)(function () {
+    if (!targetRef.current) {
+      return;
+    }
+
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setActive(false);
     setSearchKeyword('');
@@ -225,7 +233,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.close();
   }, [triggerRef]);
   var handleClean = (0, _react.useCallback)(function (event) {
-    if (disabled) {
+    if (disabled || !targetRef.current) {
       return;
     }
 
@@ -283,7 +291,10 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
         children.then(function (data) {
           node.loading = false;
           node[childrenKey] = data;
-          addColumn(data, cascadePaths.length);
+
+          if (targetRef.current) {
+            addColumn(data, cascadePaths.length);
+          }
         });
       } else {
         node.loading = false;

package/cjs/CheckPicker/CheckPicker.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Ref } from 'react';
 import { PickerLocale } from '../locales';
+import { PickerInstance } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
@@ -10,7 +11,9 @@ export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerL
     countable?: boolean;
 }
 export interface CheckPickerComponent {
-    <T>(props: CheckPickerProps<T>): JSX.Element | null;
+    <T>(props: CheckPickerProps<T> & {
+        ref?: Ref<PickerInstance>;
+    }): JSX.Element | null;
     displayName?: string;
     propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;
 }

package/cjs/CheckPicker/test/CheckPicker.test.js

@@ -73,4 +73,12 @@ _react.default.createElement(_CheckPicker.default, {
   onChange: function onChange(newValue) {
     (0, _tsExpect.expectType)(newValue);
   }
+});
+
+var pickerRef = /*#__PURE__*/_react.default.createRef();
+
+/*#__PURE__*/
+_react.default.createElement(_CheckPicker.default, {
+  ref: pickerRef,
+  data: []
 });

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -645,7 +645,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var renderCheckTree = function renderCheckTree() {
     var _withCheckTreeClassPr, _merge2;
 
-    var classes = withCheckTreeClassPrefix((_withCheckTreeClassPr = {}, _withCheckTreeClassPr[className !== null && className !== void 0 ? className : ''] = inline, _withCheckTreeClassPr['without-children'] = !_utils2.isSomeNodeHasChildren, _withCheckTreeClassPr.virtualized = virtualized, _withCheckTreeClassPr));
+    var classes = withCheckTreeClassPrefix((_withCheckTreeClassPr = {}, _withCheckTreeClassPr[className !== null && className !== void 0 ? className : ''] = inline, _withCheckTreeClassPr['without-children'] = !(0, _utils2.isSomeNodeHasChildren)(data, childrenKey), _withCheckTreeClassPr.virtualized = virtualized, _withCheckTreeClassPr));
     var formattedNodes = getFormattedNodes(renderNode);
 
     if (!formattedNodes.some(function (v) {

package/cjs/CheckTreePicker/utils.js

@@ -62,7 +62,7 @@ function isSomeChildChecked(nodes, parent, childrenKey) {
 
 function isSomeNodeHasChildren(data, childrenKey) {
   return data.some(function (node) {
-    return node[childrenKey];
+    return Array.isArray(node[childrenKey]);
   });
 }
 /**