lightning-base-components 1.14.2-alpha → 1.14.6-alpha

package/src/lightning/datatable/wrapText.js

@@ -3,8 +3,10 @@ import labelWrapText from '@salesforce/label/LightningDatatable.wrapText';
 import { getStateColumnIndex, getColumns } from './columns';
 import { normalizeBoolean } from 'lightning/utilsPrivate';
 import { normalizeNumberAttribute } from './utils';
+import { getDefaultState } from './state';
 
-const nonWrapableTypes = [
+const WRAP_TEXT_DEFAULT = false;
+const NON_WRAPPABLE_TYPES = [
     'action',
     'boolean',
     'button',
@@ -13,17 +15,33 @@ const nonWrapableTypes = [
     'rowNumber',
 ];
 
-const WRAP_TEXT_DEFAULT = false;
-
 const i18n = {
     clipText: labelClipText,
     wrapText: labelWrapText,
 };
 
-function isWrapableType(type) {
-    return nonWrapableTypes.indexOf(type) < 0;
+/************************** WRAP TEXT STATE **************************/
+
+// Returns a boolean representing whether or not the column should be text wrapped
+export function getWrapTextState(state = getDefaultState(), colKeyValue) {
+    return state.wrapText[colKeyValue] || WRAP_TEXT_DEFAULT;
 }
 
+// Sets a boolean value in state's wrapText object against the column key value
+// representing whether or not the column is text wrapped
+export function setWrapTextState(state = getDefaultState(), columnDefinition) {
+    const { colKeyValue, type, wrapText } = columnDefinition;
+
+    if (isWrappableType(type)) {
+        state.wrapText[colKeyValue] =
+            normalizeBoolean(wrapText) || WRAP_TEXT_DEFAULT;
+    }
+}
+
+/************************** WRAP TEXT MAX LINES **************************/
+
+// Normalizes and sets wrapTextMaxLines in datatable's state object
+// The normalized value should be a positive integer or it'll fall back to undefined
 export function setWrapTextMaxLines(state, value) {
     state.wrapTextMaxLines = normalizeNumberAttribute(
         'wrapTextMaxLines',
@@ -33,6 +51,8 @@ export function setWrapTextMaxLines(state, value) {
     );
 }
 
+// Sets the `wrapText` and `wrapTextMaxLines` values in the cell object for all cells in a column
+// These values are used by primitiveCellFactory to set the required classes on the cell for wrapping
 function updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue) {
     state.rows.forEach((row) => {
         const cell = row.cells[colIndex];
@@ -43,39 +63,17 @@ function updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue) {
     });
 }
 
-function updateSelectedOptionInHeaderActions(state, colKeyValue) {
-    const columns = getColumns(state);
-    const colIndex = getStateColumnIndex(state, colKeyValue);
-    const colData = columns[colIndex];
-
-    colData.actions.internalActions.forEach((action) => {
-        if (action.name === 'wrapText') {
-            action.checked = state.wrapText[colKeyValue];
-        }
-        if (action.name === 'clipText') {
-            action.checked = !state.wrapText[colKeyValue];
-        }
-    });
-
-    updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue);
-
-    // lets force a refresh on this column, because the wrapText checked value changed.
-    colData.actions = Object.assign({}, colData.actions);
-}
-
-export function getWrapTextState(state = getDefaultState(), colKeyValue) {
-    return state.wrapText[colKeyValue] || WRAP_TEXT_DEFAULT;
-}
-
-export function setWrapTextState(state = getDefaultState(), columnDefinition) {
-    const { colKeyValue, type, wrapText } = columnDefinition;
-
-    if (isWrapableType(type)) {
-        state.wrapText[colKeyValue] =
-            normalizeBoolean(wrapText) || WRAP_TEXT_DEFAULT;
-    }
-}
-
+/************************** HEADER ACTIONS **************************/
+
+/**
+ * Returns an object representing the two internal header actions that datatable
+ * provides - Wrap Text and Clip Text.
+ * Each header action contains a label, title, action name and its selected value (checked)
+ *
+ * @param {Object} state - datatable's state object
+ * @param {Object} columnDefinition - datatable's column definitions
+ * @returns
+ */
 export function getActions(state, columnDefinition) {
     const wrapTextActions = [];
     const { hideDefaultActions, type, colKeyValue } = columnDefinition;
@@ -84,7 +82,7 @@ export function getActions(state, columnDefinition) {
     setWrapTextState(state, columnDefinition);
 
     // if not hidden and isWrapable, sets the internal actions
-    if (isWrapableType(type) && !hideDefaultActions) {
+    if (isWrappableType(type) && !hideDefaultActions) {
         const isTextWrapped = getWrapTextState(state, colKeyValue);
 
         wrapTextActions.push({
@@ -105,19 +103,51 @@ export function getActions(state, columnDefinition) {
     return wrapTextActions;
 }
 
+/**
+ * If the action is an internal action and if the wrapText value for a column
+ * needs to be changed in the state, change it to the new value and update
+ * the check mark to represent the currently selected action
+ *
+ * @param {Object} state - datatable's state object
+ * @param {String} action - action that was selected/triggered
+ * @param {String} colKeyValue - column key value
+ */
 export function handleTriggeredAction(state, action, colKeyValue) {
-    if (action.name === 'wrapText' || action.name === 'clipText') {
-        // If will change state
-        if (state.wrapText[colKeyValue] !== (action.name === 'wrapText')) {
-            state.wrapText[colKeyValue] = action.name === 'wrapText';
+    const actionName = action.name;
+    if (actionName === 'wrapText' || actionName === 'clipText') {
+        // If state should be changed
+        if (state.wrapText[colKeyValue] !== (actionName === 'wrapText')) {
+            state.wrapText[colKeyValue] = actionName === 'wrapText';
 
             updateSelectedOptionInHeaderActions(state, colKeyValue);
         }
     }
 }
 
-export function getDefaultState() {
-    return {
-        wrapText: {},
-    };
+// Update the 'checked' value of the each action to show which action is selected
+// and which action is not selected
+function updateSelectedOptionInHeaderActions(state, colKeyValue) {
+    const columns = getColumns(state);
+    const colIndex = getStateColumnIndex(state, colKeyValue);
+    const colData = columns[colIndex];
+
+    colData.actions.internalActions.forEach((action) => {
+        if (action.name === 'wrapText') {
+            action.checked = state.wrapText[colKeyValue];
+        }
+        if (action.name === 'clipText') {
+            action.checked = !state.wrapText[colKeyValue];
+        }
+    });
+
+    updateWrapTextAndMaxLinesValuesInCells(state, colIndex, colKeyValue);
+
+    // Force a refresh on this column, because the wrapText checked value changed.
+    colData.actions = Object.assign({}, colData.actions);
+}
+
+/************************** HELPER FUNCTIONS **************************/
+
+function isWrappableType(type) {
+    return NON_WRAPPABLE_TYPES.indexOf(type) < 0;
 }

package/src/lightning/dualListbox/dualListbox.html

@@ -9,7 +9,7 @@
         <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp}></lightning-helptext>
         <div class="slds-form-element__control">
             <div class="slds-dueling-list" onfocusin={handleFocus} onfocusout={handleBlur}>
-                <div class="slds-assistive-text" id="assertive-thing" aria-live="assertive"></div>
+                <div class="slds-assistive-text" id="assertive-thing" aria-live="assertive">{_messageToDisplay}</div>
                 <div class="slds-assistive-text" id="keyboard-interacton">{i18n.componentAssistiveText}</div>
                 <div class={computedLeftColumnClass}>
                     <span class="slds-form-element__label" id="source-list-label">{sourceLabel}</span>

package/src/lightning/dualListbox/dualListbox.js

@@ -14,6 +14,8 @@ import labelRequiredOptionError from '@salesforce/label/LightningDualListbox.req
 import labelUpButtonAssistiveText from '@salesforce/label/LightningDualListbox.upButtonAssistiveText';
 import labelMoveSelectionToAssistiveText from '@salesforce/label/LightningDualListbox.moveSelectionToAssistiveText';
 import labelLoadingText from '@salesforce/label/LightningCombobox.loadingText';
+import labelMovedOptionsSingular from '@salesforce/label/LightningDualListbox.movedOptionsSingular';
+import labelMovedOptionsPlural from '@salesforce/label/LightningDualListbox.movedOptionsPlural';
 import { LightningElement, api, track } from 'lwc';
 import { handleKeyDownOnOption } from './keyboard';
 import { classSet, formatLabel } from 'lightning/utils';
@@ -47,6 +49,8 @@ const i18n = {
     upButtonAssistiveText: labelUpButtonAssistiveText,
     moveSelectionToAssistiveText: labelMoveSelectionToAssistiveText,
     loadingText: labelLoadingText,
+    movedOptionsSingular: labelMovedOptionsSingular,
+    movedOptionsPlural: labelMovedOptionsPlural,
 };
 
 /**
@@ -117,6 +121,9 @@ export default class LightningDualListbox extends LightningElement {
     @track highlightedOptions = [];
     @track focusableInSource;
     @track focusableInSelected;
+    @track highlightedOptionsLabel = [];
+
+    _messageToDisplay = '';
 
     isFocusOnList = false;
 
@@ -705,6 +712,8 @@ export default class LightningDualListbox extends LightningElement {
             );
         }
 
+        this.movedOptions(addToSelect);
+
         const oldSelectedValues = this._selectedValues;
         this._selectedValues = newValues;
         const invalidMove =
@@ -730,6 +739,7 @@ export default class LightningDualListbox extends LightningElement {
             this.interactingState.leave();
             this.isFocusOnList = false;
             this.highlightedOptions = [];
+            this.highlightedOptionsLabel = [];
             this.optionToFocus = null;
         }
 
@@ -785,6 +795,7 @@ export default class LightningDualListbox extends LightningElement {
         const start = all ? options.length : this.lastSelected;
         let val, select;
         this.highlightedOptions = [];
+        this.highlightedOptionsLabel = [];
         for (let i = 0; i < options.length; i++) {
             select = (i - start) * (i - end) <= 0;
             if (select) {
@@ -889,6 +900,7 @@ export default class LightningDualListbox extends LightningElement {
         if (this.selectedList !== currentList || !isMultiple) {
             if (this.selectedList) {
                 this.highlightedOptions = [];
+                this.highlightedOptionsLabel = [];
                 this.lastSelected = -1;
             }
             this.selectedList = currentList;
@@ -1013,6 +1025,36 @@ export default class LightningDualListbox extends LightningElement {
         }
         if (!isSame) {
             this.highlightedOptions = [];
+            this.highlightedOptionsLabel = [];
+        }
+    }
+
+    movedOptions(addToSelect) {
+        const listName = addToSelect ? this.selectedLabel : this.sourceLabel;
+
+        for (let i = 0; i < this.highlightedOptions.length; i++) {
+            let selectedOption = addToSelect
+                ? this.computedSourceList.filter(
+                      (item) => item.value === this.highlightedOptions[i]
+                  )
+                : this.computedSelectedList.filter(
+                      (item) => item.value === this.highlightedOptions[i]
+                  );
+            this.highlightedOptionsLabel.push(selectedOption[0].label);
+        }
+
+        if (this.highlightedOptions.length) {
+            const strToFormat =
+                this.highlightedOptions.length > 1
+                    ? i18n.movedOptionsPlural
+                    : i18n.movedOptionsSingular;
+            this._messageToDisplay = formatLabel(
+                strToFormat,
+                this.highlightedOptionsLabel.join(', '),
+                listName
+            );
+        } else {
+            this._messageToDisplay = '';
         }
     }
 }

package/src/lightning/formattedDateTime/__docs__/formattedDateTime.md

@@ -45,11 +45,11 @@ are specified, the component uses the default date format based on the user's lo
 
 The locale determines the order and format of the month, day, and year. For example, the English (United States) locale's date format is Oct 14, 2020 and the French (France) locale's date format is 14 Oct 2020. The locale doesn't determine the time zone. Time zone is a separate setting.
 
-The locale also determines whether to display time as 24-hour time or 12-hour time with AM and PM.
+The locale also determines whether to display time as 24-hour time or 12-hour time with AM and PM. You can override the locale default with the `hour12` attribute. See _Date and Time Display Examples_ for more information.
 
-Specify optional attributes to modify the date and time display, overriding the locale's default formatting.
+Specify optional attributes listed in the Specification tab to modify the date and time display, overriding the locale's default formatting.
 
-In the Component Library's Playground and the Mini-Playground in the Examples tab, the component is limited to the en-US locale.
+In the Mini-Playground in the Examples tab, the component is limited to the en-US locale.
 
 #### Time Zone Considerations
 
@@ -132,6 +132,35 @@ Displays: 1/11/2019, 6:53 PM EST
 </template>
 ```
 
+Displays: 1/11/2019, 18:53 EST
+
+```html
+<template>
+    <lightning-formatted-date-time
+        value="1547250828000"
+        year="numeric"
+        month="numeric"
+        day="numeric"
+        hour="2-digit"
+        hour12={ampm}
+        minute="2-digit"
+        time-zone-name="short"
+        time-zone="America/New_York"
+    >
+    </lightning-formatted-date-time>
+</template>
+```
+
+Set the `hour12` attribute using a variable. If set to `false` or any other string directly, the component interprets its value as true.
+
+```js
+import { LightningElement } from 'lwc';
+
+export default class FormattedDateTimeHour12 extends LightningElement {
+    ampm = false;
+}
+```
+
 #### Date and Time Stored in Salesforce
 
 Salesforce uses the ISO8601 format `YYYY-MM-DD` to store date fields, which store a date without time, and includes no time zone information.
@@ -186,6 +215,10 @@ Displays: December 03, 2017, 12:00 PM
 </template>
 ```
 
+#### Usage Considerations
+
+This component has usage differences from its Aura counterpart. See [Base Components: Aura Vs Lightning Web Components](docs/component-library/documentation/lwc/lwc.migrate_map_aura_lwc_components) in the Lightning Web Components Developer Guide.
+
 #### Source Code
 
 `lightning-formatted-date-time` is available in the [Base Components Recipes GitHub repository](https://github.com/salesforce/base-components-recipes#documentation). It's transpiled into the `c` namespace so that you can use it in your own projects.

package/src/lightning/formattedDateTime/__examples__/datetime/datetime.html

@@ -4,8 +4,8 @@
         <p><lightning-formatted-date-time value="1547250828000" year="2-digit" month="short" day="2-digit" hour="numeric"
                                        weekday="long" era="short"></lightning-formatted-date-time></p>
         <p><lightning-formatted-date-time value="1547250828000" year="numeric" month="numeric" day="numeric" hour="2-digit"
-                                        minute="2-digit" time-zone-name="short" hour12="true"></lightning-formatted-date-time></p>
+                                        minute="2-digit" time-zone-name="short"></lightning-formatted-date-time></p>
         <p><lightning-formatted-date-time value="1547250828000" year="numeric" month="numeric" day="numeric" hour="2-digit"
-                                        minute="2-digit" time-zone="UTC" time-zone-name="short" hour12="false"></lightning-formatted-date-time></p>
+                                        minute="2-digit" time-zone="UTC" time-zone-name="short" hour12={ampm}></lightning-formatted-date-time></p>
     </div>
 </template>

package/src/lightning/formattedDateTime/__examples__/datetime/datetime.js

@@ -1,3 +1,5 @@
 import { LightningElement } from 'lwc';
 
-export default class FormattedDateTimeDateTime extends LightningElement {}
+export default class FormattedDateTimeDateTime extends LightningElement {
+    ampm = false;
+}

package/src/lightning/formattedDateTime/__examples__/time/time.html

@@ -5,7 +5,7 @@
         <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" second="2-digit"></lightning-formatted-date-time></p>
         <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" time-zone="UTC"
                                         time-zone-name="short"></lightning-formatted-date-time></p>
-        <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" second="2-digit" hour12="false"
+        <p><lightning-formatted-date-time value="1547250828000" hour="2-digit" minute="2-digit" second="2-digit" hour12={ampm}
                                         time-zone-name="long"></lightning-formatted-date-time></p>
     </div>
 </template>

package/src/lightning/formattedDateTime/__examples__/time/time.js

@@ -1,3 +1,5 @@
 import { LightningElement } from 'lwc';
 
-export default class FormattedDateTimeTime extends LightningElement {}
+export default class FormattedDateTimeTime extends LightningElement {
+    ampm = false;
+}

package/src/lightning/formattedDateTime/formattedDateTime.js

@@ -92,6 +92,7 @@ export default class LightningFormattedDateTime extends LightningElement {
 
     /**
      * Determines whether time is displayed as 12-hour. If false, time displays as 24-hour. The default setting is determined by the user's locale.
+     * Set the value using a variable. If set to any string directly, the component interprets its value as true.
      * @type {boolean}
      *
      */

package/src/lightning/input/input.html

@@ -186,7 +186,7 @@
                         required={required}
                         readonly={readOnly}
                         disabled={disabled}>
-                    <label id="file-selector-label" data-file-selector-label for="input-file"
+                    <label id="file-selector-label" data-file-selector-label for="input-file" aria-hidden="true"
                         class="slds-file-selector__body">
                         <span class="slds-file-selector__button slds-button slds-button_neutral">
                             <lightning-primitive-icon icon-name="utility:upload" variant="bare" svg-class="slds-button__icon slds-button__icon_left">
@@ -202,7 +202,6 @@
         </div>
     </template>
 
-
     <template if:true={isTypeColor}>
         <div class="slds-color-picker">
             <div class="slds-form-element slds-color-picker__summary">
@@ -213,6 +212,7 @@
                         </template>
                         {label}
                     </label>
+                    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
                 </template>
                 <div class="slds-form-element__control">
                     <lightning-primitive-colorpicker-button
@@ -239,9 +239,6 @@
                             oninput={handleInput}>
                     </div>
                 </div>
-                <template if:false={hasExternalLabel}>
-                    <lightning-helptext if:true={fieldLevelHelp} content={fieldLevelHelp} alternative-text={helptextAlternativeText}></lightning-helptext>
-                </template>
             </div>
         </div>
     </template>

package/src/lightning/inputUtils/validity.js

@@ -7,6 +7,7 @@ import labelTooLong from '@salesforce/label/LightningErrorMessage.validityTooLon
 import labelTooShort from '@salesforce/label/LightningErrorMessage.validityTooShort';
 import labelTypeMismatch from '@salesforce/label/LightningErrorMessage.validityTypeMismatch';
 import labelValueMissing from '@salesforce/label/LightningErrorMessage.validityValueMissing';
+import labelSelectAtleastOneValue from '@salesforce/label/LightningErrorMessage.validitySelectAtleastOne';
 import { assert } from 'lightning/utilsPrivate';
 
 const constraintsSortedByPriority = [
@@ -20,6 +21,7 @@ const constraintsSortedByPriority = [
     'tooShort',
     'typeMismatch',
     'valueMissing',
+    'selectAtleastOneValue',
 ];
 
 const defaultLabels = {
@@ -33,6 +35,7 @@ const defaultLabels = {
     tooShort: labelTooShort,
     typeMismatch: labelTypeMismatch,
     valueMissing: labelValueMissing,
+    selectAtleastOneValue: labelSelectAtleastOneValue,
 };
 
 function resolveBestMatch(validity) {
@@ -103,6 +106,12 @@ function newValidityState(constraintsProvider) {
         get badInput() {
             return computeConstraint(constraintsProvider, 'badInput');
         }
+        get selectAtleastOneValue() {
+            return computeConstraint(
+                constraintsProvider,
+                'validitySelectAtleastOneValue'
+            );
+        }
 
         get valid() {
             return !(
@@ -115,7 +124,8 @@ function newValidityState(constraintsProvider) {
                 this.rangeOverflow ||
                 this.stepMismatch ||
                 this.customError ||
-                this.badInput
+                this.badInput ||
+                this.selectAtleastOneValue
             );
         }
     }
@@ -200,6 +210,7 @@ export class FieldConstraintApi {
             tooLong: this.inputComponent.messageWhenTooLong,
             typeMismatch: this.inputComponent.messageWhenTypeMismatch,
             valueMissing: this.inputComponent.messageWhenValueMissing,
+            selectAtleastOneValue: this.inputComponent.messageWhenValueMissing,
         });
     }
 

package/src/lightning/pillContainer/__docs__/pillContainer.md

@@ -14,6 +14,7 @@ selections when filtering a list, such as from a multi-select picklist.
 To specify the pills, set the `items` attribute to an array of values in your component's JavaScript. 
 
 By default, all pills in the container are displayed and wrap to additional lines if they can't fit on one line. 
+For information about changing the behavior, see **Managing Pill Layout in the Container**.
 
 This example creates three pills: a text-only pill, a pill with an avatar, and
 a pill with an icon.
@@ -70,7 +71,7 @@ To create a pill with an avatar, use the following attributes.
 To create a pill with an icon, use the following attributes.
 
 -   `type`: The media type. Use `icon`.
--   `iconName`: Required. The Lightning Design System name of the icon. Names are written in the format '\utility:down\' where 'utility' is the category, and 'down' is the specific icon to be displayed. Only utility icons can be used in this component.
+-   `iconName`: Required. The Lightning Design System name of the icon. Names are written in the format 'utility:down' where 'utility' is the category, and 'down' is the specific icon to be displayed. Only utility icons can be used for the `iconName`.
 -   `alternativeText`: The alternative text used to describe the icon. Describe what happens when you click the button, for example 'Upload File', not what the icon looks like, 'Paperclip'.
 
 `lightning-pill-container` provides two variants: `bare` and `standard` (default). They are visually the same. However, the `standard` variant renders pills in an unordered list element. For more information, see the **Accessibility** section.
@@ -135,9 +136,12 @@ set to false by default, which makes all pills display and wrap to multiple line
 - `single-line`: Specifies that the pill container can display one line of pills. By default, if pills can't fit on one line, they are wrapped to additional lines to fit the container. Set `single-line` to true to limit pill display to one line. This attribute overrides `is-collapsible` and `is-expanded`.
 
 If all pills aren't displayed, the component shows a text button indicating how many more pills there are.
+For example, if there are five more pills that aren’t displayed, the text button shows `+5 more`. The text button fires the `focus` event when you click it.
 
 To display a long list of pills as collapsed, set `is-collapsible` to true and optionally set `is-expanded` to false. Otherwise, pills are displayed expanded.
 
+##### Expand and Collapse Pills Programmatically
+
 Use `is-collapsible` and `is-expanded` to programmatically expand and collapse the pills.
 
 This example sets `is-collapsible` and uses a button to change the value of `is-expanded`.
@@ -175,6 +179,46 @@ export default class PillContainerCanCollapse extends LightningElement {
     ];
 }
 ```
+##### Display All Pills With the `+n more` Button
+
+If all pills aren't displayed, the component shows a text button labeled `+n more` to indicate more pills can be displayed. By default, `lightning-pill-container` doesn’t handle the `focus` event that’s fired when you click the button. You can handle the event to display more pills or write logic to do something else when the button is clicked.
+
+This example sets the pills to be collapsible but not expanded and handles the focus event.
+
+```html
+<template>
+    <div style="width: 600px">
+            <lightning-pill-container
+                items={items}
+                is-collapsible={collapsible}
+	            is-expanded={expanded}
+                onfocus={handlePillExpansion}
+            >
+            </lightning-pill-container>
+    </div>
+  </template>
+  ```
+
+The list of pills is initially collapsed. When there are too many pills to be displayed, the text button labeled `+n more` displays. The handler for the `focus` event enables all the pills to display.
+
+```javascript
+import { LightningElement } from 'lwc';
+
+export default class PillContainerMoreButtonExpands extends LightningElement {
+    collapsible = true;
+	expanded = false;
+
+handlePillExpansion(){
+    this.expanded = true;
+}
+
+    items = [
+        { 
+        //define the pills
+        }
+    ];
+}
+```
 
 #### Component Styling
 

package/src/lightning/positionLibrary/positionLibrary.js

@@ -131,50 +131,38 @@ function createRelationship(
     );
 
     const autoShrink = config.autoShrink.height || config.autoShrink.width;
-    const modal = new OverlayDetector(originalConfig.target);
-    if (
-        (config.scrollableParentBound && scrollableParent) ||
-        (modal.isInsideModal && modal.overlay && autoShrink)
-    ) {
-        let parent;
-        if (config.scrollableParentBound && scrollableParent) {
-            parent = normalizeElement(scrollableParent);
-        } else if (modal.isInsideModal && modal.overlay) {
-            parent = normalizeElement(modal.overlay);
-        }
-        if (parent) {
-            const boxConfig = {
-                element: config.element,
-                enabled: config.enabled,
-                target: createProxy(parent),
-                align: {},
-                targetAlign: {},
-                pad: 3,
-                boxDirections: {
-                    top: true,
-                    bottom: true,
-                    left: true,
-                    right: true,
-                },
-            };
-
-            if (autoShrink) {
-                const style = boxConfig.element.getNode().style;
-                if (!style.minHeight) {
-                    style.minHeight = config.minHeight;
-                    boxConfig.element._removeMinHeight = true;
-                }
-
-                boxConfig.boxDirections = {
-                    top: !!config.autoShrink.height,
-                    bottom: !!config.autoShrink.height,
-                    left: !!config.autoShrink.width,
-                    right: !!config.autoShrink.width,
-                };
-                constraintList.push(new Constraint('shrinking box', boxConfig));
-            } else {
-                constraintList.push(new Constraint('bounding box', boxConfig));
+    if (config.scrollableParentBound && scrollableParent) {
+        const parent = normalizeElement(scrollableParent);
+        const boxConfig = {
+            element: config.element,
+            enabled: config.enabled,
+            target: createProxy(parent),
+            align: {},
+            targetAlign: {},
+            pad: 3,
+            boxDirections: {
+                top: true,
+                bottom: true,
+                left: true,
+                right: true,
+            },
+        };
+        if (autoShrink) {
+            const style = boxConfig.element.getNode().style;
+            if (!style.minHeight) {
+                style.minHeight = config.minHeight;
+                boxConfig.element._removeMinHeight = true;
             }
+
+            boxConfig.boxDirections = {
+                top: !!config.autoShrink.height,
+                bottom: !!config.autoShrink.height,
+                left: !!config.autoShrink.width,
+                right: !!config.autoShrink.width,
+            };
+            constraintList.push(new Constraint('shrinking box', boxConfig));
+        } else {
+            constraintList.push(new Constraint('bounding box', boxConfig));
         }
     }