@jsenv/navi 0.29.128 → 0.29.129

package/dist/jsenv_navi.js

@@ -17633,6 +17633,7 @@ const LAYOUT_PROPS = {
   flexWrap: applyToCssPropWhenTruthy("flexWrap", "wrap", "nowrap"),
   grid: () => {},
   gridTemplateColumns: PASS_THROUGH,
+  gridTemplateRows: PASS_THROUGH,
   display: PASS_THROUGH, // in case people write "display: none" (even if hidden prop is recommended)
   row: () => {},
   column: () => {},
@@ -73474,6 +73475,7 @@ const TimeWheel = ({
  *   size?: string,
  *   startLabel?: import("ignore:preact").ComponentChildren,
  *   endLabel?: import("ignore:preact").ComponentChildren,
+ *   labelPosition?: "before" | "above",
  *   timeProps?: object,
  *   [key: string]: any,
  * }>}
@@ -73482,6 +73484,13 @@ const TimeWheel = ({
  * @param {import("ignore:preact").ComponentChildren} [startLabel] What is written
  *   before the first time ("De"), and `endLabel` between the two ("à"). Say
  *   `null` for neither.
+ * @param {"before"|"above"} [labelPosition="before"] Where each label stands.
+ *   Before its wheels, the span reads as one sentence ("De 9h00 à 18h00").
+ *   Above them, each bound is a column — "Début" over its wheels, "Fin" over
+ *   the other — two answers side by side, whose wheels land at the same place
+ *   whatever the width of the words. Labels that are nouns rather than
+ *   prepositions belong there; the group is still a row, and takes `flexWrap`
+ *   for screens too narrow to hold both columns.
  * @param {number} [minuteStep=1] How many minutes apart the values on both
  *   minute wheels are.
  * @param {{min?: number, max?: number}|number[]} [hours] Which hours both
@@ -73510,6 +73519,7 @@ const TimeRangeWheel = ({
   size,
   startLabel = naviI18n("time_range.from"),
   endLabel = naviI18n("time_range.to"),
+  labelPosition = "before",
   timeProps,
   startTimeProps,
   endTimeProps,
@@ -73577,53 +73587,61 @@ const TimeRangeWheel = ({
     ...rest,
     children: jsxs(AnsweredContext.Provider, {
       value: answeredRef,
-      children: [startLabel === null ? null : jsx(Text, {
-        size: size,
-        className: "navi_time_range_label",
-        children: startLabel
-      }), jsx(TimeWheel, {
-        id: startId,
-        ref: startRef,
-        name: "start",
-        minuteStep: minuteStep,
-        hours: hours,
-        loop: loop,
-        size: size,
-        placeholder: placeholder ? placeholder.start : undefined
-        // e.detail.value is the settled WHEEL's own value (an hour, a
-        // minute) — half a time. What the pair compares is this bound's
-        // whole time, read off the element the listener sits on.
-        ,
+      children: [jsx(TimeBound, {
+        labelPosition: labelPosition,
+        label: startLabel === null ? null : jsx(Text, {
+          size: size,
+          className: "navi_time_range_label",
+          children: startLabel
+        }),
+        children: jsx(TimeWheel, {
+          id: startId,
+          ref: startRef,
+          name: "start",
+          minuteStep: minuteStep,
+          hours: hours,
+          loop: loop,
+          size: size,
+          placeholder: placeholder ? placeholder.start : undefined
+          // e.detail.value is the settled WHEEL's own value (an hour, a
+          // minute) — half a time. What the pair compares is this bound's
+          // whole time, read off the element the listener sits on.
+          ,
 
-        onnavi_wheel_settle: e => {
-          keepBoundsApart("start", getUIStateFromElement(e.currentTarget), e);
-        },
-        ...timeProps,
-        ...startTimeProps
-      }), endLabel === null ? null : jsx(Text, {
-        size: size,
-        className: "navi_time_range_label",
-        children: endLabel
-      }), jsx(TimeWheel, {
-        ref: endRef,
-        name: "end",
-        minuteStep: minuteStep,
-        hours: hours,
-        loop: loop,
-        size: size,
-        placeholder: placeholder ? placeholder.end : undefined,
-        onnavi_wheel_settle: e => {
-          keepBoundsApart("end", getUIStateFromElement(e.currentTarget), e);
-        }
-        // Which time it comes after, and how much room there must be between
-        // the two: said on the LATER of the two, so the answer is given where
-        // the time one would have to move is (see time_range_constraint.js).
-        ,
+          onnavi_wheel_settle: e => {
+            keepBoundsApart("start", getUIStateFromElement(e.currentTarget), e);
+          },
+          ...timeProps,
+          ...startTimeProps
+        })
+      }), jsx(TimeBound, {
+        labelPosition: labelPosition,
+        label: endLabel === null ? null : jsx(Text, {
+          size: size,
+          className: "navi_time_range_label",
+          children: endLabel
+        }),
+        children: jsx(TimeWheel, {
+          ref: endRef,
+          name: "end",
+          minuteStep: minuteStep,
+          hours: hours,
+          loop: loop,
+          size: size,
+          placeholder: placeholder ? placeholder.end : undefined,
+          onnavi_wheel_settle: e => {
+            keepBoundsApart("end", getUIStateFromElement(e.currentTarget), e);
+          }
+          // Which time it comes after, and how much room there must be between
+          // the two: said on the LATER of the two, so the answer is given where
+          // the time one would have to move is (see time_range_constraint.js).
+          ,
 
-        "data-time-after": startId,
-        "data-time-min-duration": minDuration,
-        ...timeProps,
-        ...endTimeProps
+          "data-time-after": startId,
+          "data-time-min-duration": minDuration,
+          ...timeProps,
+          ...endTimeProps
+        })
       })]
     })
   });
@@ -73742,6 +73760,27 @@ const resolveHourList = hours => {
 };
 const padTwo = value => String(value).padStart(2, "0");
 
+// A label and its wheels. Side by side, they are two items of the group's own
+// row. One above the other, they are one item: the two bounds then stand at
+// the same height and their wheels line up whatever the width of the words.
+const TimeBound = ({
+  labelPosition,
+  label,
+  children
+}) => {
+  if (labelPosition === "above") {
+    return jsxs(Box, {
+      flex: "y",
+      alignX: "center",
+      spacing: "xs",
+      children: [label, children]
+    });
+  }
+  return jsxs(Fragment$1, {
+    children: [label, children]
+  });
+};
+
 // The two times as one span, { start, end } — the shape a pair carries.
 const aggregateSpan = childUIStateControllers => {
   const span = {};