@maestro_io/maestro-web-sdk 5.0.0 → 5.1.1

package/dist/src/external/spatial-navigation/utils.d.ts

@@ -0,0 +1,22 @@
+export declare const DIRECTION_LEFT = "left";
+export declare const DIRECTION_RIGHT = "right";
+export declare const DIRECTION_UP = "up";
+export declare const DIRECTION_DOWN = "down";
+export declare const KEY_ENTER = "enter";
+export declare const KEY_BACK = "back";
+export type Direction = typeof DIRECTION_LEFT | typeof DIRECTION_RIGHT | typeof DIRECTION_UP | typeof DIRECTION_DOWN;
+export interface Layout {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+    node: HTMLElement;
+}
+export interface Details {
+    pressedKeys: Record<string, number>;
+    layout?: Layout;
+    event?: Event;
+    mouseClick?: boolean;
+}

package/dist/src/external/spatial-navigation/utils.js

@@ -0,0 +1,6 @@
+export const DIRECTION_LEFT = 'left';
+export const DIRECTION_RIGHT = 'right';
+export const DIRECTION_UP = 'up';
+export const DIRECTION_DOWN = 'down';
+export const KEY_ENTER = 'enter';
+export const KEY_BACK = 'back';

package/dist/src/external/spatial-navigation/visualDebugger.d.ts

@@ -0,0 +1,17 @@
+interface Layout {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+declare class VisualDebugger {
+    private debugCtx;
+    private layoutsCtx;
+    constructor();
+    static createCanvas(id: string, zIndex: number): CanvasRenderingContext2D;
+    clear(): void;
+    clearLayouts(): void;
+    drawLayout(layout: Layout, focusKey: string, parentFocusKey: string): void;
+    drawPoint(x: number, y: number, color?: string, size?: number): void;
+}
+export default VisualDebugger;

package/dist/src/external/spatial-navigation/visualDebugger.js

@@ -0,0 +1,76 @@
+// We'll make VisualDebugger no-op for any environments lacking a DOM (e.g. SSR and React Native non-web platforms).
+const hasDOM = typeof window !== 'undefined' && window.document;
+const WIDTH = hasDOM ? window.innerWidth : 0;
+const HEIGHT = hasDOM ? window.innerHeight : 0;
+class VisualDebugger {
+    constructor() {
+        Object.defineProperty(this, "debugCtx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        Object.defineProperty(this, "layoutsCtx", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        if (hasDOM) {
+            this.debugCtx = VisualDebugger.createCanvas('sn-debug', 1010);
+            this.layoutsCtx = VisualDebugger.createCanvas('sn-layouts', 1000);
+        }
+        else {
+            this.debugCtx = null;
+            this.layoutsCtx = null;
+        }
+    }
+    static createCanvas(id, zIndex) {
+        const canvas = (document.querySelector(`#${id}`) ||
+            document.createElement('canvas'));
+        canvas.setAttribute('id', id);
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+            throw new Error('Could not get 2d context from canvas');
+        }
+        canvas.style.cssText = `position: fixed; top: 0; left: 0; z-index: ${zIndex}`;
+        document.body.appendChild(canvas);
+        canvas.width = WIDTH;
+        canvas.height = HEIGHT;
+        return ctx;
+    }
+    clear() {
+        if (!hasDOM || !this.debugCtx) {
+            return;
+        }
+        this.debugCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    }
+    clearLayouts() {
+        if (!hasDOM || !this.layoutsCtx) {
+            return;
+        }
+        this.layoutsCtx.clearRect(0, 0, WIDTH, HEIGHT);
+    }
+    drawLayout(layout, focusKey, parentFocusKey) {
+        if (!hasDOM || !this.layoutsCtx) {
+            return;
+        }
+        this.layoutsCtx.strokeStyle = 'green';
+        this.layoutsCtx.strokeRect(layout.left, layout.top, layout.width, layout.height);
+        this.layoutsCtx.font = '8px monospace';
+        this.layoutsCtx.fillStyle = 'red';
+        this.layoutsCtx.fillText(focusKey, layout.left, layout.top + 10);
+        this.layoutsCtx.fillText(parentFocusKey, layout.left, layout.top + 25);
+        this.layoutsCtx.fillText(`left: ${layout.left}`, layout.left, layout.top + 40);
+        this.layoutsCtx.fillText(`top: ${layout.top}`, layout.left, layout.top + 55);
+    }
+    drawPoint(x, y, color = 'blue', size = 10) {
+        if (!hasDOM || !this.debugCtx) {
+            return;
+        }
+        this.debugCtx.strokeStyle = color;
+        this.debugCtx.lineWidth = 3;
+        this.debugCtx.strokeRect(x - size / 2, y - size / 2, size, size);
+    }
+}
+export default VisualDebugger;

package/dist/src/external/spatial-navigation/withFocusable.d.ts

@@ -0,0 +1,131 @@
+/// <reference types="react" />
+import PropTypes from 'prop-types';
+import { Details, Direction, Layout } from './utils';
+interface WithFocusableConfig {
+    forgetLastFocusedChild?: boolean;
+    trackChildren?: boolean;
+    autoRestoreFocus?: boolean;
+    blockNavigationOut?: boolean;
+}
+export interface WithFocusableProps {
+    focused?: boolean;
+    focusKey?: string;
+    parentFocusKey?: string;
+    preferredChildFocusKey?: string;
+    forgetLastFocusedChild?: boolean;
+    trackChildren?: boolean;
+    autoRestoreFocus?: boolean;
+    blockNavigationOut?: boolean;
+    hasFocusedChild?: boolean;
+    focusable?: boolean;
+    onEnterPress?: (props: any, details: Details) => void;
+    /**
+     * @description - Called when "click" action is performed (e.g., mouse click or touch), fired by spatial navigation
+     * @param props - The props of the component
+     * @param details - object containing information about the event, such as the source of the event, layout, etc.
+     */
+    onClickPress?: (props: any, details: Details) => void;
+    onEnterRelease?: (props: any) => void;
+    onBackPress?: (props: any, details: Details) => void;
+    onArrowPress?: (direction: Direction, props: any, details: Details) => boolean | void;
+    onBecameFocused?: (layout: Layout, props: any, details: Details) => void;
+    onBecameBlurred?: (layout: Layout, props: any, details: Details) => void;
+}
+export interface WithFocusableState {
+    realFocusKey: string;
+    focused: boolean;
+    hasFocusedChild: boolean;
+    parentFocusKey: string;
+}
+declare const withFocusable: <P extends object>({ forgetLastFocusedChild: configForgetLastFocusedChild, trackChildren: configTrackChildren, autoRestoreFocus: configAutoRestoreFocus, blockNavigationOut: configBlockNavigationOut, }?: WithFocusableConfig) => (WrappedComponent: import("react").ComponentType<P & WithFocusableProps>) => {
+    new (props: (P & WithFocusableProps) | Readonly<P & WithFocusableProps>): {
+        state: WithFocusableState;
+        navigation: import("./spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: Direction, details?: Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: Details) => void;
+        onClickPressHandler: (details: Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: Details) => void;
+        onArrowPressHandler: (direction: Direction, details: Details) => boolean | void;
+        onBecameFocusedHandler: (layout: Layout, details: Details) => void;
+        onBecameBlurredHandler: (layout: Layout, details: Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): import("react").ReactElement<P & WithFocusableProps, string | import("react").JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof WithFocusableState>(state: WithFocusableState | ((prevState: Readonly<WithFocusableState>, props: Readonly<P & WithFocusableProps>) => WithFocusableState | Pick<WithFocusableState, K> | null) | Pick<WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P & WithFocusableProps> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & WithFocusableProps>, prevState: Readonly<WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): void;
+    };
+    new (props: P & WithFocusableProps, context: any): {
+        state: WithFocusableState;
+        navigation: import("./spatialNavigation").default;
+        getChildContext(): {
+            parentFocusKey: string;
+        };
+        setFocus: (focusKey: string) => void;
+        navigateByDirection: (direction: Direction, details?: Details) => void;
+        stealFocus: () => void;
+        onUpdateFocus: (focused: boolean) => void;
+        onUpdateHasFocusedChild: (hasFocusedChild: boolean) => void;
+        onEnterPressHandler: (details: Details) => void;
+        onClickPressHandler: (details: Details) => void;
+        onEnterReleaseHandler: () => void;
+        onBackPressHandler: (details: Details) => void;
+        onArrowPressHandler: (direction: Direction, details: Details) => boolean | void;
+        onBecameFocusedHandler: (layout: Layout, details: Details) => void;
+        onBecameBlurredHandler: (layout: Layout, details: Details) => void;
+        componentDidMount(): void;
+        componentDidUpdate(): void;
+        componentWillUnmount(): void;
+        render(): import("react").ReactElement<P & WithFocusableProps, string | import("react").JSXElementConstructor<any>>;
+        context: any;
+        setState<K extends keyof WithFocusableState>(state: WithFocusableState | ((prevState: Readonly<WithFocusableState>, props: Readonly<P & WithFocusableProps>) => WithFocusableState | Pick<WithFocusableState, K> | null) | Pick<WithFocusableState, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<P & WithFocusableProps> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        shouldComponentUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): boolean;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<P & WithFocusableProps>, prevState: Readonly<WithFocusableState>): any;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<P & WithFocusableProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<P & WithFocusableProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<P & WithFocusableProps>, nextState: Readonly<WithFocusableState>, nextContext: any): void;
+    };
+    contextTypes: {
+        parentFocusKey: PropTypes.Requireable<string>;
+    };
+    childContextTypes: {
+        parentFocusKey: PropTypes.Requireable<string>;
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+export default withFocusable;

package/dist/src/external/spatial-navigation/withFocusable.js

@@ -0,0 +1,254 @@
+/* eslint-disable react/no-find-dom-node */
+import { findDOMNode } from 'react-dom';
+import PropTypes from 'prop-types';
+import { Component, createElement } from 'react';
+import { ROOT_FOCUS_KEY } from './spatialNavigation';
+import SDK from '@/index';
+// Helper functions to replace lodash and recompose
+const uniqueId = (prefix) => `${prefix}${Math.random().toString(36).substr(2, 9)}`;
+const noop = () => { };
+const omit = (obj, keys) => {
+    const result = { ...obj };
+    keys.forEach((key) => delete result[key]);
+    return result;
+};
+const withFocusable = ({ forgetLastFocusedChild: configForgetLastFocusedChild = false, trackChildren: configTrackChildren = false, autoRestoreFocus: configAutoRestoreFocus, blockNavigationOut: configBlockNavigationOut = false, } = {}) => {
+    return (WrappedComponent) => {
+        var _a;
+        return _a = class WithFocusable extends Component {
+                constructor() {
+                    super(...arguments);
+                    Object.defineProperty(this, "state", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: {
+                            realFocusKey: this.props.focusKey || uniqueId('sn:focusable-item-'),
+                            focused: false,
+                            hasFocusedChild: false,
+                            parentFocusKey: this.props.parentFocusKey || ROOT_FOCUS_KEY,
+                        }
+                    });
+                    Object.defineProperty(this, "navigation", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: SDK.getMaestroEventViewModel().navigation
+                    });
+                    Object.defineProperty(this, "setFocus", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: (focusKey) => {
+                            if (!this.navigation.isNativeMode()) {
+                                this.navigation.setFocus(focusKey);
+                            }
+                        }
+                    });
+                    Object.defineProperty(this, "navigateByDirection", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: this.navigation.navigateByDirection
+                    });
+                    Object.defineProperty(this, "stealFocus", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: () => {
+                            this.navigation.setFocus(this.state.realFocusKey);
+                        }
+                    });
+                    Object.defineProperty(this, "onUpdateFocus", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: (focused) => {
+                            this.setState({ focused });
+                        }
+                    });
+                    Object.defineProperty(this, "onUpdateHasFocusedChild", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: (hasFocusedChild) => {
+                            this.setState({ hasFocusedChild });
+                        }
+                    });
+                    Object.defineProperty(this, "onEnterPressHandler", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: (details) => {
+                            const { onEnterPress = noop, ...rest } = this.props;
+                            onEnterPress(rest, details);
+                        }
+                    });
+                    Object.defineProperty(this, "onClickPressHandler", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: (details) => {
+                            const { onClickPress = noop, ...rest } = this.props;
+                            onClickPress(rest, details);
+                        }
+                    });
+                    Object.defineProperty(this, "onEnterReleaseHandler", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: () => {
+                            const { onEnterRelease = noop, ...rest } = this.props;
+                            onEnterRelease(rest);
+                        }
+                    });
+                    Object.defineProperty(this, "onBackPressHandler", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: (details) => {
+                            const { onBackPress = noop, ...rest } = this.props;
+                            onBackPress(rest, details);
+                        }
+                    });
+                    Object.defineProperty(this, "onArrowPressHandler", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: (direction, details) => {
+                            const { onArrowPress = noop, ...rest } = this.props;
+                            return onArrowPress(direction, rest, details);
+                        }
+                    });
+                    Object.defineProperty(this, "onBecameFocusedHandler", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: (layout, details) => {
+                            const { onBecameFocused = noop, ...rest } = this.props;
+                            onBecameFocused(layout, rest, details);
+                        }
+                    });
+                    Object.defineProperty(this, "onBecameBlurredHandler", {
+                        enumerable: true,
+                        configurable: true,
+                        writable: true,
+                        value: (layout, details) => {
+                            const { onBecameBlurred = noop, ...rest } = this.props;
+                            onBecameBlurred(layout, rest, details);
+                        }
+                    });
+                }
+                getChildContext() {
+                    return {
+                        parentFocusKey: this.state.realFocusKey,
+                    };
+                }
+                componentDidMount() {
+                    const { realFocusKey: focusKey, parentFocusKey } = this.state;
+                    const { preferredChildFocusKey, forgetLastFocusedChild = false, trackChildren, focusable = true, autoRestoreFocus = true, blockNavigationOut = false, } = this.props;
+                    let node;
+                    if (this.navigation.isNativeMode()) {
+                        node = document.createElement('div');
+                    }
+                    else {
+                        const domNode = findDOMNode(this);
+                        if (!domNode) {
+                            throw new Error('Could not find DOM node');
+                        }
+                        node = domNode;
+                    }
+                    this.navigation.addFocusable({
+                        focusKey,
+                        node,
+                        parentFocusKey,
+                        preferredChildFocusKey,
+                        onEnterPressHandler: this.onEnterPressHandler,
+                        onClickPressHandler: this.onClickPressHandler,
+                        onEnterReleaseHandler: this.onEnterReleaseHandler,
+                        onBackPressHandler: this.onBackPressHandler,
+                        onArrowPressHandler: this.onArrowPressHandler,
+                        onBecameFocusedHandler: this.onBecameFocusedHandler,
+                        onBecameBlurredHandler: this.onBecameBlurredHandler,
+                        onUpdateFocus: this.onUpdateFocus,
+                        onUpdateHasFocusedChild: this.onUpdateHasFocusedChild,
+                        forgetLastFocusedChild: configForgetLastFocusedChild || forgetLastFocusedChild,
+                        trackChildren: configTrackChildren || trackChildren,
+                        blockNavigationOut: configBlockNavigationOut || blockNavigationOut,
+                        autoRestoreFocus: configAutoRestoreFocus !== undefined
+                            ? configAutoRestoreFocus
+                            : autoRestoreFocus,
+                        focusable,
+                    });
+                }
+                componentDidUpdate() {
+                    const { realFocusKey: focusKey } = this.state;
+                    const { preferredChildFocusKey, focusable = true, blockNavigationOut = false, } = this.props;
+                    let node;
+                    if (this.navigation.isNativeMode()) {
+                        node = document.createElement('div');
+                    }
+                    else {
+                        const domNode = findDOMNode(this);
+                        if (!domNode) {
+                            throw new Error('Could not find DOM node');
+                        }
+                        node = domNode;
+                    }
+                    this.navigation.updateFocusable(focusKey, {
+                        node,
+                        preferredChildFocusKey,
+                        focusable,
+                        blockNavigationOut: configBlockNavigationOut || blockNavigationOut,
+                    });
+                }
+                componentWillUnmount() {
+                    const { realFocusKey: focusKey } = this.state;
+                    this.navigation.removeFocusable({ focusKey });
+                }
+                render() {
+                    const props = {
+                        ...this.props,
+                        ...this.state,
+                        setFocus: this.setFocus,
+                        navigateByDirection: this.navigateByDirection,
+                        stealFocus: this.stealFocus,
+                        onUpdateFocus: this.onUpdateFocus,
+                        onUpdateHasFocusedChild: this.onUpdateHasFocusedChild,
+                    };
+                    const filteredProps = omit(props, [
+                        'onBecameFocusedHandler',
+                        'onBecameBlurredHandler',
+                        'onEnterPressHandler',
+                        'onClickPressHandler',
+                        'onEnterReleaseHandler',
+                        'onArrowPressHandler',
+                        'onUpdateFocus',
+                        'onUpdateHasFocusedChild',
+                        'forgetLastFocusedChild',
+                        'trackChildren',
+                        'autoRestoreFocus',
+                    ]);
+                    return createElement(WrappedComponent, filteredProps);
+                }
+            },
+            Object.defineProperty(_a, "contextTypes", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: {
+                    parentFocusKey: PropTypes.string,
+                }
+            }),
+            Object.defineProperty(_a, "childContextTypes", {
+                enumerable: true,
+                configurable: true,
+                writable: true,
+                value: {
+                    parentFocusKey: PropTypes.string,
+                }
+            }),
+            _a;
+    };
+};
+export default withFocusable;

package/dist/src/helpers/Observable.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Basic observable implementation for view models
+ */
+export declare class Observable<T> {
+    private listeners;
+    private _value;
+    constructor(initialValue: T);
+    get value(): T;
+    set value(newValue: T);
+    subscribe(listener: (value: T) => void): () => void;
+    private notify;
+}

package/dist/src/helpers/Observable.js

@@ -0,0 +1,37 @@
+/**
+ * Basic observable implementation for view models
+ */
+export class Observable {
+    constructor(initialValue) {
+        Object.defineProperty(this, "listeners", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: []
+        });
+        Object.defineProperty(this, "_value", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this._value = initialValue;
+    }
+    get value() {
+        return this._value;
+    }
+    set value(newValue) {
+        this._value = newValue;
+        this.notify();
+    }
+    subscribe(listener) {
+        this.listeners.push(listener);
+        // Return unsubscribe function
+        return () => {
+            this.listeners = this.listeners.filter((l) => l !== listener);
+        };
+    }
+    notify() {
+        this.listeners.forEach((listener) => listener(this._value));
+    }
+}

package/dist/src/helpers/strings.d.ts

@@ -0,0 +1,2 @@
+export declare const slugify: (str: string) => string;
+export declare function stringHashCode(str: string): number;

package/dist/src/helpers/strings.js

@@ -0,0 +1,14 @@
+export const slugify = (str) => str
+    .toLowerCase()
+    .trim()
+    .replace(/[\s\W-]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+export function stringHashCode(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        const char = str.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash = hash & hash; // Convert to 32bit integer
+    }
+    return hash;
+}

package/dist/src/helpers/url.d.ts

@@ -0,0 +1 @@
+export declare const setImageDimensions: (url: string, width: number, height: number) => string;

package/dist/src/helpers/url.js

@@ -0,0 +1,12 @@
+export const setImageDimensions = (url, width, height) => {
+    try {
+        const urlObj = new URL(url);
+        urlObj.searchParams.set('w', width.toString());
+        urlObj.searchParams.set('h', height.toString());
+        return urlObj.toString();
+    }
+    catch (err) {
+        console.warn('Malformed URL:', url, err);
+        return url; // Return the original URL if it cannot be parsed
+    }
+};

package/dist/src/hooks/useMaxHeightToBottom.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hook for functional components.
+ * Returns a ref callback that sets up maxHeight calculation with resize listener.
+ */
+export declare function useMaxHeightToBottom(): (element: HTMLDivElement | null) => void;
+/**
+ * Utility for class components.
+ * Call in componentDidMount, returns cleanup function for componentWillUnmount.
+ */
+export declare function setupMaxHeightToBottom(getElement: () => HTMLElement | null): () => void;
+export default useMaxHeightToBottom;

package/dist/src/hooks/useMaxHeightToBottom.js

@@ -0,0 +1,48 @@
+import { useCallback, useEffect, useRef } from 'react';
+/**
+ * Calculates and sets maxHeight on an element to fill remaining viewport height.
+ * Updates on window resize.
+ */
+function calculateMaxHeight(element) {
+    if (!element)
+        return;
+    const rect = element.getBoundingClientRect();
+    element.style.maxHeight = `${window.innerHeight - rect.top}px`;
+}
+/**
+ * Hook for functional components.
+ * Returns a ref callback that sets up maxHeight calculation with resize listener.
+ */
+export function useMaxHeightToBottom() {
+    const elementRef = useRef(null);
+    const handleResize = useCallback(() => {
+        calculateMaxHeight(elementRef.current);
+    }, []);
+    useEffect(() => {
+        window.addEventListener('resize', handleResize);
+        return () => {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [handleResize]);
+    const refCallback = useCallback((element) => {
+        elementRef.current = element;
+        calculateMaxHeight(element);
+    }, []);
+    return refCallback;
+}
+/**
+ * Utility for class components.
+ * Call in componentDidMount, returns cleanup function for componentWillUnmount.
+ */
+export function setupMaxHeightToBottom(getElement) {
+    const handleResize = () => {
+        calculateMaxHeight(getElement());
+    };
+    // Initial calculation
+    handleResize();
+    window.addEventListener('resize', handleResize);
+    return () => {
+        window.removeEventListener('resize', handleResize);
+    };
+}
+export default useMaxHeightToBottom;