@hyphen/hyphen-components 2.25.0 → 2.25.2

package/dist/hyphen-components.cjs.development.js

@@ -3847,7 +3847,9 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     children = _ref.children,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   var isMobile = useIsMobile();
-  var _useState = React.useState(openProp != null ? openProp : defaultOpen),
+  var _useState = React.useState(function () {
+      return isMobile ? false : openProp != null ? openProp : defaultOpen;
+    }),
     openMobile = _useState[0],
     setOpenMobile = _useState[1];
   // Manages sidebar open state with a fallback to internal state when openProp is not provided
@@ -3855,6 +3857,14 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _open = _useState2[0],
     _setOpen = _useState2[1];
   var open = openProp != null ? openProp : _open;
+  // Update open state when openProp or isMobile changes
+  React.useEffect(function () {
+    if (isMobile) {
+      setOpenMobile(false); // Always start closed on mobile
+    } else {
+      _setOpen(openProp != null ? openProp : defaultOpen); // Use desktop state
+    }
+  }, [isMobile, openProp, defaultOpen]);
   var setOpen = React.useCallback(function (value) {
     var newOpenState = typeof value === 'function' ? value(open) : value;
     if (newOpenState !== open) {
@@ -3888,12 +3898,6 @@ var SidebarProvider = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return window.removeEventListener('keydown', handleKeyDown);
     };
   }, [toggleSidebar]);
-  // Update open state when `isMobile` changes
-  React.useEffect(function () {
-    if (isMobile && open) {
-      setOpenMobile(open);
-    }
-  }, [isMobile, open]);
   // Assign state for data attributes
   var state = open ? 'expanded' : 'collapsed';
   var contextValue = React.useMemo(function () {
@@ -3942,7 +3946,8 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       placement: side
     }, React.createElement(Box, {
       "data-sidebar": "sidebar",
-      "data-mobile": "true"
+      "data-mobile": "true",
+      height: "100"
     }, children));
   }
   if (collapsible === 'none') {
@@ -4006,7 +4011,7 @@ var SidebarTrigger = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
     variant: "tertiary",
     size: "sm",
     iconPrefix: "dock-left",
-    className: className,
+    className: classNames('m-left-sm m-left-0-tablet', className),
     onClick: function onClick(event) {
       _onClick == null || _onClick(event);
       toggleSidebar();
@@ -4020,7 +4025,7 @@ var SidebarInset = /*#__PURE__*/React.forwardRef(function (_ref4, ref) {
     props = _objectWithoutPropertiesLoose(_ref4, _excluded4);
   return React.createElement("main", _extends({
     ref: ref,
-    className: classNames('display-flex flex-auto flex-direction-column g-lg align-items-flex-start p-lg background-color-secondary', className)
+    className: classNames('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));
 });
 SidebarInset.displayName = 'SidebarInset';