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

package/esm/helpers/dndkit/hierarchy/useHierarchyDndkitConfig.js

@@ -3,7 +3,7 @@ import '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import '@dnd-kit/core';
 import './useHierarchyActionHandlers.js';
-export { A as default } from '../../../styled-44bf75ae.js';
+export { A as default } from '../../../styled-e953974e.js';
 import './useHierarchyAnnouncements.js';
 import 'styled-components';
 import '@elliemae/ds-grid';
@@ -90,8 +90,7 @@ import '../../../parts/SortByCaret.js';
 import '@elliemae/ds-icons/ArrowheadDown';
 import '@elliemae/ds-icons/ArrowheadUp';
 import '@elliemae/ds-icons/DatePicker2';
-import '@elliemae/ds-date-picker';
-import '@elliemae/ds-date-range-picker';
+import '@elliemae/ds-controlled-form';
 import '@elliemae/ds-form/TextBox';
 import '@elliemae/ds-icons/SearchXsmall';
 import '../../../addons/Filters/Components/SelectFilter/components.js';

package/esm/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/esm/helpers/dndkit/hierarchy/useHierarchyPreviewHandlers.js

@@ -8,7 +8,7 @@ import '@babel/runtime/helpers/esm/defineProperty';
 import '@elliemae/ds-icons/ArrowShortReturn';
 import 'styled-components';
 import '@elliemae/ds-icons';
-export { x as useHierarchyPreviewHandlers } from '../../../styled-44bf75ae.js';
+export { x as useHierarchyPreviewHandlers } from '../../../styled-e953974e.js';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
 import '@elliemae/ds-grid';
@@ -88,8 +88,7 @@ import '../../../parts/SortByCaret.js';
 import '@elliemae/ds-icons/ArrowheadDown';
 import '@elliemae/ds-icons/ArrowheadUp';
 import '@elliemae/ds-icons/DatePicker2';
-import '@elliemae/ds-date-picker';
-import '@elliemae/ds-date-range-picker';
+import '@elliemae/ds-controlled-form';
 import '@elliemae/ds-form/TextBox';
 import '@elliemae/ds-icons/SearchXsmall';
 import '../../../addons/Filters/Components/SelectFilter/components.js';

package/esm/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/esm/index.js

@@ -1,5 +1,5 @@
 export { DataTable, DataTableWithSchema } from './DataTable.js';
-export { E as EditableCell, F as FilterPopover, a as applyOutOfTheBoxFilters, d as dateRangeFilterFn, s as singleDateFilterFn } from './styled-44bf75ae.js';
+export { E as EditableCell, F as FilterPopover, a as applyOutOfTheBoxFilters, d as dateRangeFilterFn, s as singleDateFilterFn } from './styled-e953974e.js';
 export { Toolbar } from './exported-related/Toolbar/Toolbar.js';
 export { groupBy } from './exported-related/groupBy.js';
 export { FILTER_TYPES } from './exported-related/FilterTypes.js';
@@ -109,8 +109,7 @@ import './parts/SortByCaret.js';
 import '@elliemae/ds-icons/ArrowheadDown';
 import '@elliemae/ds-icons/ArrowheadUp';
 import '@elliemae/ds-icons/DatePicker2';
-import '@elliemae/ds-date-picker';
-import '@elliemae/ds-date-range-picker';
+import '@elliemae/ds-controlled-form';
 import '@elliemae/ds-form/TextBox';
 import '@elliemae/ds-icons/SearchXsmall';
 import './addons/Filters/Components/SelectFilter/components.js';

package/esm/index.js.map

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

package/esm/parts/Cells/Cell.js

@@ -4,7 +4,7 @@ import '@babel/runtime/helpers/esm/slicedToArray';
 import 'react';
 import '@elliemae/ds-truncated-tooltip-text';
 import '@elliemae/ds-grid';
-export { l as default } from '../../styled-44bf75ae.js';
+export { l as default } from '../../styled-e953974e.js';
 import '../../DataTableContext.js';
 import '../HoC/SortableItemContext.js';
 import '@elliemae/ds-form/Checkbox';
@@ -87,8 +87,7 @@ import '../SortByCaret.js';
 import '@elliemae/ds-icons/ArrowheadDown';
 import '@elliemae/ds-icons/ArrowheadUp';
 import '@elliemae/ds-icons/DatePicker2';
-import '@elliemae/ds-date-picker';
-import '@elliemae/ds-date-range-picker';
+import '@elliemae/ds-controlled-form';
 import '@elliemae/ds-form/TextBox';
 import '@elliemae/ds-icons/SearchXsmall';
 import '../../addons/Filters/Components/SelectFilter/components.js';

package/esm/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/esm/parts/Cells/index.js

@@ -1,5 +1,5 @@
 import 'react';
-export { n as default } from '../../styled-44bf75ae.js';
+export { n as default } from '../../styled-e953974e.js';
 import '../../DataTableContext.js';
 import 'styled-components';
 import '@elliemae/ds-grid';
@@ -90,8 +90,7 @@ import '../SortByCaret.js';
 import '@elliemae/ds-icons/ArrowheadDown';
 import '@elliemae/ds-icons/ArrowheadUp';
 import '@elliemae/ds-icons/DatePicker2';
-import '@elliemae/ds-date-picker';
-import '@elliemae/ds-date-range-picker';
+import '@elliemae/ds-controlled-form';
 import '@elliemae/ds-form/TextBox';
 import '@elliemae/ds-icons/SearchXsmall';
 import '../../addons/Filters/Components/SelectFilter/components.js';

package/esm/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/esm/parts/DnDHandle.js

@@ -11,7 +11,7 @@ import '../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/toConsumableArray';
 import '@elliemae/ds-icons/ArrowShortReturn';
 import '@elliemae/ds-icons';
-export { D as default } from '../styled-44bf75ae.js';
+export { D as default } from '../styled-e953974e.js';
 import '@elliemae/ds-form/Checkbox';
 import '@elliemae/ds-form/Radio';
 import '@elliemae/ds-grid';
@@ -88,8 +88,7 @@ import './SortByCaret.js';
 import '@elliemae/ds-icons/ArrowheadDown';
 import '@elliemae/ds-icons/ArrowheadUp';
 import '@elliemae/ds-icons/DatePicker2';
-import '@elliemae/ds-date-picker';
-import '@elliemae/ds-date-range-picker';
+import '@elliemae/ds-controlled-form';
 import '@elliemae/ds-form/TextBox';
 import '@elliemae/ds-icons/SearchXsmall';
 import '../addons/Filters/Components/SelectFilter/components.js';

package/esm/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/esm/parts/FilterBar/FiltersBar.js

@@ -1,9 +1,9 @@
 import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import React, { useContext, useCallback } from 'react';
+import React, { useContext, useMemo, useRef, useCallback } from 'react';
 import DSButton from '@elliemae/ds-button';
 import MoreOptionsVert from '@elliemae/ds-icons/MoreOptionsVert';
-import '../../styled-44bf75ae.js';
+import '../../styled-e953974e.js';
 import '@babel/runtime/helpers/esm/slicedToArray';
 import 'styled-components';
 import '../../configs/constants.js';
@@ -94,8 +94,7 @@ import '../SortByCaret.js';
 import '@elliemae/ds-icons/ArrowheadDown';
 import '@elliemae/ds-icons/ArrowheadUp';
 import '@elliemae/ds-icons/DatePicker2';
-import '@elliemae/ds-date-picker';
-import '@elliemae/ds-date-range-picker';
+import '@elliemae/ds-controlled-form';
 import '@elliemae/ds-form/TextBox';
 import '@elliemae/ds-icons/SearchXsmall';
 import '../../addons/Filters/Components/SelectFilter/components.js';
@@ -126,15 +125,26 @@ var FiltersBar = function FiltersBar() {
       filters = _useContext$tableProp.filters,
       visibleColumns = _useContext.visibleColumns;
 
+  var pillGroupRefs = useMemo(function () {
+    var refs = [];
+
+    for (var i = 0; i < filters.length; i += 1) {
+      refs.push( /*#__PURE__*/React.createRef());
+    }
+
+    return refs;
+  }, [filters.length]);
+  var dropdownMenuRef = useRef(null);
   var removeAllFilters = useCallback(function () {
     onFiltersChange([]);
   }, [onFiltersChange]);
   return /*#__PURE__*/React.createElement(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,
@@ -161,7 +171,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.createElement(StyledDropdownMenu, {
     preventOverflow: "scrollParent",
@@ -172,6 +185,7 @@ var FiltersBar = function FiltersBar() {
     }].concat(_toConsumableArray((filterBarProps === null || filterBarProps === void 0 ? void 0 : filterBarProps.extraOptions) || [])),
     triggerComponent: /*#__PURE__*/React.createElement(DSButton, {
       buttonType: "text",
+      innerRef: dropdownMenuRef,
       icon: /*#__PURE__*/React.createElement(MoreOptionsVert, null)
     })
   }));

package/esm/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","map","column","id","type","value","columnHeader","find","col","accessor","Header","Component","filterType","customPillRenderer","label","onClick","extraOptions","VerticalElipsis"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,gBAA0D,+DAC7DC,YAAY,CAACC,MADgD,EACvCC,UADuC,sCAE7DF,YAAY,CAACG,YAFgD,EAEjCC,eAFiC,sCAG7DJ,YAAY,CAACK,IAHgD,EAGzCC,QAHyC,sCAI7DN,YAAY,CAACO,WAJgD,EAIlCC,cAJkC,sCAK7DR,YAAY,CAACS,UALgD,EAKnCC,aALmC,sCAM7DV,YAAY,CAACW,YANgD,EAMjCC,eANiC,qBAAhE;IASaC,UAA+B,GAAG,SAAlCA,UAAkC,GAAM;AACnD,oBAGIC,UAAU,CAACC,gBAAD,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,WAAW,CAAC,YAAM;AACzCJ,IAAAA,eAAe,CAAC,EAAD,CAAf;AACD,GAFmC,EAEjC,CAACA,eAAD,CAFiC,CAApC;AAIA,sBACE,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAEF,KAAtB;AAA6B,iBAAU,QAAvC;AAAgD,qBAAc;AAA9D,KACGG,OAAO,CAACI,GAAR,CAAY,gBAAiC;AAAA;;AAAA,QAA1BC,MAA0B,QAA9BC,EAA8B;AAAA,QAAlBC,IAAkB,QAAlBA,IAAkB;AAAA,QAAZC,KAAY,QAAZA,KAAY;AAC5C,QAAMC,YAAY,2BAAGR,cAAc,CAACS,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,IAAIpC,gBAAlB,EAAoC;AAClCmC,MAAAA,SAAS,GAAGnC,gBAAgB,CAACoC,UAAD,CAA5B;AACD,KAFD,MAEO,IAAIjB,cAAJ,aAAIA,cAAJ,eAAIA,cAAc,CAAEkB,kBAApB,EAAwC;AAC7CF,MAAAA,SAAS,GAAGhB,cAAc,CAACkB,kBAA3B;AACD;;AACD,wBACE,oBAAC,SAAD;AACE,MAAA,GAAG,EAAEX,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,EAAER,OALX;AAME,MAAA,eAAe,EAAED;AANnB,MADF;AAUD,GApBA,CADH,eAsBE,oBAAC,kBAAD;AACE,IAAA,eAAe,EAAC,cADlB;AAEE,IAAA,OAAO,GACL;AACEO,MAAAA,EAAE,EAAE,oCADN;AAEEW,MAAAA,KAAK,EAAE,eAFT;AAGEC,MAAAA,OAAO,EAAEhB;AAHX,KADK,4BAMD,CAAAJ,cAAc,SAAd,IAAAA,cAAc,WAAd,YAAAA,cAAc,CAAEqB,YAAhB,KAAgC,EAN/B,EAFT;AAUE,IAAA,gBAAgB,eAAE,oBAAC,QAAD;AAAU,MAAA,UAAU,EAAC,MAArB;AAA4B,MAAA,IAAI,eAAE,oBAACC,eAAD;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","map","index","column","id","type","value","columnHeader","find","col","accessor","Header","Component","filterType","customPillRenderer","label","onClick","extraOptions","VerticalElipsis"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
 /* eslint-disable react/prop-types */
 
@@ -12,17 +12,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 = 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.createElement(LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value !== null && value !== void 0 && value.startDate && value !== null && value !== void 0 && value.endDate ? /*#__PURE__*/React.createElement(DSPillGroupV2, null, /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, /*#__PURE__*/React.createElement(RemovablePill, {
+  }), /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "removable",
     label: "".concat(format(value.startDate), " - ").concat(format(value.endDate)),
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/esm/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"],"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,WAAW,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,gBACL,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAET;AAArB,kBACE,oBAAC,aAAD;AAAe,IAAA,KAAK,YAAKJ,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"],"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,WAAW,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,gBACL,oBAAC,aAAD,qBACE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEd;AAA9B,IADF,eAEE,oBAAC,QAAD;AACE,IAAA,IAAI,EAAC,WADP;AAEE,IAAA,KAAK,YAAKJ,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/esm/parts/FilterBar/components/MultiSelectPill.js

@@ -1,13 +1,16 @@
 import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import React, { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
 var MultiSelectPill = function MultiSelectPill(_ref) {
   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 = useCallback(function (valToRemove) {
     var newFilters = _toConsumableArray(filters);
 
@@ -17,17 +20,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.createElement(LabeledPills, {
+  }, [filters, value, onFiltersChange, column, prevRef, nextRef]);
+  return value !== null && value !== void 0 && value.length ? /*#__PURE__*/React.createElement(DSPillGroupV2, null, /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, value.map(function (val) {
-    return /*#__PURE__*/React.createElement(RemovablePill, {
+  }), value.map(function (val) {
+    return /*#__PURE__*/React.createElement(DSPillV2, {
       key: val,
+      type: "removable",
       label: val,
       onRemove: function onRemove() {
         return handleOnRemove(val);
-      }
+      },
+      innerRef: innerRef
     });
   })) : null;
 };

package/esm/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","map"],"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,WAAW,CAChC,UAACC,WAAD,EAAiB;AACf,QAAMC,UAAU,sBAAOL,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,gBACL,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAEd;AAArB,KACGE,KAAK,CAACa,GAAN,CAAU,UAACF,GAAD;AAAA,wBACT,oBAAC,aAAD;AAAe,MAAA,GAAG,EAAEA,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","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,WAAW,CAChC,UAACC,WAAD,EAAiB;AACf,QAAMC,UAAU,sBAAOR,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,gBACL,oBAAC,aAAD,qBACE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEjB;AAA9B,IADF,EAEGE,KAAK,CAACkB,GAAN,CAAU,UAACJ,GAAD;AAAA,wBACT,oBAAC,QAAD;AAAU,MAAA,GAAG,EAAEA,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/esm/parts/FilterBar/components/NumberRangePill.js

@@ -1,23 +1,32 @@
 import React, { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
 /* 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 = 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.createElement(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.createElement(DSPillGroupV2, null, /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, /*#__PURE__*/React.createElement(RemovablePill, {
+  }), /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "removable",
     label: "".concat(value.from, " - ").concat(value.to),
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/esm/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"],"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,WAAW,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,gBACL,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAEV;AAArB,kBACE,oBAAC,aAAD;AAAe,IAAA,KAAK,YAAKE,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"],"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,WAAW,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,gBACL,oBAAC,aAAD,qBACE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEf;AAA9B,IADF,eAEE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,WAAf;AAA2B,IAAA,KAAK,YAAKE,KAAK,CAACY,IAAX,gBAAqBZ,KAAK,CAACa,EAA3B,CAAhC;AAAiE,IAAA,QAAQ,EAAEP,cAA3E;AAA2F,IAAA,QAAQ,EAAEF;AAArG,IAFF,CADK,GAKH,IALJ;AAMD;;;;"}

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
 /* eslint-disable react/prop-types */
 var SelectPill = function SelectPill(_ref) {
@@ -7,17 +7,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 = 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.createElement(LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/React.createElement(DSPillGroupV2, null, /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, /*#__PURE__*/React.createElement(RemovablePill, {
+  }), /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "removable",
     label: value,
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/esm/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"],"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,WAAW,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,gBACV,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAEF;AAArB,kBACE,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAEE,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"],"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,WAAW,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,gBACV,oBAAC,aAAD,qBACE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEF;AAA9B,IADF,eAEE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,WAAf;AAA2B,IAAA,KAAK,EAAEE,KAAlC;AAAyC,IAAA,QAAQ,EAAEM,cAAnD;AAAmE,IAAA,QAAQ,EAAEF;AAA7E,IAFF,CADU,GAKR,IALJ;AAMD;;;;"}

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
 /* eslint-disable react/prop-types */
 var SingleDatePill = function SingleDatePill(_ref) {
@@ -7,17 +7,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 = 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.createElement(LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/React.createElement(DSPillGroupV2, null, /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, /*#__PURE__*/React.createElement(RemovablePill, {
+  }), /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "removable",
     label: value.replace(/-/g, '/'),
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/esm/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","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,WAAW,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,gBACV,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAEF;AAArB,kBACE,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAEE,KAAK,CAACO,OAAN,CAAc,IAAd,EAAoB,GAApB,CAAtB;AAAgD,IAAA,QAAQ,EAAEJ;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","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,WAAW,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,gBACV,oBAAC,aAAD,qBACE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEF;AAA9B,IADF,eAEE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,WAAf;AAA2B,IAAA,KAAK,EAAEE,KAAK,CAACY,OAAN,CAAc,IAAd,EAAoB,GAApB,CAAlC;AAA4D,IAAA,QAAQ,EAAEN,cAAtE;AAAsF,IAAA,QAAQ,EAAEF;AAAhG,IAFF,CADU,GAKR,IALJ;AAMD;;;;"}

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

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { LabeledPills, RemovablePill } from '@elliemae/ds-pills';
+import { DSPillGroupV2, DSPillV2 } from '@elliemae/ds-pills';
 
 /* eslint-disable react/prop-types */
 var TextPill = function TextPill(_ref) {
@@ -7,17 +7,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 = 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.createElement(LabeledPills, {
+  }, [onFiltersChange, filters, prevRef, nextRef, column]);
+  return value ? /*#__PURE__*/React.createElement(DSPillGroupV2, null, /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "label",
     label: columnHeader
-  }, /*#__PURE__*/React.createElement(RemovablePill, {
+  }), /*#__PURE__*/React.createElement(DSPillV2, {
+    type: "removable",
     label: value,
-    onRemove: handleOnRemove
+    onRemove: handleOnRemove,
+    innerRef: innerRef
   })) : null;
 };
 

package/esm/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"],"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,WAAW,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,gBACV,oBAAC,YAAD;AAAc,IAAA,KAAK,EAAEF;AAArB,kBACE,oBAAC,aAAD;AAAe,IAAA,KAAK,EAAEE,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"],"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,WAAW,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,gBACV,oBAAC,aAAD,qBACE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,OAAf;AAAuB,IAAA,KAAK,EAAEF;AAA9B,IADF,eAEE,oBAAC,QAAD;AAAU,IAAA,IAAI,EAAC,WAAf;AAA2B,IAAA,KAAK,EAAEE,KAAlC;AAAyC,IAAA,QAAQ,EAAEM,cAAnD;AAAmE,IAAA,QAAQ,EAAEF;AAA7E,IAFF,CADU,GAKR,IALJ;AAMD;;;;"}

package/esm/parts/FilterBar/index.js

@@ -4,7 +4,7 @@ import '@babel/runtime/helpers/esm/defineProperty';
 import 'react';
 import '@elliemae/ds-button';
 import '@elliemae/ds-icons/MoreOptionsVert';
-import '../../styled-44bf75ae.js';
+import '../../styled-e953974e.js';
 import 'styled-components';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-icons/EditPencil';
@@ -91,8 +91,7 @@ import '../SortByCaret.js';
 import '@elliemae/ds-icons/ArrowheadDown';
 import '@elliemae/ds-icons/ArrowheadUp';
 import '@elliemae/ds-icons/DatePicker2';
-import '@elliemae/ds-date-picker';
-import '@elliemae/ds-date-range-picker';
+import '@elliemae/ds-controlled-form';
 import '@elliemae/ds-form/TextBox';
 import '@elliemae/ds-icons/SearchXsmall';
 import '../../addons/Filters/Components/SelectFilter/components.js';