carbon-react/lib/components/switch/switch.component.js

A library of reusable React components for easily building user interfaces.

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