carbon-react 101.0.3 → 101.3.0

package/lib/__internal__/tooltip-provider/index.d.ts

@@ -11,6 +11,9 @@ export interface TooltipProviderProps {
   children: React.ReactNode;
   /** Aria label for rendered help component */
   helpAriaLabel?: string;
+  focusable?: boolean;
+  tooltipVisible?: boolean;
+  disabled?: boolean;
 }
 
 declare const ToolbarContext: React.Context<ToolbarContextProps>;

package/lib/__internal__/tooltip-provider/index.js

@@ -18,11 +18,17 @@ exports.TooltipContext = TooltipContext;
 const TooltipProvider = ({
   children,
   tooltipPosition,
-  helpAriaLabel
+  helpAriaLabel,
+  focusable = true,
+  tooltipVisible,
+  disabled = false
 }) => /*#__PURE__*/_react.default.createElement(TooltipContext.Provider, {
   value: {
     tooltipPosition,
-    helpAriaLabel
+    helpAriaLabel,
+    focusable,
+    tooltipVisible,
+    disabled
   }
 }, children);
 
@@ -30,5 +36,8 @@ exports.TooltipProvider = TooltipProvider;
 TooltipProvider.propTypes = {
   children: _propTypes.default.node.isRequired,
   tooltipPosition: _propTypes.default.oneOf(["top", "bottom", "left", "right"]),
-  helpAriaLabel: _propTypes.default.string
+  helpAriaLabel: _propTypes.default.string,
+  focusable: _propTypes.default.bool,
+  tooltipVisible: _propTypes.default.bool,
+  disabled: _propTypes.default.bool
 };

package/lib/components/flat-table/flat-table.component.js

@@ -39,6 +39,7 @@ const FlatTable = ({
   hasMaxHeight = false,
   ariaDescribedby,
   minHeight,
+  overflowX,
   ...rest
 }) => {
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
@@ -57,16 +58,18 @@ const FlatTable = ({
   }) => /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
-    colorTheme: colorTheme
-  }, rest, {
+    colorTheme: colorTheme,
     minHeight: minHeight,
     overflowY: !isInSidebar && (hasStickyHead || hasStickyFooter) ? "auto" : undefined,
     height: addDefaultHeight && !hasMaxHeight ? "99%" : height,
     maxHeight: hasMaxHeight ? "100%" : undefined,
     display: "flex",
     flexDirection: "column",
-    justifyContent: hasStickyFooter || height ? "space-between" : undefined
-  }), /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({
+    justifyContent: hasStickyFooter || height ? "space-between" : undefined,
+    tabIndex: "0",
+    role: "region",
+    overflowX: overflowX
+  }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({
     "data-component": "flat-table"
   }, tableStylingProps), caption ? /*#__PURE__*/_react.default.createElement("caption", null, caption) : null, /*#__PURE__*/_react.default.createElement(FlatTableThemeContext.Provider, {
     value: {
@@ -114,7 +117,10 @@ FlatTable.propTypes = { ...marginPropTypes,
   size: _propTypes.default.oneOf(["compact", "small", "medium", "large", "extraLarge"]),
 
   /** Applies max-height of 100% to FlatTable if true */
-  hasMaxHeight: _propTypes.default.bool
+  hasMaxHeight: _propTypes.default.bool,
+
+  /** Set the overflow X of the table wrapper. Any valid CSS string */
+  overflowX: _propTypes.default.string
 };
 FlatTable.defaultProps = {
   colorTheme: "dark",

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

@@ -107,6 +107,18 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
 }) => (0, _styledComponents.css)`
       box-sizing: border-box;
 
+      :focus {
+        outline: 2px solid ${theme.colors.focus};
+
+        :not(:focus-visible) {
+          outline: none;
+        }
+
+        :focus-visible {
+          outline: 2px solid ${theme.colors.focus};
+        }
+      }
+
       ${isInSidebar ? "min-width: fit-content" : `box-shadow: inset 0px 0px 0px 1px ${theme.table.secondary}`};
     `}
 

package/lib/components/icon/icon.component.js

@@ -57,6 +57,12 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   ...rest
 }, ref) => {
   const isInteractive = !!tooltipMessage && !disabled;
+  const {
+    tooltipPosition: tooltipPositionFromContext,
+    focusable: focusableFromContext,
+    tooltipVisible: tooltipVisibleFromContext,
+    disabled: disabledFromContext
+  } = (0, _react.useContext)(_tooltipProvider.TooltipContext);
   /** Return Icon type with overrides */
 
   const iconType = () => {
@@ -83,13 +89,14 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     }
   };
 
-  const hasTooltip = !disabled && tooltipMessage && focusable;
+  const isFocusable = focusableFromContext !== undefined ? focusableFromContext : focusable;
+  const hasTooltip = !disabled && !disabledFromContext && tooltipMessage && isFocusable;
   const styleProps = {
     bg,
     bgSize,
     bgShape,
     color,
-    disabled,
+    disabled: disabledFromContext || disabled,
     fontSize,
     isInteractive,
     type: iconType(),
@@ -108,12 +115,9 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     role: hasTooltip && role === undefined ? "tooltip" : role
   }));
 
-  const {
-    tooltipPosition: tooltipPositionFromContext
-  } = (0, _react.useContext)(_tooltipProvider.TooltipContext);
-
   if (tooltipMessage) {
-    const visible = disabled ? false : tooltipVisible;
+    const showTooltip = tooltipVisibleFromContext !== undefined ? tooltipVisibleFromContext : tooltipVisible;
+    const visible = disabled ? false : showTooltip;
     return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
       message: tooltipMessage,
       position: tooltipPositionFromContext || tooltipPosition,

package/lib/components/icon-button/icon-button.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,8 +19,14 @@ var _icon = _interopRequireDefault(require("../icon"));
 
 var _utils = require("../../style/utils");
 
+var _tooltipProvider = require("../../__internal__/tooltip-provider");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 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); }
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
@@ -29,9 +35,16 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
   "aria-label": ariaLabel,
   onAction,
   children,
+  disabled,
   ...rest
 }, ref) => {
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
+  const hasIconWithTooltip = !!_react.default.Children.toArray(children).find(child => {
+    var _child$props;
+
+    return child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.tooltipMessage;
+  });
+  const [tooltipVisible, setTooltipVisible] = (0, _react.useState)(undefined);
 
   const onKeyDown = e => {
     if (_events.default.isEnterKey(e) || _events.default.isSpaceKey(e)) {
@@ -46,12 +59,27 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
     onAction(e);
   };
 
+  const handleTooltipVisibility = (ev, callbackName) => {
+    setTooltipVisible(["onFocus", "onMouseEnter"].includes(callbackName));
+    if (rest[callbackName]) rest[callbackName](ev);
+  };
+
   return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({}, rest, {
     "aria-label": ariaLabel,
     onKeyDown: onKeyDown,
     onClick: handleOnAction,
-    ref: ref
-  }, marginProps), children);
+    ref: ref,
+    disabled: disabled
+  }, !disabled && hasIconWithTooltip && {
+    onFocus: ev => handleTooltipVisibility(ev, "onFocus"),
+    onBlur: ev => handleTooltipVisibility(ev, "onBlur"),
+    onMouseEnter: ev => handleTooltipVisibility(ev, "onMouseEnter"),
+    onMouseLeave: ev => handleTooltipVisibility(ev, "onMouseLeave")
+  }, marginProps), /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    disabled: disabled,
+    tooltipVisible: tooltipVisible,
+    focusable: false
+  }, children));
 });
 
 IconButton.propTypes = { ...marginPropTypes,
@@ -65,7 +93,10 @@ IconButton.propTypes = { ...marginPropTypes,
   onAction: _propTypes.default.func.isRequired,
 
   /** Prop to specify the aria-label of the icon-button component */
-  "aria-label": _propTypes.default.string
+  "aria-label": _propTypes.default.string,
+
+  /** Set the button to disabled */
+  disabled: _propTypes.default.bool
 };
 var _default = IconButton;
 exports.default = _default;

package/lib/components/icon-button/icon-button.d.ts

@@ -7,6 +7,8 @@ export interface IconButtonProps extends MarginProps {
   children: React.ReactElement<IconProps>;
   /** Callback */
   onAction: React.MouseEventHandler<HTMLButtonElement>;
+  /** Set the button to disabled */
+  disabled?: boolean;
 }
 
 declare function IconButton(

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

@@ -344,7 +344,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     } = optionData;
 
     if (selectionType === "navigationKey") {
-      setHighlightedValue("");
+      setHighlightedValue(newValue);
       return;
     }
 
@@ -353,26 +353,23 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     }
 
     setTextValue("");
+    const isAlreadySelected = selectedValue.findIndex(val => (0, _isExpectedValue.default)(val, newValue)) !== -1;
+
+    if (!isAlreadySelected && isControlled.current && onChange) {
+      onChange(createCustomEvent([...selectedValue, newValue]));
+    }
+
     setSelectedValue(previousValue => {
       textboxRef.focus();
       isMouseDownReported.current = false;
-      const isAlreadySelected = previousValue.findIndex(val => (0, _isExpectedValue.default)(val, newValue)) !== -1;
 
       if (isAlreadySelected) {
         return previousValue;
       }
 
-      const valueList = [...previousValue, newValue];
-
-      if (isControlled.current && onChange) {
-        onChange(createCustomEvent(valueList));
-        return previousValue;
-      }
-
-      return valueList;
+      return [...previousValue, newValue];
     });
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [createCustomEvent, onChange, textboxRef]);
+  }, [createCustomEvent, onChange, textboxRef, selectedValue]);
 
   function onSelectListClose() {
     setOpenState(false);

package/lib/components/text-editor/__internal__/decorators/link-decorator.js

@@ -29,8 +29,15 @@ function findWithRegex(regex, contentBlock, callback) {
 }
 
 const linkStrategy = (contentBlock, callback) => {
-  const expr = /\s*(https:\/\/|http:\/\/|www\.)\S+(:{0,1}(\w*@)?)(\.{1}(?!\.)\S{2,})|(:[0-9]+)(\/|\/([\w#!:.?+=&%@!-/]))?\s*/g;
-  findWithRegex(RegExp(expr), contentBlock, callback);
+  const combineRegex = (...regex) => new RegExp(regex.map(r => r.source).join(""), "g");
+
+  const urlRegex = combineRegex(/\b/, /(http:\/\/|https:\/\/|www\.)/, // prefix
+  /([\w-]+:([\w-]+@))?/, // userinfo
+  /([\w-]+\.)+\w+/, // domain
+  /(:\d+)?/, // port
+  /(\/[\w#!:.?+=&%@!-/]+)?/, // paths, queries, fragments
+  /\b/);
+  findWithRegex(urlRegex, contentBlock, callback);
 };
 
 var _default = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "101.0.3",
+  "version": "101.3.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {