rsuite 5.49.0 → 5.51.0

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# [5.51.0](https://github.com/rsuite/rsuite/compare/v5.50.0...v5.51.0) (2024-01-19)
+
+### Bug Fixes
+
+- **InputGroup:** fix style conflict caused by zIndex set in InputGoup ([#3552](https://github.com/rsuite/rsuite/issues/3552)) ([f874edf](https://github.com/rsuite/rsuite/commit/f874edfdbf0dbc9a53e4fe26fb9cf39108f1a00c))
+
+### Features
+
+- **Form:** add support for `nestedField` prop on Form ([#3568](https://github.com/rsuite/rsuite/issues/3568)) ([47fce55](https://github.com/rsuite/rsuite/commit/47fce559b159f128fd2f89ffc36c0e9bcfd3f25b))
+- improve accessibility of all pickers ([#3558](https://github.com/rsuite/rsuite/issues/3558)) ([8ad3cfd](https://github.com/rsuite/rsuite/commit/8ad3cfd4f1a2de16b52fec2bed5e4a9ea509f824))
+
+# [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

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
 // ----------------------
@@ -123,5 +123,5 @@
 }
 
 .rs-picker-cascader-menu-caret {
-  .dropdown-toggle-caret-common();
+  .combobox-indicator-icon();
 }

package/CheckTreePicker/styles/index.less

@@ -69,7 +69,7 @@
   .rs-check-item {
     display: inline-block;
 
-    .rs-picker-menu & {
+    .rs-picker-popup & {
       display: block;
     }
   }
@@ -135,7 +135,7 @@
 
 // node children
 .rs-check-tree-node-children {
-  > .rs-check-tree-children {
+  > .rs-check-tree-group {
     position: relative;
     display: none;
 
@@ -154,7 +154,7 @@
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.rs-picker-menu {
+.rs-picker-popup {
   display: flex;
   flex-direction: column;
 

package/DatePicker/styles/index.less

@@ -55,7 +55,7 @@
 }
 
 // Calendar in DatePicker popup
-.rs-picker-menu {
+.rs-picker-popup {
   @calendar-width: 264px; // This is a fixed value per design.
 
   @calendar-padding-x: 15px;

package/DateRangePicker/styles/index.less

@@ -4,14 +4,24 @@
 @import '../../DatePicker/styles/index';
 @import '../../Calendar/styles/index';
 
-// Change the <caret/> & <clean/> vertical position make it align middle.
 .rs-picker-daterange {
-  &.rs-picker-default {
-    .rs-picker-toggle-caret,
-    .rs-picker-toggle-clean {
-      top: @padding-y - @picker-default-toggle-border-width;
+  .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/Form/styles/mixin.less

@@ -114,10 +114,9 @@
   @height: ~'input-height-@{size-name}';
   @useable-height: (@@height - 2px);
   @vertical: ~'padding-@{size-name}-vertical';
-  @add-on-padding: ~'input-group-padding-for-add-on-@{size-name}';
 
   &.rs-input-group-inside > .rs-input {
-    padding-right: @@add-on-padding;
+    padding-right: 0;
   }
 
   &.rs-input-group {

package/InputGroup/styles/index.less

@@ -102,11 +102,6 @@
     // Ensure that the input is always above the *appended* addon button for
     // proper border colors.
     position: relative;
-    z-index: @zindex-input;
-
-    &:focus {
-      z-index: (@zindex-input+1);
-    }
   }
 
   input.rs-input ~ .rs-input-group-addon,
@@ -136,7 +131,6 @@
 
     .rs-input-group-btn,
     .rs-input-group-addon {
-      z-index: @zindex-input-group-icon;
       flex: 0 0 auto;
       width: auto;
     }
@@ -380,13 +374,6 @@
     + .rs-btn {
       margin-left: -1px;
     }
-
-    // Bring the "active" button to the front
-    &:hover,
-    &:focus,
-    &:active {
-      z-index: 2;
-    }
   }
 
   // Negative margin to only have a 1px border between the two
@@ -401,7 +388,6 @@
   &:last-child {
     > .rs-btn,
     > .rs-btn-group {
-      z-index: 2;
       margin-left: -1px;
     }
   }

package/InputPicker/styles/index.less

@@ -33,7 +33,7 @@
   .input-picker-input-sizes();
 }
 
-.rs-picker-tag-wrapper {
+.rs-picker-textbox {
   margin-right: @dropdown-toggle-padding-right;
   min-height: 34px;
 

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
@@ -252,38 +253,44 @@
   }
 }
 
-// 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
-.rs-picker-menu {
+.rs-picker-popup {
   position: absolute;
   text-align: left;
-  z-index: @zindex-picker-menu;
+  z-index: @zindex-picker-popup;
   border-radius: @border-radius;
   background-color: var(--rs-bg-overlay);
   box-shadow: var(--rs-shadow-overlay);

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;
+      }
     }
   }
 }
@@ -219,14 +223,14 @@
 }
 
 .tag-picker-search-input-size(@padding-vertical; @padding-horizontal; @font-size; @line-height;) {
-  .rs-picker-input:not(.rs-picker-tag) & ~ .rs-picker-tag-wrapper .rs-picker-search-input {
+  .rs-picker-input:not(.rs-picker-tag) & ~ .rs-picker-textbox .rs-picker-search-input {
     padding: (@padding-vertical - 1px) @padding-horizontal;
     font-size: @font-size;
     line-height: @line-height;
   }
 
   // FIXME Bad design. Should not set search input styles in a mixin that is used in picker buttons.
-  .rs-picker-tag & ~ .rs-picker-tag-wrapper {
+  .rs-picker-tag & ~ .rs-picker-textbox {
     padding-bottom: @padding-vertical - 3px;
 
     .rs-tag {
@@ -277,7 +281,7 @@
   );
   /* stylelint-enable */
 
-  .rs-picker-input.rs-picker-tag & ~ .rs-picker-tag-wrapper {
+  .rs-picker-input.rs-picker-tag & ~ .rs-picker-textbox {
     padding-bottom: @padding-y-xs - 1px;
 
     .rs-tag {

package/README.md

@@ -96,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]
@@ -186,11 +186,11 @@ React Suite is [MIT licensed][license]. Copyright (c) 2016-present, HYPERS.
 [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]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs
+[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-nextjs-typescript]: https://github.com/rsuite/rsuite/tree/main/examples/with-nextjs-typescript
 [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

package/TagInput/styles/index.less

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

package/TagPicker/styles/index.less

@@ -52,7 +52,7 @@
     }
   }
 
-  .rs-picker-tag-wrapper {
+  .rs-picker-textbox {
     position: relative;
     // make sure tag in front of toggle
     z-index: @zindex-picker-toggle + 1;
@@ -60,6 +60,10 @@
   }
 }
 
+.rs-picker-tag-list {
+  display: contents;
+}
+
 .rs-plaintext .rs-tag {
   margin-left: 6px;
   margin-bottom: 6px;

package/TreePicker/styles/index.less

@@ -192,7 +192,7 @@
 
 // node children
 .rs-tree-node-children {
-  > .rs-tree-children {
+  > .rs-tree-group {
     position: relative;
     display: none;
 
@@ -211,7 +211,7 @@
   border-left: 1px solid rgba(0, 0, 0, 0.1);
 }
 
-.rs-picker-menu {
+.rs-picker-popup {
   &.rs-tree-menu {
     padding-top: @picker-menu-padding;
 

package/cjs/@types/common.d.ts

@@ -77,6 +77,14 @@ export interface PickerBaseProps<LocaleType = any> extends WithAsProps, Animatio
     onOpen?: () => void;
     /** Called when Modal is closed */
     onClose?: () => void;
+    /**
+     * Called when the component is focused.
+     */
+    onFocus?: React.FocusEventHandler<any>;
+    /**
+     * Called when the component is blurred.
+     */
+    onBlur?: React.FocusEventHandler<any>;
     /** Custom render extra footer */
     renderExtraFooter?: () => React.ReactNode;
 }

package/cjs/AutoComplete/AutoComplete.js

@@ -11,12 +11,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _pick = _interopRequireDefault(require("lodash/pick"));
 var _omit = _interopRequireDefault(require("lodash/omit"));
-var _Input = _interopRequireDefault(require("../Input"));
 var _utils = require("../utils");
 var _utils2 = require("../Animation/utils");
 var _Picker = require("../Picker");
 var _utils3 = require("./utils");
 var _Plaintext = _interopRequireDefault(require("../Plaintext"));
+var _Combobox = _interopRequireDefault(require("./Combobox"));
 /**
  * Autocomplete function of input field.
  * @see https://rsuitejs.com/components/auto-complete
@@ -69,22 +69,26 @@ 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`
   var _useFocusItemValue = (0, _Picker.useFocusItemValue)(value, {
       data: datalist,
+      focusToOption: false,
       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 +113,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,30 +143,25 @@ 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 renderPopup = function renderPopup(positionProps, speakerRef) {
     var left = positionProps.left,
       top = positionProps.top,
       className = positionProps.className;
@@ -170,23 +169,22 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       left: left,
       top: top
     };
-    var menu = /*#__PURE__*/_react.default.createElement(_Picker.DropdownMenu, {
-      id: id ? id + "-listbox" : undefined,
+    var menu = /*#__PURE__*/_react.default.createElement(_Picker.Listbox, {
       classPrefix: "auto-complete-menu",
-      dropdownMenuItemClassPrefix: "auto-complete-item",
-      dropdownMenuItemAs: _Picker.DropdownMenuItem,
+      listItemClassPrefix: "auto-complete-item",
+      listItemAs: _Picker.ListItem,
       focusItemValue: focusItemValue,
       onSelect: handleItemSelect,
       renderMenuItem: renderMenuItem,
       data: items,
       className: menuClassName
     });
-    return /*#__PURE__*/_react.default.createElement(_Picker.PickerOverlay, {
-      ref: (0, _utils.mergeRefs)(overlayRef, speakerRef),
+    return /*#__PURE__*/_react.default.createElement(_Picker.PickerPopup, {
+      ref: (0, _utils.mergeRefs)(overlay, speakerRef),
       style: styles,
       className: className,
       onKeyDown: handleKeyDownEvent,
-      target: triggerRef,
+      target: trigger,
       autoWidth: menuAutoWidth
     }, renderMenu ? renderMenu(menu) : menu);
   };
@@ -196,22 +194,26 @@ var AutoComplete = /*#__PURE__*/_react.default.forwardRef(function (props, ref)
       localeKey: "unfilled"
     }, typeof value === 'undefined' ? defaultValue : value);
   }
+  var expanded = open || focus && hasItems;
   return /*#__PURE__*/_react.default.createElement(_Picker.PickerToggleTrigger, {
-    ref: triggerRef,
+    id: id,
+    ref: trigger,
     placement: placement,
     pickerProps: (0, _pick.default)(props, _Picker.pickTriggerPropKeys),
     trigger: ['click', 'focus'],
-    open: open || focus && hasItems,
-    speaker: renderDropdownMenu
+    open: expanded,
+    speaker: renderPopup
   }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     className: classes,
-    style: style
-  }, restProps), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, htmlInputProps, {
-    id: id,
+    style: style,
+    ref: root
+  }, restProps), /*#__PURE__*/_react.default.createElement(_Combobox.default, (0, _extends2.default)({}, htmlInputProps, {
     disabled: disabled,
     value: value,
     size: size,
     readOnly: readOnly,
+    expanded: expanded,
+    focusItemValue: focusItemValue,
     onBlur: handleInputBlur,
     onFocus: handleInputFocus,
     onChange: handleChange,

package/cjs/AutoComplete/Combobox.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type InputProps } from '../Input';
+interface ComboboxProps extends InputProps {
+    expanded?: boolean;
+    focusItemValue?: string | null;
+}
+declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLInputElement>>;
+export default Combobox;