carbon-react 107.1.3 → 107.1.6

package/lib/components/anchor-navigation/anchor-section-divider.component.d.ts

@@ -0,0 +1,4 @@
+declare const AnchorSectionDivider: import("styled-components").StyledComponent<"div", any, {
+    "data-element": string;
+}, "data-element">;
+export default AnchorSectionDivider;

package/lib/components/anchor-navigation/{anchor-section-divider/anchor-section-divider.style.js → anchor-section-divider.component.js}

@@ -9,11 +9,12 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StyledAnchorDivider = _styledComponents.default.div.attrs({
+const AnchorSectionDivider = _styledComponents.default.div.attrs({
   "data-element": "anchor-navigation-divider"
 })`
   background-color: var(--colorsActionMinor200);
   height: 1px;
 `;
-var _default = StyledAnchorDivider;
+AnchorSectionDivider.displayName = "AnchorSectionDivider";
+var _default = AnchorSectionDivider;
 exports.default = _default;

package/lib/components/anchor-navigation/index.d.ts

@@ -1,3 +1,5 @@
-export { default as AnchorNavigation } from "./anchor-navigation";
-export { default as AnchorNavigationItem } from "./anchor-navigation-item/anchor-navigation-item";
-export { default as AnchorSectionDivider } from "./anchor-section-divider/anchor-section-divider";
+export { default as AnchorNavigation } from "./anchor-navigation.component";
+export { default as AnchorNavigationItem } from "./anchor-navigation-item/anchor-navigation-item.component";
+export { default as AnchorSectionDivider } from "./anchor-section-divider.component";
+export type { AnchorNavigationProps } from "./anchor-navigation.component";
+export type { AnchorNavigationItemProps } from "./anchor-navigation-item/anchor-navigation-item.component";

package/lib/components/anchor-navigation/index.js

@@ -26,6 +26,6 @@ var _anchorNavigation = _interopRequireDefault(require("./anchor-navigation.comp
 
 var _anchorNavigationItem = _interopRequireDefault(require("./anchor-navigation-item/anchor-navigation-item.component"));
 
-var _anchorSectionDivider = _interopRequireDefault(require("./anchor-section-divider/anchor-section-divider.style"));
+var _anchorSectionDivider = _interopRequireDefault(require("./anchor-section-divider.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -87,6 +87,16 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
     disabled
   }, ev) => {
     if (!disabled) {
+      var _inputElement$current;
+
+      const {
+        id,
+        name
+      } = inputElement === null || inputElement === void 0 ? void 0 : (_inputElement$current = inputElement.current) === null || _inputElement$current === void 0 ? void 0 : _inputElement$current.firstChild;
+      ev.target = { ...ev.target,
+        id,
+        name
+      };
       onDayClick(date, ev);
     }
   };
@@ -123,7 +133,6 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
       }, weekdaysShort[weekday]);
     },
     navbarElement: /*#__PURE__*/_react.default.createElement(_navbar.default, null),
-    enableOutsideDays: true,
     fixedWeeks: true,
     initialMonth: selectedDays || undefined,
     disabledDays: (0, _utils.getDisabledDays)(minDate, maxDate),

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

@@ -143,5 +143,6 @@ FlatTableCell.propTypes = {
   /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: _propTypes.default.string
 };
+FlatTableCell.displayName = "FlatTableCell";
 var _default = FlatTableCell;
 exports.default = _default;

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

@@ -107,5 +107,6 @@ FlatTableCheckbox.propTypes = {
    */
   reportCellWidth: _propTypes.default.func
 };
+FlatTableCheckbox.displayName = "FlatTableCheckbox";
 var _default = FlatTableCheckbox;
 exports.default = _default;

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

@@ -105,5 +105,6 @@ FlatTableHeader.propTypes = {
 FlatTableHeader.defaultProps = {
   align: "left"
 };
+FlatTableHeader.displayName = "FlatTableHeader";
 var _default = FlatTableHeader;
 exports.default = _default;

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

@@ -59,10 +59,8 @@ const FlatTableRow = /*#__PURE__*/_react.default.forwardRef(({
   const firstColumnExpandable = expandableArea === "firstColumn";
   const [stickyCellWidths, setStickyCellWidths] = (0, _react.useState)([]);
   const [leftPositions, setLeftPositions] = (0, _react.useState)([]);
-
-  const childrenArray = _react.default.Children.toArray(children);
-
-  const rowHeaderIndex = childrenArray.findIndex(child => child.type === _flatTableRowHeader.default);
+  const childrenArray = (0, _react.useMemo)(() => _react.default.Children.toArray(children), [children]);
+  const rowHeaderIndex = (0, _react.useMemo)(() => childrenArray.findIndex(child => child.type.displayName === _flatTableRowHeader.default.displayName), [childrenArray]);
   const themeContext = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
   const reportCellWidth = (0, _react.useCallback)((width, index) => {
     const copiedArray = stickyCellWidths;

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

@@ -100,5 +100,6 @@ FlatTableRowHeader.propTypes = {
   /** Sets a vertical right border color, provide design token, any color from palette or any valid css color value. */
   verticalBorderColor: _propTypes.default.string
 };
+FlatTableRowHeader.displayName = "FlatTableRowHeader";
 var _default = FlatTableRowHeader;
 exports.default = _default;

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

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

package/lib/components/menu/__internal__/spec-helper/index.js

@@ -13,8 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const events = {
   space: {
-    key: "Space",
-    which: 32,
+    key: " ",
     preventDefault: jest.fn()
   }
 };

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

@@ -172,7 +172,7 @@ const Submenu = /*#__PURE__*/_react.default.forwardRef(({
         nextIndex = numberOfChildren - 1;
       }
 
-      if (_events.default.isAlphabetKey(event) || _events.default.isNumberKey(event)) {
+      if (event.key.length === 1) {
         event.stopPropagation();
 
         if (characterTimer.current) {

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

@@ -304,6 +304,9 @@ MultiActionButton.propTypes = {
   "color": _propTypes.default.string,
   "contentEditable": _propTypes.default.oneOfType([_propTypes.default.oneOf(["false", "inherit", "true"]), _propTypes.default.bool]),
   "contextMenu": _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/components/numeral-date/numeral-date.component.js

@@ -130,7 +130,7 @@ const NumeralDate = ({
   });
 
   const onKeyPress = ev => {
-    const isValidKey = _events.default.isNumberKey(ev) || _events.default.isDeletingKey(ev) || _events.default.isTabKey(ev);
+    const isValidKey = _events.default.isNumberKey(ev) || _events.default.isTabKey(ev) || ev.key === "Delete" || ev.key === "Backspace";
 
     if (!isValidKey) {
       ev.preventDefault();

package/lib/components/search/search.component.js

@@ -25,8 +25,6 @@ var _textbox = _interopRequireDefault(require("../textbox"));
 
 var _button = _interopRequireDefault(require("../button"));
 
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
-
 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; }
@@ -145,7 +143,7 @@ const Search = ({
   };
 
   const handleKeyDown = ev => {
-    if (_events.default.isAlphabetKey(ev) || _events.default.isNumberKey(ev)) {
+    if (ev.key.length === 1) {
       ev.stopPropagation();
     }
 

package/lib/components/tabs/tabs.component.js

@@ -63,12 +63,9 @@ const Tabs = ({
   const filteredChildren = (0, _react.useMemo)(() => _react.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 = (0, _react.useMemo)(() => filteredChildren.map(child => child.props.tabId), [filteredChildren]);
   /** Array of refs to the TabTitle nodes */
 
-
   const tabRefs = (0, _react.useMemo)(() => Array.from({
     length: filteredChildren.length
   }).map(() => /*#__PURE__*/(0, _react.createRef)()), [filteredChildren.length]);
@@ -84,14 +81,14 @@ const Tabs = ({
   (0, _react.useLayoutEffect)(() => {
     const selectedTab = selectedTabId || _react.Children.toArray(children)[0].props.tabId;
 
-    if (!tabIds().includes(selectedTabId)) {
+    if (!tabIds.includes(selectedTabId)) {
       setTabStopId(_react.default.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 = (0, _react.useCallback)((id, hasError) => {
     if (tabsErrors[id] !== hasError) {
       setTabsErrors({ ...tabsErrors,
@@ -132,6 +129,27 @@ const Tabs = ({
       onTabChange(tabid);
     }
   }, [onTabChange, isTabSelected, hasTabStop]);
+  const blurPreviousSelectedTab = (0, _react.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]);
+  (0, _react.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";
@@ -158,15 +176,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);
@@ -310,15 +327,6 @@ const Tabs = ({
     return tabs;
   };
 
-  (0, _react.useEffect)(() => {
-    if (previousSelectedTabId.current !== selectedTabId) {
-      if (selectedTabId !== selectedTabIdState) {
-        setSelectedTabIdState(selectedTabId);
-      }
-
-      previousSelectedTabId.current = selectedTabId;
-    }
-  }, [previousSelectedTabId, selectedTabId, selectedTabIdState]);
   return /*#__PURE__*/_react.default.createElement(_tabs.default, _extends({
     className: className,
     position: isInSidebar ? "left" : position,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "107.1.3",
+  "version": "107.1.6",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -18,8 +18,8 @@
     "start:debug-theme": "cross-env STORYBOOK_DEBUG_THEME=true npm run start",
     "test": "jest --config=./jest.conf.json",
     "test-update": "jest --config=./jest.conf.json --updateSnapshot",
-    "test:cypress": "cypress open",
-    "cypress:react": "npx cypress open-ct",
+    "test:cypress": "npx cypress open --e2e",
+    "cypress:react": "npx cypress open --component",
     "debug": "node --inspect ./node_modules/jest-cli/bin/jest --watch --config=./jest.conf.json",
     "format": "prettier --write './src'",
     "lint": "eslint ./src",
@@ -115,7 +115,7 @@
     "core-js": "^3.20.3",
     "cross-env": "^5.2.0",
     "css-loader": "4.0.0",
-    "cypress": "^9.6.0",
+    "cypress": "^10.1.0",
     "cypress-axe": "^0.14.0",
     "cypress-cucumber-preprocessor": "^4.3.1",
     "cypress-each": "^1.11.0",

package/esm/__internal__/label/label.d.ts

@@ -1,43 +0,0 @@
-import * as React from "react";
-import { ValidationProps } from "../validations";
-
-export interface LabelPropTypes extends ValidationProps {
-  /** Label width */
-  width?: number;
-  /** Label alignment */
-  align?: "left" | "right";
-  /** When true, label is placed in line an input */
-  inline?: boolean;
-  /** Flag to configure component as mandatory */
-  isRequired?: boolean;
-  /** If true, the component will be disabled */
-  disabled?: boolean;
-  /** Flag to configure component as optional in Form */
-  optional?: boolean;
-  /** The unique id of the label element */
-  labelId?: string;
-  /** The unique id of the Help component tooltip, used for accessibility */
-  tooltipId?: string;
-  /** Children elements */
-  children?: React.ReactNode;
-  /** A message that the Help component will display */
-  help?: React.ReactNode;
-  /** Icon type */
-  helpIcon?: string;
-  /** Overrides the default tabindex of the Help component */
-  helpTabIndex?: string;
-  /** Whether to show the validation icon */
-  useValidationIcon?: boolean;
-  /** A string that represents the ID of another form element */
-  htmlFor?: string;
-  /** Padding right, integer multiplied by base spacing constant (8) */
-  pr?: 1 | 2;
-  /** Padding left, integer multiplied by base spacing constant (8) */
-  pl?: 1 | 2;
-  /** Id of the validation icon */
-  validationIconId?: string;
-}
-
-declare function Label(props: LabelPropTypes): JSX.Element;
-
-export default Label;

package/esm/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.d.ts

@@ -1,23 +0,0 @@
-import * as React from "react";
-
-export interface AnchorNavigationItemProps {
-  children?: React.ReactNode;
-  /** href to be passed to the anchor element, can be linked with id passed to the scrollable section */
-  href?: string;
-  /** Indicates if component is selected */
-  isSelected?: boolean;
-  /** onClick handler */
-  onClick?: (ev: React.MouseEvent<HTMLAnchorElement>) => void;
-  /** OnKeyDown handler */
-  onKeyDown?: (ev: React.KeyboardEvent<HTMLAnchorElement>) => void;
-  /** tabIndex passed to the anchor element */
-  tabIndex?: number;
-  /** Reference to the section html element meant to be shown   */
-  target?: React.Ref<HTMLElement>;
-}
-
-declare function AnchorNavigationItem(
-  props: AnchorNavigationItemProps & React.RefAttributes<HTMLAnchorElement>
-): JSX.Element;
-
-export default AnchorNavigationItem;

package/esm/components/anchor-navigation/anchor-navigation.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-
-export interface AnchorNavigationProps {
-  children?: React.ReactNode;
-  /** The AnchorNavigationItems components to be rendered in the sticky navigation */
-  stickyNavigation?: React.ReactNode;
-}
-
-declare function AnchorNavigation(props: AnchorNavigationProps): JSX.Element;
-
-export default AnchorNavigation;

package/esm/components/anchor-navigation/anchor-section-divider/anchor-section-divider.d.ts

@@ -1,12 +0,0 @@
-import { StyledComponentProps } from "styled-components";
-
-declare function AnchorSectionDivider(
-  attrs: StyledComponentProps<
-    "div",
-    Record<string, unknown>,
-    Record<string, unknown>,
-    ""
-  >
-): JSX.Element;
-
-export default AnchorSectionDivider;

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

@@ -1,43 +0,0 @@
-import * as React from "react";
-import { ValidationProps } from "../validations";
-
-export interface LabelPropTypes extends ValidationProps {
-  /** Label width */
-  width?: number;
-  /** Label alignment */
-  align?: "left" | "right";
-  /** When true, label is placed in line an input */
-  inline?: boolean;
-  /** Flag to configure component as mandatory */
-  isRequired?: boolean;
-  /** If true, the component will be disabled */
-  disabled?: boolean;
-  /** Flag to configure component as optional in Form */
-  optional?: boolean;
-  /** The unique id of the label element */
-  labelId?: string;
-  /** The unique id of the Help component tooltip, used for accessibility */
-  tooltipId?: string;
-  /** Children elements */
-  children?: React.ReactNode;
-  /** A message that the Help component will display */
-  help?: React.ReactNode;
-  /** Icon type */
-  helpIcon?: string;
-  /** Overrides the default tabindex of the Help component */
-  helpTabIndex?: string;
-  /** Whether to show the validation icon */
-  useValidationIcon?: boolean;
-  /** A string that represents the ID of another form element */
-  htmlFor?: string;
-  /** Padding right, integer multiplied by base spacing constant (8) */
-  pr?: 1 | 2;
-  /** Padding left, integer multiplied by base spacing constant (8) */
-  pl?: 1 | 2;
-  /** Id of the validation icon */
-  validationIconId?: string;
-}
-
-declare function Label(props: LabelPropTypes): JSX.Element;
-
-export default Label;

package/lib/components/anchor-navigation/anchor-navigation-item/anchor-navigation-item.d.ts

@@ -1,23 +0,0 @@
-import * as React from "react";
-
-export interface AnchorNavigationItemProps {
-  children?: React.ReactNode;
-  /** href to be passed to the anchor element, can be linked with id passed to the scrollable section */
-  href?: string;
-  /** Indicates if component is selected */
-  isSelected?: boolean;
-  /** onClick handler */
-  onClick?: (ev: React.MouseEvent<HTMLAnchorElement>) => void;
-  /** OnKeyDown handler */
-  onKeyDown?: (ev: React.KeyboardEvent<HTMLAnchorElement>) => void;
-  /** tabIndex passed to the anchor element */
-  tabIndex?: number;
-  /** Reference to the section html element meant to be shown   */
-  target?: React.Ref<HTMLElement>;
-}
-
-declare function AnchorNavigationItem(
-  props: AnchorNavigationItemProps & React.RefAttributes<HTMLAnchorElement>
-): JSX.Element;
-
-export default AnchorNavigationItem;

package/lib/components/anchor-navigation/anchor-navigation.d.ts

@@ -1,11 +0,0 @@
-import * as React from "react";
-
-export interface AnchorNavigationProps {
-  children?: React.ReactNode;
-  /** The AnchorNavigationItems components to be rendered in the sticky navigation */
-  stickyNavigation?: React.ReactNode;
-}
-
-declare function AnchorNavigation(props: AnchorNavigationProps): JSX.Element;
-
-export default AnchorNavigation;

package/lib/components/anchor-navigation/anchor-section-divider/anchor-section-divider.d.ts

@@ -1,12 +0,0 @@
-import { StyledComponentProps } from "styled-components";
-
-declare function AnchorSectionDivider(
-  attrs: StyledComponentProps<
-    "div",
-    Record<string, unknown>,
-    Record<string, unknown>,
-    ""
-  >
-): JSX.Element;
-
-export default AnchorSectionDivider;