@elliemae/ds-data-table-filters 3.70.0-next.8 → 3.70.0-next.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -52,6 +52,10 @@ const FilterPopover = (props) => {
52
52
  const { referenceElement, filterMinWidth, shouldShowFilter, children, FilterIcon } = props;
53
53
  const ref = import_react.default.useRef(null);
54
54
  const [showPopover, setShowPopover] = import_react.default.useState(false);
55
+ const handleEscape = (0, import_react.useCallback)(() => {
56
+ setShowPopover(false);
57
+ ref.current?.focus();
58
+ }, []);
55
59
  const {
56
60
  refs,
57
61
  floatingStyles,
@@ -59,24 +63,15 @@ const FilterPopover = (props) => {
59
63
  isOpen: isFloatingOpen
60
64
  } = (0, import_ds_floating_context.useFloatingContext)({
61
65
  externallyControlledIsOpen: showPopover,
66
+ externalReferenceElement: referenceElement,
62
67
  withoutPortal: true,
63
68
  withoutAnimation: true,
64
69
  placement: "bottom-end",
65
70
  placementOrderPreference: ["bottom-end", "top-end"],
66
- customOffset: [0, 0]
71
+ customOffset: [0, 0],
72
+ closeOnEscape: true,
73
+ onEscape: handleEscape
67
74
  });
68
- (0, import_react.useEffect)(() => {
69
- if (referenceElement) refs.setReference(referenceElement);
70
- }, [referenceElement, refs]);
71
- const handleOnKeyDown = (0, import_react.useCallback)(
72
- (e) => {
73
- if (e.key === "Escape") {
74
- setShowPopover(false);
75
- ref.current?.focus();
76
- }
77
- },
78
- [ref]
79
- );
80
75
  const config = (0, import_react.useMemo)(
81
76
  () => ({
82
77
  onBlur: () => {
@@ -109,7 +104,6 @@ const FilterPopover = (props) => {
109
104
  minWidth: filterMinWidth ?? referenceElement.offsetWidth ?? "0px"
110
105
  },
111
106
  context,
112
- onKeyDown: handleOnKeyDown,
113
107
  children
114
108
  }
115
109
  )
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/parts/FilterPopover/FilterPopover.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import React, { useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useOnBlurOut, type DSHooksUseOBlurOutT } from '@elliemae/ds-hooks-on-blur-out';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport { type FilterPopoverT, FilterPopoverPropTypesSchema } from './react-desc-prop-types.js';\nimport { FILTER_POPOVER_SLOTS, FilterPopoverName } from './constants/index.js';\n\ninterface ConfigT {\n onBlur: DSHooksUseOBlurOutT.OnBlurCb;\n}\n\nconst StyledWrapper = styled(Grid, { name: FilterPopoverName, slot: FILTER_POPOVER_SLOTS.ROOT })`\n cursor: initial;\n`;\nconst StyledButton = styled(DSButtonV2, { name: FilterPopoverName, slot: FILTER_POPOVER_SLOTS.FILTER_ICON_BUTTON })``;\n\nconst FilterPopover: React.ComponentType<FilterPopoverT.Props> = (props) => {\n const { referenceElement, filterMinWidth, shouldShowFilter, children, FilterIcon } = props;\n const ref = React.useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = React.useState(false);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: showPopover,\n withoutPortal: true,\n withoutAnimation: true,\n placement: 'bottom-end',\n placementOrderPreference: ['bottom-end', 'top-end'],\n customOffset: [0, 0],\n });\n\n useEffect(() => {\n if (referenceElement) refs.setReference(referenceElement);\n }, [referenceElement, refs]);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setShowPopover(false);\n ref.current?.focus();\n }\n },\n [ref],\n );\n\n const config: ConfigT = useMemo(\n () => ({\n onBlur: () => {\n setShowPopover(false);\n },\n }),\n [],\n );\n const handleParentOnBlur = useOnBlurOut(config);\n\n if (!shouldShowFilter && !showPopover) return null;\n\n return (\n <StyledWrapper onBlur={handleParentOnBlur} tabIndex={-1}>\n <StyledButton\n buttonType=\"icon\"\n innerRef={ref}\n aria-label=\"filter\"\n size=\"s\"\n onClick={() => setShowPopover(!showPopover)}\n >\n {FilterIcon ? <FilterIcon /> : <SearchXsmall size=\"s\" />}\n </StyledButton>\n {referenceElement && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{\n ...floatingStyles,\n minWidth: filterMinWidth ?? referenceElement.offsetWidth ?? '0px',\n }}\n context={context}\n onKeyDown={handleOnKeyDown}\n >\n {children}\n </FloatingWrapper>\n )}\n </StyledWrapper>\n );\n};\n\nFilterPopover.displayName = 'FilterPopover';\nconst FilterPopoverWithSchema = describe(FilterPopover);\nFilterPopoverWithSchema.propTypes = FilterPopoverPropTypesSchema;\n\nexport { FilterPopover, FilterPopoverWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADkEnB;AAlEJ,mBAAuD;AACvD,qBAAqB;AACrB,8BAAyB;AACzB,kCAAuD;AACvD,iCAAoD;AACpD,0BAA2B;AAC3B,sBAA6B;AAC7B,uBAAuB;AACvB,mCAAkE;AAClE,uBAAwD;AAMxD,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,oCAAmB,MAAM,sCAAqB,KAAK,CAAC;AAAA;AAAA;AAG/F,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,oCAAmB,MAAM,sCAAqB,mBAAmB,CAAC;AAElH,MAAM,gBAA2D,CAAC,UAAU;AAC1E,QAAM,EAAE,kBAAkB,gBAAgB,kBAAkB,UAAU,WAAW,IAAI;AACrF,QAAM,MAAM,aAAAA,QAAM,OAA0B,IAAI;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAE1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,eAAe;AAAA,IACf,kBAAkB;AAAA,IAClB,WAAW;AAAA,IACX,0BAA0B,CAAC,cAAc,SAAS;AAAA,IAClD,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AAED,8BAAU,MAAM;AACd,QAAI,iBAAkB,MAAK,aAAa,gBAAgB;AAAA,EAC1D,GAAG,CAAC,kBAAkB,IAAI,CAAC;AAE3B,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,uBAAe,KAAK;AACpB,YAAI,SAAS,MAAM;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,aAAkB;AAAA,IACtB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACA,QAAM,yBAAqB,0CAAa,MAAM;AAE9C,MAAI,CAAC,oBAAoB,CAAC,YAAa,QAAO;AAE9C,SACE,6CAAC,iBAAc,QAAQ,oBAAoB,UAAU,IACnD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,UAAU;AAAA,QACV,cAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,MAAM,eAAe,CAAC,WAAW;AAAA,QAEzC,uBAAa,4CAAC,cAAW,IAAK,4CAAC,gCAAa,MAAK,KAAI;AAAA;AAAA,IACxD;AAAA,IACC,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR,gBAAgB;AAAA,UACd,GAAG;AAAA,UACH,UAAU,kBAAkB,iBAAiB,eAAe;AAAA,QAC9D;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
4
+ "sourcesContent": ["import React, { useCallback, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useOnBlurOut, type DSHooksUseOBlurOutT } from '@elliemae/ds-hooks-on-blur-out';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport { type FilterPopoverT, FilterPopoverPropTypesSchema } from './react-desc-prop-types.js';\nimport { FILTER_POPOVER_SLOTS, FilterPopoverName } from './constants/index.js';\n\ninterface ConfigT {\n onBlur: DSHooksUseOBlurOutT.OnBlurCb;\n}\n\nconst StyledWrapper = styled(Grid, { name: FilterPopoverName, slot: FILTER_POPOVER_SLOTS.ROOT })`\n cursor: initial;\n`;\nconst StyledButton = styled(DSButtonV2, { name: FilterPopoverName, slot: FILTER_POPOVER_SLOTS.FILTER_ICON_BUTTON })``;\n\nconst FilterPopover: React.ComponentType<FilterPopoverT.Props> = (props) => {\n const { referenceElement, filterMinWidth, shouldShowFilter, children, FilterIcon } = props;\n const ref = React.useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = React.useState(false);\n\n const handleEscape = useCallback(() => {\n setShowPopover(false);\n ref.current?.focus();\n }, []);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: showPopover,\n externalReferenceElement: referenceElement,\n withoutPortal: true,\n withoutAnimation: true,\n placement: 'bottom-end',\n placementOrderPreference: ['bottom-end', 'top-end'],\n customOffset: [0, 0],\n closeOnEscape: true,\n onEscape: handleEscape,\n });\n\n const config: ConfigT = useMemo(\n () => ({\n onBlur: () => {\n setShowPopover(false);\n },\n }),\n [],\n );\n const handleParentOnBlur = useOnBlurOut(config);\n\n if (!shouldShowFilter && !showPopover) return null;\n\n return (\n <StyledWrapper onBlur={handleParentOnBlur} tabIndex={-1}>\n <StyledButton\n buttonType=\"icon\"\n innerRef={ref}\n aria-label=\"filter\"\n size=\"s\"\n onClick={() => setShowPopover(!showPopover)}\n >\n {FilterIcon ? <FilterIcon /> : <SearchXsmall size=\"s\" />}\n </StyledButton>\n {referenceElement && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{\n ...floatingStyles,\n minWidth: filterMinWidth ?? referenceElement.offsetWidth ?? '0px',\n }}\n context={context}\n >\n {children}\n </FloatingWrapper>\n )}\n </StyledWrapper>\n );\n};\n\nFilterPopover.displayName = 'FilterPopover';\nconst FilterPopoverWithSchema = describe(FilterPopover);\nFilterPopoverWithSchema.propTypes = FilterPopoverPropTypesSchema;\n\nexport { FilterPopover, FilterPopoverWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD4DnB;AA5DJ,mBAA4C;AAC5C,qBAAqB;AACrB,8BAAyB;AACzB,kCAAuD;AACvD,iCAAoD;AACpD,0BAA2B;AAC3B,sBAA6B;AAC7B,uBAAuB;AACvB,mCAAkE;AAClE,uBAAwD;AAMxD,MAAM,oBAAgB,yBAAO,qBAAM,EAAE,MAAM,oCAAmB,MAAM,sCAAqB,KAAK,CAAC;AAAA;AAAA;AAG/F,MAAM,mBAAe,yBAAO,gCAAY,EAAE,MAAM,oCAAmB,MAAM,sCAAqB,mBAAmB,CAAC;AAElH,MAAM,gBAA2D,CAAC,UAAU;AAC1E,QAAM,EAAE,kBAAkB,gBAAgB,kBAAkB,UAAU,WAAW,IAAI;AACrF,QAAM,MAAM,aAAAA,QAAM,OAA0B,IAAI;AAChD,QAAM,CAAC,aAAa,cAAc,IAAI,aAAAA,QAAM,SAAS,KAAK;AAE1D,QAAM,mBAAe,0BAAY,MAAM;AACrC,mBAAe,KAAK;AACpB,QAAI,SAAS,MAAM;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,QAAI,+CAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,0BAA0B;AAAA,IAC1B,eAAe;AAAA,IACf,kBAAkB;AAAA,IAClB,WAAW;AAAA,IACX,0BAA0B,CAAC,cAAc,SAAS;AAAA,IAClD,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,eAAe;AAAA,IACf,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,aAAkB;AAAA,IACtB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACA,QAAM,yBAAqB,0CAAa,MAAM;AAE9C,MAAI,CAAC,oBAAoB,CAAC,YAAa,QAAO;AAE9C,SACE,6CAAC,iBAAc,QAAQ,oBAAoB,UAAU,IACnD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,UAAU;AAAA,QACV,cAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,MAAM,eAAe,CAAC,WAAW;AAAA,QAEzC,uBAAa,4CAAC,cAAW,IAAK,4CAAC,gCAAa,MAAK,KAAI;AAAA;AAAA,IACxD;AAAA,IACC,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR,gBAAgB;AAAA,UACd,GAAG;AAAA,UACH,UAAU,kBAAkB,iBAAiB,eAAe;AAAA,QAC9D;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
6
6
  "names": ["React"]
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import React2, { useCallback, useEffect, useMemo } from "react";
3
+ import React2, { useCallback, useMemo } from "react";
4
4
  import { Grid } from "@elliemae/ds-grid";
5
5
  import { describe } from "@elliemae/ds-props-helpers";
6
6
  import { useOnBlurOut } from "@elliemae/ds-hooks-on-blur-out";
@@ -18,6 +18,10 @@ const FilterPopover = (props) => {
18
18
  const { referenceElement, filterMinWidth, shouldShowFilter, children, FilterIcon } = props;
19
19
  const ref = React2.useRef(null);
20
20
  const [showPopover, setShowPopover] = React2.useState(false);
21
+ const handleEscape = useCallback(() => {
22
+ setShowPopover(false);
23
+ ref.current?.focus();
24
+ }, []);
21
25
  const {
22
26
  refs,
23
27
  floatingStyles,
@@ -25,24 +29,15 @@ const FilterPopover = (props) => {
25
29
  isOpen: isFloatingOpen
26
30
  } = useFloatingContext({
27
31
  externallyControlledIsOpen: showPopover,
32
+ externalReferenceElement: referenceElement,
28
33
  withoutPortal: true,
29
34
  withoutAnimation: true,
30
35
  placement: "bottom-end",
31
36
  placementOrderPreference: ["bottom-end", "top-end"],
32
- customOffset: [0, 0]
37
+ customOffset: [0, 0],
38
+ closeOnEscape: true,
39
+ onEscape: handleEscape
33
40
  });
34
- useEffect(() => {
35
- if (referenceElement) refs.setReference(referenceElement);
36
- }, [referenceElement, refs]);
37
- const handleOnKeyDown = useCallback(
38
- (e) => {
39
- if (e.key === "Escape") {
40
- setShowPopover(false);
41
- ref.current?.focus();
42
- }
43
- },
44
- [ref]
45
- );
46
41
  const config = useMemo(
47
42
  () => ({
48
43
  onBlur: () => {
@@ -75,7 +70,6 @@ const FilterPopover = (props) => {
75
70
  minWidth: filterMinWidth ?? referenceElement.offsetWidth ?? "0px"
76
71
  },
77
72
  context,
78
- onKeyDown: handleOnKeyDown,
79
73
  children
80
74
  }
81
75
  )
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterPopover/FilterPopover.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useEffect, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useOnBlurOut, type DSHooksUseOBlurOutT } from '@elliemae/ds-hooks-on-blur-out';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport { type FilterPopoverT, FilterPopoverPropTypesSchema } from './react-desc-prop-types.js';\nimport { FILTER_POPOVER_SLOTS, FilterPopoverName } from './constants/index.js';\n\ninterface ConfigT {\n onBlur: DSHooksUseOBlurOutT.OnBlurCb;\n}\n\nconst StyledWrapper = styled(Grid, { name: FilterPopoverName, slot: FILTER_POPOVER_SLOTS.ROOT })`\n cursor: initial;\n`;\nconst StyledButton = styled(DSButtonV2, { name: FilterPopoverName, slot: FILTER_POPOVER_SLOTS.FILTER_ICON_BUTTON })``;\n\nconst FilterPopover: React.ComponentType<FilterPopoverT.Props> = (props) => {\n const { referenceElement, filterMinWidth, shouldShowFilter, children, FilterIcon } = props;\n const ref = React.useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = React.useState(false);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: showPopover,\n withoutPortal: true,\n withoutAnimation: true,\n placement: 'bottom-end',\n placementOrderPreference: ['bottom-end', 'top-end'],\n customOffset: [0, 0],\n });\n\n useEffect(() => {\n if (referenceElement) refs.setReference(referenceElement);\n }, [referenceElement, refs]);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setShowPopover(false);\n ref.current?.focus();\n }\n },\n [ref],\n );\n\n const config: ConfigT = useMemo(\n () => ({\n onBlur: () => {\n setShowPopover(false);\n },\n }),\n [],\n );\n const handleParentOnBlur = useOnBlurOut(config);\n\n if (!shouldShowFilter && !showPopover) return null;\n\n return (\n <StyledWrapper onBlur={handleParentOnBlur} tabIndex={-1}>\n <StyledButton\n buttonType=\"icon\"\n innerRef={ref}\n aria-label=\"filter\"\n size=\"s\"\n onClick={() => setShowPopover(!showPopover)}\n >\n {FilterIcon ? <FilterIcon /> : <SearchXsmall size=\"s\" />}\n </StyledButton>\n {referenceElement && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{\n ...floatingStyles,\n minWidth: filterMinWidth ?? referenceElement.offsetWidth ?? '0px',\n }}\n context={context}\n onKeyDown={handleOnKeyDown}\n >\n {children}\n </FloatingWrapper>\n )}\n </StyledWrapper>\n );\n};\n\nFilterPopover.displayName = 'FilterPopover';\nconst FilterPopoverWithSchema = describe(FilterPopover);\nFilterPopoverWithSchema.propTypes = FilterPopoverPropTypesSchema;\n\nexport { FilterPopover, FilterPopoverWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACkEnB,SAQkB,KARlB;AAlEJ,OAAOA,UAAS,aAAa,WAAW,eAAe;AACvD,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,oBAA8C;AACvD,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAA8B,oCAAoC;AAClE,SAAS,sBAAsB,yBAAyB;AAMxD,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,mBAAmB,MAAM,qBAAqB,KAAK,CAAC;AAAA;AAAA;AAG/F,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,mBAAmB,MAAM,qBAAqB,mBAAmB,CAAC;AAElH,MAAM,gBAA2D,CAAC,UAAU;AAC1E,QAAM,EAAE,kBAAkB,gBAAgB,kBAAkB,UAAU,WAAW,IAAI;AACrF,QAAM,MAAMA,OAAM,OAA0B,IAAI;AAChD,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAE1D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,eAAe;AAAA,IACf,kBAAkB;AAAA,IAClB,WAAW;AAAA,IACX,0BAA0B,CAAC,cAAc,SAAS;AAAA,IAClD,cAAc,CAAC,GAAG,CAAC;AAAA,EACrB,CAAC;AAED,YAAU,MAAM;AACd,QAAI,iBAAkB,MAAK,aAAa,gBAAgB;AAAA,EAC1D,GAAG,CAAC,kBAAkB,IAAI,CAAC;AAE3B,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,uBAAe,KAAK;AACpB,YAAI,SAAS,MAAM;AAAA,MACrB;AAAA,IACF;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAEA,QAAM,SAAkB;AAAA,IACtB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACA,QAAM,qBAAqB,aAAa,MAAM;AAE9C,MAAI,CAAC,oBAAoB,CAAC,YAAa,QAAO;AAE9C,SACE,qBAAC,iBAAc,QAAQ,oBAAoB,UAAU,IACnD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,UAAU;AAAA,QACV,cAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,MAAM,eAAe,CAAC,WAAW;AAAA,QAEzC,uBAAa,oBAAC,cAAW,IAAK,oBAAC,gBAAa,MAAK,KAAI;AAAA;AAAA,IACxD;AAAA,IACC,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR,gBAAgB;AAAA,UACd,GAAG;AAAA,UACH,UAAU,kBAAkB,iBAAiB,eAAe;AAAA,QAC9D;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QAEV;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useMemo } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useOnBlurOut, type DSHooksUseOBlurOutT } from '@elliemae/ds-hooks-on-blur-out';\nimport { useFloatingContext, FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { styled } from '@elliemae/ds-system';\nimport { type FilterPopoverT, FilterPopoverPropTypesSchema } from './react-desc-prop-types.js';\nimport { FILTER_POPOVER_SLOTS, FilterPopoverName } from './constants/index.js';\n\ninterface ConfigT {\n onBlur: DSHooksUseOBlurOutT.OnBlurCb;\n}\n\nconst StyledWrapper = styled(Grid, { name: FilterPopoverName, slot: FILTER_POPOVER_SLOTS.ROOT })`\n cursor: initial;\n`;\nconst StyledButton = styled(DSButtonV2, { name: FilterPopoverName, slot: FILTER_POPOVER_SLOTS.FILTER_ICON_BUTTON })``;\n\nconst FilterPopover: React.ComponentType<FilterPopoverT.Props> = (props) => {\n const { referenceElement, filterMinWidth, shouldShowFilter, children, FilterIcon } = props;\n const ref = React.useRef<HTMLButtonElement>(null);\n const [showPopover, setShowPopover] = React.useState(false);\n\n const handleEscape = useCallback(() => {\n setShowPopover(false);\n ref.current?.focus();\n }, []);\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n } = useFloatingContext({\n externallyControlledIsOpen: showPopover,\n externalReferenceElement: referenceElement,\n withoutPortal: true,\n withoutAnimation: true,\n placement: 'bottom-end',\n placementOrderPreference: ['bottom-end', 'top-end'],\n customOffset: [0, 0],\n closeOnEscape: true,\n onEscape: handleEscape,\n });\n\n const config: ConfigT = useMemo(\n () => ({\n onBlur: () => {\n setShowPopover(false);\n },\n }),\n [],\n );\n const handleParentOnBlur = useOnBlurOut(config);\n\n if (!shouldShowFilter && !showPopover) return null;\n\n return (\n <StyledWrapper onBlur={handleParentOnBlur} tabIndex={-1}>\n <StyledButton\n buttonType=\"icon\"\n innerRef={ref}\n aria-label=\"filter\"\n size=\"s\"\n onClick={() => setShowPopover(!showPopover)}\n >\n {FilterIcon ? <FilterIcon /> : <SearchXsmall size=\"s\" />}\n </StyledButton>\n {referenceElement && (\n <FloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{\n ...floatingStyles,\n minWidth: filterMinWidth ?? referenceElement.offsetWidth ?? '0px',\n }}\n context={context}\n >\n {children}\n </FloatingWrapper>\n )}\n </StyledWrapper>\n );\n};\n\nFilterPopover.displayName = 'FilterPopover';\nconst FilterPopoverWithSchema = describe(FilterPopover);\nFilterPopoverWithSchema.propTypes = FilterPopoverPropTypesSchema;\n\nexport { FilterPopover, FilterPopoverWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;AC4DnB,SAQkB,KARlB;AA5DJ,OAAOA,UAAS,aAAa,eAAe;AAC5C,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,oBAA8C;AACvD,SAAS,oBAAoB,uBAAuB;AACpD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAA8B,oCAAoC;AAClE,SAAS,sBAAsB,yBAAyB;AAMxD,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,mBAAmB,MAAM,qBAAqB,KAAK,CAAC;AAAA;AAAA;AAG/F,MAAM,eAAe,OAAO,YAAY,EAAE,MAAM,mBAAmB,MAAM,qBAAqB,mBAAmB,CAAC;AAElH,MAAM,gBAA2D,CAAC,UAAU;AAC1E,QAAM,EAAE,kBAAkB,gBAAgB,kBAAkB,UAAU,WAAW,IAAI;AACrF,QAAM,MAAMA,OAAM,OAA0B,IAAI;AAChD,QAAM,CAAC,aAAa,cAAc,IAAIA,OAAM,SAAS,KAAK;AAE1D,QAAM,eAAe,YAAY,MAAM;AACrC,mBAAe,KAAK;AACpB,QAAI,SAAS,MAAM;AAAA,EACrB,GAAG,CAAC,CAAC;AAEL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,EACV,IAAI,mBAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B,0BAA0B;AAAA,IAC1B,eAAe;AAAA,IACf,kBAAkB;AAAA,IAClB,WAAW;AAAA,IACX,0BAA0B,CAAC,cAAc,SAAS;AAAA,IAClD,cAAc,CAAC,GAAG,CAAC;AAAA,IACnB,eAAe;AAAA,IACf,UAAU;AAAA,EACZ,CAAC;AAED,QAAM,SAAkB;AAAA,IACtB,OAAO;AAAA,MACL,QAAQ,MAAM;AACZ,uBAAe,KAAK;AAAA,MACtB;AAAA,IACF;AAAA,IACA,CAAC;AAAA,EACH;AACA,QAAM,qBAAqB,aAAa,MAAM;AAE9C,MAAI,CAAC,oBAAoB,CAAC,YAAa,QAAO;AAE9C,SACE,qBAAC,iBAAc,QAAQ,oBAAoB,UAAU,IACnD;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,YAAW;AAAA,QACX,UAAU;AAAA,QACV,cAAW;AAAA,QACX,MAAK;AAAA,QACL,SAAS,MAAM,eAAe,CAAC,WAAW;AAAA,QAEzC,uBAAa,oBAAC,cAAW,IAAK,oBAAC,gBAAa,MAAK,KAAI;AAAA;AAAA,IACxD;AAAA,IACC,oBACC;AAAA,MAAC;AAAA;AAAA,QACC,UAAU,KAAK;AAAA,QACf,QAAQ;AAAA,QACR,gBAAgB;AAAA,UACd,GAAG;AAAA,UACH,UAAU,kBAAkB,iBAAiB,eAAe;AAAA,QAC9D;AAAA,QACA;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,0BAA0B,SAAS,aAAa;AACtD,wBAAwB,YAAY;",
6
6
  "names": ["React"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elliemae/ds-data-table-filters",
3
- "version": "3.70.0-next.8",
3
+ "version": "3.70.0-next.9",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Data Table Filters",
6
6
  "files": [
@@ -36,25 +36,25 @@
36
36
  "indent": 4
37
37
  },
38
38
  "dependencies": {
39
- "@elliemae/ds-floating-context": "3.70.0-next.8",
40
- "@elliemae/ds-button-v2": "3.70.0-next.8",
41
- "@elliemae/ds-form-date-range-picker": "3.70.0-next.8",
42
- "@elliemae/ds-form-combobox": "3.70.0-next.8",
43
- "@elliemae/ds-form-date-time-picker": "3.70.0-next.8",
44
- "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.8",
45
- "@elliemae/ds-form-layout-blocks": "3.70.0-next.8",
46
- "@elliemae/ds-form-input-text": "3.70.0-next.8",
47
- "@elliemae/ds-grid": "3.70.0-next.8",
48
- "@elliemae/ds-hooks-on-blur-out": "3.70.0-next.8",
49
- "@elliemae/ds-icons": "3.70.0-next.8",
50
- "@elliemae/ds-pills-v2": "3.70.0-next.8",
51
- "@elliemae/ds-props-helpers": "3.70.0-next.8",
52
- "@elliemae/ds-system": "3.70.0-next.8",
53
- "@elliemae/ds-typescript-helpers": "3.70.0-next.8"
39
+ "@elliemae/ds-button-v2": "3.70.0-next.9",
40
+ "@elliemae/ds-floating-context": "3.70.0-next.9",
41
+ "@elliemae/ds-form-combobox": "3.70.0-next.9",
42
+ "@elliemae/ds-form-date-time-picker": "3.70.0-next.9",
43
+ "@elliemae/ds-form-date-range-picker": "3.70.0-next.9",
44
+ "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.9",
45
+ "@elliemae/ds-form-input-text": "3.70.0-next.9",
46
+ "@elliemae/ds-form-layout-blocks": "3.70.0-next.9",
47
+ "@elliemae/ds-pills-v2": "3.70.0-next.9",
48
+ "@elliemae/ds-hooks-on-blur-out": "3.70.0-next.9",
49
+ "@elliemae/ds-icons": "3.70.0-next.9",
50
+ "@elliemae/ds-props-helpers": "3.70.0-next.9",
51
+ "@elliemae/ds-system": "3.70.0-next.9",
52
+ "@elliemae/ds-grid": "3.70.0-next.9",
53
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.9"
54
54
  },
55
55
  "devDependencies": {
56
56
  "jest": "^30.0.0",
57
- "@elliemae/ds-monorepo-devops": "3.70.0-next.8"
57
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.9"
58
58
  },
59
59
  "peerDependencies": {
60
60
  "@testing-library/jest-dom": "^6.6.3",