@salesforcedevs/dx-components 0.54.0 → 0.54.5

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 "utils/analytics";
+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 "utils/analytics";
+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 "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,

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;
@@ -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 "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 { 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/{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/{utils → dxUtils}/normalizers/normalizers.ts

@@ -1,4 +1,5 @@
 import get from "lodash.get";
+import { WordpressPodcastEpisode, WordpressBlogPost } from "typings/custom";
 
 export const toJson = (value: string | object | null) =>
     typeof value === "string" ? JSON.parse(value) : value;
@@ -22,16 +23,6 @@ export const normalizeToArray = (
     return (Array.isArray(value) ? value : [value]) as Array<string>;
 };
 
-type WordpressPodcastEpisode = {
-    date: string;
-    description: string;
-    id: string;
-    originalUrl: string;
-    podcastDuration: string;
-    title: string;
-    url: string;
-};
-
 const getLength = (duration: string) => {
     if (!duration || !duration.includes(":")) {
         return undefined;
@@ -55,17 +46,6 @@ export const normalizeEpisode = ({
     title
 });
 
-type WordpressBlogPost = {
-    date: string;
-    description: string;
-    id: string;
-    originalUrl: string;
-    title: string;
-    url: string;
-    authors: any[];
-    featuredImage: string;
-};
-
 export const normalizePost = ({
     authors = [],
     date,
@@ -89,3 +69,11 @@ export const normalizePost = ({
 
 export const normalizeBoolean = (value: string | boolean | number): boolean =>
     typeof value === "string" ? value === "true" : !!value;
+
+/**
+ * Cleans characters that are invalid for DOM IDs
+ * @param {string} id id to normalize
+ */
+export const normalizeDomId = (id: string): string => {
+    return id.replace(/^[^a-z]+|[^\w.-]+/gi, "");
+};