@elliemae/ds-data-table 3.70.0-next.58 → 3.70.0-next.59
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.map +1 -1
- package/dist/cjs/parts/Headers/HeaderResizer.js +1 -3
- package/dist/cjs/parts/Headers/HeaderResizer.js.map +2 -2
- package/dist/esm/configs/constants.js.map +1 -1
- package/dist/esm/parts/Headers/HeaderResizer.js +1 -3
- package/dist/esm/parts/Headers/HeaderResizer.js.map +2 -2
- package/package.json +30 -30
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/configs/constants.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n Fixed: 'fixed',\n Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n\n// 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 #
|
|
4
|
+
"sourcesContent": ["export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n Fixed: 'fixed',\n Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n\n// Shared resize-clamp bounds \u2014 single source of truth for both the mouse/keyboard resize clamp\n// (useHeaderResizer.ts) and the resizer's aria-valuemin/aria-valuemax so they never drift.\n// PUI-17784 briefly raised DEFAULT_MIN_COLUMN_WIDTH to a measured worst-case icon-cluster width (70px),\n// but that only protects against overlap for columns that happen to match the worst-case icon\n// combination the constant was measured against \u2014 any column with a longer header title, or with a\n// narrower icon-cluster paired with a wide title, could still overlap. PUI-12696 reverts to the\n// historical 30px floor and moves the real protection to the consumer: `minWidth` is a controlled-IoC\n// prop (see .github/memories/project_philosophy.md), so Dimsum does not try to infer a safe default\n// from a column's content \u2014 the app that knows its own header text and enabled affordances is\n// responsible for passing a `minWidth` that actually fits them. See KNOWN_INTENTIONAL_DEVIATIONS.md #2.\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
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAhB,MAAM,eAAe;AACrB,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAYO,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AAEjC,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,oDAAoD;AAAA,EACpD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,kCAAkC;AAAA;AAAA,EAClC,gCAAgC;AAAA,EAChC,oCAAoC;AAAA,EACpC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AAAA,EACtC,wBAAwB;AAC1B;AAEO,MAAM,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -49,7 +49,6 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
49
49
|
});
|
|
50
50
|
const getOwnerProps = (0, import_createInternalAndPropsContext.usePropsStore)((store) => store.get);
|
|
51
51
|
const resizeLabel = typeof column.Header === "string" ? `Resize ${column.Header} column` : "Resize column";
|
|
52
|
-
const nameId = `resize-name-${column.id}`.replace(/ /g, "");
|
|
53
52
|
const instructionId = `resize-instr-${column.id}`.replace(/ /g, "");
|
|
54
53
|
const valueMin = bracketBound(column.minWidth ?? import_constants.DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);
|
|
55
54
|
const valueMax = bracketBound(column.maxWidth ?? import_constants.DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);
|
|
@@ -84,7 +83,7 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
84
83
|
"aria-valuemin": valueMin,
|
|
85
84
|
"aria-valuemax": valueMax,
|
|
86
85
|
"aria-valuetext": valueText,
|
|
87
|
-
"aria-
|
|
86
|
+
"aria-label": resizeLabel,
|
|
88
87
|
"aria-describedby": instructionId,
|
|
89
88
|
"aria-hidden": isReachable ? void 0 : true,
|
|
90
89
|
tabIndex: isReachable ? 0 : -1,
|
|
@@ -99,7 +98,6 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
99
98
|
getOwnerProps
|
|
100
99
|
}
|
|
101
100
|
),
|
|
102
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: nameId, style: HIDDEN_STYLE, children: resizeLabel }),
|
|
103
101
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: instructionId, style: HIDDEN_STYLE, children: RESIZE_INSTRUCTION })
|
|
104
102
|
] });
|
|
105
103
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/HeaderResizer.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useEffect } from 'react';\nimport { StyledResizer } from '../../styled.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderResizer } from './useHeaderResizer.js';\nimport { usePropsStore } from '../../configs/useStore/createInternalAndPropsContext.js';\nimport { DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '../../configs/constants.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 } from '../../configs/constants.js';\n\nconst stopPropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\n/** Instruction node \u2014 referenced via aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\nconst RESIZE_INSTRUCTION = 'Use the left and right arrow keys to increase or decrease the column width.';\n\n/**\n * PUI-17784: brackets the announced bounds around the actual current width, not just the configured\n * ones. The resize clamp (narrow() in useHeaderResizer.ts) only bounds INTERACTIVE resizing \u2014 an\n * explicit column.width set outside [minWidth, maxWidth] renders as-is on first paint (pre-existing,\n * unrelated to this ticket), so columnWidth can start below configuredMin or above configuredMax.\n * Reporting aria-valuenow outside [aria-valuemin, aria-valuemax] is an internally-inconsistent ARIA\n * value \u2014 exactly the class of meaningless-value problem this ticket exists to fix, just in a\n * narrower corner. Widening the bound to include the real value (rather than clamping the value to a\n * bound the column isn't actually honoring) keeps the announcement accurate; it self-corrects to the\n * configured bound on the first interactive resize, since narrow() clamps from then on.\n */\nconst bracketBound = (configuredBound: number, columnWidth: number | undefined, pickWider: typeof Math.min) =>\n pickWider(configuredBound, columnWidth ?? configuredBound);\n\nexport const HeaderResizer: React.ComponentType<{\n column: DSDataTableT.InternalColumn;\n innerRef: React.MutableRefObject<HTMLInputElement | null>;\n isReachable: boolean;\n}> = ({ column, innerRef, isReachable }) => {\n const { isResizing, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } =\n useHeaderResizer({\n columnId: column.id,\n innerRef,\n });\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const resizeLabel = typeof column.Header === 'string' ? `Resize ${column.Header} column` : 'Resize column';\n const instructionId = `resize-instr-${column.id}`.replace(/ /g, '');\n\n const valueMin = bracketBound(column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);\n const valueMax = bracketBound(column.maxWidth ?? DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);\n const sliderValue = columnWidth ?? valueMin;\n const valueText = columnWidth === undefined ? undefined : `${columnWidth} pixels`;\n\n // This setups the event listeners for the resize (only for mouse)\n // It reacts to the isResizing state change\n useEffect(() => {\n const addEvents = () => {\n document.addEventListener('mousemove', onResizeHandler);\n document.addEventListener('touchmove', onResizeHandler);\n document.addEventListener('mouseup', onResizeEnd);\n document.addEventListener('touchend', onResizeEnd);\n };\n const removeEvents = () => {\n document.removeEventListener('mousemove', onResizeHandler);\n document.removeEventListener('touchmove', onResizeHandler);\n document.removeEventListener('mouseup', onResizeEnd);\n document.removeEventListener('touchend', onResizeEnd);\n };\n\n if (isResizing) addEvents();\n else removeEvents();\n\n // just in case the component is unmounted\n return removeEvents;\n }, [isResizing, onResizeHandler, onResizeEnd]);\n\n return (\n <>\n <StyledResizer\n type=\"range\"\n min={valueMin}\n max={valueMax}\n value={sliderValue}\n aria-valuenow={columnWidth}\n aria-valuemin={valueMin}\n aria-valuemax={valueMax}\n aria-valuetext={valueText}\n aria-label={resizeLabel}\n aria-describedby={instructionId}\n aria-hidden={isReachable ? undefined : true}\n tabIndex={isReachable ? 0 : -1}\n innerRef={innerRef}\n draggable={false}\n onMouseDown={onResizeStart}\n onTouchStart={onResizeStart}\n onMouseUp={onResizeEnd}\n onTouchEnd={onResizeEnd}\n onClick={stopPropagation}\n onKeyDown={handleKeyboardResize}\n getOwnerProps={getOwnerProps}\n />\n <span id={instructionId} style={HIDDEN_STYLE}>\n {RESIZE_INSTRUCTION}\n </span>\n </>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADuEnB;AAvEJ,mBAAiC;AACjC,oBAA8B;AAE9B,8BAAiC;AACjC,2CAA8B;AAC9B,uBAAmE;AAEnE,MAAM,kBAAkB,CAAC,MAA8C,EAAE,gBAAgB;AAGzF,MAAM,eAAoC,EAAE,SAAS,OAAO;AAC5D,MAAM,qBAAqB;AAa3B,MAAM,eAAe,CAAC,iBAAyB,aAAiC,cAC9E,UAAU,iBAAiB,eAAe,eAAe;AAEpD,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,aAAa,eAAe,aAAa,iBAAiB,qBAAqB,QACjG,0CAAiB;AAAA,IACf,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACH,QAAM,oBAAgB,oDAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,cAAc,OAAO,OAAO,WAAW,WAAW,UAAU,OAAO,MAAM,YAAY;AAC3F,QAAM,gBAAgB,gBAAgB,OAAO,EAAE,GAAG,QAAQ,MAAM,EAAE;AAElE,QAAM,WAAW,aAAa,OAAO,YAAY,2CAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,WAAW,aAAa,OAAO,YAAY,2CAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,cAAc,eAAe;AACnC,QAAM,YAAY,gBAAgB,SAAY,SAAY,GAAG,WAAW;AAIxE,8BAAU,MAAM;AACd,UAAM,YAAY,MAAM;AACtB,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,aAAa,eAAe;AACtD,eAAS,iBAAiB,WAAW,WAAW;AAChD,eAAS,iBAAiB,YAAY,WAAW;AAAA,IACnD;AACA,UAAM,eAAe,MAAM;AACzB,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,aAAa,eAAe;AACzD,eAAS,oBAAoB,WAAW,WAAW;AACnD,eAAS,oBAAoB,YAAY,WAAW;AAAA,IACtD;AAEA,QAAI,WAAY,WAAU;AAAA,QACrB,cAAa;AAGlB,WAAO;AAAA,EACT,GAAG,CAAC,YAAY,iBAAiB,WAAW,CAAC;AAE7C,SACE,4EACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,OAAO;AAAA,QACP,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,cAAY;AAAA,QACZ,oBAAkB;AAAA,QAClB,eAAa,cAAc,SAAY;AAAA,QACvC,UAAU,cAAc,IAAI;AAAA,QAC5B;AAAA,QACA,WAAW;AAAA,QACX,aAAa;AAAA,QACb,cAAc;AAAA,QACd,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA,4CAAC,UAAK,IAAI,eAAe,OAAO,cAC7B,8BACH;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/configs/constants.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n Fixed: 'fixed',\n Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n\n// Shared resize-clamp bounds \u2014 single source of truth for both the mouse/keyboard resize clamp\n// (useHeaderResizer.ts) and the resizer's aria-valuemin/aria-valuemax so they never drift.\n// PUI-17784 briefly raised DEFAULT_MIN_COLUMN_WIDTH to a measured worst-case icon-cluster width (70px),\n// but that only protects against overlap for columns that happen to match the worst-case icon\n// combination the constant was measured against \u2014 any column with a longer header title, or with a\n// narrower icon-cluster paired with a wide title, could still overlap. PUI-12696 reverts to the\n// historical 30px floor and moves the real protection to the consumer: `minWidth` is a controlled-IoC\n// prop (see .github/memories/project_philosophy.md), so Dimsum does not try to infer a safe default\n// from a column's content \u2014 the app that knows its own header text and enabled affordances is\n// responsible for passing a `minWidth` that actually fits them. See KNOWN_INTENTIONAL_DEVIATIONS.md #
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const momentFormat = 'MM/DD/YYYY';\nexport const ColsLayoutStyle = {\n Fixed: 'fixed',\n Auto: 'auto',\n} as const;\n\nexport const DropIndicatorPosition = {\n None: 'none',\n Before: 'before',\n After: 'after',\n Inside: 'inside',\n} as const;\n\n// Shared resize-clamp bounds \u2014 single source of truth for both the mouse/keyboard resize clamp\n// (useHeaderResizer.ts) and the resizer's aria-valuemin/aria-valuemax so they never drift.\n// PUI-17784 briefly raised DEFAULT_MIN_COLUMN_WIDTH to a measured worst-case icon-cluster width (70px),\n// but that only protects against overlap for columns that happen to match the worst-case icon\n// combination the constant was measured against \u2014 any column with a longer header title, or with a\n// narrower icon-cluster paired with a wide title, could still overlap. PUI-12696 reverts to the\n// historical 30px floor and moves the real protection to the consumer: `minWidth` is a controlled-IoC\n// prop (see .github/memories/project_philosophy.md), so Dimsum does not try to infer a safe default\n// from a column's content \u2014 the app that knows its own header text and enabled affordances is\n// responsible for passing a `minWidth` that actually fits them. See KNOWN_INTENTIONAL_DEVIATIONS.md #2.\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"],
|
|
5
5
|
"mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,eAAe;AACrB,MAAM,kBAAkB;AAAA,EAC7B,OAAO;AAAA,EACP,MAAM;AACR;AAEO,MAAM,wBAAwB;AAAA,EACnC,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACV;AAYO,MAAM,2BAA2B;AACjC,MAAM,2BAA2B;AAEjC,MAAM,cAAc;AAAA,EACzB,oBAAoB;AAAA,EACpB,+BAA+B;AAAA,EAC/B,4BAA4B;AAAA,EAC5B,6BAA6B;AAAA,EAC7B,6BAA6B;AAAA,EAC7B,uBAAuB;AAAA,EACvB,4BAA4B;AAAA,EAC5B,qBAAqB;AAAA,EACrB,kBAAkB;AAAA,EAClB,kCAAkC;AAAA,EAClC,oDAAoD;AAAA,EACpD,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,sCAAsC;AAAA,EACtC,6BAA6B;AAAA,EAC7B,mCAAmC;AAAA,EACnC,oCAAoC;AAAA,EACpC,0BAA0B;AAAA,EAC1B,kCAAkC;AAAA;AAAA,EAClC,gCAAgC;AAAA,EAChC,oCAAoC;AAAA,EACpC,wBAAwB;AAAA,EACxB,gBAAgB;AAAA,EAChB,4BAA4B;AAAA,EAC5B,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,EACxB,4BAA4B;AAAA,EAC5B,kBAAkB;AAAA,EAClB,iCAAiC;AAAA,EACjC,mBAAmB;AAAA,EACnB,+BAA+B;AAAA,EAC/B,6BAA6B;AAAA,EAC7B,gCAAgC;AAAA,EAChC,8BAA8B;AAAA,EAC9B,sCAAsC;AAAA,EACtC,wBAAwB;AAC1B;AAEO,MAAM,eAAe;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -16,7 +16,6 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
16
16
|
});
|
|
17
17
|
const getOwnerProps = usePropsStore((store) => store.get);
|
|
18
18
|
const resizeLabel = typeof column.Header === "string" ? `Resize ${column.Header} column` : "Resize column";
|
|
19
|
-
const nameId = `resize-name-${column.id}`.replace(/ /g, "");
|
|
20
19
|
const instructionId = `resize-instr-${column.id}`.replace(/ /g, "");
|
|
21
20
|
const valueMin = bracketBound(column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);
|
|
22
21
|
const valueMax = bracketBound(column.maxWidth ?? DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);
|
|
@@ -51,7 +50,7 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
51
50
|
"aria-valuemin": valueMin,
|
|
52
51
|
"aria-valuemax": valueMax,
|
|
53
52
|
"aria-valuetext": valueText,
|
|
54
|
-
"aria-
|
|
53
|
+
"aria-label": resizeLabel,
|
|
55
54
|
"aria-describedby": instructionId,
|
|
56
55
|
"aria-hidden": isReachable ? void 0 : true,
|
|
57
56
|
tabIndex: isReachable ? 0 : -1,
|
|
@@ -66,7 +65,6 @@ const HeaderResizer = ({ column, innerRef, isReachable }) => {
|
|
|
66
65
|
getOwnerProps
|
|
67
66
|
}
|
|
68
67
|
),
|
|
69
|
-
/* @__PURE__ */ jsx("span", { id: nameId, style: HIDDEN_STYLE, children: resizeLabel }),
|
|
70
68
|
/* @__PURE__ */ jsx("span", { id: instructionId, style: HIDDEN_STYLE, children: RESIZE_INSTRUCTION })
|
|
71
69
|
] });
|
|
72
70
|
};
|
|
@@ -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';\nimport { DEFAULT_MAX_COLUMN_WIDTH, DEFAULT_MIN_COLUMN_WIDTH } from '../../configs/constants.js';\n\nconst stopPropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\n/**
|
|
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 } from '../../configs/constants.js';\n\nconst stopPropagation = (e: React.MouseEvent | React.KeyboardEvent) => e.stopPropagation();\n\n/** Instruction node \u2014 referenced via aria-describedby, never rendered visually. */\nconst HIDDEN_STYLE: React.CSSProperties = { display: 'none' };\nconst RESIZE_INSTRUCTION = 'Use the left and right arrow keys to increase or decrease the column width.';\n\n/**\n * PUI-17784: brackets the announced bounds around the actual current width, not just the configured\n * ones. The resize clamp (narrow() in useHeaderResizer.ts) only bounds INTERACTIVE resizing \u2014 an\n * explicit column.width set outside [minWidth, maxWidth] renders as-is on first paint (pre-existing,\n * unrelated to this ticket), so columnWidth can start below configuredMin or above configuredMax.\n * Reporting aria-valuenow outside [aria-valuemin, aria-valuemax] is an internally-inconsistent ARIA\n * value \u2014 exactly the class of meaningless-value problem this ticket exists to fix, just in a\n * narrower corner. Widening the bound to include the real value (rather than clamping the value to a\n * bound the column isn't actually honoring) keeps the announcement accurate; it self-corrects to the\n * configured bound on the first interactive resize, since narrow() clamps from then on.\n */\nconst bracketBound = (configuredBound: number, columnWidth: number | undefined, pickWider: typeof Math.min) =>\n pickWider(configuredBound, columnWidth ?? configuredBound);\n\nexport const HeaderResizer: React.ComponentType<{\n column: DSDataTableT.InternalColumn;\n innerRef: React.MutableRefObject<HTMLInputElement | null>;\n isReachable: boolean;\n}> = ({ column, innerRef, isReachable }) => {\n const { isResizing, columnWidth, onResizeStart, onResizeEnd, onResizeHandler, handleKeyboardResize } =\n useHeaderResizer({\n columnId: column.id,\n innerRef,\n });\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const resizeLabel = typeof column.Header === 'string' ? `Resize ${column.Header} column` : 'Resize column';\n const instructionId = `resize-instr-${column.id}`.replace(/ /g, '');\n\n const valueMin = bracketBound(column.minWidth ?? DEFAULT_MIN_COLUMN_WIDTH, columnWidth, Math.min);\n const valueMax = bracketBound(column.maxWidth ?? DEFAULT_MAX_COLUMN_WIDTH, columnWidth, Math.max);\n const sliderValue = columnWidth ?? valueMin;\n const valueText = columnWidth === undefined ? undefined : `${columnWidth} pixels`;\n\n // This setups the event listeners for the resize (only for mouse)\n // It reacts to the isResizing state change\n useEffect(() => {\n const addEvents = () => {\n document.addEventListener('mousemove', onResizeHandler);\n document.addEventListener('touchmove', onResizeHandler);\n document.addEventListener('mouseup', onResizeEnd);\n document.addEventListener('touchend', onResizeEnd);\n };\n const removeEvents = () => {\n document.removeEventListener('mousemove', onResizeHandler);\n document.removeEventListener('touchmove', onResizeHandler);\n document.removeEventListener('mouseup', onResizeEnd);\n document.removeEventListener('touchend', onResizeEnd);\n };\n\n if (isResizing) addEvents();\n else removeEvents();\n\n // just in case the component is unmounted\n return removeEvents;\n }, [isResizing, onResizeHandler, onResizeEnd]);\n\n return (\n <>\n <StyledResizer\n type=\"range\"\n min={valueMin}\n max={valueMax}\n value={sliderValue}\n aria-valuenow={columnWidth}\n aria-valuemin={valueMin}\n aria-valuemax={valueMax}\n aria-valuetext={valueText}\n aria-label={resizeLabel}\n aria-describedby={instructionId}\n aria-hidden={isReachable ? undefined : true}\n tabIndex={isReachable ? 0 : -1}\n innerRef={innerRef}\n draggable={false}\n onMouseDown={onResizeStart}\n onTouchStart={onResizeStart}\n onMouseUp={onResizeEnd}\n onTouchEnd={onResizeEnd}\n onClick={stopPropagation}\n onKeyDown={handleKeyboardResize}\n getOwnerProps={getOwnerProps}\n />\n <span id={instructionId} style={HIDDEN_STYLE}>\n {RESIZE_INSTRUCTION}\n </span>\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACuEnB,mBACE,KADF;AAvEJ,SAAgB,iBAAiB;AACjC,SAAS,qBAAqB;AAE9B,SAAS,wBAAwB;AACjC,SAAS,qBAAqB;AAC9B,SAAS,0BAA0B,gCAAgC;AAEnE,MAAM,kBAAkB,CAAC,MAA8C,EAAE,gBAAgB;AAGzF,MAAM,eAAoC,EAAE,SAAS,OAAO;AAC5D,MAAM,qBAAqB;AAa3B,MAAM,eAAe,CAAC,iBAAyB,aAAiC,cAC9E,UAAU,iBAAiB,eAAe,eAAe;AAEpD,MAAM,gBAIR,CAAC,EAAE,QAAQ,UAAU,YAAY,MAAM;AAC1C,QAAM,EAAE,YAAY,aAAa,eAAe,aAAa,iBAAiB,qBAAqB,IACjG,iBAAiB;AAAA,IACf,UAAU,OAAO;AAAA,IACjB;AAAA,EACF,CAAC;AACH,QAAM,gBAAgB,cAAc,CAAC,UAAU,MAAM,GAAG;AAExD,QAAM,cAAc,OAAO,OAAO,WAAW,WAAW,UAAU,OAAO,MAAM,YAAY;AAC3F,QAAM,gBAAgB,gBAAgB,OAAO,EAAE,GAAG,QAAQ,MAAM,EAAE;AAElE,QAAM,WAAW,aAAa,OAAO,YAAY,0BAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,WAAW,aAAa,OAAO,YAAY,0BAA0B,aAAa,KAAK,GAAG;AAChG,QAAM,cAAc,eAAe;AACnC,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,iCACE;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,OAAO;AAAA,QACP,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,iBAAe;AAAA,QACf,kBAAgB;AAAA,QAChB,cAAY;AAAA,QACZ,oBAAkB;AAAA,QAClB,eAAa,cAAc,SAAY;AAAA,QACvC,UAAU,cAAc,IAAI;AAAA,QAC5B;AAAA,QACA,WAAW;AAAA,QACX,aAAa;AAAA,QACb,cAAc;AAAA,QACd,WAAW;AAAA,QACX,YAAY;AAAA,QACZ,SAAS;AAAA,QACT,WAAW;AAAA,QACX;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,UAAK,IAAI,eAAe,OAAO,cAC7B,8BACH;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-data-table",
|
|
3
|
-
"version": "3.70.0-next.
|
|
3
|
+
"version": "3.70.0-next.59",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Data Table",
|
|
6
6
|
"files": [
|
|
@@ -41,40 +41,40 @@
|
|
|
41
41
|
"react-virtual": "~2.10.4",
|
|
42
42
|
"uid": "^2.0.2",
|
|
43
43
|
"use-onclickoutside": "0.4.1",
|
|
44
|
-
"@elliemae/ds-button-v2": "3.70.0-next.
|
|
45
|
-
"@elliemae/ds-
|
|
46
|
-
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.
|
|
47
|
-
"@elliemae/ds-
|
|
48
|
-
"@elliemae/ds-dropdownmenu-v2": "3.70.0-next.
|
|
49
|
-
"@elliemae/ds-floating-context": "3.70.0-next.
|
|
50
|
-
"@elliemae/ds-form-checkbox": "3.70.0-next.
|
|
51
|
-
"@elliemae/ds-form-
|
|
52
|
-
"@elliemae/ds-form-date-range-picker": "3.70.0-next.
|
|
53
|
-
"@elliemae/ds-form-
|
|
54
|
-
"@elliemae/ds-form-
|
|
55
|
-
"@elliemae/ds-form-
|
|
56
|
-
"@elliemae/ds-form-
|
|
57
|
-
"@elliemae/ds-form-
|
|
58
|
-
"@elliemae/ds-
|
|
59
|
-
"@elliemae/ds-
|
|
60
|
-
"@elliemae/ds-
|
|
61
|
-
"@elliemae/ds-icons": "3.70.0-next.
|
|
62
|
-
"@elliemae/ds-pagination": "3.70.0-next.
|
|
63
|
-
"@elliemae/ds-pills-v2": "3.70.0-next.
|
|
64
|
-
"@elliemae/ds-
|
|
65
|
-
"@elliemae/ds-
|
|
66
|
-
"@elliemae/ds-
|
|
67
|
-
"@elliemae/ds-
|
|
68
|
-
"@elliemae/ds-
|
|
44
|
+
"@elliemae/ds-button-v2": "3.70.0-next.59",
|
|
45
|
+
"@elliemae/ds-dialog": "3.70.0-next.59",
|
|
46
|
+
"@elliemae/ds-circular-progress-indicator": "3.70.0-next.59",
|
|
47
|
+
"@elliemae/ds-drag-and-drop": "3.70.0-next.59",
|
|
48
|
+
"@elliemae/ds-dropdownmenu-v2": "3.70.0-next.59",
|
|
49
|
+
"@elliemae/ds-floating-context": "3.70.0-next.59",
|
|
50
|
+
"@elliemae/ds-form-checkbox": "3.70.0-next.59",
|
|
51
|
+
"@elliemae/ds-form-combobox": "3.70.0-next.59",
|
|
52
|
+
"@elliemae/ds-form-date-range-picker": "3.70.0-next.59",
|
|
53
|
+
"@elliemae/ds-form-date-time-picker": "3.70.0-next.59",
|
|
54
|
+
"@elliemae/ds-form-helpers-mask-hooks": "3.70.0-next.59",
|
|
55
|
+
"@elliemae/ds-form-input-text": "3.70.0-next.59",
|
|
56
|
+
"@elliemae/ds-form-layout-blocks": "3.70.0-next.59",
|
|
57
|
+
"@elliemae/ds-form-radio": "3.70.0-next.59",
|
|
58
|
+
"@elliemae/ds-hooks-focus-trap": "3.70.0-next.59",
|
|
59
|
+
"@elliemae/ds-menu-button": "3.70.0-next.59",
|
|
60
|
+
"@elliemae/ds-grid": "3.70.0-next.59",
|
|
61
|
+
"@elliemae/ds-icons": "3.70.0-next.59",
|
|
62
|
+
"@elliemae/ds-pagination": "3.70.0-next.59",
|
|
63
|
+
"@elliemae/ds-pills-v2": "3.70.0-next.59",
|
|
64
|
+
"@elliemae/ds-skeleton": "3.70.0-next.59",
|
|
65
|
+
"@elliemae/ds-system": "3.70.0-next.59",
|
|
66
|
+
"@elliemae/ds-props-helpers": "3.70.0-next.59",
|
|
67
|
+
"@elliemae/ds-typescript-helpers": "3.70.0-next.59",
|
|
68
|
+
"@elliemae/ds-zustand-helpers": "3.70.0-next.59"
|
|
69
69
|
},
|
|
70
70
|
"devDependencies": {
|
|
71
71
|
"jest": "^30.0.0",
|
|
72
72
|
"styled-components": "~5.3.11",
|
|
73
73
|
"styled-system": "^5.1.5",
|
|
74
|
-
"@elliemae/ds-
|
|
75
|
-
"@elliemae/ds-
|
|
76
|
-
"@elliemae/ds-
|
|
77
|
-
"@elliemae/ds-
|
|
74
|
+
"@elliemae/ds-monorepo-devops": "3.70.0-next.59",
|
|
75
|
+
"@elliemae/ds-toolbar-v2": "3.70.0-next.59",
|
|
76
|
+
"@elliemae/ds-test-utils": "3.70.0-next.59",
|
|
77
|
+
"@elliemae/ds-tabs": "3.70.0-next.59"
|
|
78
78
|
},
|
|
79
79
|
"peerDependencies": {
|
|
80
80
|
"lodash-es": "^4.18.1",
|