lightning-base-components 1.16.3-alpha → 1.16.5-alpha

package/src/lightning/modalHeader/modalHeader.js

@@ -0,0 +1,204 @@
+import { api, LightningElement } from 'lwc';
+import { getRealDOMId } from 'lightning/utilsPrivate';
+import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
+
+// selectors
+const modalHeaderSelector = '.slds-modal__header';
+const labelSelector = '[data-label]';
+const slotWrapperSelector = '[data-slot-wrapper]';
+const defaultSlotSelector = '[data-default-slot]';
+
+/**
+ * Creates a header to display the heading and tagline at the top of a modal.
+ * */
+export default class LightningModalHeader extends LightningElement {
+    // tracked private state
+    initialRender = true;
+    initialSlotRender = true;
+    unregisterCallback = null;
+
+    /**
+     * Text to display as the heading at the top of the modal
+     */
+    @api label = '';
+
+    /**
+     * Handle the default slot change event
+     * Always register with parent every slot change
+     * @private
+     */
+    handleDefaultSlotChange() {
+        // Set this once so that parent can know slot has rendered
+        if (this.initialSlotRender) {
+            this.initialSlotRender = false;
+        }
+        this.registerWithParent();
+    }
+
+    /**
+     * Get the height of outer wrapper of modal header
+     * @returns {number} represents a height value in pixels
+     * @private
+     */
+    get headerHeight() {
+        const divElem = this.template.querySelector(modalHeaderSelector);
+        const headerRect = divElem ? divElem.getBoundingClientRect() : {};
+        const { height } = headerRect;
+        return height || 0;
+    }
+
+    /**
+     * Get an element reference to the modal's title element, currently H1
+     * This get passed to the parent as a fallback element for autofocus
+     * @returns {(HTMLElement|null)}
+     * @private
+     */
+    get modalTitleElement() {
+        return this.template.querySelector(labelSelector);
+    }
+
+    /**
+     * Get the ID value of the modalTitleElement, currently H1
+     * This value is passed to parent in order to use for aria-labelledby
+     * @returns {(string|null)}
+     * @private
+     */
+    get modalLabelId() {
+        const labelElem = this.modalTitleElement;
+        return getRealDOMId(labelElem);
+    }
+
+    /**
+     * Get first tabbable element within modalHeader's slot, if exists
+     * This is passed to parent in order to possibly be used for autoFocus
+     * @returns {(HTMLElement|null)}
+     * @private
+     */
+    get firstTabbableElement() {
+        let firstElem = null;
+        if (this.isDefaultSlotPopulated) {
+            const tabbableElements = findAllTabbableElements(
+                this.defaultSlotElement
+            );
+            const filteredElements = filterTooltips(tabbableElements);
+            if (filteredElements.length > 0) {
+                firstElem = filteredElements[0];
+            }
+        }
+        return firstElem;
+    }
+
+    /**
+     * Get an element reference to the modal body's default slot's wrapper element
+     * Currently this is a P tag, representing the tagline within the header
+     * @returns {(HTMLElement|null)}
+     * @private
+     */
+    get defaultSlotWrapperElement() {
+        return this.template.querySelector(slotWrapperSelector);
+    }
+
+    /**
+     * Get the ID value for the slot wrapper (p tag)
+     * Future TODO: potentially wire up to aria-describedby
+     * - when there is a better identified reproducible pattern
+     * @returns {(string|null)}
+     * @private
+     */
+    get defaultSlotWrapperId() {
+        return getRealDOMId(this.defaultSlotWrapperElement);
+    }
+
+    /**
+     * Get an element reference to the modal body's slot element
+     * @returns {(HTMLElement|null)}
+     * @private
+     */
+    get defaultSlotElement() {
+        return this.template.querySelector(defaultSlotSelector);
+    }
+
+    /**
+     * Determine whether the default slot is populated
+     * @returns {boolean}
+     * @private
+     */
+    get isDefaultSlotPopulated() {
+        const slotElement = this.defaultSlotElement;
+        if (slotElement && slotElement.assignedNodes) {
+            const slotPopulated = slotElement.assignedNodes().length > 0;
+            this.defaultSlotPopulated = slotPopulated;
+            return slotPopulated;
+        }
+        this.defaultSlotPopulated = false;
+        return false;
+    }
+
+    /**
+     * Determine whether the developer provided label value is valid or not
+     * Label value is required value, so console.error when not valid
+     * @returns {boolean}
+     * @private
+     */
+    get isLabelPopulated() {
+        return (this.label && this.label.trim().length > 0) || false;
+    }
+
+    /**
+     * Register modalHeader with modal parent, including callbacks to
+     * unregister the modal header
+     * this will get called multiple times over component lifecycle
+     * @type {CustomEvent}
+     * @private
+     */
+    registerWithParent() {
+        const evtRegister = new CustomEvent('privatemodalheaderregister', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                labelId: this.modalLabelId,
+                labelIsPopulated: this.isLabelPopulated,
+                headerHeight: this.headerHeight,
+                defaultSlotWrapperId: this.defaultSlotWrapperId,
+                defaultSlotIsPopulated: this.isDefaultSlotPopulated,
+                defaultSlotHasRendered: !this.initialSlotRender,
+                unRegisterCallback: (unregisterCallback) => {
+                    this.unregisterCallback = unregisterCallback;
+                },
+                headerRef: this.modalTitleElement,
+                firstTabbableElemRef: this.firstTabbableElement,
+            },
+        });
+        this.dispatchEvent(evtRegister);
+    }
+
+    /**
+     * When modal header is being created, initialize
+     * private tracked modal header state
+     * This is need because modal header can be added back to
+     * the DOM, after being removed, and need to re-initialize state values
+     * @private
+     */
+    initState() {
+        this.initialRender = true;
+        this.initialSlotRender = true;
+        this.unregisterCallback = null;
+    }
+
+    connectedCallback() {
+        this.initState();
+    }
+
+    renderedCallback() {
+        if (this.initialRender) {
+            this.registerWithParent();
+            this.initialRender = false;
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.unregisterCallback) {
+            this.unregisterCallback();
+        }
+    }
+}

package/src/lightning/modalHeader/modalHeader.js-meta.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
+    <isExposed>true</isExposed>
+    <minApiVersion>55.0</minApiVersion>
+    <support>GA</support>
+</LightningComponentBundle>

package/src/lightning/primitiveBubble/tooltip.slds.css

@@ -1,3 +1,47 @@
+/* Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
+  Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license */
+
+:host([data-render-mode="shadow"]) [part~='overlay'] {
+  background-color: var(
+    --sds-c-overlay-color-background,
+    var(--sds-s-popup-color-background, var(--sds-g-color-neutral-base-1))
+  );
+  color: var(
+    --sds-c-overlay-text-color,
+    var(--sds-s-popup-text-color, var(--sds-g-color-neutral-base-contrast-4))
+  );
+  border-radius: var(
+    --sds-c-overlay-radius-border,
+    var(--sds-s-popup-radius-border, var(--sds-g-radius-border-2, 0.25rem))
+  );
+  border-width: var(
+    --sds-c-overlay-sizing-border,
+    var(--sds-s-popup-sizing-border, var(--sds-g-sizing-border-1, 1px))
+  );
+  border-color: var(
+    --sds-c-overlay-color-border,
+    var(--sds-s-popup-color-border, var(--sds-g-color-border-base-1, #c9c9c9))
+  );
+  box-shadow: var(--sds-c-overlay-shadow, var(--sds-s-popup-shadow, var(--sds-g-shadow-1, 0 0 2px 0 #18181814, 0 2px 4px 1px #18181828)));
+
+  /* TODO: consider semantics of the shared hook for overlays/popups. */
+  padding-left: var(
+    --sds-c-overlay-spacing-inline-start,
+    var(--sds-c-overlay-spacing-inline, var(--sds-s-popup-spacing-inline, var(--sds-g-spacing-3, 0.75rem)))
+  );
+  padding-right: var(
+    --sds-c-overlay-spacing-inline-end,
+    var(--sds-c-overlay-spacing-inline, var(--sds-s-popup-spacing-inline, var(--sds-g-spacing-3, 0.75rem)))
+  );
+  padding-top: var(
+    --sds-c-overlay-spacing-block-start,
+    var(--sds-c-overlay-spacing-block, var(--sds-s-popup-spacing-block, var(--sds-g-spacing-3, 0.75rem)))
+  );
+  padding-bottom: var(
+    --sds-c-overlay-spacing-block-end,
+    var(--sds-c-overlay-spacing-block, var(--sds-s-popup-spacing-block, var(--sds-g-spacing-3, 0.75rem)))
+  );
+}
 
 /**
  * @Note: Static fallbacks are in place until SLDS adopts SDS. Without static
@@ -37,7 +81,7 @@
      * Opinion of subsystem, not supported in base SDS component
      */
     font-size: var(--slds-c-tooltip-font-size, 0.75rem);
-    max-width: var(--slds-c-tooltip-sizing-max-width, 20rem);
+    max-width: var(--slds-c-tooltip-sizing-width-max, 20rem);
     position: relative;
   }
 }

package/src/lightning/primitiveCellFactory/primitiveCellFactory.js

@@ -326,19 +326,11 @@ export default class PrivateCellFactory extends PrimitiveDatatableCell {
     }
 
     get dateValue() {
-        // Supported values can be passed directly to lightning-formatted-date-time
-        // but non-supported formats need to be passed through Date constructor
-        // to avoid customer breakages for the time being. Ideally this will be
+        // Supported values can be passed directly to lightning-formatted-date-time but
+        // non-supported formats need to be passed through Date constructor to avoid
+        // customer breakages for the time being. Ideally the use of toDate here will be
         // temporary and we can remove use of the Date constructor in the future
-        try {
-            toDate(this.value); // will throw error if value isn't supported
-            return this.value;
-        } catch (err) {
-            console.warn(
-                `'${this.value}' does not follow a supported date format. Please use either a timestamp, ISO8601 string, or Date object to avoid risking inconsistencies and breakages.`
-            );
-            return new Date(this.value);
-        }
+        return toDate(this.value);
     }
 
     get computedDateLocalDay() {