react-side-sheet-pro 0.1.2 → 0.1.3

package/README.md

@@ -94,6 +94,8 @@ export const App = () => {
     )
 }
 
+// Wrap your app with the SideSheet.Provider to manage side sheets globally
+
 export default () => (
     <SideSheet.Provider>
         <App />
@@ -101,6 +103,48 @@ export default () => (
 )
 ```
 
+## 🧩 Compound Components
+
+### `Sheet.Provider`
+
+Sheet provider component that manages the state of all side sheets in your application. It should wrap your main application component.
+
+### `Sheet.Header`
+
+Sheet header component that displays the title and can include custom actions. It also provides custom `onClick` function for a button to close the sheet.
+
+#### Header props
+
+| Name        | Required | Default   | Description                              |
+|-------------|----------|-----------|------------------------------------------|
+| `title`     | yes      |           | Title of the header.                     |
+| `onClose`   | no       | undefined | Callback function to close the sheet.    |
+| `actions`   | no       | undefined | Custom actions to render in the header.  |
+| `className` | no       | undefined | Custom CSS class for additional styling. |
+
+### `Sheet.Content`
+
+Sheet content component that wraps the main content of the side sheet. Can be styled using custom classes.
+
+#### Content props
+
+| Name        | Required | Default   | Description                               |
+|-------------|----------|-----------|-------------------------------------------|
+| `children`  | yes      |           | Content to display inside the side sheet. |
+| `className` | no       | undefined | Custom CSS class for additional styling.  |
+
+### `Sheet.Footer`
+
+Sheet footer component that can be used to display actions or additional information at the bottom of the side sheet. Can be styled using custom classes.
+
+#### Footer props
+
+| Name        | Required | Default   | Description                              |
+|-------------|----------|-----------|------------------------------------------|
+| `children`  | yes      |           | Content to display inside the footer.    |
+| `className` | no       | undefined | Custom CSS class for additional styling. |
+
+
 ## 🧪 Testing
 
 ```bash

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-side-sheet-pro",
   "description": "A flexible React SideSheet component for displaying contextual information.",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "MIT",
   "keywords": [
     "react",

package/src/components/SideSheetHeader.tsx

@@ -1,14 +1,17 @@
 import React, { ReactNode } from 'react';
 import { HiX } from 'react-icons/hi';
+import classNames from 'classnames';
 
 export const SideSheetHeader: React.FC<{
   title: string;
   onClose?: () => void;
   actions?: ReactNode;
-}> = React.memo(({ title, onClose, actions }) => (
-  <header className="sidesheet-header">
+  className?: string;
+}> = React.memo(({ title, onClose, actions, className }) => (
+  <header className={classNames('sidesheet-header', className)}>
     {onClose && (
       <button
+        type="button"
         className="sidesheet-header-close sidesheet-header-btn"
         onClick={onClose}
       >

package/src/components/SideSheetProvider.tsx

@@ -59,8 +59,10 @@ export const SideSheetProvider: React.FC<{
 
     for (const item of itemsToClose) {
       if (item.options.confirmBeforeClose) {
-        const confirmed = await item.options.confirmCallback(
-          item.options.confirmMessage
+        const confirmCallback =
+          item.options.confirmCallback ?? config.confirmCallback;
+        const confirmed = await confirmCallback(
+          item.options.confirmMessage ?? config.confirmMessage
         );
         if (!confirmed) return;
       }

package/src/constants/defaultOptions.ts

@@ -1,22 +1,24 @@
-import { SideOptions, SideSheetOptions } from '../types';
-
-export const DEFAULT_OPTIONS: Required<SideSheetOptions> = {
-  side: 'right',
-  mountStrategy: 'all',
-};
-
-export const DEFAULT_SHEET_OPTIONS: Required<SideOptions> = {
-  width: 400,
-  className: '',
-  confirmBeforeClose: false,
-  confirmMessage: 'Are you sure you want to close?',
-  confirmCallback: async (msg: string) =>
-    typeof window !== 'undefined'
-      ? Promise.resolve(window.confirm(msg))
-      : Promise.resolve(true),
-  closeOnOverlayClick: true,
-  closeOnEsc: true,
-  animationDuration: 240,
-  onOpen: () => {},
-  onClose: () => {},
-};
+import { SideOptions, SideSheetOptions } from '../types';
+
+export const DEFAULT_OPTIONS: Required<SideSheetOptions> = {
+  side: 'right',
+  mountStrategy: 'all',
+  confirmMessage: 'Are you sure you want to close?',
+  confirmCallback: async (msg: string) =>
+      typeof window !== 'undefined'
+          ? Promise.resolve(window.confirm(msg))
+          : Promise.resolve(true),
+};
+
+export const DEFAULT_SHEET_OPTIONS: Required<SideOptions> = {
+  width: 400,
+  className: '',
+  confirmBeforeClose: false,
+  confirmMessage: null,
+  confirmCallback: null,
+  closeOnOverlayClick: true,
+  closeOnEsc: true,
+  animationDuration: 240,
+  onOpen: () => {},
+  onClose: () => {},
+};

package/src/types/index.ts

@@ -5,14 +5,16 @@ export type Sides = 'left' | 'right';
 export interface SideSheetOptions {
   side: Sides;
   mountStrategy: 'all' | 'top-only';
+  confirmMessage: string;
+  confirmCallback: (message: string) => Promise<boolean>;
 }
 
 export interface SideOptions {
   width?: number;
   className?: string;
   confirmBeforeClose?: boolean;
-  confirmMessage?: string;
-  confirmCallback?: (message: string) => Promise<boolean>;
+  confirmMessage?: string | null;
+  confirmCallback?: ((message: string) => Promise<boolean>) | null;
   closeOnOverlayClick?: boolean;
   closeOnEsc?: boolean;
   animationDuration?: number;