carbon-react 109.3.3 → 109.4.0

package/esm/components/pages/page/page.component.js

@@ -7,30 +7,36 @@ import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import FullScreenHeading from "../../../__internal__/full-screen-heading";
 import Box from "../../box";
 import { StyledPage, StyledPageContent } from "./page.style";
+import { filterStyledSystemPaddingProps } from "../../../style/utils";
 
 const Page = ({
   title,
   children,
-  ...props
+  ...rest
 }) => {
-  const styledPageNodeRef = useRef();
+  const styledPageNodeRef = useRef(null);
+  const {
+    transitionName
+  } = rest;
   return /*#__PURE__*/React.createElement(CSSTransition, _extends({
     className: "carbon-carousel__transition",
     timeout: {
       appear: 0,
       enter: 0,
       exit: 0
-    } // eslint-disable-next-line react/prop-types
-    ,
-    classNames: props.transitionName(),
+    }
+  }, transitionName && {
+    classNames: transitionName()
+  }, {
     nodeRef: styledPageNodeRef
-  }, props), /*#__PURE__*/React.createElement(StyledPage, _extends({}, tagComponent("page", props), {
+  }, rest), /*#__PURE__*/React.createElement(StyledPage, _extends({}, tagComponent("page", rest), {
     ref: styledPageNodeRef
   }), /*#__PURE__*/React.createElement(FullScreenHeading, {
-    hasContent: title
-  }, title), /*#__PURE__*/React.createElement(StyledPageContent, {
-    "data-element": "carbon-page-content"
-  }, /*#__PURE__*/React.createElement(Box, {
+    hasContent: true
+  }, title), /*#__PURE__*/React.createElement(StyledPageContent, _extends({
+    "data-element": "carbon-page-content",
+    p: "30px 40px"
+  }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(Box, {
     boxSizing: "border-box",
     maxWidth: "100%",
     minWidth: "auto",
@@ -40,14 +46,163 @@ const Page = ({
 };
 
 Page.propTypes = {
-  /**
-   * The title for the page, normally a Heading component.
-   */
-  title: PropTypes.node.isRequired,
-
-  /**
-   * This component supports children.
-   */
-  children: PropTypes.node.isRequired
+  "children": PropTypes.node,
+  "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "padding": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "paddingY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pl": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "pt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "px": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "py": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "title": PropTypes.node,
+  "transitionName": PropTypes.func
 };
+Page.displayName = "Page";
 export default Page;

package/esm/components/pages/page/page.style.d.ts

@@ -0,0 +1,3 @@
+declare const StyledPage: import("styled-components").StyledComponent<"article", any, {}, never>;
+declare const StyledPageContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export { StyledPage, StyledPageContent };

package/esm/components/pages/page/page.style.js

@@ -1,12 +1,13 @@
 import styled from "styled-components";
+import { padding } from "styled-system";
 import BaseTheme from "../../../style/themes/base";
 const StyledPage = styled.article`
   width: 100%;
   height: 100%;
 `;
 const StyledPageContent = styled.div`
+  ${padding}
   box-sizing: border-box;
-  padding: 30px 40px;
   width: 100%;
   height: 100%;
   overflow-y: auto;
@@ -14,4 +15,7 @@ const StyledPageContent = styled.div`
 StyledPage.defaultProps = {
   theme: BaseTheme
 };
+StyledPageContent.defaultProps = {
+  theme: BaseTheme
+};
 export { StyledPage, StyledPageContent };

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

@@ -0,0 +1,23 @@
+import React from "react";
+import Page from "./page";
+import { ThemeObject } from "../../style/themes/base";
+export interface PagesProps {
+    /** [legacy] Custom className */
+    className?: string;
+    /** The selected tab on page load */
+    initialpageIndex?: number | string;
+    /** The current page's index */
+    pageIndex?: number | string;
+    /** Individual Page components */
+    children?: React.ReactNode;
+    /** Controls which transition to use (fade or slide). */
+    transition?: string;
+    /** @ignore @private */
+    theme?: Partial<ThemeObject>;
+}
+declare const Pages: {
+    ({ pageIndex: incomingPageIndex, initialpageIndex, transition, children, ...props }: PagesProps): JSX.Element;
+    displayName: string;
+};
+export default Pages;
+export { Page };

package/esm/components/pages/pages.component.js

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { TransitionGroup } from "react-transition-group";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import Page from "./page/page.component";
+import Page from "./page";
 import { PagesWrapperStyle, PagesContent } from "./pages.style";
 const NEXT = "next";
 const PREVIOUS = "previous";
@@ -29,6 +29,9 @@ const Pages = ({
   const handleVisiblePage = () => {
     let index = pageIndex;
     const visiblePage = React.Children.toArray(children)[index];
+    /* istanbul ignore if */
+
+    if (! /*#__PURE__*/React.isValidElement(visiblePage)) return visiblePage;
     index = visiblePage.props.id || index;
     const additionalProps = {
       transitionName,
@@ -82,18 +85,52 @@ const Pages = ({
 };
 
 Pages.propTypes = {
-  /** [legacy] Custom className */
-  className: PropTypes.string,
-
-  /** The selected tab on page load */
-  initialpageIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  pageIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-
-  /** Individual tabs */
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-
-  /** Controls which transition to use. */
-  transition: PropTypes.string
+  "children": PropTypes.node,
+  "className": PropTypes.string,
+  "initialpageIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "pageIndex": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  "theme": PropTypes.shape({
+    "colors": PropTypes.shape({
+      "destructive": PropTypes.shape({
+        "hover": PropTypes.string.isRequired
+      }),
+      "error": PropTypes.string,
+      "focus": PropTypes.string,
+      "info": PropTypes.string,
+      "loadingBarBackground": PropTypes.string,
+      "placeholder": PropTypes.string,
+      "primary": PropTypes.string,
+      "secondary": PropTypes.string,
+      "tertiary": PropTypes.string,
+      "warning": PropTypes.string,
+      "warningText": PropTypes.string,
+      "white": PropTypes.oneOf(["#FFFFFF"])
+    }),
+    "compatibility": PropTypes.object,
+    "disabled": PropTypes.shape({
+      "background": PropTypes.string.isRequired
+    }),
+    "name": PropTypes.string,
+    "palette": PropTypes.shape({
+      "blackOpacity": PropTypes.func.isRequired,
+      "whiteOpacity": PropTypes.func.isRequired
+    }),
+    "space": PropTypes.arrayOf(PropTypes.string),
+    "spacing": PropTypes.number,
+    "zIndex": PropTypes.shape({
+      "aboveAll": PropTypes.number.isRequired,
+      "fullScreenModal": PropTypes.number.isRequired,
+      "header": PropTypes.number.isRequired,
+      "modal": PropTypes.number.isRequired,
+      "nav": PropTypes.number.isRequired,
+      "notification": PropTypes.number.isRequired,
+      "overlay": PropTypes.number.isRequired,
+      "popover": PropTypes.number.isRequired,
+      "smallOverlay": PropTypes.number.isRequired
+    })
+  }),
+  "transition": PropTypes.string
 };
+Pages.displayName = "Pages";
 export default Pages;
 export { Page };

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

@@ -0,0 +1,3 @@
+declare const slideAnimation: import("styled-components").FlattenSimpleInterpolation;
+declare const fadeAnimation: import("styled-components").FlattenSimpleInterpolation;
+export { slideAnimation, fadeAnimation };

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

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

package/esm/components/pages/pages.style.js

@@ -19,8 +19,8 @@ const PagesWrapperStyle = styled.div`
     overflow: hidden;
     position: relative;
   }
-  ${slideAnimation};
-  ${fadeAnimation};
+  ${slideAnimation}
+  ${fadeAnimation}
 `;
 PagesContent.defaultProps = {
   theme: BaseTheme

package/esm/components/select/multi-select/multi-select.component.js

@@ -64,6 +64,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const [highlightedValue, setHighlightedValue] = useState("");
   const [filterText, setFilterText] = useState("");
   const [placeholderOverride, setPlaceholderOverride] = useState();
+  const actualValue = isControlled.current ? value : selectedValue;
   const setOpen = useCallback(() => {
     setOpenState(isAlreadyOpen => {
       if (!isAlreadyOpen && onOpen) {
@@ -86,6 +87,23 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     };
     return customEvent;
   }, [name, id]);
+  /* generic value update function which can be used for both controlled and uncontrolled
+   * components, both with and without onChange.
+   * It accepts a function to update the value, which is assumed to be have no side effects and therefore
+   * be safe to run more than once if needed. */
+
+  const updateValue = useCallback(updateFunction => {
+    const newValue = updateFunction(actualValue); // only call onChange if an option has been selected or deselected
+
+    if (onChange && newValue.length !== actualValue.length) {
+      onChange(createCustomEvent(newValue));
+    } // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
+
+
+    if (!isControlled.current) {
+      setSelectedValue(updateFunction);
+    }
+  }, [createCustomEvent, onChange, actualValue]);
   const handleTextboxChange = useCallback(event => {
     const newValue = event.target.value;
     const match = findElementWithMatchingText(newValue, children);
@@ -99,24 +117,17 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     setOpen();
   }, [children, setOpen]);
   const removeSelectedValue = useCallback(index => {
-    setSelectedValue(previousValue => {
-      isClickTriggeredBySelect.current = true;
-
+    isClickTriggeredBySelect.current = true;
+    updateValue(previousValue => {
       if (!previousValue.length) {
         return previousValue;
       }
 
       const newValue = [...previousValue];
       newValue.splice(index, 1);
-
-      if (onChange) {
-        onChange(createCustomEvent(newValue));
-        return newValue;
-      }
-
       return newValue;
     });
-  }, [createCustomEvent, onChange]);
+  }, [updateValue]);
   const handleTextboxKeydown = useCallback(event => {
     const {
       key
@@ -142,12 +153,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
   }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
   const accessibilityLabel = useMemo(() => {
-    return selectedValue && selectedValue.length ? React.Children.map(children, child => {
-      return selectedValue.includes(child.props.value) ? child.props.text : false;
+    return actualValue && actualValue.length ? React.Children.map(children, child => {
+      return actualValue.includes(child.props.value) ? child.props.text : false;
     }).filter(child => child).reduce((acc, item) => {
       return acc ? `${acc}, ${item}` : item;
     }, "") : null;
-  }, [children, selectedValue]);
+  }, [children, actualValue]);
   const handleGlobalClick = useCallback(event => {
     isMouseDownReported.current = false;
 
@@ -170,11 +181,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const mapValuesToPills = useMemo(() => {
     const canDelete = !disabled && !readOnly;
 
-    if (!selectedValue.length) {
+    if (!actualValue.length) {
       return "";
     }
 
-    return selectedValue.map((singleValue, index) => {
+    return actualValue.map((singleValue, index) => {
       const matchingOption = React.Children.toArray(children).find(child => isExpectedOption(child, singleValue));
       let pillProps = {};
 
@@ -203,22 +214,18 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
     !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
-
-    if (isControlled.current) {
-      setSelectedValue(value);
-    }
   }, [value, onChange]); // removes placeholder when a value is present
 
   useEffect(() => {
     const hasValue = value === null || value === void 0 ? void 0 : value.length;
-    const hasSelectedValue = selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length;
+    const hasSelectedValue = actualValue === null || actualValue === void 0 ? void 0 : actualValue.length;
 
     if (hasValue || hasSelectedValue) {
       setPlaceholderOverride(" ");
     } else {
       setPlaceholderOverride(placeholder);
     }
-  }, [value, selectedValue, placeholder]);
+  }, [value, actualValue, placeholder]);
   useEffect(() => {
     const clickEvent = "click";
     window.addEventListener(clickEvent, handleGlobalClick);
@@ -335,27 +342,22 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     }
 
     setTextValue("");
-    const isAlreadySelected = selectedValue.findIndex(val => isExpectedValue(val, newValue)) !== -1;
+    const isAlreadySelected = actualValue.findIndex(val => isExpectedValue(val, newValue)) !== -1;
 
     if (!isAlreadySelected && isControlled.current && onChange) {
-      onChange(createCustomEvent([...selectedValue, newValue]));
+      onChange(createCustomEvent([...actualValue, newValue]));
     }
 
-    setSelectedValue(previousValue => {
-      textboxRef.focus();
-      isMouseDownReported.current = false;
-
+    textboxRef.focus();
+    isMouseDownReported.current = false;
+    updateValue(previousValue => {
       if (isAlreadySelected) {
         return previousValue;
       }
 
-      if (onChange) {
-        onChange(createCustomEvent([...previousValue, newValue]));
-      }
-
       return [...previousValue, newValue];
     });
-  }, [createCustomEvent, onChange, textboxRef, selectedValue]);
+  }, [createCustomEvent, onChange, textboxRef, actualValue, updateValue]);
 
   function onSelectListClose() {
     setOpenState(false);
@@ -389,7 +391,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       leftChildren: mapValuesToPills,
       inputRef: assignInput,
       formattedValue: textValue,
-      selectedValue,
+      selectedValue: actualValue,
       onClick: handleTextboxClick,
       onMouseDown: handleTextboxMouseDown,
       onFocus: handleTextboxFocus,
@@ -423,7 +425,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
-    multiselectValues: selectedValue
+    multiselectValues: actualValue
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
     disabled: disabled,

package/esm/components/split-button/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./split-button";
-export type { SplitButtonProps } from "./split-button";
+export { default } from "./split-button.component";
+export type { SplitButtonProps } from "./split-button.component";

package/esm/components/split-button/split-button-children.style.d.ts

@@ -0,0 +1,8 @@
+import { ThemeObject } from "../../style/themes/base";
+declare type StyledSplitButtonChildrenContainerProps = {
+    theme: ThemeObject;
+    align: "left" | "right";
+    minWidth: number;
+};
+declare const StyledSplitButtonChildrenContainer: import("styled-components").StyledComponent<"div", any, StyledSplitButtonChildrenContainerProps, never>;
+export default StyledSplitButtonChildrenContainer;

package/esm/components/split-button/split-button-children.style.js

@@ -4,12 +4,11 @@ import StyledButton from "../button/button.style";
 const StyledSplitButtonChildrenContainer = styled.div`
   ${({
   theme,
-  align
+  align,
+  minWidth
 }) => 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);

package/esm/components/split-button/split-button-toggle.style.d.ts

@@ -0,0 +1,10 @@
+declare type StyledSplitButtonToggleProps = {
+    buttonType: "primary" | "secondary";
+    disabled: boolean;
+    displayed: boolean;
+    size: "small" | "medium" | "large";
+};
+declare const StyledSplitButtonToggle: import("styled-components").StyledComponent<"button", any, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("../button").ButtonProps & {
+    iconOnly?: boolean | undefined;
+} & StyledSplitButtonToggleProps, never>;
+export default StyledSplitButtonToggle;

package/esm/components/split-button/split-button.component.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
+export interface SplitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, MarginProps {
+    /** Set align of the rendered content */
+    align?: "left" | "right";
+    /** Button type: "primary" | "secondary" */
+    buttonType?: "primary" | "secondary";
+    /** The additional button to display. */
+    children: React.ReactNode;
+    /** A custom value for the data-element attribute */
+    "data-element"?: string;
+    /** A custom value for the data-role attribute */
+    "data-role"?: string;
+    /** Gives the button a disabled state. */
+    disabled?: boolean;
+    /** Defines an Icon position within the button: "before" | "after" */
+    iconPosition?: "before" | "after";
+    /** Defines an Icon type within the button */
+    iconType?: IconType;
+    /** The size of the buttons in the SplitButton. */
+    size?: "small" | "medium" | "large";
+    /** Second text child, renders under main text, only when size is "large" */
+    subtext?: string;
+    /** The text to be displayed in the SplitButton. */
+    text: string;
+}
+export declare const SplitButton: ({ align, buttonType, children, disabled, iconPosition, iconType, onClick, size, subtext, text, "data-element": dataElement, "data-role": dataRole, ...rest }: SplitButtonProps) => JSX.Element;
+export default SplitButton;