Sort / filter

A panel a button opens over the page: a bottom sheet on a phone, a side sheet from 640.

Live: a branch picker

Code

// a 'use client' island; the page around it stays a Server Component
import { useState } from 'react'
import UkSheet from '@/components/uikit/UkSheet'
import UkButton from '@/components/uikit/UkButton/UkButton';

export default function BranchPicker() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <UkButton type="button"
        aria-haspopup="dialog" aria-expanded={open} aria-controls="branch-sheet"
        onClick={() => setOpen(true)} variant="outline">
        בחירת סניף
      </UkButton>
      <UkSheet
        id="branch-sheet"
        open={open}
        onClose={() => setOpen(false)}        // once per closing, whatever closed it
        title="בחירת סניף"                    // the dialog's name (aria-labelledby)
        describedBy="branch-intro"
        footer={<>
          <UkButton type="button" data-uk-sheet-close="" variant="text">ביטול</UkButton>
          <UkButton type="submit" form="branch-form">בחירת הסניף</UkButton>
        </>}
      >
        <p id="branch-intro">בחרו את הסניף הקרוב אליכם.</p>
        <form id="branch-form" onSubmit={(e) => { e.preventDefault(); /* keep the choice */ setOpen(false) }}>
          …radios…
        </form>
      </UkSheet>
    </>
  )
}

Props

• openbooleanrequired
  True opens it (showModal()); turning it false closes it.
• onClose() => voidrequired
  The dialog's own close event, once per closing, whatever closed it: the ×, Esc, a tap on the backdrop, a swipe, the Android back button (the dialog's cancel), a [data-uk-sheet-close] button, open turning false. Set open to false here.
• titleReactNode
  The head's text, in a <p> (not a heading: the page keeps its own outline); its id is the dialog's aria-labelledby. Without it, aria-label is required (TS checks).
• aria-labelstring
  The dialog's name when there is no visible title.
• childrenReactNoderequired
  The body. It scrolls by itself (data-lenis-prevent, overscroll-behavior: contain), padded 1rem by 1.25rem, and mounts on opening, unmounts on closing.
• footerReactNode
  A foot that stays at the bottom, with a hairline over it and the safe-area padding under it. One child sits at the end; two spread to the ends (a quiet one at the start, the action at the end). A button with data-uk-sheet-close closes the sheet.
• side'end' | 'start' | 'bottom'default 'end'
  Where it comes from, from 640: a full-height side sheet from the inline end (the left in RTL) or start, or a bottom sheet, centred and --uk-sheet-w wide. On a phone it is always the bottom sheet.
• swipebooleandefault true
  The grip and swipe down to close, on a bottom sheet (a phone, or side="bottom" on a touch screen). The head drags; the body drags only when nothing under the finger is scrolled down (the body, or a box inside it with its own scroll), decided on the first move; a slider thumb is left alone. Past a quarter of its height, or a flick (still moving as the finger lifts), it slides out, else it springs back; a second finger puts it back too. Touch only.
• maxHeightstringdefault 88dvh
  The bottom sheet's height cap. Sets --uk-sheet-max-h on this sheet.
• widthstringdefault 26rem
  The side sheet's width from 640, never more than the screen less 2rem. Sets --uk-sheet-w on this sheet.
• closeLabelstringdefault 'סגירה'
  The ×'s name for a screen reader.
• noteReactNode
  An sr-only description, read when the sheet opens (aria-describedby). UkFilters passes "כל שינוי חל מיד על התוצאות".
• describedBystring
  The id of a visible element in the body that describes the sheet; joins note in aria-describedby.
• liveReactNode
  A polite live region inside the modal, always mounted, so opening announces nothing. A modal makes the page behind it inert, its live regions included: UkFilters puts its count here.
• initialFocusRefObject<HTMLElement | null>default the ×
  What takes focus on opening. The × by default, so no keyboard pops up on a phone.
• keepMountedbooleandefault false
  Keep the content mounted while closed, so a half-filled form survives a swipe.
• idstring
  The dialog's id, for the trigger's aria-controls.
• classNamestring
  More classes on the <dialog>: a kit's hook (uk-filters__sheet).