@geotab/zenith 3.15.0-beta.1 → 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/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 +2 -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/README.md
CHANGED
|
@@ -57,7 +57,6 @@ Zenith library provides components defined in Zenith Design System. It includes
|
|
|
57
57
|
- Add native accessible loading-status support (`isLoading` prop with live-region) to `Waiting`
|
|
58
58
|
- Add status dot and label support to `Tag` component
|
|
59
59
|
- Add "trend, neutral" icon to icon library
|
|
60
|
-
- Improve select-all behavior in search for `Dropdown`
|
|
61
60
|
- Add new icons (`IconAce`, `IconBreak`, `IconChevronStepper` and more)
|
|
62
61
|
- Add `ProgressIndicator` — new table-cell progress component
|
|
63
62
|
- Fix `DropdownRaw` single-select mode not auto-closing after leaf node selection
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
:root {
|
|
2
|
+
fill: var(--text-primary);
|
|
3
|
+
|
|
2
4
|
// text
|
|
3
5
|
--text-primary: #1f2833;
|
|
4
6
|
--text-secondary: #4e677e;
|
|
@@ -84,6 +86,8 @@
|
|
|
84
86
|
|
|
85
87
|
.zen-dark {
|
|
86
88
|
color: var(--text-primary);
|
|
89
|
+
fill: var(--text-primary);
|
|
90
|
+
|
|
87
91
|
// text
|
|
88
92
|
--text-primary: #ffffff;
|
|
89
93
|
--text-secondary: #c0ccd8;
|
|
@@ -24,4 +24,4 @@ const Dropdown = (_a) => {
|
|
|
24
24
|
return (0, jsx_runtime_1.jsx)(DropDownFormField, Object.assign({}, props));
|
|
25
25
|
};
|
|
26
26
|
exports.Dropdown = Dropdown;
|
|
27
|
-
exports.TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];
|
|
27
|
+
exports.TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];
|
|
@@ -13,8 +13,7 @@ export interface IDropdownList extends IZenComponentProps {
|
|
|
13
13
|
onSelect: (id: string) => void;
|
|
14
14
|
onSingleSelect: (reset: boolean, selected?: string) => void;
|
|
15
15
|
backButtonName?: string;
|
|
16
|
-
|
|
17
|
-
shouldBlockItems?: boolean;
|
|
16
|
+
isAllSelected: boolean;
|
|
18
17
|
listData: ICheckboxListWithActionOption[] | ISelectListItem[];
|
|
19
18
|
isWithFooter: boolean;
|
|
20
19
|
width?: number;
|
|
@@ -40,6 +39,6 @@ interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" |
|
|
|
40
39
|
hasError: boolean;
|
|
41
40
|
}
|
|
42
41
|
export declare const EmptyList: ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }: IDropdownEmptyList) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
-
export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData,
|
|
42
|
+
export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
|
|
44
43
|
export declare const TRANSLATIONS: string[];
|
|
45
44
|
export {};
|
|
@@ -214,6 +214,39 @@ injectString("ka-GE", "Apply", "\u10D2\u10D0\u10DB\u10DD\u10E7\u10D4\u10DC\u10D4
|
|
|
214
214
|
injectString("el-GR", "Apply", "\u0395\u03C6\u03B1\u03C1\u03BC\u03BF\u03B3\u03AE");
|
|
215
215
|
injectString("et-EE", "Apply", "Rakenda");
|
|
216
216
|
injectString("bg-BG", "Apply", "\u041F\u0440\u0438\u043B\u0430\u0433\u0430\u043D\u0435");
|
|
217
|
+
injectString("cs", "Deselect all", "Zru\u0161it v\xFDb\u011Br v\u0161ech");
|
|
218
|
+
injectString("da-DK", "Deselect all", "Frav\xE6lg alle");
|
|
219
|
+
injectString("de", "Deselect all", "Auswahl f\xFCr alle aufheben");
|
|
220
|
+
injectString("en", "Deselect all", "Deselect all");
|
|
221
|
+
injectString("es", "Deselect all", "Deseleccionar todo");
|
|
222
|
+
injectString("fi-FI", "Deselect all", "Poista kaikki valinnat");
|
|
223
|
+
injectString("fr", "Deselect all", "D\xE9s\xE9lectionner tout");
|
|
224
|
+
injectString("fr-FR", "Deselect all", "D\xE9s\xE9lectionner tout");
|
|
225
|
+
injectString("hu-HU", "Deselect all", "Ne v\xE1lassz ki semmit.");
|
|
226
|
+
injectString("id", "Deselect all", "Batalkan pilih semua");
|
|
227
|
+
injectString("it", "Deselect all", "Deselezionare tutto");
|
|
228
|
+
injectString("ja", "Deselect all", "\u3059\u3079\u3066\u3092\u9078\u629E\u89E3\u9664");
|
|
229
|
+
injectString("ko-KR", "Deselect all", "\uBAA8\uB450 \uC120\uD0DD \uCDE8\uC18C");
|
|
230
|
+
injectString("ms", "Deselect all", "Nyahpilih semua");
|
|
231
|
+
injectString("nb-NO", "Deselect all", "Fjern alle valg");
|
|
232
|
+
injectString("nl", "Deselect all", "Alles deselecteren");
|
|
233
|
+
injectString("pl", "Deselect all", "Usu\u0144 wyb\xF3r wszystkich");
|
|
234
|
+
injectString("pt-BR", "Deselect all", "Desmarcar tudo");
|
|
235
|
+
injectString("pt-PT", "Deselect all", "Desmarcar tudo");
|
|
236
|
+
injectString("sk-SK", "Deselect all", "Zru\u0161 v\xFDber v\u0161etk\xFDch.");
|
|
237
|
+
injectString("sv", "Deselect all", "Avmarkera alla");
|
|
238
|
+
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");
|
|
239
|
+
injectString("tr", "Deselect all", "T\xFCm\xFCn\xFCn se\xE7imini iptal et");
|
|
240
|
+
injectString("zh-Hans", "Deselect all", "\u53D6\u6D88\u5168\u9009");
|
|
241
|
+
injectString("zh-TW", "Deselect all", "\u53D6\u6D88\u5168\u9078");
|
|
242
|
+
injectString("ro-RO", "Deselect all", "Deselecta\u021Bi tot");
|
|
243
|
+
injectString("ar", "Deselect all", "\u0625\u0644\u063A\u0627\u0621 \u062A\u062D\u062F\u064A\u062F \u0627\u0644\u0643\u0644");
|
|
244
|
+
injectString("lt-LT", "Deselect all", "At\u017Eym\u0117ti visus");
|
|
245
|
+
injectString("lv-LV", "Deselect all", "Atcelt visas atlases");
|
|
246
|
+
injectString("ka-GE", "Deselect all", "\u10E7\u10D5\u10D4\u10DA\u10D0\u10E1 \u10DB\u10DD\u10EE\u10E1\u10DC\u10D0");
|
|
247
|
+
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");
|
|
248
|
+
injectString("et-EE", "Deselect all", "T\xFChista k\xF5ik valikud");
|
|
249
|
+
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");
|
|
217
250
|
injectString("cs", "Select all", "Vybrat v\u0161e");
|
|
218
251
|
injectString("da-DK", "Select all", "V\xE6lg alle");
|
|
219
252
|
injectString("de", "Select all", "Alle ausw\xE4hlen");
|
|
@@ -390,8 +423,7 @@ const DropdownList = ({
|
|
|
390
423
|
onSelect,
|
|
391
424
|
onSingleSelect,
|
|
392
425
|
listData,
|
|
393
|
-
|
|
394
|
-
shouldBlockItems,
|
|
426
|
+
isAllSelected,
|
|
395
427
|
backButtonName,
|
|
396
428
|
width,
|
|
397
429
|
minWidth,
|
|
@@ -420,7 +452,7 @@ const DropdownList = ({
|
|
|
420
452
|
const internalListId = (0, react_1.useId)();
|
|
421
453
|
const selectListId = listId || internalListId;
|
|
422
454
|
const handleSelectAllClick = () => {
|
|
423
|
-
onSelectAllClick(
|
|
455
|
+
onSelectAllClick(isAllSelected);
|
|
424
456
|
};
|
|
425
457
|
const handleBackButtonKeyDown = (0, react_1.useCallback)(event => {
|
|
426
458
|
if (event.key === "ArrowLeft") {
|
|
@@ -448,14 +480,13 @@ const DropdownList = ({
|
|
|
448
480
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
449
481
|
forceSelection ? onSingleSelect(false, newActiveEl || activeValue) : onSingleSelect(false, newActiveEl);
|
|
450
482
|
}, [activeValue, forceSelection, onSingleSelect]);
|
|
451
|
-
const selectButtonLabel = translate("Select all");
|
|
452
|
-
const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown
|
|
483
|
+
const selectButtonLabel = isAllSelected ? translate("Deselect all") : translate("Select all");
|
|
484
|
+
const getActionButton = (label, title, icon, isDisabled, clickHandler, size, onKeyDown) => (0, jsx_runtime_1.jsx)("button", {
|
|
453
485
|
type: "button",
|
|
454
486
|
disabled: isDisabled,
|
|
455
487
|
onClick: clickHandler,
|
|
456
488
|
onKeyDown: onKeyDown,
|
|
457
|
-
"
|
|
458
|
-
className: (0, classNames_1.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" : ""]),
|
|
489
|
+
className: "zen-dropdown-list__item zen-dropdown-list__item--interactive zen-dropdown-list__action-button zen-dropdown-list__action-button-back",
|
|
459
490
|
title: title,
|
|
460
491
|
children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
|
|
461
492
|
children: [react_1.default.createElement(icon, {
|
|
@@ -491,14 +522,11 @@ const DropdownList = ({
|
|
|
491
522
|
});
|
|
492
523
|
return values;
|
|
493
524
|
};
|
|
494
|
-
const multiselectOptions = shouldBlockItems ? listData.map(item => Object.assign(Object.assign({}, item), {
|
|
495
|
-
blocked: true
|
|
496
|
-
})) : listData;
|
|
497
525
|
return (0, jsx_runtime_1.jsx)("div", {
|
|
498
526
|
className: "zen-dropdown-list__elements",
|
|
499
527
|
ref: listElementRef,
|
|
500
528
|
children: isMultiselect ? (0, jsx_runtime_1.jsx)(checkboxListWithAction_1.CheckboxListWithAction, {
|
|
501
|
-
options:
|
|
529
|
+
options: listData,
|
|
502
530
|
label: "",
|
|
503
531
|
onChange: handleChange,
|
|
504
532
|
onClick: handleClick
|
|
@@ -514,7 +542,7 @@ const DropdownList = ({
|
|
|
514
542
|
value: createValue(listData, activeValue)
|
|
515
543
|
})
|
|
516
544
|
});
|
|
517
|
-
}, [listElementRef, isMultiselect,
|
|
545
|
+
}, [listElementRef, isMultiselect, listData, handleChange, handleClick, handleSingleChange, translate, selectListId, forceSelection, activeValue]);
|
|
518
546
|
return (0, jsx_runtime_1.jsxs)("div", Object.assign({
|
|
519
547
|
className: (0, classNames_1.classNames)(["zen-dropdown-list", driveComponentClass || ""])
|
|
520
548
|
}, styleWidth, {
|
|
@@ -532,7 +560,7 @@ const DropdownList = ({
|
|
|
532
560
|
}) : null, backButtonName ? (0, jsx_runtime_1.jsx)("div", {
|
|
533
561
|
className: "zen-dropdown-list__item-wrapper",
|
|
534
562
|
children: getActionButton(backButtonName, translate("Back"), iconBackArrow_1.IconBackArrow, false, onBackButtonClick, "large", handleBackButtonKeyDown)
|
|
535
|
-
}) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, iconCheckRadio_1.IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge"
|
|
563
|
+
}) : null, hasSelectAllButton ? getActionButton(selectButtonLabel, selectButtonLabel, iconCheckRadio_1.IconCheckRadio, !!isSelectAllButtonDisable, handleSelectAllClick, isDrive ? "huger" : "huge") : null, listDataComponent, isWithFooter ? (0, jsx_runtime_1.jsxs)("div", {
|
|
536
564
|
className: "zen-dropdown-list__footer",
|
|
537
565
|
children: [(0, jsx_runtime_1.jsx)(button_1.Button, {
|
|
538
566
|
onClick: isMultiselect ? onClearClick : handleClearClick,
|
|
@@ -561,4 +589,4 @@ const DropdownList = ({
|
|
|
561
589
|
}));
|
|
562
590
|
};
|
|
563
591
|
exports.DropdownList = DropdownList;
|
|
564
|
-
exports.TRANSLATIONS = ["Select all", "Clear", "Back", "No data"];
|
|
592
|
+
exports.TRANSLATIONS = ["Select all", "Deselect all", "Clear", "Back", "No data"];
|
|
@@ -117,10 +117,7 @@ const DropdownRaw = props => {
|
|
|
117
117
|
mobileSheetStackingClassName,
|
|
118
118
|
isError,
|
|
119
119
|
firstParentNodeIsVisible,
|
|
120
|
-
dataAnalyticsId
|
|
121
|
-
hideSelectAllOnSearch = false,
|
|
122
|
-
blockItemsOnSelectAll = false,
|
|
123
|
-
autoPromoteSelectAll = false
|
|
120
|
+
dataAnalyticsId
|
|
124
121
|
} = props;
|
|
125
122
|
const {
|
|
126
123
|
isFormSection
|
|
@@ -158,7 +155,7 @@ const DropdownRaw = props => {
|
|
|
158
155
|
const isQueryMode = (0, react_1.useMemo)(() => typeof getData === "undefined" && typeof dataItems === "undefined", [getData, dataItems]);
|
|
159
156
|
const isCheckboxMode = (0, react_1.useMemo)(() => checkboxLabel && typeof value === "object" && "isChecked" in value && typeof value.isChecked === "boolean" || false, [checkboxLabel, value]);
|
|
160
157
|
const [initialInChecked] = (0, react_1.useState)(isCheckboxMode ? value.isChecked : undefined);
|
|
161
|
-
const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.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
|
|
158
|
+
const [state, dispatchState] = (0, react_1.useReducer)(stateReducer_1.stateReducer, (0, stateReducer_1.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));
|
|
162
159
|
const chipStatus = (0, chipStatusProvider_1.useChipStatus)();
|
|
163
160
|
const isMobile = (0, useMobile_1.useMobile)();
|
|
164
161
|
const popupId = (0, react_1.useId)();
|
|
@@ -896,15 +893,7 @@ const DropdownRaw = props => {
|
|
|
896
893
|
});
|
|
897
894
|
}
|
|
898
895
|
if (state.showList) {
|
|
899
|
-
const isSearchMode =
|
|
900
|
-
const selectAllActiveForCurrentLevel = state.selectAllActiveForId === (state.currentId || state.rootId);
|
|
901
|
-
// DESIGN INTENT: button state (isSelectAllActive) is truth-based — shows pressed whenever
|
|
902
|
-
// all items are actually selected, including after search+clear where selectAllActiveForId
|
|
903
|
-
// was cleared. shouldBlockItems is intent-based — only activates when "Select all" was
|
|
904
|
-
// explicitly clicked (selectAllActiveForCurrentLevel), never from manual individual selection.
|
|
905
|
-
// This asymmetry is intentional: the button restores its visual state post-search, but
|
|
906
|
-
// blocking does not, to avoid unexpected UX when users manually select all items.
|
|
907
|
-
const isAllCurrentLevelSelected = !isSearchMode && !isFullSelectionMode ? (0, dropdownHelper_1.isEveryItemSelected)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds) : false;
|
|
896
|
+
const isSearchMode = state.inputValue && !state.currentId;
|
|
908
897
|
const currentListData = (0, dropdownHelper_1.createListDataOptions)(state, translate, isSearchMode ? (0, dropdownHelper_1.sortDropdownItemArray)(state.listData, sortFn).slice(0, listLimit).filter(el => el.id !== state.rootId) :
|
|
909
898
|
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
|
910
899
|
(0, dropdownHelper_1.sortDropdownItemArray)(((_b = state.groupsMap[state.currentId || state.rootId]) === null || _b === void 0 ? void 0 : _b.children) || [], sortFn).slice(0, listLimit) || [], multiselect, currentAllSelected);
|
|
@@ -920,17 +909,16 @@ const DropdownRaw = props => {
|
|
|
920
909
|
activeValue: state.selectedIds.length ? state.selectedIds[0] : "root",
|
|
921
910
|
backButtonName: state.currentId && state.groupsMap[state.currentId] ? (0, groupsHelper_1.getGroupDescription)(state.groupsMap[state.currentId], translate) : undefined,
|
|
922
911
|
filterName: isMobile ? undefined : filterName,
|
|
923
|
-
|
|
924
|
-
shouldBlockItems: blockItemsOnSelectAll && !state.inputValue && !isFullSelectionMode && selectAllActiveForCurrentLevel,
|
|
912
|
+
isAllSelected: currentAllSelected ? currentAllSelected : isSearchMode ? (0, dropdownHelper_1.isEveryItemSelected)((0, dropdownHelper_1.getListDataWithDisabled)(state.listData, state.isNestedList), state.selectedIds) : currentAllSelected === undefined ? (0, dropdownHelper_1.isAllChildrenSelected)(state, state.currentId || state.rootId) : false,
|
|
925
913
|
isMultiselect: multiselect,
|
|
926
914
|
forceSelection: forceSelection,
|
|
927
915
|
listData: currentListData,
|
|
928
916
|
width: width || currentWidth === 180 ? undefined : currentWidth,
|
|
929
917
|
minWidth: currentWidth,
|
|
930
|
-
hasSelectAllButton: selectAllButton && multiselect
|
|
918
|
+
hasSelectAllButton: selectAllButton && multiselect,
|
|
931
919
|
hasApplyButton: hasApplyButton,
|
|
932
920
|
isApplyDisabled: memoizedIsApplyButtonDisabled,
|
|
933
|
-
isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode && state.isNestedList && (0, dropdownHelper_1.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)),
|
|
921
|
+
isSelectAllButtonDisable: currentListData.length === 0 || isSearchMode !== "" && state.isNestedList && (0, dropdownHelper_1.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)),
|
|
934
922
|
isClearButtonDisabled: memoizedIsClearButtonDisabled,
|
|
935
923
|
isWithFooter: memoizedWithFooter && !isMobile,
|
|
936
924
|
isMobile: isMobile,
|
|
@@ -942,7 +930,7 @@ const DropdownRaw = props => {
|
|
|
942
930
|
});
|
|
943
931
|
}
|
|
944
932
|
return null;
|
|
945
|
-
}, [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,
|
|
933
|
+
}, [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]);
|
|
946
934
|
const currentStringFromSelected = isFullSelectionMode && hasApplyButton && state.globalIsAllSelected || isFullSelectionMode && !hasApplyButton && state.isAllSelected ? (0, dropdownHelper_1.getStringFromAllSelected)(state.groupsMap, translate, state.rootId) : (0, dropdownHelper_1.getStringFromSelected)(hasApplyButton ? state.globalSelectedIds : state.selectedIds, state.groupsMapSelected, translate, state.rootId);
|
|
947
935
|
const memoizedCurrentSelection = (0, react_1.useMemo)(() => showSelection && !state.inputValue ? currentStringFromSelected : "", [showSelection, state.inputValue, currentStringFromSelected]);
|
|
948
936
|
const parentTriggerWidth = ((_b = comboboxRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect().width) || 420;
|
|
@@ -1041,4 +1029,4 @@ const DropdownRaw = props => {
|
|
|
1041
1029
|
};
|
|
1042
1030
|
exports.DropdownRaw = DropdownRaw;
|
|
1043
1031
|
exports.DropdownRaw.displayName = "DropdownRaw";
|
|
1044
|
-
exports.TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];
|
|
1032
|
+
exports.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;
|
|
@@ -6,7 +6,7 @@ const stateActionType_1 = require("./stateActionType");
|
|
|
6
6
|
const stateReducerHelper_1 = require("./stateReducerHelper");
|
|
7
7
|
const groupsFilterHelper_1 = require("../../groupsFilterRaw/groupsFilterHelper");
|
|
8
8
|
exports.ROOT_GROUP_ID = "zen_dropdown_root_group_id";
|
|
9
|
-
const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked, firstParentNodeIsVisible
|
|
9
|
+
const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit, defaultValue, isAllSelected, defaultValueIsAllSelected, isChecked, defaultValueIsChecked, firstParentNodeIsVisible) => {
|
|
10
10
|
const updatedGroupsMapSelected = new Map();
|
|
11
11
|
const updatedGroupsMap = comboItems.length ? (0, groupsFilterHelper_1.createGroupsMap)(comboItems, exports.ROOT_GROUP_ID) : {};
|
|
12
12
|
const namelessIds = new Set();
|
|
@@ -51,8 +51,7 @@ const getInitialState = (isFullSelectionMode, comboItems, selection, listLimit,
|
|
|
51
51
|
globalIsChecked: isChecked,
|
|
52
52
|
listLimit,
|
|
53
53
|
resultsExceedListLimit: false,
|
|
54
|
-
firstParentNodeIsVisible: firstParentNodeIsVisible
|
|
55
|
-
autoPromoteSelectAll: autoPromoteSelectAll
|
|
54
|
+
firstParentNodeIsVisible: firstParentNodeIsVisible
|
|
56
55
|
};
|
|
57
56
|
};
|
|
58
57
|
exports.getInitialState = getInitialState;
|
|
@@ -77,14 +76,12 @@ function stateReducer(state, action) {
|
|
|
77
76
|
}
|
|
78
77
|
});
|
|
79
78
|
}
|
|
80
|
-
const
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
const
|
|
84
|
-
const selectedInNewMap = state.selectedIds.filter(id => id in updatedGroupsMap).length - newNamelessIds.size;
|
|
85
|
-
const newIsAllSelected = (0, stateReducerHelper_1.computeIsAllSelected)(state.isAllSelected, state.isFullSelectionMode, newResultsExceedListLimit, groupsMapLength, selectedInNewMap);
|
|
79
|
+
const isCurrentListNested = Object.keys(updatedGroupsMap).length > 0 &&
|
|
80
|
+
(updatedGroupsMap[exports.ROOT_GROUP_ID].children || []).some(el => el.children && el.children.length);
|
|
81
|
+
state.groupsMap = updatedGroupsMap;
|
|
82
|
+
const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, state.selectedIds.length - newNamelessIds.size);
|
|
86
83
|
const rootId = (0, stateReducerHelper_1.getRootId)(updatedGroupsMap, exports.ROOT_GROUP_ID, state.firstParentNodeIsVisible);
|
|
87
|
-
return Object.assign(Object.assign({}, state), {
|
|
84
|
+
return Object.assign(Object.assign(Object.assign({}, state), { rootId: rootId || exports.ROOT_GROUP_ID, namelessIds: newNamelessIds, isNestedList: state.isNestedList ? state.isNestedList : isCurrentListNested, resultsExceedListLimit: Object.keys(updatedGroupsMap).length - 1 >= state.listLimit }), additionalStateUpdates);
|
|
88
85
|
}
|
|
89
86
|
case stateActionType_1.StateActionType.SetListData: {
|
|
90
87
|
state.selectedIds.forEach(id => {
|
|
@@ -109,9 +106,9 @@ function stateReducer(state, action) {
|
|
|
109
106
|
case stateActionType_1.StateActionType.SetIsOpenCombo:
|
|
110
107
|
return Object.assign(Object.assign({}, state), { isOpenCombo: payload });
|
|
111
108
|
case stateActionType_1.StateActionType.ResetSelection:
|
|
112
|
-
return Object.assign(Object.assign({}, state), { selectedIds: [...state.defaultValue], isAllSelected: state.defaultValueIsAllSelected, isChecked: typeof state.isChecked === "boolean" ? state.defaultValueIsChecked || false : undefined
|
|
109
|
+
return Object.assign(Object.assign({}, state), { selectedIds: [...state.defaultValue], isAllSelected: state.defaultValueIsAllSelected, isChecked: typeof state.isChecked === "boolean" ? state.defaultValueIsChecked || false : undefined });
|
|
113
110
|
case stateActionType_1.StateActionType.ResetStateToGlobal:
|
|
114
|
-
return Object.assign(Object.assign({}, state), { selectedIds: [...state.globalSelectedIds], isAllSelected: state.globalIsAllSelected, isChecked: state.globalIsChecked
|
|
111
|
+
return Object.assign(Object.assign({}, state), { selectedIds: [...state.globalSelectedIds], isAllSelected: state.globalIsAllSelected, isChecked: state.globalIsChecked });
|
|
115
112
|
case stateActionType_1.StateActionType.NothingToShow:
|
|
116
113
|
return Object.assign(Object.assign({}, state), { showWaiting: false, showEmptyList: false, showList: false });
|
|
117
114
|
case stateActionType_1.StateActionType.Show:
|
|
@@ -123,7 +120,7 @@ function stateReducer(state, action) {
|
|
|
123
120
|
case stateActionType_1.StateActionType.ShowList:
|
|
124
121
|
return Object.assign(Object.assign({}, state), { showWaiting: false, showEmptyList: false, showList: true });
|
|
125
122
|
case stateActionType_1.StateActionType.SetInputValue:
|
|
126
|
-
return Object.assign(Object.assign({}, state), { inputValue: payload
|
|
123
|
+
return Object.assign(Object.assign({}, state), { inputValue: payload });
|
|
127
124
|
case stateActionType_1.StateActionType.SetState: {
|
|
128
125
|
const newNamelessIds = new Set(state.namelessIds);
|
|
129
126
|
payload.selected.forEach(id => {
|
|
@@ -227,10 +224,8 @@ function stateReducer(state, action) {
|
|
|
227
224
|
state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
|
|
228
225
|
}
|
|
229
226
|
});
|
|
230
|
-
const
|
|
231
|
-
|
|
232
|
-
: state.isAllSelected;
|
|
233
|
-
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds), selectAllActiveForId: undefined, isAllSelected: newIsAllSelected });
|
|
227
|
+
const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, currentSelectedIds.size);
|
|
228
|
+
return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
|
|
234
229
|
}
|
|
235
230
|
case stateActionType_1.StateActionType.ChangeBulkSelection: {
|
|
236
231
|
const { itemsIds, value } = payload;
|
|
@@ -263,10 +258,8 @@ function stateReducer(state, action) {
|
|
|
263
258
|
state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
|
|
264
259
|
}
|
|
265
260
|
});
|
|
266
|
-
const
|
|
267
|
-
|
|
268
|
-
: state.isAllSelected;
|
|
269
|
-
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds), selectAllActiveForId: undefined, isAllSelected: newIsAllSelected });
|
|
261
|
+
const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, currentSelectedIds.size);
|
|
262
|
+
return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: Array.from(currentSelectedIds) }), additionalStateUpdates);
|
|
270
263
|
}
|
|
271
264
|
case stateActionType_1.StateActionType.SelectAllChildren: {
|
|
272
265
|
const currentEl = state.groupsMap[payload];
|
|
@@ -303,7 +296,7 @@ function stateReducer(state, action) {
|
|
|
303
296
|
state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
|
|
304
297
|
}
|
|
305
298
|
});
|
|
306
|
-
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected)
|
|
299
|
+
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
|
|
307
300
|
}
|
|
308
301
|
case stateActionType_1.StateActionType.DeselectItemsFromAllSelected: {
|
|
309
302
|
const currentEl = state.groupsMap[state.rootId];
|
|
@@ -327,16 +320,12 @@ function stateReducer(state, action) {
|
|
|
327
320
|
state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
|
|
328
321
|
}
|
|
329
322
|
});
|
|
330
|
-
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), isAllSelected: state.isFullSelectionMode ? false : undefined
|
|
323
|
+
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected), isAllSelected: state.isFullSelectionMode ? false : undefined });
|
|
331
324
|
}
|
|
332
325
|
case stateActionType_1.StateActionType.ToggleValueForAllSelected: {
|
|
333
326
|
const currentEl = state.groupsMap[state.rootId];
|
|
334
|
-
// selectAllActiveForId tracks when "Select all" was clicked at this level, even when
|
|
335
|
-
// autoPromoteSelectAll=false keeps isAllSelected=false. Without this fallback, a second
|
|
336
|
-
// click would incorrectly clear selections and leave the button stuck as pressed.
|
|
337
|
-
const effectiveIsAllSelected = !!state.isAllSelected || state.selectAllActiveForId === (state.currentId || state.rootId);
|
|
338
327
|
const newSelected = new Set();
|
|
339
|
-
|
|
328
|
+
state.isAllSelected &&
|
|
340
329
|
((currentEl === null || currentEl === void 0 ? void 0 : currentEl.children) || []).forEach(el => {
|
|
341
330
|
if (!newSelected.has(el.id) && el.disabled) {
|
|
342
331
|
newSelected.add(el.id);
|
|
@@ -349,8 +338,9 @@ function stateReducer(state, action) {
|
|
|
349
338
|
state.groupsMapSelected.set(id, Object.assign(Object.assign({ id }, (item.name ? { name: item.name } : {})), (item.color ? { color: item.color } : {})));
|
|
350
339
|
}
|
|
351
340
|
});
|
|
352
|
-
const updatedIsAllSelectedValue = state.isFullSelectionMode ? !
|
|
353
|
-
|
|
341
|
+
const updatedIsAllSelectedValue = state.isFullSelectionMode ? !state.isAllSelected : undefined;
|
|
342
|
+
const additionalStateUpdates = (0, stateReducerHelper_1.updateAllSelectedStateValueBasedOnTotalSelected)(state, newSelected.size);
|
|
343
|
+
return Object.assign(Object.assign(Object.assign({}, state), { selectedIds: state.isAllSelected ? Array.from(newSelected) : [], isAllSelected: updatedIsAllSelectedValue }), additionalStateUpdates);
|
|
354
344
|
}
|
|
355
345
|
case stateActionType_1.StateActionType.DeselectAllChildren: {
|
|
356
346
|
const childrenForDeselect = [];
|
|
@@ -362,7 +352,7 @@ function stateReducer(state, action) {
|
|
|
362
352
|
});
|
|
363
353
|
const newSelected = new Set(state.selectedIds);
|
|
364
354
|
childrenForDeselect.forEach(childId => newSelected.delete(childId));
|
|
365
|
-
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected)
|
|
355
|
+
return Object.assign(Object.assign({}, state), { selectedIds: Array.from(newSelected) });
|
|
366
356
|
}
|
|
367
357
|
case stateActionType_1.StateActionType.SetFirstParentNodeIsVisible: {
|
|
368
358
|
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;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.getRootId = exports.
|
|
3
|
+
exports.getRootId = exports.updateAllSelectedStateValueBasedOnTotalSelected = void 0;
|
|
4
4
|
exports.getChildList = getChildList;
|
|
5
5
|
const groupsHelper_1 = require("../../groupsFilterRaw/groupsHelper");
|
|
6
6
|
function getChildList(childArr) {
|
|
@@ -17,12 +17,17 @@ function getChildList(childArr) {
|
|
|
17
17
|
});
|
|
18
18
|
return list;
|
|
19
19
|
}
|
|
20
|
-
const
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
const updateAllSelectedStateValueBasedOnTotalSelected = (state, totalSelected) => {
|
|
21
|
+
const additionalStateUpdates = {};
|
|
22
|
+
const groupsMapLength = Object.keys(state.groupsMap).length - 1;
|
|
23
|
+
if (!state.resultsExceedListLimit && !state.isAllSelected && state.isFullSelectionMode && groupsMapLength > 0) {
|
|
24
|
+
if (totalSelected >= groupsMapLength) {
|
|
25
|
+
additionalStateUpdates.isAllSelected = true;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
return additionalStateUpdates;
|
|
29
|
+
};
|
|
30
|
+
exports.updateAllSelectedStateValueBasedOnTotalSelected = updateAllSelectedStateValueBasedOnTotalSelected;
|
|
26
31
|
const getRootId = (groupsMap, rootIdKey, firstParentNodeIsVisible) => {
|
|
27
32
|
var _a;
|
|
28
33
|
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;
|
package/dist/index.css
CHANGED
|
@@ -1863,6 +1863,7 @@ html:lang(ar) .mobile-data-s-drive {
|
|
|
1863
1863
|
}
|
|
1864
1864
|
}
|
|
1865
1865
|
:root {
|
|
1866
|
+
fill: var(--text-primary);
|
|
1866
1867
|
--text-primary: #1f2833;
|
|
1867
1868
|
--text-secondary: #4e677e;
|
|
1868
1869
|
--text-placeholder: #8da4b9;
|
|
@@ -1928,6 +1929,7 @@ html:lang(ar) .mobile-data-s-drive {
|
|
|
1928
1929
|
}
|
|
1929
1930
|
.zen-dark {
|
|
1930
1931
|
color: var(--text-primary);
|
|
1932
|
+
fill: var(--text-primary);
|
|
1931
1933
|
--text-primary: #ffffff;
|
|
1932
1934
|
--text-secondary: #c0ccd8;
|
|
1933
1935
|
--text-placeholder: #a6b8c9;
|
|
@@ -2703,7 +2705,6 @@ html:lang(ar) .zen-button--mobile {
|
|
|
2703
2705
|
width: 11px;
|
|
2704
2706
|
height: 11px;
|
|
2705
2707
|
display: inline;
|
|
2706
|
-
fill: currentcolor;
|
|
2707
2708
|
}
|
|
2708
2709
|
.zen-icon * {
|
|
2709
2710
|
box-sizing: border-box;
|
|
@@ -5503,12 +5504,10 @@ html:lang(ar) .zen-checkbox__label-text {
|
|
|
5503
5504
|
.zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__label {
|
|
5504
5505
|
fill: var(--text-reverse-primary);
|
|
5505
5506
|
color: var(--text-button-disabled);
|
|
5506
|
-
cursor: default;
|
|
5507
5507
|
}
|
|
5508
5508
|
.zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__box {
|
|
5509
5509
|
border-color: var(--borders-general);
|
|
5510
5510
|
background-color: var(--backgrounds-field-disabled);
|
|
5511
|
-
cursor: default;
|
|
5512
5511
|
}
|
|
5513
5512
|
.zen-checkbox:has(.zen-checkbox__input:disabled:checked) .zen-checkbox__box,
|
|
5514
5513
|
.zen-checkbox:has(.zen-checkbox__input:disabled:indeterminate) .zen-checkbox__box {
|
|
@@ -8223,11 +8222,6 @@ html:lang(ar) .zen-checkbox-list-with-action__label {
|
|
|
8223
8222
|
color: var(--text-hyperlink);
|
|
8224
8223
|
fill: var(--text-hyperlink);
|
|
8225
8224
|
}
|
|
8226
|
-
.zen-checkbox-list-with-action__label--action:disabled {
|
|
8227
|
-
cursor: default;
|
|
8228
|
-
color: var(--text-button-disabled);
|
|
8229
|
-
fill: var(--text-button-disabled);
|
|
8230
|
-
}
|
|
8231
8225
|
.zen-checkbox-list-with-action__label-text {
|
|
8232
8226
|
display: flex;
|
|
8233
8227
|
flex-grow: 1;
|
|
@@ -8496,27 +8490,6 @@ html:lang(ar) .zen-dropdown-list__action-label {
|
|
|
8496
8490
|
.zen-dropdown-list__action-button:disabled svg {
|
|
8497
8491
|
fill: var(--text-button-disabled);
|
|
8498
8492
|
}
|
|
8499
|
-
.zen-dropdown-list__action-button--selected {
|
|
8500
|
-
background-color: var(--action-primary--default);
|
|
8501
|
-
}
|
|
8502
|
-
.zen-dropdown-list__action-button--selected.zen-dropdown-list__item--interactive:not(:disabled):hover,
|
|
8503
|
-
.zen-dropdown-list__action-button--selected.zen-dropdown-list__item--interactive:not(:disabled):focus {
|
|
8504
|
-
background-color: var(--action-primary--default);
|
|
8505
|
-
fill: var(--text-reverse-primary);
|
|
8506
|
-
color: var(--text-reverse-primary);
|
|
8507
|
-
}
|
|
8508
|
-
.zen-dropdown-list__action-button--selected.zen-dropdown-list__item--interactive:not(:disabled):focus-visible {
|
|
8509
|
-
border-color: var(--backgrounds-content-1);
|
|
8510
|
-
outline: 1px solid var(--borders-form-field--active);
|
|
8511
|
-
outline-offset: 2px;
|
|
8512
|
-
}
|
|
8513
|
-
.zen-dropdown-list__action-button--selected .zen-dropdown-list__icon {
|
|
8514
|
-
color: var(--text-reverse-primary);
|
|
8515
|
-
fill: var(--text-reverse-primary);
|
|
8516
|
-
}
|
|
8517
|
-
.zen-dropdown-list__action-button--selected .zen-dropdown-list__action-label {
|
|
8518
|
-
color: var(--text-reverse-primary);
|
|
8519
|
-
}
|
|
8520
8493
|
.zen-dropdown-list__footer {
|
|
8521
8494
|
display: flex;
|
|
8522
8495
|
justify-content: flex-start;
|
package/esm/dropdown/dropdown.js
CHANGED
|
@@ -20,4 +20,4 @@ export const Dropdown = (_a) => {
|
|
|
20
20
|
var props = __rest(_a, []);
|
|
21
21
|
return _jsx(DropDownFormField, Object.assign({}, props));
|
|
22
22
|
};
|
|
23
|
-
export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Clear", "Back", "No data"];
|
|
23
|
+
export const TRANSLATIONS = ["Filter by group", "Open filter", "Clear search", "Select all", "Deselect all", "Clear", "Back", "No data"];
|
|
@@ -13,8 +13,7 @@ export interface IDropdownList extends IZenComponentProps {
|
|
|
13
13
|
onSelect: (id: string) => void;
|
|
14
14
|
onSingleSelect: (reset: boolean, selected?: string) => void;
|
|
15
15
|
backButtonName?: string;
|
|
16
|
-
|
|
17
|
-
shouldBlockItems?: boolean;
|
|
16
|
+
isAllSelected: boolean;
|
|
18
17
|
listData: ICheckboxListWithActionOption[] | ISelectListItem[];
|
|
19
18
|
isWithFooter: boolean;
|
|
20
19
|
width?: number;
|
|
@@ -40,6 +39,6 @@ interface IDropdownEmptyList extends Pick<IDropdownList, "className" | "width" |
|
|
|
40
39
|
hasError: boolean;
|
|
41
40
|
}
|
|
42
41
|
export declare const EmptyList: ({ className, width, onClearClick, onApplyClick, onCancelClick, hasApplyButton, isApplyDisabled, isClearButtonDisabled, isWithFooter, hasError }: IDropdownEmptyList) => import("react/jsx-runtime").JSX.Element;
|
|
43
|
-
export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData,
|
|
42
|
+
export declare const DropdownList: ({ onBackButtonClick, onSelectAllClick, onClearClick, onApplyClick, onCancelClick, onChange, onSelect, onSingleSelect, listData, isAllSelected, backButtonName, width, minWidth, isSelectAllButtonDisable, hasSelectAllButton, filterName, isMultiselect, hasApplyButton, isApplyDisabled, isClearButtonDisabled, activeValue, forceSelection, isWithFooter, isMobile, handleCheckboxChange, checkboxLabel, isChecked, listElementRef, listId }: IDropdownList) => import("react/jsx-runtime").JSX.Element;
|
|
44
43
|
export declare const TRANSLATIONS: string[];
|
|
45
44
|
export {};
|
|
@@ -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;
|