@elliemae/ds-data-table 1.53.4-rc.3 → 1.53.5-rc.0

package/cjs/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHierarchyDndkitConfig.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useHierarchyDndkitConfig.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js

@@ -12,7 +12,7 @@ require('@babel/runtime/helpers/defineProperty');
 require('@elliemae/ds-icons/ArrowShortReturn');
 require('styled-components');
 require('@elliemae/ds-icons');
-var addons_Columns_ColumnExpand_ColumnExpand = require('../../../styled-70bdf2af.js');
+var addons_Columns_ColumnExpand_ColumnExpand = require('../../../styled-256fc644.js');
 require('@elliemae/ds-form/Checkbox');
 require('@elliemae/ds-form/Radio');
 require('@elliemae/ds-grid');
@@ -92,8 +92,7 @@ require('../../../parts/SortByCaret.js');
 require('@elliemae/ds-icons/ArrowheadDown');
 require('@elliemae/ds-icons/ArrowheadUp');
 require('@elliemae/ds-icons/DatePicker2');
-require('@elliemae/ds-date-picker');
-require('@elliemae/ds-date-range-picker');
+require('@elliemae/ds-controlled-form');
 require('@elliemae/ds-form/TextBox');
 require('@elliemae/ds-icons/SearchXsmall');
 require('../../../addons/Filters/Components/SelectFilter/components.js');

package/cjs/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js.map

@@ -1 +1 @@
-{"version":3,"file":"useHierarchyPreviewHandlers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useHierarchyPreviewHandlers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var DataTable = require('./DataTable.js');
-var addons_Columns_ColumnExpand_ColumnExpand = require('./styled-70bdf2af.js');
+var addons_Columns_ColumnExpand_ColumnExpand = require('./styled-256fc644.js');
 var exportedRelated_Toolbar_Toolbar = require('./exported-related/Toolbar/Toolbar.js');
 var exportedRelated_groupBy = require('./exported-related/groupBy.js');
 var exportedRelated_FilterTypes = require('./exported-related/FilterTypes.js');
@@ -113,8 +113,7 @@ require('./parts/SortByCaret.js');
 require('@elliemae/ds-icons/ArrowheadDown');
 require('@elliemae/ds-icons/ArrowheadUp');
 require('@elliemae/ds-icons/DatePicker2');
-require('@elliemae/ds-date-picker');
-require('@elliemae/ds-date-range-picker');
+require('@elliemae/ds-controlled-form');
 require('@elliemae/ds-form/TextBox');
 require('@elliemae/ds-icons/SearchXsmall');
 require('./addons/Filters/Components/SelectFilter/components.js');

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/parts/Cells/Cell.js

@@ -6,7 +6,7 @@ require('@babel/runtime/helpers/slicedToArray');
 require('react');
 require('@elliemae/ds-truncated-tooltip-text');
 require('@elliemae/ds-grid');
-var addons_Columns_ColumnExpand_ColumnExpand = require('../../styled-70bdf2af.js');
+var addons_Columns_ColumnExpand_ColumnExpand = require('../../styled-256fc644.js');
 require('../../DataTableContext.js');
 require('../HoC/SortableItemContext.js');
 require('@elliemae/ds-form/Checkbox');
@@ -89,8 +89,7 @@ require('../SortByCaret.js');
 require('@elliemae/ds-icons/ArrowheadDown');
 require('@elliemae/ds-icons/ArrowheadUp');
 require('@elliemae/ds-icons/DatePicker2');
-require('@elliemae/ds-date-picker');
-require('@elliemae/ds-date-range-picker');
+require('@elliemae/ds-controlled-form');
 require('@elliemae/ds-form/TextBox');
 require('@elliemae/ds-icons/SearchXsmall');
 require('../../addons/Filters/Components/SelectFilter/components.js');

package/cjs/parts/Cells/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Cell.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/parts/Cells/index.js

@@ -1,7 +1,7 @@
 'use strict';
 
 require('react');
-var addons_Columns_ColumnExpand_ColumnExpand = require('../../styled-70bdf2af.js');
+var addons_Columns_ColumnExpand_ColumnExpand = require('../../styled-256fc644.js');
 require('../../DataTableContext.js');
 require('styled-components');
 require('@elliemae/ds-grid');
@@ -92,8 +92,7 @@ require('../SortByCaret.js');
 require('@elliemae/ds-icons/ArrowheadDown');
 require('@elliemae/ds-icons/ArrowheadUp');
 require('@elliemae/ds-icons/DatePicker2');
-require('@elliemae/ds-date-picker');
-require('@elliemae/ds-date-range-picker');
+require('@elliemae/ds-controlled-form');
 require('@elliemae/ds-form/TextBox');
 require('@elliemae/ds-icons/SearchXsmall');
 require('../../addons/Filters/Components/SelectFilter/components.js');

package/cjs/parts/Cells/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/parts/DnDHandle.js

@@ -13,7 +13,7 @@ require('../configs/useRowFlattenization.js');
 require('@babel/runtime/helpers/toConsumableArray');
 require('@elliemae/ds-icons/ArrowShortReturn');
 require('@elliemae/ds-icons');
-var addons_Columns_ColumnExpand_ColumnExpand = require('../styled-70bdf2af.js');
+var addons_Columns_ColumnExpand_ColumnExpand = require('../styled-256fc644.js');
 require('@elliemae/ds-form/Checkbox');
 require('@elliemae/ds-form/Radio');
 require('@elliemae/ds-grid');
@@ -90,8 +90,7 @@ require('./SortByCaret.js');
 require('@elliemae/ds-icons/ArrowheadDown');
 require('@elliemae/ds-icons/ArrowheadUp');
 require('@elliemae/ds-icons/DatePicker2');
-require('@elliemae/ds-date-picker');
-require('@elliemae/ds-date-range-picker');
+require('@elliemae/ds-controlled-form');
 require('@elliemae/ds-form/TextBox');
 require('@elliemae/ds-icons/SearchXsmall');
 require('../addons/Filters/Components/SelectFilter/components.js');

package/cjs/parts/DnDHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DnDHandle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DnDHandle.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/parts/FilterBar/FiltersBar.js

@@ -7,7 +7,7 @@ var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var React = require('react');
 var DSButton = require('@elliemae/ds-button');
 var MoreOptionsVert = require('@elliemae/ds-icons/MoreOptionsVert');
-require('../../styled-70bdf2af.js');
+require('../../styled-256fc644.js');
 require('@babel/runtime/helpers/slicedToArray');
 require('styled-components');
 require('../../configs/constants.js');
@@ -98,8 +98,7 @@ require('../SortByCaret.js');
 require('@elliemae/ds-icons/ArrowheadDown');
 require('@elliemae/ds-icons/ArrowheadUp');
 require('@elliemae/ds-icons/DatePicker2');
-require('@elliemae/ds-date-picker');
-require('@elliemae/ds-date-range-picker');
+require('@elliemae/ds-controlled-form');
 require('@elliemae/ds-form/TextBox');
 require('@elliemae/ds-icons/SearchXsmall');
 require('../../addons/Filters/Components/SelectFilter/components.js');
@@ -138,15 +137,26 @@ var FiltersBar = function FiltersBar() {
       filters = _useContext$tableProp.filters,
       visibleColumns = _useContext.visibleColumns;
 
+  var pillGroupRefs = React.useMemo(function () {
+    var refs = [];
+
+    for (var i = 0; i < filters.length; i += 1) {
+      refs.push( /*#__PURE__*/React__default['default'].createRef());
+    }
+
+    return refs;
+  }, [filters.length]);
+  var dropdownMenuRef = React.useRef(null);
   var removeAllFilters = React.useCallback(function () {
     onFiltersChange([]);
   }, [onFiltersChange]);
   return /*#__PURE__*/React__default['default'].createElement(parts_FilterBar_styled.StyledWrapper, {
     width: width,
     "aria-live": "polite",
-    "aria-relevant": "additions removals"
-  }, filters.map(function (_ref) {
-    var _visibleColumns$find;
+    "aria-relevant": "additions removals",
+    gutter: "xs"
+  }, filters.map(function (_ref, index) {
+    var _visibleColumns$find, _pillGroupRefs;
 
     var column = _ref.id,
         type = _ref.type,
@@ -173,7 +183,10 @@ var FiltersBar = function FiltersBar() {
       column: column,
       value: value,
       filters: filters,
-      onFiltersChange: onFiltersChange
+      onFiltersChange: onFiltersChange,
+      prevRef: pillGroupRefs[index - 1],
+      innerRef: pillGroupRefs[index],
+      nextRef: (_pillGroupRefs = pillGroupRefs[index + 1]) !== null && _pillGroupRefs !== void 0 ? _pillGroupRefs : dropdownMenuRef
     });
   }), /*#__PURE__*/React__default['default'].createElement(parts_FilterBar_styled.StyledDropdownMenu, {
     preventOverflow: "scrollParent",
@@ -184,6 +197,7 @@ var FiltersBar = function FiltersBar() {
     }].concat(_toConsumableArray__default['default']((filterBarProps === null || filterBarProps === void 0 ? void 0 : filterBarProps.extraOptions) || [])),
     triggerComponent: /*#__PURE__*/React__default['default'].createElement(DSButton__default['default'], {
       buttonType: "text",
+      innerRef: dropdownMenuRef,
       icon: /*#__PURE__*/React__default['default'].createElement(MoreOptionsVert__default['default'], null)
     })
   }));

package/cjs/parts/FilterBar/FiltersBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"FiltersBar.js","sources":["../../../../src/parts/FilterBar/FiltersBar.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext } from 'react';\nimport DSButton from '@elliemae/ds-button';\nimport VerticalElipsis from '@elliemae/ds-icons/MoreOptionsVert';\nimport { FILTER_TYPES } from '../../exported-related';\nimport { SelectPill, MultiSelectPill, SingleDatePill, DateRangePill, NumberRangePill, TextPill } from './components';\nimport DataTableContext from '../../DataTableContext';\nimport { StyledDropdownMenu, StyledWrapper } from './styled';\nimport { FilterPillComponent } from './types';\n\nconst pillRenderMapper: Record<string, FilterPillComponent<any>> = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.TEXT]: TextPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n};\n\nexport const FiltersBar: React.ComponentType = () => {\n  const {\n    tableProps: { width, filterBarProps, onFiltersChange, filters },\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n  }, [onFiltersChange]);\n\n  return (\n    <StyledWrapper width={width} aria-live=\"polite\" aria-relevant=\"additions removals\">\n      {filters.map(({ id: column, type, value }) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component: FilterPillComponent<any> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            value={value}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n          />\n        );\n      })}\n      <StyledDropdownMenu\n        preventOverflow=\"scrollParent\"\n        options={[\n          {\n            id: '__internal__option__clear__filters',\n            label: 'Clear Filters',\n            onClick: removeAllFilters,\n          },\n          ...(filterBarProps?.extraOptions || []),\n        ]}\n        triggerComponent={<DSButton buttonType=\"text\" icon={<VerticalElipsis />} />}\n      />\n    </StyledWrapper>\n  );\n};\n"],"names":["pillRenderMapper","FILTER_TYPES","SELECT","SelectPill","MULTI_SELECT","MultiSelectPill","TEXT","TextPill","SINGLE_DATE","SingleDatePill","DATE_RANGE","DateRangePill","NUMBER_RANGE","NumberRangePill","FiltersBar","useContext","DataTableContext","tableProps","width","filterBarProps","onFiltersChange","filters","visibleColumns","removeAllFilters","useCallback","React","StyledWrapper","map","column","id","type","value","columnHeader","find","col","accessor","Header","Component","filterType","customPillRenderer","StyledDropdownMenu","label","onClick","extraOptions","DSButton","VerticalElipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,gBAA0D,mFAC7DC,wCAAY,CAACC,MADgD,EACvCC,gDADuC,0DAE7DF,wCAAY,CAACG,YAFgD,EAEjCC,0DAFiC,0DAG7DJ,wCAAY,CAACK,IAHgD,EAGzCC,4CAHyC,0DAI7DN,wCAAY,CAACO,WAJgD,EAIlCC,wDAJkC,0DAK7DR,wCAAY,CAACS,UALgD,EAKnCC,sDALmC,0DAM7DV,wCAAY,CAACW,YANgD,EAMjCC,0DANiC,qBAAhE;IASaC,UAA+B,GAAG,SAAlCA,UAAkC,GAAM;AACnD,oBAGIC,gBAAU,CAACC,2BAAD,CAHd;AAAA,0CACEC,UADF;AAAA,MACgBC,KADhB,yBACgBA,KADhB;AAAA,MACuBC,cADvB,yBACuBA,cADvB;AAAA,MACuCC,eADvC,yBACuCA,eADvC;AAAA,MACwDC,OADxD,yBACwDA,OADxD;AAAA,MAEEC,cAFF,eAEEA,cAFF;;AAKA,MAAMC,gBAAgB,GAAGC,iBAAW,CAAC,YAAM;AACzCJ,IAAAA,eAAe,CAAC,EAAD,CAAf;AACD,GAFmC,EAEjC,CAACA,eAAD,CAFiC,CAApC;AAIA,sBACEK,wCAACC,oCAAD;AAAe,IAAA,KAAK,EAAER,KAAtB;AAA6B,iBAAU,QAAvC;AAAgD,qBAAc;AAA9D,KACGG,OAAO,CAACM,GAAR,CAAY,gBAAiC;AAAA;;AAAA,QAA1BC,MAA0B,QAA9BC,EAA8B;AAAA,QAAlBC,IAAkB,QAAlBA,IAAkB;AAAA,QAAZC,KAAY,QAAZA,KAAY;AAC5C,QAAMC,YAAY,2BAAGV,cAAc,CAACW,IAAf,CAAoB,UAACC,GAAD;AAAA,aAASA,GAAG,CAACC,QAAJ,KAAiBP,MAA1B;AAAA,KAApB,CAAH,yDAAG,qBAAuDQ,MAA5E;;AACA,QAAIC,SAAmC,GAAG;AAAA,aAAM,IAAN;AAAA,KAA1C;;AAEA,QAAMC,UAAU,GAAGR,IAAnB;;AACA,QAAIQ,UAAU,IAAItC,gBAAlB,EAAoC;AAClCqC,MAAAA,SAAS,GAAGrC,gBAAgB,CAACsC,UAAD,CAA5B;AACD,KAFD,MAEO,IAAInB,cAAJ,aAAIA,cAAJ,eAAIA,cAAc,CAAEoB,kBAApB,EAAwC;AAC7CF,MAAAA,SAAS,GAAGlB,cAAc,CAACoB,kBAA3B;AACD;;AACD,wBACEd,wCAAC,SAAD;AACE,MAAA,GAAG,EAAEG,MADP;AAEE,MAAA,YAAY,EAAE,OAAOI,YAAP,KAAwB,QAAxB,GAAmCA,YAAnC,GAAkDJ,MAFlE;AAGE,MAAA,MAAM,EAAEA,MAHV;AAIE,MAAA,KAAK,EAAEG,KAJT;AAKE,MAAA,OAAO,EAAEV,OALX;AAME,MAAA,eAAe,EAAED;AANnB,MADF;AAUD,GApBA,CADH,eAsBEK,wCAACe,yCAAD;AACE,IAAA,eAAe,EAAC,cADlB;AAEE,IAAA,OAAO,GACL;AACEX,MAAAA,EAAE,EAAE,oCADN;AAEEY,MAAAA,KAAK,EAAE,eAFT;AAGEC,MAAAA,OAAO,EAAEnB;AAHX,KADK,gDAMD,CAAAJ,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEwB,YAAhB,KAAgC,EAN/B,EAFT;AAUE,IAAA,gBAAgB,eAAElB,wCAACmB,4BAAD;AAAU,MAAA,UAAU,EAAC,MAArB;AAA4B,MAAA,IAAI,eAAEnB,wCAACoB,mCAAD;AAAlC;AAVpB,IAtBF,CADF;AAqCD;;;;"}
+{"version":3,"file":"FiltersBar.js","sources":["../../../../src/parts/FilterBar/FiltersBar.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport DSButton from '@elliemae/ds-button';\nimport VerticalElipsis from '@elliemae/ds-icons/MoreOptionsVert';\nimport { FILTER_TYPES } from '../../exported-related';\nimport { SelectPill, MultiSelectPill, SingleDatePill, DateRangePill, NumberRangePill, TextPill } from './components';\nimport DataTableContext from '../../DataTableContext';\nimport { StyledDropdownMenu, StyledWrapper } from './styled';\nimport { FilterPillComponent } from './types';\n\nconst pillRenderMapper: Record<string, FilterPillComponent<any>> = {\n  [FILTER_TYPES.SELECT]: SelectPill,\n  [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n  [FILTER_TYPES.TEXT]: TextPill,\n  [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n  [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n  [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n};\n\nexport const FiltersBar: React.ComponentType = () => {\n  const {\n    tableProps: { width, filterBarProps, onFiltersChange, filters },\n    visibleColumns,\n  } = useContext(DataTableContext);\n\n  const pillGroupRefs = useMemo(() => {\n    const refs: React.RefObject<HTMLElement>[] = [];\n    for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n    return refs;\n  }, [filters.length]);\n\n  const dropdownMenuRef = useRef(null);\n\n  const removeAllFilters = useCallback(() => {\n    onFiltersChange([]);\n  }, [onFiltersChange]);\n\n  return (\n    <StyledWrapper width={width} aria-live=\"polite\" aria-relevant=\"additions removals\" gutter=\"xs\">\n      {filters.map(({ id: column, type, value }, index) => {\n        const columnHeader = visibleColumns.find((col) => col.accessor === column)?.Header;\n        let Component: FilterPillComponent<any> = () => null;\n\n        const filterType = type;\n        if (filterType in pillRenderMapper) {\n          Component = pillRenderMapper[filterType];\n        } else if (filterBarProps?.customPillRenderer) {\n          Component = filterBarProps.customPillRenderer;\n        }\n        return (\n          <Component\n            key={column}\n            columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n            column={column}\n            value={value}\n            filters={filters}\n            onFiltersChange={onFiltersChange}\n            prevRef={pillGroupRefs[index - 1]}\n            innerRef={pillGroupRefs[index]}\n            nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n          />\n        );\n      })}\n      <StyledDropdownMenu\n        preventOverflow=\"scrollParent\"\n        options={[\n          {\n            id: '__internal__option__clear__filters',\n            label: 'Clear Filters',\n            onClick: removeAllFilters,\n          },\n          ...(filterBarProps?.extraOptions || []),\n        ]}\n        triggerComponent={<DSButton buttonType=\"text\" innerRef={dropdownMenuRef} icon={<VerticalElipsis />} />}\n      />\n    </StyledWrapper>\n  );\n};\n"],"names":["pillRenderMapper","FILTER_TYPES","SELECT","SelectPill","MULTI_SELECT","MultiSelectPill","TEXT","TextPill","SINGLE_DATE","SingleDatePill","DATE_RANGE","DateRangePill","NUMBER_RANGE","NumberRangePill","FiltersBar","useContext","DataTableContext","tableProps","width","filterBarProps","onFiltersChange","filters","visibleColumns","pillGroupRefs","useMemo","refs","i","length","push","React","createRef","dropdownMenuRef","useRef","removeAllFilters","useCallback","StyledWrapper","map","index","column","id","type","value","columnHeader","find","col","accessor","Header","Component","filterType","customPillRenderer","StyledDropdownMenu","label","onClick","extraOptions","DSButton","VerticalElipsis"],"mappings":"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"}

package/cjs/parts/FilterBar/components/DateRangePill.js

@@ -20,17 +20,24 @@ var DateRangePill = function DateRangePill(_ref) {
       column = _ref.column,
       value = _ref.value,
       filters = _ref.filters,
-      onFiltersChange = _ref.onFiltersChange;
+      onFiltersChange = _ref.onFiltersChange,
+      prevRef = _ref.prevRef,
+      innerRef = _ref.innerRef,
+      nextRef = _ref.nextRef;
   var handleOnRemove = React.useCallback(function () {
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
     onFiltersChange(filters.filter(function (filter) {
       return filter.id !== column;
     }));
-  }, [onFiltersChange, filters, column]);
-  return value !== null && value !== void 0 && value.startDate && value !== null && value !== void 0 && value.endDate ? /*#__PURE__*/React__default['default'].createElement(dsPills.LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value !== null && value !== void 0 && value.startDate && value !== null && value !== void 0 && value.endDate ? /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillGroupV2, null, /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, /*#__PURE__*/React__default['default'].createElement(dsPills.RemovablePill, {
+  }), /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "removable",
     label: "".concat(format(value.startDate), " - ").concat(format(value.endDate)),
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/cjs/parts/FilterBar/components/DateRangePill.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePill.js","sources":["../../../../../src/parts/FilterBar/components/DateRangePill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { LabeledPills, RemovablePill } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateRangePill: FilterPillComponent<{ startDate: string; endDate: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <LabeledPills label={columnHeader}>\n      <RemovablePill label={`${format(value.startDate)} - ${format(value.endDate)}`} onRemove={handleOnRemove} />\n    </LabeledPills>\n  ) : null;\n};\n"],"names":["format","value","replace","DateRangePill","columnHeader","column","filters","onFiltersChange","handleOnRemove","useCallback","filter","id","startDate","endDate","React","LabeledPills","RemovablePill"],"mappings":";;;;;;;;;;;AAAA;;AAKA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAmBA,KAAnB,aAAmBA,KAAnB,uBAAmBA,KAAK,CAAEC,OAAP,CAAe,IAAf,EAAqB,GAArB,CAAnB;AAAA,CAAf;;IAEaC,aAA0E,GAAG,SAA7EA,aAA6E,OAMpF;AAAA,MALJC,YAKI,QALJA,YAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJJ,KAGI,QAHJA,KAGI;AAAA,MAFJK,OAEI,QAFJA,OAEI;AAAA,MADJC,eACI,QADJA,eACI;AACJ,MAAMC,cAAc,GAAGC,iBAAW,CAAC,YAAM;AACvCF,IAAAA,eAAe,CAACD,OAAO,CAACI,MAAR,CAAe,UAACA,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcN,MAA1B;AAAA,KAAf,CAAD,CAAf;AACD,GAFiC,EAE/B,CAACE,eAAD,EAAkBD,OAAlB,EAA2BD,MAA3B,CAF+B,CAAlC;AAIA,SAAOJ,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEW,SAAP,IAAoBX,KAApB,aAAoBA,KAApB,eAAoBA,KAAK,CAAEY,OAA3B,gBACLC,wCAACC,oBAAD;AAAc,IAAA,KAAK,EAAEX;AAArB,kBACEU,wCAACE,qBAAD;AAAe,IAAA,KAAK,YAAKhB,MAAM,CAACC,KAAK,CAACW,SAAP,CAAX,gBAAkCZ,MAAM,CAACC,KAAK,CAACY,OAAP,CAAxC,CAApB;AAA+E,IAAA,QAAQ,EAAEL;AAAzF,IADF,CADK,GAIH,IAJJ;AAKD;;;;"}
+{"version":3,"file":"DateRangePill.js","sources":["../../../../../src/parts/FilterBar/components/DateRangePill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nconst format = (value: string) => value?.replace(/-/g, '/');\n\nexport const DateRangePill: FilterPillComponent<{ startDate: string; endDate: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value?.startDate && value?.endDate ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2\n        type=\"removable\"\n        label={`${format(value.startDate)} - ${format(value.endDate)}`}\n        onRemove={handleOnRemove}\n        innerRef={innerRef}\n      />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],"names":["format","value","replace","DateRangePill","columnHeader","column","filters","onFiltersChange","prevRef","innerRef","nextRef","handleOnRemove","useCallback","current","focus","filter","id","startDate","endDate","React","DSPillGroupV2","DSPillV2"],"mappings":";;;;;;;;;;;AAAA;;AAKA,IAAMA,MAAM,GAAG,SAATA,MAAS,CAACC,KAAD;AAAA,SAAmBA,KAAnB,aAAmBA,KAAnB,uBAAmBA,KAAK,CAAEC,OAAP,CAAe,IAAf,EAAqB,GAArB,CAAnB;AAAA,CAAf;;IAEaC,aAA0E,GAAG,SAA7EA,aAA6E,OASpF;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJJ,KAMI,QANJA,KAMI;AAAA,MALJK,OAKI,QALJA,OAKI;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,OACI,QADJA,OACI;AACJ,MAAMC,cAAc,GAAGC,iBAAW,CAAC,YAAM;AACvC,QAAIJ,OAAJ,aAAIA,OAAJ,eAAIA,OAAO,CAAEK,OAAb,EAAsBL,OAAO,CAACK,OAAR,CAAgBC,KAAhB,GAAtB,KACKJ,OAAO,CAACG,OAAR,CAAgBC,KAAhB;AACLP,IAAAA,eAAe,CAACD,OAAO,CAACS,MAAR,CAAe,UAACA,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcX,MAA1B;AAAA,KAAf,CAAD,CAAf;AACD,GAJiC,EAI/B,CAACE,eAAD,EAAkBD,OAAlB,EAA2BE,OAA3B,EAAoCE,OAApC,EAA6CL,MAA7C,CAJ+B,CAAlC;AAMA,SAAOJ,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEgB,SAAP,IAAoBhB,KAApB,aAAoBA,KAApB,eAAoBA,KAAK,CAAEiB,OAA3B,gBACLC,wCAACC,qBAAD,qBACED,wCAACE,gBAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEjB;AAA9B,IADF,eAEEe,wCAACE,gBAAD;AACE,IAAA,IAAI,EAAC,WADP;AAEE,IAAA,KAAK,YAAKrB,MAAM,CAACC,KAAK,CAACgB,SAAP,CAAX,gBAAkCjB,MAAM,CAACC,KAAK,CAACiB,OAAP,CAAxC,CAFP;AAGE,IAAA,QAAQ,EAAEP,cAHZ;AAIE,IAAA,QAAQ,EAAEF;AAJZ,IAFF,CADK,GAUH,IAVJ;AAWD;;;;"}

package/cjs/parts/FilterBar/components/MultiSelectPill.js

@@ -16,7 +16,10 @@ var MultiSelectPill = function MultiSelectPill(_ref) {
       column = _ref.column,
       value = _ref.value,
       filters = _ref.filters,
-      onFiltersChange = _ref.onFiltersChange;
+      onFiltersChange = _ref.onFiltersChange,
+      prevRef = _ref.prevRef,
+      innerRef = _ref.innerRef,
+      nextRef = _ref.nextRef;
   var handleOnRemove = React.useCallback(function (valToRemove) {
     var newFilters = _toConsumableArray__default['default'](filters);
 
@@ -26,17 +29,25 @@ var MultiSelectPill = function MultiSelectPill(_ref) {
     newFilters[filterIndex].value = value.filter(function (val) {
       return val !== valToRemove;
     });
+
+    if (newFilters[filterIndex].value.length === 0) {
+      if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
+    }
+
     onFiltersChange(newFilters);
-  }, [filters, value, onFiltersChange, column]);
-  return value !== null && value !== void 0 && value.length ? /*#__PURE__*/React__default['default'].createElement(dsPills.LabeledPills, {
+  }, [filters, value, onFiltersChange, column, prevRef, nextRef]);
+  return value !== null && value !== void 0 && value.length ? /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillGroupV2, null, /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, value.map(function (val) {
-    return /*#__PURE__*/React__default['default'].createElement(dsPills.RemovablePill, {
+  }), value.map(function (val) {
+    return /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
       key: val,
+      type: "removable",
       label: val,
       onRemove: function onRemove() {
         return handleOnRemove(val);
-      }
+      },
+      innerRef: innerRef
     });
   })) : null;
 };

package/cjs/parts/FilterBar/components/MultiSelectPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectPill.js","sources":["../../../../../src/parts/FilterBar/components/MultiSelectPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { LabeledPills, RemovablePill } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const MultiSelectPill: FilterPillComponent<string[]> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n}) => {\n  const handleOnRemove = useCallback(\n    (valToRemove) => {\n      const newFilters = [...filters];\n      const filterIndex = newFilters.findIndex((filter) => filter.id === column);\n      newFilters[filterIndex].value = value.filter((val) => val !== valToRemove);\n      onFiltersChange(newFilters);\n    },\n    [filters, value, onFiltersChange, column],\n  );\n\n  return value?.length ? (\n    <LabeledPills label={columnHeader}>\n      {value.map((val) => (\n        <RemovablePill key={val} label={val} onRemove={() => handleOnRemove(val)} />\n      ))}\n    </LabeledPills>\n  ) : null;\n};\n"],"names":["MultiSelectPill","columnHeader","column","value","filters","onFiltersChange","handleOnRemove","useCallback","valToRemove","newFilters","filterIndex","findIndex","filter","id","val","length","React","LabeledPills","map","RemovablePill"],"mappings":";;;;;;;;;;;;;IAKaA,eAA8C,GAAG,SAAjDA,eAAiD,OAMxD;AAAA,MALJC,YAKI,QALJA,YAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,eACI,QADJA,eACI;AACJ,MAAMC,cAAc,GAAGC,iBAAW,CAChC,UAACC,WAAD,EAAiB;AACf,QAAMC,UAAU,0CAAOL,OAAP,CAAhB;;AACA,QAAMM,WAAW,GAAGD,UAAU,CAACE,SAAX,CAAqB,UAACC,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcX,MAA1B;AAAA,KAArB,CAApB;AACAO,IAAAA,UAAU,CAACC,WAAD,CAAV,CAAwBP,KAAxB,GAAgCA,KAAK,CAACS,MAAN,CAAa,UAACE,GAAD;AAAA,aAASA,GAAG,KAAKN,WAAjB;AAAA,KAAb,CAAhC;AACAH,IAAAA,eAAe,CAACI,UAAD,CAAf;AACD,GAN+B,EAOhC,CAACL,OAAD,EAAUD,KAAV,EAAiBE,eAAjB,EAAkCH,MAAlC,CAPgC,CAAlC;AAUA,SAAOC,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEY,MAAP,gBACLC,wCAACC,oBAAD;AAAc,IAAA,KAAK,EAAEhB;AAArB,KACGE,KAAK,CAACe,GAAN,CAAU,UAACJ,GAAD;AAAA,wBACTE,wCAACG,qBAAD;AAAe,MAAA,GAAG,EAAEL,GAApB;AAAyB,MAAA,KAAK,EAAEA,GAAhC;AAAqC,MAAA,QAAQ,EAAE;AAAA,eAAMR,cAAc,CAACQ,GAAD,CAApB;AAAA;AAA/C,MADS;AAAA,GAAV,CADH,CADK,GAMH,IANJ;AAOD;;;;"}
+{"version":3,"file":"MultiSelectPill.js","sources":["../../../../../src/parts/FilterBar/components/MultiSelectPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const MultiSelectPill: FilterPillComponent<string[]> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(\n    (valToRemove) => {\n      const newFilters = [...filters];\n      const filterIndex = newFilters.findIndex((filter) => filter.id === column);\n      newFilters[filterIndex].value = value.filter((val) => val !== valToRemove);\n      if (newFilters[filterIndex].value.length === 0) {\n        if (prevRef?.current) prevRef.current.focus();\n        else nextRef.current.focus();\n      }\n      onFiltersChange(newFilters);\n    },\n    [filters, value, onFiltersChange, column, prevRef, nextRef],\n  );\n\n  return value?.length ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      {value.map((val) => (\n        <DSPillV2 key={val} type=\"removable\" label={val} onRemove={() => handleOnRemove(val)} innerRef={innerRef} />\n      ))}\n    </DSPillGroupV2>\n  ) : null;\n};\n"],"names":["MultiSelectPill","columnHeader","column","value","filters","onFiltersChange","prevRef","innerRef","nextRef","handleOnRemove","useCallback","valToRemove","newFilters","filterIndex","findIndex","filter","id","val","length","current","focus","React","DSPillGroupV2","DSPillV2","map"],"mappings":";;;;;;;;;;;;;IAKaA,eAA8C,GAAG,SAAjDA,eAAiD,OASxD;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,OACI,QADJA,OACI;AACJ,MAAMC,cAAc,GAAGC,iBAAW,CAChC,UAACC,WAAD,EAAiB;AACf,QAAMC,UAAU,0CAAOR,OAAP,CAAhB;;AACA,QAAMS,WAAW,GAAGD,UAAU,CAACE,SAAX,CAAqB,UAACC,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcd,MAA1B;AAAA,KAArB,CAApB;AACAU,IAAAA,UAAU,CAACC,WAAD,CAAV,CAAwBV,KAAxB,GAAgCA,KAAK,CAACY,MAAN,CAAa,UAACE,GAAD;AAAA,aAASA,GAAG,KAAKN,WAAjB;AAAA,KAAb,CAAhC;;AACA,QAAIC,UAAU,CAACC,WAAD,CAAV,CAAwBV,KAAxB,CAA8Be,MAA9B,KAAyC,CAA7C,EAAgD;AAC9C,UAAIZ,OAAJ,aAAIA,OAAJ,eAAIA,OAAO,CAAEa,OAAb,EAAsBb,OAAO,CAACa,OAAR,CAAgBC,KAAhB,GAAtB,KACKZ,OAAO,CAACW,OAAR,CAAgBC,KAAhB;AACN;;AACDf,IAAAA,eAAe,CAACO,UAAD,CAAf;AACD,GAV+B,EAWhC,CAACR,OAAD,EAAUD,KAAV,EAAiBE,eAAjB,EAAkCH,MAAlC,EAA0CI,OAA1C,EAAmDE,OAAnD,CAXgC,CAAlC;AAcA,SAAOL,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEe,MAAP,gBACLG,wCAACC,qBAAD,qBACED,wCAACE,gBAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEtB;AAA9B,IADF,EAEGE,KAAK,CAACqB,GAAN,CAAU,UAACP,GAAD;AAAA,wBACTI,wCAACE,gBAAD;AAAU,MAAA,GAAG,EAAEN,GAAf;AAAoB,MAAA,IAAI,EAAC,WAAzB;AAAqC,MAAA,KAAK,EAAEA,GAA5C;AAAiD,MAAA,QAAQ,EAAE;AAAA,eAAMR,cAAc,CAACQ,GAAD,CAApB;AAAA,OAA3D;AAAsF,MAAA,QAAQ,EAAEV;AAAhG,MADS;AAAA,GAAV,CAFH,CADK,GAOH,IAPJ;AAQD;;;;"}

package/cjs/parts/FilterBar/components/NumberRangePill.js

@@ -11,21 +11,30 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 /* eslint-disable react/prop-types */
 var NumberRangePill = function NumberRangePill(_ref) {
+  var _value$from, _value$to;
+
   var columnHeader = _ref.columnHeader,
       column = _ref.column,
       value = _ref.value,
       filters = _ref.filters,
-      onFiltersChange = _ref.onFiltersChange;
+      onFiltersChange = _ref.onFiltersChange,
+      prevRef = _ref.prevRef,
+      innerRef = _ref.innerRef,
+      nextRef = _ref.nextRef;
   var handleOnRemove = React.useCallback(function () {
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
     onFiltersChange(filters.filter(function (filter) {
       return filter.id !== column;
     }));
-  }, [onFiltersChange, filters, column]);
-  return value !== null && value !== void 0 && value.from && value !== null && value !== void 0 && value.to ? /*#__PURE__*/React__default['default'].createElement(dsPills.LabeledPills, {
+  }, [onFiltersChange, filters, column, prevRef, nextRef]);
+  return ((_value$from = value === null || value === void 0 ? void 0 : value.from) !== null && _value$from !== void 0 ? _value$from : '') !== '' && ((_value$to = value === null || value === void 0 ? void 0 : value.to) !== null && _value$to !== void 0 ? _value$to : '') !== '' ? /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillGroupV2, null, /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, /*#__PURE__*/React__default['default'].createElement(dsPills.RemovablePill, {
+  }), /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "removable",
     label: "".concat(value.from, " - ").concat(value.to),
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/cjs/parts/FilterBar/components/NumberRangePill.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberRangePill.js","sources":["../../../../../src/parts/FilterBar/components/NumberRangePill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { LabeledPills, RemovablePill } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const NumberRangePill: FilterPillComponent<{ from: string; to: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column]);\n\n  return value?.from && value?.to ? (\n    <LabeledPills label={columnHeader}>\n      <RemovablePill label={`${value.from} - ${value.to}`} onRemove={handleOnRemove} />\n    </LabeledPills>\n  ) : null;\n};\n"],"names":["NumberRangePill","columnHeader","column","value","filters","onFiltersChange","handleOnRemove","useCallback","filter","id","from","to","React","LabeledPills","RemovablePill"],"mappings":";;;;;;;;;;;AAAA;IAKaA,eAAkE,GAAG,SAArEA,eAAqE,OAM5E;AAAA,MALJC,YAKI,QALJA,YAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,eACI,QADJA,eACI;AACJ,MAAMC,cAAc,GAAGC,iBAAW,CAAC,YAAM;AACvCF,IAAAA,eAAe,CAACD,OAAO,CAACI,MAAR,CAAe,UAACA,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcP,MAA1B;AAAA,KAAf,CAAD,CAAf;AACD,GAFiC,EAE/B,CAACG,eAAD,EAAkBD,OAAlB,EAA2BF,MAA3B,CAF+B,CAAlC;AAIA,SAAOC,KAAK,SAAL,IAAAA,KAAK,WAAL,IAAAA,KAAK,CAAEO,IAAP,IAAeP,KAAf,aAAeA,KAAf,eAAeA,KAAK,CAAEQ,EAAtB,gBACLC,wCAACC,oBAAD;AAAc,IAAA,KAAK,EAAEZ;AAArB,kBACEW,wCAACE,qBAAD;AAAe,IAAA,KAAK,YAAKX,KAAK,CAACO,IAAX,gBAAqBP,KAAK,CAACQ,EAA3B,CAApB;AAAqD,IAAA,QAAQ,EAAEL;AAA/D,IADF,CADK,GAIH,IAJJ;AAKD;;;;"}
+{"version":3,"file":"NumberRangePill.js","sources":["../../../../../src/parts/FilterBar/components/NumberRangePill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const NumberRangePill: FilterPillComponent<{ from: string; to: string }> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column, prevRef, nextRef]);\n\n  return (value?.from ?? '') !== '' && (value?.to ?? '') !== '' ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={`${value.from} - ${value.to}`} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],"names":["NumberRangePill","columnHeader","column","value","filters","onFiltersChange","prevRef","innerRef","nextRef","handleOnRemove","useCallback","current","focus","filter","id","from","to","React","DSPillGroupV2","DSPillV2"],"mappings":";;;;;;;;;;;AAAA;IAKaA,eAAkE,GAAG,SAArEA,eAAqE,OAS5E;AAAA;;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,OACI,QADJA,OACI;AACJ,MAAMC,cAAc,GAAGC,iBAAW,CAAC,YAAM;AACvC,QAAIJ,OAAJ,aAAIA,OAAJ,eAAIA,OAAO,CAAEK,OAAb,EAAsBL,OAAO,CAACK,OAAR,CAAgBC,KAAhB,GAAtB,KACKJ,OAAO,CAACG,OAAR,CAAgBC,KAAhB;AACLP,IAAAA,eAAe,CAACD,OAAO,CAACS,MAAR,CAAe,UAACA,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcZ,MAA1B;AAAA,KAAf,CAAD,CAAf;AACD,GAJiC,EAI/B,CAACG,eAAD,EAAkBD,OAAlB,EAA2BF,MAA3B,EAAmCI,OAAnC,EAA4CE,OAA5C,CAJ+B,CAAlC;AAMA,SAAO,gBAACL,KAAD,aAACA,KAAD,uBAACA,KAAK,CAAEY,IAAR,qDAAgB,EAAhB,MAAwB,EAAxB,IAA8B,cAACZ,KAAD,aAACA,KAAD,uBAACA,KAAK,CAAEa,EAAR,iDAAc,EAAd,MAAsB,EAApD,gBACLC,wCAACC,qBAAD,qBACED,wCAACE,gBAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAElB;AAA9B,IADF,eAEEgB,wCAACE,gBAAD;AAAU,IAAA,IAAI,EAAC,WAAf;AAA2B,IAAA,KAAK,YAAKhB,KAAK,CAACY,IAAX,gBAAqBZ,KAAK,CAACa,EAA3B,CAAhC;AAAiE,IAAA,QAAQ,EAAEP,cAA3E;AAA2F,IAAA,QAAQ,EAAEF;AAArG,IAFF,CADK,GAKH,IALJ;AAMD;;;;"}

package/cjs/parts/FilterBar/components/SelectPill.js

@@ -15,17 +15,24 @@ var SelectPill = function SelectPill(_ref) {
       column = _ref.column,
       value = _ref.value,
       filters = _ref.filters,
-      onFiltersChange = _ref.onFiltersChange;
+      onFiltersChange = _ref.onFiltersChange,
+      prevRef = _ref.prevRef,
+      innerRef = _ref.innerRef,
+      nextRef = _ref.nextRef;
   var handleOnRemove = React.useCallback(function () {
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
     onFiltersChange(filters.filter(function (filter) {
       return filter.id !== column;
     }));
-  }, [onFiltersChange, filters, column]);
-  return value ? /*#__PURE__*/React__default['default'].createElement(dsPills.LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillGroupV2, null, /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, /*#__PURE__*/React__default['default'].createElement(dsPills.RemovablePill, {
+  }), /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "removable",
     label: value,
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/cjs/parts/FilterBar/components/SelectPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectPill.js","sources":["../../../../../src/parts/FilterBar/components/SelectPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { LabeledPills, RemovablePill } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const SelectPill: FilterPillComponent<string> = ({ columnHeader, column, value, filters, onFiltersChange }) => {\n  const handleOnRemove = useCallback(() => {\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column]);\n\n  return value ? (\n    <LabeledPills label={columnHeader}>\n      <RemovablePill label={value} onRemove={handleOnRemove} />\n    </LabeledPills>\n  ) : null;\n};\n"],"names":["SelectPill","columnHeader","column","value","filters","onFiltersChange","handleOnRemove","useCallback","filter","id","React","LabeledPills","RemovablePill"],"mappings":";;;;;;;;;;;AAAA;IAKaA,UAAuC,GAAG,SAA1CA,UAA0C,OAA+D;AAAA,MAA5DC,YAA4D,QAA5DA,YAA4D;AAAA,MAA9CC,MAA8C,QAA9CA,MAA8C;AAAA,MAAtCC,KAAsC,QAAtCA,KAAsC;AAAA,MAA/BC,OAA+B,QAA/BA,OAA+B;AAAA,MAAtBC,eAAsB,QAAtBA,eAAsB;AACpH,MAAMC,cAAc,GAAGC,iBAAW,CAAC,YAAM;AACvCF,IAAAA,eAAe,CAACD,OAAO,CAACI,MAAR,CAAe,UAACA,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcP,MAA1B;AAAA,KAAf,CAAD,CAAf;AACD,GAFiC,EAE/B,CAACG,eAAD,EAAkBD,OAAlB,EAA2BF,MAA3B,CAF+B,CAAlC;AAIA,SAAOC,KAAK,gBACVO,wCAACC,oBAAD;AAAc,IAAA,KAAK,EAAEV;AAArB,kBACES,wCAACE,qBAAD;AAAe,IAAA,KAAK,EAAET,KAAtB;AAA6B,IAAA,QAAQ,EAAEG;AAAvC,IADF,CADU,GAIR,IAJJ;AAKD;;;;"}
+{"version":3,"file":"SelectPill.js","sources":["../../../../../src/parts/FilterBar/components/SelectPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const SelectPill: FilterPillComponent<string> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],"names":["SelectPill","columnHeader","column","value","filters","onFiltersChange","prevRef","innerRef","nextRef","handleOnRemove","useCallback","current","focus","filter","id","React","DSPillGroupV2","DSPillV2"],"mappings":";;;;;;;;;;;AAAA;IAKaA,UAAuC,GAAG,SAA1CA,UAA0C,OASjD;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,OACI,QADJA,OACI;AACJ,MAAMC,cAAc,GAAGC,iBAAW,CAAC,YAAM;AACvC,QAAIJ,OAAJ,aAAIA,OAAJ,eAAIA,OAAO,CAAEK,OAAb,EAAsBL,OAAO,CAACK,OAAR,CAAgBC,KAAhB,GAAtB,KACKJ,OAAO,CAACG,OAAR,CAAgBC,KAAhB;AACLP,IAAAA,eAAe,CAACD,OAAO,CAACS,MAAR,CAAe,UAACA,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcZ,MAA1B;AAAA,KAAf,CAAD,CAAf;AACD,GAJiC,EAI/B,CAACG,eAAD,EAAkBD,OAAlB,EAA2BE,OAA3B,EAAoCE,OAApC,EAA6CN,MAA7C,CAJ+B,CAAlC;AAMA,SAAOC,KAAK,gBACVY,wCAACC,qBAAD,qBACED,wCAACE,gBAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEhB;AAA9B,IADF,eAEEc,wCAACE,gBAAD;AAAU,IAAA,IAAI,EAAC,WAAf;AAA2B,IAAA,KAAK,EAAEd,KAAlC;AAAyC,IAAA,QAAQ,EAAEM,cAAnD;AAAmE,IAAA,QAAQ,EAAEF;AAA7E,IAFF,CADU,GAKR,IALJ;AAMD;;;;"}

package/cjs/parts/FilterBar/components/SingleDatePill.js

@@ -15,17 +15,24 @@ var SingleDatePill = function SingleDatePill(_ref) {
       column = _ref.column,
       value = _ref.value,
       filters = _ref.filters,
-      onFiltersChange = _ref.onFiltersChange;
+      onFiltersChange = _ref.onFiltersChange,
+      prevRef = _ref.prevRef,
+      innerRef = _ref.innerRef,
+      nextRef = _ref.nextRef;
   var handleOnRemove = React.useCallback(function () {
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
     onFiltersChange(filters.filter(function (filter) {
       return filter.id !== column;
     }));
-  }, [onFiltersChange, filters, column]);
-  return value ? /*#__PURE__*/React__default['default'].createElement(dsPills.LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillGroupV2, null, /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, /*#__PURE__*/React__default['default'].createElement(dsPills.RemovablePill, {
+  }), /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "removable",
     label: value.replace(/-/g, '/'),
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/cjs/parts/FilterBar/components/SingleDatePill.js.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDatePill.js","sources":["../../../../../src/parts/FilterBar/components/SingleDatePill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { LabeledPills, RemovablePill } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const SingleDatePill: FilterPillComponent<string> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column]);\n\n  return value ? (\n    <LabeledPills label={columnHeader}>\n      <RemovablePill label={value.replace(/-/g, '/')} onRemove={handleOnRemove} />\n    </LabeledPills>\n  ) : null;\n};\n"],"names":["SingleDatePill","columnHeader","column","value","filters","onFiltersChange","handleOnRemove","useCallback","filter","id","React","LabeledPills","RemovablePill","replace"],"mappings":";;;;;;;;;;;AAAA;IAKaA,cAA2C,GAAG,SAA9CA,cAA8C,OAMrD;AAAA,MALJC,YAKI,QALJA,YAKI;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,eACI,QADJA,eACI;AACJ,MAAMC,cAAc,GAAGC,iBAAW,CAAC,YAAM;AACvCF,IAAAA,eAAe,CAACD,OAAO,CAACI,MAAR,CAAe,UAACA,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcP,MAA1B;AAAA,KAAf,CAAD,CAAf;AACD,GAFiC,EAE/B,CAACG,eAAD,EAAkBD,OAAlB,EAA2BF,MAA3B,CAF+B,CAAlC;AAIA,SAAOC,KAAK,gBACVO,wCAACC,oBAAD;AAAc,IAAA,KAAK,EAAEV;AAArB,kBACES,wCAACE,qBAAD;AAAe,IAAA,KAAK,EAAET,KAAK,CAACU,OAAN,CAAc,IAAd,EAAoB,GAApB,CAAtB;AAAgD,IAAA,QAAQ,EAAEP;AAA1D,IADF,CADU,GAIR,IAJJ;AAKD;;;;"}
+{"version":3,"file":"SingleDatePill.js","sources":["../../../../../src/parts/FilterBar/components/SingleDatePill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const SingleDatePill: FilterPillComponent<string> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value.replace(/-/g, '/')} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],"names":["SingleDatePill","columnHeader","column","value","filters","onFiltersChange","prevRef","innerRef","nextRef","handleOnRemove","useCallback","current","focus","filter","id","React","DSPillGroupV2","DSPillV2","replace"],"mappings":";;;;;;;;;;;AAAA;IAKaA,cAA2C,GAAG,SAA9CA,cAA8C,OASrD;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,OACI,QADJA,OACI;AACJ,MAAMC,cAAc,GAAGC,iBAAW,CAAC,YAAM;AACvC,QAAIJ,OAAJ,aAAIA,OAAJ,eAAIA,OAAO,CAAEK,OAAb,EAAsBL,OAAO,CAACK,OAAR,CAAgBC,KAAhB,GAAtB,KACKJ,OAAO,CAACG,OAAR,CAAgBC,KAAhB;AACLP,IAAAA,eAAe,CAACD,OAAO,CAACS,MAAR,CAAe,UAACA,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcZ,MAA1B;AAAA,KAAf,CAAD,CAAf;AACD,GAJiC,EAI/B,CAACG,eAAD,EAAkBD,OAAlB,EAA2BE,OAA3B,EAAoCE,OAApC,EAA6CN,MAA7C,CAJ+B,CAAlC;AAMA,SAAOC,KAAK,gBACVY,wCAACC,qBAAD,qBACED,wCAACE,gBAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEhB;AAA9B,IADF,eAEEc,wCAACE,gBAAD;AAAU,IAAA,IAAI,EAAC,WAAf;AAA2B,IAAA,KAAK,EAAEd,KAAK,CAACe,OAAN,CAAc,IAAd,EAAoB,GAApB,CAAlC;AAA4D,IAAA,QAAQ,EAAET,cAAtE;AAAsF,IAAA,QAAQ,EAAEF;AAAhG,IAFF,CADU,GAKR,IALJ;AAMD;;;;"}

package/cjs/parts/FilterBar/components/TextPill.js

@@ -15,17 +15,24 @@ var TextPill = function TextPill(_ref) {
       column = _ref.column,
       value = _ref.value,
       filters = _ref.filters,
-      onFiltersChange = _ref.onFiltersChange;
+      onFiltersChange = _ref.onFiltersChange,
+      prevRef = _ref.prevRef,
+      innerRef = _ref.innerRef,
+      nextRef = _ref.nextRef;
   var handleOnRemove = React.useCallback(function () {
+    if (prevRef !== null && prevRef !== void 0 && prevRef.current) prevRef.current.focus();else nextRef.current.focus();
     onFiltersChange(filters.filter(function (filter) {
       return filter.id !== column;
     }));
-  }, [onFiltersChange, filters, column]);
-  return value ? /*#__PURE__*/React__default['default'].createElement(dsPills.LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillGroupV2, null, /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, /*#__PURE__*/React__default['default'].createElement(dsPills.RemovablePill, {
+  }), /*#__PURE__*/React__default['default'].createElement(dsPills.DSPillV2, {
+    type: "removable",
     label: value,
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/cjs/parts/FilterBar/components/TextPill.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextPill.js","sources":["../../../../../src/parts/FilterBar/components/TextPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { LabeledPills, RemovablePill } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const TextPill: FilterPillComponent<string> = ({ columnHeader, column, value, filters, onFiltersChange }) => {\n  const handleOnRemove = useCallback(() => {\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, column]);\n\n  return value ? (\n    <LabeledPills label={columnHeader}>\n      <RemovablePill label={value} onRemove={handleOnRemove} />\n    </LabeledPills>\n  ) : null;\n};\n"],"names":["TextPill","columnHeader","column","value","filters","onFiltersChange","handleOnRemove","useCallback","filter","id","React","LabeledPills","RemovablePill"],"mappings":";;;;;;;;;;;AAAA;IAKaA,QAAqC,GAAG,SAAxCA,QAAwC,OAA+D;AAAA,MAA5DC,YAA4D,QAA5DA,YAA4D;AAAA,MAA9CC,MAA8C,QAA9CA,MAA8C;AAAA,MAAtCC,KAAsC,QAAtCA,KAAsC;AAAA,MAA/BC,OAA+B,QAA/BA,OAA+B;AAAA,MAAtBC,eAAsB,QAAtBA,eAAsB;AAClH,MAAMC,cAAc,GAAGC,iBAAW,CAAC,YAAM;AACvCF,IAAAA,eAAe,CAACD,OAAO,CAACI,MAAR,CAAe,UAACA,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcP,MAA1B;AAAA,KAAf,CAAD,CAAf;AACD,GAFiC,EAE/B,CAACG,eAAD,EAAkBD,OAAlB,EAA2BF,MAA3B,CAF+B,CAAlC;AAIA,SAAOC,KAAK,gBACVO,wCAACC,oBAAD;AAAc,IAAA,KAAK,EAAEV;AAArB,kBACES,wCAACE,qBAAD;AAAe,IAAA,KAAK,EAAET,KAAtB;AAA6B,IAAA,QAAQ,EAAEG;AAAvC,IADF,CADU,GAIR,IAJJ;AAKD;;;;"}
+{"version":3,"file":"TextPill.js","sources":["../../../../../src/parts/FilterBar/components/TextPill.tsx"],"sourcesContent":["/* eslint-disable react/prop-types */\nimport React, { useCallback } from 'react';\nimport { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';\nimport { FilterPillComponent } from '../types';\n\nexport const TextPill: FilterPillComponent<string> = ({\n  columnHeader,\n  column,\n  value,\n  filters,\n  onFiltersChange,\n  prevRef,\n  innerRef,\n  nextRef,\n}) => {\n  const handleOnRemove = useCallback(() => {\n    if (prevRef?.current) prevRef.current.focus();\n    else nextRef.current.focus();\n    onFiltersChange(filters.filter((filter) => filter.id !== column));\n  }, [onFiltersChange, filters, prevRef, nextRef, column]);\n\n  return value ? (\n    <DSPillGroupV2>\n      <DSPillV2 type=\"label\" label={columnHeader} />\n      <DSPillV2 type=\"removable\" label={value} onRemove={handleOnRemove} innerRef={innerRef} />\n    </DSPillGroupV2>\n  ) : null;\n};\n"],"names":["TextPill","columnHeader","column","value","filters","onFiltersChange","prevRef","innerRef","nextRef","handleOnRemove","useCallback","current","focus","filter","id","React","DSPillGroupV2","DSPillV2"],"mappings":";;;;;;;;;;;AAAA;IAKaA,QAAqC,GAAG,SAAxCA,QAAwC,OAS/C;AAAA,MARJC,YAQI,QARJA,YAQI;AAAA,MAPJC,MAOI,QAPJA,MAOI;AAAA,MANJC,KAMI,QANJA,KAMI;AAAA,MALJC,OAKI,QALJA,OAKI;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,OACI,QADJA,OACI;AACJ,MAAMC,cAAc,GAAGC,iBAAW,CAAC,YAAM;AACvC,QAAIJ,OAAJ,aAAIA,OAAJ,eAAIA,OAAO,CAAEK,OAAb,EAAsBL,OAAO,CAACK,OAAR,CAAgBC,KAAhB,GAAtB,KACKJ,OAAO,CAACG,OAAR,CAAgBC,KAAhB;AACLP,IAAAA,eAAe,CAACD,OAAO,CAACS,MAAR,CAAe,UAACA,MAAD;AAAA,aAAYA,MAAM,CAACC,EAAP,KAAcZ,MAA1B;AAAA,KAAf,CAAD,CAAf;AACD,GAJiC,EAI/B,CAACG,eAAD,EAAkBD,OAAlB,EAA2BE,OAA3B,EAAoCE,OAApC,EAA6CN,MAA7C,CAJ+B,CAAlC;AAMA,SAAOC,KAAK,gBACVY,wCAACC,qBAAD,qBACED,wCAACE,gBAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEhB;AAA9B,IADF,eAEEc,wCAACE,gBAAD;AAAU,IAAA,IAAI,EAAC,WAAf;AAA2B,IAAA,KAAK,EAAEd,KAAlC;AAAyC,IAAA,QAAQ,EAAEM,cAAnD;AAAmE,IAAA,QAAQ,EAAEF;AAA7E,IAFF,CADU,GAKR,IALJ;AAMD;;;;"}

package/cjs/parts/FilterBar/index.js

@@ -8,7 +8,7 @@ require('@babel/runtime/helpers/defineProperty');
 require('react');
 require('@elliemae/ds-button');
 require('@elliemae/ds-icons/MoreOptionsVert');
-require('../../styled-70bdf2af.js');
+require('../../styled-256fc644.js');
 require('styled-components');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-icons/EditPencil');
@@ -95,8 +95,7 @@ require('../SortByCaret.js');
 require('@elliemae/ds-icons/ArrowheadDown');
 require('@elliemae/ds-icons/ArrowheadUp');
 require('@elliemae/ds-icons/DatePicker2');
-require('@elliemae/ds-date-picker');
-require('@elliemae/ds-date-range-picker');
+require('@elliemae/ds-controlled-form');
 require('@elliemae/ds-form/TextBox');
 require('@elliemae/ds-icons/SearchXsmall');
 require('../../addons/Filters/Components/SelectFilter/components.js');

package/cjs/parts/FilterBar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/parts/Filters/index.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 require('@babel/runtime/helpers/toConsumableArray');
 require('@babel/runtime/helpers/defineProperty');
 require('react');
-var addons_Columns_ColumnExpand_ColumnExpand = require('../../styled-70bdf2af.js');
+var addons_Columns_ColumnExpand_ColumnExpand = require('../../styled-256fc644.js');
 require('@babel/runtime/helpers/slicedToArray');
 require('styled-components');
 require('@elliemae/ds-button');
@@ -91,8 +91,7 @@ require('../SortByCaret.js');
 require('@elliemae/ds-icons/ArrowheadDown');
 require('@elliemae/ds-icons/ArrowheadUp');
 require('@elliemae/ds-icons/DatePicker2');
-require('@elliemae/ds-date-picker');
-require('@elliemae/ds-date-range-picker');
+require('@elliemae/ds-controlled-form');
 require('@elliemae/ds-form/TextBox');
 require('@elliemae/ds-icons/SearchXsmall');
 require('../../addons/Filters/Components/SelectFilter/components.js');

package/cjs/parts/Filters/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}