@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
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/FilterBar/FiltersBar.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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": "AAAA,YAAY,WAAW;ACiGnB,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -12,23 +12,9 @@ import { useHeaderCellHandlers } from "./useHeaderCellHandlers.js";
|
|
|
12
12
|
import { useHeaderCellConfig } from "./useHeaderCellConfig.js";
|
|
13
13
|
import { DATA_TESTID } from "../../configs/constants.js";
|
|
14
14
|
import { HeaderCellTitle } from "./HeaderCellTitle.js";
|
|
15
|
+
import { buildScreenReaderInstructions } from "./buildScreenReaderInstructions.js";
|
|
15
16
|
import { useInternalStore, usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
|
|
16
|
-
const
|
|
17
|
-
colSpan,
|
|
18
|
-
draggable,
|
|
19
|
-
filterable,
|
|
20
|
-
sortable
|
|
21
|
-
}) => {
|
|
22
|
-
const preffix = colSpan === 1 ? "" : "Column Group. ";
|
|
23
|
-
if (!draggable && !filterable && !sortable) return preffix;
|
|
24
|
-
let message = sortable ? "You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so" : "";
|
|
25
|
-
if (draggable && filterable) {
|
|
26
|
-
message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;
|
|
27
|
-
} else if (draggable || filterable) {
|
|
28
|
-
message = `This column is ${draggable ? "draggable" : "filterable"}. To enable this interaction press the enter key. ${message}`;
|
|
29
|
-
}
|
|
30
|
-
return `${preffix}${message}`;
|
|
31
|
-
};
|
|
17
|
+
const HIDDEN_STYLE = { display: "none" };
|
|
32
18
|
const HeaderCell = (props) => {
|
|
33
19
|
const { column, isDragOverlay, colSpan } = props;
|
|
34
20
|
const disabledRows = usePropsStore((state) => state.disabledRows);
|
|
@@ -113,7 +99,7 @@ const HeaderCell = (props) => {
|
|
|
113
99
|
handleSort
|
|
114
100
|
]);
|
|
115
101
|
const DnDHandleComponent = useMemo(
|
|
116
|
-
() => /* @__PURE__ */ jsx(Grid, { mr: "2px", alignItems: "flex-start", style: { position: "relative"
|
|
102
|
+
() => /* @__PURE__ */ jsx(Grid, { mr: "2px", height: "fit-content", py: "2px", mt: "2px", alignItems: "flex-start", style: { position: "relative" }, children: /* @__PURE__ */ jsx(StyledFocusWithin, { hideFocus: isDragging, children: /* @__PURE__ */ jsx(
|
|
117
103
|
DragHandle,
|
|
118
104
|
{
|
|
119
105
|
innerRef: dragHandleRef,
|
|
@@ -127,7 +113,14 @@ const HeaderCell = (props) => {
|
|
|
127
113
|
[column.id, disabledRows, domIdAffix, isDragOverlay, isDragging, reduxHeader?.withTabStops]
|
|
128
114
|
);
|
|
129
115
|
const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, "");
|
|
130
|
-
|
|
116
|
+
const instructions = buildScreenReaderInstructions({
|
|
117
|
+
colSpan,
|
|
118
|
+
draggable: dragAndDropColumns && column.disableDnD !== true,
|
|
119
|
+
filterable: hasFilter,
|
|
120
|
+
sortable: column.canSort ?? false,
|
|
121
|
+
resizable: shouldShowResize
|
|
122
|
+
});
|
|
123
|
+
const headTh = /* @__PURE__ */ jsxs(
|
|
131
124
|
StyledHeadTh,
|
|
132
125
|
{
|
|
133
126
|
column,
|
|
@@ -151,15 +144,11 @@ const HeaderCell = (props) => {
|
|
|
151
144
|
rightIcons,
|
|
152
145
|
shouldShowResize && /* @__PURE__ */ jsx(HeaderResizer, { column, innerRef: resizeHandlerRef, isReachable: reduxHeader?.withTabStops ?? false })
|
|
153
146
|
] }),
|
|
154
|
-
/* @__PURE__ */ jsx("span", { id: screenReaderInstructionsId, style:
|
|
155
|
-
colSpan,
|
|
156
|
-
draggable: dragAndDropColumns && column.disableDnD !== true,
|
|
157
|
-
filterable: hasFilter,
|
|
158
|
-
sortable: column.canSort ?? false
|
|
159
|
-
}) })
|
|
147
|
+
/* @__PURE__ */ jsx("span", { id: screenReaderInstructionsId, style: HIDDEN_STYLE, children: instructions })
|
|
160
148
|
]
|
|
161
149
|
}
|
|
162
150
|
);
|
|
151
|
+
return headTh;
|
|
163
152
|
};
|
|
164
153
|
export {
|
|
165
154
|
HeaderCell
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderCell.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC8EjB,SACE,KADF;AA3EN,SAAgB,aAAa,YAAY,SAAS,cAAc;AAChE,SAAS,YAAY;AACrB,SAAS,cAAc,+BAA+B,yBAAyB;AAC/E,SAAS,mBAAmB;AAC5B,SAAS,kBAAkB;AAC3B,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAC9B,SAAS,qBAAqB;AAE9B,SAAS,6BAA6B;AACtC,SAAS,2BAA2B;AACpC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,qCAAqC;AAC9C,SAAS,kBAAkB,qBAAqB;AAShD,MAAM,eAAoC,EAAE,SAAS,OAAO;AAErD,MAAM,aAAuD,CAAC,UAAU;AAC7E,QAAM,EAAE,QAAQ,eAAe,QAAQ,IAAI;AAC3C,QAAM,eAAe,cAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,qBAAqB,cAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,kBAAkB,cAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,UAAU,cAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,WAAW,cAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,mBAAmB,cAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,aAAa,cAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,4BAA4B,cAAc,CAAC,UAAU,MAAM,yBAAyB;AAC1F,QAAM,iBAAiB,cAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,gCAAgC,cAAc,CAAC,UAAU,MAAM,6BAA6B;AAClG,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,yBAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU,OAAO;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,6BAA6B;AAAA,EAC3C;AACA,QAAM,YAAY,OAA8B,IAAI;AAEpD,QAAM,eAAe,iBAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,cAAc,QAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AACjF,QAAM,gBAAgB,OAA8B,IAAI;AACxD,QAAM,gBAAgB,OAAiC,IAAI;AAC3D,QAAM,mBAAmB,OAA8B,IAAI;AAC3D,QAAM,UAAU,OAAiC,IAAI;AACrD,QAAM,EAAE,eAAe,IAAI,WAAW,mBAAmB;AAEzD,QAAM,EAAE,WAAW,QAAQ,iBAAiB,eAAe,eAAe,OAAO,YAAY,iBAAiB,IAC5G,oBAAoB,KAAK;AAE3B,QAAM,EAAE,YAAY,GAAG,SAAS,IAAI,sBAAsB;AAAA,IACxD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EACnB,CAAC;AAED,QAAM,aAAa,QAAQ,MAAM;AAC/B,QAAI,CAAC,cAAe,QAAO;AAC3B,WACE,qBAAC,iCAA8B,eAA8B,wBAC3D;AAAA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,iBAAiB,CAAC,gBAAgB,UAAU,UAAU;AAAA,UACtD;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU;AAAA;AAAA,MACZ;AAAA,MACC,mBACC;AAAA,QAAC;AAAA;AAAA,UACC,cAAc,OAAO;AAAA,UACrB,SAAS,CAAC,MAAM;AACd,cAAE,gBAAgB;AAClB,uBAAW,CAAqB;AAAA,UAClC;AAAA,UACA,aAAa,aAAa,gBAAgB;AAAA,UAC1C;AAAA,UACA;AAAA,UACA,UAAU;AAAA;AAAA,MACZ;AAAA,OAEJ;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAED,QAAM,qBAAqB;AAAA,IACzB,MACE,oBAAC,QAAK,IAAG,OAAM,QAAO,eAAc,IAAG,OAAM,IAAG,OAAM,YAAW,cAAa,OAAO,EAAE,UAAU,WAAW,GAC1G,8BAAC,qBAAkB,WAAW,YAC5B;AAAA,MAAC;AAAA;AAAA,QAEC,UAAU;AAAA,QACV,aAAa,aAAa,gBAAgB;AAAA,QAC1C,IAAI,qBAAqB,OAAO,EAAE,IAAI,UAAU;AAAA,QAChD;AAAA,QACA,YAAY,aAAa,OAAO,EAAE;AAAA;AAAA,MAL7B,OAAO;AAAA,IAMd,GACF,GACF;AAAA,IAEF,CAAC,OAAO,IAAI,cAAc,YAAY,eAAe,YAAY,aAAa,YAAY;AAAA,EAC5F;AAEA,QAAM,6BAA6B,MAAM,OAAO,EAAE,iBAAiB,UAAU,GAAG,QAAQ,MAAM,EAAE;AAChG,QAAM,eAAe,8BAA8B;AAAA,IACjD;AAAA,IACA,WAAW,sBAAsB,OAAO,eAAe;AAAA,IACvD,YAAY;AAAA,IACZ,UAAU,OAAO,WAAW;AAAA,IAC5B,WAAW;AAAA,EACb,CAAC;AAED,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,SAAS;AAAA,MACR,GAAG;AAAA,MACJ,MAAK;AAAA,MACJ,GAAI,kBAAkB,OAAO,OAAO,gCACjC,EAAE,cAAc,GAAG,gBAAgB,KAAK,4BAA4B,GAAG,yBAAyB,MAAM,EAAE,GAAG,IAC3G,CAAC;AAAA,MACL,oBAAkB;AAAA,MAClB,aAAW,kBAAmB,OAAO,eAAe,eAAe,cAAe;AAAA,MAClF,eAAa,YAAY;AAAA,MACzB,UAAU,OAAO,iBAAiB,QAAQ,KAAK;AAAA,MAC/C,kBAAkB,QAAQ,kBAAkB,eAAe,MAAM;AAAA,MACjE;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA,6BAAC,QAAK,OAAM,QAAO,MAAM,OACtB;AAAA,2BAAiB;AAAA,UAClB,oBAAC,mBAAgB,QAAgB,gBAAgC,UAAoB;AAAA,UACpF;AAAA,UACA,oBACC,oBAAC,iBAAc,QAAgB,UAAU,kBAAkB,aAAa,aAAa,gBAAgB,OAAO;AAAA,WAEhH;AAAA,QAIA,oBAAC,UAAK,IAAI,4BAA4B,OAAO,cAC1C,wBACH;AAAA;AAAA;AAAA,EACF;AAGF,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,16 +1,30 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { useEffect } from "react";
|
|
4
4
|
import { StyledResizer } from "../../styled.js";
|
|
5
5
|
import { useHeaderResizer } from "./useHeaderResizer.js";
|
|
6
6
|
import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
|
|
7
|
+
import { DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH, ResizerA11yMode } from "../../configs/constants.js";
|
|
7
8
|
const stopPropagation = (e) => e.stopPropagation();
|
|
9
|
+
const HIDDEN_STYLE = { display: "none" };
|
|
10
|
+
const RESIZE_INSTRUCTION = "Use the left and right arrow keys to increase or decrease the column width.";
|
|
11
|
+
const bracketBound = (configuredBound, columnWidth, pickWider) => pickWider(configuredBound, columnWidth ?? configuredBound);
|
|
8
12
|
const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
9
|
-
const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({
|
|
13
|
+
const { isResizing, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = useHeaderResizer({
|
|
10
14
|
columnId: column.id,
|
|
11
15
|
innerRef
|
|
12
16
|
});
|
|
13
17
|
const getOwnerProps = usePropsStore((store) => store.get);
|
|
18
|
+
const resizerA11yMode = usePropsStore((state) => state.resizerA11yMode);
|
|
19
|
+
const resizeLabel = typeof column.Header === "string" ? `Resize ${column.Header} column` : "Resize column";
|
|
20
|
+
const nameId = `resize-name-${column.id}`.replace(/ /g, "");
|
|
21
|
+
const instructionId = `resize-instr-${column.id}`.replace(/ /g, "");
|
|
22
|
+
const isSlider = resizerA11yMode === ResizerA11yMode.Slider;
|
|
23
|
+
const role = isSlider ? "slider" : "separator";
|
|
24
|
+
const orientation = isSlider ? "horizontal" : "vertical";
|
|
25
|
+
const valueMin = bracketBound(column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);
|
|
26
|
+
const valueMax = bracketBound(column.maxWidth ?? DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);
|
|
27
|
+
const valueText = columnWidth === void 0 ? void 0 : `${columnWidth} pixels`;
|
|
14
28
|
useEffect(() => {
|
|
15
29
|
const addEvents = () => {
|
|
16
30
|
document.addEventListener("mousemove", onResizeHandler);
|
|
@@ -28,21 +42,31 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
28
42
|
else removeEvents();
|
|
29
43
|
return removeEvents;
|
|
30
44
|
}, [isResizing, onResizeHandler, onResizeEnd]);
|
|
31
|
-
return /* @__PURE__ */
|
|
45
|
+
return /* @__PURE__ */ jsxs(
|
|
32
46
|
StyledResizer,
|
|
33
47
|
{
|
|
34
|
-
|
|
35
|
-
"aria-
|
|
48
|
+
role,
|
|
49
|
+
"aria-orientation": orientation,
|
|
50
|
+
"aria-valuenow": columnWidth,
|
|
51
|
+
"aria-valuemin": valueMin,
|
|
52
|
+
"aria-valuemax": valueMax,
|
|
53
|
+
"aria-valuetext": valueText,
|
|
54
|
+
"aria-labelledby": nameId,
|
|
55
|
+
"aria-describedby": instructionId,
|
|
56
|
+
"aria-hidden": isReachable ? void 0 : true,
|
|
36
57
|
tabIndex: isReachable ? 0 : -1,
|
|
37
58
|
innerRef,
|
|
38
|
-
draggable: false,
|
|
39
59
|
onMouseDown: onResizeStart,
|
|
40
60
|
onTouchStart: onResizeStart,
|
|
41
61
|
onMouseUp: onResizeEnd,
|
|
42
62
|
onTouchEnd: onResizeEnd,
|
|
43
63
|
onClick: stopPropagation,
|
|
44
64
|
onKeyDown: handleKeyboardResize,
|
|
45
|
-
getOwnerProps
|
|
65
|
+
getOwnerProps,
|
|
66
|
+
children: [
|
|
67
|
+
/* @__PURE__ */ jsx("span", { id: nameId, style: HIDDEN_STYLE, children: resizeLabel }),
|
|
68
|
+
/* @__PURE__ */ jsx("span", { id: instructionId, style: HIDDEN_STYLE, children: RESIZE_INSTRUCTION })
|
|
69
|
+
]
|
|
46
70
|
}
|
|
47
71
|
);
|
|
48
72
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/HeaderResizer.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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,YAAY,WAAW;
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;AC+EnB,SA0CE,KA1CF;AA/EJ,SAAgB,iBAAiB;AACjC,SAAS,qBAAqB;AAE9B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,0BAA0B,uBAAuB;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,IACjG,iBAAiB;AAAA,IACf,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACH,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,kBAAkB,cAAc,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,gBAAgB;AACrD,QAAM,OAAO,WAAW,WAAW;AAKnC,QAAM,cAAc,WAAW,eAAe;AAC9C,QAAM,WAAW,aAAa,OAAO,YAAY,0BAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,WAAW,aAAa,OAAO,YAAY,0BAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,YAAY,gBAAgB,SAAY,SAAY,GAAG,WAAW;AAIxE,YAAU,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,4BAAC,UAAK,IAAI,QAAQ,OAAO,cACtB,uBACH;AAAA,QACA,oBAAC,UAAK,IAAI,eAAe,OAAO,cAC7B,8BACH;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
const joinAffordances = (items) => {
|
|
3
|
+
if (items.length <= 1) return items[0] ?? "";
|
|
4
|
+
if (items.length === 2) return `${items[0]} and ${items[1]}`;
|
|
5
|
+
return `${items.slice(0, -1).join(", ")} and ${items[items.length - 1]}`;
|
|
6
|
+
};
|
|
7
|
+
const SORT_INSTRUCTION = "You can sort the data ascendingly or descendingly by this column. Use the up / down arrow keys to do so.";
|
|
8
|
+
const buildScreenReaderInstructions = ({
|
|
9
|
+
colSpan,
|
|
10
|
+
draggable,
|
|
11
|
+
filterable,
|
|
12
|
+
sortable,
|
|
13
|
+
resizable
|
|
14
|
+
}) => {
|
|
15
|
+
const prefix = colSpan === 1 ? "" : "Column Group. ";
|
|
16
|
+
const sentences = [];
|
|
17
|
+
const enterAffordances = [];
|
|
18
|
+
if (draggable) enterAffordances.push("draggable");
|
|
19
|
+
if (filterable) enterAffordances.push("filterable");
|
|
20
|
+
if (resizable) enterAffordances.push("resizable");
|
|
21
|
+
if (enterAffordances.length > 0) {
|
|
22
|
+
const interaction = enterAffordances.length > 1 ? "these interactions" : "this interaction";
|
|
23
|
+
sentences.push(
|
|
24
|
+
`This column is ${joinAffordances(enterAffordances)}. To enable ${interaction} press the enter key.`
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
if (sortable) sentences.push(SORT_INSTRUCTION);
|
|
28
|
+
return `${prefix}${sentences.join(" ")}`;
|
|
29
|
+
};
|
|
30
|
+
export {
|
|
31
|
+
buildScreenReaderInstructions
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=buildScreenReaderInstructions.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/buildScreenReaderInstructions.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/**\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"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACMvB,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": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderCellHandlers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* 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": ["import * as React from 'react';\nexport { React };\n", "/* 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"],
|
|
5
5
|
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,13 +2,14 @@ import * as React from "react";
|
|
|
2
2
|
import { cloneDeep } from "lodash-es";
|
|
3
3
|
import React2, { useCallback, useMemo, useState } from "react";
|
|
4
4
|
import { usePropsStore } from "../../configs/useStore/createInternalAndPropsContext.js";
|
|
5
|
+
import { ColsLayoutStyle, DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from "../../configs/constants.js";
|
|
5
6
|
import {
|
|
6
7
|
changeGridLayout,
|
|
7
8
|
getGridLayout,
|
|
8
9
|
removeGridLayout,
|
|
9
10
|
setSubColumnsGridLayout
|
|
10
11
|
} from "../../helpers/gridLayoutHelpers.js";
|
|
11
|
-
const narrow = (value, min, max) => Math.min(Math.max(value, min ??
|
|
12
|
+
const narrow = (value, min, max) => Math.min(Math.max(value, min ?? DEFAULT_MIN_COLUMN_WIDTH), max ?? DEFAULT_MAX_COLUMN_WIDTH);
|
|
12
13
|
const getCorrectDelta = (e) => {
|
|
13
14
|
let multiplier = 1;
|
|
14
15
|
if (e.shiftKey) multiplier *= 5;
|
|
@@ -29,6 +30,7 @@ const useHeaderResizer = ({
|
|
|
29
30
|
const onColumnResize = usePropsStore((state) => state.onColumnResize);
|
|
30
31
|
const onColumnSizeChange = usePropsStore((state) => state.onColumnSizeChange);
|
|
31
32
|
const virtualListRef = usePropsStore((state) => state.virtualListRef);
|
|
33
|
+
const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);
|
|
32
34
|
const [isResizing, setIsResizing] = useState(false);
|
|
33
35
|
const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);
|
|
34
36
|
const visibleColumnsOnGridLayout = useMemo(
|
|
@@ -46,6 +48,9 @@ const useHeaderResizer = ({
|
|
|
46
48
|
);
|
|
47
49
|
const realColumnIndexRef = React2.useRef(realColumnIndex);
|
|
48
50
|
realColumnIndexRef.current = realColumnIndex;
|
|
51
|
+
const [columnWidth, setColumnWidth] = useState(
|
|
52
|
+
visibleColumnsOnGridLayout[realColumnIndex]?.width ?? (colsLayoutStyle === ColsLayoutStyle.Auto ? void 0 : 150)
|
|
53
|
+
);
|
|
49
54
|
const pushColumnSizeChange = useCallback(
|
|
50
55
|
(nextWidth) => {
|
|
51
56
|
if (nextWidth === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;
|
|
@@ -75,6 +80,7 @@ const useHeaderResizer = ({
|
|
|
75
80
|
);
|
|
76
81
|
changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
|
|
77
82
|
setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);
|
|
83
|
+
setColumnWidth(widthWithDelta);
|
|
78
84
|
e.preventDefault();
|
|
79
85
|
e.stopPropagation();
|
|
80
86
|
},
|
|
@@ -99,6 +105,7 @@ const useHeaderResizer = ({
|
|
|
99
105
|
);
|
|
100
106
|
changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
|
|
101
107
|
setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);
|
|
108
|
+
setColumnWidth(widthWithDelta);
|
|
102
109
|
pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current] + delta);
|
|
103
110
|
removeGridLayout(virtualListRef.current);
|
|
104
111
|
},
|
|
@@ -106,6 +113,7 @@ const useHeaderResizer = ({
|
|
|
106
113
|
);
|
|
107
114
|
return {
|
|
108
115
|
isResizing,
|
|
116
|
+
columnWidth,
|
|
109
117
|
onResizeStart,
|
|
110
118
|
onResizeEnd,
|
|
111
119
|
onResizeHandler,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/Headers/useHeaderResizer.ts"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { cloneDeep } from 'lodash-es';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport {\n changeGridLayout,\n getGridLayout,\n removeGridLayout,\n setSubColumnsGridLayout,\n} from '../../helpers/gridLayoutHelpers.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n Math.min(Math.max(value, min ??
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,OAAOA,UAAS,aAAa,SAAS,gBAAgB;AACtD,SAAS,qBAAqB;AAC9B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAMP,MAAM,SAAS,CAAC,OAAe,KAAyB,QACtD,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { cloneDeep } from 'lodash-es';\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { ColsLayoutStyle, DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '../../configs/constants.js';\nimport {\n changeGridLayout,\n getGridLayout,\n removeGridLayout,\n setSubColumnsGridLayout,\n} from '../../helpers/gridLayoutHelpers.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\n\n// if number > max => max\n// if number < min => min\n// else => number\nconst narrow = (value: number, min: number | undefined, max: number | undefined): number =>\n Math.min(Math.max(value, min ?? DEFAULT_MIN_COLUMN_WIDTH), max ?? DEFAULT_MAX_COLUMN_WIDTH);\n\n// Returns the delta of the keyboard event\nconst getCorrectDelta = (e: React.KeyboardEvent) => {\n let multiplier = 1;\n\n if (e.shiftKey) multiplier *= 5;\n if (e.altKey) multiplier *= 10;\n\n if (e.code === 'ArrowLeft') {\n return -multiplier;\n }\n if (e.code === 'ArrowRight') {\n return multiplier;\n }\n return 0;\n};\n\nexport const useHeaderResizer = ({\n columnId,\n innerRef,\n}: {\n columnId: string;\n innerRef: React.MutableRefObject<HTMLDivElement | null>;\n}) => {\n const visibleColumns = usePropsStore((state) => state.visibleColumns);\n const onColumnResize = usePropsStore((state) => state.onColumnResize);\n const onColumnSizeChange = usePropsStore((state) => state.onColumnSizeChange);\n const virtualListRef = usePropsStore((state) => state.virtualListRef);\n const colsLayoutStyle = usePropsStore((state) => state.colsLayoutStyle);\n\n const [isResizing, setIsResizing] = useState(false);\n\n const visibleColumnsCopy = useMemo(() => cloneDeep(visibleColumns), [visibleColumns]);\n\n const visibleColumnsOnGridLayout = useMemo(\n () =>\n visibleColumnsCopy.reduce((acc, cur) => {\n if (cur.columns) {\n return acc.concat(cur.columns);\n }\n return acc.concat(cur);\n }, [] as DSDataTableT.InternalColumn[]),\n [visibleColumnsCopy],\n );\n\n const realColumnIndex = useMemo(\n () => visibleColumnsOnGridLayout.findIndex((col) => col.id === columnId),\n [columnId, visibleColumnsOnGridLayout],\n );\n\n const realColumnIndexRef = React.useRef(realColumnIndex);\n realColumnIndexRef.current = realColumnIndex;\n\n // PUI-17784: real width in pixels, fed to aria-valuenow/valuetext. Initialized synchronously from\n // props \u2014 no effect needed. Mirrors columnsToGridImpl's own default (helpers/columnsToGrid.tsx,\n // keep both in sync if that default ever changes): an explicit column.width wins; otherwise Fixed\n // layout resolves to a known 150px; Auto layout with no explicit width has no synchronous numeric\n // value (it's a flexible '1fr' the browser resolves at layout time) \u2014 aria-valuenow is legitimately\n // absent until the user's first resize populates it via the handlers below, which already call\n // setColumnWidth on every mouse/keyboard resize using the real applied width.\n const [columnWidth, setColumnWidth] = useState<number | undefined>(\n visibleColumnsOnGridLayout[realColumnIndex]?.width ?? (colsLayoutStyle === ColsLayoutStyle.Auto ? undefined : 150),\n );\n\n // Notifies the user of the change in the column size\n const pushColumnSizeChange = useCallback(\n (nextWidth: number) => {\n // PUI-12695: Avoid unnecessary calls to onColumnResize\n // Avoid calling onColumnResize if the width of the column has not changed\n // unnecessary calls to onColumnResize can cause performance issues (next resizes were not working)\n if (nextWidth === visibleColumnsOnGridLayout[realColumnIndexRef.current].width) return;\n onColumnResize?.(columnId, nextWidth);\n // this next line is updating also the visibleColumnsCopy via mutable changes\n // the mutable changes here works because what we mutate is a cloneDeep of the columns\n visibleColumnsOnGridLayout[realColumnIndexRef.current].width = nextWidth;\n onColumnSizeChange(visibleColumnsCopy, columnId, nextWidth);\n },\n [columnId, onColumnResize, onColumnSizeChange, realColumnIndexRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n );\n\n const onResizeStart = useCallback(() => {\n setIsResizing(true);\n }, []);\n\n const onResizeEnd = useCallback(() => {\n setIsResizing(false);\n pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current]);\n removeGridLayout(virtualListRef.current);\n }, [pushColumnSizeChange, virtualListRef, realColumnIndexRef]);\n\n // Mouse resize\n const onResizeHandler = useCallback(\n (e: MouseEvent | TouchEvent) => {\n if (realColumnIndexRef.current === -1) return;\n\n const delta =\n ('clientX' in e ? e.clientX : e.touches[0].clientX) - (innerRef.current?.getBoundingClientRect().x ?? 0); // delta in pixels\n\n const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndexRef.current];\n\n const widthWithDelta = narrow(\n originalWidth + delta,\n visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,\n visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth,\n );\n\n changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);\n setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n setColumnWidth(widthWithDelta);\n\n // We will notify the user of the change in the column size only when the user releases the mouse button\n\n // To prevent text selection\n e.preventDefault();\n e.stopPropagation();\n },\n [innerRef, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n );\n\n // Keyboard resize\n const handleKeyboardResize = useCallback(\n (e: React.KeyboardEvent) => {\n if (realColumnIndexRef.current === -1) return;\n\n if (e.key === 'Enter') {\n e.stopPropagation();\n }\n\n if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') {\n e.preventDefault();\n }\n\n const delta = getCorrectDelta(e);\n\n if (delta === 0) return;\n\n const originalWidth = getGridLayout(virtualListRef.current)[realColumnIndexRef.current];\n\n const widthWithDelta = narrow(\n originalWidth + delta,\n visibleColumnsOnGridLayout[realColumnIndexRef.current].minWidth,\n visibleColumnsOnGridLayout[realColumnIndexRef.current].maxWidth,\n );\n\n changeGridLayout(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);\n setSubColumnsGridLayout(virtualListRef.current, visibleColumnsCopy);\n setColumnWidth(widthWithDelta);\n\n pushColumnSizeChange(getGridLayout(virtualListRef.current)[realColumnIndexRef.current] + delta);\n removeGridLayout(virtualListRef.current);\n },\n [pushColumnSizeChange, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout],\n );\n\n return {\n isResizing,\n columnWidth,\n onResizeStart,\n onResizeEnd,\n onResizeHandler,\n handleKeyboardResize,\n };\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
getPropsPerSlotPropTypes
|
|
6
6
|
} from "@elliemae/ds-props-helpers";
|
|
7
7
|
import { FILTER_TYPES } from "./exported-related/index.js";
|
|
8
|
-
import { ColsLayoutStyle } from "./configs/constants.js";
|
|
8
|
+
import { ColsLayoutStyle, ResizerA11yMode } from "./configs/constants.js";
|
|
9
9
|
import { DSDataTableName, DSDataTableSlots } from "./constants/index.js";
|
|
10
10
|
const defaultProps = () => ({
|
|
11
11
|
height: "100%",
|
|
@@ -24,6 +24,7 @@ const defaultProps = () => ({
|
|
|
24
24
|
onColumnResize: () => null,
|
|
25
25
|
onColumnSortChange: () => null,
|
|
26
26
|
colsLayoutStyle: ColsLayoutStyle.Fixed,
|
|
27
|
+
resizerA11yMode: ResizerA11yMode.Separator,
|
|
27
28
|
hiddenColumns: [],
|
|
28
29
|
noResultsMessage: "No Results Found",
|
|
29
30
|
dragAndDropRows: false,
|
|
@@ -66,8 +67,12 @@ const DSDataTablePropTypes = {
|
|
|
66
67
|
disableDnD: PropTypes.bool.description("Whereas this column should be draggable"),
|
|
67
68
|
canResize: PropTypes.bool.description("Whereas this column should be resizable"),
|
|
68
69
|
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description("Width of this column"),
|
|
69
|
-
minWidth: PropTypes.number.description(
|
|
70
|
-
|
|
70
|
+
minWidth: PropTypes.number.description(
|
|
71
|
+
"Minimum width of this column, useful when resizing. Defaults to 70px (PUI-17784) \u2014 sized to avoid the header icon affordances overlapping."
|
|
72
|
+
),
|
|
73
|
+
maxWidth: PropTypes.number.description(
|
|
74
|
+
"Maximum width of this column, useful when resizing. Defaults to 600px (PUI-17784) \u2014 previously unbounded."
|
|
75
|
+
),
|
|
71
76
|
canSort: PropTypes.bool.description("Whereas this column is sortable"),
|
|
72
77
|
disableFirstOptionFocusOnFilter: PropTypes.bool.description(
|
|
73
78
|
"Whereas the first option should not be focused on filter"
|
|
@@ -87,7 +92,10 @@ const DSDataTablePropTypes = {
|
|
|
87
92
|
alwaysDisplayEditIcon: PropTypes.bool.description(
|
|
88
93
|
"Whereas to always show the edit icon on this column if it is editable"
|
|
89
94
|
),
|
|
90
|
-
textWrap: PropTypes.oneOf(["wrap", "wrap-all", "truncate"]).description("How to wrap the text in the column")
|
|
95
|
+
textWrap: PropTypes.oneOf(["wrap", "wrap-all", "truncate"]).description("How to wrap the text in the column"),
|
|
96
|
+
pillLabel: PropTypes.string.description(
|
|
97
|
+
"Overrides the filter pill label text for this column when non-empty; defaults to the column Header"
|
|
98
|
+
)
|
|
91
99
|
})
|
|
92
100
|
).description("Array of columns").isRequired,
|
|
93
101
|
data: PropTypes.arrayOf(
|
|
@@ -191,6 +199,9 @@ const DSDataTablePropTypes = {
|
|
|
191
199
|
]).description("Object containing the data for the pagination"),
|
|
192
200
|
Pagination: PropTypes.func.description("Custom component to show in place of the pagination"),
|
|
193
201
|
colsLayoutStyle: PropTypes.oneOf(["auto", "fixed"]).description("Whether the datatable fills its container or not"),
|
|
202
|
+
resizerA11yMode: PropTypes.oneOf(["separator", "slider"]).description(
|
|
203
|
+
'EXPERIMENTAL \u2014 accessible role exposed by the column resize control (PUI-17784), for a11y SME evaluation. Defaults to "separator".'
|
|
204
|
+
),
|
|
194
205
|
hiddenColumns: PropTypes.arrayOf(PropTypes.string).description("IDs of columns not to render"),
|
|
195
206
|
dragAndDropRows: PropTypes.bool.description("Whether to turn on the d&d feature for the rows").defaultValue(false),
|
|
196
207
|
onRowsReorder: PropTypes.func.description("Function invoked when a row is reordered"),
|