@salesforcedevs/dx-components 1.40.7-tlv-alpha → 1.40.8

package/LICENSE

@@ -0,0 +1,12 @@
+Copyright (c) 2020, Salesforce.com, Inc.
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
+
+* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/lwc.config.json

@@ -1,7 +1,8 @@
 {
     "modules": [
         { "dir": "src/modules" },
-        { "npm": "@salesforcedevs/dw-components" }
+        { "npm": "@salesforcedevs/dw-components" },
+        { "npm": "@salesforcedevs/docs-components" }
     ],
     "expose": [
         "dx/agenda",
@@ -110,7 +111,6 @@
         "dx/tooltip",
         "dx/trafficLabeler",
         "dx/tree",
-        "dx/versionPicker",
         "dx/typeBadge",
         "dx/vimeoPlayer",
         "dxBaseElements/headerBase",
@@ -140,7 +140,6 @@
         "dxUtils/lwc",
         "dxUtils/urlWatcher",
         "dxUtils/normalizers",
-        "dxUtils/topicVersion",
         "dxUtils/queryCoordinator",
         "dxUtils/recentSearches",
         "dxUtils/regexps",

package/package.json

@@ -1,47 +1,48 @@
 {
-  "name": "@salesforcedevs/dx-components",
-  "version": "1.40.7-tlv-alpha",
-  "description": "DX Lightning web components",
-  "license": "MIT",
-  "engines": {
-    "node": "22.x"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@coveo/headless": "3.22.2",
-    "@floating-ui/dom": "1.5.1",
-    "@optimizely/optimizely-sdk": "5.3.0",
-    "@shikijs/colorized-brackets": "^3.12.2",
-    "@types/throttle-debounce": "5.0.2",
-    "@vimeo/player": "2.22.0",
-    "classnames": "2.5.1",
-    "composed-offset-position": "0.0.4",
-    "coveo-search-ui": "2.10113.0",
-    "debounce": "1.2.1",
-    "js-cookie": "3.0.5",
-    "lodash.defaults": "4.2.0",
-    "lodash.get": "4.4.2",
-    "lodash.kebabcase": "4.1.1",
-    "memoize-one": "6.0.0",
-    "microtip": "0.2.2",
-    "shiki": "^3.12.2",
-    "throttle-debounce": "5.0.0",
-    "uuid": "9.0.1"
-  },
-  "devDependencies": {
-    "@types/classnames": "2.3.1",
-    "@types/debounce": "1.2.4",
-    "@types/js-cookie": "3.0.6",
-    "@types/lodash.defaults": "4.2.9",
-    "@types/lodash.get": "4.4.9",
-    "@types/lodash.kebabcase": "4.1.9",
-    "@types/luxon": "3.4.2",
-    "@types/uuid": "8.3.4",
-    "@types/vimeo__player": "2.18.3",
-    "eventsourcemock": "2.0.0",
-    "luxon": "3.4.4",
-    "msw": "^2.12.4"
-  }
-}
+    "name": "@salesforcedevs/dx-components",
+    "version": "1.40.8",
+    "description": "DX Lightning web components",
+    "license": "MIT",
+    "engines": {
+        "node": "22.x"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@coveo/headless": "3.22.2",
+        "@floating-ui/dom": "1.5.1",
+        "@optimizely/optimizely-sdk": "5.3.0",
+        "@shikijs/colorized-brackets": "^3.12.2",
+        "@types/throttle-debounce": "5.0.2",
+        "@vimeo/player": "2.22.0",
+        "classnames": "2.5.1",
+        "composed-offset-position": "0.0.4",
+        "coveo-search-ui": "2.10113.0",
+        "debounce": "1.2.1",
+        "js-cookie": "3.0.5",
+        "lodash.defaults": "4.2.0",
+        "lodash.get": "4.4.2",
+        "lodash.kebabcase": "4.1.1",
+        "memoize-one": "6.0.0",
+        "microtip": "0.2.2",
+        "shiki": "^3.12.2",
+        "throttle-debounce": "5.0.0",
+        "uuid": "9.0.1"
+    },
+    "devDependencies": {
+        "@types/classnames": "2.3.1",
+        "@types/debounce": "1.2.4",
+        "@types/js-cookie": "3.0.6",
+        "@types/lodash.defaults": "4.2.9",
+        "@types/lodash.get": "4.4.9",
+        "@types/lodash.kebabcase": "4.1.9",
+        "@types/luxon": "3.4.2",
+        "@types/uuid": "8.3.4",
+        "@types/vimeo__player": "2.18.3",
+        "eventsourcemock": "2.0.0",
+        "luxon": "3.4.4",
+        "msw": "^2.12.4"
+    },
+    "gitHead": "e27db400e07f99b4ff4afe048366a0cf152f3c4d"
+}

package/src/modules/dx/button/button.css

@@ -86,11 +86,11 @@
 }
 
 .button.icon-right:not(.slot-empty) > *:nth-child(2) {
-    margin-left: var(--dx-c-button-icon-gap, var(--dx-g-spacing-sm));
+    margin-left: var(--dx-g-spacing-sm);
 }
 
 .button.icon-left:not(.slot-empty) > *:nth-child(2) {
-    margin-right: var(--dx-c-button-icon-gap, var(--dx-g-spacing-sm));
+    margin-right: var(--dx-g-spacing-sm);
 }
 
 .button.style-icon.slot-empty {

package/src/modules/dx/codeBlock/codeBlock.ts

@@ -87,6 +87,12 @@ export default class CodeBlock extends LightningElement {
         this._codeBlock = value.trim();
     }
 
+    /** True once the highlighted code has been rendered into the DOM. */
+    @api
+    get rendered(): boolean {
+        return this._codeBlockRendered;
+    }
+
     @api
     get showLoadingIndicator() {
         return this._showLoadingIndicator;

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

@@ -14,40 +14,12 @@
     display: none;
 }
 
-/* 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: 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
-    );
-}
-
-/* Nested fit-content menus (content action toolbar). Flat fit-content menus,
-   including the version picker, keep the option rules above. */
-.menu-fit-content.menu-nested {
     --dx-c-popover-width: max-content;
     --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
 }
 
-.menu-fit-content.menu-nested .menu_list {
+.menu-fit-content .menu_list {
     width: 100%;
     align-items: flex-start;
     gap: var(--dx-g-spacing-sm);

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

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

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

@@ -82,35 +82,20 @@ 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" || this.widthMode === "fit-end";
+        return this.widthMode === "fit-content";
     }
 
-    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.
     private get effectiveWidth() {
         return this.isFitContent ? null : this.width;
     }
 
     private get effectiveFullWidth() {
-        if (this.widthMode === "full") {
-            return true;
-        }
         return this.isFitContent ? false : this.fullWidth;
     }
 
     private get className() {
         const fitContent = this.isFitContent;
-        if (fitContent && (this.width || this.fullWidth)) {
-            console.error(
-                'The "width-mode=fit-content" and "width"/"full-width" properties cannot be provided simultaneously. "width-mode=fit-content" is prioritized; "width"/"full-width" are ignored.'
-            );
-        }
         return cx(
             this.isNested && "menu-nested",
             this.isNested &&

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

@@ -25,11 +25,8 @@
     display: flex;
     font-family: var(--dx-g-font-sans);
     width: 100%;
-
-    /* Opt-in hooks; defaults preserve today's look. */
-    padding: var(--dx-c-dropdown-option-padding, var(--dx-g-spacing-sm));
-    font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-sm));
-    border-radius: var(--dx-c-dropdown-option-border-radius, 0);
+    padding: var(--dx-g-spacing-sm);
+    font-size: var(--dx-g-text-sm);
     transition: var(--dx-g-transition-hue-1x);
     align-items: center;
     outline: none !important;
@@ -50,10 +47,7 @@
 }
 
 .option-active {
-    --dx-c-dropdown-option-label-color: var(
-        --dx-c-dropdown-option-active-label-color,
-        var(--dx-g-blue-vibrant-50)
-    );
+    --dx-c-dropdown-option-label-color: var(--dx-g-blue-vibrant-50);
 
     background: var(--dx-g-cloud-blue-vibrant-95);
 }
@@ -63,12 +57,8 @@
     flex-direction: column;
     justify-content: center;
     font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-sm));
-    color: var(--dx-c-dropdown-option-label-color, inherit);
+    font-size: var(--dx-g-text-sm);
     text-align: left;
-
-    /* Opt-in: set to 0 to let a long label truncate instead of overflow. */
-    min-width: var(--dx-c-dropdown-option-min-width, auto);
 }
 
 .option-indented .option_details {
@@ -78,20 +68,10 @@
 
 .option_label {
     color: var(--dx-c-dropdown-option-label-color, var(--dx-g-blue-vibrant-50));
-
-    /* Opt-in: set to block so text-overflow:ellipsis applies (ignored on flex). */
-    display: var(--dx-c-dropdown-option-label-display, flex);
+    display: flex;
     align-items: center;
     font-weight: var(--dx-c-dropdown-option-font-weight, var(--dx-g-font-bold));
     font-size: var(--dx-c-dropdown-option-font-size, var(--dx-g-text-base));
-
-    /* Opt-in truncation: consumers set --dx-c-dropdown-option-white-space:
-       nowrap to truncate labels with an ellipsis instead of wrapping.
-       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);
 }
 
 .option-indented .option_label {
@@ -150,10 +130,7 @@
 }
 
 .option-fit-content.option-active .option_label {
-    color: var(
-        --dx-c-dropdown-option-active-label-color,
-        var(--dx-g-blue-vibrant-50)
-    );
+    color: var(--dx-g-blue-vibrant-50);
 }
 
 .option-fit-content .option_icon {

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

@@ -89,15 +89,7 @@ export default class Popover extends LightningElement {
 
             this.dispatchEvent(new CustomEvent("open"));
 
-            this.clearOpenListenersTimer();
-            // Defer so the opening click is not treated as an outside click.
-            // Drop the callback if the popover closes before it runs, or the
-            // document listeners attach with nothing left to remove them.
-            this.openListenersTimer = setTimeout(() => {
-                this.openListenersTimer = undefined;
-                if (!this._open) {
-                    return;
-                }
+            setTimeout(() => {
                 this.setPosition();
                 this.attachListenersTopopover();
             });
@@ -106,15 +98,7 @@ export default class Popover extends LightningElement {
 
     @api
     closePopover(focusControl: boolean = false) {
-        this.clearOpenListenersTimer();
-        if (!this._open) {
-            return;
-        }
         this._open = false;
-        // Hide before aria-expanded changes. :has([aria-expanded]) / :focus-within
-        // stacking rules would otherwise drop position:relative while this menu
-        // is still visible, flashing it against a different offset parent.
-        this.popover?.classList.remove("popover-container_open");
         this.autoUpdateCleanup?.();
         if (focusControl && this.control && this.control.focus) {
             this.control.focus();
@@ -122,28 +106,20 @@ export default class Popover extends LightningElement {
         if (this.control) {
             this.control.setAttribute("aria-expanded", "false");
         }
-        document.removeEventListener(
-            "click",
-            this.interactOutsideListener,
-            true
-        );
+        document.removeEventListener("click", this.interactOutsideListener);
         document.removeEventListener("focusout", this.interactOutsideListener);
-        document.removeEventListener("keydown", this.onDocumentKeydown, true);
         if (this.openOnHover) {
             document.removeEventListener(
                 "mousemove",
                 this.interactOutsideListener
             );
         }
-        this.pointerOpened = false;
         this.dispatchEvent(new CustomEvent("close"));
     }
 
     // PRIVATE VARS
 
     private controlled: boolean = false;
-    private pointerOpened: boolean = false;
-    private openListenersTimer?: ReturnType<typeof setTimeout>;
     private _open: boolean = false;
     private _rendered: boolean = isPrerender();
     private _role: string | null = null;
@@ -156,15 +132,9 @@ export default class Popover extends LightningElement {
     // LIFECYCLE METHODS
 
     disconnectedCallback() {
-        this.clearOpenListenersTimer();
-        document.removeEventListener(
-            "click",
-            this.interactOutsideListener,
-            true
-        );
+        document.removeEventListener("click", this.interactOutsideListener);
         document.removeEventListener("mousemove", this.interactOutsideListener);
         document.removeEventListener("focusout", this.interactOutsideListener);
-        document.removeEventListener("keydown", this.onDocumentKeydown, true);
         this.removeControlListeners();
     }
 
@@ -256,91 +226,17 @@ export default class Popover extends LightningElement {
         switch (e.key) {
             case "ArrowDown": {
                 e.preventDefault();
-                this.pointerOpened = false;
                 if (!this.open) {
                     this.openPopover();
                 }
                 this.dispatchEvent(new CustomEvent("controlarrowdown"));
                 break;
             }
-            case "Esc":
-            case "Escape":
-                this.closeOnEscape(e);
-                break;
             default:
         }
     };
 
-    // Capture on document: click-open leaves focus on the trigger, and slotted
-    // menu options live outside this shadow tree, so the panel's onkeydown
-    // never sees Escape. Only the innermost popover in the event path handles
-    // it, so Escape in another control does not close this menu or cancel that
-    // control's own Escape behavior.
-    private onDocumentKeydown = (e: KeyboardEvent) => {
-        if ((e.key !== "Escape" && e.key !== "Esc") || !this.handlesEscape(e)) {
-            return;
-        }
-        this.closeOnEscape(e);
-    };
-
-    private handlesEscape(e: KeyboardEvent): boolean {
-        if (!this._open || e.defaultPrevented) {
-            return false;
-        }
-        const host = this.template.host;
-        const path = e.composedPath();
-        for (const node of path) {
-            if (node instanceof Element && node.localName === "dx-popover") {
-                return node === host;
-            }
-        }
-        // A non-composed event fired in this shadow or on the trigger does
-        // not list the host. The panel and control listeners still apply.
-        return (
-            (this.popover !== null && path.includes(this.popover)) ||
-            (this.control !== null && path.includes(this.control))
-        );
-    }
-
-    private clearOpenListenersTimer() {
-        if (this.openListenersTimer !== undefined) {
-            clearTimeout(this.openListenersTimer);
-            this.openListenersTimer = undefined;
-        }
-    }
-
-    private closeOnEscape(e: KeyboardEvent) {
-        if (!this.open) {
-            return;
-        }
-        e.preventDefault();
-        this.dispatchRequestCloseEvent("keypress-escape");
-        // Click-open + Escape upgrades :focus-visible on the trigger. Blur so
-        // the closed picker shows hover (pointer still over it) or default,
-        // not the keyboard halo. Keyboard-opened menus still restore focus.
-        const openedWithPointer = this.pointerOpened;
-        this.closePopover(!openedWithPointer);
-        if (openedWithPointer) {
-            this.blurControl();
-        }
-    }
-
-    private blurControl() {
-        const host = this.control;
-        if (!host) {
-            return;
-        }
-        const inner = host.shadowRoot?.activeElement as HTMLElement | null;
-        if (inner && typeof inner.blur === "function") {
-            inner.blur();
-            return;
-        }
-        if (typeof host.blur === "function") {
-            host.blur();
-        }
-    }
-
-    private onControlClick = (e: MouseEvent) => {
+    private onControlClick = () => {
         if (this.controlled && this.open) {
             this.dispatchRequestCloseEvent("click-control");
             return;
@@ -361,10 +257,6 @@ export default class Popover extends LightningElement {
             return;
         }
 
-        // Enter/Space on a button synthesizes a click with detail 0. Only a
-        // pointer click should blur the trigger on Escape; keyboard activation
-        // must leave focus on the control.
-        this.pointerOpened = e.detail > 0;
         this.openPopover();
     };
 
@@ -395,20 +287,16 @@ export default class Popover extends LightningElement {
         switch (e.key) {
             case "Esc":
             case "Escape":
-                this.closeOnEscape(e);
+                this.dispatchRequestCloseEvent("keypress-escape");
+                this.closePopover(true);
                 break;
             default:
         }
     }
 
     private attachListenersTopopover() {
-        // 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("click", this.interactOutsideListener);
         document.addEventListener("focusout", this.interactOutsideListener);
-        document.addEventListener("keydown", this.onDocumentKeydown, true);
         if (this.openOnHover) {
             document.addEventListener(
                 "mousemove",

package/src/modules/dx/sidebar/sidebar.html

@@ -102,7 +102,6 @@
                 for:each={trees}
                 for:item="tree"
                 key={tree.key}
-                language={language}
                 tree-root={tree.tree}
                 onselect={onSelect}
                 value={value}

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -71,7 +71,6 @@
                     for:each={filteredTrees}
                     for:item="tree"
                     key={tree.key}
-                    language={language}
                     tree-root={tree.tree}
                     onselect={onSelect}
                     value={value}

package/src/modules/dx/tree/tree.html

@@ -4,7 +4,6 @@
         is-root
         tree-node={treeRoot}
         selected-key={selectedKey}
-        language={language}
         ontileselected={onTileSelected}
         onexpandcollapse={onExpandCollapse}
         onregister={onRegister}

package/src/modules/dx/tree/tree.ts

@@ -4,10 +4,6 @@ import { toJson } from "dxUtils/normalizers";
 import { TreeHandler } from "./treeHandler";
 
 export default class Tree extends LightningElement {
-    // Must be set before `treeRoot`. Both sidebar templates pass `language`
-    // first; the tree resolves stored topic versions with it while being built.
-    @api language?: string;
-
     @api
     get treeRoot() {
         return this._treeRoot!;
@@ -15,7 +11,7 @@ export default class Tree extends LightningElement {
 
     set treeRoot(value: TreeNode | string) {
         value = toJson(value);
-        this._treeHandler = new TreeHandler(this.language);
+        this._treeHandler = new TreeHandler();
         this._treeRoot = this._treeHandler.initialize(value as TreeNode);
         if (this._value) {
             this.selectedKey = this._treeHandler.getKeyByName(this._value);