lightning-base-components 1.17.7-alpha → 1.18.2-alpha

package/src/lightning/datetimepicker/input-text.slds.css

@@ -0,0 +1,398 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+/* The Input Control Container holds the `start` and `end` slot contents, as well as the input control itself */
+
+:host([data-render-mode="shadow"]) [part~='input-container'] {
+  display: flex;
+  align-items: center;
+  position: relative;
+  min-height: var(--sds-c-inputtext-sizing-height);
+  padding-inline-end: var(--sds-c-inputtext-spacing-inline-end, var(--sds-c-inputtext-spacing-inline));
+  padding-inline-start: var(--sds-c-inputtext-spacing-inline-start, var(--sds-c-inputtext-spacing-inline));
+  background-color: var(--sds-c-inputtext-color-background, var(--sds-g-color-neutral-base-1));
+  border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
+  border-style: solid;
+  border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
+  border-radius: var(--sds-c-inputtext-radius-border);
+  box-shadow: var(--sds-c-inputtext-shadow);
+}
+
+/* The Input element (in markup) */
+
+:host([data-render-mode="shadow"]) [part~='input'] {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  font-size: var(--sds-c-inputtext-font-size);
+  color: var(--sds-c-inputtext-text-color);
+  line-height: 1;
+  border: none;
+  background: transparent;
+}
+
+/* Placeholder Text */
+
+:host([data-render-mode="shadow"]) [part~='input']::placeholder {
+  color: var(--sds-c-inputtext-text-color-placeholder);
+  font-style: var(--sds-c-inputtext-font-style-placeholder);
+}
+
+/* Focus State */
+
+:host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
+  --sds-c-inputtext-color-border: var(
+    --sds-c-inputtext-color-border-focus,
+    var(--sds-g-color-palette-blue-50, #0176d3)
+  );
+  --sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, 0 0 3px var(--sds-g-color-palette-blue-50, #0176d3));
+  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-focus);
+  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-focus);
+}
+
+:host([data-render-mode="shadow"]) [part~='input']:focus {
+  outline: none;
+}
+
+/* Invalid state */
+
+:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input-container'] {
+  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-invalid);
+  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-invalid);
+}
+
+:host([data-render-mode="shadow"][aria-invalid='true']) [part~='input'] {
+  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-invalid);
+}
+
+/* Valid State */
+
+:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input-container'] {
+  --sds-c-inputtext-color-border: var(--sds-c-inputtext-color-border-valid);
+  --sds-c-inputtext-color-background: var(--sds-c-inputtext-color-background-valid);
+}
+
+:host([data-render-mode="shadow"][aria-invalid='false']) [part~='input'] {
+  --sds-c-inputtext-text-color: var(--sds-c-inputtext-text-color-valid);
+}
+
+/* Readonly State */
+
+:host([data-render-mode="shadow"][readonly]) [part~='input-container'] {
+  --sds-c-inputtext-sizing-border: var(--sds-c-inputtext-sizing-border-readonly);
+  --sds-c-inputtext-spacing-inline-start: var(
+    --sds-c-inputtext-spacing-inline-start-readonly,
+    var(--sds-c-inputtext-spacing-inline-readonly)
+  );
+  --sds-c-inputtext-spacing-inline-end: var(
+    --sds-c-inputtext-spacing-inline-end-readonly,
+    var(--sds-c-inputtext-spacing-inline-readonly)
+  );
+}
+
+/* Disabled State */
+
+:host([data-render-mode="shadow"][disabled]) [part~='input-container'] {
+  --sds-c-inputtext-text-color: #3e3e3c; /* TODO: Replace with Global Styling Hook Fallback */
+  --sds-c-inputtext-color-background: #ecebea; /* TODO: Replace with Global Styling Hook Fallback */
+  --sds-c-inputtext-color-border: #c9c7c5; /* TODO: Replace with Global Styling Hook Fallback */
+}
+
+@supports (--styling-hooks: '') {
+   /**
+   * Input Text
+   */
+    :host([data-render-mode="shadow"]) [part~='input-text'] {
+        /* Host reassignments to composed slds-icon */
+        --slds-c-icon-color-foreground: var(
+            --slds-c-inputtext-icon-color-foreground,
+            var(--sds-g-color-neutral-base-50, #747474)
+        );
+        --slds-c-icon-sizing: var(--slds-c-inputtext-icon-sizing, 14px);
+        --sds-c-inputtext-sizing-height: var(
+            --slds-c-inputtext-sizing-height,
+            var(--sds-g-sizing-9, 2rem)
+        );
+        --sds-c-inputtext-color-background: var(
+            --slds-c-inputtext-color-background,
+            var(--sds-g-color-neutral-base-100, #ffffff)
+        );
+        --sds-c-inputtext-color-background-focus: var(
+            --slds-c-inputtext-color-background-focus,
+            var(--sds-g-color-neutral-base-100, #ffffff)
+        );
+        --sds-c-inputtext-text-color: var(--slds-c-inputtext-text-color);
+        --sds-c-inputtext-font-size: var(
+            --slds-c-inputtext-font-size,
+            var(--sds-g-font-scale-neg-2, 0.8125rem)
+        );
+        --sds-c-inputtext-text-color-placeholder: var(
+            --slds-c-inputtext-text-color-placeholder,
+            var(--sds-g-color-neutral-base-50, #747474)
+        );
+        --sds-c-inputtext-color-border: var(
+            --slds-c-inputtext-color-border,
+            var(--sds-g-color-neutral-base-80, #c9c9c9)
+        );
+        --sds-c-inputtext-sizing-border: var(--slds-c-inputtext-sizing-border);
+        --sds-c-inputtext-radius-border: var(
+            --slds-c-inputtext-radius-border,
+            var(--sds-g-radius-border-2, 0.25rem)
+        );
+
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+    }
+
+   /**
+   * Input Container
+   */
+    :host([data-render-mode="shadow"]) [part~='input-container'] {
+        flex: 1 0 100%;
+        align-items: stretch;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range'] {
+        border: none;
+        display: inline-block;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='input'][type~='range'] {
+        min-height: calc(1.875rem + (1px * 2));
+        margin: 0;
+    }
+
+    :host([data-render-mode="shadow"]) [part~='input-container'][type~='range']:focus-within,:host([data-render-mode="shadow"]) 
+    [part~='input-container'][type~='range']:active {
+        --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
+        --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+        --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+
+        outline: 0;
+        border-width: var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1, 1px));
+        border-color: var(--sds-c-inputtext-color-border, var(--sds-g-color-neutral-base-contrast-3));
+    }
+
+   /**
+   * Input
+   */
+    :host([data-render-mode="shadow"]) [part~='input'] {
+        padding-inline-start: var(
+            --slds-c-inputtext-spacing-inline-start,
+            var(--sds-g-spacing-3, 0.75rem));
+        padding-inline-end: var(
+            --slds-c-inputtext-spacing-inline-end,
+            var(--sds-g-spacing-4, 1rem));
+        height: unset;
+        font-family: var(--sds-g-font-family, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol');
+    }
+
+   /**
+   * Focus / active State
+   */
+    :host([data-render-mode="shadow"]) [part~="input-container"]:focus-within,:host([data-render-mode="shadow"]) 
+    [part~="input-container"]:active {
+      --sds-c-inputtext-color-border: var(--sds-g-color-brand-base-60, #1b96ff);
+      --sds-c-inputtext-shadow: 0 0 3px var(--sds-g-color-brand-base-50, #0176d3);
+      --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-100, #ffffff);
+
+      outline: 0;
+    }
+
+   /**
+   * Read Only State
+   */
+    :host([data-render-mode="shadow"][readonly]) [part~='input-text'] {
+        --sds-c-inputtext-spacing-inline-start-readonly: 0;
+        --sds-c-inputtext-color-border-focus: transparent;
+        --slds-c-inputtext-color-border: transparent;
+        --slds-c-inputtext-color-background: transparent;
+        --slds-c-inputtext-color-background-focus: transparent;
+    }
+
+    /**
+   * Invalid State
+   *
+   * Does not use --sds-c-inputtext-color-border-invalid due to this hook being
+   * tied to :host([aria-invalid]) which this subsystem does not use. Instead, it
+   * uses :host([invalid]).
+   */
+    :host([data-render-mode="shadow"][invalid]) [part~='input-text'] {
+        --sds-c-inputtext-shadow: 0 0 0 var(--sds-g-sizing-border-1, 1px) inset
+            var(--sds-g-color-error-base-50, #ea001e);
+        --slds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
+        --slds-c-icon-color-foreground: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /**
+   * Invalid State - Focus
+   *
+   * The following styling hooks are included in SDS and need to be reassigned
+   * here to prevent a bug with the focus state border and box-shadow
+   */
+    :host([data-render-mode="shadow"][invalid]) [part~='input-container']:focus-within {
+      --sds-c-inputtext-shadow:
+        var(--sds-g-color-error-base-50, #ea001e) 0 0 0 var(--sds-g-sizing-border-1, 1px) inset,
+        0 0 var(--sds-g-sizing-border-3, 3px) var(--sds-g-color-brand-base-50, #0176d3);
+      --sds-c-inputtext-color-border: var(--sds-g-color-error-base-50, #ea001e);
+    }
+
+    /**
+   * Disabled State
+   *
+   * Both parts form the visible form control.
+   */
+    :host([data-render-mode="shadow"][disabled]) [part~='input-container'],:host([data-render-mode="shadow"][disabled]) [part~='input'] {
+        cursor: not-allowed;
+        --sds-c-inputtext-color-background: var(--sds-g-color-neutral-base-95, #f3f3f3);
+        --sds-c-inputtext-color-border: var(--sds-g-color-neutral-base-80, #c9c9c9);
+        --sds-c-inputtext-text-color: var(--sds-g-color-neutral-base-50, #747474);
+    }
+
+    /**
+   * Label
+   *
+   * Add [part~='input-text'] to increase specificity and
+   * avoid collisions with other components using [part~='label'] (e.g. slds-input-checkbox)
+   */
+    :host([data-render-mode="shadow"]) [part~='input-text'] [part~='label'] {
+        padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        padding-inline-end: var(--sds-g-spacing-2, 0.5rem);
+        color: var(
+            --slds-c-inputtext-label-color,
+            var(--sds-g-color-neutral-base-30, #444444)
+        );
+        font-size: var(
+            --slds-c-inputtext-label-font-size,
+            var(--sds-g-font-scale-neg-3, 0.75rem)
+        );
+        margin-block-end: var(--sds-g-sizing-1, 0.125rem);
+
+        /* We inline flex to control the spacing between elements and not have to rely on whitespace characters */
+        display: inline-flex;
+    }
+
+    /**
+   * Start
+   *
+   * Only expects an SLDS icon. We assign the SLDS Icon Styling Hook here
+   * so we don't add spacing to other icons composed in the component, e.g.,
+   * the icon in the inline help text.
+   */
+    :host([data-render-mode="shadow"]) [part~='start'] {
+        --slds-c-icon-spacing-inline-end: var(--sds-g-spacing-2, 0.5rem);
+    }
+
+    /**
+   * Label Inline Variant
+   *
+   * Note: all the 33% values you see are remnants of legacy SLDS. We need to
+   * keep this implementation intact so visual output is the same when used
+   * in a form that has non-shadow components. Attempting to refactor to a
+   * modern solution like flex is proving tricky due to the presence of the
+   * optional inline-help and the input needing to have exactly 33% of spacing
+   * from the inline-start.
+   *
+   * Ref: https://github.com/salesforce-ux/design-system-internal/blob/240-winter-23/ui/components/form-element/horizontal/_index.scss#L63
+   */
+    @media (min-width: 48em) {
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-text'] {
+            display: block;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='label'] {
+            float: left;
+
+            /* TODO: Get rid of these magic numbers */
+            max-width: calc(33% - 1.125rem);
+            padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='input-container'] {
+            margin-inline-start: 33%;
+        }
+
+        :host([data-render-mode="shadow"][variant~='label-inline']) [part~='inline-help'] {
+            float: left;
+            padding-block-start: var(--sds-g-spacing-1, 0.25rem);
+        }
+    }
+
+    :host([data-render-mode="shadow"]) input[type="search"] + lightning-primitive-icon::part(icon) {
+        left: var(--sds-g-spacing-3, 0.75rem);
+        fill: var(--slds-g-color-neutral-base-50, #747474);
+    }
+    
+    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon {
+        background-color: transparent;
+    }
+
+    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-button_icon:focus,:host([data-render-mode="shadow"]) 
+    .slds-input-has-icon .slds-button_icon:hover {
+        --slds-c-icon-color-foreground: var(--sds-g-color-brand-base-30, #014486);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-input-has-icon .slds-input__icon {
+        width: 0.875rem;
+        height: 0.875rem;
+        position: absolute;
+        top: 50%;
+        margin-top: -0.4375rem;
+        line-height: 1;
+        border: 0;
+        z-index: 2;
+    }
+
+    /**
+   * Has Icon Left
+   */
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_left {
+        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_left .slds-input__icon,:host([data-render-mode="shadow"]) 
+    .slds-input-has-icon_left-right .slds-input__icon_left {
+        inset-inline-start: var(--sds-g-spacing-3, 0.75rem);
+    }
+
+    /**
+   * Has Icon Right
+   */
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_right {
+        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+    }
+
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_right .slds-input__icon,:host([data-render-mode="shadow"]) 
+    .slds-input-has-icon_left-right .slds-input__icon_right {
+        inset-inline-end: var(--sds-g-spacing-3, 0.75rem);
+    }
+
+    /**
+   * Has Icon Left & Right
+   */
+    :host([data-render-mode="shadow"]) .slds-input-has-icon_left-right {
+        --slds-c-inputtext-spacing-inline-start: var(--sds-g-spacing-6, 2rem);
+        --slds-c-inputtext-spacing-inline-end: var(--sds-g-spacing-6, 2rem);
+    }
+   
+  /**
+ * A temporarily baked-in utility class until SLDS gets a proper utility package.
+ *
+ * This is a hybrid patch between synthetic and native shadow. The ideal final
+ * outcome is the removal of this class and replacing the class with the SLDS
+ * utility package solution.
+ */
+  :host([data-render-mode="shadow"]) .slds-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;
+  }
+}

package/src/lightning/dualListbox/dualListbox.css

@@ -1,7 +1,7 @@
-/* @import 'lightning/sldsCommon';
+@import 'lightning/sldsCommon';
 @import "./form-element.slds.css";
 @import './listbox.slds.css';
-@import './dual-listbox.slds.css'; */
+@import './dual-listbox.slds.css';
 
 :host {
     display: block;

package/src/lightning/dualListbox/dualListbox.html

@@ -48,14 +48,14 @@
                             <template for:each={computedSelectedList} for:item="option" for:index="index">
                                 <li key={option.value} role="presentation" class="slds-listbox__item">
                                     <div class={option.classList} aria-selected={option.selected} role="option" tabindex={option.tabIndex} data-index={index}
-                                        data-value={option.value} data-type={computedSelectedListId} onclick={handleOptionClick}
-                                        onkeydown={handleOptionKeyDown}>
+                                        aria-disabled={option.isLocked} draggable={option.draggable} data-value={option.value} data-type={computedSelectedListId}
+                                        onclick={handleOptionClick} onkeydown={handleOptionKeyDown}>
                                         <span class="slds-media__body">
                                             <span class="slds-truncate" title={option.label}>{option.label}</span>
                                         </span>
                                         <template if:true={option.isLocked}>
                                             <span class="slds-media__figure slds-media__figure_reverse">
-                                                <lightning-icon icon-name="utility:lock" size="x-small" alternative-text={computedLockAssistiveText}></lightning-icon>
+                                                <lightning-icon icon-name="utility:lock" size="x-small" alternative-text={computedLockAssistiveText} class="slds-icon_container slds-current-color"></lightning-icon>
                                             </span>
                                         </template>
                                     </div>

package/src/lightning/dualListbox/dualListbox.js

@@ -17,7 +17,8 @@ import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
 import labelMovedOptionsSingular from '@salesforce/label/LightningDualListbox.movedOptionsSingular';
 import labelMovedOptionsPlural from '@salesforce/label/LightningDualListbox.movedOptionsPlural';
 import labelHelpTextAlternativeText from '@salesforce/label/LightningInput.helptextAlternativeText';
-import { LightningElement, api, track } from 'lwc';
+import { api, track } from 'lwc';
+import LightningShadowBaseClass from 'lightning/shadowBaseClassPrivate';
 import { handleKeyDownOnOption } from './keyboard';
 import { classSet, formatLabel } from 'lightning/utils';
 import {
@@ -59,7 +60,7 @@ const i18n = {
 /**
  * A pair of listboxes that enables multiple options to be selected and reordered.
  */
-export default class LightningDualListbox extends LightningElement {
+export default class LightningDualListbox extends LightningShadowBaseClass {
     // Component attributes
     /**
      * Label for the source options listbox.
@@ -354,6 +355,7 @@ export default class LightningDualListbox extends LightningElement {
     }
 
     connectedCallback() {
+        super.connectedCallback();
         this.classList.add('slds-form-element');
         this.updateClassList();
         this.keyboardInterface = this.selectKeyboardInterface();
@@ -457,6 +459,7 @@ export default class LightningDualListbox extends LightningElement {
                 const option = optionsMap[optionValue];
                 if (option) {
                     option.isLocked = true;
+                    option.draggable = false;
                 }
             });
 
@@ -475,15 +478,33 @@ export default class LightningDualListbox extends LightningElement {
         );
     }
 
+    isOptionDisabled(elm) {
+        return !!(elm?.getAttribute('aria-disabled') === 'true');
+    }
+
+    isOptionRequiredOrLocked(option) {
+        return !!(
+            this.requiredOptions.includes(option.value) || option.isLocked
+        );
+    }
+
     computeListOptions(options, focusableOptionValue) {
         if (options.length > 0) {
             const focusableOption = options.find((option) => {
-                return option.value === focusableOptionValue;
+                return (
+                    option.value === focusableOptionValue &&
+                    !this.isOptionRequiredOrLocked(option)
+                );
             });
 
+            const firstFocusableOption = options.find(
+                (option) => !this.isOptionRequiredOrLocked(option)
+            );
+
             const focusableValue = focusableOption
                 ? focusableOption.value
-                : options[0].value;
+                : firstFocusableOption?.value;
+
             return options.map((option) => {
                 return this.computeOptionProperties(option, focusableValue);
             });
@@ -632,7 +653,7 @@ export default class LightningDualListbox extends LightningElement {
 
     handleOptionClick(event) {
         this.interactingState.interacting();
-        if (this.disabled) {
+        if (this.disabled || this.isOptionDisabled(event.currentTarget)) {
             return;
         }
         const selectMultiple = event.metaKey || event.ctrlKey || event.shiftKey;
@@ -803,7 +824,7 @@ export default class LightningDualListbox extends LightningElement {
         this.highlightedOptionsLabel = [];
         for (let i = 0; i < options.length; i++) {
             select = (i - start) * (i - end) <= 0;
-            if (select) {
+            if (select && !this.isOptionDisabled(options[i])) {
                 val = options[i].getAttribute('data-value');
                 this.highlightedOptions.push(val);
             }
@@ -811,6 +832,10 @@ export default class LightningDualListbox extends LightningElement {
     }
 
     updateSelectedOptions(option, select, isMultiple) {
+        if (this.isOptionDisabled(option)) {
+            return;
+        }
+
         const value = option.getAttribute('data-value');
         const listId = this.getListId(option);
         const optionIndex = this.getOptionIndex(option);