carbon-react 114.17.5 → 114.18.0

package/esm/__internal__/checkable-input/checkable-input.component.js

@@ -1,3 +1,5 @@
+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, { useRef } from "react";
 import PropTypes from "prop-types";
 import { StyledCheckableInput, StyledCheckableInputWrapper } from "./checkable-input.style";
@@ -103,7 +105,9 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     labelWidth: labelWidth,
     labelInline: labelInline,
     reverse: reverse
-  }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, formFieldProps, /*#__PURE__*/React.createElement(StyledCheckableInput, null, /*#__PURE__*/React.createElement(HiddenCheckableInput, inputProps), children))));
+  }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({}, formFieldProps, {
+    my: 0
+  }), /*#__PURE__*/React.createElement(StyledCheckableInput, null, /*#__PURE__*/React.createElement(HiddenCheckableInput, inputProps), children))));
 });
 CheckableInput.propTypes = {
   "about": PropTypes.string,

package/esm/__internal__/fieldset/fieldset.component.js

@@ -5,6 +5,7 @@ import PropTypes from "prop-types";
 import { StyledFieldset, StyledLegend, StyledLegendContent } from "./fieldset.style";
 import ValidationIcon from "../validations/validation-icon.component";
 import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
+import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 
 const Fieldset = ({
   legend,
@@ -19,29 +20,32 @@ const Fieldset = ({
   isRequired,
   blockGroupBehaviour,
   ...rest
-}) => /*#__PURE__*/React.createElement(InputGroupBehaviour, {
-  blockGroupBehaviour: blockGroupBehaviour
-}, /*#__PURE__*/React.createElement(StyledFieldset, _extends({
-  "data-component": "fieldset",
-  m: 0
-}, rest), legend && /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, ({
-  onMouseEnter,
-  onMouseLeave
-}) => /*#__PURE__*/React.createElement(StyledLegend, {
-  onMouseEnter: onMouseEnter,
-  onMouseLeave: onMouseLeave,
-  inline: inline,
-  width: legendWidth,
-  align: legendAlign,
-  rightPadding: legendSpacing
-}, /*#__PURE__*/React.createElement(StyledLegendContent, {
-  isRequired: isRequired
-}, legend, /*#__PURE__*/React.createElement(ValidationIcon, {
-  error: error,
-  warning: warning,
-  info: info,
-  tooltipFlipOverrides: ["top", "bottom"]
-})))), children));
+}) => {
+  const marginProps = useFormSpacing(rest);
+  return /*#__PURE__*/React.createElement(InputGroupBehaviour, {
+    blockGroupBehaviour: blockGroupBehaviour
+  }, /*#__PURE__*/React.createElement(StyledFieldset, _extends({
+    "data-component": "fieldset",
+    m: 0
+  }, marginProps, rest), legend && /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, ({
+    onMouseEnter,
+    onMouseLeave
+  }) => /*#__PURE__*/React.createElement(StyledLegend, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    inline: inline,
+    width: legendWidth,
+    align: legendAlign,
+    rightPadding: legendSpacing
+  }, /*#__PURE__*/React.createElement(StyledLegendContent, {
+    isRequired: isRequired
+  }, legend, /*#__PURE__*/React.createElement(ValidationIcon, {
+    error: error,
+    warning: warning,
+    info: info,
+    tooltipFlipOverrides: ["top", "bottom"]
+  })))), children));
+};
 
 Fieldset.propTypes = {
   "blockGroupBehaviour": PropTypes.bool,

package/esm/__internal__/form-field/form-field.component.js

@@ -3,13 +3,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
-import { filterStyledSystemMarginProps } from "../../style/utils";
 import FormFieldStyle, { FieldLineStyle } from "./form-field.style";
 import Label from "../label";
 import FieldHelp from "../field-help";
 import tagComponent from "../utils/helpers/tags/tags";
 import { TabContext } from "../../components/tabs/tab";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
+import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 
 const FormField = ({
   children,
@@ -62,6 +62,7 @@ const FormField = ({
     setWarning,
     setInfo
   } = useContext(TabContext);
+  const marginProps = useFormSpacing(rest);
   const isMounted = useRef(false);
   useLayoutEffect(() => {
     isMounted.current = true;
@@ -81,7 +82,6 @@ const FormField = ({
       }
     };
   }, [id, setError, setWarning, setInfo, error, warning, info]);
-  const marginProps = filterStyledSystemMarginProps(rest);
   const fieldHelp = fieldHelpContent ? /*#__PURE__*/React.createElement(FieldHelp, {
     labelInline: inlineLabel,
     labelWidth: labelWidth,

package/esm/__internal__/form-spacing-provider/form-spacing-context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface FormSpacingContextProps {
+    marginBottom?: string;
+}
+export declare const FormSpacingContext: React.Context<FormSpacingContextProps>;

package/esm/__internal__/form-spacing-provider/form-spacing-context.js

@@ -0,0 +1,2 @@
+import React from "react";
+export const FormSpacingContext = /*#__PURE__*/React.createContext({});

package/esm/__internal__/form-spacing-provider/form-spacing-provider.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FormSpacingContextProps } from "./form-spacing-context";
+interface FormSpacingProviderProps extends FormSpacingContextProps {
+    children: React.ReactNode;
+}
+declare const FormSpacingProvider: ({ marginBottom, children, }: FormSpacingProviderProps) => JSX.Element;
+export default FormSpacingProvider;

package/esm/__internal__/form-spacing-provider/form-spacing-provider.component.js

@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { FormSpacingContext } from "./form-spacing-context";
+
+const FormSpacingProvider = ({
+  marginBottom,
+  children
+}) => /*#__PURE__*/React.createElement(FormSpacingContext.Provider, {
+  value: {
+    marginBottom
+  }
+}, children);
+
+FormSpacingProvider.propTypes = {
+  "children": PropTypes.node,
+  "marginBottom": PropTypes.string
+};
+export default FormSpacingProvider;

package/esm/__internal__/form-spacing-provider/index.d.ts

@@ -0,0 +1,3 @@
+export { FormSpacingContext } from "./form-spacing-context";
+export type { FormSpacingContextProps } from "./form-spacing-context";
+export { default } from "./form-spacing-provider.component";

package/esm/__internal__/form-spacing-provider/index.js

@@ -0,0 +1,2 @@
+export { FormSpacingContext } from "./form-spacing-context";
+export { default } from "./form-spacing-provider.component";

package/esm/components/checkbox/checkbox-group.component.js

@@ -7,6 +7,7 @@ import StyledCheckboxGroup from "./checkbox-group.style";
 import Fieldset from "../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
+import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
 
 const CheckboxGroup = props => {
@@ -46,7 +47,9 @@ const CheckboxGroup = props => {
       warning: !!warning,
       info: !!info
     }
-  }, children))));
+  }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
+    marginBottom: undefined
+  }, children)))));
 };
 
 CheckboxGroup.propTypes = {

package/esm/components/checkbox/checkbox.component.js

@@ -6,10 +6,10 @@ import CheckboxStyle from "./checkbox.style";
 import CheckableInput from "../../__internal__/checkable-input/checkable-input.component";
 import CheckboxSvg from "./checkbox-svg.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { CheckboxGroupContext } from "./checkbox-group.component";
 import Logger from "../../__internal__/utils/logger";
+import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
 const Checkbox = /*#__PURE__*/React.forwardRef(({
   id,
@@ -44,15 +44,16 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   "data-role": dataRole,
   helpAriaLabel,
   inputRef,
-  ...props
+  ...rest
 }, ref) => {
   const largeScreen = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
+  const checkboxGroupContext = useContext(CheckboxGroupContext);
   const {
     error: contextError,
     warning: contextWarning,
     info: contextInfo
-  } = useContext(CheckboxGroupContext);
+  } = checkboxGroupContext;
 
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
@@ -86,8 +87,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     labelWidth,
     tooltipPosition,
     ref: ref || inputRef,
-    ...props
+    ...rest
   };
+  const marginProps = useFormSpacing(rest);
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
@@ -105,7 +107,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     fieldHelpInline: fieldHelpInline,
     reverse: reverse,
     size: size
-  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(CheckboxSvg, null))));
+  }, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(CheckboxSvg, null))));
 });
 Checkbox.propTypes = {
   "about": PropTypes.string,

package/esm/components/date/date.component.js

@@ -14,6 +14,7 @@ import DatePicker from "./__internal__/date-picker";
 import DateRangeContext from "../date-range/date-range.context";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
 import Logger from "../../__internal__/utils/logger";
+import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 let deprecateInputRefWarnTriggered = false;
 const DateInput = /*#__PURE__*/React.forwardRef(({
@@ -295,6 +296,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     return value;
   };
 
+  const marginProps = useFormSpacing(rest);
   return /*#__PURE__*/React.createElement(StyledDateInput, _extends({
     ref: wrapperRef,
     role: "presentation",
@@ -303,7 +305,7 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     "data-component": dataComponent || "date",
     "data-element": dataElement,
     "data-role": dataRole
-  }, filterStyledSystemMarginProps(rest), {
+  }, marginProps, {
     applyDateRangeStyling: !!inputRefMap
   }), /*#__PURE__*/React.createElement(Textbox, _extends({}, filterOutStyledSystemSpacingProps(rest), {
     inputRef: inputRef,
@@ -325,7 +327,8 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
     autoFocus: autoFocus,
     size: size,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    m: 0
   })), /*#__PURE__*/React.createElement(DatePicker, {
     disablePortal: disablePortal,
     inputElement: parentRef,

package/esm/components/date-range/date-range.component.js

@@ -217,14 +217,20 @@ const DateRange = ({
       inputRefMap,
       setInputRefMap: updateInputMap
     }
-  }, /*#__PURE__*/React.createElement(DateInput, _extends({}, dateProps("start"), {
+  }, /*#__PURE__*/React.createElement(DateInput, _extends({
+    my: 0 // prevents any form spacing being applied
+
+  }, dateProps("start"), {
     onFocus: () => handleFocus("end"),
     "data-element": "start-date",
     labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
     ,
     tooltipPosition: tooltipPosition,
     ref: startRef
-  })), /*#__PURE__*/React.createElement(DateInput, _extends({}, dateProps("end"), {
+  })), /*#__PURE__*/React.createElement(DateInput, _extends({
+    my: 0 // prevents any form spacing being applied
+
+  }, dateProps("end"), {
     onFocus: () => handleFocus("start"),
     "data-element": "end-date",
     labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true

package/esm/components/fieldset/fieldset.component.js

@@ -3,9 +3,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { filterStyledSystemMarginProps } from "../../style/utils";
 import { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle } from "./fieldset.style";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import FormSpacingProvider from "../../__internal__/form-spacing-provider";
+import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 
 const Fieldset = ({
   children,
@@ -23,16 +24,19 @@ const Fieldset = ({
     }, legend));
   };
 
+  const marginProps = useFormSpacing(rest);
   return /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
     value: {
       validationRedesignOptIn: false
     }
   }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({}, tagComponent("fieldset", rest), rest, {
     m: 0
-  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
+  }, marginProps), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
     "data-component": "fieldset-style",
     inline: inline
-  }, getLegend(), children)));
+  }, getLegend(), /*#__PURE__*/React.createElement(FormSpacingProvider, {
+    marginBottom: undefined
+  }, children))));
 };
 
 Fieldset.propTypes = {

package/esm/components/form/form.component.js

@@ -6,6 +6,8 @@ import { SidebarContext } from "../sidebar/sidebar.component";
 import { ModalContext } from "../modal/modal.component";
 import FormSummary from "./__internal__/form-summary.component";
 import { StyledForm, StyledFormContent, StyledFormFooter, StyledLeftButtons, StyledRightButtons, StyledFullWidthButtons } from "./form.style";
+import { formSpacing } from "./form.config";
+import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 
 const Form = ({
   children,
@@ -50,7 +52,9 @@ const Form = ({
     className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     isInModal: isInModal
-  }, children), !fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
+  }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
+    marginBottom: formSpacing[fieldSpacing]
+  }, children)), !fullWidthButtons && renderFooter && /*#__PURE__*/React.createElement(StyledFormFooter, _extends({
     "data-element": "form-footer",
     className: classNames,
     ref: formFooterRef,

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

@@ -1,2 +1,12 @@
 export declare const FORM_BUTTON_ALIGNMENTS: readonly ["left", "right"];
 export declare type FormButtonAlignment = typeof FORM_BUTTON_ALIGNMENTS[number];
+export declare const formSpacing: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+};

package/esm/components/form/form.config.js

@@ -1 +1,11 @@
-export const FORM_BUTTON_ALIGNMENTS = ["left", "right"];
+export const FORM_BUTTON_ALIGNMENTS = ["left", "right"];
+export const formSpacing = {
+  0: "var(--spacing000)",
+  1: "var(--spacing100)",
+  2: "var(--spacing200)",
+  3: "var(--spacing300)",
+  4: "var(--spacing400)",
+  5: "var(--spacing500)",
+  6: "var(--spacing600)",
+  7: "var(--spacing700)"
+};

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

@@ -1,11 +1,8 @@
 import styled, { css } from "styled-components";
 import { space, padding } from "styled-system";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
-import { StyledFieldset } from "../../__internal__/fieldset/fieldset.style";
 import StyledButton from "../button/button.style";
 import baseTheme from "../../style/themes/base";
-import { FieldsetStyle } from "../fieldset/fieldset.style";
-import StyledInlineInputs from "../inline-inputs/inline-inputs.style";
 import StyledSearch from "../search/search.style";
 import StyledTextarea from "../textarea/textarea.style";
 export const StyledFormContent = styled.div`
@@ -61,19 +58,7 @@ export const StyledFormFooter = styled.div`
 `;
 StyledFormFooter.defaultProps = {
   theme: baseTheme
-};
-
-const formBottomMargins = fieldSpacing => ({
-  0: "var(--spacing000)",
-  1: "var(--spacing100)",
-  2: "var(--spacing200)",
-  3: "var(--spacing300)",
-  4: "var(--spacing400)",
-  5: "var(--spacing500)",
-  6: "var(--spacing600)",
-  7: "var(--spacing700)"
-})[fieldSpacing]; // Accounts for height of the header of Modal parent, the height form footer and some additional spacing
-
+}; // Accounts for height of the header of Modal parent, the height form footer and some additional spacing
 
 const HEIGHT_SPACING = 216;
 export const StyledForm = styled.form`
@@ -88,29 +73,11 @@ export const StyledForm = styled.form`
   ${({
   fieldSpacing
 }) => css`
-      &
-        ${StyledTextarea},
-        ${StyledFormField},
-        ${StyledFieldset},
-        ${FieldsetStyle},
-        > ${StyledButton} {
-        margin-top: 0;
-        margin-bottom: ${formBottomMargins(fieldSpacing)};
-      }
-
       ${StyledTextarea}
       ${StyledFormField} {
         margin-bottom: 4px;
       }
-
-      ${StyledInlineInputs} {
-        ${StyledFormField} {
-          margin-bottom: 0;
-        }
-
-        margin-bottom: ${formBottomMargins(fieldSpacing)};
-      }
-    `}  
+    `}
 
   ${StyledSearch} ${StyledFormField} {
     margin-bottom: 0px;

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

@@ -1,9 +1,10 @@
 import React from "react";
+import { MarginProps } from "styled-system";
 import { StyledContentContainerProps, StyledInlineInputsProps } from "./inline-inputs.style";
 interface InlineInputsContextProps {
     ariaLabelledBy?: string;
 }
-export interface InlineInputsProps extends StyledContentContainerProps, StyledInlineInputsProps {
+export interface InlineInputsProps extends MarginProps, StyledContentContainerProps, StyledInlineInputsProps {
     /** Breakpoint for adaptive label (inline label change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** Children elements */
@@ -19,7 +20,7 @@ export interface InlineInputsProps extends StyledContentContainerProps, StyledIn
 }
 export declare const InlineInputsContext: React.Context<InlineInputsContextProps>;
 declare const InlineInputs: {
-    ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, }: InlineInputsProps): JSX.Element;
+    ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, ...rest }: InlineInputsProps): JSX.Element;
     displayName: string;
 };
 export default InlineInputs;