carbon-react 104.53.3 → 104.54.1

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/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/hooks/__internal__/useInputAccessibility/useInputAccessibility.js

@@ -7,7 +7,9 @@ export default function useInputAccessibility({
   fieldHelp
 }) {
   const labelId = label ? `${id}-label` : undefined;
-  const validationIconId = [error, warning, info].filter(validation => typeof validation === "string").length ? `${id}-validation-icon` : undefined;
+  const validationIconId = [error, warning, info].filter(validation => {
+    return validation && typeof validation === "string";
+  }).length ? `${id}-validation-icon` : undefined;
   const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
   const ariaDescribedBy = [fieldHelpId, validationIconId].filter(Boolean).join(" ");
   const ariaLabelledBy = labelId;

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/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/hooks/__internal__/useInputAccessibility/useInputAccessibility.js

@@ -14,7 +14,9 @@ function useInputAccessibility({
   fieldHelp
 }) {
   const labelId = label ? `${id}-label` : undefined;
-  const validationIconId = [error, warning, info].filter(validation => typeof validation === "string").length ? `${id}-validation-icon` : undefined;
+  const validationIconId = [error, warning, info].filter(validation => {
+    return validation && typeof validation === "string";
+  }).length ? `${id}-validation-icon` : undefined;
   const fieldHelpId = fieldHelp ? `${id}-field-help` : undefined;
   const ariaDescribedBy = [fieldHelpId, validationIconId].filter(Boolean).join(" ");
   const ariaLabelledBy = labelId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.53.3",
+  "version": "104.54.1",
   "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",