@elliemae/ds-data-table 3.70.0-next.43 → 3.70.0-next.45
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 +9 -0
- package/dist/cjs/configs/constants.js.map +2 -2
- package/dist/cjs/exported-related/FilterBar/PillsFromDataTableFilters.js +2 -1
- package/dist/cjs/exported-related/FilterBar/PillsFromDataTableFilters.js.map +2 -2
- package/dist/cjs/parts/FilterBar/FiltersBar.js +2 -1
- package/dist/cjs/parts/FilterBar/FiltersBar.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCell.js +13 -24
- package/dist/cjs/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderResizer.js +30 -6
- package/dist/cjs/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/cjs/parts/Headers/buildScreenReaderInstructions.js +63 -0
- package/dist/cjs/parts/Headers/buildScreenReaderInstructions.js.map +7 -0
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map +1 -1
- package/dist/cjs/parts/Headers/useHeaderResizer.js +9 -1
- package/dist/cjs/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +14 -3
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +8 -35
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/configs/constants.js +9 -0
- package/dist/esm/configs/constants.js.map +2 -2
- package/dist/esm/exported-related/FilterBar/PillsFromDataTableFilters.js +2 -1
- package/dist/esm/exported-related/FilterBar/PillsFromDataTableFilters.js.map +2 -2
- package/dist/esm/parts/FilterBar/FiltersBar.js +2 -1
- package/dist/esm/parts/FilterBar/FiltersBar.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCell.js +13 -24
- package/dist/esm/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderResizer.js +31 -7
- package/dist/esm/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/esm/parts/Headers/buildScreenReaderInstructions.js +33 -0
- package/dist/esm/parts/Headers/buildScreenReaderInstructions.js.map +7 -0
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map +1 -1
- package/dist/esm/parts/Headers/useHeaderResizer.js +9 -1
- package/dist/esm/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +15 -4
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +8 -35
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/configs/constants.d.ts +6 -0
- package/dist/types/parts/Headers/HeaderResizer.d.ts +1 -1
- package/dist/types/parts/Headers/buildScreenReaderInstructions.d.ts +19 -0
- package/dist/types/parts/Headers/useHeaderCellHandlers.d.ts +1 -1
- package/dist/types/parts/Headers/useHeaderResizer.d.ts +2 -1
- package/dist/types/react-desc-prop-types.d.ts +4 -1
- package/dist/types/styled.d.ts +1 -1
- package/package.json +30 -30
- package/skills/ds-data-table-slots/SKILL.md +8 -3
|
@@ -30,8 +30,11 @@ var constants_exports = {};
|
|
|
30
30
|
__export(constants_exports, {
|
|
31
31
|
ColsLayoutStyle: () => ColsLayoutStyle,
|
|
32
32
|
DATA_TESTID: () => DATA_TESTID,
|
|
33
|
+
DEFAULT_MAX_COLUMN_WIDTH: () => DEFAULT_MAX_COLUMN_WIDTH,
|
|
34
|
+
DEFAULT_MIN_COLUMN_WIDTH: () => DEFAULT_MIN_COLUMN_WIDTH,
|
|
33
35
|
DropIndicatorPosition: () => DropIndicatorPosition,
|
|
34
36
|
EMPTY_FILTER: () => EMPTY_FILTER,
|
|
37
|
+
ResizerA11yMode: () => ResizerA11yMode,
|
|
35
38
|
momentFormat: () => momentFormat
|
|
36
39
|
});
|
|
37
40
|
module.exports = __toCommonJS(constants_exports);
|
|
@@ -47,6 +50,12 @@ const DropIndicatorPosition = {
|
|
|
47
50
|
After: "after",
|
|
48
51
|
Inside: "inside"
|
|
49
52
|
};
|
|
53
|
+
const ResizerA11yMode = {
|
|
54
|
+
Separator: "separator",
|
|
55
|
+
Slider: "slider"
|
|
56
|
+
};
|
|
57
|
+
const DEFAULT_MIN_COLUMN_WIDTH = 70;
|
|
58
|
+
const DEFAULT_MAX_COLUMN_WIDTH = 600;
|
|
50
59
|
const DATA_TESTID = {
|
|
51
60
|
DATA_TABLE_WRAPPER: "data-table-wrapper",
|
|
52
61
|
DATA_TABLE_GLOBAL_EXPAND_CELL: "data-table-global-expand-cell",
|
|
@@ -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\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;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;
|
|
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// PUI-17784: exposed accessible role for the column resize control, toggleable for a11y SME evaluation.\nexport const ResizerA11yMode = {\n Separator: 'separator',\n Slider: 'slider',\n} as const;\n\n// PUI-17784: shared resize-clamp bounds \u2014 single source of truth for both the mouse/keyboard resize\n// clamp (useHeaderResizer.ts) and the resizer's aria-valuemin/aria-valuemax so they never drift.\n// DEFAULT_MIN_COLUMN_WIDTH is not arbitrary: it's the measured worst-case header icon cluster (drag\n// handle + filter + sort, all visible, at the real 13px root font-size) so a column can never be\n// resized small enough for those affordances to overlap \u2014 2px left padding + 16px drag handle +\n// 43.98px right-icons wrapper (filter 19.99px + 4px gap + sort 19.99px) + 4px right padding reserved\n// for the resizer \u2248 66px, rounded up to 70px for a small safety margin. True content-aware minWidth\n// (measuring actual label text) is a separate, deferred follow-up \u2014 see SR-FINDINGS.md.\nexport const DEFAULT_MIN_COLUMN_WIDTH = 70;\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;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;AAGO,MAAM,kBAAkB;AAAA,EAC7B,WAAW;AAAA,EACX,QAAQ;AACV;AAUO,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
|
}
|
|
@@ -68,7 +68,8 @@ const PillsFromDataTableFilters = ({
|
|
|
68
68
|
return refs;
|
|
69
69
|
}, [filters.length]);
|
|
70
70
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: filters.map(({ id: column, type, value }, index) => {
|
|
71
|
-
const
|
|
71
|
+
const matchedColumn = columns.find((col) => col.accessor === column);
|
|
72
|
+
const columnHeader = matchedColumn?.pillLabel || matchedColumn?.Header;
|
|
72
73
|
let Component = () => null;
|
|
73
74
|
const filterType = type;
|
|
74
75
|
if (customPillRenderers?.[column]) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/exported-related/FilterBar/PillsFromDataTableFilters.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useMemo } from 'react';\nimport {\n DateRangePill,\n DateSwitcherPill,\n FreeTextSearchPillPill,\n MultiSelectPill,\n NumberRangePill,\n SelectPill,\n SingleDatePill,\n} from '../../parts/FilterBar/components/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../FilterTypes.js';\n\nconst pillRenderMapper = {\n [FILTER_TYPES.SELECT]: SelectPill,\n [FILTER_TYPES.SELECT_V2]: SelectPill,\n [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectPill,\n [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n [FILTER_TYPES.SINGLE_DATE_V2]: SingleDatePill,\n [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n [FILTER_TYPES.DATE_RANGE_V2]: DateRangePill,\n [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherPill,\n [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangePill,\n [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n [FILTER_TYPES.CURRENCY_RANGE_V2]: NumberRangePill,\n [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,\n [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchPillPill,\n} as const;\n\ninterface PillsFromDataTableFiltersProps {\n filters: DSDataTableT.Filter[];\n columns: DSDataTableT.Column[];\n onFiltersChange: (filters: DSDataTableT.Filter[]) => void;\n onPillRemove?: (remove: () => void) => void;\n customPillRenderers?: Record<string, React.ComponentType<DSDataTableT.FilterPillProps<unknown>>>;\n customPillRenderer?: React.ComponentType<DSDataTableT.FilterPillProps<unknown>>;\n}\n\nexport const PillsFromDataTableFilters: React.FC<PillsFromDataTableFiltersProps> = ({\n filters,\n columns,\n\n onFiltersChange,\n onPillRemove,\n customPillRenderers,\n customPillRenderer,\n}) => {\n const pillRefs = useMemo(() => {\n const refs: React.RefObject<HTMLElement>[] = [];\n for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n return refs;\n }, [filters.length]);\n return (\n <>\n {filters.map(({ id: column, type, value }, index) => {\n const
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDnB;AAxDJ,mBAA+B;AAC/B,wBAQO;AAEP,yBAA6B;AAE7B,MAAM,mBAAmB;AAAA,EACvB,CAAC,gCAAa,MAAM,GAAG;AAAA,EACvB,CAAC,gCAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,gCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,gCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,gCAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,gCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,gCAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,gCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,gCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,gCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,gCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,gCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,gCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,gCAAa,iBAAiB,GAAG;AAAA,EAClC,CAAC,gCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,gCAAa,mBAAmB,GAAG;AACtC;AAWO,MAAM,4BAAsE,CAAC;AAAA,EAClF;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAW,sBAAQ,MAAM;AAC7B,UAAM,OAAuC,CAAC;AAC9C,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,EAAG,MAAK,KAAK,aAAAA,QAAM,UAAU,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,MAAM,CAAC;AACnB,SACE,2EACG,kBAAQ,IAAI,CAAC,EAAE,IAAI,QAAQ,MAAM,MAAM,GAAG,UAAU;AACnD,UAAM,
|
|
4
|
+
"sourcesContent": ["import { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport React, { useMemo } from 'react';\nimport {\n DateRangePill,\n DateSwitcherPill,\n FreeTextSearchPillPill,\n MultiSelectPill,\n NumberRangePill,\n SelectPill,\n SingleDatePill,\n} from '../../parts/FilterBar/components/index.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { FILTER_TYPES } from '../FilterTypes.js';\n\nconst pillRenderMapper = {\n [FILTER_TYPES.SELECT]: SelectPill,\n [FILTER_TYPES.SELECT_V2]: SelectPill,\n [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectPill,\n [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n [FILTER_TYPES.SINGLE_DATE_V2]: SingleDatePill,\n [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n [FILTER_TYPES.DATE_RANGE_V2]: DateRangePill,\n [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherPill,\n [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangePill,\n [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n [FILTER_TYPES.CURRENCY_RANGE_V2]: NumberRangePill,\n [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,\n [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchPillPill,\n} as const;\n\ninterface PillsFromDataTableFiltersProps {\n filters: DSDataTableT.Filter[];\n columns: DSDataTableT.Column[];\n onFiltersChange: (filters: DSDataTableT.Filter[]) => void;\n onPillRemove?: (remove: () => void) => void;\n customPillRenderers?: Record<string, React.ComponentType<DSDataTableT.FilterPillProps<unknown>>>;\n customPillRenderer?: React.ComponentType<DSDataTableT.FilterPillProps<unknown>>;\n}\n\nexport const PillsFromDataTableFilters: React.FC<PillsFromDataTableFiltersProps> = ({\n filters,\n columns,\n\n onFiltersChange,\n onPillRemove,\n customPillRenderers,\n customPillRenderer,\n}) => {\n const pillRefs = useMemo(() => {\n const refs: React.RefObject<HTMLElement>[] = [];\n for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n return refs;\n }, [filters.length]);\n return (\n <>\n {filters.map(({ id: column, type, value }, index) => {\n const matchedColumn = columns.find((col) => col.accessor === column);\n const columnHeader = matchedColumn?.pillLabel || matchedColumn?.Header;\n let Component:\n | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n const filterType = type;\n if (customPillRenderers?.[column]) {\n Component = customPillRenderers[column];\n } else if (customPillRenderer) {\n Component = customPillRenderer;\n } else if (filterType in pillRenderMapper) {\n Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n }\n\n return (\n <Component\n key={column}\n columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n column={column}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n value={value as any}\n filters={filters}\n onFiltersChange={onFiltersChange}\n innerRef={pillRefs[index]}\n onPillRemove={onPillRemove}\n />\n );\n })}\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADyDnB;AAxDJ,mBAA+B;AAC/B,wBAQO;AAEP,yBAA6B;AAE7B,MAAM,mBAAmB;AAAA,EACvB,CAAC,gCAAa,MAAM,GAAG;AAAA,EACvB,CAAC,gCAAa,SAAS,GAAG;AAAA,EAC1B,CAAC,gCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,gCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,gCAAa,WAAW,GAAG;AAAA,EAC5B,CAAC,gCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,gCAAa,UAAU,GAAG;AAAA,EAC3B,CAAC,gCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,gCAAa,aAAa,GAAG;AAAA,EAC9B,CAAC,gCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,gCAAa,YAAY,GAAG;AAAA,EAC7B,CAAC,gCAAa,eAAe,GAAG;AAAA,EAChC,CAAC,gCAAa,cAAc,GAAG;AAAA,EAC/B,CAAC,gCAAa,iBAAiB,GAAG;AAAA,EAClC,CAAC,gCAAa,gBAAgB,GAAG;AAAA,EACjC,CAAC,gCAAa,mBAAmB,GAAG;AACtC;AAWO,MAAM,4BAAsE,CAAC;AAAA,EAClF;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,eAAW,sBAAQ,MAAM;AAC7B,UAAM,OAAuC,CAAC;AAC9C,aAAS,IAAI,GAAG,IAAI,QAAQ,QAAQ,KAAK,EAAG,MAAK,KAAK,aAAAA,QAAM,UAAU,CAAC;AACvE,WAAO;AAAA,EACT,GAAG,CAAC,QAAQ,MAAM,CAAC;AACnB,SACE,2EACG,kBAAQ,IAAI,CAAC,EAAE,IAAI,QAAQ,MAAM,MAAM,GAAG,UAAU;AACnD,UAAM,gBAAgB,QAAQ,KAAK,CAAC,QAAQ,IAAI,aAAa,MAAM;AACnE,UAAM,eAAe,eAAe,aAAa,eAAe;AAChE,QAAI,YAE6D,MAAM;AAEvE,UAAM,aAAa;AACnB,QAAI,sBAAsB,MAAM,GAAG;AACjC,kBAAY,oBAAoB,MAAM;AAAA,IACxC,WAAW,oBAAoB;AAC7B,kBAAY;AAAA,IACd,WAAW,cAAc,kBAAkB;AACzC,kBAAY,iBAAiB,UAA2C;AAAA,IAC1E;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QAEC,cAAc,OAAO,iBAAiB,WAAW,eAAe;AAAA,QAChE;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,SAAS,KAAK;AAAA,QACxB;AAAA;AAAA,MARK;AAAA,IASP;AAAA,EAEJ,CAAC,GACH;AAEJ;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -114,7 +114,8 @@ const FiltersBar = () => {
|
|
|
114
114
|
getOwnerProps,
|
|
115
115
|
children: [
|
|
116
116
|
filters.map(({ id: column, type, value }, index) => {
|
|
117
|
-
const
|
|
117
|
+
const matchedColumn = visibleColumns.find((col) => col.accessor === column);
|
|
118
|
+
const columnHeader = matchedColumn?.pillLabel || matchedColumn?.Header;
|
|
118
119
|
let Component = () => null;
|
|
119
120
|
const filterType = type;
|
|
120
121
|
if (filterType in pillRenderMapper) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/FilterBar/FiltersBar.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport {\n SelectPill,\n MultiSelectPill,\n SingleDatePill,\n DateRangePill,\n NumberRangePill,\n DateSwitcherPill,\n FreeTextSearchPillPill,\n} from './components/index.js';\nimport { StyledWrapper } from './styled.js';\nimport { DeprecatedDropdown } from './DeprecatedDropdown.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst pillRenderMapper = {\n [FILTER_TYPES.SELECT]: SelectPill,\n [FILTER_TYPES.SELECT_V2]: SelectPill,\n [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectPill,\n [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n [FILTER_TYPES.SINGLE_DATE_V2]: SingleDatePill,\n [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n [FILTER_TYPES.DATE_RANGE_V2]: DateRangePill,\n [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherPill,\n [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangePill,\n [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n [FILTER_TYPES.CURRENCY_RANGE_V2]: NumberRangePill,\n [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,\n [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchPillPill,\n} as const;\n\nexport const FiltersBar: React.ComponentType = () => {\n const width = usePropsStore((state) => state.width);\n const filterBarProps = usePropsStore((state) => state.filterBarProps);\n const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n const filters = usePropsStore((state) => state.filters);\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const [isOpen, setIsOpen] = useState(false);\n\n const pillGroupRefs = useMemo(() => {\n const refs: React.RefObject<HTMLElement>[] = [];\n for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n return refs;\n }, [filters.length]);\n\n const dropdownMenuRef = useRef<HTMLButtonElement | null>(null);\n\n const {\n filterBarAddonRenderer: FilterBarAddonRenderer,\n onClearAllFiltersClick,\n onDropdownMenuToggle,\n onDropdownMenuClickOutside,\n onDropdownMenuTriggerClick,\n isDropdownMenuOpen,\n } = filterBarProps || {};\n\n const removeAllFilters = useCallback(() => {\n onFiltersChange([]);\n onClearAllFiltersClick?.();\n setIsOpen(false);\n }, [onFiltersChange, onClearAllFiltersClick]);\n\n const onFilterBarClose = useCallback(() => {\n onDropdownMenuToggle?.(false, 'onClose');\n dropdownMenuRef.current?.focus();\n setIsOpen(false);\n }, [onDropdownMenuToggle]);\n\n const onFilterBarOpen = useCallback(() => {\n onDropdownMenuToggle?.(true, 'onOpen');\n setIsOpen(true);\n }, [onDropdownMenuToggle]);\n\n const onFilterBarOnClickOutside = useCallback(() => {\n onDropdownMenuToggle?.(false, 'onClickOutside');\n onDropdownMenuClickOutside?.();\n setIsOpen(false);\n }, [onDropdownMenuClickOutside, onDropdownMenuToggle]);\n\n const onTriggerClick = useCallback(() => {\n onDropdownMenuTriggerClick?.();\n onFilterBarOpen();\n }, [onDropdownMenuTriggerClick, onFilterBarOpen]);\n\n const finalIsOpen = useMemo(() => {\n if (typeof isDropdownMenuOpen === 'boolean') return isDropdownMenuOpen;\n return isOpen;\n }, [isDropdownMenuOpen, isOpen]);\n\n return (\n <StyledWrapper\n width={width}\n /**\n * PUI-17317 - [DataTable] No announcement is made when a filter is added or removed\n * https://jira.elliemae.io/browse/PUI-17317\n *\n * ## Problem\n * Screen reader users received no feedback when filters were added or removed.\n * The attempted fix \u2014 placing `aria-live=\"polite\"` + `aria-relevant=\"additions removals\"`\n * on this wrapper \u2014 was unreliable across screen readers and, when it did fire,\n * produced meaningless announcements by concatenating the pill label with its\n * remove-button aria-label, e.g.:\n * \"React Dev Remove React Dev from Position\"\n *\n * WCAG recommends contextual messages like \"Filter applied: Currency = USD\".\n * That level of specificity cannot be achieved automatically through aria attributes alone.\n *\n * ## Decision\n * `aria-live` / `aria-relevant` were removed from this component.\n * The responsibility for announcing filter changes is delegated to the consumer,\n * who has access to the full filter state and can compose meaningful messages like:\n *\n * e.g: Multi Select Filter\n *\n * - \"Filter added: Position: React dev\"\n * - \"Filter updated: Position: React dev, Fullstack dev\"\n * - \"Filter removed: Position: React dev, Fullstack dev\"\n */\n /*\n aria-live=\"polite\"\n aria-relevant=\"additions removals\" \n */\n gutter=\"xs\"\n getOwnerProps={getOwnerProps}\n >\n {filters.map(({ id: column, type, value }, index) => {\n const
|
|
5
|
-
"mappings": "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
|
|
4
|
+
"sourcesContent": ["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { FILTER_TYPES } from '../../exported-related/index.js';\nimport {\n SelectPill,\n MultiSelectPill,\n SingleDatePill,\n DateRangePill,\n NumberRangePill,\n DateSwitcherPill,\n FreeTextSearchPillPill,\n} from './components/index.js';\nimport { StyledWrapper } from './styled.js';\nimport { DeprecatedDropdown } from './DeprecatedDropdown.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst pillRenderMapper = {\n [FILTER_TYPES.SELECT]: SelectPill,\n [FILTER_TYPES.SELECT_V2]: SelectPill,\n [FILTER_TYPES.MULTI_SELECT]: MultiSelectPill,\n [FILTER_TYPES.MULTI_SELECT_V2]: MultiSelectPill,\n [FILTER_TYPES.SINGLE_DATE]: SingleDatePill,\n [FILTER_TYPES.SINGLE_DATE_V2]: SingleDatePill,\n [FILTER_TYPES.DATE_RANGE]: DateRangePill,\n [FILTER_TYPES.DATE_RANGE_V2]: DateRangePill,\n [FILTER_TYPES.DATE_SWITCHER]: DateSwitcherPill,\n [FILTER_TYPES.DATE_SWITCHER_V2]: DateSwitcherPill,\n [FILTER_TYPES.NUMBER_RANGE]: NumberRangePill,\n [FILTER_TYPES.NUMBER_RANGE_V2]: NumberRangePill,\n [FILTER_TYPES.CURRENCY_RANGE]: NumberRangePill,\n [FILTER_TYPES.CURRENCY_RANGE_V2]: NumberRangePill,\n [FILTER_TYPES.FREE_TEXT_SEARCH]: FreeTextSearchPillPill,\n [FILTER_TYPES.FREE_TEXT_SEARCH_V2]: FreeTextSearchPillPill,\n} as const;\n\nexport const FiltersBar: React.ComponentType = () => {\n const width = usePropsStore((state) => state.width);\n const filterBarProps = usePropsStore((state) => state.filterBarProps);\n const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n const filters = usePropsStore((state) => state.filters);\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const [isOpen, setIsOpen] = useState(false);\n\n const pillGroupRefs = useMemo(() => {\n const refs: React.RefObject<HTMLElement>[] = [];\n for (let i = 0; i < filters.length; i += 1) refs.push(React.createRef());\n return refs;\n }, [filters.length]);\n\n const dropdownMenuRef = useRef<HTMLButtonElement | null>(null);\n\n const {\n filterBarAddonRenderer: FilterBarAddonRenderer,\n onClearAllFiltersClick,\n onDropdownMenuToggle,\n onDropdownMenuClickOutside,\n onDropdownMenuTriggerClick,\n isDropdownMenuOpen,\n } = filterBarProps || {};\n\n const removeAllFilters = useCallback(() => {\n onFiltersChange([]);\n onClearAllFiltersClick?.();\n setIsOpen(false);\n }, [onFiltersChange, onClearAllFiltersClick]);\n\n const onFilterBarClose = useCallback(() => {\n onDropdownMenuToggle?.(false, 'onClose');\n dropdownMenuRef.current?.focus();\n setIsOpen(false);\n }, [onDropdownMenuToggle]);\n\n const onFilterBarOpen = useCallback(() => {\n onDropdownMenuToggle?.(true, 'onOpen');\n setIsOpen(true);\n }, [onDropdownMenuToggle]);\n\n const onFilterBarOnClickOutside = useCallback(() => {\n onDropdownMenuToggle?.(false, 'onClickOutside');\n onDropdownMenuClickOutside?.();\n setIsOpen(false);\n }, [onDropdownMenuClickOutside, onDropdownMenuToggle]);\n\n const onTriggerClick = useCallback(() => {\n onDropdownMenuTriggerClick?.();\n onFilterBarOpen();\n }, [onDropdownMenuTriggerClick, onFilterBarOpen]);\n\n const finalIsOpen = useMemo(() => {\n if (typeof isDropdownMenuOpen === 'boolean') return isDropdownMenuOpen;\n return isOpen;\n }, [isDropdownMenuOpen, isOpen]);\n\n return (\n <StyledWrapper\n width={width}\n /**\n * PUI-17317 - [DataTable] No announcement is made when a filter is added or removed\n * https://jira.elliemae.io/browse/PUI-17317\n *\n * ## Problem\n * Screen reader users received no feedback when filters were added or removed.\n * The attempted fix \u2014 placing `aria-live=\"polite\"` + `aria-relevant=\"additions removals\"`\n * on this wrapper \u2014 was unreliable across screen readers and, when it did fire,\n * produced meaningless announcements by concatenating the pill label with its\n * remove-button aria-label, e.g.:\n * \"React Dev Remove React Dev from Position\"\n *\n * WCAG recommends contextual messages like \"Filter applied: Currency = USD\".\n * That level of specificity cannot be achieved automatically through aria attributes alone.\n *\n * ## Decision\n * `aria-live` / `aria-relevant` were removed from this component.\n * The responsibility for announcing filter changes is delegated to the consumer,\n * who has access to the full filter state and can compose meaningful messages like:\n *\n * e.g: Multi Select Filter\n *\n * - \"Filter added: Position: React dev\"\n * - \"Filter updated: Position: React dev, Fullstack dev\"\n * - \"Filter removed: Position: React dev, Fullstack dev\"\n */\n /*\n aria-live=\"polite\"\n aria-relevant=\"additions removals\" \n */\n gutter=\"xs\"\n getOwnerProps={getOwnerProps}\n >\n {filters.map(({ id: column, type, value }, index) => {\n const matchedColumn = visibleColumns.find((col) => col.accessor === column);\n const columnHeader = matchedColumn?.pillLabel || matchedColumn?.Header;\n let Component:\n | TypescriptHelpersT.ObjectValues<typeof pillRenderMapper>\n | React.ComponentType<DSDataTableT.FilterPillProps<unknown>> = () => null;\n\n const filterType = type;\n if (filterType in pillRenderMapper) {\n Component = pillRenderMapper[filterType as keyof typeof pillRenderMapper];\n } else if (filterBarProps?.customPillRenderer) {\n Component = filterBarProps.customPillRenderer;\n }\n return (\n <Component\n key={column}\n columnHeader={typeof columnHeader === 'string' ? columnHeader : column}\n column={column}\n // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment\n value={value as any}\n filters={filters}\n onFiltersChange={onFiltersChange}\n prevRef={pillGroupRefs[index - 1]}\n innerRef={pillGroupRefs[index]}\n nextRef={pillGroupRefs[index + 1] ?? dropdownMenuRef}\n />\n );\n })}\n {FilterBarAddonRenderer ? (\n <FilterBarAddonRenderer innerRef={dropdownMenuRef} />\n ) : (\n <DeprecatedDropdown\n finalIsOpen={finalIsOpen}\n onFilterBarClose={onFilterBarClose}\n onFilterBarOnClickOutside={onFilterBarOnClickOutside}\n removeAllFilters={removeAllFilters}\n filterBarProps={filterBarProps}\n dropdownMenuRef={dropdownMenuRef}\n onTriggerClick={onTriggerClick}\n />\n )}\n </StyledWrapper>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -45,23 +45,9 @@ var import_useHeaderCellHandlers = require("./useHeaderCellHandlers.js");
|
|
|
45
45
|
var import_useHeaderCellConfig = require("./useHeaderCellConfig.js");
|
|
46
46
|
var import_constants = require("../../configs/constants.js");
|
|
47
47
|
var import_HeaderCellTitle = require("./HeaderCellTitle.js");
|
|
48
|
+
var import_buildScreenReaderInstructions = require("./buildScreenReaderInstructions.js");
|
|
48
49
|
var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
|
|
49
|
-
const
|
|
50
|
-
colSpan,
|
|
51
|
-
draggable,
|
|
52
|
-
filterable,
|
|
53
|
-
sortable
|
|
54
|
-
}) => {
|
|
55
|
-
const preffix = colSpan === 1 ? "" : "Column Group. ";
|
|
56
|
-
if (!draggable && !filterable && !sortable) return preffix;
|
|
57
|
-
let message = sortable ? "You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so" : "";
|
|
58
|
-
if (draggable && filterable) {
|
|
59
|
-
message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;
|
|
60
|
-
} else if (draggable || filterable) {
|
|
61
|
-
message = `This column is ${draggable ? "draggable" : "filterable"}. To enable this interaction press the enter key. ${message}`;
|
|
62
|
-
}
|
|
63
|
-
return `${preffix}${message}`;
|
|
64
|
-
};
|
|
50
|
+
const HIDDEN_STYLE = { display: "none" };
|
|
65
51
|
const HeaderCell = (props) => {
|
|
66
52
|
const { column, isDragOverlay, colSpan } = props;
|
|
67
53
|
const disabledRows = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.disabledRows);
|
|
@@ -146,7 +132,7 @@ const HeaderCell = (props) => {
|
|
|
146
132
|
handleSort
|
|
147
133
|
]);
|
|
148
134
|
const DnDHandleComponent = (0, import_react.useMemo)(
|
|
149
|
-
() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { mr: "2px", alignItems: "flex-start", style: { position: "relative"
|
|
135
|
+
() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { mr: "2px", height: "fit-content", py: "2px", mt: "2px", alignItems: "flex-start", style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFocusWithin, { hideFocus: isDragging, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
150
136
|
import_DnDHandle.DragHandle,
|
|
151
137
|
{
|
|
152
138
|
innerRef: dragHandleRef,
|
|
@@ -160,7 +146,14 @@ const HeaderCell = (props) => {
|
|
|
160
146
|
[column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops]
|
|
161
147
|
);
|
|
162
148
|
const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, "");
|
|
163
|
-
|
|
149
|
+
const instructions = (0, import_buildScreenReaderInstructions.buildScreenReaderInstructions)({
|
|
150
|
+
colSpan,
|
|
151
|
+
draggable: dragAndDropColumns && column.disableDnD !== true,
|
|
152
|
+
filterable: hasFilter,
|
|
153
|
+
sortable: column.canSort ?? false,
|
|
154
|
+
resizable: shouldShowResize
|
|
155
|
+
});
|
|
156
|
+
const headTh = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
164
157
|
import_styled.StyledHeadTh,
|
|
165
158
|
{
|
|
166
159
|
column,
|
|
@@ -184,14 +177,10 @@ const HeaderCell = (props) => {
|
|
|
184
177
|
rightIcons,
|
|
185
178
|
shouldShowResize && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_HeaderResizer.HeaderResizer, { column, innerRef: resizeHandlerRef, isReachable: reduxHeader?.withTabStops ?? false })
|
|
186
179
|
] }),
|
|
187
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: screenReaderInstructionsId, style:
|
|
188
|
-
colSpan,
|
|
189
|
-
draggable: dragAndDropColumns && column.disableDnD !== true,
|
|
190
|
-
filterable: hasFilter,
|
|
191
|
-
sortable: column.canSort ?? false
|
|
192
|
-
}) })
|
|
180
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: screenReaderInstructionsId, style: HIDDEN_STYLE, children: instructions })
|
|
193
181
|
]
|
|
194
182
|
}
|
|
195
183
|
);
|
|
184
|
+
return headTh;
|
|
196
185
|
};
|
|
197
186
|
//# sourceMappingURL=HeaderCell.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/HeaderCell.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { buildScreenReaderInstructions } from './buildScreenReaderInstructions.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\ninterface HeaderCellCompProps {\n column: DSDataTableT.InternalColumn;\n isDragOverlay?: boolean;\n colSpan: number;\n}\n\n/** Screen-reader instructions node \u2014 referenced via aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\n\nexport const HeaderCell: React.ComponentType<HeaderCellCompProps> = (props) => {\n const { column, isDragOverlay, colSpan } = props;\n const disabledRows = usePropsStore((state) => state.disabledRows);\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const onFiltersChange = usePropsStore((state) => state.onFiltersChange);\n const filters = usePropsStore((state) => state.filters);\n const textWrap = usePropsStore((state) => state.textWrap);\n const noResultsMessage = usePropsStore((state) => state.noResultsMessage);\n const domIdAffix = usePropsStore((state) => state.domIdAffix);\n const noResultsSecondaryMessage = usePropsStore((state) => state.noResultsSecondaryMessage);\n const isEmptyContent = usePropsStore((state) => state.isEmptyContent);\n const firstFocuseableColumnHeaderId = usePropsStore((state) => state.firstFocuseableColumnHeaderId);\n const getOwnerProps = usePropsStore((store) => store.get);\n const getOwnerPropsArguments = useCallback(\n () => ({\n columnId: column.id,\n firstFocuseableColumnHeaderId,\n }),\n [column.id, firstFocuseableColumnHeaderId],\n );\n const reference = useRef<HTMLDivElement | null>(null);\n\n const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n const dragHandleRef = useRef<HTMLDivElement | null>(null);\n const filterIconRef = useRef<HTMLButtonElement | null>(null);\n const resizeHandlerRef = useRef<HTMLDivElement | null>(null);\n const sortRef = useRef<HTMLButtonElement | null>(null);\n const { draggableProps } = useContext(SortableItemContext);\n\n const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } =\n useHeaderCellConfig(props);\n\n const { handleSort, ...handlers } = useHeaderCellHandlers({\n hasFilter,\n column,\n hasDnD,\n dragHandleRef,\n filterIconRef,\n resizeHandlerRef,\n sortRef,\n hasSortingCaret,\n isDragOverlay,\n draggableProps,\n referenceColumn: reference,\n });\n\n const rightIcons = useMemo(() => {\n if (!hasRightIcons) return null;\n return (\n <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n <FilterMapItem\n column={column}\n referenceColumn={!isDragOverlay ? reference.current : undefined}\n onFiltersChange={onFiltersChange}\n reduxHeader={reduxHeader}\n filters={filters}\n innerRef={filterIconRef}\n />\n {hasSortingCaret && (\n <SortByCaret\n isSortedDesc={column.isSortedDesc}\n onClick={(e) => {\n e.stopPropagation();\n handleSort(e as React.MouseEvent);\n }}\n isReachable={reduxHeader?.withTabStops ?? false}\n column={column}\n reduxHeader={reduxHeader}\n innerRef={sortRef}\n />\n )}\n </StyledHeaderRightIconsWrapper>\n );\n }, [\n hasRightIcons,\n getOwnerProps,\n getOwnerPropsArguments,\n column,\n isDragOverlay,\n onFiltersChange,\n reduxHeader,\n filters,\n hasSortingCaret,\n handleSort,\n ]);\n\n const DnDHandleComponent = useMemo(\n () => (\n <Grid mr=\"2px\" height=\"fit-content\" py=\"2px\" mt=\"2px\" alignItems=\"flex-start\" style={{ position: 'relative' }}>\n <StyledFocusWithin hideFocus={isDragging}>\n <DragHandle\n key={column.id}\n innerRef={dragHandleRef}\n isReachable={reduxHeader?.withTabStops ?? false}\n id={`header-dnd-handle-${column.id}-${domIdAffix}`}\n isDragOverlay={isDragOverlay}\n isDisabled={disabledRows[column.id]}\n />\n </StyledFocusWithin>\n </Grid>\n ),\n [column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops],\n );\n\n const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n const instructions = buildScreenReaderInstructions({\n colSpan,\n draggable: dragAndDropColumns && column.disableDnD !== true,\n filterable: hasFilter,\n sortable: column.canSort ?? false,\n resizable: shouldShowResize,\n });\n\n const headTh = (\n <StyledHeadTh\n column={column}\n onClick={handleSort}\n {...handlers}\n role=\"columnheader\"\n {...(isEmptyContent && column.id === firstFocuseableColumnHeaderId\n ? { 'aria-label': `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ''}` }\n : {})}\n aria-describedby={screenReaderInstructionsId}\n aria-sort={hasSortingCaret ? (column.isSortedDesc ? 'descending' : 'ascending') : 'none'}\n data-testid={DATA_TESTID.DATA_TABLE_HEADER}\n tabIndex={column.isFocuseable === false ? -1 : 0}\n isDraggingActive={Boolean(draggableProps && draggableProps.active)}\n shouldShowDnD={shouldShowDnD}\n innerRef={reference}\n getOwnerProps={getOwnerProps}\n getOwnerPropsArguments={getOwnerPropsArguments}\n >\n <Grid width=\"100%\" cols={hCols}>\n {shouldShowDnD && DnDHandleComponent}\n <HeaderCellTitle column={column} draggableProps={draggableProps} textWrap={textWrap} />\n {rightIcons}\n {shouldShowResize && (\n <HeaderResizer column={column} innerRef={resizeHandlerRef} isReachable={reduxHeader?.withTabStops ?? false} />\n )}\n </Grid>\n {/* Screen-reader instructions referenced by aria-describedby. display:none keeps them out of\n the header's name-from-content (so they are not read twice) while still being announced as\n the description \u2014 the same pattern used for filterable/sortable columns. */}\n <span id={screenReaderInstructionsId} style={HIDDEN_STYLE}>\n {instructions}\n </span>\n </StyledHeadTh>\n );\n\n return headTh;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -37,13 +37,27 @@ var import_react = require("react");
|
|
|
37
37
|
var import_styled = require("../../styled.js");
|
|
38
38
|
var import_useHeaderResizer = require("./useHeaderResizer.js");
|
|
39
39
|
var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
|
|
40
|
+
var import_constants = require("../../configs/constants.js");
|
|
40
41
|
const stopPropagation = (e) => e.stopPropagation();
|
|
42
|
+
const HIDDEN_STYLE = { display: "none" };
|
|
43
|
+
const RESIZE_INSTRUCTION = "Use the left and right arrow keys to increase or decrease the column width.";
|
|
44
|
+
const bracketBound = (configuredBound, columnWidth, pickWider) => pickWider(configuredBound, columnWidth ?? configuredBound);
|
|
41
45
|
const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
42
|
-
const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = (0, import_useHeaderResizer.useHeaderResizer)({
|
|
46
|
+
const { isResizing, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = (0, import_useHeaderResizer.useHeaderResizer)({
|
|
43
47
|
columnId: column.id,
|
|
44
48
|
innerRef
|
|
45
49
|
});
|
|
46
50
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
51
|
+
const resizerA11yMode = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.resizerA11yMode);
|
|
52
|
+
const resizeLabel = typeof column.Header === "string" ? `Resize ${column.Header} column` : "Resize column";
|
|
53
|
+
const nameId = `resize-name-${column.id}`.replace(/ /g, "");
|
|
54
|
+
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
|
+
const valueMin = bracketBound(column.minWidth ?? import_constants.DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);
|
|
59
|
+
const valueMax = bracketBound(column.maxWidth ?? import_constants.DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);
|
|
60
|
+
const valueText = columnWidth === void 0 ? void 0 : `${columnWidth} pixels`;
|
|
47
61
|
(0, import_react.useEffect)(() => {
|
|
48
62
|
const addEvents = () => {
|
|
49
63
|
document.addEventListener("mousemove", onResizeHandler);
|
|
@@ -61,21 +75,31 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
61
75
|
else removeEvents();
|
|
62
76
|
return removeEvents;
|
|
63
77
|
}, [isResizing, onResizeHandler, onResizeEnd]);
|
|
64
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.
|
|
78
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
65
79
|
import_styled.StyledResizer,
|
|
66
80
|
{
|
|
67
|
-
|
|
68
|
-
"aria-
|
|
81
|
+
role,
|
|
82
|
+
"aria-orientation": orientation,
|
|
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,
|
|
69
90
|
tabIndex: isReachable ? 0 : -1,
|
|
70
91
|
innerRef,
|
|
71
|
-
draggable: false,
|
|
72
92
|
onMouseDown: onResizeStart,
|
|
73
93
|
onTouchStart: onResizeStart,
|
|
74
94
|
onMouseUp: onResizeEnd,
|
|
75
95
|
onTouchEnd: onResizeEnd,
|
|
76
96
|
onClick: stopPropagation,
|
|
77
97
|
onKeyDown: handleKeyboardResize,
|
|
78
|
-
getOwnerProps
|
|
98
|
+
getOwnerProps,
|
|
99
|
+
children: [
|
|
100
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: nameId, style: HIDDEN_STYLE, children: resizeLabel }),
|
|
101
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: instructionId, style: HIDDEN_STYLE, children: RESIZE_INSTRUCTION })
|
|
102
|
+
]
|
|
79
103
|
}
|
|
80
104
|
);
|
|
81
105
|
};
|
|
@@ -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';\n\nconst stopPropagation = (e: React.MouseEvent) => e.stopPropagation();\n\nexport const HeaderResizer: React.ComponentType<{\n column: DSDataTableT.InternalColumn;\n innerRef: React.MutableRefObject<
|
|
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, ResizerA11yMode } 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<HTMLDivElement | 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 const resizerA11yMode = usePropsStore((state) => state.resizerA11yMode);\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 isSlider = resizerA11yMode === ResizerA11yMode.Slider;\n const role = isSlider ? 'slider' : 'separator';\n // A column-width resizer is visually a vertical bar between two columns (separator's own axis), but\n // a slider's orientation describes its interaction/track axis \u2014 our ArrowLeft/ArrowRight interaction\n // maps to \"horizontal\" under that model. Flagged for empirical AT verification (VoiceOver/NVDA)\n // before sign-off \u2014 see SR-FINDINGS.md.\n const orientation = isSlider ? 'horizontal' : 'vertical';\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 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 <StyledResizer\n role={role}\n aria-orientation={orientation}\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 onMouseDown={onResizeStart}\n onTouchStart={onResizeStart}\n onMouseUp={onResizeEnd}\n onTouchEnd={onResizeEnd}\n onClick={stopPropagation}\n onKeyDown={handleKeyboardResize}\n getOwnerProps={getOwnerProps}\n >\n {/*\n PUI-17784: role=\"application\" is discarded entirely (was an interim mitigation for a\n button-activation-contract concern that no longer applies to a value-bearing separator/slider).\n The resize handle is a plain div exposed as role=\"separator\" by default, or role=\"slider\" via\n the resizerA11yMode prop \u2014 a temporary toggle so the a11y SME can compare both before the team\n commits permanently. aria-valuenow/min/max/text are restored: the resize now has a genuine\n bounded range (column.minWidth/maxWidth, defaulting to DEFAULT_MIN_COLUMN_WIDTH/\n DEFAULT_MAX_COLUMN_WIDTH), which is what makes the value meaningful under either role.\n aria-hidden/tabIndex are unchanged \u2014 still driven by the same `isReachable` flag (hidden while\n the header is not in child-navigation mode) so the control's name is never folded into the\n header's announcement, and it's never a focusable aria-hidden element. How to operate it is\n conveyed via aria-describedby, unchanged.\n\n Name via aria-labelledby -> a hidden span, unconditionally for both modes (see SR-FINDINGS.md /\n design.md D3). A plain aria-label was considered for slider mode (separator's role does NOT\n reliably support name-from-author via aria-label per finding #5, while a Chromium AX probe\n found slider's computed name resolves identically either way) \u2014 but the label text here is\n per-column (\"Resize {column} column\"), never the generic string QA's existing e2e selector\n checks for, so aria-label would not have actually helped that selector regardless of mechanism.\n Kept on the single proven mechanism (aria-labelledby, verified with VoiceOver for separator \u2014\n finding #9) rather than take on an unverified-with-real-AT risk for no practical gain.\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 </StyledResizer>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD+EnB;AA/EJ,mBAAiC;AACjC,oBAA8B;AAE9B,8BAAiC;AACjC,2CAA8B;AAC9B,uBAAoF;AAEpF,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;AACxD,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AAEtE,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,oBAAoB,iCAAgB;AACrD,QAAM,OAAO,WAAW,WAAW;AAKnC,QAAM,cAAc,WAAW,eAAe;AAC9C,QAAM,WAAW,aAAa,OAAO,YAAY,2CAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,WAAW,aAAa,OAAO,YAAY,2CAA0B,aAAa,KAAK,GAAG;AAChG,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;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,oBAAkB;AAAA,MAClB,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,iBAAe;AAAA,MACf,kBAAgB;AAAA,MAChB,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,eAAa,cAAc,SAAY;AAAA,MACvC,UAAU,cAAc,IAAI;AAAA,MAC5B;AAAA,MACA,aAAa;AAAA,MACb,cAAc;AAAA,MACd,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,WAAW;AAAA,MACX;AAAA,MAwBA;AAAA,oDAAC,UAAK,IAAI,QAAQ,OAAO,cACtB,uBACH;AAAA,QACA,4CAAC,UAAK,IAAI,eAAe,OAAO,cAC7B,8BACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var buildScreenReaderInstructions_exports = {};
|
|
30
|
+
__export(buildScreenReaderInstructions_exports, {
|
|
31
|
+
buildScreenReaderInstructions: () => buildScreenReaderInstructions
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(buildScreenReaderInstructions_exports);
|
|
34
|
+
var React = __toESM(require("react"));
|
|
35
|
+
const joinAffordances = (items) => {
|
|
36
|
+
if (items.length <= 1) return items[0] ?? "";
|
|
37
|
+
if (items.length === 2) return `${items[0]} and ${items[1]}`;
|
|
38
|
+
return `${items.slice(0, -1).join(", ")} and ${items[items.length - 1]}`;
|
|
39
|
+
};
|
|
40
|
+
const SORT_INSTRUCTION = "You can sort the data ascendingly or descendingly by this column. Use the up / down arrow keys to do so.";
|
|
41
|
+
const buildScreenReaderInstructions = ({
|
|
42
|
+
colSpan,
|
|
43
|
+
draggable,
|
|
44
|
+
filterable,
|
|
45
|
+
sortable,
|
|
46
|
+
resizable
|
|
47
|
+
}) => {
|
|
48
|
+
const prefix = colSpan === 1 ? "" : "Column Group. ";
|
|
49
|
+
const sentences = [];
|
|
50
|
+
const enterAffordances = [];
|
|
51
|
+
if (draggable) enterAffordances.push("draggable");
|
|
52
|
+
if (filterable) enterAffordances.push("filterable");
|
|
53
|
+
if (resizable) enterAffordances.push("resizable");
|
|
54
|
+
if (enterAffordances.length > 0) {
|
|
55
|
+
const interaction = enterAffordances.length > 1 ? "these interactions" : "this interaction";
|
|
56
|
+
sentences.push(
|
|
57
|
+
`This column is ${joinAffordances(enterAffordances)}. To enable ${interaction} press the enter key.`
|
|
58
|
+
);
|
|
59
|
+
}
|
|
60
|
+
if (sortable) sentences.push(SORT_INSTRUCTION);
|
|
61
|
+
return `${prefix}${sentences.join(" ")}`;
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=buildScreenReaderInstructions.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/parts/Headers/buildScreenReaderInstructions.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * Joins affordance words into a natural-language list:\n * ['a'] -> 'a'\n * ['a', 'b'] -> 'a and b'\n * ['a', 'b', 'c'] -> 'a, b and c'\n */\nconst joinAffordances = (items: string[]): string => {\n if (items.length <= 1) return items[0] ?? '';\n if (items.length === 2) return `${items[0]} and ${items[1]}`;\n return `${items.slice(0, -1).join(', ')} and ${items[items.length - 1]}`;\n};\n\nconst SORT_INSTRUCTION =\n 'You can sort the data ascendingly or descendingly by this column. Use the up / down arrow keys to do so.';\n\n/**\n * Builds the screen-reader instructions announced for a column header (via the header's\n * aria-describedby).\n *\n * Draggable, filterable and resizable share the SAME activation \u2014 pressing Enter on the focused\n * header reveals and focuses those controls (see useHeaderCellHandlers onKeyDown) \u2014 so they are\n * announced together as a single grammatical list with ONE \"press the enter key\" instruction, for\n * any combination/permutation, instead of repeating the instruction per affordance.\n *\n * Sorting is a distinct interaction (Up / Down arrow keys directly on the header, no Enter), so it\n * gets its own sentence. Wording pending a11y SME review.\n */\nexport const buildScreenReaderInstructions = ({\n colSpan,\n draggable,\n filterable,\n sortable,\n resizable,\n}: {\n colSpan: number;\n draggable: boolean;\n filterable: boolean;\n sortable: boolean;\n resizable: boolean;\n}): string => {\n const prefix = colSpan === 1 ? '' : 'Column Group. ';\n const sentences: string[] = [];\n\n // Enter-activated affordances \u2014 combined into one sentence regardless of which are present.\n const enterAffordances: string[] = [];\n if (draggable) enterAffordances.push('draggable');\n if (filterable) enterAffordances.push('filterable');\n if (resizable) enterAffordances.push('resizable');\n if (enterAffordances.length > 0) {\n const interaction = enterAffordances.length > 1 ? 'these interactions' : 'this interaction';\n sentences.push(\n `This column is ${joinAffordances(enterAffordances)}. To enable ${interaction} press the enter key.`,\n );\n }\n\n // Sorting uses the up / down arrow keys directly on the focused header.\n if (sortable) sentences.push(SORT_INSTRUCTION);\n\n return `${prefix}${sentences.join(' ')}`;\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADMvB,MAAM,kBAAkB,CAAC,UAA4B;AACnD,MAAI,MAAM,UAAU,EAAG,QAAO,MAAM,CAAC,KAAK;AAC1C,MAAI,MAAM,WAAW,EAAG,QAAO,GAAG,MAAM,CAAC,CAAC,QAAQ,MAAM,CAAC,CAAC;AAC1D,SAAO,GAAG,MAAM,MAAM,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,QAAQ,MAAM,MAAM,SAAS,CAAC,CAAC;AACxE;AAEA,MAAM,mBACJ;AAcK,MAAM,gCAAgC,CAAC;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMc;AACZ,QAAM,SAAS,YAAY,IAAI,KAAK;AACpC,QAAM,YAAsB,CAAC;AAG7B,QAAM,mBAA6B,CAAC;AACpC,MAAI,UAAW,kBAAiB,KAAK,WAAW;AAChD,MAAI,WAAY,kBAAiB,KAAK,YAAY;AAClD,MAAI,UAAW,kBAAiB,KAAK,WAAW;AAChD,MAAI,iBAAiB,SAAS,GAAG;AAC/B,UAAM,cAAc,iBAAiB,SAAS,IAAI,uBAAuB;AACzE,cAAU;AAAA,MACR,kBAAkB,gBAAgB,gBAAgB,CAAC,eAAe,WAAW;AAAA,IAC/E;AAAA,EACF;AAGA,MAAI,SAAU,WAAU,KAAK,gBAAgB;AAE7C,SAAO,GAAG,MAAM,GAAG,UAAU,KAAK,GAAG,CAAC;AACxC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -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<
|
|
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 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 patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n }, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);\n\n const onMouseLeave: React.MouseEventHandler = useCallback(() => {\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]);\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 patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));\n setFocusedRowId(null);\n }\n\n if (possibleTargets.includes(e.target as HTMLElement | null)) {\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 reduxHeader,\n resizeHandlerRef,\n setFocusedRowId,\n hasSortingCaret,\n ],\n );\n\n const onBlur: React.FocusEventHandler = useCallback(\n (e) => {\n // Don't do anything if blur was caused by going to a child\n if (e.relatedTarget === dragHandleRef.current) return;\n if (e.relatedTarget === filterIconRef.current) return;\n if (e.relatedTarget === resizeHandlerRef.current) return;\n if (e.relatedTarget === sortRef?.current) return;\n patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));\n },\n [dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD],\n );\n\n return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -35,8 +35,9 @@ var React = __toESM(require("react"));
|
|
|
35
35
|
var import_lodash_es = require("lodash-es");
|
|
36
36
|
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_createInternalAndPropsContext = require("../../configs/useStore/createInternalAndPropsContext.js");
|
|
38
|
+
var import_constants = require("../../configs/constants.js");
|
|
38
39
|
var import_gridLayoutHelpers = require("../../helpers/gridLayoutHelpers.js");
|
|
39
|
-
const narrow = (value, min, max) => Math.min(Math.max(value, min ??
|
|
40
|
+
const narrow = (value, min, max) => Math.min(Math.max(value, min ?? import_constants.DEFAULT_MIN_COLUMN_WIDTH), max ?? import_constants.DEFAULT_MAX_COLUMN_WIDTH);
|
|
40
41
|
const getCorrectDelta = (e) => {
|
|
41
42
|
let multiplier = 1;
|
|
42
43
|
if (e.shiftKey) multiplier *= 5;
|
|
@@ -57,6 +58,7 @@ const useHeaderResizer = ({
|
|
|
57
58
|
const onColumnResize = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnResize);
|
|
58
59
|
const onColumnSizeChange = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.onColumnSizeChange);
|
|
59
60
|
const virtualListRef = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.virtualListRef);
|
|
61
|
+
const colsLayoutStyle = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.colsLayoutStyle);
|
|
60
62
|
const [isResizing, setIsResizing] = (0, import_react.useState)(false);
|
|
61
63
|
const visibleColumnsCopy = (0, import_react.useMemo)(() => (0, import_lodash_es.cloneDeep)(visibleColumns), [visibleColumns]);
|
|
62
64
|
const visibleColumnsOnGridLayout = (0, import_react.useMemo)(
|
|
@@ -74,6 +76,9 @@ const useHeaderResizer = ({
|
|
|
74
76
|
);
|
|
75
77
|
const realColumnIndexRef = import_react.default.useRef(realColumnIndex);
|
|
76
78
|
realColumnIndexRef.current = realColumnIndex;
|
|
79
|
+
const [columnWidth, setColumnWidth] = (0, import_react.useState)(
|
|
80
|
+
visibleColumnsOnGridLayout[realColumnIndex]?.width ?? (colsLayoutStyle === import_constants.ColsLayoutStyle.Auto ? void 0 : 150)
|
|
81
|
+
);
|
|
77
82
|
const pushColumnSizeChange = (0, import_react.useCallback)(
|
|
78
83
|
(nextWidth) => {
|
|
79
84
|
if (nextWidth === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;
|
|
@@ -103,6 +108,7 @@ const useHeaderResizer = ({
|
|
|
103
108
|
);
|
|
104
109
|
(0, import_gridLayoutHelpers.changeGridLayout)(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
|
|
105
110
|
(0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumnsCopy);
|
|
111
|
+
setColumnWidth(widthWithDelta);
|
|
106
112
|
e.preventDefault();
|
|
107
113
|
e.stopPropagation();
|
|
108
114
|
},
|
|
@@ -127,6 +133,7 @@ const useHeaderResizer = ({
|
|
|
127
133
|
);
|
|
128
134
|
(0, import_gridLayoutHelpers.changeGridLayout)(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
|
|
129
135
|
(0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumnsCopy);
|
|
136
|
+
setColumnWidth(widthWithDelta);
|
|
130
137
|
pushColumnSizeChange((0, import_gridLayoutHelpers.getGridLayout)(virtualListRef.current)[realColumnIndexRef.current] + delta);
|
|
131
138
|
(0, import_gridLayoutHelpers.removeGridLayout)(virtualListRef.current);
|
|
132
139
|
},
|
|
@@ -134,6 +141,7 @@ const useHeaderResizer = ({
|
|
|
134
141
|
);
|
|
135
142
|
return {
|
|
136
143
|
isResizing,
|
|
144
|
+
columnWidth,
|
|
137
145
|
onResizeStart,
|
|
138
146
|
onResizeEnd,
|
|
139
147
|
onResizeHandler,
|