@oxyhq/bloom 0.15.0 → 0.16.0

package/src/__tests__/Command.test.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { act, fireEvent, render } from '@testing-library/react-native';
+
+import { Command } from '../command';
+import type { CommandItem } from '../command';
+import { BloomThemeProvider } from '../theme/BloomThemeProvider';
+
+function renderWithTheme(ui: React.ReactElement) {
+  return render(
+    <BloomThemeProvider mode="light" colorPreset="teal">
+      {ui}
+    </BloomThemeProvider>,
+  );
+}
+
+function makeItems(onSelect: () => void): CommandItem[] {
+  return [
+    { id: 'profile', label: 'Go to profile', group: 'Navigation', onSelect },
+    { id: 'settings', label: 'Open settings', group: 'Navigation', onSelect },
+    {
+      id: 'new-app',
+      label: 'Create application',
+      description: 'Register a new OAuth client',
+      group: 'Actions',
+      keywords: ['oauth', 'client'],
+      onSelect,
+    },
+  ];
+}
+
+// `Command` is now a ⌘K palette built on `<Dialog placement="center">`. These
+// tests assert the public-API contract it owns (controlled visibility, the
+// grouped results list, query filtering, the empty state, and select →
+// onClose) holds on the native Dialog surface.
+describe('Command (built on Dialog)', () => {
+  it('renders nothing when not visible', () => {
+    const { queryByText } = renderWithTheme(
+      <Command visible={false} onClose={() => {}} items={makeItems(() => {})} />,
+    );
+    expect(queryByText('Go to profile')).toBeNull();
+  });
+
+  it('renders grouped items and their group headers when visible', () => {
+    const { getByText } = renderWithTheme(
+      <Command visible onClose={() => {}} items={makeItems(() => {})} />,
+    );
+    expect(getByText('Go to profile')).toBeTruthy();
+    expect(getByText('Open settings')).toBeTruthy();
+    expect(getByText('Create application')).toBeTruthy();
+    // Group headers are rendered above their items.
+    expect(getByText('Navigation')).toBeTruthy();
+    expect(getByText('Actions')).toBeTruthy();
+  });
+
+  it('filters items by a controlled query (label, description, keywords)', () => {
+    const { getByText, queryByText, rerender } = renderWithTheme(
+      <Command
+        visible
+        onClose={() => {}}
+        items={makeItems(() => {})}
+        query="settings"
+      />,
+    );
+    expect(getByText('Open settings')).toBeTruthy();
+    expect(queryByText('Go to profile')).toBeNull();
+
+    // A keyword on a different item matches that item.
+    rerender(
+      <BloomThemeProvider mode="light" colorPreset="teal">
+        <Command
+          visible
+          onClose={() => {}}
+          items={makeItems(() => {})}
+          query="oauth"
+        />
+      </BloomThemeProvider>,
+    );
+    expect(getByText('Create application')).toBeTruthy();
+    expect(queryByText('Open settings')).toBeNull();
+  });
+
+  it('shows the empty state when nothing matches', () => {
+    const { getByText } = renderWithTheme(
+      <Command
+        visible
+        onClose={() => {}}
+        items={makeItems(() => {})}
+        query="zzz-no-match"
+        emptyText="Nothing here"
+      />,
+    );
+    expect(getByText('Nothing here')).toBeTruthy();
+  });
+
+  it('invokes onSelect then onClose when an item is pressed', () => {
+    const onSelect = jest.fn();
+    const onClose = jest.fn();
+    const { getByText } = renderWithTheme(
+      <Command visible onClose={onClose} items={makeItems(onSelect)} />,
+    );
+    act(() => {
+      fireEvent.press(getByText('Open settings'));
+    });
+    expect(onSelect).toHaveBeenCalledTimes(1);
+    expect(onClose).toHaveBeenCalledTimes(1);
+  });
+});

package/src/alert-dialog/AlertDialog.tsx

@@ -2,28 +2,32 @@ import React, { memo, useCallback } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { Button } from '../button';
+import type { DialogProps } from '../dialog';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { fontSize, space } from '../styles/tokens';
-import type { CenteredDialogProps } from '../dialog';
 import type { AlertDialogProps } from './types';
 
-type CenteredDialogComponent = React.ComponentType<CenteredDialogProps>;
+type DialogComponent = React.ComponentType<DialogProps>;
+
+/** Centered alert-card max width (px). Matches the legacy AlertDialog card. */
+const ALERT_DIALOG_MAX_WIDTH = 440;
 
 /**
- * Build the `AlertDialog` component bound to a platform `CenteredDialog`.
+ * Build the `AlertDialog` component bound to a platform `Dialog`.
  *
- * `CenteredDialog` is platform-forked (native RN `Modal` vs pure-DOM web
- * overlay), and this repo never relies on implicit `.web` resolution — the
- * platform entry files (`index.ts` / `index.web.ts`) inject the correct
- * `CenteredDialog` here. The body below is single-source, no duplication.
+ * `Dialog` is platform-forked (native `BottomSheet`-backed surface vs pure-DOM
+ * web overlay) through its `./dialog` export conditions, and this repo never
+ * relies on implicit `.web` resolution — the platform entry files
+ * (`index.ts` / `index.web.ts`) inject the correct `Dialog` here. The body
+ * below is single-source, no duplication.
  *
- * `AlertDialog` is a thin wrapper over `CenteredDialog` that lays out a title,
- * description and a confirm/cancel action row. Reach for the imperative
- * `confirm()` helper + `<AlertDialogHost />` to trigger a confirm from an
- * event handler without owning visible state.
+ * `AlertDialog` is a thin wrapper over `<Dialog placement="center">` that lays
+ * out a title, description and a confirm/cancel action row. Reach for the
+ * imperative `confirm()` helper + `<AlertDialogHost />` to trigger a confirm
+ * from an event handler without owning visible state.
  */
-export function createAlertDialog(CenteredDialog: CenteredDialogComponent) {
+export function createAlertDialog(Dialog: DialogComponent) {
   const AlertDialogComponent = function AlertDialog({
     visible,
     onClose,
@@ -52,16 +56,31 @@ export function createAlertDialog(CenteredDialog: CenteredDialogComponent) {
     }, [onConfirm, onClose]);
 
     return (
-    <CenteredDialog
-      visible={visible}
-      onClose={dismissible ? onClose : () => {}}
-      dismissible={dismissible}
-      title={title}
-      showClose={false}
-      accessibilityLabel={title}
-      cardStyle={cardStyle}
-      testID={testID}
-      footer={
+      <Dialog
+        open={visible}
+        onClose={onClose}
+        placement="center"
+        // Alert dialogs are blocking by default — the backdrop only dismisses
+        // when the caller opts in via `dismissible`.
+        dismissOnBackdrop={dismissible}
+        maxWidth={ALERT_DIALOG_MAX_WIDTH}
+        title={title}
+        label={title}
+        style={cardStyle}
+        testID={testID}
+      >
+        {description ? (
+          <Text
+            style={{
+              fontSize: fontSize.md,
+              lineHeight: fontSize.md * 1.4,
+              color: theme.colors.textSecondary,
+              paddingBottom: space.lg,
+            }}
+          >
+            {description}
+          </Text>
+        ) : null}
         <View style={styles.actions}>
           {!hideCancel ? (
             <Button
@@ -69,7 +88,8 @@ export function createAlertDialog(CenteredDialog: CenteredDialogComponent) {
               size="medium"
               onPress={handleCancel}
               style={styles.action}
-              accessibilityLabel={cancelLabel}>
+              accessibilityLabel={cancelLabel}
+            >
               {cancelLabel}
             </Button>
           ) : null}
@@ -82,22 +102,12 @@ export function createAlertDialog(CenteredDialog: CenteredDialogComponent) {
               destructive && { backgroundColor: theme.colors.negative },
             ]}
             textStyle={destructive ? { color: theme.colors.negativeForeground } : undefined}
-            accessibilityLabel={confirmLabel}>
+            accessibilityLabel={confirmLabel}
+          >
             {confirmLabel}
           </Button>
         </View>
-      }>
-      {description ? (
-        <Text
-          style={{
-            fontSize: fontSize.md,
-            lineHeight: fontSize.md * 1.4,
-            color: theme.colors.textSecondary,
-          }}>
-          {description}
-        </Text>
-      ) : null}
-    </CenteredDialog>
+      </Dialog>
     );
   };
 

package/src/alert-dialog/index.ts

@@ -1,8 +1,8 @@
-import { CenteredDialog } from '../dialog/index';
+import { Dialog } from '../dialog/index';
 import { createAlertDialog } from './AlertDialog';
 import { createAlertDialogHost } from './AlertDialogHost';
 
-export const AlertDialog = createAlertDialog(CenteredDialog);
+export const AlertDialog = createAlertDialog(Dialog);
 export const AlertDialogHost = createAlertDialogHost(AlertDialog);
 
 export { confirm } from './confirm-store';

package/src/alert-dialog/index.web.ts

@@ -1,8 +1,8 @@
-import { CenteredDialog } from '../dialog/index.web';
+import { Dialog } from '../dialog/index.web';
 import { createAlertDialog } from './AlertDialog';
 import { createAlertDialogHost } from './AlertDialogHost';
 
-export const AlertDialog = createAlertDialog(CenteredDialog);
+export const AlertDialog = createAlertDialog(Dialog);
 export const AlertDialogHost = createAlertDialogHost(AlertDialog);
 
 export { confirm } from './confirm-store';

package/src/command/Command.tsx

@@ -14,10 +14,13 @@ import { Item } from '../item';
 import { Kbd } from '../kbd';
 import { SearchInput } from '../search-input';
 import { fontSize, space } from '../styles/tokens';
-import type { CenteredDialogProps } from '../dialog';
+import type { DialogProps } from '../dialog';
 import type { CommandItem, CommandProps } from './types';
 
-type CenteredDialogComponent = React.ComponentType<CenteredDialogProps>;
+type DialogComponent = React.ComponentType<DialogProps>;
+
+/** Centered command-palette max width (px). Matches the legacy palette card. */
+const COMMAND_MAX_WIDTH = 560;
 
 function defaultFilter(item: CommandItem, query: string): boolean {
   const q = query.trim().toLowerCase();
@@ -36,17 +39,17 @@ interface FlatEntry {
 }
 
 /**
- * Build the `Command` palette bound to a platform `CenteredDialog`. The
- * platform entry files (`index.ts` / `index.web.ts`) inject the correct one
- * (native RN `Modal` vs pure-DOM web overlay) — this repo never relies on
- * implicit `.web` resolution. The body is single-source.
+ * Build the `Command` palette bound to a platform `Dialog`. The platform entry
+ * files (`index.ts` / `index.web.ts`) inject the correct one (native
+ * `BottomSheet`-backed surface vs pure-DOM web overlay) — this repo never
+ * relies on implicit `.web` resolution. The body is single-source.
  *
- * `Command` is a ⌘K command palette built on Bloom's `CenteredDialog`,
+ * `Command` is a ⌘K command palette built on `<Dialog placement="center">`,
  * `SearchInput`, an `Item` results list and `Kbd` shortcut hints. Items group
  * by their `group` field (ungrouped first). On web the list is
  * keyboard-navigable (Up/Down/Enter); on native, tap to select.
  */
-export function createCommand(CenteredDialog: CenteredDialogComponent) {
+export function createCommand(Dialog: DialogComponent) {
   const Command = function Command({
     visible,
     onClose,
@@ -168,15 +171,16 @@ export function createCommand(CenteredDialog: CenteredDialogComponent) {
       : {};
 
   return (
-    <CenteredDialog
-      visible={visible}
+    <Dialog
+      open={visible}
       onClose={onClose}
-      dismissible
-      showClose={false}
-      maxWidth={560}
-      accessibilityLabel="Command palette"
-      cardStyle={style}
-      contentStyle={styles.content}
+      placement="center"
+      dismissOnBackdrop
+      maxWidth={COMMAND_MAX_WIDTH}
+      label="Command palette"
+      // The palette owns its own edge-to-edge layout (full-bleed search border,
+      // padded results) so the Dialog panel contributes no padding of its own.
+      style={[styles.panel, style]}
       testID={testID}>
       <View {...webKeyHandler}>
         <View style={[styles.searchWrap, { borderBottomColor: theme.colors.borderLight }]}>
@@ -200,6 +204,7 @@ export function createCommand(CenteredDialog: CenteredDialogComponent) {
         ) : (
           <ScrollView
             style={{ maxHeight: maxListHeight }}
+            contentContainerStyle={styles.list}
             keyboardShouldPersistTaps="handled"
             showsVerticalScrollIndicator={false}>
             {entries.map((entry, i) => {
@@ -238,7 +243,7 @@ export function createCommand(CenteredDialog: CenteredDialogComponent) {
           </ScrollView>
         )}
       </View>
-    </CenteredDialog>
+    </Dialog>
     );
   };
 
@@ -249,9 +254,15 @@ export function createCommand(CenteredDialog: CenteredDialogComponent) {
 export type CommandType = ReturnType<typeof createCommand>;
 
 const styles = StyleSheet.create({
-  content: {
-    paddingHorizontal: 0,
+  // Zero out the Dialog panel's default padding (longhands beat the web
+  // panel's `padding` shorthand and the native panel's longhand paddings) so
+  // the palette renders edge-to-edge.
+  panel: {
     paddingTop: 0,
+    paddingHorizontal: 0,
+    paddingBottom: space.xs,
+  },
+  list: {
     paddingBottom: space.xs,
   },
   searchWrap: {

package/src/command/index.ts

@@ -1,6 +1,6 @@
-import { CenteredDialog } from '../dialog/index';
+import { Dialog } from '../dialog/index';
 import { createCommand } from './Command';
 
-export const Command = createCommand(CenteredDialog);
+export const Command = createCommand(Dialog);
 
 export type { CommandProps, CommandItem } from './types';

package/src/command/index.web.ts

@@ -1,6 +1,6 @@
-import { CenteredDialog } from '../dialog/index.web';
+import { Dialog } from '../dialog/index.web';
 import { createCommand } from './Command';
 
-export const Command = createCommand(CenteredDialog);
+export const Command = createCommand(Dialog);
 
 export type { CommandProps, CommandItem } from './types';

package/src/dialog/Dialog.tsx

@@ -65,8 +65,7 @@ export { DIALOG_SHEET_BACKDROP_TESTID };
  *     centered card via the 500px cap; flush for bottom: a full-width sheet
  *     with a drag handle). Default behavior is unchanged.
  *   - `'left'` / `'right'` — an anchored side-sheet/drawer driven by
- *     reanimated (the `responsive-sheet` native technique). Exit animations
- *     are safe on native.
+ *     reanimated. Exit animations are safe on native.
  *
  * The component accepts three rendering modes simultaneously:
  *

package/src/dialog/Dialog.web.tsx

@@ -75,8 +75,8 @@ const ClosingContext = createContext(false);
  *
  * Web motion never uses reanimated `exiting` (which throws `removeChild` on
  * concurrent React unmounts): the centered card uses CSS keyframes and the
- * side/bottom modes use self-contained CSS transitions (the `responsive-sheet`
- * technique) on a mounted-through-exit node.
+ * side/bottom modes use self-contained CSS transitions on a
+ * mounted-through-exit node.
  */
 export function Dialog({
   control,
@@ -184,9 +184,12 @@ export function Dialog({
 
   // Escape-to-close while open. The listener is intentionally scoped to the
   // open lifetime so stacked dialogs don't fight for the keydown — the
-  // top-most one wins via document-level event order.
+  // top-most one wins via document-level event order. Escape honors
+  // `dismissOnBackdrop`: a blocking dialog (e.g. an unanswered confirm) is not
+  // dismissible by Escape, matching the backdrop's behavior. The default
+  // (`dismissOnBackdrop` true) is unchanged — Escape still closes.
   useEffect(() => {
-    if (!isOpen || typeof document === 'undefined') return;
+    if (!isOpen || !dismissOnBackdrop || typeof document === 'undefined') return;
     const handler = (e: KeyboardEvent) => {
       if (e.key === 'Escape') {
         e.stopPropagation();
@@ -195,7 +198,7 @@ export function Dialog({
     };
     document.addEventListener('keydown', handler);
     return () => document.removeEventListener('keydown', handler);
-  }, [close, isOpen]);
+  }, [close, dismissOnBackdrop, isOpen]);
 
   useImperativeHandle(
     control?.ref,
@@ -420,7 +423,7 @@ export { DIALOG_SHEET_BACKDROP_TESTID };
 
 /**
  * Side-sheet / bottom-sheet surface for the `left`/`right`/`bottom`
- * placements. Pure CSS transitions (the `responsive-sheet` technique): the
+ * placements. Pure CSS transitions: the
  * node stays mounted through the exit while a `shown` flag drives the
  * transform/opacity, so both directions animate without reanimated `exiting`.
  */

package/src/dialog/index.ts

@@ -1,5 +1,4 @@
 export { Dialog, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog';
-export { CenteredDialog, CENTERED_DIALOG_BACKDROP_TESTID } from './CenteredDialog';
 export { BloomDialogProvider } from './BloomDialogProvider';
 export { alert } from './alert';
 export { useDialogContext, useDialogControl } from './context';
@@ -17,4 +16,3 @@ export type {
   DialogProps,
   ResponsiveDialogPlacement,
 } from './types';
-export type { CenteredDialogProps } from './centered-dialog-types';

package/src/dialog/index.web.ts

@@ -9,11 +9,6 @@
 // `package.json`'s `exports['./dialog']`; native bundlers fall through to
 // the React Native build above.
 export { Dialog, BLOOM_DIALOG_CSS, DIALOG_SHEET_BACKDROP_TESTID } from './Dialog.web';
-export {
-  CenteredDialog,
-  BLOOM_CENTERED_DIALOG_CSS,
-  CENTERED_DIALOG_BACKDROP_TESTID,
-} from './CenteredDialog.web';
 export { BloomDialogProvider } from './BloomDialogProvider.web';
 export { alert } from './alert';
 export { useDialogContext, useDialogControl } from './context';
@@ -31,4 +26,3 @@ export type {
   DialogProps,
   ResponsiveDialogPlacement,
 } from './types';
-export type { CenteredDialogProps } from './centered-dialog-types';

package/src/index.ts

@@ -21,8 +21,6 @@ export * from './portal';
 export {
   Dialog,
   DIALOG_SHEET_BACKDROP_TESTID,
-  CenteredDialog,
-  CENTERED_DIALOG_BACKDROP_TESTID,
   BloomDialogProvider,
   alert,
   useDialogContext,
@@ -31,7 +29,6 @@ export {
 export type {
   AlertButton,
   AlertButtonStyle,
-  CenteredDialogProps,
   DialogAction,
   DialogActionColor,
   DialogContextProps,
@@ -92,14 +89,6 @@ export type { ComboboxProps, ComboboxOption } from './combobox';
 export { BottomSheet } from './bottom-sheet';
 export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 
-// Responsive sheet — side-sheet on wide screens, bottom-sheet on narrow.
-export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './responsive-sheet';
-export type {
-  ResponsiveSheetProps,
-  ResponsiveSheetSide,
-  ResponsiveSheetInset,
-} from './responsive-sheet';
-
 // Data display
 export * from './card';
 export * from './badge';

package/src/index.web.ts

@@ -26,8 +26,6 @@ export * from './portal/index.web';
 export {
   Dialog,
   DIALOG_SHEET_BACKDROP_TESTID,
-  CenteredDialog,
-  CENTERED_DIALOG_BACKDROP_TESTID,
   BloomDialogProvider,
   alert,
   useDialogContext,
@@ -36,7 +34,6 @@ export {
 export type {
   AlertButton,
   AlertButtonStyle,
-  CenteredDialogProps,
   DialogAction,
   DialogActionColor,
   DialogContextProps,
@@ -97,14 +94,6 @@ export type { ComboboxProps, ComboboxOption } from './combobox/index.web';
 export { BottomSheet } from './bottom-sheet';
 export type { BottomSheetRef, BottomSheetProps } from './bottom-sheet';
 
-// Responsive sheet — side-sheet on wide screens, bottom-sheet on narrow.
-export { ResponsiveSheet, RESPONSIVE_SHEET_BACKDROP_TESTID } from './responsive-sheet/index.web';
-export type {
-  ResponsiveSheetProps,
-  ResponsiveSheetSide,
-  ResponsiveSheetInset,
-} from './responsive-sheet/index.web';
-
 // Data display
 export * from './card';
 export * from './badge';