@elliemae/ds-data-table 3.70.0-next.12 → 3.70.0-next.14
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.
- package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js +2 -3
- package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/index.js +2 -3
- package/dist/cjs/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/FilterPopoverV2.js +2 -3
- package/dist/esm/exported-related/FilterPopover/FilterPopoverV2.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/index.js +2 -3
- package/dist/esm/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/types/tests/filters/filter-popover-toggle.test.d.ts +1 -0
- package/package.json +30 -30
- package/dist/cjs/exported-related/FilterPopover/useOnClickOutside.js +0 -60
- package/dist/cjs/exported-related/FilterPopover/useOnClickOutside.js.map +0 -7
- package/dist/esm/exported-related/FilterPopover/useOnClickOutside.js +0 -30
- package/dist/esm/exported-related/FilterPopover/useOnClickOutside.js.map +0 -7
- package/dist/types/exported-related/FilterPopover/useOnClickOutside.d.ts +0 -1
|
@@ -42,7 +42,6 @@ var import_createInternalAndPropsContext = require("../../configs/useStore/creat
|
|
|
42
42
|
var import_constants = require("../../constants/index.js");
|
|
43
43
|
var import_useGetFilterHandlers = require("./useGetFilterHandlers.js");
|
|
44
44
|
var import_useGetFilterVisibility = require("./useGetFilterVisibility.js");
|
|
45
|
-
var import_useOnClickOutside = require("./useOnClickOutside.js");
|
|
46
45
|
var import_styled = require("./styled.js");
|
|
47
46
|
const FilterPopoverV2 = (props) => {
|
|
48
47
|
const {
|
|
@@ -81,9 +80,9 @@ const FilterPopoverV2 = (props) => {
|
|
|
81
80
|
externalReferenceElement: columnReference,
|
|
82
81
|
placement: "bottom-end",
|
|
83
82
|
withoutAnimation: true,
|
|
84
|
-
customOffset: [0, 0]
|
|
83
|
+
customOffset: [0, 0],
|
|
84
|
+
onClickOutside: handleClickOutsideMenu
|
|
85
85
|
});
|
|
86
|
-
(0, import_useOnClickOutside.useOnClickOutside)(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);
|
|
87
86
|
const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
|
|
88
87
|
firstElementRef,
|
|
89
88
|
lastElementRef
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/FilterPopover/FilterPopoverV2.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\n\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport type { FilterPopoverV2Props } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\n\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport type { FilterPopoverV2Props } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopoverV2: React.ComponentType<FilterPopoverV2Props> = (props: FilterPopoverV2Props) => {\n const {\n column,\n customStyles,\n reduxHeader,\n menuContent,\n ariaLabel,\n triggerIcon,\n innerRef,\n columnReference,\n firstElementRef,\n onFilterSubmit,\n onFilterReset,\n } = props;\n\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: column.id,\n }),\n [column.id],\n );\n\n const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n const [isButtonFocused, setIsButtonFocused] = useState(false);\n const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n const lastElementRef = useRef<HTMLButtonElement>(null);\n const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n const {\n floatingStyles,\n isOpen: isFloatingOpen,\n refs,\n context,\n } = useFloatingContext({\n externallyControlledIsOpen: isMenuOpen,\n externalReferenceElement: columnReference,\n placement: 'bottom-end',\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: handleClickOutsideMenu,\n });\n const handleOnKeyDown = useFocusTrap({\n firstElementRef,\n lastElementRef,\n });\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n // This is here to prevent propagation, and not trigger the sort functionality\n onClick={(e) => e.stopPropagation()}\n onKeyDown={handleMenuOnKeyDown}\n >\n <FilterButton\n hide={!isIconVisible}\n data-testid={DATA_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON}\n getOwnerProps={getOwnerProps}\n >\n <DSButtonV3\n buttonType=\"icon\"\n size=\"s\"\n onClick={handleTriggerClick}\n onKeyDown={handleMenuOnKeyDown}\n onFocus={handleTriggerOnFocus}\n onBlur={handleTriggerOnBlur}\n innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n aria-label={ariaLabel}\n aria-hidden={!isButtonFocused}\n data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n >\n {triggerIcon}\n </DSButtonV3>\n </FilterButton>\n {refs.reference && (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{\n ...floatingStyles,\n ...customStyles,\n minWidth: 'min-content',\n }}\n context={context}\n data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n aria-label={`Filter by ${column.Header as string}`}\n role=\"dialog\"\n >\n <PopperContent getOwnerProps={getOwnerProps} onKeyDown={handleOnKeyDown} innerRef={boundaryRef}>\n <form onSubmit={onFilterSubmit}>\n {menuContent}\n <StyledDSDialogFooter>\n <DSButtonV3 onClick={onFilterReset} buttonType=\"outline\" size=\"s\">\n Reset\n </DSButtonV3>\n <DSButtonV3 type=\"submit\" innerRef={lastElementRef} size=\"s\">\n Apply\n </DSButtonV3>\n </StyledDSDialogFooter>\n </form>\n </PopperContent>\n </StyledFloatingWrapper>\n )}\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -42,7 +42,6 @@ var import_constants = require("../../configs/constants.js");
|
|
|
42
42
|
var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
|
|
43
43
|
var import_useGetFilterHandlers = require("./useGetFilterHandlers.js");
|
|
44
44
|
var import_useGetFilterVisibility = require("./useGetFilterVisibility.js");
|
|
45
|
-
var import_useOnClickOutside = require("./useOnClickOutside.js");
|
|
46
45
|
var import_styled = require("./styled.js");
|
|
47
46
|
const FilterPopover = (props) => {
|
|
48
47
|
const {
|
|
@@ -83,12 +82,12 @@ const FilterPopover = (props) => {
|
|
|
83
82
|
placement: "bottom-end",
|
|
84
83
|
customOffset: floatingOffset,
|
|
85
84
|
withoutAnimation: true,
|
|
86
|
-
placementOrderPreference: ["bottom-end", "top-end"]
|
|
85
|
+
placementOrderPreference: ["bottom-end", "top-end"],
|
|
86
|
+
onClickOutside: handleClickOutsideMenu
|
|
87
87
|
});
|
|
88
88
|
(0, import_react.useEffect)(() => {
|
|
89
89
|
void forceUpdatePosition();
|
|
90
90
|
}, [filters, forceUpdatePosition]);
|
|
91
|
-
(0, import_useOnClickOutside.useOnClickOutside)(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);
|
|
92
91
|
const popoverContentRef = (0, import_react.useRef)(null);
|
|
93
92
|
const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
|
|
94
93
|
firstElementRef,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/FilterPopover/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n const {\n column,\n customStyles,\n reduxHeader,\n menuContent,\n ariaLabel,\n triggerIcon,\n innerRef,\n columnReference,\n firstElementRef,\n lastElementRef,\n } = props;\n\n const filters = usePropsStore((state) => state.filters);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: column.id,\n }),\n [column.id],\n );\n\n const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n const floatingOffset = useMemo<[number, number]>(() => (columnReference ? [0, 1] : [5, 4]), [columnReference]);\n\n const externalReferenceElement = columnReference || buttonReference;\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n forceUpdatePosition,\n } = useFloatingContext({\n externallyControlledIsOpen: isMenuOpen,\n externalReferenceElement,\n placement: 'bottom-end',\n customOffset: floatingOffset,\n withoutAnimation: true,\n placementOrderPreference: ['bottom-end', 'top-end'],\n onClickOutside: handleClickOutsideMenu,\n });\n\n // When the filter bar changes height, re-compute the floating position\n useEffect(() => {\n void forceUpdatePosition();\n }, [filters, forceUpdatePosition]);\n\n const popoverContentRef = useRef<HTMLDivElement>(null);\n const handleOnKeyDown = useFocusTrap({\n firstElementRef,\n lastElementRef,\n });\n\n return (\n <div\n // This is here to prevent propagation, and not trigger the sort functionality\n onClick={(e) => e.stopPropagation()}\n onKeyDown={handleMenuOnKeyDown}\n >\n <FilterButton\n hide={!isIconVisible}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n getOwnerProps={getOwnerProps}\n >\n <DSButtonV2\n buttonType=\"icon\"\n size=\"s\"\n onClick={handleTriggerClick}\n onFocus={handleTriggerOnFocus}\n onBlur={handleTriggerOnBlur}\n innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n aria-label={ariaLabel}\n aria-hidden={!isButtonFocused}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n >\n {triggerIcon}\n </DSButtonV2>\n </FilterButton>\n {(columnReference || buttonReference) && (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{\n ...floatingStyles,\n ...customStyles,\n minWidth: column.ref?.current?.offsetWidth ?? '0px',\n }}\n context={context}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n role=\"dialog\"\n aria-label={`Filter by ${column.Header as string}`}\n >\n <PopperContent getOwnerProps={getOwnerProps} innerRef={popoverContentRef} onKeyDown={handleOnKeyDown}>\n {menuContent}\n </PopperContent>\n </StyledFloatingWrapper>\n )}\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,7 +9,6 @@ import { usePropsStore } from "../../configs/useStore/createInternalAndPropsCont
|
|
|
9
9
|
import { DATA_TABLE_DATA_TESTID } from "../../constants/index.js";
|
|
10
10
|
import { useGetFilterHandlers } from "./useGetFilterHandlers.js";
|
|
11
11
|
import { useGetFilterVisibility } from "./useGetFilterVisibility.js";
|
|
12
|
-
import { useOnClickOutside } from "./useOnClickOutside.js";
|
|
13
12
|
import { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from "./styled.js";
|
|
14
13
|
const FilterPopoverV2 = (props) => {
|
|
15
14
|
const {
|
|
@@ -48,9 +47,9 @@ const FilterPopoverV2 = (props) => {
|
|
|
48
47
|
externalReferenceElement: columnReference,
|
|
49
48
|
placement: "bottom-end",
|
|
50
49
|
withoutAnimation: true,
|
|
51
|
-
customOffset: [0, 0]
|
|
50
|
+
customOffset: [0, 0],
|
|
51
|
+
onClickOutside: handleClickOutsideMenu
|
|
52
52
|
});
|
|
53
|
-
useOnClickOutside(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);
|
|
54
53
|
const handleOnKeyDown = useFocusTrap({
|
|
55
54
|
firstElementRef,
|
|
56
55
|
lastElementRef
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/FilterPopoverV2.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\n\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport type { FilterPopoverV2Props } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\n\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useRef, useState } from 'react';\n\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DATA_TABLE_DATA_TESTID } from '../../constants/index.js';\nimport type { FilterPopoverV2Props } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledDSDialogFooter, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopoverV2: React.ComponentType<FilterPopoverV2Props> = (props: FilterPopoverV2Props) => {\n const {\n column,\n customStyles,\n reduxHeader,\n menuContent,\n ariaLabel,\n triggerIcon,\n innerRef,\n columnReference,\n firstElementRef,\n onFilterSubmit,\n onFilterReset,\n } = props;\n\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: column.id,\n }),\n [column.id],\n );\n\n const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n const [isButtonFocused, setIsButtonFocused] = useState(false);\n const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n const lastElementRef = useRef<HTMLButtonElement>(null);\n const boundaryRef = useRef<HTMLDivElement | null>(null);\n\n const {\n floatingStyles,\n isOpen: isFloatingOpen,\n refs,\n context,\n } = useFloatingContext({\n externallyControlledIsOpen: isMenuOpen,\n externalReferenceElement: columnReference,\n placement: 'bottom-end',\n withoutAnimation: true,\n customOffset: [0, 0],\n onClickOutside: handleClickOutsideMenu,\n });\n const handleOnKeyDown = useFocusTrap({\n firstElementRef,\n lastElementRef,\n });\n\n return (\n // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n <div\n // This is here to prevent propagation, and not trigger the sort functionality\n onClick={(e) => e.stopPropagation()}\n onKeyDown={handleMenuOnKeyDown}\n >\n <FilterButton\n hide={!isIconVisible}\n data-testid={DATA_TABLE_DATA_TESTID.FILTER_POPOVER_BUTTON}\n getOwnerProps={getOwnerProps}\n >\n <DSButtonV3\n buttonType=\"icon\"\n size=\"s\"\n onClick={handleTriggerClick}\n onKeyDown={handleMenuOnKeyDown}\n onFocus={handleTriggerOnFocus}\n onBlur={handleTriggerOnBlur}\n innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n aria-label={ariaLabel}\n aria-hidden={!isButtonFocused}\n data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n >\n {triggerIcon}\n </DSButtonV3>\n </FilterButton>\n {refs.reference && (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{\n ...floatingStyles,\n ...customStyles,\n minWidth: 'min-content',\n }}\n context={context}\n data-testid={DATA_TABLE_DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n aria-label={`Filter by ${column.Header as string}`}\n role=\"dialog\"\n >\n <PopperContent getOwnerProps={getOwnerProps} onKeyDown={handleOnKeyDown} innerRef={boundaryRef}>\n <form onSubmit={onFilterSubmit}>\n {menuContent}\n <StyledDSDialogFooter>\n <DSButtonV3 onClick={onFilterReset} buttonType=\"outline\" size=\"s\">\n Reset\n </DSButtonV3>\n <DSButtonV3 type=\"submit\" innerRef={lastElementRef} size=\"s\">\n Apply\n </DSButtonV3>\n </StyledDSDialogFooter>\n </form>\n </PopperContent>\n </StyledFloatingWrapper>\n )}\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -9,7 +9,6 @@ import { DATA_TESTID } from "../../configs/constants.js";
|
|
|
9
9
|
import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
|
|
10
10
|
import { useGetFilterHandlers } from "./useGetFilterHandlers.js";
|
|
11
11
|
import { useGetFilterVisibility } from "./useGetFilterVisibility.js";
|
|
12
|
-
import { useOnClickOutside } from "./useOnClickOutside.js";
|
|
13
12
|
import { FilterButton, PopperContent, StyledFloatingWrapper } from "./styled.js";
|
|
14
13
|
const FilterPopover = (props) => {
|
|
15
14
|
const {
|
|
@@ -50,12 +49,12 @@ const FilterPopover = (props) => {
|
|
|
50
49
|
placement: "bottom-end",
|
|
51
50
|
customOffset: floatingOffset,
|
|
52
51
|
withoutAnimation: true,
|
|
53
|
-
placementOrderPreference: ["bottom-end", "top-end"]
|
|
52
|
+
placementOrderPreference: ["bottom-end", "top-end"],
|
|
53
|
+
onClickOutside: handleClickOutsideMenu
|
|
54
54
|
});
|
|
55
55
|
useEffect(() => {
|
|
56
56
|
void forceUpdatePosition();
|
|
57
57
|
}, [filters, forceUpdatePosition]);
|
|
58
|
-
useOnClickOutside(isMenuOpen ? refs.floating : null, handleClickOutsideMenu);
|
|
59
58
|
const popoverContentRef = useRef(null);
|
|
60
59
|
const handleOnKeyDown = useFocusTrap({
|
|
61
60
|
firstElementRef,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport {
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { useFocusTrap } from '@elliemae/ds-hooks-focus-trap';\nimport { useFloatingContext } from '@elliemae/ds-floating-context';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport { FilterButton, PopperContent, StyledFloatingWrapper } from './styled.js';\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n const {\n column,\n customStyles,\n reduxHeader,\n menuContent,\n ariaLabel,\n triggerIcon,\n innerRef,\n columnReference,\n firstElementRef,\n lastElementRef,\n } = props;\n\n const filters = usePropsStore((state) => state.filters);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: column.id,\n }),\n [column.id],\n );\n\n const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n const floatingOffset = useMemo<[number, number]>(() => (columnReference ? [0, 1] : [5, 4]), [columnReference]);\n\n const externalReferenceElement = columnReference || buttonReference;\n\n const {\n refs,\n floatingStyles,\n context,\n isOpen: isFloatingOpen,\n forceUpdatePosition,\n } = useFloatingContext({\n externallyControlledIsOpen: isMenuOpen,\n externalReferenceElement,\n placement: 'bottom-end',\n customOffset: floatingOffset,\n withoutAnimation: true,\n placementOrderPreference: ['bottom-end', 'top-end'],\n onClickOutside: handleClickOutsideMenu,\n });\n\n // When the filter bar changes height, re-compute the floating position\n useEffect(() => {\n void forceUpdatePosition();\n }, [filters, forceUpdatePosition]);\n\n const popoverContentRef = useRef<HTMLDivElement>(null);\n const handleOnKeyDown = useFocusTrap({\n firstElementRef,\n lastElementRef,\n });\n\n return (\n <div\n // This is here to prevent propagation, and not trigger the sort functionality\n onClick={(e) => e.stopPropagation()}\n onKeyDown={handleMenuOnKeyDown}\n >\n <FilterButton\n hide={!isIconVisible}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n getOwnerProps={getOwnerProps}\n >\n <DSButtonV2\n buttonType=\"icon\"\n size=\"s\"\n onClick={handleTriggerClick}\n onFocus={handleTriggerOnFocus}\n onBlur={handleTriggerOnBlur}\n innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n aria-label={ariaLabel}\n aria-hidden={!isButtonFocused}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n >\n {triggerIcon}\n </DSButtonV2>\n </FilterButton>\n {(columnReference || buttonReference) && (\n <StyledFloatingWrapper\n innerRef={refs.setFloating}\n isOpen={isFloatingOpen}\n floatingStyles={{\n ...floatingStyles,\n ...customStyles,\n minWidth: column.ref?.current?.offsetWidth ?? '0px',\n }}\n context={context}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n role=\"dialog\"\n aria-label={`Filter by ${column.Header as string}`}\n >\n <PopperContent getOwnerProps={getOwnerProps} innerRef={popoverContentRef} onKeyDown={handleOnKeyDown}>\n {menuContent}\n </PopperContent>\n </StyledFloatingWrapper>\n )}\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+EnB,SAUI,KAVJ;AA5EJ,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,iBAAiB;AAC1B,SAAgB,aAAa,WAAW,SAAS,QAAQ,gBAAgB;AACzE,SAAS,mBAAmB;AAC5B,SAAS,qBAAqB;AAE9B,SAAS,4BAA4B;AACrC,SAAS,8BAA8B;AACvC,SAAS,cAAc,eAAe,6BAA6B;AAE5D,MAAM,gBAAyD,CAAC,UAA8B;AACnG,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AAEJ,QAAM,UAAU,cAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU,OAAO;AAAA,IACnB;AAAA,IACA,CAAC,OAAO,EAAE;AAAA,EACZ;AAEA,QAAM,EAAE,eAAe,WAAW,IAAI,uBAAuB,WAAW;AAExE,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAmC,IAAI;AACrF,QAAM,CAAC,iBAAiB,kBAAkB,IAAI,SAAS,KAAK;AAE5D,QAAM,EAAE,oBAAoB,wBAAwB,qBAAqB,sBAAsB,oBAAoB,IACjH,qBAAqB,OAAO,YAAY,iBAAiB,kBAAkB;AAE7E,QAAM,iBAAiB,QAA0B,MAAO,kBAAkB,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,GAAI,CAAC,eAAe,CAAC;AAE7G,QAAM,2BAA2B,mBAAmB;AAEpD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,EACF,IAAI,mBAAmB;AAAA,IACrB,4BAA4B;AAAA,IAC5B;AAAA,IACA,WAAW;AAAA,IACX,cAAc;AAAA,IACd,kBAAkB;AAAA,IAClB,0BAA0B,CAAC,cAAc,SAAS;AAAA,IAClD,gBAAgB;AAAA,EAClB,CAAC;AAGD,YAAU,MAAM;AACd,SAAK,oBAAoB;AAAA,EAC3B,GAAG,CAAC,SAAS,mBAAmB,CAAC;AAEjC,QAAM,oBAAoB,OAAuB,IAAI;AACrD,QAAM,kBAAkB,aAAa;AAAA,IACnC;AAAA,IACA;AAAA,EACF,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS,CAAC,MAAM,EAAE,gBAAgB;AAAA,MAClC,WAAW;AAAA,MAEX;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM,CAAC;AAAA,YACP,eAAa,YAAY;AAAA,YACzB;AAAA,YAEA;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,SAAS;AAAA,gBACT,QAAQ;AAAA,gBACR,UAAU,UAAU,iBAAiB,oBAAoB,QAAQ;AAAA,gBACjE,UAAU,aAAa,eAAe,IAAI;AAAA,gBAC1C,cAAY;AAAA,gBACZ,eAAa,CAAC;AAAA,gBACd,eAAa,YAAY;AAAA,gBAExB;AAAA;AAAA,YACH;AAAA;AAAA,QACF;AAAA,SACE,mBAAmB,oBACnB;AAAA,UAAC;AAAA;AAAA,YACC,UAAU,KAAK;AAAA,YACf,QAAQ;AAAA,YACR,gBAAgB;AAAA,cACd,GAAG;AAAA,cACH,GAAG;AAAA,cACH,UAAU,OAAO,KAAK,SAAS,eAAe;AAAA,YAChD;AAAA,YACA;AAAA,YACA,eAAa,YAAY;AAAA,YACzB;AAAA,YACA;AAAA,YACA,MAAK;AAAA,YACL,cAAY,aAAa,OAAO,MAAgB;AAAA,YAEhD,8BAAC,iBAAc,eAA8B,UAAU,mBAAmB,WAAW,iBAClF,uBACH;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.14",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -41,40 +41,40 @@
|
|
|
41
41
|
"react-virtual": "~2.10.4",
|
|
42
42
|
"uid": "^2.0.2",
|
|
43
43
|
"use-onclickoutside": "0.4.1",
|
|
44
|
-
"@elliemae/ds-button-v2": "3.70.0-next.
|
|
45
|
-
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.
|
|
46
|
-
"@elliemae/ds-
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-
|
|
49
|
-
"@elliemae/ds-
|
|
50
|
-
"@elliemae/ds-
|
|
51
|
-
"@elliemae/ds-form-combobox": "3.70.0-next.
|
|
52
|
-
"@elliemae/ds-form-date-time-picker": "3.70.0-next.
|
|
53
|
-
"@elliemae/ds-form-date-range-picker": "3.70.0-next.
|
|
54
|
-
"@elliemae/ds-form-
|
|
55
|
-
"@elliemae/ds-form-
|
|
56
|
-
"@elliemae/ds-form-radio": "3.70.0-next.
|
|
57
|
-
"@elliemae/ds-
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-
|
|
60
|
-
"@elliemae/ds-
|
|
61
|
-
"@elliemae/ds-
|
|
62
|
-
"@elliemae/ds-
|
|
63
|
-
"@elliemae/ds-
|
|
64
|
-
"@elliemae/ds-props-helpers": "3.70.0-next.
|
|
65
|
-
"@elliemae/ds-skeleton": "3.70.0-next.
|
|
66
|
-
"@elliemae/ds-system": "3.70.0-next.
|
|
67
|
-
"@elliemae/ds-typescript-helpers": "3.70.0-next.
|
|
68
|
-
"@elliemae/ds-zustand-helpers": "3.70.0-next.
|
|
44
|
+
"@elliemae/ds-button-v2": "3.70.0-next.14",
|
|
45
|
+
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.14",
|
|
46
|
+
"@elliemae/ds-floating-context": "3.70.0-next.14",
|
|
47
|
+
"@elliemae/ds-dialog": "3.70.0-next.14",
|
|
48
|
+
"@elliemae/ds-drag-and-drop": "3.70.0-next.14",
|
|
49
|
+
"@elliemae/ds-dropdownmenu-v2": "3.70.0-next.14",
|
|
50
|
+
"@elliemae/ds-form-checkbox": "3.70.0-next.14",
|
|
51
|
+
"@elliemae/ds-form-combobox": "3.70.0-next.14",
|
|
52
|
+
"@elliemae/ds-form-date-time-picker": "3.70.0-next.14",
|
|
53
|
+
"@elliemae/ds-form-date-range-picker": "3.70.0-next.14",
|
|
54
|
+
"@elliemae/ds-form-input-text": "3.70.0-next.14",
|
|
55
|
+
"@elliemae/ds-form-layout-blocks": "3.70.0-next.14",
|
|
56
|
+
"@elliemae/ds-form-radio": "3.70.0-next.14",
|
|
57
|
+
"@elliemae/ds-hooks-focus-trap": "3.70.0-next.14",
|
|
58
|
+
"@elliemae/ds-icons": "3.70.0-next.14",
|
|
59
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.14",
|
|
60
|
+
"@elliemae/ds-grid": "3.70.0-next.14",
|
|
61
|
+
"@elliemae/ds-menu-button": "3.70.0-next.14",
|
|
62
|
+
"@elliemae/ds-pagination": "3.70.0-next.14",
|
|
63
|
+
"@elliemae/ds-pills-v2": "3.70.0-next.14",
|
|
64
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.14",
|
|
65
|
+
"@elliemae/ds-skeleton": "3.70.0-next.14",
|
|
66
|
+
"@elliemae/ds-system": "3.70.0-next.14",
|
|
67
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.14",
|
|
68
|
+
"@elliemae/ds-zustand-helpers": "3.70.0-next.14"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"jest": "^30.0.0",
|
|
72
72
|
"styled-components": "~5.3.9",
|
|
73
73
|
"styled-system": "^5.1.5",
|
|
74
|
-
"@elliemae/ds-
|
|
75
|
-
"@elliemae/ds-
|
|
76
|
-
"@elliemae/ds-
|
|
77
|
-
"@elliemae/ds-
|
|
74
|
+
"@elliemae/ds-tabs": "3.70.0-next.14",
|
|
75
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.14",
|
|
76
|
+
"@elliemae/ds-toolbar-v2": "3.70.0-next.14",
|
|
77
|
+
"@elliemae/ds-test-utils": "3.70.0-next.14"
|
|
78
78
|
},
|
|
79
79
|
"peerDependencies": {
|
|
80
80
|
"lodash-es": "^4.17.21",
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var useOnClickOutside_exports = {};
|
|
30
|
-
__export(useOnClickOutside_exports, {
|
|
31
|
-
useOnClickOutside: () => useOnClickOutside
|
|
32
|
-
});
|
|
33
|
-
module.exports = __toCommonJS(useOnClickOutside_exports);
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = __toESM(require("react"));
|
|
36
|
-
function useOnClickOutside(ref, cb) {
|
|
37
|
-
const cbRef = import_react.default.useRef(cb);
|
|
38
|
-
(0, import_react.useEffect)(() => {
|
|
39
|
-
cbRef.current = cb;
|
|
40
|
-
}, [cb]);
|
|
41
|
-
(0, import_react.useEffect)(() => {
|
|
42
|
-
if (!ref) {
|
|
43
|
-
return () => {
|
|
44
|
-
};
|
|
45
|
-
}
|
|
46
|
-
const listener = (event) => {
|
|
47
|
-
const target = event.target;
|
|
48
|
-
if (!target) return;
|
|
49
|
-
if (ref.contains(target)) return;
|
|
50
|
-
cbRef.current(event);
|
|
51
|
-
};
|
|
52
|
-
document.addEventListener("mousedown", listener, true);
|
|
53
|
-
document.addEventListener("touchstart", listener, true);
|
|
54
|
-
return () => {
|
|
55
|
-
document.removeEventListener("mousedown", listener, true);
|
|
56
|
-
document.removeEventListener("touchstart", listener, true);
|
|
57
|
-
};
|
|
58
|
-
}, [ref]);
|
|
59
|
-
}
|
|
60
|
-
//# sourceMappingURL=useOnClickOutside.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/exported-related/FilterPopover/useOnClickOutside.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect } from 'react';\n\nexport function useOnClickOutside<T extends Node>(ref: T | null, cb: (event: Event) => void): void {\n const cbRef = React.useRef(cb);\n\n useEffect(() => {\n cbRef.current = cb;\n }, [cb]);\n\n useEffect(() => {\n if (!ref) {\n return () => {};\n }\n\n const listener = (event: MouseEvent | TouchEvent) => {\n const target = event.target as Node | null;\n if (!target) return;\n\n if (ref.contains(target)) return;\n\n cbRef.current(event);\n };\n\n document.addEventListener('mousedown', listener, true);\n document.addEventListener('touchstart', listener, true);\n\n return () => {\n document.removeEventListener('mousedown', listener, true);\n document.removeEventListener('touchstart', listener, true);\n };\n }, [ref]);\n}\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,mBAAiC;AAE1B,SAAS,kBAAkC,KAAe,IAAkC;AACjG,QAAM,QAAQ,aAAAA,QAAM,OAAO,EAAE;AAE7B,8BAAU,MAAM;AACd,UAAM,UAAU;AAAA,EAClB,GAAG,CAAC,EAAE,CAAC;AAEP,8BAAU,MAAM;AACd,QAAI,CAAC,KAAK;AACR,aAAO,MAAM;AAAA,MAAC;AAAA,IAChB;AAEA,UAAM,WAAW,CAAC,UAAmC;AACnD,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AAEb,UAAI,IAAI,SAAS,MAAM,EAAG;AAE1B,YAAM,QAAQ,KAAK;AAAA,IACrB;AAEA,aAAS,iBAAiB,aAAa,UAAU,IAAI;AACrD,aAAS,iBAAiB,cAAc,UAAU,IAAI;AAEtD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,UAAU,IAAI;AACxD,eAAS,oBAAoB,cAAc,UAAU,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACV;",
|
|
6
|
-
"names": ["React"]
|
|
7
|
-
}
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import React2, { useEffect } from "react";
|
|
3
|
-
function useOnClickOutside(ref, cb) {
|
|
4
|
-
const cbRef = React2.useRef(cb);
|
|
5
|
-
useEffect(() => {
|
|
6
|
-
cbRef.current = cb;
|
|
7
|
-
}, [cb]);
|
|
8
|
-
useEffect(() => {
|
|
9
|
-
if (!ref) {
|
|
10
|
-
return () => {
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
const listener = (event) => {
|
|
14
|
-
const target = event.target;
|
|
15
|
-
if (!target) return;
|
|
16
|
-
if (ref.contains(target)) return;
|
|
17
|
-
cbRef.current(event);
|
|
18
|
-
};
|
|
19
|
-
document.addEventListener("mousedown", listener, true);
|
|
20
|
-
document.addEventListener("touchstart", listener, true);
|
|
21
|
-
return () => {
|
|
22
|
-
document.removeEventListener("mousedown", listener, true);
|
|
23
|
-
document.removeEventListener("touchstart", listener, true);
|
|
24
|
-
};
|
|
25
|
-
}, [ref]);
|
|
26
|
-
}
|
|
27
|
-
export {
|
|
28
|
-
useOnClickOutside
|
|
29
|
-
};
|
|
30
|
-
//# sourceMappingURL=useOnClickOutside.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/exported-related/FilterPopover/useOnClickOutside.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useEffect } from 'react';\n\nexport function useOnClickOutside<T extends Node>(ref: T | null, cb: (event: Event) => void): void {\n const cbRef = React.useRef(cb);\n\n useEffect(() => {\n cbRef.current = cb;\n }, [cb]);\n\n useEffect(() => {\n if (!ref) {\n return () => {};\n }\n\n const listener = (event: MouseEvent | TouchEvent) => {\n const target = event.target as Node | null;\n if (!target) return;\n\n if (ref.contains(target)) return;\n\n cbRef.current(event);\n };\n\n document.addEventListener('mousedown', listener, true);\n document.addEventListener('touchstart', listener, true);\n\n return () => {\n document.removeEventListener('mousedown', listener, true);\n document.removeEventListener('touchstart', listener, true);\n };\n }, [ref]);\n}\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,UAAS,iBAAiB;AAE1B,SAAS,kBAAkC,KAAe,IAAkC;AACjG,QAAM,QAAQA,OAAM,OAAO,EAAE;AAE7B,YAAU,MAAM;AACd,UAAM,UAAU;AAAA,EAClB,GAAG,CAAC,EAAE,CAAC;AAEP,YAAU,MAAM;AACd,QAAI,CAAC,KAAK;AACR,aAAO,MAAM;AAAA,MAAC;AAAA,IAChB;AAEA,UAAM,WAAW,CAAC,UAAmC;AACnD,YAAM,SAAS,MAAM;AACrB,UAAI,CAAC,OAAQ;AAEb,UAAI,IAAI,SAAS,MAAM,EAAG;AAE1B,YAAM,QAAQ,KAAK;AAAA,IACrB;AAEA,aAAS,iBAAiB,aAAa,UAAU,IAAI;AACrD,aAAS,iBAAiB,cAAc,UAAU,IAAI;AAEtD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,UAAU,IAAI;AACxD,eAAS,oBAAoB,cAAc,UAAU,IAAI;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,GAAG,CAAC;AACV;",
|
|
6
|
-
"names": ["React"]
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function useOnClickOutside<T extends Node>(ref: T | null, cb: (event: Event) => void): void;
|