@mui/x-date-pickers 6.2.1 → 6.3.1

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMultiSectionDigitalClockUtilityClass(slot) {
+  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+}
+export const multiSectionDigitalClockClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root']);

package/modern/MultiSectionDigitalClock/multiSectionDigitalClockSectionClasses.js

@@ -0,0 +1,6 @@
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+export function getMultiSectionDigitalClockSectionUtilityClass(slot) {
+  return generateUtilityClass('MuiMultiSectionDigitalClock', slot);
+}
+export const multiSectionDigitalClockSectionClasses = generateUtilityClasses('MuiMultiSectionDigitalClock', ['root', 'item']);

package/modern/PickersDay/PickersDay.js

@@ -63,8 +63,11 @@ const styleArg = ({
       backgroundColor: (theme.vars || theme).palette.primary.dark
     }
   },
-  [`&.${pickersDayClasses.disabled}`]: {
+  [`&.${pickersDayClasses.disabled}:not(.${pickersDayClasses.selected})`]: {
     color: (theme.vars || theme).palette.text.disabled
+  },
+  [`&.${pickersDayClasses.disabled}&.${pickersDayClasses.selected}`]: {
+    opacity: 0.6
   }
 }, !ownerState.disableMargin && {
   margin: `0 ${DAY_MARGIN}px`

package/modern/PickersLayout/PickersLayout.js

@@ -155,8 +155,8 @@ process.env.NODE_ENV !== "production" ? PickersLayout.propTypes = {
   slots: PropTypes.object,
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
   value: PropTypes.any,
-  view: PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']),
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
+  view: PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']),
+  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'meridiem', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired,
   wrapperVariant: PropTypes.oneOf(['desktop', 'mobile'])
 } : void 0;
 export { PickersLayout };

package/modern/StaticDateTimePicker/StaticDateTimePicker.js

@@ -6,7 +6,7 @@ import { renderTimeViewClock } from '../timeViewRenderers';
 import { renderDateViewCalendar } from '../dateViewRenderers';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateDateTime } from '../internals/hooks/validation/useDateTimeValidation';
+import { validateDateTime } from '../internals/utils/validation/validateDateTime';
 const StaticDateTimePicker = /*#__PURE__*/React.forwardRef(function StaticDateTimePicker(inProps, ref) {
   const defaultizedProps = useDateTimePickerDefaultizedProps(inProps, 'MuiStaticDateTimePicker');
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
@@ -282,6 +282,7 @@ StaticDateTimePicker.propTypes = {
   shouldDisableMonth: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.

package/modern/StaticTimePicker/StaticTimePicker.js

@@ -5,7 +5,7 @@ import { useTimePickerDefaultizedProps } from '../TimePicker/shared';
 import { renderTimeViewClock } from '../timeViewRenderers';
 import { singleItemValueManager } from '../internals/utils/valueManagers';
 import { useStaticPicker } from '../internals/hooks/useStaticPicker';
-import { validateTime } from '../internals/hooks/validation/useTimeValidation';
+import { validateTime } from '../internals/utils/validation/validateTime';
 const StaticTimePicker = /*#__PURE__*/React.forwardRef(function StaticTimePicker(inProps, ref) {
   const defaultizedProps = useTimePickerDefaultizedProps(inProps, 'MuiStaticTimePicker');
   const displayStaticWrapperAs = defaultizedProps.displayStaticWrapperAs ?? 'mobile';
@@ -184,6 +184,7 @@ StaticTimePicker.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.

package/modern/TimeClock/TimeClock.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "className", "disabled", "readOnly"];
+const _excluded = ["ampm", "ampmInClock", "autoFocus", "components", "componentsProps", "slots", "slotProps", "value", "disableIgnoringDatePartForTimeValidation", "maxTime", "minTime", "disableFuture", "disablePast", "minutesStep", "shouldDisableClock", "shouldDisableTime", "showViewSwitcher", "onChange", "defaultValue", "view", "views", "openTo", "onViewChange", "focusedView", "onFocusedViewChange", "className", "disabled", "readOnly"];
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
@@ -85,6 +85,8 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
       views = ['hours', 'minutes'],
       openTo,
       onViewChange,
+      focusedView,
+      onFocusedViewChange,
       className,
       disabled,
       readOnly
@@ -113,7 +115,9 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     views,
     openTo,
     onViewChange,
-    onChange: handleValueChange
+    onChange: handleValueChange,
+    focusedView,
+    onFocusedViewChange
   });
   const selectedTimeOrMidnight = React.useMemo(() => value || utils.setSeconds(utils.setMinutes(utils.setHours(now, 0), 0), 0), [value, now, utils]);
   const {
@@ -271,7 +275,7 @@ export const TimeClock = /*#__PURE__*/React.forwardRef(function TimeClock(inProp
     ownerState: ownerState
   }, other, {
     children: [/*#__PURE__*/_jsx(Clock, _extends({
-      autoFocus: autoFocus,
+      autoFocus: autoFocus ?? !!focusedView,
       ampmInClock: ampmInClock && views.includes('hours'),
       value: value,
       type: view,
@@ -313,7 +317,10 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   ampmInClock: PropTypes.bool,
   /**
-   * Set to `true` if focus should be moved to clock picker.
+   * If `true`, the main element is focused during the first mount.
+   * This main element is:
+   * - the element chosen by the visible view if any (i.e: the selected day on the `day` view).
+   * - the `input` element if there is a field rendered.
    */
   autoFocus: PropTypes.bool,
   /**
@@ -339,7 +346,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   defaultValue: PropTypes.any,
   /**
-   * If `true`, the picker and text field are disabled.
+   * If `true`, the picker views and text field are disabled.
    * @default false
    */
   disabled: PropTypes.bool,
@@ -358,6 +365,10 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * @default false
    */
   disablePast: PropTypes.bool,
+  /**
+   * Controlled focused view.
+   */
+  focusedView: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
    * Maximal selectable time.
    * The date part of the object will be ignored unless `props.disableIgnoringDatePartForTimeValidation === true`.
@@ -378,20 +389,30 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    * @template TDate
    * @param {TDate | null} value The new value.
    * @param {PickerSelectionState | undefined} selectionState Indicates if the date selection is complete.
+   * @param {TView | undefined} selectedView Indicates the view in which the selection has been made.
    */
   onChange: PropTypes.func,
+  /**
+   * Callback fired on focused view change.
+   * @template TView
+   * @param {TView} view The new view to focus or not.
+   * @param {boolean} hasFocus `true` if the view should be focused.
+   */
+  onFocusedViewChange: PropTypes.func,
   /**
    * Callback fired on view change.
-   * @param {TimeView} view The new view.
+   * @template TView
+   * @param {TView} view The new view.
    */
   onViewChange: PropTypes.func,
   /**
-   * Initially open view.
-   * @default 'hours'
+   * The default visible view.
+   * Used when the component view is not controlled.
+   * Must be a valid option from `views` list.
    */
   openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
-   * Make picker read only.
+   * If `true`, the picker views and text field are read-only.
    * @default false
    */
   readOnly: PropTypes.bool,
@@ -405,6 +426,7 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
@@ -431,12 +453,13 @@ process.env.NODE_ENV !== "production" ? TimeClock.propTypes = {
    */
   value: PropTypes.any,
   /**
-   * Controlled open view.
+   * The visible view.
+   * Used when the component view is controlled.
+   * Must be a valid option from `views` list.
    */
   view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
   /**
-   * Views for calendar picker.
-   * @default ['hours', 'minutes']
+   * Available views.
    */
   views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired)
 } : void 0;

package/modern/TimeField/TimeField.js

@@ -54,11 +54,13 @@ const TimeField = /*#__PURE__*/React.forwardRef(function TimeField(inProps, ref)
   return /*#__PURE__*/_jsx(TextField, _extends({
     ref: ref
   }, fieldProps, {
+    InputProps: _extends({}, fieldProps.InputProps, {
+      readOnly
+    }),
     inputProps: _extends({}, fieldProps.inputProps, {
-      ref: inputRef,
-      onPaste,
       inputMode,
-      readOnly
+      onPaste,
+      ref: inputRef
     })
   }));
 });
@@ -219,6 +221,10 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
    * @param {FieldChangeHandlerContext<TError>} context The context containing the validation result of the current value.
    */
   onChange: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onClick: PropTypes.func,
   /**
    * Callback fired when the error associated to the current value changes.
    * @template TValue The value type. Will be either the same type as `value` or `null`. Can be in `[start, end]` format in case of range value.
@@ -267,11 +273,27 @@ process.env.NODE_ENV !== "production" ? TimeField.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: PropTypes.func,
+  /**
+   * If `true`, the format will respect the leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `8/16/2018`)
+   * If `false`, the format will always add leading zeroes (e.g: on dayjs, the format `M/D/YYYY` will render `08/16/2018`)
+   *
+   * Warning n°1: Luxon is not able to respect the leading zeroes when using macro tokens (e.g: "DD"), so `shouldRespectLeadingZeros={true}` might lead to inconsistencies when using `AdapterLuxon`.
+   *
+   * Warning n°2: When `shouldRespectLeadingZeros={true}`, the field will add an invisible character on the sections containing a single digit to make sure `onChange` is fired.
+   * If you need to get the clean value from the input, you can remove this character using `input.value.replace(/\u200e/g, '')`.
+   *
+   * Warning n°3: When used in strict mode, dayjs and moment require to respect the leading zeros.
+   * This mean that when using `shouldRespectLeadingZeros={false}`, if you retrieve the value directly from the input (not listening to `onChange`) and your format contains tokens without leading zeros, the value will not be parsed by your library.
+   *
+   * @default `false`
+   */
+  shouldRespectLeadingZeros: PropTypes.bool,
   /**
    * The size of the component.
    */

package/modern/TimeField/useTimeField.js

@@ -1,9 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["value", "defaultValue", "format", "formatDensity", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
+const _excluded = ["value", "defaultValue", "format", "formatDensity", "shouldRespectLeadingZeros", "onChange", "readOnly", "onError", "disableFuture", "disablePast", "minTime", "maxTime", "minutesStep", "shouldDisableClock", "shouldDisableTime", "disableIgnoringDatePartForTimeValidation", "selectedSections", "onSelectedSectionsChange", "ampm", "unstableFieldRef"];
 import { singleItemFieldValueManager, singleItemValueManager } from '../internals/utils/valueManagers';
 import { useField } from '../internals/hooks/useField';
-import { validateTime } from '../internals/hooks/validation/useTimeValidation';
+import { validateTime } from '../internals/utils/validation/validateTime';
 import { useUtils } from '../internals/hooks/useUtils';
 const useDefaultizedTimeField = props => {
   const utils = useUtils();
@@ -25,6 +25,7 @@ export const useTimeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,
@@ -50,6 +51,7 @@ export const useTimeField = ({
       defaultValue,
       format,
       formatDensity,
+      shouldRespectLeadingZeros,
       onChange,
       readOnly,
       onError,

package/modern/TimePicker/TimePicker.js

@@ -207,7 +207,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * Used when the component view is not controlled.
    * Must be a valid option from `views` list.
    */
-  openTo: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  openTo: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Force rendering in particular orientation.
    */
@@ -236,11 +236,17 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
   shouldDisableClock: PropTypes.func,
   /**
    * Disable specific time.
+   * @template TDate
    * @param {TDate} value The value to check.
    * @param {TimeView} view The clock type of the timeValue.
    * @returns {boolean} If `true` the time will be disabled.
    */
   shouldDisableTime: PropTypes.func,
+  /**
+   * If `true`, disabled digital clock items will not be rendered.
+   * @default false
+   */
+  skipDisabled: PropTypes.bool,
   /**
    * The props used for each component slot.
    * @default {}
@@ -255,6 +261,22 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * 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]),
+  /**
+   * Amount of time options below or at which the single column time renderer is used.
+   * @default 24
+   */
+  thresholdToRenderTimeInASingleColumn: PropTypes.number,
+  /**
+   * The time steps between two time unit options.
+   * For example, if `timeStep.minutes = 8`, then the available minute options will be `[0, 8, 16, 24, 32, 40, 48, 56]`.
+   * When single column time renderer is used, only `timeStep.minutes` will be used.
+   * @default{ hours: 1, minutes: 5, seconds: 5 }
+   */
+  timeSteps: PropTypes.shape({
+    hours: PropTypes.number,
+    minutes: PropTypes.number,
+    seconds: PropTypes.number
+  }),
   /**
    * The selected value.
    * Used when the component is controlled.
@@ -265,7 +287,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    * Used when the component view is controlled.
    * Must be a valid option from `views` list.
    */
-  view: PropTypes.oneOf(['hours', 'minutes', 'seconds']),
+  view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']),
   /**
    * Define custom view renderers for each section.
    * If `null`, the section will only have field editing.
@@ -273,6 +295,7 @@ process.env.NODE_ENV !== "production" ? TimePicker.propTypes = {
    */
   viewRenderers: PropTypes.shape({
     hours: PropTypes.func,
+    meridiem: PropTypes.func,
     minutes: PropTypes.func,
     seconds: PropTypes.func
   }),

package/modern/TimePicker/TimePickerToolbar.js

@@ -240,7 +240,7 @@ process.env.NODE_ENV !== "production" ? TimePickerToolbar.propTypes = {
   /**
    * Currently visible picker view.
    */
-  view: PropTypes.oneOf(['hours', 'minutes', 'seconds']).isRequired,
-  views: PropTypes.arrayOf(PropTypes.oneOf(['day', 'hours', 'minutes', 'month', 'seconds', 'year']).isRequired).isRequired
+  view: PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired,
+  views: PropTypes.arrayOf(PropTypes.oneOf(['hours', 'meridiem', 'minutes', 'seconds']).isRequired).isRequired
 } : void 0;
 export { TimePickerToolbar };

package/modern/index.js

@@ -1,11 +1,14 @@
 /**
- * @mui/x-date-pickers v6.2.1
+ * @mui/x-date-pickers v6.3.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// Clocks
 export * from './TimeClock';
+export * from './DigitalClock';
+export * from './MultiSectionDigitalClock';
 export * from './LocalizationProvider';
 export * from './PickersDay';
 export * from './locales';

package/modern/internals/constants/dimensions.js

@@ -1,4 +1,5 @@
 export const DAY_SIZE = 36;
 export const DAY_MARGIN = 2;
 export const DIALOG_WIDTH = 320;
-export const VIEW_HEIGHT = 358;
+export const VIEW_HEIGHT = 358;
+export const DIGITAL_CLOCK_VIEW_HEIGHT = 232;

package/modern/internals/demo/DemoContainer.js

@@ -9,6 +9,9 @@ const getChildTypeFromChildName = childName => {
   if (childName.match(/^([A-Za-z]+)Range(Calendar|Clock)$/)) {
     return 'multi-panel-UI-view';
   }
+  if (childName.match(/^([A-Za-z]*)(DigitalClock)$/)) {
+    return 'Tall-UI-view';
+  }
   if (childName.match(/^Static([A-Za-z]+)/) || childName.match(/^([A-Za-z]+)(Calendar|Clock)$/)) {
     return 'UI-view';
   }
@@ -73,7 +76,7 @@ export function DemoContainer(props) {
   });
   const getSpacing = direction => {
     if (direction === 'row') {
-      return childrenTypes.has('UI-view') ? 3 : 2;
+      return childrenTypes.has('UI-view') || childrenTypes.has('Tall-UI-view') ? 3 : 2;
     }
     return childrenTypes.has('UI-view') ? 4 : 3;
   };

package/modern/internals/hooks/date-helpers-hooks.js

@@ -23,13 +23,13 @@ export function usePreviousMonthDisabled(month, {
     return !utils.isBefore(firstEnabledMonth, month);
   }, [disablePast, minDate, month, utils]);
 }
-export function useMeridiemMode(date, ampm, onChange) {
+export function useMeridiemMode(date, ampm, onChange, selectionState) {
   const utils = useUtils();
   const meridiemMode = getMeridiem(date, utils);
   const handleMeridiemChange = React.useCallback(mode => {
     const timeWithMeridiem = date == null ? null : convertToMeridiem(date, mode, Boolean(ampm), utils);
-    onChange(timeWithMeridiem, 'partial');
-  }, [ampm, date, onChange, utils]);
+    onChange(timeWithMeridiem, selectionState ?? 'partial');
+  }, [ampm, date, onChange, selectionState, utils]);
   return {
     meridiemMode,
     handleMeridiemChange

package/modern/internals/hooks/useDesktopPicker/useDesktopPicker.js

@@ -100,7 +100,8 @@ export const useDesktopPicker = _ref => {
       format,
       formatDensity,
       label,
-      autoFocus: autoFocus && !props.open
+      autoFocus: autoFocus && !props.open,
+      focused: open ? true : undefined
     }),
     ownerState: props
   });

package/modern/internals/hooks/useField/useField.js

@@ -6,7 +6,7 @@ import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useEventCallback from '@mui/utils/useEventCallback';
 import useForkRef from '@mui/utils/useForkRef';
 import { useTheme } from '@mui/material/styles';
-import { useValidation } from '../validation/useValidation';
+import { useValidation } from '../useValidation';
 import { useUtils } from '../useUtils';
 import { adjustSectionValue, isAndroid, cleanString, getSectionOrder } from './useField.utils';
 import { useFieldState } from './useFieldState';
@@ -26,15 +26,6 @@ export const useField = params => {
     sectionsValueBoundaries,
     placeholder
   } = useFieldState(params);
-  const {
-    applyCharacterEditing,
-    resetCharacterQuery
-  } = useFieldCharacterEditing({
-    sections: state.sections,
-    updateSectionValue,
-    sectionsValueBoundaries,
-    setTempAndroidValueStr
-  });
   const {
       inputRef: inputRefProp,
       internalProps,
@@ -56,6 +47,15 @@ export const useField = params => {
       validator
     } = params,
     otherForwardedProps = _objectWithoutPropertiesLoose(params.forwardedProps, _excluded);
+  const {
+    applyCharacterEditing,
+    resetCharacterQuery
+  } = useFieldCharacterEditing({
+    sections: state.sections,
+    updateSectionValue,
+    sectionsValueBoundaries,
+    setTempAndroidValueStr
+  });
   const inputRef = React.useRef(null);
   const handleRef = useForkRef(inputRefProp, inputRef);
   const focusTimeoutRef = React.useRef(undefined);
@@ -120,7 +120,8 @@ export const useField = params => {
       const activeSection = state.sections[selectedSectionIndexes.startIndex];
       const lettersOnly = /^[a-zA-Z]+$/.test(pastedValue);
       const digitsOnly = /^[0-9]+$/.test(pastedValue);
-      const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly;
+      const digitsAndLetterOnly = /^(([a-zA-Z]+)|)([0-9]+)(([a-zA-Z]+)|)$/.test(pastedValue);
+      const isValidPastedValue = activeSection.contentType === 'letter' && lettersOnly || activeSection.contentType === 'digit' && digitsOnly || activeSection.contentType === 'digit-with-letter' && digitsAndLetterOnly;
       if (isValidPastedValue) {
         // Early return to let the paste update section, value
         return;