Imports are not working / @mui/base not working anymore

[Stophface]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://mui.com/material-ui/react-autocomplete/#useautocomplete (taken from here: https://mui.com/material-ui/react-autocomplete/#useautocomplete)
https://codesandbox.io/s/vfq40l?file=/demo.tsx (taken from here: https://mui.com/base/react-select/#hooks)

Current behavior 😯

I am trying to work with @mui/base in a TypeScript project, which is breaking on me. These are the versions I installed

"@mui/base": "^5.0.0-alpha.115",
"@mui/material": "^5.11.13",

However, as soon as I try to import something I get various error messages

import {useAutocomplete} from '@mui/base/AutocompleteUnstyled';

Can't resolve '@mui/base/AutocompleteUnstyled'

import {useSelect, SelectOption} from '@mui/base';
const {
    getButtonProps,
    getListboxProps,
    getOptionProps,
    getOptionState,
} = useSelect({
    listboxRef,
    onOpenChange: setListBoxVisible,
    onChange: (event, value) => setValue(options.filter(option => option.value === value)),
    open: listBoxVisible,
    options,
    value
});

This highlights getOptionProps, getOptionState with the message

Property 'getOptionProps' does not exist on type 'UseSelectReturnValue '.
Property 'getOptionState' does not exist on type 'UseSelectReturnValue '.

So the examples in the documentation do not work anymore... Why is that?

Expected behavior 🤔

I expect the imports to work as stated in the documentation as well as the code.

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

   System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 18.12.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.1702.0), Chromium (113.0.1774.42)
  npmPackages:
    @emotion/react: ^11.10.6 => 11.11.0
    @emotion/styled: ^11.10.6 => 11.11.0
    @mui/base: ^5.0.0-alpha.115 => 5.0.0-beta.2
    @mui/core-downloads-tracker:  5.13.2
    @mui/material: ^5.11.13 => 5.13.2
    @mui/private-theming:  5.13.1
    @mui/styled-engine:  5.13.2
    @mui/system:  5.13.2
    @mui/types:  7.2.4
    @mui/utils:  5.13.1
    @types/react: ^18.2.6 => 18.2.6
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    styled-components: ^5.3.9 => 5.3.10
    typescript: ^4.9.5 => 4.9.5

Working with firefox

[hbjORbj]

Can't resolve '@mui/base/AutocompleteUnstyled'

'@mui/base/Autocomplete' is correct as we removed the Unstyled suffix. This breaking change was introduced in this PR.

You can use this codemod to help with the migration:

npx @mui/codemod v5.0.0/base-remove-unstyled-suffix <path>

[Stophface]

@hbjORbj Thanks, I understand.
That does not explain why I am getting this TypeScript Compiler error though

import {useSelect, SelectOption} from '@mui/base';
const {
    getButtonProps,
    getListboxProps,
    getOptionProps,
    getOptionState,
} = useSelect({
    listboxRef,
    onOpenChange: setListBoxVisible,
    onChange: (event, value) => setValue(options.filter(option => option.value === value)),
    open: listBoxVisible,
    options,
    value
});

The compiler highlights getOptionProps, getOptionState with the message

Property 'getOptionProps' does not exist on type 'UseSelectReturnValue '.
Property 'getOptionState' does not exist on type 'UseSelectReturnValue '.

[hbjORbj]

I do not see TS error in the codesandbox you provided.

[michaldudak]

@Stophface, these fields were removed from useSelect's return type. Now, a useOption hook can be used to get options' props and state.