flet-box 1.0.4 → 1.0.6

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; }",
@@ -329,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) {
@@ -506,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 {
@@ -523,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/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",

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