@spscommerce/ds-react 8.20.10 → 8.20.11

package/lib/index.cjs.js

@@ -5884,7 +5884,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                     function Component() {
                         return <SpsPageSelector numPages={25} onPageChange={() => {}} disabled />;
                     }
-                `}}}},QN={checked:"boolean",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",inline:"boolean",centered:"boolean",label:"string",name:{type:"string",required:!0},onChange:"ChangeEventHandler",value:"any"};function nl({checked:e,className:t,"data-testid":n,disabled:r,formControl:o,formMeta:a,id:l,inline:c,centered:p,label:m,name:f,onChange:u,ref:h,unsafelyReplaceClassName:S,value:y,...T}){const E=a||o,w=s.useRef(null),{wrapperId:N,controlId:I}=Tt(l),k=G(S||"sps-radio-button","sps-checkable",c&&"sps-checkable--inline",p&&"sps-checkable--centered",!m&&"sps-checkable--no-label",t);function x(F){var P;E&&(E.setValue(y),E.markAsDirty()),u&&u(F),(P=w.current)==null||P.focus()}return s.createElement(lt,{id:N,className:k,formControl:o,formMeta:a,inputRef:w,ref:h,"data-testid":`${n}`,onClick:()=>{var F;return(F=w.current)==null?void 0:F.click()}},s.createElement("input",{type:"radio",ref:w,className:"sps-checkable__input","data-testid":`${n}__radio-input`,id:I,name:f,checked:e,disabled:r,onChange:x,...T}),s.createElement("label",{className:"sps-checkable__label",htmlFor:I},m||""))}Object.assign(nl,{props:QN,displayName:"SpsRadioButton"});const Um={general:{label:"General Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Use Radio Buttons:"),s.createElement("ul",null,s.createElement("li",null,"When only one option can be selected from the available options.")),s.createElement("h5",null,"Do Not Use Radio Buttons:"),s.createElement("ul",null,s.createElement("li",null,"When a selection causes an immediate change in the system. Use a"," ",s.createElement(e,{to:"toggle"},"Toggle")," instead."),s.createElement("li",null,"When multiple options can be selected from the available options. Use"," ",s.createElement(e,{to:"checkbox"},"Checkboxes")," instead."),s.createElement("li",null,"When the list of available options requires too much space to list efficiently. Use"," ",s.createElement(e,{to:"dropdown"},"Dropdown")," instead.")),s.createElement("h5",null,"Using Radio Buttons in a Form"),s.createElement("p",null,"Reference the ",s.createElement(e,{to:"form"},"Forms")," page for guidelines for placing Radio Buttons in Form Layouts."))},basic:{label:"Basic Radio Buttons",description:()=>s.createElement("p",null,"Radio Buttons that represent related options are grouped together with a label. The groups can be arranged horizontally or vertically to best utilize available space."),examples:{horizontal:{description:()=>s.createElement("h4",null,"Horizontal Group"),react:v.code`
+                `}}}},QN={checked:"boolean",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",inline:"boolean",centered:"boolean",label:"string",name:{type:"string",required:!0},onChange:"ChangeEventHandler",value:"any"};function nl({checked:e,className:t,"data-testid":n,disabled:r,formControl:o,formMeta:a,id:l,inline:c,centered:p,label:m,name:f,onChange:u,ref:h,unsafelyReplaceClassName:S,value:y,...T}){const E=a||o,w=s.useRef(null),{wrapperId:N,controlId:I}=Tt(l),k=G(S||"sps-radio-button","sps-checkable",c&&"sps-checkable--inline",p&&"sps-checkable--centered",!m&&"sps-checkable--no-label",t);function x(F){var P;E&&(E.setValue(y),E.markAsDirty()),u&&u(F),(P=w.current)==null||P.focus()}return s.createElement(lt,{id:N,className:k,formControl:o,formMeta:a,inputRef:w,ref:h,"data-testid":`${n}`,onClick:()=>{var F;return(F=w.current)==null?void 0:F.click()}},s.createElement("input",{type:"radio",ref:w,className:"sps-checkable__input","data-checked":e?"checked":void 0,"data-testid":`${n}__radio-input`,id:I,name:f,checked:e,disabled:r,onChange:x,...T}),s.createElement("label",{className:"sps-checkable__label",htmlFor:I},m||""))}Object.assign(nl,{props:QN,displayName:"SpsRadioButton"});const Um={general:{label:"General Usage",description:({NavigateTo:e})=>s.createElement(s.Fragment,null,s.createElement("h5",null,"Use Radio Buttons:"),s.createElement("ul",null,s.createElement("li",null,"When only one option can be selected from the available options.")),s.createElement("h5",null,"Do Not Use Radio Buttons:"),s.createElement("ul",null,s.createElement("li",null,"When a selection causes an immediate change in the system. Use a"," ",s.createElement(e,{to:"toggle"},"Toggle")," instead."),s.createElement("li",null,"When multiple options can be selected from the available options. Use"," ",s.createElement(e,{to:"checkbox"},"Checkboxes")," instead."),s.createElement("li",null,"When the list of available options requires too much space to list efficiently. Use"," ",s.createElement(e,{to:"dropdown"},"Dropdown")," instead.")),s.createElement("h5",null,"Using Radio Buttons in a Form"),s.createElement("p",null,"Reference the ",s.createElement(e,{to:"form"},"Forms")," page for guidelines for placing Radio Buttons in Form Layouts."),s.createElement("h5",null,"End to End Testing Radio Buttons"),s.createElement("p",null,'To determine if a radio button is checked in an E2E test, you should Use data-checked="checked".'))},basic:{label:"Basic Radio Buttons",description:()=>s.createElement("p",null,"Radio Buttons that represent related options are grouped together with a label. The groups can be arranged horizontally or vertically to best utilize available space."),examples:{horizontal:{description:()=>s.createElement("h4",null,"Horizontal Group"),react:v.code`
                     import { 
                       useSpsForm,
                       SpsForm,