@salesforcedevs/dx-components 1.40.0-integration-alpha2 → 1.40.0-topic-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-components",
-  "version": "1.40.0-integration-alpha2",
+  "version": "1.40.0-topic-alpha",
   "description": "DX Lightning web components",
   "license": "MIT",
   "engines": {

package/src/modules/dx/dropdown/dropdown.css

@@ -14,18 +14,30 @@
     display: none;
 }
 
-/* Opt-in fit-content menu: grows to content (capped at the popover's viewport
-   max-width); long labels truncate instead of wrapping. */
+/* Opt-in fit-content menu: hugs the labels (so it can be as narrow as the
+   shortest one) and stops at --dx-c-dropdown-menu-max-width. Defaults still
+   truncate; set --dx-c-dropdown-fit-white-space: normal to wrap instead. */
 .menu-fit-content::part(content) {
+    box-sizing: border-box;
     width: max-content;
+    max-width: var(
+        --dx-c-dropdown-menu-max-width,
+        calc(100vw - var(--dx-g-spacing-lg))
+    );
 }
 
 .menu-fit-content {
     --dx-c-dropdown-option-min-width: 0;
     --dx-c-dropdown-option-label-display: block;
-    --dx-c-dropdown-option-white-space: nowrap;
-    --dx-c-dropdown-option-overflow: hidden;
-    --dx-c-dropdown-option-text-overflow: ellipsis;
+    --dx-c-dropdown-option-white-space: var(
+        --dx-c-dropdown-fit-white-space,
+        nowrap
+    );
+    --dx-c-dropdown-option-overflow: var(--dx-c-dropdown-fit-overflow, hidden);
+    --dx-c-dropdown-option-text-overflow: var(
+        --dx-c-dropdown-fit-text-overflow,
+        ellipsis
+    );
 }
 
 @media screen and (max-width: 1000px) {

package/src/modules/dx/dropdown/dropdown.html

@@ -8,7 +8,7 @@
         open-on-hover={openOnHover}
         open={open}
         page-padding={pagePadding}
-        placement={placement}
+        placement={effectivePlacement}
         small={small}
         width={effectiveWidth}
     >

package/src/modules/dx/dropdown/dropdown.ts

@@ -82,8 +82,14 @@ export default class Dropdown extends LightningElement {
         return this.areOptionsEmpty ? null : "menu";
     }
 
+    // "fit-end" is fit-content, aligned to the trigger's end edge.
+    // "full" matches the trigger width. "fixed" and "fit-content" are unchanged.
     private get isFitContent() {
-        return this.widthMode === "fit-content";
+        return this.widthMode === "fit-content" || this.widthMode === "fit-end";
+    }
+
+    private get effectivePlacement(): PopperPlacement | undefined {
+        return this.widthMode === "fit-end" ? "bottom-end" : this.placement;
     }
 
     // fit-content takes precedence; the misuse is surfaced in className() below.
@@ -92,6 +98,9 @@ export default class Dropdown extends LightningElement {
     }
 
     private get effectiveFullWidth() {
+        if (this.widthMode === "full") {
+            return true;
+        }
         return this.isFitContent ? false : this.fullWidth;
     }
 

package/src/modules/dx/dropdownOption/dropdownOption.css

@@ -87,6 +87,7 @@
        Defaults preserve today's wrapping behavior. */
     white-space: var(--dx-c-dropdown-option-white-space, normal);
     overflow: var(--dx-c-dropdown-option-overflow, visible);
+    overflow-wrap: var(--dx-c-dropdown-option-overflow-wrap, normal);
     text-overflow: var(--dx-c-dropdown-option-text-overflow, clip);
 }
 

package/src/modules/dx/popover/popover.ts

@@ -80,7 +80,11 @@ export default class Popover extends LightningElement {
             this.control.setAttribute("aria-expanded", "true");
 
             if (this.popover) {
-                this.autoUpdateCleanup = autoUpdate(this.control, this.popover, this.setPosition);
+                this.autoUpdateCleanup = autoUpdate(
+                    this.control,
+                    this.popover,
+                    this.setPosition
+                );
             }
 
             this.dispatchEvent(new CustomEvent("open"));
@@ -102,7 +106,11 @@ export default class Popover extends LightningElement {
         if (this.control) {
             this.control.setAttribute("aria-expanded", "false");
         }
-        document.removeEventListener("click", this.interactOutsideListener);
+        document.removeEventListener(
+            "click",
+            this.interactOutsideListener,
+            true
+        );
         document.removeEventListener("focusout", this.interactOutsideListener);
         if (this.openOnHover) {
             document.removeEventListener(
@@ -128,7 +136,11 @@ export default class Popover extends LightningElement {
     // LIFECYCLE METHODS
 
     disconnectedCallback() {
-        document.removeEventListener("click", this.interactOutsideListener);
+        document.removeEventListener(
+            "click",
+            this.interactOutsideListener,
+            true
+        );
         document.removeEventListener("mousemove", this.interactOutsideListener);
         document.removeEventListener("focusout", this.interactOutsideListener);
         this.removeControlListeners();
@@ -291,7 +303,11 @@ export default class Popover extends LightningElement {
     }
 
     private attachListenersTopopover() {
-        document.addEventListener("click", this.interactOutsideListener);
+        // Capture so a click still counts as outside when a descendant
+        // calls stopPropagation (topic version pickers do, so the tree row
+        // does not navigate). Without this, opening a second picker leaves
+        // the first menu open.
+        document.addEventListener("click", this.interactOutsideListener, true);
         document.addEventListener("focusout", this.interactOutsideListener);
         if (this.openOnHover) {
             document.addEventListener(

package/src/modules/dxUtils/topicVersion/topicVersion.ts

@@ -378,31 +378,88 @@ export function getVersionPickerOptions(
     }));
 }
 
-export function resolveSelectedVersion(
+/**
+ * Version whose page (or a descendant of it) is the current URL.
+ * Ignores the session-stored picker selection, which can remember an older
+ * version while the reader is still on the latest page.
+ */
+export function versionForCurrentPage(
     node: VersionedNode | undefined
 ): TopicVersionOption | undefined {
     const versions = node?.versions;
-    if (!node || !versions?.length) {
+    if (!node || !versions?.length || !isBrowser()) {
         return undefined;
     }
 
-    const fromOwnUrl = versions.find((version) =>
-        hrefMatchesCurrentPage(version.link?.href)
+    const hrefs = collectSubtreeCanonicalHrefs(node);
+    const matches = (version: TopicVersionOption) =>
+        hrefMatchesCurrentPage(version.link?.href) ||
+        hrefs.some((href) => hrefMatchesVersion(href, version, versions));
+
+    // Older versions first so a rewritten child URL is not mistaken for latest.
+    const older = versions.find(
+        (version) => version.id !== versions[0].id && matches(version)
     );
-    if (fromOwnUrl) {
-        return fromOwnUrl;
+    if (older) {
+        return older;
     }
 
-    const descendantHrefs = collectSubtreeCanonicalHrefs(node, false);
-    const fromDescendant = versions.find(
-        (version) =>
-            version.id !== versions[0].id &&
-            descendantHrefs.some((href) =>
-                hrefMatchesVersion(href, version, versions)
-            )
-    );
-    if (fromDescendant) {
-        return fromDescendant;
+    return matches(versions[0]) ? versions[0] : undefined;
+}
+
+/**
+ * Deepest versioned topic that contains the current page, with the version
+ * the URL selects. Nested versioned topics own their pages.
+ */
+export function findTopicVersionForCurrentPage(
+    nodes: VersionedNode[] | undefined | null
+): { node: VersionedNode; version: TopicVersionOption } | undefined {
+    let match: { node: VersionedNode; version: TopicVersionOption } | undefined;
+    const walk = (list?: VersionedNode[] | null) => {
+        for (const node of list || []) {
+            const version = versionForCurrentPage(node);
+            if (version) {
+                match = { node, version };
+            }
+            walk(node.children);
+        }
+    };
+    walk(nodes);
+    return match;
+}
+
+/**
+ * Current page rewritten onto the latest topic version. Falls back to the
+ * latest switching URL when the path delta cannot be applied.
+ */
+export function latestHrefForCurrentPage(
+    versions: TopicVersionOption[] | undefined
+): string | undefined {
+    const latest = versions?.[0];
+    if (!latest) {
+        return undefined;
+    }
+    if (!isBrowser()) {
+        return latest.link?.href;
+    }
+
+    const canonical = toCanonicalHref(window.location.pathname, versions);
+    return applyVersionToHref(canonical, latest, versions) || latest.link?.href;
+}
+
+export function resolveSelectedVersion(
+    node: VersionedNode | undefined
+): TopicVersionOption | undefined {
+    const versions = node?.versions;
+    if (!node || !versions?.length) {
+        return undefined;
+    }
+
+    // The open page wins, including a canonical child opened from "View Latest".
+    // Session is only for a picker whose topic is not the current page.
+    const fromUrl = versionForCurrentPage(node);
+    if (fromUrl) {
+        return fromUrl;
     }
 
     const storedId = readTopicVersionSelections()[getTopicVersionKey(node)];