@stoplight/elements-core 7.7.5 → 7.7.7

package/index.esm.js

@@ -1238,13 +1238,14 @@ function ExampleMenu({ examples, requestBody, onChange }) {
     return (React.createElement(Menu, { "aria-label": "Examples", items: menuItems, renderTrigger: ({ isOpen }) => (React.createElement(Button, { appearance: "minimal", size: "sm", iconRight: ['fas', 'sort'], active: isOpen }, "Examples")) }));
 }
 
-const useGenerateExampleFromMediaTypeContent = (mediaTypeContent, chosenExampleIndex, { skipReadOnly, skipWriteOnly, skipNonRequired } = {}) => {
+const useGenerateExampleFromMediaTypeContent = (mediaTypeContent, chosenExampleIndex, { skipReadOnly, skipWriteOnly, skipNonRequired, ticks } = {}) => {
     const document = useDocument();
     return React__default.useMemo(() => generateExampleFromMediaTypeContent(mediaTypeContent, document, chosenExampleIndex, {
         skipNonRequired,
         skipWriteOnly,
         skipReadOnly,
-    }), [mediaTypeContent, document, chosenExampleIndex, skipNonRequired, skipReadOnly, skipWriteOnly]);
+        ticks: ticks || 6000,
+    }), [mediaTypeContent, document, chosenExampleIndex, skipNonRequired, skipWriteOnly, skipReadOnly, ticks]);
 };
 const generateExampleFromMediaTypeContent = (mediaTypeContent, document, chosenExampleIndex = 0, options) => {
     var _a, _b;
@@ -1294,6 +1295,7 @@ const generateExamplesFromJsonSchema = (schema) => {
     try {
         const generated = Sampler.sample(schema, {
             maxSampleDepth: 4,
+            ticks: 6000,
         });
         return generated !== null
             ? [
@@ -2605,23 +2607,53 @@ const ParsedDocs = (_a) => {
 };
 
 const MAX_CONTENT_WIDTH = 1800;
-const SIDEBAR_WIDTH = 300;
-const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_WIDTH }, ref) => {
+const SIDEBAR_MIN_WIDTH = 300;
+const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
+const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH }, ref) => {
     const scrollRef = React.useRef(null);
+    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
     const { pathname } = useLocation();
     React.useEffect(() => {
         var _a;
         (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
     }, [pathname]);
     return (React.createElement(Flex, { ref: ref, className: "sl-elements-api", pin: true, h: "full" },
-        React.createElement(Flex, { direction: "col", bg: "canvas-100", borderR: true, pt: 8, pos: "sticky", pinY: true, overflowY: "auto", style: {
-                width: `calc((100% - ${maxContentWidth}px) / 2 + ${sidebarWidth}px)`,
-                paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
-                minWidth: `${sidebarWidth}px`,
-            } }, sidebar),
+        React.createElement(Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH}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}px`,
+                } }, sidebar),
+            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: 24, flex: 1, w: "full", overflowY: "auto" },
-            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
-});
+            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children))));
+});
+function useResizer(sidebarWidth) {
+    const sidebarRef = React.useRef(null);
+    const [isResizing, setIsResizing] = React.useState(false);
+    const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
+    const startResizing = React.useCallback(() => {
+        setIsResizing(true);
+    }, []);
+    const stopResizing = React.useCallback(() => {
+        setIsResizing(false);
+    }, []);
+    const resize = React.useCallback(mouseMoveEvent => {
+        if (isResizing) {
+            const value = mouseMoveEvent.clientX - sidebarRef.current.getBoundingClientRect().left;
+            setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
+        }
+    }, [isResizing]);
+    React.useEffect(() => {
+        window.addEventListener('mousemove', resize);
+        window.addEventListener('mouseup', stopResizing, { passive: true });
+        return () => {
+            window.removeEventListener('mousemove', resize);
+            window.removeEventListener('mouseup', stopResizing);
+        };
+    }, [resize, stopResizing]);
+    return [sidebarRef, currentSidebarWidth, startResizing];
+}
 
 const Logo = ({ logo }) => {
     var _a;

package/index.js

@@ -1292,13 +1292,14 @@ function ExampleMenu({ examples, requestBody, onChange }) {
     return (React__namespace.createElement(mosaic.Menu, { "aria-label": "Examples", items: menuItems, renderTrigger: ({ isOpen }) => (React__namespace.createElement(mosaic.Button, { appearance: "minimal", size: "sm", iconRight: ['fas', 'sort'], active: isOpen }, "Examples")) }));
 }
 
-const useGenerateExampleFromMediaTypeContent = (mediaTypeContent, chosenExampleIndex, { skipReadOnly, skipWriteOnly, skipNonRequired } = {}) => {
+const useGenerateExampleFromMediaTypeContent = (mediaTypeContent, chosenExampleIndex, { skipReadOnly, skipWriteOnly, skipNonRequired, ticks } = {}) => {
     const document = useDocument();
     return React__default["default"].useMemo(() => generateExampleFromMediaTypeContent(mediaTypeContent, document, chosenExampleIndex, {
         skipNonRequired,
         skipWriteOnly,
         skipReadOnly,
-    }), [mediaTypeContent, document, chosenExampleIndex, skipNonRequired, skipReadOnly, skipWriteOnly]);
+        ticks: ticks || 6000,
+    }), [mediaTypeContent, document, chosenExampleIndex, skipNonRequired, skipWriteOnly, skipReadOnly, ticks]);
 };
 const generateExampleFromMediaTypeContent = (mediaTypeContent, document, chosenExampleIndex = 0, options) => {
     var _a, _b;
@@ -1348,6 +1349,7 @@ const generateExamplesFromJsonSchema = (schema) => {
     try {
         const generated = Sampler__namespace.sample(schema, {
             maxSampleDepth: 4,
+            ticks: 6000,
         });
         return generated !== null
             ? [
@@ -2659,23 +2661,53 @@ const ParsedDocs = (_a) => {
 };
 
 const MAX_CONTENT_WIDTH = 1800;
-const SIDEBAR_WIDTH = 300;
-const SidebarLayout = React__namespace.forwardRef(({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_WIDTH }, ref) => {
+const SIDEBAR_MIN_WIDTH = 300;
+const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
+const SidebarLayout = React__namespace.forwardRef(({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH }, ref) => {
     const scrollRef = React__namespace.useRef(null);
+    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
     const { pathname } = reactRouterDom.useLocation();
     React__namespace.useEffect(() => {
         var _a;
         (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
     }, [pathname]);
     return (React__namespace.createElement(mosaic.Flex, { ref: ref, className: "sl-elements-api", pin: true, h: "full" },
-        React__namespace.createElement(mosaic.Flex, { direction: "col", bg: "canvas-100", borderR: true, pt: 8, pos: "sticky", pinY: true, overflowY: "auto", style: {
-                width: `calc((100% - ${maxContentWidth}px) / 2 + ${sidebarWidth}px)`,
-                paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
-                minWidth: `${sidebarWidth}px`,
-            } }, sidebar),
+        React__namespace.createElement(mosaic.Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH}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}px`,
+                } }, sidebar),
+            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: 24, flex: 1, w: "full", overflowY: "auto" },
-            React__namespace.createElement(mosaic.Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
-});
+            React__namespace.createElement(mosaic.Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children))));
+});
+function useResizer(sidebarWidth) {
+    const sidebarRef = React__namespace.useRef(null);
+    const [isResizing, setIsResizing] = React__namespace.useState(false);
+    const [currentSidebarWidth, setCurrentSidebarWidth] = React__namespace.useState(sidebarWidth);
+    const startResizing = React__namespace.useCallback(() => {
+        setIsResizing(true);
+    }, []);
+    const stopResizing = React__namespace.useCallback(() => {
+        setIsResizing(false);
+    }, []);
+    const resize = React__namespace.useCallback(mouseMoveEvent => {
+        if (isResizing) {
+            const value = mouseMoveEvent.clientX - sidebarRef.current.getBoundingClientRect().left;
+            setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
+        }
+    }, [isResizing]);
+    React__namespace.useEffect(() => {
+        window.addEventListener('mousemove', resize);
+        window.addEventListener('mouseup', stopResizing, { passive: true });
+        return () => {
+            window.removeEventListener('mousemove', resize);
+            window.removeEventListener('mouseup', stopResizing);
+        };
+    }, [resize, stopResizing]);
+    return [sidebarRef, currentSidebarWidth, startResizing];
+}
 
 const Logo = ({ logo }) => {
     var _a;

package/index.mjs

@@ -1238,13 +1238,14 @@ function ExampleMenu({ examples, requestBody, onChange }) {
     return (React.createElement(Menu, { "aria-label": "Examples", items: menuItems, renderTrigger: ({ isOpen }) => (React.createElement(Button, { appearance: "minimal", size: "sm", iconRight: ['fas', 'sort'], active: isOpen }, "Examples")) }));
 }
 
-const useGenerateExampleFromMediaTypeContent = (mediaTypeContent, chosenExampleIndex, { skipReadOnly, skipWriteOnly, skipNonRequired } = {}) => {
+const useGenerateExampleFromMediaTypeContent = (mediaTypeContent, chosenExampleIndex, { skipReadOnly, skipWriteOnly, skipNonRequired, ticks } = {}) => {
     const document = useDocument();
     return React__default.useMemo(() => generateExampleFromMediaTypeContent(mediaTypeContent, document, chosenExampleIndex, {
         skipNonRequired,
         skipWriteOnly,
         skipReadOnly,
-    }), [mediaTypeContent, document, chosenExampleIndex, skipNonRequired, skipReadOnly, skipWriteOnly]);
+        ticks: ticks || 6000,
+    }), [mediaTypeContent, document, chosenExampleIndex, skipNonRequired, skipWriteOnly, skipReadOnly, ticks]);
 };
 const generateExampleFromMediaTypeContent = (mediaTypeContent, document, chosenExampleIndex = 0, options) => {
     var _a, _b;
@@ -1294,6 +1295,7 @@ const generateExamplesFromJsonSchema = (schema) => {
     try {
         const generated = Sampler.sample(schema, {
             maxSampleDepth: 4,
+            ticks: 6000,
         });
         return generated !== null
             ? [
@@ -2605,23 +2607,53 @@ const ParsedDocs = (_a) => {
 };
 
 const MAX_CONTENT_WIDTH = 1800;
-const SIDEBAR_WIDTH = 300;
-const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_WIDTH }, ref) => {
+const SIDEBAR_MIN_WIDTH = 300;
+const SIDEBAR_MAX_WIDTH = 1.5 * SIDEBAR_MIN_WIDTH;
+const SidebarLayout = React.forwardRef(({ sidebar, children, maxContentWidth = MAX_CONTENT_WIDTH, sidebarWidth = SIDEBAR_MIN_WIDTH }, ref) => {
     const scrollRef = React.useRef(null);
+    const [sidebarRef, currentSidebarWidth, startResizing] = useResizer(sidebarWidth);
     const { pathname } = useLocation();
     React.useEffect(() => {
         var _a;
         (_a = scrollRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(0, 0);
     }, [pathname]);
     return (React.createElement(Flex, { ref: ref, className: "sl-elements-api", pin: true, h: "full" },
-        React.createElement(Flex, { direction: "col", bg: "canvas-100", borderR: true, pt: 8, pos: "sticky", pinY: true, overflowY: "auto", style: {
-                width: `calc((100% - ${maxContentWidth}px) / 2 + ${sidebarWidth}px)`,
-                paddingLeft: `calc((100% - ${maxContentWidth}px) / 2)`,
-                minWidth: `${sidebarWidth}px`,
-            } }, sidebar),
+        React.createElement(Flex, { ref: sidebarRef, onMouseDown: (e) => e.preventDefault(), style: { maxWidth: `${SIDEBAR_MAX_WIDTH}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}px`,
+                } }, sidebar),
+            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: 24, flex: 1, w: "full", overflowY: "auto" },
-            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - sidebarWidth}px` }, py: 16 }, children))));
-});
+            React.createElement(Box, { style: { maxWidth: `${maxContentWidth - currentSidebarWidth}px` }, py: 16 }, children))));
+});
+function useResizer(sidebarWidth) {
+    const sidebarRef = React.useRef(null);
+    const [isResizing, setIsResizing] = React.useState(false);
+    const [currentSidebarWidth, setCurrentSidebarWidth] = React.useState(sidebarWidth);
+    const startResizing = React.useCallback(() => {
+        setIsResizing(true);
+    }, []);
+    const stopResizing = React.useCallback(() => {
+        setIsResizing(false);
+    }, []);
+    const resize = React.useCallback(mouseMoveEvent => {
+        if (isResizing) {
+            const value = mouseMoveEvent.clientX - sidebarRef.current.getBoundingClientRect().left;
+            setCurrentSidebarWidth(Math.min(Math.max(SIDEBAR_MIN_WIDTH, value), SIDEBAR_MAX_WIDTH));
+        }
+    }, [isResizing]);
+    React.useEffect(() => {
+        window.addEventListener('mousemove', resize);
+        window.addEventListener('mouseup', stopResizing, { passive: true });
+        return () => {
+            window.removeEventListener('mousemove', resize);
+            window.removeEventListener('mouseup', stopResizing);
+        };
+    }, [resize, stopResizing]);
+    return [sidebarRef, currentSidebarWidth, startResizing];
+}
 
 const Logo = ({ logo }) => {
     var _a;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stoplight/elements-core",
-  "version": "7.7.5",
+  "version": "7.7.7",
   "main": "./index.js",
   "sideEffects": [
     "web-components.min.js",
@@ -26,7 +26,7 @@
   "dependencies": {
     "@stoplight/json": "^3.18.1",
     "@stoplight/json-schema-ref-parser": "^9.0.5",
-    "@stoplight/json-schema-sampler": "0.2.2",
+    "@stoplight/json-schema-sampler": "0.2.3",
     "@stoplight/json-schema-viewer": "^4.9.0",
     "@stoplight/markdown-viewer": "^5.5.0",
     "@stoplight/mosaic": "^1.33.0",

package/utils/exampleGeneration/exampleGeneration.d.ts

@@ -6,7 +6,7 @@ declare type Example = {
     data: string;
 };
 export declare type GenerateExampleFromMediaTypeContentOptions = Sampler.Options;
-export declare const useGenerateExampleFromMediaTypeContent: (mediaTypeContent: IMediaTypeContent | undefined, chosenExampleIndex?: number | undefined, { skipReadOnly, skipWriteOnly, skipNonRequired }?: GenerateExampleFromMediaTypeContentOptions) => string;
+export declare const useGenerateExampleFromMediaTypeContent: (mediaTypeContent: IMediaTypeContent | undefined, chosenExampleIndex?: number | undefined, { skipReadOnly, skipWriteOnly, skipNonRequired, ticks }?: GenerateExampleFromMediaTypeContentOptions) => string;
 export declare const generateExampleFromMediaTypeContent: (mediaTypeContent: IMediaTypeContent | undefined, document: any, chosenExampleIndex?: number, options?: Sampler.Options | undefined) => string;
 export declare const generateExamplesFromJsonSchema: (schema: JSONSchema7) => Example[];
 export declare const exceedsSize: (example: string, size?: number) => boolean;