@elliemae/ds-data-table 2.4.3-rc.10 → 2.4.3-rc.11

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 (8) hide show
  1. package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +8 -6
  2. package/cjs/parts/FilterBar/FiltersBar.js +6 -6
  3. package/cjs/parts/Headers/HeaderCellGroup.js +3 -2
  4. package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js +8 -6
  5. package/esm/parts/FilterBar/FiltersBar.js +6 -6
  6. package/esm/parts/Headers/HeaderCellGroup.js +3 -2
  7. package/package.json +19 -19
  8. package/types/types/props.d.ts +1 -0
package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js CHANGED
@@ -21,6 +21,9 @@ require('core-js/modules/esnext.set.reduce.js');
21
21
  require('core-js/modules/esnext.set.some.js');
22
22
  require('core-js/modules/esnext.set.symmetric-difference.js');
23
23
  require('core-js/modules/esnext.set.union.js');
24
+ require('core-js/modules/esnext.async-iterator.filter.js');
25
+ require('core-js/modules/esnext.iterator.constructor.js');
26
+ require('core-js/modules/esnext.iterator.filter.js');
24
27
  var React = require('react');
25
28
  var Grid = require('@elliemae/ds-grid');
26
29
  var dsControlledForm = require('@elliemae/ds-controlled-form');
@@ -33,9 +36,6 @@ require('styled-components');
33
36
  require('@elliemae/ds-button');
34
37
  require('@elliemae/ds-utilities');
35
38
  var constants = require('../../../../configs/constants.js');
36
- require('core-js/modules/esnext.async-iterator.filter.js');
37
- require('core-js/modules/esnext.iterator.constructor.js');
38
- require('core-js/modules/esnext.iterator.filter.js');
39
39
  require('core-js/modules/esnext.async-iterator.reduce.js');
40
40
  require('core-js/modules/esnext.iterator.reduce.js');
41
41
  require('react-virtual');
@@ -71,7 +71,8 @@ const BaseSelectFilter = props => {
71
71
  type,
72
72
  column: {
73
73
  id,
74
- filterOptions: userFilterOptions
74
+ filterOptions: userFilterOptions,
75
+ filterMinWidth
75
76
  },
76
77
  ctx: {
77
78
  tableProps: {
@@ -88,7 +89,7 @@ const BaseSelectFilter = props => {
88
89
  const filterOptions = React.useMemo(() => {
89
90
  // If the user didn't provide options, use the available ones
90
91
  if (!userFilterOptions) {
91
- const automaticFilters = [...new Set(data.map(datum => datum[id].toString()))].map(item => ({
92
+ const automaticFilters = [...new Set(data.filter(datum => !!datum[id]).map(datum => datum[id].toString()))].map(item => ({
92
93
  type: 'option',
93
94
  dsId: item,
94
95
  value: item,
@@ -117,7 +118,8 @@ const BaseSelectFilter = props => {
117
118
  "data-testid": isMulti ? constants.DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : constants.DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
118
119
  style: {
119
120
  background: '#fff',
120
- position: 'relative'
121
+ position: 'relative',
122
+ width: filterMinWidth
121
123
  }
122
124
  }, void 0, /*#__PURE__*/_jsx__default["default"](dsControlledForm.DSComboBox, {
123
125
  inline: true,
package/cjs/parts/FilterBar/FiltersBar.js CHANGED
@@ -88,28 +88,28 @@ const FiltersBar = () => {
88
88
  const removeAllFilters = React.useCallback(() => {
89
89
  onFiltersChange([]);
90
90
  filterBarProps?.onClearAllFiltersClick?.();
91
- }, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
91
+ }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);
92
92
  const onFilterBarClose = React.useCallback(() => {
93
93
  filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
94
94
  setIsOpen(false);
95
- }, [filterBarProps.onDropdownMenuToggle]);
95
+ }, [filterBarProps?.onDropdownMenuToggle]);
96
96
  const onFilterBarOpen = React.useCallback(() => {
97
97
  filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
98
98
  setIsOpen(true);
99
- }, [filterBarProps.onDropdownMenuToggle]);
99
+ }, [filterBarProps?.onDropdownMenuToggle]);
100
100
  const onFilterBarOnClickOutside = React.useCallback(() => {
101
101
  filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
102
102
  filterBarProps?.onDropdownMenuClickOutside?.();
103
103
  setIsOpen(false);
104
- }, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
104
+ }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);
105
105
  const onTriggerClick = React.useCallback(() => {
106
106
  filterBarProps?.onDropdownMenuTriggerClick?.();
107
107
  onFilterBarOpen();
108
- }, [filterBarProps.onDropdownMenuTriggerClick]);
108
+ }, [filterBarProps?.onDropdownMenuTriggerClick]);
109
109
  const finalIsOpen = React.useMemo(() => {
110
110
  if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
111
111
  return isOpen;
112
- }, [filterBarProps.isDropdownMenuOpen, isOpen]);
112
+ }, [filterBarProps?.isDropdownMenuOpen, isOpen]);
113
113
  return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
114
114
  width: width,
115
115
  "aria-live": "polite",
package/cjs/parts/Headers/HeaderCellGroup.js CHANGED
@@ -49,9 +49,10 @@ const StyledWrapper = /*#__PURE__*/styled__default["default"](Grid.Grid).withCon
49
49
  componentId: "sc-1dqaj8a-0"
50
50
  })(["position:relative;", " width:", ";grid-column:", ";background:", ";opacity:", ";box-shadow:0 2px 4px 0 ", ";border-left:", " solid ", ";"], _ref => {
51
51
  let {
52
- shouldDropOneLevel
52
+ shouldDropOneLevel,
53
+ isDragOverlay
53
54
  } = _ref;
54
- return shouldDropOneLevel ? `top: 50%; height: 50%;` : '';
55
+ return shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '';
55
56
  }, props => props.isDragOverlay ? 'fit-content' : '100%', props => props.gridColumn, props => props.isDragging ? props.theme.colors.neutral['080'] : 'white', props => props.isDragging ? 0.8 : 1, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', _ref2 => {
56
57
  let {
57
58
  isFirst
package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js CHANGED
@@ -17,6 +17,9 @@ import 'core-js/modules/esnext.set.reduce.js';
17
17
  import 'core-js/modules/esnext.set.some.js';
18
18
  import 'core-js/modules/esnext.set.symmetric-difference.js';
19
19
  import 'core-js/modules/esnext.set.union.js';
20
+ import 'core-js/modules/esnext.async-iterator.filter.js';
21
+ import 'core-js/modules/esnext.iterator.constructor.js';
22
+ import 'core-js/modules/esnext.iterator.filter.js';
20
23
  import { useMemo, useState, useEffect } from 'react';
21
24
  import { Grid } from '@elliemae/ds-grid';
22
25
  import { DSComboBox } from '@elliemae/ds-controlled-form';
@@ -29,9 +32,6 @@ import 'styled-components';
29
32
  import '@elliemae/ds-button';
30
33
  import '@elliemae/ds-utilities';
31
34
  import { DATA_TESTID } from '../../../../configs/constants.js';
32
- import 'core-js/modules/esnext.async-iterator.filter.js';
33
- import 'core-js/modules/esnext.iterator.constructor.js';
34
- import 'core-js/modules/esnext.iterator.filter.js';
35
35
  import 'core-js/modules/esnext.async-iterator.reduce.js';
36
36
  import 'core-js/modules/esnext.iterator.reduce.js';
37
37
  import 'react-virtual';
@@ -63,7 +63,8 @@ const BaseSelectFilter = props => {
63
63
  type,
64
64
  column: {
65
65
  id,
66
- filterOptions: userFilterOptions
66
+ filterOptions: userFilterOptions,
67
+ filterMinWidth
67
68
  },
68
69
  ctx: {
69
70
  tableProps: {
@@ -80,7 +81,7 @@ const BaseSelectFilter = props => {
80
81
  const filterOptions = useMemo(() => {
81
82
  // If the user didn't provide options, use the available ones
82
83
  if (!userFilterOptions) {
83
- const automaticFilters = [...new Set(data.map(datum => datum[id].toString()))].map(item => ({
84
+ const automaticFilters = [...new Set(data.filter(datum => !!datum[id]).map(datum => datum[id].toString()))].map(item => ({
84
85
  type: 'option',
85
86
  dsId: item,
86
87
  value: item,
@@ -109,7 +110,8 @@ const BaseSelectFilter = props => {
109
110
  "data-testid": isMulti ? DATA_TESTID.DATA_TABLE_MULTISELECT_CONTROLLER : DATA_TESTID.DATA_TABLE_SINGLESELECT_CONTROLLER,
110
111
  style: {
111
112
  background: '#fff',
112
- position: 'relative'
113
+ position: 'relative',
114
+ width: filterMinWidth
113
115
  }
114
116
  }, void 0, /*#__PURE__*/_jsx(DSComboBox, {
115
117
  inline: true,
package/esm/parts/FilterBar/FiltersBar.js CHANGED
@@ -78,28 +78,28 @@ const FiltersBar = () => {
78
78
  const removeAllFilters = useCallback(() => {
79
79
  onFiltersChange([]);
80
80
  filterBarProps?.onClearAllFiltersClick?.();
81
- }, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
81
+ }, [onFiltersChange, filterBarProps?.onClearAllFiltersClick]);
82
82
  const onFilterBarClose = useCallback(() => {
83
83
  filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
84
84
  setIsOpen(false);
85
- }, [filterBarProps.onDropdownMenuToggle]);
85
+ }, [filterBarProps?.onDropdownMenuToggle]);
86
86
  const onFilterBarOpen = useCallback(() => {
87
87
  filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
88
88
  setIsOpen(true);
89
- }, [filterBarProps.onDropdownMenuToggle]);
89
+ }, [filterBarProps?.onDropdownMenuToggle]);
90
90
  const onFilterBarOnClickOutside = useCallback(() => {
91
91
  filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
92
92
  filterBarProps?.onDropdownMenuClickOutside?.();
93
93
  setIsOpen(false);
94
- }, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
94
+ }, [filterBarProps?.onDropdownMenuToggle, filterBarProps?.onDropdownMenuClickOutside]);
95
95
  const onTriggerClick = useCallback(() => {
96
96
  filterBarProps?.onDropdownMenuTriggerClick?.();
97
97
  onFilterBarOpen();
98
- }, [filterBarProps.onDropdownMenuTriggerClick]);
98
+ }, [filterBarProps?.onDropdownMenuTriggerClick]);
99
99
  const finalIsOpen = useMemo(() => {
100
100
  if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
101
101
  return isOpen;
102
- }, [filterBarProps.isDropdownMenuOpen, isOpen]);
102
+ }, [filterBarProps?.isDropdownMenuOpen, isOpen]);
103
103
  return /*#__PURE__*/_jsx(StyledWrapper, {
104
104
  width: width,
105
105
  "aria-live": "polite",
package/esm/parts/Headers/HeaderCellGroup.js CHANGED
@@ -40,9 +40,10 @@ const StyledWrapper = /*#__PURE__*/styled(Grid).withConfig({
40
40
  componentId: "sc-1dqaj8a-0"
41
41
  })(["position:relative;", " width:", ";grid-column:", ";background:", ";opacity:", ";box-shadow:0 2px 4px 0 ", ";border-left:", " solid ", ";"], _ref => {
42
42
  let {
43
- shouldDropOneLevel
43
+ shouldDropOneLevel,
44
+ isDragOverlay
44
45
  } = _ref;
45
- return shouldDropOneLevel ? `top: 50%; height: 50%;` : '';
46
+ return shouldDropOneLevel && !isDragOverlay ? `top: 50%; height: 50%;` : '';
46
47
  }, props => props.isDragOverlay ? 'fit-content' : '100%', props => props.gridColumn, props => props.isDragging ? props.theme.colors.neutral['080'] : 'white', props => props.isDragging ? 0.8 : 1, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', _ref2 => {
47
48
  let {
48
49
  isFirst
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-data-table",
3
- "version": "2.4.3-rc.10",
3
+ "version": "2.4.3-rc.11",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table",
6
6
  "module": "./esm/index.js",
@@ -570,24 +570,24 @@
570
570
  "dependencies": {
571
571
  "@dnd-kit/core": "~4.0.1",
572
572
  "@dnd-kit/sortable": "~5.0.0",
573
- "@elliemae/ds-button": "2.4.3-rc.10",
574
- "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.10",
575
- "@elliemae/ds-controlled-form": "2.4.3-rc.10",
576
- "@elliemae/ds-drag-and-drop": "2.4.3-rc.10",
577
- "@elliemae/ds-dropdownmenu": "2.4.3-rc.10",
578
- "@elliemae/ds-form": "2.4.3-rc.10",
579
- "@elliemae/ds-form-layout-blocks": "2.4.3-rc.10",
580
- "@elliemae/ds-grid": "2.4.3-rc.10",
581
- "@elliemae/ds-icons": "2.4.3-rc.10",
582
- "@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.10",
583
- "@elliemae/ds-pagination": "2.4.3-rc.10",
584
- "@elliemae/ds-pills": "2.4.3-rc.10",
585
- "@elliemae/ds-popperjs": "2.4.3-rc.10",
586
- "@elliemae/ds-props-helpers": "2.4.3-rc.10",
587
- "@elliemae/ds-system": "2.4.3-rc.10",
588
- "@elliemae/ds-toolbar": "2.4.3-rc.10",
589
- "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.10",
590
- "@elliemae/ds-utilities": "2.4.3-rc.10",
573
+ "@elliemae/ds-button": "2.4.3-rc.11",
574
+ "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.11",
575
+ "@elliemae/ds-controlled-form": "2.4.3-rc.11",
576
+ "@elliemae/ds-drag-and-drop": "2.4.3-rc.11",
577
+ "@elliemae/ds-dropdownmenu": "2.4.3-rc.11",
578
+ "@elliemae/ds-form": "2.4.3-rc.11",
579
+ "@elliemae/ds-form-layout-blocks": "2.4.3-rc.11",
580
+ "@elliemae/ds-grid": "2.4.3-rc.11",
581
+ "@elliemae/ds-icons": "2.4.3-rc.11",
582
+ "@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.11",
583
+ "@elliemae/ds-pagination": "2.4.3-rc.11",
584
+ "@elliemae/ds-pills": "2.4.3-rc.11",
585
+ "@elliemae/ds-popperjs": "2.4.3-rc.11",
586
+ "@elliemae/ds-props-helpers": "2.4.3-rc.11",
587
+ "@elliemae/ds-system": "2.4.3-rc.11",
588
+ "@elliemae/ds-toolbar": "2.4.3-rc.11",
589
+ "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.11",
590
+ "@elliemae/ds-utilities": "2.4.3-rc.11",
591
591
  "@reduxjs/toolkit": "~1.6.2",
592
592
  "csstype": "~3.0.9",
593
593
  "moment": "~2.29.1",
package/types/types/props.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare type TypescriptColumn = {
14
14
  accessor?: string;
15
15
  filter?: string;
16
16
  filterOptions?: FilterOptionT[] | (() => FilterOptionT[]);
17
+ filterMinWidth?: number | string;
17
18
  Filter?: React.ComponentType<FilterProps>;
18
19
  Cell?: React.ComponentType<any>;
19
20
  editable?: string | TypescriptGenericFunc;