@salesforcedevs/dx-components 1.40.0 → 1.40.1-ai-toolbar-action

package/package.json

@@ -1,48 +1,48 @@
 {
-    "name": "@salesforcedevs/dx-components",
-    "version": "1.40.0",
-    "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": "db75cd19dd7a77fe4e09856439c4905c32e64d1f"
-}
+  "name": "@salesforcedevs/dx-components",
+  "version": "1.40.1-ai-toolbar-action",
+  "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"
+  },
+  "stableVersion": "1.40.1"
+}

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

@@ -14,6 +14,34 @@
     display: none;
 }
 
+.menu-fit-content::part(content) {
+    width: 282px;
+    padding: var(--dx-g-spacing-sm) 0;
+    border-radius: var(--dx-g-spacing-sm);
+    box-shadow: var(--dx-g-box-shadow-lg);
+}
+
+.menu-fit-content .menu_list {
+    width: 100%;
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+}
+
+.menu-fit-content.menu-nested .menu_option:not(:first-child) {
+    border-top: var(--border);
+    margin-top: 0;
+    padding-top: var(--dx-g-spacing-sm);
+}
+
+.menu-fit-content .menu_heading {
+    margin: 0;
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    font-family: var(--dx-g-font-sans);
+    line-height: var(--dx-g-spacing-mlg);
+    text-transform: none;
+    color: var(--dx-g-gray-10);
+}
+
 @media screen and (max-width: 1000px) {
     .menu-nested .menu_option:not(:first-child) {
         border-top: var(--border);

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

@@ -2,7 +2,7 @@
     <dx-popover
         aria-label={ariaLabel}
         class={className}
-        full-width={fullWidth}
+        full-width={effectiveFullWidth}
         offset={offset}
         onclose={onClose}
         open-on-hover={openOnHover}
@@ -10,7 +10,7 @@
         page-padding={pagePadding}
         placement={placement}
         small={small}
-        width={width}
+        width={effectiveWidth}
     >
         <slot slot="control"></slot>
         <div
@@ -33,6 +33,7 @@
                     option={option}
                     nav-item-label={navItemLabel}
                     variant={variant}
+                    width-mode={widthMode}
                 ></dx-dropdown-option>
                 <div
                     key={option.id}
@@ -52,6 +53,7 @@
                             onselect={onOptionClick}
                             option={suboption}
                             nav-item-label={navItemLabel}
+                            width-mode={widthMode}
                         ></dx-dropdown-option>
                     </template>
                     <dx-button

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

@@ -2,7 +2,8 @@ import {
     AnalyticsPayload,
     OptionWithNested,
     PopperPlacement,
-    DropdownVariant
+    DropdownVariant,
+    DropdownWidthMode
 } from "typings/custom";
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
@@ -37,6 +38,7 @@ export default class Dropdown extends LightningElement {
     @api fullWidth?: boolean | null;
     @api navItemLabel: string | null = null;
     @api variant: DropdownVariant = "base";
+    @api widthMode: DropdownWidthMode = "fixed";
 
     // props forwarded to dropdown option
     @api analyticsEvent?: string;
@@ -80,12 +82,34 @@ export default class Dropdown extends LightningElement {
         return this.areOptionsEmpty ? null : "menu";
     }
 
+    private get isFitContent() {
+        return this.widthMode === "fit-content";
+    }
+
+    private get effectiveWidth() {
+        return this.isFitContent ? null : this.width;
+    }
+
+    private get effectiveFullWidth() {
+        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 && this.options.length >= 2 && "menu-nested-2-col",
+            this.isNested &&
+                this.options.length >= 2 &&
+                !fitContent &&
+                "menu-nested-2-col",
             this.offset && `menu-offset-${this.offset}`,
-            this.areOptionsEmpty && "menu-hidden"
+            this.areOptionsEmpty && "menu-hidden",
+            fitContent && "menu-fit-content"
         );
     }
 

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

@@ -101,6 +101,47 @@
     padding-bottom: var(--dx-g-spacing-xs);
 }
 
+.option-fit-content {
+    padding: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
+}
+
+.option-fit-content .option_details {
+    align-items: flex-start;
+    gap: var(--dx-g-spacing-sm);
+    min-width: 0;
+    flex: 1;
+}
+
+.option-fit-content .option_description {
+    margin-top: 0;
+}
+
+.option-fit-content .option_label {
+    display: block;
+    color: var(--dx-g-gray-10);
+    font-weight: var(--dx-g-font-normal);
+    line-height: var(--dx-g-spacing-lg);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.option-fit-content.option-active .option_label {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
+.option-fit-content .option_icon {
+    order: 1;
+    margin-right: 0;
+    margin-left: var(--dx-g-spacing-2xl);
+}
+
+.option-fit-content .option_icon::part(svg) {
+    width: var(--dx-g-icon-size-md) !important;
+    height: var(--dx-g-icon-size-md) !important;
+    fill: var(--dx-g-gray-50) !important;
+}
+
 .option-indented:not([data-index="0"]) {
     --base-indentation: calc(var(--dx-g-spacing-md) + var(--shape-width));
     --shape-width: 8px;

package/src/modules/dx/dropdownOption/dropdownOption.ts

@@ -3,7 +3,8 @@ import cx from "classnames";
 import {
     OptionWithNested,
     AnalyticsPayload,
-    DropdownVariant
+    DropdownVariant,
+    DropdownWidthMode
 } from "typings/custom";
 import { track } from "dxUtils/analytics";
 
@@ -16,6 +17,7 @@ export default class DropdownOption extends LightningElement {
     @api analyticsPayload?: AnalyticsPayload | undefined;
     @api indexPosition: number = 0;
     @api variant: DropdownVariant = "base";
+    @api widthMode: DropdownWidthMode = "fixed";
 
     @api focus() {
         const option = this.template.querySelector(".option");
@@ -29,7 +31,8 @@ export default class DropdownOption extends LightningElement {
         return cx(
             "option",
             this.active && "option-active",
-            this.variant && `option-${this.variant}`
+            this.variant && `option-${this.variant}`,
+            this.widthMode === "fit-content" && "option-fit-content"
         );
     }
 

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

@@ -65,7 +65,8 @@ export class TreeHandler {
             isChildrenLoading: node.isChildrenLoading || false,
             link: node.link,
             method: node.method,
-            showForwardArrow: node.showForwardArrow
+            showForwardArrow: node.showForwardArrow,
+            redirectToChild: node.redirectToChild
         };
 
         const mapItem = { node: convertedNode, parent };

package/src/modules/dx/treeItem/treeItem.ts

@@ -49,6 +49,10 @@ export default class TreeItem extends LightningElement {
         return this.hasChildren || this.isChildrenLoading;
     }
 
+    private get isContentlessParent(): boolean {
+        return this.isParent && !!this._treeNode?.redirectToChild;
+    }
+
     private get showChildren(): boolean {
         return this.isExpanded && this.hasChildren;
     }
@@ -140,6 +144,23 @@ export default class TreeItem extends LightningElement {
     private onLinkClick(event: Event): void {
         this.preventDefaultLinkBehavior(event);
 
+        /**
+         * A content-less parent that redirects to a content child navigates
+         * like a normal link (navigation handles selection and ancestor
+         * expansion). A content-less parent whose chain has no content page to
+         * redirect to only expands, it is never selected.
+         */
+        if (this.isContentlessParent) {
+            if (this._treeNode.link?.href) {
+                this.sendGtm(event);
+                return;
+            }
+            const isSelectAction = false;
+            this.doExpand(isSelectAction);
+            this.sendGtm(event);
+            return;
+        }
+
         if (this.isParent) {
             const isSelectAction = true;
             this.doExpand(isSelectAction);

package/src/modules/dx/treeTile/treeTile.html

@@ -1,5 +1,5 @@
 <template>
-    <a href={href} class={tileClass} target={target}>
+    <a href={href} class={tileClass} target={target} aria-label={linkAriaLabel}>
         <div class="flex indentation" role="heading" aria-level={tileAriaLevel}>
             <div class="flex tile-expand-icon tile-icon" if:true={showArrow}>
                 <dx-icon

package/src/modules/dx/treeTile/treeTile.ts

@@ -37,6 +37,28 @@ export default class TreeTile extends LightningElement {
         return this.treeNode.level + 2;
     }
 
+    /**
+     * Accessible name for the link. If a parent redirects to its first child,
+     * include both the parent and child labels so the destination is clear to
+     * screen reader users (WCAG 2.4.4)
+     */
+    get linkAriaLabel(): string | null {
+        if (!this.treeNode.redirectToChild || !this.treeNode.link?.href) {
+            return null;
+        }
+        /**
+         * The redirect can target a deep descendant, so walk the first-child
+         * chain to the node that owns the destination link and name it.
+         */
+        let destination = this.treeNode.children?.[0];
+        while (destination?.redirectToChild) {
+            destination = destination.children?.[0];
+        }
+        return destination?.link?.href === this.treeNode.link.href
+            ? `${this.treeNode.label}, opens ${destination.label}`
+            : null;
+    }
+
     private get iconSize() {
         return "xsmall";
     }

package/LICENSE

@@ -1,12 +0,0 @@
-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.