@expo/ui 57.0.16 → 57.0.18

package/src/jetpack-compose/DatePicker/index.tsx

@@ -8,6 +8,20 @@ export type AndroidVariant = 'picker' | 'input';
 
 export type DisplayedComponents = 'date' | 'hourAndMinute' | 'dateAndTime';
 
+/**
+ * The date range reported by `DateRangePicker` and `DateRangePickerDialog`.
+ */
+export type DateRangeSelection = {
+  /**
+   * The selected start date, or `null` when no start date is selected.
+   */
+  start: Date | null;
+  /**
+   * The selected end date, or `null` until the user selects the second date of the range.
+   */
+  end: Date | null;
+};
+
 /**
  * Color overrides for the Material 3 DatePicker component.
  * All properties are optional — unset values use Material 3 theme defaults.
@@ -177,6 +191,10 @@ function convertSelectableDates(selectableDates?: {
   };
 }
 
+function convertTimestampToDate(timestamp: number | null): Date | null {
+  return timestamp == null ? null : new Date(timestamp);
+}
+
 function transformDateTimePickerProps(props: DateTimePickerProps): NativeDatePickerProps {
   const { modifiers, variant, initialDate, selectableDates, elementColors, color, ...rest } = props;
 
@@ -210,9 +228,107 @@ export function DateTimePicker(props: DateTimePickerProps) {
   return <DatePickerNativeView {...transformDateTimePickerProps(props)} />;
 }
 
+export interface DateRangePickerProps {
+  /**
+   * The initially selected start date, as an ISO 8601 string.
+   */
+  initialStartDate?: string | null;
+  /**
+   * The initially selected end date, as an ISO 8601 string. It must be on or after `initialStartDate`.
+   */
+  initialEndDate?: string | null;
+  /**
+   * Called once when the component mounts with the initial range, and again whenever the selected date range changes.
+   * The end date is `null` while the user is selecting a range.
+   */
+  onDateRangeSelected?: (range: DateRangeSelection) => void;
+  /**
+   * The variant of the picker, which determines its appearance and behavior.
+   * @default 'picker'
+   */
+  variant?: AndroidVariant;
+  /**
+   * Show a button to toggle between variants on Android.
+   * @default true
+   */
+  showVariantToggle?: boolean;
+  /**
+   * The tint color to use on the picker elements.
+   */
+  color?: ColorValue;
+  /**
+   * Fine-grained color overrides for individual picker elements.
+   */
+  elementColors?: DatePickerElementColors;
+  /**
+   * Constrains which dates can be selected. `start` is the earliest selectable date and `end` is
+   * the latest.
+   */
+  selectableDates?: { start?: Date; end?: Date };
+  /**
+   * Modifiers for the component.
+   */
+  modifiers?: ModifierConfig[];
+}
+
+type NativeDateRangePickerProps = Omit<
+  DateRangePickerProps,
+  'onDateRangeSelected' | 'initialStartDate' | 'initialEndDate' | 'selectableDates'
+> & {
+  initialStartDate?: number | null;
+  initialEndDate?: number | null;
+  selectableDates?: { start?: number | null; end?: number | null } | null;
+} & ViewEvent<'onDateRangeSelected', { start: number | null; end: number | null }>;
+
+function transformDateRangePickerProps(
+  props: Omit<DateRangePickerProps, 'modifiers'>
+): Omit<NativeDateRangePickerProps, 'modifiers'> {
+  const {
+    initialStartDate,
+    initialEndDate,
+    selectableDates,
+    elementColors,
+    onDateRangeSelected,
+    ...rest
+  } = props;
+  return {
+    ...rest,
+    initialStartDate: initialStartDate ? new Date(initialStartDate).getTime() : null,
+    initialEndDate: initialEndDate ? new Date(initialEndDate).getTime() : null,
+    selectableDates: convertSelectableDates(selectableDates),
+    onDateRangeSelected: ({ nativeEvent: { start, end } }) => {
+      onDateRangeSelected?.({
+        start: convertTimestampToDate(start),
+        end: convertTimestampToDate(end),
+      });
+    },
+    ...(elementColors != null ? { elementColors } : undefined),
+  };
+}
+
+const DateRangePickerNativeView: React.ComponentType<NativeDateRangePickerProps> =
+  requireNativeView('ExpoUI', 'DateRangePickerView');
+
+/**
+ * Renders an inline Material 3 date range picker.
+ */
+export function DateRangePicker(props: DateRangePickerProps) {
+  const { modifiers, ...rest } = props;
+  const nativeProps: NativeDateRangePickerProps = {
+    modifiers,
+    ...(modifiers ? createViewModifierEventListener(modifiers) : undefined),
+    ...transformDateRangePickerProps(rest),
+  };
+  return <DateRangePickerNativeView {...nativeProps} />;
+}
+
 // -- Dialog views (used internally by the compat layer) ---------------------
 
 export interface DatePickerDialogProps {
+  /**
+   * The initially selected date. When omitted, the dialog opens on the current month with no
+   * selection and the confirm button stays disabled until a date is picked.
+   */
   initialDate?: string | null;
   variant?: AndroidVariant;
   showVariantToggle?: boolean;
@@ -260,6 +376,46 @@ export function DatePickerDialog(props: DatePickerDialogProps) {
   return <DatePickerDialogNativeView {...nativeProps} />;
 }
 
+export interface DateRangePickerDialogProps extends Omit<DateRangePickerProps, 'modifiers'> {
+  /**
+   * The label for the button that confirms the selected range.
+   * Defaults to the system "Ok" string.
+   */
+  confirmButtonLabel?: string;
+  /**
+   * The label for the button that dismisses the dialog.
+   * Defaults to the system "Cancel" string.
+   */
+  dismissButtonLabel?: string;
+  /** The tint color to use on the picker elements and dialog buttons. */
+  color?: ColorValue;
+  /** Callback function that is called when the user confirms a complete date range. */
+  onDateRangeSelected?: (range: DateRangeSelection) => void;
+  /** Callback function that is called when the dialog is dismissed. */
+  onDismissRequest: () => void;
+}
+
+type NativeDateRangePickerDialogProps = Omit<NativeDateRangePickerProps, 'modifiers'> &
+  Pick<DateRangePickerDialogProps, 'confirmButtonLabel' | 'dismissButtonLabel'> &
+  ViewEvent<'onDismissRequest', void>;
+
+const DateRangePickerDialogNativeView: React.ComponentType<NativeDateRangePickerDialogProps> =
+  requireNativeView('ExpoUI', 'DateRangePickerDialogView');
+
+/**
+ * Renders a modal Material 3 date range picker.
+ */
+export function DateRangePickerDialog(props: DateRangePickerDialogProps) {
+  const { confirmButtonLabel, dismissButtonLabel, onDismissRequest, ...rest } = props;
+  const nativeProps: NativeDateRangePickerDialogProps = {
+    ...transformDateRangePickerProps(rest),
+    confirmButtonLabel,
+    dismissButtonLabel,
+    onDismissRequest,
+  };
+  return <DateRangePickerDialogNativeView {...nativeProps} />;
+}
+
 export interface TimePickerDialogProps {
   initialDate?: string | null;
   is24Hour?: boolean;

package/src/jetpack-compose/DropdownMenu/index.tsx

@@ -43,6 +43,14 @@ export interface DropdownMenuProps {
    */
   color?: ColorValue;
 
+  /**
+   * Shadow elevation of the dropdown menu popup in dp. Set to `0` to remove the shadow.
+   * Defaults to Material3's `MenuDefaults.ShadowElevation`.
+   *
+   * @platform android
+   */
+  shadowElevation?: number;
+
   /**
    * Optional styles to apply to the `DropdownMenu`.
    */
@@ -58,6 +66,7 @@ type NativeMenuProps = {
   expanded?: boolean;
   onDismissRequest?: () => void;
   color?: ColorValue;
+  shadowElevation?: number;
   style?: StyleProp<ViewStyle>;
   modifiers?: ModifierConfig[];
   children?: ReactNode;

package/src/jetpack-compose/RadioButton/index.tsx

@@ -1,17 +1,37 @@
 import { requireNativeView } from 'expo';
+import type { ColorValue } from 'react-native';
 
 import { type ModifierConfig, type ViewEvent } from '../../types';
 import { createViewModifierEventListener } from '../modifiers/utils';
 
+/**
+ * Colors for the radio button in different states.
+ */
+export type RadioButtonColors = {
+  selectedColor?: ColorValue;
+  unselectedColor?: ColorValue;
+  disabledSelectedColor?: ColorValue;
+  disabledUnselectedColor?: ColorValue;
+};
+
 export interface RadioButtonProps {
   /**
    * Whether the radio button is selected.
    */
   selected: boolean;
+  /**
+   * Whether the radio button is enabled.
+   * @default true
+   */
+  enabled?: boolean;
   /**
    * Callback that is called when the radio button is clicked.
    */
   onClick?: () => void;
+  /**
+   * Colors for the radio button in different states.
+   */
+  colors?: RadioButtonColors;
   /**
    * Modifiers for the component.
    */

package/src/swift-ui/Button/index.tsx

@@ -10,8 +10,10 @@ import { type CommonViewModifierProps } from '../types';
  * - `default` - The default button role.
  * - `cancel` - A button that cancels the current operation.
  * - `destructive` - A button that deletes data or performs a destructive action.
+ * - `close` - A button that closes the view it is presented in. Given no `label` and no children,
+ *   the system draws it as an xmark.
  */
-export type ButtonRole = 'default' | 'cancel' | 'destructive';
+export type ButtonRole = 'default' | 'cancel' | 'destructive' | 'close';
 
 export interface ButtonProps extends CommonViewModifierProps {
   /**

package/src/swift-ui/NavigationDestination/index.tsx

@@ -0,0 +1,39 @@
+import { type ReactNode } from 'react';
+
+import { Slot } from '../SlotView';
+
+export interface NavigationDestinationProps {
+  /**
+   * The `NavigationLink` value this destination is presented for.
+   */
+  value: string;
+  /**
+   * The view pushed onto the stack for `value`.
+   */
+  children: ReactNode;
+}
+
+/**
+ * Associates a destination view with a `NavigationLink` value, matching SwiftUI's
+ * `navigationDestination(for:destination:)`. It must be a direct child of the `NavigationStack`,
+ * however deeply the link that pushes it is nested inside that stack.
+ *
+ * Keep it mounted so the pushed screen already carries its `navigationTitle` when the slide
+ * starts, or render one for each value on the stack's `path` to build screens on demand.
+ *
+ * @example
+ * ```tsx
+ * <NavigationDestination value="settings">
+ *   <SettingsScreen />
+ * </NavigationDestination>
+ * ```
+ *
+ * @platform ios
+ */
+export function NavigationDestination(props: NavigationDestinationProps) {
+  return (
+    <Slot name="destination" extraProps={{ value: props.value }}>
+      {props.children}
+    </Slot>
+  );
+}

package/src/swift-ui/NavigationLink/index.tsx

@@ -0,0 +1,51 @@
+import { requireNativeView } from 'expo';
+import { type ComponentType, type ReactNode } from 'react';
+
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export interface NavigationLinkProps extends CommonViewModifierProps {
+  /**
+   * The value to append to the enclosing `NavigationStack`'s path when the link is tapped. The
+   * stack presents the `NavigationDestination` whose `value` matches.
+   */
+  value: string;
+  /**
+   * A view that describes the link.
+   */
+  children: ReactNode;
+}
+
+const NavigationLinkNativeView: ComponentType<NavigationLinkProps> = requireNativeView(
+  'ExpoUI',
+  'NavigationLinkView'
+);
+
+/**
+ * A view that controls a navigation presentation. In a `List` it renders as a row with a
+ * disclosure chevron, and tapping it pushes the matching `NavigationDestination`.
+ *
+ * The link has to be inside the `NavigationStack` itself. Content presented from the stack, such
+ * as a `BottomSheet` or a `Popover`, is its own presentation context and does not reach the
+ * stack's destinations, so give that content its own `NavigationStack`.
+ *
+ * @example
+ * ```tsx
+ * <NavigationLink value="settings">
+ *   <Text>Settings</Text>
+ * </NavigationLink>
+ * ```
+ *
+ * @platform ios
+ */
+export function NavigationLink(props: NavigationLinkProps) {
+  const { modifiers, children, ...restProps } = props;
+  return (
+    <NavigationLinkNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
+      {children}
+    </NavigationLinkNativeView>
+  );
+}

package/src/swift-ui/NavigationStack/index.tsx

@@ -0,0 +1,75 @@
+import { requireNativeView } from 'expo';
+import { type ComponentType, type ReactNode } from 'react';
+import { type NativeSyntheticEvent } from 'react-native';
+
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export interface NavigationStackProps extends CommonViewModifierProps {
+  /**
+   * The root view of the stack, and the `NavigationDestination` views the stack can push. It is
+   * displayed inside a navigation bar.
+   */
+  children: ReactNode;
+  /**
+   * The values of the views pushed on top of the root view, in the order they were pushed.
+   * Leave it undefined to let the stack manage its own path.
+   */
+  path?: string[];
+  /**
+   * Callback function that is called when the stack pushes or pops a view, for example when a
+   * `NavigationLink` is tapped or the user swipes back. Gets called with the new path.
+   *
+   * When `path` is set, the stack is controlled: a push takes effect once the new path comes back
+   * through this prop.
+   */
+  onPathChange?: (path: string[]) => void;
+}
+
+type NativeNavigationStackProps = Omit<NavigationStackProps, 'onPathChange'> & {
+  onPathChange?: (event: NativeSyntheticEvent<{ path: string[] }>) => void;
+};
+
+const NavigationStackNativeView: ComponentType<NativeNavigationStackProps> = requireNativeView(
+  'ExpoUI',
+  'NavigationStackView'
+);
+
+/**
+ * A view that displays a root view and enables you to present additional views over the root view.
+ *
+ * @example
+ * ```tsx
+ * const [path, setPath] = useState<string[]>([]);
+ *
+ * <NavigationStack path={path} onPathChange={setPath}>
+ *   <List>
+ *     <NavigationLink value="settings">
+ *       <Text>Settings</Text>
+ *     </NavigationLink>
+ *   </List>
+ *   <NavigationDestination value="settings">
+ *     <SettingsScreen />
+ *   </NavigationDestination>
+ * </NavigationStack>
+ * ```
+ *
+ * @platform ios
+ */
+export function NavigationStack(props: NavigationStackProps) {
+  const { modifiers, onPathChange, ...restProps } = props;
+  return (
+    <NavigationStackNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}
+      onPathChange={
+        onPathChange
+          ? ({ nativeEvent: { path } }) => {
+              onPathChange(path);
+            }
+          : undefined
+      }
+    />
+  );
+}

package/src/swift-ui/Toolbar/index.tsx

@@ -0,0 +1,64 @@
+import { requireNativeView } from 'expo';
+
+import { Slot } from '../SlotView';
+import { createViewModifierEventListener } from '../modifiers/utils';
+import { type CommonViewModifierProps } from '../types';
+
+export interface ToolbarProps extends CommonViewModifierProps {
+  /**
+   * The view the toolbar belongs to, together with the `Toolbar.Content` that fills it.
+   */
+  children: React.ReactNode;
+}
+
+export interface ToolbarContentProps {
+  /**
+   * The items to place in the toolbar.
+   */
+  children: React.ReactNode;
+}
+
+const ToolbarNativeView: React.ComponentType<ToolbarProps> = requireNativeView(
+  'ExpoUI',
+  'ToolbarView'
+);
+
+/**
+ * The items placed in the toolbar of the view `Toolbar` wraps.
+ */
+function ToolbarContent(props: ToolbarContentProps) {
+  return <Slot name="content">{props.children}</Slot>;
+}
+
+/**
+ * Adds a toolbar to the view it wraps, matching SwiftUI's `toolbar(content:)`.
+ *
+ * @example
+ * ```tsx
+ * <NavigationStack>
+ *   <Toolbar>
+ *     <Text>Bird description</Text>
+ *     <Toolbar.Content>
+ *       <Button role="close" onPress={() => setIsPresented(false)} />
+ *     </Toolbar.Content>
+ *   </Toolbar>
+ * </NavigationStack>
+ * ```
+ *
+ * @platform ios
+ */
+function ToolbarComponent(props: ToolbarProps) {
+  const { modifiers, children, ...restProps } = props;
+  return (
+    <ToolbarNativeView
+      modifiers={modifiers}
+      {...(modifiers ? createViewModifierEventListener(modifiers) : undefined)}
+      {...restProps}>
+      {children}
+    </ToolbarNativeView>
+  );
+}
+
+const Toolbar = Object.assign(ToolbarComponent, { Content: ToolbarContent });
+
+export { Toolbar };

package/src/swift-ui/index.tsx

@@ -25,6 +25,9 @@ export * from './ZStack';
 export * from './Group';
 export * from './List';
 export * from './Menu';
+export * from './NavigationDestination';
+export * from './NavigationLink';
+export * from './NavigationStack';
 export * from './Picker';
 export * from './ProgressView';
 export * from './Section';
@@ -38,6 +41,7 @@ export { useNativeState } from '../State';
 export { withAnimation, type WithAnimationCompletionCriteria } from './withAnimation';
 export * from './SyncToggle';
 export * from './TabView';
+export * from './Toolbar';
 export * from './Toggle';
 export {
   TextField,

package/src/swift-ui/modifiers/containerBackground.ts

@@ -1,13 +1,18 @@
 import { createModifier } from './createModifier';
-import type { Color } from './types';
+import { resolveShapeStyle, type ShapeStyle } from './shapeStyle';
 
 export type ContainerBackgroundPlacement = 'widget' | 'navigation' | 'navigationSplitView';
 
 /**
- * Sets the container background of the enclosing container using a view.
- * @param color - The color to set as the background of the container.
+ * Sets the container background of the enclosing container.
+ *
+ * > **Note:** `navigation` and `navigationSplitView` require iOS 18. On iOS 17 they fall back to
+ * > the `widget` placement.
+ *
+ * @param style - Any [`ShapeStyle`](#shapestyle): a color, a hierarchical style, a material, or a gradient.
  * @param container - The type of container to apply the background to.
+ * @platform ios 17.0+
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/containerbackground(_:for:)).
  */
-export const containerBackground = (color: Color, container: ContainerBackgroundPlacement) =>
-  createModifier('containerBackground', { color, container });
+export const containerBackground = (style: ShapeStyle, container: ContainerBackgroundPlacement) =>
+  createModifier('containerBackground', { style: resolveShapeStyle(style), container });

package/src/swift-ui/modifiers/index.ts

@@ -287,13 +287,38 @@ export const clipShape = (
   cornerRadius?: number
 ) => createModifier('clipShape', { shape, cornerRadius });
 
+/**
+ * The parameters of the `border` modifier.
+ */
+export type BorderParams =
+  | {
+      /**
+       * The style painted along the border. No border is drawn when the style is not available on
+       * the running platform, unlike `strokeBorder`, which falls back to the foreground style.
+       */
+      content: ShapeStyle;
+      /** The border width. @default 1 */
+      width?: number;
+    }
+  | {
+      /**
+       * @deprecated Use `content`, which takes any `ShapeStyle` and not only a color.
+       */
+      color: Color;
+      /** The border width. @default 1 */
+      width?: number;
+    };
+
 /**
  * Adds a border to a view.
- * @param params - The border parameters. Color and width.
+ * @param params - The border parameters. The style painted along the border, and its width.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/border(_:width:)).
  */
-export const border = (params: { color: Color; width?: number }) =>
-  createModifier('border', params);
+export const border = (params: BorderParams) =>
+  createModifier('border', {
+    content: resolveShapeStyle('content' in params ? params.content : params.color),
+    width: params.width,
+  });
 
 /**
  * The characteristics of a stroke that traces a path.
@@ -316,10 +341,15 @@ export type StrokeStyle = {
 
 /**
  * Strokes an inset border along the view's shape.
- * @param params - The stroke parameters. Color (omit for the foreground style), style, antialiased, shape and cornerRadius.
+ * @param params - The stroke parameters. The style painted along the stroke (omit for the foreground style), the stroke style, antialiased, shape and cornerRadius.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/insettableshape/strokeborder(_:style:antialiased:)).
  */
 export const strokeBorder = (params: {
+  /** The style painted along the stroke. Omit to use the foreground style. */
+  content?: ShapeStyle;
+  /**
+   * @deprecated Use `content`, which takes any `ShapeStyle` and not only a color.
+   */
   color?: Color;
   style?: StrokeStyle;
   antialiased?: boolean;
@@ -331,7 +361,14 @@ export const strokeBorder = (params: {
     | 'roundedRectangle'
     | 'containerRelativeShape';
   cornerRadius?: number;
-}) => createModifier('strokeBorder', params);
+}) => {
+  const { content, color, ...rest } = params;
+  const shapeStyle = content ?? color;
+  return createModifier('strokeBorder', {
+    ...rest,
+    content: shapeStyle === undefined ? undefined : resolveShapeStyle(shapeStyle),
+  });
+};
 
 /**
  * Applies scaling transformation.
@@ -495,11 +532,11 @@ export const italic = () => createModifier('italic', {});
 export const monospacedDigit = () => createModifier('monospacedDigit', {});
 
 /**
- * Sets the tint color of a view.
- * @param color - The tint color (hex string). For example, `#FF0000`.
+ * Sets the tint of a view.
+ * @param tint - Any [`ShapeStyle`](#shapestyle): a color, a hierarchical style, a material, or a gradient.
  * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/tint(_:)).
  */
-export const tint = (color: Color) => createModifier('tint', { color });
+export const tint = (tint: ShapeStyle) => createModifier('tint', { tint: resolveShapeStyle(tint) });
 
 /**
  * Hides or shows a view.
@@ -749,6 +786,18 @@ export const scrollDismissesKeyboard = (
 export const scrollDisabled = (disabled: boolean = true) =>
   createModifier('scrollDisabled', { disabled });
 
+/**
+ * Disables or enables clipping of a scrollable view's content to its bounds.
+ * Content drawn outside those bounds, such as a shadow or a view scaled up past the edge, is
+ * cut off by default and stays visible once clipping is disabled.
+ * @param disabled - Whether clipping should be disabled (default: true).
+ * @platform ios 17.0+
+ * @platform tvos 17.0+
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/scrollclipdisabled(_:)).
+ */
+export const scrollClipDisabled = (disabled: boolean = true) =>
+  createModifier('scrollClipDisabled', { disabled });
+
 /**
  * Controls the visibility of scroll indicators for scrollable views.
  * Mirrors SwiftUI's `scrollIndicators(_:axes:)` modifier.
@@ -1638,6 +1687,13 @@ export const resizable = (
   resizingMode?: 'stretch' | 'tile'
 ) => createModifier('resizable', { ...capInsets, resizingMode });
 
+/**
+ * Configures the view's title for purposes of navigation, using a string.
+ * @param title - The title to display.
+ * @see Official [SwiftUI documentation](https://developer.apple.com/documentation/swiftui/view/navigationtitle(_:)).
+ */
+export const navigationTitle = (title: string) => createModifier('navigationTitle', { title });
+
 // =============================================================================
 // Type Definitions
 // =============================================================================
@@ -1725,6 +1781,7 @@ export type BuiltInModifier =
   | ReturnType<typeof containerRelativeFrame>
   | ReturnType<typeof scrollContentBackground>
   | ReturnType<typeof scrollDisabled>
+  | ReturnType<typeof scrollClipDisabled>
   | ReturnType<typeof scrollIndicators>
   | ReturnType<typeof defaultScrollAnchor>
   | ReturnType<typeof defaultScrollAnchorForRole>
@@ -1780,7 +1837,8 @@ export type BuiltInModifier =
   | ReturnType<typeof widgetAccentedRenderingMode>
   | ReturnType<typeof widgetURL>
   | ReturnType<typeof activityBackgroundTint>
-  | ReturnType<typeof containerBackground>;
+  | ReturnType<typeof containerBackground>
+  | ReturnType<typeof navigationTitle>;
 
 /**
  * Main ViewModifier type that supports both built-in and 3rd party modifiers.