rsuite 5.51.0 → 5.52.0

package/esm/internals/SearchBox/SearchBox.js

@@ -0,0 +1,44 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _templateObject, _templateObject2;
+import React from 'react';
+import Search from '@rsuite/icons/legacy/Search';
+import Input from '../../Input';
+import InputGroup from '../..//InputGroup';
+import { useClassNames } from '../../utils';
+var SearchBox = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$as = props.as,
+    Component = _props$as === void 0 ? 'div' : _props$as,
+    _props$classPrefix = props.classPrefix,
+    classPrefix = _props$classPrefix === void 0 ? 'search-box' : _props$classPrefix,
+    value = props.value,
+    className = props.className,
+    placeholder = props.placeholder,
+    inputRef = props.inputRef,
+    onChange = props.onChange,
+    rest = _objectWithoutPropertiesLoose(props, ["as", "classPrefix", "value", "className", "placeholder", "inputRef", "onChange"]);
+  var _useClassNames = useClassNames(classPrefix),
+    withClassPrefix = _useClassNames.withClassPrefix,
+    merge = _useClassNames.merge,
+    prefix = _useClassNames.prefix;
+  var classes = merge(className, withClassPrefix());
+  return /*#__PURE__*/React.createElement(Component, _extends({}, rest, {
+    ref: ref,
+    className: classes
+  }), /*#__PURE__*/React.createElement(InputGroup, {
+    inside: true
+  }, /*#__PURE__*/React.createElement(Input, {
+    role: "searchbox",
+    className: prefix(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["input"]))),
+    value: value,
+    onChange: onChange,
+    placeholder: placeholder,
+    ref: inputRef
+  }), /*#__PURE__*/React.createElement(InputGroup.Addon, null, /*#__PURE__*/React.createElement(Search, {
+    className: prefix(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["icon"])))
+  }))));
+});
+SearchBox.displayName = 'SearchBox';
+export default SearchBox;

package/esm/internals/SearchBox/index.d.ts

@@ -0,0 +1,2 @@
+import SearchBox from './SearchBox';
+export default SearchBox;

package/esm/internals/SearchBox/index.js

@@ -0,0 +1,3 @@
+'use client';
+import SearchBox from './SearchBox';
+export default SearchBox;

package/esm/{Windowing → internals/Windowing}/AutoSizer.js

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 import React, { useState, useRef } from 'react';
 import { useCallback } from 'react';
 import getStyle from 'dom-lib/getStyle';
-import { mergeRefs, useElementResize, useMount } from '../utils';
+import { mergeRefs, useElementResize, useMount } from '../../utils';
 /**
  * High-order component that automatically adjusts the width and height of a single child.
  *

package/esm/{Windowing → internals/Windowing}/List.d.ts

@@ -1,5 +1,5 @@
 import { VariableSizeList, ListItemKeySelector, ListOnScrollProps, ListOnItemsRenderedProps } from 'react-window';
-import { WithAsProps, RsRefForwardingComponent } from '../@types/common';
+import { WithAsProps, RsRefForwardingComponent } from '../../@types/common';
 export interface ListProps<T = any> extends WithAsProps {
     /**
      * @deprecated use itemSize instead

package/esm/{Windowing → internals/Windowing}/List.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useRef, useImperativeHandle, useCallback, useMemo } from 'react';
 import { VariableSizeList } from 'react-window';
-import { useCustom } from '../utils';
+import { useCustom } from '../../utils';
 /**
  * This component renders a virtualized list of elements with either fixed or dynamic heights.
  *

package/esm/internals/index.js

@@ -0,0 +1 @@
+'use client';

package/esm/{utils → internals/propTypes}/deprecatePropType.js

@@ -1,7 +1,7 @@
 'use client';
 // Ref: https://github.com/thefrontside/deprecated-prop-type/blob/master/deprecated.js
 
-import warnOnce from './warnOnce';
+import warnOnce from '../../utils/warnOnce';
 
 /**
  * Prints deprecation message when user uses a deprecated prop

package/esm/{utils/propTypeChecker.d.ts → internals/propTypes/index.d.ts}

@@ -1,3 +1,5 @@
 import PropTypes from 'prop-types';
+export { default as oneOf } from './oneOf';
+export { default as deprecatePropType, deprecatePropTypeNew } from './deprecatePropType';
 export declare function tupleType<T>(...typeCheckers: any[]): PropTypes.Requireable<T>;
 export declare const refType: PropTypes.Requireable<any>;

package/esm/{utils/propTypeChecker.js → internals/propTypes/index.js}

@@ -1,5 +1,7 @@
 'use client';
 import PropTypes from 'prop-types';
+export { default as oneOf } from './oneOf';
+export { default as deprecatePropType, deprecatePropTypeNew } from './deprecatePropType';
 export function tupleType() {
   for (var _len = arguments.length, typeCheckers = new Array(_len), _key = 0; _key < _len; _key++) {
     typeCheckers[_key] = arguments[_key];

package/esm/internals/propTypes/oneOf.d.ts

@@ -0,0 +1,3 @@
+import PropTypes from 'prop-types';
+declare const oneOf: typeof PropTypes.oneOf;
+export default oneOf;

package/esm/internals/propTypes/oneOf.js

@@ -0,0 +1,13 @@
+'use client';
+import PropTypes from 'prop-types';
+var oneOf = function oneOf(arr) {
+  var checkType = PropTypes.oneOf(arr);
+
+  // for [storybook/utils/propTypesToArgType.ts]
+  checkType._argType_ = {
+    type: 'oneOf',
+    value: arr
+  };
+  return checkType;
+};
+export default oneOf;

package/esm/utils/ReactChildren.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 export declare function find(children: React.ReactNode, func: any, context?: any): React.ReactNode;
 export declare function map(children: React.ReactNode, func: any, context?: any): any[] | null | undefined;
 export declare function mapCloneElement(children: React.ReactNode, func: any, context?: any): any[] | null | undefined;
-export declare function count(children: React.ReactChildren): number;
+export declare function count(children: React.ReactNode): number;
 declare function some(children: React.ReactNode, func: any, context?: any): boolean;
 declare const _default: {
     mapCloneElement: typeof mapCloneElement;

package/esm/utils/ReactChildren.js

@@ -26,8 +26,21 @@ export function map(children, func, context) {
     return handle;
   });
 }
+function typeOf(object) {
+  if (typeof object === 'object' && object !== null) {
+    return object.type || object.$$typeof;
+  }
+}
+function isFragment(children) {
+  return React.Children.count(children) === 1 && typeOf(children) === Symbol.for('react.fragment');
+}
 export function mapCloneElement(children, func, context) {
-  return map(children, function (child, index) {
+  var elements = children;
+  if (isFragment(children)) {
+    var _props;
+    elements = (_props = children.props) === null || _props === void 0 ? void 0 : _props.children;
+  }
+  return map(elements, function (child, index) {
     return /*#__PURE__*/React.cloneElement(child, _extends({
       key: index
     }, func(child, index)));

package/esm/utils/dateUtils.js

@@ -8,6 +8,7 @@ import getMinutes from 'date-fns/getMinutes';
 import getSeconds from 'date-fns/getSeconds';
 import addDays from 'date-fns/addDays';
 import set from 'date-fns/set';
+import isValid from 'date-fns/isValid';
 export { default as addDays } from 'date-fns/addDays';
 export { default as addMonths } from 'date-fns/addMonths';
 export { default as addYears } from 'date-fns/addYears';
@@ -137,6 +138,9 @@ export function getMonthView(monthDate, isoWeek) {
 export function copyTime(_ref) {
   var from = _ref.from,
     to = _ref.to;
+  if (!isValid(from) || !isValid(to)) {
+    return to;
+  }
   return set(to, {
     hours: getHours(from),
     minutes: getMinutes(from),

package/esm/utils/index.d.ts

@@ -2,7 +2,6 @@ export * from './BrowserDetection';
 export * from './htmlPropsUtils';
 export * from './constants';
 export * as DateUtils from './dateUtils';
-export * as TypeChecker from './propTypeChecker';
 export * from './statusIcons';
 export { default as guid } from './guid';
 export { default as prefix, defaultClassPrefix, getClassNamePrefix, globalKey } from './prefix';

package/esm/utils/index.js

@@ -4,8 +4,6 @@ export * from './htmlPropsUtils';
 export * from './constants';
 import * as _DateUtils from './dateUtils';
 export { _DateUtils as DateUtils };
-import * as _TypeChecker from './propTypeChecker';
-export { _TypeChecker as TypeChecker };
 export * from './statusIcons';
 export { default as guid } from './guid';
 export { default as prefix, defaultClassPrefix, getClassNamePrefix, globalKey } from './prefix';

package/esm/utils/treeUtils.d.ts

@@ -3,7 +3,7 @@ import { TreeNodeType, TreeNodesType } from '../CheckTreePicker/utils';
 import { TREE_NODE_DROP_POSITION } from '../utils';
 import { CheckTreePickerProps } from '../CheckTreePicker/CheckTreePicker';
 import { TreePickerProps } from '../TreePicker/TreePicker';
-import { ListHandle } from '../Windowing';
+import { ListHandle } from '../internals/Windowing';
 declare type PartialTreeProps = Partial<TreePickerProps | CheckTreePickerProps>;
 /**
  * according node parentNode expand state decide node whether to show

package/esm/utils/treeUtils.js

@@ -14,7 +14,7 @@ import React, { useRef, useState, useEffect, useCallback } from 'react';
 import shallowEqualArray from '../utils/shallowEqualArray';
 import { getNodeCheckState } from '../CheckTreePicker/utils';
 import { TREE_NODE_DROP_POSITION, shallowEqual } from '../utils';
-import { shouldDisplay } from '../Picker';
+import { shouldDisplay } from '../internals/Picker';
 import reactToString from './reactToString';
 import { TREE_NODE_PADDING, TREE_NODE_ROOT_PADDING } from './constants';
 import { attachParent } from './attachParent';

package/esm/utils/useUniqueId.js

@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import uniqueId from 'lodash/uniqueId';
-var reactUseId = React['useId' + ''];
+var reactUseId = React['useId'.toString()];
 
 /**
  * Used for generating unique ID for DOM elements

package/{CloseButton → internals/CloseButton}/styles/index.less

@@ -1,4 +1,4 @@
-@import '../../styles/common';
+@import '../../../styles/common';
 
 // Close button
 .rs-btn-close {

package/{Picker → internals/Picker}/styles/index.less

@@ -1,9 +1,14 @@
-@import '../../styles/common.less';
-@import '../../styles/mixins/listbox.less';
-@import '../../styles/mixins/combobox.less';
-@import (reference) '../../Button/styles/index.less';
-@import '../../Form/styles/mixin.less';
-@import 'mixin.less';
+@import '../../../styles/common.less';
+@import '../../../Button/styles/index.less';
+@import '../../../styles/mixins/listbox.less';
+@import '../../../styles/mixins/combobox.less';
+@import '../../../Stack/styles/index.less';
+@import '../../../Form/styles/mixin.less';
+@import '../../CloseButton/styles/index.less';
+@import '../../../Loader/styles/index.less';
+@import '../../../Input/styles/index.less';
+@import '../../../InputGroup/styles/index.less';
+@import './mixin.less';
 
 //
 // Pickers
@@ -145,7 +150,6 @@
   }
 }
 
-.rs-btn,
 .rs-picker-toggle {
   .rs-picker-default & {
     transition: @picker-transition;
@@ -230,8 +234,11 @@
   .picker-default-toggle();
   .picker-subtle-toggle();
 
-  width: 100%;
-  text-align: left;
+  &.rs-btn {
+    width: 100%;
+    text-align: left;
+  }
+
   .ellipsis();
 
   &-label {
@@ -299,6 +306,7 @@
   transition: none;
   display: flex;
   flex-direction: column;
+  padding: @border-radius 0;
 
   .high-contrast-mode({
     border: 1px solid var(--rs-border-primary);
@@ -314,44 +322,15 @@
     z-index: (@zindex-drawer + @zindex-picker-toggle);
   }
 
-  // Select picker menu & Check select picker menu always has 6px gap
-  &.rs-picker-select-menu,
-  &.rs-picker-check-menu {
-    padding-top: @border-radius;
-  }
-
-  // Searchbar
-  .rs-picker-search-bar {
-    position: relative;
-    padding: (@picker-menu-padding - @border-radius) @picker-menu-padding @picker-menu-padding;
-
-    .rs-picker-search-bar-input {
-      .default-input();
-
-      min-width: @picker-content-min-width;
-      padding-right: @picker-search-bar-icon-width + (@input-padding-x - @input-border-width) * 2;
-    }
-
-    .rs-picker-search-bar-search-icon {
-      position: absolute;
-      width: @picker-search-bar-icon-width;
-      color: var(--rs-text-secondary);
-      font-size: @font-size-base;
-      height: @line-height-computed;
-      top: (@picker-menu-padding - @border-radius + @input-padding-y);
-      right: (@picker-menu-padding + @input-padding-x);
-
-      .rs-@{tree-picker-prefix}-menu&,
-      .rs-@{check-tree-picker-prefix}-menu& {
-        top: (@input-padding-y - @input-border-width);
-      }
-    }
-  }
-
   &.rs-picker-inline {
     position: relative;
     box-shadow: none;
   }
+
+  .rs-search-box {
+    padding: (@picker-menu-padding - @border-radius) @picker-menu-padding
+      (@picker-menu-padding - @border-radius);
+  }
 }
 
 // Make sure styles the same with <Input>

package/{Picker → internals/Picker}/styles/mixin.less

@@ -1,11 +1,9 @@
-@import '../../styles/variables';
-@import '../../styles/mixins/color-modes';
-@import '../../Dropdown/styles/mixin';
+@import '../../../styles/variables.less';
+@import '../../../styles/mixins/color-modes.less';
+@import '../../../Dropdown/styles/mixin.less';
 
 // Picker Menu items common styles
 .picker-menu-items-reset() {
-  // Set aside border-radius borders
-  margin-bottom: @border-radius;
   overflow-y: auto;
 
   ul {

package/{Ripple → internals/Ripple}/styles/index.less

@@ -1,4 +1,4 @@
-@import '../../styles/common';
+@import '../../../styles/common';
 
 .rs-ripple {
   position: absolute;

package/internals/SearchBox/styles/index.less

@@ -0,0 +1,11 @@
+@import '../../../styles/common.less';
+@import '../../../Input/styles/index.less';
+@import '../../../InputGroup/styles/index.less';
+
+.rs-search-box {
+  position: relative;
+
+  &-icon {
+    color: var(--rs-text-secondary);
+  }
+}

package/internals/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/internals",
+  "private": true,
+  "main": "../cjs/internals/index.js",
+  "module": "../esm/internals/index.js",
+  "types": "../esm/internals/index.d.ts"
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rsuite",
-  "version": "5.51.0",
+  "version": "5.52.0",
   "description": "A suite of react components",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/styles/color-modes/dark.less

@@ -366,4 +366,44 @@
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+
+  // CSS relative color syntax is not supported
+  // https://developer.chrome.com/blog/css-relative-color-syntax/
+  @supports not (color: rgb(from white r g b)) {
+    // Misc
+    --rs-bg-backdrop: fade(@B900-dark, 80%);
+    --rs-color-focus-ring: 0 0 0 3px fade(@H500-dark, 25%);
+    --rs-state-focus-shadow: 0 0 0 3px fade(@H500-dark, 25%);
+    --rs-state-focus-outline: 3px solid fade(@H500-dark, 25%);
+
+    // Loader
+    --rs-loader-ring: fade(@B050-dark, 30);
+    --rs-loader-backdrop: fade(@B900-dark, 83%);
+    --rs-loader-ring-inverse: fade(@B050-dark, 80);
+    --rs-loader-backdrop-inverse: fade(@B000-dark, 90);
+
+    // Dropdown
+    --rs-dropdown-item-bg-active: fade(@H900-dark, 20);
+
+    // ARIA Listboxes
+    --rs-listbox-option-selected-bg: fade(@H900-dark, 20%);
+
+    // Slider
+    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-dark, 25);
+
+    // Uploader
+    --rs-uploader-overlay-bg: fade(@B600-dark, 80);
+
+    // Carousel
+    --rs-carousel-indicator: fade(@B000-dark, 40);
+
+    // List
+    --rs-list-placeholder-bg: fade(@H900-dark, 20%);
+
+    // Calendar
+    --rs-calendar-range-bg: fade(@H900-dark, 50%);
+
+    // Placeholder
+    --rs-placeholder-active: lighten(@B600-dark, 5%);
+  }
 }

package/styles/color-modes/high-contrast.less

@@ -382,4 +382,39 @@
 
   // Popover
   --rs-popover-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+
+  // CSS relative color syntax is not supported
+  // https://developer.chrome.com/blog/css-relative-color-syntax/
+  @supports not (color: rgb(from white r g b)) {
+    // Misc
+    --rs-bg-backdrop: fade(@B900-high-contrast, 80%);
+    --rs-state-focus-outline: 3px solid fade(@H500-high-contrast, 25%);
+
+    // Loader
+    --rs-loader-ring: fade(@B050-high-contrast, 30);
+    --rs-loader-backdrop: fade(@B900-high-contrast, 83%);
+    --rs-loader-ring-inverse: fade(@B050-high-contrast, 80);
+    --rs-loader-backdrop-inverse: fade(@B000-high-contrast, 90);
+
+    // Dropdown
+    --rs-dropdown-item-bg-active: fade(@H900-high-contrast, 20);
+
+    // Slider
+    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500-high-contrast, 25);
+
+    // Uploader
+    --rs-uploader-overlay-bg: fade(@B600-high-contrast, 80);
+
+    // Carousel
+    --rs-carousel-indicator: fade(@B000-high-contrast, 40);
+
+    // List
+    --rs-list-placeholder-bg: fade(@H900-high-contrast, 20%);
+
+    // Calendar
+    --rs-calendar-range-bg: fade(@H900-high-contrast, 50%);
+
+    // Placeholder
+    --rs-placeholder-active: lighten(@B600-high-contrast, 5%);
+  }
 }

package/styles/color-modes/light.less

@@ -376,4 +376,50 @@
 
   // Popover
   --rs-popover-shadow: 0 1px 8px rgba(0, 0, 0, 0.12);
+
+  // CSS relative color syntax is not supported
+  // https://developer.chrome.com/blog/css-relative-color-syntax/
+  @supports not (color: rgb(from white r g b)) {
+    // Misc
+    --rs-bg-backdrop: fade(@B900, 30%);
+    --rs-color-focus-ring: fade(@H500, 25%);
+    --rs-state-focus-shadow: 0 0 0 3px fade(@H500, 25%);
+    --rs-state-focus-outline: 3px solid fade(@H500, 25%);
+
+    // Loader
+    --rs-loader-ring: fade(@B050, 80);
+    --rs-loader-backdrop: fade(@B000, 90%);
+    --rs-loader-ring-inverse: fade(@B050, 30%);
+    --rs-loader-backdrop-inverse: fade(@B900, 83%);
+
+    // Dropdown
+    --rs-dropdown-item-bg-hover: fade(@H100, 50%);
+
+    // ARIA menu
+    --rs-menuitem-active-bg: fade(@H100, 50);
+
+    // ARIA Listboxes
+    --rs-listbox-option-hover-bg: fade(@H100, 50%);
+
+    // Toggle
+    --rs-toggle-loader-ring: fade(@B050, 30%);
+
+    // Slider
+    --rs-slider-thumb-hover-shadow: 0 0 0 8px fade(@H500, 25%);
+
+    // Uploader
+    --rs-uploader-overlay-bg: fade(#fff, 80);
+
+    // Carousel
+    --rs-carousel-indicator: fade(@B000, 40);
+
+    // List
+    --rs-list-placeholder-bg: fade(@H050, 50%);
+
+    // Table
+    --rs-table-scrollbar-vertical-track: fade(@B200, 40%);
+
+    // Calendar
+    --rs-calendar-range-bg: fade(@H100, 50%);
+  }
 }

package/styles/index.less

@@ -32,6 +32,8 @@
 @import '../FormGroup/styles/index';
 @import '../FormErrorMessage/styles/index';
 @import '../Grid/styles/index';
+@import '../Row/styles/index';
+@import '../Col/styles/index';
 @import '../Header/styles/index';
 @import '../FormHelpText/styles/index';
 @import '../IconButton/styles/index';
@@ -50,15 +52,12 @@
 @import '../Pagination/styles/index';
 @import '../Panel/styles/index';
 @import '../PanelGroup/styles/index';
-@import '../Picker/styles/index';
 @import '../Placeholder/styles/index';
 @import '../Popover/styles/index';
 @import '../Progress/styles/index';
 @import '../Radio/styles/index';
 @import '../RadioGroup/styles/index';
 @import '../RadioTile/styles/index';
-@import '../Ripple/styles/index';
-@import '../Row/styles/index';
 @import '../SelectPicker/styles/index';
 @import '../Sidebar/styles/index';
 @import '../Sidenav/styles/index';
@@ -66,6 +65,7 @@
 @import '../Steps/styles/index';
 @import '../Table/styles/index';
 @import '../Tag/styles/index';
+@import '../TagGroup/styles/index';
 @import '../TagPicker/styles/index';
 @import '../TagInput/styles/index';
 @import '../Timeline/styles/index';
@@ -75,5 +75,11 @@
 @import '../Uploader/styles/index';
 @import '../Rate/styles/index';
 @import '../toaster/styles/index';
-@import '../CloseButton/styles/index';
 @import '../Stack/styles/index';
+@import '../VisuallyHidden/styles/index';
+
+// Internal Components
+@import '../internals/Ripple/styles/index';
+@import '../internals/CloseButton/styles/index';
+@import '../internals/Picker/styles/index';
+@import '../internals/SearchBox/styles/index';

package/styles/variables.less

@@ -713,7 +713,6 @@
 
 // Picker content width
 @picker-content-min-width:            200px;
-@picker-search-bar-icon-width:        @font-size-base;
 @picker-default-toggle-border-width:  1px;
 @picker-toggle-clean-width:           12px;
 @picker-toggle-clean-right:           30px;