@spscommerce/ds-react 8.56.13 → 8.56.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.js +18 -8
- package/lib/index.umd.cjs +1 -1
- package/package.json +12 -12
package/lib/index.js
CHANGED
|
@@ -11753,14 +11753,24 @@ var Em = {
|
|
|
11753
11753
|
e.nativeEvent.stopImmediatePropagation(), l || U({ isOpen: !H.isOpen });
|
|
11754
11754
|
}
|
|
11755
11755
|
function ue(e) {
|
|
11756
|
-
l
|
|
11757
|
-
|
|
11758
|
-
|
|
11759
|
-
|
|
11760
|
-
|
|
11761
|
-
|
|
11762
|
-
|
|
11763
|
-
|
|
11756
|
+
if (!l) {
|
|
11757
|
+
if (!H.isOpen && [
|
|
11758
|
+
"Enter",
|
|
11759
|
+
" ",
|
|
11760
|
+
"Spacebar"
|
|
11761
|
+
].includes(e.key)) {
|
|
11762
|
+
e.preventDefault(), U({ isOpen: !0 });
|
|
11763
|
+
return;
|
|
11764
|
+
}
|
|
11765
|
+
[
|
|
11766
|
+
"Up",
|
|
11767
|
+
"ArrowUp",
|
|
11768
|
+
"Down",
|
|
11769
|
+
"ArrowDown",
|
|
11770
|
+
" ",
|
|
11771
|
+
"Spacebar"
|
|
11772
|
+
].includes(e.key) && e.preventDefault(), an.includes(e.key) && (e.preventDefault(), ie(_n(e))), U({ keyDown: _n(e) });
|
|
11773
|
+
}
|
|
11764
11774
|
}
|
|
11765
11775
|
function de(e) {
|
|
11766
11776
|
U({ isOpen: e });
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1647,7 +1647,7 @@ Valid keys: `+JSON.stringify(Object.keys(e),null,` `));var p=f(l,d,o,s,c+`.`+d,
|
|
|
1647
1647
|
</SpsLocaleProvider>
|
|
1648
1648
|
);
|
|
1649
1649
|
}
|
|
1650
|
-
`}}}},Sp=Ue||Ve,Cp={action:`SpsActionMethod`,captionKey:`string`,comparisonKey:`string`,conformWidth:`boolean`,disabled:`boolean`,disabledOptions:`any[]`,formMeta:`SpsFormFieldMeta<any>`,notClearable:`boolean`,options:`Eventually<any[]> | (filter?: string) => Eventually<any[]>`,onChange:`ChangeEventHandler`,onSearchChange:`(searchText: string) => void`,onOpen:`OnOpenHandler`,placeholder:`string`,searchDebounce:`number`,searchPlaceholder:`string`,showInlineSearch:`boolean`,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>`},wp=y.forwardRef((e,t)=>{let{action:n,autoFixWidth:r=!1,captionKey:i,className:o,comparisonKey:s,conformWidth:c,disabled:l,disabledOptions:u,formControl:d,formMeta:f,id:p,notClearable:m,options:h,onChange:g,onSearchChange:_,onClick:v,onOpen:b,placeholder:S,searchDebounce:C,searchPlaceholder:w,showInlineSearch:E,tallOptionList:D,textKey:O,valueKey:k,unsafelyReplaceClassName:A,value:j,zeroState:M,loading:N,filterByTextAndCaptionKey:P,maxHeightOptionListPx:F,maxHeightOptionListRem:I,"data-testid":L,disableOptionsMemoization:R,disableDefaultOptionsFiltering:ee,onBeforeChange:z,...B}=e,V=f||d,{wrapperId:te,controlId:ne}=T(p,V),re=y.useRef(null),ie=y.useRef(null),H=y.useRef(null),{t:U}=(0,a.useWoodlandLanguage)(),[W,G]=it({isOpen:!1,value:j,text:``,keyDown:null,opensUpward:!1,optionIds:``}),[ae,oe]=y.useState();function se(e){G({value:e,text:e&&O?e[O]:e})}async function K(e){let t=e&&k&&typeof e==`object`?e[k]:e;(!z||await z(t))&&(se(e),V&&(V.setValue(t),V.markAsDirty()),g&&g(new nt({value:t})))}y.useEffect(()=>{se(j)},[j,O]);function ce(){K(void 0)}function le(){G({isOpen:!1})}function ue(e){e.nativeEvent.stopImmediatePropagation(),l||G({isOpen:!W.isOpen})}function de(e){l
|
|
1650
|
+
`}}}},Sp=Ue||Ve,Cp={action:`SpsActionMethod`,captionKey:`string`,comparisonKey:`string`,conformWidth:`boolean`,disabled:`boolean`,disabledOptions:`any[]`,formMeta:`SpsFormFieldMeta<any>`,notClearable:`boolean`,options:`Eventually<any[]> | (filter?: string) => Eventually<any[]>`,onChange:`ChangeEventHandler`,onSearchChange:`(searchText: string) => void`,onOpen:`OnOpenHandler`,placeholder:`string`,searchDebounce:`number`,searchPlaceholder:`string`,showInlineSearch:`boolean`,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>`},wp=y.forwardRef((e,t)=>{let{action:n,autoFixWidth:r=!1,captionKey:i,className:o,comparisonKey:s,conformWidth:c,disabled:l,disabledOptions:u,formControl:d,formMeta:f,id:p,notClearable:m,options:h,onChange:g,onSearchChange:_,onClick:v,onOpen:b,placeholder:S,searchDebounce:C,searchPlaceholder:w,showInlineSearch:E,tallOptionList:D,textKey:O,valueKey:k,unsafelyReplaceClassName:A,value:j,zeroState:M,loading:N,filterByTextAndCaptionKey:P,maxHeightOptionListPx:F,maxHeightOptionListRem:I,"data-testid":L,disableOptionsMemoization:R,disableDefaultOptionsFiltering:ee,onBeforeChange:z,...B}=e,V=f||d,{wrapperId:te,controlId:ne}=T(p,V),re=y.useRef(null),ie=y.useRef(null),H=y.useRef(null),{t:U}=(0,a.useWoodlandLanguage)(),[W,G]=it({isOpen:!1,value:j,text:``,keyDown:null,opensUpward:!1,optionIds:``}),[ae,oe]=y.useState();function se(e){G({value:e,text:e&&O?e[O]:e})}async function K(e){let t=e&&k&&typeof e==`object`?e[k]:e;(!z||await z(t))&&(se(e),V&&(V.setValue(t),V.markAsDirty()),g&&g(new nt({value:t})))}y.useEffect(()=>{se(j)},[j,O]);function ce(){K(void 0)}function le(){G({isOpen:!1})}function ue(e){e.nativeEvent.stopImmediatePropagation(),l||G({isOpen:!W.isOpen})}function de(e){if(!l){if(!W.isOpen&&[`Enter`,` `,`Spacebar`].includes(e.key)){e.preventDefault(),G({isOpen:!0});return}[`Up`,`ArrowUp`,`Down`,`ArrowDown`,` `,`Spacebar`].includes(e.key)&&e.preventDefault(),$e.includes(e.key)&&(e.preventDefault(),oe(dt(e))),G({keyDown:dt(e)})}}function fe(e){G({isOpen:e})}function pe(e){G({opensUpward:e})}function me(e){e.detail!==te&&G({isOpen:!1})}function he(e){G({optionIds:Array(e).fill(``).map((e,t)=>`${te}-options-option-${t}`).join(`,`)})}let ge=y.useCallback(e=>{_?.(e.target.value)},[_]);y.useEffect(()=>(document.addEventListener(`click`,le),document.addEventListener(`DropdownOpened`,me),()=>{document.removeEventListener(`click`,le),document.removeEventListener(`DropdownOpened`,me)}),[]),y.useLayoutEffect(()=>{if(r&&H.current&&re.current){re.current.style.width=``;let e=`${re.current.getBoundingClientRect().width+6}px`;re.current.style.width=e,H.current.style.width=e,H.current.style.maxWidth=e}}),bt(()=>{if(W.isOpen){ie.current&&Sp(ie.current,{scrollMode:`if-needed`}),b?.();let e=document.createEvent(`CustomEvent`);e.initCustomEvent(`DropdownOpened`,!1,!1,te),document.dispatchEvent(e)}},[W.isOpen]),y.useImperativeHandle(t,()=>({focus:()=>{ie.current?.focus()}})),y.useEffect(()=>{let e;return W.isOpen&&(e=()=>{G({isOpen:!1})},window.addEventListener(`resize`,e)),()=>{e&&window.removeEventListener(`resize`,e)}},[W.isOpen]),Ot({isOpen:W.isOpen,rootRef:ie});let _e=x(A||`sps-select`,W.isOpen&&`sps-select--open`,W.isOpen&&`z-stratum-dropdown`,W.opensUpward&&`sps-select--opens-upward`,o),ve=W.text||S||U(`select.defaultPlaceholder`,{defaultValue:`Select one...`});return y.createElement(Pe,{id:te,className:_e,onKeyDown:de,formControl:d,formMeta:f,ref:ie,role:`listbox`,"aria-owns":W.optionIds,"data-testid":L,onClick:v,...B},y.createElement(`div`,{className:x(`sps-select__dropctrl`,l&&`disabled`),id:ne,tabIndex:0,onClick:ue,ref:H,title:ve,"data-testid":`${L}-dropctrl`},y.createElement(`div`,{className:`sps-select__dropctrl-content`},y.createElement(`span`,{className:x(`sps-select__value`,!W.text&&`sps-select__value--placeholder`),"data-testid":`${L}-value`},ve),W.value&&!m&&!l&&y.createElement(`i`,{className:`sps-icon sps-icon-x-circle sps-select__clear-btn`,onClick:ce,"data-testid":`${L}-clear-value`}),y.createElement(`i`,{className:`sps-icon sps-icon-chevron-down sps-select__dropctrl-icon`}))),y.createElement(ut,{id:`${te}-options`,ref:re,attachTo:H,captionKey:i,comparisonKey:s,disabledOptions:u,isOpen:W.isOpen,keyDown:W.keyDown,options:h,onOptionSelected:K,onPositionFlip:pe,onSelfToggle:fe,onSearchChange:ge,searchDebounce:C,searchPlaceholder:w,showInlineSearch:E,selectedOption:W.value,specialAction:n,tall:D,textKey:O,filterByTextAndCaptionKey:P,optionRole:`option`,valueKey:k,onOptionListChanged:he,zeroState:M,ignoreWidthStyles:r,loading:N,maxHeightPx:F,maxHeightRem:I,disableOptionsMemoization:R,disableDefaultOptionsFiltering:ee,"data-testid":`${L}-option-list`,typeaheadEvent:ae,conformWidth:c}))});Object.assign(wp,{props:Cp,displayName:`SpsSelect`});var Tp={general:{label:`General Usage`,description:({NavigateTo:e})=>y.default.createElement(y.default.Fragment,null,y.default.createElement(`h5`,null,`Use a Select:`),y.default.createElement(`ul`,null,y.default.createElement(`li`,{className:`mb-2`},`When a list of predetermined values can be provided.`)),y.default.createElement(`h5`,null,`Do Not Use a Select:`),y.default.createElement(`ul`,null,y.default.createElement(`li`,{className:`mb-2`},`When there are only two possible options. Consider`,` `,y.default.createElement(e,{to:`checkbox`},`Checkboxes`),` or`,` `,y.default.createElement(e,{to:`radio-buttons`},`Radio Buttons`),` insead.`),y.default.createElement(`li`,{className:`mb-2`},`When it is ideal to display all available options without requiring a click. Consider`,` `,y.default.createElement(e,{to:`checkbox`},`Checkboxes`),` or`,` `,y.default.createElement(e,{to:`radio-buttons`},`Radio Buttons`),` insead.`)),y.default.createElement(`h5`,null,`Using Selects in a Form`),y.default.createElement(`p`,null,`Reference the `,y.default.createElement(e,{to:`form`},`Forms`),` page for guidelines for placing inputs in Form layouts`))},basic:{label:`Basic Selects`,description:()=>y.default.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:n.code`
|
|
1651
1651
|
import { SpsLabel, SpsSelect, useSpsForm } from "@spscommerce/ds-react";
|
|
1652
1652
|
function DemoComponent() {
|
|
1653
1653
|
const colors = ["red", "blue", "green"];
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spscommerce/ds-react",
|
|
3
3
|
"description": "SPS Design System React components",
|
|
4
|
-
"version": "8.56.
|
|
4
|
+
"version": "8.56.15",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-react",
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
"moment-timezone": "^0.6.0",
|
|
47
47
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
48
48
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
49
|
-
"@sps-woodland/illustrations": "8.56.
|
|
50
|
-
"@spscommerce/ds-colors": "8.56.
|
|
51
|
-
"@spscommerce/ds-shared": "8.56.
|
|
52
|
-
"@spscommerce/i18n": "8.56.
|
|
53
|
-
"@spscommerce/positioning": "8.56.
|
|
49
|
+
"@sps-woodland/illustrations": "8.56.15",
|
|
50
|
+
"@spscommerce/ds-colors": "8.56.15",
|
|
51
|
+
"@spscommerce/ds-shared": "8.56.15",
|
|
52
|
+
"@spscommerce/i18n": "8.56.15",
|
|
53
|
+
"@spscommerce/positioning": "8.56.15"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"@react-stately/collections": "3.13.1",
|
|
@@ -70,12 +70,12 @@
|
|
|
70
70
|
"raf-stub": "3.0.0",
|
|
71
71
|
"react": "16.14.0",
|
|
72
72
|
"react-dom": "16.14.0",
|
|
73
|
-
"@sps-woodland/illustrations": "8.56.
|
|
74
|
-
"@spscommerce/ds-colors": "8.56.
|
|
75
|
-
"@spscommerce/
|
|
76
|
-
"@spscommerce/
|
|
77
|
-
"@spscommerce/positioning": "8.56.
|
|
78
|
-
"test": "8.56.
|
|
73
|
+
"@sps-woodland/illustrations": "8.56.15",
|
|
74
|
+
"@spscommerce/ds-colors": "8.56.15",
|
|
75
|
+
"@spscommerce/ds-shared": "8.56.15",
|
|
76
|
+
"@spscommerce/i18n": "8.56.15",
|
|
77
|
+
"@spscommerce/positioning": "8.56.15",
|
|
78
|
+
"test": "8.56.15"
|
|
79
79
|
},
|
|
80
80
|
"scripts": {
|
|
81
81
|
"build": "pnpm run build:js && pnpm run build:types",
|