@elliemae/ds-datagrids 2.0.0-next.1 → 2.0.0-next.13

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