@salesforcedevs/dx-components 0.53.11 → 0.54.0-alpha03

package/src/modules/dx/groupText/groupText.css

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

package/src/modules/dx/groupText/groupText.ts

@@ -1,9 +1,9 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { LightningSlotElement, Link } from "typings/custom";
-import { isSlotEmpty } from "utils/slot";
-import { toJson } from "utils/normalizers";
-import { track } from "dx/instrumentation";
+import { isSlotEmpty } from "dxUtils/slot";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 type OptionalLink = Link | null;
 

package/src/modules/dx/header/header.css

@@ -1,4 +1,4 @@
-@import "helpers/commonHeader";
+@import "dxHelpers/commonHeader";
 
 :host {
     --dx-c-header-search-width: 316px;

package/src/modules/dx/header/header.ts

@@ -1,6 +1,6 @@
 import { api } from "lwc";
-import { HeaderBase } from "base-elements/headerBase";
-import { toJson } from "utils/normalizers";
+import { HeaderBase } from "dxBaseElements/headerBase";
+import { toJson } from "dxUtils/normalizers";
 import type { Option } from "typings/custom";
 
 export default class Header extends HeaderBase {

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     --dx-c-color-background: var(--dx-g-brand-default-color-background);

package/src/modules/dx/headerMobileNavMenu/headerMobileNavMenu.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { Option } from "typings/custom";
-import { deepmapOptions } from "utils/options";
+import { deepmapOptions } from "dxUtils/options";
 
 export default class HeaderMobileNavMenu extends LightningElement {
     @api open: boolean = false;

package/src/modules/dx/headerMobileNavMenuOption/headerMobileNavMenuOption.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
+import { track } from "dxUtils/analytics";
 
 export default class HeaderMobileNavMenuOption extends LightningElement {
     @api href: string | null = null;

package/src/modules/dx/headerNav/headerNav.css

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

package/src/modules/dx/headerSearch/headerSearch.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 /* DESKTOP */
 

package/src/modules/dx/headerSearch/headerSearch.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { PopoverRequestCloseType, Option } from "typings/custom";
-import { buildSearchEngine } from "utils/coveo";
+import { buildSearchEngine } from "dxUtils/coveo";
 import {
     StandaloneSearchBox as StandaloneSearchBoxType,
     StandaloneSearchBoxState,

package/src/modules/dx/helmet/helmet.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 span {
     font-family: var(--dx-g-font-sans);

package/src/modules/dx/hr/hr.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-hr-padding-horizontal: var(--dx-g-page-padding-horizontal);

package/src/modules/dx/icon/icon.css

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

package/src/modules/dx/icon/icon.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import { IconSprite, IconSize, IconSymbol } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 const fetches = new Map<string, Promise<any>>();
 

package/src/modules/dx/iconBadge/iconBadge.css

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

package/src/modules/dx/iconBadge/iconBadge.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSprite, IconSymbol, IconBadgeShape } from "typings/custom";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 const validShapes = ["square", "circle"];
 

package/src/modules/dx/imageAndLabel/imageAndLabel.css

@@ -1,6 +1,6 @@
-@import "helpers/reset";
-@import "helpers/text";
-@import "helpers/button";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
+@import "dxHelpers/button";
 
 :host {
     --dx-c-image-and-label-text-color: var(--dx-g-text-label-color);

package/src/modules/dx/input/input.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-input-background-active: white;

package/src/modules/dx/input/input.ts

@@ -1,7 +1,7 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
 import { IconSize, IconSymbol } from "typings/custom";
-import { isMac } from "utils/devices";
+import { isMac } from "dxUtils/devices";
 import { isValidEmail } from "./validators";
 
 type ValidatorMap = {

package/src/modules/dx/logo/logo.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-logo-label-color: var(--dx-g-blue-vibrant-20);

package/src/modules/dx/modalDrawer/modalDrawer.ts

@@ -1,6 +1,6 @@
 import cx from "classnames";
 import { LightningElement, api } from "lwc";
-import { normalizeBoolean } from "utils/normalizers";
+import { normalizeBoolean } from "dxUtils/normalizers";
 
 export default class ModalDrawer extends LightningElement {
     private _open = false;

package/src/modules/dx/pagination/pagination.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 .dx-pagination {
     display: flex;

package/src/modules/dx/pagination/pagination.ts

@@ -1,6 +1,6 @@
 import classNames from "classnames";
 import { LightningElement, api } from "lwc";
-import { track } from "dx/instrumentation";
+import { track } from "dxUtils/analytics";
 
 const ANALYTICS_INFO = {
     clickUrl: window.location.href,

package/src/modules/dx/podcastHost/podcastHost.css

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

package/src/modules/dx/popover/popover.css

@@ -1,4 +1,4 @@
-@import "helpers/reset";
+@import "dxHelpers/reset";
 
 :host {
     --popover-border-radius: var(

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

@@ -8,7 +8,7 @@ import {
 import { createPopper } from "@popperjs/core";
 import cx from "classnames";
 import debounce from "debounce";
-import { isPrerender } from "utils/seo";
+import { isPrerender } from "dxUtils/seo";
 
 const isEventOutsideElements = (
     e: Event,

package/src/modules/dx/radioGroup/radioGroup.css

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

package/src/modules/dx/radioGroup/radioGroup.ts

@@ -1,5 +1,5 @@
 import { LightningElement, api } from "lwc";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 type Option = {
     value: string;

package/src/modules/dx/section/section.css

@@ -1,5 +1,5 @@
-@import "helpers/reset";
-@import "helpers/text";
+@import "dxHelpers/reset";
+@import "dxHelpers/text";
 
 :host {
     --dx-c-section-padding-vertical: var(--dx-g-spacing-5xl);

package/src/modules/dx/section/section.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { toDxColor } from "utils/css";
+import { toDxColor } from "dxUtils/css";
 
 export default class Section extends LightningElement {
     @api backgroundColor: string = "transparent";

package/src/modules/dx/select/select.css

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

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

@@ -1,7 +1,7 @@
 import cx from "classnames";
 import { api } from "lwc";
 import LightningSelect from "lightning/select";
-import { toJson } from "utils/normalizers";
+import { toJson } from "dxUtils/normalizers";
 
 export default class Select extends LightningSelect {
     @api placeholder?: string;

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 "dx/instrumentation";
 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 "dx/instrumentation";
+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,

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 "dx/instrumentation";
+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;
@@ -13,6 +13,11 @@ button:focus {
     outline-offset: -1px;
 }
 
+.tree-children-loading {
+    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-md) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-md);
+}
+
 @media (max-width: 768px) {
     .tree-children-loading {
         width: 100%;

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

@@ -1,8 +1,8 @@
 import { LightningElement, api } from "lwc";
 import { InternalTreeNode } from "typings/custom";
-import { track } from "dx/instrumentation";
+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 "dx/instrumentation";
+import { toJson } from "dxUtils/normalizers";
+import { track } from "dxUtils/analytics";
 
 const VALID_BRANDS = [
     "analytics",

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/dxUtils/analytics/analytics.ts

@@ -0,0 +1,24 @@
+export const TRACKING_EVENT_NAME = "developerwebsite_track";
+export const LISTENER_QUEUE = "__DX_INSTRUMENTATION_QUEUE__";
+export const LISTENER_INDICATOR = "__DX_INSTRUMENTATION_IS_INITIALIZED__";
+
+export function track(
+    element: EventTarget,
+    event: string,
+    payload: Record<string, unknown>
+): void {
+    const detail = { event, payload };
+    // if window.LISTENER_INDICATOR is undefined, `dx-instrumentation` has not
+    // been mounted, and the listener hasn't been attached.
+    if ((window as any)[LISTENER_INDICATOR] === undefined) {
+        (window as any)[LISTENER_QUEUE] = (window as any)[LISTENER_QUEUE] || [];
+        (window as any)[LISTENER_QUEUE].push(detail);
+    } else {
+        const e = new CustomEvent(TRACKING_EVENT_NAME, {
+            bubbles: true,
+            composed: true,
+            detail
+        });
+        element.dispatchEvent(e);
+    }
+}