carbon-react 111.3.2 → 111.4.0

package/esm/components/dialog/dialog.component.d.ts

@@ -1,13 +1,14 @@
 import React from "react";
 import { ModalProps } from "../modal";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-declare type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+import { DialogSizes } from "./dialog.config";
+declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
+declare type PaddingValues = typeof PADDING_VALUES[number];
 export interface ContentPaddingInterface {
     p?: PaddingValues;
     py?: PaddingValues;
     px?: PaddingValues;
 }
-declare type DialogSizes = "auto" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
 export interface DialogProps extends ModalProps, TagProps {
     /** Custom class name  */
     className?: string;

package/esm/components/dialog/dialog.component.js

@@ -7,12 +7,13 @@ import Modal from "../modal";
 import Heading from "../heading";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 import { StyledDialog, StyledDialogTitle, StyledDialogContent, StyledDialogInnerContent } from "./dialog.style";
+import { TOP_MARGIN } from "./dialog.config";
 import FocusTrap from "../../__internal__/focus-trap";
 import IconButton from "../icon-button";
 import Icon from "../icon";
-import { TOP_MARGIN } from "./dialog.config";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useIsStickyFooterForm from "../../hooks/__internal__/useIsStickyFooterForm";
+const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
 
 const Dialog = ({
   className,

package/esm/components/dialog/dialog.config.d.ts

@@ -1,5 +1,6 @@
-export declare const DIALOG_SIZES: string[];
+export declare const DIALOG_SIZES: readonly ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
 export declare const TOP_MARGIN = 20;
 export declare const CONTENT_TOP_PADDING = 24;
 export declare const HORIZONTAL_PADDING = 32;
 export declare const CONTENT_BOTTOM_PADDING = 30;
+export declare type DialogSizes = typeof DIALOG_SIZES[number];

package/esm/components/dialog/dialog.config.js

@@ -1,4 +1,4 @@
-export const DIALOG_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
+export const DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
 export const TOP_MARGIN = 20;
 export const CONTENT_TOP_PADDING = 24;
 export const HORIZONTAL_PADDING = 32;

package/esm/components/dialog/dialog.style.d.ts

@@ -1,17 +1,8 @@
+import { DialogSizes } from "./dialog.config";
 import { ContentPaddingInterface } from "./dialog.component";
-declare const dialogSizes: {
-    auto: string;
-    "extra-small": string;
-    small: string;
-    "medium-small": string;
-    medium: string;
-    "medium-large": string;
-    large: string;
-    "extra-large": string;
-};
 declare type StyledDialogProps = {
     topMargin: number;
-    size?: keyof typeof dialogSizes;
+    size?: DialogSizes;
     dialogHeight?: string;
 };
 declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;

package/esm/components/dialog/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from "./dialog.component";
 export type { DialogProps } from "./dialog.component";
+export type { DialogSizes } from "./dialog.config";

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

@@ -21,6 +21,7 @@ const Tab = ({
   updateWarnings,
   updateInfos,
   href,
+  title,
   ...rest
 }) => {
   const [tabErrors, setTabErrors] = useState({});
@@ -92,7 +93,7 @@ Tab.propTypes = { ...paddingPropTypes,
   /** Overrides Title default layout with a one defined in this prop */
   customLayout: PropTypes.node,
 
-  /** Boolean indicating selected state of Tab. */
+  /** @ignore @private Boolean indicating selected state of Tab. */
   isTabSelected: PropTypes.bool,
 
   /** The position of the Tab. */

package/esm/components/tabs/tab/tab.d.ts

@@ -14,7 +14,7 @@ export interface TabProps extends PaddingProps {
   className?: string;
   /** The child elements of Tab component. */
   children?: React.ReactNode;
-  /** Boolean indicating selected state of Tab. */
+  /** @ignore @private Boolean indicating selected state of Tab. */
   isTabSelected?: boolean;
   /** The position of the Tab. */
   position?: "top" | "left";

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

@@ -1,6 +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); }
 
-import React, { useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, createRef, cloneElement, Children } from "react";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState, createRef, cloneElement, Children } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import Tab from "./tab";
@@ -40,7 +40,7 @@ const Tabs = ({
     length: filteredChildren.length
   }).map(() => /*#__PURE__*/createRef()), [filteredChildren.length]);
   const previousSelectedTabId = useRef(selectedTabId);
-  const [selectedTabIdState, setSelectedTabIdState] = useState();
+  const [selectedTabIdState, setSelectedTabIdState] = useState(selectedTabId || filteredChildren[0].props.tabId);
   const [tabStopId, setTabStopId] = useState();
   const {
     isInSidebar
@@ -48,17 +48,6 @@ const Tabs = ({
   const [tabsErrors, setTabsErrors] = useState({});
   const [tabsWarnings, setTabsWarnings] = useState({});
   const [tabsInfos, setTabsInfos] = useState({});
-  useLayoutEffect(() => {
-    const selectedTab = selectedTabId || Children.toArray(children)[0].props.tabId;
-
-    if (!tabIds.includes(selectedTabId)) {
-      setTabStopId(React.Children.toArray(children)[0].props.tabId);
-    } else {
-      setTabStopId(selectedTab);
-    }
-
-    setSelectedTabIdState(selectedTab);
-  }, [children, selectedTabId, tabIds]);
   const updateErrors = useCallback((id, hasError) => {
     if (tabsErrors[id] !== hasError) {
       setTabsErrors({ ...tabsErrors,
@@ -249,13 +238,8 @@ const Tabs = ({
 
 
   const visibleTab = () => {
-    let tab;
-    filteredChildren.forEach(child => {
-      if (isTabSelected(child.props.tabId)) {
-        tab = child;
-      }
-    });
-    return tab ? /*#__PURE__*/cloneElement(tab, { ...tab.props,
+    const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
+    return tab && /*#__PURE__*/cloneElement(tab, { ...tab.props,
       role: "tabpanel",
       position,
       isTabSelected: isTabSelected(tab.props.tabId),
@@ -264,7 +248,7 @@ const Tabs = ({
       updateErrors,
       updateWarnings,
       updateInfos
-    }) : null;
+    });
   };
   /** Builds all tabs where non selected tabs have class of hidden */
 

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

@@ -1,13 +1,14 @@
 import React from "react";
 import { ModalProps } from "../modal";
 import { TagProps } from "../../__internal__/utils/helpers/tags/tags";
-declare type PaddingValues = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+import { DialogSizes } from "./dialog.config";
+declare const PADDING_VALUES: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8];
+declare type PaddingValues = typeof PADDING_VALUES[number];
 export interface ContentPaddingInterface {
     p?: PaddingValues;
     py?: PaddingValues;
     px?: PaddingValues;
 }
-declare type DialogSizes = "auto" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
 export interface DialogProps extends ModalProps, TagProps {
     /** Custom class name  */
     className?: string;

package/lib/components/dialog/dialog.component.js

@@ -19,14 +19,14 @@ var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal_
 
 var _dialog = require("./dialog.style");
 
+var _dialog2 = require("./dialog.config");
+
 var _focusTrap = _interopRequireDefault(require("../../__internal__/focus-trap"));
 
 var _iconButton = _interopRequireDefault(require("../icon-button"));
 
 var _icon = _interopRequireDefault(require("../icon"));
 
-var _dialog2 = require("./dialog.config");
-
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 
 var _useIsStickyFooterForm = _interopRequireDefault(require("../../hooks/__internal__/useIsStickyFooterForm"));
@@ -39,6 +39,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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 PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+
 const Dialog = ({
   className,
   children,

package/lib/components/dialog/dialog.config.d.ts

@@ -1,5 +1,6 @@
-export declare const DIALOG_SIZES: string[];
+export declare const DIALOG_SIZES: readonly ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
 export declare const TOP_MARGIN = 20;
 export declare const CONTENT_TOP_PADDING = 24;
 export declare const HORIZONTAL_PADDING = 32;
 export declare const CONTENT_BOTTOM_PADDING = 30;
+export declare type DialogSizes = typeof DIALOG_SIZES[number];

package/lib/components/dialog/dialog.config.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.CONTENT_BOTTOM_PADDING = exports.HORIZONTAL_PADDING = exports.CONTENT_TOP_PADDING = exports.TOP_MARGIN = exports.DIALOG_SIZES = void 0;
-const DIALOG_SIZES = ["extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
+const DIALOG_SIZES = ["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"];
 exports.DIALOG_SIZES = DIALOG_SIZES;
 const TOP_MARGIN = 20;
 exports.TOP_MARGIN = TOP_MARGIN;

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

@@ -1,17 +1,8 @@
+import { DialogSizes } from "./dialog.config";
 import { ContentPaddingInterface } from "./dialog.component";
-declare const dialogSizes: {
-    auto: string;
-    "extra-small": string;
-    small: string;
-    "medium-small": string;
-    medium: string;
-    "medium-large": string;
-    large: string;
-    "extra-large": string;
-};
 declare type StyledDialogProps = {
     topMargin: number;
-    size?: keyof typeof dialogSizes;
+    size?: DialogSizes;
     dialogHeight?: string;
 };
 declare const StyledDialog: import("styled-components").StyledComponent<"div", any, StyledDialogProps & ContentPaddingInterface, never>;

package/lib/components/dialog/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from "./dialog.component";
 export type { DialogProps } from "./dialog.component";
+export type { DialogSizes } from "./dialog.config";

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

@@ -42,6 +42,7 @@ const Tab = ({
   updateWarnings,
   updateInfos,
   href,
+  title,
   ...rest
 }) => {
   const [tabErrors, setTabErrors] = (0, _react.useState)({});
@@ -113,7 +114,7 @@ Tab.propTypes = { ...paddingPropTypes,
   /** Overrides Title default layout with a one defined in this prop */
   customLayout: _propTypes.default.node,
 
-  /** Boolean indicating selected state of Tab. */
+  /** @ignore @private Boolean indicating selected state of Tab. */
   isTabSelected: _propTypes.default.bool,
 
   /** The position of the Tab. */

package/lib/components/tabs/tab/tab.d.ts

@@ -14,7 +14,7 @@ export interface TabProps extends PaddingProps {
   className?: string;
   /** The child elements of Tab component. */
   children?: React.ReactNode;
-  /** Boolean indicating selected state of Tab. */
+  /** @ignore @private Boolean indicating selected state of Tab. */
   isTabSelected?: boolean;
   /** The position of the Tab. */
   position?: "top" | "left";

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

@@ -70,7 +70,7 @@ const Tabs = ({
     length: filteredChildren.length
   }).map(() => /*#__PURE__*/(0, _react.createRef)()), [filteredChildren.length]);
   const previousSelectedTabId = (0, _react.useRef)(selectedTabId);
-  const [selectedTabIdState, setSelectedTabIdState] = (0, _react.useState)();
+  const [selectedTabIdState, setSelectedTabIdState] = (0, _react.useState)(selectedTabId || filteredChildren[0].props.tabId);
   const [tabStopId, setTabStopId] = (0, _react.useState)();
   const {
     isInSidebar
@@ -78,17 +78,6 @@ const Tabs = ({
   const [tabsErrors, setTabsErrors] = (0, _react.useState)({});
   const [tabsWarnings, setTabsWarnings] = (0, _react.useState)({});
   const [tabsInfos, setTabsInfos] = (0, _react.useState)({});
-  (0, _react.useLayoutEffect)(() => {
-    const selectedTab = selectedTabId || _react.Children.toArray(children)[0].props.tabId;
-
-    if (!tabIds.includes(selectedTabId)) {
-      setTabStopId(_react.default.Children.toArray(children)[0].props.tabId);
-    } else {
-      setTabStopId(selectedTab);
-    }
-
-    setSelectedTabIdState(selectedTab);
-  }, [children, selectedTabId, tabIds]);
   const updateErrors = (0, _react.useCallback)((id, hasError) => {
     if (tabsErrors[id] !== hasError) {
       setTabsErrors({ ...tabsErrors,
@@ -285,13 +274,8 @@ const Tabs = ({
 
 
   const visibleTab = () => {
-    let tab;
-    filteredChildren.forEach(child => {
-      if (isTabSelected(child.props.tabId)) {
-        tab = child;
-      }
-    });
-    return tab ? /*#__PURE__*/(0, _react.cloneElement)(tab, { ...tab.props,
+    const tab = filteredChildren.find(child => isTabSelected(child.props.tabId));
+    return tab && /*#__PURE__*/(0, _react.cloneElement)(tab, { ...tab.props,
       role: "tabpanel",
       position,
       isTabSelected: isTabSelected(tab.props.tabId),
@@ -300,7 +284,7 @@ const Tabs = ({
       updateErrors,
       updateWarnings,
       updateInfos
-    }) : null;
+    });
   };
   /** Builds all tabs where non selected tabs have class of hidden */
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "111.3.2",
+  "version": "111.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",