@purpurds/drawer 6.11.0 → 6.11.1

package/dist/styles.css

@@ -1 +1 @@
-._purpur-drawer-content_5le47_1{animation:_drawerSmallScreenAnimation_5le47_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);bottom:0;display:flex;flex-direction:column;max-height:90vh;max-height:90dvh;max-width:100%;position:absolute;right:0;transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:100%}@media screen and (min-width: 600px){._purpur-drawer-content_5le47_1{animation:_drawerLargeScreenAnimation_5le47_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);max-height:100vh;max-height:100dvh;height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}}._purpur-drawer-content_5le47_1:focus{outline:none}._purpur-drawer-content__content-container_5le47_28{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_5le47_33[data-swipe=cancel]{transform:translateY(0);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content__drawer-frame_5le47_33[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_5le47_33[data-swipe=end]{animation:_slideDown_5le47_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_5le47_43{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_5le47_54{animation:_overlayAnimation_5le47_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed;transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}@keyframes _slideDown_5le47_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_5le47_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimation_5le47_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_5le47_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._purpur-drawer-container--header_1r6tb_1{padding:var(--purpur-spacing-250) var(--purpur-spacing-300) var(--purpur-spacing-200);border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-drawer-container--body_1r6tb_5{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}._purpur-drawer-container--body_1r6tb_5._purpur-drawer-container--sticky_1r6tb_8{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}._purpur-drawer-container--footer_1r6tb_11{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}._purpur-drawer-container--footer_1r6tb_11._purpur-drawer-container--sticky_1r6tb_8{border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}._purpur-drawer-frame_dq9kv_1{background-color:var(--purpur-color-background-primary);border-top-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:var(--purpur-border-radius-lg);box-shadow:var(--purpur-shadow-lg);display:flex;flex-direction:column;flex:1 1 auto;overflow:hidden;position:relative}@media screen and (min-width: 600px){._purpur-drawer-frame_dq9kv_1{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}}._purpur-drawer-frame--sticky-footer_dq9kv_18{gap:0}._purpur-drawer-frame__header_dq9kv_21{flex:0 0 auto}._purpur-drawer-frame__body_dq9kv_24{display:flex;flex:1 1 auto;flex-direction:column;overflow:hidden}._purpur-drawer-frame__footer_dq9kv_30{flex:0 0 auto}._purpur-drawer-frame__content-container_dq9kv_33{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_dq9kv_38{margin-bottom:var(--purpur-spacing-400)}._purpur-drawer-handle_3n0ew_1{align-items:center;display:flex;height:var(--purpur-spacing-250);justify-content:center;position:absolute;top:0;width:100%}@media screen and (min-width: 600px){._purpur-drawer-handle_3n0ew_1{display:none}}._purpur-drawer-handle_3n0ew_1:before{content:"";background:var(--purpur-color-border-weak);border-radius:var(--purpur-border-radius-full);height:var(--purpur-spacing-50);width:var(--purpur-spacing-600)}._purpur-drawer-header__row_1yg5w_1{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-drawer-header__row--with-back-button_1yg5w_6{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_1yg5w_9{flex:1 1 auto}._purpur-drawer-header__right_1yg5w_12{flex:0 0 auto}._purpur-drawer-header__close-button_1yg5w_15{margin-right:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-header__back-button--only-icon_1yg5w_18{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1ybjp_1{display:flex;flex-direction:column;overflow:hidden}._purpur-drawer-scroll-area__viewport_1ybjp_6{height:100%}._purpur-drawer-scroll-area__scrollbar_1ybjp_9{display:flex;-webkit-user-select:none;user-select:none;touch-action:none;padding:var(--purpur-spacing-25);background:var(--purpur-color-functional-white);transition:background var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:var(--purpur-spacing-100)}._purpur-drawer-scroll-area__thumb_1ybjp_20{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1ybjp_20:before{content:"";height:100%;left:50%;min-height:var(--purpur-spacing-300);min-width:var(--purpur-spacing-300);position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}
+._purpur-drawer-content_1xk2s_1{animation:_drawerSmallScreenAnimation_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);bottom:0;height:90vh;height:90dvh;max-width:100%;position:absolute;right:0;transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:100%}._purpur-drawer-content--fit-to-content_1xk2s_12{display:flex;flex-direction:column;height:auto;max-height:90vh;max-height:90dvh}@media screen and (min-width: 600px){._purpur-drawer-content_1xk2s_1{animation:_drawerLargeScreenAnimation_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);height:100vh;height:100dvh;max-width:calc(30rem * var(--purpur-rescale));top:0}._purpur-drawer-content--fit-to-content_1xk2s_12{max-height:100vh;max-height:100dvh}}._purpur-drawer-content_1xk2s_1:focus{outline:none}._purpur-drawer-content__content-container_1xk2s_35{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-content__drawer-frame_1xk2s_40[data-swipe=cancel]{transform:translateY(0);transition:transform var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}._purpur-drawer-content__drawer-frame_1xk2s_40[data-swipe=move]{transform:translateY(var(--purpur-drawer-swipe-move-y))}._purpur-drawer-content__drawer-frame_1xk2s_40[data-swipe=end]{animation:_slideDown_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out) forwards}._purpur-drawer-content__description_1xk2s_50{color:var(--purpur-color-text-default);display:block;font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);font-weight:var(--purpur-typography-weight-normal);-webkit-hyphens:none;hyphens:none;line-height:var(--purpur-typography-line-height-loose);margin:0}._purpur-drawer-overlay_1xk2s_61{animation:_overlayAnimation_1xk2s_1 var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);background:var(--purpur-color-overlay-default);top:0;right:0;bottom:0;left:0;position:fixed;transition:opacity var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out)}@keyframes _slideDown_1xk2s_1{0%{transform:translateY(var(--purpur-drawer-swipe-end-y))}to{transform:translateY(100%)}}@keyframes _overlayAnimation_1xk2s_1{0%{opacity:0}to{opacity:1}}@keyframes _drawerLargeScreenAnimation_1xk2s_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _drawerSmallScreenAnimation_1xk2s_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}._purpur-drawer-container--header_1r6tb_1{padding:var(--purpur-spacing-250) var(--purpur-spacing-300) var(--purpur-spacing-200);border-bottom:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak)}._purpur-drawer-container--body_1r6tb_5{padding:var(--purpur-spacing-400) var(--purpur-spacing-300) 0}._purpur-drawer-container--body_1r6tb_5._purpur-drawer-container--sticky_1r6tb_8{padding:var(--purpur-spacing-400) var(--purpur-spacing-300)}._purpur-drawer-container--footer_1r6tb_11{padding:0 var(--purpur-spacing-300) var(--purpur-spacing-200)}._purpur-drawer-container--footer_1r6tb_11._purpur-drawer-container--sticky_1r6tb_8{border-top:var(--purpur-border-width-xs) solid var(--purpur-color-border-weak);padding:var(--purpur-spacing-200) var(--purpur-spacing-300)}._purpur-drawer-frame_1gdvv_1{background-color:var(--purpur-color-background-primary);border-top-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:var(--purpur-border-radius-lg);box-shadow:var(--purpur-shadow-lg);display:flex;flex-direction:column;height:100%;position:relative}@media screen and (min-width: 600px){._purpur-drawer-frame_1gdvv_1{border-bottom-left-radius:var(--purpur-border-radius-lg);border-top-right-radius:0}}._purpur-drawer-frame--sticky-footer_1gdvv_17{gap:0}._purpur-drawer-frame__header_1gdvv_20{flex:0 0 auto}._purpur-drawer-frame__body_1gdvv_23{flex:1 1 auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1gdvv_27{flex:1 1 auto;height:auto;overflow:hidden}._purpur-drawer-frame--fit-to-content_1gdvv_27 ._purpur-drawer-frame__body_1gdvv_23{display:flex;flex-direction:column}._purpur-drawer-frame__footer_1gdvv_36{flex:0 0 auto}._purpur-drawer-frame__content-container_1gdvv_39{display:flex;flex-direction:column;gap:var(--purpur-spacing-400)}._purpur-drawer-frame__content-container--no-footer_1gdvv_44{margin-bottom:var(--purpur-spacing-400)}._purpur-drawer-handle_3n0ew_1{align-items:center;display:flex;height:var(--purpur-spacing-250);justify-content:center;position:absolute;top:0;width:100%}@media screen and (min-width: 600px){._purpur-drawer-handle_3n0ew_1{display:none}}._purpur-drawer-handle_3n0ew_1:before{content:"";background:var(--purpur-color-border-weak);border-radius:var(--purpur-border-radius-full);height:var(--purpur-spacing-50);width:var(--purpur-spacing-600)}._purpur-drawer-header__row_1yg5w_1{display:flex;align-items:center;gap:var(--purpur-spacing-100)}._purpur-drawer-header__row--with-back-button_1yg5w_6{margin-bottom:var(--purpur-spacing-100)}._purpur-drawer-header__left_1yg5w_9{flex:1 1 auto}._purpur-drawer-header__right_1yg5w_12{flex:0 0 auto}._purpur-drawer-header__close-button_1yg5w_15{margin-right:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-header__back-button--only-icon_1yg5w_18{margin-left:calc(-1 * var(--purpur-spacing-100))}._purpur-drawer-scroll-area__root_1r0fa_1{height:100%}._purpur-drawer-scroll-area__root--fit-to-content_1r0fa_4{display:flex;flex-direction:column;height:auto;overflow:hidden}._purpur-drawer-scroll-area__viewport_1r0fa_10{height:100%}._purpur-drawer-scroll-area__scrollbar_1r0fa_13{display:flex;-webkit-user-select:none;user-select:none;touch-action:none;padding:var(--purpur-spacing-25);background:var(--purpur-color-functional-white);transition:background var(--purpur-motion-duration-200) var(--purpur-motion-easing-ease-in-out);width:var(--purpur-spacing-100)}._purpur-drawer-scroll-area__thumb_1r0fa_24{background:var(--purpur-color-gray-200);border-radius:var(--purpur-spacing-200);flex:1;position:relative}._purpur-drawer-scroll-area__thumb_1r0fa_24:before{content:"";height:100%;left:50%;min-height:var(--purpur-spacing-300);min-width:var(--purpur-spacing-300);position:absolute;top:50%;transform:translate(-50%,-50%);width:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purpurds/drawer",
-  "version": "6.11.0",
+  "version": "6.11.1",
   "license": "AGPL-3.0-only",
   "main": "./dist/drawer.cjs.js",
   "types": "./dist/drawer.d.ts",
@@ -18,12 +18,12 @@
     "@radix-ui/react-dialog": "~1.1.6",
     "@radix-ui/react-scroll-area": "~1.2.3",
     "classnames": "~2.5.0",
-    "@purpurds/button": "6.11.0",
-    "@purpurds/heading": "6.11.0",
-    "@purpurds/tokens": "6.11.0",
-    "@purpurds/paragraph": "6.11.0",
-    "@purpurds/icon": "6.11.0",
-    "@purpurds/visually-hidden": "6.11.0"
+    "@purpurds/button": "6.11.1",
+    "@purpurds/paragraph": "6.11.1",
+    "@purpurds/icon": "6.11.1",
+    "@purpurds/tokens": "6.11.1",
+    "@purpurds/visually-hidden": "6.11.1",
+    "@purpurds/heading": "6.11.1"
   },
   "devDependencies": {
     "eslint": "9.24.0",

package/src/drawer-content.module.scss

@@ -5,24 +5,33 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
 .purpur-drawer-content {
   animation: drawerSmallScreenAnimation $animation-settings;
   bottom: 0;
-  display: flex;
-  flex-direction: column;
-  max-height: 90vh; /* Fallback for older browsers */
-  max-height: 90dvh;
+  height: 90vh; /* Fallback for older browsers */
+  height: 90dvh;
   max-width: 100%;
   position: absolute;
   right: 0;
   transition: transform $animation-settings;
   width: 100%;
 
+  &--fit-to-content {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+    max-height: 90vh; /* Fallback for older browsers */
+    max-height: 90dvh;
+  }
+
   @media screen and (min-width: $purpur-breakpoint-md) {
     animation: drawerLargeScreenAnimation $animation-settings;
-    max-height: 100vh; /* Fallback for older browsers */
-    max-height: 100dvh;
     height: 100vh; /* Fallback for older browsers */
     height: 100dvh;
     max-width: calc(30rem * var(--purpur-rescale));
     top: 0;
+
+    &--fit-to-content {
+      max-height: 100vh; /* Fallback for older browsers */
+      max-height: 100dvh;
+    }
   }
 
   &:focus {

package/src/drawer-content.tsx

@@ -30,6 +30,10 @@ export type DrawerContentProps = {
   className?: string;
   closeButtonText: string;
   disableCloseOnClickOutside?: boolean;
+  /**
+   * If true, the drawer height will fit to its content on small screens.
+   */
+  fitToContent?: boolean;
   footerContent?: ReactNode;
   headerContent?: ReactNode;
   stickyFooter?: boolean;
@@ -51,6 +55,7 @@ export const DrawerContent = forwardRef(
       className,
       closeButtonText,
       disableCloseOnClickOutside = false,
+      fitToContent = false,
       footerContent,
       headerContent,
       onBackButtonClick,
@@ -61,7 +66,11 @@ export const DrawerContent = forwardRef(
     }: DrawerContentProps,
     ref: ForwardedRef<HTMLDivElement>
   ) => {
-    const classes = cx([className, rootClassName]);
+    const classes = cx([
+      className,
+      rootClassName,
+      { [`${rootClassName}--fit-to-content`]: fitToContent },
+    ]);
 
     const drawerFrameRef = useRef<HTMLDivElement>(null);
     const onOpenChange = useContext(DrawerContext);
@@ -94,6 +103,7 @@ export const DrawerContent = forwardRef(
               backButtonOnlyIcon={backButtonOnlyIcon}
               closeButtonText={closeButtonText}
               className={cx(`${rootClassName}__drawer-frame`)}
+              fitToContent={fitToContent}
               footerContent={footerContent}
               headerContent={headerContent}
               ref={drawerFrameRef}

package/src/drawer-frame.module.scss

@@ -1,14 +1,15 @@
 @use "@purpurds/tokens/breakpoint/variables" as *;
 
 .purpur-drawer-frame {
+  $root: &;
+
   background-color: var(--purpur-color-background-primary);
   border-top-left-radius: var(--purpur-border-radius-lg);
   border-top-right-radius: var(--purpur-border-radius-lg);
   box-shadow: var(--purpur-shadow-lg);
   display: flex;
   flex-direction: column;
-  flex: 1 1 auto;
-  overflow: hidden;
+  height: 100%;
   position: relative;
 
   @media screen and (min-width: $purpur-breakpoint-md) {
@@ -25,12 +26,21 @@
   }
 
   &__body {
-    display: flex;
     flex: 1 1 auto;
-    flex-direction: column;
     overflow: hidden;
   }
 
+  &--fit-to-content {
+    flex: 1 1 auto;
+    height: auto;
+    overflow: hidden;
+
+    #{$root}__body {
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
   &__footer {
     flex: 0 0 auto;
   }

package/src/drawer-frame.tsx

@@ -17,6 +17,7 @@ export type DrawerFrameProps = {
   children: ReactNode;
   className?: string;
   closeButtonText: string;
+  fitToContent?: boolean;
   footerContent?: ReactNode;
   headerContent?: ReactNode;
   onAnimationEnd: (event: React.AnimationEvent<HTMLDivElement>) => void;
@@ -41,6 +42,7 @@ export const DrawerFrame = forwardRef(
       children,
       className,
       closeButtonText,
+      fitToContent = false,
       footerContent,
       headerContent,
       onAnimationEnd,
@@ -59,6 +61,7 @@ export const DrawerFrame = forwardRef(
       className,
       rootClassName,
       {
+        [`${rootClassName}--fit-to-content`]: fitToContent,
         [`${rootClassName}--sticky-footer`]: stickyFooter,
       },
     ]);
@@ -97,6 +100,7 @@ export const DrawerFrame = forwardRef(
             <DrawerScrollArea
               className={cx(`${rootClassName}__body`)}
               data-testid={`${dataTestId}-sticky-footer-scroll-area`}
+              fitToContent={fitToContent}
             >
               <DrawerContainer stickyFooter>{children}</DrawerContainer>
             </DrawerScrollArea>
@@ -115,6 +119,7 @@ export const DrawerFrame = forwardRef(
           <DrawerScrollArea
             className={cx(`${rootClassName}__body`)}
             data-testid={`${dataTestId}-scroll-area`}
+            fitToContent={fitToContent}
           >
             <div
               className={cx([

package/src/drawer-scroll-area.module.scss

@@ -2,9 +2,14 @@ $animation-settings: var(--purpur-motion-duration-200) var(--purpur-motion-easin
 
 .purpur-drawer-scroll-area {
   &__root {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
+    height: 100%;
+
+    &--fit-to-content {
+      display: flex;
+      flex-direction: column;
+      height: auto;
+      overflow: hidden;
+    }
   }
 
   &__viewport {

package/src/drawer-scroll-area.tsx

@@ -9,6 +9,7 @@ export type DrawerScrollAreaProps = {
   ["data-testid"]?: string;
   children: ReactNode;
   className?: string;
+  fitToContent?: boolean;
 };
 
 const rootClassName = "purpur-drawer-scroll-area";
@@ -19,6 +20,7 @@ export const DrawerScrollArea = forwardRef(
       ["data-testid"]: dataTestId = "purpur-drawer-scroll-area",
       children,
       className,
+      fitToContent = false,
       ...props
     }: DrawerScrollAreaProps,
     ref: ForwardedRef<HTMLDivElement>
@@ -26,7 +28,11 @@ export const DrawerScrollArea = forwardRef(
     const classes = cx([className, rootClassName]);
     return (
       <div className={classes} data-testid={dataTestId} ref={ref} {...props}>
-        <RadixScrollArea.Root className={cx(`${rootClassName}__root`)}>
+        <RadixScrollArea.Root
+          className={cx(`${rootClassName}__root`, {
+            [`${rootClassName}__root--fit-to-content`]: fitToContent,
+          })}
+        >
           <RadixScrollArea.Viewport className={cx(`${rootClassName}__viewport`)}>
             {children}
           </RadixScrollArea.Viewport>

package/src/drawer.stories.tsx

@@ -143,6 +143,7 @@ const StorybookMultiDrawerTestComponent = () => {
             onBackButtonClick={() => {
               return undefined;
             }}
+            fitToContent
             footerContent={<StorybookTestFooterContent />}
             headerContent={<IconAiRobot />}
             title="This is drawer 3"
@@ -234,6 +235,7 @@ export const ShowcaseForDrawerContent: DrawerContentStory = {
     bodyText: "This is the body text",
     closeButtonText: "Close drawer",
     disableCloseOnClickOutside: false,
+    fitToContent: false,
     footerContent: <StorybookTestFooterContent />,
     headerContent: undefined,
     onBackButtonClick: () => {