carbon-react 109.0.0 → 109.1.0

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -109,12 +109,6 @@ const FocusTrap = ({
       setCurrentFocusedElement(element);
     }
   }, [focusableElements]);
-  useEffect(() => {
-    document.addEventListener("focusin", updateCurrentFocusedElement);
-    return () => {
-      document.removeEventListener("focusin", updateCurrentFocusedElement);
-    };
-  }, [updateCurrentFocusedElement]);
   const refocusTrap = useCallback(() => {
     var _wrapperRef$current;
 
@@ -148,13 +142,16 @@ const FocusTrap = ({
     }
   };
 
-  const focusProps = {
-    tabIndex,
-    onBlur
-  }; // passes focusProps if no tabindex has been explicitly set on the wrapper
+  const focusProps = hasNoTabIndex => ({ ...(hasNoTabIndex && {
+      tabIndex,
+      onBlur
+    }),
+    onFocus: updateCurrentFocusedElement
+  }); // passes focusProps, sets tabIndex and onBlur if no tabIndex has been expicitly set on child
+
 
   const clonedChildren = React.Children.map(children, child => {
-    return child.props.tabIndex === undefined ? /*#__PURE__*/React.cloneElement(child, focusProps) : child;
+    return /*#__PURE__*/React.cloneElement(child, focusProps(child.props.tabIndex === undefined));
   });
   return /*#__PURE__*/React.createElement("div", {
     ref: trapRef

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

@@ -116,7 +116,7 @@ const StyledFlatTableWrapper = styled(Box)`
           ${StyledFlatTableHead} ${StyledFlatTableCheckbox} {
             background-color: var(--colorsUtilityMajor100);
             border-right: 1px solid var(--colorsUtilityMajor150);
-            border-bottom-color: var(--colorsUtilityMajor100);
+            border-bottom-color: var(--colorsUtilityMajor150);
           }
         `;
 

package/esm/components/form/form.style.js

@@ -16,7 +16,7 @@ export const StyledFormContent = styled.div`
   isInModal
 }) => css`
     ${stickyFooter && css`
-      overflow-y: ${isInModal ? "visible" : "auto"};
+      overflow-y: ${isInModal ? "visible" : "inherit"};
       flex: 1;
     `}
   `}

package/esm/components/inline-inputs/inline-inputs.component.d.ts

@@ -1,27 +1,23 @@
 import React from "react";
+import { StyledContentContainerProps, StyledInlineInputsProps } from "./inline-inputs.style";
 interface InlineInputsContextProps {
     ariaLabelledBy?: string;
 }
-declare type GutterOptions = "none" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
-export interface InlineInputsProps {
+export interface InlineInputsProps extends StyledContentContainerProps, StyledInlineInputsProps {
+    /** Breakpoint for adaptive label (inline label change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
     /** Children elements */
     children?: React.ReactNode;
     /** [Legacy prop] A custom class name for the component. */
     className?: string;
-    /** Gutter prop gets passed down to Row component if false gutter value is "none" */
-    gutter?: GutterOptions;
     /** The id of the corresponding input control for the label */
     htmlFor?: string;
-    /** Width of the inline inputs container in percentage */
-    inputWidth?: number;
     /** Defines the label text for the heading. */
     label?: string;
-    /** Width of a label in percentage */
-    labelWidth?: number;
 }
 export declare const InlineInputsContext: React.Context<InlineInputsContextProps>;
 declare const InlineInputs: {
-    ({ label, htmlFor, children, className, gutter, inputWidth, labelWidth, }: InlineInputsProps): JSX.Element;
+    ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, }: InlineInputsProps): JSX.Element;
     displayName: string;
 };
 export default InlineInputs;

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import Label from "../../__internal__/label";
 import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from "./inline-inputs.style";
 import createGuid from "../../__internal__/utils/helpers/guid";
+import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 export const InlineInputsContext = /*#__PURE__*/React.createContext({});
 
 const columnWrapper = (children, gutter, labelId) => {
@@ -19,21 +20,29 @@ const columnWrapper = (children, gutter, labelId) => {
 };
 
 const InlineInputs = ({
+  adaptiveLabelBreakpoint,
   label,
   htmlFor,
   children = null,
   className = "",
   gutter = "none",
   inputWidth,
+  labelInline = true,
   labelWidth
 }) => {
   const labelId = useRef(createGuid());
+  const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
+  let inlineLabel = labelInline;
+
+  if (adaptiveLabelBreakpoint) {
+    inlineLabel = largeScreen;
+  }
 
   function renderLabel() {
     if (!label) return null;
     return /*#__PURE__*/React.createElement(Label, {
       labelId: labelId.current,
-      inline: true,
+      inline: inlineLabel,
       htmlFor: htmlFor
     }, label);
   }
@@ -42,7 +51,8 @@ const InlineInputs = ({
     gutter: gutter,
     "data-component": "inline-inputs",
     className: className,
-    labelWidth: labelWidth
+    labelWidth: labelWidth,
+    labelInline: inlineLabel
   }, renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
@@ -51,12 +61,14 @@ const InlineInputs = ({
 };
 
 InlineInputs.propTypes = {
+  "adaptiveLabelBreakpoint": PropTypes.number,
   "children": PropTypes.node,
   "className": PropTypes.string,
   "gutter": PropTypes.oneOf(["extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "none", "small"]),
   "htmlFor": PropTypes.string,
   "inputWidth": PropTypes.number,
   "label": PropTypes.string,
+  "labelInline": PropTypes.bool,
   "labelWidth": PropTypes.number
 };
 InlineInputs.displayName = "InlineInputs";

package/esm/components/inline-inputs/inline-inputs.style.d.ts

@@ -1,6 +1,21 @@
 import { InlineInputsProps } from "./inline-inputs.component";
-declare const StyledInlineInput: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "gutter">, never>;
-declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "inputWidth" | "gutter">, never>;
-declare const StyledInlineInputs: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "gutter" | "labelWidth">, never>;
+declare type GutterOptions = "none" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+interface StyledInlineInputProps {
+    /** Gutter prop gets passed down to Row component if false gutter value is "none" */
+    gutter?: GutterOptions;
+}
+export interface StyledContentContainerProps extends StyledInlineInputProps {
+    /** Width of the inline inputs container in percentage */
+    inputWidth?: number;
+}
+export interface StyledInlineInputsProps extends StyledInlineInputProps {
+    /** Width of a label in percentage */
+    labelWidth?: number;
+    /** @ignore @private */
+    labelInline?: boolean;
+}
+declare const StyledInlineInput: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
+declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
+declare const StyledInlineInputs: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
 export { StyledContentContainer, StyledInlineInput };
 export default StyledInlineInputs;

package/esm/components/inline-inputs/inline-inputs.style.js

@@ -42,12 +42,16 @@ const StyledContentContainer = styled.div`
     `}
 `;
 const StyledInlineInputs = styled.div`
-  display: flex;
+  display: ${({
+  labelInline
+}) => labelInline ? `flex` : `block`};
   align-items: center;
 
   ${StyledLabelContainer} {
     width: auto;
-    margin-bottom: 0;
+    margin-bottom: ${({
+  labelInline
+}) => labelInline ? `0px` : `8px`};
     padding-right: 16px;
     flex: 0 0 ${({
   labelWidth

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -126,12 +126,6 @@ const FocusTrap = ({
       setCurrentFocusedElement(element);
     }
   }, [focusableElements]);
-  (0, _react.useEffect)(() => {
-    document.addEventListener("focusin", updateCurrentFocusedElement);
-    return () => {
-      document.removeEventListener("focusin", updateCurrentFocusedElement);
-    };
-  }, [updateCurrentFocusedElement]);
   const refocusTrap = (0, _react.useCallback)(() => {
     var _wrapperRef$current;
 
@@ -165,13 +159,16 @@ const FocusTrap = ({
     }
   };
 
-  const focusProps = {
-    tabIndex,
-    onBlur
-  }; // passes focusProps if no tabindex has been explicitly set on the wrapper
+  const focusProps = hasNoTabIndex => ({ ...(hasNoTabIndex && {
+      tabIndex,
+      onBlur
+    }),
+    onFocus: updateCurrentFocusedElement
+  }); // passes focusProps, sets tabIndex and onBlur if no tabIndex has been expicitly set on child
+
 
   const clonedChildren = _react.default.Children.map(children, child => {
-    return child.props.tabIndex === undefined ? /*#__PURE__*/_react.default.cloneElement(child, focusProps) : child;
+    return /*#__PURE__*/_react.default.cloneElement(child, focusProps(child.props.tabIndex === undefined));
   });
 
   return /*#__PURE__*/_react.default.createElement("div", {

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

@@ -141,7 +141,7 @@ const StyledFlatTableWrapper = (0, _styledComponents.default)(_box.default)`
           ${_flatTableHead.default} ${_flatTableCheckbox.default} {
             background-color: var(--colorsUtilityMajor100);
             border-right: 1px solid var(--colorsUtilityMajor150);
-            border-bottom-color: var(--colorsUtilityMajor100);
+            border-bottom-color: var(--colorsUtilityMajor150);
           }
         `;
 

package/lib/components/form/form.style.js

@@ -41,7 +41,7 @@ const StyledFormContent = _styledComponents.default.div`
   isInModal
 }) => (0, _styledComponents.css)`
     ${stickyFooter && (0, _styledComponents.css)`
-      overflow-y: ${isInModal ? "visible" : "auto"};
+      overflow-y: ${isInModal ? "visible" : "inherit"};
       flex: 1;
     `}
   `}

package/lib/components/inline-inputs/inline-inputs.component.d.ts

@@ -1,27 +1,23 @@
 import React from "react";
+import { StyledContentContainerProps, StyledInlineInputsProps } from "./inline-inputs.style";
 interface InlineInputsContextProps {
     ariaLabelledBy?: string;
 }
-declare type GutterOptions = "none" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
-export interface InlineInputsProps {
+export interface InlineInputsProps extends StyledContentContainerProps, StyledInlineInputsProps {
+    /** Breakpoint for adaptive label (inline label change to top aligned). Enables the adaptive behaviour when set */
+    adaptiveLabelBreakpoint?: number;
     /** Children elements */
     children?: React.ReactNode;
     /** [Legacy prop] A custom class name for the component. */
     className?: string;
-    /** Gutter prop gets passed down to Row component if false gutter value is "none" */
-    gutter?: GutterOptions;
     /** The id of the corresponding input control for the label */
     htmlFor?: string;
-    /** Width of the inline inputs container in percentage */
-    inputWidth?: number;
     /** Defines the label text for the heading. */
     label?: string;
-    /** Width of a label in percentage */
-    labelWidth?: number;
 }
 export declare const InlineInputsContext: React.Context<InlineInputsContextProps>;
 declare const InlineInputs: {
-    ({ label, htmlFor, children, className, gutter, inputWidth, labelWidth, }: InlineInputsProps): JSX.Element;
+    ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, }: InlineInputsProps): JSX.Element;
     displayName: string;
 };
 export default InlineInputs;

package/lib/components/inline-inputs/inline-inputs.component.js

@@ -15,6 +15,8 @@ var _inlineInputs = _interopRequireWildcard(require("./inline-inputs.style"));
 
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
+var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
+
 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; }
@@ -39,21 +41,29 @@ const columnWrapper = (children, gutter, labelId) => {
 };
 
 const InlineInputs = ({
+  adaptiveLabelBreakpoint,
   label,
   htmlFor,
   children = null,
   className = "",
   gutter = "none",
   inputWidth,
+  labelInline = true,
   labelWidth
 }) => {
   const labelId = (0, _react.useRef)((0, _guid.default)());
+  const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
+  let inlineLabel = labelInline;
+
+  if (adaptiveLabelBreakpoint) {
+    inlineLabel = largeScreen;
+  }
 
   function renderLabel() {
     if (!label) return null;
     return /*#__PURE__*/_react.default.createElement(_label.default, {
       labelId: labelId.current,
-      inline: true,
+      inline: inlineLabel,
       htmlFor: htmlFor
     }, label);
   }
@@ -62,7 +72,8 @@ const InlineInputs = ({
     gutter: gutter,
     "data-component": "inline-inputs",
     className: className,
-    labelWidth: labelWidth
+    labelWidth: labelWidth,
+    labelInline: inlineLabel
   }, renderLabel(), /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
@@ -71,12 +82,14 @@ const InlineInputs = ({
 };
 
 InlineInputs.propTypes = {
+  "adaptiveLabelBreakpoint": _propTypes.default.number,
   "children": _propTypes.default.node,
   "className": _propTypes.default.string,
   "gutter": _propTypes.default.oneOf(["extra-large", "extra-small", "large", "medium-large", "medium-small", "medium", "none", "small"]),
   "htmlFor": _propTypes.default.string,
   "inputWidth": _propTypes.default.number,
   "label": _propTypes.default.string,
+  "labelInline": _propTypes.default.bool,
   "labelWidth": _propTypes.default.number
 };
 InlineInputs.displayName = "InlineInputs";

package/lib/components/inline-inputs/inline-inputs.style.d.ts

@@ -1,6 +1,21 @@
 import { InlineInputsProps } from "./inline-inputs.component";
-declare const StyledInlineInput: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "gutter">, never>;
-declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "inputWidth" | "gutter">, never>;
-declare const StyledInlineInputs: import("styled-components").StyledComponent<"div", any, Pick<InlineInputsProps, "gutter" | "labelWidth">, never>;
+declare type GutterOptions = "none" | "extra-small" | "small" | "medium-small" | "medium" | "medium-large" | "large" | "extra-large";
+interface StyledInlineInputProps {
+    /** Gutter prop gets passed down to Row component if false gutter value is "none" */
+    gutter?: GutterOptions;
+}
+export interface StyledContentContainerProps extends StyledInlineInputProps {
+    /** Width of the inline inputs container in percentage */
+    inputWidth?: number;
+}
+export interface StyledInlineInputsProps extends StyledInlineInputProps {
+    /** Width of a label in percentage */
+    labelWidth?: number;
+    /** @ignore @private */
+    labelInline?: boolean;
+}
+declare const StyledInlineInput: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
+declare const StyledContentContainer: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
+declare const StyledInlineInputs: import("styled-components").StyledComponent<"div", any, InlineInputsProps, never>;
 export { StyledContentContainer, StyledInlineInput };
 export default StyledInlineInputs;

package/lib/components/inline-inputs/inline-inputs.style.js

@@ -61,12 +61,16 @@ const StyledContentContainer = _styledComponents.default.div`
 `;
 exports.StyledContentContainer = StyledContentContainer;
 const StyledInlineInputs = _styledComponents.default.div`
-  display: flex;
+  display: ${({
+  labelInline
+}) => labelInline ? `flex` : `block`};
   align-items: center;
 
   ${_label.StyledLabelContainer} {
     width: auto;
-    margin-bottom: 0;
+    margin-bottom: ${({
+  labelInline
+}) => labelInline ? `0px` : `8px`};
     padding-right: 16px;
     flex: 0 0 ${({
   labelWidth

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.0.0",
+  "version": "109.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {