@webority/mobile-ui 0.0.39 → 0.2.0

package/lib/module/components/FilePicker/FilePicker.js

@@ -1,791 +1 @@
-"use strict";
-
-/**
- * FilePicker — attachment picking UI with pluggable native sources.
- *
- * The library owns the UI and behaviour: trigger (dashed card / list row /
- * custom render prop), the source-chooser sheet (shared OptionSheet), enforced
- * validation (maxFiles / maxSizeMB / accept / custom), the canonical file
- * shape, per-file status + progress display, remove/retry affordances,
- * a11y, haptics and theming.
- *
- * What it deliberately does NOT own:
- *   - Native picking. Camera / gallery / document access lives in app-level
- *     `sources` adapters (`pick(): Promise<PickedFileInput[]>`), so the
- *     library stays zero-dependency and each app wires the native modules it
- *     already ships. Throwing inside `pick` surfaces as a field error;
- *     returning `[]` is a cancel.
- *   - Networking. Uploads belong to the app's API client / outbox; the app
- *     reflects them back via per-file `status` / `progress` and gets retry
- *     taps through `onRetry`.
- *   - Heavy processing. The async `process` hook runs per accepted file
- *     (compression, EXIF strip, local copy) before it lands in `files` —
- *     plug the app's image pipeline in there.
- */
-
-import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Image, Pressable, ScrollView, StyleSheet, Text, View } from 'react-native';
-import { useControllableState } from "../../hooks/index.js";
-import { fontFor, useTheme } from "../../theme/index.js";
-import { resolveHaptic, triggerHaptic } from "../../utils/index.js";
-import { smoothCorners } from "../../utils/corners.js";
-import { defaultIcons } from "../AppIcon/defaultIcons.js";
-import { OptionSheet } from "../OptionSheet/OptionSheet.js";
-import { Spinner } from "../Spinner/index.js";
-
-/** What a source's `pick()` resolves with — the library normalizes the rest. */
-
-/** Everything a custom `renderFile` template needs to paint one file. */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-let fileIdSeq = 0;
-const nextFileId = () => `wfp-${++fileIdSeq}`;
-const DEFAULT_LABELS = {
-  trigger: 'Attach file',
-  addMore: 'Add more',
-  sheetTitle: 'Add from',
-  removeFile: name => `Remove ${name}`,
-  retry: 'Retry upload',
-  errorTooMany: max => `You can attach up to ${max} files.`,
-  errorTooLarge: (name, maxSizeMB) => `${name} is larger than ${maxSizeMB} MB.`,
-  errorWrongType: name => `${name} is not an accepted file type.`
-};
-export const formatFileSize = bytes => {
-  if (bytes === undefined || bytes <= 0) {
-    return '';
-  }
-  const units = ['B', 'KB', 'MB', 'GB'];
-  let value = bytes;
-  let unit = 0;
-  while (value >= 1024 && unit < units.length - 1) {
-    value /= 1024;
-    unit += 1;
-  }
-  const rounded = value >= 10 || unit === 0 ? Math.round(value) : Math.round(value * 10) / 10;
-  return `${rounded} ${units[unit]}`;
-};
-export const matchesAccept = (type, accept) => {
-  if (!accept || accept.length === 0) {
-    return true;
-  }
-  if (!type) {
-    return false;
-  }
-  return accept.some(glob => {
-    if (glob === '*/*' || glob === '*') {
-      return true;
-    }
-    if (glob.endsWith('/*')) {
-      return type.startsWith(glob.slice(0, glob.length - 1));
-    }
-    return type === glob;
-  });
-};
-const isImage = file => file.type?.startsWith('image/') === true || !file.type && /\.(png|jpe?g|gif|webp|heic)$/i.test(file.name);
-const imageSourceOf = file => file.thumbnailUrl ?? (isImage(file) ? file.uri ?? file.url : undefined);
-
-/** Uppercase extension for the non-image tile, capped for layout ("PDF", "DOCX", "FILE"). */
-const extensionOf = name => {
-  const dot = name.lastIndexOf('.');
-  if (dot <= 0 || dot === name.length - 1) {
-    return 'FILE';
-  }
-  return name.slice(dot + 1).toUpperCase().slice(0, 4);
-};
-const FilePicker = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    files: filesProp,
-    defaultFiles,
-    onChange,
-    sources,
-    maxFiles,
-    maxSizeMB,
-    accept,
-    validate,
-    process,
-    variant = 'card',
-    renderFile,
-    renderTrigger,
-    disabled = false,
-    helperText,
-    error: errorProp,
-    labels: labelsProp,
-    haptic,
-    onPick,
-    onRemove,
-    onError,
-    onFilePress,
-    onRetry,
-    style,
-    accessibilityLabel,
-    testID
-  } = props;
-  const theme = useTheme();
-  const styles = useMemo(() => buildStyles(theme), [theme]);
-  const labels = useMemo(() => ({
-    ...DEFAULT_LABELS,
-    ...labelsProp
-  }), [labelsProp]);
-  const tokens = theme.components.filePicker;
-  const thumbnailSize = tokens?.thumbnailSize ?? 84;
-  const borderRadius = tokens?.borderRadius ?? theme.radius.md;
-  const dashedBorderColor = tokens?.dashedBorderColor ?? theme.colors.primary;
-  const [files, setFilesState] = useControllableState({
-    value: filesProp,
-    defaultValue: defaultFiles ?? [],
-    onChange
-  });
-
-  // Async pick/process callbacks need the latest list, not a stale closure.
-  const filesRef = useRef(files);
-  filesRef.current = files;
-  const setFiles = useCallback(next => {
-    filesRef.current = next;
-    setFilesState(next);
-  }, [setFilesState]);
-  const [localError, setLocalError] = useState(null);
-  const [sheetOpen, setSheetOpen] = useState(false);
-  const fieldError = errorProp ?? localError ?? undefined;
-  const atCapacity = typeof maxFiles === 'number' && files.length >= maxFiles;
-  const reportErrors = useCallback((messages, file) => {
-    if (messages.length === 0) {
-      return;
-    }
-    setLocalError(messages[0]);
-    messages.forEach(m => onError?.(m, file));
-    if (haptic !== false) {
-      triggerHaptic('notificationError');
-    }
-  }, [onError, haptic]);
-  const runSource = useCallback(async source => {
-    let picked;
-    try {
-      picked = await source.pick();
-    } catch (e) {
-      reportErrors([e instanceof Error ? e.message : String(e)]);
-      return;
-    }
-    if (!picked || picked.length === 0) {
-      return;
-    }
-    const normalized = picked.map(p => ({
-      id: nextFileId(),
-      name: p.name ?? p.uri.split('/').pop() ?? 'file',
-      uri: p.uri,
-      type: p.type,
-      size: p.size,
-      meta: p.meta,
-      status: 'idle'
-    }));
-    const errors = [];
-    let candidates = normalized;
-    if (typeof maxFiles === 'number') {
-      const capacity = Math.max(0, maxFiles - filesRef.current.length);
-      if (candidates.length > capacity) {
-        errors.push(labels.errorTooMany(maxFiles));
-        candidates = candidates.slice(0, capacity);
-      }
-    }
-    const accepted = [];
-    for (const file of candidates) {
-      // `?? 0` here used to let an unknown size through as "0 bytes"; some
-      // document providers report no size at all. Only enforce when known.
-      if (typeof maxSizeMB === 'number' && typeof file.size === 'number' && file.size > maxSizeMB * 1024 * 1024) {
-        errors.push(labels.errorTooLarge(file.name, maxSizeMB));
-        continue;
-      }
-      if (!matchesAccept(file.type, accept)) {
-        errors.push(labels.errorWrongType(file.name));
-        continue;
-      }
-      const customError = validate?.(file);
-      if (customError) {
-        errors.push(customError);
-        continue;
-      }
-      accepted.push(file);
-    }
-    reportErrors(errors);
-    if (accepted.length === 0) {
-      return;
-    }
-    if (!process) {
-      setFiles([...filesRef.current, ...accepted]);
-      setLocalError(errors.length > 0 ? errors[0] : null);
-      const h = resolveHaptic(haptic, 'selection');
-      if (h) {
-        triggerHaptic(h);
-      }
-      onPick?.(accepted);
-      return;
-    }
-
-    // With a process hook: land files immediately as 'processing', then
-    // swap each for its processed result (or drop it on failure).
-    const processing = accepted.map(f => ({
-      ...f,
-      status: 'processing'
-    }));
-    setFiles([...filesRef.current, ...processing]);
-    const succeeded = [];
-    for (const file of processing) {
-      try {
-        const result = await process({
-          ...file,
-          status: 'idle'
-        });
-        const finished = {
-          ...result,
-          id: file.id,
-          status: result.status ?? 'idle'
-        };
-        setFiles(filesRef.current.map(f => f.id === file.id ? finished : f));
-        succeeded.push(finished);
-      } catch (e) {
-        setFiles(filesRef.current.filter(f => f.id !== file.id));
-        reportErrors([e instanceof Error ? e.message : String(e)], file);
-      }
-    }
-    if (succeeded.length > 0) {
-      if (errors.length === 0) {
-        setLocalError(null);
-      }
-      const h = resolveHaptic(haptic, 'selection');
-      if (h) {
-        triggerHaptic(h);
-      }
-      onPick?.(succeeded);
-    }
-  }, [maxFiles, maxSizeMB, accept, validate, process, labels, reportErrors, setFiles, onPick, haptic]);
-  const open = useCallback(sourceKey => {
-    if (disabled || atCapacity) {
-      return;
-    }
-    const source = sourceKey ? sources.find(s => s.key === sourceKey) : sources.length === 1 ? sources[0] : undefined;
-    if (source) {
-      void runSource(source);
-      return;
-    }
-    if (sources.length > 1) {
-      setSheetOpen(true);
-    }
-  }, [disabled, atCapacity, sources, runSource]);
-  const removeFile = useCallback(file => {
-    if (disabled) {
-      return;
-    }
-    setFiles(filesRef.current.filter(f => f.id !== file.id));
-    setLocalError(null);
-    const h = resolveHaptic(haptic, 'selection');
-    if (h) {
-      triggerHaptic(h);
-    }
-    onRemove?.(file);
-  }, [disabled, setFiles, onRemove, haptic]);
-  const clear = useCallback(() => {
-    setFiles([]);
-    setLocalError(null);
-  }, [setFiles]);
-  useImperativeHandle(ref, () => ({
-    open,
-    clear
-  }), [open, clear]);
-  const a11ySummary = files.length === 0 ? labels.trigger : `${files.length} file${files.length === 1 ? '' : 's'} attached`;
-  const a11yLabel = accessibilityLabel ?? `Attachments. ${a11ySummary}`;
-  const statusText = file => {
-    switch (file.status) {
-      case 'processing':
-        return 'Processing…';
-      case 'uploading':
-        return `Uploading ${Math.round((file.progress ?? 0) * 100)}%`;
-      case 'done':
-        return 'Uploaded';
-      case 'error':
-        return file.error ?? 'Failed';
-      default:
-        return '';
-    }
-  };
-  const fileA11yLabel = file => [file.name, formatFileSize(file.size), statusText(file)].filter(Boolean).join(', ');
-  const attachmentIcon = theme.icons?.attachment ?? defaultIcons.attachment;
-  const renderStatusOverlay = file => {
-    if (file.status === 'processing') {
-      return /*#__PURE__*/_jsx(View, {
-        style: [styles.tileOverlay, {
-          backgroundColor: theme.colors.background.overlay
-        }],
-        children: /*#__PURE__*/_jsx(Spinner, {
-          size: "sm"
-        })
-      });
-    }
-    if (file.status === 'uploading') {
-      const pct = Math.round((file.progress ?? 0) * 100);
-      return /*#__PURE__*/_jsxs(View, {
-        style: [styles.tileOverlay, {
-          backgroundColor: theme.colors.background.overlay
-        }],
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [styles.tileOverlayText, {
-            color: theme.colors.text.inverse
-          }],
-          children: `${pct}%`
-        }), /*#__PURE__*/_jsx(View, {
-          style: [styles.tileProgressTrack, {
-            backgroundColor: theme.colors.border.primary
-          }],
-          children: /*#__PURE__*/_jsx(View, {
-            style: [styles.tileProgressFill, {
-              width: `${pct}%`,
-              backgroundColor: theme.colors.primary
-            }]
-          })
-        })]
-      });
-    }
-    if (file.status === 'done') {
-      return /*#__PURE__*/_jsx(View, {
-        style: [styles.doneBadge, {
-          backgroundColor: theme.colors.success
-        }],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.doneBadgeText, {
-            color: theme.colors.text.inverse
-          }],
-          children: "\u2713"
-        })
-      });
-    }
-    return null;
-  };
-  const renderThumbnail = file => {
-    const src = imageSourceOf(file);
-    if (src) {
-      return /*#__PURE__*/_jsx(Image, {
-        source: {
-          uri: src
-        },
-        style: styles.thumbnailImage
-      });
-    }
-    return /*#__PURE__*/_jsx(View, {
-      style: [styles.extensionTile, {
-        backgroundColor: theme.colors.background.secondary
-      }],
-      children: /*#__PURE__*/_jsx(Text, {
-        style: [styles.extensionText, {
-          color: theme.colors.text.secondary,
-          ...fontFor(theme, 'semibold')
-        }],
-        children: extensionOf(file.name)
-      })
-    });
-  };
-  const removeButton = file => /*#__PURE__*/_jsx(Pressable, {
-    onPress: () => removeFile(file),
-    disabled: disabled,
-    hitSlop: 8,
-    accessibilityRole: "button",
-    accessibilityLabel: labels.removeFile(file.name),
-    style: [styles.removeButton, {
-      backgroundColor: theme.colors.background.overlay
-    }],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.removeButtonText, {
-        color: theme.colors.text.inverse
-      }],
-      children: "\xD7"
-    })
-  });
-  const retryButton = file => onRetry && file.status === 'error' ? /*#__PURE__*/_jsx(Pressable, {
-    onPress: () => onRetry(file),
-    disabled: disabled,
-    hitSlop: 8,
-    accessibilityRole: "button",
-    accessibilityLabel: labels.retry,
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.retryText, {
-        color: theme.colors.primary
-      }],
-      children: "\u21BB"
-    })
-  }) : null;
-  const defaultCardFile = state => {
-    const {
-      file
-    } = state;
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.tile, {
-        width: thumbnailSize,
-        height: thumbnailSize,
-        borderRadius,
-        ...smoothCorners,
-        borderColor: file.status === 'error' ? theme.colors.error : theme.colors.border.primary
-      }],
-      children: [renderThumbnail(file), renderStatusOverlay(file), file.status === 'error' ? /*#__PURE__*/_jsx(View, {
-        style: [styles.tileOverlay, {
-          backgroundColor: theme.colors.background.overlay
-        }],
-        children: retryButton(file)
-      }) : null, removeButton(file)]
-    });
-  };
-  const defaultListFile = state => {
-    const {
-      file
-    } = state;
-    const status = statusText(file);
-    return /*#__PURE__*/_jsxs(View, {
-      style: [styles.listRow, {
-        borderRadius,
-        ...smoothCorners,
-        borderColor: file.status === 'error' ? theme.colors.error : theme.colors.border.primary,
-        backgroundColor: theme.colors.background.primary
-      }],
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: [styles.listThumb, {
-          borderRadius: theme.radius.sm,
-          ...smoothCorners
-        }],
-        children: [renderThumbnail(file), file.status === 'processing' ? /*#__PURE__*/_jsx(View, {
-          style: [styles.tileOverlay, {
-            backgroundColor: theme.colors.background.overlay
-          }],
-          children: /*#__PURE__*/_jsx(Spinner, {
-            size: "sm"
-          })
-        }) : null]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.listTextWrap,
-        children: [/*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          ellipsizeMode: "middle",
-          style: [styles.listName, {
-            color: theme.colors.text.primary,
-            fontSize: theme.typography.fontSize.sm,
-            ...fontFor(theme, 'medium')
-          }],
-          children: file.name
-        }), /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [styles.listSubtitle, {
-            color: file.status === 'error' ? theme.colors.error : theme.colors.text.tertiary,
-            fontSize: theme.typography.fontSize.xs
-          }],
-          children: [formatFileSize(file.size), status].filter(Boolean).join(' · ')
-        }), file.status === 'uploading' ? /*#__PURE__*/_jsx(View, {
-          style: [styles.listProgressTrack, {
-            backgroundColor: theme.colors.border.primary
-          }],
-          children: /*#__PURE__*/_jsx(View, {
-            style: [styles.listProgressFill, {
-              width: `${Math.round((file.progress ?? 0) * 100)}%`,
-              backgroundColor: theme.colors.primary
-            }]
-          })
-        }) : null]
-      }), retryButton(file), /*#__PURE__*/_jsx(Pressable, {
-        onPress: () => removeFile(file),
-        disabled: disabled,
-        hitSlop: 8,
-        accessibilityRole: "button",
-        accessibilityLabel: labels.removeFile(file.name),
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [styles.listRemoveText, {
-            color: theme.colors.text.tertiary
-          }],
-          children: "\xD7"
-        })
-      })]
-    });
-  };
-  const renderOneFile = (file, index) => {
-    const state = {
-      file,
-      index,
-      disabled,
-      remove: () => removeFile(file),
-      retry: onRetry ? () => onRetry(file) : undefined
-    };
-    const content = renderFile ? renderFile(state) : variant === 'card' ? defaultCardFile(state) : defaultListFile(state);
-    return /*#__PURE__*/_jsx(Pressable, {
-      onPress: onFilePress ? () => onFilePress(file) : undefined,
-      disabled: disabled || !onFilePress,
-      accessibilityLabel: fileA11yLabel(file),
-      children: content
-    }, file.id);
-  };
-  const triggerState = {
-    open,
-    disabled: disabled || atCapacity,
-    fileCount: files.length,
-    atCapacity
-  };
-  const dashedTrigger = compact => /*#__PURE__*/_jsxs(Pressable, {
-    onPress: () => open(),
-    disabled: disabled || atCapacity,
-    accessibilityRole: "button",
-    accessibilityLabel: a11yLabel,
-    accessibilityState: {
-      disabled: disabled || atCapacity
-    },
-    style: ({
-      pressed
-    }) => [styles.trigger, compact ? styles.triggerCompact : null, {
-      borderRadius,
-      ...smoothCorners,
-      borderColor: dashedBorderColor,
-      backgroundColor: pressed ? theme.colors.surface.pressed : theme.colors.background.primary,
-      opacity: disabled || atCapacity ? 0.55 : 1
-    }],
-    children: [/*#__PURE__*/_jsxs(View, {
-      style: styles.triggerRow,
-      children: [attachmentIcon ? attachmentIcon({
-        size: 16,
-        color: theme.colors.primary
-      }) : null, /*#__PURE__*/_jsx(Text, {
-        style: [styles.triggerText, {
-          color: theme.colors.primary,
-          fontSize: theme.typography.fontSize.sm,
-          ...fontFor(theme, 'medium')
-        }],
-        children: files.length === 0 ? labels.trigger : labels.addMore
-      })]
-    }), !compact && helperText ? /*#__PURE__*/_jsx(Text, {
-      style: [styles.helperText, {
-        color: theme.colors.text.tertiary,
-        fontSize: theme.typography.fontSize.xs
-      }],
-      children: helperText
-    }) : null]
-  });
-  const addMoreTile = /*#__PURE__*/_jsx(Pressable, {
-    onPress: () => open(),
-    disabled: disabled || atCapacity,
-    accessibilityRole: "button",
-    accessibilityLabel: labels.addMore,
-    style: ({
-      pressed
-    }) => [styles.tile, styles.addTile, {
-      width: thumbnailSize,
-      height: thumbnailSize,
-      borderRadius,
-      ...smoothCorners,
-      borderColor: dashedBorderColor,
-      backgroundColor: pressed ? theme.colors.surface.pressed : 'transparent',
-      opacity: disabled || atCapacity ? 0.55 : 1
-    }],
-    children: /*#__PURE__*/_jsx(Text, {
-      style: [styles.addTileText, {
-        color: theme.colors.primary
-      }],
-      children: "+"
-    })
-  });
-  return /*#__PURE__*/_jsxs(View, {
-    style: [styles.container, style],
-    testID: testID,
-    accessibilityLabel: a11yLabel,
-    children: [variant === 'card' ? files.length === 0 ? renderTrigger ? renderTrigger(triggerState) : dashedTrigger(false) : /*#__PURE__*/_jsxs(ScrollView, {
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      contentContainerStyle: [styles.strip, {
-        columnGap: theme.spacing.sm
-      }],
-      children: [files.map(renderOneFile), renderTrigger ? renderTrigger(triggerState) : !atCapacity && !disabled ? addMoreTile : null]
-    }) : /*#__PURE__*/_jsxs(View, {
-      style: {
-        rowGap: theme.spacing.sm
-      },
-      children: [renderTrigger ? renderTrigger(triggerState) : !atCapacity ? dashedTrigger(files.length > 0) : null, files.map(renderOneFile)]
-    }), fieldError ? /*#__PURE__*/_jsx(Text, {
-      accessibilityLiveRegion: "polite",
-      style: [styles.errorText, {
-        color: theme.colors.error,
-        fontSize: theme.typography.fontSize.xs,
-        marginTop: theme.spacing.xxs
-      }],
-      children: fieldError
-    }) : null, /*#__PURE__*/_jsx(OptionSheet, {
-      open: sheetOpen,
-      onClose: () => setSheetOpen(false),
-      title: labels.sheetTitle,
-      options: sources,
-      labelOf: s => s.label,
-      getValue: s => s.key,
-      disabledOf: () => false,
-      descriptionOf: s => s.description,
-      iconOf: s => s.icon,
-      isSelected: () => false,
-      onSelect: s => {
-        setSheetOpen(false);
-        void runSource(s);
-      }
-    })]
-  });
-});
-FilePicker.displayName = 'FilePicker';
-const buildStyles = _theme => StyleSheet.create({
-  container: {
-    width: '100%'
-  },
-  trigger: {
-    borderWidth: 1,
-    borderStyle: 'dashed',
-    alignItems: 'center',
-    paddingVertical: 14,
-    paddingHorizontal: 16
-  },
-  triggerCompact: {
-    paddingVertical: 10
-  },
-  triggerRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    columnGap: 8
-  },
-  triggerText: {
-    includeFontPadding: false
-  },
-  helperText: {
-    includeFontPadding: false,
-    marginTop: 6,
-    textAlign: 'center'
-  },
-  strip: {
-    paddingVertical: 2
-  },
-  tile: {
-    borderWidth: 1,
-    overflow: 'hidden'
-  },
-  addTile: {
-    borderStyle: 'dashed',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  addTileText: {
-    fontSize: 28,
-    includeFontPadding: false
-  },
-  thumbnailImage: {
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover'
-  },
-  extensionTile: {
-    width: '100%',
-    height: '100%',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  extensionText: {
-    fontSize: 12,
-    letterSpacing: 1,
-    includeFontPadding: false
-  },
-  tileOverlay: {
-    ...StyleSheet.absoluteFill,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  tileOverlayText: {
-    fontSize: 12,
-    includeFontPadding: false,
-    marginBottom: 6
-  },
-  tileProgressTrack: {
-    position: 'absolute',
-    left: 8,
-    right: 8,
-    bottom: 8,
-    height: 3,
-    borderRadius: 2,
-    ...smoothCorners,
-    overflow: 'hidden'
-  },
-  tileProgressFill: {
-    height: '100%',
-    borderRadius: 2,
-    ...smoothCorners
-  },
-  doneBadge: {
-    position: 'absolute',
-    right: 4,
-    bottom: 4,
-    width: 18,
-    height: 18,
-    borderRadius: 9,
-    ...smoothCorners,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  doneBadgeText: {
-    fontSize: 11,
-    includeFontPadding: false
-  },
-  removeButton: {
-    position: 'absolute',
-    top: 4,
-    right: 4,
-    width: 20,
-    height: 20,
-    borderRadius: 10,
-    ...smoothCorners,
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  removeButtonText: {
-    fontSize: 13,
-    lineHeight: 15,
-    includeFontPadding: false
-  },
-  retryText: {
-    fontSize: 20,
-    includeFontPadding: false
-  },
-  listRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderWidth: 1,
-    padding: 10,
-    columnGap: 10
-  },
-  listThumb: {
-    width: 40,
-    height: 40,
-    overflow: 'hidden'
-  },
-  listTextWrap: {
-    flex: 1
-  },
-  listName: {
-    includeFontPadding: false
-  },
-  listSubtitle: {
-    includeFontPadding: false,
-    marginTop: 2
-  },
-  listProgressTrack: {
-    height: 3,
-    borderRadius: 2,
-    ...smoothCorners,
-    overflow: 'hidden',
-    marginTop: 6
-  },
-  listProgressFill: {
-    height: '100%',
-    borderRadius: 2,
-    ...smoothCorners
-  },
-  listRemoveText: {
-    fontSize: 22,
-    includeFontPadding: false,
-    paddingHorizontal: 4
-  },
-  errorText: {
-    includeFontPadding: false
-  }
-});
-export { FilePicker };
-export default FilePicker;
-//# sourceMappingURL=FilePicker.js.map
+"use strict";import React,{forwardRef,useCallback,useImperativeHandle,useMemo,useRef,useState}from"react";import{Image,Pressable,ScrollView,StyleSheet,Text,View}from"react-native";import{useControllableState}from"../../hooks/index.js";import{fontFor,useTheme}from"../../theme/index.js";import{resolveHaptic,triggerHaptic}from"../../utils/index.js";import{smoothCorners}from"../../utils/corners.js";import{defaultIcons}from"../AppIcon/defaultIcons.js";import{OptionSheet}from"../OptionSheet/OptionSheet.js";import{Spinner}from"../Spinner/index.js";import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";let fileIdSeq=0;const nextFileId=()=>"wfp-"+ ++fileIdSeq,DEFAULT_LABELS={trigger:"Attach file",addMore:"Add more",sheetTitle:"Add from",removeFile:e=>`Remove ${e}`,retry:"Retry upload",errorTooMany:e=>`You can attach up to ${e} files.`,errorTooLarge:(e,r)=>`${e} is larger than ${r} MB.`,errorWrongType:e=>`${e} is not an accepted file type.`};export const formatFileSize=e=>{if(void 0===e||e<=0)return"";const r=["B","KB","MB","GB"];let t=e,o=0;for(;t>=1024&&o<r.length-1;)t/=1024,o+=1;return`${t>=10||0===o?Math.round(t):Math.round(10*t)/10} ${r[o]}`};export const matchesAccept=(e,r)=>!r||0===r.length||!!e&&r.some(r=>"*/*"===r||"*"===r||(r.endsWith("/*")?e.startsWith(r.slice(0,r.length-1)):e===r));const isImage=e=>!0===e.type?.startsWith("image/")||!e.type&&/\.(png|jpe?g|gif|webp|heic)$/i.test(e.name),imageSourceOf=e=>e.thumbnailUrl??(isImage(e)?e.uri??e.url:void 0),extensionOf=e=>{const r=e.lastIndexOf(".");return r<=0||r===e.length-1?"FILE":e.slice(r+1).toUpperCase().slice(0,4)},FilePicker=forwardRef((e,r)=>{const{files:t,defaultFiles:o,onChange:i,sources:s,maxFiles:l,maxSizeMB:n,accept:a,validate:c,process:d,variant:u="card",renderFile:g,renderTrigger:h,disabled:p=!1,helperText:m,error:y,labels:b,haptic:f,onPick:x,onRemove:S,onError:T,onFilePress:j,onRetry:C,style:v,accessibilityLabel:w,testID:k}=e,_=useTheme(),F=useMemo(()=>buildStyles(_),[_]),P=useMemo(()=>({...DEFAULT_LABELS,...b}),[b]),z=_.components.filePicker,R=z?.thumbnailSize??84,I=z?.borderRadius??_.radius.md,V=z?.dashedBorderColor??_.colors.primary,[O,B]=useControllableState({value:t,defaultValue:o??[],onChange:i}),L=useRef(O);L.current=O;const M=useCallback(e=>{L.current=e,B(e)},[B]),[H,$]=useState(null),[A,E]=useState(!1),W=y??H??void 0,D="number"==typeof l&&O.length>=l,U=useCallback((e,r)=>{0!==e.length&&($(e[0]),e.forEach(e=>T?.(e,r)),!1!==f&&triggerHaptic("notificationError"))},[T,f]),G=useCallback(async e=>{let r;try{r=await e.pick()}catch(e){return void U([e instanceof Error?e.message:String(e)])}if(!r||0===r.length)return;const t=[];let o=r.map(e=>({id:nextFileId(),name:e.name??e.uri.split("/").pop()??"file",uri:e.uri,type:e.type,size:e.size,meta:e.meta,status:"idle"}));if("number"==typeof l){const e=Math.max(0,l-L.current.length);o.length>e&&(t.push(P.errorTooMany(l)),o=o.slice(0,e))}const i=[];for(const e of o){if("number"==typeof n&&"number"==typeof e.size&&e.size>1024*n*1024){t.push(P.errorTooLarge(e.name,n));continue}if(!matchesAccept(e.type,a)){t.push(P.errorWrongType(e.name));continue}const r=c?.(e);r?t.push(r):i.push(e)}if(U(t),0===i.length)return;if(!d){M([...L.current,...i]),$(t.length>0?t[0]:null);const e=resolveHaptic(f,"selection");return e&&triggerHaptic(e),void x?.(i)}const s=i.map(e=>({...e,status:"processing"}));M([...L.current,...s]);const u=[];for(const e of s)try{const r=await d({...e,status:"idle"}),t={...r,id:e.id,status:r.status??"idle"};M(L.current.map(r=>r.id===e.id?t:r)),u.push(t)}catch(r){M(L.current.filter(r=>r.id!==e.id)),U([r instanceof Error?r.message:String(r)],e)}if(u.length>0){0===t.length&&$(null);const e=resolveHaptic(f,"selection");e&&triggerHaptic(e),x?.(u)}},[l,n,a,c,d,P,U,M,x,f]),N=useCallback(e=>{if(p||D)return;const r=e?s.find(r=>r.key===e):1===s.length?s[0]:void 0;r?G(r):s.length>1&&E(!0)},[p,D,s,G]),q=useCallback(e=>{if(p)return;M(L.current.filter(r=>r.id!==e.id)),$(null);const r=resolveHaptic(f,"selection");r&&triggerHaptic(r),S?.(e)},[p,M,S,f]),K=useCallback(()=>{M([]),$(null)},[M]);useImperativeHandle(r,()=>({open:N,clear:K}),[N,K]);const Y=0===O.length?P.trigger:`${O.length} file${1===O.length?"":"s"} attached`,J=w??`Attachments. ${Y}`,statusText=e=>{switch(e.status){case"processing":return"Processing…";case"uploading":return`Uploading ${Math.round(100*(e.progress??0))}%`;case"done":return"Uploaded";case"error":return e.error??"Failed";default:return""}},fileA11yLabel=e=>[e.name,formatFileSize(e.size),statusText(e)].filter(Boolean).join(", "),Q=_.icons?.attachment??defaultIcons.attachment,renderStatusOverlay=e=>{if("processing"===e.status)return _jsx(View,{style:[F.tileOverlay,{backgroundColor:_.colors.background.overlay}],children:_jsx(Spinner,{size:"sm"})});if("uploading"===e.status){const r=Math.round(100*(e.progress??0));return _jsxs(View,{style:[F.tileOverlay,{backgroundColor:_.colors.background.overlay}],children:[_jsx(Text,{style:[F.tileOverlayText,{color:_.colors.onOverlay}],children:`${r}%`}),_jsx(View,{style:[F.tileProgressTrack,{backgroundColor:_.colors.border.primary}],children:_jsx(View,{style:[F.tileProgressFill,{width:`${r}%`,backgroundColor:_.colors.primary}]})})]})}return"done"===e.status?_jsx(View,{style:[F.doneBadge,{backgroundColor:_.colors.success}],children:_jsx(Text,{style:[F.doneBadgeText,{color:_.colors.onSuccess}],children:"✓"})}):null},renderThumbnail=e=>{const r=imageSourceOf(e);return r?_jsx(Image,{source:{uri:r},style:F.thumbnailImage}):_jsx(View,{style:[F.extensionTile,{backgroundColor:_.colors.background.secondary}],children:_jsx(Text,{style:[F.extensionText,{color:_.colors.text.secondary,...fontFor(_,"semibold")}],children:extensionOf(e.name)})})},removeButton=e=>_jsx(Pressable,{onPress:()=>q(e),disabled:p,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(e.name),style:[F.removeButton,{backgroundColor:_.colors.background.overlay}],children:_jsx(Text,{style:[F.removeButtonText,{color:_.colors.onOverlay}],children:"×"})}),retryButton=e=>C&&"error"===e.status?_jsx(Pressable,{onPress:()=>C(e),disabled:p,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.retry,children:_jsx(Text,{style:[F.retryText,{color:_.colors.primary}],children:"↻"})}):null,renderOneFile=(e,r)=>{const t={file:e,index:r,disabled:p,remove:()=>q(e),retry:C?()=>C(e):void 0},o=g?g(t):"card"===u?(e=>{const{file:r}=e;return _jsxs(View,{style:[F.tile,{width:R,height:R,borderRadius:I,...smoothCorners,borderColor:"error"===r.status?_.colors.error:_.colors.border.primary}],children:[renderThumbnail(r),renderStatusOverlay(r),"error"===r.status?_jsx(View,{style:[F.tileOverlay,{backgroundColor:_.colors.background.overlay}],children:retryButton(r)}):null,removeButton(r)]})})(t):(e=>{const{file:r}=e,t=statusText(r);return _jsxs(View,{style:[F.listRow,{borderRadius:I,...smoothCorners,borderColor:"error"===r.status?_.colors.error:_.colors.border.primary,backgroundColor:_.colors.background.primary}],children:[_jsxs(View,{style:[F.listThumb,{borderRadius:_.radius.sm,...smoothCorners}],children:[renderThumbnail(r),"processing"===r.status?_jsx(View,{style:[F.tileOverlay,{backgroundColor:_.colors.background.overlay}],children:_jsx(Spinner,{size:"sm"})}):null]}),_jsxs(View,{style:F.listTextWrap,children:[_jsx(Text,{numberOfLines:1,ellipsizeMode:"middle",style:[F.listName,{color:_.colors.text.primary,fontSize:_.typography.fontSize.sm,...fontFor(_,"medium")}],children:r.name}),_jsx(Text,{numberOfLines:1,style:[F.listSubtitle,{color:"error"===r.status?_.colors.error:_.colors.text.tertiary,fontSize:_.typography.fontSize.xs}],children:[formatFileSize(r.size),t].filter(Boolean).join(" · ")}),"uploading"===r.status?_jsx(View,{style:[F.listProgressTrack,{backgroundColor:_.colors.border.primary}],children:_jsx(View,{style:[F.listProgressFill,{width:`${Math.round(100*(r.progress??0))}%`,backgroundColor:_.colors.primary}]})}):null]}),retryButton(r),_jsx(Pressable,{onPress:()=>q(r),disabled:p,hitSlop:8,accessibilityRole:"button",accessibilityLabel:P.removeFile(r.name),children:_jsx(Text,{style:[F.listRemoveText,{color:_.colors.text.tertiary}],children:"×"})})]})})(t);return _jsx(Pressable,{onPress:j?()=>j(e):void 0,disabled:p||!j,accessibilityLabel:fileA11yLabel(e),children:o},e.id)},X={open:N,disabled:p||D,fileCount:O.length,atCapacity:D},dashedTrigger=e=>_jsxs(Pressable,{onPress:()=>N(),disabled:p||D,accessibilityRole:"button",accessibilityLabel:J,accessibilityState:{disabled:p||D},style:({pressed:r})=>[F.trigger,e?F.triggerCompact:null,{borderRadius:I,...smoothCorners,borderColor:V,backgroundColor:r?_.colors.surface.pressed:_.colors.background.primary,opacity:p||D?.55:1}],children:[_jsxs(View,{style:F.triggerRow,children:[Q?Q({size:16,color:_.colors.primary}):null,_jsx(Text,{style:[F.triggerText,{color:_.colors.primary,fontSize:_.typography.fontSize.sm,...fontFor(_,"medium")}],children:0===O.length?P.trigger:P.addMore})]}),!e&&m?_jsx(Text,{style:[F.helperText,{color:_.colors.text.tertiary,fontSize:_.typography.fontSize.xs}],children:m}):null]}),Z=_jsx(Pressable,{onPress:()=>N(),disabled:p||D,accessibilityRole:"button",accessibilityLabel:P.addMore,style:({pressed:e})=>[F.tile,F.addTile,{width:R,height:R,borderRadius:I,...smoothCorners,borderColor:V,backgroundColor:e?_.colors.surface.pressed:"transparent",opacity:p||D?.55:1}],children:_jsx(Text,{style:[F.addTileText,{color:_.colors.primary}],children:"+"})});return _jsxs(View,{style:[F.container,v],testID:k,accessibilityLabel:J,children:["card"===u?0===O.length?h?h(X):dashedTrigger(!1):_jsxs(ScrollView,{horizontal:!0,showsHorizontalScrollIndicator:!1,contentContainerStyle:[F.strip,{columnGap:_.spacing.sm}],children:[O.map(renderOneFile),h?h(X):D||p?null:Z]}):_jsxs(View,{style:{rowGap:_.spacing.sm},children:[h?h(X):D?null:dashedTrigger(O.length>0),O.map(renderOneFile)]}),W?_jsx(Text,{accessibilityLiveRegion:"polite",style:[F.errorText,{color:_.colors.error,fontSize:_.typography.fontSize.xs,marginTop:_.spacing.xxs}],children:W}):null,_jsx(OptionSheet,{open:A,onClose:()=>E(!1),title:P.sheetTitle,options:s,labelOf:e=>e.label,getValue:e=>e.key,disabledOf:()=>!1,descriptionOf:e=>e.description,iconOf:e=>e.icon,isSelected:()=>!1,onSelect:e=>{E(!1),G(e)}})]})});FilePicker.displayName="FilePicker";const buildStyles=e=>StyleSheet.create({container:{width:"100%"},trigger:{borderWidth:1,borderStyle:"dashed",alignItems:"center",paddingVertical:14,paddingHorizontal:16},triggerCompact:{paddingVertical:10},triggerRow:{flexDirection:"row",alignItems:"center",columnGap:8},triggerText:{includeFontPadding:!1},helperText:{includeFontPadding:!1,marginTop:6,textAlign:"center"},strip:{paddingVertical:2},tile:{borderWidth:1,overflow:"hidden"},addTile:{borderStyle:"dashed",alignItems:"center",justifyContent:"center"},addTileText:{fontSize:28,includeFontPadding:!1},thumbnailImage:{width:"100%",height:"100%",resizeMode:"cover"},extensionTile:{width:"100%",height:"100%",alignItems:"center",justifyContent:"center"},extensionText:{fontSize:12,letterSpacing:1,includeFontPadding:!1},tileOverlay:{...StyleSheet.absoluteFill,alignItems:"center",justifyContent:"center"},tileOverlayText:{fontSize:12,includeFontPadding:!1,marginBottom:6},tileProgressTrack:{position:"absolute",left:8,right:8,bottom:8,height:3,borderRadius:2,...smoothCorners,overflow:"hidden"},tileProgressFill:{height:"100%",borderRadius:2,...smoothCorners},doneBadge:{position:"absolute",right:4,bottom:4,width:18,height:18,borderRadius:9,...smoothCorners,alignItems:"center",justifyContent:"center"},doneBadgeText:{fontSize:11,includeFontPadding:!1},removeButton:{position:"absolute",top:4,right:4,width:20,height:20,borderRadius:10,...smoothCorners,alignItems:"center",justifyContent:"center"},removeButtonText:{fontSize:13,lineHeight:15,includeFontPadding:!1},retryText:{fontSize:20,includeFontPadding:!1},listRow:{flexDirection:"row",alignItems:"center",borderWidth:1,padding:10,columnGap:10},listThumb:{width:40,height:40,overflow:"hidden"},listTextWrap:{flex:1},listName:{includeFontPadding:!1},listSubtitle:{includeFontPadding:!1,marginTop:2},listProgressTrack:{height:3,borderRadius:2,...smoothCorners,overflow:"hidden",marginTop:6},listProgressFill:{height:"100%",borderRadius:2,...smoothCorners},listRemoveText:{fontSize:22,includeFontPadding:!1,paddingHorizontal:4},errorText:{includeFontPadding:!1}});export{FilePicker};export default FilePicker;