@stoplight/elements-core 7.16.4 → 7.16.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.esm.js +10 -9
- package/index.js +10 -9
- package/index.mjs +10 -9
- package/package.json +2 -2
package/index.esm.js
CHANGED
|
@@ -3325,6 +3325,7 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
|
|
|
3325
3325
|
const container = React.useRef(null);
|
|
3326
3326
|
const child = React.useRef(null);
|
|
3327
3327
|
const firstRender = useFirstRender();
|
|
3328
|
+
const makeSlugAbsoluteRoute = useRouterType() == 'hash';
|
|
3328
3329
|
React.useEffect(() => {
|
|
3329
3330
|
setTimeout(() => {
|
|
3330
3331
|
const scrollPosition = firstRender ? 'center' : 'nearest';
|
|
@@ -3345,28 +3346,28 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
|
|
|
3345
3346
|
if (isDivider(item)) {
|
|
3346
3347
|
return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
|
|
3347
3348
|
}
|
|
3348
|
-
return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3349
|
+
return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3349
3350
|
}))))));
|
|
3350
3351
|
});
|
|
3351
3352
|
const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
|
|
3352
3353
|
return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
|
|
3353
3354
|
});
|
|
3354
|
-
const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
|
|
3355
|
+
const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick }) => {
|
|
3355
3356
|
if (isExternalLink(item)) {
|
|
3356
3357
|
return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
|
|
3357
3358
|
React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
|
|
3358
3359
|
}
|
|
3359
3360
|
else if (isGroup(item) || isNodeGroup(item)) {
|
|
3360
|
-
return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3361
|
+
return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3361
3362
|
}
|
|
3362
3363
|
else if (isNode(item)) {
|
|
3363
|
-
return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
|
|
3364
|
+
return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
|
|
3364
3365
|
item.version && React.createElement(Version, { value: item.version }),
|
|
3365
3366
|
item.type !== 'model' && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
|
|
3366
3367
|
}
|
|
3367
3368
|
return null;
|
|
3368
3369
|
});
|
|
3369
|
-
const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
|
|
3370
|
+
const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick = () => { } }) => {
|
|
3370
3371
|
const activeId = React.useContext(ActiveIdContext);
|
|
3371
3372
|
const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
|
|
3372
3373
|
const hasActive = !!activeId && hasActiveItem(item.items, activeId);
|
|
@@ -3394,7 +3395,7 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMo
|
|
|
3394
3395
|
const showAsActive = hasActive && !isOpen;
|
|
3395
3396
|
let elem;
|
|
3396
3397
|
if (isNodeGroup(item)) {
|
|
3397
|
-
elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3398
|
+
elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3398
3399
|
}
|
|
3399
3400
|
else {
|
|
3400
3401
|
elem = (React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: NODE_TITLE_ICON[item.title] && (React.createElement(Box, { as: Icon, color: NODE_TITLE_ICON_COLOR[item.title], icon: NODE_TITLE_ICON[item.title] })) }));
|
|
@@ -3403,7 +3404,7 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMo
|
|
|
3403
3404
|
elem,
|
|
3404
3405
|
isOpen &&
|
|
3405
3406
|
item.items.map((groupItem, key) => {
|
|
3406
|
-
return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3407
|
+
return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3407
3408
|
})));
|
|
3408
3409
|
});
|
|
3409
3410
|
const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
|
|
@@ -3415,7 +3416,7 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiv
|
|
|
3415
3416
|
React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate", fontSize: isInResponsiveMode ? 'lg' : 'base' }, title),
|
|
3416
3417
|
React.createElement(Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
|
|
3417
3418
|
});
|
|
3418
|
-
const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
|
|
3419
|
+
const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, makeSlugAbsoluteRoute, onClick, onLinkClick = () => { } }) => {
|
|
3419
3420
|
const activeId = React.useContext(ActiveIdContext);
|
|
3420
3421
|
const isActive = activeId === item.slug || activeId === item.id;
|
|
3421
3422
|
const LinkComponent = React.useContext(LinkContext);
|
|
@@ -3431,7 +3432,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
|
|
|
3431
3432
|
onClick(e, isActive ? undefined : true);
|
|
3432
3433
|
}
|
|
3433
3434
|
};
|
|
3434
|
-
return (React.createElement(Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
|
|
3435
|
+
return (React.createElement(Box, { as: LinkComponent, to: makeSlugAbsoluteRoute && !item.slug.startsWith('/') ? `/${item.slug}` : item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
|
|
3435
3436
|
React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
|
|
3436
3437
|
});
|
|
3437
3438
|
const Version = ({ value }) => {
|
package/index.js
CHANGED
|
@@ -3382,6 +3382,7 @@ const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthO
|
|
|
3382
3382
|
const container = React__namespace.useRef(null);
|
|
3383
3383
|
const child = React__namespace.useRef(null);
|
|
3384
3384
|
const firstRender = useFirstRender();
|
|
3385
|
+
const makeSlugAbsoluteRoute = useRouterType() == 'hash';
|
|
3385
3386
|
React__namespace.useEffect(() => {
|
|
3386
3387
|
setTimeout(() => {
|
|
3387
3388
|
const scrollPosition = firstRender ? 'center' : 'nearest';
|
|
@@ -3402,28 +3403,28 @@ const TableOfContents = React__namespace.memo(({ tree, activeId, Link, maxDepthO
|
|
|
3402
3403
|
if (isDivider(item)) {
|
|
3403
3404
|
return React__namespace.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
|
|
3404
3405
|
}
|
|
3405
|
-
return (React__namespace.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3406
|
+
return (React__namespace.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3406
3407
|
}))))));
|
|
3407
3408
|
});
|
|
3408
3409
|
const Divider = React__namespace.memo(({ item, isInResponsiveMode = false }) => {
|
|
3409
3410
|
return (React__namespace.createElement(mosaic.Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
|
|
3410
3411
|
});
|
|
3411
|
-
const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
|
|
3412
|
+
const GroupItem = React__namespace.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick }) => {
|
|
3412
3413
|
if (isExternalLink(item)) {
|
|
3413
3414
|
return (React__namespace.createElement(mosaic.Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
|
|
3414
3415
|
React__namespace.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, icon: ['fas', 'external-link'] }) })));
|
|
3415
3416
|
}
|
|
3416
3417
|
else if (isGroup(item) || isNodeGroup(item)) {
|
|
3417
|
-
return (React__namespace.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3418
|
+
return (React__namespace.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3418
3419
|
}
|
|
3419
3420
|
else if (isNode(item)) {
|
|
3420
|
-
return (React__namespace.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React__namespace.createElement(mosaic.Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React__namespace.createElement(mosaic.Flex, { alignItems: "center" },
|
|
3421
|
+
return (React__namespace.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React__namespace.createElement(mosaic.Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React__namespace.createElement(mosaic.Flex, { alignItems: "center" },
|
|
3421
3422
|
item.version && React__namespace.createElement(Version, { value: item.version }),
|
|
3422
3423
|
item.type !== 'model' && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
|
|
3423
3424
|
}
|
|
3424
3425
|
return null;
|
|
3425
3426
|
});
|
|
3426
|
-
const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
|
|
3427
|
+
const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick = () => { } }) => {
|
|
3427
3428
|
const activeId = React__namespace.useContext(ActiveIdContext);
|
|
3428
3429
|
const [isOpen, setIsOpen] = React__namespace.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
|
|
3429
3430
|
const hasActive = !!activeId && hasActiveItem(item.items, activeId);
|
|
@@ -3451,7 +3452,7 @@ const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInR
|
|
|
3451
3452
|
const showAsActive = hasActive && !isOpen;
|
|
3452
3453
|
let elem;
|
|
3453
3454
|
if (isNodeGroup(item)) {
|
|
3454
|
-
elem = (React__namespace.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3455
|
+
elem = (React__namespace.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3455
3456
|
}
|
|
3456
3457
|
else {
|
|
3457
3458
|
elem = (React__namespace.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: NODE_TITLE_ICON[item.title] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TITLE_ICON_COLOR[item.title], icon: NODE_TITLE_ICON[item.title] })) }));
|
|
@@ -3460,7 +3461,7 @@ const Group = React__namespace.memo(({ depth, item, maxDepthOpenByDefault, isInR
|
|
|
3460
3461
|
elem,
|
|
3461
3462
|
isOpen &&
|
|
3462
3463
|
item.items.map((groupItem, key) => {
|
|
3463
|
-
return (React__namespace.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3464
|
+
return (React__namespace.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3464
3465
|
})));
|
|
3465
3466
|
});
|
|
3466
3467
|
const Item = React__namespace.memo(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
|
|
@@ -3472,7 +3473,7 @@ const Item = React__namespace.memo(({ depth, isActive, id, title, meta, icon, is
|
|
|
3472
3473
|
React__namespace.createElement(mosaic.Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate", fontSize: isInResponsiveMode ? 'lg' : 'base' }, title),
|
|
3473
3474
|
React__namespace.createElement(mosaic.Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
|
|
3474
3475
|
});
|
|
3475
|
-
const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
|
|
3476
|
+
const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, makeSlugAbsoluteRoute, onClick, onLinkClick = () => { } }) => {
|
|
3476
3477
|
const activeId = React__namespace.useContext(ActiveIdContext);
|
|
3477
3478
|
const isActive = activeId === item.slug || activeId === item.id;
|
|
3478
3479
|
const LinkComponent = React__namespace.useContext(LinkContext);
|
|
@@ -3488,7 +3489,7 @@ const Node = React__namespace.memo(({ item, depth, meta, showAsActive, isInRespo
|
|
|
3488
3489
|
onClick(e, isActive ? undefined : true);
|
|
3489
3490
|
}
|
|
3490
3491
|
};
|
|
3491
|
-
return (React__namespace.createElement(mosaic.Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
|
|
3492
|
+
return (React__namespace.createElement(mosaic.Box, { as: LinkComponent, to: makeSlugAbsoluteRoute && !item.slug.startsWith('/') ? `/${item.slug}` : item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
|
|
3492
3493
|
React__namespace.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React__namespace.createElement(mosaic.Box, { as: mosaic.Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
|
|
3493
3494
|
});
|
|
3494
3495
|
const Version = ({ value }) => {
|
package/index.mjs
CHANGED
|
@@ -3325,6 +3325,7 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
|
|
|
3325
3325
|
const container = React.useRef(null);
|
|
3326
3326
|
const child = React.useRef(null);
|
|
3327
3327
|
const firstRender = useFirstRender();
|
|
3328
|
+
const makeSlugAbsoluteRoute = useRouterType() == 'hash';
|
|
3328
3329
|
React.useEffect(() => {
|
|
3329
3330
|
setTimeout(() => {
|
|
3330
3331
|
const scrollPosition = firstRender ? 'center' : 'nearest';
|
|
@@ -3345,28 +3346,28 @@ const TableOfContents = React.memo(({ tree, activeId, Link, maxDepthOpenByDefaul
|
|
|
3345
3346
|
if (isDivider(item)) {
|
|
3346
3347
|
return React.createElement(Divider, { key: key, item: item, isInResponsiveMode: isInResponsiveMode });
|
|
3347
3348
|
}
|
|
3348
|
-
return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3349
|
+
return (React.createElement(GroupItem, { key: key, item: item, depth: 0, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3349
3350
|
}))))));
|
|
3350
3351
|
});
|
|
3351
3352
|
const Divider = React.memo(({ item, isInResponsiveMode = false }) => {
|
|
3352
3353
|
return (React.createElement(Box, { pl: 4, mb: 2, mt: 6, textTransform: "uppercase", fontSize: isInResponsiveMode ? 'lg' : 'sm', lineHeight: "relaxed", letterSpacing: "wide", fontWeight: "bold" }, item.title));
|
|
3353
3354
|
});
|
|
3354
|
-
const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick }) => {
|
|
3355
|
+
const GroupItem = React.memo(({ item, depth, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick }) => {
|
|
3355
3356
|
if (isExternalLink(item)) {
|
|
3356
3357
|
return (React.createElement(Box, { as: "a", href: item.url, target: "_blank", rel: "noopener noreferrer", display: "block" },
|
|
3357
3358
|
React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, depth: depth, title: item.title, meta: React.createElement(Box, { as: Icon, icon: ['fas', 'external-link'] }) })));
|
|
3358
3359
|
}
|
|
3359
3360
|
else if (isGroup(item) || isNodeGroup(item)) {
|
|
3360
|
-
return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3361
|
+
return (React.createElement(Group, { depth: depth, item: item, maxDepthOpenByDefault: maxDepthOpenByDefault, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3361
3362
|
}
|
|
3362
3363
|
else if (isNode(item)) {
|
|
3363
|
-
return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
|
|
3364
|
+
return (React.createElement(Node, { depth: depth, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute, item: item, onLinkClick: onLinkClick, meta: item.meta ? (React.createElement(Box, { color: NODE_META_COLOR[item.meta], textTransform: "uppercase", fontWeight: "medium" }, item.meta)) : (NODE_TYPE_META_ICON[item.type] && (React.createElement(Flex, { alignItems: "center" },
|
|
3364
3365
|
item.version && React.createElement(Version, { value: item.version }),
|
|
3365
3366
|
item.type !== 'model' && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_META_ICON[item.type] }))))) }));
|
|
3366
3367
|
}
|
|
3367
3368
|
return null;
|
|
3368
3369
|
});
|
|
3369
|
-
const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, onLinkClick = () => { } }) => {
|
|
3370
|
+
const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMode, makeSlugAbsoluteRoute, onLinkClick = () => { } }) => {
|
|
3370
3371
|
const activeId = React.useContext(ActiveIdContext);
|
|
3371
3372
|
const [isOpen, setIsOpen] = React.useState(() => isGroupOpenByDefault(depth, item, activeId, maxDepthOpenByDefault));
|
|
3372
3373
|
const hasActive = !!activeId && hasActiveItem(item.items, activeId);
|
|
@@ -3394,7 +3395,7 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMo
|
|
|
3394
3395
|
const showAsActive = hasActive && !isOpen;
|
|
3395
3396
|
let elem;
|
|
3396
3397
|
if (isNodeGroup(item)) {
|
|
3397
|
-
elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3398
|
+
elem = (React.createElement(Node, { depth: depth, item: item, meta: meta, showAsActive: showAsActive, onClick: handleClick, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3398
3399
|
}
|
|
3399
3400
|
else {
|
|
3400
3401
|
elem = (React.createElement(Item, { isInResponsiveMode: isInResponsiveMode, title: item.title, meta: meta, onClick: handleClick, depth: depth, isActive: showAsActive, icon: NODE_TITLE_ICON[item.title] && (React.createElement(Box, { as: Icon, color: NODE_TITLE_ICON_COLOR[item.title], icon: NODE_TITLE_ICON[item.title] })) }));
|
|
@@ -3403,7 +3404,7 @@ const Group = React.memo(({ depth, item, maxDepthOpenByDefault, isInResponsiveMo
|
|
|
3403
3404
|
elem,
|
|
3404
3405
|
isOpen &&
|
|
3405
3406
|
item.items.map((groupItem, key) => {
|
|
3406
|
-
return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode }));
|
|
3407
|
+
return (React.createElement(GroupItem, { key: key, item: groupItem, depth: depth + 1, onLinkClick: onLinkClick, isInResponsiveMode: isInResponsiveMode, makeSlugAbsoluteRoute: makeSlugAbsoluteRoute }));
|
|
3407
3408
|
})));
|
|
3408
3409
|
});
|
|
3409
3410
|
const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiveMode, onClick }) => {
|
|
@@ -3415,7 +3416,7 @@ const Item = React.memo(({ depth, isActive, id, title, meta, icon, isInResponsiv
|
|
|
3415
3416
|
React.createElement(Box, { alignItems: "center", flex: 1, mr: meta ? 1.5 : undefined, ml: icon && 1.5, textOverflow: "truncate", fontSize: isInResponsiveMode ? 'lg' : 'base' }, title),
|
|
3416
3417
|
React.createElement(Flex, { alignItems: "center", fontSize: isInResponsiveMode ? 'base' : 'xs' }, meta)));
|
|
3417
3418
|
});
|
|
3418
|
-
const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, onClick, onLinkClick = () => { } }) => {
|
|
3419
|
+
const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode, makeSlugAbsoluteRoute, onClick, onLinkClick = () => { } }) => {
|
|
3419
3420
|
const activeId = React.useContext(ActiveIdContext);
|
|
3420
3421
|
const isActive = activeId === item.slug || activeId === item.id;
|
|
3421
3422
|
const LinkComponent = React.useContext(LinkContext);
|
|
@@ -3431,7 +3432,7 @@ const Node = React.memo(({ item, depth, meta, showAsActive, isInResponsiveMode,
|
|
|
3431
3432
|
onClick(e, isActive ? undefined : true);
|
|
3432
3433
|
}
|
|
3433
3434
|
};
|
|
3434
|
-
return (React.createElement(Box, { as: LinkComponent, to: item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
|
|
3435
|
+
return (React.createElement(Box, { as: LinkComponent, to: makeSlugAbsoluteRoute && !item.slug.startsWith('/') ? `/${item.slug}` : item.slug, display: "block", textDecoration: "no-underline", className: "ElementsTableOfContentsItem" },
|
|
3435
3436
|
React.createElement(Item, { id: getHtmlIdFromItemId(item.slug || item.id), isActive: isActive || showAsActive, depth: depth, title: item.title, icon: NODE_TYPE_TITLE_ICON[item.type] && (React.createElement(Box, { as: Icon, color: NODE_TYPE_ICON_COLOR[item.type], icon: NODE_TYPE_TITLE_ICON[item.type] })), meta: meta, isInResponsiveMode: isInResponsiveMode, onClick: handleClick })));
|
|
3436
3437
|
});
|
|
3437
3438
|
const Version = ({ value }) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@stoplight/elements-core",
|
|
3
|
-
"version": "7.16.
|
|
3
|
+
"version": "7.16.6",
|
|
4
4
|
"main": "./index.js",
|
|
5
5
|
"sideEffects": [
|
|
6
6
|
"web-components.min.js",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@stoplight/json-schema-ref-parser": "^9.0.5",
|
|
30
30
|
"@stoplight/json-schema-sampler": "0.2.3",
|
|
31
31
|
"@stoplight/json-schema-tree": "^3.0.0",
|
|
32
|
-
"@stoplight/json-schema-viewer": "^4.14.
|
|
32
|
+
"@stoplight/json-schema-viewer": "^4.14.2",
|
|
33
33
|
"@stoplight/markdown-viewer": "^5.6.0",
|
|
34
34
|
"@stoplight/mosaic": "^1.46.1",
|
|
35
35
|
"@stoplight/mosaic-code-editor": "^1.46.1",
|