carbon-react 104.53.0 → 104.53.3

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

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

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/components/select/simple-select/simple-select-test.stories.js

@@ -1,8 +1,6 @@
 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); }
 
-// it's not mdx file because of https://github.com/storybookjs/storybook/issues/11542
 import React from "react";
-import { action } from "@storybook/addon-actions";
 import { Select, Option } from "..";
 export default {
   component: Select,
@@ -18,40 +16,145 @@ export default {
   argTypes: {
     value: {
       table: {
-        disabled: true
-      }
+        disable: true
+      },
+      control: false
+    },
+    disablePortal: {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    defaultValue: {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    children: {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    openOnFocus: {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    transparent: {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    tableHeader: {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    multiColumn: {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    isLoading: {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    onListScrollBottom: {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    tooltipPosition: {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    "data-component": {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    "data-element": {
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    "data-role": {
+      table: {
+        disable: true
+      },
+      control: false
     },
     listPlacement: {
       options: ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"],
       control: {
         type: "select"
       }
+    },
+    onOpen: {
+      action: "onOpen",
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    onChange: {
+      action: "onChange",
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    onClick: {
+      action: "onClick",
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    onFocus: {
+      action: "onFocus",
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    onBlur: {
+      action: "onBlur",
+      table: {
+        disable: true
+      },
+      control: false
+    },
+    onKeyDown: {
+      action: "onKeyDown",
+      table: {
+        disable: true
+      },
+      control: false
     }
   }
 };
 
-const Default = args => {
+const Template = args => {
   return /*#__PURE__*/React.createElement(Select, _extends({
     name: "simple",
     id: "simple",
     label: "label",
-    labelInline: true,
-    onOpen: action("onOpen"),
-    onChange: action("onChange", {
-      depth: 2
-    }),
-    onClick: action("onClick", {
-      depth: 2
-    }),
-    onFocus: action("onFocus", {
-      depth: 2
-    }),
-    onBlur: action("onBlur", {
-      depth: 2
-    }),
-    onKeyDown: action("onKeyDown", {
-      depth: 2
-    })
+    labelInline: true
   }, args), /*#__PURE__*/React.createElement(Option, {
     text: "Amber",
     value: "1"
@@ -82,102 +185,9 @@ const Default = args => {
   }));
 };
 
-Default.storyName = "default";
-Default.argTypes = {
-  value: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  disablePortal: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  defaultValue: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  children: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  openOnFocus: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  transparent: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  tableHeader: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  multiColumn: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  onOpen: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  isLoading: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  onListScrollBottom: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  tooltipPosition: {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  "data-component": {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  "data-element": {
-    table: {
-      disable: true
-    },
-    control: false
-  },
-  "data-role": {
-    table: {
-      disable: true
-    },
-    control: false
-  }
-};
+export const Default = Template.bind({});
 Default.args = {
   mt: 0,
   listPlacement: undefined,
   flipEnabled: true
-};
-export { Default };
+};

package/esm/components/tooltip/tooltip.component.js

@@ -3,11 +3,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import Tippy from "@tippyjs/react/headless";
+import { sticky } from "tippy.js";
 import StyledTooltip from "./tooltip.style";
 import StyledPointer from "./tooltip-pointer.style";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 const TOOLTIP_DELAY = 100;
+const tippyPlugins = [sticky];
 const Tooltip = /*#__PURE__*/React.forwardRef(({
   children,
   isVisible,
@@ -60,6 +62,8 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
   }, isVisible !== undefined && {
     visible: isVisible
   }, {
+    plugins: tippyPlugins,
+    sticky: true,
     render: attrs => tooltip(attrs, message),
     reference: target,
     popperOptions: {

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

@@ -5,316 +5,21 @@ declare function _default(palette: any): {
     spacing: 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;
@@ -337,7 +42,6 @@ declare function _default(palette: any): {
         colorsSemanticNegative600: any;
         colorsSemanticCaution500: any;
         colorsSemanticInfo500: any;
-        fontSizes100: string;
         metaName: string;
         metaPublic: string;
         colorsLogo: string;
@@ -553,6 +257,7 @@ declare function _default(palette: any): {
         borderWidth300: string;
         borderWidth400: string;
         borderWidth000: string;
+        fontSizes100: string;
         fontSizes200: string;
         fontSizes300: string;
         fontSizes400: string;