fixes

Author: iobuhov

packages/pluggableWidgets/gallery-web/src/components/GalleryItems.tsx

@@ -10,8 +10,8 @@ export const GalleryItems = observer(function GalleryItems() {
     const texts = useTextsService();
     const focusController = useKeyNavFocus();
 
-    if (items.length === 0) {
-        return <div>Empty</div>;
+    if (items.length < 1) {
+        return null;
     }
 
     return (

packages/pluggableWidgets/gallery-web/src/components/ListItem.tsx

@@ -1,6 +1,7 @@
 import { useFocusTargetProps } from "@mendix/widget-plugin-grid/keyboard-navigation/useFocusTargetProps";
 import classNames from "classnames";
 import { ObjectItem } from "mendix";
+import { computed, trace } from "mobx";
 import { observer } from "mobx-react-lite";
 import { ReactElement, RefObject, useMemo } from "react";
 import { getAriaProps } from "../features/item-interaction/get-item-aria-props";
@@ -20,8 +21,15 @@ export const ListItem = observer(function ListItem(props: ListItemProps): ReactE
     const itemVM = useGalleryItemVM();
     const getPosition = useLayoutService().getPositionFn;
 
+    const isSelected = computed(
+        () => {
+            trace();
+            return selectActions.isSelected(item);
+        },
+        { name: "[gallery]:@computed:ListItem:isSelected" }
+    ).get();
     const clickable = itemVM.hasOnClick(item) || selectActions.selectionType !== "None";
-    const ariaProps = getAriaProps(item, selectActions, itemVM.label(item));
+    const ariaProps = getAriaProps(selectActions.selectionType, isSelected, itemVM.label(item));
     const { columnIndex, rowIndex } = getPosition(itemIndex);
     const keyNavProps = useFocusTargetProps({ columnIndex: columnIndex ?? -1, rowIndex });
     const handlers = useMemo(() => eventsVM.getProps(item), [eventsVM, item]);

packages/pluggableWidgets/gallery-web/src/features/item-interaction/get-item-aria-props.ts

@@ -1,5 +1,4 @@
-import { SelectActionsService } from "@mendix/widget-plugin-grid/interfaces/SelectActionsService";
-import { ObjectItem } from "mendix";
+import { SelectionType } from "@mendix/widget-plugin-grid/selection";
 
 type ListItemRole = "option" | "listitem";
 
@@ -10,11 +9,11 @@ type ListItemAriaProps = {
     "aria-label": string | undefined;
 };
 
-export function getAriaProps(item: ObjectItem, helper: SelectActionsService, label?: string): ListItemAriaProps {
-    if (helper.selectionType === "Single" || helper.selectionType === "Multi") {
+export function getAriaProps(selectionType: SelectionType, isSelected: boolean,  label?: string): ListItemAriaProps {
+    if (selectionType === "Single" || selectionType === "Multi") {
         return {
             role: "option",
-            "aria-selected": helper.isSelected(item),
+            "aria-selected": isSelected,
             tabIndex: 0,
             "aria-label": label
         };

packages/pluggableWidgets/gallery-web/src/model/hooks/useGalleryContainer.ts

@@ -1,12 +1,18 @@
 import { useConst } from "@mendix/widget-plugin-mobx-kit/react/useConst";
+import { useSetup } from "@mendix/widget-plugin-mobx-kit/react/useSetup";
+
 import { Container } from "brandi";
 import { useEffect } from "react";
 import { GalleryContainerProps } from "../../../typings/GalleryProps";
 import { createGalleryContainer } from "../containers/createGalleryContainer";
+import { CORE_TOKENS as CORE } from "../tokens";
 
 export function useGalleryContainer(props: GalleryContainerProps): Container {
     const [container, mainProvider] = useConst(() => createGalleryContainer(props));
 
+    // Run setup hooks on mount
+    useSetup(() => container.get(CORE.setupService));
+    
     useEffect(() => mainProvider.setProps(props));
 
     return container;

packages/pluggableWidgets/gallery-web/src/model/models/layout.model.ts

@@ -1,6 +1,6 @@
 import { VirtualGridLayout } from "@mendix/widget-plugin-grid/keyboard-navigation/VirtualGridLayout";
 import { ComputedAtom } from "@mendix/widget-plugin-mobx-kit/main";
-import { computed } from "mobx";
+import { computed, trace } from "mobx";
 
 /** @injectable */
 export function layoutAtom(
@@ -10,7 +10,10 @@ export function layoutAtom(
     },
     pageSize: ComputedAtom<number>
 ): ComputedAtom<VirtualGridLayout> {
-    return computed(() => new VirtualGridLayout(layoutStore.numberOfRows, layoutStore.numberOfColumns, pageSize.get()));
+    return computed(() => {
+        trace()
+        return new VirtualGridLayout(layoutStore.numberOfRows, layoutStore.numberOfColumns, pageSize.get())
+    }, { name: '[gallery]:@computed:layoutAtom' });
 }
 
 /** @injectable */

packages/pluggableWidgets/gallery-web/src/model/services/Layout.service.ts

@@ -1,6 +1,6 @@
 import { getColumnAndRowBasedOnIndex, PositionInGrid } from "@mendix/widget-plugin-grid/selection";
 import { ComputedAtom, SetupComponent, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
-import { action, computed, makeAutoObservable } from "mobx";
+import { action, computed, makeAutoObservable, trace } from "mobx";
 import { GalleryContainerProps } from "../../../typings/GalleryProps";
 
 type Breakpoint = "desktop" | "tablet" | "phone";
@@ -18,13 +18,15 @@ export class LayoutService implements SetupComponent {
         this.width = window.innerWidth;
 
         makeAutoObservable(this, {
-            breakpoint: computed,
+            setWidth: action,
             numberOfColumns: computed,
             numberOfRows: computed,
-            getPositionFn: computed,
-            setWidth: action,
             setup: false
         });
+
+        trace(this, "width");
+        trace(this, "numberOfColumns");
+        trace(this, "numberOfRows");
     }
 
     setWidth(width: number): void {

packages/shared/widget-plugin-grid/src/core/models/datasource.model.ts

@@ -8,7 +8,7 @@ import { computed } from "mobx";
 export function itemCountAtom(
     gate: DerivedPropsGate<{ datasource: { items?: { length: number } } }>
 ): ComputedAtom<number> {
-    return computed(() => gate.props.datasource.items?.length ?? -1);
+    return computed(() => gate.props.datasource.items?.length ?? -1, { name: "plugin:@computed:itemCountAtom" });
 }
 
 /**
@@ -36,7 +36,7 @@ export function offsetAtom(gate: DerivedPropsGate<{ datasource: { offset: number
  * @injectable
  */
 export function limitAtom(gate: DerivedPropsGate<{ datasource: { limit: number } }>): ComputedAtom<number> {
-    return computed(() => gate.props.datasource.limit);
+    return computed(() => gate.props.datasource.limit, { name: 'plugin:@computed:limitAtom' });
 }
 
 /**

packages/shared/widget-plugin-grid/src/keyboard-navigation/createFocusController.ts

@@ -1,5 +1,5 @@
 import { ComputedAtom, SetupComponentHost } from "@mendix/widget-plugin-mobx-kit/main";
-import { reaction } from "mobx";
+import { reaction, trace } from "mobx";
 import { FocusTargetController } from "./FocusTargetController";
 import { PositionController } from "./PositionController";
 import { VirtualGridLayout } from "./VirtualGridLayout";
@@ -13,8 +13,14 @@ export function createFocusController(
 
     function setup(): void | (() => void) {
         return reaction(
-            () => layout.get(),
-            newLayout => controller.updateGridLayout(newLayout)
+            () => {
+                trace();
+                return layout.get()
+            },
+            newLayout => {
+                controller.updateGridLayout(newLayout)
+            },
+            { name: "[plugin]:@reaction:createFocusController:layoutUpdate" }
         );
     }
 

packages/shared/widget-plugin-grid/src/selection/helpers.ts

@@ -8,7 +8,13 @@ import { Direction, MoveEvent1D, MoveEvent2D, MultiSelectionStatus, ScrollKeyCod
 
 export class SingleSelectionHelper implements SingleSelectionService {
     type = "Single" as const;
-    constructor(private selectionValue: SelectionSingleValue) {}
+    constructor(private selectionValue: SelectionSingleValue) {
+        type PrivateMembers = "selectionValue";
+        makeObservable<this, PrivateMembers>(this, {
+            selectionValue: observable.ref,
+            updateProps: action
+        });
+    }
 
     updateProps(value: SelectionSingleValue): void {
         this.selectionValue = value;