[base] Move hooks to their own directories (#36235)

docs/data/base/components/badge/badge.md

@@ -92,7 +92,7 @@ The following code snippet applies a CSS class called `my-badge` to the badge sl
 ## Hook
 
 ```jsx
-import { useBadge } from '@mui/base/BadgeUnstyled';
+import useBadge from '@mui/base/useBadge';
 ```
 
 The `useBadge` hook lets you apply the functionality of a badge to a fully custom component.

docs/data/base/components/button/UseButton.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { useButton } from '@mui/base/ButtonUnstyled';
+
+import useButton from '@mui/base/useButton';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/UseButton.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { ButtonUnstyledProps, useButton } from '@mui/base/ButtonUnstyled';
+import { ButtonUnstyledProps } from '@mui/base/ButtonUnstyled';
+import useButton from '@mui/base/useButton';
 import { styled } from '@mui/system';
 import Stack from '@mui/material/Stack';
 

docs/data/base/components/button/button.md

@@ -79,7 +79,7 @@ Similarly, `<ButtonUnstyled component="span" type="reset">` will not reset its p
 ## Hook
 
 ```js
-import { useButton } from '@mui/base/ButtonUnstyled';
+import useButton from '@mui/base/useButton';
 ```
 
 The `useButton` hook lets you apply the functionality of a button to a fully custom component.

docs/data/base/components/input/UseInput.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useInput } from '@mui/base';
+import useInput from '@mui/base/useInput';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 

docs/data/base/components/input/UseInput.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useInput } from '@mui/base';
+import useInput from '@mui/base/useInput';
 import { styled } from '@mui/system';
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
 

docs/data/base/components/input/input.md

@@ -85,7 +85,7 @@ The following code snippet applies a CSS class called `my-input` to the input sl
 ## Hook
 
 ```js
-import { useInput } from '@mui/base/InputUnstyled';
+import useInput from '@mui/base/useInput';
 ```
 
 The `useInput` hook lets you apply the functionality of an input to a fully custom component.

docs/data/base/components/menu/UseMenu.js

@@ -1,7 +1,8 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useMenu, MenuUnstyledContext } from '@mui/base/MenuUnstyled';
-import { useMenuItem } from '@mui/base/MenuItemUnstyled';
+import { MenuUnstyledContext } from '@mui/base/MenuUnstyled';
+import useMenu from '@mui/base/useMenu';
+import useMenuItem from '@mui/base/useMenuItem';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { GlobalStyles } from '@mui/system';
 import clsx from 'clsx';

docs/data/base/components/menu/UseMenu.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import {
-  useMenu,
   MenuUnstyledContext,
   MenuUnstyledContextType,
 } from '@mui/base/MenuUnstyled';
-import { useMenuItem } from '@mui/base/MenuItemUnstyled';
+import useMenu from '@mui/base/useMenu';
+import useMenuItem from '@mui/base/useMenuItem';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { GlobalStyles } from '@mui/system';
 import clsx from 'clsx';

docs/data/base/components/menu/menu.md

@@ -111,8 +111,8 @@ Unstyled Menu Item can set the following classes:
 ## Hooks
 
 ```jsx
-import { useMenu } from '@mui/base/MenuUnstyled';
-import { useMenuItem } from '@mui/base/MenuItemUnstyled';
+import useMenu from '@mui/base/useMenu';
+import useMenuItem from '@mui/base/useMenuItem';
 ```
 
 The `useMenu` and `useMenuItem` hooks let you apply the functionality of the Menu components to fully custom components.

docs/data/base/components/select/UnstyledSelectCustomRenderValue.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled';
+
 import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';

docs/data/base/components/select/UnstyledSelectCustomRenderValue.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import SelectUnstyled, {
   SelectUnstyledProps,
   selectUnstyledClasses,
-  SelectOption,
 } from '@mui/base/SelectUnstyled';
+import { SelectOption } from '@mui/base/useSelect';
 import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';

docs/data/base/components/select/UnstyledSelectObjectValuesForm.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import SelectUnstyled, { selectUnstyledClasses } from '@mui/base/SelectUnstyled';
+
 import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';

docs/data/base/components/select/UnstyledSelectObjectValuesForm.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import SelectUnstyled, {
   SelectUnstyledProps,
   selectUnstyledClasses,
-  SelectOption,
 } from '@mui/base/SelectUnstyled';
+import { SelectOption } from '@mui/base/useSelect';
 import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled';
 import PopperUnstyled from '@mui/base/PopperUnstyled';
 import { styled } from '@mui/system';

docs/data/base/components/select/select.md

@@ -146,7 +146,7 @@ The following code snippet applies a CSS class called `my-listbox` to the listbo
 ## Hook
 
 ```js
-import { useSelect } from '@mui/base/SelectUnstyled';
+import useSelect from '@mui/base/useSelect';
 ```
 
 The `useSelect` hook lets you apply the functionality of a select to a fully custom component.

docs/data/base/components/slider/slider.md

@@ -129,7 +129,7 @@ The following code snippet applies a CSS class called `my-rail` to the rail slot
 ## Hook
 
 ```js
-import { useSlider } from '@mui/base/SliderUnstyled';
+import useSlider from '@mui/base/useSlider';
 ```
 
 The `useSlider` hook lets you apply the functionality of a slider to a fully custom component.

docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx

@@ -3,7 +3,8 @@ import { Transition } from 'react-transition-group';
 import { styled } from '@mui/system';
 import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 import CloseIcon from '@mui/icons-material/Close';
-import SnackbarUnstyled, { SnackbarCloseReason } from '@mui/base/SnackbarUnstyled';
+import SnackbarUnstyled from '@mui/base/SnackbarUnstyled';
+import { SnackbarCloseReason } from '@mui/base/useSnackbar';
 
 const blue = {
   50: '#F0F7FF',

docs/data/base/components/snackbar/UnstyledSnackbar.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { styled, keyframes, css } from '@mui/system';
-import SnackbarUnstyled, { SnackbarCloseReason } from '@mui/base/SnackbarUnstyled';
+import SnackbarUnstyled from '@mui/base/SnackbarUnstyled';
+import { SnackbarCloseReason } from '@mui/base/useSnackbar';
 
 const blue = {
   50: '#F0F7FF',

docs/data/base/components/snackbar/UseSnackbar.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useSnackbar } from '@mui/base/SnackbarUnstyled';
+import useSnackbar from '@mui/base/useSnackbar';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import { css, keyframes, styled } from '@mui/system';
 

docs/data/base/components/snackbar/UseSnackbar.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useSnackbar } from '@mui/base/SnackbarUnstyled';
+import useSnackbar from '@mui/base/useSnackbar';
 import ClickAwayListener from '@mui/base/ClickAwayListener';
 import { css, keyframes, styled } from '@mui/system';
 

docs/data/base/components/snackbar/snackbar.md

@@ -72,7 +72,7 @@ Use the `component` prop to override the root slot with a custom element:
 ## Hook
 
 ```js
-import { useSnackbar } from '@mui/base/SnackbarUnstyled';
+import useSnackbar from '@mui/base/useSnackbar';
 ```
 
 The `useSnackbar` hook lets you apply the functionality of a snackbar to a fully custom component.

docs/data/base/components/switch/UseSwitchesBasic.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { useSwitch } from '@mui/base/SwitchUnstyled';
+import useSwitch from '@mui/base/useSwitch';
 
 const blue = {
   500: '#007FFF',

docs/data/base/components/switch/UseSwitchesBasic.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { useSwitch, UseSwitchParameters } from '@mui/base/SwitchUnstyled';
+import useSwitch, { UseSwitchParameters } from '@mui/base/useSwitch';
 
 const blue = {
   500: '#007FFF',

docs/data/base/components/switch/UseSwitchesCustom.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { useSwitch } from '@mui/base/SwitchUnstyled';
+import useSwitch from '@mui/base/useSwitch';
 
 const blue = {
   700: '#0059B2',

docs/data/base/components/switch/UseSwitchesCustom.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
-import { useSwitch, UseSwitchParameters } from '@mui/base/SwitchUnstyled';
+import useSwitch, { UseSwitchParameters } from '@mui/base/useSwitch';
 
 const blue = {
   700: '#0059B2',

docs/data/base/components/switch/switch.md

@@ -84,7 +84,7 @@ The following code snippet applies a CSS class called `my-thumb` to the thumb sl
 ## Hook
 
 ```js
-import { useSwitch } from '@mui/base/SwitchUnstyled';
+import useSwitch from '@mui/base/useSwitch';
 ```
 
 The `useSwitch` hook lets you apply the functionality of a switch to a fully custom component.

docs/data/base/getting-started/customization/StylingHooks.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { useSwitch } from '@mui/base/SwitchUnstyled';
+import useSwitch from '@mui/base/useSwitch';
 import { styled } from '@mui/system';
 
 const BasicSwitchRoot = styled('span')`

docs/data/base/getting-started/customization/StylingHooks.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import { useSwitch, UseSwitchParameters } from '@mui/base/SwitchUnstyled';
+import useSwitch, { UseSwitchParameters } from '@mui/base/useSwitch';
 import { styled } from '@mui/system';
 
 const BasicSwitchRoot = styled('span')`

docs/data/material/components/autocomplete/CustomizedHook.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
+import useAutocomplete from '@mui/base/useAutocomplete';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import { styled } from '@mui/material/styles';

docs/data/material/components/autocomplete/CustomizedHook.tsx

@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  useAutocomplete,
-  AutocompleteGetTagProps,
-} from '@mui/base/AutocompleteUnstyled';
+import useAutocomplete, { AutocompleteGetTagProps } from '@mui/base/useAutocomplete';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 import { styled } from '@mui/material/styles';

docs/data/material/components/autocomplete/UseAutocomplete.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
+import useAutocomplete from '@mui/base/useAutocomplete';
 import { styled } from '@mui/system';
 
 const Label = styled('label')({

docs/data/material/components/autocomplete/UseAutocomplete.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
+import useAutocomplete from '@mui/base/useAutocomplete';
 import { styled } from '@mui/system';
 
 const Label = styled('label')({

docs/data/material/components/autocomplete/autocomplete.md

@@ -136,7 +136,7 @@ related to the rendering of JSX.
 The Autocomplete component is built on this hook.
 
 ```tsx
-import { useAutocomplete } from '@mui/base/AutocompleteUnstyled';
+import useAutocomplete from '@mui/base/useAutocomplete';
 ```
 
 The `useAutocomplete` hook is also reexported from @mui/material for convenience and backward compatibility.

docs/pages/base/api/use-autocomplete.json

@@ -147,6 +147,6 @@
   },
   "returnValue": {},
   "name": "useAutocomplete",
-  "filename": "/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js",
+  "filename": "/packages/mui-base/src/useAutocomplete/useAutocomplete.js",
   "demos": "<ul></ul>"
 }

docs/pages/base/api/use-badge.json

@@ -7,6 +7,6 @@
   },
   "returnValue": {},
   "name": "useBadge",
-  "filename": "/packages/mui-base/src/BadgeUnstyled/useBadge.ts",
+  "filename": "/packages/mui-base/src/useBadge/useBadge.ts",
   "demos": "<ul><li><a href=\"/base/react-badge/#hook\">Unstyled badge</a></li></ul>"
 }

docs/pages/base/api/use-button.json

@@ -57,6 +57,6 @@
     }
   },
   "name": "useButton",
-  "filename": "/packages/mui-base/src/ButtonUnstyled/useButton.ts",
+  "filename": "/packages/mui-base/src/useButton/useButton.ts",
   "demos": "<ul><li><a href=\"/base/react-button/#hook\">Unstyled Button</a></li></ul>"
 }

docs/pages/base/api/use-input.json

@@ -72,6 +72,6 @@
     "value": { "type": { "name": "unknown", "description": "unknown" }, "required": true }
   },
   "name": "useInput",
-  "filename": "/packages/mui-base/src/InputUnstyled/useInput.ts",
+  "filename": "/packages/mui-base/src/useInput/useInput.ts",
   "demos": "<ul><li><a href=\"/base/react-input/#hook\">Unstyled Input</a></li></ul>"
 }

docs/pages/base/api/use-menu-item.json

@@ -15,6 +15,6 @@
   },
   "returnValue": {},
   "name": "useMenuItem",
-  "filename": "/packages/mui-base/src/MenuItemUnstyled/useMenuItem.ts",
+  "filename": "/packages/mui-base/src/useMenuItem/useMenuItem.ts",
   "demos": "<ul><li><a href=\"/base/react-menu/#hooks\">Unstyled Menu</a></li></ul>"
 }

docs/pages/base/api/use-menu.json

@@ -9,6 +9,6 @@
   },
   "returnValue": {},
   "name": "useMenu",
-  "filename": "/packages/mui-base/src/MenuUnstyled/useMenu.ts",
+  "filename": "/packages/mui-base/src/useMenu/useMenu.ts",
   "demos": "<ul><li><a href=\"/base/react-menu/#hooks\">Unstyled Menu</a></li></ul>"
 }

docs/pages/base/api/use-option.json

@@ -22,6 +22,6 @@
     "selected": { "type": { "name": "boolean", "description": "boolean" }, "required": true }
   },
   "name": "useOption",
-  "filename": "/packages/mui-base/src/OptionUnstyled/useOption.ts",
+  "filename": "/packages/mui-base/src/useOption/useOption.ts",
   "demos": "<ul></ul>"
 }

docs/pages/base/api/use-select.json

@@ -2,6 +2,6 @@
   "parameters": {},
   "returnValue": {},
   "name": "useSelect",
-  "filename": "/packages/mui-base/src/SelectUnstyled/useSelect.ts",
+  "filename": "/packages/mui-base/src/useSelect/useSelect.ts",
   "demos": "<ul><li><a href=\"/base/react-select/#hook\">Unstyled Select</a></li></ul>"
 }

docs/pages/base/api/use-slider.json

@@ -43,6 +43,6 @@
   },
   "returnValue": {},
   "name": "useSlider",
-  "filename": "/packages/mui-base/src/SliderUnstyled/useSlider.ts",
+  "filename": "/packages/mui-base/src/useSlider/useSlider.ts",
   "demos": "<ul><li><a href=\"/base/react-slider/#hook\">Unstyled Slider</a></li></ul>"
 }

docs/pages/base/api/use-snackbar.json

@@ -20,6 +20,6 @@
   },
   "returnValue": {},
   "name": "useSnackbar",
-  "filename": "/packages/mui-base/src/SnackbarUnstyled/useSnackbar.ts",
+  "filename": "/packages/mui-base/src/useSnackbar/useSnackbar.ts",
   "demos": "<ul><li><a href=\"/base/react-snackbar/#hook\">Unstyled Snackbar</a></li></ul>"
 }

docs/pages/base/api/use-switch.json

@@ -23,6 +23,6 @@
   },
   "returnValue": {},
   "name": "useSwitch",
-  "filename": "/packages/mui-base/src/SwitchUnstyled/useSwitch.ts",
+  "filename": "/packages/mui-base/src/useSwitch/useSwitch.ts",
   "demos": "<ul><li><a href=\"/base/react-switch/#hook\">Unstyled Switch</a></li></ul>"
 }

docs/pages/base/api/use-tab-panel.json

@@ -20,6 +20,6 @@
     }
   },
   "name": "useTabPanel",
-  "filename": "/packages/mui-base/src/TabPanelUnstyled/useTabPanel.ts",
+  "filename": "/packages/mui-base/src/useTabPanel/useTabPanel.ts",
   "demos": "<ul><li><a href=\"/base/react-tabs/#hooks\">Unstyled Tabs</a></li></ul>"
 }

docs/pages/base/api/use-tab.json

@@ -48,6 +48,6 @@
     }
   },
   "name": "useTab",
-  "filename": "/packages/mui-base/src/TabUnstyled/useTab.ts",
+  "filename": "/packages/mui-base/src/useTab/useTab.ts",
   "demos": "<ul><li><a href=\"/base/react-tabs/#hooks\">Unstyled Tabs</a></li></ul>"
 }