carbon-react 104.52.2 → 104.53.2

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

@@ -2,18 +2,11 @@ export default (palette => {
   return {
     name: "mint",
     colors: {
-      base: palette.productGreen,
       primary: palette.productGreenShade(23.5),
       secondary: palette.productGreenShade(41),
       tertiary: palette.productGreenShade(61),
-      whiteMix: palette.productGreenTint(90),
-      hoveredTabKeyline: palette.productGreenTint(30),
-      disabled: palette.productGreenTint(40),
       loadingBarBackground: palette.productGreenTint(70)
     },
-    stepSequence: {
-      completedText: palette.productGreenShade(23)
-    },
 
     get compatibility() {
       return {

package/esm/style/themes/sage/index.d.ts

@@ -374,251 +374,10 @@ declare var _default: {
         whiteOpacity: (opacity: number) => string;
     };
     spacing: number;
-    space: number[];
+    space: string[];
     colors: import("../base").Colors;
-    anchorNavigation: {
-        divider: string;
-        navItemHoverBackground: string;
-    };
-    accordion: {
-        border: string;
-        background: string;
-    };
-    tileSelect: {
-        border: string;
-        disabledBackground: string;
-        hoverBackground: string;
-        descriptionColor: string;
-        disabledText: string;
-    };
-    batchSelection: {
-        lightTheme: string;
-    };
-    hr: {
-        background: string;
-    };
-    editor: {
-        border: string;
-        counter: string;
-        placeholder: string;
-        button: {
-            hover: string;
-        };
-        toolbar: {
-            background: string;
-        };
-    };
-    menu: {
-        focus: string;
-        divider: string;
-        itemColor: string;
-        itemColorDisabled: string;
-        light: {
-            background: string;
-            selected: string;
-            divider: string;
-            title: string;
-        };
-        dark: {
-            divider: string;
-            submenuBackground: string;
-            selected: string;
-            title: string;
-            searchIcon: string;
-            searchIconHover: string;
-        };
-    };
-    form: {
-        invalid: string;
-    };
-    card: {
-        footerBackground: string;
-        footerBorder: string;
-    };
-    carousel: {
-        activeSelectorBackground: string;
-        inactiveSelectorBackground: string;
-    };
-    flatTable: {
-        light: {
-            headerBackground: string;
-            border: string;
-        };
-        dark: {
-            headerBackground: string;
-            border: string;
-        };
-        subRow: {
-            background: string;
-            shadow: string;
-        };
-        transparentWhite: {
-            headerBackground: string;
-            border: string;
-        };
-        transparentBase: {
-            headerBackground: string;
-            border: string;
-        };
-        drawerSidebar: {
-            headerBackground: string;
-            hover: string;
-            highlighted: string;
-            selected: string;
-        };
-        hover: string;
-        headerIconColor: string;
-        selected: string;
-        highlighted: string;
-    };
-    help: {
-        color: string;
-        hover: string;
-    };
-    pod: {
-        border: string;
-        secondaryBackground: string;
-        tertiaryBackground: string;
-        tileBackground: string;
-        footerBackground: string;
-        hoverBackground: string;
-    };
-    text: {
-        color: string;
-        placeholder: string;
-        size: string;
-    };
-    readOnly: {
-        textboxBackground: string;
-        textboxBorder: string;
-        textboxText: string;
-    };
-    content: {
-        secondaryColor: string;
-    };
     disabled: {
-        border: string;
-        button: string;
-        disabled: string;
-        input: string;
-        text: string;
-        buttonText: string;
-        background: string;
-        switch: string;
-    };
-    draggableItem: {
-        border: string;
-    };
-    checkable: {
-        checked: string;
-    };
-    table: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        header: string;
-        hover: string;
-        selected: string;
-        zebra: string;
-        dragging: string;
-    };
-    drawer: {
-        background: string;
-        divider: string;
-    };
-    pager: {
-        active: string;
-        disabled: string;
-        alternate: string;
-    };
-    icon: {
-        default: string;
-        defaultHover: string;
-        onLightBackground: string;
-        onLightBackgroundHover: string;
-        disabled: string;
-    };
-    popoverContainer: {
-        iconColor: string;
-    };
-    navigationBar: {
-        light: {
-            background: string;
-            borderBottom: string;
-        };
-        dark: {
-            background: string;
-            borderBottom: string;
-        };
-        black: {
-            background: string;
-        };
-        white: {
-            borderBottom: string;
-        };
-    };
-    numeralDate: {
-        passive: string;
-        error: string;
-    };
-    portrait: {
-        border: string;
         background: string;
-        initials: string;
-    };
-    picklist: {
-        locked: string;
-        lockedContent: string;
-        lockedText: string;
-    };
-    pill: {
-        neutral: string;
-        warning: string;
-        neutralBackgroundFocus: string;
-        warningButtonFocus: string;
-        errorButtonFocus: string;
-    };
-    search: {
-        active: string;
-        button: string;
-        passive: string;
-        icon: string;
-        iconHover: string;
-        searchActive: string;
-        darkVariantPlaceholder: string;
-        darkVariantBorder: string;
-        darkVariantText: string;
-        iconDarkVariant: string;
-        iconDarkVariantHover: string;
-    };
-    select: {
-        border: string;
-        selected: string;
-        optionHeader: string;
-        tableHeaderBorder: string;
-    };
-    shadows: {
-        depth1: string;
-        depth2: string;
-        depth3: string;
-        depth4: string;
-        cards: string;
-        cardsIE: string;
-    };
-    switch: {
-        off: string;
-    };
-    tile: {
-        border: string;
-        footerBackground: string;
-        separator: string;
-    };
-    tab: {
-        background: string;
-        altHover: string;
-    };
-    note: {
-        timeStamp: string;
     };
     zIndex: {
         smallOverlay: number;

package/esm/style/themes/sage/index.js

@@ -3,5 +3,5 @@ import mint from "../mint/index";
 export default { ...mint,
   compatibility: { ...tokens
   },
-  name: "sage (experimental)"
+  name: "sage"
 };

package/lib/__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/lib/__spec_helper__/test-utils.js

@@ -9,12 +9,14 @@ Object.defineProperty(exports, "mockMatchMedia", {
     return _mockMatchMedia.mockMatchMedia;
   }
 });
-exports.expectError = exports.testStyledSystemBackground = exports.testStyledSystemFlexBox = exports.testStyledSystemLayout = exports.testStyledSystemWidth = exports.testStyledSystemColor = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemSpacing = exports.carbonThemesJestTable = exports.simulate = exports.click = exports.listFrom = exports.assertHoverTraversal = exports.assertKeyboardTraversal = exports.keyboard = exports.makeArrayKeys = exports.childrenFrom = exports.selectedItemOf = exports.hoverList = exports.toCSSCase = exports.assertStyleMatch = void 0;
+exports.expectError = exports.testStyledSystemBackground = exports.testStyledSystemFlexBox = exports.testStyledSystemLayout = exports.testStyledSystemWidth = exports.testStyledSystemColor = exports.testStyledSystemPadding = exports.testStyledSystemMargin = exports.testStyledSystemSpacing = exports.carbonThemesJestTable = exports.simulate = exports.click = exports.listFrom = exports.assertHoverTraversal = exports.assertKeyboardTraversal = exports.keyboard = exports.makeArrayKeys = exports.childrenFrom = exports.selectedItemOf = exports.hoverList = exports.toCSSCase = exports.assertStyleMatch = exports.getDefaultValue = void 0;
 
 var _enzyme = require("enzyme");
 
 var _sprintfJs = require("sprintf-js");
 
+var _baseTheme = require("style/themes/base/base-theme.config");
+
 var _themes = require("../style/themes");
 
 var _mockMatchMedia = require("./mock-match-media");
@@ -159,16 +161,30 @@ const flexBoxProps = [["alignItems", "alignItems", "center"], ["alignContent", "
 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"]];
 
 const getDefaultValue = value => {
-  if (typeof value === "number") {
+  const spaceArrayLength = _baseTheme.space.length - 1;
+  const parsedValue = +value;
+
+  if (typeof value === "string" && value > spaceArrayLength) {
+    return `${value}px`;
+  }
+
+  if (parsedValue <= spaceArrayLength) {
+    return _baseTheme.space[value];
+  }
+
+  if (parsedValue > spaceArrayLength) {
     return `${value * 8}px`;
   }
 
   return value;
 };
 
+exports.getDefaultValue = getDefaultValue;
+
 const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = (0, _enzyme.mount)(component());
+    const wrapper = (0, _enzyme.mount)(component({ ...defaults
+    }));
     const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
     it("should set the correct margins", () => {
       let margin;
@@ -208,7 +224,7 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
       wrapper = (0, _enzyme.mount)(component({ ...props
       }));
       expect(assertStyleMatch({
-        [propName]: "16px"
+        [propName]: "var(--spacing200)"
       }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
     });
   });
@@ -218,7 +234,8 @@ exports.testStyledSystemMargin = testStyledSystemMargin;
 
 const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = (0, _enzyme.mount)(component());
+    const wrapper = (0, _enzyme.mount)(component({ ...defaults
+    }));
     const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
     it("should set the correct paddings", () => {
       let padding;
@@ -258,7 +275,7 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
       wrapper = (0, _enzyme.mount)(component({ ...props
       }));
       expect(assertStyleMatch({
-        [propName]: "16px"
+        [propName]: "var(--spacing200)"
       }, styleContainer ? styleContainer(wrapper) : wrapper, assertOpts));
     });
   });

package/lib/components/dialog/dialog.style.js

@@ -43,7 +43,7 @@ const calculateWidthValue = props => {
     padding
   } = (0, _styledSystem.padding)(props);
   const paddingValue = paddingLeft ?? paddingRight ?? padding;
-  return paddingValue === undefined ? _dialog.HORIZONTAL_PADDING * 2 : paddingValue * 2;
+  return paddingValue === undefined ? _dialog.HORIZONTAL_PADDING : paddingValue;
 };
 
 const calculateFormSpacingValues = (props, isFormContent) => {
@@ -58,19 +58,22 @@ const calculateFormSpacingValues = (props, isFormContent) => {
   const spacingRightValue = paddingRight ?? padding ?? _dialog.HORIZONTAL_PADDING;
   const spacingBottomValue = paddingBottom ?? padding ?? _dialog.CONTENT_BOTTOM_PADDING;
   const spacingLeftValue = paddingLeft ?? padding ?? _dialog.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)
     })
   };
 };
@@ -126,7 +129,7 @@ const DialogStyle = _styledComponents.default.div`
   }
 
   ${_form.StyledFormFooter}.sticky {
-    width: calc(100% + ${calculateWidthValue}px);
+    width: calc(100% + (2px * ${calculateWidthValue}));
     ${props => calculateFormSpacingValues(props, false)}
   }
 

package/lib/components/flat-table/flat-table-row/flat-table-row.style.js

@@ -110,7 +110,7 @@ const StyledFlatTableRow = _styledComponents.default.tr`
       width: auto;
       outline: 2px solid #0000;
 
-      [data-component="icon"] {
+      [data-component="icon"]:not([color]) {
         color: var(--colorsActionMinor500);
       }
 

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

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

package/lib/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/lib/style/themes/aegean/aegean-theme.config.js

@@ -5,28 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _atOpacity = _interopRequireDefault(require("../../utils/at-opacity"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 var _default = palette => {
-  const baseWithOpacity = (0, _atOpacity.default)(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 {