rename fake TextField

mui · Nov 24, 2023 · 05b6540 · 05b6540
1 parent 15bed58
commit 05b6540
Show file tree

Hide file tree

Showing 8 changed files with 57 additions and 54 deletions.
diff --git a/packages/x-date-pickers/src/internals/components/FakeTextField/index.ts b/packages/x-date-pickers/src/internals/components/FakeTextField/index.ts
diff --git a/...nals/components/FakeTextField/Outline.tsx → ...s/components/PickersTextField/Outline.tsx b/...nals/components/FakeTextField/Outline.tsx → ...s/components/PickersTextField/Outline.tsx
diff --git a/...ls/components/FakeTextField/FakeInput.tsx → ...ponents/PickersTextField/PickersInput.tsx b/...ls/components/FakeTextField/FakeInput.tsx → ...ponents/PickersTextField/PickersInput.tsx
@@ -9,12 +9,12 @@ import {
   unstable_capitalize as capitalize,
   visuallyHidden,
 } from '@mui/utils';
-import { fakeInputClasses, getFakeInputUtilityClass } from './fakeTextFieldClasses';
+import { pickersInputClasses, getPickersInputUtilityClass } from './pickersTextFieldClasses';
 import Outline from './Outline';
-import { FakeInputElement, FakeInputProps } from './FakeInput.types';
+import { PickersInputElement, PickersInputProps } from './PickersInput.types';
 
 const SectionsWrapper = styled(Box, {
-  name: 'MuiFakeInput',
+  name: 'MuiPickersInput',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: OwnerStateType }>(({ theme, ownerState }) => {
@@ -29,25 +29,25 @@ const SectionsWrapper = styled(Box, {
     width: ownerState.fullWidth ? '100%' : '25ch',
     position: 'relative',
     borderRadius: (theme.vars || theme).shape.borderRadius,
-    [`&:hover .${fakeInputClasses.notchedOutline}`]: {
+    [`&:hover .${pickersInputClasses.notchedOutline}`]: {
       borderColor: (theme.vars || theme).palette.text.primary,
     },
 
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
-      [`&:hover .${fakeInputClasses.notchedOutline}`]: {
+      [`&:hover .${pickersInputClasses.notchedOutline}`]: {
         borderColor: theme.vars
           ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)`
           : borderColor,
       },
     },
-    [`&.${fakeInputClasses.focused} .${fakeInputClasses.notchedOutline}`]: {
+    [`&.${pickersInputClasses.focused} .${pickersInputClasses.notchedOutline}`]: {
       borderStyle: 'solid',
       borderColor: (theme.vars || theme).palette[ownerState.color].main,
       borderWidth: 2,
     },
-    [`&.${fakeInputClasses.disabled}`]: {
-      [`& .${fakeInputClasses.notchedOutline}`]: {
+    [`&.${pickersInputClasses.disabled}`]: {
+      [`& .${pickersInputClasses.notchedOutline}`]: {
         borderColor: (theme.vars || theme).palette.action.disabled,
       },
 
@@ -56,7 +56,7 @@ const SectionsWrapper = styled(Box, {
       },
     },
 
-    [`&.${fakeInputClasses.error} .${fakeInputClasses.notchedOutline}`]: {
+    [`&.${pickersInputClasses.error} .${pickersInputClasses.notchedOutline}`]: {
       borderColor: (theme.vars || theme).palette.error.main,
     },
 
@@ -67,7 +67,7 @@ const SectionsWrapper = styled(Box, {
 });
 
 const SectionsContainer = styled('div', {
-  name: 'MuiFakeInput',
+  name: 'MuiPickersInput',
   slot: 'Input',
   overridesResolver: (props, styles) => styles.input,
 })<{ ownerState: OwnerStateType }>(({ theme, ownerState }) => ({
@@ -79,7 +79,7 @@ const SectionsContainer = styled('div', {
 }));
 
 const SectionContainer = styled('span', {
-  name: 'MuiFakeInput',
+  name: 'MuiPickersInput',
   slot: 'Section',
   overridesResolver: (props, styles) => styles.section,
 })(({ theme }) => ({
@@ -90,7 +90,7 @@ const SectionContainer = styled('span', {
 }));
 
 const SectionInput = styled('span', {
-  name: 'MuiFakeInput',
+  name: 'MuiPickersInput',
   slot: 'Content',
   overridesResolver: (props, styles) => styles.content,
 })(({ theme }) => ({
@@ -101,23 +101,23 @@ const SectionInput = styled('span', {
 }));
 
 const SectionSeparator = styled('span', {
-  name: 'MuiFakeInput',
+  name: 'MuiPickersInput',
   slot: 'Separator',
   overridesResolver: (props, styles) => styles.separator,
 })(() => ({
   whiteSpace: 'pre',
 }));
 
 const FakeHiddenInput = styled('input', {
-  name: 'MuiFakeInput',
+  name: 'MuiPickersInput',
   slot: 'HiddenInput',
   overridesResolver: (props, styles) => styles.hiddenInput,
 })({
   ...visuallyHidden,
 });
 
 const NotchedOutlineRoot = styled(Outline, {
-  name: 'MuiFakeInput',
+  name: 'MuiPickersInput',
   slot: 'NotchedOutline',
   overridesResolver: (props, styles) => styles.notchedOutline,
 })(({ theme }) => {
@@ -135,7 +135,7 @@ function InputContent({
   contentEditable,
   ownerState,
 }: {
-  elements: FakeInputElement[];
+  elements: PickersInputElement[];
   contentEditable?: string | boolean;
   ownerState: OwnerStateType;
 }) {
@@ -151,14 +151,17 @@ function InputContent({
         <SectionContainer key={elementIndex} {...container}>
           <SectionSeparator
             {...before}
-            className={clsx(fakeInputClasses.before, before?.className)}
+            className={clsx(pickersInputClasses.before, before?.className)}
           />
           <SectionInput
             {...content}
-            className={clsx(fakeInputClasses.content, content?.className)}
+            className={clsx(pickersInputClasses.content, content?.className)}
             {...{ ownerState }}
           />
-          <SectionSeparator {...after} className={clsx(fakeInputClasses.after, after?.className)} />
+          <SectionSeparator
+            {...after}
+            className={clsx(pickersInputClasses.after, after?.className)}
+          />
         </SectionContainer>
       ))}
     </React.Fragment>
@@ -197,7 +200,7 @@ const useUtilityClasses = (ownerState: OwnerStateType) => {
     input: ['input'],
   };
 
-  return composeClasses(slots, getFakeInputUtilityClass, classes);
+  return composeClasses(slots, getPickersInputUtilityClass, classes);
 };
 
 // TODO: move to utils
@@ -216,7 +219,7 @@ function formControlState({ props, states, muiFormControl }) {
   }, {});
 }
 
-interface OwnerStateType extends FakeInputProps {
+interface OwnerStateType extends PickersInputProps {
   color: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
   disabled?: boolean;
   error?: boolean;
@@ -226,8 +229,8 @@ interface OwnerStateType extends FakeInputProps {
   adornedStart?: boolean;
 }
 
-const FakeInput = React.forwardRef(function FakeInput(
-  props: FakeInputProps,
+const PickersInput = React.forwardRef(function PickersInput(
+  props: PickersInputProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {
@@ -331,4 +334,4 @@ const FakeInput = React.forwardRef(function FakeInput(
   );
 });
 
-export default FakeInput;
+export default PickersInput;
diff --git a/...mponents/FakeTextField/FakeInput.types.ts → ...ts/PickersTextField/PickersInput.types.ts b/...mponents/FakeTextField/FakeInput.types.ts → ...ts/PickersTextField/PickersInput.types.ts
@@ -1,15 +1,15 @@
 import { OutlinedInputProps } from '@mui/material/OutlinedInput';
 import { FieldsTextFieldProps } from '../../models';
 
-export interface FakeInputElement {
+export interface PickersInputElement {
   container: React.HTMLAttributes<HTMLSpanElement>;
   content: React.HTMLAttributes<HTMLSpanElement>;
   before: React.HTMLAttributes<HTMLSpanElement>;
   after: React.HTMLAttributes<HTMLSpanElement>;
 }
 
-export interface FakeInputProps extends FieldsTextFieldProps {
-  elements: FakeInputElement[];
+export interface PickersInputProps extends FieldsTextFieldProps {
+  elements: PickersInputElement[];
   areAllSectionsEmpty?: boolean;
   valueStr: string;
   onValueStrChange: React.ChangeEventHandler<HTMLInputElement>;

diff --git a/...omponents/FakeTextField/FakeTextField.tsx → ...nts/PickersTextField/PickersTextField.tsx b/...omponents/FakeTextField/FakeTextField.tsx → ...nts/PickersTextField/PickersTextField.tsx
@@ -6,17 +6,17 @@ import { unstable_composeClasses as composeClasses, unstable_useId as useId } fr
 import InputLabel from '@mui/material/InputLabel';
 import FormHelperText from '@mui/material/FormHelperText';
 import FormControl from '@mui/material/FormControl';
-import { getFakeTextFieldUtilityClass } from './fakeTextFieldClasses';
-import FakeInput from './FakeInput';
-import { FakeTextFieldProps } from './FakeTextField.types';
+import { getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
+import PickersInput from './PickersInput';
+import { PickersTextFieldProps } from './PickersTextField.types';
 
-const FakeTextFieldRoot = styled(FormControl, {
-  name: 'MuiFakeTextField',
+const PickersTextFieldRoot = styled(FormControl, {
+  name: 'MuiPickersTextField',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root,
 })<{ ownerState: OwnerStateType }>({});
 
-const useUtilityClasses = (ownerState: FakeTextFieldProps) => {
+const useUtilityClasses = (ownerState: PickersTextFieldProps) => {
   const { focused, disabled, classes, required } = ownerState;
 
   const slots = {
@@ -28,13 +28,13 @@ const useUtilityClasses = (ownerState: FakeTextFieldProps) => {
     ],
   };
 
-  return composeClasses(slots, getFakeTextFieldUtilityClass, classes);
+  return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
 };
 
-type OwnerStateType = Partial<FakeTextFieldProps>;
+type OwnerStateType = Partial<PickersTextFieldProps>;
 
-export const FakeTextField = React.forwardRef(function FakeTextField(
-  props: FakeTextFieldProps,
+export const PickersTextField = React.forwardRef(function PickersTextField(
+  props: PickersTextFieldProps,
   ref: React.Ref<HTMLDivElement>,
 ) {
   const {
@@ -102,7 +102,7 @@ export const FakeTextField = React.forwardRef(function FakeTextField(
   };
 
   return (
-    <FakeTextFieldRoot
+    <PickersTextFieldRoot
       className={clsx(classes.root, className)}
       ref={handleRootRef}
       focused={focused}
@@ -117,7 +117,7 @@ export const FakeTextField = React.forwardRef(function FakeTextField(
       <InputLabel htmlFor={id} id={inputLabelId} {...InputLabelProps}>
         {label}
       </InputLabel>
-      <FakeInput
+      <PickersInput
         {...{ elements, valueStr, valueType, onWrapperClick, inputProps, label }}
         {...other}
         {...InputProps}
@@ -128,6 +128,6 @@ export const FakeTextField = React.forwardRef(function FakeTextField(
           {helperText}
         </FormHelperText>
       )}
-    </FakeTextFieldRoot>
+    </PickersTextFieldRoot>
   );
 });
diff --git a/...ents/FakeTextField/FakeTextField.types.ts → ...ickersTextField/PickersTextField.types.ts b/...ents/FakeTextField/FakeTextField.types.ts → ...ickersTextField/PickersTextField.types.ts
@@ -1,7 +1,7 @@
 import { TextFieldClasses } from '@mui/material/TextField';
-import { FakeInputProps } from './FakeInput.types';
+import { PickersInputProps } from './PickersInput.types';
 
-export interface FakeTextFieldProps extends FakeInputProps {
+export interface PickersTextFieldProps extends PickersInputProps {
   classes?: Partial<TextFieldClasses>;
   className?: string;
   color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';

diff --git a/packages/x-date-pickers/src/internals/components/PickersTextField/index.ts b/packages/x-date-pickers/src/internals/components/PickersTextField/index.ts
@@ -0,0 +1 @@
+export { PickersTextField } from './PickersTextField';
diff --git a/...nts/FakeTextField/fakeTextFieldClasses.ts → ...ckersTextField/pickersTextFieldClasses.ts b/...nts/FakeTextField/fakeTextFieldClasses.ts → ...ckersTextField/pickersTextFieldClasses.ts
@@ -3,7 +3,7 @@ import {
   unstable_generateUtilityClasses as generateUtilityClasses,
 } from '@mui/utils';
 
-export interface FakeTextFieldClasses {
+export interface PickersTextFieldClasses {
   /** Styles applied to the root element. */
   root: string;
   /** Styles applied to the root element if focused. */
@@ -15,17 +15,17 @@ export interface FakeTextFieldClasses {
   /** State class applied to the root element id `required=true` */
   required: string;
 }
-export type FakeTextFieldClassKey = keyof FakeTextFieldClasses;
+export type PickersTextFieldClassKey = keyof PickersTextFieldClasses;
 
-export function getFakeTextFieldUtilityClass(slot: string) {
-  return generateUtilityClass('MuiFakeTextField', slot);
+export function getPickersTextFieldUtilityClass(slot: string) {
+  return generateUtilityClass('MuiPickersTextField', slot);
 }
 
-export const fakeTextFieldClasses = generateUtilityClasses<FakeTextFieldClassKey>(
-  'MuiFakeTextField',
+export const pickersTextFieldClasses = generateUtilityClasses<PickersTextFieldClassKey>(
+  'MuiPickersTextField',
   ['root', 'focused', 'disabled', 'error', 'required'],
 );
-export interface FakeInputClasses {
+export interface PickersInputClasses {
   /** Styles applied to the root element. */
   root: string;
   /** Styles applied to the root element if focused. */
@@ -50,13 +50,13 @@ export interface FakeInputClasses {
   adornedEnd: string;
 }
 
-export type FakeInputClassKey = keyof FakeInputClasses;
+export type PickersInputClassKey = keyof PickersInputClasses;
 
-export function getFakeInputUtilityClass(slot: string) {
-  return generateUtilityClass('MuiFakeInput', slot);
+export function getPickersInputUtilityClass(slot: string) {
+  return generateUtilityClass('MuiPickersInput', slot);
 }
 
-export const fakeInputClasses = generateUtilityClasses<FakeInputClassKey>('MuiFakeInput', [
+export const pickersInputClasses = generateUtilityClasses<PickersInputClassKey>('MuiPickersInput', [
   'root',
   'focused',
   'disabled',
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { PickersTextField } from './PickersTextField';