carbon-react 159.4.0 → 159.5.0

package/esm/components/button/__next__/button.component.d.ts

@@ -22,6 +22,8 @@ export interface ButtonProps extends Omit<LegacyButtonProps, "size" | "type" | "
     disabled?: boolean;
     /** Flag to indicate that the button can be full-width. */
     fullWidth?: boolean;
+    /** Associates the button with a form element; value should be the id of the form. */
+    form?: string;
     /** The ID of the button. */
     id?: string;
     /** Set the button to use a dark-mode appearance. */

package/esm/components/button/__next__/button.component.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{forwardRef as n,useRef as a,useImperativeHandle as i}from"react";import{StyledButton as o,StyledContentContainer as l}from"./button.style.js";import c from"../../../__internal__/utils/helpers/tags/tags.js";import u from"../../../hooks/useMediaQuery/useMediaQuery.js";import s from"./__internal__/utils/is-icon-only.js";import y from"../../icon/icon.component.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){p(e,r,t[r])}))}return e}function b(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const f=n(((n,p)=>{var{"aria-describedby":f,"aria-label":v,"aria-labelledby":m,children:O,disabled:h=!1,fullWidth:g=!1,id:j,inverse:T,name:P,noWrap:w=!0,onClick:k,size:W="medium",variant:$="default",variantType:_="primary",buttonType:S,destructive:x,iconType:D,iconPosition:z="before",isWhite:B,href:C,type:E="button"}=n,M=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(n,["aria-describedby","aria-label","aria-labelledby","children","disabled","fullWidth","id","inverse","name","noWrap","onClick","size","variant","variantType","buttonType","destructive","iconType","iconPosition","isWhite","href","type"]);const Q=a(null),I=void 0!==O&&!1!==O,q=!!D&&!I||s(O);i(p,(()=>({focusButton:()=>{var e;null===(e=Q.current)||void 0===e||e.focus()}})),[]);const A=u("screen and (prefers-reduced-motion: no-preference)"),{variant:F,variantType:G}=(({buttonType:e,destructive:r,variant:t,variantType:n})=>{if(!e&&!r)return{variant:t,variantType:n};if(r)return{variant:"destructive",variantType:"primary"===(null!=e?e:n)?"primary":"secondary"};switch(e){case"primary":return{variant:"default",variantType:"primary"};case"tertiary":return{variant:"default",variantType:"tertiary"};case"darkBackground":default:return{variant:"default",variantType:"secondary"};case"gradient-grey":case"gradient-white":return{variant:"gradient",variantType:"secondary"}}})({buttonType:S,destructive:x,variant:$,variantType:_}),H=C&&!h?{href:C,target:M.target,rel:M.rel,as:"a"}:{type:E,as:"button"};return e(o,b(d({$allowMotion:A,"aria-describedby":f,"aria-label":v,"aria-labelledby":m,disabled:h,$fullWidth:g,$inverse:T||"darkBackground"===S||B,id:j,name:P,$noWrap:w,onClick:e=>{var r;null===(r=Q.current)||void 0===r||r.focus({preventScroll:!0}),null==k||k(e)},ref:Q,$size:W,$variant:F,$variantType:G,$iconOnly:q},H,c("button",M),M),{children:e(l,{"data-role":"button-child-container",children:(()=>{if(!D)return O;const n={"aria-hidden":!0,bg:"transparent"};return I?r(t,"before"===z?{children:[e(y,b(d({type:D},n),{"data-role":"button-icon-before"})),O]}:{children:[O,e(y,b(d({type:D},n),{"data-role":"button-icon-after"}))]}):e(y,b(d({type:D},n),{"data-role":"button-icon-only"}))})()})}))}));export{f as Button,f as default};
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{forwardRef as n,useRef as a,useImperativeHandle as i}from"react";import{StyledButton as o,StyledContentContainer as l}from"./button.style.js";import c from"../../../__internal__/utils/helpers/tags/tags.js";import u from"../../../hooks/useMediaQuery/useMediaQuery.js";import s from"./__internal__/utils/is-icon-only.js";import y from"../../icon/icon.component.js";function p(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){p(e,r,t[r])}))}return e}function b(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const f=n(((n,p)=>{var{"aria-describedby":f,"aria-label":v,"aria-labelledby":m,children:O,disabled:h=!1,fullWidth:g=!1,form:j,id:T,inverse:P,name:w,noWrap:k=!0,onClick:W,size:$="medium",variant:_="default",variantType:S="primary",buttonType:x,destructive:D,iconType:z,iconPosition:B="before",isWhite:C,href:E,type:M="button"}=n,Q=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(n,["aria-describedby","aria-label","aria-labelledby","children","disabled","fullWidth","form","id","inverse","name","noWrap","onClick","size","variant","variantType","buttonType","destructive","iconType","iconPosition","isWhite","href","type"]);const I=a(null),q=void 0!==O&&!1!==O,A=!!z&&!q||s(O);i(p,(()=>({focusButton:()=>{var e;null===(e=I.current)||void 0===e||e.focus()}})),[]);const F=u("screen and (prefers-reduced-motion: no-preference)"),{variant:G,variantType:H}=(({buttonType:e,destructive:r,variant:t,variantType:n})=>{if(!e&&!r)return{variant:t,variantType:n};if(r)return{variant:"destructive",variantType:"primary"===(null!=e?e:n)?"primary":"secondary"};switch(e){case"primary":return{variant:"default",variantType:"primary"};case"tertiary":return{variant:"default",variantType:"tertiary"};case"darkBackground":default:return{variant:"default",variantType:"secondary"};case"gradient-grey":case"gradient-white":return{variant:"gradient",variantType:"secondary"}}})({buttonType:x,destructive:D,variant:_,variantType:S}),J=E&&!h?{href:E,target:Q.target,rel:Q.rel,as:"a"}:{type:M,as:"button"};return e(o,b(d({$allowMotion:F,"aria-describedby":f,"aria-label":v,"aria-labelledby":m,disabled:h,$fullWidth:g,form:j,$inverse:P||"darkBackground"===x||C,id:T,name:w,$noWrap:k,onClick:e=>{var r;null===(r=I.current)||void 0===r||r.focus({preventScroll:!0}),null==W||W(e)},ref:I,$size:$,$variant:G,$variantType:H,$iconOnly:A},J,c("button",Q),Q),{children:e(l,{"data-role":"button-child-container",children:(()=>{if(!z)return O;const n={"aria-hidden":!0,bg:"transparent"};return q?r(t,"before"===B?{children:[e(y,b(d({type:z},n),{"data-role":"button-icon-before"})),O]}:{children:[O,e(y,b(d({type:z},n),{"data-role":"button-icon-after"}))]}):e(y,b(d({type:z},n),{"data-role":"button-icon-only"}))})()})}))}));export{f as Button,f as default};

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

@@ -5,6 +5,8 @@ import { FormButtonAlignment } from "./form.config";
 export interface FormProps extends SpaceProps, TagProps {
     /** Alignment of buttons */
     buttonAlignment?: FormButtonAlignment;
+    /** The id attribute of the underlying form element */
+    id?: string;
     /** Child elements */
     children?: React.ReactNode;
     /** The total number of errors present in the form */
@@ -37,7 +39,7 @@ export interface FormProps extends SpaceProps, TagProps {
     footerPadding?: PaddingProps;
 }
 export declare const Form: {
-    ({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, footerChildren, stickyFooter, stickyFooterVariant, fieldSpacing, noValidate, height, fullWidthButtons, footerPadding, ...rest }: FormProps): React.JSX.Element;
+    ({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, footerChildren, stickyFooter, stickyFooterVariant, fieldSpacing, noValidate, height, fullWidthButtons, footerPadding, id, ...rest }: FormProps): React.JSX.Element;
     displayName: string;
 };
 export default Form;

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

@@ -1 +1 @@
-import{jsxs as t,jsx as e,Fragment as r}from"react/jsx-runtime";import{useRef as o,useContext as n}from"react";import i from"../../__internal__/utils/helpers/tags/tags.js";import l from"./__internal__/form-summary.component.js";import{StyledForm as a,StyledFormContent as c,StyledFormFooter as f,StyledLeftButtons as u,StyledRightButtons as s}from"./form.style.js";import{formSpacing as m}from"./form.config.js";import d from"../../__internal__/modal/modal.context.js";function b(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function p(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),o.forEach((function(e){b(t,e,r[e])}))}return t}function g(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const y=b=>{var{children:y,saveButton:h,leftSideButtons:O,rightSideButtons:j,errorCount:S,warningCount:P,onSubmit:w,buttonAlignment:k="right",footerChildren:_,stickyFooter:v,stickyFooterVariant:F="light",fieldSpacing:B=3,noValidate:C=!0,height:x,fullWidthButtons:V=!1,footerPadding:A={}}=b,I=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(b,["children","saveButton","leftSideButtons","rightSideButtons","errorCount","warningCount","onSubmit","buttonAlignment","footerChildren","stickyFooter","stickyFooterVariant","fieldSpacing","noValidate","height","fullWidthButtons","footerPadding"]);const D=o(null),W=o(null),{isInModal:E}=n(d),M=!!(_||h||O||j||S||P);return t(a,g(p({ref:D,className:v?"sticky":"",stickyFooter:v,onSubmit:w,"data-component":"form",noValidate:C,height:x,isInModal:E},I,i("form",I)),{children:[e(c,{"data-element":"form-content","data-role":"form-content",stickyFooter:v,tabIndex:-1,isInModal:E,fieldSpacing:m[B],children:y}),M&&e(f,g(p(g(p({"data-element":"form-footer","data-role":"form-footer",ref:W,hasFooterChildren:!!_,stickyFooter:v},v&&{stickyFooterVariant:F}),{buttonAlignment:k,fullWidthButtons:V}),A),{children:_||t(r,{children:[O&&e(u,{"data-role":"form-left-buttons",buttonAlignment:k,children:O}),e(l,{fullWidth:V,errorCount:S,warningCount:P,children:h}),j&&e(s,{"data-role":"form-right-buttons",buttonAlignment:k,children:j})]})}))]}))};y.displayName="Form";export{y as Form,y as default};
+import{jsxs as t,jsx as e,Fragment as r}from"react/jsx-runtime";import{useRef as o,useContext as n}from"react";import i from"../../__internal__/utils/helpers/tags/tags.js";import l from"./__internal__/form-summary.component.js";import{StyledForm as a,StyledFormContent as c,StyledFormFooter as f,StyledLeftButtons as u,StyledRightButtons as s}from"./form.style.js";import{formSpacing as m}from"./form.config.js";import d from"../../__internal__/modal/modal.context.js";function b(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function p(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),o.forEach((function(e){b(t,e,r[e])}))}return t}function g(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const y=b=>{var{children:y,saveButton:h,leftSideButtons:O,rightSideButtons:j,errorCount:S,warningCount:P,onSubmit:w,buttonAlignment:k="right",footerChildren:_,stickyFooter:v,stickyFooterVariant:F="light",fieldSpacing:B=3,noValidate:C=!0,height:x,fullWidthButtons:V=!1,footerPadding:A={},id:I}=b,D=function(t,e){if(null==t)return{};var r,o,n=function(t,e){if(null==t)return{};var r,o,n={},i=Object.keys(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||(n[r]=t[r]);return n}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(o=0;o<i.length;o++)r=i[o],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(n[r]=t[r])}return n}(b,["children","saveButton","leftSideButtons","rightSideButtons","errorCount","warningCount","onSubmit","buttonAlignment","footerChildren","stickyFooter","stickyFooterVariant","fieldSpacing","noValidate","height","fullWidthButtons","footerPadding","id"]);const W=o(null),E=o(null),{isInModal:M}=n(d),N=!!(_||h||O||j||S||P);return t(a,g(p({ref:W,id:I,className:v?"sticky":"",stickyFooter:v,onSubmit:w,"data-component":"form",noValidate:C,height:x,isInModal:M},D,i("form",D)),{children:[e(c,{"data-element":"form-content","data-role":"form-content",stickyFooter:v,tabIndex:-1,isInModal:M,fieldSpacing:m[B],children:y}),N&&e(f,g(p(g(p({"data-element":"form-footer","data-role":"form-footer",ref:E,hasFooterChildren:!!_,stickyFooter:v},v&&{stickyFooterVariant:F}),{buttonAlignment:k,fullWidthButtons:V}),A),{children:_||t(r,{children:[O&&e(u,{"data-role":"form-left-buttons",buttonAlignment:k,children:O}),e(l,{fullWidth:V,errorCount:S,warningCount:P,children:h}),j&&e(s,{"data-role":"form-right-buttons",buttonAlignment:k,children:j})]})}))]}))};y.displayName="Form";export{y as Form,y as default};

package/lib/components/button/__next__/button.component.d.ts

@@ -22,6 +22,8 @@ export interface ButtonProps extends Omit<LegacyButtonProps, "size" | "type" | "
     disabled?: boolean;
     /** Flag to indicate that the button can be full-width. */
     fullWidth?: boolean;
+    /** Associates the button with a form element; value should be the id of the form. */
+    form?: string;
     /** The ID of the button. */
     id?: string;
     /** Set the button to use a dark-mode appearance. */

package/lib/components/button/__next__/button.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./button.style.js"),n=require("../../../__internal__/utils/helpers/tags/tags.js"),a=require("../../../hooks/useMediaQuery/useMediaQuery.js"),i=require("./__internal__/utils/is-icon-only.js"),o=require("../../icon/icon.component.js");function l(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){l(e,r,t[r])}))}return e}function c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const s=r.forwardRef(((l,s)=>{var{"aria-describedby":d,"aria-label":y,"aria-labelledby":p,children:b,disabled:f=!1,fullWidth:v=!1,id:j,inverse:O,name:g,noWrap:h=!0,onClick:m,size:T="medium",variant:P="default",variantType:w="primary",buttonType:x,destructive:k,iconType:_,iconPosition:S="before",isWhite:W,href:$,type:q="button"}=l,B=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(l,["aria-describedby","aria-label","aria-labelledby","children","disabled","fullWidth","id","inverse","name","noWrap","onClick","size","variant","variantType","buttonType","destructive","iconType","iconPosition","isWhite","href","type"]);const C=r.useRef(null),D=void 0!==b&&!1!==b,M=!!_&&!D||i.default(b);r.useImperativeHandle(s,(()=>({focusButton:()=>{var e;null===(e=C.current)||void 0===e||e.focus()}})),[]);const z=a.default("screen and (prefers-reduced-motion: no-preference)"),{variant:E,variantType:F}=(({buttonType:e,destructive:r,variant:t,variantType:n})=>{if(!e&&!r)return{variant:t,variantType:n};if(r)return{variant:"destructive",variantType:"primary"===(null!=e?e:n)?"primary":"secondary"};switch(e){case"primary":return{variant:"default",variantType:"primary"};case"tertiary":return{variant:"default",variantType:"tertiary"};case"darkBackground":default:return{variant:"default",variantType:"secondary"};case"gradient-grey":case"gradient-white":return{variant:"gradient",variantType:"secondary"}}})({buttonType:x,destructive:k,variant:P,variantType:w}),I=$&&!f?{href:$,target:B.target,rel:B.rel,as:"a"}:{type:q,as:"button"};return e.jsx(t.StyledButton,c(u({$allowMotion:z,"aria-describedby":d,"aria-label":y,"aria-labelledby":p,disabled:f,$fullWidth:v,$inverse:O||"darkBackground"===x||W,id:j,name:g,$noWrap:h,onClick:e=>{var r;null===(r=C.current)||void 0===r||r.focus({preventScroll:!0}),null==m||m(e)},ref:C,$size:T,$variant:E,$variantType:F,$iconOnly:M},I,n.default("button",B),B),{children:e.jsx(t.StyledContentContainer,{"data-role":"button-child-container",children:(()=>{if(!_)return b;const r={"aria-hidden":!0,bg:"transparent"};return D?"before"===S?e.jsxs(e.Fragment,{children:[e.jsx(o.default,c(u({type:_},r),{"data-role":"button-icon-before"})),b]}):e.jsxs(e.Fragment,{children:[b,e.jsx(o.default,c(u({type:_},r),{"data-role":"button-icon-after"}))]}):e.jsx(o.default,c(u({type:_},r),{"data-role":"button-icon-only"}))})()})}))}));exports.Button=s,exports.default=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),t=require("./button.style.js"),n=require("../../../__internal__/utils/helpers/tags/tags.js"),a=require("../../../hooks/useMediaQuery/useMediaQuery.js"),i=require("./__internal__/utils/is-icon-only.js"),o=require("../../icon/icon.component.js");function l(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},n=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),n.forEach((function(r){l(e,r,t[r])}))}return e}function c(e,r){return r=null!=r?r:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))})),e}const s=r.forwardRef(((l,s)=>{var{"aria-describedby":d,"aria-label":y,"aria-labelledby":p,children:f,disabled:b=!1,fullWidth:v=!1,form:j,id:O,inverse:m,name:g,noWrap:h=!0,onClick:T,size:P="medium",variant:w="default",variantType:x="primary",buttonType:k,destructive:_,iconType:S,iconPosition:W="before",isWhite:$,href:q,type:B="button"}=l,C=function(e,r){if(null==e)return{};var t,n,a=function(e,r){if(null==e)return{};var t,n,a={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(a[t]=e[t]);return a}(e,r);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(a[t]=e[t])}return a}(l,["aria-describedby","aria-label","aria-labelledby","children","disabled","fullWidth","form","id","inverse","name","noWrap","onClick","size","variant","variantType","buttonType","destructive","iconType","iconPosition","isWhite","href","type"]);const D=r.useRef(null),M=void 0!==f&&!1!==f,z=!!S&&!M||i.default(f);r.useImperativeHandle(s,(()=>({focusButton:()=>{var e;null===(e=D.current)||void 0===e||e.focus()}})),[]);const E=a.default("screen and (prefers-reduced-motion: no-preference)"),{variant:F,variantType:I}=(({buttonType:e,destructive:r,variant:t,variantType:n})=>{if(!e&&!r)return{variant:t,variantType:n};if(r)return{variant:"destructive",variantType:"primary"===(null!=e?e:n)?"primary":"secondary"};switch(e){case"primary":return{variant:"default",variantType:"primary"};case"tertiary":return{variant:"default",variantType:"tertiary"};case"darkBackground":default:return{variant:"default",variantType:"secondary"};case"gradient-grey":case"gradient-white":return{variant:"gradient",variantType:"secondary"}}})({buttonType:k,destructive:_,variant:w,variantType:x}),Q=q&&!b?{href:q,target:C.target,rel:C.rel,as:"a"}:{type:B,as:"button"};return e.jsx(t.StyledButton,c(u({$allowMotion:E,"aria-describedby":d,"aria-label":y,"aria-labelledby":p,disabled:b,$fullWidth:v,form:j,$inverse:m||"darkBackground"===k||$,id:O,name:g,$noWrap:h,onClick:e=>{var r;null===(r=D.current)||void 0===r||r.focus({preventScroll:!0}),null==T||T(e)},ref:D,$size:P,$variant:F,$variantType:I,$iconOnly:z},Q,n.default("button",C),C),{children:e.jsx(t.StyledContentContainer,{"data-role":"button-child-container",children:(()=>{if(!S)return f;const r={"aria-hidden":!0,bg:"transparent"};return M?"before"===W?e.jsxs(e.Fragment,{children:[e.jsx(o.default,c(u({type:S},r),{"data-role":"button-icon-before"})),f]}):e.jsxs(e.Fragment,{children:[f,e.jsx(o.default,c(u({type:S},r),{"data-role":"button-icon-after"}))]}):e.jsx(o.default,c(u({type:S},r),{"data-role":"button-icon-only"}))})()})}))}));exports.Button=s,exports.default=s;

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

@@ -5,6 +5,8 @@ import { FormButtonAlignment } from "./form.config";
 export interface FormProps extends SpaceProps, TagProps {
     /** Alignment of buttons */
     buttonAlignment?: FormButtonAlignment;
+    /** The id attribute of the underlying form element */
+    id?: string;
     /** Child elements */
     children?: React.ReactNode;
     /** The total number of errors present in the form */
@@ -37,7 +39,7 @@ export interface FormProps extends SpaceProps, TagProps {
     footerPadding?: PaddingProps;
 }
 export declare const Form: {
-    ({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, footerChildren, stickyFooter, stickyFooterVariant, fieldSpacing, noValidate, height, fullWidthButtons, footerPadding, ...rest }: FormProps): React.JSX.Element;
+    ({ children, saveButton, leftSideButtons, rightSideButtons, errorCount, warningCount, onSubmit, buttonAlignment, footerChildren, stickyFooter, stickyFooterVariant, fieldSpacing, noValidate, height, fullWidthButtons, footerPadding, id, ...rest }: FormProps): React.JSX.Element;
     displayName: string;
 };
 export default Form;

package/lib/components/form/form.component.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),r=require("../../__internal__/utils/helpers/tags/tags.js"),n=require("./__internal__/form-summary.component.js"),o=require("./form.style.js"),i=require("./form.config.js"),l=require("../../__internal__/modal/modal.context.js");function u(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function a(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){u(t,e,r[e])}))}return t}function s(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const c=u=>{var{children:c,saveButton:f,leftSideButtons:d,rightSideButtons:m,errorCount:y,warningCount:b,onSubmit:g,buttonAlignment:p="right",footerChildren:h,stickyFooter:j,stickyFooterVariant:O="light",fieldSpacing:S=3,noValidate:x=!0,height:F,fullWidthButtons:P=!1,footerPadding:w={}}=u,_=function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}(u,["children","saveButton","leftSideButtons","rightSideButtons","errorCount","warningCount","onSubmit","buttonAlignment","footerChildren","stickyFooter","stickyFooterVariant","fieldSpacing","noValidate","height","fullWidthButtons","footerPadding"]);const v=e.useRef(null),k=e.useRef(null),{isInModal:B}=e.useContext(l.default),C=!!(h||f||d||m||y||b);return t.jsxs(o.StyledForm,s(a({ref:v,className:j?"sticky":"",stickyFooter:j,onSubmit:g,"data-component":"form",noValidate:x,height:F,isInModal:B},_,r.default("form",_)),{children:[t.jsx(o.StyledFormContent,{"data-element":"form-content","data-role":"form-content",stickyFooter:j,tabIndex:-1,isInModal:B,fieldSpacing:i.formSpacing[S],children:c}),C&&t.jsx(o.StyledFormFooter,s(a(s(a({"data-element":"form-footer","data-role":"form-footer",ref:k,hasFooterChildren:!!h,stickyFooter:j},j&&{stickyFooterVariant:O}),{buttonAlignment:p,fullWidthButtons:P}),w),{children:h||t.jsxs(t.Fragment,{children:[d&&t.jsx(o.StyledLeftButtons,{"data-role":"form-left-buttons",buttonAlignment:p,children:d}),t.jsx(n.default,{fullWidth:P,errorCount:y,warningCount:b,children:f}),m&&t.jsx(o.StyledRightButtons,{"data-role":"form-right-buttons",buttonAlignment:p,children:m})]})}))]}))};c.displayName="Form",exports.Form=c,exports.default=c;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react/jsx-runtime"),e=require("react"),r=require("../../__internal__/utils/helpers/tags/tags.js"),n=require("./__internal__/form-summary.component.js"),o=require("./form.style.js"),i=require("./form.config.js"),l=require("../../__internal__/modal/modal.context.js");function u(t,e,r){return e in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}function a(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(t){return Object.getOwnPropertyDescriptor(r,t).enumerable})))),n.forEach((function(e){u(t,e,r[e])}))}return t}function s(t,e){return e=null!=e?e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):function(t){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e.push.apply(e,r)}return e}(Object(e)).forEach((function(r){Object.defineProperty(t,r,Object.getOwnPropertyDescriptor(e,r))})),t}const c=u=>{var{children:c,saveButton:f,leftSideButtons:d,rightSideButtons:m,errorCount:y,warningCount:b,onSubmit:g,buttonAlignment:p="right",footerChildren:h,stickyFooter:j,stickyFooterVariant:O="light",fieldSpacing:S=3,noValidate:x=!0,height:F,fullWidthButtons:P=!1,footerPadding:w={},id:_}=u,v=function(t,e){if(null==t)return{};var r,n,o=function(t,e){if(null==t)return{};var r,n,o={},i=Object.keys(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||(o[r]=t[r]);return o}(t,e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(n=0;n<i.length;n++)r=i[n],e.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(t,r)&&(o[r]=t[r])}return o}(u,["children","saveButton","leftSideButtons","rightSideButtons","errorCount","warningCount","onSubmit","buttonAlignment","footerChildren","stickyFooter","stickyFooterVariant","fieldSpacing","noValidate","height","fullWidthButtons","footerPadding","id"]);const k=e.useRef(null),B=e.useRef(null),{isInModal:C}=e.useContext(l.default),q=!!(h||f||d||m||y||b);return t.jsxs(o.StyledForm,s(a({ref:k,id:_,className:j?"sticky":"",stickyFooter:j,onSubmit:g,"data-component":"form",noValidate:x,height:F,isInModal:C},v,r.default("form",v)),{children:[t.jsx(o.StyledFormContent,{"data-element":"form-content","data-role":"form-content",stickyFooter:j,tabIndex:-1,isInModal:C,fieldSpacing:i.formSpacing[S],children:c}),q&&t.jsx(o.StyledFormFooter,s(a(s(a({"data-element":"form-footer","data-role":"form-footer",ref:B,hasFooterChildren:!!h,stickyFooter:j},j&&{stickyFooterVariant:O}),{buttonAlignment:p,fullWidthButtons:P}),w),{children:h||t.jsxs(t.Fragment,{children:[d&&t.jsx(o.StyledLeftButtons,{"data-role":"form-left-buttons",buttonAlignment:p,children:d}),t.jsx(n.default,{fullWidth:P,errorCount:y,warningCount:b,children:f}),m&&t.jsx(o.StyledRightButtons,{"data-role":"form-right-buttons",buttonAlignment:p,children:m})]})}))]}))};c.displayName="Form",exports.Form=c,exports.default=c;

package/package.json

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