Select demos renamed

mui · Sep 21, 2023 · 65e7fee · 65e7fee
1 parent 5a7d682
commit 65e7fee
Show file tree

Hide file tree

Showing 41 changed files with 234 additions and 227 deletions.
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/css/index.js b/docs/data/base/components/select/UnstyledSelectBasic/css/index.js
@@ -7,20 +7,20 @@ export default function UnstyledSelectBasic() {
   return (
     <React.Fragment>
       <Select
-        className="CustomSelect"
+        className="BaseSelect"
         slotProps={{
-          listbox: { className: 'CustomSelect-listbox' },
-          popper: { className: 'CustomSelect-popper' },
+          listbox: { className: 'BaseSelect-listbox' },
+          popper: { className: 'BaseSelect-popper' },
         }}
         defaultValue={10}
       >
-        <Option className="CustomSelect-option" value={10}>
+        <Option className="BaseSelect-option" value={10}>
           Ten
         </Option>
-        <Option className="CustomSelect-option" value={20}>
+        <Option className="BaseSelect-option" value={20}>
           Twenty
         </Option>
-        <Option className="CustomSelect-option" value={30}>
+        <Option className="BaseSelect-option" value={30}>
           Thirty
         </Option>
       </Select>
@@ -67,7 +67,7 @@ function Styles() {
   return (
     <style>
       {`
-      .CustomSelect {
+      .BaseSelect {
         font-family: IBM Plex Sans, sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
@@ -109,7 +109,7 @@ function Styles() {
           float: right;
         }
       }
-      .CustomSelect-listbox {
+      .BaseSelect-listbox {
         font-family: IBM Plex Sans, sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
@@ -126,10 +126,10 @@ function Styles() {
           isDarkMode ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
         };
       }
-      .CustomSelect-popper {
+      .BaseSelect-popper {
         z-index: 1;
       }
-      .CustomSelect-option {
+      .BaseSelect-option {
         list-style: none;
         padding: 8px;
         border-radius: 8px;

diff --git a/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/css/index.tsx
@@ -7,20 +7,20 @@ export default function UnstyledSelectBasic() {
   return (
     <React.Fragment>
       <Select
-        className="CustomSelect"
+        className="BaseSelect"
         slotProps={{
-          listbox: { className: 'CustomSelect-listbox' },
-          popper: { className: 'CustomSelect-popper' },
+          listbox: { className: 'BaseSelect-listbox' },
+          popper: { className: 'BaseSelect-popper' },
         }}
         defaultValue={10}
       >
-        <Option className="CustomSelect-option" value={10}>
+        <Option className="BaseSelect-option" value={10}>
           Ten
         </Option>
-        <Option className="CustomSelect-option" value={20}>
+        <Option className="BaseSelect-option" value={20}>
           Twenty
         </Option>
-        <Option className="CustomSelect-option" value={30}>
+        <Option className="BaseSelect-option" value={30}>
           Thirty
         </Option>
       </Select>
@@ -67,7 +67,7 @@ function Styles() {
   return (
     <style>
       {`
-      .CustomSelect {
+      .BaseSelect {
         font-family: IBM Plex Sans, sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
@@ -109,7 +109,7 @@ function Styles() {
           float: right;
         }
       }
-      .CustomSelect-listbox {
+      .BaseSelect-listbox {
         font-family: IBM Plex Sans, sans-serif;
         font-size: 0.875rem;
         box-sizing: border-box;
@@ -126,10 +126,10 @@ function Styles() {
           isDarkMode ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
         };
       }
-      .CustomSelect-popper {
+      .BaseSelect-popper {
         z-index: 1;
       }
-      .CustomSelect-option {
+      .BaseSelect-option {
         list-style: none;
         padding: 8px;
         border-radius: 8px;

diff --git a/docs/data/base/components/select/UnstyledSelectBasic/system/index.js b/docs/data/base/components/select/UnstyledSelectBasic/system/index.js
@@ -1,27 +1,27 @@
 import * as React from 'react';
-import { Select, selectClasses } from '@mui/base/Select';
+import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 import { Option, optionClasses } from '@mui/base/Option';
 import { Popper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
-const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
+const Select = React.forwardRef(function Select(props, ref) {
   const slots = {
     root: StyledButton,
     listbox: StyledListbox,
     popper: StyledPopper,
     ...props.slots,
   };
 
-  return <Select {...props} ref={ref} slots={slots} />;
+  return <BaseSelect {...props} ref={ref} slots={slots} />;
 });
 
 export default function UnstyledSelectBasic() {
   return (
-    <CustomSelect defaultValue={10}>
+    <Select defaultValue={10}>
       <StyledOption value={10}>Ten</StyledOption>
       <StyledOption value={20}>Twenty</StyledOption>
       <StyledOption value={30}>Thirty</StyledOption>
-    </CustomSelect>
+    </Select>
   );
 }
 

diff --git a/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { Select, SelectProps, selectClasses } from '@mui/base/Select';
+import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
 import { Option, optionClasses } from '@mui/base/Option';
 import { Popper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
 
-const CustomSelect = React.forwardRef(function CustomSelect<
+const Select = React.forwardRef(function Select<
   TValue extends {},
   Multiple extends boolean,
 >(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
@@ -15,18 +15,18 @@ const CustomSelect = React.forwardRef(function CustomSelect<
     ...props.slots,
   };
 
-  return <Select {...props} ref={ref} slots={slots} />;
+  return <BaseSelect {...props} ref={ref} slots={slots} />;
 }) as <TValue extends {}, Multiple extends boolean>(
   props: SelectProps<TValue, Multiple> & React.RefAttributes<HTMLButtonElement>,
 ) => JSX.Element;
 
 export default function UnstyledSelectBasic() {
   return (
-    <CustomSelect defaultValue={10}>
+    <Select defaultValue={10}>
       <StyledOption value={10}>Ten</StyledOption>
       <StyledOption value={20}>Twenty</StyledOption>
       <StyledOption value={30}>Thirty</StyledOption>
-    </CustomSelect>
+    </Select>
   );
 }
 

diff --git a/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx.preview b/docs/data/base/components/select/UnstyledSelectBasic/system/index.tsx.preview
@@ -1,5 +1,5 @@
-<CustomSelect defaultValue={10}>
+<Select defaultValue={10}>
   <StyledOption value={10}>Ten</StyledOption>
   <StyledOption value={20}>Twenty</StyledOption>
   <StyledOption value={30}>Thirty</StyledOption>
-</CustomSelect>
+</Select>
diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Select } from '@mui/base/Select';
+import { Select as BaseSelect } from '@mui/base/Select';
 import { Option as BaseOption } from '@mui/base/Option';
 import { useTheme } from '@mui/system';
 import clsx from 'clsx';
@@ -50,23 +50,23 @@ export default function UnstyledSelectBasic() {
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <CustomSelect defaultValue={10}>
+      <Select defaultValue={10}>
         <Option value={10}>Ten</Option>
         <Option value={20}>Twenty</Option>
         <Option value={30}>Thirty</Option>
-      </CustomSelect>
+      </Select>
     </div>
   );
 }
 
 const resolveSlotProps = (fn, args) => (typeof fn === 'function' ? fn(args) : fn);
 
-const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
+const Select = React.forwardRef(function CustomSelect(props, ref) {
   // Replace this with your app logic for determining dark modes
   const isDarkMode = useIsDarkMode();
 
   return (
-    <Select
+    <BaseSelect
       ref={ref}
       {...props}
       className={clsx('CustomSelect', props.className)}
@@ -122,7 +122,7 @@ const CustomSelect = React.forwardRef(function CustomSelect(props, ref) {
   );
 });
 
-CustomSelect.propTypes = {
+Select.propTypes = {
   className: PropTypes.string,
   /**
    * The props used for each slot inside the Input.

diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Select, SelectProps } from '@mui/base/Select';
+import { Select as BaseSelect, SelectProps } from '@mui/base/Select';
 import {
   Option as BaseOption,
   OptionProps,
@@ -57,27 +57,27 @@ export default function UnstyledSelectBasic() {
 
   return (
     <div className={isDarkMode ? 'dark' : ''}>
-      <CustomSelect defaultValue={10}>
+      <Select defaultValue={10}>
         <Option value={10}>Ten</Option>
         <Option value={20}>Twenty</Option>
         <Option value={30}>Thirty</Option>
-      </CustomSelect>
+      </Select>
     </div>
   );
 }
 
 const resolveSlotProps = (fn: any, args: any) =>
   typeof fn === 'function' ? fn(args) : fn;
 
-const CustomSelect = React.forwardRef(function CustomSelect<
+const Select = React.forwardRef(function CustomSelect<
   TValue extends {},
   Multiple extends boolean,
 >(props: SelectProps<TValue, Multiple>, ref: React.ForwardedRef<HTMLButtonElement>) {
   // Replace this with your app logic for determining dark modes
   const isDarkMode = useIsDarkMode();
 
   return (
-    <Select
+    <BaseSelect
       ref={ref}
       {...props}
       className={clsx('CustomSelect', props.className)}

diff --git a/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx.preview b/docs/data/base/components/select/UnstyledSelectBasic/tailwind/index.tsx.preview
@@ -1,5 +1,5 @@
-<CustomSelect defaultValue={10}>
+<Select defaultValue={10}>
   <Option value={10}>Ten</Option>
   <Option value={20}>Twenty</Option>
   <Option value={30}>Thirty</Option>
-</CustomSelect>
+</Select>
diff --git a/docs/data/base/components/select/UnstyledSelectControlled.js b/docs/data/base/components/select/UnstyledSelectControlled.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Select, selectClasses } from '@mui/base/Select';
+import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
 import { Option, optionClasses } from '@mui/base/Option';
 import { Popper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
@@ -9,29 +9,29 @@ export default function UnstyledSelectControlled() {
   const [value, setValue] = React.useState(10);
   return (
     <div>
-      <CustomSelect value={value} onChange={(_, newValue) => setValue(newValue)}>
+      <Select value={value} onChange={(_, newValue) => setValue(newValue)}>
         <StyledOption value={10}>Ten</StyledOption>
         <StyledOption value={20}>Twenty</StyledOption>
         <StyledOption value={30}>Thirty</StyledOption>
-      </CustomSelect>
+      </Select>
 
       <Paragraph>Selected value: {value}</Paragraph>
     </div>
   );
 }
 
-function CustomSelect(props) {
+function Select(props) {
   const slots = {
     root: StyledButton,
     listbox: StyledListbox,
     popper: StyledPopper,
     ...props.slots,
   };
 
-  return <Select {...props} slots={slots} />;
+  return <BaseSelect {...props} slots={slots} />;
 }
 
-CustomSelect.propTypes = {
+Select.propTypes = {
   /**
    * The components used for each slot inside the Select.
    * Either a string to use a HTML element or a component.

diff --git a/docs/data/base/components/select/UnstyledSelectControlled.tsx b/docs/data/base/components/select/UnstyledSelectControlled.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Select, SelectProps, selectClasses } from '@mui/base/Select';
+import { Select as BaseSelect, SelectProps, selectClasses } from '@mui/base/Select';
 import { Option, optionClasses } from '@mui/base/Option';
 import { Popper } from '@mui/base/Popper';
 import { styled } from '@mui/system';
@@ -8,26 +8,26 @@ export default function UnstyledSelectControlled() {
   const [value, setValue] = React.useState<number | null>(10);
   return (
     <div>
-      <CustomSelect value={value} onChange={(_, newValue) => setValue(newValue)}>
+      <Select value={value} onChange={(_, newValue) => setValue(newValue)}>
         <StyledOption value={10}>Ten</StyledOption>
         <StyledOption value={20}>Twenty</StyledOption>
         <StyledOption value={30}>Thirty</StyledOption>
-      </CustomSelect>
+      </Select>
 
       <Paragraph>Selected value: {value}</Paragraph>
     </div>
   );
 }
 
-function CustomSelect(props: SelectProps<number, false>) {
+function Select(props: SelectProps<number, false>) {
   const slots: SelectProps<number, false>['slots'] = {
     root: StyledButton,
     listbox: StyledListbox,
     popper: StyledPopper,
     ...props.slots,
   };
 
-  return <Select {...props} slots={slots} />;
+  return <BaseSelect {...props} slots={slots} />;
 }
 
 const blue = {

diff --git a/docs/data/base/components/select/UnstyledSelectControlled.tsx.preview b/docs/data/base/components/select/UnstyledSelectControlled.tsx.preview
@@ -1,7 +1,7 @@
-<CustomSelect value={value} onChange={(_, newValue) => setValue(newValue)}>
+<Select value={value} onChange={(_, newValue) => setValue(newValue)}>
   <StyledOption value={10}>Ten</StyledOption>
   <StyledOption value={20}>Twenty</StyledOption>
   <StyledOption value={30}>Thirty</StyledOption>
-</CustomSelect>
+</Select>
 
 <Paragraph>Selected value: {value}</Paragraph>