@elliemae/ds-data-table-filters 3.70.0-next.3 → 3.70.0-next.6

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.
@@ -38,7 +38,7 @@ var import_react = __toESM(require("react"));
38
38
  var import_ds_grid = require("@elliemae/ds-grid");
39
39
  var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
40
40
  var import_ds_hooks_on_blur_out = require("@elliemae/ds-hooks-on-blur-out");
41
- var import_ds_popperjs = require("@elliemae/ds-popperjs");
41
+ var import_ds_floating_context = require("@elliemae/ds-floating-context");
42
42
  var import_ds_button_v2 = require("@elliemae/ds-button-v2");
43
43
  var import_ds_icons = require("@elliemae/ds-icons");
44
44
  var import_ds_system = require("@elliemae/ds-system");
@@ -52,9 +52,22 @@ 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 closeContextMenu = (0, import_react.useCallback)(() => {
56
- setShowPopover(false);
57
- }, []);
55
+ const {
56
+ refs,
57
+ floatingStyles,
58
+ context,
59
+ isOpen: isFloatingOpen
60
+ } = (0, import_ds_floating_context.useFloatingContext)({
61
+ externallyControlledIsOpen: showPopover,
62
+ withoutPortal: true,
63
+ withoutAnimation: true,
64
+ placement: "bottom-end",
65
+ placementOrderPreference: ["bottom-end", "top-end"],
66
+ customOffset: [0, 0]
67
+ });
68
+ (0, import_react.useEffect)(() => {
69
+ if (referenceElement) refs.setReference(referenceElement);
70
+ }, [referenceElement, refs]);
58
71
  const handleOnKeyDown = (0, import_react.useCallback)(
59
72
  (e) => {
60
73
  if (e.key === "Escape") {
@@ -87,21 +100,16 @@ const FilterPopover = (props) => {
87
100
  }
88
101
  ),
89
102
  referenceElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
90
- import_ds_popperjs.DSPopperJS,
103
+ import_ds_floating_context.FloatingWrapper,
91
104
  {
92
- referenceElement,
93
- showPopover,
94
- withoutAnimation: true,
95
- withoutArrow: true,
96
- withoutPortal: true,
97
- closeContextMenu,
98
- backgroundColor: "#FFF",
99
- onKeyDown: handleOnKeyDown,
100
- startPlacementPreference: "bottom-end",
101
- extraPopperStyles: {
105
+ innerRef: refs.setFloating,
106
+ isOpen: isFloatingOpen,
107
+ floatingStyles: {
108
+ ...floatingStyles,
102
109
  minWidth: filterMinWidth ?? referenceElement.offsetWidth ?? "0px"
103
110
  },
104
- placementOrderPreference: ["bottom-end", "top-end"],
111
+ context,
112
+ onKeyDown: handleOnKeyDown,
105
113
  children
106
114
  }
107
115
  )
@@ -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, 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 { DSPopperJS } from '@elliemae/ds-popperjs';\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 closeContextMenu = useCallback(() => {\n setShowPopover(false);\n }, []);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\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 <DSPopperJS\n referenceElement={referenceElement}\n showPopover={showPopover}\n withoutAnimation\n withoutArrow\n withoutPortal\n closeContextMenu={closeContextMenu}\n backgroundColor=\"#FFF\"\n onKeyDown={handleOnKeyDown}\n startPlacementPreference=\"bottom-end\"\n extraPopperStyles={{\n minWidth: filterMinWidth ?? referenceElement.offsetWidth ?? '0px',\n }}\n placementOrderPreference={['bottom-end', 'top-end']}\n >\n {children}\n </DSPopperJS>\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;ADoDnB;AApDJ,mBAA4C;AAC5C,qBAAqB;AACrB,8BAAyB;AACzB,kCAAuD;AACvD,yBAA2B;AAC3B,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,uBAAmB,0BAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,QAAM,sBAAkB;AAAA,IACtB,CAAC,MAA8C;AAC7C,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;AAAA,QACA;AAAA,QACA,kBAAgB;AAAA,QAChB,cAAY;AAAA,QACZ,eAAa;AAAA,QACb;AAAA,QACA,iBAAgB;AAAA,QAChB,WAAW;AAAA,QACX,0BAAyB;AAAA,QACzB,mBAAmB;AAAA,UACjB,UAAU,kBAAkB,iBAAiB,eAAe;AAAA,QAC9D;AAAA,QACA,0BAA0B,CAAC,cAAc,SAAS;AAAA,QAEjD;AAAA;AAAA,IACH;AAAA,KAEJ;AAEJ;AAEA,cAAc,cAAc;AAC5B,MAAM,8BAA0B,kCAAS,aAAa;AACtD,wBAAwB,YAAY;",
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;",
6
6
  "names": ["React"]
7
7
  }
@@ -1,10 +1,10 @@
1
1
  import * as React from "react";
2
2
  import { jsx, jsxs } from "react/jsx-runtime";
3
- import React2, { useCallback, useMemo } from "react";
3
+ import React2, { useCallback, useEffect, 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";
7
- import { DSPopperJS } from "@elliemae/ds-popperjs";
7
+ import { useFloatingContext, FloatingWrapper } from "@elliemae/ds-floating-context";
8
8
  import { DSButtonV2 } from "@elliemae/ds-button-v2";
9
9
  import { SearchXsmall } from "@elliemae/ds-icons";
10
10
  import { styled } from "@elliemae/ds-system";
@@ -18,9 +18,22 @@ 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 closeContextMenu = useCallback(() => {
22
- setShowPopover(false);
23
- }, []);
21
+ const {
22
+ refs,
23
+ floatingStyles,
24
+ context,
25
+ isOpen: isFloatingOpen
26
+ } = useFloatingContext({
27
+ externallyControlledIsOpen: showPopover,
28
+ withoutPortal: true,
29
+ withoutAnimation: true,
30
+ placement: "bottom-end",
31
+ placementOrderPreference: ["bottom-end", "top-end"],
32
+ customOffset: [0, 0]
33
+ });
34
+ useEffect(() => {
35
+ if (referenceElement) refs.setReference(referenceElement);
36
+ }, [referenceElement, refs]);
24
37
  const handleOnKeyDown = useCallback(
25
38
  (e) => {
26
39
  if (e.key === "Escape") {
@@ -53,21 +66,16 @@ const FilterPopover = (props) => {
53
66
  }
54
67
  ),
55
68
  referenceElement && /* @__PURE__ */ jsx(
56
- DSPopperJS,
69
+ FloatingWrapper,
57
70
  {
58
- referenceElement,
59
- showPopover,
60
- withoutAnimation: true,
61
- withoutArrow: true,
62
- withoutPortal: true,
63
- closeContextMenu,
64
- backgroundColor: "#FFF",
65
- onKeyDown: handleOnKeyDown,
66
- startPlacementPreference: "bottom-end",
67
- extraPopperStyles: {
71
+ innerRef: refs.setFloating,
72
+ isOpen: isFloatingOpen,
73
+ floatingStyles: {
74
+ ...floatingStyles,
68
75
  minWidth: filterMinWidth ?? referenceElement.offsetWidth ?? "0px"
69
76
  },
70
- placementOrderPreference: ["bottom-end", "top-end"],
77
+ context,
78
+ onKeyDown: handleOnKeyDown,
71
79
  children
72
80
  }
73
81
  )
@@ -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, 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 { DSPopperJS } from '@elliemae/ds-popperjs';\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 closeContextMenu = useCallback(() => {\n setShowPopover(false);\n }, []);\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLButtonElement>) => {\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 <DSPopperJS\n referenceElement={referenceElement}\n showPopover={showPopover}\n withoutAnimation\n withoutArrow\n withoutPortal\n closeContextMenu={closeContextMenu}\n backgroundColor=\"#FFF\"\n onKeyDown={handleOnKeyDown}\n startPlacementPreference=\"bottom-end\"\n extraPopperStyles={{\n minWidth: filterMinWidth ?? referenceElement.offsetWidth ?? '0px',\n }}\n placementOrderPreference={['bottom-end', 'top-end']}\n >\n {children}\n </DSPopperJS>\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;ACoDnB,SAQkB,KARlB;AApDJ,OAAOA,UAAS,aAAa,eAAe;AAC5C,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,oBAA8C;AACvD,SAAS,kBAAkB;AAC3B,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,mBAAmB,YAAY,MAAM;AACzC,mBAAe,KAAK;AAAA,EACtB,GAAG,CAAC,CAAC;AAEL,QAAM,kBAAkB;AAAA,IACtB,CAAC,MAA8C;AAC7C,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;AAAA,QACA;AAAA,QACA,kBAAgB;AAAA,QAChB,cAAY;AAAA,QACZ,eAAa;AAAA,QACb;AAAA,QACA,iBAAgB;AAAA,QAChB,WAAW;AAAA,QACX,0BAAyB;AAAA,QACzB,mBAAmB;AAAA,UACjB,UAAU,kBAAkB,iBAAiB,eAAe;AAAA,QAC9D;AAAA,QACA,0BAA0B,CAAC,cAAc,SAAS;AAAA,QAEjD;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, 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;",
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.3",
3
+ "version": "3.70.0-next.6",
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-button-v2": "3.70.0-next.3",
40
- "@elliemae/ds-form-combobox": "3.70.0-next.3",
41
- "@elliemae/ds-form-date-range-picker": "3.70.0-next.3",
42
- "@elliemae/ds-form-date-time-picker": "3.70.0-next.3",
43
- "@elliemae/ds-form-input-text": "3.70.0-next.3",
44
- "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.3",
45
- "@elliemae/ds-form-layout-blocks": "3.70.0-next.3",
46
- "@elliemae/ds-grid": "3.70.0-next.3",
47
- "@elliemae/ds-hooks-on-blur-out": "3.70.0-next.3",
48
- "@elliemae/ds-icons": "3.70.0-next.3",
49
- "@elliemae/ds-pills-v2": "3.70.0-next.3",
50
- "@elliemae/ds-props-helpers": "3.70.0-next.3",
51
- "@elliemae/ds-popperjs": "3.70.0-next.3",
52
- "@elliemae/ds-system": "3.70.0-next.3",
53
- "@elliemae/ds-typescript-helpers": "3.70.0-next.3"
39
+ "@elliemae/ds-button-v2": "3.70.0-next.6",
40
+ "@elliemae/ds-floating-context": "3.70.0-next.6",
41
+ "@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.6",
42
+ "@elliemae/ds-form-combobox": "3.70.0-next.6",
43
+ "@elliemae/ds-form-date-time-picker": "3.70.0-next.6",
44
+ "@elliemae/ds-form-input-text": "3.70.0-next.6",
45
+ "@elliemae/ds-form-layout-blocks": "3.70.0-next.6",
46
+ "@elliemae/ds-grid": "3.70.0-next.6",
47
+ "@elliemae/ds-hooks-on-blur-out": "3.70.0-next.6",
48
+ "@elliemae/ds-icons": "3.70.0-next.6",
49
+ "@elliemae/ds-form-date-range-picker": "3.70.0-next.6",
50
+ "@elliemae/ds-pills-v2": "3.70.0-next.6",
51
+ "@elliemae/ds-props-helpers": "3.70.0-next.6",
52
+ "@elliemae/ds-system": "3.70.0-next.6",
53
+ "@elliemae/ds-typescript-helpers": "3.70.0-next.6"
54
54
  },
55
55
  "devDependencies": {
56
56
  "jest": "^30.0.0",
57
- "@elliemae/ds-monorepo-devops": "3.70.0-next.3"
57
+ "@elliemae/ds-monorepo-devops": "3.70.0-next.6"
58
58
  },
59
59
  "peerDependencies": {
60
60
  "@testing-library/jest-dom": "^6.6.3",