@elliemae/ds-data-table 3.0.0-alpha.2 → 3.0.0-alpha.3
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.
|
@@ -110,7 +110,7 @@ const FilterPopover = ({
|
|
|
110
110
|
style: { display: "flex" },
|
|
111
111
|
onBlur: (e) => {
|
|
112
112
|
if (e.target !== referenceElement && !popperRef.current?.contains(e.relatedTarget)) {
|
|
113
|
-
referenceElement
|
|
113
|
+
referenceElement?.focus();
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
}, /* @__PURE__ */ import_react.default.createElement(FilterButton, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/exported-related/FilterPopover.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { MutableRefObject, useRef, useState } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport styled from 'styled-components';\nimport { useDispatchHeadersActions } from '../redux/reducers';\nimport { DATA_TESTID } from '../configs/constants';\nimport { TypescriptColumn } from '../types/props';\n\nconst FilterButton = styled.span<{ hide: boolean }>`\n display: inline-grid;\n ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst Button = styled(DSButton)`\n position: relative;\n justify-self: flex-end;\n`;\n\nconst PopperContent = styled.div`\n background-color: #fff;\n`;\ninterface FilterPopoverProps {\n column: TypescriptColumn;\n columnId: string;\n triggerIcon: JSX.Element;\n menuContent: JSX.Element;\n onTriggerClick?: (id: string, e: UIEvent) => void;\n onClickOutsideMenu?: (id: string, e: UIEvent) => void;\n reduxHeader: { hideFilterButton: boolean; hideFilterMenu: boolean; withTabStops: boolean };\n innerRef: MutableRefObject<HTMLDivElement>;\n ariaLabel: string;\n customStyles?: React.CSSProperties;\n}\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = ({\n column,\n columnId,\n triggerIcon,\n menuContent,\n onTriggerClick = () => null,\n onClickOutsideMenu = () => null,\n reduxHeader,\n innerRef,\n ariaLabel,\n customStyles,\n}) => {\n const { hideFilterButton, hideFilterMenu } = reduxHeader || {\n hideFilterButton: true,\n hideFilterMenu: true,\n };\n const popperRef = useRef(null);\n const { patchHeaderFilterButtonAndMenu, patchHeader } = useDispatchHeadersActions();\n const isIconVisible = !hideFilterButton || !hideFilterMenu;\n const isMenuOpen = !hideFilterMenu;\n\n const handleClickOutsideMenu = (e) => {\n onClickOutsideMenu(columnId, e);\n if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n };\n\n const handleTriggerClick = (e) => {\n onTriggerClick(columnId, e);\n patchHeaderFilterButtonAndMenu(columnId, false);\n e.stopPropagation();\n };\n\n const [referenceElement, setReferenceElement] = useState(null);\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={(e) => {\n e.stopPropagation();\n if (e.code === 'Escape') {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n referenceElement.focus();\n }\n // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n // so we just prevent default behaviour in this case\n if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n e.preventDefault();\n }\n }}\n style={{ display: 'flex' }}\n onBlur={(e) => {\n if (e.target !== referenceElement && !popperRef.current?.contains(e.relatedTarget)) {\n referenceElement
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA0D;AAC1D,uBAAyB;AACzB,yBAA2B;AAC3B,+BAAmB;AACnB,sBAA0C;AAC1C,uBAA4B;AAG5B,MAAM,eAAe,iCAAO;AAAA;AAAA,IAExB,CAAC,UAAW,MAAM,OAAO,yCAAyC;AAAA;AAGtE,MAAM,SAAS,sCAAO;AAAA;AAAA;AAAA;AAKtB,MAAM,gBAAgB,iCAAO;AAAA;AAAA;AAgBtB,MAAM,gBAAyD,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,qBAAqB,MAAM;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,EAAE,kBAAkB,mBAAmB,eAAe;AAAA,IAC1D,kBAAkB;AAAA,IAClB,gBAAgB;AAAA;AAElB,QAAM,YAAY,yBAAO;AACzB,QAAM,EAAE,gCAAgC,gBAAgB;AACxD,QAAM,gBAAgB,CAAC,oBAAoB,CAAC;AAC5C,QAAM,aAAa,CAAC;AAEpB,QAAM,yBAAyB,CAAC,MAAM;AACpC,uBAAmB,UAAU;AAC7B,QAAI;AAAY,qCAA+B,UAAU;AAAA;AAG3D,QAAM,qBAAqB,CAAC,MAAM;AAChC,mBAAe,UAAU;AACzB,mCAA+B,UAAU;AACzC,MAAE;AAAA;AAGJ,QAAM,CAAC,kBAAkB,uBAAuB,2BAAS;AAEzD,SACE,mDAAC,OAAD;AAAA,IAEE,SAAS,CAAC,MAAM,EAAE;AAAA,IAClB,WAAW,CAAC,MAAM;AAChB,QAAE;AACF,UAAI,EAAE,SAAS,UAAU;AACvB,oBAAY,UAAU,EAAE,gBAAgB,MAAM,kBAAkB;AAChE,yBAAiB;AAAA;AAInB,UAAI,CAAC,WAAW,aAAa,SAAS,EAAE,OAAO;AAC7C,UAAE;AAAA;AAAA;AAAA,IAGN,OAAO,EAAE,SAAS;AAAA,IAClB,QAAQ,CAAC,MAAM;AACb,UAAI,EAAE,WAAW,oBAAoB,CAAC,UAAU,SAAS,SAAS,EAAE,gBAAgB;AAClF,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable react/prop-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { MutableRefObject, useRef, useState } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport styled from 'styled-components';\nimport { useDispatchHeadersActions } from '../redux/reducers';\nimport { DATA_TESTID } from '../configs/constants';\nimport { TypescriptColumn } from '../types/props';\n\nconst FilterButton = styled.span<{ hide: boolean }>`\n display: inline-grid;\n ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst Button = styled(DSButton)`\n position: relative;\n justify-self: flex-end;\n`;\n\nconst PopperContent = styled.div`\n background-color: #fff;\n`;\ninterface FilterPopoverProps {\n column: TypescriptColumn;\n columnId: string;\n triggerIcon: JSX.Element;\n menuContent: JSX.Element;\n onTriggerClick?: (id: string, e: UIEvent) => void;\n onClickOutsideMenu?: (id: string, e: UIEvent) => void;\n reduxHeader: { hideFilterButton: boolean; hideFilterMenu: boolean; withTabStops: boolean };\n innerRef: MutableRefObject<HTMLDivElement>;\n ariaLabel: string;\n customStyles?: React.CSSProperties;\n}\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = ({\n column,\n columnId,\n triggerIcon,\n menuContent,\n onTriggerClick = () => null,\n onClickOutsideMenu = () => null,\n reduxHeader,\n innerRef,\n ariaLabel,\n customStyles,\n}) => {\n const { hideFilterButton, hideFilterMenu } = reduxHeader || {\n hideFilterButton: true,\n hideFilterMenu: true,\n };\n const popperRef = useRef(null);\n const { patchHeaderFilterButtonAndMenu, patchHeader } = useDispatchHeadersActions();\n const isIconVisible = !hideFilterButton || !hideFilterMenu;\n const isMenuOpen = !hideFilterMenu;\n\n const handleClickOutsideMenu = (e) => {\n onClickOutsideMenu(columnId, e);\n if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n };\n\n const handleTriggerClick = (e) => {\n onTriggerClick(columnId, e);\n patchHeaderFilterButtonAndMenu(columnId, false);\n e.stopPropagation();\n };\n\n const [referenceElement, setReferenceElement] = useState(null);\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={(e) => {\n e.stopPropagation();\n if (e.code === 'Escape') {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n referenceElement.focus();\n }\n // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n // so we just prevent default behaviour in this case\n if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n e.preventDefault();\n }\n }}\n style={{ display: 'flex' }}\n onBlur={(e) => {\n if (e.target !== referenceElement && !popperRef.current?.contains(e.relatedTarget)) {\n referenceElement?.focus();\n }\n }}\n >\n <FilterButton hide={!isIconVisible} data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}>\n <Button\n onClick={handleTriggerClick}\n buttonType=\"text\"\n aria-label={ariaLabel}\n aria-hidden=\"true\"\n size=\"s\"\n leftIcon={triggerIcon}\n // implement treeview mergerefs\n innerRef={(_ref) => {\n if (isIconVisible) setReferenceElement(_ref);\n innerRef.current = _ref;\n }}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n />\n </FilterButton>\n {referenceElement && (\n <DSPopperJS\n referenceElement={referenceElement}\n showPopover={isMenuOpen}\n closeContextMenu={handleClickOutsideMenu}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n startPlacementPreference=\"bottom-end\"\n customOffset={[5, 4]}\n withoutArrow\n zIndex={10}\n withoutAnimation\n extraPopperStyles={{\n ...customStyles,\n minWidth: column.ref?.current?.offsetWidth ?? '0px',\n }}\n placementOrderPreference={['bottom-end']}\n >\n <PopperContent\n onKeyDown={(e) => {\n if (e.code === 'Tab') {\n setTimeout(() => {\n if (!popperRef?.current?.contains(document.activeElement)) {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n }\n });\n }\n }}\n ref={popperRef}\n >\n {menuContent}\n </PopperContent>\n </DSPopperJS>\n )}\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAA0D;AAC1D,uBAAyB;AACzB,yBAA2B;AAC3B,+BAAmB;AACnB,sBAA0C;AAC1C,uBAA4B;AAG5B,MAAM,eAAe,iCAAO;AAAA;AAAA,IAExB,CAAC,UAAW,MAAM,OAAO,yCAAyC;AAAA;AAGtE,MAAM,SAAS,sCAAO;AAAA;AAAA;AAAA;AAKtB,MAAM,gBAAgB,iCAAO;AAAA;AAAA;AAgBtB,MAAM,gBAAyD,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,qBAAqB,MAAM;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,EAAE,kBAAkB,mBAAmB,eAAe;AAAA,IAC1D,kBAAkB;AAAA,IAClB,gBAAgB;AAAA;AAElB,QAAM,YAAY,yBAAO;AACzB,QAAM,EAAE,gCAAgC,gBAAgB;AACxD,QAAM,gBAAgB,CAAC,oBAAoB,CAAC;AAC5C,QAAM,aAAa,CAAC;AAEpB,QAAM,yBAAyB,CAAC,MAAM;AACpC,uBAAmB,UAAU;AAC7B,QAAI;AAAY,qCAA+B,UAAU;AAAA;AAG3D,QAAM,qBAAqB,CAAC,MAAM;AAChC,mBAAe,UAAU;AACzB,mCAA+B,UAAU;AACzC,MAAE;AAAA;AAGJ,QAAM,CAAC,kBAAkB,uBAAuB,2BAAS;AAEzD,SACE,mDAAC,OAAD;AAAA,IAEE,SAAS,CAAC,MAAM,EAAE;AAAA,IAClB,WAAW,CAAC,MAAM;AAChB,QAAE;AACF,UAAI,EAAE,SAAS,UAAU;AACvB,oBAAY,UAAU,EAAE,gBAAgB,MAAM,kBAAkB;AAChE,yBAAiB;AAAA;AAInB,UAAI,CAAC,WAAW,aAAa,SAAS,EAAE,OAAO;AAC7C,UAAE;AAAA;AAAA;AAAA,IAGN,OAAO,EAAE,SAAS;AAAA,IAClB,QAAQ,CAAC,MAAM;AACb,UAAI,EAAE,WAAW,oBAAoB,CAAC,UAAU,SAAS,SAAS,EAAE,gBAAgB;AAClF,0BAAkB;AAAA;AAAA;AAAA,KAItB,mDAAC,cAAD;AAAA,IAAc,MAAM,CAAC;AAAA,IAAe,eAAa,6BAAY;AAAA,KAC3D,mDAAC,QAAD;AAAA,IACE,SAAS;AAAA,IACT,YAAW;AAAA,IACX,cAAY;AAAA,IACZ,eAAY;AAAA,IACZ,MAAK;AAAA,IACL,UAAU;AAAA,IAEV,UAAU,CAAC,SAAS;AAClB,UAAI;AAAe,4BAAoB;AACvC,eAAS,UAAU;AAAA;AAAA,IAErB,UAAU,aAAa,eAAe,IAAI;AAAA,OAG7C,oBACC,mDAAC,+BAAD;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,eAAa,6BAAY;AAAA,IACzB,0BAAyB;AAAA,IACzB,cAAc,CAAC,GAAG;AAAA,IAClB,cAAY;AAAA,IACZ,QAAQ;AAAA,IACR,kBAAgB;AAAA,IAChB,mBAAmB,iCACd,eADc;AAAA,MAEjB,UAAU,OAAO,KAAK,SAAS,eAAe;AAAA;AAAA,IAEhD,0BAA0B,CAAC;AAAA,KAE3B,mDAAC,eAAD;AAAA,IACE,WAAW,CAAC,MAAM;AAChB,UAAI,EAAE,SAAS,OAAO;AACpB,mBAAW,MAAM;AACf,cAAI,CAAC,WAAW,SAAS,SAAS,SAAS,gBAAgB;AACzD,wBAAY,UAAU,EAAE,gBAAgB,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxE,KAAK;AAAA,KAEJ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -81,7 +81,7 @@ const FilterPopover = ({
|
|
|
81
81
|
style: { display: "flex" },
|
|
82
82
|
onBlur: (e) => {
|
|
83
83
|
if (e.target !== referenceElement && !popperRef.current?.contains(e.relatedTarget)) {
|
|
84
|
-
referenceElement
|
|
84
|
+
referenceElement?.focus();
|
|
85
85
|
}
|
|
86
86
|
}
|
|
87
87
|
}, /* @__PURE__ */ React2.createElement(FilterButton, {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../../src/exported-related/FilterPopover.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { MutableRefObject, useRef, useState } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport styled from 'styled-components';\nimport { useDispatchHeadersActions } from '../redux/reducers';\nimport { DATA_TESTID } from '../configs/constants';\nimport { TypescriptColumn } from '../types/props';\n\nconst FilterButton = styled.span<{ hide: boolean }>`\n display: inline-grid;\n ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst Button = styled(DSButton)`\n position: relative;\n justify-self: flex-end;\n`;\n\nconst PopperContent = styled.div`\n background-color: #fff;\n`;\ninterface FilterPopoverProps {\n column: TypescriptColumn;\n columnId: string;\n triggerIcon: JSX.Element;\n menuContent: JSX.Element;\n onTriggerClick?: (id: string, e: UIEvent) => void;\n onClickOutsideMenu?: (id: string, e: UIEvent) => void;\n reduxHeader: { hideFilterButton: boolean; hideFilterMenu: boolean; withTabStops: boolean };\n innerRef: MutableRefObject<HTMLDivElement>;\n ariaLabel: string;\n customStyles?: React.CSSProperties;\n}\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = ({\n column,\n columnId,\n triggerIcon,\n menuContent,\n onTriggerClick = () => null,\n onClickOutsideMenu = () => null,\n reduxHeader,\n innerRef,\n ariaLabel,\n customStyles,\n}) => {\n const { hideFilterButton, hideFilterMenu } = reduxHeader || {\n hideFilterButton: true,\n hideFilterMenu: true,\n };\n const popperRef = useRef(null);\n const { patchHeaderFilterButtonAndMenu, patchHeader } = useDispatchHeadersActions();\n const isIconVisible = !hideFilterButton || !hideFilterMenu;\n const isMenuOpen = !hideFilterMenu;\n\n const handleClickOutsideMenu = (e) => {\n onClickOutsideMenu(columnId, e);\n if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n };\n\n const handleTriggerClick = (e) => {\n onTriggerClick(columnId, e);\n patchHeaderFilterButtonAndMenu(columnId, false);\n e.stopPropagation();\n };\n\n const [referenceElement, setReferenceElement] = useState(null);\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={(e) => {\n e.stopPropagation();\n if (e.code === 'Escape') {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n referenceElement.focus();\n }\n // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n // so we just prevent default behaviour in this case\n if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n e.preventDefault();\n }\n }}\n style={{ display: 'flex' }}\n onBlur={(e) => {\n if (e.target !== referenceElement && !popperRef.current?.contains(e.relatedTarget)) {\n referenceElement
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,eAAe,OAAO;AAAA;AAAA,IAExB,CAAC,UAAW,MAAM,OAAO,yCAAyC;AAAA;AAGtE,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAKtB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAgBtB,MAAM,gBAAyD,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,qBAAqB,MAAM;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,EAAE,kBAAkB,mBAAmB,eAAe;AAAA,IAC1D,kBAAkB;AAAA,IAClB,gBAAgB;AAAA;AAElB,QAAM,YAAY,OAAO;AACzB,QAAM,EAAE,gCAAgC,gBAAgB;AACxD,QAAM,gBAAgB,CAAC,oBAAoB,CAAC;AAC5C,QAAM,aAAa,CAAC;AAEpB,QAAM,yBAAyB,CAAC,MAAM;AACpC,uBAAmB,UAAU;AAC7B,QAAI;AAAY,qCAA+B,UAAU;AAAA;AAG3D,QAAM,qBAAqB,CAAC,MAAM;AAChC,mBAAe,UAAU;AACzB,mCAA+B,UAAU;AACzC,MAAE;AAAA;AAGJ,QAAM,CAAC,kBAAkB,uBAAuB,SAAS;AAEzD,SACE,qCAAC,OAAD;AAAA,IAEE,SAAS,CAAC,MAAM,EAAE;AAAA,IAClB,WAAW,CAAC,MAAM;AAChB,QAAE;AACF,UAAI,EAAE,SAAS,UAAU;AACvB,oBAAY,UAAU,EAAE,gBAAgB,MAAM,kBAAkB;AAChE,yBAAiB;AAAA;AAInB,UAAI,CAAC,WAAW,aAAa,SAAS,EAAE,OAAO;AAC7C,UAAE;AAAA;AAAA;AAAA,IAGN,OAAO,EAAE,SAAS;AAAA,IAClB,QAAQ,CAAC,MAAM;AACb,UAAI,EAAE,WAAW,oBAAoB,CAAC,UAAU,SAAS,SAAS,EAAE,gBAAgB;AAClF,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { MutableRefObject, useRef, useState } from 'react';\nimport { DSButton } from '@elliemae/ds-button';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport styled from 'styled-components';\nimport { useDispatchHeadersActions } from '../redux/reducers';\nimport { DATA_TESTID } from '../configs/constants';\nimport { TypescriptColumn } from '../types/props';\n\nconst FilterButton = styled.span<{ hide: boolean }>`\n display: inline-grid;\n ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst Button = styled(DSButton)`\n position: relative;\n justify-self: flex-end;\n`;\n\nconst PopperContent = styled.div`\n background-color: #fff;\n`;\ninterface FilterPopoverProps {\n column: TypescriptColumn;\n columnId: string;\n triggerIcon: JSX.Element;\n menuContent: JSX.Element;\n onTriggerClick?: (id: string, e: UIEvent) => void;\n onClickOutsideMenu?: (id: string, e: UIEvent) => void;\n reduxHeader: { hideFilterButton: boolean; hideFilterMenu: boolean; withTabStops: boolean };\n innerRef: MutableRefObject<HTMLDivElement>;\n ariaLabel: string;\n customStyles?: React.CSSProperties;\n}\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = ({\n column,\n columnId,\n triggerIcon,\n menuContent,\n onTriggerClick = () => null,\n onClickOutsideMenu = () => null,\n reduxHeader,\n innerRef,\n ariaLabel,\n customStyles,\n}) => {\n const { hideFilterButton, hideFilterMenu } = reduxHeader || {\n hideFilterButton: true,\n hideFilterMenu: true,\n };\n const popperRef = useRef(null);\n const { patchHeaderFilterButtonAndMenu, patchHeader } = useDispatchHeadersActions();\n const isIconVisible = !hideFilterButton || !hideFilterMenu;\n const isMenuOpen = !hideFilterMenu;\n\n const handleClickOutsideMenu = (e) => {\n onClickOutsideMenu(columnId, e);\n if (isMenuOpen) patchHeaderFilterButtonAndMenu(columnId, true);\n };\n\n const handleTriggerClick = (e) => {\n onTriggerClick(columnId, e);\n patchHeaderFilterButtonAndMenu(columnId, false);\n e.stopPropagation();\n };\n\n const [referenceElement, setReferenceElement] = useState(null);\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={(e) => {\n e.stopPropagation();\n if (e.code === 'Escape') {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n referenceElement.focus();\n }\n // Stop propagation for some reason is not enough to prevent scrolling of the datatable\n // so we just prevent default behaviour in this case\n if (['ArrowUp', 'ArrowDown'].includes(e.code)) {\n e.preventDefault();\n }\n }}\n style={{ display: 'flex' }}\n onBlur={(e) => {\n if (e.target !== referenceElement && !popperRef.current?.contains(e.relatedTarget)) {\n referenceElement?.focus();\n }\n }}\n >\n <FilterButton hide={!isIconVisible} data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}>\n <Button\n onClick={handleTriggerClick}\n buttonType=\"text\"\n aria-label={ariaLabel}\n aria-hidden=\"true\"\n size=\"s\"\n leftIcon={triggerIcon}\n // implement treeview mergerefs\n innerRef={(_ref) => {\n if (isIconVisible) setReferenceElement(_ref);\n innerRef.current = _ref;\n }}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n />\n </FilterButton>\n {referenceElement && (\n <DSPopperJS\n referenceElement={referenceElement}\n showPopover={isMenuOpen}\n closeContextMenu={handleClickOutsideMenu}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n startPlacementPreference=\"bottom-end\"\n customOffset={[5, 4]}\n withoutArrow\n zIndex={10}\n withoutAnimation\n extraPopperStyles={{\n ...customStyles,\n minWidth: column.ref?.current?.offsetWidth ?? '0px',\n }}\n placementOrderPreference={['bottom-end']}\n >\n <PopperContent\n onKeyDown={(e) => {\n if (e.code === 'Tab') {\n setTimeout(() => {\n if (!popperRef?.current?.contains(document.activeElement)) {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n }\n });\n }\n }}\n ref={popperRef}\n >\n {menuContent}\n </PopperContent>\n </DSPopperJS>\n )}\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;AAAA;ACEA;AACA;AACA;AACA;AACA;AACA;AAGA,MAAM,eAAe,OAAO;AAAA;AAAA,IAExB,CAAC,UAAW,MAAM,OAAO,yCAAyC;AAAA;AAGtE,MAAM,SAAS,OAAO;AAAA;AAAA;AAAA;AAKtB,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAgBtB,MAAM,gBAAyD,CAAC;AAAA,EACrE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB,MAAM;AAAA,EACvB,qBAAqB,MAAM;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACI;AACJ,QAAM,EAAE,kBAAkB,mBAAmB,eAAe;AAAA,IAC1D,kBAAkB;AAAA,IAClB,gBAAgB;AAAA;AAElB,QAAM,YAAY,OAAO;AACzB,QAAM,EAAE,gCAAgC,gBAAgB;AACxD,QAAM,gBAAgB,CAAC,oBAAoB,CAAC;AAC5C,QAAM,aAAa,CAAC;AAEpB,QAAM,yBAAyB,CAAC,MAAM;AACpC,uBAAmB,UAAU;AAC7B,QAAI;AAAY,qCAA+B,UAAU;AAAA;AAG3D,QAAM,qBAAqB,CAAC,MAAM;AAChC,mBAAe,UAAU;AACzB,mCAA+B,UAAU;AACzC,MAAE;AAAA;AAGJ,QAAM,CAAC,kBAAkB,uBAAuB,SAAS;AAEzD,SACE,qCAAC,OAAD;AAAA,IAEE,SAAS,CAAC,MAAM,EAAE;AAAA,IAClB,WAAW,CAAC,MAAM;AAChB,QAAE;AACF,UAAI,EAAE,SAAS,UAAU;AACvB,oBAAY,UAAU,EAAE,gBAAgB,MAAM,kBAAkB;AAChE,yBAAiB;AAAA;AAInB,UAAI,CAAC,WAAW,aAAa,SAAS,EAAE,OAAO;AAC7C,UAAE;AAAA;AAAA;AAAA,IAGN,OAAO,EAAE,SAAS;AAAA,IAClB,QAAQ,CAAC,MAAM;AACb,UAAI,EAAE,WAAW,oBAAoB,CAAC,UAAU,SAAS,SAAS,EAAE,gBAAgB;AAClF,0BAAkB;AAAA;AAAA;AAAA,KAItB,qCAAC,cAAD;AAAA,IAAc,MAAM,CAAC;AAAA,IAAe,eAAa,YAAY;AAAA,KAC3D,qCAAC,QAAD;AAAA,IACE,SAAS;AAAA,IACT,YAAW;AAAA,IACX,cAAY;AAAA,IACZ,eAAY;AAAA,IACZ,MAAK;AAAA,IACL,UAAU;AAAA,IAEV,UAAU,CAAC,SAAS;AAClB,UAAI;AAAe,4BAAoB;AACvC,eAAS,UAAU;AAAA;AAAA,IAErB,UAAU,aAAa,eAAe,IAAI;AAAA,OAG7C,oBACC,qCAAC,YAAD;AAAA,IACE;AAAA,IACA,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,eAAa,YAAY;AAAA,IACzB,0BAAyB;AAAA,IACzB,cAAc,CAAC,GAAG;AAAA,IAClB,cAAY;AAAA,IACZ,QAAQ;AAAA,IACR,kBAAgB;AAAA,IAChB,mBAAmB,iCACd,eADc;AAAA,MAEjB,UAAU,OAAO,KAAK,SAAS,eAAe;AAAA;AAAA,IAEhD,0BAA0B,CAAC;AAAA,KAE3B,qCAAC,eAAD;AAAA,IACE,WAAW,CAAC,MAAM;AAChB,UAAI,EAAE,SAAS,OAAO;AACpB,mBAAW,MAAM;AACf,cAAI,CAAC,WAAW,SAAS,SAAS,SAAS,gBAAgB;AACzD,wBAAY,UAAU,EAAE,gBAAgB,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA,IAKxE,KAAK;AAAA,KAEJ;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.0.0-alpha.
|
|
3
|
+
"version": "3.0.0-alpha.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -573,24 +573,24 @@
|
|
|
573
573
|
"dependencies": {
|
|
574
574
|
"@dnd-kit/core": "~4.0.3",
|
|
575
575
|
"@dnd-kit/sortable": "~5.0.0",
|
|
576
|
-
"@elliemae/ds-button": "3.0.0-alpha.
|
|
577
|
-
"@elliemae/ds-circular-progress-indicator": "3.0.0-alpha.
|
|
578
|
-
"@elliemae/ds-controlled-form": "3.0.0-alpha.
|
|
579
|
-
"@elliemae/ds-drag-and-drop": "3.0.0-alpha.
|
|
580
|
-
"@elliemae/ds-dropdownmenu": "3.0.0-alpha.
|
|
581
|
-
"@elliemae/ds-form": "3.0.0-alpha.
|
|
582
|
-
"@elliemae/ds-form-layout-blocks": "3.0.0-alpha.
|
|
583
|
-
"@elliemae/ds-grid": "3.0.0-alpha.
|
|
584
|
-
"@elliemae/ds-icons": "3.0.0-alpha.
|
|
585
|
-
"@elliemae/ds-indeterminate-progress-indicator": "3.0.0-alpha.
|
|
586
|
-
"@elliemae/ds-pagination": "3.0.0-alpha.
|
|
587
|
-
"@elliemae/ds-pills": "3.0.0-alpha.
|
|
588
|
-
"@elliemae/ds-popperjs": "3.0.0-alpha.
|
|
589
|
-
"@elliemae/ds-props-helpers": "3.0.0-alpha.
|
|
590
|
-
"@elliemae/ds-system": "3.0.0-alpha.
|
|
591
|
-
"@elliemae/ds-toolbar": "3.0.0-alpha.
|
|
592
|
-
"@elliemae/ds-truncated-tooltip-text": "3.0.0-alpha.
|
|
593
|
-
"@elliemae/ds-utilities": "3.0.0-alpha.
|
|
576
|
+
"@elliemae/ds-button": "3.0.0-alpha.3",
|
|
577
|
+
"@elliemae/ds-circular-progress-indicator": "3.0.0-alpha.3",
|
|
578
|
+
"@elliemae/ds-controlled-form": "3.0.0-alpha.3",
|
|
579
|
+
"@elliemae/ds-drag-and-drop": "3.0.0-alpha.3",
|
|
580
|
+
"@elliemae/ds-dropdownmenu": "3.0.0-alpha.3",
|
|
581
|
+
"@elliemae/ds-form": "3.0.0-alpha.3",
|
|
582
|
+
"@elliemae/ds-form-layout-blocks": "3.0.0-alpha.3",
|
|
583
|
+
"@elliemae/ds-grid": "3.0.0-alpha.3",
|
|
584
|
+
"@elliemae/ds-icons": "3.0.0-alpha.3",
|
|
585
|
+
"@elliemae/ds-indeterminate-progress-indicator": "3.0.0-alpha.3",
|
|
586
|
+
"@elliemae/ds-pagination": "3.0.0-alpha.3",
|
|
587
|
+
"@elliemae/ds-pills": "3.0.0-alpha.3",
|
|
588
|
+
"@elliemae/ds-popperjs": "3.0.0-alpha.3",
|
|
589
|
+
"@elliemae/ds-props-helpers": "3.0.0-alpha.3",
|
|
590
|
+
"@elliemae/ds-system": "3.0.0-alpha.3",
|
|
591
|
+
"@elliemae/ds-toolbar": "3.0.0-alpha.3",
|
|
592
|
+
"@elliemae/ds-truncated-tooltip-text": "3.0.0-alpha.3",
|
|
593
|
+
"@elliemae/ds-utilities": "3.0.0-alpha.3",
|
|
594
594
|
"@reduxjs/toolkit": "~1.7.1",
|
|
595
595
|
"csstype": "~3.0.10",
|
|
596
596
|
"moment": "~2.29.1",
|