@stainless-api/docs-ui 0.1.0-beta.80 → 0.1.0-beta.81

package/dist/components/properties.js

@@ -4,7 +4,8 @@ import "../contexts/index.js";
 import { useComponents } from "../contexts/use-components.js";
 import style_default from "../style.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowDownWideNarrowIcon, ArrowUpNarrowWideIcon } from "lucide-react";
+import { ArrowDownWideNarrowIcon, ArrowUpNarrowWideIcon, LinkIcon } from "lucide-react";
+import { Button } from "@stainless-api/ui-primitives";
 
 //#region src/components/properties.tsx
 function PropertyToggle({ target }) {
@@ -49,10 +50,8 @@ function splitDescription(description) {
 function Property({ id, name, typeName, badges, type, declaration, description, title, deprecated, expand, additional, constraints, children }) {
 	const Docs = useComponents();
 	const language = useLanguage();
-	const properties = useSettings()?.properties;
+	const { collapseDescription, showTitle, types } = useSettings()?.properties ?? {};
 	if (useIgnoredResources().includes(id || "")) return null;
-	const { collapseDescription, showTitle } = properties ?? {};
-	const types = properties?.types;
 	const [descFirstLine, descRest] = collapseDescription === "show-first-line" ? splitDescription(description) : [null, description];
 	const textContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		typeof deprecated === "string" && /* @__PURE__ */ jsx("div", {
@@ -117,10 +116,10 @@ function Property({ id, name, typeName, badges, type, declaration, description,
 		className: style_default.PropertyInfo,
 		children: types === "simple" ? simple : rich
 	});
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		className: style_default.Property,
 		"data-stldocs-language": language,
-		children: children || collapseDescription !== false && descRest ? /* @__PURE__ */ jsxs(Docs.Expander, {
+		children: [children || collapseDescription !== false && descRest ? /* @__PURE__ */ jsxs(Docs.Expander, {
 			summary: content,
 			muted: !children,
 			open: expand,
@@ -132,7 +131,14 @@ function Property({ id, name, typeName, badges, type, declaration, description,
 					children
 				})
 			]
-		}) : content
+		}) : content, id && /* @__PURE__ */ jsx(Button, {
+			className: style_default.DeepLinkButton,
+			variant: "outline",
+			size: "sm",
+			href: `#${encodeURIComponent(id)}`,
+			"aria-label": "Link to this property",
+			children: /* @__PURE__ */ jsx(Button.Icon, { icon: LinkIcon })
+		})]
 	});
 }
 

package/dist/languages/http.js

@@ -297,7 +297,7 @@ function MethodInfo({ decl, children }) {
 		});
 		return /* @__PURE__ */ jsxs("div", {
 			className: style_default.MethodInfo,
-			children: [children, implementedLanguages.length > 0 && /* @__PURE__ */ jsxs("div", {
+			children: [children, availableLanguageLinks.length > 0 && /* @__PURE__ */ jsxs("div", {
 				className: clsx("stl-ui-prose", style_default.MethodAvailableLanguages),
 				children: [/* @__PURE__ */ jsx("h5", { children: "Supported Languages" }), /* @__PURE__ */ jsxs("div", {
 					className: style_default.MethodAvailableLanguages,
@@ -375,14 +375,10 @@ function Declaration({ decl }) {
 			}),
 			/* @__PURE__ */ jsx(Lang.Type, { type: decl.type })
 		] });
-		case "HttpDeclTypeAlias": return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-			/* @__PURE__ */ jsx(Identifier, { name: decl.ident }),
-			/* @__PURE__ */ jsx("span", {
-				className: style_default.TextOperator,
-				children: " = "
-			}),
-			/* @__PURE__ */ jsx(Lang.Type, { type: decl.type })
-		] });
+		case "HttpDeclTypeAlias": return /* @__PURE__ */ jsxs(Fragment$1, { children: [/^UnionMember/.test(decl.ident) ? null : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Identifier, { name: decl.ident }), /* @__PURE__ */ jsx("span", {
+			className: style_default.TextOperator,
+			children: " = "
+		})] }), /* @__PURE__ */ jsx(Lang.Type, { type: decl.type })] });
 		case "HttpDeclReference": return /* @__PURE__ */ jsx(Lang.Type, { type: decl.type });
 	}
 }

package/dist/style.d.ts

@@ -172,6 +172,7 @@ declare const _default: {
   readonly BreadcrumbsItem: "stldocs-breadcrumbs-item";
   readonly BreadcrumbsLink: "stldocs-breadcrumbs-link";
   readonly BreadcrumbsNonLink: "stldocs-breadcrumbs-non-link";
+  readonly DeepLinkButton: "stldocs-deep-link-button";
 };
 //#endregion
 export { _default as default };

package/dist/style.js

@@ -171,7 +171,8 @@ var style_default = {
 	Breadcrumbs: "stldocs-breadcrumbs",
 	BreadcrumbsItem: "stldocs-breadcrumbs-item",
 	BreadcrumbsLink: "stldocs-breadcrumbs-link",
-	BreadcrumbsNonLink: "stldocs-breadcrumbs-non-link"
+	BreadcrumbsNonLink: "stldocs-breadcrumbs-non-link",
+	DeepLinkButton: "stldocs-deep-link-button"
 };
 
 //#endregion

package/dist/styles/main.css

@@ -176,7 +176,7 @@
   }
 
   .stldocs-expander-summary-content {
-    width: 100%;
+    max-width: 100%;
   }
 
   .stldocs-property-header {
@@ -340,10 +340,6 @@
 
 .stldocs-root .stldocs-property {
   padding: 0.2rem 0;
-
-  [open] > .stldocs-expander-summary {
-    padding-bottom: 0;
-  }
 }
 
 .stldocs-root .stldocs-property:not(.stldocs-property .stldocs-property) > .stldocs-property-info {

package/dist/styles/primitives.css

@@ -135,21 +135,18 @@
 /* Generic expand/collapse button */
 .stldocs-root .stldocs-expander {
   &[data-stldocs-expander-muted='true'] {
-    .stldocs-icon {
+    .stldocs-expander-summary-icon {
       visibility: hidden;
     }
 
-    &:hover {
-      .stldocs-icon {
-        visibility: visible;
-      }
+    &:hover .stldocs-expander-summary-icon {
+      visibility: visible;
     }
   }
 
   .stldocs-expander-summary {
     cursor: pointer;
     display: flex;
-    /* padding: 0.4rem 0; */
 
     & > .stldocs-expander-summary-icon {
       margin-right: 8px;
@@ -170,7 +167,8 @@
   &[open],
   &[data-open='true'] {
     & > .stldocs-expander-summary {
-      .stldocs-type-preview[data-stldocs-type-preview='properties'] .stldocs-type-preview-content {
+      .stldocs-type-preview[data-stldocs-type-preview='properties']
+        :is(.stldocs-type-preview-content, .stldocs-type-brace) {
         display: none;
       }
 
@@ -186,7 +184,6 @@
     }
 
     & > .stldocs-expander-content {
-      margin-left: var(--stldocs-expander-margin-shift);
       line-height: 150%;
 
       & > .stldocs-property-children {
@@ -200,6 +197,11 @@
       }
     }
   }
+
+  /* makes a big perf difference in browser calculating layout, even though the UA should do this? */
+  &:not([open], [data-open='true']) .stldocs-expander-content {
+    display: none;
+  }
 }
 
 /* Markdown content */
@@ -438,3 +440,95 @@
   }
 }
 
+/* Deeplink button */
+
+/* Link is not inside <summary> because interactive content in <summary> considered harmful
+ * Subgrid must be applied from the top-level .stldocs-property all the way down to where the
+ * inline summary content is rendered, so that the link button can be positioned at the “end” of
+ * the summary line without actually shrinking the <details> or summary element.
+ */
+.stldocs-root .stldocs-property:has(.stldocs-deep-link-button) {
+  display: grid;
+  /* expander  |  summary content  |  deeplink */
+  grid-template-columns: auto minmax(0, max-content) 1fr;
+  grid-template-rows: auto auto;
+  gap: 0;
+  width: 100%;
+
+  /* expander child */
+  & > .stldocs-expander {
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
+
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+
+    & > .stldocs-expander-summary {
+      grid-column: 1 / -1;
+      grid-row: 1;
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-template-rows: subgrid;
+      & > .stldocs-expander-summary-icon {
+        grid-column: 1;
+      }
+      & > .stldocs-expander-summary-content {
+        grid-column: 2;
+      }
+    }
+
+    &::details-content,
+    & > .stldocs-expander-content {
+      grid-row: 2;
+      grid-column: 2 / -1;
+    }
+  }
+
+  /* non-expanding child */
+  & > .stldocs-property-info {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  & > .stldocs-deep-link-button {
+    grid-column: span 1 / -1;
+    grid-row: 1;
+    align-self: center;
+    justify-self: start;
+    margin-left: 0.25em;
+    display: none;
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+    animation: stldocs-deep-link-delay-enter 0.2s ease-out;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  /* show link button when expander summary is hovered */
+  & > .stldocs-expander:has(> .stldocs-expander-summary:is(:hover, :focus-within)) + .stldocs-deep-link-button,
+  /* show link button when non-expander rows are hovered */
+  &:not(:has(> .stldocs-expander)):hover > .stldocs-deep-link-button,
+  /* keep it visible when it itself is hovered or focused */
+  & > .stldocs-deep-link-button:is(:hover, :focus) {
+    display: flex;
+  }
+}
+
+@keyframes stldocs-deep-link-delay-enter {
+  from {
+    display: none;
+    opacity: 0;
+    scale: 0.85;
+  }
+  to {
+    opacity: 1;
+    scale: 0.99;
+  }
+}
+

package/dist/styles.css

@@ -1527,21 +1527,18 @@ a.stl-ui-button {
 /* Generic expand/collapse button */
 .stldocs-root .stldocs-expander {
   &[data-stldocs-expander-muted='true'] {
-    .stldocs-icon {
+    .stldocs-expander-summary-icon {
       visibility: hidden;
     }
 
-    &:hover {
-      .stldocs-icon {
-        visibility: visible;
-      }
+    &:hover .stldocs-expander-summary-icon {
+      visibility: visible;
     }
   }
 
   .stldocs-expander-summary {
     cursor: pointer;
     display: flex;
-    /* padding: 0.4rem 0; */
 
     & > .stldocs-expander-summary-icon {
       margin-right: 8px;
@@ -1562,7 +1559,8 @@ a.stl-ui-button {
   &[open],
   &[data-open='true'] {
     & > .stldocs-expander-summary {
-      .stldocs-type-preview[data-stldocs-type-preview='properties'] .stldocs-type-preview-content {
+      .stldocs-type-preview[data-stldocs-type-preview='properties']
+        :is(.stldocs-type-preview-content, .stldocs-type-brace) {
         display: none;
       }
 
@@ -1578,7 +1576,6 @@ a.stl-ui-button {
     }
 
     & > .stldocs-expander-content {
-      margin-left: var(--stldocs-expander-margin-shift);
       line-height: 150%;
 
       & > .stldocs-property-children {
@@ -1592,6 +1589,11 @@ a.stl-ui-button {
       }
     }
   }
+
+  /* makes a big perf difference in browser calculating layout, even though the UA should do this? */
+  &:not([open], [data-open='true']) .stldocs-expander-content {
+    display: none;
+  }
 }
 
 /* Markdown content */
@@ -1830,6 +1832,98 @@ a.stl-ui-button {
   }
 }
 
+/* Deeplink button */
+
+/* Link is not inside <summary> because interactive content in <summary> considered harmful
+ * Subgrid must be applied from the top-level .stldocs-property all the way down to where the
+ * inline summary content is rendered, so that the link button can be positioned at the “end” of
+ * the summary line without actually shrinking the <details> or summary element.
+ */
+.stldocs-root .stldocs-property:has(.stldocs-deep-link-button) {
+  display: grid;
+  /* expander  |  summary content  |  deeplink */
+  grid-template-columns: auto minmax(0, max-content) 1fr;
+  grid-template-rows: auto auto;
+  gap: 0;
+  width: 100%;
+
+  /* expander child */
+  & > .stldocs-expander {
+    grid-column: 1 / -1;
+    grid-row: 1 / -1;
+
+    display: grid;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+
+    & > .stldocs-expander-summary {
+      grid-column: 1 / -1;
+      grid-row: 1;
+      display: grid;
+      grid-template-columns: subgrid;
+      grid-template-rows: subgrid;
+      & > .stldocs-expander-summary-icon {
+        grid-column: 1;
+      }
+      & > .stldocs-expander-summary-content {
+        grid-column: 2;
+      }
+    }
+
+    &::details-content,
+    & > .stldocs-expander-content {
+      grid-row: 2;
+      grid-column: 2 / -1;
+    }
+  }
+
+  /* non-expanding child */
+  & > .stldocs-property-info {
+    grid-column: 2;
+    grid-row: 1;
+  }
+
+  & > .stldocs-deep-link-button {
+    grid-column: span 1 / -1;
+    grid-row: 1;
+    align-self: center;
+    justify-self: start;
+    margin-left: 0.25em;
+    display: none;
+    margin-top: -1rem;
+    margin-bottom: -1rem;
+    animation: stldocs-deep-link-delay-enter 0.2s ease-out;
+    animation-delay: 0.3s;
+    animation-fill-mode: both;
+
+    svg {
+      width: 1em;
+      height: 1em;
+    }
+  }
+
+  /* show link button when expander summary is hovered */
+  & > .stldocs-expander:has(> .stldocs-expander-summary:is(:hover, :focus-within)) + .stldocs-deep-link-button,
+  /* show link button when non-expander rows are hovered */
+  &:not(:has(> .stldocs-expander)):hover > .stldocs-deep-link-button,
+  /* keep it visible when it itself is hovered or focused */
+  & > .stldocs-deep-link-button:is(:hover, :focus) {
+    display: flex;
+  }
+}
+
+@keyframes stldocs-deep-link-delay-enter {
+  from {
+    display: none;
+    opacity: 0;
+    scale: 0.85;
+  }
+  to {
+    opacity: 1;
+    scale: 0.99;
+  }
+}
+
 /* Overview page content */
 .stldocs-root .stldocs-overview {
   .stldocs-overview-header {
@@ -2008,7 +2102,7 @@ a.stl-ui-button {
   }
 
   .stldocs-expander-summary-content {
-    width: 100%;
+    max-width: 100%;
   }
 
   .stldocs-property-header {
@@ -2172,10 +2266,6 @@ a.stl-ui-button {
 
 .stldocs-root .stldocs-property {
   padding: 0.2rem 0;
-
-  [open] > .stldocs-expander-summary {
-    padding-bottom: 0;
-  }
 }
 
 .stldocs-root .stldocs-property:not(.stldocs-property .stldocs-property) > .stldocs-property-info {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stainless-api/docs-ui",
   "private": false,
-  "version": "0.1.0-beta.80",
+  "version": "0.1.0-beta.81",
   "publishConfig": {
     "access": "public"
   },