@ankhorage/zora 2.8.6 → 2.9.0

package/src/components/form/Form.tsx

@@ -24,6 +24,7 @@ function FormInner<TName extends string = string>({
   footer,
   validateOnChange = false,
   testID,
+  interactionPolicy,
 }: FormProps<TName>) {
   const controller = useFormController({
     fields,
@@ -43,6 +44,7 @@ function FormInner<TName extends string = string>({
           disabled={disabled}
           error={controller.errors[field.name]}
           field={field}
+          interactionPolicy={interactionPolicy}
           loading={loading}
           onChange={controller.setFieldValue}
           value={values[field.name]}
@@ -50,8 +52,11 @@ function FormInner<TName extends string = string>({
       ))}
       <FormActions
         disabled={disabled}
+        interactionPolicy={interactionPolicy}
         loading={loading}
         onSubmit={() => {
+          if (interactionPolicy === 'passive') return;
+
           void controller.handleSubmit();
         }}
         submitLabel={submitLabel}

package/src/components/form/FormActions.tsx

@@ -14,10 +14,17 @@ function FormActionsInner({
   onSubmit,
   children,
   testID,
+  interactionPolicy,
 }: FormActionsProps) {
   return (
     <Stack gap="s" testID={testID}>
-      <Button disabled={disabled} fullWidth loading={loading} onPress={onSubmit}>
+      <Button
+        disabled={disabled}
+        fullWidth
+        interactionPolicy={interactionPolicy}
+        loading={loading}
+        onPress={onSubmit}
+      >
         {submitLabel}
       </Button>
       {children ? <Box>{children}</Box> : null}

package/src/components/form/FormError.tsx

@@ -6,7 +6,13 @@ import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import { Text } from '../text';
 import type { FormErrorProps } from './types';
 
-function FormErrorInner({ themeId: _themeId, mode: _mode, error, testID }: FormErrorProps) {
+function FormErrorInner({
+  themeId: _themeId,
+  mode: _mode,
+  error,
+  testID,
+  interactionPolicy: _interactionPolicy,
+}: FormErrorProps) {
   const { theme } = useZoraTheme();
 
   if (!error) {

package/src/components/form/FormField.tsx

@@ -94,6 +94,7 @@ function FormFieldInner<TName extends string = string>(props: FormFieldProps<TNa
       description,
       helperText,
       children,
+      interactionPolicy: _interactionPolicy,
       ...fieldProps
     } = props;
 
@@ -114,6 +115,7 @@ function FormFieldInner<TName extends string = string>(props: FormFieldProps<TNa
     loading = false,
     onChange,
     testID,
+    interactionPolicy,
   } = props;
   const fieldDisabled = disabled || loading || field.disabled;
   const required = field.required ?? hasRequiredRule(field.rules);
@@ -134,6 +136,7 @@ function FormFieldInner<TName extends string = string>(props: FormFieldProps<TNa
         autoCapitalize={resolveAutoCapitalize(field)}
         autoComplete={field.autoComplete}
         disabled={fieldDisabled}
+        interactionPolicy={interactionPolicy}
         invalid={Boolean(error)}
         keyboardType={resolveKeyboardType(field)}
         maxLength={field.maxLength}

package/src/components/gradient/Gradient.tsx

@@ -8,6 +8,7 @@ import type { GradientProps } from './types';
 function GradientInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   children,
   colors,
   locations,

package/src/components/heading/Heading.tsx

@@ -63,9 +63,10 @@ function HeadingInner({
   style,
   accessibilityLabel,
   accessibilityHint,
-  accessibilityRole = 'header',
+  accessibilityRole,
   nativeID,
   testID,
+  interactionPolicy: _interactionPolicy,
 }: HeadingProps) {
   const { theme } = useZoraTheme();
   const { breakpoint } = useResponsiveRuntime();
@@ -84,7 +85,7 @@ function HeadingInner({
     <ReactNativeText
       accessibilityHint={accessibilityHint}
       accessibilityLabel={accessibilityLabel}
-      accessibilityRole={accessibilityRole}
+      accessibilityRole={accessibilityRole ?? 'header'}
       ellipsizeMode={ellipsizeMode}
       nativeID={nativeID}
       numberOfLines={numberOfLines}

package/src/components/icon/Icon.tsx

@@ -6,7 +6,12 @@ import type { ZoraBaseProps } from '../../theme/ZoraBaseProps';
 
 export interface IconProps extends ZoraBaseProps, Omit<SurfaceIconProps, 'mode' | 'themeId'> {}
 
-function IconInner({ themeId: _themeId, mode: _mode, ...props }: IconProps) {
+function IconInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: IconProps) {
   return <SurfaceIcon {...props} />;
 }
 

package/src/components/icon-button/IconButton.tsx

@@ -13,6 +13,7 @@ function IconButtonInner({
   variant = 'ghost',
   color = 'neutral',
   size = 'm',
+  interactionPolicy,
   ...props
 }: IconButtonProps) {
   const recipe = resolveButtonRecipe({ color, variant, size });
@@ -25,6 +26,7 @@ function IconButtonInner({
       color={recipe.color}
       size={recipe.size}
       variant={recipe.variant}
+      interactionPolicy={interactionPolicy}
     />
   );
 }

package/src/components/image/Image.tsx

@@ -4,7 +4,12 @@ import React from 'react';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { ImageProps } from './types';
 
-function ImageInner({ themeId: _themeId, mode: _mode, ...props }: ImageProps) {
+function ImageInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: ImageProps) {
   return <SurfaceImage {...props} />;
 }
 

package/src/components/input/Input.tsx

@@ -16,6 +16,7 @@ function InputInner({
   trailingAction,
   disabled,
   readOnly,
+  interactionPolicy,
   ...props
 }: InputProps) {
   const { theme } = useZoraTheme();
@@ -26,6 +27,7 @@ function InputInner({
     <Surface.TextInput
       {...props}
       disabled={disabled}
+      interactionPolicy={interactionPolicy}
       leadingAccessory={
         leadingIcon ? (
           <Surface.Icon
@@ -42,6 +44,7 @@ function InputInner({
         trailingAction ? (
           <IconButton
             icon={trailingAction.icon}
+            interactionPolicy={interactionPolicy}
             label={trailingAction.label}
             disabled={disabled ?? readOnly}
             variant="ghost"

package/src/components/media-card/MediaCard.tsx

@@ -22,6 +22,7 @@ function resolveImageAspectRatio(
 function MediaCardInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   testID,
   imageSource,
   imageLabel,
@@ -74,6 +75,7 @@ function MediaCardInner({
   return (
     <Card
       compact={compact}
+      interactionPolicy={interactionPolicy}
       onPress={isInteractive ? onPress : undefined}
       testID={testID}
       tone={tone}

package/src/components/metric-card/MetricCard.tsx

@@ -14,6 +14,7 @@ import type { MetricCardProps } from './types';
 function MetricCardInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy,
   testID,
   label,
   value,
@@ -35,6 +36,7 @@ function MetricCardInner({
   return (
     <Card
       compact={compact}
+      interactionPolicy={interactionPolicy}
       onPress={isInteractive ? onPress : undefined}
       testID={testID}
       tone={tone}

package/src/components/modal/Modal.tsx

@@ -29,13 +29,14 @@ function ModalInner({
   footer,
   width = 'default',
   onDismiss,
+  interactionPolicy,
   ...props
 }: ModalProps) {
   const hasHeader = title != null || description != null;
   const stableOnDismiss = useStableCallback(onDismiss);
 
   return (
-    <SurfaceModal {...props} onDismiss={stableOnDismiss}>
+    <SurfaceModal {...props} onDismiss={stableOnDismiss} interactionPolicy={interactionPolicy}>
       <Box maxWidth={resolveDialogWidth(width)} style={{ alignSelf: 'center', width: '100%' }}>
         <Stack gap="m">
           {hasHeader ? (

package/src/components/navigation-item/NavigationItem.tsx

@@ -13,10 +13,12 @@ function NavigationItemInner({
   compact = false,
   onPress,
   testID,
+  interactionPolicy,
 }: NavigationItemProps) {
   return (
     <SurfaceNavigationItem
       compact={compact}
+      interactionPolicy={interactionPolicy}
       item={{
         id: route.key,
         label: metadata?.label ?? route.name,

package/src/components/navigation-list/NavigationList.tsx

@@ -19,6 +19,7 @@ function NavigationListInner({
   header,
   footer,
   testID,
+  interactionPolicy,
 }: NavigationListProps) {
   const items = routes.map((route) => {
     const metadata = routeMap?.[route.name];
@@ -43,6 +44,7 @@ function NavigationListInner({
         compact={compact}
         footer={footer}
         header={header}
+        interactionPolicy={interactionPolicy}
         items={items}
         testID={testID}
       />
@@ -52,6 +54,7 @@ function NavigationListInner({
   return (
     <SurfaceNavigationList
       compact={compact}
+      interactionPolicy={interactionPolicy}
       items={items}
       orientation={orientation}
       testID={testID}

package/src/components/pagination/Pagination.tsx

@@ -92,7 +92,9 @@ function PaginationInner({
   lastLabel = 'Last',
   compact = false,
   testID,
+  interactionPolicy,
 }: PaginationProps) {
+  const passive = interactionPolicy === 'passive';
   const normalizedPageCount = Math.max(0, Math.trunc(Number.isFinite(pageCount) ? pageCount : 0));
   const currentPage = clampInteger(page, 1, Math.max(normalizedPageCount, 1));
   const safeSiblingCount = normalizeCount(siblingCount, 1);
@@ -110,7 +112,7 @@ function PaginationInner({
 
   const changePage = (nextPage: number) => {
     const clampedPage = clampInteger(nextPage, 1, Math.max(normalizedPageCount, 1));
-    if (disabled || clampedPage === currentPage) {
+    if (passive || disabled || clampedPage === currentPage) {
       return;
     }
 
@@ -122,6 +124,7 @@ function PaginationInner({
       {showFirstLast ? (
         <Button
           disabled={navigationDisabled || currentPage === 1}
+          interactionPolicy={interactionPolicy}
           onPress={() => changePage(1)}
           size="s"
           testID={testID ? `${testID}-first` : undefined}
@@ -133,6 +136,7 @@ function PaginationInner({
 
       <Button
         disabled={navigationDisabled || !canGoPrevious}
+        interactionPolicy={interactionPolicy}
         onPress={() => changePage(currentPage - 1)}
         size="s"
         testID={testID ? `${testID}-previous` : undefined}
@@ -150,6 +154,7 @@ function PaginationInner({
           <Button
             color={item === currentPage ? 'primary' : 'neutral'}
             disabled={disabled}
+            interactionPolicy={interactionPolicy}
             key={item}
             onPress={() => changePage(item)}
             size="s"
@@ -163,6 +168,7 @@ function PaginationInner({
 
       <Button
         disabled={navigationDisabled || !canGoNext}
+        interactionPolicy={interactionPolicy}
         onPress={() => changePage(currentPage + 1)}
         size="s"
         testID={testID ? `${testID}-next` : undefined}
@@ -174,6 +180,7 @@ function PaginationInner({
       {showFirstLast ? (
         <Button
           disabled={navigationDisabled || currentPage === normalizedPageCount}
+          interactionPolicy={interactionPolicy}
           onPress={() => changePage(normalizedPageCount)}
           size="s"
           testID={testID ? `${testID}-last` : undefined}

package/src/components/progress/Progress.tsx

@@ -21,6 +21,7 @@ function resolveProgressHeight(size: NonNullable<ProgressProps['size']>): number
 function ProgressInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   testID,
   value,
   max = 100,

package/src/components/radio/Radio.tsx

@@ -4,8 +4,8 @@ import React from 'react';
 import { withZoraThemeScope } from '../../theme/withZoraThemeScope';
 import type { RadioProps } from './types';
 
-function RadioInner({ themeId: _themeId, mode: _mode, ...props }: RadioProps) {
-  return <SurfaceRadio {...props} />;
+function RadioInner({ themeId: _themeId, mode: _mode, interactionPolicy, ...props }: RadioProps) {
+  return <SurfaceRadio {...props} interactionPolicy={interactionPolicy} />;
 }
 
 /***

package/src/components/radio/RadioGroup.tsx

@@ -21,6 +21,7 @@ function RadioGroupInner<TValue extends string>({
   readOnly = false,
   disabled = false,
   testID,
+  interactionPolicy,
 }: RadioGroupProps<TValue>) {
   const isHorizontal = orientation === 'horizontal';
 
@@ -49,6 +50,7 @@ function RadioGroupInner<TValue extends string>({
             size={size}
             color={color}
             onSelect={onValueChange}
+            interactionPolicy={interactionPolicy}
           />
         ))}
       </Stack>
@@ -70,6 +72,7 @@ function RadioGroupItem<TValue extends string>({
   size,
   color,
   onSelect,
+  interactionPolicy,
 }: {
   option: RadioGroupOption<TValue>;
   checked: boolean;
@@ -79,9 +82,13 @@ function RadioGroupItem<TValue extends string>({
   size: NonNullable<RadioGroupProps<TValue>['size']>;
   color: NonNullable<RadioGroupProps<TValue>['color']>;
   onSelect: (value: TValue) => void;
+  interactionPolicy: RadioGroupProps<TValue>['interactionPolicy'];
 }) {
+  const passive = interactionPolicy === 'passive';
+
   return (
     <Radio
+      interactionPolicy={interactionPolicy}
       checked={checked}
       disabled={disabled}
       invalid={invalid}
@@ -90,6 +97,7 @@ function RadioGroupItem<TValue extends string>({
       color={color}
       testID={option.testID}
       onCheckedChange={(nextChecked) => {
+        if (passive) return;
         if (nextChecked) onSelect(option.value);
       }}
     >

package/src/components/rating/Rating.tsx

@@ -11,6 +11,7 @@ import { type RatingProps, resolveRatingRole } from './types';
 function RatingInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   testID,
   value,
   max = 5,

package/src/components/search-bar/SearchBar.tsx

@@ -17,13 +17,18 @@ function SearchBarInner({
   size = 'l',
   disabled,
   readOnly,
+  interactionPolicy,
 }: SearchBarProps) {
+  const passive = interactionPolicy === 'passive';
+
   const trailingAction: InputTrailingAction | undefined =
     clearable && value.length > 0
       ? {
           icon: { name: 'close-circle' },
           label: 'Clear search',
           onPress: () => {
+            if (passive) return;
+
             onValueChange('');
             onClear?.();
           },
@@ -33,9 +38,10 @@ function SearchBarInner({
   return (
     <Input
       disabled={disabled}
+      interactionPolicy={interactionPolicy}
       leadingIcon={{ name: 'search-outline' }}
       onChangeText={onValueChange}
-      onSubmitEditing={onSubmit ? () => onSubmit(value) : undefined}
+      onSubmitEditing={onSubmit ? (passive ? undefined : () => onSubmit(value)) : undefined}
       placeholder={placeholder}
       readOnly={readOnly}
       returnKeyType="search"

package/src/components/select/Select.tsx

@@ -1,5 +1,6 @@
 import { Picker } from '@react-native-picker/picker';
 import React from 'react';
+import { View } from 'react-native';
 
 import { Box } from '../../foundation';
 import { useZoraTheme } from '../../theme/useZoraTheme';
@@ -15,8 +16,10 @@ function SelectInner<TValue extends string = string>({
   disabled,
   invalid,
   testID,
+  interactionPolicy,
 }: SelectProps<TValue>) {
   const { theme } = useZoraTheme();
+  const passive = interactionPolicy === 'passive';
 
   return (
     <Box
@@ -27,27 +30,33 @@ function SelectInner<TValue extends string = string>({
       radius="m"
       testID={testID}
     >
-      <Picker
-        enabled={!disabled}
-        onValueChange={(itemValue) => onValueChange(itemValue)}
-        selectedValue={value}
-        style={{
-          height: 44,
-          width: '100%',
-          backgroundColor: 'transparent',
-          color: theme.colors.text,
-          borderWidth: 0,
-        }}
-      >
-        {options.map((option) => (
-          <Picker.Item
-            key={option.value}
-            enabled={!option.disabled}
-            label={option.label}
-            value={option.value}
-          />
-        ))}
-      </Picker>
+      <View pointerEvents={passive ? 'none' : 'auto'}>
+        <Picker
+          enabled={!disabled}
+          onValueChange={(itemValue) => {
+            if (!passive) {
+              onValueChange(itemValue);
+            }
+          }}
+          selectedValue={value}
+          style={{
+            height: 44,
+            width: '100%',
+            backgroundColor: 'transparent',
+            color: theme.colors.text,
+            borderWidth: 0,
+          }}
+        >
+          {options.map((option) => (
+            <Picker.Item
+              key={option.value}
+              enabled={!option.disabled}
+              label={option.label}
+              value={option.value}
+            />
+          ))}
+        </Picker>
+      </View>
     </Box>
   );
 }

package/src/components/tabs/Tabs.tsx

@@ -17,8 +17,10 @@ function TabsInner<TValue extends string = string>({
   size = 'm',
   disabled: tabsDisabled,
   testID,
+  interactionPolicy,
 }: TabsProps<TValue>) {
   const { theme } = useZoraTheme();
+  const passive = interactionPolicy === 'passive';
 
   const renderTab = (item: TabItem<TValue>) => {
     const isActive = item.value === value;
@@ -32,7 +34,11 @@ function TabsInner<TValue extends string = string>({
           color="neutral"
           size={size}
           disabled={isDisabled}
-          onPress={() => onValueChange(item.value)}
+          onPress={() => {
+            if (!passive) {
+              onValueChange(item.value);
+            }
+          }}
           leadingIcon={item.icon}
           testID={item.testID}
         >
@@ -50,7 +56,11 @@ function TabsInner<TValue extends string = string>({
           color={isActive ? 'primary' : 'neutral'}
           size={size}
           disabled={isDisabled}
-          onPress={() => onValueChange(item.value)}
+          onPress={() => {
+            if (!passive) {
+              onValueChange(item.value);
+            }
+          }}
           leadingIcon={item.icon}
           testID={item.testID}
         >
@@ -75,7 +85,11 @@ function TabsInner<TValue extends string = string>({
           color="neutral"
           size={size}
           disabled={isDisabled}
-          onPress={() => onValueChange(item.value)}
+          onPress={() => {
+            if (!passive) {
+              onValueChange(item.value);
+            }
+          }}
           leadingIcon={item.icon}
           testID={item.testID}
         >

package/src/components/text/Text.tsx

@@ -65,6 +65,7 @@ function TextInner({
   accessibilityRole,
   nativeID,
   testID,
+  interactionPolicy: _interactionPolicy,
 }: TextProps) {
   const { theme } = useZoraTheme();
   const { breakpoint } = useResponsiveRuntime();

package/src/components/textarea/Textarea.tsx

@@ -12,6 +12,7 @@ function TextareaInner({
   size = 'l',
   leadingIcon,
   trailingIcon,
+  interactionPolicy,
   ...props
 }: TextareaProps) {
   const { theme } = useZoraTheme();
@@ -21,6 +22,7 @@ function TextareaInner({
   return (
     <Surface.Textarea
       {...props}
+      interactionPolicy={interactionPolicy}
       leadingAccessory={
         leadingIcon ? (
           <Surface.Icon

package/src/components/time-picker/TimePicker.tsx

@@ -95,7 +95,9 @@ function TimePickerInner({
   required = false,
   formatTime,
   testID,
+  interactionPolicy,
 }: TimePickerProps) {
+  const passive = interactionPolicy === 'passive';
   const [visible, setVisible] = React.useState(false);
   const options = React.useMemo(
     () => generateTimeOptions({ maxTime, minTime, stepMinutes }),
@@ -103,6 +105,12 @@ function TimePickerInner({
   );
   const displayValue = value ? (formatTime ? formatTime(value) : value) : placeholder;
 
+  function openPicker() {
+    if (passive) return;
+
+    setVisible(true);
+  }
+
   return (
     <Field
       disabled={disabled}
@@ -114,7 +122,8 @@ function TimePickerInner({
     >
       <Button
         disabled={disabled}
-        onPress={() => setVisible(true)}
+        interactionPolicy={interactionPolicy}
+        onPress={openPicker}
         testID={testID ? `${testID}-trigger` : undefined}
         trailingIcon={{ name: 'chevron-down-outline' }}
         variant="outline"
@@ -123,7 +132,12 @@ function TimePickerInner({
       </Button>
       <ActionSheet
         description={description}
-        onDismiss={() => setVisible(false)}
+        interactionPolicy={interactionPolicy}
+        onDismiss={() => {
+          if (passive) return;
+
+          setVisible(false);
+        }}
         testID={testID ? `${testID}-sheet` : undefined}
         title={label ?? 'Choose time'}
         visible={visible}
@@ -132,9 +146,12 @@ function TimePickerInner({
           <Stack gap="xxs">
             {options.map((option) => (
               <ActionSheetItem
+                interactionPolicy={interactionPolicy}
                 key={option}
                 label={formatTime ? formatTime(option) : option}
                 onPress={() => {
+                  if (passive) return;
+
                   onValueChange?.(option);
                   setVisible(false);
                 }}

package/src/components/toolbar/Toolbar.tsx

@@ -8,6 +8,7 @@ import type { ToolbarProps } from './types';
 function ToolbarInner({
   themeId: _themeId,
   mode: _mode,
+  interactionPolicy: _interactionPolicy,
   children,
   position = 'inline',
   floating = false,

package/src/foundation/Box.tsx

@@ -6,7 +6,12 @@ import type { ZoraBaseProps } from '../theme/ZoraBaseProps';
 
 export interface BoxProps extends ZoraBaseProps, Omit<SurfaceBoxProps, 'mode' | 'themeId'> {}
 
-function BoxInner({ themeId: _themeId, mode: _mode, ...props }: BoxProps) {
+function BoxInner({
+  themeId: _themeId,
+  mode: _mode,
+  interactionPolicy: _interactionPolicy,
+  ...props
+}: BoxProps) {
   return <SurfaceBox {...props} />;
 }