dinocollab-core 2.2.8 → 2.2.10

package/dist/src/data-surface/view-switch-transition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-switch-transition.js","sources":["../../../src/data-surface/view-switch-transition.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { useEffect, useMemo, useRef, useState } from 'react'\r\nimport { CombinedTransition, DEFAULT_ANIMATION, ViewDefault } from './view-switch-transition.units'\r\nimport { viewSwitchTransitionClasses, ViewSwitchTransitionStyled } from './view-switch-transition.units'\r\n// types\r\nimport type { FC, ReactNode, ComponentType } from 'react'\r\nimport { TAnimationConfig } from './view-switch-transition.units'\r\n\r\ntype TViewSwitchTransitionConfig<T extends string = string> = {\r\n  value: T\r\n  label?: string\r\n  Content: ComponentType<{ value: T }>\r\n  icon?: ReactNode\r\n}\r\n\r\ntype TViewSwitchTransitionParam<T extends string = string> = {\r\n  viewA?: TViewSwitchTransitionConfig<T>\r\n  viewB?: TViewSwitchTransitionConfig<T>\r\n  transitionConfig?: TAnimationConfig\r\n}\r\n\r\ninterface IViewSwitchTransitionProps<T extends string = string> {\r\n  value?: T\r\n  viewA?: TViewSwitchTransitionConfig<T>\r\n  viewB?: TViewSwitchTransitionConfig<T>\r\n  transitionConfig?: TAnimationConfig\r\n}\r\n\r\nexport function createViewSwitchTransition<T extends string = string>(config?: TViewSwitchTransitionParam<T>) {\r\n  const classes = viewSwitchTransitionClasses\r\n  const viewAClass = `${classes.view} ${classes.viewA}`\r\n  const viewBClass = `${classes.view} ${classes.viewB}`\r\n\r\n  const ViewSwitchTransition: FC<IViewSwitchTransitionProps<T>> = (props) => {\r\n    const wrapperRef = useRef<HTMLDivElement | null>(null)\r\n    const viewARef = useRef<HTMLDivElement | null>(null)\r\n    const viewBRef = useRef<HTMLDivElement | null>(null)\r\n\r\n    const [mountedMode, setMountedMode] = useState<T | undefined>(props.value ?? config?.viewA?.value)\r\n    const [mountedOpen, setMountedOpen] = useState<boolean>(true)\r\n\r\n    const pendingModeRef = useRef<T | null>(null)\r\n    const exitTimerRef = useRef<number | null>(null)\r\n\r\n    const finalConfig = useMemo(() => {\r\n      return {\r\n        viewA: props.viewA ?? config?.viewA,\r\n        viewB: props.viewB ?? config?.viewB\r\n      }\r\n    }, [props.viewA, props.viewB, config?.viewA, config?.viewB])\r\n\r\n    const animations = useMemo(() => {\r\n      return Object.assign({}, DEFAULT_ANIMATION, config?.transitionConfig, props.transitionConfig ?? {})\r\n    }, [config?.transitionConfig, props.transitionConfig])\r\n\r\n    useEffect(() => {\r\n      if (props.value === mountedMode) return\r\n\r\n      if (exitTimerRef.current) {\r\n        window.clearTimeout(exitTimerRef.current)\r\n        exitTimerRef.current = null\r\n      }\r\n\r\n      pendingModeRef.current = props.value ?? null\r\n\r\n      const currentHeight = wrapperRef.current?.offsetHeight\r\n      if (wrapperRef.current && typeof currentHeight === 'number') {\r\n        wrapperRef.current.style.height = `${currentHeight}px`\r\n        wrapperRef.current.style.transition = `height ${animations.enter}ms ${animations.ease}`\r\n      }\r\n\r\n      setMountedOpen(false)\r\n\r\n      exitTimerRef.current = window.setTimeout(() => {\r\n        const nextMode = pendingModeRef.current\r\n        pendingModeRef.current = null\r\n\r\n        if (nextMode) {\r\n          setMountedMode(nextMode)\r\n          requestAnimationFrame(() => {\r\n            const targetRef = nextMode === finalConfig.viewA?.value ? viewARef : viewBRef\r\n            const nextHeight = targetRef.current?.offsetHeight ?? wrapperRef.current?.offsetHeight ?? 0\r\n            setMountedOpen(true)\r\n\r\n            if (wrapperRef.current) {\r\n              wrapperRef.current.style.height = `${nextHeight}px`\r\n              window.setTimeout(() => {\r\n                if (wrapperRef.current) wrapperRef.current.style.height = ''\r\n              }, animations.enter)\r\n            }\r\n          })\r\n        }\r\n\r\n        exitTimerRef.current = null\r\n      }, animations.exit + animations.hold)\r\n\r\n      return () => {\r\n        if (exitTimerRef.current) {\r\n          window.clearTimeout(exitTimerRef.current)\r\n          exitTimerRef.current = null\r\n        }\r\n      }\r\n    }, [animations, props.value, mountedMode])\r\n\r\n    const ViewAContent = useMemo(() => {\r\n      return finalConfig.viewA?.Content ?? ViewDefault\r\n    }, [finalConfig.viewA?.Content])\r\n\r\n    const ViewBContent = useMemo(() => {\r\n      return finalConfig.viewB?.Content ?? ViewDefault\r\n    }, [finalConfig.viewB?.Content])\r\n\r\n    return (\r\n      <ViewSwitchTransitionStyled className={classes.root}>\r\n        <div ref={wrapperRef} className={classes.viewWrapper}>\r\n          {mountedMode === finalConfig.viewA?.value && (\r\n            <CombinedTransition\r\n              open={mountedOpen}\r\n              timeout={{ enter: animations.enter, exit: animations.exit }}\r\n              mountDelay={animations.mountDelay}\r\n              animationConfig={animations}\r\n              style={{ transformOrigin: animations.transformOriginGrid }}\r\n            >\r\n              <div ref={viewARef} className={viewAClass}>\r\n                <ViewAContent value={finalConfig.viewA?.value!} />\r\n              </div>\r\n            </CombinedTransition>\r\n          )}\r\n\r\n          {mountedMode === finalConfig.viewB?.value && (\r\n            <CombinedTransition\r\n              open={mountedOpen}\r\n              timeout={{ enter: animations.enter, exit: animations.exit }}\r\n              mountDelay={animations.mountDelay}\r\n              animationConfig={animations}\r\n              style={{ transformOrigin: animations.transformOriginTable }}\r\n            >\r\n              <div ref={viewBRef} className={viewBClass}>\r\n                <ViewBContent value={finalConfig.viewB?.value!} />\r\n              </div>\r\n            </CombinedTransition>\r\n          )}\r\n        </div>\r\n      </ViewSwitchTransitionStyled>\r\n    )\r\n  }\r\n\r\n  return ViewSwitchTransition\r\n}\r\n\r\nexport const ViewSwitchTransition = createViewSwitchTransition({})\r\n\r\nexport default ViewSwitchTransition\r\n"],"names":["createViewSwitchTransition","config","classes","viewSwitchTransitionClasses","viewAClass","concat","view","viewA","viewBClass","viewB","props","_props$value","_config$viewA","_finalConfig$viewA3","_finalConfig$viewB2","_finalConfig$viewA4","_finalConfig$viewA5","_finalConfig$viewB3","_finalConfig$viewB4","wrapperRef","useRef","viewARef","viewBRef","_useState","useState","value","_useState2","_slicedToArray","mountedMode","setMountedMode","_useState3","_useState4","mountedOpen","setMountedOpen","pendingModeRef","exitTimerRef","finalConfig","useMemo","_props$viewA","_props$viewB","animations","_props$transitionConf","Object","assign","DEFAULT_ANIMATION","transitionConfig","useEffect","_props$value2","_wrapperRef$current","current","window","clearTimeout","currentHeight","offsetHeight","style","height","transition","enter","ease","setTimeout","nextMode","requestAnimationFrame","_finalConfig$viewA","_ref","_targetRef$current$of","_targetRef$current","_wrapperRef$current2","nextHeight","exit","hold","ViewAContent","_finalConfig$viewA$Co","_finalConfig$viewA2","Content","ViewDefault","ViewBContent","_finalConfig$viewB$Co","_finalConfig$viewB","_jsx","ViewSwitchTransitionStyled","className","root","children","_jsxs","ref","viewWrapper","CombinedTransition","open","timeout","mountDelay","animationConfig","transformOrigin","transformOriginGrid","transformOriginTable"],"mappings":"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"}

package/dist/src/data-surface/view-switch-transition.units.js

@@ -0,0 +1,2 @@
+import{defineProperty as t,slicedToArray as r,objectSpread2 as i}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n}from"react/jsx-runtime";import{styled as e,Card as o}from"@mui/material";import{useState as a,useRef as c,useEffect as l,cloneElement as u}from"react";var w={root:"DinoViewSwitchTransition-root",viewWrapper:"DinoViewSwitchTransition-viewWrapper",view:"DinoViewSwitchTransition-view",viewA:"DinoViewSwitchTransition-viewA",viewB:"DinoViewSwitchTransition-viewB"},s=w,m=e("div")(function(r){return r.theme,t(t(t({},"&.".concat(s.root),{flex:1,width:"100%",height:"100%",overflow:"hidden"}),".".concat(s.viewWrapper),{minHeight:0,position:"relative",width:"100%",height:"100%",overflow:"hidden"}),".".concat(s.view),{width:"100%",height:"100%"})}),d=function(){return n(o,{variant:"outlined",sx:{p:2},children:"Default view content"})},f={enter:220,exit:140,ease:"cubic-bezier(0.22, 0.61, 0.36, 1)",delayEnter:12,delayExit:0,transformOriginGrid:"top center",transformOriginTable:"top center",translateY:6,horizontalScale:.992,mountDelay:12,hold:30},h=function(t){var n=t.open,e=t.timeout,o=t.mountDelay,w=t.animationConfig,s=t.style,m=t.children,d=a(n),f=r(d,2),h=f[0],p=f[1],v=a(n),y=r(v,2),T=y[0],g=y[1],x=c(null),D=c(null);if(l(function(){if(n)return D.current&&(window.clearTimeout(D.current),D.current=null),p(!0),void(o>0?(x.current&&window.clearTimeout(x.current),x.current=window.setTimeout(function(){g(!0),x.current=null},o)):g(!0));g(!1),x.current&&(window.clearTimeout(x.current),x.current=null),D.current&&window.clearTimeout(D.current),D.current=window.setTimeout(function(){p(!1),D.current=null},e.exit)},[o,n,e.exit]),l(function(){return function(){x.current&&window.clearTimeout(x.current),D.current&&window.clearTimeout(D.current)}},[]),!h)return null;var S=i({transitionProperty:"opacity, transform",transitionTimingFunction:w.ease,transitionDuration:"".concat(T?e.enter:e.exit,"ms"),transitionDelay:"".concat(T?w.delayEnter:w.delayExit,"ms"),transformOrigin:(null==s?void 0:s.transformOrigin)||w.transformOriginGrid,willChange:"opacity, transform",backfaceVisibility:"hidden",opacity:T?1:0,transform:T?"translate3d(0, 0, 0) scaleX(1)":"translate3d(0, ".concat(w.translateY,"px, 0) scaleX(").concat(w.horizontalScale,")")},s);return u(m,{style:S})};export{h as CombinedTransition,f as DEFAULT_ANIMATION,d as ViewDefault,m as ViewSwitchTransitionStyled,w as viewSwitchTransitionClasses};
+//# sourceMappingURL=view-switch-transition.units.js.map

package/dist/src/data-surface/view-switch-transition.units.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-switch-transition.units.js","sources":["../../../src/data-surface/view-switch-transition.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { Card, styled } from '@mui/material'\r\nimport { cloneElement, useEffect, useRef, useState } from 'react'\r\n// types\r\nimport type { CSSProperties, FC, ReactElement } from 'react'\r\n\r\nexport const viewSwitchTransitionClasses = {\r\n  root: 'DinoViewSwitchTransition-root',\r\n  viewWrapper: 'DinoViewSwitchTransition-viewWrapper',\r\n  view: 'DinoViewSwitchTransition-view',\r\n  viewA: 'DinoViewSwitchTransition-viewA',\r\n  viewB: 'DinoViewSwitchTransition-viewB'\r\n}\r\n\r\nconst classes = viewSwitchTransitionClasses\r\n\r\nexport const ViewSwitchTransitionStyled = styled('div')(({ theme }) => ({\r\n  [`&.${classes.root}`]: { flex: 1, width: '100%', height: '100%', overflow: 'hidden' },\r\n  // use minHeight: 0 so flex children can shrink and inner scroll areas work\r\n  [`.${classes.viewWrapper}`]: { minHeight: 0, position: 'relative', width: '100%', height: '100%', overflow: 'hidden' },\r\n  [`.${classes.view}`]: { width: '100%', height: '100%' }\r\n}))\r\n\r\nexport const ViewDefault: FC = () => (\r\n  <Card variant='outlined' sx={{ p: 2 }}>\r\n    Default view content\r\n  </Card>\r\n)\r\n\r\n/**\r\n * Fine-grained control over the animation that plays when switching between Grid and Table view.\r\n * All timing values are in milliseconds unless noted.\r\n */\r\nexport type TAnimationConfig = {\r\n  /** Duration of the enter (fade-in) animation. Defaults to `220`. */\r\n  enter?: number\r\n  /** Duration of the exit (fade-out) animation. Defaults to `140`. */\r\n  exit?: number\r\n  /** CSS easing function for both enter and exit. Defaults to `'cubic-bezier(0.22, 0.61, 0.36, 1)'`. */\r\n  ease?: string\r\n  /** Delay before the enter animation starts. Defaults to `12`. */\r\n  delayEnter?: number\r\n  /** Delay before the exit animation starts. Defaults to `0`. */\r\n  delayExit?: number\r\n  /** CSS `transform-origin` used during the Grid enter/exit. Defaults to `'top center'`. */\r\n  transformOriginGrid?: string\r\n  /** CSS `transform-origin` used during the Table enter/exit. Defaults to `'top center'`. */\r\n  transformOriginTable?: string\r\n  /** Vertical translation offset (px) applied at the start of the enter animation. Defaults to `6`. */\r\n  translateY?: number\r\n  /** Horizontal scale factor applied at the start of the enter animation. Defaults to `0.992`. */\r\n  horizontalScale?: number\r\n  /** Delay after the new pane mounts before its enter animation begins. Defaults to `12`. */\r\n  mountDelay?: number\r\n  /** Extra wait time (ms) after the exit animation completes before swapping the DOM. Defaults to `30`. */\r\n  hold?: number\r\n}\r\n\r\n/**\r\n * Default motion profile used when callers do not provide custom switch config.\r\n *\r\n * The values are tuned for a quick but readable transition between Grid and Table\r\n * while minimizing layout jump perception.\r\n */\r\nexport const DEFAULT_ANIMATION: Required<TAnimationConfig> = {\r\n  enter: 220,\r\n  exit: 140,\r\n  ease: 'cubic-bezier(0.22, 0.61, 0.36, 1)',\r\n  delayEnter: 12,\r\n  delayExit: 0,\r\n  transformOriginGrid: 'top center',\r\n  transformOriginTable: 'top center',\r\n  translateY: 6,\r\n  horizontalScale: 0.992,\r\n  mountDelay: 12,\r\n  hold: 30\r\n}\r\n\r\n/**\r\n * Props for `CombinedTransition`, the low-level transition wrapper.\r\n */\r\ninterface ICombinedTransitionProps {\r\n  /** Controls whether the child should be shown. */\r\n  open: boolean\r\n  /** Enter/exit durations in milliseconds. */\r\n  timeout: { enter: number; exit: number }\r\n  /** Delay before applying the enter animation after mount. */\r\n  mountDelay: number\r\n  /** Resolved animation config (fully required). */\r\n  animationConfig: Required<TAnimationConfig>\r\n  /** Optional style overrides (commonly transform origin). */\r\n  style?: CSSProperties\r\n  /** Single child element to receive animated inline style. */\r\n  children: ReactElement\r\n}\r\n\r\n/**\r\n * Reusable transition wrapper combining fade + transform with controlled\r\n * mount/unmount timing to avoid abrupt content flashing.\r\n */\r\nexport const CombinedTransition: FC<ICombinedTransitionProps> = (props) => {\r\n  const { open, timeout, mountDelay, animationConfig, style, children } = props\r\n  const [mounted, setMounted] = useState(open)\r\n  const [showing, setShowing] = useState(open)\r\n\r\n  const mountTimerRef = useRef<number | null>(null)\r\n  const unmountTimerRef = useRef<number | null>(null)\r\n\r\n  useEffect(() => {\r\n    if (open) {\r\n      if (unmountTimerRef.current) {\r\n        window.clearTimeout(unmountTimerRef.current)\r\n        unmountTimerRef.current = null\r\n      }\r\n      setMounted(true)\r\n      if (mountDelay > 0) {\r\n        if (mountTimerRef.current) window.clearTimeout(mountTimerRef.current)\r\n        mountTimerRef.current = window.setTimeout(() => {\r\n          setShowing(true)\r\n          mountTimerRef.current = null\r\n        }, mountDelay)\r\n      } else {\r\n        setShowing(true)\r\n      }\r\n      return\r\n    }\r\n\r\n    setShowing(false)\r\n    if (mountTimerRef.current) {\r\n      window.clearTimeout(mountTimerRef.current)\r\n      mountTimerRef.current = null\r\n    }\r\n\r\n    if (unmountTimerRef.current) {\r\n      window.clearTimeout(unmountTimerRef.current)\r\n    }\r\n    unmountTimerRef.current = window.setTimeout(() => {\r\n      setMounted(false)\r\n      unmountTimerRef.current = null\r\n    }, timeout.exit)\r\n  }, [mountDelay, open, timeout.exit])\r\n\r\n  useEffect(() => {\r\n    return () => {\r\n      if (mountTimerRef.current) {\r\n        window.clearTimeout(mountTimerRef.current)\r\n      }\r\n      if (unmountTimerRef.current) {\r\n        window.clearTimeout(unmountTimerRef.current)\r\n      }\r\n    }\r\n  }, [])\r\n\r\n  if (!mounted) return null\r\n\r\n  const transitionStyle: CSSProperties = {\r\n    transitionProperty: 'opacity, transform',\r\n    transitionTimingFunction: animationConfig.ease,\r\n    transitionDuration: `${showing ? timeout.enter : timeout.exit}ms`,\r\n    transitionDelay: `${showing ? animationConfig.delayEnter : animationConfig.delayExit}ms`,\r\n    transformOrigin: style?.transformOrigin || animationConfig.transformOriginGrid,\r\n    willChange: 'opacity, transform',\r\n    backfaceVisibility: 'hidden',\r\n    opacity: showing ? 1 : 0,\r\n    transform: showing\r\n      ? 'translate3d(0, 0, 0) scaleX(1)'\r\n      : `translate3d(0, ${animationConfig.translateY}px, 0) scaleX(${animationConfig.horizontalScale})`,\r\n    ...style\r\n  }\r\n\r\n  return cloneElement(children, { style: transitionStyle })\r\n}\r\n"],"names":["viewSwitchTransitionClasses","root","viewWrapper","view","viewA","viewB","classes","ViewSwitchTransitionStyled","styled","_ref","theme","_defineProperty","concat","flex","width","height","overflow","minHeight","position","ViewDefault","_jsx","Card","variant","sx","p","children","DEFAULT_ANIMATION","enter","exit","ease","delayEnter","delayExit","transformOriginGrid","transformOriginTable","translateY","horizontalScale","mountDelay","hold","CombinedTransition","props","open","timeout","animationConfig","style","_useState","useState","_useState2","_slicedToArray","mounted","setMounted","_useState3","_useState4","showing","setShowing","mountTimerRef","useRef","unmountTimerRef","useEffect","current","window","clearTimeout","setTimeout","transitionStyle","_objectSpread","transitionProperty","transitionTimingFunction","transitionDuration","transitionDelay","transformOrigin","willChange","backfaceVisibility","opacity","transform","cloneElement"],"mappings":"0RAQO,IAAMA,EAA8B,CACzCC,KAAM,gCACNC,YAAa,uCACbC,KAAM,gCACNC,MAAO,iCACPC,MAAO,kCAGHC,EAAUN,EAEHO,EAA6BC,EAAO,MAAPA,CAAc,SAAAC,GAAQ,OAAAA,EAALC,MAAKC,EAAAA,EAAAA,EAAAC,CAAAA,EAAAA,KAAAA,OACxDN,EAAQL,MAAS,CAAEY,KAAM,EAAGC,MAAO,OAAQC,OAAQ,OAAQC,SAAU,eAAUJ,OAEhFN,EAAQJ,aAAgB,CAAEe,UAAW,EAAGC,SAAU,WAAYJ,MAAO,OAAQC,OAAQ,OAAQC,SAAU,eAAUJ,OACjHN,EAAQH,MAAS,CAAEW,MAAO,OAAQC,OAAQ,QAAQ,GAG5CI,EAAkB,WAAP,OACtBC,EAACC,EAAK,CAAAC,QAAQ,WAAWC,GAAI,CAAEC,EAAG,GAE3BC,SAAA,wBAAA,EAsCIC,EAAgD,CAC3DC,MAAO,IACPC,KAAM,IACNC,KAAM,oCACNC,WAAY,GACZC,UAAW,EACXC,oBAAqB,aACrBC,qBAAsB,aACtBC,WAAY,EACZC,gBAAiB,KACjBC,WAAY,GACZC,KAAM,IAyBKC,EAAmD,SAACC,GAC/D,IAAQC,EAAgED,EAAhEC,KAAMC,EAA0DF,EAA1DE,QAASL,EAAiDG,EAAjDH,WAAYM,EAAqCH,EAArCG,gBAAiBC,EAAoBJ,EAApBI,MAAOlB,EAAac,EAAbd,SAC3DmB,EAA8BC,EAASL,GAAKM,EAAAC,EAAAH,EAAA,GAArCI,EAAOF,EAAA,GAAEG,EAAUH,EAAA,GAC1BI,EAA8BL,EAASL,GAAKW,EAAAJ,EAAAG,EAAA,GAArCE,EAAOD,EAAA,GAAEE,EAAUF,EAAA,GAEpBG,EAAgBC,EAAsB,MACtCC,EAAkBD,EAAsB,MA+C9C,GA7CAE,EAAU,WACR,GAAIjB,EAeF,OAdIgB,EAAgBE,UAClBC,OAAOC,aAAaJ,EAAgBE,SACpCF,EAAgBE,QAAU,MAE5BT,GAAW,QACPb,EAAa,GACXkB,EAAcI,SAASC,OAAOC,aAAaN,EAAcI,SAC7DJ,EAAcI,QAAUC,OAAOE,WAAW,WACxCR,GAAW,GACXC,EAAcI,QAAU,IACzB,EAAEtB,IAEHiB,GAAW,IAKfA,GAAW,GACPC,EAAcI,UAChBC,OAAOC,aAAaN,EAAcI,SAClCJ,EAAcI,QAAU,MAGtBF,EAAgBE,SAClBC,OAAOC,aAAaJ,EAAgBE,SAEtCF,EAAgBE,QAAUC,OAAOE,WAAW,WAC1CZ,GAAW,GACXO,EAAgBE,QAAU,IAC5B,EAAGjB,EAAQb,KACZ,EAAE,CAACQ,EAAYI,EAAMC,EAAQb,OAE9B6B,EAAU,WACR,OAAO,WACDH,EAAcI,SAChBC,OAAOC,aAAaN,EAAcI,SAEhCF,EAAgBE,SAClBC,OAAOC,aAAaJ,EAAgBE,QAEvC,CACF,EAAE,KAEEV,EAAS,OAAO,KAErB,IAAMc,EAAeC,EAAA,CACnBC,mBAAoB,qBACpBC,yBAA0BvB,EAAgBb,KAC1CqC,mBAAkBtD,GAAAA,OAAKwC,EAAUX,EAAQd,MAAQc,EAAQb,KAAQ,MACjEuC,gBAAevD,GAAAA,OAAKwC,EAAUV,EAAgBZ,WAAaY,EAAgBX,UAAa,MACxFqC,iBAAiBzB,aAAK,EAALA,EAAOyB,kBAAmB1B,EAAgBV,oBAC3DqC,WAAY,qBACZC,mBAAoB,SACpBC,QAASnB,EAAU,EAAI,EACvBoB,UAAWpB,EACP,mDAAgCxC,OACd8B,EAAgBR,WAAUtB,kBAAAA,OAAiB8B,EAAgBP,gBAAe,MAC7FQ,GAGL,OAAO8B,EAAahD,EAAU,CAAEkB,MAAOmB,GACzC"}

package/dist/src/filter-bar/components/filter-input.js

@@ -1,2 +1,2 @@
-import{defineProperty as o,objectSpread2 as e,slicedToArray as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useContext as i,useState as l,useMemo as a,createRef as u}from"react";import{styled as c,Box as s,alpha as p,InputBase as d,MenuList as f,MenuItem as m,Typography as v}from"@mui/material";import h from"@mui/material/ClickAwayListener";import{KeySpecial as b}from"../types.js";import{useFilterActions as g}from"./hooks.js";import{mapSpecialLabel as x}from"../helpers.js";import{FilterBarContext as I}from"../index.context.js";import{PopperCustom as S,PopperContent as y}from"./popper-custom.js";import{InputAdornmentRight as F,InputAdornmentLeft as j,getFieldsByMatches as k}from"./filter-input.units.js";import{MobileSearchButton as C}from"./filter-input.mobile.js";function D(o){var c=w,p=function(o){var r=o.fields,t=o.enableQuickSearch,n=void 0===t||t,i=b.quickSearch,l=e({},r);if(n){var a=l[i],u=null!=a&&a.label?a.label:x[i],c=Object.assign({},l[i],{field:i,label:u});l[i]=c}else delete l[i];return e(e({},o),{},{fields:l})}(o);return function(b){var x,D,w,B,N,q=u(),A=u(),O=i(I),R=g(O),W=R.addFilter,z=R.replaceFilter,K=l(null),T=r(K,2),_=T[0],E=T[1],G=Boolean(_),H=l(""),L=r(H,2),M=L[0],Q=L[1],V=l("normal"),J=r(V,2),U=J[0],X=J[1],Y=a(function(){var e,r=o.beforeInput,t=o.afterInput,n=Object.assign({},b.sx,null===(e=b.slots)||void 0===e||null===(e=e.rootProps)||void 0===e?void 0:e.sx);return{slots:Object.assign({},{beforeInput:r,afterInput:t},b.slots),rootSx:n}},[]),Z=o.minimalInput||(null===(x=b.slots)||void 0===x?void 0:x.minimalInput)||!1,$=function(o){E(null),X("normal"),o&&Q("")},oo=function(){var o;if(M){var e=null===(o=O.filterState.storeFilter)||void 0===o?void 0:o.quickSearch,r=(null==e?void 0:e.logic)||"or";z("quickSearch",{values:[M],logic:r}),$(!0)}};if(Z)return t(C,{placeholder:"Search...",onSearching:function(o){var e;if(o){var r=null===(e=O.filterState.storeFilter)||void 0===e?void 0:e.quickSearch,t=(null==r?void 0:r.logic)||"or";z("quickSearch",{values:[o],logic:t})}}});var eo,ro=[c.root];return("focus"===U||Boolean(M))&&ro.push(c.focus),t(h,{onClickAway:function(o){$()},children:n(P,e(e({className:ro.join(" ")},null===(D=b.slots)||void 0===D?void 0:D.rootProps),{},{sx:Y.rootSx,children:[n("div",{className:c.rootInner,children:[(null===(w=Y.slots)||void 0===w?void 0:w.beforeInput)||null,t(s,{className:c.beforeInput,ref:A}),t(d,{fullWidth:!0,className:c.input,autoComplete:"off",size:"small",inputRef:q,value:M,placeholder:"Search...",onKeyDown:function(o){var e=o.keyCode;if(13===e)o.stopPropagation(),o.preventDefault(),oo();else if(27===e){var r;o.stopPropagation(),o.preventDefault(),null==q||null===(r=q.current)||void 0===r||r.blur(),$(!0)}},onChange:function(o){var e=o.target.value||"";Q(e);var r=Boolean(null==A?void 0:A.current)&&Boolean(e);e!==M&&E(r&&(null==A?void 0:A.current)||null)},onFocus:function(o){X("focus"),Boolean(M)&&E((null==A?void 0:A.current)||o.currentTarget)},startAdornment:t(j,{onSearch:function(){var o;null===(o=q.current)||void 0===o||o.focus()}}),endAdornment:t(F,{hasKeyword:Boolean(M),onSubmit:oo,onClear:function(){return $(!0)}})}),(null===(B=Y.slots)||void 0===B?void 0:B.afterInput)||null]}),t(S,e(e({anchorEl:_,open:G,placement:"bottom",transition:!0,disablePortal:!0},null===(N=Y.slots)||void 0===N?void 0:N.popperProps),{},{children:(eo=k(p,M),t(y,{title:"Filter Options",disableGutter:!0,onClose:function(){return E(null)},children:t(f,{className:c.menu,children:eo.map(function(e,r){var t,i=e.field;if(!e)return null;var l=null!==(t=e.label)&&void 0!==t?t:i.toString(),a="".concat(l,': "').concat(M,'"');return n(m,{title:a,onClick:function(){return function(e){var r;if(M){var t=o.fields[e],n=null===(r=O.filterState.storeFilter)||void 0===r?void 0:r[e],i=(null==n?void 0:n.logic)||"or";null!=t&&t.singleValue?z(e,{values:[M],logic:i}):W(e,{values:[M],logic:i}),$(!0)}}(i)},className:c.menuItem,children:[n(v,{variant:"body2",sx:{fontWeight:500,flex:"0 0 auto"},children:[l,":"]}),n(v,{variant:"body2",color:"text.secondary",sx:{ml:1,flex:"1 1 auto"},noWrap:!0,children:['"',M,'"']})]},i.toString()+r)})})}))}))]}))})}}var w={root:"DinoFilterInput-root",rootInner:"DinoFilterInput-rootInner",button:"DinoFilterInput-button",input:"DinoFilterInput-input",focus:"DinoFilterInput-focus",beforeInput:"DinoFilterInput-beforeInput",menu:"DinoFilterInput-menu",menuItem:"DinoFilterInput-menuItem"},P=c(s)(function(e){var r=e.theme;return o(o(o(o(o(o(o(o({},"&.".concat(w.root),{height:"var(--dino-h-filter-input, 38px)",flex:1,border:"1px solid",borderColor:p(r.palette.divider,.12),borderRadius:r.shape.borderRadius,backgroundColor:r.palette.background.paper,transition:r.transitions.create(["border-color","box-shadow"])}),"&:hover",{borderColor:r.palette.text.primary}),"&.Mui-focused",{borderColor:r.palette.primary.main,boxShadow:"0 0 0 2px ".concat(r.palette.primary.main,"33")}),"&.".concat(w.focus),{borderColor:r.palette.primary.main,boxShadow:"0 0 0 2px ".concat(r.palette.primary.main,"33")}),".".concat(w.rootInner),{height:"100%",display:"flex",alignItems:"stretch"}),".".concat(w.beforeInput),{width:"1px",height:"100%",alignSelf:"stretch"}),".".concat(w.input),{padding:r.spacing(.5,1),input:{fontSize:"14px",padding:"4px 0 5px"}}),".".concat(w.button),{flex:"0 0 auto"})});export{D as createFilterInput,w as filterInputClasses};
+import{defineProperty as o,objectSpread2 as e,slicedToArray as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as t,jsxs as n}from"react/jsx-runtime";import{useContext as i,useState as l,useMemo as a,createRef as u}from"react";import{styled as c,Box as s,alpha as p,InputBase as d,MenuList as f,MenuItem as m,Typography as v}from"@mui/material";import h from"@mui/material/ClickAwayListener";import{KeySpecial as b}from"../types.js";import{useFilterActions as g}from"../hooks.js";import{mapSpecialLabel as x}from"../helpers.js";import{FilterBarContext as I}from"../index.context.js";import{PopperCustom as S,PopperContent as y}from"./popper-custom.js";import{InputAdornmentRight as F,InputAdornmentLeft as j,getFieldsByMatches as k}from"./filter-input.units.js";import{MobileSearchButton as C}from"./filter-input.mobile.js";function D(o){var c=w,p=function(o){var r=o.fields,t=o.enableQuickSearch,n=void 0===t||t,i=b.quickSearch,l=e({},r);if(n){var a=l[i],u=null!=a&&a.label?a.label:x[i],c=Object.assign({},l[i],{field:i,label:u});l[i]=c}else delete l[i];return e(e({},o),{},{fields:l})}(o);return function(b){var x,D,w,B,N,q=u(),A=u(),O=i(I),R=g(O),W=R.addFilter,z=R.replaceFilter,K=l(null),T=r(K,2),_=T[0],E=T[1],G=Boolean(_),H=l(""),L=r(H,2),M=L[0],Q=L[1],V=l("normal"),J=r(V,2),U=J[0],X=J[1],Y=a(function(){var e,r=o.beforeInput,t=o.afterInput,n=Object.assign({},b.sx,null===(e=b.slots)||void 0===e||null===(e=e.rootProps)||void 0===e?void 0:e.sx);return{slots:Object.assign({},{beforeInput:r,afterInput:t},b.slots),rootSx:n}},[]),Z=o.minimalInput||(null===(x=b.slots)||void 0===x?void 0:x.minimalInput)||!1,$=function(o){E(null),X("normal"),o&&Q("")},oo=function(){var o;if(M){var e=null===(o=O.filterState.storeFilter)||void 0===o?void 0:o.quickSearch,r=(null==e?void 0:e.logic)||"or";z("quickSearch",{values:[M],logic:r}),$(!0)}};if(Z)return t(C,{placeholder:"Search...",onSearching:function(o){var e;if(o){var r=null===(e=O.filterState.storeFilter)||void 0===e?void 0:e.quickSearch,t=(null==r?void 0:r.logic)||"or";z("quickSearch",{values:[o],logic:t})}}});var eo,ro=[c.root];return("focus"===U||Boolean(M))&&ro.push(c.focus),t(h,{onClickAway:function(o){$()},children:n(P,e(e({className:ro.join(" ")},null===(D=b.slots)||void 0===D?void 0:D.rootProps),{},{sx:Y.rootSx,children:[n("div",{className:c.rootInner,children:[(null===(w=Y.slots)||void 0===w?void 0:w.beforeInput)||null,t(s,{className:c.beforeInput,ref:A}),t(d,{fullWidth:!0,className:c.input,autoComplete:"off",size:"small",inputRef:q,value:M,placeholder:"Search...",onKeyDown:function(o){var e=o.keyCode;if(13===e)o.stopPropagation(),o.preventDefault(),oo();else if(27===e){var r;o.stopPropagation(),o.preventDefault(),null==q||null===(r=q.current)||void 0===r||r.blur(),$(!0)}},onChange:function(o){var e=o.target.value||"";Q(e);var r=Boolean(null==A?void 0:A.current)&&Boolean(e);e!==M&&E(r&&(null==A?void 0:A.current)||null)},onFocus:function(o){X("focus"),Boolean(M)&&E((null==A?void 0:A.current)||o.currentTarget)},startAdornment:t(j,{onSearch:function(){var o;null===(o=q.current)||void 0===o||o.focus()}}),endAdornment:t(F,{hasKeyword:Boolean(M),onSubmit:oo,onClear:function(){return $(!0)}})}),(null===(B=Y.slots)||void 0===B?void 0:B.afterInput)||null]}),t(S,e(e({anchorEl:_,open:G,placement:"bottom",transition:!0,disablePortal:!0},null===(N=Y.slots)||void 0===N?void 0:N.popperProps),{},{children:(eo=k(p,M),t(y,{title:"Filter Options",disableGutter:!0,onClose:function(){return E(null)},children:t(f,{className:c.menu,children:eo.map(function(e,r){var t,i=e.field;if(!e)return null;var l=null!==(t=e.label)&&void 0!==t?t:i.toString(),a="".concat(l,': "').concat(M,'"');return n(m,{title:a,onClick:function(){return function(e){var r;if(M){var t=o.fields[e],n=null===(r=O.filterState.storeFilter)||void 0===r?void 0:r[e],i=(null==n?void 0:n.logic)||"or";null!=t&&t.singleValue?z(e,{values:[M],logic:i}):W(e,{values:[M],logic:i}),$(!0)}}(i)},className:c.menuItem,children:[n(v,{variant:"body2",sx:{fontWeight:500,flex:"0 0 auto"},children:[l,":"]}),n(v,{variant:"body2",color:"text.secondary",sx:{ml:1,flex:"1 1 auto"},noWrap:!0,children:['"',M,'"']})]},i.toString()+r)})})}))}))]}))})}}var w={root:"DinoFilterInput-root",rootInner:"DinoFilterInput-rootInner",button:"DinoFilterInput-button",input:"DinoFilterInput-input",focus:"DinoFilterInput-focus",beforeInput:"DinoFilterInput-beforeInput",menu:"DinoFilterInput-menu",menuItem:"DinoFilterInput-menuItem"},P=c(s)(function(e){var r=e.theme;return o(o(o(o(o(o(o(o({},"&.".concat(w.root),{height:"var(--dino-h-filter-input, 38px)",flex:1,border:"1px solid",borderColor:p(r.palette.divider,.12),borderRadius:r.shape.borderRadius,backgroundColor:r.palette.background.paper,transition:r.transitions.create(["border-color","box-shadow"])}),"&:hover",{borderColor:r.palette.text.primary}),"&.Mui-focused",{borderColor:r.palette.primary.main,boxShadow:"0 0 0 2px ".concat(r.palette.primary.main,"33")}),"&.".concat(w.focus),{borderColor:r.palette.primary.main,boxShadow:"0 0 0 2px ".concat(r.palette.primary.main,"33")}),".".concat(w.rootInner),{height:"100%",display:"flex",alignItems:"stretch"}),".".concat(w.beforeInput),{width:"1px",height:"100%",alignSelf:"stretch"}),".".concat(w.input),{padding:r.spacing(.5,1),input:{fontSize:"14px",padding:"4px 0 5px"}}),".".concat(w.button),{flex:"0 0 auto"})});export{D as createFilterInput,w as filterInputClasses};
 //# sourceMappingURL=filter-input.js.map

package/dist/src/filter-bar/components/filter-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-input.js","sources":["../../../../src/filter-bar/components/filter-input.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { createRef, useContext, useMemo, useState } from 'react'\r\nimport { Box, InputBase, MenuItem, MenuList, styled, Typography, alpha } from '@mui/material'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport { KeySpecial } from '../types'\r\nimport { useFilterActions } from './hooks'\r\nimport { mapSpecialLabel } from '../helpers'\r\nimport { FilterBarContext } from '../index.context'\r\nimport { PopperContent, PopperCustom } from './popper-custom'\r\nimport { getFieldsByMatches, InputAdornmentLeft, InputAdornmentRight } from './filter-input.units'\r\nimport MobileSearchButton from './filter-input.mobile'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { InputBaseProps } from '@mui/material'\r\nimport type { TFieldType } from '../types'\r\nimport type { IFilterBarContext } from '../index.context'\r\nimport type { IFilterInputConfig, IFilterInputProps, IFilterInputSlots, TFieldInputConfigs } from './filter-input.types'\r\n\r\nconst initializeConfig = <T,>(config: IFilterInputConfig<T>): IFilterInputConfig<T> => {\r\n  const { fields, enableQuickSearch = true } = config\r\n  const qsKey = KeySpecial.quickSearch\r\n  const mergedFields: TFieldInputConfigs<T> = { ...fields }\r\n\r\n  if (enableQuickSearch) {\r\n    const item = mergedFields[qsKey]\r\n    const label = item?.label ? item.label : mapSpecialLabel[qsKey]\r\n    const temp = Object.assign({}, mergedFields[qsKey], { field: qsKey, label })\r\n    mergedFields[qsKey] = temp\r\n  } else {\r\n    delete mergedFields[qsKey]\r\n  }\r\n\r\n  return { ...config, fields: mergedFields }\r\n}\r\n\r\nexport function createFilterInput<T>(config: IFilterInputConfig<T>) {\r\n  const classes = filterInputClasses\r\n  const initialConfig = initializeConfig(config)\r\n\r\n  const FilterInput: FC<IFilterInputProps<T>> = (props) => {\r\n    const refInput = createRef<HTMLInputElement>()\r\n    const refBeforeInput = createRef<HTMLElement>()\r\n\r\n    const context = useContext(FilterBarContext) as IFilterBarContext<T>\r\n    const { addFilter, replaceFilter } = useFilterActions<T>(context)\r\n\r\n    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n    const isOpen = Boolean(anchorEl)\r\n\r\n    const [keywords, setKeywords] = useState<string>('')\r\n    const [status, setStatus] = useState<'focus' | 'normal'>('normal')\r\n\r\n    const mergedConfig = useMemo(() => {\r\n      const { beforeInput, afterInput } = config\r\n      const mergedRootSx = Object.assign({}, props.sx, props.slots?.rootProps?.sx)\r\n      const mergedSlots: IFilterInputSlots = Object.assign({}, { beforeInput, afterInput }, props.slots)\r\n      return { slots: mergedSlots, rootSx: mergedRootSx }\r\n    }, [])\r\n\r\n    const isMinimal = config.minimalInput || props.slots?.minimalInput || false\r\n\r\n    const handleClose = (isClear?: boolean) => {\r\n      setAnchorEl(null)\r\n      setStatus('normal')\r\n      if (isClear) setKeywords('')\r\n    }\r\n\r\n    const handleSubmitSearch = () => {\r\n      if (!keywords) return\r\n      const qsField = context.filterState.storeFilter?.quickSearch\r\n      const logic = qsField?.logic || 'or'\r\n      replaceFilter('quickSearch', { values: [keywords], logic })\r\n      handleClose(true)\r\n    }\r\n\r\n    const handleSubmitMobileSearch = (keyword: string) => {\r\n      if (!keyword) return\r\n      const qsField = context.filterState.storeFilter?.quickSearch\r\n      const logic = qsField?.logic || 'or'\r\n      replaceFilter('quickSearch', { values: [keyword], logic })\r\n    }\r\n\r\n    const handleKeyDown: InputBaseProps['onKeyDown'] = (event) => {\r\n      const keyCode: number = event.keyCode\r\n      if (keyCode === 13) {\r\n        event.stopPropagation()\r\n        event.preventDefault()\r\n        handleSubmitSearch()\r\n      } else if (keyCode === 27) {\r\n        event.stopPropagation()\r\n        event.preventDefault()\r\n        refInput?.current?.blur()\r\n        handleClose(true)\r\n      }\r\n    }\r\n\r\n    const handleKeywordChange: InputBaseProps['onChange'] = (event) => {\r\n      const finalValue = event.target.value || ''\r\n      setKeywords(finalValue)\r\n\r\n      const isOpenPopper = Boolean(refBeforeInput?.current) && Boolean(finalValue)\r\n      if (finalValue !== keywords) setAnchorEl(isOpenPopper ? refBeforeInput?.current || null : null)\r\n    }\r\n\r\n    const handleFocus = (event: React.FocusEvent<HTMLElement>) => {\r\n      setStatus('focus')\r\n      if (!Boolean(keywords)) return\r\n      setAnchorEl(refBeforeInput?.current || event.currentTarget)\r\n    }\r\n\r\n    const handleClickMenuItem = (field: TFieldType<T>) => {\r\n      if (!keywords) return\r\n      const fieldConfig = config.fields[field]\r\n      const fieldValue = context.filterState.storeFilter?.[field]\r\n      const logic = fieldValue?.logic || 'or'\r\n      if (fieldConfig?.singleValue) {\r\n        replaceFilter(field, { values: [keywords], logic })\r\n      } else {\r\n        addFilter(field, { values: [keywords], logic })\r\n      }\r\n      handleClose(true)\r\n    }\r\n\r\n    const handleClickSearch = () => {\r\n      refInput.current?.focus()\r\n    }\r\n\r\n    const handleClickAway = (event: MouseEvent | TouchEvent) => {\r\n      handleClose()\r\n    }\r\n\r\n    const renderContent = () => {\r\n      const fieldsList = getFieldsByMatches(initialConfig, keywords)\r\n      return (\r\n        <PopperContent title='Filter Options' disableGutter onClose={() => setAnchorEl(null)}>\r\n          <MenuList className={classes.menu}>\r\n            {fieldsList.map((x, i) => {\r\n              const field = x.field\r\n              if (!x) return null\r\n              const label = x.label ?? field.toString()\r\n              const title = `${label}: \"${keywords}\"`\r\n              return (\r\n                <MenuItem title={title} key={field.toString() + i} onClick={() => handleClickMenuItem(field)} className={classes.menuItem}>\r\n                  <Typography variant='body2' sx={{ fontWeight: 500, flex: '0 0 auto' }}>\r\n                    {label}:\r\n                  </Typography>\r\n                  <Typography variant='body2' color='text.secondary' sx={{ ml: 1, flex: '1 1 auto' }} noWrap>\r\n                    \"{keywords}\"\r\n                  </Typography>\r\n                </MenuItem>\r\n              )\r\n            })}\r\n          </MenuList>\r\n        </PopperContent>\r\n      )\r\n    }\r\n\r\n    if (isMinimal) return <MobileSearchButton placeholder='Search...' onSearching={handleSubmitMobileSearch} />\r\n\r\n    const rootClass = [classes.root]\r\n    if (status === 'focus' || Boolean(keywords)) rootClass.push(classes.focus)\r\n\r\n    return (\r\n      <ClickAwayListener onClickAway={handleClickAway}>\r\n        <FilterInputStyled className={rootClass.join(' ')} {...props.slots?.rootProps} sx={mergedConfig.rootSx}>\r\n          <div className={classes.rootInner}>\r\n            {mergedConfig.slots?.beforeInput || null}\r\n            <Box className={classes.beforeInput} ref={refBeforeInput} />\r\n            <InputBase\r\n              fullWidth\r\n              className={classes.input}\r\n              autoComplete='off'\r\n              size='small'\r\n              inputRef={refInput}\r\n              value={keywords}\r\n              placeholder='Search...'\r\n              onKeyDown={handleKeyDown}\r\n              onChange={handleKeywordChange}\r\n              onFocus={handleFocus}\r\n              startAdornment={<InputAdornmentLeft onSearch={handleClickSearch} />}\r\n              endAdornment={<InputAdornmentRight hasKeyword={Boolean(keywords)} onSubmit={handleSubmitSearch} onClear={() => handleClose(true)} />}\r\n            />\r\n            {mergedConfig.slots?.afterInput || null}\r\n          </div>\r\n          <PopperCustom anchorEl={anchorEl} open={isOpen} placement='bottom' transition disablePortal {...mergedConfig.slots?.popperProps}>\r\n            {renderContent()}\r\n          </PopperCustom>\r\n        </FilterInputStyled>\r\n      </ClickAwayListener>\r\n    )\r\n  }\r\n  return FilterInput\r\n}\r\n\r\nexport const filterInputClasses = {\r\n  root: 'DinoFilterInput-root',\r\n  rootInner: 'DinoFilterInput-rootInner',\r\n  button: 'DinoFilterInput-button',\r\n  input: 'DinoFilterInput-input',\r\n  focus: 'DinoFilterInput-focus',\r\n  beforeInput: 'DinoFilterInput-beforeInput',\r\n  menu: 'DinoFilterInput-menu',\r\n  menuItem: 'DinoFilterInput-menuItem',\r\n  menuItemKey: 'DinoFilterInput-menuItemKey'\r\n}\r\n\r\nconst FilterInputStyled = styled(Box)(({ theme }) => ({\r\n  // Note: we use CSS variable\r\n  // '--dino-h-filter-input': '38px',\r\n  [`&.${filterInputClasses.root}`]: {\r\n    height: 'var(--dino-h-filter-input, 38px)',\r\n    flex: 1,\r\n    border: '1px solid',\r\n    borderColor: alpha(theme.palette.divider, 0.12),\r\n    borderRadius: theme.shape.borderRadius,\r\n    backgroundColor: theme.palette.background.paper,\r\n    transition: theme.transitions.create(['border-color', 'box-shadow'])\r\n  },\r\n  '&:hover': { borderColor: theme.palette.text.primary },\r\n  '&.Mui-focused': {\r\n    borderColor: theme.palette.primary.main,\r\n    boxShadow: `0 0 0 2px ${theme.palette.primary.main}33`\r\n  },\r\n  [`&.${filterInputClasses.focus}`]: {\r\n    borderColor: theme.palette.primary.main,\r\n    boxShadow: `0 0 0 2px ${theme.palette.primary.main}33`\r\n  },\r\n  [`.${filterInputClasses.rootInner}`]: { height: '100%', display: 'flex', alignItems: 'stretch' },\r\n  [`.${filterInputClasses.beforeInput}`]: { width: '1px', height: '100%', alignSelf: 'stretch' },\r\n  [`.${filterInputClasses.input}`]: {\r\n    padding: theme.spacing(0.5, 1),\r\n    input: { fontSize: '14px', padding: '4px 0 5px' }\r\n  },\r\n  [`.${filterInputClasses.button}`]: { flex: '0 0 auto' }\r\n}))\r\n"],"names":["createFilterInput","config","classes","filterInputClasses","initialConfig","fields","_config$enableQuickSe","enableQuickSearch","qsKey","KeySpecial","quickSearch","mergedFields","_objectSpread","item","label","mapSpecialLabel","temp","Object","assign","field","initializeConfig","props","_props$slots2","_props$slots3","_mergedConfig$slots","_mergedConfig$slots2","_mergedConfig$slots3","refInput","createRef","refBeforeInput","context","useContext","FilterBarContext","_useFilterActions","useFilterActions","addFilter","replaceFilter","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","isOpen","Boolean","_useState3","_useState4","keywords","setKeywords","_useState5","_useState6","status","setStatus","mergedConfig","useMemo","_props$slots","beforeInput","afterInput","mergedRootSx","sx","slots","rootProps","rootSx","isMinimal","minimalInput","handleClose","isClear","handleSubmitSearch","_context$filterState$","qsField","filterState","storeFilter","logic","values","_jsx","MobileSearchButton","placeholder","onSearching","keyword","_context$filterState$2","fieldsList","rootClass","root","push","focus","ClickAwayListener","onClickAway","event","children","_jsxs","FilterInputStyled","className","join","rootInner","Box","ref","InputBase","fullWidth","input","autoComplete","size","inputRef","value","onKeyDown","keyCode","stopPropagation","preventDefault","_refInput$current","current","blur","onChange","finalValue","target","isOpenPopper","onFocus","currentTarget","startAdornment","InputAdornmentLeft","onSearch","_refInput$current2","endAdornment","InputAdornmentRight","hasKeyword","onSubmit","onClear","PopperCustom","open","placement","transition","disablePortal","popperProps","getFieldsByMatches","PopperContent","title","disableGutter","onClose","MenuList","menu","map","x","i","_x$label","toString","concat","MenuItem","onClick","_context$filterState$3","fieldConfig","fieldValue","singleValue","handleClickMenuItem","menuItem","Typography","variant","fontWeight","flex","color","ml","noWrap","button","styled","_ref","theme","_defineProperty","height","border","borderColor","alpha","palette","divider","borderRadius","shape","backgroundColor","background","paper","transitions","create","text","primary","main","boxShadow","display","alignItems","width","alignSelf","padding","spacing","fontSize"],"mappings":"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"}
+{"version":3,"file":"filter-input.js","sources":["../../../../src/filter-bar/components/filter-input.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { createRef, useContext, useMemo, useState } from 'react'\r\nimport { Box, InputBase, MenuItem, MenuList, styled, Typography, alpha } from '@mui/material'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport { KeySpecial } from '../types'\r\nimport { useFilterActions } from '../hooks'\r\nimport { mapSpecialLabel } from '../helpers'\r\nimport { FilterBarContext } from '../index.context'\r\nimport { PopperContent, PopperCustom } from './popper-custom'\r\nimport { getFieldsByMatches, InputAdornmentLeft, InputAdornmentRight } from './filter-input.units'\r\nimport MobileSearchButton from './filter-input.mobile'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { InputBaseProps } from '@mui/material'\r\nimport type { TFieldType } from '../types'\r\nimport type { IFilterBarContext } from '../index.context'\r\nimport type { IFilterInputConfig, IFilterInputProps, IFilterInputSlots, TFieldInputConfigs } from './filter-input.types'\r\n\r\nconst initializeConfig = <T,>(config: IFilterInputConfig<T>): IFilterInputConfig<T> => {\r\n  const { fields, enableQuickSearch = true } = config\r\n  const qsKey = KeySpecial.quickSearch\r\n  const mergedFields: TFieldInputConfigs<T> = { ...fields }\r\n\r\n  if (enableQuickSearch) {\r\n    const item = mergedFields[qsKey]\r\n    const label = item?.label ? item.label : mapSpecialLabel[qsKey]\r\n    const temp = Object.assign({}, mergedFields[qsKey], { field: qsKey, label })\r\n    mergedFields[qsKey] = temp\r\n  } else {\r\n    delete mergedFields[qsKey]\r\n  }\r\n\r\n  return { ...config, fields: mergedFields }\r\n}\r\n\r\nexport function createFilterInput<T>(config: IFilterInputConfig<T>) {\r\n  const classes = filterInputClasses\r\n  const initialConfig = initializeConfig(config)\r\n\r\n  const FilterInput: FC<IFilterInputProps<T>> = (props) => {\r\n    const refInput = createRef<HTMLInputElement>()\r\n    const refBeforeInput = createRef<HTMLElement>()\r\n\r\n    const context = useContext(FilterBarContext) as IFilterBarContext<T>\r\n    const { addFilter, replaceFilter } = useFilterActions<T>(context)\r\n\r\n    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n    const isOpen = Boolean(anchorEl)\r\n\r\n    const [keywords, setKeywords] = useState<string>('')\r\n    const [status, setStatus] = useState<'focus' | 'normal'>('normal')\r\n\r\n    const mergedConfig = useMemo(() => {\r\n      const { beforeInput, afterInput } = config\r\n      const mergedRootSx = Object.assign({}, props.sx, props.slots?.rootProps?.sx)\r\n      const mergedSlots: IFilterInputSlots = Object.assign({}, { beforeInput, afterInput }, props.slots)\r\n      return { slots: mergedSlots, rootSx: mergedRootSx }\r\n    }, [])\r\n\r\n    const isMinimal = config.minimalInput || props.slots?.minimalInput || false\r\n\r\n    const handleClose = (isClear?: boolean) => {\r\n      setAnchorEl(null)\r\n      setStatus('normal')\r\n      if (isClear) setKeywords('')\r\n    }\r\n\r\n    const handleSubmitSearch = () => {\r\n      if (!keywords) return\r\n      const qsField = context.filterState.storeFilter?.quickSearch\r\n      const logic = qsField?.logic || 'or'\r\n      replaceFilter('quickSearch', { values: [keywords], logic })\r\n      handleClose(true)\r\n    }\r\n\r\n    const handleSubmitMobileSearch = (keyword: string) => {\r\n      if (!keyword) return\r\n      const qsField = context.filterState.storeFilter?.quickSearch\r\n      const logic = qsField?.logic || 'or'\r\n      replaceFilter('quickSearch', { values: [keyword], logic })\r\n    }\r\n\r\n    const handleKeyDown: InputBaseProps['onKeyDown'] = (event) => {\r\n      const keyCode: number = event.keyCode\r\n      if (keyCode === 13) {\r\n        event.stopPropagation()\r\n        event.preventDefault()\r\n        handleSubmitSearch()\r\n      } else if (keyCode === 27) {\r\n        event.stopPropagation()\r\n        event.preventDefault()\r\n        refInput?.current?.blur()\r\n        handleClose(true)\r\n      }\r\n    }\r\n\r\n    const handleKeywordChange: InputBaseProps['onChange'] = (event) => {\r\n      const finalValue = event.target.value || ''\r\n      setKeywords(finalValue)\r\n\r\n      const isOpenPopper = Boolean(refBeforeInput?.current) && Boolean(finalValue)\r\n      if (finalValue !== keywords) setAnchorEl(isOpenPopper ? refBeforeInput?.current || null : null)\r\n    }\r\n\r\n    const handleFocus = (event: React.FocusEvent<HTMLElement>) => {\r\n      setStatus('focus')\r\n      if (!Boolean(keywords)) return\r\n      setAnchorEl(refBeforeInput?.current || event.currentTarget)\r\n    }\r\n\r\n    const handleClickMenuItem = (field: TFieldType<T>) => {\r\n      if (!keywords) return\r\n      const fieldConfig = config.fields[field]\r\n      const fieldValue = context.filterState.storeFilter?.[field]\r\n      const logic = fieldValue?.logic || 'or'\r\n      if (fieldConfig?.singleValue) {\r\n        replaceFilter(field, { values: [keywords], logic })\r\n      } else {\r\n        addFilter(field, { values: [keywords], logic })\r\n      }\r\n      handleClose(true)\r\n    }\r\n\r\n    const handleClickSearch = () => {\r\n      refInput.current?.focus()\r\n    }\r\n\r\n    const handleClickAway = (event: MouseEvent | TouchEvent) => {\r\n      handleClose()\r\n    }\r\n\r\n    const renderContent = () => {\r\n      const fieldsList = getFieldsByMatches(initialConfig, keywords)\r\n      return (\r\n        <PopperContent title='Filter Options' disableGutter onClose={() => setAnchorEl(null)}>\r\n          <MenuList className={classes.menu}>\r\n            {fieldsList.map((x, i) => {\r\n              const field = x.field\r\n              if (!x) return null\r\n              const label = x.label ?? field.toString()\r\n              const title = `${label}: \"${keywords}\"`\r\n              return (\r\n                <MenuItem title={title} key={field.toString() + i} onClick={() => handleClickMenuItem(field)} className={classes.menuItem}>\r\n                  <Typography variant='body2' sx={{ fontWeight: 500, flex: '0 0 auto' }}>\r\n                    {label}:\r\n                  </Typography>\r\n                  <Typography variant='body2' color='text.secondary' sx={{ ml: 1, flex: '1 1 auto' }} noWrap>\r\n                    \"{keywords}\"\r\n                  </Typography>\r\n                </MenuItem>\r\n              )\r\n            })}\r\n          </MenuList>\r\n        </PopperContent>\r\n      )\r\n    }\r\n\r\n    if (isMinimal) return <MobileSearchButton placeholder='Search...' onSearching={handleSubmitMobileSearch} />\r\n\r\n    const rootClass = [classes.root]\r\n    if (status === 'focus' || Boolean(keywords)) rootClass.push(classes.focus)\r\n\r\n    return (\r\n      <ClickAwayListener onClickAway={handleClickAway}>\r\n        <FilterInputStyled className={rootClass.join(' ')} {...props.slots?.rootProps} sx={mergedConfig.rootSx}>\r\n          <div className={classes.rootInner}>\r\n            {mergedConfig.slots?.beforeInput || null}\r\n            <Box className={classes.beforeInput} ref={refBeforeInput} />\r\n            <InputBase\r\n              fullWidth\r\n              className={classes.input}\r\n              autoComplete='off'\r\n              size='small'\r\n              inputRef={refInput}\r\n              value={keywords}\r\n              placeholder='Search...'\r\n              onKeyDown={handleKeyDown}\r\n              onChange={handleKeywordChange}\r\n              onFocus={handleFocus}\r\n              startAdornment={<InputAdornmentLeft onSearch={handleClickSearch} />}\r\n              endAdornment={<InputAdornmentRight hasKeyword={Boolean(keywords)} onSubmit={handleSubmitSearch} onClear={() => handleClose(true)} />}\r\n            />\r\n            {mergedConfig.slots?.afterInput || null}\r\n          </div>\r\n          <PopperCustom anchorEl={anchorEl} open={isOpen} placement='bottom' transition disablePortal {...mergedConfig.slots?.popperProps}>\r\n            {renderContent()}\r\n          </PopperCustom>\r\n        </FilterInputStyled>\r\n      </ClickAwayListener>\r\n    )\r\n  }\r\n  return FilterInput\r\n}\r\n\r\nexport const filterInputClasses = {\r\n  root: 'DinoFilterInput-root',\r\n  rootInner: 'DinoFilterInput-rootInner',\r\n  button: 'DinoFilterInput-button',\r\n  input: 'DinoFilterInput-input',\r\n  focus: 'DinoFilterInput-focus',\r\n  beforeInput: 'DinoFilterInput-beforeInput',\r\n  menu: 'DinoFilterInput-menu',\r\n  menuItem: 'DinoFilterInput-menuItem',\r\n  menuItemKey: 'DinoFilterInput-menuItemKey'\r\n}\r\n\r\nconst FilterInputStyled = styled(Box)(({ theme }) => ({\r\n  // Note: we use CSS variable\r\n  // '--dino-h-filter-input': '38px',\r\n  [`&.${filterInputClasses.root}`]: {\r\n    height: 'var(--dino-h-filter-input, 38px)',\r\n    flex: 1,\r\n    border: '1px solid',\r\n    borderColor: alpha(theme.palette.divider, 0.12),\r\n    borderRadius: theme.shape.borderRadius,\r\n    backgroundColor: theme.palette.background.paper,\r\n    transition: theme.transitions.create(['border-color', 'box-shadow'])\r\n  },\r\n  '&:hover': { borderColor: theme.palette.text.primary },\r\n  '&.Mui-focused': {\r\n    borderColor: theme.palette.primary.main,\r\n    boxShadow: `0 0 0 2px ${theme.palette.primary.main}33`\r\n  },\r\n  [`&.${filterInputClasses.focus}`]: {\r\n    borderColor: theme.palette.primary.main,\r\n    boxShadow: `0 0 0 2px ${theme.palette.primary.main}33`\r\n  },\r\n  [`.${filterInputClasses.rootInner}`]: { height: '100%', display: 'flex', alignItems: 'stretch' },\r\n  [`.${filterInputClasses.beforeInput}`]: { width: '1px', height: '100%', alignSelf: 'stretch' },\r\n  [`.${filterInputClasses.input}`]: {\r\n    padding: theme.spacing(0.5, 1),\r\n    input: { fontSize: '14px', padding: '4px 0 5px' }\r\n  },\r\n  [`.${filterInputClasses.button}`]: { flex: '0 0 auto' }\r\n}))\r\n"],"names":["createFilterInput","config","classes","filterInputClasses","initialConfig","fields","_config$enableQuickSe","enableQuickSearch","qsKey","KeySpecial","quickSearch","mergedFields","_objectSpread","item","label","mapSpecialLabel","temp","Object","assign","field","initializeConfig","props","_props$slots2","_props$slots3","_mergedConfig$slots","_mergedConfig$slots2","_mergedConfig$slots3","refInput","createRef","refBeforeInput","context","useContext","FilterBarContext","_useFilterActions","useFilterActions","addFilter","replaceFilter","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","isOpen","Boolean","_useState3","_useState4","keywords","setKeywords","_useState5","_useState6","status","setStatus","mergedConfig","useMemo","_props$slots","beforeInput","afterInput","mergedRootSx","sx","slots","rootProps","rootSx","isMinimal","minimalInput","handleClose","isClear","handleSubmitSearch","_context$filterState$","qsField","filterState","storeFilter","logic","values","_jsx","MobileSearchButton","placeholder","onSearching","keyword","_context$filterState$2","fieldsList","rootClass","root","push","focus","ClickAwayListener","onClickAway","event","children","_jsxs","FilterInputStyled","className","join","rootInner","Box","ref","InputBase","fullWidth","input","autoComplete","size","inputRef","value","onKeyDown","keyCode","stopPropagation","preventDefault","_refInput$current","current","blur","onChange","finalValue","target","isOpenPopper","onFocus","currentTarget","startAdornment","InputAdornmentLeft","onSearch","_refInput$current2","endAdornment","InputAdornmentRight","hasKeyword","onSubmit","onClear","PopperCustom","open","placement","transition","disablePortal","popperProps","getFieldsByMatches","PopperContent","title","disableGutter","onClose","MenuList","menu","map","x","i","_x$label","toString","concat","MenuItem","onClick","_context$filterState$3","fieldConfig","fieldValue","singleValue","handleClickMenuItem","menuItem","Typography","variant","fontWeight","flex","color","ml","noWrap","button","styled","_ref","theme","_defineProperty","height","border","borderColor","alpha","palette","divider","borderRadius","shape","backgroundColor","background","paper","transitions","create","text","primary","main","boxShadow","display","alignItems","width","alignSelf","padding","spacing","fontSize"],"mappings":"00BAqCM,SAAUA,EAAqBC,GACnC,IAAMC,EAAUC,EACVC,EAnBiB,SAAKH,GAC5B,IAAQI,EAAqCJ,EAArCI,OAAMC,EAA+BL,EAA7BM,kBAAAA,OAAoB,IAAHD,GAAOA,EAClCE,EAAQC,EAAWC,YACnBC,EAAYC,EAAA,CAAA,EAA+BP,GAEjD,GAAIE,EAAmB,CACrB,IAAMM,EAAOF,EAAaH,GACpBM,EAAQD,SAAAA,EAAMC,MAAQD,EAAKC,MAAQC,EAAgBP,GACnDQ,EAAOC,OAAOC,OAAO,CAAA,EAAIP,EAAaH,GAAQ,CAAEW,MAAOX,EAAOM,MAAAA,IACpEH,EAAaH,GAASQ,CACvB,aACQL,EAAaH,GAGtB,OAAAI,EAAAA,EAAA,CAAA,EAAYX,GAAM,CAAA,EAAA,CAAEI,OAAQM,GAC9B,CAIwBS,CAAiBnB,GA0JvC,OAxJ8C,SAACoB,GAAS,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAChDC,EAAWC,IACXC,EAAiBD,IAEjBE,EAAUC,EAAWC,GAC3BC,EAAqCC,EAAoBJ,GAAjDK,EAASF,EAATE,UAAWC,EAAaH,EAAbG,cAEnBC,EAAgCC,EAA6B,MAAKC,EAAAC,EAAAH,EAAA,GAA3DI,EAAQF,EAAA,GAAEG,EAAWH,EAAA,GACtBI,EAASC,QAAQH,GAEvBI,EAAgCP,EAAiB,IAAGQ,EAAAN,EAAAK,EAAA,GAA7CE,EAAQD,EAAA,GAAEE,EAAWF,EAAA,GAC5BG,EAA4BX,EAA6B,UAASY,EAAAV,EAAAS,EAAA,GAA3DE,EAAMD,EAAA,GAAEE,EAASF,EAAA,GAElBG,EAAeC,EAAQ,WAAK,IAAAC,EACxBC,EAA4BvD,EAA5BuD,YAAaC,EAAexD,EAAfwD,WACfC,EAAezC,OAAOC,OAAO,GAAIG,EAAMsC,GAAeJ,QAAbA,EAAElC,EAAMuC,aAAKL,IAAAA,GAAW,QAAXA,EAAXA,EAAaM,iBAAS,IAAAN,OAAA,EAAtBA,EAAwBI,IAEzE,MAAO,CAAEC,MAD8B3C,OAAOC,OAAO,GAAI,CAAEsC,YAAAA,EAAaC,WAAAA,GAAcpC,EAAMuC,OAC/DE,OAAQJ,EACtC,EAAE,IAEGK,EAAY9D,EAAO+D,uBAAY1C,EAAID,EAAMuC,aAAK,IAAAtC,OAAA,EAAXA,EAAa0C,gBAAgB,EAEhEC,EAAc,SAACC,GACnBxB,EAAY,MACZU,EAAU,UACNc,GAASlB,EAAY,GAC1B,EAEKmB,GAAqB,WAAK,IAAAC,EAC9B,GAAKrB,EAAL,CACA,IAAMsB,EAAyCD,QAAlCA,EAAGtC,EAAQwC,YAAYC,mBAApBH,IAA+BA,OAA/BA,EAAAA,EAAiC1D,YAC3C8D,GAAQH,aAAO,EAAPA,EAASG,QAAS,KAChCpC,EAAc,cAAe,CAAEqC,OAAQ,CAAC1B,GAAWyB,MAAAA,IACnDP,GAAY,EAJG,CAKhB,EAoFD,GAAIF,EAAW,OAAOW,EAACC,EAAkB,CAACC,YAAY,YAAYC,YAlFjC,SAACC,GAAmB,IAAAC,EACnD,GAAKD,EAAL,CACA,IAAMT,EAAyCU,QAAlCA,EAAGjD,EAAQwC,YAAYC,mBAApBQ,IAA+BA,OAA/BA,EAAAA,EAAiCrE,YAC3C8D,GAAQH,aAAO,EAAPA,EAASG,QAAS,KAChCpC,EAAc,cAAe,CAAEqC,OAAQ,CAACK,GAAUN,MAAAA,GAHpC,CAIf,IA+ED,IA3BQQ,GA2BFC,GAAY,CAAC/E,EAAQgF,MAG3B,OAFe,UAAX/B,GAAsBP,QAAQG,KAAWkC,GAAUE,KAAKjF,EAAQkF,OAGlEV,EAACW,GAAkBC,YApCG,SAACC,GACvBtB,GACD,EAmCGuB,SAAAC,EAACC,EAAiB9E,EAAAA,EAAA,CAAC+E,UAAWV,GAAUW,KAAK,cAAIrE,EAAMF,EAAMuC,aAAK,IAAArC,OAAA,EAAXA,EAAasC,WAAS,CAAA,EAAA,CAAEF,GAAIN,EAAaS,OAAM0B,SAAA,CACpGC,SAAKE,UAAWzF,EAAQ2F,qBACHrE,QAAlBA,EAAA6B,EAAaO,iBAAKpC,SAAlBA,EAAoBgC,cAAe,KACpCkB,EAACoB,GAAIH,UAAWzF,EAAQsD,YAAauC,IAAKlE,IAC1C6C,EAACsB,EAAS,CACRC,WACA,EAAAN,UAAWzF,EAAQgG,MACnBC,aAAa,MACbC,KAAK,QACLC,SAAU1E,EACV2E,MAAOvD,EACP6B,YAAY,YACZ2B,UA9FyC,SAAChB,GAClD,IAAMiB,EAAkBjB,EAAMiB,QAC9B,GAAgB,KAAZA,EACFjB,EAAMkB,kBACNlB,EAAMmB,iBACNvC,UACK,GAAgB,KAAZqC,EAAgB,CAAA,IAAAG,EACzBpB,EAAMkB,kBACNlB,EAAMmB,iBACN/E,SAAiB,QAATgF,EAARhF,EAAUiF,eAAVD,IAAiBA,GAAjBA,EAAmBE,OACnB5C,GAAY,EACb,CACF,EAmFS6C,SAjF8C,SAACvB,GACvD,IAAMwB,EAAaxB,EAAMyB,OAAOV,OAAS,GACzCtD,EAAY+D,GAEZ,IAAME,EAAerE,QAAQf,aAAc,EAAdA,EAAgB+E,UAAYhE,QAAQmE,GAC7DA,IAAehE,GAAUL,EAAYuE,IAAepF,aAAc,EAAdA,EAAgB+E,UAAkB,KAC3F,EA4ESM,QA1EU,SAAC3B,GACnBnC,EAAU,SACLR,QAAQG,IACbL,GAAYb,aAAc,EAAdA,EAAgB+E,UAAWrB,EAAM4B,cAC9C,EAuESC,eAAgB1C,EAAC2C,GAAmBC,SAxDpB,WAAK,IAAAC,EACb,QAAhBA,EAAA5F,EAASiF,eAAO,IAAAW,GAAhBA,EAAkBnC,OACnB,IAuDSoC,aAAc9C,EAAC+C,EAAmB,CAACC,WAAY9E,QAAQG,GAAW4E,SAAUxD,GAAoByD,QAAS,WAAF,OAAQ3D,GAAY,EAAK,OAE/G,QAAlBxC,EAAA4B,EAAaO,aAAbnC,IAAkBA,OAAlBA,EAAAA,EAAoBgC,aAAc,QAErCiB,EAACmD,EAAYjH,EAAAA,EAAA,CAAC6B,SAAUA,EAAUqF,KAAMnF,EAAQoF,UAAU,SAASC,YAAW,EAAAC,4BAAkB5E,EAAaO,aAAK,IAAAlC,OAAA,EAAlBA,EAAoBwG,aAAW,CAAA,EAAA,WApD7HlD,GAAamD,EAAmB/H,EAAe2C,GAEnD2B,EAAC0D,EAAc,CAAAC,MAAM,iBAAiBC,eAAa,EAACC,QAAS,WAAF,OAAQ7F,EAAY,KAAK,EAClF8C,SAAAd,EAAC8D,EAAS,CAAA7C,UAAWzF,EAAQuI,KAAIjD,SAC9BR,GAAW0D,IAAI,SAACC,EAAGC,GAAK,IAAAC,EACjB1H,EAAQwH,EAAExH,MAChB,IAAKwH,EAAG,OAAO,KACf,IAAM7H,EAAe,QAAV+H,EAAGF,EAAE7H,aAAK,IAAA+H,EAAAA,EAAI1H,EAAM2H,WACzBT,KAAKU,OAAMjI,EAAKiI,OAAAA,OAAMhG,EAAW,KACvC,OACE0C,EAACuD,EAAS,CAAAX,MAAOA,EAAkCY,QAAS,WAAF,OAhC1C,SAAC9H,GAAwB,IAAA+H,EACnD,GAAKnG,EAAL,CACA,IAAMoG,EAAclJ,EAAOI,OAAOc,GAC5BiI,UAAUF,EAAGpH,EAAQwC,YAAYC,mBAAW,IAAA2E,OAAA,EAA/BA,EAAkC/H,GAC/CqD,GAAQ4E,aAAU,EAAVA,EAAY5E,QAAS,KAC/B2E,SAAAA,EAAaE,YACfjH,EAAcjB,EAAO,CAAEsD,OAAQ,CAAC1B,GAAWyB,MAAAA,IAE3CrC,EAAUhB,EAAO,CAAEsD,OAAQ,CAAC1B,GAAWyB,MAAAA,IAEzCP,GAAY,EATG,CAUhB,CAqB6EqF,CAAoBnI,EAAM,EAAEwE,UAAWzF,EAAQqJ,SAAQ/D,SAAA,CACvHC,EAAC+D,EAAU,CAACC,QAAQ,QAAQ9F,GAAI,CAAE+F,WAAY,IAAKC,KAAM,YAAYnE,SAAA,CAClE1E,EACU,OACb2E,EAAC+D,GAAWC,QAAQ,QAAQG,MAAM,iBAAiBjG,GAAI,CAAEkG,GAAI,EAAGF,KAAM,YAAcG,wBAChF/G,EAAQ,SALe5B,EAAM2H,WAAaF,EASnD,gBAuCV,CAEH,CAEO,IAAMzI,EAAqB,CAChC+E,KAAM,uBACNW,UAAW,4BACXkE,OAAQ,yBACR7D,MAAO,wBACPd,MAAO,wBACP5B,YAAa,8BACbiF,KAAM,uBACNc,SAAU,4BAIN7D,EAAoBsE,EAAOlE,EAAPkE,CAAY,SAAAC,GAAA,IAAGC,EAAKD,EAALC,MAAK,OAAAC,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAAA,EAAA,CAAA,EAAA,KAAApB,OAGtC5I,EAAmB+E,MAAS,CAChCkF,OAAQ,mCACRT,KAAM,EACNU,OAAQ,YACRC,YAAaC,EAAML,EAAMM,QAAQC,QAAS,KAC1CC,aAAcR,EAAMS,MAAMD,aAC1BE,gBAAiBV,EAAMM,QAAQK,WAAWC,MAC1C9C,WAAYkC,EAAMa,YAAYC,OAAO,CAAC,eAAgB,iBAExD,UAAW,CAAEV,YAAaJ,EAAMM,QAAQS,KAAKC,UAC7C,gBAAiB,CACfZ,YAAaJ,EAAMM,QAAQU,QAAQC,KACnCC,UAAS,aAAArC,OAAemB,EAAMM,QAAQU,QAAQC,KAAI,aACnDpC,OACK5I,EAAmBiF,OAAU,CACjCkF,YAAaJ,EAAMM,QAAQU,QAAQC,KACnCC,UAAS,aAAArC,OAAemB,EAAMM,QAAQU,QAAQC,KAAI,YACnDpC,OACI5I,EAAmB0F,WAAc,CAAEuE,OAAQ,OAAQiB,QAAS,OAAQC,WAAY,gBAAWvC,OAC3F5I,EAAmBqD,aAAgB,CAAE+H,MAAO,MAAOnB,OAAQ,OAAQoB,UAAW,gBAAWzC,OACzF5I,EAAmB+F,OAAU,CAChCuF,QAASvB,EAAMwB,QAAQ,GAAK,GAC5BxF,MAAO,CAAEyF,SAAU,OAAQF,QAAS,mBACrC1C,OACI5I,EAAmB4J,QAAW,CAAEJ,KAAM,YAAY"}

package/dist/src/filter-bar/components/filter-input.units.js

@@ -1,2 +1,2 @@
-import{objectSpread2 as r}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as e,jsx as l}from"react/jsx-runtime";import{InputAdornment as i,Tooltip as o,IconButton as a,colors as t,SvgIcon as n}from"@mui/material";import c from"@mui/icons-material/Close";import s from"@mui/icons-material/Search";import{KeySpecial as u}from"../types.js";function d(r,e){var l=(e||"").toString().trim().toLowerCase(),i=Object.keys(r.fields||{}),o=[];return i.forEach(function(e){var i,a,t=r.fields[e];if(t){var n=null===(i=r.matches)||void 0===i?void 0:i[e],c=null!==(a=null==n?void 0:n.rules)&&void 0!==a?a:[{rule:"always"}];(Array.isArray(c)?c:[]).forEach(function(r){switch(r.rule){case"always":return void o.push({field:e,label:t.label});case"existed":return void(l&&o.push({field:e,label:t.label}));case"link":try{new URL(l),o.push({field:e,label:t.label})}catch(r){}return;case"custom":var i;return void(null!==(i=r.validate)&&void 0!==i&&i.call(r,l)&&o.push({field:e,label:t.label}));default:return}})}}),o.sort(function(r,e){return r.field===u.quickSearch?1:e.field===u.quickSearch?-1:0})}var f=function(e){return l(n,r(r({viewBox:"2 0 24 24",version:"1.0"},e),{},{children:l("path",{fill:"currentColor",d:"M19,6a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H7.41l1.3-1.29A1,1,0,0,0,7.29,9.29l-3,3a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L7.41,14H17a3,3,0,0,0,3-3V7A1,1,0,0,0,19,6Z"})}))},h=function(r){return l(i,{position:"start",children:l(o,{title:"Enter the value to search for",arrow:!0,children:l(a,{size:"small",sx:{flex:"0 0 auto"},onClick:r.onSearch,children:l(s,{fontSize:"small"})})})})},m=function(r){var n=r.hasKeyword,s=r.onSubmit,u=r.onClear;return e(i,{position:"end",children:[n&&l(o,{title:"The enter or click to apply",arrow:!0,children:l(a,{size:"small",sx:{flex:"0 0 auto",color:t.blue[600],"&:hover":{color:t.blue[900]}},onClick:s,children:l(f,{fontSize:"small"})})}),n&&l(o,{title:"Clear",arrow:!0,children:l(a,{size:"small",sx:{flex:"0 0 auto",color:t.red[500],"&:hover":{color:t.red[700]}},onClick:u,children:l(c,{fontSize:"small"})})})]})};export{h as InputAdornmentLeft,m as InputAdornmentRight,d as getFieldsByMatches};
+import{objectSpread2 as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as r,jsx as l}from"react/jsx-runtime";import{InputAdornment as i,Tooltip as o,IconButton as a,colors as t,SvgIcon as n}from"@mui/material";import c from"@mui/icons-material/Close";import s from"@mui/icons-material/Search";import{KeySpecial as u}from"../types.js";function d(e,r){var l=(r||"").toString().trim().toLowerCase(),i=Object.keys(e.fields||{}),o=[];return i.forEach(function(r){var i,a,t=e.fields[r];if(t){var n=null===(i=e.matches)||void 0===i?void 0:i[r],c=null!==(a=null==n?void 0:n.rules)&&void 0!==a?a:[{rule:"always"}];(Array.isArray(c)?c:[]).forEach(function(e){switch(e.rule){case"always":return void o.push({field:r,label:t.label});case"existed":return void(l&&o.push({field:r,label:t.label}));case"link":try{new URL(l),o.push({field:r,label:t.label})}catch(e){}return;case"custom":var i;return void(null!==(i=e.validate)&&void 0!==i&&i.call(e,l)&&o.push({field:r,label:t.label}));default:return}})}}),o.sort(function(e,r){return e.field===u.quickSearch?1:r.field===u.quickSearch?-1:0})}var f=function(r){return l(n,e(e({viewBox:"2 0 24 24",version:"1.0"},r),{},{children:l("path",{fill:"currentColor",d:"M19,6a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H7.41l1.3-1.29A1,1,0,0,0,7.29,9.29l-3,3a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L7.41,14H17a3,3,0,0,0,3-3V7A1,1,0,0,0,19,6Z"})}))},m=function(e){return l(i,{position:"start",children:l(o,{title:"Enter the value to search for",arrow:!0,children:l(a,{size:"small",sx:{flex:"0 0 auto"},onClick:e.onSearch,children:l(s,{fontSize:"small"})})})})},h=function(e){var n=e.hasKeyword,s=e.onSubmit,u=e.onClear;return r(i,{position:"end",children:[n&&l(o,{title:"The enter or click to apply",arrow:!0,placement:"top",children:l(a,{size:"small",sx:{flex:"0 0 auto",color:t.blue[600],"&:hover":{color:t.blue[900]}},onClick:s,children:l(f,{fontSize:"small"})})}),n&&l(o,{title:"Clear",arrow:!0,placement:"top",children:l(a,{size:"small",sx:{flex:"0 0 auto",color:t.red[500],"&:hover":{color:t.red[700]}},onClick:u,children:l(c,{fontSize:"small"})})})]})};export{m as InputAdornmentLeft,h as InputAdornmentRight,d as getFieldsByMatches};
 //# sourceMappingURL=filter-input.units.js.map

package/dist/src/filter-bar/components/filter-input.units.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-input.units.js","sources":["../../../../src/filter-bar/components/filter-input.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { colors, IconButton, InputAdornment, SvgIcon, Tooltip } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport SearchIcon from '@mui/icons-material/Search'\r\nimport { KeySpecial } from '../types'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { IconButtonProps, SvgIconProps } from '@mui/material'\r\nimport type { TFieldType } from '../types'\r\nimport type { IFieldInputConfig, IFilterInputConfig, TFieldMatch } from './filter-input.types'\r\n\r\nexport function getFieldsByMatches<T>(config: IFilterInputConfig<T>, keywords: string): IFieldInputConfig<T>[] {\r\n  const value = (keywords || '').toString().trim().toLowerCase()\r\n  const keys = Object.keys(config.fields || {}) as TFieldType<T>[]\r\n  const items: IFieldInputConfig<T>[] = []\r\n\r\n  keys.forEach((key) => {\r\n    const fieldConfig = config.fields[key]\r\n    if (!fieldConfig) return\r\n\r\n    const matchConfig = config.matches?.[key]\r\n    const rules = matchConfig?.rules ?? [{ rule: 'always' }]\r\n    const finalRules: TFieldMatch[] = Array.isArray(rules) ? rules : []\r\n\r\n    finalRules.forEach((r) => {\r\n      switch (r.rule) {\r\n        case 'always': {\r\n          items.push({ field: key, label: fieldConfig.label })\r\n          return\r\n        }\r\n        case 'existed': {\r\n          if (value) items.push({ field: key, label: fieldConfig.label })\r\n          return\r\n        }\r\n        case 'link': {\r\n          try {\r\n            new URL(value)\r\n            items.push({ field: key, label: fieldConfig.label })\r\n          } catch {\r\n            // If the value is not a valid URL, we won't show the linked field\r\n          }\r\n          return\r\n        }\r\n        case 'custom': {\r\n          if (r.validate?.(value)) items.push({ field: key, label: fieldConfig.label })\r\n          return\r\n        }\r\n        default:\r\n          return\r\n      }\r\n    })\r\n  })\r\n\r\n  return items.sort((a, b) => {\r\n    if (a.field === KeySpecial.quickSearch) return 1\r\n    if (b.field === KeySpecial.quickSearch) return -1\r\n    return 0\r\n  })\r\n}\r\n\r\nconst EnterIcon: FC<SvgIconProps> = (props) => (\r\n  <SvgIcon viewBox='2 0 24 24' version='1.0' {...props}>\r\n    <path\r\n      fill='currentColor'\r\n      d='M19,6a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H7.41l1.3-1.29A1,1,0,0,0,7.29,9.29l-3,3a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L7.41,14H17a3,3,0,0,0,3-3V7A1,1,0,0,0,19,6Z'\r\n    />\r\n  </SvgIcon>\r\n)\r\n\r\ninterface InputAdornmentLeftProps {\r\n  onSearch?: IconButtonProps['onClick']\r\n}\r\n\r\nexport const InputAdornmentLeft: FC<InputAdornmentLeftProps> = (props) => (\r\n  <InputAdornment position='start'>\r\n    <Tooltip title='Enter the value to search for' arrow>\r\n      <IconButton size='small' sx={{ flex: '0 0 auto' }} onClick={props.onSearch}>\r\n        <SearchIcon fontSize='small' />\r\n      </IconButton>\r\n    </Tooltip>\r\n  </InputAdornment>\r\n)\r\n\r\ninterface InputAdornmentRightProps {\r\n  hasKeyword?: boolean\r\n  onSubmit?: IconButtonProps['onClick']\r\n  onClear?: IconButtonProps['onClick']\r\n}\r\n\r\nexport const InputAdornmentRight: FC<InputAdornmentRightProps> = (props) => {\r\n  const { hasKeyword, onSubmit, onClear } = props\r\n  return (\r\n    <InputAdornment position='end'>\r\n      {hasKeyword && (\r\n        <Tooltip title='The enter or click to apply' arrow>\r\n          <IconButton size='small' sx={{ flex: '0 0 auto', color: colors.blue[600], '&:hover': { color: colors.blue[900] } }} onClick={onSubmit}>\r\n            <EnterIcon fontSize='small' />\r\n          </IconButton>\r\n        </Tooltip>\r\n      )}\r\n\r\n      {hasKeyword && (\r\n        <Tooltip title='Clear' arrow>\r\n          <IconButton size='small' sx={{ flex: '0 0 auto', color: colors.red[500], '&:hover': { color: colors.red[700] } }} onClick={onClear}>\r\n            <CloseIcon fontSize='small' />\r\n          </IconButton>\r\n        </Tooltip>\r\n      )}\r\n    </InputAdornment>\r\n  )\r\n}\r\n"],"names":["getFieldsByMatches","config","keywords","value","toString","trim","toLowerCase","keys","Object","fields","items","forEach","key","_config$matches","_matchConfig$rules","fieldConfig","matchConfig","matches","rules","rule","Array","isArray","r","push","field","label","URL","_unused","_r$validate","validate","call","sort","a","b","KeySpecial","quickSearch","EnterIcon","props","_jsx","SvgIcon","_objectSpread","viewBox","version","children","fill","d","InputAdornmentLeft","InputAdornment","position","Tooltip","title","arrow","IconButton","size","sx","flex","onClick","onSearch","SearchIcon","fontSize","InputAdornmentRight","hasKeyword","onSubmit","onClear","_jsxs","color","colors","blue","red","CloseIcon"],"mappings":"kWAagB,SAAAA,EAAsBC,EAA+BC,GACnE,IAAMC,GAASD,GAAY,IAAIE,WAAWC,OAAOC,cAC3CC,EAAOC,OAAOD,KAAKN,EAAOQ,QAAU,CAAA,GACpCC,EAAgC,GAuCtC,OArCAH,EAAKI,QAAQ,SAACC,GAAO,IAAAC,EAAAC,EACbC,EAAcd,EAAOQ,OAAOG,GAClC,GAAKG,EAAL,CAEA,IAAMC,EAA4B,QAAjBH,EAAGZ,EAAOgB,eAAO,IAAAJ,OAAA,EAAdA,EAAiBD,GAC/BM,EAA0BJ,QAArBA,EAAGE,aAAW,EAAXA,EAAaE,aAAKJ,IAAAA,EAAAA,EAAI,CAAC,CAAEK,KAAM,YACXC,MAAMC,QAAQH,GAASA,EAAQ,IAEtDP,QAAQ,SAACW,GAClB,OAAQA,EAAEH,MACR,IAAK,SAEH,YADAT,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,QAG9C,IAAK,UAEH,YADItB,GAAOO,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,SAGzD,IAAK,OACH,IACE,IAAIC,IAAIvB,GACRO,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,OAC7C,CAAC,MAAAE,GACA,CAEF,OAEF,IAAK,SAAU,IAAAC,EAEb,YADcA,QAAdA,EAAIN,EAAEO,oBAAQD,GAAVA,EAAAE,KAAAR,EAAanB,IAAQO,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,SAGvE,QACE,OAEN,EAhCkB,CAiCpB,GAEOf,EAAMqB,KAAK,SAACC,EAAGC,GACpB,OAAID,EAAER,QAAUU,EAAWC,YAAoB,EAC3CF,EAAET,QAAUU,EAAWC,aAAsB,EAC1C,CACT,EACF,CAEA,IAAMC,EAA8B,SAACC,GAAK,OACxCC,EAACC,EAAOC,EAAAA,EAAA,CAACC,QAAQ,YAAYC,QAAQ,OAAUL,GAAK,GAAA,CAClDM,SAAAL,EAAA,OAAA,CACEM,KAAK,eACLC,EAAE,oNAEI,EAOCC,EAAkD,SAACT,GAAK,OACnEC,EAACS,EAAc,CAACC,SAAS,QAAOL,SAC9BL,EAACW,EAAQ,CAAAC,MAAM,gCAAgCC,OAC7C,EAAAR,SAAAL,EAACc,EAAU,CAACC,KAAK,QAAQC,GAAI,CAAEC,KAAM,YAAcC,QAASnB,EAAMoB,SAChEd,SAAAL,EAACoB,EAAU,CAACC,SAAS,eAGV,EASNC,EAAoD,SAACvB,GAChE,IAAQwB,EAAkCxB,EAAlCwB,WAAYC,EAAsBzB,EAAtByB,SAAUC,EAAY1B,EAAZ0B,QAC9B,OACEC,EAACjB,EAAc,CAACC,SAAS,MAAKL,SAAA,CAC3BkB,GACCvB,EAACW,EAAQ,CAAAC,MAAM,8BAA8BC,OAC3C,EAAAR,SAAAL,EAACc,EAAW,CAAAC,KAAK,QAAQC,GAAI,CAAEC,KAAM,WAAYU,MAAOC,EAAOC,KAAK,KAAM,UAAW,CAAEF,MAAOC,EAAOC,KAAK,OAAUX,QAASM,EAAQnB,SACnIL,EAACF,EAAU,CAAAuB,SAAS,cAKzBE,GACCvB,EAACW,EAAO,CAACC,MAAM,QAAQC,OACrB,EAAAR,SAAAL,EAACc,EAAU,CAACC,KAAK,QAAQC,GAAI,CAAEC,KAAM,WAAYU,MAAOC,EAAOE,IAAI,KAAM,UAAW,CAAEH,MAAOC,EAAOE,IAAI,OAAUZ,QAASO,EAAOpB,SAChIL,EAAC+B,GAAUV,SAAS,gBAMhC"}
+{"version":3,"file":"filter-input.units.js","sources":["../../../../src/filter-bar/components/filter-input.units.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { colors, IconButton, InputAdornment, SvgIcon, Tooltip } from '@mui/material'\r\nimport CloseIcon from '@mui/icons-material/Close'\r\nimport SearchIcon from '@mui/icons-material/Search'\r\nimport { KeySpecial } from '../types'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { IconButtonProps, SvgIconProps } from '@mui/material'\r\nimport type { TFieldType } from '../types'\r\nimport type { IFieldInputConfig, IFilterInputConfig, TFieldMatch } from './filter-input.types'\r\n\r\nexport function getFieldsByMatches<T>(config: IFilterInputConfig<T>, keywords: string): IFieldInputConfig<T>[] {\r\n  const value = (keywords || '').toString().trim().toLowerCase()\r\n  const keys = Object.keys(config.fields || {}) as TFieldType<T>[]\r\n  const items: IFieldInputConfig<T>[] = []\r\n\r\n  keys.forEach((key) => {\r\n    const fieldConfig = config.fields[key]\r\n    if (!fieldConfig) return\r\n\r\n    const matchConfig = config.matches?.[key]\r\n    const rules = matchConfig?.rules ?? [{ rule: 'always' }]\r\n    const finalRules: TFieldMatch[] = Array.isArray(rules) ? rules : []\r\n\r\n    finalRules.forEach((r) => {\r\n      switch (r.rule) {\r\n        case 'always': {\r\n          items.push({ field: key, label: fieldConfig.label })\r\n          return\r\n        }\r\n        case 'existed': {\r\n          if (value) items.push({ field: key, label: fieldConfig.label })\r\n          return\r\n        }\r\n        case 'link': {\r\n          try {\r\n            new URL(value)\r\n            items.push({ field: key, label: fieldConfig.label })\r\n          } catch {\r\n            // If the value is not a valid URL, we won't show the linked field\r\n          }\r\n          return\r\n        }\r\n        case 'custom': {\r\n          if (r.validate?.(value)) items.push({ field: key, label: fieldConfig.label })\r\n          return\r\n        }\r\n        default:\r\n          return\r\n      }\r\n    })\r\n  })\r\n\r\n  return items.sort((a, b) => {\r\n    if (a.field === KeySpecial.quickSearch) return 1\r\n    if (b.field === KeySpecial.quickSearch) return -1\r\n    return 0\r\n  })\r\n}\r\n\r\nconst EnterIcon: FC<SvgIconProps> = (props) => (\r\n  <SvgIcon viewBox='2 0 24 24' version='1.0' {...props}>\r\n    <path\r\n      fill='currentColor'\r\n      d='M19,6a1,1,0,0,0-1,1v4a1,1,0,0,1-1,1H7.41l1.3-1.29A1,1,0,0,0,7.29,9.29l-3,3a1,1,0,0,0-.21.33,1,1,0,0,0,0,.76,1,1,0,0,0,.21.33l3,3a1,1,0,0,0,1.42,0,1,1,0,0,0,0-1.42L7.41,14H17a3,3,0,0,0,3-3V7A1,1,0,0,0,19,6Z'\r\n    />\r\n  </SvgIcon>\r\n)\r\n\r\ninterface InputAdornmentLeftProps {\r\n  onSearch?: IconButtonProps['onClick']\r\n}\r\n\r\nexport const InputAdornmentLeft: FC<InputAdornmentLeftProps> = (props) => (\r\n  <InputAdornment position='start'>\r\n    <Tooltip title='Enter the value to search for' arrow>\r\n      <IconButton size='small' sx={{ flex: '0 0 auto' }} onClick={props.onSearch}>\r\n        <SearchIcon fontSize='small' />\r\n      </IconButton>\r\n    </Tooltip>\r\n  </InputAdornment>\r\n)\r\n\r\ninterface InputAdornmentRightProps {\r\n  hasKeyword?: boolean\r\n  onSubmit?: IconButtonProps['onClick']\r\n  onClear?: IconButtonProps['onClick']\r\n}\r\n\r\nexport const InputAdornmentRight: FC<InputAdornmentRightProps> = (props) => {\r\n  const { hasKeyword, onSubmit, onClear } = props\r\n  return (\r\n    <InputAdornment position='end'>\r\n      {hasKeyword && (\r\n        <Tooltip title='The enter or click to apply' arrow placement='top'>\r\n          <IconButton size='small' sx={{ flex: '0 0 auto', color: colors.blue[600], '&:hover': { color: colors.blue[900] } }} onClick={onSubmit}>\r\n            <EnterIcon fontSize='small' />\r\n          </IconButton>\r\n        </Tooltip>\r\n      )}\r\n\r\n      {hasKeyword && (\r\n        <Tooltip title='Clear' arrow placement='top'>\r\n          <IconButton size='small' sx={{ flex: '0 0 auto', color: colors.red[500], '&:hover': { color: colors.red[700] } }} onClick={onClear}>\r\n            <CloseIcon fontSize='small' />\r\n          </IconButton>\r\n        </Tooltip>\r\n      )}\r\n    </InputAdornment>\r\n  )\r\n}\r\n"],"names":["getFieldsByMatches","config","keywords","value","toString","trim","toLowerCase","keys","Object","fields","items","forEach","key","_config$matches","_matchConfig$rules","fieldConfig","matchConfig","matches","rules","rule","Array","isArray","r","push","field","label","URL","_unused","_r$validate","validate","call","sort","a","b","KeySpecial","quickSearch","EnterIcon","props","_jsx","SvgIcon","_objectSpread","viewBox","version","children","fill","d","InputAdornmentLeft","InputAdornment","position","Tooltip","title","arrow","IconButton","size","sx","flex","onClick","onSearch","SearchIcon","fontSize","InputAdornmentRight","hasKeyword","onSubmit","onClear","_jsxs","placement","color","colors","blue","red","CloseIcon"],"mappings":"kWAagB,SAAAA,EAAsBC,EAA+BC,GACnE,IAAMC,GAASD,GAAY,IAAIE,WAAWC,OAAOC,cAC3CC,EAAOC,OAAOD,KAAKN,EAAOQ,QAAU,CAAA,GACpCC,EAAgC,GAuCtC,OArCAH,EAAKI,QAAQ,SAACC,GAAO,IAAAC,EAAAC,EACbC,EAAcd,EAAOQ,OAAOG,GAClC,GAAKG,EAAL,CAEA,IAAMC,EAA4B,QAAjBH,EAAGZ,EAAOgB,eAAO,IAAAJ,OAAA,EAAdA,EAAiBD,GAC/BM,EAA0BJ,QAArBA,EAAGE,aAAW,EAAXA,EAAaE,aAAKJ,IAAAA,EAAAA,EAAI,CAAC,CAAEK,KAAM,YACXC,MAAMC,QAAQH,GAASA,EAAQ,IAEtDP,QAAQ,SAACW,GAClB,OAAQA,EAAEH,MACR,IAAK,SAEH,YADAT,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,QAG9C,IAAK,UAEH,YADItB,GAAOO,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,SAGzD,IAAK,OACH,IACE,IAAIC,IAAIvB,GACRO,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,OAC7C,CAAC,MAAAE,GACA,CAEF,OAEF,IAAK,SAAU,IAAAC,EAEb,YADcA,QAAdA,EAAIN,EAAEO,oBAAQD,GAAVA,EAAAE,KAAAR,EAAanB,IAAQO,EAAMa,KAAK,CAAEC,MAAOZ,EAAKa,MAAOV,EAAYU,SAGvE,QACE,OAEN,EAhCkB,CAiCpB,GAEOf,EAAMqB,KAAK,SAACC,EAAGC,GACpB,OAAID,EAAER,QAAUU,EAAWC,YAAoB,EAC3CF,EAAET,QAAUU,EAAWC,aAAsB,EAC1C,CACT,EACF,CAEA,IAAMC,EAA8B,SAACC,GAAK,OACxCC,EAACC,EAAOC,EAAAA,EAAA,CAACC,QAAQ,YAAYC,QAAQ,OAAUL,GAAK,GAAA,CAClDM,SAAAL,EAAA,OAAA,CACEM,KAAK,eACLC,EAAE,oNAEI,EAOCC,EAAkD,SAACT,GAAK,OACnEC,EAACS,EAAc,CAACC,SAAS,QAAOL,SAC9BL,EAACW,EAAQ,CAAAC,MAAM,gCAAgCC,OAC7C,EAAAR,SAAAL,EAACc,EAAU,CAACC,KAAK,QAAQC,GAAI,CAAEC,KAAM,YAAcC,QAASnB,EAAMoB,SAChEd,SAAAL,EAACoB,EAAU,CAACC,SAAS,eAGV,EASNC,EAAoD,SAACvB,GAChE,IAAQwB,EAAkCxB,EAAlCwB,WAAYC,EAAsBzB,EAAtByB,SAAUC,EAAY1B,EAAZ0B,QAC9B,OACEC,EAACjB,EAAc,CAACC,SAAS,MACtBL,SAAA,CAAAkB,GACCvB,EAACW,GAAQC,MAAM,8BAA8BC,OAAK,EAACc,UAAU,MAC3DtB,SAAAL,EAACc,EAAU,CAACC,KAAK,QAAQC,GAAI,CAAEC,KAAM,WAAYW,MAAOC,EAAOC,KAAK,KAAM,UAAW,CAAEF,MAAOC,EAAOC,KAAK,OAAUZ,QAASM,WAC3HxB,EAACF,EAAU,CAAAuB,SAAS,cAKzBE,GACCvB,EAACW,EAAQ,CAAAC,MAAM,QAAQC,SAAMc,UAAU,MAAKtB,SAC1CL,EAACc,EAAW,CAAAC,KAAK,QAAQC,GAAI,CAAEC,KAAM,WAAYW,MAAOC,EAAOE,IAAI,KAAM,UAAW,CAAEH,MAAOC,EAAOE,IAAI,OAAUb,QAASO,EACzHpB,SAAAL,EAACgC,EAAU,CAAAX,SAAS,gBAMhC"}

package/dist/src/filter-bar/components/filter-menu.js

@@ -1,2 +1,2 @@
-import{defineProperty as e,objectWithoutProperties as r,objectSpread2 as n,slicedToArray as t,asyncToGenerator as i,regenerator as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l,jsxs as a}from"react/jsx-runtime";import{useState as u,useContext as c,useMemo as s,createRef as d}from"react";import{styled as m,Box as f,MenuList as p,Tooltip as v,IconButton as b,Badge as h,MenuItem as g,Typography as y,Button as j}from"@mui/material";import F from"@mui/icons-material/FilterList";import k from"@mui/material/ClickAwayListener";import{KeySpecial as I}from"../types.js";import{useFilterActions as C}from"./hooks.js";import{mapSpecialLabel as x}from"../helpers.js";import{FilterBarContext as S}from"../index.context.js";import{SingleRuleValidate as w,FormValidator as P}from"../../form/validator.js";import{PopperCustom as R,PopperContent as A,PopperFooter as B}from"./popper-custom.js";import{createFormFieldString as O,FilterMenuNoField as T}from"./filter-menu.units.js";var M=["fields","validation","enableQuickSearch"];function q(m){var f=D,p=function(e){var t=e.fields,i=e.validation,o=e.enableQuickSearch,l=void 0===o||o,a=r(e,M),u=I.quickSearch,c=n({},t);if(l){var s=c[u],d=null!=s&&s.label?s.label:x[u],m=Object.assign({},c[u],{field:u,label:d,singleValue:!0});c[u]=m}else delete c[u];var f=Object.keys(c),p=f.reduce(function(e,r){var t=c[r];return t?(e[r]=n(n({},t),{},{field:r}),e):e},{}),v=n({},i);return f.forEach(function(e){var r,n,t,i=v[e],o=null!==(r=null!==(n=null==i?void 0:i.label)&&void 0!==n?n:null===(t=c[e])||void 0===t?void 0:t.label)&&void 0!==r?r:e.toString();i?i.Rules.some(function(e){return e.rule===w.Required})||(i.label=o,i.Rules.push({rule:w.Required})):v[e]={Rules:[{rule:w.Required}],label:o}}),n(n({},a),{},{fields:p,validation:v,enableQuickSearch:l})}(m),q=function(r){return Object.keys(r.fields).reduce(function(n,t){var i,o=t,l=null===(i=r.validation)||void 0===i?void 0:i[o];return l&&(n[o]=new P(e({},o,l))),n},{})}(p),Q=function(e){var r=e.fields;return Object.keys(r).reduce(function(e,n){var t,i=n,o=r[i];return o&&(e[i]=null!==(t=o.form)&&void 0!==t?t:O(o)),e},{})}(p);return function(e){var r=d(),I=u(null),x=t(I,2),w=x[0],P=x[1],O=Boolean(w),M=c(S),D=C(M),V=u(null),z=t(V,2),E=z[0],_=z[1],G=s(function(){var r=m.popperProps,n=m.rootProps;return Object.assign({},{popperProps:r,rootProps:n},e.slots)},[m,e.slots]),H=function(){P(null),setTimeout(function(){_(null)},300)},W=function(){D.clearAllFilters(),H()},J=function(){var e=i(o().m(function e(r,n,t){return o().w(function(e){for(;;)switch(e.n){case 0:if(n){e.n=1;break}return e.a(2);case 1:null!=t&&t.singleValue?D.replaceFilter(r,n,{logic:n.logic}):D.upsertManyFilter(r,n,{logic:n.logic});case 2:return e.a(2)}},e)}));return function(r,n,t){return e.apply(this,arguments)}}(),K=s(function(){var e=Object.values(p.fields);return Array.from(e)},[p.fields]),U=D.getTotalCount(),X="".concat(U," Filter").concat(1!==U?"s":"");return l(k,{onClickAway:H,children:a(L,n(n({className:f.root},G.rootProps),{},{children:[l(v,{title:X,arrow:!0,children:l(b,{size:"small",ref:r,onClick:function(){_(null),P(r.current)},children:l(h,{badgeContent:U,color:"primary",invisible:0===U,children:l(F,{fontSize:"small"})})})}),l(R,n(n({open:O,anchorEl:w,placement:"bottom",transition:!0,disablePortal:!0},G.popperProps),{},{children:function(){if(0===K.length)return l(T,{onClose:H});if(E){var e,r=Q[E];if(!r)return null;var n=null===(e=M.filterState.storeFilter)||void 0===e?void 0:e[E];return l(r,{value:n,isLoading:M.isLoading,onRemove:D.removeFilterByFieldValue,validator:q[E],onSubmit:J,onClose:H,onRemoveField:function(e){return D.removeFilter(e)},onBack:function(){return _(null)}})}return a(A,{title:"Filter by",onClose:H,children:[l(N,{className:f.menu,children:K.map(function(e){var r,n,t=e.field.toString();if(!t)return null;var i=D.getFieldInfo(e.field),o=null!==(r=null==i?void 0:i.values.join(", "))&&void 0!==r?r:"",u=i?i.values.length:0,c=u>0?" (".concat(u,")"):"",s=null!==(n=e.label)&&void 0!==n?n:t.toString(),d=u>0?"Filter by ".concat(s,": ").concat(o):void 0;return l(g,{className:f.menuItem,sx:{justifyContent:"space-between"},onClick:function(){return r=e.field,void _(r);var r},children:l(v,{title:d,placement:"right",arrow:!0,children:a("div",{className:f.menuItemInner,children:[l(y,{variant:"body2",children:s}),l(y,{variant:"caption",sx:{ml:1,color:"text.secondary"},children:c})]})})},t)})}),l(B,{children:l(j,{color:"error",disabled:0===U,onClick:W,children:"Clear All"})})]})}()}))]}))})}}var D={root:"DinoFilterMenu-root",menu:"DinoFilterMenu-menu",menuItem:"DinoFilterMenu-menuItem",menuItemInner:"DinoFilterMenu-menuItemInner"},L=m(f)(e({},"&.".concat(D.root),{display:"inline-flex",justifyContent:"center",alignItems:"center",flex:"0 0 auto"})),N=m(p)(e(e({},".".concat(D.menuItem),{paddingTop:0,paddingBottom:0}),".".concat(D.menuItemInner),{display:"flex",justifyContent:"space-between",alignItems:"center",width:"100%",gap:"4px",paddingTop:"6px",paddingBottom:"6px"}));export{q as createFilterMenu,D as filterMenuClasses};
+import{defineProperty as e,objectWithoutProperties as n,objectSpread2 as r,slicedToArray as t,asyncToGenerator as i,regenerator as o}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as l,jsxs as a}from"react/jsx-runtime";import{useState as u,useContext as c,useMemo as s,createRef as d}from"react";import{styled as m,Box as f,MenuList as p,Tooltip as v,IconButton as h,Badge as b,MenuItem as g,Typography as y,Button as j}from"@mui/material";import k from"@mui/icons-material/FilterList";import F from"@mui/material/ClickAwayListener";import{KeySpecial as I}from"../types.js";import{useFilterActions as C}from"../hooks.js";import{FilterBarContext as x}from"../index.context.js";import{mapSpecialLabel as S,mapSpecialTexts as w}from"../helpers.js";import{SingleRuleValidate as P,FormValidator as R}from"../../form/validator.js";import{PopperCustom as q,PopperContent as T,PopperFooter as A}from"./popper-custom.js";import{createFormFieldString as B,FilterMenuNoField as O}from"./filter-menu.units.js";var M=["fields","validation","enableQuickSearch"];function D(m){var f=L,p=function(e){var t=e.fields,i=e.validation,o=e.enableQuickSearch,l=void 0===o||o,a=n(e,M),u=I.quickSearch,c=r({},t);if(l){var s=c[u],d=null!=s&&s.label?s.label:S[u],m=Object.assign({},c[u],{field:u,label:d,singleValue:!0});c[u]=m}else delete c[u];var f=Object.keys(c),p=f.reduce(function(e,n){var t=c[n];return t?(e[n]=r(r({},t),{},{field:n}),e):e},{}),v=r({},i);return f.forEach(function(e){var n,r,t,i=v[e],o=null!==(n=null!==(r=null==i?void 0:i.label)&&void 0!==r?r:null===(t=c[e])||void 0===t?void 0:t.label)&&void 0!==n?n:e.toString();i?i.Rules.some(function(e){return e.rule===P.Required})||(i.label=o,i.Rules.push({rule:P.Required})):v[e]={Rules:[{rule:P.Required}],label:o}}),r(r({},a),{},{fields:p,validation:v,enableQuickSearch:l})}(m),D=function(n){return Object.keys(n.fields).reduce(function(r,t){var i,o=t,l=null===(i=n.validation)||void 0===i?void 0:i[o];return l&&(r[o]=new R(e({},o,l))),r},{})}(p),V=function(e){var n=e.fields;return Object.keys(n).reduce(function(e,r){var t,i=r,o=n[i];return o&&(e[i]=null!==(t=o.form)&&void 0!==t?t:B(o)),e},{})}(p),z=m.quickSearchHint;return function(e){var n=d(),S=u(null),P=t(S,2),R=P[0],B=P[1],M=Boolean(R),L=c(x),E=C(L),H=u(null),_=t(H,2),G=_[0],W=_[1],J=s(function(){var n=m.popperProps,r=m.rootProps;return Object.assign({},{popperProps:n,rootProps:r},e.slots)},[m,e.slots]),K=function(){B(null),setTimeout(function(){W(null)},300)},U=function(){E.clearAllFilters(),K()},X=function(){var e=i(o().m(function e(n,r,t){return o().w(function(e){for(;;)switch(e.n){case 0:if(r){e.n=1;break}return e.a(2);case 1:null!=t&&t.singleValue?E.replaceFilter(n,r,{logic:r.logic}):E.upsertManyFilter(n,r,{logic:r.logic});case 2:return e.a(2)}},e)}));return function(n,r,t){return e.apply(this,arguments)}}(),Y=s(function(){var e=Object.values(p.fields);return Array.from(e)},[p.fields]),Z=E.getTotalCount(),$="".concat(Z," Filter").concat(1!==Z?"s":"");return l(F,{onClickAway:K,children:a(N,r(r({className:f.root},J.rootProps),{},{children:[l(v,{title:$,arrow:!0,placement:"top",children:l(h,{size:"small",ref:n,onClick:function(){W(null),B(n.current)},children:l(b,{badgeContent:Z,color:"primary",invisible:0===Z,children:l(k,{fontSize:"small"})})})}),l(q,r(r({open:M,anchorEl:R,placement:"bottom",transition:!0,disablePortal:!0},J.popperProps),{},{children:function(){if(0===Y.length)return l(O,{onClose:K});if(G){var e,n=V[G];if(!n)return null;var r=null===(e=L.filterState.storeFilter)||void 0===e?void 0:e[G];return l(n,{value:r,isLoading:L.isLoading,onRemove:E.removeFilterByFieldValue,validator:D[G],onSubmit:X,onClose:K,onRemoveField:function(e){return E.removeFilter(e)},onBack:function(){return W(null)}})}return a(T,{title:"Filter by",onClose:K,children:[l(Q,{className:f.menu,children:Y.map(function(e){var n,r,t=e.field.toString();if(!t)return null;var i=E.getFieldInfo(e.field),o=null!==(n=null==i?void 0:i.values.join(", "))&&void 0!==n?n:"",u=i?i.values.length:0,c=u>0?" (".concat(u,")"):"",s=null!==(r=e.label)&&void 0!==r?r:t.toString(),d=u>0?"Filter by ".concat(s,": ").concat(o):void 0;if(e.field===I.quickSearch){var m=w.qsTooltip;d="function"==typeof z?z(m):null!=z?z:m}return l(g,{className:f.menuItem,sx:{justifyContent:"space-between"},onClick:function(){return n=e.field,void W(n);var n},children:l(v,{title:d,placement:"right",arrow:!0,children:a("div",{className:f.menuItemInner,children:[l(y,{variant:"body2",children:s}),l(y,{variant:"caption",sx:{ml:1,color:"text.secondary"},children:c})]})})},t)})}),l(A,{children:l(j,{color:"error",disabled:0===Z,onClick:U,children:"Clear All"})})]})}()}))]}))})}}var L={root:"DinoFilterMenu-root",menu:"DinoFilterMenu-menu",menuItem:"DinoFilterMenu-menuItem",menuItemInner:"DinoFilterMenu-menuItemInner"},N=m(f)(e({},"&.".concat(L.root),{display:"inline-flex",justifyContent:"center",alignItems:"center",flex:"0 0 auto"})),Q=m(p)(e(e({},".".concat(L.menuItem),{paddingTop:0,paddingBottom:0}),".".concat(L.menuItemInner),{display:"flex",justifyContent:"space-between",alignItems:"center",width:"100%",gap:"4px",paddingTop:"6px",paddingBottom:"6px"}));export{D as createFilterMenu,L as filterMenuClasses};
 //# sourceMappingURL=filter-menu.js.map

package/dist/src/filter-bar/components/filter-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-menu.js","sources":["../../../../src/filter-bar/components/filter-menu.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { createRef, Fragment, useContext, useMemo, useState } from 'react'\r\nimport { Badge, Box, Button, IconButton, MenuItem, MenuList, Stack, styled, Tooltip, Typography } from '@mui/material'\r\nimport FilterListIcon from '@mui/icons-material/FilterList'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport { KeySpecial } from '../types'\r\nimport { useFilterActions } from './hooks'\r\nimport { mapSpecialLabel } from '../helpers'\r\nimport { FilterBarContext } from '../index.context'\r\nimport { FormValidator, SingleRuleValidate } from '../../form/validator'\r\nimport { PopperContent, PopperCustom, PopperFooter } from './popper-custom'\r\nimport { createFormFieldString, FilterMenuNoField } from './filter-menu.units'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { IFilterBarContext } from '../index.context'\r\nimport type { TFieldModelValid, TFieldType, TFieldValue } from '../types'\r\nimport type { IConfigValue, IFormValidatorConfig } from '../../form/validator'\r\nimport type { IFilterMenuProps, IFilterMenuSlots, TFieldMenuConfigs } from './filter-menu.types'\r\nimport type { IFieldMenuConfig, IFilterMenuConfig, IFilterMenuFormProps } from './filter-menu.types'\r\n\r\nfunction generateValidatorMap<T>(config: IFilterMenuConfig<T>) {\r\n  const keys = Object.keys(config.fields) as TFieldType<T>[]\r\n  const validateMaps = keys.reduce(\r\n    (acc, key) => {\r\n      const fieldKey = key as TFieldType<T>\r\n      const fieldConfig = config.validation?.[fieldKey]\r\n      if (fieldConfig) {\r\n        acc[fieldKey] = new FormValidator({ [fieldKey]: fieldConfig } as IFormValidatorConfig<Partial<TFieldModelValid<T>>>)\r\n      }\r\n      return acc\r\n    },\r\n    {} as Record<TFieldType<T>, FormValidator<Partial<TFieldModelValid<T>>>>\r\n  )\r\n  return validateMaps\r\n}\r\n\r\nfunction generateFormInputMap<T>(config: IFilterMenuConfig<T>) {\r\n  const { fields } = config\r\n  const keys = Object.keys(fields) as TFieldType<T>[]\r\n  const formInputMaps = keys.reduce(\r\n    (acc, key) => {\r\n      const fieldKey = key as TFieldType<T>\r\n      const fieldConfig = fields[fieldKey] as IFieldMenuConfig<T>\r\n      if (fieldConfig) acc[fieldKey] = fieldConfig.form ?? createFormFieldString(fieldConfig)\r\n      return acc\r\n    },\r\n    {} as Record<TFieldType<T>, React.ComponentType<IFilterMenuFormProps<T>>>\r\n  )\r\n  return formInputMaps\r\n}\r\n\r\nfunction generateConfigs<T>(config: IFilterMenuConfig<T>): IFilterMenuConfig<T> {\r\n  const { fields, validation, enableQuickSearch = true, ...rest } = config\r\n  const qsKey = KeySpecial.quickSearch\r\n\r\n  // Merge quick search field if enabled\r\n  const mergedFields: TFieldMenuConfigs<T> = { ...fields }\r\n  if (enableQuickSearch) {\r\n    const item = mergedFields[qsKey]\r\n    const label = item?.label ? item.label : mapSpecialLabel[qsKey]\r\n    const temp = Object.assign({}, mergedFields[qsKey], { field: qsKey, label, singleValue: true })\r\n    mergedFields[qsKey] = temp\r\n  } else {\r\n    delete mergedFields[qsKey]\r\n  }\r\n\r\n  const keys = Object.keys(mergedFields) as TFieldType<T>[]\r\n  const finalFields = keys.reduce<TFieldMenuConfigs<T>>((acc, key) => {\r\n    const fieldConfig = mergedFields[key]\r\n    if (!fieldConfig) return acc\r\n    acc[key] = { ...fieldConfig, field: key }\r\n    return acc\r\n  }, {} as TFieldMenuConfigs<T>)\r\n\r\n  // Merge validation config with default required rule\r\n  const mergedValidation: IFormValidatorConfig<Partial<TFieldModelValid<T>>> = { ...validation }\r\n  keys.forEach((key) => {\r\n    const item: IConfigValue<Partial<TFieldModelValid<T>>> | undefined = mergedValidation[key]\r\n    const label = item?.label ?? mergedFields[key]?.label ?? key.toString()\r\n    if (!item) {\r\n      mergedValidation[key] = { Rules: [{ rule: SingleRuleValidate.Required }], label }\r\n    } else if (!item.Rules.some((r) => r.rule === SingleRuleValidate.Required)) {\r\n      item.label = label\r\n      item.Rules.push({ rule: SingleRuleValidate.Required })\r\n    }\r\n  })\r\n\r\n  return { ...rest, fields: finalFields, validation: mergedValidation, enableQuickSearch }\r\n}\r\n\r\nexport function createFilterMenu<T>(config: IFilterMenuConfig<T>) {\r\n  const classes = filterMenuClasses\r\n  const mergedConfigs = generateConfigs(config)\r\n  const validateMaps = generateValidatorMap(mergedConfigs)\r\n  const formInputMaps = generateFormInputMap(mergedConfigs)\r\n\r\n  // Component\r\n  const FilterMenu: FC<IFilterMenuProps<T>> = (props) => {\r\n    const refButton = createRef<HTMLButtonElement>()\r\n\r\n    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n    const isOpen = Boolean(anchorEl)\r\n\r\n    const context = useContext(FilterBarContext) as IFilterBarContext<T>\r\n    const filterActions = useFilterActions<T>(context)\r\n\r\n    const [fieldSelected, setFieldSelected] = useState<TFieldType<T> | null>(null)\r\n\r\n    const mergedSlots = useMemo<IFilterMenuSlots>(() => {\r\n      const { popperProps, rootProps } = config\r\n      return Object.assign({}, { popperProps, rootProps }, props.slots)\r\n    }, [config, props.slots])\r\n\r\n    const handleClose = () => {\r\n      setAnchorEl(null)\r\n      setTimeout(() => {\r\n        setFieldSelected(null)\r\n      }, 300)\r\n    }\r\n\r\n    const handleOpen = () => {\r\n      setFieldSelected(null)\r\n      setAnchorEl(refButton.current)\r\n    }\r\n\r\n    const handleMenuItemClick = (field: TFieldType<T>) => {\r\n      setFieldSelected(field)\r\n    }\r\n\r\n    const handleClearAll = () => {\r\n      filterActions.clearAllFilters()\r\n      handleClose()\r\n    }\r\n\r\n    const handleSubmit = async (key: TFieldType<T>, value?: TFieldValue, config?: IFieldMenuConfig<T>) => {\r\n      if (!value) return\r\n      if (config?.singleValue) {\r\n        filterActions.replaceFilter(key, value, { logic: value.logic })\r\n      } else {\r\n        filterActions.upsertManyFilter(key, value, { logic: value.logic })\r\n      }\r\n    }\r\n\r\n    const data = useMemo(() => {\r\n      const keys = Object.values(mergedConfigs.fields)\r\n      return Array.from(keys) as IFieldMenuConfig<T>[]\r\n    }, [mergedConfigs.fields])\r\n\r\n    const renderContent = () => {\r\n      if (data.length === 0) {\r\n        return <FilterMenuNoField onClose={handleClose} />\r\n      }\r\n\r\n      if (fieldSelected) {\r\n        const FormComponent = formInputMaps[fieldSelected] as React.ComponentType<IFilterMenuFormProps<T>>\r\n        if (!FormComponent) return null\r\n        const value = context.filterState.storeFilter?.[fieldSelected]\r\n        return (\r\n          <FormComponent\r\n            value={value}\r\n            isLoading={context.isLoading}\r\n            onRemove={filterActions.removeFilterByFieldValue}\r\n            validator={validateMaps[fieldSelected]}\r\n            onSubmit={handleSubmit}\r\n            onClose={handleClose}\r\n            onRemoveField={(f) => filterActions.removeFilter(f)}\r\n            onBack={() => setFieldSelected(null)}\r\n          />\r\n        )\r\n      }\r\n\r\n      return (\r\n        <PopperContent title='Filter by' onClose={handleClose}>\r\n          <MenuListCustom className={classes.menu}>\r\n            {data.map((item) => {\r\n              const key = item.field.toString()\r\n              if (!key) return null\r\n              const info = filterActions.getFieldInfo(item.field)\r\n              const note = info?.values.join(', ') ?? ''\r\n              const fieldCount = info ? info.values.length : 0\r\n              const suffix = fieldCount > 0 ? ` (${fieldCount})` : ''\r\n              const label = item.label ?? key.toString()\r\n              const tooltipTitle = fieldCount > 0 ? `Filter by ${label}: ${note}` : undefined\r\n              return (\r\n                <MenuItem\r\n                  key={key}\r\n                  className={classes.menuItem}\r\n                  sx={{ justifyContent: 'space-between' }}\r\n                  onClick={() => handleMenuItemClick(item.field)}\r\n                >\r\n                  <Tooltip title={tooltipTitle} placement='right' arrow>\r\n                    <div className={classes.menuItemInner}>\r\n                      <Typography variant='body2'>{label}</Typography>\r\n                      <Typography variant='caption' sx={{ ml: 1, color: 'text.secondary' }}>\r\n                        {suffix}\r\n                      </Typography>\r\n                    </div>\r\n                  </Tooltip>\r\n                </MenuItem>\r\n              )\r\n            })}\r\n          </MenuListCustom>\r\n          <PopperFooter>\r\n            <Button color='error' disabled={filterCount === 0} onClick={handleClearAll}>\r\n              Clear All\r\n            </Button>\r\n          </PopperFooter>\r\n        </PopperContent>\r\n      )\r\n    }\r\n\r\n    const filterCount = filterActions.getTotalCount()\r\n    const iconTitle = `${filterCount} Filter${filterCount !== 1 ? 's' : ''}`\r\n    return (\r\n      <ClickAwayListener onClickAway={handleClose}>\r\n        <FilterInputStyled className={classes.root} {...mergedSlots.rootProps}>\r\n          <Tooltip title={iconTitle} arrow>\r\n            <IconButton size='small' ref={refButton} onClick={handleOpen}>\r\n              <Badge badgeContent={filterCount} color='primary' invisible={filterCount === 0}>\r\n                <FilterListIcon fontSize='small' />\r\n              </Badge>\r\n            </IconButton>\r\n          </Tooltip>\r\n          <PopperCustom open={isOpen} anchorEl={anchorEl} placement='bottom' transition disablePortal {...mergedSlots.popperProps}>\r\n            {renderContent()}\r\n          </PopperCustom>\r\n        </FilterInputStyled>\r\n      </ClickAwayListener>\r\n    )\r\n  }\r\n  return FilterMenu\r\n}\r\n\r\n// styles\r\nexport const filterMenuClasses = {\r\n  root: 'DinoFilterMenu-root',\r\n  input: 'DinoFilterMenu-input',\r\n  beforeInput: 'DinoFilterMenu-beforeInput',\r\n  menu: 'DinoFilterMenu-menu',\r\n  menuItem: 'DinoFilterMenu-menuItem',\r\n  menuItemInner: 'DinoFilterMenu-menuItemInner'\r\n}\r\n\r\nconst FilterInputStyled = styled(Box)({\r\n  [`&.${filterMenuClasses.root}`]: {\r\n    display: 'inline-flex',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    flex: '0 0 auto'\r\n  }\r\n})\r\n\r\nconst MenuListCustom = styled(MenuList)({\r\n  [`.${filterMenuClasses.menuItem}`]: {\r\n    paddingTop: 0,\r\n    paddingBottom: 0\r\n  },\r\n  [`.${filterMenuClasses.menuItemInner}`]: {\r\n    display: 'flex',\r\n    justifyContent: 'space-between',\r\n    alignItems: 'center',\r\n    width: '100%',\r\n    gap: '4px',\r\n    paddingTop: '6px',\r\n    paddingBottom: '6px'\r\n  }\r\n})\r\n"],"names":["createFilterMenu","config","classes","filterMenuClasses","mergedConfigs","fields","validation","_config$enableQuickSe","enableQuickSearch","rest","_objectWithoutProperties","_excluded","qsKey","KeySpecial","quickSearch","mergedFields","_objectSpread","item","label","mapSpecialLabel","temp","Object","assign","field","singleValue","keys","finalFields","reduce","acc","key","fieldConfig","mergedValidation","forEach","_ref","_item$label","_mergedFields$key","toString","Rules","some","r","rule","SingleRuleValidate","Required","push","generateConfigs","validateMaps","_config$validation","fieldKey","FormValidator","_defineProperty","generateValidatorMap","formInputMaps","_fieldConfig$form","form","createFormFieldString","generateFormInputMap","props","refButton","createRef","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","isOpen","Boolean","context","useContext","FilterBarContext","filterActions","useFilterActions","_useState3","_useState4","fieldSelected","setFieldSelected","mergedSlots","useMemo","popperProps","rootProps","slots","handleClose","setTimeout","handleClearAll","clearAllFilters","handleSubmit","_ref2","_asyncToGenerator","_regenerator","m","_callee","value","w","_context","n","a","replaceFilter","logic","upsertManyFilter","_x","_x2","_x3","apply","this","arguments","data","values","Array","from","filterCount","getTotalCount","iconTitle","concat","_jsx","ClickAwayListener","onClickAway","children","_jsxs","FilterInputStyled","className","root","Tooltip","title","arrow","IconButton","size","ref","onClick","current","Badge","badgeContent","color","invisible","FilterListIcon","fontSize","PopperCustom","open","placement","transition","disablePortal","length","FilterMenuNoField","onClose","_context$filterState$","FormComponent","filterState","storeFilter","isLoading","onRemove","removeFilterByFieldValue","validator","onSubmit","onRemoveField","f","removeFilter","onBack","PopperContent","MenuListCustom","menu","map","_info$values$join","_item$label2","info","getFieldInfo","note","join","fieldCount","suffix","tooltipTitle","undefined","MenuItem","menuItem","sx","justifyContent","menuItemInner","Typography","variant","ml","PopperFooter","Button","disabled","renderContent","styled","Box","display","alignItems","flex","MenuList","paddingTop","paddingBottom","width","gap"],"mappings":"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"}
+{"version":3,"file":"filter-menu.js","sources":["../../../../src/filter-bar/components/filter-menu.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { createRef, useContext, useMemo, useState } from 'react'\r\nimport { Badge, Box, Button, IconButton, MenuItem, MenuList, styled, Tooltip, Typography } from '@mui/material'\r\nimport FilterListIcon from '@mui/icons-material/FilterList'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport { KeySpecial } from '../types'\r\nimport { useFilterActions } from '../hooks'\r\nimport { FilterBarContext } from '../index.context'\r\nimport { mapSpecialLabel, mapSpecialTexts } from '../helpers'\r\nimport { FormValidator, SingleRuleValidate } from '../../form/validator'\r\nimport { PopperContent, PopperCustom, PopperFooter } from './popper-custom'\r\nimport { createFormFieldString, FilterMenuNoField } from './filter-menu.units'\r\n// types\r\nimport type { FC } from 'react'\r\nimport type { IFilterBarContext } from '../index.context'\r\nimport type { TFieldModelValid, TFieldType, TFieldValue } from '../types'\r\nimport type { IConfigValue, IFormValidatorConfig } from '../../form/validator'\r\nimport type { IFilterMenuProps, IFilterMenuSlots, TFieldMenuConfigs } from './filter-menu.types'\r\nimport type { IFieldMenuConfig, IFilterMenuConfig, IFilterMenuFormProps } from './filter-menu.types'\r\n\r\nfunction generateValidatorMap<T>(config: IFilterMenuConfig<T>) {\r\n  const keys = Object.keys(config.fields) as TFieldType<T>[]\r\n  const validateMaps = keys.reduce(\r\n    (acc, key) => {\r\n      const fieldKey = key as TFieldType<T>\r\n      const fieldConfig = config.validation?.[fieldKey]\r\n      if (fieldConfig) {\r\n        acc[fieldKey] = new FormValidator({ [fieldKey]: fieldConfig } as IFormValidatorConfig<Partial<TFieldModelValid<T>>>)\r\n      }\r\n      return acc\r\n    },\r\n    {} as Record<TFieldType<T>, FormValidator<Partial<TFieldModelValid<T>>>>\r\n  )\r\n  return validateMaps\r\n}\r\n\r\nfunction generateFormInputMap<T>(config: IFilterMenuConfig<T>) {\r\n  const { fields } = config\r\n  const keys = Object.keys(fields) as TFieldType<T>[]\r\n  const formInputMaps = keys.reduce(\r\n    (acc, key) => {\r\n      const fieldKey = key as TFieldType<T>\r\n      const fieldConfig = fields[fieldKey] as IFieldMenuConfig<T>\r\n      if (fieldConfig) acc[fieldKey] = fieldConfig.form ?? createFormFieldString(fieldConfig)\r\n      return acc\r\n    },\r\n    {} as Record<TFieldType<T>, React.ComponentType<IFilterMenuFormProps<T>>>\r\n  )\r\n  return formInputMaps\r\n}\r\n\r\nfunction generateConfigs<T>(config: IFilterMenuConfig<T>): IFilterMenuConfig<T> {\r\n  const { fields, validation, enableQuickSearch = true, ...rest } = config\r\n  const qsKey = KeySpecial.quickSearch\r\n\r\n  // Merge quick search field if enabled\r\n  const mergedFields: TFieldMenuConfigs<T> = { ...fields }\r\n  if (enableQuickSearch) {\r\n    const item = mergedFields[qsKey]\r\n    const label = item?.label ? item.label : mapSpecialLabel[qsKey]\r\n    const temp = Object.assign({}, mergedFields[qsKey], { field: qsKey, label, singleValue: true })\r\n    mergedFields[qsKey] = temp\r\n  } else {\r\n    delete mergedFields[qsKey]\r\n  }\r\n\r\n  const keys = Object.keys(mergedFields) as TFieldType<T>[]\r\n  const finalFields = keys.reduce<TFieldMenuConfigs<T>>((acc, key) => {\r\n    const fieldConfig = mergedFields[key]\r\n    if (!fieldConfig) return acc\r\n    acc[key] = { ...fieldConfig, field: key }\r\n    return acc\r\n  }, {} as TFieldMenuConfigs<T>)\r\n\r\n  // Merge validation config with default required rule\r\n  const mergedValidation: IFormValidatorConfig<Partial<TFieldModelValid<T>>> = { ...validation }\r\n  keys.forEach((key) => {\r\n    const item: IConfigValue<Partial<TFieldModelValid<T>>> | undefined = mergedValidation[key]\r\n    const label = item?.label ?? mergedFields[key]?.label ?? key.toString()\r\n    if (!item) {\r\n      mergedValidation[key] = { Rules: [{ rule: SingleRuleValidate.Required }], label }\r\n    } else if (!item.Rules.some((r) => r.rule === SingleRuleValidate.Required)) {\r\n      item.label = label\r\n      item.Rules.push({ rule: SingleRuleValidate.Required })\r\n    }\r\n  })\r\n\r\n  return { ...rest, fields: finalFields, validation: mergedValidation, enableQuickSearch }\r\n}\r\n\r\nexport function createFilterMenu<T>(config: IFilterMenuConfig<T>) {\r\n  const classes = filterMenuClasses\r\n  const mergedConfigs = generateConfigs(config)\r\n  const validateMaps = generateValidatorMap(mergedConfigs)\r\n  const formInputMaps = generateFormInputMap(mergedConfigs)\r\n  const quickSearchHint = config.quickSearchHint\r\n\r\n  // Component\r\n  const FilterMenu: FC<IFilterMenuProps<T>> = (props) => {\r\n    const refButton = createRef<HTMLButtonElement>()\r\n\r\n    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n    const isOpen = Boolean(anchorEl)\r\n\r\n    const context = useContext(FilterBarContext) as IFilterBarContext<T>\r\n    const filterActions = useFilterActions<T>(context)\r\n\r\n    const [fieldSelected, setFieldSelected] = useState<TFieldType<T> | null>(null)\r\n\r\n    const mergedSlots = useMemo<IFilterMenuSlots>(() => {\r\n      const { popperProps, rootProps } = config\r\n      return Object.assign({}, { popperProps, rootProps }, props.slots)\r\n    }, [config, props.slots])\r\n\r\n    const handleClose = () => {\r\n      setAnchorEl(null)\r\n      setTimeout(() => {\r\n        setFieldSelected(null)\r\n      }, 300)\r\n    }\r\n\r\n    const handleOpen = () => {\r\n      setFieldSelected(null)\r\n      setAnchorEl(refButton.current)\r\n    }\r\n\r\n    const handleMenuItemClick = (field: TFieldType<T>) => {\r\n      setFieldSelected(field)\r\n    }\r\n\r\n    const handleClearAll = () => {\r\n      filterActions.clearAllFilters()\r\n      handleClose()\r\n    }\r\n\r\n    const handleSubmit = async (key: TFieldType<T>, value?: TFieldValue, config?: IFieldMenuConfig<T>) => {\r\n      if (!value) return\r\n      if (config?.singleValue) {\r\n        filterActions.replaceFilter(key, value, { logic: value.logic })\r\n      } else {\r\n        filterActions.upsertManyFilter(key, value, { logic: value.logic })\r\n      }\r\n    }\r\n\r\n    const data = useMemo(() => {\r\n      const keys = Object.values(mergedConfigs.fields)\r\n      return Array.from(keys) as IFieldMenuConfig<T>[]\r\n    }, [mergedConfigs.fields])\r\n\r\n    const renderContent = () => {\r\n      if (data.length === 0) {\r\n        return <FilterMenuNoField onClose={handleClose} />\r\n      }\r\n\r\n      if (fieldSelected) {\r\n        const FormComponent = formInputMaps[fieldSelected] as React.ComponentType<IFilterMenuFormProps<T>>\r\n        if (!FormComponent) return null\r\n        const value = context.filterState.storeFilter?.[fieldSelected]\r\n        return (\r\n          <FormComponent\r\n            value={value}\r\n            isLoading={context.isLoading}\r\n            onRemove={filterActions.removeFilterByFieldValue}\r\n            validator={validateMaps[fieldSelected]}\r\n            onSubmit={handleSubmit}\r\n            onClose={handleClose}\r\n            onRemoveField={(f) => filterActions.removeFilter(f)}\r\n            onBack={() => setFieldSelected(null)}\r\n          />\r\n        )\r\n      }\r\n\r\n      return (\r\n        <PopperContent title='Filter by' onClose={handleClose}>\r\n          <MenuListCustom className={classes.menu}>\r\n            {data.map((item) => {\r\n              const key = item.field.toString()\r\n              if (!key) return null\r\n              const info = filterActions.getFieldInfo(item.field)\r\n              const note = info?.values.join(', ') ?? ''\r\n              const fieldCount = info ? info.values.length : 0\r\n              const suffix = fieldCount > 0 ? ` (${fieldCount})` : ''\r\n              const label = item.label ?? key.toString()\r\n              let tooltipTitle = fieldCount > 0 ? `Filter by ${label}: ${note}` : undefined\r\n              if (item.field === KeySpecial.quickSearch) {\r\n                const txt = mapSpecialTexts.qsTooltip\r\n                tooltipTitle = typeof quickSearchHint === 'function' ? quickSearchHint(txt) : (quickSearchHint ?? txt)\r\n              }\r\n              return (\r\n                <MenuItem\r\n                  key={key}\r\n                  className={classes.menuItem}\r\n                  sx={{ justifyContent: 'space-between' }}\r\n                  onClick={() => handleMenuItemClick(item.field)}\r\n                >\r\n                  <Tooltip title={tooltipTitle} placement='right' arrow>\r\n                    <div className={classes.menuItemInner}>\r\n                      <Typography variant='body2'>{label}</Typography>\r\n                      <Typography variant='caption' sx={{ ml: 1, color: 'text.secondary' }}>\r\n                        {suffix}\r\n                      </Typography>\r\n                    </div>\r\n                  </Tooltip>\r\n                </MenuItem>\r\n              )\r\n            })}\r\n          </MenuListCustom>\r\n          <PopperFooter>\r\n            <Button color='error' disabled={filterCount === 0} onClick={handleClearAll}>\r\n              Clear All\r\n            </Button>\r\n          </PopperFooter>\r\n        </PopperContent>\r\n      )\r\n    }\r\n\r\n    const filterCount = filterActions.getTotalCount()\r\n    const iconTitle = `${filterCount} Filter${filterCount !== 1 ? 's' : ''}`\r\n    return (\r\n      <ClickAwayListener onClickAway={handleClose}>\r\n        <FilterInputStyled className={classes.root} {...mergedSlots.rootProps}>\r\n          <Tooltip title={iconTitle} arrow placement='top'>\r\n            <IconButton size='small' ref={refButton} onClick={handleOpen}>\r\n              <Badge badgeContent={filterCount} color='primary' invisible={filterCount === 0}>\r\n                <FilterListIcon fontSize='small' />\r\n              </Badge>\r\n            </IconButton>\r\n          </Tooltip>\r\n          <PopperCustom open={isOpen} anchorEl={anchorEl} placement='bottom' transition disablePortal {...mergedSlots.popperProps}>\r\n            {renderContent()}\r\n          </PopperCustom>\r\n        </FilterInputStyled>\r\n      </ClickAwayListener>\r\n    )\r\n  }\r\n  return FilterMenu\r\n}\r\n\r\n// styles\r\nexport const filterMenuClasses = {\r\n  root: 'DinoFilterMenu-root',\r\n  input: 'DinoFilterMenu-input',\r\n  beforeInput: 'DinoFilterMenu-beforeInput',\r\n  menu: 'DinoFilterMenu-menu',\r\n  menuItem: 'DinoFilterMenu-menuItem',\r\n  menuItemInner: 'DinoFilterMenu-menuItemInner'\r\n}\r\n\r\nconst FilterInputStyled = styled(Box)({\r\n  [`&.${filterMenuClasses.root}`]: {\r\n    display: 'inline-flex',\r\n    justifyContent: 'center',\r\n    alignItems: 'center',\r\n    flex: '0 0 auto'\r\n  }\r\n})\r\n\r\nconst MenuListCustom = styled(MenuList)({\r\n  [`.${filterMenuClasses.menuItem}`]: {\r\n    paddingTop: 0,\r\n    paddingBottom: 0\r\n  },\r\n  [`.${filterMenuClasses.menuItemInner}`]: {\r\n    display: 'flex',\r\n    justifyContent: 'space-between',\r\n    alignItems: 'center',\r\n    width: '100%',\r\n    gap: '4px',\r\n    paddingTop: '6px',\r\n    paddingBottom: '6px'\r\n  }\r\n})\r\n"],"names":["createFilterMenu","config","classes","filterMenuClasses","mergedConfigs","fields","validation","_config$enableQuickSe","enableQuickSearch","rest","_objectWithoutProperties","_excluded","qsKey","KeySpecial","quickSearch","mergedFields","_objectSpread","item","label","mapSpecialLabel","temp","Object","assign","field","singleValue","keys","finalFields","reduce","acc","key","fieldConfig","mergedValidation","forEach","_ref","_item$label","_mergedFields$key","toString","Rules","some","r","rule","SingleRuleValidate","Required","push","generateConfigs","validateMaps","_config$validation","fieldKey","FormValidator","_defineProperty","generateValidatorMap","formInputMaps","_fieldConfig$form","form","createFormFieldString","generateFormInputMap","quickSearchHint","props","refButton","createRef","_useState","useState","_useState2","_slicedToArray","anchorEl","setAnchorEl","isOpen","Boolean","context","useContext","FilterBarContext","filterActions","useFilterActions","_useState3","_useState4","fieldSelected","setFieldSelected","mergedSlots","useMemo","popperProps","rootProps","slots","handleClose","setTimeout","handleClearAll","clearAllFilters","handleSubmit","_ref2","_asyncToGenerator","_regenerator","m","_callee","value","w","_context","n","a","replaceFilter","logic","upsertManyFilter","_x","_x2","_x3","apply","this","arguments","data","values","Array","from","filterCount","getTotalCount","iconTitle","concat","_jsx","ClickAwayListener","onClickAway","children","_jsxs","FilterInputStyled","className","root","Tooltip","title","arrow","placement","IconButton","size","ref","onClick","current","Badge","badgeContent","color","invisible","FilterListIcon","fontSize","PopperCustom","open","transition","disablePortal","length","FilterMenuNoField","onClose","_context$filterState$","FormComponent","filterState","storeFilter","isLoading","onRemove","removeFilterByFieldValue","validator","onSubmit","onRemoveField","f","removeFilter","onBack","PopperContent","MenuListCustom","menu","map","_info$values$join","_item$label2","info","getFieldInfo","note","join","fieldCount","suffix","tooltipTitle","undefined","txt","mapSpecialTexts","qsTooltip","MenuItem","menuItem","sx","justifyContent","menuItemInner","Typography","variant","ml","PopperFooter","Button","disabled","renderContent","styled","Box","display","alignItems","flex","MenuList","paddingTop","paddingBottom","width","gap"],"mappings":"yiCA4FM,SAAUA,EAAoBC,GAClC,IAAMC,EAAUC,EACVC,EAzCR,SAA4BH,GAC1B,IAAQI,EAA0DJ,EAA1DI,OAAQC,EAAkDL,EAAlDK,WAAUC,EAAwCN,EAAtCO,kBAAAA,OAAoB,IAAHD,GAAOA,EAAKE,EAAIC,EAAKT,EAAMU,GAClEC,EAAQC,EAAWC,YAGnBC,EAAYC,EAAA,CAAA,EAA8BX,GAChD,GAAIG,EAAmB,CACrB,IAAMS,EAAOF,EAAaH,GACpBM,EAAQD,SAAAA,EAAMC,MAAQD,EAAKC,MAAQC,EAAgBP,GACnDQ,EAAOC,OAAOC,OAAO,CAAA,EAAIP,EAAaH,GAAQ,CAAEW,MAAOX,EAAOM,MAAAA,EAAOM,aAAa,IACxFT,EAAaH,GAASQ,CACvB,aACQL,EAAaH,GAGtB,IAAMa,EAAOJ,OAAOI,KAAKV,GACnBW,EAAcD,EAAKE,OAA6B,SAACC,EAAKC,GAC1D,IAAMC,EAAcf,EAAac,GACjC,OAAKC,GACLF,EAAIC,GAAIb,EAAAA,KAAQc,GAAW,GAAA,CAAEP,MAAOM,IAC7BD,GAFkBA,CAG1B,EAAE,IAGGG,EAAgBf,EAAA,CAAA,EAA4DV,GAYlF,OAXAmB,EAAKO,QAAQ,SAACH,GAAO,IAAAI,EAAAC,EAAAC,EACblB,EAA+Dc,EAAiBF,GAChFX,EAA+Ce,QAA1CA,UAAAC,EAAGjB,aAAI,EAAJA,EAAMC,aAAK,IAAAgB,EAAAA,UAAAC,EAAIpB,EAAac,UAAI,IAAAM,OAAA,EAAjBA,EAAmBjB,iBAAKe,EAAAA,EAAIJ,EAAIO,WACxDnB,EAEOA,EAAKoB,MAAMC,KAAK,SAACC,GAAC,OAAKA,EAAEC,OAASC,EAAmBC,QAAQ,KACvEzB,EAAKC,MAAQA,EACbD,EAAKoB,MAAMM,KAAK,CAAEH,KAAMC,EAAmBC,YAH3CX,EAAiBF,GAAO,CAAEQ,MAAO,CAAC,CAAEG,KAAMC,EAAmBC,WAAaxB,MAAAA,EAK9E,GAEAF,EAAAA,EAAA,CAAA,EAAYP,GAAI,CAAA,EAAA,CAAEJ,OAAQqB,EAAapB,WAAYyB,EAAkBvB,kBAAAA,GACvE,CAIwBoC,CAAgB3C,GAChC4C,EAzER,SAAiC5C,GAa/B,OAZaoB,OAAOI,KAAKxB,EAAOI,QACNsB,OACxB,SAACC,EAAKC,GAAO,IAAAiB,EACLC,EAAWlB,EACXC,EAA+B,QAApBgB,EAAG7C,EAAOK,kBAAU,IAAAwC,OAAA,EAAjBA,EAAoBC,GAIxC,OAHIjB,IACFF,EAAImB,GAAY,IAAIC,EAAaC,EAAIF,GAAAA,EAAWjB,KAE3CF,CACR,EACD,GAGJ,CA2DuBsB,CAAqB9C,GACpC+C,EA1DR,SAAiClD,GAC/B,IAAQI,EAAWJ,EAAXI,OAWR,OAVagB,OAAOI,KAAKpB,GACEsB,OACzB,SAACC,EAAKC,GAAO,IAAAuB,EACLL,EAAWlB,EACXC,EAAczB,EAAO0C,GAE3B,OADIjB,IAAaF,EAAImB,GAA4B,QAAnBK,EAAGtB,EAAYuB,YAAID,IAAAA,EAAAA,EAAIE,EAAsBxB,IACpEF,CACR,EACD,GAGJ,CA6CwB2B,CAAqBnD,GACrCoD,EAAkBvD,EAAOuD,gBA4I/B,OAzI4C,SAACC,GAC3C,IAAMC,EAAYC,IAElBC,EAAgCC,EAA6B,MAAKC,EAAAC,EAAAH,EAAA,GAA3DI,EAAQF,EAAA,GAAEG,EAAWH,EAAA,GACtBI,EAASC,QAAQH,GAEjBI,EAAUC,EAAWC,GACrBC,EAAgBC,EAAoBJ,GAE1CK,EAA0CZ,EAA+B,MAAKa,EAAAX,EAAAU,EAAA,GAAvEE,EAAaD,EAAA,GAAEE,EAAgBF,EAAA,GAEhCG,EAAcC,EAA0B,WAC5C,IAAQC,EAA2B9E,EAA3B8E,YAAaC,EAAc/E,EAAd+E,UACrB,OAAO3D,OAAOC,OAAO,GAAI,CAAEyD,YAAAA,EAAaC,UAAAA,GAAavB,EAAMwB,MAC5D,EAAE,CAAChF,EAAQwD,EAAMwB,QAEZC,EAAc,WAClBjB,EAAY,MACZkB,WAAW,WACTP,EAAiB,KAClB,EAAE,IACJ,EAWKQ,EAAiB,WACrBb,EAAcc,kBACdH,GACD,EAEKI,EAAY,WAAA,IAAAC,EAAAC,EAAAC,IAAAC,EAAG,SAAAC,EAAO9D,EAAoB+D,EAAqB3F,GAA4B,OAAAwF,IAAAI,EAAA,SAAAC,GAAA,cAAAA,EAAAC,GAAA,KAAA,EAAA,GAC1FH,EAAK,CAAAE,EAAAC,EAAA,EAAA,KAAA,CAAA,OAAAD,EAAAE,EAAA,GAAA,KAAA,EACN/F,SAAAA,EAAQuB,YACV+C,EAAc0B,cAAcpE,EAAK+D,EAAO,CAAEM,MAAON,EAAMM,QAEvD3B,EAAc4B,iBAAiBtE,EAAK+D,EAAO,CAAEM,MAAON,EAAMM,QAC3D,KAAA,EAAA,OAAAJ,EAAAE,EAAA,GAAA,EAAAL,MACF,OAAA,SAPiBS,EAAAC,EAAAC,GAAA,OAAAf,EAAAgB,MAAAC,KAAAC,UAAA,EAAA,GASZC,EAAO5B,EAAQ,WACnB,IAAMrD,EAAOJ,OAAOsF,OAAOvG,EAAcC,QACzC,OAAOuG,MAAMC,KAAKpF,EACpB,EAAG,CAACrB,EAAcC,SAqEZyG,EAAcvC,EAAcwC,gBAC5BC,EAAS,GAAAC,OAAMH,EAAWG,WAAAA,OAA0B,IAAhBH,EAAoB,IAAM,IACpE,OACEI,EAACC,EAAiB,CAACC,YAAalC,EAC9BmC,SAAAC,EAACC,EAAiBvG,EAAAA,EAAA,CAACwG,UAAWtH,EAAQuH,MAAU5C,EAAYG,WAAS,GAAA,CAAAqC,SAAA,CACnEH,EAACQ,EAAQ,CAAAC,MAAOX,EAAWY,OAAK,EAACC,UAAU,MACzCR,SAAAH,EAACY,EAAU,CAACC,KAAK,QAAQC,IAAKtE,EAAWuE,QArG9B,WACjBrD,EAAiB,MACjBX,EAAYP,EAAUwE,QACvB,EAkGmEb,SAC1DH,EAACiB,EAAM,CAAAC,aAActB,EAAauB,MAAM,UAAUC,UAA2B,IAAhBxB,EAAiBO,SAC5EH,EAACqB,EAAc,CAACC,SAAS,gBAI/BtB,EAACuB,EAAYzH,EAAAA,EAAA,CAAC0H,KAAMxE,EAAQF,SAAUA,EAAU6D,UAAU,SAASc,YAAU,EAACC,eAAkB,GAAA/D,EAAYE,aAAW,GAAA,CACpHsC,SAhFa,WACpB,GAAoB,IAAhBX,EAAKmC,OACP,OAAO3B,EAAC4B,EAAiB,CAACC,QAAS7D,IAGrC,GAAIP,EAAe,CAAA,IAAAqE,EACXC,EAAgB9F,EAAcwB,GACpC,IAAKsE,EAAe,OAAO,KAC3B,IAAMrD,UAAKoD,EAAG5E,EAAQ8E,YAAYC,mBAAW,IAAAH,OAAA,EAA/BA,EAAkCrE,GAChD,OACEuC,EAAC+B,EAAa,CACZrD,MAAOA,EACPwD,UAAWhF,EAAQgF,UACnBC,SAAU9E,EAAc+E,yBACxBC,UAAW1G,EAAa8B,GACxB6E,SAAUlE,EACVyD,QAAS7D,EACTuE,cAAe,SAACC,GAAC,OAAKnF,EAAcoF,aAAaD,EAAE,EACnDE,OAAQ,WAAF,OAAQhF,EAAiB,KAAK,GAGzC,CAED,OACE0C,EAACuC,EAAa,CAAClC,MAAM,YAAYoB,QAAS7D,EAAWmC,SAAA,CACnDH,EAAC4C,EAAe,CAAAtC,UAAWtH,EAAQ6J,KAChC1C,SAAAX,EAAKsD,IAAI,SAAC/I,GAAQ,IAAAgJ,EAAAC,EACXrI,EAAMZ,EAAKM,MAAMa,WACvB,IAAKP,EAAK,OAAO,KACjB,IAAMsI,EAAO5F,EAAc6F,aAAanJ,EAAKM,OACvC8I,UAAIJ,EAAGE,eAAAA,EAAMxD,OAAO2D,KAAK,aAAK,IAAAL,EAAAA,EAAI,GAClCM,EAAaJ,EAAOA,EAAKxD,OAAOkC,OAAS,EACzC2B,EAASD,EAAa,OAACtD,OAAQsD,EAAU,KAAM,GAC/CrJ,EAAkB,QAAbgJ,EAAGjJ,EAAKC,aAAK,IAAAgJ,EAAAA,EAAIrI,EAAIO,WAC5BqI,EAAeF,EAAa,EAACtD,aAAAA,OAAgB/F,EAAK+F,MAAAA,OAAKoD,QAASK,EACpE,GAAIzJ,EAAKM,QAAUV,EAAWC,YAAa,CACzC,IAAM6J,EAAMC,EAAgBC,UAC5BJ,EAA0C,mBAApBjH,EAAiCA,EAAgBmH,GAAQnH,QAAAA,EAAmBmH,CACnG,CACD,OACEzD,EAAC4D,GAECtD,UAAWtH,EAAQ6K,SACnBC,GAAI,CAAEC,eAAgB,iBACtBhD,QAAS,WAAF,OAnEQ1G,EAmEoBN,EAAKM,WAlEpDqD,EAAiBrD,GADS,IAACA,CAmE+B,EAE9C8F,SAAAH,EAACQ,EAAQ,CAAAC,MAAO8C,EAAc5C,UAAU,QAAQD,OAAK,EAAAP,SACnDC,EAAK,MAAA,CAAAE,UAAWtH,EAAQgL,cACtB7D,SAAA,CAAAH,EAACiE,EAAW,CAAAC,QAAQ,QAAO/D,SAAEnG,IAC7BgG,EAACiE,EAAU,CAACC,QAAQ,UAAUJ,GAAI,CAAEK,GAAI,EAAGhD,MAAO,kBAC/ChB,SAAAmD,UATF3I,EAeV,KAEHqF,EAACoE,EACC,CAAAjE,SAAAH,EAACqE,EAAM,CAAClD,MAAM,QAAQmD,SAA0B,IAAhB1E,EAAmBmB,QAAS7C,EAEnDiC,SAAA,kBAIhB,CAeQoE,WAKV,CAEH,CAGO,IAAMtL,EAAoB,CAC/BsH,KAAM,sBAGNsC,KAAM,sBACNgB,SAAU,0BACVG,cAAe,gCAGX3D,EAAoBmE,EAAOC,EAAPD,CAAWzI,EAAA,GAAA,KAAAgE,OAC7B9G,EAAkBsH,MAAS,CAC/BmE,QAAS,cACTX,eAAgB,SAChBY,WAAY,SACZC,KAAM,cAIJhC,EAAiB4B,EAAOK,EAAPL,CAAgBzI,EAAAA,SAAAgE,OAChC9G,EAAkB4K,UAAa,CAClCiB,WAAY,EACZC,cAAe,QAChBhF,OACI9G,EAAkB+K,eAAkB,CACvCU,QAAS,OACTX,eAAgB,gBAChBY,WAAY,SACZK,MAAO,OACPC,IAAK,MACLH,WAAY,MACZC,cAAe"}

package/dist/src/filter-bar/components/filter-sort.js

@@ -1,2 +1,2 @@
-import{defineProperty as o,objectSpread2 as r,slicedToArray as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as n,jsxs as i}from"react/jsx-runtime";import{useState as t,useContext as l,useMemo as a,createRef as c}from"react";import{styled as s,Box as d,Tooltip as m,IconButton as u,Badge as p,MenuList as f,MenuItem as v,Typography as h,Button as b}from"@mui/material";import S from"@mui/icons-material/Check";import g from"@mui/icons-material/SwapVert";import I from"@mui/icons-material/ArrowUpward";import j from"@mui/material/ClickAwayListener";import w from"@mui/icons-material/ArrowDownward";import{KeySpecial as y}from"../types.js";import{useFilterActions as x}from"./hooks.js";import{mapSpecialLabel as C}from"../helpers.js";import{FilterBarContext as D}from"../index.context.js";import{PopperCustom as P,PopperContent as k,PopperFooter as R}from"./popper-custom.js";var z={asc:"Ascending",desc:"Descending"},A=function(o){return o?z[o]:""},B={asc:n(I,{fontSize:"small"}),desc:n(w,{fontSize:"small"})},F=function(o){return o?B[o]:null};function N(o){var s=T,d=function(o){var n=o.fields,i=o.enableSortRandom,t=void 0!==i&&i,l=r({},n),a=l[y.sortRandom];if(t&&!1!==(null==a?void 0:a.visible)){var c={field:y.sortRandom,label:C.sortRandom,enableDirection:!1},s=Object.assign(c,a);l[y.sortRandom]=s}var d=[];return Object.entries(l).forEach(function(o){var r=e(o,2),n=r[0],i=r[1],t={field:n,label:null==i?void 0:i.label};!1===(null==i?void 0:i.enableDirection)&&(t.enableDirection=!1),!1!==(null==i?void 0:i.visible)&&d.push(t)}),d.sort(function(o,r){return o.field===y.sortRandom?-1:r.field===y.sortRandom?1:0}),d}(o);return function(I){var w=c(),y=t(null),C=e(y,2),z=C[0],B=C[1],N=Boolean(z),T=l(D),E=x(T),_=E.getSort,H=E.changeSort,L=E.removeSort,M=a(function(){var r,e=_(),n=Boolean(e),i=o.fields[null==e?void 0:e.field],t=null!==(r=null==i?void 0:i.label)&&void 0!==r?r:null==e?void 0:e.field.toString(),l=n?"Sorted by ".concat(t," ").concat(null==e?void 0:e.direction):"Sort";return{field:null==e?void 0:e.field,direction:null==e?void 0:e.direction,hasSort:n,title:l}},[_]),U=a(function(){var e,n,i=r(r({},I.slots),{},{rootProps:r(r({},null===(e=I.slots)||void 0===e?void 0:e.rootProps),{},{sx:r(r({},I.sx),null===(n=I.slots)||void 0===n||null===(n=n.rootProps)||void 0===n?void 0:n.sx)})});return Object.assign({popperProps:{},rootProps:{}},o,i)},[I.slots,I.sx]),V=function(){B(null)};return n(j,{onClickAway:V,children:i(O,r(r({className:s.root},U.rootProps),{},{children:[n(m,{title:null==M?void 0:M.title,arrow:!0,children:n(u,{size:"small",ref:w,onClick:function(){B(w.current)},children:n(p,{variant:"dot",color:"primary",invisible:!(null!=M&&M.hasSort),children:n(g,{fontSize:"small"})})})}),n(P,r(r({open:N,anchorEl:z,placement:"bottom",transition:!0,disablePortal:!0},U.popperProps),{},{children:i(k,{title:"Sort by",onClose:V,children:[n(f,{className:s.menu,children:d.map(function(o){var r,e=o.field.toString();if(!e)return null;var t=null!==(r=o.label)&&void 0!==r?r:e.toString(),l=(null==M?void 0:M.field)===o.field,a=l?M.direction:void 0,c=!1===o.enableDirection&&l;return n(v,{className:s.menuItem,sx:{justifyContent:"space-between"},onClick:function(){return r=o.field,V(),void setTimeout(function(){H(r)},100);var r},selected:l,children:n(m,{title:A(a),placement:"right",arrow:!0,children:i("div",{className:s.menuItemInner,children:[n(h,{variant:"body2",children:t}),c?n(S,{fontSize:"small",color:"success"}):F(a)]})})},e)})}),i(R,{children:[n(b,{color:"inherit",onClick:L,children:"Clear"}),n(b,{color:"primary",onClick:V,children:"Done"})]})]})}))]}))})}}var T={root:"DinoFilterSort-root",menu:"DinoFilterSort-menu",menuItem:"DinoFilterSort-menuItem",menuItemInner:"DinoFilterSort-menuItemInner"},O=s(d)(function(r){var e=r.theme;return o(o(o({},"&.".concat(T.menu),{minWidth:"200px",padding:0}),".".concat(T.menuItem),o({paddingTop:0,paddingBottom:0,"&:not(:last-child)":{borderBottom:"1px solid var(--color-divider, rgba(145 160 170 / 10%))"}},".MuiSvgIcon-root",{fontSize:16})),".".concat(T.menuItemInner),{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",gap:e.spacing(1),paddingTop:e.spacing(.75),paddingBottom:e.spacing(.75)})});export{O as FilterSortStyled,N as createFilterSort,T as filterSortClasses,F as getSortDirectionIcon,A as getSortDirectionLabel,B as mapSortDirectionIcon,z as mapSortDirectionLabel};
+import{defineProperty as o,objectSpread2 as r,slicedToArray as n}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as t,jsxs as e,Fragment as i}from"react/jsx-runtime";import{useState as l,useContext as a,useMemo as c,createRef as s}from"react";import{styled as u,Box as d,Tooltip as m,IconButton as f,Badge as p,MenuList as h,MenuItem as v,Typography as S,Button as g}from"@mui/material";import b from"@mui/icons-material/SwapVert";import y from"@mui/icons-material/ArrowUpward";import w from"@mui/material/ClickAwayListener";import I from"@mui/icons-material/ArrowDownward";import{KeySpecial as j}from"../types.js";import{ShufffleIcon as P}from"./units.js";import{useFilterActions as x}from"../hooks.js";import{mapSpecialLabel as C}from"../helpers.js";import{FilterBarContext as k}from"../index.context.js";import{PopperCustom as z,PopperContent as D,PopperFooter as A}from"./popper-custom.js";var B={asc:"Ascending",desc:"Descending"},F=function(o){return o?B[o]:""},N={asc:t(y,{fontSize:"small"}),desc:t(I,{fontSize:"small"})},T=function(o){return o?N[o]:null};function O(o){var u=o.enableShuffle,d=o.shufflePosition,y=void 0===d?"right":d,I=E,B=function(o){var t=o.fields,e=r({},t),i=[];return Object.entries(e).forEach(function(o){var r=n(o,2),t=r[0],e=r[1];i.push({field:t,label:null==e?void 0:e.label})}),i}(o);return function(d){var N=s(),O=l(null),E=n(O,2),H=E[0],L=E[1],M=Boolean(H),U=a(k),V=x(U),W=V.getSort,q=V.changeSort,G=V.removeSort,J=c(function(){var r,n=W(),t=(null==n?void 0:n.field)===j.sortShuffle,e=Boolean(null==n?void 0:n.field)&&!t,i=o.fields[null==n?void 0:n.field],l=null!==(r=null==i?void 0:i.label)&&void 0!==r?r:null==n?void 0:n.field.toString(),a=e?"Sorted by ".concat(l," ").concat(null==n?void 0:n.direction):"Sort";return{field:null==n?void 0:n.field,direction:null==n?void 0:n.direction,hasSort:e,hasShuffleSort:t,title:a}},[W]),K=c(function(){var n,t,e=r(r({},d.slots),{},{rootProps:r(r({},null===(n=d.slots)||void 0===n?void 0:n.rootProps),{},{sx:r(r({},d.sx),null===(t=d.slots)||void 0===t||null===(t=t.rootProps)||void 0===t?void 0:t.sx)})});return Object.assign({popperProps:{},rootProps:{}},o,e)},[d.slots,d.sx]),Q=function(){L(null)},R=function(){Q(),setTimeout(function(){G()},100)},X=function(){if(!u)return null;var o=C[j.sortShuffle],n=null!=J&&J.hasShuffleSort?"ON":"OFF",e=null!=J&&J.hasShuffleSort?"primary":"default";return t(m,{title:"".concat(o," - ").concat(n),arrow:!0,placement:"top",children:t(f,r(r({color:e,size:"small",onClick:function(){return q(j.sortShuffle)}},K.buttonShuffleProps),{},{children:t(p,{variant:"dot",color:"primary",invisible:!(null!=J&&J.hasShuffleSort),children:t(P,{fontSize:"small"})})}))})};return e(i,{children:["left"===y&&X(),t(w,{onClickAway:Q,children:e(_,r(r({className:I.root},K.rootProps),{},{children:[t(m,{title:null==J?void 0:J.title,arrow:!0,placement:"top",children:t(f,r(r({size:"small",ref:N,onClick:function(){L(N.current)}},K.buttonSortProps),{},{children:t(p,{variant:"dot",color:"primary",invisible:!(null!=J&&J.hasSort),children:t(b,{fontSize:"small"})})}))}),t(z,r(r({open:M,anchorEl:H,placement:"bottom",transition:!0,disablePortal:!0},K.popperProps),{},{children:e(D,{title:"Sort by",onClose:Q,children:[t(h,{className:I.menu,children:B.map(function(o){var r,n=o.field.toString();if(!n)return null;var i=null!==(r=o.label)&&void 0!==r?r:n.toString(),l=(null==J?void 0:J.field)===o.field,a=l?J.direction:void 0;return t(v,{className:I.menuItem,sx:{justifyContent:"space-between"},onClick:function(){return r=o.field,Q(),void setTimeout(function(){q(r)},100);var r},selected:l,children:t(m,{title:F(a),placement:"right",arrow:!0,children:e("div",{className:I.menuItemInner,children:[t(S,{variant:"body2",children:i}),T(a)]})})},n)})}),e(A,{children:[t(g,{color:"inherit",onClick:R,children:"Clear"}),t(g,{color:"primary",onClick:Q,children:"Done"})]})]})}))]}))}),"right"===y&&X()]})}}var E={root:"DinoFilterSort-root",menu:"DinoFilterSort-menu",menuItem:"DinoFilterSort-menuItem",menuItemInner:"DinoFilterSort-menuItemInner"},_=u(d)(function(r){var n=r.theme;return o(o(o({},"&.".concat(E.menu),{minWidth:"200px",padding:0}),".".concat(E.menuItem),o({paddingTop:0,paddingBottom:0,"&:not(:last-child)":{borderBottom:"1px solid var(--color-divider, rgba(145 160 170 / 10%))"}},".MuiSvgIcon-root",{fontSize:16})),".".concat(E.menuItemInner),{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",gap:n.spacing(1),paddingTop:n.spacing(.75),paddingBottom:n.spacing(.75)})});export{_ as FilterSortStyled,O as createFilterSort,E as filterSortClasses,T as getSortDirectionIcon,F as getSortDirectionLabel,N as mapSortDirectionIcon,B as mapSortDirectionLabel};
 //# sourceMappingURL=filter-sort.js.map

package/dist/src/filter-bar/components/filter-sort.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-sort.js","sources":["../../../../src/filter-bar/components/filter-sort.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { createRef, useContext, useMemo, useState } from 'react'\r\nimport { Badge, Box, Button, IconButton, MenuItem, MenuList, styled, Tooltip, Typography } from '@mui/material'\r\nimport CheckIcon from '@mui/icons-material/Check'\r\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\r\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\r\nimport { KeySpecial } from '../types'\r\nimport { useFilterActions } from './hooks'\r\nimport { mapSpecialLabel } from '../helpers'\r\nimport { FilterBarContext } from '../index.context'\r\nimport { FieldSortDirection } from './filter-sort.types'\r\nimport { PopperContent, PopperCustom, PopperFooter } from './popper-custom'\r\n// types\r\nimport type { FC, ReactNode } from 'react'\r\nimport type { TFieldType } from '../types'\r\nimport type { IFilterBarContext } from '../index.context'\r\nimport type { IFieldSort, IFilterSortConfig, IFilterSortProps, TFieldSorts } from './filter-sort.types'\r\n\r\nexport const mapSortDirectionLabel: { [key in FieldSortDirection]: string } = {\r\n  asc: 'Ascending',\r\n  desc: 'Descending'\r\n}\r\n\r\nexport const getSortDirectionLabel = (direction?: FieldSortDirection): string => {\r\n  if (!direction) return ''\r\n  return mapSortDirectionLabel[direction]\r\n}\r\n\r\nexport const mapSortDirectionIcon: { [key in FieldSortDirection]: ReactNode } = {\r\n  asc: <ArrowUpwardIcon fontSize='small' />,\r\n  desc: <ArrowDownwardIcon fontSize='small' />\r\n}\r\n\r\nexport const getSortDirectionIcon = (direction?: FieldSortDirection): ReactNode => {\r\n  if (!direction) return null\r\n  return mapSortDirectionIcon[direction]\r\n}\r\n\r\nfunction generateSortOptions<T>(config: IFilterSortConfig<T>): IFieldSort<T>[] {\r\n  const { fields, enableSortRandom = false } = config\r\n  const obj = { ...fields }\r\n  const randomItem = obj[KeySpecial.sortRandom]\r\n  if (enableSortRandom && randomItem?.visible !== false) {\r\n    const dRandomField: IFieldSort<T> = { field: KeySpecial.sortRandom, label: mapSpecialLabel.sortRandom, enableDirection: false }\r\n    const mergedRandomField = Object.assign(dRandomField, randomItem)\r\n    obj[KeySpecial.sortRandom] = mergedRandomField\r\n  }\r\n\r\n  const options: IFieldSort<T>[] = []\r\n  Object.entries(obj).forEach(([key, value]) => {\r\n    const temp: IFieldSort<T> = { field: key as TFieldType<T>, label: value?.label }\r\n    if (value?.enableDirection === false) {\r\n      temp.enableDirection = false\r\n    }\r\n    if (value?.visible === false) return\r\n    options.push(temp)\r\n  })\r\n  // Sort random option to the top\r\n  options.sort((a, b) => {\r\n    if (a.field === KeySpecial.sortRandom) return -1\r\n    if (b.field === KeySpecial.sortRandom) return 1\r\n    return 0\r\n  })\r\n  return options\r\n}\r\n\r\nexport function createFilterSort<T>(config: IFilterSortConfig<T>) {\r\n  const classes = filterSortClasses\r\n  const options = generateSortOptions(config)\r\n\r\n  const FilterSort: FC<IFilterSortProps<T>> = (props) => {\r\n    const refButton = createRef<HTMLButtonElement>()\r\n\r\n    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n    const isOpen = Boolean(anchorEl)\r\n\r\n    const context = useContext(FilterBarContext) as IFilterBarContext<T>\r\n    const { getSort, changeSort, removeSort } = useFilterActions<T>(context)\r\n\r\n    const sortInfo = useMemo(() => {\r\n      const obj = getSort()\r\n      const hasSort = Boolean(obj)\r\n      const item = config.fields[obj?.field as TFieldType<T>]\r\n      const label = item?.label ?? obj?.field.toString()\r\n      const title = hasSort ? `Sorted by ${label} ${obj?.direction}` : 'Sort'\r\n      return { field: obj?.field, direction: obj?.direction, hasSort, title }\r\n    }, [getSort])\r\n\r\n    const mergedSlots = useMemo(() => {\r\n      const slotsProps = { ...props.slots, rootProps: { ...props.slots?.rootProps, sx: { ...props.sx, ...props.slots?.rootProps?.sx } } }\r\n      return Object.assign({ popperProps: {}, rootProps: {} }, config, slotsProps)\r\n    }, [props.slots, props.sx])\r\n\r\n    const handleClose = () => {\r\n      setAnchorEl(null)\r\n    }\r\n\r\n    const handleOpen = () => {\r\n      setAnchorEl(refButton.current)\r\n    }\r\n\r\n    const handleMenuItemClick = (field: TFieldType<T>) => {\r\n      handleClose()\r\n      setTimeout(() => {\r\n        changeSort(field)\r\n      }, 100)\r\n    }\r\n\r\n    const renderContent = () => (\r\n      <PopperContent title='Sort by' onClose={handleClose}>\r\n        <MenuList className={classes.menu}>\r\n          {options.map((item) => {\r\n            const key = item.field.toString()\r\n            if (!key) return null\r\n            const label = item.label ?? key.toString()\r\n            const isActive = sortInfo?.field === item.field\r\n            const direction = isActive ? sortInfo.direction : undefined\r\n            const isRandom = item.enableDirection === false && isActive\r\n            return (\r\n              <MenuItem\r\n                key={key}\r\n                className={classes.menuItem}\r\n                sx={{ justifyContent: 'space-between' }}\r\n                onClick={() => handleMenuItemClick(item.field)}\r\n                selected={isActive}\r\n              >\r\n                <Tooltip title={getSortDirectionLabel(direction)} placement='right' arrow>\r\n                  <div className={classes.menuItemInner}>\r\n                    <Typography variant='body2'>{label}</Typography>\r\n                    {isRandom ? <CheckIcon fontSize='small' color='success' /> : getSortDirectionIcon(direction)}\r\n                  </div>\r\n                </Tooltip>\r\n              </MenuItem>\r\n            )\r\n          })}\r\n        </MenuList>\r\n        <PopperFooter>\r\n          <Button color='inherit' onClick={removeSort}>\r\n            Clear\r\n          </Button>\r\n          <Button color='primary' onClick={handleClose}>\r\n            Done\r\n          </Button>\r\n        </PopperFooter>\r\n      </PopperContent>\r\n    )\r\n\r\n    return (\r\n      <ClickAwayListener onClickAway={handleClose}>\r\n        <FilterSortStyled className={classes.root} {...mergedSlots.rootProps}>\r\n          <Tooltip title={sortInfo?.title} arrow>\r\n            <IconButton size='small' ref={refButton} onClick={handleOpen}>\r\n              <Badge variant='dot' color='primary' invisible={!sortInfo?.hasSort}>\r\n                <SwapVertIcon fontSize='small' />\r\n              </Badge>\r\n            </IconButton>\r\n          </Tooltip>\r\n          <PopperCustom open={isOpen} anchorEl={anchorEl} placement='bottom' transition disablePortal {...mergedSlots.popperProps}>\r\n            {renderContent()}\r\n          </PopperCustom>\r\n        </FilterSortStyled>\r\n      </ClickAwayListener>\r\n    )\r\n  }\r\n\r\n  return FilterSort\r\n}\r\n\r\n// styles\r\nexport const filterSortClasses = {\r\n  root: 'DinoFilterSort-root',\r\n  menu: 'DinoFilterSort-menu',\r\n  menuItem: 'DinoFilterSort-menuItem',\r\n  menuItemInner: 'DinoFilterSort-menuItemInner'\r\n}\r\n\r\nexport const FilterSortStyled = styled(Box)(({ theme }) => ({\r\n  [`&.${filterSortClasses.menu}`]: { minWidth: '200px', padding: 0 },\r\n  [`.${filterSortClasses.menuItem}`]: {\r\n    paddingTop: 0,\r\n    paddingBottom: 0,\r\n    '&:not(:last-child)': {\r\n      borderBottom: '1px solid var(--color-divider, rgba(145 160 170 / 10%))'\r\n    },\r\n    [`.MuiSvgIcon-root`]: { fontSize: 16 }\r\n  },\r\n  [`.${filterSortClasses.menuItemInner}`]: {\r\n    width: '100%',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    gap: theme.spacing(1),\r\n    paddingTop: theme.spacing(0.75),\r\n    paddingBottom: theme.spacing(0.75)\r\n  }\r\n}))\r\n"],"names":["mapSortDirectionLabel","asc","desc","getSortDirectionLabel","direction","mapSortDirectionIcon","_jsx","ArrowUpwardIcon","fontSize","ArrowDownwardIcon","getSortDirectionIcon","createFilterSort","config","classes","filterSortClasses","options","fields","_config$enableSortRan","enableSortRandom","obj","_objectSpread","randomItem","KeySpecial","sortRandom","visible","dRandomField","field","label","mapSpecialLabel","enableDirection","mergedRandomField","Object","assign","entries","forEach","_ref","_ref2","_slicedToArray","key","value","temp","push","sort","a","b","generateSortOptions","props","refButton","createRef","_useState","useState","_useState2","anchorEl","setAnchorEl","isOpen","Boolean","context","useContext","FilterBarContext","_useFilterActions","useFilterActions","getSort","changeSort","removeSort","sortInfo","useMemo","_item$label","hasSort","item","toString","title","concat","mergedSlots","_props$slots","_props$slots2","slotsProps","slots","rootProps","sx","popperProps","handleClose","ClickAwayListener","onClickAway","children","_jsxs","FilterSortStyled","className","root","Tooltip","arrow","IconButton","size","ref","onClick","current","Badge","variant","color","invisible","SwapVertIcon","PopperCustom","open","placement","transition","disablePortal","PopperContent","onClose","MenuList","menu","map","_item$label2","isActive","undefined","isRandom","MenuItem","menuItem","justifyContent","setTimeout","selected","menuItemInner","Typography","CheckIcon","PopperFooter","Button","styled","Box","_ref3","theme","_defineProperty","minWidth","padding","paddingTop","paddingBottom","borderBottom","width","display","alignItems","gap","spacing"],"mappings":"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"}
+{"version":3,"file":"filter-sort.js","sources":["../../../../src/filter-bar/components/filter-sort.tsx"],"sourcesContent":["// Copyright (c) 2024-present, Dinocollab Technologies, Inc. and its affiliates. All rights reserved.\r\n\r\n// imports\r\nimport { createRef, useContext, useMemo, useState } from 'react'\r\nimport { Badge, Box, Button, IconButton, MenuItem, MenuList, styled, Tooltip, Typography } from '@mui/material'\r\nimport SwapVertIcon from '@mui/icons-material/SwapVert'\r\nimport ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'\r\nimport { KeySpecial } from '../types'\r\nimport { ShufffleIcon } from './units'\r\nimport { useFilterActions } from '../hooks'\r\nimport { mapSpecialLabel } from '../helpers'\r\nimport { FilterBarContext } from '../index.context'\r\nimport { FieldSortDirection } from './filter-sort.types'\r\nimport { PopperContent, PopperCustom, PopperFooter } from './popper-custom'\r\n// types\r\nimport type { FC, ReactNode } from 'react'\r\nimport type { TFieldType } from '../types'\r\nimport type { IFilterBarContext } from '../index.context'\r\nimport type { TFieldSort, IFilterSortConfig, IFilterSortProps } from './filter-sort.types'\r\n\r\nexport const mapSortDirectionLabel: { [key in FieldSortDirection]: string } = {\r\n  asc: 'Ascending',\r\n  desc: 'Descending'\r\n}\r\n\r\nexport const getSortDirectionLabel = (direction?: FieldSortDirection): string => {\r\n  if (!direction) return ''\r\n  return mapSortDirectionLabel[direction]\r\n}\r\n\r\nexport const mapSortDirectionIcon: { [key in FieldSortDirection]: ReactNode } = {\r\n  asc: <ArrowUpwardIcon fontSize='small' />,\r\n  desc: <ArrowDownwardIcon fontSize='small' />\r\n}\r\n\r\nexport const getSortDirectionIcon = (direction?: FieldSortDirection): ReactNode => {\r\n  if (!direction) return null\r\n  return mapSortDirectionIcon[direction]\r\n}\r\n\r\nfunction generateSortOptions<T>(config: IFilterSortConfig<T>): TFieldSort<T>[] {\r\n  const { fields } = config\r\n  const obj = { ...fields }\r\n  const options: TFieldSort<T>[] = []\r\n  Object.entries(obj).forEach(([key, value]) => {\r\n    options.push({ field: key as TFieldType<T>, label: value?.label })\r\n  })\r\n  return options\r\n}\r\n\r\nexport function createFilterSort<T>(config: IFilterSortConfig<T>) {\r\n  const { enableShuffle, shufflePosition = 'right' } = config\r\n  const classes = filterSortClasses\r\n  const options = generateSortOptions(config)\r\n\r\n  const FilterSort: FC<IFilterSortProps<T>> = (props) => {\r\n    const refButton = createRef<HTMLButtonElement>()\r\n\r\n    const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\r\n    const isOpen = Boolean(anchorEl)\r\n\r\n    const context = useContext(FilterBarContext) as IFilterBarContext<T>\r\n    const { getSort, changeSort, removeSort } = useFilterActions<T>(context)\r\n\r\n    const sortInfo = useMemo(() => {\r\n      const obj = getSort()\r\n      const hasShuffleSort = obj?.field === KeySpecial.sortShuffle\r\n      const hasSort = Boolean(obj?.field) && !hasShuffleSort\r\n      const item = config.fields[obj?.field as TFieldType<T>]\r\n      const label = item?.label ?? obj?.field.toString()\r\n      const title = hasSort ? `Sorted by ${label} ${obj?.direction}` : 'Sort'\r\n      return { field: obj?.field, direction: obj?.direction, hasSort, hasShuffleSort, title }\r\n    }, [getSort])\r\n\r\n    const mergedSlots = useMemo(() => {\r\n      const slotsProps = { ...props.slots, rootProps: { ...props.slots?.rootProps, sx: { ...props.sx, ...props.slots?.rootProps?.sx } } }\r\n      return Object.assign({ popperProps: {}, rootProps: {} }, config, slotsProps)\r\n    }, [props.slots, props.sx])\r\n\r\n    const handleClose = () => {\r\n      setAnchorEl(null)\r\n    }\r\n\r\n    const handleOpen = () => {\r\n      setAnchorEl(refButton.current)\r\n    }\r\n\r\n    const handleMenuItemClick = (field: TFieldType<T>) => {\r\n      handleClose()\r\n      setTimeout(() => {\r\n        changeSort(field)\r\n      }, 100)\r\n    }\r\n\r\n    const handleRemoveSort = () => {\r\n      handleClose()\r\n      setTimeout(() => {\r\n        removeSort()\r\n      }, 100)\r\n    }\r\n\r\n    const renderContent = () => (\r\n      <PopperContent title='Sort by' onClose={handleClose}>\r\n        <MenuList className={classes.menu}>\r\n          {options.map((item) => {\r\n            const key = item.field.toString()\r\n            if (!key) return null\r\n            const label = item.label ?? key.toString()\r\n            const isActive = sortInfo?.field === item.field\r\n            const direction = isActive ? sortInfo.direction : undefined\r\n            return (\r\n              <MenuItem\r\n                key={key}\r\n                className={classes.menuItem}\r\n                sx={{ justifyContent: 'space-between' }}\r\n                onClick={() => handleMenuItemClick(item.field)}\r\n                selected={isActive}\r\n              >\r\n                <Tooltip title={getSortDirectionLabel(direction)} placement='right' arrow>\r\n                  <div className={classes.menuItemInner}>\r\n                    <Typography variant='body2'>{label}</Typography>\r\n                    {getSortDirectionIcon(direction)}\r\n                  </div>\r\n                </Tooltip>\r\n              </MenuItem>\r\n            )\r\n          })}\r\n        </MenuList>\r\n        <PopperFooter>\r\n          <Button color='inherit' onClick={handleRemoveSort}>\r\n            Clear\r\n          </Button>\r\n          <Button color='primary' onClick={handleClose}>\r\n            Done\r\n          </Button>\r\n        </PopperFooter>\r\n      </PopperContent>\r\n    )\r\n\r\n    const renderShuffleIcon = () => {\r\n      if (!enableShuffle) return null\r\n      const title = mapSpecialLabel[KeySpecial.sortShuffle]\r\n      const suffix = sortInfo?.hasShuffleSort ? 'ON' : 'OFF'\r\n      const color = sortInfo?.hasShuffleSort ? 'primary' : 'default'\r\n      return (\r\n        <Tooltip title={`${title} - ${suffix}`} arrow placement='top'>\r\n          <IconButton color={color} size='small' onClick={() => changeSort(KeySpecial.sortShuffle)} {...mergedSlots.buttonShuffleProps}>\r\n            <Badge variant='dot' color='primary' invisible={!sortInfo?.hasShuffleSort}>\r\n              <ShufffleIcon fontSize='small' />\r\n            </Badge>\r\n          </IconButton>\r\n        </Tooltip>\r\n      )\r\n    }\r\n\r\n    return (\r\n      <>\r\n        {shufflePosition === 'left' && renderShuffleIcon()}\r\n        <ClickAwayListener onClickAway={handleClose}>\r\n          <FilterSortStyled className={classes.root} {...mergedSlots.rootProps}>\r\n            <Tooltip title={sortInfo?.title} arrow placement='top'>\r\n              <IconButton size='small' ref={refButton} onClick={handleOpen} {...mergedSlots.buttonSortProps}>\r\n                <Badge variant='dot' color='primary' invisible={!sortInfo?.hasSort}>\r\n                  <SwapVertIcon fontSize='small' />\r\n                </Badge>\r\n              </IconButton>\r\n            </Tooltip>\r\n            <PopperCustom open={isOpen} anchorEl={anchorEl} placement='bottom' transition disablePortal {...mergedSlots.popperProps}>\r\n              {renderContent()}\r\n            </PopperCustom>\r\n          </FilterSortStyled>\r\n        </ClickAwayListener>\r\n        {shufflePosition === 'right' && renderShuffleIcon()}\r\n      </>\r\n    )\r\n  }\r\n\r\n  return FilterSort\r\n}\r\n\r\n//#region Styles\r\nexport const filterSortClasses = {\r\n  root: 'DinoFilterSort-root',\r\n  menu: 'DinoFilterSort-menu',\r\n  menuItem: 'DinoFilterSort-menuItem',\r\n  menuItemInner: 'DinoFilterSort-menuItemInner'\r\n}\r\n\r\nexport const FilterSortStyled = styled(Box)(({ theme }) => ({\r\n  [`&.${filterSortClasses.menu}`]: { minWidth: '200px', padding: 0 },\r\n  [`.${filterSortClasses.menuItem}`]: {\r\n    paddingTop: 0,\r\n    paddingBottom: 0,\r\n    '&:not(:last-child)': {\r\n      borderBottom: '1px solid var(--color-divider, rgba(145 160 170 / 10%))'\r\n    },\r\n    [`.MuiSvgIcon-root`]: { fontSize: 16 }\r\n  },\r\n  [`.${filterSortClasses.menuItemInner}`]: {\r\n    width: '100%',\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    justifyContent: 'space-between',\r\n    gap: theme.spacing(1),\r\n    paddingTop: theme.spacing(0.75),\r\n    paddingBottom: theme.spacing(0.75)\r\n  }\r\n}))\r\n//#endregion\r\n"],"names":["mapSortDirectionLabel","asc","desc","getSortDirectionLabel","direction","mapSortDirectionIcon","_jsx","ArrowUpwardIcon","fontSize","ArrowDownwardIcon","getSortDirectionIcon","createFilterSort","config","enableShuffle","_config$shufflePositi","shufflePosition","classes","filterSortClasses","options","fields","obj","_objectSpread","Object","entries","forEach","_ref","_ref2","_slicedToArray","key","value","push","field","label","generateSortOptions","props","refButton","createRef","_useState","useState","_useState2","anchorEl","setAnchorEl","isOpen","Boolean","context","useContext","FilterBarContext","_useFilterActions","useFilterActions","getSort","changeSort","removeSort","sortInfo","useMemo","_item$label","hasShuffleSort","KeySpecial","sortShuffle","hasSort","item","toString","title","concat","mergedSlots","_props$slots","_props$slots2","slotsProps","slots","rootProps","sx","assign","popperProps","handleClose","handleRemoveSort","setTimeout","renderShuffleIcon","mapSpecialLabel","suffix","color","Tooltip","arrow","placement","children","IconButton","size","onClick","buttonShuffleProps","Badge","variant","invisible","ShufffleIcon","_jsxs","_Fragment","ClickAwayListener","onClickAway","FilterSortStyled","className","root","ref","current","buttonSortProps","SwapVertIcon","PopperCustom","open","transition","disablePortal","PopperContent","onClose","MenuList","menu","map","_item$label2","isActive","undefined","MenuItem","menuItem","justifyContent","selected","menuItemInner","Typography","PopperFooter","Button","styled","Box","_ref3","theme","_defineProperty","minWidth","padding","paddingTop","paddingBottom","borderBottom","width","display","alignItems","gap","spacing"],"mappings":"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"}

package/dist/src/filter-bar/components/filter-summary.js

@@ -1,2 +1,2 @@
-import{defineProperty as r,objectSpread2 as l}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as o,useMemo as a}from"react";import{styled as i,iconButtonClasses as n,buttonClasses as c,Collapse as s,Box as u,Button as m,IconButton as d}from"@mui/material";import p from"@mui/icons-material/ClearAll";import{KeySpecial as f}from"../types.js";import{useFilterActions as b}from"./hooks.js";import{mapSpecialLabel as h}from"../helpers.js";import{createChipViewers as g}from"./chip-viewer.js";import{FilterBarContext as v}from"../index.context.js";function x(r){var i=k,n=g();return function(c){var g=o(v),x=g.filterState,k=b(g),C=a(function(){return function(r,e){var t,o=r.fields,a=r.enableQuickSearch,i=void 0===a||a,n=l({},o),c=f.quickSearch;return i?n[c]?null!==(t=n[c])&&void 0!==t&&t.label||(n[c]=l(l({},n[c]),{},{label:h[c]})):n[c]={label:h[c]}:delete n[c],Object.keys(e||{}).reduce(function(r,l){var t,o=null==n?void 0:n[l],a=(null==o?void 0:o.label)||l.toString(),i=null==e||null===(t=e[l])||void 0===t?void 0:t.values,c=(Array.isArray(i)?i:[]).filter(Boolean).map(function(r){return{value:r.toString()}});return c.length>0&&r.push({field:l,label:a,items:c}),r},[]).sort(function(r,l){return r.field===c?-1:l.field===c?1:0})}(r,x.storeFilter)},[x,r]);return e(s,{in:C.length>0,timeout:"auto",unmountOnExit:!0,children:t(y,{className:i.root,sx:c.sx,children:[e("div",{className:i.scrollHorizontal,children:e(n.Group,{label:"Filters",value:C,placement:"horizontal",onRemove:k.removeFilterByFieldValue})}),t(u,{children:[e(m,{size:"small",color:"error",variant:"text",onClick:k.clearAllFilters,className:i.buttonClearAll,startIcon:e(p,{}),"aria-label":"Clear all filters",children:"Clear All"}),e(d,{size:"small",color:"error",onClick:k.clearAllFilters,className:i.buttonClearAll,"aria-label":"Clear all filters",children:e(p,{})})]})]})})}}var k={root:"DinoFilterSummary-root",scrollHorizontal:"DinoFilterSummary-scrollHorizontal",buttonClearAll:"DinoFilterSummary-buttonClearAll"},y=i("div")(function(l){var e=l.theme;return r(r(r({},"&.".concat(k.root),{display:"flex",alignItems:"center",paddingLeft:e.spacing(1),paddingRight:e.spacing(.5)}),".".concat(k.scrollHorizontal),{overflowX:"auto",overflowY:"hidden",WebkitOverflowScrolling:"touch",scrollbarHeight:"thin",display:"flex",flexWrap:"nowrap",minWidth:0,flex:1,"& > *":{minWidth:"max-content",flexShrink:0},"&::-webkit-scrollbar":{height:"8px",background:"transparent"},"&::-webkit-scrollbar-thumb":{background:e.palette.grey[300],borderRadius:"8px",minHeight:"8px",transition:"background 0.2s"},"&::-webkit-scrollbar-thumb:hover":{background:e.palette.primary.light},"&::-webkit-scrollbar-track":{background:e.palette.grey[100],borderRadius:"8px"},scrollbarColor:"".concat(e.palette.grey[300]," ").concat(e.palette.grey[100]),scrollbarWidth:"thin"}),".".concat(k.buttonClearAll),r(r(r({marginLeft:e.spacing(1)},"&:not(.".concat(n.root,")"),{textTransform:"none",fontWeight:500,lineHeight:2,padding:e.spacing(0,1)}),"&.".concat(n.root),{display:"none"}),e.breakpoints.down("md"),r(r({},"&.".concat(c.root),{display:"none"}),"&.".concat(n.root),{display:"flex"})))});export{x as createFilterSummary};
+import{defineProperty as r,objectSpread2 as l}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as o,useMemo as a}from"react";import{styled as i,iconButtonClasses as n,buttonClasses as c,Collapse as s,Box as u,Button as m,IconButton as d}from"@mui/material";import p from"@mui/icons-material/ClearAll";import{KeySpecial as f}from"../types.js";import{useFilterActions as b}from"../hooks.js";import{mapSpecialLabel as h}from"../helpers.js";import{createChipViewers as g}from"./chip-viewer.js";import{FilterBarContext as v}from"../index.context.js";function x(r){var i=k,n=g();return function(c){var g=o(v),x=g.filterState,k=b(g),C=a(function(){return function(r,e){var t,o=r.fields,a=r.enableQuickSearch,i=void 0===a||a,n=l({},o),c=f.quickSearch;return i?n[c]?null!==(t=n[c])&&void 0!==t&&t.label||(n[c]=l(l({},n[c]),{},{label:h[c]})):n[c]={label:h[c]}:delete n[c],Object.keys(e||{}).reduce(function(r,l){var t,o=null==n?void 0:n[l],a=(null==o?void 0:o.label)||l.toString(),i=null==e||null===(t=e[l])||void 0===t?void 0:t.values,c=(Array.isArray(i)?i:[]).filter(Boolean).map(function(r){return{value:r.toString()}});return c.length>0&&r.push({field:l,label:a,items:c}),r},[]).sort(function(r,l){return r.field===c?-1:l.field===c?1:0})}(r,x.storeFilter)},[x,r]);return e(s,{in:C.length>0,timeout:"auto",unmountOnExit:!0,children:t(y,{className:i.root,sx:c.sx,children:[e("div",{className:i.scrollHorizontal,children:e(n.Group,{label:"Filters",value:C,placement:"horizontal",onRemove:k.removeFilterByFieldValue})}),t(u,{children:[e(m,{size:"small",color:"error",variant:"text",onClick:k.clearAllFilters,className:i.buttonClearAll,startIcon:e(p,{}),"aria-label":"Clear all filters",children:"Clear All"}),e(d,{size:"small",color:"error",onClick:k.clearAllFilters,className:i.buttonClearAll,"aria-label":"Clear all filters",children:e(p,{})})]})]})})}}var k={root:"DinoFilterSummary-root",scrollHorizontal:"DinoFilterSummary-scrollHorizontal",buttonClearAll:"DinoFilterSummary-buttonClearAll"},y=i("div")(function(l){var e=l.theme;return r(r(r({},"&.".concat(k.root),{display:"flex",alignItems:"center",paddingLeft:e.spacing(1),paddingRight:e.spacing(.5)}),".".concat(k.scrollHorizontal),{overflowX:"auto",overflowY:"hidden",WebkitOverflowScrolling:"touch",scrollbarHeight:"thin",display:"flex",flexWrap:"nowrap",minWidth:0,flex:1,"& > *":{minWidth:"max-content",flexShrink:0},"&::-webkit-scrollbar":{height:"8px",background:"transparent"},"&::-webkit-scrollbar-thumb":{background:e.palette.grey[300],borderRadius:"8px",minHeight:"8px",transition:"background 0.2s"},"&::-webkit-scrollbar-thumb:hover":{background:e.palette.primary.light},"&::-webkit-scrollbar-track":{background:e.palette.grey[100],borderRadius:"8px"},scrollbarColor:"".concat(e.palette.grey[300]," ").concat(e.palette.grey[100]),scrollbarWidth:"thin"}),".".concat(k.buttonClearAll),r(r(r({marginLeft:e.spacing(1)},"&:not(.".concat(n.root,")"),{textTransform:"none",fontWeight:500,lineHeight:2,padding:e.spacing(0,1)}),"&.".concat(n.root),{display:"none"}),e.breakpoints.down("md"),r(r({},"&.".concat(c.root),{display:"none"}),"&.".concat(n.root),{display:"flex"})))});export{x as createFilterSummary};
 //# sourceMappingURL=filter-summary.js.map