@lightningtv/solid 2.12.3 → 2.12.5

package/src/primitives/useMouse.ts

@@ -20,7 +20,6 @@ type RenderableNode = ElementNode | ElementText | TextNode;
 interface MouseStateOptions {
   hoverState: CustomState;
   pressedState: CustomState;
-  pressedStateDuration?: number;
 }
 
 type UseMouseOptions =
@@ -29,7 +28,6 @@ type UseMouseOptions =
 
 declare module '@lightningtv/core' {
   interface ElementNode {
-    onEnter?: () => void;
     /** function to be called on mouse click */
     onMouseClick?: (
       this: ElementNode,
@@ -39,8 +37,6 @@ declare module '@lightningtv/core' {
   }
 }
 
-const DEFAULT_PRESSED_STATE_DURATION = 150;
-
 export function addCustomStateToElement(
   element: RenderableNode,
   state: CustomState,
@@ -168,25 +164,22 @@ function findElementByActiveElement(e: MouseEvent): ElementNode | null {
 function applyPressedState(
   element: ElementNode,
   pressedState: CustomState,
-  pressedStateDuration: number = DEFAULT_PRESSED_STATE_DURATION,
 ): void {
   addCustomStateToElement(element, pressedState);
-  setTimeout(() => {
-    removeCustomStateFromElement(element, pressedState);
-  }, pressedStateDuration);
 }
 
 function handleElementClick(
   clickedElement: ElementNode,
   e: MouseEvent,
   customStates?: MouseStateOptions,
+  pressedElementRef?: { current: ElementNode | null },
 ): void {
-  if (customStates?.pressedState) {
-    applyPressedState(
-      clickedElement,
+  if (customStates?.pressedState && pressedElementRef?.current) {
+    removeCustomStateFromElement(
+      pressedElementRef.current,
       customStates.pressedState,
-      customStates.pressedStateDuration,
     );
+    pressedElementRef.current = null;
   }
 
   if (isFunc(clickedElement.onMouseClick)) {
@@ -211,6 +204,7 @@ function handleElementClick(
 function createHandleClick<TApp extends ElementNode>(
   myApp: TApp,
   customStates?: MouseStateOptions,
+  pressedElementRef?: { current: ElementNode | null },
 ) {
   return (e: MouseEvent): void => {
     const clickedElement = customStates
@@ -226,7 +220,35 @@ function createHandleClick<TApp extends ElementNode>(
       return;
     }
 
-    handleElementClick(clickedElement, e, customStates);
+    handleElementClick(clickedElement, e, customStates, pressedElementRef);
+  };
+}
+
+function createHandleMouseDown<TApp extends ElementNode>(
+  myApp: TApp,
+  customStates?: MouseStateOptions,
+  pressedElementRef?: { current: ElementNode | null },
+) {
+  return (e: MouseEvent): void => {
+    if (!customStates) {
+      return;
+    }
+
+    const pressedElement = findElementWithCustomState(
+      myApp,
+      e.clientX,
+      e.clientY,
+      customStates.hoverState,
+    );
+
+    if (!pressedElement) {
+      return;
+    }
+
+    applyPressedState(pressedElement, customStates.pressedState);
+    if (pressedElementRef) {
+      pressedElementRef.current = pressedElement;
+    }
   };
 }
 
@@ -330,16 +352,26 @@ export function useMouse<TApp extends ElementNode = ElementNode>(
   const pos = useMousePosition();
   const scheduled = createScheduled((fn) => throttle(fn, throttleBy));
   let previousElement: ElementNode | null = null;
+  const pressedElementRef: { current: ElementNode | null } = { current: null };
   const customStates = options?.customStates;
   const hoverState = customStates?.hoverState;
-  const handleClick = createHandleClick(myApp, customStates);
+  const handleClick = createHandleClick(myApp, customStates, pressedElementRef);
+  const handleMouseDown = createHandleMouseDown(
+    myApp,
+    customStates,
+    pressedElementRef,
+  );
   const owner = getOwner();
   const handleClickContext = (e: MouseEvent) => {
     runWithOwner(owner, () => handleClick(e));
   };
+  const handleMouseDownContext = (e: MouseEvent) => {
+    runWithOwner(owner, () => handleMouseDown(e));
+  };
 
   makeEventListener(window, 'wheel', handleScroll);
   makeEventListener(window, 'click', handleClickContext);
+  makeEventListener(window, 'mousedown', handleMouseDownContext);
   createEffect(() => {
     if (scheduled()) {
       const result = getChildrenByPosition(myApp, pos.x, pos.y).filter(

package/src/primitives/utils/handleNavigation.ts

@@ -138,7 +138,7 @@ export function moveSelection(
   if (selected === -1) {
     if (
       !idxInArray(el.selected, el.children) ||
-      el.children[el.selected]!.skipFocus ||
+      el.children[el.selected]?.skipFocus ||
       lng.isFocused(el.children[el.selected]!)
     ) {
       return false;

package/src/primitives/utils/withScrolling.ts

@@ -15,10 +15,11 @@ export type Scroller = (
 // Adds properties expected by withScrolling
 export interface ScrollableElement extends ElementNode {
   scrollIndex?: number;
-  scroll?: 'always' | 'none' | 'edge' | 'auto' | 'center';
+  scroll?: 'always' | 'none' | 'edge' | 'auto' | 'center' | 'bounded';
   selected: number;
   offset?: number;
   endOffset?: number;
+  upCount?: number;
   onScrolled?: (
     elm: ScrollableElement,
     offset: number,
@@ -40,6 +41,19 @@ const isNotShown = (node: ElementNode | ElementText) => {
   Always scroll moves the list every time
 */
 
+/**
+ * Checks if the selected index is in the non-scrollable zone (last upCount items).
+ */
+export function checkIsInNonScrollableZone(
+  componentRef: ScrollableElement,
+): boolean {
+  const totalItems = componentRef.children.length;
+  const upCount = componentRef.upCount || 6;
+  const selected = componentRef.selected || 0;
+  const nonScrollableZoneStart = Math.max(0, totalItems - upCount);
+  return selected >= nonScrollableZoneStart;
+}
+
 /** @deprecated Use {@link scrollRow} or {@link scrollColumn} */
 export function withScrolling(isRow: boolean): Scroller {
   const dimension = isRow ? 'width' : 'height';
@@ -135,6 +149,35 @@ export function withScrolling(isRow: boolean): Scroller {
       nextPosition = -selectedPosition + (screenSize - selectedSizeScaled) / 2;
     } else if (scroll === 'always') {
       nextPosition = -selectedPosition + offset;
+    } else if (scroll === 'bounded') {
+      const totalItems = componentRef.children.length;
+      const upCount = componentRef.upCount || 6;
+      const nonScrollableZoneStart = Math.max(0, totalItems - upCount);
+      const isInNonScrollableZone = selected >= nonScrollableZoneStart;
+      const isFirstOfNonScrollableZone = selected === nonScrollableZoneStart;
+      const isEnteringZone =
+        isFirstOfNonScrollableZone &&
+        lastSelected !== undefined &&
+        lastSelected < nonScrollableZoneStart;
+
+      if (!isInNonScrollableZone) {
+        nextPosition = -selectedPosition + offset;
+      } else if (isIncrementing) {
+        if (isEnteringZone) {
+          const firstOfZoneElement =
+            componentRef.children[nonScrollableZoneStart];
+          const firstOfZonePosition = firstOfZoneElement?.[axis] ?? 0;
+          nextPosition = firstOfZoneElement
+            ? -firstOfZonePosition + offset
+            : rootPosition;
+        } else {
+          nextPosition = rootPosition;
+        }
+      } else if (isFirstOfNonScrollableZone) {
+        nextPosition = -selectedPosition + offset;
+      } else {
+        nextPosition = rootPosition;
+      }
     } else if (scroll === 'center') {
       const centerPosition =
         -selectedPosition +
@@ -160,7 +203,6 @@ export function withScrolling(isRow: boolean): Scroller {
           nextPosition = rootPosition + selectedSize + gap;
         }
       } else if (isIncrementing) {
-        //nextPosition = -selectedPosition + offset;
         nextPosition = rootPosition - selectedSize - gap;
       } else {
         nextPosition = rootPosition + selectedSize + gap;
@@ -174,7 +216,7 @@ export function withScrolling(isRow: boolean): Scroller {
 
     // Prevent container from moving beyond bounds
     nextPosition =
-      isIncrementing && scroll !== 'always'
+      isIncrementing && scroll !== 'always' && scroll !== 'bounded'
         ? Math.max(nextPosition, maxOffset)
         : Math.min(nextPosition, offset);