@stoplight/elements-core 8.1.1 → 8.1.3

package/index.esm.js

@@ -3384,12 +3384,12 @@ const MobileTopNav = ({ name, logo, tree, pathname, onTocClick, }) => {
         onTocClick();
         setIsSidebarOpen(false);
     };
-    return (React.createElement(Flex, { className: "TopNav--mosaic", alignItems: "center", h: "3xl", pl: 4, pr: 4, bg: "canvas", borderB: true, pos: "fixed", w: "full", zIndex: 20 },
+    return (React.createElement(Flex, { className: "TopNav--mosaic", alignItems: "center", h: "3xl", pl: 4, pr: 4, bg: "canvas", borderB: true, pos: "fixed", w: "full" },
         React.createElement(Flex, { "data-test": "mobile-top-nav", w: "full", alignItems: "center", justifyContent: "between" },
             React.createElement(Button, { "data-test": "show-left-sidebar-btn", onPress: () => setIsSidebarOpen(true), appearance: "minimal" },
                 React.createElement(Icon, { size: "lg", icon: faBars })),
             React.createElement(NavHeading, { heading: name })),
-        React.createElement(Drawer, { isOpen: isSidebarOpen, position: "left" },
+        React.createElement(Drawer, { isOpen: isSidebarOpen, position: "left", onClose: () => setIsSidebarOpen(false), w: "5/6" },
             React.createElement(Flex, { justifyContent: "end" },
                 React.createElement(Button, { className: "sl-mr-4 sl-mt-2", onPress: () => setIsSidebarOpen(false), appearance: "minimal", justifySelf: "end" },
                     React.createElement(Icon, { size: "lg", icon: faX }))),
@@ -3411,16 +3411,17 @@ const ResponsiveSidebarLayout = React.forwardRef(({ children, name, logo, tree,
     }, [pathname]);
     const { isResponsiveLayoutEnabled } = useResponsiveLayout();
     return (React.createElement(Flex, { ref: ref, className: "sl-elements-api", pin: true, h: "full" },
-        !isResponsiveLayoutEnabled ? (React.createElement(Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH$1}px` } },
+        !isResponsiveLayoutEnabled && (React.createElement(Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH$1}px` } },
             React.createElement(Flex, { direction: "col", bg: "canvas-100", borderR: true, pt: 8, pos: "sticky", pinY: true, overflowY: "auto", style: {
                     paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                     width: `${currentSidebarWidth}px`,
                     minWidth: `${SIDEBAR_MIN_WIDTH$1}px`,
                 } },
                 React.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: onTocClick, isInResponsiveMode: false })),
-            React.createElement(Flex, { justifySelf: "end", flexGrow: 0, flexShrink: 0, resize: "x", onMouseDown: startResizing, style: { width: '1em', flexBasis: '6px', cursor: 'ew-resize' } }))) : (React.createElement(MobileTopNav, { onTocClick: onTocClick, name: name, logo: logo, tree: tree, pathname: pathname })),
+            React.createElement(Flex, { justifySelf: "end", flexGrow: 0, flexShrink: 0, resize: "x", onMouseDown: startResizing, style: { width: '1em', flexBasis: '6px', cursor: 'ew-resize' } }))),
         React.createElement(Box, { ref: scrollRef, bg: "canvas", px: !isResponsiveLayoutEnabled ? 24 : 6, flex: 1, w: "full", overflowY: "auto" },
-            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children))));
+            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children)),
+        isResponsiveLayoutEnabled && (React.createElement(MobileTopNav, { onTocClick: onTocClick, name: name, logo: logo, tree: tree, pathname: pathname }))));
 });
 const Sidebar = ({ name, logo, tree, pathname, onTocClick, isInResponsiveMode, }) => {
     return (React.createElement(React.Fragment, null,

package/index.js

@@ -3441,12 +3441,12 @@ const MobileTopNav = ({ name, logo, tree, pathname, onTocClick, }) => {
         onTocClick();
         setIsSidebarOpen(false);
     };
-    return (React__namespace.createElement(mosaic.Flex, { className: "TopNav--mosaic", alignItems: "center", h: "3xl", pl: 4, pr: 4, bg: "canvas", borderB: true, pos: "fixed", w: "full", zIndex: 20 },
+    return (React__namespace.createElement(mosaic.Flex, { className: "TopNav--mosaic", alignItems: "center", h: "3xl", pl: 4, pr: 4, bg: "canvas", borderB: true, pos: "fixed", w: "full" },
         React__namespace.createElement(mosaic.Flex, { "data-test": "mobile-top-nav", w: "full", alignItems: "center", justifyContent: "between" },
             React__namespace.createElement(mosaic.Button, { "data-test": "show-left-sidebar-btn", onPress: () => setIsSidebarOpen(true), appearance: "minimal" },
                 React__namespace.createElement(mosaic.Icon, { size: "lg", icon: faBars })),
             React__namespace.createElement(NavHeading, { heading: name })),
-        React__namespace.createElement(mosaic.Drawer, { isOpen: isSidebarOpen, position: "left" },
+        React__namespace.createElement(mosaic.Drawer, { isOpen: isSidebarOpen, position: "left", onClose: () => setIsSidebarOpen(false), w: "5/6" },
             React__namespace.createElement(mosaic.Flex, { justifyContent: "end" },
                 React__namespace.createElement(mosaic.Button, { className: "sl-mr-4 sl-mt-2", onPress: () => setIsSidebarOpen(false), appearance: "minimal", justifySelf: "end" },
                     React__namespace.createElement(mosaic.Icon, { size: "lg", icon: faX }))),
@@ -3468,16 +3468,17 @@ const ResponsiveSidebarLayout = React__namespace.forwardRef(({ children, name, l
     }, [pathname]);
     const { isResponsiveLayoutEnabled } = useResponsiveLayout();
     return (React__namespace.createElement(mosaic.Flex, { ref: ref, className: "sl-elements-api", pin: true, h: "full" },
-        !isResponsiveLayoutEnabled ? (React__namespace.createElement(mosaic.Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH$1}px` } },
+        !isResponsiveLayoutEnabled && (React__namespace.createElement(mosaic.Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH$1}px` } },
             React__namespace.createElement(mosaic.Flex, { direction: "col", bg: "canvas-100", borderR: true, pt: 8, pos: "sticky", pinY: true, overflowY: "auto", style: {
                     paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                     width: `${currentSidebarWidth}px`,
                     minWidth: `${SIDEBAR_MIN_WIDTH$1}px`,
                 } },
                 React__namespace.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: onTocClick, isInResponsiveMode: false })),
-            React__namespace.createElement(mosaic.Flex, { justifySelf: "end", flexGrow: 0, flexShrink: 0, resize: "x", onMouseDown: startResizing, style: { width: '1em', flexBasis: '6px', cursor: 'ew-resize' } }))) : (React__namespace.createElement(MobileTopNav, { onTocClick: onTocClick, name: name, logo: logo, tree: tree, pathname: pathname })),
+            React__namespace.createElement(mosaic.Flex, { justifySelf: "end", flexGrow: 0, flexShrink: 0, resize: "x", onMouseDown: startResizing, style: { width: '1em', flexBasis: '6px', cursor: 'ew-resize' } }))),
         React__namespace.createElement(mosaic.Box, { ref: scrollRef, bg: "canvas", px: !isResponsiveLayoutEnabled ? 24 : 6, flex: 1, w: "full", overflowY: "auto" },
-            React__namespace.createElement(mosaic.Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children))));
+            React__namespace.createElement(mosaic.Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children)),
+        isResponsiveLayoutEnabled && (React__namespace.createElement(MobileTopNav, { onTocClick: onTocClick, name: name, logo: logo, tree: tree, pathname: pathname }))));
 });
 const Sidebar = ({ name, logo, tree, pathname, onTocClick, isInResponsiveMode, }) => {
     return (React__namespace.createElement(React__namespace.Fragment, null,

package/index.mjs

@@ -3384,12 +3384,12 @@ const MobileTopNav = ({ name, logo, tree, pathname, onTocClick, }) => {
         onTocClick();
         setIsSidebarOpen(false);
     };
-    return (React.createElement(Flex, { className: "TopNav--mosaic", alignItems: "center", h: "3xl", pl: 4, pr: 4, bg: "canvas", borderB: true, pos: "fixed", w: "full", zIndex: 20 },
+    return (React.createElement(Flex, { className: "TopNav--mosaic", alignItems: "center", h: "3xl", pl: 4, pr: 4, bg: "canvas", borderB: true, pos: "fixed", w: "full" },
         React.createElement(Flex, { "data-test": "mobile-top-nav", w: "full", alignItems: "center", justifyContent: "between" },
             React.createElement(Button, { "data-test": "show-left-sidebar-btn", onPress: () => setIsSidebarOpen(true), appearance: "minimal" },
                 React.createElement(Icon, { size: "lg", icon: faBars })),
             React.createElement(NavHeading, { heading: name })),
-        React.createElement(Drawer, { isOpen: isSidebarOpen, position: "left" },
+        React.createElement(Drawer, { isOpen: isSidebarOpen, position: "left", onClose: () => setIsSidebarOpen(false), w: "5/6" },
             React.createElement(Flex, { justifyContent: "end" },
                 React.createElement(Button, { className: "sl-mr-4 sl-mt-2", onPress: () => setIsSidebarOpen(false), appearance: "minimal", justifySelf: "end" },
                     React.createElement(Icon, { size: "lg", icon: faX }))),
@@ -3411,16 +3411,17 @@ const ResponsiveSidebarLayout = React.forwardRef(({ children, name, logo, tree,
     }, [pathname]);
     const { isResponsiveLayoutEnabled } = useResponsiveLayout();
     return (React.createElement(Flex, { ref: ref, className: "sl-elements-api", pin: true, h: "full" },
-        !isResponsiveLayoutEnabled ? (React.createElement(Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH$1}px` } },
+        !isResponsiveLayoutEnabled && (React.createElement(Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH$1}px` } },
             React.createElement(Flex, { direction: "col", bg: "canvas-100", borderR: true, pt: 8, pos: "sticky", pinY: true, overflowY: "auto", style: {
                     paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
                     width: `${currentSidebarWidth}px`,
                     minWidth: `${SIDEBAR_MIN_WIDTH$1}px`,
                 } },
                 React.createElement(Sidebar, { name: name, logo: logo, tree: tree, pathname: pathname, onTocClick: onTocClick, isInResponsiveMode: false })),
-            React.createElement(Flex, { justifySelf: "end", flexGrow: 0, flexShrink: 0, resize: "x", onMouseDown: startResizing, style: { width: '1em', flexBasis: '6px', cursor: 'ew-resize' } }))) : (React.createElement(MobileTopNav, { onTocClick: onTocClick, name: name, logo: logo, tree: tree, pathname: pathname })),
+            React.createElement(Flex, { justifySelf: "end", flexGrow: 0, flexShrink: 0, resize: "x", onMouseDown: startResizing, style: { width: '1em', flexBasis: '6px', cursor: 'ew-resize' } }))),
         React.createElement(Box, { ref: scrollRef, bg: "canvas", px: !isResponsiveLayoutEnabled ? 24 : 6, flex: 1, w: "full", overflowY: "auto" },
-            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children))));
+            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children)),
+        isResponsiveLayoutEnabled && (React.createElement(MobileTopNav, { onTocClick: onTocClick, name: name, logo: logo, tree: tree, pathname: pathname }))));
 });
 const Sidebar = ({ name, logo, tree, pathname, onTocClick, isInResponsiveMode, }) => {
     return (React.createElement(React.Fragment, null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "8.1.1",
+  "version": "8.1.3",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -31,9 +31,9 @@
     "@stoplight/json-schema-tree": "^4.0.0",
     "@stoplight/json-schema-viewer": "^4.15.1",
     "@stoplight/markdown-viewer": "^5.7.0",
-    "@stoplight/mosaic": "^1.51.3",
-    "@stoplight/mosaic-code-editor": "^1.51.3",
-    "@stoplight/mosaic-code-viewer": "^1.51.3",
+    "@stoplight/mosaic": "^1.53.1",
+    "@stoplight/mosaic-code-editor": "^1.53.1",
+    "@stoplight/mosaic-code-viewer": "^1.53.1",
     "@stoplight/path": "^1.3.2",
     "@stoplight/react-error-boundary": "^3.0.0",
     "@stoplight/types": "^14.1.1",