rsuite 5.16.6 → 5.17.0

package/esm/DatePicker/PredefinedRanges.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StackProps } from '../Stack';
+import { RangeType } from './types';
+import { CalendarLocale } from '../locales';
+export interface PredefinedRangesProps<T = any, Shortcut = T> extends StackProps {
+    ranges?: RangeType<Shortcut>[];
+    calendarDate: T;
+    locale: CalendarLocale;
+    disabledShortcut?: (value: T) => boolean;
+    onClickShortcut?: (value: Shortcut, closeOverlay: boolean, event: React.MouseEvent) => void;
+}
+declare const PredefinedRanges: React.ForwardRefExoticComponent<PredefinedRangesProps<any, any> & React.RefAttributes<HTMLDivElement>>;
+export default PredefinedRanges;

package/esm/DatePicker/PredefinedRanges.js

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import React, { useCallback, useState } from 'react';
+import Button from '../Button';
+import Stack from '../Stack';
+import { useUpdateEffect } from '../utils';
+import { getDefaultRanges, getRanges } from './utils';
+var PredefinedRanges = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var className = props.className,
+      disabledShortcut = props.disabledShortcut,
+      onClickShortcut = props.onClickShortcut,
+      calendarDate = props.calendarDate,
+      rangesProp = props.ranges,
+      locale = props.locale,
+      rest = _objectWithoutPropertiesLoose(props, ["className", "disabledShortcut", "onClickShortcut", "calendarDate", "ranges", "locale"]);
+
+  var _useState = useState(getRanges(props)),
+      ranges = _useState[0],
+      setRanges = _useState[1];
+
+  useUpdateEffect(function () {
+    setRanges(getRanges({
+      ranges: rangesProp,
+      calendarDate: calendarDate
+    }));
+  }, [calendarDate, rangesProp]);
+  var hasLocaleKey = useCallback(function (key) {
+    return getDefaultRanges(calendarDate).some(function (item) {
+      return item.label === key;
+    });
+  }, [calendarDate]);
+  return /*#__PURE__*/React.createElement(Stack, _extends({
+    className: className,
+    ref: ref,
+    alignItems: "flex-start",
+    spacing: 4
+  }, rest), ranges.map(function (_ref, index) {
+    var value = _ref.value,
+        closeOverlay = _ref.closeOverlay,
+        label = _ref.label,
+        rest = _objectWithoutPropertiesLoose(_ref, ["value", "closeOverlay", "label"]);
+
+    var disabled = disabledShortcut === null || disabledShortcut === void 0 ? void 0 : disabledShortcut(value);
+
+    var handleClickShortcut = function handleClickShortcut(event) {
+      if (disabled) {
+        return;
+      }
+
+      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);
+    };
+
+    return /*#__PURE__*/React.createElement(Button, _extends({
+      appearance: "link",
+      size: "sm",
+      key: index,
+      disabled: disabled,
+      onClick: handleClickShortcut
+    }, rest), hasLocaleKey(label) && typeof label === 'string' ? locale === null || locale === void 0 ? void 0 : locale[label] : label);
+  }));
+});
+export default PredefinedRanges;

package/esm/DatePicker/Toolbar.d.ts

@@ -1,17 +1,10 @@
 import React from 'react';
-import { StandardProps } from '../@types/common';
-import { RangeType } from './types';
-import { CalendarLocale } from '../locales';
+import { PredefinedRangesProps } from './PredefinedRanges';
 export type { RangeType } from './types';
-export interface ToolbarProps<T = any, Shortcut = T> extends StandardProps {
+export interface ToolbarProps<T = any, Shortcut = T> extends PredefinedRangesProps<T, Shortcut> {
     hideOkBtn?: boolean;
-    locale?: CalendarLocale;
-    calendarDate: T;
-    ranges?: RangeType<Shortcut>[];
     disabledOkBtn?: (value: T) => boolean;
-    disabledShortcut?: (value: T) => boolean;
     onOk?: (event: React.MouseEvent) => void;
-    onClickShortcut?: (value: Shortcut, closeOverlay: boolean, event: React.MouseEvent) => void;
 }
 declare type ToolbarComponent = React.ForwardRefExoticComponent<ToolbarProps> & {
     <T = any, Shortcut = T>(props: ToolbarProps<T, Shortcut>): React.ReactElement | null;

package/esm/DatePicker/Toolbar.js

@@ -1,14 +1,36 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import Button from '../Button';
-import { useClassNames, useUpdateEffect } from '../utils';
-import { getDefaultRanges, getRanges } from './utils';
+import { useClassNames } from '../utils';
+import PredefinedRanges from './PredefinedRanges';
+import Stack from '../Stack';
 
+var SubmitButton = function SubmitButton(_ref) {
+  var hide = _ref.hide,
+      disabledOkBtn = _ref.disabledOkBtn,
+      calendarDate = _ref.calendarDate,
+      onOk = _ref.onOk,
+      children = _ref.children;
+
+  if (hide) {
+    return null;
+  }
+
+  var disabled = disabledOkBtn === null || disabledOkBtn === void 0 ? void 0 : disabledOkBtn(calendarDate);
+  return /*#__PURE__*/React.createElement(Button, {
+    appearance: "primary",
+    size: "sm",
+    disabled: disabled,
+    onClick: disabled ? undefined : onOk
+  }, children);
+};
 /**
  * Toolbar for DatePicker and DateRangePicker
  */
+
+
 var Toolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var className = props.className,
       _props$classPrefix = props.classPrefix,
@@ -19,78 +41,40 @@ var Toolbar = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onOk = props.onOk,
       onClickShortcut = props.onClickShortcut,
       calendarDate = props.calendarDate,
-      rangesProp = props.ranges,
+      ranges = props.ranges,
       locale = props.locale,
       rest = _objectWithoutPropertiesLoose(props, ["className", "classPrefix", "disabledOkBtn", "disabledShortcut", "hideOkBtn", "onOk", "onClickShortcut", "calendarDate", "ranges", "locale"]);
 
-  var _useState = useState(getRanges(props)),
-      ranges = _useState[0],
-      setRanges = _useState[1];
-
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
       prefix = _useClassNames.prefix,
       withClassPrefix = _useClassNames.withClassPrefix;
 
-  useUpdateEffect(function () {
-    setRanges(getRanges({
-      ranges: rangesProp,
-      calendarDate: calendarDate
-    }));
-  }, [calendarDate, rangesProp]);
-  var hasLocaleKey = useCallback(function (key) {
-    return getDefaultRanges(calendarDate).some(function (item) {
-      return item.label === key;
-    });
-  }, [calendarDate]);
-  var renderOkButton = useCallback(function () {
-    if (hideOkBtn) {
-      return null;
-    }
-
-    var disabled = disabledOkBtn === null || disabledOkBtn === void 0 ? void 0 : disabledOkBtn(calendarDate);
-    return /*#__PURE__*/React.createElement("div", {
-      className: prefix('right')
-    }, /*#__PURE__*/React.createElement(Button, {
-      appearance: "primary",
-      size: "sm",
-      disabled: disabled,
-      onClick: disabled ? undefined : onOk
-    }, locale === null || locale === void 0 ? void 0 : locale.ok));
-  }, [disabledOkBtn, hideOkBtn, locale, onOk, calendarDate, prefix]);
-
-  if (hideOkBtn && ranges.length === 0) {
+  if (hideOkBtn && (ranges === null || ranges === void 0 ? void 0 : ranges.length) === 0) {
     return null;
   }
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(Stack, _extends({
     ref: ref,
-    className: classes
+    className: classes,
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  }, rest), /*#__PURE__*/React.createElement(PredefinedRanges, {
+    className: prefix('ranges'),
+    ranges: ranges,
+    calendarDate: calendarDate,
+    locale: locale,
+    disabledShortcut: disabledShortcut,
+    onClickShortcut: onClickShortcut
   }), /*#__PURE__*/React.createElement("div", {
-    className: prefix('ranges')
-  }, ranges.map(function (_ref, index) {
-    var value = _ref.value,
-        closeOverlay = _ref.closeOverlay,
-        label = _ref.label;
-    var disabled = disabledShortcut === null || disabledShortcut === void 0 ? void 0 : disabledShortcut(value);
-
-    var handleClickShortcut = function handleClickShortcut(event) {
-      if (disabled) {
-        return;
-      }
-
-      onClickShortcut === null || onClickShortcut === void 0 ? void 0 : onClickShortcut(value, closeOverlay !== false ? true : false, event);
-    };
-
-    return /*#__PURE__*/React.createElement(Button, {
-      appearance: "link",
-      size: "sm",
-      key: index,
-      disabled: disabled,
-      onClick: handleClickShortcut
-    }, hasLocaleKey(label) && typeof label === 'string' ? locale === null || locale === void 0 ? void 0 : locale[label] : label);
-  })), renderOkButton());
+    className: prefix('right')
+  }, /*#__PURE__*/React.createElement(SubmitButton, {
+    disabledOkBtn: disabledOkBtn,
+    hide: hideOkBtn,
+    calendarDate: calendarDate,
+    onOk: onOk
+  }, locale === null || locale === void 0 ? void 0 : locale.ok)));
 });
 Toolbar.displayName = 'Toolbar';
 Toolbar.propTypes = {

package/esm/DateRangePicker/DateRangePicker.js

@@ -9,6 +9,8 @@ import PropTypes from 'prop-types';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedDate } from '../CustomProvider';
 import Toolbar from '../DatePicker/Toolbar';
+import PredefinedRanges from '../DatePicker/PredefinedRanges';
+import Stack from '../Stack';
 import { omitTriggerPropKeys, PickerOverlay, pickerPropTypes, PickerToggle, PickerToggleTrigger, pickTriggerPropKeys, usePickerClassName, usePublicMethods, useToggleKeyDownEvent } from '../Picker';
 import { createChainedFunction, DATERANGE_DISABLED_TARGET, DateUtils, mergeRefs, useClassNames, useControlled, useCustom } from '../utils';
 import { addMonths, compareAsc, isSameMonth } from '../utils/dateUtils';
@@ -391,10 +393,17 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       closeOverlay = false;
     }
 
-    handleValueUpdate(event, value, closeOverlay); // End unfinished selections.
+    updateCalendarDateRange(value);
+
+    if (closeOverlay) {
+      handleValueUpdate(event, value, closeOverlay);
+    } else {
+      setSelectedDates(value !== null && value !== void 0 ? value : []);
+    } // End unfinished selections.
+
 
     hasDoneSelect.current = true;
-  }, [handleValueUpdate]);
+  }, [handleValueUpdate, updateCalendarDateRange]);
   var handleOK = useCallback(function (event) {
     handleValueUpdate(event, selectedDates);
     onOk === null || onOk === void 0 ? void 0 : onOk(selectedDates, event);
@@ -563,13 +572,27 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       renderTitle: renderTitle
     };
     return /*#__PURE__*/React.createElement(PickerOverlay, {
+      role: "dialog",
       className: classes,
       ref: mergeRefs(overlayRef, speakerRef),
       target: triggerRef,
       style: styles
     }, /*#__PURE__*/React.createElement("div", {
       className: panelClasses
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(Stack, {
+      alignItems: "flex-start"
+    }, /*#__PURE__*/React.createElement(PredefinedRanges, {
+      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';
+      })) || [],
+      calendarDate: calendarDate,
+      locale: locale,
+      disabledShortcut: disabledShortcutButton,
+      onClickShortcut: handleShortcutPageDate
+    }), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-content')
     }, /*#__PURE__*/React.createElement("div", {
       className: prefix('daterange-header')
@@ -587,8 +610,10 @@ var DateRangePicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
       hideOkBtn: oneTap,
       onOk: handleOK,
       onClickShortcut: handleShortcutPageDate,
-      ranges: ranges
-    })));
+      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;
+      })
+    })))));
   };
 
   var hasValue = !isNil(value) && value.length > 1;

package/esm/DateRangePicker/types.d.ts

@@ -4,8 +4,9 @@ export declare type ValueType = [Date?, Date?];
 export declare type DateRange = [Date, Date];
 export interface RangeType {
     label: React.ReactNode;
-    closeOverlay?: boolean;
     value: DateRange | ((value?: ValueType) => DateRange);
+    closeOverlay?: boolean;
+    placement?: 'bottom' | 'left';
 }
 export declare type DisabledDateFunction = (
 /** Date used to determine if disabling is required. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.16.6",
+  "version": "5.17.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -37,7 +37,7 @@
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react-virtualized": "^9.22.3",
-    "rsuite-table": "^5.6.0",
+    "rsuite-table": "^5.7.0",
     "schema-typed": "^2.0.3"
   },
   "peerDependencies": {