@salesforcedevs/dx-components 0.54.5 → 0.54.6-alpha-1

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

@@ -1,5 +1,3 @@
-@import "dxHelpers/slds";
-
 :host {
     display: block;
 }
@@ -8,7 +6,7 @@
     outline: none;
 }
 
-.slds-select_container::before {
+.select_container::before {
     --icon-size: 0.5em;
 
     border-style: solid;
@@ -24,21 +22,196 @@
     width: var(--icon-size);
 }
 
-.placeholder {
+.select-element_placeholder {
     color: var(--sds-g-gray-9);
 }
 
-select.slds-select:focus:not([disabled]),
-select.slds-select:active:not([disabled]) {
+select.select-element:focus:not([disabled]),
+select.select-element:active:not([disabled]) {
     border-width: 2px;
     border-color: var(--dx-g-blue-vibrant-50);
     box-shadow: none;
     -webkit-box-shadow: none;
 }
 
-:host(.slds-has-error) select.slds-select:focus,
-:host(.slds-has-error) select.slds-select:active {
+.has-error select.select-element:focus,
+.has-error select.select-element:active {
     border-color: #ea001e;
     box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
     -webkit-box-shadow: 0 0 3px var(--dx-g-blue-vibrant-50);
 }
+
+@media (min-width: 48em) {
+    .form-element_horizontal .form-element_control {
+        padding-left: 33%;
+        clear: none;
+    }
+}
+
+abbr[title] {
+    border-bottom: 1px dotted;
+    text-decoration: none;
+    cursor: help;
+}
+
+abbr[title]::after {
+    content: " (" attr(title) ")";
+}
+
+abbr[title],
+fieldset,
+hr {
+    border: 0;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+.form-element_control {
+    clear: left;
+    position: relative;
+}
+
+.form-element_label {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -webkit-hyphens: auto;
+    -ms-hyphens: auto;
+    hyphens: auto;
+    display: inline-block;
+    color: #3e3e3c;
+    font-size: 0.75rem;
+    padding-right: 0.5rem;
+    padding-top: 0.25rem;
+    margin-bottom: 0.125rem;
+}
+
+.form-element_label:empty {
+    margin: 0;
+}
+
+.form-element_stacked .form-element_label,
+.form-element_stacked .form-element_control {
+    border-bottom: 0;
+    padding-left: 0;
+}
+
+.form-element_stacked .form-element_control {
+    width: 100%;
+    -ms-flex-preferred-size: 100%;
+    flex-basis: 100%;
+    clear: left;
+}
+
+.assistive-text {
+    position: absolute !important;
+    margin: -1px !important;
+    border: 0 !important;
+    padding: 0 !important;
+    width: 1px !important;
+    height: 1px !important;
+    overflow: hidden !important;
+    clip: rect(0 0 0 0) !important;
+    text-transform: none !important;
+    white-space: nowrap !important;
+}
+
+.required-element {
+    color: #ea001e;
+    margin: 0 0.125rem;
+}
+
+.select-element {
+    height: calc(1.875rem + (1px * 2));
+    width: 100%;
+    border: 1px solid #dddbda;
+    border-radius: 0.25rem;
+    background-color: white;
+    -webkit-transition: border 0.1s linear, background-color 0.1s linear;
+    transition: border 0.1s linear, background-color 0.1s linear;
+}
+
+.select-element:focus,
+.select-element:active {
+    outline: 0;
+    border-color: #1b96ff;
+    background-color:white;
+    -webkit-box-shadow: 0 0 3px #0176d3;
+    box-shadow: 0 0 3px #0176d3;
+}
+
+.select-element[disabled],
+.select-element.slds-is-disabled {
+    background-color: #ecebea;
+    border-color: #c9c7c5;
+    color: #3e3e3c;
+    cursor: not-allowed;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    opacity: 1;
+}
+
+.select-element[disabled]:focus,
+.select-element[disabled]:active,
+.select-element.slds-is-disabled:focus,
+.select-element.slds-is-disabled:active {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.select-element[size] {
+    min-height: calc(1.875rem + (1px * 2));
+    height: inherit;
+}
+
+.select-element[size] option {
+    padding: 0.5rem;
+}
+
+.has-error .select-element {
+    border-color: #ea001e;
+    -webkit-box-shadow: #ea001e 0 0 0 1px inset;
+    box-shadow: #ea001e 0 0 0 1px inset;
+    background-clip: padding-box;
+}
+
+.select_container {
+    position: relative;
+}
+
+.select_container .select-element {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    padding-left: 0.5rem;
+    padding-right: 1.5rem;
+}
+
+.select_container .select-element::-ms-expand {
+    display: none;
+}
+
+.has-error .select-element:focus,
+.has-error .select-element:active {
+    -webkit-box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+    box-shadow: #ea001e 0 0 0 1px inset, 0 0 3px #0176d3;
+}
+
+.form-element:not(.has-error) .select-element:required {
+    -webkit-box-shadow: none;
+    box-shadow: none;
+}
+
+.form-element_help,
+.form-element_helper {
+    font-size: 0.75rem;
+    margin-top: 0.125rem;
+    display: block;
+}
+
+.has-error .form-element_help {
+    color: #ea001e;
+}

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 "dxUtils/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/dxBaseElements/headerBase/headerBase.ts

@@ -1,6 +1,6 @@
 import { LightningElement, api } from "lwc";
 import cx from "classnames";
-import { Brand, Option } from "typings/custom";
+import { Brand, OptionWithLink, OptionWithNested } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 import { track } from "dxUtils/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/dxUtils/options/options.ts

@@ -1,12 +1,12 @@
-import { Option } from "typings/custom";
+import { OptionWithNested } from "typings/custom";
 
 const deepmapper = (
-    _options: Option[],
-    _callback: (option: Option, lavel: number) => Option,
+    _options: OptionWithNested[],
+    _callback: (option: OptionWithNested, lavel: number) => OptionWithNested,
     level: number = 0
-): Option[] => {
+): OptionWithNested[] => {
     const _level = level + 1;
-    return _options?.map((option: Option) =>
+    return _options?.map((option: OptionWithNested) =>
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         option.options
             ? {
@@ -18,9 +18,13 @@ const deepmapper = (
 };
 
 export const deepmapOptions = (
-    options: Option[],
-    callback: (option: Option, index: number, level: number) => Option
-): Option[] => {
+    options: OptionWithNested[],
+    callback: (
+        option: OptionWithNested,
+        index: number,
+        level: number
+    ) => OptionWithNested
+): OptionWithNested[] => {
     let index = 0;
     return deepmapper(options, (option, level) => {
         const newOption = callback(option, index, level);
@@ -29,7 +33,7 @@ export const deepmapOptions = (
     });
 };
 
-export const getOptionsCount = (options: Option[]) => {
+export const getOptionsCount = (options: OptionWithNested[]) => {
     let count = 0;
     deepmapper(options, (option) => {
         count += 1;