@synerise/ds-date-range-picker 0.19.13 → 0.20.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.20.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.19.13...@synerise/ds-date-range-picker@0.20.0) (2023-03-20)
+
+
+### Bug Fixes
+
+* **data-format:** import types fix ([c3d20f2](https://github.com/Synerise/synerise-design/commit/c3d20f2bff43ce4605224c96b824a6f91662d961))
+* **date-range-picker:** useMemo deps fix ([12f0904](https://github.com/Synerise/synerise-design/commit/12f0904351ba6862df469523260d8f99354c39df))
+
+
+### Features
+
+* **data-format:** data format tools in pickers plus new tools ([c4adbfe](https://github.com/Synerise/synerise-design/commit/c4adbfe563af93f9daffc7e0b327098432c5e31e))
+
+
+
+
+
 ## [0.19.13](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@0.19.12...@synerise/ds-date-range-picker@0.19.13) (2023-03-08)
 
 **Note:** Version bump only for package @synerise/ds-date-range-picker

package/dist/DateRangePicker.js

@@ -24,6 +24,7 @@ var DateRangePicker = function DateRangePicker(props) {
       forceAdjacentMonths = props.forceAdjacentMonths,
       disableDefaultTexts = props.disableDefaultTexts,
       arrowColor = props.arrowColor,
+      valueFormatOptions = props.valueFormatOptions,
       _onVisibleChange = props.onVisibleChange,
       _props$popoverProps = props.popoverProps,
       popoverProps = _props$popoverProps === void 0 ? {} : _props$popoverProps,
@@ -84,6 +85,7 @@ var DateRangePicker = function DateRangePicker(props) {
     value: selectedDate,
     showTime: showTime,
     texts: allTexts,
+    valueFormatOptions: valueFormatOptions,
     onChange: onApplyCallback,
     active: !!inputActive
   }, rangePickerInputProps, {

package/dist/DateRangePicker.types.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { WrappedComponentProps } from 'react-intl';
 import { PopoverProps } from 'antd/lib/popover';
+import { DateToFormatOptions } from '@synerise/ds-data-format';
 import { DateFilter, DateRange, RelativeUnits } from './date.types';
 import { FilterDefinition } from './RangeFilter/RangeFilter.types';
 import { SavedFilter } from './RangeFilter/Shared/FilterDropdown/FilterDropdown.types';
@@ -26,7 +27,11 @@ export interface DateRangePickerProps extends WrappedComponentProps {
     readOnly?: boolean;
     disableDefaultTexts?: boolean;
     disabledDate?: (date?: Date) => boolean;
+    /**
+     * @deprecated use `valueFormatOptions` instead
+     */
     format?: string;
+    valueFormatOptions?: DateToFormatOptions;
     forceAdjacentMonths?: boolean;
     forceAbsolute?: boolean;
     footerProps?: Partial<FooterProps>;

package/dist/Footer/Footer.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Props } from './Footer.types';
-declare const _default: React.ForwardRefExoticComponent<Pick<Props, "texts" | "format" | "mode" | "value" | "message" | "onApply" | "showTime" | "dateOnly" | "canSwitchMode" | "onSwitchMode" | "canApply" | "displayDateContainerClass"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<Props, "texts" | "format" | "mode" | "value" | "message" | "valueFormatOptions" | "onApply" | "showTime" | "dateOnly" | "canSwitchMode" | "onSwitchMode" | "canApply" | "displayDateContainerClass"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<Props>;

package/dist/Footer/Footer.js

@@ -1,7 +1,13 @@
-var _excluded = ["canApply", "onApply", "intl", "canSwitchMode", "onSwitchMode", "mode", "dateOnly", "message", "texts", "value", "format", "showTime", "displayDateContainerClass"];
+var _excluded = ["canApply", "onApply", "intl", "canSwitchMode", "onSwitchMode", "mode", "dateOnly", "message", "texts", "value", "format", "valueFormatOptions", "showTime", "displayDateContainerClass"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import * as React from 'react';
@@ -9,6 +15,7 @@ import { injectIntl } from 'react-intl';
 import Button from '@synerise/ds-button';
 import Tooltip from '@synerise/ds-tooltip';
 import Icon, { ArrowRightS } from '@synerise/ds-icon';
+import { getDefaultDataTimeOptions, useDataFormat } from '@synerise/ds-data-format';
 import * as S from './Footer.styles';
 import fnsFormat from '../dateUtils/format';
 import getDateFromString from '../dateUtils/getDateFromString';
@@ -27,12 +34,23 @@ var Footer = function Footer(_ref) {
       texts = _ref.texts,
       value = _ref.value,
       format = _ref.format,
+      valueFormatOptions = _ref.valueFormatOptions,
       showTime = _ref.showTime,
       _ref$displayDateConta = _ref.displayDateContainerClass,
       displayDateContainerClass = _ref$displayDateConta === void 0 ? 'ds-date-range-picker-value' : _ref$displayDateConta,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
+  var _useDataFormat = useDataFormat(),
+      formatValue = _useDataFormat.formatValue;
+
   var footerFormat = format || (showTime ? 'MMM D, YYYY, HH:mm' : 'MMM D, YYYY');
+  var footerDateToString = React.useCallback(function (date) {
+    if (format || typeof date === 'string') {
+      return fnsFormat(getDateFromString(date), footerFormat, intl.locale);
+    }
+
+    return formatValue(date, _objectSpread({}, getDefaultDataTimeOptions(showTime), {}, valueFormatOptions));
+  }, [footerFormat, format, formatValue, intl.locale, valueFormatOptions, showTime]);
   var ChosenRange = React.useMemo(function () {
     if ((value == null ? void 0 : value.key) === CONST.ALL_TIME || value && isLifetime(value)) {
       var _texts$value$translat;
@@ -44,10 +62,10 @@ var Footer = function Footer(_ref) {
 
     return /*#__PURE__*/React.createElement(S.ChosenRange, {
       className: displayDateContainerClass
-    }, !!value && !!value.from ? fnsFormat(getDateFromString(value == null ? void 0 : value.from), footerFormat, intl.locale) : texts.startDatePlaceholder, /*#__PURE__*/React.createElement(S.InvisibleTextContent, null, ' – '), /*#__PURE__*/React.createElement(Icon, {
+    }, !!value && !!value.from ? footerDateToString(value == null ? void 0 : value.from) : texts.startDatePlaceholder, /*#__PURE__*/React.createElement(S.InvisibleTextContent, null, ' – '), /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(ArrowRightS, null)
-    }), !!value && !!value.to ? fnsFormat(getDateFromString(value == null ? void 0 : value.to), footerFormat, intl.locale) : texts.endDatePlaceholder);
-  }, [value, footerFormat, intl.locale, texts, displayDateContainerClass]);
+    }), !!value && !!value.to ? footerDateToString(value == null ? void 0 : value.to) : texts.endDatePlaceholder);
+  }, [value, texts, displayDateContainerClass, footerDateToString]);
   return /*#__PURE__*/React.createElement(S.Container, _extends({
     className: "ds-date-range-picker-footer"
   }, rest), ChosenRange, /*#__PURE__*/React.createElement(S.ActionsPlaceholder, null), /*#__PURE__*/React.createElement(S.Actions, null, /*#__PURE__*/React.createElement(Tooltip, {

package/dist/Footer/Footer.types.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { WrappedComponentProps } from 'react-intl';
+import { DateToFormatOptions } from '@synerise/ds-data-format';
 import { Texts } from 'DateRangePicker.types';
 import { DateRange } from '../date.types';
 export declare type Props = {
@@ -12,7 +13,11 @@ export declare type Props = {
     onSwitchMode?: () => void;
     message?: React.ReactNode | string;
     texts: Texts;
+    /**
+     * @deprecated use `valueFormatOptions` instead
+     */
     format?: string;
+    valueFormatOptions?: DateToFormatOptions;
     showTime?: boolean;
     displayDateContainerClass?: string;
 } & WrappedComponentProps;

package/dist/RangeFilter/Filters/MonthlyFilter/MonthlyFilter.types.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { IntlShape } from 'react-intl';
-import { TimePickerProps } from '@synerise/ds-time-picker/dist/TimePicker.types';
+import type { TimePickerProps } from '@synerise/ds-time-picker';
 import { RangeActions } from '../../Shared/TimeWindow/TimeWindow.types';
 import { DenormalizedFilter, FilterDefinition, MonthlySelectValue, WithDisabledProp } from '../../RangeFilter.types';
 import { WithTranslations } from '../../../DateRangePicker.types';

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

@@ -1,4 +1,4 @@
-import { TimePickerProps } from '@synerise/ds-time-picker/dist/TimePicker.types';
+import type { TimePickerProps } from '@synerise/ds-time-picker';
 import { DateLimitMode } from '../../Shared/TimeWindow/RangeFormContainer/RangeForm/RangeForm.types';
 export declare type FilterBaseProps = {
     maxEntries?: number;

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

@@ -8,6 +8,7 @@ import * as React from 'react';
 import { useIntl } from 'react-intl';
 import * as dayjs from 'dayjs';
 import { v4 as uuid } from 'uuid';
+import { useDataFormat } from '@synerise/ds-data-format';
 import RangeFormContainer from '../../../Shared/TimeWindow/RangeFormContainer/RangeFormContainer';
 import { SelectionCount, SelectionHint, AddButton } from '../../../Shared';
 import Grid from '../../../Shared/TimeWindow/Grid/Grid';
@@ -16,6 +17,7 @@ import * as S from '../../../RangeFilter.styles';
 import { useShiftAndControlKeys } from '../hooks/useShiftAndControlKeys';
 import { canAddAnotherRange, haveActiveDaysCommonRange, range } from './utils';
 import { DEFAULT_RANGE_START, DEFAULT_RANGE_END, DEFAULT_TIME_FORMAT, EMPTY_OBJECT, DEFAULT_MAX_ENTRIES, RENDER_EMPTY_NODE_FN, NOOP } from '../constants';
+import { EU_NOTATION_WEEK_DAYS_INDEXES, US_NOTATION_WEEK_DAYS_INDEXES } from '../../../Shared/TimeWindow/constants/timeWindow.constants';
 
 var Weekly = function Weekly(_ref) {
   var _ref$maxEntries = _ref.maxEntries,
@@ -55,9 +57,13 @@ var Weekly = function Weekly(_ref) {
       shiftKeyPressed = _useShiftAndControlKe[1];
 
   var intl = useIntl();
+
+  var _useDataFormat = useDataFormat(),
+      isSundayFirstWeekDay = _useDataFormat.isSundayFirstWeekDay;
+
   var allKeys = React.useMemo(function () {
-    return range(0, 7);
-  }, []);
+    return isSundayFirstWeekDay ? US_NOTATION_WEEK_DAYS_INDEXES : EU_NOTATION_WEEK_DAYS_INDEXES;
+  }, [isSundayFirstWeekDay]);
   React.useEffect(function () {
     setFilteredSchedule(Object.keys(value));
   }, [value]);

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

@@ -3,8 +3,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import * as React from 'react';
 import Select from '@synerise/ds-select';
 import Icon, { CloseS } from '@synerise/ds-icon';
-import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
+import { useDataFormat } from '@synerise/ds-data-format';
 import TimePicker from '@synerise/ds-time-picker';
+import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
 import * as S from './RangeForm.styles';
 import { getDisabledTimeOptions } from '../../../../../RangePicker/utils';
 export var FORM_MODES = {
@@ -28,6 +29,9 @@ var RangeForm = function RangeForm(_ref) {
       timePickerProps = _ref.timePickerProps,
       texts = _ref.texts;
 
+  var _useDataFormat = useDataFormat(),
+      is12HoursClock = _useDataFormat.is12HoursClock;
+
   var _React$useState = React.useState(startDate),
       start = _React$useState[0],
       setStart = _React$useState[1];
@@ -58,9 +62,10 @@ var RangeForm = function RangeForm(_ref) {
       },
       disabledHours: [],
       disabledMinutes: [],
-      disabledSeconds: []
+      disabledSeconds: [],
+      use12HourClock: is12HoursClock
     }, timePickerProps));
-  }, [start, onExactHourSelect, getPopupContainer, texts, timePickerProps, disabled]);
+  }, [start, onExactHourSelect, getPopupContainer, texts, timePickerProps, disabled, is12HoursClock]);
   var renderRangePicker = React.useCallback(function () {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TimePicker, _extends({
       disabled: disabled,
@@ -73,9 +78,10 @@ var RangeForm = function RangeForm(_ref) {
       dropdownProps: {
         getPopupContainer: getPopupContainer
       },
-      disabledHours: getDisabledTimeOptions(start || end, 'HOURS', null, end),
-      disabledMinutes: getDisabledTimeOptions(start || end, 'MINUTES', null, end),
-      disabledSeconds: getDisabledTimeOptions(start || end, 'SECONDS', null, end)
+      disabledHours: getDisabledTimeOptions(start || end, 'HOURS', null, end, is12HoursClock),
+      disabledMinutes: getDisabledTimeOptions(start || end, 'MINUTES', null, end, is12HoursClock),
+      disabledSeconds: getDisabledTimeOptions(start || end, 'SECONDS', null, end, is12HoursClock),
+      use12HourClock: is12HoursClock
     }, timePickerProps)), /*#__PURE__*/React.createElement(S.Separator, null, "-"), /*#__PURE__*/React.createElement(TimePicker, _extends({
       disabled: disabled,
       clearTooltip: texts == null ? void 0 : texts.clear,
@@ -87,11 +93,12 @@ var RangeForm = function RangeForm(_ref) {
       dropdownProps: {
         getPopupContainer: getPopupContainer
       },
-      disabledHours: getDisabledTimeOptions(end || start, 'HOURS', start, null),
-      disabledMinutes: getDisabledTimeOptions(end || start, 'MINUTES', start, null),
-      disabledSeconds: getDisabledTimeOptions(end || start, 'SECONDS', start, null)
+      disabledHours: getDisabledTimeOptions(end || start, 'HOURS', start, null, is12HoursClock),
+      disabledMinutes: getDisabledTimeOptions(end || start, 'MINUTES', start, null, is12HoursClock),
+      disabledSeconds: getDisabledTimeOptions(end || start, 'SECONDS', start, null, is12HoursClock),
+      use12HourClock: is12HoursClock
     }, timePickerProps)));
-  }, [start, end, onStartChange, onEndChange, setStart, setEnd, getPopupContainer, texts, timePickerProps, disabled]);
+  }, [start, end, onStartChange, onEndChange, setStart, setEnd, getPopupContainer, texts, timePickerProps, disabled, is12HoursClock]);
   var limitModeSelect = React.useMemo(function () {
     return valueSelectionModes.length > 1 ? /*#__PURE__*/React.createElement(Select, {
       value: mode,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TimePickerProps } from '@synerise/ds-time-picker/dist/TimePicker.types';
+import type { TimePickerProps } from '@synerise/ds-time-picker';
 import { DayKey, RangeActions, TimeWindowProps, TimeWindowTexts } from '../TimeWindow.types';
 import { FilterDefinition, WithDisabledProp } from '../../../RangeFilter.types';
 import { DateLimitMode } from './RangeForm/RangeForm.types';

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

@@ -2,9 +2,5 @@ import * as React from 'react';
 import { TimeWindowProps } from './TimeWindow.types';
 import { DateLimitMode } from './RangeFormContainer/RangeForm/RangeForm.types';
 export declare const DEFAULT_LIMIT_MODE: DateLimitMode;
-declare const _default: React.ForwardRefExoticComponent<Pick<TimeWindowProps, "monthlyFilter" | "monthlyFilterPeriod" | "hideHeader" | "onChange" | "days" | "onRangeCopy" | "onRangePaste" | "onRangeClear" | "customDays" | "showSelectAll" | "title" | "numberOfDays" | "numberOfDaysPerRow" | "rowLabelFormatter" | "dayTemplate" | "dayFormatter" | "onCheckDay" | "onSelectAll" | "onUnselectAll" | "readOnly" | "inverted" | "labelInverted" | "reverseGroup" | "daily" | "rangeClipboard" | "valueSelectionModes" | "texts" | "renderRangeFormSuffix" | "timePickerProps" | "disabled"> & {
-    forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
-} & React.RefAttributes<any>> & {
-    WrappedComponent: React.ComponentType<TimeWindowProps>;
-};
+declare const _default: React.FC<TimeWindowProps>;
 export default _default;

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

@@ -20,6 +20,7 @@ import { FormattedMessage, injectIntl } from 'react-intl'; // eslint-disable-nex
 // @ts-ignore
 
 import dayjs from 'dayjs';
+import { withDataFormat } from '@synerise/ds-data-format';
 import * as S from './TimeWindow.styles';
 import { getDateFromDayValue } from './utils';
 import Grid from './Grid/Grid';
@@ -29,6 +30,7 @@ import AddButton from '../AddButton/AddButton';
 import RangeFormContainer from './RangeFormContainer/RangeFormContainer';
 import Day from './Day/Day';
 import SelectionHint from '../SelectionHint/SelectionHint';
+import { EU_NOTATION_WEEK_DAYS_INDEXES, US_NOTATION_WEEK_DAYS_INDEXES } from './constants/timeWindow.constants';
 export var DEFAULT_LIMIT_MODE = 'Range';
 
 var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
@@ -264,8 +266,14 @@ var TimeWindowBase = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "getAllKeys", function () {
       var _this$props7 = _this.props,
           numberOfDays = _this$props7.numberOfDays,
-          customDays = _this$props7.customDays;
+          customDays = _this$props7.customDays,
+          isSundayFirstWeekDay = _this$props7.isSundayFirstWeekDay;
       var keys = range(numberOfDays);
+
+      if (JSON.stringify(keys) === JSON.stringify(EU_NOTATION_WEEK_DAYS_INDEXES) && isSundayFirstWeekDay) {
+        keys = US_NOTATION_WEEK_DAYS_INDEXES;
+      }
+
       if (customDays) keys = [].concat(keys, Object.keys(customDays));
       return keys;
     });
@@ -523,4 +531,4 @@ _defineProperty(TimeWindowBase, "defaultProps", {
   }
 });
 
-export default injectIntl(TimeWindowBase);
+export default withDataFormat(injectIntl(TimeWindowBase));

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { TimePickerProps } from '@synerise/ds-time-picker/dist/TimePicker.types';
 import { WrappedComponentProps } from 'react-intl';
+import type { TimePickerProps } from '@synerise/ds-time-picker';
+import type { WithDataFormatProps } from '@synerise/ds-data-format';
 import { DayProps } from './Day/Day.types';
 import { FilterDefinition, WithDisabledProp } from '../../RangeFilter.types';
 import { GridTexts } from './Grid/Grid.types';
@@ -57,7 +58,7 @@ export declare type TimeWindowProps = {
     texts?: TimeWindowTexts & GridTexts;
     renderRangeFormSuffix?: () => React.ReactNode;
     timePickerProps?: Partial<TimePickerProps>;
-} & Partial<RangeActions> & WithDisabledProp & WrappedComponentProps;
+} & Partial<RangeActions> & WithDataFormatProps & WithDisabledProp & WrappedComponentProps;
 export declare type State = {
     activeDays: DayKey[];
     controlKeyPressed: boolean;

package/dist/RangeFilter/Shared/TimeWindow/constants/timeWindow.constants.d.ts

@@ -0,0 +1,2 @@
+export declare const EU_NOTATION_WEEK_DAYS_INDEXES: number[];
+export declare const US_NOTATION_WEEK_DAYS_INDEXES: number[];

package/dist/RangeFilter/Shared/TimeWindow/constants/timeWindow.constants.js

@@ -0,0 +1,2 @@
+export var EU_NOTATION_WEEK_DAYS_INDEXES = [0, 1, 2, 3, 4, 5, 6];
+export var US_NOTATION_WEEK_DAYS_INDEXES = [6, 0, 1, 2, 3, 4, 5];

package/dist/RangePicker/RangePicker.d.ts

@@ -1,23 +1,4 @@
 import * as React from 'react';
-import { DayModifiers } from 'react-day-picker';
-import { RangePickerProps as Props, State, Side as SideType } from './RangePicker.types';
-export default class RangePicker extends React.PureComponent<Props, State> {
-    constructor(props: Props);
-    getSnapshotBeforeUpdate(prevProps: Readonly<Props>): null;
-    componentDidUpdate: () => void;
-    handleDayMouseEnter: (day: Date) => void;
-    handleDayMouseLeave: () => void;
-    handleDayClick: (day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>) => void;
-    handleFromTimeChange: (from: string | Date | undefined) => void;
-    handleToTimeChange: (to: string | Date | undefined) => void;
-    handleAddDay: (numberOfDays: number, side: string) => void;
-    handleSideMonthChange: (side: 'left' | 'right', month: Date, mode: string) => void;
-    handleSideModeChange: (side: string, mode: string) => void;
-    renderDay: (day: Date) => React.ReactNode;
-    renderYearPicker: (side: SideType) => React.ReactNode;
-    renderMonthPicker: (side: SideType) => React.ReactNode;
-    renderDatePicker: (side: SideType) => React.ReactNode;
-    renderTimePicker: (side: SideType) => React.ReactNode;
-    renderSide: (side: SideType) => React.ReactNode | null;
-    render(): JSX.Element;
-}
+import { RangePickerProps as Props } from './RangePicker.types';
+declare const _default: React.FC<Props>;
+export default _default;

package/dist/RangePicker/RangePicker.js

@@ -12,6 +12,7 @@ import * as React from 'react';
 import { DateUtils } from 'react-day-picker';
 import fnsIsSameDay from 'date-fns/isSameDay';
 import fnsIsValid from 'date-fns/isValid';
+import { legacyParse } from '@date-fns/upgrade/v2';
 import MonthPicker from '@synerise/ds-date-picker/dist/Elements/MonthPicker/MonthPicker';
 import TimePicker from '@synerise/ds-date-picker/dist/Elements/TimePicker/TimePicker';
 import { DayBackground, DayForeground, DayText, DayTooltip } from '@synerise/ds-date-picker/dist/Elements/DayPicker/DayPicker.styles';
@@ -21,7 +22,7 @@ import Icon, { CalendarM, ClockM } from '@synerise/ds-icon';
 import { fnsDifferenceInYears } from '@synerise/ds-date-picker/dist/fns';
 import localeUtils from '@synerise/ds-date-picker/dist/localeUtils';
 import fnsFormat from '@synerise/ds-date-picker/dist/format';
-import { legacyParse } from '@date-fns/upgrade/v2';
+import { getDefaultDataTimeOptions, withDataFormat } from '@synerise/ds-data-format';
 import { Range } from '../RelativeRangePicker/RelativeRangePicker.styles';
 import { fnsStartOfDay, fnsEndOfDay, fnsIsSameMonth, fnsIsAfter, fnsAddMinutes, fnsAddDays } from '../fns';
 import * as S from './RangePicker.styles';
@@ -224,13 +225,23 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
       var text = day.getDate();
       var _this$props6 = _this.props,
           value = _this$props6.value,
-          intl = _this$props6.intl;
+          intl = _this$props6.intl,
+          formatValue = _this$props6.formatValue;
+
+      var formatDate = function formatDate(date) {
+        if (typeof date === 'string') {
+          return fnsFormat(legacyParse(date), TOOLTIP_FORMAT, intl.locale);
+        }
+
+        return formatValue(date, _objectSpread({}, getDefaultDataTimeOptions(true)));
+      };
+
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DayBackground, {
         className: "DayPicker-Day-BG"
       }), /*#__PURE__*/React.createElement(DayText, {
         className: "DayPicker-Day-Text",
         "data-attr": text
-      }, value.to && value.from && /*#__PURE__*/React.createElement(DayTooltip, null, fnsFormat(legacyParse(value.from), TOOLTIP_FORMAT, intl.locale), " -", ' ', fnsFormat(legacyParse(value.to), TOOLTIP_FORMAT, intl.locale)), text), /*#__PURE__*/React.createElement(DayForeground, {
+      }, value.to && value.from && /*#__PURE__*/React.createElement(DayTooltip, null, formatDate(value.from), " - ", formatDate(value.to)), text), /*#__PURE__*/React.createElement(DayForeground, {
         className: "DayPicker-Day-FG"
       }));
     });
@@ -490,4 +501,4 @@ var RangePicker = /*#__PURE__*/function (_React$PureComponent) {
   return RangePicker;
 }(React.PureComponent);
 
-export { RangePicker as default };
+export default withDataFormat(RangePicker);

package/dist/RangePicker/utils.d.ts

@@ -1,6 +1,6 @@
 import { Modifiers } from 'react-day-picker';
 import { State } from './RangePicker.types';
 import { DateRange, NullableDateLimit } from '../date.types';
-export declare const getDisabledTimeOptions: (day: string | Date | undefined, granularity: string, lowerLimit?: NullableDateLimit, upperLimit?: NullableDateLimit) => number[];
+export declare const getDisabledTimeOptions: (initialDay: string | Date | undefined, granularity: string, initialLowerLimit?: NullableDateLimit, initialUpperLimit?: NullableDateLimit, is12HoursClock?: boolean | undefined) => number[];
 export declare const getSidesState: (value: DateRange, forceAdjacentMonths?: boolean | undefined) => State;
 export declare const getModifiers: (from: NullableDateLimit | undefined, to: NullableDateLimit | undefined, enteredTo: NullableDateLimit | undefined) => Modifiers;

package/dist/RangePicker/utils.js

@@ -3,6 +3,8 @@ import { legacyParse } from '@date-fns/upgrade/v2';
 import fnsMin from 'date-fns/min';
 import fnsMax from 'date-fns/max';
 import fnsIsValid from 'date-fns/isValid';
+import * as dayjs from 'dayjs';
+import { AM, PM, HOUR_12, MAP_24_HOUR_TO_12, HOUR } from '@synerise/ds-time-picker';
 import { fnsEndOfDay, fnsIsSameMonth, fnsStartOfDay, fnsStartOfMonth } from '../fns';
 import { TIME_OPTIONS } from '../constants';
 import SET from '../dateUtils/set';
@@ -10,25 +12,78 @@ import GET from '../dateUtils/get';
 import ADD from '../dateUtils/add';
 import format from '../dateUtils/format';
 var NOW = new Date();
-export var getDisabledTimeOptions = function getDisabledTimeOptions(day, granularity, lowerLimit, upperLimit) {
-  if (lowerLimit === void 0) {
-    lowerLimit = null;
+var HOURS_GRANULARITY = 'HOURS';
+
+var getAmOrPmFromDate = function getAmOrPmFromDate(date) {
+  return dayjs(date).get(HOUR) >= HOUR_12 ? PM : AM;
+};
+
+var change24To12Hour = function change24To12Hour(date) {
+  var dateBuilder = dayjs(date);
+  var hour = dateBuilder.get(HOUR);
+  var hourToMap = MAP_24_HOUR_TO_12[hour];
+  dateBuilder = dateBuilder.set(HOUR, hourToMap);
+  return dateBuilder.toDate();
+};
+
+export var getDisabledTimeOptions = function getDisabledTimeOptions(initialDay, granularity, initialLowerLimit, initialUpperLimit, is12HoursClock) {
+  if (initialLowerLimit === void 0) {
+    initialLowerLimit = null;
   }
 
-  if (upperLimit === void 0) {
-    upperLimit = null;
+  if (initialUpperLimit === void 0) {
+    initialUpperLimit = null;
   }
 
+  var day = initialDay;
+  var lowerLimit = initialLowerLimit;
+  var upperLimit = initialUpperLimit;
+
   if (!day) {
     return [];
   }
 
+  var dayClockMode = getAmOrPmFromDate(legacyParse(day));
+  var lowerLimitClockMode = getAmOrPmFromDate(legacyParse(lowerLimit));
+  var upperLimitClockMode = getAmOrPmFromDate(legacyParse(upperLimit));
+
+  if (is12HoursClock && lowerLimit) {
+    if (lowerLimitClockMode === PM && dayjs(lowerLimit).get(HOUR) === HOUR_12) {
+      return [];
+    }
+
+    if (lowerLimitClockMode === AM && dayClockMode === PM) {
+      return [];
+    }
+
+    if (lowerLimitClockMode === PM && dayClockMode === PM) {
+      day = change24To12Hour(legacyParse(day));
+      lowerLimit = change24To12Hour(legacyParse(lowerLimit));
+    }
+  }
+
+  if (is12HoursClock && upperLimit) {
+    if (upperLimitClockMode === PM && dayClockMode === PM) {
+      day = change24To12Hour(legacyParse(day));
+      upperLimit = change24To12Hour(legacyParse(upperLimit));
+    }
+  }
+
+  if (is12HoursClock && granularity !== HOURS_GRANULARITY) {
+    var dayBuilder = dayjs(day);
+    var hour = dayBuilder.get(HOUR);
+
+    if (hour === HOUR_12) {
+      return [];
+    }
+  }
+
   var lowLimit = lowerLimit || fnsStartOfDay(legacyParse(day));
   var upLimit = upperLimit || fnsEndOfDay(legacyParse(day));
   var options = TIME_OPTIONS[granularity].map(function (option) {
     return SET[granularity](day, option);
   });
-  return options.filter(function (opt) {
+  var result = options.filter(function (opt) {
     return !fnsIsWithinRange(legacyParse(opt), {
       start: legacyParse(lowLimit),
       end: legacyParse(upLimit)
@@ -36,6 +91,16 @@ export var getDisabledTimeOptions = function getDisabledTimeOptions(day, granula
   }).map(function (option) {
     return GET[granularity](option);
   });
+
+  if (is12HoursClock) {
+    if (granularity === HOURS_GRANULARITY) {
+      result = result.filter(function (item) {
+        return item !== HOUR_12;
+      });
+    }
+  }
+
+  return result;
 };
 export var getSidesState = function getSidesState(value, forceAdjacentMonths) {
   var from = fnsStartOfMonth(fnsIsValid(value.from) ? legacyParse(value.from) : new Date());

package/dist/RangePickerInput/RangePickerInput.js

@@ -1,8 +1,15 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import * as React from 'react';
-import Icon, { ArrowRightS, CalendarM, Close3S } from '@synerise/ds-icon';
 import fnsIsValid from 'date-fns/isValid';
+import Icon, { ArrowRightS, CalendarM, Close3S } from '@synerise/ds-icon';
 import theme from '@synerise/ds-core/dist/js/DSProvider/ThemeProvider/theme';
-import Tooltip from '@synerise/ds-tooltip'; // eslint-disable-next-line import/no-named-default
+import Tooltip from '@synerise/ds-tooltip';
+import { getDefaultDataTimeOptions, useDataFormat } from '@synerise/ds-data-format'; // eslint-disable-next-line import/no-named-default
 
 import { default as fnsFormat } from '../dateUtils/format';
 import * as S from './RangePickerInput.styles';
@@ -12,6 +19,7 @@ import { isLifetime } from '../RelativeRangePicker/Elements/RangeDropdown/RangeD
 var RangePickerInput = function RangePickerInput(_ref) {
   var value = _ref.value,
       format = _ref.format,
+      valueFormatOptions = _ref.valueFormatOptions,
       showTime = _ref.showTime,
       onChange = _ref.onChange,
       onClick = _ref.onClick,
@@ -29,6 +37,10 @@ var RangePickerInput = function RangePickerInput(_ref) {
       errorText = _ref.errorText,
       _ref$preferRelativeDe = _ref.preferRelativeDesc,
       preferRelativeDesc = _ref$preferRelativeDe === void 0 ? false : _ref$preferRelativeDe;
+
+  var _useDataFormat = useDataFormat(),
+      formatValue = _useDataFormat.formatValue;
+
   var dateRangeValue = value ? normalizeRange(value) : value;
 
   var _React$useState = React.useState(false),
@@ -52,9 +64,14 @@ var RangePickerInput = function RangePickerInput(_ref) {
   var getText = React.useCallback(function (dateToDisplay) {
     if (!dateToDisplay || !fnsIsValid(dateToDisplay)) return '';
     var dateValue = dateToDisplay;
-    if (typeof dateToDisplay === 'string') dateValue = new Date(dateToDisplay);
-    return fnsFormat(dateValue, format || showTime ? 'MMM D, YYYY, HH:mm' : 'MMM D, YYYY');
-  }, [format, showTime]);
+
+    if (typeof dateToDisplay === 'string') {
+      dateValue = new Date(dateToDisplay);
+      return fnsFormat(dateValue, format || showTime ? 'MMM D, YYYY, HH:mm' : 'MMM D, YYYY');
+    }
+
+    return formatValue(dateToDisplay, _objectSpread({}, getDefaultDataTimeOptions(showTime), {}, valueFormatOptions));
+  }, [format, showTime, formatValue, valueFormatOptions]);
   var renderFromDate = React.useCallback(function () {
     var isFromDateDefined = dateRangeValue && dateRangeValue.from;
     var text = dateRangeValue && isFromDateDefined ? /*#__PURE__*/React.createElement(S.DateValue, null, getText(dateRangeValue.from)) : texts == null ? void 0 : texts.startDatePlaceholder;

package/dist/RangePickerInput/RangePickerInput.types.d.ts

@@ -1,9 +1,14 @@
 import * as React from 'react';
+import { DateToFormatOptions } from '@synerise/ds-data-format';
 import { DateFilter, DateRange } from '../date.types';
 import { Texts } from '../DateRangePicker.types';
 export declare type RangePickerInputProps = {
     size?: 'large' | 'default' | 'small';
+    /**
+     * @deprecated use `valueFormatOptions` instead
+     */
     format?: string;
+    valueFormatOptions?: DateToFormatOptions;
     showTime?: boolean;
     allowClear?: boolean;
     value?: Pick<DateRange, 'from'> & Pick<DateRange, 'to'>;

package/dist/RawDateRangePicker.d.ts

@@ -26,7 +26,7 @@ export declare class RawDateRangePicker extends React.PureComponent<DateRangePic
     getAddons: () => AddonType[];
     render(): JSX.Element;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<DateRangePickerProps, "readOnly" | "texts" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "containerClass" | "disableDefaultTexts" | "disabledDate" | "forceAdjacentMonths" | "forceAbsolute" | "footerProps" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "valueTransformer" | "arrowColor" | "disableAbsoluteTimepickerInRelative" | "rangePickerInputProps" | "renderPopoverTrigger"> & {
+declare const _default: React.ForwardRefExoticComponent<Pick<DateRangePickerProps, "readOnly" | "texts" | "format" | "value" | "onVisibleChange" | "rangeUnits" | "containerClass" | "disableDefaultTexts" | "disabledDate" | "valueFormatOptions" | "forceAdjacentMonths" | "forceAbsolute" | "footerProps" | "onValueChange" | "onApply" | "onFilterSave" | "popoverProps" | "popoverTrigger" | "ranges" | "relativeFuture" | "relativePast" | "relativeModes" | "savedFilters" | "showRelativePicker" | "showFilter" | "showTime" | "showCustomRange" | "validate" | "valueTransformer" | "arrowColor" | "disableAbsoluteTimepickerInRelative" | "rangePickerInputProps" | "renderPopoverTrigger"> & {
     forwardedRef?: ((instance: any) => void) | React.RefObject<any> | null | undefined;
 } & React.RefAttributes<any>> & {
     WrappedComponent: React.ComponentType<DateRangePickerProps>;

package/dist/RawDateRangePicker.js

@@ -291,6 +291,7 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
     var _this$props4 = this.props,
         showTime = _this$props4.showTime,
         format = _this$props4.format,
+        valueFormatOptions = _this$props4.valueFormatOptions,
         disabledDate = _this$props4.disabledDate,
         validate = _this$props4.validate,
         forceAdjacentMonths = _this$props4.forceAdjacentMonths,
@@ -374,7 +375,8 @@ export var RawDateRangePicker = /*#__PURE__*/function (_React$PureComponent) {
       texts: texts,
       value: value,
       showTime: showTime,
-      format: format
+      format: format,
+      valueFormatOptions: valueFormatOptions
     }, footerProps)));
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-date-range-picker",
-  "version": "0.19.13",
+  "version": "0.20.0",
   "description": "Date-Range-Picker UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,10 +34,10 @@
   "dependencies": {
     "@date-fns/upgrade": "^1.0.3",
     "@synerise/ds-button": "^0.17.12",
-    "@synerise/ds-date-picker": "^0.9.0",
+    "@synerise/ds-date-picker": "^0.9.1",
     "@synerise/ds-icon": "^0.54.0",
-    "@synerise/ds-manageable-list": "^0.24.8",
-    "@synerise/ds-time-picker": "^0.6.58",
+    "@synerise/ds-manageable-list": "^0.24.9",
+    "@synerise/ds-time-picker": "^0.7.0",
     "@synerise/ds-tooltip": "^0.13.0",
     "@synerise/ds-utils": "^0.19.0",
     "date-fns": "^2.16.1",
@@ -54,5 +54,5 @@
   "devDependencies": {
     "@types/ramda": "^0.27.14"
   },
-  "gitHead": "55d4a4dfa9230bea883b887e4457ca86f8509d83"
+  "gitHead": "41419f123b90134def2fecde455da13946fc2c0e"
 }