@spscommerce/ds-react 8.23.12 → 8.23.14

package/lib/index.js

@@ -12388,7 +12388,7 @@ const JD = {
     description: ({ NavigateTo: e }) => /* @__PURE__ */ q.createElement(q.Fragment, null, /* @__PURE__ */ q.createElement("h5", null, "Use a Select:"), /* @__PURE__ */ q.createElement("ul", null, /* @__PURE__ */ q.createElement("li", { className: "mb-2" }, "When a list of predetermined values can be provided.")), /* @__PURE__ */ q.createElement("h5", null, "Do Not Use a Select:"), /* @__PURE__ */ q.createElement("ul", null, /* @__PURE__ */ q.createElement("li", { className: "mb-2" }, "When there are only two possible options. Consider", " ", /* @__PURE__ */ q.createElement(e, { to: "checkbox" }, "Checkboxes"), " or", " ", /* @__PURE__ */ q.createElement(e, { to: "radio-buttons" }, "Radio Buttons"), " insead."), /* @__PURE__ */ q.createElement("li", { className: "mb-2" }, "When it is ideal to display all available options without requiring a click. Consider", " ", /* @__PURE__ */ q.createElement(e, { to: "checkbox" }, "Checkboxes"), " or", " ", /* @__PURE__ */ q.createElement(e, { to: "radio-buttons" }, "Radio Buttons"), " insead.")), /* @__PURE__ */ q.createElement("h5", null, "Using Selects in a Form"), /* @__PURE__ */ q.createElement("p", null, "Reference the ", /* @__PURE__ */ q.createElement(e, { to: "form" }, "Forms"), " page for guidelines for placing inputs in Form layouts"))
   },
   basic: {
-    label: "Basic Select",
+    label: "Basic Selects",
     description: () => /* @__PURE__ */ q.createElement("p", null, "Basic Selects include a label and dropdown menu containing a list of options. The user is allowed to make a single selection."),
     examples: {
       basic: {
@@ -18042,8 +18042,8 @@ Object.assign(Pu, {
 });
 const SN = {
   basic: {
-    label: "Basic Fieldsets",
-    description: "info about basic fieldsets",
+    label: "Basic Content Sections",
+    description: "info about basic content sections",
     examples: {
       basic: {
         react: y`
@@ -18069,7 +18069,7 @@ const SN = {
                         });
 
                         return <>
-                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend="Fieldset Legend" tooltip="Add a Tooltip">
+                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend="Content Section Legend" tooltip="Add a Tooltip">
                                 <div className="sfg-row">
                                     <div className="sfg-col-4">
                                         <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>
@@ -18102,8 +18102,8 @@ const SN = {
     }
   },
   b_nested: {
-    label: "Nested Fieldsets",
-    description: "info about nested fieldsets",
+    label: "Nested Content Sections",
+    description: "info about nested content sections",
     examples: {
       nested: {
         react: y`
@@ -18133,7 +18133,7 @@ const SN = {
                         });
 
                         return <>
-                            <SpsFieldset formMeta={formMeta.fields.topFieldset} legend="Fieldset Legend">
+                            <SpsFieldset formMeta={formMeta.fields.topFieldset} legend="Content Section Legend">
                                 <div className="sfg-row">
                                     <div className="sfg-col-4">
                                         <SpsLabel for={formMeta.fields.topFieldset.fields.foo}>Foo</SpsLabel>
@@ -18143,7 +18143,7 @@ const SN = {
                                         ></SpsTextInput>
                                     </div>
                                 </div>
-                                <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested} legend="Nested Fieldset">
+                                <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested} legend="Nested Content Section">
                                     <div className="sfg-row">
                                         <div className="sfg-col-4">
                                             <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.bar}>Bar</SpsLabel>
@@ -18156,7 +18156,7 @@ const SN = {
                                             ))}
                                         </div>
                                     </div>
-                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2} legend="Doubly Nested Fieldset">
+                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2} legend="Doubly Nested Content Section">
                                         <div className="sfg-row">
                                             <div className="sfg-col-4">
                                                 <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}>Baz</SpsLabel>
@@ -18176,8 +18176,8 @@ const SN = {
     }
   },
   c_optional: {
-    label: "Optional Fieldsets",
-    description: "info about optional fieldsets",
+    label: "Optional Content Sections",
+    description: "info about optional content sections",
     examples: {
       optional: {
         react: y`
@@ -18202,7 +18202,7 @@ const SN = {
                         }
 
                         return <>
-                            <SpsFieldset legend="Fieldset Legend" formMeta={formMeta.fields.optionalFieldset} optional enabled={false} onToggled={handleToggle}>
+                            <SpsFieldset legend="Content Section Legend" formMeta={formMeta.fields.optionalFieldset} optional enabled={false} onToggled={handleToggle}>
                                 <div className="sfg-row">
                                     <div className="sfg-col-4">
                                         <SpsLabel for={formMeta.fields.optionalFieldset.fields.foo}>Foo</SpsLabel>
@@ -18254,7 +18254,7 @@ const SN = {
                         }, [])
 
                         return <>
-                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend="Fieldset Legend">
+                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend="Content Section Legend">
                                 <div className="sfg-row">
                                     <div className="sfg-col-4">
                                         <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>
@@ -18271,8 +18271,8 @@ const SN = {
     }
   },
   e_topFieldset: {
-    label: "Validation on Fieldset",
-    description: "info about validation on fieldsets",
+    label: "Validation on Content Section",
+    description: "info about validation on content sections",
     examples: {
       validationOnFieldset: {
         react: y`
@@ -18320,7 +18320,7 @@ const SN = {
 
                         return (
                             <SpsForm formMeta={formMeta}>
-                                <SpsFieldset formMeta={formMeta.fields.topFieldset} legend="Fieldset Legend">
+                                <SpsFieldset formMeta={formMeta.fields.topFieldset} legend="Content Section Legend">
                                     <div className="sfg-row">
                                         <div className="sfg-col-4">
                                             <SpsLabel for={formMeta.fields.topFieldset.fields.text}>Input</SpsLabel>
@@ -18331,7 +18331,7 @@ const SN = {
                                         </div>
                                     </div>
                                     <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.nestedFieldset}
-                                        legend="Nested Fieldset"
+                                        legend="Nested Content Section"
                                         errors={() => formMeta.fields.topFieldset.fields.nestedFieldset.hasError("mustSelectAColor")
                                             && "If you choose Option B, you must select at least one color."}
                                     >

package/lib/index.umd.cjs

@@ -1510,7 +1510,7 @@ Valid keys: `+JSON.stringify(Object.keys(W),null,"  "));var ie=le(oe,ae,U,R,q+".
                             </div>
                         );
                     }
-                `}}}},KE=No||Ka,HE={action:"SpsActionMethod",captionKey:"string",comparisonKey:"string",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",notClearable:"boolean",options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",onChange:"ChangeEventHandler",onOpen:"OnOpenHandler",placeholder:"string",searchDebounce:"number",searchPlaceholder:"string",tallOptionList:"boolean",textKey:"string",valueKey:"string",value:"any",zeroState:"string",autoFixWidth:"boolean",loading:"boolean",filterByTextAndCaptionKey:"boolean",maxHeightOptionListPx:"number",maxHeightOptionListRem:"number",disableOptionsMemoization:"boolean",onBeforeChange:"(value: string) => boolean | Promise<boolean>"},Yn=o.forwardRef((e,t)=>{const{action:n,autoFixWidth:r=!1,captionKey:a,className:s,comparisonKey:l,disabled:c,formControl:p,formMeta:m,id:f,notClearable:u,options:h,onChange:S,onClick:y,onOpen:T,placeholder:w,searchDebounce:E,searchPlaceholder:N="Search…",tallOptionList:M,textKey:I,valueKey:k,unsafelyReplaceClassName:V,value:B,zeroState:C,loading:P,filterByTextAndCaptionKey:O,maxHeightOptionListPx:K,maxHeightOptionListRem:j,"data-testid":L,disableOptionsMemoization:ee,disableDefaultOptionsFiltering:A,onBeforeChange:te,...$}=e,Z=m||p,{wrapperId:se,controlId:W}=gt(f,Z),z=o.useRef(null),re=o.useRef(null),ne=o.useRef(null),{t:U}=o.useContext(Ke),[R,q]=qt({isOpen:!1,value:B,text:"",keyDown:null,opensUpward:!1,optionIds:""}),[oe,Q]=o.useState();function de(me){q({value:me,text:me&&I?me[I]:me})}async function ae(me){const Se=me&&k&&typeof me=="object"?me[k]:me;te&&!await te(Se)||(de(me),Z&&(Z.setValue(Se),Z.markAsDirty()),S&&S(new gn({value:Se})))}o.useEffect(()=>{de(B)},[B,I]);function le(){ae(void 0)}function ie(){q({isOpen:!1})}function we(me){me.nativeEvent.stopImmediatePropagation(),c||q({isOpen:!R.isOpen})}function Oe(me){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(me.key)>-1&&me.preventDefault(),Ga.includes(me.key)&&(Q(me),me.preventDefault()),me.persist(),q({keyDown:me}))}function ot(me){q({isOpen:me})}function dt(me){q({opensUpward:me})}function pt(me){me.detail!==se&&q({isOpen:!1})}function it(me){q({optionIds:new Array(me).fill("").map((Se,Be)=>`${se}-options-option-${Be}`).join(",")})}o.useEffect(()=>(document.addEventListener("click",ie),document.addEventListener("DropdownOpened",pt),()=>{document.removeEventListener("click",ie),document.removeEventListener("DropdownOpened",pt)}),[]),o.useLayoutEffect(()=>{if(r&&ne.current&&z.current){z.current.style.width="";const Se=`${z.current.getBoundingClientRect().width+6}px`;z.current.style.width=Se,ne.current.style.width=Se,ne.current.style.maxWidth=Se}}),Ya(()=>{if(R.isOpen){re.current&&KE(re.current,{scrollMode:"if-needed"}),T==null||T();const me=document.createEvent("CustomEvent");me.initCustomEvent("DropdownOpened",!1,!1,se),document.dispatchEvent(me)}},[R.isOpen]),o.useImperativeHandle(t,()=>({focus:()=>{var me;(me=re.current)==null||me.focus()}})),o.useEffect(()=>{let me;return R.isOpen&&(me=()=>{q({isOpen:!1})},window.addEventListener("resize",me)),()=>{me&&window.removeEventListener("resize",me)}},[R.isOpen]),Io({isOpen:R.isOpen,rootRef:re});const Pt=Y(V||"sps-select",R.isOpen&&"sps-select--open",R.isOpen&&"z-stratum-dropdown",R.opensUpward&&"sps-select--opens-upward",s),je=R.text||w||U("design-system:select.defaultPlaceholder");return o.createElement(at,{id:se,className:Pt,onKeyDown:Oe,formControl:p,formMeta:m,ref:re,role:"listbox","aria-owns":R.optionIds,"data-testid":L,onClick:y,...$},o.createElement("div",{className:Y("sps-select__dropctrl",c&&"disabled"),id:W,tabIndex:0,onClick:we,ref:ne,title:je,"data-testid":`${L}-dropctrl`},o.createElement("div",{className:"sps-select__dropctrl-content"},o.createElement("span",{className:Y("sps-select__value",!R.text&&"sps-select__value--placeholder"),"data-testid":`${L}-value`},je),R.value&&!u&&!c&&o.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:le,"data-testid":`${L}-clear-value`}),o.createElement("i",{className:"sps-icon sps-icon-chevron-down sps-select__dropctrl-icon"}))),o.createElement(Rr,{id:`${se}-options`,ref:z,attachTo:ne,captionKey:a,comparisonKey:l,isOpen:R.isOpen,keyDown:R.keyDown,options:h,onOptionSelected:ae,onPositionFlip:dt,onSelfToggle:ot,searchDebounce:E,searchPlaceholder:N,selectedOption:R.value,specialAction:n,tall:M,textKey:I,filterByTextAndCaptionKey:O,optionRole:"option",valueKey:k,onOptionListChanged:it,zeroState:C,ignoreWidthStyles:r,loading:P,maxHeightPx:K,maxHeightRem:j,disableOptionsMemoization:ee,disableDefaultOptionsFiltering:A,"data-testid":`${L}-option-list`,typeaheadEvent:oe}))});Object.assign(Yn,{props:HE,displayName:"SpsSelect"});const nu={general:{label:"General Usage",description:({NavigateTo:e})=>x.createElement(x.Fragment,null,x.createElement("h5",null,"Use a Select:"),x.createElement("ul",null,x.createElement("li",{className:"mb-2"},"When a list of predetermined values can be provided.")),x.createElement("h5",null,"Do Not Use a Select:"),x.createElement("ul",null,x.createElement("li",{className:"mb-2"},"When there are only two possible options. Consider"," ",x.createElement(e,{to:"checkbox"},"Checkboxes")," or"," ",x.createElement(e,{to:"radio-buttons"},"Radio Buttons")," insead."),x.createElement("li",{className:"mb-2"},"When it is ideal to display all available options without requiring a click. Consider"," ",x.createElement(e,{to:"checkbox"},"Checkboxes")," or"," ",x.createElement(e,{to:"radio-buttons"},"Radio Buttons")," insead.")),x.createElement("h5",null,"Using Selects in a Form"),x.createElement("p",null,"Reference the ",x.createElement(e,{to:"form"},"Forms")," page for guidelines for placing inputs in Form layouts"))},basic:{label:"Basic Select",description:()=>x.createElement("p",null,"Basic Selects include a label and dropdown menu containing a list of options. The user is allowed to make a single selection."),examples:{basic:{react:v.code`
+                `}}}},KE=No||Ka,HE={action:"SpsActionMethod",captionKey:"string",comparisonKey:"string",disabled:"boolean",formMeta:"SpsFormFieldMeta<any>",notClearable:"boolean",options:"Eventually<any[]> | (filter?: string) => Eventually<any[]>",onChange:"ChangeEventHandler",onOpen:"OnOpenHandler",placeholder:"string",searchDebounce:"number",searchPlaceholder:"string",tallOptionList:"boolean",textKey:"string",valueKey:"string",value:"any",zeroState:"string",autoFixWidth:"boolean",loading:"boolean",filterByTextAndCaptionKey:"boolean",maxHeightOptionListPx:"number",maxHeightOptionListRem:"number",disableOptionsMemoization:"boolean",onBeforeChange:"(value: string) => boolean | Promise<boolean>"},Yn=o.forwardRef((e,t)=>{const{action:n,autoFixWidth:r=!1,captionKey:a,className:s,comparisonKey:l,disabled:c,formControl:p,formMeta:m,id:f,notClearable:u,options:h,onChange:S,onClick:y,onOpen:T,placeholder:w,searchDebounce:E,searchPlaceholder:N="Search…",tallOptionList:M,textKey:I,valueKey:k,unsafelyReplaceClassName:V,value:B,zeroState:C,loading:P,filterByTextAndCaptionKey:O,maxHeightOptionListPx:K,maxHeightOptionListRem:j,"data-testid":L,disableOptionsMemoization:ee,disableDefaultOptionsFiltering:A,onBeforeChange:te,...$}=e,Z=m||p,{wrapperId:se,controlId:W}=gt(f,Z),z=o.useRef(null),re=o.useRef(null),ne=o.useRef(null),{t:U}=o.useContext(Ke),[R,q]=qt({isOpen:!1,value:B,text:"",keyDown:null,opensUpward:!1,optionIds:""}),[oe,Q]=o.useState();function de(me){q({value:me,text:me&&I?me[I]:me})}async function ae(me){const Se=me&&k&&typeof me=="object"?me[k]:me;te&&!await te(Se)||(de(me),Z&&(Z.setValue(Se),Z.markAsDirty()),S&&S(new gn({value:Se})))}o.useEffect(()=>{de(B)},[B,I]);function le(){ae(void 0)}function ie(){q({isOpen:!1})}function we(me){me.nativeEvent.stopImmediatePropagation(),c||q({isOpen:!R.isOpen})}function Oe(me){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(me.key)>-1&&me.preventDefault(),Ga.includes(me.key)&&(Q(me),me.preventDefault()),me.persist(),q({keyDown:me}))}function ot(me){q({isOpen:me})}function dt(me){q({opensUpward:me})}function pt(me){me.detail!==se&&q({isOpen:!1})}function it(me){q({optionIds:new Array(me).fill("").map((Se,Be)=>`${se}-options-option-${Be}`).join(",")})}o.useEffect(()=>(document.addEventListener("click",ie),document.addEventListener("DropdownOpened",pt),()=>{document.removeEventListener("click",ie),document.removeEventListener("DropdownOpened",pt)}),[]),o.useLayoutEffect(()=>{if(r&&ne.current&&z.current){z.current.style.width="";const Se=`${z.current.getBoundingClientRect().width+6}px`;z.current.style.width=Se,ne.current.style.width=Se,ne.current.style.maxWidth=Se}}),Ya(()=>{if(R.isOpen){re.current&&KE(re.current,{scrollMode:"if-needed"}),T==null||T();const me=document.createEvent("CustomEvent");me.initCustomEvent("DropdownOpened",!1,!1,se),document.dispatchEvent(me)}},[R.isOpen]),o.useImperativeHandle(t,()=>({focus:()=>{var me;(me=re.current)==null||me.focus()}})),o.useEffect(()=>{let me;return R.isOpen&&(me=()=>{q({isOpen:!1})},window.addEventListener("resize",me)),()=>{me&&window.removeEventListener("resize",me)}},[R.isOpen]),Io({isOpen:R.isOpen,rootRef:re});const Pt=Y(V||"sps-select",R.isOpen&&"sps-select--open",R.isOpen&&"z-stratum-dropdown",R.opensUpward&&"sps-select--opens-upward",s),je=R.text||w||U("design-system:select.defaultPlaceholder");return o.createElement(at,{id:se,className:Pt,onKeyDown:Oe,formControl:p,formMeta:m,ref:re,role:"listbox","aria-owns":R.optionIds,"data-testid":L,onClick:y,...$},o.createElement("div",{className:Y("sps-select__dropctrl",c&&"disabled"),id:W,tabIndex:0,onClick:we,ref:ne,title:je,"data-testid":`${L}-dropctrl`},o.createElement("div",{className:"sps-select__dropctrl-content"},o.createElement("span",{className:Y("sps-select__value",!R.text&&"sps-select__value--placeholder"),"data-testid":`${L}-value`},je),R.value&&!u&&!c&&o.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:le,"data-testid":`${L}-clear-value`}),o.createElement("i",{className:"sps-icon sps-icon-chevron-down sps-select__dropctrl-icon"}))),o.createElement(Rr,{id:`${se}-options`,ref:z,attachTo:ne,captionKey:a,comparisonKey:l,isOpen:R.isOpen,keyDown:R.keyDown,options:h,onOptionSelected:ae,onPositionFlip:dt,onSelfToggle:ot,searchDebounce:E,searchPlaceholder:N,selectedOption:R.value,specialAction:n,tall:M,textKey:I,filterByTextAndCaptionKey:O,optionRole:"option",valueKey:k,onOptionListChanged:it,zeroState:C,ignoreWidthStyles:r,loading:P,maxHeightPx:K,maxHeightRem:j,disableOptionsMemoization:ee,disableDefaultOptionsFiltering:A,"data-testid":`${L}-option-list`,typeaheadEvent:oe}))});Object.assign(Yn,{props:HE,displayName:"SpsSelect"});const nu={general:{label:"General Usage",description:({NavigateTo:e})=>x.createElement(x.Fragment,null,x.createElement("h5",null,"Use a Select:"),x.createElement("ul",null,x.createElement("li",{className:"mb-2"},"When a list of predetermined values can be provided.")),x.createElement("h5",null,"Do Not Use a Select:"),x.createElement("ul",null,x.createElement("li",{className:"mb-2"},"When there are only two possible options. Consider"," ",x.createElement(e,{to:"checkbox"},"Checkboxes")," or"," ",x.createElement(e,{to:"radio-buttons"},"Radio Buttons")," insead."),x.createElement("li",{className:"mb-2"},"When it is ideal to display all available options without requiring a click. Consider"," ",x.createElement(e,{to:"checkbox"},"Checkboxes")," or"," ",x.createElement(e,{to:"radio-buttons"},"Radio Buttons")," insead.")),x.createElement("h5",null,"Using Selects in a Form"),x.createElement("p",null,"Reference the ",x.createElement(e,{to:"form"},"Forms")," page for guidelines for placing inputs in Form layouts"))},basic:{label:"Basic Selects",description:()=>x.createElement("p",null,"Basic Selects include a label and dropdown menu containing a list of options. The user is allowed to make a single selection."),examples:{basic:{react:v.code`
           import { SpsLabel, SpsSelect, useSpsForm } from "@spscommerce/ds-react";
           function DemoComponent() {
             const colors = ["red", "blue", "green"];
@@ -2703,7 +2703,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                     </SpsTable>
                   )
                 }
-              `}}}},QE={checked:"boolean",onChange:"ChangeEventHandler",indeterminate:"boolean",disabled:"boolean",options:"Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"};function gi(e){const{options:t,className:n,checked:r,onChange:a,indeterminate:s,disabled:l,"data-testid":c,...p}=e,m=Y("sps-checkbox-dropdown",n);return o.createElement("span",{className:m,"data-testid":c,...p},o.createElement(Fn,{indeterminate:s,checked:r,disabled:l,onChange:a,inline:!0,"data-testid":`${c}__checkbox`}),o.createElement(zn,{disabled:l,options:t,icon:G.SpsIcon.CHEVRON_DOWN,"data-testid":`${c}__dropdown`}))}Object.assign(gi,{props:QE,displayName:"SpsCheckboxDropdown"});const ew={errors:"ReactNodeOrRenderFn",formMeta:"SpsFormSetMeta<any>",legend:"string",hasRequiredFields:"boolean",optional:"boolean",enabled:"boolean",onToggled:"(isEnabled: boolean) => void",tooltip:"string",applyNestedStyles:"boolean"};function bi({children:e,className:t,errors:n,formArray:r,formGroup:a,formMeta:s,legend:l,unsafelyReplaceClassName:c,hasRequiredFields:p=!1,optional:m=!1,enabled:f=!1,onToggled:u,tooltip:h,applyNestedStyles:S,"data-testid":y,errorsTooltipTrigger:T=G.TooltipShowTrigger.CLICK,errorsTooltipPosition:w=G.Position.LEFT_MIDDLE}){const E=a||r,N=o.useRef(null),M=o.useRef(null),[I,k]=o.useState(xe.HIDDEN),[V,B]=o.useState(!1),[C,P]=o.useState(f);Ya(()=>{u==null||u(C)},[C]),o.useEffect(()=>{if(E||s){const j=E&&E.isFocused()||s&&s.isFocused();!V&&j?k(xe.VISIBLE):V&&!j&&k(xe.HIDDEN),B(j||!1)}});const O=Y(c||S?"nested-styles-fieldset":"sps-fieldset",(E&&!E.isPristine()&&E.invalid||s&&(!s.isValid()||!s.contentsAreValid()))&&"sps-fieldset--error",t,m&&!C&&"sps-fieldset--collapsed",p&&"sps-fieldset--required-fields");function K(){k(I===xe.VISIBLE?xe.HIDDEN:xe.VISIBLE)}return o.createElement("div",{className:"sps-fieldset-container"},o.createElement("fieldset",{className:O,"data-testid":y},o.createElement("legend",{className:"sps-fieldset__legend",ref:N,onMouseEnter:()=>k(xe.VISIBLE),onMouseLeave:()=>k(xe.DELAYED_HIDDEN),onClick:K},m&&o.createElement(Fn,{checked:C,className:"d-inline-flex pr-1",onChange:j=>{P(j.target.checked)},"data-testid":`${y}__checkbox`}),l,h&&o.createElement("span",{className:"sps-fieldset__legend-icon",ref:M},o.createElement(Vt,{icon:G.SpsIcon.INFO_CIRCLE,"data-testid":`${y}__info-icon`}))),h&&o.createElement(Lt,{for:M},h),!!n&&o.createElement(Lt,{for:N,kind:G.TooltipKind.ERROR,showOn:T,position:w,isShown:I},bt(n)),e))}Object.assign(bi,{props:ew,displayName:"SpsFieldset"});const bu={basic:{label:"Basic Fieldsets",description:"info about basic fieldsets",examples:{basic:{react:v.code`
+              `}}}},QE={checked:"boolean",onChange:"ChangeEventHandler",indeterminate:"boolean",disabled:"boolean",options:"Array<SpsActionMethod | [SpsActionDescriptor, () => void]>"};function gi(e){const{options:t,className:n,checked:r,onChange:a,indeterminate:s,disabled:l,"data-testid":c,...p}=e,m=Y("sps-checkbox-dropdown",n);return o.createElement("span",{className:m,"data-testid":c,...p},o.createElement(Fn,{indeterminate:s,checked:r,disabled:l,onChange:a,inline:!0,"data-testid":`${c}__checkbox`}),o.createElement(zn,{disabled:l,options:t,icon:G.SpsIcon.CHEVRON_DOWN,"data-testid":`${c}__dropdown`}))}Object.assign(gi,{props:QE,displayName:"SpsCheckboxDropdown"});const ew={errors:"ReactNodeOrRenderFn",formMeta:"SpsFormSetMeta<any>",legend:"string",hasRequiredFields:"boolean",optional:"boolean",enabled:"boolean",onToggled:"(isEnabled: boolean) => void",tooltip:"string",applyNestedStyles:"boolean"};function bi({children:e,className:t,errors:n,formArray:r,formGroup:a,formMeta:s,legend:l,unsafelyReplaceClassName:c,hasRequiredFields:p=!1,optional:m=!1,enabled:f=!1,onToggled:u,tooltip:h,applyNestedStyles:S,"data-testid":y,errorsTooltipTrigger:T=G.TooltipShowTrigger.CLICK,errorsTooltipPosition:w=G.Position.LEFT_MIDDLE}){const E=a||r,N=o.useRef(null),M=o.useRef(null),[I,k]=o.useState(xe.HIDDEN),[V,B]=o.useState(!1),[C,P]=o.useState(f);Ya(()=>{u==null||u(C)},[C]),o.useEffect(()=>{if(E||s){const j=E&&E.isFocused()||s&&s.isFocused();!V&&j?k(xe.VISIBLE):V&&!j&&k(xe.HIDDEN),B(j||!1)}});const O=Y(c||S?"nested-styles-fieldset":"sps-fieldset",(E&&!E.isPristine()&&E.invalid||s&&(!s.isValid()||!s.contentsAreValid()))&&"sps-fieldset--error",t,m&&!C&&"sps-fieldset--collapsed",p&&"sps-fieldset--required-fields");function K(){k(I===xe.VISIBLE?xe.HIDDEN:xe.VISIBLE)}return o.createElement("div",{className:"sps-fieldset-container"},o.createElement("fieldset",{className:O,"data-testid":y},o.createElement("legend",{className:"sps-fieldset__legend",ref:N,onMouseEnter:()=>k(xe.VISIBLE),onMouseLeave:()=>k(xe.DELAYED_HIDDEN),onClick:K},m&&o.createElement(Fn,{checked:C,className:"d-inline-flex pr-1",onChange:j=>{P(j.target.checked)},"data-testid":`${y}__checkbox`}),l,h&&o.createElement("span",{className:"sps-fieldset__legend-icon",ref:M},o.createElement(Vt,{icon:G.SpsIcon.INFO_CIRCLE,"data-testid":`${y}__info-icon`}))),h&&o.createElement(Lt,{for:M},h),!!n&&o.createElement(Lt,{for:N,kind:G.TooltipKind.ERROR,showOn:T,position:w,isShown:I},bt(n)),e))}Object.assign(bi,{props:ew,displayName:"SpsFieldset"});const bu={basic:{label:"Basic Content Sections",description:"info about basic content sections",examples:{basic:{react:v.code`
                     import {
                         useSpsForm,
                         SpsFieldset,
@@ -2726,7 +2726,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                         });
 
                         return <>
-                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend="Fieldset Legend" tooltip="Add a Tooltip">
+                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend="Content Section Legend" tooltip="Add a Tooltip">
                                 <div className="sfg-row">
                                     <div className="sfg-col-4">
                                         <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>
@@ -2754,7 +2754,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                             </SpsFieldset>
                         </>
                     }
-                `}}},b_nested:{label:"Nested Fieldsets",description:"info about nested fieldsets",examples:{nested:{react:v.code`
+                `}}},b_nested:{label:"Nested Content Sections",description:"info about nested content sections",examples:{nested:{react:v.code`
                     import {
                         useSpsForm,
                         SpsFieldset,
@@ -2781,7 +2781,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                         });
 
                         return <>
-                            <SpsFieldset formMeta={formMeta.fields.topFieldset} legend="Fieldset Legend">
+                            <SpsFieldset formMeta={formMeta.fields.topFieldset} legend="Content Section Legend">
                                 <div className="sfg-row">
                                     <div className="sfg-col-4">
                                         <SpsLabel for={formMeta.fields.topFieldset.fields.foo}>Foo</SpsLabel>
@@ -2791,7 +2791,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                                         ></SpsTextInput>
                                     </div>
                                 </div>
-                                <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested} legend="Nested Fieldset">
+                                <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested} legend="Nested Content Section">
                                     <div className="sfg-row">
                                         <div className="sfg-col-4">
                                             <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.bar}>Bar</SpsLabel>
@@ -2804,7 +2804,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                                             ))}
                                         </div>
                                     </div>
-                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2} legend="Doubly Nested Fieldset">
+                                    <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2} legend="Doubly Nested Content Section">
                                         <div className="sfg-row">
                                             <div className="sfg-col-4">
                                                 <SpsLabel for={formMeta.fields.topFieldset.fields.fsNested.fields.fsNested2.fields.baz}>Baz</SpsLabel>
@@ -2819,7 +2819,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                             </SpsFieldset>
                         </>
                     }
-                `}}},c_optional:{label:"Optional Fieldsets",description:"info about optional fieldsets",examples:{optional:{react:v.code`
+                `}}},c_optional:{label:"Optional Content Sections",description:"info about optional content sections",examples:{optional:{react:v.code`
                     import {
                         useSpsForm,
                         SpsFieldset,
@@ -2841,7 +2841,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                         }
 
                         return <>
-                            <SpsFieldset legend="Fieldset Legend" formMeta={formMeta.fields.optionalFieldset} optional enabled={false} onToggled={handleToggle}>
+                            <SpsFieldset legend="Content Section Legend" formMeta={formMeta.fields.optionalFieldset} optional enabled={false} onToggled={handleToggle}>
                                 <div className="sfg-row">
                                     <div className="sfg-col-4">
                                         <SpsLabel for={formMeta.fields.optionalFieldset.fields.foo}>Foo</SpsLabel>
@@ -2884,7 +2884,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                         }, [])
 
                         return <>
-                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend="Fieldset Legend">
+                            <SpsFieldset formMeta={formMeta.fields.myFieldset} legend="Content Section Legend">
                                 <div className="sfg-row">
                                     <div className="sfg-col-4">
                                         <SpsLabel for={formMeta.fields.myFieldset.fields.foo}>Foo</SpsLabel>
@@ -2896,7 +2896,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                             </SpsFieldset>
                         </>
                     }
-                `}}},e_topFieldset:{label:"Validation on Fieldset",description:"info about validation on fieldsets",examples:{validationOnFieldset:{react:v.code`
+                `}}},e_topFieldset:{label:"Validation on Content Section",description:"info about validation on content sections",examples:{validationOnFieldset:{react:v.code`
                     import {
                         useSpsForm,
                         SpsForm,
@@ -2941,7 +2941,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
 
                         return (
                             <SpsForm formMeta={formMeta}>
-                                <SpsFieldset formMeta={formMeta.fields.topFieldset} legend="Fieldset Legend">
+                                <SpsFieldset formMeta={formMeta.fields.topFieldset} legend="Content Section Legend">
                                     <div className="sfg-row">
                                         <div className="sfg-col-4">
                                             <SpsLabel for={formMeta.fields.topFieldset.fields.text}>Input</SpsLabel>
@@ -2952,7 +2952,7 @@ var r=n.defineLocale("zh-tw",{months:"一月_二月_三月_四月_五月_六月_
                                         </div>
                                     </div>
                                     <SpsFieldset formMeta={formMeta.fields.topFieldset.fields.nestedFieldset}
-                                        legend="Nested Fieldset"
+                                        legend="Nested Content Section"
                                         errors={() => formMeta.fields.topFieldset.fields.nestedFieldset.hasError("mustSelectAColor")
                                             && "If you choose Option B, you must select at least one color."}
                                     >

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "8.23.12",
+  "version": "8.23.14",
   "author": "SPS Commerce",
   "license": "UNLICENSED",
   "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
@@ -46,11 +46,11 @@
     "moment-timezone": "^0.5.28",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/illustrations": "8.23.12",
-    "@sps-woodland/tabs": "8.23.12",
-    "@spscommerce/ds-colors": "8.23.12",
-    "@spscommerce/ds-shared": "8.23.12",
-    "@spscommerce/positioning": "8.23.12"
+    "@sps-woodland/illustrations": "8.23.14",
+    "@sps-woodland/tabs": "8.23.14",
+    "@spscommerce/ds-colors": "8.23.14",
+    "@spscommerce/ds-shared": "8.23.14",
+    "@spscommerce/positioning": "8.23.14"
   },
   "devDependencies": {
     "@react-spectrum/provider": "^3.4.1",
@@ -72,12 +72,12 @@
     "raf-stub": "^2.0.2",
     "react": "^16.9.0",
     "react-dom": "^16.9.0",
-    "@sps-woodland/illustrations": "8.23.12",
-    "@sps-woodland/tabs": "8.23.12",
-    "@spscommerce/ds-colors": "8.23.12",
-    "@spscommerce/ds-shared": "8.23.12",
-    "@spscommerce/positioning": "8.23.12",
-    "test": "8.23.12"
+    "@sps-woodland/illustrations": "8.23.14",
+    "@sps-woodland/tabs": "8.23.14",
+    "@spscommerce/ds-colors": "8.23.14",
+    "@spscommerce/ds-shared": "8.23.14",
+    "@spscommerce/positioning": "8.23.14",
+    "test": "8.23.14"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",