carbon-react 124.2.2 → 124.3.1

package/esm/__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/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -12,9 +12,11 @@ const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
 };
-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
 export { elementsTagTest, rootTagTest, rootTagTestRtl };

package/esm/__spec_helper__/index.js

@@ -1,6 +1,8 @@
 import { enableFetchMocks } from "jest-fetch-mock";
 import { setupMatchMediaMock } from "./mock-match-media";
 import setupResizeObserverMock from "./mock-resize-observer";
+import setupScrollToMock from "./mock-element-scrollto";
 enableFetchMocks();
 setupResizeObserverMock();
-setupMatchMediaMock();
+setupMatchMediaMock();
+setupScrollToMock();

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

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

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

@@ -0,0 +1,6 @@
+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 = () => {};
+};
+export default setupScrollToMock;

package/esm/__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;

package/esm/__spec_helper__/select-test-utils.js

@@ -0,0 +1,39 @@
+import { act } from "react-dom/test-utils";
+import { mockResizeObserver } from "jsdom-testing-mocks";
+import StyledSelectListContainer from "../components/select/select-list/select-list-container.style";
+const resizeObserver = mockResizeObserver();
+export function simulateSelectTextboxEvent(container, eventType,
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+...eventArgs) {
+  const selectText = container.find('input[type="text"]').first();
+  selectText.simulate(eventType, ...eventArgs);
+  const selectList = container.find(StyledSelectListContainer).getDOMNode();
+  // need to manually trigger a resize to make react-virtual realise that child options should be rendered
+  act(() => {
+    resizeObserver.mockElementSize(selectList, {
+      contentBoxSize: {
+        inlineSize: 500,
+        blockSize: 180
+      }
+    });
+    resizeObserver.resize();
+  });
+  if (eventType === "focus") jest.runOnlyPendingTimers();
+  container.update();
+}
+export function simulateDropdownEvent(container, eventType) {
+  const dropdown = container.find('[type="dropdown"]').first();
+  dropdown.simulate(eventType);
+  const selectList = container.find(StyledSelectListContainer).getDOMNode();
+  // need to manually trigger a resize to make react-virtual realise that child options should be rendered
+  act(() => {
+    resizeObserver.mockElementSize(selectList, {
+      contentBoxSize: {
+        inlineSize: 500,
+        blockSize: 180
+      }
+    });
+    resizeObserver.resize();
+  });
+  container.update();
+}

package/esm/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/esm/components/file-input/__internal__/file-upload-status/file-upload-status.component.js

@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Link from "../../../link";
+import ButtonMinor from "../../../button-minor";
+import StyledTypography from "../../../typography/typography.style";
+import ProgressTracker from "../../../progress-tracker";
+import LoaderBar from "../../../loader-bar";
+import Icon from "../../../icon";
+import { StyledFileUploadStatus, StyledFileUploadStatusRow, StyledFileLinkContainer } from "./file-upload-status.style";
+import useLocale from "../../../../hooks/__internal__/useLocale";
+export const FileUploadStatus = ({
+  status,
+  filename,
+  message,
+  onAction,
+  iconType = "file_generic",
+  ...statusProps
+}) => {
+  const locale = useLocale();
+  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.createElement(LoaderBar, {
+        size: "small"
+      }) : /*#__PURE__*/React.createElement(ProgressTracker, {
+        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.createElement(ButtonMinor, {
+    onClick: onAction,
+    buttonType: "tertiary"
+  }, buttonText);
+  const fileLink = linkProps ? /*#__PURE__*/React.createElement(Link, linkProps, filename) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
+    type: iconType
+  }), /*#__PURE__*/React.createElement("span", null, filename));
+  const mainRow = status !== "previously" ? /*#__PURE__*/React.createElement(StyledFileUploadStatusRow, null, /*#__PURE__*/React.createElement(StyledTypography, {
+    as: "p",
+    mb: 0,
+    "aria-live": "polite"
+  }, statusMessage), actionButton) : /*#__PURE__*/React.createElement(StyledFileUploadStatusRow, {
+    onlyRow: true
+  }, /*#__PURE__*/React.createElement(StyledFileLinkContainer, null, fileLink), actionButton);
+  const secondRow = status !== "previously" ? /*#__PURE__*/React.createElement(StyledFileUploadStatusRow, {
+    upperPadding: true,
+    lowerPadding: true
+  }, /*#__PURE__*/React.createElement(StyledFileLinkContainer, null, fileLink)) : null;
+  return /*#__PURE__*/React.createElement(StyledFileUploadStatus, {
+    hasError: status === "error"
+  }, mainRow, secondRow, progressBar);
+};
+export default FileUploadStatus;

package/esm/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/esm/components/file-input/__internal__/file-upload-status/file-upload-status.style.js

@@ -0,0 +1,97 @@
+import styled, { css } from "styled-components";
+import StyledTypography from "../../../typography/typography.style";
+import StyledIcon from "../../../icon/icon.style";
+import { StyledProgressBar, InnerBar as ProgressTrackerInnerBar } from "../../../progress-tracker/progress-tracker.style";
+import StyledLoaderBar, { StyledLoader, InnerBar as LoaderBarInnerBar } from "../../../loader-bar/loader-bar.style";
+import { StyledLink, StyledContent } from "../../../link/link.style";
+export const StyledFileLinkContainer = styled.div`
+  color: var(--colorsActionMajorYin090);
+  display: flex;
+  align-items: center;
+  overflow-x: clip;
+  overflow-y: visible;
+  padding-right: var(--spacing150);
+
+  ${StyledLink} {
+    overflow: hidden;
+  }
+
+  ${StyledLink} a {
+    overflow: hidden;
+    display: flex;
+    text-decoration: none;
+  }
+
+  ${StyledContent} {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: underline;
+  }
+
+  &&& ${StyledIcon} {
+    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(${StyledLink} ${StyledIcon}) {
+      color: var(--colorsUtilityYin065);
+      padding-right: var(--spacing100);
+    }
+  }
+`;
+export const StyledFileUploadStatusRow = styled.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);" : ""}
+
+  ${StyledTypography} {
+    color: var(--colorsUtilityYin055);
+  }
+`;
+export const StyledFileUploadStatus = styled.div`
+  background-color: var(--colorsUtilityYang100);
+  ${({
+  hasError
+}) => {
+  const borderWidthToken = hasError ? "borderWidth200" : "borderWidth100";
+  const colorToken = hasError ? "colorsSemanticNegative500" : "colorsUtilityMajor300";
+  return css`
+      border: var(--${borderWidthToken}) solid var(--${colorToken});
+      ${hasError && `&& ${StyledTypography} {
+        color: var(--${colorToken});
+        font-weight: 500;
+      }`}
+    `;
+}}
+  border-radius: var(--borderRadius050);
+  width: 100%;
+
+  ${StyledProgressBar}, ${ProgressTrackerInnerBar} {
+    border-radius: var(--borderRadius050);
+    border: none;
+  }
+
+  ${StyledLoader} {
+    display: flex;
+  }
+
+  ${StyledLoaderBar} {
+    background-color: var(--colorsSemanticNeutral200);
+  }
+
+  ${LoaderBarInnerBar} {
+    background-color: var(--colorsSemanticNeutral500);
+  }
+`;

package/esm/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/esm/components/file-input/__internal__/file-upload-status/index.js

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

package/esm/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;