@datarobot/design-system 29.7.5 → 29.7.6

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

@@ -61,10 +61,10 @@ export type DateRangePickerPanelProps = {
     timeFormat: string | boolean;
     utcSuffix?: string;
     validateOnClick?: ValidateOnClick;
-    validateOnChange: ValidateOnChange;
+    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, sameDateError, onSubmit, onDismiss, resetText, timeFormat, utcSuffix, validateOnClick: propValidateOnClick, 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

@@ -98,12 +98,14 @@ function DateRangePickerPanel({
   timeFormat,
   utcSuffix,
   validateOnClick: propValidateOnClick,
-  validateOnChange,
+  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.

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

@@ -24,7 +24,7 @@ export type InitialDirection = ValueOf<typeof INITIAL_DIRECTION>;
 export type DateRangePickerProps = {
     onUpdate: (updatedStart: Moment, updatedEnd: Moment) => void;
     validateOnClick?: ValidateOnClick;
-    validateOnChange: ValidateOnChange;
+    validateOnChange?: ValidateOnChange;
     start: Moment;
     end: Moment;
     minStart?: Moment;

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

@@ -23,6 +23,14 @@ export declare function useValidateOnClick(): ({ start, end, minStart, maxEnd, v
         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,7 +13,9 @@ 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"));
@@ -93,7 +95,7 @@ function useValidateOnClick() {
         fieldName: VALIDATION_ENTITY[viewMode].end
       });
     }
-    if (start && end) {
+    if (start && end && end.isValid()) {
       endErrors = (0, _omit.default)(endErrors, [_datetimeRangePickerPanel.DATE_RANGE_ERROR_TYPES.INVALID_END_DATE]);
     }
     if (sameDateError && start?.isSame(end)) {
@@ -108,6 +110,43 @@ function useValidateOnClick() {
     };
   };
 }
+
+/** 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/datetime-range-picker/datetime-range-picker-panel.d.ts

@@ -61,10 +61,10 @@ export type DateRangePickerPanelProps = {
     timeFormat: string | boolean;
     utcSuffix?: string;
     validateOnClick?: ValidateOnClick;
-    validateOnChange: ValidateOnChange;
+    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, sameDateError, onSubmit, onDismiss, resetText, timeFormat, utcSuffix, validateOnClick: propValidateOnClick, 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, useValidateOnClick } 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";
@@ -90,12 +90,14 @@ function DateRangePickerPanel({
   timeFormat,
   utcSuffix,
   validateOnClick: propValidateOnClick,
-  validateOnChange,
+  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.

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

@@ -24,7 +24,7 @@ export type InitialDirection = ValueOf<typeof INITIAL_DIRECTION>;
 export type DateRangePickerProps = {
     onUpdate: (updatedStart: Moment, updatedEnd: Moment) => void;
     validateOnClick?: ValidateOnClick;
-    validateOnChange: ValidateOnChange;
+    validateOnChange?: ValidateOnChange;
     start: Moment;
     end: Moment;
     minStart?: Moment;

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

@@ -23,6 +23,14 @@ export declare function useValidateOnClick(): ({ start, end, minStart, maxEnd, v
         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/esm/datetime-range-picker/helpers.js

@@ -75,7 +75,7 @@ export function useValidateOnClick() {
         fieldName: VALIDATION_ENTITY[viewMode].end
       });
     }
-    if (start && end) {
+    if (start && end && end.isValid()) {
       endErrors = omit(endErrors, [DATE_RANGE_ERROR_TYPES.INVALID_END_DATE]);
     }
     if (sameDateError && start?.isSame(end)) {
@@ -90,6 +90,43 @@ export function useValidateOnClick() {
     };
   };
 }
+
+/** 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 function isValidDateTime(proposedDateTime, dateTimeFormat) {
+  try {
+    convertStringToMoment(proposedDateTime, {
+      dateTimeFormat
+    })?.isValid();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (err) {
+    return false;
+  }
+  return true;
+}
+export function useGetDateTimeValidityError() {
+  const {
+    t
+  } = useTranslation();
+  return function getDateTimeValidityError(dateTime, dateTimeFormat) {
+    if (moment.isMoment(dateTime)) {
+      return;
+    }
+    if (typeof dateTime === 'string') {
+      if (isValidDateTime(dateTime, dateTimeFormat)) {
+        return;
+      }
+      return t('Must follow {{dateTimeFormat}} format', {
+        dateTimeFormat
+      });
+    }
+    return t('Expected a datetime');
+  };
+}
 export function getValidityFromErrors(errorMapping) {
   let validityValues;
   if (isEmpty(errorMapping)) {

package/js/bundle/bundle.js

@@ -49883,11 +49883,13 @@ function DateRangePickerPanel(_ref2) {
     timeFormat = _ref2.timeFormat,
     utcSuffix = _ref2.utcSuffix,
     propValidateOnClick = _ref2.validateOnClick,
-    validateOnChange = _ref2.validateOnChange,
+    propValidateOnChange = _ref2.validateOnChange,
     dateStartInputAriaLabel = _ref2.dateStartInputAriaLabel,
     dateEndInputAriaLabel = _ref2.dateEndInputAriaLabel;
   var defaultValidateOnClick = (0,_helpers__WEBPACK_IMPORTED_MODULE_8__.useValidateOnClick)();
+  var defaultValidateOnChange = (0,_helpers__WEBPACK_IMPORTED_MODULE_8__.useGetDateTimeValidityError)();
   var validateOnClick = propValidateOnClick || defaultValidateOnClick;
+  var validateOnChange = propValidateOnChange || defaultValidateOnChange;
   var dateTimeFormat = (0,_helpers__WEBPACK_IMPORTED_MODULE_8__.getDateTimeFormat)(dateFormat, timeFormat);
 
   // Developer-provided datetimes might not always follow the exact date and time format they want to use.
@@ -50499,8 +50501,10 @@ function DateRangePicker(_ref) {
 /* harmony export */   isNavigationAvailableForMonthsView: () => (/* binding */ isNavigationAvailableForMonthsView),
 /* harmony export */   isNavigationAvailableForYearsView: () => (/* binding */ isNavigationAvailableForYearsView),
 /* harmony export */   truncateDateTimeToFormat: () => (/* binding */ truncateDateTimeToFormat),
+/* harmony export */   useGetDateTimeValidityError: () => (/* binding */ useGetDateTimeValidityError),
 /* harmony export */   useValidateOnClick: () => (/* binding */ useValidateOnClick)
 /* harmony export */ });
+/* unused harmony export isValidDateTime */
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! moment */ "moment");
@@ -50598,7 +50602,7 @@ function useValidateOnClick() {
         fieldName: VALIDATION_ENTITY[viewMode].end
       });
     }
-    if (start && end) {
+    if (start && end && end.isValid()) {
       endErrors = (0,lodash_es_omit__WEBPACK_IMPORTED_MODULE_8__["default"])(endErrors, [_datetime_range_picker_panel__WEBPACK_IMPORTED_MODULE_7__.DATE_RANGE_ERROR_TYPES.INVALID_END_DATE]);
     }
     if (sameDateError && start !== null && start !== void 0 && start.isSame(end)) {
@@ -50613,6 +50617,43 @@ function useValidateOnClick() {
     };
   };
 }
+
+/** 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 {
+    var _convertStringToMomen;
+    (_convertStringToMomen = convertStringToMoment(proposedDateTime, {
+      dateTimeFormat: dateTimeFormat
+    })) === null || _convertStringToMomen === void 0 || _convertStringToMomen.isValid();
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  } catch (err) {
+    return false;
+  }
+  return true;
+}
+function useGetDateTimeValidityError() {
+  var _useTranslation2 = (0,_hooks_use_translation__WEBPACK_IMPORTED_MODULE_6__.useTranslation)(),
+    t = _useTranslation2.t;
+  return function getDateTimeValidityError(dateTime, dateTimeFormat) {
+    if (moment__WEBPACK_IMPORTED_MODULE_1___default().isMoment(dateTime)) {
+      return;
+    }
+    if (typeof dateTime === 'string') {
+      if (isValidDateTime(dateTime, dateTimeFormat)) {
+        return;
+      }
+      return t('Must follow {{dateTimeFormat}} format', {
+        dateTimeFormat: dateTimeFormat
+      });
+    }
+    return t('Expected a datetime');
+  };
+}
 function getValidityFromErrors(errorMapping) {
   var validityValues;
   if ((0,lodash_es_isEmpty__WEBPACK_IMPORTED_MODULE_9__["default"])(errorMapping)) {