@spectrum-web-components/number-field - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1-color-testing

package.json

 {
     "name": "@spectrum-web-components/number-field",
-    "version": "1.0.0",
+    "version": "1.0.1-color-testing",
     "publishConfig": {
@@ -61,10 +61,10 @@ "access": "public"
     "dependencies": {
-        "@internationalized/number": "^3.1.0",
-        "@spectrum-web-components/base": "^1.0.0",
-        "@spectrum-web-components/icon": "^1.0.0",
-        "@spectrum-web-components/icons-ui": "^1.0.0",
-        "@spectrum-web-components/infield-button": "^1.0.0",
-        "@spectrum-web-components/reactive-controllers": "^1.0.0",
-        "@spectrum-web-components/shared": "^1.0.0",
-        "@spectrum-web-components/textfield": "^1.0.0"
+        "@internationalized/number": "^3.6.0",
+        "@spectrum-web-components/base": "^1.0.1-color-testing",
+        "@spectrum-web-components/icon": "^1.0.1-color-testing",
+        "@spectrum-web-components/icons-ui": "^1.0.1-color-testing",
+        "@spectrum-web-components/infield-button": "^1.0.1-color-testing",
+        "@spectrum-web-components/reactive-controllers": "^1.0.1-color-testing",
+        "@spectrum-web-components/shared": "^1.0.1-color-testing",
+        "@spectrum-web-components/textfield": "^1.0.1-color-testing"
     },
@@ -81,3 +81,3 @@ "devDependencies": {
     ],
-    "gitHead": "5cf5d34645bf9494ebd20f64c42d1619523d2d84"
+    "gitHead": "17e14b4a9fa2c8b15df158ea7d77ce09bf50de82"
 }

src/NumberField.dev.js

@@ -366,2 +366,9 @@ "use strict";
     if (this.isComposing) {
+      if (event.data) {
+        const partialValue = this.convertValueToNumber(event.data);
+        if (Number.isNaN(partialValue)) {
+          this.inputElement.value = this.indeterminate ? indeterminatePlaceholder : this._trackingValue;
+          this.isComposing = false;
+        }
+      }
       event.stopPropagation();
@@ -398,2 +405,3 @@ return;
       this.inputElement.value = this.indeterminate ? indeterminatePlaceholder : this._trackingValue;
+      event.stopPropagation();
     }
@@ -563,3 +571,3 @@ const currentLength = value.length;
                               class="button step-up"
-                              aria-describedby=${this.helpTextId}
+                              aria-hidden="true"
                               label=${"Increase " + this.appliedLabel}
@@ -578,3 +586,3 @@ size=${this.size}
                               class="button step-down"
-                              aria-describedby=${this.helpTextId}
+                              aria-hidden="true"
                               label=${"Decrease " + this.appliedLabel}
@@ -597,3 +605,3 @@ size=${this.size}
     }
-    if (changes.has("value") || changes.has("max") || changes.has("min")) {
+    if (changes.has("value") || changes.has("max") || changes.has("min") || changes.has("step")) {
       const value = this.numberParser.parse(
@@ -603,4 +611,2 @@ this.formattedValue.replace(this._forcedUnit, "")
       this.value = value;
-    }
-    if (changes.has("step")) {
       this.clearValueFormatterCache();
@@ -607,0 +613,0 @@ }

src/NumberField.js

@@ -1,2 +0,2 @@
-"use strict";var y=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var a=(o,p,e,t)=>{for(var i=t>1?void 0:t?F(p,e):p,s=o.length-1,r;s>=0;s--)(r=o[s])&&(i=(t?r(p,e,i):r(i))||i);return t&&i&&y(p,e,i),i};import{NumberFormatter as c,NumberParser as v}from"@internationalized/number";import{html as l,nothing as C}from"@spectrum-web-components/base";import{property as u,query as E}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as P}from"@spectrum-web-components/base/src/streaming-listener.js";import{LanguageResolutionController as _,languageResolverUpdatedSymbol as V}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import w from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";import"@spectrum-web-components/infield-button/sp-infield-button.js";import{isAndroid as I,isIOS as b,isIPhone as x}from"@spectrum-web-components/shared/src/platform.js";import{TextfieldBase as N}from"@spectrum-web-components/textfield";import S from"@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";import R from"./number-field.css.js";export const FRAMES_PER_CHANGE=5,CHANGE_DEBOUNCE_MS=100,indeterminatePlaceholder="-",remapMultiByteCharacters={"\uFF11":"1","\uFF12":"2","\uFF13":"3","\uFF14":"4","\uFF15":"5","\uFF16":"6","\uFF17":"7","\uFF18":"8","\uFF19":"9","\uFF10":"0","\u3001":",","\uFF0C":",","\u3002":".","\uFF0E":".","\uFF05":"%","\uFF0B":"+",\u30FC:"-",\u4E00:"1",\u4E8C:"2",\u4E09:"3",\u56DB:"4",\u4E94:"5",\u516D:"6",\u4E03:"7",\u516B:"8",\u4E5D:"9",\u96F6:"0"};const g={s:o=>l`
+"use strict";var y=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var a=(o,p,e,t)=>{for(var i=t>1?void 0:t?F(p,e):p,s=o.length-1,r;s>=0;s--)(r=o[s])&&(i=(t?r(p,e,i):r(i))||i);return t&&i&&y(p,e,i),i};import{NumberFormatter as c,NumberParser as v}from"@internationalized/number";import{html as l,nothing as C}from"@spectrum-web-components/base";import{property as u,query as E}from"@spectrum-web-components/base/src/decorators.js";import{streamingListener as P}from"@spectrum-web-components/base/src/streaming-listener.js";import{LanguageResolutionController as _,languageResolverUpdatedSymbol as V}from"@spectrum-web-components/reactive-controllers/src/LanguageResolution.js";import w from"@spectrum-web-components/icon/src/spectrum-icon-chevron.css.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron100.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron200.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron50.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-chevron75.js";import"@spectrum-web-components/infield-button/sp-infield-button.js";import{isAndroid as I,isIOS as b,isIPhone as N}from"@spectrum-web-components/shared/src/platform.js";import{TextfieldBase as x}from"@spectrum-web-components/textfield";import S from"@spectrum-web-components/icon/src/icon-chevron-overrides.css.js";import R from"./number-field.css.js";export const FRAMES_PER_CHANGE=5,CHANGE_DEBOUNCE_MS=100,indeterminatePlaceholder="-",remapMultiByteCharacters={"\uFF11":"1","\uFF12":"2","\uFF13":"3","\uFF14":"4","\uFF15":"5","\uFF16":"6","\uFF17":"7","\uFF18":"8","\uFF19":"9","\uFF10":"0","\u3001":",","\uFF0C":",","\u3002":".","\uFF0E":".","\uFF05":"%","\uFF0B":"+",\u30FC:"-",\u4E00:"1",\u4E8C:"2",\u4E09:"3",\u56DB:"4",\u4E94:"5",\u516D:"6",\u4E03:"7",\u516B:"8",\u4E5D:"9",\u96F6:"0"};const g={s:o=>l`
         <sp-icon-chevron50
@@ -17,3 +17,3 @@ class="stepper-icon spectrum-UIIcon-Chevron${o}50"
         ></sp-icon-chevron200>
-    `};export class NumberField extends N{constructor(){super(...arguments);this.focused=!1;this._forcedUnit="";this.formatOptions={};this.hideStepper=!1;this.indeterminate=!1;this.keyboardFocused=!1;this.managedInput=!1;this.stepModifier=10;this._value=NaN;this._trackingValue="";this.decimalsChars=new Set([".",","]);this.valueBeforeFocus="";this.isIntentDecimal=!1;this.changeCount=0;this.languageResolver=new _(this);this.wasIndeterminate=!1;this.hasRecentlyReceivedPointerDown=!1;this.applyFocusElementLabel=e=>{this.appliedLabel=e};this.isComposing=!1}static get styles(){return[...super.styles,R,w,S]}set value(e){const t=this.validateInput(e);if(t===this.value)return;this.lastCommitedValue=t;const i=this._value;this._value=t,this.requestUpdate("value",i)}get value(){return this._value}get inputValue(){return this.indeterminate?this.formattedValue:this.inputElement.value}setValue(e=this.value){const t=this.lastCommitedValue;this.value=e,!(typeof t=="undefined"||t===this.value)&&(this.lastCommitedValue=this.value,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}get valueAsString(){return this._value.toString()}set valueAsString(e){this.value=this.numberParser.parse(e)}get formattedValue(){return isNaN(this.value)?"":this.numberFormatter.format(this.value)+(this.focused?"":this._forcedUnit)}convertValueToNumber(e){let t=e.split("").map(r=>remapMultiByteCharacters[r]||r).join("");const i=this.valueBeforeFocus.split("").filter(r=>this.decimalsChars.has(r)),s=new Set(i);if(b()&&this.inputElement.inputMode==="decimal"&&t!==this.valueBeforeFocus){const d=this.numberFormatter.formatToParts(1000.1).find(n=>n.type==="decimal").value;for(const n of s)!(n===d)&&!this.isIntentDecimal&&(t=t.replace(new RegExp(n,"g"),""));let m=!1;const h=t.split("");for(let n=h.length-1;n>=0;n--){const f=h[n];this.decimalsChars.has(f)&&(m?h[n]="":(h[n]=d,m=!0))}t=h.join("")}return this.numberParser.parse(t)}get _step(){var e;return typeof this.step!="undefined"?this.step:((e=this.formatOptions)==null?void 0:e.style)==="percent"?.01:1}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this.managedInput=!0,this.buttons.setPointerCapture(e.pointerId);const t=this.buttons.children[0].getBoundingClientRect(),i=this.buttons.children[1].getBoundingClientRect();this.findChange=s=>{s.clientX>=t.x&&s.clientY>=t.y&&s.clientX<=t.x+t.width&&s.clientY<=t.y+t.height?this.change=r=>this.increment(r.shiftKey?this.stepModifier:1):s.clientX>=i.x&&s.clientY>=i.y&&s.clientX<=i.x+i.width&&s.clientY<=i.y+i.height&&(this.change=r=>this.decrement(r.shiftKey?this.stepModifier:1))},this.findChange(e),this.startChange(e)}startChange(e){this.changeCount=0,this.doChange(e),this.safty=setTimeout(()=>{this.doNextChange(e)},400)}doChange(e){this.change(e)}handlePointermove(e){this.findChange(e)}handlePointerup(e){this.buttons.releasePointerCapture(e.pointerId),cancelAnimationFrame(this.nextChange),clearTimeout(this.safty),this.managedInput=!1,this.setValue()}doNextChange(e){return this.changeCount+=1,this.changeCount%FRAMES_PER_CHANGE===0&&this.doChange(e),requestAnimationFrame(()=>{this.nextChange=this.doNextChange(e)})}stepBy(e){if(this.disabled||this.readonly)return;const t=typeof this.min!="undefined"?this.min:0;let i=this.value;i+=e*this._step,isNaN(this.value)&&(i=t),i=this.valueWithLimits(i),this.requestUpdate(),this._value=this.validateInput(i),this.inputElement.value=this.numberFormatter.format(i),this.inputElement.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.indeterminate=!1,this.focus()}increment(e=1){this.stepBy(1*e)}decrement(e=1){this.stepBy(-1*e)}handleKeydown(e){if(!this.isComposing)switch(e.code){case"ArrowUp":e.preventDefault(),this.increment(e.shiftKey?this.stepModifier:1),this.setValue();break;case"ArrowDown":e.preventDefault(),this.decrement(e.shiftKey?this.stepModifier:1),this.setValue();break}}onScroll(e){e.preventDefault(),this.managedInput=!0;const t=e.shiftKey?e.deltaX/Math.abs(e.deltaX):e.deltaY/Math.abs(e.deltaY);t!==0&&!isNaN(t)&&(this.stepBy(t*(e.shiftKey?this.stepModifier:1)),clearTimeout(this.queuedChangeEvent),this.queuedChangeEvent=setTimeout(()=>{this.setValue()},CHANGE_DEBOUNCE_MS)),this.managedInput=!1}onFocus(){super.onFocus(),this._trackingValue=this.inputValue,this.keyboardFocused=!this.readonly&&!0,this.addEventListener("wheel",this.onScroll,{passive:!1}),this.valueBeforeFocus=this.inputElement.value}onBlur(e){super.onBlur(e),this.keyboardFocused=!this.readonly&&!1,this.removeEventListener("wheel",this.onScroll),this.isIntentDecimal=!1}handleFocusin(){this.focused=!this.readonly&&!0,this.keyboardFocused=!this.readonly&&!0}handleFocusout(){this.focused=!this.readonly&&!1,this.keyboardFocused=!this.readonly&&!1}handleChange(){const e=this.convertValueToNumber(this.inputValue);if(this.wasIndeterminate&&(this.wasIndeterminate=!1,this.indeterminateValue=void 0,isNaN(e))){this.indeterminate=!0;return}this.setValue(e),this.inputElement.value=this.formattedValue}handleCompositionStart(){this.isComposing=!0}handleCompositionEnd(){this.isComposing=!1,requestAnimationFrame(()=>{this.inputElement.dispatchEvent(new Event("input",{composed:!0,bubbles:!0}))})}handleInputElementPointerdown(){this.hasRecentlyReceivedPointerDown=!0,this.updateComplete.then(()=>{requestAnimationFrame(()=>{this.hasRecentlyReceivedPointerDown=!1})})}handleInput(e){var h;if(this.isComposing){e.stopPropagation();return}this.indeterminate&&(this.wasIndeterminate=!0,this.indeterminateValue=this.value,this.inputElement.value=this.inputElement.value.replace(indeterminatePlaceholder,"")),e.data&&this.decimalsChars.has(e.data)&&(this.isIntentDecimal=!0);const{value:t,selectionStart:i}=this.inputElement,s=t.split("").map(n=>remapMultiByteCharacters[n]||n).join("");if(this.numberParser.isValidPartialNumber(s)){this.lastCommitedValue=(h=this.lastCommitedValue)!=null?h:this.value;const n=this.convertValueToNumber(s);!s&&this.indeterminateValue?(this.indeterminate=!0,this._value=this.indeterminateValue):(this.indeterminate=!1,this._value=this.validateInput(n)),this._trackingValue=s,this.inputElement.value=s,this.inputElement.setSelectionRange(i,i);return}else this.inputElement.value=this.indeterminate?indeterminatePlaceholder:this._trackingValue;const r=s.length,d=this._trackingValue.length,m=(i||r)-(r-d);this.inputElement.setSelectionRange(m,m)}valueWithLimits(e){let t=e;return typeof this.min!="undefined"&&(t=Math.max(this.min,t)),typeof this.max!="undefined"&&(t=Math.min(this.max,t)),t}validateInput(e){e=this.valueWithLimits(e);const t=e<0?-1:1;if(e*=t,this.step){const i=typeof this.min!="undefined"?this.min:0,s=parseFloat(this.valueFormatter.format((e-i)%this.step));if(s===0||(Math.round(s/this.step)===1?e+=this.step-s:e-=s),typeof this.max!="undefined")for(;e>this.max;)e-=this.step;e=parseFloat(this.valueFormatter.format(e))}return e*=t,e}get displayValue(){const e=this.focused?"":indeterminatePlaceholder;return this.indeterminate?e:this.formattedValue}clearNumberFormatterCache(){this._numberFormatter=void 0,this._numberParser=void 0}get numberFormatter(){if(!this._numberFormatter||!this._numberFormatterFocused){const{style:e,unit:t,unitDisplay:i,...s}=this.formatOptions;e!=="unit"&&(s.style=e),this._numberFormatterFocused=new c(this.languageResolver.language,s);try{this._numberFormatter=new c(this.languageResolver.language,this.formatOptions),this._forcedUnit="",this._numberFormatter.format(1)}catch(r){e==="unit"&&(this._forcedUnit=t),this._numberFormatter=this._numberFormatterFocused}}return this.focused?this._numberFormatterFocused:this._numberFormatter}clearValueFormatterCache(){this._valueFormatter=void 0}get valueFormatter(){if(!this._valueFormatter){const e=this.step&&this.step!=Math.floor(this.step)?this.step.toString().split(".")[1].length:0;this._valueFormatter=new c("en",{useGrouping:!1,maximumFractionDigits:e})}return this._valueFormatter}get numberParser(){if(!this._numberParser||!this._numberParserFocused){const{style:e,unit:t,unitDisplay:i,...s}=this.formatOptions;e!=="unit"&&(s.style=e),this._numberParserFocused=new v(this.languageResolver.language,s);try{this._numberParser=new v(this.languageResolver.language,this.formatOptions),this._forcedUnit="",this._numberParser.parse("0")}catch(r){e==="unit"&&(this._forcedUnit=t),this._numberParser=this._numberParserFocused}}return this.focused?this._numberParserFocused:this._numberParser}renderField(){return this.autocomplete="off",l`
+    `};export class NumberField extends x{constructor(){super(...arguments);this.focused=!1;this._forcedUnit="";this.formatOptions={};this.hideStepper=!1;this.indeterminate=!1;this.keyboardFocused=!1;this.managedInput=!1;this.stepModifier=10;this._value=NaN;this._trackingValue="";this.decimalsChars=new Set([".",","]);this.valueBeforeFocus="";this.isIntentDecimal=!1;this.changeCount=0;this.languageResolver=new _(this);this.wasIndeterminate=!1;this.hasRecentlyReceivedPointerDown=!1;this.applyFocusElementLabel=e=>{this.appliedLabel=e};this.isComposing=!1}static get styles(){return[...super.styles,R,w,S]}set value(e){const t=this.validateInput(e);if(t===this.value)return;this.lastCommitedValue=t;const i=this._value;this._value=t,this.requestUpdate("value",i)}get value(){return this._value}get inputValue(){return this.indeterminate?this.formattedValue:this.inputElement.value}setValue(e=this.value){const t=this.lastCommitedValue;this.value=e,!(typeof t=="undefined"||t===this.value)&&(this.lastCommitedValue=this.value,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}get valueAsString(){return this._value.toString()}set valueAsString(e){this.value=this.numberParser.parse(e)}get formattedValue(){return isNaN(this.value)?"":this.numberFormatter.format(this.value)+(this.focused?"":this._forcedUnit)}convertValueToNumber(e){let t=e.split("").map(r=>remapMultiByteCharacters[r]||r).join("");const i=this.valueBeforeFocus.split("").filter(r=>this.decimalsChars.has(r)),s=new Set(i);if(b()&&this.inputElement.inputMode==="decimal"&&t!==this.valueBeforeFocus){const d=this.numberFormatter.formatToParts(1000.1).find(n=>n.type==="decimal").value;for(const n of s)!(n===d)&&!this.isIntentDecimal&&(t=t.replace(new RegExp(n,"g"),""));let m=!1;const h=t.split("");for(let n=h.length-1;n>=0;n--){const f=h[n];this.decimalsChars.has(f)&&(m?h[n]="":(h[n]=d,m=!0))}t=h.join("")}return this.numberParser.parse(t)}get _step(){var e;return typeof this.step!="undefined"?this.step:((e=this.formatOptions)==null?void 0:e.style)==="percent"?.01:1}handlePointerdown(e){if(e.button!==0){e.preventDefault();return}this.managedInput=!0,this.buttons.setPointerCapture(e.pointerId);const t=this.buttons.children[0].getBoundingClientRect(),i=this.buttons.children[1].getBoundingClientRect();this.findChange=s=>{s.clientX>=t.x&&s.clientY>=t.y&&s.clientX<=t.x+t.width&&s.clientY<=t.y+t.height?this.change=r=>this.increment(r.shiftKey?this.stepModifier:1):s.clientX>=i.x&&s.clientY>=i.y&&s.clientX<=i.x+i.width&&s.clientY<=i.y+i.height&&(this.change=r=>this.decrement(r.shiftKey?this.stepModifier:1))},this.findChange(e),this.startChange(e)}startChange(e){this.changeCount=0,this.doChange(e),this.safty=setTimeout(()=>{this.doNextChange(e)},400)}doChange(e){this.change(e)}handlePointermove(e){this.findChange(e)}handlePointerup(e){this.buttons.releasePointerCapture(e.pointerId),cancelAnimationFrame(this.nextChange),clearTimeout(this.safty),this.managedInput=!1,this.setValue()}doNextChange(e){return this.changeCount+=1,this.changeCount%FRAMES_PER_CHANGE===0&&this.doChange(e),requestAnimationFrame(()=>{this.nextChange=this.doNextChange(e)})}stepBy(e){if(this.disabled||this.readonly)return;const t=typeof this.min!="undefined"?this.min:0;let i=this.value;i+=e*this._step,isNaN(this.value)&&(i=t),i=this.valueWithLimits(i),this.requestUpdate(),this._value=this.validateInput(i),this.inputElement.value=this.numberFormatter.format(i),this.inputElement.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.indeterminate=!1,this.focus()}increment(e=1){this.stepBy(1*e)}decrement(e=1){this.stepBy(-1*e)}handleKeydown(e){if(!this.isComposing)switch(e.code){case"ArrowUp":e.preventDefault(),this.increment(e.shiftKey?this.stepModifier:1),this.setValue();break;case"ArrowDown":e.preventDefault(),this.decrement(e.shiftKey?this.stepModifier:1),this.setValue();break}}onScroll(e){e.preventDefault(),this.managedInput=!0;const t=e.shiftKey?e.deltaX/Math.abs(e.deltaX):e.deltaY/Math.abs(e.deltaY);t!==0&&!isNaN(t)&&(this.stepBy(t*(e.shiftKey?this.stepModifier:1)),clearTimeout(this.queuedChangeEvent),this.queuedChangeEvent=setTimeout(()=>{this.setValue()},CHANGE_DEBOUNCE_MS)),this.managedInput=!1}onFocus(){super.onFocus(),this._trackingValue=this.inputValue,this.keyboardFocused=!this.readonly&&!0,this.addEventListener("wheel",this.onScroll,{passive:!1}),this.valueBeforeFocus=this.inputElement.value}onBlur(e){super.onBlur(e),this.keyboardFocused=!this.readonly&&!1,this.removeEventListener("wheel",this.onScroll),this.isIntentDecimal=!1}handleFocusin(){this.focused=!this.readonly&&!0,this.keyboardFocused=!this.readonly&&!0}handleFocusout(){this.focused=!this.readonly&&!1,this.keyboardFocused=!this.readonly&&!1}handleChange(){const e=this.convertValueToNumber(this.inputValue);if(this.wasIndeterminate&&(this.wasIndeterminate=!1,this.indeterminateValue=void 0,isNaN(e))){this.indeterminate=!0;return}this.setValue(e),this.inputElement.value=this.formattedValue}handleCompositionStart(){this.isComposing=!0}handleCompositionEnd(){this.isComposing=!1,requestAnimationFrame(()=>{this.inputElement.dispatchEvent(new Event("input",{composed:!0,bubbles:!0}))})}handleInputElementPointerdown(){this.hasRecentlyReceivedPointerDown=!0,this.updateComplete.then(()=>{requestAnimationFrame(()=>{this.hasRecentlyReceivedPointerDown=!1})})}handleInput(e){var h;if(this.isComposing){if(e.data){const n=this.convertValueToNumber(e.data);Number.isNaN(n)&&(this.inputElement.value=this.indeterminate?indeterminatePlaceholder:this._trackingValue,this.isComposing=!1)}e.stopPropagation();return}this.indeterminate&&(this.wasIndeterminate=!0,this.indeterminateValue=this.value,this.inputElement.value=this.inputElement.value.replace(indeterminatePlaceholder,"")),e.data&&this.decimalsChars.has(e.data)&&(this.isIntentDecimal=!0);const{value:t,selectionStart:i}=this.inputElement,s=t.split("").map(n=>remapMultiByteCharacters[n]||n).join("");if(this.numberParser.isValidPartialNumber(s)){this.lastCommitedValue=(h=this.lastCommitedValue)!=null?h:this.value;const n=this.convertValueToNumber(s);!s&&this.indeterminateValue?(this.indeterminate=!0,this._value=this.indeterminateValue):(this.indeterminate=!1,this._value=this.validateInput(n)),this._trackingValue=s,this.inputElement.value=s,this.inputElement.setSelectionRange(i,i);return}else this.inputElement.value=this.indeterminate?indeterminatePlaceholder:this._trackingValue,e.stopPropagation();const r=s.length,d=this._trackingValue.length,m=(i||r)-(r-d);this.inputElement.setSelectionRange(m,m)}valueWithLimits(e){let t=e;return typeof this.min!="undefined"&&(t=Math.max(this.min,t)),typeof this.max!="undefined"&&(t=Math.min(this.max,t)),t}validateInput(e){e=this.valueWithLimits(e);const t=e<0?-1:1;if(e*=t,this.step){const i=typeof this.min!="undefined"?this.min:0,s=parseFloat(this.valueFormatter.format((e-i)%this.step));if(s===0||(Math.round(s/this.step)===1?e+=this.step-s:e-=s),typeof this.max!="undefined")for(;e>this.max;)e-=this.step;e=parseFloat(this.valueFormatter.format(e))}return e*=t,e}get displayValue(){const e=this.focused?"":indeterminatePlaceholder;return this.indeterminate?e:this.formattedValue}clearNumberFormatterCache(){this._numberFormatter=void 0,this._numberParser=void 0}get numberFormatter(){if(!this._numberFormatter||!this._numberFormatterFocused){const{style:e,unit:t,unitDisplay:i,...s}=this.formatOptions;e!=="unit"&&(s.style=e),this._numberFormatterFocused=new c(this.languageResolver.language,s);try{this._numberFormatter=new c(this.languageResolver.language,this.formatOptions),this._forcedUnit="",this._numberFormatter.format(1)}catch(r){e==="unit"&&(this._forcedUnit=t),this._numberFormatter=this._numberFormatterFocused}}return this.focused?this._numberFormatterFocused:this._numberFormatter}clearValueFormatterCache(){this._valueFormatter=void 0}get valueFormatter(){if(!this._valueFormatter){const e=this.step&&this.step!=Math.floor(this.step)?this.step.toString().split(".")[1].length:0;this._valueFormatter=new c("en",{useGrouping:!1,maximumFractionDigits:e})}return this._valueFormatter}get numberParser(){if(!this._numberParser||!this._numberParserFocused){const{style:e,unit:t,unitDisplay:i,...s}=this.formatOptions;e!=="unit"&&(s.style=e),this._numberParserFocused=new v(this.languageResolver.language,s);try{this._numberParser=new v(this.languageResolver.language,this.formatOptions),this._forcedUnit="",this._numberParser.parse("0")}catch(r){e==="unit"&&(this._forcedUnit=t),this._numberParser=this._numberParserFocused}}return this.focused?this._numberParserFocused:this._numberParser}renderField(){return this.autocomplete="off",l`
             ${super.renderField()}
@@ -31,3 +31,3 @@ ${this.hideStepper?C:l`
                               class="button step-up"
-                              aria-describedby=${this.helpTextId}
+                              aria-hidden="true"
                               label=${"Increase "+this.appliedLabel}
@@ -46,3 +46,3 @@ size=${this.size}
                               class="button step-down"
-                              aria-describedby=${this.helpTextId}
+                              aria-hidden="true"
                               label=${"Decrease "+this.appliedLabel}
@@ -59,3 +59,3 @@ size=${this.size}
                   `}
-        `}update(e){if((e.has("formatOptions")||e.has("resolvedLanguage"))&&this.clearNumberFormatterCache(),e.has("value")||e.has("max")||e.has("min")){const t=this.numberParser.parse(this.formattedValue.replace(this._forcedUnit,""));this.value=t}e.has("step")&&this.clearValueFormatterCache(),super.update(e)}willUpdate(e){this.multiline=!1,e.has(V)&&this.clearNumberFormatterCache()}firstUpdated(e){super.firstUpdated(e),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("compositionstart",this.handleCompositionStart),this.addEventListener("compositionend",this.handleCompositionEnd)}updated(e){if(!(!this.inputElement||!this.isConnected)){if(e.has("min")||e.has("formatOptions")){const t=typeof this.min!="undefined"&&this.min>=0,{maximumFractionDigits:i}=this.numberFormatter.resolvedOptions(),s=i&&i>0;let r="numeric";x()&&!t?r="text":(b()&&s||I()&&s&&t)&&(r="decimal"),this.inputElement.inputMode=r}e.has("focused")&&this.focused&&!this.hasRecentlyReceivedPointerDown&&this.formatOptions.unit&&this.setSelectionRange(0,this.displayValue.length)}}}a([E(".buttons")],NumberField.prototype,"buttons",2),a([u({type:Boolean,reflect:!0})],NumberField.prototype,"focused",2),a([u({type:Object,attribute:"format-options"})],NumberField.prototype,"formatOptions",2),a([u({type:Boolean,reflect:!0,attribute:"hide-stepper"})],NumberField.prototype,"hideStepper",2),a([u({type:Boolean,reflect:!0})],NumberField.prototype,"indeterminate",2),a([u({type:Boolean,reflect:!0,attribute:"keyboard-focused"})],NumberField.prototype,"keyboardFocused",2),a([u({type:Number})],NumberField.prototype,"max",2),a([u({type:Number})],NumberField.prototype,"min",2),a([u({type:Number})],NumberField.prototype,"step",2),a([u({type:Number,reflect:!0,attribute:"step-modifier"})],NumberField.prototype,"stepModifier",2),a([u({type:Number})],NumberField.prototype,"value",1);
+        `}update(e){if((e.has("formatOptions")||e.has("resolvedLanguage"))&&this.clearNumberFormatterCache(),e.has("value")||e.has("max")||e.has("min")||e.has("step")){const t=this.numberParser.parse(this.formattedValue.replace(this._forcedUnit,""));this.value=t,this.clearValueFormatterCache()}super.update(e)}willUpdate(e){this.multiline=!1,e.has(V)&&this.clearNumberFormatterCache()}firstUpdated(e){super.firstUpdated(e),this.addEventListener("keydown",this.handleKeydown),this.addEventListener("compositionstart",this.handleCompositionStart),this.addEventListener("compositionend",this.handleCompositionEnd)}updated(e){if(!(!this.inputElement||!this.isConnected)){if(e.has("min")||e.has("formatOptions")){const t=typeof this.min!="undefined"&&this.min>=0,{maximumFractionDigits:i}=this.numberFormatter.resolvedOptions(),s=i&&i>0;let r="numeric";N()&&!t?r="text":(b()&&s||I()&&s&&t)&&(r="decimal"),this.inputElement.inputMode=r}e.has("focused")&&this.focused&&!this.hasRecentlyReceivedPointerDown&&this.formatOptions.unit&&this.setSelectionRange(0,this.displayValue.length)}}}a([E(".buttons")],NumberField.prototype,"buttons",2),a([u({type:Boolean,reflect:!0})],NumberField.prototype,"focused",2),a([u({type:Object,attribute:"format-options"})],NumberField.prototype,"formatOptions",2),a([u({type:Boolean,reflect:!0,attribute:"hide-stepper"})],NumberField.prototype,"hideStepper",2),a([u({type:Boolean,reflect:!0})],NumberField.prototype,"indeterminate",2),a([u({type:Boolean,reflect:!0,attribute:"keyboard-focused"})],NumberField.prototype,"keyboardFocused",2),a([u({type:Number})],NumberField.prototype,"max",2),a([u({type:Number})],NumberField.prototype,"min",2),a([u({type:Number})],NumberField.prototype,"step",2),a([u({type:Number,reflect:!0,attribute:"step-modifier"})],NumberField.prototype,"stepModifier",2),a([u({type:Number})],NumberField.prototype,"value",1);
 //# sourceMappingURL=NumberField.js.map

test/inputs.test.js

 "use strict";
 import { html } from "@spectrum-web-components/base";
-import { elementUpdated, expect } from "@open-wc/testing";
+import { elementUpdated, expect, nextFrame } from "@open-wc/testing";
 import { getElFrom } from "./helpers.js";
@@ -419,4 +419,16 @@ import { createLanguageContext } from "../../../tools/reactive-controllers/test/helpers.js";
     });
+    it("does not accept non-numeric characters", async () => {
+      const el = await getElFrom(Default(Default.args));
+      el.focusElement.focus();
+      el.dispatchEvent(new CompositionEvent("compositionstart"));
+      await sendKeys({ type: "\u3042\u3044" });
+      await elementUpdated(el.focusElement);
+      await nextFrame();
+      expect(el.focusElement.value).to.equal("100");
+      el.dispatchEvent(new CompositionEvent("compositionend"));
+      await nextFrame();
+      expect(el.focusElement.value).to.equal("100");
+    });
   });
 });
 //# sourceMappingURL=inputs.test.js.map

test/number-field.test.js

@@ -1709,3 +1709,3 @@ "use strict";
   describe("accessibility model", () => {
-    it("buttons have proper label", async () => {
+    it("increment and decrement buttons cannot receive keyboard focus", async () => {
       await fixture(html`
@@ -1729,3 +1729,3 @@ <div>
         "`name` is the label text"
-      ).to.not.be.null;
+      ).to.be.null;
       expect(
@@ -1737,3 +1737,3 @@ findAccessibilityNode(
         "`name` is the label text"
-      ).to.not.be.null;
+      ).to.be.null;
     });
@@ -1740,0 +1740,0 @@ });

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 3 instances in 1 package

Fixed alerts

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 3 instances in 1 package

Worsened metrics

Total package byte prevSize

587870

decreased by-4%

Number of package files

52

decreased by-1.89%

Lines of code

4190

decreased by-18.99%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• Updated@internationalized/number@^3.6.0

• Updated@spectrum-web-components/base@^1.0.1-color-testing

• Updated@spectrum-web-components/icon@^1.0.1-color-testing

• Updated@spectrum-web-components/icons-ui@^1.0.1-color-testing

• Updated@spectrum-web-components/infield-button@^1.0.1-color-testing

• Updated@spectrum-web-components/reactive-controllers@^1.0.1-color-testing

• Updated@spectrum-web-components/shared@^1.0.1-color-testing

• Updated@spectrum-web-components/textfield@^1.0.1-color-testing