@lodev09/react-native-true-sheet 0.9.8 → 0.10.0

package/lib/typescript/src/TrueSheet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TrueSheet.d.ts","sourceRoot":"","sources":["../../../src/TrueSheet.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWlG,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,SAAS,CAAA;AA0BvD,UAAU,cAAc;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;AAED,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,EAAE,cAAc,CAAC;IAC1E,WAAW,SAAc;IAEzB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAsB;gBAE9B,KAAK,EAAE,cAAc;IAcjC,OAAO,KAAK,MAAM,GAOjB;IAED,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAIjB,iBAAiB,IAAI,IAAI;IAUzB,kBAAkB,IAAI,IAAI;IAI1B;;;OAGG;IACU,OAAO,CAAC,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAItD;;;OAGG;IACU,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAIjD;;OAEG;IACU,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAIrC,MAAM,IAAI,SAAS;CA6DpB"}
+{"version":3,"file":"TrueSheet.d.ts","sourceRoot":"","sources":["../../../src/TrueSheet.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAwC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAYlG,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,SAAS,CAAA;AAsBvD,UAAU,cAAc;IACtB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAA;CAChC;AAQD,qBAAa,SAAU,SAAQ,aAAa,CAAC,cAAc,EAAE,cAAc,CAAC;IAC1E,WAAW,SAAc;IAEzB,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAsB;IAE1C;;OAEG;IACH,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAiC;gBAEpD,KAAK,EAAE,cAAc;IAkBjC,OAAO,CAAC,MAAM,CAAC,SAAS;IAUxB;;;OAGG;WACiB,OAAO,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,GAAE,MAAU;IAO3D;;;OAGG;WACiB,OAAO,CAAC,IAAI,EAAE,MAAM;IAOxC;;;OAGG;WACiB,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM;IAItD,OAAO,KAAK,MAAM,GAOjB;IAED,OAAO,CAAC,WAAW;IAcnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,SAAS;IAIjB;;;OAGG;IACU,OAAO,CAAC,KAAK,GAAE,MAAU,GAAG,OAAO,CAAC,IAAI,CAAC;IAItD;;;OAGG;IACU,MAAM,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC;IAIjD;;OAEG;IACU,OAAO,IAAI,OAAO,CAAC,IAAI,CAAC;IAIrC,iBAAiB,IAAI,IAAI;IAUzB,kBAAkB,IAAI,IAAI;IAI1B,MAAM,IAAI,SAAS;CAmEpB"}

package/lib/typescript/src/TrueSheetFooter.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TrueSheetProps } from './types';
+interface TrueSheetFooterProps {
+    Component?: TrueSheetProps['FooterComponent'];
+}
+export declare const TrueSheetFooter: (props: TrueSheetFooterProps) => React.JSX.Element | null;
+export {};
+//# sourceMappingURL=TrueSheetFooter.d.ts.map

package/lib/typescript/src/TrueSheetFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrueSheetFooter.d.ts","sourceRoot":"","sources":["../../../src/TrueSheetFooter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAA;AAE7C,UAAU,oBAAoB;IAC5B,SAAS,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,eAAe,UAAW,oBAAoB,6BAU1D,CAAA"}

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

@@ -61,6 +61,21 @@ export type SheetSize =
  */
  | 'large';
 export interface TrueSheetProps extends ViewProps {
+    /**
+     * The name to reference this sheet. It has to be unique.
+     * You can then present this sheet globally using its `name`.
+     *
+     * Example:
+     * ```ts
+     * <TrueSheet name="my-awesome-sheet">
+     *   <MyComponent />
+     * </TrueSheet>
+     * ```
+     * ```ts
+     * TrueSheet.present('my-awesome-sheet')
+     * ```
+     */
+    name?: string;
     /**
      * The sizes you want the Sheet to support.
      * Maximum of 3 sizes only; collapsed, half-expanded, expanded.

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAA;AAE9B;;;;;GAKG;AACH,MAAM,MAAM,SAAS;AACnB;;;;;GAKG;AACD,MAAM;AAER;;;;;GAKG;GACD,MAAM;AAER;;;;;GAKG;GACD,GAAG,MAAM,GAAG;AAEd;;;;;GAKG;GACD,OAAO;AAET;;;;;GAKG;GACD,QAAQ;AAEV;;;;;GAKG;GACD,OAAO,CAAA;AAEX,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IAEpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,YAAY,CAAA;IAEvD;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;CACxC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC9E,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAE/D,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd;AAED;;;;GAIG;AACH,MAAM,MAAM,QAAQ,GAChB,OAAO,GACP,MAAM,GACN,SAAS,GACT,YAAY,GACZ,SAAS,GACT,WAAW,GACX,yBAAyB,GACzB,oBAAoB,GACpB,gBAAgB,GAChB,qBAAqB,GACrB,sBAAsB,GACtB,8BAA8B,GAC9B,yBAAyB,GACzB,qBAAqB,GACrB,0BAA0B,GAC1B,2BAA2B,GAC3B,6BAA6B,GAC7B,wBAAwB,GACxB,oBAAoB,GACpB,yBAAyB,GACzB,0BAA0B,CAAA;AAE9B;;;;;GAKG;AACH,MAAM,MAAM,SAAS;AACnB;;;;;GAKG;AACD,MAAM;AAER;;;;;GAKG;GACD,MAAM;AAER;;;;;GAKG;GACD,GAAG,MAAM,GAAG;AAEd;;;;;GAKG;GACD,OAAO;AAET;;;;;GAKG;GACD,QAAQ;AAEV;;;;;GAKG;GACD,OAAO,CAAA;AAEX,MAAM,WAAW,cAAe,SAAQ,SAAS;IAC/C;;;;;;;;;;;;;OAaG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,SAAS,EAAE,CAAA;IAEnB;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAA;IAErB;;;;OAIG;IACH,eAAe,CAAC,EAAE,UAAU,CAAA;IAE5B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;;;OAIG;IACH,YAAY,CAAC,EAAE,qBAAqB,CAAA;IAEpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAA;IAEnB;;OAEG;IACH,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5C;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IAEzC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,YAAY,CAAA;IAEvD;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;IAEpC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IAEtB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAA;CACxC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lodev09/react-native-true-sheet",
-  "version": "0.9.8",
-  "description": "The true native bottom sheet. 💩",
+  "version": "0.10.0",
+  "description": "The true native bottom sheet experience for your React Native Apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/src/index.d.ts",
@@ -26,6 +26,7 @@
   ],
   "scripts": {
     "example": "yarn workspace true-sheet-example",
+    "docs": "yarn workspace docs",
     "test": "jest",
     "typecheck": "tsc --noEmit",
     "lint": "eslint --fix \"**/*.{js,ts,tsx}\"",
@@ -90,14 +91,17 @@
     "react-native": "*"
   },
   "workspaces": [
-    "example"
+    "example",
+    "docs"
   ],
   "packageManager": "yarn@4.1.1",
   "jest": {
     "preset": "react-native",
     "modulePathIgnorePatterns": [
       "<rootDir>/example/node_modules",
-      "<rootDir>/lib/"
+      "<rootDir>/docs/node_modules",
+      "<rootDir>/lib/",
+      "<rootDir>/docs/build"
     ]
   },
   "commitlint": {
@@ -129,10 +133,6 @@
   },
   "eslintConfig": {
     "root": true,
-    "ignorePatterns": [
-      "lib",
-      "src/__mocks__"
-    ],
     "extends": [
       "plugin:@typescript-eslint/recommended",
       "eslint:recommended",

package/src/TrueSheet.tsx

@@ -7,43 +7,53 @@ import {
   type NativeMethods,
   type ViewStyle,
   type NativeSyntheticEvent,
+  type LayoutRectangle,
 } from 'react-native'
 
 import type { TrueSheetProps, SizeInfo } from './types'
 import { TrueSheetModule } from './TrueSheetModule'
 import { TrueSheetGrabber } from './TrueSheetGrabber'
+import { TrueSheetFooter } from './TrueSheetFooter'
 
+const NATIVE_COMPONENT_NAME = 'TrueSheetView'
 const LINKING_ERROR =
   `The package '@lodev09/react-native-true-sheet' doesn't seem to be linked. Make sure: \n\n` +
   Platform.select({ ios: "- You have run 'pod install'\n", default: '' }) +
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo Go\n'
 
-const ComponentName = 'TrueSheetView'
-
 interface TrueSheetNativeViewProps extends Omit<TrueSheetProps, 'onPresent' | 'onSizeChange'> {
+  contentHeight?: number
+  footerHeight?: number
   scrollableHandle: number | null
   onPresent: (event: NativeSyntheticEvent<SizeInfo>) => void
   onSizeChange: (event: NativeSyntheticEvent<SizeInfo>) => void
 }
 
-const TrueSheetNativeView = requireNativeComponent<TrueSheetNativeViewProps>(ComponentName)
-
-if (!TrueSheetNativeView) {
-  throw new Error(LINKING_ERROR)
-}
-
 type NativeRef = Component<TrueSheetNativeViewProps> & Readonly<NativeMethods>
 
 interface TrueSheetState {
+  contentHeight?: number
+  footerHeight?: number
   scrollableHandle: number | null
 }
 
+const TrueSheetNativeView = requireNativeComponent<TrueSheetNativeViewProps>(NATIVE_COMPONENT_NAME)
+
+if (!TrueSheetNativeView) {
+  throw new Error(LINKING_ERROR)
+}
+
 export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
   displayName = 'TrueSheet'
 
   private readonly ref: RefObject<NativeRef>
 
+  /**
+   * Map of sheet names against their handle.
+   */
+  private static readonly handles: { [name: string]: number } = {}
+
   constructor(props: TrueSheetProps) {
     super(props)
 
@@ -52,16 +62,60 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.onDismiss = this.onDismiss.bind(this)
     this.onPresent = this.onPresent.bind(this)
     this.onSizeChange = this.onSizeChange.bind(this)
+    this.onContentLayout = this.onContentLayout.bind(this)
+    this.onFooterLayout = this.onFooterLayout.bind(this)
 
     this.state = {
+      contentHeight: undefined,
+      footerHeight: undefined,
       scrollableHandle: null,
     }
   }
 
+  private static getHandle(name: string) {
+    const handle = TrueSheet.handles[name]
+    if (!handle) {
+      console.warn(`Could not get native view tag from "${name}". Check your name prop.`)
+      return
+    }
+
+    return handle
+  }
+
+  /**
+   * Present the sheet by given `name`.
+   * See `name` prop.
+   */
+  public static async present(name: string, index: number = 0) {
+    const handle = TrueSheet.getHandle(name)
+    if (!handle) return
+
+    await TrueSheetModule.present(handle, index)
+  }
+
+  /**
+   * Dismiss the sheet by given `name`.
+   * See `name` prop.
+   */
+  public static async dismiss(name: string) {
+    const handle = TrueSheet.getHandle(name)
+    if (!handle) return
+
+    await TrueSheetModule.dismiss(handle)
+  }
+
+  /**
+   * Resize the sheet by given `name`.
+   * See `name` prop.
+   */
+  public static async resize(name: string, index: number) {
+    await TrueSheet.present(name, index)
+  }
+
   private get handle(): number {
     const nodeHandle = findNodeHandle(this.ref.current)
     if (nodeHandle == null || nodeHandle === -1) {
-      throw new Error(`Could not get native view tag`)
+      throw new Error('Could not get native view tag')
     }
 
     return nodeHandle
@@ -72,6 +126,10 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
       ? findNodeHandle(this.props.scrollRef.current)
       : null
 
+    if (this.props.name) {
+      TrueSheet.handles[this.props.name] = this.handle
+    }
+
     this.setState({
       scrollableHandle,
     })
@@ -85,26 +143,25 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     this.props.onPresent?.(event.nativeEvent)
   }
 
-  private onDismiss(): void {
-    this.props.onDismiss?.()
+  private onFooterLayout(layout: LayoutRectangle): void {
+    console.log('footerHeight', layout.height)
+    this.setState({
+      footerHeight: layout.height,
+    })
   }
 
-  componentDidMount(): void {
-    if (this.props.sizes && this.props.sizes.length > 3) {
-      console.warn(
-        'TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.'
-      )
-    }
-
-    this.updateState()
+  private onContentLayout(layout: LayoutRectangle): void {
+    this.setState({
+      contentHeight: layout.height,
+    })
   }
 
-  componentDidUpdate(): void {
-    this.updateState()
+  private onDismiss(): void {
+    this.props.onDismiss?.()
   }
 
   /**
-   * Present the modal sheet. Optionally accepts a size `index`.
+   * Present the sheet. Optionally accepts a size `index`.
    * See `sizes` prop
    */
   public async present(index: number = 0): Promise<void> {
@@ -126,6 +183,20 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
     await TrueSheetModule.dismiss(this.handle)
   }
 
+  componentDidMount(): void {
+    if (this.props.sizes && this.props.sizes.length > 3) {
+      console.warn(
+        'TrueSheet only supports a maximum of 3 sizes; collapsed, half-expanded and expanded. Check your `sizes` prop.'
+      )
+    }
+
+    this.updateState()
+  }
+
+  componentDidUpdate(): void {
+    this.updateState()
+  }
+
   render(): ReactNode {
     const {
       sizes = ['medium', 'large'],
@@ -151,6 +222,8 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
         sizes={sizes}
         blurTint={blurTint}
         cornerRadius={cornerRadius}
+        contentHeight={this.state.contentHeight}
+        footerHeight={this.state.footerHeight}
         grabber={grabber}
         dismissible={dismissible}
         maxHeight={maxHeight}
@@ -176,11 +249,15 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
           ]}
           {...rest}
         >
-          <View collapsable={false} style={contentContainerStyle}>
+          <View
+            collapsable={false}
+            onLayout={(e) => this.onContentLayout(e.nativeEvent.layout)}
+            style={contentContainerStyle}
+          >
             {children}
           </View>
-          <View collapsable={false}>
-            <TrueSheetFooter FooterComponent={FooterComponent} />
+          <View collapsable={false} onLayout={(e) => this.onFooterLayout(e.nativeEvent.layout)}>
+            <TrueSheetFooter Component={FooterComponent} />
           </View>
           {Platform.OS === 'android' && <TrueSheetGrabber visible={grabber} {...grabberProps} />}
         </View>
@@ -189,18 +266,6 @@ export class TrueSheet extends PureComponent<TrueSheetProps, TrueSheetState> {
   }
 }
 
-const TrueSheetFooter = (props: Pick<TrueSheetProps, 'FooterComponent'>) => {
-  const { FooterComponent } = props
-
-  if (!FooterComponent) return null
-
-  if (typeof FooterComponent !== 'function') {
-    return FooterComponent
-  }
-
-  return <FooterComponent />
-}
-
 const $nativeSheet: ViewStyle = {
   position: 'absolute',
   left: -9999,

package/src/TrueSheetFooter.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import type { TrueSheetProps } from './types'
+
+interface TrueSheetFooterProps {
+  Component?: TrueSheetProps['FooterComponent']
+}
+
+export const TrueSheetFooter = (props: TrueSheetFooterProps) => {
+  const { Component } = props
+
+  if (!Component) return null
+
+  if (typeof Component !== 'function') {
+    return Component
+  }
+
+  return <Component />
+}

package/src/__mocks__/index.js

@@ -4,6 +4,10 @@ import { View } from 'react-native'
 export * from '../TrueSheetGrabber'
 
 export class TrueSheet extends React.Component {
+  static dismiss = jest.fn()
+  static present = jest.fn()
+  static resize = jest.fn()
+
   dismiss = jest.fn()
   present = jest.fn()
   resize = jest.fn()

package/src/types.ts

@@ -92,6 +92,21 @@ export type SheetSize =
   | 'large'
 
 export interface TrueSheetProps extends ViewProps {
+  /**
+   * The name to reference this sheet. It has to be unique.
+   * You can then present this sheet globally using its `name`.
+   *
+   * Example:
+   * ```ts
+   * <TrueSheet name="my-awesome-sheet">
+   *   <MyComponent />
+   * </TrueSheet>
+   * ```
+   * ```ts
+   * TrueSheet.present('my-awesome-sheet')
+   * ```
+   */
+  name?: string
   /**
    * The sizes you want the Sheet to support.
    * Maximum of 3 sizes only; collapsed, half-expanded, expanded.