@elliemae/ds-data-table 2.4.3-rc.2 → 2.4.3-rc.4

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 (9) hide show
  1. package/cjs/DataTableSchema.js +5 -0
  2. package/cjs/configs/useDatatableConfig.js +5 -1
  3. package/cjs/parts/FilterBar/FiltersBar.js +28 -1
  4. package/cjs/styled.js +1 -2
  5. package/esm/DataTableSchema.js +5 -0
  6. package/esm/configs/useDatatableConfig.js +5 -1
  7. package/esm/parts/FilterBar/FiltersBar.js +29 -2
  8. package/esm/styled.js +1 -2
  9. package/package.json +19 -19
package/cjs/DataTableSchema.js CHANGED
@@ -57,6 +57,11 @@ const DataTableSchema = {
57
57
  withFilterBar: dsPropsHelpers.PropTypes.bool.description('Whether to display the filter bar'),
58
58
  filterBarProps: dsPropsHelpers.PropTypes.shape({
59
59
  customPillRenderer: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.func, dsPropsHelpers.PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
60
+ isDropdownMenuOpen: dsPropsHelpers.PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),
61
+ onDropdownMenuToggle: dsPropsHelpers.PropTypes.func.description('Callback to toggle the DropdownMenu.'),
62
+ onClearAllFiltersClick: dsPropsHelpers.PropTypes.func.description('Callback for Clear Al Filters option.'),
63
+ onDropdownMenuClickOutside: dsPropsHelpers.PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),
64
+ onDropdownMenuTriggerClick: dsPropsHelpers.PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),
60
65
  extraOptions: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.shape({
61
66
  type: dsPropsHelpers.PropTypes.string,
62
67
  id: dsPropsHelpers.PropTypes.string,
package/cjs/configs/useDatatableConfig.js CHANGED
@@ -54,7 +54,11 @@ const useDatatableConfig = props => {
54
54
  // Layout config
55
55
  // ===========================================================================
56
56
 
57
- const [gridLayout, setGridLayout] = React.useState(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle));
57
+ const [gridLayout, setGridLayout] = React.useState(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle)); // We need to listen and update the state based on this props
58
+
59
+ React.useEffect(() => {
60
+ setGridLayout(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle));
61
+ }, [visibleColumns, props.colsLayoutStyle]);
58
62
  const totalColumnsWidth = React.useMemo(() => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? gridLayout.reduce((acc, cur) => acc + Number.parseInt(cur, 10), 0) : '100%', [props.colsLayoutStyle, gridLayout]);
59
63
  const layoutHelpers = React.useMemo(() => ({
60
64
  gridLayout,
package/cjs/parts/FilterBar/FiltersBar.js CHANGED
@@ -76,6 +76,7 @@ const FiltersBar = () => {
76
76
  },
77
77
  visibleColumns
78
78
  } = React.useContext(DataTableContext["default"]);
79
+ const [isOpen, setIsOpen] = React.useState(false);
79
80
  const pillGroupRefs = React.useMemo(() => {
80
81
  const refs = [];
81
82
 
@@ -86,7 +87,29 @@ const FiltersBar = () => {
86
87
  const dropdownMenuRef = React.useRef(null);
87
88
  const removeAllFilters = React.useCallback(() => {
88
89
  onFiltersChange([]);
89
- }, [onFiltersChange]);
90
+ filterBarProps?.onClearAllFiltersClick?.();
91
+ }, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
92
+ const onFilterBarClose = React.useCallback(() => {
93
+ filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
94
+ setIsOpen(false);
95
+ }, [filterBarProps.onDropdownMenuToggle]);
96
+ const onFilterBarOpen = React.useCallback(() => {
97
+ filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
98
+ setIsOpen(true);
99
+ }, [filterBarProps.onDropdownMenuToggle]);
100
+ const onFilterBarOnClickOutside = React.useCallback(() => {
101
+ filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
102
+ filterBarProps?.onDropdownMenuClickOutside?.();
103
+ setIsOpen(false);
104
+ }, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
105
+ const onTriggerClick = React.useCallback(() => {
106
+ filterBarProps?.onDropdownMenuTriggerClick?.();
107
+ onFilterBarOpen();
108
+ }, [filterBarProps.onDropdownMenuTriggerClick]);
109
+ const finalIsOpen = React.useMemo(() => {
110
+ if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
111
+ return isOpen;
112
+ }, [filterBarProps.isDropdownMenuOpen, isOpen]);
90
113
  return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
91
114
  width: width,
92
115
  "aria-live": "polite",
@@ -122,6 +145,9 @@ const FiltersBar = () => {
122
145
  }, column);
123
146
  }), /*#__PURE__*/_jsx__default["default"](styled.StyledDropdownMenu, {
124
147
  preventOverflow: "scrollParent",
148
+ isOpen: finalIsOpen,
149
+ onClose: onFilterBarClose,
150
+ onClickOutsideMenu: onFilterBarOnClickOutside,
125
151
  options: [{
126
152
  id: '__internal__option__clear__filters',
127
153
  label: 'Clear Filters',
@@ -133,6 +159,7 @@ const FiltersBar = () => {
133
159
  },
134
160
  buttonType: "text",
135
161
  innerRef: dropdownMenuRef,
162
+ onClick: onTriggerClick,
136
163
  icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {}))
137
164
  })
138
165
  }));
package/cjs/styled.js CHANGED
@@ -127,12 +127,11 @@ const StyledHeadWrapper = /*#__PURE__*/styled__default["default"].div.withConfig
127
127
  })(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%');
128
128
  const StyledHeadTr = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
129
129
  componentId: "sc-38sgfo-6"
130
- })(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
130
+ })(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";grid-auto-flow:column;"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
131
131
  cols: props.cols,
132
132
  isExpandable: props.isExpandable,
133
133
  colsLayoutStyle: props.colsLayoutStyle
134
134
  }), props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['080']);
135
-
136
135
  const StyledHeadTh = /*#__PURE__*/styled__default["default"].div.withConfig({
137
136
  componentId: "sc-38sgfo-7"
138
137
  })(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:sticky;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;outline:none;", ":focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:", ";}}"], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.isDraggingActive ? '' : `:hover {
package/esm/DataTableSchema.js CHANGED
@@ -53,6 +53,11 @@ const DataTableSchema = {
53
53
  withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),
54
54
  filterBarProps: PropTypes.shape({
55
55
  customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
56
+ isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),
57
+ onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),
58
+ onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),
59
+ onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),
60
+ onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),
56
61
  extraOptions: PropTypes.arrayOf(PropTypes.shape({
57
62
  type: PropTypes.string,
58
63
  id: PropTypes.string,
package/esm/configs/useDatatableConfig.js CHANGED
@@ -50,7 +50,11 @@ const useDatatableConfig = props => {
50
50
  // Layout config
51
51
  // ===========================================================================
52
52
 
53
- const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle));
53
+ const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle)); // We need to listen and update the state based on this props
54
+
55
+ useEffect(() => {
56
+ setGridLayout(columnsToGrid(visibleColumns, props.colsLayoutStyle));
57
+ }, [visibleColumns, props.colsLayoutStyle]);
54
58
  const totalColumnsWidth = useMemo(() => props.colsLayoutStyle === ColsLayoutStyle.Fixed ? gridLayout.reduce((acc, cur) => acc + Number.parseInt(cur, 10), 0) : '100%', [props.colsLayoutStyle, gridLayout]);
55
59
  const layoutHelpers = useMemo(() => ({
56
60
  gridLayout,
package/esm/parts/FilterBar/FiltersBar.js CHANGED
@@ -4,7 +4,7 @@ import 'core-js/modules/esnext.iterator.map.js';
4
4
  import 'core-js/modules/esnext.async-iterator.find.js';
5
5
  import 'core-js/modules/esnext.iterator.constructor.js';
6
6
  import 'core-js/modules/esnext.iterator.find.js';
7
- import React, { useContext, useMemo, useRef, useCallback } from 'react';
7
+ import React, { useContext, useState, useMemo, useRef, useCallback } from 'react';
8
8
  import DSButton from '@elliemae/ds-button';
9
9
  import { MoreOptionsVert } from '@elliemae/ds-icons';
10
10
  import 'core-js/modules/esnext.async-iterator.filter.js';
@@ -66,6 +66,7 @@ const FiltersBar = () => {
66
66
  },
67
67
  visibleColumns
68
68
  } = useContext(DataTableContext);
69
+ const [isOpen, setIsOpen] = useState(false);
69
70
  const pillGroupRefs = useMemo(() => {
70
71
  const refs = [];
71
72
 
@@ -76,7 +77,29 @@ const FiltersBar = () => {
76
77
  const dropdownMenuRef = useRef(null);
77
78
  const removeAllFilters = useCallback(() => {
78
79
  onFiltersChange([]);
79
- }, [onFiltersChange]);
80
+ filterBarProps?.onClearAllFiltersClick?.();
81
+ }, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
82
+ const onFilterBarClose = useCallback(() => {
83
+ filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
84
+ setIsOpen(false);
85
+ }, [filterBarProps.onDropdownMenuToggle]);
86
+ const onFilterBarOpen = useCallback(() => {
87
+ filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
88
+ setIsOpen(true);
89
+ }, [filterBarProps.onDropdownMenuToggle]);
90
+ const onFilterBarOnClickOutside = useCallback(() => {
91
+ filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
92
+ filterBarProps?.onDropdownMenuClickOutside?.();
93
+ setIsOpen(false);
94
+ }, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
95
+ const onTriggerClick = useCallback(() => {
96
+ filterBarProps?.onDropdownMenuTriggerClick?.();
97
+ onFilterBarOpen();
98
+ }, [filterBarProps.onDropdownMenuTriggerClick]);
99
+ const finalIsOpen = useMemo(() => {
100
+ if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
101
+ return isOpen;
102
+ }, [filterBarProps.isDropdownMenuOpen, isOpen]);
80
103
  return /*#__PURE__*/_jsx(StyledWrapper, {
81
104
  width: width,
82
105
  "aria-live": "polite",
@@ -112,6 +135,9 @@ const FiltersBar = () => {
112
135
  }, column);
113
136
  }), /*#__PURE__*/_jsx(StyledDropdownMenu, {
114
137
  preventOverflow: "scrollParent",
138
+ isOpen: finalIsOpen,
139
+ onClose: onFilterBarClose,
140
+ onClickOutsideMenu: onFilterBarOnClickOutside,
115
141
  options: [{
116
142
  id: '__internal__option__clear__filters',
117
143
  label: 'Clear Filters',
@@ -123,6 +149,7 @@ const FiltersBar = () => {
123
149
  },
124
150
  buttonType: "text",
125
151
  innerRef: dropdownMenuRef,
152
+ onClick: onTriggerClick,
126
153
  icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {}))
127
154
  })
128
155
  }));
package/esm/styled.js CHANGED
@@ -118,12 +118,11 @@ const StyledHeadWrapper = /*#__PURE__*/styled.div.withConfig({
118
118
  })(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%');
119
119
  const StyledHeadTr = /*#__PURE__*/styled(Grid).withConfig({
120
120
  componentId: "sc-38sgfo-6"
121
- })(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
121
+ })(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";grid-auto-flow:column;"], props => props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
122
122
  cols: props.cols,
123
123
  isExpandable: props.isExpandable,
124
124
  colsLayoutStyle: props.colsLayoutStyle
125
125
  }), props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['080']);
126
-
127
126
  const StyledHeadTh = /*#__PURE__*/styled.div.withConfig({
128
127
  componentId: "sc-38sgfo-7"
129
128
  })(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:sticky;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;outline:none;", ":focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border:2px solid ", ";pointer-events:none;z-index:", ";}}"], columnPadding, ZIndexDataTable.HEADER_ROW, props => props.isDraggingActive ? '' : `:hover {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-data-table",
3
- "version": "2.4.3-rc.2",
3
+ "version": "2.4.3-rc.4",
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.2",
574
- "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.2",
575
- "@elliemae/ds-controlled-form": "2.4.3-rc.2",
576
- "@elliemae/ds-drag-and-drop": "2.4.3-rc.2",
577
- "@elliemae/ds-dropdownmenu": "2.4.3-rc.2",
578
- "@elliemae/ds-form": "2.4.3-rc.2",
579
- "@elliemae/ds-form-layout-blocks": "2.4.3-rc.2",
580
- "@elliemae/ds-grid": "2.4.3-rc.2",
581
- "@elliemae/ds-icons": "2.4.3-rc.2",
582
- "@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.2",
583
- "@elliemae/ds-pagination": "2.4.3-rc.2",
584
- "@elliemae/ds-pills": "2.4.3-rc.2",
585
- "@elliemae/ds-popperjs": "2.4.3-rc.2",
586
- "@elliemae/ds-props-helpers": "2.4.3-rc.2",
587
- "@elliemae/ds-system": "2.4.3-rc.2",
588
- "@elliemae/ds-toolbar": "2.4.3-rc.2",
589
- "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.2",
590
- "@elliemae/ds-utilities": "2.4.3-rc.2",
573
+ "@elliemae/ds-button": "2.4.3-rc.4",
574
+ "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.4",
575
+ "@elliemae/ds-controlled-form": "2.4.3-rc.4",
576
+ "@elliemae/ds-drag-and-drop": "2.4.3-rc.4",
577
+ "@elliemae/ds-dropdownmenu": "2.4.3-rc.4",
578
+ "@elliemae/ds-form": "2.4.3-rc.4",
579
+ "@elliemae/ds-form-layout-blocks": "2.4.3-rc.4",
580
+ "@elliemae/ds-grid": "2.4.3-rc.4",
581
+ "@elliemae/ds-icons": "2.4.3-rc.4",
582
+ "@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.4",
583
+ "@elliemae/ds-pagination": "2.4.3-rc.4",
584
+ "@elliemae/ds-pills": "2.4.3-rc.4",
585
+ "@elliemae/ds-popperjs": "2.4.3-rc.4",
586
+ "@elliemae/ds-props-helpers": "2.4.3-rc.4",
587
+ "@elliemae/ds-system": "2.4.3-rc.4",
588
+ "@elliemae/ds-toolbar": "2.4.3-rc.4",
589
+ "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.4",
590
+ "@elliemae/ds-utilities": "2.4.3-rc.4",
591
591
  "@reduxjs/toolkit": "~1.6.2",
592
592
  "csstype": "~3.0.9",
593
593
  "moment": "~2.29.1",