@elliemae/ds-data-table 3.40.0 → 3.41.0-rc.0
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/addons/Filters/Components/CurrencyRangeFilter/index.js +4 -0
- package/dist/cjs/addons/Filters/Components/CurrencyRangeFilter/index.js.map +2 -2
- package/dist/cjs/configs/constants.js +2 -1
- package/dist/cjs/configs/constants.js.map +2 -2
- package/dist/cjs/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/cjs/parts/Headers/HeaderCell.js +24 -10
- package/dist/cjs/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderCellConfig.js +1 -1
- package/dist/cjs/parts/Headers/useHeaderCellConfig.js.map +2 -2
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js +22 -13
- package/dist/cjs/parts/Headers/useHeaderCellHandlers.js.map +2 -2
- package/dist/cjs/parts/SortByCaret.js +35 -8
- package/dist/cjs/parts/SortByCaret.js.map +3 -3
- package/dist/cjs/react-desc-prop-types.js.map +2 -2
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js +4 -0
- package/dist/esm/addons/Filters/Components/CurrencyRangeFilter/index.js.map +2 -2
- package/dist/esm/configs/constants.js +2 -1
- package/dist/esm/configs/constants.js.map +2 -2
- package/dist/esm/exported-related/FilterPopover/index.js.map +2 -2
- package/dist/esm/parts/Headers/HeaderCell.js +24 -10
- package/dist/esm/parts/Headers/HeaderCell.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderCellConfig.js +1 -1
- package/dist/esm/parts/Headers/useHeaderCellConfig.js.map +2 -2
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js +22 -13
- package/dist/esm/parts/Headers/useHeaderCellHandlers.js.map +2 -2
- package/dist/esm/parts/SortByCaret.js +37 -10
- package/dist/esm/parts/SortByCaret.js.map +3 -3
- package/dist/esm/react-desc-prop-types.js.map +2 -2
- package/dist/types/configs/constants.d.ts +1 -0
- package/dist/types/parts/Headers/useHeaderCellHandlers.d.ts +3 -1
- package/dist/types/parts/SortByCaret.d.ts +6 -0
- package/dist/types/react-desc-prop-types.d.ts +1 -0
- package/package.json +28 -28
|
@@ -60,6 +60,10 @@ const CurrencyRangeFilter = (props) => {
|
|
|
60
60
|
} = props;
|
|
61
61
|
const [from, setFrom] = (0, import_react.useState)((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.from ?? "", opts));
|
|
62
62
|
const [to, setTo] = (0, import_react.useState)((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.to ?? "", opts));
|
|
63
|
+
(0, import_react.useEffect)(() => {
|
|
64
|
+
setFrom((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.from ?? "", opts));
|
|
65
|
+
setTo((0, import_ds_form_helpers_mask_hooks.getNumberMaskedValue)(filterValue.to ?? "", opts));
|
|
66
|
+
}, [filterValue.from, filterValue.to]);
|
|
63
67
|
const ref = (0, import_react.useRef)(null);
|
|
64
68
|
const shouldFocus = (0, import_react.useRef)(true);
|
|
65
69
|
const handleApplyChange = (0, import_react.useCallback)(
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/addons/Filters/Components/CurrencyRangeFilter/index.tsx", "../../../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n includeThousandsSeparator: false,\n decimalPlaces: 2,\n decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n from: string | null;\n to: string | null;\n}\n\nexport const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\n const {\n column,\n filterValue = { from: null, to: null },\n reduxHeader,\n patchHeader,\n onValueChange,\n innerRef,\n domIdAffix = uid(4),\n } = props;\n\n const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n\n const handleApplyChange = useCallback(\n ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n },\n [onValueChange],\n );\n\n const handleFromChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n handleApplyChange({ newFrom, newTo: to });\n },\n [handleApplyChange, to],\n );\n const handleToChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n handleApplyChange({ newFrom: from, newTo });\n },\n [from, handleApplyChange],\n );\n\n const fromInputProps = useNumberMask({\n valueSetter: setFrom,\n onChange: handleFromChange,\n ...opts,\n });\n\n const toInputProps = useNumberMask({\n valueSetter: setTo,\n onChange: handleToChange,\n ...opts,\n });\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n }\n },\n [column.id, innerRef, patchHeader],\n );\n\n const handleRef = useCallback(\n (newRef: HTMLInputElement | null) => {\n if (ref.current) ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n newRef?.focus();\n shouldFocus.current = false;\n });\n }\n },\n [shouldFocus],\n );\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={\n <Grid\n data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n gutter=\"xxxs\"\n padding=\"xxs\"\n cols={['auto', 'auto']}\n style={{ background: 'white' }}\n onKeyDown={handleOnKeyDown}\n >\n <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}-${domIdAffix}`}>\n <DSInputText\n value={from}\n {...fromInputProps}\n id={`${idPreffix}-min-${column.id}-${domIdAffix}`}\n style={{ textAlign: 'right' }}\n placeholder=\"0.00\"\n innerRef={handleRef}\n />\n </DSFormLayoutBlockItem>\n <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}-${domIdAffix}`}>\n <DSInputText\n value={to}\n {...toInputProps}\n id={`${idPreffix}-max-${column.id}s-${domIdAffix}`}\n style={{ textAlign: 'right' }}\n placeholder=\"0.00\"\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useEffect, useCallback, useState } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { getNumberMaskedValue, useNumberMask } from '@elliemae/ds-form-helpers-mask-hooks';\nimport { DSFormLayoutBlockItem } from '@elliemae/ds-form-layout-blocks';\nimport { SearchXsmall } from '@elliemae/ds-icons';\nimport { uid } from 'uid';\nimport { FilterPopover, FILTER_TYPES } from '../../../../exported-related/index.js';\nimport type { DSDataTableT } from '../../../../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../../../../configs/constants.js';\n\nconst opts = {\n includeThousandsSeparator: false,\n decimalPlaces: 2,\n decimalRequired: true,\n};\n\nconst idPreffix = 'datatable-currency-range';\n\ninterface CurrentRangeFilterValue {\n from: string | null;\n to: string | null;\n}\n\nexport const CurrencyRangeFilter: React.ComponentType<DSDataTableT.FilterProps<CurrentRangeFilterValue>> = (props) => {\n const {\n column,\n filterValue = { from: null, to: null },\n reduxHeader,\n patchHeader,\n onValueChange,\n innerRef,\n domIdAffix = uid(4),\n } = props;\n\n const [from, setFrom] = useState(getNumberMaskedValue(filterValue.from ?? '', opts));\n const [to, setTo] = useState(getNumberMaskedValue(filterValue.to ?? '', opts));\n\n useEffect(() => {\n // in order to update the input values when the user clear the filters\n // we need to update the state when the filterValue changes\n setFrom(getNumberMaskedValue(filterValue.from ?? '', opts));\n setTo(getNumberMaskedValue(filterValue.to ?? '', opts));\n }, [filterValue.from, filterValue.to]);\n\n const ref = useRef<HTMLInputElement | null>(null);\n const shouldFocus = useRef(true);\n\n const handleApplyChange = useCallback(\n ({ newFrom, newTo }: { newFrom?: string; newTo?: string }) => {\n onValueChange(FILTER_TYPES.CURRENCY_RANGE, { from: newFrom ?? '', to: newTo ?? '' });\n },\n [onValueChange],\n );\n\n const handleFromChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, newFrom?: string) => {\n handleApplyChange({ newFrom, newTo: to });\n },\n [handleApplyChange, to],\n );\n const handleToChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>, newTo?: string) => {\n handleApplyChange({ newFrom: from, newTo });\n },\n [from, handleApplyChange],\n );\n\n const fromInputProps = useNumberMask({\n valueSetter: setFrom,\n onChange: handleFromChange,\n ...opts,\n });\n\n const toInputProps = useNumberMask({\n valueSetter: setTo,\n onChange: handleToChange,\n ...opts,\n });\n\n const handleOnKeyDown = useCallback(\n (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (e.code === 'Escape') {\n patchHeader(column.id, { hideFilterMenu: true, hideFilterButton: false });\n innerRef.current?.focus();\n }\n },\n [column.id, innerRef, patchHeader],\n );\n\n const handleRef = useCallback(\n (newRef: HTMLInputElement | null) => {\n if (ref.current) ref.current = newRef;\n if (shouldFocus.current) {\n setTimeout(() => {\n newRef?.focus();\n shouldFocus.current = false;\n });\n }\n },\n [shouldFocus],\n );\n\n useEffect(() => {\n if (reduxHeader?.hideFilterMenu) {\n shouldFocus.current = true;\n }\n }, [reduxHeader?.hideFilterMenu]);\n\n return (\n <FilterPopover\n reduxHeader={reduxHeader}\n column={column}\n columnId={column.id}\n menuContent={\n <Grid\n data-testid={DATA_TESTID.DATA_TABLE_CURRENCY_RANGE_CONTROLLER}\n gutter=\"xxxs\"\n padding=\"xxs\"\n cols={['auto', 'auto']}\n style={{ background: 'white' }}\n onKeyDown={handleOnKeyDown}\n >\n <DSFormLayoutBlockItem label=\"Min\" inputID={`${idPreffix}-min-${column.id}-${domIdAffix}`}>\n <DSInputText\n value={from}\n {...fromInputProps}\n id={`${idPreffix}-min-${column.id}-${domIdAffix}`}\n style={{ textAlign: 'right' }}\n placeholder=\"0.00\"\n innerRef={handleRef}\n />\n </DSFormLayoutBlockItem>\n <DSFormLayoutBlockItem label=\"Max\" inputID={`${idPreffix}-max-${column.id}-${domIdAffix}`}>\n <DSInputText\n value={to}\n {...toInputProps}\n id={`${idPreffix}-max-${column.id}s-${domIdAffix}`}\n style={{ textAlign: 'right' }}\n placeholder=\"0.00\"\n />\n </DSFormLayoutBlockItem>\n </Grid>\n }\n triggerIcon={<SearchXsmall />}\n customStyles={{ width: column.ref?.current?.offsetWidth ?? '0px' }}\n innerRef={innerRef}\n ariaLabel=\"Open Currency Range Filter\"\n />\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -82,7 +82,8 @@ const DATA_TESTID = {
|
|
|
82
82
|
DATA_TABLE_ROW_GROUP_HEADER: "data-table-row-group-header",
|
|
83
83
|
DATA_TABLE_COLUMN_DRAG_OVERLAY: "data-table-drag-column-drag-overlay",
|
|
84
84
|
DATA_TABLE_HEADER_CELL_TITLE: "header-cell-title",
|
|
85
|
-
DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: "filter-bar-ddmenu-button"
|
|
85
|
+
DATA_TABLE_FILTER_BAR_DD_MENU_BUTTON: "filter-bar-ddmenu-button",
|
|
86
|
+
DATA_TABLE_SORT_BUTTON: "data-table-sort-button"
|
|
86
87
|
};
|
|
87
88
|
const EMPTY_FILTER = "ds-empty-filter";
|
|
88
89
|
//# sourceMappingURL=constants.js.map
|
|
@@ -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_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} 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;AAEO,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,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;
|
|
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_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;AAEO,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,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/exported-related/FilterPopover/index.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nconst FilterButton = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })<{\n hide: boolean;\n}>`\n display: inline-grid;\n ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst PopperContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`\n background-color: #fff;\n`;\n\nconst ButtonTrap = ({ cb }: { cb: () => void }) => (\n <span\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n cb();\n }}\n />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;\n\n const filters = usePropsStore((state) => state.filters);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const patchHeader = useInternalStore((state) => state.patchHeader);\n\n const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n const buttonTrapCallback = useCallback(() => {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n buttonReference?.focus();\n }, [columnId, patchHeader, buttonReference]);\n\n const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n update: null,\n });\n\n useEffect(() => {\n // When the filters change, we need to update the popper position,\n // because the filter bar might push the datatable up or down, causing the popper to be misaligned\n void actionRef.current.update?.();\n }, [filters]);\n\n return (\n <div\n // This is here to prevent propagation, and not trigger the sort functionality\n onClick={(e) => e.stopPropagation()}\n onKeyDown={handleMenuOnKeyDown}\n >\n <FilterButton\n hide={!isIconVisible}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n getOwnerProps={getOwnerProps}\n >\n <DSButtonV2\n buttonType=\"icon\"\n size=\"s\"\n onClick={handleTriggerClick}\n onFocus={handleTriggerOnFocus}\n onBlur={handleTriggerOnBlur}\n innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n aria-label={ariaLabel}\n aria-hidden={!isButtonFocused}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n >\n {triggerIcon}\n </DSButtonV2>\n </FilterButton>\n {buttonReference && (\n <DSPopperJS\n actionRef={actionRef}\n referenceElement={buttonReference}\n showPopover={isMenuOpen}\n closeContextMenu={handleClickOutsideMenu}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n startPlacementPreference=\"bottom-end\"\n customOffset={[5, 4]}\n withoutArrow\n withoutAnimation\n extraPopperStyles={{\n ...customStyles,\n minWidth: column.ref?.current?.offsetWidth ?? '0px',\n }}\n placementOrderPreference={['bottom-end', 'top-end']}\n >\n <PopperContent getOwnerProps={getOwnerProps}>\n <ButtonTrap cb={buttonTrapCallback} />\n {menuContent}\n <ButtonTrap cb={buttonTrapCallback} />\n </PopperContent>\n </DSPopperJS>\n )}\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable import/no-cycle */\n/* eslint-disable no-void */\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport { DSPopperJS } from '@elliemae/ds-popperjs';\nimport type { DSPopperJST } from '@elliemae/ds-popperjs';\nimport { styled, mergeRefs } from '@elliemae/ds-system';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { useGetFilterVisibility } from './useGetFilterVisibility.js';\nimport type { FilterPopoverProps } from './types.js';\nimport { useGetFilterHandlers } from './useGetFilterHandlers.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\nimport { DSDataTableName, DSDataTableSlots } from '../../DSDataTableDefinitions.js';\n\nconst FilterButton = styled('span', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_BUTTON })<{\n hide: boolean;\n}>`\n display: inline-grid;\n ${(props) => (props.hide ? 'opacity: 0; display: none; width: 0;' : '')}\n`;\n\nconst PopperContent = styled('div', { name: DSDataTableName, slot: DSDataTableSlots.FILTER_POPOVER_CONTENT })`\n background-color: #fff;\n`;\n\nconst ButtonTrap = ({ cb }: { cb: () => void }) => (\n <span\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={0}\n onFocus={(e: React.FocusEvent) => {\n e.stopPropagation();\n cb();\n }}\n />\n);\n\nexport const FilterPopover: React.ComponentType<FilterPopoverProps> = (props: FilterPopoverProps) => {\n const { column, customStyles, reduxHeader, menuContent, columnId, ariaLabel, triggerIcon, innerRef } = props;\n\n const filters = usePropsStore((state) => state.filters);\n const getOwnerProps = usePropsStore((store) => store.get);\n\n const patchHeader = useInternalStore((state) => state.patchHeader);\n\n const { isIconVisible, isMenuOpen } = useGetFilterVisibility(reduxHeader);\n\n const [buttonReference, setButtonReference] = useState<HTMLButtonElement | null>(null);\n\n const [isButtonFocused, setIsButtonFocused] = useState(false);\n\n const { handleTriggerClick, handleClickOutsideMenu, handleMenuOnKeyDown, handleTriggerOnFocus, handleTriggerOnBlur } =\n useGetFilterHandlers(props, isMenuOpen, buttonReference, setIsButtonFocused);\n\n const buttonTrapCallback = useCallback(() => {\n patchHeader(columnId, { hideFilterMenu: true, hideFilterButton: false });\n buttonReference?.focus();\n }, [columnId, patchHeader, buttonReference]);\n\n const actionRef: Required<DSPopperJST.Props>['actionRef'] = useRef({\n update: null,\n });\n\n useEffect(() => {\n // When the filters change, we need to update the popper position,\n // because the filter bar might push the datatable up or down, causing the popper to be misaligned\n void actionRef.current.update?.();\n }, [filters]);\n\n return (\n <div\n // This is here to prevent propagation, and not trigger the sort functionality\n onClick={(e) => e.stopPropagation()}\n onKeyDown={handleMenuOnKeyDown}\n >\n <FilterButton\n hide={!isIconVisible}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON}\n getOwnerProps={getOwnerProps}\n >\n <DSButtonV2\n buttonType=\"icon\"\n size=\"s\"\n onClick={handleTriggerClick}\n onFocus={handleTriggerOnFocus}\n onBlur={handleTriggerOnBlur}\n innerRef={mergeRefs(isIconVisible && setButtonReference, innerRef)}\n tabIndex={reduxHeader?.withTabStops ? 0 : -1}\n aria-label={ariaLabel}\n aria-hidden={!isButtonFocused}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_BUTTON_ELEMENT}\n >\n {triggerIcon}\n </DSButtonV2>\n </FilterButton>\n {buttonReference && (\n <DSPopperJS\n actionRef={actionRef}\n referenceElement={buttonReference}\n showPopover={isMenuOpen}\n closeContextMenu={handleClickOutsideMenu}\n data-testid={DATA_TESTID.DATA_TABLE_FILTER_MENU_CONTENT}\n startPlacementPreference=\"bottom-end\"\n customOffset={[5, 4]}\n withoutArrow\n withoutAnimation\n extraPopperStyles={{\n ...customStyles,\n minWidth: column.ref?.current?.offsetWidth ?? '0px',\n }}\n placementOrderPreference={['bottom-end', 'top-end']}\n >\n <PopperContent getOwnerProps={getOwnerProps}>\n <ButtonTrap cb={buttonTrapCallback} />\n {menuContent}\n <ButtonTrap cb={buttonTrapCallback} />\n </PopperContent>\n </DSPopperJS>\n )}\n </div>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -80,8 +80,19 @@ const HeaderCell = (props) => {
|
|
|
80
80
|
const dragHandleRef = (0, import_react.useRef)(null);
|
|
81
81
|
const filterIconRef = (0, import_react.useRef)(null);
|
|
82
82
|
const resizeHandlerRef = (0, import_react.useRef)(null);
|
|
83
|
+
const sortRef = (0, import_react.useRef)(null);
|
|
83
84
|
const { draggableProps } = (0, import_react.useContext)(import_SortableItemContext.SortableItemContext);
|
|
84
85
|
const { hasFilter, hasDnD, hasSortingCaret, hasRightIcons, shouldShowDnD, hCols, isDragging, shouldShowResize } = (0, import_useHeaderCellConfig.useHeaderCellConfig)(props);
|
|
86
|
+
const { handleSort, ...handlers } = (0, import_useHeaderCellHandlers.useHeaderCellHandlers)({
|
|
87
|
+
hasFilter,
|
|
88
|
+
column,
|
|
89
|
+
hasDnD,
|
|
90
|
+
dragHandleRef,
|
|
91
|
+
filterIconRef,
|
|
92
|
+
resizeHandlerRef,
|
|
93
|
+
sortRef,
|
|
94
|
+
hasSortingCaret
|
|
95
|
+
});
|
|
85
96
|
const rightIcons = (0, import_react.useMemo)(() => {
|
|
86
97
|
if (!hasRightIcons) return null;
|
|
87
98
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledHeaderRightIconsWrapper, { getOwnerProps, children: [
|
|
@@ -95,9 +106,19 @@ const HeaderCell = (props) => {
|
|
|
95
106
|
innerRef: filterIconRef
|
|
96
107
|
}
|
|
97
108
|
),
|
|
98
|
-
hasSortingCaret && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
109
|
+
hasSortingCaret && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
110
|
+
import_SortByCaret.SortByCaret,
|
|
111
|
+
{
|
|
112
|
+
isSortedDesc: column.isSortedDesc,
|
|
113
|
+
onClick: handleSort,
|
|
114
|
+
isReachable: reduxHeader?.withTabStops ?? false,
|
|
115
|
+
column,
|
|
116
|
+
reduxHeader,
|
|
117
|
+
innerRef: sortRef
|
|
118
|
+
}
|
|
119
|
+
)
|
|
99
120
|
] });
|
|
100
|
-
}, [hasRightIcons, getOwnerProps, column, onFiltersChange, reduxHeader, filters, hasSortingCaret]);
|
|
121
|
+
}, [hasRightIcons, getOwnerProps, handleSort, column, onFiltersChange, reduxHeader, filters, hasSortingCaret]);
|
|
101
122
|
const DnDHandleComponent = (0, import_react.useMemo)(
|
|
102
123
|
() => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { mr: "2px", alignItems: "center", style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFocusWithin, { hideFocus: isDragging, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
103
124
|
import_DnDHandle.DragHandle,
|
|
@@ -120,19 +141,12 @@ const HeaderCell = (props) => {
|
|
|
120
141
|
},
|
|
121
142
|
[column.ref, isDragOverlay]
|
|
122
143
|
);
|
|
123
|
-
const handlers = (0, import_useHeaderCellHandlers.useHeaderCellHandlers)({
|
|
124
|
-
hasFilter,
|
|
125
|
-
column,
|
|
126
|
-
hasDnD,
|
|
127
|
-
dragHandleRef,
|
|
128
|
-
filterIconRef,
|
|
129
|
-
resizeHandlerRef
|
|
130
|
-
});
|
|
131
144
|
const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, "");
|
|
132
145
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
133
146
|
import_styled.StyledHeadTh,
|
|
134
147
|
{
|
|
135
148
|
column,
|
|
149
|
+
onClick: handleSort,
|
|
136
150
|
...handlers,
|
|
137
151
|
role: "columnheader",
|
|
138
152
|
...isEmptyContent && column.id === firstFocuseableColumnHeaderId ? { "aria-label": `${noResultsMessage}. ${noResultsSecondaryMessage ? `${noResultsSecondaryMessage}.` : ""}` } : {},
|
|
@@ -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 max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst buildScreenReaderInstructions = ({\n colSpan,\n draggable,\n filterable,\n sortable,\n}: {\n colSpan: number;\n draggable: boolean;\n filterable: boolean;\n sortable: boolean;\n}) => {\n const preffix = colSpan === 1 ? '' : 'Column Group. ';\n if (!draggable && !filterable && !sortable) return preffix;\n\n let message = sortable\n ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n : '';\n if (draggable && filterable) {\n message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n } else if (draggable || filterable) {\n message = `This column is ${\n draggable ? 'draggable' : 'filterable'\n }. To enable this interaction press the enter key. ${message}`;\n }\n return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n column: DSDataTableT.InternalColumn;\n isDragOverlay?: boolean;\n colSpan: number;\n}\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\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<HTMLInputElement | null>(null);\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
4
|
+
"sourcesContent": ["/* eslint-disable no-nested-ternary */\n/* eslint-disable max-statements */\n/* eslint-disable complexity */\nimport React, { useCallback, useContext, useMemo, useRef } from 'react';\nimport { Grid } from '@elliemae/ds-grid';\nimport { StyledHeadTh, StyledHeaderRightIconsWrapper, StyledFocusWithin } from '../../styled.js';\nimport { SortByCaret } from '../SortByCaret.js';\nimport { DragHandle } from '../DnDHandle.js';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport { FilterMapItem } from '../Filters/index.js';\nimport { HeaderResizer } from './HeaderResizer.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useHeaderCellHandlers } from './useHeaderCellHandlers.js';\nimport { useHeaderCellConfig } from './useHeaderCellConfig.js';\nimport { DATA_TESTID } from '../../configs/constants.js';\nimport { HeaderCellTitle } from './HeaderCellTitle.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\nconst buildScreenReaderInstructions = ({\n colSpan,\n draggable,\n filterable,\n sortable,\n}: {\n colSpan: number;\n draggable: boolean;\n filterable: boolean;\n sortable: boolean;\n}) => {\n const preffix = colSpan === 1 ? '' : 'Column Group. ';\n if (!draggable && !filterable && !sortable) return preffix;\n\n let message = sortable\n ? 'You can sort the data ascendingly/descendingly by this column. Use the up / down arrows keys to do so'\n : '';\n if (draggable && filterable) {\n message = `This column is draggable and filterable. To enable these interactions press the enter key. ${message}`;\n } else if (draggable || filterable) {\n message = `This column is ${\n draggable ? 'draggable' : 'filterable'\n }. To enable this interaction press the enter key. ${message}`;\n }\n return `${preffix}${message}`;\n};\n\ninterface HeaderCellCompProps {\n column: DSDataTableT.InternalColumn;\n isDragOverlay?: boolean;\n colSpan: number;\n}\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\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<HTMLInputElement | 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 });\n\n const rightIcons = useMemo(() => {\n if (!hasRightIcons) return null;\n return (\n <StyledHeaderRightIconsWrapper getOwnerProps={getOwnerProps}>\n <FilterMapItem\n column={column}\n onFiltersChange={onFiltersChange}\n reduxHeader={reduxHeader}\n filters={filters}\n innerRef={filterIconRef}\n />\n {hasSortingCaret && (\n <SortByCaret\n isSortedDesc={column.isSortedDesc}\n onClick={\n handleSort as (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement>) => void\n }\n isReachable={reduxHeader?.withTabStops ?? false}\n column={column}\n reduxHeader={reduxHeader}\n innerRef={sortRef}\n />\n )}\n </StyledHeaderRightIconsWrapper>\n );\n }, [hasRightIcons, getOwnerProps, handleSort, column, onFiltersChange, reduxHeader, filters, hasSortingCaret]);\n\n const DnDHandleComponent = useMemo(\n () => (\n <Grid mr=\"2px\" alignItems=\"center\" 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 handleRef = useCallback(\n (_ref: HTMLTableColElement | null) => {\n if (!isDragOverlay) {\n column.ref.current = _ref;\n }\n },\n [column.ref, isDragOverlay],\n );\n\n const screenReaderInstructionsId = `sr-${column.id}-instructions-${domIdAffix}`.replace(/ /g, '');\n\n return (\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={handleRef}\n getOwnerProps={getOwnerProps}\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 <span id={screenReaderInstructionsId} style={{ display: 'none' }} aria-hidden=\"false\">\n {buildScreenReaderInstructions({\n colSpan,\n draggable: dragAndDropColumns && column.disableDnD !== true,\n filterable: hasFilter,\n sortable: column.canSort ?? false,\n })}\n </span>\n </StyledHeadTh>\n );\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -43,7 +43,7 @@ const useHeaderCellConfig = ({ column, isDragOverlay = false }) => {
|
|
|
43
43
|
const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
|
|
44
44
|
const hasFilter = !!(column.filter || column.Filter);
|
|
45
45
|
const hasDnD = dragAndDropColumns && !column.disableDnD;
|
|
46
|
-
const hasSortingCaret = Boolean(column.canSort)
|
|
46
|
+
const hasSortingCaret = Boolean(column.canSort);
|
|
47
47
|
const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);
|
|
48
48
|
const isDragging = draggableProps && draggableProps.isDragging;
|
|
49
49
|
const shouldShowDnD = hasDnD && (reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active || draggableProps && draggableProps.isDragging || isDragOverlay);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/parts/Headers/useHeaderCellConfig.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\ntype UseHeaderCellConfigType = (args: { column: DSDataTableT.InternalColumn; isDragOverlay?: boolean }) => {\n hasFilter: boolean;\n hasDnD: boolean;\n hasSortingCaret: boolean;\n hasRightIcons: boolean;\n isDragging: boolean;\n shouldShowDnD: boolean;\n shouldShowResize: boolean;\n hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay = false }) => {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const isResizeable = usePropsStore((state) => state.isResizeable);\n const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n const hasFilter = !!(column.filter || column.Filter);\n\n const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n const hasSortingCaret = Boolean(column.canSort)
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,iCAAoC;AAEpC,sBAAgD;AAazC,MAAM,sBAA+C,CAAC,EAAE,QAAQ,gBAAgB,MAAM,MAAM;AACjG,QAAM,yBAAqB,+BAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAe,+BAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,mBAAe,kCAAiB,CAAC,UAAU,MAAM,YAAY;AAEnE,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,QAAQ,OAAO,OAAO
|
|
4
|
+
"sourcesContent": ["/* eslint-disable complexity */\nimport { useContext, useMemo } from 'react';\nimport { SortableItemContext } from '../HoC/SortableItemContext.js';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\ntype UseHeaderCellConfigType = (args: { column: DSDataTableT.InternalColumn; isDragOverlay?: boolean }) => {\n hasFilter: boolean;\n hasDnD: boolean;\n hasSortingCaret: boolean;\n hasRightIcons: boolean;\n isDragging: boolean;\n shouldShowDnD: boolean;\n shouldShowResize: boolean;\n hCols: string[];\n};\n\nexport const useHeaderCellConfig: UseHeaderCellConfigType = ({ column, isDragOverlay = false }) => {\n const dragAndDropColumns = usePropsStore((state) => state.dragAndDropColumns);\n const isResizeable = usePropsStore((state) => state.isResizeable);\n const reduxHeaders = useInternalStore((state) => state.reduxHeaders);\n\n const { draggableProps } = useContext(SortableItemContext);\n\n const reduxHeader = useMemo(() => reduxHeaders[column.id], [reduxHeaders, column]);\n\n const hasFilter = !!(column.filter || column.Filter);\n\n const hasDnD = dragAndDropColumns && !column.disableDnD;\n\n const hasSortingCaret = Boolean(column.canSort);\n\n const hasRightIcons = !isDragOverlay && (hasSortingCaret || hasFilter);\n\n const isDragging = draggableProps && draggableProps.isDragging;\n\n const shouldShowDnD =\n hasDnD &&\n ((reduxHeader?.showDnDHandle && draggableProps && !draggableProps.active) ||\n (draggableProps && draggableProps.isDragging) ||\n isDragOverlay);\n\n const hasResize = isResizeable && column.canResize !== false && !column.columns;\n\n const shouldShowResize = hasResize && !isDragOverlay && !isDragging;\n\n // Column definition\n const hCols = ['auto'];\n if (hasRightIcons) hCols.push('min-content');\n if (shouldShowDnD) hCols.unshift('min-content');\n\n return {\n hasFilter,\n hasDnD,\n hasSortingCaret,\n hasRightIcons,\n isDragging,\n hCols,\n shouldShowDnD,\n shouldShowResize,\n };\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAoC;AACpC,iCAAoC;AAEpC,sBAAgD;AAazC,MAAM,sBAA+C,CAAC,EAAE,QAAQ,gBAAgB,MAAM,MAAM;AACjG,QAAM,yBAAqB,+BAAc,CAAC,UAAU,MAAM,kBAAkB;AAC5E,QAAM,mBAAe,+BAAc,CAAC,UAAU,MAAM,YAAY;AAChE,QAAM,mBAAe,kCAAiB,CAAC,UAAU,MAAM,YAAY;AAEnE,QAAM,EAAE,eAAe,QAAI,yBAAW,8CAAmB;AAEzD,QAAM,kBAAc,sBAAQ,MAAM,aAAa,OAAO,EAAE,GAAG,CAAC,cAAc,MAAM,CAAC;AAEjF,QAAM,YAAY,CAAC,EAAE,OAAO,UAAU,OAAO;AAE7C,QAAM,SAAS,sBAAsB,CAAC,OAAO;AAE7C,QAAM,kBAAkB,QAAQ,OAAO,OAAO;AAE9C,QAAM,gBAAgB,CAAC,kBAAkB,mBAAmB;AAE5D,QAAM,aAAa,kBAAkB,eAAe;AAEpD,QAAM,gBACJ,WACE,aAAa,iBAAiB,kBAAkB,CAAC,eAAe,UAC/D,kBAAkB,eAAe,cAClC;AAEJ,QAAM,YAAY,gBAAgB,OAAO,cAAc,SAAS,CAAC,OAAO;AAExE,QAAM,mBAAmB,aAAa,CAAC,iBAAiB,CAAC;AAGzD,QAAM,QAAQ,CAAC,MAAM;AACrB,MAAI,cAAe,OAAM,KAAK,aAAa;AAC3C,MAAI,cAAe,OAAM,QAAQ,aAAa;AAE9C,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -34,12 +34,13 @@ module.exports = __toCommonJS(useHeaderCellHandlers_exports);
|
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_react = require("react");
|
|
36
36
|
var import_useStore = require("../../configs/useStore/useStore.js");
|
|
37
|
-
const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, withTabStops = false) => ({
|
|
37
|
+
const buildNextHeader = (reduxHeader, value, hasFilter, hasDnD, hasSortingCaret, withTabStops = false) => ({
|
|
38
38
|
hideFilterMenu: true,
|
|
39
39
|
// Do this to overwrite it if it exists
|
|
40
40
|
...reduxHeader,
|
|
41
41
|
hideFilterButton: !(hasFilter && value),
|
|
42
42
|
showDnDHandle: hasDnD && value,
|
|
43
|
+
showSortCaret: hasSortingCaret,
|
|
43
44
|
withTabStops
|
|
44
45
|
});
|
|
45
46
|
const getNextSortedVisibleColumns = (visibleColumns, columnId, isSortedDesc) => {
|
|
@@ -62,7 +63,9 @@ const useHeaderCellHandlers = ({
|
|
|
62
63
|
hasDnD,
|
|
63
64
|
dragHandleRef,
|
|
64
65
|
filterIconRef,
|
|
65
|
-
|
|
66
|
+
sortRef,
|
|
67
|
+
resizeHandlerRef,
|
|
68
|
+
hasSortingCaret
|
|
66
69
|
}) => {
|
|
67
70
|
const onColumnSortChange = (0, import_useStore.usePropsStore)((state) => state.onColumnSortChange);
|
|
68
71
|
const onColumnSort = (0, import_useStore.usePropsStore)((state) => state.onColumnSort);
|
|
@@ -73,14 +76,14 @@ const useHeaderCellHandlers = ({
|
|
|
73
76
|
const reduxHeader = (0, import_react.useMemo)(() => reduxHeaders[column.id], [reduxHeaders, column]);
|
|
74
77
|
const headerRef = column.ref;
|
|
75
78
|
const onMouseEnter = (0, import_react.useCallback)(() => {
|
|
76
|
-
patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
|
|
77
|
-
}, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader]);
|
|
79
|
+
patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));
|
|
80
|
+
}, [column.id, hasDnD, hasFilter, patchHeader, reduxHeader, hasSortingCaret]);
|
|
78
81
|
const onMouseLeave = (0, import_react.useCallback)(() => {
|
|
79
82
|
if (!headerRef?.current?.contains(document.activeElement)) {
|
|
80
|
-
patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD));
|
|
83
|
+
patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));
|
|
81
84
|
}
|
|
82
85
|
}, [column.id, hasDnD, hasFilter, headerRef, patchHeader, reduxHeader]);
|
|
83
|
-
const
|
|
86
|
+
const handleSort = (0, import_react.useCallback)(() => {
|
|
84
87
|
if (column.canSort) {
|
|
85
88
|
onColumnSortChange?.({
|
|
86
89
|
column: column.id,
|
|
@@ -95,6 +98,7 @@ const useHeaderCellHandlers = ({
|
|
|
95
98
|
}, [column.canSort, column.id, column.isSortedDesc, onColumnSort, onColumnSortChange, visibleColumns]);
|
|
96
99
|
const onKeyDown = (0, import_react.useCallback)(
|
|
97
100
|
(e) => {
|
|
101
|
+
if (e.currentTarget !== e.target) return;
|
|
98
102
|
if (e.code === "ArrowDown" && column.canSort) {
|
|
99
103
|
e.preventDefault();
|
|
100
104
|
onColumnSortChange?.({
|
|
@@ -110,11 +114,12 @@ const useHeaderCellHandlers = ({
|
|
|
110
114
|
});
|
|
111
115
|
onColumnSort(getNextSortedVisibleColumns(visibleColumns, column.id, false), column.id, "ASC");
|
|
112
116
|
} else if (["Enter", "Space"].includes(e.code)) {
|
|
113
|
-
patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, true));
|
|
117
|
+
patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret, true));
|
|
114
118
|
setTimeout(() => {
|
|
115
119
|
if (dragHandleRef.current) dragHandleRef.current.focus();
|
|
116
120
|
else if (filterIconRef.current) filterIconRef.current.focus();
|
|
117
121
|
else if (resizeHandlerRef.current) resizeHandlerRef.current.focus();
|
|
122
|
+
else if (sortRef?.current) sortRef.current.focus();
|
|
118
123
|
});
|
|
119
124
|
}
|
|
120
125
|
},
|
|
@@ -128,9 +133,11 @@ const useHeaderCellHandlers = ({
|
|
|
128
133
|
reduxHeader,
|
|
129
134
|
hasFilter,
|
|
130
135
|
hasDnD,
|
|
136
|
+
hasSortingCaret,
|
|
131
137
|
dragHandleRef,
|
|
132
138
|
filterIconRef,
|
|
133
|
-
resizeHandlerRef
|
|
139
|
+
resizeHandlerRef,
|
|
140
|
+
sortRef
|
|
134
141
|
]
|
|
135
142
|
);
|
|
136
143
|
const onFocus = (0, import_react.useCallback)(
|
|
@@ -141,7 +148,7 @@ const useHeaderCellHandlers = ({
|
|
|
141
148
|
resizeHandlerRef.current
|
|
142
149
|
];
|
|
143
150
|
if (e.target === headerRef?.current) {
|
|
144
|
-
patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD));
|
|
151
|
+
patchHeader(column.id, buildNextHeader(reduxHeader, true, hasFilter, hasDnD, hasSortingCaret));
|
|
145
152
|
setFocusedRowId(null);
|
|
146
153
|
}
|
|
147
154
|
if (possibleTargets.includes(e.target)) {
|
|
@@ -163,7 +170,8 @@ const useHeaderCellHandlers = ({
|
|
|
163
170
|
patchHeader,
|
|
164
171
|
reduxHeader,
|
|
165
172
|
resizeHandlerRef,
|
|
166
|
-
setFocusedRowId
|
|
173
|
+
setFocusedRowId,
|
|
174
|
+
hasSortingCaret
|
|
167
175
|
]
|
|
168
176
|
);
|
|
169
177
|
const onBlur = (0, import_react.useCallback)(
|
|
@@ -171,10 +179,11 @@ const useHeaderCellHandlers = ({
|
|
|
171
179
|
if (e.relatedTarget === dragHandleRef.current) return;
|
|
172
180
|
if (e.relatedTarget === filterIconRef.current) return;
|
|
173
181
|
if (e.relatedTarget === resizeHandlerRef.current) return;
|
|
174
|
-
|
|
182
|
+
if (e.relatedTarget === sortRef?.current) return;
|
|
183
|
+
patchHeader(column.id, buildNextHeader(reduxHeader, false, hasFilter, hasDnD, false));
|
|
175
184
|
},
|
|
176
|
-
[dragHandleRef, filterIconRef, resizeHandlerRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD]
|
|
185
|
+
[dragHandleRef, filterIconRef, resizeHandlerRef, sortRef, patchHeader, column.id, reduxHeader, hasFilter, hasDnD]
|
|
177
186
|
);
|
|
178
|
-
return { onMouseEnter, onMouseLeave,
|
|
187
|
+
return { onMouseEnter, onMouseLeave, handleSort, onKeyDown, onBlur, onFocus };
|
|
179
188
|
};
|
|
180
189
|
//# sourceMappingURL=useHeaderCellHandlers.js.map
|
|
@@ -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-params */\nimport { useCallback, useMemo } from 'react';\nimport type { DSDataTableT } from '../../react-desc-prop-types.js';\nimport { useInternalStore, usePropsStore } from '../../configs/useStore/useStore.js';\n\ntype UseHeaderCellHandlersType = (args: {\n hasFilter: boolean;\n column: DSDataTableT.InternalColumn;\n hasDnD: boolean;\n dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n}) => {\n onMouseEnter: React.MouseEventHandler;\n onMouseLeave: React.MouseEventHandler;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
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/useStore.js';\n\ntype UseHeaderCellHandlersType = (args: {\n hasFilter: boolean;\n column: DSDataTableT.InternalColumn;\n hasDnD: boolean;\n dragHandleRef: React.MutableRefObject<HTMLDivElement | null>;\n sortRef: React.MutableRefObject<HTMLButtonElement | null>;\n filterIconRef: React.MutableRefObject<HTMLButtonElement | null>;\n resizeHandlerRef: React.MutableRefObject<HTMLInputElement | null>;\n hasSortingCaret: boolean;\n}) => {\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}) => {\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 = column.ref;\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?.current?.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 onKeyDown: React.KeyboardEventHandler = useCallback(\n (e) => {\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 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?.current) {\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
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -33,14 +33,41 @@ __export(SortByCaret_exports, {
|
|
|
33
33
|
module.exports = __toCommonJS(SortByCaret_exports);
|
|
34
34
|
var React = __toESM(require("react"));
|
|
35
35
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
36
|
-
var import_react = require("react");
|
|
36
|
+
var import_react = __toESM(require("react"));
|
|
37
37
|
var import_ds_icons = require("@elliemae/ds-icons");
|
|
38
|
+
var import_ds_button_v2 = require("@elliemae/ds-button-v2");
|
|
39
|
+
var import_constants = require("../configs/constants.js");
|
|
38
40
|
const iconColor = ["brand-primary", "800"];
|
|
39
|
-
const SortByCaret = ({ isSortedDesc }) =>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
);
|
|
41
|
+
const SortByCaret = import_react.default.memo(({ isSortedDesc, isReachable, reduxHeader, innerRef, column, onClick }) => {
|
|
42
|
+
const { showSortCaret } = (0, import_react.useMemo)(
|
|
43
|
+
() => reduxHeader || {
|
|
44
|
+
showSortCaret: false
|
|
45
|
+
},
|
|
46
|
+
[reduxHeader]
|
|
47
|
+
);
|
|
48
|
+
const icon = (0, import_react.useMemo)(() => {
|
|
49
|
+
if (isSortedDesc === void 0) {
|
|
50
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.SortNeutral, { color: iconColor });
|
|
51
|
+
}
|
|
52
|
+
if (isSortedDesc) {
|
|
53
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadDown, { size: "s", color: iconColor });
|
|
54
|
+
}
|
|
55
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.ArrowheadUp, { color: iconColor });
|
|
56
|
+
}, [isSortedDesc]);
|
|
57
|
+
if (!showSortCaret) return null;
|
|
58
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
59
|
+
import_ds_button_v2.DSButtonV2,
|
|
60
|
+
{
|
|
61
|
+
onClick,
|
|
62
|
+
tabIndex: isReachable ? 0 : -1,
|
|
63
|
+
buttonType: "icon",
|
|
64
|
+
style: { marginLeft: "4px" },
|
|
65
|
+
"aria-label": `Sort ${column.id} ${isSortedDesc ? "ascending" : "descending"}`,
|
|
66
|
+
size: "s",
|
|
67
|
+
innerRef,
|
|
68
|
+
"data-testid": import_constants.DATA_TESTID.DATA_TABLE_SORT_BUTTON,
|
|
69
|
+
children: icon
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
});
|
|
46
73
|
//# sourceMappingURL=SortByCaret.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/parts/SortByCaret.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from 'react';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport { ArrowheadDown, ArrowheadUp } from '@elliemae/ds-icons';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from 'react';\nimport type { SvgIconT } from '@elliemae/ds-icons';\nimport { ArrowheadDown, ArrowheadUp, SortNeutral } from '@elliemae/ds-icons';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\nimport type { DSDataTableT } from '../react-desc-prop-types.js';\nimport { DATA_TESTID } from '../configs/constants.js';\nconst iconColor: SvgIconT.ColorType = ['brand-primary', '800'];\n\nexport const SortByCaret: React.ComponentType<{\n isSortedDesc: boolean | undefined;\n onClick: (e: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;\n isReachable: boolean;\n column: DSDataTableT.InternalColumn;\n reduxHeader: DSDataTableT.ReduxHeader;\n innerRef: React.RefObject<HTMLButtonElement>;\n}> = React.memo(({ isSortedDesc, isReachable, reduxHeader, innerRef, column, onClick }) => {\n const { showSortCaret } = useMemo(\n () =>\n reduxHeader || {\n showSortCaret: false,\n },\n [reduxHeader],\n );\n\n const icon = useMemo(() => {\n if (isSortedDesc === undefined) {\n return <SortNeutral color={iconColor} />;\n }\n\n if (isSortedDesc) {\n return <ArrowheadDown size=\"s\" color={iconColor} />;\n }\n\n return <ArrowheadUp color={iconColor} />;\n }, [isSortedDesc]);\n\n if (!showSortCaret) return null;\n\n return (\n <DSButtonV2\n onClick={onClick}\n tabIndex={isReachable ? 0 : -1}\n buttonType=\"icon\"\n style={{ marginLeft: '4px' }}\n aria-label={`Sort ${column.id} ${isSortedDesc ? 'ascending' : 'descending'}`}\n size=\"s\"\n innerRef={innerRef}\n data-testid={DATA_TESTID.DATA_TABLE_SORT_BUTTON}\n >\n {icon}\n </DSButtonV2>\n );\n});\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD0BV;AA1Bb,mBAA+B;AAE/B,sBAAwD;AACxD,0BAA2B;AAE3B,uBAA4B;AAC5B,MAAM,YAAgC,CAAC,iBAAiB,KAAK;AAEtD,MAAM,cAOR,aAAAA,QAAM,KAAK,CAAC,EAAE,cAAc,aAAa,aAAa,UAAU,QAAQ,QAAQ,MAAM;AACzF,QAAM,EAAE,cAAc,QAAI;AAAA,IACxB,MACE,eAAe;AAAA,MACb,eAAe;AAAA,IACjB;AAAA,IACF,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,WAAO,sBAAQ,MAAM;AACzB,QAAI,iBAAiB,QAAW;AAC9B,aAAO,4CAAC,+BAAY,OAAO,WAAW;AAAA,IACxC;AAEA,QAAI,cAAc;AAChB,aAAO,4CAAC,iCAAc,MAAK,KAAI,OAAO,WAAW;AAAA,IACnD;AAEA,WAAO,4CAAC,+BAAY,OAAO,WAAW;AAAA,EACxC,GAAG,CAAC,YAAY,CAAC;AAEjB,MAAI,CAAC,cAAe,QAAO;AAE3B,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,UAAU,cAAc,IAAI;AAAA,MAC5B,YAAW;AAAA,MACX,OAAO,EAAE,YAAY,MAAM;AAAA,MAC3B,cAAY,QAAQ,OAAO,EAAE,IAAI,eAAe,cAAc,YAAY;AAAA,MAC1E,MAAK;AAAA,MACL;AAAA,MACA,eAAa,6BAAY;AAAA,MAExB;AAAA;AAAA,EACH;AAEJ,CAAC;",
|
|
6
|
+
"names": ["React"]
|
|
7
7
|
}
|