@bigbinary/neeto-filters-frontend 3.3.0-beta.2 → 3.3.1

package/dist/index.js

@@ -1,21 +1,23 @@
 import React, { useState, useEffect, useMemo, useRef, useTransition } from 'react';
 import classnames from 'classnames';
 import i18next, { t as t$1 } from 'i18next';
-import { findBy, isNotEmpty, capitalize, removeBy, toLabelAndValue, hyphenate, noop, replaceBy, isNotPresent, existsBy, _existsBy, isPresent, notEqualsDeep, humanize, findById, filterBy } from '@bigbinary/neeto-cist';
+import { findBy, isNotEmpty, capitalize, removeBy, toLabelAndValue, hyphenate, isNotPresent, noop, replaceBy, existsBy, _existsBy, isPresent, humanize, findById, filterBy } from '@bigbinary/neeto-cist';
 import { useDebounce, useQueryParams, useMutationWithInvalidation, withT } from '@bigbinary/neeto-commons-frontend/react-utils';
-import { groupBy, anyPass, isNil, isEmpty, any, concat, omit, mergeLeft, toLower, identity, mergeRight, toPairs, pluck, either, not, has, equals, pick, last, modify, append, mergeDeepRight, prop, assoc, sortBy, project } from 'ramda';
+import { groupBy, anyPass, isNil, isEmpty, any, concat, omit, mergeLeft, toLower, identity, mergeRight, toPairs, pluck, either, not, has, equals, pick, last, modify, append, mergeDeepRight, prop, assoc, reject, sortBy, project } from 'ramda';
 import { useQuery, useQueryClient } from 'react-query';
 import { Help, Delete as Delete$1, Plus, Close, Down } from '@bigbinary/neeto-icons';
-import { Select, DatePicker, TimePicker, Input, Button, Pane as Pane$1, Typography, Accordion, Tooltip, Dropdown as Dropdown$2, Alert, Spinner } from '@bigbinary/neetoui';
+import { Select, DatePicker, TimePickerInput, Input, Button, Pane as Pane$1, Typography, Accordion, Tooltip, Dropdown as Dropdown$2, Alert, Spinner } from '@bigbinary/neetoui';
 import { Form, Input as Input$1, ActionBlock } from '@bigbinary/neetoui/formik';
 import { useTranslation, Trans } from 'react-i18next';
 import { useHistory } from 'react-router-dom/cjs/react-router-dom.min';
 import { buildUrl, getQueryParams, dateFormat, showThumbsUpToastr } from '@bigbinary/neeto-commons-frontend/utils';
 import * as yup from 'yup';
-import useHotkeys from '@bigbinary/neeto-hotkeys';
 import { useHistory as useHistory$1, useLocation } from 'react-router-dom';
+import useHotkeys from '@bigbinary/neeto-hotkeys';
 import axios from 'axios';
 import Search from '@bigbinary/neeto-molecules/Search';
+import { PLURAL } from '@bigbinary/neeto-commons-frontend/constants';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
 import MenuBar from '@bigbinary/neeto-molecules/MenuBar';
 import MoreDropdown from '@bigbinary/neeto-molecules/MoreDropdown';
 
@@ -239,7 +241,7 @@ var dayjs_min = {exports: {}};
 dayjs_min.exports;
 
 (function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",f="month",h="quarter",c="year",d="date",$="Invalid Date",l=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_")},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},g={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,f),s=n-i<0,u=e.clone().add(r+(s?-1:1),f);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:f,y:c,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:h}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},v="en",D={};D[v]=M;var p=function(t){return t instanceof _},S=function t(e,n,r){var i;if(!e)return v;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(v=i),i||!r&&v},w=function(t,e){if(p(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},O=g;O.l=S,O.i=p,O.w=function(t,e){return w(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=S(t.locale,null,!0),this.parse(t);}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(O.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match(l);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.$x=t.x||{},this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return O},m.isValid=function(){return !(this.$d.toString()===$)},m.isSame=function(t,e){var n=w(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return w(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<w(t)},m.$g=function(t,e,n){return O.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!O.u(e)||e,h=O.p(t),$=function(t,e){var i=O.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},l=function(t,e){return O.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,g="set"+(this.$u?"UTC":"");switch(h){case c:return r?$(1,0):$(31,11);case f:return r?$(1,M):$(0,M+1);case o:var v=this.$locale().weekStart||0,D=(y<v?y+7:y)-v;return $(r?m-D:m+(6-D),M);case a:case d:return l(g+"Hours",0);case u:return l(g+"Minutes",1);case s:return l(g+"Seconds",2);case i:return l(g+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=O.p(t),h="set"+(this.$u?"UTC":""),$=(n={},n[a]=h+"Date",n[d]=h+"Date",n[f]=h+"Month",n[c]=h+"FullYear",n[u]=h+"Hours",n[s]=h+"Minutes",n[i]=h+"Seconds",n[r]=h+"Milliseconds",n)[o],l=o===a?this.$D+(e-this.$W):e;if(o===f||o===c){var y=this.clone().set(d,1);y.$d[$](l),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else $&&this.$d[$](l);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[O.p(t)]()},m.add=function(r,h){var d,$=this;r=Number(r);var l=O.p(h),y=function(t){var e=w($);return O.w(e.date(e.date()+Math.round(t*r)),$)};if(l===f)return this.set(f,this.$M+r);if(l===c)return this.set(c,this.$y+r);if(l===a)return y(1);if(l===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[l]||1,m=this.$d.getTime()+r*M;return O.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||$;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=O.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,f=n.months,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},c=function(t){return O.s(s%12||12,t,"0")},d=n.meridiem||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r},l={YY:String(this.$y).slice(-2),YYYY:this.$y,M:a+1,MM:O.s(a+1,2,"0"),MMM:h(n.monthsShort,a,f,3),MMMM:h(f,a),D:this.$D,DD:O.s(this.$D,2,"0"),d:String(this.$W),dd:h(n.weekdaysMin,this.$W,o,2),ddd:h(n.weekdaysShort,this.$W,o,3),dddd:o[this.$W],H:String(s),HH:O.s(s,2,"0"),h:c(1),hh:c(2),a:d(s,u,!0),A:d(s,u,!1),m:String(u),mm:O.s(u,2,"0"),s:String(this.$s),ss:O.s(this.$s,2,"0"),SSS:O.s(this.$ms,3,"0"),Z:i};return r.replace(y,(function(t,e){return e||l[t]||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,$){var l,y=O.p(d),M=w(r),m=(M.utcOffset()-this.utcOffset())*e,g=this-M,v=O.m(this,M);return v=(l={},l[c]=v/12,l[f]=v,l[h]=v/3,l[o]=(g-m)/6048e5,l[a]=(g-m)/864e5,l[u]=g/n,l[s]=g/e,l[i]=g/t,l)[y]||g,$?v:O.a(v)},m.daysInMonth=function(){return this.endOf(f).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=S(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return O.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),T=_.prototype;return w.prototype=T,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",f],["$y",c],["$D",d]].forEach((function(t){T[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),w.extend=function(t,e){return t.$i||(t(e,_,w),t.$i=!0),w},w.locale=S,w.isDayjs=p,w.unix=function(t){return w(1e3*t)},w.en=D[v],w.Ls=D,w.p={},w})); 
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t=1e3,e=6e4,n=36e5,r="millisecond",i="second",s="minute",u="hour",a="day",o="week",c="month",f="quarter",h="year",d="date",l="Invalid Date",$=/^(\d{4})[-/]?(\d{1,2})?[-/]?(\d{0,2})[Tt\s]*(\d{1,2})?:?(\d{1,2})?:?(\d{1,2})?[.:]?(\d+)?$/,y=/\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a|A|m{1,2}|s{1,2}|Z{1,2}|SSS/g,M={name:"en",weekdays:"Sunday_Monday_Tuesday_Wednesday_Thursday_Friday_Saturday".split("_"),months:"January_February_March_April_May_June_July_August_September_October_November_December".split("_"),ordinal:function(t){var e=["th","st","nd","rd"],n=t%100;return "["+t+(e[(n-20)%10]||e[n]||e[0])+"]"}},m=function(t,e,n){var r=String(t);return !r||r.length>=e?t:""+Array(e+1-r.length).join(n)+t},v={s:m,z:function(t){var e=-t.utcOffset(),n=Math.abs(e),r=Math.floor(n/60),i=n%60;return (e<=0?"+":"-")+m(r,2,"0")+":"+m(i,2,"0")},m:function t(e,n){if(e.date()<n.date())return -t(n,e);var r=12*(n.year()-e.year())+(n.month()-e.month()),i=e.clone().add(r,c),s=n-i<0,u=e.clone().add(r+(s?-1:1),c);return +(-(r+(n-i)/(s?i-u:u-i))||0)},a:function(t){return t<0?Math.ceil(t)||0:Math.floor(t)},p:function(t){return {M:c,y:h,w:o,d:a,D:d,h:u,m:s,s:i,ms:r,Q:f}[t]||String(t||"").toLowerCase().replace(/s$/,"")},u:function(t){return void 0===t}},g="en",D={};D[g]=M;var p="$isDayjsObject",S=function(t){return t instanceof _||!(!t||!t[p])},w=function t(e,n,r){var i;if(!e)return g;if("string"==typeof e){var s=e.toLowerCase();D[s]&&(i=s),n&&(D[s]=n,i=s);var u=e.split("-");if(!i&&u.length>1)return t(u[0])}else {var a=e.name;D[a]=e,i=a;}return !r&&i&&(g=i),i||!r&&g},O=function(t,e){if(S(t))return t.clone();var n="object"==typeof e?e:{};return n.date=t,n.args=arguments,new _(n)},b=v;b.l=w,b.i=S,b.w=function(t,e){return O(t,{locale:e.$L,utc:e.$u,x:e.$x,$offset:e.$offset})};var _=function(){function M(t){this.$L=w(t.locale,null,!0),this.parse(t),this.$x=this.$x||t.x||{},this[p]=!0;}var m=M.prototype;return m.parse=function(t){this.$d=function(t){var e=t.date,n=t.utc;if(null===e)return new Date(NaN);if(b.u(e))return new Date;if(e instanceof Date)return new Date(e);if("string"==typeof e&&!/Z$/i.test(e)){var r=e.match($);if(r){var i=r[2]-1||0,s=(r[7]||"0").substring(0,3);return n?new Date(Date.UTC(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)):new Date(r[1],i,r[3]||1,r[4]||0,r[5]||0,r[6]||0,s)}}return new Date(e)}(t),this.init();},m.init=function(){var t=this.$d;this.$y=t.getFullYear(),this.$M=t.getMonth(),this.$D=t.getDate(),this.$W=t.getDay(),this.$H=t.getHours(),this.$m=t.getMinutes(),this.$s=t.getSeconds(),this.$ms=t.getMilliseconds();},m.$utils=function(){return b},m.isValid=function(){return !(this.$d.toString()===l)},m.isSame=function(t,e){var n=O(t);return this.startOf(e)<=n&&n<=this.endOf(e)},m.isAfter=function(t,e){return O(t)<this.startOf(e)},m.isBefore=function(t,e){return this.endOf(e)<O(t)},m.$g=function(t,e,n){return b.u(t)?this[e]:this.set(n,t)},m.unix=function(){return Math.floor(this.valueOf()/1e3)},m.valueOf=function(){return this.$d.getTime()},m.startOf=function(t,e){var n=this,r=!!b.u(e)||e,f=b.p(t),l=function(t,e){var i=b.w(n.$u?Date.UTC(n.$y,e,t):new Date(n.$y,e,t),n);return r?i:i.endOf(a)},$=function(t,e){return b.w(n.toDate()[t].apply(n.toDate("s"),(r?[0,0,0,0]:[23,59,59,999]).slice(e)),n)},y=this.$W,M=this.$M,m=this.$D,v="set"+(this.$u?"UTC":"");switch(f){case h:return r?l(1,0):l(31,11);case c:return r?l(1,M):l(0,M+1);case o:var g=this.$locale().weekStart||0,D=(y<g?y+7:y)-g;return l(r?m-D:m+(6-D),M);case a:case d:return $(v+"Hours",0);case u:return $(v+"Minutes",1);case s:return $(v+"Seconds",2);case i:return $(v+"Milliseconds",3);default:return this.clone()}},m.endOf=function(t){return this.startOf(t,!1)},m.$set=function(t,e){var n,o=b.p(t),f="set"+(this.$u?"UTC":""),l=(n={},n[a]=f+"Date",n[d]=f+"Date",n[c]=f+"Month",n[h]=f+"FullYear",n[u]=f+"Hours",n[s]=f+"Minutes",n[i]=f+"Seconds",n[r]=f+"Milliseconds",n)[o],$=o===a?this.$D+(e-this.$W):e;if(o===c||o===h){var y=this.clone().set(d,1);y.$d[l]($),y.init(),this.$d=y.set(d,Math.min(this.$D,y.daysInMonth())).$d;}else l&&this.$d[l]($);return this.init(),this},m.set=function(t,e){return this.clone().$set(t,e)},m.get=function(t){return this[b.p(t)]()},m.add=function(r,f){var d,l=this;r=Number(r);var $=b.p(f),y=function(t){var e=O(l);return b.w(e.date(e.date()+Math.round(t*r)),l)};if($===c)return this.set(c,this.$M+r);if($===h)return this.set(h,this.$y+r);if($===a)return y(1);if($===o)return y(7);var M=(d={},d[s]=e,d[u]=n,d[i]=t,d)[$]||1,m=this.$d.getTime()+r*M;return b.w(m,this)},m.subtract=function(t,e){return this.add(-1*t,e)},m.format=function(t){var e=this,n=this.$locale();if(!this.isValid())return n.invalidDate||l;var r=t||"YYYY-MM-DDTHH:mm:ssZ",i=b.z(this),s=this.$H,u=this.$m,a=this.$M,o=n.weekdays,c=n.months,f=n.meridiem,h=function(t,n,i,s){return t&&(t[n]||t(e,r))||i[n].slice(0,s)},d=function(t){return b.s(s%12||12,t,"0")},$=f||function(t,e,n){var r=t<12?"AM":"PM";return n?r.toLowerCase():r};return r.replace(y,(function(t,r){return r||function(t){switch(t){case"YY":return String(e.$y).slice(-2);case"YYYY":return b.s(e.$y,4,"0");case"M":return a+1;case"MM":return b.s(a+1,2,"0");case"MMM":return h(n.monthsShort,a,c,3);case"MMMM":return h(c,a);case"D":return e.$D;case"DD":return b.s(e.$D,2,"0");case"d":return String(e.$W);case"dd":return h(n.weekdaysMin,e.$W,o,2);case"ddd":return h(n.weekdaysShort,e.$W,o,3);case"dddd":return o[e.$W];case"H":return String(s);case"HH":return b.s(s,2,"0");case"h":return d(1);case"hh":return d(2);case"a":return $(s,u,!0);case"A":return $(s,u,!1);case"m":return String(u);case"mm":return b.s(u,2,"0");case"s":return String(e.$s);case"ss":return b.s(e.$s,2,"0");case"SSS":return b.s(e.$ms,3,"0");case"Z":return i}return null}(t)||i.replace(":","")}))},m.utcOffset=function(){return 15*-Math.round(this.$d.getTimezoneOffset()/15)},m.diff=function(r,d,l){var $,y=this,M=b.p(d),m=O(r),v=(m.utcOffset()-this.utcOffset())*e,g=this-m,D=function(){return b.m(y,m)};switch(M){case h:$=D()/12;break;case c:$=D();break;case f:$=D()/3;break;case o:$=(g-v)/6048e5;break;case a:$=(g-v)/864e5;break;case u:$=g/n;break;case s:$=g/e;break;case i:$=g/t;break;default:$=g;}return l?$:b.a($)},m.daysInMonth=function(){return this.endOf(c).$D},m.$locale=function(){return D[this.$L]},m.locale=function(t,e){if(!t)return this.$L;var n=this.clone(),r=w(t,e,!0);return r&&(n.$L=r),n},m.clone=function(){return b.w(this.$d,this)},m.toDate=function(){return new Date(this.valueOf())},m.toJSON=function(){return this.isValid()?this.toISOString():null},m.toISOString=function(){return this.$d.toISOString()},m.toString=function(){return this.$d.toUTCString()},M}(),k=_.prototype;return O.prototype=k,[["$ms",r],["$s",i],["$m",s],["$H",u],["$W",a],["$M",c],["$y",h],["$D",d]].forEach((function(t){k[t[1]]=function(e){return this.$g(e,t[0],t[1])};})),O.extend=function(t,e){return t.$i||(t(e,_,O),t.$i=!0),O},O.locale=w,O.isDayjs=S,O.unix=function(t){return O(1e3*t)},O.en=D[g],O.Ls=D,O.p={},O})); 
 } (dayjs_min, dayjs_min.exports));
 
 var dayjs_minExports = dayjs_min.exports;
@@ -250,7 +252,7 @@ var timezone$1 = {exports: {}};
 timezone$1.exports;
 
 (function (module, exports) {
-	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,v=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",h=+e;return (o.utc(v).valueOf()-(h-=h%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return "timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"));return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return [i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t;};}})); 
+	!function(t,e){module.exports=e();}(commonjsGlobal,(function(){var t={year:0,month:1,day:2,hour:3,minute:4,second:5},e={};return function(n,i,o){var r,a=function(t,n,i){void 0===i&&(i={});var o=new Date(t),r=function(t,n){void 0===n&&(n={});var i=n.timeZoneName||"short",o=t+"|"+i,r=e[o];return r||(r=new Intl.DateTimeFormat("en-US",{hour12:!1,timeZone:t,year:"numeric",month:"2-digit",day:"2-digit",hour:"2-digit",minute:"2-digit",second:"2-digit",timeZoneName:i}),e[o]=r),r}(n,i);return r.formatToParts(o)},u=function(e,n){for(var i=a(e,n),r=[],u=0;u<i.length;u+=1){var f=i[u],s=f.type,m=f.value,c=t[s];c>=0&&(r[c]=parseInt(m,10));}var d=r[3],l=24===d?0:d,h=r[0]+"-"+r[1]+"-"+r[2]+" "+l+":"+r[4]+":"+r[5]+":000",v=+e;return (o.utc(h).valueOf()-(v-=v%1e3))/6e4},f=i.prototype;f.tz=function(t,e){void 0===t&&(t=r);var n=this.utcOffset(),i=this.toDate(),a=i.toLocaleString("en-US",{timeZone:t}),u=Math.round((i-new Date(a))/1e3/60),f=o(a,{locale:this.$L}).$set("millisecond",this.$ms).utcOffset(15*-Math.round(i.getTimezoneOffset()/15)-u,!0);if(e){var s=f.utcOffset();f=f.add(n-s,"minute");}return f.$x.$timezone=t,f},f.offsetName=function(t){var e=this.$x.$timezone||o.tz.guess(),n=a(this.valueOf(),e,{timeZoneName:t}).find((function(t){return "timezonename"===t.type.toLowerCase()}));return n&&n.value};var s=f.startOf;f.startOf=function(t,e){if(!this.$x||!this.$x.$timezone)return s.call(this,t,e);var n=o(this.format("YYYY-MM-DD HH:mm:ss:SSS"),{locale:this.$L});return s.call(n,t,e).tz(this.$x.$timezone,!0)},o.tz=function(t,e,n){var i=n&&e,a=n||e||r,f=u(+o(),a);if("string"!=typeof t)return o(t).tz(a);var s=function(t,e,n){var i=t-60*e*1e3,o=u(i,n);if(e===o)return [i,e];var r=u(i-=60*(o-e)*1e3,n);return o===r?[i,o]:[t-60*Math.min(o,r)*1e3,Math.max(o,r)]}(o.utc(t,i).valueOf(),f,a),m=s[0],c=s[1],d=o(m).utcOffset(c);return d.$x.$timezone=a,d},o.tz.guess=function(){return Intl.DateTimeFormat().resolvedOptions().timeZone},o.tz.setDefault=function(t){r=t;};}})); 
 } (timezone$1, timezone$1.exports));
 
 var timezoneExports = timezone$1.exports;
@@ -261,7 +263,7 @@ var utc$1 = {exports: {}};
 utc$1.exports;
 
 (function (module, exports) {
-	!function(t,i){module.exports=i();}(commonjsGlobal,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t);};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else r.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r;}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||(new Date).getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}})); 
+	!function(t,i){module.exports=i();}(commonjsGlobal,(function(){var t="minute",i=/[+-]\d\d(?::?\d\d)?/g,e=/([+-]|\d\d)/g;return function(s,f,n){var u=f.prototype;n.utc=function(t){var i={date:t,utc:!0,args:arguments};return new f(i)},u.utc=function(i){var e=n(this.toDate(),{locale:this.$L,utc:!0});return i?e.add(this.utcOffset(),t):e},u.local=function(){return n(this.toDate(),{locale:this.$L,utc:!1})};var o=u.parse;u.parse=function(t){t.utc&&(this.$u=!0),this.$utils().u(t.$offset)||(this.$offset=t.$offset),o.call(this,t);};var r=u.init;u.init=function(){if(this.$u){var t=this.$d;this.$y=t.getUTCFullYear(),this.$M=t.getUTCMonth(),this.$D=t.getUTCDate(),this.$W=t.getUTCDay(),this.$H=t.getUTCHours(),this.$m=t.getUTCMinutes(),this.$s=t.getUTCSeconds(),this.$ms=t.getUTCMilliseconds();}else r.call(this);};var a=u.utcOffset;u.utcOffset=function(s,f){var n=this.$utils().u;if(n(s))return this.$u?0:n(this.$offset)?a.call(this):this.$offset;if("string"==typeof s&&(s=function(t){void 0===t&&(t="");var s=t.match(i);if(!s)return null;var f=(""+s[0]).match(e)||["-",0,0],n=f[0],u=60*+f[1]+ +f[2];return 0===u?0:"+"===n?u:-u}(s),null===s))return this;var u=Math.abs(s)<=16?60*s:s,o=this;if(f)return o.$offset=u,o.$u=0===s,o;if(0!==s){var r=this.$u?this.toDate().getTimezoneOffset():-1*this.utcOffset();(o=this.local().add(u+r,t)).$offset=u,o.$x.$localOffset=r;}else o=this.utc();return o};var h=u.format;u.format=function(t){var i=t||(this.$u?"YYYY-MM-DDTHH:mm:ss[Z]":"");return h.call(this,i)},u.valueOf=function(){var t=this.$utils().u(this.$offset)?0:this.$offset+(this.$x.$localOffset||this.$d.getTimezoneOffset());return this.$d.valueOf()-6e4*t},u.isUTC=function(){return !!this.$u},u.toISOString=function(){return this.toDate().toISOString()},u.toString=function(){return this.toDate().toUTCString()};var l=u.toDate;u.toDate=function(t){return "s"===t&&this.$offset?n(this.format("YYYY-MM-DD HH:mm:ss:SSS")).toDate():l.call(this)};var c=u.diff;u.diff=function(t,i,e){if(t&&this.$u===t.$u)return c.call(this,t,i,e);var s=this.local(),f=n(t).local();return c.call(s,f,i,e)};}})); 
 } (utc$1, utc$1.exports));
 
 var utcExports = utc$1.exports;
@@ -321,6 +323,26 @@ var TEXT_RULES = [{
   label: t$1("neetoFilters.rules.doesNotEndWith"),
   value: "does_not_end_with"
 }];
+var MULTI_DROPDOWN_RULES = [{
+  label: t$1("neetoFilters.rules.in"),
+  value: "in"
+}, {
+  label: t$1("neetoFilters.rules.notIn"),
+  value: "not_in"
+}, {
+  label: t$1("neetoFilters.rules.isEmpty"),
+  value: "is_unknown"
+}];
+var SINGLE_DROPDOWN_RULES = [{
+  label: t$1("neetoFilters.rules.is"),
+  value: "is"
+}, {
+  label: t$1("neetoFilters.rules.isNot"),
+  value: "is_not"
+}, {
+  label: t$1("neetoFilters.rules.isEmpty"),
+  value: "is_unknown"
+}];
 var DEFAULT_BOOLEAN_OPTIONS = [{
   label: t$1("neetoFilters.common.yes"),
   value: "true"
@@ -374,6 +396,9 @@ var isTime = function isTime(type) {
 var isMulti = function isMulti(type) {
   return type === "multi_option" || type === "custom.multi_option";
 };
+var isSingle = function isSingle(type) {
+  return type === "single_option" || type === "custom.single_option";
+};
 var isText = function isText(type) {
   return type === "text" || type === "custom.text";
 };
@@ -466,7 +491,7 @@ var buildUpdatedFilter = function buildUpdatedFilter(_ref8) {
   if (isMulti(defaultType)) {
     return mergeLeft(filter, {
       value: pluck("value", option),
-      rule: "in"
+      rule: rule
     });
   } else if (isDate(defaultType)) {
     return mergeLeft(filter, buildDateValue(option));
@@ -489,6 +514,11 @@ var buildUpdatedFilter = function buildUpdatedFilter(_ref8) {
     });
   } else if (isTime(defaultType)) {
     return mergeLeft(filter, buildTimeValue(option));
+  } else if (isSingle(defaultType)) {
+    return mergeLeft(filter, {
+      value: option.value,
+      rule: rule
+    });
   }
   return mergeLeft(filter, {
     value: option.value,
@@ -519,40 +549,53 @@ var buildFiltersFromSearchParams = function buildFiltersFromSearchParams(columns
         value: value
       }, column);
     } else if (isMulti(defaultType)) {
-      return mergeLeft({
-        rule: "in",
-        value: value.split("|")
-      }, column);
-    } else if (isDigit(defaultType) || isText(defaultType)) {
       var _value$split = value.split("+rule-"),
         _value$split2 = _slicedToArray(_value$split, 2),
         filterValue = _value$split2[0],
         rule = _value$split2[1];
       return mergeLeft({
-        rule: rule,
-        value: filterValue
-      }, column);
-    } else if (isTime(defaultType) && isCustomTimeRange(value)) {
-      return mergeLeft({
-        value: value.split(",")
+        rule: rule !== null && rule !== void 0 ? rule : "in",
+        value: filterValue.split("|")
       }, column);
-    } else if (isSingleDate(defaultType)) {
+    } else if (isSingle(defaultType)) {
       var _value$split3 = value.split("+rule-"),
         _value$split4 = _slicedToArray(_value$split3, 2),
         _filterValue = _value$split4[0],
         _rule = _value$split4[1];
       return mergeLeft({
-        rule: _rule,
-        value: _rule === "between" ? _filterValue.split(",") : _filterValue
+        rule: _rule !== null && _rule !== void 0 ? _rule : "in",
+        value: _filterValue
       }, column);
-    } else if (isSingleTime(defaultType)) {
+    } else if (isDigit(defaultType) || isText(defaultType)) {
       var _value$split5 = value.split("+rule-"),
         _value$split6 = _slicedToArray(_value$split5, 2),
         _filterValue2 = _value$split6[0],
         _rule2 = _value$split6[1];
       return mergeLeft({
         rule: _rule2,
-        value: _rule2 === "between" ? _filterValue2.split(",") : _filterValue2
+        value: _filterValue2
+      }, column);
+    } else if (isTime(defaultType) && isCustomTimeRange(value)) {
+      return mergeLeft({
+        value: value
+      }, column);
+    } else if (isSingleDate(defaultType)) {
+      var _value$split7 = value.split("+rule-"),
+        _value$split8 = _slicedToArray(_value$split7, 2),
+        _filterValue3 = _value$split8[0],
+        _rule3 = _value$split8[1];
+      return mergeLeft({
+        rule: _rule3,
+        value: _rule3 === "between" ? _filterValue3.split(",") : _filterValue3
+      }, column);
+    } else if (isSingleTime(defaultType)) {
+      var _value$split9 = value.split("+rule-"),
+        _value$split10 = _slicedToArray(_value$split9, 2),
+        _filterValue4 = _value$split10[0],
+        _rule4 = _value$split10[1];
+      return mergeLeft({
+        rule: _rule4,
+        value: _rule4 === "between" ? _filterValue4.split(",") : _filterValue4
       }, column);
     } else if (isBoolean(defaultType)) {
       return mergeLeft({
@@ -815,7 +858,9 @@ var createUrlParamString = function createUrlParamString(_ref15) {
   } else if (isSingleDate(defaultType) || isSingleTime(defaultType)) {
     return value && "".concat(value, "+rule-").concat(rule) || value;
   } else if (isMulti(defaultType)) {
-    return value.join("|");
+    return "".concat(value.join("|"), "+rule-").concat(rule);
+  } else if (isSingle(defaultType)) {
+    return "".concat(value, "+rule-").concat(rule);
   } else if (isBoolean(defaultType)) {
     return getLabelFromBool({
       value: value,
@@ -943,6 +988,9 @@ var getColumnsWithStandardizedType = function getColumnsWithStandardizedType(col
 var isKeywordFilterPresent = function isKeywordFilterPresent(keyworFilter) {
   return not(isEmpty(keyworFilter.node));
 };
+var isNilOrEmpty = function isNilOrEmpty(param) {
+  return isNil(param) || isEmpty(param);
+};
 
 var buildDropdownValue = function buildDropdownValue(_ref) {
   var defaultType = _ref.defaultType,
@@ -1035,6 +1083,34 @@ var buildDateValues = function buildDateValues(dates, selectedRule) {
 var buildHelpIconProps = function buildHelpIconProps(helpIconProps) {
   return mergeDeepRight(DEFAULT_HELP_ICON_PROPS, helpIconProps);
 };
+var hasInvalidTimes = function hasInvalidTimes(times) {
+  if (Array.isArray(times)) {
+    return times.some(function (time) {
+      return time.isValid();
+    }) === false;
+  }
+  return !times.isValid();
+};
+var areCustomTimeRangeValuesNotValid = function areCustomTimeRangeValuesNotValid(times) {
+  return !times.every(function (time) {
+    return time.isValid();
+  });
+};
+
+// eslint-disable-next-line @bigbinary/neeto/use-standard-date-time-formats
+var formatSingleTime = function formatSingleTime(time) {
+  return dayjs(time).format("HH:mm:ss");
+};
+var formatTime = function formatTime(value, timePickerType) {
+  if (isNilOrEmpty(value)) return null;
+  if (timePickerType === "range") {
+    return value.map(formatSingleTime);
+  }
+  return formatSingleTime(value);
+};
+var isRuleEmpty = function isRuleEmpty(rule) {
+  return equals(rule, "is_unknown");
+};
 
 var Boolean = function Boolean(_ref) {
   var column = _ref.column,
@@ -1184,13 +1260,16 @@ var Dropdown = function Dropdown(_ref) {
   var column = _ref.column,
     filter = _ref.filter,
     handleApplyFilter = _ref.handleApplyFilter,
-    autoFocus = _ref.autoFocus;
+    autoFocus = _ref.autoFocus,
+    filters = _ref.filters;
   var key = column.key,
     label = column.label,
     values = column.values,
     defaultValue = column.defaultValue,
     _column$defaultType = column.defaultType,
     defaultType = _column$defaultType === void 0 ? column.type : _column$defaultType,
+    _column$showRuleSelec = column.showRuleSelector,
+    showRuleSelector = _column$showRuleSelec === void 0 ? false : _column$showRuleSelec,
     _column$isClearable = column.isClearable,
     isClearable = _column$isClearable === void 0 ? true : _column$isClearable,
     _column$helpIconProps = column.helpIconProps,
@@ -1201,13 +1280,44 @@ var Dropdown = function Dropdown(_ref) {
     filter: filter,
     options: values
   });
+  var dropdownRules = isMulti(defaultType) ? MULTI_DROPDOWN_RULES : SINGLE_DROPDOWN_RULES;
   var value = buildDropdownValue({
     defaultType: defaultType,
     filter: filter,
     options: options
   });
+  var _useState = useState(findBy({
+      value: filter === null || filter === void 0 ? void 0 : filter.rule
+    }, dropdownRules) || dropdownRules[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    selectedRule = _useState2[0],
+    setSelectedRule = _useState2[1];
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var getOption = function getOption(isSelectedRuleEmpty, options, value) {
+    if (isSelectedRuleEmpty) {
+      return isMulti(defaultType) ? [options[0]] : options[0];
+    }
+    return value;
+  };
+  var handleRuleChange = function handleRuleChange(rule) {
+    var isPreviousRuleEmpty = isRuleEmpty(selectedRule.value);
+    var isNewRuleEmpty = isRuleEmpty(rule.value);
+    setSelectedRule(rule);
+    if (isPreviousRuleEmpty || !isNewRuleEmpty && isNotPresent(filter === null || filter === void 0 ? void 0 : filter.value)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    var updatedFilter = buildUpdatedFilter({
+      column: column,
+      defaultType: defaultType,
+      rule: rule.value,
+      option: getOption(isNewRuleEmpty, options, value)
+    });
+    handleApplyFilter(updatedFilter);
+  };
   var handleChange = function handleChange(option) {
     if (isEmpty(option) || isNil(option)) {
       handleApplyFilter({
@@ -1218,20 +1328,31 @@ var Dropdown = function Dropdown(_ref) {
     var updatedFilter = buildUpdatedFilter({
       column: column,
       defaultType: defaultType,
-      option: option
+      option: option,
+      rule: selectedRule.value
     });
     handleApplyFilter(updatedFilter);
   };
+  useEffect(function () {
+    if (!isEmpty(filters)) return;
+    isRuleEmpty(selectedRule.value) && setSelectedRule(dropdownRules[0]);
+  }, [filters]);
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-pane-filter__item-wrapper"
-  }, /*#__PURE__*/React.createElement(Select, _extends({
-    autoFocus: autoFocus,
+  }, showRuleSelector && /*#__PURE__*/React.createElement(Select, {
     label: label,
+    defaultValue: dropdownRules[0],
+    options: dropdownRules,
+    value: selectedRule,
+    onChange: handleRuleChange
+  }), !isRuleEmpty(selectedRule.value) && /*#__PURE__*/React.createElement(Select, _extends({
+    autoFocus: autoFocus,
     options: options,
     value: value,
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
     isClearable: !defaultValue && isClearable,
     isMulti: isMulti(defaultType),
+    label: !showRuleSelector && label,
     strategy: "fixed",
     placeholder: t("neetoFilters.messages.selectResource", {
       resource: label
@@ -1381,6 +1502,15 @@ var SingleTime = function SingleTime(_ref) {
     handleApplyFilter(updatedFilter);
   };
   var handleChange = function handleChange(times) {
+    if (hasInvalidTimes(times)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    if (timePickerType === "range" && areCustomTimeRangeValuesNotValid(times)) {
+      return;
+    }
     var value = timePickerType === "range" ? pluck("$d", times).map(function (time) {
       return time.toISOString();
     }) : times["$d"].toISOString();
@@ -1393,6 +1523,7 @@ var SingleTime = function SingleTime(_ref) {
     });
     handleApplyFilter(updatedFilter);
   };
+  var formattedTime = formatTime(value, timePickerType);
   return /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-pane-filter__item-wrapper"
   }, /*#__PURE__*/React.createElement(Select, _extends({
@@ -1407,15 +1538,12 @@ var SingleTime = function SingleTime(_ref) {
     }
   }, {
     onChange: handleRuleChange
-  })), /*#__PURE__*/React.createElement(TimePicker, _extends({
+  })), /*#__PURE__*/React.createElement(TimePickerInput, _extends({
     autoFocus: autoFocus,
-    value: value,
-    use12Hours: true,
     className: "w-full",
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-filter"),
-    format: "h:mm A",
-    getPopupContainer: prop("parentNode"),
     type: timePickerType,
+    value: formattedTime,
     onChange: handleChange
   }, otherProps)));
 };
@@ -1558,6 +1686,15 @@ var Time = function Time(_ref) {
     handleApplyFilter(updatedFilter);
   };
   var handleTimeRangeChange = function handleTimeRangeChange(times) {
+    if (hasInvalidTimes(times)) {
+      handleApplyFilter({
+        _delete: true
+      });
+      return;
+    }
+    if (isCustomTimeRangeShown && areCustomTimeRangeValuesNotValid(times)) {
+      return;
+    }
     var updatedFilter = buildUpdatedFilter({
       column: column,
       defaultType: defaultType,
@@ -1588,13 +1725,11 @@ var Time = function Time(_ref) {
     }
   }, {
     onChange: handleChange
-  })), isCustomTimeRangeShown && /*#__PURE__*/React.createElement(TimePicker, _extends({
-    use12Hours: true,
+  })), isCustomTimeRangeShown && /*#__PURE__*/React.createElement(TimePickerInput, _extends({
+    className: "w-full",
     "data-cy": "neeto-filters-".concat(hyphenate(key), "-date-range"),
-    format: "h:mm A",
-    getPopupContainer: prop("parentNode"),
     type: "range",
-    value: filter.value,
+    value: formatTime(filter.value, "range"),
     onChange: handleTimeRangeChange
   }, otherProps)));
 };
@@ -1678,6 +1813,7 @@ var Item = function Item(_ref) {
     autoFocus: autoFocus,
     column: column,
     filter: filter,
+    filters: filters,
     handleApplyFilter: handleApplyFilter
   });
 };
@@ -2037,19 +2173,26 @@ var buildRuleValue = function buildRuleValue(_ref) {
     return findBy({
       value: rule
     }, SINGLE_TIME_OPTIONS).label;
+  } else if (isMulti(defaultType) || isSingle(defaultType)) {
+    return isRuleEmpty(rule) ? t$1("neetoFilters.rules.isEmpty") : "";
   }
   return "";
 };
 var hasOnlyKeywordFilter = function hasOnlyKeywordFilter(filters) {
   return filters.length === 1 && filters[0].key === SEARCH_TERM_KEY;
 };
-var deepCompare = function deepCompare(filters1, filters2) {
+var deepCompare = function deepCompare(segments, filters) {
   var comparisonHelper = function comparisonHelper(filters) {
     return sortBy(prop("key"), removeBy({
       key: SEARCH_TERM_KEY
-    }, project(["key", "rule", "value"], filters)));
+    }, project(["key", "rule", "value", "label"], filters)));
   };
-  return notEqualsDeep(comparisonHelper(filters1), comparisonHelper(filters2));
+  return reject(function (filters) {
+    var segment = findBy({
+      key: filters.key
+    }, segments);
+    return segment && segment.value === filters.value;
+  }, comparisonHelper(filters));
 };
 
 var Block = function Block(_ref) {
@@ -2101,7 +2244,7 @@ var Block = function Block(_ref) {
   }, label, ":"), /*#__PURE__*/React.createElement(Typography, {
     className: "neeto-ui-text-gray-600",
     style: "body2"
-  }, ruleContent), /*#__PURE__*/React.createElement(Typography, {
+  }, ruleContent), !isRuleEmpty(rule) && /*#__PURE__*/React.createElement(Typography, {
     style: "body2"
   }, blockContent), !defaultValue && /*#__PURE__*/React.createElement("div", {
     className: "neeto-filters-bar__block-close"
@@ -2169,7 +2312,7 @@ var FilterBar = function FilterBar(_ref) {
     handleApplyFilters = _ref.handleApplyFilters;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var history = useHistory();
+  var history = useHistory$1();
   var searchParams = useQueryParams({
     toCamelCase: false
   });
@@ -2227,6 +2370,7 @@ var FilterBar = function FilterBar(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "flex items-center gap-x-2"
   }, isPresent(entity) && !hasOnlyKeywordFilter(filters) && /*#__PURE__*/React.createElement(Button, {
+    "data-cy": "save-segment-button",
     label: t("neetoFilters.segments.saveAsNewSegment"),
     style: "secondary",
     onClick: function onClick() {
@@ -2458,21 +2602,44 @@ var SegmentBar = function SegmentBar(_ref) {
   var entity = _ref.entity,
     filters = _ref.filters,
     setIsSavePaneOpen = _ref.setIsSavePaneOpen,
-    setIsPaneOpen = _ref.setIsPaneOpen;
+    setIsPaneOpen = _ref.setIsPaneOpen,
+    handleApplyFilters = _ref.handleApplyFilters,
+    childrenKeys = _ref.childrenKeys;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
+  var history = useHistory$1();
   var _useQueryParams = useQueryParams(),
     segmentId = _useQueryParams.segmentId;
   var queryClient = useQueryClient();
   var cachedSegments = queryClient.getQueryData([QUERY_KEYS.SEGMENTS_LIST, entity, ""]) || DEFAULT_SEGMENTS_CACHE;
   var segment = findById(segmentId, cachedSegments.segments);
   if (isNotPresent(segment)) return null;
-  var newChangesExists = deepCompare(segment.filters[0].conditions, filters);
+  var handleDelete = function handleDelete(key) {
+    if (key === SEARCH_TERM_KEY) {
+      var params = omit([SEARCH_TERM_KEY], getSnakeCasedQueryParams());
+      var pathname = window.location.pathname;
+      history.push(buildUrl(pathname, params));
+      return;
+    }
+    if (childrenKeys.includes(key)) {
+      var _params = omit([key], getSnakeCasedQueryParams());
+      var _pathname = window.location.pathname;
+      history.push(buildUrl(_pathname, _params));
+    }
+    var newFilters = removeBy({
+      key: key
+    }, filters);
+    handleApplyFilters(newFilters);
+  };
+  var changedFilters = deepCompare(segment.filters[0].conditions, filters);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
-    className: "neeto-ui-text-gray-600 mr-4",
+    className: "neeto-ui-text-gray-600 mr-4 px-2",
     "data-cy": "neeto-filters-segment-name",
     style: "h4"
-  }, segment.name), newChangesExists && /*#__PURE__*/React.createElement(Dropdown$2, {
+  }, segment.name), isNotEmpty(changedFilters) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown$2, {
+    buttonProps: {
+      className: "mr-2"
+    },
     buttonStyle: "secondary",
     label: t("neetoFilters.segments.updateSegment")
   }, /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(MenuItem.Button, {
@@ -2488,7 +2655,18 @@ var SegmentBar = function SegmentBar(_ref) {
         action: SEGMENT_ACTIONS$1.CREATE
       });
     }
-  }, t("neetoFilters.segments.saveAsNewSegment")))));
+  }, t("neetoFilters.segments.saveAsNewSegment")))), changedFilters.map(function (filter) {
+    var _filter$suffixCompone;
+    return /*#__PURE__*/React.createElement(React.Fragment, {
+      key: filter.key
+    }, /*#__PURE__*/React.createElement(Block, {
+      filter: filter,
+      handleDelete: handleDelete,
+      setIsPaneOpen: setIsPaneOpen
+    }), (_filter$suffixCompone = filter.suffixComponent) === null || _filter$suffixCompone === void 0 ? void 0 : _filter$suffixCompone.call(filter), /*#__PURE__*/React.createElement("div", {
+      className: "neeto-filters-bar--separator"
+    }));
+  })));
 };
 
 var Bar = function Bar(_ref) {
@@ -2904,6 +3082,7 @@ var SEGMENT_ACTIONS = {
   EDIT: "edit",
   DELETE: "delete"
 };
+var ALL_RESULTS = t$1("neetoFilters.common.allResults");
 
 var Delete = function Delete(_ref) {
   var isOpen = _ref.isOpen,
@@ -2952,30 +3131,56 @@ var Delete = function Delete(_ref) {
   });
 };
 
+var reorderList = function reorderList(list, startIndex, endIndex) {
+  var result = Array.from(list);
+  var _result$splice = result.splice(startIndex, 1),
+    _result$splice2 = _slicedToArray(_result$splice, 1),
+    removed = _result$splice2[0];
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
 var useSegments = function useSegments(_ref) {
   var entity = _ref.entity,
     columns = _ref.columns,
-    appliedFilters = _ref.appliedFilters,
     childrenKeys = _ref.childrenKeys;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
   var history = useHistory$1();
+  var appliedFilters = buildFiltersFromURL(columns);
   var _useFetchSegments = useFetchSegments({
       entity: entity
     }),
-    _useFetchSegments$dat = _useFetchSegments.data,
-    segments = _useFetchSegments$dat === void 0 ? [] : _useFetchSegments$dat,
+    fetchedSegments = _useFetchSegments.data,
     isLoading = _useFetchSegments.isLoading;
+  var _useState = useState(fetchedSegments),
+    _useState2 = _slicedToArray(_useState, 2),
+    segments = _useState2[0],
+    setSegments = _useState2[1];
   var _useUpdateSegment = useUpdateSegment(),
     updateSegment = _useUpdateSegment.mutate,
     isUpdating = _useUpdateSegment.isLoading;
-  var _useState = useState({
+  var _useState3 = useState({
       action: "",
       segment: undefined
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    confirmAction = _useState2[0],
-    setConfirmAction = _useState2[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    confirmAction = _useState4[0],
+    setConfirmAction = _useState4[1];
+  var handleSegmentsReorder = function handleSegmentsReorder(_ref2) {
+    var source = _ref2.source,
+      destination = _ref2.destination;
+    if (!destination || source.index === destination.index) return;
+    var reorderedSegments = reorderList(segments, source.index, destination.index);
+    updateSegment({
+      id: segments[source.index].id,
+      payload: {
+        position: destination.index + 1
+      },
+      showToastr: false
+    });
+    setSegments(reorderedSegments);
+  };
   var clearAppliedFilters = function clearAppliedFilters() {
     var _filters$, _filters$2;
     var filters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : appliedFilters;
@@ -2990,10 +3195,10 @@ var useSegments = function useSegments(_ref) {
       })
     });
   };
-  var handleSelectSegment = function handleSelectSegment(_ref2) {
+  var handleSelectSegment = function handleSelectSegment(_ref3) {
     var _filters$3;
-    var id = _ref2.id,
-      filters = _ref2.filters;
+    var id = _ref3.id,
+      filters = _ref3.filters;
     history.push({
       search: buildUrlFromSegment({
         columns: columns,
@@ -3002,6 +3207,9 @@ var useSegments = function useSegments(_ref) {
       })
     });
   };
+  useEffect(function () {
+    setSegments(fetchedSegments);
+  }, [fetchedSegments]);
   if (isLoading) {
     return /*#__PURE__*/React.createElement(Spinner, null);
   }
@@ -3010,9 +3218,9 @@ var useSegments = function useSegments(_ref) {
       style: "body2"
     }, t("neetoFilters.segments.noSegmentsFound"));
   }
-  var handleUpdate = function handleUpdate(_ref3, _ref4) {
-    var name = _ref3.name;
-    var setFieldError = _ref4.setFieldError;
+  var handleUpdate = function handleUpdate(_ref4, _ref5) {
+    var name = _ref4.name;
+    var setFieldError = _ref5.setFieldError;
     var filtersPayload = buildSegmentsPayload(filters, childrenKeys);
     updateSegment({
       id: confirmAction.segment.id,
@@ -3036,9 +3244,11 @@ var useSegments = function useSegments(_ref) {
   };
   var filters = buildFiltersFromSearchParams(columns);
   return {
+    appliedFilters: appliedFilters,
     segments: segments,
     clearAppliedFilters: clearAppliedFilters,
     handleSelectSegment: handleSelectSegment,
+    handleSegmentsReorder: handleSegmentsReorder,
     setConfirmAction: setConfirmAction,
     isUpdating: isUpdating,
     handleUpdate: handleUpdate,
@@ -3087,6 +3297,7 @@ var Segment = function Segment(_ref) {
   }];
   return /*#__PURE__*/React.createElement("div", {
     onClick: onClick,
+    "data-cy": "neeto-filters-segment-block-".concat(hyphenate(label)),
     className: classnames("neeto-ui-border-gray-400 neeto-ui-bg-white hover:neeto-ui-bg-gray-200 neeto-ui-rounded-lg mb-2 flex h-10 cursor-pointer items-center gap-2 border p-3 transition-all duration-300 ease-in-out", {
       "neeto-filters-segment--active": isActive
     })
@@ -3108,30 +3319,162 @@ var Segment = function Segment(_ref) {
 
 var MenuBlocks = function MenuBlocks(_ref) {
   var entity = _ref.entity,
-    columns = _ref.columns,
+    segments = _ref.segments,
+    segmentId = _ref.segmentId,
+    isUpdating = _ref.isUpdating,
+    appliedFilters = _ref.appliedFilters,
+    setConfirmAction = _ref.setConfirmAction,
     defaultSegmentName = _ref.defaultSegmentName,
-    childrenKeys = _ref.childrenKeys,
-    customFilters = _ref.customFilters;
+    handleSelectSegment = _ref.handleSelectSegment,
+    clearAppliedFilters = _ref.clearAppliedFilters,
+    handleSegmentsReorder = _ref.handleSegmentsReorder;
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var segmentFormInitialRef = useRef(null);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showAll = _useState2[0],
     setShowAll = _useState2[1];
-  var _getQueryParams = getQueryParams(),
-    segmentId = _getQueryParams.segmentId;
-  var appliedFilters = buildFiltersFromURL(columns);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuBar.SubTitle, null, /*#__PURE__*/React.createElement(Typography, {
+    component: "h4",
+    style: "h5",
+    textTransform: "uppercase",
+    weight: "bold"
+  }, t("neetoFilters.common.segments"))), segments.length > ITEMS_MAX_COUNT && /*#__PURE__*/React.createElement(Button, {
+    icon: Down,
+    style: "link",
+    label: showAll ? t("neetoFilters.segments.showLess") : t("neetoFilters.segments.showMoreNumbers", {
+      entity: segments.length - ITEMS_MAX_COUNT
+    }),
+    onClick: function onClick() {
+      return setShowAll(function (open) {
+        return !open;
+      });
+    }
+  }), /*#__PURE__*/React.createElement(Segment, {
+    isActive: isEmpty(appliedFilters),
+    label: defaultSegmentName,
+    onClick: clearAppliedFilters
+  }), /*#__PURE__*/React.createElement(DragDropContext, {
+    onDragEnd: handleSegmentsReorder
+  }, /*#__PURE__*/React.createElement(Droppable, {
+    droppableId: "neeto-filters-segments-".concat(entity)
+  }, function (_ref2) {
+    var innerRef = _ref2.innerRef,
+      droppableProps = _ref2.droppableProps,
+      placeholder = _ref2.placeholder;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      ref: innerRef
+    }, droppableProps), segments.slice(0, showAll ? segments.length : ITEMS_MAX_COUNT).map(function (segment, index) {
+      return /*#__PURE__*/React.createElement(Draggable, {
+        index: index,
+        draggableId: segment.id.toString(),
+        isDragDisabled: isUpdating,
+        key: segment.id.toString()
+      }, function (_ref3) {
+        var innerRef = _ref3.innerRef,
+          draggableProps = _ref3.draggableProps,
+          dragHandleProps = _ref3.dragHandleProps;
+        return /*#__PURE__*/React.createElement("div", _extends({
+          ref: innerRef
+        }, draggableProps, dragHandleProps), /*#__PURE__*/React.createElement(Segment, {
+          segments: segments,
+          setConfirmAction: setConfirmAction,
+          shouldShowDropdown: true,
+          id: segment.id,
+          isActive: segment.id === segmentId,
+          key: segment.id,
+          label: segment.name,
+          onClick: function onClick() {
+            return handleSelectSegment(segment);
+          }
+        }));
+      });
+    }), placeholder);
+  })));
+};
+var MenuBlocks$1 = /*#__PURE__*/React.memo(MenuBlocks);
+
+var SidebarBlock = function SidebarBlock(_ref) {
+  var id = _ref.id,
+    isActive = _ref.isActive,
+    label = _ref.label,
+    onClick = _ref.onClick,
+    segments = _ref.segments,
+    setConfirmAction = _ref.setConfirmAction;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var menuItems = [{
+    key: "edit",
+    label: t("neetoFilters.common.edit"),
+    onClick: function onClick() {
+      return setConfirmAction({
+        action: SEGMENT_ACTIONS.EDIT,
+        segment: findById(id, segments)
+      });
+    }
+  }, {
+    key: "delete",
+    label: t("neetoFilters.common.delete"),
+    onClick: function onClick() {
+      return setConfirmAction({
+        action: SEGMENT_ACTIONS.DELETE,
+        segment: findById(id, segments)
+      });
+    }
+  }];
+  var dataCyPrefix = hyphenate(label);
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: onClick,
+    "data-cy": "".concat(dataCyPrefix, "-segment-link"),
+    className: classnames("neeto-molecules-sidebar-segment neeto-molecules-sidebar__sublink neeto-ui-flex neeto-ui-items-center neeto-ui-select-none mb-0 w-full py-1", {
+      active: isActive
+    })
+  }, /*#__PURE__*/React.createElement(Typography, {
+    className: "neeto-molecules-sidebar__link-sub-label neeto-molecules-sidebar-segment__label neeto-ui-flex-grow min-w-0",
+    component: "span",
+    "data-cy": "".concat(dataCyPrefix, "-sub-link-label"),
+    style: "body2"
+  }, label), /*#__PURE__*/React.createElement(MoreDropdown, {
+    menuItems: menuItems,
+    dropdownButtonProps: {
+      "data-testid": "segment-more-menu-".concat(dataCyPrefix),
+      className: "flex-shrink-0",
+      size: "small",
+      style: "secondary"
+    },
+    dropdownProps: {
+      position: "bottom-end",
+      strategy: "fixed",
+      autoWidth: true
+    }
+  }));
+};
+
+var Segments = function Segments(_ref) {
+  var entity = _ref.entity,
+    columns = _ref.columns,
+    _ref$defaultSegmentNa = _ref.defaultSegmentName,
+    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? ALL_RESULTS : _ref$defaultSegmentNa,
+    customFilters = _ref.customFilters,
+    _ref$childrenKeys = _ref.childrenKeys,
+    childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys,
+    _ref$isIndependent = _ref.isIndependent,
+    isIndependent = _ref$isIndependent === void 0 ? true : _ref$isIndependent;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useQueryParams = useQueryParams(),
+    segmentId = _useQueryParams.segmentId;
+  var segmentFormInitialRef = useRef(null);
   var _useSegments = useSegments({
       entity: entity,
       columns: columns,
-      appliedFilters: appliedFilters,
       childrenKeys: childrenKeys
     }),
     _useSegments$segments = _useSegments.segments,
     segments = _useSegments$segments === void 0 ? [] : _useSegments$segments,
     clearAppliedFilters = _useSegments.clearAppliedFilters,
     handleSelectSegment = _useSegments.handleSelectSegment,
+    handleSegmentsReorder = _useSegments.handleSegmentsReorder,
     onClose = _useSegments.onClose,
     setConfirmAction = _useSegments.setConfirmAction,
     selectedSegment = _useSegments.selectedSegment,
@@ -3139,27 +3482,29 @@ var MenuBlocks = function MenuBlocks(_ref) {
     isEditPaneOpen = _useSegments.isEditPaneOpen,
     isUpdating = _useSegments.isUpdating,
     handleUpdate = _useSegments.handleUpdate,
-    filters = _useSegments.filters;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, segments.length > ITEMS_MAX_COUNT && /*#__PURE__*/React.createElement(Button, {
-    icon: Down,
-    style: "link",
-    label: showAll ? t("neetoFilters.segments.showLess") : t("neetoFilters.segments.showMoreNumbers", {
-      entity: segments.length - ITEMS_MAX_COUNT
-    }),
-    onClick: function onClick() {
-      return setShowAll(function (open) {
-        return !open;
-      });
-    }
-  }), /*#__PURE__*/React.createElement(Segment, {
-    isActive: isEmpty(appliedFilters),
-    label: defaultSegmentName,
-    onClick: clearAppliedFilters
-  }), segments.slice(0, showAll ? segments.length : ITEMS_MAX_COUNT).map(function (segment) {
-    return /*#__PURE__*/React.createElement(Segment, {
+    filters = _useSegments.filters,
+    appliedFilters = _useSegments.appliedFilters;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "neeto-filters-segments"
+  }, isIndependent ? /*#__PURE__*/React.createElement(MenuBlocks$1, {
+    appliedFilters: appliedFilters,
+    clearAppliedFilters: clearAppliedFilters,
+    defaultSegmentName: defaultSegmentName,
+    entity: entity,
+    handleSegmentsReorder: handleSegmentsReorder,
+    handleSelectSegment: handleSelectSegment,
+    isUpdating: isUpdating,
+    segmentId: segmentId,
+    segments: segments,
+    setConfirmAction: setConfirmAction
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, isNotEmpty(segments) && /*#__PURE__*/React.createElement(Typography, {
+    style: "body3",
+    weight: "semibold",
+    className: "neeto-molecules-sidebar-segments-header neeto-ui-text-transform-capitalize neeto-ui-text-gray-600 py-2 uppercase"
+  }, t("neetoFilters.segments.segment", PLURAL)), segments.map(function (segment) {
+    return /*#__PURE__*/React.createElement(SidebarBlock, {
       segments: segments,
       setConfirmAction: setConfirmAction,
-      shouldShowDropdown: true,
       id: segment.id,
       isActive: segment.id === segmentId,
       key: segment.id,
@@ -3168,7 +3513,7 @@ var MenuBlocks = function MenuBlocks(_ref) {
         return handleSelectSegment(segment);
       }
     });
-  }), /*#__PURE__*/React.createElement(SegmentForm, {
+  })), /*#__PURE__*/React.createElement(SegmentForm, {
     childrenKeys: childrenKeys,
     columns: columns,
     customFilters: customFilters,
@@ -3188,30 +3533,6 @@ var MenuBlocks = function MenuBlocks(_ref) {
     segment: selectedSegment
   }));
 };
-var MenuBlocks$1 = /*#__PURE__*/React.memo(MenuBlocks);
-
-var Segments = withT(function (_ref) {
-  var t = _ref.t,
-    entity = _ref.entity,
-    columns = _ref.columns,
-    _ref$defaultSegmentNa = _ref.defaultSegmentName,
-    defaultSegmentName = _ref$defaultSegmentNa === void 0 ? t("neetoFilters.common.allResults") : _ref$defaultSegmentNa,
-    customFilters = _ref.customFilters,
-    _ref$childrenKeys = _ref.childrenKeys,
-    childrenKeys = _ref$childrenKeys === void 0 ? [] : _ref$childrenKeys;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MenuBar.SubTitle, null, /*#__PURE__*/React.createElement(Typography, {
-    component: "h4",
-    style: "h5",
-    textTransform: "uppercase",
-    weight: "bold"
-  }, t("neetoFilters.common.segments"))), /*#__PURE__*/React.createElement(MenuBlocks$1, {
-    childrenKeys: childrenKeys,
-    columns: columns,
-    customFilters: customFilters,
-    defaultSegmentName: defaultSegmentName,
-    entity: entity
-  }));
-});
 var index = /*#__PURE__*/React.memo(Segments);
 
 export { Bar, Filters, index as Segments, buildFilterColumnsFromFields, buildFiltersFromURL, buildSelectorsFromURL, buildUrlFromFilters, buildUrlFromSegment, useDestroySegment, useFetchSegments, useUpdateSegment };