carbon-react 104.53.4 → 104.54.2

package/esm/components/flat-table/flat-table.component.d.ts

@@ -1,7 +1,7 @@
 export const FlatTableThemeContext: React.Context<{}>;
 export default FlatTable;
 import React from "react";
-declare function FlatTable({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, ariaDescribedby, minHeight, overflowX, ...rest }: {
+declare function FlatTable({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, ariaDescribedby, minHeight, overflowX, width, ...rest }: {
     [x: string]: any;
     caption: any;
     children: any;
@@ -16,6 +16,7 @@ declare function FlatTable({ caption, children, hasStickyHead, colorTheme, foote
     ariaDescribedby: any;
     minHeight: any;
     overflowX: any;
+    width: any;
 }): JSX.Element;
 declare namespace FlatTable {
     namespace propTypes {
@@ -32,6 +33,7 @@ declare namespace FlatTable {
         const size: PropTypes.Requireable<string>;
         const hasMaxHeight: PropTypes.Requireable<boolean>;
         const overflowX: PropTypes.Requireable<string>;
+        const width: PropTypes.Requireable<string>;
     }
     namespace defaultProps {
         const colorTheme_1: string;

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

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
-import { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter } from "./flat-table.style";
+import { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer } from "./flat-table.style";
 import { DrawerSidebarContext } from "../drawer";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 export const FlatTableThemeContext = /*#__PURE__*/React.createContext({});
@@ -23,6 +23,7 @@ const FlatTable = ({
   ariaDescribedby,
   minHeight,
   overflowX,
+  width,
   ...rest
 }) => {
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
@@ -39,6 +40,7 @@ const FlatTable = ({
   return /*#__PURE__*/React.createElement(DrawerSidebarContext.Consumer, null, ({
     isInSidebar
   }) => /*#__PURE__*/React.createElement(StyledFlatTableWrapper, _extends({
+    "data-component": "flat-table-wrapper",
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
     colorTheme: colorTheme,
@@ -51,15 +53,19 @@ const FlatTable = ({
     justifyContent: hasStickyFooter || height ? "space-between" : undefined,
     tabIndex: "0",
     role: "region",
-    overflowX: overflowX
-  }, rest), /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
+    overflowX: width ? "hidden" : undefined,
+    width: width
+  }, rest), /*#__PURE__*/React.createElement(StyledTableContainer, {
+    overflowX: overflowX,
+    width: width
+  }, /*#__PURE__*/React.createElement(StyledFlatTable, _extends({
     "data-component": "flat-table"
   }, tableStylingProps), caption ? /*#__PURE__*/React.createElement("caption", null, caption) : null, /*#__PURE__*/React.createElement(FlatTableThemeContext.Provider, {
     value: {
       colorTheme,
       size
     }
-  }, children)), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
+  }, children))), footer && /*#__PURE__*/React.createElement(StyledFlatTableFooter, {
     hasStickyFooter: hasStickyFooter
   }, footer)));
 };
@@ -103,7 +109,10 @@ FlatTable.propTypes = { ...marginPropTypes,
   hasMaxHeight: PropTypes.bool,
 
   /** Set the overflow X of the table wrapper. Any valid CSS string */
-  overflowX: PropTypes.string
+  overflowX: PropTypes.string,
+
+  /** Width of the table. Any valid CSS string */
+  width: PropTypes.string
 };
 FlatTable.defaultProps = {
   colorTheme: "dark",

package/esm/components/flat-table/flat-table.d.ts

@@ -26,6 +26,10 @@ export interface FlatTableProps extends MarginProps {
   size?: "compact" | "small" | "medium" | "large" | "extraLarge";
   /** Applies max-height of 100% to FlatTable if true */
   hasMaxHeight?: boolean;
+  /** Set the overflow X of the table wrapper. Any valid CSS string */
+  overflowX?: string;
+  /** Width of the table. Any valid CSS string */
+  width?: string;
 }
 
 declare function FlatTable(props: FlatTableProps): JSX.Element;

package/esm/components/flat-table/flat-table.style.d.ts

@@ -1,4 +1,5 @@
 export const StyledFlatTableWrapper: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
 export const StyledFlatTable: import("styled-components").StyledComponent<"table", any, {}, never>;
 export const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 import Box from "../box";

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

@@ -8,6 +8,16 @@ import { baseTheme } from "../../style/themes";
 import { StyledFlatTableCell } from "./flat-table-cell/flat-table-cell.style";
 import cellSizes from "./cell-sizes.style";
 import Box from "../box";
+const StyledTableContainer = styled.div`
+  ${({
+  width,
+  overflowX
+}) => width && css`
+      width: ${width};
+
+      ${overflowX && `overflow-x: ${overflowX}`}
+    `}
+`;
 const StyledFlatTable = styled.table`
   border-collapse: separate;
   border-radius: 0px;
@@ -190,4 +200,4 @@ const StyledFlatTableFooter = styled.div`
       bottom: 0px;
     `}
 `;
-export { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter };
+export { StyledFlatTableWrapper, StyledFlatTable, StyledFlatTableFooter, StyledTableContainer };

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

@@ -8,6 +8,7 @@ import Button, { ButtonWithForwardRef } from "../button";
 import Events from "../../__internal__/utils/helpers/events";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const MultiActionButton = ({
@@ -22,6 +23,7 @@ const MultiActionButton = ({
   ...rest
 }) => {
   const ref = useRef();
+  const buttonRef = useRef();
   const buttonContainer = useRef();
   const userInputType = "ontouchstart" in document.documentElement ? "touchstart" : "click";
   const buttonChildren = React.Children.toArray(children);
@@ -74,7 +76,12 @@ const MultiActionButton = ({
       nextIndex = currentIndex < children.length - 1 ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (Events.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(buttonRef.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -182,6 +189,7 @@ const MultiActionButton = ({
     key: "toggle-button",
     onKeyDown: handleMainButtonKeyDown
   }, mainButtonProps(), {
+    forwardRef: buttonRef,
     iconPosition: "after",
     iconType: "dropdown"
   }), text), showAdditionalButtons && renderAdditionalButtons());

package/esm/components/pager/pager.style.js

@@ -6,6 +6,9 @@ import StyledSelectText from "../select/__internal__/select-text/select-text.sty
 import Link from "../link";
 const StyledSelectContainer = styled.div`
   height: 26px;
+  width: 55px;
+  margin-left: 4px;
+  margin-right: 4px;
 
   ${StyledInputPresentation} {
     padding-left: 0;
@@ -40,7 +43,7 @@ const StyledPagerSizeOptions = styled.div`
     height: 26px;
     min-height: 26px;
     min-width: 10px;
-    margin: 0px 4px;
+    margin: 0px;
 
     ${StyledSelectText} {
       font-size: 14px;

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

@@ -14,6 +14,7 @@ import guid from "../../__internal__/utils/helpers/guid";
 import Popover from "../../__internal__/popover";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { baseTheme } from "../../style/themes";
+import { defaultFocusableSelectors } from "../../__internal__/focus-trap/focus-trap-utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const CONTENT_WIDTH_RATIO = 0.75;
 
@@ -36,6 +37,7 @@ const SplitButton = ({
   const buttonLabelId = useRef(guid());
   const additionalButtons = useRef([]);
   const splitButtonNode = useRef();
+  const toggleButton = useRef();
   const buttonContainer = useRef();
   const [showAdditionalButtons, setShowAdditionalButtons] = useState(false);
   const [minWidth, setMinWidth] = useState(0);
@@ -69,7 +71,12 @@ const SplitButton = ({
       nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (Events.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(toggleButton.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -156,7 +163,8 @@ const SplitButton = ({
       "aria-label": "Show more",
       "data-element": "toggle-button",
       key: "toggle-button",
-      type: "button"
+      type: "button",
+      ref: toggleButton
     }, toggleButtonProps()), /*#__PURE__*/React.createElement(Icon, {
       type: "dropdown",
       bgSize: "extra-small",

package/lib/components/flat-table/flat-table.component.d.ts

@@ -1,7 +1,7 @@
 export const FlatTableThemeContext: React.Context<{}>;
 export default FlatTable;
 import React from "react";
-declare function FlatTable({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, ariaDescribedby, minHeight, overflowX, ...rest }: {
+declare function FlatTable({ caption, children, hasStickyHead, colorTheme, footer, hasStickyFooter, height, isZebra, size, hasMaxHeight, ariaDescribedby, minHeight, overflowX, width, ...rest }: {
     [x: string]: any;
     caption: any;
     children: any;
@@ -16,6 +16,7 @@ declare function FlatTable({ caption, children, hasStickyHead, colorTheme, foote
     ariaDescribedby: any;
     minHeight: any;
     overflowX: any;
+    width: any;
 }): JSX.Element;
 declare namespace FlatTable {
     namespace propTypes {
@@ -32,6 +33,7 @@ declare namespace FlatTable {
         const size: PropTypes.Requireable<string>;
         const hasMaxHeight: PropTypes.Requireable<boolean>;
         const overflowX: PropTypes.Requireable<string>;
+        const width: PropTypes.Requireable<string>;
     }
     namespace defaultProps {
         const colorTheme_1: string;

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

@@ -40,6 +40,7 @@ const FlatTable = ({
   ariaDescribedby,
   minHeight,
   overflowX,
+  width,
   ...rest
 }) => {
   const addDefaultHeight = !height && (hasStickyHead || hasStickyFooter);
@@ -56,6 +57,7 @@ const FlatTable = ({
   return /*#__PURE__*/_react.default.createElement(_drawer.DrawerSidebarContext.Consumer, null, ({
     isInSidebar
   }) => /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableWrapper, _extends({
+    "data-component": "flat-table-wrapper",
     isInSidebar: isInSidebar,
     hasStickyHead: hasStickyHead,
     colorTheme: colorTheme,
@@ -68,15 +70,19 @@ const FlatTable = ({
     justifyContent: hasStickyFooter || height ? "space-between" : undefined,
     tabIndex: "0",
     role: "region",
-    overflowX: overflowX
-  }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTable, _extends({
+    overflowX: width ? "hidden" : undefined,
+    width: width
+  }, rest), /*#__PURE__*/_react.default.createElement(_flatTable.StyledTableContainer, {
+    overflowX: overflowX,
+    width: width
+  }, /*#__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: {
       colorTheme,
       size
     }
-  }, children)), footer && /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableFooter, {
+  }, children))), footer && /*#__PURE__*/_react.default.createElement(_flatTable.StyledFlatTableFooter, {
     hasStickyFooter: hasStickyFooter
   }, footer)));
 };
@@ -120,7 +126,10 @@ FlatTable.propTypes = { ...marginPropTypes,
   hasMaxHeight: _propTypes.default.bool,
 
   /** Set the overflow X of the table wrapper. Any valid CSS string */
-  overflowX: _propTypes.default.string
+  overflowX: _propTypes.default.string,
+
+  /** Width of the table. Any valid CSS string */
+  width: _propTypes.default.string
 };
 FlatTable.defaultProps = {
   colorTheme: "dark",

package/lib/components/flat-table/flat-table.d.ts

@@ -26,6 +26,10 @@ export interface FlatTableProps extends MarginProps {
   size?: "compact" | "small" | "medium" | "large" | "extraLarge";
   /** Applies max-height of 100% to FlatTable if true */
   hasMaxHeight?: boolean;
+  /** Set the overflow X of the table wrapper. Any valid CSS string */
+  overflowX?: string;
+  /** Width of the table. Any valid CSS string */
+  width?: string;
 }
 
 declare function FlatTable(props: FlatTableProps): JSX.Element;

package/lib/components/flat-table/flat-table.style.d.ts

@@ -1,4 +1,5 @@
 export const StyledFlatTableWrapper: import("styled-components").StyledComponent<typeof Box, any, {}, never>;
 export const StyledFlatTable: import("styled-components").StyledComponent<"table", any, {}, never>;
 export const StyledFlatTableFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
+export const StyledTableContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 import Box from "../box";

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledFlatTableFooter = exports.StyledFlatTable = exports.StyledFlatTableWrapper = void 0;
+exports.StyledTableContainer = exports.StyledFlatTableFooter = exports.StyledFlatTable = exports.StyledFlatTableWrapper = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -31,6 +31,17 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 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 StyledTableContainer = _styledComponents.default.div`
+  ${({
+  width,
+  overflowX
+}) => width && (0, _styledComponents.css)`
+      width: ${width};
+
+      ${overflowX && `overflow-x: ${overflowX}`}
+    `}
+`;
+exports.StyledTableContainer = StyledTableContainer;
 const StyledFlatTable = _styledComponents.default.table`
   border-collapse: separate;
   border-radius: 0px;

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

@@ -21,6 +21,8 @@ var _popover = _interopRequireDefault(require("../../__internal__/popover"));
 
 var _utils = require("../../style/utils");
 
+var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
+
 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; }
@@ -43,6 +45,7 @@ const MultiActionButton = ({
   ...rest
 }) => {
   const ref = (0, _react.useRef)();
+  const buttonRef = (0, _react.useRef)();
   const buttonContainer = (0, _react.useRef)();
   const userInputType = "ontouchstart" in document.documentElement ? "touchstart" : "click";
 
@@ -97,7 +100,12 @@ const MultiActionButton = ({
       nextIndex = currentIndex < children.length - 1 ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (_events.default.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(buttonRef.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -205,6 +213,7 @@ const MultiActionButton = ({
     key: "toggle-button",
     onKeyDown: handleMainButtonKeyDown
   }, mainButtonProps(), {
+    forwardRef: buttonRef,
     iconPosition: "after",
     iconType: "dropdown"
   }), text), showAdditionalButtons && renderAdditionalButtons());

package/lib/components/pager/pager.style.js

@@ -25,6 +25,9 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 const StyledSelectContainer = _styledComponents.default.div`
   height: 26px;
+  width: 55px;
+  margin-left: 4px;
+  margin-right: 4px;
 
   ${_inputPresentation.default} {
     padding-left: 0;
@@ -61,7 +64,7 @@ const StyledPagerSizeOptions = _styledComponents.default.div`
     height: 26px;
     min-height: 26px;
     min-width: 10px;
-    margin: 0px 4px;
+    margin: 0px;
 
     ${_selectText.default} {
       font-size: 14px;

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

@@ -33,6 +33,8 @@ var _utils = require("../../style/utils");
 
 var _themes = require("../../style/themes");
 
+var _focusTrapUtils = require("../../__internal__/focus-trap/focus-trap-utils");
+
 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; }
@@ -64,6 +66,7 @@ const SplitButton = ({
   const buttonLabelId = (0, _react.useRef)((0, _guid.default)());
   const additionalButtons = (0, _react.useRef)([]);
   const splitButtonNode = (0, _react.useRef)();
+  const toggleButton = (0, _react.useRef)();
   const buttonContainer = (0, _react.useRef)();
   const [showAdditionalButtons, setShowAdditionalButtons] = (0, _react.useState)(false);
   const [minWidth, setMinWidth] = (0, _react.useState)(0);
@@ -97,7 +100,12 @@ const SplitButton = ({
       nextIndex = currentIndex < numOfChildren ? currentIndex + 1 : 0;
       ev.preventDefault();
     } else if (_events.default.isTabKey(ev)) {
-      // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+      var _elements$indexOf;
+
+      const elements = Array.from(document.querySelectorAll(_focusTrapUtils.defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
+      const indexOf = elements.indexOf(toggleButton.current);
+      (_elements$indexOf = elements[indexOf]) === null || _elements$indexOf === void 0 ? void 0 : _elements$indexOf.focus(); // timeout enforces that the "hideButtons" method will be run after browser focuses on the next element
+
       setTimeout(hideButtons, 0);
     }
 
@@ -184,7 +192,8 @@ const SplitButton = ({
       "aria-label": "Show more",
       "data-element": "toggle-button",
       key: "toggle-button",
-      type: "button"
+      type: "button",
+      ref: toggleButton
     }, toggleButtonProps()), /*#__PURE__*/_react.default.createElement(_icon.default, {
       type: "dropdown",
       bgSize: "extra-small",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.53.4",
+  "version": "104.54.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {
@@ -156,7 +156,7 @@
   },
   "dependencies": {
     "@octokit/rest": "^18.12.0",
-    "@popperjs/core": "^2.9.0",
+    "@popperjs/core": "^2.11.2",
     "@sage/design-tokens": "^1.93.0",
     "@styled-system/prop-types": "^5.1.5",
     "@tippyjs/react": "^4.2.5",