@stoplight/elements-core 9.0.12 → 9.0.13-beta-0.1

package/index.esm.js

@@ -54,6 +54,7 @@ import omitBy from 'lodash/omitBy.js';
 import { QueryClient, useQueryClient, QueryClientProvider } from 'react-query';
 import { StaticRouter } from 'react-router-dom/server.js';
 import $RefParser from '@stoplight/json-schema-ref-parser';
+import * as PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual.js';
 import * as ReactDOM from 'react-dom';
 
@@ -113,6 +114,8 @@ const isResolvedObjectProxy = (someObject) => {
     return !!someObject[originalObjectSymbol];
 };
 const getOriginalObject = (resolvedObject) => {
+    if (!resolvedObject)
+        return resolvedObject;
     const originalObject = resolvedObject[originalObjectSymbol] || resolvedObject;
     if (!originalObject) {
         return resolvedObject;
@@ -2738,13 +2741,358 @@ const PanelContent = ({ schemes }) => {
     })));
 };
 
+const TYPES = ['string', 'integer', 'boolean', 'any', 'number'];
+function resolvePointer(obj, pointer) {
+    const parts = pointer.replace(/^#\//, '').split('/');
+    return parts.reduce((acc, key) => acc && acc[key], obj);
+}
+function detectCircularPath(path) {
+    const ignored = ['properties', 'items'];
+    const parts = path.split('/').filter(part => !ignored.includes(part));
+    for (let i = 0; i < parts.length - 1; i++) {
+        const current = parts[i];
+        const rest = parts.slice(i + 1);
+        if (rest.includes(current)) {
+            return true;
+        }
+    }
+    return false;
+}
+function dereference(node, root, visited = new WeakSet(), depth = 0, maxDepth = 10) {
+    if (!node || typeof node !== 'object')
+        return node;
+    if (depth > maxDepth)
+        return node;
+    if (node.$ref || node['x-iata-$ref']) {
+        let refPath = node.$ref || node['x-iata-$ref'];
+        if (refPath.includes('#/%24defs')) {
+            refPath = refPath.replace('#/%24defs', '$defs');
+        }
+        else {
+            refPath = refPath.replace('__bundled__', 'definitions');
+        }
+        if (visited.has(node))
+            return { circular: true, $ref: refPath, title: node.title, type: 'any', description: node.description };
+        visited.add(node);
+        const target = resolvePointer(root, refPath);
+        if (!target)
+            return node;
+        const result = Object.assign({}, target);
+        if ('description' in node)
+            result.description = node.description;
+        if ('title' in node)
+            result.title = node.title;
+        return dereference(result, root, visited, depth + 1, maxDepth);
+    }
+    if (Array.isArray(node)) {
+        return node.map(item => dereference(item, root, visited, depth + 1, maxDepth));
+    }
+    const result = {};
+    for (const key in node) {
+        result[key] = dereference(node[key], root, visited, depth + 1, maxDepth);
+    }
+    return result;
+}
+const trimSlashes = (str) => {
+    return str.replace(/^\/|\/$/g, '');
+};
+function isPropertiesAllHidden(path, hideData) {
+    const current = trimSlashes(path);
+    const parts = current.split('/');
+    for (let i = parts.length; i >= 2; i--) {
+        if (parts[i - 1] === 'properties') {
+            const ancestorPropPath = parts.slice(0, i).join('/');
+            const block = hideData.find(h => trimSlashes(h.path) === ancestorPropPath && ancestorPropPath.endsWith('/properties'));
+            if (block && block.required === undefined) {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+function isRequiredOverride(path, hideData) {
+    const entry = hideData.find(h => trimSlashes(h.path) === trimSlashes(path));
+    return entry && typeof entry.required === 'boolean' ? entry.required : undefined;
+}
+function isPathHidden(path, hideData, complexData) {
+    const isComplex = checkIfIsComplex(path, complexData);
+    if (isComplex === null) {
+        return false;
+    }
+    else if (isComplex) {
+        const normalizedPath = trimSlashes(path);
+        const direct = hideData.find(h => trimSlashes(h.path) === normalizedPath);
+        if (direct && direct.required === undefined)
+            return true;
+        if (isPropertiesAllHidden(path, hideData))
+            return true;
+        for (const h of hideData) {
+            const hPath = trimSlashes(h.path);
+            if (h.required !== undefined)
+                continue;
+            if (normalizedPath.length > hPath.length &&
+                normalizedPath.startsWith(hPath) &&
+                (hPath.endsWith('/items') || (hPath.match(/\/items\/[^\/]+$/) && normalizedPath.startsWith(hPath + '/')))) {
+                return true;
+            }
+        }
+        return false;
+    }
+    else {
+        return !hideData.some(h => h.path === path || h.path.startsWith(path + '/'));
+    }
+}
+const checkIfIsComplex = (path, complexData) => {
+    let isComplex = null;
+    for (const complex of complexData) {
+        if (path.startsWith(complex.location)) {
+            isComplex = complex === null || complex === void 0 ? void 0 : complex.isComplex;
+            break;
+        }
+    }
+    return isComplex;
+};
+const LazySchemaTreePreviewer = ({ schema, root = schema, title, level = 1, path = '', hideData = [], complexData = [], parentRequired, propertyKey, _subType, }) => {
+    var _a, _b, _c, _d;
+    const [expanded, setExpanded] = useState(false);
+    const [selectedSchemaIndex, setSelectedSchemaIndex] = useState(0);
+    const [showSchemaDropdown, setShowSchemaDropdown] = useState(false);
+    const [isHoveringSelector, setIsHoveringSelector] = useState(false);
+    const isRoot = level === 1 && (title === undefined || path === '');
+    useEffect(() => {
+        setSelectedSchemaIndex(0);
+    }, [schema === null || schema === void 0 ? void 0 : schema.anyOf, schema === null || schema === void 0 ? void 0 : schema.oneOf]);
+    const thisNodeRequiredOverride = isRequiredOverride(path, hideData);
+    const shouldHideAllChildren = (isRoot && hideData.some(h => trimSlashes(h.path) === 'properties' && h.required === undefined)) ||
+        (!isRoot && isPropertiesAllHidden(path, hideData));
+    const shouldHideNode = useMemo(() => {
+        if (isRoot)
+            return false;
+        if (isPathHidden(path, hideData, complexData) && thisNodeRequiredOverride === undefined)
+            return true;
+        return false;
+    }, [path, hideData, isRoot, thisNodeRequiredOverride, complexData]);
+    if (!schema || shouldHideNode) {
+        return null;
+    }
+    const displayTitle = level === 1 && (title === undefined || path === '') ? '' : (_a = title !== null && title !== void 0 ? title : schema === null || schema === void 0 ? void 0 : schema.title) !== null && _a !== void 0 ? _a : 'Node';
+    const handleToggle = () => {
+        const circular = detectCircularPath(path);
+        if (!circular) {
+            setExpanded(prev => !prev);
+        }
+    };
+    const renderChildren = () => {
+        var _a, _b, _c, _d;
+        if (shouldHideAllChildren)
+            return null;
+        if (!expanded && !isRoot)
+            return null;
+        const children = [];
+        if ((schema === null || schema === void 0 ? void 0 : schema.type) === 'object' && ((schema === null || schema === void 0 ? void 0 : schema.properties) || (schema === null || schema === void 0 ? void 0 : schema.allOf) || (schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf))) {
+            let props = schema === null || schema === void 0 ? void 0 : schema.properties;
+            if (schema === null || schema === void 0 ? void 0 : schema.allOf) {
+                schema === null || schema === void 0 ? void 0 : schema.allOf.forEach((item) => {
+                    props = Object.assign(Object.assign({}, props), item.properties);
+                });
+            }
+            if ((schema === null || schema === void 0 ? void 0 : schema.anyOf) && (schema === null || schema === void 0 ? void 0 : schema.anyOf.length) > 0) {
+                const selectedSchema = (schema === null || schema === void 0 ? void 0 : schema.anyOf[selectedSchemaIndex]) || (schema === null || schema === void 0 ? void 0 : schema.anyOf[0]);
+                props = Object.assign(Object.assign({}, props), selectedSchema.properties);
+            }
+            if ((schema === null || schema === void 0 ? void 0 : schema.oneOf) && (schema === null || schema === void 0 ? void 0 : schema.oneOf.length) > 0) {
+                const selectedSchema = (schema === null || schema === void 0 ? void 0 : schema.oneOf[selectedSchemaIndex]) || (schema === null || schema === void 0 ? void 0 : schema.oneOf[0]);
+                props = Object.assign(Object.assign({}, props), selectedSchema.properties);
+            }
+            for (const [key, child] of Object.entries(props || {})) {
+                const childPath = `${path}/properties/${key}`;
+                const childRequiredOverride = isRequiredOverride(childPath, hideData);
+                const shouldHideChild = isPathHidden(childPath, hideData, complexData) && childRequiredOverride === undefined;
+                const resolved = dereference(child, root);
+                if (!shouldHideChild) {
+                    children.push(React__default.createElement("li", { key: key },
+                        React__default.createElement(LazySchemaTreePreviewer, { schema: resolved, root: root, title: key, level: level + 1, path: childPath, hideData: hideData, complexData: complexData, parentRequired: schema === null || schema === void 0 ? void 0 : schema.required, propertyKey: key, _subType: (_a = resolved === null || resolved === void 0 ? void 0 : resolved.items) === null || _a === void 0 ? void 0 : _a.type })));
+                }
+            }
+        }
+        else if ((schema === null || schema === void 0 ? void 0 : schema.type) === 'array' &&
+            (schema === null || schema === void 0 ? void 0 : schema.items) &&
+            Object.keys(schema === null || schema === void 0 ? void 0 : schema.items).length > 0 &&
+            !((_b = schema === null || schema === void 0 ? void 0 : schema.items) === null || _b === void 0 ? void 0 : _b.circular)) {
+            const resolvedItems = dereference(schema === null || schema === void 0 ? void 0 : schema.items, root);
+            const itemsPath = `${path}/items`;
+            if (resolvedItems && resolvedItems.type === 'object' && resolvedItems.properties) {
+                for (const [key, child] of Object.entries(resolvedItems.properties)) {
+                    const childPath = `${itemsPath}/properties/${key}`;
+                    const childRequiredOverride = isRequiredOverride(childPath, hideData);
+                    const shouldHideChild = isPathHidden(childPath, hideData, complexData) && childRequiredOverride === undefined;
+                    const resolved = dereference(child, root);
+                    if (!shouldHideChild) {
+                        children.push(React__default.createElement("li", { key: key },
+                            React__default.createElement(LazySchemaTreePreviewer, { schema: resolved, root: root, title: key, level: level + 2, path: childPath, hideData: hideData, complexData: complexData, parentRequired: resolvedItems.required, propertyKey: key, _subType: (_c = resolvedItems === null || resolvedItems === void 0 ? void 0 : resolvedItems.items) === null || _c === void 0 ? void 0 : _c.type })));
+                    }
+                }
+            }
+            else if (resolvedItems && resolvedItems.type === 'array' && resolvedItems.items.length > 0) {
+                const childPath = `${path}/items`;
+                const childRequiredOverride = isRequiredOverride(childPath, hideData);
+                const shouldHideChild = isPathHidden(childPath, hideData, complexData) && childRequiredOverride === undefined;
+                if (!shouldHideChild) {
+                    children.push(React__default.createElement("li", { key: "items" },
+                        React__default.createElement(LazySchemaTreePreviewer, { schema: resolvedItems, root: root, title: "items", level: level + 1, path: childPath, hideData: hideData, complexData: complexData, parentRequired: schema === null || schema === void 0 ? void 0 : schema.required, propertyKey: "items", _subType: (_d = resolvedItems === null || resolvedItems === void 0 ? void 0 : resolvedItems.items) === null || _d === void 0 ? void 0 : _d.type })));
+                }
+            }
+        }
+        return children.length > 0 ? React__default.createElement("ul", { className: "ml-6 border-l border-gray-200 pl-2" }, children) : null;
+    };
+    const combinedSchemaSelector = () => {
+        var _a;
+        return (React__default.createElement(React__default.Fragment, null,
+            React__default.createElement(Box, { pos: "fixed", top: 0, left: 0, right: 0, bottom: 0, bg: "transparent", style: { zIndex: 999 }, onClick: () => setShowSchemaDropdown(false) }),
+            React__default.createElement(Box, { pos: "absolute", bg: "canvas", rounded: true, boxShadow: "md", style: {
+                    zIndex: 1000,
+                    top: '100%',
+                    left: 0,
+                    minWidth: '150px',
+                    maxWidth: '200px',
+                    marginTop: '2px',
+                    border: '1px solid rgba(0, 0, 0, 0.1)',
+                }, fontSize: "sm", onClick: (e) => e.stopPropagation() }, (_a = ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf))) === null || _a === void 0 ? void 0 : _a.map((schemaOption, index) => (React__default.createElement(Box, { key: index, px: 3, py: 2, cursor: "pointer", bg: selectedSchemaIndex === index ? 'primary-tint' : 'canvas', fontSize: "xs", display: "flex", alignItems: "center", style: {
+                    borderBottom: index < ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf)).length - 1 ? '1px solid rgba(0, 0, 0, 0.1)' : 'none',
+                    gap: '8px',
+                }, onMouseEnter: (e) => {
+                    if (selectedSchemaIndex !== index) {
+                        e.currentTarget.style.backgroundColor = 'var(--sl-color-canvas-tint)';
+                    }
+                }, onMouseLeave: (e) => {
+                    if (selectedSchemaIndex !== index) {
+                        e.currentTarget.style.backgroundColor = 'var(--sl-color-canvas)';
+                    }
+                }, onClick: () => {
+                    setSelectedSchemaIndex(index);
+                    setShowSchemaDropdown(false);
+                } },
+                React__default.createElement(Box, { flex: 1, color: "body" }, schemaOption.type || 'object'),
+                selectedSchemaIndex === index && (React__default.createElement(Box, { color: "primary", fontSize: "xs" }, "\u2713"))))))));
+    };
+    const renderMinEnums = (schema) => {
+        if (!schema || typeof schema !== 'object')
+            return null;
+        const boxStyle = {
+            background: 'rgba(245, 247, 250, 0.5)',
+            border: '1px solid #a0aec0',
+            borderRadius: '4px',
+            padding: '0px 2px',
+            display: 'inline-block',
+            overflowWrap: 'break-word',
+            textAlign: 'left',
+            maxWidth: 'fit-content',
+            maxHeight: 'fit-content',
+        };
+        if ('minItems' in schema) {
+            const schemaWithMinItems = schema;
+            if (typeof schemaWithMinItems.minItems === 'number') {
+                return (React__default.createElement(Box, { className: "sl-text-muted", fontFamily: "ui", fontWeight: "normal", mr: 2, style: boxStyle }, `>=${schemaWithMinItems.minItems} items`));
+            }
+        }
+        if ('enum' in schema && Array.isArray(schema.enum)) {
+            return (React__default.createElement("div", null,
+                "Allowed values:",
+                ' ',
+                schema.enum.map((val, idx) => (React__default.createElement(Box, { key: idx, className: "sl-text-muted", fontFamily: "ui", fontWeight: "normal", mr: 2, style: boxStyle }, val)))));
+        }
+        return null;
+    };
+    const isRequired = parentRequired && propertyKey && parentRequired.includes(propertyKey);
+    let showRequiredLabel = false;
+    const hideDataEntry = hideData.find(hideEntry => trimSlashes(hideEntry.path) === trimSlashes(path));
+    if ((hideDataEntry === null || hideDataEntry === void 0 ? void 0 : hideDataEntry.required) === true || ((hideDataEntry === null || hideDataEntry === void 0 ? void 0 : hideDataEntry.required) === undefined && isRequired)) {
+        showRequiredLabel = true;
+    }
+    if (schema === null || schema === void 0 ? void 0 : schema.$ref) {
+        schema = dereference(schema, root);
+    }
+    return (React__default.createElement("div", { className: "mb-1" },
+        React__default.createElement(Flex, { maxW: "full", pl: 3, py: 2, "data-test": "schema-row", pos: "relative" },
+            React__default.createElement(VStack, { spacing: 1, maxW: "full", className: "w-full" },
+                React__default.createElement(Flex, { onClick: !isRoot ? handleToggle : undefined, className: `w-full ${isRoot ? '' : 'cursor-pointer'}` },
+                    !isRoot ? (React__default.createElement(Box, { mr: 2, className: "sl-font-mono sl-font-semibold sl-mr-2" },
+                        !TYPES.includes(schema === null || schema === void 0 ? void 0 : schema.type) &&
+                            !detectCircularPath(path) &&
+                            !((_b = schema === null || schema === void 0 ? void 0 : schema.items) === null || _b === void 0 ? void 0 : _b.circular) &&
+                            !(schema === null || schema === void 0 ? void 0 : schema.circular) ? (React__default.createElement("i", { role: "img", "aria-hidden": "true", className: `sl-icon fal ${expanded ? 'fa-chevron-down' : 'fa-chevron-right'} fa-fw fa-sm` })) : (React__default.createElement("span", { className: "sl-icon fal fa-fw fa-sm", "aria-hidden": "true" })),
+                        ' ' + displayTitle)) : null,
+                    !isRoot ? (React__default.createElement(Box, { mr: 2, pos: "relative" },
+                        React__default.createElement(Box, { display: "inline-flex", alignItems: "center", onMouseEnter: () => {
+                                if ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf)) {
+                                    setIsHoveringSelector(true);
+                                }
+                            }, onMouseLeave: () => {
+                                if (!showSchemaDropdown) {
+                                    setIsHoveringSelector(false);
+                                }
+                            }, onClick: (e) => {
+                                if ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf)) {
+                                    e.stopPropagation();
+                                    setShowSchemaDropdown(prev => !prev);
+                                }
+                            }, style: {
+                                cursor: (schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf) ? 'pointer' : 'default',
+                            } },
+                            React__default.createElement("span", { className: "sl-truncate sl-text-muted" },
+                                (() => {
+                                    let typeDisplay = (schema === null || schema === void 0 ? void 0 : schema.type) === 'object' && (schema === null || schema === void 0 ? void 0 : schema.title) ? schema === null || schema === void 0 ? void 0 : schema.title : (schema === null || schema === void 0 ? void 0 : schema.type) || (root === null || root === void 0 ? void 0 : root.title);
+                                    if ((schema === null || schema === void 0 ? void 0 : schema.anyOf) && (schema === null || schema === void 0 ? void 0 : schema.anyOf.length) > 0) {
+                                        return `any of ${typeDisplay}`;
+                                    }
+                                    else if ((schema === null || schema === void 0 ? void 0 : schema.oneOf) && (schema === null || schema === void 0 ? void 0 : schema.oneOf.length) > 0) {
+                                        return `one of ${typeDisplay}`;
+                                    }
+                                    return typeDisplay;
+                                })(),
+                                (schema === null || schema === void 0 ? void 0 : schema.items) && ((_c = schema === null || schema === void 0 ? void 0 : schema.items) === null || _c === void 0 ? void 0 : _c.title) !== undefined ? ` [${(_d = schema === null || schema === void 0 ? void 0 : schema.items) === null || _d === void 0 ? void 0 : _d.title}] ` : null),
+                            ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf)) && (React__default.createElement(Box, { display: "inline-flex", alignItems: "center", ml: 1, style: {
+                                    opacity: isHoveringSelector ? 1 : 0.6,
+                                    transition: 'opacity 0.2s',
+                                } },
+                                React__default.createElement("i", { className: "sl-icon fas fa-chevron-down", style: {
+                                        fontSize: '10px',
+                                        opacity: 0.6,
+                                    } })))),
+                        React__default.createElement("span", { className: "text-gray-500" }, (schema === null || schema === void 0 ? void 0 : schema.format) !== undefined ? `<${schema === null || schema === void 0 ? void 0 : schema.format}>` : null),
+                        ((schema === null || schema === void 0 ? void 0 : schema.anyOf) || (schema === null || schema === void 0 ? void 0 : schema.oneOf)) && showSchemaDropdown && combinedSchemaSelector())) : null),
+                React__default.createElement(Flex, { pl: 1, w: "full", align: "start", direction: "col", style: { overflow: 'visible', paddingLeft: '20px' } },
+                    (schema === null || schema === void 0 ? void 0 : schema.description) && (React__default.createElement(Box, { fontFamily: "ui", fontWeight: "light" },
+                        React__default.createElement("span", { className: "sl-prose sl-markdown-viewer", style: { fontSize: '12px' } }, schema === null || schema === void 0 ? void 0 : schema.description))),
+                    !isRoot && (schema === null || schema === void 0 ? void 0 : schema.examples) !== undefined && (React__default.createElement(Flex, { align: "center", mb: 1, style: { flexWrap: 'wrap' } },
+                        React__default.createElement("span", { className: "text-gray-500", style: { marginRight: 8, flexShrink: 0 } }, "Example"),
+                        React__default.createElement(Box, { className: "sl-text-muted", fontFamily: "ui", fontWeight: "normal", mr: 2, style: {
+                                background: 'rgba(245, 247, 250, 0.5)',
+                                border: '1px solid #a0aec0',
+                                borderRadius: '4px',
+                                padding: '4px 8px',
+                                display: 'inline-block',
+                                overflowWrap: 'break-word',
+                                textAlign: 'left',
+                                maxWidth: '530px',
+                            } }, JSON.stringify(schema === null || schema === void 0 ? void 0 : schema.examples))))),
+                React__default.createElement(Flex, { pl: 1, w: "full", align: "start", direction: "col", style: { overflow: 'visible', paddingLeft: '20px' } }, schema &&
+                    typeof schema === 'object' &&
+                    ('minItems' in schema || 'enum' in schema) &&
+                    renderMinEnums(schema))),
+            !isRoot && (React__default.createElement("label", { className: "inline-flex items-top ml-2" },
+                React__default.createElement(Box, { mr: 2, fontFamily: "ui", fontWeight: "normal" }, showRequiredLabel && (React__default.createElement("div", { className: "sl-ml-2 sl-text-warning" },
+                    React__default.createElement("span", { style: { marginLeft: '10px' } }, "required"))))))),
+        renderChildren()));
+};
+
 const isBodyEmpty = (body) => {
     if (!body)
         return true;
     const { contents = [], description } = body;
     return contents.length === 0 && !(description === null || description === void 0 ? void 0 : description.trim());
 };
-const Body = ({ body, onChange, isHttpWebhookOperation = false }) => {
+const Body = ({ body, onChange, isHttpWebhookOperation = false, disableProps }) => {
     var _a;
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
     const [chosenContent, setChosenContent] = React.useState(0);
@@ -2757,13 +3105,36 @@ const Body = ({ body, onChange, isHttpWebhookOperation = false }) => {
     const { contents = [], description } = body;
     const schema = (_a = contents[chosenContent]) === null || _a === void 0 ? void 0 : _a.schema;
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: body.id, attr: 'description' });
+    const getMaskProperties = () => {
+        const disablePropsConfig = disableProps || [];
+        const absolutePathsToHide = [];
+        disablePropsConfig.forEach(configEntry => {
+            const { location, paths, isComplex } = configEntry;
+            if (paths.length === 0 && !isComplex) {
+                absolutePathsToHide.push({ path: location });
+            }
+            else {
+                paths.forEach((item) => {
+                    const fullPath = location === '#' ? item === null || item === void 0 ? void 0 : item.path : `${location}/${item.path}`;
+                    let object = { path: fullPath };
+                    if (item.hasOwnProperty('required')) {
+                        object = Object.assign(Object.assign({}, object), { required: item === null || item === void 0 ? void 0 : item.required });
+                    }
+                    absolutePathsToHide.push(object);
+                });
+            }
+        });
+        return absolutePathsToHide;
+    };
+    const shouldUseLazySchema = disableProps === null || disableProps === void 0 ? void 0 : disableProps.some(entry => entry.isComplex === true);
+    console.log('!!!!! shouldUseLazySchema body!!!!', shouldUseLazySchema);
     return (React.createElement(VStack, { spacing: 6 },
         React.createElement(SectionSubtitle, { title: "Body", id: "request-body" }, contents.length > 0 && (React.createElement(Flex, { flex: 1, justify: "end" },
             React.createElement(Select, { "aria-label": "Request Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" })))),
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
-        isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: isHttpWebhookOperation ? 'standalone' : 'write', renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))));
+        schema && shouldUseLazySchema ? (React.createElement(LazySchemaTreePreviewer, { schema: schema, hideData: getMaskProperties(), complexData: disableProps })) : (isJSONSchema(schema) && (React.createElement(JsonSchemaViewer, { resolveRef: refResolver, maxRefDepth: maxRefDepth, schema: getOriginalObject(schema), viewMode: isHttpWebhookOperation ? 'standalone' : 'write', renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon })))));
 };
 Body.displayName = 'HttpOperation.Body';
 
@@ -2830,7 +3201,7 @@ const httpOperationParamsToSchema = ({ parameters, parameterType }) => {
     return schema;
 };
 
-const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, isHttpWebhookOperation = false, }) => {
+const Request = ({ operation: { request, request: { path: pathParams = [], headers: headerParams = [], cookie: cookieParams = [], body, query: queryParams = [], } = {}, security, }, hideSecurityInfo, onChange, isHttpWebhookOperation = false, disableProps, }) => {
     if (!request || typeof request !== 'object')
         return null;
     const bodyIsEmpty = isBodyEmpty(body);
@@ -2858,7 +3229,7 @@ const Request = ({ operation: { request, request: { path: pathParams = [], heade
         cookieParams.length > 0 && (React.createElement(VStack, { spacing: 5 },
             React.createElement(SectionSubtitle, { title: "Cookies", id: "request-cookies" }),
             React.createElement(Parameters, { parameterType: "cookie", parameters: cookieParams }))),
-        body && React.createElement(Body, { onChange: onChange, body: body, isHttpWebhookOperation: isHttpWebhookOperation })));
+        body && (React.createElement(Body, { onChange: onChange, body: body, isHttpWebhookOperation: isHttpWebhookOperation, disableProps: disableProps }))));
 };
 Request.displayName = 'HttpOperation.Request';
 const schemeExpandedState = atomWithStorage('HttpOperation_security_expanded', {});
@@ -2889,7 +3260,7 @@ const OptionalMessage$1 = () => {
     return React.createElement(Callout, { appearance: "outline" }, OptionalSecurityMessage);
 };
 
-const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, }) => {
+const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTypeChange, isCompact, disableProps, }) => {
     var _a, _b;
     const responses = sortBy(uniqBy(unsortedResponses, r => r.code), r => r.code);
     const [activeResponseId, setActiveResponseId] = React.useState((_b = (_a = responses[0]) === null || _a === void 0 ? void 0 : _a.code) !== null && _b !== void 0 ? _b : '');
@@ -2922,11 +3293,12 @@ const Responses = ({ responses: unsortedResponses, onStatusCodeChange, onMediaTy
     const tabResponses = (React.createElement(TabList, { density: "compact" }, responses.map(({ code }) => (React.createElement(Tab, { key: code, id: code, intent: codeToIntentVal(code) }, code)))));
     return (React.createElement(VStack, { spacing: 8, as: Tabs, selectedId: activeResponseId, onChange: setActiveResponseId, appearance: "pill" },
         React.createElement(SectionTitle, { title: "Responses", isCompact: isCompact }, isCompact ? compactResponses : tabResponses),
-        isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
-            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange }))))))));
+        isCompact ? (React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange, disableProps: disableProps, statusCode: activeResponseId })) : (React.createElement(TabPanels, { p: 0 }, responses.map(response => (React.createElement(TabPanel, { key: response.code, id: response.code },
+            React.createElement(Response, { response: response, onMediaTypeChange: onMediaTypeChange, disableProps: disableProps, statusCode: response.code }))))))));
 };
 Responses.displayName = 'HttpOperation.Responses';
-const Response = ({ response, onMediaTypeChange }) => {
+const Response = ({ response, onMediaTypeChange, disableProps, statusCode }) => {
+    var _a, _b;
     const { contents = [], headers = [], description } = response;
     const [chosenContent, setChosenContent] = React.useState(0);
     const [refResolver, maxRefDepth] = useSchemaInlineRefResolver();
@@ -2937,6 +3309,29 @@ const Response = ({ response, onMediaTypeChange }) => {
         responseContent && (onMediaTypeChange === null || onMediaTypeChange === void 0 ? void 0 : onMediaTypeChange(responseContent.mediaType));
     }, [responseContent]);
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId: response.id, attr: 'description' });
+    const getMaskProperties = () => {
+        if (!disableProps || !statusCode)
+            return [];
+        const configEntries = disableProps[statusCode] || [];
+        const absolutePathsToHide = [];
+        configEntries.forEach(({ location, paths, isComplex }) => {
+            if (paths.length === 0 && !isComplex) {
+                absolutePathsToHide.push({ path: location });
+            }
+            else {
+                paths.forEach((item) => {
+                    const fullPath = location === '#' ? item === null || item === void 0 ? void 0 : item.path : `${location}/${item.path}`;
+                    let object = { path: fullPath };
+                    if (item.hasOwnProperty('required')) {
+                        object = Object.assign(Object.assign({}, object), { required: item === null || item === void 0 ? void 0 : item.required });
+                    }
+                    absolutePathsToHide.push(object);
+                });
+            }
+        });
+        return absolutePathsToHide;
+    };
+    const shouldUseLazySchema = (_b = (statusCode && ((_a = disableProps === null || disableProps === void 0 ? void 0 : disableProps[statusCode]) === null || _a === void 0 ? void 0 : _a.some(entry => entry.isComplex)))) !== null && _b !== void 0 ? _b : false;
     return (React.createElement(VStack, { spacing: 8, pt: 8 },
         description && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { markdown: description }),
@@ -2948,7 +3343,7 @@ const Response = ({ response, onMediaTypeChange }) => {
             React.createElement(SectionSubtitle, { title: "Body", id: "response-body" },
                 React.createElement(Flex, { flex: 1, justify: "end" },
                     React.createElement(Select, { "aria-label": "Response Body Content Type", value: String(chosenContent), onChange: value => setChosenContent(parseInt(String(value), 10)), options: contents.map((content, index) => ({ label: content.mediaType, value: index })), size: "sm" }))),
-            schema && (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))))));
+            schema && shouldUseLazySchema ? (React.createElement(LazySchemaTreePreviewer, { schema: schema, path: "", hideData: getMaskProperties(), complexData: disableProps && statusCode ? disableProps[statusCode] : [] })) : (React.createElement(JsonSchemaViewer, { schema: getOriginalObject(schema), resolveRef: refResolver, maxRefDepth: maxRefDepth, viewMode: "read", parentCrumbs: ['responses', response.code], renderRootTreeLines: true, nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }))))));
 };
 Response.displayName = 'HttpOperation.Response';
 const codeToIntentVal = (code) => {
@@ -2997,7 +3392,7 @@ const Callback = ({ data, isCompact }) => {
 };
 Callbacks.displayName = 'HttpOperation.Callback';
 
-const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy }) => {
+const HttpOperationComponent = React.memo(({ className, data: unresolvedData, layoutOptions, tryItCredentialsPolicy, tryItCorsProxy, disableProps }) => {
     var _a;
     const { nodeHasChanged } = useOptionsCtx();
     const data = useResolvedObject(unresolvedData);
@@ -3028,11 +3423,11 @@ const HttpOperationComponent = React.memo(({ className, data: unresolvedData, la
             React.createElement(MarkdownViewer, { className: "HttpOperation__Description", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(NodeVendorExtensions, { data: data }),
-        React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo, isHttpWebhookOperation: isHttpWebhookOperation(data) }),
-        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact })),
+        React.createElement(Request, { onChange: setTextRequestBodyIndex, operation: data, hideSecurityInfo: layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideSecurityInfo, isHttpWebhookOperation: isHttpWebhookOperation(data), disableProps: disableProps === null || disableProps === void 0 ? void 0 : disableProps.request }),
+        data.responses && (React.createElement(Responses, { responses: data.responses, onMediaTypeChange: setResponseMediaType, onStatusCodeChange: setResponseStatusCode, isCompact: isCompact, disableProps: disableProps === null || disableProps === void 0 ? void 0 : disableProps.response })),
         ((_a = data.callbacks) === null || _a === void 0 ? void 0 : _a.length) ? React.createElement(Callbacks, { callbacks: data.callbacks, isCompact: isCompact }) : null,
         isCompact && tryItPanel));
-    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !isCompact && tryItPanel }));
+    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('HttpOperation', className), header: header, left: description, right: !(disableProps === null || disableProps === void 0 ? void 0 : disableProps.hideOperationTryIt) && !isCompact && tryItPanel }));
 });
 HttpOperationComponent.displayName = 'HttpOperation.Component';
 const HttpOperation = withErrorBoundary(HttpOperationComponent, {
@@ -3283,7 +3678,7 @@ const HttpServiceComponent = React.memo(({ data: unresolvedData, location = {},
 HttpServiceComponent.displayName = 'HttpService.Component';
 const HttpService = withErrorBoundary(HttpServiceComponent, { recoverableProps: ['data'] });
 
-const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, }) => {
+const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOptions, exportProps, disableProps, }) => {
     var _a, _b;
     const [resolveRef, maxRefDepth] = useSchemaInlineRefResolver();
     const data = useResolvedObject(unresolvedData);
@@ -3306,14 +3701,40 @@ const ModelComponent = ({ data: unresolvedData, className, nodeTitle, layoutOpti
         exportProps && !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideExport) && !isCompact && React.createElement(ExportButton, Object.assign({}, exportProps))));
     const modelExamples = !(layoutOptions === null || layoutOptions === void 0 ? void 0 : layoutOptions.hideModelExamples) && React.createElement(ModelExamples, { data: data, isCollapsible: isCompact });
     const descriptionChanged = nodeHasChanged === null || nodeHasChanged === void 0 ? void 0 : nodeHasChanged({ nodeId, attr: 'description' });
+    const getMaskProperties = () => {
+        const disablePropsConfig = disableProps === null || disableProps === void 0 ? void 0 : disableProps.models;
+        const absolutePathsToHide = [];
+        if (disableProps === null || disableProps === void 0 ? void 0 : disableProps.models) {
+            disablePropsConfig.forEach((configEntry) => {
+                const { location, paths, isComplex } = configEntry;
+                if (paths.length === 0 && !isComplex) {
+                    absolutePathsToHide.push({ path: location });
+                }
+                else {
+                    paths.forEach((item) => {
+                        const fullPath = location === '#' ? item === null || item === void 0 ? void 0 : item.path : `${location}/${item.path}`;
+                        let object = { path: fullPath };
+                        if (item.hasOwnProperty('required')) {
+                            object = Object.assign(Object.assign({}, object), { required: item === null || item === void 0 ? void 0 : item.required });
+                        }
+                        absolutePathsToHide.push(object);
+                    });
+                }
+            });
+        }
+        return absolutePathsToHide;
+    };
+    const shouldUseLazySchema = disableProps && (disableProps === null || disableProps === void 0 ? void 0 : disableProps.models)
+        ? disableProps.models.some((entry) => entry.isComplex === true)
+        : false;
     const description = (React.createElement(VStack, { spacing: 10 },
         data.description && data.type === 'object' && (React.createElement(Box, { pos: "relative" },
             React.createElement(MarkdownViewer, { role: "textbox", markdown: data.description }),
             React.createElement(NodeAnnotation, { change: descriptionChanged }))),
         React.createElement(NodeVendorExtensions, { data: data }),
-        isCompact && modelExamples,
-        React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon, skipTopLevelDescription: true })));
-    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('Model', className), header: header, left: description, right: !isCompact && modelExamples }));
+        !(disableProps === null || disableProps === void 0 ? void 0 : disableProps.hideModelTryIt) && isCompact && modelExamples,
+        data && shouldUseLazySchema ? (React.createElement(LazySchemaTreePreviewer, { schema: data, hideData: getMaskProperties(), complexData: disableProps === null || disableProps === void 0 ? void 0 : disableProps.models })) : (React.createElement(JsonSchemaViewer, { resolveRef: resolveRef, maxRefDepth: maxRefDepth, schema: getOriginalObject(data), nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon, skipTopLevelDescription: true }))));
+    return (React.createElement(TwoColumnLayout, { ref: layoutRef, className: cn('Model', className), header: header, left: description, right: !(disableProps === null || disableProps === void 0 ? void 0 : disableProps.hideModelTryIt) && !isCompact && modelExamples }));
 };
 const ModelExamples = React.memo(({ data, isCollapsible = false }) => {
     var _a;
@@ -3335,30 +3756,41 @@ const Model = withErrorBoundary(ModelComponent, { recoverableProps: ['data'] });
 
 const Docs = React.memo((_a) => {
     var _b;
-    var { nodeType, nodeData, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged, renderExtensionAddon } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged", "renderExtensionAddon"]);
+    var { nodeType, nodeData, disableProps, useNodeForRefResolving = false, refResolver, maxRefDepth, nodeHasChanged, renderExtensionAddon } = _a, commonProps = __rest(_a, ["nodeType", "nodeData", "disableProps", "useNodeForRefResolving", "refResolver", "maxRefDepth", "nodeHasChanged", "renderExtensionAddon"]);
     const parsedNode = useParsedData(nodeType, nodeData);
     if (!parsedNode) {
         (_b = commonProps.nodeUnsupported) === null || _b === void 0 ? void 0 : _b.call(commonProps, 'dataEmpty');
         return null;
     }
-    let elem = React.createElement(ParsedDocs, Object.assign({ node: parsedNode }, commonProps));
+    let elem = React.createElement(ParsedDocs, Object.assign({ node: parsedNode, disableProps: disableProps }, commonProps));
     if (useNodeForRefResolving) {
         elem = (React.createElement(InlineRefResolverProvider, { document: parsedNode.data, resolver: refResolver, maxRefDepth: maxRefDepth }, elem));
     }
     return (React.createElement(ElementsOptionsProvider, { nodeHasChanged: nodeHasChanged, renderExtensionAddon: renderExtensionAddon }, elem));
 });
+const getTryItVisibility = (disableProps) => {
+    var _a, _b, _c, _d;
+    if (!disableProps)
+        return { hideOperationTryIt: false, hideModelTryIt: false };
+    const requestHasComplex = (_b = (_a = disableProps.request) === null || _a === void 0 ? void 0 : _a.some(item => item.isComplex)) !== null && _b !== void 0 ? _b : false;
+    const responseHasComplex = Object.values(disableProps.response || {}).some(arr => arr.some(item => item.isComplex));
+    const hideOperationTryIt = requestHasComplex || responseHasComplex;
+    const hideModelTryIt = (_d = (_c = disableProps.models) === null || _c === void 0 ? void 0 : _c.some(item => item.isComplex)) !== null && _d !== void 0 ? _d : false;
+    return { hideOperationTryIt, hideModelTryIt };
+};
 const ParsedDocs = (_a) => {
-    var { node, nodeUnsupported } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported"]);
+    var { node, nodeUnsupported, disableProps } = _a, commonProps = __rest(_a, ["node", "nodeUnsupported", "disableProps"]);
+    const { hideOperationTryIt, hideModelTryIt } = getTryItVisibility(disableProps);
     switch (node.type) {
         case 'article':
             return React.createElement(Article, Object.assign({ data: node.data }, commonProps));
         case 'http_operation':
         case 'http_webhook':
-            return React.createElement(HttpOperation, Object.assign({ data: node.data }, commonProps));
+            return React.createElement(HttpOperation, Object.assign({ data: node.data, disableProps: Object.assign(Object.assign({}, disableProps), { hideOperationTryIt }) }, commonProps));
         case 'http_service':
             return React.createElement(HttpService, Object.assign({ data: node.data }, commonProps));
         case 'model':
-            return React.createElement(Model, Object.assign({ data: node.data }, commonProps));
+            return React.createElement(Model, Object.assign({ data: node.data, disableProps: Object.assign(Object.assign({}, disableProps), { hideModelTryIt }) }, commonProps));
         default:
             nodeUnsupported === null || nodeUnsupported === void 0 ? void 0 : nodeUnsupported('invalidType');
             return null;
@@ -4104,12 +4536,25 @@ const doBundle = (data, baseUrl) => {
     }
 };
 
-const Styled = ({ children }) => {
-    return (React.createElement(Box, { className: "sl-elements sl-antialiased", fontFamily: "ui", fontSize: "base", color: "body", h: "full" }, children));
+const scopeClassName = 'sl-elements';
+class Styled extends React.Component {
+    getChildContext() {
+        return {
+            blueprintPortalClassName: scopeClassName,
+        };
+    }
+    render() {
+        return (React.createElement(Box, { className: "sl-elements sl-antialiased", fontFamily: "ui", fontSize: "base", color: "body", h: "full" }, this.props.children));
+    }
+}
+Styled.childContextTypes = {
+    blueprintPortalClassName: PropTypes.string,
 };
 function withStyles(Component) {
-    const Inner = props => (React.createElement(Styled, null,
-        React.createElement(Component, Object.assign({}, props))));
+    const Inner = props => {
+        return (React.createElement(Styled, null,
+            React.createElement(Component, Object.assign({}, props))));
+    };
     Inner.displayName = `withStyles(${getDisplayName(Component)})`;
     return Inner;
 }
@@ -4159,7 +4604,7 @@ const createElementClass = (Component, propDescriptors) => {
         }
         disconnectedCallback() {
             if (this._mountPoint) {
-                ReactDOM.render(null, this._mountPoint);
+                ReactDOM.unmountComponentAtNode(this._mountPoint);
                 this.removeChild(this._mountPoint);
                 this._mountPoint = undefined;
             }