carbon-react 102.10.1 → 102.13.0

package/lib/components/menu/menu-item/menu-item.style.js

@@ -41,7 +41,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
     height: 40px;
     position: relative;
     cursor: pointer;
-    background-color: ${theme.menu.light.background};
+    background-color: ${theme.menu[menuType].background};
 
     ${!inFullscreenView && (0, _styledComponents.css)`
       max-width: inherit;
@@ -96,7 +96,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
     ${_link.StyledLink} [data-component="icon"] {
       font-weight: 700;
       text-decoration: none;
-      color: ${theme.colors.black};
+      color: ${theme.menu[menuType].text};
     }
 
     a:hover,
@@ -134,77 +134,19 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
 
     ${variant === "alternate" && (0, _styledComponents.css)`
       &&& {
-        background-color: ${theme.menu.light.background};
+        background-color: ${theme.menu[menuType].alternate};
       }
     `}
 
     ${selected && (0, _styledComponents.css)`
-      background-color: ${theme.menu.light.selected};
+      background-color: ${theme.menu[menuType].selected};
     `}
 
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      background-color: ${theme.colors.slate};
+    ${isOpen && (0, _styledComponents.css)`
+      background-color: ${theme.menu[menuType].submenuBackground};
       color: ${theme.colors.white};
-
-      a,
-      a:hover,
-      a:focus,
-      button,
-      button:hover,
-      [data-component="icon"],
-      ${_link.StyledLink} [data-component="icon"] {
-        font-weight: 700;
-        text-decoration: none;
-        color: ${theme.colors.white};
-        background-color: transparent;
-      }
-
-      ${selected && (0, _styledComponents.css)`
-        background-color: ${theme.menu.dark.selected};
-      `}
-
-      [data-component='icon'] {
-        color: ${theme.colors.white};
-      }
-
-      ${hasSubmenu && (0, _styledComponents.css)`
-        ${!href && (0, _styledComponents.css)`
-          && a:hover,
-          && button:hover {
-            background-color: ${theme.menu.dark.submenuBackground};
-            color: ${theme.colors.white};
-
-            [data-component="icon"] {
-              color: ${theme.colors.white};
-            }
-          }
-
-          && a:focus,
-          && button:focus {
-            background-color: ${theme.menu.dark.submenuBackground};
-            color: ${theme.colors.white};
-
-            a,
-            button,
-            [data-component="icon"] {
-              color: ${theme.colors.white};
-            }
-          }
-        `}
-
-        ${isOpen && (0, _styledComponents.css)`
-          background-color: ${theme.menu.dark.submenuBackground};
-          color: ${theme.colors.white};
-        `}
-      `}
-
-      ${variant === "alternate" && (0, _styledComponents.css)`
-        &&& {
-          background-color: ${theme.colors.slate};
-        }
-      `}
-    `}
-
+    `} 
+    
     ${hasSubmenu && (0, _styledComponents.css)`
       a:hover,
       button:hover {
@@ -213,35 +155,28 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
         `}
       }
 
-      ${menuType === "light" && (0, _styledComponents.css)`
-        ${!href && (0, _styledComponents.css)`
-          && a:hover,
-          && b:hover {
-            background-color: ${theme.colors.white};
-            color: ${theme.colors.black};
+      ${!href && (0, _styledComponents.css)`
+        && a:hover,
+        && button:hover {
+          background-color: ${theme.menu[menuType].submenuBackground};
+          color: ${theme.menu[menuType].text};
 
-            [data-component="icon"] {
-              color: ${theme.colors.black};
-            }
+          [data-component="icon"] {
+            color: ${theme.menu[menuType].text};
           }
+        }
 
-          && a:focus,
-          && button:focus {
-            background-color: ${theme.colors.white};
-            color: ${theme.colors.black};
+        && a:focus,
+        && button:focus {
+          background-color: ${theme.menu[menuType].submenuBackground};
+          color: ${theme.menu[menuType].text};
 
-            a,
-            button,
-            [data-component="icon"] {
-              color: ${theme.colors.black};
-            }
+          a,
+          button,
+          [data-component="icon"] {
+            color: ${theme.menu[menuType].text};
           }
-        `}
-
-        ${isOpen && (0, _styledComponents.css)`
-          background-color: ${theme.colors.white};
-          color: ${theme.colors.black};
-        `}
+        }
       `}
 
       ${showDropdownArrow && (0, _styledComponents.css)`
@@ -269,8 +204,7 @@ const StyledMenuItemWrapper = _styledComponents.default.a`
           content: "";
           width: 0;
           height: 0;
-          border-top: 5px solid
-            ${menuType !== "dark" ? theme.colors.slate : theme.colors.white};
+          border-top: 5px solid ${theme.menu[menuType].text};
           border-right: 4px solid transparent;
           border-bottom: 4px solid transparent;
           border-left: 4px solid transparent;

package/lib/components/menu/menu-segment-title/menu-segment-title.component.d.ts

@@ -0,0 +1,3 @@
+export default MenuSegmentTitle;
+declare const MenuSegmentTitle: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";

package/lib/components/menu/menu-segment-title/menu-segment-title.style.d.ts

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

package/lib/components/menu/menu-segment-title/menu-segment-title.style.js

@@ -25,16 +25,8 @@ const StyledTitle = _styledComponents.default.div`
     text-transform: uppercase;
     line-height: 12px;
     cursor: default;
-
-    ${menuType === "light" && (0, _styledComponents.css)`
-      ${variant === "alternate" ? `background: ${theme.menu.light.background};` : ""}
-      color: ${theme.menu.light.title};
-    `}
-
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      ${variant === "alternate" ? `background: ${theme.colors.slate};` : ""}
-      color: ${theme.menu.dark.title};
-    `}
+    color: ${theme.menu[menuType].title};
+    ${variant === "alternate" ? `background: ${theme.menu[menuType].alternate};` : ""};
   `}
 `;
 StyledTitle.defaultProps = {

package/lib/components/menu/menu.component.d.ts

@@ -0,0 +1,11 @@
+export { MenuContext };
+export default Menu;
+import MenuContext from "./menu.context";
+declare function Menu({ menuType, children, ...rest }: {
+    [x: string]: any;
+    menuType?: string | undefined;
+    children: any;
+}): JSX.Element;
+declare namespace Menu {
+    const propTypes: any;
+}

package/lib/components/menu/menu.component.js

@@ -82,7 +82,7 @@ Menu.propTypes = {
   ..._propTypes2.default.layout,
 
   /** Defines the color scheme of the component */
-  menuType: _propTypes.default.oneOf(["light", "dark"]),
+  menuType: _propTypes.default.oneOf(["light", "dark", "white", "black"]),
 
   /** Children elements */
   children: _propTypes.default.node.isRequired

package/lib/components/menu/menu.context.d.ts

@@ -0,0 +1,5 @@
+declare var _default: React.Context<{
+    menuType: string;
+}>;
+export default _default;
+import React from "react";

package/lib/components/menu/menu.context.js

@@ -9,6 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _default = /*#__PURE__*/_react.default.createContext({});
+var _default = /*#__PURE__*/_react.default.createContext({
+  menuType: "light"
+});
 
 exports.default = _default;

package/lib/components/menu/menu.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { LayoutProps, FlexBoxProps } from "../../utils/helpers/options-helper";
 
+type menuType = "light" | "dark" | "white" | "black";
 interface MenuContextProps {
-  menuType: "light" | "dark";
+  menuType: menuType;
   isFirstElement: boolean;
   handleKeyDown: (ev, submenuOpen) => void;
   isFocused: boolean;
@@ -13,7 +14,7 @@ export interface MenuProps extends LayoutProps, FlexBoxProps {
   /** Children elements */
   children: React.ReactNode;
   /** Defines the color scheme of the component */
-  menuType?: "light" | "dark";
+  menuType?: menuType;
 }
 
 declare const MenuContext: React.Context<MenuContextProps>;

package/lib/components/menu/menu.style.d.ts

@@ -0,0 +1,2 @@
+export const StyledMenuWrapper: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export const StyledMenuItem: import("styled-components").StyledComponent<"li", any, {}, never>;

package/lib/components/menu/menu.style.js

@@ -32,12 +32,11 @@ const StyledMenuWrapper = _styledComponents.default.ul`
   menuType,
   theme
 }) => (0, _styledComponents.css)`
-      background-color: ${theme.menu.light.background};
       display: inline-block;
       vertical-align: bottom;
+      background-color: ${theme.menu[menuType].background};
 
       ${menuType === "dark" && (0, _styledComponents.css)`
-        background-color: ${theme.colors.slate};
         color: ${theme.colors.white};
       `}
     `}

package/lib/components/menu/scrollable-block/scrollable-block.component.d.ts

@@ -0,0 +1,15 @@
+export default ScrollableBlock;
+declare function ScrollableBlock({ children, height, variant, ...rest }: {
+    [x: string]: any;
+    children: any;
+    height: any;
+    variant?: string | undefined;
+}): JSX.Element;
+declare namespace ScrollableBlock {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const height: PropTypes.Requireable<string | number>;
+        const variant: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/menu/scrollable-block/scrollable-block.component.js

@@ -38,13 +38,19 @@ const ScrollableBlock = ({
     focusIndex,
     handleKeyDown
   } = submenuContext;
+  const scrollVariants = {
+    light: "light",
+    dark: "dark",
+    white: "light",
+    black: "dark"
+  };
   return /*#__PURE__*/_react.default.createElement(_scrollableBlock.default, _extends({
     "data-component": "submenu-scrollable-block",
     menuType: menuContext.menuType,
     variant: variant
   }, rest), /*#__PURE__*/_react.default.createElement(_box.default, {
     overflowY: "scroll",
-    scrollVariant: menuContext.menuType,
+    scrollVariant: scrollVariants[menuContext.menuType],
     height: height,
     p: 0
   }, _react.default.Children.map(children, (child, index) => {

package/lib/components/menu/scrollable-block/scrollable-block.style.d.ts

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

package/lib/components/menu/scrollable-block/scrollable-block.style.js

@@ -24,14 +24,8 @@ const StyledScrollableBlock = _styledComponents.default.div`
   theme
 }) => (0, _styledComponents.css)`
     && ${_menuItem.default} {
-      background-color: ${variant === "default" ? theme.colors.white : theme.menu.light.background};
+      background-color: ${variant === "default" ? theme.menu[menuType].submenuBackground : theme.menu[menuType].background};
     }
-
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      && ${_menuItem.default} {
-        background-color: ${variant === "default" ? theme.menu.dark.submenuBackground : theme.colors.slate};
-      }
-    `}
   `}
 `;
 StyledScrollableBlock.defaultProps = {

package/lib/components/menu/submenu-block/submenu-block.component.d.ts

@@ -0,0 +1,12 @@
+export default SubmenuBlock;
+declare function SubmenuBlock({ children, variant }: {
+    children: any;
+    variant?: string | undefined;
+}): JSX.Element;
+declare namespace SubmenuBlock {
+    namespace propTypes {
+        const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        const variant: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/menu/submenu-block/submenu-block.style.d.ts

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

package/lib/components/menu/submenu-block/submenu-block.style.js

@@ -23,13 +23,11 @@ const StyledSubmenuBlock = _styledComponents.default.div`
   theme,
   variant
 }) => (0, _styledComponents.css)`
-    ${menuType === "dark" && (0, _styledComponents.css)`
-      background-color: ${theme.menu.dark.submenuBackground};
+    background-color: ${theme.menu[menuType].submenuBackground};
 
-      ${_menuItem.default} {
-        background-color: ${variant === "default" ? "transparent" : theme.menu.dark.alternate};
-      }
-    `}
+    ${_menuItem.default} {
+      background-color: ${variant === "default" ? "transparent" : theme.menu[menuType].alternate};
+    }
   `}
 `;
 StyledSubmenuBlock.defaultProps = {

package/lib/components/message/message-content/message-content.component.d.ts

@@ -0,0 +1,22 @@
+export default MessageContent;
+declare function MessageContent({ variant, title, transparent, children }: {
+    variant: any;
+    title: any;
+    transparent: any;
+    children: any;
+}): JSX.Element;
+declare namespace MessageContent {
+    namespace defaultProps {
+        const variant: string;
+        const transparent: boolean;
+    }
+    namespace propTypes {
+        const variant_1: PropTypes.Requireable<string>;
+        export { variant_1 as variant };
+        export const title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const transparent_1: PropTypes.Requireable<boolean>;
+        export { transparent_1 as transparent };
+        export const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/message/message-content/message-content.style.d.ts

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

package/lib/components/message/message.component.d.ts

@@ -0,0 +1,29 @@
+export default Message;
+declare function Message({ open, transparent, title, variant, children, onDismiss, id, className, closeButtonAriaLabel, showCloseIcon, ...props }: {
+    [x: string]: any;
+    open?: boolean | undefined;
+    transparent?: boolean | undefined;
+    title: any;
+    variant?: string | undefined;
+    children: any;
+    onDismiss: any;
+    id: any;
+    className: any;
+    closeButtonAriaLabel: any;
+    showCloseIcon?: boolean | undefined;
+}): false | JSX.Element;
+declare namespace Message {
+    namespace propTypes {
+        const variant: PropTypes.Requireable<string>;
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const className: PropTypes.Requireable<string>;
+        const id: PropTypes.Requireable<string>;
+        const open: PropTypes.Requireable<boolean>;
+        const onDismiss: PropTypes.Requireable<(...args: any[]) => any>;
+        const title: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const transparent: PropTypes.Requireable<boolean>;
+        const showCloseIcon: PropTypes.Requireable<boolean>;
+        const closeButtonAriaLabel: PropTypes.Requireable<string>;
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/message/message.style.d.ts

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

package/lib/components/message/type-icon/type-icon.component.d.ts

@@ -0,0 +1,18 @@
+export default TypeIcon;
+declare function TypeIcon({ variant, transparent }: {
+    variant: any;
+    transparent: any;
+}): JSX.Element;
+declare namespace TypeIcon {
+    namespace defaultProps {
+        const variant: string;
+        const transparent: boolean;
+    }
+    namespace propTypes {
+        const variant_1: PropTypes.Requireable<string>;
+        export { variant_1 as variant };
+        const transparent_1: PropTypes.Requireable<boolean>;
+        export { transparent_1 as transparent };
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/message/type-icon/type-icon.style.d.ts

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

package/lib/components/modal/__internal__/modal-manager.d.ts

@@ -0,0 +1,9 @@
+export default ModalManager;
+declare const ModalManager: ModalManagerInstance;
+declare class ModalManagerInstance {
+    addModal: (modal: any, setTriggerRefocusFlag: any) => void;
+    isTopmost(modal: any): boolean;
+    removeModal(modal: any): void;
+    clearList(): void;
+    #private;
+}

package/lib/components/modal/modal.component.d.ts

@@ -0,0 +1,35 @@
+export const ModalContext: React.Context<{}>;
+export default Modal;
+import React from "react";
+declare function Modal({ children, open, onCancel, disableEscKey, disableClose, enableBackgroundUI, timeout, ...rest }: {
+    [x: string]: any;
+    children: any;
+    open: any;
+    onCancel: any;
+    disableEscKey: any;
+    disableClose: any;
+    enableBackgroundUI: any;
+    timeout: any;
+}): JSX.Element;
+declare namespace Modal {
+    namespace propTypes {
+        const children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        const onCancel: PropTypes.Requireable<(...args: any[]) => any>;
+        const open: PropTypes.Validator<boolean>;
+        const enableBackgroundUI: PropTypes.Requireable<boolean>;
+        const disableEscKey: PropTypes.Requireable<boolean>;
+        const disableClose: PropTypes.Requireable<boolean>;
+        const timeout: PropTypes.Requireable<number>;
+    }
+    namespace defaultProps {
+        const onCancel_1: null;
+        export { onCancel_1 as onCancel };
+        const enableBackgroundUI_1: boolean;
+        export { enableBackgroundUI_1 as enableBackgroundUI };
+        const disableEscKey_1: boolean;
+        export { disableEscKey_1 as disableEscKey };
+        const timeout_1: number;
+        export { timeout_1 as timeout };
+    }
+}
+import PropTypes from "prop-types";

package/lib/components/modal/modal.style.d.ts

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

package/lib/components/mount-in-app/__spec__.d.ts

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

package/lib/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/lib/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/lib/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/lib/components/multi-step-wizard/__spec__.d.ts

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

package/lib/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";

package/lib/components/multi-step-wizard/multi-step-wizard.style.d.ts

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

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

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