carbon-react 156.4.0 → 156.5.0

package/esm/components/select/filterable-select/filterable-select.component.d.ts

@@ -10,8 +10,6 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     "aria-labelledby"?: string;
     /** Child components (such as Option or OptionRow) for the SelectList */
     children: React.ReactNode;
-    /** The default selected value(s), when the component is operating in uncontrolled mode */
-    defaultValue?: string | Record<string, unknown>;
     /** If true the loader animation is displayed in the option list */
     isLoading?: boolean;
     /** True for default text button or a Button Component to be rendered */
@@ -36,8 +34,8 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
      * Works only in multiColumn mode
      */
     tableHeader?: React.ReactNode;
-    /** The selected value(s), when the component is operating in controlled mode */
-    value?: string | Record<string, unknown>;
+    /** The selected value(s) */
+    value: string | Record<string, unknown>;
     /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Maximum list height - defaults to 180 */
@@ -59,7 +57,7 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     /** Flag to configure component as mandatory */
     required?: boolean;
     /** Specify a callback triggered on change */
-    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
     /** Override the default width of the list element. Number passed is converted into pixel value */
     listWidth?: number;
 }

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useState as r,useRef as o,useCallback as l,useEffect as i}from"react";import a from"invariant";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import c from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../__internal__/select-textbox/select-textbox.component.js";import d from"../../../__internal__/utils/helpers/guid/index.js";import p from"../__internal__/utils/with-filter.hoc.js";import m from"../select.style.js";import f from"../__internal__/select-list/select-list.component.js";import b from"../__internal__/utils/is-expected-option.js";import v from"../__internal__/utils/are-objects-equal.js";import g from"../__internal__/utils/is-navigation-key.js";import y from"../../../__internal__/utils/logger/index.js";import{useStableCallback as h}from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import O from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";function _(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function w(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){_(e,t,n[t])}))}return e}function j(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 C=!1;const x=p(f),L=n.forwardRef(((p,_)=>{var{"aria-label":L,"aria-labelledby":S,value:P,defaultValue:k,id:D,name:A,label:E,children:B,onOpen:F,onChange:M,onFilterChange:V,onClick:I,onKeyDown:T,onFocus:q,onBlur:H,openOnFocus:W,noResultsMessage:K,listActionButton:R,listMaxHeight:U,onListAction:z,isLoading:G,disabled:J,readOnly:N,onListScrollBottom:Q,tableHeader:X,multiColumn:Y,"data-element":Z,"data-role":$,tooltipPosition:ee,listPlacement:te="bottom",flipEnabled:ne=!0,enableVirtualScroll:re,virtualScrollOverscan:oe,disableDefaultFiltering:le=!1,required:ie,listWidth:ae}=p,se=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(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)&&(o[n]=e[n])}return o}(p,["aria-label","aria-labelledby","value","defaultValue","id","name","label","children","onOpen","onChange","onFilterChange","onClick","onKeyDown","onFocus","onBlur","openOnFocus","noResultsMessage","listActionButton","listMaxHeight","onListAction","isLoading","disabled","readOnly","onListScrollBottom","tableHeader","multiColumn","data-element","data-role","tooltipPosition","listPlacement","flipEnabled","enableVirtualScroll","virtualScrollOverscan","disableDefaultFiltering","required","listWidth"]);const[ce,ue]=r(""),de=o(d()),pe=o(null),me=o(null),fe=o(void 0!==P),be=o(!1),ve=o(!1),ge=o(!1),[ye,he]=r(),[Oe,_e]=r(!1),[we,je]=r(""),[Ce,xe]=r(P||k||""),Le=o(P),[Se,Pe]=r(""),[ke,De]=r(""),Ae=o(D||d()),{labelId:Ee}=O({id:Ae.current,label:E}),Be=o(null),Fe=o(!1);!C&&(!fe||!M&&k)&&(C=!0,y.deprecate("Uncontrolled behaviour in `Filterable Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const Me=l(((e,t)=>({target:j(w({},A&&{name:A},D&&{id:D}),{value:e}),selectionConfirmed:t})),[A,D]),Ve=l(((e,t)=>{M&&M(Me(e,t))}),[M,Me]),Ie=l(((e,t)=>{xe((r=>{var o;const l=e.trimStart(),i=(a=l,s=B,n.Children.toArray(s).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==a?void 0:a.toLowerCase()))})));var a,s;const c=t&&!e.length;return!i||c||i.props.disabled?(je(e),Ve("",!1),""):(l.length&&Ve(i.props.value,!1),t?(je(e),i.props.value):(l.length&&(null===(o=i.props.text)||void 0===o?void 0:o.toLowerCase().startsWith(l.toLowerCase()))?je(i.props.text):je(e),fe.current?r:(Pe(i.props.value),i.props.value)))}))}),[B,Ve]),Te=l(((e,t=!1)=>{var r;const o=n.Children.toArray(B).find((t=>n.isValidElement(t)&&b(t,e)));o&&void 0!==o.props.text?(t||(null===(r=o.props.text)||void 0===r?void 0:r.toLowerCase().startsWith(null==ke?void 0:ke.toLowerCase().trim())))&&je(o.props.text):je(ke||"")}),[B,ke]),qe=l((e=>{const t=e.target.value,{inputType:n}=e.nativeEvent;Ie(t,"deleteContentBackward"===n||"deleteContentForward"===n||"delete"===n),De(t),_e(!0)}),[Ie]),He=l((e=>{De((t=>(null==t?void 0:t.length)===(null==we?void 0:we.length)-1&&e===we.slice(-1)?we:t))}),[we]),We=l((e=>{const{key:t}=e;T&&T(e),N||(!e.defaultPrevented&&g(t)&&(e.preventDefault(),_e(!0)),He(t))}),[He,T,N]),Ke=fe.current?P:Ce,Re=l((e=>{const t=pe.current&&!pe.current.contains(e.target),n=me.current&&!me.current.contains(e.target);be.current=!1,t&&n&&(Te(Ke,!0),_e(!1))}),[Te,Ke]);i((()=>{a(fe.current===(void 0!==P),"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"),a(!fe.current||fe.current&&M,"onChange prop required when using a controlled input element"),fe.current?(xe((e=>(P&&e!==P&&Te(P),P))),Pe(P)):(we!==Ce&&Te(Ce),Se!==Ce&&Pe(Ce))}),[P,M,B]);const Ue=h(F);i((()=>{Oe?Ue&&Ue():De("")}),[Ue,Oe]),i((()=>{const e=void 0!==R;a(!e||e&&z,"onListAction prop required when using listActionButton prop")}),[R,z]);const ze=o(!0);i((()=>{ze.current&&Te(Ce),fe.current&&("object"==typeof P&&"object"==typeof Le.current?v(P,Le.current)||(Te(P),Le.current=P):Te(P))}),[P,B]);const Ge=h(V);i((()=>{Ge&&!ze.current&&Ge(ke)}),[Ge,ke]),i((()=>{ze.current=!1}),[]),i((()=>{const e="click";return window.addEventListener(e,Re),function(){window.removeEventListener(e,Re)}}),[Re]),i((()=>{const e=null==ke?void 0:ke.trimStart(),t=null==we?void 0:we.toLowerCase().startsWith(e.toLowerCase());!J&&!N&&ye&&e.length&&(null==we?void 0:we.length)>e.length&&t&&(ye.selectionStart=e.length)}),[we,ke,ye,J,N]);const Je=l((e=>{const{id:t,text:n,value:r,selectionType:o,selectionConfirmed:l}=e;fe.current||(xe(r),Pe(r)),je(n),Ve(r,!!l),ue(t),"navigationKey"!==o&&(Fe.current=!!W,_e(!1),null==ye||ye.focus(),null==ye||ye.select(),Fe.current=!1)}),[ye,Ve,W]),Ne=l((()=>{_e(!1),Te(Ce,!0)}),[Ce,Te]);function Qe(e){be.current=!0,"input"===e.target.dataset.element&&(ge.current=!0)}i((()=>()=>{Be.current&&clearTimeout(Be.current)}),[]);const Xe=l((e=>{e&&(he(e),_&&("function"==typeof _?_(e):_.current=e))}),[_]);let Ye;switch(te){case"top":Ye="top-end";break;case"bottom":Ye="bottom-end";break;default:Ye=te}const Ze={ref:me,id:de.current,labelId:Ee,anchorElement:(null==ye?void 0:ye.parentElement)||void 0,onSelect:Je,onSelectListClose:Ne,onMouseDown:function(){be.current=!0},filterText:ke.trim(),highlightedValue:Se,noResultsMessage:K,listActionButton:R,listMaxHeight:U,onListAction:function(){_e(!1),null==z||z()},isLoading:G,onListScrollBottom:Q,tableHeader:X,multiColumn:Y,listPlacement:void 0!==ae?Ye:te,flipEnabled:ne,isOpen:Oe,enableVirtualScroll:re,virtualScrollOverscan:oe,listWidth:ae},$e=e(le?f:x,j(w({},Ze),{children:B})),et=s(se);return t(m,j(w({hasTextCursor:!0,readOnly:N,disabled:J,"data-component":"filterable-select","data-role":$,"data-element":Z,isOpen:Oe},et),{children:[e("div",{ref:pe,children:e(u,w({ref:Xe,activeDescendantId:ce,ariaLabel:L,ariaLabelledby:S,labelId:E?Ee:void 0,"aria-controls":de.current,isOpen:Oe,hasTextCursor:!0},j(w({id:Ae.current,name:A,label:E,disabled:J,readOnly:N,selectedValue:Ce,formattedValue:we,onClick:function(e){be.current=!1,I&&I(e),_e(!0)},iconOnClick:function(e){be.current=!1,I&&I(e),_e((e=>!e))},iconOnMouseDown:Qe,onFocus:function(e){const t=()=>null==q?void 0:q(e);if(W){if(Be.current&&clearTimeout(Be.current),Fe.current)return;Be.current=setTimeout((()=>{_e((e=>!(!e&&(q&&!ve.current&&(t(),ve.current=!0),be.current&&!ge.current))))}))}else q&&!ve.current&&(t(),ve.current=!0)},onBlur:function(e){ge.current=!1,be.current||(ve.current=!1,H&&H(e))},onKeyDown:We,onChange:qe,onMouseDown:Qe,tooltipPosition:ee,required:ie},c(se)),{"data-component":void 0})))}),$e]}))}));export{L as FilterableSelect,L as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useState as r,useRef as o,useCallback as l,useEffect as i}from"react";import a from"invariant";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import c from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../__internal__/select-textbox/select-textbox.component.js";import d from"../../../__internal__/utils/helpers/guid/index.js";import p from"../__internal__/utils/with-filter.hoc.js";import m from"../select.style.js";import f from"../__internal__/select-list/select-list.component.js";import b from"../__internal__/utils/is-expected-option.js";import v from"../__internal__/utils/are-objects-equal.js";import y from"../__internal__/utils/is-navigation-key.js";import{useStableCallback as g}from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import h from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";function O(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function _(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){O(e,t,n[t])}))}return e}function j(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}const w=p(f),C=n.forwardRef(((p,O)=>{var{"aria-label":C,"aria-labelledby":x,value:L,id:S,name:P,label:k,children:D,onOpen:A,onChange:E,onFilterChange:B,onClick:F,onKeyDown:M,onFocus:T,onBlur:I,openOnFocus:V,noResultsMessage:H,listActionButton:W,listMaxHeight:q,onListAction:K,isLoading:R,disabled:z,readOnly:G,onListScrollBottom:J,tableHeader:N,multiColumn:Q,"data-element":U,"data-role":X,tooltipPosition:Y,listPlacement:Z="bottom",flipEnabled:$=!0,enableVirtualScroll:ee,virtualScrollOverscan:te,disableDefaultFiltering:ne=!1,required:re,listWidth:oe}=p,le=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(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)&&(o[n]=e[n])}return o}(p,["aria-label","aria-labelledby","value","id","name","label","children","onOpen","onChange","onFilterChange","onClick","onKeyDown","onFocus","onBlur","openOnFocus","noResultsMessage","listActionButton","listMaxHeight","onListAction","isLoading","disabled","readOnly","onListScrollBottom","tableHeader","multiColumn","data-element","data-role","tooltipPosition","listPlacement","flipEnabled","enableVirtualScroll","virtualScrollOverscan","disableDefaultFiltering","required","listWidth"]);const[ie,ae]=r(""),se=o(d()),ce=o(null),ue=o(null),de=o(!1),pe=o(!1),me=o(!1),[fe,be]=r(),[ve,ye]=r(!1),[ge,he]=r(""),[Oe,_e]=r(L||""),je=o(L),[we,Ce]=r(""),[xe,Le]=r(""),Se=o(S||d()),{labelId:Pe}=h({id:Se.current,label:k}),ke=o(null),De=o(!1),Ae=l(((e,t)=>({target:j(_({},P&&{name:P},S&&{id:S}),{value:e}),selectionConfirmed:t})),[P,S]),Ee=l(((e,t)=>{E&&E(Ae(e,t))}),[E,Ae]),Be=l(((e,t)=>{_e((()=>{var r;const o=e.trimStart(),l=(i=o,a=D,n.Children.toArray(a).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==i?void 0:i.toLowerCase()))})));var i,a;const s=t&&!e.length;return!l||s||l.props.disabled?(he(e),Ee("",!1),""):(o.length&&Ee(l.props.value,!1),t?(he(e),l.props.value):(o.length&&(null===(r=l.props.text)||void 0===r?void 0:r.toLowerCase().startsWith(o.toLowerCase()))?he(l.props.text):he(e),Ce(l.props.value),l.props.value))}))}),[D,Ee]),Fe=l(((e,t=!1)=>{var r;const o=n.Children.toArray(D).find((t=>n.isValidElement(t)&&b(t,e)));o&&void 0!==o.props.text?(t||(null===(r=o.props.text)||void 0===r?void 0:r.toLowerCase().startsWith(null==xe?void 0:xe.toLowerCase().trim())))&&he(o.props.text):he(xe||"")}),[D,xe]),Me=l((e=>{const t=e.target.value,{inputType:n}=e.nativeEvent;Be(t,"deleteContentBackward"===n||"deleteContentForward"===n||"delete"===n),Le(t),ye(!0)}),[Be]),Te=l((e=>{Le((t=>(null==t?void 0:t.length)===(null==ge?void 0:ge.length)-1&&e===ge.slice(-1)?ge:t))}),[ge]),Ie=l((e=>{const{key:t}=e;M&&M(e),G||(!e.defaultPrevented&&y(t)&&(e.preventDefault(),ye(!0)),Te(t))}),[Te,M,G]),Ve=l((e=>{const t=ce.current&&!ce.current.contains(e.target),n=ue.current&&!ue.current.contains(e.target);de.current=!1,t&&n&&(Fe(L,!0),ye(!1))}),[Fe,L]);i((()=>{_e((e=>(L&&e!==L&&Fe(L),L))),Ce(L)}),[L,E,D]);const He=g(A);i((()=>{ve?He&&He():Le("")}),[He,ve]),i((()=>{const e=void 0!==W;a(!e||e&&K,"onListAction prop required when using listActionButton prop")}),[W,K]);const We=o(!0);i((()=>{We.current&&Fe(Oe),"object"==typeof L&&"object"==typeof je.current?v(L,je.current)||(Fe(L),je.current=L):Fe(L)}),[L,D]);const qe=g(B);i((()=>{qe&&!We.current&&qe(xe)}),[qe,xe]),i((()=>{We.current=!1}),[]),i((()=>{const e="click";return window.addEventListener(e,Ve),function(){window.removeEventListener(e,Ve)}}),[Ve]),i((()=>{const e=null==xe?void 0:xe.trimStart(),t=null==ge?void 0:ge.toLowerCase().startsWith(e.toLowerCase());!z&&!G&&fe&&e.length&&(null==ge?void 0:ge.length)>e.length&&t&&(fe.selectionStart=e.length)}),[ge,xe,fe,z,G]);const Ke=l((e=>{const{id:t,text:n,value:r,selectionType:o,selectionConfirmed:l}=e;he(n),Ee(r,!!l),ae(t),"navigationKey"!==o&&(De.current=!!V,ye(!1),null==fe||fe.focus(),null==fe||fe.select(),De.current=!1)}),[fe,Ee,V]),Re=l((()=>{ye(!1),Fe(Oe,!0)}),[Oe,Fe]);function ze(e){de.current=!0,"input"===e.target.dataset.element&&(me.current=!0)}i((()=>()=>{ke.current&&clearTimeout(ke.current)}),[]);const Ge=l((e=>{e&&(be(e),O&&("function"==typeof O?O(e):O.current=e))}),[O]);let Je;switch(Z){case"top":Je="top-end";break;case"bottom":Je="bottom-end";break;default:Je=Z}const Ne={ref:ue,id:se.current,labelId:Pe,anchorElement:(null==fe?void 0:fe.parentElement)||void 0,onSelect:Ke,onSelectListClose:Re,onMouseDown:function(){de.current=!0},filterText:xe.trim(),highlightedValue:we,noResultsMessage:H,listActionButton:W,listMaxHeight:q,onListAction:function(){ye(!1),null==K||K()},isLoading:R,onListScrollBottom:J,tableHeader:N,multiColumn:Q,listPlacement:void 0!==oe?Je:Z,flipEnabled:$,isOpen:ve,enableVirtualScroll:ee,virtualScrollOverscan:te,listWidth:oe},Qe=e(ne?f:w,j(_({},Ne),{children:D})),Ue=s(le);return t(m,j(_({hasTextCursor:!0,readOnly:G,disabled:z,"data-component":"filterable-select","data-role":X,"data-element":U,isOpen:ve},Ue),{children:[e("div",{ref:ce,children:e(u,j(_({ref:Ge,activeDescendantId:ie,ariaLabel:C,ariaLabelledby:x,labelId:k?Pe:void 0,"aria-controls":se.current,isOpen:ve,hasTextCursor:!0},j(_({id:Se.current,name:P,label:k,disabled:z,readOnly:G,selectedValue:Oe,formattedValue:ge,onClick:function(e){de.current=!1,F&&F(e),ye(!0)},iconOnClick:function(e){de.current=!1,F&&F(e),ye((e=>!e))},iconOnMouseDown:ze,onFocus:function(e){const t=()=>null==T?void 0:T(e);if(V){if(ke.current&&clearTimeout(ke.current),De.current)return;ke.current=setTimeout((()=>{ye((e=>!(!e&&(T&&!pe.current&&(t(),pe.current=!0),de.current&&!me.current))))}))}else T&&!pe.current&&(t(),pe.current=!0)},onBlur:function(e){me.current=!1,de.current||(pe.current=!1,I&&I(e))},onKeyDown:Ie,onChange:Me,onMouseDown:ze,tooltipPosition:Y,required:re},c(le)),{"data-component":void 0})),{onChange:Me,value:ge}))}),Qe]}))}));export{C as FilterableSelect,C as default};

package/esm/components/select/multi-select/multi-select.component.d.ts

@@ -11,8 +11,6 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
     size?: "small" | "medium" | "large";
     /** Child components (such as Option or OptionRow) for the SelectList */
     children: React.ReactNode;
-    /** The default selected value(s), when the component is operating in uncontrolled mode */
-    defaultValue?: string[] | Record<string, unknown>[];
     /** If true the loader animation is displayed in the option list */
     isLoading?: boolean;
     /** When true component will work in multi column mode.
@@ -33,8 +31,8 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
      * Works only in multiColumn mode
      */
     tableHeader?: React.ReactNode;
-    /** The selected value(s), when the component is operating in controlled mode */
-    value?: string[] | Record<string, unknown>[];
+    /** The selected value(s) */
+    value: string[] | Record<string, unknown>[];
     /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Maximum list height - defaults to 180 */
@@ -53,7 +51,7 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
      * Only used if the `enableVirtualScroll` prop is set. */
     virtualScrollOverscan?: number;
     /** Specify a callback triggered on change */
-    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
     /** Override the default width of the list element. Number passed is converted into pixel value */
     listWidth?: number;
 }

package/esm/components/select/multi-select/multi-select.component.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useState as n,useRef as l,useCallback as o,useMemo as i,useEffect as a}from"react";import c from"invariant";import"../../../style/utils/filter-styled-system-padding-props.js";import u from"../../../style/utils/filter-styled-system-margin-props.js";import s from"../../../style/utils/filter-out-styled-system-spacing-props.js";import d from"../__internal__/select-textbox/select-textbox.component.js";import p from"../../../__internal__/utils/helpers/guid/index.js";import m from"../__internal__/utils/with-filter.hoc.js";import f from"../__internal__/select-list/select-list.component.js";import{StyledSelectPillContainer as b,StyledSelectMultiSelect as v,StyledAccessibilityLabelContainer as h}from"./multi-select.style.js";import{Pill as y}from"../../pill/pill.component.js";import g from"../__internal__/utils/is-expected-option.js";import O from"../__internal__/utils/is-expected-value.js";import _ from"../__internal__/utils/is-navigation-key.js";import j from"../../../__internal__/utils/logger/index.js";import{useStableCallback as w}from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import C from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";function x(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function P(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){x(e,t,r[t])}))}return e}function S(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 k=!1;const D=m(f),L=r.forwardRef(((m,f)=>{var{"aria-label":x,"aria-labelledby":L,value:E,defaultValue:V,id:I,label:M,name:T,disabled:B,readOnly:F,children:H,onOpen:q,onFilterChange:z,onChange:A,onClick:K,onFocus:R,onBlur:W,onKeyDown:$,openOnFocus:U=!1,noResultsMessage:G,placeholder:J,isLoading:N,onListScrollBottom:Q,tableHeader:X,multiColumn:Y,tooltipPosition:Z,size:ee="medium","data-element":te,"data-role":re,listPlacement:ne="bottom",listMaxHeight:le,flipEnabled:oe=!0,wrapPillText:ie=!0,enableVirtualScroll:ae,virtualScrollOverscan:ce,required:ue,listWidth:se}=m,de=function(e,t){if(null==e)return{};var r,n,l=function(e,t){if(null==e)return{};var r,n,l={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(l[r]=e[r]);return l}(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)&&(l[r]=e[r])}return l}(m,["aria-label","aria-labelledby","value","defaultValue","id","label","name","disabled","readOnly","children","onOpen","onFilterChange","onChange","onClick","onFocus","onBlur","onKeyDown","openOnFocus","noResultsMessage","placeholder","isLoading","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","size","data-element","data-role","listPlacement","listMaxHeight","flipEnabled","wrapPillText","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const[pe,me]=n(""),fe=l(p()),be=l(p()),ve=l(null),he=l(null),ye=l(!1),ge=l(!1),Oe=l(!1),_e=l(!1),je=l(!1),we=l(void 0!==E),[Ce,xe]=n(),[Pe,Se]=n(!1),[ke,De]=n(""),[Le,Ee]=n(E||V||[]),[Ve,Ie]=n(""),[Me,Te]=n(""),[Be,Fe]=n(),He=l(I||p()),{labelId:qe}=C({id:He.current,label:M}),ze=l(null),Ae=we.current?E:Le;!k&&(!we||!A&&V)&&(k=!0,j.deprecate("Uncontrolled behaviour in `Multi Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const Ke=o((()=>{Se((e=>(!e&&q&&q(),!0)))}),[q]),Re=o(((e,t)=>({target:S(P({},T&&{name:T},I&&{id:I}),{value:e}),selectionConfirmed:t})),[T,I]),We=o(((e,t)=>{const r=e(Ae);r.length!==(null==Ae?void 0:Ae.length)&&(null==A||A(Re(r,t))),we.current||Ee(e)}),[Re,A,Ae]),$e=o((e=>{const t=e.target.value,n=(l=t,o=H,r.Children.toArray(o).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==l?void 0:l.toLowerCase()))})));var l,o;n&&Ie(n.props.value),Te(t),De(t),Ke()}),[H,Ke]),Ue=o((e=>{ge.current=!0,We((t=>{if(!t.length)return t;const r=t.slice();return r.splice(e,1),r}),!0)}),[We]),Ge=o((e=>{const{key:t}=e,r="Backspace"===t||"Delete"===t;$&&$(e),F||(!e.defaultPrevented&&_(t)&&(e.preventDefault(),Ke()),!r||""!==Me&&""!==ke||Ue(-1))}),[$,F,Me,ke,Ke,Ue]),Je=i((()=>{var e;return Ae&&Ae.length?null===(e=r.Children.map(H,(e=>!(!r.isValidElement(e)||!Ae.includes(e.props.value))&&e.props.text)))||void 0===e?void 0:e.filter((e=>e)).reduce(((e,t)=>e?`${e}, ${t}`:t),""):null}),[H,Ae]),Ne=o((e=>{if(Oe.current=!1,!Pe)return;const t=ve.current&&!ve.current.contains(e.target),r=he.current&&!he.current.contains(e.target);t&&r&&!ge.current&&(De(""),Te(""),Ie(""),Se(!1)),ge.current=!1}),[Pe]),Qe=i((()=>{const t=!B&&!F;let n;return(null==Ae?void 0:Ae.length)?Ae.map(((l,o)=>{const i=r.Children.toArray(H).find((e=>r.isValidElement(e)&&g(e,l)));let a={};if(!i)return null;var c,u;r.isValidElement(i)&&(n=void 0!==(null==i||null===(c=i.props.value)||void 0===c?void 0:c.value)?null==i||null===(u=i.props.value)||void 0===u?void 0:u.value:null==i?void 0:i.props.value,a={title:i.props.text,fill:i.props.fill,borderColor:i.props.borderColor});const s=a.title||"",d=s+n||o;return e(b,{children:e(y,S(P({onDelete:t?()=>Ue(o):void 0,wrapText:ie},a),{children:s}))},d)})):""}),[H,B,F,Ae]);a((()=>{c(we.current===(void 0!==E),"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"),c(!we.current||we.current&&A,"onChange prop required when using a controlled input element")}),[E,A]),a((()=>{const e=null==E?void 0:E.length,t=null==Ae?void 0:Ae.length;Fe(e||t?" ":J)}),[E,Ae,J]),a((()=>{const e="click";return window.addEventListener(e,Ne),function(){window.removeEventListener(e,Ne)}}),[Ne]);const Xe=w(z),Ye=l(!0);function Ze(e){Oe.current=!0,"input"===e.target.dataset.element&&(_e.current=!0)}a((()=>{Xe&&!Ye.current&&Xe(Me)}),[Xe,Me]),a((()=>{Ye.current=!1}),[]);const et=o((e=>{const{value:t,selectionType:r,id:n,selectionConfirmed:l}=e;if("navigationKey"===r)return Ie(t),void me(n);"click"===r&&(ge.current=!0),De("");const o=-1!==(null==Ae?void 0:Ae.findIndex((e=>O(e,t))));null==Ce||Ce.focus(),Oe.current=!1,We((e=>o?e:[...e,t]),l)}),[Ce,Ae,We]),tt=o((()=>{Se(!1),Te("")}),[]),rt=o((e=>{e&&(xe(e),f&&("function"==typeof f?f(e):f.current=e))}),[f]);let nt;switch(ne){case"top":nt="top-end";break;case"bottom":nt="bottom-end";break;default:nt=ne}const lt=e(D,{ref:he,id:fe.current,labelId:qe,anchorElement:(null==Ce?void 0:Ce.parentElement)||void 0,onSelect:et,onSelectListClose:tt,onMouseDown:function(){Oe.current=!0},filterText:Me.trim(),highlightedValue:Ve,noResultsMessage:G,isLoading:N,onListScrollBottom:Q,tableHeader:X,multiColumn:Y,listPlacement:void 0!==se?nt:ne,listMaxHeight:le,flipEnabled:oe,multiselectValues:Ae,isOpen:Pe,enableVirtualScroll:ae,virtualScrollOverscan:ce,listWidth:se,children:H}),ot=u(de);return t(v,S(P({disabled:B,readOnly:F,hasTextCursor:!0,size:ee,"data-component":"multiselect","data-role":re,"data-element":te,isOpen:Pe},ot),{children:[t("div",{ref:ve,children:[e(h,{"data-element":"accessibility-label",id:be.current,children:Je}),e(d,P({ref:rt,accessibilityLabelId:be.current,activeDescendantId:pe,"aria-controls":fe.current,ariaLabel:x,ariaLabelledby:L,hasTextCursor:!0,isOpen:Pe,labelId:qe},S(P({id:He.current,name:T,disabled:B,label:M,readOnly:F,placeholder:Be,leftChildren:Qe,formattedValue:ke,selectedValue:Ae,onClick:function(e){if(Oe.current=!1,K&&K(e),!U||U&&!je.current){if(Pe)return Te(""),void Se(!1);null==q||q(),Se(!0)}else je.current=!1},onMouseDown:Ze,onFocus:function(e){const t=()=>null==R?void 0:R(e);U?(ze.current&&clearTimeout(ze.current),ze.current=setTimeout((()=>{Se((e=>!!e||(q&&q(),R&&!ye.current&&(t(),ye.current=!0),Oe.current&&!_e.current?(je.current=!1,!1):(_e.current&&(je.current=!0),!0))))}))):R&&!ye.current&&(t(),ye.current=!0)},onBlur:function(e){_e.current=!1,Oe.current||(ye.current=!1,W&&W(e))},iconOnClick:function(e){Oe.current=!1,K&&K(e),Se((e=>e?(Te(""),!1):(q&&q(),!0)))},iconOnMouseDown:Ze,onKeyDown:Ge,onChange:$e,tooltipPosition:Z,size:ee,required:ue},s(de)),{"data-component":void 0})))]}),lt]}))}));export{L as MultiSelect,L as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useState as n,useRef as l,useCallback as o,useMemo as i,useEffect as a}from"react";import"../../../style/utils/filter-styled-system-padding-props.js";import s from"../../../style/utils/filter-styled-system-margin-props.js";import c from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../__internal__/select-textbox/select-textbox.component.js";import d from"../../../__internal__/utils/helpers/guid/index.js";import p from"../__internal__/utils/with-filter.hoc.js";import m from"../__internal__/select-list/select-list.component.js";import{StyledSelectPillContainer as f,StyledSelectMultiSelect as b,StyledAccessibilityLabelContainer as v}from"./multi-select.style.js";import{Pill as y}from"../../pill/pill.component.js";import h from"../__internal__/utils/is-expected-option.js";import g from"../__internal__/utils/is-expected-value.js";import O from"../__internal__/utils/is-navigation-key.js";import{useStableCallback as _}from"../../../hooks/__internal__/useStableCallback/useStableCallback.js";import j from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.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 C(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 x(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 P=p(m),S=r.forwardRef(((p,m)=>{var{"aria-label":w,"aria-labelledby":S,value:k,id:D,label:L,name:E,disabled:V,readOnly:I,children:M,onOpen:T,onFilterChange:B,onChange:F,onClick:H,onFocus:z,onBlur:A,onKeyDown:K,openOnFocus:R=!1,noResultsMessage:q,placeholder:W,isLoading:$,onListScrollBottom:G,tableHeader:J,multiColumn:N,tooltipPosition:Q,size:U="medium","data-element":X,"data-role":Y,listPlacement:Z="bottom",listMaxHeight:ee,flipEnabled:te=!0,wrapPillText:re=!0,enableVirtualScroll:ne,virtualScrollOverscan:le,required:oe,listWidth:ie}=p,ae=function(e,t){if(null==e)return{};var r,n,l=function(e,t){if(null==e)return{};var r,n,l={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],t.indexOf(r)>=0||(l[r]=e[r]);return l}(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)&&(l[r]=e[r])}return l}(p,["aria-label","aria-labelledby","value","id","label","name","disabled","readOnly","children","onOpen","onFilterChange","onChange","onClick","onFocus","onBlur","onKeyDown","openOnFocus","noResultsMessage","placeholder","isLoading","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","size","data-element","data-role","listPlacement","listMaxHeight","flipEnabled","wrapPillText","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const[se,ce]=n(""),ue=l(d()),de=l(d()),pe=l(null),me=l(null),fe=l(!1),be=l(!1),ve=l(!1),ye=l(!1),he=l(!1),[ge,Oe]=n(),[_e,je]=n(!1),[we,Ce]=n(""),[xe,Pe]=n(""),[Se,ke]=n(""),[De,Le]=n(),Ee=l(D||d()),{labelId:Ve}=j({id:Ee.current,label:L}),Ie=l(null),Me=o((()=>{je((e=>(!e&&T&&T(),!0)))}),[T]),Te=o(((e,t)=>({target:x(C({},E&&{name:E},D&&{id:D}),{value:e}),selectionConfirmed:t})),[E,D]),Be=o(((e,t)=>{const r=e(k);r.length!==(null==k?void 0:k.length)&&F(Te(r,t))}),[Te,F,k]),Fe=o((e=>{const t=e.target.value,n=(l=t,o=M,r.Children.toArray(o).find((e=>{const{text:t}=e.props;return-1!==(null==t?void 0:t.toLowerCase().indexOf(null==l?void 0:l.toLowerCase()))})));var l,o;n&&Pe(n.props.value),ke(t),Ce(t),Me()}),[M,Me]),He=o((e=>{be.current=!0,Be((t=>{if(!t.length)return t;const r=t.slice();return r.splice(e,1),r}),!0)}),[Be]),ze=o((e=>{const{key:t}=e,r="Backspace"===t||"Delete"===t;K&&K(e),I||(!e.defaultPrevented&&O(t)&&(e.preventDefault(),Me()),!r||""!==Se&&""!==we||He(-1))}),[K,I,Se,we,Me,He]),Ae=i((()=>{var e;return k&&k.length?null===(e=r.Children.map(M,(e=>!(!r.isValidElement(e)||!k.includes(e.props.value))&&e.props.text)))||void 0===e?void 0:e.filter((e=>e)).reduce(((e,t)=>e?`${e}, ${t}`:t),""):null}),[M,k]),Ke=o((e=>{if(ve.current=!1,!_e)return;const t=pe.current&&!pe.current.contains(e.target),r=me.current&&!me.current.contains(e.target);t&&r&&!be.current&&(Ce(""),ke(""),Pe(""),je(!1)),be.current=!1}),[_e]),Re=i((()=>{const t=!V&&!I;let n;return(null==k?void 0:k.length)?k.map(((l,o)=>{const i=r.Children.toArray(M).find((e=>r.isValidElement(e)&&h(e,l)));let a={};if(!i)return null;var s,c;r.isValidElement(i)&&(n=void 0!==(null==i||null===(s=i.props.value)||void 0===s?void 0:s.value)?null==i||null===(c=i.props.value)||void 0===c?void 0:c.value:null==i?void 0:i.props.value,a={title:i.props.text,fill:i.props.fill,borderColor:i.props.borderColor});const u=a.title||"",d=u+n||o;return e(f,{children:e(y,x(C({onDelete:t?()=>He(o):void 0,wrapText:re},a),{children:u}))},d)})):""}),[M,V,I,k]);a((()=>{const e=null==k?void 0:k.length;Le(e?" ":W)}),[k,W]),a((()=>{const e="click";return window.addEventListener(e,Ke),function(){window.removeEventListener(e,Ke)}}),[Ke]);const qe=_(B),We=l(!0);function $e(e){if(ve.current=!1,H&&H(e),!R||R&&!he.current){if(_e)return ke(""),void je(!1);null==T||T(),je(!0)}else he.current=!1}function Ge(e){ve.current=!1,H&&H(e),je((e=>e?(ke(""),!1):(T&&T(),!0)))}function Je(e){ye.current=!1,ve.current||(fe.current=!1,A&&A(e))}function Ne(e){ve.current=!0,"input"===e.target.dataset.element&&(ye.current=!0)}function Qe(e){const t=()=>null==z?void 0:z(e);R?(Ie.current&&clearTimeout(Ie.current),Ie.current=setTimeout((()=>{je((e=>!!e||(T&&T(),z&&!fe.current&&(t(),fe.current=!0),ve.current&&!ye.current?(he.current=!1,!1):(ye.current&&(he.current=!0),!0))))}))):z&&!fe.current&&(t(),fe.current=!0)}a((()=>{qe&&!We.current&&qe(Se)}),[qe,Se]),a((()=>{We.current=!1}),[]);const Ue=o((e=>{const{value:t,selectionType:r,id:n,selectionConfirmed:l}=e;if("navigationKey"===r)return Pe(t),void ce(n);"click"===r&&(be.current=!0),Ce("");const o=-1!==(null==k?void 0:k.findIndex((e=>g(e,t))));null==ge||ge.focus(),ve.current=!1,Be((e=>o?e:[...e,t]),l)}),[ge,k,Be]),Xe=o((()=>{je(!1),ke("")}),[]),Ye=o((e=>{e&&(Oe(e),m&&("function"==typeof m?m(e):m.current=e))}),[m]);function Ze(){return x(C({id:Ee.current,name:E,disabled:V,label:L,readOnly:I,placeholder:De,leftChildren:Re,formattedValue:we,selectedValue:k,onClick:$e,onMouseDown:Ne,onFocus:Qe,onBlur:Je,iconOnClick:Ge,iconOnMouseDown:Ne,onKeyDown:ze,onChange:Fe,tooltipPosition:Q,size:U,required:oe},c(ae)),{"data-component":void 0})}let et;switch(Z){case"top":et="top-end";break;case"bottom":et="bottom-end";break;default:et=Z}const tt=e(P,{ref:me,id:ue.current,labelId:Ve,anchorElement:(null==ge?void 0:ge.parentElement)||void 0,onSelect:Ue,onSelectListClose:Xe,onMouseDown:function(){ve.current=!0},filterText:Se.trim(),highlightedValue:xe,noResultsMessage:q,isLoading:$,onListScrollBottom:G,tableHeader:J,multiColumn:N,listPlacement:void 0!==ie?et:Z,listMaxHeight:ee,flipEnabled:te,multiselectValues:k,isOpen:_e,enableVirtualScroll:ne,virtualScrollOverscan:le,listWidth:ie,children:M}),rt=s(ae);return t(b,x(C({disabled:V,readOnly:I,hasTextCursor:!0,size:U,"data-component":"multiselect","data-role":Y,"data-element":X,isOpen:_e},rt),{children:[t("div",{ref:pe,children:[e(v,{"data-element":"accessibility-label",id:de.current,children:Ae}),e(u,C({ref:Ye,accessibilityLabelId:de.current,activeDescendantId:se,"aria-controls":ue.current,ariaLabel:w,ariaLabelledby:S,hasTextCursor:!0,isOpen:_e,labelId:Ve,value:Ze().formattedValue},Ze()))]}),tt]}))}));export{S as MultiSelect,S as default};

package/esm/components/select/simple-select/simple-select.component.d.ts

@@ -13,8 +13,6 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     "aria-labelledby"?: string;
     /** Child components (such as Option or OptionRow) for the SelectList */
     children: React.ReactNode;
-    /** The default selected value(s), when the component is operating in uncontrolled mode */
-    defaultValue?: string | Record<string, unknown>;
     /** If true the loader animation is displayed in the option list */
     isLoading?: boolean;
     /** When true component will work in multi column mode.
@@ -33,8 +31,8 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     tableHeader?: React.ReactNode;
     /** If true the component input has no border and is transparent */
     transparent?: boolean;
-    /** The selected value(s), when the component is operating in controlled mode */
-    value?: string | Record<string, unknown>;
+    /** The selected value(s) */
+    value: string | Record<string, unknown>;
     /** [Legacy] Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Maximum list height - defaults to 180 */
@@ -53,7 +51,7 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     /** Flag to configure component as mandatory */
     isRequired?: boolean;
     /** Specify a callback triggered on change */
-    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
     /** Override the default width of the list element. Number passed is converted into pixel value */
     listWidth?: number;
 }

package/esm/components/select/simple-select/simple-select.component.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useRef as r,useState as o,useMemo as l,useCallback as i,useEffect as a}from"react";import c from"invariant";import"../../../style/utils/filter-styled-system-padding-props.js";import u from"../../../style/utils/filter-styled-system-margin-props.js";import s from"../../../style/utils/filter-out-styled-system-spacing-props.js";import d from"../select.style.js";import p from"../__internal__/select-textbox/select-textbox.component.js";import m from"../__internal__/select-list/select-list.component.js";import f from"../../../__internal__/utils/helpers/guid/index.js";import b from"../__internal__/utils/get-next-child-by-text.js";import y from"../__internal__/utils/is-expected-option.js";import O from"../__internal__/utils/is-navigation-key.js";import v from"../../../__internal__/utils/logger/index.js";import g from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";function w(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(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){w(e,t,n[t])}))}return e}function _(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 j=!1;const x=n.forwardRef(((w,x)=>{var{"aria-describedby":P,"aria-label":S,"aria-labelledby":k,value:C,defaultValue:D,id:E,label:L,name:I,disabled:V,readOnly:T,children:B,transparent:H,openOnFocus:K=!1,onOpen:F,onChange:M,onClick:q,onFocus:A,onKeyDown:W,onBlur:R,isLoading:U,listMaxHeight:z,onListScrollBottom:G,tableHeader:J,multiColumn:N,tooltipPosition:Q,"data-element":X,"data-role":Y,listPlacement:Z="bottom",flipEnabled:$=!0,enableVirtualScroll:ee,virtualScrollOverscan:te,required:ne,listWidth:re}=w,oe=function(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},l=Object.keys(e);for(r=0;r<l.length;r++)n=l[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(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)&&(o[n]=e[n])}return o}(w,["aria-describedby","aria-label","aria-labelledby","value","defaultValue","id","label","name","disabled","readOnly","children","transparent","openOnFocus","onOpen","onChange","onClick","onFocus","onKeyDown","onBlur","isLoading","listMaxHeight","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","data-element","data-role","listPlacement","flipEnabled","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const le=r(f()),ie=r(null),ae=r(null),ce=r(void 0),ue=r(),se=r(void 0!==C),de=r(),pe=r(),me=r(),[fe,be]=o(),[ye,Oe]=o(!1),[ve,ge]=o(""),[we,he]=o(""),[_e,je]=o(C||D||""),xe=r(E||f()),{labelId:Pe}=g({id:xe.current,label:L}),Se=r(void 0);!j&&(!se||!M&&D)&&(j=!0,v.deprecate("Uncontrolled behaviour in `Simple Select` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const ke=l((()=>n.Children.toArray(B)),[B]),Ce=i(((e,t=!1)=>({target:_(h({},I&&{name:I},E&&{id:E}),{value:e}),selectionConfirmed:t})),[I,E]),De=i((e=>{je((t=>{const r=ke.findIndex((e=>n.isValidElement(e)&&y(e,t))),o=b(e,ke,r);return o?(null==M||M(Ce(o.props.value)),se.current?t:(he(o.props.text),o.props.value)):t}))}),[ke,Ce,M]),Ee=i((e=>{if(de.current){const t=me.current+e;me.current=t,De(t),window.clearTimeout(ce.current)}else me.current=e,De(e);de.current=!0,window.clearTimeout(ce.current),ce.current=window.setTimeout((()=>{de.current=!1,me.current=""}),500)}),[De]),Le=i((e=>{const{key:t}=e;null==W||W(e),T||(" "===t||O(t)?(e.preventDefault(),Oe((e=>(e||null==F||F(),!0)))):1!==t.length||e.metaKey||e.ctrlKey||Ee(t))}),[Ee,W,F,T]),Ie=i((e=>{const t=ie.current&&!ie.current.contains(e.target),n=ae.current&&!ae.current.contains(e.target);ue.current=!1,t&&n&&!pe.current&&Oe(!1),pe.current=!1}),[]);function Ve(e){ue.current=!1,null==q||q(e),Oe((e=>!e&&(null==F||F(),!0)))}a((()=>{c(se.current===(void 0!==C),"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"),c(!se.current||se.current&&M,"onChange prop required when using a controlled input element"),se.current&&je(C)}),[C,M]),a((()=>{const e=ke.find((e=>y(e,_e)));let t="";e&&(t=e.props.text),he(t)}),[_e,ke]),a((()=>{const e="click";return window.addEventListener(e,Ie),function(){window.removeEventListener(e,Ie)}}),[Ie]),a((()=>function(){window.clearTimeout(ce.current),window.clearTimeout(Se.current)}),[]);const Te=i((()=>{Oe(!1)}),[]),Be=i((e=>{e&&(be(e),x&&("function"==typeof x?x(e):x.current=e))}),[x]);let He;switch(Z){case"top":He="top-end";break;case"bottom":He="bottom-end";break;default:He=Z}const Ke=e(m,{ref:ae,id:le.current,labelId:Pe,anchorElement:(null==fe?void 0:fe.parentElement)||void 0,onSelect:e=>{const{text:t,value:n,selectionType:r,id:o,selectionConfirmed:l}=e,i="click"===r;!function(e,t,n){se.current||(je(e),he(t)),null==M||M(Ce(e,n))}(n,t,l),ge(o),"navigationKey"!==r&&Oe(!1),i&&(pe.current=!0,null==fe||fe.focus())},onMouseDown:function(){ue.current=!0},onSelectListClose:Te,highlightedValue:_e,listMaxHeight:z,isLoading:U,onListScrollBottom:G,tableHeader:J,multiColumn:N,listPlacement:void 0!==re?He:Z,flipEnabled:$,isOpen:ye,enableVirtualScroll:ee,virtualScrollOverscan:te,listWidth:re,children:B}),Fe=u(oe);return t(d,_(h({transparent:H,disabled:V,readOnly:T,"data-component":"simple-select","data-role":Y,"data-element":X,isOpen:ye},Fe),{children:[e("div",{ref:ie,children:e(p,h({ref:Be,ariaLabel:S,"aria-controls":le.current,activeDescendantId:ve,ariaLabelledby:k,"aria-describedby":P,isOpen:ye},_(h({id:xe.current,name:I,disabled:V,readOnly:T,selectedValue:_e,formattedValue:we,onClick:Ve,iconOnClick:function(e){Ve(e)},label:L,labelId:Pe,onMouseDown:function(){ue.current=!0},onFocus:function(e){pe.current||(null==A||A(e),ue.current?ue.current=!1:K&&(window.clearTimeout(Se.current),Se.current=window.setTimeout((()=>{Oe((e=>(e||null==F||F(),!0)))}))))},onKeyDown:Le,onBlur:function(e){ue.current||null==R||R(e)},tooltipPosition:Q,required:ne,transparent:H},s(oe)),{"data-component":void 0})))}),Ke]}))}));export{x as SimpleSelect,x as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import n,{useRef as r,useState as l,useMemo as o,useCallback as i,useEffect as a}from"react";import"../../../style/utils/filter-styled-system-padding-props.js";import c from"../../../style/utils/filter-styled-system-margin-props.js";import s from"../../../style/utils/filter-out-styled-system-spacing-props.js";import u from"../select.style.js";import d from"../__internal__/select-textbox/select-textbox.component.js";import p from"../__internal__/select-list/select-list.component.js";import m from"../../../__internal__/utils/helpers/guid/index.js";import b from"../__internal__/utils/get-next-child-by-text.js";import f from"../__internal__/utils/is-expected-option.js";import y from"../__internal__/utils/is-navigation-key.js";import O from"../../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";function g(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function w(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){g(e,t,n[t])}))}return e}function v(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}const h=n.forwardRef(((g,h)=>{var{"aria-describedby":j,"aria-label":_,"aria-labelledby":P,value:x,id:S,label:k,name:C,disabled:D,readOnly:E,children:L,transparent:I,openOnFocus:T=!1,onOpen:V,onChange:B,onClick:H,onFocus:K,onKeyDown:F,onBlur:M,isLoading:q,listMaxHeight:A,onListScrollBottom:W,tableHeader:R,multiColumn:z,tooltipPosition:G,"data-element":J,"data-role":N,listPlacement:Q="bottom",flipEnabled:U=!0,enableVirtualScroll:X,virtualScrollOverscan:Y,required:Z,listWidth:$}=g,ee=function(e,t){if(null==e)return{};var n,r,l=function(e,t){if(null==e)return{};var n,r,l={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(l[n]=e[n]);return l}(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)&&(l[n]=e[n])}return l}(g,["aria-describedby","aria-label","aria-labelledby","value","id","label","name","disabled","readOnly","children","transparent","openOnFocus","onOpen","onChange","onClick","onFocus","onKeyDown","onBlur","isLoading","listMaxHeight","onListScrollBottom","tableHeader","multiColumn","tooltipPosition","data-element","data-role","listPlacement","flipEnabled","enableVirtualScroll","virtualScrollOverscan","required","listWidth"]);const te=r(m()),ne=r(null),re=r(null),le=r(void 0),oe=r(),ie=r(),ae=r(),ce=r(),[se,ue]=l(),[de,pe]=l(!1),[me,be]=l(""),[fe,ye]=l(""),[Oe,ge]=l(x),we=r(S||m()),{labelId:ve}=O({id:we.current,label:k}),he=r(void 0),je=o((()=>n.Children.toArray(L)),[L]),_e=i(((e,t=!1)=>({target:v(w({},C&&{name:C},S&&{id:S}),{value:e}),selectionConfirmed:t})),[C,S]),Pe=i((e=>{const t=je.findIndex((e=>n.isValidElement(e)&&f(e,Oe))),r=b(e,je,t);r&&B(_e(r.props.value))}),[je,_e,B,Oe]),xe=i((e=>{if(ie.current){const t=ce.current+e;ce.current=t,Pe(t),window.clearTimeout(le.current)}else ce.current=e,Pe(e);ie.current=!0,window.clearTimeout(le.current),le.current=window.setTimeout((()=>{ie.current=!1,ce.current=""}),500)}),[Pe]),Se=i((e=>{const{key:t}=e;null==F||F(e),E||(" "===t||y(t)?(e.preventDefault(),pe((e=>(e||null==V||V(),!0)))):1!==t.length||e.metaKey||e.ctrlKey||xe(t))}),[xe,F,V,E]),ke=i((e=>{const t=ne.current&&!ne.current.contains(e.target),n=re.current&&!re.current.contains(e.target);oe.current=!1,t&&n&&!ae.current&&pe(!1),ae.current=!1}),[]);function Ce(e){oe.current=!1,null==H||H(e),pe((e=>!e&&(null==V||V(),!0)))}a((()=>{ge(x)}),[x]),a((()=>{const e=je.find((e=>f(e,Oe)));let t="";e&&(t=e.props.text),ye(t)}),[Oe,je]),a((()=>{const e="click";return window.addEventListener(e,ke),function(){window.removeEventListener(e,ke)}}),[ke]),a((()=>function(){window.clearTimeout(le.current),window.clearTimeout(he.current)}),[]);const De=i((()=>{pe(!1)}),[]),Ee=i((e=>{e&&(ue(e),h&&("function"==typeof h?h(e):h.current=e))}),[h]);let Le;switch(Q){case"top":Le="top-end";break;case"bottom":Le="bottom-end";break;default:Le=Q}const Ie=e(p,{ref:re,id:te.current,labelId:ve,anchorElement:(null==se?void 0:se.parentElement)||void 0,onSelect:e=>{const{text:t,value:n,selectionType:r,id:l,selectionConfirmed:o}=e,i="click"===r;!function(e,t,n){null==B||B(_e(e,n))}(n,0,o),be(l),"navigationKey"!==r&&pe(!1),i&&(ae.current=!0,null==se||se.focus())},onMouseDown:function(){oe.current=!0},onSelectListClose:De,highlightedValue:Oe,listMaxHeight:A,isLoading:q,onListScrollBottom:W,tableHeader:R,multiColumn:z,listPlacement:void 0!==$?Le:Q,flipEnabled:U,isOpen:de,enableVirtualScroll:X,virtualScrollOverscan:Y,listWidth:$,children:L}),Te=c(ee);return t(u,v(w({transparent:I,disabled:D,readOnly:E,"data-component":"simple-select","data-role":N,"data-element":J,isOpen:de},Te),{children:[e("div",{ref:ne,children:e(d,v(w({ref:Ee,ariaLabel:_,"aria-controls":te.current,activeDescendantId:me,ariaLabelledby:P,"aria-describedby":j,isOpen:de,value:fe},v(w({id:we.current,name:C,disabled:D,readOnly:E,selectedValue:Oe,formattedValue:fe,onClick:Ce,iconOnClick:function(e){Ce(e)},label:k,labelId:ve,onMouseDown:function(){oe.current=!0},onFocus:function(e){ae.current||(null==K||K(e),oe.current?oe.current=!1:T&&(window.clearTimeout(he.current),he.current=window.setTimeout((()=>{pe((e=>(e||null==V||V(),!0)))}))))},onKeyDown:Se,onBlur:function(e){oe.current||null==M||M(e)},tooltipPosition:G,required:Z,transparent:I},s(ee)),{"data-component":void 0})),{onChange:()=>{}}))}),Ie]}))}));export{h as SimpleSelect,h as default};

package/esm/components/simple-color-picker/simple-color/simple-color.component.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
 export interface SimpleColorProps {
+    /** the value of the label to pass to screen reader software */
+    "aria-label"?: string;
     /** the value of the color that is represented by this SimpleColor */
     value: string;
     /** the input name */

package/esm/components/simple-color-picker/simple-color/simple-color.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as o}from"react";import n from"../../../__internal__/utils/helpers/guid/index.js";import c from"../../../__internal__/utils/helpers/tags/tags.js";import{StyledSimpleColor as l,StyledSimpleColorInput as i,StyledColorSampleBox as a,StyledTickIcon as u}from"./simple-color.style.js";function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){s(e,r,t[r])}))}return e}const f=t.forwardRef(((t,s)=>{const{onChange:f,onBlur:m,onMouseDown:O,value:b,name:y,checked:d=!1,id:j,defaultChecked:g,className:h}=t,w=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},c=Object.keys(e);for(o=0;o<c.length;o++)t=c[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;o<c.length;o++)t=c[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(t,["onChange","onBlur","onMouseDown","value","name","checked","id","defaultChecked","className"]),{current:P}=o(j||n());return e(l,(v=p({className:h},c("simple-color",t)),k=null!=(k={children:[r(i,p({onChange:f,onBlur:m,onMouseDown:O,checked:d,name:y,type:"radio",role:"radio",value:b,ref:s,id:P,defaultChecked:g},w)),r(a,{color:b,children:d&&r(u,{color:b,type:"tick"})})]})?k:{},Object.getOwnPropertyDescriptors?Object.defineProperties(v,Object.getOwnPropertyDescriptors(k)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(k)).forEach((function(e){Object.defineProperty(v,e,Object.getOwnPropertyDescriptor(k,e))})),v));var v,k}));f.displayName="SimpleColor";export{f as SimpleColor,f as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import t,{useRef as o}from"react";import n from"../../../__internal__/utils/helpers/guid/index.js";import l from"../../../__internal__/utils/helpers/tags/tags.js";import{StyledSimpleColor as c,StyledSimpleColorInput as a,StyledColorSampleBox as i,StyledTickIcon as s}from"./simple-color.style.js";function u(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function p(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},o=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),o.forEach((function(r){u(e,r,t[r])}))}return e}const f=t.forwardRef(((t,u)=>{const{onChange:f,onBlur:b,onMouseDown:m,value:O,name:y,checked:j=!1,id:d,className:g,"aria-label":h}=t,w=function(e,r){if(null==e)return{};var t,o,n=function(e,r){if(null==e)return{};var t,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||(n[t]=e[t]);return n}(e,r);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)t=l[o],r.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}(t,["onChange","onBlur","onMouseDown","value","name","checked","id","className","aria-label"]),{current:P}=o(d||n());return e(c,(v=p({className:g},l("simple-color",t)),_=null!=(_={children:[r(a,p({onChange:f,onBlur:b,onMouseDown:m,checked:j,name:y,"aria-label":h,type:"radio",role:"radio",value:O,ref:u,id:P},w)),r(i,{color:O,children:j&&r(s,{color:O,type:"tick"})})]})?_:{},Object.getOwnPropertyDescriptors?Object.defineProperties(v,Object.getOwnPropertyDescriptors(_)):function(e){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(e);r.push.apply(r,t)}return r}(Object(_)).forEach((function(e){Object.defineProperty(v,e,Object.getOwnPropertyDescriptor(_,e))})),v));var v,_}));f.displayName="SimpleColor";export{f as SimpleColor,f as default};

package/esm/components/simple-color-picker/simple-color-picker.component.d.ts

@@ -14,7 +14,7 @@ export interface SimpleColorPickerProps extends ValidationProps, MarginProps, Ta
     /** The name to apply to the input. */
     name: string;
     /** Prop for `onChange` events */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
     /** Prop for `onKeyDown` events */
     onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => void;
     /** Prop for `onBlur` events */
@@ -24,7 +24,7 @@ export interface SimpleColorPickerProps extends ValidationProps, MarginProps, Ta
     /** When true, validation icon will be placed on legend instead of being placed by the input */
     validationOnLegend?: boolean;
     /** The currently selected color. */
-    value?: string;
+    value: string;
 }
 export interface SimpleColorPickerRef {
     /** List of color input HTML refs */

package/esm/components/simple-color-picker/simple-color-picker.component.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useMemo as n,useRef as o,useState as i,useImperativeHandle as l,useCallback as a}from"react";import u from"invariant";import s from"../../__internal__/utils/helpers/events/events.js";import p from"../../__internal__/utils/helpers/tags/tags.js";import c from"../../__internal__/fieldset/fieldset.component.js";import{SimpleColor as d}from"./simple-color/simple-color.component.js";import m from"../../__internal__/radio-button-mapper/radio-button-mapper.component.js";import{StyledContent as f,StyledColorOptions as y}from"./simple-color-picker.style.js";import{ValidationIcon as g}from"../../__internal__/validations/validation-icon.component.js";import{InputGroupContext as b}from"../../__internal__/input-behaviour/input-group-behaviour.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import h from"../../style/utils/filter-styled-system-margin-props.js";import v from"../../__internal__/utils/logger/index.js";function O(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function j(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){O(e,t,r[t])}))}return e}function _(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 P=r.forwardRef(((O,P)=>{const{children:D,error:K,warning:k,info:C,name:S,legend:x,onChange:E,onBlur:A,onKeyDown:L,value:M,maxWidth:W=300,childWidth:R=58,validationOnLegend:q,required:B}=O,I=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(O,["children","error","warning","info","name","legend","onChange","onBlur","onKeyDown","value","maxWidth","childWidth","validationOnLegend","required"]),N=n((()=>!r.Children.toArray(D).find((e=>"string"==typeof e||r.isValidElement(e)&&"SimpleColor"!==e.type.displayName))),[D]);u(N,`SimpleColorPicker accepts only children of type \`${d.displayName}\`.`);const U=n((()=>r.Children.toArray(D).filter((e=>r.isValidElement(e)))),[D]),V=o(null),[F,T]=i(null),$=Math.floor(+W/+R),z=Math.ceil((null==U?void 0:U.length)/$);let G=$*z-(null==U?void 0:U.length),H=1,J=1;const Q=o([]),X=U.map(((e,t)=>{const n=1!==H;let o,i,l=!1;H+1===z&&G-$<0?(l=!0,G+=1):H+1!==z&&H!==z&&z>1&&(l=!0),J===$&&(J=0,H+=1),n&&(o=t-$),l&&(i=$+t);const a={ref:e=>{Q.current[t]=e},"data-up":n,"data-down":l,"data-item-up":o,"data-item-down":i,required:B};return J+=1,r.cloneElement(e,a)}));l(P,(()=>({gridItemRefs:Q.current})),[Q]);const Y=a((e=>X.findIndex((t=>e.getAttribute("value")===t.props.value))),[X]),Z=a((e=>{if(L&&L(e),![s.isLeftKey(e),s.isUpKey(e),s.isRightKey(e),s.isDownKey(e)].includes(!0))return;e.preventDefault();let t=null;const r=e.target;if(s.isUpKey(e)){if("true"!==r.getAttribute("data-up"))return;t=+r.getAttribute("data-item-up")}else if(s.isDownKey(e)){if("true"!==r.getAttribute("data-down"))return;t=+r.getAttribute("data-item-down")}if((s.isLeftKey(e)||s.isRightKey(e))&&(t=s.isLeftKey(e)?Y(r)-1:Y(r)+1,t<0?t=X.length-1:t>X.length-1&&(t=0)),null!==t){const e=Q.current[t];null==e||e.focus(),null==e||e.click()}}),[L,X,Y]),ee=e=>{e.preventDefault(),setTimeout((()=>{var t;const r=!(null==Q||null===(t=Q.current)||void 0===t?void 0:t.find((e=>e===document.activeElement)));A&&r&&A(e)}),5)},te=e=>{null!==F&&F===e.target?e.preventDefault():null!==F?(e.preventDefault(),T(e.target)):T(e.target)},re={error:K,warning:k,info:C};return w||E||(w=!0,v.deprecate("Uncontrolled behaviour in `Simple Color Picker` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.")),e(c,_(j({role:"radiogroup",legend:x,isRequired:B},q&&re,p("simple-color-picker",O),h(I)),{children:t(f,{children:[e(b.Consumer,{children:({onMouseEnter:t,onMouseLeave:r})=>e(y,_(j({maxWidth:W,childWidth:R,ref:V,onMouseEnter:t,onMouseLeave:r},re),{children:e(m,{name:S,value:M,onChange:E,onMouseDown:te,onKeyDown:Z,onBlur:ee,children:X})}))}),!q&&e(g,_(j({},re),{tooltipFlipOverrides:["top","bottom"]}))]})}))}));P.displayName="SimpleColorPicker";export{P as SimpleColorPicker,P as default};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import r,{useMemo as n,useRef as o,useState as i,useImperativeHandle as l,useCallback as a}from"react";import u from"invariant";import s from"../../__internal__/utils/helpers/events/events.js";import p from"../../__internal__/utils/helpers/tags/tags.js";import c from"../../__internal__/fieldset/fieldset.component.js";import{SimpleColor as d}from"./simple-color/simple-color.component.js";import m from"../../__internal__/radio-button-mapper/radio-button-mapper.component.js";import{StyledContent as f,StyledColorOptions as y}from"./simple-color-picker.style.js";import{ValidationIcon as g}from"../../__internal__/validations/validation-icon.component.js";import{InputGroupContext as h}from"../../__internal__/input-behaviour/input-group-behaviour.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import b from"../../style/utils/filter-styled-system-margin-props.js";function v(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function O(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){v(e,t,r[t])}))}return e}function j(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 w=r.forwardRef(((v,w)=>{const{children:_,error:P,warning:D,info:K,name:C,legend:E,onChange:S,onBlur:k,onKeyDown:x,value:A,maxWidth:L=300,childWidth:M=58,validationOnLegend:W,required:R}=v,q=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(v,["children","error","warning","info","name","legend","onChange","onBlur","onKeyDown","value","maxWidth","childWidth","validationOnLegend","required"]),B=n((()=>!r.Children.toArray(_).find((e=>"string"==typeof e||r.isValidElement(e)&&"SimpleColor"!==e.type.displayName))),[_]);u(B,`SimpleColorPicker accepts only children of type \`${d.displayName}\`.`);const I=n((()=>r.Children.toArray(_).filter((e=>r.isValidElement(e)))),[_]),N=o(null),[U,V]=i(null),F=Math.floor(+L/+M),T=Math.ceil((null==I?void 0:I.length)/F);let $=F*T-(null==I?void 0:I.length),z=1,G=1;const H=o([]),J=I.map(((e,t)=>{const n=1!==z;let o,i,l=!1;z+1===T&&$-F<0?(l=!0,$+=1):z+1!==T&&z!==T&&T>1&&(l=!0),G===F&&(G=0,z+=1),n&&(o=t-F),l&&(i=F+t);const a={ref:e=>{H.current[t]=e},"data-up":n,"data-down":l,"data-item-up":o,"data-item-down":i,required:R};return G+=1,r.cloneElement(e,a)}));l(w,(()=>({gridItemRefs:H.current})),[H]);const Q=a((e=>J.findIndex((t=>e.getAttribute("value")===t.props.value))),[J]),X=a((e=>{if(x&&x(e),![s.isLeftKey(e),s.isUpKey(e),s.isRightKey(e),s.isDownKey(e)].includes(!0))return;e.preventDefault();let t=null;const r=e.target;if(s.isUpKey(e)){if("true"!==r.getAttribute("data-up"))return;t=+r.getAttribute("data-item-up")}else if(s.isDownKey(e)){if("true"!==r.getAttribute("data-down"))return;t=+r.getAttribute("data-item-down")}if((s.isLeftKey(e)||s.isRightKey(e))&&(t=s.isLeftKey(e)?Q(r)-1:Q(r)+1,t<0?t=J.length-1:t>J.length-1&&(t=0)),null!==t){const e=H.current[t];null==e||e.focus(),null==e||e.click()}}),[x,J,Q]),Y=e=>{e.preventDefault(),setTimeout((()=>{var t;const r=!(null==H||null===(t=H.current)||void 0===t?void 0:t.find((e=>e===document.activeElement)));k&&r&&k(e)}),5)},Z=e=>{null!==U&&U===e.target?e.preventDefault():null!==U?(e.preventDefault(),V(e.target)):V(e.target)},ee={error:P,warning:D,info:K};return e(c,j(O({role:"radiogroup",legend:E,isRequired:R},W&&ee,p("simple-color-picker",v),b(q)),{children:t(f,{children:[e(h.Consumer,{children:({onMouseEnter:t,onMouseLeave:r})=>e(y,j(O({maxWidth:L,childWidth:M,ref:N,onMouseEnter:t,onMouseLeave:r},ee),{children:e(m,{name:C,value:A,onChange:S,onMouseDown:Z,onKeyDown:X,onBlur:Y,children:J})}))}),!W&&e(g,j(O({},ee),{tooltipFlipOverrides:["top","bottom"]}))]})}))}));w.displayName="SimpleColorPicker";export{w as SimpleColorPicker,w as default};

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

@@ -2,11 +2,9 @@ import React from "react";
 import { MarginProps } from "styled-system";
 import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface SwitchProps extends CommonCheckableInputProps, MarginProps, TagProps {
+export interface SwitchProps extends Omit<CommonCheckableInputProps, "defaultChecked">, MarginProps, TagProps {
     /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
-    /** Set the default value of the Switch if component is meant to be used as uncontrolled */
-    defaultChecked?: boolean;
     /** When true label is inline */
     labelInline?: boolean;
     /** Triggers loading animation */
@@ -25,6 +23,10 @@ export interface SwitchProps extends CommonCheckableInputProps, MarginProps, Tag
     validationMessagePositionTop?: boolean;
     /** Label width, as a percentage, when labelInline is true */
     labelWidth?: number;
+    /** OnChange event handler */
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Checked state of the input */
+    checked: 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 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 g from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import f,{ErrorBorder as h}from"./switch.style.js";import v from"./__internal__/switch-slider.component.js";import k 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 D=i.forwardRef(((i,_)=>{var{autoFocus:D,id:P,label:x,onChange:I,onBlur:S,onFocus:H,value:L,checked:F,defaultChecked:z,disabled:C,loading:q,reverse:A=!0,required:T,validationOnLabel:$=!1,labelInline:M=!1,labelSpacing:R,labelHelp:W,labelWidth:E,fieldHelpInline:U,size:Y="small",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,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","validationOnLabel","labelInline","labelSpacing","labelHelp","labelWidth","fieldHelpInline","size","name","adaptiveLabelBreakpoint","tooltipPosition","error","warning","info","data-element","data-role","helpAriaLabel","isDarkBackground","validationMessagePositionTop"]);const te=void 0!==F,{validationRedesignOptIn:oe}=t(u),ae=o(`${k()}-label`),le=o(`${k()}-hint`),de=o(`${k()}-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=g(V);let be=M;V&&(be=ue);const me=!(!M||A)||$,ge=y(ie),fe=O({"data-component":"switch","data-role":Z,"data-element":X,checked:te?F:se,isDarkBackground:re,fieldHelpInline:U,labelInline:be,labelSpacing:R,reverse:!A,size:Y},ge),he={checked:te?F:se,disabled:C,loading:q,isDarkBackground:re,size:Y,error:J,warning:K,info:Q,useValidationIcon:!oe&&!me&&!C},ve=j(O({autoFocus:D,error:J,warning:K,info:Q,disabled:C,loading:q,checked:te?F:se,label:x,labelHelp:W,labelWidth:E,fieldHelpInline:U,labelInline:be,labelSpacing:R,onBlur:S,isDarkBackground:re,onFocus:H,onChange:te?I:pe,id:P,name:N,value:L,type:"checkbox",role:"switch",reverse:!A,validationOnLabel:me&&!C,ref:_,required:T},ie),{"data-component":void 0}),ke=O({"data-component":"switch","data-role":Z,"data-element":X,checked:te?F:se,labelInline:be,isDarkBackground:re,size:Y,reverse:!A,validationRedesignOptIn:oe},ge),we={checked:te?F:se,disabled:C,loading:q,isDarkBackground:re,size:Y,error:J,warning:K},ye=O({autoFocus:D,error:!!J,warning:K,disabled:C,loading:q,checked:te?F:se,onBlur:S,isDarkBackground:re,onFocus:H,onChange:te?I:pe,id:P,name:N,value:L,type:"checkbox",role:"switch",ref:_,required:T},ie),_e=J||K,Oe=[W&&le.current,_e&&de.current].filter(Boolean).join(" ");if(!oe)return e(r,{children:e(p,{helpAriaLabel:ee,tooltipPosition:G,children:e(f,j(O({},fe),{children:e(s,j(O({},ve),{children:e(v,O({},he))}))}))})});const je=J||K?M?3:0:M?1:0,Be=M?"row":"column",De=M?"row-reverse":"column",Pe=!M||J||K||Q?"":"center";return n(r,{children:[e(f,j(O({},ke),{children:n(d,{"data-role":"field-reverse-wrapper",display:"flex",alignItems:J||K?"flex-start":void 0,flexDirection:A?Be:De,width:M?"100%":"auto",children:[n(d,j(O({"data-role":"label-wrapper",alignSelf:Pe},E&&{width:`${E}%`}),{children:[e(c,{isDarkBackground:re,labelId:ae.current,disabled:C,isRequired:T,children:x}),W&&e(d,{"data-role":"hint-text-wrapper",mb:M?0:1,children:e(w,{"data-role":"hint-text",fontWeight:"400",id:le.current,isDarkBackground:re,marginTop:"8px",children:W})})]})),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:`${x&&ae.current}`,ariaDescribedBy:Oe},ye),{fieldHelp:M?void 0:ie.fieldHelp,children:e(v,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})]})]})]})})),M&&ie.fieldHelp&&e(d,{color:re?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",children:ie.fieldHelp})]})}));D.displayName="Switch";export{D as Switch,D as default};
+import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import i,{useContext as o,useRef as a}from"react";import{Box as t}from"../box/box.component.js";import l from"../../__internal__/checkable-input/checkable-input.component.js";import d from"../../__internal__/label/label.component.js";import{TooltipProvider as s}from"../../__internal__/tooltip-provider/index.js";import c from"../carbon-provider/__internal__/new-validation.context.js";import p from"../../__internal__/validation-message/validation-message.component.js";import u from"../../hooks/__internal__/useIsAboveBreakpoint/useIsAboveBreakpoint.js";import b,{ErrorBorder as m}from"./switch.style.js";import g from"./__internal__/switch-slider.component.js";import f from"../../__internal__/utils/helpers/guid/index.js";import{HintText as h}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import v from"../../style/utils/filter-styled-system-margin-props.js";function k(e,r,n){return r in e?Object.defineProperty(e,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[r]=n,e}function y(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){k(e,r,n[r])}))}return e}function w(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}const _=i.forwardRef(((i,k)=>{var{autoFocus:_,id:O,label:j,onChange:B,onBlur:D,onFocus:P,value:x,checked:I,disabled:S,loading:H,reverse:L=!0,required:F,validationOnLabel:z=!1,labelInline:q=!1,labelSpacing:A,labelHelp:T,labelWidth:$,fieldHelpInline:C,size:M="small",name:R,adaptiveLabelBreakpoint:W,tooltipPosition:E,error:U,warning:Y,info:N,"data-element":V,"data-role":G,helpAriaLabel:J,isDarkBackground:K=!1,validationMessagePositionTop:Q=!0}=i,X=function(e,r){if(null==e)return{};var n,i,o=function(e,r){if(null==e)return{};var n,i,o={},a=Object.keys(e);for(i=0;i<a.length;i++)n=a[i],r.indexOf(n)>=0||(o[n]=e[n]);return o}(e,r);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(i=0;i<a.length;i++)n=a[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","disabled","loading","reverse","required","validationOnLabel","labelInline","labelSpacing","labelHelp","labelWidth","fieldHelpInline","size","name","adaptiveLabelBreakpoint","tooltipPosition","error","warning","info","data-element","data-role","helpAriaLabel","isDarkBackground","validationMessagePositionTop"]);const{validationRedesignOptIn:Z}=o(c),ee=a(`${f()}-label`),re=a(`${f()}-hint`),ne=a(`${f()}-message`),ie=u(W);let oe=q;W&&(oe=ie);const ae=!(!q||L)||z,te=v(X),le=y({"data-component":"switch","data-role":G,"data-element":V,checked:I,isDarkBackground:K,fieldHelpInline:C,labelInline:oe,labelSpacing:A,reverse:!L,size:M},te),de={checked:I,disabled:S,loading:H,isDarkBackground:K,size:M,error:U,warning:Y,info:N,useValidationIcon:!Z&&!ae&&!S},se=w(y({autoFocus:_,error:U,warning:Y,info:N,disabled:S,loading:H,checked:I,label:j,labelHelp:T,labelWidth:$,fieldHelpInline:C,labelInline:oe,labelSpacing:A,onBlur:D,isDarkBackground:K,onFocus:P,onChange:B,id:O,name:R,value:x,type:"checkbox",role:"switch",reverse:!L,validationOnLabel:ae&&!S,ref:k,required:F},X),{"data-component":void 0}),ce=y({"data-component":"switch","data-role":G,"data-element":V,checked:I,labelInline:oe,isDarkBackground:K,size:M,reverse:!L,validationRedesignOptIn:Z},te),pe={checked:I,disabled:S,loading:H,isDarkBackground:K,size:M,error:U,warning:Y},ue=y({autoFocus:_,error:!!U,warning:Y,disabled:S,loading:H,checked:I,onBlur:D,isDarkBackground:K,onFocus:P,onChange:B,id:O,name:R,value:x,type:"checkbox",role:"switch",ref:k,required:F},X),be=U||Y,me=[T&&re.current,be&&ne.current].filter(Boolean).join(" ");if(!Z)return e(r,{children:e(s,{helpAriaLabel:J,tooltipPosition:E,children:e(b,w(y({},le),{children:e(l,w(y({},se),{children:e(g,y({},de))}))}))})});const ge=U||Y?q?3:0:q?1:0,fe=q?"row":"column",he=q?"row-reverse":"column",ve=!q||U||Y||N?"":"center";return n(r,{children:[e(b,w(y({},ce),{children:n(t,{"data-role":"field-reverse-wrapper",display:"flex",alignItems:U||Y?"flex-start":void 0,flexDirection:L?fe:he,width:q?"100%":"auto",children:[n(t,w(y({"data-role":"label-wrapper",alignSelf:ve},$&&{width:`${$}%`}),{children:[e(d,{isDarkBackground:K,labelId:ee.current,disabled:S,isRequired:F,children:j}),T&&e(t,{"data-role":"hint-text-wrapper",mb:q?0:1,children:e(h,{"data-role":"hint-text",fontWeight:"400",id:re.current,isDarkBackground:K,marginTop:"8px",children:T})})]})),n(t,{ml:L?ge:0,mr:L?0:ge,position:"relative",id:"input-wrapper","data-role":"input-wrapper",children:[Q&&n(r,{children:[e(p,{error:U,warning:Y,validationId:ne.current,isDarkBackground:K,validationMessagePositionTop:Q,"data-role":"validation-message-top"}),be&&e(m,{"data-role":"error-border",warning:!(U||!Y),reverse:!L,isDarkBackground:K})]}),e(l,w(y({ariaLabelledBy:`${j&&ee.current}`,ariaDescribedBy:me},ue),{fieldHelp:q?void 0:X.fieldHelp,children:e(g,y({},pe))})),!Q&&n(r,{children:[e(p,{error:U,warning:Y,validationId:ne.current,isDarkBackground:K,validationMessagePositionTop:Q,"data-role":"validation-message-bottom"}),be&&e(m,{"data-role":"error-border",warning:!(U||!Y),reverse:!L,isDarkBackground:K})]})]})]})})),q&&X.fieldHelp&&e(t,{color:K?"var(--colorsUtilityYang100)":"var(--colorsUtilityYin090)",children:X.fieldHelp})]})}));_.displayName="Switch";export{_ as Switch,_ as default};

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

@@ -72,11 +72,16 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     /** Name of the input */
     name?: string;
     /** Callback fired when the user types in the Textarea */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
     /** Placeholder text for the component */
     placeholder?: string;
     /** Adds readOnly property */
     readOnly?: boolean;
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
+    isOptional?: boolean;
     /** The number of visible text lines for the control. When set, this determines the height of the textarea, and the minHeight property is ignored. */
     rows?: number;
     /** [Legacy] Overrides the default tooltip position */
@@ -84,7 +89,7 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     /** [Legacy] When true, validation icon will be placed on label instead of being placed on the input */
     validationOnLabel?: boolean;
     /** The value of the Textbox */
-    value?: string;
+    value: string;
     /**
      * Indicate that warning has occurred.
      * Pass string to display icon, tooltip and orange border.

package/esm/components/textarea/textarea.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import r,{useContext as t,useState as o,useRef as l,useCallback as a,useEffect as d}from"react";import s from"../../__internal__/utils/helpers/tags/tags.js";import p from"../../__internal__/input/input.component.js";import u from"../../__internal__/input/input-presentation.component.js";import c from"../../__internal__/form-field/form-field.component.js";import b from"../../hooks/useCharacterCount/useCharacterCount.js";import{InputBehaviour as m}from"../../__internal__/input-behaviour/input-behaviour.component.js";import f from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import g from"../../__internal__/utils/helpers/guid/index.js";import h,{DEFAULT_MIN_HEIGHT as v}from"./textarea.style.js";import{TooltipProvider as y}from"../../__internal__/tooltip-provider/index.js";import _ from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import O from"../carbon-provider/__internal__/new-validation.context.js";import j from"../textbox/textbox.style.js";import w from"../../__internal__/validation-message/validation-message.component.js";import{Box as x}from"../box/box.component.js";import I from"../../__internal__/utils/logger/index.js";import{HintText as P}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import H from"../../style/utils/filter-styled-system-margin-props.js";function L(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function B(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},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(i){L(e,i,n[i])}))}return e}let T=!1,A=!1;const R=r.forwardRef(((r,L)=>{var{"aria-labelledby":R,"aria-describedby":k,autoFocus:S,inputHint:W,fieldHelp:E,label:C,children:F,characterLimit:D,onChange:M,onFocus:q,onBlur:z,disabled:V=!1,labelInline:N,labelAlign:U,labelHelp:$,labelSpacing:G,inputIcon:J,id:K,error:Q,warning:X,info:Y,name:Z,readOnly:ee=!1,placeholder:ie,expandable:ne=!1,rows:re,validationOnLabel:te=!1,adaptiveLabelBreakpoint:oe,inputWidth:le,maxWidth:ae,labelWidth:de=30,tooltipPosition:se,value:pe,"data-element":ue,"data-role":ce,helpAriaLabel:be,borderRadius:me,hideBorders:fe=!1,required:ge,minHeight:he=v,validationMessagePositionTop:ve=!0}=r,ye=function(e,i){if(null==e)return{};var n,r,t=function(e,i){if(null==e)return{};var n,r,t={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],i.indexOf(n)>=0||(t[n]=e[n]);return t}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(r=0;r<o.length;r++)n=o[r],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(r,["aria-labelledby","aria-describedby","autoFocus","inputHint","fieldHelp","label","children","characterLimit","onChange","onFocus","onBlur","disabled","labelInline","labelAlign","labelHelp","labelSpacing","inputIcon","id","error","warning","info","name","readOnly","placeholder","expandable","rows","validationOnLabel","adaptiveLabelBreakpoint","inputWidth","maxWidth","labelWidth","tooltipPosition","value","data-element","data-role","helpAriaLabel","borderRadius","hideBorders","required","minHeight","validationMessagePositionTop"]);const{validationRedesignOptIn:_e}=t(O),Oe=!_e&&N,[je,we]=o(v),xe=e=>_e?void 0:e,{current:Ie}=l(K||g()),Pe=l(null),He=a((e=>{Pe.current=e,L&&("current"in L?L.current=e:L(e))}),[L]),[Le,Be]=o("off");T||M||(T=!0,I.deprecate("Uncontrolled behaviour in `Textarea` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.")),Array.isArray(me)&&me.length>4&&!A&&(I.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values."),A=!0);const Te=a((()=>{const e=Pe.current;if((null==e?void 0:e.scrollHeight)&&(null==e?void 0:e.scrollHeight)>je){let i=e;for(;i&&!(null==i?void 0:i.scrollTop);)i=(null==i?void 0:i.parentElement)||null;const n=null==i?void 0:i.scrollTop;e.style.height="auto",e.style.height=`${Math.max(e.scrollHeight,je)}px`,i&&n&&(i.scrollTop=n)}}),[je]),{labelId:Ae,validationId:Re,fieldHelpId:ke,ariaDescribedBy:Se}=_({id:Ie,validationRedesignOptIn:_e,error:Q,warning:X,info:Y,label:C,fieldHelp:E}),[We,Ee]=b(pe,D,Le);d((()=>{var e;we(re?(null==Pe||null===(e=Pe.current)||void 0===e?void 0:e.scrollHeight)||0:he>v?he:v)}),[he,re]),d((()=>{ne&&Te()})),d((()=>{var e,i;return ne&&(window.addEventListener("resize",Te),we((null==Pe||null===(e=Pe.current)||void 0===e?void 0:e.clientHeight)||0),null===(i=document.fonts)||void 0===i||i.addEventListener("loadingdone",Te)),()=>{var e;ne&&(window.removeEventListener("resize",Te),null===(e=document.fonts)||void 0===e||e.removeEventListener("loadingdone",Te))}}),[Te,ne]);const Ce=!!(J||Re&&!te),Fe=l(g()),De=W?Fe.current:void 0,Me=[..._e&&ve?[Se,De]:[De,Se],Ee,k].filter(Boolean).join(" "),qe=e(u,{disabled:V,readOnly:ee,inputWidth:"number"==typeof le?le:100-de,maxWidth:ae,error:Q,warning:X,info:Y,borderRadius:me,hideBorders:fe,children:[i(p,B({"aria-invalid":!!Q,"aria-labelledby":R,"aria-describedby":Me,autoFocus:S,name:Z,value:pe,ref:He,onChange:M,onFocus:e=>{D&&Be("polite"),null==q||q(e)},onBlur:e=>{D&&Be("off"),null==z||z(e)},disabled:V,readOnly:ee,placeholder:V?"":ie,rows:re,id:Ie,as:"textarea",validationIconId:_e?void 0:Re,inputBorderRadius:me,required:ge},ye)),F,i(f,{disabled:V,readOnly:ee,inputIcon:J,error:Q,warning:X,info:Y,validationIconId:_e?void 0:Re,useValidationIcon:!(_e||te)})]}),ze=H(ye);return i(y,{tooltipPosition:se,helpAriaLabel:be,children:i(m,{children:e(h,(Ve=B({labelInline:Oe,hasIcon:Ce,minHeight:je},ze,s("textarea",{"data-element":ue,"data-role":ce})),Ne={children:[e(c,{fieldHelp:xe(E),fieldHelpId:ke,error:Q,warning:X,info:Y,label:C,labelId:Ae,disabled:V,id:Ie,labelInline:xe(Oe),labelAlign:U,labelWidth:xe(de),labelHelp:xe($),labelSpacing:G,isRequired:ge,useValidationIcon:xe(te),adaptiveLabelBreakpoint:oe,validationRedesignOptIn:_e,my:0,children:[(W||$&&_e)&&i(P,{align:U,id:De,"data-element":"input-hint",children:W||$}),_e?e(x,{position:"relative",children:[ve&&e(n,{children:[i(w,{error:Q,validationId:Re,warning:X,validationMessagePositionTop:ve}),(Q||X)&&i(j,{warning:!(Q||!X)})]}),qe,!ve&&e(n,{children:[i(w,{error:Q,validationId:Re,warning:X,validationMessagePositionTop:ve}),(Q||X)&&i(j,{warning:!(Q||!X)})]})]}):qe]}),We]},Ne=null!=Ne?Ne:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ve,Object.getOwnPropertyDescriptors(Ne)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object(Ne)).forEach((function(e){Object.defineProperty(Ve,e,Object.getOwnPropertyDescriptor(Ne,e))})),Ve))})});var Ve,Ne}));R.displayName="Textarea";export{R as OriginalTextarea,R as Textarea,R as default};
+import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import t,{useContext as r,useState as o,useRef as l,useCallback as a,useEffect as d}from"react";import s from"../../__internal__/utils/helpers/tags/tags.js";import p from"../../__internal__/input/input.component.js";import u from"../../__internal__/input/input-presentation.component.js";import c from"../../__internal__/form-field/form-field.component.js";import b from"../../hooks/useCharacterCount/useCharacterCount.js";import{InputBehaviour as m}from"../../__internal__/input-behaviour/input-behaviour.component.js";import f from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import h from"../../__internal__/utils/helpers/guid/index.js";import g,{DEFAULT_MIN_HEIGHT as v}from"./textarea.style.js";import{TooltipProvider as y}from"../../__internal__/tooltip-provider/index.js";import _ from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import O from"../carbon-provider/__internal__/new-validation.context.js";import j from"../textbox/textbox.style.js";import w from"../../__internal__/validation-message/validation-message.component.js";import{Box as x}from"../box/box.component.js";import I from"../../__internal__/utils/logger/index.js";import{HintText as P}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import H from"../../style/utils/filter-styled-system-margin-props.js";function L(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function B(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(i){L(e,i,n[i])}))}return e}let T=!1,A=!1;const R=t.forwardRef(((t,L)=>{var{"aria-labelledby":R,"aria-describedby":S,autoFocus:W,inputHint:k,fieldHelp:E,label:C,children:q,characterLimit:F,onChange:D,onFocus:M,onBlur:z,disabled:V=!1,labelInline:N,labelAlign:$,labelHelp:G,labelSpacing:J,inputIcon:K,id:Q,error:U,warning:X,info:Y,name:Z,readOnly:ee=!1,placeholder:ie,expandable:ne=!1,rows:te,validationOnLabel:re=!1,adaptiveLabelBreakpoint:oe,inputWidth:le,maxWidth:ae,labelWidth:de=30,tooltipPosition:se,value:pe,"data-element":ue,"data-role":ce,helpAriaLabel:be,borderRadius:me,hideBorders:fe=!1,required:he,isOptional:ge,minHeight:ve=v,validationMessagePositionTop:ye=!0}=t,_e=function(e,i){if(null==e)return{};var n,t,r=function(e,i){if(null==e)return{};var n,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=0||(r[n]=e[n]);return r}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(t,["aria-labelledby","aria-describedby","autoFocus","inputHint","fieldHelp","label","children","characterLimit","onChange","onFocus","onBlur","disabled","labelInline","labelAlign","labelHelp","labelSpacing","inputIcon","id","error","warning","info","name","readOnly","placeholder","expandable","rows","validationOnLabel","adaptiveLabelBreakpoint","inputWidth","maxWidth","labelWidth","tooltipPosition","value","data-element","data-role","helpAriaLabel","borderRadius","hideBorders","required","isOptional","minHeight","validationMessagePositionTop"]);!T&&ge&&(T=!0,I.deprecate("`isOptional` is deprecated in TextArea 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:Oe}=r(O),je=!Oe&&N,[we,xe]=o(v),Ie=e=>Oe?void 0:e,{current:Pe}=l(Q||h()),He=l(null),Le=a((e=>{He.current=e,L&&("current"in L?L.current=e:L(e))}),[L]),[Be,Te]=o("off");Array.isArray(me)&&me.length>4&&!A&&(I.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values."),A=!0);const Ae=a((()=>{const e=He.current;if((null==e?void 0:e.scrollHeight)&&(null==e?void 0:e.scrollHeight)>we){let i=e;for(;i&&!(null==i?void 0:i.scrollTop);)i=(null==i?void 0:i.parentElement)||null;const n=null==i?void 0:i.scrollTop;e.style.height="auto",e.style.height=`${Math.max(e.scrollHeight,we)}px`,i&&n&&(i.scrollTop=n)}}),[we]),{labelId:Re,validationId:Se,fieldHelpId:We,ariaDescribedBy:ke}=_({id:Pe,validationRedesignOptIn:Oe,error:U,warning:X,info:Y,label:C,fieldHelp:E}),[Ee,Ce]=b(pe,F,Be);d((()=>{var e;xe(te?(null==He||null===(e=He.current)||void 0===e?void 0:e.scrollHeight)||0:ve>v?ve:v)}),[ve,te]),d((()=>{ne&&Ae()})),d((()=>{var e,i;return ne&&(window.addEventListener("resize",Ae),xe((null==He||null===(e=He.current)||void 0===e?void 0:e.clientHeight)||0),null===(i=document.fonts)||void 0===i||i.addEventListener("loadingdone",Ae)),()=>{var e;ne&&(window.removeEventListener("resize",Ae),null===(e=document.fonts)||void 0===e||e.removeEventListener("loadingdone",Ae))}}),[Ae,ne]);const qe=!!(K||Se&&!re),Fe=l(h()),De=k?Fe.current:void 0,Me=[...Oe&&ye?[ke,De]:[De,ke],Ce,S].filter(Boolean).join(" "),ze=e(u,{disabled:V,readOnly:ee,inputWidth:"number"==typeof le?le:100-de,maxWidth:ae,error:U,warning:X,info:Y,borderRadius:me,hideBorders:fe,children:[i(p,B({"aria-invalid":!!U,"aria-labelledby":R,"aria-describedby":Me,autoFocus:W,name:Z,value:pe,ref:Le,onChange:D,onFocus:e=>{F&&Te("polite"),null==M||M(e)},onBlur:e=>{F&&Te("off"),null==z||z(e)},disabled:V,readOnly:ee,placeholder:V?"":ie,rows:te,id:Pe,as:"textarea",validationIconId:Oe?void 0:Se,inputBorderRadius:me,required:he},_e)),q,i(f,{disabled:V,readOnly:ee,inputIcon:K,error:U,warning:X,info:Y,validationIconId:Oe?void 0:Se,useValidationIcon:!(Oe||re)})]}),Ve=H(_e);return i(y,{tooltipPosition:se,helpAriaLabel:be,children:i(m,{children:e(g,(Ne=B({labelInline:je,hasIcon:qe,minHeight:we},Ve,s("textarea",{"data-element":ue,"data-role":ce})),$e={children:[e(c,{fieldHelp:Ie(E),fieldHelpId:We,error:U,warning:X,info:Y,label:C,labelId:Re,disabled:V,id:Pe,labelInline:Ie(je),labelAlign:$,labelWidth:Ie(de),labelHelp:Ie(G),labelSpacing:J,isRequired:he,useValidationIcon:Ie(re),adaptiveLabelBreakpoint:oe,validationRedesignOptIn:Oe,my:0,children:[(k||G&&Oe)&&i(P,{align:$,id:De,"data-element":"input-hint",children:k||G}),Oe?e(x,{position:"relative",children:[ye&&e(n,{children:[i(w,{error:U,validationId:Se,warning:X,validationMessagePositionTop:ye}),(U||X)&&i(j,{warning:!(U||!X)})]}),ze,!ye&&e(n,{children:[i(w,{error:U,validationId:Se,warning:X,validationMessagePositionTop:ye}),(U||X)&&i(j,{warning:!(U||!X)})]})]}):ze]}),Ee]},$e=null!=$e?$e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ne,Object.getOwnPropertyDescriptors($e)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object($e)).forEach((function(e){Object.defineProperty(Ne,e,Object.getOwnPropertyDescriptor($e,e))})),Ne))})});var Ne,$e}));R.displayName="Textarea";export{R as OriginalTextarea,R as Textarea,R as default};

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

@@ -64,7 +64,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     /** [Legacy] Label width as a percentage when label is inline. */
     labelWidth?: number;
     /** Specify a callback triggered on change */
-    onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
+    onChange: (ev: React.ChangeEvent<HTMLInputElement>) => void;
     /** Deferred callback to be called after the onChange event */
     onChangeDeferred?: () => void;
     /** Specify a callback triggered on click */
@@ -94,7 +94,7 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     /** Render the ValidationMessage above the Textbox input when validationRedesignOptIn flag is set */
     validationMessagePositionTop?: boolean;
 }
-export interface TextboxProps extends CommonTextboxProps {
+export interface TextboxProps extends Omit<CommonTextboxProps, "defaultValue"> {
     /** Content to be rendered next to the input */
     children?: React.ReactNode;
     /** Container for DatePicker or SelectList components */

package/esm/components/textbox/textbox.component.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o,{useState as t,useContext as r,useRef as l}from"react";import{Box as a}from"../box/box.component.js";import d from"../../__internal__/form-field/form-field.component.js";import{HintText as s}from"../../__internal__/hint-text/hint-text.component.js";import p from"../../__internal__/input/input.component.js";import c from"../../__internal__/input/input-presentation.component.js";import{InputBehaviour as u}from"../../__internal__/input-behaviour/input-behaviour.component.js";import m from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import{TooltipProvider as b}from"../../__internal__/tooltip-provider/index.js";import f from"../../__internal__/validation-message/validation-message.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import g from"../../style/utils/filter-styled-system-margin-props.js";import h from"../carbon-provider/__internal__/new-validation.context.js";import _ from"../numeral-date/__internal__/numeral-date.context.js";import v from"../../__internal__/utils/logger/index.js";import y from"../../hooks/useCharacterCount/useCharacterCount.js";import O from"../../hooks/__internal__/useUniqueId/index.js";import j from"../../__internal__/utils/helpers/guid/index.js";import I from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import x from"./textbox.style.js";import w from"./__internal__/prefix.style.js";function C(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function P(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(i){C(e,i,n[i])}))}return e}function k(e,i){return i=null!=i?i:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object(i)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(i,n))})),e}const D="left",T="medium",H=30,L=!1;let M=!1;const W=o.forwardRef(((o,C)=>{var{"aria-labelledby":W,"aria-describedby":B,align:S=D,autoFocus:A,children:F,disabled:q,inputIcon:z,leftChildren:R,label:E,labelAlign:V,labelHelp:U,labelInline:N,labelSpacing:G,id:J,formattedValue:K,inputHint:Q,fieldHelp:X,error:Y,warning:Z,info:$,name:ee,reverse:ie,size:ne=T,value:oe,readOnly:te,placeholder:re,onBlur:le,onClick:ae,onFocus:de,onChange:se,onMouseDown:pe,onChangeDeferred:ce,deferTimeout:ue,iconOnClick:me,iconOnMouseDown:be,iconTabIndex:fe,validationOnLabel:ge=L,labelWidth:he=H,inputWidth:_e,maxWidth:ve,prefix:ye,adaptiveLabelBreakpoint:Oe,required:je,positionedChildren:Ie,tooltipPosition:xe,"data-component":we,"data-element":Ce,"data-role":Pe,characterLimit:ke,helpAriaLabel:De,tooltipId:Te,validationMessagePositionTop:He=!0}=o,Le=function(e,i){if(null==e)return{};var n,o,t=function(e,i){if(null==e)return{};var n,o,t={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],i.indexOf(n)>=0||(t[n]=e[n]);return t}(e,i);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(o,["aria-labelledby","aria-describedby","align","autoFocus","children","disabled","inputIcon","leftChildren","label","labelAlign","labelHelp","labelInline","labelSpacing","id","formattedValue","inputHint","fieldHelp","error","warning","info","name","reverse","size","value","readOnly","placeholder","onBlur","onClick","onFocus","onChange","onMouseDown","onChangeDeferred","deferTimeout","iconOnClick","iconOnMouseDown","iconTabIndex","validationOnLabel","labelWidth","inputWidth","maxWidth","prefix","adaptiveLabelBreakpoint","required","positionedChildren","tooltipPosition","data-component","data-element","data-role","characterLimit","helpAriaLabel","tooltipId","validationMessagePositionTop"]);const Me="string"==typeof oe?oe:"",[We,Be]=O(J,ee),[Se,Ae]=t("off"),[Fe,qe]=y(Me,ke,Se),{validationRedesignOptIn:ze}=r(h),{disableErrorBorder:Re}=r(_),Ee=e=>ze?void 0:e;M||se||(M=!0,v.deprecate("Uncontrolled behaviour in `Textbox` is deprecated and support will soon be removed. Please make sure all your inputs are controlled."));const{labelId:Ve,validationId:Ue,fieldHelpId:Ne,ariaDescribedBy:Ge}=I({id:We,validationRedesignOptIn:ze,error:Y,warning:Z,info:$,label:E,fieldHelp:X}),Je=l(j()),Ke=Q?Je.current:void 0,Qe=[...ze&&He?[Ge,Ke]:[Ke,Ge],qe,B].filter(Boolean).join(" "),Xe=e(c,{align:S,disabled:q,readOnly:te,size:ne,error:Y,warning:Z,info:$,prefix:ye,inputWidth:_e||100-he,maxWidth:N||"right"!==V?ve:void 0,positionedChildren:Ie,hasIcon:!!(z||Ue&&!ge),children:[R,ye&&i(w,{"data-element":"textbox-prefix",size:ne,children:ye}),i(p,P(k(P({},je&&{required:je}),{align:S,"aria-invalid":!!Y,"aria-labelledby":W,"aria-describedby":Qe,autoFocus:A,deferTimeout:ue,disabled:q,id:We,ref:C,name:Be,onBlur:e=>{ke&&Ae("off"),null==le||le(e)},onChange:se,onChangeDeferred:ce,onClick:q||te?void 0:ae,onFocus:e=>{ke&&Ae("polite"),null==de||de(e)},onMouseDown:q||te?void 0:pe,placeholder:q||te?"":re,readOnly:te,value:"string"==typeof K?K:oe,validationIconId:ze?void 0:Te||Ue}),Le)),F,i(m,{align:S,disabled:q,error:Y,iconTabIndex:fe,info:$,inputIcon:z,onClick:q||te?void 0:me||ae,onMouseDown:q||te?void 0:be||pe,readOnly:te,size:ne,useValidationIcon:!(ze||ge),warning:Z,validationIconId:ze?void 0:Te||Ue})]});return i(b,{helpAriaLabel:De,tooltipPosition:xe,children:i(u,{children:e(d,k(P({maxWidth:N||"right"!==V?void 0:ve,disabled:q,fieldHelpId:Ne,fieldHelp:Ee(X),error:Y,warning:Z,info:$,label:E,labelId:Ve,labelAlign:V,labelHelp:Ee(U),labelInline:Ee(N),labelSpacing:G,labelWidth:Ee(he),id:We,reverse:Ee(ie),useValidationIcon:Ee(ge),adaptiveLabelBreakpoint:Oe,isRequired:je,"data-component":we,"data-role":Pe,"data-element":Ce,validationIconId:ze?void 0:Ue,validationRedesignOptIn:ze},g(Le)),{children:[(Q||U&&ze)&&i(s,{align:V,"data-element":"input-hint",id:Ke,isComponentInline:N,children:Q||U}),ze?e(a,{position:"relative",children:[He&&e(n,{children:[i(f,{error:Y,validationId:Ue,warning:Z,validationMessagePositionTop:He}),!Re&&(Y||Z)&&i(x,{warning:!(Y||!Z)})]}),Xe,!He&&e(n,{children:[i(f,{error:Y,validationId:Ue,warning:Z,validationMessagePositionTop:He}),!Re&&(Y||Z)&&i(x,{warning:!(Y||!Z)})]})]}):Xe,Fe]}))})})}));W.displayName="Textbox";export{D as ALIGN_DEFAULT,L as LABEL_VALIDATION_DEFAULT,H as LABEL_WIDTH_DEFAULT,T as SIZE_DEFAULT,W as Textbox,W as default};
+import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import o,{useState as t,useContext as r,useRef as a}from"react";import{Box as l}from"../box/box.component.js";import d from"../../__internal__/form-field/form-field.component.js";import{HintText as p}from"../../__internal__/hint-text/hint-text.component.js";import s from"../../__internal__/input/input.component.js";import c from"../../__internal__/input/input-presentation.component.js";import{InputBehaviour as u}from"../../__internal__/input-behaviour/input-behaviour.component.js";import m from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import{TooltipProvider as f}from"../../__internal__/tooltip-provider/index.js";import b from"../../__internal__/validation-message/validation-message.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import g from"../../style/utils/filter-styled-system-margin-props.js";import h from"../carbon-provider/__internal__/new-validation.context.js";import _ from"../numeral-date/__internal__/numeral-date.context.js";import v from"../../hooks/useCharacterCount/useCharacterCount.js";import y from"../../hooks/__internal__/useUniqueId/index.js";import O from"../../__internal__/utils/helpers/guid/index.js";import j from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import I from"./textbox.style.js";import w from"./__internal__/prefix.style.js";function x(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function C(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},o=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),o.forEach((function(i){x(e,i,n[i])}))}return e}function P(e,i){return i=null!=i?i:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object(i)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(i,n))})),e}const k="left",D="medium",H=30,L=!1,M=o.forwardRef(((o,x)=>{var{"aria-labelledby":M,"aria-describedby":T,align:W=k,autoFocus:B,children:S,disabled:A,inputIcon:F,leftChildren:q,label:z,labelAlign:R,labelHelp:E,labelInline:V,labelSpacing:U,id:G,formattedValue:J,inputHint:K,fieldHelp:N,error:Q,warning:X,info:Y,name:Z,reverse:$,size:ee=D,value:ie,readOnly:ne,placeholder:oe,onBlur:te,onClick:re,onFocus:ae,onChange:le,onMouseDown:de,onChangeDeferred:pe,deferTimeout:se,iconOnClick:ce,iconOnMouseDown:ue,iconTabIndex:me,validationOnLabel:fe=L,labelWidth:be=H,inputWidth:ge,maxWidth:he,prefix:_e,adaptiveLabelBreakpoint:ve,required:ye,positionedChildren:Oe,tooltipPosition:je,"data-component":Ie,"data-element":we,"data-role":xe,characterLimit:Ce,helpAriaLabel:Pe,tooltipId:ke,validationMessagePositionTop:De=!0}=o,He=function(e,i){if(null==e)return{};var n,o,t=function(e,i){if(null==e)return{};var n,o,t={},r=Object.keys(e);for(o=0;o<r.length;o++)n=r[o],i.indexOf(n)>=0||(t[n]=e[n]);return t}(e,i);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);for(o=0;o<r.length;o++)n=r[o],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(t[n]=e[n])}return t}(o,["aria-labelledby","aria-describedby","align","autoFocus","children","disabled","inputIcon","leftChildren","label","labelAlign","labelHelp","labelInline","labelSpacing","id","formattedValue","inputHint","fieldHelp","error","warning","info","name","reverse","size","value","readOnly","placeholder","onBlur","onClick","onFocus","onChange","onMouseDown","onChangeDeferred","deferTimeout","iconOnClick","iconOnMouseDown","iconTabIndex","validationOnLabel","labelWidth","inputWidth","maxWidth","prefix","adaptiveLabelBreakpoint","required","positionedChildren","tooltipPosition","data-component","data-element","data-role","characterLimit","helpAriaLabel","tooltipId","validationMessagePositionTop"]);const Le="string"==typeof ie?ie:"",[Me,Te]=y(G,Z),[We,Be]=t("off"),[Se,Ae]=v(Le,Ce,We),{validationRedesignOptIn:Fe}=r(h),{disableErrorBorder:qe}=r(_),ze=e=>Fe?void 0:e,{labelId:Re,validationId:Ee,fieldHelpId:Ve,ariaDescribedBy:Ue}=j({id:Me,validationRedesignOptIn:Fe,error:Q,warning:X,info:Y,label:z,fieldHelp:N}),Ge=a(O()),Je=K?Ge.current:void 0,Ke=[...Fe&&De?[Ue,Je]:[Je,Ue],Ae,T].filter(Boolean).join(" "),Ne=e(c,{align:W,disabled:A,readOnly:ne,size:ee,error:Q,warning:X,info:Y,prefix:_e,inputWidth:ge||100-be,maxWidth:V||"right"!==R?he:void 0,positionedChildren:Oe,hasIcon:!!(F||Ee&&!fe),children:[q,_e&&i(w,{"data-element":"textbox-prefix",size:ee,children:_e}),i(s,C(P(C({},ye&&{required:ye}),{align:W,"aria-invalid":!!Q,"aria-labelledby":M,"aria-describedby":Ke,autoFocus:B,deferTimeout:se,disabled:A,id:Me,ref:x,name:Te,onBlur:e=>{Ce&&Be("off"),null==te||te(e)},onChange:le,onChangeDeferred:pe,onClick:A||ne?void 0:re,onFocus:e=>{Ce&&Be("polite"),null==ae||ae(e)},onMouseDown:A||ne?void 0:de,placeholder:A||ne?"":oe,readOnly:ne,value:"string"==typeof J?J:ie,validationIconId:Fe?void 0:ke||Ee}),He)),S,i(m,{align:W,disabled:A,error:Q,iconTabIndex:me,info:Y,inputIcon:F,onClick:A||ne?void 0:ce||re,onMouseDown:A||ne?void 0:ue||de,readOnly:ne,size:ee,useValidationIcon:!(Fe||fe),warning:X,validationIconId:Fe?void 0:ke||Ee})]});return i(f,{helpAriaLabel:Pe,tooltipPosition:je,children:i(u,{children:e(d,P(C({maxWidth:V||"right"!==R?void 0:he,disabled:A,fieldHelpId:Ve,fieldHelp:ze(N),error:Q,warning:X,info:Y,label:z,labelId:Re,labelAlign:R,labelHelp:ze(E),labelInline:ze(V),labelSpacing:U,labelWidth:ze(be),id:Me,reverse:ze($),useValidationIcon:ze(fe),adaptiveLabelBreakpoint:ve,isRequired:ye,"data-component":Ie,"data-role":xe,"data-element":we,validationIconId:Fe?void 0:Ee,validationRedesignOptIn:Fe},g(He)),{children:[(K||E&&Fe)&&i(p,{align:R,"data-element":"input-hint",id:Je,isComponentInline:V,children:K||E}),Fe?e(l,{position:"relative",children:[De&&e(n,{children:[i(b,{error:Q,validationId:Ee,warning:X,validationMessagePositionTop:De}),!qe&&(Q||X)&&i(I,{warning:!(Q||!X)})]}),Ne,!De&&e(n,{children:[i(b,{error:Q,validationId:Ee,warning:X,validationMessagePositionTop:De}),!qe&&(Q||X)&&i(I,{warning:!(Q||!X)})]})]}):Ne,Se]}))})})}));export{k as ALIGN_DEFAULT,L as LABEL_VALIDATION_DEFAULT,H as LABEL_WIDTH_DEFAULT,D as SIZE_DEFAULT,M as Textbox,M as default};

package/esm/hooks/use-multi-input/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./use-multi-input";

package/esm/hooks/use-multi-input/index.js

@@ -0,0 +1 @@
+export{useMultiInput as default}from"./use-multi-input.js";