npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2025 – Pkg Stats / Ryan Hefner

@element-public/react-side-sheet

v5.68.10-alpha.1

Published

Side Sheet component for Element React

Downloads

421

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

arkadiusz.slowikowskiarkadiusz.slowikowskislowikowskiarkadiuszslowikowskiarkadiusz

Keywords

Readme

SideSheet

Description

Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.

See live demos on storybook

Storybook SideSheet Demos

Install from Artifactory

  • Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
    • Verify your token is correctly set up in your .npmrc as per the link above
  • Verify you have the @element scope configured in your .npmrc
    • @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
  • Install the component and themes bundles
    • npm i @element/react-components @element/themes
      • alternatively install the component individually along with the themes bundle npm i @element/react-side-sheet @element/themes

Variants

All variants of SideSheet behave and look like the modal variant at smaller screen sizes.

The elevated and coplanar variants requires a parent wrapper context for layout.

All SideSheet require a container context, which can typically be <body> in most instances.

Accessibility Concerns

To keep the user-experience for SideSheet as accessible as possible, it strives to do the following when SideSheet is at small-screen size and always during the modal variant:

  1. On Side Sheet open, set focus on the Side Sheet Dismiss button
  2. On Side Sheet close, return focus to the last focused element
  3. While open, prevent mouse clicks outside the side sheet
  4. While open, prevent tabbing to outside the Side Sheet
  5. Allow the ESC Key to close the Side Sheet

It is important that upon closing the SideSheetReturnFocus event be listened for and return focus managed appropriately in the surrounding application context.

Props

SideSheet

The SideSheetWrapper component is necessary for the elevated or coplanar variants.

Example pseudo-code:

<body>
    <header></header>
    <SideSheetWrapper variant='elevated'>
        <main></main>
        <SideSheet variant='elevated'></SideSheet>
    </SideSheetWrapper>
    <footer></footer>
</body>

The SideSheetWrapper component can be omitted entirely for modal and floating variants.

Example pseudo-code:

<body>
    <header></header>
    <main></main>
    <SideSheet></SideSheet>
    <footer></footer>
</body>

SideSheetContainer

The SideSheetContainer component is used as a substitute for a typical <body> context. It is required when attachContainerClassesToBody is set to false on SideSheet.

The main responsibility of SideSheetContainer is to control scrolling when the background content is obscured by modal content. This happens at all small-screen sizes for all variants and for the modal variant at all screen sizes.

<body>
    <SideSheetContainer>
        <header></header>
        <SideSheetWrapper variant='coplanar'>
            <main></main>
            <SideSheet variant='coplanar'></SideSheet>
        </SideSheetWrapper>
        <footer></footer>
    </SideSheetContainer>
</body>

Further Reading

Side Sheet behaves like a typical modal component at small-screen sizes, and always when in the modal variant.

  • https://material.io/components/sheets-side
  • https://bitsofco.de/accessible-modal-dialog/
  • http://web-accessibility.carnegiemuseums.org/code/dialogs/
  • https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/
  • https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element

Side Sheet Props

| Name | Type | Default | Required | Description | | ---------------------------- | ----------------------- | -------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | allowOutsideClick | boolean | true | false | Set to false to stop Side Sheet from closing when scrim is clicked when the variant is modal. | | attachContainerClassesToBody | boolean | true | false | Add classes to body for when side-sheet-container is not present in DOM. | | autoFocus | boolean | true | false | The close button should automatically receive focus when the Bottom Sheet opens. | | className | string | undefined | false | The css class name to be passed through to the component markup. | | headlineText | string|React.ReactNode | null | false | The text to be displayed along side the dismiss button in SideSheet and used for ARIA 'labeled-by`. If using anything other than a string, please make sure to include text to maintain W3C compliance and test with a screen-reader for accuracy. | | open | boolean | false | false | Make the SideSheet visible using the experience set in variant prop. | | position | string | 'right' | false | Location of the side-sheet anchor point.Accepted Values: left, right | | returnFocusSelector | string | '.lmnt-side-sheet-trigger' | false | DOM selector to provide a target to return focus. Accepts any valid query (see mdn docs for Element.querySelector). If omitted focus will return to the last focused element upon closing. | | variant | string | 'modal' | false | The behavior styles available to side sheet: one of modal, floating, elevated, or coplanar.Accepted Values: modal, elevated, floating, coplanar |

Side Sheet Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ------------------------------------------ | | children | React.ReactNode | null | false | Primary content. Accepts any valid markup. |

Side Sheet Events

| Name | Default | Required | Params | Description | | ------- | ------- | -------- | ------ | ------------------------------------------------------------ | | onClose | null | false | | A provided function to fire when Side Sheet becomes hidden. | | onOpen | null | false | | A provided function to fire when Side Sheet becomes visible. |

Side Sheet Container Props

| Name | Type | Default | Required | Description | | ------------------ | ------- | --------- | -------- | ---------------------------------------------------------------------------------------------- | | className | string | undefined | false | The css class name to be passed through to the component markup. | | isSideSheetVisible | boolean | false | false | This prop is tied to the state of SideSheet and should be managed accordingly. | | variant | string | null | false | The behavior styles available to side sheet: one of modal (with room to grow in the future). |

Side Sheet Container Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ------------------------------------------ | | children | React.ReactNode | null | false | Primary content. Accepts any valid markup. |

Side Sheet Wrapper Props

| Name | Type | Default | Required | Description | | --------- | ------ | --------- | -------- | ------------------------------------------------------------------------------ | | className | string | undefined | false | The css class name to be passed through to the component markup. | | variant | string | null | false | The behavior styles available to side sheet: one of elevated, or coplanar. |

Side Sheet Wrapper Render Props

| Name | Type | Default | Required | Description | | -------- | --------------- | ------- | -------- | ------------------------------------------ | | children | React.ReactNode | null | false | Primary content. Accepts any valid markup. |