react-modal-sheet 5.0.0 → 5.1.1

package/README.md

@@ -138,6 +138,7 @@ Also, by constructing the sheet from smaller pieces makes it easier to apply any
 | `prefersReducedMotion`  | no       | false                                | Skip sheet animations (sheet instantly snaps to desired location).                                                                                                                                                                                                                                                              |
 | `dragVelocityThreshold` | no       | 500                                  | How fast the sheet must be flicked down to close. Higher values make the sheet harder to close.                                                                                                                                                                                                                                 |
 | `dragCloseThreshold`    | no       | 0.6                                  | The portion of the sheet which must be dragged off-screen before it will close.                                                                                                                                                                                                                                                 |
+| `unstyled`              | no       | false                                | Remove all decorative styles and only apply base functional styles. Useful when you want to completely customize the sheet appearance.                                                                                                                                                                                          |
 
 ## ⚙️ Methods and properties
 
@@ -283,6 +284,35 @@ Sheet header acts as a drag target and has a dragging direction indicator. Rende
 | ------------- | -------- | ------- | ---------------------------------- |
 | `disableDrag` | no       | false   | Disable drag for the sheet header. |
 
+### `Sheet.DragIndicator`
+
+Sheet drag indicator renders two small animated lines that indicate the dragging direction. This component is automatically included in `Sheet.Header` but can be used standalone for custom header designs. The indicator lines animate with the sheet's drag state to provide visual feedback.
+
+> 🖥 Rendered element: Two `motion.span` elements.
+
+#### Usage example
+
+```tsx
+function CustomHeaderExample() {
+  return (
+    <Sheet>
+      <Sheet.Container>
+        <Sheet.Header>
+          <div style={{ padding: '16px', textAlign: 'center' }}>
+            <h2>Custom Header</h2>
+            <Sheet.DragIndicator />
+          </div>
+        </Sheet.Header>
+        <Sheet.Content>
+          <p>Sheet content goes here...</p>
+        </Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop />
+    </Sheet>
+  );
+}
+```
+
 ### `Sheet.Content`
 
 Sheet content acts as a drag target and handles scrollable content internally. It automatically manages scroll behavior and keyboard avoidance.
@@ -478,6 +508,61 @@ function Example() {
 
 You can add your own styles or override the default sheet styles via the exposed class names. Note that you might need to use `!important` for style overrides since the inner styles are applied as inline styles which have higher specificity.
 
+#### Unstyled mode
+
+For complete control over the sheet's appearance, you can use the `unstyled` prop to remove all decorative styles while keeping only the essential functional styles.
+
+When `unstyled={true}` is set on the root `Sheet` component, it removes decorative styles like: border radius, shadows, and background colors:
+
+```tsx
+function UnstyledExample() {
+  return (
+    <Sheet unstyled>
+      <Sheet.Container>
+        <Sheet.Header />
+        <Sheet.Content>{/* Your content */}</Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop />
+    </Sheet>
+  );
+}
+```
+
+The `unstyled` prop can also be applied to individual sheet components to selectively remove their decorative styles:
+
+```tsx
+function SelectiveUnstyledExample() {
+  return (
+    <Sheet>
+      <Sheet.Container unstyled>
+        <Sheet.Header />
+        <Sheet.Content>{/* Your content */}</Sheet.Content>
+      </Sheet.Container>
+      {/* Keep the backdrop styled */}
+      <Sheet.Backdrop />
+    </Sheet>
+  );
+}
+```
+
+This is particularly useful when building custom designs or when integrating with design systems that require complete control over styling.
+
+You can also remove all styles at the root level and then override it for individual components if you want to keep some default styles:
+
+```tsx
+function MixedUnstyledExample() {
+  return (
+    <Sheet unstyled>
+      <Sheet.Container>
+        <Sheet.Header />
+        <Sheet.Content>{/* Your content */}</Sheet.Content>
+      </Sheet.Container>
+      <Sheet.Backdrop unstyled={false} />
+    </Sheet>
+  );
+}
+```
+
 ### CSS Modules
 
 ```tsx
@@ -527,6 +612,12 @@ You can also use vanilla CSS to override the styles by targeting the exposed cla
 .react-modal-sheet-header {
   /* custom styles */
 }
+.react-modal-sheet-header-container {
+  /* custom styles */
+}
+.react-modal-sheet-drag-indicator-container {
+  /* custom styles */
+}
 .react-modal-sheet-drag-indicator {
   /* custom styles */
 }

package/dist/index.d.mts

@@ -1,16 +1,18 @@
-import { EasingDefinition, motion, MotionProps, MotionValue } from 'motion/react';
-import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, RefObject } from 'react';
+import { EasingDefinition, motion, MotionValue } from 'motion/react';
+import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, FunctionComponent, HTMLAttributes, RefObject } from 'react';
 
 type SheetDetent = 'default' | 'full' | 'content';
-type CommonProps = MotionProps & {
+type CommonProps = {
     className?: string;
+    unstyled?: boolean;
 };
-type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+type MotionCommonProps = Omit<ComponentPropsWithoutRef<typeof motion.div>, 'initial' | 'animate' | 'exit'>;
 interface SheetTweenConfig {
     ease: EasingDefinition;
     duration: number;
 }
 type SheetProps = {
+    unstyled?: boolean;
     avoidKeyboard?: boolean;
     children: ReactNode;
     detent?: SheetDetent;
@@ -33,38 +35,40 @@ type SheetProps = {
     onOpenEnd?: () => void;
     onOpenStart?: () => void;
     onSnap?: (index: number) => void;
-} & MotionDivProps;
-type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
+} & MotionCommonProps;
+type SheetContainerProps = MotionCommonProps & CommonProps & {
     children: ReactNode;
 };
-type SheetDraggableProps = MotionDivProps & {
+type SheetHeaderProps = MotionCommonProps & CommonProps & {
     children?: ReactNode;
     disableDrag?: boolean;
 };
-type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
-type SheetStateInfo = {
-    scrollPosition?: 'top' | 'bottom' | 'middle';
-    currentSnap?: number;
-};
-type SheetContentScrollableProps = MotionDivProps & {
+type SheetContentProps = MotionCommonProps & CommonProps & {
     disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
     disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
     scrollRef?: RefObject<HTMLDivElement | null>;
 };
+type SheetBackdropProps = MotionCommonProps & CommonProps;
+type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> & CommonProps;
+type SheetStateInfo = {
+    scrollPosition?: 'top' | 'bottom' | 'middle';
+    currentSnap?: number;
+};
 type SheetSnapPoint = {
     snapIndex: number;
     snapValue: number;
     snapValueY: number;
 };
+type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
 type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
-type DraggableComponent = ForwardRefExoticComponent<SheetDraggableProps & RefAttributes<any>>;
+type HeaderComponent = ForwardRefExoticComponent<SheetHeaderProps & RefAttributes<any>>;
 type BackdropComponent = ForwardRefExoticComponent<SheetBackdropProps & RefAttributes<any>>;
-type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
-type ContentScrollableComponent = ForwardRefExoticComponent<SheetContentScrollableProps & RefAttributes<any>>;
+type ContentComponent = ForwardRefExoticComponent<SheetContentProps & RefAttributes<any>>;
 interface SheetCompoundComponent {
     Container: ContainerComponent;
-    Header: DraggableComponent;
-    Content: ContentScrollableComponent;
+    Header: HeaderComponent;
+    DragIndicator: FunctionComponent<SheetDragIndicatorProps>;
+    Content: ContentComponent;
     Backdrop: BackdropComponent;
 }
 type SheetCompound = SheetComponent & SheetCompoundComponent;
@@ -76,7 +80,5 @@ interface SheetRef {
     snapTo: (index: number) => Promise<void>;
 }
 declare const Sheet: SheetCompound;
-type SheetHeaderProps = SheetDraggableProps;
-type SheetContentProps = SheetDraggableProps;
 
-export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo };
+export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetDetent, type SheetDragIndicatorProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo, type SheetTweenConfig };

package/dist/index.d.ts

@@ -1,16 +1,18 @@
-import { EasingDefinition, motion, MotionProps, MotionValue } from 'motion/react';
-import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, RefObject } from 'react';
+import { EasingDefinition, motion, MotionValue } from 'motion/react';
+import { ForwardRefExoticComponent, ReactNode, ComponentPropsWithoutRef, RefAttributes, FunctionComponent, HTMLAttributes, RefObject } from 'react';
 
 type SheetDetent = 'default' | 'full' | 'content';
-type CommonProps = MotionProps & {
+type CommonProps = {
     className?: string;
+    unstyled?: boolean;
 };
-type MotionDivProps = ComponentPropsWithoutRef<typeof motion.div>;
+type MotionCommonProps = Omit<ComponentPropsWithoutRef<typeof motion.div>, 'initial' | 'animate' | 'exit'>;
 interface SheetTweenConfig {
     ease: EasingDefinition;
     duration: number;
 }
 type SheetProps = {
+    unstyled?: boolean;
     avoidKeyboard?: boolean;
     children: ReactNode;
     detent?: SheetDetent;
@@ -33,38 +35,40 @@ type SheetProps = {
     onOpenEnd?: () => void;
     onOpenStart?: () => void;
     onSnap?: (index: number) => void;
-} & MotionDivProps;
-type SheetContainerProps = Omit<CommonProps, 'initial' | 'animate' | 'exit' | 'onAnimationComplete'> & {
+} & MotionCommonProps;
+type SheetContainerProps = MotionCommonProps & CommonProps & {
     children: ReactNode;
 };
-type SheetDraggableProps = MotionDivProps & {
+type SheetHeaderProps = MotionCommonProps & CommonProps & {
     children?: ReactNode;
     disableDrag?: boolean;
 };
-type SheetBackdropProps = Omit<CommonProps, 'initial' | 'animate' | 'exit'>;
-type SheetStateInfo = {
-    scrollPosition?: 'top' | 'bottom' | 'middle';
-    currentSnap?: number;
-};
-type SheetContentScrollableProps = MotionDivProps & {
+type SheetContentProps = MotionCommonProps & CommonProps & {
     disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
     disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
     scrollRef?: RefObject<HTMLDivElement | null>;
 };
+type SheetBackdropProps = MotionCommonProps & CommonProps;
+type SheetDragIndicatorProps = HTMLAttributes<HTMLDivElement> & CommonProps;
+type SheetStateInfo = {
+    scrollPosition?: 'top' | 'bottom' | 'middle';
+    currentSnap?: number;
+};
 type SheetSnapPoint = {
     snapIndex: number;
     snapValue: number;
     snapValueY: number;
 };
+type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
 type ContainerComponent = ForwardRefExoticComponent<SheetContainerProps & RefAttributes<any>>;
-type DraggableComponent = ForwardRefExoticComponent<SheetDraggableProps & RefAttributes<any>>;
+type HeaderComponent = ForwardRefExoticComponent<SheetHeaderProps & RefAttributes<any>>;
 type BackdropComponent = ForwardRefExoticComponent<SheetBackdropProps & RefAttributes<any>>;
-type SheetComponent = ForwardRefExoticComponent<SheetProps & RefAttributes<any>>;
-type ContentScrollableComponent = ForwardRefExoticComponent<SheetContentScrollableProps & RefAttributes<any>>;
+type ContentComponent = ForwardRefExoticComponent<SheetContentProps & RefAttributes<any>>;
 interface SheetCompoundComponent {
     Container: ContainerComponent;
-    Header: DraggableComponent;
-    Content: ContentScrollableComponent;
+    Header: HeaderComponent;
+    DragIndicator: FunctionComponent<SheetDragIndicatorProps>;
+    Content: ContentComponent;
     Backdrop: BackdropComponent;
 }
 type SheetCompound = SheetComponent & SheetCompoundComponent;
@@ -76,7 +80,5 @@ interface SheetRef {
     snapTo: (index: number) => Promise<void>;
 }
 declare const Sheet: SheetCompound;
-type SheetHeaderProps = SheetDraggableProps;
-type SheetContentProps = SheetDraggableProps;
 
-export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo };
+export { Sheet, type SheetBackdropProps, type SheetContainerProps, type SheetContentProps, type SheetDetent, type SheetDragIndicatorProps, type SheetHeaderProps, type SheetProps, type SheetRef, type SheetSnapPoint, type SheetStateInfo, type SheetTweenConfig };