@docsvision/material-ui-pickers 3.2.0-beta.9 → 3.2.1-beta.1

package/DatePicker/DatePicker.d.ts

@@ -14,7 +14,7 @@ export interface BaseDatePickerProps extends OutterCalendarProps {
     minDate?: ParsableDate;
     /**
      * Max selectable date
-     * @default Date(2100-01-01)
+     * @default Date(2200-01-01)
      */
     maxDate?: ParsableDate;
     /**
@@ -54,4 +54,4 @@ export declare type KeyboardDatePickerProps = WrappedKeyboardPickerProps & DateP
 export declare const DatePicker: import("react").FunctionComponent<DatePickerProps>;
 export declare const KeyboardDatePicker: import("react").FunctionComponent<import("../_helpers/text-field-helper").DateValidationProps & import("../_shared/hooks/useKeyboardPickerState").BaseKeyboardPickerProps & {
     variant?: "dialog" | "inline" | "static" | undefined;
-} & Pick<import("../wrappers/ModalWrapper").ModalWrapperProps<{}>, "okLabel" | "cancelLabel" | "clearLabel" | "todayLabel" | "clearable" | "showTodayButton" | "DialogProps"> & Pick<import("../wrappers/InlineWrapper").InlineWrapperProps<import("@material-ui/core/TextField").TextFieldProps>, "PopoverProps"> & Pick<import("../_shared/KeyboardDateInput").KeyboardDateInputProps, "children" | "ref" | "label" | "select" | "style" | "title" | "mask" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "error" | "margin" | "disabled" | "key" | "autoFocus" | "name" | "type" | "fullWidth" | "autoComplete" | "required" | "rows" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputRef" | "multiline" | "rowsMax" | "SelectProps" | "InputProps" | "inputVariant" | "TextFieldComponent" | "showErrorOnBlur" | "KeyboardButtonProps" | "InputAdornmentProps" | "maskChar" | "refuse" | "keyboardIcon" | "rifmFormatter"> & DatePickerViewsProps>;
+} & Pick<import("../wrappers/ModalWrapper").ModalWrapperProps<{}>, "okLabel" | "cancelLabel" | "clearLabel" | "todayLabel" | "clearable" | "showTodayButton" | "DialogProps"> & Pick<import("../wrappers/InlineWrapper").InlineWrapperProps<import("@material-ui/core/TextField").TextFieldProps>, "todayLabel" | "showTodayButton" | "PopoverProps"> & Pick<import("../_shared/KeyboardDateInput").KeyboardDateInputProps, "children" | "ref" | "label" | "select" | "style" | "title" | "mask" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "innerRef" | "error" | "name" | "margin" | "disabled" | "key" | "autoFocus" | "type" | "fullWidth" | "autoComplete" | "required" | "rows" | "hiddenLabel" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputRef" | "multiline" | "rowsMax" | "SelectProps" | "InputProps" | "inputVariant" | "TextFieldComponent" | "maskChar" | "showErrorOnBlur" | "KeyboardButtonProps" | "InputAdornmentProps" | "refuse" | "keyboardIcon" | "rifmFormatter"> & DatePickerViewsProps>;

package/DatePicker/DatePicker.js

@@ -17,7 +17,7 @@ var date_utils_1 = require("../_helpers/date-utils");
 var prop_types_1 = require("../constants/prop-types");
 var WrappedPurePicker_1 = require("../Picker/WrappedPurePicker");
 var WrappedKeyboardPicker_1 = require("../Picker/WrappedKeyboardPicker");
-var defaultProps = __assign({}, prop_types_1.datePickerDefaultProps, { openTo: 'date', views: ['year', 'date'], showActionsBar: false, todayLabel: 'TODAY' });
+var defaultProps = __assign(__assign({}, prop_types_1.datePickerDefaultProps), { openTo: 'date', views: ['year', 'date'], showActionsBar: false, todayLabel: 'TODAY' });
 function useOptions(props) {
     var utils = useUtils_1.useUtils();
     return {

package/DatePicker/DatePickerToolbar.js

@@ -30,8 +30,8 @@ exports.useStyles = styles_1.makeStyles({
     },
 }, { name: 'MuiPickersDatePickerRoot' });
 exports.DatePickerToolbar = function (_a) {
-    var date = _a.date, views = _a.views, setOpenView = _a.setOpenView, isLandscape = _a.isLandscape, openView = _a.openView;
     var _b, _c;
+    var date = _a.date, views = _a.views, setOpenView = _a.setOpenView, isLandscape = _a.isLandscape, openView = _a.openView;
     var utils = useUtils_1.useUtils();
     var classes = exports.useStyles();
     var isYearOnly = React.useMemo(function () { return date_utils_1.isYearOnlyView(views); }, [views]);

package/DateTimePicker/DateTimePicker.js

@@ -17,7 +17,7 @@ var text_field_helper_1 = require("../_helpers/text-field-helper");
 var prop_types_1 = require("../constants/prop-types");
 var WrappedPurePicker_1 = require("../Picker/WrappedPurePicker");
 var WrappedKeyboardPicker_1 = require("../Picker/WrappedKeyboardPicker");
-var defaultProps = __assign({}, prop_types_1.dateTimePickerDefaultProps, { showActionsBar: false, todayLabel: 'TODAY', wider: true, orientation: 'portrait', openTo: 'date', views: ['year', 'date', 'hours', 'minutes'] });
+var defaultProps = __assign(__assign({}, prop_types_1.dateTimePickerDefaultProps), { showActionsBar: false, todayLabel: 'TODAY', wider: true, orientation: 'portrait', openTo: 'date', views: ['year', 'date', 'hours', 'minutes'] });
 function useOptions(props) {
     var utils = useUtils_1.useUtils();
     if (props.orientation !== 'portrait') {

package/Picker/Picker.js

@@ -110,4 +110,4 @@ exports.Picker = function (props) {
             showTodayButton && (React.createElement(core_1.Button, { color: "primary", onClick: onSetToday, key: "today" }, todayLabel)),
             showShiftButtons && setShiftFunction && shiftButtons))));
 };
-exports.Picker.defaultProps = __assign({}, prop_types_1.datePickerDefaultProps, { views: Object.keys(viewsMap) });
+exports.Picker.defaultProps = __assign(__assign({}, prop_types_1.datePickerDefaultProps), { views: Object.keys(viewsMap) });

package/Picker/WrappedKeyboardPicker.js

@@ -15,8 +15,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
 var __importStar = (this && this.__importStar) || function (mod) {

package/Picker/WrappedPurePicker.js

@@ -15,8 +15,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
 var __importStar = (this && this.__importStar) || function (mod) {

package/README.md

@@ -0,0 +1 @@
+Fork @material-ui/pickers that implements advanced features required for DocsVision WebClient. Original repository https://github.com/mui-org/material-ui-pickers

package/Rifm/Rifm.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+declare type Props = {
+    value: string;
+    maskChar: string;
+    onChange: (value: string) => void;
+    format: (str: string, oldValue: string, currentCaretPosition?: number) => string;
+    mask?: boolean;
+    replace?: (value: string) => string;
+    accept?: RegExp;
+    letterPosition?: number;
+    children: (value: {
+        value: string;
+        onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>;
+    }) => any;
+};
+export declare const Rifm: (props: Props) => any;
+export {};

package/Rifm/Rifm.js

@@ -0,0 +1,174 @@
+"use strict";
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+exports.Rifm = function (props) {
+    var _a = React.useReducer(function (c) { return c + 1; }, 0), refresh = _a[1];
+    var valueRef = React.useRef(null);
+    var replace = props.replace, maskChar = props.maskChar;
+    var _b = React.useState({ value: '' }), previousValue = _b[0], setPreviousValue = _b[1];
+    var userValue = replace
+        ? replace(props.format(props.value, previousValue.value))
+        : props.format(props.value, previousValue.value);
+    var currentPreviousValue = previousValue.value;
+    // state of delete button see comments below about inputType support
+    var isDeleleteButtonDownRef = React.useRef(false);
+    var onChange = function (evt) {
+        var eventValue = evt.target.value;
+        var selectionStart = evt.target.selectionStart;
+        valueRef.current = [
+            eventValue,
+            evt.target,
+            eventValue.length > userValue.length,
+            isDeleleteButtonDownRef.current,
+            selectionStart,
+            userValue === props.format(eventValue, currentPreviousValue, selectionStart),
+            props.value,
+        ];
+        // The main trick is to update underlying input with non formatted value (= eventValue)
+        // that allows us to calculate right cursor position after formatting (see getCursorPosition)
+        // then we format new value and call props.onChange with masked/formatted value
+        // and finally we are able to set cursor position into right place
+        refresh(null);
+    };
+    // React prints warn on server in non production mode about useLayoutEffect usage
+    // in both cases it's noop
+    if (typeof window !== 'undefined') {
+        React.useLayoutEffect(function () {
+            if (valueRef.current == null)
+                return;
+            var _a = valueRef.current, eventValue = _a[0], input = _a[1], isSizeIncreaseOperation = _a[2], isDeleleteButtonDown = _a[3], selectionStart = _a[4], 
+            // No operation means that value itself hasn't been changed, BTW cursor, selection etc can be changed
+            isNoOperation = _a[5], valueAtChange = _a[6];
+            valueRef.current = null;
+            // A calendar selection can replace the controlled value in the same React batch as an
+            // input event from the mask. In that case the event describes an obsolete value and must
+            // not overwrite the date selected in the calendar.
+            if (props.value !== valueAtChange) {
+                refresh(null);
+                return;
+            }
+            // this usually occurs on deleting special symbols like ' here 123'123.00
+            // in case of isDeleleteButtonDown cursor should move differently vs backspace
+            var deleteWasNoOp = isDeleleteButtonDown && isNoOperation;
+            // Create string from only accepted symbols
+            var clean = function (str) { return (str.match(props.accept || /\d|\w/g) || []).join(''); };
+            var valueBeforeSelectionStart = clean(eventValue.substr(0, input.selectionStart));
+            // trying to find cursor position in formatted value having knowledge about valueBeforeSelectionStart
+            // This works because we assume that format doesn't change the order of accepted symbols.
+            // Imagine we have formatter which adds ' symbol between numbers, and by default we refuse all non numeric symbols
+            // for example we had input = 1'2|'4 (| means cursor position) then user entered '3' symbol
+            // inputValue = 1'23'|4 so valueBeforeSelectionStart = 123 and formatted value = 1'2'3'4
+            // calling getCursorPosition("1'2'3'4") will give us position after 3, 1'2'3|'4
+            // so for formatting just this function to determine cursor position after formatting is enough
+            // with masking we need to do some additional checks see `mask` below
+            var getCursorPosition = function (val) {
+                var start = 0;
+                var cleanPos = 0;
+                for (var i = 0; i !== valueBeforeSelectionStart.length; ++i) {
+                    var newPos = val.indexOf(valueBeforeSelectionStart[i], start) + 1;
+                    var newCleanPos = clean(val).indexOf(valueBeforeSelectionStart[i], cleanPos) + 1;
+                    // this skips position change if accepted symbols order was broken
+                    // For example fixes edge case with fixed point numbers:
+                    // You have '0|.00', then press 1, it becomes 01|.00 and after format 1.00, this breaks our assumption
+                    // that order of accepted symbols is not changed after format,
+                    // so here we don't update start position if other accepted symbols was inbetween current and new position
+                    if (newCleanPos - cleanPos > 1) {
+                        newPos = start;
+                        newCleanPos = cleanPos;
+                    }
+                    cleanPos = Math.max(newCleanPos, cleanPos);
+                    start = Math.max(start, newPos);
+                }
+                return start;
+            };
+            //let start = getCursorPosition(eventValue);
+            //   // Masking part, for masks if size of mask is above some value
+            //   // we need to replace symbols instead of do nothing as like in format
+            //   if (props.mask === true && isSizeIncreaseOperation && !isNoOperation) {
+            //     const c = clean(eventValue.substr(start))[0];
+            //     start = eventValue.indexOf(c, start);
+            //     eventValue = `${eventValue.substr(0, start)}${eventValue.substr(
+            //       start + 1
+            //     )}`;
+            //   }
+            var formattedValue = props.format(eventValue, currentPreviousValue, selectionStart);
+            var replacedValue = replace ? replace(formattedValue) : formattedValue;
+            var start = getCursorPosition(formattedValue);
+            var inputCharPosition = start - 1;
+            if (inputCharPosition > -1) {
+                if (props.letterPosition &&
+                    props.letterPosition > -1 &&
+                    replacedValue[inputCharPosition].match(/[a-zA-Z]/) &&
+                    (inputCharPosition < props.letterPosition || inputCharPosition > props.letterPosition + 1)) {
+                    replacedValue = currentPreviousValue;
+                }
+                else if (props.letterPosition &&
+                    props.letterPosition > -1 &&
+                    replacedValue[inputCharPosition].match(/\d/) &&
+                    (inputCharPosition >= props.letterPosition &&
+                        inputCharPosition <= props.letterPosition + 1)) {
+                    replacedValue = currentPreviousValue;
+                }
+            }
+            if (userValue === replacedValue) {
+                // if nothing changed for formatted value, just refresh so userValue will be used at render
+                refresh(null);
+            }
+            else {
+                props.onChange(replacedValue);
+            }
+            return function () {
+                // Visually improves working with masked values,
+                // like cursor jumping over refused symbols
+                // as an example date mask: was "5|1-24-3" then user pressed "6"
+                // it becomes "56-|12-43" with this code, and "56|-12-43" without
+                if (props.mask != null &&
+                    (isSizeIncreaseOperation || (isDeleleteButtonDown && !deleteWasNoOp))) {
+                    while (formattedValue[start] &&
+                        clean(formattedValue[start]) === '' &&
+                        formattedValue[start] != maskChar) {
+                        start += 1;
+                    }
+                }
+                //input.selectionStart = input.selectionEnd = start + (deleteWasNoOp ? 1 : 0);
+            };
+        });
+    }
+    React.useEffect(function () {
+        // until https://developer.mozilla.org/en-US/docs/Web/API/InputEvent/inputType will be supported
+        // by all major browsers (now supported by: +chrome, +safari, ?edge, !firefox)
+        // there is no way I found to distinguish in onChange
+        // backspace or delete was called in some situations
+        // firefox track https://bugzilla.mozilla.org/show_bug.cgi?id=1447239
+        var handleKeyDown = function (evt) {
+            if (evt.code === 'Delete') {
+                isDeleleteButtonDownRef.current = true;
+            }
+        };
+        var handleKeyUp = function (evt) {
+            if (evt.code === 'Delete') {
+                isDeleleteButtonDownRef.current = false;
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        document.addEventListener('keyup', handleKeyUp);
+        return function () {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.removeEventListener('keyup', handleKeyUp);
+        };
+    }, []);
+    var value = valueRef.current != null ? valueRef.current[0] : userValue;
+    //   value = props.format(value, currentPreviousValue);
+    previousValue.value = value;
+    return props.children({
+        value: value,
+        onChange: onChange,
+    });
+};

package/TimePicker/TimePicker.js

@@ -20,7 +20,7 @@ var prop_types_1 = require("../constants/prop-types");
 var text_field_helper_1 = require("../_helpers/text-field-helper");
 var WrappedPurePicker_1 = require("../Picker/WrappedPurePicker");
 var WrappedKeyboardPicker_1 = require("../Picker/WrappedKeyboardPicker");
-var defaultProps = __assign({}, prop_types_1.timePickerDefaultProps, { openTo: 'hours', views: ['hours', 'minutes'] });
+var defaultProps = __assign(__assign({}, prop_types_1.timePickerDefaultProps), { openTo: 'hours', views: ['hours', 'minutes'] });
 function useOptions(props) {
     var utils = useUtils_1.useUtils();
     return {

package/TimePicker/TimePickerToolbar.js

@@ -73,8 +73,8 @@ function useMeridiemMode(date, ampm, onChange) {
 }
 exports.useMeridiemMode = useMeridiemMode;
 var TimePickerToolbar = function (_a) {
-    var date = _a.date, views = _a.views, ampm = _a.ampm, openView = _a.openView, onChange = _a.onChange, isLandscape = _a.isLandscape, setOpenView = _a.setOpenView;
     var _b, _c, _d;
+    var date = _a.date, views = _a.views, ampm = _a.ampm, openView = _a.openView, onChange = _a.onChange, isLandscape = _a.isLandscape, setOpenView = _a.setOpenView;
     var utils = useUtils_1.useUtils();
     var theme = styles_1.useTheme();
     var classes = exports.useStyles();

package/_helpers/text-field-helper.d.ts

@@ -23,10 +23,10 @@ export interface DateValidationProps extends BaseValidationProps {
      */
     maxDateMessage?: React.ReactNode;
 }
-export declare const validate: (value: ParsableDate, utils: IUtils<any>, { maxDate, minDate, disablePast, disableFuture, maxDateMessage, minDateMessage, invalidDateMessage, strictCompareDates, }: Pick<import("../DatePicker/DatePicker").DatePickerProps, "children" | "ref" | "label" | "select" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "innerRef" | "error" | "margin" | "open" | "disabled" | "key" | "autoFocus" | "name" | "type" | "value" | "fullWidth" | "format" | "orientation" | "autoComplete" | "required" | "rows" | "onMonthChange" | "leftArrowIcon" | "rightArrowIcon" | "leftArrowButtonProps" | "rightArrowButtonProps" | "minDate" | "maxDate" | "disablePast" | "disableFuture" | "renderDay" | "allowKeyboardControl" | "shouldDisableDate" | "loadingIndicator" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputRef" | "multiline" | "rowsMax" | "SelectProps" | "InputProps" | "inputVariant" | "TextFieldComponent" | "onClose" | "onOpen" | "onAccept" | "okLabel" | "cancelLabel" | "clearLabel" | "todayLabel" | "clearable" | "showTodayButton" | "DialogProps" | "PopoverProps" | "autoOk" | "labelFunc" | "initialFocusedDate" | "invalidLabel" | "emptyLabel" | "disableToolbar" | "ToolbarComponent" | "showShiftButtons" | "setShiftFunction" | "shiftButtonValues" | "minDateMessage" | "maxDateMessage" | "invalidDateMessage" | "strictCompareDates" | "animateYearScrolling" | "onYearChange">) => import("react").ReactNode;
+export declare const validate: (value: ParsableDate, utils: IUtils<any>, { maxDate, minDate, disablePast, disableFuture, maxDateMessage, minDateMessage, invalidDateMessage, strictCompareDates, }: Pick<import("../DatePicker/DatePicker").DatePickerProps, "children" | "ref" | "label" | "select" | "style" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "tabIndex" | "inputMode" | "is" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "variant" | "innerRef" | "error" | "name" | "margin" | "open" | "disabled" | "key" | "autoFocus" | "type" | "value" | "fullWidth" | "format" | "orientation" | "autoComplete" | "required" | "rows" | "onMonthChange" | "leftArrowIcon" | "rightArrowIcon" | "leftArrowButtonProps" | "rightArrowButtonProps" | "minDate" | "maxDate" | "disablePast" | "disableFuture" | "renderDay" | "allowKeyboardControl" | "shouldDisableDate" | "loadingIndicator" | "hiddenLabel" | "FormHelperTextProps" | "helperText" | "InputLabelProps" | "inputRef" | "multiline" | "rowsMax" | "SelectProps" | "InputProps" | "inputVariant" | "TextFieldComponent" | "onClose" | "onOpen" | "onAccept" | "okLabel" | "cancelLabel" | "clearLabel" | "todayLabel" | "clearable" | "showTodayButton" | "DialogProps" | "PopoverProps" | "autoOk" | "labelFunc" | "initialFocusedDate" | "invalidLabel" | "emptyLabel" | "disableToolbar" | "ToolbarComponent" | "showShiftButtons" | "setShiftFunction" | "shiftButtonValues" | "minDateMessage" | "maxDateMessage" | "invalidDateMessage" | "strictCompareDates" | "animateYearScrolling" | "onYearChange">) => import("react").ReactNode;
 export declare function pick12hOr24hFormat(userFormat: string | undefined, ampm: boolean | undefined, formats: {
     '12h': string;
     '24h': string;
 }): string;
 export declare function makeMaskFromFormat(format: string, numberMaskChar: string): string;
-export declare const maskedDateFormatter: (mask: string, numberMaskChar: string, refuse: RegExp) => (value: string) => string;
+export declare const maskedDateFormatter: (mask: string, numberMaskChar: string) => (value: string, oldValue: string, currentCaretPosition?: number | undefined) => string;

package/_helpers/text-field-helper.js

@@ -1,5 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var replaceAt = function (str, index, replacement) {
+    replacement = replacement || '';
+    return str.substr(0, index) + replacement + str.substr(index + replacement.length);
+};
 exports.getDisplayDate = function (value, format, utils, isEmpty, _a) {
     var invalidLabel = _a.invalidLabel, emptyLabel = _a.emptyLabel, labelFunc = _a.labelFunc;
     var date = utils.date(value);
@@ -64,18 +68,70 @@ function makeMaskFromFormat(format, numberMaskChar) {
     return format.replace(/[a-z]/gi, numberMaskChar);
 }
 exports.makeMaskFromFormat = makeMaskFromFormat;
-exports.maskedDateFormatter = function (mask, numberMaskChar, refuse) { return function (value) {
-    if (value === '') {
+exports.maskedDateFormatter = function (mask, numberMaskChar) { return function (value, oldValue, currentCaretPosition) {
+    var refuse = /[^\d\w_]+/gi;
+    if (!value || value === '') {
         return value;
     }
-    var result = '';
-    var parsed = value.replace(refuse, '');
+    if (!oldValue) {
+        oldValue = '';
+    }
+    if (value == oldValue) {
+        return value;
+    }
+    if (value.length < oldValue.length && currentCaretPosition != null) {
+        value =
+            value.slice(0, currentCaretPosition) +
+                '_' +
+                value.slice(currentCaretPosition, oldValue.length);
+    }
+    var refusedOldValue = oldValue.replace(refuse, '');
+    var refusedNewValue = value.replace(refuse, '');
+    var refusedMaskSymbols = mask.replace(refuse, '');
+    var minLength = refusedOldValue.length > refusedNewValue.length
+        ? refusedNewValue.length
+        : refusedOldValue.length;
+    var startPos = 0;
+    var endPosShift = 0;
+    while (startPos < minLength) {
+        if (refusedNewValue[startPos] == refusedOldValue[startPos]) {
+            startPos++;
+        }
+        else {
+            break;
+        }
+    }
+    while (endPosShift < minLength &&
+        startPos < refusedNewValue.length - endPosShift &&
+        startPos < refusedOldValue.length - endPosShift) {
+        if (refusedNewValue[refusedNewValue.length - endPosShift - 1] ==
+            refusedOldValue[refusedOldValue.length - endPosShift - 1]) {
+            endPosShift++;
+        }
+        else {
+            break;
+        }
+    }
+    var endStartPos = refusedNewValue.length - endPosShift;
+    endStartPos = endStartPos < startPos ? startPos : endStartPos;
+    var firstPart = refusedNewValue.slice(0, startPos);
+    var addedPart = refusedNewValue.slice(startPos, endStartPos);
+    var endPart = refusedNewValue.slice(endStartPos, refusedNewValue.length);
+    var maxSymbolsInEnd = refusedMaskSymbols.length - firstPart.length - addedPart.length;
+    while (maxSymbolsInEnd > endPart.length) {
+        addedPart += numberMaskChar;
+        maxSymbolsInEnd--;
+    }
+    var entireRefusedString = firstPart + addedPart + endPart.slice(endPart.length - maxSymbolsInEnd, endPart.length);
+    // Do nothing ?...
+    entireRefusedString = entireRefusedString.slice(0, refusedMaskSymbols.length);
     var i = 0;
     var n = 0;
+    var result = '';
     while (i < mask.length) {
         var maskChar = mask[i];
-        if (maskChar === numberMaskChar && n < parsed.length) {
-            var parsedChar = parsed[n];
+        if (maskChar === numberMaskChar && n < entireRefusedString.length) {
+            var parsedChar = entireRefusedString[n];
             result += parsedChar;
             n += 1;
         }