@docsvision/material-ui-pickers 3.2.0-beta.3 → 3.2.0-beta.30

package/{build/DatePicker → 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" | "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>, "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/{build/DatePicker → 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/{build/DatePicker → DatePicker}/DatePickerToolbar.js

@@ -40,7 +40,7 @@ exports.DatePickerToolbar = function (_a) {
             _b[classes.toolbar] = !isYearOnly,
             _b[classes.toolbarLandscape] = isLandscape,
             _b)) },
-        React.createElement(ToolbarButton_1.default, { variant: isYearOnly ? 'h3' : 'subtitle1', onClick: function () { return setOpenView('year'); }, selected: openView === 'year', label: utils.getYearText(date) }),
-        !isYearOnly && !isYearAndMonth && (React.createElement(ToolbarButton_1.default, { variant: "h4", selected: openView === 'date', onClick: function () { return setOpenView('date'); }, align: isLandscape ? 'left' : 'center', label: utils.getDatePickerHeaderText(date), className: clsx_1.default((_c = {}, _c[classes.dateLandscape] = isLandscape, _c)) })),
-        isYearAndMonth && (React.createElement(ToolbarButton_1.default, { variant: "h4", onClick: function () { return setOpenView('month'); }, selected: openView === 'month', label: utils.getMonthText(date) }))));
+        React.createElement(ToolbarButton_1.default, { variant: isYearOnly ? 'h3' : 'subtitle1', onClick: function () { return setOpenView('year'); }, selected: openView === 'year', label: utils.formatByString(date, utils.formats.year) }),
+        !isYearOnly && !isYearAndMonth && (React.createElement(ToolbarButton_1.default, { variant: "h4", selected: openView === 'date', onClick: function () { return setOpenView('date'); }, align: isLandscape ? 'left' : 'center', label: utils.formatByString(date, utils.formats.normalDateWithWeekday), className: clsx_1.default((_c = {}, _c[classes.dateLandscape] = isLandscape, _c)) })),
+        isYearAndMonth && (React.createElement(ToolbarButton_1.default, { variant: "h4", onClick: function () { return setOpenView('month'); }, selected: openView === 'month', label: utils.formatByString(date, utils.formats.month) }))));
 };

package/{build/DateTimePicker → DateTimePicker}/DateTimePicker.d.ts

@@ -8,9 +8,9 @@ export declare type DateTimePickerView = 'year' | 'date' | 'month' | 'hours' | '
 export declare type BaseDateTimePickerProps = BaseTimePickerProps & BaseDatePickerProps;
 export interface DateTimePickerViewsProps extends BaseDateTimePickerProps {
     /** Array of views to show */
-    views?: ('year' | 'date' | 'month' | 'hours' | 'minutes')[];
+    views?: ('year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds')[];
     /** Open to DatePicker */
-    openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes';
+    openTo?: 'year' | 'date' | 'month' | 'hours' | 'minutes' | 'seconds';
     /** To show tabs */
     hideTabs?: boolean;
     /** Date tab icon */

package/{build/DateTimePicker → 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') {
@@ -26,8 +26,8 @@ function useOptions(props) {
     return {
         getDefaultFormat: function () {
             return text_field_helper_1.pick12hOr24hFormat(props.format, props.ampm, {
-                '12h': utils.dateTime12hFormat,
-                '24h': utils.dateTime24hFormat,
+                '12h': utils.formats.fullDateTime12h,
+                '24h': utils.formats.fullDateTime24h,
             });
         },
     };

package/{build/DateTimePicker → DateTimePicker}/DateTimePickerToolbar.js

@@ -43,13 +43,13 @@ exports.DateTimePickerToolbar = function (_a) {
             React.createElement(core_1.Grid, { container: true, justify: "center", wrap: "nowrap" },
                 React.createElement(core_1.Grid, { item: true, container: true, xs: 5, justify: "flex-start", direction: "column" },
                     React.createElement("div", null,
-                        React.createElement(ToolbarButton_1.default, { variant: "subtitle1", onClick: function () { return setOpenView('year'); }, selected: openView === 'year', label: utils.getYearText(date) })),
+                        React.createElement(ToolbarButton_1.default, { variant: "subtitle1", onClick: function () { return setOpenView('year'); }, selected: openView === 'year', label: utils.formatByString(date, utils.formats.year) })),
                     React.createElement("div", null,
-                        React.createElement(ToolbarButton_1.default, { variant: "h4", onClick: function () { return setOpenView('date'); }, selected: openView === 'date', label: utils.getDateTimePickerHeaderText(date) }))),
+                        React.createElement(ToolbarButton_1.default, { variant: "h4", onClick: function () { return setOpenView('date'); }, selected: openView === 'date', label: utils.formatByString(date, utils.formats.shortDate) }))),
                 React.createElement(core_1.Grid, { item: true, container: true, xs: 6, justify: "center", alignItems: "flex-end", direction: rtl ? 'row-reverse' : 'row' },
-                    React.createElement(ToolbarButton_1.default, { variant: "h3", onClick: function () { return setOpenView('hours'); }, selected: openView === 'hours', label: utils.getHourText(date, ampm) }),
+                    React.createElement(ToolbarButton_1.default, { variant: "h3", onClick: function () { return setOpenView('hours'); }, selected: openView === 'hours', label: utils.formatByString(date, ampm ? utils.formats.hours12h : utils.formats.hours24h) }),
                     React.createElement(ToolbarText_1.default, { variant: "h3", label: ":", className: classes.separator }),
-                    React.createElement(ToolbarButton_1.default, { variant: "h3", onClick: function () { return setOpenView('minutes'); }, selected: openView === 'minutes', label: utils.getMinuteText(date) })),
+                    React.createElement(ToolbarButton_1.default, { variant: "h3", onClick: function () { return setOpenView('minutes'); }, selected: openView === 'minutes', label: utils.formatByString(date, utils.formats.minutes) })),
                 ampm && (React.createElement(core_1.Grid, { item: true, container: true, xs: 1, direction: "column", justify: "flex-end" },
                     React.createElement(ToolbarButton_1.default, { variant: "subtitle1", selected: meridiemMode === 'am', label: utils.getMeridiemText('am'), onClick: function () { return handleMeridiemChange('am'); } }),
                     React.createElement(ToolbarButton_1.default, { variant: "subtitle1", selected: meridiemMode === 'pm', label: utils.getMeridiemText('pm'), onClick: function () { return handleMeridiemChange('pm'); } }))))),

package/{build/MuiPickersUtilsProvider.d.ts → MuiPickersUtilsProvider.d.ts}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IUtils } from '@date-io/core/IUtils';
 import { MaterialUiPickersDate } from './typings/date';
-export declare const MuiPickersContext: React.Context<IUtils<MaterialUiPickersDate> | null>;
+export declare const MuiPickersContext: React.Context<IUtils<MaterialUiPickersDate, any> | null>;
 export interface MuiPickersUtilsProviderProps {
     utils: any;
     children: React.ReactNode;

package/{build/MuiPickersUtilsProvider.js → MuiPickersUtilsProvider.js}

@@ -6,17 +6,23 @@ var __importStar = (this && this.__importStar) || function (mod) {
     result["default"] = mod;
     return result;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __importStar(require("react"));
 var PropTypes = __importStar(require("prop-types"));
+var moment_1 = __importDefault(require("@date-io/moment"));
 exports.MuiPickersContext = React.createContext(null);
 exports.MuiPickersUtilsProvider = function (_a) {
     var Utils = _a.utils, children = _a.children, locale = _a.locale, libInstance = _a.libInstance;
-    var utils = React.useMemo(function () { return new Utils({ locale: locale, moment: libInstance }); }, [
-        Utils,
-        libInstance,
-        locale,
-    ]);
+    var utils = React.useMemo(function () {
+        var instance = new Utils({ locale: locale, moment: libInstance });
+        if (instance instanceof moment_1.default) {
+            instance.moment.locale(locale);
+        }
+        return instance;
+    }, [Utils, libInstance, locale]);
     return React.createElement(exports.MuiPickersContext.Provider, { value: utils, children: children });
 };
 exports.MuiPickersUtilsProvider.propTypes = {

package/{build/Picker → Picker}/Picker.d.ts

@@ -31,17 +31,19 @@ export interface PickerViewProps extends BaseDatePickerProps, BaseTimePickerProp
     hideTabs?: boolean;
     dateRangeIcon?: React.ReactNode;
     timeIcon?: React.ReactNode;
+    showActionsBar?: boolean;
 }
 interface PickerProps extends PickerViewProps {
     date: MaterialUiPickersDate;
     orientation?: BasePickerProps['orientation'];
     onChange: (date: MaterialUiPickersDate, isFinish?: boolean) => void;
-    showActionsBar?: boolean;
     showTodayButton?: boolean;
-    todayLabel?: string;
+    todayLabel?: React.ReactNode;
     showShiftButtons?: boolean;
+    setShiftFunction?: (days: number) => Date;
+    shiftButtonValues?: Record<string, React.Key>;
     onSetToday?: () => void;
-    onSetShift?: (days: number) => void;
+    onSetShift?: (shiftDate: Date) => void;
 }
 export declare const useDialogActionsStyles: (props?: any) => Record<"withAdditionalAction", string>;
 export declare const Picker: React.FunctionComponent<PickerProps>;

package/{build/Picker → Picker}/Picker.js

@@ -73,7 +73,7 @@ exports.useDialogActionsStyles = styles_1.makeStyles({
 });
 exports.Picker = function (props) {
     var _a, _b, _c;
-    var date = props.date, ampm = props.ampm, views = props.views, disableToolbar = props.disableToolbar, disablePast = props.disablePast, disableFuture = props.disableFuture, hideTabs = props.hideTabs, onChange = props.onChange, openTo = props.openTo, minutesStep = props.minutesStep, dateRangeIcon = props.dateRangeIcon, timeIcon = props.timeIcon, unparsedMinDate = props.minDate, unparsedMaxDate = props.maxDate, animateYearScrolling = props.animateYearScrolling, leftArrowIcon = props.leftArrowIcon, rightArrowIcon = props.rightArrowIcon, renderDay = props.renderDay, shouldDisableDate = props.shouldDisableDate, allowKeyboardControl = props.allowKeyboardControl, onMonthChange = props.onMonthChange, onYearChange = props.onYearChange, leftArrowButtonProps = props.leftArrowButtonProps, rightArrowButtonProps = props.rightArrowButtonProps, ToolbarComponent = props.ToolbarComponent, loadingIndicator = props.loadingIndicator, orientation = props.orientation, showActionsBar = props.showActionsBar, onSetToday = props.onSetToday, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, onSetShift = props.onSetShift, showShiftButtons = props.showShiftButtons;
+    var date = props.date, ampm = props.ampm, views = props.views, disableToolbar = props.disableToolbar, disablePast = props.disablePast, disableFuture = props.disableFuture, hideTabs = props.hideTabs, onChange = props.onChange, openTo = props.openTo, minutesStep = props.minutesStep, dateRangeIcon = props.dateRangeIcon, timeIcon = props.timeIcon, unparsedMinDate = props.minDate, unparsedMaxDate = props.maxDate, animateYearScrolling = props.animateYearScrolling, leftArrowIcon = props.leftArrowIcon, rightArrowIcon = props.rightArrowIcon, renderDay = props.renderDay, shouldDisableDate = props.shouldDisableDate, allowKeyboardControl = props.allowKeyboardControl, onMonthChange = props.onMonthChange, onYearChange = props.onYearChange, leftArrowButtonProps = props.leftArrowButtonProps, rightArrowButtonProps = props.rightArrowButtonProps, ToolbarComponent = props.ToolbarComponent, loadingIndicator = props.loadingIndicator, orientation = props.orientation, showActionsBar = props.showActionsBar, onSetToday = props.onSetToday, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, onSetShift = props.onSetShift, showShiftButtons = props.showShiftButtons, setShiftFunction = props.setShiftFunction, shiftButtonValues = props.shiftButtonValues;
     var utils = useUtils_1.useUtils();
     var classes = useStyles();
     var buttonClasses = useButtonsStyles();
@@ -82,18 +82,21 @@ exports.Picker = function (props) {
     var _d = useViews_1.useViews(views, openTo, onChange), openView = _d.openView, setOpenView = _d.setOpenView, handleChangeAndOpenNext = _d.handleChangeAndOpenNext;
     var minDate = React.useMemo(function () { return utils.date(unparsedMinDate); }, [unparsedMinDate, utils]);
     var maxDate = React.useMemo(function () { return utils.date(unparsedMaxDate); }, [unparsedMaxDate, utils]);
-    var shiftButtonValues = [1, 2, 3, 7];
-    var shiftButtons = onSetShift && showShiftButtons
-        ? shiftButtonValues.map(function (shiftValue) {
-            return (React.createElement(core_1.Button, { color: "primary", onClick: function () { return onSetShift(shiftValue); }, key: shiftValue },
-                shiftValue > 0 ? '+' : '',
-                shiftValue));
-        })
-        : null;
+    var shiftButtons = new Array();
+    if (showShiftButtons && setShiftFunction && onSetShift && shiftButtonValues) {
+        var _loop_1 = function (key) {
+            shiftButtons.push(React.createElement(core_1.Button, { color: "primary", onClick: function () { return onSetShift(setShiftFunction(parseInt(key))); }, key: shiftButtonValues[key] },
+                parseInt(key) > 0 ? '+' : '',
+                shiftButtonValues[key]));
+        };
+        for (var key in shiftButtonValues) {
+            _loop_1(key);
+        }
+    }
     return (React.createElement("div", { className: clsx_1.default(classes.container, (_a = {},
             _a[classes.containerLandscape] = isLandscape,
             _a)) },
-        !disableToolbar && (React.createElement(ToolbarComponent, __assign({ date: date, onChange: onChange, setOpenView: setOpenView, openView: openView, hideTabs: hideTabs, dateRangeIcon: dateRangeIcon, timeIcon: timeIcon, isLandscape: isLandscape }, props))),
+        !disableToolbar && (React.createElement(ToolbarComponent, __assign({ setOpenView: setOpenView, openView: openView, hideTabs: hideTabs, dateRangeIcon: dateRangeIcon, timeIcon: timeIcon, isLandscape: isLandscape }, props))),
         React.createElement("div", { className: clsx_1.default(classes.pickerView, (_b = {}, _b[classes.pickerViewLandscape] = isLandscape, _b)) },
             openView === 'year' && (React.createElement(YearView_1.YearSelection, { date: date, onChange: handleChangeAndOpenNext, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, onYearChange: onYearChange, animateYearScrolling: animateYearScrolling })),
             openView === 'month' && (React.createElement(MonthView_1.MonthSelection, { date: date, onChange: handleChangeAndOpenNext, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, onMonthChange: onMonthChange })),
@@ -105,6 +108,6 @@ exports.Picker = function (props) {
                     _c)),
             } },
             showTodayButton && (React.createElement(core_1.Button, { color: "primary", onClick: onSetToday, key: "today" }, todayLabel)),
-            showShiftButtons && shiftButtons))));
+            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/{build/Picker → Picker}/WrappedKeyboardPicker.js

@@ -42,12 +42,12 @@ var useKeyboardPickerState_1 = require("../_shared/hooks/useKeyboardPickerState"
 function makeKeyboardPicker(_a) {
     var useOptions = _a.useOptions, getCustomProps = _a.getCustomProps, DefaultToolbarComponent = _a.DefaultToolbarComponent;
     function WrappedKeyboardPicker(props) {
-        var allowKeyboardControl = props.allowKeyboardControl, ampm = props.ampm, hideTabs = props.hideTabs, animateYearScrolling = props.animateYearScrolling, autoOk = props.autoOk, disableFuture = props.disableFuture, disablePast = props.disablePast, format = props.format, forwardedRef = props.forwardedRef, initialFocusedDate = props.initialFocusedDate, invalidDateMessage = props.invalidDateMessage, labelFunc = props.labelFunc, leftArrowIcon = props.leftArrowIcon, leftArrowButtonProps = props.leftArrowButtonProps, maxDate = props.maxDate, maxDateMessage = props.maxDateMessage, minDate = props.minDate, onOpen = props.onOpen, onClose = props.onClose, minDateMessage = props.minDateMessage, strictCompareDates = props.strictCompareDates, minutesStep = props.minutesStep, onAccept = props.onAccept, onChange = props.onChange, onMonthChange = props.onMonthChange, onYearChange = props.onYearChange, renderDay = props.renderDay, views = props.views, openTo = props.openTo, rightArrowIcon = props.rightArrowIcon, rightArrowButtonProps = props.rightArrowButtonProps, shouldDisableDate = props.shouldDisableDate, value = props.value, dateRangeIcon = props.dateRangeIcon, emptyLabel = props.emptyLabel, invalidLabel = props.invalidLabel, timeIcon = props.timeIcon, orientation = props.orientation, variant = props.variant, disableToolbar = props.disableToolbar, loadingIndicator = props.loadingIndicator, showActionsBar = props.showActionsBar, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, _a = props.ToolbarComponent, ToolbarComponent = _a === void 0 ? DefaultToolbarComponent : _a, showShiftButtons = props.showShiftButtons, other = __rest(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "value", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "orientation", "variant", "disableToolbar", "loadingIndicator", "showActionsBar", "showTodayButton", "todayLabel", "ToolbarComponent", "showShiftButtons"]);
+        var allowKeyboardControl = props.allowKeyboardControl, ampm = props.ampm, hideTabs = props.hideTabs, animateYearScrolling = props.animateYearScrolling, autoOk = props.autoOk, disableFuture = props.disableFuture, disablePast = props.disablePast, format = props.format, forwardedRef = props.forwardedRef, initialFocusedDate = props.initialFocusedDate, invalidDateMessage = props.invalidDateMessage, labelFunc = props.labelFunc, leftArrowIcon = props.leftArrowIcon, leftArrowButtonProps = props.leftArrowButtonProps, maxDate = props.maxDate, maxDateMessage = props.maxDateMessage, minDate = props.minDate, onOpen = props.onOpen, onClose = props.onClose, minDateMessage = props.minDateMessage, strictCompareDates = props.strictCompareDates, minutesStep = props.minutesStep, onAccept = props.onAccept, onChange = props.onChange, onMonthChange = props.onMonthChange, onYearChange = props.onYearChange, renderDay = props.renderDay, views = props.views, openTo = props.openTo, rightArrowIcon = props.rightArrowIcon, rightArrowButtonProps = props.rightArrowButtonProps, shouldDisableDate = props.shouldDisableDate, value = props.value, dateRangeIcon = props.dateRangeIcon, emptyLabel = props.emptyLabel, invalidLabel = props.invalidLabel, timeIcon = props.timeIcon, orientation = props.orientation, variant = props.variant, disableToolbar = props.disableToolbar, loadingIndicator = props.loadingIndicator, showActionsBar = props.showActionsBar, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, _a = props.ToolbarComponent, ToolbarComponent = _a === void 0 ? DefaultToolbarComponent : _a, showShiftButtons = props.showShiftButtons, setShiftFunction = props.setShiftFunction, shiftButtonValues = props.shiftButtonValues, other = __rest(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "value", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "orientation", "variant", "disableToolbar", "loadingIndicator", "showActionsBar", "showTodayButton", "todayLabel", "ToolbarComponent", "showShiftButtons", "setShiftFunction", "shiftButtonValues"]);
         var injectedProps = getCustomProps ? getCustomProps(props) : {};
         var options = useOptions(props);
         var _b = useKeyboardPickerState_1.useKeyboardPickerState(props, options), pickerProps = _b.pickerProps, inputProps = _b.inputProps, wrapperProps = _b.wrapperProps;
         return (React.createElement(Wrapper_1.Wrapper, __assign({ variant: variant, InputComponent: KeyboardDateInput_1.default, DateInputProps: inputProps }, injectedProps, wrapperProps, other),
-            React.createElement(Picker_1.Picker, __assign({}, pickerProps, { ToolbarComponent: ToolbarComponent, disableToolbar: disableToolbar, hideTabs: hideTabs, orientation: orientation, showActionsBar: showActionsBar, showTodayButton: showTodayButton, todayLabel: todayLabel, ampm: ampm, views: views, openTo: openTo, allowKeyboardControl: allowKeyboardControl, minutesStep: minutesStep, animateYearScrolling: animateYearScrolling, disableFuture: disableFuture, disablePast: disablePast, leftArrowIcon: leftArrowIcon, leftArrowButtonProps: leftArrowButtonProps, maxDate: maxDate, minDate: minDate, strictCompareDates: strictCompareDates, onMonthChange: onMonthChange, onYearChange: onYearChange, renderDay: renderDay, dateRangeIcon: dateRangeIcon, timeIcon: timeIcon, rightArrowIcon: rightArrowIcon, rightArrowButtonProps: rightArrowButtonProps, shouldDisableDate: shouldDisableDate, loadingIndicator: loadingIndicator, showShiftButtons: showShiftButtons }))));
+            React.createElement(Picker_1.Picker, __assign({}, pickerProps, { ToolbarComponent: ToolbarComponent, disableToolbar: disableToolbar, hideTabs: hideTabs, orientation: orientation, showActionsBar: showActionsBar, showTodayButton: showTodayButton, todayLabel: todayLabel, ampm: ampm, views: views, openTo: openTo, allowKeyboardControl: allowKeyboardControl, minutesStep: minutesStep, animateYearScrolling: animateYearScrolling, disableFuture: disableFuture, disablePast: disablePast, leftArrowIcon: leftArrowIcon, leftArrowButtonProps: leftArrowButtonProps, maxDate: maxDate, minDate: minDate, strictCompareDates: strictCompareDates, onMonthChange: onMonthChange, onYearChange: onYearChange, renderDay: renderDay, dateRangeIcon: dateRangeIcon, timeIcon: timeIcon, rightArrowIcon: rightArrowIcon, rightArrowButtonProps: rightArrowButtonProps, shouldDisableDate: shouldDisableDate, loadingIndicator: loadingIndicator, showShiftButtons: showShiftButtons, setShiftFunction: setShiftFunction, shiftButtonValues: shiftButtonValues }))));
     }
     return WrappedKeyboardPicker;
 }

package/{build/Picker → Picker}/WrappedPurePicker.js

@@ -37,12 +37,13 @@ var PureDateInput_1 = require("../_shared/PureDateInput");
 function makePurePicker(_a) {
     var useOptions = _a.useOptions, getCustomProps = _a.getCustomProps, DefaultToolbarComponent = _a.DefaultToolbarComponent;
     function WrappedPurePicker(props) {
-        var allowKeyboardControl = props.allowKeyboardControl, ampm = props.ampm, hideTabs = props.hideTabs, animateYearScrolling = props.animateYearScrolling, autoOk = props.autoOk, disableFuture = props.disableFuture, disablePast = props.disablePast, format = props.format, forwardedRef = props.forwardedRef, initialFocusedDate = props.initialFocusedDate, invalidDateMessage = props.invalidDateMessage, labelFunc = props.labelFunc, leftArrowIcon = props.leftArrowIcon, leftArrowButtonProps = props.leftArrowButtonProps, maxDate = props.maxDate, maxDateMessage = props.maxDateMessage, minDate = props.minDate, onOpen = props.onOpen, onClose = props.onClose, minDateMessage = props.minDateMessage, strictCompareDates = props.strictCompareDates, minutesStep = props.minutesStep, onAccept = props.onAccept, onChange = props.onChange, onMonthChange = props.onMonthChange, onYearChange = props.onYearChange, renderDay = props.renderDay, views = props.views, openTo = props.openTo, rightArrowIcon = props.rightArrowIcon, rightArrowButtonProps = props.rightArrowButtonProps, shouldDisableDate = props.shouldDisableDate, dateRangeIcon = props.dateRangeIcon, emptyLabel = props.emptyLabel, invalidLabel = props.invalidLabel, timeIcon = props.timeIcon, value = props.value, variant = props.variant, orientation = props.orientation, disableToolbar = props.disableToolbar, loadingIndicator = props.loadingIndicator, _a = props.ToolbarComponent, ToolbarComponent = _a === void 0 ? DefaultToolbarComponent : _a, showActionsBar = props.showActionsBar, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, showShiftButtons = props.showShiftButtons, other = __rest(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "value", "variant", "orientation", "disableToolbar", "loadingIndicator", "ToolbarComponent", "showActionsBar", "showTodayButton", "todayLabel", "showShiftButtons"]);
+        var allowKeyboardControl = props.allowKeyboardControl, ampm = props.ampm, hideTabs = props.hideTabs, animateYearScrolling = props.animateYearScrolling, autoOk = props.autoOk, disableFuture = props.disableFuture, disablePast = props.disablePast, format = props.format, forwardedRef = props.forwardedRef, initialFocusedDate = props.initialFocusedDate, invalidDateMessage = props.invalidDateMessage, labelFunc = props.labelFunc, leftArrowIcon = props.leftArrowIcon, leftArrowButtonProps = props.leftArrowButtonProps, maxDate = props.maxDate, maxDateMessage = props.maxDateMessage, minDate = props.minDate, onOpen = props.onOpen, onClose = props.onClose, minDateMessage = props.minDateMessage, strictCompareDates = props.strictCompareDates, minutesStep = props.minutesStep, onAccept = props.onAccept, onChange = props.onChange, onMonthChange = props.onMonthChange, onYearChange = props.onYearChange, renderDay = props.renderDay, views = props.views, openTo = props.openTo, rightArrowIcon = props.rightArrowIcon, rightArrowButtonProps = props.rightArrowButtonProps, shouldDisableDate = props.shouldDisableDate, dateRangeIcon = props.dateRangeIcon, emptyLabel = props.emptyLabel, invalidLabel = props.invalidLabel, timeIcon = props.timeIcon, value = props.value, variant = props.variant, orientation = props.orientation, disableToolbar = props.disableToolbar, loadingIndicator = props.loadingIndicator, _a = props.ToolbarComponent, ToolbarComponent = _a === void 0 ? DefaultToolbarComponent : _a, showActionsBar = props.showActionsBar, showTodayButton = props.showTodayButton, todayLabel = props.todayLabel, showShiftButtons = props.showShiftButtons, setShiftFunction = props.setShiftFunction, shiftButtonValues = props.shiftButtonValues, other = __rest(props, ["allowKeyboardControl", "ampm", "hideTabs", "animateYearScrolling", "autoOk", "disableFuture", "disablePast", "format", "forwardedRef", "initialFocusedDate", "invalidDateMessage", "labelFunc", "leftArrowIcon", "leftArrowButtonProps", "maxDate", "maxDateMessage", "minDate", "onOpen", "onClose", "minDateMessage", "strictCompareDates", "minutesStep", "onAccept", "onChange", "onMonthChange", "onYearChange", "renderDay", "views", "openTo", "rightArrowIcon", "rightArrowButtonProps", "shouldDisableDate", "dateRangeIcon", "emptyLabel", "invalidLabel", "timeIcon", "value", "variant", "orientation", "disableToolbar", "loadingIndicator", "ToolbarComponent", "showActionsBar", "showTodayButton", "todayLabel", "showShiftButtons", "setShiftFunction", "shiftButtonValues"]);
         var injectedProps = getCustomProps ? getCustomProps(props) : {};
+        var dialogVariantProps = variant === "dialog" ? { showTodayButton: showTodayButton, todayLabel: todayLabel } : {};
         var options = useOptions(props);
         var _b = usePickerState_1.usePickerState(props, options), pickerProps = _b.pickerProps, inputProps = _b.inputProps, wrapperProps = _b.wrapperProps;
-        return (React.createElement(Wrapper_1.Wrapper, __assign({ variant: variant, InputComponent: PureDateInput_1.PureDateInput, DateInputProps: inputProps, showTodayButton: showTodayButton, todayLabel: todayLabel }, wrapperProps, injectedProps, other),
-            React.createElement(Picker_1.Picker, __assign({}, pickerProps, { orientation: orientation, disableToolbar: disableToolbar, ToolbarComponent: ToolbarComponent, hideTabs: hideTabs, ampm: ampm, views: views, openTo: openTo, allowKeyboardControl: allowKeyboardControl, minutesStep: minutesStep, animateYearScrolling: animateYearScrolling, disableFuture: disableFuture, disablePast: disablePast, leftArrowIcon: leftArrowIcon, leftArrowButtonProps: leftArrowButtonProps, maxDate: maxDate, minDate: minDate, strictCompareDates: strictCompareDates, onMonthChange: onMonthChange, onYearChange: onYearChange, renderDay: renderDay, dateRangeIcon: dateRangeIcon, timeIcon: timeIcon, rightArrowIcon: rightArrowIcon, rightArrowButtonProps: rightArrowButtonProps, shouldDisableDate: shouldDisableDate, loadingIndicator: loadingIndicator, showActionsBar: showActionsBar, showTodayButton: showTodayButton, todayLabel: todayLabel, showShiftButtons: showShiftButtons }))));
+        return (React.createElement(Wrapper_1.Wrapper, __assign({ variant: variant, InputComponent: PureDateInput_1.PureDateInput, DateInputProps: inputProps }, wrapperProps, injectedProps, dialogVariantProps, other),
+            React.createElement(Picker_1.Picker, __assign({}, pickerProps, { orientation: orientation, disableToolbar: disableToolbar, ToolbarComponent: ToolbarComponent, hideTabs: hideTabs, ampm: ampm, views: views, openTo: openTo, allowKeyboardControl: allowKeyboardControl, minutesStep: minutesStep, animateYearScrolling: animateYearScrolling, disableFuture: disableFuture, disablePast: disablePast, leftArrowIcon: leftArrowIcon, leftArrowButtonProps: leftArrowButtonProps, maxDate: maxDate, minDate: minDate, strictCompareDates: strictCompareDates, onMonthChange: onMonthChange, onYearChange: onYearChange, renderDay: renderDay, dateRangeIcon: dateRangeIcon, timeIcon: timeIcon, rightArrowIcon: rightArrowIcon, rightArrowButtonProps: rightArrowButtonProps, shouldDisableDate: shouldDisableDate, loadingIndicator: loadingIndicator, showActionsBar: showActionsBar, showTodayButton: showTodayButton, todayLabel: todayLabel, showShiftButtons: showShiftButtons, setShiftFunction: setShiftFunction, shiftButtonValues: shiftButtonValues }))));
     }
     return WrappedPurePicker;
 }

package/{build/README.md → README.md}

@@ -1 +1 @@
-Fork @material-ui/pickers that implements advanced features required for DocsVision WebClient. Original repository https://github.com/mui-org/material-ui-pickers
+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,166 @@
+"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),
+        ];
+        // 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];
+            valueRef.current = null;
+            // 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/{build/TimePicker → TimePicker}/TimePicker.d.ts

@@ -2,6 +2,7 @@
 /// <reference types="styled-jsx" />
 import { WrappedPurePickerProps } from '../Picker/WrappedPurePicker';
 import { WrappedKeyboardPickerProps } from '../Picker/WrappedKeyboardPicker';
+declare type TimePickerView = 'hours' | 'minutes' | 'seconds';
 export interface BaseTimePickerProps {
     /**
      * 12h/24h view for hour selection clock
@@ -16,11 +17,12 @@ export interface BaseTimePickerProps {
 }
 export interface TimePickerViewsProps extends BaseTimePickerProps {
     /** Array of views to show */
-    views?: ('hours' | 'minutes' | 'seconds')[];
+    views?: TimePickerView[];
     /** Open to timepicker */
-    openTo?: 'hours' | 'minutes' | 'seconds';
+    openTo?: TimePickerView;
 }
 export declare type TimePickerProps = WrappedPurePickerProps & TimePickerViewsProps;
 export declare type KeyboardTimePickerProps = WrappedKeyboardPickerProps & TimePickerViewsProps;
 export declare const TimePicker: import("react").FunctionComponent<TimePickerProps>;
 export declare const KeyboardTimePicker: import("react").FunctionComponent<KeyboardTimePickerProps>;
+export {};

package/{build/TimePicker → TimePicker}/TimePicker.js

@@ -20,14 +20,14 @@ 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 {
         getDefaultFormat: function () {
             return text_field_helper_1.pick12hOr24hFormat(props.format, props.ampm, {
-                '12h': utils.time12hFormat,
-                '24h': utils.time24hFormat,
+                '12h': utils.formats.hours12h,
+                '24h': utils.formats.hours24h,
             });
         },
     };

package/{build/TimePicker → TimePicker}/TimePickerToolbar.js

@@ -88,11 +88,11 @@ var TimePickerToolbar = function (_a) {
                 _c[classes.hourMinuteLabelLandscape] = isLandscape,
                 _c[classes.hourMinuteLabelReverse] = theme.direction === 'rtl',
                 _c)) },
-            utils_1.arrayIncludes(views, 'hours') && (React.createElement(ToolbarButton_1.default, { variant: clockTypographyVariant, onClick: function () { return setOpenView(ClockType_1.default.HOURS); }, selected: openView === ClockType_1.default.HOURS, label: utils.getHourText(date, Boolean(ampm)) })),
+            utils_1.arrayIncludes(views, 'hours') && (React.createElement(ToolbarButton_1.default, { variant: clockTypographyVariant, onClick: function () { return setOpenView(ClockType_1.default.HOURS); }, selected: openView === ClockType_1.default.HOURS, label: utils.formatByString(date, ampm ? utils.formats.hours12h : utils.formats.hours24h) })),
             utils_1.arrayIncludes(views, ['hours', 'minutes']) && (React.createElement(ToolbarText_1.default, { label: ":", variant: clockTypographyVariant, selected: false, className: classes.separator })),
-            utils_1.arrayIncludes(views, 'minutes') && (React.createElement(ToolbarButton_1.default, { variant: clockTypographyVariant, onClick: function () { return setOpenView(ClockType_1.default.MINUTES); }, selected: openView === ClockType_1.default.MINUTES, label: utils.getMinuteText(date) })),
+            utils_1.arrayIncludes(views, 'minutes') && (React.createElement(ToolbarButton_1.default, { variant: clockTypographyVariant, onClick: function () { return setOpenView(ClockType_1.default.MINUTES); }, selected: openView === ClockType_1.default.MINUTES, label: utils.formatByString(date, utils.formats.minutes) })),
             utils_1.arrayIncludes(views, ['minutes', 'seconds']) && (React.createElement(ToolbarText_1.default, { variant: "h2", label: ":", selected: false, className: classes.separator })),
-            utils_1.arrayIncludes(views, 'seconds') && (React.createElement(ToolbarButton_1.default, { variant: "h2", onClick: function () { return setOpenView(ClockType_1.default.SECONDS); }, selected: openView === ClockType_1.default.SECONDS, label: utils.getSecondText(date) }))),
+            utils_1.arrayIncludes(views, 'seconds') && (React.createElement(ToolbarButton_1.default, { variant: "h2", onClick: function () { return setOpenView(ClockType_1.default.SECONDS); }, selected: openView === ClockType_1.default.SECONDS, label: utils.formatByString(date, utils.formats.seconds) }))),
         ampm && (React.createElement("div", { className: clsx_1.default(classes.ampmSelection, (_d = {},
                 _d[classes.ampmLandscape] = isLandscape,
                 _d[classes.ampmSelectionWithSeconds] = utils_1.arrayIncludes(views, 'seconds'),

package/{build/_helpers → _helpers}/date-utils.d.ts

@@ -3,7 +3,7 @@ import { MaterialUiPickersDate } from '../typings/date';
 import { DatePickerView } from '../DatePicker/DatePicker';
 interface FindClosestDateParams {
     date: MaterialUiPickersDate;
-    utils: IUtils<MaterialUiPickersDate>;
+    utils: IUtils<MaterialUiPickersDate, any>;
     minDate: MaterialUiPickersDate;
     maxDate: MaterialUiPickersDate;
     disableFuture: boolean;
@@ -13,5 +13,5 @@ interface FindClosestDateParams {
 export declare const findClosestEnabledDate: ({ date, utils, minDate, maxDate, disableFuture, disablePast, shouldDisableDate, }: FindClosestDateParams) => MaterialUiPickersDate;
 export declare const isYearOnlyView: (views: DatePickerView[]) => boolean;
 export declare const isYearAndMonthViews: (views: DatePickerView[]) => boolean;
-export declare const getFormatByViews: (views: DatePickerView[], utils: IUtils<MaterialUiPickersDate>) => string;
+export declare const getFormatByViews: (views: DatePickerView[], utils: IUtils<MaterialUiPickersDate, any>) => any;
 export {};

package/{build/_helpers → _helpers}/date-utils.js

@@ -52,10 +52,10 @@ exports.isYearAndMonthViews = function (views) {
 };
 exports.getFormatByViews = function (views, utils) {
     if (exports.isYearOnlyView(views)) {
-        return utils.yearFormat;
+        return utils.formats.year;
     }
     if (exports.isYearAndMonthViews(views)) {
-        return utils.yearMonthFormat;
+        return utils.formats.monthAndYear;
     }
-    return utils.dateFormat;
+    return utils.formats.monthAndDate;
 };