@dloizides/ui-forms 1.13.2 → 1.13.4

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 1.13.3
+
+**Placeholder text was too dark — it read like an already-filled value.**
+
+`useThemedInput` painted the placeholder with the theme's `textSecondary` — a deliberately
+dark, accessible grey (design-tokens UX-11) that also renders readable secondary *copy*. At
+full strength a placeholder (e.g. `follower` in a "Dance role" box) was hard to tell apart
+from entered text. It is now `textSecondary` composited toward the field background at 0.6
+alpha, so a hint reads clearly lighter than the solid entered text (`colors.text`) while
+keeping the theme hue — and it works in dark mode too (it composites toward whatever the
+field background is). The field's visible label still carries the accessible name, so this
+is a usability win, not an a11y regression. Affects every `@dloizides/ui-forms`-driven input
+(`FormField`, `Field`, `ThemedTextInput`, the `ui-tables` `Filters` search box) across all
+seven portals.
+
 ## 1.12.0
 
 **`FormField` gained `labelHidden` — hide the visible label, keep the accessible name.**

package/dist/index.d.mts

@@ -461,7 +461,11 @@ interface UseThemedInputOptions {
 interface ThemedInput {
     /** The themed input style for the current focus/hover state (memoised). Merge AFTER your box style. */
     style: TextStyle;
-    /** A readable mid-grey placeholder colour from the theme. */
+    /**
+     * The placeholder colour: the theme's `textSecondary` composited toward the field
+     * background ({@link PLACEHOLDER_ALPHA}) so a placeholder reads as a faint hint, clearly
+     * lighter than the solid entered text rather than looking like an already-filled value.
+     */
     placeholderTextColor: string;
     isFocused: boolean;
     isHovered: boolean;
@@ -733,12 +737,13 @@ declare function DateRangeControl({ value, onChange, onSubmit, fromLabel, toLabe
 /**
  * `AnchoredMenu` — the floating option list shared by `SelectControl` and `TypeaheadControl`.
  *
- * By default it renders an in-tree, absolutely-positioned popover under its anchor
- * (`position:absolute; top:100%; zIndex; elevation`). Set {@link AnchoredMenuProps.usePortal} to
- * render it — on web only — in a PORTAL to `document.body` with `position: fixed` at the trigger's
- * measured rect instead: that escapes react-native-web's trapped `z-index: 0` stacking contexts and
- * any ancestor `overflow: hidden`, so the menu is never painted under / clipped by later siblings
- * (the fix for the Country typeahead menu that hid behind the content below it). See {@link menuPortal}.
+ * By DEFAULT (web) it renders in a PORTAL to `document.body` with `position: fixed` at the trigger's
+ * measured rect: that escapes react-native-web's trapped `z-index: 0` stacking contexts and any
+ * ancestor `overflow: hidden`, so the menu is never painted under / clipped by later siblings (a
+ * table, a card, the next filter field). On native, and when {@link AnchoredMenuProps.usePortal} is
+ * explicitly `false`, it renders an in-tree, absolutely-positioned popover under its anchor
+ * (`position:absolute; top:100%; zIndex; elevation`) — which is exactly what left `SelectControl`'s
+ * menu hidden behind the attendee table until the default flipped. See {@link menuPortal}.
  * On web it dismisses on outside-click / Escape; on native the caller closes it on blur/select.
  * Purely presentational + theme-flat, so it stays reusable.
  *
@@ -773,8 +778,13 @@ interface AnchoredMenuProps {
      * On web, render the popover in a portal to `document.body` with `position: fixed` at the anchor's
      * measured rect, so it escapes react-native-web's trapped stacking contexts and any ancestor
      * `overflow: hidden` (the fix for a menu that paints under / is clipped by the content below it).
-     * No effect on native. Default `false` — the existing in-tree behaviour, so `SelectControl`
-     * usages are unchanged; `TypeaheadControl` opts in.
+     * No effect on native (the `IS_WEB` guard keeps native in-tree regardless).
+     *
+     * Default `true` — portalling is the CORRECT default: an in-tree popover is always at risk of
+     * being painted under a later-painting sibling (a table, a card, the next filter field). The old
+     * default was `false`, which silently left `SelectControl`'s menu hidden behind the attendee table
+     * (a recurrence of the exact bug this mechanism fixed for `TypeaheadControl`). Pass `usePortal={false}`
+     * only for the rare case that genuinely wants the menu clipped to its container.
      */
     usePortal?: boolean;
 }

package/dist/index.d.ts

@@ -461,7 +461,11 @@ interface UseThemedInputOptions {
 interface ThemedInput {
     /** The themed input style for the current focus/hover state (memoised). Merge AFTER your box style. */
     style: TextStyle;
-    /** A readable mid-grey placeholder colour from the theme. */
+    /**
+     * The placeholder colour: the theme's `textSecondary` composited toward the field
+     * background ({@link PLACEHOLDER_ALPHA}) so a placeholder reads as a faint hint, clearly
+     * lighter than the solid entered text rather than looking like an already-filled value.
+     */
     placeholderTextColor: string;
     isFocused: boolean;
     isHovered: boolean;
@@ -733,12 +737,13 @@ declare function DateRangeControl({ value, onChange, onSubmit, fromLabel, toLabe
 /**
  * `AnchoredMenu` — the floating option list shared by `SelectControl` and `TypeaheadControl`.
  *
- * By default it renders an in-tree, absolutely-positioned popover under its anchor
- * (`position:absolute; top:100%; zIndex; elevation`). Set {@link AnchoredMenuProps.usePortal} to
- * render it — on web only — in a PORTAL to `document.body` with `position: fixed` at the trigger's
- * measured rect instead: that escapes react-native-web's trapped `z-index: 0` stacking contexts and
- * any ancestor `overflow: hidden`, so the menu is never painted under / clipped by later siblings
- * (the fix for the Country typeahead menu that hid behind the content below it). See {@link menuPortal}.
+ * By DEFAULT (web) it renders in a PORTAL to `document.body` with `position: fixed` at the trigger's
+ * measured rect: that escapes react-native-web's trapped `z-index: 0` stacking contexts and any
+ * ancestor `overflow: hidden`, so the menu is never painted under / clipped by later siblings (a
+ * table, a card, the next filter field). On native, and when {@link AnchoredMenuProps.usePortal} is
+ * explicitly `false`, it renders an in-tree, absolutely-positioned popover under its anchor
+ * (`position:absolute; top:100%; zIndex; elevation`) — which is exactly what left `SelectControl`'s
+ * menu hidden behind the attendee table until the default flipped. See {@link menuPortal}.
  * On web it dismisses on outside-click / Escape; on native the caller closes it on blur/select.
  * Purely presentational + theme-flat, so it stays reusable.
  *
@@ -773,8 +778,13 @@ interface AnchoredMenuProps {
      * On web, render the popover in a portal to `document.body` with `position: fixed` at the anchor's
      * measured rect, so it escapes react-native-web's trapped stacking contexts and any ancestor
      * `overflow: hidden` (the fix for a menu that paints under / is clipped by the content below it).
-     * No effect on native. Default `false` — the existing in-tree behaviour, so `SelectControl`
-     * usages are unchanged; `TypeaheadControl` opts in.
+     * No effect on native (the `IS_WEB` guard keeps native in-tree regardless).
+     *
+     * Default `true` — portalling is the CORRECT default: an in-tree popover is always at risk of
+     * being painted under a later-painting sibling (a table, a card, the next filter field). The old
+     * default was `false`, which silently left `SelectControl`'s menu hidden behind the attendee table
+     * (a recurrence of the exact bug this mechanism fixed for `TypeaheadControl`). Pass `usePortal={false}`
+     * only for the rare case that genuinely wants the menu clipped to its container.
      */
     usePortal?: boolean;
 }

package/dist/index.js

@@ -471,6 +471,7 @@ var TRANSITION_TIMING = "ease";
 var FOCUS_RING_WIDTH = 3;
 var FOCUS_RING_ALPHA = 0.16;
 var HOVER_BORDER_ALPHA = 0.22;
+var PLACEHOLDER_ALPHA = 0.6;
 var HEX_RADIX = 16;
 var HEX_SHORT_LENGTH = 4;
 var HEX_FULL_LENGTH = 7;
@@ -552,7 +553,7 @@ function useThemedInput(options = {}) {
   );
   return {
     style,
-    placeholderTextColor: colors.textSecondary,
+    placeholderTextColor: withAlpha(colors.textSecondary, PLACEHOLDER_ALPHA),
     isFocused,
     isHovered,
     focusBind,
@@ -1106,7 +1107,7 @@ function AnchoredMenu({
   optionHint,
   testID,
   anchorRef,
-  usePortal = false
+  usePortal = true
 }) {
   const menuRef = React2__default.default.useRef(null);
   useDismiss(anchorRef, menuRef, onDismiss);