@geotab/zenith 3.15.0-beta.1 → 3.15.0-beta.3
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 -3
- 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 +20 -66
- 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 +2 -2
package/README.md
CHANGED
|
@@ -55,11 +55,8 @@ Zenith library provides components defined in Zenith Design System. It includes
|
|
|
55
55
|
- Update `Nav` CSS styling
|
|
56
56
|
- Add `active` property support to `Footer.Action` component
|
|
57
57
|
- Add native accessible loading-status support (`isLoading` prop with live-region) to `Waiting`
|
|
58
|
-
- Add status dot and label support to `Tag` component
|
|
59
58
|
- Add "trend, neutral" icon to icon library
|
|
60
|
-
- Improve select-all behavior in search for `Dropdown`
|
|
61
59
|
- Add new icons (`IconAce`, `IconBreak`, `IconChevronStepper` and more)
|
|
62
|
-
- Add `ProgressIndicator` — new table-cell progress component
|
|
63
60
|
- Fix `DropdownRaw` single-select mode not auto-closing after leaf node selection
|
|
64
61
|
- Fix second Y-axis chart increments not aligning with first Y-axis
|
|
65
62
|
- Fix `EmptyState` component not adapting to dark mode in Drive app
|
|
@@ -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;
|
|
@@ -3344,17 +3345,15 @@ html:lang(ar) .zen-tooltip__title {
|
|
|
3344
3345
|
/* stylelint-enable */
|
|
3345
3346
|
}
|
|
3346
3347
|
.zen-tooltip__arrow--top {
|
|
3347
|
-
|
|
3348
|
-
|
|
3349
|
-
border-color: var(--backgrounds-content-1)
|
|
3350
|
-
border-width: 6px 5px 0 5px;
|
|
3348
|
+
top: 100%;
|
|
3349
|
+
left: 50%;
|
|
3350
|
+
border-top-color: var(--backgrounds-content-1);
|
|
3351
3351
|
filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.2));
|
|
3352
3352
|
}
|
|
3353
3353
|
.zen-tooltip__arrow--bottom {
|
|
3354
3354
|
bottom: 100%;
|
|
3355
|
-
|
|
3356
|
-
border-color:
|
|
3357
|
-
border-width: 0 5px 6px 5px;
|
|
3355
|
+
left: 0.875rem;
|
|
3356
|
+
border-bottom-color: var(--backgrounds-content-1);
|
|
3358
3357
|
filter: drop-shadow(0 -4px 4px rgba(0, 0, 0, 0.2));
|
|
3359
3358
|
}
|
|
3360
3359
|
.zen-tooltip__arrow--right {
|
|
@@ -5503,12 +5502,10 @@ html:lang(ar) .zen-checkbox__label-text {
|
|
|
5503
5502
|
.zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__label {
|
|
5504
5503
|
fill: var(--text-reverse-primary);
|
|
5505
5504
|
color: var(--text-button-disabled);
|
|
5506
|
-
cursor: default;
|
|
5507
5505
|
}
|
|
5508
5506
|
.zen-checkbox:has(.zen-checkbox__input:disabled) .zen-checkbox__box {
|
|
5509
5507
|
border-color: var(--borders-general);
|
|
5510
5508
|
background-color: var(--backgrounds-field-disabled);
|
|
5511
|
-
cursor: default;
|
|
5512
5509
|
}
|
|
5513
5510
|
.zen-checkbox:has(.zen-checkbox__input:disabled:checked) .zen-checkbox__box,
|
|
5514
5511
|
.zen-checkbox:has(.zen-checkbox__input:disabled:indeterminate) .zen-checkbox__box {
|
|
@@ -8223,11 +8220,6 @@ html:lang(ar) .zen-checkbox-list-with-action__label {
|
|
|
8223
8220
|
color: var(--text-hyperlink);
|
|
8224
8221
|
fill: var(--text-hyperlink);
|
|
8225
8222
|
}
|
|
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
8223
|
.zen-checkbox-list-with-action__label-text {
|
|
8232
8224
|
display: flex;
|
|
8233
8225
|
flex-grow: 1;
|
|
@@ -8496,27 +8488,6 @@ html:lang(ar) .zen-dropdown-list__action-label {
|
|
|
8496
8488
|
.zen-dropdown-list__action-button:disabled svg {
|
|
8497
8489
|
fill: var(--text-button-disabled);
|
|
8498
8490
|
}
|
|
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
8491
|
.zen-dropdown-list__footer {
|
|
8521
8492
|
display: flex;
|
|
8522
8493
|
justify-content: flex-start;
|
|
@@ -13341,9 +13312,6 @@ html:lang(ar) .zen-file-upload__file-name {
|
|
|
13341
13312
|
.zen-filters__main-row:hover .zen-search-input__input {
|
|
13342
13313
|
background-color: var(--backgrounds-content-0);
|
|
13343
13314
|
}
|
|
13344
|
-
.zen-filters__main-row--mobile {
|
|
13345
|
-
margin: 0.5rem;
|
|
13346
|
-
}
|
|
13347
13315
|
.zen-filters__main-row--initial {
|
|
13348
13316
|
view-transition-name: expand-panel;
|
|
13349
13317
|
}
|
|
@@ -13461,21 +13429,17 @@ html:lang(ar) .zen-file-upload__file-name {
|
|
|
13461
13429
|
}
|
|
13462
13430
|
.zen-filters-popup__content .zen-filters-popup__right-panel {
|
|
13463
13431
|
flex-grow: 1;
|
|
13464
|
-
|
|
13465
|
-
|
|
13466
|
-
|
|
13467
|
-
.zen-filters-popup.zen-filters-popup--mobile {
|
|
13468
|
-
width: 100%;
|
|
13469
|
-
max-width: 100%;
|
|
13470
|
-
view-transition-name: expand-panel;
|
|
13471
|
-
}
|
|
13472
|
-
.zen-filters-popup.zen-filters-popup--mobile .zen-filters-popup__right-panel {
|
|
13432
|
+
display: flex;
|
|
13433
|
+
flex-direction: column;
|
|
13434
|
+
min-height: 0;
|
|
13473
13435
|
max-width: 100%;
|
|
13474
13436
|
}
|
|
13475
13437
|
.zen-filters-container {
|
|
13476
13438
|
display: flex;
|
|
13477
13439
|
flex-direction: row;
|
|
13478
13440
|
flex-wrap: wrap;
|
|
13441
|
+
flex-grow: 1;
|
|
13442
|
+
min-width: 0;
|
|
13479
13443
|
gap: 0.25rem;
|
|
13480
13444
|
margin-block-start: 0;
|
|
13481
13445
|
padding: 0.5rem 0;
|
|
@@ -13534,9 +13498,6 @@ html:lang(ar) .zen-file-upload__file-name {
|
|
|
13534
13498
|
.zen-filters-container__mobile-scroll-wrapper > * {
|
|
13535
13499
|
flex-shrink: 0;
|
|
13536
13500
|
}
|
|
13537
|
-
.zen-filters-container__mobile-scroll-wrapper:last-child {
|
|
13538
|
-
margin-inline-end: 0.5rem;
|
|
13539
|
-
}
|
|
13540
13501
|
.zen-filters-container.zen-filters__container--no-search {
|
|
13541
13502
|
margin-block-start: 0;
|
|
13542
13503
|
padding: 0;
|
|
@@ -14762,7 +14723,6 @@ html:lang(ar) .zen-list-item__secondary {
|
|
|
14762
14723
|
}
|
|
14763
14724
|
.zen-filters-search-list--mobile {
|
|
14764
14725
|
padding: 1rem 0;
|
|
14765
|
-
overflow-y: auto;
|
|
14766
14726
|
}
|
|
14767
14727
|
.zen-filters-search-list__header {
|
|
14768
14728
|
display: flex;
|
|
@@ -14785,9 +14745,10 @@ html:lang(ar) .zen-list-item__secondary {
|
|
|
14785
14745
|
html:lang(ar) .zen-filters-search-list__header-title {
|
|
14786
14746
|
font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
|
|
14787
14747
|
}
|
|
14788
|
-
.zen-filters-search-
|
|
14789
|
-
|
|
14790
|
-
|
|
14748
|
+
.zen-filters-search-list__header-actions {
|
|
14749
|
+
display: flex;
|
|
14750
|
+
align-items: center;
|
|
14751
|
+
gap: 0.25rem;
|
|
14791
14752
|
}
|
|
14792
14753
|
.zen-filters-search-list .zen-filters-search-list__header--drive .zen-filters-search-list__header-title {
|
|
14793
14754
|
font-family: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
|
|
@@ -16477,13 +16438,11 @@ html:lang(ar) .zen-filters-saved-popup__content.zen-filters-saved-popup__content
|
|
|
16477
16438
|
min-width: 1.375rem;
|
|
16478
16439
|
justify-content: center;
|
|
16479
16440
|
}
|
|
16480
|
-
.zen-filters-search.zen-filters-popup__search-with-pills
|
|
16441
|
+
.zen-filters-search.zen-filters-popup__search-with-pills {
|
|
16481
16442
|
margin: 0;
|
|
16482
16443
|
padding: 0 0.75rem;
|
|
16483
|
-
border: var(--border-width-default) solid var(--borders-general);
|
|
16484
|
-
border-radius: var(--border-radius-default);
|
|
16485
16444
|
}
|
|
16486
|
-
.zen-filters-search.zen-filters-popup__search-with-pills
|
|
16445
|
+
.zen-filters-search.zen-filters-popup__search-with-pills .zen-filters-search__selected {
|
|
16487
16446
|
flex-shrink: 0;
|
|
16488
16447
|
}
|
|
16489
16448
|
.zen-filters-search--mobile {
|
|
@@ -16708,14 +16667,9 @@ html:lang(ar) .zen-side-panel-filters__item-label--mobile {
|
|
|
16708
16667
|
padding-block: 1rem 0.25rem;
|
|
16709
16668
|
padding-inline: 1rem;
|
|
16710
16669
|
width: 100%;
|
|
16670
|
+
box-sizing: border-box;
|
|
16711
16671
|
overflow-x: auto;
|
|
16712
|
-
-
|
|
16713
|
-
/* IE and Edge */
|
|
16714
|
-
scrollbar-width: none;
|
|
16715
|
-
/* Firefox */
|
|
16716
|
-
}
|
|
16717
|
-
.zen-filters-select-compact::-webkit-scrollbar {
|
|
16718
|
-
display: none;
|
|
16672
|
+
flex-shrink: 0;
|
|
16719
16673
|
}
|
|
16720
16674
|
.zen-filters-select-compact__list {
|
|
16721
16675
|
display: flex;
|
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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@geotab/zenith",
|
|
3
|
-
"version": "3.15.0-beta.
|
|
3
|
+
"version": "3.15.0-beta.3",
|
|
4
4
|
"description": "Zenith components library on React",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "esm/index.d.ts",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"build-less": "node less-compile.js",
|
|
26
26
|
"build-storybook": "storybook build && npm run build-ai-mdx",
|
|
27
27
|
"build-ts": "npm run build-esm && npm run build-cjs && npm run inject-translations && node less-transformer.js",
|
|
28
|
-
"clean": "rm -rf ./dist && rm -rf ./esm && rm -rf ./jest-coverage",
|
|
28
|
+
"clean": "rm -rf ./dist && rm -rf ./esm && rm -rf ./jest-coverage && rm -rf ./.temp_cache",
|
|
29
29
|
"coverage": "npm run test-coverage && google-chrome ./jest-coverage/index.html",
|
|
30
30
|
"inject-translations": "node build-utils/translations/inject-translations.js",
|
|
31
31
|
"lint": "npx eslint",
|