carbon-react 111.5.1 → 111.5.3

package/esm/components/carbon-provider/carbon-provider.component.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { ThemeProvider } from "styled-components";
 import mintTheme from "../../style/themes/mint";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider";
+import { TopModalContextProvider } from "./top-modal-context";
 export const NewValidationContext = /*#__PURE__*/createContext({});
 
 const CarbonProvider = ({
@@ -15,7 +16,7 @@ const CarbonProvider = ({
   value: {
     validationRedesignOptIn
   }
-}, children)));
+}, /*#__PURE__*/React.createElement(TopModalContextProvider, null, children))));
 
 CarbonProvider.propTypes = {
   "children": PropTypes.node,

package/esm/components/carbon-provider/top-modal-context.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+declare type TopModalContextProps = {
+    topModal: HTMLElement | null;
+};
+declare const TopModalContext: React.Context<TopModalContextProps>;
+export declare const TopModalContextProvider: ({ children, }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default TopModalContext;

package/esm/components/carbon-provider/top-modal-context.js

@@ -0,0 +1,36 @@
+import React, { createContext, useState, useEffect, useRef } from "react";
+const TopModalContext = /*#__PURE__*/createContext({
+  topModal: null
+});
+export const TopModalContextProvider = ({
+  children
+}) => {
+  const [topModal, setTopModal] = useState(null); // can't add the setter to the global list inside useEffect because that doesn't run until
+  // after the render. We use a ref to ensure it only runs once.
+
+  const isFirstRender = useRef(true);
+
+  if (isFirstRender.current) {
+    if (!window.__CARBON_INTERNALS_MODAL_SETTER_LIST) {
+      window.__CARBON_INTERNALS_MODAL_SETTER_LIST = [];
+    }
+
+    window.__CARBON_INTERNALS_MODAL_SETTER_LIST.push(setTopModal);
+
+    isFirstRender.current = false;
+  }
+
+  useEffect(() => {
+    return () => {
+      var _window$__CARBON_INTE;
+
+      window.__CARBON_INTERNALS_MODAL_SETTER_LIST = (_window$__CARBON_INTE = window.__CARBON_INTERNALS_MODAL_SETTER_LIST) === null || _window$__CARBON_INTE === void 0 ? void 0 : _window$__CARBON_INTE.filter(setter => setter !== setTopModal);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(TopModalContext.Provider, {
+    value: {
+      topModal
+    }
+  }, children);
+};
+export default TopModalContext;

package/esm/components/checkbox/checkbox-group.component.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { ValidationProps } from "../../__internal__/validations";
+export interface CheckboxGroupProps extends ValidationProps, MarginProps {
+    /** The content for the CheckboxGroup Legend */
+    legend?: string;
+    /** When true, legend is placed inline with the checkboxes */
+    legendInline?: boolean;
+    /** Percentage width of legend (only when legend is inline)  */
+    legendWidth?: number;
+    /** Text alignment of legend when inline */
+    legendAlign?: "left" | "right";
+    /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
+    legendSpacing?: 1 | 2;
+    /** The Checkboxes to be rendered in the group */
+    children: React.ReactNode;
+    /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
+    labelSpacing?: 1 | 2;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
+    /** Overrides the default tooltip */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+}
+export declare const CheckboxGroupContext: React.Context<ValidationProps>;
+export declare const CheckboxGroup: {
+    (props: CheckboxGroupProps): JSX.Element;
+    displayName: string;
+};
+export default CheckboxGroup;

package/esm/components/checkbox/checkbox-group.component.js

@@ -2,13 +2,11 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from "react";
 import PropTypes from "prop-types";
-import styledSystemPropTypes from "@styled-system/prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { StyledCheckboxGroup } from "./checkbox.style";
+import StyledCheckboxGroup from "./checkbox-group.style";
 import Fieldset from "../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
 
 const CheckboxGroup = props => {
@@ -52,49 +50,173 @@ const CheckboxGroup = props => {
 };
 
 CheckboxGroup.propTypes = {
-  /** Filtered styled system margin props */
-  ...marginPropTypes,
-
-  /** The content for the CheckboxGroup Legend */
-  legend: PropTypes.string,
-
-  /** When true, legend is placed in line with the checkboxes */
-  legendInline: PropTypes.bool,
-
-  /** Percentage width of legend (only when legend is inline)  */
-  legendWidth: PropTypes.number,
-
-  /** Text alignment of legend when inline */
-  legendAlign: PropTypes.oneOf(["left", "right"]),
-
-  /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
-  legendSpacing: PropTypes.oneOf([1, 2]),
-
-  /** The Checkboxes to be rendered in the group */
-  children: PropTypes.node.isRequired,
-
-  /** Indicate that error has occurred
-  Pass string to display icon, tooltip and red border
-  Pass true boolean to only display red border */
-  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate that warning has occurred
-  Pass string to display icon, tooltip and orange border
-  Pass true boolean to only display orange border */
-  warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Indicate additional information
-  Pass string to display icon, tooltip and blue border
-  Pass true boolean to only display blue border */
-  info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-
-  /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
-  labelSpacing: PropTypes.oneOf([1, 2]),
-
-  /** Flag to configure component as mandatory */
-  required: PropTypes.bool,
-
-  /** Overrides the default tooltip position */
-  tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"])
+  "children": PropTypes.node,
+  "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "info": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  "labelSpacing": PropTypes.oneOf([1, 2]),
+  "legend": PropTypes.string,
+  "legendAlign": PropTypes.oneOf(["left", "right"]),
+  "legendInline": PropTypes.bool,
+  "legendSpacing": PropTypes.oneOf([1, 2]),
+  "legendWidth": PropTypes.number,
+  "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]),
+  "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]),
+  "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]),
+  "required": PropTypes.bool,
+  "tooltipPosition": PropTypes.oneOf(["bottom", "left", "right", "top"]),
+  "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])
 };
+export { CheckboxGroup };
+CheckboxGroup.displayName = "CheckboxGroup";
 export default CheckboxGroup;

package/esm/components/checkbox/checkbox-group.style.d.ts

@@ -0,0 +1,4 @@
+declare const StyledCheckboxGroup: import("styled-components").StyledComponent<"div", any, {
+    legendInline?: boolean | undefined;
+}, never>;
+export default StyledCheckboxGroup;

package/esm/components/checkbox/checkbox-group.style.js

@@ -0,0 +1,46 @@
+import styled, { css } from "styled-components";
+import StyledFormField from "../../__internal__/form-field/form-field.style";
+import StyledIcon from "../icon/icon.style";
+import CheckboxStyle from "./checkbox.style";
+import { StyledLabelContainer } from "../../__internal__/label/label.style";
+import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
+const StyledCheckboxGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  ${StyledIcon}::before {
+    font-size: 16px;
+  }
+
+  && ${StyledFormField} {
+    margin: 0;
+  }
+
+  & ${CheckboxStyle} {
+    margin-bottom: var(--spacing150);
+
+    :last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  & > ${StyledFormField} {
+    & > ${StyledLabelContainer} {
+      margin-bottom: 4px;
+      vertical-align: middle;
+
+      ${StyledValidationIcon} {
+        display: inline-block;
+      }
+    }
+  }
+
+  ${({
+  legendInline
+}) => legendInline && css`
+      ${CheckboxStyle}:first-child {
+        padding-top: 4px;
+      }
+    `}
+`;
+export default StyledCheckboxGroup;

package/esm/components/checkbox/checkbox-svg.component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const CheckboxSvg: () => JSX.Element;
+export default CheckboxSvg;

package/esm/components/checkbox/checkbox-svg.component.js

@@ -1,17 +1,16 @@
 import React from "react";
+import PropTypes from "prop-types";
 import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
 
-const CheckboxSvg = () => {
-  return /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
-    focusable: "false",
-    width: "12",
-    height: "10",
-    viewBox: "0 0 12 10"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M.237 6.477A.752.752 0 0 1 .155 5.47l.851-1.092a.63.63 0 0 1 .934-.088l2.697 1.964, " + "4.674-6a.63.63 0 0 1 .933-.088l1.015.917c.28.254.317.703.081 1.005L6.353 8.492a.725.725, " + "0 0 1-.095.16l-.85 1.093a.637.637 0 0 1-.626.244.638.638 0 0 1-.335-.16L.237 6.476z",
-    fill: "#FFFFFF",
-    fillRule: "evenodd"
-  })));
-};
+const CheckboxSvg = () => /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
+  focusable: "false",
+  width: "12",
+  height: "10",
+  viewBox: "0 0 12 10"
+}, /*#__PURE__*/React.createElement("path", {
+  d: "M.237 6.477A.752.752 0 0 1 .155 5.47l.851-1.092a.63.63 0 0 1 .934-.088l2.697 1.964, " + "4.674-6a.63.63 0 0 1 .933-.088l1.015.917c.28.254.317.703.081 1.005L6.353 8.492a.725.725, " + "0 0 1-.095.16l-.85 1.093a.637.637 0 0 1-.626.244.638.638 0 0 1-.335-.16L.237 6.476z",
+  fill: "#FFFFFF",
+  fillRule: "evenodd"
+})));
 
 export default CheckboxSvg;

package/esm/components/checkbox/checkbox.component.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { CommonCheckableInputProps } from "../../__internal__/checkable-input/checkable-input.component";
+export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
+    /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
+    adaptiveSpacingBreakpoint?: number;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-component"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-element"?: string;
+    /** Identifier used for testing purposes, applied to the root element of the component. */
+    "data-role"?: string;
+    /** Aria label for rendered help component */
+    helpAriaLabel?: string;
+    /** Text alignment of the label */
+    labelAlign?: "left" | "right";
+    /** When true label is inline */
+    labelInline?: boolean;
+    /** Accepts a callback function which is triggered on click event */
+    onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
+    /** Overrides the default tooltip position */
+    tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** The value of the checkbox, passed on form submit */
+    value?: string;
+}
+export declare const Checkbox: {
+    ({ id, label, onChange, name, onClick, onBlur, onFocus, value, fieldHelp, autoFocus, labelHelp, labelSpacing, labelWidth, adaptiveSpacingBreakpoint, required, error, warning, info, fieldHelpInline, reverse, checked, disabled, inputWidth, size, tooltipPosition, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, helpAriaLabel, ...props }: CheckboxProps): JSX.Element;
+    displayName: string;
+};
+export default Checkbox;