@oxy.so/bloom 7.0.0 → 7.1.0

package/src/project-board/context.ts

@@ -36,6 +36,8 @@ export interface ProjectBoardPlatform {
 }
 export const ProjectBoardPlatformContext =
   createContext<ProjectBoardPlatform | null>(null);
+/** The plot starts its own reveal after the panel has reached its live pixels. */
+export const TicketGenieEnteredContext = createContext(true);
 export function useProjectBoardPlatform() {
   const platform = useContext(ProjectBoardPlatformContext);
   if (!platform)

package/src/search/Search.tsx

@@ -2,6 +2,7 @@ import { forwardRef, useCallback, useMemo, useRef } from 'react';
 import { Platform, type TextInput, View } from 'react-native';
 
 import { mergeRefs } from '../hooks/merge-refs';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { useCommonMessages } from '../locale/common-messages';
 import { useMessages } from '../locale/messages';
 import { SEARCH_MESSAGES } from './messages';
@@ -25,6 +26,8 @@ type SearchProps = Omit<TextFieldInputProps, 'label'> & {
 export const Search = forwardRef<TextInput, SearchProps>(
   function Search({ value, label: labelProp, onClearText, onFocus, onPressIn, ...rest }, ref) {
     const theme = useTheme();
+    const direction = useDirectionProps();
+    const rtl = useIsRtl();
     const common = useCommonMessages();
     const { messages } = useMessages(SEARCH_MESSAGES);
     const label = labelProp ?? common.search;
@@ -66,7 +69,7 @@ export const Search = forwardRef<TextInput, SearchProps>(
     );
 
     return (
-      <View style={[a.w_full, a.relative]}>
+      <View {...direction} style={[a.w_full, a.relative]}>
         <TextField radius={borderRadius.full}>
           <TextFieldIcon icon={MagnifyingGlassIcon} />
           <TextFieldInput
@@ -81,7 +84,7 @@ export const Search = forwardRef<TextInput, SearchProps>(
             autoCorrect={false}
             autoComplete="off"
             autoCapitalize="none"
-            style={showClear ? { paddingRight: 24 } : undefined}
+            style={showClear ? (rtl ? { paddingLeft: 24 } : { paddingRight: 24 }) : undefined}
             {...rest}
             onPressIn={handlePressIn}
             onFocus={handleFocus}
@@ -94,10 +97,8 @@ export const Search = forwardRef<TextInput, SearchProps>(
               a.absolute,
               a.z_20,
               a.my_auto,
-              a.inset_0,
               a.justify_center,
-              a.pr_sm,
-              { left: 'auto' },
+              { top: 0, bottom: 0, insetInlineEnd: 0, paddingInlineEnd: 8 },
             ]}>
             {/* Neutral and transparent. `variant="ghost"` painted an accent
                 wash inside the field, which read as a state the field was not

package/src/sidebar/SidebarToolbar.tsx

@@ -8,10 +8,11 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 import { Button, CloseButton } from '../button';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { RiSearchLine } from '../icons/remix/RiSearchLine';
 import { useCommonMessages } from '../locale/common-messages';
 import { StyledView } from '../styles/styled-primitives';
-import { TextField, TextFieldInput } from '../text-field';
+import { TextField, TextFieldIcon, TextFieldInput } from '../text-field';
 import { useSidebarPalette } from './palette';
 import { IS_WEB } from './parts';
 import type { SidebarToolbarProps } from './types';
@@ -27,24 +28,32 @@ export function SidebarToolbar({
 }: SidebarToolbarProps) {
   const common = useCommonMessages();
   const palette = useSidebarPalette();
+  const direction = useDirectionProps();
+  const rtl = useIsRtl();
   const input = useRef<TextInput>(null);
   const trigger = useRef<React.ComponentRef<typeof Button>>(null);
   const [width, setWidth] = useState(0);
   const reduced = useReducedMotion();
   const progress = useSharedValue(Number(search.open));
+  const actionsProgress = useSharedValue(Number(search.open));
   useEffect(() => {
-    progress.value = reduced
-      ? Number(search.open)
-      : withTiming(Number(search.open), {
-          duration: 300,
-          easing: Easing.bezier(0.42, 0, 0.58, 1),
-        });
+    // The browser owns its CSS transition. Feeding intermediate Reanimated
+    // widths into it restarts that transition every frame and doubles the lag.
+    if (!IS_WEB) {
+      const easing = Easing.bezier(0.4, 0, 0.2, 1);
+      progress.value = reduced
+        ? Number(search.open)
+        : withTiming(Number(search.open), { duration: 300, easing });
+      actionsProgress.value = reduced
+        ? Number(search.open)
+        : withTiming(Number(search.open), { duration: 200, easing });
+    }
     if (search.open) {
       const frame = requestAnimationFrame(() => input.current?.focus());
       return () => cancelAnimationFrame(frame);
     }
     return undefined;
-  }, [search.open, reduced, progress]);
+  }, [search.open, reduced, progress, actionsProgress]);
   const slots = actions.length + 1;
   const collapsedWidth = width > 0 ? (width - 8 * (slots - 1)) / slots : 76;
   const searchWidth = useAnimatedStyle(
@@ -59,12 +68,15 @@ export function SidebarToolbar({
     [width, collapsedWidth, progress],
   );
   const actionsStyle = useAnimatedStyle(() => {
-    const hidden = Math.min(1, progress.value * 1.5);
+    const hidden = actionsProgress.value;
     return {
       opacity: 1 - hidden,
-      transform: [{ translateX: 8 * hidden }, { scale: 1 - 0.05 * hidden }],
+      transform: [
+        { translateX: (rtl ? -8 : 8) * hidden },
+        { scale: 1 - 0.05 * hidden },
+      ],
     };
-  }, [progress]);
+  }, [actionsProgress, rtl]);
   const close = () => {
     search.onValueChange('');
     search.onOpenChange(false);
@@ -73,6 +85,7 @@ export function SidebarToolbar({
   const label = search.accessibilityLabel ?? common.search;
   return (
     <StyledView
+      {...direction}
       testID={testID}
       className="relative h-9 shrink-0"
       style={[{ height: 36 }, style]}
@@ -86,8 +99,8 @@ export function SidebarToolbar({
         {actions.map((action, index) => (
           <AnimatedView
             key={index}
-            className={`flex transition-[opacity,transform] duration-200 motion-reduce:transition-none ${search.open ? 'pointer-events-none translate-x-2 scale-95 opacity-0' : 'translate-x-0 scale-100 opacity-100'}`}
-            style={[{ flex: 1 }, actionsStyle]}
+            className={`flex ${IS_WEB ? `transition-[opacity,transform] duration-200 motion-reduce:transition-none ${search.open ? `pointer-events-none ${rtl ? '-translate-x-2' : 'translate-x-2'} scale-95 opacity-0` : 'translate-x-0 scale-100 opacity-100'}` : ''}`}
+            style={[{ flex: 1 }, !IS_WEB && actionsStyle]}
             pointerEvents={search.open ? 'none' : 'auto'}
             aria-hidden={search.open}
             accessibilityElementsHidden={search.open}
@@ -101,7 +114,7 @@ export function SidebarToolbar({
         ))}
       </StyledView>
       <AnimatedView
-        className="absolute inset-y-0 start-0 z-10 overflow-hidden rounded-full bg-background-tertiary-default transition-[width] duration-300 ease-in-out motion-reduce:transition-none"
+        className={`absolute inset-y-0 start-0 z-10 overflow-hidden rounded-full bg-background-tertiary-default ${IS_WEB ? 'transition-[width] duration-300 ease-in-out motion-reduce:transition-none' : ''}`}
         style={[
           {
             position: 'absolute',
@@ -111,7 +124,9 @@ export function SidebarToolbar({
             borderRadius: 999,
             backgroundColor: palette.tertiary,
           },
-          searchWidth,
+          IS_WEB
+            ? { width: search.open ? '100%' : collapsedWidth }
+            : searchWidth,
         ]}
       >
         {!search.open ? (
@@ -143,10 +158,11 @@ export function SidebarToolbar({
                 height: 36,
                 borderWidth: 0,
                 backgroundColor: palette.tertiary,
-                paddingLeft: 12,
-                paddingRight: 36,
+                paddingInlineStart: 12,
+                paddingInlineEnd: 36,
               }}
             >
+              <TextFieldIcon icon={RiSearchLine} />
               <TextFieldInput
                 inputRef={input}
                 label={label}

package/src/text-field/TextField.tsx

@@ -14,6 +14,7 @@ import { useReducedMotion } from 'react-native-reanimated';
 
 import { useTheme } from '../theme/use-theme';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
 import { useFieldControl } from '../field/context';
 import { mergeRefs } from '../hooks/merge-refs';
 import {
@@ -169,6 +170,7 @@ export function TextField({
   style,
 }: TextFieldProps) {
   const theme = useTheme();
+  const direction = useDirectionProps();
   const invalidProp = invalidNew ?? isInvalid ?? false;
   const group = useContext(TextFieldGroupContext);
   const bare = group !== null;
@@ -228,6 +230,7 @@ export function TextField({
   return (
     <Context.Provider value={context}>
       <View
+        {...direction}
         style={[
           a.flex_row,
           a.align_center,
@@ -307,7 +310,7 @@ function LeadingAddon({
 
   return (
     <View
-      style={[a.z_20, { flexShrink: 0, marginRight: TEXT_FIELD_LEADING_GAP }]}
+      style={[a.z_20, { flexShrink: 0, marginInlineEnd: TEXT_FIELD_LEADING_GAP }]}
       {...(webHandlers as Record<string, unknown> | undefined)}>
       {children}
     </View>
@@ -364,6 +367,7 @@ export function TextFieldInput({
   ...rest
 }: TextFieldInputProps) {
   const theme = useTheme();
+  const rtl = useIsRtl();
   const invalidProp = invalidNew ?? isInvalid;
   // Hidden until asked. Only a secure field can be revealed; for any other the
   // prop is inert, so `secureTextEntry` passes through untouched.
@@ -517,8 +521,10 @@ export function TextFieldInput({
       minWidth: 0,
       // Longhands, so a caller's `paddingRight` (Search's clear button) wins on
       // web too — `paddingHorizontal` becomes `padding-inline`, which outranks it.
-      paddingLeft: TEXT_FIELD_INPUT_INSET,
-      paddingRight: 0,
+      // Resolve against the field's layout direction, not the input's automatic
+      // text direction (an English query may live inside an Arabic interface).
+      paddingLeft: rtl ? 0 : TEXT_FIELD_INPUT_INSET,
+      paddingRight: rtl ? TEXT_FIELD_INPUT_INSET : 0,
     },
     multiline
       ? {
@@ -639,7 +645,7 @@ function RevealButton({
 
   return (
     <View
-      style={[a.z_20, { marginLeft: TEXT_FIELD_TRAILING_GAP - inset, marginRight: -inset }]}
+      style={[a.z_20, { marginInlineStart: TEXT_FIELD_TRAILING_GAP - inset, marginInlineEnd: -inset }]}
       onTouchStart={() => {
         inputWasFocused.current = ctx.inputRef.current?.isFocused() ?? false;
       }}
@@ -916,8 +922,8 @@ export function TextFieldIcon({ icon: Comp, position = 'leading' }: TextFieldIco
       style={[
         a.z_20,
         position === 'leading'
-          ? { marginRight: TEXT_FIELD_LEADING_GAP }
-          : { marginLeft: TEXT_FIELD_TRAILING_GAP },
+          ? { marginInlineEnd: TEXT_FIELD_LEADING_GAP }
+          : { marginInlineStart: TEXT_FIELD_TRAILING_GAP },
       ]}>
       <Comp
         size="md"
@@ -1015,4 +1021,3 @@ export function TextFieldGhost({
     </View>
   );
 }
-