@oxyhq/bloom 1.0.2 → 1.0.4

package/src/dialog/SheetShell.tsx

@@ -15,6 +15,7 @@ import { Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'rea
 
 import { BottomSheet, type BottomSheetRef } from '../bottom-sheet';
 import { useAccessibilityFocus } from '../hooks/use-accessibility-focus';
+import { StyledView } from '../styles/styled-primitives';
 import { Z_INDEX } from '../styles/z-index';
 import { useTheme } from '../theme/use-theme';
 import { Context } from './context';
@@ -25,8 +26,11 @@ export interface SheetShellProps {
   label?: string;
   header?: React.ReactNode;
   onClose?: () => void;
+  /** Classes applied to the inner padded content container. */
+  contentClassName?: string;
   /** Style overrides applied to the inner padded content container. */
   contentStyle?: StyleProp<ViewStyle>;
+  contentTestID?: string;
   children?: React.ReactNode;
 }
 
@@ -40,7 +44,9 @@ export function SheetShell({
   label,
   header,
   onClose,
+  contentClassName,
   contentStyle,
+  contentTestID,
   children,
 }: SheetShellProps) {
   const theme = useTheme();
@@ -119,7 +125,7 @@ export function SheetShell({
       <Context.Provider value={context}>
         <SheetHandle onPress={() => close()} />
         {header}
-        <View
+        <StyledView
           // Deliberately NOT `accessible`: collapsing the body into one
           // accessibility element would make its rows unreachable, and the
           // focus move below would land on the group instead of the first row.
@@ -131,10 +137,12 @@ export function SheetShell({
           // sheet is an RN `<Modal>`, whose `onRequestClose` it fires.
           onAccessibilityEscape={() => close()}
           accessibilityLabel={label}
+          className={contentClassName}
+          testID={contentTestID}
           style={[styles.body, { backgroundColor: theme.colors.background }, contentStyle]}
         >
           {children}
-        </View>
+        </StyledView>
       </Context.Provider>
     </BottomSheet>
   );

package/src/dropdown-menu/DropdownMenu.tsx

@@ -52,6 +52,7 @@ export function DropdownMenuTrigger({
   asChild,
   disabled,
   label,
+  className,
   style,
   testID,
 }: DropdownMenuTriggerProps) {
@@ -61,6 +62,7 @@ export function DropdownMenuTrigger({
     <TriggerSlot
       asChild={asChild}
       anchorRef={menu.anchorRef}
+      className={className}
       style={style}
       testID={testID}
       handle={{
@@ -79,7 +81,9 @@ export function DropdownMenuTrigger({
 export function DropdownMenuContent({
   children,
   label = 'Menu',
+  className,
   style,
+  testID,
 }: DropdownMenuContentProps) {
   const menu = useDropdownMenu();
   const { control, onSheetClose } = useSheetOpenBridge(menu.open, menu.setOpen);
@@ -89,7 +93,13 @@ export function DropdownMenuContent({
   );
 
   return (
-    <SheetShell control={control} label={label} onClose={onSheetClose} contentStyle={style}>
+    <SheetShell
+      control={control}
+      label={label}
+      onClose={onSheetClose}
+      contentClassName={className}
+      contentStyle={style}
+      contentTestID={testID}>
       <MenuSurfaceProvider value={surface}>{children}</MenuSurfaceProvider>
     </SheetShell>
   );

package/src/dropdown-menu/DropdownMenu.web.tsx

@@ -47,6 +47,7 @@ export function DropdownMenuTrigger({
   asChild,
   disabled,
   label,
+  className,
   style,
   testID,
 }: DropdownMenuTriggerProps) {
@@ -56,6 +57,7 @@ export function DropdownMenuTrigger({
     <TriggerSlot
       asChild={asChild}
       anchorRef={menu.anchorRef}
+      className={className}
       style={style}
       testID={testID}
       handle={{

package/src/floating/TriggerSlot.tsx

@@ -27,7 +27,7 @@ import { StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { useRestoreAccessibilityFocus } from '../hooks/use-accessibility-focus';
 import { mergeRefs } from '../hooks/merge-refs';
-import { StyledPressable } from '../styles/styled-primitives';
+import { StyledPressable, StyledView } from '../styles/styled-primitives';
 import type { TriggerHandleProps } from './types';
 
 export interface TriggerSlotProps {
@@ -38,6 +38,8 @@ export interface TriggerSlotProps {
   handle: TriggerHandleProps;
   /** Measured by the web forks to position the surface. Unused on native. */
   anchorRef?: React.RefObject<View | null>;
+  /** Classes for the wrapper box — the node the parent lays out. */
+  className?: string;
   /** Style for the wrapper box. The child styles itself. */
   style?: StyleProp<ViewStyle>;
   testID?: string;
@@ -95,6 +97,7 @@ export function TriggerSlot({
   children,
   handle,
   anchorRef,
+  className,
   style,
   testID,
 }: TriggerSlotProps) {
@@ -107,9 +110,10 @@ export function TriggerSlot({
   useRestoreAccessibilityFocus(handle['aria-expanded'] === true, ownRef);
 
   return (
-    <View
+    <StyledView
       ref={mergeRefs([ownRef, anchorRef])}
       collapsable={false}
+      className={className}
       style={[styles.wrap, style]}
       testID={testID}>
       {asChild ? (
@@ -117,7 +121,7 @@ export function TriggerSlot({
       ) : (
         <StyledPressable {...handle}>{children}</StyledPressable>
       )}
-    </View>
+    </StyledView>
   );
 }
 

package/src/floating/constants.ts

@@ -225,6 +225,9 @@ export const ROW_INSET_CLASS = 'pl-space-32';
 /** `pl-8 pr-2` on the two rows that carry an out-of-flow indicator. */
 export const ROW_GUTTER_CLASS = 'pl-space-32 pr-space-8';
 
+/** `pl-2 pr-8` when that out-of-flow indicator sits on the trailing edge. */
+export const ROW_GUTTER_END_CLASS = 'pl-space-8 pr-space-32';
+
 /**
  * The row's own label: `text-sm`, no weight of its own.
  *
@@ -340,4 +343,3 @@ export const SELECT_ITEM_CLASS =
 
 /** `text-foreground select-none text-sm`. */
 export const SELECT_ITEM_TEXT_CLASS = 'flex-1 min-w-0 text-sm text-foreground';
-

package/src/floating/menu-rows.tsx

@@ -48,6 +48,7 @@ import { useTheme } from '../theme/use-theme';
 import {
   ROW_ICON_SIZE,
   ROW_INDICATOR_CLASS,
+  ROW_INDICATOR_END_CLASS,
   ROW_LABEL_CLASS,
   ROW_LABEL_INSET_CLASS,
   ROW_RADIO_DOT_CLASS,
@@ -69,13 +70,13 @@ import type {
 } from './types';
 
 /**
- * The target's `pl-8` gutter with its `absolute left-2 size-3.5` indicator.
+ * The target's 32px selection gutter with its out-of-flow 14px indicator.
  *
  * The indicator is OUT OF FLOW, which is the whole point: a checkbox row's text
- * starts at a fixed 32px whether or not a check is drawn, so a menu's rows line
- * up with each other and with an `inset` plain row. Passing it as a leading slot
- * instead would put it back in flow and add the row's `gap-2` on top, and it
- * would also make the column collapse to nothing on an unchecked row.
+ * starts at a fixed inset whether or not a check is drawn, so a menu's rows line
+ * up. `indicatorPosition="trailing"` mirrors that geometry for products whose
+ * menu vocabulary puts the check at the far edge. Passing the mark as a normal
+ * slot would put it back in flow and collapse the column on an unchecked row.
  *
  * `pointerEvents="none"` as a PROP, not a style entry: the box sits ON TOP of
  * the row's own pressable, so without it the indicator swallows the press that
@@ -84,15 +85,19 @@ import type {
  */
 function IndicatorGutter({
   indicator,
+  position,
   children,
 }: {
   indicator: React.ReactNode;
+  position: 'leading' | 'trailing';
   children: React.ReactNode;
 }) {
   return (
     <StyledView className="relative">
       {children}
-      <StyledView className={ROW_INDICATOR_CLASS} pointerEvents="none">
+      <StyledView
+        className={position === 'leading' ? ROW_INDICATOR_CLASS : ROW_INDICATOR_END_CLASS}
+        pointerEvents="none">
         {indicator}
       </StyledView>
     </StyledView>
@@ -157,6 +162,8 @@ export function createMenuRows(prefix: string, createSub: MenuSubFactory): MenuR
     children,
     checked,
     onCheckedChange,
+    indicator,
+    indicatorPosition = 'leading',
     disabled = false,
     trailing,
     keepOpen = false,
@@ -168,23 +175,26 @@ export function createMenuRows(prefix: string, createSub: MenuSubFactory): MenuR
     const theme = useTheme();
     const surface = useMenuSurface();
     const { title, body } = splitChildren(children);
+    const selectedIndicator =
+      indicator === undefined ? (
+        <CheckIcon
+          width={ROW_ICON_SIZE}
+          height={ROW_ICON_SIZE}
+          fill={theme.colors.text}
+        />
+      ) : (
+        indicator
+      );
 
     return (
       <IndicatorGutter
-        indicator={
-          checked ? (
-            <CheckIcon
-              width={ROW_ICON_SIZE}
-              height={ROW_ICON_SIZE}
-              fill={theme.colors.text}
-            />
-          ) : null
-        }>
+        position={indicatorPosition}
+        indicator={checked ? selectedIndicator : null}>
         <MenuRowShell
           role="checkbox"
           checked={checked}
           disabled={disabled}
-          gutter
+          gutter={indicatorPosition}
           trailing={trailing}
           title={title}
           onPress={() => {
@@ -215,6 +225,8 @@ export function createMenuRows(prefix: string, createSub: MenuSubFactory): MenuR
   function MenuRadioItem({
     children,
     value,
+    indicator,
+    indicatorPosition = 'leading',
     disabled = false,
     trailing,
     keepOpen = false,
@@ -227,22 +239,21 @@ export function createMenuRows(prefix: string, createSub: MenuSubFactory): MenuR
     const group = useMenuRadioGroup();
     const { title, body } = splitChildren(children);
     const checked = group.value === value;
+    // `bg-foreground h-2 w-2 rounded-full`: the established default remains a
+    // filled dot. A caller-supplied node replaces only this selected mark; the
+    // shared gutter and ARIA state remain owned here.
+    const selectedIndicator =
+      indicator === undefined ? <StyledView className={ROW_RADIO_DOT_CLASS} /> : indicator;
 
     return (
       <IndicatorGutter
-        indicator={
-          // `bg-foreground h-2 w-2 rounded-full` — a selected radio row is a
-          // FILLED DOT with no ring, which is what fits an 8px mark inside a
-          // 14px indicator box. `radio-indicator/` draws Bloom's ringed control,
-          // a different thing at a different size, and using it here is what made
-          // a menu radio row twice the width of its checkbox sibling.
-          checked ? <StyledView className={ROW_RADIO_DOT_CLASS} /> : null
-        }>
+        position={indicatorPosition}
+        indicator={checked ? selectedIndicator : null}>
         <MenuRowShell
           role="radio"
           checked={checked}
           disabled={disabled}
-          gutter
+          gutter={indicatorPosition}
           trailing={trailing}
           title={title}
           onPress={() => {

package/src/floating/menu-sub-flyout.tsx

@@ -388,7 +388,19 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
   }
   MenuSubTrigger.displayName = `${prefix}SubTrigger`;
 
-  function MenuSubContent({ children, className, style }: MenuSubContentProps) {
+  function MenuSubContent({
+    children,
+    label = 'Submenu',
+    side = 'right',
+    align = 'start',
+    sideOffset = MENU_SUB_SIDE_OFFSET,
+    alignOffset,
+    minWidth,
+    maxWidth,
+    className,
+    style,
+    testID,
+  }: MenuSubContentProps) {
     const sub = useSubFlyout();
     const anchor = useFlyoutAnchor(sub.triggerRef, sub.open);
     const [node, setNode] = useState<View | null>(null);
@@ -445,19 +457,24 @@ export function createFlyoutMenuSub(prefix: string): MenuSubParts {
         open={sub.open}
         anchor={anchor}
         role="menu"
-        side="right"
+        label={label}
+        side={side}
         // The panel's first row lines up with the trigger row it flew out of.
-        align="start"
+        align={align}
         // Measured from the PARENT PANEL's edge, not the trigger row's — see
         // `useFlyoutAnchor`.
-        sideOffset={MENU_SUB_SIDE_OFFSET}
+        sideOffset={sideOffset}
+        alignOffset={alignOffset}
         dismissible={false}
         modal={false}
         onDismiss={sub.closeAndRefocus}
+        minWidth={minWidth}
+        maxWidth={maxWidth}
         // `w-64` — a sub panel is a FIXED 256px, so a column of flyouts does not
         // step in and out as their labels change length.
         className={cx(MENU_SUB_PANEL_CLASS, className)}
-        style={style}>
+        style={style}
+        testID={testID}>
         {/* `-mx-1 px-1 max-h-96 overflow-y-auto`: the negative inset bleeds the
             scroller to the panel edge and pads the content back, so the
             scrollbar is not inset by the panel's own `p-1`. It doubles as the

package/src/floating/menu-sub-inline.tsx

@@ -93,13 +93,23 @@ export function createInlineMenuSub(prefix: string): MenuSubParts {
   }
   MenuSubTrigger.displayName = `${prefix}SubTrigger`;
 
-  function MenuSubContent({ children, className, style }: MenuSubContentProps) {
+  function MenuSubContent({
+    children,
+    label,
+    className,
+    style,
+    testID,
+  }: MenuSubContentProps) {
     const sub = useMenuSub();
     if (!sub.open) return null;
     // Indented under its trigger, which is the whole visual statement an inline
     // disclosure makes.
     return (
-      <StyledView className={cx('pl-space-16', className)} style={style}>
+      <StyledView
+        accessibilityLabel={label}
+        className={cx('pl-space-16', className)}
+        style={style}
+        testID={testID}>
         {children}
       </StyledView>
     );

package/src/floating/shared.tsx

@@ -47,6 +47,7 @@ import {
   ROW_DISABLED_CLASS,
   ROW_ENABLED_CLASS,
   ROW_GUTTER_CLASS,
+  ROW_GUTTER_END_CLASS,
   ROW_HIGHLIGHT_CLASS,
   ROW_INSET_CLASS,
   ROW_LEADING_CLASS,
@@ -116,8 +117,8 @@ export interface MenuRowShellProps {
   destructive?: boolean;
   /** Indent to line up with the rows that carry an indicator. */
   inset?: boolean;
-  /** This row carries an out-of-flow indicator, so it takes the full gutter. */
-  gutter?: boolean;
+  /** This row carries an out-of-flow indicator at the named edge. */
+  gutter?: 'leading' | 'trailing';
   leading?: React.ReactNode;
   trailing?: React.ReactNode;
   /** A plain-string child, rendered as the row's own label. */
@@ -146,7 +147,7 @@ export function MenuRowShell({
   disabled,
   destructive = false,
   inset = false,
-  gutter = false,
+  gutter,
   leading,
   trailing,
   title,
@@ -164,7 +165,13 @@ export function MenuRowShell({
   const rowClass = cx(
     ROW_CLASS,
     disabled ? ROW_DISABLED_CLASS : ROW_ENABLED_CLASS,
-    gutter ? ROW_GUTTER_CLASS : inset ? ROW_INSET_CLASS : false,
+    gutter === 'leading'
+      ? ROW_GUTTER_CLASS
+      : gutter === 'trailing'
+        ? ROW_GUTTER_END_CLASS
+        : inset
+          ? ROW_INSET_CLASS
+          : false,
     highlighted && ROW_HIGHLIGHT_CLASS,
     className,
   );

package/src/floating/types.ts

@@ -189,9 +189,8 @@ export interface OverlayTriggerProps {
   /** Accessible name. Ignored when the `asChild` child carries its own. */
   label?: string;
   /**
-   * Appended to whatever chrome the trigger draws of its own. A trigger that
-   * draws none (a dropdown's, a popover's) simply has nothing to append to, so
-   * the class lands alone.
+   * Bare triggers apply this to the measured anchor wrapper; families whose
+   * trigger owns chrome append it to that chrome instead.
    */
   className?: string;
   style?: StyleProp<ViewStyle>;
@@ -274,6 +273,13 @@ export interface MenuCheckboxRowProps
   extends Omit<MenuRowProps, 'onPress' | 'variant' | 'leading' | 'inset'> {
   checked: boolean;
   onCheckedChange: (checked: boolean) => void;
+  /**
+   * Mark rendered while checked. Omit for Bloom's default check; pass `null`
+   * to suppress it or a glyph to match a product-specific menu.
+   */
+  indicator?: React.ReactNode;
+  /** Where the mark sits. Defaults to the established leading gutter. */
+  indicatorPosition?: 'leading' | 'trailing';
 }
 
 export interface MenuRadioGroupProps {
@@ -285,6 +291,13 @@ export interface MenuRadioGroupProps {
 export interface MenuRadioRowProps
   extends Omit<MenuRowProps, 'onPress' | 'variant' | 'leading' | 'inset'> {
   value: string;
+  /**
+   * Mark rendered while this value is selected. Omit for Bloom's default dot;
+   * pass `null` to suppress it or a glyph to match a product-specific menu.
+   */
+  indicator?: React.ReactNode;
+  /** Where the mark sits. Defaults to the established leading gutter. */
+  indicatorPosition?: 'leading' | 'trailing';
 }
 
 export interface MenuLabelProps {
@@ -325,9 +338,22 @@ export interface MenuSubTriggerProps {
 
 export interface MenuSubContentProps {
   children?: React.ReactNode;
+  /** Accessible name of the flyout panel on web. */
+  label?: string;
+  /** Preferred lateral side on web. Defaults to `'right'` and may flip to fit. */
+  side?: Extract<FloatingSide, 'left' | 'right'>;
+  /** Vertical alignment against the sub trigger on web. Defaults to `'start'`. */
+  align?: FloatingAlign;
+  /** Gap from the parent panel edge on web. Defaults to Bloom's submenu seam. */
+  sideOffset?: number;
+  /** Vertical shift applied before viewport clamping on web. */
+  alignOffset?: number;
+  minWidth?: number;
+  maxWidth?: number;
   /** Appended to the sub panel's own classes — see {@link MenuRowProps.className}. */
   className?: string;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 /**

package/src/popover/Popover.tsx

@@ -36,6 +36,7 @@ export function PopoverTrigger({
   asChild,
   disabled,
   label,
+  className,
   style,
   testID,
 }: PopoverTriggerProps) {
@@ -45,6 +46,7 @@ export function PopoverTrigger({
     <TriggerSlot
       asChild={asChild}
       anchorRef={popover.anchorRef}
+      className={className}
       style={style}
       testID={testID}
       handle={{

package/src/popover/Popover.web.tsx

@@ -36,6 +36,7 @@ export function PopoverTrigger({
   asChild,
   disabled,
   label,
+  className,
   style,
   testID,
 }: PopoverTriggerProps) {
@@ -45,6 +46,7 @@ export function PopoverTrigger({
     <TriggerSlot
       asChild={asChild}
       anchorRef={popover.anchorRef}
+      className={className}
       style={style}
       testID={testID}
       handle={{