@elliemae/ds-data-table 3.70.0-next.53 → 3.70.0-next.58
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/configs/constants.js +0 -5
- package/dist/cjs/configs/constants.js.map +2 -2
- package/dist/cjs/configs/useStore/useStore.js +19 -0
- package/dist/cjs/configs/useStore/useStore.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js +12 -1
- package/dist/cjs/exported-related/FilterPopover/FilterPopoverV2.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/index.js +28 -1
- package/dist/cjs/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/cjs/package.json +1 -4
- package/dist/cjs/parts/Headers/HeaderResizer.js +31 -31
- package/dist/cjs/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js +11 -1
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderResizer.js +3 -1
- package/dist/cjs/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js +3 -1
- package/dist/cjs/parts/HoC/withDnDSortableColumnContext.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +0 -4
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +75 -52
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/configs/constants.js +0 -5
- package/dist/esm/configs/constants.js.map +2 -2
- package/dist/esm/configs/useStore/useStore.js +19 -0
- package/dist/esm/configs/useStore/useStore.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/FilterPopoverV2.js +12 -1
- package/dist/esm/exported-related/FilterPopover/FilterPopoverV2.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/index.js +28 -1
- package/dist/esm/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/esm/package.json +1 -4
- package/dist/esm/parts/Headers/HeaderResizer.js +33 -33
- package/dist/esm/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js +11 -1
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderResizer.js +4 -2
- package/dist/esm/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/esm/parts/HoC/withDnDSortableColumnContext.js +3 -1
- package/dist/esm/parts/HoC/withDnDSortableColumnContext.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +1 -5
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +33 -10
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/TruncatedTooltipText.d.ts +1 -1
- package/dist/types/configs/constants.d.ts +0 -4
- package/dist/types/exported-related/Skeleton/SkeletonCell.d.ts +2 -1
- package/dist/types/exported-related/Skeleton/SkeletonHeaderCell.d.ts +2 -1
- package/dist/types/parts/Headers/HeaderCellGroup.d.ts +1 -1
- package/dist/types/parts/Headers/HeaderResizer.d.ts +1 -1
- package/dist/types/parts/Headers/useHeaderCellHandlers.d.ts +1 -1
- package/dist/types/parts/Headers/useHeaderResizer.d.ts +1 -1
- package/dist/types/parts/HoC/withConditionalDnDSortableContext.d.ts +1 -1
- package/dist/types/parts/HoC/withDnDSortableColumnContext.d.ts +1 -1
- package/dist/types/parts/HoC/withDnDSortableRowContext.d.ts +1 -1
- package/dist/types/parts/Loader.d.ts +1 -1
- package/dist/types/parts/Row.d.ts +1 -1
- package/dist/types/parts/SkeletonTable.d.ts +1 -1
- package/dist/types/parts/TableContent.d.ts +2 -1
- package/dist/types/parts/VirtualRowsList.d.ts +2 -1
- package/dist/types/react-desc-prop-types.d.ts +3 -3
- package/dist/types/styled.d.ts +2 -2
- package/package.json +33 -33
- package/skills/ds-data-table-slots/SKILL.md +9 -6
|
@@ -34,7 +34,6 @@ __export(constants_exports, {
|
|
|
34
34
|
DEFAULT_MIN_COLUMN_WIDTH: () => DEFAULT_MIN_COLUMN_WIDTH,
|
|
35
35
|
DropIndicatorPosition: () => DropIndicatorPosition,
|
|
36
36
|
EMPTY_FILTER: () => EMPTY_FILTER,
|
|
37
|
-
ResizerA11yMode: () => ResizerA11yMode,
|
|
38
37
|
momentFormat: () => momentFormat
|
|
39
38
|
});
|
|
40
39
|
module.exports = __toCommonJS(constants_exports);
|
|
@@ -50,10 +49,6 @@ const DropIndicatorPosition = {
|
|
|
50
49
|
After: "after",
|
|
51
50
|
Inside: "inside"
|
|
52
51
|
};
|
|
53
|
-
const ResizerA11yMode = {
|
|
54
|
-
Separator: "separator",
|
|
55
|
-
Slider: "slider"
|
|
56
|
-
};
|
|
57
52
|
const DEFAULT_MIN_COLUMN_WIDTH = 30;
|
|
58
53
|
const DEFAULT_MAX_COLUMN_WIDTH = 600;
|
|
59
54
|
const DATA_TESTID = {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/configs/constants.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n Fixed: 'fixed',\n Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n\n//
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n Fixed: 'fixed',\n Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n\n// Shared resize-clamp bounds \u2014 single source of truth for both the mouse/keyboard resize clamp\n// (useHeaderResizer.ts) and the resizer's aria-valuemin/aria-valuemax so they never drift.\n// PUI-17784 briefly raised DEFAULT_MIN_COLUMN_WIDTH to a measured worst-case icon-cluster width (70px),\n// but that only protects against overlap for columns that happen to match the worst-case icon\n// combination the constant was measured against \u2014 any column with a longer header title, or with a\n// narrower icon-cluster paired with a wide title, could still overlap. PUI-12696 reverts to the\n// historical 30px floor and moves the real protection to the consumer: `minWidth` is a controlled-IoC\n// prop (see .github/memories/project_philosophy.md), so Dimsum does not try to infer a safe default\n// from a column's content \u2014 the app that knows its own header text and enabled affordances is\n// responsible for passing a `minWidth` that actually fits them. See KNOWN_INTENTIONAL_DEVIATIONS.md #3.\nexport const DEFAULT_MIN_COLUMN_WIDTH = 30;\nexport const DEFAULT_MAX_COLUMN_WIDTH = 600;\n\nexport const DATA_TESTID = {\n DATA_TABLE_WRAPPER: 'data-table-wrapper',\n DATA_TABLE_GLOBAL_EXPAND_CELL: 'data-table-global-expand-cell',\n DATA_TABLE_ICON_ARROW_DOWN: 'ic-arrow-head-down',\n DATA_TABLE_ICON_ARROW_RIGHT: 'ic-arrow-head-right',\n DATA_TABLE_ICON_ARROW_MIXED: 'ic-arrow-head-mixed',\n DATA_TABLE_ICON_CHILD: 'ic-arrow-child',\n DATA_TABLE_GLOBAL_CHECKBOX: 'data-table-global-checkbox',\n DATA_TABLE_CHECKBOX: 'data-table-checkbox',\n DATA_TABLE_RADIO: 'data-table-radio',\n DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',\n DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: 'data-table-date-range-checkbox-switcher-container',\n DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',\n DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',\n DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',\n DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',\n DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',\n DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',\n DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',\n DATA_TABLE_FILTER_BUTTON_ELEMENT: 'ds-button', // TODO 'data-table-filter-menu-button-element',\n DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n DATA_TABLE_FILTER_FREE_TEXT_SEARCH: 'data-table-filter-free-text-search',\n DATA_TABLE_ROW_CONTENT: 'data-table-row-content',\n DATA_TABLE_ROW: 'data-table-row',\n DATA_TABLE_TOOLBAR_TRIGGER: 'data-table-toolbar-trigger',\n DATA_TABLE_CELL: 'data-table-cell',\n DATA_TABLE_DRAG_HANDLE: 'data-table-drag-handle',\n DATA_TABLE_CONTENT_WRAPPER: 'data-table-content-wrapper',\n DATA_TABLE_TABLE: 'data-table-table',\n DATA_TABLE_SCROLLABLE_CONTAINER: 'data-table-scrollable-container',\n DATA_TABLE_HEADER: 'data-table-header',\n DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',\n DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',\n DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',\n DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',\n DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button',\n DATA_TABLE_SORT_BUTTON: 'data-table-sort-button',\n} as const;\n\nexport const EMPTY_FILTER = 'ds-empty-filter';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AACrB,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAYO,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AAEjC,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,oDAAoD;AAAA,EACpD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,kCAAkC;AAAA;AAAA,EAClC,gCAAgC;AAAA,EAChC,oCAAoC;AAAA,EACpC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AAAA,EACtC,wBAAwB;AAC1B;AAEO,MAAM,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -62,6 +62,25 @@ const reducers = (get, set) => ({
|
|
|
62
62
|
}
|
|
63
63
|
}));
|
|
64
64
|
},
|
|
65
|
+
/**
|
|
66
|
+
* PUI-18785: shared "close this column's own filter menu" primitive. The header click, the
|
|
67
|
+
* drag handle, and the resize handle all sit inside FilterPopover's floating reference element
|
|
68
|
+
* (the whole header cell), so ds-floating-context's outside-click detection never sees any of
|
|
69
|
+
* those three interactions as "outside" and never closes the menu on its own — each of their
|
|
70
|
+
* handlers calls this instead. Unlike patchHeaderFilterButtonAndMenu (used for genuine outside
|
|
71
|
+
* clicks), only hideFilterMenu is touched — hideFilterButton is left alone, since these
|
|
72
|
+
* interactions also focus/hover the header cell, which should keep the trigger visible rather
|
|
73
|
+
* than hide it.
|
|
74
|
+
*/
|
|
75
|
+
closeFilterMenuIfOpen: (headerId) => {
|
|
76
|
+
if (get().reduxHeaders[headerId]?.hideFilterMenu !== false) return;
|
|
77
|
+
set((state) => ({
|
|
78
|
+
reduxHeaders: {
|
|
79
|
+
...state.reduxHeaders,
|
|
80
|
+
[headerId]: { ...state.reduxHeaders[headerId], hideFilterMenu: true }
|
|
81
|
+
}
|
|
82
|
+
}));
|
|
83
|
+
},
|
|
65
84
|
// PUI-15154: a column's own onBlur is supposed to hide its DnD handle/sort caret once focus
|
|
66
85
|
// truly leaves it, but that reset doesn't reliably land when focus moves directly from one
|
|
67
86
|
// column's drag handle to another's (both share the same dnd-kit DndContext/PointerSensor).
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/configs/useStore/useStore.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.js';\nimport { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from './createInternalAndPropsContext.js';\n\nconst internalAtomDefaultValues: DSDataTableT.InternalAtoms = {\n drilldownRowId: null,\n focusedRowId: null,\n isShiftPressed: false,\n reduxHeaders: {},\n hoveredColumnId: null,\n isHeaderCellDragging: false,\n};\n\nconst selectors: ZustandT.SelectorObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Selectors> = () => ({});\n\nconst reducers: ZustandT.ReducerObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Reducers> = (get, set) => ({\n patchHeader: (headerId, newHeader) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), ...newHeader },\n },\n }));\n },\n patchHeaderFilterButtonAndMenu: (headerId, value) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), hideFilterMenu: value, hideFilterButton: value },\n },\n }));\n },\n // PUI-15154: a column's own onBlur is supposed to hide its DnD handle/sort caret once focus\n // truly leaves it, but that reset doesn't reliably land when focus moves directly from one\n // column's drag handle to another's (both share the same dnd-kit DndContext/PointerSensor).\n // Rather than depend on every column's blur firing correctly, whichever column newly gains\n // focus proactively clears every other column's focus-derived visibility itself. It must skip\n // state.hoveredColumnId though \u2014 hover and focus are independent (a different column can be\n // legitimately hovered by the mouse while this one gains keyboard/click focus), so clearing it\n // here would hide an icon that's still correctly visible under the pointer.\n resetAllHeadersExcept: (exceptHeaderId) => {\n set((state) => {\n const nextReduxHeaders = { ...state.reduxHeaders };\n Object.keys(nextReduxHeaders).forEach((headerId) => {\n if (headerId === exceptHeaderId) return;\n if (headerId === state.hoveredColumnId) return;\n nextReduxHeaders[headerId] = {\n ...nextReduxHeaders[headerId],\n hideFilterMenu: true,\n hideFilterButton: true,\n showDnDHandle: false,\n showSortCaret: false,\n withTabStops: false,\n };\n });\n return { reduxHeaders: nextReduxHeaders };\n });\n },\n});\n\nconst subscribers: ZustandT.Subscribers<DSDataTableT.ShuttleInternalStore> = () => {};\n\nexport const useWholeStore = (): DSDataTableT.Context => {\n const {\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...tableProps\n } = usePropsStore((state) => state);\n\n const internalStore = useInternalStore((state) => state);\n return {\n tableProps,\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...internalStore,\n };\n};\n\nexport const config = {\n defaultProps: defaultProps as () => DSDataTableT.InternalProps,\n internalAtomDefaultValues,\n useAutoCalculated,\n selectors,\n reducers,\n subscribers,\n PropsProvider,\n usePropsStore,\n InternalProvider,\n useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mCAAgD;AAChD,+BAAkC;AAClC,2CAAiF;AAEjF,MAAM,4BAAwD;AAAA,EAC5D,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,iBAAiB;AAAA,EACjB,sBAAsB;AACxB;AAEA,MAAM,YAAgG,OAAO,CAAC;AAE9G,MAAM,WAA6F,CAAC,KAAK,SAAS;AAAA,EAChH,aAAa,CAAC,UAAU,cAAc;AACpC,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AAAA,MACxE;AAAA,IACF,EAAE;AAAA,EACJ;AAAA,EACA,gCAAgC,CAAC,UAAU,UAAU;AACnD,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,gBAAgB,OAAO,kBAAkB,MAAM;AAAA,MAC1G;AAAA,IACF,EAAE;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,uBAAuB,CAAC,mBAAmB;AACzC,QAAI,CAAC,UAAU;AACb,YAAM,mBAAmB,EAAE,GAAG,MAAM,aAAa;AACjD,aAAO,KAAK,gBAAgB,EAAE,QAAQ,CAAC,aAAa;AAClD,YAAI,aAAa,eAAgB;AACjC,YAAI,aAAa,MAAM,gBAAiB;AACxC,yBAAiB,QAAQ,IAAI;AAAA,UAC3B,GAAG,iBAAiB,QAAQ;AAAA,UAC5B,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,eAAe;AAAA,UACf,eAAe;AAAA,UACf,cAAc;AAAA,QAChB;AAAA,MACF,CAAC;AACD,aAAO,EAAE,cAAc,iBAAiB;AAAA,IAC1C,CAAC;AAAA,EACH;AACF;AAEA,MAAM,cAAuE,MAAM;AAAC;AAE7E,MAAM,gBAAgB,MAA4B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,oDAAc,CAAC,UAAU,KAAK;AAElC,QAAM,oBAAgB,uDAAiB,CAAC,UAAU,KAAK;AACvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
|
|
4
|
+
"sourcesContent": ["import { type ZustandT } from '@elliemae/ds-zustand-helpers';\nimport { defaultProps, type DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useAutoCalculated } from '../useAutocalculated/index.js';\nimport { InternalProvider, PropsProvider, useInternalStore, usePropsStore } from './createInternalAndPropsContext.js';\n\nconst internalAtomDefaultValues: DSDataTableT.InternalAtoms = {\n drilldownRowId: null,\n focusedRowId: null,\n isShiftPressed: false,\n reduxHeaders: {},\n hoveredColumnId: null,\n isHeaderCellDragging: false,\n};\n\nconst selectors: ZustandT.SelectorObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Selectors> = () => ({});\n\nconst reducers: ZustandT.ReducerObject<DSDataTableT.ShuttleInternalStore, DSDataTableT.Reducers> = (get, set) => ({\n patchHeader: (headerId, newHeader) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), ...newHeader },\n },\n }));\n },\n patchHeaderFilterButtonAndMenu: (headerId, value) => {\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...(state.reduxHeaders?.[headerId] ?? {}), hideFilterMenu: value, hideFilterButton: value },\n },\n }));\n },\n /**\n * PUI-18785: shared \"close this column's own filter menu\" primitive. The header click, the\n * drag handle, and the resize handle all sit inside FilterPopover's floating reference element\n * (the whole header cell), so ds-floating-context's outside-click detection never sees any of\n * those three interactions as \"outside\" and never closes the menu on its own \u2014 each of their\n * handlers calls this instead. Unlike patchHeaderFilterButtonAndMenu (used for genuine outside\n * clicks), only hideFilterMenu is touched \u2014 hideFilterButton is left alone, since these\n * interactions also focus/hover the header cell, which should keep the trigger visible rather\n * than hide it.\n */\n closeFilterMenuIfOpen: (headerId) => {\n if (get().reduxHeaders[headerId]?.hideFilterMenu !== false) return;\n set((state) => ({\n reduxHeaders: {\n ...state.reduxHeaders,\n [headerId]: { ...state.reduxHeaders[headerId], hideFilterMenu: true },\n },\n }));\n },\n // PUI-15154: a column's own onBlur is supposed to hide its DnD handle/sort caret once focus\n // truly leaves it, but that reset doesn't reliably land when focus moves directly from one\n // column's drag handle to another's (both share the same dnd-kit DndContext/PointerSensor).\n // Rather than depend on every column's blur firing correctly, whichever column newly gains\n // focus proactively clears every other column's focus-derived visibility itself. It must skip\n // state.hoveredColumnId though \u2014 hover and focus are independent (a different column can be\n // legitimately hovered by the mouse while this one gains keyboard/click focus), so clearing it\n // here would hide an icon that's still correctly visible under the pointer.\n resetAllHeadersExcept: (exceptHeaderId) => {\n set((state) => {\n const nextReduxHeaders = { ...state.reduxHeaders };\n Object.keys(nextReduxHeaders).forEach((headerId) => {\n if (headerId === exceptHeaderId) return;\n if (headerId === state.hoveredColumnId) return;\n nextReduxHeaders[headerId] = {\n ...nextReduxHeaders[headerId],\n hideFilterMenu: true,\n hideFilterButton: true,\n showDnDHandle: false,\n showSortCaret: false,\n withTabStops: false,\n };\n });\n return { reduxHeaders: nextReduxHeaders };\n });\n },\n});\n\nconst subscribers: ZustandT.Subscribers<DSDataTableT.ShuttleInternalStore> = () => {};\n\nexport const useWholeStore = (): DSDataTableT.Context => {\n const {\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...tableProps\n } = usePropsStore((state) => state);\n\n const internalStore = useInternalStore((state) => state);\n return {\n tableProps,\n columnHeaderRef,\n virtualListRef,\n flattenedData,\n allDataFlattened,\n isEmptyContent,\n firstFocuseableColumnHeaderId,\n visibleColumns,\n virtualListHelpers,\n layoutHelpers,\n paginationHelpers,\n lastSelected,\n ...internalStore,\n };\n};\n\nexport const config = {\n defaultProps: defaultProps as () => DSDataTableT.InternalProps,\n internalAtomDefaultValues,\n useAutoCalculated,\n selectors,\n reducers,\n subscribers,\n PropsProvider,\n usePropsStore,\n InternalProvider,\n useInternalStore,\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mCAAgD;AAChD,+BAAkC;AAClC,2CAAiF;AAEjF,MAAM,4BAAwD;AAAA,EAC5D,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,cAAc,CAAC;AAAA,EACf,iBAAiB;AAAA,EACjB,sBAAsB;AACxB;AAEA,MAAM,YAAgG,OAAO,CAAC;AAE9G,MAAM,WAA6F,CAAC,KAAK,SAAS;AAAA,EAChH,aAAa,CAAC,UAAU,cAAc;AACpC,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,GAAG,UAAU;AAAA,MACxE;AAAA,IACF,EAAE;AAAA,EACJ;AAAA,EACA,gCAAgC,CAAC,UAAU,UAAU;AACnD,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAI,MAAM,eAAe,QAAQ,KAAK,CAAC,GAAI,gBAAgB,OAAO,kBAAkB,MAAM;AAAA,MAC1G;AAAA,IACF,EAAE;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAWA,uBAAuB,CAAC,aAAa;AACnC,QAAI,IAAI,EAAE,aAAa,QAAQ,GAAG,mBAAmB,MAAO;AAC5D,QAAI,CAAC,WAAW;AAAA,MACd,cAAc;AAAA,QACZ,GAAG,MAAM;AAAA,QACT,CAAC,QAAQ,GAAG,EAAE,GAAG,MAAM,aAAa,QAAQ,GAAG,gBAAgB,KAAK;AAAA,MACtE;AAAA,IACF,EAAE;AAAA,EACJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EASA,uBAAuB,CAAC,mBAAmB;AACzC,QAAI,CAAC,UAAU;AACb,YAAM,mBAAmB,EAAE,GAAG,MAAM,aAAa;AACjD,aAAO,KAAK,gBAAgB,EAAE,QAAQ,CAAC,aAAa;AAClD,YAAI,aAAa,eAAgB;AACjC,YAAI,aAAa,MAAM,gBAAiB;AACxC,yBAAiB,QAAQ,IAAI;AAAA,UAC3B,GAAG,iBAAiB,QAAQ;AAAA,UAC5B,gBAAgB;AAAA,UAChB,kBAAkB;AAAA,UAClB,eAAe;AAAA,UACf,eAAe;AAAA,UACf,cAAc;AAAA,QAChB;AAAA,MACF,CAAC;AACD,aAAO,EAAE,cAAc,iBAAiB;AAAA,IAC1C,CAAC;AAAA,EACH;AACF;AAEA,MAAM,cAAuE,MAAM;AAAC;AAE7E,MAAM,gBAAgB,MAA4B;AACvD,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,QAAI,oDAAc,CAAC,UAAU,KAAK;AAElC,QAAM,oBAAgB,uDAAiB,CAAC,UAAU,KAAK;AACvD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL;AACF;AAEO,MAAM,SAAS;AAAA,EACpB,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -58,6 +58,7 @@ const FilterPopoverV2 = (props) => {
|
|
|
58
58
|
onFilterReset
|
|
59
59
|
} = props;
|
|
60
60
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
61
|
+
const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
|
|
61
62
|
const getOwnerPropsArguments = (0, import_react.useCallback)(
|
|
62
63
|
() => ({
|
|
63
64
|
columnId: column.id
|
|
@@ -81,7 +82,17 @@ const FilterPopoverV2 = (props) => {
|
|
|
81
82
|
placement: "bottom-end",
|
|
82
83
|
withoutAnimation: true,
|
|
83
84
|
customOffset: [0, 0],
|
|
84
|
-
onClickOutside: handleClickOutsideMenu
|
|
85
|
+
onClickOutside: handleClickOutsideMenu,
|
|
86
|
+
/**
|
|
87
|
+
* PUI-17187: same fix as FilterPopover/index.tsx (V1) — see the full rationale there,
|
|
88
|
+
* including why `withoutPortal: true` was tried and rejected (breaks any filter whose
|
|
89
|
+
* content is larger than the table, e.g. DateRangeFilter's calendar, because withoutPortal
|
|
90
|
+
* makes the popover a literal DOM descendant of the table's overflow:auto container, which
|
|
91
|
+
* unconditionally CSS-clips oversized content — position math cannot override that).
|
|
92
|
+
* boundaryElement keeps the portal and only changes the clipping math, with a per-axis
|
|
93
|
+
* fallback to the viewport when the content doesn't fit the boundary.
|
|
94
|
+
*/
|
|
95
|
+
boundaryElement: virtualListRef.current
|
|
85
96
|
});
|
|
86
97
|
const handleOnKeyDown = (0, import_ds_hooks_focus_trap.useFocusTrap)({
|
|
87
98
|
firstElementRef,
|
|
@@ -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 { 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;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 const virtualListRef = usePropsStore((state) => state.virtualListRef);\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 * PUI-17187: same fix as FilterPopover/index.tsx (V1) \u2014 see the full rationale there,\n * including why `withoutPortal: true` was tried and rejected (breaks any filter whose\n * content is larger than the table, e.g. DateRangeFilter's calendar, because withoutPortal\n * makes the popover a literal DOM descendant of the table's overflow:auto container, which\n * unconditionally CSS-clips oversized content \u2014 position math cannot override that).\n * boundaryElement keeps the portal and only changes the clipping math, with a per-axis\n * fallback to the viewport when the content doesn't fit the boundary.\n */\n boundaryElement: virtualListRef.current,\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
|
}
|
|
@@ -58,6 +58,7 @@ const FilterPopover = (props) => {
|
|
|
58
58
|
} = props;
|
|
59
59
|
const filters = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.filters);
|
|
60
60
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
61
|
+
const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
|
|
61
62
|
const getOwnerPropsArguments = (0, import_react.useCallback)(
|
|
62
63
|
() => ({
|
|
63
64
|
columnId: column.id
|
|
@@ -83,7 +84,33 @@ const FilterPopover = (props) => {
|
|
|
83
84
|
customOffset: floatingOffset,
|
|
84
85
|
withoutAnimation: true,
|
|
85
86
|
placementOrderPreference: ["bottom-end", "top-end"],
|
|
86
|
-
onClickOutside: handleClickOutsideMenu
|
|
87
|
+
onClickOutside: handleClickOutsideMenu,
|
|
88
|
+
/**
|
|
89
|
+
* PUI-17187: the filter trigger lives inside DataTable's own horizontally-scrollable
|
|
90
|
+
* container (virtualListRef, overflow: auto). Without a boundary, computePosition only
|
|
91
|
+
* clips against the browser viewport, so once the column scrolls near the table's own edge
|
|
92
|
+
* the popover keeps tracking the trigger's raw (partially clipped) screen position and
|
|
93
|
+
* spills past the table's visible bounds, into the rest of the page.
|
|
94
|
+
*
|
|
95
|
+
* Why not `withoutPortal: true` instead (it also derives a clipping boundary — see
|
|
96
|
+
* getClippingParent — which would resolve to this same scroll container automatically, no
|
|
97
|
+
* explicit boundaryElement needed): withoutPortal renders the popover as a literal DOM
|
|
98
|
+
* descendant of that overflow:auto container instead of portaling it to <body>. The browser
|
|
99
|
+
* then clips ANY content exceeding the container's bounds unconditionally — CSS overflow
|
|
100
|
+
* clipping is not something position math can override. That breaks any filter whose content
|
|
101
|
+
* is taller/wider than the table itself: confirmed regression via this exact change during
|
|
102
|
+
* development — DateRangeFilter's dual-calendar popover (in a 300px-tall table) got its
|
|
103
|
+
* inputs pushed outside the actual browser viewport entirely, failing the existing
|
|
104
|
+
* `DSDataTable - FilterPopover focus trap` Playwright CT tests (clicks on
|
|
105
|
+
* ds-controlled-date-time-picker-month-input timed out as "outside of the viewport").
|
|
106
|
+
*
|
|
107
|
+
* boundaryElement keeps the portal (so oversized content still escapes fully into the page,
|
|
108
|
+
* unclipped, exactly as before) and only changes computePosition's clipping *math*, with a
|
|
109
|
+
* per-axis fallback to the plain viewport when the floating content doesn't fit the boundary
|
|
110
|
+
* on that axis (see getBoundaryConstrainedRect) — small popovers (this one) get clamped to
|
|
111
|
+
* the table; oversized ones (DateRangeFilter's calendar) are unaffected.
|
|
112
|
+
*/
|
|
113
|
+
boundaryElement: virtualListRef.current
|
|
87
114
|
});
|
|
88
115
|
(0, import_react.useEffect)(() => {
|
|
89
116
|
void forceUpdatePosition();
|
|
@@ -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 { 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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;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 const virtualListRef = usePropsStore((state) => state.virtualListRef);\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 * PUI-17187: the filter trigger lives inside DataTable's own horizontally-scrollable\n * container (virtualListRef, overflow: auto). Without a boundary, computePosition only\n * clips against the browser viewport, so once the column scrolls near the table's own edge\n * the popover keeps tracking the trigger's raw (partially clipped) screen position and\n * spills past the table's visible bounds, into the rest of the page.\n *\n * Why not `withoutPortal: true` instead (it also derives a clipping boundary \u2014 see\n * getClippingParent \u2014 which would resolve to this same scroll container automatically, no\n * explicit boundaryElement needed): withoutPortal renders the popover as a literal DOM\n * descendant of that overflow:auto container instead of portaling it to <body>. The browser\n * then clips ANY content exceeding the container's bounds unconditionally \u2014 CSS overflow\n * clipping is not something position math can override. That breaks any filter whose content\n * is taller/wider than the table itself: confirmed regression via this exact change during\n * development \u2014 DateRangeFilter's dual-calendar popover (in a 300px-tall table) got its\n * inputs pushed outside the actual browser viewport entirely, failing the existing\n * `DSDataTable - FilterPopover focus trap` Playwright CT tests (clicks on\n * ds-controlled-date-time-picker-month-input timed out as \"outside of the viewport\").\n *\n * boundaryElement keeps the portal (so oversized content still escapes fully into the page,\n * unclipped, exactly as before) and only changes computePosition's clipping *math*, with a\n * per-axis fallback to the plain viewport when the floating content doesn't fit the boundary\n * on that axis (see getBoundaryConstrainedRect) \u2014 small popovers (this one) get clamped to\n * the table; oversized ones (DateRangeFilter's calendar) are unaffected.\n */\n boundaryElement: virtualListRef.current,\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
|
}
|
package/dist/cjs/package.json
CHANGED
|
@@ -48,15 +48,12 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
48
48
|
innerRef
|
|
49
49
|
});
|
|
50
50
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
51
|
-
const resizerA11yMode = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.resizerA11yMode);
|
|
52
51
|
const resizeLabel = typeof column.Header === "string" ? `Resize ${column.Header} column` : "Resize column";
|
|
53
52
|
const nameId = `resize-name-${column.id}`.replace(/ /g, "");
|
|
54
53
|
const instructionId = `resize-instr-${column.id}`.replace(/ /g, "");
|
|
55
|
-
const isSlider = resizerA11yMode === import_constants.ResizerA11yMode.Slider;
|
|
56
|
-
const role = isSlider ? "slider" : "separator";
|
|
57
|
-
const orientation = isSlider ? "horizontal" : "vertical";
|
|
58
54
|
const valueMin = bracketBound(column.minWidth ?? import_constants.DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);
|
|
59
55
|
const valueMax = bracketBound(column.maxWidth ?? import_constants.DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);
|
|
56
|
+
const sliderValue = columnWidth ?? valueMin;
|
|
60
57
|
const valueText = columnWidth === void 0 ? void 0 : `${columnWidth} pixels`;
|
|
61
58
|
(0, import_react.useEffect)(() => {
|
|
62
59
|
const addEvents = () => {
|
|
@@ -75,32 +72,35 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
75
72
|
else removeEvents();
|
|
76
73
|
return removeEvents;
|
|
77
74
|
}, [isResizing, onResizeHandler, onResizeEnd]);
|
|
78
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
75
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
76
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
77
|
+
import_styled.StyledResizer,
|
|
78
|
+
{
|
|
79
|
+
type: "range",
|
|
80
|
+
min: valueMin,
|
|
81
|
+
max: valueMax,
|
|
82
|
+
value: sliderValue,
|
|
83
|
+
"aria-valuenow": columnWidth,
|
|
84
|
+
"aria-valuemin": valueMin,
|
|
85
|
+
"aria-valuemax": valueMax,
|
|
86
|
+
"aria-valuetext": valueText,
|
|
87
|
+
"aria-labelledby": nameId,
|
|
88
|
+
"aria-describedby": instructionId,
|
|
89
|
+
"aria-hidden": isReachable ? void 0 : true,
|
|
90
|
+
tabIndex: isReachable ? 0 : -1,
|
|
91
|
+
innerRef,
|
|
92
|
+
draggable: false,
|
|
93
|
+
onMouseDown: onResizeStart,
|
|
94
|
+
onTouchStart: onResizeStart,
|
|
95
|
+
onMouseUp: onResizeEnd,
|
|
96
|
+
onTouchEnd: onResizeEnd,
|
|
97
|
+
onClick: stopPropagation,
|
|
98
|
+
onKeyDown: handleKeyboardResize,
|
|
99
|
+
getOwnerProps
|
|
100
|
+
}
|
|
101
|
+
),
|
|
102
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: nameId, style: HIDDEN_STYLE, children: resizeLabel }),
|
|
103
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: instructionId, style: HIDDEN_STYLE, children: RESIZE_INSTRUCTION })
|
|
104
|
+
] });
|
|
105
105
|
};
|
|
106
106
|
//# sourceMappingURL=HeaderResizer.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/HeaderResizer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledResizer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderResizer } from './useHeaderResizer.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledResizer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderResizer } from './useHeaderResizer.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '../../configs/constants.js';\n\nconst stopPropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\n/** Name/instruction nodes \u2014 referenced via aria-labelledby/aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\nconst RESIZE_INSTRUCTION = 'Use the left and right arrow keys to increase or decrease the column width.';\n\n/**\n * PUI-17784: brackets the announced bounds around the actual current width, not just the configured\n * ones. The resize clamp (narrow() in useHeaderResizer.ts) only bounds INTERACTIVE resizing \u2014 an\n * explicit column.width set outside [minWidth, maxWidth] renders as-is on first paint (pre-existing,\n * unrelated to this ticket), so columnWidth can start below configuredMin or above configuredMax.\n * Reporting aria-valuenow outside [aria-valuemin, aria-valuemax] is an internally-inconsistent ARIA\n * value \u2014 exactly the class of meaningless-value problem this ticket exists to fix, just in a\n * narrower corner. Widening the bound to include the real value (rather than clamping the value to a\n * bound the column isn't actually honoring) keeps the announcement accurate; it self-corrects to the\n * configured bound on the first interactive resize, since narrow() clamps from then on.\n */\nconst bracketBound = (configuredBound: number, columnWidth: number | undefined, pickWider: typeof Math.min) =>\n pickWider(configuredBound, columnWidth ?? configuredBound);\n\nexport const HeaderResizer: React.ComponentType<{\n column: DSDataTableT.InternalColumn;\n innerRef: React.MutableRefObject<HTMLInputElement | null>;\n isReachable: boolean;\n}> = ({ column, innerRef, isReachable }) => {\n const { isResizing, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } =\n useHeaderResizer({\n columnId: column.id,\n innerRef,\n });\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const resizeLabel = typeof column.Header === 'string' ? `Resize ${column.Header} column` : 'Resize column';\n const nameId = `resize-name-${column.id}`.replace(/ /g, '');\n const instructionId = `resize-instr-${column.id}`.replace(/ /g, '');\n\n const valueMin = bracketBound(column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);\n const valueMax = bracketBound(column.maxWidth ?? DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);\n const sliderValue = columnWidth ?? valueMin;\n const valueText = columnWidth === undefined ? undefined : `${columnWidth} pixels`;\n\n // This setups the event listeners for the resize (only for mouse)\n // It reacts to the isResizing state change\n useEffect(() => {\n const addEvents = () => {\n document.addEventListener('mousemove', onResizeHandler);\n document.addEventListener('touchmove', onResizeHandler);\n document.addEventListener('mouseup', onResizeEnd);\n document.addEventListener('touchend', onResizeEnd);\n };\n const removeEvents = () => {\n document.removeEventListener('mousemove', onResizeHandler);\n document.removeEventListener('touchmove', onResizeHandler);\n document.removeEventListener('mouseup', onResizeEnd);\n document.removeEventListener('touchend', onResizeEnd);\n };\n\n if (isResizing) addEvents();\n else removeEvents();\n\n // just in case the component is unmounted\n return removeEvents;\n }, [isResizing, onResizeHandler, onResizeEnd]);\n\n return (\n <>\n <StyledResizer\n type=\"range\"\n min={valueMin}\n max={valueMax}\n value={sliderValue}\n aria-valuenow={columnWidth}\n aria-valuemin={valueMin}\n aria-valuemax={valueMax}\n aria-valuetext={valueText}\n aria-labelledby={nameId}\n aria-describedby={instructionId}\n aria-hidden={isReachable ? undefined : true}\n tabIndex={isReachable ? 0 : -1}\n innerRef={innerRef}\n draggable={false}\n onMouseDown={onResizeStart}\n onTouchStart={onResizeStart}\n onMouseUp={onResizeEnd}\n onTouchEnd={onResizeEnd}\n onClick={stopPropagation}\n onKeyDown={handleKeyboardResize}\n getOwnerProps={getOwnerProps}\n />\n <span id={nameId} style={HIDDEN_STYLE}>\n {resizeLabel}\n </span>\n <span id={instructionId} style={HIDDEN_STYLE}>\n {RESIZE_INSTRUCTION}\n </span>\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADwEnB;AAxEJ,mBAAiC;AACjC,oBAA8B;AAE9B,8BAAiC;AACjC,2CAA8B;AAC9B,uBAAmE;AAEnE,MAAM,kBAAkB,CAAC,MAA8C,EAAE,gBAAgB;AAGzF,MAAM,eAAoC,EAAE,SAAS,OAAO;AAC5D,MAAM,qBAAqB;AAa3B,MAAM,eAAe,CAAC,iBAAyB,aAAiC,cAC9E,UAAU,iBAAiB,eAAe,eAAe;AAEpD,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,aAAa,eAAe,aAAa,iBAAiB,qBAAqB,QACjG,0CAAiB;AAAA,IACf,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACH,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,cAAc,OAAO,OAAO,WAAW,WAAW,UAAU,OAAO,MAAM,YAAY;AAC3F,QAAM,SAAS,eAAe,OAAO,EAAE,GAAG,QAAQ,MAAM,EAAE;AAC1D,QAAM,gBAAgB,gBAAgB,OAAO,EAAE,GAAG,QAAQ,MAAM,EAAE;AAElE,QAAM,WAAW,aAAa,OAAO,YAAY,2CAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,WAAW,aAAa,OAAO,YAAY,2CAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,cAAc,eAAe;AACnC,QAAM,YAAY,gBAAgB,SAAY,SAAY,GAAG,WAAW;AAIxE,8BAAU,MAAM;AACd,UAAM,YAAY,MAAM;AACtB,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,WAAW,WAAW;AAChD,eAAS,iBAAiB,YAAY,WAAW;AAAA,IACnD;AACA,UAAM,eAAe,MAAM;AACzB,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,WAAW,WAAW;AACnD,eAAS,oBAAoB,YAAY,WAAW;AAAA,IACtD;AAEA,QAAI,WAAY,WAAU;AAAA,QACrB,cAAa;AAGlB,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,iBAAiB,WAAW,CAAC;AAE7C,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,OAAO;AAAA,QACP,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,eAAa,cAAc,SAAY;AAAA,QACvC,UAAU,cAAc,IAAI;AAAA,QAC5B;AAAA,QACA,WAAW;AAAA,QACX,aAAa;AAAA,QACb,cAAc;AAAA,QACd,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,UAAK,IAAI,QAAQ,OAAO,cACtB,uBACH;AAAA,IACA,4CAAC,UAAK,IAAI,eAAe,OAAO,cAC7B,8BACH;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -75,6 +75,7 @@ const useHeaderCellHandlers = ({
|
|
|
75
75
|
const visibleColumns = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.visibleColumns);
|
|
76
76
|
const setFocusedRowId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setFocusedRowId);
|
|
77
77
|
const patchHeader = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.patchHeader);
|
|
78
|
+
const closeFilterMenuIfOpen = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.closeFilterMenuIfOpen);
|
|
78
79
|
const resetAllHeadersExcept = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.resetAllHeadersExcept);
|
|
79
80
|
const hoveredColumnId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.hoveredColumnId);
|
|
80
81
|
const setHoveredColumnId = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.setHoveredColumnId);
|
|
@@ -94,6 +95,7 @@ const useHeaderCellHandlers = ({
|
|
|
94
95
|
}
|
|
95
96
|
}, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader, setHoveredColumnId]);
|
|
96
97
|
const handleSort = (0, import_react.useCallback)(() => {
|
|
98
|
+
closeFilterMenuIfOpen(column.id);
|
|
97
99
|
if (column.canSort) {
|
|
98
100
|
onColumnSortChange?.({
|
|
99
101
|
column: column.id,
|
|
@@ -105,7 +107,15 @@ const useHeaderCellHandlers = ({
|
|
|
105
107
|
column.isSortedDesc ? "ASC" : "DESC"
|
|
106
108
|
);
|
|
107
109
|
}
|
|
108
|
-
}, [
|
|
110
|
+
}, [
|
|
111
|
+
column.canSort,
|
|
112
|
+
column.id,
|
|
113
|
+
column.isSortedDesc,
|
|
114
|
+
onColumnSort,
|
|
115
|
+
onColumnSortChange,
|
|
116
|
+
visibleColumns,
|
|
117
|
+
closeFilterMenuIfOpen
|
|
118
|
+
]);
|
|
109
119
|
const isActive = draggableProps && draggableProps.active;
|
|
110
120
|
const onKeyDown = (0, import_react.useCallback)(
|
|
111
121
|
(e) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/useHeaderCellHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\ntype UseHeaderCellHandlersType = (args: {\n hasFilter: boolean;\n column: DSDataTableT.InternalColumn;\n hasDnD: boolean;\n dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n resizeHandlerRef: React.MutableRefObject<HTMLDivElement | null>;\n hasSortingCaret: boolean;\n isDragOverlay?: boolean;\n draggableProps: DSDataTableT.DraggablePropsT;\n referenceColumn: React.MutableRefObject<HTMLDivElement | null>;\n}) => {\n onMouseEnter: React.MouseEventHandler;\n onMouseLeave: React.MouseEventHandler;\n handleSort: React.MouseEventHandler;\n onKeyDown: React.KeyboardEventHandler;\n onFocus: React.FocusEventHandler;\n onBlur: React.FocusEventHandler;\n};\n\n// TODO: reduxHeader was a mistake from the start.\n// Please remove this and make this logic more simple and\n// easy to follow.\nconst buildNextHeader = (\n reduxHeader: DSDataTableT.ReduxHeader,\n value: boolean,\n hasFilter: boolean,\n hasDnD: boolean,\n hasSortingCaret: boolean,\n withTabStops = false,\n) => ({\n hideFilterMenu: true, // Do this to overwrite it if it exists\n ...reduxHeader,\n hideFilterButton: !(hasFilter && value),\n showDnDHandle: hasDnD && value,\n showSortCaret: hasSortingCaret,\n withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n visibleColumns: DSDataTableT.InternalColumn[],\n columnId: string,\n isSortedDesc: boolean,\n) => {\n const doit = (columns: DSDataTableT.InternalColumn[]) =>\n columns.map((col) => {\n const newCol = { ...col };\n delete newCol.isSortedDesc;\n if (col.id === columnId) {\n newCol.isSortedDesc = isSortedDesc;\n }\n if (newCol.columns) {\n newCol.columns = doit(newCol.columns);\n }\n return newCol;\n });\n return doit(visibleColumns);\n};\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n hasFilter,\n column,\n hasDnD,\n dragHandleRef,\n filterIconRef,\n sortRef,\n resizeHandlerRef,\n hasSortingCaret,\n isDragOverlay,\n draggableProps,\n referenceColumn,\n}) => {\n const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);\n const onColumnSort = usePropsStore((state) => state.onColumnSort);\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n const patchHeader = useInternalStore((state) => state.patchHeader);\n const resetAllHeadersExcept = useInternalStore((state) => state.resetAllHeadersExcept);\n const hoveredColumnId = useInternalStore((state) => state.hoveredColumnId);\n const setHoveredColumnId = useInternalStore((state) => state.setHoveredColumnId);\n const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n const headerRef = referenceColumn.current;\n\n const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n // PUI-15154: tracked separately from reduxHeader's own fields \u2014 see resetAllHeadersExcept in\n // useStore.tsx for why hover identity can't be folded into the same per-column booleans focus\n // writes to.\n setHoveredColumnId(column.id);\n patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret, setHoveredColumnId]);\n\n const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n setHoveredColumnId((currentHoveredColumnId) =>\n currentHoveredColumnId === column.id ? null : currentHoveredColumnId,\n );\n if (!headerRef?.contains(document.activeElement)) {\n patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n }\n }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader, setHoveredColumnId]);\n\n const handleSort: React.MouseEventHandler = useCallback(() => {\n if (column.canSort) {\n onColumnSortChange?.({\n column: column.id,\n direction: column.isSortedDesc ? 'ASC' : 'DESC',\n });\n onColumnSort(\n getNextSortedVisibleColumns(visibleColumns, column.id, !column.isSortedDesc),\n column.id,\n column.isSortedDesc ? 'ASC' : 'DESC',\n );\n }\n }, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);\n\n const isActive = draggableProps && draggableProps.active;\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n // we do the same as the draggable rows.\n // we stop the event if the overlay is active\n // main reason is the tab key\n if (isDragOverlay || isActive) {\n e.preventDefault();\n }\n\n if (e.currentTarget !== e.target) return;\n if (e.code === 'ArrowDown' && column.canSort) {\n e.preventDefault();\n onColumnSortChange?.({\n column: column.id,\n direction: 'DESC',\n });\n onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, true), column.id, 'DESC');\n } else if (e.code === 'ArrowUp' && column.canSort) {\n e.preventDefault();\n onColumnSortChange?.({\n column: column.id,\n direction: 'ASC',\n });\n onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, 'ASC');\n } else if (['Enter', 'Space'].includes(e.code)) {\n patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));\n // Elements don't not yet exist\n setTimeout(() => {\n if (dragHandleRef.current) dragHandleRef.current.focus();\n else if (filterIconRef.current) filterIconRef.current.focus();\n else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();\n else if (sortRef?.current) sortRef.current.focus();\n });\n }\n },\n [\n isDragOverlay,\n isActive,\n column.canSort,\n column.id,\n onColumnSortChange,\n onColumnSort,\n visibleColumns,\n patchHeader,\n reduxHeader,\n hasFilter,\n hasDnD,\n hasSortingCaret,\n dragHandleRef,\n filterIconRef,\n resizeHandlerRef,\n sortRef,\n ],\n );\n\n const onFocus: React.FocusEventHandler = useCallback(\n (e) => {\n // Don't do anything if focus wasn't placed in the element (bubling issues)\n const possibleTargets: (HTMLElement | null)[] = [\n dragHandleRef.current,\n filterIconRef.current,\n resizeHandlerRef.current,\n ];\n if (e.target === headerRef) {\n // PUI-15154: proactively clear every other column's stuck DnD handle/sort caret \u2014 see\n // resetAllHeadersExcept in useStore.tsx for why this can't rely solely on the previous\n // column's own onBlur.\n resetAllHeadersExcept(column.id);\n patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n setFocusedRowId(null);\n }\n\n if (possibleTargets.includes(e.target as HTMLElement | null)) {\n resetAllHeadersExcept(column.id);\n patchHeader(column.id, {\n hideFilterButton: !hasFilter,\n showDnDHandle: hasDnD,\n withTabStops: true,\n });\n setFocusedRowId(null);\n }\n },\n [\n column.id,\n dragHandleRef,\n filterIconRef,\n hasDnD,\n hasFilter,\n headerRef,\n patchHeader,\n resetAllHeadersExcept,\n reduxHeader,\n resizeHandlerRef,\n setFocusedRowId,\n hasSortingCaret,\n ],\n );\n\n const onBlur: React.FocusEventHandler = useCallback(\n (e) => {\n // PUI-15154: don't do anything if blur was caused by going to a child \u2014 but only when\n // relatedTarget is a real element. When focus leaves with nowhere specific to land (a click\n // on a non-focusable area, or Tab past the last focusable element), relatedTarget is null.\n // Any of these refs is null too whenever that control isn't rendered for this column (e.g.\n // filterIconRef when the column has no filter \u2014 FilterMapItem renders null). Comparing with\n // plain === then false-matches null against null and skips the reset, leaving the DnD handle\n // and sort caret visibly stuck even though focus genuinely left the header.\n const { relatedTarget } = e;\n if (relatedTarget && relatedTarget === dragHandleRef.current) return;\n if (relatedTarget && relatedTarget === filterIconRef.current) return;\n if (relatedTarget && relatedTarget === resizeHandlerRef.current) return;\n if (relatedTarget && relatedTarget === sortRef?.current) return;\n // PUI-15154: if the mouse is still hovering this same column, don't hide its hover-driven\n // visibility just because focus left it \u2014 only the focus-derived tab-stop state resets.\n // showDnDHandle/showSortCaret stay as hover set them.\n if (hoveredColumnId === column.id) {\n patchHeader(column.id, { withTabStops: false });\n return;\n }\n patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n },\n [\n dragHandleRef,\n filterIconRef,\n resizeHandlerRef,\n sortRef,\n patchHeader,\n column.id,\n reduxHeader,\n hasFilter,\n hasDnD,\n hoveredColumnId,\n ],\n );\n\n return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADEvB,mBAAqC;AAErC,2CAAgD;AAyBhD,MAAM,kBAAkB,CACtB,aACA,OACA,WACA,QACA,iBACA,eAAe,WACX;AAAA,EACJ,gBAAgB;AAAA;AAAA,EAChB,GAAG;AAAA,EACH,kBAAkB,EAAE,aAAa;AAAA,EACjC,eAAe,UAAU;AAAA,EACzB,eAAe;AAAA,EACf;AACF;AAEA,MAAM,8BAA8B,CAClC,gBACA,UACA,iBACG;AACH,QAAM,OAAO,CAAC,YACZ,QAAQ,IAAI,CAAC,QAAQ;AACnB,UAAM,SAAS,EAAE,GAAG,IAAI;AACxB,WAAO,OAAO;AACd,QAAI,IAAI,OAAO,UAAU;AACvB,aAAO,eAAe;AAAA,IACxB;AACA,QAAI,OAAO,SAAS;AAClB,aAAO,UAAU,KAAK,OAAO,OAAO;AAAA,IACtC;AACA,WAAO;AAAA,EACT,CAAC;AACH,SAAO,KAAK,cAAc;AAC5B;AAEO,MAAM,wBAAmD,CAAC;AAAA,EAC/D;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAe,oDAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,sBAAkB,uDAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,kBAAc,uDAAiB,CAAC,UAAU,MAAM,WAAW;AACjE,QAAM,4BAAwB,uDAAiB,CAAC,UAAU,MAAM,qBAAqB;AACrF,QAAM,sBAAkB,uDAAiB,CAAC,UAAU,MAAM,eAAe;AACzE,QAAM,yBAAqB,uDAAiB,CAAC,UAAU,MAAM,kBAAkB;AAC/E,QAAM,mBAAe,uDAAiB,CAAC,UAAU,MAAM,YAAY;AAEnE,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,gBAAgB;AAElC,QAAM,mBAAwC,0BAAY,MAAM;AAI9D,uBAAmB,OAAO,EAAE;AAC5B,gBAAY,OAAO,IAAI,gBAAgB,aAAa,MAAM,WAAW,QAAQ,eAAe,CAAC;AAAA,EAC/F,GAAG,CAAC,OAAO,IAAI,QAAQ,WAAW,aAAa,aAAa,iBAAiB,kBAAkB,CAAC;AAEhG,QAAM,mBAAwC,0BAAY,MAAM;AAC9D;AAAA,MAAmB,CAAC,2BAClB,2BAA2B,OAAO,KAAK,OAAO;AAAA,IAChD;AACA,QAAI,CAAC,WAAW,SAAS,SAAS,aAAa,GAAG;AAChD,kBAAY,OAAO,IAAI,gBAAgB,aAAa,OAAO,WAAW,QAAQ,KAAK,CAAC;AAAA,IACtF;AAAA,EACF,GAAG,CAAC,OAAO,IAAI,QAAQ,WAAW,WAAW,aAAa,aAAa,kBAAkB,CAAC;AAE1F,QAAM,iBAAsC,0BAAY,MAAM;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable max-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\ntype UseHeaderCellHandlersType = (args: {\n hasFilter: boolean;\n column: DSDataTableT.InternalColumn;\n hasDnD: boolean;\n dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n hasSortingCaret: boolean;\n isDragOverlay?: boolean;\n draggableProps: DSDataTableT.DraggablePropsT;\n referenceColumn: React.MutableRefObject<HTMLDivElement | null>;\n}) => {\n onMouseEnter: React.MouseEventHandler;\n onMouseLeave: React.MouseEventHandler;\n handleSort: React.MouseEventHandler;\n onKeyDown: React.KeyboardEventHandler;\n onFocus: React.FocusEventHandler;\n onBlur: React.FocusEventHandler;\n};\n\n// TODO: reduxHeader was a mistake from the start.\n// Please remove this and make this logic more simple and\n// easy to follow.\nconst buildNextHeader = (\n reduxHeader: DSDataTableT.ReduxHeader,\n value: boolean,\n hasFilter: boolean,\n hasDnD: boolean,\n hasSortingCaret: boolean,\n withTabStops = false,\n) => ({\n hideFilterMenu: true, // Do this to overwrite it if it exists\n ...reduxHeader,\n hideFilterButton: !(hasFilter && value),\n showDnDHandle: hasDnD && value,\n showSortCaret: hasSortingCaret,\n withTabStops,\n});\n\nconst getNextSortedVisibleColumns = (\n visibleColumns: DSDataTableT.InternalColumn[],\n columnId: string,\n isSortedDesc: boolean,\n) => {\n const doit = (columns: DSDataTableT.InternalColumn[]) =>\n columns.map((col) => {\n const newCol = { ...col };\n delete newCol.isSortedDesc;\n if (col.id === columnId) {\n newCol.isSortedDesc = isSortedDesc;\n }\n if (newCol.columns) {\n newCol.columns = doit(newCol.columns);\n }\n return newCol;\n });\n return doit(visibleColumns);\n};\n\nexport const useHeaderCellHandlers: UseHeaderCellHandlersType = ({\n hasFilter,\n column,\n hasDnD,\n dragHandleRef,\n filterIconRef,\n sortRef,\n resizeHandlerRef,\n hasSortingCaret,\n isDragOverlay,\n draggableProps,\n referenceColumn,\n}) => {\n const onColumnSortChange = usePropsStore((state) => state.onColumnSortChange);\n const onColumnSort = usePropsStore((state) => state.onColumnSort);\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n const setFocusedRowId = useInternalStore((state) => state.setFocusedRowId);\n const patchHeader = useInternalStore((state) => state.patchHeader);\n const closeFilterMenuIfOpen = useInternalStore((state) => state.closeFilterMenuIfOpen);\n const resetAllHeadersExcept = useInternalStore((state) => state.resetAllHeadersExcept);\n const hoveredColumnId = useInternalStore((state) => state.hoveredColumnId);\n const setHoveredColumnId = useInternalStore((state) => state.setHoveredColumnId);\n const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n const headerRef = referenceColumn.current;\n\n const onMouseEnter: React.MouseEventHandler = useCallback(() => {\n // PUI-15154: tracked separately from reduxHeader's own fields \u2014 see resetAllHeadersExcept in\n // useStore.tsx for why hover identity can't be folded into the same per-column booleans focus\n // writes to.\n setHoveredColumnId(column.id);\n patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret, setHoveredColumnId]);\n\n const onMouseLeave: React.MouseEventHandler = useCallback(() => {\n setHoveredColumnId((currentHoveredColumnId) =>\n currentHoveredColumnId === column.id ? null : currentHoveredColumnId,\n );\n if (!headerRef?.contains(document.activeElement)) {\n patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n }\n }, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader, setHoveredColumnId]);\n\n const handleSort: React.MouseEventHandler = useCallback(() => {\n /** PUI-18785: this handler runs for every click on the header (title, sort caret, a drag\n * handle click that doesn't turn into an actual drag) \u2014 see closeFilterMenuIfOpen in\n * useStore.tsx for why it needs to force-close the column's own filter menu here.\n */\n closeFilterMenuIfOpen(column.id);\n if (column.canSort) {\n onColumnSortChange?.({\n column: column.id,\n direction: column.isSortedDesc ? 'ASC' : 'DESC',\n });\n onColumnSort(\n getNextSortedVisibleColumns(visibleColumns, column.id, !column.isSortedDesc),\n column.id,\n column.isSortedDesc ? 'ASC' : 'DESC',\n );\n }\n }, [\n column.canSort,\n column.id,\n column.isSortedDesc,\n onColumnSort,\n onColumnSortChange,\n visibleColumns,\n closeFilterMenuIfOpen,\n ]);\n\n const isActive = draggableProps && draggableProps.active;\n\n const onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\n // we do the same as the draggable rows.\n // we stop the event if the overlay is active\n // main reason is the tab key\n if (isDragOverlay || isActive) {\n e.preventDefault();\n }\n\n if (e.currentTarget !== e.target) return;\n if (e.code === 'ArrowDown' && column.canSort) {\n e.preventDefault();\n onColumnSortChange?.({\n column: column.id,\n direction: 'DESC',\n });\n onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, true), column.id, 'DESC');\n } else if (e.code === 'ArrowUp' && column.canSort) {\n e.preventDefault();\n onColumnSortChange?.({\n column: column.id,\n direction: 'ASC',\n });\n onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, 'ASC');\n } else if (['Enter', 'Space'].includes(e.code)) {\n patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));\n // Elements don't not yet exist\n setTimeout(() => {\n if (dragHandleRef.current) dragHandleRef.current.focus();\n else if (filterIconRef.current) filterIconRef.current.focus();\n else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();\n else if (sortRef?.current) sortRef.current.focus();\n });\n }\n },\n [\n isDragOverlay,\n isActive,\n column.canSort,\n column.id,\n onColumnSortChange,\n onColumnSort,\n visibleColumns,\n patchHeader,\n reduxHeader,\n hasFilter,\n hasDnD,\n hasSortingCaret,\n dragHandleRef,\n filterIconRef,\n resizeHandlerRef,\n sortRef,\n ],\n );\n\n const onFocus: React.FocusEventHandler = useCallback(\n (e) => {\n // Don't do anything if focus wasn't placed in the element (bubling issues)\n const possibleTargets: (HTMLElement | null)[] = [\n dragHandleRef.current,\n filterIconRef.current,\n resizeHandlerRef.current,\n ];\n if (e.target === headerRef) {\n // PUI-15154: proactively clear every other column's stuck DnD handle/sort caret \u2014 see\n // resetAllHeadersExcept in useStore.tsx for why this can't rely solely on the previous\n // column's own onBlur.\n resetAllHeadersExcept(column.id);\n patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n setFocusedRowId(null);\n }\n\n if (possibleTargets.includes(e.target as HTMLElement | null)) {\n resetAllHeadersExcept(column.id);\n patchHeader(column.id, {\n hideFilterButton: !hasFilter,\n showDnDHandle: hasDnD,\n withTabStops: true,\n });\n setFocusedRowId(null);\n }\n },\n [\n column.id,\n dragHandleRef,\n filterIconRef,\n hasDnD,\n hasFilter,\n headerRef,\n patchHeader,\n resetAllHeadersExcept,\n reduxHeader,\n resizeHandlerRef,\n setFocusedRowId,\n hasSortingCaret,\n ],\n );\n\n const onBlur: React.FocusEventHandler = useCallback(\n (e) => {\n // PUI-15154: don't do anything if blur was caused by going to a child \u2014 but only when\n // relatedTarget is a real element. When focus leaves with nowhere specific to land (a click\n // on a non-focusable area, or Tab past the last focusable element), relatedTarget is null.\n // Any of these refs is null too whenever that control isn't rendered for this column (e.g.\n // filterIconRef when the column has no filter \u2014 FilterMapItem renders null). Comparing with\n // plain === then false-matches null against null and skips the reset, leaving the DnD handle\n // and sort caret visibly stuck even though focus genuinely left the header.\n const { relatedTarget } = e;\n if (relatedTarget && relatedTarget === dragHandleRef.current) return;\n if (relatedTarget && relatedTarget === filterIconRef.current) return;\n if (relatedTarget && relatedTarget === resizeHandlerRef.current) return;\n if (relatedTarget && relatedTarget === sortRef?.current) return;\n // PUI-15154: if the mouse is still hovering this same column, don't hide its hover-driven\n // visibility just because focus left it \u2014 only the focus-derived tab-stop state resets.\n // showDnDHandle/showSortCaret stay as hover set them.\n if (hoveredColumnId === column.id) {\n patchHeader(column.id, { withTabStops: false });\n return;\n }\n patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n },\n [\n dragHandleRef,\n filterIconRef,\n resizeHandlerRef,\n sortRef,\n patchHeader,\n column.id,\n reduxHeader,\n hasFilter,\n hasDnD,\n hoveredColumnId,\n ],\n );\n\n return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -59,6 +59,7 @@ const useHeaderResizer = ({
|
|
|
59
59
|
const onColumnSizeChange = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnSizeChange);
|
|
60
60
|
const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
|
|
61
61
|
const colsLayoutStyle = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.colsLayoutStyle);
|
|
62
|
+
const closeFilterMenuIfOpen = (0, import_createInternalAndPropsContext.useInternalStore)((state) => state.closeFilterMenuIfOpen);
|
|
62
63
|
const [isResizing, setIsResizing] = (0, import_react.useState)(false);
|
|
63
64
|
const visibleColumnsCopy = (0, import_react.useMemo)(() => (0, import_lodash_es.cloneDeep)(visibleColumns), [visibleColumns]);
|
|
64
65
|
const visibleColumnsOnGridLayout = (0, import_react.useMemo)(
|
|
@@ -90,7 +91,8 @@ const useHeaderResizer = ({
|
|
|
90
91
|
);
|
|
91
92
|
const onResizeStart = (0, import_react.useCallback)(() => {
|
|
92
93
|
setIsResizing(true);
|
|
93
|
-
|
|
94
|
+
closeFilterMenuIfOpen(columnId);
|
|
95
|
+
}, [closeFilterMenuIfOpen, columnId]);
|
|
94
96
|
const onResizeEnd = (0, import_react.useCallback)(() => {
|
|
95
97
|
setIsResizing(false);
|
|
96
98
|
pushColumnSizeChange((0, import_gridLayoutHelpers.getGridLayout)(virtualListRef.current)[realColumnIndexRef.current]);
|