@mui/x-date-pickers 7.0.0-alpha.8 → 7.0.0-alpha.9

package/PickersTextField/PickersTextField.js

@@ -0,0 +1,258 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["onFocus", "onBlur", "className", "color", "disabled", "error", "variant", "required", "InputProps", "inputProps", "inputRef", "sectionListRef", "elements", "areAllSectionsEmpty", "onClick", "onKeyDown", "onKeyUp", "onPaste", "onInput", "endAdornment", "startAdornment", "tabIndex", "contentEditable", "focused", "value", "onChange", "fullWidth", "id", "helperText", "FormHelperTextProps", "label", "InputLabelProps"];
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { styled, useThemeProps } from '@mui/material/styles';
+import useForkRef from '@mui/utils/useForkRef';
+import composeClasses from '@mui/utils/composeClasses';
+import useId from '@mui/utils/useId';
+import InputLabel from '@mui/material/InputLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import { getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
+import { PickersOutlinedInput } from './PickersOutlinedInput';
+import { PickersFilledInput } from './PickersFilledInput';
+import { PickersInput } from './PickersInput';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const VARIANT_COMPONENT = {
+  standard: PickersInput,
+  filled: PickersFilledInput,
+  outlined: PickersOutlinedInput
+};
+const PickersTextFieldRoot = styled(FormControl, {
+  name: 'MuiPickersTextField',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})({});
+const useUtilityClasses = ownerState => {
+  const {
+    focused,
+    disabled,
+    classes,
+    required
+  } = ownerState;
+  const slots = {
+    root: ['root', focused && !disabled && 'focused', disabled && 'disabled', required && 'required']
+  };
+  return composeClasses(slots, getPickersTextFieldUtilityClass, classes);
+};
+const PickersTextField = /*#__PURE__*/React.forwardRef(function PickersTextField(inProps, ref) {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPickersTextField'
+  });
+  const {
+      // Props used by FormControl
+      onFocus,
+      onBlur,
+      className,
+      color = 'primary',
+      disabled = false,
+      error = false,
+      variant = 'outlined',
+      required = false,
+      // Props used by PickersInput
+      InputProps,
+      inputProps,
+      inputRef,
+      sectionListRef,
+      elements,
+      areAllSectionsEmpty,
+      onClick,
+      onKeyDown,
+      onPaste,
+      onInput,
+      endAdornment,
+      startAdornment,
+      tabIndex,
+      contentEditable,
+      focused,
+      value,
+      onChange,
+      fullWidth,
+      id: idProp,
+      // Props used by FormHelperText
+      helperText,
+      FormHelperTextProps,
+      // Props used by InputLabel
+      label,
+      InputLabelProps
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const rootRef = React.useRef(null);
+  const handleRootRef = useForkRef(ref, rootRef);
+  const id = useId(idProp);
+  const helperTextId = helperText && id ? `${id}-helper-text` : undefined;
+  const inputLabelId = label && id ? `${id}-label` : undefined;
+  const ownerState = _extends({}, props, {
+    color,
+    disabled,
+    error,
+    focused,
+    required,
+    variant
+  });
+  const classes = useUtilityClasses(ownerState);
+  const PickersInputComponent = VARIANT_COMPONENT[variant];
+  return /*#__PURE__*/_jsxs(PickersTextFieldRoot, _extends({
+    className: clsx(classes.root, className),
+    ref: handleRootRef,
+    focused: focused,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    disabled: disabled,
+    variant: variant,
+    error: error,
+    color: color,
+    fullWidth: fullWidth,
+    required: required,
+    ownerState: ownerState
+  }, other, {
+    children: [/*#__PURE__*/_jsx(InputLabel, _extends({
+      htmlFor: id,
+      id: inputLabelId
+    }, InputLabelProps, {
+      children: label
+    })), /*#__PURE__*/_jsx(PickersInputComponent, _extends({
+      elements: elements,
+      areAllSectionsEmpty: areAllSectionsEmpty,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      onInput: onInput,
+      onPaste: onPaste,
+      endAdornment: endAdornment,
+      startAdornment: startAdornment,
+      tabIndex: tabIndex,
+      contentEditable: contentEditable,
+      value: value,
+      onChange: onChange,
+      id: id,
+      fullWidth: fullWidth,
+      inputProps: inputProps,
+      inputRef: inputRef,
+      sectionListRef: sectionListRef,
+      label: label
+    }, InputProps)), helperText && /*#__PURE__*/_jsx(FormHelperText, _extends({
+      id: helperTextId
+    }, FormHelperTextProps, {
+      children: helperText
+    }))]
+  }));
+});
+process.env.NODE_ENV !== "production" ? PickersTextField.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Is `true` if the current values equals the empty value.
+   * For a single item value, it means that `value === null`
+   * For a range value, it means that `value === [null, null]`
+   */
+  areAllSectionsEmpty: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * @default 'primary'
+   */
+  color: PropTypes.oneOf(['error', 'info', 'primary', 'secondary', 'success', 'warning']),
+  component: PropTypes.elementType,
+  /**
+   * If true, the whole element is editable.
+   * Useful when all the sections are selected.
+   */
+  contentEditable: PropTypes.bool.isRequired,
+  disabled: PropTypes.bool.isRequired,
+  /**
+   * The elements to render.
+   * Each element contains the prop to edit a section of the value.
+   */
+  elements: PropTypes.arrayOf(PropTypes.shape({
+    after: PropTypes.object.isRequired,
+    before: PropTypes.object.isRequired,
+    container: PropTypes.object.isRequired,
+    content: PropTypes.object.isRequired
+  })).isRequired,
+  endAdornment: PropTypes.node,
+  error: PropTypes.bool.isRequired,
+  /**
+   * If `true`, the component is displayed in focused state.
+   */
+  focused: PropTypes.bool,
+  FormHelperTextProps: PropTypes.object,
+  fullWidth: PropTypes.bool,
+  /**
+   * The helper text content.
+   */
+  helperText: PropTypes.node,
+  /**
+   * If `true`, the label is hidden.
+   * This is used to increase density for a `FilledInput`.
+   * Be sure to add `aria-label` to the `input` element.
+   * @default false
+   */
+  hiddenLabel: PropTypes.bool,
+  id: PropTypes.string,
+  InputLabelProps: PropTypes.object,
+  inputProps: PropTypes.object,
+  /**
+   * Props applied to the Input element.
+   * It will be a [`FilledInput`](/material-ui/api/filled-input/),
+   * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
+   * component depending on the `variant` prop value.
+   */
+  InputProps: PropTypes.object,
+  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.object
+  })]),
+  label: PropTypes.node,
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  margin: PropTypes.oneOf(['dense', 'none', 'normal']),
+  onBlur: PropTypes.func.isRequired,
+  onChange: PropTypes.func.isRequired,
+  onClick: PropTypes.func.isRequired,
+  onFocus: PropTypes.func.isRequired,
+  onInput: PropTypes.func.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
+  onPaste: PropTypes.func.isRequired,
+  readOnly: PropTypes.bool,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  required: PropTypes.bool,
+  sectionListRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      getRoot: PropTypes.func.isRequired,
+      getSectionContainer: PropTypes.func.isRequired,
+      getSectionContent: PropTypes.func.isRequired,
+      getSectionIndexFromDOMElement: PropTypes.func.isRequired
+    })
+  })]),
+  /**
+   * The size of the component.
+   * @default 'medium'
+   */
+  size: PropTypes.oneOf(['medium', 'small']),
+  startAdornment: PropTypes.node,
+  style: PropTypes.object,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  value: PropTypes.string.isRequired,
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: PropTypes.oneOf(['filled', 'outlined', 'standard'])
+} : void 0;
+export { PickersTextField };

package/{internals/components/PickersTextField → PickersTextField}/PickersTextField.types.d.ts

@@ -3,7 +3,10 @@ import { FormControlProps } from '@mui/material/FormControl';
 import { FormHelperTextProps } from '@mui/material/FormHelperText';
 import { InputLabelProps } from '@mui/material/InputLabel';
 import { TextFieldVariants } from '@mui/material/TextField';
-import { PickersFilledInputProps, PickersInputPropsUsedByField, PickersOutlinedInputProps, PickersStandardInputProps } from '../PickersInput/PickersInput.types';
+import { PickersInputPropsUsedByField } from './PickersInputBase/PickersInputBase.types';
+import { PickersInputProps } from './PickersInput';
+import { PickersOutlinedInputProps } from './PickersOutlinedInput';
+import { PickersFilledInputProps } from './PickersFilledInput';
 interface PickersTextFieldPropsUsedByField {
     onFocus: React.FocusEventHandler<HTMLDivElement>;
     onBlur: React.FocusEventHandler<HTMLDivElement>;
@@ -30,7 +33,7 @@ export interface PickersStandardTextFieldProps extends PickersBaseTextFieldProps
      * [`OutlinedInput`](/material-ui/api/outlined-input/) or [`Input`](/material-ui/api/input/)
      * component depending on the `variant` prop value.
      */
-    InputProps?: Partial<PickersStandardInputProps>;
+    InputProps?: Partial<PickersInputProps>;
 }
 export interface PickersOutlinedTextFieldProps extends PickersBaseTextFieldProps {
     /**

package/PickersTextField/index.d.ts

@@ -0,0 +1,8 @@
+export { PickersTextField } from './PickersTextField';
+export type { PickersTextFieldProps } from './PickersTextField.types';
+export { pickersTextFieldClasses, getPickersTextFieldUtilityClass, } from './pickersTextFieldClasses';
+export type { PickersTextFieldClasses, PickersTextFieldClassKey } from './pickersTextFieldClasses';
+export * from './PickersInput';
+export * from './PickersFilledInput';
+export * from './PickersOutlinedInput';
+export * from './PickersInputBase';

package/PickersTextField/index.js

@@ -0,0 +1,6 @@
+export { PickersTextField } from './PickersTextField';
+export { pickersTextFieldClasses, getPickersTextFieldUtilityClass } from './pickersTextFieldClasses';
+export * from './PickersInput';
+export * from './PickersFilledInput';
+export * from './PickersOutlinedInput';
+export * from './PickersInputBase';

package/PickersTextField/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/PickersTextField/index.js",
+  "types": "./index.d.ts"
+}

package/README.md

@@ -34,7 +34,7 @@ This component has the following peer dependencies that you will need to install
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.8.6",
+  "@mui/material": "^5.15.0",
   "react": "^17.0.0 || ^18.0.0",
   "react-dom": "^17.0.0 || ^18.0.0"
 },

package/StaticDatePicker/StaticDatePicker.js

@@ -60,9 +60,6 @@ StaticDatePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * Formats the day of week displayed in the calendar header.

package/StaticDateTimePicker/StaticDateTimePicker.js

@@ -80,9 +80,6 @@ StaticDateTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * Formats the day of week displayed in the calendar header.

package/StaticTimePicker/StaticTimePicker.js

@@ -72,9 +72,6 @@ StaticTimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * The default value.

package/TimePicker/TimePicker.js

@@ -65,9 +65,6 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
-  /**
-   * Class name applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * If `true`, the popover or modal will close after submitting the full date.

package/TimePicker/TimePickerToolbar.js

@@ -214,9 +214,6 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   ampm: PropTypes.bool,
   ampmInClock: PropTypes.bool,
   classes: PropTypes.object,
-  /**
-   * className applied to the root component.
-   */
   className: PropTypes.string,
   disabled: PropTypes.bool,
   /**

package/YearCalendar/YearCalendar.js

@@ -265,9 +265,6 @@ process.env.NODE_ENV !== "production" ? YearCalendar.propTypes = {
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-  /**
-   * className applied to the root element.
-   */
   className: PropTypes.string,
   /**
    * The default selected value.

package/YearCalendar/YearCalendar.types.d.ts

@@ -12,9 +12,6 @@ export interface ExportedYearCalendarProps {
 }
 export interface YearCalendarProps<TDate> extends ExportedYearCalendarProps, YearValidationProps<TDate>, BaseDateValidationProps<TDate>, TimezoneProps {
     autoFocus?: boolean;
-    /**
-     * className applied to the root element.
-     */
     className?: string;
     /**
      * Override or extend the styles applied to the component.

package/index.d.ts

@@ -3,7 +3,7 @@ export * from './DigitalClock';
 export * from './MultiSectionDigitalClock';
 export * from './LocalizationProvider';
 export * from './PickersDay';
-export * from './locales';
+export * from './locales/utils/pickersLocaleTextApi';
 export * from './DateField';
 export * from './TimeField';
 export * from './DateTimeField';
@@ -29,6 +29,7 @@ export * from './PickersLayout';
 export * from './PickersActionBar';
 export * from './PickersShortcuts';
 export * from './PickersCalendarHeader';
+export * from './PickersTextField';
 export * from './PickersSectionList';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-date-pickers v7.0.0-alpha.8
+ * @mui/x-date-pickers v7.0.0-alpha.9
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
@@ -11,7 +11,7 @@ export * from './DigitalClock';
 export * from './MultiSectionDigitalClock';
 export * from './LocalizationProvider';
 export * from './PickersDay';
-export * from './locales';
+export * from './locales/utils/pickersLocaleTextApi';
 
 // Fields
 export * from './DateField';
@@ -51,6 +51,7 @@ export * from './PickersShortcuts';
 export * from './PickersCalendarHeader';
 
 // Field utilities
+export * from './PickersTextField';
 export * from './PickersSectionList';
 export { DEFAULT_DESKTOP_MODE_MEDIA_QUERY } from './internals/utils/utils';
 export * from './models';

package/internals/hooks/useField/useField.js

@@ -24,6 +24,7 @@ export const useField = params => {
     updateValueFromValueStr,
     setTempAndroidValueStr,
     sectionsValueBoundaries,
+    localizedDigits,
     placeholder,
     timezone
   } = useFieldState(params);
@@ -59,6 +60,7 @@ export const useField = params => {
     sections: state.sections,
     updateSectionValue,
     sectionsValueBoundaries,
+    localizedDigits,
     setTempAndroidValueStr,
     timezone
   });
@@ -191,7 +193,7 @@ export const useField = params => {
     if (selectedSectionIndexes.startIndex === 0 && selectedSectionIndexes.endIndex === state.sections.length - 1 && cleanValueStr.length === 1) {
       keyPressed = cleanValueStr;
     } else {
-      const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, isRTL));
+      const prevValueStr = cleanString(fieldValueManager.getValueStrFromSections(state.sections, localizedDigits, isRTL));
       let startOfDiffIndex = -1;
       let endOfDiffIndex = -1;
       for (let i = 0; i < prevValueStr.length; i += 1) {
@@ -301,7 +303,7 @@ export const useField = params => {
           }
           const activeSection = state.sections[selectedSectionIndexes.startIndex];
           const activeDateManager = fieldValueManager.getActiveDateManager(utils, state, activeSection);
-          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, activeDateManager.date, {
+          const newSectionValue = adjustSectionValue(utils, timezone, activeSection, event.key, sectionsValueBoundaries, localizedDigits, activeDateManager.date, {
             minutesStep
           });
           updateSectionValue({
@@ -386,8 +388,8 @@ export const useField = params => {
 
   const valueStr = React.useMemo(() => {
     var _state$tempValueStrAn;
-    return (_state$tempValueStrAn = state.tempValueStrAndroid) != null ? _state$tempValueStrAn : fieldValueManager.getValueStrFromSections(state.sections, isRTL);
-  }, [state.sections, fieldValueManager, state.tempValueStrAndroid, isRTL]);
+    return (_state$tempValueStrAn = state.tempValueStrAndroid) != null ? _state$tempValueStrAn : fieldValueManager.getValueStrFromSections(state.sections, localizedDigits, isRTL);
+  }, [state.sections, fieldValueManager, state.tempValueStrAndroid, localizedDigits, isRTL]);
   const inputMode = React.useMemo(() => {
     if (selectedSectionIndexes == null) {
       return 'text';

package/internals/hooks/useField/useField.types.d.ts

@@ -208,19 +208,21 @@ export interface FieldValueManager<TValue, TDate, TSection extends FieldSection>
      * @param {MuiPickersAdapter<TDate>} utils The utils to manipulate the date.
      * @param {TValue} value The current value to generate sections from.
      * @param {TSection[] | null} fallbackSections The sections to use as a fallback if a date is null or invalid.
+     * @param {string} localizedDigits The conversion table from localized to 0-9 digits.
      * @param {boolean} isRTL `true` if the direction is "right to left".
      * @param {(date: TDate) => FieldSectionWithoutPosition[]} getSectionsFromDate Returns the sections of the given date.
      * @returns {TSection[]}  The new section list.
      */
-    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, value: TValue, fallbackSections: TSection[] | null, isRTL: boolean, getSectionsFromDate: (date: TDate) => FieldSectionWithoutPosition[]) => TSection[];
+    getSectionsFromValue: (utils: MuiPickersAdapter<TDate>, value: TValue, fallbackSections: TSection[] | null, localizedDigits: string[], isRTL: boolean, getSectionsFromDate: (date: TDate) => FieldSectionWithoutPosition[]) => TSection[];
     /**
      * Creates the string value to render in the input based on the current section list.
      * @template TSection
      * @param {TSection[]} sections The current section list.
+     * @param {string} localizedDigits The conversion table from localized to 0-9 digits.
      * @param {boolean} isRTL `true` if the current orientation is "right to left"
      * @returns {string} The string value to render in the input.
      */
-    getValueStrFromSections: (sections: TSection[], isRTL: boolean) => string;
+    getValueStrFromSections: (sections: TSection[], localizedDigits: string[], isRTL: boolean) => string;
     /**
      * Returns the manager of the active date.
      * @template TValue, TDate, TSection

package/internals/hooks/useField/useField.utils.d.ts

@@ -6,24 +6,34 @@ export declare const getDateSectionConfigFromFormatToken: <TDate>(utils: MuiPick
 };
 export declare const getDaysInWeekStr: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, format: string) => string[];
 export declare const getLetterEditingOptions: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, sectionType: FieldSectionType, format: string) => string[];
-export declare const cleanLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueStr: string, size: number) => string;
-export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, section: Pick<FieldSection, 'format' | 'type' | 'contentType' | 'hasLeadingZerosInFormat' | 'hasLeadingZerosInInput' | 'maxLength'>) => string;
-export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, activeDate: TDate | null, stepsAttributes?: {
+export declare const FORMAT_SECONDS_NO_LEADING_ZEROS = "s";
+export declare const getLocalizedDigits: <TDate>(utils: MuiPickersAdapter<TDate, any>) => string[];
+export declare const removeLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
+export declare const applyLocalizedDigits: (valueStr: string, localizedDigits: string[]) => string;
+export declare const isStringNumber: (valueStr: string, localizedDigits: string[]) => boolean;
+/**
+ * Remove the leading zeroes to a digit section value.
+ * E.g.: `03` => `3`
+ * Warning: Should only be called with non-localized digits. Call `removeLocalizedDigits` with your value if needed.
+ */
+export declare const cleanLeadingZeros: (valueStr: string, size: number) => string;
+export declare const cleanDigitSectionValue: <TDate>(utils: MuiPickersAdapter<TDate, any>, value: number, sectionBoundaries: FieldSectionValueBoundaries<TDate, any>, localizedDigits: string[], section: Pick<FieldSection, 'format' | 'type' | 'contentType' | 'hasLeadingZerosInFormat' | 'hasLeadingZerosInInput' | 'maxLength'>) => string;
+export declare const adjustSectionValue: <TDate, TSection extends FieldSection>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, section: TSection, keyCode: AvailableAdjustKeyCode, sectionsValueBoundaries: FieldSectionsValueBoundaries<TDate>, localizedDigits: string[], activeDate: TDate | null, stepsAttributes?: {
     minutesStep?: number;
 }) => string;
-export declare const getSectionVisibleValue: (section: FieldSectionWithoutPosition, target: 'input-rtl' | 'input-ltr' | 'non-input') => string;
+export declare const getSectionVisibleValue: (section: FieldSectionWithoutPosition, target: 'input-rtl' | 'input-ltr' | 'non-input', localizedDigits: string[]) => string;
 export declare const cleanString: (dirtyString: string) => string;
-export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: FieldSectionWithoutPosition<TSection>[], isRTL: boolean) => TSection[];
+export declare const addPositionPropertiesToSections: <TSection extends FieldSection>(sections: FieldSectionWithoutPosition<TSection>[], localizedDigits: string[], isRTL: boolean) => TSection[];
 export declare const changeSectionValueFormat: <TDate>(utils: MuiPickersAdapter<TDate, any>, valueStr: string, currentFormat: string, newFormat: string) => string;
 export declare const doesSectionFormatHaveLeadingZeros: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, contentType: FieldSectionContentType, sectionType: FieldSectionType, format: string) => boolean;
-export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, localeText: PickersLocaleText<TDate>, format: string, date: TDate | null, formatDensity: 'dense' | 'spacious', shouldRespectLeadingZeros: boolean, isRTL: boolean) => FieldSectionWithoutPosition[];
+export declare const splitFormatIntoSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, localeText: PickersLocaleText<TDate>, localizedDigits: string[], format: string, date: TDate | null, formatDensity: 'dense' | 'spacious', shouldRespectLeadingZeros: boolean, isRTL: boolean) => FieldSectionWithoutPosition[];
 /**
  * Some date libraries like `dayjs` don't support parsing from date with escaped characters.
  * To make sure that the parsing works, we are building a format and a date without any separator.
  */
-export declare const getDateFromDateSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, sections: FieldSection[]) => NonNullable<TDate>;
-export declare const createDateStrForInputFromSections: (sections: FieldSection[], isRTL: boolean) => string;
-export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone) => FieldSectionsValueBoundaries<TDate>;
+export declare const getDateFromDateSections: <TDate>(utils: MuiPickersAdapter<TDate, any>, sections: FieldSection[], localizedDigits: string[]) => NonNullable<TDate>;
+export declare const createDateStrForInputFromSections: (sections: FieldSection[], localizedDigits: string[], isRTL: boolean) => string;
+export declare const getSectionsBoundaries: <TDate>(utils: MuiPickersAdapter<TDate, any>, localizedDigits: string[], timezone: PickersTimezone) => FieldSectionsValueBoundaries<TDate>;
 export declare const validateSections: <TSection extends FieldSection>(sections: TSection[], valueType: FieldValueType) => void;
 export declare const mergeDateIntoReferenceDate: <TDate>(utils: MuiPickersAdapter<TDate, any>, timezone: PickersTimezone, dateToTransferFrom: TDate, sections: FieldSectionWithoutPosition[], referenceDate: TDate, shouldLimitToEditedSections: boolean) => TDate;
 export declare const isAndroid: () => boolean;