rsuite 5.4.4 → 5.6.0

package/CHANGELOG.md

@@ -1,3 +1,51 @@
+# [5.6.0](https://github.com/rsuite/rsuite/compare/v5.5.2...v5.6.0) (2022-02-10)
+
+### Bug Fixes
+
+- **DatePicker:** fixed oneTap to work in month view ([#2342](https://github.com/rsuite/rsuite/issues/2342)) ([d5368cd](https://github.com/rsuite/rsuite/commit/d5368cdfb2a6386bfb509a6316520e450f35f2b4))
+- handle some null value branch ([#2323](https://github.com/rsuite/rsuite/issues/2323)) ([3ffd1d9](https://github.com/rsuite/rsuite/commit/3ffd1d966d5fd7f0a4f42bb8b08bf0cb65955fef))
+
+### Features
+
+- **Carousel:** Expose active index ([#2338](https://github.com/rsuite/rsuite/issues/2338)) ([beac483](https://github.com/rsuite/rsuite/commit/beac48395c9fc7c30efb3f49f81e8969cd3ee71d))
+
+## [5.5.2](https://github.com/rsuite/rsuite/compare/v5.5.1...v5.5.2) (2022-01-27)
+
+### Features
+
+- **Cascader:** add parent node in serach result while parentSelectable ([#2313](https://github.com/rsuite/rsuite/issues/2313)) ([e677bb6](https://github.com/rsuite/rsuite/commit/e677bb6b75d0cc26dafedc8e5326d413969c2867))
+
+## [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

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
-      .rs-check-tree-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/Modal/styles/mixin.less

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

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

@@ -147,7 +147,7 @@ React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 [rsuite-design]: https://rsuitejs.com/design/default
 [live-preview-on-codesandbox]: https://codesandbox.io/s/rsuite-template-5vq6zo2z5l
 [rsuite-doc-guide]: https://rsuitejs.com/en/guide/introduction
-[rsuite-doc-guide-themes]: https://rsuitejs.com/en/guide/themes
+[rsuite-doc-guide-themes]: https://rsuitejs.com/en/guide/customization
 [rsuite-doc-guide-intl]: https://rsuitejs.com/en/guide/intl
 [rsuite-doc-guide-rtl]: https://rsuitejs.com/en/guide/rtl
 [rsuite-components-overview]: https://rsuitejs.com/en/components/overview

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);
 
@@ -112,7 +137,7 @@
 
     // Sidenav is usually placed by the left/right edge of the page
     // thus use an inset focus ring to prevent overflow clipping
-    &:focus {
+    &:focus-visible {
       .focus-ring(inset);
     }
 
@@ -225,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;
       }
     }
   }
@@ -283,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;
@@ -342,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/Affix/Affix.js

@@ -28,6 +28,7 @@ function useOffset(mountRef) {
       setOffset = _useState[1];
 
   var updateOffset = (0, _react.useCallback)(function () {
+    // FIXME upgrade dom-lib
     setOffset((0, _getOffset.default)(mountRef.current));
   }, [mountRef]); // Update after the element size changes
 

package/cjs/Calendar/TimeDropdown.js

@@ -101,10 +101,11 @@ var scrollTo = function scrollTo(time, row) {
     var node = container === null || container === void 0 ? void 0 : container.querySelector("[data-key=\"" + type + "-" + value + "\"]");
 
     if (node && container) {
-      var _ref2 = (0, _getPosition.default)(node, container),
-          top = _ref2.top;
+      var position = (0, _getPosition.default)(node, container);
 
-      (0, _utils.scrollTopAnimation)(container, top, (0, _scrollTop.default)(container) !== 0);
+      if (position) {
+        (0, _utils.scrollTopAnimation)(container, position.top, (0, _scrollTop.default)(container) !== 0);
+      }
     }
   });
 };
@@ -134,7 +135,9 @@ var TimeDropdown = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       showMeridian: showMeridian
     }); // The currently selected time scrolls to the visible range.
 
-    show && scrollTo(time, rowRef.current);
+    if (show && rowRef.current) {
+      scrollTo(time, rowRef.current);
+    }
   }, [date, format, show, showMeridian]);
 
   var handleClick = function handleClick(type, d, event) {

package/cjs/Carousel/Carousel.d.ts

@@ -9,7 +9,11 @@ export interface CarouselProps extends WithAsProps {
     placement?: 'top' | 'bottom' | 'left' | 'right';
     /** Button shape */
     shape?: 'dot' | 'bar';
-    /** Callback fired when the active item changes */
+    /** Active element index */
+    activeIndex?: number;
+    /** Defaul initial index */
+    defaultActiveIndex?: number;
+    /** Callback fired when the active item manually changes */
     onSelect?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Callback fired when a slide transition starts */
     onSlideStart?: (index: number, event?: React.ChangeEvent<HTMLInputElement>) => void;

package/cjs/Carousel/Carousel.js

@@ -35,10 +35,13 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       autoplay = props.autoplay,
       _props$autoplayInterv = props.autoplayInterval,
       autoplayInterval = _props$autoplayInterv === void 0 ? 4000 : _props$autoplayInterv,
+      activeIndexProp = props.activeIndex,
+      _props$defaultActiveI = props.defaultActiveIndex,
+      defaultActiveIndex = _props$defaultActiveI === void 0 ? 0 : _props$defaultActiveI,
       onSelect = props.onSelect,
       onSlideStart = props.onSlideStart,
       onSlideEnd = props.onSlideEnd,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "classPrefix", "className", "placement", "shape", "autoplay", "autoplayInterval", "onSelect", "onSlideStart", "onSlideEnd"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "children", "classPrefix", "className", "placement", "shape", "autoplay", "autoplayInterval", "activeIndex", "defaultActiveIndex", "onSelect", "onSlideStart", "onSlideEnd"]);
 
   var _useCustom = (0, _utils.useCustom)('Carousel'),
       rtl = _useCustom.rtl;
@@ -54,17 +57,24 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var vertical = placement === 'left' || placement === 'right';
   var lengthKey = vertical ? 'height' : 'width';
 
+  var _useControlled = (0, _utils.useControlled)(activeIndexProp, defaultActiveIndex),
+      activeIndex = _useControlled[0],
+      setActiveIndex = _useControlled[1];
+
   var _useState = (0, _react.useState)(0),
-      activeIndex = _useState[0],
-      setActiveIndex = _useState[1];
+      lastIndex = _useState[0],
+      setLastIndex = _useState[1];
 
-  var _useState2 = (0, _react.useState)(0),
-      lastIndex = _useState2[0],
-      setLastIndex = _useState2[1];
+  var rootRef = (0, _react.useRef)(null); // Set a timer for automatic playback.
+  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.
 
-  var rootRef = (0, _react.useRef)(null);
+  var _useTimeout = (0, _utils.useTimeout)(function () {
+    return handleSlide();
+  }, autoplayInterval, !!autoplay && count > 1),
+      clear = _useTimeout.clear,
+      reset = _useTimeout.reset;
 
-  var handleSlide = function handleSlide(nextActiveIndex, event) {
+  var handleSlide = (0, _react.useCallback)(function (nextActiveIndex, event) {
     if (!rootRef.current) {
       return;
     }
@@ -77,7 +87,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onSlideStart === null || onSlideStart === void 0 ? void 0 : onSlideStart(nextIndex, event);
     setLastIndex(nextActiveIndex == null ? activeIndex : nextIndex);
     reset();
-  };
+  }, [activeIndex, count, setActiveIndex, clear, onSlideStart, reset]);
 
   var handleChange = function handleChange(event) {
     var activeIndex = +event.target.value;
@@ -87,13 +97,7 @@ var Carousel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var handleTransitionEnd = (0, _react.useCallback)(function (event) {
     onSlideEnd === null || onSlideEnd === void 0 ? void 0 : onSlideEnd(activeIndex, event);
-  }, [activeIndex, onSlideEnd]); // Set a timer for automatic playback.
-  // `autoplay` needs to be cast to boolean type to avoid undefined parameters.
-
-  var _useTimeout = (0, _utils.useTimeout)(handleSlide, autoplayInterval, !!autoplay && count > 1),
-      clear = _useTimeout.clear,
-      reset = _useTimeout.reset;
-
+  }, [activeIndex, onSlideEnd]);
   var uniqueId = (0, _react.useMemo)(function () {
     return (0, _utils.guid)();
   }, []);
@@ -165,6 +169,8 @@ Carousel.propTypes = {
   as: _propTypes.default.elementType,
   className: _propTypes.default.string,
   classPrefix: _propTypes.default.string,
+  activeIndex: _propTypes.default.number,
+  defaultActiveIndex: _propTypes.default.number,
   autoplay: _propTypes.default.bool,
   autoplayInterval: _propTypes.default.number,
   placement: _propTypes.default.oneOf(['top', 'bottom', 'left', 'right']),

package/cjs/Cascader/Cascader.js

@@ -163,7 +163,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var getSearchResult = (0, _react.useCallback)(function (keyword) {
     var items = [];
     var result = flattenData.filter(function (item) {
-      if (item[childrenKey]) {
+      if (!parentSelectable && item[childrenKey]) {
         return false;
       }
 
@@ -179,7 +179,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     }
 
     return items;
-  }, [childrenKey, flattenData, someKeyword]); // Used to hover the focuse item  when trigger `onKeydown`
+  }, [childrenKey, flattenData, someKeyword, parentSelectable]); // Used to hover the focuse item  when trigger `onKeydown`
 
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
     rtl: rtl,

package/cjs/Cascader/DropdownMenu.js

@@ -87,7 +87,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       if (activeItem) {
         var position = (0, _getPosition.default)(activeItem, column); // Let the active option scroll into view.
 
-        (0, _scrollTop.default)(column, position.top);
+        (0, _scrollTop.default)(column, position === null || position === void 0 ? void 0 : position.top);
       }
     });
   }, [prefix]);

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -79,17 +79,20 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       controlledValue = props.value,
       _props$defaultValue = props.defaultValue,
       defaultValue = _props$defaultValue === void 0 ? emptyArray : _props$defaultValue,
-      defaultExpandAll = props.defaultExpandAll,
+      _props$defaultExpandA = props.defaultExpandAll,
+      defaultExpandAll = _props$defaultExpandA === void 0 ? false : _props$defaultExpandA,
       _props$disabledItemVa = props.disabledItemValues,
       disabledItemValues = _props$disabledItemVa === void 0 ? emptyArray : _props$disabledItemVa,
       controlledExpandItemValues = props.expandItemValues,
-      defaultExpandItemValues = props.defaultExpandItemValues,
+      _props$defaultExpandI = props.defaultExpandItemValues,
+      defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
       _props$height = props.height,
       height = _props$height === void 0 ? 360 : _props$height,
       menuStyle = props.menuStyle,
       _props$searchable = props.searchable,
       searchable = _props$searchable === void 0 ? true : _props$searchable,
-      virtualized = props.virtualized,
+      _props$virtualized = props.virtualized,
+      virtualized = _props$virtualized === void 0 ? false : _props$virtualized,
       className = props.className,
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'picker' : _props$classPrefix,
@@ -271,15 +274,17 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   };
 
   var focusActiveNode = (0, _react.useCallback)(function () {
-    (0, _treeUtils.focusToActiveTreeNode)({
-      list: listRef.current,
-      valueKey: valueKey,
-      selector: "." + checkTreePrefix('node-active'),
-      activeNode: activeNode,
-      virtualized: virtualized,
-      container: treeViewRef.current,
-      formattedNodes: getFormattedNodes()
-    });
+    if (listRef.current) {
+      (0, _treeUtils.focusToActiveTreeNode)({
+        list: listRef.current,
+        valueKey: valueKey,
+        selector: "." + checkTreePrefix('node-active'),
+        activeNode: activeNode,
+        virtualized: virtualized,
+        container: treeViewRef.current,
+        formattedNodes: getFormattedNodes()
+      });
+    }
   }, [checkTreePrefix, activeNode, getFormattedNodes, valueKey, virtualized]);
   (0, _react.useEffect)(function () {
     setValue((0, _utils2.getCheckTreePickerDefaultValue)(value, uncheckableItemValues));

package/cjs/CheckTreePicker/utils.d.ts

@@ -36,9 +36,9 @@ export declare function isEveryFirstLevelNodeUncheckable(nodes: TreeNodesType, u
  * get node uncheckable state
  * @param {*} node
  */
-export declare function isNodeUncheckable(node: any, props: Partial<CheckTreePickerProps>): boolean;
-export declare function getFormattedTree(data: any[], nodes: TreeNodesType, props: Partial<CheckTreePickerProps>): any[];
-export declare function getDisabledState(nodes: TreeNodesType, node: TreeNodeType, props: Partial<CheckTreePickerProps>): boolean;
+export declare function isNodeUncheckable(node: any, props: Required<Pick<CheckTreePickerProps, 'uncheckableItemValues' | 'valueKey'>>): boolean;
+export declare function getFormattedTree(data: any[], nodes: TreeNodesType, props: Required<Pick<CheckTreePickerProps, 'childrenKey' | 'cascade'>>): any[];
+export declare function getDisabledState(nodes: TreeNodesType, node: TreeNodeType, props: Required<Pick<CheckTreePickerProps, 'disabledItemValues' | 'valueKey'>>): boolean;
 export declare function getCheckTreePickerDefaultValue(value: any[], uncheckableItemValues: any[]): any[];
 export declare function getSelectedItems(nodes: TreeNodesType, value: (string | number)[], valueKey: string): TreeNodeType[];
 export declare function getNodeCheckState({ nodes, node, cascade, childrenKey }: any): CheckStateType;

package/cjs/CheckTreePicker/utils.js

@@ -136,7 +136,7 @@ function getFormattedTree(data, nodes, props) {
     var curNode = nodes[node.refKey];
 
     if (curNode) {
-      var _node;
+      var _node$childrenKey;
 
       var checkState = !(0, _isUndefined2.default)(cascade) ? getNodeCheckState({
         node: curNode,
@@ -150,7 +150,7 @@ function getFormattedTree(data, nodes, props) {
       formatted.parent = curNode.parent;
       formatted.checkState = checkState;
 
-      if (((_node = node[childrenKey]) === null || _node === void 0 ? void 0 : _node.length) > 0) {
+      if (((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) > 0) {
         formatted[childrenKey] = getFormattedTree(formatted[childrenKey], nodes, props);
       }
     }