carbon-react 104.52.1 → 104.53.1

package/esm/__spec_helper__/test-utils.d.ts

@@ -1,3 +1,4 @@
+export function getDefaultValue(value: any): any;
 export function assertStyleMatch(styleSpec: any, component: any, opts: any): void;
 export function toCSSCase(str: any): any;
 export function hoverList(wrapper: any): (item: any) => void;

package/esm/__spec_helper__/test-utils.js

@@ -1,5 +1,6 @@
 import { mount } from "enzyme";
 import { sprintf } from "sprintf-js";
+import { space } from "style/themes/base/base-theme.config";
 import { carbonThemeList } from "../style/themes";
 import { mockMatchMedia } from "./mock-match-media";
 
@@ -119,9 +120,19 @@ const widthProps = ["width", "width", "200px"];
 const layoutProps = [widthProps, ["height", "height", "200px"], ["minWidth", "min-width", "120px"], ["maxWidth", "max-width", "120px"], ["minHeight", "min-height", "120px"], ["maxHeight", "max-height", "120px"], ["size", "width", "120px"], ["size", "height", "120px"], ["display", "display", "inline-block"], ["verticalAlign", "vertical-align", "baseline"], ["overflow", "overflow", "hidden"], ["overflowX", "overflow-x", "hidden"], ["overflowY", "overflow-y", "hidden"]];
 const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "alignContent", "center"], ["justifyItems", "justifyItems", "center"], ["justifyContent", "justifyContent", "center"], ["flexWrap", "flexWrap", "wrap"], ["flexDirection", "flexDirection", "row-reverse"], ["flex", "flex", "1"], ["flexGrow", "flexGrow", "1"], ["flexShrink", "flexShrink", "1"], ["flexBasis", "flexBasis", "100px"], ["justifySelf", "justifySelf", "center"], ["alignSelf", "alignSelf", "center"], ["order", "order", "1"]];
 const backgroundProps = [["background", "background", "lightblue url('foo.jpg') no-repeat fixed center"], ["backgroundImage", "background-image", "url(foo.jpg)"], ["backgroundSize", "background-size", "center"], ["backgroundRepeat", "background-repeat", "no-repeat"]];
+export const getDefaultValue = value => {
+  const spaceArrayLength = space.length - 1;
+  const parsedValue = +value;
 
-const getDefaultValue = value => {
-  if (typeof value === "number") {
+  if (typeof value === "string" && value > spaceArrayLength) {
+    return `${value}px`;
+  }
+
+  if (parsedValue <= spaceArrayLength) {
+    return space[value];
+  }
+
+  if (parsedValue > spaceArrayLength) {
     return `${value * 8}px`;
   }
 
@@ -130,7 +141,8 @@ const getDefaultValue = value => {
 
 const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = mount(component());
+    const wrapper = mount(component({ ...defaults
+    }));
     const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
     it("should set the correct margins", () => {
       let margin;
@@ -170,7 +182,7 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
       wrapper = mount(component({ ...props
       }));
       expect(assertStyleMatch({
-        [propName]: "16px"
+        [propName]: "var(--spacing200)"
       }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
     });
   });
@@ -178,7 +190,8 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
 
 const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = mount(component());
+    const wrapper = mount(component({ ...defaults
+    }));
     const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
     it("should set the correct paddings", () => {
       let padding;
@@ -218,7 +231,7 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
       wrapper = mount(component({ ...props
       }));
       expect(assertStyleMatch({
-        [propName]: "16px"
+        [propName]: "var(--spacing200)"
       }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
     });
   });

package/esm/components/dialog/dialog.style.js

@@ -23,7 +23,7 @@ const calculateWidthValue = props => {
     padding
   } = paddingFn(props);
   const paddingValue = paddingLeft ?? paddingRight ?? padding;
-  return paddingValue === undefined ? HORIZONTAL_PADDING * 2 : paddingValue * 2;
+  return paddingValue === undefined ? HORIZONTAL_PADDING : paddingValue;
 };
 
 const calculateFormSpacingValues = (props, isFormContent) => {
@@ -38,19 +38,22 @@ const calculateFormSpacingValues = (props, isFormContent) => {
   const spacingRightValue = paddingRight ?? padding ?? HORIZONTAL_PADDING;
   const spacingBottomValue = paddingBottom ?? padding ?? CONTENT_BOTTOM_PADDING;
   const spacingLeftValue = paddingLeft ?? padding ?? HORIZONTAL_PADDING;
+
+  const setNegativeValue = value => `calc(-1px * ${value})`;
+
   return {
-    "margin-left": spacingLeftValue ? `-${spacingLeftValue}px` : spacingLeftValue,
-    "margin-right": spacingRightValue ? `-${spacingRightValue}px` : spacingRightValue,
+    "margin-left": setNegativeValue(spacingLeftValue),
+    "margin-right": setNegativeValue(spacingRightValue),
     ...(isFormContent && {
-      "margin-top": spacingTopValue ? `-${spacingTopValue}px` : spacingTopValue,
+      "margin-top": setNegativeValue(spacingTopValue),
       "padding-top": spacingTopValue,
       "padding-bottom": spacingBottomValue,
       "padding-left": spacingLeftValue,
       "padding-right": spacingRightValue
     }),
     ...(!isFormContent && {
-      "margin-bottom": spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue,
-      bottom: spacingBottomValue ? `-${spacingBottomValue}px` : spacingBottomValue
+      "margin-bottom": setNegativeValue(spacingBottomValue),
+      bottom: setNegativeValue(spacingBottomValue)
     })
   };
 };
@@ -106,7 +109,7 @@ const DialogStyle = styled.div`
   }
 
   ${StyledFormFooter}.sticky {
-    width: calc(100% + ${calculateWidthValue}px);
+    width: calc(100% + (2px * ${calculateWidthValue}));
     ${props => calculateFormSpacingValues(props, false)}
   }
 

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

@@ -107,7 +107,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       const newValue = [...previousValue];
       newValue.splice(index, 1);
 
-      if (isControlled.current && onChange) {
+      if (onChange) {
         onChange(createCustomEvent(newValue));
         return newValue;
       }
@@ -228,11 +228,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       onFilterChange(filterText);
     }
   }, [filterText, onFilterChange]);
-  useEffect(() => {
-    if (!isControlled.current && onChange) {
-      onChange(createCustomEvent(selectedValue));
-    }
-  }, [createCustomEvent, onChange, selectedValue]);
 
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
@@ -351,6 +346,10 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
         return previousValue;
       }
 
+      if (onChange) {
+        onChange(createCustomEvent([...previousValue, newValue]));
+      }
+
       return [...previousValue, newValue];
     });
   }, [createCustomEvent, onChange, textboxRef, selectedValue]);

package/esm/style/themes/aegean/aegean-theme.config.d.ts

@@ -1,19 +1,11 @@
 declare function _default(palette: any): {
     name: string;
     colors: {
-        base: any;
         primary: any;
         secondary: any;
         tertiary: any;
-        whiteMix: any;
-        withOpacity: string;
-        hoveredTabKeyline: any;
-        disabled: any;
         loadingBarBackground: any;
     };
-    stepSequence: {
-        completedText: any;
-    };
     readonly compatibility: {
         colorsActionMajor500: any;
         colorsActionMajor600: any;

package/esm/style/themes/aegean/aegean-theme.config.js

@@ -1,22 +1,12 @@
-import atOpacity from "../../utils/at-opacity";
 export default (palette => {
-  const baseWithOpacity = atOpacity(palette.productBlue);
   return {
     name: "aegean",
     colors: {
-      base: palette.productBlue,
       primary: palette.productBlueShade(3),
       secondary: palette.productBlueShade(23),
       tertiary: palette.productBlueShade(43),
-      whiteMix: palette.productBlueTint(90),
-      withOpacity: baseWithOpacity(0.55),
-      hoveredTabKeyline: palette.productBlueTint(30),
-      disabled: palette.productBlueTint(40),
       loadingBarBackground: palette.productBlueTint(70)
     },
-    stepSequence: {
-      completedText: palette.productBlueShade(23)
-    },
 
     get compatibility() {
       return {

package/esm/style/themes/base/base-theme.config.d.ts

@@ -1,319 +1,25 @@
+export const space: string[];
 declare function _default(palette: any): {
     name: string;
     palette: any;
     spacing: number;
-    space: number[];
+    space: string[];
     colors: {
-        base: any;
         primary: any;
         secondary: any;
         tertiary: any;
-        brand: any;
-        disabled: any;
-        whiteMix: any;
-        withOpacity: string;
         loadingBarBackground: any;
-        black: string;
-        slate: string;
         white: string;
-        border: any;
-        dashedBorder: string;
-        dashedButtonText: string;
-        dashedHoverBackground: string;
-        focusedIcon: any;
-        focusedLinkBackground: any;
-        previewBackground: any;
-        hoveredTabKeyline: any;
         error: any;
         focus: any;
         info: any;
-        success: any;
         warning: any;
         destructive: {
             hover: any;
         };
-        asterisk: any;
-    };
-    progressTracker: {
-        background: any;
-        innerBackground: any;
-        trafficNeutral: any;
-    };
-    anchorNavigation: {
-        divider: any;
-        navItemHoverBackground: any;
-    };
-    accordion: {
-        border: any;
-        background: any;
-    };
-    tileSelect: {
-        border: any;
-        disabledBackground: any;
-        hoverBackground: any;
-        descriptionColor: any;
-        disabledText: any;
-    };
-    batchSelection: {
-        lightTheme: any;
-    };
-    hr: {
-        background: any;
-    };
-    editor: {
-        border: any;
-        counter: string;
-        placeholder: string;
-        button: {
-            hover: any;
-        };
-        toolbar: {
-            background: any;
-        };
-    };
-    menu: {
-        focus: any;
-        divider: any;
-        itemColor: any;
-        itemColorDisabled: any;
-        light: {
-            text: string;
-            background: any;
-            selected: any;
-            divider: any;
-            alternate: any;
-            title: any;
-            submenuBackground: string;
-            searchIcon: any;
-            searchIconHover: any;
-        };
-        dark: {
-            text: string;
-            background: any;
-            divider: any;
-            submenuBackground: any;
-            selected: any;
-            alternate: any;
-            title: any;
-            searchIcon: any;
-            searchIconHover: any;
-        };
-        black: {
-            text: string;
-            background: any;
-            submenuBackground: any;
-            selected: any;
-            divider: any;
-            alternate: any;
-            title: any;
-            searchIcon: any;
-            searchIconHover: any;
-        };
-        white: {
-            text: string;
-            background: string;
-            selected: any;
-            divider: any;
-            alternate: any;
-            submenuBackground: any;
-            title: any;
-            searchIcon: any;
-            searchIconHover: any;
-        };
-    };
-    card: {
-        footerBackground: any;
-        footerBorder: any;
-    };
-    carousel: {
-        activeSelectorBackground: any;
-        inactiveSelectorBackground: any;
-    };
-    flatTable: {
-        light: {
-            headerBackground: any;
-            border: any;
-        };
-        dark: {
-            headerBackground: any;
-            border: any;
-        };
-        subRow: {
-            background: any;
-            shadow: string;
-        };
-        transparentWhite: {
-            headerBackground: string;
-            border: string;
-        };
-        transparentBase: {
-            headerBackground: any;
-            border: any;
-        };
-        drawerSidebar: {
-            headerBackground: any;
-            hover: any;
-            highlighted: any;
-            selected: any;
-        };
-        hover: any;
-        headerIconColor: any;
-        headerAlternativeBackground: any;
-        selected: any;
-        highlighted: any;
-    };
-    help: {
-        color: any;
-        hover: any;
-    };
-    text: {
-        color: any;
-        placeholder: any;
-        size: string;
-    };
-    readOnly: {
-        textboxBackground: any;
-        textboxBorder: any;
-        textboxText: any;
-    };
-    content: {
-        secondaryColor: any;
     };
     disabled: {
-        border: any;
-        button: any;
-        disabled: any;
-        input: any;
-        text: any;
-        buttonText: string;
         background: any;
-        switch: any;
-    };
-    draggableItem: {
-        border: any;
-    };
-    checkable: {
-        checked: string;
-    };
-    table: {
-        primary: any;
-        secondary: any;
-        tertiary: any;
-        header: any;
-        hover: any;
-        selected: any;
-        zebra: any;
-        dragging: any;
-    };
-    drawer: {
-        background: any;
-        divider: any;
-    };
-    pager: {
-        active: string;
-        disabled: string;
-        alternate: any;
-    };
-    icon: {
-        default: string;
-        defaultHover: string;
-        onLightBackground: any;
-        onLightBackgroundHover: any;
-        disabled: string;
-    };
-    popoverContainer: {
-        iconColor: string;
-    };
-    navigationBar: {
-        light: {
-            background: any;
-            borderBottom: any;
-        };
-        dark: {
-            background: string;
-            borderBottom: string;
-        };
-        black: {
-            background: any;
-        };
-        white: {
-            borderBottom: any;
-        };
-    };
-    numeralDate: {
-        passive: string;
-        error: string;
-    };
-    portrait: {
-        border: any;
-        background: any;
-        initials: string;
-    };
-    picklist: {
-        locked: any;
-        lockedContent: any;
-        lockedText: any;
-    };
-    pill: {
-        neutral: any;
-        warning: any;
-        neutralBackgroundFocus: any;
-        warningButtonFocus: any;
-        errorButtonFocus: any;
-    };
-    search: {
-        active: any;
-        button: string;
-        passive: any;
-        icon: any;
-        iconHover: any;
-        searchActive: string;
-        darkVariantPlaceholder: any;
-        darkVariantBorder: any;
-        darkVariantText: string;
-        iconDarkVariant: any;
-        iconDarkVariantHover: any;
-    };
-    select: {
-        border: string;
-        selected: any;
-        optionHeader: any;
-        tableHeaderBorder: any;
-    };
-    shadows: {
-        depth1: string;
-        depth2: string;
-        depth3: string;
-        depth4: string;
-        cards: string;
-        cardsIE: string;
-    };
-    stepSequence: {
-        completedText: any;
-    };
-    switch: {
-        off: any;
-        offDisabled: any;
-        offHover: any;
-        on: any;
-        onDisabled: any;
-        onHover: any;
-        disabledFontColor: string;
-    };
-    tile: {
-        border: any;
-        footerBackground: any;
-        separator: any;
-    };
-    tab: {
-        background: any;
-        altHover: any;
-    };
-    editorLinkPreview: {
-        background: any;
-        hoverBackground: any;
-        border: any;
-        url: any;
     };
     zIndex: {
         smallOverlay: number;
@@ -336,23 +42,6 @@ declare function _default(palette: any): {
         colorsSemanticNegative600: any;
         colorsSemanticCaution500: any;
         colorsSemanticInfo500: any;
-        spacing000: string;
-        spacing025: string;
-        spacing050: string;
-        spacing075: string;
-        spacing100: string;
-        spacing125: string;
-        spacing150: string;
-        spacing200: string;
-        spacing250: string;
-        spacing300: string;
-        spacing400: string;
-        spacing500: string;
-        spacing600: string;
-        spacing700: string;
-        spacing800: string;
-        spacing900: string;
-        fontSizes100: string;
         metaName: string;
         metaPublic: string;
         colorsLogo: string;
@@ -546,12 +235,29 @@ declare function _default(palette: any): {
         sizing075: string;
         sizingLogowidth: string;
         sizing010: string;
+        spacing100: string;
+        spacing125: string;
+        spacing150: string;
+        spacing200: string;
+        spacing250: string;
+        spacing300: string;
+        spacing400: string;
+        spacing500: string;
+        spacing600: string;
+        spacing700: string;
+        spacing800: string;
+        spacing900: string;
         spacing1000: string;
+        spacing000: string;
+        spacing025: string;
+        spacing050: string;
+        spacing075: string;
         borderWidth100: string;
         borderWidth200: string;
         borderWidth300: string;
         borderWidth400: string;
         borderWidth000: string;
+        fontSizes100: string;
         fontSizes200: string;
         fontSizes300: string;
         fontSizes400: string;