native-fn 1.2.2 → 1.3.0

package/README.md

@@ -592,6 +592,16 @@ const unsubscribe = Native.dimension.environment.safeAreaInset.onChange((inset)
     document.body.style.paddingBottom = inset.bottom + 'px';
 });
 unsubscribe();
+
+// Sync safe area insets to CSS variables
+// Usage in CSS: var(--sai-top), var(--sai-bottom), var(--sai-left), var(--sai-right)
+const releaseSai = Native.dimension.environment.safeAreaInset.useCssVariable('sai');
+releaseSai(); // removes all --sai-* variables
+
+// Sync viewport segments to CSS variables (e.g. foldable devices)
+// Usage in CSS: var(--vs-0-width), var(--vs-0-height), var(--vs-1-top), ...
+const releaseVs = Native.dimension.environment.viewportSegment.useCssVariable('vs');
+releaseVs(); // removes all --vs-{index}-* variables
 ```
 
 **Returns**
@@ -603,16 +613,30 @@ Environment
 
 ```ts
 interface Environment {
-    safeAreaInset:    EnvironmentPreset<'safe-area-inset'>;
-    safeAreaMaxInset: EnvironmentPreset<'safe-area-max-inset'>;
-    keyboardInset:    EnvironmentPreset<'keyboard-inset'>;
-    titlebarArea:     EnvironmentPreset<'titlebar-area'>;
-    viewportSegment:  EnvironmentPreset<'viewport-segment'>;
+    safeAreaInset:    EnvironmentObserver<'safe-area-inset'>;
+    safeAreaMaxInset: EnvironmentObserver<'safe-area-max-inset'>;
+    keyboardInset:    EnvironmentObserver<'keyboard-inset'>;
+    titlebarArea:     EnvironmentObserver<'titlebar-area'>;
+    viewportSegment:  EnvironmentObserver<'viewport-segment'>;
 }
 
-interface EnvironmentPreset<K> {
-    get value(): EnvironmentPresetValues<K>;
-    onChange(listener: (value: EnvironmentPresetValues<K>) => void, options?: AddEventListenerOptions): () => void;
+type EnvironmentObserver<K extends EnvironmentPresetKey> =
+    K extends 'viewport-segment'
+        ? SegmentsObserver
+        : {
+            get value(): EnvironmentPresetValues<K>;
+
+            onChange(listener: (value: EnvironmentPresetValues<K>) => void, options?: AddEventListenerOptions): () => void;
+
+            useCssVariable(prefix: string): () => void;
+        };
+
+interface SegmentsObserver {
+    get value(): EnvironmentPresetValues<'viewport-segment'>[];
+
+    onChange(listener: (value: EnvironmentPresetValues<'viewport-segment'>[]) => void, options?: AddEventListenerOptions): () => void;
+
+    useCssVariable(prefix: string): () => void;
 }
 ```
 

package/dist/index.d.ts

@@ -109,19 +109,27 @@ declare const ENV_PRESETS: {
 };
 
 type EnvironmentPresetKey = keyof typeof ENV_PRESETS;
-type EnvironmentPresetAttr<K extends EnvironmentPresetKey> = keyof typeof ENV_PRESETS[K];
+type EnvironmentPresetAttribute<K extends EnvironmentPresetKey> = keyof typeof ENV_PRESETS[K];
 type EnvironmentPresetValues<K extends EnvironmentPresetKey> = {
-    [P in EnvironmentPresetAttr<K>]: number;
+    [P in EnvironmentPresetAttribute<K>]: number;
+};
+declare interface Environment {
+    safeAreaInset: EnvironmentObserver<'safe-area-inset'>;
+    safeAreaMaxInset: EnvironmentObserver<'safe-area-max-inset'>;
+    keyboardInset: EnvironmentObserver<'keyboard-inset'>;
+    titlebarArea: EnvironmentObserver<'titlebar-area'>;
+    viewportSegment: EnvironmentObserver<'viewport-segment'>;
+}
+declare interface SegmentsObserver {
+    get value(): EnvironmentPresetValues<'viewport-segment'>[];
+    onChange(listener: (value: EnvironmentPresetValues<'viewport-segment'>[]) => void, options?: AddEventListenerOptions): () => void;
+    useCssVariable(prefix: string): () => void;
+}
+declare type EnvironmentObserver<K extends EnvironmentPresetKey> = K extends 'viewport-segment' ? SegmentsObserver : {
+    get value(): EnvironmentPresetValues<K>;
+    onChange(listener: (value: EnvironmentPresetValues<K>) => void, options?: AddEventListenerOptions): () => void;
+    useCssVariable(prefix: string): () => void;
 };
-declare interface DimensionInstance {
-    get value(): Dimensions;
-    environment: Environment;
-    onChange(listener: (dimension: Dimensions) => void, options?: AddEventListenerOptions): () => void;
-    Constants: {
-        Orientation: typeof Orientation;
-    };
-    Errors: {};
-}
 declare interface Dimensions {
     outerWidth: number;
     outerHeight: number;
@@ -130,18 +138,31 @@ declare interface Dimensions {
     scale: number;
     orientation: Orientation;
 }
-declare interface EnvironmentPreset<K extends EnvironmentPresetKey> {
-    get value(): EnvironmentPresetValues<K>;
-    onChange(listener: (value: EnvironmentPresetValues<K>) => void, options?: AddEventListenerOptions): () => void;
-}
-declare interface Environment {
-    safeAreaInset: EnvironmentPreset<'safe-area-inset'>;
-    safeAreaMaxInset: EnvironmentPreset<'safe-area-max-inset'>;
-    keyboardInset: EnvironmentPreset<'keyboard-inset'>;
-    titlebarArea: EnvironmentPreset<'titlebar-area'>;
-    viewportSegment: EnvironmentPreset<'viewport-segment'>;
+declare interface DimensionInstance {
+    get value(): Dimensions;
+    environment: Environment;
+    onChange(listener: (dimension: Dimensions) => void, options?: AddEventListenerOptions): () => void;
+    Constants: {
+        Orientation: typeof Orientation;
+    };
+    Errors: {};
 }
 
+declare global {
+    interface DOMRectReadOnly {
+        readonly x: number;
+        readonly y: number;
+        readonly width: number;
+        readonly height: number;
+        readonly top: number;
+        readonly right: number;
+        readonly bottom: number;
+        readonly left: number;
+    }
+    interface VisualViewport {
+        readonly segments?: DOMRectReadOnly[];
+    }
+}
 declare const Dimension: DimensionInstance;
 
 declare const InvalidStateError: ErrorConstructor;