@lo-ink/ui 0.4.1 → 0.4.2

package/dist/Tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,kFAAkF;AAClF,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,aAAa,EACb,EAAE,EAAE,UAAU,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,+BA8EX"}
+{"version":3,"file":"Tabs.d.ts","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AACD,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,cAAc,CAAC,cAAc,CAAC,EAC9B,UAAU,CACX;IACC,OAAO,EAAE,SAAS,SAAS,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACxC;AAED,kFAAkF;AAClF,wBAAgB,IAAI,CAAC,EACnB,OAAO,EACP,KAAK,EACL,aAAa,EACb,EAAE,EAAE,UAAU,EACd,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,+BAkFX"}

package/dist/Tabs.js

@@ -9,6 +9,8 @@ export function Tabs({ options, value, onValueChange, id: providedId, className,
     const focusValue = options.some((option) => option.value === value && !option.disabled)
         ? value
         : options.find((option) => !option.disabled)?.value;
+    // Recreated arrays and labels must not override a user's manual scrolling.
+    const optionStructure = JSON.stringify(options.map((option) => [option.value, Boolean(option.disabled)]));
     useEffect(() => {
         const selected = row.current?.querySelector('[aria-selected="true"]');
         if (!selected || !row.current)
@@ -20,7 +22,7 @@ export function Tabs({ options, value, onValueChange, id: providedId, className,
             viewport.scrollLeft += bounds.left - visible.left;
         else if (bounds.right > visible.right)
             viewport.scrollLeft += bounds.right - visible.right;
-    }, [value, options]);
+    }, [value, optionStructure]);
     return (_jsx("div", { ...props, id: id, ref: row, role: "tablist", "aria-orientation": "horizontal", className: classes("lo-ui-tabs", className), children: options.map((option, index) => (_jsx("button", { id: `${id}-tab-${index}`, type: "button", role: "tab", "aria-selected": option.value === value, "aria-controls": option.panelId, tabIndex: option.value === focusValue ? 0 : -1, disabled: option.disabled, className: "lo-ui-tab", onClick: () => onValueChange(option.value), onKeyDown: (event) => {
                 if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key))
                     return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lo-ink/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Accessible React components for LO miniapps",
   "type": "module",
   "license": "MIT",

package/src/Tabs.tsx

@@ -39,6 +39,10 @@ export function Tabs({
   )
     ? value
     : options.find((option) => !option.disabled)?.value;
+  // Recreated arrays and labels must not override a user's manual scrolling.
+  const optionStructure = JSON.stringify(
+    options.map((option) => [option.value, Boolean(option.disabled)]),
+  );
   useEffect(() => {
     const selected = row.current?.querySelector<HTMLElement>(
       '[aria-selected="true"]',
@@ -51,7 +55,7 @@ export function Tabs({
       viewport.scrollLeft += bounds.left - visible.left;
     else if (bounds.right > visible.right)
       viewport.scrollLeft += bounds.right - visible.right;
-  }, [value, options]);
+  }, [value, optionStructure]);
   return (
     <div
       {...props}