rsuite 5.18.0-beta.3 → 5.18.1-beta.4

package/esm/Stack/Stack.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 { useClassNames, useCustom, isIE } from '../utils';
+import { useClassNames, useCustom, isSupportFlexGap } from '../utils';
 var Stack = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _itemStyles;
 
@@ -31,7 +31,7 @@ var Stack = /*#__PURE__*/React.forwardRef(function (props, ref) {
       prefix = _useClassNames.prefix;
 
   var classes = merge(className, withClassPrefix());
-  var isSupportGridGap = !isIE();
+  var isSupportGridGap = isSupportFlexGap();
   var count = React.Children.count(children);
   var gridGap = Array.isArray(spacing) ? spacing : [spacing, 0];
   var itemStyles = (_itemStyles = {}, _itemStyles[rtl ? 'marginLeft' : 'marginRight'] = gridGap[0], _itemStyles.marginBottom = gridGap[1], _itemStyles);

package/esm/index.d.ts

@@ -121,7 +121,7 @@ export type { TagGroupProps } from './TagGroup';
 export { default as List } from './List';
 export type { ListProps, ListItemProps } from './List';
 export { default as Calendar } from './Calendar';
-export type { CalendarPanelProps as CalendarProps } from './Calendar';
+export type { CalendarProps } from './Calendar';
 export { default as Carousel } from './Carousel';
 export type { CarouselProps } from './Carousel';
 export { default as Grid } from './Grid';

package/esm/utils/BrowserDetection.d.ts

@@ -2,3 +2,10 @@ export declare const isIE: () => boolean;
 export declare const isIE10: () => boolean;
 export declare const isIE11: () => boolean;
 export declare const isEdge: () => boolean;
+export declare const getChromeVersion: () => number | false;
+export declare const getSafariVersion: () => number | false;
+/**
+ * flexbox-gap compatibility
+ * @see https://caniuse.com/flexbox-gap
+ */
+export declare const isSupportFlexGap: () => boolean;

package/esm/utils/BrowserDetection.js

@@ -13,4 +13,45 @@ export var isIE11 = function isIE11() {
 
 export var isEdge = function isEdge() {
   return canUseDOM && !isIE() && 'styleMedia' in window;
+};
+export var getChromeVersion = function getChromeVersion() {
+  if (canUseDOM) {
+    var match = window.navigator.userAgent.match(/Chrom(e|ium)\/([\d\.]+)\./);
+    return match ? parseFloat(match[2]) : false;
+  }
+
+  return false;
+};
+export var getSafariVersion = function getSafariVersion() {
+  if (canUseDOM) {
+    var match = window.navigator.userAgent.match(/Version\/([\d\.]+).*Safari/);
+    return match ? parseFloat(match[1]) : false;
+  }
+
+  return false;
+};
+/**
+ * flexbox-gap compatibility
+ * @see https://caniuse.com/flexbox-gap
+ */
+
+export var isSupportFlexGap = function isSupportFlexGap() {
+  if (isIE()) {
+    return false;
+  }
+
+  var chromeVersion = getChromeVersion();
+  var safariVersion = getSafariVersion(); // edge consider as chrome
+
+  if (chromeVersion) {
+    // flex-gap is support in Chrome 84+
+    return chromeVersion >= 84;
+  }
+
+  if (safariVersion) {
+    // flex-gap is support in Safari 14.1+
+    return safariVersion >= 14.1;
+  }
+
+  return true;
 };

package/esm/utils/dateUtils.d.ts

@@ -45,10 +45,10 @@ export declare const calendarOnlyProps: CalendarOnlyPropsType[];
  */
 export declare function disabledTime(props: any, date: Date): boolean;
 export declare const omitHideDisabledProps: <T extends Record<string, any>>(props: T) => Partial<Omit<T, CalendarOnlyPropsType>>;
-export declare const shouldTime: (format: string) => boolean;
-export declare const shouldMonth: (format: string) => boolean;
-export declare const shouldDate: (format: string) => boolean;
-export declare const shouldOnlyTime: (format: string) => boolean;
+export declare const shouldRenderTime: (format: string) => boolean;
+export declare const shouldRenderMonth: (format: string) => boolean;
+export declare const shouldRenderDate: (format: string) => boolean;
+export declare const shouldOnlyRenderTime: (format: string) => boolean;
 /**
  * Get all weeks of this month
  * @params monthDate

package/esm/utils/dateUtils.js

@@ -84,17 +84,17 @@ export var omitHideDisabledProps = function omitHideDisabledProps(props) {
     return key.startsWith('disabled') || key.startsWith('hide');
   });
 };
-export var shouldTime = function shouldTime(format) {
+export var shouldRenderTime = function shouldRenderTime(format) {
   return /([Hhms])/.test(format);
 };
-export var shouldMonth = function shouldMonth(format) {
+export var shouldRenderMonth = function shouldRenderMonth(format) {
   return /[Yy]/.test(format) && /[ML]/.test(format);
 };
-export var shouldDate = function shouldDate(format) {
+export var shouldRenderDate = function shouldRenderDate(format) {
   return /[Yy]/.test(format) && /[ML]/.test(format) && /[Dd]/.test(format);
 }; // for date-fns v1 and v2
 
-export var shouldOnlyTime = function shouldOnlyTime(format) {
+export var shouldOnlyRenderTime = function shouldOnlyRenderTime(format) {
   return /([Hhms])/.test(format) && !/([YyMDd])/.test(format);
 }; // for date-fns v1 and v2
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.18.0-beta.3",
+  "version": "5.18.1-beta.4",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/cjs/Calendar/CalendarPanel.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import Calendar from './Calendar';
-import { CalendarLocale } from '../locales';
-import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
-export interface CalendarPanelProps extends WithAsProps {
-    /** Controlled value */
-    value?: Date;
-    /** Default value  */
-    defaultValue?: Date;
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day  */
-    isoWeek?: boolean;
-    /** Display a compact calendar   */
-    compact?: boolean;
-    /** Show border   */
-    bordered?: boolean;
-    /** Custom locale */
-    locale?: CalendarLocale;
-    /**  Callback fired before the value changed  */
-    onChange?: (date: Date) => void;
-    /** Callback fired before the date selected */
-    onSelect?: (date: Date) => void;
-    /** Custom render calendar cells  */
-    renderCell?: (date: Date) => React.ReactNode;
-}
-declare const CalendarPanel: RsRefForwardingComponent<typeof Calendar, CalendarPanelProps>;
-export default CalendarPanel;

package/cjs/Calendar/CalendarPanel.js

@@ -1,139 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-exports.__esModule = true;
-exports.default = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _Calendar = _interopRequireWildcard(require("./Calendar"));
-
-var _Button = _interopRequireDefault(require("../Button"));
-
-var _CustomProvider = require("../CustomProvider");
-
-var _utils = require("../utils");
-
-var _useCalendarDate2 = _interopRequireDefault(require("./useCalendarDate"));
-
-var CalendarPanel = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-      Component = _props$as === void 0 ? _Calendar.default : _props$as,
-      bordered = props.bordered,
-      className = props.className,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'calendar' : _props$classPrefix,
-      compact = props.compact,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
-      isoWeek = props.isoWeek,
-      overrideLocale = props.locale,
-      onChange = props.onChange,
-      onSelect = props.onSelect,
-      renderCell = props.renderCell,
-      value = props.value,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onSelect", "renderCell", "value"]);
-
-  var _useCalendarDate = (0, _useCalendarDate2.default)(value, defaultValue),
-      calendarDate = _useCalendarDate.calendarDate,
-      setCalendarDate = _useCalendarDate.setCalendarDate;
-
-  var _useState = (0, _react.useState)(false),
-      showMonth = _useState[0],
-      setShowMonth = _useState[1];
-
-  var _useCustom = (0, _utils.useCustom)('Calendar', overrideLocale),
-      locale = _useCustom.locale;
-
-  var handleToggleMonthDropdown = (0, _react.useCallback)(function () {
-    setShowMonth(function (prevShowMonth) {
-      return !prevShowMonth;
-    });
-  }, []);
-  var handleChange = (0, _react.useCallback)(function (nextValue) {
-    setCalendarDate(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
-  }, [setCalendarDate, onChange]);
-  var handleChangePageDate = (0, _react.useCallback)(function (nextValue) {
-    setShowMonth(false);
-    handleChange(nextValue);
-  }, [handleChange]);
-  var handleClickToday = (0, _react.useCallback)(function () {
-    setShowMonth(false);
-    handleChange(new Date());
-  }, [handleChange]);
-  var handleSelect = (0, _react.useCallback)(function (nextValue) {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
-    handleChange(nextValue);
-  }, [handleChange, onSelect]);
-
-  var _useClassNames = (0, _utils.useClassNames)(classPrefix),
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge,
-      withClassPrefix = _useClassNames.withClassPrefix;
-
-  var renderToolbar = (0, _react.useCallback)(function () {
-    return /*#__PURE__*/_react.default.createElement(_Button.default, {
-      className: prefix('btn-today'),
-      size: "sm",
-      onClick: handleClickToday
-    }, locale.today || 'Today');
-  }, [handleClickToday, locale.today, prefix]);
-  var customRenderCell = (0, _react.useCallback)(function (date) {
-    return renderCell === null || renderCell === void 0 ? void 0 : renderCell(date);
-  }, [renderCell]);
-  var classes = merge(className, withClassPrefix('panel', {
-    bordered: bordered,
-    compact: compact
-  }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
-    inline: true,
-    className: classes,
-    ref: ref,
-    isoWeek: isoWeek,
-    format: "yyyy-MM-dd",
-    calendarState: showMonth ? _Calendar.CalendarState.DROP_MONTH : null,
-    calendarDate: calendarDate,
-    limitEndYear: 1000,
-    locale: locale,
-    renderTitle: function renderTitle(date) {
-      return /*#__PURE__*/_react.default.createElement(_CustomProvider.FormattedDate, {
-        date: date,
-        formatStr: locale.formattedMonthPattern || 'MMMM  yyyy'
-      });
-    },
-    renderToolbar: renderToolbar,
-    renderCell: customRenderCell,
-    onMoveForward: handleChange,
-    onMoveBackward: handleChange,
-    onToggleMonthDropdown: handleToggleMonthDropdown,
-    onChangePageDate: handleChangePageDate,
-    onSelect: handleSelect
-  }));
-});
-
-CalendarPanel.displayName = 'CalendarPanel';
-CalendarPanel.propTypes = {
-  value: _propTypes.default.instanceOf(Date),
-  defaultValue: _propTypes.default.instanceOf(Date),
-  isoWeek: _propTypes.default.bool,
-  compact: _propTypes.default.bool,
-  bordered: _propTypes.default.bool,
-  locale: _propTypes.default.object,
-  className: _propTypes.default.string,
-  classPrefix: _propTypes.default.string,
-  onChange: _propTypes.default.func,
-  onSelect: _propTypes.default.func,
-  renderCell: _propTypes.default.func
-};
-var _default = CalendarPanel;
-exports.default = _default;

package/cjs/Calendar/View.d.ts

@@ -1,4 +0,0 @@
-import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
-export declare type ViewProps = WithAsProps;
-declare const View: RsRefForwardingComponent<'div', ViewProps>;
-export default View;

package/esm/Calendar/CalendarPanel.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import Calendar from './Calendar';
-import { CalendarLocale } from '../locales';
-import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
-export interface CalendarPanelProps extends WithAsProps {
-    /** Controlled value */
-    value?: Date;
-    /** Default value  */
-    defaultValue?: Date;
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day  */
-    isoWeek?: boolean;
-    /** Display a compact calendar   */
-    compact?: boolean;
-    /** Show border   */
-    bordered?: boolean;
-    /** Custom locale */
-    locale?: CalendarLocale;
-    /**  Callback fired before the value changed  */
-    onChange?: (date: Date) => void;
-    /** Callback fired before the date selected */
-    onSelect?: (date: Date) => void;
-    /** Custom render calendar cells  */
-    renderCell?: (date: Date) => React.ReactNode;
-}
-declare const CalendarPanel: RsRefForwardingComponent<typeof Calendar, CalendarPanelProps>;
-export default CalendarPanel;

package/esm/Calendar/CalendarPanel.js

@@ -1,119 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import React, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
-import Calendar, { CalendarState } from './Calendar';
-import Button from '../Button';
-import { FormattedDate } from '../CustomProvider';
-import { useClassNames, useCustom } from '../utils';
-import useCalendarDate from './useCalendarDate';
-var CalendarPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$as = props.as,
-      Component = _props$as === void 0 ? Calendar : _props$as,
-      bordered = props.bordered,
-      className = props.className,
-      _props$classPrefix = props.classPrefix,
-      classPrefix = _props$classPrefix === void 0 ? 'calendar' : _props$classPrefix,
-      compact = props.compact,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? new Date() : _props$defaultValue,
-      isoWeek = props.isoWeek,
-      overrideLocale = props.locale,
-      onChange = props.onChange,
-      onSelect = props.onSelect,
-      renderCell = props.renderCell,
-      value = props.value,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "bordered", "className", "classPrefix", "compact", "defaultValue", "isoWeek", "locale", "onChange", "onSelect", "renderCell", "value"]);
-
-  var _useCalendarDate = useCalendarDate(value, defaultValue),
-      calendarDate = _useCalendarDate.calendarDate,
-      setCalendarDate = _useCalendarDate.setCalendarDate;
-
-  var _useState = useState(false),
-      showMonth = _useState[0],
-      setShowMonth = _useState[1];
-
-  var _useCustom = useCustom('Calendar', overrideLocale),
-      locale = _useCustom.locale;
-
-  var handleToggleMonthDropdown = useCallback(function () {
-    setShowMonth(function (prevShowMonth) {
-      return !prevShowMonth;
-    });
-  }, []);
-  var handleChange = useCallback(function (nextValue) {
-    setCalendarDate(nextValue);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextValue);
-  }, [setCalendarDate, onChange]);
-  var handleChangePageDate = useCallback(function (nextValue) {
-    setShowMonth(false);
-    handleChange(nextValue);
-  }, [handleChange]);
-  var handleClickToday = useCallback(function () {
-    setShowMonth(false);
-    handleChange(new Date());
-  }, [handleChange]);
-  var handleSelect = useCallback(function (nextValue) {
-    onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextValue);
-    handleChange(nextValue);
-  }, [handleChange, onSelect]);
-
-  var _useClassNames = useClassNames(classPrefix),
-      prefix = _useClassNames.prefix,
-      merge = _useClassNames.merge,
-      withClassPrefix = _useClassNames.withClassPrefix;
-
-  var renderToolbar = useCallback(function () {
-    return /*#__PURE__*/React.createElement(Button, {
-      className: prefix('btn-today'),
-      size: "sm",
-      onClick: handleClickToday
-    }, locale.today || 'Today');
-  }, [handleClickToday, locale.today, prefix]);
-  var customRenderCell = useCallback(function (date) {
-    return renderCell === null || renderCell === void 0 ? void 0 : renderCell(date);
-  }, [renderCell]);
-  var classes = merge(className, withClassPrefix('panel', {
-    bordered: bordered,
-    compact: compact
-  }));
-  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
-    inline: true,
-    className: classes,
-    ref: ref,
-    isoWeek: isoWeek,
-    format: "yyyy-MM-dd",
-    calendarState: showMonth ? CalendarState.DROP_MONTH : null,
-    calendarDate: calendarDate,
-    limitEndYear: 1000,
-    locale: locale,
-    renderTitle: function renderTitle(date) {
-      return /*#__PURE__*/React.createElement(FormattedDate, {
-        date: date,
-        formatStr: locale.formattedMonthPattern || 'MMMM  yyyy'
-      });
-    },
-    renderToolbar: renderToolbar,
-    renderCell: customRenderCell,
-    onMoveForward: handleChange,
-    onMoveBackward: handleChange,
-    onToggleMonthDropdown: handleToggleMonthDropdown,
-    onChangePageDate: handleChangePageDate,
-    onSelect: handleSelect
-  }));
-});
-CalendarPanel.displayName = 'CalendarPanel';
-CalendarPanel.propTypes = {
-  value: PropTypes.instanceOf(Date),
-  defaultValue: PropTypes.instanceOf(Date),
-  isoWeek: PropTypes.bool,
-  compact: PropTypes.bool,
-  bordered: PropTypes.bool,
-  locale: PropTypes.object,
-  className: PropTypes.string,
-  classPrefix: PropTypes.string,
-  onChange: PropTypes.func,
-  onSelect: PropTypes.func,
-  renderCell: PropTypes.func
-};
-export default CalendarPanel;

package/esm/Calendar/View.d.ts

@@ -1,4 +0,0 @@
-import { RsRefForwardingComponent, WithAsProps } from '../@types/common';
-export declare type ViewProps = WithAsProps;
-declare const View: RsRefForwardingComponent<'div', ViewProps>;
-export default View;