@lotics/ui 18.1.0 → 18.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "18.1.0",
+  "version": "18.2.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/file_grid.tsx

@@ -59,6 +59,10 @@ export interface FileGridProps {
    *  e.g. open the gallery at the first hidden file. */
   onOverflowPress?: (hiddenCount: number) => void;
   style?: ViewStyle;
+  /** Render every tile INERT — no press, no `button` role, no tab stop. Use it
+   *  when something ABOVE the grid owns the press (a table cell, a popover
+   *  trigger, a pressable row): a tile that keeps its button nests one button
+   *  inside another. */
   disablePress?: boolean;
   partialRowAlign?: "start" | "end";
   selectedIds?: ReadonlySet<string>;
@@ -162,6 +166,7 @@ export function FileGrid(props: FileGridProps) {
             file={item.file}
             size={size}
             onPress={disablePress ? undefined : () => handleFilePress(item.file)}
+            disablePress={disablePress}
             onRemove={onDisplayRemove ? () => onDisplayRemove(item.removeId) : undefined}
             selected={selectedIds?.has(item.file.id)}
           />

package/src/file_thumbnail.tsx

@@ -66,6 +66,12 @@ interface FileThumbnailProps {
   size?: number;
   /** Called when thumbnail is pressed */
   onPress?: () => void;
+  /** Render the tile INERT — no press handler, no `button` role, no tab stop.
+   *  Without this an `onPress`-less tile still falls back to opening the file,
+   *  so it stays a `<button>`: dropping a strip into a pressable row (a table
+   *  cell, a `PressableRow`) then nests a button in a button. Set it whenever
+   *  something ABOVE the tile owns the press. */
+  disablePress?: boolean;
   /** Called when thumbnail is long-pressed */
   onLongPress?: () => void;
   /** Called when the completed file is removed */
@@ -87,8 +93,15 @@ interface FileThumbnailProps {
  * Works with any file source via DisplayFile interface.
  */
 export function FileThumbnail(props: FileThumbnailProps) {
-  const { file, size, onPress, onLongPress, onRemove, selected, uploading, isTemplate } = props;
+  const { file, size, onPress, onLongPress, onRemove, selected, uploading, isTemplate, disablePress } = props;
   const accessibilityLabel = props.accessibilityLabel ?? file.filename;
+  // A tile with no `onPress` still OPENS the file — a useful default for a bare
+  // thumbnail in a list or a gallery. But a caller that said `disablePress`
+  // means it: inventing a handler there renders a <button>, and the one place a
+  // compact strip belongs is a table cell, which is itself pressable. Nesting a
+  // button in a button is invalid HTML and two tab stops for one action.
+  const press = disablePress ? undefined : onPress;
+  const pressOrOpen = disablePress ? undefined : (onPress ?? (() => Linking.openURL(file.url)));
 
   const rootStyle =
     size !== undefined ? { width: size, height: size } : { width: "100%" as const, aspectRatio: 1 };
@@ -96,7 +109,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
   if (isImageMimeType(file.mimeType)) {
     return (
       <View style={rootStyle}>
-        <ImageThumbnail file={file} size={size} accessibilityLabel={accessibilityLabel} onPress={onPress} onLongPress={onLongPress} />
+        <ImageThumbnail file={file} size={size} accessibilityLabel={accessibilityLabel} onPress={press} onLongPress={onLongPress} />
         {uploading && <UploadingOverlay size={size} />}
         {onRemove && <RemoveButton onPress={onRemove} />}
         {selected !== undefined && <SelectionOverlay selected={selected} />}
@@ -114,7 +127,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           size={size}
           isTemplate={isTemplate}
           accessibilityLabel={accessibilityLabel}
-          onPress={onPress ?? (() => Linking.openURL(file.url))}
+          onPress={pressOrOpen}
           onLongPress={onLongPress}
         />
         {uploading && <UploadingOverlay size={size} />}
@@ -132,7 +145,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           icon={mediaIcon}
           size={size}
           accessibilityLabel={accessibilityLabel}
-          onPress={onPress ?? (() => Linking.openURL(file.url))}
+          onPress={pressOrOpen}
           onLongPress={onLongPress}
         />
       ) : (
@@ -142,7 +155,7 @@ export function FileThumbnail(props: FileThumbnailProps) {
           size={size}
           isTemplate={isTemplate}
           accessibilityLabel={accessibilityLabel}
-          onPress={onPress ?? (() => Linking.openURL(file.url))}
+          onPress={pressOrOpen}
           onLongPress={onLongPress}
         />
       )}
@@ -206,7 +219,8 @@ export function DocumentBadge(props: DocumentBadgeProps) {
     <Pressable
       onPress={onPress}
       onLongPress={onLongPress}
-      accessibilityRole="button"
+      accessibilityRole={onPress ? "button" : undefined}
+      tabIndex={onPress ? undefined : -1}
       accessibilityLabel={accessibilityLabel ?? resolveMime(mimeType).label}
       {...focusProps}
       style={focusVisible ? { boxShadow: FOCUS_RING, borderRadius: 6 } : undefined}
@@ -262,7 +276,8 @@ export function DocumentCard(props: DocumentCardProps) {
       ]}
       onPress={onPress}
       onLongPress={onLongPress}
-      accessibilityRole="button"
+      accessibilityRole={onPress ? "button" : undefined}
+      tabIndex={onPress ? undefined : -1}
       accessibilityLabel={a11yLabel}
       {...focusProps}
     >
@@ -313,7 +328,8 @@ export function MediaCard(props: MediaCardProps) {
         style={({ pressed }) => [styles.mediaCardCompact, sizeStyle, { backgroundColor: color }, pressed && styles.pressedDim, focusVisible && { boxShadow: FOCUS_RING }]}
         onPress={onPress}
         onLongPress={onLongPress}
-        accessibilityRole="button"
+        accessibilityRole={onPress ? "button" : undefined}
+      tabIndex={onPress ? undefined : -1}
         accessibilityLabel={a11yLabel}
         {...focusProps}
       >
@@ -327,7 +343,8 @@ export function MediaCard(props: MediaCardProps) {
   const backdrop = iconSize + 20;
 
   return (
-    <Pressable style={[styles.documentCard, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]} onPress={onPress} onLongPress={onLongPress} accessibilityRole="button" accessibilityLabel={a11yLabel} {...focusProps}>
+    <Pressable style={[styles.documentCard, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]} onPress={onPress} onLongPress={onLongPress} accessibilityRole={onPress ? "button" : undefined}
+      tabIndex={onPress ? undefined : -1} accessibilityLabel={a11yLabel} {...focusProps}>
       {(state) => (
         <>
           <View style={[styles.mediaCardBody, { backgroundColor: color }]}>
@@ -381,7 +398,7 @@ function ImageThumbnail(props: ImageThumbnailProps) {
       : { width: "100%" as const, height: "100%" as const };
 
   return (
-    <Pressable onPress={onPress} onLongPress={onLongPress} accessibilityRole={onPress ? "button" : "image"} accessibilityLabel={a11yLabel} {...focusProps} style={[styles.imageThumbnail, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]}>
+    <Pressable onPress={onPress} onLongPress={onLongPress} accessibilityRole={onPress ? "button" : "image"} tabIndex={onPress ? undefined : -1} accessibilityLabel={a11yLabel} {...focusProps} style={[styles.imageThumbnail, sizeStyle, focusVisible && { boxShadow: FOCUS_RING }]}>
       {(state) => (
         <>
           <Image

package/src/file_thumbnail_grid.tsx

@@ -188,6 +188,10 @@ export function FileThumbnailGrid(props: FileThumbnailGridProps) {
           file={file}
           size={size}
           onPress={disablePress || !onFilePress ? undefined : () => onFilePress(file)}
+          // Withholding `onPress` is NOT enough: a tile with none falls back to
+          // opening the file, so it stays a button and a tab stop. The prop has
+          // to reach the tile that honors it.
+          disablePress={disablePress}
           onRemove={onRemove ? () => onRemove(file.id) : undefined}
           selected={selectedIds?.has(file.id)}
         />