rsuite 5.6.6 → 5.8.0

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# [5.8.0](https://github.com/rsuite/rsuite/compare/v5.7.1...v5.8.0) (2022-04-07)
+
+### Bug Fixes
+
+- **RangeSlider:** fix RangeSlider progress bar misalignment ([#2435](https://github.com/rsuite/rsuite/issues/2435)) ([e612ee3](https://github.com/rsuite/rsuite/commit/e612ee3b6bb97217ad08744c6b57b47e21397944))
+- **SelectPicker:** call onSearch with empty string when closed ([#2411](https://github.com/rsuite/rsuite/issues/2411)) ([c6e5d54](https://github.com/rsuite/rsuite/commit/c6e5d54bdda0cdc61b65fbed78518ccef5d7672f))
+- **Toggle:** add missing properties to onChange event target ([#2422](https://github.com/rsuite/rsuite/issues/2422)) ([5d1d5a2](https://github.com/rsuite/rsuite/commit/5d1d5a29a03f642c88aa66851163c9bb20d69684))
+
+### Features
+
+- **Cascader:** add `renderSearchItem` for customizing search result ([#2427](https://github.com/rsuite/rsuite/issues/2427)) ([e1b1dbd](https://github.com/rsuite/rsuite/commit/e1b1dbd2fd6cde10dfb1e041d9483b6748a0855f))
+- **DateRangePicker:** export type definition ([#2434](https://github.com/rsuite/rsuite/issues/2434)) ([76e4bc3](https://github.com/rsuite/rsuite/commit/76e4bc38e8e939ae6ffbcf5bc154281b4ec9360c))
+
+## [5.7.1](https://github.com/rsuite/rsuite/compare/v5.7.0...v5.7.1) (2022-04-02)
+
+### Bug Fixes
+
+- **Checkbox:** correct checked state in onChange callback ([#2430](https://github.com/rsuite/rsuite/issues/2430)) ([c6819f9](https://github.com/rsuite/rsuite/commit/c6819f98fe33e197376ecd1e301eaa471c6c2178))
+
+# [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

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

@@ -75,6 +75,7 @@ var Cascader = /*#__PURE__*/_react.default.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,
@@ -87,7 +88,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onClose = props.onClose,
       onOpen = props.onOpen,
       getChildren = props.getChildren,
-      rest = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _react.useState)(false),
       active = _useState[0],
@@ -380,6 +381,12 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       'cascader-row-disabled': disabled,
       'cascader-row-focus': item[valueKey] === focusItemValue
     });
+    var label = formattedNodes.map(function (node, index) {
+      return /*#__PURE__*/_react.default.createElement("span", {
+        key: "col-" + index,
+        className: prefix('cascader-col')
+      }, node[labelKey]);
+    });
     return /*#__PURE__*/_react.default.createElement("div", {
       key: key,
       "aria-disabled": disabled,
@@ -390,12 +397,7 @@ var Cascader = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
           handleSearchRowSelect(item, nodes, event);
         }
       }
-    }, formattedNodes.map(function (node, index) {
-      return /*#__PURE__*/_react.default.createElement("span", {
-        key: "col-" + index,
-        className: prefix('cascader-col')
-      }, node[labelKey]);
-    }));
+    }, renderSearchItem ? renderSearchItem(label, nodes) : label);
   };
 
   var renderSearchResultPanel = function renderSearchResultPanel() {
@@ -533,6 +535,7 @@ Cascader.propTypes = (0, _extends3.default)({}, _Picker.listPickerPropTypes, {
   onSearch: _propTypes.default.func,
   cleanable: _propTypes.default.bool,
   renderMenuItem: _propTypes.default.func,
+  renderSearchItem: _propTypes.default.func,
   menuWidth: _propTypes.default.number,
   menuHeight: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   searchable: _propTypes.default.bool,

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

@@ -278,7 +278,9 @@ var RangeSlider = /*#__PURE__*/_react.default.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/cjs/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/cjs/SelectPicker/SelectPicker.js

@@ -202,8 +202,9 @@ var SelectPicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var handleExited = (0, _react.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 = (0, _react.useCallback)(function () {
     setActive(true);
     setFocusItemValue(value);

package/cjs/Toggle/Toggle.js

@@ -61,6 +61,11 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }));
   var inner = checked ? checkedChildren : unCheckedChildren;
   var label = checked ? locale.on : locale.off;
+
+  var _partitionHTMLProps = (0, _utils.partitionHTMLProps)(rest),
+      htmlInputProps = _partitionHTMLProps[0],
+      restProps = _partitionHTMLProps[1];
+
   var handleInputChange = (0, _react.useCallback)(function (e) {
     if (disabled || readOnly || loading) {
       return;
@@ -78,7 +83,7 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   return /*#__PURE__*/_react.default.createElement("label", (0, _extends2.default)({
     ref: ref,
     className: classes
-  }, rest), /*#__PURE__*/_react.default.createElement("input", {
+  }, restProps), /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, htmlInputProps, {
     ref: inputRef,
     type: "checkbox",
     checked: checkedProp,
@@ -92,7 +97,7 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     "aria-disabled": disabled,
     "aria-label": typeof inner === 'string' ? inner : label,
     "aria-busy": loading || undefined
-  }), /*#__PURE__*/_react.default.createElement(Component, {
+  })), /*#__PURE__*/_react.default.createElement(Component, {
     className: prefix('presentation')
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: prefix('inner')

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"));