@hyphen/hyphen-components 2.25.0 → 2.25.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.25.0",
+  "version": "2.25.2",
   "license": "MIT",
   "author": {
     "name": "@hyphen"

package/src/components/Sidebar/Sidebar.tsx

@@ -61,12 +61,23 @@ const SidebarProvider = forwardRef<
     ref
   ) => {
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = useState(openProp ?? defaultOpen);
+    const [openMobile, setOpenMobile] = useState(() =>
+      isMobile ? false : openProp ?? defaultOpen
+    );
 
     // Manages sidebar open state with a fallback to internal state when openProp is not provided
     const [_open, _setOpen] = useState(openProp ?? defaultOpen);
     const open = openProp ?? _open;
 
+    // Update open state when openProp or isMobile changes
+    useEffect(() => {
+      if (isMobile) {
+        setOpenMobile(false); // Always start closed on mobile
+      } else {
+        _setOpen(openProp ?? defaultOpen); // Use desktop state
+      }
+    }, [isMobile, openProp, defaultOpen]);
+
     const setOpen = useCallback(
       (value: boolean | ((value: boolean) => boolean)) => {
         const newOpenState = typeof value === 'function' ? value(open) : value;
@@ -106,13 +117,6 @@ const SidebarProvider = forwardRef<
       return () => window.removeEventListener('keydown', handleKeyDown);
     }, [toggleSidebar]);
 
-    // Update open state when `isMobile` changes
-    useEffect(() => {
-      if (isMobile && open) {
-        setOpenMobile(open);
-      }
-    }, [isMobile, open]);
-
     // Assign state for data attributes
     const state = open ? 'expanded' : 'collapsed';
 
@@ -175,7 +179,7 @@ const Sidebar = React.forwardRef<
           onDismiss={() => setOpenMobile(false)}
           placement={side}
         >
-          <Box data-sidebar="sidebar" data-mobile="true">
+          <Box data-sidebar="sidebar" data-mobile="true" height="100">
             {children}
           </Box>
         </Drawer>
@@ -266,7 +270,7 @@ const SidebarTrigger = React.forwardRef<
       variant="tertiary"
       size="sm"
       iconPrefix="dock-left"
-      className={className}
+      className={classNames('m-left-sm m-left-0-tablet', className)}
       onClick={(event) => {
         onClick?.(event);
         toggleSidebar();
@@ -286,7 +290,7 @@ const SidebarInset = React.forwardRef<
     <main
       ref={ref}
       className={classNames(
-        'display-flex flex-auto flex-direction-column g-lg align-items-flex-start p-lg background-color-secondary',
+        'display-flex flex-auto flex-direction-column g-lg align-items-flex-start p-h-0 p-top-lg p-bottom-0 p-lg-tablet background-color-secondary',
         className
       )}
       {...props}