pixelize-native-library 1.0.7 → 1.2.0

package/lib/module/modules/number-input/NumberInput.js

@@ -16,7 +16,7 @@
 import { memo, useEffect, useState } from "react";
 import { Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 import { Icon } from "../../core/icon/index.js";
-import { useTheme } from "../../theme/index.js";
+import { useTheme } from "../../theme/hooks.js";
 import { canDecrementNumberInput, canIncrementNumberInput, clampNumberInputValue, NUMBER_INPUT_SIZES, numberInputStepperStructure, numberInputStructure, parseNumberInputDraft, resolveNumberInputAccessibility, resolveNumberInputStatus, resolveNumberInputStepperPressColors } from "./NumberInput.variants.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const ICON_STROKE = 2;
@@ -58,6 +58,7 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
     status = "default",
     disabled = false,
     label,
+    errorText,
     accessibilityLabel,
     containerStyle,
     testID
@@ -77,9 +78,15 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
   const statusColors = resolveNumberInputStatus(theme.colors, status);
   const pressColors = resolveNumberInputStepperPressColors(theme.colors);
   const a11y = resolveNumberInputAccessibility({
+    value,
+    min,
+    max,
     label,
     accessibilityLabel,
-    disabled
+    disabled,
+    displayText: draft,
+    status,
+    errorText
   });
   const decrementEnabled = canDecrementNumberInput({
     value,
@@ -109,6 +116,10 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
     if (!incrementEnabled) return;
     onValueChange(clampNumberInputValue(value + step, min, max));
   };
+  const handleAccessibilityAction = event => {
+    if (event.nativeEvent.actionName === "increment") handleIncrement();
+    if (event.nativeEvent.actionName === "decrement") handleDecrement();
+  };
   return /*#__PURE__*/_jsxs(View, {
     style: containerStyle,
     children: [label !== undefined &&
@@ -147,10 +158,12 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
         testID: testID ? `${testID}-decrement` : undefined,
         accessibilityRole: "button",
         accessibilityLabel: "Decrease",
-        accessibilityState: {
-          disabled: !decrementEnabled
-        },
-        disabled: !decrementEnabled,
+        "aria-disabled": !decrementEnabled,
+        disabled: !decrementEnabled
+        // RN's Pressable stays `focusable` when disabled, so a TV remote could otherwise land on an
+        // at-limit stepper, which renders no ring (WCAG 2.4.7). RNW already excludes it (tabIndex -1).
+        ,
+        focusable: decrementEnabled,
         onPress: handleDecrement,
         onFocus: () => setDecrementFocused(true),
         onBlur: () => setDecrementFocused(false),
@@ -186,7 +199,15 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
         keyboardType: "numeric",
         editable: a11y.editable,
         accessibilityLabel: a11y.accessibilityLabel,
-        accessibilityState: a11y.accessibilityState,
+        accessibilityValue: a11y.accessibilityValue,
+        "aria-valuemin": a11y["aria-valuemin"],
+        "aria-valuemax": a11y["aria-valuemax"],
+        "aria-valuenow": a11y["aria-valuenow"],
+        "aria-valuetext": a11y["aria-valuetext"],
+        "aria-disabled": a11y["aria-disabled"],
+        "aria-invalid": a11y["aria-invalid"],
+        accessibilityActions: a11y.accessibilityActions,
+        onAccessibilityAction: handleAccessibilityAction,
         hitSlop: spec.hitSlop,
         onFocus: handleFocus,
         onBlur: handleBlur,
@@ -202,10 +223,9 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
         testID: testID ? `${testID}-increment` : undefined,
         accessibilityRole: "button",
         accessibilityLabel: "Increase",
-        accessibilityState: {
-          disabled: !incrementEnabled
-        },
+        "aria-disabled": !incrementEnabled,
         disabled: !incrementEnabled,
+        focusable: incrementEnabled,
         onPress: handleIncrement,
         onFocus: () => setIncrementFocused(true),
         onBlur: () => setIncrementFocused(false),
@@ -235,6 +255,14 @@ export const NumberInput = /*#__PURE__*/memo(function NumberInput(props) {
           })]
         })
       })]
+    }), a11y.message !== undefined && /*#__PURE__*/_jsx(Text, {
+      testID: testID ? `${testID}-error` : undefined,
+      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+        fontSize: theme.fontSizes.xs,
+        color: theme.colors.status.danger.text,
+        marginTop: theme.space[1]
+      }],
+      children: a11y.message
     })]
   });
 });
@@ -247,7 +275,9 @@ const styles = StyleSheet.create({
   // outline on top of the themed ring above it — a visible double border. Web-only: `outlineWidth`
   // also drives native TV remote-control focus, so zeroing it globally would break that.
   webOutlineReset: {
-    outlineWidth: 0
+    outlineStyle: "solid",
+    outlineWidth: 0,
+    borderWidth: 0
   }
 });
 //# sourceMappingURL=NumberInput.js.map

package/lib/module/modules/number-input/NumberInput.variants.js

@@ -80,15 +80,49 @@ export function resolveNumberInputStatus(colors, status) {
     border: colors.border.interactive
   };
 }
-/** Same fallback contract as `resolveInputAccessibility`: an explicit `accessibilityLabel` always
- *  wins over the visible label. */
+/**
+ * Same fallback contract as `resolveInputAccessibility`: an explicit `accessibilityLabel` always wins
+ * over the visible label.
+ *
+ * `now` is the RAW `value`, deliberately NOT clamped the way `resolveSliderAccessibility` clamps its
+ * own — the caller's committed value is what the control's value IS. The announced TEXT is
+ * `displayText` (the draft the field is rendering), not `String(value)`: mid-typing the two diverge
+ * whenever a keystroke doesn't parse or clamps, and a reader speaking a different number from the
+ * one on screen is a 4.1.2 failure in itself. `min`/`max` are omitted rather than defaulted — an
+ * absent bound means "no floor"/"no ceiling" here (see `clampNumberInputValue`), and announcing
+ * `min: 0` would invent one. `accessibilityActions` mirrors `Slider`'s reasoning: iOS surfaces
+ * adjust gestures from the trait, Android TalkBack only surfaces actions declared here (WCAG 2.5.7).
+ */
 export function resolveNumberInputAccessibility(input) {
   const disabled = input.disabled === true;
+  const isError = (input.status ?? "default") === "error";
+  const errorInName = isError && input.errorText ? input.errorText : undefined;
+  const name = [input.accessibilityLabel ?? input.label, errorInName].filter(part => part !== undefined && part !== "");
+  const text = input.displayText ?? String(input.value);
   return {
-    accessibilityLabel: input.accessibilityLabel ?? input.label,
-    accessibilityState: {
-      disabled
+    accessibilityLabel: name.length > 0 ? name.join(", ") : undefined,
+    "aria-disabled": disabled,
+    "aria-invalid": isError,
+    message: errorInName,
+    accessibilityValue: {
+      ...(input.min === undefined ? {} : {
+        min: input.min
+      }),
+      ...(input.max === undefined ? {} : {
+        max: input.max
+      }),
+      now: input.value,
+      text
     },
+    "aria-valuemin": input.min,
+    "aria-valuemax": input.max,
+    "aria-valuenow": input.value,
+    "aria-valuetext": text,
+    accessibilityActions: [{
+      name: "increment"
+    }, {
+      name: "decrement"
+    }],
     editable: !disabled
   };
 }

package/lib/module/modules/org-switcher/MODULE.md

@@ -0,0 +1,121 @@
+# org-switcher/ — a themed org/workspace picker
+
+`OrgSwitcher` is a trigger (identity avatar + active org name + a `chevrons-up-down`) that opens a
+sheet of every org the user belongs to: avatar, org name, the user's **role on its own second
+line**, an accent tint + check on the active row, and a press fill on every row. It renders nothing
+when there's ≤1 option — a switcher with a single choice has nothing to switch to.
+
+## Why this exists
+
+Every consuming app (tickets-mobile, crm-mobile, …) has the same "list of orgs the user belongs to,
+avatar + name, tap to switch" UI. This module is fully controlled: it takes
+`options`/`value`/`onValueChange` and never touches app state, so one change here reaches every
+consumer.
+
+## Why it owns its trigger and sheet (it used to preset `Select`)
+
+Mirrors web, where `OrgSwitcher` owns its Popover rather than wrapping a generic select. As a
+`Select` preset this component could not show the two things web shows: a **tinted active row** and
+a **role subtitle**. `Select`'s row contract is deliberately closed at "one label, one optional
+leading node, a check when active" (see `select/MODULE.md`), and both of those are org-switching
+concerns, not something every select should grow — so the sheet lives here instead. The `Modal` +
+web-portal handling is copied from `Select.tsx`, which remains the reference for that pattern.
+
+## Colours (all measured in `__tests__/OrgSwitcher.test.ts`, every brand × mode)
+
+| Row state | Fill | Name | Role subtitle | Check |
+|-----------|------|------|---------------|-------|
+| inactive | `bg.surface` | `fg.default` regular | `fg.muted` | — |
+| inactive, pressed | `bg.sunken` | ″ | ″ | — |
+| **active** | `accent.subtle` | `fg.default` **semibold** | `fg.muted` | `accent.text` |
+| active, pressed | `bg.surface` | ″ | ″ | ″ |
+
+Press moves each row to the *other* row's fill rather than both landing on one shared pressed
+colour: on **zinc** (the default brand) `accent.subtle` and `bg.sunken` are the same value, so a
+shared pressed fill would leave the active row with no feedback at all. `accent.subtle` +
+`accent.text` is the one tint pair the role table already guarantees at 4.5:1 for every brand ×
+mode — `bg.selected` is not, which is exactly why `Select` refuses to tint.
+
+## Files
+
+| File | Role |
+|------|------|
+| `OrgSwitcher.tsx` | The component: trigger, `Modal` sheet, and the memo'd `OrgSwitcherRow`. Hides for ≤1 option. |
+| `OrgSwitcher.variants.ts` | Pure resolvers (`ORG_SWITCHER_SIZES`, the colour/a11y resolvers, `orgInitials`) + the themed structural resolvers. No React. |
+| `index.ts` | Public surface: `OrgSwitcher`, `OrgSwitcherProps`, `OrgSwitcherOption`, `OrgSwitcherSize`. |
+| `__tests__/OrgSwitcher.test.ts` | Pure: WCAG contrast for every row/trigger state (all brands × modes), the touch-target floor, the a11y contract, `orgInitials`. |
+| `__tests__/OrgSwitcher.render.test.tsx` | Render: ≤1-option hides, role is its own line, the active row is tinted, row press switches, backdrop closes. |
+| `__tests__/OrgSwitcher.keyboard.web.test.tsx` | Escape / Tab trap / focus restore on the web-portal branch, and their deliberate absence on the RNModal branch. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `options` | `OrgSwitcherOption[]` | — | `{ value, label, role?, avatarSource?, avatarInitials? }`. `avatarInitials` defaults to the first letters of `label`'s first two words. |
+| `value` | `string` | — | Active org id. |
+| `onValueChange` | `(value: string) => void` | — | |
+| `placeholder` | `string` | `"Select organization"` | Shown with a `building-2` glyph when nothing is selected. |
+| `size` | `sm \| md \| lg` | `md` | Trigger heights 32 / 40 / 48 dp; avatar `xs` / `sm` / `md`. |
+| `containerStyle` | `LayoutStyle` | — | Layout-only, outermost, applied exactly once, last. |
+| `testID` | `string` | — | Trigger gets it directly; `-backdrop` and `-option-<value>` are suffixed. |
+
+## Accessibility
+
+- **State props are FLAT `aria-*`, never `accessibilityState={{…}}`** — `react-native-web` forwards
+  only a flat `aria-*` vocabulary to the DOM and discards the object form outright, so the web build
+  would expose a role and no state. RN's `View`/`Pressable` merge the flat props back into
+  `accessibilityState` (`View.js`), so native loses nothing. `resolveOrgSwitcherAccessibility`
+  returns the literal quoted key `"aria-expanded"`, and the JSX spells it out.
+- The trigger is a `button` named **"Switch organization, &lt;org&gt;"** — the org name alone would
+  not tell a screen-reader user what the control does — with `aria-expanded` tracking the sheet
+  (WCAG 4.1.2).
+- Rows are `menuitem` with `aria-selected`; the tint is never the *only* selection cue.
+- Rows and trigger both clear the 44dp touch target (trigger via `hitSlop`).
+- **2.1.1 keyboard (web only)** — on the `ModalPortalProvider` branch there is no RN `<Modal>`, so
+  `react-native-web`'s own Escape / focus trap / focus restore never run. The sheet wires
+  `useDismissOnEscape` + `useFocusTrap` (`core/a11y/keyboard`) gated on `portalled && open`;
+  the RNModal branch stays unwired, or the page would carry two of each.
+
+## Host-app contract
+
+The host app owns fetching the org list and the active org id, passing `role` as its **own field**
+(never concatenated into `label` — that is what the subtitle line exists for), switching scope on
+`onValueChange`, and **placement** (e.g. tickets-mobile mounts it at the top of its landing tab).
+
+## Known gaps
+
+- No search/filter for a long org list — web auto-adds one at ≥6 orgs; fine at the org counts real
+  users have today, revisit if that changes.
+- **No roving tabindex / arrow keys on the row list** — each row is still its own tab stop, which is
+  acceptable at real org counts (the same reason there is no search box) but would want
+  `useRovingKeys` if that list ever grows.
+
+## Performance contract
+
+- The sheet's rows go through `core/list`'s `VirtualList` with `itemHeight =
+  ORG_SWITCHER_ROW_MIN_HEIGHT` (rows have a fixed 44dp floor, so `getItemLayout` is exact), and the
+  whole sheet is built only while `open`.
+- `OrgSwitcherRow` is extracted + `React.memo`'d and takes an **id-argument** callback
+  (`onSelect(option.value)`), never an inline arrow per row. `renderItem`/`keyExtractor` are
+  `useCallback`s (ESLint enforces it).
+- Every theme-derived value that reaches a row or a hot style array is `useMemo`'d on `[theme…]`:
+  `resolveOrgSwitcherRowColors` (resting + pressed, resolved once each), the `*Structure(theme)`
+  results, the text style arrays, `options.find`, and `resolveOrgSwitcherAccessibility`. A fresh
+  object here silently defeats the row's `memo`.
+
+## Motion (`core/motion` only — never a local duration)
+
+- **Press** — trigger and rows use `usePressMotion`; the animated layer is an inner
+  `Animated.View` (`*ContentStructure`), so the row/trigger *fill* still comes from `Pressable`'s
+  `pressed` state exactly as the contrast table above measures it.
+- **Active check** — fades via `useMotion().timing` with the skip-first-mount guard, so a row
+  scrolled into view already-active snaps instead of animating. The icon keeps its `selected &&`
+  conditional render.
+- **Sheet** — `useEnterExit(open)` on the panel; the `Modal` keeps `visible={open}` with
+  `animationType="none"` so the library owns the reveal and the sheet always fully unmounts when
+  closed (never gated on an animation callback). This replaced the old `reducedMotion ? "none" :
+  "fade"` — reduce-motion is now handled inside `core/motion` (`motion.enabled === false` snaps).
+
+## Modernization (v1.0.7)
+
+- Theme imports decoupled to `theme/hooks`; optional peers (reanimated, gesture-handler, flash-list) load at runtime.

package/lib/module/modules/org-switcher/OrgSwitcher.js

@@ -0,0 +1,284 @@
+"use strict";
+
+/**
+ * OrgSwitcher — a trigger showing the active org (avatar + name) that opens a sheet of every org
+ * the user belongs to: identity-tinted avatar, org name, the user's role on a second line, and an
+ * accent tint + check on the active one. Renders nothing when there's ≤1 option — a switcher with
+ * a single choice has nothing to switch to.
+ *
+ * It owns its trigger and sheet outright rather than presetting `Select`, mirroring web's
+ * OrgSwitcher (which owns its Popover rather than wrapping a generic select). `Select`'s row
+ * contract is closed at "one label, one optional leading node, a check when active" — a role
+ * subtitle and a tinted active row are org-switching concerns, not things every select should grow.
+ *
+ * Fully controlled and store-agnostic: the host app supplies the org list and owns wherever the
+ * active org actually lives (Redux, context, …) — this module never reads or dispatches app state,
+ * the same contract every other module in this library holds to.
+ *
+ * `Modal` is imported directly from `"react-native"`, and the web-portal branch mirrors `Select`'s
+ * — see that file's header for why both are deliberate.
+ */
+
+import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { Animated, Modal, Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { useDismissOnEscape, useFocusTrap } from "../../core/a11y/keyboard";
+import { Icon } from "../../core/icon/index.js";
+import { VirtualList } from "../../core/list/index.js";
+import { useAnimatedValue, useEnterExit, useMotion, usePressMotion } from "../../core/motion/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { Avatar } from "../avatar/index.js";
+import { ModalPortalContext } from "../modal/ModalPortalContext.js";
+import { renderWebPortal } from "../modal/renderWebPortal";
+import { ORG_SWITCHER_ROW_ICON_SIZE, ORG_SWITCHER_ROW_MIN_HEIGHT, ORG_SWITCHER_SIZES, orgInitials, orgSwitcherOverlayStructure, orgSwitcherRowBodyStructure, orgSwitcherRowContentStructure, orgSwitcherRowStructure, orgSwitcherSheetStructure, orgSwitcherTriggerContentStructure, orgSwitcherTriggerStructure, orgSwitcherTriggerValueStructure, resolveOrgSwitcherAccessibility, resolveOrgSwitcherRowColors, resolveOrgSwitcherTriggerColors } from "./OrgSwitcher.variants.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+// Decorative dismiss scrim behind the sheet — a design constant, not a role token: it is neither
+// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it.
+const BACKDROP_SCRIM = "#00000099";
+const OrgSwitcherRow = /*#__PURE__*/memo(function OrgSwitcherRow({
+  option,
+  selected,
+  theme,
+  spec,
+  onSelect,
+  testID
+}) {
+  const motion = useMotion();
+  const press = usePressMotion();
+  const handlePress = useCallback(() => onSelect(option.value), [onSelect, option.value]);
+  const restingColors = useMemo(() => resolveOrgSwitcherRowColors(theme.colors, selected, false), [theme.colors, selected]);
+  const pressedColors = useMemo(() => resolveOrgSwitcherRowColors(theme.colors, selected, true), [theme.colors, selected]);
+  const rowStructure = useMemo(() => orgSwitcherRowStructure(theme), [theme]);
+  const contentStructure = useMemo(() => orgSwitcherRowContentStructure(theme), [theme]);
+  const bodyStructure = useMemo(() => orgSwitcherRowBodyStructure(theme), [theme]);
+  const rowStyle = useCallback(({
+    pressed
+  }) => [rowStructure, {
+    backgroundColor: pressed ? pressedColors.background : restingColors.background
+  }], [rowStructure, pressedColors, restingColors]);
+  const nameStyle = useMemo(() => [theme.fontStyleForWeight(selected ? theme.fontWeights.semibold : theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.md,
+    color: restingColors.text
+  }], [theme, selected, restingColors]);
+  const roleStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: restingColors.subtitle
+  }], [theme, restingColors]);
+  const checkOpacity = useAnimatedValue(selected ? 1 : 0);
+  const checkStyle = useMemo(() => ({
+    opacity: checkOpacity
+  }), [checkOpacity]);
+  const skipFirst = useRef(true);
+  const running = useRef(null);
+  useEffect(() => {
+    running.current?.stop();
+    // A row scrolled into view already-selected must snap, never fade — no motion during scroll.
+    if (skipFirst.current) {
+      skipFirst.current = false;
+      checkOpacity.setValue(selected ? 1 : 0);
+      return;
+    }
+    if (!motion.enabled) {
+      checkOpacity.setValue(selected ? 1 : 0);
+      return;
+    }
+    running.current = motion.timing(checkOpacity, selected ? 1 : 0, {
+      duration: "fast"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [selected, motion, checkOpacity]);
+  useEffect(() => () => running.current?.stop(), []);
+  return /*#__PURE__*/_jsx(Pressable, {
+    testID: testID ? `${testID}-option-${option.value}` : undefined,
+    accessibilityRole: "menuitem",
+    "aria-selected": selected,
+    onPress: handlePress,
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
+    style: rowStyle,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      style: [contentStructure, press.style],
+      children: [/*#__PURE__*/_jsx(Avatar, {
+        size: spec.avatarSize,
+        shape: "rounded",
+        source: option.avatarSource,
+        initials: option.avatarInitials || orgInitials(option.label),
+        identity: option.label
+      }), /*#__PURE__*/_jsxs(View, {
+        style: bodyStructure,
+        children: [/*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: nameStyle,
+          children: option.label
+        }), option.role !== undefined && /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: roleStyle,
+          children: option.role
+        })]
+      }), selected && /*#__PURE__*/_jsx(Animated.View, {
+        style: checkStyle,
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "check",
+          size: ORG_SWITCHER_ROW_ICON_SIZE,
+          color: restingColors.icon,
+          strokeWidth: ICON_STROKE
+        })
+      })]
+    })
+  });
+});
+export const OrgSwitcher = /*#__PURE__*/memo(function OrgSwitcher({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select organization",
+  size = "md",
+  containerStyle,
+  testID
+}) {
+  const theme = useTheme();
+  const portalContainer = useContext(ModalPortalContext);
+  const sheetRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const sheetMotion = useEnterExit(open);
+  const triggerPress = usePressMotion();
+  const spec = ORG_SWITCHER_SIZES[size];
+  const selectedOption = useMemo(() => options.find(option => option.value === value), [options, value]);
+  const triggerColors = useMemo(() => resolveOrgSwitcherTriggerColors(theme.colors, false), [theme.colors]);
+  const pressedTriggerColors = useMemo(() => resolveOrgSwitcherTriggerColors(theme.colors, true), [theme.colors]);
+  const a11y = useMemo(() => resolveOrgSwitcherAccessibility({
+    open,
+    selectedLabel: selectedOption?.label,
+    placeholder
+  }), [open, selectedOption, placeholder]);
+  const triggerStructure = useMemo(() => orgSwitcherTriggerStructure(theme, {
+    size
+  }), [theme, size]);
+  const triggerStyle = useCallback(({
+    pressed
+  }) => [triggerStructure, {
+    backgroundColor: pressed ? pressedTriggerColors.background : triggerColors.background,
+    borderColor: triggerColors.border
+  }], [triggerStructure, pressedTriggerColors, triggerColors]);
+  const triggerContentStructure = useMemo(() => orgSwitcherTriggerContentStructure(theme), [theme]);
+  const triggerValueStructure = useMemo(() => orgSwitcherTriggerValueStructure(theme), [theme]);
+  const triggerTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.semibold), {
+    flexShrink: 1,
+    fontSize: spec.fontSize,
+    color: selectedOption === undefined ? triggerColors.placeholder : triggerColors.text
+  }], [theme, spec, selectedOption, triggerColors]);
+  const overlayStructure = useMemo(() => orgSwitcherOverlayStructure(theme), [theme]);
+  const sheetStyle = useMemo(() => [orgSwitcherSheetStructure(theme), {
+    backgroundColor: theme.colors.bg.surface
+  }], [theme]);
+  const rootStyle = useMemo(() => [styles.container, containerStyle], [containerStyle]);
+  const openSheet = useCallback(() => setOpen(true), []);
+  const closeMenu = useCallback(() => setOpen(false), []);
+  const selectOption = useCallback(nextValue => {
+    onValueChange(nextValue);
+    setOpen(false);
+  }, [onValueChange]);
+  const keyExtractor = useCallback(option => option.value, []);
+  const renderItem = useCallback(({
+    item: option
+  }) => /*#__PURE__*/_jsx(OrgSwitcherRow, {
+    option: option,
+    selected: option.value === value,
+    theme: theme,
+    spec: spec,
+    onSelect: selectOption,
+    testID: testID
+  }), [value, theme, spec, selectOption, testID]);
+
+  // Only on the portal branch: the RN <Modal> path below already gets Escape/trap/restore from
+  // react-native-web's own <Modal>, and two of each would fight. See ../modal/Modal.tsx.
+  const portalled = Platform.OS === "web" && portalContainer != null;
+  useDismissOnEscape(portalled && open, closeMenu);
+  useFocusTrap(sheetRef, portalled && open);
+  if (options.length <= 1) return null;
+  const sheet = open ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: testID ? `${testID}-backdrop` : undefined,
+      accessible: false,
+      tabIndex: -1,
+      style: styles.backdrop,
+      onPress: closeMenu
+    }), /*#__PURE__*/_jsx(View, {
+      style: overlayStructure,
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        ref: sheetRef,
+        style: [sheetStyle, sheetMotion.style],
+        children: /*#__PURE__*/_jsx(VirtualList, {
+          data: options,
+          keyExtractor: keyExtractor,
+          renderItem: renderItem,
+          itemHeight: ORG_SWITCHER_ROW_MIN_HEIGHT
+        })
+      })
+    })]
+  }) : null;
+  const menu = portalled ? open ? renderWebPortal(/*#__PURE__*/_jsx(View, {
+    style: StyleSheet.absoluteFill,
+    pointerEvents: "box-none",
+    children: sheet
+  }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
+    visible: open,
+    transparent: true,
+    animationType: "none",
+    onRequestClose: closeMenu,
+    children: sheet
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: rootStyle,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: testID,
+      accessibilityRole: a11y.accessibilityRole,
+      accessibilityLabel: a11y.accessibilityLabel,
+      "aria-expanded": a11y["aria-expanded"],
+      onPress: openSheet,
+      onPressIn: triggerPress.onPressIn,
+      onPressOut: triggerPress.onPressOut,
+      hitSlop: spec.hitSlop,
+      style: triggerStyle,
+      children: /*#__PURE__*/_jsxs(Animated.View, {
+        style: [triggerContentStructure, triggerPress.style],
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: triggerValueStructure,
+          children: [selectedOption ? /*#__PURE__*/_jsx(Avatar, {
+            size: spec.avatarSize,
+            shape: "rounded",
+            source: selectedOption.avatarSource,
+            initials: selectedOption.avatarInitials || orgInitials(selectedOption.label),
+            identity: selectedOption.label
+          }) : /*#__PURE__*/_jsx(Icon, {
+            name: "building-2",
+            size: spec.iconSize,
+            color: triggerColors.icon,
+            strokeWidth: ICON_STROKE
+          }), /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: triggerTextStyle,
+            children: selectedOption?.label ?? placeholder
+          })]
+        }), /*#__PURE__*/_jsx(Icon, {
+          name: "chevrons-up-down",
+          size: spec.iconSize,
+          color: triggerColors.icon,
+          strokeWidth: ICON_STROKE
+        })]
+      })
+    }), menu]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  },
+  backdrop: {
+    ...StyleSheet.absoluteFill,
+    backgroundColor: BACKDROP_SCRIM
+  }
+});
+//# sourceMappingURL=OrgSwitcher.js.map