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

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

import{jsx as e,Fragment as r,jsxs as n}from"react/jsx-runtime";import i,{useContext as a,useRef as o}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 w(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 y(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,a=function(e,r){if(null==e)return{};var n,i,a={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],r.indexOf(n)>=0||(a[n]=e[n]);return a}(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)&&(a[n]=e[n])}return a}(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}=a(c),ee=o(`${f()}-label`),re=o(`${f()}-hint`),ne=o(`${f()}-message`),ie=u(W);let ae=q;W&&(ae=ie);const oe=!(!q||L)||z,te=v(X),le=w({"data-component":"switch","data-role":G,"data-element":V,checked:I,isDarkBackground:K,fieldHelpInline:C,labelInline:ae,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&&!oe&&!S},se=y(w({autoFocus:_,error:U,warning:Y,info:N,disabled:S,loading:H,checked:I,label:j,labelHelp:T,labelWidth:$,fieldHelpInline:C,labelInline:ae,labelSpacing:A,onBlur:D,isDarkBackground:K,onFocus:P,onChange:B,id:O,name:R,value:x,type:"checkbox",role:"switch",reverse:!L,validationOnLabel:oe&&!S,ref:k,required:F},X),{"data-component":void 0}),ce=w({"data-component":"switch","data-role":G,"data-element":V,checked:I,labelInline:ae,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=w({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,y(w({},le),{children:e(l,y(w({},se),{children:e(g,w({},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,y(w({},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,y(w({"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,y(w({ariaLabelledBy:`${j&&ee.current}`,ariaDescribedBy:me},ue),{fieldHelp:q?void 0:X.fieldHelp,children:e(g,w({},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};