@solidrt/components 0.0.65 → 0.0.67

package/README.md

@@ -195,7 +195,7 @@ function App() {
 }
 ```
 
-The window takes the theme's finish (see Theming) whenever the theme has one; a theme without a finish declares no shader at all. `shader` is the window's own finish, a core window shader declaration forwarded as-is; set, it replaces the theme's, and `shader={null}` opts out of it. A window shader runs past the point snapshots read, so a finish is checked with `srt render`, not `get_snapshot`.
+The window takes the theme's finish (see Theming) whenever the theme has one; a theme without a finish declares no shader at all. `shader` is the window's own finish, a core window shader declaration forwarded as-is; set, it replaces the theme's, and `shader={null}` opts out of it. A window shader runs past the point snapshots read, so a finish is checked with `sol render`, not `get_snapshot`.
 
 API: `Window`, `WindowProps` - typed and commented in [src/window.tsx](./src/window.tsx).
 

package/docs/window.md

@@ -14,4 +14,4 @@ function App() {
 }
 ```
 
-The window takes the theme's finish (see Theming) whenever the theme has one; a theme without a finish declares no shader at all. `shader` is the window's own finish, a core window shader declaration forwarded as-is; set, it replaces the theme's, and `shader={null}` opts out of it. A window shader runs past the point snapshots read, so a finish is checked with `srt render`, not `get_snapshot`.
+The window takes the theme's finish (see Theming) whenever the theme has one; a theme without a finish declares no shader at all. `shader` is the window's own finish, a core window shader declaration forwarded as-is; set, it replaces the theme's, and `shader={null}` opts out of it. A window shader runs past the point snapshots read, so a finish is checked with `sol render`, not `get_snapshot`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/components",
-  "version": "0.0.65",
+  "version": "0.0.67",
   "license": "MIT",
   "funding": "https://github.com/sponsors/wellawaretech",
   "author": "Antoine van Wel",
@@ -21,6 +21,6 @@
   },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-rc.13",
-    "@solidrt/core": "0.0.65"
+    "@solidrt/core": "0.0.67"
   }
 }

package/src/carousel.tsx

@@ -66,6 +66,11 @@ export function Carousel(props: CarouselProps) {
       setDrag(0)
       setDragging(false)
     },
+    // The page in view stays: the drag snaps back.
+    onSwipeCancel: () => {
+      setDrag(0)
+      setDragging(false)
+    },
   })
 
   let split = () => splitTransition(props.transition)

package/src/context-menu.tsx

@@ -184,6 +184,7 @@ export function ContextMenu(props: ContextMenuProps) {
       onPointerDown={handleDown}
       onPointerMove={longPress.handlers.onPointerMove}
       onPointerUp={longPress.handlers.onPointerUp}
+      onPointerCancel={longPress.handlers.onPointerCancel}
       {...props.layout}
     >
       {props.children}

package/src/dismissible.tsx

@@ -69,6 +69,10 @@ export function Dismissible(props: DismissibleProps) {
       setDragging(false)
       if (!leave) setOffset(0)
     },
+    onSwipeCancel: () => {
+      setDragging(false)
+      setOffset(0)
+    },
   })
 
   let settled = (e: TransitionEndEvent) => {

package/src/editor-field.tsx

@@ -235,7 +235,8 @@ export function EditorField(props: EditorFieldProps) {
     }
   }
 
-  let handleViewportPointerUp = (e: PointerEvent) => {
+  // A lift or a cancel: the selection drag ends where it is.
+  let handleViewportPointerEnd = (e: PointerEvent) => {
     if (dragArmed === e.pointerId) dragArmed = null
     if (dragActive === e.pointerId) {
       arena.release(e.pointerId, dragOwner)
@@ -523,7 +524,8 @@ export function EditorField(props: EditorFieldProps) {
         scrollY={editor.scrollY()}
         onPointerDown={handleViewportPointerDown}
         onPointerMove={handleViewportPointerMove}
-        onPointerUp={handleViewportPointerUp}
+        onPointerUp={handleViewportPointerEnd}
+        onPointerCancel={handleViewportPointerEnd}
       >
         {showPlaceholder() ? (
           <d-text w={PLACEHOLDER_SHAPE_WIDTH} {...font()} color={theme.color.textMuted} maxLines={1}>

package/src/image.tsx

@@ -89,6 +89,7 @@ export function Image(props: ImageProps) {
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
       onFocus={props.onFocus}

package/src/press.ts

@@ -19,6 +19,7 @@ export interface PressOptions {
   disabled?: boolean
   onPointerDown?: (e: PointerEvent) => void
   onPointerUp?: (e: PointerEvent) => void
+  onPointerCancel?: (e: PointerEvent) => void
   onPointerMove?: (e: PointerEvent) => void
   onPointerEnter?: (e: PointerEvent) => void
   onPointerLeave?: (e: PointerEvent) => void
@@ -43,7 +44,8 @@ export interface PressOptions {
 // when the firing waits for that recognizer to fail (the double-tap
 // window passing) and is dropped when it wins. Enter/leave drive hover
 // alone. Non-primary buttons (right/middle) do not start a press. cancel() is
-// the external-cancel hook; it ends the press without firing. Options are read
+// the external-cancel hook; it and a pointer cancel (the system taking the
+// touch away) end the press without firing. Options are read
 // at event time, so passing a component's reactive props object keeps handler
 // changes live. The host view must attach `ref` for retention bounds; without
 // it every position counts as inside (the up always fires).
@@ -190,6 +192,10 @@ export function createPress(options: PressOptions) {
       }
       options.onPointerUp?.(e)
     },
+    onPointerCancel: (e: PointerEvent) => {
+      if (active === e.pointerId) cancel()
+      options.onPointerCancel?.(e)
+    },
     onPointerEnter: (e: PointerEvent) => {
       setHovered(true)
       options.onPointerEnter?.(e)

package/src/pressable.tsx

@@ -80,6 +80,7 @@ export function Pressable(props: PressableProps) {
       onPointerLeave={press.handlers.onPointerLeave}
       onPointerDown={press.handlers.onPointerDown}
       onPointerUp={press.handlers.onPointerUp}
+      onPointerCancel={press.handlers.onPointerCancel}
       onPointerMove={press.handlers.onPointerMove}
       onWheel={props.onWheel}
       onFocus={press.handlers.onFocus}

package/src/scroll-view.tsx

@@ -97,6 +97,8 @@ export function ScrollView(props: ScrollViewProps) {
       setFling(true)
       scroll.scrollTo(props.horizontal ? { x: dest } : { y: dest })
     },
+    // The content stays where the finger left it: nothing flings.
+    onPanCancel: () => setDragging(false),
   })
   // A finger landing (any down, a tap included) holds a moving list where
   // it is: the animated offset, read back from the boxes (window-relative,
@@ -193,6 +195,7 @@ export function ScrollView(props: ScrollViewProps) {
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
       pointerEvents={props.pointerEvents}
@@ -221,6 +224,7 @@ export function ScrollView(props: ScrollViewProps) {
         onPointerDown={hold}
         onPointerMove={pan.handlers.onPointerMove}
         onPointerUp={pan.handlers.onPointerUp}
+        onPointerCancel={pan.handlers.onPointerCancel}
         onWheel={onWheel}
       >
         <view ref={(n: { id: number }) => (content = n)} flexShrink={0} flexDirection={direction()}>

package/src/segmented-control.tsx

@@ -208,6 +208,7 @@ export function SegmentedControl<T>(props: SegmentedControlProps<T>) {
             onPress: () => select(opt.value),
             onPointerDown: () => setPressedValue(() => opt.value),
             onPointerUp: () => setPressedValue(undefined),
+            onPointerCancel: () => setPressedValue(undefined),
           })
           onCleanup(() => segs.delete(opt.value))
           return (

package/src/slider.tsx

@@ -122,7 +122,8 @@ export function Slider(props: SliderProps) {
     if (active !== e.pointerId) return
     setFromLocalX(e.localX)
   }
-  let handleUp = (e: PointerEvent) => {
+  // A lift or a cancel: the drag ends where the thumb is.
+  let handleEnd = (e: PointerEvent) => {
     if (active === e.pointerId) endDrag()
   }
 
@@ -161,7 +162,8 @@ export function Slider(props: SliderProps) {
       focusable={!props.disabled}
       onPointerDown={handleDown}
       onPointerMove={handleMove}
-      onPointerUp={handleUp}
+      onPointerUp={handleEnd}
+      onPointerCancel={handleEnd}
       onKeyDown={handleKeyDown}
     >
       {/* Colors fade with the theme; the fill's w and the thumb's x never

package/src/text.tsx

@@ -68,6 +68,7 @@ export function Text(props: TextProps) {
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
       onFocus={props.onFocus}

package/src/view.tsx

@@ -40,6 +40,7 @@ export function View(props: ViewProps) {
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
       onFocus={props.onFocus}

package/src/window.tsx

@@ -45,6 +45,7 @@ export function Window(props: WindowProps) {
       onPointerLeave={props.onPointerLeave}
       onPointerDown={props.onPointerDown}
       onPointerUp={props.onPointerUp}
+      onPointerCancel={props.onPointerCancel}
       onPointerMove={props.onPointerMove}
       onWheel={props.onWheel}
       onFocus={props.onFocus}