carbon-react 106.0.3 → 106.1.2

package/lib/__internal__/validations/validation-icon.component.js

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.ValidationIcon = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _propTypes2 = _interopRequireDefault(require("@styled-system/prop-types"));
+var _invariant = _interopRequireDefault(require("invariant"));
 
 var _icon = _interopRequireDefault(require("../../components/icon"));
 
@@ -27,8 +25,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _extends() { _extends = Object.assign || 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 marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
-
 const getValidationType = ({
   error,
   warning,
@@ -37,7 +33,7 @@ const getValidationType = ({
   if (error) return "error";
   if (warning) return "warning";
   if (info) return "info";
-  return "";
+  return null;
 };
 
 const ValidationIcon = ({
@@ -50,12 +46,18 @@ const ValidationIcon = ({
   iconId,
   tooltipId,
   isPartOfInput,
-  tabIndex,
+  tabIndex = -1,
   onClick,
-  tooltipPosition,
+  tooltipPosition = "right",
   tooltipFlipOverrides,
   ...rest
 }) => {
+  const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
+
+  if (tooltipFlipOverrides) {
+    (0, _invariant.default)(flipBehaviourCheck, `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`);
+  }
+
   const {
     hasFocus,
     hasMouseOver
@@ -72,7 +74,7 @@ const ValidationIcon = ({
   });
   const validationMessage = error || warning || info;
 
-  if (typeof validationMessage !== "string") {
+  if (typeof validationMessage !== "string" || !validationType) {
     return null;
   }
 
@@ -107,60 +109,6 @@ const ValidationIcon = ({
   }));
 };
 
-ValidationIcon.propTypes = { ...marginPropTypes,
-
-  /** A small string to indicate the size of the icon */
-  size: _propTypes.default.oneOf(["small", "medium", "large"]),
-
-  /** The unique id of the component (used with aria-describedby for accessibility) */
-  iconId: _propTypes.default.string,
-
-  /** Define position of the tooltip */
-  tooltipPosition: _propTypes.default.string,
-
-  /** Overrides the default flip behaviour of the Tooltip, must be an array containing some or all of ["top", "bottom", "left", "right"] (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements) */
-  tooltipFlipOverrides: (props, propName, componentName) => {
-    const prop = props[propName];
-    const isValid = prop && Array.isArray(prop) && prop.every(placement => ["bottom", "left", "right", "top"].includes(placement));
-
-    if (!prop || isValid) {
-      return null;
-    }
-
-    return new Error( // eslint-disable-next-line max-len
-    `The \`${propName}\` prop supplied to \`${componentName}\` must be an array containing some or all of ["top", "bottom", "left", "right"].`);
-  },
-
-  /** Id passed to the tooltip container, used for accessibility purposes. */
-  tooltipId: _propTypes.default.string,
-
-  /** An onClick handler */
-  onClick: _propTypes.default.func,
-
-  /** An onFocus handler */
-  onFocus: _propTypes.default.func,
-
-  /** An onBlur handler */
-  onBlur: _propTypes.default.func,
-
-  /** A boolean to indicate if the icon is part of an input */
-  isPartOfInput: _propTypes.default.bool,
-
-  /** Overrides the default tabindex of the component */
-  tabIndex: _propTypes.default.number,
-
-  /** Status of error validations */
-  error: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Status of warnings */
-  warning: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Status of info */
-  info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string])
-};
-ValidationIcon.defaultProps = {
-  tooltipPosition: "right",
-  tabIndex: -1
-};
+exports.ValidationIcon = ValidationIcon;
 var _default = ValidationIcon;
 exports.default = _default;

package/lib/__internal__/validations/validation-icon.style.d.ts

@@ -1,2 +1,6 @@
+import { ValidationIconProps } from "./validation-icon.component";
+declare type ValidationType = "error" | "warning" | "info";
+declare const ValidationIconStyle: import("styled-components").StyledComponent<"span", any, ValidationIconProps & {
+    validationType: ValidationType;
+}, never>;
 export default ValidationIconStyle;
-declare const ValidationIconStyle: import("styled-components").StyledComponent<"span", any, {}, never>;

package/lib/__internal__/validations/validation-icon.style.js

@@ -22,7 +22,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 const validationIconTypes = {
   error: "var(--colorsSemanticNegative500)",
   info: "var(--colorsSemanticInfo500)",
-  success: "var(--colorsSemanticPositive500)",
   warning: "var(--colorsSemanticCaution500)"
 };
 const ValidationIconStyle = _styledComponents.default.span`

package/lib/components/duelling-picklist/picklist-item/picklist-item.component.js

@@ -44,6 +44,7 @@ const PicklistItem = /*#__PURE__*/_react.default.forwardRef(({
   const {
     setElementToFocus
   } = (0, _react.useContext)(_duellingPicklist.default);
+  const picklistItemNodeRef = (0, _react.useRef)();
   const calculateFocusIndex = (0, _react.useCallback)(() => {
     if (isLastItem) {
       const toggledListIndex = listIndex === 0 ? 1 : 0;
@@ -89,10 +90,13 @@ const PicklistItem = /*#__PURE__*/_react.default.forwardRef(({
     classNames: "picklist-item"
   }, rest, type === "add" ? {
     enter: false
-  } : {}), /*#__PURE__*/_react.default.createElement(_picklistItem.StyledPicklistItem, {
+  } : {}, {
+    nodeRef: picklistItemNodeRef
+  }), /*#__PURE__*/_react.default.createElement(_picklistItem.StyledPicklistItem, {
     onKeyDown: handleKeydown,
     "data-element": "picklist-item",
-    locked: locked
+    locked: locked,
+    ref: picklistItemNodeRef
   }, children, !locked && /*#__PURE__*/_react.default.createElement(_picklistItem.StyledButton, {
     buttonType: "primary",
     destructive: type === "remove",

package/lib/components/icon/icon.d.ts

@@ -239,6 +239,10 @@ export interface IconProps extends MarginProps {
   tooltipId?: string;
   /** Id passed to the icon. */
   id?: string;
+  tabIndex?: number;
+  isPartOfInput?: boolean;
+  inputSize?: "small" | "medium" | "large";
+  focusable?: boolean;
 }
 
 declare function Icon(

package/lib/components/modal/modal.component.js

@@ -44,6 +44,8 @@ const Modal = ({
   ...rest
 }) => {
   const ref = (0, _react.useRef)();
+  const backgroundNodeRef = (0, _react.useRef)();
+  const contentNodeRef = (0, _react.useRef)();
   const listenerAdded = (0, _react.useRef)(false);
   const modalRegistered = (0, _react.useRef)(false);
   const [isAnimationComplete, setAnimationComplete] = (0, _react.useState)(false);
@@ -139,6 +141,7 @@ const Modal = ({
 
   if (open) {
     background = !enableBackgroundUI ? /*#__PURE__*/_react.default.createElement(_modal.StyledModalBackground, {
+      ref: backgroundNodeRef,
       "data-element": "modal-background",
       transitionName: "modal-background",
       transitionTime: timeout
@@ -152,6 +155,7 @@ const Modal = ({
     transitionTime: timeout,
     ref: ref
   }, rest), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, background && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    nodeRef: backgroundNodeRef,
     key: "modal",
     appear: true,
     classNames: "modal-background",
@@ -159,6 +163,7 @@ const Modal = ({
     onEntered: () => setAnimationComplete(true),
     onExiting: () => setAnimationComplete(false)
   }, background)), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, content && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
+    nodeRef: contentNodeRef,
     appear: true,
     classNames: "modal",
     timeout: timeout
@@ -167,7 +172,8 @@ const Modal = ({
       isAnimationComplete,
       triggerRefocusFlag,
       isInModal: true
-    }
+    },
+    ref: contentNodeRef
   }, content)))));
 };
 

package/lib/components/pages/page/page.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,6 +21,10 @@ var _page = require("./page.style");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || 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 Page = ({
@@ -28,6 +32,7 @@ const Page = ({
   children,
   ...props
 }) => {
+  const styledPageNodeRef = (0, _react.useRef)();
   return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, _extends({
     className: "carbon-carousel__transition",
     timeout: {
@@ -36,8 +41,11 @@ const Page = ({
       exit: 0
     } // eslint-disable-next-line react/prop-types
     ,
-    classNames: props.transitionName()
-  }, props), /*#__PURE__*/_react.default.createElement(_page.StyledPage, (0, _tags.default)("page", props), /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, {
+    classNames: props.transitionName(),
+    nodeRef: styledPageNodeRef
+  }, props), /*#__PURE__*/_react.default.createElement(_page.StyledPage, _extends({}, (0, _tags.default)("page", props), {
+    ref: styledPageNodeRef
+  }), /*#__PURE__*/_react.default.createElement(_fullScreenHeading.default, {
     hasContent: title
   }, title), /*#__PURE__*/_react.default.createElement(_page.StyledPageContent, {
     "data-element": "carbon-page-content"

package/lib/components/popover-container/popover-container.component.js

@@ -52,6 +52,7 @@ const PopoverContainer = ({
   const closeButtonRef = (0, _react.useRef)();
   const openButtonRef = (0, _react.useRef)();
   const guid = (0, _react.useRef)((0, _guid.default)());
+  const popoverContentNodeRef = (0, _react.useRef)();
   const popoverContainerId = title ? `PopoverContainer_${guid.current}` : undefined;
   const isOpen = isControlled ? open : isOpenInternal;
   (0, _react.useEffect)(() => {
@@ -99,7 +100,8 @@ const PopoverContainer = ({
     },
     appear: true,
     mountOnEnter: true,
-    unmountOnExit: true
+    unmountOnExit: true,
+    nodeRef: popoverContentNodeRef
   }, state => /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerContentStyle, _extends({
     "data-element": "popover-container-content",
     role: "dialog",
@@ -109,7 +111,8 @@ const PopoverContainer = ({
     "aria-labelledby": popoverContainerId,
     "aria-label": containerAriaLabel,
     "aria-describedby": ariaDescribedBy,
-    p: "16px 24px"
+    p: "16px 24px",
+    ref: popoverContentNodeRef
   }, (0, _utils.filterStyledSystemPaddingProps)(rest)), /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerHeaderStyle, null, /*#__PURE__*/_react.default.createElement(_popoverContainer.PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"

package/lib/components/portal/portal.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.PortalContext = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -23,6 +23,10 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+const PortalContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.PortalContext = PortalContext;
+
 const Portal = ({
   children,
   className,
@@ -31,6 +35,9 @@ const Portal = ({
 }) => {
   const [portalNode, setPortalNode] = (0, _react.useState)(null);
   const uniqueId = (0, _react.useMemo)(() => (0, _guid.default)(), []);
+  const {
+    renderInRoot
+  } = (0, _react.useContext)(PortalContext);
   (0, _react.useEffect)(() => {
     if (onReposition) {
       onReposition();
@@ -63,7 +70,7 @@ const Portal = ({
     if (!node && id !== undefined && document.getElementById(id)) {
       node = document.getElementById(id);
       setPortalNode(node);
-    } else if (!node) {
+    } else if (!node || document.getElementsByClassName(portalClassName).length === 0) {
       node = document.createElement("div");
       node.classList.add(portalClassName);
       node.setAttribute("data-portal-exit", uniqueId);
@@ -73,14 +80,14 @@ const Portal = ({
       }
 
       setPortalNode(node);
-      const rootDiv = document.getElementById("root"); // Storybook adds the hidden attribute to the root element when on the "Docs" pages
-      // Without this check the portal would also be hidden
+      let mainNode = document.body;
+      const rootDiv = document.getElementById("root");
 
-      if (rootDiv && !rootDiv.hasAttribute("hidden")) {
-        rootDiv.appendChild(node);
-      } else {
-        document.body.appendChild(node);
+      if (rootDiv && renderInRoot) {
+        mainNode = rootDiv;
       }
+
+      mainNode.appendChild(node);
     }
 
     if (className) {

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

@@ -154,7 +154,7 @@ const SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
 
         return true;
       });
-    } else if (key.length === 1) {
+    } else if (key.length === 1 && !event.metaKey && !event.ctrlKey) {
       triggerFilterChange(key);
     }
   }, [triggerFilterChange, onKeyDown, onOpen, readOnly]);

package/lib/components/show-edit-pod/show-edit-pod.component.js

@@ -61,6 +61,8 @@ const ShowEditPod = ({
 }) => {
   const locale = (0, _react.useContext)(_i18nContext.default);
   const ref = (0, _react.useRef)();
+  const editModeNodeRef = (0, _react.useRef)();
+  const showModeNodeRef = (0, _react.useRef)();
   const [isEditing, setIsEditingState] = (0, _react.useState)(false);
   const isControlled = editing !== undefined;
 
@@ -146,9 +148,11 @@ const ShowEditPod = ({
         timeout: {
           enter: 300,
           exit: 50
-        }
+        },
+        nodeRef: editModeNodeRef
       }, /*#__PURE__*/_react.default.createElement("div", {
-        key: "edit"
+        key: "edit",
+        ref: editModeNodeRef
       }, editContent()));
     }
 
@@ -158,9 +162,11 @@ const ShowEditPod = ({
       timeout: {
         enter: 300,
         exit: 50
-      }
+      },
+      nodeRef: showModeNodeRef
     }, /*#__PURE__*/_react.default.createElement("div", {
-      key: "show"
+      key: "show",
+      ref: showModeNodeRef
     }, children));
   };
 

package/lib/components/textarea/textarea-test.stories.js

@@ -83,7 +83,27 @@ var _default = {
         ..._specialCharacters.number.mapping
       }
     },
-    fieldHelpSpecialCharacters: _specialCharacters.default
+    fieldHelpSpecialCharacters: _specialCharacters.default,
+    children: {
+      control: {
+        type: "text"
+      }
+    },
+    error: {
+      control: {
+        type: "text"
+      }
+    },
+    warning: {
+      control: {
+        type: "text"
+      }
+    },
+    info: {
+      control: {
+        type: "text"
+      }
+    }
   },
   args: {
     expandable: false,

package/lib/components/toast/toast.component.js

@@ -63,6 +63,7 @@ const Toast = ({
   const locale = (0, _useLocale.default)();
   const toastRef = (0, _react.useRef)();
   const timer = (0, _react.useRef)();
+  const toastContentNodeRef = (0, _react.useRef)();
   const componentClasses = (0, _react.useMemo)(() => {
     return (0, _classnames.default)(className);
   }, [className]);
@@ -122,10 +123,13 @@ const Toast = ({
         appear: 1600,
         enter: 1500,
         exit: 500
-      }
+      },
+      nodeRef: toastContentNodeRef
     }, /*#__PURE__*/_react.default.createElement(_toast.ToastStyle, _extends({
       className: componentClasses
-    }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), toastProps), /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
+    }, (0, _tags.default)(restProps["data-component"] || "toast", restProps), toastProps, {
+      ref: toastContentNodeRef
+    }), /*#__PURE__*/_react.default.createElement(_toast.TypeIcon, {
       variant: toastProps.variant
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: toastProps.variant

package/lib/style/fonts.css

@@ -1,30 +1,36 @@
-@font-face{
-  font-family: "Sage UI";
-  src: url('https://fonts.sage.com/Sage_UI-Regular.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Regular.woff') format("woff");
-  font-weight: 400;
+@font-face {
+  font-family: "CarbonIcons";
+  src: url("./assets/carbon-icons-webfont.woff") format("woff");
+  font-weight: normal;
   font-style: normal;
-  font-display: swap;
 }
 
-@font-face{
+@font-face {
   font-family: "Sage UI";
-  src: url('https://fonts.sage.com/Sage_UI-Medium.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Medium.woff') format("woff");
-  font-weight: 700;
   font-style: normal;
-  font-display: swap;
+  font-weight: 400;
+  src: url("~@sage/design-tokens/assets/fonts/sageui-regular.woff2") format("woff2"),
+       url("~@sage/design-tokens/assets/fonts/sageui-regular.woff") format("woff"),
+       url("~@sage/design-tokens/assets/fonts/sageui-regular.ttf") format("truetype"),
+       url("~@sage/design-tokens/assets/fonts/sageui-regular.otf") format("opentype");
 }
 
-@font-face{
+@font-face {
   font-family: "Sage UI";
-  src: url('https://fonts.sage.com/Sage_UI-Bold.woff2') format("woff2"), url('https://fonts.sage.com/Sage_UI-Bold.woff') format("woff");
-  font-weight: 900;
   font-style: normal;
-  font-display: swap;
+  font-weight: 700;
+  src: url("~@sage/design-tokens/assets/fonts/sageui-medium.woff2") format("woff2"),
+       url("~@sage/design-tokens/assets/fonts/sageui-medium.woff") format("woff"),
+       url("~@sage/design-tokens/assets/fonts/sageui-medium.ttf") format("truetype"),
+       url("~@sage/design-tokens/assets/fonts/sageui-medium.otf") format("opentype");
 }
 
 @font-face {
-  font-family: "CarbonIcons";
-  src: url("./assets/carbon-icons-webfont.woff") format("woff");
-  font-weight: normal;
+  font-family: "Sage UI";
   font-style: normal;
+  font-weight: 900;
+  src: url("~@sage/design-tokens/assets/fonts/sageui-bold.woff2") format("woff2"),
+       url("~@sage/design-tokens/assets/fonts/sageui-bold.woff") format("woff"),
+       url("~@sage/design-tokens/assets/fonts/sageui-bold.ttf") format("truetype"),
+       url("~@sage/design-tokens/assets/fonts/sageui-bold.otf") format("opentype");
 }