@spscommerce/ds-react 8.20.17 → 8.21.0

package/lib/index.cjs.js

@@ -1510,7 +1510,7 @@ Valid keys: `+JSON.stringify(Object.keys(H),null,"  "));var oe=ae(Z,ce,Y,O,z+"."
                             </div>
                         );
                     }
-                `}}}},yN=ao||ti,TN={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>"},qn=s.forwardRef((e,t)=>{const{action:n,autoFixWidth:r=!1,captionKey:o,className:a,comparisonKey:l,disabled:c,formControl:p,formMeta:m,id:f,notClearable:u,options:h,onChange:S,onClick:y,onOpen:T,placeholder:E,searchDebounce:w,searchPlaceholder:N="Search…",tallOptionList:I,textKey:k,valueKey:x,unsafelyReplaceClassName:F,value:P,zeroState:C,loading:L,filterByTextAndCaptionKey:R,maxHeightOptionListPx:K,maxHeightOptionListRem:j,"data-testid":M,disableOptionsMemoization:Q,disableDefaultOptionsFiltering:B,onBeforeChange:ee,...V}=e,J=m||p,{wrapperId:se,controlId:H}=Tt(f,J),U=s.useRef(null),ne=s.useRef(null),te=s.useRef(null),{t:Y}=s.useContext(Ke),[O,z]=Zt({isOpen:!1,value:P,text:"",keyDown:null,opensUpward:!1,optionIds:""});function Z(he){z({value:he,text:he&&k?he[k]:he})}async function re(he){if(ee&&!await ee(he==null?void 0:he.value))return;Z(he);const ze=he&&x&&typeof he=="object"?he[x]:he;J&&(J.setValue(ze),J.markAsDirty()),S&&S(new kn({value:ze}))}s.useEffect(()=>{Z(P)},[P,k]);function ie(){re(void 0)}function ce(){z({isOpen:!1})}function ae(he){he.nativeEvent.stopImmediatePropagation(),c||z({isOpen:!O.isOpen})}function oe(he){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(he.key)>-1&&he.preventDefault(),he.persist(),z({keyDown:he}))}function Ee(he){z({isOpen:he})}function Be(he){z({opensUpward:he})}function qe(he){he.detail!==se&&z({isOpen:!1})}function ct(he){z({optionIds:new Array(he).fill("").map((ze,Ce)=>`${se}-options-option-${Ce}`).join(",")})}s.useEffect(()=>(document.addEventListener("click",ce),document.addEventListener("DropdownOpened",qe),()=>{document.removeEventListener("click",ce),document.removeEventListener("DropdownOpened",qe)}),[]),s.useLayoutEffect(()=>{if(r&&te.current&&U.current){U.current.style.width="";const ze=`${U.current.getBoundingClientRect().width+6}px`;U.current.style.width=ze,te.current.style.width=ze,te.current.style.maxWidth=ze}}),si(()=>{if(O.isOpen){ne.current&&yN(ne.current,{scrollMode:"if-needed"}),T==null||T();const he=document.createEvent("CustomEvent");he.initCustomEvent("DropdownOpened",!1,!1,se),document.dispatchEvent(he)}},[O.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{var he;(he=ne.current)==null||he.focus()}})),s.useEffect(()=>{let he;return O.isOpen&&(he=()=>{z({isOpen:!1})},window.addEventListener("resize",he)),()=>{he&&window.removeEventListener("resize",he)}},[O.isOpen]),io({isOpen:O.isOpen,rootRef:ne});const ut=G(F||"sps-select",O.isOpen&&"sps-select--open",O.isOpen&&"z-stratum-dropdown",O.opensUpward&&"sps-select--opens-upward",a),dt=O.text||E||Y("design-system:select.defaultPlaceholder");return s.createElement(lt,{id:se,className:ut,onKeyDown:oe,formControl:p,formMeta:m,ref:ne,role:"listbox","aria-owns":O.optionIds,"data-testid":M,onClick:y,...V},s.createElement("div",{className:G("sps-select__dropctrl",c&&"disabled"),id:H,tabIndex:0,onClick:ae,ref:te,title:dt,"data-testid":`${M}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:G("sps-select__value",!O.text&&"sps-select__value--placeholder"),"data-testid":`${M}-value`},dt),O.value&&!u&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:ie,"data-testid":`${M}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down"}))),s.createElement(as,{id:`${se}-options`,ref:U,attachTo:te,captionKey:o,comparisonKey:l,isOpen:O.isOpen,keyDown:O.keyDown,options:h,onOptionSelected:re,onPositionFlip:Be,onSelfToggle:Ee,searchDebounce:w,searchPlaceholder:N,selectedOption:O.value,specialAction:n,tall:I,textKey:k,filterByTextAndCaptionKey:R,optionRole:"option",valueKey:x,onOptionListChanged:ct,zeroState:C,ignoreWidthStyles:r,loading:L,maxHeightPx:K,maxHeightRem:j,disableOptionsMemoization:Q,disableDefaultOptionsFiltering:B,"data-testid":`${M}-option-list`}))});Object.assign(qn,{props:TN,displayName:"SpsSelect"});const lm={general:{label:"General Usage",description:({NavigateTo:e})=>_.createElement(_.Fragment,null,_.createElement("h5",null,"Use a Select:"),_.createElement("ul",null,_.createElement("li",{className:"mb-2"},"When a list of predetermined values can be provided.")),_.createElement("h5",null,"Do Not Use a Select:"),_.createElement("ul",null,_.createElement("li",{className:"mb-2"},"When there are only two possible options. Consider"," ",_.createElement(e,{to:"checkbox"},"Checkboxes")," or"," ",_.createElement(e,{to:"radio-buttons"},"Radio Buttons")," insead."),_.createElement("li",{className:"mb-2"},"When it is ideal to display all available options without requiring a click. Consider"," ",_.createElement(e,{to:"checkbox"},"Checkboxes")," or"," ",_.createElement(e,{to:"radio-buttons"},"Radio Buttons")," insead.")),_.createElement("h5",null,"Using Selects in a Form"),_.createElement("p",null,"Reference the ",_.createElement(e,{to:"form"},"Forms")," page for guidelines for placing inputs in Form layouts"))},basic:{label:"Basic Select",description:()=>_.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`
+                `}}}},yN=ao||ti,TN={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>"},qn=s.forwardRef((e,t)=>{const{action:n,autoFixWidth:r=!1,captionKey:o,className:a,comparisonKey:l,disabled:c,formControl:p,formMeta:m,id:f,notClearable:u,options:h,onChange:S,onClick:y,onOpen:T,placeholder:E,searchDebounce:w,searchPlaceholder:N="Search…",tallOptionList:I,textKey:k,valueKey:x,unsafelyReplaceClassName:F,value:P,zeroState:C,loading:L,filterByTextAndCaptionKey:R,maxHeightOptionListPx:K,maxHeightOptionListRem:j,"data-testid":M,disableOptionsMemoization:Q,disableDefaultOptionsFiltering:B,onBeforeChange:ee,...V}=e,J=m||p,{wrapperId:se,controlId:H}=Tt(f,J),U=s.useRef(null),ne=s.useRef(null),te=s.useRef(null),{t:Y}=s.useContext(Ke),[O,z]=Zt({isOpen:!1,value:P,text:"",keyDown:null,opensUpward:!1,optionIds:""});function Z(he){z({value:he,text:he&&k?he[k]:he})}async function re(he){if(ee&&!await ee(he==null?void 0:he.value))return;Z(he);const ze=he&&x&&typeof he=="object"?he[x]:he;J&&(J.setValue(ze),J.markAsDirty()),S&&S(new kn({value:ze}))}s.useEffect(()=>{Z(P)},[P,k]);function ie(){re(void 0)}function ce(){z({isOpen:!1})}function ae(he){he.nativeEvent.stopImmediatePropagation(),c||z({isOpen:!O.isOpen})}function oe(he){c||(["Up","ArrowUp","Down","ArrowDown"," ","Spacebar"].indexOf(he.key)>-1&&he.preventDefault(),he.persist(),z({keyDown:he}))}function Ee(he){z({isOpen:he})}function Be(he){z({opensUpward:he})}function qe(he){he.detail!==se&&z({isOpen:!1})}function ct(he){z({optionIds:new Array(he).fill("").map((ze,Ce)=>`${se}-options-option-${Ce}`).join(",")})}s.useEffect(()=>(document.addEventListener("click",ce),document.addEventListener("DropdownOpened",qe),()=>{document.removeEventListener("click",ce),document.removeEventListener("DropdownOpened",qe)}),[]),s.useLayoutEffect(()=>{if(r&&te.current&&U.current){U.current.style.width="";const ze=`${U.current.getBoundingClientRect().width+6}px`;U.current.style.width=ze,te.current.style.width=ze,te.current.style.maxWidth=ze}}),si(()=>{if(O.isOpen){ne.current&&yN(ne.current,{scrollMode:"if-needed"}),T==null||T();const he=document.createEvent("CustomEvent");he.initCustomEvent("DropdownOpened",!1,!1,se),document.dispatchEvent(he)}},[O.isOpen]),s.useImperativeHandle(t,()=>({focus:()=>{var he;(he=ne.current)==null||he.focus()}})),s.useEffect(()=>{let he;return O.isOpen&&(he=()=>{z({isOpen:!1})},window.addEventListener("resize",he)),()=>{he&&window.removeEventListener("resize",he)}},[O.isOpen]),io({isOpen:O.isOpen,rootRef:ne});const ut=G(F||"sps-select",O.isOpen&&"sps-select--open",O.isOpen&&"z-stratum-dropdown",O.opensUpward&&"sps-select--opens-upward",a),dt=O.text||E||Y("design-system:select.defaultPlaceholder");return s.createElement(lt,{id:se,className:ut,onKeyDown:oe,formControl:p,formMeta:m,ref:ne,role:"listbox","aria-owns":O.optionIds,"data-testid":M,onClick:y,...V},s.createElement("div",{className:G("sps-select__dropctrl",c&&"disabled"),id:H,tabIndex:0,onClick:ae,ref:te,title:dt,"data-testid":`${M}-dropctrl`},s.createElement("div",{className:"sps-select__dropctrl-content"},s.createElement("span",{className:G("sps-select__value",!O.text&&"sps-select__value--placeholder"),"data-testid":`${M}-value`},dt),O.value&&!u&&!c&&s.createElement("i",{className:"sps-icon sps-icon-x-circle sps-select__clear-btn",onClick:ie,"data-testid":`${M}-clear-value`}),s.createElement("i",{className:"sps-icon sps-icon-chevron-down sps-select__dropctrl-icon"}))),s.createElement(as,{id:`${se}-options`,ref:U,attachTo:te,captionKey:o,comparisonKey:l,isOpen:O.isOpen,keyDown:O.keyDown,options:h,onOptionSelected:re,onPositionFlip:Be,onSelfToggle:Ee,searchDebounce:w,searchPlaceholder:N,selectedOption:O.value,specialAction:n,tall:I,textKey:k,filterByTextAndCaptionKey:R,optionRole:"option",valueKey:x,onOptionListChanged:ct,zeroState:C,ignoreWidthStyles:r,loading:L,maxHeightPx:K,maxHeightRem:j,disableOptionsMemoization:Q,disableDefaultOptionsFiltering:B,"data-testid":`${M}-option-list`}))});Object.assign(qn,{props:TN,displayName:"SpsSelect"});const lm={general:{label:"General Usage",description:({NavigateTo:e})=>_.createElement(_.Fragment,null,_.createElement("h5",null,"Use a Select:"),_.createElement("ul",null,_.createElement("li",{className:"mb-2"},"When a list of predetermined values can be provided.")),_.createElement("h5",null,"Do Not Use a Select:"),_.createElement("ul",null,_.createElement("li",{className:"mb-2"},"When there are only two possible options. Consider"," ",_.createElement(e,{to:"checkbox"},"Checkboxes")," or"," ",_.createElement(e,{to:"radio-buttons"},"Radio Buttons")," insead."),_.createElement("li",{className:"mb-2"},"When it is ideal to display all available options without requiring a click. Consider"," ",_.createElement(e,{to:"checkbox"},"Checkboxes")," or"," ",_.createElement(e,{to:"radio-buttons"},"Radio Buttons")," insead.")),_.createElement("h5",null,"Using Selects in a Form"),_.createElement("p",null,"Reference the ",_.createElement(e,{to:"form"},"Forms")," page for guidelines for placing inputs in Form layouts"))},basic:{label:"Basic Select",description:()=>_.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"];

package/lib/index.es.js

@@ -12311,7 +12311,7 @@ const UD = {
             onClick: oe,
             "data-testid": `${M}-clear-value`
           }
-        ), /* @__PURE__ */ s.createElement("i", { className: "sps-icon sps-icon-chevron-down" }))
+        ), /* @__PURE__ */ s.createElement("i", { className: "sps-icon sps-icon-chevron-down sps-select__dropctrl-icon" }))
       ),
       /* @__PURE__ */ s.createElement(
         hs,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@spscommerce/ds-react",
   "description": "SPS Design System React components",
-  "version": "8.20.17",
+  "version": "8.21.0",
   "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.20.17",
-    "@sps-woodland/tabs": "8.20.17",
-    "@spscommerce/ds-colors": "8.20.17",
-    "@spscommerce/ds-shared": "8.20.17",
-    "@spscommerce/positioning": "8.20.17"
+    "@sps-woodland/illustrations": "8.21.0",
+    "@sps-woodland/tabs": "8.21.0",
+    "@spscommerce/ds-colors": "8.21.0",
+    "@spscommerce/ds-shared": "8.21.0",
+    "@spscommerce/positioning": "8.21.0"
   },
   "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/tabs": "8.20.17",
-    "@sps-woodland/illustrations": "8.20.17",
-    "@spscommerce/ds-shared": "8.20.17",
-    "@spscommerce/positioning": "8.20.17",
-    "@spscommerce/ds-colors": "8.20.17",
-    "test": "8.20.17"
+    "@sps-woodland/illustrations": "8.21.0",
+    "@sps-woodland/tabs": "8.21.0",
+    "@spscommerce/ds-colors": "8.21.0",
+    "@spscommerce/ds-shared": "8.21.0",
+    "@spscommerce/positioning": "8.21.0",
+    "test": "8.21.0"
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:types",