@datarobot/design-system 29.7.5 → 29.7.7

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/cjs/multiselect-searchable-list/multiselect-searchable-list.js

@@ -34,6 +34,12 @@ const MultiselectSearchableList = ({
   const {
     t
   } = (0, _useTranslation.useTranslation)();
+  const getSelectedItemsMessageDefault = itemsLength => itemsLength === 1 ? t('{{itemsLength}} item selected', {
+    itemsLength
+  }) : t('{{itemsLength}} items selected', {
+    itemsLength
+  });
+  const selectedItemsMessageFn = selectedItemsMessage || getSelectedItemsMessageDefault;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "multiselect-items-list",
     "test-id": "multiselect-items-list",
@@ -49,7 +55,7 @@ const MultiselectSearchableList = ({
         listKey: ({
           id
         }) => id,
-        header: selectedItemsMessage(selectedItems.length),
+        header: selectedItemsMessageFn(selectedItems.length),
         onItemRemove: onSelectToggle,
         onClearAll: onClearAll,
         clearAllText: clearAllText ?? t('Clear all'),

package/cjs/multiselect-searchable-list/selected-items-board.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _faChevronDown = require("@fortawesome/free-solid-svg-icons/faChevronDown");
 var _faChevronUp = require("@fortawesome/free-solid-svg-icons/faChevronUp");
 var _faCircleXmark = require("@fortawesome/free-solid-svg-icons/faCircleXmark");
+var _useTranslation = require("../hooks/use-translation");
 var _fontAwesomeIcon = require("../font-awesome-icon");
 var _button = require("../button");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -23,9 +24,18 @@ function SelectedItemsBoard({
   clearAllText,
   removeText
 }) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
   const [isExpanded, toggleExpanded] = (0, _react.useState)(true);
+  const getSelectedItemsMessageDefault = itemsLength => itemsLength === 1 ? t('{{itemsLength}} item selected', {
+    itemsLength
+  }) : t('{{itemsLength}} items selected', {
+    itemsLength
+  });
+
   // not in default props because it depends on items length
-  const headerContent = header || getDefaultHeaderText?.(items.length);
+  const headerContent = header || getDefaultHeaderText?.(items.length) || getSelectedItemsMessageDefault(items.length);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: "selected-items-board",
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
@@ -47,6 +57,7 @@ function SelectedItemsBoard({
           "test-id": "selected-items-board-item-label",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
             className: "item-display-label",
+            "test-id": item?.testId,
             children: displayLabel(item, index)
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.Button, {
             testId: "selected-items-board-remove-item-btn",

package/cjs/scheduler/index.d.ts

@@ -1,6 +1,6 @@
 import { Scheduler } from './scheduler';
 import { DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS } from './constants';
-import { getFrequency } from './utils';
+import { getFrequency, useGetScheduleString } from './utils';
 export type { ScheduleValidity, Schedule, DateItem, Months, LabelTexts, Frequency, } from './constants';
 export type { SchedulerProps } from './scheduler';
-export { Scheduler, getFrequency, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS, };
+export { Scheduler, getFrequency, useGetScheduleString, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS, };

package/cjs/scheduler/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "getFrequency", {
     return _utils.getFrequency;
   }
 });
+Object.defineProperty(exports, "useGetScheduleString", {
+  enumerable: true,
+  get: function () {
+    return _utils.useGetScheduleString;
+  }
+});
 var _scheduler = require("./scheduler");
 var _constants = require("./constants");
 var _utils = require("./utils");

package/cjs/scheduler/utils.d.ts

@@ -1,4 +1,8 @@
 import { Frequency, Schedule, ScheduleValidity } from './constants';
 export declare const stringToArrayOfNumbersOrAll: (value?: string | number) => (number | "*")[];
 export declare function useArrayOfRangedNumbersOrAllValidator(): ({ min, max, values, allowAll, }: ScheduleValidity) => ScheduleValidity | undefined;
+export declare function useGetScheduleString(schedule: Schedule, stringOptions?: {
+    complexScheduleString?: string | null;
+    timeStandardString?: string | null;
+}): string | null;
 export declare function getFrequency({ minute, hour, month, dayOfMonth, dayOfWeek, }: Schedule): Frequency | undefined;

package/cjs/scheduler/utils.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.getFrequency = getFrequency;
 exports.stringToArrayOfNumbersOrAll = void 0;
 exports.useArrayOfRangedNumbersOrAllValidator = useArrayOfRangedNumbersOrAllValidator;
+exports.useGetScheduleString = useGetScheduleString;
 var _message = require("../message");
 var _useTranslation = require("../hooks/use-translation");
 var _constants = require("./constants");
@@ -62,6 +63,92 @@ function useArrayOfRangedNumbersOrAllValidator() {
     return validity;
   };
 }
+function useGetScheduleString(schedule, stringOptions = {}) {
+  const {
+    t
+  } = (0, _useTranslation.useTranslation)();
+  const {
+    complexScheduleString = t('Complex schedule'),
+    timeStandardString = t('(UTC)')
+  } = stringOptions;
+  const scheduleStringTimeStandard = timeStandardString ? ` ${timeStandardString}` : '';
+  const months = (0, _constants.useMonths)();
+  const daysOfWeek = (0, _constants.useDaysOfWeek)();
+  switch (getFrequency(schedule)) {
+    case _constants.FREQUENCIES.HOURLY:
+      return schedule?.minute?.[0] === 1 ? t('Hourly at {{minutes}} minute past the hour', {
+        minutes: schedule.minute[0].toString()
+      }) : t('Hourly at {{minutes}} minutes past the hour', {
+        minutes: schedule?.minute?.[0].toString()
+      });
+    case _constants.FREQUENCIES.DAILY:
+      return `${t('Daily at {{hour}}:{{minutes}}', {
+        hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+        minutes: schedule?.minute?.[0].toString().padStart(2, '0')
+      })}${scheduleStringTimeStandard}`;
+    case _constants.FREQUENCIES.WEEKLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: daysOfWeek.find(d => d.index === schedule?.dayOfWeek?.[0])?.label
+        };
+        const weeklyString = schedule?.dayOfWeek?.length === 1 ? t('Weekly on {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Weekly on multiple days at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${weeklyString}${scheduleStringTimeStandard}`;
+      }
+    case _constants.FREQUENCIES.MONTHLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: schedule?.dayOfMonth?.[0],
+          days: schedule?.dayOfMonth?.join(', ') // day 1, 2, 3
+        };
+        const monthlyString = schedule?.dayOfMonth?.length === 1 ? t('Monthly on day {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Monthly on days {{days}} at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${monthlyString}${scheduleStringTimeStandard}`;
+      }
+    case _constants.FREQUENCIES.QUARTERLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: schedule?.dayOfMonth?.[0],
+          days: schedule?.dayOfMonth?.join(', ') // day 1, 2, 3
+        };
+        const quarterlyString = schedule?.dayOfMonth?.length === 1 ? t('Quarterly on day {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Quarterly on days {{days}} at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${quarterlyString}${scheduleStringTimeStandard}`;
+      }
+    case _constants.FREQUENCIES.YEARLY:
+      {
+        const options = {
+          hour: schedule?.hour?.[0].toString().padStart(2, '0'),
+          minutes: schedule?.minute?.[0].toString().padStart(2, '0'),
+          day: schedule?.dayOfMonth?.[0],
+          month: Object.values(months).find(m => m.index === schedule?.month?.[0])?.label
+        };
+        const yearlyString = Math.max(schedule?.month?.length ?? 0, schedule?.dayOfMonth?.length ?? 0) ? t('Yearly on {{month}} {{day}} at {{hour}}:{{minutes}}', {
+          ...options
+        }) : t('Yearly on multiple dates at {{hour}}:{{minutes}}', {
+          ...options
+        });
+        return `${yearlyString}${scheduleStringTimeStandard}`;
+      }
+    default:
+      return complexScheduleString;
+  }
+}
 function hasSameItems(arr1, arr2) {
   return arr1.length === arr2?.length && arr1.every(item1 => {
     return arr2.find(item2 => item2 === item1);

package/cjs/scheduler/utils.test.js

@@ -0,0 +1,149 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+var _utils = require("./utils");
+describe('useGetScheduleString', function () {
+  describe('Schedule strings', function () {
+    const createSchedule = (partialSchedule = {}) => ({
+      minute: ['*'],
+      hour: ['*'],
+      dayOfMonth: ['*'],
+      month: ['*'],
+      dayOfWeek: ['*'],
+      ...partialSchedule
+    });
+    const testSchedules = [{
+      schedule: createSchedule({
+        minute: [15, 45],
+        month: [1, 4, 8, 12]
+      }),
+      expectedScheduleString: 'Complex schedule',
+      hasTimeStandard: false
+    }, {
+      schedule: createSchedule({
+        minute: [1]
+      }),
+      expectedScheduleString: 'Hourly at 1 minute past the hour',
+      hasTimeStandard: false
+    }, {
+      schedule: createSchedule({
+        minute: [5]
+      }),
+      expectedScheduleString: 'Hourly at 5 minutes past the hour',
+      hasTimeStandard: false
+    }, {
+      schedule: createSchedule({
+        hour: [12],
+        minute: [30]
+      }),
+      expectedScheduleString: 'Daily at 12:30',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        dayOfWeek: [1],
+        hour: [12],
+        minute: [30]
+      }),
+      expectedScheduleString: 'Weekly on Monday at 12:30',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        dayOfWeek: [1, 2],
+        hour: [12],
+        minute: [30]
+      }),
+      expectedScheduleString: 'Weekly on multiple days at 12:30',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        dayOfMonth: [1],
+        hour: [6],
+        minute: [45]
+      }),
+      expectedScheduleString: 'Monthly on day 1 at 06:45',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        dayOfMonth: [1, 2],
+        hour: [6],
+        minute: [45]
+      }),
+      expectedScheduleString: 'Monthly on days 1, 2 at 06:45',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        month: [1, 4, 7, 10],
+        dayOfMonth: [1],
+        hour: [1],
+        minute: [30]
+      }),
+      expectedScheduleString: 'Quarterly on day 1 at 01:30',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        month: [1, 4, 7, 10],
+        dayOfMonth: [1, 15],
+        hour: [1],
+        minute: [30]
+      }),
+      expectedScheduleString: 'Quarterly on days 1, 15 at 01:30',
+      hasTimeStandard: true
+    }, {
+      schedule: createSchedule({
+        dayOfMonth: [1],
+        month: [6],
+        hour: [17],
+        minute: [0]
+      }),
+      expectedScheduleString: 'Yearly on June 1 at 17:00',
+      hasTimeStandard: true
+    }];
+    describe('Default time standard (UTC)', function () {
+      testSchedules.forEach(function ({
+        schedule,
+        expectedScheduleString,
+        hasTimeStandard
+      }) {
+        const expectedString = `${expectedScheduleString}${hasTimeStandard ? ' (UTC)' : ''}`;
+        it(`should generate "${expectedString}"`, function () {
+          const {
+            result
+          } = (0, _react.renderHook)(() => (0, _utils.useGetScheduleString)(schedule));
+          expect(result.current).toBe(`${expectedString}`);
+        });
+      });
+    });
+    describe('Alternate time standard (EST)', function () {
+      testSchedules.forEach(function ({
+        schedule,
+        expectedScheduleString,
+        hasTimeStandard
+      }) {
+        const expectedString = `${expectedScheduleString}${hasTimeStandard ? ' (EST)' : ''}`;
+        it(`should generate "${expectedString}"`, function () {
+          const {
+            result
+          } = (0, _react.renderHook)(() => (0, _utils.useGetScheduleString)(schedule, {
+            timeStandardString: '(EST)'
+          }));
+          expect(result.current).toBe(`${expectedString}`);
+        });
+      });
+    });
+    describe('No time standard (locale time)', function () {
+      testSchedules.forEach(function ({
+        schedule,
+        expectedScheduleString
+      }) {
+        it(`should generate "${expectedScheduleString}"`, function () {
+          const {
+            result
+          } = (0, _react.renderHook)(() => (0, _utils.useGetScheduleString)(schedule, {
+            timeStandardString: null
+          }));
+          expect(result.current).toBe(expectedScheduleString);
+        });
+      });
+    });
+  });
+});

package/cjs/zoom-controls/zoom-controls.js

@@ -39,9 +39,9 @@ function ZoomControls({
   const {
     t
   } = (0, _useTranslation.useTranslation)();
-  const zoomInTextWithDefault = zoomInText ?? t('Zoom In');
-  const zoomOutTextWithDefault = zoomOutText ?? t('Zoom Out');
-  const resetTextWithDefault = resetText ?? t('Reset Zoom');
+  const zoomInTextWithDefault = zoomInText ?? t('Zoom in');
+  const zoomOutTextWithDefault = zoomOutText ?? t('Zoom out');
+  const resetTextWithDefault = resetText ?? t('Reset zoom');
   if (hidden) {
     return null;
   }

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/esm/multiselect-searchable-list/multiselect-searchable-list.js

@@ -27,6 +27,12 @@ const MultiselectSearchableList = ({
   const {
     t
   } = useTranslation();
+  const getSelectedItemsMessageDefault = itemsLength => itemsLength === 1 ? t('{{itemsLength}} item selected', {
+    itemsLength
+  }) : t('{{itemsLength}} items selected', {
+    itemsLength
+  });
+  const selectedItemsMessageFn = selectedItemsMessage || getSelectedItemsMessageDefault;
   return /*#__PURE__*/_jsx("div", {
     className: "multiselect-items-list",
     "test-id": "multiselect-items-list",
@@ -42,7 +48,7 @@ const MultiselectSearchableList = ({
         listKey: ({
           id
         }) => id,
-        header: selectedItemsMessage(selectedItems.length),
+        header: selectedItemsMessageFn(selectedItems.length),
         onItemRemove: onSelectToggle,
         onClearAll: onClearAll,
         clearAllText: clearAllText ?? t('Clear all'),

package/esm/multiselect-searchable-list/selected-items-board.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { faChevronDown } from '@fortawesome/free-solid-svg-icons/faChevronDown';
 import { faChevronUp } from '@fortawesome/free-solid-svg-icons/faChevronUp';
 import { faCircleXmark } from '@fortawesome/free-solid-svg-icons/faCircleXmark';
+import { useTranslation } from '../hooks/use-translation';
 import { FontAwesomeIcon } from '../font-awesome-icon';
 import { Button, ACCENT_TYPES } from '../button';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
@@ -16,9 +17,18 @@ export default function SelectedItemsBoard({
   clearAllText,
   removeText
 }) {
+  const {
+    t
+  } = useTranslation();
   const [isExpanded, toggleExpanded] = useState(true);
+  const getSelectedItemsMessageDefault = itemsLength => itemsLength === 1 ? t('{{itemsLength}} item selected', {
+    itemsLength
+  }) : t('{{itemsLength}} items selected', {
+    itemsLength
+  });
+
   // not in default props because it depends on items length
-  const headerContent = header || getDefaultHeaderText?.(items.length);
+  const headerContent = header || getDefaultHeaderText?.(items.length) || getSelectedItemsMessageDefault(items.length);
   return /*#__PURE__*/_jsxs("div", {
     className: "selected-items-board",
     children: [/*#__PURE__*/_jsx("header", {
@@ -40,6 +50,7 @@ export default function SelectedItemsBoard({
           "test-id": "selected-items-board-item-label",
           children: [/*#__PURE__*/_jsx("div", {
             className: "item-display-label",
+            "test-id": item?.testId,
             children: displayLabel(item, index)
           }), /*#__PURE__*/_jsx(Button, {
             testId: "selected-items-board-remove-item-btn",

package/esm/scheduler/index.d.ts

@@ -1,6 +1,6 @@
 import { Scheduler } from './scheduler';
 import { DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS } from './constants';
-import { getFrequency } from './utils';
+import { getFrequency, useGetScheduleString } from './utils';
 export type { ScheduleValidity, Schedule, DateItem, Months, LabelTexts, Frequency, } from './constants';
 export type { SchedulerProps } from './scheduler';
-export { Scheduler, getFrequency, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS, };
+export { Scheduler, getFrequency, useGetScheduleString, DEFAULT_SCHEDULE, FREQUENCIES, DEFAULT_SCHEDULES, SWITCHER_TYPES, TAB_KEYS, };