@geotab/zenith 3.15.0-beta.0 → 3.15.0-beta.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/README.md +0 -1
- package/dist/chart/plugins/linePlugin/getInterpolatedValue.js +9 -0
- package/dist/chart/plugins/linePlugin/linePlugin.js +7 -29
- package/dist/commonStyles/colors/colors.less +4 -0
- package/dist/dropdown/dropdown.js +1 -1
- package/dist/dropdownRaw/dropdownList.d.ts +2 -3
- package/dist/dropdownRaw/dropdownList.js +42 -14
- package/dist/dropdownRaw/dropdownRaw.js +8 -20
- package/dist/dropdownRaw/stateReducer/stateReducer.d.ts +1 -4
- package/dist/dropdownRaw/stateReducer/stateReducer.js +21 -31
- package/dist/dropdownRaw/stateReducer/stateReducerHelper.d.ts +2 -1
- package/dist/dropdownRaw/stateReducer/stateReducerHelper.js +12 -7
- package/dist/dropdownRaw/types.d.ts +0 -20
- package/dist/index.css +190 -66
- package/esm/chart/plugins/linePlugin/getInterpolatedValue.js +9 -0
- package/esm/chart/plugins/linePlugin/linePlugin.js +7 -29
- package/esm/dropdown/dropdown.js +1 -1
- package/esm/dropdownRaw/dropdownList.d.ts +2 -3
- package/esm/dropdownRaw/dropdownList.js +42 -14
- package/esm/dropdownRaw/dropdownRaw.js +9 -21
- package/esm/dropdownRaw/stateReducer/stateReducer.d.ts +1 -4
- package/esm/dropdownRaw/stateReducer/stateReducer.js +22 -32
- package/esm/dropdownRaw/stateReducer/stateReducerHelper.d.ts +2 -1
- package/esm/dropdownRaw/stateReducer/stateReducerHelper.js +10 -5
- package/esm/dropdownRaw/types.d.ts +0 -20
- package/package.json +1 -1
- package/dist/tsconfig.cjs.tsbuildinfo +0 -1
- package/esm/tsconfig.esm.tsbuildinfo +0 -1
|
@@ -178,6 +178,39 @@ injectString("ka-GE", "Apply", "\u10D2\u10D0\u10DB\u10DD\u10E7\u10D4\u10DC\u10D4
|
|
|
178
178
|
injectString("el-GR", "Apply", "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE");
|
|
179
179
|
injectString("et-EE", "Apply", "Rakenda");
|
|
180
180
|
injectString("bg-BG", "Apply", "\u041F\u0440\u0438\u043B\u0430\u0433\u0430\u043D\u0435");
|
|
181
|
+
injectString("cs", "Deselect all", "Zru\u0161it v\xFDb\u011Br v\u0161ech");
|
|
182
|
+
injectString("da-DK", "Deselect all", "Frav\xE6lg alle");
|
|
183
|
+
injectString("de", "Deselect all", "Auswahl f\xFCr alle aufheben");
|
|
184
|
+
injectString("en", "Deselect all", "Deselect all");
|
|
185
|
+
injectString("es", "Deselect all", "Deseleccionar todo");
|
|
186
|
+
injectString("fi-FI", "Deselect all", "Poista kaikki valinnat");
|
|
187
|
+
injectString("fr", "Deselect all", "D\xE9s\xE9lectionner tout");
|
|
188
|
+
injectString("fr-FR", "Deselect all", "D\xE9s\xE9lectionner tout");
|
|
189
|
+
injectString("hu-HU", "Deselect all", "Ne v\xE1lassz ki semmit.");
|
|
190
|
+
injectString("id", "Deselect all", "Batalkan pilih semua");
|
|
191
|
+
injectString("it", "Deselect all", "Deselezionare tutto");
|
|
192
|
+
injectString("ja", "Deselect all", "\u3059\u3079\u3066\u3092\u9078\u629E\u89E3\u9664");
|
|
193
|
+
injectString("ko-KR", "Deselect all", "\uBAA8\uB450 \uC120\uD0DD \uCDE8\uC18C");
|
|
194
|
+
injectString("ms", "Deselect all", "Nyahpilih semua");
|
|
195
|
+
injectString("nb-NO", "Deselect all", "Fjern alle valg");
|
|
196
|
+
injectString("nl", "Deselect all", "Alles deselecteren");
|
|
197
|
+
injectString("pl", "Deselect all", "Usu\u0144 wyb\xF3r wszystkich");
|
|
198
|
+
injectString("pt-BR", "Deselect all", "Desmarcar tudo");
|
|
199
|
+
injectString("pt-PT", "Deselect all", "Desmarcar tudo");
|
|
200
|
+
injectString("sk-SK", "Deselect all", "Zru\u0161 v\xFDber v\u0161etk\xFDch.");
|
|
201
|
+
injectString("sv", "Deselect all", "Avmarkera alla");
|
|
202
|
+
injectString("th", "Deselect all", "\u0E22\u0E01\u0E40\u0E25\u0E34\u0E01\u0E01\u0E32\u0E23\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E17\u0E31\u0E49\u0E07\u0E2B\u0E21\u0E14");
|
|
203
|
+
injectString("tr", "Deselect all", "T\xFCm\xFCn\xFCn se\xE7imini iptal et");
|
|
204
|
+
injectString("zh-Hans", "Deselect all", "\u53D6\u6D88\u5168\u9009");
|
|
205
|
+
injectString("zh-TW", "Deselect all", "\u53D6\u6D88\u5168\u9078");
|
|
206
|
+
injectString("ro-RO", "Deselect all", "Deselecta\u021Bi tot");
|
|
207
|
+
injectString("ar", "Deselect all", "\u0625\u0644\u063A\u0627\u0621 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
|
|
208
|
+
injectString("lt-LT", "Deselect all", "At\u017Eym\u0117ti visus");
|
|
209
|
+
injectString("lv-LV", "Deselect all", "Atcelt visas atlases");
|
|
210
|
+
injectString("ka-GE", "Deselect all", "\u10E7\u10D5\u10D4\u10DA\u10D0\u10E1 \u10DB\u10DD\u10EE\u10E1\u10DC\u10D0");
|
|
211
|
+
injectString("el-GR", "Deselect all", "\u039A\u03B1\u03C4\u03AC\u03C1\u03B3\u03B7\u03C3\u03B7 \u03CC\u03BB\u03C9\u03BD \u03B5\u03C0\u03B9\u03BB\u03BF\u03B3\u03CE\u03BD");
|
|
212
|
+
injectString("et-EE", "Deselect all", "T\xFChista k\xF5ik valikud");
|
|
213
|
+
injectString("bg-BG", "Deselect all", "\u041F\u0440\u0435\u043C\u0430\u0445\u0432\u0430\u043D\u0435 \u043D\u0430 \u0432\u0441\u0438\u0447\u043A\u0438 \u0438\u0437\u0431\u043E\u0440\u0438");
|
|
181
214
|
injectString("cs", "Select all", "Vybrat v\u0161e");
|
|
182
215
|
injectString("da-DK", "Select all", "V\xE6lg alle");
|
|
183
216
|
injectString("de", "Select all", "Alle ausw\xE4hlen");
|
|
@@ -340,8 +373,7 @@ export const DropdownList = ({
|
|
|
340
373
|
onSelect,
|
|
341
374
|
onSingleSelect,
|
|
342
375
|
listData,
|
|
343
|
-
|
|
344
|
-
shouldBlockItems,
|
|
376
|
+
isAllSelected,
|
|
345
377
|
backButtonName,
|
|
346
378
|
width,
|
|
347
379
|
minWidth,
|
|
@@ -370,7 +402,7 @@ export const DropdownList = ({
|
|
|
370
402
|
const internalListId = useId();
|
|
371
403
|
const selectListId = listId || internalListId;
|
|
372
404
|
const handleSelectAllClick = () => {
|
|
373
|
-
onSelectAllClick(
|
|
405
|
+
onSelectAllClick(isAllSelected);
|
|
374
406
|
};
|
|
375
407
|
const handleBackButtonKeyDown = useCallback(event => {
|
|
376
408
|
if (event.key === "ArrowLeft") {
|
|
@@ -398,14 +430,13 @@ export const DropdownList = ({
|
|
|
398
430
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
399
431
|
forceSelection ? onSingleSelect(false, newActiveEl || activeValue) : onSingleSelect(false, newActiveEl);
|
|
400
432
|
}, [activeValue, forceSelection, onSingleSelect]);
|
|
401
|
-
const selectButtonLabel = translate("Select all");
|
|
402
|
-
const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown
|
|
433
|
+
const selectButtonLabel = isAllSelected ? translate("Deselect all") : translate("Select all");
|
|
434
|
+
const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown) => _jsx("button", {
|
|
403
435
|
type: "button",
|
|
404
436
|
disabled: isDisabled,
|
|
405
437
|
onClick: clickHandler,
|
|
406
438
|
onKeyDown: onKeyDown,
|
|
407
|
-
"
|
|
408
|
-
className: classNames(["zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back", isSelected ? "zen-dropdown-list__action-button--selected" : ""]),
|
|
439
|
+
className: "zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back",
|
|
409
440
|
title: title,
|
|
410
441
|
children: _jsxs(_Fragment, {
|
|
411
442
|
children: [React.createElement(icon, {
|
|
@@ -441,14 +472,11 @@ export const DropdownList = ({
|
|
|
441
472
|
});
|
|
442
473
|
return values;
|
|
443
474
|
};
|
|
444
|
-
const multiselectOptions = shouldBlockItems ? listData.map(item => Object.assign(Object.assign({}, item), {
|
|
445
|
-
blocked: true
|
|
446
|
-
})) : listData;
|
|
447
475
|
return _jsx("div", {
|
|
448
476
|
className: "zen-dropdown-list__elements",
|
|
449
477
|
ref: listElementRef,
|
|
450
478
|
children: isMultiselect ? _jsx(CheckboxListWithAction, {
|
|
451
|
-
options:
|
|
479
|
+
options: listData,
|
|
452
480
|
label: "",
|
|
453
481
|
onChange: handleChange,
|
|
454
482
|
onClick: handleClick
|
|
@@ -464,7 +492,7 @@ export const DropdownList = ({
|
|
|
464
492
|
value: createValue(listData, activeValue)
|
|
465
493
|
})
|
|
466
494
|
});
|
|
467
|
-
}, [listElementRef, isMultiselect,
|
|
495
|
+
}, [listElementRef, isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, selectListId, forceSelection, activeValue]);
|
|
468
496
|
return _jsxs("div", Object.assign({
|
|
469
497
|
className: classNames(["zen-dropdown-list", driveComponentClass || ""])
|
|
470
498
|
}, styleWidth, {
|
|
@@ -482,7 +510,7 @@ export const DropdownList = ({
|
|
|
482
510
|
}) : null, backButtonName ? _jsx("div", {
|
|
483
511
|
className: "zen-dropdown-list__item-wrapper",
|
|
484
512
|
children: getActionButton(backButtonName, translate("Back"), IconBackArrow, false, onBackButtonClick, "large", handleBackButtonKeyDown)
|
|
485
|
-
}) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge"
|
|
513
|
+
}) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? _jsxs("div", {
|
|
486
514
|
className: "zen-dropdown-list__footer",
|
|
487
515
|
children: [_jsx(Button, {
|
|
488
516
|
onClick: isMultiselect ? onClearClick : handleClearClick,
|
|
@@ -510,4 +538,4 @@ export const DropdownList = ({
|
|
|
510
538
|
}) : null]
|
|
511
539
|
}));
|
|
512
540
|
};
|
|
513
|
-
export const TRANSLATIONS = ["Select all", "Clear", "Back", "No data"];
|
|
541
|
+
export const TRANSLATIONS = ["Select all", "Deselect all", "Clear", "Back", "No data"];
|
|
@@ -8,7 +8,7 @@ import { getInitialState, stateReducer, ROOT_GROUP_ID } from "./stateReducer/sta
|
|
|
8
8
|
import { StateActionType } from "./stateReducer/stateActionType";
|
|
9
9
|
import { FOCUSABLE_SELECTOR } from "../utils/focusableSelector";
|
|
10
10
|
import { useEscape } from "../commonHelpers/hooks/useEscape";
|
|
11
|
-
import { checkIsDataProblem, compareObjectsArrays, compareStringsArrays, createListDataOptions, getDataForChange, getListDataWithDisabled, getSelectedCount, getStringFromAllSelected, getStringFromSelected, isAllItemsHasOneParent, isEveryItemSelected, prepareSelectedIdsToItems, sortDropdownItemArray } from "./dropdownHelper";
|
|
11
|
+
import { checkIsDataProblem, compareObjectsArrays, compareStringsArrays, createListDataOptions, getDataForChange, getListDataWithDisabled, getSelectedCount, getStringFromAllSelected, getStringFromSelected, isAllChildrenSelected, isAllItemsHasOneParent, isEveryItemSelected, prepareSelectedIdsToItems, sortDropdownItemArray } from "./dropdownHelper";
|
|
12
12
|
import { DropdownTrigger } from "./dropdownTrigger";
|
|
13
13
|
import { isFocusable } from "../dialog/dialogHelpers";
|
|
14
14
|
import { useLanguage } from "../utils/localization/useLanguage";
|
|
@@ -109,10 +109,7 @@ export const DropdownRaw = props => {
|
|
|
109
109
|
mobileSheetStackingClassName,
|
|
110
110
|
isError,
|
|
111
111
|
firstParentNodeIsVisible,
|
|
112
|
-
dataAnalyticsId
|
|
113
|
-
hideSelectAllOnSearch = false,
|
|
114
|
-
blockItemsOnSelectAll = false,
|
|
115
|
-
autoPromoteSelectAll = false
|
|
112
|
+
dataAnalyticsId
|
|
116
113
|
} = props;
|
|
117
114
|
const {
|
|
118
115
|
isFormSection
|
|
@@ -150,7 +147,7 @@ export const DropdownRaw = props => {
|
|
|
150
147
|
const isQueryMode = useMemo(() => typeof getData === "undefined" && typeof dataItems === "undefined", [getData, dataItems]);
|
|
151
148
|
const isCheckboxMode = useMemo(() => checkboxLabel && typeof value === "object" && "isChecked" in value && typeof value.isChecked === "boolean" || false, [checkboxLabel, value]);
|
|
152
149
|
const [initialInChecked] = useState(isCheckboxMode ? value.isChecked : undefined);
|
|
153
|
-
const [state, dispatchState] = useReducer(stateReducer, getInitialState(isFullSelectionMode, isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : dataItems || [], isFullSelectionMode || isCheckboxMode ? value.selected : value, listLimit, defaultValue ? isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? isFullSelectionMode ? defaultValue.isAllSelected : undefined : undefined, isCheckboxMode ? value.isChecked : undefined, isCheckboxMode && defaultValue ? defaultValue.isChecked : undefined, firstParentNodeIsVisible
|
|
150
|
+
const [state, dispatchState] = useReducer(stateReducer, getInitialState(isFullSelectionMode, isQueryMode ? (fetchState === null || fetchState === void 0 ? void 0 : fetchState.data) || [] : dataItems || [], isFullSelectionMode || isCheckboxMode ? value.selected : value, listLimit, defaultValue ? isFullSelectionMode || isCheckboxMode ? defaultValue.selected : defaultValue : undefined, isFullSelectionMode ? value.isAllSelected : undefined, defaultValue ? isFullSelectionMode ? defaultValue.isAllSelected : undefined : undefined, isCheckboxMode ? value.isChecked : undefined, isCheckboxMode && defaultValue ? defaultValue.isChecked : undefined, firstParentNodeIsVisible));
|
|
154
151
|
const chipStatus = useChipStatus();
|
|
155
152
|
const isMobile = useMobile();
|
|
156
153
|
const popupId = useId();
|
|
@@ -888,15 +885,7 @@ export const DropdownRaw = props => {
|
|
|
888
885
|
});
|
|
889
886
|
}
|
|
890
887
|
if (state.showList) {
|
|
891
|
-
const isSearchMode =
|
|
892
|
-
const selectAllActiveForCurrentLevel = state.selectAllActiveForId === (state.currentId || state.rootId);
|
|
893
|
-
// DESIGN INTENT: button state (isSelectAllActive) is truth-based — shows pressed whenever
|
|
894
|
-
// all items are actually selected, including after search+clear where selectAllActiveForId
|
|
895
|
-
// was cleared. shouldBlockItems is intent-based — only activates when "Select all" was
|
|
896
|
-
// explicitly clicked (selectAllActiveForCurrentLevel), never from manual individual selection.
|
|
897
|
-
// This asymmetry is intentional: the button restores its visual state post-search, but
|
|
898
|
-
// blocking does not, to avoid unexpected UX when users manually select all items.
|
|
899
|
-
const isAllCurrentLevelSelected = !isSearchMode && !isFullSelectionMode ? isEveryItemSelected(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds) : false;
|
|
888
|
+
const isSearchMode = state.inputValue && !state.currentId;
|
|
900
889
|
const currentListData = createListDataOptions(state, translate, isSearchMode ? sortDropdownItemArray(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId) :
|
|
901
890
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
902
891
|
sortDropdownItemArray(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
|
|
@@ -912,17 +901,16 @@ export const DropdownRaw = props => {
|
|
|
912
901
|
activeValue: state.selectedIds.length ? state.selectedIds[0] : "root",
|
|
913
902
|
backButtonName: state.currentId && state.groupsMap[state.currentId] ? getGroupDescription(state.groupsMap[state.currentId], translate) : undefined,
|
|
914
903
|
filterName: isMobile ? undefined : filterName,
|
|
915
|
-
|
|
916
|
-
shouldBlockItems: blockItemsOnSelectAll && !state.inputValue && !isFullSelectionMode && selectAllActiveForCurrentLevel,
|
|
904
|
+
isAllSelected: currentAllSelected ? currentAllSelected : isSearchMode ? isEveryItemSelected(getListDataWithDisabled(state.listData, state.isNestedList), state.selectedIds) : currentAllSelected === undefined ? isAllChildrenSelected(state, state.currentId || state.rootId) : false,
|
|
917
905
|
isMultiselect: multiselect,
|
|
918
906
|
forceSelection: forceSelection,
|
|
919
907
|
listData: currentListData,
|
|
920
908
|
width: width || currentWidth === 180 ? undefined : currentWidth,
|
|
921
909
|
minWidth: currentWidth,
|
|
922
|
-
hasSelectAllButton: selectAllButton && multiselect
|
|
910
|
+
hasSelectAllButton: selectAllButton && multiselect,
|
|
923
911
|
hasApplyButton: hasApplyButton,
|
|
924
912
|
isApplyDisabled: memoizedIsApplyButtonDisabled,
|
|
925
|
-
isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode && state.isNestedList && isAllItemsHasOneParent(state.listData.filter(el => el.id !== state.rootId), (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),
|
|
913
|
+
isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode !== "" && state.isNestedList && isAllItemsHasOneParent(state.listData.filter(el => el.id !== state.rootId), (((_c = state.groupsMap[state.rootId]) === null || _c === void 0 ? void 0 : _c.children) || []).map(el => el.id)),
|
|
926
914
|
isClearButtonDisabled: memoizedIsClearButtonDisabled,
|
|
927
915
|
isWithFooter: memoizedWithFooter && !isMobile,
|
|
928
916
|
isMobile: isMobile,
|
|
@@ -934,7 +922,7 @@ export const DropdownRaw = props => {
|
|
|
934
922
|
});
|
|
935
923
|
}
|
|
936
924
|
return null;
|
|
937
|
-
}, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton,
|
|
925
|
+
}, [state, isLoading, isQueryMode, fetchState === null || fetchState === void 0 ? void 0 : fetchState.isLoading, fetchState === null || fetchState === void 0 ? void 0 : fetchState.error, handleClearClick, handleCancelClick, handleApplyClick, hasApplyButton, memoizedWithFooter, translate, sortFn, listLimit, multiselect, currentAllSelected, handleBackButtonClick, handleSelectAllInSearch, handleSelectAllClick, handleSelect, handleChangeCurrentId, handleSingleSelection, isMobile, filterName, forceSelection, width, selectAllButton, memoizedIsApplyButtonDisabled, memoizedIsClearButtonDisabled, isCheckboxMode, handleCheckboxChange, checkboxLabel, selectListId]);
|
|
938
926
|
const currentStringFromSelected = isFullSelectionMode && hasApplyButton && state.globalIsAllSelected || isFullSelectionMode && !hasApplyButton && state.isAllSelected ? getStringFromAllSelected(state.groupsMap, translate, state.rootId) : getStringFromSelected(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate, state.rootId);
|
|
939
927
|
const memoizedCurrentSelection = useMemo(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
|
|
940
928
|
const parentTriggerWidth = ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 420;
|
|
@@ -1032,4 +1020,4 @@ export const DropdownRaw = props => {
|
|
|
1032
1020
|
});
|
|
1033
1021
|
};
|
|
1034
1022
|
DropdownRaw.displayName = "DropdownRaw";
|
|
1035
|
-
export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];
|
|
1023
|
+
export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];
|
|
@@ -25,8 +25,6 @@ export interface IDropdownState {
|
|
|
25
25
|
listLimit: number;
|
|
26
26
|
resultsExceedListLimit?: boolean;
|
|
27
27
|
isAllSelected?: boolean;
|
|
28
|
-
selectAllActiveForId?: string;
|
|
29
|
-
autoPromoteSelectAll?: boolean;
|
|
30
28
|
globalIsAllSelected?: boolean;
|
|
31
29
|
defaultValueIsAllSelected?: boolean;
|
|
32
30
|
isChecked?: boolean;
|
|
@@ -36,7 +34,7 @@ export interface IDropdownState {
|
|
|
36
34
|
}
|
|
37
35
|
export interface IStateReducer extends Reducer<IDropdownState, TStateAction> {
|
|
38
36
|
}
|
|
39
|
-
export declare const getInitialState: (isFullSelectionMode: boolean, comboItems: IDropdownRawItem[], selection: string[], listLimit: number, defaultValue?: string[], isAllSelected?: boolean, defaultValueIsAllSelected?: boolean, isChecked?: boolean, defaultValueIsChecked?: boolean, firstParentNodeIsVisible?: boolean
|
|
37
|
+
export declare const getInitialState: (isFullSelectionMode: boolean, comboItems: IDropdownRawItem[], selection: string[], listLimit: number, defaultValue?: string[], isAllSelected?: boolean, defaultValueIsAllSelected?: boolean, isChecked?: boolean, defaultValueIsChecked?: boolean, firstParentNodeIsVisible?: boolean) => {
|
|
40
38
|
groupsMap: ITypedHash<IGroupTree>;
|
|
41
39
|
selectedIds: string[];
|
|
42
40
|
globalSelectedIds: string[];
|
|
@@ -64,6 +62,5 @@ export declare const getInitialState: (isFullSelectionMode: boolean, comboItems:
|
|
|
64
62
|
listLimit: number;
|
|
65
63
|
resultsExceedListLimit: boolean;
|
|
66
64
|
firstParentNodeIsVisible: boolean | undefined;
|
|
67
|
-
autoPromoteSelectAll: boolean | undefined;
|
|
68
65
|
};
|
|
69
66
|
export declare function stateReducer(state: IDropdownState, action: TStateAction): IDropdownState;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { StateActionType } from "./stateActionType";
|
|
2
|
-
import { getChildList,
|
|
2
|
+
import { getChildList, updateAllSelectedStateValueBasedOnTotalSelected, getRootId } from "./stateReducerHelper";
|
|
3
3
|
import { createGroupsMap } from "../../groupsFilterRaw/groupsFilterHelper";
|
|
4
4
|
export const ROOT_GROUP_ID = "zen_dropdown_root_group_id";
|
|
5
|
-
export const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked, firstParentNodeIsVisible
|
|
5
|
+
export const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked, firstParentNodeIsVisible) => {
|
|
6
6
|
const updatedGroupsMapSelected = new Map();
|
|
7
7
|
const updatedGroupsMap = comboItems.length ? createGroupsMap(comboItems, ROOT_GROUP_ID) : {};
|
|
8
8
|
const namelessIds = new Set();
|
|
@@ -47,8 +47,7 @@ export const getInitialState = (isFullSelectionMode, comboItems, selection, list
|
|
|
47
47
|
globalIsChecked: isChecked,
|
|
48
48
|
listLimit,
|
|
49
49
|
resultsExceedListLimit: false,
|
|
50
|
-
firstParentNodeIsVisible: firstParentNodeIsVisible
|
|
51
|
-
autoPromoteSelectAll: autoPromoteSelectAll
|
|
50
|
+
firstParentNodeIsVisible: firstParentNodeIsVisible
|
|
52
51
|
};
|
|
53
52
|
};
|
|
54
53
|
// eslint-disable-next-line complexity
|
|
@@ -72,14 +71,12 @@ export function stateReducer(state, action) {
|
|
|
72
71
|
}
|
|
73
72
|
});
|
|
74
73
|
}
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
const
|
|
79
|
-
const selectedInNewMap = state.selectedIds.filter(id => id in updatedGroupsMap).length - newNamelessIds.size;
|
|
80
|
-
const newIsAllSelected = computeIsAllSelected(state.isAllSelected, state.isFullSelectionMode, newResultsExceedListLimit, groupsMapLength, selectedInNewMap);
|
|
74
|
+
const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 &&
|
|
75
|
+
(updatedGroupsMap[ROOT_GROUP_ID].children || []).some(el => el.children && el.children.length);
|
|
76
|
+
state.groupsMap = updatedGroupsMap;
|
|
77
|
+
const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, state.selectedIds.length - newNamelessIds.size);
|
|
81
78
|
const rootId = getRootId(updatedGroupsMap, ROOT_GROUP_ID, state.firstParentNodeIsVisible);
|
|
82
|
-
return Object.assign(Object.assign({}, state), {
|
|
79
|
+
return Object.assign(Object.assign(Object.assign({}, state), { rootId: rootId || ROOT_GROUP_ID, namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested, resultsExceedListLimit: Object.keys(updatedGroupsMap).length - 1 >= state.listLimit }), additionalStateUpdates);
|
|
83
80
|
}
|
|
84
81
|
case StateActionType.SetListData: {
|
|
85
82
|
state.selectedIds.forEach(id => {
|
|
@@ -104,9 +101,9 @@ export function stateReducer(state, action) {
|
|
|
104
101
|
case StateActionType.SetIsOpenCombo:
|
|
105
102
|
return Object.assign(Object.assign({}, state), { isOpenCombo: payload });
|
|
106
103
|
case StateActionType.ResetSelection:
|
|
107
|
-
return Object.assign(Object.assign({}, state), { selectedIds: [...state.defaultValue], isAllSelected: state.defaultValueIsAllSelected, isChecked: typeof state.isChecked === "boolean" ? state.defaultValueIsChecked || false : undefined
|
|
104
|
+
return Object.assign(Object.assign({}, state), { selectedIds: [...state.defaultValue], isAllSelected: state.defaultValueIsAllSelected, isChecked: typeof state.isChecked === "boolean" ? state.defaultValueIsChecked || false : undefined });
|
|
108
105
|
case StateActionType.ResetStateToGlobal:
|
|
109
|
-
return Object.assign(Object.assign({}, state), { selectedIds: [...state.globalSelectedIds], isAllSelected: state.globalIsAllSelected, isChecked: state.globalIsChecked
|
|
106
|
+
return Object.assign(Object.assign({}, state), { selectedIds: [...state.globalSelectedIds], isAllSelected: state.globalIsAllSelected, isChecked: state.globalIsChecked });
|
|
110
107
|
case StateActionType.NothingToShow:
|
|
111
108
|
return Object.assign(Object.assign({}, state), { showWaiting: false, showEmptyList: false, showList: false });
|
|
112
109
|
case StateActionType.Show:
|
|
@@ -118,7 +115,7 @@ export function stateReducer(state, action) {
|
|
|
118
115
|
case StateActionType.ShowList:
|
|
119
116
|
return Object.assign(Object.assign({}, state), { showWaiting: false, showEmptyList: false, showList: true });
|
|
120
117
|
case StateActionType.SetInputValue:
|
|
121
|
-
return Object.assign(Object.assign({}, state), { inputValue: payload
|
|
118
|
+
return Object.assign(Object.assign({}, state), { inputValue: payload });
|
|
122
119
|
case StateActionType.SetState: {
|
|
123
120
|
const newNamelessIds = new Set(state.namelessIds);
|
|
124
121
|
payload.selected.forEach(id => {
|
|
@@ -222,10 +219,8 @@ export function stateReducer(state, action) {
|
|
|
222
219
|
state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
|
|
223
220
|
}
|
|
224
221
|
});
|
|
225
|
-
const
|
|
226
|
-
|
|
227
|
-
: state.isAllSelected;
|
|
228
|
-
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds), selectAllActiveForId: undefined, isAllSelected: newIsAllSelected });
|
|
222
|
+
const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, currentSelectedIds.size);
|
|
223
|
+
return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
|
|
229
224
|
}
|
|
230
225
|
case StateActionType.ChangeBulkSelection: {
|
|
231
226
|
const { itemsIds, value } = payload;
|
|
@@ -258,10 +253,8 @@ export function stateReducer(state, action) {
|
|
|
258
253
|
state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
|
|
259
254
|
}
|
|
260
255
|
});
|
|
261
|
-
const
|
|
262
|
-
|
|
263
|
-
: state.isAllSelected;
|
|
264
|
-
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds), selectAllActiveForId: undefined, isAllSelected: newIsAllSelected });
|
|
256
|
+
const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, currentSelectedIds.size);
|
|
257
|
+
return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
|
|
265
258
|
}
|
|
266
259
|
case StateActionType.SelectAllChildren: {
|
|
267
260
|
const currentEl = state.groupsMap[payload];
|
|
@@ -298,7 +291,7 @@ export function stateReducer(state, action) {
|
|
|
298
291
|
state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
|
|
299
292
|
}
|
|
300
293
|
});
|
|
301
|
-
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected)
|
|
294
|
+
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
|
|
302
295
|
}
|
|
303
296
|
case StateActionType.DeselectItemsFromAllSelected: {
|
|
304
297
|
const currentEl = state.groupsMap[state.rootId];
|
|
@@ -322,16 +315,12 @@ export function stateReducer(state, action) {
|
|
|
322
315
|
state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
|
|
323
316
|
}
|
|
324
317
|
});
|
|
325
|
-
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), isAllSelected: state.isFullSelectionMode ? false : undefined
|
|
318
|
+
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), isAllSelected: state.isFullSelectionMode ? false : undefined });
|
|
326
319
|
}
|
|
327
320
|
case StateActionType.ToggleValueForAllSelected: {
|
|
328
321
|
const currentEl = state.groupsMap[state.rootId];
|
|
329
|
-
// selectAllActiveForId tracks when "Select all" was clicked at this level, even when
|
|
330
|
-
// autoPromoteSelectAll=false keeps isAllSelected=false. Without this fallback, a second
|
|
331
|
-
// click would incorrectly clear selections and leave the button stuck as pressed.
|
|
332
|
-
const effectiveIsAllSelected = !!state.isAllSelected || state.selectAllActiveForId === (state.currentId || state.rootId);
|
|
333
322
|
const newSelected = new Set();
|
|
334
|
-
|
|
323
|
+
state.isAllSelected &&
|
|
335
324
|
((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
|
|
336
325
|
if (!newSelected.has(el.id) && el.disabled) {
|
|
337
326
|
newSelected.add(el.id);
|
|
@@ -344,8 +333,9 @@ export function stateReducer(state, action) {
|
|
|
344
333
|
state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
|
|
345
334
|
}
|
|
346
335
|
});
|
|
347
|
-
const updatedIsAllSelectedValue = state.isFullSelectionMode ? !
|
|
348
|
-
|
|
336
|
+
const updatedIsAllSelectedValue = state.isFullSelectionMode ? !state.isAllSelected : undefined;
|
|
337
|
+
const additionalStateUpdates = updateAllSelectedStateValueBasedOnTotalSelected(state, newSelected.size);
|
|
338
|
+
return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: state.isAllSelected ? Array.from(newSelected) : [], isAllSelected: updatedIsAllSelectedValue }), additionalStateUpdates);
|
|
349
339
|
}
|
|
350
340
|
case StateActionType.DeselectAllChildren: {
|
|
351
341
|
const childrenForDeselect = [];
|
|
@@ -357,7 +347,7 @@ export function stateReducer(state, action) {
|
|
|
357
347
|
});
|
|
358
348
|
const newSelected = new Set(state.selectedIds);
|
|
359
349
|
childrenForDeselect.forEach(childId => newSelected.delete(childId));
|
|
360
|
-
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected)
|
|
350
|
+
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
|
|
361
351
|
}
|
|
362
352
|
case StateActionType.SetFirstParentNodeIsVisible: {
|
|
363
353
|
if (state.firstParentNodeIsVisible === payload) {
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { IDropdownState } from "./stateReducer";
|
|
1
2
|
import { IDropdownRawItem } from "../types";
|
|
2
3
|
import { IGroupTree, ITypedHash } from "../../groupsFilterRaw/groupsFilterInterfaces";
|
|
3
4
|
export declare function getChildList(childArr: IDropdownRawItem[] | undefined): IDropdownRawItem[];
|
|
4
|
-
export declare const
|
|
5
|
+
export declare const updateAllSelectedStateValueBasedOnTotalSelected: (state: IDropdownState, totalSelected: number) => Partial<Pick<IDropdownState, "isAllSelected">>;
|
|
5
6
|
export declare const getRootId: (groupsMap: ITypedHash<IGroupTree>, rootIdKey: string, firstParentNodeIsVisible?: boolean) => string | undefined;
|
|
@@ -13,11 +13,16 @@ export function getChildList(childArr) {
|
|
|
13
13
|
});
|
|
14
14
|
return list;
|
|
15
15
|
}
|
|
16
|
-
export const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
16
|
+
export const updateAllSelectedStateValueBasedOnTotalSelected = (state, totalSelected) => {
|
|
17
|
+
const additionalStateUpdates = {};
|
|
18
|
+
const groupsMapLength = Object.keys(state.groupsMap).length - 1;
|
|
19
|
+
if (!state.resultsExceedListLimit && !state.isAllSelected && state.isFullSelectionMode && groupsMapLength > 0) {
|
|
20
|
+
if (totalSelected >= groupsMapLength) {
|
|
21
|
+
additionalStateUpdates.isAllSelected = true;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
return additionalStateUpdates;
|
|
25
|
+
};
|
|
21
26
|
export const getRootId = (groupsMap, rootIdKey, firstParentNodeIsVisible) => {
|
|
22
27
|
var _a;
|
|
23
28
|
if (Object.keys(groupsMap).length === 0) {
|
|
@@ -62,26 +62,6 @@ interface IDropdownBase extends IChipsParent {
|
|
|
62
62
|
mobileSheetStackingClassName?: string;
|
|
63
63
|
firstParentNodeIsVisible?: boolean;
|
|
64
64
|
dataAnalyticsId?: string;
|
|
65
|
-
/**
|
|
66
|
-
* When `true`, hides the "Select all" button while the user has an active search query.
|
|
67
|
-
* The button reappears when the search field is cleared.
|
|
68
|
-
* @default false
|
|
69
|
-
*/
|
|
70
|
-
hideSelectAllOnSearch?: boolean;
|
|
71
|
-
/**
|
|
72
|
-
* When `true`, individual list items are visually blocked (disabled) while "Select all" is
|
|
73
|
-
* active at the current level, preventing partial deselection after a bulk selection.
|
|
74
|
-
* Has no effect in full-selection mode (`value` with `isAllSelected`).
|
|
75
|
-
* @default false
|
|
76
|
-
*/
|
|
77
|
-
blockItemsOnSelectAll?: boolean;
|
|
78
|
-
/**
|
|
79
|
-
* When `true`, automatically promotes `isAllSelected` to `true` when all available items
|
|
80
|
-
* are individually checked. Only applies in full-selection mode (value with `isAllSelected`).
|
|
81
|
-
* Has no effect in standard mode (`value: string[]`).
|
|
82
|
-
* @default false
|
|
83
|
-
*/
|
|
84
|
-
autoPromoteSelectAll?: boolean;
|
|
85
65
|
}
|
|
86
66
|
interface IDropdownBaseDefault {
|
|
87
67
|
disabled?: boolean;
|