@synerise/ds-date-range-picker 0.24.10 → 0.25.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.25.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.24.10...@synerise/ds-date-range-picker@0.25.0) (2023-10-17)
+
+
+### Features
+
+* **date-range-picker:** display errors in daily / weekly / monthly scheduler ([1bc8695](https://github.com/Synerise/synerise-design/commit/1bc8695af46628b30492fb247a2ddbe5785711b0))
+
+
+
+
+
 ## [0.24.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.24.9...@synerise/ds-date-range-picker@0.24.10) (2023-10-11)
 
 

package/dist/RangeFilter/Filters/new/Daily/Daily.d.ts

@@ -1,3 +1,3 @@
 import { DailyProps } from './Daily.types';
-declare const Daily: ({ maxEntries, disabled, value, onChange, valueSelectionMode, timeFormat, timePickerProps, }: DailyProps) => JSX.Element;
+declare const Daily: ({ maxEntries, disabled, value, onChange, valueSelectionMode, timeFormat, timePickerProps, errorTexts, }: DailyProps) => JSX.Element;
 export default Daily;

package/dist/RangeFilter/Filters/new/Daily/Daily.js

@@ -23,7 +23,9 @@ var Daily = function Daily(_ref) {
       _ref$valueSelectionMo = _ref.valueSelectionMode,
       valueSelectionMode = _ref$valueSelectionMo === void 0 ? ['Hour', 'Range'] : _ref$valueSelectionMo,
       timeFormat = _ref.timeFormat,
-      timePickerProps = _ref.timePickerProps;
+      timePickerProps = _ref.timePickerProps,
+      _ref$errorTexts = _ref.errorTexts,
+      errorTexts = _ref$errorTexts === void 0 ? [] : _ref$errorTexts;
   var intl = useIntl();
   var defaultDayValue = useMemo(function () {
     return {
@@ -75,6 +77,7 @@ var Daily = function Daily(_ref) {
       disabled: disabled,
       days: EMPTY_OBJECT,
       onChange: NOOP,
+      errorTexts: errorTexts[index],
       onMultipleDayTimeChange: NOOP // eslint-disable-next-line react/no-array-index-key
       ,
       key: "range-" + index + "-" + String(s == null ? void 0 : s.start),

package/dist/RangeFilter/Filters/new/Daily/Daily.types.d.ts

@@ -2,10 +2,12 @@ import { FilterBaseProps } from '../Filters.types';
 import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 import { DayOptions } from '../../../Shared/TimeWindow/TimeWindow.types';
 import { WithDisabledProp } from '../../../RangeFilter.types';
+import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
 export type DailySchedule = DayOptions & {
     mode: DateLimitMode;
 };
 export type DailyProps = {
     value: DailySchedule[];
+    errorTexts?: FilterErrorType[];
     onChange: (value: DailyProps['value']) => void;
 } & FilterBaseProps & WithDisabledProp;

package/dist/RangeFilter/Filters/new/Monthly/Monthly.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { MonthlyProps } from './Monthly.types';
-declare const Monthly: React.FC<MonthlyProps>;
+declare const Monthly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, timePickerProps, disabled, periodType, countedFrom, errorTexts, }: MonthlyProps) => JSX.Element;
 export default Monthly;

package/dist/RangeFilter/Filters/new/Monthly/Monthly.js

@@ -37,7 +37,8 @@ var Monthly = function Monthly(_ref) {
       _ref$periodType = _ref.periodType,
       periodType = _ref$periodType === void 0 ? DAYS_OF_PERIOD_ENUM.DAY_OF_MONTH : _ref$periodType,
       _ref$countedFrom = _ref.countedFrom,
-      countedFrom = _ref$countedFrom === void 0 ? COUNTED_FROM_ENUM.BEGINNING : _ref$countedFrom;
+      countedFrom = _ref$countedFrom === void 0 ? COUNTED_FROM_ENUM.BEGINNING : _ref$countedFrom,
+      errorTexts = _ref.errorTexts;
   var defaultDayValue = React.useMemo(function () {
     return {
       start: DEFAULT_RANGE_START,
@@ -304,6 +305,11 @@ var Monthly = function Monthly(_ref) {
   var canAddRange = canAddAnotherRange(value, activeDays, maxEntries);
   var isAnyDaySelected = activeDays.length > 0;
   var shouldRenderAddButton = isAnyDaySelected && filteredSchedule.length < maxEntries && canAddRange && !disabled;
+
+  var getErrorTextsForFormRow = function getErrorTextsForFormRow(guid) {
+    return activeDays.length === 1 && errorTexts && errorTexts[guid] && errorTexts[guid][activeDays[0]];
+  };
+
   return /*#__PURE__*/React.createElement(S.NewFilterContainer, {
     ref: ref
   }, /*#__PURE__*/React.createElement(Grid, _extends({
@@ -323,6 +329,7 @@ var Monthly = function Monthly(_ref) {
   }, getGridSettings())), isAnyDaySelected && filteredSchedule.map(function (guid, index) {
     return /*#__PURE__*/React.createElement(RangeFormContainer, {
       days: EMPTY_OBJECT,
+      errorTexts: getErrorTextsForFormRow(guid),
       onChange: NOOP,
       key: "value-range-" + guid,
       onDayTimeChange: function onDayTimeChange(dayValue, dayKey) {

package/dist/RangeFilter/Filters/new/Monthly/Monthly.types.d.ts

@@ -3,6 +3,7 @@ import { DayOptions } from '../../../Shared/TimeWindow/TimeWindow.types';
 import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 import { FilterBaseProps } from '../Filters.types';
 import { WithDisabledProp } from '../../../RangeFilter.types';
+import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
 export type MonthlyScheduleDayValue = DayOptions & {
     mode: DateLimitMode;
 };
@@ -12,6 +13,9 @@ export type MonthlySchedule = {
 export type DayOfMonthIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31;
 export type MonthlyProps = {
     value: MonthlySchedule;
+    errorTexts?: {
+        [guid: string]: FilterErrorType[];
+    };
     periodType: DAYS_OF_PERIOD_ENUM;
     countedFrom: COUNTED_FROM_ENUM;
     onChange: (value: MonthlyProps['value']) => void;

package/dist/RangeFilter/Filters/new/Weekly/Weekly.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { WeeklyProps } from './Weekly.types';
-declare const Weekly: React.FC<WeeklyProps>;
+declare const Weekly: ({ maxEntries, valueSelectionMode, onChange, timeFormat, valueFormatOptions, value, timePickerProps, disabled, errorTexts, }: WeeklyProps) => JSX.Element;
 export default Weekly;

package/dist/RangeFilter/Filters/new/Weekly/Weekly.js

@@ -30,7 +30,8 @@ var Weekly = function Weekly(_ref) {
       valueFormatOptions = _ref.valueFormatOptions,
       value = _ref.value,
       timePickerProps = _ref.timePickerProps,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      errorTexts = _ref.errorTexts;
   var defaultDayValue = React.useMemo(function () {
     return {
       start: DEFAULT_RANGE_START,
@@ -239,6 +240,11 @@ var Weekly = function Weekly(_ref) {
   var canAddRange = canAddAnotherRange(value, activeDays, maxEntries);
   var isAnyDaySelected = activeDays.length > 0;
   var shouldRenderAddButton = isAnyDaySelected && filteredSchedule.length < maxEntries && canAddRange && !disabled;
+
+  var getErrorTextsForFormRow = function getErrorTextsForFormRow(guid) {
+    return activeDays.length === 1 && errorTexts && errorTexts[guid] && errorTexts[guid][activeDays[0]];
+  };
+
   return /*#__PURE__*/React.createElement(S.NewFilterContainer, {
     ref: ref
   }, /*#__PURE__*/React.createElement(Grid, {
@@ -258,6 +264,7 @@ var Weekly = function Weekly(_ref) {
     return /*#__PURE__*/React.createElement(RangeFormContainer, {
       days: EMPTY_OBJECT,
       onChange: NOOP,
+      errorTexts: getErrorTextsForFormRow(guid),
       key: "value-range-" + guid,
       onDayTimeChange: function onDayTimeChange(dayValue, dayKey) {
         handleDayTimeChange(dayValue, dayKey, guid);

package/dist/RangeFilter/Filters/new/Weekly/Weekly.types.d.ts

@@ -2,6 +2,7 @@ import { DayOptions } from '../../../Shared/TimeWindow/TimeWindow.types';
 import { DateLimitMode } from '../../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 import { FilterBaseProps } from '../Filters.types';
 import { WithDisabledProp } from '../../../RangeFilter.types';
+import { FilterErrorType } from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types';
 export type WeeklyScheduleDayValue = DayOptions & {
     mode: DateLimitMode;
 };
@@ -11,5 +12,8 @@ export type WeeklySchedule = {
 export type DayOfWeekIndex = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 export type WeeklyProps = {
     value: WeeklySchedule;
+    errorTexts?: {
+        [guid: string]: FilterErrorType[];
+    };
     onChange: (value: WeeklyProps['value']) => void;
 } & FilterBaseProps & WithDisabledProp;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.d.ts

@@ -1,5 +1,5 @@
 import { RangeFormProps } from './RangeForm.types';
 import { FORM_MODES, RANGE_FORM_INTL_KEYS } from './RangeForm.constants';
 export { FORM_MODES, RANGE_FORM_INTL_KEYS };
-declare const RangeForm: ({ onModeChange, disabled, startDate, endDate, onStartChange, onEndChange, onExactHourSelect, onRangeDelete, valueSelectionModes, mode, rangeDisplayMode, isInvertedRange, timePickerProps, texts, valueFormatOptions, }: RangeFormProps) => JSX.Element;
+declare const RangeForm: ({ onModeChange, disabled, startDate, endDate, onStartChange, onEndChange, onExactHourSelect, onRangeDelete, valueSelectionModes, mode, rangeDisplayMode, isInvertedRange, timePickerProps, texts, valueFormatOptions, errorTexts, }: RangeFormProps) => JSX.Element;
 export default RangeForm;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.js

@@ -34,7 +34,8 @@ var RangeForm = function RangeForm(_ref) {
       isInvertedRange = _ref.isInvertedRange,
       timePickerProps = _ref.timePickerProps,
       texts = _ref.texts,
-      valueFormatOptions = _ref.valueFormatOptions;
+      valueFormatOptions = _ref.valueFormatOptions,
+      errorTexts = _ref.errorTexts;
 
   var _useDataFormat = useDataFormat(),
       is12HoursClock = _useDataFormat.is12HoursClock;
@@ -71,8 +72,12 @@ var RangeForm = function RangeForm(_ref) {
     return node.parentElement != null ? node.parentElement : document.body;
   };
 
+  var errorForFirstItem = (errorTexts == null ? void 0 : errorTexts.length) && errorTexts[0];
+  var errorForSecondItem = (errorTexts == null ? void 0 : errorTexts.length) && errorTexts[1];
+
   var singleHourPicker = function singleHourPicker() {
     return /*#__PURE__*/React.createElement(TimePicker, _extends({
+      errorText: errorForFirstItem,
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
       onChange: function onChange(date) {
@@ -144,6 +149,7 @@ var RangeForm = function RangeForm(_ref) {
 
   var renderRangePicker = function renderRangePicker() {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
+      errorText: errorForFirstItem,
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
       onChange: function onChange(date) {
@@ -160,6 +166,7 @@ var RangeForm = function RangeForm(_ref) {
       use12HourClock: is12HoursClock,
       valueFormatOptions: valueFormatOptions
     }, timePickerProps)), /*#__PURE__*/React.createElement(S.Separator, null, "-"), /*#__PURE__*/React.createElement(TimePicker, _extends({
+      errorText: errorForSecondItem,
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
       onChange: function onChange(date) {

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 import { WithTranslations } from '../../../../../DateRangePicker.types';
 import { RangeFormContainerProps } from '../RangeFormContainer.types';
 import { WithDisabledProp } from '../../../../RangeFilter.types';
@@ -7,7 +7,7 @@ export type RangeDisplayMode = 'timepicker' | 'slider';
 export type RangeFormProps = {
     mode: DateLimitMode;
     onModeChange: (mode: DateLimitMode) => void;
-    title?: React.ReactNode;
+    title?: ReactNode;
     startDate: Date | undefined;
     endDate: Date | undefined;
     onStartChange: (value?: Date) => void;
@@ -17,8 +17,8 @@ export type RangeFormProps = {
     valueSelectionModes: DateLimitMode[];
     rangeDisplayMode?: RangeDisplayMode;
     isInvertedRange?: boolean;
-} & WithTranslations & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps' | 'valueFormatOptions'>;
+} & WithTranslations & WithDisabledProp & Pick<RangeFormContainerProps, 'timePickerProps' | 'valueFormatOptions' | 'errorTexts'>;
 export type RangeFormTexts = {
-    range: React.ReactNode | string;
-    hour: React.ReactNode | string;
+    range: ReactNode | string;
+    hour: ReactNode | string;
 };

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.d.ts

@@ -1,3 +1,3 @@
 import type { RangeFormContainerProps } from './RangeFormContainer.types';
-declare const RangeFormContainer: ({ activeDays, disabled, days, dayKeys, getDayValue, getDayLabel, onDayTimeChange, onMultipleDayTimeChange, hideHeader, headerOptions, monthlyFilter, monthlyFilterPeriod, onRangeClear, onRangePaste, onRangeCopy, onRangeDelete, texts, onChange, valueSelectionModes, rangeDisplayMode, onModeChange, timePickerProps, renderSuffix, timeFormat, valueFormatOptions, }: RangeFormContainerProps) => JSX.Element;
+declare const RangeFormContainer: ({ errorTexts, activeDays, disabled, days, dayKeys, getDayValue, getDayLabel, onDayTimeChange, onMultipleDayTimeChange, hideHeader, headerOptions, monthlyFilter, monthlyFilterPeriod, onRangeClear, onRangePaste, onRangeCopy, onRangeDelete, texts, onChange, valueSelectionModes, rangeDisplayMode, onModeChange, timePickerProps, renderSuffix, timeFormat, valueFormatOptions, }: RangeFormContainerProps) => JSX.Element;
 export default RangeFormContainer;

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.js

@@ -16,7 +16,8 @@ import { DEFAULT_LIMIT_MODE } from '../TimeWindow';
 import * as S from './RangeFormContainer.styles';
 
 var RangeFormContainer = function RangeFormContainer(_ref) {
-  var activeDays = _ref.activeDays,
+  var errorTexts = _ref.errorTexts,
+      activeDays = _ref.activeDays,
       disabled = _ref.disabled,
       days = _ref.days,
       dayKeys = _ref.dayKeys,
@@ -115,6 +116,7 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
     return /*#__PURE__*/React.createElement(RangeForm, {
       disabled: disabled,
       texts: texts,
+      errorTexts: errorTexts,
       onModeChange: function onModeChange(selected) {
         setMode(selected);
         handleModeChange(selected);
@@ -132,7 +134,7 @@ var RangeFormContainer = function RangeFormContainer(_ref) {
       rangeDisplayMode: rangeDisplayMode,
       isInvertedRange: Boolean(dayValue == null ? void 0 : dayValue.inverted)
     });
-  }, [timeFormat, rangeDisplayMode, valueSelectionModes, handleModeChange, mode, disabled, dayValue, onRangeDelete, texts, timePickerProps, onStartChange, onEndChange, onExactHourSelect, valueFormatOptions]);
+  }, [disabled, texts, errorTexts, mode, dayValue.start, dayValue.stop, dayValue == null ? void 0 : dayValue.inverted, timeFormat, onStartChange, onEndChange, onExactHourSelect, onRangeDelete, valueSelectionModes, valueFormatOptions, timePickerProps, rangeDisplayMode, handleModeChange]);
   var invertedToggleLink = React.useMemo(function () {
     return /*#__PURE__*/React.createElement(S.InvertAction, {
       onClick: toggleInverted

package/dist/RangeFilter/Shared/TimeWindow/RangeFormContainer/RangeFormContainer.types.d.ts

@@ -1,14 +1,16 @@
-import * as React from 'react';
+import { ReactNode } from 'react';
 import type { TimePickerProps } from '@synerise/ds-time-picker';
 import type { DateToFormatOptions } from '@synerise/ds-data-format';
 import { DayKey, RangeActions, TimeWindowProps, TimeWindowTexts } from '../TimeWindow.types';
 import { FilterDefinition, WithDisabledProp } from '../../../RangeFilter.types';
 import { DateLimitMode, RangeDisplayMode } from './RangeForm/RangeForm.types';
 export type DateValue = [Date | undefined, Date | undefined, boolean | undefined];
+export type FilterErrorType = [ReactNode?, ReactNode?];
 export type RangeFormContainerProps = {
+    errorTexts?: FilterErrorType;
     activeDays: DayKey[];
     dayKeys: DayKey | DayKey[];
-    getDayLabel: (dayKey: DayKey, long?: boolean) => string | object | React.ReactNode;
+    getDayLabel: (dayKey: DayKey, long?: boolean) => string | object | ReactNode;
     getDayValue: (dayKey: DayKey) => Partial<FilterDefinition>;
     onMultipleDayTimeChange: (value: DateValue) => void;
     onDayTimeChange: (value: DateValue, dayKey: DayKey) => void;
@@ -23,5 +25,5 @@ export type RangeFormContainerProps = {
     timeFormat?: string;
     valueFormatOptions?: DateToFormatOptions;
     timePickerProps?: Partial<TimePickerProps>;
-    renderSuffix?: () => React.ReactNode;
+    renderSuffix?: () => ReactNode;
 } & Pick<TimeWindowProps, 'monthlyFilter' | 'monthlyFilterPeriod' | 'hideHeader' | 'headerOptions' | 'onChange' | 'days'> & WithDisabledProp & Partial<RangeActions>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.24.10",
+  "version": "0.25.0",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -38,7 +38,7 @@
     "@synerise/ds-button": "^0.18.4",
     "@synerise/ds-button-group": "^0.6.32",
     "@synerise/ds-data-format": "^0.4.4",
-    "@synerise/ds-date-picker": "^0.10.20",
+    "@synerise/ds-date-picker": "^0.10.21",
     "@synerise/ds-dropdown": "^0.17.83",
     "@synerise/ds-icon": "^0.58.4",
     "@synerise/ds-inline-edit": "^0.6.83",
@@ -50,7 +50,7 @@
     "@synerise/ds-select": "^0.15.22",
     "@synerise/ds-slider": "^0.13.1",
     "@synerise/ds-tags": "^0.8.17",
-    "@synerise/ds-time-picker": "^0.8.11",
+    "@synerise/ds-time-picker": "^0.9.0",
     "@synerise/ds-tooltip": "^0.14.6",
     "@synerise/ds-utils": "^0.24.18",
     "date-fns": "^2.16.1",
@@ -73,5 +73,5 @@
     "@testing-library/user-event": "^10.3.1",
     "@types/ramda": "^0.28.23"
   },
-  "gitHead": "8eb4a3e304406a8dbb9258803c48952461fc5a55"
+  "gitHead": "02f0a1dad6df5acf89b3d3defa6993716ba992fb"
 }