@salesforcedevs/dx-components 0.54.2 → 0.54.7-alpha

package/src/modules/dx/select/select.html

@@ -1,60 +1,57 @@
 <template>
-    <label class={computedLabelClass} for="select">
-        {label}
-        <template if:true={required}>
-            <abbr>*</abbr>
-        </template>
-    </label>
-
-    <div class="slds-form-element__control">
-        <div class="slds-select_container">
-            <select
-                autocomplete={autocomplete}
-                class={selectClass}
-                disabled={disabled}
-                id="select"
-                multiple={multiple}
-                name={name}
-                onblur={handleBlur}
-                onchange={handleChange}
-                onfocus={handleFocus}
-                required={required}
-                accesskey={accessKey}
-                size={size}
-            >
-                <template if:true={placeholder}>
-                    <option if:false={value} value="" disabled>
-                        {placeholder}
-                    </option>
-                </template>
-                <template for:each={options} for:item="option">
-                    <template if:true={option.disabled}>
-                        <option
-                            disabled
-                            key={option.value}
-                            value={option.value}
-                        >
-                            {option.label}
-                        </option>
+    <div class={containerClass}>
+        <label class="form-element_label" for="select">
+            {label}
+            <template if:true={required}>
+                <abbr>*</abbr>
+            </template>
+        </label>
+        <div class="form-element_control">
+            <div class="select_container">
+                <select
+                    autocomplete={autocomplete}
+                    class={selectClass}
+                    disabled={disabled}
+                    id="select"
+                    name={name}
+                    onblur={handleBlur}
+                    onchange={handleChange}
+                    onfocus={handleFocus}
+                    required={required}
+                    accesskey={accessKey}
+                    size={size}
+                >
+                    <template if:true={placeholder}>
+                        <option value="" disabled>{placeholder}</option>
                     </template>
-                    <template if:false={option.disabled}>
-                        <option key={option.value} value={option.value}>
-                            {option.label}
-                        </option>
+                    <template for:each={options} for:item="option">
+                        <template if:true={option.disabled}>
+                            <option
+                                disabled
+                                key={option.value}
+                                value={option.value}
+                            >
+                                {option.label}
+                            </option>
+                        </template>
+                        <template if:false={option.disabled}>
+                            <option key={option.value} value={option.value}>
+                                {option.label}
+                            </option>
+                        </template>
                     </template>
-                </template>
-            </select>
+                </select>
+            </div>
         </div>
+        <template if:true={helpMessage}>
+            <div
+                aria-live="assertive"
+                class="form-element_help"
+                data-help-message
+                id="help-message"
+            >
+                {helpMessage}
+            </div>
+        </template>
     </div>
-
-    <template if:true={_helpMessage}>
-        <div
-            aria-live="assertive"
-            class="slds-form-element__help"
-            data-help-message
-            id="help-message"
-        >
-            {_helpMessage}
-        </div>
-    </template>
 </template>

package/src/modules/dx/select/select.ts

@@ -1,23 +1,141 @@
 import cx from "classnames";
-import { api } from "lwc";
-import LightningSelect from "lightning/select";
-import { toJson } from "utils/normalizers";
+import { LightningElement, api } from "lwc";
+import { SelectOption } from "typings/custom";
+import { toJson, normalizeBoolean } from "dxUtils/normalizers";
 
-export default class Select extends LightningSelect {
+export const DEFAULT_MISSING_MESSAGE = "This field is required";
+
+export default class Select extends LightningElement {
+    @api accessKey!: string;
+    @api autocomplete?: string;
+    @api label?: string;
+    @api messageWhenValueMissing: string = DEFAULT_MISSING_MESSAGE;
+    @api name?: string;
     @api placeholder?: string;
+    @api size?: string;
+
+    @api
+    get disabled() {
+        return this._disabled;
+    }
+
+    set disabled(value) {
+        this._disabled = normalizeBoolean(value);
+    }
+
+    @api
+    get options() {
+        return this._options;
+    }
+
+    set options(value) {
+        this._options = toJson(value);
+    }
 
     @api
-    get jsonOptions() {
-        return this.options;
+    get required() {
+        return this._required;
     }
 
-    set jsonOptions(value) {
-        this.options = toJson(value);
+    set required(value) {
+        this._required = normalizeBoolean(value);
+    }
+
+    @api
+    get value() {
+        return this._value;
+    }
+
+    set value(value) {
+        this._value = value;
+        this.updateSelectValue();
+    }
+
+    _disabled = false;
+    _size = "";
+    _required = false;
+    _options: Array<SelectOption> = [];
+    _value: string = "";
+    _selectElement: HTMLSelectElement | null = null;
+    helpMessage?: string = "";
+
+    renderedCallback(): void {
+        this.updateSelectValue();
+    }
+
+    get containerClass() {
+        return cx("form-element", this.hasError && "has-error");
+    }
+
+    get hasError(): boolean {
+        return !!this.helpMessage;
     }
 
     get selectClass() {
-        return cx("slds-select", {
-            placeholder: !this.value
+        return cx("select-element", {
+            "select-element_placeholder": this.placeholder && !this.value
         });
     }
+
+    get selectElement() {
+        if (!this._selectElement) {
+            this._selectElement =
+                this.template.querySelector<HTMLSelectElement>("select");
+        }
+        return this._selectElement;
+    }
+
+    @api
+    blur(): void {
+        if (this.selectElement) {
+            this.selectElement.blur();
+        }
+    }
+
+    @api
+    focus(): void {
+        if (this.selectElement) {
+            this.selectElement.focus();
+        }
+    }
+
+    @api
+    reportValidity(): boolean {
+        const isInvalid = this._required && !this._value;
+        this.helpMessage = isInvalid
+            ? this.messageWhenValueMissing || DEFAULT_MISSING_MESSAGE
+            : "";
+        return !isInvalid;
+    }
+
+    handleBlur(): void {
+        this.reportValidity();
+        this.dispatchEvent(new CustomEvent("blur"));
+    }
+
+    handleChange(event: Event & { target: HTMLSelectElement }): void {
+        const { value } = event.target;
+        this._value = value;
+        this.dispatchEvent(
+            new CustomEvent("change", {
+                detail: { value }
+            })
+        );
+    }
+
+    handleFocus(): void {
+        this.helpMessage = "";
+        this.dispatchEvent(new CustomEvent("focus"));
+    }
+
+    // We have to do it programmatically because value binding doesn't work apparently.
+    updateSelectValue(): void {
+        if (!this._value && !this.placeholder) {
+            return;
+        }
+
+        if (this.selectElement) {
+            this.selectElement.value = this._value;
+        }
+    }
 }

package/src/modules/dx/sidebar/sidebar.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-sidebar-width: 275px;

package/src/modules/dx/sidebar/sidebar.ts

@@ -1,15 +1,15 @@
 import cx from "classnames";
-import { track as trackAnalytics } from "utils/analytics";
 import { api, track } from "lwc";
 import {
     TreeNode,
     SidebarGtmAction,
     SidebarSearchResult
 } from "typings/custom";
-import { getSidebarSearchParams } from "utils/coveo";
-import { toJson } from "utils/normalizers";
+import { track as trackAnalytics } from "dxUtils/analytics";
+import { getSidebarSearchParams } from "dxUtils/coveo";
+import { toJson } from "dxUtils/normalizers";
 import SidebarSearch from "dx/sidebarSearch";
-import { SidebarBase } from "base-elements/sidebarBase";
+import { SidebarBase } from "dxBaseElements/sidebarBase";
 
 const MOBILE_SIZE_MATCH = "768px";
 const TOGGLE_BUTTON_LABEL = "Toggle Sidebar";

package/src/modules/dx/sidebarOld/sidebarOld.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-sidebar-width: 275px;

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -1,10 +1,10 @@
 import cx from "classnames";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/analytics";
 import { api } from "lwc";
 
 import { TreeNode, SidebarGtmAction } from "typings/custom";
-import { toJson } from "utils/normalizers";
-import { SidebarBase } from "base-elements/sidebarBase";
+import { toJson } from "dxUtils/normalizers";
+import { SidebarBase } from "dxBaseElements/sidebarBase";
 
 const WAIT_TIME = 500;
 const MOBILE_SIZE_MATCH = "768px";

package/src/modules/dx/sidebarSearch/sidebarSearch.ts

@@ -14,9 +14,9 @@ import {
     SearchAppState,
     loadQueryActions
 } from "@coveo/headless";
-import { buildSearchEngine, getSidebarSearchParams } from "utils/coveo";
-import { RecentSearches } from "utils/recentSearches";
-import { toJson } from "utils/normalizers";
+import { buildSearchEngine, getSidebarSearchParams } from "dxUtils/coveo";
+import { RecentSearches } from "dxUtils/recentSearches";
+import { toJson } from "dxUtils/normalizers";
 import {
     Option,
     PopoverRequestCloseType,
@@ -292,7 +292,7 @@ export default class SidebarSearch extends LightningElement {
     }: Result): SidebarSearchResult => {
         // discussion about this normalization here: https://salesforce-internal.slack.com/archives/C020S6784JX/p1639506238376600
 
-        let pathname;
+        let pathname, queryParam;
         if (sfhtml_url__c) {
             pathname = `/docs/${sfhtml_url__c}`;
         } else {
@@ -303,9 +303,15 @@ export default class SidebarSearch extends LightningElement {
                     ? ".html"
                     : "";
             pathname = `${url.pathname}${extension}`;
+            queryParam = url.search;
         }
 
-        const href = `${pathname}?q=${this.value}`;
+        let href;
+        if (queryParam) {
+            href = `${pathname}${queryParam}&q=${this.value}`;
+        } else {
+            href = `${pathname}?q=${this.value}`;
+        }
 
         return {
             title,

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/sidebar";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/sidebar";
 
 a {
     display: flex;

package/src/modules/dx/skipNavLink/skipNavLink.css

@@ -1,4 +1,4 @@
-@import "helpers/text";
+@import "dxHelpers/text";
 
 a {
     left: 0;

package/src/modules/dx/socials/socials.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { normalizeToArray } from "utils/normalizers";
+import { normalizeToArray } from "dxUtils/normalizers";
 
 type Icon = { name: string; symbol: string; baseShareUrl: string };
 

package/src/modules/dx/tab/tab.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 a {
     text-decoration: none;

package/src/modules/dx/tab/tab.ts

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/analytics";
 import cx from "classnames";
 import { TabVariant } from "typings/custom";
-import { normalizeBoolean } from "utils/normalizers";
+import { normalizeBoolean } from "dxUtils/normalizers";
 
 export default class Tab extends LightningElement {
     @api label: string | null = null;

package/src/modules/dx/toc/toc.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-toc-width: 284px;

package/src/modules/dx/toc/toc.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api, track } from "lwc";
 import cx from "classnames";
 import { ContentElement } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 export default class Toc extends LightningElement {
     @api title!: string;

package/src/modules/dx/topics/topics.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { normalizeToArray } from "utils/normalizers";
+import { normalizeToArray } from "dxUtils/normalizers";
 
 export default class Topics extends LightningElement {
     private _topics: Array<string> = [];

package/src/modules/dx/tree/tree.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;

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

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { TreeNode, InternalTreeNode } from "typings/custom";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 import { TreeHandler } from "./treeHandler";
 
 export default class Tree extends LightningElement {

package/src/modules/dx/treeItem/treeItem.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     display: block;

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

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
-import { track } from "utils/analytics";
+import { track } from "dxUtils/analytics";
 import { SidebarGtmAction } from "typings/custom";
-import { isInViewport } from "utils/browser";
+import { isInViewport } from "dxUtils/browser";
 
 const DEFAULT_TARGET = "_self";
 

package/src/modules/dx/treeTile/treeTile.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/sidebar";
+@import "dxHelpers/reset";
+@import "dxHelpers/sidebar";
 
 :host {
     display: block;

package/src/modules/dx/typeBadge/typeBadge.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 .typebadge {
     align-items: center;

package/src/modules/dx/typeBadge/typeBadge.ts

@@ -7,7 +7,7 @@ import {
     BadgeType,
     Brand
 } from "typings/custom";
-import { colorToDxColors } from "utils/css";
+import { colorToDxColors } from "dxUtils/css";
 
 const DEFAULT_TYPE = "typebadge_metadata";
 const VALID_BRANDS: Array<Brand> = [

package/src/modules/dx/typeBadgeGroup/typeBadgeGroup.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { normalizeToArray } from "utils/normalizers";
+import { normalizeToArray } from "dxUtils/normalizers";
 import { TypeBadgeSize } from "typings/custom";
 
 export default class TypeBadgeGroup extends LightningElement {

package/src/modules/dx/vimeoPlayer/vimeoPlayer.css

@@ -1 +1 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";

package/src/modules/{base-elements → dxBaseElements}/headerBase/headerBase.ts

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Brand, Option } from "typings/custom";
-import { toJson } from "utils/normalizers";
-import { track } from "utils/analytics";
+import { Brand, OptionWithLink, OptionWithNested } from "typings/custom";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 const VALID_BRANDS = [
     "analytics",
@@ -61,8 +61,8 @@ export abstract class HeaderBase extends LightningElement {
         this._versions = toJson(value);
     }
 
-    private _navItems!: Option[];
-    private _versions!: Option[];
+    private _navItems!: OptionWithNested[];
+    private _versions!: OptionWithLink[];
     private matchMedia!: MediaQueryList;
     protected mobile: boolean = false;
     private mobileNavMenuValue: string | null = null;

package/src/modules/{base-elements → dxBaseElements}/matchMediaElement/matchMediaElement.ts

@@ -5,7 +5,7 @@ import {
     DEVICE_DESKTOP,
     DEVICE_TABLET,
     DEVICE_MOBILE
-} from "utils/constants";
+} from "dxUtils/constants";
 
 const boilerplate = "screen and ";
 const BREAKPOINT_QUERY_MOBILE = `${boilerplate}(max-width: ${BREAKPOINT_MOBILE})`;

package/src/modules/{helpers → dxHelpers}/card/card.css

@@ -1,4 +1,4 @@
-@import "helpers/button";
+@import "dxHelpers/button";
 
 /* main card base */
 

package/src/modules/{helpers → dxHelpers}/commonHeader/commonHeader.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     z-index: var(--dx-g-z-index-500);

package/src/modules/{utils → dxUtils}/highlight/highlight.ts

@@ -1,4 +1,4 @@
-import { createSearchRegExp } from "utils/regexps";
+import { createSearchRegExp } from "dxUtils/regexps";
 
 const MARK_TAGS = /<\/?mark>/gi;
 

package/src/modules/dxUtils/language/language.ts

@@ -0,0 +1,21 @@
+import { Language } from "typings/custom";
+
+export const getLanguageDisplayTextById = (
+    languages: Language[],
+    languageId: string
+): string => {
+    const language = languages.find(
+        (languageItem) => languageItem.id === languageId
+    );
+    return language ? language.displayText : "";
+};
+
+export const isGivenLanguageSupported = (
+    languages: Language[],
+    languageId: string
+): boolean => {
+    const languageIndex = languages.findIndex(
+        (languageItem) => languageItem.id === languageId
+    );
+    return languageIndex >= 0;
+};