rsuite 5.19.0 → 5.20.0

package/CHANGELOG.md

@@ -1,3 +1,33 @@
+# [5.20.0](https://github.com/rsuite/rsuite/compare/v5.19.1...v5.20.0) (2022-10-21)
+
+### Bug Fixes
+
+- **DatePicker:** reset calendar selection after closing picker menu ([#2807](https://github.com/rsuite/rsuite/issues/2807)) ([1ef91a8](https://github.com/rsuite/rsuite/commit/1ef91a846fc6d99c7479e96994aa50da2af9ef9e))
+- **Form.Control:** when shouldResetWithUnmount should remove value and error ([#2802](https://github.com/rsuite/rsuite/issues/2802)) ([f8d108a](https://github.com/rsuite/rsuite/commit/f8d108aed3e94811491be63e3373008d12e83b60))
+
+### Features
+
+- **SelectPicker,CheckPicker:** add `loading` prop ([#2808](https://github.com/rsuite/rsuite/issues/2808)) ([3a5e5d5](https://github.com/rsuite/rsuite/commit/3a5e5d5d4b891373c8a05ec4d642103f75920f10))
+
+## [5.19.1](https://github.com/rsuite/rsuite/compare/v5.19.0...v5.19.1) (2022-10-13)
+
+### Bug Fixes
+
+- **Cascader,MultiCascader:** fix sub-columns not being removed when a leaf node is selected ([#2792](https://github.com/rsuite/rsuite/issues/2792)) ([619c7de](https://github.com/rsuite/rsuite/commit/619c7debfca63a58622a1ae4a4776544bebf3405))
+- **CheckTreePicker:** fix children node can't uncheck when setting virtualized ([#2782](https://github.com/rsuite/rsuite/issues/2782)) ([#2783](https://github.com/rsuite/rsuite/issues/2783)) ([50f7b89](https://github.com/rsuite/rsuite/commit/50f7b89dbe1a2b59c212e021e1bc42c50e9ebb37))
+- **DateRangePicker:** fix predefined range affecting calendar height ([#2794](https://github.com/rsuite/rsuite/issues/2794)) ([957ce4e](https://github.com/rsuite/rsuite/commit/957ce4e197355ecbb9a0aea6cb6c5906ab1e1a2a))
+- **TreePicker, CheckTreePicker:** ignore backspace when setting cleanable=false or disabled=true ([#2798](https://github.com/rsuite/rsuite/issues/2798)) ([eefe0eb](https://github.com/rsuite/rsuite/commit/eefe0ebc396ee1764243a1e2c8ec432dc6ce39a5))
+- **TreePicker,CheckTreePicker:** fix `renderExtraFooter` causing the … ([#2745](https://github.com/rsuite/rsuite/issues/2745)) ([d7279d1](https://github.com/rsuite/rsuite/commit/d7279d14877e4b3b0ac74abdfeb56836b3a07780)), closes [#2758](https://github.com/rsuite/rsuite/issues/2758)
+- **TreePicker,CheckTreePicker:** fix value being cleared internally when value is controlled ([#2788](https://github.com/rsuite/rsuite/issues/2788)) ([4521a27](https://github.com/rsuite/rsuite/commit/4521a2730a7311b7fe095d85e39966a1d56f5d9d)), closes [#2784](https://github.com/rsuite/rsuite/issues/2784)
+
+### Features
+
+- **i18n:** add fr_FR locale ([#2735](https://github.com/rsuite/rsuite/issues/2735)) ([087cfc8](https://github.com/rsuite/rsuite/commit/087cfc885252d764864e075b086f5d980f94db94))
+
+### Performance Improvements
+
+- **CheckTreePicker:** improve performance when using large data ([#2767](https://github.com/rsuite/rsuite/issues/2767)) ([651a8a1](https://github.com/rsuite/rsuite/commit/651a8a1ebb0bf1c1e07e1541ca1f0a61a96a3df4))
+
 # [5.19.0](https://github.com/rsuite/rsuite/compare/v5.18.1...v5.19.0) (2022-09-23)
 
 ### Bug Fixes

package/Picker/styles/index.less

@@ -18,6 +18,10 @@
     max-width: 100%;
   }
 
+  &-toggle {
+    min-width: 75px;
+  }
+
   &-toggle.rs-btn {
     .rs-ripple-pond {
       display: none !important;

package/cjs/Animation/Transition.d.ts

@@ -36,7 +36,7 @@ interface TransitionState {
 }
 export declare const transitionPropTypes: {
     animation: PropTypes.Requireable<boolean>;
-    children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+    children: PropTypes.Requireable<string | number | boolean | ((...args: any[]) => any) | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
     className: PropTypes.Requireable<string>;
     in: PropTypes.Requireable<boolean>;
     unmountOnExit: PropTypes.Requireable<boolean>;
@@ -59,7 +59,7 @@ declare type EventToken = {
 declare class Transition extends React.Component<TransitionProps, TransitionState> {
     static propTypes: {
         animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        children: PropTypes.Requireable<string | number | boolean | ((...args: any[]) => any) | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         className: PropTypes.Requireable<string>;
         in: PropTypes.Requireable<boolean>;
         unmountOnExit: PropTypes.Requireable<boolean>;

package/cjs/Cascader/Cascader.js

@@ -117,6 +117,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       valueToPaths = _usePaths.valueToPaths,
       columnData = _usePaths.columnData,
       addColumn = _usePaths.addColumn,
+      romoveColumnByIndex = _usePaths.romoveColumnByIndex,
       setValueToPaths = _usePaths.setValueToPaths,
       setColumnData = _usePaths.setColumnData,
       setSelectedPaths = _usePaths.setSelectedPaths,
@@ -280,9 +281,10 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleSelect = function handleSelect(node, cascadePaths, isLeafNode, event) {
     var _node$childrenKey, _node$childrenKey2, _triggerRef$current2;
 
-    var nextValue = node[valueKey];
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, cascadePaths, event);
-    setSelectedPaths(cascadePaths); // Lazy load node's children
+    setSelectedPaths(cascadePaths);
+    var nextValue = node[valueKey];
+    var columnIndex = cascadePaths.length; // Lazy load node's children
 
     if (typeof getChildren === 'function' && ((_node$childrenKey = node[childrenKey]) === null || _node$childrenKey === void 0 ? void 0 : _node$childrenKey.length) === 0) {
       node.loading = true;
@@ -294,16 +296,19 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
           node[childrenKey] = data;
 
           if (targetRef.current) {
-            addColumn(data, cascadePaths.length);
+            addColumn(data, columnIndex);
           }
         });
       } else {
         node.loading = false;
         node[childrenKey] = children;
-        addColumn(children, cascadePaths.length);
+        addColumn(children, columnIndex);
       }
     } else if ((_node$childrenKey2 = node[childrenKey]) !== null && _node$childrenKey2 !== void 0 && _node$childrenKey2.length) {
-      addColumn(node[childrenKey], cascadePaths.length);
+      addColumn(node[childrenKey], columnIndex);
+    } else {
+      // Removes subsequent columns of the current column when the clicked node is a leaf node.
+      romoveColumnByIndex(columnIndex);
     }
 
     if (isLeafNode) {

package/cjs/Cascader/utils.d.ts

@@ -14,4 +14,5 @@ export declare function usePaths(props: CascaderProps): {
     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;
+    romoveColumnByIndex: (index: number) => void;
 };

package/cjs/Cascader/utils.js

@@ -125,6 +125,15 @@ function usePaths(props) {
   function addColumn(column, index) {
     setColumnData([].concat((0, _slice.default)(columnData, 0, index), [column]));
   }
+  /**
+   * Remove subsequent columns of the specified column
+   * @param index
+   */
+
+
+  function romoveColumnByIndex(index) {
+    setColumnData([].concat((0, _slice.default)(columnData, 0, index)));
+  }
   /**
    * Enforce update of columns and paths.
    * @param nextValue  Selected value
@@ -160,6 +169,7 @@ function usePaths(props) {
     setValueToPaths: setValueToPaths,
     setColumnData: setColumnData,
     setSelectedPaths: setSelectedPaths,
-    addColumn: addColumn
+    addColumn: addColumn,
+    romoveColumnByIndex: romoveColumnByIndex
   };
 }

package/cjs/CheckTreePicker/CheckTreePicker.js

@@ -43,8 +43,6 @@ var _Picker = require("../Picker");
 
 var _utils2 = require("./utils");
 
-var _TreePicker = require("../TreePicker/TreePicker");
-
 var emptyArray = [];
 
 var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
@@ -88,6 +86,8 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       defaultExpandItemValues = _props$defaultExpandI === void 0 ? emptyArray : _props$defaultExpandI,
       _props$height = props.height,
       height = _props$height === void 0 ? 360 : _props$height,
+      _props$menuMaxHeight = props.menuMaxHeight,
+      menuMaxHeight = _props$menuMaxHeight === void 0 ? 320 : _props$menuMaxHeight,
       menuStyle = props.menuStyle,
       _props$searchable = props.searchable,
       searchable = _props$searchable === void 0 ? true : _props$searchable,
@@ -119,7 +119,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       renderValue = props.renderValue,
       renderTreeIcon = props.renderTreeIcon,
       renderTreeNode = props.renderTreeNode,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(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"]);
+      rest = (0, _objectWithoutPropertiesLoose2.default)(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", "menuMaxHeight", "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 = (0, _react.useContext)(_TreeContext.default),
       inline = _useContext.inline;
@@ -249,11 +249,11 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       value: node[valueKey],
       label: node[labelKey],
       layer: layer,
-      focus: (0, _utils.shallowEqual)(focusItemValue, node[valueKey]),
+      focus: focusItemValue === node[valueKey],
       expand: node.expand,
       visible: node.visible,
       loading: loadingNodeValues.some(function (item) {
-        return (0, _utils.shallowEqual)(item, node[valueKey]);
+        return item === node[valueKey];
       }),
       disabled: (0, _utils2.getDisabledState)(flattenNodes, node, {
         disabledItemValues: disabledItemValues,
@@ -390,18 +390,6 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     onChange === null || onChange === void 0 ? void 0 : onChange(selectedValues, event);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(node, selectedValues, event);
   }, [cascade, valueKey, flattenNodes, isControlled, uncheckableItemValues, setValue, onChange, onSelect, toggleChecked, unSerializeList]);
-
-  var hasValue = function hasValue() {
-    var selectedValues = Object.keys(flattenNodes).map(function (refKey) {
-      return flattenNodes[refKey][valueKey];
-    }).filter(function (item) {
-      return value.some(function (v) {
-        return (0, _utils.shallowEqual)(v, item);
-      });
-    });
-    return !!selectedValues.length;
-  };
-
   var handleOpen = (0, _react.useCallback)(function () {
     var _triggerRef$current, _triggerRef$current$o;
 
@@ -453,22 +441,26 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
   var handleClean = (0, _react.useCallback)(function (event) {
     var target = event.target; // exclude searchBar
 
-    if (target.matches('div[role="searchbox"] > input')) {
+    if (target.matches('div[role="searchbox"] > input') || disabled || !cleanable) {
       return;
     }
 
     setActiveNode(null);
-    setValue([]);
     setFocusItemValue(null);
-    unSerializeList({
-      nodes: flattenNodes,
-      key: 'check',
-      value: [],
-      cascade: cascade,
-      uncheckableItemValues: uncheckableItemValues
-    });
+
+    if (!isControlled) {
+      setValue([]);
+      unSerializeList({
+        nodes: flattenNodes,
+        key: 'check',
+        value: [],
+        cascade: cascade,
+        uncheckableItemValues: uncheckableItemValues
+      });
+    }
+
     onChange === null || onChange === void 0 ? void 0 : onChange([], event);
-  }, [cascade, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues]);
+  }, [cascade, cleanable, disabled, flattenNodes, onChange, setValue, unSerializeList, uncheckableItemValues, isControlled]);
   var handleFocusItem = (0, _react.useCallback)(function (key) {
     var focusableItems = (0, _treeUtils.getFocusableItems)(filteredData, {
       disabledItemValues: disabledItemValues,
@@ -593,7 +585,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     var visibleChildren = (0, _isUndefined2.default)(searchKeywordState) || searchKeywordState.length === 0 ? !!children : (0, _treeUtils.hasVisibleChildren)(node, childrenKey);
     var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {
       /**
-       * spread operator dont copy unenumerable properties
+       * spread operator don't copy unenumerable properties
        * so we need to copy them manually
        */
       parent: node.parent,
@@ -645,6 +637,11 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
           visible = node.visible;
       var expand = (0, _treeUtils.getExpandWhenSearching)(searchKeywordState, expandItemValues.includes(node[valueKey]));
       var nodeProps = (0, _extends2.default)({}, getTreeNodeProps((0, _extends2.default)({}, node, {
+        /**
+         * spread operator don't copy unenumerable properties
+         * so we need to copy them manually
+         */
+        parent: node.parent,
         expand: expand
       }), layer), {
         hasChildren: node.hasChildren
@@ -689,7 +686,7 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: treeNodesClass
     }, virtualized ? /*#__PURE__*/_react.default.createElement(_VirtualizedList.AutoSizer, {
-      defaultHeight: inline ? height : _TreePicker.maxTreeHeight,
+      defaultHeight: inline ? height : menuMaxHeight,
       style: {
         width: 'auto',
         height: 'auto'
@@ -718,13 +715,10 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       left: left,
       top: top
     });
-    var styles = virtualized ? (0, _extends2.default)({
-      height: height
-    }, mergedMenuStyle) : (0, _extends2.default)({}, mergedMenuStyle);
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       autoWidth: menuAutoWidth,
       className: classes,
-      style: styles,
+      style: mergedMenuStyle,
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       onKeyDown: onPickerKeydown,
       target: triggerRef
@@ -735,15 +729,17 @@ var CheckTreePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       inputRef: searchInputRef
     }) : null, renderMenu ? renderMenu(renderCheckTree()) : renderCheckTree(), renderExtraFooter === null || renderExtraFooter === void 0 ? void 0 : renderExtraFooter());
   };
+
+  var selectedItems = (0, _react.useMemo)(function () {
+    return (0, _utils2.getSelectedItems)(flattenNodes, value);
+  }, [flattenNodes, value]);
   /**
    * 1.Have a value and the value is valid.
    * 2.Regardless of whether the value is valid, as long as renderValue is set, it is judged to have a value.
    */
 
-
-  var hasValidValue = hasValue() || value.length > 0 && (0, _isFunction2.default)(renderValue);
+  var hasValidValue = selectedItems.length > 0 || value.length > 0 && (0, _isFunction2.default)(renderValue);
   var selectedElement = placeholder;
-  var selectedItems = (0, _utils2.getSelectedItems)(flattenNodes, value, valueKey);
 
   if (hasValidValue) {
     selectedElement = /*#__PURE__*/_react.default.createElement(_Picker.SelectedElement, {

package/cjs/CheckTreePicker/utils.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { CheckTreePickerProps } from './CheckTreePicker';
+import { CheckTreePickerProps, ValueType } from './CheckTreePicker';
 import { CheckStateType } from '../utils';
 export interface TreeNodeType {
     uncheckable?: boolean;
@@ -40,5 +40,5 @@ export declare function isNodeUncheckable(node: any, props: Required<Pick<CheckT
 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 getSelectedItems(nodes: TreeNodesType, values: ValueType): TreeNodeType[];
 export declare function getNodeCheckState({ nodes, node, cascade, childrenKey }: any): CheckStateType;

package/cjs/CheckTreePicker/utils.js

@@ -126,7 +126,7 @@ function isNodeUncheckable(node, props) {
       uncheckableItemValues = _props$uncheckableIte === void 0 ? [] : _props$uncheckableIte,
       valueKey = props.valueKey;
   return uncheckableItemValues.some(function (value) {
-    return (0, _utils.shallowEqual)(node[valueKey], value);
+    return node[valueKey] === value;
   });
 }
 
@@ -171,7 +171,7 @@ function getDisabledState(nodes, node, props) {
   }
 
   return disabledItemValues.some(function (value) {
-    return node.refKey && (0, _utils.shallowEqual)(nodes[node.refKey][valueKey], value);
+    return node.refKey && nodes[node.refKey][valueKey] === value;
   });
 }
 
@@ -185,18 +185,17 @@ function getCheckTreePickerDefaultValue(value, uncheckableItemValues) {
   return [];
 }
 
-function getSelectedItems(nodes, value, valueKey) {
-  var checkItems = [];
-  Object.keys(nodes).map(function (refKey) {
+function getSelectedItems(nodes, values) {
+  var checkedItems = [];
+  values.forEach(function (value) {
+    var refKey = (0, _treeUtils.getNodeFormattedRefKey)(value);
     var node = nodes[refKey];
 
-    if (value.some(function (value) {
-      return (0, _utils.shallowEqual)(node[valueKey], value);
-    })) {
-      checkItems.push(node);
+    if (!(0, _isNil2.default)(node)) {
+      checkedItems.push(node);
     }
   });
-  return checkItems;
+  return checkedItems;
 }
 
 function getNodeCheckState(_ref) {

package/cjs/DOMHelper/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="node" />
 import * as helpers from 'dom-lib';
 export * from 'dom-lib';
 declare const DOMHelper: {
@@ -10,8 +11,8 @@ declare const DOMHelper: {
     removeClass: (target: Element, className: string) => Element;
     hasClass: (target: Element, className: string) => boolean;
     toggleClass: (target: Element, className: string) => Element;
-    cancelAnimationFramePolyfill: typeof clearTimeout;
-    requestAnimationFramePolyfill: typeof requestAnimationFrame;
+    cancelAnimationFramePolyfill: typeof cancelAnimationFrame | typeof clearTimeout;
+    requestAnimationFramePolyfill: typeof requestAnimationFrame | ((callback: (t: number) => void) => NodeJS.Timeout);
     getAnimationEnd: typeof helpers.getAnimationEnd;
     ownerDocument: (node: Element | null) => Document;
     ownerWindow: (componentOrElement: Element) => Window;

package/cjs/DatePicker/DatePicker.js

@@ -35,6 +35,8 @@ var _utils = require("../utils");
 
 var _Picker = require("../Picker");
 
+var _OverlayTrigger = require("../Overlay/OverlayTrigger");
+
 var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -419,6 +421,13 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     ref: triggerRef,
     placement: placement,
+    onClose: function onClose(cause) {
+      // Unless overlay is closing on user clicking "OK" button,
+      // reset the selected date on calendar panel
+      if (cause !== _OverlayTrigger.OverlayCloseCause.ImperativeHandle) {
+        resetCalendarDate();
+      }
+    },
     onEntered: (0, _utils.createChainedFunction)(handleEntered, onEntered),
     onExited: (0, _utils.createChainedFunction)(handleExited, onExited),
     speaker: renderDropdownMenu

package/cjs/DatePicker/PredefinedRanges.js

@@ -45,6 +45,11 @@ var PredefinedRanges = /*#__PURE__*/_react.default.forwardRef(function (props, r
       return item.label === key;
     });
   }, [calendarDate]);
+
+  if (ranges.length === 0) {
+    return null;
+  }
+
   return /*#__PURE__*/_react.default.createElement(_Stack.default, (0, _extends2.default)({
     className: className,
     ref: ref,

package/cjs/DateRangePicker/DateRangePicker.js

@@ -601,6 +601,12 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       onToggleMeridian: handleToggleMeridian,
       renderTitle: renderTitle
     };
+    var sideRanges = (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+      return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
+    })) || [];
+    var bottomRanges = ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
+      return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
+    });
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
       role: "dialog",
       className: classes,
@@ -611,13 +617,11 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       className: panelClasses
     }, /*#__PURE__*/_react.default.createElement(_Stack.default, {
       alignItems: "flex-start"
-    }, /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
+    }, sideRanges.length > 0 && /*#__PURE__*/_react.default.createElement(_PredefinedRanges.default, {
       direction: "column",
       spacing: 0,
       className: prefix('daterange-predefined'),
-      ranges: (ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
-        return (range === null || range === void 0 ? void 0 : range.placement) === 'left';
-      })) || [],
+      ranges: sideRanges,
       calendarDate: calendarDate,
       locale: locale,
       disabledShortcut: disabledShortcutButton,
@@ -640,9 +644,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
       hideOkBtn: oneTap,
       onOk: handleOK,
       onClickShortcut: handleShortcutPageDate,
-      ranges: ranges === null || ranges === void 0 ? void 0 : ranges.filter(function (range) {
-        return (range === null || range === void 0 ? void 0 : range.placement) === 'bottom' || (range === null || range === void 0 ? void 0 : range.placement) === undefined;
-      })
+      ranges: bottomRanges
     })))));
   };