carbon-react 104.34.1 → 104.37.0

package/esm/components/multi-action-button/multi-action-button.component.d.ts

@@ -0,0 +1,37 @@
+export default MultiActionButton;
+declare function MultiActionButton({ align, disabled, as, buttonType, size, children, text, subtext, ...rest }: {
+    [x: string]: any;
+    align?: string | undefined;
+    disabled: any;
+    as: any;
+    buttonType: any;
+    size: any;
+    children: any;
+    text: any;
+    subtext: any;
+}): JSX.Element;
+declare namespace MultiActionButton {
+    const propTypes: {
+        /** Button type: "primary" | "secondary" | "tertiary" */
+        buttonType: PropTypes.Requireable<string>;
+        /** The additional button to display. */
+        children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        /** Second text child, renders under main text, only when size is "large". */
+        subtext: PropTypes.Requireable<string>;
+        /** Customizes the appearance, can be set to 'primary', 'secondary' or 'transparent'. */
+        as: PropTypes.Requireable<string>;
+        /** The text to be displayed in the SplitButton. */
+        text: PropTypes.Validator<string>;
+        /** Gives the button a disabled state. */
+        disabled: PropTypes.Requireable<boolean>;
+        /** The size of the MultiActionButton. */
+        size: PropTypes.Requireable<string>;
+        /** A custom value for the data-element attribute. */
+        "data-element": PropTypes.Requireable<string>;
+        /** A custom value for the data-element attribute. */
+        "data-role": PropTypes.Requireable<string>;
+        /** Aligns the button's options */
+        align: PropTypes.Requireable<string>;
+    };
+}
+import PropTypes from "prop-types";

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -0,0 +1,222 @@
+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); }
+
+import React, { useCallback, useEffect, useState, useRef } from "react";
+import PropTypes from "prop-types";
+import styledSystemPropTypes from "@styled-system/prop-types";
+import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
+import Button, { ButtonWithForwardRef } from "../button";
+import Events from "../../__internal__/utils/helpers/events";
+import Popover from "../../__internal__/popover";
+import { filterStyledSystemMarginProps } from "../../style/utils";
+const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
+const MultiActionButton = ({
+  align = "left",
+  disabled,
+  as,
+  buttonType,
+  size,
+  children,
+  text,
+  subtext,
+  ...rest
+}) => {
+  const ref = useRef();
+  const buttonContainer = useRef();
+  const userInputType = "ontouchstart" in document.documentElement ? "touchstart" : "click";
+  const buttonChildren = React.Children.toArray(children);
+  const additionalButtons = useRef(buttonChildren.map(() => /*#__PURE__*/React.createRef()));
+  const listening = useRef(false);
+  const isMainButtonFocused = useRef(false);
+  const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
+  const [removeHandleClickOutside, setRemoveHandleClickOutside] = useState(false);
+  const [removeHandleKeyDown, setRemoveHandleKeyDown] = useState(false);
+  const [minWidth, setMinWidth] = useState(0);
+
+  const childrenWithProps = () => {
+    return buttonChildren.map((child, index) => {
+      const props = {
+        key: index.toString(),
+        role: "menuitem",
+        ref: additionalButtons.current[index],
+        tabIndex: -1
+      };
+
+      if (child.type === Button) {
+        return /*#__PURE__*/React.createElement(ButtonWithForwardRef, _extends({}, child.props, props));
+      }
+
+      return /*#__PURE__*/React.cloneElement(child, props);
+    });
+  };
+
+  const hideButtons = useCallback(() => {
+    if (isMainButtonFocused.current) return;
+    setShowAdditionalButtons(false);
+    setRemoveHandleClickOutside(true);
+    /* istanbul ignore else */
+
+    if (listening.current) {
+      setRemoveHandleKeyDown(true);
+      listening.current = false;
+    }
+  }, []);
+  const handleKeyDown = useCallback(ev => {
+    const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
+    let nextIndex = -1;
+
+    if (Events.isUpKey(ev)) {
+      nextIndex = currentIndex > 0 ? currentIndex - 1 : children.length - 1;
+      ev.preventDefault();
+    }
+
+    if (Events.isDownKey(ev)) {
+      nextIndex = currentIndex < children.length - 1 ? currentIndex + 1 : 0;
+      ev.preventDefault();
+    } else if (Events.isTabKey(ev)) {
+      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      setTimeout(hideButtons, 0);
+    }
+
+    if (nextIndex > -1) {
+      additionalButtons.current[nextIndex].current.focus();
+    }
+  }, [children.length, hideButtons]);
+  const handleClickOutside = useCallback(({
+    target
+  }) => {
+    if (!ref.current.contains(target) && buttonContainer.current && !buttonContainer.current.contains(target)) {
+      hideButtons(handleClickOutside, undefined);
+    }
+  }, [hideButtons]);
+
+  const showButtons = () => {
+    document.addEventListener(userInputType, handleClickOutside);
+    setShowAdditionalButtons(true);
+    setMinWidth(ref.current.getBoundingClientRect().width);
+    /* istanbul ignore else */
+
+    if (!listening.current) {
+      document.addEventListener("keydown", handleKeyDown);
+      listening.current = true;
+    }
+  };
+
+  const handleMainButtonKeyDown = ev => {
+    if (Events.isEnterKey(ev) || Events.isSpaceKey(ev)) {
+      additionalButtons.current[0].current.focus();
+    }
+  };
+
+  const focusMainButton = () => {
+    isMainButtonFocused.current = true;
+    showButtons();
+  };
+
+  const mainButtonProps = () => {
+    const opts = {
+      disabled,
+      displayed: showAdditionalButtons,
+      onTouchStart: showButtons,
+      onClick: rest.onClick,
+      onFocus: focusMainButton,
+      onBlur: () => {
+        isMainButtonFocused.current = false;
+      },
+      onKeyDown: handleMainButtonKeyDown,
+      buttonType: buttonType || as,
+      size,
+      subtext
+    };
+
+    if (!disabled) {
+      opts.onMouseEnter = showButtons;
+    }
+
+    return opts;
+  };
+
+  const renderAdditionalButtons = () => /*#__PURE__*/React.createElement(Popover, {
+    placement: "bottom-end",
+    reference: ref
+  }, /*#__PURE__*/React.createElement(StyledButtonChildrenContainer, {
+    role: "menu",
+    "aria-label": text,
+    "data-element": "additional-buttons",
+    align: align,
+    minWidth: minWidth,
+    ref: buttonContainer
+  }, childrenWithProps()));
+
+  useEffect(() => {
+    if (removeHandleClickOutside) {
+      setRemoveHandleClickOutside(false);
+      document.removeEventListener(userInputType, handleClickOutside);
+    }
+
+    if (removeHandleKeyDown) {
+      setRemoveHandleKeyDown(false);
+      document.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [handleClickOutside, handleKeyDown, removeHandleClickOutside, removeHandleKeyDown, userInputType]);
+  useEffect(() => {
+    return () => {
+      document.removeEventListener(userInputType, handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleClickOutside, handleKeyDown, userInputType]);
+  return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
+    "aria-haspopup": "true",
+    onMouseLeave: hideButtons,
+    ref: ref,
+    "data-component": "multi-action-button",
+    "data-element": rest["data-element"],
+    "data-role": rest["data-role"],
+    align: align,
+    displayed: showAdditionalButtons
+  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Button, _extends({
+    "aria-haspopup": "true",
+    "aria-expanded": showAdditionalButtons,
+    "aria-label": "Show more",
+    "data-element": "toggle-button",
+    key: "toggle-button",
+    onKeyDown: handleMainButtonKeyDown
+  }, mainButtonProps(), {
+    iconPosition: "after",
+    iconType: "dropdown"
+  }), text), showAdditionalButtons && renderAdditionalButtons());
+};
+
+MultiActionButton.propTypes = { ...marginPropTypes,
+
+  /** Button type: "primary" | "secondary" | "tertiary" */
+  buttonType: PropTypes.oneOf(["primary", "secondary", "tertiary"]),
+
+  /** The additional button to display. */
+  children: PropTypes.node.isRequired,
+
+  /** Second text child, renders under main text, only when size is "large". */
+  subtext: PropTypes.string,
+
+  /** Customizes the appearance, can be set to 'primary', 'secondary' or 'transparent'. */
+  as: PropTypes.string,
+
+  /** The text to be displayed in the SplitButton. */
+  text: PropTypes.string.isRequired,
+
+  /** Gives the button a disabled state. */
+  disabled: PropTypes.bool,
+
+  /** The size of the MultiActionButton. */
+  size: PropTypes.oneOf(["small", "medium", "large"]),
+
+  /** A custom value for the data-element attribute. */
+  "data-element": PropTypes.string,
+
+  /** A custom value for the data-element attribute. */
+  "data-role": PropTypes.string,
+
+  /** Aligns the button's options */
+  align: PropTypes.oneOf(["left", "right"])
+};
+export default MultiActionButton;

package/esm/components/multi-action-button/multi-action-button.config.d.ts

@@ -0,0 +1,3 @@
+export const MULTI_ACTION_BUTTON_ALIGNMENTS: string[];
+export const MULTI_ACTION_BUTTON_SIZES: string[];
+export const MULTI_ACTION_BUTTON_THEMES: string[];

package/esm/components/multi-action-button/multi-action-button.config.js

@@ -0,0 +1,3 @@
+export const MULTI_ACTION_BUTTON_ALIGNMENTS = ["left", "right"];
+export const MULTI_ACTION_BUTTON_SIZES = ["small", "medium", "large"];
+export const MULTI_ACTION_BUTTON_THEMES = ["primary", "secondary", "tertiary"];

package/esm/components/multi-action-button/multi-action-button.d.ts

@@ -0,0 +1,8 @@
+import SplitButton from "../split-button";
+
+declare class MultiActionButton extends SplitButton {
+  /** Button type: "primary" | "secondary" | "tertiary" */
+  buttonType?: "primary" | "secondary" | "tertiary";
+}
+
+export default MultiActionButton;

package/esm/components/multi-action-button/multi-action-button.style.d.ts

@@ -0,0 +1,2 @@
+export const StyledButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledMultiActionButton: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/multi-action-button/multi-action-button.style.js

@@ -0,0 +1,91 @@
+import styled, { css } from "styled-components";
+import { margin } from "styled-system";
+import StyledButton from "../button/button.style";
+import baseTheme from "../../style/themes/base";
+import StyledIcon from "../icon/icon.style";
+const StyledMultiActionButton = styled.div`
+  ${margin}
+
+  display: inline-block;
+  position: relative;
+
+  & > ${StyledButton} {
+    margin: 0;
+
+    ${StyledIcon} {
+      margin-left: 0;
+      left: 8px;
+    }
+
+    &:focus {
+      border: 3px solid var(--colorsSemanticFocus500);
+      outline: none;
+      margin: -1px;
+    }
+
+    ${({
+  displayed
+}) => displayed && css`
+        background-color: var(--colorsActionMajor700);
+        border-color: var(--colorsActionMajor700);
+
+        &,
+        ${StyledIcon} {
+          color: var(--colorsActionMajorYang100);
+        }
+
+        &:focus {
+          border-color: var(--colorsSemanticFocus500);
+          margin: 0 -1px;
+        }
+      `}
+  }
+`;
+const StyledButtonChildrenContainer = styled.div`
+  ${({
+  theme,
+  align
+}) => css`
+    background-color: var(--colorsActionMajorYang100);
+    min-width: ${({
+  minWidth
+}) => minWidth}px;
+    white-space: nowrap;
+    z-index: ${theme.zIndex.popover};
+    box-shadow: var(--boxShadow100);
+
+    ${StyledIcon} {
+      margin-left: 0;
+      left: 8px;
+    }
+
+    ${StyledButton} {
+      border: 1px solid var(--colorsActionMajorTransparent);
+      color: var(--colorsActionMajor500);
+      display: block;
+      margin-left: 0;
+      min-width: 100%;
+      text-align: ${align};
+      z-index: ${theme.zIndex.overlay};
+
+      &:focus,
+      &:hover {
+        background-color: var(--colorsActionMajor600);
+        color: var(--colorsActionMajorYang100);
+      }
+
+      & + & {
+        margin-top: 3px;
+      }
+    }
+  `}
+`;
+StyledButtonChildrenContainer.defaultProps = {
+  theme: baseTheme
+};
+StyledMultiActionButton.defaultProps = {
+  theme: baseTheme,
+  size: "medium",
+  legacyColorVariant: "blue"
+};
+export { StyledButtonChildrenContainer, StyledMultiActionButton };

package/esm/components/multi-step-wizard/__spec__.d.ts

@@ -0,0 +1 @@
+export {};

package/esm/components/multi-step-wizard/__spec__.js

@@ -0,0 +1,191 @@
+import React from "react";
+import TestUtils from "react-dom/test-utils";
+import { shallow } from "enzyme";
+import MultiStepWizard from "./multi-step-wizard";
+import MultiActionButton from "./../multi-action-button";
+import Button from "./../button";
+import { elementsTagTest, rootTagTest } from "../../__internal__/utils/helpers/tags/tags-specs";
+describe("MultiStepWizard", () => {
+  let instance,
+      spySubmitHandler = jasmine.createSpy("submitHandler");
+  beforeEach(() => {
+    instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(MultiStepWizard, {
+      steps: [/*#__PURE__*/React.createElement("div", null, "Step 1"), /*#__PURE__*/React.createElement("div", null, "Step 2")],
+      onSubmit: spySubmitHandler
+    }));
+  });
+  describe("lifecycle", () => {
+    describe("componentWillMount", () => {
+      it("sets the states", () => {
+        spyOn(instance, "validateStepProps").and.returnValue({
+          currentStep: 1,
+          completed: false
+        });
+        expect(instance.state.currentStep).toEqual(1);
+        expect(instance.state.completed).toEqual(false);
+      });
+    });
+    describe("componentWillReceiveProps", () => {
+      it("sets the states", () => {
+        spyOn(instance, "validateStepProps").and.returnValue({
+          currentStep: 3,
+          completed: true
+        });
+        instance.UNSAFE_componentWillReceiveProps({});
+        expect(instance.state.currentStep).toEqual(3);
+        expect(instance.state.completed).toEqual(true);
+      });
+    });
+  });
+  describe("initialize", () => {
+    it("sets current step", () => {
+      expect(instance.state.currentStep).toBeTruthy();
+    });
+    it("sets completed to false", () => {
+      expect(instance.state.completed).toBeFalsy();
+    });
+  });
+  describe("totalSteps", () => {
+    it("returns the total number of steps", () => {
+      expect(instance.totalSteps).toEqual(2);
+    });
+  });
+  describe("validateStepProps", () => {
+    describe("when the completed prop equals to true", () => {
+      it("returns the valid props", () => {
+        let props = instance.validateStepProps({
+          completed: true,
+          steps: [1, 2, 3]
+        });
+        expect(props.currentStep).toEqual(3);
+        expect(props.completed).toEqual(true);
+      });
+    });
+    describe("when the currentStep prop is not number", () => {
+      it("returns the valid props", () => {
+        let props = instance.validateStepProps({
+          currentStep: "test",
+          steps: [1, 2, 3]
+        });
+        expect(props.currentStep).toEqual(1);
+        expect(props.completed).toEqual(false);
+      });
+    });
+    describe("when the currentStep prop is less than 1", () => {
+      it("returns the valid props", () => {
+        let props = instance.validateStepProps({
+          currentStep: 0,
+          steps: [1, 2, 3]
+        });
+        expect(props.currentStep).toEqual(1);
+        expect(props.completed).toEqual(false);
+      });
+    });
+    describe("when the currentStep prop is larger than the total of steps", () => {
+      it("returns the valid props", () => {
+        let props = instance.validateStepProps({
+          currentStep: 4,
+          steps: [1, 2, 3]
+        });
+        expect(props.currentStep).toEqual(1);
+        expect(props.completed).toEqual(false);
+      });
+    });
+    describe("when the currentStep prop is valid", () => {
+      it("returns the valid props", () => {
+        let props = instance.validateStepProps({
+          currentStep: 2,
+          steps: [1, 2, 3]
+        });
+        expect(props.currentStep).toEqual(2);
+        expect(props.completed).toEqual(false);
+      });
+    });
+  });
+  describe("next", () => {
+    beforeEach(() => {
+      spyOn(instance, "setState").and.callThrough();
+    });
+    describe("when current step is less than the total of steps", () => {
+      it("moves the step forward", () => {
+        instance.next();
+        expect(instance.state.currentStep).toEqual(2);
+      });
+    });
+    describe("when current step is not less than the total of steps", () => {
+      it("does nothing", () => {
+        instance.state.currentStep = 3;
+        instance.next();
+        expect(instance.setState).not.toHaveBeenCalled();
+        expect(instance.state.currentStep).toEqual(3);
+      });
+    });
+  });
+  describe("back", () => {
+    beforeEach(() => {
+      spyOn(instance, "setState").and.callThrough();
+    });
+    describe("when current step is larger than 1", () => {
+      it("moves the step backward", () => {
+        instance.state.currentStep = 2;
+        instance.back();
+        expect(instance.state.completed).toEqual(false);
+        expect(instance.state.currentStep).toEqual(1);
+      });
+    });
+    describe("when current step is not larger than 1", () => {
+      it("does nothing", () => {
+        instance.back();
+        expect(instance.setState).not.toHaveBeenCalled();
+        expect(instance.state.currentStep).toEqual(1);
+      });
+    });
+  });
+  describe("complete", () => {
+    beforeEach(() => {
+      spyOn(instance, "setState").and.callThrough();
+    });
+    describe("when current step is the last step", () => {
+      it("completes the wizard", () => {
+        instance.state.currentStep = 2;
+        instance.complete();
+        expect(instance.setState).toHaveBeenCalledWith({
+          completed: true
+        });
+        expect(instance.state.completed).toBeTruthy();
+      });
+    });
+    describe("when current step is not the last step", () => {
+      it("does nothing", () => {
+        instance.complete();
+        expect(instance.setState).not.toHaveBeenCalled();
+        expect(instance.state.completed).toBeFalsy();
+      });
+    });
+  });
+  describe("wizardStepsHTML", () => {
+    describe("when passing the steps prop", () => {
+      it("returns step components", () => {
+        let steps = instance.wizardStepsHTML,
+            step1 = steps[0],
+            step2 = steps[1];
+        expect(steps.length).toEqual(2);
+        expect(step1.props.children.props.children).toEqual("Step 1");
+        expect(step1.props.stepNumber).toEqual(1);
+        expect(step1.props.defaultButton).toEqual(true);
+        expect(step2.props.children.props.children).toEqual("Step 2");
+        expect(step2.props.stepNumber).toEqual(2);
+        expect(step2.props.defaultButton).toEqual(true);
+      });
+    });
+    describe("when not passing the steps prop", () => {
+      it("does not returns step components", () => {
+        instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(MultiStepWizard, {
+          steps: [],
+          onSubmit: spySubmitHandler
+        }));
+        expect(instance.wizardStepsHTML).toEqual([]);
+      });
+    });
+  });
+});

package/esm/components/multi-step-wizard/multi-step-wizard.d.ts

@@ -0,0 +1,87 @@
+export default MultiStepWizard;
+declare class MultiStepWizard extends React.Component<any, any, any> {
+    constructor(props: any);
+    /**
+     * Returns wizard object to child components.
+     *
+     * @method getChildContext
+     * @return {void}
+     */
+    getChildContext(): void;
+    /**
+     * Validate step props
+     *
+     * @method validateStepProps
+     * @return {Object}
+     */
+    validateStepProps: (stepProps: any) => Object;
+    /**
+     * Get total number of steps
+     *
+     * @method totalSteps
+     * @return {Number}
+     */
+    get totalSteps(): number;
+    /**
+     * Moves to the next step.
+     *
+     * @method next
+     * @return {void}
+     */
+    next: () => void;
+    /**
+     * Back to the previous step.
+     *
+     * @method back
+     * @return {void}
+     */
+    back: () => void;
+    /**
+     * Completes the wizard.
+     *
+     * @method complete
+     * @return {void}
+     */
+    complete: () => void;
+    /**
+     * Returns the computed HTML for the wizard's steps.
+     *
+     * @method wizardStepsHTML
+     * @return {Object} JSX
+     */
+    get wizardStepsHTML(): Object;
+}
+declare namespace MultiStepWizard {
+    namespace propTypes {
+        const steps: any[];
+        const beforeSubmitValidation: Function;
+        const className: string;
+        const onSubmit: Function;
+        const currentStep: number;
+        const enableInactiveSteps: boolean;
+        const onNext: PropTypes.Requireable<(...args: any[]) => any>;
+        const onBack: PropTypes.Requireable<(...args: any[]) => any>;
+        const completed: boolean;
+    }
+    namespace defaultProps {
+        const beforeSubmitValidation_1: null;
+        export { beforeSubmitValidation_1 as beforeSubmitValidation };
+        const className_1: string;
+        export { className_1 as className };
+        const completed_1: boolean;
+        export { completed_1 as completed };
+        const currentStep_1: number;
+        export { currentStep_1 as currentStep };
+        const enableInactiveSteps_1: boolean;
+        export { enableInactiveSteps_1 as enableInactiveSteps };
+        const onNext_1: null;
+        export { onNext_1 as onNext };
+        const onBack_1: null;
+        export { onBack_1 as onBack };
+    }
+    namespace childContextTypes {
+        const wizard: Object;
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";