@elliemae/ds-form-combobox 3.49.0-rc.0 → 3.49.0-rc.2
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/ComboBoxCTX.js +0 -4
- package/dist/cjs/ComboBoxCTX.js.map +2 -2
- package/dist/cjs/config/useComboBox.js +19 -36
- package/dist/cjs/config/useComboBox.js.map +2 -2
- package/dist/cjs/config/useCorrectOptions.js +3 -6
- package/dist/cjs/config/useCorrectOptions.js.map +2 -2
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js +10 -14
- package/dist/cjs/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js +4 -5
- package/dist/cjs/parts/controls-input/useMaskedOnChange.js.map +2 -2
- package/dist/cjs/parts/menu-list/MenuList.js +20 -35
- package/dist/cjs/parts/menu-list/MenuList.js.map +2 -2
- package/dist/cjs/parts/menu-list/styled.js.map +2 -2
- package/dist/cjs/sharedTypes.js.map +2 -2
- package/dist/cjs/utils/listHelper.js +7 -23
- package/dist/cjs/utils/listHelper.js.map +2 -2
- package/dist/esm/ComboBoxCTX.js +0 -4
- package/dist/esm/ComboBoxCTX.js.map +2 -2
- package/dist/esm/config/useComboBox.js +20 -37
- package/dist/esm/config/useComboBox.js.map +2 -2
- package/dist/esm/config/useCorrectOptions.js +4 -7
- package/dist/esm/config/useCorrectOptions.js.map +2 -2
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js +10 -14
- package/dist/esm/parts/controls-input/useKeyboardNavigation.js.map +2 -2
- package/dist/esm/parts/controls-input/useMaskedOnChange.js +4 -5
- package/dist/esm/parts/controls-input/useMaskedOnChange.js.map +2 -2
- package/dist/esm/parts/menu-list/MenuList.js +21 -36
- package/dist/esm/parts/menu-list/MenuList.js.map +2 -2
- package/dist/esm/parts/menu-list/styled.js.map +2 -2
- package/dist/esm/sharedTypes.js.map +2 -2
- package/dist/esm/utils/listHelper.js +7 -23
- package/dist/esm/utils/listHelper.js.map +2 -2
- package/dist/types/config/useCorrectOptions.d.ts +1 -1
- package/dist/types/parts/menu-list/styled.d.ts +0 -1
- package/dist/types/sharedTypes.d.ts +0 -4
- package/dist/types/utils/listHelper.d.ts +0 -1
- package/package.json +14 -14
- package/dist/cjs/parts/header-list/HeaderList.js +0 -104
- package/dist/cjs/parts/header-list/HeaderList.js.map +0 -7
- package/dist/cjs/parts/header-list/index.js +0 -36
- package/dist/cjs/parts/header-list/index.js.map +0 -7
- package/dist/cjs/parts/header-list/styled.js +0 -85
- package/dist/cjs/parts/header-list/styled.js.map +0 -7
- package/dist/cjs/parts/header-list/useHeaderListHandlers.js +0 -140
- package/dist/cjs/parts/header-list/useHeaderListHandlers.js.map +0 -7
- package/dist/esm/parts/header-list/HeaderList.js +0 -80
- package/dist/esm/parts/header-list/HeaderList.js.map +0 -7
- package/dist/esm/parts/header-list/index.js +0 -6
- package/dist/esm/parts/header-list/index.js.map +0 -7
- package/dist/esm/parts/header-list/styled.js +0 -55
- package/dist/esm/parts/header-list/styled.js.map +0 -7
- package/dist/esm/parts/header-list/useHeaderListHandlers.js +0 -110
- package/dist/esm/parts/header-list/useHeaderListHandlers.js.map +0 -7
- package/dist/types/parts/header-list/HeaderList.d.ts +0 -1
- package/dist/types/parts/header-list/index.d.ts +0 -1
- package/dist/types/parts/header-list/styled.d.ts +0 -6
- package/dist/types/parts/header-list/useHeaderListHandlers.d.ts +0 -11
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
|
-
var __defProp = Object.defineProperty;
|
|
4
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
-
var __export = (target, all) => {
|
|
9
|
-
for (var name in all)
|
|
10
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
-
};
|
|
12
|
-
var __copyProps = (to, from, except, desc) => {
|
|
13
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var useHeaderListHandlers_exports = {};
|
|
30
|
-
__export(useHeaderListHandlers_exports, {
|
|
31
|
-
useHeaderListHandlers: () => useHeaderListHandlers
|
|
32
|
-
});
|
|
33
|
-
module.exports = __toCommonJS(useHeaderListHandlers_exports);
|
|
34
|
-
var React = __toESM(require("react"));
|
|
35
|
-
var import_react = require("react");
|
|
36
|
-
var import_listHelper = require("../../utils/listHelper.js");
|
|
37
|
-
var import_ComboBoxCTX = __toESM(require("../../ComboBoxCTX.js"));
|
|
38
|
-
const useHeaderListHandlers = () => {
|
|
39
|
-
const {
|
|
40
|
-
props: { selectedValues, onSelectAll },
|
|
41
|
-
showSelectedOptions,
|
|
42
|
-
internalRef,
|
|
43
|
-
setShowSelectedOptions,
|
|
44
|
-
setMenuState,
|
|
45
|
-
correctOptions: filteredOptions
|
|
46
|
-
} = (0, import_react.useContext)(import_ComboBoxCTX.default);
|
|
47
|
-
const multiSelectedValues = selectedValues;
|
|
48
|
-
const selectableOptions = (0, import_listHelper.getSelectableOptions)(filteredOptions);
|
|
49
|
-
const getCheckboxStatus = (0, import_react.useMemo)(() => {
|
|
50
|
-
if (multiSelectedValues.length === selectableOptions.length) {
|
|
51
|
-
return true;
|
|
52
|
-
}
|
|
53
|
-
if (multiSelectedValues?.length === 0) {
|
|
54
|
-
return false;
|
|
55
|
-
}
|
|
56
|
-
return "mixed";
|
|
57
|
-
}, [multiSelectedValues.length, selectableOptions.length]);
|
|
58
|
-
const [checkboxStatus, setCheckboxStatus] = (0, import_react.useState)(false);
|
|
59
|
-
(0, import_react.useEffect)(() => {
|
|
60
|
-
setCheckboxStatus(getCheckboxStatus);
|
|
61
|
-
}, [getCheckboxStatus, multiSelectedValues]);
|
|
62
|
-
const handleOnMouseDown = (0, import_react.useCallback)((e) => {
|
|
63
|
-
e.preventDefault();
|
|
64
|
-
}, []);
|
|
65
|
-
const handleSelectAllCheckboxChange = (0, import_react.useCallback)(
|
|
66
|
-
(e) => {
|
|
67
|
-
if ((!checkboxStatus || checkboxStatus === "mixed") && onSelectAll) {
|
|
68
|
-
onSelectAll(
|
|
69
|
-
filteredOptions.filter((option) => option.type === "option" && !option.disabled),
|
|
70
|
-
e
|
|
71
|
-
);
|
|
72
|
-
setCheckboxStatus(true);
|
|
73
|
-
} else if (onSelectAll) {
|
|
74
|
-
onSelectAll([], e);
|
|
75
|
-
setCheckboxStatus(false);
|
|
76
|
-
}
|
|
77
|
-
},
|
|
78
|
-
[checkboxStatus, onSelectAll, filteredOptions]
|
|
79
|
-
);
|
|
80
|
-
const handleToggleSelectedValuesFilter = (0, import_react.useCallback)(
|
|
81
|
-
(e) => {
|
|
82
|
-
e.preventDefault();
|
|
83
|
-
setShowSelectedOptions(!showSelectedOptions);
|
|
84
|
-
},
|
|
85
|
-
[setShowSelectedOptions, showSelectedOptions]
|
|
86
|
-
);
|
|
87
|
-
const handleKeyDown = (0, import_react.useCallback)(
|
|
88
|
-
(e) => {
|
|
89
|
-
if (e.key === "Escape") {
|
|
90
|
-
setMenuState(false, "close", e);
|
|
91
|
-
internalRef.current?.focus();
|
|
92
|
-
}
|
|
93
|
-
},
|
|
94
|
-
[setMenuState, internalRef]
|
|
95
|
-
);
|
|
96
|
-
const handleFilterSelectionBtnOnTab = (0, import_react.useCallback)(
|
|
97
|
-
(e) => {
|
|
98
|
-
if (e.key === "Tab" && !e.shiftKey) {
|
|
99
|
-
e.preventDefault();
|
|
100
|
-
internalRef.current?.focus();
|
|
101
|
-
}
|
|
102
|
-
},
|
|
103
|
-
[internalRef]
|
|
104
|
-
);
|
|
105
|
-
const handleCheckAllOnTab = (0, import_react.useCallback)(
|
|
106
|
-
(e) => {
|
|
107
|
-
if (e.key === "Tab" && !e.shiftKey && multiSelectedValues.length === 0) {
|
|
108
|
-
e.preventDefault();
|
|
109
|
-
internalRef.current?.focus();
|
|
110
|
-
}
|
|
111
|
-
},
|
|
112
|
-
[internalRef, multiSelectedValues]
|
|
113
|
-
);
|
|
114
|
-
(0, import_react.useEffect)(() => {
|
|
115
|
-
if (multiSelectedValues.length === 0) {
|
|
116
|
-
setShowSelectedOptions(false);
|
|
117
|
-
}
|
|
118
|
-
}, [multiSelectedValues, setShowSelectedOptions]);
|
|
119
|
-
return (0, import_react.useMemo)(
|
|
120
|
-
() => ({
|
|
121
|
-
handleKeyDown,
|
|
122
|
-
handleToggleSelectedValuesFilter,
|
|
123
|
-
handleFilterSelectionBtnOnTab,
|
|
124
|
-
handleOnMouseDown,
|
|
125
|
-
handleCheckAllOnTab,
|
|
126
|
-
handleSelectAllCheckboxChange,
|
|
127
|
-
checkboxStatus
|
|
128
|
-
}),
|
|
129
|
-
[
|
|
130
|
-
handleKeyDown,
|
|
131
|
-
handleFilterSelectionBtnOnTab,
|
|
132
|
-
handleToggleSelectedValuesFilter,
|
|
133
|
-
handleOnMouseDown,
|
|
134
|
-
handleCheckAllOnTab,
|
|
135
|
-
handleSelectAllCheckboxChange,
|
|
136
|
-
checkboxStatus
|
|
137
|
-
]
|
|
138
|
-
);
|
|
139
|
-
};
|
|
140
|
-
//# sourceMappingURL=useHeaderListHandlers.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../src/parts/header-list/useHeaderListHandlers.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import type React from 'react';\nimport { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSelectableOptions } from '../../utils/listHelper.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nconst useHeaderListHandlers = () => {\n const {\n props: { selectedValues, onSelectAll },\n showSelectedOptions,\n internalRef,\n setShowSelectedOptions,\n setMenuState,\n correctOptions: filteredOptions,\n } = useContext(ComboBoxContext);\n\n const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n const selectableOptions = getSelectableOptions(filteredOptions);\n\n const getCheckboxStatus = useMemo(() => {\n if (multiSelectedValues.length === selectableOptions.length) {\n return true;\n }\n if (multiSelectedValues?.length === 0) {\n return false;\n }\n return 'mixed';\n }, [multiSelectedValues.length, selectableOptions.length]);\n\n const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n useEffect(() => {\n setCheckboxStatus(getCheckboxStatus);\n }, [getCheckboxStatus, multiSelectedValues]);\n\n const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n // this prevent the input control to lose focus\n }, []);\n\n const handleSelectAllCheckboxChange = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n onSelectAll(\n filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n e,\n );\n setCheckboxStatus(true);\n } else if (onSelectAll) {\n onSelectAll([], e);\n setCheckboxStatus(false);\n }\n },\n [checkboxStatus, onSelectAll, filteredOptions],\n );\n\n const handleToggleSelectedValuesFilter: (\n e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,\n ) => void = useCallback(\n (e) => {\n e.preventDefault();\n setShowSelectedOptions(!showSelectedOptions);\n },\n [setShowSelectedOptions, showSelectedOptions],\n );\n\n // when pressing escape on each header list button we close the menu\n // and set focus on input\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setMenuState(false, 'close', e);\n internalRef.current?.focus();\n }\n },\n [setMenuState, internalRef],\n );\n\n // when hitting tab on selected values button filter we target the input again\n const handleFilterSelectionBtnOnTab = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey) {\n e.preventDefault();\n internalRef.current?.focus();\n }\n },\n [internalRef],\n );\n\n const handleCheckAllOnTab = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n e.preventDefault();\n internalRef.current?.focus();\n }\n },\n [internalRef, multiSelectedValues],\n );\n\n useEffect(() => {\n // toggle off selected values filter when removing all of them\n if (multiSelectedValues.length === 0) {\n setShowSelectedOptions(false);\n }\n }, [multiSelectedValues, setShowSelectedOptions]);\n\n return useMemo(\n () => ({\n handleKeyDown,\n handleToggleSelectedValuesFilter,\n handleFilterSelectionBtnOnTab,\n handleOnMouseDown,\n handleCheckAllOnTab,\n handleSelectAllCheckboxChange,\n checkboxStatus,\n }),\n [\n handleKeyDown,\n handleFilterSelectionBtnOnTab,\n handleToggleSelectedValuesFilter,\n handleOnMouseDown,\n handleCheckAllOnTab,\n handleSelectAllCheckboxChange,\n checkboxStatus,\n ],\n );\n};\n\nexport { useHeaderListHandlers };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,mBAAsE;AAEtE,wBAAqC;AACrC,yBAA4B;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,QAAI,yBAAW,mBAAAA,OAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,wBAAoB,wCAAqB,eAAe;AAE9D,QAAM,wBAAoB,sBAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,QAAI,uBAA4B,KAAK;AAE7E,8BAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,wBAAoB,0BAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,uCAEM;AAAA,IACV,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,oBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAGA,QAAM,oCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,0BAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,mBAAmB;AAAA,EACnC;AAEA,8BAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,aAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
|
-
"names": ["ComboBoxContext"]
|
|
7
|
-
}
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { useContext } from "react";
|
|
4
|
-
import { BUTTON_SIZES, BUTTON_TYPES } from "@elliemae/ds-button-v2";
|
|
5
|
-
import { DSControlledCheckbox } from "@elliemae/ds-form-checkbox";
|
|
6
|
-
import { SimpleTruncatedTooltipText } from "@elliemae/ds-truncated-tooltip-text";
|
|
7
|
-
import { ComboBoxContext } from "../../ComboBoxCTX.js";
|
|
8
|
-
import {
|
|
9
|
-
StyledHeaderListWrapper,
|
|
10
|
-
StyledButtonSelection,
|
|
11
|
-
StyledSelectedItems,
|
|
12
|
-
StyledSelectAllCheckbox,
|
|
13
|
-
StyledNoOptionsSelected
|
|
14
|
-
} from "./styled.js";
|
|
15
|
-
import { ComboboxDataTestid } from "../../ComboboxDataTestids.js";
|
|
16
|
-
import { useHeaderListHandlers } from "./useHeaderListHandlers.js";
|
|
17
|
-
const HeaderList = () => {
|
|
18
|
-
const {
|
|
19
|
-
props: { selectedValues, onSelectAll },
|
|
20
|
-
showSelectedOptions,
|
|
21
|
-
selectAllCheckboxRef,
|
|
22
|
-
toggleSelectionButtonRef,
|
|
23
|
-
correctOptions: filteredOptions
|
|
24
|
-
} = useContext(ComboBoxContext);
|
|
25
|
-
const multiSelectedValues = selectedValues;
|
|
26
|
-
const {
|
|
27
|
-
handleKeyDown,
|
|
28
|
-
handleOnMouseDown,
|
|
29
|
-
handleFilterSelectionBtnOnTab,
|
|
30
|
-
handleToggleSelectedValuesFilter,
|
|
31
|
-
handleCheckAllOnTab,
|
|
32
|
-
checkboxStatus,
|
|
33
|
-
handleSelectAllCheckboxChange
|
|
34
|
-
} = useHeaderListHandlers();
|
|
35
|
-
return /* @__PURE__ */ jsxs(
|
|
36
|
-
StyledHeaderListWrapper,
|
|
37
|
-
{
|
|
38
|
-
onKeyDown: handleKeyDown,
|
|
39
|
-
onMouseDown: handleOnMouseDown,
|
|
40
|
-
"data-testid": ComboboxDataTestid.MULTISELECT.HEADER_LIST,
|
|
41
|
-
children: [
|
|
42
|
-
/* @__PURE__ */ jsx(StyledSelectAllCheckbox, { children: onSelectAll && /* @__PURE__ */ jsx(
|
|
43
|
-
DSControlledCheckbox,
|
|
44
|
-
{
|
|
45
|
-
checked: checkboxStatus,
|
|
46
|
-
"aria-controls": filteredOptions.map((item) => item.dsId).join(" "),
|
|
47
|
-
name: "select-all-checkbox",
|
|
48
|
-
"aria-label": "Select/Unselect All Items",
|
|
49
|
-
"aria-labelledby": "",
|
|
50
|
-
id: "select-all-checkbox",
|
|
51
|
-
onChange: handleSelectAllCheckboxChange,
|
|
52
|
-
onKeyDown: handleCheckAllOnTab,
|
|
53
|
-
innerRef: selectAllCheckboxRef
|
|
54
|
-
}
|
|
55
|
-
) }),
|
|
56
|
-
/* @__PURE__ */ jsx(StyledSelectedItems, { children: multiSelectedValues.length > 0 ? /* @__PURE__ */ jsx(
|
|
57
|
-
StyledButtonSelection,
|
|
58
|
-
{
|
|
59
|
-
onKeyDown: handleFilterSelectionBtnOnTab,
|
|
60
|
-
buttonType: BUTTON_TYPES.TEXT,
|
|
61
|
-
onClick: handleToggleSelectedValuesFilter,
|
|
62
|
-
size: BUTTON_SIZES.S,
|
|
63
|
-
"data-testid": ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE,
|
|
64
|
-
innerRef: toggleSelectionButtonRef,
|
|
65
|
-
children: /* @__PURE__ */ jsx(
|
|
66
|
-
SimpleTruncatedTooltipText,
|
|
67
|
-
{
|
|
68
|
-
value: !showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : "SHOW ALL"
|
|
69
|
-
}
|
|
70
|
-
)
|
|
71
|
-
}
|
|
72
|
-
) : /* @__PURE__ */ jsx(StyledNoOptionsSelected, { children: "0 SELECTED" }) })
|
|
73
|
-
]
|
|
74
|
-
}
|
|
75
|
-
);
|
|
76
|
-
};
|
|
77
|
-
export {
|
|
78
|
-
HeaderList
|
|
79
|
-
};
|
|
80
|
-
//# sourceMappingURL=HeaderList.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/HeaderList.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\n/* eslint-disable max-lines */\n/* eslint-disable jsx-a11y/click-events-have-key-events */\nimport React, { useContext } from 'react';\nimport { BUTTON_SIZES, BUTTON_TYPES } from '@elliemae/ds-button-v2';\nimport { DSControlledCheckbox } from '@elliemae/ds-form-checkbox';\nimport { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';\nimport { ComboBoxContext } from '../../ComboBoxCTX.js';\nimport {\n StyledHeaderListWrapper,\n StyledButtonSelection,\n StyledSelectedItems,\n StyledSelectAllCheckbox,\n StyledNoOptionsSelected,\n} from './styled.js';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { ComboboxDataTestid } from '../../ComboboxDataTestids.js';\nimport { useHeaderListHandlers } from './useHeaderListHandlers.js';\nexport const HeaderList = (): JSX.Element => {\n const {\n props: { selectedValues, onSelectAll },\n showSelectedOptions,\n selectAllCheckboxRef,\n toggleSelectionButtonRef,\n correctOptions: filteredOptions,\n } = useContext(ComboBoxContext);\n\n const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n const {\n handleKeyDown,\n handleOnMouseDown,\n handleFilterSelectionBtnOnTab,\n handleToggleSelectedValuesFilter,\n handleCheckAllOnTab,\n checkboxStatus,\n handleSelectAllCheckboxChange,\n } = useHeaderListHandlers();\n\n return (\n <StyledHeaderListWrapper\n onKeyDown={handleKeyDown}\n onMouseDown={handleOnMouseDown}\n data-testid={ComboboxDataTestid.MULTISELECT.HEADER_LIST}\n >\n <StyledSelectAllCheckbox>\n {onSelectAll && (\n <DSControlledCheckbox\n checked={checkboxStatus}\n aria-controls={filteredOptions.map((item) => item.dsId).join(' ')}\n name=\"select-all-checkbox\"\n aria-label=\"Select/Unselect All Items\"\n aria-labelledby=\"\"\n id=\"select-all-checkbox\"\n onChange={handleSelectAllCheckboxChange}\n onKeyDown={handleCheckAllOnTab}\n innerRef={selectAllCheckboxRef}\n />\n )}\n </StyledSelectAllCheckbox>\n <StyledSelectedItems>\n {multiSelectedValues.length > 0 ? (\n <StyledButtonSelection\n onKeyDown={handleFilterSelectionBtnOnTab}\n buttonType={BUTTON_TYPES.TEXT}\n onClick={handleToggleSelectedValuesFilter}\n size={BUTTON_SIZES.S}\n data-testid={ComboboxDataTestid.MULTISELECT.SHOW_SELECTED_OPTIONS_TOGGLE}\n innerRef={toggleSelectionButtonRef}\n >\n <SimpleTruncatedTooltipText\n value={!showSelectedOptions ? `SHOW SELECTED [${multiSelectedValues.length}]` : 'SHOW ALL'}\n ></SimpleTruncatedTooltipText>\n </StyledButtonSelection>\n ) : (\n <StyledNoOptionsSelected>0 SELECTED</StyledNoOptionsSelected>\n )}\n </StyledSelectedItems>\n </StyledHeaderListWrapper>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACuCnB,SAOM,KAPN;AApCJ,SAAgB,kBAAkB;AAClC,SAAS,cAAc,oBAAoB;AAC3C,SAAS,4BAA4B;AACrC,SAAS,kCAAkC;AAC3C,SAAS,uBAAuB;AAChC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,0BAA0B;AACnC,SAAS,6BAA6B;AAC/B,MAAM,aAAa,MAAmB;AAC3C,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,sBAAsB;AAE1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,aAAa;AAAA,MACb,eAAa,mBAAmB,YAAY;AAAA,MAE5C;AAAA,4BAAC,2BACE,yBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAS;AAAA,YACT,iBAAe,gBAAgB,IAAI,CAAC,SAAS,KAAK,IAAI,EAAE,KAAK,GAAG;AAAA,YAChE,MAAK;AAAA,YACL,cAAW;AAAA,YACX,mBAAgB;AAAA,YAChB,IAAG;AAAA,YACH,UAAU;AAAA,YACV,WAAW;AAAA,YACX,UAAU;AAAA;AAAA,QACZ,GAEJ;AAAA,QACA,oBAAC,uBACE,8BAAoB,SAAS,IAC5B;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,YACX,YAAY,aAAa;AAAA,YACzB,SAAS;AAAA,YACT,MAAM,aAAa;AAAA,YACnB,eAAa,mBAAmB,YAAY;AAAA,YAC5C,UAAU;AAAA,YAEV;AAAA,cAAC;AAAA;AAAA,gBACC,OAAO,CAAC,sBAAsB,kBAAkB,oBAAoB,MAAM,MAAM;AAAA;AAAA,YACjF;AAAA;AAAA,QACH,IAEA,oBAAC,2BAAwB,wBAAU,GAEvC;AAAA;AAAA;AAAA,EACF;AAEJ;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/index.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { HeaderList } from './HeaderList.js';\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { styled, th } from "@elliemae/ds-system";
|
|
3
|
-
import { DSButtonV2 } from "@elliemae/ds-button-v2";
|
|
4
|
-
const StyledHeaderListWrapper = styled.div`
|
|
5
|
-
display: flex;
|
|
6
|
-
position: sticky;
|
|
7
|
-
top: 0;
|
|
8
|
-
z-index: 10;
|
|
9
|
-
justify-content: space-between;
|
|
10
|
-
width: inherit;
|
|
11
|
-
padding: 5px 12px 5px 16px;
|
|
12
|
-
@media (max-width: ${th.breakpoint("small")}) {
|
|
13
|
-
padding: 3.25px 12px 3.25px 16px;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
background-color: #fff;
|
|
17
|
-
box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};
|
|
18
|
-
overflow-x: hidden;
|
|
19
|
-
|
|
20
|
-
& button {
|
|
21
|
-
font-size: 1rem;
|
|
22
|
-
}
|
|
23
|
-
`;
|
|
24
|
-
const StyledButtonSelection = styled(DSButtonV2)`
|
|
25
|
-
border-radius: 0px;
|
|
26
|
-
padding: 0 ${(props) => props.theme.space.xxs};
|
|
27
|
-
margin: 0;
|
|
28
|
-
font-size: 1rem;
|
|
29
|
-
align-items: center;
|
|
30
|
-
transition: unset;
|
|
31
|
-
&:hover:not([disabled]) {
|
|
32
|
-
background-color: transparent;
|
|
33
|
-
color: ${(props) => props.theme.colors.brand["700"]};
|
|
34
|
-
}
|
|
35
|
-
`;
|
|
36
|
-
const StyledSelectedItems = styled.div`
|
|
37
|
-
display: flex;
|
|
38
|
-
align-items: center;
|
|
39
|
-
`;
|
|
40
|
-
const StyledNoOptionsSelected = styled.div`
|
|
41
|
-
padding: 0 ${(props) => props.theme.space.xxs};
|
|
42
|
-
font-size: 1rem;
|
|
43
|
-
`;
|
|
44
|
-
const StyledSelectAllCheckbox = styled.div`
|
|
45
|
-
display: flex;
|
|
46
|
-
align-items: center;
|
|
47
|
-
`;
|
|
48
|
-
export {
|
|
49
|
-
StyledButtonSelection,
|
|
50
|
-
StyledHeaderListWrapper,
|
|
51
|
-
StyledNoOptionsSelected,
|
|
52
|
-
StyledSelectAllCheckbox,
|
|
53
|
-
StyledSelectedItems
|
|
54
|
-
};
|
|
55
|
-
//# sourceMappingURL=styled.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-len */\nimport { styled, th } from '@elliemae/ds-system';\nimport { DSButtonV2 } from '@elliemae/ds-button-v2';\n\nexport const StyledHeaderListWrapper = styled.div`\n display: flex;\n position: sticky;\n top: 0;\n z-index: 10;\n justify-content: space-between;\n width: inherit;\n padding: 5px 12px 5px 16px;\n @media (max-width: ${th.breakpoint('small')}) {\n padding: 3.25px 12px 3.25px 16px;\n }\n\n background-color: #fff;\n box-shadow: 0 4px 2px -4px ${(props) => props.theme.colors.neutral[700]};\n overflow-x: hidden;\n\n & button {\n font-size: 1rem;\n }\n`;\n\nexport const StyledButtonSelection = styled(DSButtonV2)`\n border-radius: 0px;\n padding: 0 ${(props) => props.theme.space.xxs};\n margin: 0;\n font-size: 1rem;\n align-items: center;\n transition: unset;\n &:hover:not([disabled]) {\n background-color: transparent;\n color: ${(props) => props.theme.colors.brand['700']};\n }\n`;\n\nexport const StyledSelectedItems = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const StyledNoOptionsSelected = styled.div`\n padding: 0 ${(props) => props.theme.space.xxs};\n font-size: 1rem;\n`;\n\nexport const StyledSelectAllCheckbox = styled.div`\n display: flex;\n align-items: center;\n`;\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,UAAU;AAC3B,SAAS,kBAAkB;AAEpB,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAQvB,GAAG,WAAW,OAAO,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,+BAKd,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQlE,MAAM,wBAAwB,OAAO,UAAU;AAAA;AAAA,eAEvC,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOlC,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,KAAK,CAAC;AAAA;AAAA;AAIhD,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAKnC,MAAM,0BAA0B,OAAO;AAAA,eAC/B,CAAC,UAAU,MAAM,MAAM,MAAM,GAAG;AAAA;AAAA;AAIxC,MAAM,0BAA0B,OAAO;AAAA;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1,110 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useState, useMemo, useEffect, useContext, useCallback } from "react";
|
|
3
|
-
import { getSelectableOptions } from "../../utils/listHelper.js";
|
|
4
|
-
import ComboBoxContext from "../../ComboBoxCTX.js";
|
|
5
|
-
const useHeaderListHandlers = () => {
|
|
6
|
-
const {
|
|
7
|
-
props: { selectedValues, onSelectAll },
|
|
8
|
-
showSelectedOptions,
|
|
9
|
-
internalRef,
|
|
10
|
-
setShowSelectedOptions,
|
|
11
|
-
setMenuState,
|
|
12
|
-
correctOptions: filteredOptions
|
|
13
|
-
} = useContext(ComboBoxContext);
|
|
14
|
-
const multiSelectedValues = selectedValues;
|
|
15
|
-
const selectableOptions = getSelectableOptions(filteredOptions);
|
|
16
|
-
const getCheckboxStatus = useMemo(() => {
|
|
17
|
-
if (multiSelectedValues.length === selectableOptions.length) {
|
|
18
|
-
return true;
|
|
19
|
-
}
|
|
20
|
-
if (multiSelectedValues?.length === 0) {
|
|
21
|
-
return false;
|
|
22
|
-
}
|
|
23
|
-
return "mixed";
|
|
24
|
-
}, [multiSelectedValues.length, selectableOptions.length]);
|
|
25
|
-
const [checkboxStatus, setCheckboxStatus] = useState(false);
|
|
26
|
-
useEffect(() => {
|
|
27
|
-
setCheckboxStatus(getCheckboxStatus);
|
|
28
|
-
}, [getCheckboxStatus, multiSelectedValues]);
|
|
29
|
-
const handleOnMouseDown = useCallback((e) => {
|
|
30
|
-
e.preventDefault();
|
|
31
|
-
}, []);
|
|
32
|
-
const handleSelectAllCheckboxChange = useCallback(
|
|
33
|
-
(e) => {
|
|
34
|
-
if ((!checkboxStatus || checkboxStatus === "mixed") && onSelectAll) {
|
|
35
|
-
onSelectAll(
|
|
36
|
-
filteredOptions.filter((option) => option.type === "option" && !option.disabled),
|
|
37
|
-
e
|
|
38
|
-
);
|
|
39
|
-
setCheckboxStatus(true);
|
|
40
|
-
} else if (onSelectAll) {
|
|
41
|
-
onSelectAll([], e);
|
|
42
|
-
setCheckboxStatus(false);
|
|
43
|
-
}
|
|
44
|
-
},
|
|
45
|
-
[checkboxStatus, onSelectAll, filteredOptions]
|
|
46
|
-
);
|
|
47
|
-
const handleToggleSelectedValuesFilter = useCallback(
|
|
48
|
-
(e) => {
|
|
49
|
-
e.preventDefault();
|
|
50
|
-
setShowSelectedOptions(!showSelectedOptions);
|
|
51
|
-
},
|
|
52
|
-
[setShowSelectedOptions, showSelectedOptions]
|
|
53
|
-
);
|
|
54
|
-
const handleKeyDown = useCallback(
|
|
55
|
-
(e) => {
|
|
56
|
-
if (e.key === "Escape") {
|
|
57
|
-
setMenuState(false, "close", e);
|
|
58
|
-
internalRef.current?.focus();
|
|
59
|
-
}
|
|
60
|
-
},
|
|
61
|
-
[setMenuState, internalRef]
|
|
62
|
-
);
|
|
63
|
-
const handleFilterSelectionBtnOnTab = useCallback(
|
|
64
|
-
(e) => {
|
|
65
|
-
if (e.key === "Tab" && !e.shiftKey) {
|
|
66
|
-
e.preventDefault();
|
|
67
|
-
internalRef.current?.focus();
|
|
68
|
-
}
|
|
69
|
-
},
|
|
70
|
-
[internalRef]
|
|
71
|
-
);
|
|
72
|
-
const handleCheckAllOnTab = useCallback(
|
|
73
|
-
(e) => {
|
|
74
|
-
if (e.key === "Tab" && !e.shiftKey && multiSelectedValues.length === 0) {
|
|
75
|
-
e.preventDefault();
|
|
76
|
-
internalRef.current?.focus();
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
[internalRef, multiSelectedValues]
|
|
80
|
-
);
|
|
81
|
-
useEffect(() => {
|
|
82
|
-
if (multiSelectedValues.length === 0) {
|
|
83
|
-
setShowSelectedOptions(false);
|
|
84
|
-
}
|
|
85
|
-
}, [multiSelectedValues, setShowSelectedOptions]);
|
|
86
|
-
return useMemo(
|
|
87
|
-
() => ({
|
|
88
|
-
handleKeyDown,
|
|
89
|
-
handleToggleSelectedValuesFilter,
|
|
90
|
-
handleFilterSelectionBtnOnTab,
|
|
91
|
-
handleOnMouseDown,
|
|
92
|
-
handleCheckAllOnTab,
|
|
93
|
-
handleSelectAllCheckboxChange,
|
|
94
|
-
checkboxStatus
|
|
95
|
-
}),
|
|
96
|
-
[
|
|
97
|
-
handleKeyDown,
|
|
98
|
-
handleFilterSelectionBtnOnTab,
|
|
99
|
-
handleToggleSelectedValuesFilter,
|
|
100
|
-
handleOnMouseDown,
|
|
101
|
-
handleCheckAllOnTab,
|
|
102
|
-
handleSelectAllCheckboxChange,
|
|
103
|
-
checkboxStatus
|
|
104
|
-
]
|
|
105
|
-
);
|
|
106
|
-
};
|
|
107
|
-
export {
|
|
108
|
-
useHeaderListHandlers
|
|
109
|
-
};
|
|
110
|
-
//# sourceMappingURL=useHeaderListHandlers.js.map
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/header-list/useHeaderListHandlers.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useState, useMemo, useEffect, useContext, useCallback } from 'react';\nimport type { DSComboboxT } from '../../react-desc-prop-types.js';\nimport { getSelectableOptions } from '../../utils/listHelper.js';\nimport ComboBoxContext from '../../ComboBoxCTX.js';\n\nconst useHeaderListHandlers = () => {\n const {\n props: { selectedValues, onSelectAll },\n showSelectedOptions,\n internalRef,\n setShowSelectedOptions,\n setMenuState,\n correctOptions: filteredOptions,\n } = useContext(ComboBoxContext);\n\n const multiSelectedValues = selectedValues as DSComboboxT.ItemOption[];\n const selectableOptions = getSelectableOptions(filteredOptions);\n\n const getCheckboxStatus = useMemo(() => {\n if (multiSelectedValues.length === selectableOptions.length) {\n return true;\n }\n if (multiSelectedValues?.length === 0) {\n return false;\n }\n return 'mixed';\n }, [multiSelectedValues.length, selectableOptions.length]);\n\n const [checkboxStatus, setCheckboxStatus] = useState<'mixed' | boolean>(false);\n\n useEffect(() => {\n setCheckboxStatus(getCheckboxStatus);\n }, [getCheckboxStatus, multiSelectedValues]);\n\n const handleOnMouseDown = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n // this prevent the input control to lose focus\n }, []);\n\n const handleSelectAllCheckboxChange = useCallback(\n (e: React.MouseEvent | React.KeyboardEvent) => {\n if ((!checkboxStatus || checkboxStatus === 'mixed') && onSelectAll) {\n onSelectAll(\n filteredOptions.filter((option) => option.type === 'option' && !option.disabled),\n e,\n );\n setCheckboxStatus(true);\n } else if (onSelectAll) {\n onSelectAll([], e);\n setCheckboxStatus(false);\n }\n },\n [checkboxStatus, onSelectAll, filteredOptions],\n );\n\n const handleToggleSelectedValuesFilter: (\n e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>,\n ) => void = useCallback(\n (e) => {\n e.preventDefault();\n setShowSelectedOptions(!showSelectedOptions);\n },\n [setShowSelectedOptions, showSelectedOptions],\n );\n\n // when pressing escape on each header list button we close the menu\n // and set focus on input\n const handleKeyDown = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Escape') {\n setMenuState(false, 'close', e);\n internalRef.current?.focus();\n }\n },\n [setMenuState, internalRef],\n );\n\n // when hitting tab on selected values button filter we target the input again\n const handleFilterSelectionBtnOnTab = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey) {\n e.preventDefault();\n internalRef.current?.focus();\n }\n },\n [internalRef],\n );\n\n const handleCheckAllOnTab = useCallback(\n (e: React.KeyboardEvent) => {\n if (e.key === 'Tab' && !e.shiftKey && multiSelectedValues.length === 0) {\n e.preventDefault();\n internalRef.current?.focus();\n }\n },\n [internalRef, multiSelectedValues],\n );\n\n useEffect(() => {\n // toggle off selected values filter when removing all of them\n if (multiSelectedValues.length === 0) {\n setShowSelectedOptions(false);\n }\n }, [multiSelectedValues, setShowSelectedOptions]);\n\n return useMemo(\n () => ({\n handleKeyDown,\n handleToggleSelectedValuesFilter,\n handleFilterSelectionBtnOnTab,\n handleOnMouseDown,\n handleCheckAllOnTab,\n handleSelectAllCheckboxChange,\n checkboxStatus,\n }),\n [\n handleKeyDown,\n handleFilterSelectionBtnOnTab,\n handleToggleSelectedValuesFilter,\n handleOnMouseDown,\n handleCheckAllOnTab,\n handleSelectAllCheckboxChange,\n checkboxStatus,\n ],\n );\n};\n\nexport { useHeaderListHandlers };\n"],
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,UAAU,SAAS,WAAW,YAAY,mBAAmB;AAEtE,SAAS,4BAA4B;AACrC,OAAO,qBAAqB;AAE5B,MAAM,wBAAwB,MAAM;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE,gBAAgB,YAAY;AAAA,IACrC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,EAClB,IAAI,WAAW,eAAe;AAE9B,QAAM,sBAAsB;AAC5B,QAAM,oBAAoB,qBAAqB,eAAe;AAE9D,QAAM,oBAAoB,QAAQ,MAAM;AACtC,QAAI,oBAAoB,WAAW,kBAAkB,QAAQ;AAC3D,aAAO;AAAA,IACT;AACA,QAAI,qBAAqB,WAAW,GAAG;AACrC,aAAO;AAAA,IACT;AACA,WAAO;AAAA,EACT,GAAG,CAAC,oBAAoB,QAAQ,kBAAkB,MAAM,CAAC;AAEzD,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,SAA4B,KAAK;AAE7E,YAAU,MAAM;AACd,sBAAkB,iBAAiB;AAAA,EACrC,GAAG,CAAC,mBAAmB,mBAAmB,CAAC;AAE3C,QAAM,oBAAoB,YAAY,CAAC,MAAwB;AAC7D,MAAE,eAAe;AAAA,EAEnB,GAAG,CAAC,CAAC;AAEL,QAAM,gCAAgC;AAAA,IACpC,CAAC,MAA8C;AAC7C,WAAK,CAAC,kBAAkB,mBAAmB,YAAY,aAAa;AAClE;AAAA,UACE,gBAAgB,OAAO,CAAC,WAAW,OAAO,SAAS,YAAY,CAAC,OAAO,QAAQ;AAAA,UAC/E;AAAA,QACF;AACA,0BAAkB,IAAI;AAAA,MACxB,WAAW,aAAa;AACtB,oBAAY,CAAC,GAAG,CAAC;AACjB,0BAAkB,KAAK;AAAA,MACzB;AAAA,IACF;AAAA,IACA,CAAC,gBAAgB,aAAa,eAAe;AAAA,EAC/C;AAEA,QAAM,mCAEM;AAAA,IACV,CAAC,MAAM;AACL,QAAE,eAAe;AACjB,6BAAuB,CAAC,mBAAmB;AAAA,IAC7C;AAAA,IACA,CAAC,wBAAwB,mBAAmB;AAAA,EAC9C;AAIA,QAAM,gBAAgB;AAAA,IACpB,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,UAAU;AACtB,qBAAa,OAAO,SAAS,CAAC;AAC9B,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,cAAc,WAAW;AAAA,EAC5B;AAGA,QAAM,gCAAgC;AAAA,IACpC,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,UAAU;AAClC,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EACd;AAEA,QAAM,sBAAsB;AAAA,IAC1B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,SAAS,CAAC,EAAE,YAAY,oBAAoB,WAAW,GAAG;AACtE,UAAE,eAAe;AACjB,oBAAY,SAAS,MAAM;AAAA,MAC7B;AAAA,IACF;AAAA,IACA,CAAC,aAAa,mBAAmB;AAAA,EACnC;AAEA,YAAU,MAAM;AAEd,QAAI,oBAAoB,WAAW,GAAG;AACpC,6BAAuB,KAAK;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,qBAAqB,sBAAsB,CAAC;AAEhD,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const HeaderList: () => JSX.Element;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { HeaderList } from './HeaderList.js';
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const StyledHeaderListWrapper: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
3
|
-
export declare const StyledButtonSelection: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV2T.Props>>, never>;
|
|
4
|
-
export declare const StyledSelectedItems: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
5
|
-
export declare const StyledNoOptionsSelected: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
6
|
-
export declare const StyledSelectAllCheckbox: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type React from 'react';
|
|
2
|
-
declare const useHeaderListHandlers: () => {
|
|
3
|
-
handleKeyDown: (e: React.KeyboardEvent) => void;
|
|
4
|
-
handleToggleSelectedValuesFilter: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
|
|
5
|
-
handleFilterSelectionBtnOnTab: (e: React.KeyboardEvent) => void;
|
|
6
|
-
handleOnMouseDown: (e: React.MouseEvent) => void;
|
|
7
|
-
handleCheckAllOnTab: (e: React.KeyboardEvent) => void;
|
|
8
|
-
handleSelectAllCheckboxChange: (e: React.MouseEvent | React.KeyboardEvent) => void;
|
|
9
|
-
checkboxStatus: boolean | "mixed";
|
|
10
|
-
};
|
|
11
|
-
export { useHeaderListHandlers };
|