@elliemae/ds-data-table 3.70.0-next.44 → 3.70.0-next.46
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/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderResizer.js +37 -35
- package/dist/cjs/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map +1 -1
- package/dist/cjs/parts/Headers/useHeaderResizer.js +10 -2
- package/dist/cjs/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/cjs/react-desc-prop-types.js +10 -2
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/cjs/styled.js +1 -2
- 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/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderResizer.js +38 -36
- package/dist/esm/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map +1 -1
- package/dist/esm/parts/Headers/useHeaderResizer.js +10 -2
- package/dist/esm/parts/Headers/useHeaderResizer.js.map +2 -2
- package/dist/esm/react-desc-prop-types.js +11 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/esm/styled.js +1 -2
- 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/useHeaderCellHandlers.d.ts +1 -1
- package/dist/types/parts/Headers/useHeaderResizer.d.ts +2 -1
- package/dist/types/react-desc-prop-types.d.ts +3 -1
- package/dist/types/styled.d.ts +1 -1
- package/package.json +30 -30
- package/skills/ds-data-table-slots/SKILL.md +5 -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 = 30;
|
|
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// Shared resize-clamp bounds \u2014 single source of truth for both the mouse/keyboard resize clamp\n// (useHeaderResizer.ts) and the resizer's aria-valuemin/aria-valuemax so they never drift.\n// PUI-17784 briefly raised DEFAULT_MIN_COLUMN_WIDTH to a measured worst-case icon-cluster width (70px),\n// but that only protects against overlap for columns that happen to match the worst-case icon\n// combination the constant was measured against \u2014 any column with a longer header title, or with a\n// narrower icon-cluster paired with a wide title, could still overlap. PUI-12696 reverts to the\n// historical 30px floor and moves the real protection to the consumer: `minWidth` is a controlled-IoC\n// prop (see .github/memories/project_philosophy.md), so Dimsum does not try to infer a safe default\n// from a column's content \u2014 the app that knows its own header text and enabled affordances is\n// responsible for passing a `minWidth` that actually fits them. See KNOWN_INTENTIONAL_DEVIATIONS.md #3.\nexport const DEFAULT_MIN_COLUMN_WIDTH = 30;\nexport const DEFAULT_MAX_COLUMN_WIDTH = 600;\n\nexport const DATA_TESTID = {\n DATA_TABLE_WRAPPER: 'data-table-wrapper',\n DATA_TABLE_GLOBAL_EXPAND_CELL: 'data-table-global-expand-cell',\n DATA_TABLE_ICON_ARROW_DOWN: 'ic-arrow-head-down',\n DATA_TABLE_ICON_ARROW_RIGHT: 'ic-arrow-head-right',\n DATA_TABLE_ICON_ARROW_MIXED: 'ic-arrow-head-mixed',\n DATA_TABLE_ICON_CHILD: 'ic-arrow-child',\n DATA_TABLE_GLOBAL_CHECKBOX: 'data-table-global-checkbox',\n DATA_TABLE_CHECKBOX: 'data-table-checkbox',\n DATA_TABLE_RADIO: 'data-table-radio',\n DATA_TABLE_DATE_RANGE_CONTROLLER: 'data-table-date-range',\n DATA_TABLE_DATE_RANGE_CONTROLLER_CHECKBOX_SWITCHER: 'data-table-date-range-checkbox-switcher-container',\n DATA_TABLE_SINGLE_DATE_CONTROLLER: 'data-table-single-date',\n DATA_TABLE_NUMBER_RANGE_CONTROLLER: 'data-table-number-range',\n DATA_TABLE_CURRENCY_RANGE_CONTROLLER: 'data-table-currency-range',\n DATA_TABLE_SELECT_MENU_ITEM: 'data-table-filter-menu-list-item',\n DATA_TABLE_MULTISELECT_CONTROLLER: 'data-table-multi-select',\n DATA_TABLE_SINGLESELECT_CONTROLLER: 'data-table-single-select',\n DATA_TABLE_FILTER_BUTTON: 'data-table-filter-menu-button',\n DATA_TABLE_FILTER_BUTTON_ELEMENT: 'ds-button', // TODO 'data-table-filter-menu-button-element',\n DATA_TABLE_FILTER_MENU_CONTENT: 'data-table-filter-menu-content',\n DATA_TABLE_FILTER_FREE_TEXT_SEARCH: 'data-table-filter-free-text-search',\n DATA_TABLE_ROW_CONTENT: 'data-table-row-content',\n DATA_TABLE_ROW: 'data-table-row',\n DATA_TABLE_TOOLBAR_TRIGGER: 'data-table-toolbar-trigger',\n DATA_TABLE_CELL: 'data-table-cell',\n DATA_TABLE_DRAG_HANDLE: 'data-table-drag-handle',\n DATA_TABLE_CONTENT_WRAPPER: 'data-table-content-wrapper',\n DATA_TABLE_TABLE: 'data-table-table',\n DATA_TABLE_SCROLLABLE_CONTAINER: 'data-table-scrollable-container',\n DATA_TABLE_HEADER: 'data-table-header',\n DATA_TABLE_ROW_HEADER_CONTENT: 'data-table-row-header-content',\n DATA_TABLE_ROW_GROUP_HEADER: 'data-table-row-group-header',\n DATA_TABLE_COLUMN_DRAG_OVERLAY: 'data-table-drag-column-drag-overlay',\n DATA_TABLE_HEADER_CELL_TITLE: 'header-cell-title',\n DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: 'filter-bar-ddmenu-button',\n DATA_TABLE_SORT_BUTTON: 'data-table-sort-button',\n} as const;\n\nexport const EMPTY_FILTER = 'ds-empty-filter';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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;AAYO,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AAEjC,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,oDAAoD;AAAA,EACpD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,kCAAkC;AAAA;AAAA,EAClC,gCAAgC;AAAA,EAChC,oCAAoC;AAAA,EACpC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AAAA,EACtC,wBAAwB;AAC1B;AAEO,MAAM,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -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 { 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<
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD8EjB;AA3EN,mBAAgE;AAChE,qBAAqB;AACrB,oBAA+E;AAC/E,yBAA4B;AAC5B,uBAA2B;AAC3B,iCAAoC;AACpC,qBAA8B;AAC9B,2BAA8B;AAE9B,mCAAsC;AACtC,iCAAoC;AACpC,uBAA4B;AAC5B,6BAAgC;AAChC,2CAA8C;AAC9C,2CAAgD;AAShD,MAAM,eAAoC,EAAE,SAAS,OAAO;AAErD,MAAM,aAAuD,CAAC,UAAU;AAC7E,QAAM,EAAE,QAAQ,eAAe,QAAQ,IAAI;AAC3C,QAAM,mBAAe,oDAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,yBAAqB,oDAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,sBAAkB,oDAAc,CAAC,UAAU,MAAM,eAAe;AACtE,QAAM,cAAU,oDAAc,CAAC,UAAU,MAAM,OAAO;AACtD,QAAM,eAAW,oDAAc,CAAC,UAAU,MAAM,QAAQ;AACxD,QAAM,uBAAmB,oDAAc,CAAC,UAAU,MAAM,gBAAgB;AACxE,QAAM,iBAAa,oDAAc,CAAC,UAAU,MAAM,UAAU;AAC5D,QAAM,gCAA4B,oDAAc,CAAC,UAAU,MAAM,yBAAyB;AAC1F,QAAM,qBAAiB,oDAAc,CAAC,UAAU,MAAM,cAAc;AACpE,QAAM,oCAAgC,oDAAc,CAAC,UAAU,MAAM,6BAA6B;AAClG,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AACxD,QAAM,6BAAyB;AAAA,IAC7B,OAAO;AAAA,MACL,UAAU,OAAO;AAAA,MACjB;AAAA,IACF;AAAA,IACA,CAAC,OAAO,IAAI,6BAA6B;AAAA,EAC3C;AACA,QAAM,gBAAY,qBAA8B,IAAI;AAEpD,QAAM,mBAAe,uDAAiB,CAAC,UAAU,MAAM,YAAY;AACnE,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AACjF,QAAM,oBAAgB,qBAA8B,IAAI;AACxD,QAAM,oBAAgB,qBAAiC,IAAI;AAC3D,QAAM,uBAAmB,
|
|
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,27 +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();
|
|
41
42
|
const HIDDEN_STYLE = { display: "none" };
|
|
42
|
-
const SR_ONLY_STYLE = {
|
|
43
|
-
position: "absolute",
|
|
44
|
-
width: 1,
|
|
45
|
-
height: 1,
|
|
46
|
-
overflow: "hidden",
|
|
47
|
-
clip: "rect(0 0 0 0)",
|
|
48
|
-
clipPath: "inset(50%)",
|
|
49
|
-
whiteSpace: "nowrap"
|
|
50
|
-
};
|
|
51
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);
|
|
52
45
|
const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
53
|
-
const { isResizing, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = (0, import_useHeaderResizer.useHeaderResizer)({
|
|
46
|
+
const { isResizing, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } = (0, import_useHeaderResizer.useHeaderResizer)({
|
|
54
47
|
columnId: column.id,
|
|
55
48
|
innerRef
|
|
56
49
|
});
|
|
57
50
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
51
|
+
const resizerA11yMode = (0, import_createInternalAndPropsContext.usePropsStore)((state) => state.resizerA11yMode);
|
|
58
52
|
const resizeLabel = typeof column.Header === "string" ? `Resize ${column.Header} column` : "Resize column";
|
|
59
53
|
const nameId = `resize-name-${column.id}`.replace(/ /g, "");
|
|
60
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`;
|
|
61
61
|
(0, import_react.useEffect)(() => {
|
|
62
62
|
const addEvents = () => {
|
|
63
63
|
document.addEventListener("mousemove", onResizeHandler);
|
|
@@ -75,30 +75,32 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
75
75
|
else removeEvents();
|
|
76
76
|
return removeEvents;
|
|
77
77
|
}, [isResizing, onResizeHandler, onResizeEnd]);
|
|
78
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
78
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
79
|
+
import_styled.StyledResizer,
|
|
80
|
+
{
|
|
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,
|
|
90
|
+
tabIndex: isReachable ? 0 : -1,
|
|
91
|
+
innerRef,
|
|
92
|
+
onMouseDown: onResizeStart,
|
|
93
|
+
onTouchStart: onResizeStart,
|
|
94
|
+
onMouseUp: onResizeEnd,
|
|
95
|
+
onTouchEnd: onResizeEnd,
|
|
96
|
+
onClick: stopPropagation,
|
|
97
|
+
onKeyDown: handleKeyboardResize,
|
|
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
|
+
]
|
|
103
|
+
}
|
|
104
|
+
);
|
|
103
105
|
};
|
|
104
106
|
//# sourceMappingURL=HeaderResizer.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/HeaderResizer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledResizer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderResizer } from './useHeaderResizer.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\n\nconst stopPropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\n/**
|
|
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
|
}
|
|
@@ -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,13 +133,15 @@ const useHeaderResizer = ({
|
|
|
127
133
|
);
|
|
128
134
|
(0, import_gridLayoutHelpers.changeGridLayout)(virtualListRef.current, realColumnIndexRef.current, widthWithDelta);
|
|
129
135
|
(0, import_gridLayoutHelpers.setSubColumnsGridLayout)(virtualListRef.current, visibleColumnsCopy);
|
|
130
|
-
|
|
136
|
+
setColumnWidth(widthWithDelta);
|
|
137
|
+
pushColumnSizeChange(widthWithDelta);
|
|
131
138
|
(0, import_gridLayoutHelpers.removeGridLayout)(virtualListRef.current);
|
|
132
139
|
},
|
|
133
140
|
[pushColumnSizeChange, virtualListRef, visibleColumnsCopy, visibleColumnsOnGridLayout]
|
|
134
141
|
);
|
|
135
142
|
return {
|
|
136
143
|
isResizing,
|
|
144
|
+
columnWidth,
|
|
137
145
|
onResizeStart,
|
|
138
146
|
onResizeEnd,
|
|
139
147
|
onResizeHandler,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/useHeaderResizer.ts", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["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;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA0B;AAC1B,mBAAsD;AACtD,2CAA8B;AAC9B,+BAKO;AAMP,MAAM,SAAS,CAAC,OAAe,KAAyB,QACtD,KAAK,IAAI,KAAK,IAAI,OAAO,OAAO,
|
|
4
|
+
"sourcesContent": ["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 /**\n * Commit the already-clamped width. getGridLayout() here would just re-read what\n * changeGridLayout() set above (widthWithDelta) \u2014 adding delta again double-counted it and\n * committed a width past minWidth/maxWidth (PUI-12696).\n */\n pushColumnSizeChange(widthWithDelta);\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", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -56,6 +56,7 @@ const defaultProps = () => ({
|
|
|
56
56
|
onColumnResize: () => null,
|
|
57
57
|
onColumnSortChange: () => null,
|
|
58
58
|
colsLayoutStyle: import_constants.ColsLayoutStyle.Fixed,
|
|
59
|
+
resizerA11yMode: import_constants.ResizerA11yMode.Separator,
|
|
59
60
|
hiddenColumns: [],
|
|
60
61
|
noResultsMessage: "No Results Found",
|
|
61
62
|
dragAndDropRows: false,
|
|
@@ -98,8 +99,12 @@ const DSDataTablePropTypes = {
|
|
|
98
99
|
disableDnD: import_ds_props_helpers.PropTypes.bool.description("Whereas this column should be draggable"),
|
|
99
100
|
canResize: import_ds_props_helpers.PropTypes.bool.description("Whereas this column should be resizable"),
|
|
100
101
|
width: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.number]).description("Width of this column"),
|
|
101
|
-
minWidth: import_ds_props_helpers.PropTypes.number.description(
|
|
102
|
-
|
|
102
|
+
minWidth: import_ds_props_helpers.PropTypes.number.description(
|
|
103
|
+
"Minimum width this column can be resized down to. Defaults to 30px, which is NOT guaranteed to fit the header title and icon affordances (drag handle / filter / sort) enabled on this column. When isResizeable is used, pass an explicit minWidth sized to the actual header content \u2014 otherwise the resize handle can overlap the header title."
|
|
104
|
+
),
|
|
105
|
+
maxWidth: import_ds_props_helpers.PropTypes.number.description(
|
|
106
|
+
"Maximum width this column can be resized up to, useful when resizing. Defaults to 600px."
|
|
107
|
+
),
|
|
103
108
|
canSort: import_ds_props_helpers.PropTypes.bool.description("Whereas this column is sortable"),
|
|
104
109
|
disableFirstOptionFocusOnFilter: import_ds_props_helpers.PropTypes.bool.description(
|
|
105
110
|
"Whereas the first option should not be focused on filter"
|
|
@@ -226,6 +231,9 @@ const DSDataTablePropTypes = {
|
|
|
226
231
|
]).description("Object containing the data for the pagination"),
|
|
227
232
|
Pagination: import_ds_props_helpers.PropTypes.func.description("Custom component to show in place of the pagination"),
|
|
228
233
|
colsLayoutStyle: import_ds_props_helpers.PropTypes.oneOf(["auto", "fixed"]).description("Whether the datatable fills its container or not"),
|
|
234
|
+
resizerA11yMode: import_ds_props_helpers.PropTypes.oneOf(["separator", "slider"]).description(
|
|
235
|
+
'EXPERIMENTAL \u2014 accessible role exposed by the column resize control (PUI-17784), for a11y SME evaluation. Defaults to "separator".'
|
|
236
|
+
),
|
|
229
237
|
hiddenColumns: import_ds_props_helpers.PropTypes.arrayOf(import_ds_props_helpers.PropTypes.string).description("IDs of columns not to render"),
|
|
230
238
|
dragAndDropRows: import_ds_props_helpers.PropTypes.bool.description("Whether to turn on the d&d feature for the rows").defaultValue(false),
|
|
231
239
|
onRowsReorder: import_ds_props_helpers.PropTypes.func.description("Function invoked when a row is reordered"),
|