carbon-react 124.2.2 → 124.3.1

package/esm/components/file-input/file-input.component.js

@@ -0,0 +1,353 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React, { useRef, useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+import { InputBehaviour } from "../../__internal__/input-behaviour";
+import FormField from "../../__internal__/form-field";
+import useUniqueId from "../../hooks/__internal__/useUniqueId";
+import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
+import ValidationMessage from "../../__internal__/validation-message";
+import { StyledHiddenFileInput, StyledFileInputPresentation } from "./file-input.style";
+import { StyledHintText, ErrorBorder } from "../textbox/textbox.style";
+import ButtonMinor from "../button-minor";
+import Typography from "../typography";
+import FileUploadStatus from "./__internal__/file-upload-status";
+import Box from "../box";
+import useLocale from "../../hooks/__internal__/useLocale";
+const FileInput = /*#__PURE__*/React.forwardRef(({
+  accept,
+  buttonText,
+  "data-element": dataElement,
+  "data-role": dataRole,
+  dragAndDropText,
+  error,
+  label,
+  id,
+  inputHint,
+  isVertical,
+  maxHeight,
+  maxWidth,
+  minHeight = "40px",
+  minWidth = "256px",
+  name,
+  onChange,
+  required,
+  uploadStatus = [],
+  ...rest
+}, ref) => {
+  const locale = useLocale();
+  const textOnButton = buttonText || locale.fileInput.selectFile();
+  const mainText = dragAndDropText || locale.fileInput.dragAndDrop();
+  const sizeProps = {
+    maxHeight: maxHeight || (isVertical ? undefined : minHeight),
+    maxWidth: maxWidth || minWidth,
+    minHeight,
+    minWidth
+  };
+  const [uniqueId, uniqueName] = useUniqueId(id, name);
+  const [isDraggedOver, setIsDraggedOver] = useState(false);
+  const [isDraggingFile, setIsDraggingFile] = useState(false);
+  const internalInputRef = useRef(null);
+  const internalCallbackRef = fileInput => {
+    internalInputRef.current = fileInput;
+    if (typeof ref === "function") {
+      ref(fileInput);
+    } else if (ref) {
+      ref.current = fileInput;
+    }
+  };
+  const startDrag = e => {
+    e.preventDefault();
+    if (e.dataTransfer?.types.includes("Files")) {
+      setIsDraggingFile(true);
+    }
+  };
+  const stopDrag = e => {
+    e.preventDefault();
+    setIsDraggingFile(false);
+  };
+  useEffect(() => {
+    document.addEventListener("dragover", startDrag);
+    document.addEventListener("drop", stopDrag);
+    document.addEventListener("dragleave", stopDrag);
+    return () => {
+      document.removeEventListener("dragover", startDrag);
+      document.removeEventListener("drop", stopDrag);
+      document.removeEventListener("dragleave", stopDrag);
+    };
+  }, []);
+  const onSelectFileClick = () => {
+    internalInputRef.current?.click();
+  };
+  const onFileAdded = files => {
+    onChange?.(files);
+  };
+  const onDragOver = e => {
+    e.preventDefault();
+    if (e.dataTransfer?.types.includes("Files")) {
+      setIsDraggedOver(true);
+    }
+  };
+  const onDragLeave = e => {
+    e.preventDefault();
+    e.stopPropagation(); // stop event triggering the document listener that resets the styles
+    setIsDraggedOver(false);
+  };
+  const onDrop = e => {
+    e.preventDefault();
+    setIsDraggedOver(false);
+    onFileAdded(e.dataTransfer.files);
+  };
+  const onInputChange = e => {
+    onFileAdded(e.target.files);
+  };
+  const {
+    labelId,
+    validationId
+  } = useInputAccessibility({
+    id: uniqueId,
+    validationRedesignOptIn: true,
+    error,
+    label
+  });
+
+  // allow for single input that a single set of status props is provided
+  const filesUploaded = Array.isArray(uploadStatus) ? uploadStatus : [uploadStatus];
+  const input = /*#__PURE__*/React.createElement(React.Fragment, null, inputHint && /*#__PURE__*/React.createElement(StyledHintText, null, inputHint), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    validationId: validationId
+  }), error && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: false
+  }), /*#__PURE__*/React.createElement(StyledHiddenFileInput, _extends({}, required && {
+    required
+  }, {
+    accept: accept,
+    "aria-invalid": !!error,
+    id: uniqueId,
+    ref: internalCallbackRef,
+    name: uniqueName,
+    onChange: onInputChange,
+    type: "file"
+  }, rest)), /*#__PURE__*/React.createElement(StyledFileInputPresentation, _extends({
+    isDraggedOver: isDraggedOver,
+    isDraggingFile: isDraggingFile,
+    error: error,
+    onDragLeave: onDragLeave,
+    onDragOver: onDragOver,
+    onDrop: onDrop
+  }, sizeProps), /*#__PURE__*/React.createElement(ButtonMinor, {
+    buttonType: "primary",
+    onClick: onSelectFileClick
+  }, textOnButton), /*#__PURE__*/React.createElement(Typography, {
+    m: 0
+  }, mainText))));
+  return /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
+    error: error,
+    label: label,
+    labelId: labelId,
+    id: uniqueId,
+    isRequired: required,
+    "data-component": "file-input",
+    "data-role": dataRole,
+    "data-element": dataElement,
+    validationRedesignOptIn: true // do not support old-style validation for File Input component
+  }, filterStyledSystemMarginProps(rest)), filesUploaded.length === 0 ? input : filesUploaded.map(props => /*#__PURE__*/React.createElement(StyledFileInputPresentation, _extends({
+    hasUploadStatus: true
+  }, sizeProps, {
+    key: props.filename
+  }), /*#__PURE__*/React.createElement(FileUploadStatus, props)))));
+});
+FileInput.propTypes = {
+  "accept": PropTypes.string,
+  "buttonText": PropTypes.string,
+  "data-component": PropTypes.string,
+  "data-element": PropTypes.string,
+  "data-role": PropTypes.string,
+  "dragAndDropText": PropTypes.string,
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "id": PropTypes.string,
+  "inputHint": PropTypes.node,
+  "isVertical": PropTypes.bool,
+  "label": PropTypes.string,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "maxHeight": PropTypes.string,
+  "maxWidth": PropTypes.string,
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "minHeight": PropTypes.string,
+  "minWidth": PropTypes.string,
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "name": PropTypes.string,
+  "onChange": PropTypes.func.isRequired,
+  "required": PropTypes.bool,
+  "uploadStatus": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.object, PropTypes.shape({
+    "filename": PropTypes.string.isRequired,
+    "iconType": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
+    "message": PropTypes.string,
+    "onAction": PropTypes.func.isRequired,
+    "progress": PropTypes.number,
+    "status": PropTypes.oneOf(["uploading"]).isRequired
+  })])), PropTypes.object, PropTypes.shape({
+    "filename": PropTypes.string.isRequired,
+    "iconType": PropTypes.oneOf(["accessibility_web", "add", "admin", "alert_on", "alert", "analysis", "app_facebook", "app_instagram", "app_tiktok", "app_twitter", "app_youtube", "apps", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bill_paid", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "box_arrow_right", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_pay_date", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "card_wallet", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "check_all", "check_none", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "cloud_co2", "coins", "collaborate", "computer_clock", "connect_off", "connect", "construction", "contact_card", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "heart_pulse", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "intranet", "italic", "job_seeked", "key", "laptop", "leaf", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "like_no", "like", "link_cloud", "link_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "microphone", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "protect", "question_hollow", "question_mark", "question", "recruiting", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "send", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "support_online", "sync", "tag", "talk", "target_man", "target", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "volunteering", "warning", "website", "welfare"]),
+    "message": PropTypes.string,
+    "onAction": PropTypes.func.isRequired,
+    "progress": PropTypes.number,
+    "status": PropTypes.oneOf(["uploading"]).isRequired
+  })])
+};
+export { FileInput };
+FileInput.displayName = "FileInput";
+export default FileInput;

package/esm/components/file-input/file-input.style.d.ts

@@ -0,0 +1,14 @@
+import type { InputProps } from "../../__internal__/input";
+import type { ValidationProps } from "../../__internal__/validations";
+export declare const StyledHiddenFileInput: import("styled-components").StyledComponent<"input", any, InputProps, never>;
+interface StyledFileInputPresentationProps extends Pick<ValidationProps, "error"> {
+    isDraggedOver?: boolean;
+    isDraggingFile?: boolean;
+    hasUploadStatus?: boolean;
+    maxHeight?: string;
+    maxWidth?: string;
+    minHeight?: string;
+    minWidth?: string;
+}
+export declare const StyledFileInputPresentation: import("styled-components").StyledComponent<"div", any, StyledFileInputPresentationProps, never>;
+export {};

package/esm/components/file-input/file-input.style.js

@@ -0,0 +1,58 @@
+import styled, { css } from "styled-components";
+import StyledTypography from "../typography/typography.style";
+export const StyledHiddenFileInput = styled.input`
+  display: none;
+`;
+export const StyledFileInputPresentation = styled.div`
+  ${({
+  hasUploadStatus,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight
+}) => css`
+    min-width: ${minWidth};
+    min-height: ${minHeight};
+    max-width: ${maxWidth};
+    ${!hasUploadStatus && css`
+      padding: var(--spacing150);
+      max-height: ${maxHeight};
+    `}
+  `}
+
+  ${({
+  hasUploadStatus,
+  isDraggedOver,
+  isDraggingFile,
+  error
+}) => {
+  const borderWidthToken = error || isDraggingFile ? "borderWidth200" : "borderWidth100";
+  let borderColorToken = "colorsUtilityMajor300";
+  let backgroundColorToken = "colorsUtilityYang100";
+  if (isDraggedOver) {
+    borderColorToken = "colorsUtilityMajor400";
+    backgroundColorToken = "colorsUtilityMajor100";
+  } else if (isDraggingFile) {
+    borderColorToken = "colorsUtilityMajor400";
+  }
+  if (error) {
+    borderColorToken = `colorsSemanticNegative${isDraggingFile ? 600 : 500}`;
+  }
+  return !hasUploadStatus && css`
+        display: flex;
+        flex-direction: column;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-content: center;
+        align-items: center;
+        text-align: center;
+        gap: var(--spacing150);
+        border-radius: var(--borderRadius050);
+        border: var(--${borderWidthToken}) dashed var(--${borderColorToken});
+        background: var(--${backgroundColorToken});
+        ${StyledTypography} {
+          color: var(--colorsUtilityYin055);
+        }
+      `;
+}}
+`;

package/esm/components/file-input/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from "./file-input.component";
+export type { FileInputProps } from "./file-input.component";
+export type { FileUploadStatusProps } from "./__internal__/file-upload-status";

package/esm/components/file-input/index.js

@@ -0,0 +1 @@
+export { default } from "./file-input.component";

package/esm/components/select/select-list/select-list.component.js

@@ -2,8 +2,9 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useEffect, useState, useCallback, useLayoutEffect, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
 import { flip, offset, size } from "@floating-ui/dom";
-import { useVirtualizer } from "@tanstack/react-virtual";
+import { useVirtualizer, defaultRangeExtractor } from "@tanstack/react-virtual";
 import findLastIndex from "lodash/findLastIndex";
+import usePrevious from "../../../hooks/__internal__/usePrevious";
 import useScrollBlock from "../../../hooks/__internal__/useScrollBlock";
 import useModalManager from "../../../hooks/__internal__/useModalManager";
 import { StyledSelectList, StyledSelectLoaderContainer, StyledSelectListTable, StyledSelectListTableHeader, StyledSelectListTableBody } from "./select-list.style";
@@ -60,7 +61,26 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     allowScroll
   } = useScrollBlock();
   const actionButtonHeight = useRef(0);
+  const wasOpen = usePrevious(isOpen);
+
+  // ensure scroll-position goes back to the top whenever the list is (re)-opened. (On Safari, without this it remains at the bottom if it had been scrolled
+  // to the bottom before closing.)
+  useEffect(() => {
+    if (isOpen && !wasOpen) {
+      listContainerRef.current?.scrollTo(0, 0);
+    }
+  });
   const overscan = enableVirtualScroll ? virtualScrollOverscan : React.Children.count(children);
+
+  // need to use a custom rangeExtractor that ensure the currently-selected option, if any, always appears as an option returned from the virtualiser.
+  // This ensures that the aria-activedescendant value is always valid even when the currently-selected item is out of the visible range.
+  const rangeExtractor = range => {
+    const toRender = defaultRangeExtractor(range);
+    if (currentOptionsListIndex !== -1 && !toRender.includes(currentOptionsListIndex)) {
+      toRender.push(currentOptionsListIndex);
+    }
+    return toRender;
+  };
   const virtualizer = useVirtualizer({
     count: React.Children.count(children),
     getScrollElement: () => listContainerRef.current,
@@ -68,9 +88,21 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
     // value doesn't really seem to matter since we're dynamically measuring, but 40px is the height of a single-line option
     overscan,
     paddingStart: multiColumn ? TABLE_HEADER_HEIGHT : 0,
-    scrollPaddingEnd: actionButtonHeight.current
+    scrollPaddingEnd: actionButtonHeight.current,
+    rangeExtractor
   });
   const items = virtualizer.getVirtualItems();
+
+  // getVirtualItems returns an empty array of items if the select list is currently closed - which is correct visually but
+  // we need to ensure that any currently-selected option is still in the DOM to avoid any accessibility issues.
+  // The isOpen prop will ensure that no options are visible regardless of what is in the items array.
+  if (items.length === 0 && currentOptionsListIndex !== -1) {
+    // only index property is required with the item not visible so the following type assertion, even though incorrect,
+    // should be OK
+    items.push({
+      index: currentOptionsListIndex
+    });
+  }
   const listHeight = virtualizer.getTotalSize();
   useEffect(() => {
     if (isOpen) {
@@ -119,11 +151,13 @@ const SelectList = /*#__PURE__*/React.forwardRef(({
       measureElement(element);
     }
   };
-  const renderedChildren = items.map(item => {
-    const {
-      index,
-      start
-    } = item;
+
+  // the rangeExtractor above can cause an undefined value to be appended to the return items.
+  // Easiest way to stop that crashing is just to filter it out.
+  const renderedChildren = items.filter(item => item !== undefined).map(({
+    index,
+    start
+  }) => {
     const child = childrenList[index];
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return child;

package/esm/locales/en-gb.js

@@ -67,6 +67,16 @@ const enGB = {
       }
     }
   },
+  fileInput: {
+    dragAndDrop: () => "or drag and drop your file",
+    selectFile: () => "Select file",
+    fileUploadStatus: () => "File upload status",
+    actions: {
+      cancel: () => "Cancel upload",
+      clear: () => "Clear",
+      delete: () => "Delete file"
+    }
+  },
   heading: {
     backLinkAriaLabel: () => "Back"
   },

package/esm/locales/locale.d.ts

@@ -50,6 +50,16 @@ interface Locale {
             formSummary: (errors: number, warnings: number, type: string) => [string, string] | null;
         };
     };
+    fileInput: {
+        dragAndDrop: () => string;
+        selectFile: () => string;
+        fileUploadStatus: () => string;
+        actions: {
+            cancel: () => string;
+            clear: () => string;
+            delete: () => string;
+        };
+    };
     heading: {
         backLinkAriaLabel: () => string;
     };

package/esm/locales/pl-pl.js

@@ -102,6 +102,16 @@ const plPL = {
       }
     }
   },
+  fileInput: {
+    dragAndDrop: () => "lub przeciągnij i upuść plik",
+    selectFile: () => "Wybierz pliki",
+    fileUploadStatus: () => "Status przesyłania plików",
+    actions: {
+      cancel: () => "Anuluj przesyłanie",
+      clear: () => "Wyczyść",
+      delete: () => "Usuń plik"
+    }
+  },
   heading: {
     backLinkAriaLabel: () => "Wstecz"
   },

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.d.ts

@@ -1,5 +1,5 @@
 import { ReactWrapper, ShallowWrapper } from "enzyme";
 declare const elementsTagTest: (wrapper: ReactWrapper | ShallowWrapper, elements: string[]) => void;
 declare const rootTagTest: (rootNode: ReactWrapper | ShallowWrapper, comp: string, elem?: string, role?: string) => void;
-declare const rootTagTestRtl: (element: HTMLElement, comp: string, elem?: string, role?: string) => void;
+declare const rootTagTestRtl: (rootNode: HTMLElement, comp: string, elem?: string, role?: string) => void;
 export { elementsTagTest, rootTagTest, rootTagTestRtl };

package/lib/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -20,9 +20,11 @@ const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-role")).toEqual(role);
 };
 exports.rootTagTest = rootTagTest;
-const rootTagTestRtl = (element, comp, elem, role) => {
-  expect(element.getAttribute("data-component")).toBe(comp);
-  expect(element.getAttribute("data-element")).toBe(elem);
-  expect(element.getAttribute("data-role")).toBe(role);
+const rootTagTestRtl = (rootNode, comp, elem, role) => {
+  expect(rootNode).toHaveAttribute("data-component", comp);
+  expect(rootNode).toHaveAttribute("data-element", elem);
+  expect(rootNode).toHaveAttribute("data-role", role);
 };
+
+// eslint-disable-next-line jest/no-export
 exports.rootTagTestRtl = rootTagTestRtl;

package/lib/__spec_helper__/index.js

@@ -3,7 +3,9 @@
 var _jestFetchMock = require("jest-fetch-mock");
 var _mockMatchMedia = require("./mock-match-media");
 var _mockResizeObserver = _interopRequireDefault(require("./mock-resize-observer"));
+var _mockElementScrollto = _interopRequireDefault(require("./mock-element-scrollto"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 (0, _jestFetchMock.enableFetchMocks)();
 (0, _mockResizeObserver.default)();
-(0, _mockMatchMedia.setupMatchMediaMock)();
+(0, _mockMatchMedia.setupMatchMediaMock)();
+(0, _mockElementScrollto.default)();

package/lib/__spec_helper__/mock-element-scrollto.d.ts

@@ -0,0 +1,2 @@
+declare const setupScrollToMock: () => void;
+export default setupScrollToMock;

package/lib/__spec_helper__/mock-element-scrollto.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const setupScrollToMock = () => {
+  // need to mock the `scrollTo` method, which is undefined in JSDOM. As we're not actually testing this behaviour, just make it
+  // do nothing.
+  HTMLElement.prototype.scrollTo = () => {};
+};
+var _default = exports.default = setupScrollToMock;

package/lib/__spec_helper__/select-test-utils.d.ts

@@ -0,0 +1,3 @@
+import type { ReactWrapper } from "enzyme";
+export declare function simulateSelectTextboxEvent(container: ReactWrapper, eventType: string, ...eventArgs: any[]): void;
+export declare function simulateDropdownEvent(container: ReactWrapper, eventType: string): void;