carbon-react 106.6.6 → 106.6.9

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

@@ -69,12 +69,11 @@ exports.StyledMultiActionButton = StyledMultiActionButton;
 const StyledButtonChildrenContainer = _styledComponents.default.div`
   ${({
   theme,
-  align
+  align,
+  minWidth
 }) => (0, _styledComponents.css)`
     background-color: var(--colorsActionMajorYang100);
-    min-width: ${({
-  minWidth
-}) => minWidth}px;
+    min-width: ${minWidth}px;
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
     box-shadow: var(--boxShadow100);
@@ -110,7 +109,5 @@ StyledButtonChildrenContainer.defaultProps = {
   theme: _base.default
 };
 StyledMultiActionButton.defaultProps = {
-  theme: _base.default,
-  size: "medium",
-  legacyColorVariant: "blue"
+  theme: _base.default
 };

package/lib/components/portal/portal.js

@@ -13,8 +13,6 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
-var _browser = _interopRequireDefault(require("../../__internal__/utils/helpers/browser"));
-
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -97,10 +95,6 @@ const Portal = ({
     return node;
   };
 
-  if (!_browser.default.isDomAvailable()) {
-    return null;
-  }
-
   return /*#__PURE__*/_react.default.createElement("span", {
     "data-portal-entrance": uniqueId
   }, /*#__PURE__*/_reactDom.default.createPortal( /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, children), getPortalContainer()));

package/lib/components/portrait/portrait-initials.component.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _common = _interopRequireDefault(require("@sage/design-tokens/js/base/common"));
 
-var _browser = _interopRequireDefault(require("../../__internal__/utils/helpers/browser"));
-
 var _portrait = require("./portrait.style");
 
 var _portrait2 = require("./portrait.config");
@@ -47,9 +45,7 @@ const PortraitInitials = ({
       textColor,
       bgColor
     } = (0, _portrait.getColorsForInitials)(darkBackground);
-
-    let canvas = _browser.default.getDocument().createElement("canvas");
-
+    let canvas = document.createElement("canvas");
     const context = canvas.getContext("2d");
     let {
       dimensions

package/lib/components/tile-select/__internal__/accordion/accordion.style.d.ts

@@ -1,2 +1,2 @@
-export const StyledContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export const StyledContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledContentContainer: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionContentContainerProps, never>;
+export const StyledContent: import("styled-components").StyledComponent<"div", any, import("../../../accordion/accordion.style").StyledAccordionContentProps, never>;

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

@@ -26,8 +26,11 @@ export interface TooltipProps {
      * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
      */
     flipOverrides?: TooltipPositions[];
+    /** @ignore @private */
     target?: Element;
+    /** @ignore @private */
     isPartOfInput?: boolean;
+    /** @ignore @private */
     inputSize?: InputSizes;
 }
 export declare const Tooltip: React.ForwardRefExoticComponent<TooltipProps & React.RefAttributes<HTMLDivElement | null>>;

package/lib/style/utils/filter-out-styled-system-spacing-props.d.ts

@@ -1,2 +1,2 @@
-declare const filterOutStyledSystemSpacingProps: (obj: Record<string, unknown>) => Record<string, unknown>;
+declare const filterOutStyledSystemSpacingProps: (props: Record<string, any>) => Record<string, unknown>;
 export default filterOutStyledSystemSpacingProps;

package/lib/style/utils/filter-out-styled-system-spacing-props.js

@@ -9,7 +9,7 @@ var _propTypes = _interopRequireDefault(require("@styled-system/prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const filterOutStyledSystemSpacingProps = obj => Object.fromEntries(Object.entries(obj).filter(([key]) => !_propTypes.default.space[key]));
+const filterOutStyledSystemSpacingProps = props => Object.fromEntries(Object.entries(props).filter(([key]) => !_propTypes.default.space[key]));
 
 var _default = filterOutStyledSystemSpacingProps;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "106.6.6",
+  "version": "106.6.9",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -97,6 +97,7 @@
     "@types/node": "10.12.18",
     "@types/react": "16.9.56",
     "@types/react-dom": "16.9.8",
+    "@types/react-is": "^17.0.3",
     "@types/react-test-renderer": "^17.0.1",
     "@types/sprintf-js": "^1.1.2",
     "@types/styled-components": "^5.1.9",

package/esm/__internal__/utils/helpers/browser/index.d.ts

@@ -1,15 +0,0 @@
-/**
- * Browser provides helper methods for working with Browser behavior.
- */
-declare const Browser: {
-    isDomAvailable: () => boolean;
-    /**
-     * Get the current window
-     */
-    getWindow: () => Window | undefined;
-    /**
-     * Get the current document
-     */
-    getDocument: () => Document | undefined;
-};
-export default Browser;

package/esm/__internal__/utils/helpers/browser/index.js

@@ -1,33 +0,0 @@
-const globalNode = {
-  window,
-  document: window.document,
-  ...global
-};
-/**
- * Browser provides helper methods for working with Browser behavior.
- */
-
-const Browser = {
-  isDomAvailable: () => {
-    const _window = Browser.getWindow();
-
-    const _document = Browser.getDocument();
-
-    return !!(typeof _window !== "undefined" && _document && _document.createElement);
-  },
-
-  /**
-   * Get the current window
-   */
-  getWindow: () => {
-    return globalNode.window;
-  },
-
-  /**
-   * Get the current document
-   */
-  getDocument: () => {
-    return globalNode.document;
-  }
-};
-export default Browser;

package/esm/components/accordion/accordion-group/accordion-group.d.ts

@@ -1,17 +0,0 @@
-import * as React from "react";
-import { MarginProps } from "styled-system";
-import { AccordionProps } from "../accordion";
-
-type AccordionElement =
-  | React.ReactElement<AccordionProps>
-  | boolean
-  | null
-  | undefined;
-
-export interface AccordionGroupProps extends MarginProps {
-  children?: AccordionElement | AccordionElement[];
-}
-
-declare function AccordionGroup(props: AccordionGroupProps): JSX.Element;
-
-export default AccordionGroup;

package/esm/components/accordion/accordion.d.ts

@@ -1,54 +0,0 @@
-import * as React from "react";
-import { SpaceProps } from "styled-system";
-
-export interface AccordionProps extends SpaceProps {
-  /** Toggles left and right borders */
-  borders?: "default" | "full" | "none";
-  /** Renders the accordion heading in the style of a tertiary button */
-  buttonHeading?: boolean;
-  /** Width of the buttonHeading when it's set, defaults to 150px */
-  buttonWidth?: number;
-  children?: React.ReactNode;
-  /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */
-  defaultExpanded?: boolean;
-  /** Disable padding for the content */
-  disableContentPadding?: boolean;
-  /** Sets the expansion state of the Accordion if component is meant to be used as controlled */
-  expanded?: boolean;
-  /** An error message to be displayed in the tooltip */
-  error?: string;
-  /** Styled system spacing props provided to Accordion Title */
-  headerSpacing?: SpaceProps;
-  id?: string;
-  /** Sets icon type - accepted values: 'chevron_down' (default), 'dropdown' */
-  iconType?: "chevron_down" | "dropdown";
-  /** Sets icon alignment - accepted values: 'left', 'right' (default) */
-  iconAlign?: "left" | "right";
-  /** Sets accordion title */
-  title: React.ReactNode;
-  /** An info message to be displayed in the tooltip */
-  info?: string;
-  /** Callback fired when expansion state changes */
-  onChange?: (
-    event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
-    isExpanded: boolean
-  ) => void;
-  /** When the Accordion is open the title can change to this */
-  openTitle?: string;
-  /** Sets background as white or transparent */
-  scheme?: "white" | "transparent";
-  /** Sets accordion size */
-  size?: "large" | "small";
-  /** Sets accordion sub title */
-  subTitle?: string;
-  /** A warning message to be displayed in the tooltip */
-  warning?: string;
-  /** Sets accordion width */
-  width?: string;
-}
-
-declare function Accordion(
-  props: AccordionProps & React.RefAttributes<HTMLDivElement>
-): JSX.Element;
-
-export default Accordion;

package/esm/components/action-popover/action-popover-test.stories.js

@@ -1,76 +0,0 @@
-import React from "react";
-import { action } from "@storybook/addon-actions";
-import { ActionPopover, ActionPopoverDivider, ActionPopoverItem, ActionPopoverMenu } from ".";
-import { FlatTable, FlatTableHead, FlatTableBody, FlatTableRow, FlatTableHeader, FlatTableCell } from "../flat-table";
-export default {
-  title: "Action Popover/Test",
-  parameters: {
-    info: {
-      disable: true
-    },
-    chromatic: {
-      disable: true
-    }
-  }
-};
-export const Default = () => {
-  const submenu = /*#__PURE__*/React.createElement(ActionPopoverMenu, null, /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    onClick: action("sub menu 1")
-  }, "Sub Menu 1"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    onClick: action("sub menu 2")
-  }, "Sub Menu 2"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    disabled: true,
-    onClick: action("sub menu 3")
-  }, "Sub Menu 3"));
-  const submenuWithIcons = /*#__PURE__*/React.createElement(ActionPopoverMenu, null, /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    icon: "graph",
-    onClick: action("sub menu 1")
-  }, "Sub Menu 1"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    icon: "add",
-    onClick: action("sub menu 2")
-  }, "Sub Menu 2"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    icon: "print",
-    disabled: true,
-    onClick: action("sub menu 3")
-  }, "Sub Menu 3"));
-  return /*#__PURE__*/React.createElement("div", {
-    style: {
-      marginTop: "40px",
-      height: "275px"
-    }
-  }, /*#__PURE__*/React.createElement(FlatTable, {
-    isZebra: true
-  }, /*#__PURE__*/React.createElement(FlatTableHead, null, /*#__PURE__*/React.createElement(FlatTableRow, null, /*#__PURE__*/React.createElement(FlatTableHeader, null, "First Name"), /*#__PURE__*/React.createElement(FlatTableHeader, null, "Last Name"), /*#__PURE__*/React.createElement(FlatTableHeader, null, "\xA0"))), /*#__PURE__*/React.createElement(FlatTableBody, null, /*#__PURE__*/React.createElement(FlatTableRow, null, /*#__PURE__*/React.createElement(FlatTableCell, null, "John"), /*#__PURE__*/React.createElement(FlatTableCell, null, "Doe"), /*#__PURE__*/React.createElement(FlatTableCell, null, /*#__PURE__*/React.createElement(ActionPopover, {
-    onOpen: action("popover opened"),
-    onClose: action("popover closed")
-  }, /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    disabled: true,
-    icon: "graph",
-    submenu: submenu,
-    onClick: action("email")
-  }, "Business"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    icon: "email",
-    onClick: action("email")
-  }, "Email Invoice"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    icon: "print",
-    onClick: action("print"),
-    submenu: submenu
-  }, "Print Invoice"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    icon: "pdf",
-    submenu: submenu,
-    onClick: action("pdf")
-  }, "Download PDF"), /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    icon: "csv",
-    onClick: action("csv")
-  }, "Download CSV"), /*#__PURE__*/React.createElement(ActionPopoverDivider, null), /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    icon: "delete",
-    onClick: action("delete")
-  }, "Delete")))), /*#__PURE__*/React.createElement(FlatTableRow, null, /*#__PURE__*/React.createElement(FlatTableCell, null, "Jane"), /*#__PURE__*/React.createElement(FlatTableCell, null, "Smith"), /*#__PURE__*/React.createElement(FlatTableCell, null, /*#__PURE__*/React.createElement(ActionPopover, null, /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    icon: "csv",
-    onClick: action("csv")
-  }, "Download CSV")))), /*#__PURE__*/React.createElement(FlatTableRow, null, /*#__PURE__*/React.createElement(FlatTableCell, null, "Bob"), /*#__PURE__*/React.createElement(FlatTableCell, null, "Jones"), /*#__PURE__*/React.createElement(FlatTableCell, null, /*#__PURE__*/React.createElement(ActionPopover, null, /*#__PURE__*/React.createElement(ActionPopoverItem, {
-    icon: "csv",
-    submenu: submenuWithIcons,
-    onClick: action("csv")
-  }, "Download CSV")))))));
-};

package/esm/components/button-bar/button-bar-test.stories.js

@@ -1,122 +0,0 @@
-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 from "react";
-import { action } from "@storybook/addon-actions";
-import Button from "../button";
-import ButtonBar from ".";
-import IconButton from "../icon-button";
-import Icon from "../icon";
-import { BUTTON_BAR_ICON_POSITIONS, BUTTON_BAR_SIZES } from "./button-bar.config";
-export default {
-  title: "Button Bar/Test",
-  parameters: {
-    info: {
-      disable: true
-    },
-    chromatic: {
-      disable: true
-    }
-  }
-};
-const commonArgTypesButtonBar = {
-  size: {
-    options: BUTTON_BAR_SIZES,
-    control: {
-      type: "select"
-    }
-  },
-  iconPosition: {
-    options: BUTTON_BAR_ICON_POSITIONS,
-    control: {
-      type: "select"
-    }
-  }
-};
-const commonArgsButtonBar = {
-  size: "medium",
-  fullWidth: false,
-  iconPosition: "before"
-};
-export const Default = ({ ...args
-}) => /*#__PURE__*/React.createElement(ButtonBar, _extends({
-  onClick: action("click")
-}, args), /*#__PURE__*/React.createElement(Button, {
-  iconType: "search"
-}, "Example Button"), /*#__PURE__*/React.createElement(Button, {
-  iconType: "pdf"
-}, "Example Button"), /*#__PURE__*/React.createElement(Button, {
-  iconType: "csv"
-}, "Example Button"));
-export const Preview = () => {
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonBar, {
-    ml: 2,
-    mt: 2
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    onAction: () => {}
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "pdf"
-  })), /*#__PURE__*/React.createElement(IconButton, {
-    onAction: () => {}
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "csv"
-  })), /*#__PURE__*/React.createElement(IconButton, {
-    onAction: () => {}
-  }, /*#__PURE__*/React.createElement(Icon, {
-    type: "search"
-  }))), BUTTON_BAR_SIZES.map(size => /*#__PURE__*/React.createElement(ButtonBar, {
-    key: size,
-    size: size,
-    ml: 2,
-    mt: 2
-  }, /*#__PURE__*/React.createElement(Button, {
-    iconType: "pdf"
-  }), /*#__PURE__*/React.createElement(Button, {
-    iconType: "csv"
-  }), /*#__PURE__*/React.createElement(Button, {
-    iconType: "search"
-  }))), BUTTON_BAR_ICON_POSITIONS.map(iconPosition => /*#__PURE__*/React.createElement(React.Fragment, {
-    key: iconPosition
-  }, BUTTON_BAR_SIZES.map(size => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonBar, {
-    key: size + iconPosition,
-    iconPosition: iconPosition,
-    size: size,
-    ml: 2,
-    mt: 2
-  }, /*#__PURE__*/React.createElement(Button, {
-    iconType: "pdf"
-  }, iconPosition), /*#__PURE__*/React.createElement(Button, {
-    iconType: "csv"
-  }, iconPosition), /*#__PURE__*/React.createElement(Button, {
-    iconType: "search"
-  }, iconPosition)))))), BUTTON_BAR_ICON_POSITIONS.map(iconPosition => /*#__PURE__*/React.createElement(React.Fragment, {
-    key: iconPosition
-  }, BUTTON_BAR_SIZES.map(size => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ButtonBar, {
-    fullWidth: true,
-    key: `${size}${iconPosition}fullWidth`,
-    iconPosition: iconPosition,
-    size: size,
-    ml: 2,
-    mt: 2
-  }, /*#__PURE__*/React.createElement(Button, {
-    iconType: "pdf"
-  }, iconPosition), /*#__PURE__*/React.createElement(Button, {
-    iconType: "csv"
-  }, iconPosition), /*#__PURE__*/React.createElement(Button, {
-    iconType: "search"
-  }, iconPosition)))))));
-};
-Default.story = {
-  name: "default",
-  args: { ...commonArgsButtonBar
-  },
-  argTypes: { ...commonArgTypesButtonBar
-  }
-};
-Preview.story = {
-  name: "visual",
-  parameters: {
-    chromatic: {
-      disable: false
-    }
-  }
-};

package/esm/components/draggable/draggable-test.stories.js

@@ -1,48 +0,0 @@
-import React from "react";
-import { action } from "@storybook/addon-actions";
-import DraggableContainer from "./draggable-container.component";
-import DraggableItem from "./draggable-item.component";
-import { Checkbox } from "../checkbox";
-export default {
-  title: "Draggable/Test",
-  parameters: {
-    info: {
-      disable: true
-    },
-    chromatic: {
-      disable: true
-    }
-  }
-};
-export const Default = () => {
-  const handleUpdate = items => {
-    action("onUpdate")(items);
-  };
-
-  return /*#__PURE__*/React.createElement(DraggableContainer, {
-    getOrder: handleUpdate
-  }, /*#__PURE__*/React.createElement(DraggableItem, {
-    key: "1",
-    id: 1
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    label: "Draggable Label One"
-  })), /*#__PURE__*/React.createElement(DraggableItem, {
-    key: "2",
-    id: 2
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    label: "Draggable Label Two"
-  })), /*#__PURE__*/React.createElement(DraggableItem, {
-    key: "3",
-    id: 3
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    label: "Draggable Label Three"
-  })), /*#__PURE__*/React.createElement(DraggableItem, {
-    key: "4",
-    id: 4
-  }, /*#__PURE__*/React.createElement(Checkbox, {
-    label: "Draggable Label Four"
-  })));
-};
-Default.story = {
-  name: "default"
-};