@lotics/ui 2.2.0 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "2.2.0",
+  "version": "2.3.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",
@@ -119,6 +119,7 @@
     "./time_field": "./src/time_field.tsx",
     "./date_calendar": "./src/date_calendar.tsx",
     "./dialog": "./src/dialog.tsx",
+    "./drawer": "./src/drawer.tsx",
     "./screen_router": "./src/screen_router.tsx",
     "./route_matching": "./src/route_matching.ts",
     "./menu_title": "./src/menu_title.tsx",

package/src/combobox.tsx

@@ -132,6 +132,13 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
   const triggerRef = useRef<View>(null);
   const inputRef = useRef<RNTextInput>(null);
   const scrollRef = useRef<ScrollView>(null);
+  // Options are focusable (RN-Web Pressable), so a mouse-press on one blurs the
+  // input; commit then refocuses it to keep the textbox focus (aria pattern),
+  // which would re-fire onFocus and reopen the popover. This one-shot flag lets
+  // that programmatic refocus pass without reopening — set on a single-select
+  // commit, consumed by the next onFocus, and cleared on blur (the keyboard
+  // path never blurs, so the refocus is a no-op and onFocus never fires).
+  const suppressFocusOpenRef = useRef(false);
   const baseId = useId();
   const listboxId = `${baseId}-listbox`;
   const optionId = (i: number) => `${baseId}-option-${i}`;
@@ -188,6 +195,9 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
         setQuery("");
       }
       setOpen(false);
+      // Single-select: the refocus below must not reopen the just-closed menu.
+      // Multi-select keeps the menu open to add more, so it isn't suppressed.
+      if (!multi) suppressFocusOpenRef.current = true;
       inputRef.current?.focus();
     },
     [onValueChange, isServer, debouncedSearch, onSearchChange, multi, reflectSelection],
@@ -278,8 +288,19 @@ export function Combobox<T extends string = string, D = unknown>(props: Combobox
           onClear={onClear}
           onChangeText={handleChangeText}
           onFocus={() => {
+            // A programmatic refocus right after a single-select commit must not
+            // reopen the menu; consume the one-shot flag instead of opening.
+            if (suppressFocusOpenRef.current) {
+              suppressFocusOpenRef.current = false;
+              return;
+            }
             if (!disabled) setOpen(true);
           }}
+          onBlur={() => {
+            // Clear a flag the keyboard path left set (its refocus was a no-op,
+            // so onFocus never consumed it) — the next real focus opens normally.
+            suppressFocusOpenRef.current = false;
+          }}
           onKeyPress={handleKeyPress}
           placeholder={chips.length > 0 ? undefined : placeholder}
           placeholderTextColor={colors.zinc["400"]}

package/src/drawer.tsx

@@ -0,0 +1,98 @@
+import { ReactNode } from "react";
+import { Modal, Pressable, StyleSheet, View } from "react-native";
+import { useScreenSize } from "@lotics/ui/use_screen_size";
+import { PortalHost } from "@lotics/ui/portal";
+import { colors } from "@lotics/ui/colors";
+import { Button } from "@lotics/ui/button";
+import { Text } from "@lotics/ui/text";
+import { useOverlayScope } from "@lotics/ui/overlay_scope";
+
+export interface DrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Header title. A string renders as the standard title; a node renders as-is. */
+  title?: ReactNode;
+  /** Panel width on non-small screens (number = px, or a `%` string). Full-width on small screens. */
+  width?: number | `${number}%`;
+  /**
+   * Drawer body. Fills the panel below the header as a plain flex column — lay
+   * out your own scroll area and pinned footer (e.g. a thread that scrolls above
+   * a fixed composer).
+   */
+  children: ReactNode;
+  testID?: string;
+}
+
+/**
+ * A right-docked overlay panel: a scrim over the surface plus a full-height panel
+ * pinned to the right edge. Use it for secondary content that should sit beside
+ * the main surface without leaving it — a comment thread, a record side-panel —
+ * where a centered Dialog would feel heavy. Controlled via `open`/`onOpenChange`;
+ * the scrim and the header close button both dismiss it. The panel goes
+ * full-width on small screens.
+ */
+export function Drawer(props: DrawerProps) {
+  const { open, onOpenChange, title, width = 420, children, testID } = props;
+  const screenSize = useScreenSize();
+  useOverlayScope(open);
+  const handleClose = () => onOpenChange(false);
+
+  return (
+    <Modal visible={open} onRequestClose={handleClose} transparent>
+      <View style={styles.base}>
+        {/* Scrim is a sibling of the panel, so tapping the panel never closes. */}
+        <Pressable style={styles.scrim} onPress={handleClose} accessibilityLabel="Close" />
+        <View style={[styles.panel, { width: screenSize.small ? "100%" : width }]}>
+          <PortalHost>
+            <View style={styles.header}>
+              {typeof title === "string" ? (
+                <Text size="lg" weight="semibold" style={{ flex: 1 }}>
+                  {title}
+                </Text>
+              ) : (
+                <View style={{ flex: 1 }}>{title}</View>
+              )}
+              <Button icon="x" accessibilityLabel="Close" onPress={handleClose} />
+            </View>
+            <View testID={testID} style={styles.body}>
+              {children}
+            </View>
+          </PortalHost>
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  base: {
+    height: "100%",
+    width: "100%",
+    flexDirection: "row",
+  },
+  scrim: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.15)",
+    backdropFilter: "blur(3px)",
+  },
+  panel: {
+    height: "100%",
+    backgroundColor: colors.background,
+    borderLeftWidth: 1,
+    borderLeftColor: colors.border,
+    boxShadow: "-8px 0 24px rgba(0, 0, 0, 0.08)",
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingLeft: 20,
+    paddingRight: 12,
+    paddingTop: 16,
+    paddingBottom: 8,
+    minHeight: 56,
+  },
+  body: {
+    flex: 1,
+  },
+});