Sheet

"use client";

import { Button } from "@react-md/core/button/Button";
import { DialogContent } from "@react-md/core/dialog/DialogContent";
import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
import { Sheet } from "@react-md/core/sheet/Sheet";
import { Typography } from "@react-md/core/typography/Typography";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  const { toggled, enable, disable } = useToggle();

  return (
    <>
      <Button onClick={enable}>Show</Button>
      <Sheet aria-label="Example" visible={toggled} onRequestClose={disable}>
        <DialogHeader>
          <DialogTitle>Title</DialogTitle>
        </DialogHeader>
        <DialogContent>
          <Typography>Hello, world!</Typography>
        </DialogContent>
      </Sheet>
    </>
  );
}

"use client";

import { Box } from "@react-md/core/box/Box";
import { Button } from "@react-md/core/button/Button";
import { DialogContent } from "@react-md/core/dialog/DialogContent";
import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
import { Option } from "@react-md/core/form/Option";
import { Select } from "@react-md/core/form/Select";
import { Sheet } from "@react-md/core/sheet/Sheet";
import { type SheetPosition } from "@react-md/core/sheet/styles";
import { Typography } from "@react-md/core/typography/Typography";
import { useToggle } from "@react-md/core/useToggle";
import { type ReactElement, useState } from "react";

export default function SheetPositionsExample(): ReactElement {
  const { toggled, enable, disable } = useToggle();
  const [position, setPosition] = useState<SheetPosition>("left");

  return (
    <Box stacked>
      <Button onClick={enable}>Show</Button>
      <Select
        label="Sheet Position"
        value={position}
        onChange={(event) => {
          setPosition(event.currentTarget.value);
        }}
      >
        {positions.map((position) => (
          <Option key={position} value={position}>
            {position}
          </Option>
        ))}
      </Select>
      <Sheet
        aria-label="Example"
        position={position}
        visible={toggled}
        onRequestClose={disable}
      >
        <DialogHeader>
          <DialogTitle>Title</DialogTitle>
        </DialogHeader>
        <DialogContent>
          <Typography>Hello, world!</Typography>
        </DialogContent>
      </Sheet>
    </Box>
  );
}

const positions: readonly SheetPosition[] = ["left", "right", "top", "bottom"];

"use client";

import { Box } from "@react-md/core/box/Box";
import { Button } from "@react-md/core/button/Button";
import { DialogContent } from "@react-md/core/dialog/DialogContent";
import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
import { Option } from "@react-md/core/form/Option";
import { Select } from "@react-md/core/form/Select";
import { Sheet } from "@react-md/core/sheet/Sheet";
import { type SheetHorizontalSize } from "@react-md/core/sheet/styles";
import { Typography } from "@react-md/core/typography/Typography";
import { useToggle } from "@react-md/core/useToggle";
import CloseIcon from "@react-md/material-icons/CloseIcon";
import { type ReactElement, useState } from "react";

export default function HorizontalSizeExample(): ReactElement {
  const { toggled, enable, disable } = useToggle();
  const [horizontalSize, setHorizontalSize] =
    useState<SheetHorizontalSize>("media");

  return (
    <Box stacked>
      <Button onClick={enable}>Show</Button>
      <Select
        label="Sheet Position"
        value={horizontalSize}
        onChange={(event) => {
          setHorizontalSize(event.currentTarget.value);
        }}
      >
        {horizontalSizes.map((size) => (
          <Option key={size} value={size}>
            {size}
          </Option>
        ))}
      </Select>
      <Sheet
        aria-label="Example"
        // position="right"
        horizontalSize={horizontalSize}
        visible={toggled}
        onRequestClose={disable}
      >
        <DialogHeader>
          <DialogTitle>Title</DialogTitle>
          <Button aria-label="Close" buttonType="icon" onClick={disable}>
            <CloseIcon />
          </Button>
        </DialogHeader>
        <DialogContent>
          <Typography>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
            feugiat diam et mauris dapibus bibendum. Praesent vehicula maximus
            egestas. Mauris lacinia lectus elit, quis placerat massa egestas sit
            amet. Sed massa ex, commodo sed orci nec, accumsan sagittis sem.
            Curabitur malesuada urna sit amet leo vehicula lobortis.
            Pellentesque habitant morbi tristique senectus et netus et malesuada
            fames ac turpis egestas. Integer fringilla tincidunt nunc, in
            efficitur nibh placerat quis. Vivamus a est quis nunc vestibulum
            facilisis. Ut ut massa a ante ultricies imperdiet. Orci varius
            natoque penatibus et magnis dis parturient montes, nascetur
            ridiculus mus. Ut viverra volutpat ex, eu scelerisque tortor
            interdum non. Ut cursus mi id turpis tristique, sed fringilla urna
            fermentum. Suspendisse potenti. Suspendisse hendrerit scelerisque
            porttitor. Duis nisi dolor, ultrices quis fermentum ac, interdum eu
            nisl.
          </Typography>
          <Typography>
            Donec nec ultricies tellus. Suspendisse potenti. Cras condimentum,
            arcu tempus ornare aliquet, purus elit bibendum justo, eu pretium
            mauris leo ac ligula. Sed imperdiet odio in vulputate vestibulum.
            Integer vitae commodo elit. Phasellus gravida eros at dolor varius,
            in tempor metus tincidunt. Nulla dictum nec mi in dignissim. Duis
            non mauris a turpis posuere tempor ut vel eros. Donec volutpat velit
            sapien, et varius velit viverra sit amet. Aenean id magna sit amet
            velit rutrum porta in a tortor. Integer vel feugiat tortor. Nullam
            posuere, nulla ut viverra dignissim, eros quam mattis erat, eget
            pretium felis erat non mi. Proin varius est id pretium volutpat.
            Aliquam erat volutpat.
          </Typography>
          <Typography>
            Mauris porta mauris et feugiat blandit. Sed placerat non mauris at
            ultrices. Fusce malesuada sem ut nulla malesuada aliquam.
            Pellentesque fermentum aliquam lorem, at semper ex facilisis ac.
            Fusce laoreet odio vitae sem dictum, at sagittis erat imperdiet.
            Nullam lacinia tortor at diam tempus malesuada. Aliquam vitae
            euismod mi. Integer ac enim commodo felis sollicitudin condimentum
            id at ex. Mauris lobortis est nunc, et scelerisque eros malesuada
            vel.
          </Typography>
          <Typography>
            Integer vel mi nulla. Pellentesque eu tellus quam. Sed sagittis erat
            neque, quis varius justo mattis sed. Donec ac sollicitudin ante.
            Duis sollicitudin suscipit nulla, sed feugiat felis vehicula quis.
            Nunc ullamcorper hendrerit dolor ut consectetur. Praesent arcu diam,
            placerat non sagittis vel, varius ut turpis. Maecenas id mi at nulla
            dapibus rhoncus ac nec nulla. Donec mattis mi convallis odio
            elementum, at pulvinar leo ornare. Praesent consequat augue in
            tellus sodales fermentum.
          </Typography>
          <Typography>
            Sed ultricies nibh ut leo dapibus, eget volutpat lectus auctor.
            Etiam egestas urna nec neque posuere, eget feugiat lacus aliquet.
            Aliquam nunc nulla, faucibus at libero et, dapibus vulputate nisi.
            Cras sit amet sagittis tortor. Donec nec velit nulla. Mauris dictum
            vel ipsum quis bibendum. Aenean elementum nisi urna, vel finibus
            lacus iaculis ut.
          </Typography>
        </DialogContent>
      </Sheet>
    </Box>
  );
}

const horizontalSizes: readonly SheetHorizontalSize[] = [
  "none",
  "media",
  "touch",
  "static",
];

"use client";

import { Box } from "@react-md/core/box/Box";
import { Button } from "@react-md/core/button/Button";
import { DialogContent } from "@react-md/core/dialog/DialogContent";
import { DialogHeader } from "@react-md/core/dialog/DialogHeader";
import { DialogTitle } from "@react-md/core/dialog/DialogTitle";
import { Option } from "@react-md/core/form/Option";
import { Select } from "@react-md/core/form/Select";
import { Sheet } from "@react-md/core/sheet/Sheet";
import { type SheetVerticalSize } from "@react-md/core/sheet/styles";
import { Typography } from "@react-md/core/typography/Typography";
import { useToggle } from "@react-md/core/useToggle";
import CloseIcon from "@react-md/material-icons/CloseIcon";
import { type ReactElement, useState } from "react";

export default function VerticalSizeExample(): ReactElement {
  const { toggled, enable, disable } = useToggle();
  const [verticalSize, setVertical] =
    useState<SheetVerticalSize>("recommended");

  return (
    <Box stacked>
      <Button onClick={enable}>Show</Button>
      <Select
        label="Vertical Size"
        value={verticalSize}
        onChange={(event) => {
          setVertical(event.currentTarget.value);
        }}
      >
        {verticalSizes.map((size) => (
          <Option key={size} value={size}>
            {size}
          </Option>
        ))}
      </Select>
      <Sheet
        aria-label="Example"
        position="top"
        verticalSize={verticalSize}
        visible={toggled}
        onRequestClose={disable}
      >
        <DialogHeader>
          <DialogTitle>Title</DialogTitle>
          <Button aria-label="Close" buttonType="icon" onClick={disable}>
            <CloseIcon />
          </Button>
        </DialogHeader>
        <DialogContent>
          <LoremIpsum />
        </DialogContent>
      </Sheet>
    </Box>
  );
}

const verticalSizes: readonly SheetVerticalSize[] = [
  "none",
  "touch",
  "recommended",
];

function LoremIpsum(): ReactElement {
  return (
    <>
      <Typography>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat
        diam et mauris dapibus bibendum. Praesent vehicula maximus egestas.
        Mauris lacinia lectus elit, quis placerat massa egestas sit amet. Sed
        massa ex, commodo sed orci nec, accumsan sagittis sem. Curabitur
        malesuada urna sit amet leo vehicula lobortis. Pellentesque habitant
        morbi tristique senectus et netus et malesuada fames ac turpis egestas.
        Integer fringilla tincidunt nunc, in efficitur nibh placerat quis.
        Vivamus a est quis nunc vestibulum facilisis. Ut ut massa a ante
        ultricies imperdiet. Orci varius natoque penatibus et magnis dis
        parturient montes, nascetur ridiculus mus. Ut viverra volutpat ex, eu
        scelerisque tortor interdum non. Ut cursus mi id turpis tristique, sed
        fringilla urna fermentum. Suspendisse potenti. Suspendisse hendrerit
        scelerisque porttitor. Duis nisi dolor, ultrices quis fermentum ac,
        interdum eu nisl.
      </Typography>
      <Typography>
        Donec nec ultricies tellus. Suspendisse potenti. Cras condimentum, arcu
        tempus ornare aliquet, purus elit bibendum justo, eu pretium mauris leo
        ac ligula. Sed imperdiet odio in vulputate vestibulum. Integer vitae
        commodo elit. Phasellus gravida eros at dolor varius, in tempor metus
        tincidunt. Nulla dictum nec mi in dignissim. Duis non mauris a turpis
        posuere tempor ut vel eros. Donec volutpat velit sapien, et varius velit
        viverra sit amet. Aenean id magna sit amet velit rutrum porta in a
        tortor. Integer vel feugiat tortor. Nullam posuere, nulla ut viverra
        dignissim, eros quam mattis erat, eget pretium felis erat non mi. Proin
        varius est id pretium volutpat. Aliquam erat volutpat.
      </Typography>
      <Typography>
        Mauris porta mauris et feugiat blandit. Sed placerat non mauris at
        ultrices. Fusce malesuada sem ut nulla malesuada aliquam. Pellentesque
        fermentum aliquam lorem, at semper ex facilisis ac. Fusce laoreet odio
        vitae sem dictum, at sagittis erat imperdiet. Nullam lacinia tortor at
        diam tempus malesuada. Aliquam vitae euismod mi. Integer ac enim commodo
        felis sollicitudin condimentum id at ex. Mauris lobortis est nunc, et
        scelerisque eros malesuada vel.
      </Typography>
      <Typography>
        Integer vel mi nulla. Pellentesque eu tellus quam. Sed sagittis erat
        neque, quis varius justo mattis sed. Donec ac sollicitudin ante. Duis
        sollicitudin suscipit nulla, sed feugiat felis vehicula quis. Nunc
        ullamcorper hendrerit dolor ut consectetur. Praesent arcu diam, placerat
        non sagittis vel, varius ut turpis. Maecenas id mi at nulla dapibus
        rhoncus ac nec nulla. Donec mattis mi convallis odio elementum, at
        pulvinar leo ornare. Praesent consequat augue in tellus sodales
        fermentum.
      </Typography>
      <Typography>
        Sed ultricies nibh ut leo dapibus, eget volutpat lectus auctor. Etiam
        egestas urna nec neque posuere, eget feugiat lacus aliquet. Aliquam nunc
        nulla, faucibus at libero et, dapibus vulputate nisi. Cras sit amet
        sagittis tortor. Donec nec velit nulla. Mauris dictum vel ipsum quis
        bibendum. Aenean elementum nisi urna, vel finibus lacus iaculis ut.
      </Typography>
      <Typography>
        Interdum et malesuada fames ac ante ipsum primis in faucibus.
        Pellentesque eget mattis erat. Etiam vitae tellus ipsum. Morbi vitae
        sapien eu lacus cursus vehicula. Nunc varius hendrerit nibh et finibus.
        Nullam mollis pharetra dolor, eu laoreet dui sodales vitae. Donec
        molestie ac massa non dapibus. Suspendisse volutpat ligula vitae
        fermentum aliquam. Nullam eu congue urna. Nulla a libero quis risus
        pharetra ornare.
      </Typography>
      <Typography>
        In interdum lectus et neque mollis, ut gravida mauris sagittis. Nunc
        pellentesque lacus sem, vel lacinia neque hendrerit eu. Nulla facilisi.
        Vivamus eleifend ligula erat, sit amet iaculis est feugiat ut. Aliquam
        mauris nisi, lobortis et tempor eu, cursus vel justo. Curabitur sit amet
        aliquam urna. Nulla eget mi ac tortor condimentum sodales at facilisis
        tellus. Curabitur viverra elementum arcu, non scelerisque tortor congue
        ac. Sed suscipit quam rhoncus, rhoncus dolor malesuada, auctor dui.
        Vestibulum nec iaculis risus. Etiam scelerisque maximus mattis.
        Vestibulum et felis id felis gravida sagittis sed non metus. In sed mi
        rhoncus, tempor nibh non, elementum nulla.
      </Typography>
      <Typography>
        Proin auctor pellentesque orci, sed dapibus libero tempus vel. Cras
        venenatis ex in ipsum tempor ultricies. Etiam dapibus commodo dolor, ut
        pretium purus sagittis et. Fusce nunc turpis, porta non tortor
        scelerisque, egestas iaculis turpis. Nullam eget ultrices mauris, sit
        amet lobortis ipsum. Proin commodo, eros eu facilisis laoreet, sapien
        lectus viverra mi, eget congue felis turpis a orci. Integer condimentum
        vehicula volutpat. Nam id mauris quis nisl pharetra vulputate eget
        accumsan nulla. Nam rutrum ante orci, vitae tincidunt velit aliquet
        vitae. Cras mattis dignissim consectetur. Sed sapien velit, consectetur
        sed nibh a, venenatis rhoncus dui. Donec vitae hendrerit augue, eget
        venenatis nisi.
      </Typography>
      <Typography>
        Duis tincidunt justo ut magna ullamcorper euismod. Aliquam ultricies,
        libero a mollis convallis, neque libero rutrum dolor, at blandit justo
        turpis at ex. Pellentesque ullamcorper urna in tempor feugiat. Praesent
        eget ligula eget tortor mattis suscipit. Aenean volutpat nisi ac
        vestibulum congue. Nulla in tellus quis mauris facilisis tempor.
        Pellentesque malesuada at tellus sed bibendum. Donec ultricies vitae
        dolor a sodales. Sed non justo ac nibh euismod pulvinar. Duis vel risus
        in risus luctus pulvinar et nec mauris. Aliquam blandit tellus nunc, sit
        amet feugiat diam facilisis vitae. Aliquam nisi elit, scelerisque et
        luctus a, mollis eu ex. Pellentesque eget fringilla metus. Ut molestie
        commodo odio finibus consectetur.
      </Typography>
      <Typography>
        Pellentesque molestie ipsum ac felis bibendum vehicula. Aliquam accumsan
        augue ac sapien iaculis fringilla. Sed feugiat est vitae ornare
        consectetur. Nulla lacinia quam nisl, ut mollis lacus placerat at.
        Vivamus non consectetur sapien. Ut ac mollis ante, id ultricies mi.
        Mauris tincidunt at erat sed vestibulum. Curabitur eget tellus venenatis
        sem tincidunt molestie. Morbi tellus sem, accumsan non vestibulum
        fermentum, tristique ac magna. Curabitur congue consectetur nibh quis
        placerat. Integer ultrices orci nisi, vel ornare mauris fringilla at.
      </Typography>
    </>
  );
}