panelui-native 0.81.0 → 0.83.0

package/src/index.ts

@@ -334,6 +334,7 @@ export {
 } from './components/radar-chart';
 export {
   Select,
+  useSelectSearch,
   type SelectProps,
   type SelectItemProps,
   type SelectGroupProps,
@@ -514,6 +515,12 @@ export {
   type FormFieldRenderProps,
   type UseFieldOptions,
 } from './components/form';
+export {
+  ImageGeneration,
+  type ImageGenerationProps,
+  type ImageGenerationFieldProps,
+  type ImageGenerationStatus,
+} from './components/image-generation';
 export { Input, type InputProps } from './components/input';
 export {
   InputGroup,
@@ -542,14 +549,26 @@ export {
   type PanelsideItemLabelProps,
   type PanelsideItemBadgeProps,
   type PanelsideActionProps,
+  type PanelsideItemActionsProps,
   type PanelsideFooterProps,
   type PanelsideCtaProps,
   type PanelsideSceneProps,
+  type PanelsidePagesProps,
+  type PanelsidePageProps,
   type PanelsideTriggerProps,
+  type PanelsideSearchTriggerProps,
+  type PanelsideSearchSheetProps,
+  type PanelsideSearchTabsProps,
+  type PanelsideSearchTabProps,
+  type PanelsideSearchResultsProps,
+  type PanelsideSearchResultProps,
+  type PanelsideSearchFieldProps,
   type PanelsideMode,
   type PanelsideSwipeFrom,
   type PanelsideItemSize,
   type PanelsideCtaSize,
+  type PanelsideSurface,
+  type PanelsideControlVariant,
   type UsePanelsideResult,
 } from './components/panelside';
 export {
@@ -1072,6 +1091,15 @@ export {
   type ThinkingOrbState,
 } from './components/thinking-orb';
 export { Skeleton, type SkeletonProps } from './components/skeleton';
+export {
+  SlideButton,
+  useSlideButton,
+  type SlideButtonProps,
+  type SlideButtonLabelProps,
+  type SlideButtonThumbProps,
+  type SlideButtonVariant,
+  type SlideButtonSize,
+} from './components/slide-button';
 export { Slider, type SliderProps } from './components/slider';
 export {
   Sortable,

package/src/native/index.ts

@@ -145,6 +145,20 @@ interface SwiftUIModifiers {
     cornerRadius?: number
   ) => unknown;
   controlSize: (size: 'mini' | 'small' | 'regular' | 'large' | 'extraLarge') => unknown;
+  /**
+   * Paints a sheet's own surface, rather than a background behind its content.
+   *
+   * It is the only way out of the material a sheet is drawn in by default, and
+   * it reaches what an ordinary background cannot: the grabber's strip at the
+   * top and the safe-area inset at the bottom, which belong to the sheet's
+   * chrome and not to anything hosted inside it.
+   *
+   * **iOS 16.4 and up.** Below that it is inert and the sheet keeps its
+   * material — the same shape as glass being inert below iOS 26, and the same
+   * trap: indistinguishable from the prop not working. Check the OS before
+   * changing any code on a report of "the colour did nothing".
+   */
+  presentationBackground: (color: string) => unknown;
 }
 
 let modifiersResolved = false;
@@ -165,3 +179,34 @@ export function getSwiftUIModifiers(): SwiftUIModifiers | null {
 
   return modifiers;
 }
+
+/**
+ * The Compose view modifiers — the other half of the same door.
+ *
+ * Android's toolkit has its own modifier system and its own vocabulary, so a
+ * modifier built for one platform is not a modifier the other can read. Where
+ * both are asked the same question the answers are written separately, here and
+ * above, rather than one being sent to both.
+ */
+interface ComposeModifiers {
+  background: (color: string) => unknown;
+}
+
+let composeResolved = false;
+let compose: ComposeModifiers | null = null;
+
+export function getComposeModifiers(): ComposeModifiers | null {
+  if (composeResolved) return compose;
+  composeResolved = true;
+
+  if (Platform.OS !== 'android') return null;
+
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    compose = require('@expo/ui/jetpack-compose/modifiers') as ComposeModifiers;
+  } catch {
+    compose = null;
+  }
+
+  return compose;
+}

package/src/primitives/portal.tsx

@@ -75,11 +75,25 @@ export function Portal({ children }: { children: ReactNode }) {
   const store = usePortalStore('Portal');
   const key = useId();
 
+  /*
+   * Two effects, because they answer to different things.
+   *
+   * `children` is a new element on every render of whatever owns the portal,
+   * so an effect that both mounted and unmounted on it ran `unmount` then
+   * `mount` for every one of those renders — deleting the key from the store
+   * and putting it straight back, twice through `emit`, twice through a new
+   * Map, and a full re-render of the host each time. An open sheet re-rendering
+   * as its content changes paid that on every frame it changed on.
+   *
+   * Split, the update is an update and the teardown happens once, when the
+   * portal actually goes away.
+   */
   useEffect(() => {
     store.mount(key, children);
-    return () => store.unmount(key);
   }, [store, key, children]);
 
+  useEffect(() => () => store.unmount(key), [store, key]);
+
   return null;
 }