carbon-react 124.2.2 → 124.3.1

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

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.simulateDropdownEvent = simulateDropdownEvent;
+exports.simulateSelectTextboxEvent = simulateSelectTextboxEvent;
+var _testUtils = require("react-dom/test-utils");
+var _jsdomTestingMocks = require("jsdom-testing-mocks");
+var _selectListContainer = _interopRequireDefault(require("../components/select/select-list/select-list-container.style"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const resizeObserver = (0, _jsdomTestingMocks.mockResizeObserver)();
+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(_selectListContainer.default).getDOMNode();
+  // need to manually trigger a resize to make react-virtual realise that child options should be rendered
+  (0, _testUtils.act)(() => {
+    resizeObserver.mockElementSize(selectList, {
+      contentBoxSize: {
+        inlineSize: 500,
+        blockSize: 180
+      }
+    });
+    resizeObserver.resize();
+  });
+  if (eventType === "focus") jest.runOnlyPendingTimers();
+  container.update();
+}
+function simulateDropdownEvent(container, eventType) {
+  const dropdown = container.find('[type="dropdown"]').first();
+  dropdown.simulate(eventType);
+  const selectList = container.find(_selectListContainer.default).getDOMNode();
+  // need to manually trigger a resize to make react-virtual realise that child options should be rendered
+  (0, _testUtils.act)(() => {
+    resizeObserver.mockElementSize(selectList, {
+      contentBoxSize: {
+        inlineSize: 500,
+        blockSize: 180
+      }
+    });
+    resizeObserver.resize();
+  });
+  container.update();
+}

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;