Connect react-fast-pdf to the Expensify app

.nvmrc

@@ -1 +1 @@
-20.9.0
+20.10.0

example/src/App.tsx

@@ -51,7 +51,7 @@ function App() {
                             type="button"
                             onClick={() => setFile('example_protected.pdf')}
                         >
-                            example_protected.pdf
+                            example_protected.pdf (Password: 123456)
                         </button>
                     </div>
                 </>

example/src/index.css

@@ -8,11 +8,14 @@
 }
 
 * {
-    margin: 0;
     color: #e7ece9;
     font-family: ExpensifyMono-Neue;
 }
 
+*:not(div) {
+    margin: 0;
+}
+
 body {
     width: 100vw;
     height: 100vh;
@@ -38,6 +41,8 @@ body {
 }
 
 .react-pdf__Page {
+    direction: ltr;
+    margin: 1px auto -8px auto;
     background-color: transparent !important;
 }
 

package.json

@@ -29,8 +29,8 @@
   },
   "homepage": "https://github.com/Expensify/react-fast-pdf#readme",
   "dependencies": {
-    "react-pdf": "^7.3.3",
-    "react-window": "^1.8.9"
+    "react-pdf": "^7.7.0",
+    "react-window": "^1.8.10"
   },
   "peerDependencies": {
     "lodash": "4.x",
@@ -66,13 +66,13 @@
     "prettier": "^3.0.0",
     "style-loader": "^3.3.3",
     "ts-loader": "^9.4.4",
-    "typescript": "^5.1.6",
+    "typescript": "^5.3.2",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1"
   },
   "engines": {
-    "node": "20.9.0",
-    "npm": "10.1.0"
+    "node": "20.10.0",
+    "npm": "10.2.3"
   }
 }

src/PDFPasswordForm.tsx

@@ -6,7 +6,6 @@ import {isSafari} from './helpers';
 
 type Props = {
     isPasswordInvalid?: boolean;
-    isFocused: boolean;
     onSubmit?: (password: string) => void;
     onPasswordChange?: (password: string) => void;
     onPasswordFieldFocus?: (isFocused: boolean) => void;
@@ -16,9 +15,6 @@ const propTypes = {
     /** If the submitted password is invalid (show an error message) */
     isPasswordInvalid: PropTypes.bool,
 
-    /** Should focus to the password input  */
-    isFocused: PropTypes.bool.isRequired,
-
     /** Notify parent that the password form has been submitted */
     onSubmit: PropTypes.func,
 
@@ -36,7 +32,7 @@ const defaultProps = {
     onPasswordFieldFocus: () => {},
 };
 
-function PDFPasswordForm({isPasswordInvalid, isFocused, onSubmit, onPasswordChange, onPasswordFieldFocus}: Props) {
+function PDFPasswordForm({isPasswordInvalid, onSubmit, onPasswordChange, onPasswordFieldFocus}: Props) {
     const [password, setPassword] = useState('');
     const [validationErrorText, setValidationErrorText] = useState('');
     const [shouldShowForm, setShouldShowForm] = useState(false);
@@ -135,7 +131,7 @@ function PDFPasswordForm({isPasswordInvalid, isFocused, onSubmit, onPasswordChan
                          */
                         autoComplete={isSafari() ? 'username' : 'off'}
                         // eslint-disable-next-line jsx-a11y/no-autofocus
-                        autoFocus={isFocused}
+                        autoFocus
                         type="password"
                         onFocus={() => onPasswordFieldFocus?.(true)}
                         onBlur={validateAndNotifyPasswordBlur}
@@ -159,4 +155,5 @@ PDFPasswordForm.propTypes = propTypes;
 PDFPasswordForm.defaultProps = defaultProps;
 PDFPasswordForm.displayName = 'PDFPasswordForm';
 
+export type {Props as PDFPasswordFormProps};
 export default PDFPasswordForm;