rsuite 5.4.0 → 5.4.1

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## [5.4.1](https://github.com/rsuite/rsuite/compare/v5.4.0...v5.4.1) (2021-12-23)
+
+### Bug Fixes
+
+- **Dropdown:** reduce padding in noCaret variant ([#2236](https://github.com/rsuite/rsuite/issues/2236)) ([682f883](https://github.com/rsuite/rsuite/commit/682f8830601d784452c10729a369ebe91057eddb))
+- **Sidenav:** fix missing highlight on selected dropdown items ([#2216](https://github.com/rsuite/rsuite/issues/2216)) ([8f79d4a](https://github.com/rsuite/rsuite/commit/8f79d4a8aafb123f75f420a3adf3f680386aae68))
+- **Sidenav:** prevent text wrapping when collapsing ([#2245](https://github.com/rsuite/rsuite/issues/2245)) ([4094233](https://github.com/rsuite/rsuite/commit/409423360a5226c8a0e11bbeecea0a4316c5c8e0))
+- **Toggle:** dismiss uncontrolled input warning ([#2243](https://github.com/rsuite/rsuite/issues/2243)) ([c4737d5](https://github.com/rsuite/rsuite/commit/c4737d5af2fabf88312c7ee2b84d4e9139e743f1))
+
+### Performance Improvements
+
+- **Context:** use `useMemo` to memozie the values returned to the Context Provider ([#2244](https://github.com/rsuite/rsuite/issues/2244)) ([d25a719](https://github.com/rsuite/rsuite/commit/d25a71920d38bceefcf100248173121d54be8313))
+- **DatePicker:** improve date grid a11y ([#2220](https://github.com/rsuite/rsuite/issues/2220)) ([655178e](https://github.com/rsuite/rsuite/commit/655178e05afe5e4b4619bda3a222dc753766e13b))
+
 # [5.4.0](https://github.com/rsuite/rsuite/compare/v5.3.0...v5.4.0) (2021-12-17)
 
 ### Bug Fixes

package/Dropdown/styles/index.less

@@ -81,10 +81,10 @@
     // Force set style even if has `.btn`.
     .dropdown-toggle();
   }
-}
 
-.rs-dropdown-toggle.rs-dropdown-no-caret {
-  padding-right: @padding-x;
+  &.rs-dropdown-toggle-no-caret {
+    padding-right: @padding-x;
+  }
 }
 
 // The dropdown menu (ul)

package/Sidenav/styles/index.less

@@ -378,6 +378,7 @@
     .rs-dropdown .rs-dropdown-toggle,
     .rs-dropdown-item,
     .rs-dropdown-item-submenu > .rs-dropdown-menu-toggle {
+      white-space: nowrap;
       text-overflow: clip;
     }
   }
@@ -436,7 +437,6 @@
 
 .rs-sidenav-default.rs-sidenav-collapse-in,
 .rs-sidenav-default.rs-sidenav-collapsing {
-  .rs-dropdown-item:not(.rs-dropdown-item-submenu),
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
   .rs-dropdown-item > .rs-dropdown-item-toggle {
     color: var(--rs-sidenav-default-text);
@@ -543,6 +543,7 @@
 
   // Active
   .rs-sidenav-item.rs-sidenav-item-active,
+  .rs-dropdown-item.rs-dropdown-item-active,
   .rs-dropdown.rs-dropdown-selected-within .rs-dropdown-toggle {
     color: var(--rs-sidenav-subtle-selected-text);
   }
@@ -559,7 +560,6 @@
 
 .rs-sidenav-subtle.rs-sidenav-collapse-in,
 .rs-sidenav-subtle.rs-sidenav-collapsing {
-  .rs-dropdown-item:not(.rs-dropdown-item-submenu),
   .rs-dropdown-item > .rs-dropdown-menu-toggle,
   .rs-dropdown-item > .rs-dropdown-item-toggle {
     color: var(--rs-sidenav-subtle-text);

package/cjs/AvatarGroup/AvatarGroup.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +11,7 @@ var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -41,13 +43,16 @@ var AvatarGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix({
     stack: stack
   }));
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      size: size
+    };
+  }, [size]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends3.default)({}, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement(AvatarGroupContext.Provider, {
-    value: {
-      size: size
-    }
+    value: contextValue
   }, spacing ? _react.default.Children.map(children, function (child) {
     var _extends2;
 

package/cjs/ButtonGroup/ButtonGroup.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -41,10 +43,13 @@ var ButtonGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     vertical: vertical,
     justified: justified
   }));
-  return /*#__PURE__*/_react.default.createElement(_ButtonGroupContext.default.Provider, {
-    value: {
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
       size: size
-    }
+    };
+  }, [size]);
+  return /*#__PURE__*/_react.default.createElement(_ButtonGroupContext.default.Provider, {
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     role: role,
     ref: ref,

package/cjs/Calendar/Calendar.js

@@ -77,11 +77,11 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       withClassPrefix = _useClassNames.withClassPrefix,
       merge = _useClassNames.merge;
 
-  var isDisabledDate = function isDisabledDate(date) {
+  var isDisabledDate = (0, _react.useCallback)(function (date) {
     var _disabledDate;
 
     return (_disabledDate = disabledDate === null || disabledDate === void 0 ? void 0 : disabledDate(date)) !== null && _disabledDate !== void 0 ? _disabledDate : false;
-  };
+  }, [disabledDate]);
 
   var isTimeDisabled = function isTimeDisabled(date) {
     return _utils.DateUtils.disabledTime(props, date);
@@ -117,27 +117,28 @@ var Calendar = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     'show-week-numbers': showWeekNumbers
   }));
   var timeDropdownProps = (0, _pick.default)(rest, _utils.DateUtils.calendarOnlyProps);
-  var contextValue = {
-    date: calendarDate,
-    dateRange: dateRange,
-    disabledDate: isDisabledDate,
-    format: format,
-    hoverRangeValue: hoverRangeValue,
-    inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
-    isoWeek: isoWeek,
-    locale: locale,
-    onChangePageDate: onChangePageDate,
-    onChangePageTime: onChangePageTime,
-    onMouseMove: onMouseMove,
-    onSelect: onSelect,
-    renderCell: renderCell,
-    showWeekNumbers: showWeekNumbers,
-    inline: inline
-  };
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      date: calendarDate,
+      dateRange: dateRange,
+      disabledDate: isDisabledDate,
+      format: format,
+      hoverRangeValue: hoverRangeValue,
+      inSameMonth: inSameMonth !== null && inSameMonth !== void 0 ? inSameMonth : inSameThisMonthDate,
+      isoWeek: isoWeek,
+      locale: locale,
+      onChangePageDate: onChangePageDate,
+      onChangePageTime: onChangePageTime,
+      onMouseMove: onMouseMove,
+      onSelect: onSelect,
+      renderCell: renderCell,
+      showWeekNumbers: showWeekNumbers,
+      inline: inline
+    };
+  }, [calendarDate, dateRange, format, hoverRangeValue, inSameMonth, inSameThisMonthDate, inline, isDisabledDate, isoWeek, locale, onChangePageDate, onChangePageTime, onMouseMove, onSelect, renderCell, showWeekNumbers]);
   return /*#__PURE__*/_react.default.createElement(_CalendarContext.CalendarProvider, {
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, _utils.DateUtils.omitHideDisabledProps(rest), {
-    role: "table",
     className: calendarClasses,
     ref: ref
   }), /*#__PURE__*/_react.default.createElement(_Header.default, {

package/cjs/Calendar/Header.js

@@ -139,9 +139,7 @@ var Header = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     'has-month': hasMonth,
     'has-time': showTime
   }));
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "row"
-  }, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
   }), hasMonth && monthToolbar, showTime && /*#__PURE__*/_react.default.createElement("div", {

package/cjs/Calendar/Table.js

@@ -35,7 +35,7 @@ var Table = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   var classes = merge(className, withClassPrefix());
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "table"
+    role: "grid"
   }, rest, {
     ref: ref,
     className: classes

package/cjs/Calendar/TableRow.js

@@ -36,16 +36,19 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       selected = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
       dateRange = _useCalendarContext.dateRange,
       disabledDate = _useCalendarContext.disabledDate,
-      formatDate = _useCalendarContext.formatDate,
       hoverRangeValue = _useCalendarContext.hoverRangeValue,
       inSameMonth = _useCalendarContext.inSameMonth,
       isoWeek = _useCalendarContext.isoWeek,
       onMouseMove = _useCalendarContext.onMouseMove,
       onSelect = _useCalendarContext.onSelect,
       renderCell = _useCalendarContext.renderCell,
-      locale = _useCalendarContext.locale,
+      overrideLocale = _useCalendarContext.locale,
       showWeekNumbers = _useCalendarContext.showWeekNumbers;
 
+  var _useCustom = (0, _utils.useCustom)('Calendar', overrideLocale),
+      locale = _useCustom.locale,
+      formatDate = _useCustom.formatDate;
+
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
       prefix = _useClassNames.prefix,
       merge = _useClassNames.merge;
@@ -59,7 +62,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, [onSelect]);
 
   var renderDays = function renderDays() {
-    var formatStr = (locale === null || locale === void 0 ? void 0 : locale.formattedDayPattern) || 'yyyy-MM-dd';
+    var formatStr = locale.formattedDayPattern;
     var days = [];
 
     var _ref = dateRange || [],
@@ -86,7 +89,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
       var isEndSelected = !unSameMonth && selectedEndDate && _utils.DateUtils.isSameDay(thisDate, selectedEndDate);
 
-      var isSelected = isStartSelected || isEndSelected;
+      var isSelected = isRangeSelectionMode ? isStartSelected || isEndSelected : _utils.DateUtils.isSameDay(thisDate, selected);
       var inRange = false; // for Selected
 
       if (selectedStartDate && selectedEndDate) {
@@ -113,7 +116,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       var _classes = prefix('cell', {
         'cell-un-same-month': unSameMonth,
         'cell-is-today': isToday,
-        'cell-selected': isRangeSelectionMode ? isSelected : _utils.DateUtils.isSameDay(thisDate, selected),
+        'cell-selected': isSelected,
         'cell-selected-start': isStartSelected,
         'cell-selected-end': isEndSelected,
         'cell-in-range': !unSameMonth && inRange,
@@ -122,8 +125,10 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
       var title = formatDate ? formatDate(thisDate, formatStr) : _utils.DateUtils.format(thisDate, formatStr);
       days.push( /*#__PURE__*/_react.default.createElement("div", {
-        role: "cell",
+        role: "gridcell",
         key: title,
+        "aria-label": title,
+        "aria-selected": isSelected || undefined,
         className: _classes
       }, /*#__PURE__*/_react.default.createElement("div", {
         role: "button",
@@ -147,7 +152,7 @@ var TableRow = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     className: classes
   }), showWeekNumbers && /*#__PURE__*/_react.default.createElement("div", {
     className: prefix('cell-week-number'),
-    role: "cell"
+    role: "rowheader"
   }, _utils.DateUtils.format(weekendDate, isoWeek ? 'I' : 'w')), renderDays());
 });
 

package/cjs/Calendar/View.js

@@ -30,7 +30,12 @@ var View = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var _useCalendarContext = (0, _CalendarContext.useCalendarContext)(),
       _useCalendarContext$d = _useCalendarContext.date,
       date = _useCalendarContext$d === void 0 ? new Date() : _useCalendarContext$d,
-      isoWeek = _useCalendarContext.isoWeek;
+      isoWeek = _useCalendarContext.isoWeek,
+      overrideLocale = _useCalendarContext.locale;
+
+  var _useCustom = (0, _utils.useCustom)('Calendar', overrideLocale),
+      locale = _useCustom.locale,
+      formatDate = _useCustom.formatDate;
 
   var thisMonthDate = _utils.DateUtils.setDate(date, 1);
 
@@ -39,13 +44,12 @@ var View = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       withClassPrefix = _useClassNames.withClassPrefix;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
-    role: "row"
-  }, rest, {
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes
   }), /*#__PURE__*/_react.default.createElement(_Table.default, {
-    rows: _utils.DateUtils.getMonthView(thisMonthDate, isoWeek)
+    rows: _utils.DateUtils.getMonthView(thisMonthDate, isoWeek),
+    "aria-label": formatDate(thisMonthDate, locale.formattedMonthPattern)
   }));
 });
 

package/cjs/CheckTree/index.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -7,17 +9,20 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _CheckTreePicker = _interopRequireDefault(require("../CheckTreePicker"));
 
 var _TreeContext = _interopRequireDefault(require("../Tree/TreeContext"));
 
 var CheckTree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_TreeContext.default.Provider, {
-    value: {
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
       inline: true
-    }
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_TreeContext.default.Provider, {
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_CheckTreePicker.default, (0, _extends2.default)({
     ref: ref
   }, props)));

package/cjs/Container/Container.js

@@ -41,10 +41,13 @@ var Container = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var classes = merge(className, withClassPrefix({
     'has-sidebar': hasSidebar
   }));
-  return /*#__PURE__*/_react.default.createElement(ContainerContext.Provider, {
-    value: {
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
       setHasSidebar: setHasSidebar
-    }
+    };
+  }, [setHasSidebar]);
+  return /*#__PURE__*/_react.default.createElement(ContainerContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes

package/cjs/DatePicker/DatePicker.js

@@ -402,6 +402,7 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       top: top
     };
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
+      role: "dialog",
       className: classes,
       ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
       style: styles,
@@ -475,7 +476,8 @@ var DatePicker = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     active: active,
     placement: placement,
     disabled: disabled,
-    caretAs: caretAs
+    caretAs: caretAs,
+    "aria-haspopup": "dialog"
   }), renderDate())));
 });
 

package/cjs/DateRangePicker/DateRangePicker.js

@@ -211,7 +211,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     }
 
     return isPlaintext ? '' : placeholder || rangeFormatStr;
-  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue, value]);
+  }, [character, formatDate, formatStr, placeholder, rangeFormatStr, renderValue]);
   /**
    * preset hover range
    */
@@ -263,7 +263,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     if (closeOverlay !== false) {
       handleCloseDropdown();
     }
-  }, [formatStr, handleCloseDropdown, onChange, selectedDates, setValue, value]);
+  }, [formatStr, handleCloseDropdown, onChange, setValue, value]);
   /**
    * Select the date range. If oneTap is not set, you need to click twice to select the start time and end time.
    * The MouseMove event is called between the first click and the second click to update the selection state.
@@ -293,7 +293,7 @@ var DateRangePicker = /*#__PURE__*/_react.default.forwardRef(function (props, re
     } else if (!(0, _isNil.default)(nextHoverDateRange)) {
       setHoverDateRange(nextHoverDateRange);
     }
-  }, [getHoverRangeValue, hoverRange]);
+  }, [getHoverRangeValue]);
   /**
    * Callback for selecting a date cell in the calendar grid
    */

package/cjs/Disclosure/Disclosure.js

@@ -71,7 +71,7 @@ function Disclosure(props) {
       });
     }
   });
-  var context = (0, _react.useMemo)(function () {
+  var contextValue = (0, _react.useMemo)(function () {
     return [{
       open: open
     }, dispatch, {
@@ -79,7 +79,7 @@ function Disclosure(props) {
     }];
   }, [open, dispatch, onToggle]);
   return /*#__PURE__*/_react.default.createElement(_DisclosureContext.default.Provider, {
-    value: context
+    value: contextValue
   }, children({
     open: open
   }, containerElementRef));

package/cjs/Dropdown/DropdownMenu.js

@@ -91,17 +91,20 @@ var DropdownMenu = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
   var _useClassNames3 = (0, _utils.useClassNames)('dropdown-item'),
       mergeItemClassNames = _useClassNames3.merge,
       withItemClassPrefix = _useClassNames3.withClassPrefix,
-      prefixItemClassName = _useClassNames3.prefix; // <Dropdown.Menu> is used outside of <Dropdown>
+      prefixItemClassName = _useClassNames3.prefix;
+
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      activeKey: activeKey,
+      onSelect: onSelect
+    };
+  }, [activeKey, onSelect]); // <Dropdown.Menu> is used outside of <Dropdown>
   // renders a vertical `menubar`
 
-
   if (!dropdown) {
     var classes = merge(props.className, withClassPrefix());
     return /*#__PURE__*/_react.default.createElement(_DropdownContext.default.Provider, {
-      value: {
-        activeKey: activeKey,
-        onSelect: onSelect
-      }
+      value: contextValue
     }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
       vertical: true,
       onActivateItem: function onActivateItem(event) {

package/cjs/FormGroup/FormGroup.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -9,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -33,10 +35,13 @@ var FormGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       merge = _useClassNames.merge;
 
   var classes = merge(className, withClassPrefix());
-  return /*#__PURE__*/_react.default.createElement(FormGroupContext.Provider, {
-    value: {
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
       controlId: controlId
-    }
+    };
+  }, [controlId]);
+  return /*#__PURE__*/_react.default.createElement(FormGroupContext.Provider, {
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     className: classes,

package/cjs/Menu/MenuItem.js

@@ -55,7 +55,7 @@ function MenuItem(props) {
         id: menuitemRef.current.id
       });
     }
-  }, [dispatch]); // Gain/release focus on mouseenter/mouseleave in `menu`
+  }, [dispatch, hasFocus]); // Gain/release focus on mouseenter/mouseleave in `menu`
 
   var handleMouseMove = (0, _react.useCallback)(function () {
     if (!(0, _isNil.default)(menuitemRef.current) && !hasFocus) {

package/cjs/Nav/Nav.js

@@ -75,14 +75,17 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
       onSelectFromSidenav = _ref$onSelect === void 0 ? onSelectProp : _ref$onSelect;
 
   var activeKey = activeKeyProp !== null && activeKeyProp !== void 0 ? activeKeyProp : activeKeyFromSidenav;
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      withinNav: true,
+      activeKey: activeKey,
+      onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
+    };
+  }, [activeKey, onSelectFromSidenav, onSelectProp]);
 
   if (sidenav !== null && sidenav !== void 0 && sidenav.expanded) {
     return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
-      value: {
-        withinNav: true,
-        activeKey: activeKey,
-        onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-      }
+      value: contextValue
     }, /*#__PURE__*/_react.default.createElement("ul", (0, _extends2.default)({
       ref: ref,
       className: classes
@@ -93,11 +96,7 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
 
   if (sidenav) {
     return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
-      value: {
-        withinNav: true,
-        activeKey: activeKey,
-        onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-      }
+      value: contextValue
     }, /*#__PURE__*/_react.default.createElement(_Menubar.default, {
       vertical: !!sidenav
     }, function (menubar, ref) {
@@ -110,11 +109,7 @@ var Nav = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement(_NavContext.default.Provider, {
-    value: {
-      withinNav: true,
-      activeKey: activeKey,
-      onSelect: onSelectProp !== null && onSelectProp !== void 0 ? onSelectProp : onSelectFromSidenav
-    }
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: menubarRef,
     className: classes

package/cjs/Overlay/Modal.js

@@ -224,6 +224,13 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   var handleExited = (0, _react.useCallback)(function () {
     setExited(true);
   }, []);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      overlayContainer: function overlayContainer() {
+        return modal.dialog;
+      }
+    };
+  }, [modal.dialog]);
 
   if (!mountModal) {
     return null;
@@ -272,11 +279,7 @@ var Modal = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     onEntered: onEntered
   }), children) : children;
   return /*#__PURE__*/_react.default.createElement(_OverlayContext.default.Provider, {
-    value: {
-      overlayContainer: function overlayContainer() {
-        return modal.dialog;
-      }
-    }
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: (0, _utils2.mergeRefs)(modal.setDialogRef, ref),
     style: style,

package/cjs/PanelGroup/PanelGroup.js

@@ -51,16 +51,19 @@ var PanelGroup = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
     setActiveKey(activeKey);
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(activeKey, event);
   }, [onSelect, setActiveKey]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      accordion: accordion,
+      activeKey: activeKey,
+      onGroupSelect: handleSelect
+    };
+  }, [accordion, activeKey, handleSelect]);
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, rest, {
     ref: ref,
     role: accordion ? 'tablist' : undefined,
     className: classes
   }), /*#__PURE__*/_react.default.createElement(PanelGroupContext.Provider, {
-    value: {
-      accordion: accordion,
-      activeKey: activeKey,
-      onGroupSelect: handleSelect
-    }
+    value: contextValue
   }, children));
 });
 

package/cjs/Toggle/Toggle.js

@@ -81,7 +81,8 @@ var Toggle = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
   }, rest), /*#__PURE__*/_react.default.createElement("input", {
     ref: inputRef,
     type: "checkbox",
-    checked: checked,
+    checked: checkedProp,
+    defaultChecked: defaultChecked,
     disabled: disabled,
     readOnly: readOnly,
     onChange: handleInputChange,

package/cjs/Tree/Tree.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 exports.__esModule = true;
@@ -7,7 +9,7 @@ exports.default = exports.TREE_NODE_DROP_POSITION = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _TreePicker = _interopRequireDefault(require("../TreePicker"));
 
@@ -26,10 +28,13 @@ exports.TREE_NODE_DROP_POSITION = TREE_NODE_DROP_POSITION;
 })(TREE_NODE_DROP_POSITION || (exports.TREE_NODE_DROP_POSITION = TREE_NODE_DROP_POSITION = {}));
 
 var Tree = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  return /*#__PURE__*/_react.default.createElement(_TreeContext.default.Provider, {
-    value: {
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
       inline: true
-    }
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(_TreeContext.default.Provider, {
+    value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_TreePicker.default, (0, _extends2.default)({
     ref: ref
   }, props)));