@synerise/ds-date-range-picker 1.5.1 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/DateRangePicker.d.ts +1 -4
  3. package/dist/DateRangePicker.js +56 -66
  4. package/dist/DateRangePicker.styles.d.ts +4 -9
  5. package/dist/DateRangePicker.styles.js +21 -50
  6. package/dist/DateRangePicker.types.d.ts +3 -14
  7. package/dist/Footer/Footer.styles.d.ts +2 -28
  8. package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.styles.d.ts +2 -86
  9. package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.styles.js +2 -2
  10. package/dist/RangeFilter/Shared/SaveFilterForm/SaveFilterForm.styles.d.ts +2 -29
  11. package/dist/RangeFilter/Shared/TimeWindow/Day/Day.js +1 -1
  12. package/dist/RangePicker/RangePicker.styles.d.ts +2 -29
  13. package/dist/RawDateRangePicker.d.ts +1 -4
  14. package/dist/RawDateRangePicker.js +9 -14
  15. package/dist/RelativeRangePicker/RelativeRangePicker.styles.js +0 -3
  16. package/dist/constants.d.ts +4 -0
  17. package/dist/constants.js +11 -0
  18. package/package.json +23 -23
  19. package/dist/style/index.css +0 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,16 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [1.6.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@1.5.2...@synerise/ds-date-range-picker@1.6.0) (2026-02-05)
7
+
8
+ ### Features
9
+
10
+ - **tooltip:** migrate to popover ([53ecd29](https://github.com/Synerise/synerise-design/commit/53ecd293fa31bdcfd921c6c5fd91db9c2c643eda))
11
+
12
+ ## [1.5.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@1.5.1...@synerise/ds-date-range-picker@1.5.2) (2026-02-02)
13
+
14
+ **Note:** Version bump only for package @synerise/ds-date-range-picker
15
+
6
16
  ## [1.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-date-range-picker@1.5.0...@synerise/ds-date-range-picker@1.5.1) (2026-01-29)
7
17
 
8
18
  **Note:** Version bump only for package @synerise/ds-date-range-picker
package/dist/DateRangePicker.d.ts CHANGED
@@ -1,7 +1,4 @@
1
1
  import React from 'react';
2
2
  import { type DateRangePickerProps } from './DateRangePicker.types';
3
- import RawDateRangePicker from './RawDateRangePicker';
4
- import './style/index.less';
5
- declare const DateRangePicker: (props: DateRangePickerProps) => React.JSX.Element;
3
+ declare const DateRangePicker: React.ForwardRefExoticComponent<DateRangePickerProps & React.RefAttributes<HTMLDivElement>>;
6
4
  export default DateRangePicker;
7
- export { RawDateRangePicker };
package/dist/DateRangePicker.js CHANGED
@@ -1,14 +1,14 @@
1
1
  function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
2
- import { Popover } from 'antd';
3
2
  import { isEqual } from 'lodash';
4
- import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
+ import React, { forwardRef, useCallback, useEffect, useMemo, useState } from 'react';
5
4
  import { useIntl } from 'react-intl';
5
+ import { Popover, PopoverContent, getPlacement } from '@synerise/ds-popover';
6
6
  import * as S from './DateRangePicker.styles';
7
7
  import RangePickerInput from './RangePickerInput/RangePickerInput';
8
- import RawDateRangePicker from './RawDateRangePicker';
9
- import "./style/index.css";
8
+ import { RawDateRangePicker } from './RawDateRangePicker';
9
+ import { POPOVER_FLIP_CONFIG, POPOVER_OFFSET_CONFIG, POPOVER_SHIFT_CONFIG } from './constants';
10
10
  import { getDefaultTexts } from './utils';
11
- var DateRangePicker = function DateRangePicker(props) {
11
+ var DateRangePicker = /*#__PURE__*/forwardRef(function (props, forwardedRef) {
12
12
  var value = props.value,
13
13
  defaultValue = props.defaultValue,
14
14
  onApply = props.onApply,
@@ -17,9 +17,10 @@ var DateRangePicker = function DateRangePicker(props) {
17
17
  popoverTrigger = props.popoverTrigger,
18
18
  forceAdjacentMonths = props.forceAdjacentMonths,
19
19
  disableDefaultTexts = props.disableDefaultTexts,
20
- arrowColor = props.arrowColor,
20
+ _props$placement = props.placement,
21
+ placement = _props$placement === void 0 ? 'top' : _props$placement,
21
22
  valueFormatOptions = props.valueFormatOptions,
22
- _onVisibleChange = props.onVisibleChange,
23
+ onVisibleChange = props.onVisibleChange,
23
24
  _props$popoverProps = props.popoverProps,
24
25
  popoverProps = _props$popoverProps === void 0 ? {} : _props$popoverProps,
25
26
  _props$rangePickerInp = props.rangePickerInputProps,
@@ -43,10 +44,7 @@ var DateRangePicker = function DateRangePicker(props) {
43
44
  var _useState3 = useState(false),
44
45
  inputActive = _useState3[0],
45
46
  setInputActive = _useState3[1];
46
- var _useState4 = useState(true),
47
- isTopAligned = _useState4[0],
48
- setIsTopAligned = _useState4[1];
49
- var wrapperRef = useRef(null);
47
+ var floatingPlacement = getPlacement(placement);
50
48
  var allTexts = useMemo(function () {
51
49
  return getDefaultTexts(intl, disableDefaultTexts, texts);
52
50
  }, [texts, disableDefaultTexts, intl]);
@@ -56,24 +54,6 @@ var DateRangePicker = function DateRangePicker(props) {
56
54
  }
57
55
  // eslint-disable-next-line react-hooks/exhaustive-deps
58
56
  }, [selectedRange]);
59
- var checkContentAlignement = useCallback(function () {
60
- if (wrapperRef.current) {
61
- var popoverDomElement = wrapperRef.current.querySelector('.ds-date-range-popover');
62
- if (popoverDomElement) {
63
- var _placementClassName$s;
64
- var classNames = Array.from(popoverDomElement.classList);
65
- var placementClassName = classNames.find(function (className) {
66
- return className.startsWith('ant-popover-placement-');
67
- });
68
- var placement = placementClassName && ((_placementClassName$s = placementClassName.split('-').pop()) == null ? void 0 : _placementClassName$s.toLocaleLowerCase());
69
- var topAligned = (placement == null ? void 0 : placement.indexOf('bottom')) === -1;
70
- setIsTopAligned(topAligned);
71
- }
72
- }
73
- }, []);
74
- useEffect(function () {
75
- checkContentAlignement();
76
- }, [checkContentAlignement]);
77
57
  var onApplyCallback = useCallback(function (range) {
78
58
  var finalDateRange = range === undefined && defaultValue !== undefined ? defaultValue : range;
79
59
  onApply && onApply(finalDateRange);
@@ -81,17 +61,17 @@ var DateRangePicker = function DateRangePicker(props) {
81
61
  setPopupVisible(false);
82
62
  setInputActive(false);
83
63
  }, [defaultValue, onApply]);
84
- var conditionalVisibilityProps = _extends({}, popupVisible === false && {
85
- visible: false
64
+ var conditionalVisibilityProps = _extends({}, popupVisible !== undefined && {
65
+ open: popupVisible
86
66
  });
87
- var handleRangePickerInputClick = readOnly ? undefined : function () {
88
- return setPopupVisible(true);
89
- };
90
- var hasCustomTrigger = !!popoverTrigger;
67
+ var togglePopup = useCallback(function () {
68
+ setPopupVisible(!popupVisible);
69
+ onVisibleChange && onVisibleChange(!popupVisible);
70
+ }, [popupVisible, onVisibleChange]);
91
71
  var triggerElement = popoverTrigger || renderPopoverTrigger({
92
72
  setPopupVisible: setPopupVisible
93
73
  }) || /*#__PURE__*/React.createElement(RangePickerInput, _extends({
94
- onClick: handleRangePickerInputClick,
74
+ onClick: readOnly ? undefined : togglePopup,
95
75
  value: selectedDate,
96
76
  showTime: showTime,
97
77
  texts: allTexts,
@@ -102,39 +82,49 @@ var DateRangePicker = function DateRangePicker(props) {
102
82
  readOnly: readOnly,
103
83
  disabled: disabled
104
84
  }));
85
+ var hasCustomTrigger = Boolean(popoverTrigger || renderPopoverTrigger);
86
+ var handleTriggerClick = hasCustomTrigger ? function () {
87
+ if (hasCustomTrigger) {
88
+ togglePopup();
89
+ }
90
+ } : undefined;
105
91
  if (readOnly || disabled) {
106
- return /*#__PURE__*/React.createElement(React.Fragment, null, triggerElement);
92
+ return /*#__PURE__*/React.createElement(S.PickerWrapper, {
93
+ ref: forwardedRef
94
+ }, triggerElement);
107
95
  }
108
- return /*#__PURE__*/React.createElement(S.PickerWrapper, {
109
- ref: wrapperRef,
110
- arrowColor: arrowColor
111
- }, /*#__PURE__*/React.createElement(Popover, _extends({
112
- content: /*#__PURE__*/React.createElement(RawDateRangePicker, _extends({}, props, {
113
- showTime: showTime,
114
- onApply: onApplyCallback,
115
- value: selectedDate,
116
- texts: allTexts,
117
- forceAdjacentMonths: forceAdjacentMonths,
118
- alignContentToTop: isTopAligned
119
- })),
120
- getPopupContainer: getPopupContainer !== undefined ? function (node) {
121
- return getPopupContainer(node);
122
- } : function (node) {
96
+ return /*#__PURE__*/React.createElement(Popover, _extends({
97
+ getPopupContainer: getPopupContainer || function (node) {
123
98
  return node.parentElement !== null ? node.parentElement : document.body;
124
99
  },
125
100
  trigger: "click",
126
- overlayStyle: {
127
- maxWidth: '700px',
128
- fontWeight: 'unset'
101
+ onOpenChange: function onOpenChange(openState) {
102
+ setPopupVisible(openState);
103
+ setInputActive(openState);
104
+ onVisibleChange && onVisibleChange(openState);
129
105
  },
130
- overlayClassName: "ds-date-range-popover",
131
- onVisibleChange: function onVisibleChange(visibility) {
132
- visibility && checkContentAlignement();
133
- visibility && hasCustomTrigger && setPopupVisible(true);
134
- setInputActive(visibility);
135
- _onVisibleChange && _onVisibleChange(visibility);
136
- }
137
- }, popoverProps, conditionalVisibilityProps), triggerElement));
138
- };
139
- export default DateRangePicker;
140
- export { RawDateRangePicker };
106
+ placement: floatingPlacement,
107
+ testId: "date-range-picker",
108
+ componentId: "date-range-picker",
109
+ returnFocus: false,
110
+ offsetConfig: POPOVER_OFFSET_CONFIG,
111
+ flipConfig: POPOVER_FLIP_CONFIG,
112
+ shiftConfig: POPOVER_SHIFT_CONFIG,
113
+ autoUpdate: true
114
+ }, conditionalVisibilityProps, popoverProps), /*#__PURE__*/React.createElement(PopoverContent, null, /*#__PURE__*/React.createElement(S.DateRangePickerOverlay, {
115
+ className: "ds-date-range-popover",
116
+ "data-testid": "ds-date-range-picker-overlay"
117
+ }, /*#__PURE__*/React.createElement(RawDateRangePicker, _extends({}, props, {
118
+ showTime: showTime,
119
+ onApply: onApplyCallback,
120
+ value: selectedDate,
121
+ texts: allTexts,
122
+ forceAdjacentMonths: forceAdjacentMonths
123
+ })))), /*#__PURE__*/React.createElement(S.PickerTrigger, {
124
+ asChild: false
125
+ }, /*#__PURE__*/React.createElement(S.PickerWrapper, {
126
+ ref: forwardedRef,
127
+ onClick: handleTriggerClick
128
+ }, triggerElement)));
129
+ });
130
+ export default DateRangePicker;
package/dist/DateRangePicker.styles.d.ts CHANGED
@@ -1,17 +1,12 @@
1
- import { type AdditionalMapper } from './DateRangePicker.types';
2
- export declare const PopupWrapper: import("styled-components").StyledComponent<"div", any, {
3
- hasFilter?: boolean;
4
- hasRelativePicker?: boolean;
5
- alignContentToTop?: boolean;
6
- }, never>;
1
+ export declare const DateRangePickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
2
+ export declare const DateRangePickerOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
7
3
  export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
8
4
  export declare const Separator: import("styled-components").StyledComponent<"div", any, {}, never>;
9
5
  export declare const Addon: import("styled-components").StyledComponent<"div", any, {
10
6
  last?: boolean;
11
7
  }, never>;
12
- export declare const PickerWrapper: import("styled-components").StyledComponent<"div", any, {
13
- arrowColor?: AdditionalMapper;
14
- }, never>;
8
+ export declare const PickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
9
+ export declare const PickerTrigger: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").HTMLProps<HTMLElement> & import("@synerise/ds-popover").PopoverTriggerProps, "ref"> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
15
10
  export declare const OverlayContainer: import("styled-components").StyledComponent<"div", any, {
16
11
  visible?: boolean;
17
12
  }, never>;
package/dist/DateRangePicker.styles.js CHANGED
@@ -1,73 +1,44 @@
1
1
  import styled from 'styled-components';
2
- var getHeight = function getHeight(hasFilter, hasRelativePicker) {
3
- var baseHeight = 509;
4
- if (hasFilter) {
5
- baseHeight += 127;
6
- }
7
- if (hasRelativePicker) {
8
- baseHeight += 170;
9
- }
10
- return baseHeight;
11
- };
12
- export var PopupWrapper = styled.div.withConfig({
13
- displayName: "DateRangePickerstyles__PopupWrapper",
2
+ import { PopoverTrigger } from '@synerise/ds-popover';
3
+ export var DateRangePickerWrapper = styled.div.withConfig({
4
+ displayName: "DateRangePickerstyles__DateRangePickerWrapper",
14
5
  componentId: "sc-zmtbjf-0"
15
- })(["height:", "px;display:flex;flex-direction:row;pointer-events:none;align-items:", ";"], function (props) {
16
- return getHeight(props.hasFilter, props.hasRelativePicker);
6
+ })([""]);
7
+ export var DateRangePickerOverlay = styled.div.withConfig({
8
+ displayName: "DateRangePickerstyles__DateRangePickerOverlay",
9
+ componentId: "sc-zmtbjf-1"
10
+ })(["background:", ";box-shadow:", ";border-radius:3px;overflow:hidden;max-width:700px;font-weight:unset;"], function (props) {
11
+ return props.theme.palette['white'];
17
12
  }, function (props) {
18
- return props.alignContentToTop ? 'flex-end' : 'flex-start';
13
+ return props.theme.variables['box-shadow-2'];
19
14
  });
20
15
  export var Container = styled.div.withConfig({
21
16
  displayName: "DateRangePickerstyles__Container",
22
- componentId: "sc-zmtbjf-1"
23
- })(["width:636px;pointer-events:all;background-color:", ";user-select:none;box-shadow:0 16px 32px 0 ", ";"], function (props) {
24
- return props.theme.palette.white;
25
- }, function (props) {
26
- return props.theme.palette['grey-900'] + "1a";
27
- });
17
+ componentId: "sc-zmtbjf-2"
18
+ })(["width:636px;pointer-events:all;user-select:none;"]);
28
19
  export var Separator = styled.div.withConfig({
29
20
  displayName: "DateRangePickerstyles__Separator",
30
- componentId: "sc-zmtbjf-2"
21
+ componentId: "sc-zmtbjf-3"
31
22
  })(["margin:0;border-top:1px solid ", ";"], function (props) {
32
23
  return props.theme.palette['grey-200'];
33
24
  });
34
25
  export var Addon = styled.div.withConfig({
35
26
  displayName: "DateRangePickerstyles__Addon",
36
- componentId: "sc-zmtbjf-3"
27
+ componentId: "sc-zmtbjf-4"
37
28
  })(["", ""], function (props) {
38
29
  return !props.last && "border-bottom: 1px solid " + props.theme.palette['grey-200'] + ";";
39
30
  });
40
31
  export var PickerWrapper = styled.div.withConfig({
41
32
  displayName: "DateRangePickerstyles__PickerWrapper",
42
- componentId: "sc-zmtbjf-4"
43
- })([".ant-popover.ds-date-range-popover > .ant-popover-content{margin:-5px 0;}.ant-dropdown.ds-date-range-popover > .ant-popover-arrow.ant-popover-arrow.ant-popover-arrow.ant-popover-arrow{display:none !important;}.ant-dropdown.ds-date-range-popover > .ant-popover-content > .ant-popover-inner{background:transparent;}.ant-dropdown.ds-date-range-popover > .ant-popover-content > .ant-popover-inner > .ant-popover-inner-content{padding:0;}.ant-dropdown.ds-date-range-popover .ds-date-range-picker{box-shadow:0 16px 32px 0 rgba(35,41,54,0.1);padding:16px;}.ant-popover.ds-date-range-popover.ant-popover-placement-bottomLeft > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-bottomRight > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-rightTop > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-rightBottom > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-leftBottom > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-leftTop > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-topRight > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}.ant-popover.ds-date-range-popover.ant-popover-placement-topLeft > .ant-popover-content > .ant-popover-arrow{background-color:", ";border-style:none;border-width:0;}"], function (props) {
44
- var _props$theme$palette, _props$arrowColor, _props$arrowColor2;
45
- return props.arrowColor ? (_props$theme$palette = props.theme.palette[((_props$arrowColor = props.arrowColor) == null ? void 0 : _props$arrowColor.bottomLeft) + "-050"]) != null ? _props$theme$palette : (_props$arrowColor2 = props.arrowColor) == null ? void 0 : _props$arrowColor2.bottomLeft : props.theme.palette.white;
46
- }, function (props) {
47
- var _props$theme$palette2, _props$arrowColor3, _props$arrowColor4;
48
- return props.arrowColor ? (_props$theme$palette2 = props.theme.palette[((_props$arrowColor3 = props.arrowColor) == null ? void 0 : _props$arrowColor3.bottomRight) + "-050"]) != null ? _props$theme$palette2 : (_props$arrowColor4 = props.arrowColor) == null ? void 0 : _props$arrowColor4.bottomRight : props.theme.palette.white;
49
- }, function (props) {
50
- var _props$theme$palette3, _props$arrowColor5, _props$arrowColor6;
51
- return props.arrowColor ? (_props$theme$palette3 = props.theme.palette[((_props$arrowColor5 = props.arrowColor) == null ? void 0 : _props$arrowColor5.rightTop) + "-050"]) != null ? _props$theme$palette3 : (_props$arrowColor6 = props.arrowColor) == null ? void 0 : _props$arrowColor6.rightTop : props.theme.palette.white;
52
- }, function (props) {
53
- var _props$theme$palette4, _props$arrowColor7, _props$arrowColor8;
54
- return props.arrowColor ? (_props$theme$palette4 = props.theme.palette[((_props$arrowColor7 = props.arrowColor) == null ? void 0 : _props$arrowColor7.rightBottom) + "-050"]) != null ? _props$theme$palette4 : (_props$arrowColor8 = props.arrowColor) == null ? void 0 : _props$arrowColor8.rightBottom : props.theme.palette.white;
55
- }, function (props) {
56
- var _props$theme$palette5, _props$arrowColor9, _props$arrowColor0;
57
- return props.arrowColor ? (_props$theme$palette5 = props.theme.palette[((_props$arrowColor9 = props.arrowColor) == null ? void 0 : _props$arrowColor9.leftBottom) + "-050"]) != null ? _props$theme$palette5 : (_props$arrowColor0 = props.arrowColor) == null ? void 0 : _props$arrowColor0.leftBottom : props.theme.palette.white;
58
- }, function (props) {
59
- var _props$theme$palette6, _props$arrowColor1, _props$arrowColor10;
60
- return props.arrowColor ? (_props$theme$palette6 = props.theme.palette[((_props$arrowColor1 = props.arrowColor) == null ? void 0 : _props$arrowColor1.leftTop) + "-050"]) != null ? _props$theme$palette6 : (_props$arrowColor10 = props.arrowColor) == null ? void 0 : _props$arrowColor10.leftTop : props.theme.palette.white;
61
- }, function (props) {
62
- var _props$theme$palette7, _props$arrowColor11, _props$arrowColor12;
63
- return props.arrowColor ? (_props$theme$palette7 = props.theme.palette[((_props$arrowColor11 = props.arrowColor) == null ? void 0 : _props$arrowColor11.topRight) + "-050"]) != null ? _props$theme$palette7 : (_props$arrowColor12 = props.arrowColor) == null ? void 0 : _props$arrowColor12.topRight : props.theme.palette['grey-050'];
64
- }, function (props) {
65
- var _props$theme$palette8, _props$arrowColor13, _props$arrowColor14;
66
- return props.arrowColor ? (_props$theme$palette8 = props.theme.palette[((_props$arrowColor13 = props.arrowColor) == null ? void 0 : _props$arrowColor13.topLeft) + "-050"]) != null ? _props$theme$palette8 : (_props$arrowColor14 = props.arrowColor) == null ? void 0 : _props$arrowColor14.topLeft : props.theme.palette['grey-050'];
67
- });
33
+ componentId: "sc-zmtbjf-5"
34
+ })([""]);
35
+ export var PickerTrigger = styled(PopoverTrigger).withConfig({
36
+ displayName: "DateRangePickerstyles__PickerTrigger",
37
+ componentId: "sc-zmtbjf-6"
38
+ })(["display:block;"]);
68
39
  export var OverlayContainer = styled.div.withConfig({
69
40
  displayName: "DateRangePickerstyles__OverlayContainer",
70
- componentId: "sc-zmtbjf-5"
41
+ componentId: "sc-zmtbjf-7"
71
42
  })(["display:", ";"], function (props) {
72
43
  return props.visible ? 'flex' : 'none';
73
44
  });
package/dist/DateRangePicker.types.d.ts CHANGED
@@ -1,7 +1,7 @@
1
- import { type PopoverProps } from 'antd/lib/popover';
2
1
  import { type ReactNode } from 'react';
3
2
  import { type IntlShape } from 'react-intl';
4
3
  import { type DateToFormatOptions } from '@synerise/ds-core';
4
+ import { type LegacyPlacement, type PopoverProps } from '@synerise/ds-popover';
5
5
  import { type Props as FooterProps } from './Footer/Footer.types';
6
6
  import { type FilterDefinition } from './RangeFilter/RangeFilter.types';
7
7
  import { type SavedFilter } from './RangeFilter/Shared/FilterDropdown/FilterDropdown.types';
@@ -9,17 +9,6 @@ import { type DateLimitMode, type RangeDisplayMode } from './RangeFilter/Shared/
9
9
  import { type RangeFilterType } from './RangeFilter/constants';
10
10
  import { type RangePickerInputProps } from './RangePickerInput/RangePickerInput.types';
11
11
  import { type DateFilter, type DateRange, type DateRangePreset, type RelativeUnits } from './date.types';
12
- export type CustomColorArrow = 'blue' | 'grey' | 'red' | 'green' | 'yellow' | 'pink' | 'mars' | 'orange' | 'fern' | 'cyan' | 'purple' | 'violet';
13
- export type AdditionalMapper = {
14
- topLeft: CustomColorArrow;
15
- topRight: CustomColorArrow;
16
- bottomLeft: CustomColorArrow;
17
- bottomRight: CustomColorArrow;
18
- leftTop: CustomColorArrow;
19
- leftBottom: CustomColorArrow;
20
- rightTop: CustomColorArrow;
21
- rightBottom: CustomColorArrow;
22
- };
23
12
  export type DateRangePickerProps = {
24
13
  /**
25
14
  * @deprecated use `valueFormatOptions` instead
@@ -45,8 +34,9 @@ export type DateRangePickerProps = {
45
34
  onApply: (value: Partial<DateFilter> | undefined) => void;
46
35
  onVisibleChange?: (visible: boolean) => void;
47
36
  onFilterSave?: (filters: SavedFilter[]) => void;
48
- popoverProps?: Partial<PopoverProps>;
37
+ popoverProps?: Partial<Omit<PopoverProps, 'placement'>>;
49
38
  popoverTrigger?: ReactNode;
39
+ placement?: LegacyPlacement;
50
40
  ranges?: DateRangePreset[];
51
41
  rangeUnits?: Array<RelativeUnits>;
52
42
  relativeFuture?: boolean;
@@ -69,7 +59,6 @@ export type DateRangePickerProps = {
69
59
  * transforms value, by default omits ALL_TIME props
70
60
  */
71
61
  valueTransformer?: (value: DateRange) => DateRange;
72
- arrowColor?: AdditionalMapper;
73
62
  disableAbsoluteTimepickerInRelative?: boolean;
74
63
  rangePickerInputProps?: Omit<RangePickerInputProps, 'disabled' | 'readOnly'> & {
75
64
  /**
package/dist/Footer/Footer.styles.d.ts CHANGED
@@ -1,33 +1,7 @@
1
+ import { type StyledButton } from '@synerise/ds-button';
1
2
  export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
2
3
  export declare const Actions: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const Range: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
4
- href: string;
5
- target?: string;
6
- onClick?: React.MouseEventHandler<HTMLElement>;
7
- } & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
8
- htmlType?: import("antd/lib/button/button").ButtonHTMLType;
9
- onClick?: React.MouseEventHandler<HTMLElement>;
10
- } & Omit<import("react").ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
11
- type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
12
- mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
13
- color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
14
- groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
15
- justifyContent?: string;
16
- loading?: boolean | {
17
- delay?: number;
18
- };
19
- onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
20
- iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
21
- error?: boolean;
22
- readOnly?: boolean;
23
- tagProps?: import("@synerise/ds-tag").TagProps;
24
- tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
25
- } & import("react").RefAttributes<HTMLButtonElement>> & {
26
- Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
27
- Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
28
- Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
29
- Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
30
- }, any, {}, never>;
4
+ export declare const Range: StyledButton;
31
5
  export declare const ActionsPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>;
32
6
  export declare const ChosenRange: import("styled-components").StyledComponent<"div", any, {}, never>;
33
7
  /**
package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.styles.d.ts CHANGED
@@ -1,89 +1,5 @@
1
- export declare const ContentItem: import("styled-components").StyledComponent<(({ onRemove, onUpdate, onDuplicate, draggable, dashed, item, greyBackground, changeOrderDisabled, texts, hideExpander, expanded, onExpand, selected, onSelect, headerSuffix, headerPrefix, contentWithoutPadding, onMoveTop, onMoveBottom, isFirst, isLast, size, dragHandleProps, isDragPlaceholder, isDragOverlay, ...rest }: import("@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem.types").ContentItemProps) => React.JSX.Element) & {
2
- AdditionalSuffix: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- ContentWrapper: import("styled-components").StyledComponent<"div", any, {
4
- withoutPadding: boolean;
5
- }, never>;
6
- DraggerWrapper: import("styled-components").StyledComponent<"div", any, {
7
- disabled: boolean;
8
- }, never>;
9
- DropdownTrigger: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<Partial<{
10
- href: string;
11
- target?: string;
12
- onClick?: React.MouseEventHandler<HTMLElement>;
13
- } & import("antd/lib/button/button").BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
14
- htmlType?: import("antd/lib/button/button").ButtonHTMLType;
15
- onClick?: React.MouseEventHandler<HTMLElement>;
16
- } & Omit<React.ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
17
- type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
18
- mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
19
- color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
20
- groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
21
- justifyContent?: string;
22
- loading?: boolean | {
23
- delay?: number;
24
- };
25
- onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
26
- iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
27
- error?: boolean;
28
- readOnly?: boolean;
29
- tagProps?: import("@synerise/ds-tag").TagProps;
30
- tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
31
- } & React.RefAttributes<HTMLButtonElement>> & {
32
- Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
33
- Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
34
- Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
35
- Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
36
- }, any, {}, never>;
37
- DropdownWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
38
- FilterDropdownTrigger: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Omit<Partial<{
39
- href: string;
40
- target?: string;
41
- onClick?: React.MouseEventHandler<HTMLElement>;
42
- } & import("antd/lib/button/button").BaseButtonProps & Omit<React.AnchorHTMLAttributes<any>, "type" | "onClick"> & {
43
- htmlType?: import("antd/lib/button/button").ButtonHTMLType;
44
- onClick?: React.MouseEventHandler<HTMLElement>;
45
- } & Omit<React.ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
46
- type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
47
- mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
48
- color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
49
- groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
50
- justifyContent?: string;
51
- loading?: boolean | {
52
- delay?: number;
53
- };
54
- onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
55
- iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
56
- error?: boolean;
57
- readOnly?: boolean;
58
- tagProps?: import("@synerise/ds-tag").TagProps;
59
- tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
60
- } & React.RefAttributes<HTMLButtonElement>> & {
61
- Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
62
- Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
63
- Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
64
- Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
65
- }, any, {}, never>;
66
- IconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
67
- ItemContainer: import("styled-components").StyledComponent<"div", any, {
68
- opened: boolean;
69
- selected?: boolean;
70
- greyBackground: boolean | undefined;
71
- size?: "default" | "large";
72
- dashed?: boolean;
73
- isDisabled?: boolean;
74
- isDragOverlay?: boolean;
75
- isDragPlaceholder?: boolean;
76
- }, never>;
77
- ItemHeader: import("styled-components").StyledComponent<"div", any, {
78
- hasPrefix: boolean;
79
- hasDescription: boolean;
80
- size?: "default" | "large";
81
- }, never>;
82
- ItemHeaderPrefix: import("styled-components").StyledComponent<"div", any, {}, never>;
83
- ItemHeaderSuffix: import("styled-components").StyledComponent<"div", any, {}, never>;
84
- MoveItemButtons: import("styled-components").StyledComponent<"div", any, {}, never>;
85
- ToggleContentWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
86
- }, any, {}, never>;
1
+ import { type StyledContentItem } from '@synerise/ds-manageable-list';
2
+ export declare const ContentItem: StyledContentItem;
87
3
  export declare const BadgeWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
88
4
  export declare const Title: import("styled-components").StyledComponent<"h3", any, {}, never>;
89
5
  export declare const SuffixText: import("styled-components").StyledComponent<"span", any, {}, never>;
package/dist/RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus.styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import styled from 'styled-components';
2
- import Button from '@synerise/ds-button';
2
+ import { Creator } from '@synerise/ds-button';
3
3
  import { ButtonLabel } from '@synerise/ds-button/dist/Button.styles';
4
4
  import DSContentItem from '@synerise/ds-manageable-list/dist/Item/ContentItem/ContentItem';
5
5
  export var ContentItem = styled(DSContentItem).withConfig({
@@ -22,7 +22,7 @@ export var SuffixText = styled.span.withConfig({
22
22
  })(["color:", ";font-weight:500;margin-right:16px;"], function (props) {
23
23
  return props.theme.palette['blue-600'];
24
24
  });
25
- export var CreatorButton = styled(Button.Creator).withConfig({
25
+ export var CreatorButton = styled(Creator).withConfig({
26
26
  displayName: "RangeFilterStatusstyles__CreatorButton",
27
27
  componentId: "sc-1ei851t-4"
28
28
  })(["", "{justify-content:flex-start;}"], ButtonLabel);
package/dist/RangeFilter/Shared/SaveFilterForm/SaveFilterForm.styles.d.ts CHANGED
@@ -1,30 +1,3 @@
1
- import { type ButtonProps } from '@synerise/ds-button';
1
+ import { type StyledButton } from '@synerise/ds-button';
2
2
  export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
3
- export declare const FormButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
4
- href: string;
5
- target?: string;
6
- onClick?: React.MouseEventHandler<HTMLElement>;
7
- } & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
8
- htmlType?: import("antd/lib/button/button").ButtonHTMLType;
9
- onClick?: React.MouseEventHandler<HTMLElement>;
10
- } & Omit<import("react").ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
11
- type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
12
- mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
13
- color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
14
- groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
15
- justifyContent?: string;
16
- loading?: boolean | {
17
- delay?: number;
18
- };
19
- onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
20
- iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
21
- error?: boolean;
22
- readOnly?: boolean;
23
- tagProps?: import("@synerise/ds-tag").TagProps;
24
- tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
25
- } & import("react").RefAttributes<HTMLButtonElement>> & {
26
- Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
27
- Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
28
- Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
29
- Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
30
- }, any, ButtonProps, never>;
3
+ export declare const FormButton: StyledButton;
package/dist/RangeFilter/Shared/TimeWindow/Day/Day.js CHANGED
@@ -65,7 +65,7 @@ var Day = function Day(_ref) {
65
65
  }), /*#__PURE__*/React.createElement(S.Content, null, /*#__PURE__*/React.createElement(React.Fragment, null, label)))), restricted && /*#__PURE__*/React.createElement(Tooltip, {
66
66
  trigger: ['hover'],
67
67
  title: texts.clear || 'Clear',
68
- onVisibleChange: handleTooltipVisibleChange,
68
+ onOpenChange: handleTooltipVisibleChange,
69
69
  getPopupContainer: getPopupContainer
70
70
  }, /*#__PURE__*/React.createElement(S.IconWrapper, {
71
71
  readonly: readOnly,
package/dist/RangePicker/RangePicker.styles.d.ts CHANGED
@@ -1,35 +1,8 @@
1
- import { type ButtonProps } from '@synerise/ds-button';
1
+ import { type StyledButton } from '@synerise/ds-button';
2
2
  export declare const Sides: import("styled-components").StyledComponent<"div", any, {}, never>;
3
3
  export declare const Side: import("styled-components").StyledComponent<"div", any, {
4
4
  mode: string;
5
5
  }, never>;
6
6
  export declare const PickerFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
7
7
  export declare const FooterSeparator: import("styled-components").StyledComponent<"div", any, {}, never>;
8
- export declare const DateTimeModeSwitch: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<Omit<Partial<{
9
- href: string;
10
- target?: string;
11
- onClick?: React.MouseEventHandler<HTMLElement>;
12
- } & import("antd/lib/button/button").BaseButtonProps & Omit<import("react").AnchorHTMLAttributes<any>, "type" | "onClick"> & {
13
- htmlType?: import("antd/lib/button/button").ButtonHTMLType;
14
- onClick?: React.MouseEventHandler<HTMLElement>;
15
- } & Omit<import("react").ButtonHTMLAttributes<any>, "type" | "onClick">>, "type" | "ghost"> & {
16
- type?: import("@synerise/ds-utils").LiteralStringUnion<import("@synerise/ds-button/dist/Button.types").ButtonType>;
17
- mode?: import("@synerise/ds-utils").LiteralStringUnion<"single-icon" | "split" | "two-icons" | "label-icon" | "icon-label">;
18
- color?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
19
- groupVariant?: import("@synerise/ds-utils").LiteralStringUnion<"left-rounded" | "squared" | "right-rounded">;
20
- justifyContent?: string;
21
- loading?: boolean | {
22
- delay?: number;
23
- };
24
- onClick?: (event: import("react").MouseEvent<HTMLElement>) => void;
25
- iconColor?: import("@synerise/ds-utils").LiteralStringUnion<"blue" | "grey" | "red" | "green" | "yellow" | "pink" | "mars" | "orange" | "fern" | "cyan" | "purple" | "violet">;
26
- error?: boolean;
27
- readOnly?: boolean;
28
- tagProps?: import("@synerise/ds-tag").TagProps;
29
- tooltipProps?: import("@synerise/ds-tooltip").TooltipProps;
30
- } & import("react").RefAttributes<HTMLButtonElement>> & {
31
- Creator: import("react").ForwardRefExoticComponent<Omit<import("@synerise/ds-button").CreatorProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
32
- Expander: ({ size, expanded, disabled, onClick, className, }: import("@synerise/ds-button").ExpanderProps) => import("react").JSX.Element;
33
- Star: (props: import("@synerise/ds-button").StarButtonProps) => React.ReactElement;
34
- Checkbox: (props: import("@synerise/ds-button").CheckboxButtonProps) => React.ReactElement;
35
- }, any, ButtonProps, never>;
8
+ export declare const DateTimeModeSwitch: StyledButton;
package/dist/RawDateRangePicker.d.ts CHANGED
@@ -2,8 +2,5 @@ import React from 'react';
2
2
  import type { DateRangePickerProps } from './DateRangePicker.types';
3
3
  import type { DateRange } from './date.types';
4
4
  export declare function defaultValueTransformer(value: DateRange): DateRange;
5
- type RawDateRangePickerProps = DateRangePickerProps & {
6
- alignContentToTop?: boolean;
7
- };
8
- export declare const RawDateRangePicker: ({ showRelativePicker, showFilter, showTime, format, valueFormatOptions, disabledDate, validate, forceAdjacentMonths, savedFilters, onFilterSave, containerClass, footerProps, allowedFilterTypes, disableAbsoluteTimepickerInRelative, filterValueSelectionModes, filterRangeDisplayMode, showNowButton, alignContentToTop, relativeFuture, relativePast, ranges, relativeModes, rangeUnits, showCustomRange, valueTransformer, onValueChange, isTruncateMs, forceAbsolute, onApply, texts, value, }: RawDateRangePickerProps) => React.JSX.Element;
5
+ export declare const RawDateRangePicker: ({ showRelativePicker, showFilter, showTime, format, valueFormatOptions, disabledDate, validate, forceAdjacentMonths, savedFilters, onFilterSave, containerClass, footerProps, allowedFilterTypes, disableAbsoluteTimepickerInRelative, filterValueSelectionModes, filterRangeDisplayMode, showNowButton, relativeFuture, relativePast, ranges, relativeModes, rangeUnits, showCustomRange, valueTransformer, onValueChange, isTruncateMs, forceAbsolute, onApply, texts, value, }: Omit<DateRangePickerProps, "placement">) => React.JSX.Element;
9
6
  export default RawDateRangePicker;
package/dist/RawDateRangePicker.js CHANGED
@@ -6,22 +6,21 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
6
6
  import { useIntl } from 'react-intl';
7
7
  import { legacyParse } from '@date-fns/upgrade/v2';
8
8
  import AddonCollapse from './AddonCollapse/AddonCollapse';
9
- import { Addon, Container, PopupWrapper, Separator } from './DateRangePicker.styles';
9
+ import { Addon, Container, DateRangePickerWrapper, Separator } from './DateRangePicker.styles';
10
10
  import Footer from './Footer/Footer';
11
11
  import RangeFilter from './RangeFilter/RangeFilter';
12
12
  import RangeFilterStatus from './RangeFilter/Shared/RangeFilterStatus/RangeFilterStatus';
13
13
  import RangePicker from './RangePicker/RangePicker';
14
14
  import { isLifetime } from './RelativeRangePicker/Elements/RangeDropdown/RangeDropdown';
15
15
  import RelativeRangePicker from './RelativeRangePicker/RelativeRangePicker';
16
- import { ABSOLUTE, ABSOLUTE_PRESETS, MODES, RELATIVE, RELATIVE_PRESETS } from './constants';
17
- import * as CONST from './constants';
16
+ import { ABSOLUTE, ABSOLUTE_PRESETS, ALL_TIME, CUSTOM_RANGE_KEY, MODES, RELATIVE, RELATIVE_PRESETS } from './constants';
18
17
  import relativeToAbsolute from './dateUtils/relativeToAbsolute';
19
18
  import { getDefaultTexts, normalizeRange, toIsoString } from './utils';
20
19
  var isRelative = function isRelative(dateRange) {
21
20
  var isLegacyCustom = Object.keys(dateRange).includes('key') && dateRange.key === undefined;
22
- return dateRange.key && (CONST.RELATIVE_PRESETS.map(function (preset) {
21
+ return dateRange.key && (RELATIVE_PRESETS.map(function (preset) {
23
22
  return preset.key;
24
- }).includes(dateRange.key) || dateRange.key === CONST.CUSTOM_RANGE_KEY) || isLegacyCustom;
23
+ }).includes(dateRange.key) || dateRange.key === CUSTOM_RANGE_KEY) || isLegacyCustom;
25
24
  };
26
25
  export function defaultValueTransformer(value) {
27
26
  var id = value.id,
@@ -92,7 +91,6 @@ export var RawDateRangePicker = function RawDateRangePicker(_ref) {
92
91
  filterRangeDisplayMode = _ref.filterRangeDisplayMode,
93
92
  _ref$showNowButton = _ref.showNowButton,
94
93
  showNowButton = _ref$showNowButton === void 0 ? true : _ref$showNowButton,
95
- alignContentToTop = _ref.alignContentToTop,
96
94
  relativeFuture = _ref.relativeFuture,
97
95
  _ref$relativePast = _ref.relativePast,
98
96
  relativePast = _ref$relativePast === void 0 ? true : _ref$relativePast,
@@ -146,7 +144,7 @@ export var RawDateRangePicker = function RawDateRangePicker(_ref) {
146
144
  newValue.to = fnsStartOfSecond(legacyParse(newValue.to));
147
145
  }
148
146
  }
149
- if ((newValue.type === 'RELATIVE' || newValue.key === CONST.ALL_TIME) && mode === MODES.TIME) {
147
+ if ((newValue.type === 'RELATIVE' || newValue.key === ALL_TIME) && mode === MODES.TIME) {
150
148
  setMode(MODES.DATE);
151
149
  }
152
150
  if (range != null && range.key) {
@@ -183,7 +181,7 @@ export var RawDateRangePicker = function RawDateRangePicker(_ref) {
183
181
  onApply && onApply(_extends({}, localValue, relativeToAbsolute(localValue)));
184
182
  return;
185
183
  }
186
- if (localValue.key === CONST.ALL_TIME) {
184
+ if (localValue.key === ALL_TIME) {
187
185
  onApply && onApply(omitBy(localValue, isUndefined));
188
186
  return;
189
187
  }
@@ -283,7 +281,7 @@ export var RawDateRangePicker = function RawDateRangePicker(_ref) {
283
281
  var isValidRelative = isRelative(localValue) && Boolean(localValue.offset && localValue.duration);
284
282
  var isValidSince = localValue.type === 'SINCE' && Boolean(localValue.offset && localValue.duration);
285
283
  // TODO apply ranges and find mapped lifetime here, this applies only for defaultValueTransformer
286
- var isValid = (isValidAbsolute || isValidRelative || isValidSince || key === CONST.ALL_TIME) && validator.valid;
284
+ var isValid = (isValidAbsolute || isValidRelative || isValidSince || key === ALL_TIME) && validator.valid;
287
285
  var canSwitchToTimePicker = isValid && !isLifetime(localValue) && (!disableAbsoluteTimepickerInRelative || localValue.type === 'ABSOLUTE');
288
286
  content = /*#__PURE__*/React.createElement(Container, {
289
287
  className: containerClass
@@ -320,11 +318,8 @@ export var RawDateRangePicker = function RawDateRangePicker(_ref) {
320
318
  valueFormatOptions: valueFormatOptions
321
319
  }, footerProps)));
322
320
  }
323
- return /*#__PURE__*/React.createElement(PopupWrapper, {
324
- "data-testid": "date-range-picker-container",
325
- alignContentToTop: alignContentToTop,
326
- hasFilter: showFilter,
327
- hasRelativePicker: showRelativePicker
321
+ return /*#__PURE__*/React.createElement(DateRangePickerWrapper, {
322
+ "data-testid": "date-range-picker-container"
328
323
  }, content);
329
324
  };
330
325
  export default RawDateRangePicker;
package/dist/RelativeRangePicker/RelativeRangePicker.styles.js CHANGED
@@ -8,9 +8,6 @@ import Button, { ButtonToggle } from '@synerise/ds-button';
8
8
  import { InputGroup } from '@synerise/ds-input';
9
9
  import { InputGroupItem } from '@synerise/ds-input/dist/InputGroup.styles';
10
10
  import ListItem from '@synerise/ds-list-item';
11
-
12
- // import 'antd/lib/input/style/index.css' // this style might be in imported scopes as we use input; not needed here, but worth to mention this
13
-
14
11
  export var Container = styled.div.withConfig({
15
12
  displayName: "RelativeRangePickerstyles__Container",
16
13
  componentId: "sc-17ul7sp-0"
package/dist/constants.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React from 'react';
2
+ import { type FlipConfig, type OffsetConfig, type ShiftConfig } from '@synerise/ds-popover';
2
3
  import { type AbsoluteDateRangePreset, type RangeKey, type RelativeDateRangePreset, type RelativeUnits } from './date.types';
3
4
  export declare const SECONDS = "SECONDS";
4
5
  export declare const MINUTES = "MINUTES";
@@ -46,3 +47,6 @@ export declare const COLUMNS: {
46
47
  LEFT: "left";
47
48
  RIGHT: "right";
48
49
  };
50
+ export declare const POPOVER_OFFSET_CONFIG: OffsetConfig;
51
+ export declare const POPOVER_FLIP_CONFIG: FlipConfig;
52
+ export declare const POPOVER_SHIFT_CONFIG: ShiftConfig;
package/dist/constants.js CHANGED
@@ -315,4 +315,15 @@ var RIGHT = 'right';
315
315
  export var COLUMNS = {
316
316
  LEFT: LEFT,
317
317
  RIGHT: RIGHT
318
+ };
319
+ export var POPOVER_OFFSET_CONFIG = {
320
+ mainAxis: 8
321
+ };
322
+ export var POPOVER_FLIP_CONFIG = {
323
+ crossAxis: true,
324
+ mainAxis: true
325
+ };
326
+ export var POPOVER_SHIFT_CONFIG = {
327
+ crossAxis: true,
328
+ mainAxis: true
318
329
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-date-range-picker",
3
- "version": "1.5.1",
3
+ "version": "1.6.0",
4
4
  "description": "Date-Range-Picker UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -36,25 +36,26 @@
36
36
  "types": "dist/index.d.ts",
37
37
  "dependencies": {
38
38
  "@date-fns/upgrade": "^1.0.3",
39
- "@synerise/ds-badge": "^1.0.32",
40
- "@synerise/ds-button": "^1.5.6",
41
- "@synerise/ds-button-group": "^1.1.31",
42
- "@synerise/ds-date-picker": "^1.3.12",
43
- "@synerise/ds-dropdown": "^1.1.12",
44
- "@synerise/ds-form-field": "^1.2.5",
45
- "@synerise/ds-icon": "^1.10.1",
46
- "@synerise/ds-inline-edit": "^1.1.12",
47
- "@synerise/ds-input": "^1.5.8",
48
- "@synerise/ds-input-number": "^1.2.23",
49
- "@synerise/ds-list-item": "^1.3.3",
50
- "@synerise/ds-manageable-list": "^1.6.12",
51
- "@synerise/ds-scrollbar": "^1.2.6",
52
- "@synerise/ds-select": "^1.3.8",
53
- "@synerise/ds-slider": "^1.1.1",
54
- "@synerise/ds-tag": "^1.4.6",
55
- "@synerise/ds-time-picker": "^1.2.12",
56
- "@synerise/ds-tooltip": "^1.3.6",
57
- "@synerise/ds-utils": "^1.5.4",
39
+ "@synerise/ds-badge": "^1.0.34",
40
+ "@synerise/ds-button": "^1.5.8",
41
+ "@synerise/ds-button-group": "^1.1.33",
42
+ "@synerise/ds-date-picker": "^1.3.14",
43
+ "@synerise/ds-dropdown": "^1.2.0",
44
+ "@synerise/ds-form-field": "^1.3.0",
45
+ "@synerise/ds-icon": "^1.11.1",
46
+ "@synerise/ds-inline-edit": "^1.1.14",
47
+ "@synerise/ds-input": "^1.6.0",
48
+ "@synerise/ds-input-number": "^1.2.25",
49
+ "@synerise/ds-list-item": "^1.4.0",
50
+ "@synerise/ds-manageable-list": "^1.7.0",
51
+ "@synerise/ds-popover": "^1.4.0",
52
+ "@synerise/ds-scrollbar": "^1.2.8",
53
+ "@synerise/ds-select": "^1.3.10",
54
+ "@synerise/ds-slider": "^1.1.3",
55
+ "@synerise/ds-tag": "^1.4.8",
56
+ "@synerise/ds-time-picker": "^1.2.14",
57
+ "@synerise/ds-tooltip": "^1.4.0",
58
+ "@synerise/ds-utils": "^1.6.0",
58
59
  "date-fns": "^2.16.1",
59
60
  "date-fns-tz": "1.1.4",
60
61
  "dayjs": "^1.8.35",
@@ -64,16 +65,15 @@
64
65
  "uuid": "^8.3.2"
65
66
  },
66
67
  "devDependencies": {
67
- "@testing-library/user-event": "14",
68
+ "@testing-library/user-event": "^14",
68
69
  "@types/lodash": "^4.17.20",
69
70
  "vitest": "4"
70
71
  },
71
72
  "peerDependencies": {
72
73
  "@synerise/ds-core": "*",
73
- "antd": "4.24.16",
74
74
  "react": ">=16.9.0 <= 18.3.1",
75
75
  "react-intl": ">=3.12.0 <= 6.8",
76
76
  "styled-components": "^5.3.3"
77
77
  },
78
- "gitHead": "e1a3b7417480ba1bbf0b68becf985dd2d5f5a924"
78
+ "gitHead": "ac8decd9736940735bf05198b24b3eeeb5900b18"
79
79
  }
package/dist/style/index.css DELETED
@@ -1 +0,0 @@
1
- .ant-popover{box-sizing:border-box;margin:0;padding:0;color:#6a7580;font-size:13px;font-variant:tabular-nums;line-height:1.38;list-style:none;font-feature-settings:'tnum';position:absolute;top:0;left:0;z-index:991030;max-width:100vw;font-weight:400;white-space:normal;text-align:left;cursor:auto;user-select:text}.ant-popover-content{position:relative}.ant-popover::after{position:absolute;background:rgba(255,255,255,.01);content:''}.ant-popover-hidden{display:none}.ant-popover-placement-top,.ant-popover-placement-topLeft,.ant-popover-placement-topRight{padding-bottom:9px}.ant-popover-placement-right,.ant-popover-placement-rightBottom,.ant-popover-placement-rightTop{padding-left:9px}.ant-popover-placement-bottom,.ant-popover-placement-bottomLeft,.ant-popover-placement-bottomRight{padding-top:9px}.ant-popover-placement-left,.ant-popover-placement-leftBottom,.ant-popover-placement-leftTop{padding-right:9px}.ant-popover-inner{background-color:#fff;background-clip:padding-box;border-radius:3px;box-shadow:0 2px 6px rgba(171,178,183,.12)}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.ant-popover-inner{box-shadow:0 2px 6px rgba(171,178,183,.12)}}.ant-popover-title{min-width:177px;min-height:32px;margin:0;padding:5px 16px 4px;color:#384350;font-weight:500;border-bottom:1px solid #e9edee}.ant-popover-inner-content{width:max-content;max-width:100%;padding:12px 16px;color:#6a7580}.ant-popover-message{display:flex;padding:4px 0 12px;color:#6a7580;font-size:13px}.ant-popover-message-icon{display:inline-block;margin-right:8px;color:#fab700;font-size:13px}.ant-popover-buttons{margin-bottom:4px;text-align:right}.ant-popover-buttons button:not(:first-child){margin-left:8px}.ant-popover-arrow{position:absolute;display:block;width:13.07106781px;height:13.07106781px;overflow:hidden;background:0 0;pointer-events:none}.ant-popover-arrow-content{--antd-arrow-background-color:#fff;position:absolute;top:0;right:0;bottom:0;left:0;display:block;width:5px;height:5px;margin:auto;content:'';pointer-events:auto;border-radius:0 0 2px;pointer-events:none}.ant-popover-arrow-content::before{position:absolute;top:-5px;left:-5px;width:15px;height:15px;background:var(--antd-arrow-background-color);background-repeat:no-repeat;background-position:-4px -4px;content:'';clip-path:inset(33% 33%);clip-path:path('M 3.5355339059327373 11.464466094067262 A 5 5 0 0 1 7.071067811865475 10 L 8 10 A 2 2 0 0 0 10 8 L 10 7.071067811865475 A 5 5 0 0 1 11.464466094067262 3.5355339059327373 L 10.464466094067262 3.5355339059327373 L 3.5355339059327373 10.464466094067262 Z')}.ant-popover-placement-top .ant-popover-arrow,.ant-popover-placement-topLeft .ant-popover-arrow,.ant-popover-placement-topRight .ant-popover-arrow{bottom:0;transform:translateY(100%)}.ant-popover-placement-top .ant-popover-arrow-content,.ant-popover-placement-topLeft .ant-popover-arrow-content,.ant-popover-placement-topRight .ant-popover-arrow-content{box-shadow:3px 3px 7px rgba(0,0,0,.07);transform:translateY(-6.53553391px) rotate(45deg)}.ant-popover-placement-top .ant-popover-arrow{left:50%;transform:translateY(100%) translateX(-50%)}.ant-popover-placement-topLeft .ant-popover-arrow{left:16px}.ant-popover-placement-topRight .ant-popover-arrow{right:16px}.ant-popover-placement-right .ant-popover-arrow,.ant-popover-placement-rightBottom .ant-popover-arrow,.ant-popover-placement-rightTop .ant-popover-arrow{left:0;transform:translateX(-100%)}.ant-popover-placement-right .ant-popover-arrow-content,.ant-popover-placement-rightBottom .ant-popover-arrow-content,.ant-popover-placement-rightTop .ant-popover-arrow-content{box-shadow:3px 3px 7px rgba(0,0,0,.07);transform:translateX(6.53553391px) rotate(135deg)}.ant-popover-placement-right .ant-popover-arrow{top:50%;transform:translateX(-100%) translateY(-50%)}.ant-popover-placement-rightTop .ant-popover-arrow{top:12px}.ant-popover-placement-rightBottom .ant-popover-arrow{bottom:12px}.ant-popover-placement-bottom .ant-popover-arrow,.ant-popover-placement-bottomLeft .ant-popover-arrow,.ant-popover-placement-bottomRight .ant-popover-arrow{top:0;transform:translateY(-100%)}.ant-popover-placement-bottom .ant-popover-arrow-content,.ant-popover-placement-bottomLeft .ant-popover-arrow-content,.ant-popover-placement-bottomRight .ant-popover-arrow-content{box-shadow:2px 2px 5px rgba(0,0,0,.06);transform:translateY(6.53553391px) rotate(-135deg)}.ant-popover-placement-bottom .ant-popover-arrow{left:50%;transform:translateY(-100%) translateX(-50%)}.ant-popover-placement-bottomLeft .ant-popover-arrow{left:16px}.ant-popover-placement-bottomRight .ant-popover-arrow{right:16px}.ant-popover-placement-left .ant-popover-arrow,.ant-popover-placement-leftBottom .ant-popover-arrow,.ant-popover-placement-leftTop .ant-popover-arrow{right:0;transform:translateX(100%)}.ant-popover-placement-left .ant-popover-arrow-content,.ant-popover-placement-leftBottom .ant-popover-arrow-content,.ant-popover-placement-leftTop .ant-popover-arrow-content{box-shadow:3px 3px 7px rgba(0,0,0,.07);transform:translateX(-6.53553391px) rotate(-45deg)}.ant-popover-placement-left .ant-popover-arrow{top:50%;transform:translateX(100%) translateY(-50%)}.ant-popover-placement-leftTop .ant-popover-arrow{top:12px}.ant-popover-placement-leftBottom .ant-popover-arrow{bottom:12px}.ant-popover-pink .ant-popover-inner{background-color:#eb2f96}.ant-popover-pink .ant-popover-arrow-content{background-color:#eb2f96}.ant-popover-magenta .ant-popover-inner{background-color:#eb2f96}.ant-popover-magenta .ant-popover-arrow-content{background-color:#eb2f96}.ant-popover-red .ant-popover-inner{background-color:#f5222d}.ant-popover-red .ant-popover-arrow-content{background-color:#f5222d}.ant-popover-volcano .ant-popover-inner{background-color:#fa541c}.ant-popover-volcano .ant-popover-arrow-content{background-color:#fa541c}.ant-popover-orange .ant-popover-inner{background-color:#fa8c16}.ant-popover-orange .ant-popover-arrow-content{background-color:#fa8c16}.ant-popover-yellow .ant-popover-inner{background-color:#fadb14}.ant-popover-yellow .ant-popover-arrow-content{background-color:#fadb14}.ant-popover-gold .ant-popover-inner{background-color:#faad14}.ant-popover-gold .ant-popover-arrow-content{background-color:#faad14}.ant-popover-cyan .ant-popover-inner{background-color:#13c2c2}.ant-popover-cyan .ant-popover-arrow-content{background-color:#13c2c2}.ant-popover-lime .ant-popover-inner{background-color:#a0d911}.ant-popover-lime .ant-popover-arrow-content{background-color:#a0d911}.ant-popover-green .ant-popover-inner{background-color:#52c41a}.ant-popover-green .ant-popover-arrow-content{background-color:#52c41a}.ant-popover-blue .ant-popover-inner{background-color:#1890ff}.ant-popover-blue .ant-popover-arrow-content{background-color:#1890ff}.ant-popover-geekblue .ant-popover-inner{background-color:#2f54eb}.ant-popover-geekblue .ant-popover-arrow-content{background-color:#2f54eb}.ant-popover-purple .ant-popover-inner{background-color:#722ed1}.ant-popover-purple .ant-popover-arrow-content{background-color:#722ed1}.ant-popover-rtl{direction:rtl;text-align:right}.ant-popover-rtl .ant-popover-message-icon{margin-right:0;margin-left:8px}.ant-popover-rtl .ant-popover-message-title{padding-left:16px}.ant-popover-rtl .ant-popover-buttons{text-align:left}.ant-popover-rtl .ant-popover-buttons button{margin-right:8px;margin-left:0}.ant-popover.ds-date-range-popover>.ant-popover-content>.ant-popover-inner{background:0 0;box-shadow:none}.ant-popover.ds-date-range-popover>.ant-popover-content>.ant-popover-inner>.ant-popover-inner-content{padding:0}.ant-popover.ds-date-range-popover,.ant-popover.ds-date-range-popover>.ant-popover-content,.ant-popover.ds-date-range-popover>.ant-popover-content>.ant-popover-inner,.ant-popover.ds-date-range-popover>.ant-popover-content>.ant-popover-inner>.ant-popover-inner-content{pointer-events:none}.ant-popover.ds-date-range-popover>.ant-popover-content>.ant-popover-arrow{display:none!important;visibility:hidden;pointer-events:none}