rsuite 5.6.4 → 5.7.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [5.7.0](https://github.com/rsuite/rsuite/compare/v5.6.6...v5.7.0) (2022-03-31)
+
+### Bug Fixes
+
+- **Checkbox:** set checked attribute on underlying input ([#2419](https://github.com/rsuite/rsuite/issues/2419)) ([5ded872](https://github.com/rsuite/rsuite/commit/5ded8720c70c1fe4aee3941a81c0d7ec3b0c7423))
+- **Dropdown:** Fix menu item hover highlight ([#2415](https://github.com/rsuite/rsuite/issues/2415)) ([59453cc](https://github.com/rsuite/rsuite/commit/59453cc0c3c6f648b2797c48473c22104e579b4a))
+- **Dropdown:** Fixed Triggering onSelect twice on Dropdown Menu ([#2414](https://github.com/rsuite/rsuite/issues/2414)) ([e09eee5](https://github.com/rsuite/rsuite/commit/e09eee5f6dac88816ecbf8d20f3bb1b78f4afa71))
+
+### Features
+
+- **Form:** export useFormClassNames hook ([#2420](https://github.com/rsuite/rsuite/issues/2420)) ([7e2bb85](https://github.com/rsuite/rsuite/commit/7e2bb8548103117a2df004f367fbde6609fcc216))
+
+## [5.6.6](https://github.com/rsuite/rsuite/compare/v5.6.5...v5.6.6) (2022-03-24)
+
+### Bug Fixes
+
+- **InputNumber:** make plus/minus buttons unfocusable ([#2398](https://github.com/rsuite/rsuite/issues/2398)) ([ab4c721](https://github.com/rsuite/rsuite/commit/ab4c7218f20fd6aa6f4bad7818d403a3b6fd68df))
+- **Uploader:** expose missing public types ([#2404](https://github.com/rsuite/rsuite/issues/2404)) ([5b1791f](https://github.com/rsuite/rsuite/commit/5b1791f0f0b23a230d03772178e9069bc16c8aa9))
+
+## [5.6.5](https://github.com/rsuite/rsuite/compare/v5.6.4...v5.6.5) (2022-03-17)
+
+### Features
+
+- **Pickers:** `groupBy` supports dot notation ([#2397](https://github.com/rsuite/rsuite/issues/2397)) ([2ba7c0b](https://github.com/rsuite/rsuite/commit/2ba7c0b622c68b2fc526aa7ad2feaa8e73767e9c))
+
 ## [5.6.4](https://github.com/rsuite/rsuite/compare/v5.6.3...v5.6.4) (2022-03-10)
 
 ### Bug Fixes

package/cjs/Checkbox/Checkbox.js

@@ -24,15 +24,15 @@ var _CheckboxGroup = require("../CheckboxGroup");
 var _templateObject, _templateObject2, _templateObject3;
 
 var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  var _useContext = (0, _react.useContext)(_CheckboxGroup.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 = (0, _react.useContext)(_CheckboxGroup.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,
@@ -43,7 +43,8 @@ var Checkbox = /*#__PURE__*/_react.default.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,
@@ -65,19 +66,25 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onCheckboxClick = props.onCheckboxClick,
       onChange = props.onChange,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["as", "checked", "className", "children", "classPrefix", "checkable", "defaultChecked", "title", "inputRef", "inputProps", "indeterminate", "tabIndex", "disabled", "readOnly", "plaintext", "inline", "name", "value", "onClick", "onCheckboxClick", "onChange"]);
-  var isChecked = (0, _react.useCallback)(function () {
-    if (typeof groupValue !== 'undefined' && typeof value !== 'undefined') {
-      return groupValue.some(function (i) {
-        return i === value;
-      });
-    }
 
-    return controlledChecked;
-  }, [controlledChecked, groupValue, value]);
+  var _useControlled = (0, _utils.useControlled)(controlledChecked, defaultChecked),
+      selfChecked = _useControlled[0],
+      setSelfChecked = _useControlled[1],
+      selfControlled = _useControlled[2]; // Either <Checkbox> is checked itself or by parent <CheckboxGroup>
+
+
+  var checked = (0, _react.useMemo)(function () {
+    var _checkboxGroupContext, _checkboxGroupContext2;
 
-  var _useControlled = (0, _utils.useControlled)(isChecked(), defaultChecked),
-      checked = _useControlled[0],
-      setChecked = _useControlled[1];
+    if (!checkboxGroupContext) {
+      return selfChecked;
+    } // fixme value from group should not be nullable
+
+
+    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 = (0, _utils.useClassNames)(classPrefix),
       merge = _useClassNames.merge,
@@ -93,7 +100,11 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var _partitionHTMLProps = (0, _utils.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
@@ -101,16 +112,16 @@ var Checkbox = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
 
   var handleChange = (0, _react.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.default.createElement(Component, (0, _extends2.default)({}, restProps, {

package/cjs/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/cjs/CheckboxGroup/CheckboxGroupContext.js

@@ -7,6 +7,6 @@ exports.CheckboxGroupContext = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var CheckboxGroupContext = /*#__PURE__*/_react.default.createContext({});
+var CheckboxGroupContext = /*#__PURE__*/_react.default.createContext(void 0);
 
 exports.CheckboxGroupContext = CheckboxGroupContext;

package/cjs/Dropdown/DropdownMenu.js

@@ -111,15 +111,7 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
       value: contextValue
     }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
-      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.default.createElement("ul", (0, _extends2.default)({
         ref: (0, _utils.mergeRefs)(menubarRef, ref),

package/cjs/Form/Form.js

@@ -21,8 +21,6 @@ var _omit = _interopRequireDefault(require("lodash/omit"));
 
 var _schemaTyped = require("schema-typed");
 
-var _utils = require("../utils");
-
 var _FormContext = _interopRequireWildcard(require("./FormContext"));
 
 var _FormControl = _interopRequireDefault(require("../FormControl"));
@@ -35,6 +33,8 @@ var _FormGroup = _interopRequireDefault(require("../FormGroup"));
 
 var _FormHelpText = _interopRequireDefault(require("../FormHelpText"));
 
+var _useFormClassNames = require("./useFormClassNames");
+
 var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _props$checkTrigger = props.checkTrigger,
       checkTrigger = _props$checkTrigger === void 0 ? 'change' : _props$checkTrigger,
@@ -61,16 +61,15 @@ var Form = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onError = props.onError,
       onChange = props.onChange,
       rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["checkTrigger", "classPrefix", "errorFromContext", "formDefaultValue", "formValue", "formError", "fluid", "layout", "model", "readOnly", "plaintext", "className", "children", "disabled", "onSubmit", "onCheck", "onError", "onChange"]);
-
-  var _useClassNames = (0, _utils.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 = (0, _useFormClassNames.useFormClassNames)({
+    classPrefix: classPrefix,
+    className: className,
+    fluid: fluid,
+    layout: layout,
+    readOnly: readOnly,
+    plaintext: plaintext,
+    disabled: disabled
+  });
 
   var _useState = (0, _react.useState)(formDefaultValue),
       _formValue = _useState[0],

package/cjs/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/cjs/Form/index.js

@@ -3,9 +3,18 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
+var _exportNames = {};
 exports.default = void 0;
 
 var _Form = _interopRequireDefault(require("./Form"));
 
+var _useFormClassNames = require("./useFormClassNames");
+
+Object.keys(_useFormClassNames).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _useFormClassNames[key]) return;
+  exports[key] = _useFormClassNames[key];
+});
 var _default = _Form.default;
 exports.default = _default;

package/cjs/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/cjs/Form/useFormClassNames.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useFormClassNames = useFormClassNames;
+
+var _utils = require("../utils");
+
+/**
+ * Take <Form> props and return className for <Form> styles
+ */
+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 = (0, _utils.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/cjs/InputNumber/InputNumber.js

@@ -288,11 +288,13 @@ var InputNumber = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }), prefixElement && /*#__PURE__*/_react.default.createElement(_InputGroupAddon.default, null, prefixElement), input, /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('btn-group-vertical')
   }, /*#__PURE__*/_react.default.createElement(_Button.default, {
+    tabIndex: -1,
     appearance: buttonAppearance,
     className: prefix('touchspin-up'),
     onClick: handlePlus,
     disabled: disabledUpButton || disabled || readOnly
   }, /*#__PURE__*/_react.default.createElement(_AngleUp.default, null)), /*#__PURE__*/_react.default.createElement(_Button.default, {
+    tabIndex: -1,
     appearance: buttonAppearance,
     className: prefix('touchspin-down'),
     onClick: handleMinus,

package/cjs/Menu/MenuItem.js

@@ -111,6 +111,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/cjs/Picker/DropdownMenuCheckItem.js

@@ -20,7 +20,8 @@ var _utils = require("../utils");
 var _Checkbox = _interopRequireDefault(require("../Checkbox"));
 
 var DropdownMenuCheckItem = /*#__PURE__*/_react.default.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/cjs/Uploader/index.d.ts

@@ -1,3 +1,3 @@
 import Uploader from './Uploader';
-export type { UploaderProps } from './Uploader';
+export type { UploaderProps, FileStatusType, FileType } from './Uploader';
 export default Uploader;

package/cjs/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/cjs/index.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
-exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DatePicker = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
+exports.useFormClassNames = exports.CustomProvider = exports.Affix = exports.DOMHelper = exports.Animation = exports.Schema = exports.Stack = exports.Divider = exports.Footer = exports.Sidebar = exports.Header = exports.Content = exports.Container = exports.FlexboxGrid = exports.Col = exports.Row = exports.Grid = exports.Carousel = exports.Calendar = exports.List = exports.TagGroup = exports.Tag = exports.Timeline = exports.Progress = exports.Table = exports.PanelGroup = exports.Panel = exports.CheckTree = exports.Tree = exports.Rate = exports.RangeSlider = exports.Slider = exports.Uploader = exports.AutoComplete = exports.DateRangePicker = exports.DatePicker = exports.MultiCascader = exports.Cascader = exports.CheckTreePicker = exports.TreePicker = exports.TagInput = exports.TagPicker = exports.InputPicker = exports.CheckPicker = exports.SelectPicker = exports.RadioGroup = exports.Radio = exports.CheckboxGroup = exports.Checkbox = exports.InputGroup = exports.InputNumber = exports.MaskedInput = exports.Input = exports.Form = exports.Toggle = exports.Steps = exports.Pagination = exports.Breadcrumb = exports.Sidenav = exports.Navbar = exports.Nav = exports.Dropdown = exports.toaster = exports.AvatarGroup = exports.Avatar = exports.Badge = exports.Placeholder = exports.SafeAnchor = exports.Loader = exports.Drawer = exports.Message = exports.Notification = exports.Modal = exports.Popover = exports.Tooltip = exports.Whisper = exports.ButtonGroup = exports.ButtonToolbar = exports.IconButton = exports.Button = void 0;
 
 var _Button = _interopRequireDefault(require("./Button"));
 
@@ -109,9 +111,10 @@ var _Toggle = _interopRequireDefault(require("./Toggle"));
 
 exports.Toggle = _Toggle.default;
 
-var _Form = _interopRequireDefault(require("./Form"));
+var _Form = _interopRequireWildcard(require("./Form"));
 
 exports.Form = _Form.default;
+exports.useFormClassNames = _Form.useFormClassNames;
 
 var _Input = _interopRequireDefault(require("./Input"));
 

package/cjs/utils/getDataGroupBy.d.ts

@@ -1,3 +1,3 @@
 export declare const KEY_GROUP: string | symbol;
 export declare const KEY_GROUP_TITLE = "groupTitle";
-export default function getDataGroupBy(data: any[] | undefined, key: string, sort: any): any[];
+export default function getDataGroupBy(data: any[] | undefined, key: string, sort?: any): any[];

package/cjs/utils/getDataGroupBy.js

@@ -1,9 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 exports.__esModule = true;
 exports.default = getDataGroupBy;
 exports.KEY_GROUP_TITLE = exports.KEY_GROUP = void 0;
 
+var _get2 = _interopRequireDefault(require("lodash/get"));
+
 var _treeUtils = require("../utils/treeUtils");
 
 var hasSymbol = typeof Symbol === 'function';
@@ -20,11 +24,17 @@ function getDataGroupBy(data, key, sort) {
   var tempData = {};
   var isSort = typeof sort === 'function';
   data.forEach(function (item) {
-    if (!tempData[item[key]]) {
-      tempData[item[key]] = [];
+    // this will allow getting data using dot notation
+    // i.e groupBy="country.name" as country will be a nested object
+    // to the item and the name will be nested key to the country object
+    // can be used with values in arrays, i.e groupBy="addresses.0.country.name"
+    var groupByValue = (0, _get2.default)(item, key, '');
+
+    if (!tempData[groupByValue]) {
+      tempData[groupByValue] = [];
     }
 
-    tempData[item[key]].push(item);
+    tempData[groupByValue].push(item);
   });
   var nextData = Object.entries(tempData).map(function (_ref) {
     var _ref2;