@jsenv/navi 0.29.128 → 0.29.130

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: () => {},
@@ -66925,8 +66926,15 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`
       /* The façade is transparent to the pointer — a press on what it draws
          means "open the picker". An own target is the exception, the same way
          the clear cross is one in the slot below: it says the press is aimed at
-         IT, so it has to be reachable at all. */
+         IT, so it has to be reachable at all.
+         Positioned as well as pointable: the input covering the box
+         (see [navi-ui-custom] below) is absolute, so it paints over every
+         static element of the façade whatever their pointer-events say — and
+         the press then reaches the input, which is the picker. No offset, so
+         nothing moves; this only puts the own target in the same paint layer
+         as the things it has to be reachable through. */
       [data-own-target] {
+        position: relative;
         pointer-events: auto;
       }
     }
@@ -67170,6 +67178,42 @@ installImportMetaCssBuild(import.meta);const css$t = /* css */`
         z-index: -1;
       }
     }
+    /* bare: the caller's drawing IS the trigger. No frame, no control line, no
+       slot beside it, no clamp on it — the picker takes the size of what the ui
+       draws, to the pixel, and does nothing to it but catch the press. For a
+       picker that is a whole piece of a layout (a column of a card, a tile)
+       rather than a field: the same drawing can then sit alone somewhere else
+       and be the same box in both places. */
+    &[data-variant="bare"] {
+      --picker-padding-x-default: 0;
+      --picker-padding-y-default: 0;
+      /* The box holds the drawing rather than placing it inside itself: a
+         height the caller gave the picker belongs to the drawing too. */
+      --picker-align-y-default: stretch;
+      --picker-border-width: 0px; /* must carry a unit (px) — used in calc() to offset the custom input overlay */
+      --picker-border-color: transparent;
+      --picker-border-color-hover: var(--picker-border-color);
+      --picker-border-color-readonly: var(--picker-border-color);
+      --picker-border-color-disabled: var(--picker-border-color);
+      --picker-background-color: transparent;
+      --picker-background-color-hover: var(--picker-background-color);
+      --picker-background-color-readonly: var(--picker-background-color);
+      --picker-background-color-disabled: var(--picker-background-color);
+      --x-picker-icon-color: currentColor;
+
+      /* The drawing is the caller's, so it is written on the page's line at
+         the page's size — the control font and the control line belong to the
+         field-like drawings, which this one is not. */
+      font-size: inherit;
+      font-family: inherit;
+      line-height: inherit;
+
+      .navi_picker_box {
+        /* A field is at least one line tall whatever it holds; this is not a
+           field, so its height is the drawing's and nothing else. */
+        min-height: 0;
+      }
+    }
     /* button: drawn as a Button is, from the same tokens (see button_ui.jsx
        and the --navi-button-* vars) — its surface, its padding, a centered
        label, its washed-out read-only and disabled — for a picker that IS a
@@ -67273,7 +67317,10 @@ const PickerButton = props => {
   // A word in a sentence is never truncated — and the clamp's overflow: hidden
   // would cut its dotted underline, which sits on the edge of the line box
   // (WebKit drops it or not depending on the subpixel position of the line).
-  const maxLines = variant === "text" ? undefined : maxLinesProp;
+  // A bare picker is not truncated either: the drawing it shows is the
+  // caller's own, and clamping it would be the picker deciding the shape of
+  // something it does not draw.
+  const maxLines = variant === "text" || variant === "bare" ? undefined : maxLinesProp;
   const isSingleLine = maxLines === 1;
   // Same rule as the root: phrasing content inside a sentence.
   const ContentTag = variant === "text" ? "span" : "div";
@@ -67494,7 +67541,7 @@ const PickerButton = props => {
                 })
               })
             })
-          }), variant === "icon" || variant === "headless" || variant === "button" || variant === "text" || ui === "default" ? null : jsx("span", {
+          }), variant === "icon" || variant === "headless" || variant === "button" || variant === "text" || variant === "bare" || ui === "default" ? null : jsx("span", {
             className: "navi_picker_right_slot",
             children: jsx(PickerOwnContent, {
               children: clearable && interactive && value !== undefined && value !== "" && clearConfirm !== undefined ?
@@ -73474,6 +73521,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 +73530,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 +73565,7 @@ const TimeRangeWheel = ({
   size,
   startLabel = naviI18n("time_range.from"),
   endLabel = naviI18n("time_range.to"),
+  labelPosition = "before",
   timeProps,
   startTimeProps,
   endTimeProps,
@@ -73577,53 +73633,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 +73806,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 = {};