@spscommerce/ds-react 8.19.8 → 8.19.9

package/lib/index.cjs.js

@@ -1749,6 +1749,49 @@ Valid keys: `+JSON.stringify(Object.keys(P),null,"  "));var se=oe(X,ce,le,B,Z+".
               </div>
             )
           }
+        `}}},disableOptionsMemoization:{label:"Disable Options Memoization",description:()=>_.createElement("p",null,"Options Memoization is disabled to allow rerender of options upon change. Options function is memoized to prevent unnecessary rerenders."),examples:{basic:{react:v.code`
+          import {
+            SpsButton,
+            SpsLabel,
+            SpsSelect,
+            useSpsForm,
+          } from "@spscommerce/ds-react";
+          function DemoComponent() {
+            const { formValue, formMeta, updateForm } = useSpsForm({
+              color: "",
+              colors: ["red", "blue"],
+            });
+
+            const colorSearch = React.useCallback(
+              (search) => {
+                return formValue.colors.filter((s) => new RegExp(search, "i").test(s));
+              },
+              [formValue.colors]
+            );
+
+            return (
+              <div className="sfg-row">
+                <div className="sfg-col-4">
+                  <SpsLabel for={formMeta.fields.color}>Color</SpsLabel>
+                  <SpsSelect
+                    options={colorSearch}
+                    zeroState="While I'm sure that's a lovely color, it's not an option we support."
+                    formMeta={formMeta.fields.color}
+                    disableOptionsMemoization
+                  />
+                </div>
+                <div className="sfg-col-3 pt-3">
+                  <SpsButton
+                    onClick={() =>
+                      updateForm({ ...formValue, colors: [...formValue.colors, "green"] })
+                    }
+                  >
+                    Add Color
+                  </SpsButton>
+                </div>
+              </div>
+            );
+          }
         `}}}},TN={formMeta:"SpsFormSetMeta<any>",stacked:"boolean"};function wr({children:e,className:t,formArray:n,formGroup:r,formMeta:o,stacked:a,"data-testid":l,unsafelyReplaceClassName:c,...p}){const m=r||n,f=m||o,[u,h]=s.useState(!1);s.useEffect(()=>{if(f){const y=f.isFocused();!u&&y&&f.onFocus?f.onFocus():u&&!y&&f.onBlur&&f.onBlur(),h(y)}});const S=W(c||"sps-form-group",(m&&m.invalid||o&&(!o.isValid()||!o.contentsAreValid()))&&"sps-form-group--error",t);return s.createElement("div",{className:S,"data-testid":l,...p},s.createElement("div",{className:W("sps-input-group",a&&"sps-input-group--stacked")},e))}Object.assign(wr,{props:TN,displayName:"SpsInputGroup"});const EN={disabled:"boolean",formMeta:"SpsFormFieldMeta<SimpleMomentRange>",maxDate:"SimpleDate",minDate:"SimpleDate",onChange:"(newMomentRange: SimpleMomentRange) => void",presets:"Array<DateTimePreset>",value:"SimpleMomentRange",showTwoMonths:"boolean",twentyFourHour:"boolean",format:"string",placeholder12h:"string",placeholder24h:"string"},Wd="sps-datepicker",Gd=["AM","PM"],cm=[{definition:"P0D",label:"design-system:datepicker.preset.today"},{definition:"() => [null, {month: 1, date: 1, year: 3000}]",label:"design-system:datepicker.preset.before"},{definition:"() => [{month: 1, date: 1, year: 1990}, null]",label:"design-system:datepicker.preset.after"},{definition:"P7D",label:"design-system:datepicker.preset.sevenDays"},{definition:"P30D",label:"design-system:datepicker.preset.thirtyDays"},{definition:"P60D",label:"design-system:datepicker.preset.sixtyDays"},{definition:"P90D",label:"design-system:datepicker.preset.ninetyDays"},{definition:"P1Y",label:"design-system:datepicker.preset.oneYear"}];function Gi({className:e,disabled:t,formMeta:n,id:r,maxDate:o,minDate:a,onChange:l,presets:c=cm,value:p,showTwoMonths:m=!1,twentyFourHour:f=!1,format:u,"data-testid":h,placeholder24h:S="00:00",placeholder12h:y="12:00"}){const{t:E}=s.useContext(Ke),{wrapperId:T,controlId:w}=Tt(r&&`${r}_from`,n),{wrapperId:N,controlId:I}=Tt(r&&`${r}_to`,n),x=s.useRef(null),k=s.useRef(null),F=s.useRef(null),L=s.useRef(null),C=s.useRef(null),O=Q.splitMomentInDateTimeParts(Array.isArray(p)?p[0]:void 0,f,u),R=Q.splitMomentInDateTimeParts(Array.isArray(p)?p[1]:void 0,f,u),[$,j]=s.useState(O[0]),[M,Y]=s.useState(R[0]),[G,z]=s.useState(O[1]),[K,J]=s.useState(R[1]),[re,P]=s.useState(O[2]),[U,te]=s.useState(R[2]),[ee,le]=s.useState(null),{showPopup:B,doShowPopup:Z,doHidePopup:X}=Nr(x,C);function ne(pe){n&&(n.setValue(pe),n.markAsDirty()),l&&l(pe)}function ae(pe){return pe&&/^design-system:/.test(pe.label)?E(pe.label):pe.label}const ce=ee&&ae(ee)==="Before",oe=ee&&ae(ee)==="After";function se(pe){const fe=p||[],Me=Q.toMoment(pe);let st;if(ce)st=[null,Me],X(!0);else if(oe)st=[Me,null],X(!0);else if(!fe[0]||fe[1]||Me!=null&&Me.isBefore(fe[0])){let De=parseInt((G==null?void 0:G.split(":")[0])||"0",10);!f&&De===12&&(De=0);const mt=parseInt((G==null?void 0:G.split(":")[1])||"0",10);Me==null||Me.set("hour",re==="PM"?12+De:De<12?De:0),Me==null||Me.set("minute",mt),st=[Me,null],le(null)}else{let De=parseInt((K==null?void 0:K.split(":")[0])||"0",10);!f&&De===12&&(De=0);const mt=parseInt((K==null?void 0:K.split(":")[1])||"0",10);Me==null||Me.set("hour",U==="PM"?12+De:De),Me==null||Me.set("minute",mt),st=[fe[0],Me],X(!0),le(null)}ne(st)}function Ee(pe){j(pe.target.value)}function Be(pe){Q.validateTimeString(pe.target.value,f)&&z(pe.target.value)}function qe(pe,fe,Me){const st=$,De=fe??G,mt=re;if(st===O[0]&&De===O[1]&&mt===O[2])return;const bt=Q.createFrom(st,u);if(bt&&Q.isValid(bt)){const Oe=Q.toMoment(bt);let ot=parseInt((De==null?void 0:De.split(":")[0])||"0",10);!f&&ot===12&&(ot=0);const Rn=parseInt((De==null?void 0:De.split(":")[1])||"0",10);Oe==null||Oe.set("hour",mt==="PM"?12+ot:ot),Oe==null||Oe.set("minute",Rn);const Pt=[Oe,(Oe==null?void 0:Oe.isBefore(p==null?void 0:p[1]))&&(p==null?void 0:p[1])||null];ne(Pt)}}function ct(pe){Q.validateTimeString(pe??G,f)&&(z(Q.padIncompleteTimeString(pe??G,f)),setTimeout(()=>qe(void 0,pe),0))}function ut(pe){P(pe.target.value)}function dt(pe){Q.validateTimeString(pe,f)&&(z(pe),setTimeout(()=>ct(pe),0))}s.useEffect(()=>{re!==O[2]&&qe()},[re]);function he(pe){Y(pe.target.value)}function ze(pe){Q.validateTimeString(pe.target.value,f)&&J(pe.target.value)}function Ce(pe,fe,Me){const st=M,De=fe??K,mt=U;if(st===R[0]&&De===R[1]&&mt===R[2])return;const bt=Q.createFrom(st,u);if(bt&&Q.isValid(bt)){const Oe=Q.toMoment(bt);let ot=parseInt((De==null?void 0:De.split(":")[0])||"0",10);!f&&ot===12&&(ot=0);const Rn=parseInt((De==null?void 0:De.split(":")[1])||"0",10);Oe==null||Oe.set("hour",mt==="PM"?12+ot:ot),Oe==null||Oe.set("minute",Rn);const Pt=[(Oe==null?void 0:Oe.isAfter(p==null?void 0:p[0]))&&(p==null?void 0:p[0])||null,Oe];ne(Pt)}}function ve(pe){Q.validateTimeString(pe??K,f)&&(J(Q.padIncompleteTimeString(pe??K,f)),setTimeout(()=>Ce(void 0,pe),0))}function xe(pe){te(pe.target.value)}function Ze(pe){Q.validateTimeString(pe,f)&&(J(pe),setTimeout(()=>ve(pe),0))}s.useEffect(()=>{U!==R[2]&&Ce()},[U]);function Ae(){ne([null,null]),le(null)}function Xe(pe){return function(fe){switch(fe.key){case"Tab":X();break;case"Backspace":fe.target.selectionStart===0&&p&&!Array.isArray(p)&&Ae();break;case"Enter":pe==="from"?qe():pe==="to"&&Ce();break}}}function Yt(pe){if(!pe){le(null),ne([null,null]);return}le(pe);const fe=Q.createDateTimeRangeFromPreset(pe);pe&&ae(pe)==="Before"?!p||Array.isArray(p)&&p[0]&&p[1]?ne([null,null]):Array.isArray(p)&&p[0]?ne([null,Q.toMoment(Q.createFrom(p[0],u))]):Array.isArray(p)&&p[1]&&ne([null,Q.toMoment(Q.createFrom(p[1],u))]):pe&&ae(pe)==="After"?!p||Array.isArray(p)&&p[0]&&p[1]?ne([null,null]):Array.isArray(p)&&p[0]?ne([Q.toMoment(Q.createFrom(p[0],u)),null]):Array.isArray(p)&&p[1]&&ne([Q.toMoment(Q.createFrom(p[1],u)),null]):JSON.stringify(p)!==JSON.stringify(fe)&&ne([fe[0],fe[1]])}s.useEffect(()=>{if(p&&Array.isArray(p)){if(p[0]&&!p[1]){const pe=c.find(fe=>ae(fe)==="After");pe&&Yt(pe)}else if(!p[0]&&p[1]){const pe=c.find(fe=>ae(fe)==="Before");pe&&Yt(pe)}else if(p[0]&&p[1]){const pe=Q.toDateTimeStringRange(p,f,u),fe=c.find(Me=>pe===Q.toDateTimeStringRange(Q.createDateTimeRangeFromPreset(Me),f,u));fe&&Yt(fe)}}},[]),s.useEffect(()=>{O[0]?j(O[0]):j(""),O[1]?z(O[1]):z(f?"00:00":"12:00"),f||(O[2]?P(O[2]):P("AM")),R[0]?Y(R[0]):Y(""),R[1]?J(R[1]):J(f?"00:00":"12:00"),f||(R[2]?te(R[2]):te("AM"))},[O[0],O[1],O[2],R[0],R[1],R[2],f]);const hn=W(Wd,"sps-text-input",B&&`${Wd}--open`,e);return s.createElement(s.Fragment,null,s.createElement("div",{className:W("sps-datetime-range-picker")},s.createElement("div",{className:W("sps-datetime-range-picker__pair")},s.createElement(lt,{id:T,className:hn,formMeta:n,inputRef:k,focusInputOnClick:!0,ref:x},s.createElement("div",{className:W("sps-form-control",t&&"disabled")},s.createElement("i",{className:W("sps-text-input__icon","sps-icon","sps-icon-calendar")}),ee&&s.createElement("div",{"data-testid":`${h}_selected_preset`,className:"sps-datepicker__selected-preset"},s.createElement("span",{className:"sps-tag sps-tag--info"},ae(ee))),s.createElement("input",{type:"text",ref:k,className:"sps-text-input__input","data-testid":`${h}_from_date_input`,id:w,placeholder:!$&&!ee?(u==null?void 0:u.toUpperCase())||vr:ce?R[0]:oe?O[0]:void 0,onChange:Ee,onClick:Z,onFocus:Z,onBlur:()=>qe(),onKeyDown:Xe("from"),value:ee?"":$,disabled:t}),p&&!t&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:Ae}))),!ee&&!f?s.createElement(wr,null,s.createElement(jt,{className:"sps-time-input",placeholder:y,suggestions:ka,zeroState:"Custom time",value:G,onChange:Be,onBlur:()=>ct(),onSelectionChange:dt,disabled:t,inputNotClearable:!0,autoFocusOnSelection:!0}),s.createElement(jn,{options:Gd,value:re,onChange:ut,disabled:t,notClearable:!0})):s.createElement(jt,{className:"sps-time-input",placeholder:S,suggestions:Ia,zeroState:"Custom time",value:G,onChange:Be,onBlur:()=>ct(),onSelectionChange:dt,disabled:t,inputNotClearable:!0,autoFocusOnSelection:!0})),!ee&&s.createElement("span",{className:W("sps-datepicker__to")},"to"),!ee&&s.createElement("div",{className:W("sps-datetime-range-picker__pair")},s.createElement(lt,{id:N,className:hn,formMeta:n,inputRef:L,focusInputOnClick:!0,ref:F},s.createElement("div",{className:W("sps-form-control",t&&"disabled")},s.createElement("i",{className:W("sps-text-input__icon","sps-icon","sps-icon-calendar")}),ee&&s.createElement("div",{"data-testid":`${h}_selected_preset`,className:"sps-datepicker__selected-preset"},s.createElement("span",{className:"sps-tag sps-tag--info"},ae(ee))),s.createElement("input",{type:"text",ref:L,className:"sps-text-input__input","data-testid":`${h}_to_date_input`,id:I,placeholder:!M&&!ee?(u==null?void 0:u.toUpperCase())||vr:void 0,onChange:he,onClick:Z,onFocus:Z,onKeyDown:Xe("to"),onBlur:()=>Ce(),value:M,disabled:t}),p&&!t&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-form-control__clear-btn",onClick:Ae}))),f?s.createElement(jt,{className:"sps-time-input",placeholder:S,suggestions:Ia,zeroState:"Custom time",value:K,onChange:ze,onBlur:()=>ve(),onSelectionChange:Ze,disabled:t,inputNotClearable:!0,autoFocusOnSelection:!0}):s.createElement(wr,null,s.createElement(jt,{className:"sps-time-input",placeholder:y,suggestions:ka,zeroState:"Custom time",value:K,onChange:ze,onBlur:()=>ve(),onSelectionChange:Ze,disabled:t,inputNotClearable:!0,autoFocusOnSelection:!0}),s.createElement(jn,{options:Gd,value:U,onChange:xe,disabled:t,notClearable:!0})))),s.createElement(bo,{isOpen:B,attachTo:x,ref:C},s.createElement("div",{className:"sps-datepicker__presets"},s.createElement("fieldset",null,s.createElement("legend",{className:"sps-datepicker__presets-label"},E("design-system:datepicker.presetsLabel")),s.createElement("div",{className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},s.createElement("input",{"data-testid":`${h}_presets_custom_input`,type:"radio",id:`sps-date-range-picker-${T}__range-custom`,className:"sps-custom-control__input",checked:!ee,name:`sps-date-range-picker-${T}__range`,onChange:()=>Yt()}),s.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${T}__range-custom`},E("design-system:datepicker.preset.custom"))),c.map((pe,fe)=>s.createElement("div",{key:ae(pe),className:"sps-custom-control sps-custom-radio sps-custom-control--no-error"},s.createElement("input",{type:"radio","data-testid":`${h}_preset_option_${pe.label}`,id:`sps-date-range-picker-${T}__range-${fe}`,name:`sps-date-range-picker-${T}__range`,onChange:()=>Yt(pe),checked:ee!=null&&ee.definition?ee.definition===pe.definition:!1,className:"sps-custom-control__input"}),s.createElement("label",{className:"sps-custom-control__label",htmlFor:`sps-date-range-picker-${T}__range-${fe}`},ae(pe)))))),s.createElement(go,{"data-testid":`${h}_calendar`,selectedRange:Array.isArray(p)?[Q.createFrom(p[0],u),Q.createFrom(p[1],u)]:void 0,onNewSelection:se,minDate:a,maxDate:o,showTwoMonths:m,selectedPreset:ee&&ae(ee)})))}Object.assign(Gi,{props:EN,displayName:"SpsDateTimeRangePicker"});const dm={basic:{label:"Basic",examples:{basic:{react:v.code`
                     import {
                         useSpsForm,