@sproutsocial/seeds-react-modal 1.1.0 → 2.0.0

package/.turbo/turbo-build.log

@@ -8,34 +8,34 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js        32.36 KB
+CJS dist/index.js        58.46 KB
 CJS dist/v1/index.js     9.86 KB
-CJS dist/v2/index.js     24.54 KB
-CJS dist/index.js.map    54.80 KB
+CJS dist/v2/index.js     50.48 KB
+CJS dist/index.js.map    201.74 KB
 CJS dist/v1/index.js.map 13.03 KB
-CJS dist/v2/index.js.map 41.40 KB
-CJS ⚡️ Build success in 279ms
-ESM dist/esm/index.js              567.00 B
+CJS dist/v2/index.js.map 188.43 KB
+CJS ⚡️ Build success in 345ms
 ESM dist/esm/v1/index.js           165.00 B
-ESM dist/esm/v2/index.js           786.00 B
+ESM dist/esm/v2/index.js           596.00 B
+ESM dist/esm/index.js              583.00 B
 ESM dist/esm/chunk-IYDY4OPB.js     7.12 KB
-ESM dist/esm/chunk-4ITF4DBY.js     20.28 KB
-ESM dist/esm/index.js.map          963.00 B
+ESM dist/esm/chunk-ETVICNHP.js     45.64 KB
 ESM dist/esm/v1/index.js.map       71.00 B
 ESM dist/esm/v2/index.js.map       71.00 B
+ESM dist/esm/index.js.map          1.05 KB
 ESM dist/esm/chunk-IYDY4OPB.js.map 12.85 KB
-ESM dist/esm/chunk-4ITF4DBY.js.map 40.16 KB
-ESM ⚡️ Build success in 280ms
+ESM dist/esm/chunk-ETVICNHP.js.map 187.52 KB
+ESM ⚡️ Build success in 354ms
 DTS Build start
-DTS ⚡️ Build success in 24663ms
-DTS dist/index.d.ts               973.00 B
-DTS dist/v1/index.d.ts            413.00 B
-DTS dist/v2/index.d.ts            1.35 KB
-DTS dist/Modal-ki8oiGbC.d.ts      2.52 KB
-DTS dist/ModalRail-5PeilhW7.d.ts  7.61 KB
-DTS dist/index.d.mts              976.00 B
-DTS dist/v1/index.d.mts           415.00 B
-DTS dist/v2/index.d.mts           1.35 KB
-DTS dist/Modal-ki8oiGbC.d.mts     2.52 KB
-DTS dist/ModalRail-5PeilhW7.d.mts 7.61 KB
-Done in 27.92s.
+DTS ⚡️ Build success in 31689ms
+DTS dist/index.d.ts                 975.00 B
+DTS dist/v1/index.d.ts              413.00 B
+DTS dist/v2/index.d.ts              1021.00 B
+DTS dist/Modal-ki8oiGbC.d.ts        2.52 KB
+DTS dist/ModalAction-BB7qJtQj.d.ts  17.39 KB
+DTS dist/index.d.mts                978.00 B
+DTS dist/v1/index.d.mts             415.00 B
+DTS dist/v2/index.d.mts             1022.00 B
+DTS dist/Modal-ki8oiGbC.d.mts       2.52 KB
+DTS dist/ModalAction-BB7qJtQj.d.mts 17.39 KB
+Done in 34.53s.

package/CHANGELOG.md

@@ -1,5 +1,187 @@
 # @sproutsocial/seeds-react-modal
 
+## 2.0.0
+
+### Major Changes
+
+- b1c3b44: ## Modal V2 Complete Rewrite
+
+  Complete architectural overhaul of Modal V2 with improved API, accessibility, animations, and mobile responsiveness.
+
+  ### Breaking Changes
+
+  #### Component Name Changes
+
+  - **Root component**: `ModalV2` renamed to `Modal`
+  - **Removed components**: `ModalClose`, `ModalCloseButton`, `ModalTrigger`
+  - **New components**: `ModalBody`, `ModalCloseWrapper`, `ModalAction`, `ModalCustomHeader`, `ModalCustomFooter`
+
+  #### Removed Exports
+
+  - **Removed z-index constants**: `DEFAULT_MODAL_Z_INDEX`, `DEFAULT_OVERLAY_Z_INDEX_OFFSET`, `MODAL_PRIORITY_Z_INDEX`
+    - These are no longer needed as Radix UI Dialog handles stacking automatically via portal DOM order
+    - If you were using these constants, remove them from your code
+    - Stacking is now managed by the order modals are opened (last opened appears on top)
+
+  #### API Changes
+
+  - **Modal root**: Now built on Radix UI Dialog primitives with simplified props
+
+    - Removed children-based header composition
+    - Added slot-based API: `title`, `subtitle`, `description` props for common use cases
+    - Added `modalTrigger` prop for trigger element
+    - Added `draggable` prop for draggable modals
+    - Added `showOverlay` prop (defaults to `true`)
+    - Added `actions` prop for floating action rail
+    - **Removed `priority` prop**: z-index management is no longer needed
+    - Added `closeButtonAriaLabel` prop (defaults to "Close")
+
+  - **ModalHeader**: Converted to slot-based API
+
+    - Now only supports `title` and `subtitle` props
+    - Removed `children` prop
+    - For custom headers, use new `ModalCustomHeader` component
+    - Automatically becomes draggable handle when `<Modal draggable={true} />`
+
+  - **ModalFooter**: Converted to slot-based API with automatic button wrapping
+
+    - `primaryButton`: Main action (auto-closes modal)
+    - `cancelButton`: Secondary action (auto-closes modal)
+    - `leftAction`: Optional left-aligned action (no auto-close, for destructive actions)
+    - For custom footers, use new `ModalCustomFooter` component
+    - At least one action prop is required (TypeScript enforced)
+
+  - **ModalBody**: New component for modal content area
+    - Replaces direct content in Modal children
+    - Provides proper scrolling behavior and padding
+
+  #### Type Changes
+
+  - All types renamed from `TypeModalV2*` to `TypeModal*`
+  - `TypeModalV2Props` → `TypeModalProps`
+  - `TypeModalV2HeaderProps` → `TypeModalHeaderProps`
+  - `TypeModalV2FooterProps` → `TypeModalFooterProps`
+  - New types: `TypeModalBodyProps`, `TypeModalDescriptionProps`, `TypeModalRailProps`, `TypeModalActionProps`
+
+  ### New Features
+
+  #### Draggable Modals
+
+  - Enable with `draggable={true}` prop
+  - Drag from header to reposition modal
+  - Constrained to viewport boundaries
+  - TypeScript enforces `showOverlay={false}` when draggable (overlay would block interaction)
+  - Automatically sets Radix `modal={false}` to allow background interaction
+
+  #### Floating Action Rail
+
+  - Always-visible floating close button
+  - Support for additional custom actions via `actions` prop
+  - Positioned on right side (desktop) or above modal (mobile)
+  - Actions defined with `iconName`, `onClick`, `aria-label`
+
+  #### Mobile Responsiveness (≤780px)
+
+  - Bottom sheet layout anchored to screen bottom
+  - Rounded top corners, flat bottom corners
+  - Rail positioned above modal
+  - Content height hugs content with scrolling
+  - Smooth slide-up animation
+
+  #### Animation System
+
+  - Built with Framer Motion `AnimatePresence`
+  - Smooth fade + scale animation (desktop)
+  - Slide-up animation (mobile)
+  - Separate animations for overlay and content
+  - Draggable modals use opacity-only animation (no transform conflict)
+
+  #### Accessibility Improvements
+
+  - Built on Radix UI Dialog primitives
+  - Automatic ARIA attributes and focus management
+  - ESC key and outside click to close (when not draggable)
+  - Required `aria-label` when no title/subtitle provided (TypeScript enforced)
+  - Subtitle automatically wrapped in `Dialog.Description`
+
+  ### Component Details
+
+  #### ModalCloseWrapper
+
+  New utility component that wraps any element and makes it close the modal when clicked. Used internally by `ModalFooter` for automatic close behavior.
+
+  ```tsx
+  <ModalCloseWrapper>
+    <Button>Close</Button>
+  </ModalCloseWrapper>
+  ```
+
+  #### ModalAction
+
+  Action button component for the floating rail. Supports two types:
+
+  - `actionType="close"`: Closes modal on click
+  - `actionType="button"`: Custom action with onClick handler
+
+  #### ModalCustomHeader & ModalCustomFooter
+
+  Base styled components for custom header/footer layouts when slot-based API isn't sufficient. Provides styling and system props support.
+
+  ### Technical Improvements
+
+  #### Improved Stacking Behavior
+
+  Modal V2 no longer uses explicit z-index values, relying instead on Radix UI Dialog's portal-based stacking:
+
+  - **Automatic stacking**: Modal elements are portaled to `<body>` and stack naturally via DOM order
+  - **Simpler integration**: No z-index conflicts with other portal-based components (tooltips, popovers, etc.)
+  - **Better composability**: Works seamlessly with new popout components and other overlays
+  - **Predictable behavior**: Last opened modal always appears on top, regardless of configuration
+
+  **Migration Note**: If you were using the `priority` prop to control modal stacking, remove it. Modals now stack in the order they're opened, which provides more predictable and intuitive behavior.
+
+  #### Performance Optimizations
+
+  - **Split rendering paths**: Non-draggable modals now use lightweight `StaticModalContent` component, avoiding unnecessary drag logic, event listeners, and boundary calculations
+  - **Conditional component loading**: Draggable functionality only loads when `draggable={true}`, reducing runtime overhead for 99% of use cases
+  - **Optimized re-renders**: Removed drag context overhead from static modals entirely
+
+  #### Type Safety Enhancements
+
+  - **Discriminated unions for prop relationships**: TypeScript enforces `showOverlay={false}` when `draggable={true}`, preventing invalid configurations at compile time
+  - **Required footer actions**: Footer type system ensures at least one action button is provided, eliminating empty footer states
+  - **Removed ambiguous APIs**: Eliminated `children` override props from `ModalHeader` and `ModalFooter`, guiding developers toward the slot-based API while providing explicit `ModalCustomHeader`/`ModalCustomFooter` components for advanced use cases
+
+  #### Code Quality
+
+  - Removed redundant `width` styled-system import (already included in LAYOUT)
+  - Added POSITION system props to ModalOverlay for better positioning control
+  - Created `MotionConfig.ts` for centralized animation variants
+  - Split styles into component-specific files for better organization
+  - Consistent component naming and structure
+  - Updated Storybook stories to use semantic theme tokens instead of raw color scale values
+
+  ### Racine Updates
+
+  - Export name corrected: `Modal` instead of `ModalV2`
+  - All type exports updated to match new names
+  - Removed z-index constant exports to match Modal V2 changes
+
+### Patch Changes
+
+- Updated dependencies [b1c3b44]
+  - @sproutsocial/seeds-react-theme@3.1.1
+  - @sproutsocial/seeds-react-box@1.1.5
+  - @sproutsocial/seeds-react-icon@1.1.5
+  - @sproutsocial/seeds-react-button@1.3.1
+
+## 1.1.1
+
+### Patch Changes
+
+- Updated dependencies [5ea5457]
+  - @sproutsocial/seeds-react-button@1.3.0
+
 ## 1.1.0
 
 ### Minor Changes