rsuite 5.6.6 → 5.8.0

package/esm/Cascader/Cascader.d.ts

@@ -18,6 +18,8 @@ export interface CascaderProps<T = ValueType> extends FormControlPickerProps<T |
     renderMenu?: (items: ItemDataType[], menu: React.ReactNode, parentNode?: any, layer?: number) => React.ReactNode;
     /** Custom render menu items */
     renderMenuItem?: (itemLabel: React.ReactNode, item: ItemDataType) => React.ReactNode;
+    /** Custom render search items */
+    renderSearchItem?: (itemLabel: React.ReactNode, items: ItemDataType[]) => React.ReactNode;
     /** Custom render selected items */
     renderValue?: (value: T, selectedPaths: ItemDataType[], selectedElement: React.ReactNode) => React.ReactNode;
     /** Called when the option is selected */

package/esm/Cascader/Cascader.js

@@ -51,6 +51,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       placement = _props$placement === void 0 ? 'bottomStart' : _props$placement,
       id = props.id,
       renderMenuItem = props.renderMenuItem,
+      renderSearchItem = props.renderSearchItem,
       renderValue = props.renderValue,
       renderMenu = props.renderMenu,
       renderExtraFooter = props.renderExtraFooter,
@@ -63,7 +64,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onClose = props.onClose,
       onOpen = props.onOpen,
       getChildren = props.getChildren,
-      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "classPrefix", "childrenKey", "valueKey", "labelKey", "defaultValue", "placeholder", "disabled", "disabledItemValues", "appearance", "cleanable", "locale", "toggleAs", "style", "value", "inline", "menuClassName", "menuStyle", "menuWidth", "menuHeight", "searchable", "parentSelectable", "placement", "id", "renderMenuItem", "renderValue", "renderMenu", "renderExtraFooter", "onEnter", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "getChildren"]); // Use component active state to support keyboard events.
+      rest = _objectWithoutPropertiesLoose(props, ["as", "data", "classPrefix", "childrenKey", "valueKey", "labelKey", "defaultValue", "placeholder", "disabled", "disabledItemValues", "appearance", "cleanable", "locale", "toggleAs", "style", "value", "inline", "menuClassName", "menuStyle", "menuWidth", "menuHeight", "searchable", "parentSelectable", "placement", "id", "renderMenuItem", "renderSearchItem", "renderValue", "renderMenu", "renderExtraFooter", "onEnter", "onExited", "onClean", "onChange", "onSelect", "onSearch", "onClose", "onOpen", "getChildren"]); // Use component active state to support keyboard events.
 
 
   var _useState = useState(false),
@@ -357,6 +358,12 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
       'cascader-row-disabled': disabled,
       'cascader-row-focus': item[valueKey] === focusItemValue
     });
+    var label = formattedNodes.map(function (node, index) {
+      return /*#__PURE__*/React.createElement("span", {
+        key: "col-" + index,
+        className: prefix('cascader-col')
+      }, node[labelKey]);
+    });
     return /*#__PURE__*/React.createElement("div", {
       key: key,
       "aria-disabled": disabled,
@@ -367,12 +374,7 @@ var Cascader = /*#__PURE__*/React.forwardRef(function (props, ref) {
           handleSearchRowSelect(item, nodes, event);
         }
       }
-    }, formattedNodes.map(function (node, index) {
-      return /*#__PURE__*/React.createElement("span", {
-        key: "col-" + index,
-        className: prefix('cascader-col')
-      }, node[labelKey]);
-    }));
+    }, renderSearchItem ? renderSearchItem(label, nodes) : label);
   };
 
   var renderSearchResultPanel = function renderSearchResultPanel() {
@@ -510,6 +512,7 @@ Cascader.propTypes = _extends({}, listPickerPropTypes, {
   onSearch: PropTypes.func,
   cleanable: PropTypes.bool,
   renderMenuItem: PropTypes.func,
+  renderSearchItem: PropTypes.func,
   menuWidth: PropTypes.number,
   menuHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   searchable: PropTypes.bool,

package/esm/Checkbox/Checkbox.js

@@ -4,20 +4,20 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 
 var _templateObject, _templateObject2, _templateObject3;
 
-import React, { useContext, useCallback } from 'react';
+import React, { useContext, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useControlled, partitionHTMLProps, useClassNames, TypeChecker } from '../utils';
 import { CheckboxGroupContext } from '../CheckboxGroup';
 var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _useContext = useContext(CheckboxGroupContext),
-      inlineContext = _useContext.inline,
-      nameContext = _useContext.name,
-      disabledContext = _useContext.disabled,
-      readOnlyContext = _useContext.readOnly,
-      plaintextContext = _useContext.plaintext,
-      groupValue = _useContext.value,
-      controlled = _useContext.controlled,
-      onGroupChange = _useContext.onChange;
+  var checkboxGroupContext = useContext(CheckboxGroupContext);
+
+  var _ref = checkboxGroupContext !== null && checkboxGroupContext !== void 0 ? checkboxGroupContext : {},
+      inlineContext = _ref.inline,
+      nameContext = _ref.name,
+      disabledContext = _ref.disabled,
+      readOnlyContext = _ref.readOnly,
+      plaintextContext = _ref.plaintext,
+      onGroupChange = _ref.onChange;
 
   var _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
@@ -28,7 +28,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
       classPrefix = _props$classPrefix === void 0 ? 'checkbox' : _props$classPrefix,
       _props$checkable = props.checkable,
       checkable = _props$checkable === void 0 ? true : _props$checkable,
-      defaultChecked = props.defaultChecked,
+      _props$defaultChecked = props.defaultChecked,
+      defaultChecked = _props$defaultChecked === void 0 ? false : _props$defaultChecked,
       title = props.title,
       inputRef = props.inputRef,
       inputProps = props.inputProps,
@@ -51,19 +52,24 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChange = props.onChange,
       rest = _objectWithoutPropertiesLoose(props, ["as", "checked", "className", "children", "classPrefix", "checkable", "defaultChecked", "title", "inputRef", "inputProps", "indeterminate", "tabIndex", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onClick", "onCheckboxClick", "onChange"]);
 
-  var isChecked = useCallback(function () {
-    if (typeof groupValue !== 'undefined' && typeof value !== 'undefined') {
-      return groupValue.some(function (i) {
-        return i === value;
-      });
-    }
+  var _useControlled = useControlled(controlledChecked, defaultChecked),
+      selfChecked = _useControlled[0],
+      setSelfChecked = _useControlled[1],
+      selfControlled = _useControlled[2]; // Either <Checkbox> is checked itself or by parent <CheckboxGroup>
+
+
+  var checked = useMemo(function () {
+    var _checkboxGroupContext, _checkboxGroupContext2;
 
-    return controlledChecked;
-  }, [controlledChecked, groupValue, value]);
+    if (!checkboxGroupContext) {
+      return selfChecked;
+    } // fixme value from group should not be nullable
 
-  var _useControlled = useControlled(isChecked(), defaultChecked),
-      checked = _useControlled[0],
-      setChecked = _useControlled[1];
+
+    return (_checkboxGroupContext = (_checkboxGroupContext2 = checkboxGroupContext.value) === null || _checkboxGroupContext2 === void 0 ? void 0 : _checkboxGroupContext2.some(function (checkedValue) {
+      return checkedValue === value;
+    })) !== null && _checkboxGroupContext !== void 0 ? _checkboxGroupContext : false;
+  }, [checkboxGroupContext, selfChecked, value]);
 
   var _useClassNames = useClassNames(classPrefix),
       merge = _useClassNames.merge,
@@ -79,7 +85,11 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
 
   var _partitionHTMLProps = partitionHTMLProps(rest),
       htmlInputProps = _partitionHTMLProps[0],
-      restProps = _partitionHTMLProps[1];
+      restProps = _partitionHTMLProps[1]; // If <Checkbox> is within a <CheckboxGroup>, it's bound to be controlled
+  // because its checked state is inferred from group's value, not retrieved from the DOM
+
+
+  var controlled = checkboxGroupContext ? true : selfControlled;
 
   if (typeof controlled !== 'undefined') {
     // In uncontrolled situations, use defaultChecked instead of checked
@@ -87,16 +97,16 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }
 
   var handleChange = useCallback(function (event) {
-    var nextChecked = !checked;
+    var nextChecked = event.target.checked;
 
     if (disabled || readOnly) {
       return;
     }
 
-    setChecked(nextChecked);
+    setSelfChecked(nextChecked);
     onChange === null || onChange === void 0 ? void 0 : onChange(value, nextChecked, event);
     onGroupChange === null || onGroupChange === void 0 ? void 0 : onGroupChange(value, nextChecked, event);
-  }, [checked, disabled, readOnly, setChecked, onChange, value, onGroupChange]);
+  }, [disabled, readOnly, setSelfChecked, onChange, value, onGroupChange]);
 
   if (plaintext) {
     return checked ? /*#__PURE__*/React.createElement(Component, _extends({}, restProps, {

package/esm/CheckboxGroup/CheckboxGroupContext.d.ts

@@ -10,4 +10,4 @@ export interface CheckboxGroupContextValue {
     plaintext?: boolean;
     onChange?: (value: any, checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
 }
-export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextValue>;
+export declare const CheckboxGroupContext: React.Context<CheckboxGroupContextValue | undefined>;

package/esm/CheckboxGroup/CheckboxGroupContext.js

@@ -1,2 +1,2 @@
 import React from 'react';
-export var CheckboxGroupContext = /*#__PURE__*/React.createContext({});
+export var CheckboxGroupContext = /*#__PURE__*/React.createContext(void 0);

package/esm/DateRangePicker/index.d.ts

@@ -1,3 +1,4 @@
 import DateRangePicker from './DateRangePicker';
 export type { DateRangePicker, DateRangePickerProps } from './DateRangePicker';
+export type { ValueType, DateRange, RangeType, DisabledDateFunction } from './types';
 export default DateRangePicker;

package/esm/Dropdown/DropdownMenu.js

@@ -87,15 +87,7 @@ var DropdownMenu = /*#__PURE__*/React.forwardRef(function (props, ref) {
     return /*#__PURE__*/React.createElement(DropdownContext.Provider, {
       value: contextValue
     }, /*#__PURE__*/React.createElement(Menubar, {
-      vertical: true,
-      onActivateItem: function onActivateItem(event) {
-        var _dataset = event.target.dataset,
-            eventKey = _dataset.eventKey,
-            eventKeyType = _dataset.eventKeyType; // Only cast number type for now
-
-        var eventKeyToEmit = eventKeyType === 'number' ? Number(eventKey) : eventKey;
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(eventKeyToEmit, event);
-      }
+      vertical: true
     }, function (menubar, menubarRef) {
       return /*#__PURE__*/React.createElement("ul", _extends({
         ref: mergeRefs(menubarRef, ref),

package/esm/Form/Form.js

@@ -5,13 +5,13 @@ import PropTypes from 'prop-types';
 import isUndefined from 'lodash/isUndefined';
 import omit from 'lodash/omit';
 import { SchemaModel } from 'schema-typed';
-import { useClassNames } from '../utils';
 import FormContext, { FormValueContext } from './FormContext';
 import FormControl from '../FormControl';
 import FormControlLabel from '../FormControlLabel';
 import FormErrorMessage from '../FormErrorMessage';
 import FormGroup from '../FormGroup';
 import FormHelpText from '../FormHelpText';
+import { useFormClassNames } from './useFormClassNames';
 var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _props$checkTrigger = props.checkTrigger,
       checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,
@@ -39,15 +39,15 @@ var Form = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onChange = props.onChange,
       rest = _objectWithoutPropertiesLoose(props, ["checkTrigger", "classPrefix", "errorFromContext", "formDefaultValue", "formValue", "formError", "fluid", "layout", "model", "readOnly", "plaintext", "className", "children", "disabled", "onSubmit", "onCheck", "onError", "onChange"]);
 
-  var _useClassNames = useClassNames(classPrefix),
-      withClassPrefix = _useClassNames.withClassPrefix,
-      merge = _useClassNames.merge;
-
-  var classes = merge(className, withClassPrefix(layout, fluid && layout === 'vertical' ? 'fluid' : 'fixed-width', {
-    readonly: readOnly,
-    disabled: disabled,
-    plaintext: plaintext
-  }));
+  var classes = useFormClassNames({
+    classPrefix: classPrefix,
+    className: className,
+    fluid: fluid,
+    layout: layout,
+    readOnly: readOnly,
+    plaintext: plaintext,
+    disabled: disabled
+  });
 
   var _useState = useState(formDefaultValue),
       _formValue = _useState[0],

package/esm/Form/index.d.ts

@@ -5,4 +5,5 @@ export type { FormErrorMessageProps } from '../FormErrorMessage';
 export type { FormControlLabelProps } from '../FormControlLabel';
 export type { FormHelpTextProps } from '../FormHelpText';
 export type { FormControlProps } from '../FormControl';
+export * from './useFormClassNames';
 export default Form;

package/esm/Form/index.js

@@ -1,2 +1,3 @@
 import Form from './Form';
+export * from './useFormClassNames';
 export default Form;

package/esm/Form/useFormClassNames.d.ts

@@ -0,0 +1,5 @@
+import type { FormProps } from './Form';
+/**
+ * Take <Form> props and return className for <Form> styles
+ */
+export declare function useFormClassNames({ classPrefix, className, fluid, layout, readOnly, plaintext, disabled }: Pick<FormProps, 'classPrefix' | 'className' | 'fluid' | 'layout' | 'readOnly' | 'plaintext' | 'disabled'>): string;

package/esm/Form/useFormClassNames.js

@@ -0,0 +1,26 @@
+import { useClassNames } from '../utils';
+
+/**
+ * Take <Form> props and return className for <Form> styles
+ */
+export function useFormClassNames(_ref) {
+  var _ref$classPrefix = _ref.classPrefix,
+      classPrefix = _ref$classPrefix === void 0 ? 'form' : _ref$classPrefix,
+      className = _ref.className,
+      fluid = _ref.fluid,
+      _ref$layout = _ref.layout,
+      layout = _ref$layout === void 0 ? 'vertical' : _ref$layout,
+      readOnly = _ref.readOnly,
+      plaintext = _ref.plaintext,
+      disabled = _ref.disabled;
+
+  var _useClassNames = useClassNames(classPrefix),
+      withClassPrefix = _useClassNames.withClassPrefix,
+      merge = _useClassNames.merge;
+
+  return merge(className, withClassPrefix(layout, fluid && layout === 'vertical' ? 'fluid' : 'fixed-width', {
+    readonly: readOnly,
+    disabled: disabled,
+    plaintext: plaintext
+  }));
+}

package/esm/Menu/MenuItem.js

@@ -98,6 +98,7 @@ function MenuItem(props) {
 
   if ((menuState === null || menuState === void 0 ? void 0 : menuState.role) === 'menubar') {
     menuitemProps.onMouseDown = handleMouseDown;
+    menuitemProps.onMouseOver = handleMouseMove;
   }
 
   return children(menuitemProps, menuitemRef);

package/esm/Picker/DropdownMenuCheckItem.js

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import { useClassNames } from '../utils';
 import Checkbox from '../Checkbox';
 var DropdownMenuCheckItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var active = props.active,
+  var _props$active = props.active,
+      active = _props$active === void 0 ? false : _props$active,
       _props$as = props.as,
       Component = _props$as === void 0 ? 'div' : _props$as,
       _props$checkboxAs = props.checkboxAs,

package/esm/RangeSlider/RangeSlider.js

@@ -255,7 +255,9 @@ var RangeSlider = /*#__PURE__*/React.forwardRef(function (props, ref) {
       end = v;
     }
 
-    var nextValue = getValidValue([start, end].sort());
+    var nextValue = getValidValue([start, end].sort(function (a, b) {
+      return a - b;
+    }));
 
     if (isRangeMatchingConstraint(nextValue)) {
       setValue(nextValue);

package/esm/SelectPicker/SelectPicker.d.ts

@@ -32,7 +32,7 @@ export interface SelectProps<T> {
     /** Called after clicking the group title */
     onGroupTitleClick?: (event: React.SyntheticEvent) => void;
     /** Called when searching */
-    onSearch?: (searchKeyword: string, event: React.SyntheticEvent) => void;
+    onSearch?: (searchKeyword: string, event?: React.SyntheticEvent) => void;
     /** Called when clean */
     onClean?: (event: React.SyntheticEvent) => void;
 }

package/esm/SelectPicker/SelectPicker.js

@@ -182,8 +182,9 @@ var SelectPicker = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var handleExited = useCallback(function () {
     setSearchKeyword('');
     setActive(false);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
     onClose === null || onClose === void 0 ? void 0 : onClose();
-  }, [onClose, setSearchKeyword]);
+  }, [onClose, setSearchKeyword, onSearch]);
   var handleEntered = useCallback(function () {
     setActive(true);
     setFocusItemValue(value);

package/esm/Toggle/Toggle.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import React, { useCallback, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { useClassNames, useControlled, useCustom } from '../utils';
+import { partitionHTMLProps, useClassNames, useControlled, useCustom } from '../utils';
 import Plaintext from '../Plaintext';
 import Loader from '../Loader';
 var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
@@ -46,6 +46,11 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }));
   var inner = checked ? checkedChildren : unCheckedChildren;
   var label = checked ? locale.on : locale.off;
+
+  var _partitionHTMLProps = partitionHTMLProps(rest),
+      htmlInputProps = _partitionHTMLProps[0],
+      restProps = _partitionHTMLProps[1];
+
   var handleInputChange = useCallback(function (e) {
     if (disabled || readOnly || loading) {
       return;
@@ -63,7 +68,7 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
   return /*#__PURE__*/React.createElement("label", _extends({
     ref: ref,
     className: classes
-  }, rest), /*#__PURE__*/React.createElement("input", {
+  }, restProps), /*#__PURE__*/React.createElement("input", _extends({}, htmlInputProps, {
     ref: inputRef,
     type: "checkbox",
     checked: checkedProp,
@@ -77,7 +82,7 @@ var Toggle = /*#__PURE__*/React.forwardRef(function (props, ref) {
     "aria-disabled": disabled,
     "aria-label": typeof inner === 'string' ? inner : label,
     "aria-busy": loading || undefined
-  }), /*#__PURE__*/React.createElement(Component, {
+  })), /*#__PURE__*/React.createElement(Component, {
     className: prefix('presentation')
   }, /*#__PURE__*/React.createElement("span", {
     className: prefix('inner')

package/esm/index.d.ts

@@ -50,7 +50,7 @@ export { default as Steps } from './Steps';
 export type { StepsProps, StepItemProps } from './Steps';
 export { default as Toggle } from './Toggle';
 export type { ToggleProps } from './Toggle';
-export { default as Form } from './Form';
+export { default as Form, useFormClassNames } from './Form';
 export type { FormProps, FormGroupProps, FormErrorMessageProps, FormControlLabelProps, FormHelpTextProps, FormControlProps } from './Form';
 export { default as Input } from './Input';
 export type { InputProps } from './Input';

package/esm/index.js

@@ -27,7 +27,7 @@ export { default as Pagination } from './Pagination';
 export { default as Steps } from './Steps';
 // Data enter
 export { default as Toggle } from './Toggle';
-export { default as Form } from './Form';
+export { default as Form, useFormClassNames } from './Form';
 export { default as Input } from './Input';
 export { default as MaskedInput } from './MaskedInput';
 export { default as InputNumber } from './InputNumber';

package/package.json

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