@elliemae/ds-datagrids 2.0.0-next.7 → 2.0.0-rc.2

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 (198) hide show
  1. package/cjs/DSDataGrid.js +246 -243
  2. package/cjs/DataGridImpl.js +16 -8
  3. package/cjs/PaginatedDataGrid.js +5 -0
  4. package/cjs/columns/IconColumn.js +19 -17
  5. package/cjs/columns/NumberColumn.js +2 -4
  6. package/cjs/components/BodyCell.js +17 -10
  7. package/cjs/components/BodyList.js +7 -0
  8. package/cjs/components/ColumnVisibilityMenuOption.js +10 -6
  9. package/cjs/components/ColumnsOptionsMenuSection.js +34 -28
  10. package/cjs/components/EmptyState.js +19 -17
  11. package/cjs/components/HeaderCell.js +14 -8
  12. package/cjs/components/List.js +5 -0
  13. package/cjs/components/ListItem.js +7 -0
  14. package/cjs/components/NoResults.js +5 -0
  15. package/cjs/components/RowsLoader.js +5 -4
  16. package/cjs/components/Table.js +5 -0
  17. package/cjs/components/TableBody.js +5 -0
  18. package/cjs/components/TableHeader.js +5 -0
  19. package/cjs/components/footer/addOptionalFooterComponents.js +5 -4
  20. package/cjs/components/header/PrimaryControls.js +20 -15
  21. package/cjs/components/header/addOptionalHeaderComponents.js +4 -3
  22. package/cjs/components/renderers/defaultClassedRenderers.js +33 -21
  23. package/cjs/plugins/body-header-scroll-sync/BodyHeaderScrollSyncPlugin.js +46 -35
  24. package/cjs/plugins/column-dnd/DndColumnsPlugin.js +9 -5
  25. package/cjs/plugins/column-dnd/decorateGridWithDndColumns.js +2 -3
  26. package/cjs/plugins/column-sizing/ColumnSizingPlugin.js +10 -8
  27. package/cjs/plugins/column-sizing/columnMeasurerTransformer.js +13 -6
  28. package/cjs/plugins/column-sizing/ext-points/decorateColumn.js +3 -3
  29. package/cjs/plugins/column-sizing/ext-points/getTableProps.js +22 -17
  30. package/cjs/plugins/column-sizing/useColumnSizeService.js +9 -0
  31. package/cjs/plugins/column-sizing/useStylesheetHelpers.js +56 -40
  32. package/cjs/plugins/column-sizing/utils.js +10 -6
  33. package/cjs/plugins/custom-cell-renderer/addCustomRendererToCell.js +9 -4
  34. package/cjs/plugins/custom-cell-renderer/getRendererComponent.js +20 -21
  35. package/cjs/plugins/editable/EditableComponents/ComboBox.js +7 -3
  36. package/cjs/plugins/editable/EditableComponents/TextBox.js +20 -14
  37. package/cjs/plugins/editable/EditablePlugin.js +15 -15
  38. package/cjs/plugins/editable/decorateEditable.js +18 -11
  39. package/cjs/plugins/editable/getEditorComponent.js +45 -34
  40. package/cjs/plugins/expandable-grid/ExpandableColumn.js +57 -50
  41. package/cjs/plugins/expandable-grid/ExpandablePlugin.js +37 -26
  42. package/cjs/plugins/expandable-grid/ExpandedRow.js +28 -18
  43. package/cjs/plugins/expandable-grid/ExpandedRowExtra.js +16 -10
  44. package/cjs/plugins/expandable-grid/useExpandGridState.js +3 -8
  45. package/cjs/plugins/export-data/ExportDataPlugin.js +23 -10
  46. package/cjs/plugins/filterable/FilterablePlugin.js +7 -6
  47. package/cjs/plugins/filterable/addFilterToColumn.js +5 -0
  48. package/cjs/plugins/filterable/components/FilterableHeader.js +35 -27
  49. package/cjs/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.js +38 -32
  50. package/cjs/plugins/filterable/components/filterable-menus/SingleDateFilterMenu.js +26 -22
  51. package/cjs/plugins/filterable/components/filterable-menus/SingleRangeSwitcherMenu.js +119 -154
  52. package/cjs/plugins/filterable/components/filterable-menus/TextFilterMenu.js +28 -20
  53. package/cjs/plugins/filterable/filterableFormatter.js +15 -10
  54. package/cjs/plugins/filterable/filtering-helper/filterRowsByQuery.js +16 -4
  55. package/cjs/plugins/filterable/filtering-helper/strategiesOperators.js +7 -4
  56. package/cjs/plugins/filterable/helper.js +16 -7
  57. package/cjs/plugins/filterable/useFilterableState.js +11 -5
  58. package/cjs/plugins/grouping-by/GroupingByPlugin.js +2 -0
  59. package/cjs/plugins/grouping-grid/GroupingPlugin.js +9 -0
  60. package/cjs/plugins/grouping-grid/walkStrategy.js +11 -9
  61. package/cjs/plugins/infinite-scrolling/InfiniteScrollPlugin.js +7 -1
  62. package/cjs/plugins/pagination/PaginationPlugin.js +9 -2
  63. package/cjs/plugins/pagination/components/Pagination.js +10 -9
  64. package/cjs/plugins/pagination/components/Paginator.js +8 -7
  65. package/cjs/plugins/pagination/components/PerPageDropdown.js +20 -13
  66. package/cjs/plugins/pagination/helper.js +10 -7
  67. package/cjs/plugins/pagination/usePaginationState.js +7 -3
  68. package/cjs/plugins/resizable/ResizablePlugin.js +5 -4
  69. package/cjs/plugins/resizable/decorateResizable.js +14 -8
  70. package/cjs/plugins/resizable/useResizeHandle.js +21 -16
  71. package/cjs/plugins/resizable/utils.js +8 -5
  72. package/cjs/plugins/row-dnd/DndRowsPlugin.js +23 -16
  73. package/cjs/plugins/selectable/SelectablePlugin.js +10 -8
  74. package/cjs/plugins/selectable/addSelectableColumn.js +24 -16
  75. package/cjs/plugins/selectable/helper.js +12 -3
  76. package/cjs/plugins/selectable/selectableFormatter.js +80 -71
  77. package/cjs/plugins/selectable/useSelectableState.js +24 -11
  78. package/cjs/plugins/sortable/SortablePlugin.js +8 -7
  79. package/cjs/plugins/sortable/sortHeaderFormatter.js +14 -15
  80. package/cjs/plugins/sortable/sortTree.js +13 -3
  81. package/cjs/plugins/sortable/sorter.js +151 -134
  82. package/cjs/plugins/sortable/useSortableState.js +7 -0
  83. package/cjs/plugins/toolbar/RowRenderer.js +7 -2
  84. package/cjs/plugins/toolbar/ToolbarTrigger.js +15 -10
  85. package/cjs/plugins/virtualization/AutoHeightList.js +10 -8
  86. package/cjs/plugins/virtualization/VirtualizationPlugin.js +32 -25
  87. package/cjs/plugins/virtualization/VirtualizedBody.js +18 -9
  88. package/cjs/plugins/virtualization/VirtualizedBodyRow.js +8 -7
  89. package/cjs/renders/CellWithAddons.js +20 -18
  90. package/cjs/renders/styled.js +3 -2
  91. package/cjs/utilities/getPluginsFromProps.js +5 -1
  92. package/cjs/utilities/getScrollbarSize.js +2 -1
  93. package/cjs/utilities/normalizeData.js +7 -1
  94. package/esm/DSDataGrid.js +246 -243
  95. package/esm/DataGridImpl.js +16 -8
  96. package/esm/PaginatedDataGrid.js +5 -0
  97. package/esm/columns/IconColumn.js +18 -16
  98. package/esm/columns/NumberColumn.js +2 -4
  99. package/esm/components/BodyCell.js +17 -10
  100. package/esm/components/BodyList.js +7 -0
  101. package/esm/components/ColumnVisibilityMenuOption.js +10 -6
  102. package/esm/components/ColumnsOptionsMenuSection.js +34 -28
  103. package/esm/components/EmptyState.js +18 -15
  104. package/esm/components/HeaderCell.js +14 -8
  105. package/esm/components/List.js +5 -0
  106. package/esm/components/ListItem.js +7 -0
  107. package/esm/components/NoResults.js +5 -0
  108. package/esm/components/RowsLoader.js +5 -4
  109. package/esm/components/Table.js +5 -0
  110. package/esm/components/TableBody.js +5 -0
  111. package/esm/components/TableHeader.js +5 -0
  112. package/esm/components/footer/addOptionalFooterComponents.js +5 -4
  113. package/esm/components/header/PrimaryControls.js +20 -14
  114. package/esm/components/header/addOptionalHeaderComponents.js +4 -3
  115. package/esm/components/renderers/defaultClassedRenderers.js +33 -21
  116. package/esm/plugins/body-header-scroll-sync/BodyHeaderScrollSyncPlugin.js +46 -35
  117. package/esm/plugins/column-dnd/DndColumnsPlugin.js +6 -2
  118. package/esm/plugins/column-dnd/decorateGridWithDndColumns.js +1 -1
  119. package/esm/plugins/column-sizing/ColumnSizingPlugin.js +9 -7
  120. package/esm/plugins/column-sizing/columnMeasurerTransformer.js +12 -5
  121. package/esm/plugins/column-sizing/ext-points/decorateColumn.js +1 -1
  122. package/esm/plugins/column-sizing/ext-points/getTableProps.js +21 -15
  123. package/esm/plugins/column-sizing/useColumnSizeService.js +9 -0
  124. package/esm/plugins/column-sizing/useStylesheetHelpers.js +54 -38
  125. package/esm/plugins/column-sizing/utils.js +8 -4
  126. package/esm/plugins/custom-cell-renderer/addCustomRendererToCell.js +6 -1
  127. package/esm/plugins/custom-cell-renderer/getRendererComponent.js +15 -11
  128. package/esm/plugins/editable/EditableComponents/ComboBox.js +6 -1
  129. package/esm/plugins/editable/EditableComponents/TextBox.js +19 -12
  130. package/esm/plugins/editable/EditablePlugin.js +13 -12
  131. package/esm/plugins/editable/decorateEditable.js +16 -8
  132. package/esm/plugins/editable/getEditorComponent.js +49 -38
  133. package/esm/plugins/expandable-grid/ExpandableColumn.js +56 -47
  134. package/esm/plugins/expandable-grid/ExpandablePlugin.js +33 -20
  135. package/esm/plugins/expandable-grid/ExpandedRow.js +27 -17
  136. package/esm/plugins/expandable-grid/ExpandedRowExtra.js +15 -9
  137. package/esm/plugins/expandable-grid/useExpandGridState.js +1 -2
  138. package/esm/plugins/export-data/ExportDataPlugin.js +22 -9
  139. package/esm/plugins/filterable/FilterablePlugin.js +5 -4
  140. package/esm/plugins/filterable/addFilterToColumn.js +5 -0
  141. package/esm/plugins/filterable/components/FilterableHeader.js +31 -22
  142. package/esm/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.js +38 -31
  143. package/esm/plugins/filterable/components/filterable-menus/SingleDateFilterMenu.js +26 -21
  144. package/esm/plugins/filterable/components/filterable-menus/SingleRangeSwitcherMenu.js +118 -152
  145. package/esm/plugins/filterable/components/filterable-menus/TextFilterMenu.js +27 -18
  146. package/esm/plugins/filterable/filterableFormatter.js +15 -10
  147. package/esm/plugins/filterable/filtering-helper/filterRowsByQuery.js +14 -2
  148. package/esm/plugins/filterable/filtering-helper/strategiesOperators.js +7 -4
  149. package/esm/plugins/filterable/helper.js +10 -1
  150. package/esm/plugins/filterable/useFilterableState.js +11 -5
  151. package/esm/plugins/grouping-by/GroupingByPlugin.js +2 -0
  152. package/esm/plugins/grouping-grid/GroupingPlugin.js +9 -0
  153. package/esm/plugins/grouping-grid/walkStrategy.js +11 -9
  154. package/esm/plugins/infinite-scrolling/InfiniteScrollPlugin.js +7 -1
  155. package/esm/plugins/pagination/PaginationPlugin.js +8 -1
  156. package/esm/plugins/pagination/components/Pagination.js +10 -9
  157. package/esm/plugins/pagination/components/Paginator.js +8 -7
  158. package/esm/plugins/pagination/components/PerPageDropdown.js +17 -9
  159. package/esm/plugins/pagination/helper.js +10 -7
  160. package/esm/plugins/pagination/usePaginationState.js +6 -1
  161. package/esm/plugins/resizable/ResizablePlugin.js +4 -3
  162. package/esm/plugins/resizable/decorateResizable.js +14 -8
  163. package/esm/plugins/resizable/useResizeHandle.js +21 -16
  164. package/esm/plugins/resizable/utils.js +6 -3
  165. package/esm/plugins/row-dnd/DndRowsPlugin.js +21 -13
  166. package/esm/plugins/selectable/SelectablePlugin.js +9 -7
  167. package/esm/plugins/selectable/addSelectableColumn.js +24 -16
  168. package/esm/plugins/selectable/helper.js +10 -1
  169. package/esm/plugins/selectable/selectableFormatter.js +79 -68
  170. package/esm/plugins/selectable/useSelectableState.js +19 -5
  171. package/esm/plugins/sortable/SortablePlugin.js +5 -4
  172. package/esm/plugins/sortable/sortHeaderFormatter.js +12 -11
  173. package/esm/plugins/sortable/sortTree.js +13 -3
  174. package/esm/plugins/sortable/sorter.js +151 -134
  175. package/esm/plugins/sortable/useSortableState.js +7 -0
  176. package/esm/plugins/toolbar/RowRenderer.js +6 -1
  177. package/esm/plugins/toolbar/ToolbarTrigger.js +14 -8
  178. package/esm/plugins/virtualization/AutoHeightList.js +6 -3
  179. package/esm/plugins/virtualization/VirtualizationPlugin.js +31 -24
  180. package/esm/plugins/virtualization/VirtualizedBody.js +14 -5
  181. package/esm/plugins/virtualization/VirtualizedBodyRow.js +8 -7
  182. package/esm/renders/CellWithAddons.js +15 -14
  183. package/esm/renders/styled.js +1 -1
  184. package/esm/utilities/getPluginsFromProps.js +5 -1
  185. package/esm/utilities/getScrollbarSize.js +2 -1
  186. package/esm/utilities/normalizeData.js +7 -1
  187. package/package.json +19 -18
  188. package/types/components/BodyCell.d.ts +1 -1
  189. package/types/components/HeaderCell.d.ts +1 -1
  190. package/types/plugins/column-sizing/columnMeasurerTransformer.d.ts +1 -1
  191. package/types/plugins/column-sizing/ext-points/getTableProps.d.ts +1 -1
  192. package/types/plugins/expandable-grid/ExpandedRowExtra.d.ts +1 -1
  193. package/types/plugins/expandable-grid/useExpandGridState.d.ts +4 -4
  194. package/types/plugins/filterable/components/filterable-menus/DateRangeFilterMenu.d.ts +1 -1
  195. package/types/plugins/filterable/components/filterable-menus/SingleDateFilterMenu.d.ts +1 -1
  196. package/types/plugins/filterable/components/filterable-menus/TextFilterMenu.d.ts +1 -1
  197. package/types/plugins/filterable/helper.d.ts +15 -3
  198. package/types/plugins/pagination/components/PerPageDropdown.d.ts +1 -1
@@ -2,22 +2,23 @@ import _jsx from '@babel/runtime/helpers/esm/jsx';
2
2
  import 'core-js/modules/web.dom-collections.iterator.js';
3
3
  import { useState, useEffect } from 'react';
4
4
  import { DSControlledDateRangePicker } from '@elliemae/ds-controlled-form';
5
- import DSPopper, { PopperPositions } from '@elliemae/ds-basic/Popper';
6
- import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
7
- import DSButton from '@elliemae/ds-basic/Button';
5
+ import DSPopper, { PopperPositions } from '@elliemae/ds-popper';
6
+ import { DatePicker2 } from '@elliemae/ds-icons';
7
+ import DSButton from '@elliemae/ds-button';
8
8
  import moment from 'moment';
9
9
  import { aggregatedClasses } from '@elliemae/ds-classnames';
10
10
  import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
11
11
 
12
- var _DatePickerIcon;
12
+ var _DatePicker;
13
13
  const blockname = 'date-range';
14
14
  const Wrapper = aggregatedClasses('div')(blockname, 'wrapper');
15
15
  const Header = aggregatedClasses('div')(blockname, 'header'); // const randomString = (maxLength = 5) => Math.random().toString(36).slice(-maxLength);
16
16
 
17
- const DateRangePickerContainer = ({
18
- onChange = () => null,
19
- showHeader
20
- }) => {
17
+ const DateRangePickerContainer = _ref => {
18
+ let {
19
+ onChange = () => null,
20
+ showHeader
21
+ } = _ref;
21
22
  const [startDate, setStartDate] = useState('');
22
23
  const [endDate, setEndDate] = useState(''); // For some reason it worked like this
23
24
 
@@ -36,10 +37,12 @@ const DateRangePickerContainer = ({
36
37
  }, [startDate, endDate, lastChangeWasPicker]);
37
38
  return /*#__PURE__*/_jsx(Wrapper, {
38
39
  "data-testid": "date-range__wrapper",
40
+ onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true),
39
41
  style: {
40
- width: '262px'
41
- },
42
- onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true)
42
+ backgroundColor: 'white',
43
+ boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',
44
+ width: '261px'
45
+ }
43
46
  }, void 0, showHeader && /*#__PURE__*/_jsx(Header, {
44
47
  style: {
45
48
  padding: '8px',
@@ -73,35 +76,39 @@ const DateRangePickerContainer = ({
73
76
  }));
74
77
  };
75
78
 
76
- const formatRangeDate = ({
77
- startDate,
78
- endDate
79
- }, format = DEFAULT_DATE_FORMAT) => {
79
+ const formatRangeDate = function (_ref2) {
80
+ let {
81
+ startDate,
82
+ endDate
83
+ } = _ref2;
84
+ let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
80
85
  const sameDay = startDate.isSame(endDate, 'day');
81
86
  if (sameDay) return "".concat(endDate.format(format));
82
87
  return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
83
88
  };
84
89
 
85
- function DateRangeFilterMenu({
86
- column,
87
- className,
88
- isMenuOpened = false,
89
- onOpenMenu = () => null,
90
- placement = PopperPositions.BOTTOM_END,
91
- onAddFilter = () => null,
92
- dateFormatter = formatRangeDate,
93
- showHeader = true,
94
- menuProps
95
- }) {
90
+ function DateRangeFilterMenu(_ref3) {
91
+ let {
92
+ column,
93
+ className,
94
+ isMenuOpened = false,
95
+ onOpenMenu = () => null,
96
+ placement = PopperPositions.BOTTOM_END,
97
+ onAddFilter = () => null,
98
+ dateFormatter = formatRangeDate,
99
+ showHeader = true,
100
+ menuProps
101
+ } = _ref3;
96
102
  return /*#__PURE__*/_jsx(DSPopper, {
97
103
  contentComponent: /*#__PURE__*/_jsx("div", {
98
104
  className: className
99
105
  }, void 0, /*#__PURE__*/_jsx(DateRangePickerContainer, {
100
106
  minimumNights: 0,
101
- onChange: ({
102
- startDate,
103
- endDate
104
- }) => {
107
+ onChange: _ref4 => {
108
+ let {
109
+ startDate,
110
+ endDate
111
+ } = _ref4;
105
112
  startDate.startOf('day');
106
113
  endDate.endOf('day');
107
114
  onAddFilter({
@@ -130,7 +137,7 @@ function DateRangeFilterMenu({
130
137
  showArrow: false,
131
138
  triggerComponent: /*#__PURE__*/_jsx(DSButton, {
132
139
  buttonType: "text",
133
- icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx(DatePickerIcon, {})),
140
+ icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
134
141
  onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
135
142
  size: "s"
136
143
  }),
@@ -3,18 +3,19 @@ import 'core-js/modules/web.dom-collections.iterator.js';
3
3
  import { useState, useCallback } from 'react';
4
4
  import Grid from '@elliemae/ds-grid';
5
5
  import { DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
6
- import DSPopper, { PopperPositions } from '@elliemae/ds-basic/Popper';
7
- import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
8
- import DSButton from '@elliemae/ds-basic/Button';
6
+ import DSPopper, { PopperPositions } from '@elliemae/ds-popper';
7
+ import { DatePicker2 } from '@elliemae/ds-icons';
8
+ import DSButton from '@elliemae/ds-button';
9
9
  import moment from 'moment';
10
10
  import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
11
11
 
12
- var _DatePickerIcon;
12
+ var _DatePicker;
13
13
 
14
- const SingleDatePickerContainer = ({
15
- onChange = () => null,
16
- showHeader
17
- }) => {
14
+ const SingleDatePickerContainer = _ref => {
15
+ let {
16
+ onChange = () => null,
17
+ showHeader
18
+ } = _ref;
18
19
  const [date, setDate] = useState('');
19
20
  const handleDateChange = useCallback(data => {
20
21
  if (!data.includes('_')) onChange(moment(data));
@@ -38,19 +39,23 @@ const SingleDatePickerContainer = ({
38
39
  }));
39
40
  };
40
41
 
41
- const formatDate = (date, format = DEFAULT_DATE_FORMAT) => date.format(format);
42
+ const formatDate = function (date) {
43
+ let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
44
+ return date.format(format);
45
+ };
42
46
 
43
- function SingleDateFilterMenu({
44
- column,
45
- className,
46
- isMenuOpened = false,
47
- onOpenMenu = () => null,
48
- placement = PopperPositions.BOTTOM_END,
49
- onAddFilter = () => null,
50
- dateFormatter = formatDate,
51
- showHeader = false,
52
- menuProps
53
- }) {
47
+ function SingleDateFilterMenu(_ref2) {
48
+ let {
49
+ column,
50
+ className,
51
+ isMenuOpened = false,
52
+ onOpenMenu = () => null,
53
+ placement = PopperPositions.BOTTOM_END,
54
+ onAddFilter = () => null,
55
+ dateFormatter = formatDate,
56
+ showHeader = false,
57
+ menuProps
58
+ } = _ref2;
54
59
  return /*#__PURE__*/_jsx(DSPopper, {
55
60
  contentComponent: /*#__PURE__*/_jsx("div", {
56
61
  className: className,
@@ -81,7 +86,7 @@ function SingleDateFilterMenu({
81
86
  showArrow: false,
82
87
  triggerComponent: /*#__PURE__*/_jsx(DSButton, {
83
88
  buttonType: "text",
84
- icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx(DatePickerIcon, {})),
89
+ icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
85
90
  onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
86
91
  size: "s"
87
92
  }),
@@ -1,185 +1,151 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
3
- import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
2
  import 'core-js/modules/web.dom-collections.iterator.js';
5
- import { useState, useCallback } from 'react';
6
- import { DayPickerRangeController } from '@elliemae/ds-date-range-picker';
7
- import { SingleRangeDateSwitcher, DSDatePickerController } from '@elliemae/ds-date-picker';
3
+ import { useState, useEffect } from 'react';
4
+ import { DSControlledCheckbox, DSControlledDateRangePicker, DSControlledDateTimePicker } from '@elliemae/ds-controlled-form';
8
5
  import DSPopper, { PopperPositions } from '@elliemae/ds-basic/Popper';
9
- import DatePickerIcon from '@elliemae/ds-icons/DatePicker2';
6
+ import { DatePicker2 } from '@elliemae/ds-icons';
10
7
  import DSButton from '@elliemae/ds-basic/Button';
8
+ import Grid from '@elliemae/ds-grid';
11
9
  import moment from 'moment';
12
- import { aggregatedClasses } from '@elliemae/ds-classnames';
10
+ import styled from 'styled-components';
13
11
  import { DEFAULT_DATE_FORMAT } from './defaultDateFormat.js';
14
- import { jsx } from 'react/jsx-runtime';
15
12
 
16
- var _DatePickerIcon;
13
+ var _DatePicker;
14
+ const StyledGridWrapper = /*#__PURE__*/styled(Grid).withConfig({
15
+ componentId: "sc-jay5xg-0"
16
+ })([".notCurrentMonth{opacity:", ";pointer-events:", ";}"], props => props.enableOutsideDays ? '1' : '0', props => props.enableOutsideDays ? 'auto' : 'none'); // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
17
17
 
18
- const _excluded = ["onChange", "enableOutsideDays"];
19
-
20
- 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; }
21
-
22
- 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; }
23
- const START_DATE = 'startDate';
24
- const END_DATE = 'endDate';
25
- const blockname = 'date-range';
26
- const Wrapper = aggregatedClasses('div')(blockname, 'wrapper'); // eslint-disable-next-line @typescript-eslint/no-unused-vars, @typescript-eslint/no-empty-function
27
-
28
- const noop = (...args) => {};
18
+ const noop = function () {};
29
19
 
30
20
  const SingleRangeSwitcherContainer = _ref => {
31
21
  let {
32
22
  onChange = noop,
33
23
  enableOutsideDays
34
- } = _ref,
35
- otherProps = _objectWithoutProperties(_ref, _excluded);
24
+ } = _ref;
25
+ const [startDate, setStartDate] = useState('');
26
+ const [endDate, setEndDate] = useState(''); // For some reason it worked like this
36
27
 
37
- const [focusedInputHeader, setFocusedInputHeader] = useState(START_DATE);
38
- const [focusedInputPicker, setFocusedInputPicker] = useState(START_DATE);
39
- const [singleDate, setSingleDate] = useState();
40
- const [dateRange, setDateRange] = useState({});
28
+ const [lastChangeWasPicker, setLastChangeWasPicker] = useState(false);
41
29
  const [isDateRange, setIsDateRange] = useState(false);
42
- const [pickerRange, setPickerRange] = useState({});
43
-
44
- const handleHeaderFocusChange = inputType => {
45
- setFocusedInputHeader(inputType);
46
- };
47
-
48
- const handlePickerFocusChange = () => {
49
- setFocusedInputPicker(focusedInputPicker === START_DATE ? END_DATE : START_DATE);
50
- };
51
-
52
- const handleDatesChange = dates => {
53
- if (dates.endDate) {
54
- setTimeout(() => {
55
- onChange({
56
- startDate: dates.startDate,
57
- endDate: dates.endDate.endOf('day')
58
- });
59
- }, 500);
30
+ useEffect(() => {
31
+ const startMoment = moment(startDate);
32
+ const endMoment = moment(endDate);
33
+
34
+ if (lastChangeWasPicker && startDate && !startDate.includes('_') && endDate && !endDate.includes('_') && endMoment.diff(startMoment) >= 0) {
35
+ onChange({
36
+ startDate: startMoment,
37
+ endDate: endMoment
38
+ });
39
+ } // eslint-disable-next-line react-hooks/exhaustive-deps
40
+
41
+ }, [startDate, endDate, lastChangeWasPicker]);
42
+ return /*#__PURE__*/_jsx(StyledGridWrapper, {
43
+ "data-testid": "date-single-range__wrapper",
44
+ style: {
45
+ backgroundColor: 'white',
46
+ boxShadow: '0 6px 20px 0 rgb(0 0 0 / 24%)',
47
+ width: '261px',
48
+ display: 'grid',
49
+ justifyContent: 'center'
50
+ },
51
+ cols: ['100%'],
52
+ enableOutsideDays: enableOutsideDays,
53
+ onKeyDown: e => e.code === 'Enter' && setLastChangeWasPicker(true)
54
+ }, void 0, /*#__PURE__*/_jsx(Grid, {
55
+ gutter: "xxs",
56
+ alignItems: "center",
57
+ p: "xxs"
58
+ }, void 0, /*#__PURE__*/_jsx(DSControlledCheckbox, {
59
+ checked: isDateRange,
60
+ name: "Date range",
61
+ label: "Range",
62
+ id: "date-range-switcher-id-internal",
63
+ onChange: () => {
64
+ setIsDateRange(!isDateRange);
65
+ setStartDate('');
66
+ setEndDate('');
60
67
  }
61
-
62
- setPickerRange({
63
- startDate: dates.startDate,
64
- endDate: dateRange.endDate
65
- });
66
- setDateRange(dates);
67
- };
68
-
69
- const handlePickerChange = dates => {
70
- if (dates.endDate) {
71
- setTimeout(() => {
72
- onChange({
73
- startDate: dates.startDate,
74
- endDate: dates.endDate
75
- });
76
- }, 500);
68
+ }), /*#__PURE__*/_jsx("div", {
69
+ style: {
70
+ width: 'fit-content'
77
71
  }
78
-
79
- if (dates.startDate) handleHeaderFocusChange(undefined);
80
- setPickerRange(dates);
81
- setDateRange(dates);
82
- };
83
-
84
- const handleSingleDateChange = useCallback(date => {
85
- const dates = {
86
- startDate: moment(date).startOf('day'),
87
- endDate: moment(date).endOf('day')
88
- };
89
- onChange(dates);
90
- setSingleDate(dates);
91
- }, [onChange]);
92
-
93
- const handleStartInputChange = newDate => {
94
- setDateRange({
95
- startDate: newDate,
96
- endDate: dateRange.endDate
97
- });
98
- setPickerRange(_objectSpread(_objectSpread({}, pickerRange), {}, {
99
- startDate: newDate
100
- }));
101
- };
102
-
103
- const handleEndInputChange = newDate => {
104
- setDateRange({
105
- startDate: dateRange.startDate,
106
- endDate: newDate
107
- });
108
- setPickerRange(_objectSpread(_objectSpread({}, pickerRange), {}, {
109
- endDate: newDate
110
- }));
111
- };
112
-
113
- const dateRangeController = /*#__PURE__*/jsx(DayPickerRangeController, _objectSpread(_objectSpread({}, otherProps), {}, {
114
- enableOutsideDays: enableOutsideDays,
115
- endDate: pickerRange.endDate,
116
- focusedInput: focusedInputPicker,
117
- hideKeyboardShortcutsPanel: true,
118
- onDatesChange: handlePickerChange,
119
- onFocusChange: handlePickerFocusChange,
120
- startDate: pickerRange.startDate
121
- }));
122
-
123
- const singleDateController = /*#__PURE__*/_jsx(DSDatePickerController, {
124
- date: singleDate,
125
- enableOutsideDays: enableOutsideDays,
126
- onDateChange: handleSingleDateChange
127
- });
128
-
129
- return /*#__PURE__*/_jsx(Wrapper, {
130
- "data-testid": "date-single-range__wrapper"
131
- }, void 0, /*#__PURE__*/_jsx(SingleRangeDateSwitcher, {
132
- isDateRange: isDateRange,
133
- focusedInput: focusedInputHeader,
134
- onFocusChange: handleHeaderFocusChange,
135
- onEndInputChange: handleEndInputChange,
136
- onSingleInputChange: handleSingleDateChange,
137
- onStartInputChange: handleStartInputChange,
138
- selectedEndDate: dateRange.endDate,
139
- selectedSingleDate: singleDate,
140
- selectedStartDate: dateRange.startDate,
141
- setIsDateRange: ({
142
- target: {
143
- checked
144
- }
145
- }) => {
146
- setIsDateRange(checked);
72
+ }, void 0, isDateRange ? /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
73
+ fromDate: startDate,
74
+ onFromDateChange: _start => {
75
+ setStartDate(_start);
76
+ setLastChangeWasPicker(false);
147
77
  },
148
- handleDatesChange: handleDatesChange
149
- }), isDateRange ? dateRangeController : singleDateController);
78
+ toDate: endDate,
79
+ onToDateChange: _end => {
80
+ setEndDate(_end);
81
+ setLastChangeWasPicker(false);
82
+ },
83
+ type: "date-range-inputs"
84
+ }) : /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
85
+ date: startDate,
86
+ onDateChange: _date => {
87
+ setLastChangeWasPicker(false);
88
+ setStartDate(_date);
89
+ setEndDate(_date);
90
+ },
91
+ type: "date-inputs"
92
+ }))), /*#__PURE__*/_jsx(Grid, {}, void 0, isDateRange ? /*#__PURE__*/_jsx(DSControlledDateRangePicker, {
93
+ fromDate: startDate,
94
+ onFromDateChange: _start => {
95
+ setStartDate(_start);
96
+ setLastChangeWasPicker(true);
97
+ },
98
+ toDate: endDate,
99
+ onToDateChange: _end => {
100
+ setEndDate(_end);
101
+ setLastChangeWasPicker(true);
102
+ },
103
+ type: "date-range-picker-controller-only"
104
+ }) : /*#__PURE__*/_jsx(DSControlledDateTimePicker, {
105
+ date: startDate,
106
+ onDateChange: _date => {
107
+ setLastChangeWasPicker(true);
108
+ setStartDate(_date);
109
+ setEndDate(_date);
110
+ },
111
+ type: "date-picker-controller-only"
112
+ })));
150
113
  };
151
114
 
152
- const formatRangeDate = ({
153
- startDate,
154
- endDate
155
- }, format = DEFAULT_DATE_FORMAT) => {
115
+ const formatRangeDate = function (_ref2) {
116
+ let {
117
+ startDate,
118
+ endDate
119
+ } = _ref2;
120
+ let format = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_DATE_FORMAT;
156
121
  const sameDay = startDate.isSame(endDate, 'day');
157
122
  if (sameDay) return "".concat(endDate.format(format));
158
123
  return "".concat(startDate.format(format), " - ").concat(endDate.format(format));
159
124
  }; // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
160
125
 
161
126
 
162
- function SingleRangeSwitcherMenu({
163
- column,
164
- className,
165
- isMenuOpened = false,
166
- onOpenMenu = noop,
167
- placement = PopperPositions.BOTTOM_END,
168
- onAddFilter = noop,
169
- dateFormatter = formatRangeDate,
170
- enableOutsideDays = true,
171
- menuProps
172
- }) {
127
+ function SingleRangeSwitcherMenu(_ref3) {
128
+ let {
129
+ column,
130
+ className,
131
+ isMenuOpened = false,
132
+ onOpenMenu = noop,
133
+ placement = PopperPositions.BOTTOM_END,
134
+ onAddFilter = noop,
135
+ dateFormatter = formatRangeDate,
136
+ enableOutsideDays = true,
137
+ menuProps
138
+ } = _ref3;
173
139
  return /*#__PURE__*/_jsx(DSPopper, {
174
140
  contentComponent: /*#__PURE__*/_jsx("div", {
175
141
  className: className
176
142
  }, void 0, /*#__PURE__*/_jsx(SingleRangeSwitcherContainer, {
177
143
  enableOutsideDays: enableOutsideDays,
178
- minimumNights: 0,
179
- onChange: ({
180
- startDate,
181
- endDate
182
- }) => {
144
+ onChange: _ref4 => {
145
+ let {
146
+ startDate,
147
+ endDate
148
+ } = _ref4;
183
149
  startDate.startOf('day');
184
150
  endDate.endOf('day');
185
151
  onAddFilter({
@@ -207,7 +173,7 @@ function SingleRangeSwitcherMenu({
207
173
  showArrow: false,
208
174
  triggerComponent: /*#__PURE__*/_jsx(DSButton, {
209
175
  buttonType: "text",
210
- icon: _DatePickerIcon || (_DatePickerIcon = /*#__PURE__*/_jsx(DatePickerIcon, {})),
176
+ icon: _DatePicker || (_DatePicker = /*#__PURE__*/_jsx(DatePicker2, {})),
211
177
  onClick: () => !isMenuOpened ? onOpenMenu(true) : onOpenMenu(false),
212
178
  size: "s"
213
179
  }),
@@ -1,14 +1,21 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
2
  import _jsx from '@babel/runtime/helpers/esm/jsx';
3
3
  import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
4
+ import 'core-js/modules/esnext.async-iterator.map.js';
5
+ import 'core-js/modules/esnext.iterator.map.js';
6
+ import 'core-js/modules/esnext.async-iterator.filter.js';
7
+ import 'core-js/modules/esnext.iterator.constructor.js';
8
+ import 'core-js/modules/esnext.iterator.filter.js';
4
9
  import 'core-js/modules/web.dom-collections.iterator.js';
10
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
11
+ import 'core-js/modules/esnext.iterator.for-each.js';
5
12
  import React, { useState } from 'react';
6
13
  import { compact } from 'lodash';
7
14
  import DSDropdownMenu from '@elliemae/ds-dropdownmenu';
8
- import DSButton from '@elliemae/ds-basic/Button';
9
- import { PopperPositions } from '@elliemae/ds-basic/Popper';
15
+ import DSButton from '@elliemae/ds-button';
16
+ import { PopperPositions } from '@elliemae/ds-popper';
10
17
  import { Menu, MenuCombobox } from '@elliemae/ds-menu';
11
- import SearchSmall from '@elliemae/ds-icons/SearchSmall';
18
+ import { SearchSmall } from '@elliemae/ds-icons';
12
19
  import { jsx } from 'react/jsx-runtime';
13
20
 
14
21
  var _SearchSmall;
@@ -19,21 +26,23 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
19
26
 
20
27
  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; }
21
28
 
22
- function TextFilterMenu({
23
- column,
24
- menuStyle = {},
25
- className,
26
- filters = [],
27
- isMenuOpened = false,
28
- onOpenMenu = () => null,
29
- onClose = () => null,
30
- placement = PopperPositions.BOTTOM_END,
31
- menuProps = {},
32
- onAddFilter = () => null,
33
- onRemoveFilter = () => null,
34
- maxOptions = 10,
35
- isMulti = false
36
- }) {
29
+ function TextFilterMenu(_ref) {
30
+ let {
31
+ column,
32
+ menuStyle = {},
33
+ className,
34
+ filters = [],
35
+ isMenuOpened = false,
36
+ onOpenMenu = () => null,
37
+ onClose = () => null,
38
+ placement = PopperPositions.BOTTOM_END,
39
+ menuProps = {},
40
+ onAddFilter = () => null,
41
+ onRemoveFilter = () => null,
42
+ maxOptions = 10,
43
+ isMulti = false
44
+ } = _ref;
45
+
37
46
  const {
38
47
  options
39
48
  } = menuProps,
@@ -1,18 +1,23 @@
1
1
  import _jsx from '@babel/runtime/helpers/esm/jsx';
2
+ import 'core-js/modules/esnext.async-iterator.filter.js';
3
+ import 'core-js/modules/esnext.iterator.constructor.js';
4
+ import 'core-js/modules/esnext.iterator.filter.js';
2
5
  import 'react';
3
6
  import FilterableHeader from './components/FilterableHeader.js';
4
7
  import { getFilterLabelsGroup, getFilterLabels } from './helper.js';
5
8
 
6
- function FilterableFormatter({
7
- grid,
8
- onAddFilter,
9
- onRemoveFilter,
10
- query,
11
- filterMenuRef
12
- }) {
13
- return (value, {
14
- column
15
- }) => {
9
+ function FilterableFormatter(_ref) {
10
+ let {
11
+ grid,
12
+ onAddFilter,
13
+ onRemoveFilter,
14
+ query,
15
+ filterMenuRef
16
+ } = _ref;
17
+ return (value, _ref2) => {
18
+ let {
19
+ column
20
+ } = _ref2;
16
21
  const {
17
22
  rows,
18
23
  composedRows,
@@ -1,5 +1,14 @@
1
1
  import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
- import { isFunction } from '@elliemae/ds-utilities/utils';
2
+ import 'core-js/modules/esnext.async-iterator.some.js';
3
+ import 'core-js/modules/esnext.iterator.constructor.js';
4
+ import 'core-js/modules/esnext.iterator.some.js';
5
+ import 'core-js/modules/esnext.async-iterator.reduce.js';
6
+ import 'core-js/modules/esnext.iterator.reduce.js';
7
+ import 'core-js/modules/esnext.async-iterator.for-each.js';
8
+ import 'core-js/modules/esnext.iterator.for-each.js';
9
+ import 'core-js/modules/esnext.async-iterator.filter.js';
10
+ import 'core-js/modules/esnext.iterator.filter.js';
11
+ import { isFunction } from '@elliemae/ds-utilities';
3
12
  import strategiesOperators from './strategiesOperators.js';
4
13
 
5
14
  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; }
@@ -23,7 +32,10 @@ const executeFilterStrategy = (rule, row) => {
23
32
  return filterStrategy(transformedRowValue, transformedValue);
24
33
  };
25
34
 
26
- const filterByRules = (rules, condition = 'AND') => row => condition === 'AND' ? rules.reduce((isFiltered, rule) => rule.rules && rule.rules.length ? isFiltered && filterByRules(rule.rules, rule.condition)(row) : isFiltered && executeFilterStrategy(rule, row), true) : rules.some(rule => rule.rules && rule.rules.length ? filterByRules(rule.rules, rule.condition)(row) : executeFilterStrategy(rule, row));
35
+ const filterByRules = function (rules) {
36
+ let condition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'AND';
37
+ return row => condition === 'AND' ? rules.reduce((isFiltered, rule) => rule.rules && rule.rules.length ? isFiltered && filterByRules(rule.rules, rule.condition)(row) : isFiltered && executeFilterStrategy(rule, row), true) : rules.some(rule => rule.rules && rule.rules.length ? filterByRules(rule.rules, rule.condition)(row) : executeFilterStrategy(rule, row));
38
+ };
27
39
 
28
40
  function filterRowsByQueryGroup(rows, query, composedRows) {
29
41
  if (query && query.rules && query.rules.length === 0) return rows;
@@ -1,10 +1,13 @@
1
1
  import compare from 'comparejs';
2
2
 
3
3
  var strategiesOperators = (op => ({
4
- range: (rowValue, {
5
- start,
6
- end
7
- }) => start <= rowValue && end >= rowValue,
4
+ range: (rowValue, _ref) => {
5
+ let {
6
+ start,
7
+ end
8
+ } = _ref;
9
+ return start <= rowValue && end >= rowValue;
10
+ },
8
11
  equal: (value1, value2) => compare.id(value1, value2),
9
12
  greaterThan: compare.gt,
10
13
  lessThan: compare.lt,