react-msaview 5.7.1 → 5.7.2

package/dist/components/header/GappynessSlider.js

@@ -11,7 +11,20 @@ const GappynessSlider = observer(function GappynessSlider({ model, }) {
             "Hide columns w/ >",
             allowedGappyness,
             "% gaps"),
-        React.createElement(Slider, { style: { width: 100 }, min: 1, max: 100, value: allowedGappyness, onChange: (_, val) => {
+        React.createElement(Slider
+        // Named, because the class alone is not enough to find it from outside.
+        // An MSA is normally embedded beside other MUI Sliders (in JBrowse, the
+        // linear view's own zoom control), so a `.MuiSlider-thumb` selector in a
+        // test or a screenshot spec picks whichever comes first in the document
+        // and drives that instead — which reads as this slider ignoring its
+        // keyboard. Target `[data-testid="gappyness_slider"] input` to reach the
+        // hidden range input MUI renders in the thumb, which is the node that
+        // takes focus and receives arrow/PageUp/PageDown.
+        //
+        // Deliberately NOT `slotProps={{ input: ... }}`: passing slotProps here
+        // widens the Slider's generic so `onChange`'s `val` infers as
+        // `number | number[]` and no longer assigns to setAllowedGappyness.
+        , { "data-testid": "gappyness_slider", style: { width: 100 }, min: 1, max: 100, value: allowedGappyness, onChange: (_, val) => {
                 model.setAllowedGappyness(val);
             } })));
 });

package/dist/components/header/GappynessSlider.js.map

@@ -1 +1 @@
-{"version":3,"file":"GappynessSlider.js","sourceRoot":"","sources":["../../../src/components/header/GappynessSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,eAAe,GAAG,QAAQ,CAAC,SAAS,eAAe,CAAC,EACxD,KAAK,GAGN;IACC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAA;IAC5C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IACD,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;QAC3D,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;;YACpB,gBAAgB;qBAC1B;QACb,oBAAC,MAAM,IACL,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EACrB,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBACnB,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAA;YAChC,CAAC,GACD,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,eAAe,CAAA"}
+{"version":3,"file":"GappynessSlider.js","sourceRoot":"","sources":["../../../src/components/header/GappynessSlider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAIrC,MAAM,eAAe,GAAG,QAAQ,CAAC,SAAS,eAAe,CAAC,EACxD,KAAK,GAGN;IACC,MAAM,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAA;IAC5C,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IACD,OAAO,CACL,6BAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;QAC3D,oBAAC,UAAU,IAAC,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE;;YACpB,gBAAgB;qBAC1B;QACb,oBAAC,MAAM;QACL,wEAAwE;QACxE,wEAAwE;QACxE,yEAAyE;QACzE,wEAAwE;QACxE,oEAAoE;QACpE,yEAAyE;QACzE,sEAAsE;QACtE,kDAAkD;QAClD,EAAE;QACF,wEAAwE;QACxE,8DAA8D;QAC9D,oEAAoE;2BACxD,kBAAkB,EAC9B,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,EACrB,GAAG,EAAE,CAAC,EACN,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE;gBACnB,KAAK,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAA;YAChC,CAAC,GACD,CACE,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,eAAe,eAAe,CAAA"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "5.7.1";
+export declare const version = "5.7.2";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '5.7.1';
+export const version = '5.7.2';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "5.7.1",
+  "version": "5.7.2",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -42,8 +42,8 @@
   "dependencies": {
     "colord": "^2.9.3",
     "flatbush": "^4.6.2",
-    "@jbrowse/svgcanvas": "5.7.1",
-    "msa-parsers": "5.7.1"
+    "@jbrowse/svgcanvas": "5.7.2",
+    "msa-parsers": "5.7.2"
   },
   "scripts": {
     "clean": "rimraf dist bundle",

package/src/components/header/GappynessSlider.tsx

@@ -20,6 +20,19 @@ const GappynessSlider = observer(function GappynessSlider({
         Hide columns w/ >{allowedGappyness}% gaps
       </Typography>
       <Slider
+        // Named, because the class alone is not enough to find it from outside.
+        // An MSA is normally embedded beside other MUI Sliders (in JBrowse, the
+        // linear view's own zoom control), so a `.MuiSlider-thumb` selector in a
+        // test or a screenshot spec picks whichever comes first in the document
+        // and drives that instead — which reads as this slider ignoring its
+        // keyboard. Target `[data-testid="gappyness_slider"] input` to reach the
+        // hidden range input MUI renders in the thumb, which is the node that
+        // takes focus and receives arrow/PageUp/PageDown.
+        //
+        // Deliberately NOT `slotProps={{ input: ... }}`: passing slotProps here
+        // widens the Slider's generic so `onChange`'s `val` infers as
+        // `number | number[]` and no longer assigns to setAllowedGappyness.
+        data-testid="gappyness_slider"
         style={{ width: 100 }}
         min={1}
         max={100}

package/src/version.ts

@@ -1 +1 @@
-export const version = '5.7.1'
+export const version = '5.7.2'