diableDismiss and disableScrim props + examples

packages/lab/src/drawer/Drawer.tsx

@@ -1,17 +1,11 @@
 import {
   ComponentPropsWithoutRef,
-  ForwardedRef,
   forwardRef,
   useEffect,
   useState,
 } from "react";
 import { clsx } from "clsx";
-import {
-  useClick,
-  useDismiss,
-  useInteractions,
-  useRole,
-} from "@floating-ui/react";
+import { useClick, useDismiss, useInteractions } from "@floating-ui/react";
 import {
   makePrefixer,
   Scrim,
@@ -24,6 +18,17 @@ import { useWindow } from "@salt-ds/window";
 import { useComponentCssInjection } from "@salt-ds/styles";
 import drawerCss from "./Drawer.css";
 
+interface ConditionalScrimWrapperProps extends React.PropsWithChildren {
+  condition: boolean;
+}
+
+export const ConditionalScrimWrapper = ({
+  condition,
+  children,
+}: ConditionalScrimWrapperProps) => {
+  return condition ? <Scrim fixed> {children} </Scrim> : <>{children} </>;
+};
+
 export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
   /**
    * Defines the drawer position within the screen. Defaults to `left`.
@@ -41,6 +46,14 @@ export interface DrawerProps extends ComponentPropsWithoutRef<"div"> {
    * Change background color palette
    */
   variant?: "primary" | "secondary";
+  /**
+   * Prevent the dialog closing on click away
+   * */
+  disableDismiss?: boolean;
+  /**
+   * Prevent Scrim from rendering
+   * */
+  disableScrim?: boolean;
 }
 
 const withBaseName = makePrefixer("saltDrawer");
@@ -57,6 +70,9 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
     onOpenChange,
     variant = "primary",
     id: idProp,
+    role: roleProp,
+    disableDismiss,
+    disableScrim,
     ...rest
   } = props;
 
@@ -72,15 +88,16 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
 
   const id = useId(idProp);
 
-  const { context, floating } = useFloatingUI({
+  const { context, floating, x, y, elements } = useFloatingUI({
     open,
     onOpenChange,
   });
 
+  const role = roleProp ?? "dialog";
+
   const { getFloatingProps } = useInteractions([
-    useRole(context, { role: "dialog" }),
     useClick(context),
-    useDismiss(context),
+    useDismiss(context, { enabled: !disableDismiss }),
   ]);
 
   const handleRef = useForkRef<HTMLDivElement>(floating, ref);
@@ -101,10 +118,15 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
   return (
     <>
       {showComponent && (
-        <Scrim fixed>
+        <ConditionalScrimWrapper condition={!disableScrim}>
           <FloatingComponent
-            open={open}
+            open={showComponent}
             ref={handleRef}
+            role={role}
+            left={x ?? 0}
+            top={y ?? 0}
+            width={elements.floating?.offsetWidth}
+            height={elements.floating?.offsetHeight}
             aria-modal="true"
             aria-labelledby={`${id}-header`}
             focusManagerProps={{
@@ -125,7 +147,7 @@ export const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(
           >
             {children}
           </FloatingComponent>
-        </Scrim>
+        </ConditionalScrimWrapper>
       )}
     </>
   );

site/docs/components/drawer/examples.mdx

@@ -45,14 +45,22 @@ Anchor a drawer to the bottom edge of the screen when using a master-detail layo
 
 </LivePreview>
 
-<LivePreview componentName="drawer" exampleName="OptionalCloseAction" >
+<LivePreview componentName="drawer" exampleName="MandatoryAction" >
 
-### Optional close action
+### MandatoryAction
 
-This example closes when the user clicks the **Submit** button instead of closing with the drawer's optional close button.
-When present, the close button always appears on the top right corner of the drawer, it's sticky and doesn't scroll.
+This example uses the `disableDismiss` prop to prevent the drawer closing on click away therefore ensuring the user takes an action within the drawer for it to close.
+This example closes when the user clicks the **Submit** button.
 
-In certain use cases, i.e., when user needs to complete form fields, an alternative action such as a 'submit and close' button, would be more appropriate than a close button.
+When the optional close button is not shown the `diableDismiss` prop should be used.
+
+</LivePreview>
+
+<LivePreview componentName="drawer" exampleName="DisableScrim" >
+
+### DisableScrim
+
+Use the `disableScrim` prop to prevent the scrim from rendering
 
 </LivePreview>
 </LivePreviewControls>

site/src/examples/drawer/DisableScrim.tsx

@@ -0,0 +1,23 @@
+import { ReactElement, useState } from "react";
+
+import { Drawer, DrawerCloseButton } from "@salt-ds/lab";
+import { Button, StackLayout } from "@salt-ds/core";
+
+export const DisableScrim = (): ReactElement => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <StackLayout>
+      <Button onClick={() => setOpen(true)}>Open Primary Drawer</Button>
+      <Drawer
+        open={open}
+        onOpenChange={(newOpen) => setOpen(newOpen)}
+        id="primary-drawer"
+        style={{ width: 200 }}
+        disableScrim
+      >
+        <DrawerCloseButton onClick={() => setOpen(false)} />
+      </Drawer>
+    </StackLayout>
+  );
+};

site/src/examples/drawer/OptionalCloseAction.tsx → site/src/examples/drawer/MandatoryAction.tsx

@@ -12,7 +12,7 @@ import {
   H2,
 } from "@salt-ds/core";
 
-export const OptionalCloseAction = (): ReactElement => {
+export const MandatoryAction = (): ReactElement => {
   const [open, setOpen] = useState(false);
   const [value, setValue] = useState("");
 
@@ -45,15 +45,14 @@ export const OptionalCloseAction = (): ReactElement => {
 
   return (
     <>
-      <Button onClick={handleRequestOpen}>
-        Open Optional Close Action Drawer
-      </Button>
+      <Button onClick={handleRequestOpen}>Open Mandatory Action Drawer</Button>
       <Drawer
         open={open}
         onOpenChange={onOpenChange}
         position="right"
         style={{ width: 500 }}
         id={id}
+        disableDismiss
       >
         <StackLayout>
           <H2 id={`${id}-header`}>Add your delivery details</H2>

site/src/examples/drawer/index.ts

@@ -2,4 +2,5 @@ export * from "./TopDrawer";
 export * from "./RightDrawer";
 export * from "./BottomDrawer";
 export * from "./Default";
-export * from "./OptionalCloseAction";
+export * from "./MandatoryAction";
+export * from "./DisableScrim"