3.0.0 Alpha Release / Announcement

Svelte Bottom Sheet 3.0.0-alpha.1

Hey!

A few months have passed. A lot of thought has gone into this new version. I am happy to announce Svelte Bottom Sheet 3.0.0-announcement/preview with fewer flaws, more configuration options, and more!

It fundamentally changes how the sheet works and behaves.

Before You EVEN CONSIDER Upgrading

Svelte Bottom Sheet 3.0.0 takes a different approach than previous versions. A lot of built-in styles and assumptions have been removed in favor of flexibility and user control. The goal is to make the library less opinionated and allow developers to customize nearly every aspect of the sheet.

However, this freedom comes with tradeoffs. Existing implementations that relied on internal styles or behavior may require additional work to migrate. In some cases, functionality that worked out of the box in previous versions now needs to be implemented by the user.

I am still evaluating whether this is the right long-term direction for the library. While the increased flexibility solves many limitations of previous versions, it also introduces compatibility concerns and a steeper migration path.

When 3.0.0 reaches production readiness, you should carefully consider whether the additional customization and flexibility are worth the migration effort for your project, or whether staying on the previous version better fits your needs.

This version includes bugs, untested features, and features that are not yet implemented.

Not for production use - everything is subject to change.

Usage

This verison isn't being released on NPM.
Download it and check out the migration guide.

target Branch:

Introduced Features

• disableBackgroundInteraction Flag: Default: false - Allows you to scroll the background, which wasn't possible in previous versions.
• disableClickOutside Flag: Default: false - Allows you to disable closing the sheet when clicking outside of it.
• disableFocusTrap Flag: Default: false - Allows you to disable the focus trap.
• disableEscape Flag: Default: false - Allows you to disable closing the sheet when pressing Escape.
• onlyTopSheetInteractive Flag: Default: true - Decide whether a nested sheet which isn't at the top (behind) should be draggable.
• child-snippets: Child snippets allow you to render the components in your own code while providing a property object that you can use and modify.
• enableScrollDragTakeover Flag: Default: true - Controls whether a scrollable sheet can switch from scrolling to dragging. #48
• Portal: The BottomSheet.Sheet now uses a portal and is mounted always on top
• Imports: Added new import options that don't include unnecessary type exports.
• Custom Animations: For the sheet you can now add custom properties to the translate animation and also custom properties for the overlay oapcity animation.

import * as BottomSheet from 'svelte-bottom-sheet';
or use
import { BottomSheet } from '$lib/index.js';

Child Snippet Example

<BottomSheetV3.Content>
    {#snippet child({ props })}
      <div {...props}>
        // Content
      </div>
    {/snippet}
</BottomSheetV3.Content>

Fixes

• disableClosing Flag flaws: Based on current testing, disableClosing now prevents closing in every way without known edge cases (except in dev mode).
• Scroll takeover fix: No longer causes lag or flickering on mobile devices. #48
• Massive event quirks: Reduced event-related quirks to a minimum, improving overall performance.
• Drag Start/End Events: Fixed a issue where the events would be falsly called
• Opposit direciton content scrolling: You are now able to scroll the content opposit to the sheets drag direction without starting drags by accident

Breaking Changes

• Animations: The custom fly animation is no longer used. Animations inside the sheet are now more consistent, although different. We also want to provide an easy way to customize transitions.
• Settings: All settings are now passed directly as component props instead of through a settings object. Compatibility features are being considered.
• Handle: The handle no longer has hardcoded positions such as left, right, or top, supporting the vision of greater flexibility.
• Styles: Unnecessary styles such as flexbox layouts have been removed to give users more freedom. If you relied on those styles, you now need to implement them yourself.
• Starting Snappoint: Now won't always add 1.
• z-index: Since we use portals now, we don't ship with a pre-defined z-index value.

Known Issues

• Extensive testing on Safari, Firefox, and Chrome for mobile devices is still missing.
• Documentation has not been written yet.

Things Still to Consider / Coming Soon

• It still needs to be decided where compatibility features should be added.
• The handle currently has no hardcoded position, which supports the vision of flexibility and gives users more freedom, but would break current implementations.

Migration guide (Not production ready)

1. Spread all settings object on the component
2. Do missing styling

NOTE: This post might not include all changes, issues and things to consider, but certainly most.

A more in-depth post about scroll takeover (#48 ) and its challenges / limits might release in the future.