flet-box 1.0.6 → 1.0.8

package/src/widgets/Tooltip.js

@@ -3,19 +3,27 @@
  * @description Hover/focus tooltip rendered as a fixed-position portal on `document.body`.
  */
 import { WidgetFactory } from "../widget-factory/index.js";
+import { resolveReactive } from "../widget-factory/reactiveValue.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+
 export const Tooltip = (props) => {
   let {
     text,
     child,
     position = "top",
-    delay = 300,
+    // Neither delay prop carries a default: `tooltipDelay` is the deprecated
+    // alias of `delay`, so a caller that only sets the alias must not have the
+    // 300 ms default of the other name win over it.
+    delay = null,
+    /** @deprecated Use `delay` instead. */
+    tooltipDelay = null,
     bgColor = colors.secondary,
-    textColor = "#ffffff",
+    textColor = colors.onSecondary,
     fontSize = 12,
-    padding = "6px 10px",
-    borderRadius = 6,
+    padding = `${toREM(4)} ${toREM(8)}`,
+    borderRadius = 4,
     offset = 8,
     showArrow = true,
     disabled = false,
@@ -35,6 +43,10 @@ export const Tooltip = (props) => {
 
   if (!child) return null;
 
+  // The wait before the tooltip appears. A live `useState` value is a function,
+  // and `setTimeout` would coerce it to NaN — resolve it before using it.
+  const showDelay = Number(resolveReactive(delay ?? tooltipDelay) ?? 300);
+
   let tooltipElement = null;
   let timeoutId = null;
   let isVisible = false;
@@ -56,16 +68,16 @@ export const Tooltip = (props) => {
       widgetName: "Tooltip",
       backgroundColor: bgColor,
       borderRadius:
-        typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
+        toREM(borderRadius),
       padding: padding,
-      maxWidth: typeof maxWidth === "number" ? `${maxWidth}px` : maxWidth,
+      maxWidth: toREM(maxWidth),
       boxShadow: shadow,
       border:
         borderWidth > 0 ? `${borderWidth}px solid ${borderColor}` : "none",
       child: WidgetFactory({
         tag: "span",
         text: text, // ✅ "text" is the correct prop in FletBox
-        fontSize: typeof fontSize === "number" ? `${fontSize}px` : fontSize,
+        fontSize: toREM(fontSize),
         color: textColor,
         textAlign: textAlign,
         display: "block",
@@ -119,7 +131,7 @@ export const Tooltip = (props) => {
         if (tooltipElement._arrow) {
           arrowTop = tooltipRect.height;
           arrowLeft = tooltipRect.width / 2 - arrowSize;
-          tooltipElement._arrow.style.borderWidth = `${arrowSize}px ${arrowSize}px 0 ${arrowSize}px`;
+          tooltipElement._arrow.style.borderWidth = `${toREM(arrowSize)} ${toREM(arrowSize)} 0 ${toREM(arrowSize)}`;
           tooltipElement._arrow.style.borderColor = `${bgColor} transparent transparent transparent`;
           tooltipElement._arrow.style.top = `${arrowTop}px`;
           tooltipElement._arrow.style.left = `${arrowLeft}px`;
@@ -131,7 +143,7 @@ export const Tooltip = (props) => {
         if (tooltipElement._arrow) {
           arrowTop = -arrowSize;
           arrowLeft = tooltipRect.width / 2 - arrowSize;
-          tooltipElement._arrow.style.borderWidth = `0 ${arrowSize}px ${arrowSize}px ${arrowSize}px`;
+          tooltipElement._arrow.style.borderWidth = `0 ${toREM(arrowSize)} ${toREM(arrowSize)} ${toREM(arrowSize)}`;
           tooltipElement._arrow.style.borderColor = `transparent transparent ${bgColor} transparent`;
           tooltipElement._arrow.style.top = `${arrowTop}px`;
           tooltipElement._arrow.style.left = `${arrowLeft}px`;
@@ -143,7 +155,7 @@ export const Tooltip = (props) => {
         if (tooltipElement._arrow) {
           arrowTop = tooltipRect.height / 2 - arrowSize;
           arrowLeft = tooltipRect.width;
-          tooltipElement._arrow.style.borderWidth = `${arrowSize}px 0 ${arrowSize}px ${arrowSize}px`;
+          tooltipElement._arrow.style.borderWidth = `${toREM(arrowSize)} 0 ${toREM(arrowSize)} ${toREM(arrowSize)}`;
           tooltipElement._arrow.style.borderColor = `transparent transparent transparent ${bgColor}`;
           tooltipElement._arrow.style.top = `${arrowTop}px`;
           tooltipElement._arrow.style.left = `${arrowLeft}px`;
@@ -155,7 +167,7 @@ export const Tooltip = (props) => {
         if (tooltipElement._arrow) {
           arrowTop = tooltipRect.height / 2 - arrowSize;
           arrowLeft = -arrowSize;
-          tooltipElement._arrow.style.borderWidth = `${arrowSize}px ${arrowSize}px ${arrowSize}px 0`;
+          tooltipElement._arrow.style.borderWidth = `${toREM(arrowSize)} ${toREM(arrowSize)} ${toREM(arrowSize)} 0`;
           tooltipElement._arrow.style.borderColor = `transparent ${bgColor} transparent transparent`;
           tooltipElement._arrow.style.top = `${arrowTop}px`;
           tooltipElement._arrow.style.left = `${arrowLeft}px`;
@@ -198,7 +210,7 @@ export const Tooltip = (props) => {
       resizeHandler = hideOnScrollOrResize;
       window.addEventListener("scroll", scrollHandler, true);
       window.addEventListener("resize", resizeHandler);
-    }, delay);
+    }, showDelay);
   };
 
   const hideTooltip = () => {

package/src/widgets/TreeView.js

@@ -5,6 +5,9 @@
 import { WidgetFactory } from "../widget-factory/index.js";
 import { colors } from "../utils/themes.js";
 
+import { toREM } from "../utils/units.js";
+import { TAP_MINIMUM } from "../tools/index.js";
+
 export const TreeView = (props) => {
   const {
     nodes = [],
@@ -13,7 +16,7 @@ export const TreeView = (props) => {
     /** @deprecated Use onPress instead */
     onPress: onPressProp,
     expandedNodes = [],
-    indent = 20,
+    indent = 16,
     showIcons = true,
     folderIcon = "folder",
     folderOpenIcon = "folder_open",
@@ -31,14 +34,17 @@ export const TreeView = (props) => {
     textColor = colors.text,
     selectedTextColor = colors.primary,
     iconColor = colors.textSecondary,
-    folderIconColor = colors.warning,
+    // Folders carry the brand tone, the same accent as the selected row. They
+    // used to default to `colors.warning`, which made a neutral folder the only
+    // alarm-coloured element in an otherwise grey tree.
+    folderIconColor = colors.primary,
     borderColor = colors.border,
 
     // Spacing props
-    nodePadding = "6px 4px",
+    nodePadding = `${toREM(8)} ${toREM(12)}`,
     nodeGap = 4,
-    childrenGap = 2,
-    borderRadius = 6,
+    childrenGap = 4,
+    borderRadius = 4,
 
     // Font props
     fontSize = 14,
@@ -96,13 +102,17 @@ export const TreeView = (props) => {
       tag: "div",
       display: "flex",
       alignItems: "center",
-      gap: `${nodeGap}px`,
+      gap: toREM(nodeGap),
       cursor: selectable ? "pointer" : "default",
       backgroundColor: isSelected ? selectedBgColor : bgColor,
       padding: nodePadding,
-      borderRadius:
-        typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius,
-      marginLeft: `${level * indent}px`,
+      // A raw factory div is content-box, so without this the 40px touch
+      // target was added on top of the 8px vertical padding and every row
+      // measured 56px, spreading the tree far more than its 8px rhythm.
+      boxSizing: "border-box",
+      ...(selectable ? { minHeight: TAP_MINIMUM } : {}),
+      borderRadius: toREM(borderRadius),
+      marginLeft: toREM(level * indent),
       transition: `background-color ${transitionDuration} ease`,
     });
 
@@ -144,7 +154,7 @@ export const TreeView = (props) => {
         child: WidgetFactory({
           tag: "span",
           className: "material-icons",
-          fontSize: `${iconSize}px`,
+          fontSize: toREM(iconSize),
           color: iconColor,
           textContent: isExpanded ? collapseIcon : expandIcon,
         }),
@@ -184,7 +194,7 @@ export const TreeView = (props) => {
       const iconSpan = WidgetFactory({
         tag: "span",
         className: "material-icons",
-        fontSize: `${iconSize + 2}px`,
+        fontSize: toREM(iconSize + 2),
         color: node.iconColor || (hasChildren ? folderIconColor : iconColor),
         textContent: iconName,
       });
@@ -195,7 +205,7 @@ export const TreeView = (props) => {
     const labelSpan = WidgetFactory({
       tag: "span",
       flex: 1,
-      fontSize: `${fontSize}px`,
+      fontSize: toREM(fontSize),
       fontWeight: isSelected ? "bold" : "normal",
       color: isSelected ? selectedTextColor : textColor,
       textContent: node.label,
@@ -206,7 +216,9 @@ export const TreeView = (props) => {
     if (node.badge) {
       const badge = WidgetFactory({
         tag: "div",
-        backgroundColor: colors.danger,
+        // `danger` is the signal tone; the plate is the fill white words can
+        // actually sit on (6.47:1 in the light theme, 10.02:1 in the dark one).
+        backgroundColor: colors.dangerPlate,
         borderRadius: "12px",
         padding: "2px 8px",
         child: WidgetFactory({
@@ -228,7 +240,7 @@ export const TreeView = (props) => {
         tag: "div",
         display: "flex",
         flexDirection: "column",
-        gap: `${childrenGap}px`,
+        gap: toREM(childrenGap),
       });
 
       node.children.forEach((child) => {
@@ -254,7 +266,7 @@ export const TreeView = (props) => {
       tag: "div",
       display: "flex",
       flexDirection: "column",
-      gap: `${childrenGap}px`,
+      gap: toREM(childrenGap),
     });
 
     nodes.forEach((node) => {

package/src/widgets/index.js

@@ -43,6 +43,7 @@ export { Stepper } from "./Stepper.js";
 export { Skeleton } from "./Skeleton.js";
 export { Chart } from "./Chart.js";
 export { QRCode } from "./QRCode.js";
+export { Maps } from "./Maps.js";
 export { Slider } from "./Slider.js";
 export { InstallButton } from "./InstallButton.js";
 export { Video } from "./Video.js";