diff --git a/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts b/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts
index 1d86ba4f7c..5784ae7083 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/select-all/SelectAllModule.container.ts
@@ -4,7 +4,7 @@ import { generateUUID } from "@mendix/widget-plugin-platform/framework/generate-
import { Container, injected } from "brandi";
import { SelectAllFeature } from "@mendix/widget-plugin-grid/select-all/select-all.feature";
-import { selectAllEmitter, selectAllTextsStore } from "@mendix/widget-plugin-grid/select-all/select-all.model";
+import { selectAllEmitter } from "@mendix/widget-plugin-grid/select-all/select-all.model";
import { SelectAllBarStore } from "@mendix/widget-plugin-grid/select-all/SelectAllBar.store";
import { DerivedPropsGate } from "@mendix/widget-plugin-mobx-kit/main";
import { MainGateProps } from "../../../typings/MainGateProps";
@@ -13,21 +13,12 @@ import { CORE_TOKENS as CORE, DG_TOKENS as DG, SA_TOKENS } from "../../model/tok
import { SelectAllBarViewModel } from "./SelectAllBar.viewModel";
import { SelectionProgressDialogViewModel } from "./SelectionProgressDialog.viewModel";
-injected(
- selectAllTextsStore,
- SA_TOKENS.gate,
- CORE.selection.selectedCount,
- CORE.selection.selectedCounterTextsStore,
- CORE.atoms.totalCount,
- CORE.selection.isAllItemsSelected
-);
-
injected(
SelectAllBarViewModel,
SA_TOKENS.emitter,
SA_TOKENS.barStore,
CORE.selection.selectedCounterTextsStore,
- SA_TOKENS.selectAllTextsStore,
+ CORE.selection.selectAllTexts,
SA_TOKENS.enableSelectAll
);
@@ -62,7 +53,6 @@ export class SelectAllModule extends Container {
this.bind(SA_TOKENS.emitter).toInstance(selectAllEmitter).inSingletonScope();
this.bind(DG.query).toInstance(DatasourceService).inSingletonScope();
this.bind(SA_TOKENS.selectAllService).toInstance(SelectAllService).inSingletonScope();
- this.bind(SA_TOKENS.selectAllTextsStore).toInstance(selectAllTextsStore).inSingletonScope();
this.bind(SA_TOKENS.selectAllBarVM).toInstance(SelectAllBarViewModel).inSingletonScope();
this.bind(SA_TOKENS.selectionDialogVM).toInstance(SelectionProgressDialogViewModel).inSingletonScope();
this.bind(SA_TOKENS.feature).toInstance(SelectAllFeature).inSingletonScope();
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionAriaLive.tsx b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionAriaLive.tsx
new file mode 100644
index 0000000000..7ea88f4b45
--- /dev/null
+++ b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionAriaLive.tsx
@@ -0,0 +1,12 @@
+import { observer } from "mobx-react-lite";
+import { useSelectionCounterTexts } from "./injection-hooks";
+
+export const SelectionAriaLive = observer(function SelectionAriaLive() {
+ const texts = useSelectionCounterTexts();
+
+ return (
+
+ {texts.selectedCountText}
+
+ );
+});
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx
index 978025e56d..53aea617c2 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx
+++ b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/SelectionCounter.tsx
@@ -8,9 +8,7 @@ export const SelectionCounter = observer(function SelectionCounter() {
return (
-
- {selectionCountStore.selectedCountText}
-
+ {selectionCountStore.selectedCountText}
|
selectActions.clearSelection()}>
{selectionCountStore.clearButtonLabel}
diff --git a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/injection-hooks.ts
index 519c6fe216..0021710be8 100644
--- a/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/features/selection-counter/injection-hooks.ts
@@ -1,4 +1,5 @@
import { createInjectionHooks } from "brandi-react";
-import { DG_TOKENS } from "../../model/tokens";
+import { CORE_TOKENS, DG_TOKENS } from "../../model/tokens";
export const [useSelectionCounterViewModel] = createInjectionHooks(DG_TOKENS.selectionCounterVM);
+export const [useSelectionCounterTexts] = createInjectionHooks(CORE_TOKENS.selection.selectedCounterTextsStore);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
index 30ee19b4b9..3c3210fba6 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/containers/Root.container.ts
@@ -9,6 +9,7 @@ import {
import {
isAllItemsSelectedAtom,
isCurrentPageSelectedAtom,
+ selectAllTextsStore,
selectedCountMultiAtom,
selectionCounterTextsStore
} from "@mendix/widget-plugin-grid/core/models/selection.model";
@@ -47,6 +48,14 @@ injected(selectedCountMultiAtom, CORE.mainGate);
injected(selectionCounterTextsStore, CORE.mainGate, CORE.selection.selectedCount);
injected(PageSizeStore, CORE.initPageSize.optional);
+injected(
+ selectAllTextsStore,
+ CORE.mainGate,
+ CORE.selection.selectedCount,
+ CORE.selection.selectedCounterTextsStore,
+ CORE.atoms.totalCount,
+ CORE.selection.isAllItemsSelected
+);
// other
injected(TextsService, CORE.mainGate);
@@ -82,6 +91,7 @@ export class RootContainer extends Container {
this.bind(CORE.selection.selectedCounterTextsStore).toInstance(selectionCounterTextsStore).inTransientScope();
this.bind(CORE.selection.isAllItemsSelected).toInstance(isAllItemsSelectedAtom).inTransientScope();
this.bind(CORE.texts).toInstance(TextsService).inTransientScope();
+ this.bind(CORE.selection.selectAllTexts).toInstance(selectAllTextsStore).inTransientScope();
// paging
this.bind(CORE.atoms.pageSize).toInstance(pageSizeAtom).inTransientScope();
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
index 337a03637f..de9e182993 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/hooks/injection-hooks.ts
@@ -24,3 +24,4 @@ export const [useClickActionHelper] = createInjectionHooks(DG.clickActionHelper)
export const [useFocusService] = createInjectionHooks(DG.focusService);
export const [useCheckboxEventsHandler] = createInjectionHooks(DG.checkboxEventsHandler);
export const [useCellEventsHandler] = createInjectionHooks(DG.cellEventsHandler);
+export const [useSelectAllTexts] = createInjectionHooks(CORE.selection.selectAllTexts);
diff --git a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
index 26b3e38201..a70d1f5dfe 100644
--- a/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
+++ b/packages/pluggableWidgets/datagrid-web/src/model/tokens.ts
@@ -5,6 +5,7 @@ import { ClickActionHelper } from "@mendix/widget-plugin-grid/helpers/ClickActio
import { FocusTargetController } from "@mendix/widget-plugin-grid/keyboard-navigation/FocusTargetController";
import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout";
import {
+ ObservableSelectAllTexts,
QueryService,
SelectActionsService,
SelectAllService,
@@ -13,11 +14,7 @@ import {
TaskProgressService
} from "@mendix/widget-plugin-grid/main";
import { SelectAllFeature } from "@mendix/widget-plugin-grid/select-all/select-all.feature";
-import {
- BarStore,
- ObservableSelectAllTexts,
- SelectAllEvents
-} from "@mendix/widget-plugin-grid/select-all/select-all.model";
+import { BarStore, SelectAllEvents } from "@mendix/widget-plugin-grid/select-all/select-all.model";
import { SelectionCounterViewModel } from "@mendix/widget-plugin-grid/selection-counter/SelectionCounter.viewModel-atoms";
import { ComputedAtom, DerivedPropsGate, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
import { token } from "brandi";
@@ -75,7 +72,8 @@ export const CORE_TOKENS = {
selectedCounterTextsStore: token<{
clearSelectionButtonLabel: string;
selectedCountText: string;
- }>("@store:selectedCounterTextsStore")
+ }>("@store:selectedCounterTextsStore"),
+ selectAllTexts: token("@store:SelectAllTexts")
},
setupService: token("DatagridSetupService"),
@@ -140,7 +138,6 @@ export const SA_TOKENS = {
emitter: token>("SelectAllEmitter"),
gate: token>("MainGateForSelectAllContainer"),
progressService: token("SelectAllProgressService"),
- selectAllTextsStore: token("SelectAllTextsStore"),
selectAllBarVM: token("SelectAllBarViewModel"),
selectAllService: token("SelectAllService"),
selectionDialogVM: token("SelectionProgressDialogViewModel"),
diff --git a/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts b/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
index 0a023e8e0b..50c4c9c70a 100644
--- a/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
+++ b/packages/shared/widget-plugin-grid/src/core/models/selection.model.ts
@@ -105,3 +105,40 @@ export function selectionCounterTextsStore(
}
});
}
+
+export interface ObservableSelectAllTexts {
+ selectionStatus: string;
+ selectAllLabel: string;
+}
+
+/** @injectable */
+export function selectAllTextsStore(
+ gate: DerivedPropsGate<{
+ allSelectedText?: DynamicValue;
+ selectAllTemplate?: DynamicValue;
+ selectAllText?: DynamicValue;
+ }>,
+ selectedCount: ComputedAtom,
+ selectedTexts: { selectedCountText: string },
+ totalCount: ComputedAtom,
+ isAllItemsSelected: ComputedAtom
+): ObservableSelectAllTexts {
+ return observable({
+ get selectAllLabel() {
+ const selectAllFormat = gate.props.selectAllTemplate?.value || "Select all %d rows in the data source";
+ const selectAllText = gate.props.selectAllText?.value || "Select all rows in the data source";
+ const total = totalCount.get();
+ if (total > 0) return selectAllFormat.replace("%d", `${total}`);
+ return selectAllText;
+ },
+ get selectionStatus() {
+ if (isAllItemsSelected.get()) return this.allSelectedText;
+ return selectedTexts.selectedCountText;
+ },
+ get allSelectedText() {
+ const str = gate.props.allSelectedText?.value ?? "All %d rows selected.";
+ const count = selectedCount.get();
+ return str.replace("%d", `${count}`);
+ }
+ });
+}
diff --git a/packages/shared/widget-plugin-grid/src/main.ts b/packages/shared/widget-plugin-grid/src/main.ts
index 7bb034257b..3130de0f54 100644
--- a/packages/shared/widget-plugin-grid/src/main.ts
+++ b/packages/shared/widget-plugin-grid/src/main.ts
@@ -1,4 +1,5 @@
export { DatasourceService } from "./core/Datasource.service";
+export * from "./core/models/selection.model";
export { ProgressService } from "./core/Progress.service";
export { createClickActionHelper } from "./helpers/createClickActionHelper";
export type { QueryService } from "./interfaces/QueryService";
diff --git a/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts b/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
index f2d2adea55..f85b6c8d6e 100644
--- a/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
+++ b/packages/shared/widget-plugin-grid/src/select-all/select-all.model.ts
@@ -1,12 +1,5 @@
-import {
- ComputedAtom,
- createEmitter,
- DerivedPropsGate,
- disposeBatch,
- Emitter
-} from "@mendix/widget-plugin-mobx-kit/main";
-import { DynamicValue } from "mendix";
-import { observable, reaction } from "mobx";
+import { ComputedAtom, createEmitter, disposeBatch, Emitter } from "@mendix/widget-plugin-mobx-kit/main";
+import { reaction } from "mobx";
export type ServiceEvents = {
loadstart: ProgressEvent;
@@ -33,43 +26,6 @@ export function selectAllEmitter(): Emitter {
return createEmitter();
}
-export interface ObservableSelectAllTexts {
- selectionStatus: string;
- selectAllLabel: string;
-}
-
-/** @injectable */
-export function selectAllTextsStore(
- gate: DerivedPropsGate<{
- allSelectedText?: DynamicValue;
- selectAllTemplate?: DynamicValue;
- selectAllText?: DynamicValue;
- }>,
- selectedCount: ComputedAtom,
- selectedTexts: { selectedCountText: string },
- totalCount: ComputedAtom,
- isAllItemsSelected: ComputedAtom
-): ObservableSelectAllTexts {
- return observable({
- get selectAllLabel() {
- const selectAllFormat = gate.props.selectAllTemplate?.value || "Select all %d rows in the data source";
- const selectAllText = gate.props.selectAllText?.value || "Select all rows in the data source";
- const total = totalCount.get();
- if (total > 0) return selectAllFormat.replace("%d", `${total}`);
- return selectAllText;
- },
- get selectionStatus() {
- if (isAllItemsSelected.get()) return this.allSelectedText;
- return selectedTexts.selectedCountText;
- },
- get allSelectedText() {
- const str = gate.props.allSelectedText?.value ?? "All %d rows selected.";
- const count = selectedCount.get();
- return str.replace("%d", `${count}`);
- }
- });
-}
-
export interface BarStore {
pending: boolean;
visible: boolean;