@lightningtv/solid 3.0.5 → 3.0.7-0

package/src/primitives/borderBox.tsx

@@ -1,5 +1,16 @@
-import { ElementNode, insertNode, type NodeProps, type NodeStyles } from '@lightningtv/solid';
-import { createMemo, getOwner, onMount, runWithOwner, type Accessor } from 'solid-js';
+import {
+  ElementNode,
+  insertNode,
+  type NodeProps,
+  type NodeStyles,
+} from '@lightningtv/solid';
+import {
+  createMemo,
+  getOwner,
+  onMount,
+  runWithOwner,
+  type Accessor,
+} from 'solid-js';
 import { fadeIn, fadeOut } from './FadeInOut.jsx';
 import { chainFunctions } from '@lightningtv/solid/primitives';
 
@@ -12,29 +23,32 @@ export const BorderBoxStyle: NodeStyles = {
 
 type BorderProps = NodeProps & { borderSpace?: number };
 const borderComponent = (props: BorderProps) => {
-  const space = createMemo(() => props.borderSpace ?? (BorderBoxStyle.borderSpace as number));
+  const space = createMemo(
+    () => props.borderSpace ?? (BorderBoxStyle.borderSpace as number),
+  );
   return (
-    <>
-      <view
-        skipFocus
-        onCreate={(el) => {
-          const parent = el.parent!;
-          el.width = parent.width + space() * 2;
-          el.height = parent.height + space() * 2;
-          fadeIn(el);
-        }}
-        onDestroy={fadeOut}
-        style={BorderBoxStyle}
-        x={-space()}
-        y={-space()}
-        {...props}
-      />
-    </>
+    <view
+      skipFocus
+      onCreate={(el) => {
+        const parent = el.parent!;
+        el.width = parent.width + space() * 2;
+        el.height = parent.height + space() * 2;
+        fadeIn(el);
+      }}
+      onDestroy={fadeOut}
+      style={BorderBoxStyle}
+      x={-space()}
+      y={-space()}
+      {...props}
+    />
   );
 };
 
 // Solid directives can only be used on native root elements `view` and `text`
-export default function borderbox(el: ElementNode, accessor: Accessor<BorderProps | true | undefined>) {
+export function borderBox(
+  el: ElementNode,
+  accessor: Accessor<BorderProps | true | undefined>,
+) {
   let border: ElementNode | null;
   const owner = getOwner();
 

package/src/primitives/types.ts

@@ -49,6 +49,26 @@ export interface NavigableProps extends NodeProps {
     offset: number,
     isInitial: boolean,
   ) => void;
+
+  /**
+   * Defines transitions for animatable properties when navigating up.
+   */
+  transitionUp?: NodeStyles['transition'];
+
+  /**
+   * Defines transitions for animatable properties when navigating down.
+   */
+  transitionDown?: NodeStyles['transition'];
+
+  /**
+   * Defines transitions for animatable properties when navigating left.
+   */
+  transitionLeft?: NodeStyles['transition'];
+
+  /**
+   * Defines transitions for animatable properties when navigating right.
+   */
+  transitionRight?: NodeStyles['transition'];
 }
 
 // @ts-expect-error animationSettings is not identical - weird

package/src/primitives/utils/handleNavigation.ts

@@ -2,6 +2,34 @@ import * as s from 'solid-js';
 import * as lng from '../../index.js';
 import * as lngp from '../index.js';
 
+export const defaultTransitionBack = {
+  x: {
+    duration: 180,
+    easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  },
+};
+
+export const defaultTransitionForward = {
+  x: {
+    duration: 180,
+    easing: 'cubic-bezier(0.2, 0, 0, 1)',
+  },
+};
+
+export const defaultTransitionDown = {
+  y: {
+    duration: 300,
+    easing: 'cubic-bezier(0.2, 1, 0.8, 1)',
+  },
+};
+
+export const defaultTransitionUp = {
+  y: {
+    duration: 300,
+    easing: 'cubic-bezier(0.3, 0, 0.2, 1)',
+  },
+};
+
 function idxInArray(idx: number, arr: readonly any[]): boolean {
   return idx >= 0 && idx < arr.length;
 }
@@ -93,6 +121,30 @@ export function handleNavigation(
   direction: 'up' | 'right' | 'down' | 'left',
 ): lng.KeyHandler {
   return function () {
+    const el = this as lngp.NavigableElement;
+    const transition =
+      direction === 'up'
+        ? el.transitionUp
+        : direction === 'down'
+          ? el.transitionDown
+          : direction === 'left'
+            ? el.transitionLeft
+            : direction === 'right'
+              ? el.transitionRight
+              : undefined;
+
+    if (transition) {
+      const currentTransition =
+        typeof el.transition === 'object' && el.transition !== null
+          ? el.transition
+          : {};
+
+      el.transition = {
+        ...currentTransition,
+        ...(transition as object),
+      };
+    }
+
     return moveSelection(
       this as lngp.NavigableElement,
       direction === 'up' || direction === 'left' ? -1 : 1,