feat: keep bottomsheet zindex at top

Author: SaadBazaz

apps/demo/CHANGELOG.md

@@ -1,5 +1,12 @@
 # index
 
+## 0.1.17
+
+### Patch Changes
+
+- Updated dependencies
+  - material-web-components-react@0.3.12
+
 ## 0.1.16
 
 ### Patch Changes

apps/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "index",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "private": true,
   "packageManager": "pnpm@9.1.0",
   "scripts": {

apps/demo/src/app/page.tsx

@@ -27,7 +27,7 @@ import SegmentedButton, {
   SegmentedButtonSet,
 } from "material-web-components-react/segmented-button";
 import Select, { SelectOption } from "material-web-components-react/select";
-// import { BottomSheet } from "material-web-components-react/sheet";
+import { BottomSheet } from "material-web-components-react/sheet";
 import Slider from "material-web-components-react/slider";
 import Switch from "material-web-components-react/switch";
 import Tabs, { PrimaryTab } from "material-web-components-react/tabs";
@@ -583,7 +583,7 @@ export default function Home() {
         </DemoSection>
 
         <DemoSection title="Containment">
-          {/* <ComponentDemo title={"Bottom sheet"}>
+          <ComponentDemo title={"Bottom sheet"}>
             <div className="w-full">
               <Button
                 variant="text"
@@ -598,7 +598,7 @@ export default function Home() {
                 {showModalBottomSheet ? "Hide modal bottom sheet" : "Show modal bottom sheet"}
               </Button>
             </div>
-          </ComponentDemo> */}
+          </ComponentDemo>
           <ComponentDemo title={"Card"}>
             <div className="flex flex-row justify-center items-center gap-2">
               <Card className="p-2 aspect-square flex justify-between">
@@ -1068,7 +1068,7 @@ export default function Home() {
           </ComponentDemo>
         </DemoSection>
       </Column>
-      {/* 
+      
       <BottomSheet
         open={showBottomSheet}
         onOpenChange={(open) => setShowBottomSheet(open)}
@@ -1188,7 +1188,7 @@ export default function Home() {
           </div>
         </div>
       </BottomSheet> 
-*/}
+
     </>
   );
 }

apps/demo/tailwind.config.ts

@@ -37,6 +37,9 @@ const config: Config = {
     {
       pattern: /max-(w|h)-(.)/,
     },
+    {
+      pattern: /([a-zA-Z]+)-./,
+    },
   ],
   theme: {
     extend: {

packages/ui/CHANGELOG.md

@@ -1,5 +1,11 @@
 # material-web-react
 
+## 0.3.12
+
+### Patch Changes
+
+- Make bottom sheet take highest precedence
+
 ## 0.3.11
 
 ### Patch Changes

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-web-components-react",
-  "version": "0.3.11",
+  "version": "0.3.12",
   "author": "Grayhat Team",
   "type": "module",
   "keywords": [

packages/ui/src/sheet/index.tsx

@@ -32,9 +32,10 @@ export const BottomSheet: React.FC<BottomSheetProps> = ({
     <Drawer.Root {...props}>
       <Drawer.Portal>
         <Drawer.Overlay
-          className={`${
-            variant === "modal" ? "fixed inset-0 bg-black/40" : ""
-          }`}
+          className={twMerge(
+            variant === "modal" ? "fixed inset-0 bg-black/40" : "",
+            "!z-[999999]"
+          )}
         />
         <Drawer.Content
           className={`fixed inset-x-0 bottom-0 m-auto mt-24 flex w-full flex-col overflow-hidden !rounded-t-[2rem] bg-zinc-100 px-6 sm:max-w-screen-sm sm:px-14`}