@uniflowed/ui 0.0.0-alpha.9 → 0.2.0

package/pagination.js

@@ -44,8 +44,8 @@
 
 import * as React from "@uniflowed/react";
 
-import type { Rest } from "./internal/merge-props.js";
-import { withoutComposed } from "./internal/merge-props.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
+import { withProps, withoutComposed } from "./internal/merge-props.js";
 
 /**
  * The pagination, as a named landmark, and the region that announces it.
@@ -62,16 +62,16 @@ export component PaginationRoot(
   page?: number | null = null,
   pageCount?: number | null = null,
   announcePage?: (page: number, pageCount: number) => string,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   const message =
     page == null || pageCount == null ? "" : (announcePage ?? defaultAnnouncement)(page, pageCount);
+  const props = withProps(rest, { "aria-label": label, children });
 
   return (
     <>
-      <nav {...rest} aria-label={label}>
-        {children}
-      </nav>
+      {render == null ? <nav {...props} /> : render(withProps(props, { role: "navigation" }))}
       {/*
         Beside the navigation rather than inside it, so a reader walking the
         landmark hears the links and not a sentence about them — and mounted
@@ -93,9 +93,14 @@ export component PaginationRoot(
  */
 export component PaginationContent(
   children: renders* (PaginationItem | PaginationPrevious | PaginationNext),
+  render?: RenderProp,
   ...rest: Rest
 ) {
-  return <ul {...rest}>{children}</ul>;
+  const props = withProps(rest, { children });
+  if (render != null) {
+    return render(withProps(props, { role: "list" }));
+  }
+  return <ul {...props} />;
 }
 
 /**
@@ -108,10 +113,11 @@ export component PaginationItem(
   children: React.Node,
   current?: boolean = false,
   disabled?: boolean = false,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   return (
-    <PageLink current={current} disabled={disabled} rest={rest}>
+    <PageLink current={current} disabled={disabled} render={render} rest={rest}>
       {children}
     </PageLink>
   );
@@ -129,10 +135,11 @@ export component PaginationPrevious(
   children?: React.Node,
   label?: string = "Previous page",
   disabled?: boolean = false,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   return (
-    <PageLink disabled={disabled} label={label} rest={rest}>
+    <PageLink disabled={disabled} label={label} render={render} rest={rest}>
       {children}
     </PageLink>
   );
@@ -143,10 +150,11 @@ export component PaginationNext(
   children?: React.Node,
   label?: string = "Next page",
   disabled?: boolean = false,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   return (
-    <PageLink disabled={disabled} label={label} rest={rest}>
+    <PageLink disabled={disabled} label={label} render={render} rest={rest}>
       {children}
     </PageLink>
   );
@@ -162,11 +170,10 @@ export component PaginationNext(
  * say, correctly, that `disabled` might not be a boolean. Handing the bag over
  * as one value keeps it a bag until it reaches the element it was always for.
  *
- * `disabled` drops the `href` rather than adding an attribute, because there
- * is no such thing as a disabled link: an `<a>` with no `href` is not in the
- * tab order and is not announced as a link, which is exactly what "there is no
- * previous page" means. `aria-disabled` is there too, so a reader who reaches
- * it another way is told why it does nothing.
+ * `disabled` drops the `href` and keeps the link role. That is the ARIA shape
+ * for "this page direction exists, but cannot be taken now": it is out of the
+ * tab order because there is no `href`, still named as Previous or Next, and
+ * announced as disabled rather than as a silent generic element.
  */
 component PageLink(
   rest: Rest,
@@ -174,19 +181,24 @@ component PageLink(
   current?: boolean = false,
   disabled?: boolean = false,
   label?: string,
+  render?: RenderProp,
 ) {
   const passed = withoutComposed(rest, disabled ? ["href"] : []);
+  const props = withProps(passed, {
+    "aria-current": current ? "page" : undefined,
+    "aria-disabled": disabled ? "true" : undefined,
+    "aria-label": label,
+    children,
+    role: disabled ? "link" : undefined,
+  });
+
+  if (render != null) {
+    return <li>{render(withProps(props, { role: "link" }))}</li>;
+  }
 
   return (
     <li>
-      <a
-        {...passed}
-        aria-current={current ? "page" : undefined}
-        aria-disabled={disabled ? "true" : undefined}
-        aria-label={label}
-      >
-        {children}
-      </a>
+      <a {...props} />
     </li>
   );
 }

package/popover.js

@@ -58,15 +58,22 @@ import {
 } from "@uniflowed/react";
 import { useStableCallback } from "@uniflowed/hooks/lifecycle";
 
-import type { Align, Side } from "./internal/anchor.js";
-import type { Rest } from "./internal/merge-props.js";
-import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
+import { useInteractOutside } from "./interactions.js";
+
+import type { Align, LogicalSide } from "./internal/anchor.js";
+import type { PartEvent, RenderProp, Rest } from "./internal/merge-props.js";
+import {
+  composeHandlers,
+  composeRefs,
+  withProps,
+  withoutComposed,
+} from "./internal/merge-props.js";
 import { focusable } from "./internal/focus.js";
 import { useAnchor } from "./internal/anchor.js";
 import { useControlled } from "./internal/controlled-state.js";
 import { usePresence } from "./internal/disclosure.js";
 
-export type { Align, Side } from "./internal/anchor.js";
+export type { Align, LogicalSide, Side } from "./internal/anchor.js";
 
 type PopoverState = {|
   readonly base: string,
@@ -145,30 +152,31 @@ export component PopoverRoot(
  * trigger is not "outside" for exactly this reason — closing there and letting
  * this click reopen made the press a no-op that flickered.
  */
-export component PopoverTrigger(children: React.Node, ...rest: Rest) {
+export component PopoverTrigger(children: React.Node, render?: RenderProp, ...rest: Rest) {
   const popover = usePopover("Popover.Trigger");
   const passed = withoutComposed(rest, ["onClick", "ref"]);
   usePresence(popover.registerTrigger);
+  const props = withProps(passed, {
+    // Only while it is open: an `aria-controls` naming an element that is not
+    // in the document tells a reader there is somewhere to go and then has
+    // nowhere to send them.
+    "aria-controls": popover.open ? `${popover.base}-body` : undefined,
+    "aria-expanded": popover.open ? "true" : "false",
+    "aria-haspopup": "dialog",
+    children,
+    id: `${popover.base}-trigger`,
+    onClick: composeHandlers(rest.onClick, () => popover.setOpen(!popover.open)),
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      // React calls callback refs during commit; focus restoration reads it later.
+      // uf-lint-disable-next-line react-compiler/immutability
+      popover.triggerRef.current = element;
+    }),
+  });
 
-  return (
-    <button
-      {...passed}
-      // Only while it is open: an `aria-controls` naming an element that is not
-      // in the document tells a reader there is somewhere to go and then has
-      // nowhere to send them.
-      aria-controls={popover.open ? `${popover.base}-body` : undefined}
-      aria-expanded={popover.open ? "true" : "false"}
-      aria-haspopup="dialog"
-      id={`${popover.base}-trigger`}
-      onClick={composeHandlers(rest.onClick, () => popover.setOpen(!popover.open))}
-      ref={composeRefs(rest.ref, (element) => {
-        popover.triggerRef.current = element;
-      })}
-      type="button"
-    >
-      {children}
-    </button>
-  );
+  if (render != null) {
+    return render(props);
+  }
+  return <button {...props} type="button" />;
 }
 
 /**
@@ -188,7 +196,16 @@ export component PopoverBody(
   alignOffset?: number = 0,
   avoidCollisions?: boolean = true,
   collisionPadding?: number = 0,
-  side?: Side = "bottom",
+  /**
+   * Where focus lands when it opens, when the first focus stop is the wrong
+   * answer. The same prop `Dialog.Body` takes, deliberately spelled the same
+   * way: `DatePicker.Calendar` fills it with the day that holds the grid's tab
+   * stop, because a reader who opened a date picker is looking for the date and
+   * not for the button that steps back a month.
+   */
+  initialFocus?: { current: HTMLElement | null },
+  render?: RenderProp,
+  side?: LogicalSide = "bottom",
   sideOffset?: number = 0,
   ...rest: Rest
 ) {
@@ -205,13 +222,19 @@ export component PopoverBody(
   const left = useRef(false);
   const triggerRef = popover.triggerRef;
 
+  // useAnchor accepts ref objects and reads them from layout/effects.
+  // uf-lint-disable-next-line react-compiler/refs
   const anchored = useAnchor({
     align,
     alignOffset,
+    // uf-lint-disable-next-line react-compiler/refs
     anchorRef: triggerRef,
     avoidCollisions,
     collisionPadding,
+    // `open` is popover metadata; no ref value is read during render.
+    // uf-lint-disable-next-line react-compiler/refs
     open: popover.open,
+    // uf-lint-disable-next-line react-compiler/refs
     overlayRef: bodyRef,
     side,
     sideOffset,
@@ -234,17 +257,6 @@ export component PopoverBody(
       return node != null && !body.contains(node) && !(trigger?.contains(node) ?? false);
     };
 
-    const onOutsidePress = (event: Event) => {
-      if (!outside(event.target)) {
-        return;
-      }
-      left.current = true;
-      close();
-    };
-    // Capture, so a press is seen even where something below it stops the
-    // event — a menu inside the popover, for instance.
-    document.addEventListener("pointerdown", onOutsidePress, true);
-
     // Tab out is a dismissal, not an escape hatch that leaves a popover open
     // behind the reader: a non-modal overlay whose reader has gone is one they
     // can no longer press Escape at, because Escape is handled where focus is.
@@ -257,13 +269,17 @@ export component PopoverBody(
     };
     document.addEventListener("focusin", onFocusMoved, true);
 
-    // The first thing worth acting on, and the popover itself when it holds
-    // nothing focusable, so focus is inside it either way and Escape reaches
-    // the handler below.
-    (focusable(body)[0] ?? body).focus();
+    // Where the caller said, then the first thing worth acting on, then the
+    // popover itself when it holds nothing focusable - so focus is inside it
+    // whichever of the three answers, and Escape reaches the handler below.
+    //
+    // The named element has to still be *in* this popover, for the reason
+    // `dialog.js` gives at the same line: a ref left from a previous opening
+    // would move focus somewhere the reader did not open.
+    const named = initialFocus?.current ?? null;
+    ((named != null && body.contains(named) ? named : focusable(body)[0]) ?? body).focus();
 
     return () => {
-      document.removeEventListener("pointerdown", onOutsidePress, true);
       document.removeEventListener("focusin", onFocusMoved, true);
       if (left.current) {
         left.current = false;
@@ -278,8 +294,28 @@ export component PopoverBody(
         opener?.focus?.();
       }
     };
-  }, [popover.open, triggerRef, close]);
+    // The ref objects are stable; this effect reads them after the opening commit.
+    // uf-lint-disable-next-line react-compiler/refs
+  }, [popover.open, triggerRef, close, initialFocus]);
 
+  // A press outside is the other way a reader leaves, and the trigger is not
+  // "outside" for the reason the module header gives.
+  // The outside-interaction hook accepts refs; it reads them from event handlers.
+  // uf-lint-disable-next-line react-compiler/refs
+  useInteractOutside({
+    // `open` is popover metadata; the hook reads refs from event handlers.
+    // uf-lint-disable-next-line react-compiler/refs
+    isDisabled: !popover.open,
+    onInteractOutside: () => {
+      left.current = true;
+      close();
+    },
+    // uf-lint-disable-next-line react-compiler/refs
+    refs: [bodyRef, triggerRef],
+  });
+
+  // `open` is popover metadata; no ref value is read during render.
+  // uf-lint-disable-next-line react-compiler/refs
   if (!popover.open) {
     return null;
   }
@@ -290,37 +326,42 @@ export component PopoverBody(
   // leave the popover announced as its button rather than as itself.
   const named = rest["aria-label"] != null || rest["aria-labelledby"] != null;
 
-  return (
-    <div
-      // `passed` first, then this component's semantics; see
-      // `internal/merge-props.js` for the three bugs that rule is made of.
-      {...passed}
-      aria-labelledby={named || !popover.triggered ? undefined : `${popover.base}-trigger`}
-      data-align={anchored.align}
-      data-side={anchored.side}
-      data-state="open"
-      id={`${popover.base}-body`}
-      onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
-        if (event.key !== "Escape") {
-          return;
-        }
-        event.preventDefault();
-        // This popover, not the dialog around it. Two overlays nest in the
-        // DOM, so without this one Escape closed both.
-        event.stopPropagation();
-        close();
-      })}
-      ref={composeRefs(rest.ref, (element) => {
-        bodyRef.current = element;
-      })}
-      // No `aria-modal`. The page behind a popover is still available, and
-      // saying otherwise is the one lie a screen reader cannot see through.
-      role="dialog"
-      // So the popover can hold focus itself when it contains nothing
-      // focusable, and so Escape has somewhere to be heard.
-      tabIndex={-1}
-    >
-      {children}
-    </div>
-  );
+  const props = withProps(passed, {
+    // `triggered` and `base` are popover metadata, not ref values.
+    // uf-lint-disable-next-line react-compiler/refs
+    "aria-labelledby": named || !popover.triggered ? undefined : `${popover.base}-trigger`,
+    children,
+    "data-align": anchored.align,
+    "data-side": anchored.side,
+    "data-state": "open",
+    // `base` is popover metadata, not a ref value.
+    // uf-lint-disable-next-line react-compiler/refs
+    id: `${popover.base}-body`,
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
+      if (event.key !== "Escape") {
+        return;
+      }
+      event.preventDefault();
+      // This popover, not the dialog around it. Two overlays nest in the
+      // DOM, so without this one Escape closed both.
+      event.stopPropagation();
+      close();
+    }),
+    // React calls callback refs during commit; placement effects and traps read it later.
+    // uf-lint-disable-next-line react-compiler/refs
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      bodyRef.current = element;
+    }),
+    // No `aria-modal`. The page behind a popover is still available, and
+    // saying otherwise is the one lie a screen reader cannot see through.
+    role: "dialog",
+    // So the popover can hold focus itself when it contains nothing focusable,
+    // and so Escape has somewhere to be heard.
+    tabIndex: -1,
+  });
+
+  if (render != null) {
+    return render(props);
+  }
+  return <div {...props} />;
 }

package/progress.js

@@ -38,7 +38,8 @@
 
 import * as React from "@uniflowed/react";
 
-import type { Rest } from "./internal/merge-props.js";
+import type { RenderProp, Rest } from "./internal/merge-props.js";
+import { withProps } from "./internal/merge-props.js";
 import { clamp } from "./internal/range.js";
 
 /**
@@ -57,6 +58,9 @@ import { clamp } from "./internal/range.js";
  * `Slider`, whose value may be its own, a progress bar's value arrived as a
  * prop, so the caller already has everything they need to size a bar with and
  * a helpful custom property would only be their own arithmetic handed back.
+ *
+ * `render` changes the element and not the accessibility contract: the
+ * progressbar role and value attributes are the props handed to the caller.
  */
 export component Progress(
   value?: number | null = null,
@@ -64,23 +68,24 @@ export component Progress(
   max?: number = 100,
   valueText?: string,
   children?: React.Node,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   const known = value == null ? null : clamp(value, min, max);
+  const props = withProps(rest, {
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    // Omitted, not zeroed. `aria-valuenow="0"` tells a reader that nothing
+    // has happened; leaving it out tells them the amount is unknown, which
+    // is the true one and the one a spinner means.
+    "aria-valuenow": known ?? undefined,
+    "aria-valuetext": valueText,
+    children,
+    role: "progressbar",
+  });
 
-  return (
-    <div
-      {...rest}
-      aria-valuemax={max}
-      aria-valuemin={min}
-      // Omitted, not zeroed. `aria-valuenow="0"` tells a reader that nothing
-      // has happened; leaving it out tells them the amount is unknown, which
-      // is the true one and the one a spinner means.
-      aria-valuenow={known ?? undefined}
-      aria-valuetext={valueText}
-      role="progressbar"
-    >
-      {children}
-    </div>
-  );
+  if (render != null) {
+    return render(props);
+  }
+  return <div {...props} />;
 }

package/radio-group.js

@@ -76,8 +76,13 @@
 import * as React from "@uniflowed/react";
 import { createContext, useCallback, useContext, useId, useMemo, useRef } from "@uniflowed/react";
 
-import type { Rest } from "./internal/merge-props.js";
-import { composeHandlers, composeRefs, withoutComposed } from "./internal/merge-props.js";
+import type { PartEvent, RenderProp, Rest } from "./internal/merge-props.js";
+import {
+  composeHandlers,
+  composeRefs,
+  withoutComposed,
+  withProps,
+} from "./internal/merge-props.js";
 import { moveOnKey, useFirstItem } from "./internal/roving-focus.js";
 import type { Orientation, RovingSet } from "./internal/roving-focus.js";
 import { useControlled } from "./internal/controlled-state.js";
@@ -146,6 +151,7 @@ export component RadioGroupRoot(
   onValueChange?: (value: string) => void,
   orientation?: Orientation = "vertical",
   name?: string,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   // `onValueChange` promises a `string` while the group's *state* is
@@ -171,44 +177,48 @@ export component RadioGroupRoot(
 
   const state = useMemo(() => ({ selected, select, firstId }), [selected, select, firstId]);
   const passed = withoutComposed(rest, ["onKeyDown", "ref"]);
+  const content = (
+    <>
+      {children}
+      {/*
+        A form submits `<input>` elements, and none of the parts above is one.
+        Without this the group is a control a reader can operate and a form
+        cannot read, which is the same hole `Combobox` still has.
+
+        `type="hidden"` rather than a visually hidden real radio, because the
+        buttons above already carry the whole of the accessible semantics: a
+        second set of native radios would be announced as a second set of
+        answers, and hiding them from the accessibility tree to stop that
+        leaves elements a form's own validation would then point its
+        "please choose one" at.
+      */}
+      {name == null ? null : <input name={name} type="hidden" value={selected ?? ""} />}
+    </>
+  );
+  const props = withProps(passed, {
+    "aria-orientation": orientation,
+    children: content,
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
+      const group: $FlowFixMe = event.currentTarget;
+      const next = moveOnKey(event, group, radioSet(orientation));
+      if (next != null) {
+        // Checking in the same key press is not a shortcut, it is the
+        // pattern: a radio group whose arrows moved focus without checking
+        // leaves a reader believing they have answered when they have not.
+        select(next.getAttribute("data-value") ?? "");
+      }
+    }),
+    // React calls callback refs during commit; keyboard handlers read it later.
+    // uf-lint-disable-next-line react-compiler/refs
+    ref: composeRefs(rest.ref, (element: HTMLElement | null) => {
+      rootRef.current = element;
+    }),
+    role: "radiogroup",
+  });
 
   return (
     <RadioGroupContext.Provider value={state}>
-      <div
-        {...passed}
-        // A reader is told which axis this runs along, and it is also what says
-        // which pair of arrow keys is live.
-        aria-orientation={orientation}
-        onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
-          const group: $FlowFixMe = event.currentTarget;
-          const next = moveOnKey(event, group, radioSet(orientation));
-          if (next != null) {
-            // Checking in the same key press is not a shortcut, it is the
-            // pattern: a radio group whose arrows moved focus without checking
-            // leaves a reader believing they have answered when they have not.
-            select(next.getAttribute("data-value") ?? "");
-          }
-        })}
-        ref={composeRefs(rest.ref, (element) => {
-          rootRef.current = element;
-        })}
-        role="radiogroup"
-      >
-        {children}
-        {/*
-          A form submits `<input>` elements, and none of the parts above is one.
-          Without this the group is a control a reader can operate and a form
-          cannot read, which is the same hole `Combobox` still has.
-
-          `type="hidden"` rather than a visually hidden real radio, because the
-          buttons above already carry the whole of the accessible semantics: a
-          second set of native radios would be announced as a second set of
-          answers, and hiding them from the accessibility tree to stop that
-          leaves elements a form's own validation would then point its
-          "please choose one" at.
-        */}
-        {name == null ? null : <input name={name} type="hidden" value={selected ?? ""} />}
-      </div>
+      {render == null ? <div {...props} /> : render(props)}
     </RadioGroupContext.Provider>
   );
 }
@@ -226,6 +236,7 @@ export component RadioGroupItem(
   value: string,
   children?: React.Node,
   disabled?: boolean = false,
+  render?: RenderProp,
   ...rest: Rest
 ) {
   const group = useRadioGroup("RadioGroup.Item");
@@ -233,41 +244,39 @@ export component RadioGroupItem(
   const checked = group.selected === value;
   const item = useMemo(() => ({ checked }), [checked]);
   const passed = withoutComposed(rest, ["onClick", "onKeyDown"]);
+  const props = withProps(passed, {
+    "aria-checked": checked ? "true" : "false",
+    "aria-disabled": disabled ? "true" : undefined,
+    // Read by the group's key handler, which finds items in the document
+    // rather than in a registry and so needs each one to carry its value.
+    "data-value": value,
+    children,
+    id,
+    onClick: composeHandlers(rest.onClick, (_event: PartEvent) => {
+      if (!disabled) {
+        group.select(value);
+      }
+    }),
+    onKeyDown: composeHandlers(rest.onKeyDown, (event: PartEvent) => {
+      if (disabled || event.key !== " ") {
+        return;
+      }
+      // Stops `Space` scrolling the page — which is what makes a
+      // hand-written radio feel broken even when it works — and stops the
+      // browser's own click arriving afterwards to check this again.
+      event.preventDefault();
+      group.select(value);
+    }),
+    role: "radio",
+    // The roving tab stop: the chosen answer, or the first one while there
+    // is no answer, so `Tab` reaches the group in either state and leaves
+    // it in one press.
+    tabIndex: checked || (group.selected == null && group.firstId === id) ? 0 : -1,
+  });
 
   return (
     <RadioItemContext.Provider value={item}>
-      <button
-        {...passed}
-        aria-checked={checked ? "true" : "false"}
-        aria-disabled={disabled ? "true" : undefined}
-        // Read by the group's key handler, which finds items in the document
-        // rather than in a registry and so needs each one to carry its value.
-        data-value={value}
-        id={id}
-        onClick={composeHandlers(rest.onClick, () => {
-          if (!disabled) {
-            group.select(value);
-          }
-        })}
-        onKeyDown={composeHandlers(rest.onKeyDown, (event) => {
-          if (disabled || event.key !== " ") {
-            return;
-          }
-          // Stops `Space` scrolling the page — which is what makes a
-          // hand-written radio feel broken even when it works — and stops the
-          // browser's own click arriving afterwards to check this again.
-          event.preventDefault();
-          group.select(value);
-        })}
-        role="radio"
-        // The roving tab stop: the chosen answer, or the first one while there
-        // is no answer, so `Tab` reaches the group in either state and leaves
-        // it in one press.
-        tabIndex={checked || (group.selected == null && group.firstId === id) ? 0 : -1}
-        type="button"
-      >
-        {children}
-      </button>
+      {render == null ? <button {...props} type="button" /> : render(props)}
     </RadioItemContext.Provider>
   );
 }
@@ -282,7 +291,7 @@ export component RadioGroupItem(
  * `[aria-checked="true"] > *`, and so the "only while chosen" part is not
  * something each caller reimplements.
  */
-export component RadioGroupIndicator(children?: React.Node, ...rest: Rest) {
+export component RadioGroupIndicator(children?: React.Node, render?: RenderProp, ...rest: Rest) {
   const item = useContext(RadioItemContext);
   if (item == null) {
     throw new Error("RadioGroup.Indicator must be rendered inside a RadioGroup.Item");
@@ -290,9 +299,6 @@ export component RadioGroupIndicator(children?: React.Node, ...rest: Rest) {
   if (!item.checked) {
     return null;
   }
-  return (
-    <span {...rest} aria-hidden="true">
-      {children}
-    </span>
-  );
+  const props = withProps(rest, { "aria-hidden": "true", children });
+  return render == null ? <span {...props} /> : render(props);
 }