lightning-base-components 1.16.3-alpha → 1.16.4-alpha

package/src/lightning/modalFooter/modalFooter.js

@@ -0,0 +1,161 @@
+import { LightningElement } from 'lwc';
+import { classSet } from 'lightning/utils';
+import { findAllTabbableElements, filterTooltips } from 'lightning/focusUtils';
+
+// SLDS Modal Footer classes
+const footerClass = 'slds-modal__footer';
+const hideClass = 'slds-hide';
+// selectors
+const footerSelector = `.${footerClass}`;
+const footerSlotSelector = '[data-footer-slot]';
+
+/**
+ * The modal footer component to display footer content in lightning modal.
+ * */
+export default class LightningModalFooter extends LightningElement {
+    // tracked private state
+    initialRender = true;
+    initialSlotRender = true;
+    hideFooter = false;
+    unregisterCallback = null;
+
+    /**
+     * 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();
+        this.hideFooter = !this.isDefaultSlotPopulated;
+    }
+
+    /**
+     * Gets the CSS classes applicable to the modal footer element.
+     * Hidden classes are set when the footer is hidden
+     * @returns {string} CSS class applied to modal footer
+     * @private
+     */
+    get footerCssClasses() {
+        const classes = classSet(footerClass);
+        classes.add({
+            [hideClass]: this.hideFooter,
+        });
+        return classes.toString();
+    }
+
+    /**
+     * Get the height of outer wrapper of modal footer
+     * @returns {number} represents a height value in pixels
+     * @private
+     */
+    get footerHeight() {
+        const divElem = this.template.querySelector(footerSelector);
+        const footerRect = divElem ? divElem.getBoundingClientRect() : {};
+        const { height } = footerRect;
+        return height || 0;
+    }
+
+    /**
+     * Get an element reference to the modal footer's slot element
+     * @returns {(HTMLElement|null)}
+     * @private
+     */
+    get defaultSlotElement() {
+        return this.template.querySelector(footerSlotSelector);
+    }
+
+    /**
+     * Determine whether the default slot is populated
+     * @returns {boolean}
+     * @private
+     */
+    get isDefaultSlotPopulated() {
+        const slotElement = this.defaultSlotElement;
+        if (slotElement && slotElement.assignedNodes) {
+            return slotElement.assignedNodes().length > 0;
+        }
+        return true;
+    }
+
+    /**
+     * Get first tabbable element within modalFooter'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 filteredElements = filterTooltips(
+                findAllTabbableElements(this.defaultSlotElement)
+            );
+            if (filteredElements.length > 0) {
+                firstElem = filteredElements[0];
+            }
+        }
+        return firstElem;
+    }
+
+    /**
+     * Register modalFooter with modal parent, including callbacks to
+     * unregister the modal footer
+     * this will get called multiple times over component lifecycle
+     * @type {CustomEvent}
+     * @private
+     */
+    registerWithParent() {
+        const evtRegister = new CustomEvent('privatemodalfooterregister', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                footerHeight: this.footerHeight,
+                defaultSlotIsPopulated: this.isDefaultSlotPopulated,
+                defaultSlotHasRendered: !this.initialSlotRender,
+                firstTabbableElemRef: this.firstTabbableElement,
+                unRegisterCallback: (unregisterCallback) => {
+                    this.unregisterCallback = unregisterCallback;
+                },
+            },
+        });
+        this.dispatchEvent(evtRegister);
+    }
+
+    /**
+     * When modal footer is being created, initialize
+     * private tracked modal footer state
+     * This is need because modal footer 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.hideFooter = false;
+        this.unregisterCallback = null;
+    }
+
+    connectedCallback() {
+        // handle case where modalFooter is added/removed/added to DOM
+        // so registerWithParent gets called
+        this.initState();
+    }
+
+    disconnectedCallback() {
+        if (this.unregisterCallback) {
+            this.unregisterCallback();
+        }
+    }
+
+    renderedCallback() {
+        if (this.initialRender) {
+            this.registerWithParent();
+            this.initialRender = false;
+        }
+        this.hideFooter = !this.isDefaultSlotPopulated;
+    }
+}

package/src/lightning/modalFooter/modalFooter.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/modalHeader/__docs__/modalHeader.md

@@ -0,0 +1,64 @@
+The `lightning-modal-header` component displays header text in a panel at the top of a modal dialog.
+Use of a header is optional, but when you provide a header you must specify the header text with the `label` attribute. 
+
+If you don't use the `lightning-modal-header` component, you must set a label
+in the modal you create by extending `LightningModal`. A label is required for accessibility.
+
+The modal components render in the order they appear in the template. Place the `lightning-modal-header` 
+component before the `lightning-modal-body` component in the template.
+
+`lightning-modal-header` supports optional tagline text, which displays in smaller text below the heading. Enclose the
+tagline text directly in the `lightning-modal-header` component, no HTML tag or attribute is needed. You can include links with `<a>`
+tags, which are the only HTML elements permitted. If the header text is too long to fit on one line, it wraps in the modal header. 
+
+This sample code shows the expected order of the modal components. The modal content is
+created in a separate component extended from `LightningModal`. See 
+[Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/)
+
+```html
+<!-- my/modalDialog.html -->
+<template>
+    <lightning-modal-header label="My Modal">
+        Tagline can be descriptive content with <a href="https://www.example.com">links</a> and can wrap to multiple lines.
+    </lightning-modal-header>
+    <lightning-modal-body>
+        <!-- modal content specified in LightningModal component -->
+    </lightning-modal-body>
+</template>
+```
+#### Component Styling
+
+`lightning-modal-header` implements the [modals](https://www.lightningdesignsystem.com/components/modals/) blueprint in the Salesforce Lightning Design System (SLDS).
+
+To apply custom styling, use the `:host` selector or define a custom class using the `class` attribute.
+
+```html
+<lightning-modal-header label="My Modal" class="my-modal-header">
+   
+</lightning-modal-header>
+```
+
+Use SLDS styling hooks to customize the component's styles. Several `--sds-c-modal-header-*` and `--sds-c-modal-heading-*` hooks 
+enable you to customize the header. 
+
+For example, specify the background color on the button using the `sds-c-modal-header-color-background` custom property.
+
+```css
+.my-modal-header {
+    --sds-c-modal-header-color-background: LightGray;
+}
+```
+
+See the modal blueprint's [Styling Hooks Overview](https://www.lightningdesignsystem.com/components/modals/#Styling-Hooks-Overview) for a list of CSS custom properties.
+
+For more information, see [Style Components Using Lightning Design System Styling Hooks](docs/component-library/documentation/lwc/lwc.create_components_css_custom_properties) in the Lightning Web Components Developer Guide.
+
+#### Accessibility
+
+When you use `lightning-modal-header` in your modal, the rendered modal provides an `aria-labelledby` attribute set to the ID of the header element.
+If you don't use `lightning-modal-header`, the accessible label is provided using `aria-label` set to the label you provide in the modal.
+
+When the modal opens, focus goes to the first interactive element in the modal. If the header includes a link in tagline text, the link
+gets initial focus. 
+
+See [Lightning Web Components Developer Guide](docs/component-library/documentation/en/lwc/) for more information about accessibility in modals.

package/src/lightning/modalHeader/modalHeader.html

@@ -0,0 +1,16 @@
+ <template>
+    <div class="slds-modal__header">
+        <template if:true={label}>
+            <h1
+                id="modal-label"
+                class="slds-modal__title slds-hyphenate"
+                tabindex="-1"
+                data-label
+            >{label}</h1>
+        </template>
+        <slot
+            data-default-slot
+            onslotchange={handleDefaultSlotChange}
+        ></slot>
+    </div>
+</template>

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() {