carbon-react 106.6.0 → 106.6.3

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

@@ -1,2 +1,13 @@
+import React from "react";
+import { SpaceProps, LayoutProps, FlexboxProps, ColorProps } from "styled-system";
+export declare type OverflowWrap = "break-word" | "anywhere";
+export declare type ScrollVariant = "light" | "dark";
+export interface BoxProps extends SpaceProps, LayoutProps, FlexboxProps, ColorProps {
+    as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+    /** String to set Box content break strategy. Note "anywhere" is not supported in Safari */
+    overflowWrap?: OverflowWrap;
+    /** scroll styling attribute */
+    scrollVariant?: ScrollVariant;
+}
+declare const Box: import("styled-components").StyledComponent<"div", any, BoxProps, never>;
 export default Box;
-declare const Box: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/box/box.component.js

@@ -1,15 +1,23 @@
-import propTypes from "@styled-system/prop-types";
-import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import { space, layout, flexbox } from "styled-system";
 import BaseTheme from "../../style/themes/base";
-import color from "../../style/utils/color";
+import styledColor from "../../style/utils/color";
 import boxConfig from "./box.config";
 const Box = styled.div`
   ${space}
   ${layout}
   ${flexbox}
-  ${color}
+  ${({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+}) => styledColor({
+  color,
+  bg,
+  backgroundColor,
+  ...rest
+})}
 
   ${({
   overflowWrap
@@ -34,25 +42,6 @@ const Box = styled.div`
       }
     `}
 `;
-Box.propTypes = {
-  /** Styled system box props */
-  ...propTypes.space,
-
-  /** Styled system flex props */
-  ...propTypes.flexbox,
-
-  /** Styled system layout props */
-  ...propTypes.layout,
-
-  /** Styled system color props */
-  ...propTypes.color,
-
-  /** String to set Box content break strategy. Note "anywhere" is not supported in Safari and IE11 */
-  overflowWrap: PropTypes.oneOf(["break-word", "anywhere"]),
-
-  /** scroll styling attribute */
-  scrollVariant: PropTypes.oneOf(["light", "dark"])
-};
 Box.defaultProps = {
   theme: BaseTheme
 };

package/esm/components/box/box.config.d.ts

@@ -1,13 +1,11 @@
-declare namespace _default {
-    namespace light {
-        const thumb: string;
-        const track: string;
-    }
-    namespace dark {
-        const thumb_1: string;
-        export { thumb_1 as thumb };
-        const track_1: string;
-        export { track_1 as track };
-    }
-}
+declare const _default: {
+    light: {
+        thumb: string;
+        track: string;
+    };
+    dark: {
+        thumb: string;
+        track: string;
+    };
+};
 export default _default;

package/esm/components/box/index.d.ts

@@ -1 +1,2 @@
-export { default } from "./box";
+export { default } from "./box.component";
+export type { BoxProps } from "./box.component";

package/esm/components/dismissible-box/dismissible-box.style.d.ts

@@ -1,3 +1,2 @@
-declare var _default: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+declare var _default: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export default _default;
-import Box from "../box";

package/esm/components/drawer/drawer.style.d.ts

@@ -2,9 +2,8 @@ export const StyledSidebarHeader: import("styled-components").StyledComponent<"d
 export const StyledDrawerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDrawerContent: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledDrawerChildren: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledDrawerSidebar: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+export const StyledDrawerSidebar: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export const StyledSidebarTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledButton: import("styled-components").StyledComponent<"button", any, {
     type: "button";
 }, "type">;
-import Box from "../box";

package/esm/components/duelling-picklist/picklist/picklist.style.d.ts

@@ -1,5 +1,4 @@
-export const StyledPicklist: import("styled-components").StyledComponent<typeof Box, any, {
-    as: "ul";
+export const StyledPicklist: import("styled-components").StyledComponent<"div", any, import("../../box").BoxProps & {
+    as: string;
 }, "as">;
 export const StyledEmptyContainer: import("styled-components").StyledComponent<"li", any, {}, never>;
-import Box from "../../box";

package/esm/components/flat-table/flat-table.style.d.ts

@@ -1,5 +1,4 @@
-export const StyledFlatTableWrapper: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
+export const StyledFlatTableWrapper: import("styled-components").StyledComponent<"div", any, import("../box").BoxProps, never>;
 export const StyledFlatTable: import("styled-components").StyledComponent<"table", any, {}, never>;
 export const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
 export const StyledTableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-import Box from "../box";

package/esm/components/form/form.component.js

@@ -27,6 +27,7 @@ const Form = ({
   } = useContext(SidebarContext);
   const formRef = useRef();
   const formFooterRef = useRef();
+  const renderFooter = !!(saveButton || leftSideButtons || rightSideButtons || errorCount || warningCount);
   return /*#__PURE__*/React.createElement(StyledForm, _extends({
     ref: formRef,
     stickyFooter: stickyFooter,
@@ -40,7 +41,7 @@ const Form = ({
     "data-element": "form-content",
     stickyFooter: stickyFooter,
     className: stickyFooter ? "sticky" : ""
-  }, children), /*#__PURE__*/React.createElement(StyledFormFooter, {
+  }, children), renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, {
     "data-element": "form-footer",
     className: stickyFooter ? "sticky" : "",
     ref: formFooterRef,

package/esm/components/modal/modal.component.js

@@ -6,7 +6,7 @@ import { TransitionGroup, CSSTransition } from "react-transition-group";
 import useScrollBlock from "../../hooks/__internal__/useScrollBlock";
 import Portal from "../portal";
 import Events from "../../__internal__/utils/helpers/events";
-import ModalManager from "./__internal__/modal-manager";
+import useModalManager from "../../hooks/__internal__/useModalManager";
 import { StyledModal, StyledModalBackground } from "./modal.style";
 export const ModalContext = /*#__PURE__*/React.createContext({});
 
@@ -23,8 +23,6 @@ const Modal = ({
   const ref = useRef();
   const backgroundNodeRef = useRef();
   const contentNodeRef = useRef();
-  const listenerAdded = useRef(false);
-  const modalRegistered = useRef(false);
   const [isAnimationComplete, setAnimationComplete] = useState(false);
   const [triggerRefocusFlag, setTriggerRefocusFlag] = useState(false);
   const {
@@ -50,67 +48,12 @@ const Modal = ({
     };
   }, [allowScroll, enableBackgroundUI]);
   const closeModal = useCallback(ev => {
-    const isTopmost = ModalManager.isTopmost(ref.current);
-
-    if (onCancel && !disableClose && !disableEscKey && Events.isEscKey(ev) && isTopmost) {
+    if (onCancel && !disableClose && !disableEscKey && Events.isEscKey(ev)) {
       ev.stopImmediatePropagation();
       onCancel(ev);
     }
   }, [disableClose, disableEscKey, onCancel]);
-  const addListener = useCallback(() => {
-    /* istanbul ignore else */
-    if (!listenerAdded.current) {
-      document.addEventListener("keyup", closeModal);
-      listenerAdded.current = true;
-    }
-  }, [closeModal]);
-  const removeListener = useCallback(() => {
-    if (listenerAdded.current) {
-      document.removeEventListener("keyup", closeModal);
-      listenerAdded.current = false;
-    }
-  }, [closeModal]);
-  useEffect(() => {
-    if (open) {
-      addListener();
-    }
-
-    if (!open) {
-      removeListener();
-    }
-  }, [addListener, open, removeListener]);
-  useEffect(() => {
-    return () => {
-      removeListener();
-    };
-  }, [removeListener]);
-  const registerModal = useCallback(() => {
-    /* istanbul ignore else */
-    if (!modalRegistered.current) {
-      ModalManager.addModal(ref.current, setTriggerRefocusFlag);
-      modalRegistered.current = true;
-    }
-  }, []);
-  const unregisterModal = useCallback(() => {
-    if (modalRegistered.current) {
-      ModalManager.removeModal(ref.current);
-      modalRegistered.current = false;
-    }
-  }, []);
-  useEffect(() => {
-    if (open) {
-      registerModal();
-    }
-
-    if (!open) {
-      unregisterModal();
-    }
-  }, [open, registerModal, unregisterModal]);
-  useEffect(() => {
-    return () => {
-      unregisterModal();
-    };
-  }, [unregisterModal]);
+  useModalManager(open, closeModal, ref, setTriggerRefocusFlag);
   let background;
   let content;
 

package/esm/components/select/select.style.js

@@ -18,7 +18,7 @@ const StyledSelect = styled.div`
     position: relative;
 
     ${StyledInput} {
-      cursor: "text";
+      cursor: text;
 
       ${disabled && css`
         cursor: not-allowed;

package/esm/components/toast/toast.component.js

@@ -8,9 +8,9 @@ import Icon from "../icon";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { ToastStyle, TypeIcon, ToastContentStyle, ToastWrapper, StyledPortal } from "./toast.style";
 import IconButton from "../icon-button";
-import ModalManager from "../modal/__internal__/modal-manager";
 import Events from "../../__internal__/utils/helpers/events";
 import useLocale from "../../hooks/__internal__/useLocale";
+import useModalManager from "../../hooks/__internal__/useModalManager";
 import Logger from "../../__internal__/utils/logger";
 let deprecatedWarnTriggered = false;
 
@@ -42,22 +42,12 @@ const Toast = ({
     return classNames(className);
   }, [className]);
   const dismissToast = useCallback(ev => {
-    const isTopmost = ModalManager.isTopmost(toastRef.current);
-
-    if (onDismiss && Events.isEscKey(ev) && isTopmost) {
+    if (onDismiss && Events.isEscKey(ev)) {
       ev.stopImmediatePropagation();
       onDismiss(ev);
     }
   }, [onDismiss]);
-  useEffect(() => {
-    const currentElement = toastRef.current;
-    ModalManager.addModal(currentElement);
-    document.addEventListener("keyup", dismissToast);
-    return () => {
-      ModalManager.removeModal(currentElement);
-      document.removeEventListener("keyup", dismissToast);
-    };
-  }, [dismissToast]);
+  useModalManager(open, dismissToast, toastRef);
   useEffect(() => {
     clearTimeout(timer.current);
 

package/esm/hooks/__internal__/useModalManager/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useModalManager";

package/esm/hooks/__internal__/useModalManager/index.js

@@ -0,0 +1 @@
+export { default } from "./useModalManager";

package/esm/hooks/__internal__/useModalManager/useModalManager.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const useModalManager: (open: boolean, closeModal: (e: KeyboardEvent) => void, modalRef: React.RefObject<HTMLElement>, setTriggerRefocusFlag?: ((flag: boolean) => void) | undefined) => void;
+export default useModalManager;

package/esm/hooks/__internal__/useModalManager/useModalManager.js

@@ -0,0 +1,66 @@
+import { useEffect, useRef, useCallback } from "react";
+import ModalManager from "../../../components/modal/__internal__/modal-manager";
+
+const useModalManager = (open, closeModal, modalRef, setTriggerRefocusFlag) => {
+  const listenerAdded = useRef(false);
+  const modalRegistered = useRef(false);
+  const handleClose = useCallback(ev => {
+    const isTopmost = ModalManager.isTopmost(modalRef.current);
+
+    if (isTopmost) {
+      closeModal(ev);
+    }
+  }, [modalRef, closeModal]);
+  const addListener = useCallback(() => {
+    /* istanbul ignore else */
+    if (!listenerAdded.current) {
+      document.addEventListener("keyup", handleClose);
+      listenerAdded.current = true;
+    }
+  }, [handleClose]);
+  const removeListener = useCallback(() => {
+    if (listenerAdded.current) {
+      document.removeEventListener("keyup", handleClose);
+      listenerAdded.current = false;
+    }
+  }, [handleClose]);
+  useEffect(() => {
+    if (open) {
+      addListener();
+    } else {
+      removeListener();
+    }
+  }, [addListener, open, removeListener]);
+  useEffect(() => {
+    return () => {
+      removeListener();
+    };
+  }, [removeListener]);
+  const registerModal = useCallback(() => {
+    /* istanbul ignore else */
+    if (!modalRegistered.current) {
+      ModalManager.addModal(modalRef.current, setTriggerRefocusFlag);
+      modalRegistered.current = true;
+    }
+  }, [modalRef, setTriggerRefocusFlag]);
+  const unregisterModal = useCallback(() => {
+    if (modalRegistered.current) {
+      ModalManager.removeModal(modalRef.current);
+      modalRegistered.current = false;
+    }
+  }, [modalRef]);
+  useEffect(() => {
+    if (open) {
+      registerModal();
+    } else {
+      unregisterModal();
+    }
+  }, [open, registerModal, unregisterModal]);
+  useEffect(() => {
+    return () => {
+      unregisterModal();
+    };
+  }, [unregisterModal]);
+};
+
+export default useModalManager;

package/lib/__internal__/popover/popover.component.js

@@ -36,15 +36,14 @@ const Popover = ({
   modifiers,
   disableBackgroundUI
 }) => {
+  var _reference$current;
+
   const elementDOM = (0, _react.useRef)();
   const {
     isInModal
   } = (0, _react.useContext)(_modal.ModalContext);
-  let mountNode = document.body;
-
-  if (isInModal && reference.current) {
-    mountNode = reference.current.closest("[role='dialog']");
-  }
+  const candidateNode = (_reference$current = reference.current) === null || _reference$current === void 0 ? void 0 : _reference$current.closest("[role='dialog']");
+  const mountNode = isInModal && candidateNode ? candidateNode : document.body;
 
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");

package/lib/__spec_helper__/expect.d.ts

@@ -1 +1,8 @@
-export {};
+import "jest-styled-components";
+declare global {
+    namespace jest {
+        interface Matchers<R> {
+            toBeFocused(): R;
+        }
+    }
+}

package/lib/__spec_helper__/expect.js

@@ -4,9 +4,7 @@ require("jest-styled-components");
 
 var _enzyme = require("enzyme");
 
-const {
-  diff
-} = require("jest-matcher-utils");
+var _jestMatcherUtils = require("jest-matcher-utils");
 
 expect.extend({
   toBeFocused(received) {
@@ -19,7 +17,7 @@ expect.extend({
     const hint = this.utils.matcherHint("toBeFocused", "DOMNode", "", options);
 
     const positive = () => {
-      const diffString = diff(expected, DOMNode, {
+      const diffString = (0, _jestMatcherUtils.diff)(expected, DOMNode, {
         expand: this.expand
       });
       return `${hint}\n\n${// eslint-disable-next-line multiline-ternary

package/lib/__spec_helper__/test-utils.d.ts

@@ -1,34 +1,72 @@
-export function getDefaultValue(value: any): any;
-export function assertStyleMatch(styleSpec: any, component: any, opts: any): void;
-export function toCSSCase(str: any): any;
-export function hoverList(wrapper: any): (item: any) => void;
-export function selectedItemOf(wrapper: any): any;
-export function childrenFrom(node: any): any;
-export function makeArrayKeys(n: any): number[];
-export const keyboard: {};
-export function assertKeyboardTraversal({ num, nonSelectables, }: {
-    num: any;
-    nonSelectables?: any[] | undefined;
-}): (wrapper: any) => void;
-export function assertHoverTraversal({ num, nonSelectables, }: {
-    num: any;
-    nonSelectables?: any[] | undefined;
-}): (wrapper: any) => void;
-export function listFrom(wrapper: any): any;
-export function click(wrapper: any): any;
-export namespace simulate {
-    export { keydown };
-}
-export const carbonThemesJestTable: (string | Partial<import("style/themes/base/base-theme.config").ThemeObject> | undefined)[][];
+/// <reference types="react" />
+import { ReactWrapper, ShallowWrapper } from "enzyme";
+import { LayoutProps, FlexboxProps, BackgroundProps } from "styled-system";
+import { ReactTestRendererJSON } from "react-test-renderer";
 import { mockMatchMedia } from "./mock-match-media";
-export function testStyledSystemSpacing(component: any, defaults: any, styleContainer: any, assertOpts: any): void;
-export function testStyledSystemMargin(component: any, defaults: any, styleContainer: any, assertOpts: any): void;
-export function testStyledSystemPadding(component: any, defaults: any, styleContainer: any, assertOpts: any): void;
-export function testStyledSystemColor(component: any, styleContainer: any): void;
-export function testStyledSystemWidth(component: any, styleContainer: any): void;
-export function testStyledSystemLayout(component: any, styleContainer: any): void;
-export function testStyledSystemFlexBox(component: any, styleContainer: any): void;
-export function testStyledSystemBackground(component: any, styleContainer: any): void;
-export function expectConsoleOutput(message: any, type?: string): () => void;
-declare const keydown: {};
-export { mockMatchMedia };
+declare const toCSSCase: (str: string) => string;
+declare const assertStyleMatch: <Props>(styleSpec: {
+    [key: string]: string | number | undefined;
+}, component: ReactWrapper<Props, {}, import("react").Component<{}, {}, any>> | ShallowWrapper<Props, {}, import("react").Component<{}, {}, any>> | ReactTestRendererJSON | ReactTestRendererJSON[] | null, opts?: jest.Options | undefined) => void;
+declare const makeArrayKeys: (n: number) => number[];
+declare const keyMap: {
+    readonly UpArrow: 38;
+    readonly DownArrow: 40;
+    readonly RightArrow: 39;
+    readonly LeftArrow: 37;
+    readonly Enter: 13;
+    readonly Tab: 9;
+    readonly Space: 32;
+    readonly Escape: 27;
+    readonly End: 35;
+    readonly Home: 36;
+    readonly D: 68;
+    readonly E: 69;
+    readonly P: 80;
+    readonly Z: 90;
+    readonly 1: 49;
+};
+declare type Keys = keyof typeof keyMap;
+declare type MappedKeys = `press${Keys}`;
+declare type KeyboardAccumulatorType = Record<MappedKeys, () => void>;
+declare const keyboard: KeyboardAccumulatorType;
+declare type KeydownAccumulatorType = Record<MappedKeys, (wrapper: ReactWrapper<any>, options?: {
+    shiftKey: boolean;
+}) => void>;
+declare const simulate: {
+    keydown: KeydownAccumulatorType;
+};
+declare const listFrom: (wrapper: ReactWrapper) => ReactWrapper<import("enzyme").HTMLAttributes, any, import("react").Component<{}, {}, any>>;
+declare const childrenFrom: (node: ReactWrapper) => ReactWrapper<any, any, import("react").Component<{}, {}, any>>;
+declare const hoverList: (wrapper: ReactWrapper) => (item: number) => void;
+declare const click: (wrapper: ReactWrapper) => ReactWrapper<{}, {}, import("react").Component<{}, {}, any>>;
+declare const selectedItemOf: (wrapper: ReactWrapper) => number;
+declare const assertKeyboardTraversal: ({ num, nonSelectables, }: {
+    num: number;
+    nonSelectables?: number[] | undefined;
+}) => (wrapper: ReactWrapper) => void;
+declare const assertHoverTraversal: ({ num, nonSelectables, }: {
+    num: number;
+    nonSelectables?: number[] | undefined;
+}) => (wrapper: ReactWrapper) => void;
+declare const carbonThemesJestTable: (string | Partial<import("style/themes/base/base-theme.config").ThemeObject> | undefined)[][];
+declare const marginProps: readonly [readonly ["m", "margin"], readonly ["ml", "marginLeft"], readonly ["mr", "marginRight"], readonly ["mt", "marginTop"], readonly ["mb", "marginBottom"], readonly ["mx", "marginLeft"], readonly ["mx", "marginRight"], readonly ["my", "marginTop"], readonly ["my", "marginBottom"]];
+declare type MarginProps = {
+    [K in typeof marginProps[number][0]]?: string | number;
+};
+declare const paddingProps: readonly [readonly ["p", "padding"], readonly ["pl", "paddingLeft"], readonly ["pr", "paddingRight"], readonly ["pt", "paddingTop"], readonly ["pb", "paddingBottom"], readonly ["px", "paddingLeft"], readonly ["px", "paddingRight"], readonly ["py", "paddingTop"], readonly ["py", "paddingBottom"]];
+declare type PaddingProps = {
+    [K in typeof paddingProps[number][0]]?: string | number;
+};
+export declare const getDefaultValue: (value?: string | number | undefined) => string | number | undefined;
+declare const testStyledSystemMargin: (component: (spacingProps?: MarginProps | undefined) => JSX.Element, defaults?: MarginProps | undefined, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined, assertOpts?: jest.Options | undefined) => void;
+declare const testStyledSystemPadding: (component: (spacingProps?: PaddingProps | undefined) => JSX.Element, defaults?: PaddingProps | undefined, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined, assertOpts?: jest.Options | undefined) => void;
+declare const testStyledSystemSpacing: (component: (spacingProps?: MarginProps | PaddingProps | undefined) => JSX.Element, defaults?: MarginProps | PaddingProps | undefined, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined, assertOpts?: jest.Options | undefined) => void;
+declare const testStyledSystemColor: (component: (colorProperties?: any) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => void) | undefined) => void;
+declare const testStyledSystemWidth: (component: (widthProperties?: {
+    width: string;
+} | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemLayout: (component: (layoutProperties?: LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemFlexBox: (component: (flexboxProperties?: FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const testStyledSystemBackground: (component: (backgroundProperties?: BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | undefined) => JSX.Element, styleContainer?: ((wrapper: ReactWrapper) => ReactWrapper) | undefined) => void;
+declare const expectConsoleOutput: (message: string, type?: "warn" | "error") => () => void;
+export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, expectConsoleOutput, };