carbon-react 109.0.2 → 109.1.2

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import Label from "../../__internal__/label";
 import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from "./inline-inputs.style";
 import createGuid from "../../__internal__/utils/helpers/guid";
+import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 export const InlineInputsContext = /*#__PURE__*/React.createContext({});
 
 const columnWrapper = (children, gutter, labelId) => {
@@ -19,21 +20,29 @@ const columnWrapper = (children, gutter, labelId) => {
 };
 
 const InlineInputs = ({
+  adaptiveLabelBreakpoint,
   label,
   htmlFor,
   children = null,
   className = "",
   gutter = "none",
   inputWidth,
+  labelInline = true,
   labelWidth
 }) => {
   const labelId = useRef(createGuid());
+  const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
+  let inlineLabel = labelInline;
+
+  if (adaptiveLabelBreakpoint) {
+    inlineLabel = largeScreen;
+  }
 
   function renderLabel() {
     if (!label) return null;
     return /*#__PURE__*/React.createElement(Label, {
       labelId: labelId.current,
-      inline: true,
+      inline: inlineLabel,
       htmlFor: htmlFor
     }, label);
   }
@@ -42,7 +51,8 @@ const InlineInputs = ({
     gutter: gutter,
     "data-component": "inline-inputs",
     className: className,
-    labelWidth: labelWidth
+    labelWidth: labelWidth,
+    labelInline: inlineLabel
   }, renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
@@ -51,12 +61,14 @@ const InlineInputs = ({
 };
 
 InlineInputs.propTypes = {
+  "adaptiveLabelBreakpoint": PropTypes.number,
   "children": PropTypes.node,
   "className": PropTypes.string,
   "gutter": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "none", "small"]),
   "htmlFor": PropTypes.string,
   "inputWidth": PropTypes.number,
   "label": PropTypes.string,
+  "labelInline": PropTypes.bool,
   "labelWidth": PropTypes.number
 };
 InlineInputs.displayName = "InlineInputs";

package/esm/components/inline-inputs/inline-inputs.style.d.ts

@@ -1,6 +1,21 @@
 import { InlineInputsProps } from "./inline-inputs.component";
-declare const StyledInlineInput: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "gutter">, never>;
-declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "inputWidth" | "gutter">, never>;
-declare const StyledInlineInputs: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "gutter" | "labelWidth">, never>;
+declare type GutterOptions = "none" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+interface StyledInlineInputProps {
+    /** Gutter prop gets passed down to Row component if false gutter value is "none" */
+    gutter?: GutterOptions;
+}
+export interface StyledContentContainerProps extends StyledInlineInputProps {
+    /** Width of the inline inputs container in percentage */
+    inputWidth?: number;
+}
+export interface StyledInlineInputsProps extends StyledInlineInputProps {
+    /** Width of a label in percentage */
+    labelWidth?: number;
+    /** @ignore @private */
+    labelInline?: boolean;
+}
+declare const StyledInlineInput: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
+declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
+declare const StyledInlineInputs: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
 export { StyledContentContainer, StyledInlineInput };
 export default StyledInlineInputs;

package/esm/components/inline-inputs/inline-inputs.style.js

@@ -42,12 +42,16 @@ const StyledContentContainer = styled.div`
     `}
 `;
 const StyledInlineInputs = styled.div`
-  display: flex;
+  display: ${({
+  labelInline
+}) => labelInline ? `flex` : `block`};
   align-items: center;
 
   ${StyledLabelContainer} {
     width: auto;
-    margin-bottom: 0;
+    margin-bottom: ${({
+  labelInline
+}) => labelInline ? `0px` : `8px`};
     padding-right: 16px;
     flex: 0 0 ${({
   labelWidth

package/esm/components/menu/__internal__/submenu/submenu.component.js

@@ -12,7 +12,7 @@ import MenuItem from "../../menu-item";
 import { characterNavigation } from "../keyboard-navigation";
 import ScrollableBlock from "../../scrollable-block";
 import SubmenuContext from "./submenu.context";
-import ClickAwayWrapper from "../../../../__internal__/click-away-wrapper";
+import useClickAwayListener from "../../../../hooks/__internal__/useClickAwayListener";
 const Submenu = /*#__PURE__*/React.forwardRef(({
   children,
   className,
@@ -205,6 +205,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
   }, [characterString]);
+  useClickAwayListener([submenuRef], handleClickAway);
 
   if (inFullscreenView) {
     return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
@@ -238,10 +239,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
     }, child))));
   }
 
-  return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
-    handleClickAway: handleClickAway,
-    targets: [submenuRef]
-  }, /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
+  return /*#__PURE__*/React.createElement(StyledSubmenuWrapper, {
     "data-component": "submenu-wrapper",
     onMouseOver: !clickToOpen ? () => openSubmenu() : undefined,
     onMouseLeave: () => closeSubmenu(),
@@ -279,7 +277,7 @@ const Submenu = /*#__PURE__*/React.forwardRef(({
       updateFocusIndex: setSubmenuFocusIndex,
       itemIndex: child.type === MenuItem ? index : undefined
     }
-  }, child)))));
+  }, child))));
 });
 Submenu.propTypes = {
   /** Children elements */

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -2,6 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useCallback, useEffect, useState, useRef, useMemo } from "react";
 import PropTypes from "prop-types";
+import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import { StyledMultiActionButton, StyledButtonChildrenContainer } from "./multi-action-button.style";
 import Button, { ButtonWithForwardRef } from "../button";
 import Events from "../../__internal__/utils/helpers/events";
@@ -105,31 +106,20 @@ const MultiActionButton = ({
       (_additionalButtons$cu = additionalButtons.current[nextIndex].current) === null || _additionalButtons$cu === void 0 ? void 0 : _additionalButtons$cu.focus();
     }
   }, [buttonChildren, hideButtons]);
-  const handleClickOutside = useCallback(({
-    target
-  }) => {
-    var _ref$current, _buttonContainer$curr;
-
-    if (!((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.contains(target)) && !((_buttonContainer$curr = buttonContainer.current) !== null && _buttonContainer$curr !== void 0 && _buttonContainer$curr.contains(target))) {
-      hideButtons();
-    }
-  }, [hideButtons]);
   const addListeners = useCallback(() => {
     /* istanbul ignore else */
     if (!listening.current) {
-      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   const removeListeners = useCallback(() => {
     /* istanbul ignore else */
     if (listening.current) {
-      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
       listening.current = false;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   useEffect(() => {
     if (showAdditionalButtons) {
       addListeners();
@@ -200,6 +190,7 @@ const MultiActionButton = ({
     ref: buttonContainer
   }, childrenWithProps()));
 
+  useClickAwayListener([ref], hideButtons);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

package/esm/components/popover-container/popover-container.component.d.ts

@@ -36,7 +36,7 @@ export interface PopoverContainerProps extends PaddingProps {
     /** Sets the popover container dialog header name */
     title?: string;
     /** Callback fires when close icon clicked */
-    onClose?: (ev: React.MouseEvent<HTMLElement>) => void;
+    onClose?: (ev: React.MouseEvent<HTMLElement> | Event) => void;
     /** if `true` the popover-container is open */
     open?: boolean;
     /** Callback fires when open component is clicked */

package/esm/components/popover-container/popover-container.component.js

@@ -7,7 +7,7 @@ import { PopoverContainerWrapperStyle, PopoverContainerHeaderStyle, PopoverConta
 import Icon from "../icon";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
-import ClickAwayWrapper from "../../__internal__/click-away-wrapper";
+import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 
 const renderOpen = ({
   tabIndex,
@@ -118,19 +118,15 @@ const PopoverContainer = ({
     onClick: handleCloseButtonClick,
     ref: closeButtonRef,
     "aria-label": closeButtonAriaLabel
-  }; // TODO: Assign proper type after ClickAwayWrapper has been refactored
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  };
 
   const handleClickAway = e => {
     if (!isControlled) setIsOpenInternal(false);
     if (onClose) onClose(e);
   };
 
-  return /*#__PURE__*/React.createElement(ClickAwayWrapper, {
-    targets: [ref],
-    handleClickAway: handleClickAway,
-    eventTypeId: "mousedown"
-  }, /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
+  useClickAwayListener([ref], handleClickAway, "mousedown");
+  return /*#__PURE__*/React.createElement(PopoverContainerWrapperStyle, {
     "data-component": "popover-container",
     role: "region",
     "aria-labelledby": popoverContainerId,
@@ -158,7 +154,7 @@ const PopoverContainer = ({
   }, filterStyledSystemPaddingProps(rest)), /*#__PURE__*/React.createElement(PopoverContainerHeaderStyle, null, /*#__PURE__*/React.createElement(PopoverContainerTitleStyle, {
     id: popoverContainerId,
     "data-element": "popover-container-title"
-  }, title), renderCloseComponent(renderCloseComponentProps)), children))));
+  }, title), renderCloseComponent(renderCloseComponentProps)), children)));
 };
 
 PopoverContainer.propTypes = {

package/esm/components/split-button/split-button.component.js

@@ -4,6 +4,7 @@ import React, { useRef, useState, useContext, useCallback, useEffect } from "rea
 import { ThemeContext } from "styled-components";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
+import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import Icon from "../icon";
 import Button, { ButtonWithForwardRef } from "../button";
 import StyledSplitButton from "./split-button.style";
@@ -49,13 +50,6 @@ const SplitButton = ({
     if (isToggleButtonFocused.current) return;
     setShowAdditionalButtons(false);
   }, []);
-  const handleClickOutside = useCallback(({
-    target
-  }) => {
-    if (!splitButtonNode.current.contains(target) && buttonContainer.current && !buttonContainer.current.contains(target)) {
-      hideButtons();
-    }
-  }, [hideButtons]);
   const handleKeyDown = useCallback(ev => {
     const numOfChildren = children.length - 1;
     const currentIndex = additionalButtons.current.findIndex(node => node.current === document.activeElement);
@@ -88,19 +82,17 @@ const SplitButton = ({
   const addListeners = useCallback(() => {
     /* istanbul ignore else */
     if (!listening.current) {
-      document.addEventListener("click", handleClickOutside);
       document.addEventListener("keydown", handleKeyDown);
       listening.current = true;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   const removeListeners = useCallback(() => {
     /* istanbul ignore else */
     if (listening.current) {
-      document.removeEventListener("click", handleClickOutside);
       document.removeEventListener("keydown", handleKeyDown);
       listening.current = false;
     }
-  }, [handleKeyDown, handleClickOutside]);
+  }, [handleKeyDown]);
   useEffect(() => {
     if (showAdditionalButtons) {
       addListeners();
@@ -260,6 +252,7 @@ const SplitButton = ({
     }, childrenWithProps()));
   }
 
+  useClickAwayListener([splitButtonNode], hideButtons);
   return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtons,

package/esm/hooks/__internal__/useClickAwayListener/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./useClickAwayListener";

package/esm/hooks/__internal__/useClickAwayListener/index.js

@@ -0,0 +1 @@
+export { default } from "./useClickAwayListener";

package/esm/hooks/__internal__/useClickAwayListener/useClickAwayListener.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const _default: (targets: React.RefObject<HTMLElement>[], handleClickAway: (ev: Event) => void, eventTypeId?: "mousedown" | "click") => void;
+export default _default;

package/esm/hooks/__internal__/useClickAwayListener/useClickAwayListener.js

@@ -0,0 +1,23 @@
+import { useEffect, useRef } from "react";
+export default ((targets, handleClickAway, eventTypeId = "click") => {
+  const targetsRef = useRef(targets);
+  targetsRef.current = targets;
+  useEffect(() => {
+    const fnClickAway = ev => {
+      const clickedElements = targetsRef.current.filter(targetRef => {
+        var _targetRef$current;
+
+        return (_targetRef$current = targetRef.current) === null || _targetRef$current === void 0 ? void 0 : _targetRef$current.contains(ev === null || ev === void 0 ? void 0 : ev.target);
+      });
+
+      if (!(clickedElements !== null && clickedElements !== void 0 && clickedElements.length)) {
+        handleClickAway(ev);
+      }
+    };
+
+    document.addEventListener(eventTypeId, fnClickAway);
+    return function cleanup() {
+      document.removeEventListener(eventTypeId, fnClickAway);
+    };
+  }, [handleClickAway, eventTypeId]);
+});

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -126,12 +126,6 @@ const FocusTrap = ({
       setCurrentFocusedElement(element);
     }
   }, [focusableElements]);
-  (0, _react.useEffect)(() => {
-    document.addEventListener("focusin", updateCurrentFocusedElement);
-    return () => {
-      document.removeEventListener("focusin", updateCurrentFocusedElement);
-    };
-  }, [updateCurrentFocusedElement]);
   const refocusTrap = (0, _react.useCallback)(() => {
     var _wrapperRef$current;
 
@@ -165,13 +159,16 @@ const FocusTrap = ({
     }
   };
 
-  const focusProps = {
-    tabIndex,
-    onBlur
-  }; // passes focusProps if no tabindex has been explicitly set on the wrapper
+  const focusProps = hasNoTabIndex => ({ ...(hasNoTabIndex && {
+      tabIndex,
+      onBlur
+    }),
+    onFocus: updateCurrentFocusedElement
+  }); // passes focusProps, sets tabIndex and onBlur if no tabIndex has been expicitly set on child
+
 
   const clonedChildren = _react.default.Children.map(children, child => {
-    return child.props.tabIndex === undefined ? /*#__PURE__*/_react.default.cloneElement(child, focusProps) : child;
+    return /*#__PURE__*/_react.default.cloneElement(child, focusProps(child.props.tabIndex === undefined));
   });
 
   return /*#__PURE__*/_react.default.createElement("div", {

package/lib/__internal__/label/label.component.d.ts

@@ -10,7 +10,7 @@ export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLab
     /** Icon type */
     helpIcon?: IconType;
     /** Overrides the default tabindex of the Help component */
-    helpTabIndex?: string;
+    helpTabIndex?: number | string;
     /** A string that represents the ID of another form element */
     htmlFor?: string;
     /** The unique id of the label element */

package/lib/__internal__/label/label.component.js

@@ -117,7 +117,7 @@ const Label = ({
 
     return help && /*#__PURE__*/_react.default.createElement(_iconWrapper.default, wrapperProps, /*#__PURE__*/_react.default.createElement(_help.default, {
       tooltipId: tooltipId,
-      tabIndex: helpTabIndex,
+      tabIndex: Number(helpTabIndex),
       type: helpIcon,
       isFocused: isFocused
     }, help));
@@ -149,7 +149,7 @@ Label.propTypes = {
   "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "help": _propTypes.default.node,
   "helpIcon": _propTypes.default.oneOf(["add", "admin", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "arrow", "attach", "bank", "basket_with_squares", "basket", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "gift", "go", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "piggy_bank", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "three_boxes", "tick_circle", "tick", "true_tick", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
-  "helpTabIndex": _propTypes.default.string,
+  "helpTabIndex": _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   "htmlFor": _propTypes.default.string,
   "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
   "inline": _propTypes.default.bool,

package/lib/components/checkbox/checkbox-group.component.js

@@ -34,7 +34,6 @@ exports.CheckboxGroupContext = CheckboxGroupContext;
 const CheckboxGroup = props => {
   const {
     children,
-    groupName,
     legend,
     error,
     warning,
@@ -65,7 +64,6 @@ const CheckboxGroup = props => {
     legendInline: legendInline
   }, /*#__PURE__*/_react.default.createElement(CheckboxGroupContext.Provider, {
     value: {
-      inputName: groupName,
       error: !!error,
       warning: !!warning,
       info: !!info
@@ -95,9 +93,6 @@ CheckboxGroup.propTypes = {
   /** The Checkboxes to be rendered in the group */
   children: _propTypes.default.node.isRequired,
 
-  /** Specifies the name prop to be applied to each button in the group */
-  groupName: _propTypes.default.string.isRequired,
-
   /** Indicate that error has occurred
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */

package/lib/components/checkbox/checkbox-group.d.ts

@@ -15,8 +15,6 @@ interface CheckboxGroupProps extends ValidationProps, MarginProps {
   legendSpacing?: 1 | 2;
   /** The Checkboxes to be rendered in the group */
   children: React.ReactNode;
-  /** Specifies the name prop to be applied to each button in the group */
-  groupName: string;
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing?: 1 | 2;
   /** Flag to configure component as mandatory */

package/lib/components/checkbox/checkbox.component.js

@@ -74,8 +74,7 @@ const Checkbox = ({
   const {
     error: contextError,
     warning: contextWarning,
-    info: contextInfo,
-    inputName
+    info: contextInfo
   } = (0, _react.useContext)(_checkboxGroup.CheckboxGroupContext);
   const inputProps = {
     onClick,
@@ -103,7 +102,6 @@ const Checkbox = ({
     inputWidth,
     labelWidth,
     tooltipPosition,
-    inputName,
     ...props
   };
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {

package/lib/components/date/date.component.js

@@ -29,7 +29,7 @@ var _datePicker = _interopRequireDefault(require("./__internal__/date-picker"));
 
 var _dateRange = _interopRequireDefault(require("../date-range/date-range.context"));
 
-var _clickAwayWrapper = _interopRequireDefault(require("../../__internal__/click-away-wrapper"));
+var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__internal__/useClickAwayListener"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -303,11 +303,8 @@ const DateInput = ({
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement(_clickAwayWrapper.default, {
-    handleClickAway: handleClickAway,
-    eventTypeId: "mousedown",
-    targets: [parentRef, pickerRef]
-  }, /*#__PURE__*/_react.default.createElement(_date.default, _extends({
+  (0, _useClickAwayListener.default)([parentRef, pickerRef], handleClickAway, "mousedown");
+  return /*#__PURE__*/_react.default.createElement(_date.default, _extends({
     ref: wrapperRef,
     role: "presentation",
     size: size,
@@ -347,7 +344,7 @@ const DateInput = ({
     ref: pickerRef,
     pickerMouseDown: handlePickerMouseDown,
     open: open
-  })));
+  }));
 };
 
 DateInput.propTypes = { ..._textbox.default.propTypes,

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

@@ -51,7 +51,8 @@ const Sort = ({
     sortType: sortType,
     "aria-labelledby": id.current
   }, children, sortType && /*#__PURE__*/_react.default.createElement(_icon.default, {
-    type: sortType === "ascending" ? "sort_up" : "sort_down"
+    type: sortType === "ascending" ? "sort_up" : "sort_down",
+    color: "--colorsUtilityMajor200"
   })), !sortType && /*#__PURE__*/_react.default.createElement(_sort.StyledSpaceHolder, null));
 };
 

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

@@ -23,7 +23,6 @@ const StyledSort = _styledComponents.default.div`
     width: 16px;
     height: 16px;
     padding-left: 6px;
-    color: var(--colorsUtilityMajor200);
   }
 
   :hover {

package/lib/components/help/help.component.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+import { IconType } from "../icon";
+import { TooltipPositions } from "../tooltip/tooltip.config";
+export interface HelpProps extends MarginProps {
+    /** Overrides the default 'as' attribute of the Help component */
+    as?: keyof JSX.IntrinsicElements;
+    /** Aria label */
+    ariaLabel?: string;
+    /** The message to be displayed within the tooltip */
+    children?: React.ReactNode;
+    /** [Legacy] A custom class name for the component. */
+    className?: string;
+    /** The unique id of the component (used with aria-describedby for accessibility) */
+    helpId?: string;
+    /** A path for the anchor */
+    href?: string;
+    /** A boolean received from IconWrapper */
+    isFocused?: boolean;
+    /** Overrides the default tabindex of the component */
+    tabIndex?: number;
+    /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+    tooltipBgColor?: string;
+    /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+    tooltipFontColor?: string;
+    /** Overrides the default flip behaviour of the Tooltip,
+     *  must be an array containing some or all of ["top", "bottom", "left", "right"]
+     * (see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements)
+     */
+    tooltipFlipOverrides?: TooltipPositions[];
+    /** Id passed to the tooltip container, used for accessibility purposes */
+    tooltipId?: string;
+    /** Position of tooltip relative to target */
+    tooltipPosition?: TooltipPositions;
+    /** Help Icon type */
+    type?: IconType;
+    [key: string]: any;
+}
+export declare const Help: {
+    ({ as, ariaLabel, children, className, href, helpId, isFocused, tabIndex, tooltipBgColor, tooltipFontColor, tooltipFlipOverrides, tooltipId, tooltipPosition, type, ...rest }: HelpProps): JSX.Element;
+    displayName: string;
+};
+export default Help;