@angular/aria 22.0.0-next.3 → 22.0.0-next.5

package/fesm2022/_widget-chunk.mjs

@@ -1,7 +1,6 @@
 import { computed, signal, linkedSignal, KeyboardEventManager, Modifier } from './_signal-like-chunk.mjs';
 import { PointerEventManager } from './_pointer-event-manager-chunk.mjs';
 import { untracked } from '@angular/core/primitives/signals';
-import { ListFocus, ListNavigation } from './_list-navigation-chunk.mjs';
 
 class GridData {
   inputs;
@@ -599,13 +598,10 @@ class GridPattern {
   anchorCell = computed(() => this.multiSelectable() ? this.gridBehavior.selectionAnchorCell() : undefined);
   pauseNavigation = computed(() => this.gridBehavior.data.cells().flat().reduce((res, c) => res || c.isActivated(), false));
   isFocused = signal(false);
-  hasBeenFocused = signal(false);
+  hasBeenInteracted = signal(false);
   dragging = signal(false);
   prevColKey = computed(() => this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft');
   nextColKey = computed(() => this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight');
-  acceptsPointerMove = computed(() => {
-    return !this.disabled() && this.inputs.enableSelection() && this.inputs.enableRangeSelection() && this.dragging();
-  });
   keydown = computed(() => {
     const manager = new KeyboardEventManager();
     if (this.pauseNavigation()) {
@@ -626,24 +622,8 @@ class GridPattern {
     if (this.inputs.enableSelection() && this.inputs.selectionMode() === 'explicit') {
       manager.on(/Enter| /, () => this.inputs.multi() ? this.gridBehavior.toggle() : this.gridBehavior.toggleOne());
     }
-    if (this.inputs.enableSelection() && this.inputs.enableRangeSelection()) {
-      manager.on(Modifier.Shift, 'ArrowUp', () => this.gridBehavior.up({
-        anchor: true
-      })).on(Modifier.Shift, 'ArrowDown', () => this.gridBehavior.down({
-        anchor: true
-      })).on(Modifier.Shift, this.prevColKey(), () => this.gridBehavior.left({
-        anchor: true
-      })).on(Modifier.Shift, this.nextColKey(), () => this.gridBehavior.right({
-        anchor: true
-      })).on(Modifier.Shift, 'Home', () => this.gridBehavior.firstInRow({
-        anchor: true
-      })).on(Modifier.Shift, 'End', () => this.gridBehavior.lastInRow({
-        anchor: true
-      })).on([Modifier.Ctrl | Modifier.Shift], 'Home', () => this.gridBehavior.first({
-        anchor: true
-      })).on([Modifier.Ctrl | Modifier.Shift], 'End', () => this.gridBehavior.last({
-        anchor: true
-      })).on([Modifier.Ctrl, Modifier.Meta], 'A', () => {
+    if (this.inputs.enableSelection() && this.inputs.multi()) {
+      manager.on([Modifier.Ctrl, Modifier.Meta], 'A', () => {
         if (this.gridBehavior.allSelected()) {
           this.gridBehavior.deselectAll();
         } else {
@@ -671,9 +651,6 @@ class GridPattern {
           toggleOne: this.inputs.selectionMode() === 'explicit' && !this.inputs.multi(),
           toggle: this.inputs.selectionMode() === 'explicit' && this.inputs.multi()
         });
-        if (this.inputs.multi() && this.inputs.enableRangeSelection()) {
-          this.dragging.set(true);
-        }
       });
       if (this.inputs.multi()) {
         manager.on([Modifier.Ctrl, Modifier.Meta], e => {
@@ -682,33 +659,11 @@ class GridPattern {
           this.gridBehavior.gotoCell(cell, {
             toggle: true
           });
-          if (this.inputs.enableRangeSelection()) {
-            this.dragging.set(true);
-          }
         });
-        if (this.inputs.enableRangeSelection()) {
-          manager.on(Modifier.Shift, e => {
-            const cell = this.inputs.getCell(e.target);
-            if (!cell) return;
-            this.gridBehavior.gotoCell(cell, {
-              anchor: true
-            });
-            this.dragging.set(true);
-          });
-        }
       }
     }
     return manager;
   });
-  pointerup = computed(() => {
-    const manager = new PointerEventManager();
-    if (this.inputs.enableSelection() && this.inputs.enableRangeSelection()) {
-      manager.on([Modifier.Shift, Modifier.Ctrl, Modifier.Meta, Modifier.None], () => {
-        this.dragging.set(false);
-      });
-    }
-    return manager;
-  });
   _maybeDeletion = signal(false);
   _deletion = signal(false);
   _stateStale = signal(false);
@@ -721,31 +676,18 @@ class GridPattern {
   }
   onKeydown(event) {
     if (this.disabled()) return;
+    this.hasBeenInteracted.set(true);
     this.activeCell()?.onKeydown(event);
     this.keydown().handle(event);
   }
   onPointerdown(event) {
     if (this.disabled()) return;
+    this.hasBeenInteracted.set(true);
     this.pointerdown().handle(event);
   }
-  onPointermove(event) {
-    if (this.acceptsPointerMove()) {
-      const cell = this.inputs.getCell(event.target);
-      if (cell !== undefined) {
-        this.gridBehavior.gotoCell(cell, {
-          anchor: true
-        });
-      }
-    }
-  }
-  onPointerup(event) {
-    if (this.disabled()) return;
-    this.pointerup().handle(event);
-  }
   onFocusIn(event) {
     this.isFocused.set(true);
-    this.hasBeenFocused.set(true);
-    if (this.dragging()) return;
+    this.hasBeenInteracted.set(true);
     const cell = this.inputs.getCell(event.target);
     if (!cell || !this.gridBehavior.focusBehavior.isFocusable(cell)) return;
     cell.onFocusIn(event);
@@ -765,7 +707,7 @@ class GridPattern {
     this.isFocused.set(false);
   }
   setDefaultStateEffect() {
-    if (this.hasBeenFocused()) return;
+    if (this.hasBeenInteracted()) return;
     this.gridBehavior.setDefaultState();
   }
   resetStateEffect() {
@@ -842,85 +784,20 @@ class GridCellPattern {
   ariaColIndex = computed(() => this.inputs.colIndex() ?? this.inputs.grid().gridBehavior.colIndex(this));
   _tabIndex = computed(() => this.inputs.grid().gridBehavior.cellTabIndex(this));
   tabIndex = computed(() => {
-    if (this.singleWidgetMode() || this.navigationActivated()) {
+    if (this.inputs.widget()) {
       return -1;
     }
     return this._tabIndex();
   });
-  singleWidgetMode = computed(() => this.inputs.widgets().length === 1);
-  multiWidgetMode = computed(() => this.inputs.widgets().length > 1);
-  navigationDisabled = computed(() => !this.multiWidgetMode() || !this.active() || this.inputs.disabled());
-  focusBehavior;
-  navigationBehavior;
-  activeWidget = linkedSignal(() => this.inputs.widgets().length > 0 ? this.inputs.widgets()[0] : undefined);
-  navigationActivated = signal(false);
-  widgetActivated = computed(() => this.inputs.widgets().some(w => w.isActivated()));
-  isActivated = computed(() => this.navigationActivated() || this.widgetActivated());
-  prevKey = computed(() => {
-    if (this.inputs.orientation() === 'vertical') {
-      return 'ArrowUp';
-    }
-    return this.inputs.textDirection() === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
-  });
-  nextKey = computed(() => {
-    if (this.inputs.orientation() === 'vertical') {
-      return 'ArrowDown';
-    }
-    return this.inputs.textDirection() === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
-  });
-  keydown = computed(() => {
-    const manager = new KeyboardEventManager();
-    if (!this.navigationActivated()) {
-      manager.on('Enter', () => this.startNavigation());
-      return manager;
-    }
-    manager.on('Escape', () => this.stopNavigation()).on(this.prevKey(), () => this._advance(() => this.navigationBehavior.prev({
-      focusElement: false
-    })), {
-      ignoreRepeat: false
-    }).on(this.nextKey(), () => this._advance(() => this.navigationBehavior.next({
-      focusElement: false
-    })), {
-      ignoreRepeat: false
-    }).on('Home', () => this._advance(() => this.navigationBehavior.next({
-      focusElement: false
-    }))).on('End', () => this._advance(() => this.navigationBehavior.next({
-      focusElement: false
-    })));
-    return manager;
-  });
+  widget = () => this.inputs.widget();
+  isActivated = computed(() => this.widget()?.isActivated() ?? false);
   constructor(inputs) {
     this.inputs = inputs;
     this.selected = inputs.selected;
-    const listNavigationInputs = {
-      ...inputs,
-      items: inputs.widgets,
-      activeItem: this.activeWidget,
-      disabled: this.navigationDisabled,
-      focusMode: () => 'roving',
-      softDisabled: () => true
-    };
-    this.focusBehavior = new ListFocus(listNavigationInputs);
-    this.navigationBehavior = new ListNavigation({
-      ...listNavigationInputs,
-      focusManager: this.focusBehavior
-    });
   }
   onKeydown(event) {
-    if (this.disabled() || this.inputs.widgets().length === 0) return;
-    if (this.singleWidgetMode()) {
-      this.activeWidget().onKeydown(event);
-      return;
-    }
-    if (!this.navigationActivated()) {
-      this.keydown().handle(event);
-      return;
-    }
-    const widgetActivated = this.widgetActivated();
-    this.activeWidget().onKeydown(event);
-    if (!widgetActivated) {
-      this.keydown().handle(event);
-    }
+    if (this.disabled()) return;
+    this.widget()?.onKeydown(event);
   }
   onFocusIn(event) {
     this.isFocused.set(true);
@@ -928,14 +805,6 @@ class GridCellPattern {
     const widget = this.inputs.getWidget(focusTarget);
     if (!widget) return;
     widget.onFocusIn(event);
-    if (widget !== this.activeWidget()) {
-      this.navigationBehavior.goto(widget, {
-        focusElement: false
-      });
-    }
-    if (this.multiWidgetMode()) {
-      this.navigationActivated.set(true);
-    }
   }
   onFocusOut(event) {
     const blurTarget = event.target;
@@ -944,48 +813,27 @@ class GridCellPattern {
     const focusTarget = event.relatedTarget;
     if (this.element().contains(focusTarget)) return;
     this.isFocused.set(false);
-    this.navigationActivated.set(false);
   }
   focus() {
-    if (this.singleWidgetMode()) {
-      this.activeWidget()?.focus();
+    const widget = this.widget();
+    if (widget) {
+      widget.focus();
     } else {
       this.element().focus();
     }
   }
   widgetTabIndex() {
-    if (this.singleWidgetMode()) {
-      return this._tabIndex();
-    }
-    return this.navigationActivated() ? 0 : -1;
-  }
-  startNavigation() {
-    if (this.navigationActivated()) return;
-    this.navigationActivated.set(true);
-    this.navigationBehavior.first();
-  }
-  stopNavigation() {
-    if (!this.navigationActivated()) return;
-    this.navigationActivated.set(false);
-    this.element().focus();
-  }
-  _advance(op) {
-    const success = op();
-    if (success) {
-      this.activeWidget()?.focus();
-    }
+    return this._tabIndex();
   }
 }
 
 class GridCellWidgetPattern {
   inputs;
-  id = () => this.inputs.id();
   element = () => this.inputs.element();
   widgetHost = computed(() => this.inputs.focusTarget() ?? this.element());
-  index = computed(() => this.inputs.cell().inputs.widgets().indexOf(this));
   disabled = computed(() => this.inputs.disabled() || this.inputs.cell().disabled());
   tabIndex = computed(() => this.inputs.cell().widgetTabIndex());
-  active = computed(() => this.inputs.cell().active() && this.inputs.cell().activeWidget() === this);
+  active = computed(() => this.inputs.cell().active() && this.inputs.cell().widget() === this);
   isActivated = signal(false);
   lastActivateEvent = signal(undefined);
   lastDeactivateEvent = signal(undefined);