carbon-react 124.2.2 → 124.3.1

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

@@ -0,0 +1,361 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FileInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../../style/utils");
+var _inputBehaviour = require("../../__internal__/input-behaviour");
+var _formField = _interopRequireDefault(require("../../__internal__/form-field"));
+var _useUniqueId = _interopRequireDefault(require("../../hooks/__internal__/useUniqueId"));
+var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
+var _fileInput = require("./file-input.style");
+var _textbox = require("../textbox/textbox.style");
+var _buttonMinor = _interopRequireDefault(require("../button-minor"));
+var _typography = _interopRequireDefault(require("../typography"));
+var _fileUploadStatus = _interopRequireDefault(require("./__internal__/file-upload-status"));
+var _box = _interopRequireDefault(require("../box"));
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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); }
+const FileInput = exports.FileInput = /*#__PURE__*/_react.default.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 = (0, _useLocale.default)();
+  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] = (0, _useUniqueId.default)(id, name);
+  const [isDraggedOver, setIsDraggedOver] = (0, _react.useState)(false);
+  const [isDraggingFile, setIsDraggingFile] = (0, _react.useState)(false);
+  const internalInputRef = (0, _react.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);
+  };
+  (0, _react.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
+  } = (0, _useInputAccessibility.default)({
+    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.default.createElement(_react.default.Fragment, null, inputHint && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, inputHint), /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "relative"
+  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    error: error,
+    validationId: validationId
+  }), error && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+    warning: false
+  }), /*#__PURE__*/_react.default.createElement(_fileInput.StyledHiddenFileInput, _extends({}, required && {
+    required
+  }, {
+    accept: accept,
+    "aria-invalid": !!error,
+    id: uniqueId,
+    ref: internalCallbackRef,
+    name: uniqueName,
+    onChange: onInputChange,
+    type: "file"
+  }, rest)), /*#__PURE__*/_react.default.createElement(_fileInput.StyledFileInputPresentation, _extends({
+    isDraggedOver: isDraggedOver,
+    isDraggingFile: isDraggingFile,
+    error: error,
+    onDragLeave: onDragLeave,
+    onDragOver: onDragOver,
+    onDrop: onDrop
+  }, sizeProps), /*#__PURE__*/_react.default.createElement(_buttonMinor.default, {
+    buttonType: "primary",
+    onClick: onSelectFileClick
+  }, textOnButton), /*#__PURE__*/_react.default.createElement(_typography.default, {
+    m: 0
+  }, mainText))));
+  return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _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
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), filesUploaded.length === 0 ? input : filesUploaded.map(props => /*#__PURE__*/_react.default.createElement(_fileInput.StyledFileInputPresentation, _extends({
+    hasUploadStatus: true
+  }, sizeProps, {
+    key: props.filename
+  }), /*#__PURE__*/_react.default.createElement(_fileUploadStatus.default, props)))));
+});
+FileInput.propTypes = {
+  "accept": _propTypes.default.string,
+  "buttonText": _propTypes.default.string,
+  "data-component": _propTypes.default.string,
+  "data-element": _propTypes.default.string,
+  "data-role": _propTypes.default.string,
+  "dragAndDropText": _propTypes.default.string,
+  "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "id": _propTypes.default.string,
+  "inputHint": _propTypes.default.node,
+  "isVertical": _propTypes.default.bool,
+  "label": _propTypes.default.string,
+  "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "margin": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginBottom": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginLeft": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginRight": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginTop": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginX": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "marginY": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "maxHeight": _propTypes.default.string,
+  "maxWidth": _propTypes.default.string,
+  "mb": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "minHeight": _propTypes.default.string,
+  "minWidth": _propTypes.default.string,
+  "ml": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mr": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mt": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "mx": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "my": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__@toStringTag": _propTypes.default.string.isRequired,
+    "description": _propTypes.default.string,
+    "toString": _propTypes.default.func.isRequired,
+    "valueOf": _propTypes.default.func.isRequired
+  }), _propTypes.default.string]),
+  "name": _propTypes.default.string,
+  "onChange": _propTypes.default.func.isRequired,
+  "required": _propTypes.default.bool,
+  "uploadStatus": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.shape({
+    "filename": _propTypes.default.string.isRequired,
+    "iconType": _propTypes.default.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.default.string,
+    "onAction": _propTypes.default.func.isRequired,
+    "progress": _propTypes.default.number,
+    "status": _propTypes.default.oneOf(["uploading"]).isRequired
+  })])), _propTypes.default.object, _propTypes.default.shape({
+    "filename": _propTypes.default.string.isRequired,
+    "iconType": _propTypes.default.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.default.string,
+    "onAction": _propTypes.default.func.isRequired,
+    "progress": _propTypes.default.number,
+    "status": _propTypes.default.oneOf(["uploading"]).isRequired
+  })])
+};
+FileInput.displayName = "FileInput";
+var _default = exports.default = FileInput;

package/lib/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/lib/components/file-input/file-input.style.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledHiddenFileInput = exports.StyledFileInputPresentation = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _typography = _interopRequireDefault(require("../typography/typography.style"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledHiddenFileInput = exports.StyledHiddenFileInput = _styledComponents.default.input`
+  display: none;
+`;
+const StyledFileInputPresentation = exports.StyledFileInputPresentation = _styledComponents.default.div`
+  ${({
+  hasUploadStatus,
+  minWidth,
+  minHeight,
+  maxWidth,
+  maxHeight
+}) => (0, _styledComponents.css)`
+    min-width: ${minWidth};
+    min-height: ${minHeight};
+    max-width: ${maxWidth};
+    ${!hasUploadStatus && (0, _styledComponents.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 && (0, _styledComponents.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});
+        ${_typography.default} {
+          color: var(--colorsUtilityYin055);
+        }
+      `;
+}}
+`;

package/lib/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/lib/components/file-input/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _fileInput.default;
+  }
+});
+var _fileInput = _interopRequireDefault(require("./file-input.component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/file-input/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/components/file-input/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

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

@@ -9,6 +9,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _dom = require("@floating-ui/dom");
 var _reactVirtual = require("@tanstack/react-virtual");
 var _findLastIndex = _interopRequireDefault(require("lodash/findLastIndex"));
+var _usePrevious = _interopRequireDefault(require("../../../hooks/__internal__/usePrevious"));
 var _useScrollBlock = _interopRequireDefault(require("../../../hooks/__internal__/useScrollBlock"));
 var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
 var _selectList = require("./select-list.style");
@@ -69,7 +70,26 @@ const SelectList = /*#__PURE__*/_react.default.forwardRef(({
     allowScroll
   } = (0, _useScrollBlock.default)();
   const actionButtonHeight = (0, _react.useRef)(0);
+  const wasOpen = (0, _usePrevious.default)(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.)
+  (0, _react.useEffect)(() => {
+    if (isOpen && !wasOpen) {
+      listContainerRef.current?.scrollTo(0, 0);
+    }
+  });
   const overscan = enableVirtualScroll ? virtualScrollOverscan : _react.default.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 = (0, _reactVirtual.defaultRangeExtractor)(range);
+    if (currentOptionsListIndex !== -1 && !toRender.includes(currentOptionsListIndex)) {
+      toRender.push(currentOptionsListIndex);
+    }
+    return toRender;
+  };
   const virtualizer = (0, _reactVirtual.useVirtualizer)({
     count: _react.default.Children.count(children),
     getScrollElement: () => listContainerRef.current,
@@ -77,9 +97,21 @@ const SelectList = /*#__PURE__*/_react.default.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();
   (0, _react.useEffect)(() => {
     if (isOpen) {
@@ -128,11 +160,13 @@ const SelectList = /*#__PURE__*/_react.default.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.default.isValidElement(child)) {
       return child;

package/lib/locales/en-gb.js

@@ -73,6 +73,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/lib/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/lib/locales/pl-pl.js

@@ -109,6 +109,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "124.2.2",
+  "version": "124.3.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -156,6 +156,7 @@
     "jest-environment-jsdom": "^27.5.1",
     "jest-fetch-mock": "^3.0.3",
     "jest-styled-components": "^6.3.4",
+    "jsdom-testing-mocks": "^1.11.0",
     "lint-staged": "^11.2.6",
     "mockdate": "^2.0.5",
     "nock": "^13.3.8",
@@ -182,7 +183,7 @@
     "@floating-ui/react-dom": "~1.3.0",
     "@octokit/rest": "^18.12.0",
     "@styled-system/prop-types": "^5.1.5",
-    "@tanstack/react-virtual": "3.0.0-beta.54",
+    "@tanstack/react-virtual": "^3.0.0-beta.68",
     "@types/styled-system": "^5.1.22",
     "chalk": "^4.1.2",
     "ci-info": "^3.8.0",