carbon-react 106.6.1 → 106.6.4

package/esm/__spec_helper__/expect.d.ts

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

package/esm/__spec_helper__/expect.js

@@ -1,10 +1,6 @@
 import "jest-styled-components";
 import { ReactWrapper } from "enzyme";
-
-const {
-  diff
-} = require("jest-matcher-utils");
-
+import { diff } from "jest-matcher-utils";
 expect.extend({
   toBeFocused(received) {
     const expected = document.activeElement;

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

package/esm/__spec_helper__/test-utils.js

@@ -1,3 +1,8 @@
+/* eslint-disable jest/no-conditional-expect */
+
+/* eslint-disable jest/no-identical-title */
+
+/* eslint-disable jest/no-export */
 import { mount } from "enzyme";
 import { sprintf } from "sprintf-js";
 import { space } from "style/themes/base/base-theme.config";
@@ -28,27 +33,24 @@ const dispatchKeyPress = code => {
 };
 
 const keyMap = {
-  UpArrow: "38",
-  DownArrow: "40",
-  RightArrow: "39",
-  LeftArrow: "37",
-  Enter: "13",
-  Tab: "9",
-  Space: "32",
-  Escape: "27",
-  End: "35",
-  Home: "36",
-  D: "68",
-  E: "69",
-  P: "80",
-  Z: "90",
-  1: "49"
+  UpArrow: 38,
+  DownArrow: 40,
+  RightArrow: 39,
+  LeftArrow: 37,
+  Enter: 13,
+  Tab: 9,
+  Space: 32,
+  Escape: 27,
+  End: 35,
+  Home: 36,
+  D: 68,
+  E: 69,
+  P: 80,
+  Z: 90,
+  1: 49
 };
-
-const repeat = action => (n = 1) => makeArrayKeys(n).forEach(() => action());
-
 const keyboard = Object.keys(keyMap).reduce((acc, key) => {
-  acc[`press${key}`] = () => repeat(dispatchKeyPress(keyMap[key]));
+  acc[`press${key}`] = () => dispatchKeyPress(keyMap[key]);
 
   return acc;
 }, {}); // Build an object of Enzyme simulate helpers
@@ -64,7 +66,7 @@ const keydown = Object.keys(keyMap).reduce((acc, key) => {
     target.simulate("keydown", {
       shiftKey,
       key,
-      which: parseInt(keyMap[key], 0)
+      which: keyMap[key]
     });
   };
 
@@ -122,18 +124,19 @@ const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "
 const backgroundProps = [["background", "background", "lightblue url('foo.jpg') no-repeat fixed center"], ["backgroundImage", "background-image", "url(foo.jpg)"], ["backgroundSize", "background-size", "center"], ["backgroundRepeat", "background-repeat", "no-repeat"]];
 export const getDefaultValue = value => {
   const spaceArrayLength = space.length - 1;
+  if (value === undefined) return value;
   const parsedValue = +value;
 
-  if (typeof value === "string" && value > spaceArrayLength) {
+  if (typeof value === "string" && parsedValue > spaceArrayLength) {
     return `${value}px`;
   }
 
   if (parsedValue <= spaceArrayLength) {
-    return space[value];
+    return space[parsedValue];
   }
 
   if (parsedValue > spaceArrayLength) {
-    return `${value * 8}px`;
+    return `${parsedValue * 8}px`;
   }
 
   return value;
@@ -152,18 +155,18 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
       let marginBottom;
 
       if (defaults) {
-        margin = getDefaultValue(defaults.m || undefined);
-        marginLeft = getDefaultValue(defaults.ml || defaults.mx || undefined);
-        marginRight = getDefaultValue(defaults.mr || defaults.mx || undefined);
-        marginTop = getDefaultValue(defaults.mt || defaults.my || undefined);
-        marginBottom = getDefaultValue(defaults.mb || defaults.my || undefined);
-        expect(assertStyleMatch({
+        margin = getDefaultValue(defaults.m);
+        marginLeft = getDefaultValue(defaults.ml || defaults.mx);
+        marginRight = getDefaultValue(defaults.mr || defaults.mx);
+        marginTop = getDefaultValue(defaults.mt || defaults.my);
+        marginBottom = getDefaultValue(defaults.mb || defaults.my);
+        assertStyleMatch({
           margin,
           marginLeft,
           marginRight,
           marginTop,
           marginBottom
-        }, StyleElement, assertOpts));
+        }, StyleElement, assertOpts);
       } else {
         expect(StyleElement).not.toHaveStyleRule("marginLeft");
         expect(StyleElement).not.toHaveStyleRule("marginRight");
@@ -175,15 +178,14 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
   });
   describe.each(marginProps)('when a custom spacing is specified using the "%s" styled system props', (styledSystemProp, propName) => {
     it(`then that ${propName} should have been set correctly`, () => {
-      let wrapper = mount(component());
       const props = {
         [styledSystemProp]: 2
       };
-      wrapper = mount(component({ ...props
+      const wrapper = mount(component({ ...props
       }));
-      expect(assertStyleMatch({
+      assertStyleMatch({
         [propName]: "var(--spacing200)"
-      }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
+      }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts);
     });
   });
 };
@@ -201,18 +203,18 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
       let paddingBottom;
 
       if (defaults) {
-        padding = getDefaultValue(defaults.p || undefined);
-        paddingLeft = getDefaultValue(defaults.pl || defaults.px || undefined);
-        paddingRight = getDefaultValue(defaults.pr || defaults.px || undefined);
-        paddingTop = getDefaultValue(defaults.pt || defaults.py || undefined);
-        paddingBottom = getDefaultValue(defaults.pb || defaults.py || undefined);
-        expect(assertStyleMatch({
+        padding = getDefaultValue(defaults.p);
+        paddingLeft = getDefaultValue(defaults.pl || defaults.px);
+        paddingRight = getDefaultValue(defaults.pr || defaults.px);
+        paddingTop = getDefaultValue(defaults.pt || defaults.py);
+        paddingBottom = getDefaultValue(defaults.pb || defaults.py);
+        assertStyleMatch({
           padding,
           paddingLeft,
           paddingRight,
           paddingTop,
           paddingBottom
-        }, StyleElement, assertOpts));
+        }, StyleElement, assertOpts);
       } else {
         expect(StyleElement).not.toHaveStyleRule("paddingLeft");
         expect(StyleElement).not.toHaveStyleRule("paddingRight");
@@ -224,15 +226,14 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
   });
   describe.each(paddingProps)('when a custom spacing is specified using the "%s" styled system props', (styledSystemProp, propName) => {
     it(`then that ${propName} should have been set correctly`, () => {
-      let wrapper = mount(component());
       const props = {
         [styledSystemProp]: 2
       };
-      wrapper = mount(component({ ...props
+      const wrapper = mount(component({ ...props
       }));
-      expect(assertStyleMatch({
+      assertStyleMatch({
         [propName]: "var(--spacing200)"
-      }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
+      }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts);
     });
   });
 };
@@ -245,14 +246,14 @@ const testStyledSystemSpacing = (component, defaults, styleContainer, assertOpts
 const testStyledSystemColor = (component, styleContainer) => {
   describe.each(colorProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {
-      let wrapper = mount(component());
       const props = {
         [styledSystemProp]: value
       };
-      wrapper = mount(component({ ...props
-      })); // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
+      const wrapper = mount(component({ ...props
+      }));
+      const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper; // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
 
-      expect(wrapper).toHaveStyleRule(propName, value, styleContainer ? styleContainer(wrapper) : wrapper);
+      expect(StyleElement).toHaveStyleRule(propName, value);
     });
   });
 };
@@ -261,13 +262,13 @@ const testStyledSystemWidth = (component, styleContainer) => {
   describe("when a width prop is specified using styled system props", () => {
     it("then width should have been set correctly", () => {
       const [styledSystemProp, propName, value] = widthProps;
-      let wrapper = mount(component());
       const props = {
         [styledSystemProp]: value
       };
-      wrapper = mount(component({ ...props
+      const wrapper = mount(component({ ...props
       }));
-      expect(wrapper).toHaveStyleRule(propName, value, styleContainer ? styleContainer(wrapper) : wrapper);
+      const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+      expect(StyleElement).toHaveStyleRule(propName, value);
     });
   });
 };
@@ -275,14 +276,14 @@ const testStyledSystemWidth = (component, styleContainer) => {
 const testStyledSystemLayout = (component, styleContainer) => {
   describe.each(layoutProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {
-      let wrapper = mount(component());
       const props = {
         [styledSystemProp]: value
       };
-      wrapper = mount(component({ ...props
-      })); // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
+      const wrapper = mount(component({ ...props
+      }));
+      const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper; // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
 
-      expect(wrapper).toHaveStyleRule(propName, value, styleContainer ? styleContainer(wrapper) : wrapper);
+      expect(StyleElement).toHaveStyleRule(propName, value);
     });
   });
 };
@@ -290,15 +291,13 @@ const testStyledSystemLayout = (component, styleContainer) => {
 const testStyledSystemFlexBox = (component, styleContainer) => {
   describe.each(flexBoxProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {
-      let wrapper = mount(component());
       const props = {
         [styledSystemProp]: value
       };
-      wrapper = mount(component({ ...props
-      }));
-      expect(assertStyleMatch({
+      const wrapper = mount(component(props));
+      assertStyleMatch({
         [propName]: value
-      }, styleContainer ? styleContainer(wrapper) : wrapper));
+      }, styleContainer ? styleContainer(wrapper) : wrapper);
     });
   });
 };
@@ -306,15 +305,14 @@ const testStyledSystemFlexBox = (component, styleContainer) => {
 const testStyledSystemBackground = (component, styleContainer) => {
   describe.each(backgroundProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {
-      let wrapper = mount(component());
       const props = {
         [styledSystemProp]: value
       };
-      wrapper = mount(component({ ...props
+      const wrapper = mount(component({ ...props
       }));
-      expect(assertStyleMatch({
+      assertStyleMatch({
         [styledSystemProp]: value
-      }, styleContainer ? styleContainer(wrapper) : wrapper));
+      }, styleContainer ? styleContainer(wrapper) : wrapper);
     });
   });
 }; // this util will catch that a console output occurred without polluting the output when running the unit tests

package/esm/components/action-popover/action-popover-context.d.ts

@@ -1,3 +1,8 @@
-export default ActionPopoverContext;
-declare const ActionPopoverContext: React.Context<{}>;
 import React from "react";
+declare type ActionPopoverContextType = {
+    setOpenPopover: (isOpen: boolean) => void;
+    focusButton: () => void;
+    isOpenPopover: boolean;
+};
+declare const ActionPopoverContext: React.Context<ActionPopoverContextType | null>;
+export default ActionPopoverContext;

package/esm/components/action-popover/action-popover-context.js

@@ -1,3 +1,3 @@
 import React from "react";
-const ActionPopoverContext = /*#__PURE__*/React.createContext({});
+const ActionPopoverContext = /*#__PURE__*/React.createContext(null);
 export default ActionPopoverContext;

package/esm/components/action-popover/action-popover-divider/action-popover-divider.component.d.ts

@@ -1,2 +1,2 @@
-export default ActionPopoverDivider;
 import { MenuItemDivider as ActionPopoverDivider } from "../action-popover.style";
+export default ActionPopoverDivider;

package/esm/components/action-popover/action-popover-item/action-popover-item.component.d.ts

@@ -1,42 +1,29 @@
-export default ActionPopoverItem;
-export function MenuItem({ children, icon, disabled, onClick: onClickProp, submenu, theme, placement, focusItem, download, href, horizontalAlignment, ...rest }: {
-    [x: string]: any;
-    children: any;
-    icon: any;
-    disabled?: boolean | undefined;
-    onClick: any;
-    submenu: any;
-    theme: any;
-    placement?: string | undefined;
-    focusItem: any;
-    download: any;
-    href: any;
-    horizontalAlignment: any;
-}): JSX.Element;
-export namespace MenuItem {
-    namespace propTypes {
-        const children: PropTypes.Validator<string>;
-        const disabled: PropTypes.Requireable<boolean>;
-        const icon: PropTypes.Requireable<string>;
-        const onClick: PropTypes.Requireable<(...args: any[]) => any>;
-        const download: PropTypes.Requireable<boolean>;
-        const href: PropTypes.Requireable<string>;
-        /** Submenu component for item */
-        function submenu(props: any, propName: any, componentName: any): Error | undefined;
-        /** Submenu component for item */
-        function submenu(props: any, propName: any, componentName: any): Error | undefined;
-        const placement: PropTypes.Requireable<string>;
-        const focusItem: PropTypes.Requireable<boolean>;
-        const horizontalAlignment: PropTypes.Requireable<string>;
-    }
-    const displayName: string;
-}
-declare const ActionPopoverItem: React.ForwardRefExoticComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: any;
-}>;
-import PropTypes from "prop-types";
 import React from "react";
+import { IconType } from "../../icon";
+export interface ActionPopoverItemProps {
+    /** The text label to display for this Item */
+    children: string;
+    /** Flag to indicate if item is disabled */
+    disabled?: boolean;
+    /** allows to provide download prop that works dependent with href */
+    download?: boolean;
+    /** allows to provide href prop */
+    href?: string;
+    /** The name of the icon to display next to the label */
+    icon?: IconType;
+    /** Callback to run when item is clicked */
+    onClick?: (ev: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>) => void;
+    /** Submenu component for item */
+    submenu?: React.ReactNode;
+    /** @ignore @private */
+    placement?: "top" | "bottom";
+    /** @ignore @private */
+    focusItem?: boolean;
+    /** @ignore @private */
+    horizontalAlignment?: "left" | "right";
+}
+export declare const ActionPopoverItem: {
+    ({ children, icon, disabled, onClick: onClickProp, submenu, placement, focusItem, download, href, horizontalAlignment, ...rest }: ActionPopoverItemProps): JSX.Element;
+    displayName: string;
+};
+export default ActionPopoverItem;