carbon-react 124.2.2 → 124.3.0

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/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/components/file-input/__internal__/file-upload-status/file-upload-status.component.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+import { LinkProps } from "../../../link";
+import { IconType } from "../../../icon";
+interface StatusUploadingProps {
+    /** the status of the upload */
+    status: "uploading";
+    /** a number from 0-100 giving the current upload progress as a percentage. Only used for the `uploading` status.
+     * If the progress prop is not specified in the `uploading` status, a loading animation will be shown instead
+     * (or text equivalent for users with a reduced-motion operating system preference).
+     */
+    progress?: number;
+}
+interface StatusDoneProps extends LinkProps {
+    /** the status of the upload */
+    status: "completed" | "previously";
+    /** the URL opened by the file link. Must be provided for only the `completed` and `previously` statuses. */
+    href: string;
+}
+interface StatusErrorProps {
+    /** the status of the upload */
+    status: "error";
+}
+interface MandatoryStatusProps {
+    /** the name of the file */
+    filename: string;
+    /** a function to be executed when the user clicks the appropriate action button (Clear/Delete File/Cancel Upload)  */
+    onAction: () => void;
+    /** The status message. Used to display the current upload progress, including error messages where appropriate. Not used for the `previously` status. */
+    message?: string;
+    /** The icon to use for the file during or after upload */
+    iconType?: IconType;
+}
+export declare type FileUploadStatusProps = MandatoryStatusProps & (StatusUploadingProps | StatusErrorProps | StatusDoneProps);
+export declare const FileUploadStatus: ({ status, filename, message, onAction, iconType, ...statusProps }: FileUploadStatusProps) => React.JSX.Element;
+export default FileUploadStatus;

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.FileUploadStatus = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _link = _interopRequireDefault(require("../../../link"));
+var _buttonMinor = _interopRequireDefault(require("../../../button-minor"));
+var _typography = _interopRequireDefault(require("../../../typography/typography.style"));
+var _progressTracker = _interopRequireDefault(require("../../../progress-tracker"));
+var _loaderBar = _interopRequireDefault(require("../../../loader-bar"));
+var _icon = _interopRequireDefault(require("../../../icon"));
+var _fileUploadStatus = require("./file-upload-status.style");
+var _useLocale = _interopRequireDefault(require("../../../../hooks/__internal__/useLocale"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const FileUploadStatus = ({
+  status,
+  filename,
+  message,
+  onAction,
+  iconType = "file_generic",
+  ...statusProps
+}) => {
+  const locale = (0, _useLocale.default)();
+  const statusMessage = message || locale.fileInput.fileUploadStatus();
+  let buttonText;
+  let linkProps;
+  let progressBar = null;
+  switch (status) {
+    case "uploading":
+      buttonText = locale.fileInput.actions.cancel();
+      progressBar = statusProps.progress === undefined ? /*#__PURE__*/_react.default.createElement(_loaderBar.default, {
+        size: "small"
+      }) : /*#__PURE__*/_react.default.createElement(_progressTracker.default, {
+        size: "small",
+        progress: statusProps.progress,
+        length: "100%"
+      });
+      break;
+    case "previously":
+    case "completed":
+      buttonText = locale.fileInput.actions.delete();
+      linkProps = {
+        ...statusProps,
+        icon: iconType
+      };
+      break;
+    case "error":
+      buttonText = locale.fileInput.actions.clear();
+      break;
+    // istanbul ignore next
+    default:
+      // no other cases if consumers are using TS, but ESLint still insists on it
+      break;
+  }
+  const actionButton = /*#__PURE__*/_react.default.createElement(_buttonMinor.default, {
+    onClick: onAction,
+    buttonType: "tertiary"
+  }, buttonText);
+  const fileLink = linkProps ? /*#__PURE__*/_react.default.createElement(_link.default, linkProps, filename) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    type: iconType
+  }), /*#__PURE__*/_react.default.createElement("span", null, filename));
+  const mainRow = status !== "previously" ? /*#__PURE__*/_react.default.createElement(_fileUploadStatus.StyledFileUploadStatusRow, null, /*#__PURE__*/_react.default.createElement(_typography.default, {
+    as: "p",
+    mb: 0,
+    "aria-live": "polite"
+  }, statusMessage), actionButton) : /*#__PURE__*/_react.default.createElement(_fileUploadStatus.StyledFileUploadStatusRow, {
+    onlyRow: true
+  }, /*#__PURE__*/_react.default.createElement(_fileUploadStatus.StyledFileLinkContainer, null, fileLink), actionButton);
+  const secondRow = status !== "previously" ? /*#__PURE__*/_react.default.createElement(_fileUploadStatus.StyledFileUploadStatusRow, {
+    upperPadding: true,
+    lowerPadding: true
+  }, /*#__PURE__*/_react.default.createElement(_fileUploadStatus.StyledFileLinkContainer, null, fileLink)) : null;
+  return /*#__PURE__*/_react.default.createElement(_fileUploadStatus.StyledFileUploadStatus, {
+    hasError: status === "error"
+  }, mainRow, secondRow, progressBar);
+};
+exports.FileUploadStatus = FileUploadStatus;
+var _default = exports.default = FileUploadStatus;

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.style.d.ts

@@ -0,0 +1,12 @@
+export declare const StyledFileLinkContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface StyledFileUploadStatusRowProps {
+    upperPadding?: boolean;
+    lowerPadding?: boolean;
+    onlyRow?: boolean;
+}
+export declare const StyledFileUploadStatusRow: import("styled-components").StyledComponent<"div", any, StyledFileUploadStatusRowProps, never>;
+interface StyledFileUploadStatusProps {
+    hasError: boolean;
+}
+export declare const StyledFileUploadStatus: import("styled-components").StyledComponent<"div", any, StyledFileUploadStatusProps, never>;
+export {};

package/lib/components/file-input/__internal__/file-upload-status/file-upload-status.style.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledFileUploadStatusRow = exports.StyledFileUploadStatus = exports.StyledFileLinkContainer = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _typography = _interopRequireDefault(require("../../../typography/typography.style"));
+var _icon = _interopRequireDefault(require("../../../icon/icon.style"));
+var _progressTracker = require("../../../progress-tracker/progress-tracker.style");
+var _loaderBar = _interopRequireWildcard(require("../../../loader-bar/loader-bar.style"));
+var _link = require("../../../link/link.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 StyledFileLinkContainer = exports.StyledFileLinkContainer = _styledComponents.default.div`
+  color: var(--colorsActionMajorYin090);
+  display: flex;
+  align-items: center;
+  overflow-x: clip;
+  overflow-y: visible;
+  padding-right: var(--spacing150);
+
+  ${_link.StyledLink} {
+    overflow: hidden;
+  }
+
+  ${_link.StyledLink} a {
+    overflow: hidden;
+    display: flex;
+    text-decoration: none;
+  }
+
+  ${_link.StyledContent} {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: underline;
+  }
+
+  &&& ${_icon.default} {
+    display: inline-flex;
+    justify-content: center;
+    align-items: flex-start;
+    width: 24px;
+    height: 24px;
+
+    // only apply these styles when the icon is not part of a Link component
+    :not(${_link.StyledLink} ${_icon.default}) {
+      color: var(--colorsUtilityYin065);
+      padding-right: var(--spacing100);
+    }
+  }
+`;
+const StyledFileUploadStatusRow = exports.StyledFileUploadStatusRow = _styledComponents.default.div`
+  display: flex;
+  justify-content: space-between;
+  ${({
+  onlyRow
+}) => onlyRow ? "" : "align-items: baseline;"}
+  padding-left: var(--spacing150);
+  ${({
+  upperPadding
+}) => upperPadding ? "padding-top: var(--spacing050);" : ""}
+  ${({
+  lowerPadding
+}) => lowerPadding ? "padding-bottom: var(--spacing125);" : ""}
+
+  ${_typography.default} {
+    color: var(--colorsUtilityYin055);
+  }
+`;
+const StyledFileUploadStatus = exports.StyledFileUploadStatus = _styledComponents.default.div`
+  background-color: var(--colorsUtilityYang100);
+  ${({
+  hasError
+}) => {
+  const borderWidthToken = hasError ? "borderWidth200" : "borderWidth100";
+  const colorToken = hasError ? "colorsSemanticNegative500" : "colorsUtilityMajor300";
+  return (0, _styledComponents.css)`
+      border: var(--${borderWidthToken}) solid var(--${colorToken});
+      ${hasError && `&& ${_typography.default} {
+        color: var(--${colorToken});
+        font-weight: 500;
+      }`}
+    `;
+}}
+  border-radius: var(--borderRadius050);
+  width: 100%;
+
+  ${_progressTracker.StyledProgressBar}, ${_progressTracker.InnerBar} {
+    border-radius: var(--borderRadius050);
+    border: none;
+  }
+
+  ${_loaderBar.StyledLoader} {
+    display: flex;
+  }
+
+  ${_loaderBar.default} {
+    background-color: var(--colorsSemanticNeutral200);
+  }
+
+  ${_loaderBar.InnerBar} {
+    background-color: var(--colorsSemanticNeutral500);
+  }
+`;

package/lib/components/file-input/__internal__/file-upload-status/index.d.ts

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

package/lib/components/file-input/__internal__/file-upload-status/index.js

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

package/lib/components/file-input/__internal__/file-upload-status/package.json

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

package/lib/components/file-input/file-input.component.d.ts

@@ -0,0 +1,36 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+import { InputProps } from "../../__internal__/input";
+import { TagProps } from "../../__internal__/utils/helpers/tags";
+import { FileUploadStatusProps } from "./__internal__/file-upload-status";
+export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<InputProps, "id" | "name" | "required">, TagProps, MarginProps {
+    /** Which file format(s) to accept. Will be passed to the underlying HTML input.
+     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept  */
+    accept?: string;
+    /** Text to appear on the main button. Defaults to "Select file" */
+    buttonText?: string;
+    /** Explanatory text to appear inside the input area. Defaults to "or drag and drop your file" */
+    dragAndDropText?: string;
+    /** A hint string rendered before the input but after the label. Intended to describe the purpose or content of the input. */
+    inputHint?: React.ReactNode;
+    /** Sets the default layout to vertical - with the button below the explanatory text rather than next to it.
+     * This is the equivalent of removing the maxHeight prop - it will be over-ridden if this prop is set explicitly. */
+    isVertical?: boolean;
+    /** Label content */
+    label?: string;
+    /** A valid CSS string for the max-height CSS property. Defaults to the same as the minHeight. */
+    maxHeight?: string;
+    /** A valid CSS string for the max-width CSS property. Defaults to the same as the minWidth. */
+    maxWidth?: string;
+    /** A valid CSS string for the min-height CSS property. Defaults to 40px. */
+    minHeight?: string;
+    /** A valid CSS string for the min-width CSS property. Defaults to 256px. */
+    minWidth?: string;
+    /** onChange event handler. Accepts a list of all files currently entered to the input. */
+    onChange: (files: FileList) => void;
+    /** used to control how to display the progress of uploaded file(s) within the component */
+    uploadStatus?: FileUploadStatusProps | FileUploadStatusProps[];
+}
+export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+export default FileInput;