carbon-react 155.2.1 → 155.3.0

package/esm/__internal__/validation-message/validation-message.component.d.ts

@@ -11,6 +11,8 @@ export interface ValidationMessageProps extends TagProps {
     warning?: boolean | string;
     /** Whether this component resides on a dark background */
     isDarkBackground?: boolean;
+    /** Render the validation message above the input */
+    validationMessagePositionTop?: boolean;
 }
-declare const ValidationMessage: ({ error, validationId, warning, isDarkBackground, "data-element": dataElement, "data-role": dataRole, }: ValidationMessageProps) => React.JSX.Element | null;
+declare const ValidationMessage: ({ error, validationId, warning, isDarkBackground, "data-element": dataElement, "data-role": dataRole, validationMessagePositionTop, }: ValidationMessageProps) => React.JSX.Element | null;
 export default ValidationMessage;

package/esm/__internal__/validation-message/validation-message.component.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import"react";import t from"./validation-message.style.js";import r from"../utils/helpers/tags/tags.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=({error:o,validationId:a,warning:i,isDarkBackground:c,"data-element":s,"data-role":l="validation-message"})=>{const p=o||i;return"string"==typeof p?e(t,(u=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}({id:a,isWarning:!(o||!i),isDarkBackground:c},r("validation-message",{"data-element":s,"data-role":l})),b=null!=(b={children:p})?b:{},Object.getOwnPropertyDescriptors?Object.defineProperties(u,Object.getOwnPropertyDescriptors(b)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(b)).forEach((function(e){Object.defineProperty(u,e,Object.getOwnPropertyDescriptor(b,e))})),u)):null;var u,b};export{o as default};
+import{jsx as e}from"react/jsx-runtime";import"react";import t from"./validation-message.style.js";import r from"../utils/helpers/tags/tags.js";function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const o=({error:o,validationId:a,warning:i,isDarkBackground:s,"data-element":c,"data-role":l="validation-message",validationMessagePositionTop:p})=>{const u=o||i;return"string"==typeof u?e(t,(b=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){n(e,t,r[t])}))}return e}({id:a,isWarning:!(o||!i),isDarkBackground:s},r("validation-message",{"data-element":c,"data-role":l})),f=null!=(f={validationMessagePositionTop:p,children:u})?f:{},Object.getOwnPropertyDescriptors?Object.defineProperties(b,Object.getOwnPropertyDescriptors(f)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(f)).forEach((function(e){Object.defineProperty(b,e,Object.getOwnPropertyDescriptor(f,e))})),b)):null;var b,f};export{o as default};

package/esm/__internal__/validation-message/validation-message.style.d.ts

@@ -1,6 +1,7 @@
 interface StyledValidationMessageProps {
     isWarning?: boolean;
     isDarkBackground?: boolean;
+    validationMessagePositionTop?: boolean;
 }
 declare const StyledValidationMessage: import("styled-components").StyledComponent<"p", any, StyledValidationMessageProps, never>;
 export default StyledValidationMessage;

package/esm/__internal__/validation-message/validation-message.style.js

@@ -1 +1 @@
-import o,{css as a}from"styled-components";const t=o.p.withConfig({displayName:"validation-message.style__StyledValidationMessage",componentId:"sc-4033c281-0"})(["",""],(({isWarning:o,isDarkBackground:t})=>a(["color:",";font-weight:",";margin-top:0px;margin-bottom:8px;"],o?"var(--colorsSemanticCaution600)":t?"var(--colorsSemanticNegative450)":"var(--colorsSemanticNegative500)",o?"normal":"500")));export{t as default};
+import o,{css as a}from"styled-components";const t=o.p.withConfig({displayName:"validation-message.style__StyledValidationMessage",componentId:"sc-e21db441-0"})(["",""],(({isWarning:o,isDarkBackground:t,validationMessagePositionTop:i})=>a(["color:",";font-weight:",";margin:0px;margin-",":8px;"],o?"var(--colorsSemanticCaution600)":t?"var(--colorsSemanticNegative450)":"var(--colorsSemanticNegative500)",o?"normal":"500",i?"bottom":"top")));export{t as default};

package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -38,9 +38,11 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps, TagPro
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** When true, Checkboxes are inline */
     inline?: boolean;
+    /** Render the ValidationMessage above the Checkbox inputs when validationRedesignOptIn flag is set */
+    validationMessagePositionTop?: boolean;
 }
 export declare const CheckboxGroup: {
-    ({ children, legend, error, warning, info, required, isOptional, legendInline, legendWidth, legendAlign, legendSpacing, legendHelp, tooltipPosition, inline, id, ...rest }: CheckboxGroupProps): React.JSX.Element;
+    ({ children, legend, error, warning, info, required, isOptional, legendInline, legendWidth, legendAlign, legendSpacing, legendHelp, tooltipPosition, inline, id, validationMessagePositionTop, ...rest }: CheckboxGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default CheckboxGroup;

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

@@ -1 +1 @@
-import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import{useContext as i,useRef as t}from"react";import o from"./checkbox-group.style.js";import l from"../../../__internal__/utils/helpers/tags/tags.js";import a from"../../../__internal__/fieldset/fieldset.component.js";import"../../../style/utils/filter-styled-system-padding-props.js";import p from"../../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as c}from"../../../__internal__/tooltip-provider/index.js";import d from"../../carbon-provider/__internal__/new-validation.context.js";import s from"../../../__internal__/validation-message/validation-message.component.js";import{Box as g}from"../../box/box.component.js";import u from"../../textbox/textbox.style.js";import f from"./__internal__/checkbox-group.context.js";import m from"../../../__internal__/utils/helpers/guid/index.js";import b from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import{HintText as h}from"../../../__internal__/hint-text/hint-text.component.js";import _ from"../../../__internal__/utils/logger/index.js";function y(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function O(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),i.forEach((function(r){y(e,r,n[r])}))}return e}function j(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 n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}let v=!1;const x=y=>{var{children:x,legend:w,error:P,warning:k,info:I,required:S,isOptional:q,legendInline:A,legendWidth:D,legendAlign:B="left",legendSpacing:G,legendHelp:R,tooltipPosition:E,inline:W,id:C}=y,H=function(e,r){if(null==e)return{};var n,i,t=function(e,r){if(null==e)return{};var n,i,t={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||(t[n]=e[n]);return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(y,["children","legend","error","warning","info","required","isOptional","legendInline","legendWidth","legendAlign","legendSpacing","legendHelp","tooltipPosition","inline","id"]);!v&&q&&(v=!0,_.deprecate("`isOptional` is deprecated in CheckboxGroup and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:N}=i(d),T=t(m()),$=C||T.current,z=R?`${$}-hint`:void 0,{validationId:F,ariaDescribedBy:J}=b({id:$,validationRedesignOptIn:!0,error:P,warning:k,info:I}),K=[J,z].filter(Boolean).join(" ");return e(r,{children:N?n(a,j(O(j(O({id:$,legend:w,legendAlign:B,error:P,warning:k,isRequired:S,isOptional:q,width:"fit-content"},K&&{"aria-describedby":K},l("checkboxgroup",H)),{blockGroupBehaviour:!(P||k)}),p(H)),{children:[R&&e(h,{align:B,id:z,marginTop:"-4px",children:R}),n(g,{position:"relative",children:[e(s,{error:P,warning:k,validationId:F}),(P||k)&&e(u,{warning:!(P||!k),inline:W}),e(o,{"data-component":"checkbox-group","data-role":"checkbox-group",inline:W,children:e(f.Provider,{value:{error:!!P,warning:!!k},children:x})})]})]})):e(c,{tooltipPosition:E,children:e(a,j(O(j(O({id:$,legend:w,inline:A,legendWidth:D,legendAlign:B,legendSpacing:G,error:P,warning:k,info:I,isRequired:S,isOptional:q,"aria-describedby":J,validationId:F},l("checkboxgroup",H)),{blockGroupBehaviour:!(P||k||I)}),p(H)),{children:e(o,{"data-component":"checkbox-group","data-role":"checkbox-group",legendInline:A,children:e(f.Provider,{value:{error:!!P,warning:!!k,info:!!I},children:x})})}))})})};x.displayName="CheckboxGroup";export{x as CheckboxGroup,x as default};
+import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import{useContext as i,useRef as t}from"react";import o from"./checkbox-group.style.js";import l from"../../../__internal__/utils/helpers/tags/tags.js";import a from"../../../__internal__/fieldset/fieldset.component.js";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as d}from"../../../__internal__/tooltip-provider/index.js";import p from"../../carbon-provider/__internal__/new-validation.context.js";import c from"../../../__internal__/validation-message/validation-message.component.js";import{Box as g}from"../../box/box.component.js";import u from"../../textbox/textbox.style.js";import f from"./__internal__/checkbox-group.context.js";import m from"../../../__internal__/utils/helpers/guid/index.js";import b from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import{HintText as h}from"../../../__internal__/hint-text/hint-text.component.js";import _ from"../../../__internal__/utils/logger/index.js";function y(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function O(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),i.forEach((function(r){y(e,r,n[r])}))}return e}function j(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 n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}let v=!1;const x=y=>{var{children:x,legend:w,error:P,warning:k,info:I,required:S,isOptional:q,legendInline:A,legendWidth:D,legendAlign:T="left",legendSpacing:B,legendHelp:G,tooltipPosition:M,inline:R,id:E,validationMessagePositionTop:W=!0}=y,C=function(e,r){if(null==e)return{};var n,i,t=function(e,r){if(null==e)return{};var n,i,t={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||(t[n]=e[n]);return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(y,["children","legend","error","warning","info","required","isOptional","legendInline","legendWidth","legendAlign","legendSpacing","legendHelp","tooltipPosition","inline","id","validationMessagePositionTop"]);!v&&q&&(v=!0,_.deprecate("`isOptional` is deprecated in CheckboxGroup and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:H}=i(p),N=t(m()),$=E||N.current,z=G?`${$}-hint`:void 0,{validationId:F,ariaDescribedBy:J}=b({id:$,validationRedesignOptIn:!0,error:P,warning:k,info:I}),K=(H&&W?[J,z]:[z,J]).filter(Boolean).join(" ");return e(r,{children:H?n(a,j(O(j(O({id:$,legend:w,legendAlign:T,error:P,warning:k,isRequired:S,isOptional:q,width:"fit-content"},K&&{"aria-describedby":K},l("checkboxgroup",C)),{blockGroupBehaviour:!(P||k)}),s(C)),{children:[G&&e(h,{align:T,id:z,marginTop:"-4px",children:G}),n(g,{position:"relative",children:[W&&n(r,{children:[e(c,{error:P,warning:k,validationId:F,validationMessagePositionTop:W}),(P||k)&&e(u,{warning:!(P||!k)})]}),e(o,{"data-component":"checkbox-group","data-role":"checkbox-group",inline:R,children:e(f.Provider,{value:{error:!!P,warning:!!k},children:x})}),!W&&n(r,{children:[e(c,{error:P,warning:k,validationId:F,validationMessagePositionTop:W}),(P||k)&&e(u,{warning:!(P||!k)})]})]})]})):e(d,{tooltipPosition:M,children:e(a,j(O(j(O({id:$,legend:w,inline:A,legendWidth:D,legendAlign:T,legendSpacing:B,error:P,warning:k,info:I,isRequired:S,isOptional:q,"aria-describedby":J,validationId:F},l("checkboxgroup",C)),{blockGroupBehaviour:!(P||k||I)}),s(C)),{children:e(o,{"data-component":"checkbox-group","data-role":"checkbox-group",legendInline:A,children:e(f.Provider,{value:{error:!!P,warning:!!k,info:!!I},children:x})})}))})})};x.displayName="CheckboxGroup";export{x as CheckboxGroup,x as default};

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

@@ -1 +1 @@
-import o,{css as i}from"styled-components";import t from"../../../__internal__/form-field/form-field.style.js";import e from"../../icon/icon.style.js";import l from"../checkbox.style.js";import{StyledLabelContainer as n}from"../../../__internal__/label/label.style.js";import r from"../../../__internal__/validations/validation-icon.style.js";const a=o.div.withConfig({displayName:"checkbox-group.style__StyledCheckboxGroup",componentId:"sc-6ab7858f-0"})(["display:flex;flex-direction:column;","::before{font-size:16px;}&& ","{margin:0;}& ","{margin-bottom:var(--spacing150);:last-of-type{margin-bottom:0;}}& > ","{& > ","{margin-bottom:4px;vertical-align:middle;","{display:inline-block;}}}"," ",""],e,t,l,t,n,r,(({legendInline:o})=>o&&i(["",":first-child{padding-top:4px;}"],l)),(({inline:o})=>o&&i(["flex-direction:row;",":not(:first-of-type){margin-left:32px;}"],l)));export{a as default};
+import i,{css as o}from"styled-components";import e from"../../../__internal__/form-field/form-field.style.js";import t from"../../icon/icon.style.js";import l from"../checkbox.style.js";import{StyledLabelContainer as n}from"../../../__internal__/label/label.style.js";import r from"../../../__internal__/validations/validation-icon.style.js";const m=i.div.withConfig({displayName:"checkbox-group.style__StyledCheckboxGroup",componentId:"sc-e51b1b6e-0"})(["display:flex;flex-direction:column;","::before{font-size:16px;}&& ","{margin:0;}& ","{margin-bottom:var(--spacing150);:last-of-type{margin-bottom:0;}}& > ","{& > ","{margin-bottom:4px;vertical-align:middle;","{display:inline-block;}}}"," ",""],t,e,l,e,n,r,(({legendInline:i})=>i&&o(["",":first-child{padding-top:4px;}"],l)),(({inline:i})=>i&&o(["flex-direction:row;","{margin:0;:not(:first-of-type){margin-left:32px;}}"],l)));export{m as default};

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

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useMemo as a,useContext as o,useState as l,useCallback as i,useEffect as u}from"react";import{isValidLocaleDate as s,checkISOFormatAndLength as c,parseISODate as p,parseDate as d,findMatchedFormatAndValue as m,isDateValid as f,additionalYears as b,formattedValue as y,getSeparator as O,formatToISO as v}from"./__internal__/utils.js";import g from"../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import j from"../../style/utils/filter-styled-system-margin-props.js";import k from"../../style/utils/filter-out-styled-system-spacing-props.js";import h from"./__internal__/date-formats/index.js";import P from"./date.style.js";import{Textbox as w}from"../textbox/textbox.component.js";import{DatePicker as D}from"./__internal__/date-picker/date-picker.component.js";import x from"../date-range/__internal__/date-range.context.js";import L from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import C from"../../__internal__/utils/helpers/guid/index.js";import B from"../../__internal__/utils/helpers/tags/tags.js";function W(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function F(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){W(e,t,r[t])}))}return e}function A(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const S=r.forwardRef(((r,W)=>{var{adaptiveLabelBreakpoint:S,allowEmptyValue:I,autoFocus:E,"data-element":V,"data-role":K,disabled:M,disablePortal:z=!0,helpAriaLabel:R,labelInline:N,minDate:T,maxDate:q,onBlur:G,onChange:$,onClick:H,onFocus:J,onKeyDown:Q,pickerProps:U,readOnly:X,size:Y="medium",tooltipPosition:Z,value:ee,inputWidth:te,labelWidth:re,maxWidth:ne,inputName:ae,onPickerClose:oe,onPickerOpen:le,dateFormatOverride:ie,datePickerAriaLabel:ue,datePickerAriaLabelledBy:se}=r,ce=function(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}(r,["adaptiveLabelBreakpoint","allowEmptyValue","autoFocus","data-element","data-role","disabled","disablePortal","helpAriaLabel","labelInline","minDate","maxDate","onBlur","onChange","onClick","onFocus","onKeyDown","pickerProps","readOnly","size","tooltipPosition","value","inputWidth","labelWidth","maxWidth","inputName","onPickerClose","onPickerOpen","dateFormatOverride","datePickerAriaLabel","datePickerAriaLabelledBy"]);const pe=n(null),de=n(null),me=n(null),fe=n(!1),be=n(!1),ye=n(!1),Oe=g(),{dateFnsLocale:ve,dateFormatOverride:ge}=Oe.date,{format:_e,formats:je}=a((()=>h(ve(),ie||ge)),[ve,ge,ie]),{inputRefMap:ke,setInputRefMap:he}=o(x),[Pe,we]=l(!1),[De,xe]=l((()=>{if(s(ee,ve()))return c(ee)?p(ee):d(_e,ee)})),Le=n(!0),Ce=n(C()),Be=e=>I&&!e.length?e:null,We=e=>{const{id:t,name:r}=e.target,[n,a]=m(e.target.value,je),o="blur"===e.type?y(_e,De):e.target.value,l=f(d(n,a))?v(...b(n,a)):Be(e.target.value);return{target:A(F({},r&&{name:r},t&&{id:t}),{value:{formattedValue:o,rawValue:l}})}},Fe=L((()=>{var e,t;Pe&&(fe.current=!0,null===(e=me.current)||void 0===e||e.focus(),be.current=!1,null===(t=me.current)||void 0===t||t.blur(),we(!1),null==oe||oe(),fe.current=!1)}),"mousedown"),Ae=e=>{H&&H(e)},Se=i((e=>{var t;me.current=e,de.current=null==e?void 0:e.parentElement,W&&("function"==typeof W?W(e):W.current=e),ae&&(null==ke||null===(t=ke[ae])||void 0===t?void 0:t.setOpen)!==we&&(null==he||he({[ae]:{isBlurBlocked:be,setOpen:we}}))}),[ae,ke,he,W]);u((()=>{const[e,t]=m(ee,je);e&&t&&f(d(e,t))?xe(d(...b(e,t))):c(ee)&&Le.current?xe(p(ee)):xe(void 0)}),[ee,je]);const Ie=j(ce);return e(P,A(F(A(F({ref:pe,role:"presentation",size:Y,labelInline:N},Ie),{applyDateRangeStyling:!!ke,maxWidth:ne,inputWidth:te}),B("date",{"data-element":V,"data-role":K})),{children:[t(w,A(F({},k(ce)),{"data-component":"date-input",value:(()=>{if(c(ee)&&Le.current)return y(_e,p(ee));const e=O(ee),t=O(_e),r=()=>ee.split("").map((r=>r===e?t:r)).join("");if(Le.current&&e!==t&&f(d(_e,r()))){Le.current=!1;const[e,t]=m(r(),je);return y(_e,d(...b(e,t)))}return ee})(),onBlur:e=>{if(M||X)return;let t;if(f(De)){t=We(e);const r=c(ee)?y(_e,p(ee)):ee,[,n]=m(r,je);y(_e,De)!==n&&$(t)}else{const{id:r,name:n}=e.target;t={target:A(F({},n&&{name:n},r&&{id:r}),{value:{formattedValue:e.target.value,rawValue:Be(e.target.value)}})}}be.current||G&&G(t)},onChange:e=>{Le.current=!1,$(We(e))},onClick:Ae,onFocus:e=>{M||X||(be.current=!1,J&&J(e))},onKeyDown:e=>{if(Q&&Q(e),Pe&&_.isTabKey(e)){if(_.isShiftKey(e))we(!1),null==oe||oe();else if(!z){var t,r;e.preventDefault(),null===(r=document)||void 0===r||null===(t=r.querySelector(`[id="${Ce.current}"]`))||void 0===t||t.focus()}fe.current=!1}},iconOnClick:Ae,onMouseDown:()=>{Fe(),he&&(be.current=!0),Pe||null==le||le()},iconOnMouseDown:()=>{be.current=!0,fe.current=!0,Fe(),Pe?(we(!1),null==oe||oe()):(we(!0),null==le||le())},inputIcon:"calendar",labelInline:N,ref:Se,adaptiveLabelBreakpoint:S,tooltipPosition:Z,helpAriaLabel:R,autoFocus:E,size:Y,disabled:M,readOnly:X,inputWidth:te,labelWidth:re,maxWidth:ne,m:0})),t(D,{disablePortal:z,inputElement:de,pickerProps:U,selectedDays:De,onDayClick:(e,t)=>{var r;xe(e),$(We(A(F({},t),{target:A(F({},t.target),{value:y(_e,e)})}))),ye.current=!0,null===(r=me.current)||void 0===r||r.focus(),we(!1)},minDate:T,maxDate:q,pickerMouseDown:()=>{be.current=!0,Fe()},open:Pe,setOpen:we,pickerTabGuardId:Ce.current,onPickerClose:oe,ariaLabel:ue,ariaLabelledBy:se})]}))}));export{S as DateInput,S as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import r,{useRef as n,useMemo as o,useContext as a,useState as l,useCallback as i,useEffect as u}from"react";import{isValidLocaleDate as s,checkISOFormatAndLength as c,parseISODate as p,parseDate as d,findMatchedFormatAndValue as m,isDateValid as f,additionalYears as b,formattedValue as y,getSeparator as v,formatToISO as g}from"./__internal__/utils.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import _ from"../../__internal__/utils/helpers/events/events.js";import"../../style/utils/filter-styled-system-padding-props.js";import P from"../../style/utils/filter-styled-system-margin-props.js";import j from"../../style/utils/filter-out-styled-system-spacing-props.js";import k from"./__internal__/date-formats/index.js";import h from"./date.style.js";import{Textbox as w}from"../textbox/textbox.component.js";import{DatePicker as D}from"./__internal__/date-picker/date-picker.component.js";import x from"../date-range/__internal__/date-range.context.js";import L from"../../hooks/__internal__/useClickAwayListener/useClickAwayListener.js";import C from"../../__internal__/utils/helpers/guid/index.js";import B from"../../__internal__/utils/helpers/tags/tags.js";function W(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function F(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){W(e,t,r[t])}))}return e}function A(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const M=r.forwardRef(((r,W)=>{var{adaptiveLabelBreakpoint:M,allowEmptyValue:S,autoFocus:I,"data-element":E,"data-role":T,disabled:V,disablePortal:K=!0,helpAriaLabel:z,labelInline:R,minDate:N,maxDate:q,onBlur:G,onChange:$,onClick:H,onFocus:J,onKeyDown:Q,pickerProps:U,readOnly:X,size:Y="medium",tooltipPosition:Z,value:ee,inputWidth:te,labelWidth:re,maxWidth:ne,inputName:oe,onPickerClose:ae,onPickerOpen:le,dateFormatOverride:ie,datePickerAriaLabel:ue,datePickerAriaLabelledBy:se,validationMessagePositionTop:ce=!0}=r,pe=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(r,["adaptiveLabelBreakpoint","allowEmptyValue","autoFocus","data-element","data-role","disabled","disablePortal","helpAriaLabel","labelInline","minDate","maxDate","onBlur","onChange","onClick","onFocus","onKeyDown","pickerProps","readOnly","size","tooltipPosition","value","inputWidth","labelWidth","maxWidth","inputName","onPickerClose","onPickerOpen","dateFormatOverride","datePickerAriaLabel","datePickerAriaLabelledBy","validationMessagePositionTop"]);const de=n(null),me=n(null),fe=n(null),be=n(!1),ye=n(!1),ve=n(!1),ge=O(),{dateFnsLocale:Oe,dateFormatOverride:_e}=ge.date,{format:Pe,formats:je}=o((()=>k(Oe(),ie||_e)),[Oe,_e,ie]),{inputRefMap:ke,setInputRefMap:he,validationMessagePositionTop:we}=a(x),[De,xe]=l(!1),[Le,Ce]=l((()=>{if(s(ee,Oe()))return c(ee)?p(ee):d(Pe,ee)})),Be=n(!0),We=n(C()),Fe=null!=we?we:ce,Ae=e=>S&&!e.length?e:null,Me=e=>{const{id:t,name:r}=e.target,[n,o]=m(e.target.value,je),a="blur"===e.type?y(Pe,Le):e.target.value,l=f(d(n,o))?g(...b(n,o)):Ae(e.target.value);return{target:A(F({},r&&{name:r},t&&{id:t}),{value:{formattedValue:a,rawValue:l}})}},Se=L((()=>{var e,t;De&&(be.current=!0,null===(e=fe.current)||void 0===e||e.focus(),ye.current=!1,null===(t=fe.current)||void 0===t||t.blur(),xe(!1),null==ae||ae(),be.current=!1)}),"mousedown"),Ie=e=>{H&&H(e)},Ee=i((e=>{var t;fe.current=e,me.current=null==e?void 0:e.parentElement,W&&("function"==typeof W?W(e):W.current=e),oe&&(null==ke||null===(t=ke[oe])||void 0===t?void 0:t.setOpen)!==xe&&(null==he||he({[oe]:{isBlurBlocked:ye,setOpen:xe}}))}),[oe,ke,he,W]);u((()=>{const[e,t]=m(ee,je);e&&t&&f(d(e,t))?Ce(d(...b(e,t))):c(ee)&&Be.current?Ce(p(ee)):Ce(void 0)}),[ee,je]);const Te=P(pe);return e(h,A(F(A(F({ref:de,role:"presentation",size:Y,labelInline:R},Te),{applyDateRangeStyling:!!ke,maxWidth:ne,inputWidth:te}),B("date",{"data-element":E,"data-role":T})),{children:[t(w,A(F({},j(pe)),{"data-component":"date-input",value:(()=>{if(c(ee)&&Be.current)return y(Pe,p(ee));const e=v(ee),t=v(Pe),r=()=>ee.split("").map((r=>r===e?t:r)).join("");if(Be.current&&e!==t&&f(d(Pe,r()))){Be.current=!1;const[e,t]=m(r(),je);return y(Pe,d(...b(e,t)))}return ee})(),onBlur:e=>{if(V||X)return;let t;if(f(Le)){t=Me(e);const r=c(ee)?y(Pe,p(ee)):ee,[,n]=m(r,je);y(Pe,Le)!==n&&$(t)}else{const{id:r,name:n}=e.target;t={target:A(F({},n&&{name:n},r&&{id:r}),{value:{formattedValue:e.target.value,rawValue:Ae(e.target.value)}})}}ye.current||G&&G(t)},onChange:e=>{Be.current=!1,$(Me(e))},onClick:Ie,onFocus:e=>{V||X||(ye.current=!1,J&&J(e))},onKeyDown:e=>{if(Q&&Q(e),De&&_.isTabKey(e)){if(_.isShiftKey(e))xe(!1),null==ae||ae();else if(!K){var t,r;e.preventDefault(),null===(r=document)||void 0===r||null===(t=r.querySelector(`[id="${We.current}"]`))||void 0===t||t.focus()}be.current=!1}},iconOnClick:Ie,onMouseDown:()=>{Se(),he&&(ye.current=!0),De||null==le||le()},iconOnMouseDown:()=>{ye.current=!0,be.current=!0,Se(),De?(xe(!1),null==ae||ae()):(xe(!0),null==le||le())},inputIcon:"calendar",labelInline:R,ref:Ee,adaptiveLabelBreakpoint:M,tooltipPosition:Z,helpAriaLabel:z,autoFocus:I,size:Y,disabled:V,readOnly:X,inputWidth:te,labelWidth:re,maxWidth:ne,m:0,validationMessagePositionTop:Fe})),t(D,{disablePortal:K,inputElement:me,pickerProps:U,selectedDays:Le,onDayClick:(e,t)=>{var r;Ce(e),$(Me(A(F({},t),{target:A(F({},t.target),{value:y(Pe,e)})}))),ve.current=!0,null===(r=fe.current)||void 0===r||r.focus(),xe(!1)},minDate:N,maxDate:q,pickerMouseDown:()=>{ye.current=!0,Se()},open:De,setOpen:xe,pickerTabGuardId:We.current,onPickerClose:ae,ariaLabel:ue,ariaLabelledBy:se})]}))}));export{M as DateInput,M as default};

package/esm/components/date-range/__internal__/date-range.context.d.ts

@@ -17,6 +17,7 @@ interface DateInputRefMap {
 export interface DateRangeContextProps {
     inputRefMap?: Partial<Record<InputName, DateInputRefMap>>;
     setInputRefMap?: (value: SetInputRefMapValue) => void;
+    validationMessagePositionTop?: boolean;
 }
 declare const _default: React.Context<DateRangeContextProps>;
 export default _default;

package/esm/components/date-range/date-range.component.d.ts

@@ -98,9 +98,11 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     datePickerEndAriaLabel?: string;
     /** Prop to specify the aria-labelledby attribute of the end date picker */
     datePickerEndAriaLabelledBy?: string;
+    /** Render the ValidationMessage above the Date inputs when validationRedesignOptIn flag is set */
+    validationMessagePositionTop?: boolean;
 }
 export declare const DateRange: {
-    ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, dateFormatOverride: dateFormatOverrideProp, datePickerStartAriaLabel, datePickerStartAriaLabelledBy, datePickerEndAriaLabel, datePickerEndAriaLabelledBy, ...rest }: DateRangeProps): React.JSX.Element;
+    ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, dateFormatOverride: dateFormatOverrideProp, datePickerStartAriaLabel, datePickerStartAriaLabelledBy, datePickerEndAriaLabel, datePickerEndAriaLabelledBy, validationMessagePositionTop, ...rest }: DateRangeProps): React.JSX.Element;
     displayName: string;
 };
 export default DateRange;

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as r,useMemo as a,useState as n,useCallback as l,useEffect as o}from"react";import{checkISOFormatAndLength as i,formattedValue as s,parseISODate as d,formatToISO as u}from"../date/__internal__/utils.js";import{DateInput as c}from"../date/date.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import p from"../../style/utils/filter-styled-system-margin-props.js";import m from"../../__internal__/utils/helpers/tags/tags.js";import f from"./date-range.style.js";import b from"../../__internal__/utils/helpers/events/events.js";import y from"../../hooks/__internal__/useLocale/useLocale.js";import v from"../../hooks/__internal__/usePrevious/index.js";import O from"../date/__internal__/date-formats/index.js";import g from"./__internal__/date-range.context.js";import _ from"../carbon-provider/__internal__/new-validation.context.js";import P from"../../__internal__/utils/logger/index.js";function j(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function w(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){j(e,t,r[t])}))}return e}function k(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let h=!1;const B=j=>{var{endDateProps:B={},id:L,labelsInline:V,name:E,onBlur:A,onChange:D,startDateProps:S={},tooltipPosition:x,validationOnLabel:I,value:R,startRef:F,endRef:q,required:K,isOptional:$,dateFormatOverride:C,datePickerStartAriaLabel:N,datePickerStartAriaLabelledBy:W,datePickerEndAriaLabel:M,datePickerEndAriaLabelledBy:T}=j,z=function(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},l=Object.keys(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(j,["endDateProps","id","labelsInline","name","onBlur","onChange","startDateProps","tooltipPosition","validationOnLabel","value","startRef","endRef","required","isOptional","dateFormatOverride","datePickerStartAriaLabel","datePickerStartAriaLabelledBy","datePickerEndAriaLabel","datePickerEndAriaLabelledBy"]);!h&&$&&(h=!0,P.deprecate("`isOptional` is deprecated in DateRange and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:G}=r(_),H=!G&&V,J=y(),{dateFnsLocale:Q,dateFormatOverride:U}=J.date,{format:X}=a((()=>O(Q(),C||U)),[Q,C,U]),[Y,Z]=n(""),ee=l((e=>i(e)?s(X,d(e)):e),[X]),te=l((()=>{const{value:e}=S;return ee(e||R[0])}),[S,R,ee]),re=l((()=>{const{value:e}=B;return ee(e||R[1])}),[B,R,ee]),[ae,ne]=n({start:{isBlurBlocked:{current:!1},setOpen:null},end:{isBlurBlocked:{current:!1},setOpen:null}});function le(e,t){return e&&!t.length}const[oe,ie]=n({formattedValue:te(),rawValue:le(!!S.allowEmptyValue,te())?"":u(X,te())}),[se,de]=n({formattedValue:re(),rawValue:le(!!B.allowEmptyValue,re())?"":u(X,re())}),ue=v(R);o((()=>{(null==ue?void 0:ue.length)&&(R[0]!==ue[0]||R[1]!==ue[1])&&(ie({formattedValue:te(),rawValue:le(!!S.allowEmptyValue,te())?"":u(X,te())}),de({formattedValue:re(),rawValue:le(!!B.allowEmptyValue,re())?"":u(X,re())}))}),[R,ue,B.allowEmptyValue,X,re,te,S.allowEmptyValue]);const ce=l(((e,t)=>{const r="start"===e?t:oe,a="end"===e?t:se;return Z(e),{target:k(w({},E&&{name:E},L&&{id:L}),{value:[r,a]})}}),[se,L,E,oe]),pe=(e,t)=>{"start"===e?ie(w({},t.target.value)):de(w({},t.target.value));const r=ce(e,t.target.value);D(r)},me=e=>{pe("start",e)},fe=e=>{pe("end",e)},be=e=>{var t,r;if(!(null==ae||null===(t=ae.start)||void 0===t?void 0:t.isBlurBlocked.current)&&!(null==ae||null===(r=ae.end)||void 0===r?void 0:r.isBlurBlocked.current)&&A){const t=ce(Y,e.target.value);A(t)}},ye=e=>{(e=>{const t=null==ae?void 0:ae[e];var r;t&&(null===(r=t.setOpen)||void 0===r||r.call(t,!1),t.isBlurBlocked.current=!1)})(e),Z("start"===e?"end":"start")},ve=e=>{const t="start"===e?S:B,{formattedValue:r}="start"===e?oe:se,a="start"===e?me:fe;return k(w({label:z[`${e}Label`],labelInline:H,value:r,error:z[`${e}Error`],warning:z[`${e}Warning`],info:z[`${e}Info`],validationOnLabel:I,onBlur:be,onChange:a,onKeyDown:t=>((e,t)=>{b.isTabKey(e)&&b.isShiftKey(e)&&(null==ae?void 0:ae.start)?ae.start.isBlurBlocked.current=!("start"===t):b.isTabKey(e)&&(null==ae?void 0:ae.end)&&(ae.end.isBlurBlocked.current=!("end"===t))})(t,e)},t),{required:K,isOptional:$})};return e(f,k(w(k(w({},m("date-range",z)),{labelsInline:H}),p(z)),{children:t(g.Provider,{value:{inputRefMap:ae,setInputRefMap:e=>{ne((t=>w({},t,e)))}},children:[e(c,k(w({my:0},ve("start")),{onFocus:()=>ye("end"),"data-element":"start-date",inputName:"start",labelWidth:40,tooltipPosition:x,ref:F,datePickerAriaLabel:N,datePickerAriaLabelledBy:W})),e(c,k(w({my:0},ve("end")),{onFocus:()=>ye("start"),"data-element":"end-date",inputName:"end",labelWidth:40,tooltipPosition:x,ref:q,datePickerAriaLabel:M,datePickerAriaLabelledBy:T}))]})}))};B.displayName="DateRange";export{B as DateRange,B as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useContext as r,useMemo as a,useState as n,useCallback as o,useEffect as l}from"react";import{checkISOFormatAndLength as i,formattedValue as s,parseISODate as d,formatToISO as u}from"../date/__internal__/utils.js";import{DateInput as c}from"../date/date.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import p from"../../style/utils/filter-styled-system-margin-props.js";import m from"../../__internal__/utils/helpers/tags/tags.js";import f from"./date-range.style.js";import b from"../../__internal__/utils/helpers/events/events.js";import y from"../../hooks/__internal__/useLocale/useLocale.js";import v from"../../hooks/__internal__/usePrevious/index.js";import O from"../date/__internal__/date-formats/index.js";import g from"./__internal__/date-range.context.js";import P from"../carbon-provider/__internal__/new-validation.context.js";import _ from"../../__internal__/utils/logger/index.js";function j(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function w(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},a=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(a=a.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),a.forEach((function(t){j(e,t,r[t])}))}return e}function k(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let h=!1;const B=j=>{var{endDateProps:B={},id:L,labelsInline:V,name:E,onBlur:A,onChange:D,startDateProps:S={},tooltipPosition:x,validationOnLabel:I,value:R,startRef:F,endRef:M,required:T,isOptional:q,dateFormatOverride:K,datePickerStartAriaLabel:$,datePickerStartAriaLabelledBy:C,datePickerEndAriaLabel:N,datePickerEndAriaLabelledBy:W,validationMessagePositionTop:z=!0}=j,G=function(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},o=Object.keys(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(a=0;a<o.length;a++)r=o[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(j,["endDateProps","id","labelsInline","name","onBlur","onChange","startDateProps","tooltipPosition","validationOnLabel","value","startRef","endRef","required","isOptional","dateFormatOverride","datePickerStartAriaLabel","datePickerStartAriaLabelledBy","datePickerEndAriaLabel","datePickerEndAriaLabelledBy","validationMessagePositionTop"]);!h&&q&&(h=!0,_.deprecate("`isOptional` is deprecated in DateRange and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:H}=r(P),J=!H&&V,Q=y(),{dateFnsLocale:U,dateFormatOverride:X}=Q.date,{format:Y}=a((()=>O(U(),K||X)),[U,K,X]),[Z,ee]=n(""),te=o((e=>i(e)?s(Y,d(e)):e),[Y]),re=o((()=>{const{value:e}=S;return te(e||R[0])}),[S,R,te]),ae=o((()=>{const{value:e}=B;return te(e||R[1])}),[B,R,te]),[ne,oe]=n({start:{isBlurBlocked:{current:!1},setOpen:null},end:{isBlurBlocked:{current:!1},setOpen:null}});function le(e,t){return e&&!t.length}const[ie,se]=n({formattedValue:re(),rawValue:le(!!S.allowEmptyValue,re())?"":u(Y,re())}),[de,ue]=n({formattedValue:ae(),rawValue:le(!!B.allowEmptyValue,ae())?"":u(Y,ae())}),ce=v(R);l((()=>{(null==ce?void 0:ce.length)&&(R[0]!==ce[0]||R[1]!==ce[1])&&(se({formattedValue:re(),rawValue:le(!!S.allowEmptyValue,re())?"":u(Y,re())}),ue({formattedValue:ae(),rawValue:le(!!B.allowEmptyValue,ae())?"":u(Y,ae())}))}),[R,ce,B.allowEmptyValue,Y,ae,re,S.allowEmptyValue]);const pe=o(((e,t)=>{const r="start"===e?t:ie,a="end"===e?t:de;return ee(e),{target:k(w({},E&&{name:E},L&&{id:L}),{value:[r,a]})}}),[de,L,E,ie]),me=(e,t)=>{"start"===e?se(w({},t.target.value)):ue(w({},t.target.value));const r=pe(e,t.target.value);D(r)},fe=e=>{me("start",e)},be=e=>{me("end",e)},ye=e=>{var t,r;if(!(null==ne||null===(t=ne.start)||void 0===t?void 0:t.isBlurBlocked.current)&&!(null==ne||null===(r=ne.end)||void 0===r?void 0:r.isBlurBlocked.current)&&A){const t=pe(Z,e.target.value);A(t)}},ve=e=>{(e=>{const t=null==ne?void 0:ne[e];var r;t&&(null===(r=t.setOpen)||void 0===r||r.call(t,!1),t.isBlurBlocked.current=!1)})(e),ee("start"===e?"end":"start")},Oe=e=>{const t="start"===e?S:B,{formattedValue:r}="start"===e?ie:de,a="start"===e?fe:be;return k(w({label:G[`${e}Label`],labelInline:J,value:r,error:G[`${e}Error`],warning:G[`${e}Warning`],info:G[`${e}Info`],validationOnLabel:I,onBlur:ye,onChange:a,onKeyDown:t=>((e,t)=>{b.isTabKey(e)&&b.isShiftKey(e)&&(null==ne?void 0:ne.start)?ne.start.isBlurBlocked.current=!("start"===t):b.isTabKey(e)&&(null==ne?void 0:ne.end)&&(ne.end.isBlurBlocked.current=!("end"===t))})(t,e)},t),{required:T,isOptional:q})};return e(f,k(w(k(w({},m("date-range",G)),{labelsInline:J}),p(G)),{validationMessagePositionTop:z,children:t(g.Provider,{value:{inputRefMap:ne,setInputRefMap:e=>{oe((t=>w({},t,e)))},validationMessagePositionTop:z},children:[e(c,k(w({my:0},Oe("start")),{onFocus:()=>ve("end"),"data-element":"start-date",inputName:"start",labelWidth:40,tooltipPosition:x,ref:F,datePickerAriaLabel:$,datePickerAriaLabelledBy:C})),e(c,k(w({my:0},Oe("end")),{onFocus:()=>ve("start"),"data-element":"end-date",inputName:"end",labelWidth:40,tooltipPosition:x,ref:M,datePickerAriaLabel:N,datePickerAriaLabelledBy:W}))]})}))};B.displayName="DateRange";export{B as DateRange,B as default};

package/esm/components/date-range/date-range.style.d.ts

@@ -1,6 +1,8 @@
 export interface StyledDateRangeProps {
     /** [Legacy] Display labels inline */
     labelsInline?: boolean;
+    /** Render the ValidationMessage above the inputs when validationRedesignOptIn flag is set */
+    validationMessagePositionTop?: boolean;
 }
 declare const StyledDateRange: import("styled-components").StyledComponent<"div", any, {
     theme: object;

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

@@ -1 +1 @@
-import t from"styled-components";import{margin as e}from"styled-system";import a from"../date/date.style.js";import{StyledLabelContainer as i}from"../../__internal__/label/label.style.js";import{StyledInputPresentationContainer as o}from"../../__internal__/input/input-presentation.style.js";import l from"../../style/themes/apply-base-theme.js";const s=t.div.attrs(l).withConfig({displayName:"date-range.style__StyledDateRange",componentId:"sc-91dca507-0"})(["margin-bottom:var(--fieldSpacing);"," & ","{width:auto;display:inline-block;vertical-align:",";}& ",":first-of-type{margin-right:var(--spacing300);}","{width:auto;}","{flex:auto;}"],e,a,(({labelsInline:t})=>t?"top":"bottom"),a,i,o);export{s as default};
+import t from"styled-components";import{margin as e}from"styled-system";import a from"../date/date.style.js";import{StyledLabelContainer as i}from"../../__internal__/label/label.style.js";import{StyledInputPresentationContainer as o}from"../../__internal__/input/input-presentation.style.js";import l from"../../style/themes/apply-base-theme.js";const n=t.div.attrs(l).withConfig({displayName:"date-range.style__StyledDateRange",componentId:"sc-39b770fa-0"})([""," margin-bottom:var(--fieldSpacing);"," & ","{width:auto;display:inline-block;vertical-align:",";}& ",":first-of-type{margin-right:var(--spacing300);}","{width:auto;}","{flex:auto;}"],(({validationMessagePositionTop:t})=>`\n    display: flex;\n    align-items: ${t?"flex-end":"flex-start"};\n  `),e,a,(({labelsInline:t})=>t?"top":"bottom"),a,i,o);export{n as default};

package/esm/components/file-input/file-input.component.d.ts

@@ -38,6 +38,8 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
      * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
      */
     isOptional?: boolean;
+    /** Render the ValidationMessage above the FileInput */
+    validationMessagePositionTop?: boolean;
 }
 export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
 export default FileInput;

package/esm/components/file-input/file-input.component.js

@@ -1 +1 @@
-import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import n,{useState as i,useRef as o,useEffect as a,createElement as l}from"react";import"../../style/utils/filter-styled-system-padding-props.js";import s from"../../style/utils/filter-styled-system-margin-props.js";import{InputBehaviour as p}from"../../__internal__/input-behaviour/input-behaviour.component.js";import d from"../../__internal__/form-field/form-field.component.js";import u from"../../hooks/__internal__/useUniqueId/index.js";import m from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import c from"../../__internal__/validation-message/validation-message.component.js";import{StyledHiddenFileInput as f,StyledFileInputPresentation as g}from"./file-input.style.js";import v from"../textbox/textbox.style.js";import{ButtonMinor as b}from"../button-minor/button-minor.component.js";import{Typography as y}from"../typography/typography.component.js";import{FileUploadStatus as h}from"./__internal__/file-upload-status/file-upload-status.component.js";import{Box as O}from"../box/box.component.js";import _ from"../../hooks/__internal__/useLocale/useLocale.js";import{HintText as j}from"../../__internal__/hint-text/hint-text.component.js";import x from"../../__internal__/utils/logger/index.js";function D(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function I(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){D(e,t,r[t])}))}return e}function w(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let P=!1;const k=n.forwardRef(((n,D)=>{var{accept:k,buttonText:E,"data-element":L,"data-role":S,dragAndDropText:H,error:T,label:q,id:A,inputHint:F,isVertical:W,maxHeight:C,maxWidth:R,minHeight:V,minWidth:U="280px",name:N,onChange:z,required:B,isOptional:G,uploadStatus:J=[]}=n,K=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(n,["accept","buttonText","data-element","data-role","dragAndDropText","error","label","id","inputHint","isVertical","maxHeight","maxWidth","minHeight","minWidth","name","onChange","required","isOptional","uploadStatus"]);!P&&G&&(P=!0,x.deprecate("`isOptional` is deprecated in FileInput and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const M=_(),Q=E||M.fileInput.selectFile(),X=H||M.fileInput.dragAndDrop(),Y={maxHeight:C||void 0,maxWidth:R||U,minHeight:V,minWidth:U},[Z,$]=u(A,N),[ee,te]=i(!1),[re,ne]=i(!1),ie=o(null),oe=e=>{var t;e.preventDefault(),(null===(t=e.dataTransfer)||void 0===t?void 0:t.types.includes("Files"))&&ne(!0)},ae=e=>{e.preventDefault(),ne(!1)};a((()=>(document.addEventListener("dragover",oe),document.addEventListener("drop",ae),document.addEventListener("dragleave",ae),()=>{document.removeEventListener("dragover",oe),document.removeEventListener("drop",ae),document.removeEventListener("dragleave",ae)})),[]);const le=e=>{null==z||z(e)},{labelId:se,validationId:pe}=m({id:Z,validationRedesignOptIn:!0,error:T,label:q}),de=Array.isArray(J)?J:[J],ue=e(t,{children:[F&&r(j,{children:F}),e(O,{position:"relative",children:[r(c,{error:T,validationId:pe}),T&&r(v,{warning:!1}),r(f,I(w(I({},B&&{required:B}),{accept:k,"aria-invalid":!!T,id:Z,ref:e=>{ie.current=e,"function"==typeof D?D(e):D&&(D.current=e)},name:$,onChange:e=>{le(e.target.files)},type:"file"}),K)),e(g,w(I({"data-role":"file-input-presentation",isDraggedOver:ee,isDraggingFile:re,error:T,onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),te(!1)},onDragOver:e=>{var t;e.preventDefault(),(null===(t=e.dataTransfer)||void 0===t?void 0:t.types.includes("Files"))&&te(!0)},onDrop:e=>{e.preventDefault(),te(!1),le(e.dataTransfer.files)},isVertical:W},Y),{children:[r(b,{buttonType:"primary",onClick:()=>{var e;null===(e=ie.current)||void 0===e||e.click()},children:Q}),r(y,{m:0,children:X})]}))]})]});return r(p,{children:r(d,w(I({error:T,label:q,labelId:se,id:Z,isRequired:B,isOptional:G,"data-component":"file-input","data-role":S,"data-element":L,validationRedesignOptIn:!0},s(K)),{children:0===de.length?ue:de.map((e=>l(g,w(I({hasUploadStatus:!0},Y),{key:e.filename}),r(h,I({},e)))))}))})}));k.displayName="FileInput";export{k as FileInput,k as default};
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import n,{useState as i,useRef as o,useEffect as a,createElement as l}from"react";import"../../style/utils/filter-styled-system-padding-props.js";import s from"../../style/utils/filter-styled-system-margin-props.js";import{InputBehaviour as p}from"../../__internal__/input-behaviour/input-behaviour.component.js";import d from"../../__internal__/form-field/form-field.component.js";import u from"../../hooks/__internal__/useUniqueId/index.js";import m from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import c from"../../__internal__/validation-message/validation-message.component.js";import{StyledHiddenFileInput as f,StyledFileInputPresentation as g}from"./file-input.style.js";import v from"../textbox/textbox.style.js";import{ButtonMinor as b}from"../button-minor/button-minor.component.js";import{Typography as y}from"../typography/typography.component.js";import{FileUploadStatus as h}from"./__internal__/file-upload-status/file-upload-status.component.js";import{Box as O}from"../box/box.component.js";import _ from"../../hooks/__internal__/useLocale/useLocale.js";import{HintText as j}from"../../__internal__/hint-text/hint-text.component.js";import x from"../../__internal__/utils/logger/index.js";function P(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function D(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){P(e,t,r[t])}))}return e}function I(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}let w=!1;const T=n.forwardRef(((n,P)=>{var{accept:T,buttonText:k,"data-element":E,"data-role":L,dragAndDropText:S,error:H,label:q,id:A,inputHint:F,isVertical:W,maxHeight:C,maxWidth:M,minHeight:R,minWidth:V="280px",name:U,onChange:N,required:z,isOptional:B,uploadStatus:G=[],validationMessagePositionTop:J=!0}=n,K=function(e,t){if(null==e)return{};var r,n,i=function(e,t){if(null==e)return{};var r,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(i[r]=e[r]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(i[r]=e[r])}return i}(n,["accept","buttonText","data-element","data-role","dragAndDropText","error","label","id","inputHint","isVertical","maxHeight","maxWidth","minHeight","minWidth","name","onChange","required","isOptional","uploadStatus","validationMessagePositionTop"]);!w&&B&&(w=!0,x.deprecate("`isOptional` is deprecated in FileInput and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const Q=_(),X=k||Q.fileInput.selectFile(),Y=S||Q.fileInput.dragAndDrop(),Z={maxHeight:C||void 0,maxWidth:M||V,minHeight:R,minWidth:V},[$,ee]=u(A,U),[te,re]=i(!1),[ne,ie]=i(!1),oe=o(null),ae=e=>{var t;e.preventDefault(),(null===(t=e.dataTransfer)||void 0===t?void 0:t.types.includes("Files"))&&ie(!0)},le=e=>{e.preventDefault(),ie(!1)};a((()=>(document.addEventListener("dragover",ae),document.addEventListener("drop",le),document.addEventListener("dragleave",le),()=>{document.removeEventListener("dragover",ae),document.removeEventListener("drop",le),document.removeEventListener("dragleave",le)})),[]);const se=e=>{null==N||N(e)},{labelId:pe,validationId:de}=m({id:$,validationRedesignOptIn:!0,error:H,label:q}),ue=Array.isArray(G)?G:[G],me=e(t,{children:[F&&r(j,{children:F}),e(O,{position:"relative",children:[J&&e(t,{children:[r(c,{error:H,validationId:de,validationMessagePositionTop:J,"data-role":"validation-message-top"}),H&&r(v,{warning:!1})]}),r(f,D(I(D({},z&&{required:z}),{accept:T,"aria-invalid":!!H,id:$,ref:e=>{oe.current=e,"function"==typeof P?P(e):P&&(P.current=e)},name:ee,onChange:e=>{se(e.target.files)},type:"file"}),K)),e(g,I(D({"data-role":"file-input-presentation",isDraggedOver:te,isDraggingFile:ne,error:H,onDragLeave:e=>{e.preventDefault(),e.stopPropagation(),re(!1)},onDragOver:e=>{var t;e.preventDefault(),(null===(t=e.dataTransfer)||void 0===t?void 0:t.types.includes("Files"))&&re(!0)},onDrop:e=>{e.preventDefault(),re(!1),se(e.dataTransfer.files)},isVertical:W},Z),{children:[r(b,{buttonType:"primary",onClick:()=>{var e;null===(e=oe.current)||void 0===e||e.click()},children:X}),r(y,{m:0,children:Y})]})),!J&&e(t,{children:[r(c,{error:H,validationId:de,validationMessagePositionTop:J,"data-role":"validation-message-bottom"}),H&&r(v,{warning:!1})]})]})]});return r(p,{children:r(d,I(D({error:H,label:q,labelId:pe,id:$,isRequired:z,isOptional:B,"data-component":"file-input","data-role":L,"data-element":E,validationRedesignOptIn:!0},s(K)),{children:0===ue.length?me:ue.map((e=>l(g,I(D({hasUploadStatus:!0},Z),{key:e.filename}),r(h,D({},e)))))}))})}));T.displayName="FileInput";export{T as FileInput,T as default};

package/esm/components/numeral-date/numeral-date.component.d.ts

@@ -85,6 +85,8 @@ export interface NumeralDateProps extends ValidationProps, MarginProps, TagProps
      * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
      */
     isOptional?: boolean;
+    /** Render the ValidationMessage above the NumeralDate inputs when validationRedesignOptIn flag is set */
+    validationMessagePositionTop?: boolean;
 }
 export type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];
 export type NumeralDateHandle = {

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

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as r,useContext as i,useRef as l,useImperativeHandle as o,useState as a,useMemo as d,useEffect as s}from"react";import m from"invariant";import c from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import y from"../../style/utils/filter-styled-system-margin-props.js";import p from"../../__internal__/utils/helpers/events/events.js";import{StyledFieldset as u,StyledNumeralDate as f,StyledDateField as b}from"./numeral-date.style.js";import{Textbox as g}from"../textbox/textbox.component.js";import{Box as h}from"../box/box.component.js";import v from"../textbox/textbox.style.js";import _ from"../../__internal__/validation-message/validation-message.component.js";import O from"../../__internal__/utils/helpers/guid/index.js";import j from"../../hooks/__internal__/useLocale/useLocale.js";import{TooltipProvider as w}from"../../__internal__/tooltip-provider/index.js";import D from"../carbon-provider/__internal__/new-validation.context.js";import I from"./__internal__/numeral-date.context.js";import x from"../../__internal__/utils/logger/index.js";import{FieldHelp as k}from"../../__internal__/field-help/field-help.component.js";import P from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import A from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import{HintText as S}from"../../__internal__/hint-text/hint-text.component.js";function B(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function L(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){B(e,t,n[t])}))}return e}function E(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}let R=!1;const F=[["dd","mm","yyyy"],["mm","dd","yyyy"],["yyyy","mm","dd"],["dd","mm"],["mm","dd"],["mm","yyyy"]],H=e=>{const t=(new Date).getFullYear(),{format:n}=new Intl.DateTimeFormat(e,{month:"long"});return[...Array(12).keys()].map((e=>n(new Date(Date.UTC(t,e)))))},q=(e,t,n)=>({dd:e.numeralDate.validation.day(t?H(e.locale())[+t-1]:void 0,n),mm:e.numeralDate.validation.month(),yyyy:e.numeralDate.validation.year()}),N=(e,t)=>{switch(e){case"mm":return t.numeralDate.labels.month();case"yyyy":return t.numeralDate.labels.year();default:return t.numeralDate.labels.day()}};let z=!1;const W=r(((r,B)=>{var{dateFormat:H=["dd","mm","yyyy"],defaultValue:W,disabled:C,error:K="",warning:T="",info:V,id:Y,name:J,onBlur:M,onChange:U,value:$,validationOnLabel:G=!1,label:Q,labelInline:X,labelWidth:Z,labelAlign:ee,fieldLabelsAlign:te,labelHelp:ne,labelSpacing:re,fieldHelp:ie,adaptiveLabelBreakpoint:le,required:oe,isOptional:ae,readOnly:de,size:se="medium",enableInternalError:me,enableInternalWarning:ce,tooltipPosition:ye,helpAriaLabel:pe,dayRef:ue,monthRef:fe,yearRef:be}=r,ge=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(r,["dateFormat","defaultValue","disabled","error","warning","info","id","name","onBlur","onChange","value","validationOnLabel","label","labelInline","labelWidth","labelAlign","fieldLabelsAlign","labelHelp","labelSpacing","fieldHelp","adaptiveLabelBreakpoint","required","isOptional","readOnly","size","enableInternalError","enableInternalWarning","tooltipPosition","helpAriaLabel","dayRef","monthRef","yearRef"]);!z&&ae&&(z=!0,x.deprecate("`isOptional` is deprecated in NumeralDate and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const he=j(),{validationRedesignOptIn:ve}=i(D),{current:_e}=l(Y||O()),Oe=l({dd:O(),mm:O(),yyyy:O()}),je=l(O()),we=l(void 0!==$),De=we.current?$:W,Ie=l(H.map((()=>null)));o(B,(()=>({focus:()=>{var e;null===(e=Ie.current[0])||void 0===e||e.focus()}})));const[xe,ke]=a(L({},Object.fromEntries(H.map((e=>[e,""]))))),Pe=d((()=>!H||F.find((e=>JSON.stringify(e)===JSON.stringify(H)))),[H]);m(Pe,"Forbidden prop dateFormat supplied to NumeralDate. Only one of these date formats is allowed: ['dd', 'mm', 'yyyy'], ['mm', 'dd', 'yyyy'], ['yyyy', 'mm', 'dd'], ['dd', 'mm'], ['mm', 'dd'], ['mm', 'yyyy']"),s((()=>{m(we.current===(void 0!==$),"Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component")}),[$]);const[Ae,Se]=a(L({},De||Object.fromEntries(H.map((e=>[e,""]))))),Be=e=>({target:{name:J,id:_e,value:e}}),Le=e=>{p.isNumberKey(e)||p.isTabKey(e)||p.isEnterKey(e)||"Delete"===e.key||"Backspace"===e.key||e.preventDefault()},Ee=()=>{(me||ce)&&ke((e=>L({},e,((e,{dd:t,mm:n,yyyy:r})=>{const i={dd:"",mm:"",yyyy:""},l=((e,t)=>{if(!e||+e>12||+e<1)return 31;const n=new Date,r=+(t||n.getFullYear());return new Date(r,+e,0).getDate()})(n,r);return t&&(+t>l||+t<1)&&(i.dd=q(e,n,String(l)).dd),n&&(+n>12||+n<1)&&(i.mm=q(e).mm),r&&(+r<1800||+r>2200)&&(i.yyyy=q(e).yyyy),i})(he,Ae)))),setTimeout((()=>{const e=!Ie.current.find((e=>e===document.activeElement));M&&e&&M(Be(Ae))}),5)},Re=Object.keys(xe).reduce(((e,t)=>xe[t]?`${e+xe[t]}\n`:e),""),Fe=me?Re+K:K,He=ce?Re+T:T;R||we.current||(R=!0,x.deprecate("Uncontrolled behaviour in `Numeral Date` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const qe=P(le);let Ne=X;le&&(Ne=qe);const{validationId:ze,fieldHelpId:We,ariaDescribedBy:Ce}=A({id:_e,validationRedesignOptIn:!0,error:Fe,warning:He,info:V,fieldHelp:ie}),Ke=[Ce,je.current].filter(Boolean).join(" "),Te=()=>e(f,{onKeyDown:Le,children:H.map(((t,n)=>{const r=n===H.length-1;let i;const l=Fe||He||V,o=!ve&&"string"==typeof l&&""!==l;switch(t.slice(0,2)){case"dd":i=ue;break;case"mm":i=fe;break;case"yy":i=be}return e(I.Provider,{value:{disableErrorBorder:!0},children:e(b,{size:se,isYearInput:4===t.length,hasValidationIconInField:!G&&r&&o,children:e(g,E(L({id:Oe.current[t],label:N(t,he),labelAlign:te,disabled:C,readOnly:de,error:!!Fe,warning:!!He,info:!!V,size:se,value:Ae[t],onChange:e=>((e,t)=>{const{value:n}=e.target;if(n.length<=t.length){const e=E(L({},Ae),{[t]:n});Se(e),U&&U(Be(e))}})(e,t),onBlur:Ee,ref:e=>((e,t,n)=>{Ie.current[t]=e,n&&("function"==typeof n?n(e):n.current=e)})(e,n,i)},r&&!G&&!ve&&{error:Fe,warning:He,info:V}),{tooltipPosition:ye,tooltipId:ze,my:0}))},t)},t)}))});return ve?t(u,E(L({id:_e,legend:Q,legendMargin:{mb:0},legendAlign:ee,isRequired:oe,isOptional:ae,isDisabled:C,name:J,"aria-describedby":Ke},y(ge),c("numeral-date",ge)),{children:[ne&&e(S,{align:ee,id:je.current,children:ne}),t(h,{position:"relative",mt:ne?0:1,children:[(Fe||He)&&t(n,{children:[e(_,{error:Fe,warning:He,validationId:ze}),e(v,{warning:!(Fe||!He)})]}),Te()]})]})):e(w,{helpAriaLabel:pe,children:e(u,E(L({id:_e,legend:Q,legendMargin:{mb:0},isRequired:oe,isOptional:ae,isDisabled:C,name:J,error:G&&Fe,warning:G&&He,info:G&&V,inline:Ne,size:se,labelHelp:ne,legendAlign:ee,legendWidth:Z,legendSpacing:re,validationId:ze,"aria-describedby":G?Ce:We},y(ge),c("numeral-date",ge)),{children:t(h,{display:"flex",flexDirection:"column",mt:Ne?0:1,children:[Te(),ie&&e(k,{id:We,children:ie})]})}))})}));export{F as ALLOWED_DATE_FORMATS,W as NumeralDate,W as default};
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{forwardRef as r,useContext as i,useRef as o,useImperativeHandle as l,useState as a,useMemo as d,useEffect as s}from"react";import m from"invariant";import c from"../../__internal__/utils/helpers/tags/tags.js";import"../../style/utils/filter-styled-system-padding-props.js";import p from"../../style/utils/filter-styled-system-margin-props.js";import y from"../../__internal__/utils/helpers/events/events.js";import{StyledFieldset as u,StyledNumeralDate as f,StyledDateField as b}from"./numeral-date.style.js";import{Textbox as g}from"../textbox/textbox.component.js";import{Box as h}from"../box/box.component.js";import v from"../textbox/textbox.style.js";import _ from"../../__internal__/validation-message/validation-message.component.js";import O from"../../__internal__/utils/helpers/guid/index.js";import j from"../../hooks/__internal__/useLocale/useLocale.js";import{TooltipProvider as w}from"../../__internal__/tooltip-provider/index.js";import D from"../carbon-provider/__internal__/new-validation.context.js";import I from"./__internal__/numeral-date.context.js";import x from"../../__internal__/utils/logger/index.js";import{FieldHelp as P}from"../../__internal__/field-help/field-help.component.js";import k from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import A from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import{HintText as S}from"../../__internal__/hint-text/hint-text.component.js";function B(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function L(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),r.forEach((function(t){B(e,t,n[t])}))}return e}function E(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t.push.apply(t,n)}return t}(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))})),e}let R=!1;const F=[["dd","mm","yyyy"],["mm","dd","yyyy"],["yyyy","mm","dd"],["dd","mm"],["mm","dd"],["mm","yyyy"]],T=e=>{const t=(new Date).getFullYear(),{format:n}=new Intl.DateTimeFormat(e,{month:"long"});return[...Array(12).keys()].map((e=>n(new Date(Date.UTC(t,e)))))},H=(e,t,n)=>({dd:e.numeralDate.validation.day(t?T(e.locale())[+t-1]:void 0,n),mm:e.numeralDate.validation.month(),yyyy:e.numeralDate.validation.year()}),q=(e,t)=>{switch(e){case"mm":return t.numeralDate.labels.month();case"yyyy":return t.numeralDate.labels.year();default:return t.numeralDate.labels.day()}};let M=!1;const N=r(((r,B)=>{var{dateFormat:T=["dd","mm","yyyy"],defaultValue:N,disabled:z,error:W="",warning:C="",info:K,id:V,name:Y,onBlur:J,onChange:U,value:$,validationOnLabel:G=!1,label:Q,labelInline:X,labelWidth:Z,labelAlign:ee,fieldLabelsAlign:te,labelHelp:ne,labelSpacing:re,fieldHelp:ie,adaptiveLabelBreakpoint:oe,required:le,isOptional:ae,readOnly:de,size:se="medium",enableInternalError:me,enableInternalWarning:ce,tooltipPosition:pe,helpAriaLabel:ye,dayRef:ue,monthRef:fe,yearRef:be,validationMessagePositionTop:ge=!0}=r,he=function(e,t){if(null==e)return{};var n,r,i=function(e,t){if(null==e)return{};var n,r,i={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(i[n]=e[n]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(r,["dateFormat","defaultValue","disabled","error","warning","info","id","name","onBlur","onChange","value","validationOnLabel","label","labelInline","labelWidth","labelAlign","fieldLabelsAlign","labelHelp","labelSpacing","fieldHelp","adaptiveLabelBreakpoint","required","isOptional","readOnly","size","enableInternalError","enableInternalWarning","tooltipPosition","helpAriaLabel","dayRef","monthRef","yearRef","validationMessagePositionTop"]);!M&&ae&&(M=!0,x.deprecate("`isOptional` is deprecated in NumeralDate and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const ve=j(),{validationRedesignOptIn:_e}=i(D),{current:Oe}=o(V||O()),je=o({dd:O(),mm:O(),yyyy:O()}),we=o(O()),De=o(void 0!==$),Ie=De.current?$:N,xe=o(T.map((()=>null)));l(B,(()=>({focus:()=>{var e;null===(e=xe.current[0])||void 0===e||e.focus()}})));const[Pe,ke]=a(L({},Object.fromEntries(T.map((e=>[e,""]))))),Ae=d((()=>!T||F.find((e=>JSON.stringify(e)===JSON.stringify(T)))),[T]);m(Ae,"Forbidden prop dateFormat supplied to NumeralDate. Only one of these date formats is allowed: ['dd', 'mm', 'yyyy'], ['mm', 'dd', 'yyyy'], ['yyyy', 'mm', 'dd'], ['dd', 'mm'], ['mm', 'dd'], ['mm', 'yyyy']"),s((()=>{m(De.current===(void 0!==$),"Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component")}),[$]);const[Se,Be]=a(L({},Ie||Object.fromEntries(T.map((e=>[e,""]))))),Le=e=>({target:{name:Y,id:Oe,value:e}}),Ee=e=>{y.isNumberKey(e)||y.isTabKey(e)||y.isEnterKey(e)||"Delete"===e.key||"Backspace"===e.key||e.preventDefault()},Re=()=>{(me||ce)&&ke((e=>L({},e,((e,{dd:t,mm:n,yyyy:r})=>{const i={dd:"",mm:"",yyyy:""},o=((e,t)=>{if(!e||+e>12||+e<1)return 31;const n=new Date,r=+(t||n.getFullYear());return new Date(r,+e,0).getDate()})(n,r);return t&&(+t>o||+t<1)&&(i.dd=H(e,n,String(o)).dd),n&&(+n>12||+n<1)&&(i.mm=H(e).mm),r&&(+r<1800||+r>2200)&&(i.yyyy=H(e).yyyy),i})(ve,Se)))),setTimeout((()=>{const e=!xe.current.find((e=>e===document.activeElement));J&&e&&J(Le(Se))}),5)},Fe=Object.keys(Pe).reduce(((e,t)=>Pe[t]?`${e+Pe[t]}\n`:e),""),Te=me?Fe+W:W,He=ce?Fe+C:C;R||De.current||(R=!0,x.deprecate("Uncontrolled behaviour in `Numeral Date` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const qe=k(oe);let Me=X;oe&&(Me=qe);const{validationId:Ne,fieldHelpId:ze,ariaDescribedBy:We}=A({id:Oe,validationRedesignOptIn:!0,error:Te,warning:He,info:K,fieldHelp:ie}),Ce=(_e&&ge?[We,we.current]:[we.current,We]).filter(Boolean).join(" "),Ke=()=>e(f,{onKeyDown:Ee,children:T.map(((t,n)=>{const r=n===T.length-1;let i;const o=Te||He||K,l=!_e&&"string"==typeof o&&""!==o;switch(t.slice(0,2)){case"dd":i=ue;break;case"mm":i=fe;break;case"yy":i=be}return e(I.Provider,{value:{disableErrorBorder:!0},children:e(b,{size:se,isYearInput:4===t.length,hasValidationIconInField:!G&&r&&l,children:e(g,E(L({id:je.current[t],label:q(t,ve),labelAlign:te,disabled:z,readOnly:de,error:!!Te,warning:!!He,info:!!K,size:se,value:Se[t],onChange:e=>((e,t)=>{const{value:n}=e.target;if(n.length<=t.length){const e=E(L({},Se),{[t]:n});Be(e),U&&U(Le(e))}})(e,t),onBlur:Re,ref:e=>((e,t,n)=>{xe.current[t]=e,n&&("function"==typeof n?n(e):n.current=e)})(e,n,i)},r&&!G&&!_e&&{error:Te,warning:He,info:K}),{tooltipPosition:pe,tooltipId:Ne,my:0}))},t)},t)}))});return _e?t(u,E(L({id:Oe,legend:Q,legendMargin:{mb:0},legendAlign:ee,isRequired:le,isOptional:ae,isDisabled:z,name:Y,"aria-describedby":Ce},p(he),c("numeral-date",he)),{children:[ne&&e(S,{align:ee,id:we.current,children:ne}),t(h,{position:"relative",mt:ne?0:1,children:[ge&&(Te||He)&&t(n,{children:[e(_,{error:Te,warning:He,validationId:Ne,validationMessagePositionTop:ge}),e(v,{warning:!(Te||!He)})]}),Ke(),!ge&&(Te||He)&&t(n,{children:[e(_,{error:Te,warning:He,validationId:Ne,validationMessagePositionTop:ge}),e(v,{warning:!(Te||!He)})]})]})]})):e(w,{helpAriaLabel:ye,children:e(u,E(L({id:Oe,legend:Q,legendMargin:{mb:0},isRequired:le,isOptional:ae,isDisabled:z,name:Y,error:G&&Te,warning:G&&He,info:G&&K,inline:Me,size:se,labelHelp:ne,legendAlign:ee,legendWidth:Z,legendSpacing:re,validationId:Ne,"aria-describedby":G?We:ze},p(he),c("numeral-date",he)),{children:t(h,{display:"flex",flexDirection:"column",mt:Me?0:1,children:[Ke(),ie&&e(P,{id:ze,children:ie})]})}))})}));export{F as ALLOWED_DATE_FORMATS,N as NumeralDate,N as default};

package/esm/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -50,9 +50,11 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps, Tag
     value?: string;
     /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Render the ValidationMessage above the RadioButton inputs when validationRedesignOptIn flag is set */
+    validationMessagePositionTop?: boolean;
 }
 export declare const RadioButtonGroup: {
-    ({ children, id, name, legend, legendHelp, error, warning, info, onBlur, onChange, value, inline, legendInline, legendWidth, legendAlign, legendSpacing, labelSpacing, adaptiveLegendBreakpoint, adaptiveSpacingBreakpoint, required, isOptional, tooltipPosition, ...rest }: RadioButtonGroupProps): React.JSX.Element;
+    ({ children, id, name, legend, legendHelp, error, warning, info, onBlur, onChange, value, inline, legendInline, legendWidth, legendAlign, legendSpacing, labelSpacing, adaptiveLegendBreakpoint, adaptiveSpacingBreakpoint, required, isOptional, tooltipPosition, validationMessagePositionTop, ...rest }: RadioButtonGroupProps): React.JSX.Element;
     displayName: string;
 };
 export default RadioButtonGroup;

package/esm/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -1 +1 @@
-import{jsx as e,Fragment as n,jsxs as r}from"react/jsx-runtime";import i,{useContext as t,useRef as o}from"react";import l from"../../../__internal__/utils/helpers/tags/tags.js";import a from"../../../__internal__/fieldset/fieldset.component.js";import p from"./radio-button-group.style.js";import d from"../../../__internal__/radio-button-mapper/radio-button-mapper.component.js";import s from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import"../../../style/utils/filter-styled-system-padding-props.js";import c from"../../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as u}from"../../../__internal__/tooltip-provider/index.js";import g from"../../../__internal__/utils/logger/index.js";import m from"../../carbon-provider/__internal__/new-validation.context.js";import f from"../../../__internal__/validation-message/validation-message.component.js";import{Box as b}from"../../box/box.component.js";import _ from"../../../__internal__/utils/helpers/guid/index.js";import h from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import y from"../../textbox/textbox.style.js";import{HintText as v}from"../../../__internal__/hint-text/hint-text.component.js";function O(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function j(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),i.forEach((function(n){O(e,n,r[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})),e}let x=!1,B=!1;const P=O=>{var{children:P,id:I,name:S,legend:k,legendHelp:A,error:E,warning:R,info:q,onBlur:C,onChange:D,value:G,inline:W=!1,legendInline:H=!1,legendWidth:L,legendAlign:V="left",legendSpacing:N,labelSpacing:T=1,adaptiveLegendBreakpoint:U,adaptiveSpacingBreakpoint:$,required:z,isOptional:F,tooltipPosition:J}=O,K=function(e,n){if(null==e)return{};var r,i,t=function(e,n){if(null==e)return{};var r,i,t={},o=Object.keys(e);for(i=0;i<o.length;i++)r=o[i],n.indexOf(r)>=0||(t[r]=e[r]);return t}(e,n);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)r=o[i],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(t[r]=e[r])}return t}(O,["children","id","name","legend","legendHelp","error","warning","info","onBlur","onChange","value","inline","legendInline","legendWidth","legendAlign","legendSpacing","labelSpacing","adaptiveLegendBreakpoint","adaptiveSpacingBreakpoint","required","isOptional","tooltipPosition"]);!B&&F&&(B=!0,g.deprecate("`isOptional` is deprecated in RadioButtonGroup and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:M}=t(m),Q=o(_()),X=I||Q.current,Y=A?`${X}-hint`:void 0;x||D||(x=!0,g.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const Z=c(K),ee=s(U),ne=s($);let re=H;U&&(re=!!ee);let ie=Z.ml;$&&!ne&&(ie=void 0);const{validationId:te,ariaDescribedBy:oe}=h({id:X,validationRedesignOptIn:!0,error:E,warning:R,info:q}),le=[oe,Y].filter(Boolean).join(" ");return e(n,{children:M?r(a,w(j(w(j({legend:k,error:E,warning:R,legendAlign:V,isRequired:z,isOptional:F,width:"fit-content"},l("radiogroup",K),Z),{ml:ie,blockGroupBehaviour:!(E||R)}),le&&{"aria-describedby":le}),{children:[A&&e(v,{align:V,id:Y,marginTop:"-4px",children:A}),r(b,{position:"relative",children:[e(f,{error:E,warning:R,validationId:te}),(E||R)&&e(y,{"data-role":"radio-error-border",inline:W,warning:!(E||!R)}),e(p,{"data-component":"radio-button-group",role:"radiogroup",inline:W,legendInline:re,children:e(d,{name:S,onBlur:C,onChange:D,value:G,children:i.Children.map(P,(e=>i.isValidElement(e)?i.cloneElement(e,j({inline:W,labelSpacing:T,error:!!E,warning:!!R},e.props)):e))})})]})]})):e(u,{tooltipPosition:J,children:e(a,w(j({legend:k,error:E,warning:R,info:q,inline:re,legendWidth:L,legendAlign:V,legendSpacing:N,isRequired:z,isOptional:F},l("radiogroup",K),Z),{ml:ie,blockGroupBehaviour:!(E||R||q),"aria-describedby":oe,validationId:te,children:e(p,{"data-component":"radio-button-group",role:"radiogroup",inline:W,legendInline:re,children:e(d,{name:S,onBlur:C,onChange:D,value:G,children:i.Children.map(P,(e=>i.isValidElement(e)?i.cloneElement(e,j({inline:W,labelSpacing:T,error:!!E,warning:!!R,info:!!q},e.props)):e))})})}))})})};P.displayName="RadioButtonGroup";export{P as RadioButtonGroup,P as default};
+import{jsx as e,Fragment as n,jsxs as r}from"react/jsx-runtime";import i,{useContext as o,useRef as t}from"react";import l from"../../../__internal__/utils/helpers/tags/tags.js";import a from"../../../__internal__/fieldset/fieldset.component.js";import d from"./radio-button-group.style.js";import p from"../../../__internal__/radio-button-mapper/radio-button-mapper.component.js";import s from"../../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import"../../../style/utils/filter-styled-system-padding-props.js";import c from"../../../style/utils/filter-styled-system-margin-props.js";import{TooltipProvider as g}from"../../../__internal__/tooltip-provider/index.js";import u from"../../../__internal__/utils/logger/index.js";import m from"../../carbon-provider/__internal__/new-validation.context.js";import f from"../../../__internal__/validation-message/validation-message.component.js";import{Box as b}from"../../box/box.component.js";import _ from"../../../__internal__/utils/helpers/guid/index.js";import h from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import v from"../../textbox/textbox.style.js";import{HintText as y}from"../../../__internal__/hint-text/hint-text.component.js";function O(e,n,r){return n in e?Object.defineProperty(e,n,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[n]=r,e}function j(e){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{},i=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),i.forEach((function(n){O(e,n,r[n])}))}return e}function w(e,n){return n=null!=n?n:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):function(e){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n.push.apply(n,r)}return n}(Object(n)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(n,r))})),e}let P=!1,x=!1;const B=O=>{var{children:B,id:I,name:S,legend:k,legendHelp:A,error:E,warning:R,info:q,onBlur:C,onChange:D,value:T,inline:G=!1,legendInline:M=!1,legendWidth:W,legendAlign:H="left",legendSpacing:L,labelSpacing:V=1,adaptiveLegendBreakpoint:N,adaptiveSpacingBreakpoint:U,required:$,isOptional:z,tooltipPosition:F,validationMessagePositionTop:J=!0}=O,K=function(e,n){if(null==e)return{};var r,i,o=function(e,n){if(null==e)return{};var r,i,o={},t=Object.keys(e);for(i=0;i<t.length;i++)r=t[i],n.indexOf(r)>=0||(o[r]=e[r]);return o}(e,n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);for(i=0;i<t.length;i++)r=t[i],n.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(O,["children","id","name","legend","legendHelp","error","warning","info","onBlur","onChange","value","inline","legendInline","legendWidth","legendAlign","legendSpacing","labelSpacing","adaptiveLegendBreakpoint","adaptiveSpacingBreakpoint","required","isOptional","tooltipPosition","validationMessagePositionTop"]);!x&&z&&(x=!0,u.deprecate("`isOptional` is deprecated in RadioButtonGroup and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:Q}=o(m),X=t(_()),Y=I||X.current,Z=A?`${Y}-hint`:void 0;P||D||(P=!0,u.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const ee=c(K),ne=s(N),re=s(U);let ie=M;N&&(ie=!!ne);let oe=ee.ml;U&&!re&&(oe=void 0);const{validationId:te,ariaDescribedBy:le}=h({id:Y,validationRedesignOptIn:!0,error:E,warning:R,info:q}),ae=(Q&&J?[le,Z]:[Z,le]).filter(Boolean).join(" ");return e(n,{children:Q?r(a,w(j(w(j({legend:k,error:E,warning:R,legendAlign:H,isRequired:$,isOptional:z,width:"fit-content"},l("radiogroup",K),ee),{ml:oe,blockGroupBehaviour:!(E||R)}),ae&&{"aria-describedby":ae}),{children:[A&&e(y,{align:H,id:Z,marginTop:"-4px",children:A}),r(b,{position:"relative",children:[J&&r(n,{children:[e(f,{error:E,warning:R,validationId:te,validationMessagePositionTop:J}),(E||R)&&e(v,{"data-role":"radio-error-border",warning:!(E||!R)})]}),e(d,{"data-component":"radio-button-group",role:"radiogroup",inline:G,legendInline:ie,children:e(p,{name:S,onBlur:C,onChange:D,value:T,children:i.Children.map(B,(e=>i.isValidElement(e)?i.cloneElement(e,j({inline:G,labelSpacing:V,error:!!E,warning:!!R},e.props)):e))})}),!J&&r(n,{children:[e(f,{error:E,warning:R,validationId:te,validationMessagePositionTop:J}),(E||R)&&e(v,{"data-role":"radio-error-border",warning:!(E||!R)})]})]})]})):e(g,{tooltipPosition:F,children:e(a,w(j({legend:k,error:E,warning:R,info:q,inline:ie,legendWidth:W,legendAlign:H,legendSpacing:L,isRequired:$,isOptional:z},l("radiogroup",K),ee),{ml:oe,blockGroupBehaviour:!(E||R||q),"aria-describedby":le,validationId:te,children:e(d,{"data-component":"radio-button-group",role:"radiogroup",inline:G,legendInline:ie,children:e(p,{name:S,onBlur:C,onChange:D,value:T,children:i.Children.map(B,(e=>i.isValidElement(e)?i.cloneElement(e,j({inline:G,labelSpacing:V,error:!!E,warning:!!R,info:!!q},e.props)):e))})})}))})})};B.displayName="RadioButtonGroup";export{B as RadioButtonGroup,B as default};

package/esm/components/radio-button/radio-button.style.js

@@ -1 +1 @@
-import e,{css as i}from"styled-components";import{margin as t}from"styled-system";import l from"../../__internal__/field-help/field-help.style.js";import r from"../checkbox/checkbox.style.js";import n from"../../__internal__/checkable-input/hidden-checkable-input.style.js";import{StyledCheckableInput as o}from"../../__internal__/checkable-input/checkable-input.style.js";import a from"../../__internal__/checkable-input/checkable-input-svg-wrapper.style.js";import{StyledLabelContainer as s}from"../../__internal__/label/label.style.js";import c from"../../style/themes/apply-base-theme.js";import p from"../../__internal__/form-field/form-field.style.js";const m=e(r).attrs(c).withConfig({displayName:"radio-button.style__RadioButtonStyle",componentId:"sc-c570c431-0"})([""," ",";"],(({disabled:e,fieldHelpInline:t,reverse:r,size:c,inline:m})=>i(["margin-bottom:var(--spacing150);:last-of-type{margin-bottom:0;}&& ","{margin:0;}","{padding:0;}",",svg{border-radius:var(--borderRadiusCircle);}",",",",",",svg{height:16px;width:16px;}svg{padding:1px;}circle{r:5;}","{flex:1 1 calc(100% - 44px);}",":checked + "," circle{fill:var(--colorsUtilityYin090);}"," "," "," ",""],p,a,a,o,n,a,s,n,a,e&&i(["circle{fill:var(--colorsUtilityDisabled400);}",":checked + "," circle{fill:var(--colorsUtilityDisabled600);}"],n,a),(t||r)&&`\n      ${l} {\n        margin-left: 0;\n        margin-right: 6px;\n      }\n\n      ${s} {\n        flex: 0 1 auto;\n      }\n    `,"large"===c&&i(["",",",",",",svg{height:24px;width:24px;}circle{r:3.75;}",""],o,n,a,r&&i(["",""],!t&&`\n          ${l} {\n            padding: 0;\n          }\n        `)),m&&"\n      &:not(:first-of-type) {\n        margin-left: 32px;\n      }\n    ")),t);export{m as default};
+import e,{css as i}from"styled-components";import{margin as t}from"styled-system";import l from"../../__internal__/field-help/field-help.style.js";import r from"../checkbox/checkbox.style.js";import n from"../../__internal__/checkable-input/hidden-checkable-input.style.js";import{StyledCheckableInput as a}from"../../__internal__/checkable-input/checkable-input.style.js";import o from"../../__internal__/checkable-input/checkable-input-svg-wrapper.style.js";import{StyledLabelContainer as s}from"../../__internal__/label/label.style.js";import c from"../../style/themes/apply-base-theme.js";import p from"../../__internal__/form-field/form-field.style.js";const m=e(r).attrs(c).withConfig({displayName:"radio-button.style__RadioButtonStyle",componentId:"sc-cc88a6ca-0"})([""," ",";"],(({disabled:e,fieldHelpInline:t,reverse:r,size:c,inline:m})=>i(["margin-bottom:var(--spacing150);:last-of-type{margin-bottom:0;}&& ","{margin:0;}","{padding:0;}",",svg{border-radius:var(--borderRadiusCircle);}",",",",",",svg{height:16px;width:16px;}svg{padding:1px;}circle{r:5;}","{flex:1 1 calc(100% - 44px);}",":checked + "," circle{fill:var(--colorsUtilityYin090);}"," "," "," ",""],p,o,o,a,n,o,s,n,o,e&&i(["circle{fill:var(--colorsUtilityDisabled400);}",":checked + "," circle{fill:var(--colorsUtilityDisabled600);}"],n,o),(t||r)&&`\n      ${l} {\n        margin-left: 0;\n        margin-right: 6px;\n      }\n\n      ${s} {\n        flex: 0 1 auto;\n      }\n    `,"large"===c&&i(["",",",",",",svg{height:24px;width:24px;}circle{r:3.75;}",""],a,n,o,r&&i(["",""],!t&&`\n          ${l} {\n            padding: 0;\n          }\n        `)),m&&"\n      margin: 0;\n      &:not(:first-of-type) {\n        margin-left: 32px;\n      }\n    ")),t);export{m as default};

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

@@ -21,6 +21,8 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps, Tag
     helpAriaLabel?: string;
     /** Whether this component resides on a dark background */
     isDarkBackground?: boolean;
+    /** Render the ValidationMessage above the Switch input when validationRedesignOptIn flag is set */
+    validationMessagePositionTop?: boolean;
 }
 export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
 export default Switch;

package/esm/components/switch/switch.component.js

@@ -1 +1 @@
-import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import i,{useContext as t,useRef as o,useState as l,useCallback as a}from"react";import{Box as c}from"../box/box.component.js";import d from"../../__internal__/checkable-input/checkable-input.component.js";import s from"../../__internal__/label/label.component.js";import{TooltipProvider as p}from"../../__internal__/tooltip-provider/index.js";import u from"../carbon-provider/__internal__/new-validation.context.js";import b from"../../__internal__/utils/logger/index.js";import m from"../../__internal__/validation-message/validation-message.component.js";import f from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import g,{ErrorBorder as h}from"./switch.style.js";import k from"./__internal__/switch-slider.component.js";import v from"../../__internal__/utils/helpers/guid/index.js";import{HintText as y}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import _ from"../../style/utils/filter-styled-system-margin-props.js";function w(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function O(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),i.forEach((function(r){w(e,r,n[r])}))}return e}function j(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 n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}let x=!1;const B=i.forwardRef(((i,w)=>{var{autoFocus:B,id:D,label:I,onChange:P,onBlur:S,onFocus:H,value:L,checked:F,defaultChecked:z,disabled:C,loading:q,reverse:A=!0,required:$,isOptional:E,validationOnLabel:R=!1,labelInline:U=!1,labelSpacing:W,labelHelp:Y,fieldHelpInline:N,size:T,name:V,adaptiveLabelBreakpoint:G,tooltipPosition:J,error:K,warning:M,info:Q,"data-element":X,"data-role":Z,helpAriaLabel:ee,isDarkBackground:re=!1}=i,ne=function(e,r){if(null==e)return{};var n,i,t=function(e,r){if(null==e)return{};var n,i,t={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||(t[n]=e[n]);return t}(e,r);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(i,["autoFocus","id","label","onChange","onBlur","onFocus","value","checked","defaultChecked","disabled","loading","reverse","required","isOptional","validationOnLabel","labelInline","labelSpacing","labelHelp","fieldHelpInline","size","name","adaptiveLabelBreakpoint","tooltipPosition","error","warning","info","data-element","data-role","helpAriaLabel","isDarkBackground"]);const ie=void 0!==F,{validationRedesignOptIn:te}=t(u),oe=o(`${v()}-label`),le=o(`${v()}-hint`),ae=o(`${v()}-message`),[ce,de]=l(z||!1);x||P||(x=!0,b.deprecate("Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const se=a((e=>{q?e.preventDefault():(de(e.target.checked),null==P||P(e))}),[de,P,q]),pe=f(G);let ue=U;G&&(ue=pe);const be=!(!U||A)||R,me=_(ne),fe=O({"data-component":"switch","data-role":Z,"data-element":X,checked:ie?F:ce,isDarkBackground:re,fieldHelpInline:N,labelInline:ue,labelSpacing:W,reverse:!A,size:T},me),ge={checked:ie?F:ce,disabled:C,loading:q,isDarkBackground:re,size:T,error:K,warning:M,info:Q,useValidationIcon:!te&&!be&&!C},he=j(O({autoFocus:B,error:K,warning:M,info:Q,disabled:C,loading:q,checked:ie?F:ce,label:I,labelHelp:Y,fieldHelpInline:N,labelInline:ue,labelSpacing:W,onBlur:S,isDarkBackground:re,onFocus:H,onChange:ie?P:se,id:D,name:V,value:L,type:"checkbox",role:"switch",reverse:!A,validationOnLabel:be&&!C,ref:w,required:$,isOptional:E},ne),{"data-component":void 0}),ke=O({"data-component":"switch","data-role":Z,"data-element":X,checked:ie?F:ce,labelInline:ue,isDarkBackground:re,size:T},me),ve={checked:ie?F:ce,disabled:C,loading:q,isDarkBackground:re,size:T,error:K,warning:M},ye=O({autoFocus:B,error:!!K,warning:M,disabled:C,loading:q,checked:ie?F:ce,onBlur:S,isDarkBackground:re,onFocus:H,onChange:ie?P:se,id:D,name:V,value:L,type:"checkbox",role:"switch",ref:w,required:$,isOptional:E},ne),_e=K||M,we=[Y&&le.current,_e&&ae.current].filter(Boolean).join(" ");if(!te)return e(r,{children:e(p,{helpAriaLabel:ee,tooltipPosition:J,children:e(g,j(O({},fe),{children:e(d,j(O({},he),{children:e(k,O({},ge))}))}))})});const Oe=K||M?U?3:0:U?1:0,je=U?"row":"column",xe=U?"row-reverse":"column",Be=!U||K||M||Q?"":"center";return n(r,{children:[e(g,j(O({},ke),{children:n(c,{"data-role":"field-reverse-wrapper",display:"flex",flexWrap:"wrap",alignItems:K||M?"flex-start":void 0,flexDirection:A?je:xe,width:U?"100%":"auto",children:[n(c,{"data-role":"label-wrapper",alignSelf:Be,children:[e(s,{isDarkBackground:re,labelId:oe.current,disabled:C,isRequired:$,optional:E,children:I}),Y&&e(c,{"data-role":"hint-text-wrapper",mb:U?0:1,mr:A?0:1,ml:A?0:1,children:e(y,{"data-role":"hint-text",fontWeight:"400",id:le.current,isDarkBackground:re,marginTop:"8px",maxWidth:"160px",children:Y})})]}),n(c,{ml:A?Oe:0,mr:A?0:Oe,position:"relative",id:"input-wrapper","data-role":"input-wrapper",children:[e(m,{error:K,warning:M,validationId:ae.current,isDarkBackground:re}),_e&&e(h,{"data-role":"error-border",warning:!(K||!M),reverse:!A,isDarkBackground:re}),e(d,j(O({ariaLabelledBy:`${I&&oe.current}`,ariaDescribedBy:we},ye),{fieldHelp:U?void 0:ne.fieldHelp,children:e(k,O({},ve))}))]})]})})),U&&ne.fieldHelp&&e(c,{color:re?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",children:ne.fieldHelp})]})}));B.displayName="Switch";export{B as Switch,B as default};
+import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import i,{useContext as o,useRef as t,useState as a,useCallback as l}from"react";import{Box as d}from"../box/box.component.js";import s from"../../__internal__/checkable-input/checkable-input.component.js";import c from"../../__internal__/label/label.component.js";import{TooltipProvider as p}from"../../__internal__/tooltip-provider/index.js";import u from"../carbon-provider/__internal__/new-validation.context.js";import b from"../../__internal__/utils/logger/index.js";import m from"../../__internal__/validation-message/validation-message.component.js";import f from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import g,{ErrorBorder as h}from"./switch.style.js";import k from"./__internal__/switch-slider.component.js";import v from"../../__internal__/utils/helpers/guid/index.js";import{HintText as w}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import y from"../../style/utils/filter-styled-system-margin-props.js";function _(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function O(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),i.forEach((function(r){_(e,r,n[r])}))}return e}function j(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 n=Object.getOwnPropertySymbols(e);r.push.apply(r,n)}return r}(Object(r)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(r,n))})),e}let B=!1;const x=i.forwardRef(((i,_)=>{var{autoFocus:x,id:D,label:P,onChange:I,onBlur:S,onFocus:H,value:L,checked:F,defaultChecked:z,disabled:C,loading:q,reverse:A=!0,required:T,isOptional:M,validationOnLabel:$=!1,labelInline:E=!1,labelSpacing:R,labelHelp:U,fieldHelpInline:W,size:Y,name:N,adaptiveLabelBreakpoint:V,tooltipPosition:G,error:J,warning:K,info:Q,"data-element":X,"data-role":Z,helpAriaLabel:ee,isDarkBackground:re=!1,validationMessagePositionTop:ne=!0}=i,ie=function(e,r){if(null==e)return{};var n,i,o=function(e,r){if(null==e)return{};var n,i,o={},t=Object.keys(e);for(i=0;i<t.length;i++)n=t[i],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);for(i=0;i<t.length;i++)n=t[i],r.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}(i,["autoFocus","id","label","onChange","onBlur","onFocus","value","checked","defaultChecked","disabled","loading","reverse","required","isOptional","validationOnLabel","labelInline","labelSpacing","labelHelp","fieldHelpInline","size","name","adaptiveLabelBreakpoint","tooltipPosition","error","warning","info","data-element","data-role","helpAriaLabel","isDarkBackground","validationMessagePositionTop"]);const oe=void 0!==F,{validationRedesignOptIn:te}=o(u),ae=t(`${v()}-label`),le=t(`${v()}-hint`),de=t(`${v()}-message`),[se,ce]=a(z||!1);B||I||(B=!0,b.deprecate("Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const pe=l((e=>{q?e.preventDefault():(ce(e.target.checked),null==I||I(e))}),[ce,I,q]),ue=f(V);let be=E;V&&(be=ue);const me=!(!E||A)||$,fe=y(ie),ge=O({"data-component":"switch","data-role":Z,"data-element":X,checked:oe?F:se,isDarkBackground:re,fieldHelpInline:W,labelInline:be,labelSpacing:R,reverse:!A,size:Y},fe),he={checked:oe?F:se,disabled:C,loading:q,isDarkBackground:re,size:Y,error:J,warning:K,info:Q,useValidationIcon:!te&&!me&&!C},ke=j(O({autoFocus:x,error:J,warning:K,info:Q,disabled:C,loading:q,checked:oe?F:se,label:P,labelHelp:U,fieldHelpInline:W,labelInline:be,labelSpacing:R,onBlur:S,isDarkBackground:re,onFocus:H,onChange:oe?I:pe,id:D,name:N,value:L,type:"checkbox",role:"switch",reverse:!A,validationOnLabel:me&&!C,ref:_,required:T,isOptional:M},ie),{"data-component":void 0}),ve=O({"data-component":"switch","data-role":Z,"data-element":X,checked:oe?F:se,labelInline:be,isDarkBackground:re,size:Y},fe),we={checked:oe?F:se,disabled:C,loading:q,isDarkBackground:re,size:Y,error:J,warning:K},ye=O({autoFocus:x,error:!!J,warning:K,disabled:C,loading:q,checked:oe?F:se,onBlur:S,isDarkBackground:re,onFocus:H,onChange:oe?I:pe,id:D,name:N,value:L,type:"checkbox",role:"switch",ref:_,required:T,isOptional:M},ie),_e=J||K,Oe=[U&&le.current,_e&&de.current].filter(Boolean).join(" ");if(!te)return e(r,{children:e(p,{helpAriaLabel:ee,tooltipPosition:G,children:e(g,j(O({},ge),{children:e(s,j(O({},ke),{children:e(k,O({},he))}))}))})});const je=J||K?E?3:0:E?1:0,Be=E?"row":"column",xe=E?"row-reverse":"column",De=!E||J||K||Q?"":"center";return n(r,{children:[e(g,j(O({},ve),{children:n(d,{"data-role":"field-reverse-wrapper",display:"flex",flexWrap:"wrap",alignItems:J||K?"flex-start":void 0,flexDirection:A?Be:xe,width:E?"100%":"auto",children:[n(d,{"data-role":"label-wrapper",alignSelf:De,children:[e(c,{isDarkBackground:re,labelId:ae.current,disabled:C,isRequired:T,optional:M,children:P}),U&&e(d,{"data-role":"hint-text-wrapper",mb:E?0:1,mr:A?0:1,ml:A?0:1,children:e(w,{"data-role":"hint-text",fontWeight:"400",id:le.current,isDarkBackground:re,marginTop:"8px",maxWidth:"160px",children:U})})]}),n(d,{ml:A?je:0,mr:A?0:je,position:"relative",id:"input-wrapper","data-role":"input-wrapper",children:[ne&&n(r,{children:[e(m,{error:J,warning:K,validationId:de.current,isDarkBackground:re,validationMessagePositionTop:ne,"data-role":"validation-message-top"}),_e&&e(h,{"data-role":"error-border",warning:!(J||!K),reverse:!A,isDarkBackground:re})]}),e(s,j(O({ariaLabelledBy:`${P&&ae.current}`,ariaDescribedBy:Oe},ye),{fieldHelp:E?void 0:ie.fieldHelp,children:e(k,O({},we))})),!ne&&n(r,{children:[e(m,{error:J,warning:K,validationId:de.current,isDarkBackground:re,validationMessagePositionTop:ne,"data-role":"validation-message-bottom"}),_e&&e(h,{"data-role":"error-border",warning:!(J||!K),reverse:!A,isDarkBackground:re})]})]})]})})),E&&ie.fieldHelp&&e(d,{color:re?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",children:ie.fieldHelp})]})}));x.displayName="Switch";export{x as Switch,x as default};

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.d.ts

@@ -16,6 +16,8 @@ export interface ContentEditorProps {
     error?: boolean;
     /** Editor has a warning */
     warning?: boolean;
+    /** Render the ValidationMessage above the Editor */
+    validationMessagePositionTop?: boolean;
 }
 declare const ContentEditor: React.ForwardRefExoticComponent<ContentEditorProps & React.RefAttributes<HTMLDivElement>>;
 export default ContentEditor;

package/esm/components/text-editor/__internal__/plugins/ContentEditor/content-editor.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ContentEditable as r}from"@lexical/react/LexicalContentEditable";import{forwardRef as i}from"react";import o from"./content-editor.style.js";import"../AutoLinker/auto-link.component.js";import"@lexical/react/LexicalComposerContext";import"lexical";import"../CharacterCounter/character-counter.style.js";import"lodash/debounce";import"../../../../../__internal__/i18n-context/index.js";import"@lexical/link";import"@lexical/headless";import"@lexical/html";import"@lexical/code";import"@lexical/list";import"@lexical/react/LexicalHorizontalRuleNode";import"@lexical/rich-text";import"../../../text-editor.context.js";import a from"../LinkPreviewer/link-previewer.component.js";import"../Placeholder/placeholder.style.js";import"@lexical/utils";import"../Toolbar/toolbar.style.js";import"../../../../button/button.component.js";import l from"../useCursorAtEnd/index.js";const n=i((({inputHint:i,namespace:n,previews:c=[],rows:m,readOnly:s,required:p,error:d,warning:x},u)=>{const b=l(),j=`${d||x?`${n}-validation-message`:""} ${i?`${n}-input-hint`:""}`.trim();return e(o,{"data-role":`${n}-content-editable`,namespace:n,rows:m,readOnly:s,children:[t(r,{ref:u,"aria-describedby":j,"aria-labelledby":`${n}-label`,"aria-required":p,"aria-invalid":d,className:`${n}-editable`,"data-role":`${n}-editable`,onFocus:e=>{e.relatedTarget&&e.relatedTarget.classList.contains("toolbar-button")||b(e)},"aria-autocomplete":void 0,"aria-readonly":void 0}),t(a,{previews:c})]})}));export{n as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ContentEditable as r}from"@lexical/react/LexicalContentEditable";import{forwardRef as i}from"react";import o from"./content-editor.style.js";import"../AutoLinker/auto-link.component.js";import"@lexical/react/LexicalComposerContext";import"lexical";import"../CharacterCounter/character-counter.style.js";import"lodash/debounce";import"../../../../../__internal__/i18n-context/index.js";import"@lexical/link";import"@lexical/headless";import"@lexical/html";import"@lexical/code";import"@lexical/list";import"@lexical/react/LexicalHorizontalRuleNode";import"@lexical/rich-text";import"../../../text-editor.context.js";import a from"../LinkPreviewer/link-previewer.component.js";import"../Placeholder/placeholder.style.js";import"@lexical/utils";import"../Toolbar/toolbar.style.js";import"../../../../button/button.component.js";import l from"../useCursorAtEnd/index.js";const n=i((({inputHint:i,namespace:n,previews:c=[],rows:s,readOnly:m,required:p,error:d,warning:x,validationMessagePositionTop:u},b)=>{const j=l(),h=d||x?`${n}-validation-message`:"",$=i?`${n}-input-hint`:"",v=(u?`${h} ${$}`:`${$} ${h}`).trim();return e(o,{"data-role":`${n}-content-editable`,namespace:n,rows:s,readOnly:m,children:[t(r,{ref:b,"aria-describedby":v,"aria-labelledby":`${n}-label`,"aria-required":p,"aria-invalid":d,className:`${n}-editable`,"data-role":`${n}-editable`,onFocus:e=>{e.relatedTarget&&e.relatedTarget.classList.contains("toolbar-button")||j(e)},"aria-autocomplete":void 0,"aria-readonly":void 0}),t(a,{previews:c})]})}));export{n as default};

package/esm/components/text-editor/text-editor.component.d.ts

@@ -58,6 +58,8 @@ export interface TextEditorProps extends MarginProps, TagProps {
      * This prop is optional and supports a single plugin, multiple plugins (via fragments or arrays), or `null`.
      */
     customPlugins?: React.ReactNode;
+    /** Render the ValidationMessage above the TextEditor */
+    validationMessagePositionTop?: boolean;
 }
 export declare const TextEditor: React.ForwardRefExoticComponent<TextEditorProps & React.RefAttributes<TextEditorHandle>>;
 export default TextEditor;

package/esm/components/text-editor/text-editor.component.js

@@ -1 +1 @@
-import{jsx as e,jsxs as r}from"react/jsx-runtime";import{LexicalComposer as t}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as n}from"@lexical/react/LexicalClickableLinkPlugin";import{EditorRefPlugin as o}from"@lexical/react/LexicalEditorRefPlugin";import{LexicalErrorBoundary as i}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as a}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as l}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as c}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as s}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as p}from"@lexical/react/LexicalListPlugin";import{$getRoot as u}from"lexical";import{forwardRef as d,useRef as m,useState as f,useImperativeHandle as _,useEffect as g,useMemo as h,useCallback as b}from"react";import{SerializeLexical as v,validateUrl as x}from"./__internal__/helpers.js";import j from"../../__internal__/label/label.component.js";import y from"../../hooks/__internal__/useLocale/useLocale.js";import O from"../../__internal__/utils/logger/index.js";import{markdownNodes as w,theme as L,COMPONENT_PREFIX as P}from"./__internal__/constants.js";import E from"./__internal__/plugins/AutoLinker/auto-link.component.js";import k from"./__internal__/plugins/CharacterCounter/character-counter.component.js";import C from"./__internal__/plugins/ContentEditor/content-editor.component.js";import S from"./__internal__/plugins/LinkMonitor/link-monitor.plugin.js";import"./__internal__/plugins/LinkPreviewer/link-previewer.style.js";import T from"./__internal__/plugins/OnChange/on-change.plugin.js";import $ from"./__internal__/plugins/Placeholder/placeholder.component.js";import B from"./__internal__/plugins/Toolbar/toolbar.component.js";import"./__internal__/plugins/useCursorAtEnd/index.js";import q from"./text-editor.context.js";import{StyledTextEditorWrapper as A,StyledWrapper as H,StyledEditorToolbarWrapper as D,StyledHeaderWrapper as I,StyledTextEditor as R,StyledFooterWrapper as F}from"./text-editor.style.js";import{createEmpty as M}from"./utils.js";import{HintText as U}from"../../__internal__/hint-text/hint-text.component.js";import z from"../../__internal__/validation-message/validation-message.component.js";import G from"../textbox/textbox.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import J from"../../style/utils/filter-styled-system-margin-props.js";import K from"../../__internal__/utils/helpers/tags/tags.js";function N(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function Q(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){N(e,r,t[r])}))}return e}let V=!1;const W=d(((d,N)=>{var{characterLimit:W=3e3,error:X,footer:Y,header:Z,inputHint:ee,isOptional:re=!1,labelText:te,namespace:ne=P,onBlur:oe,onCancel:ie,onChange:ae,onFocus:le,onLinkAdded:ce,onSave:se,placeholder:pe,previews:ue=[],readOnly:de=!1,required:me=!1,rows:fe,warning:_e,value:ge,customPlugins:he}=d,be=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(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)&&(o[t]=e[t])}return o}(d,["characterLimit","error","footer","header","inputHint","isOptional","labelText","namespace","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","warning","value","customPlugins"]);!V&&re&&(V=!0,O.deprecate("`isOptional` is deprecated in TextEditor and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const ve=m(void 0),xe=y(),[je,ye]=f(void 0),Oe=m(null),[we,Le]=f(!1);_(N,(()=>({focus(){var e;null===(e=Oe.current)||void 0===e||e.focus()}})),[]),g((()=>{const e=null==Oe?void 0:Oe.current,r=()=>{Le(!0)},t=()=>{Le(!1)};return null==e||e.addEventListener("focus",r),null==e||e.addEventListener("blur",t),()=>{null==e||e.removeEventListener("focus",r),null==e||e.removeEventListener("blur",t)}}),[Oe]);const[Pe,Ee]=f(!1),ke=h((()=>({namespace:ne,nodes:w,onError:e=>O.error(e.message),theme:L,editorState:ge,editable:!de})),[ne,de,ge]),Ce=b((e=>{const r=e.read((()=>u().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(ae){const e=ve.current?v(ve.current):{};null==ae||ae(r,e)}if(W>0){const e=W-r.length;ye(e<0?xe.textEditor.characterLimit(Math.abs(e)):void 0)}}),[W,xe.textEditor,ae]),Se=b((()=>{var e;(null===(e=ve.current)||void 0===e?void 0:e.isEditable())&&ie&&(Ee((e=>!e)),ie())}),[ie]);g((()=>{const e=ge||M();if(ve.current){const r=ve.current.parseEditorState(e);ve.current.setEditorState(r)}}),[Pe,ge]);const Te=h((()=>({namespace:ne,onCancel:ie?Se:void 0,onSave:se})),[Se,ne,ie,se]),$e=_e||je;return e(A,(Be=Q({"data-role":`${ne}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==oe||oe(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==le||le(e)}},J(be),K("text-editor",be)),qe=null!=(qe={children:r(q.Provider,{value:{onLinkAdded:ce},children:[e(j,{isRequired:me,optional:re,labelId:`${ne}-label`,children:te}),ee&&e(U,{id:`${ne}-input-hint`,marginBottom:"var(--spacing100)",children:ee}),r(t,{initialConfig:ke,children:[e(o,{editorRef:ve}),r(H,{"data-role":`${ne}-wrapper`,children:[e(z,{error:X,warning:$e,validationId:`${ne}-validation-message`,"data-role":`${ne}-validation-message`}),(X||$e)&&e(G,{warning:!(X||!$e)}),r(D,{"data-role":`${ne}-editor-toolbar-wrapper`,id:`${ne}-editor-toolbar-wrapper`,focused:we,error:!!X,children:[Z&&e(I,{"data-role":`${ne}-header-wrapper`,children:Z}),!de&&e(B,Q({hasHeader:Boolean(Z)},Te)),r(R,{"data-role":`${ne}-editor`,children:[e(c,{contentEditable:e(C,{ref:Oe,inputHint:ee,namespace:ne,previews:ue,rows:fe,readOnly:de,required:me,error:!!X,warning:!!_e||!!je}),placeholder:e($,{namespace:ne,text:pe}),ErrorBoundary:i}),e(p,{}),e(a,{}),e(l,{}),e(T,{onChange:Ce}),e(s,{validateUrl:x}),e(n,{newTab:!0}),e(E,{}),he]}),Y&&e(F,{"data-role":`${ne}-footer-wrapper`,children:Y}),e(S,{})]}),W>0&&!de&&e(k,{maxChars:W,namespace:ne})]})]})]})})?qe:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Be,Object.getOwnPropertyDescriptors(qe)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(qe)).forEach((function(e){Object.defineProperty(Be,e,Object.getOwnPropertyDescriptor(qe,e))})),Be));var Be,qe}));export{W as TextEditor,W as default};
+import{jsx as e,jsxs as r,Fragment as t}from"react/jsx-runtime";import{LexicalComposer as n}from"@lexical/react/LexicalComposer";import{ClickableLinkPlugin as o}from"@lexical/react/LexicalClickableLinkPlugin";import{EditorRefPlugin as i}from"@lexical/react/LexicalEditorRefPlugin";import{LexicalErrorBoundary as a}from"@lexical/react/LexicalErrorBoundary";import{HistoryPlugin as l}from"@lexical/react/LexicalHistoryPlugin";import{MarkdownShortcutPlugin as s}from"@lexical/react/LexicalMarkdownShortcutPlugin";import{RichTextPlugin as c}from"@lexical/react/LexicalRichTextPlugin";import{LinkPlugin as p}from"@lexical/react/LexicalLinkPlugin";import{ListPlugin as d}from"@lexical/react/LexicalListPlugin";import{$getRoot as u}from"lexical";import{forwardRef as m,useRef as f,useState as g,useImperativeHandle as _,useEffect as v,useMemo as h,useCallback as b}from"react";import{SerializeLexical as x,validateUrl as j}from"./__internal__/helpers.js";import y from"../../__internal__/label/label.component.js";import O from"../../hooks/__internal__/useLocale/useLocale.js";import w from"../../__internal__/utils/logger/index.js";import{markdownNodes as P,theme as L,COMPONENT_PREFIX as E}from"./__internal__/constants.js";import k from"./__internal__/plugins/AutoLinker/auto-link.component.js";import C from"./__internal__/plugins/CharacterCounter/character-counter.component.js";import T from"./__internal__/plugins/ContentEditor/content-editor.component.js";import S from"./__internal__/plugins/LinkMonitor/link-monitor.plugin.js";import"./__internal__/plugins/LinkPreviewer/link-previewer.style.js";import $ from"./__internal__/plugins/OnChange/on-change.plugin.js";import M from"./__internal__/plugins/Placeholder/placeholder.component.js";import B from"./__internal__/plugins/Toolbar/toolbar.component.js";import"./__internal__/plugins/useCursorAtEnd/index.js";import q from"./text-editor.context.js";import{StyledTextEditorWrapper as A,StyledWrapper as H,StyledEditorToolbarWrapper as I,StyledHeaderWrapper as D,StyledTextEditor as R,StyledFooterWrapper as F}from"./text-editor.style.js";import{createEmpty as U}from"./utils.js";import{HintText as z}from"../../__internal__/hint-text/hint-text.component.js";import G from"../../__internal__/validation-message/validation-message.component.js";import J from"../textbox/textbox.style.js";import"../../style/utils/filter-styled-system-padding-props.js";import K from"../../style/utils/filter-styled-system-margin-props.js";import N from"../../__internal__/utils/helpers/tags/tags.js";function Q(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function V(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){Q(e,r,t[r])}))}return e}let W=!1;const X=m(((m,Q)=>{var{characterLimit:X=3e3,error:Y,footer:Z,header:ee,inputHint:re,isOptional:te=!1,labelText:ne,namespace:oe=E,onBlur:ie,onCancel:ae,onChange:le,onFocus:se,onLinkAdded:ce,onSave:pe,placeholder:de,previews:ue=[],readOnly:me=!1,required:fe=!1,rows:ge,warning:_e,value:ve,customPlugins:he,validationMessagePositionTop:be=!0}=m,xe=function(e,r){if(null==e)return{};var t,n,o=function(e,r){if(null==e)return{};var t,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)t=i[n],r.indexOf(t)>=0||(o[t]=e[t]);return o}(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)&&(o[t]=e[t])}return o}(m,["characterLimit","error","footer","header","inputHint","isOptional","labelText","namespace","onBlur","onCancel","onChange","onFocus","onLinkAdded","onSave","placeholder","previews","readOnly","required","rows","warning","value","customPlugins","validationMessagePositionTop"]);!W&&te&&(W=!0,w.deprecate("`isOptional` is deprecated in TextEditor and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const je=f(void 0),ye=O(),[Oe,we]=g(void 0),Pe=f(null),[Le,Ee]=g(!1);_(Q,(()=>({focus(){var e;null===(e=Pe.current)||void 0===e||e.focus()}})),[]),v((()=>{const e=null==Pe?void 0:Pe.current,r=()=>{Ee(!0)},t=()=>{Ee(!1)};return null==e||e.addEventListener("focus",r),null==e||e.addEventListener("blur",t),()=>{null==e||e.removeEventListener("focus",r),null==e||e.removeEventListener("blur",t)}}),[Pe]);const[ke,Ce]=g(!1),Te=h((()=>({namespace:oe,nodes:P,onError:e=>w.error(e.message),theme:L,editorState:ve,editable:!me})),[oe,me,ve]),Se=b((e=>{const r=e.read((()=>u().getChildren().map((e=>e.getTextContent())).join("\n\n")));if(le){const e=je.current?x(je.current):{};null==le||le(r,e)}if(X>0){const e=X-r.length;we(e<0?ye.textEditor.characterLimit(Math.abs(e)):void 0)}}),[X,ye.textEditor,le]),$e=b((()=>{var e;(null===(e=je.current)||void 0===e?void 0:e.isEditable())&&ae&&(Ce((e=>!e)),ae())}),[ae]);v((()=>{const e=ve||U();if(je.current){const r=je.current.parseEditorState(e);je.current.setEditorState(r)}}),[ke,ve]);const Me=h((()=>({namespace:oe,onCancel:ae?$e:void 0,onSave:pe})),[$e,oe,ae,pe]),Be=_e||Oe;return e(A,(qe=V({"data-role":`${oe}-editor-wrapper`,onBlur:e=>{e.currentTarget.contains(e.relatedTarget)||null==ie||ie(e)},onFocus:e=>{e.currentTarget.contains(e.relatedTarget)||null==se||se(e)}},K(xe),N("text-editor",xe)),Ae=null!=(Ae={children:r(q.Provider,{value:{onLinkAdded:ce},children:[e(y,{isRequired:fe,optional:te,labelId:`${oe}-label`,children:ne}),re&&e(z,{id:`${oe}-input-hint`,marginBottom:"var(--spacing100)",children:re}),r(n,{initialConfig:Te,children:[e(i,{editorRef:je}),r(H,{"data-role":`${oe}-wrapper`,children:[be&&r(t,{children:[e(G,{error:Y,warning:Be,validationId:`${oe}-validation-message`,"data-role":`${oe}-validation-message`,validationMessagePositionTop:be}),(Y||Be)&&e(J,{warning:!(Y||!Be)})]}),r(I,{"data-role":`${oe}-editor-toolbar-wrapper`,id:`${oe}-editor-toolbar-wrapper`,focused:Le,error:!!Y,children:[ee&&e(D,{"data-role":`${oe}-header-wrapper`,children:ee}),!me&&e(B,V({hasHeader:Boolean(ee)},Me)),r(R,{"data-role":`${oe}-editor`,children:[e(c,{contentEditable:e(T,{ref:Pe,inputHint:re,namespace:oe,previews:ue,rows:ge,readOnly:me,required:fe,error:!!Y,warning:!!_e||!!Oe,validationMessagePositionTop:be}),placeholder:e(M,{namespace:oe,text:de}),ErrorBoundary:a}),e(d,{}),e(l,{}),e(s,{}),e($,{onChange:Se}),e(p,{validateUrl:j}),e(o,{newTab:!0}),e(k,{}),he]}),Z&&e(F,{"data-role":`${oe}-footer-wrapper`,children:Z}),e(S,{})]}),!be&&r(t,{children:[e(G,{error:Y,warning:Be,validationId:`${oe}-validation-message`,"data-role":`${oe}-validation-message`,validationMessagePositionTop:be}),(Y||Be)&&e(J,{warning:!(Y||!Be)})]}),X>0&&!me&&e(C,{maxChars:X,namespace:oe})]})]})]})})?Ae:{},Object.getOwnPropertyDescriptors?Object.defineProperties(qe,Object.getOwnPropertyDescriptors(Ae)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(Ae)).forEach((function(e){Object.defineProperty(qe,e,Object.getOwnPropertyDescriptor(Ae,e))})),qe));var qe,Ae}));export{X as TextEditor,X as default};

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

@@ -102,6 +102,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     hideBorders?: boolean;
     /** Specify the minimum height. This property is only applied if rows is not set. */
     minHeight?: number;
+    /** Render the ValidationMessage above the Textarea when validationRedesignOptIn flag is set */
+    validationMessagePositionTop?: boolean;
 }
 export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export { Textarea as OriginalTextarea };