rsuite 5.6.4 → 5.7.0

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/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/InputNumber/InputNumber.js

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

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/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/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/esm/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/esm/utils/getDataGroupBy.js

@@ -1,3 +1,4 @@
+import _get from "lodash/get";
 import { flattenTree } from '../utils/treeUtils';
 var hasSymbol = typeof Symbol === 'function';
 export var KEY_GROUP = hasSymbol ? Symbol('_$grouped') : '_$grouped';
@@ -10,11 +11,17 @@ export default 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 = _get(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;

package/package.json

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