@elliemae/ds-data-table 1.54.0-next.8 → 1.54.0-rc.4

package/cjs/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -9,6 +9,7 @@ var addons_Columns_ColumnExpand_ColumnExpand = require('../../../styled-256fc644
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../configs/constants.js');
 require('react-virtual');
 require('../../../configs/useRowFlattenization.js');
@@ -56,7 +57,6 @@ require('../../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../../redux/reducers/index.js');
 require('redux');
 require('../../../redux/reducers/headersReducers/headersReducers.js');

package/cjs/addons/Editables/DateEditableCell/DateEditableCell.js

@@ -8,6 +8,7 @@ var addons_Columns_ColumnExpand_ColumnExpand = require('../../../styled-256fc644
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../configs/constants.js');
 require('react-virtual');
 require('../../../configs/useRowFlattenization.js');
@@ -55,7 +56,6 @@ require('../../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../../redux/reducers/index.js');
 require('redux');
 require('../../../redux/reducers/headersReducers/headersReducers.js');

package/cjs/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -8,6 +8,7 @@ require('styled-components');
 var addons_Columns_ColumnExpand_ColumnExpand = require('../../../styled-256fc644.js');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../configs/constants.js');
 require('react-virtual');
 require('../../../configs/useRowFlattenization.js');
@@ -55,7 +56,6 @@ require('../../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../../redux/reducers/index.js');
 require('redux');
 require('../../../redux/reducers/headersReducers/headersReducers.js');

package/cjs/addons/Filters/Components/DateRangeFilter/index.js

@@ -11,6 +11,7 @@ var addons_Columns_ColumnExpand_ColumnExpand = require('../../../../styled-256fc
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../../configs/constants.js');
 require('react-virtual');
 require('../../../../configs/useRowFlattenization.js');
@@ -57,7 +58,6 @@ require('../../../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../../../redux/reducers/index.js');
 require('redux');
 require('../../../../redux/reducers/headersReducers/headersReducers.js');

package/cjs/addons/Filters/Components/NumberRangeFilter/index.js

@@ -12,6 +12,7 @@ require('@babel/runtime/helpers/slicedToArray');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../../configs/constants.js');
 require('react-virtual');
 require('../../../../configs/useRowFlattenization.js');
@@ -57,7 +58,6 @@ require('../../../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../../../redux/reducers/index.js');
 require('redux');
 require('../../../../redux/reducers/headersReducers/headersReducers.js');

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

@@ -14,6 +14,7 @@ var addons_Columns_ColumnExpand_ColumnExpand = require('../../../../styled-256fc
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../../configs/constants.js');
 require('../../../../configs/useRowFlattenization.js');
 require('@babel/runtime/helpers/defineProperty');
@@ -56,7 +57,6 @@ require('../../../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../../../redux/reducers/index.js');
 require('redux');
 require('../../../../redux/reducers/headersReducers/headersReducers.js');

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

@@ -8,6 +8,7 @@ require('@babel/runtime/helpers/slicedToArray');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../../configs/constants.js');
 require('react-virtual');
 require('../../../../configs/useRowFlattenization.js');
@@ -55,7 +56,6 @@ require('../../../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../../../redux/reducers/index.js');
 require('redux');
 require('../../../../redux/reducers/headersReducers/headersReducers.js');

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

@@ -8,6 +8,7 @@ require('@babel/runtime/helpers/slicedToArray');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../../configs/constants.js');
 require('react-virtual');
 require('../../../../configs/useRowFlattenization.js');
@@ -55,7 +56,6 @@ require('../../../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../../../redux/reducers/index.js');
 require('redux');
 require('../../../../redux/reducers/headersReducers/headersReducers.js');

package/cjs/addons/Filters/Components/SingleDateFilter/index.js

@@ -11,6 +11,7 @@ var addons_Columns_ColumnExpand_ColumnExpand = require('../../../../styled-256fc
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../../configs/constants.js');
 require('react-virtual');
 require('../../../../configs/useRowFlattenization.js');
@@ -57,7 +58,6 @@ require('../../../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../../../redux/reducers/index.js');
 require('redux');
 require('../../../../redux/reducers/headersReducers/headersReducers.js');

package/cjs/addons/Filters/Components/TextInputFilter/index.js

@@ -9,6 +9,7 @@ require('@babel/runtime/helpers/slicedToArray');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../../../configs/constants.js');
 require('react-virtual');
 require('../../../../configs/useRowFlattenization.js');
@@ -56,7 +57,6 @@ require('../../../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../../../redux/reducers/index.js');
 require('redux');
 require('../../../../redux/reducers/headersReducers/headersReducers.js');

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

@@ -7,6 +7,7 @@ var React = require('react');
 var styled = require('styled-components');
 var DSButton = require('@elliemae/ds-button');
 var MoreOptionsVert = require('@elliemae/ds-icons/MoreOptionsVert');
+var hooks = require('@elliemae/ds-utilities/hooks');
 var configs_constants = require('../../configs/constants.js');
 require('react-virtual');
 require('../../configs/useRowFlattenization.js');
@@ -53,7 +54,6 @@ require('../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../redux/reducers/index.js');
 require('redux');
 require('../../redux/reducers/headersReducers/headersReducers.js');
@@ -125,10 +125,8 @@ var ToolbarWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
 })(["display:flex;align-items:center;height:36px;margin-right:1px;pointer-events:all;&:hover{box-shadow:0 1px 2px 0 rgba(0,0,0,0.13),0 1px 2px 0 rgba(0,0,0,0.2);& > .toolbar-trigger{border:none;}}"]);
 var ToolbarPosition = /*#__PURE__*/styled__default['default'].div.withConfig({
   componentId: "sc-1ru2no0-2"
-})(["display:flex;justify-content:flex-end;align-items:center;pointer-events:none;background:white;height:", ";margin-top:", ";width:100%;height:100%;&:hover{z-index:1;}"], function (props) {
-  return props.rowSize === 'normal' ? '36px' : '28px';
-}, function (props) {
-  return props.rowSize === 'normal' ? '0' : '0';
+})(["display:flex;justify-content:flex-end;align-items:center;pointer-events:none;background:white;height:28px;margin-top:4px;width:100%;padding-left:4px;&:hover{z-index:1;}:after{content:'';position:absolute;left:0px;top:4px;bottom:4px;width:1px;background-color:", ";z-index:7;}"], function (props) {
+  return props.theme.colors.neutral['080'];
 }); // eslint-disable-next-line react/prop-types
 
 var Toolbar = function Toolbar(_ref) {
@@ -139,23 +137,38 @@ var Toolbar = function Toolbar(_ref) {
       show = _useState2[0],
       setShow = _useState2[1];
 
-  return /*#__PURE__*/React__default['default'].createElement(ToolbarPosition, null, /*#__PURE__*/React__default['default'].createElement(ToolbarWrapper, {
+  var _useState3 = React.useState(false),
+      _useState4 = _slicedToArray__default['default'](_useState3, 2),
+      clicked = _useState4[0],
+      setClicked = _useState4[1];
+
+  var toolbarRef = React.useRef(null);
+  var handleOnClickOutside = React.useCallback(function () {
+    setShow(false);
+    setClicked(false);
+  }, []);
+  var handleOnClick = React.useCallback(function () {
+    setShow(true);
+    setClicked(true);
+  }, []);
+  hooks.useOnClickOutside(toolbarRef, handleOnClickOutside);
+  return /*#__PURE__*/React__default['default'].createElement(ToolbarPosition, {
+    ref: toolbarRef
+  }, /*#__PURE__*/React__default['default'].createElement(ToolbarWrapper, {
     onMouseEnter: function onMouseEnter() {
       return setShow(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setShow(false);
+      return setShow(clicked);
     }
   }, show && /*#__PURE__*/React__default['default'].createElement(ToolbarBtns, null, children), /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], {
     buttonType: "text",
     className: "toolbar-trigger",
     "data-testid": configs_constants.DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
     icon: /*#__PURE__*/React__default['default'].createElement(MoreOptionsVert__default['default'], null),
-    onClick: function onClick() {
-      return setShow(true);
-    },
+    onClick: handleOnClick,
     onKeyDown: function onKeyDown(e) {
-      return ['Enter', 'Space'].includes(e.code) && setShow(true);
+      return ['Enter', 'Space'].includes(e.code) && handleOnClick();
     },
     tabIndex: 0
   })));

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../../../../src/exported-related/Toolbar/Toolbar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';\nimport { DATA_TESTID } from '../../configs';\n\nconst ToolbarBtns = styled.div`\n  & > .em-ds-toolbar {\n    box-shadow: none;\n  }\n`;\n\nconst ToolbarWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  height: 36px;\n  margin-right: 1px;\n  pointer-events: all;\n  &:hover {\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n    & > .toolbar-trigger {\n      border: none;\n    }\n  }\n`;\n\nconst ToolbarPosition = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: white;\n  height: ${(props) => (props.rowSize === 'normal' ? '36px' : '28px')};\n  margin-top: ${(props) => (props.rowSize === 'normal' ? '0' : '0')};\n  width: 100%;\n  height: 100%;\n  &:hover {\n    z-index: 1;\n  }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar = ({ children }) => {\n  const [show, setShow] = useState(false);\n\n  return (\n    <ToolbarPosition>\n      <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n        {show && <ToolbarBtns>{children}</ToolbarBtns>}\n        <DSButton\n          buttonType=\"text\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          icon={<MoreOptionsVert />}\n          onClick={() => setShow(true)}\n          onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && setShow(true)}\n          tabIndex={0}\n        />\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n"],"names":["ToolbarBtns","styled","div","ToolbarWrapper","ToolbarPosition","props","rowSize","Toolbar","children","useState","show","setShow","React","DSButton","DATA_TESTID","DATA_TABLE_TOOLBAR_TRIGGER","MoreOptionsVert","e","includes","code"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAMA,WAAW,gBAAGC,0BAAM,CAACC,GAAV;AAAA;AAAA,4CAAjB;AAMA,IAAMC,cAAc,gBAAGF,0BAAM,CAACC,GAAV;AAAA;AAAA,uMAApB;AAcA,IAAME,eAAe,gBAAGH,0BAAM,CAACC,GAAV;AAAA;AAAA,6KAMT,UAACG,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,QAAlB,GAA6B,MAA7B,GAAsC,MAAlD;AAAA,CANS,EAOL,UAACD,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,QAAlB,GAA6B,GAA7B,GAAmC,GAA/C;AAAA,CAPK,CAArB;;IAgBaC,OAAO,GAAG,SAAVA,OAAU,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AACvC,kBAAwBC,cAAQ,CAAC,KAAD,CAAhC;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,sBACEC,wCAAC,eAAD,qBACEA,wCAAC,cAAD;AAAgB,IAAA,YAAY,EAAE;AAAA,aAAMD,OAAO,CAAC,IAAD,CAAb;AAAA,KAA9B;AAAmD,IAAA,YAAY,EAAE;AAAA,aAAMA,OAAO,CAAC,KAAD,CAAb;AAAA;AAAjE,KACGD,IAAI,iBAAIE,wCAAC,WAAD,QAAcJ,QAAd,CADX,eAEEI,wCAACC,4BAAD;AACE,IAAA,UAAU,EAAC,MADb;AAEE,IAAA,SAAS,EAAC,iBAFZ;AAGE,mBAAaC,6BAAW,CAACC,0BAH3B;AAIE,IAAA,IAAI,eAAEH,wCAACI,mCAAD,OAJR;AAKE,IAAA,OAAO,EAAE;AAAA,aAAML,OAAO,CAAC,IAAD,CAAb;AAAA,KALX;AAME,IAAA,SAAS,EAAE,mBAACM,CAAD;AAAA,aAAO,CAAC,OAAD,EAAU,OAAV,EAAmBC,QAAnB,CAA4BD,CAAC,CAACE,IAA9B,KAAuCR,OAAO,CAAC,IAAD,CAArD;AAAA,KANb;AAOE,IAAA,QAAQ,EAAE;AAPZ,IAFF,CADF,CADF;AAgBD;;;;"}
+{"version":3,"file":"Toolbar.js","sources":["../../../../src/exported-related/Toolbar/Toolbar.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';\nimport { useOnClickOutside } from '@elliemae/ds-utilities/hooks';\nimport { DATA_TESTID, ZIndexDataTable } from '../../configs';\n\nconst ToolbarBtns = styled.div`\n  & > .em-ds-toolbar {\n    box-shadow: none;\n  }\n`;\n\nconst ToolbarWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  height: 36px;\n  margin-right: 1px;\n  pointer-events: all;\n  &:hover {\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n    & > .toolbar-trigger {\n      border: none;\n    }\n  }\n`;\n\nconst ToolbarPosition = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: white;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 4px;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: ${(props) => props.theme.colors.neutral['080']};\n    z-index: 7;\n  }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar: React.ComponentType = ({ children }) => {\n  const [show, setShow] = useState(false);\n  const [clicked, setClicked] = useState(false);\n\n  const toolbarRef = useRef(null);\n\n  const handleOnClickOutside = useCallback(() => {\n    setShow(false);\n    setClicked(false);\n  }, []);\n\n  const handleOnClick = useCallback(() => {\n    setShow(true);\n    setClicked(true);\n  }, []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  return (\n    <ToolbarPosition ref={toolbarRef}>\n      <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(clicked)}>\n        {show && <ToolbarBtns>{children}</ToolbarBtns>}\n        <DSButton\n          buttonType=\"text\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          icon={<MoreOptionsVert />}\n          onClick={handleOnClick}\n          onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && handleOnClick()}\n          tabIndex={0}\n        />\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n"],"names":["ToolbarBtns","styled","div","ToolbarWrapper","ToolbarPosition","props","theme","colors","neutral","Toolbar","children","useState","show","setShow","clicked","setClicked","toolbarRef","useRef","handleOnClickOutside","useCallback","handleOnClick","useOnClickOutside","React","DSButton","DATA_TESTID","DATA_TABLE_TOOLBAR_TRIGGER","MoreOptionsVert","e","includes","code"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,WAAW,gBAAGC,0BAAM,CAACC,GAAV;AAAA;AAAA,4CAAjB;AAMA,IAAMC,cAAc,gBAAGF,0BAAM,CAACC,GAAV;AAAA;AAAA,uMAApB;AAcA,IAAME,eAAe,gBAAGH,0BAAM,CAACC,GAAV;AAAA;AAAA,4RAoBG,UAACG,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CApBH,CAArB;;IA0BaC,OAA4B,GAAG,SAA/BA,OAA+B,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AAC5D,kBAAwBC,cAAQ,CAAC,KAAD,CAAhC;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AACA,mBAA8BF,cAAQ,CAAC,KAAD,CAAtC;AAAA;AAAA,MAAOG,OAAP;AAAA,MAAgBC,UAAhB;;AAEA,MAAMC,UAAU,GAAGC,YAAM,CAAC,IAAD,CAAzB;AAEA,MAAMC,oBAAoB,GAAGC,iBAAW,CAAC,YAAM;AAC7CN,IAAAA,OAAO,CAAC,KAAD,CAAP;AACAE,IAAAA,UAAU,CAAC,KAAD,CAAV;AACD,GAHuC,EAGrC,EAHqC,CAAxC;AAKA,MAAMK,aAAa,GAAGD,iBAAW,CAAC,YAAM;AACtCN,IAAAA,OAAO,CAAC,IAAD,CAAP;AACAE,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GAHgC,EAG9B,EAH8B,CAAjC;AAKAM,EAAAA,uBAAiB,CAACL,UAAD,EAAaE,oBAAb,CAAjB;AAEA,sBACEI,wCAAC,eAAD;AAAiB,IAAA,GAAG,EAAEN;AAAtB,kBACEM,wCAAC,cAAD;AAAgB,IAAA,YAAY,EAAE;AAAA,aAAMT,OAAO,CAAC,IAAD,CAAb;AAAA,KAA9B;AAAmD,IAAA,YAAY,EAAE;AAAA,aAAMA,OAAO,CAACC,OAAD,CAAb;AAAA;AAAjE,KACGF,IAAI,iBAAIU,wCAAC,WAAD,QAAcZ,QAAd,CADX,eAEEY,wCAACC,4BAAD;AACE,IAAA,UAAU,EAAC,MADb;AAEE,IAAA,SAAS,EAAC,iBAFZ;AAGE,mBAAaC,6BAAW,CAACC,0BAH3B;AAIE,IAAA,IAAI,eAAEH,wCAACI,mCAAD,OAJR;AAKE,IAAA,OAAO,EAAEN,aALX;AAME,IAAA,SAAS,EAAE,mBAACO,CAAD;AAAA,aAAO,CAAC,OAAD,EAAU,OAAV,EAAmBC,QAAnB,CAA4BD,CAAC,CAACE,IAA9B,KAAuCT,aAAa,EAA3D;AAAA,KANb;AAOE,IAAA,QAAQ,EAAE;AAPZ,IAFF,CADF,CADF;AAgBD;;;;"}

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

@@ -8,6 +8,7 @@ require('react');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../configs/constants.js');
 require('react-virtual');
 require('../../configs/useRowFlattenization.js');
@@ -54,7 +55,6 @@ require('../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../../parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../redux/reducers/index.js');
 require('redux');
 require('../../redux/reducers/headersReducers/headersReducers.js');

package/cjs/index.js

@@ -45,6 +45,7 @@ require('./parts/FilterBar/FiltersBar.js');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
 require('styled-components');
+require('@elliemae/ds-utilities/hooks');
 require('@elliemae/ds-icons/ArrowShortReturn');
 require('@elliemae/ds-icons');
 require('@elliemae/ds-form/Checkbox');
@@ -94,7 +95,6 @@ require('./helpers/dndkit/tree/customCollisionDetection.js');
 require('./helpers/dndkit/tree/useTreeAnnouncements.js');
 require('./parts/HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('./hooks/useRecoverFocusRow.js');
 require('@elliemae/ds-truncated-tooltip-text');
 require('./prop-types.js');

package/cjs/parts/FilterBar/FiltersBar.js

@@ -10,6 +10,7 @@ var MoreOptionsVert = require('@elliemae/ds-icons/MoreOptionsVert');
 require('../../styled-256fc644.js');
 require('@babel/runtime/helpers/slicedToArray');
 require('styled-components');
+require('@elliemae/ds-utilities/hooks');
 require('../../configs/constants.js');
 require('react-virtual');
 require('../../configs/useRowFlattenization.js');
@@ -62,7 +63,6 @@ require('../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../redux/reducers/index.js');
 require('redux');
 require('../../redux/reducers/headersReducers/headersReducers.js');

package/cjs/parts/Filters/index.js

@@ -10,6 +10,7 @@ require('@babel/runtime/helpers/slicedToArray');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../configs/constants.js');
 require('react-virtual');
 require('../../configs/useRowFlattenization.js');
@@ -57,7 +58,6 @@ require('../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../exported-related/RowVariants.js');
 require('../../exported-related/Filters/singleSelectFilterFn.js');
 require('../../exported-related/Filters/multiSelectFilterFn.js');

package/cjs/parts/RowVariants/index.js

@@ -10,6 +10,7 @@ require('@babel/runtime/helpers/slicedToArray');
 require('styled-components');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
+require('@elliemae/ds-utilities/hooks');
 require('../../configs/constants.js');
 require('react-virtual');
 require('../../configs/useRowFlattenization.js');
@@ -55,7 +56,6 @@ require('../../helpers/dndkit/tree/customCollisionDetection.js');
 require('../../helpers/dndkit/tree/useTreeAnnouncements.js');
 require('../HoC/DragOverlayContext.js');
 require('react-popper');
-require('@elliemae/ds-utilities/hooks');
 require('../../redux/reducers/index.js');
 require('redux');
 require('../../redux/reducers/headersReducers/headersReducers.js');

package/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -5,6 +5,7 @@ export { C as ComboboxEditableCell } from '../../../styled-e953974e.js';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../configs/constants.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
@@ -52,7 +53,6 @@ import '../../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../../redux/reducers/index.js';
 import 'redux';
 import '../../../redux/reducers/headersReducers/headersReducers.js';

package/esm/addons/Editables/DateEditableCell/DateEditableCell.js

@@ -4,6 +4,7 @@ import { E as EditableCell } from '../../../styled-e953974e.js';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../configs/constants.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
@@ -51,7 +52,6 @@ import '../../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../../redux/reducers/index.js';
 import 'redux';
 import '../../../redux/reducers/headersReducers/headersReducers.js';

package/esm/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -4,6 +4,7 @@ import 'styled-components';
 export { k as TextEditableCell } from '../../../styled-e953974e.js';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../configs/constants.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
@@ -51,7 +52,6 @@ import '../../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../../redux/reducers/index.js';
 import 'redux';
 import '../../../redux/reducers/headersReducers/headersReducers.js';

package/esm/addons/Filters/Components/DateRangeFilter/index.js

@@ -7,6 +7,7 @@ export { f as DateRangeFilter } from '../../../../styled-e953974e.js';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
@@ -53,7 +54,6 @@ import '../../../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../../../redux/reducers/index.js';
 import 'redux';
 import '../../../../redux/reducers/headersReducers/headersReducers.js';

package/esm/addons/Filters/Components/NumberRangeFilter/index.js

@@ -8,6 +8,7 @@ import '@babel/runtime/helpers/esm/slicedToArray';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
@@ -53,7 +54,6 @@ import '../../../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../../../redux/reducers/index.js';
 import 'redux';
 import '../../../../redux/reducers/headersReducers/headersReducers.js';

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

@@ -10,6 +10,7 @@ export { K as BaseSelectFilter } from '../../../../styled-e953974e.js';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../../configs/constants.js';
 import '../../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
@@ -52,7 +53,6 @@ import '../../../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../../../redux/reducers/index.js';
 import 'redux';
 import '../../../../redux/reducers/headersReducers/headersReducers.js';

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

@@ -4,6 +4,7 @@ import '@babel/runtime/helpers/esm/slicedToArray';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
@@ -51,7 +52,6 @@ import '../../../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../../../redux/reducers/index.js';
 import 'redux';
 import '../../../../redux/reducers/headersReducers/headersReducers.js';

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

@@ -4,6 +4,7 @@ import '@babel/runtime/helpers/esm/slicedToArray';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
@@ -51,7 +52,6 @@ import '../../../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../../../redux/reducers/index.js';
 import 'redux';
 import '../../../../redux/reducers/headersReducers/headersReducers.js';

package/esm/addons/Filters/Components/SingleDateFilter/index.js

@@ -7,6 +7,7 @@ export { g as SingleDateFilter } from '../../../../styled-e953974e.js';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
@@ -53,7 +54,6 @@ import '../../../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../../../redux/reducers/index.js';
 import 'redux';
 import '../../../../redux/reducers/headersReducers/headersReducers.js';

package/esm/addons/Filters/Components/TextInputFilter/index.js

@@ -5,6 +5,7 @@ import '@babel/runtime/helpers/esm/slicedToArray';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../../../configs/constants.js';
 import 'react-virtual';
 import '../../../../configs/useRowFlattenization.js';
@@ -52,7 +53,6 @@ import '../../../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../../../redux/reducers/index.js';
 import 'redux';
 import '../../../../redux/reducers/headersReducers/headersReducers.js';

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

@@ -1,8 +1,9 @@
 import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import React, { useState } from 'react';
+import React, { useState, useRef, useCallback } from 'react';
 import styled from 'styled-components';
 import DSButton from '@elliemae/ds-button';
 import MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';
+import { useOnClickOutside } from '@elliemae/ds-utilities/hooks';
 import { DATA_TESTID } from '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
@@ -49,7 +50,6 @@ import '../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../redux/reducers/index.js';
 import 'redux';
 import '../../redux/reducers/headersReducers/headersReducers.js';
@@ -113,10 +113,8 @@ var ToolbarWrapper = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;align-items:center;height:36px;margin-right:1px;pointer-events:all;&:hover{box-shadow:0 1px 2px 0 rgba(0,0,0,0.13),0 1px 2px 0 rgba(0,0,0,0.2);& > .toolbar-trigger{border:none;}}"]);
 var ToolbarPosition = /*#__PURE__*/styled.div.withConfig({
   componentId: "sc-1ru2no0-2"
-})(["display:flex;justify-content:flex-end;align-items:center;pointer-events:none;background:white;height:", ";margin-top:", ";width:100%;height:100%;&:hover{z-index:1;}"], function (props) {
-  return props.rowSize === 'normal' ? '36px' : '28px';
-}, function (props) {
-  return props.rowSize === 'normal' ? '0' : '0';
+})(["display:flex;justify-content:flex-end;align-items:center;pointer-events:none;background:white;height:28px;margin-top:4px;width:100%;padding-left:4px;&:hover{z-index:1;}:after{content:'';position:absolute;left:0px;top:4px;bottom:4px;width:1px;background-color:", ";z-index:7;}"], function (props) {
+  return props.theme.colors.neutral['080'];
 }); // eslint-disable-next-line react/prop-types
 
 var Toolbar = function Toolbar(_ref) {
@@ -127,23 +125,38 @@ var Toolbar = function Toolbar(_ref) {
       show = _useState2[0],
       setShow = _useState2[1];
 
-  return /*#__PURE__*/React.createElement(ToolbarPosition, null, /*#__PURE__*/React.createElement(ToolbarWrapper, {
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      clicked = _useState4[0],
+      setClicked = _useState4[1];
+
+  var toolbarRef = useRef(null);
+  var handleOnClickOutside = useCallback(function () {
+    setShow(false);
+    setClicked(false);
+  }, []);
+  var handleOnClick = useCallback(function () {
+    setShow(true);
+    setClicked(true);
+  }, []);
+  useOnClickOutside(toolbarRef, handleOnClickOutside);
+  return /*#__PURE__*/React.createElement(ToolbarPosition, {
+    ref: toolbarRef
+  }, /*#__PURE__*/React.createElement(ToolbarWrapper, {
     onMouseEnter: function onMouseEnter() {
       return setShow(true);
     },
     onMouseLeave: function onMouseLeave() {
-      return setShow(false);
+      return setShow(clicked);
     }
   }, show && /*#__PURE__*/React.createElement(ToolbarBtns, null, children), /*#__PURE__*/React.createElement(DSButton, {
     buttonType: "text",
     className: "toolbar-trigger",
     "data-testid": DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER,
     icon: /*#__PURE__*/React.createElement(MoreOptionsVert, null),
-    onClick: function onClick() {
-      return setShow(true);
-    },
+    onClick: handleOnClick,
     onKeyDown: function onKeyDown(e) {
-      return ['Enter', 'Space'].includes(e.code) && setShow(true);
+      return ['Enter', 'Space'].includes(e.code) && handleOnClick();
     },
     tabIndex: 0
   })));

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../../../../src/exported-related/Toolbar/Toolbar.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';\nimport { DATA_TESTID } from '../../configs';\n\nconst ToolbarBtns = styled.div`\n  & > .em-ds-toolbar {\n    box-shadow: none;\n  }\n`;\n\nconst ToolbarWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  height: 36px;\n  margin-right: 1px;\n  pointer-events: all;\n  &:hover {\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n    & > .toolbar-trigger {\n      border: none;\n    }\n  }\n`;\n\nconst ToolbarPosition = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: white;\n  height: ${(props) => (props.rowSize === 'normal' ? '36px' : '28px')};\n  margin-top: ${(props) => (props.rowSize === 'normal' ? '0' : '0')};\n  width: 100%;\n  height: 100%;\n  &:hover {\n    z-index: 1;\n  }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar = ({ children }) => {\n  const [show, setShow] = useState(false);\n\n  return (\n    <ToolbarPosition>\n      <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(false)}>\n        {show && <ToolbarBtns>{children}</ToolbarBtns>}\n        <DSButton\n          buttonType=\"text\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          icon={<MoreOptionsVert />}\n          onClick={() => setShow(true)}\n          onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && setShow(true)}\n          tabIndex={0}\n        />\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n"],"names":["ToolbarBtns","styled","div","ToolbarWrapper","ToolbarPosition","props","rowSize","Toolbar","children","useState","show","setShow","DATA_TESTID","DATA_TABLE_TOOLBAR_TRIGGER","e","includes","code"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,IAAMA,WAAW,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA,4CAAjB;AAMA,IAAMC,cAAc,gBAAGF,MAAM,CAACC,GAAV;AAAA;AAAA,uMAApB;AAcA,IAAME,eAAe,gBAAGH,MAAM,CAACC,GAAV;AAAA;AAAA,6KAMT,UAACG,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,QAAlB,GAA6B,MAA7B,GAAsC,MAAlD;AAAA,CANS,EAOL,UAACD,KAAD;AAAA,SAAYA,KAAK,CAACC,OAAN,KAAkB,QAAlB,GAA6B,GAA7B,GAAmC,GAA/C;AAAA,CAPK,CAArB;;IAgBaC,OAAO,GAAG,SAAVA,OAAU,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AACvC,kBAAwBC,QAAQ,CAAC,KAAD,CAAhC;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AAEA,sBACE,oBAAC,eAAD,qBACE,oBAAC,cAAD;AAAgB,IAAA,YAAY,EAAE;AAAA,aAAMA,OAAO,CAAC,IAAD,CAAb;AAAA,KAA9B;AAAmD,IAAA,YAAY,EAAE;AAAA,aAAMA,OAAO,CAAC,KAAD,CAAb;AAAA;AAAjE,KACGD,IAAI,iBAAI,oBAAC,WAAD,QAAcF,QAAd,CADX,eAEE,oBAAC,QAAD;AACE,IAAA,UAAU,EAAC,MADb;AAEE,IAAA,SAAS,EAAC,iBAFZ;AAGE,mBAAaI,WAAW,CAACC,0BAH3B;AAIE,IAAA,IAAI,eAAE,oBAAC,eAAD,OAJR;AAKE,IAAA,OAAO,EAAE;AAAA,aAAMF,OAAO,CAAC,IAAD,CAAb;AAAA,KALX;AAME,IAAA,SAAS,EAAE,mBAACG,CAAD;AAAA,aAAO,CAAC,OAAD,EAAU,OAAV,EAAmBC,QAAnB,CAA4BD,CAAC,CAACE,IAA9B,KAAuCL,OAAO,CAAC,IAAD,CAArD;AAAA,KANb;AAOE,IAAA,QAAQ,EAAE;AAPZ,IAFF,CADF,CADF;AAgBD;;;;"}
+{"version":3,"file":"Toolbar.js","sources":["../../../../src/exported-related/Toolbar/Toolbar.tsx"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react';\nimport styled from 'styled-components';\nimport DSButton from '@elliemae/ds-button';\nimport MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';\nimport { useOnClickOutside } from '@elliemae/ds-utilities/hooks';\nimport { DATA_TESTID, ZIndexDataTable } from '../../configs';\n\nconst ToolbarBtns = styled.div`\n  & > .em-ds-toolbar {\n    box-shadow: none;\n  }\n`;\n\nconst ToolbarWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  height: 36px;\n  margin-right: 1px;\n  pointer-events: all;\n  &:hover {\n    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.13), 0 1px 2px 0 rgba(0, 0, 0, 0.2);\n    & > .toolbar-trigger {\n      border: none;\n    }\n  }\n`;\n\nconst ToolbarPosition = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  pointer-events: none;\n  background: white;\n  height: 28px;\n  margin-top: 4px;\n  width: 100%;\n  padding-left: 4px;\n  &:hover {\n    z-index: 1;\n  }\n  :after {\n    content: '';\n    position: absolute;\n    left: 0px;\n    top: 4px;\n    bottom: 4px;\n    width: 1px;\n    background-color: ${(props) => props.theme.colors.neutral['080']};\n    z-index: 7;\n  }\n`;\n\n// eslint-disable-next-line react/prop-types\nexport const Toolbar: React.ComponentType = ({ children }) => {\n  const [show, setShow] = useState(false);\n  const [clicked, setClicked] = useState(false);\n\n  const toolbarRef = useRef(null);\n\n  const handleOnClickOutside = useCallback(() => {\n    setShow(false);\n    setClicked(false);\n  }, []);\n\n  const handleOnClick = useCallback(() => {\n    setShow(true);\n    setClicked(true);\n  }, []);\n\n  useOnClickOutside(toolbarRef, handleOnClickOutside);\n\n  return (\n    <ToolbarPosition ref={toolbarRef}>\n      <ToolbarWrapper onMouseEnter={() => setShow(true)} onMouseLeave={() => setShow(clicked)}>\n        {show && <ToolbarBtns>{children}</ToolbarBtns>}\n        <DSButton\n          buttonType=\"text\"\n          className=\"toolbar-trigger\"\n          data-testid={DATA_TESTID.DATA_TABLE_TOOLBAR_TRIGGER}\n          icon={<MoreOptionsVert />}\n          onClick={handleOnClick}\n          onKeyDown={(e) => ['Enter', 'Space'].includes(e.code) && handleOnClick()}\n          tabIndex={0}\n        />\n      </ToolbarWrapper>\n    </ToolbarPosition>\n  );\n};\n"],"names":["ToolbarBtns","styled","div","ToolbarWrapper","ToolbarPosition","props","theme","colors","neutral","Toolbar","children","useState","show","setShow","clicked","setClicked","toolbarRef","useRef","handleOnClickOutside","useCallback","handleOnClick","useOnClickOutside","DATA_TESTID","DATA_TABLE_TOOLBAR_TRIGGER","e","includes","code"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,IAAMA,WAAW,gBAAGC,MAAM,CAACC,GAAV;AAAA;AAAA,4CAAjB;AAMA,IAAMC,cAAc,gBAAGF,MAAM,CAACC,GAAV;AAAA;AAAA,uMAApB;AAcA,IAAME,eAAe,gBAAGH,MAAM,CAACC,GAAV;AAAA;AAAA,4RAoBG,UAACG,KAAD;AAAA,SAAWA,KAAK,CAACC,KAAN,CAAYC,MAAZ,CAAmBC,OAAnB,CAA2B,KAA3B,CAAX;AAAA,CApBH,CAArB;;IA0BaC,OAA4B,GAAG,SAA/BA,OAA+B,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;;AAC5D,kBAAwBC,QAAQ,CAAC,KAAD,CAAhC;AAAA;AAAA,MAAOC,IAAP;AAAA,MAAaC,OAAb;;AACA,mBAA8BF,QAAQ,CAAC,KAAD,CAAtC;AAAA;AAAA,MAAOG,OAAP;AAAA,MAAgBC,UAAhB;;AAEA,MAAMC,UAAU,GAAGC,MAAM,CAAC,IAAD,CAAzB;AAEA,MAAMC,oBAAoB,GAAGC,WAAW,CAAC,YAAM;AAC7CN,IAAAA,OAAO,CAAC,KAAD,CAAP;AACAE,IAAAA,UAAU,CAAC,KAAD,CAAV;AACD,GAHuC,EAGrC,EAHqC,CAAxC;AAKA,MAAMK,aAAa,GAAGD,WAAW,CAAC,YAAM;AACtCN,IAAAA,OAAO,CAAC,IAAD,CAAP;AACAE,IAAAA,UAAU,CAAC,IAAD,CAAV;AACD,GAHgC,EAG9B,EAH8B,CAAjC;AAKAM,EAAAA,iBAAiB,CAACL,UAAD,EAAaE,oBAAb,CAAjB;AAEA,sBACE,oBAAC,eAAD;AAAiB,IAAA,GAAG,EAAEF;AAAtB,kBACE,oBAAC,cAAD;AAAgB,IAAA,YAAY,EAAE;AAAA,aAAMH,OAAO,CAAC,IAAD,CAAb;AAAA,KAA9B;AAAmD,IAAA,YAAY,EAAE;AAAA,aAAMA,OAAO,CAACC,OAAD,CAAb;AAAA;AAAjE,KACGF,IAAI,iBAAI,oBAAC,WAAD,QAAcF,QAAd,CADX,eAEE,oBAAC,QAAD;AACE,IAAA,UAAU,EAAC,MADb;AAEE,IAAA,SAAS,EAAC,iBAFZ;AAGE,mBAAaY,WAAW,CAACC,0BAH3B;AAIE,IAAA,IAAI,eAAE,oBAAC,eAAD,OAJR;AAKE,IAAA,OAAO,EAAEH,aALX;AAME,IAAA,SAAS,EAAE,mBAACI,CAAD;AAAA,aAAO,CAAC,OAAD,EAAU,OAAV,EAAmBC,QAAnB,CAA4BD,CAAC,CAACE,IAA9B,KAAuCN,aAAa,EAA3D;AAAA,KANb;AAOE,IAAA,QAAQ,EAAE;AAPZ,IAFF,CADF,CADF;AAgBD;;;;"}

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

@@ -4,6 +4,7 @@ import 'react';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
@@ -50,7 +51,6 @@ import '../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../../parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../redux/reducers/index.js';
 import 'redux';
 import '../../redux/reducers/headersReducers/headersReducers.js';

package/esm/index.js

@@ -41,6 +41,7 @@ import './parts/FilterBar/FiltersBar.js';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
 import 'styled-components';
+import '@elliemae/ds-utilities/hooks';
 import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
 import '@elliemae/ds-form/Checkbox';
@@ -90,7 +91,6 @@ import './helpers/dndkit/tree/customCollisionDetection.js';
 import './helpers/dndkit/tree/useTreeAnnouncements.js';
 import './parts/HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import './hooks/useRecoverFocusRow.js';
 import '@elliemae/ds-truncated-tooltip-text';
 import './prop-types.js';

package/esm/parts/FilterBar/FiltersBar.js

@@ -6,6 +6,7 @@ import MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';
 import '../../styled-e953974e.js';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import 'styled-components';
+import '@elliemae/ds-utilities/hooks';
 import '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
@@ -58,7 +59,6 @@ import '../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../redux/reducers/index.js';
 import 'redux';
 import '../../redux/reducers/headersReducers/headersReducers.js';

package/esm/parts/Filters/index.js

@@ -6,6 +6,7 @@ import '@babel/runtime/helpers/esm/slicedToArray';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
@@ -53,7 +54,6 @@ import '../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../exported-related/RowVariants.js';
 import '../../exported-related/Filters/singleSelectFilterFn.js';
 import '../../exported-related/Filters/multiSelectFilterFn.js';

package/esm/parts/RowVariants/index.js

@@ -6,6 +6,7 @@ import '@babel/runtime/helpers/esm/slicedToArray';
 import 'styled-components';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-utilities/hooks';
 import '../../configs/constants.js';
 import 'react-virtual';
 import '../../configs/useRowFlattenization.js';
@@ -51,7 +52,6 @@ import '../../helpers/dndkit/tree/customCollisionDetection.js';
 import '../../helpers/dndkit/tree/useTreeAnnouncements.js';
 import '../HoC/DragOverlayContext.js';
 import 'react-popper';
-import '@elliemae/ds-utilities/hooks';
 import '../../redux/reducers/index.js';
 import 'redux';
 import '../../redux/reducers/headersReducers/headersReducers.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-data-table",
-  "version": "1.54.0-next.8",
+  "version": "1.54.0-rc.4",
   "license": "MIT",
   "description": "Ellie Mae - Dim Sum - Data Table",
   "main": "cjs/index.js",
@@ -18,9 +18,9 @@
   "dependencies": {
     "@dnd-kit/core": "^3.0.1",
     "@dnd-kit/sortable": "^3.0.1",
-    "@elliemae/ds-basic": "1.54.0-next.8",
-    "@elliemae/ds-date-picker": "1.54.0-next.8",
-    "@elliemae/ds-date-range-picker": "1.54.0-next.8",
+    "@elliemae/ds-basic": "1.54.0-rc.4",
+    "@elliemae/ds-date-picker": "1.54.0-rc.4",
+    "@elliemae/ds-date-range-picker": "1.54.0-rc.4",
     "@popperjs/core": "^2.9.2",
     "@reduxjs/toolkit": "^1.5.0",
     "array-move": "^3.0.1",