@niibase/bottom-sheet-manager 1.1.0

package/lib/typescript/sheet.d.ts

@@ -0,0 +1,19 @@
+import { BottomSheetBackdrop, BottomSheetFlatList, BottomSheetFooter, BottomSheetFooterContainer, BottomSheetHandle, BottomSheetScrollView, BottomSheetSectionList, BottomSheetTextInput, BottomSheetView, BottomSheetVirtualizedList } from "@gorhom/bottom-sheet";
+import React from "react";
+import { BottomSheetInstance, BottomSheetProps, SheetIds } from "./types";
+interface BottomSheetFC extends React.MemoExoticComponent<React.ForwardRefExoticComponent<BottomSheetProps>> {
+    <Id extends SheetIds>(props: BottomSheetProps & React.RefAttributes<BottomSheetInstance<Id>>): React.JSX.Element;
+    View: typeof BottomSheetView;
+    ScrollView: typeof BottomSheetScrollView;
+    FlatList: typeof BottomSheetFlatList;
+    SectionList: typeof BottomSheetSectionList;
+    VirtualizedList: typeof BottomSheetVirtualizedList;
+    Handle: typeof BottomSheetHandle;
+    Footer: typeof BottomSheetFooter;
+    FooterContainer: typeof BottomSheetFooterContainer;
+    Backdrop: typeof BottomSheetBackdrop;
+    TextInput: typeof BottomSheetTextInput;
+}
+declare const BottomSheet: BottomSheetFC;
+export default BottomSheet;
+//# sourceMappingURL=sheet.d.ts.map

package/lib/typescript/sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../../src/sheet.tsx"],"names":[],"mappings":"AAAA,OAAsB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,0BAA0B,EAC1B,iBAAiB,EAEjB,qBAAqB,EACrB,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,0BAA0B,EAC3B,MAAM,sBAAsB,CAAC;AAgB9B,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAI1E,UAAU,aACR,SAAQ,KAAK,CAAC,mBAAmB,CAAC,KAAK,CAAC,yBAAyB,CAAC,gBAAgB,CAAC,CAAC;IACpF,CAAC,EAAE,SAAS,QAAQ,EAClB,KAAK,EAAE,gBAAgB,GAAG,KAAK,CAAC,aAAa,CAAC,mBAAmB,CAAC,EAAE,CAAC,CAAC,GACrE,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;IAGrB,IAAI,EAAE,OAAO,eAAe,CAAC;IAC7B,UAAU,EAAE,OAAO,qBAAqB,CAAC;IACzC,QAAQ,EAAE,OAAO,mBAAmB,CAAC;IACrC,WAAW,EAAE,OAAO,sBAAsB,CAAC;IAC3C,eAAe,EAAE,OAAO,0BAA0B,CAAC;IACnD,MAAM,EAAE,OAAO,iBAAiB,CAAC;IACjC,MAAM,EAAE,OAAO,iBAAiB,CAAC;IACjC,eAAe,EAAE,OAAO,0BAA0B,CAAC;IACnD,QAAQ,EAAE,OAAO,mBAAmB,CAAC;IACrC,SAAS,EAAE,OAAO,oBAAoB,CAAC;CACxC;AAyQD,QAAA,MAAM,WAAW,EAAuC,aAAa,CAAC;AA2BtE,eAAe,WAAW,CAAC"}

package/lib/typescript/types.d.ts

@@ -0,0 +1,125 @@
+import type { BottomSheetProps as RNBottomSheetProps } from "@gorhom/bottom-sheet";
+import type { WithSpringConfig, WithTimingConfig } from "react-native-reanimated";
+import React from "react";
+export interface Sheets {
+}
+export type SheetIds = keyof Sheets;
+export type SheetID<Id extends SheetIds> = Id | (string & {});
+export type SheetPayload<Id extends SheetIds> = Sheets[Id]["payload"];
+export type SheetReturnValue<Id extends SheetIds> = Sheets[Id]["returnValue"];
+type AnimationConfigs = WithSpringConfig | WithTimingConfig;
+export interface SheetProps<Id extends SheetIds = SheetIds> {
+    readonly id: SheetID<Id>;
+    readonly payload: SheetPayload<Id>;
+    readonly context: string;
+}
+export interface SheetDefinition<Payload = never, ReturnValue = never> {
+    payload: Payload;
+    returnValue: ReturnValue;
+}
+export interface BottomSheetInstance<Id extends SheetIds = SheetIds> {
+    /**
+     * Close the bottom sheet.
+     * @param args
+     */
+    readonly close: (...args: SheetReturnValue<Id> extends never ? [
+        options?: {
+            /**
+             * Snap animation configs.
+             */
+            animationConfigs?: AnimationConfigs;
+        }
+    ] : [
+        options: {
+            /**
+             * Return some data to the caller on closing the `BottomSheet`.
+             */
+            value: SheetReturnValue<Id>;
+            /**
+             * Snap animation configs.
+             */
+            animationConfigs?: AnimationConfigs;
+        }
+    ]) => void;
+    /**
+     * Snap to the maximum provided point from `snapPoints`.
+     * @param animationConfigs Snap animation configs.
+     */
+    readonly expand: (animationConfigs?: AnimationConfigs) => void;
+    /**
+     * Snap to the minimum provided point from `snapPoints`.
+     * @param animationConfigs Snap animation configs.
+     */
+    readonly collapse: (animationConfigs?: AnimationConfigs) => void;
+    /**
+     * Snap to one of the provided points from `snapPoints`.
+     * @param index Snap point index.
+     * @param animationConfigs Snap animation configs.
+     */
+    readonly snapToIndex: (index: number, animationConfigs?: AnimationConfigs) => void;
+    /**
+     * Snap to a position out of provided  `snapPoints`.
+     * @param position Position in pixel or percentage.
+     * @param animationConfigs Snap animation configs.
+     */
+    readonly snapToPosition: (position: string | number, animationConfigs?: AnimationConfigs) => void;
+}
+export type BottomSheetProps = Omit<RNBottomSheetProps, "children" | "onClose" | "animatedIndex" | "topInset"> & {
+    /**
+     * ID of the `BottomSheet`.
+     */
+    id?: SheetID<SheetIds>;
+    /**
+     * Content of the `BottomSheet`.
+     */
+    children: React.ReactNode;
+    /**
+     * When set to true, `BottomSheet` is closed when the hardware back button is pressed.
+     * @default true
+     */
+    hardwareBackPressToClose?: boolean;
+    /**
+     * Callback when the sheet close.
+     *
+     * @type () => void;
+     */
+    onClose?: (data?: any) => void;
+    /**
+     * Event called before sheets is visible.
+     * @param data Payload of the sheet if any.
+     * @type () => void;
+     */
+    onBeforeShow?: (data?: any) => void;
+    /**
+     * Can click through the sheet to the underlying view.
+     * @default false
+     */
+    clickThrough?: boolean;
+    /**
+     * Opacity of the sheet's overlay.
+     * @default 0.45
+     */
+    opacity?: number;
+    /**
+     * Defines the stack behavior when modal mounts. (experimental)
+     * @default "switch"
+     */
+    stackBehavior?: "push" | "replace" | "switch";
+    /**
+     * Whether the bottom sheet edge to edge.
+     * @default false
+     */
+    fullScreen?: boolean;
+    /**
+     * Whether the bottom sheet is an iOS modal sheet type of animation.
+     * @default false
+     */
+    iosModalSheetTypeOfAnimation?: boolean;
+    className?: string;
+    handleIndicatorClassName?: string;
+    backgroundClassName?: string;
+    containerClassName?: string;
+    handleClassName?: string;
+};
+export {};
+//# sourceMappingURL=types.d.ts.map

package/lib/typescript/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACnF,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAC;AAClF,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,MAAM;CAAG;AAC1B,MAAM,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC;AACpC,MAAM,MAAM,OAAO,CAAC,EAAE,SAAS,QAAQ,IAAI,EAAE,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAE9D,MAAM,MAAM,YAAY,CAAC,EAAE,SAAS,QAAQ,IAAI,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC;AACtE,MAAM,MAAM,gBAAgB,CAAC,EAAE,SAAS,QAAQ,IAAI,MAAM,CAAC,EAAE,CAAC,CAAC,aAAa,CAAC,CAAC;AAC9E,KAAK,gBAAgB,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AAE5D,MAAM,WAAW,UAAU,CAAC,EAAE,SAAS,QAAQ,GAAG,QAAQ;IACtD,QAAQ,CAAC,EAAE,EAAE,OAAO,CAAC,EAAE,CAAC,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC;IACnC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,eAAe,CAAC,OAAO,GAAG,KAAK,EAAE,WAAW,GAAG,KAAK;IACjE,OAAO,EAAE,OAAO,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CAC5B;AAED,MAAM,WAAW,mBAAmB,CAAC,EAAE,SAAS,QAAQ,GAAG,QAAQ;IAC/D;;;OAGG;IACH,QAAQ,CAAC,KAAK,EAAE,CACZ,GAAG,IAAI,EAAE,gBAAgB,CAAC,EAAE,CAAC,SAAS,KAAK,GACrC;QACI,OAAO,CAAC,EAAE;YACN;;eAEG;YACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;SACvC;KACJ,GACD;QACI,OAAO,EAAE;YACL;;eAEG;YACH,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,CAAC;YAE5B;;eAEG;YACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;SACvC;KACJ,KACN,IAAI,CAAC;IAEV;;;OAGG;IACH,QAAQ,CAAC,MAAM,EAAE,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAE/D;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,CAAC,gBAAgB,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEjE;;;;OAIG;IACH,QAAQ,CAAC,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,gBAAgB,CAAC,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEnF;;;;OAIG;IACH,QAAQ,CAAC,cAAc,EAAE,CACrB,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,gBAAgB,CAAC,EAAE,gBAAgB,KAClC,IAAI,CAAC;CACb;AAED,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAC/B,kBAAkB,EAClB,UAAU,GAAG,SAAS,GAAG,eAAe,GAAG,UAAU,CACxD,GAAG;IACA;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,CAAC,QAAQ,CAAC,CAAC;IAEvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;OAGG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IAEnC;;;;OAIG;IACH,OAAO,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAE/B;;;;OAIG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAEpC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,CAAC;IAE9C;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IAEvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC5B,CAAC"}

package/package.json

@@ -0,0 +1,102 @@
+{
+  "name": "@niibase/bottom-sheet-manager",
+  "version": "1.1.0",
+  "description": "A bottom sheet manager for react-native based on @gorhom/bottom-sheet",
+  "main": "lib/commonjs/index",
+  "module": "lib/module/index",
+  "types": "lib/typescript/index.d.ts",
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "scripts": {
+    "typescript": "tsc --skipLibCheck --noEmit",
+    "lint": "prettier --check \"src/**/*\" \"example/**/*\"",
+    "format": "prettier --write \"src/**/*\" \"example/**/*\"",
+    "build": "bob build && yarn copy-dts && yarn delete-dts.js",
+    "copy-dts": "copyfiles -u 1 \"src/**/*.d.ts\" lib/typescript",
+    "delete-dts.js": "find ./lib/commonjs -name '*.d.js*' -delete && find ./lib/module -name '*.d.js*' -delete",
+    "release": "rm -rf lib && yarn build && release-it",
+    "example": "yarn --cwd example",
+    "bootstrap": "yarn install && yarn example"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/divineniiquaye/react-native-bottom-sheet-manager.git"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "web",
+    "bottom-sheet-manager",
+    "bottom-sheet",
+    "bottomsheet",
+    "reanimated",
+    "sheet"
+  ],
+  "author": "Divine Niiquaye Ibok",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/divineniiquaye/react-native-bottom-sheet-manager/issues"
+  },
+  "homepage": "https://github.com/divineniiquaye/react-native-bottom-sheet-manager#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "lib",
+    "LICENSE"
+  ],
+  "peerDependencies": {
+    "@react-navigation/native": ">=6.0.0 || >=7.0.0-",
+    "@types/react": "*",
+    "@types/react-native": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": ">=2.16.1",
+    "react-native-reanimated": ">=3.16.0 || >=4.0.0-",
+    "react-native-safe-area-context": "*"
+  },
+  "peerDependenciesMeta": {
+    "@types/react-native": {
+      "optional": true
+    },
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@gorhom/bottom-sheet": "^5.2.6",
+    "nanoid": "^5.1.6"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@ianvs/prettier-plugin-sort-imports": "file:patched/prettier-plugin-sort-imports",
+    "@react-navigation/native": "^7.1.9",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@types/react": "~18.3.12",
+    "@types/react-native": "~0.73.0",
+    "copyfiles": "^2.4.1",
+    "metro-react-native-babel-preset": "^0.77.0",
+    "prettier": "3.6.2",
+    "react": "18.3.1",
+    "react-native": "0.76.0",
+    "react-native-builder-bob": "^0.23.2",
+    "react-native-gesture-handler": "~2.20.2",
+    "react-native-reanimated": "~3.19.1",
+    "react-native-safe-area-context": "~5.6.0",
+    "release-it": "^19.0.4",
+    "typescript": "^5.8.3"
+  },
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      "typescript"
+    ]
+  }
+}

package/src/events.ts

@@ -0,0 +1,40 @@
+import {
+    DeviceEventEmitter,
+    NativeAppEventEmitter,
+    NativeEventEmitter,
+    Platform,
+} from "react-native";
+
+/* eslint-disable curly */
+export type EventHandler = (...args: any[]) => void;
+export type EventHandlerSubscription = {
+    unsubscribe: () => void;
+};
+
+export default class EventManager {
+    _registry?: NativeEventEmitter;
+    constructor() {
+        this._registry = Platform.select({
+            ios: NativeAppEventEmitter,
+            android: DeviceEventEmitter,
+        });
+    }
+
+    subscribe(name: string, handler: EventHandler) {
+        if (!name || !handler) throw new Error("name and handler are required.");
+        const event = this._registry?.addListener(name, handler);
+        return { unsubscribe: () => event?.remove() };
+    }
+
+    publish(name: string, ...args: any[]) {
+        this._registry?.emit(name, ...args);
+    }
+
+    remove(...names: string[]) {
+        for (const eventType of names) {
+            this._registry?.removeAllListeners(eventType);
+        }
+    }
+}
+
+export const eventManager = new EventManager();

package/src/index.ts

@@ -0,0 +1,11 @@
+export { default as BottomSheet } from "./sheet";
+export { SheetManager } from "./manager";
+export * from "./router";
+export * from "./types";
+export {
+    SheetProvider,
+    useSheetPayload,
+    useSheetRef,
+    useOnSheet,
+    registerSheet,
+} from "./provider";

package/src/manager.ts

@@ -0,0 +1,223 @@
+import { RefObject } from "react";
+
+import { eventManager } from "./events";
+import { providerRegistryStack, sheetsRegistry } from "./provider";
+import { BottomSheetInstance, Sheets } from "./types";
+
+// Array of all the ids of Sheets currently rendered in the app.
+const ids: string[] = [];
+const keys: string[] = [];
+const refs: { [name: string]: RefObject<BottomSheetInstance> } = {};
+const DEFAULT_Z_INDEX = 999;
+
+const makeKey = (id: string, context: string) => `${id}:${context}`;
+
+export const PrivateManager = {
+    // Return to the previous sheet when the current sheet is closed.
+    history: [] as { id: string; context: string }[],
+
+    context(options?: { context?: string; id?: string }) {
+        if (!options) options = {};
+        if (!options?.context) {
+            // If no context is provided, use to current top most context
+            // to render the sheet.
+            for (const context of providerRegistryStack.slice().reverse()) {
+                // We only automatically select nested sheet providers.
+                if (
+                    context.startsWith("$$-auto") &&
+                    !context.includes(options?.id as string)
+                ) {
+                    options.context = context;
+                    break;
+                }
+            }
+        }
+        return options.context;
+    },
+
+    registerRef: (
+        id: string,
+        context: string,
+        instance: RefObject<BottomSheetInstance>,
+    ) => {
+        const key = makeKey(id, context);
+        refs[key] = instance;
+        keys.push(key);
+    },
+
+    /**
+     *
+     * Get internal ref of a sheet by the given id.
+     *
+     * @param id Id of the sheet
+     * @param context Context in which the sheet is rendered. Normally this function returns the top most rendered sheet ref automatically.
+     */
+    get: <SheetId extends keyof Sheets>(
+        id: SheetId | (string & {}),
+        context?: string,
+    ): RefObject<BottomSheetInstance<SheetId>> => {
+        if (!context) {
+            for (let ctx of providerRegistryStack.slice().reverse()) {
+                for (let _id in sheetsRegistry[ctx]) {
+                    if (_id === id) {
+                        context = ctx;
+                        break;
+                    }
+                }
+            }
+        }
+        return refs[makeKey(id, context!)] as RefObject<BottomSheetInstance<SheetId>>;
+    },
+
+    add: (id: string, context: string) => {
+        if (ids.indexOf(id) < 0) {
+            ids[ids.length] = makeKey(id, context);
+        }
+    },
+
+    remove: (id: string, context: string) => {
+        if (ids.indexOf(makeKey(id, context)) > -1) {
+            ids.splice(ids.indexOf(makeKey(id, context)));
+        }
+    },
+
+    zIndex: (id: string, context: string = "global"): number => {
+        const index = keys.indexOf(makeKey(id, context));
+        return index > -1 ? DEFAULT_Z_INDEX + index + 1 : DEFAULT_Z_INDEX;
+    },
+
+    stack: () =>
+        ids.map((id) => {
+            return {
+                id: id.split(":")[0],
+                context: id.split(":")?.[1] || "global",
+            };
+        }),
+};
+
+class _SheetManager {
+    /**
+     * Show the Modal Sheet with an id.
+     *
+     * @param id id of the Sheet to show
+     * @param options
+     */
+    async show<SheetId extends keyof Sheets>(
+        id: SheetId | (string & {}),
+        options?: {
+            /**
+             * Any data to pass to the Sheet. Will be available from the component `props` prop on the modal sheet.
+             */
+            payload?: Sheets[SheetId]["payload"];
+
+            /**
+             * Receive payload from the Sheet when it closes
+             */
+            onClose?: (data: Sheets[SheetId]["returnValue"] | undefined) => void;
+
+            /**
+             * Provide `context` of the `SheetProvider` where you want to show the action sheet.
+             */
+            context?: string;
+        },
+    ): Promise<Sheets[SheetId]["returnValue"]> {
+        return new Promise((resolve) => {
+            const currentContext = PrivateManager.context({ ...options, id: id });
+            const handler = (data: any, context = "global") => {
+                if (context !== "global" && currentContext && currentContext !== context)
+                    return;
+                options?.onClose?.(data);
+                sub?.unsubscribe();
+                resolve(data);
+            };
+
+            var sub = eventManager.subscribe(`onclose_${id}`, handler);
+            PrivateManager.stack().forEach(({ id, context }) => {
+                eventManager.publish(`hide_${id}`, undefined, context, true);
+            });
+
+            // Check if the sheet is registered with any `SheetProviders`.
+            let isRegisteredWithSheetProvider = false;
+            for (let ctx in sheetsRegistry) {
+                for (let _id in sheetsRegistry[ctx]) {
+                    if (_id === id) {
+                        isRegisteredWithSheetProvider = true;
+                    }
+                }
+            }
+            eventManager.publish(
+                isRegisteredWithSheetProvider ? `show_wrap_${id}` : `show_${id}`,
+                options?.payload,
+                currentContext || "global",
+            );
+        });
+    }
+
+    /**
+     * An async hide function. This is useful when you want to show one Sheet after closing another.
+     *
+     * @param id id of the Sheet to show
+     * @param data
+     */
+    async hide<SheetId extends keyof Sheets>(
+        id: SheetId | (string & {}),
+        options?: {
+            /**
+             * Return some data to the caller on closing the Sheet.
+             */
+            payload?: Sheets[SheetId]["returnValue"];
+            /**
+             * Provide `context` of the `SheetProvider` to hide the action sheet.
+             */
+            context?: string;
+        },
+    ): Promise<Sheets[SheetId]["returnValue"]> {
+        let currentContext = PrivateManager.context({
+            ...options,
+            id: id,
+        });
+        return new Promise((resolve) => {
+            let isRegisteredWithSheetProvider = false;
+            // Check if the sheet is registered with any `SheetProviders`
+            // and select the nearest context where sheet is registered.
+
+            for (const _id of ids) {
+                if (_id === `${id}:${currentContext}`) {
+                    isRegisteredWithSheetProvider = true;
+                    break;
+                }
+            }
+
+            const hideHandler = (data: any, context = "global") => {
+                if (context !== "global" && currentContext && currentContext !== context)
+                    return;
+                sub?.unsubscribe();
+                resolve(data);
+            };
+
+            var sub = eventManager.subscribe(`onclose_${id}`, hideHandler);
+            eventManager.publish(
+                isRegisteredWithSheetProvider ? `hide_wrap_${id}` : `hide_${id}`,
+                options?.payload,
+                !isRegisteredWithSheetProvider ? "global" : currentContext,
+            );
+        });
+    }
+
+    /**
+     * Hide all the opened Sheets.
+     *
+     * @param id Hide all sheets for the specific id.
+     */
+    hideAll<SheetId extends keyof Sheets>(id?: SheetId | (string & {})) {
+        PrivateManager.stack().forEach(({ id: _id, context }) => {
+            if (id && !_id.startsWith(id)) return;
+            eventManager.publish(`hide_${_id}`, undefined, context);
+        });
+    }
+}
+
+/**
+ * SheetManager is used to imperatively show/hide any sheet with a unique id prop.
+ */
+export const SheetManager = new _SheetManager();