flet-box 1.0.3 → 1.0.5

package/src/widgets/ProgressBar.js

@@ -43,9 +43,9 @@ export const ProgressBar = (props) => {
     position: "relative",
     ...(striped || indeterminate
       ? {
-          backgroundImage: `repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 10px, transparent 10px, transparent 20px)`,
-          backgroundSize: "28px 28px",
-        }
+        backgroundImage: `repeating-linear-gradient(45deg, rgba(255,255,255,0.15) 0px, rgba(255,255,255,0.15) 10px, transparent 10px, transparent 20px)`,
+        backgroundSize: "28px 28px",
+      }
       : {}),
   });
 
@@ -115,9 +115,15 @@ export const ProgressBar = (props) => {
     );
   }
 
-  // Value percentage
+  // Value percentage.
+  // FIX: guardo referencia directa al span del valor (`valueElRef`) en vez de
+  // buscarlo con `querySelector("span:last-child")` — la versión anterior
+  // podía escribir el porcentaje dentro del label (si el label estaba a la
+  // derecha, era el último span) y el check `valueEl !== label` nunca fallaba
+  // porque `label` era un string.
+  let valueElRef = null;
   if (showValue && !indeterminate) {
-    const valueEl = WidgetFactory({
+    valueElRef = WidgetFactory({
       tag: "span",
       textContent: `${Math.round(percentage)}%`,
       fontSize: "12px",
@@ -129,9 +135,9 @@ export const ProgressBar = (props) => {
     });
 
     if (valuePosition === "left" || valuePosition === "top") {
-      children.unshift(valueEl);
+      children.unshift(valueElRef);
     } else {
-      children.push(valueEl);
+      children.push(valueElRef);
     }
   }
 
@@ -154,11 +160,8 @@ export const ProgressBar = (props) => {
     percentage = (progressValue / max) * 100;
     fill.style.width = `${percentage}%`;
 
-    if (showValue) {
-      const valueEl = container.querySelector("span:last-child");
-      if (valueEl && valueEl !== label) {
-        valueEl.textContent = `${Math.round(percentage)}%`;
-      }
+    if (valueElRef) {
+      valueElRef.textContent = `${Math.round(percentage)}%`;
     }
   };
 
@@ -175,4 +178,4 @@ export const ProgressBar = (props) => {
   return container;
 };
 
-export default ProgressBar;
+export default ProgressBar;

package/src/widgets/QRCode.js

@@ -116,7 +116,9 @@ function buildQRMatrix(text, ecLevel = "M") {
     for (let i = len - 1; i >= 0; i--) bits.push((val >> i) & 1);
   };
   pushBits(0b0100, 4);           // mode indicator: byte
-  pushBits(bytes.length, 8);    // character count
+  // Character count: 8 bits for versions 1-9, 16 bits for versions 10-40
+  // (ISO/IEC 18004). Emitting 8 bits at version 10 misaligns every later bit.
+  pushBits(bytes.length, version < 10 ? 8 : 16);
   for (const b of bytes) pushBits(b, 8);
   // Terminator
   for (let i = 0; i < 4 && bits.length < dataCodewords * 8; i++) bits.push(0);
@@ -161,7 +163,12 @@ function buildQRMatrix(text, ecLevel = "M") {
 
   // 7. Build final bit sequence
   const finalBits = [];
-  for (const cw of finalCW) pushBits(cw, 8);
+  // NOTE: `pushBits` writes into `bits` (the pre-interleave stream), so it must
+  // not be used here. Using it left `finalBits` empty, and the placement pass
+  // then wrote every data module as 0 — the symbol carried no payload at all.
+  for (const cw of finalCW) {
+    for (let i = 7; i >= 0; i--) finalBits.push((cw >> i) & 1);
+  }
   // Remainder bits (version-dependent, versions 2–6 need 7)
   const remainderBitsCount = version >= 2 && version <= 6 ? 7 : 0;
   for (let i = 0; i < remainderBitsCount; i++) finalBits.push(0);

package/src/widgets/Radio.js

@@ -13,6 +13,7 @@ export const Radio = (props) => {
     disabled = false,
     size = 20,
     name,
+    activeColor = colors.primary,
     ...rest
   } = props;
 
@@ -26,10 +27,8 @@ export const Radio = (props) => {
 
   const updateUI = (newSelected) => {
     if (radioRef) {
-      radioRef.style.backgroundColor = newSelected
-        ? colors.primary
-        : "transparent";
-      radioRef.style.border = `2px solid ${newSelected ? colors.primary : colors.border}`;
+      radioRef.style.backgroundColor = newSelected ? activeColor : "transparent";
+      radioRef.style.border = `2px solid ${newSelected ? activeColor : colors.border}`;
     }
     if (dotRef) {
       dotRef.style.display = newSelected ? "block" : "none";
@@ -51,9 +50,9 @@ export const Radio = (props) => {
     widgetName: "Radio",
     width: size,
     height: size,
-    border: `2px solid ${disabled ? colors.border : internalSelected ? colors.primary : colors.border}`,
+    border: `2px solid ${disabled ? colors.border : internalSelected ? activeColor : colors.border}`,
     borderRadius: "50%",
-    backgroundColor: internalSelected ? colors.primary : "transparent",
+    backgroundColor: internalSelected ? activeColor : "transparent",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
@@ -67,7 +66,7 @@ export const Radio = (props) => {
 
   // Handle click
   if (!disabled) {
-    radio.onclick = (e) => {
+    const handleClick = (e) => {
       e.stopPropagation();
       if (internalSelected) return;
 
@@ -88,11 +87,15 @@ export const Radio = (props) => {
 
       if (onPress) onPress(true);
     };
+    // Routed through the factory props: `assignProps` clears `onclick` on every
+    // update and only re-applies handlers present in the merged props, so a
+    // direct assignment died on the first `update()` or reactive setter.
+    radio.update({ onPress: handleClick });
 
     // Hover effect
     radio.addEventListener("mouseenter", () => {
       if (!disabled && !internalSelected) {
-        radio.style.backgroundColor = colors.primary + "20";
+        radio.style.backgroundColor = `color-mix(in srgb, ${activeColor} 12%, transparent)`;
       }
     });
 

package/src/widgets/Slider.js

@@ -50,8 +50,8 @@ export const Slider = (props) => {
     stripeColor = "rgba(255,255,255,0.25)",
     glow = false,
     // Events
+    /** @deprecated Alias of `onPress`. */
     onChanged,
-    /** @deprecated Use onPress instead */
     onPress: onPressProp,
     onChangeEnd,
     // Rest
@@ -77,6 +77,13 @@ export const Slider = (props) => {
     typeof trackSizePx === "number" ? `${trackSizePx}px` : trackSizePx;
   let thumbSizeNum = typeof thumbSize === "number" ? thumbSize : 20;
 
+  // Positioning retries while the track still measures 0 (hidden parent, not laid
+  // out yet). Both handles are tracked so unmounting can stop them: an untracked
+  // recursive rAF outlived the widget and re-armed itself every frame, forever.
+  let thumbRaf = 0;
+  let initTimer = 0;
+  let disposed = false;
+
   injectKeyframes(
     "slider-stripes",
     "0% { background-position: 0 0; } 100% { background-position: 20px 0; }",
@@ -299,6 +306,9 @@ export const Slider = (props) => {
 
   function generateDefaultMarks() {
     const stepMark = (currentMax - currentMin) / 4;
+    // With `min === max` (or non-numeric bounds) stepMark is 0/NaN, so
+    // `i += stepMark` never advances and the loop hangs the tab forever.
+    if (!(stepMark > 0)) return [currentMin];
     const marksList = [];
     for (let i = currentMin; i <= currentMax + 0.1; i += stepMark) {
       marksList.push(Math.round(i));
@@ -326,10 +336,16 @@ export const Slider = (props) => {
   }
 
   function updateThumbPosition() {
-    if (!track || !thumb) return;
+    if (disposed || !track || !thumb) return;
     const trackRect = track.getBoundingClientRect();
     if (trackRect.width === 0 && trackRect.height === 0) {
-      requestAnimationFrame(updateThumbPosition);
+      // Not measurable yet: wait one frame for layout, keeping a single pending
+      // frame instead of stacking one retry per caller.
+      if (thumbRaf) cancelAnimationFrame(thumbRaf);
+      thumbRaf = requestAnimationFrame(() => {
+        thumbRaf = 0;
+        updateThumbPosition();
+      });
       return;
     }
     if (isHorizontal) {
@@ -503,6 +519,9 @@ export const Slider = (props) => {
 
   // ---------- Cleanup ----------
   const cleanup = () => {
+    disposed = true;
+    if (thumbRaf) cancelAnimationFrame(thumbRaf);
+    if (initTimer) clearTimeout(initTimer);
     if (resizeObserver) {
       resizeObserver.disconnect();
     } else {
@@ -520,7 +539,10 @@ export const Slider = (props) => {
   container.onUnmount(cleanup);
 
   // Initialize position
-  setTimeout(() => updateThumbPosition(), 0);
+  initTimer = setTimeout(() => {
+    initTimer = 0;
+    updateThumbPosition();
+  }, 0);
   return container;
 };
 

package/src/widgets/SnackBar.js

@@ -124,9 +124,18 @@ export function SnackBar(options) {
   });
 
   let timeoutId = null;
+  let rafId = null;
+  // `close()` is final: it must fire `onClose` exactly once and must win any
+  // race against the pending `show()` frame, otherwise closing a toast right
+  // after creating it would flash it back to opacity 1 for a full animation.
+  let closed = false;
 
   const show = () => {
-    requestAnimationFrame(() => {
+    if (closed) return;
+    if (rafId !== null) cancelAnimationFrame(rafId);
+    rafId = requestAnimationFrame(() => {
+      rafId = null;
+      if (closed) return;
       snackbar.style.opacity = "1";
       snackbar.style.transform = "translateY(0)";
     });
@@ -134,7 +143,16 @@ export function SnackBar(options) {
   };
 
   const close = () => {
-    if (timeoutId) clearTimeout(timeoutId);
+    if (closed) return;
+    closed = true;
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
     snackbar.style.opacity = "0";
     snackbar.style.transform =
       position === "bottom"

package/src/widgets/Stack.js

@@ -1,27 +1,60 @@
 /**
  * @file Stack.js
  * @description Positioning container for overlaying children (relative by default,
- * use `position: "stack"` for absolute centering).
+ * use `position: "stack"` for absolute centering). Supports a nine-point
+ * `alignment` that anchors its children inside the box.
  */
 import { WidgetFactory } from "../widget-factory/index.js";
 
+/**
+ * Nine-point grid → [vertical anchor, horizontal anchor].
+ * `alignment` turns the stack into a column flex container, so `justifyContent`
+ * carries the top/center/bottom anchor and `alignItems` the left/center/right one.
+ */
+const ALIGNMENTS = {
+  "top-left": ["flex-start", "flex-start"],
+  "top-center": ["flex-start", "center"],
+  "top-right": ["flex-start", "flex-end"],
+  "center-left": ["center", "flex-start"],
+  center: ["center", "center"],
+  "center-right": ["center", "flex-end"],
+  "bottom-left": ["flex-end", "flex-start"],
+  "bottom-center": ["flex-end", "center"],
+  "bottom-right": ["flex-end", "flex-end"],
+};
+
 export const Stack = (props = {}) => {
   const {
     // Default layout
     position = "relative",
-    display = "block",
+    display,
     boxSizing = "border-box",
 
+    // Nine-point anchor for the children
+    alignment,
+
     // Everything else
     ...rest
   } = props;
 
+  const preset = alignment ? ALIGNMENTS[alignment] : undefined;
+
+  // The preset sits before `...rest`, so an explicit `flexDirection`,
+  // `justifyContent` or `alignItems` from the caller always overrides it;
+  // `alignment` only fills the axes nobody claimed.
   return WidgetFactory({
     tag: "div",
     widgetName: "Stack",
     position: position,
-    display: display,
+    display: display ?? (preset ? "flex" : "block"),
     boxSizing: boxSizing,
+    ...(preset
+      ? {
+          flexDirection: "column",
+          justifyContent: preset[0],
+          alignItems: preset[1],
+        }
+      : null),
     ...rest,
   });
 };

package/src/widgets/Stepper.js

@@ -274,12 +274,13 @@ export const Stepper = (props) => {
     overflow: "auto",
   });
 
-  // Navigation container
-  navContainer = Container({ width: "100%" });
+  // Navigation container — only built when the stepper is allowed to drive itself.
+  // `updateUI()` below skips the whole nav branch while `navContainer` is null.
+  navContainer = showNavigation ? Container({ width: "100%" }) : null;
 
   container.appendChild(stepsWrapper);
   container.appendChild(contentContainer);
-  container.appendChild(navContainer);
+  if (navContainer) container.appendChild(navContainer);
 
   // Initial render
   updateUI();

package/src/widgets/Switch.js

@@ -12,6 +12,7 @@ export const Switch = (props) => {
     onPress: onPressProp,
     disabled = false,
     size = "medium",
+    activeColor = colors.success,
     ...rest
   } = props;
 
@@ -33,9 +34,7 @@ export const Switch = (props) => {
 
   const updateUI = (newValue) => {
     if (switchRef) {
-      switchRef.style.backgroundColor = newValue
-        ? colors.success
-        : colors.gray300;
+      switchRef.style.backgroundColor = newValue ? activeColor : colors.gray300;
     }
     if (knobRef) {
       knobRef.style.transform = newValue
@@ -63,7 +62,7 @@ export const Switch = (props) => {
     widgetName: "Switch",
     width: sz.width,
     height: sz.height,
-    backgroundColor: internalValue ? colors.success : colors.gray300,
+    backgroundColor: internalValue ? activeColor : colors.gray300,
     borderRadius: sz.height / 2,
     display: "flex",
     alignItems: "center",
@@ -79,13 +78,17 @@ export const Switch = (props) => {
 
   // Handle click
   if (!disabled) {
-    switchContainer.onclick = (e) => {
+    const handleClick = (e) => {
       e.stopPropagation();
       const newValue = !internalValue;
       internalValue = newValue;
       updateUI(newValue);
       if (onPress) onPress(newValue);
     };
+    // Routed through the factory props: `assignProps` clears `onclick` on every
+    // update and only re-applies handlers present in the merged props, so a
+    // direct assignment died on the first `update()` or reactive setter.
+    switchContainer.update({ onPress: handleClick });
   }
 
   // Public methods

package/src/widgets/TreeView.js

@@ -104,7 +104,6 @@ export const TreeView = (props) => {
         typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
       marginLeft: `${level * indent}px`,
       transition: `background-color ${transitionDuration} ease`,
-      hoverBackgroundColor: hoverBgColor,
     });
 
     // Add hover effect
@@ -280,7 +279,9 @@ export const TreeView = (props) => {
 
   // ========== PUBLIC METHODS ==========
 
-  container.updateNodes = (newNodes, selectedId = null) => {
+  // NOTE: no `selectedId = null` default. The guard below tests `!== undefined`,
+  // so a `null` default made it always true and every call wiped the selection.
+  container.updateNodes = (newNodes, selectedId) => {
     nodes.length = 0;
     nodes.push(...newNodes);
     if (selectedId !== undefined) currentSelectedId = selectedId;