react-modal-sheet 1.10.2 → 1.11.0

package/dist/sheet.d.ts

@@ -11,5 +11,268 @@ declare const Sheet: React.ForwardRefExoticComponent<{
     springConfig?: Pick<import("framer-motion").Spring, "stiffness" | "damping" | "mass" | "duration" | "bounce" | "restSpeed" | "restDelta" | "from" | "velocity" | "repeat" | "repeatType" | "repeatDelay"> | undefined;
     disableDrag?: boolean | undefined;
     prefersReducedMotion?: boolean | undefined;
-} & import("./types").SheetEvents & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<any>>;
+} & import("./types").SheetEvents & Pick<{
+    slot?: string | undefined;
+    title?: string | undefined;
+    defaultChecked?: boolean | undefined;
+    defaultValue?: string | number | readonly string[] | undefined;
+    suppressContentEditableWarning?: boolean | undefined;
+    suppressHydrationWarning?: boolean | undefined;
+    accessKey?: string | undefined;
+    autoFocus?: boolean | undefined;
+    className?: string | undefined;
+    contentEditable?: boolean | "inherit" | "true" | "false" | undefined;
+    contextMenu?: string | undefined;
+    dir?: string | undefined;
+    draggable?: boolean | "true" | "false" | undefined;
+    hidden?: boolean | undefined;
+    id?: string | undefined;
+    lang?: string | undefined;
+    nonce?: string | undefined;
+    placeholder?: string | undefined;
+    spellCheck?: boolean | "true" | "false" | undefined;
+    tabIndex?: number | undefined;
+    translate?: "yes" | "no" | undefined;
+    radioGroup?: string | undefined;
+    role?: "article" | "button" | "dialog" | "figure" | "form" | "img" | "link" | "main" | "menu" | "menuitem" | "option" | "search" | "table" | "switch" | "alert" | "alertdialog" | "application" | "banner" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "directory" | "document" | "feed" | "grid" | "gridcell" | "group" | "heading" | "list" | "listbox" | "listitem" | "log" | "marquee" | "math" | "menubar" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "tab" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem" | (string & {}) | undefined;
+    about?: string | undefined;
+    content?: string | undefined;
+    datatype?: string | undefined;
+    inlist?: any;
+    prefix?: string | undefined;
+    property?: string | undefined;
+    rel?: string | undefined;
+    resource?: string | undefined;
+    rev?: string | undefined;
+    typeof?: string | undefined;
+    vocab?: string | undefined;
+    autoCapitalize?: string | undefined;
+    autoCorrect?: string | undefined;
+    autoSave?: string | undefined;
+    color?: string | undefined;
+    itemProp?: string | undefined;
+    itemScope?: boolean | undefined;
+    itemType?: string | undefined;
+    itemID?: string | undefined;
+    itemRef?: string | undefined;
+    results?: number | undefined;
+    security?: string | undefined;
+    unselectable?: "on" | "off" | undefined;
+    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    is?: string | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: boolean | "true" | "false" | undefined;
+    "aria-autocomplete"?: "list" | "none" | "inline" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: boolean | "true" | "false" | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: boolean | "true" | "false" | undefined;
+    "aria-dropeffect"?: "link" | "none" | "copy" | "move" | "execute" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: boolean | "true" | "false" | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: boolean | "true" | "false" | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: boolean | "true" | "false" | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: boolean | "true" | "false" | undefined;
+    "aria-multiline"?: boolean | "true" | "false" | undefined;
+    "aria-multiselectable"?: boolean | "true" | "false" | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: boolean | "true" | "false" | undefined;
+    "aria-relevant"?: "text" | "all" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: boolean | "true" | "false" | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: boolean | "true" | "false" | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
+    dangerouslySetInnerHTML?: {
+        __html: string | TrustedHTML;
+    } | undefined;
+    onCopy?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
+    onCopyCapture?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
+    onCut?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
+    onCutCapture?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
+    onPaste?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
+    onPasteCapture?: ((event: React.ClipboardEvent<HTMLDivElement>) => void) | undefined;
+    onCompositionEnd?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
+    onCompositionEndCapture?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
+    onCompositionStart?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
+    onCompositionStartCapture?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
+    onCompositionUpdate?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
+    onCompositionUpdateCapture?: ((event: React.CompositionEvent<HTMLDivElement>) => void) | undefined;
+    onFocus?: ((event: React.FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+    onFocusCapture?: ((event: React.FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+    onBlur?: ((event: React.FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+    onBlurCapture?: ((event: React.FocusEvent<HTMLDivElement, Element>) => void) | undefined;
+    onChange?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onChangeCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onBeforeInput?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onBeforeInputCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onInput?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onInputCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onReset?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onResetCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onSubmit?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onSubmitCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onInvalid?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onInvalidCapture?: ((event: React.FormEvent<HTMLDivElement>) => void) | undefined;
+    onLoad?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onLoadCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onError?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onErrorCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onKeyDown?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
+    onKeyDownCapture?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
+    onKeyPress?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
+    onKeyPressCapture?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
+    onKeyUp?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
+    onKeyUpCapture?: ((event: React.KeyboardEvent<HTMLDivElement>) => void) | undefined;
+    onAbort?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onAbortCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onCanPlay?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onCanPlayCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onCanPlayThrough?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onCanPlayThroughCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onDurationChange?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onDurationChangeCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onEmptied?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onEmptiedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onEncrypted?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onEncryptedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onEnded?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onEndedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onLoadedData?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onLoadedDataCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onLoadedMetadata?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onLoadedMetadataCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onLoadStart?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onLoadStartCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onPause?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onPauseCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onPlay?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onPlayCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onPlaying?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onPlayingCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onProgress?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onProgressCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onRateChange?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onRateChangeCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onResize?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onResizeCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onSeeked?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onSeekedCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onSeeking?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onSeekingCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onStalled?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onStalledCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onSuspend?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onSuspendCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onTimeUpdate?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onTimeUpdateCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onVolumeChange?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onVolumeChangeCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onWaiting?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onWaitingCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onAuxClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onAuxClickCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onClickCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onContextMenu?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onContextMenuCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onDoubleClick?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onDoubleClickCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onDragCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragEndCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragEnter?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragEnterCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragExit?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragExitCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragLeave?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragLeaveCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragOver?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragOverCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDragStartCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDrop?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onDropCapture?: ((event: React.DragEvent<HTMLDivElement>) => void) | undefined;
+    onMouseDown?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseDownCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseEnter?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseLeave?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseMove?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseMoveCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseOut?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseOutCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseOver?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseOverCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseUp?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onMouseUpCapture?: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
+    onSelect?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onSelectCapture?: ((event: React.SyntheticEvent<HTMLDivElement, Event>) => void) | undefined;
+    onTouchCancel?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
+    onTouchCancelCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
+    onTouchEnd?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
+    onTouchEndCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
+    onTouchMove?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
+    onTouchMoveCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
+    onTouchStart?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
+    onTouchStartCapture?: ((event: React.TouchEvent<HTMLDivElement>) => void) | undefined;
+    onPointerDown?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerDownCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerMove?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerMoveCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerUp?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerUpCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerCancel?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerCancelCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerEnter?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerEnterCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerLeave?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerLeaveCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerOver?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerOverCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerOut?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onPointerOutCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onGotPointerCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onGotPointerCaptureCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onLostPointerCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onLostPointerCaptureCapture?: ((event: React.PointerEvent<HTMLDivElement>) => void) | undefined;
+    onScroll?: ((event: React.UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
+    onScrollCapture?: ((event: React.UIEvent<HTMLDivElement, UIEvent>) => void) | undefined;
+    onWheel?: ((event: React.WheelEvent<HTMLDivElement>) => void) | undefined;
+    onWheelCapture?: ((event: React.WheelEvent<HTMLDivElement>) => void) | undefined;
+    onAnimationStartCapture?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
+    onAnimationEnd?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
+    onAnimationEndCapture?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
+    onAnimationIteration?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
+    onAnimationIterationCapture?: ((event: React.AnimationEvent<HTMLDivElement>) => void) | undefined;
+    onTransitionEnd?: ((event: React.TransitionEvent<HTMLDivElement>) => void) | undefined;
+    onTransitionEndCapture?: ((event: React.TransitionEvent<HTMLDivElement>) => void) | undefined;
+} & import("framer-motion").MotionProps & React.RefAttributes<HTMLDivElement>, "slot" | "style" | "title" | "animate" | "transformTemplate" | "transformValues" | "children" | "initial" | "exit" | "variants" | "transition" | "onBeforeLayoutMeasure" | "onLayoutMeasure" | "onUpdate" | "onAnimationStart" | "onAnimationComplete" | "onPan" | "onPanStart" | "onPanSessionStart" | "onPanEnd" | "onTap" | "onTapStart" | "onTapCancel" | "whileTap" | "whileHover" | "onHoverStart" | "onHoverEnd" | "whileFocus" | "whileInView" | "onViewportEnter" | "onViewportLeave" | "viewport" | "drag" | "whileDrag" | "dragDirectionLock" | "dragPropagation" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragControls" | "dragSnapToOrigin" | "dragListener" | "onMeasureDragConstraints" | "_dragX" | "_dragY" | "onDragStart" | "onDragEnd" | "onDrag" | "onDirectionLock" | "onDragTransitionEnd" | "layout" | "layoutId" | "onLayoutAnimationStart" | "onLayoutAnimationComplete" | "layoutDependency" | "layoutScroll" | "layoutRoot" | "custom" | "inherit" | "ignoreStrict" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<any>>;
 export default Sheet;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { DragHandlers, MotionValue, MotionProps, AnimationOptions, Spring } from 'framer-motion';
+import { DragHandlers, MotionValue, MotionProps, Transition, Spring, motion } from 'framer-motion';
 export declare type SheetEvents = {
     onOpenStart?: () => void;
     onOpenEnd?: () => void;
@@ -23,7 +23,7 @@ export declare type SheetProps = {
     springConfig?: Omit<Spring, 'type'>;
     disableDrag?: boolean;
     prefersReducedMotion?: boolean;
-} & SheetEvents & React.HTMLAttributes<HTMLDivElement>;
+} & SheetEvents & React.ComponentPropsWithoutRef<typeof motion.div>;
 export declare type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
     children: React.ReactNode;
 };
@@ -52,7 +52,7 @@ export declare type SheetContextType = {
     callbacks: React.MutableRefObject<SheetEvents>;
     dragProps?: SheetDragProps;
     windowHeight: number;
-    animationOptions: AnimationOptions<number>;
+    animationOptions: Transition;
     reduceMotion: boolean;
 };
 declare type ContainerComponent = React.ForwardRefExoticComponent<SheetContainerProps & React.RefAttributes<any>>;

package/package.json

@@ -1,10 +1,11 @@
 {
-  "version": "1.10.2",
+  "version": "1.11.0",
   "license": "MIT",
   "name": "react-modal-sheet",
   "description": "Flexible bottom sheet component for your React apps",
   "author": "Teemu Taskula",
   "repository": "https://github.com/Temzasse/react-modal-sheet",
+  "homepage": "https://temzasse.github.io/react-modal-sheet",
   "keywords": [
     "react",
     "modal",
@@ -32,7 +33,7 @@
     "release": "np"
   },
   "peerDependencies": {
-    "framer-motion": ">=2",
+    "framer-motion": ">=6",
     "react": ">=16"
   },
   "husky": {
@@ -50,19 +51,27 @@
     "yarn": true
   },
   "devDependencies": {
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.10",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5",
     "@types/styled-components": "5.1.26",
     "csstype": "3.1.1",
-    "framer-motion": "8.4.3",
+    "framer-motion": "10.12.16",
+    "history": "5.0.0",
     "husky": "4.2.5",
+    "parcel": "2.8.3",
     "react": "18.2.0",
+    "react-aria": "3.25.0",
     "react-dom": "18.2.0",
+    "react-icons": "4.2.0",
+    "react-router": "6.0.0-beta.0",
+    "react-router-dom": "6.0.0-beta.0",
+    "react-stately": "3.23.0",
+    "react-use": "17.1.1",
     "styled-components": "5.3.6",
     "tsdx": "0.14.1",
-    "typescript": "4.9.4"
+    "typescript": "5.1.3"
   },
   "dependencies": {
-    "@react-aria/utils": "3.14.2"
+    "@react-aria/utils": "3.17.0"
   }
 }

package/src/sheet.tsx

@@ -1,13 +1,14 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
 import {
   animate,
   AnimatePresence,
-  AnimationOptions,
+  motion,
   PanInfo,
+  Transition,
   useMotionValue,
   useReducedMotion,
+  useTransform,
 } from 'framer-motion';
 
 import {
@@ -59,7 +60,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
     const windowHeight = useWindowHeight();
     const shouldReduceMotion = useReducedMotion();
     const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
-    const animationOptions: AnimationOptions<number> = reduceMotion
+    const animationOptions: Transition = reduceMotion
       ? { type: 'tween', duration: 0.01 }
       : { type: 'spring', ...springConfig };
 
@@ -68,6 +69,14 @@ const Sheet = React.forwardRef<any, SheetProps>(
     // and after that it is driven by the gestures and/or snapping
     const y = useMotionValue(0);
 
+    const zIndex = useTransform(y, value =>
+      value >= windowHeight ? -1 : 9999999
+    );
+
+    const visibility = useTransform(y, value =>
+      value >= windowHeight ? 'hidden' : 'visible'
+    );
+
     // Keep the callback fns up-to-date so that they can be accessed inside
     // the effect without including them to the dependencies array
     const callbacks = React.useRef({
@@ -228,7 +237,11 @@ const Sheet = React.forwardRef<any, SheetProps>(
 
     const sheet = (
       <SheetContext.Provider value={context}>
-        <div {...rest} ref={ref} style={{ ...styles.wrapper, ...style }}>
+        <motion.div
+          {...rest}
+          ref={ref}
+          style={{ ...styles.wrapper, zIndex, visibility, ...style }}
+        >
           <AnimatePresence>
             {/* NOTE: AnimatePresence requires us to set keys to children */}
             {isOpen
@@ -237,7 +250,7 @@ const Sheet = React.forwardRef<any, SheetProps>(
                 )
               : null}
           </AnimatePresence>
-        </div>
+        </motion.div>
       </SheetContext.Provider>
     );
 

package/src/styles.ts

@@ -7,7 +7,6 @@ const styles: { [key: string]: CSS.Properties } = {
     bottom: 0,
     left: 0,
     right: 0,
-    zIndex: 9999999,
     overflow: 'hidden',
     pointerEvents: 'none',
   },

package/src/types.tsx

@@ -2,8 +2,9 @@ import {
   DragHandlers,
   MotionValue,
   MotionProps,
-  AnimationOptions,
+  Transition,
   Spring,
+  motion,
 } from 'framer-motion';
 
 export type SheetEvents = {
@@ -33,7 +34,7 @@ export type SheetProps = {
   disableDrag?: boolean;
   prefersReducedMotion?: boolean;
 } & SheetEvents &
-  React.HTMLAttributes<HTMLDivElement>;
+  React.ComponentPropsWithoutRef<typeof motion.div>;
 
 export type SheetContainerProps = Omit<
   CommonProps,
@@ -82,7 +83,7 @@ export type SheetContextType = {
   callbacks: React.MutableRefObject<SheetEvents>;
   dragProps?: SheetDragProps;
   windowHeight: number;
-  animationOptions: AnimationOptions<number>;
+  animationOptions: Transition;
   reduceMotion: boolean;
 };