rsuite 5.48.1 → 5.50.0

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# [5.50.0](https://github.com/rsuite/rsuite/compare/v5.49.0...v5.50.0) (2024-01-12)
+
+### Bug Fixes
+
+- typo in Next.js guide ([#3555](https://github.com/rsuite/rsuite/issues/3555)) ([77d60cf](https://github.com/rsuite/rsuite/commit/77d60cfeb27e3e52b4003d72114e5164b275a3d2))
+
+### Features
+
+- **cra:** supports using CRA to install javascript template ([#3538](https://github.com/rsuite/rsuite/issues/3538)) ([1b697f4](https://github.com/rsuite/rsuite/commit/1b697f4a4f61a7943351c5ca0f46a484c9ea1ac6))
+- **cra:** supports using CRA to install typescript template ([#3540](https://github.com/rsuite/rsuite/issues/3540)) ([bbe3609](https://github.com/rsuite/rsuite/commit/bbe3609d4492e9186e32309f6c6ee6101d5eb83c))
+- **DateRangePicker:** supports date selection by using keyboard ([#3554](https://github.com/rsuite/rsuite/issues/3554)) ([2c8d197](https://github.com/rsuite/rsuite/commit/2c8d1974e018903b3a1b874566b31c751d207493))
+- **FormControl:** added support for `name` setting path of object ([#3511](https://github.com/rsuite/rsuite/issues/3511)) ([03d5396](https://github.com/rsuite/rsuite/commit/03d5396b8a23d88907be9d1864776d61a0a3b963))
+
+# [5.49.0](https://github.com/rsuite/rsuite/compare/v5.48.1...v5.49.0) (2023-12-29)
+
+### Bug Fixes
+
+- **CSS Reset:** fix `rsuite-no-reset.css` overrides the default styles of the app ([#3527](https://github.com/rsuite/rsuite/issues/3527)) ([dff5804](https://github.com/rsuite/rsuite/commit/dff5804f81c00dfe4f4bb02eac92e070fabcc4f8))
+- **CustomProvider:** fix the flicker when initializing in Dark mode ([#3528](https://github.com/rsuite/rsuite/issues/3528)) ([2bd67fd](https://github.com/rsuite/rsuite/commit/2bd67fd60ddaec9a5925d22e7cee126425b6ad78))
+- **DateRangePicker:** fix layout misalignment due to missing min-width ([#3523](https://github.com/rsuite/rsuite/issues/3523)) ([464af79](https://github.com/rsuite/rsuite/commit/464af7964fe5fb8e434c7113084e6597726f3db6))
+
+### Features
+
+- **DatePicker:** supports date selection by using keyboard ([#3515](https://github.com/rsuite/rsuite/issues/3515)) ([bc56cb3](https://github.com/rsuite/rsuite/commit/bc56cb33fb15854a0d3f6c3c3bb6ee3b4036aef5))
+- **DateRangeInput:** add support for DateRangeInput ([#3525](https://github.com/rsuite/rsuite/issues/3525)) ([074245a](https://github.com/rsuite/rsuite/commit/074245a2f5f18028426d896584690d1738606d1c))
+- **Input:** add support for htmlSize prop ([#3526](https://github.com/rsuite/rsuite/issues/3526)) ([62de8ca](https://github.com/rsuite/rsuite/commit/62de8ca14eb2aaf8dde904b3667035cb3f060c23))
+
 ## [5.48.1](https://github.com/rsuite/rsuite/compare/v5.48.0...v5.48.1) (2023-12-22)
 
 ### Bug Fixes

package/Cascader/styles/index.less

@@ -1,6 +1,6 @@
-@import '../../styles/common';
-@import '../../Dropdown/styles/mixin';
-@import '../../styles/mixins/listbox';
+@import '../../styles/common.less';
+@import '../../styles/mixins/combobox.less';
+@import '../../styles/mixins/listbox.less';
 
 // Cascader
 // ----------------------
@@ -80,6 +80,7 @@
     margin: 0;
     padding: 0;
     list-style: none;
+    font-size: @font-size-base;
   }
 }
 
@@ -122,5 +123,5 @@
 }
 
 .rs-picker-cascader-menu-caret {
-  .dropdown-toggle-caret-common();
+  .combobox-indicator-icon();
 }

package/DatePicker/styles/index.less

@@ -8,17 +8,6 @@
 // DatePicker Picker
 // ----------------------
 
-// Change the <caret/> & <clean/> vertical position make it align middle.
-.rs-picker-date,
-.rs-picker-daterange {
-  &.rs-picker-default {
-    .rs-picker-toggle-caret,
-    .rs-picker-toggle-clean {
-      top: @padding-y - @picker-default-toggle-border-width;
-    }
-  }
-}
-
 // Toolbar
 .rs-picker-toolbar {
   padding: @calendar-picker-padding;
@@ -34,6 +23,24 @@
       height: 286px;
     }
   }
+
+  .rs-input-group-addon {
+    color: var(--rs-text-secondary);
+
+    .rs-btn-close {
+      padding: 0;
+    }
+  }
+
+  &.rs-picker-subtle {
+    .rs-input-group {
+      border-color: transparent;
+    }
+  }
+
+  > .rs-input-group.rs-input-group-inside .rs-input {
+    padding-right: 0;
+  }
 }
 
 // Predefined Ranges

package/DateRangeInput/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "rsuite/DateRangeInput",
+  "private": true,
+  "main": "../cjs/DateRangeInput/index.js",
+  "module": "../esm/DateRangeInput/index.js",
+  "types": "../esm/DateRangeInput/index.d.ts"
+}

package/DateRangePicker/styles/index.less

@@ -4,6 +4,26 @@
 @import '../../DatePicker/styles/index';
 @import '../../Calendar/styles/index';
 
+.rs-picker-daterange {
+  .rs-input-group-addon {
+    color: var(--rs-text-secondary);
+
+    .rs-btn-close {
+      padding: 0;
+    }
+  }
+
+  &.rs-picker-subtle {
+    .rs-input-group {
+      border-color: transparent;
+    }
+  }
+
+  > .rs-input-group.rs-input-group-inside .rs-input {
+    padding-right: 0;
+  }
+}
+
 // Date range Picker
 // ----------------------
 

package/Dropdown/styles/index.less

@@ -1,6 +1,7 @@
-@import '../../styles/common';
-@import '../../styles/mixins/menu';
-@import 'mixin';
+@import '../../styles/common.less';
+@import '../../styles/mixins/menu.less';
+@import '../../styles/mixins/combobox.less';
+@import 'mixin.less';
 @import '../../Button/styles/index.less';
 
 //
@@ -8,7 +9,7 @@
 // --------------------------------------------------
 
 .rs-dropdown-toggle-caret {
-  .dropdown-toggle-caret-common();
+  .combobox-indicator-icon();
 }
 
 // The dropdown wrapper (div)

package/Dropdown/styles/mixin.less

@@ -1,14 +1,3 @@
-.dropdown-toggle-caret-common(@right:@padding-x) {
-  display: flex;
-  align-items: center;
-  margin-left: 2px;
-  position: absolute;
-  top: @padding-y;
-  right: @right;
-  height: @line-height-computed;
-  font-size: 12px;
-}
-
 .dropdown-toggle-caret-size(@vertical,@horizontal,@caret-size) {
   padding-right: @horizontal+ @dropdown-caret-width+ @dropdown-caret-padding !important;
 

package/InputGroup/styles/index.less

@@ -35,6 +35,7 @@
 
   & & {
     outline: none !important;
+    border-color: transparent !important;
   }
 
   .rs-input-number,

package/Picker/styles/index.less

@@ -1,8 +1,9 @@
-@import '../../styles/common';
-@import '../../styles/mixins/listbox';
-@import (reference) '../../Button/styles/index';
-@import '../../Form/styles/mixin';
-@import 'mixin';
+@import '../../styles/common.less';
+@import '../../styles/mixins/listbox.less';
+@import '../../styles/mixins/combobox.less';
+@import (reference) '../../Button/styles/index.less';
+@import '../../Form/styles/mixin.less';
+@import 'mixin.less';
 
 //
 // Pickers
@@ -80,6 +81,26 @@
   &.rs-picker-focused {
     box-shadow: var(--rs-state-focus-shadow);
   }
+
+  &-label.rs-input-group-addon {
+    color: var(--rs-text-primary);
+    padding-right: 4px !important;
+  }
+
+  &-loader {
+    width: 14px;
+    height: 14px;
+    display: flex;
+    align-items: center;
+  }
+
+  &-error > .rs-input-group {
+    border-color: var(--rs-state-error) !important;
+
+    &:focus-within {
+      outline: var(--rs-state-error-outline) !important;
+    }
+  }
 }
 
 .rs-picker-toggle {
@@ -232,31 +253,37 @@
   }
 }
 
-// Picker clear button
-.rs-picker-toggle-clean {
-  .dropdown-toggle-caret-common(@picker-toggle-clean-right);
+.rs-picker-toggle-indicator {
+  // Picker clear button
+  .rs-picker-clean {
+    .combobox-indicator-icon(@picker-toggle-clean-right);
 
-  background: inherit;
-  color: var(--rs-text-secondary);
-  transition: 0.2s color linear;
-  cursor: pointer;
+    background: inherit;
+    color: var(--rs-text-secondary);
+    transition: 0.2s color linear;
+    cursor: pointer;
 
-  &.rs-btn-close {
-    padding: 4px 0;
-  }
+    &.rs-btn-close {
+      padding: 4px 0;
+    }
 
-  .rs-@{date-picker-prefix} &,
-  .rs-@{date-range-picker-prefix} & {
-    right: (@picker-toggle-clean-right + @picker-item-content-padding-vertical);
+    .rs-@{date-picker-prefix} &,
+    .rs-@{date-range-picker-prefix} & {
+      right: (@picker-toggle-clean-right + @picker-item-content-padding-vertical);
+    }
   }
-}
 
-// Picker toggle caret
-.rs-picker-toggle-caret {
-  // Extend  Dropdown toggle caret style
-  .dropdown-toggle-caret-common();
+  // Picker toggle caret
+  .rs-picker-caret-icon {
+    // Extend  Dropdown toggle caret style
+    .combobox-indicator-icon();
 
-  color: var(--rs-text-secondary);
+    color: var(--rs-text-secondary);
+  }
+
+  .rs-picker-loader {
+    .combobox-indicator-icon();
+  }
 }
 
 // Picker Menu

package/Picker/styles/mixin.less

@@ -103,13 +103,15 @@
     padding-right: (@padding-horizontal + @dropdown-caret-width + @dropdown-caret-padding);
   }
 
-  .rs-picker-toggle-caret,
-  .rs-picker-toggle-clean {
-    top: @padding-vertical;
-    right: @padding-horizontal;
-
-    .rs-picker-default & {
-      top: @padding-vertical - @picker-default-toggle-border-width;
+  .rs-picker-toggle-indicator {
+    .rs-picker-caret-icon,
+    .rs-picker-clean {
+      top: @padding-vertical;
+      right: @padding-horizontal;
+
+      .rs-picker-default & {
+        top: @padding-vertical - @picker-default-toggle-border-width;
+      }
     }
   }
 }
@@ -144,13 +146,15 @@
 
   padding-right: (@padding-horizontal + @calendar-caret-width + @dropdown-caret-padding);
 
-  .rs-picker-toggle-clean,
-  .rs-picker-toggle-caret {
-    top: @top;
-    right: @padding-horizontal;
+  .rs-picker-toggle-indicator {
+    .rs-picker-clean,
+    .rs-picker-caret-icon {
+      top: @top;
+      right: @padding-horizontal;
 
-    .rs-picker-subtle & {
-      top: @top - @picker-default-toggle-border-width;
+      .rs-picker-subtle & {
+        top: @top - @picker-default-toggle-border-width;
+      }
     }
   }
 }

package/README.md

@@ -8,11 +8,13 @@ English | [中文版][readm-cn]
 
 [![npm][npm-svg]][npm-home]
 [![GitHub Actions][actions-svg]][actions-home]
-[![codecov](https://codecov.io/gh/rsuite/rsuite/branch/main/graph/badge.svg?token=HGeKd0BD3t)](https://codecov.io/gh/rsuite/rsuite)
+[![npm bundle size][npm-bundle-size-img]][npm-bundle-size]
+[![rsuite.min.js][rsuite-min-js-img]][rsuite-min-js]
+[![codecov][codecov-img]][codecov]
 [![Discord][discord-svg]][discord-invite]
 [![Gitter][gitter-svg]][gitter]
 [![Gitter][gitter-cn-svg]][gitter-cn]
-[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/rsuite/rsuite)
+[![Gitpod ready-to-code][gitpod-img]][gitpod]
 
 React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework.
 
@@ -94,8 +96,8 @@ You can go through [full documentation][rsuite-doc-guide] or start with followin
 - [Use in Electron][demo-electron]
 - [Use in Flow][demo-flow-app]
 - [Use in TypeScript][demo-typescript-app]
-- [Use in Next.js][demo-nextjs]
-- [Use in Next.js and Typescript][demo-nextjs-typescript]
+- [Use in Next.js (App)][demo-nextjs-app]
+- [Use in Next.js (Pages)][demo-nextjs-pages]
 - [Use in UmiJS][demo-umi-app]
 - [Use in Snowpack][demo-snowpack]
 - [Use in Vite][demo-vite]
@@ -145,11 +147,15 @@ This project exists thanks to all the people who contribute.
 
 React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 
-[readm-cn]: https://github.com/rsuite/rsuite/blob/master/README_zh.md
+[readm-cn]: https://github.com/rsuite/rsuite/blob/main/README_zh.md
 [npm-svg]: https://img.shields.io/npm/v/rsuite
 [npm-home]: https://www.npmjs.com/package/rsuite
-[actions-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg?branch=master
-[actions-home]: https://github.com/rsuite/rsuite/actions?query=branch%3Amaster+workflow%3A%22Node.js+CI%22
+[npm-bundle-size-img]: https://badgen.net/bundlephobia/minzip/rsuite?icon=npm
+[npm-bundle-size]: https://bundlephobia.com/package/rsuite
+[rsuite-min-js-img]: https://img.badgesize.io/https:/unpkg.com/rsuite/dist/rsuite.min.js?label=rsuite.min.js&compression=gzip
+[rsuite-min-js]: https://unpkg.com/browse/rsuite/dist/rsuite.min.js
+[actions-svg]: https://github.com/rsuite/rsuite/workflows/Node.js%20CI/badge.svg?branch=main
+[actions-home]: https://github.com/rsuite/rsuite/actions?query=branch%3Amain+workflow%3A%22Node.js+CI%22
 [discord-svg]: https://img.shields.io/badge/Discord-Join%20chat%20%E2%86%92-738bd7.svg
 [discord-invite]: https://discord.gg/R8mnjwh
 [rsuite-design]: https://rsuitejs.com/design/default
@@ -160,30 +166,34 @@ React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 [rsuite-doc-guide-rtl]: https://rsuitejs.com/en/guide/rtl
 [rsuite-components-overview]: https://rsuitejs.com/en/components/overview
 [release-notes]: https://github.com/rsuite/rsuite/releases
-[contributing]: https://github.com/rsuite/rsuite/blob/master/CONTRIBUTING.md
+[contributing]: https://github.com/rsuite/rsuite/blob/main/CONTRIBUTING.md
 [prettierrc]: https://github.com/rsuite/rsuite/wiki/.prettierrc
 [issues-11]: https://github.com/rsuite/rsuite/issues/11
 [opencollective-svg]: https://opencollective.com/rsuite/tiers/backer.svg?avatarHeight=36
 [opencollective-home]: https://opencollective.com/rsuite
-[license]: https://github.com/rsuite/rsuite/blob/master/LICENSE
+[license]: https://github.com/rsuite/rsuite/blob/main/LICENSE
 [rsuite-sample]: https://sample.rsuitejs.com/
 [gitter]: https://gitter.im/rsuite/rsuite?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
 [gitter-svg]: https://img.shields.io/gitter/room/rsuite/rsuite?label=chat-english
 [gitter-cn]: https://gitter.im/rsuite/rsuite-CN?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
 [gitter-cn-svg]: https://img.shields.io/gitter/room/rsuite/rsuite?label=chat-chinese
 [demo-admin]: https://github.com/rsuite/rsuite-management-system
-[demo-modular-import]: https://github.com/rsuite/rsuite/tree/master/examples/with-babel-preset-rsuite
-[demo-cdn]: https://github.com/rsuite/rsuite/tree/master/examples/cdn
-[demo-create-react-app]: https://github.com/rsuite/rsuite/tree/master/examples/create-react-app
-[demo-electron]: https://github.com/rsuite/rsuite/tree/master/examples/with-electron
-[demo-intl-app]: https://github.com/rsuite/rsuite/tree/master/examples/custom-i18n
-[demo-multiple-themes]: https://github.com/rsuite/rsuite/tree/master/examples/custom-multiple-themes
-[demo-flow-app]: https://github.com/rsuite/rsuite/tree/master/examples/with-flow
-[demo-typescript-app]: https://github.com/rsuite/rsuite/tree/master/examples/with-typescript
-[demo-nextjs]: https://github.com/rsuite/rsuite/tree/master/examples/with-nextjs
-[demo-umi-app]: https://github.com/rsuite/rsuite/tree/master/examples/with-umi
-[demo-rtlcss]: https://github.com/rsuite/rsuite/tree/master/examples/with-rtlcss
-[demo-postcss-rtl]: https://github.com/rsuite/rsuite/tree/master/examples/with-postcss-rtl
-[demo-nextjs-typescript]: https://github.com/rsuite/rsuite/tree/master/examples/with-nextjs-typescript
-[demo-snowpack]: https://github.com/rsuite/rsuite/tree/master/examples/with-snowpack
-[demo-vite]: https://github.com/rsuite/rsuite/tree/master/examples/with-vite
+[demo-modular-import]: https://github.com/rsuite/rsuite/tree/main/examples/with-babel-preset-rsuite
+[demo-cdn]: https://github.com/rsuite/rsuite/tree/main/examples/cdn
+[demo-create-react-app]: https://github.com/rsuite/rsuite/tree/main/examples/create-react-app
+[demo-electron]: https://github.com/rsuite/rsuite/tree/main/examples/with-electron
+[demo-intl-app]: https://github.com/rsuite/rsuite/tree/main/examples/custom-i18n
+[demo-multiple-themes]: https://github.com/rsuite/rsuite/tree/main/examples/custom-multiple-themes
+[demo-flow-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-flow
+[demo-typescript-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-typescript
+[demo-nextjs-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs-app
+[demo-nextjs-pages]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs-pages
+[demo-umi-app]: https://github.com/rsuite/rsuite/tree/main/examples/with-umi
+[demo-rtlcss]: https://github.com/rsuite/rsuite/tree/main/examples/with-rtlcss
+[demo-postcss-rtl]: https://github.com/rsuite/rsuite/tree/main/examples/with-postcss-rtl
+[demo-snowpack]: https://github.com/rsuite/rsuite/tree/main/examples/with-snowpack
+[demo-vite]: https://github.com/rsuite/rsuite/tree/main/examples/with-vite
+[codecov]: https://codecov.io/gh/rsuite/rsuite
+[codecov-img]: https://codecov.io/gh/rsuite/rsuite/branch/main/graph/badge.svg?token=HGeKd0BD3t
+[gitpod]: https://gitpod.io/#https://github.com/rsuite/rsuite
+[gitpod-img]: https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod

package/Sidenav/styles/index.less

@@ -49,6 +49,7 @@
       background: none;
       padding-right: (@sidenav-padding-horizontal + @sidenav-dropdown-toggle-caret-width);
       position: relative;
+      border-width: 0;
 
       .rs-sidenav-collapse-in & {
         padding-left: @sidenav-level2-retract;
@@ -178,6 +179,7 @@
   display: block;
   outline: 0;
   overflow: hidden;
+  text-decoration: none;
 
   &:hover,
   &:focus {

package/TagInput/styles/index.less

@@ -7,7 +7,7 @@
   .rs-picker-tag-wrapper {
     margin-right: @dropdown-toggle-padding-right !important;
   }
-  .rs-picker-toggle-clean {
+  .rs-picker-clean {
     right: (@dropdown-toggle-padding-right / 2 - 6) !important;
   }
 }

package/cjs/AutoComplete/AutoComplete.js

@@ -69,7 +69,10 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     setFocus = _useState[1];
   var items = (datalist === null || datalist === void 0 ? void 0 : datalist.filter((0, _utils3.shouldDisplay)(filterBy, value))) || [];
   var hasItems = items.length > 0;
-  var overlayRef = (0, _react.useRef)(null);
+  var _usePickerRef = (0, _Picker.usePickerRef)(ref),
+    trigger = _usePickerRef.trigger,
+    overlay = _usePickerRef.overlay,
+    root = _usePickerRef.root;
   var isMounted = (0, _utils.useIsMounted)();
 
   // Used to hover the focuse item  when trigger `onKeydown`
@@ -77,14 +80,14 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       data: datalist,
       callback: onMenuFocus,
       target: function target() {
-        return overlayRef.current;
+        return overlay.current;
       }
     }),
     focusItemValue = _useFocusItemValue.focusItemValue,
     setFocusItemValue = _useFocusItemValue.setFocusItemValue,
     handleKeyDown = _useFocusItemValue.onKeyDown;
   var handleKeyDownEvent = function handleKeyDownEvent(event) {
-    if (!overlayRef.current) {
+    if (!overlay.current) {
       return;
     }
     (0, _Picker.onMenuKeyDown)(event, {
@@ -109,29 +112,29 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }
     handleClose();
   };
-  var handleSelect = (0, _react.useCallback)(function (item, event) {
+  var handleSelect = (0, _utils.useEventCallback)(function (item, event) {
     onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value, item, event);
-  }, [onSelect]);
-  var handleChangeValue = (0, _react.useCallback)(function (value, event) {
+  });
+  var handleChangeValue = (0, _utils.useEventCallback)(function (value, event) {
     onChange === null || onChange === void 0 ? void 0 : onChange(value, event);
-  }, [onChange]);
+  });
   var handleChange = function handleChange(value, event) {
     setFocusItemValue('');
     setValue(value);
     setFocus(true);
     handleChangeValue(value, event);
   };
-  var handleClose = (0, _react.useCallback)(function () {
+  var handleClose = (0, _utils.useEventCallback)(function () {
     if (isMounted()) {
       setFocus(false);
       onClose === null || onClose === void 0 ? void 0 : onClose();
     }
-  }, [isMounted, onClose]);
-  var handleOpen = (0, _react.useCallback)(function () {
+  });
+  var handleOpen = (0, _utils.useEventCallback)(function () {
     setFocus(true);
     onOpen === null || onOpen === void 0 ? void 0 : onOpen();
-  }, [onOpen]);
-  var handleItemSelect = (0, _react.useCallback)(function (nextItemValue, item, event) {
+  });
+  var handleItemSelect = (0, _utils.useEventCallback)(function (nextItemValue, item, event) {
     setValue(nextItemValue);
     setFocusItemValue(nextItemValue);
     handleSelect(item, event);
@@ -139,29 +142,24 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       handleChangeValue(nextItemValue, event);
     }
     handleClose();
-  }, [value, setValue, handleSelect, handleChangeValue, handleClose, setFocusItemValue]);
-  var handleInputFocus = (0, _react.useCallback)(function (event) {
+  });
+  var handleInputFocus = (0, _utils.useEventCallback)(function (event) {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     handleOpen();
-  }, [onFocus, handleOpen]);
-  var handleInputBlur = (0, _react.useCallback)(function (event) {
+  });
+  var handleInputBlur = (0, _utils.useEventCallback)(function (event) {
     setTimeout(handleClose, 300);
     onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
-  }, [onBlur, handleClose]);
+  });
   var _useClassNames = (0, _utils.useClassNames)(classPrefix),
     withClassPrefix = _useClassNames.withClassPrefix,
     merge = _useClassNames.merge;
   var classes = merge(className, withClassPrefix({
     disabled: disabled
   }));
-  var triggerRef = (0, _react.useRef)(null);
   var _partitionHTMLProps = (0, _utils.partitionHTMLProps)((0, _omit.default)(rest, _Picker.pickTriggerPropKeys)),
     htmlInputProps = _partitionHTMLProps[0],
     restProps = _partitionHTMLProps[1];
-  (0, _Picker.usePublicMethods)(ref, {
-    triggerRef: triggerRef,
-    overlayRef: overlayRef
-  });
   var renderDropdownMenu = function renderDropdownMenu(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
@@ -182,11 +180,11 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       className: menuClassName
     });
     return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       style: styles,
       className: className,
       onKeyDown: handleKeyDownEvent,
-      target: triggerRef,
+      target: trigger,
       autoWidth: menuAutoWidth
     }, renderMenu ? renderMenu(menu) : menu);
   };
@@ -197,7 +195,7 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     }, typeof value === 'undefined' ? defaultValue : value);
   }
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
-    ref: triggerRef,
+    ref: trigger,
     placement: placement,
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     trigger: ['click', 'focus'],
@@ -205,7 +203,8 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
     speaker: renderDropdownMenu
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     className: classes,
-    style: style
+    style: style,
+    ref: root
   }, restProps), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {
     id: id,
     disabled: disabled,

package/cjs/Calendar/Calendar.d.ts

@@ -7,7 +7,11 @@ export interface CalendarProps extends WithAsProps {
     value?: Date;
     /** Default value  */
     defaultValue?: Date;
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day  */
+    /**
+     * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_week_date
+     */
     isoWeek?: boolean;
     /** Display a compact calendar   */
     compact?: boolean;

package/cjs/Calendar/CalendarContainer.d.ts

@@ -6,6 +6,8 @@ import { CalendarState } from './useCalendarState';
 export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivElement>, 'onSelect' | 'onChange' | 'onMouseMove'>, CalendarHeaderProps {
     /** The panel render based on date range */
     dateRange?: Date[];
+    /** The Id of the target element that triggers the opening of the calendar */
+    targetId?: string;
     /** Date displayed on the current page */
     calendarDate: Date;
     /** Whether to show week numbers */
@@ -30,7 +32,11 @@ export interface CalendarProps extends WithAsProps, Omit<HTMLAttributes<HTMLDivE
     hideSeconds?: (second: number, date: Date) => boolean;
     /** The value that mouse hover on in range selection */
     hoverRangeValue?: [Date, Date];
-    /** ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day */
+    /**
+     * ISO 8601 standard, each calendar week begins on Monday and Sunday on the seventh day
+     *
+     * @see https://en.wikipedia.org/wiki/ISO_week_date
+     */
     isoWeek?: boolean;
     /** Limit showing how many years in the future */
     limitEndYear?: number;