@datarobot/design-system 29.7.4 → 29.7.6

package/cjs/code-editor/code-editor.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-import PropTypes from 'prop-types';
 import { ValueOf } from '../types';
 import 'codemirror/mode/sql/sql';
 import 'codemirror/mode/javascript/javascript';
@@ -57,21 +56,6 @@ export type CodeEditorOptions = {
     readOnly?: string | boolean;
     theme?: CodeEditorTheme;
 };
-export declare const CodeEditorOptionsShape: PropTypes.Requireable<PropTypes.InferProps<{
-    lineWrapping: PropTypes.Requireable<boolean>;
-    tabSize: PropTypes.Requireable<number>;
-    value: PropTypes.Requireable<string>;
-    mode: PropTypes.Requireable<"r" | "python" | "text/plain" | "text/x-sparksql" | "javascript" | "shell" | "htmlmixed" | "clike" | "yaml" | "xml" | {
-        name: "javascript";
-        json: boolean;
-    }>;
-    lineNumbers: PropTypes.Requireable<boolean>;
-    indentWithTabs: PropTypes.Requireable<boolean>;
-    smartIndent: PropTypes.Requireable<boolean>;
-    matchBrackets: PropTypes.Requireable<boolean>;
-    readOnly: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
-    theme: PropTypes.Requireable<"default" | "dracula">;
-}>>;
 export type CodeEditorControls = {
     placement?: CORNER_PLACEMENTS_TYPES;
     element?: ReactElement;

package/cjs/code-editor/code-editor.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.JSON_MODE = exports.CodeEditorOptionsShape = exports.CodeEditor = exports.CORNER_PLACEMENTS_TYPES = exports.CORNER_PLACEMENTS = exports.CODE_EDITOR_THEMES = exports.CODE_EDITOR_MODES = void 0;
+exports.JSON_MODE = exports.CodeEditor = exports.CORNER_PLACEMENTS_TYPES = exports.CORNER_PLACEMENTS = exports.CODE_EDITOR_THEMES = exports.CODE_EDITOR_MODES = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _hintWrapper = _interopRequireDefault(require("./utils/hint-wrapper"));
 var _searchWrapper = require("./utils/search-wrapper");
@@ -65,19 +64,6 @@ const DefaultOptions = {
   matchBrackets: true,
   theme: CODE_EDITOR_THEMES.DARK
 };
-// Keeping this for backwards compatiblity
-const CodeEditorOptionsShape = exports.CodeEditorOptionsShape = _propTypes.default.shape({
-  lineWrapping: _propTypes.default.bool,
-  tabSize: _propTypes.default.number,
-  value: _propTypes.default.string,
-  mode: _propTypes.default.oneOf([...Object.values(CODE_EDITOR_MODES), JSON_MODE]),
-  lineNumbers: _propTypes.default.bool,
-  indentWithTabs: _propTypes.default.bool,
-  smartIndent: _propTypes.default.bool,
-  matchBrackets: _propTypes.default.bool,
-  readOnly: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-  theme: _propTypes.default.oneOf(Object.values(CODE_EDITOR_THEMES))
-});
 
 // We need this to ignore an error when defaultProps are defined but the linters throws an error
 

package/cjs/datetime-range-picker/datetime-range-picker-panel.d.ts

@@ -36,8 +36,9 @@ type ValidateOnClickProps = {
     dateTimeFormat: string;
     minStart?: Moment;
     maxEnd?: Moment;
+    sameDateError?: boolean;
 };
-export type ValidateOnClick = ({ start, end, viewMode, dateTimeFormat, minStart, maxEnd, }: ValidateOnClickProps) => {
+export type ValidateOnClick = ({ start, end, viewMode, dateTimeFormat, minStart, maxEnd, sameDateError, }: ValidateOnClickProps) => {
     startErrors: DateRangeErrors;
     endErrors: DateRangeErrors;
 };
@@ -53,16 +54,17 @@ export type DateRangePickerPanelProps = {
     initialTargetInput?: DateRangeInputType;
     maxEnd?: Moment;
     minStart?: Moment;
+    sameDateError?: boolean;
     onSubmit: (start: Moment, end: Moment) => void;
     onDismiss: () => void;
     resetText?: string;
     timeFormat: string | boolean;
     utcSuffix?: string;
-    validateOnClick: ValidateOnClick;
-    validateOnChange: ValidateOnChange;
+    validateOnClick?: ValidateOnClick;
+    validateOnChange?: ValidateOnChange;
     dateStartInputAriaLabel: string;
     dateEndInputAriaLabel: string;
 };
 /** Represents the panel used to select two datetimes that make up a range. */
-declare function DateRangePickerPanel({ buttonText, cancelButtonText, dateFormat, defaultEnd, defaultStart, initialDirection, initialViewMode, initialTargetInput, maxEnd, minStart, onSubmit, onDismiss, resetText, timeFormat, utcSuffix, validateOnClick, validateOnChange, dateStartInputAriaLabel, dateEndInputAriaLabel, }: DateRangePickerPanelProps): import("react/jsx-runtime").JSX.Element;
+declare function DateRangePickerPanel({ buttonText, cancelButtonText, dateFormat, defaultEnd, defaultStart, initialDirection, initialViewMode, initialTargetInput, maxEnd, minStart, sameDateError, onSubmit, onDismiss, resetText, timeFormat, utcSuffix, validateOnClick: propValidateOnClick, validateOnChange: propValidateOnChange, dateStartInputAriaLabel, dateEndInputAriaLabel, }: DateRangePickerPanelProps): import("react/jsx-runtime").JSX.Element;
 export default DateRangePickerPanel;

package/cjs/datetime-range-picker/datetime-range-picker-panel.js

@@ -91,16 +91,21 @@ function DateRangePickerPanel({
   initialTargetInput,
   maxEnd,
   minStart,
+  sameDateError,
   onSubmit,
   onDismiss,
   resetText,
   timeFormat,
   utcSuffix,
-  validateOnClick,
-  validateOnChange,
+  validateOnClick: propValidateOnClick,
+  validateOnChange: propValidateOnChange,
   dateStartInputAriaLabel,
   dateEndInputAriaLabel
 }) {
+  const defaultValidateOnClick = (0, _helpers.useValidateOnClick)();
+  const defaultValidateOnChange = (0, _helpers.useGetDateTimeValidityError)();
+  const validateOnClick = propValidateOnClick || defaultValidateOnClick;
+  const validateOnChange = propValidateOnChange || defaultValidateOnChange;
   const dateTimeFormat = (0, _helpers.getDateTimeFormat)(dateFormat, timeFormat);
 
   // Developer-provided datetimes might not always follow the exact date and time format they want to use.
@@ -164,7 +169,8 @@ function DateRangePickerPanel({
           viewMode: initialViewMode,
           dateTimeFormat,
           minStart,
-          maxEnd
+          maxEnd,
+          sameDateError
         })
       });
     }
@@ -184,7 +190,8 @@ function DateRangePickerPanel({
           viewMode: initialViewMode,
           dateTimeFormat,
           minStart,
-          maxEnd
+          maxEnd,
+          sameDateError
         })
       });
     }
@@ -206,7 +213,8 @@ function DateRangePickerPanel({
         viewMode: initialViewMode,
         dateTimeFormat,
         minStart,
-        maxEnd
+        maxEnd,
+        sameDateError
       })
     });
   }
@@ -352,7 +360,8 @@ function DateRangePickerPanel({
           viewMode: initialViewMode,
           dateTimeFormat,
           minStart,
-          maxEnd
+          maxEnd,
+          sameDateError
         })
       });
     }
@@ -365,7 +374,8 @@ function DateRangePickerPanel({
         viewMode: initialViewMode,
         dateTimeFormat,
         minStart,
-        maxEnd
+        maxEnd,
+        sameDateError
       })
     });
   }
@@ -392,7 +402,8 @@ function DateRangePickerPanel({
           viewMode: initialViewMode,
           dateTimeFormat,
           minStart,
-          maxEnd
+          maxEnd,
+          sameDateError
         })
       });
     }
@@ -405,7 +416,8 @@ function DateRangePickerPanel({
         viewMode: initialViewMode,
         dateTimeFormat,
         minStart,
-        maxEnd
+        maxEnd,
+        sameDateError
       })
     });
   }

package/cjs/datetime-range-picker/datetime-range-picker.d.ts

@@ -23,12 +23,13 @@ export declare const INITIAL_DIRECTION: {
 export type InitialDirection = ValueOf<typeof INITIAL_DIRECTION>;
 export type DateRangePickerProps = {
     onUpdate: (updatedStart: Moment, updatedEnd: Moment) => void;
-    validateOnClick: ValidateOnClick;
-    validateOnChange: ValidateOnChange;
+    validateOnClick?: ValidateOnClick;
+    validateOnChange?: ValidateOnChange;
     start: Moment;
     end: Moment;
     minStart?: Moment;
     maxEnd?: Moment;
+    sameDateError?: boolean;
     labelFormat?: string;
     anchorType?: AnchorType;
     isDisabled?: boolean;
@@ -50,5 +51,5 @@ export type DateRangePickerProps = {
  * @midnight-gray-supported
  * @alpine-light-supported
  * */
-declare function DateRangePicker({ onUpdate, validateOnChange, validateOnClick, start, end, minStart, maxEnd, labelFormat, anchorType, buttonText, cancelButtonText, resetText, dateFormat, timeFormat, initialDirection, initialViewMode, placement, showTimeZoneSuffix, isDisabled, utcSuffix, dateStartInputAriaLabel, dateEndInputAriaLabel, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function DateRangePicker({ onUpdate, validateOnChange, validateOnClick, start, end, minStart, maxEnd, sameDateError, labelFormat, anchorType, buttonText, cancelButtonText, resetText, dateFormat, timeFormat, initialDirection, initialViewMode, placement, showTimeZoneSuffix, isDisabled, utcSuffix, dateStartInputAriaLabel, dateEndInputAriaLabel, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export default DateRangePicker;

package/cjs/datetime-range-picker/datetime-range-picker.js

@@ -41,6 +41,7 @@ function DateRangePicker({
   end,
   minStart,
   maxEnd,
+  sameDateError,
   labelFormat,
   anchorType = ANCHOR_TYPES.BUTTON,
   buttonText,
@@ -120,6 +121,7 @@ function DateRangePicker({
       defaultEnd: end,
       minStart: minStart,
       maxEnd: maxEnd,
+      sameDateError: sameDateError,
       dateFormat: dateFormat,
       timeFormat: timeFormat,
       initialViewMode: initialViewMode,

package/cjs/datetime-range-picker/helpers.d.ts

@@ -2,6 +2,35 @@ import React, { RefObject } from 'react';
 import moment, { MomentInput, Moment, unitOfTime } from 'moment';
 import Datetime from 'react-datetime';
 import { InitialDirection } from './datetime-range-picker';
+export declare function useValidateOnClick(): ({ start, end, minStart, maxEnd, viewMode, dateTimeFormat, sameDateError, }: {
+    start?: moment.Moment | null | undefined;
+    end?: moment.Moment | null | undefined;
+    viewMode: string;
+    dateTimeFormat: string;
+    minStart?: moment.Moment | undefined;
+    maxEnd?: moment.Moment | undefined;
+    sameDateError?: boolean | undefined;
+}) => {
+    startErrors: {
+        START_BEFORE_MIN?: string | undefined;
+        START_AFTER_MAX?: string | undefined;
+        INVALID_START_DATE?: string | undefined;
+        START_END_SAME?: string | undefined;
+    };
+    endErrors: {
+        INVALID_END_DATE?: string | undefined;
+        END_AFTER_MIN?: string | undefined;
+        END_AFTER_MAX?: string | undefined;
+    };
+};
+/** Checks whether a string can be strictly parsed as a moment object following a provided datetime format
+ *
+ * @param {string} proposedDateTime
+ * @param {string} dateTimeFormat
+ * @returns {boolean}
+ */
+export declare function isValidDateTime(proposedDateTime: string, dateTimeFormat: string): boolean;
+export declare function useGetDateTimeValidityError(): (dateTime: string, dateTimeFormat: string) => string | undefined;
 export interface StringToMomentParams {
     dateTimeFormat?: string;
     strictParse?: boolean;

package/cjs/datetime-range-picker/helpers.js

@@ -13,17 +13,140 @@ exports.getValidityFromErrors = getValidityFromErrors;
 exports.isMonthRelatedToTimePicker = isMonthRelatedToTimePicker;
 exports.isNavigationAvailableForMonthsView = isNavigationAvailableForMonthsView;
 exports.isNavigationAvailableForYearsView = isNavigationAvailableForYearsView;
+exports.isValidDateTime = isValidDateTime;
 exports.truncateDateTimeToFormat = truncateDateTimeToFormat;
+exports.useGetDateTimeValidityError = useGetDateTimeValidityError;
+exports.useValidateOnClick = useValidateOnClick;
 var _react = _interopRequireDefault(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
 var _isEmpty = _interopRequireDefault(require("lodash-es/isEmpty"));
+var _omit = _interopRequireDefault(require("lodash-es/omit"));
 var _formField = require("../form-field");
 var _message = require("../message");
 var _button = require("../button");
 var _datetimeRangePicker = require("./datetime-range-picker");
+var _useTranslation = require("../hooks/use-translation");
+var _datetimeRangePickerPanel = require("./datetime-range-picker-panel");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const DEFAULT_DATETIME_FORMAT = 'YYYY-MM-DDTHH:mm:ss.SSSSSSZ';
+const VALIDATION_ENTITY = {
+  days: {
+    start: 'Start Date',
+    end: 'End Date'
+  },
+  months: {
+    start: 'Start Month',
+    end: 'End Month'
+  }
+};
+function useValidateOnClick() {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  return function validateOnClick({
+    start,
+    end,
+    minStart,
+    maxEnd,
+    viewMode,
+    dateTimeFormat,
+    sameDateError
+  }) {
+    const [minStartTrimmed, maxEndTrimmed] = [minStart, maxEnd].map(datetime => datetime ? truncateDateTimeToFormat(datetime, dateTimeFormat) : null);
+    const startErrors = {};
+    let endErrors = {};
+    if (minStartTrimmed && start?.isBefore(minStartTrimmed)) {
+      startErrors[_datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES.START_BEFORE_MIN] = t('{{fieldName}} cannot be before {{date}}.', {
+        fieldName: VALIDATION_ENTITY[viewMode].start,
+        date: minStartTrimmed.format(dateTimeFormat)
+      });
+    }
+    if (maxEndTrimmed && start?.isAfter(maxEndTrimmed)) {
+      startErrors[_datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES.START_AFTER_MAX] = t('{{fieldName}} cannot be after {{date}}.', {
+        fieldName: VALIDATION_ENTITY[viewMode].start,
+        date: maxEndTrimmed.format(dateTimeFormat)
+      });
+    }
+    if (maxEndTrimmed && end?.isAfter(maxEndTrimmed)) {
+      endErrors[_datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES.END_AFTER_MAX] = t('{{fieldName}} cannot be after {{date}}.', {
+        fieldName: VALIDATION_ENTITY[viewMode].end,
+        date: maxEndTrimmed.format(dateTimeFormat)
+      });
+    }
+    if (minStartTrimmed && end?.isBefore(minStartTrimmed)) {
+      endErrors[_datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES.END_AFTER_MIN] = t('{{fieldName}} cannot be before {{date}}.', {
+        fieldName: VALIDATION_ENTITY[viewMode].end,
+        date: minStartTrimmed.format(dateTimeFormat)
+      });
+    }
+    if (!start?.isValid()) {
+      startErrors[_datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES.INVALID_START_DATE] = t('You need to set {{fieldName}}', {
+        fieldName: VALIDATION_ENTITY[viewMode].start
+      });
+    }
+    if (!end?.isValid()) {
+      endErrors[_datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES.INVALID_END_DATE] = t('You need to set {{fieldName}}', {
+        fieldName: VALIDATION_ENTITY[viewMode].end
+      });
+    }
+    if (start && !end?.isValid()) {
+      endErrors[_datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES.INVALID_END_DATE] = t('You need to set {{fieldName}}', {
+        fieldName: VALIDATION_ENTITY[viewMode].end
+      });
+    }
+    if (start && end && end.isValid()) {
+      endErrors = (0, _omit.default)(endErrors, [_datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES.INVALID_END_DATE]);
+    }
+    if (sameDateError && start?.isSame(end)) {
+      startErrors[_datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES.START_END_SAME] = t('{{startField}} and {{endField}} cannot be the same', {
+        startField: VALIDATION_ENTITY[viewMode].start,
+        endField: VALIDATION_ENTITY[viewMode].end
+      });
+    }
+    return {
+      startErrors,
+      endErrors
+    };
+  };
+}
+
+/** Checks whether a string can be strictly parsed as a moment object following a provided datetime format
+ *
+ * @param {string} proposedDateTime
+ * @param {string} dateTimeFormat
+ * @returns {boolean}
+ */
+function isValidDateTime(proposedDateTime, dateTimeFormat) {
+  try {
+    convertStringToMoment(proposedDateTime, {
+      dateTimeFormat
+    })?.isValid();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (err) {
+    return false;
+  }
+  return true;
+}
+function useGetDateTimeValidityError() {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  return function getDateTimeValidityError(dateTime, dateTimeFormat) {
+    if (_moment.default.isMoment(dateTime)) {
+      return;
+    }
+    if (typeof dateTime === 'string') {
+      if (isValidDateTime(dateTime, dateTimeFormat)) {
+        return;
+      }
+      return t('Must follow {{dateTimeFormat}} format', {
+        dateTimeFormat
+      });
+    }
+    return t('Expected a datetime');
+  };
+}
 function getValidityFromErrors(errorMapping) {
   let validityValues;
   if ((0, _isEmpty.default)(errorMapping)) {

package/esm/code-editor/code-editor.d.ts

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-import PropTypes from 'prop-types';
 import { ValueOf } from '../types';
 import 'codemirror/mode/sql/sql';
 import 'codemirror/mode/javascript/javascript';
@@ -57,21 +56,6 @@ export type CodeEditorOptions = {
     readOnly?: string | boolean;
     theme?: CodeEditorTheme;
 };
-export declare const CodeEditorOptionsShape: PropTypes.Requireable<PropTypes.InferProps<{
-    lineWrapping: PropTypes.Requireable<boolean>;
-    tabSize: PropTypes.Requireable<number>;
-    value: PropTypes.Requireable<string>;
-    mode: PropTypes.Requireable<"r" | "python" | "text/plain" | "text/x-sparksql" | "javascript" | "shell" | "htmlmixed" | "clike" | "yaml" | "xml" | {
-        name: "javascript";
-        json: boolean;
-    }>;
-    lineNumbers: PropTypes.Requireable<boolean>;
-    indentWithTabs: PropTypes.Requireable<boolean>;
-    smartIndent: PropTypes.Requireable<boolean>;
-    matchBrackets: PropTypes.Requireable<boolean>;
-    readOnly: PropTypes.Requireable<NonNullable<string | boolean | null | undefined>>;
-    theme: PropTypes.Requireable<"default" | "dracula">;
-}>>;
 export type CodeEditorControls = {
     placement?: CORNER_PLACEMENTS_TYPES;
     element?: ReactElement;

package/esm/code-editor/code-editor.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import InjectCombinedHint from './utils/hint-wrapper';
 import { InjectSearch } from './utils/search-wrapper';
@@ -57,19 +56,6 @@ const DefaultOptions = {
   matchBrackets: true,
   theme: CODE_EDITOR_THEMES.DARK
 };
-// Keeping this for backwards compatiblity
-export const CodeEditorOptionsShape = PropTypes.shape({
-  lineWrapping: PropTypes.bool,
-  tabSize: PropTypes.number,
-  value: PropTypes.string,
-  mode: PropTypes.oneOf([...Object.values(CODE_EDITOR_MODES), JSON_MODE]),
-  lineNumbers: PropTypes.bool,
-  indentWithTabs: PropTypes.bool,
-  smartIndent: PropTypes.bool,
-  matchBrackets: PropTypes.bool,
-  readOnly: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  theme: PropTypes.oneOf(Object.values(CODE_EDITOR_THEMES))
-});
 
 // We need this to ignore an error when defaultProps are defined but the linters throws an error
 

package/esm/datetime-range-picker/datetime-range-picker-panel.d.ts

@@ -36,8 +36,9 @@ type ValidateOnClickProps = {
     dateTimeFormat: string;
     minStart?: Moment;
     maxEnd?: Moment;
+    sameDateError?: boolean;
 };
-export type ValidateOnClick = ({ start, end, viewMode, dateTimeFormat, minStart, maxEnd, }: ValidateOnClickProps) => {
+export type ValidateOnClick = ({ start, end, viewMode, dateTimeFormat, minStart, maxEnd, sameDateError, }: ValidateOnClickProps) => {
     startErrors: DateRangeErrors;
     endErrors: DateRangeErrors;
 };
@@ -53,16 +54,17 @@ export type DateRangePickerPanelProps = {
     initialTargetInput?: DateRangeInputType;
     maxEnd?: Moment;
     minStart?: Moment;
+    sameDateError?: boolean;
     onSubmit: (start: Moment, end: Moment) => void;
     onDismiss: () => void;
     resetText?: string;
     timeFormat: string | boolean;
     utcSuffix?: string;
-    validateOnClick: ValidateOnClick;
-    validateOnChange: ValidateOnChange;
+    validateOnClick?: ValidateOnClick;
+    validateOnChange?: ValidateOnChange;
     dateStartInputAriaLabel: string;
     dateEndInputAriaLabel: string;
 };
 /** Represents the panel used to select two datetimes that make up a range. */
-declare function DateRangePickerPanel({ buttonText, cancelButtonText, dateFormat, defaultEnd, defaultStart, initialDirection, initialViewMode, initialTargetInput, maxEnd, minStart, onSubmit, onDismiss, resetText, timeFormat, utcSuffix, validateOnClick, validateOnChange, dateStartInputAriaLabel, dateEndInputAriaLabel, }: DateRangePickerPanelProps): import("react/jsx-runtime").JSX.Element;
+declare function DateRangePickerPanel({ buttonText, cancelButtonText, dateFormat, defaultEnd, defaultStart, initialDirection, initialViewMode, initialTargetInput, maxEnd, minStart, sameDateError, onSubmit, onDismiss, resetText, timeFormat, utcSuffix, validateOnClick: propValidateOnClick, validateOnChange: propValidateOnChange, dateStartInputAriaLabel, dateEndInputAriaLabel, }: DateRangePickerPanelProps): import("react/jsx-runtime").JSX.Element;
 export default DateRangePickerPanel;

package/esm/datetime-range-picker/datetime-range-picker-panel.js

@@ -7,7 +7,7 @@ import { ValidityMessages } from '../form-field';
 import DateRangeSingleDatePicker from './date-range-single-date-picker';
 import { VIEW_MODE_TYPE } from './datetime-range-picker';
 import DateRangeSingleDatePickerInput from './date-range-single-date-picker-input';
-import { getValidityFromErrors, customizeCalendarView, customizeRenderCalendarView, isMonthRelatedToTimePicker, isNavigationAvailableForMonthsView, isNavigationAvailableForYearsView, getLeftCalendarInitialView, getRightCalendarInitialView, truncateDateTimeToFormat, convertStringToMoment, getDateTimeFormat } from './helpers';
+import { getValidityFromErrors, customizeCalendarView, customizeRenderCalendarView, isMonthRelatedToTimePicker, isNavigationAvailableForMonthsView, isNavigationAvailableForYearsView, getLeftCalendarInitialView, getRightCalendarInitialView, truncateDateTimeToFormat, convertStringToMoment, getDateTimeFormat, useValidateOnClick, useGetDateTimeValidityError } from './helpers';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 export let DATE_RANGE_ERROR_TYPES = /*#__PURE__*/function (DATE_RANGE_ERROR_TYPES) {
   DATE_RANGE_ERROR_TYPES["INVALID_DATETIME"] = "INVALID_DATETIME";
@@ -83,16 +83,21 @@ function DateRangePickerPanel({
   initialTargetInput,
   maxEnd,
   minStart,
+  sameDateError,
   onSubmit,
   onDismiss,
   resetText,
   timeFormat,
   utcSuffix,
-  validateOnClick,
-  validateOnChange,
+  validateOnClick: propValidateOnClick,
+  validateOnChange: propValidateOnChange,
   dateStartInputAriaLabel,
   dateEndInputAriaLabel
 }) {
+  const defaultValidateOnClick = useValidateOnClick();
+  const defaultValidateOnChange = useGetDateTimeValidityError();
+  const validateOnClick = propValidateOnClick || defaultValidateOnClick;
+  const validateOnChange = propValidateOnChange || defaultValidateOnChange;
   const dateTimeFormat = getDateTimeFormat(dateFormat, timeFormat);
 
   // Developer-provided datetimes might not always follow the exact date and time format they want to use.
@@ -156,7 +161,8 @@ function DateRangePickerPanel({
           viewMode: initialViewMode,
           dateTimeFormat,
           minStart,
-          maxEnd
+          maxEnd,
+          sameDateError
         })
       });
     }
@@ -176,7 +182,8 @@ function DateRangePickerPanel({
           viewMode: initialViewMode,
           dateTimeFormat,
           minStart,
-          maxEnd
+          maxEnd,
+          sameDateError
         })
       });
     }
@@ -198,7 +205,8 @@ function DateRangePickerPanel({
         viewMode: initialViewMode,
         dateTimeFormat,
         minStart,
-        maxEnd
+        maxEnd,
+        sameDateError
       })
     });
   }
@@ -344,7 +352,8 @@ function DateRangePickerPanel({
           viewMode: initialViewMode,
           dateTimeFormat,
           minStart,
-          maxEnd
+          maxEnd,
+          sameDateError
         })
       });
     }
@@ -357,7 +366,8 @@ function DateRangePickerPanel({
         viewMode: initialViewMode,
         dateTimeFormat,
         minStart,
-        maxEnd
+        maxEnd,
+        sameDateError
       })
     });
   }
@@ -384,7 +394,8 @@ function DateRangePickerPanel({
           viewMode: initialViewMode,
           dateTimeFormat,
           minStart,
-          maxEnd
+          maxEnd,
+          sameDateError
         })
       });
     }
@@ -397,7 +408,8 @@ function DateRangePickerPanel({
         viewMode: initialViewMode,
         dateTimeFormat,
         minStart,
-        maxEnd
+        maxEnd,
+        sameDateError
       })
     });
   }

package/esm/datetime-range-picker/datetime-range-picker.d.ts

@@ -23,12 +23,13 @@ export declare const INITIAL_DIRECTION: {
 export type InitialDirection = ValueOf<typeof INITIAL_DIRECTION>;
 export type DateRangePickerProps = {
     onUpdate: (updatedStart: Moment, updatedEnd: Moment) => void;
-    validateOnClick: ValidateOnClick;
-    validateOnChange: ValidateOnChange;
+    validateOnClick?: ValidateOnClick;
+    validateOnChange?: ValidateOnChange;
     start: Moment;
     end: Moment;
     minStart?: Moment;
     maxEnd?: Moment;
+    sameDateError?: boolean;
     labelFormat?: string;
     anchorType?: AnchorType;
     isDisabled?: boolean;
@@ -50,5 +51,5 @@ export type DateRangePickerProps = {
  * @midnight-gray-supported
  * @alpine-light-supported
  * */
-declare function DateRangePicker({ onUpdate, validateOnChange, validateOnClick, start, end, minStart, maxEnd, labelFormat, anchorType, buttonText, cancelButtonText, resetText, dateFormat, timeFormat, initialDirection, initialViewMode, placement, showTimeZoneSuffix, isDisabled, utcSuffix, dateStartInputAriaLabel, dateEndInputAriaLabel, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function DateRangePicker({ onUpdate, validateOnChange, validateOnClick, start, end, minStart, maxEnd, sameDateError, labelFormat, anchorType, buttonText, cancelButtonText, resetText, dateFormat, timeFormat, initialDirection, initialViewMode, placement, showTimeZoneSuffix, isDisabled, utcSuffix, dateStartInputAriaLabel, dateEndInputAriaLabel, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
 export default DateRangePicker;

package/esm/datetime-range-picker/datetime-range-picker.js

@@ -33,6 +33,7 @@ function DateRangePicker({
   end,
   minStart,
   maxEnd,
+  sameDateError,
   labelFormat,
   anchorType = ANCHOR_TYPES.BUTTON,
   buttonText,
@@ -112,6 +113,7 @@ function DateRangePicker({
       defaultEnd: end,
       minStart: minStart,
       maxEnd: maxEnd,
+      sameDateError: sameDateError,
       dateFormat: dateFormat,
       timeFormat: timeFormat,
       initialViewMode: initialViewMode,

package/esm/datetime-range-picker/helpers.d.ts

@@ -2,6 +2,35 @@ import React, { RefObject } from 'react';
 import moment, { MomentInput, Moment, unitOfTime } from 'moment';
 import Datetime from 'react-datetime';
 import { InitialDirection } from './datetime-range-picker';
+export declare function useValidateOnClick(): ({ start, end, minStart, maxEnd, viewMode, dateTimeFormat, sameDateError, }: {
+    start?: moment.Moment | null | undefined;
+    end?: moment.Moment | null | undefined;
+    viewMode: string;
+    dateTimeFormat: string;
+    minStart?: moment.Moment | undefined;
+    maxEnd?: moment.Moment | undefined;
+    sameDateError?: boolean | undefined;
+}) => {
+    startErrors: {
+        START_BEFORE_MIN?: string | undefined;
+        START_AFTER_MAX?: string | undefined;
+        INVALID_START_DATE?: string | undefined;
+        START_END_SAME?: string | undefined;
+    };
+    endErrors: {
+        INVALID_END_DATE?: string | undefined;
+        END_AFTER_MIN?: string | undefined;
+        END_AFTER_MAX?: string | undefined;
+    };
+};
+/** Checks whether a string can be strictly parsed as a moment object following a provided datetime format
+ *
+ * @param {string} proposedDateTime
+ * @param {string} dateTimeFormat
+ * @returns {boolean}
+ */
+export declare function isValidDateTime(proposedDateTime: string, dateTimeFormat: string): boolean;
+export declare function useGetDateTimeValidityError(): (dateTime: string, dateTimeFormat: string) => string | undefined;
 export interface StringToMomentParams {
     dateTimeFormat?: string;
     strictParse?: boolean;