rsuite 5.2.4 → 5.4.2

package/esm/Calendar/TableRow.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import partial from 'lodash/partial';
-import { DateUtils, useClassNames, DATERANGE_DISABLED_TARGET } from '../utils';
+import { DateUtils, useClassNames, DATERANGE_DISABLED_TARGET, useCustom } from '../utils';
 import { useCalendarContext } from './CalendarContext';
 var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$as = props.as,
@@ -20,16 +20,19 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       selected = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
       dateRange = _useCalendarContext.dateRange,
       disabledDate = _useCalendarContext.disabledDate,
-      formatDate = _useCalendarContext.formatDate,
       hoverRangeValue = _useCalendarContext.hoverRangeValue,
       inSameMonth = _useCalendarContext.inSameMonth,
       isoWeek = _useCalendarContext.isoWeek,
       onMouseMove = _useCalendarContext.onMouseMove,
       onSelect = _useCalendarContext.onSelect,
       renderCell = _useCalendarContext.renderCell,
-      locale = _useCalendarContext.locale,
+      overrideLocale = _useCalendarContext.locale,
       showWeekNumbers = _useCalendarContext.showWeekNumbers;
 
+  var _useCustom = useCustom('Calendar', overrideLocale),
+      locale = _useCustom.locale,
+      formatDate = _useCustom.formatDate;
+
   var _useClassNames = useClassNames(classPrefix),
       prefix = _useClassNames.prefix,
       merge = _useClassNames.merge;
@@ -43,14 +46,14 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, [onSelect]);
 
   var renderDays = function renderDays() {
-    var formatStr = (locale === null || locale === void 0 ? void 0 : locale.formattedDayPattern) || 'yyyy-MM-dd';
+    var formatStr = locale.formattedDayPattern;
     var days = [];
 
     var _ref = dateRange || [],
         selectedStartDate = _ref[0],
         selectedEndDate = _ref[1];
 
-    var _ref2 = hoverRangeValue || [],
+    var _ref2 = hoverRangeValue !== null && hoverRangeValue !== void 0 ? hoverRangeValue : [],
         hoverStartDate = _ref2[0],
         hoverEndDate = _ref2[1];
 
@@ -64,7 +67,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var unSameMonth = !(inSameMonth !== null && inSameMonth !== void 0 && inSameMonth(thisDate));
       var isStartSelected = !unSameMonth && selectedStartDate && DateUtils.isSameDay(thisDate, selectedStartDate);
       var isEndSelected = !unSameMonth && selectedEndDate && DateUtils.isSameDay(thisDate, selectedEndDate);
-      var isSelected = isStartSelected || isEndSelected;
+      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : DateUtils.isSameDay(thisDate, selected);
       var inRange = false; // for Selected
 
       if (selectedStartDate && selectedEndDate) {
@@ -91,7 +94,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       var _classes = prefix('cell', {
         'cell-un-same-month': unSameMonth,
         'cell-is-today': isToday,
-        'cell-selected': isRangeSelectionMode ? isSelected : DateUtils.isSameDay(thisDate, selected),
+        'cell-selected': isSelected,
         'cell-selected-start': isStartSelected,
         'cell-selected-end': isEndSelected,
         'cell-in-range': !unSameMonth && inRange,
@@ -100,8 +103,10 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
       var title = formatDate ? formatDate(thisDate, formatStr) : DateUtils.format(thisDate, formatStr);
       days.push( /*#__PURE__*/React.createElement("div", {
-        role: "cell",
+        role: "gridcell",
         key: title,
+        "aria-label": title,
+        "aria-selected": isSelected || undefined,
         className: _classes
       }, /*#__PURE__*/React.createElement("div", {
         role: "button",
@@ -125,7 +130,7 @@ var TableRow = /*#__PURE__*/React.forwardRef(function (props, ref) {
     className: classes
   }), showWeekNumbers && /*#__PURE__*/React.createElement("div", {
     className: prefix('cell-week-number'),
-    role: "cell"
+    role: "rowheader"
   }, DateUtils.format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
 });
 TableRow.displayName = 'TableRow';

package/esm/Calendar/TimeDropdown.js

@@ -78,8 +78,8 @@ 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 _getPosition = getPosition(node, container),
-          top = _getPosition.top;
+      var _ref2 = getPosition(node, container),
+          top = _ref2.top;
 
       scrollTopAnimation(container, top, scrollTop(container) !== 0);
     }
@@ -93,7 +93,8 @@ var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
       _props$classPrefix = props.classPrefix,
       classPrefix = _props$classPrefix === void 0 ? 'calendar-time-dropdown' : _props$classPrefix,
       show = props.show,
-      showMeridian = props.showMeridian,
+      _props$showMeridian = props.showMeridian,
+      showMeridian = _props$showMeridian === void 0 ? false : _props$showMeridian,
       rest = _objectWithoutPropertiesLoose(props, ["as", "className", "classPrefix", "show", "showMeridian"]);
 
   var _useCalendarContext = useCalendarContext(),
@@ -165,7 +166,7 @@ var TimeDropdown = /*#__PURE__*/React.forwardRef(function (props, ref) {
           className: itemClasses,
           tabIndex: -1,
           "data-key": type + "-" + i,
-          onClick: !disabled ? partial(handleClick, type, i) : null
+          onClick: !disabled ? partial(handleClick, type, i) : undefined
         }, showMeridian && type === 'hours' && i === 0 ? '12' : i)));
       }
     }

package/esm/Calendar/View.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DateUtils, useClassNames } from '../utils';
+import { DateUtils, useClassNames, useCustom } from '../utils';
 import Table from './Table';
 import { useCalendarContext } from './CalendarContext';
 var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -16,7 +16,12 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _useCalendarContext = useCalendarContext(),
       _useCalendarContext$d = _useCalendarContext.date,
       date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
-      isoWeek = _useCalendarContext.isoWeek;
+      isoWeek = _useCalendarContext.isoWeek,
+      overrideLocale = _useCalendarContext.locale;
+
+  var _useCustom = useCustom('Calendar', overrideLocale),
+      locale = _useCustom.locale,
+      formatDate = _useCustom.formatDate;
 
   var thisMonthDate = DateUtils.setDate(date, 1);
 
@@ -25,13 +30,12 @@ var View = /*#__PURE__*/React.forwardRef(function (props, ref) {
       withClassPrefix = _useClassNames.withClassPrefix;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/React.createElement(Component, _extends({
-    role: "row"
-  }, rest, {
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/React.createElement(Table, {
-    rows: DateUtils.getMonthView(thisMonthDate, isoWeek)
+    rows: DateUtils.getMonthView(thisMonthDate, isoWeek),
+    "aria-label": formatDate(thisMonthDate, locale.formattedMonthPattern)
   }));
 });
 View.displayName = 'View';

package/esm/Calendar/types.d.ts

@@ -5,9 +5,9 @@ export interface CalendarInnerContextValue {
     dateRange?: Date[];
     disabledDate?: (date: Date, selectRangeValue?: Date[], type?: string) => boolean;
     format?: string;
-    hoverRangeValue?: Date[];
+    hoverRangeValue?: [Date, Date];
     inSameMonth?: (date: Date) => boolean;
-    isoWeek?: boolean;
+    isoWeek: boolean;
     onChangePageDate?: (nextPageDate: Date, event: React.MouseEvent) => void;
     onChangePageTime?: (nextPageTime: Date, event: React.MouseEvent) => void;
     onMouseMove?: (date: Date) => void;

package/esm/Calendar/useCalendarDate.d.ts

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

package/esm/Carousel/Carousel.d.ts

@@ -12,7 +12,7 @@ export interface CarouselProps extends WithAsProps {
     /** Callback fired when the active item changes */
     onSelect?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
     /** Callback fired when a slide transition starts */
-    onSlideStart?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
+    onSlideStart?: (index: number, event?: React.ChangeEvent<HTMLInputElement>) => void;
     /** Callback fired when a slide transition ends */
     onSlideEnd?: (index: number, event: React.TransitionEvent<HTMLDivElement>) => void;
 }

package/esm/Carousel/Carousel.js

@@ -59,7 +59,7 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var handleChange = function handleChange(event) {
     var activeIndex = +event.target.value;
-    handleSlide(activeIndex);
+    handleSlide(activeIndex, event);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(activeIndex, event);
   };
 

package/esm/Cascader/Cascader.d.ts

@@ -3,7 +3,7 @@ import { PickerLocale } from '../locales';
 import { PickerComponent } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
 export declare type ValueType = number | string;
-export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType> {
+export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T | null, PickerLocale, ItemDataType> {
     /** Sets the width of the menu */
     menuWidth?: number;
     /** Sets the height of the menu */

package/esm/Cascader/Cascader.js

@@ -74,10 +74,10 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       flattenData = _useState2[0],
       setFlattenData = _useState2[1];
 
-  var triggerRef = useRef();
-  var overlayRef = useRef();
-  var targetRef = useRef();
-  var searchInputRef = useRef();
+  var triggerRef = useRef(null);
+  var overlayRef = useRef(null);
+  var targetRef = useRef(null);
+  var searchInputRef = useRef(null);
 
   var _useControlled = useControlled(valueProp, defaultValue),
       value = _useControlled[0],
@@ -181,12 +181,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setSearchKeyword(value);
     onSearch === null || onSearch === void 0 ? void 0 : onSearch(value, event);
 
-    if (items !== null && items !== void 0 && items[0]) {
-      setFocusItemValue(items === null || items === void 0 ? void 0 : items[0]);
+    if (items.length > 0) {
+      setFocusItemValue(items[0][valueKey]);
       setLayer(0);
       setKeys([]);
     }
-  }, [getSearchResult, onSearch, setFocusItemValue, setKeys, setLayer]);
+  }, [getSearchResult, onSearch, setFocusItemValue, setKeys, setLayer, valueKey]);
   var handleEntered = useCallback(function () {
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
     setActive(true);
@@ -227,7 +227,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }
 
       if (!shallowEqual(value, focusItemValue)) {
-        onChange === null || onChange === void 0 ? void 0 : onChange(focusItemValue, event);
+        onChange === null || onChange === void 0 ? void 0 : onChange(focusItemValue !== null && focusItemValue !== void 0 ? focusItemValue : null, event);
       }
 
       handleClose();
@@ -309,7 +309,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     setValue(nextValue);
     setValueToPaths(nodes);
     enforceUpdate(nextValue);
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, null, event);
+    onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, nodes, event);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextValue, event);
   };
 
@@ -486,7 +486,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
     hasValue: hasValue,
     active: active,
     placement: placement,
-    inputValue: value
+    inputValue: value !== null && value !== void 0 ? value : ''
   }), selectedElement || (locale === null || locale === void 0 ? void 0 : locale.placeholder))));
 });
 Cascader.displayName = 'Cascader';

package/esm/Cascader/DropdownMenu.d.ts

@@ -2,16 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ItemDataType, WithAsProps, RsRefForwardingComponent } from '../@types/common';
 import { ValueType } from './Cascader';
-export interface DropdownMenuProps extends WithAsProps {
+export interface DropdownMenuProps extends Omit<WithAsProps, 'classPrefix'> {
+    classPrefix: string;
     disabledItemValues: ValueType[];
-    activeItemValue?: ValueType;
+    activeItemValue?: ValueType | null;
     childrenKey: string;
     cascadeData: ItemDataType[][];
     cascadePaths: ItemDataType[];
     valueKey: string;
     labelKey: string;
-    menuWidth: number;
-    menuHeight: number | string;
+    menuWidth?: number;
+    menuHeight?: number | string;
     renderMenuItem?: (itemLabel: React.ReactNode, item: ItemDataType) => React.ReactNode;
     renderMenu?: (items: ItemDataType[], menu: React.ReactNode, parentNode?: ItemDataType, layer?: number) => React.ReactNode;
     onSelect?: (node: ItemDataType, cascadePaths: ItemDataType[], isLeafNode: boolean, event: React.MouseEvent) => void;

package/esm/Cascader/utils.d.ts

@@ -1,17 +1,17 @@
 /// <reference types="react" />
 import { CascaderProps } from './Cascader';
 import { ItemDataType } from '../@types/common';
-export declare function getColumnsAndPaths(data: any, value: any, options: any): {
-    columns: ItemDataType[][];
-    paths: any[];
+export declare function getColumnsAndPaths<T extends ItemDataType>(data: T[], value: any, options: any): {
+    columns: ItemDataType<string | number>[][];
+    paths: T[];
 };
 export declare function usePaths(props: CascaderProps): {
-    enforceUpdate: (nextValue: any, isAttachChildren?: boolean) => void;
-    columnData: ItemDataType[][];
-    valueToPaths: ItemDataType[];
-    selectedPaths: ItemDataType[];
-    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType[]>>;
-    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType[][]>>;
-    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType[]>>;
+    enforceUpdate: (nextValue: any, isAttachChildren?: boolean | undefined) => void;
+    columnData: ItemDataType<string | number>[][];
+    valueToPaths: ItemDataType<string | number>[];
+    selectedPaths: ItemDataType<string | number>[];
+    setValueToPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
+    setColumnData: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[][]>>;
+    setSelectedPaths: import("react").Dispatch<import("react").SetStateAction<ItemDataType<string | number>[]>>;
     addColumn: (column: ItemDataType[], index: number) => void;
 };

package/esm/CheckPicker/CheckPicker.d.ts

@@ -1,13 +1,18 @@
+import React from 'react';
 import { PickerLocale } from '../locales';
-import { PickerComponent } from '../Picker';
 import { ItemDataType, FormControlPickerProps } from '../@types/common';
-import { SelectProps } from '../SelectPicker';
+import type { MultipleSelectProps } from '../SelectPicker';
 export declare type ValueType = (number | string)[];
-export interface CheckPickerProps<T = ValueType> extends FormControlPickerProps<T, PickerLocale, ItemDataType>, SelectProps<T> {
+export interface CheckPickerProps<T> extends FormControlPickerProps<T[], PickerLocale, ItemDataType<T>>, MultipleSelectProps<T> {
     /** Top the selected option in the options */
     sticky?: boolean;
     /** A picker that can be counted */
     countable?: boolean;
 }
-declare const CheckPicker: PickerComponent<CheckPickerProps>;
+export interface CheckPickerComponent {
+    <T>(props: CheckPickerProps<T>): JSX.Element | null;
+    displayName?: string;
+    propTypes?: React.WeakValidationMap<CheckPickerProps<any>>;
+}
+declare const CheckPicker: CheckPickerComponent;
 export default CheckPicker;

package/esm/CheckPicker/CheckPicker.js

@@ -77,10 +77,10 @@ var CheckPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onOpen = props.onOpen,
       rest = _objectWithoutPropertiesLoose(props, ["as", "appearance", "classPrefix", "countable", "data", "disabledItemValues", "valueKey", "labelKey", "searchable", "virtualized", "cleanable", "placement", "menuAutoWidth", "menuMaxHeight", "menuClassName", "menuStyle", "locale", "placeholder", "disabled", "toggleAs", "style", "sticky", "value", "defaultValue", "groupBy", "listProps", "id", "sort", "searchBy", "renderMenuItem", "renderMenuGroup", "renderValue", "renderExtraFooter", "renderMenu", "onGroupTitleClick", "onSearch", "onEnter", "onEntered", "onExited", "onClean", "onChange", "onSelect", "onClose", "onOpen"]);
 
-  var triggerRef = useRef();
-  var targetRef = useRef();
-  var overlayRef = useRef();
-  var searchInputRef = useRef();
+  var triggerRef = useRef(null);
+  var targetRef = useRef(null);
+  var overlayRef = useRef(null);
+  var searchInputRef = useRef(null);
 
   var _useCustom = useCustom('Picker', overrideLocale),
       locale = _useCustom.locale;

package/esm/CheckPicker/test/CheckPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/CheckPicker/test/CheckPicker.test.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { expectType } from 'ts-expect';
+import CheckPicker from '../CheckPicker'; // Infer value and onChange types from data
+
+var numberValuedData = [{
+  label: 'One',
+  value: 1
+}];
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: numberValuedData,
+  value: [1]
+}); // @ts-expect-error should not accept single value
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: numberValuedData,
+  value: 1
+}); // @ts-expect-error should not accept string value
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: numberValuedData,
+  value: ['1']
+});
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: numberValuedData,
+  onChange: function onChange(newValue) {
+    expectType(newValue);
+  }
+});
+var stringValuedData = [{
+  label: 'One',
+  value: 'One'
+}];
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: stringValuedData,
+  value: ['1']
+}); // @ts-expect-error should not accept single value
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: numberValuedData,
+  value: "1"
+}); // @ts-expect-error should not accept number value
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: stringValuedData,
+  value: [1]
+});
+
+/*#__PURE__*/
+React.createElement(CheckPicker, {
+  data: stringValuedData,
+  onChange: function onChange(newValue) {
+    expectType(newValue);
+  }
+});

package/esm/CheckTree/index.js

@@ -1,14 +1,15 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import React, { useRef } from 'react';
+import React, { useMemo } from 'react';
 import CheckTreePicker from '../CheckTreePicker';
 import TreeContext from '../Tree/TreeContext';
 var CheckTree = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var dragNodeRef = useRef();
+  var contextValue = useMemo(function () {
+    return {
+      inline: true
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(TreeContext.Provider, {
-    value: {
-      inline: true,
-      dragNodeRef: dragNodeRef
-    }
+    value: contextValue
   }, /*#__PURE__*/React.createElement(CheckTreePicker, _extends({
     ref: ref
   }, props)));

package/esm/CheckTreePicker/CheckTreeNode.d.ts

@@ -4,7 +4,7 @@ import { CheckStateType } from '../utils';
 export interface CheckTreeNodeProps extends WithAsProps {
     rtl?: boolean;
     label?: any;
-    layer?: number;
+    layer: number;
     value?: any;
     focus?: boolean;
     style?: React.CSSProperties;

package/esm/CheckTreePicker/CheckTreeNode.js

@@ -5,10 +5,9 @@ import PropTypes from 'prop-types';
 import ArrowDown from '@rsuite/icons/legacy/ArrowDown';
 import Spinner from '@rsuite/icons/legacy/Spinner';
 import DropdownMenuCheckItem from '../Picker/DropdownMenuCheckItem';
-import { useClassNames, CHECK_STATE, TREE_NODE_PADDING, TREE_NODE_ROOT_PADDING, reactToString } from '../utils';
+import { getTreeNodeIndent } from '../utils/treeUtils';
+import { useClassNames, CHECK_STATE, reactToString } from '../utils';
 var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _extends2;
-
   var _ref$as = _ref.as,
       Component = _ref$as === void 0 ? 'div' : _ref$as,
       style = _ref.style,
@@ -133,11 +132,9 @@ var CheckTreeNode = /*#__PURE__*/forwardRef(function (_ref, ref) {
     'all-uncheckable': !!allUncheckable,
     'text-muted': disabled,
     focus: focus
-  })); // layer start from 1
-
-  var padding = (layer - 1) * TREE_NODE_PADDING + TREE_NODE_ROOT_PADDING;
+  }));
 
-  var styles = _extends({}, style, (_extends2 = {}, _extends2[rtl ? 'paddingRight' : 'paddingLeft'] = padding, _extends2));
+  var styles = _extends({}, style, getTreeNodeIndent(rtl, layer - 1));
 
   return visible ? /*#__PURE__*/React.createElement(Component, _extends({
     role: "treeitem",

package/esm/CheckTreePicker/CheckTreePicker.js

@@ -12,6 +12,7 @@ import classNames from 'classnames';
 import { List, AutoSizer } from '../Picker/VirtualizedList';
 import CheckTreeNode from './CheckTreeNode';
 import TreeContext from '../Tree/TreeContext';
+import { getTreeNodeIndent } from '../utils/treeUtils';
 import { createChainedFunction, useCustom, useClassNames, useControlled, KEY_VALUES, mergeRefs, shallowEqual } from '../utils';
 import { PickerToggle, onMenuKeyDown as _onMenuKeyDown, PickerOverlay, SearchBar, SelectedElement, PickerToggleTrigger, createConcatChildrenFunction, usePickerClassName, usePublicMethods, pickTriggerPropKeys, omitTriggerPropKeys, listPickerPropTypes, useToggleKeyDownEvent } from '../Picker';
 import { isEveryChildChecked, isSomeNodeHasChildren, isAllSiblingNodeUncheckable, isEveryFirstLevelNodeUncheckable, getFormattedTree, getDisabledState, getCheckTreePickerDefaultValue, getSelectedItems, isNodeUncheckable } from './utils';
@@ -33,6 +34,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       searchBy = props.searchBy,
       toggleAs = props.toggleAs,
       searchKeyword = props.searchKeyword,
+      showIndentLine = props.showIndentLine,
       overrideLocale = props.locale,
       _props$cascade = props.cascade,
       cascade = _props$cascade === void 0 ? true : _props$cascade,
@@ -86,17 +88,17 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderValue = props.renderValue,
       renderTreeIcon = props.renderTreeIcon,
       renderTreeNode = props.renderTreeNode,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
+      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "style", "appearance", "cleanable", "countable", "searchBy", "toggleAs", "searchKeyword", "showIndentLine", "locale", "cascade", "disabled", "valueKey", "labelKey", "placement", "childrenKey", "placeholder", "value", "defaultValue", "defaultExpandAll", "disabledItemValues", "expandItemValues", "defaultExpandItemValues", "height", "menuStyle", "searchable", "virtualized", "className", "classPrefix", "menuClassName", "menuAutoWidth", "uncheckableItemValues", "id", "listProps", "renderMenu", "getChildren", "renderExtraFooter", "onEntered", "onChange", "onClean", "onClose", "onExited", "onSearch", "onSelect", "onOpen", "onScroll", "onExpand", "renderValue", "renderTreeIcon", "renderTreeNode"]);
 
   var _useContext = useContext(TreeContext),
       inline = _useContext.inline;
 
-  var triggerRef = useRef();
-  var targetRef = useRef();
-  var listRef = useRef();
-  var overlayRef = useRef();
-  var searchInputRef = useRef();
-  var treeViewRef = useRef();
+  var triggerRef = useRef(null);
+  var targetRef = useRef(null);
+  var listRef = useRef(null);
+  var overlayRef = useRef(null);
+  var searchInputRef = useRef(null);
+  var treeViewRef = useRef(null);
 
   var _useCustom = useCustom('Picker', overrideLocale),
       rtl = _useCustom.rtl,
@@ -192,25 +194,21 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
 
   var getFormattedNodes = useCallback(function (render) {
-    var formattedNodes = [];
-
     if (virtualized) {
-      formattedNodes = formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
+      return formatVirtualizedTreeData(flattenNodes, filteredData, expandItemValues, {
         cascade: cascade,
         searchKeyword: searchKeywordState
       }).filter(function (item) {
         return item.visible;
       });
-    } else {
-      formattedNodes = getFormattedTree(filteredData, flattenNodes, {
-        childrenKey: childrenKey,
-        cascade: cascade
-      }).map(function (node) {
-        return render === null || render === void 0 ? void 0 : render(node, 1);
-      });
     }
 
-    return formattedNodes;
+    return getFormattedTree(filteredData, flattenNodes, {
+      childrenKey: childrenKey,
+      cascade: cascade
+    }).map(function (node) {
+      return render === null || render === void 0 ? void 0 : render(node, 1);
+    });
   }, [searchKeywordState, expandItemValues, filteredData, flattenNodes, formatVirtualizedTreeData, virtualized, childrenKey, cascade]);
 
   var getTreeNodeProps = function getTreeNodeProps(node, layer) {
@@ -406,7 +404,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [childrenKey, expandItemValues, getChildren, loadChildren, onExpand, setExpandItemValues, valueKey]);
   usePublicMethods(ref, {
-    rootRef: inline ? treeViewRef : null,
+    rootRef: inline ? treeViewRef : undefined,
     triggerRef: triggerRef,
     overlayRef: overlayRef,
     targetRef: targetRef,
@@ -461,11 +459,13 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }, [searchKeywordState, checkTreePrefix, expandItemValues, filteredData, focusItemValue, treeNodesRefs, childrenKey, valueKey, disabledItemValues]);
   var handleLeftArrow = useCallback(function () {
+    if (_isNil(focusItemValue)) return;
     var focusItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
     leftArrowHandler({
       focusItem: focusItem,
       expand: expandItemValues.includes(focusItem === null || focusItem === void 0 ? void 0 : focusItem[valueKey]),
       onExpand: handleExpand,
+      childrenKey: childrenKey,
       onFocusItem: function onFocusItem() {
         var _focusItem$parent, _focusItem$parent2;
 
@@ -473,8 +473,9 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         focusTreeNode(focusItem === null || focusItem === void 0 ? void 0 : (_focusItem$parent2 = focusItem.parent) === null || _focusItem$parent2 === void 0 ? void 0 : _focusItem$parent2.refKey, treeNodesRefs, "." + checkTreePrefix('node-label'));
       }
     });
-  }, [checkTreePrefix, expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, valueKey]);
+  }, [checkTreePrefix, expandItemValues, flattenNodes, focusItemValue, handleExpand, treeNodesRefs, valueKey, childrenKey]);
   var handleRightArrow = useCallback(function () {
+    if (_isNil(focusItemValue)) return;
     var focusItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
     rightArrowHandler({
       focusItem: focusItem,
@@ -487,6 +488,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
     });
   }, [focusItemValue, flattenNodes, valueKey, expandItemValues, childrenKey, handleExpand, handleFocusItem]);
   var selectActiveItem = useCallback(function (event) {
+    if (_isNil(focusItemValue)) return;
     var activeItem = getActiveItem(focusItemValue, flattenNodes, valueKey);
 
     if (!isNodeUncheckable(activeItem, {
@@ -569,19 +571,22 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         key: node[valueKey]
       }, /*#__PURE__*/React.createElement(CheckTreeNode, _extends({}, nodeProps, {
         ref: function ref(_ref) {
-          return saveTreeNodeRef(refKey, _ref);
+          return saveTreeNodeRef(_ref, refKey);
         }
       })), /*#__PURE__*/React.createElement("div", {
         className: checkTreePrefix('children')
       }, nodes.map(function (child) {
         return renderNode(child, layer);
+      }), showIndentLine && /*#__PURE__*/React.createElement("span", {
+        className: checkTreePrefix('indent-line'),
+        style: getTreeNodeIndent(rtl, layer - 1, true)
       })));
     }
 
     return /*#__PURE__*/React.createElement(CheckTreeNode, _extends({
       key: node[valueKey],
       ref: function ref(_ref2) {
-        return saveTreeNodeRef(refKey, _ref2);
+        return saveTreeNodeRef(_ref2, refKey);
       }
     }, nodeProps));
   };
@@ -607,7 +612,7 @@ var CheckTreePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
         style: style,
         key: key,
         ref: function ref(_ref4) {
-          return saveTreeNodeRef(refKey, _ref4);
+          return saveTreeNodeRef(_ref4, refKey);
         }
       }, nodeProps));
     };