@financial-times/o3-form 0.9.0 → 0.11.0

package/README.md

@@ -12,6 +12,7 @@ Provides components to construct forms.
 	- [Checkbox](#checkbox)
 		- [Checkbox Group](#checkbox-group)
 	- [Select Input](#select-input)
+    - [File Upload](#file-upload)
 	- [Date Input](#date-input)
 - [Contact](#contact)
 - [Licence](#licence)
@@ -535,6 +536,74 @@ import {SelectInput} from '@financial-times/o3-form';
 </SelectInput>
 ```
 
+### File Input
+
+Use to provide an interface for users to upload files.
+
+**TSX**
+```tsx
+import {FileInput} from '@financial-times/o3-form';
+
+<FileInputTsx
+	label="Driving license"
+	description="Photograph of the front side of your driving license" />
+```
+
+**HTML**
+
+```html
+
+<div class="o3-form-field">
+	<label
+		class="o3-form-field__label"
+		htmlFor="o3-form-file-input"
+	>
+		Driving license
+	</label>
+	<span
+		class="o3-form-input__description"
+		id="o3-form-description"
+	>
+        			The front face of your driving license
+      			</span>
+	<div class="o3-form-file-input" id="file-input-container">
+		<label
+			htmlFor="file-input"
+			class="o3-form-file-input__label"
+			tabIndex="0"
+		>
+				<span
+					class="o3-form-file-input__label-button o3-button o3-button--primary o3-button-icon o3-button-icon--upload">File Upload</span>
+			<span data-testid="file-input-label" class="o3-form-file-input__label-text">No file chosen</span>
+			<input
+				data-testid="file-input"
+				id="file-input"
+				className="o3-form-file-input__input-field"
+				required
+				aria-required="true"
+				type="file"
+			/>
+		</label>
+	</div>
+</div>
+```
+Be sure to enable javascript to make use of delete button and uploading status:
+
+```js
+	const fileUploadElement = canvasElement.querySelector('#file-input');
+
+	if (fileUploadElement) {
+		new FileUploadController(fileUploadElement)
+	}
+
+	// Use event listeners to control the state of loading
+	fileUploadElement.dispatchEvent('o3Form.uploading.start');
+
+	// Remove uploading indicator
+	fileUploadElement.dispatchEvent('o3Form.uploading.complete');
+```
+
+
 #### Short Text Input
 
 Select input supports width control for shorter inputs:

package/cjs/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, F as FormFieldsetProps } from './index-CtGGU7zN.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-DupfYbgc.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/cjs/DateInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DateInputProps } from './index-CtGGU7zN.js';
+import { D as DateInputProps } from './index-DupfYbgc.js';
 
 declare const DateInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: DateInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/DateInputPicker.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DateInputProps } from './index-CtGGU7zN.js';
+import { D as DateInputProps } from './index-DupfYbgc.js';
 
 declare const DateInputPicker: ({ label, feedback, description, disabled, attributes, inputId, optional, }: DateInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/Error-summary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as ErrorSummaryProps } from './index-CtGGU7zN.js';
+import { E as ErrorSummaryProps } from './index-DupfYbgc.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/FileInput.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as FileInputProps } from './index-DupfYbgc.js';
+
+declare const FileInput: ({ label, feedback, description, disabled, attributes, inputId, optional, isUploading }: FileInputProps) => react_jsx_runtime.JSX.Element;
+
+export { FileInput };

package/cjs/FileInput.js

@@ -0,0 +1,85 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }var _jsxruntime = require('react/jsx-runtime');
+var _outils = require('@financial-times/o-utils');
+var _FormField = require('./fieldComponents/FormField');
+var _react = require('react');
+const uniqueId = _outils.uidBuilder.call(void 0, "o3-form-file-input");
+const FileInput = ({
+  label,
+  feedback,
+  description,
+  disabled,
+  attributes,
+  inputId,
+  optional,
+  isUploading
+}) => {
+  const id = inputId || uniqueId("_");
+  const [file, setFile] = _react.useState.call(void 0, null);
+  const onUpload = (event) => {
+    setFile(_nullishCoalesce(_optionalChain([event, 'access', _ => _.target, 'access', _2 => _2.files, 'optionalAccess', _3 => _3[0]]), () => ( null)));
+  };
+  const onReset = () => {
+    setFile(null);
+  };
+  const inputClasses = ["o3-form-file-input"];
+  if (feedback && feedback.type === "error") {
+    inputClasses.push("o3-form-text-file--error");
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _FormField.LabeledFormField,
+    {
+      label,
+      feedback,
+      description,
+      inputId: id,
+      optional,
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: inputClasses.join(" "), children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { htmlFor: id, className: "o3-form-file-input__label", children: [
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "span",
+              {
+                className: "o3-form-file-input__label-button o3-button o3-button--primary o3-button-icon o3-button-icon--upload",
+                children: "File Upload"
+              }
+            ),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              "span",
+              {
+                "data-testid": "file-input-label",
+                className: "o3-form-file-input__label-text",
+                children: _optionalChain([file, 'optionalAccess', _4 => _4.name]) ? _optionalChain([file, 'optionalAccess', _5 => _5.name]) : "No file chosen"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "input",
+            {
+              ...attributes,
+              id,
+              className: "o3-form-file-input__input-field",
+              disabled,
+              required: !optional,
+              onChange: onUpload,
+              "aria-required": !optional,
+              type: "file"
+            }
+          ),
+          file && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            "button",
+            {
+              type: "button",
+              className: "o3-form-field-input__destroy",
+              "aria-label": "Delete file",
+              onClick: onReset
+            }
+          )
+        ] }),
+        isUploading && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "o3-form-file-input__uploading", children: "Uploading" })
+      ] })
+    }
+  );
+};
+
+
+exports.FileInput = FileInput;

package/cjs/FileUploadController.d.ts

@@ -0,0 +1,11 @@
+declare class FileUploadController {
+    constructor(fileInput: HTMLInputElement);
+    private _updateStatus;
+    private _reset;
+    private _displayUpload;
+    private _removeUpload;
+    private static createUploadingElement;
+    private static createDestroyElement;
+}
+
+export { FileUploadController };

package/cjs/FileUploadController.js

@@ -0,0 +1,73 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }class FileUploadController {
+  constructor(fileInput) {
+    this._updateStatus = (event) => {
+      const target = event.target;
+      if (!target) return;
+      const formField = _optionalChain([target, 'optionalAccess', _ => _.closest, 'call', _2 => _2(".o3-form-field")]);
+      if (!formField) return;
+      const inputFileContainer = formField.querySelector(".o3-form-file-input");
+      if (!inputFileContainer) return;
+      const labelText = inputFileContainer.querySelector(".o3-form-file-input__label-text");
+      if (!labelText) return;
+      if (target && target.files && target.files.length > 0 && !formField.querySelector(".o3-form-field-input__destroy")) {
+        inputFileContainer.appendChild(FileUploadController.createDestroyElement(target));
+        labelText.classList.add("o3-form-field-input__label__text--file-selected");
+      } else {
+        labelText.classList.remove("o3-form-field-input__label__text--file-selected");
+        _optionalChain([inputFileContainer, 'access', _3 => _3.querySelector, 'call', _4 => _4(".o3-form-field-input__destroy"), 'optionalAccess', _5 => _5.remove, 'call', _6 => _6()]);
+      }
+      labelText.textContent = _optionalChain([target, 'access', _7 => _7.files, 'optionalAccess', _8 => _8[0], 'optionalAccess', _9 => _9.name]) || "No file chosen";
+    };
+    this._reset = (event) => {
+      const target = event.target;
+      if (!target) return;
+      target.value = "";
+      _optionalChain([target, 'optionalAccess', _10 => _10.dispatchEvent, 'call', _11 => _11(new Event("change"))]);
+    };
+    this._displayUpload = (event) => {
+      const target = event.target;
+      if (!target) return;
+      const formField = target.closest(".o3-form-field");
+      if (target && formField && !formField.querySelector(".o3-form-file-input__uploading")) {
+        formField.appendChild(FileUploadController.createUploadingElement());
+      }
+    };
+    this._removeUpload = (event) => {
+      const target = event.target;
+      if (!target) return;
+      const formField = target.closest(".o3-form-field");
+      if (!formField) return;
+      _optionalChain([formField, 'access', _12 => _12.querySelector, 'call', _13 => _13(".o3-form-file-input__uploading"), 'optionalAccess', _14 => _14.remove, 'call', _15 => _15()]);
+    };
+    fileInput.addEventListener("change", this._updateStatus);
+    fileInput.addEventListener("o3Form.uploading.start", this._displayUpload);
+    fileInput.addEventListener("o3Form.uploading.complete", this._removeUpload);
+    fileInput.addEventListener("o3Form.reset", this._reset);
+    const labelElement = fileInput.closest(".o3-form-file-input__label");
+    if (!labelElement) return;
+    labelElement.addEventListener("keydown", (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        fileInput.click();
+      }
+    });
+  }
+  static createUploadingElement() {
+    const uploadingElement = document.createElement("span");
+    uploadingElement.classList.add("o3-form-file-input__uploading");
+    uploadingElement.innerText = "Uploading";
+    return uploadingElement;
+  }
+  static createDestroyElement(fileInput) {
+    const destroyElement = document.createElement("button");
+    destroyElement.classList.add("o3-form-field-input__destroy");
+    destroyElement.setAttribute("aria-label", "Delete file");
+    destroyElement.addEventListener("click", () => {
+      fileInput.dispatchEvent(new CustomEvent("o3Form.reset"));
+    });
+    return destroyElement;
+  }
+}
+
+
+exports.FileUploadController = FileUploadController;

package/cjs/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PasswordInputProps } from './index-CtGGU7zN.js';
+import { P as PasswordInputProps } from './index-DupfYbgc.js';
 
 declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, forgotPasswordLink, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RadioButtonProps, F as FormFieldsetProps } from './index-CtGGU7zN.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-DupfYbgc.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/cjs/SelectInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SelectInputProps } from './index-CtGGU7zN.js';
+import { S as SelectInputProps } from './index-DupfYbgc.js';
 
 declare const SelectInput: ({ label, feedback, description, disabled, attributes, inputId, optional, children, length, }: SelectInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-CtGGU7zN.js';
+import { T as TextInputProps } from './index-DupfYbgc.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/fieldComponents/Feedback.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FeedbackProps } from '../index-CtGGU7zN.js';
+import { b as FeedbackProps } from '../index-DupfYbgc.js';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/cjs/fieldComponents/FormField.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FormFieldProps, F as FormFieldsetProps } from '../index-CtGGU7zN.js';
+import { c as FormFieldProps, F as FormFieldsetProps } from '../index-DupfYbgc.js';
 
 declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
 declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;

package/cjs/{index-CtGGU7zN.d.ts → index-DupfYbgc.d.ts}

@@ -11,6 +11,11 @@ interface TextInputProps extends BaseInputProps {
     length?: 2 | 3 | 4 | 5;
     feedback?: FeedbackProps;
 }
+interface FileInputProps extends BaseInputProps {
+    isUploading?: boolean;
+    disabled?: boolean;
+    feedback?: FeedbackProps;
+}
 interface DateInputProps extends BaseInputProps {
     disabled?: boolean;
     feedback?: FeedbackProps;
@@ -68,4 +73,4 @@ type ErrorSummaryProps = {
     }[];
 };
 
-export type { CheckBoxProps as C, DateInputProps as D, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, SelectInputProps as S, TextInputProps as T, FeedbackProps as a, FormFieldProps as b };
+export type { CheckBoxProps as C, DateInputProps as D, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, SelectInputProps as S, TextInputProps as T, FileInputProps as a, FeedbackProps as b, FormFieldProps as c };

package/cjs/index.d.ts

@@ -8,6 +8,7 @@ export { PasswordInput } from './PasswordInput.js';
 export { SelectInput } from './SelectInput.js';
 export { DateInput } from './DateInput.js';
 export { DateInputPicker } from './DateInputPicker.js';
+export { FileInput } from './FileInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-CtGGU7zN.js';
+import './index-DupfYbgc.js';

package/cjs/index.js

@@ -8,4 +8,5 @@ var _PasswordInput = require('./PasswordInput'); _createStarExport(_PasswordInpu
 var _SelectInput = require('./SelectInput'); _createStarExport(_SelectInput);
 var _DateInput = require('./DateInput'); _createStarExport(_DateInput);
 var _DateInputPicker = require('./DateInputPicker'); _createStarExport(_DateInputPicker);
+var _FileInput = require('./FileInput'); _createStarExport(_FileInput);
 var _TextInput = require('./TextInput'); _createStarExport(_TextInput);

package/css/main.css

@@ -454,6 +454,98 @@ input[type=date].o3-form-text-input::-webkit-calendar-picker-indicator {
   padding-right: var(--o3-spacing-s);
 }
 
+/* src/css/components/file-input.css */
+.o3-form-file-input {
+  display: inline-flex;
+  align-items: center;
+}
+.o3-form-file-input__input-field {
+  color: var(--o3-color-use-case-muted-text);
+  font-family: var(--o3-type-body-base-font-family);
+  font-size: var(--o3-type-body-base-font-size);
+  font-weight: var(--o3-type-body-base-font-weight);
+  line-height: var(--o3-type-body-base-line-height);
+  padding-bottom: var(--o3-spacing-5xs);
+  display: none;
+}
+.o3-form-file-input__input-field::file-selector-button {
+  display: none;
+}
+.o3-form-file-input__input-field::-webkit-file-upload-button {
+  display: block;
+  width: 0;
+  height: 0;
+  margin-left: -100%;
+}
+.o3-form-file-input__input-field::-ms-browse {
+  display: none;
+}
+.o3-form-file-input__input-field:is(:focus-within, :focus) {
+  outline: none;
+  box-shadow: none;
+}
+.o3-form-file-input__label {
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--o3-spacing-3xs);
+  align-items: center;
+  height: 44px;
+  --o3-grid-columns-to-span-count: 4;
+  width: var(--o3-grid-columns-to-span-width);
+}
+.o3-form-file-input__label:focus-within {
+  box-shadow: var(--_o3-focus-outline);
+  outline: 0;
+}
+@supports selector(:focus-visible) {
+  .o3-form-file-input__label:focus-within {
+    box-shadow: var(--_o3-focus-rings);
+    outline: 0;
+  }
+}
+.o3-form-file-input__label-button {
+  flex-shrink: 0;
+}
+.o3-form-file-input__label-text {
+  color: var(--o3-color-use-case-muted-text);
+}
+.o3-form-file-input__label-text--file-selected {
+  color: var(--o3-color-use-case-body-text);
+}
+.o3-form-file-input__uploading {
+  display: flex;
+  align-items: center;
+  gap: var(--o3-spacing-5xs);
+}
+.o3-form-file-input__uploading::before {
+  content: "";
+  display: inline-block;
+  width: var(--o3-spacing-3xs);
+  height: var(--o3-spacing-3xs);
+  border-width: 2px;
+  border-radius: 50%;
+  animation: loading 1s infinite linear;
+  border-style: solid;
+  border-color: rgba(51, 48, 46, .25);
+  border-top-color: var(--o3-color-use-case-body-text);
+}
+.o3-form-field-input__destroy {
+  background: var(--o3-icon-trash) no-repeat center;
+  background-size: cover;
+  margin-left: var(--o3-spacing-4xs);
+  width: 21px;
+  height: 21px;
+  border: none;
+}
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
 /* src/css/components/select-input.css */
 .o3-form-select-input {
   border: var(--_o3-form-input-border);

package/esm/CheckBox.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { C as CheckBoxProps, F as FormFieldsetProps } from './index-CtGGU7zN.js';
+import { C as CheckBoxProps, F as FormFieldsetProps } from './index-DupfYbgc.js';
 
 declare const CheckBoxItem: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;
 declare const CheckBox: (props: CheckBoxProps) => react_jsx_runtime.JSX.Element;

package/esm/DateInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DateInputProps } from './index-CtGGU7zN.js';
+import { D as DateInputProps } from './index-DupfYbgc.js';
 
 declare const DateInput: ({ label, feedback, description, disabled, attributes, inputId, optional, }: DateInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/DateInputPicker.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { D as DateInputProps } from './index-CtGGU7zN.js';
+import { D as DateInputProps } from './index-DupfYbgc.js';
 
 declare const DateInputPicker: ({ label, feedback, description, disabled, attributes, inputId, optional, }: DateInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/Error-summary.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { E as ErrorSummaryProps } from './index-CtGGU7zN.js';
+import { E as ErrorSummaryProps } from './index-DupfYbgc.js';
 
 declare const ErrorSummary: ({ errors, errorMessage, }: ErrorSummaryProps) => react_jsx_runtime.JSX.Element;
 

package/esm/FileInput.d.ts

@@ -0,0 +1,6 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { a as FileInputProps } from './index-DupfYbgc.js';
+
+declare const FileInput: ({ label, feedback, description, disabled, attributes, inputId, optional, isUploading }: FileInputProps) => react_jsx_runtime.JSX.Element;
+
+export { FileInput };

package/esm/FileInput.js

@@ -0,0 +1,85 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { uidBuilder } from "@financial-times/o-utils";
+import { LabeledFormField } from "./fieldComponents/FormField";
+import { useState } from "react";
+const uniqueId = uidBuilder("o3-form-file-input");
+const FileInput = ({
+  label,
+  feedback,
+  description,
+  disabled,
+  attributes,
+  inputId,
+  optional,
+  isUploading
+}) => {
+  const id = inputId || uniqueId("_");
+  const [file, setFile] = useState(null);
+  const onUpload = (event) => {
+    setFile(event.target.files?.[0] ?? null);
+  };
+  const onReset = () => {
+    setFile(null);
+  };
+  const inputClasses = ["o3-form-file-input"];
+  if (feedback && feedback.type === "error") {
+    inputClasses.push("o3-form-text-file--error");
+  }
+  return /* @__PURE__ */ jsx(
+    LabeledFormField,
+    {
+      label,
+      feedback,
+      description,
+      inputId: id,
+      optional,
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: inputClasses.join(" "), children: [
+          /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "o3-form-file-input__label", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: "o3-form-file-input__label-button o3-button o3-button--primary o3-button-icon o3-button-icon--upload",
+                children: "File Upload"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-testid": "file-input-label",
+                className: "o3-form-file-input__label-text",
+                children: file?.name ? file?.name : "No file chosen"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...attributes,
+              id,
+              className: "o3-form-file-input__input-field",
+              disabled,
+              required: !optional,
+              onChange: onUpload,
+              "aria-required": !optional,
+              type: "file"
+            }
+          ),
+          file && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "o3-form-field-input__destroy",
+              "aria-label": "Delete file",
+              onClick: onReset
+            }
+          )
+        ] }),
+        isUploading && /* @__PURE__ */ jsx("span", { className: "o3-form-file-input__uploading", children: "Uploading" })
+      ] })
+    }
+  );
+};
+export {
+  FileInput
+};

package/esm/FileUploadController.d.ts

@@ -0,0 +1,11 @@
+declare class FileUploadController {
+    constructor(fileInput: HTMLInputElement);
+    private _updateStatus;
+    private _reset;
+    private _displayUpload;
+    private _removeUpload;
+    private static createUploadingElement;
+    private static createDestroyElement;
+}
+
+export { FileUploadController };

package/esm/FileUploadController.js

@@ -0,0 +1,73 @@
+class FileUploadController {
+  constructor(fileInput) {
+    this._updateStatus = (event) => {
+      const target = event.target;
+      if (!target) return;
+      const formField = target?.closest(".o3-form-field");
+      if (!formField) return;
+      const inputFileContainer = formField.querySelector(".o3-form-file-input");
+      if (!inputFileContainer) return;
+      const labelText = inputFileContainer.querySelector(".o3-form-file-input__label-text");
+      if (!labelText) return;
+      if (target && target.files && target.files.length > 0 && !formField.querySelector(".o3-form-field-input__destroy")) {
+        inputFileContainer.appendChild(FileUploadController.createDestroyElement(target));
+        labelText.classList.add("o3-form-field-input__label__text--file-selected");
+      } else {
+        labelText.classList.remove("o3-form-field-input__label__text--file-selected");
+        inputFileContainer.querySelector(".o3-form-field-input__destroy")?.remove();
+      }
+      labelText.textContent = target.files?.[0]?.name || "No file chosen";
+    };
+    this._reset = (event) => {
+      const target = event.target;
+      if (!target) return;
+      target.value = "";
+      target?.dispatchEvent(new Event("change"));
+    };
+    this._displayUpload = (event) => {
+      const target = event.target;
+      if (!target) return;
+      const formField = target.closest(".o3-form-field");
+      if (target && formField && !formField.querySelector(".o3-form-file-input__uploading")) {
+        formField.appendChild(FileUploadController.createUploadingElement());
+      }
+    };
+    this._removeUpload = (event) => {
+      const target = event.target;
+      if (!target) return;
+      const formField = target.closest(".o3-form-field");
+      if (!formField) return;
+      formField.querySelector(".o3-form-file-input__uploading")?.remove();
+    };
+    fileInput.addEventListener("change", this._updateStatus);
+    fileInput.addEventListener("o3Form.uploading.start", this._displayUpload);
+    fileInput.addEventListener("o3Form.uploading.complete", this._removeUpload);
+    fileInput.addEventListener("o3Form.reset", this._reset);
+    const labelElement = fileInput.closest(".o3-form-file-input__label");
+    if (!labelElement) return;
+    labelElement.addEventListener("keydown", (event) => {
+      if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        fileInput.click();
+      }
+    });
+  }
+  static createUploadingElement() {
+    const uploadingElement = document.createElement("span");
+    uploadingElement.classList.add("o3-form-file-input__uploading");
+    uploadingElement.innerText = "Uploading";
+    return uploadingElement;
+  }
+  static createDestroyElement(fileInput) {
+    const destroyElement = document.createElement("button");
+    destroyElement.classList.add("o3-form-field-input__destroy");
+    destroyElement.setAttribute("aria-label", "Delete file");
+    destroyElement.addEventListener("click", () => {
+      fileInput.dispatchEvent(new CustomEvent("o3Form.reset"));
+    });
+    return destroyElement;
+  }
+}
+export {
+  FileUploadController
+};

package/esm/PasswordInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { P as PasswordInputProps } from './index-CtGGU7zN.js';
+import { P as PasswordInputProps } from './index-DupfYbgc.js';
 
 declare const PasswordInput: ({ label, feedback, description, disabled, attributes, inputId, optional, forgotPasswordLink, }: PasswordInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RadioButtonProps, F as FormFieldsetProps } from './index-CtGGU7zN.js';
+import { R as RadioButtonProps, F as FormFieldsetProps } from './index-DupfYbgc.js';
 
 declare const RadioButtonItem: (props: RadioButtonProps) => react_jsx_runtime.JSX.Element;
 declare const RadioButtonGroup: (props: FormFieldsetProps) => react_jsx_runtime.JSX.Element;

package/esm/SelectInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { S as SelectInputProps } from './index-CtGGU7zN.js';
+import { S as SelectInputProps } from './index-DupfYbgc.js';
 
 declare const SelectInput: ({ label, feedback, description, disabled, attributes, inputId, optional, children, length, }: SelectInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/TextInput.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { T as TextInputProps } from './index-CtGGU7zN.js';
+import { T as TextInputProps } from './index-DupfYbgc.js';
 
 declare const TextInput: ({ label, feedback, description, disabled, length, attributes, inputId, optional, }: TextInputProps) => react_jsx_runtime.JSX.Element;
 

package/esm/fieldComponents/Feedback.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { a as FeedbackProps } from '../index-CtGGU7zN.mjs';
+import { b as FeedbackProps } from '../index-DupfYbgc.mjs';
 
 declare const Feedback: ({ message, type }: FeedbackProps) => react_jsx_runtime.JSX.Element;
 

package/esm/fieldComponents/FormField.d.mts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { b as FormFieldProps, F as FormFieldsetProps } from '../index-CtGGU7zN.mjs';
+import { c as FormFieldProps, F as FormFieldsetProps } from '../index-DupfYbgc.mjs';
 
 declare const LabeledFormField: ({ inputId, label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;
 declare const TitledFormField: ({ label, description, feedback, children, optional, }: FormFieldProps) => react_jsx_runtime.JSX.Element;

package/esm/{index-CtGGU7zN.d.ts → index-DupfYbgc.d.ts}

@@ -11,6 +11,11 @@ interface TextInputProps extends BaseInputProps {
     length?: 2 | 3 | 4 | 5;
     feedback?: FeedbackProps;
 }
+interface FileInputProps extends BaseInputProps {
+    isUploading?: boolean;
+    disabled?: boolean;
+    feedback?: FeedbackProps;
+}
 interface DateInputProps extends BaseInputProps {
     disabled?: boolean;
     feedback?: FeedbackProps;
@@ -68,4 +73,4 @@ type ErrorSummaryProps = {
     }[];
 };
 
-export type { CheckBoxProps as C, DateInputProps as D, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, SelectInputProps as S, TextInputProps as T, FeedbackProps as a, FormFieldProps as b };
+export type { CheckBoxProps as C, DateInputProps as D, ErrorSummaryProps as E, FormFieldsetProps as F, PasswordInputProps as P, RadioButtonProps as R, SelectInputProps as S, TextInputProps as T, FileInputProps as a, FeedbackProps as b, FormFieldProps as c };

package/esm/index.d.ts

@@ -8,6 +8,7 @@ export { PasswordInput } from './PasswordInput.js';
 export { SelectInput } from './SelectInput.js';
 export { DateInput } from './DateInput.js';
 export { DateInputPicker } from './DateInputPicker.js';
+export { FileInput } from './FileInput.js';
 export { TextInput } from './TextInput.js';
 import 'react/jsx-runtime';
-import './index-CtGGU7zN.js';
+import './index-DupfYbgc.js';

package/esm/index.js

@@ -8,4 +8,5 @@ export * from "./PasswordInput";
 export * from "./SelectInput";
 export * from "./DateInput";
 export * from "./DateInputPicker";
+export * from "./FileInput";
 export * from "./TextInput";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@financial-times/o3-form",
-	"version": "0.9.0",
+	"version": "0.11.0",
 	"description": "Provides a viewport-aware tooltip for annotating or or highlighting other aspects of a product's UI",
 	"keywords": [
 		"form",