pretrunc 0.0.0-stage → 0.1.0

package/src/react-lines.ts

@@ -0,0 +1,99 @@
+// Written with createElement, not JSX, as react.ts is.
+import {
+  createElement,
+  type ReactNode,
+  useEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import { type CutOptions, head, type Protect, tail, truncated } from "./cut.ts";
+import { observe } from "./dom.ts";
+import { clamp, prepareLines } from "./lines.ts";
+import { useBox, useProtect } from "./react.ts";
+
+export interface ClampProps extends Omit<CutOptions, "tailGraphemes"> {
+  readonly text: string;
+  /** How many lines to keep. */
+  readonly lines: number;
+  readonly ellipsis?: string;
+  /**
+   * Painted after the text whenever it is cut or `expanded`, such as a "more" or
+   * "less" button. Its width is observed and kept free on the last line.
+   */
+  readonly after?: ReactNode;
+  /** Show every line, with `after` following the last one, on its own if it doesn't fit. */
+  readonly expanded?: boolean;
+  /** The room in px. Left out, it is observed from the element. */
+  readonly width?: number;
+  /** A CSS font shorthand. Left out, it is read from the element's computed style. */
+  readonly font?: string;
+  /** CSS `letter-spacing` in px. Left out, it is read from the element's computed style. */
+  readonly letterSpacing?: number;
+  readonly protect?: Protect;
+  readonly whiteSpace?: "normal" | "pre-wrap";
+  readonly wordBreak?: "normal" | "keep-all";
+  readonly className?: string;
+}
+
+const box = { display: "inline-block" } as const;
+
+/** A paragraph cut to a number of lines at its end, start or middle. */
+export function Clamp(props: ClampProps): ReactNode {
+  const b = useBox(props);
+  const { font, spacing, fonts } = b;
+  const { text, lines, at, ratio, words, trim, ellipsis = "…", whiteSpace, wordBreak } = props;
+  const hasAfter = props.after !== undefined;
+  // `after` mounts only once the text is cut, so it is observed from its own ref.
+  const [after, setAfter] = useState<Element | null>(null);
+  const [afterWidth, setAfterWidth] = useState(0);
+  useEffect(() => (after ? observe(after, setAfterWidth) : undefined), [after]);
+  const protect = useProtect(props.protect);
+  const prepared = useMemo(
+    () =>
+      font === undefined
+        ? undefined
+        : prepareLines(text, font, {
+            ...(protect ? { protect } : {}),
+            ...(whiteSpace ? { whiteSpace } : {}),
+            ...(wordBreak ? { wordBreak } : {}),
+            letterSpacing: spacing,
+          }),
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- fonts changes when a web font loads, after forget() has dropped the widths the last prepare used
+    [text, font, spacing, protect, whiteSpace, wordBreak, fonts],
+  );
+  // Clamps are few beside a table's rows, so each renders on a width change and clamps
+  // only when something it reads has changed.
+  const width = useSyncExternalStore(b.subscribe, b.width, () => undefined);
+  const within = typeof words === "object" ? words.within : words;
+  const c = useMemo(() => {
+    if (prepared === undefined || width === undefined) return undefined;
+    return clamp(prepared, width, {
+      lines,
+      ellipsis,
+      // `after` is an element here and a width to `clamp`, so it's always given as one.
+      after: hasAfter ? afterWidth : 0,
+      ...(at === undefined ? {} : { at }),
+      ...(ratio === undefined ? {} : { ratio }),
+      ...(within === undefined ? {} : { words: typeof within === "number" ? { within } : within }),
+      ...(trim === undefined ? {} : { trim }),
+    });
+  }, [prepared, width, lines, ellipsis, hasAfter, afterWidth, at, ratio, within, trim]);
+  const cutNow = c !== undefined && truncated(c);
+  const shown =
+    props.expanded || prepared === undefined || !cutNow
+      ? text
+      : prepared.text.slice(0, head(c)) + ellipsis + prepared.text.slice(tail(c));
+  return createElement(
+    "div",
+    {
+      ref: b.ref,
+      className: props.className,
+      style: { overflowWrap: "break-word", whiteSpace: whiteSpace ?? "normal" },
+    },
+    shown,
+    hasAfter && (props.expanded || cutNow)
+      ? createElement("span", { ref: setAfter, style: box }, props.after)
+      : null,
+  );
+}

package/src/react.ts

@@ -0,0 +1,251 @@
+// Written with createElement, not JSX: every .tsx file here compiles as Solid, so plain
+// .ts keeps the React adapter clear of the Solid compiler without a second JSX setup.
+import {
+  createContext,
+  createElement,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useSyncExternalStore,
+} from "react";
+import {
+  cut,
+  type Cut,
+  type CutOptions,
+  head,
+  prepare,
+  type Prepared,
+  type Protect,
+  tail,
+  truncated,
+} from "./cut.ts";
+import { fontOf, observe, onFonts, spacingOf } from "./dom.ts";
+import { faceOf, widthOf } from "./face.ts";
+
+export interface BoxProps {
+  /** The room in px. Left out, it is observed from the element. */
+  readonly width?: number;
+  /** A CSS font shorthand. Left out, it is read from the element's computed style. */
+  readonly font?: string;
+  /** CSS `letter-spacing` in px. Left out, it is read from the element's computed style. */
+  readonly letterSpacing?: number;
+}
+
+export interface Box {
+  /** Give it the element whose width and font the text follows. */
+  readonly ref: (element: Element | null) => void;
+  /** The font given, or the element's; undefined until it mounts. */
+  readonly font: string | undefined;
+  /** The letter spacing given, or the element's, in px. */
+  readonly spacing: number;
+  /** Changes whenever web fonts load: a dependency wherever text is prepared. */
+  readonly fonts: number;
+  /** Subscribes to the width, for `useSyncExternalStore`. */
+  readonly subscribe: (change: () => void) => () => void;
+  /** The width given, or the element's content width; undefined until observed. */
+  readonly width: () => number | undefined;
+}
+
+export interface FontProviderProps {
+  /** A CSS font shorthand that every cut inside is in, unless it's given its own. */
+  readonly font?: string;
+  /** CSS `letter-spacing` in px for every cut inside, unless it's given its own. */
+  readonly letterSpacing?: number;
+  readonly children?: ReactNode;
+}
+
+interface Provided {
+  readonly font: string | undefined;
+  readonly letterSpacing: number | undefined;
+}
+
+const Fonts = createContext<Provided>({ font: undefined, letterSpacing: undefined });
+
+/**
+ * Gives every `Truncate`, `Clamp` and `useBox` inside the font and letter spacing their
+ * text renders in, once for a list. Each would otherwise read its element's computed
+ * style when it mounts: 5,000 rows take 4 to 5 ms of style reads. Cuts follow what's
+ * given, so give what the rows really render in.
+ */
+export function FontProvider(props: FontProviderProps): ReactNode {
+  const { font, letterSpacing } = props;
+  const value = useMemo(() => ({ font, letterSpacing }), [font, letterSpacing]);
+  return createElement(Fonts, { value }, props.children);
+}
+
+/**
+ * The width and font text is cut to: the ones given, then a `FontProvider`'s, or an
+ * element's. The width is a store, not state, so a component can read what it derives
+ * from it with `useSyncExternalStore` and render only when that changes.
+ */
+export const useBox = (props: BoxProps): Box => {
+  const provided = useContext(Fonts);
+  const given = props.font ?? provided.font;
+  const givenSpacing = props.letterSpacing ?? provided.letterSpacing;
+  const [element, setElement] = useState<Element | null>(null);
+  const [computed, setComputed] = useState<{ font: string; spacing: number }>();
+  const [fonts, setFonts] = useState(0);
+  const observed = useRef<number | undefined>(undefined);
+  useEffect(() => onFonts(() => setFonts((n) => n + 1)), []);
+  const readFont = given === undefined;
+  const readSpacing = givenSpacing === undefined;
+  // The style is read once per element as it mounts, before it paints, and only for what
+  // wasn't given.
+  const ref = useCallback(
+    (e: Element | null) => {
+      setElement(e);
+      if (!e || (!readFont && !readSpacing)) return;
+      const style = getComputedStyle(e);
+      setComputed({ font: fontOf(e, style), spacing: spacingOf(e, style) });
+    },
+    [readFont, readSpacing],
+  );
+  const observing = props.width === undefined;
+  const subscribe = useCallback(
+    (change: () => void) => {
+      if (!element || !observing) return () => {};
+      return observe(element, (width) => {
+        observed.current = width;
+        change();
+      });
+    },
+    [element, observing],
+  );
+  const width = props.width;
+  return {
+    ref,
+    font: given ?? computed?.font,
+    spacing: givenSpacing ?? computed?.spacing ?? 0,
+    fonts,
+    subscribe,
+    width: () => width ?? observed.current,
+  };
+};
+
+export interface CutProps extends CutOptions, BoxProps {
+  readonly text: string;
+  readonly protect?: Protect;
+}
+
+/**
+ * `protect` kept by what it says, not by identity: an inline literal is new on every
+ * render, and this returns one value while its patterns, weights and wholes stay the same.
+ */
+export const useProtect = (protect: Protect | undefined): Protect | undefined => {
+  let key = "";
+  if (protect) {
+    for (const given of "length" in protect ? protect : [protect]) {
+      const {
+        pattern,
+        weight = 1,
+        whole = false,
+      } = given instanceof RegExp ? { pattern: given } : given;
+      key += `${pattern}${weight}${whole} `;
+    }
+  }
+  // The value from the render that first saw this key, as React's derived state is kept.
+  const [kept, setKept] = useState({ key, protect });
+  if (kept.key !== key) setKept({ key, protect });
+  return kept.key === key ? kept.protect : protect;
+};
+
+export interface UseCutProps extends CutProps {
+  /**
+   * The ellipsis is painted in an element of its own, so it is measured as a run of its
+   * own and no kerning across it counts.
+   */
+  readonly separateEllipsis?: boolean;
+}
+
+export interface CutHandle {
+  /** Give it the element whose width and font the cut follows. */
+  readonly ref: (element: Element | null) => void;
+  readonly prepared: Prepared | undefined;
+  /** Undefined until the width and font are known. */
+  readonly cut: Cut | undefined;
+}
+
+const useCutWith = (props: CutProps, apart: boolean): CutHandle => {
+  const box = useBox(props);
+  const { font, spacing, fonts } = box;
+  const { text } = props;
+  const protect = useProtect(props.protect);
+  const prepared = useMemo(
+    () =>
+      font === undefined
+        ? undefined
+        : prepare(text, font, { ...(protect ? { protect } : {}), letterSpacing: spacing }),
+    // oxlint-disable-next-line react-hooks/exhaustive-deps -- fonts changes when a web font loads, after forget() has dropped the widths the last prepare used
+    [text, font, spacing, protect, fonts],
+  );
+  // The cut is the snapshot: a number, so a resize that doesn't move it renders nothing.
+  const snapshot = (): Cut | undefined => {
+    const width = box.width();
+    if (prepared === undefined || width === undefined || font === undefined) return undefined;
+    const ellipsis = props.ellipsis ?? "…";
+    return apart && typeof ellipsis === "string"
+      ? cut(prepared, width, {
+          ...props,
+          ellipsis: widthOf(faceOf(font), ellipsis) + spacing * ellipsis.length,
+        })
+      : cut(prepared, width, props);
+  };
+  const result = useSyncExternalStore(box.subscribe, snapshot, () => undefined);
+  return { ref: box.ref, prepared, cut: result };
+};
+
+/** The cut of `props.text` for an element's width and font, or for the ones given. */
+export const useCut = (props: UseCutProps): CutHandle =>
+  useCutWith(props, props.separateEllipsis === true);
+
+export interface TruncateProps extends CutProps {
+  readonly ellipsis?: string;
+  /**
+   * "kept" (default) paints the kept text, with the whole text in `title` once cut.
+   * "full" paints all of it with the cut part collapsed to no width, so copy,
+   * find-in-page and screen readers get the whole text.
+   */
+  readonly render?: "kept" | "full";
+  readonly className?: string;
+}
+
+// Until the first cut, the browser's own end ellipsis stands in.
+const line = {
+  display: "block",
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis",
+} as const;
+const collapsed = { fontSize: 0 } as const;
+const unselectable = { userSelect: "none", WebkitUserSelect: "none" } as const;
+
+/** One line of text, cut to fit its box. */
+export function Truncate(props: TruncateProps): ReactNode {
+  const full = props.render === "full";
+  const handle = useCutWith(props, full);
+  const { prepared: p, cut: c } = handle;
+  const ellipsis = props.ellipsis ?? "…";
+  const cutNow = p !== undefined && c !== undefined && truncated(c);
+  const text = p?.text ?? props.text;
+  const kept = cutNow ? text.slice(0, head(c)) : text;
+  const rest = cutNow ? text.slice(tail(c)) : "";
+  const own = {
+    ref: handle.ref,
+    className: props.className,
+    style: line,
+    title: !full && cutNow ? text : undefined,
+  };
+  if (!full) return createElement("span", own, kept + (cutNow ? ellipsis + rest : ""));
+  return createElement(
+    "span",
+    own,
+    kept,
+    createElement("span", { style: collapsed }, cutNow ? text.slice(head(c), tail(c)) : ""),
+    cutNow ? createElement("span", { "aria-hidden": true, style: unselectable }, ellipsis) : null,
+    rest,
+  );
+}

package/src/solid-lines.tsx

@@ -0,0 +1,89 @@
+import type { JSX } from "@solidjs/web";
+import { createMemo, createSignal, onSettled, Show } from "solid-js";
+import { type CutOptions, head, type Protect, tail, truncated } from "./cut.ts";
+import { observe } from "./dom.ts";
+import { clamp, prepareLines } from "./lines.ts";
+import { createBox } from "./solid.tsx";
+
+export interface ClampProps extends Omit<CutOptions, "tailGraphemes"> {
+  readonly text: string;
+  /** How many lines to keep. */
+  readonly lines: number;
+  readonly ellipsis?: string;
+  /**
+   * Painted after the text whenever it is cut or `expanded`, such as a "more" or
+   * "less" button. Its width is observed and kept free on the last line.
+   */
+  readonly after?: JSX.Element;
+  /** Show every line, with `after` following the last one, on its own if it doesn't fit. */
+  readonly expanded?: boolean;
+  /** The room in px. Left out, it is observed from the element. */
+  readonly width?: number;
+  /** A CSS font shorthand. Left out, it is read from the element's computed style. */
+  readonly font?: string;
+  /** CSS `letter-spacing` in px. Left out, it is read from the element's computed style. */
+  readonly letterSpacing?: number;
+  readonly protect?: Protect;
+  readonly whiteSpace?: "normal" | "pre-wrap";
+  readonly wordBreak?: "normal" | "keep-all";
+  readonly class?: string;
+}
+
+/** A paragraph cut to a number of lines at its end, start or middle. */
+export function Clamp(props: ClampProps): JSX.Element {
+  const box = createBox(props);
+  const [afterWidth, setAfterWidth] = createSignal(0);
+  // `after` mounts only once the text is cut, so it is observed from its own ref.
+  let stop: (() => void) | undefined;
+  const watch = (element: Element) => {
+    stop?.();
+    stop = observe(element, setAfterWidth);
+  };
+  onSettled(() => () => stop?.());
+  const prepared = createMemo(() => {
+    box.fonts();
+    const font = box.font();
+    if (font === undefined) return undefined;
+    return prepareLines(props.text, font, {
+      ...(props.protect ? { protect: props.protect } : {}),
+      ...(props.whiteSpace ? { whiteSpace: props.whiteSpace } : {}),
+      ...(props.wordBreak ? { wordBreak: props.wordBreak } : {}),
+      letterSpacing: box.spacing(),
+    });
+  });
+  const cut = createMemo(() => {
+    const p = prepared();
+    const width = box.width();
+    const font = box.font();
+    if (p === undefined || width === undefined || font === undefined) return undefined;
+    // `after` is an element here and a width to `clamp`, so it's always given as one.
+    return clamp(p, width, {
+      ...props,
+      after: props.after === undefined ? 0 : afterWidth(),
+    });
+  });
+  const cutNow = () => {
+    const c = cut();
+    return c !== undefined && truncated(c);
+  };
+  const text = () => {
+    const p = prepared();
+    const c = cut();
+    if (props.expanded || p === undefined || c === undefined || !truncated(c)) return props.text;
+    return p.text.slice(0, head(c)) + (props.ellipsis ?? "…") + p.text.slice(tail(c));
+  };
+  return (
+    <div
+      ref={box.ref}
+      class={props.class}
+      style={{ "overflow-wrap": "break-word", "white-space": props.whiteSpace ?? "normal" }}
+    >
+      {text()}
+      <Show when={props.after !== undefined && (props.expanded || cutNow())}>
+        <span ref={watch} style={{ display: "inline-block" }}>
+          {props.after}
+        </span>
+      </Show>
+    </div>
+  );
+}

package/src/solid.tsx

@@ -0,0 +1,225 @@
+import type { JSX } from "@solidjs/web";
+import {
+  type Accessor,
+  createContext,
+  createMemo,
+  createSignal,
+  onSettled,
+  Show,
+  untrack,
+  useContext,
+} from "solid-js";
+import {
+  cut,
+  type Cut,
+  type CutOptions,
+  head,
+  prepare,
+  type Prepared,
+  type Protect,
+  tail,
+  truncated,
+} from "./cut.ts";
+import { fontOf, observe, onFonts, spacingOf } from "./dom.ts";
+import { faceOf, widthOf } from "./face.ts";
+
+export interface CutProps extends CutOptions {
+  readonly text: string;
+  /** The room in px. Left out, it is observed from the element. */
+  readonly width?: number;
+  /** A CSS font shorthand. Left out, it is read from the element's computed style. */
+  readonly font?: string;
+  /** CSS `letter-spacing` in px. Left out, it is read from the element's computed style. */
+  readonly letterSpacing?: number;
+  readonly protect?: Protect;
+}
+
+export interface CutHandle {
+  /** Give it the element whose width and font the cut follows. */
+  readonly ref: (element: Element) => void;
+  readonly prepared: Accessor<Prepared | undefined>;
+  /** Undefined until the width and font are known. */
+  readonly cut: Accessor<Cut | undefined>;
+}
+
+export interface Box {
+  /** Give it the element whose width and font the text follows. */
+  readonly ref: (element: Element) => void;
+  /** The width given, or the element's content width; undefined until observed. */
+  readonly width: Accessor<number | undefined>;
+  /** The font given, or the element's; undefined until it mounts. */
+  readonly font: Accessor<string | undefined>;
+  /** The letter spacing given, or the element's, in px. */
+  readonly spacing: Accessor<number>;
+  /** Changes whenever web fonts load: read it where text is prepared. */
+  readonly fonts: Accessor<number>;
+}
+
+export interface FontProviderProps {
+  /** A CSS font shorthand that every cut inside is in, unless it's given its own. */
+  readonly font?: string;
+  /** CSS `letter-spacing` in px for every cut inside, unless it's given its own. */
+  readonly letterSpacing?: number;
+  readonly children?: JSX.Element;
+}
+
+const Fonts = createContext<FontProviderProps>({});
+
+/**
+ * Gives every `Truncate`, `Clamp` and `createBox` inside the font and letter spacing
+ * their text renders in, once for a list. Each would otherwise read its element's
+ * computed style when it mounts: 5,000 rows take 4 to 5 ms of style reads. Cuts follow
+ * what's given, so give what the rows really render in.
+ */
+export function FontProvider(props: FontProviderProps): JSX.Element {
+  return <Fonts value={props}>{props.children}</Fonts>;
+}
+
+/**
+ * The width and font text is cut to: the ones given, then a `FontProvider`'s, or an
+ * element's, observed. Whether to observe the width and read the font is decided once,
+ * when it settles.
+ */
+export const createBox = (props: {
+  readonly width?: number;
+  readonly font?: string;
+  readonly letterSpacing?: number;
+}): Box => {
+  const provided = useContext(Fonts);
+  const given = () => props.font ?? provided.font;
+  const spacing = () => props.letterSpacing ?? provided.letterSpacing;
+  let element: Element | undefined;
+  const [observed, setObserved] = createSignal<number>();
+  const [computed, setComputed] = createSignal<string>();
+  const [spaced, setSpaced] = createSignal(0);
+  const [fonts, setFonts] = createSignal(0);
+  onSettled(() => {
+    const stops = [onFonts(() => setFonts((n) => n + 1))];
+    const readFont = untrack(given) === undefined;
+    const readSpacing = untrack(spacing) === undefined;
+    if (element && (readFont || readSpacing)) {
+      const style = getComputedStyle(element);
+      if (readFont) setComputed(fontOf(element, style));
+      if (readSpacing) setSpaced(spacingOf(element, style));
+    }
+    if (element && untrack(() => props.width) === undefined) {
+      stops.push(observe(element, setObserved));
+    }
+    return () => {
+      for (const stop of stops) stop();
+    };
+  });
+  return {
+    ref: (e) => (element = e),
+    width: () => props.width ?? observed(),
+    font: () => given() ?? computed(),
+    spacing: () => spacing() ?? spaced(),
+    fonts,
+  };
+};
+
+export interface CreateCutProps extends CutProps {
+  /**
+   * The ellipsis is painted in an element of its own, so it is measured as a run of its
+   * own and no kerning across it counts. Read once.
+   */
+  readonly separateEllipsis?: boolean;
+}
+
+/** The cut of `props.text` for an element's width and font, or for the ones given. */
+export const createCut = (props: CreateCutProps): CutHandle =>
+  cutOf(
+    props,
+    untrack(() => props.separateEllipsis),
+  );
+
+const cutOf = (props: CutProps, apart: boolean | undefined): CutHandle => {
+  const box = createBox(props);
+  const font = box.font;
+  const prepared = createMemo(() => {
+    box.fonts();
+    const f = font();
+    if (f === undefined) return undefined;
+    return prepare(props.text, f, {
+      ...(props.protect ? { protect: props.protect } : {}),
+      letterSpacing: box.spacing(),
+    });
+  });
+  const result = createMemo(() => {
+    const p = prepared();
+    const width = box.width();
+    const f = font();
+    if (p === undefined || width === undefined || f === undefined) return undefined;
+    const ellipsis = props.ellipsis ?? "…";
+    return apart && typeof ellipsis === "string"
+      ? cut(p, width, {
+          ...props,
+          ellipsis: widthOf(faceOf(f), ellipsis) + box.spacing() * ellipsis.length,
+        })
+      : cut(p, width, props);
+  });
+  return { ref: box.ref, prepared, cut: result };
+};
+
+export interface TruncateProps extends CutProps {
+  readonly ellipsis?: string;
+  /**
+   * "kept" (default) paints the kept text, with the whole text in `title` once cut.
+   * "full" paints all of it with the cut part collapsed to no width, so copy,
+   * find-in-page and screen readers get the whole text. Read once.
+   */
+  readonly render?: "kept" | "full";
+  readonly class?: string;
+}
+
+/** One line of text, cut to fit its box. */
+export function Truncate(props: TruncateProps): JSX.Element {
+  const full = untrack(() => props.render === "full");
+  const handle = cutOf(props, full);
+  const ellipsis = () => props.ellipsis ?? "…";
+  // Head, cut part, tail and, once cut, the whole text. Undefined until the first cut.
+  const parts = createMemo(() => {
+    const p = handle.prepared();
+    const c = handle.cut();
+    if (p === undefined || c === undefined) return undefined;
+    const text = p.text;
+    return [
+      text.slice(0, head(c)),
+      text.slice(head(c), tail(c)),
+      text.slice(tail(c)),
+      truncated(c) ? text : undefined,
+    ] as const;
+  });
+  // Until the first cut, the browser's own end ellipsis stands in.
+  return (
+    <span
+      ref={handle.ref}
+      class={props.class}
+      style={{
+        display: "block",
+        overflow: "hidden",
+        "white-space": "nowrap",
+        "text-overflow": "ellipsis",
+      }}
+      title={full ? undefined : parts()?.[3]}
+    >
+      {full ? (
+        <>
+          {parts()?.[0] ?? props.text}
+          <span style={{ "font-size": "0" }}>{parts()?.[1]}</span>
+          <Show when={parts()?.[3]}>
+            <span
+              aria-hidden="true"
+              style={{ "user-select": "none", "-webkit-user-select": "none" }}
+            >
+              {ellipsis()}
+            </span>
+          </Show>
+          {parts()?.[2]}
+        </>
+      ) : (
+        <>{(parts()?.[0] ?? props.text) + (parts()?.[3] ? ellipsis() + parts()![2] : "")}</>
+      )}
+    </span>
+  );
+}