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

package/cjs/DataTableSchema.js

@@ -57,11 +57,6 @@ const DataTableSchema = {
   withFilterBar: dsPropsHelpers.PropTypes.bool.description('Whether to display the filter bar'),
   filterBarProps: dsPropsHelpers.PropTypes.shape({
     customPillRenderer: dsPropsHelpers.PropTypes.oneOfType([dsPropsHelpers.PropTypes.func, dsPropsHelpers.PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
-    isDropdownMenuOpen: dsPropsHelpers.PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),
-    onDropdownMenuToggle: dsPropsHelpers.PropTypes.func.description('Callback to toggle the DropdownMenu.'),
-    onClearAllFiltersClick: dsPropsHelpers.PropTypes.func.description('Callback for Clear Al Filters option.'),
-    onDropdownMenuClickOutside: dsPropsHelpers.PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),
-    onDropdownMenuTriggerClick: dsPropsHelpers.PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),
     extraOptions: dsPropsHelpers.PropTypes.arrayOf(dsPropsHelpers.PropTypes.shape({
       type: dsPropsHelpers.PropTypes.string,
       id: dsPropsHelpers.PropTypes.string,

package/cjs/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -55,8 +55,6 @@ require('../../../../exported-related/Filters/applyOutOfTheBoxFilters.js');
 require('moment');
 require('core-js/modules/esnext.async-iterator.some.js');
 require('core-js/modules/esnext.iterator.some.js');
-require('../../../../redux/reducers/index.js');
-var useDispatchHeadersActions = require('../../../../redux/reducers/headersReducers/useDispatchHeadersActions.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -82,9 +80,6 @@ const BaseSelectFilter = props => {
     innerRef,
     onValueChange
   } = props;
-  const {
-    patchHeaderFilterButtonAndMenu
-  } = useDispatchHeadersActions.useDispatchHeadersActions();
   const filterOptions = React.useMemo(() => {
     // If the user didn't provide options, use the available ones
     if (!userFilterOptions) {
@@ -105,7 +100,6 @@ const BaseSelectFilter = props => {
 
   const handleOnChange = value => {
     onValueChange(type, value);
-    if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);
   };
 
   const [filters, setFilteredOptions] = React.useState(filterOptions);

package/cjs/configs/useDatatableConfig.js

@@ -54,11 +54,7 @@ const useDatatableConfig = props => {
   // Layout config
   // ===========================================================================
 
-  const [gridLayout, setGridLayout] = React.useState(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle)); // We need to listen and update the state based on this props
-
-  React.useEffect(() => {
-    setGridLayout(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle));
-  }, [visibleColumns, props.colsLayoutStyle]);
+  const [gridLayout, setGridLayout] = React.useState(columnsToGrid.columnsToGrid(visibleColumns, props.colsLayoutStyle));
   const totalColumnsWidth = React.useMemo(() => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? gridLayout.reduce((acc, cur) => acc + Number.parseInt(cur, 10), 0) : '100%', [props.colsLayoutStyle, gridLayout]);
   const layoutHelpers = React.useMemo(() => ({
     gridLayout,

package/cjs/exported-related/Toolbar/Toolbar.js

@@ -55,15 +55,22 @@ const Toolbar = _ref => {
     children
   } = _ref;
   const [show, setShow] = React.useState(false);
+  const [clicked, setClicked] = React.useState(false);
   const toolbarRef = React.useRef(null);
-  const handleOnClickOutside = React.useCallback(() => setShow(false), []);
-  const handleOnClick = React.useCallback(() => setShow(true), []);
+  const handleOnClickOutside = React.useCallback(() => {
+    setShow(false);
+    setClicked(false);
+  }, []);
+  const handleOnClick = React.useCallback(() => {
+    setShow(true);
+    setClicked(true);
+  }, []);
   dsUtilities.useOnClickOutside(toolbarRef, handleOnClickOutside);
   return /*#__PURE__*/jsxRuntime.jsx(ToolbarPosition, {
     ref: toolbarRef,
     children: /*#__PURE__*/_jsx__default["default"](ToolbarWrapper, {
       onMouseEnter: () => setShow(true),
-      onMouseLeave: () => setShow(false)
+      onMouseLeave: () => setShow(clicked)
     }, void 0, show && /*#__PURE__*/_jsx__default["default"](ToolbarBtns, {}, void 0, children), /*#__PURE__*/_jsx__default["default"](DSButton__default["default"], {
       buttonType: "text",
       className: "toolbar-trigger",

package/cjs/parts/FilterBar/FiltersBar.js

@@ -76,7 +76,6 @@ const FiltersBar = () => {
     },
     visibleColumns
   } = React.useContext(DataTableContext["default"]);
-  const [isOpen, setIsOpen] = React.useState(false);
   const pillGroupRefs = React.useMemo(() => {
     const refs = [];
 
@@ -87,29 +86,7 @@ const FiltersBar = () => {
   const dropdownMenuRef = React.useRef(null);
   const removeAllFilters = React.useCallback(() => {
     onFiltersChange([]);
-    filterBarProps?.onClearAllFiltersClick?.();
-  }, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
-  const onFilterBarClose = React.useCallback(() => {
-    filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
-    setIsOpen(false);
-  }, [filterBarProps.onDropdownMenuToggle]);
-  const onFilterBarOpen = React.useCallback(() => {
-    filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
-    setIsOpen(true);
-  }, [filterBarProps.onDropdownMenuToggle]);
-  const onFilterBarOnClickOutside = React.useCallback(() => {
-    filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
-    filterBarProps?.onDropdownMenuClickOutside?.();
-    setIsOpen(false);
-  }, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
-  const onTriggerClick = React.useCallback(() => {
-    filterBarProps?.onDropdownMenuTriggerClick?.();
-    onFilterBarOpen();
-  }, [filterBarProps.onDropdownMenuTriggerClick]);
-  const finalIsOpen = React.useMemo(() => {
-    if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
-    return isOpen;
-  }, [filterBarProps.isDropdownMenuOpen, isOpen]);
+  }, [onFiltersChange]);
   return /*#__PURE__*/_jsx__default["default"](styled.StyledWrapper, {
     width: width,
     "aria-live": "polite",
@@ -145,9 +122,6 @@ const FiltersBar = () => {
     }, column);
   }), /*#__PURE__*/_jsx__default["default"](styled.StyledDropdownMenu, {
     preventOverflow: "scrollParent",
-    isOpen: finalIsOpen,
-    onClose: onFilterBarClose,
-    onClickOutsideMenu: onFilterBarOnClickOutside,
     options: [{
       id: '__internal__option__clear__filters',
       label: 'Clear Filters',
@@ -159,7 +133,6 @@ const FiltersBar = () => {
       },
       buttonType: "text",
       innerRef: dropdownMenuRef,
-      onClick: onTriggerClick,
       icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx__default["default"](dsIcons.MoreOptionsVert, {}))
     })
   }));

package/cjs/styled.js

@@ -127,11 +127,12 @@ const StyledHeadWrapper = /*#__PURE__*/styled__default["default"].div.withConfig
 })(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%');
 const StyledHeadTr = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-6"
-})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";grid-auto-flow:column;"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
+})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
 }), props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['080']);
+
 const StyledHeadTh = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-7"
 })(["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

@@ -53,11 +53,6 @@ const DataTableSchema = {
   withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),
   filterBarProps: PropTypes.shape({
     customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
-    isDropdownMenuOpen: PropTypes.bool.description('Wether the DropdownMenu is Open or not.'),
-    onDropdownMenuToggle: PropTypes.func.description('Callback to toggle the DropdownMenu.'),
-    onClearAllFiltersClick: PropTypes.func.description('Callback for Clear Al Filters option.'),
-    onDropdownMenuClickOutside: PropTypes.func.description('Callback triggered when clicking outside DropdownMenu.'),
-    onDropdownMenuTriggerClick: PropTypes.func.description('Callback triggered when clicking DropdownMenu ellipsis.'),
     extraOptions: PropTypes.arrayOf(PropTypes.shape({
       type: PropTypes.string,
       id: PropTypes.string,

package/esm/addons/Filters/Components/SelectFilter/BaseSelectFilter.js

@@ -51,8 +51,6 @@ import '../../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
 import 'core-js/modules/esnext.async-iterator.some.js';
 import 'core-js/modules/esnext.iterator.some.js';
-import '../../../../redux/reducers/index.js';
-import { useDispatchHeadersActions } from '../../../../redux/reducers/headersReducers/useDispatchHeadersActions.js';
 
 var _SearchXsmall;
 const BaseSelectFilter = props => {
@@ -74,9 +72,6 @@ const BaseSelectFilter = props => {
     innerRef,
     onValueChange
   } = props;
-  const {
-    patchHeaderFilterButtonAndMenu
-  } = useDispatchHeadersActions();
   const filterOptions = useMemo(() => {
     // If the user didn't provide options, use the available ones
     if (!userFilterOptions) {
@@ -97,7 +92,6 @@ const BaseSelectFilter = props => {
 
   const handleOnChange = value => {
     onValueChange(type, value);
-    if (!isMulti) patchHeaderFilterButtonAndMenu(column.id, true);
   };
 
   const [filters, setFilteredOptions] = useState(filterOptions);

package/esm/configs/useDatatableConfig.js

@@ -50,11 +50,7 @@ const useDatatableConfig = props => {
   // Layout config
   // ===========================================================================
 
-  const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle)); // We need to listen and update the state based on this props
-
-  useEffect(() => {
-    setGridLayout(columnsToGrid(visibleColumns, props.colsLayoutStyle));
-  }, [visibleColumns, props.colsLayoutStyle]);
+  const [gridLayout, setGridLayout] = useState(columnsToGrid(visibleColumns, props.colsLayoutStyle));
   const totalColumnsWidth = useMemo(() => props.colsLayoutStyle === ColsLayoutStyle.Fixed ? gridLayout.reduce((acc, cur) => acc + Number.parseInt(cur, 10), 0) : '100%', [props.colsLayoutStyle, gridLayout]);
   const layoutHelpers = useMemo(() => ({
     gridLayout,

package/esm/exported-related/Toolbar/Toolbar.js

@@ -45,15 +45,22 @@ const Toolbar = _ref => {
     children
   } = _ref;
   const [show, setShow] = useState(false);
+  const [clicked, setClicked] = useState(false);
   const toolbarRef = useRef(null);
-  const handleOnClickOutside = useCallback(() => setShow(false), []);
-  const handleOnClick = useCallback(() => setShow(true), []);
+  const handleOnClickOutside = useCallback(() => {
+    setShow(false);
+    setClicked(false);
+  }, []);
+  const handleOnClick = useCallback(() => {
+    setShow(true);
+    setClicked(true);
+  }, []);
   useOnClickOutside(toolbarRef, handleOnClickOutside);
   return /*#__PURE__*/jsx(ToolbarPosition, {
     ref: toolbarRef,
     children: /*#__PURE__*/_jsx(ToolbarWrapper, {
       onMouseEnter: () => setShow(true),
-      onMouseLeave: () => setShow(false)
+      onMouseLeave: () => setShow(clicked)
     }, void 0, show && /*#__PURE__*/_jsx(ToolbarBtns, {}, void 0, children), /*#__PURE__*/_jsx(DSButton, {
       buttonType: "text",
       className: "toolbar-trigger",

package/esm/parts/FilterBar/FiltersBar.js

@@ -4,7 +4,7 @@ import 'core-js/modules/esnext.iterator.map.js';
 import 'core-js/modules/esnext.async-iterator.find.js';
 import 'core-js/modules/esnext.iterator.constructor.js';
 import 'core-js/modules/esnext.iterator.find.js';
-import React, { useContext, useState, useMemo, useRef, useCallback } from 'react';
+import React, { useContext, useMemo, useRef, useCallback } from 'react';
 import DSButton from '@elliemae/ds-button';
 import { MoreOptionsVert } from '@elliemae/ds-icons';
 import 'core-js/modules/esnext.async-iterator.filter.js';
@@ -66,7 +66,6 @@ const FiltersBar = () => {
     },
     visibleColumns
   } = useContext(DataTableContext);
-  const [isOpen, setIsOpen] = useState(false);
   const pillGroupRefs = useMemo(() => {
     const refs = [];
 
@@ -77,29 +76,7 @@ const FiltersBar = () => {
   const dropdownMenuRef = useRef(null);
   const removeAllFilters = useCallback(() => {
     onFiltersChange([]);
-    filterBarProps?.onClearAllFiltersClick?.();
-  }, [onFiltersChange, filterBarProps.onClearAllFiltersClick]);
-  const onFilterBarClose = useCallback(() => {
-    filterBarProps?.onDropdownMenuToggle?.(false, 'onClose');
-    setIsOpen(false);
-  }, [filterBarProps.onDropdownMenuToggle]);
-  const onFilterBarOpen = useCallback(() => {
-    filterBarProps?.onDropdownMenuToggle?.(true, 'onOpen');
-    setIsOpen(true);
-  }, [filterBarProps.onDropdownMenuToggle]);
-  const onFilterBarOnClickOutside = useCallback(() => {
-    filterBarProps?.onDropdownMenuToggle?.(false, 'onClickOutside');
-    filterBarProps?.onDropdownMenuClickOutside?.();
-    setIsOpen(false);
-  }, [filterBarProps.onDropdownMenuToggle, filterBarProps.onDropdownMenuClickOutside]);
-  const onTriggerClick = useCallback(() => {
-    filterBarProps?.onDropdownMenuTriggerClick?.();
-    onFilterBarOpen();
-  }, [filterBarProps.onDropdownMenuTriggerClick]);
-  const finalIsOpen = useMemo(() => {
-    if (typeof filterBarProps?.isDropdownMenuOpen === 'boolean') return filterBarProps.isDropdownMenuOpen;
-    return isOpen;
-  }, [filterBarProps.isDropdownMenuOpen, isOpen]);
+  }, [onFiltersChange]);
   return /*#__PURE__*/_jsx(StyledWrapper, {
     width: width,
     "aria-live": "polite",
@@ -135,9 +112,6 @@ const FiltersBar = () => {
     }, column);
   }), /*#__PURE__*/_jsx(StyledDropdownMenu, {
     preventOverflow: "scrollParent",
-    isOpen: finalIsOpen,
-    onClose: onFilterBarClose,
-    onClickOutsideMenu: onFilterBarOnClickOutside,
     options: [{
       id: '__internal__option__clear__filters',
       label: 'Clear Filters',
@@ -149,7 +123,6 @@ const FiltersBar = () => {
       },
       buttonType: "text",
       innerRef: dropdownMenuRef,
-      onClick: onTriggerClick,
       icon: _MoreOptionsVert || (_MoreOptionsVert = /*#__PURE__*/_jsx(MoreOptionsVert, {}))
     })
   }));

package/esm/styled.js

@@ -118,11 +118,12 @@ const StyledHeadWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Fixed ? sizeToCss(props.totalColumnsWidth) : '100%');
 const StyledHeadTr = /*#__PURE__*/styled(Grid).withConfig({
   componentId: "sc-38sgfo-6"
-})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";grid-auto-flow:column;"], props => props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
+})(["", ";", ";border-right:1px solid ", ";border-bottom:1px solid ", ";"], props => props.colsLayoutStyle === ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
 }), props => props.theme.colors.neutral['080'], props => props.theme.colors.neutral['080']);
+
 const StyledHeadTh = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-38sgfo-7"
 })(["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

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "2.4.3-rc.4",
+  "version": "2.4.3",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Data Table",
   "module": "./esm/index.js",
@@ -570,24 +570,24 @@
   "dependencies": {
     "@dnd-kit/core": "~4.0.1",
     "@dnd-kit/sortable": "~5.0.0",
-    "@elliemae/ds-button": "2.4.3-rc.4",
-    "@elliemae/ds-circular-progress-indicator": "2.4.3-rc.4",
-    "@elliemae/ds-controlled-form": "2.4.3-rc.4",
-    "@elliemae/ds-drag-and-drop": "2.4.3-rc.4",
-    "@elliemae/ds-dropdownmenu": "2.4.3-rc.4",
-    "@elliemae/ds-form": "2.4.3-rc.4",
-    "@elliemae/ds-form-layout-blocks": "2.4.3-rc.4",
-    "@elliemae/ds-grid": "2.4.3-rc.4",
-    "@elliemae/ds-icons": "2.4.3-rc.4",
-    "@elliemae/ds-indeterminate-progress-indicator": "2.4.3-rc.4",
-    "@elliemae/ds-pagination": "2.4.3-rc.4",
-    "@elliemae/ds-pills": "2.4.3-rc.4",
-    "@elliemae/ds-popperjs": "2.4.3-rc.4",
-    "@elliemae/ds-props-helpers": "2.4.3-rc.4",
-    "@elliemae/ds-system": "2.4.3-rc.4",
-    "@elliemae/ds-toolbar": "2.4.3-rc.4",
-    "@elliemae/ds-truncated-tooltip-text": "2.4.3-rc.4",
-    "@elliemae/ds-utilities": "2.4.3-rc.4",
+    "@elliemae/ds-button": "2.4.3",
+    "@elliemae/ds-circular-progress-indicator": "2.4.3",
+    "@elliemae/ds-controlled-form": "2.4.3",
+    "@elliemae/ds-drag-and-drop": "2.4.3",
+    "@elliemae/ds-dropdownmenu": "2.4.3",
+    "@elliemae/ds-form": "2.4.3",
+    "@elliemae/ds-form-layout-blocks": "2.4.3",
+    "@elliemae/ds-grid": "2.4.3",
+    "@elliemae/ds-icons": "2.4.3",
+    "@elliemae/ds-indeterminate-progress-indicator": "2.4.3",
+    "@elliemae/ds-pagination": "2.4.3",
+    "@elliemae/ds-pills": "2.4.3",
+    "@elliemae/ds-popperjs": "2.4.3",
+    "@elliemae/ds-props-helpers": "2.4.3",
+    "@elliemae/ds-system": "2.4.3",
+    "@elliemae/ds-toolbar": "2.4.3",
+    "@elliemae/ds-truncated-tooltip-text": "2.4.3",
+    "@elliemae/ds-utilities": "2.4.3",
     "@reduxjs/toolkit": "~1.6.2",
     "csstype": "~3.0.9",
     "moment": "~2.29.1",