carbon-react 107.1.3 → 107.1.6

package/esm/components/tabs/tabs.component.js

@@ -33,12 +33,9 @@ const Tabs = ({
   const filteredChildren = useMemo(() => Children.toArray(children).filter(child => child), [children]);
   /** Array of the tabIds for the child nodes */
 
-  const tabIds = () => {
-    return filteredChildren.map(child => child.props.tabId);
-  };
+  const tabIds = useMemo(() => filteredChildren.map(child => child.props.tabId), [filteredChildren]);
   /** Array of refs to the TabTitle nodes */
 
-
   const tabRefs = useMemo(() => Array.from({
     length: filteredChildren.length
   }).map(() => /*#__PURE__*/createRef()), [filteredChildren.length]);
@@ -54,14 +51,14 @@ const Tabs = ({
   useLayoutEffect(() => {
     const selectedTab = selectedTabId || Children.toArray(children)[0].props.tabId;
 
-    if (!tabIds().includes(selectedTabId)) {
+    if (!tabIds.includes(selectedTabId)) {
       setTabStopId(React.Children.toArray(children)[0].props.tabId);
     } else {
       setTabStopId(selectedTab);
     }
 
-    setSelectedTabIdState(selectedTab); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    setSelectedTabIdState(selectedTab);
+  }, [children, selectedTabId, tabIds]);
   const updateErrors = useCallback((id, hasError) => {
     if (tabsErrors[id] !== hasError) {
       setTabsErrors({ ...tabsErrors,
@@ -102,6 +99,27 @@ const Tabs = ({
       onTabChange(tabid);
     }
   }, [onTabChange, isTabSelected, hasTabStop]);
+  const blurPreviousSelectedTab = useCallback(() => {
+    const previousTabIndex = tabIds.indexOf(previousSelectedTabId.current);
+    /* istanbul ignore else */
+
+    if (previousTabIndex !== -1) {
+      var _previousTabRef$curre;
+
+      const previousTabRef = tabRefs[previousTabIndex];
+      (_previousTabRef$curre = previousTabRef.current) === null || _previousTabRef$curre === void 0 ? void 0 : _previousTabRef$curre.blur();
+    }
+  }, [tabIds, tabRefs]);
+  useEffect(() => {
+    if (previousSelectedTabId.current !== selectedTabId) {
+      if (selectedTabId !== selectedTabIdState) {
+        setSelectedTabIdState(selectedTabId);
+        blurPreviousSelectedTab();
+      }
+
+      previousSelectedTabId.current = selectedTabId;
+    }
+  }, [blurPreviousSelectedTab, previousSelectedTabId, selectedTabId, selectedTabIdState]);
   /** Determines if the tab titles are in a vertical format. */
 
   const isVertical = currentPosition => currentPosition === "left";
@@ -128,15 +146,14 @@ const Tabs = ({
   const goToTab = (event, index) => {
     event.preventDefault();
     let newIndex = index;
-    const ids = tabIds();
 
     if (index < 0) {
-      newIndex = ids.length - 1;
-    } else if (index === ids.length) {
+      newIndex = tabIds.length - 1;
+    } else if (index === tabIds.length) {
       newIndex = 0;
     }
 
-    const nextTabId = ids[newIndex];
+    const nextTabId = tabIds[newIndex];
     const nextRef = tabRefs[newIndex];
     updateVisibleTab(nextTabId);
     focusTab(nextRef);
@@ -274,15 +291,6 @@ const Tabs = ({
     return tabs;
   };
 
-  useEffect(() => {
-    if (previousSelectedTabId.current !== selectedTabId) {
-      if (selectedTabId !== selectedTabIdState) {
-        setSelectedTabIdState(selectedTabId);
-      }
-
-      previousSelectedTabId.current = selectedTabId;
-    }
-  }, [previousSelectedTabId, selectedTabId, selectedTabIdState]);
   return /*#__PURE__*/React.createElement(StyledTabs, _extends({
     className: className,
     position: isInSidebar ? "left" : position,

package/lib/__internal__/input/input.component.js

@@ -238,6 +238,9 @@ Input.propTypes = {
   "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "true"]), _propTypes.default.bool]),
   "contextMenu": _propTypes.default.string,
   "crossOrigin": _propTypes.default.string,
+  "css": _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number, _propTypes.default.object, _propTypes.default.shape({
+    "__emotion_styles": _propTypes.default.any.isRequired
+  }), _propTypes.default.string, _propTypes.default.bool]),
   "dangerouslySetInnerHTML": _propTypes.default.shape({
     "__html": _propTypes.default.string.isRequired
   }),

package/lib/__internal__/label/icon-wrapper.style.d.ts

@@ -0,0 +1,2 @@
+declare const StyledIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export default StyledIconWrapper;

package/lib/__internal__/label/icon-wrapper.style.js

@@ -13,7 +13,7 @@ var _help = _interopRequireDefault(require("../../components/help/help.style"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const IconWrapperStyle = _styledComponents.default.div`
+const StyledIconWrapper = _styledComponents.default.div`
   display: inline-block;
   margin: 0;
   margin-left: 4px;
@@ -32,5 +32,5 @@ const IconWrapperStyle = _styledComponents.default.div`
     position: static;
   }
 `;
-var _default = IconWrapperStyle;
+var _default = StyledIconWrapper;
 exports.default = _default;

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

@@ -1 +1,2 @@
-export { default } from "./label";
+export { default } from "./label.component";
+export type { LabelProps } from "./label.component";

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

@@ -0,0 +1,27 @@
+import React from "react";
+import { StyledLabelProps, StyledLabelContainerProps } from "./label.style";
+import { ValidationProps } from "../validations";
+import { IconType } from "../../components/icon";
+export interface LabelProps extends ValidationProps, StyledLabelProps, StyledLabelContainerProps {
+    /** Children elements */
+    children?: React.ReactNode;
+    /** A message that the Help component will display */
+    help?: React.ReactNode;
+    /** Icon type */
+    helpIcon?: IconType;
+    /** Overrides the default tabindex of the Help component */
+    helpTabIndex?: string;
+    /** A string that represents the ID of another form element */
+    htmlFor?: string;
+    /** The unique id of the label element */
+    labelId?: string;
+    /** The unique id of the Help component tooltip, used for accessibility */
+    tooltipId?: string;
+    /** Whether to show the validation icon */
+    useValidationIcon?: boolean;
+    /** Id of the validation icon */
+    validationIconId?: string;
+}
+export declare const Label: ({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ align, children, disabled, error, help, helpIcon, helpTabIndex, htmlFor, info, inline, isRequired, labelId, optional, pr, pl, tooltipId, useValidationIcon, validationIconId, warning, width, }: LabelProps) => JSX.Element>;
+export default _default;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.Label = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -41,30 +41,30 @@ const tooltipPosition = ({
   info,
   inline
 }) => {
-  return (error || warning || info) && inline === true ? "top" : "right";
+  return (error || warning || info) && inline ? "top" : "right";
 };
 
 const Label = ({
-  disabled,
-  inline,
   align = "right",
-  width,
-  optional,
-  labelId,
-  tooltipId,
   children,
+  disabled,
   error,
-  warning,
-  info,
   help,
   helpIcon,
   helpTabIndex,
-  useValidationIcon = true,
   htmlFor,
+  info,
+  inline,
+  isRequired,
+  labelId,
+  optional,
   pr,
   pl,
-  isRequired,
-  validationIconId
+  tooltipId,
+  useValidationIcon = true,
+  validationIconId,
+  warning,
+  width = 30
 }) => {
   const [isFocused, setFocus] = (0, _react.useState)(false);
   const {
@@ -76,14 +76,14 @@ const Label = ({
     onMouseLeave: onGroupMouseLeave
   } = (0, _react.useContext)(_inputBehaviour.InputGroupContext);
 
-  const handleMouseEnter = ev => {
-    if (onMouseEnter) onMouseEnter(ev);
-    if (onGroupMouseEnter) onGroupMouseEnter(ev);
+  const handleMouseEnter = () => {
+    if (onMouseEnter) onMouseEnter();
+    if (onGroupMouseEnter) onGroupMouseEnter();
   };
 
-  const handleMouseLeave = ev => {
-    if (onMouseLeave) onMouseLeave(ev);
-    if (onGroupMouseLeave) onGroupMouseLeave(ev);
+  const handleMouseLeave = () => {
+    if (onMouseLeave) onMouseLeave();
+    if (onGroupMouseLeave) onGroupMouseLeave();
   };
 
   const icon = () => {
@@ -141,66 +141,28 @@ const Label = ({
   }, children), icon());
 };
 
+exports.Label = Label;
 Label.propTypes = {
-  /** Label width */
-  width: _propTypes.default.number,
-
-  /** Label alignment */
-  align: _propTypes.default.oneOf(["left", "right"]),
-
-  /** When true, label is placed in line an input */
-  inline: _propTypes.default.bool,
-
-  /** If true, the component will be disabled */
-  disabled: _propTypes.default.bool,
-
-  /** Flag to configure component as optional in Form */
-  optional: _propTypes.default.bool,
-
-  /** The unique id of the label element */
-  labelId: _propTypes.default.string,
-
-  /** The unique id of the Help component tooltip, used for accessibility */
-  tooltipId: _propTypes.default.string,
-
-  /** Children elements */
-  children: _propTypes.default.node,
-
-  /** Status of error validations */
-  error: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Status of warnings */
-  warning: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** Status of info */
-  info: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
-
-  /** A message that the Help component will display */
-  help: _propTypes.default.node,
-
-  /** Icon type */
-  helpIcon: _propTypes.default.string,
-
-  /** Overrides the default tabindex of the Help component */
-  helpTabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
-
-  /** Whether to show the validation icon */
-  useValidationIcon: _propTypes.default.bool,
-
-  /** A string that represents the ID of another form element */
-  htmlFor: _propTypes.default.string,
-
-  /** Padding right, integer multiplied by base spacing constant (8) */
-  pr: _propTypes.default.oneOf([1, 2]),
-
-  /** Padding left, integer multiplied by base spacing constant (8) */
-  pl: _propTypes.default.oneOf([1, 2]),
-
-  /** Flag to configure component as mandatory */
-  isRequired: _propTypes.default.bool,
-
-  /** Id of the validation icon */
-  validationIconId: _propTypes.default.string
+  "align": _propTypes.default.oneOf(["left", "right"]),
+  "children": _propTypes.default.node,
+  "disabled": _propTypes.default.bool,
+  "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "help": _propTypes.default.node,
+  "helpIcon": _propTypes.default.oneOf(["add", "alert", "analysis", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_up", "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", "copy", "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", "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", "graph", "grid", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "ledger_arrow_left", "ledger_arrow_right", "ledger", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "messages", "minus_large", "minus", "mobile", "money_bag", "pause_circle", "pause", "pdf", "people_switch", "people", "person_info", "person_tick", "person", "phone", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "three_boxes", "tick_circle", "tick", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
+  "helpTabIndex": _propTypes.default.string,
+  "htmlFor": _propTypes.default.string,
+  "info": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "inline": _propTypes.default.bool,
+  "isRequired": _propTypes.default.bool,
+  "labelId": _propTypes.default.string,
+  "optional": _propTypes.default.bool,
+  "pl": _propTypes.default.oneOf([1, 2]),
+  "pr": _propTypes.default.oneOf([1, 2]),
+  "tooltipId": _propTypes.default.string,
+  "useValidationIcon": _propTypes.default.bool,
+  "validationIconId": _propTypes.default.string,
+  "warning": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
+  "width": _propTypes.default.number
 };
 
 var _default = /*#__PURE__*/_react.default.memo(Label);

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

@@ -1,3 +1,23 @@
-export const StyledLabelContainer: any;
-export default LabelStyle;
-declare const LabelStyle: import("styled-components").StyledComponent<"label", any, {}, never>;
+export interface StyledLabelProps {
+    /** If true, the component will be disabled */
+    disabled?: boolean;
+    /** Flag to configure component as mandatory */
+    isRequired?: boolean;
+}
+declare const StyledLabel: import("styled-components").StyledComponent<"label", any, StyledLabelProps, never>;
+export interface StyledLabelContainerProps {
+    /** Label alignment */
+    align?: "left" | "right";
+    /** When true, label is placed in line an input */
+    inline?: boolean;
+    /** Flag to configure component as optional in Form */
+    optional?: boolean;
+    /** Padding right, integer multiplied by base spacing constant (8) */
+    pr?: 1 | 2;
+    /** Padding left, integer multiplied by base spacing constant (8) */
+    pl?: 1 | 2;
+    /** Label width */
+    width?: number;
+}
+export declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, StyledLabelContainerProps, never>;
+export default StyledLabel;

package/lib/__internal__/label/label.style.js

@@ -7,15 +7,11 @@ exports.default = exports.StyledLabelContainer = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-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; }
 
-const LabelStyle = _styledComponents.default.label`
+const StyledLabel = _styledComponents.default.label`
   color: var(--colorsUtilityYin090);
   display: block;
   font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
@@ -37,10 +33,7 @@ const LabelStyle = _styledComponents.default.label`
       color: var(--colorsUtilityYin030);
     `}
 `;
-LabelStyle.propTypes = {
-  disabled: _propTypes.default.bool,
-  isRequired: _propTypes.default.bool
-};
+const DEFAULT_CONTAINER_WIDTH = 30;
 const StyledLabelContainer = _styledComponents.default.div`
   display: flex;
   align-items: center;
@@ -62,7 +55,7 @@ const StyledLabelContainer = _styledComponents.default.div`
         padding-left: var(${pl === 1 ? "--spacing100" : "--spacing200"});
       `};
       justify-content: ${align === "right" ? "flex-end" : "flex-start"};
-      width: ${width === 0 ? StyledLabelContainer.defaultProps.width : width}%;
+      width: ${width || DEFAULT_CONTAINER_WIDTH}%;
     `}
 
   ${({
@@ -76,16 +69,5 @@ const StyledLabelContainer = _styledComponents.default.div`
     `}
 `;
 exports.StyledLabelContainer = StyledLabelContainer;
-StyledLabelContainer.defaultProps = {
-  align: "right",
-  width: 30
-};
-StyledLabelContainer.propTypes = {
-  align: _propTypes.default.oneOf(["left", "right"]),
-  inline: _propTypes.default.bool,
-  width: _propTypes.default.number,
-  pr: _propTypes.default.number,
-  pl: _propTypes.default.number
-};
-var _default = LabelStyle;
+var _default = StyledLabel;
 exports.default = _default;

package/lib/__internal__/utils/helpers/events/events.d.ts

@@ -13,41 +13,11 @@ declare const Events: {
      * A method to determine if an event is of a particular type
      * */
     isEventType: (ev: React.SyntheticEvent | Event, type: string) => boolean;
-    /**
-     * A method to determine whether a key down event was an arrow key
-     * */
-    isNavigationKeyup: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * A method to determine whether a key down event was an enter key
-     * */
-    isEnterKeyup: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * A method to determine whether a key up event is allowed or not.
-     * */
-    isValidKeypress: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Determines if a number key along the top of the keyboard or a number key on the
      * keypad is pressed
      * */
     isNumberKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is part of the numpad
-     * includes symbols
-     * */
-    isNumpadKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is a alphabet key
-     * Case insensitive
-     * */
-    isAlphabetKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is a valid symbol
-     * */
-    isSymbolKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is a navigation key
-     * */
-    isNavigationKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Determines if the key pressed is a navigation left key
      * */
@@ -64,10 +34,6 @@ declare const Events: {
      * Determines if the key pressed is a navigation down key
      * */
     isDownKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is a meta key
-     * */
-    isMetaKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Determines if the key pressed is the escape key
      * */
@@ -80,18 +46,6 @@ declare const Events: {
      * Determines if the key pressed is the tab key
      * */
     isTabKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the backspace key
-     * */
-    isBackspaceKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the delete key
-     * */
-    isDeleteKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the backspace or delete key
-     * */
-    isDeletingKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Determines if the key pressed is the shift key
      * */
@@ -104,18 +58,6 @@ declare const Events: {
      * Determines if the key pressed is the space key or enter key
      * */
     isEnterOrSpaceKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the period key
-     * */
-    isPeriodKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the comma key
-     * */
-    isCommaKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
-    /**
-     * Determines if the key pressed is the minus key
-     * */
-    isMinusKey: (ev: React.KeyboardEvent | KeyboardEvent) => boolean;
     /**
      * Determines if the key pressed is the home key
      * */