lightning-base-components 1.21.2-alpha → 1.21.4-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/metadata/raptor.json +77 -1
- package/package.json +108 -15
- package/scopedImports/@salesforce-label-LightningDatatable.showActions.js +1 -1
- package/scopedImports/@salesforce-label-LightningForm.controllerFieldsMessage.js +1 -0
- package/scopedImports/@salesforce-label-LightningForm.dependentFieldsHeader.js +1 -0
- package/scopedImports/@salesforce-label-LightningForm.dependentFieldsListHeading.js +1 -0
- package/scopedImports/@salesforce-label-LightningForm.generalDependentFieldsMessage.js +1 -0
- package/scopedImports/@salesforce-label-LightningForm.learnMore.js +1 -0
- package/scopedImports/@salesforce-label-LightningForm.okButton.js +1 -0
- package/scopedImports/@salesforce-label-LightningLookup.modalCancel.js +1 -0
- package/scopedImports/@salesforce-label-LightningLookup.modalSelect.js +1 -0
- package/scopedImports/@salesforce-label-LightningProgressIndicator.currentStage.js +1 -1
- package/scopedImports/@salesforce-label-LightningProgressIndicator.errorStage.js +1 -0
- package/scopedImports/@salesforce-label-LightningProgressIndicator.stageComplete.js +1 -1
- package/scopedImports/@salesforce-label-LightningProgressIndicator.stageNotStarted.js +1 -1
- package/scopedImports/@salesforce-label-LightningRichTextEditor.colorPicker.js +1 -0
- package/src/lightning/accordion/accordion-section.slds.css +3 -3
- package/src/lightning/accordion/accordion.slds.css +1 -2
- package/src/lightning/accordionSection/accordion-section.slds.css +3 -3
- package/src/lightning/accordionSection/accordionSection.js +3 -1
- package/src/lightning/accordionSection/button.slds.css +1 -1
- package/src/lightning/avatar/avatar.html +1 -0
- package/src/lightning/badge/badge.html +3 -3
- package/src/lightning/badge/badge.js +1 -0
- package/src/lightning/badge/badge.js-meta.xml +3 -0
- package/src/lightning/baseCombobox/base-combobox.slds.css +11 -6
- package/src/lightning/baseCombobox/baseCombobox.html +5 -2
- package/src/lightning/baseCombobox/baseCombobox.js +5 -18
- package/src/lightning/baseCombobox/baseCombobox.js-meta.xml +6 -0
- package/src/lightning/baseCombobox/input-text.slds.css +41 -68
- package/src/lightning/baseCombobox/keyboard.js +12 -4
- package/src/lightning/baseCombobox/listbox.slds.css +51 -99
- package/src/lightning/baseCombobox/spinner.slds.css +62 -62
- package/src/lightning/baseComboboxFormattedText/baseComboboxFormattedText.js-meta.xml +6 -0
- package/src/lightning/baseComboboxItem/baseComboboxItem.js +10 -6
- package/src/lightning/baseComboboxItem/baseComboboxItem.js-meta.xml +6 -0
- package/src/lightning/baseComboboxItem/listbox.slds.css +51 -99
- package/src/lightning/baseFormattedText/baseFormattedText.js +2 -2
- package/src/lightning/button/__docs__/button.md +2 -1
- package/src/lightning/button/button.js +5 -5
- package/src/lightning/button/button.slds.css +1 -1
- package/src/lightning/buttonIcon/__docs__/buttonIcon.md +1 -0
- package/src/lightning/buttonIcon/button-icon.slds.css +1 -1
- package/src/lightning/buttonIcon/buttonIcon.html +1 -1
- package/src/lightning/buttonIcon/buttonIcon.js +18 -17
- package/src/lightning/buttonIconStateful/button-icon-stateful.slds.css +4 -2
- package/src/lightning/buttonIconStateful/button-icon.slds.css +1 -1
- package/src/lightning/buttonIconStateful/button.slds.css +1 -1
- package/src/lightning/buttonMenu/button-icon.slds.css +1 -1
- package/src/lightning/buttonMenu/button-menu.slds.css +8 -2
- package/src/lightning/buttonMenu/button.slds.css +1 -1
- package/src/lightning/buttonMenu/buttonMenu.css +5 -0
- package/src/lightning/buttonMenu/buttonMenu.js +2 -0
- package/src/lightning/buttonStateful/button-stateful.slds.css +6 -2
- package/src/lightning/buttonStateful/button.slds.css +1 -1
- package/src/lightning/buttonStateful/buttonStateful.js +4 -1
- package/src/lightning/calendar/calendar.js-meta.xml +6 -0
- package/src/lightning/calendar/calendar.slds.css +9 -2
- package/src/lightning/colorPickerCustom/color-picker-custom.slds.css +22 -23
- package/src/lightning/colorPickerCustom/colorPickerCustom.js +12 -0
- package/src/lightning/colorPickerCustom/input-text.slds.css +41 -68
- package/src/lightning/colorPickerPanel/color-picker-panel.slds.css +9 -10
- package/src/lightning/colorPickerPanel/colorPickerPanel.js +11 -1
- package/src/lightning/colorPickerPanel/popover.slds.css +0 -2
- package/src/lightning/combobox/combobox.html +1 -0
- package/src/lightning/combobox/combobox.slds.css +1 -2
- package/src/lightning/combobox/form-element.slds.css +54 -54
- package/src/lightning/datatable/__examples__disabled/customComponentWrapper/customComponentWrapper.html +11 -0
- package/src/lightning/datatable/__examples__disabled/customComponentWrapper/customComponentWrapper.js +25 -0
- package/src/lightning/datatable/__examples__disabled/customComponentWrapper/generateData.js +15 -0
- package/src/lightning/datatable/__examples__disabled/customDatatableWrapper/customDatatableWrapper.js +89 -0
- package/src/lightning/datatable/__examples__disabled/customDatatypeDeleteRowBtn/customDatatypeDeleteRowBtn.html +6 -0
- package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeDeleteRowBtn/customDatatypeDeleteRowBtn.js +1 -16
- package/src/lightning/datatable/__examples__disabled/customDatatypeLink/customDatatypeLink.html +9 -0
- package/src/lightning/datatable/__examples__disabled/customDatatypeRowOrderingBtn/customDatatypeRowOrderingBtn.html +3 -0
- package/src/lightning/datatable/__examples__disabled/customDatatypeRowOrderingBtn/customDatatypeRowOrderingBtn.js +3 -0
- package/src/lightning/datatable/__examples__disabled/customDatatypeTable/customNumber.html +3 -0
- package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/customNumberEdit.html +2 -0
- package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/deleteRow.html +3 -2
- package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/iconPill.html +1 -1
- package/src/lightning/datatable/{__examples__/customDatatypeRowOrderingBtn/customDatatypeRowOrderingBtn.html → __examples__disabled/customNestedComponent/customNestedComponent.html} +2 -2
- package/src/lightning/datatable/__examples__disabled/customNestedComponent/customNestedComponent.js +12 -0
- package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/customInput.html +4 -0
- package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/myCustomTypeDatatable.js +17 -0
- package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/nestedSimpleComponentParent.html +7 -0
- package/src/lightning/datatable/__examples__disabled/simpleComponentNested/simpleComponentNested.html +9 -0
- package/src/lightning/datatable/__examples__disabled/simpleComponentNested/simpleComponentNested.js +6 -0
- package/src/lightning/datatable/autoWidthStrategy.js +145 -217
- package/src/lightning/datatable/columnResizer.js +80 -190
- package/src/lightning/datatable/columnWidthManager.js +128 -243
- package/src/lightning/datatable/columns.js +192 -283
- package/src/lightning/datatable/datagrid.slds.css +187 -0
- package/src/lightning/datatable/datatable.js +647 -614
- package/src/lightning/datatable/errors.js +19 -28
- package/src/lightning/datatable/fixedWidthStrategy.js +27 -49
- package/src/lightning/datatable/headerActions.js +10 -42
- package/src/lightning/datatable/indexes.js +42 -0
- package/src/lightning/datatable/infiniteLoading.js +27 -46
- package/src/lightning/datatable/inlineEdit.js +311 -322
- package/src/lightning/datatable/keyboard.js +490 -510
- package/src/lightning/datatable/renderManager.js +10 -11
- package/src/lightning/datatable/resizeObserver.js +10 -67
- package/src/lightning/datatable/rowLevelActions.js +7 -6
- package/src/lightning/datatable/rowNumber.js +41 -79
- package/src/lightning/datatable/rowSelection.js +236 -291
- package/src/lightning/datatable/rowSelectionShared.js +26 -33
- package/src/lightning/datatable/rows.js +264 -476
- package/src/lightning/datatable/sort.js +27 -82
- package/src/lightning/datatable/templates/div/div.css +2 -57
- package/src/lightning/datatable/templates/div/div.html +25 -10
- package/src/lightning/datatable/templates/div/div.lbc.native.css +3 -0
- package/src/lightning/datatable/templates/div/div.lbc.synthetic.css +80 -0
- package/src/lightning/datatable/templates/table/table.html +16 -5
- package/src/lightning/datatable/tree.js +17 -35
- package/src/lightning/datatable/types.js +10 -31
- package/src/lightning/datatable/utils.js +54 -29
- package/src/lightning/datatable/virtualization.js +2 -5
- package/src/lightning/datatable/widthManagerShared.js +24 -41
- package/src/lightning/datatable/wrapText.js +45 -77
- package/src/lightning/datepicker/datepicker.js +32 -9
- package/src/lightning/datepicker/datepicker.js-meta.xml +6 -0
- package/src/lightning/datepicker/form-element.slds.css +54 -54
- package/src/lightning/datepicker/input-text.slds.css +41 -68
- package/src/lightning/datetimepicker/datetimepicker.js-meta.xml +6 -0
- package/src/lightning/datetimepicker/form-element.slds.css +54 -54
- package/src/lightning/datetimepicker/input-text.slds.css +41 -68
- package/src/lightning/dualListbox/dual-listbox.slds.css +7 -2
- package/src/lightning/dualListbox/dualListbox.js +7 -8
- package/src/lightning/dualListbox/form-element.slds.css +54 -54
- package/src/lightning/dualListbox/listbox.slds.css +51 -99
- package/src/lightning/dynamicIcon/dynamic-icon-strength.slds.css +1 -2
- package/src/lightning/dynamicIcon/dynamic-icon-trend.slds.css +1 -2
- package/src/lightning/formattedDateTime/formattedDateTime.js +7 -62
- package/src/lightning/formattedDateTime/formattedDateTime.js-meta.xml +3 -0
- package/src/lightning/formattedLocation/formattedLocation.html +1 -3
- package/src/lightning/formattedLocation/formattedLocation.js +3 -25
- package/src/lightning/formattedLookup/events.js +2 -4
- package/src/lightning/formattedName/formattedName.js +3 -2
- package/src/lightning/formattedName/formattedName.js-meta.xml +3 -0
- package/src/lightning/formattedNumber/formattedNumber.js +5 -51
- package/src/lightning/formattedNumber/formattedNumber.js-meta.xml +3 -0
- package/src/lightning/formattedRichText/formattedRichText.js +5 -5
- package/src/lightning/formattedRichText/linkTextNodes.js +58 -0
- package/src/lightning/formattedRichText/richTextConfig.js +1 -0
- package/src/lightning/groupedCombobox/form-element.slds.css +54 -54
- package/src/lightning/groupedCombobox/grouped-combobox.slds.css +0 -2
- package/src/lightning/groupedCombobox/groupedCombobox.js-meta.xml +1 -1
- package/src/lightning/groupedCombobox/input-text.slds.css +41 -68
- package/src/lightning/helptext/button-icon.slds.css +1 -1
- package/src/lightning/helptext/form-element.slds.css +54 -54
- package/src/lightning/helptext/helptext.css +7 -0
- package/src/lightning/helptext/helptext.js +3 -4
- package/src/lightning/icon/icon.html +1 -1
- package/src/lightning/icon/icon.slds.css +12 -25
- package/src/lightning/input/form-element.slds.css +54 -54
- package/src/lightning/input/input.html +5 -0
- package/src/lightning/inputAddress/addressFormat.js +31 -4
- package/src/lightning/inputAddress/fieldsLayout.js +6 -0
- package/src/lightning/inputAddress/form-element.slds.css +54 -54
- package/src/lightning/inputAddress/input-address.slds.css +1 -2
- package/src/lightning/inputAddress/input-text.slds.css +41 -68
- package/src/lightning/inputAddress/inputAddress.html +19 -1
- package/src/lightning/inputAddress/inputAddress.js +75 -3
- package/src/lightning/inputAddress/inputAddress.js-meta.xml +3 -0
- package/src/lightning/inputLocation/form-element.slds.css +54 -54
- package/src/lightning/inputLocation/input-location.slds.css +1 -2
- package/src/lightning/inputLocation/input-text.slds.css +41 -68
- package/src/lightning/inputName/form-element.slds.css +54 -54
- package/src/lightning/inputName/input-text.slds.css +41 -68
- package/src/lightning/interactiveDialogBase/interactive-dialog-base.slds.css +0 -3
- package/src/lightning/interactiveDialogBase/interactiveDialogBase.js-meta.xml +6 -0
- package/src/lightning/internationalizationLibrary/address/AddressFormat.js +553 -610
- package/src/lightning/lookupAddress/form-element.slds.css +54 -54
- package/src/lightning/lookupAddress/listbox.slds.css +51 -99
- package/src/lightning/lookupAddress/location.js +2 -0
- package/src/lightning/lookupAddress/lookup-address.slds.css +0 -2
- package/src/lightning/lookupAddress/lookupAddress.html +6 -1
- package/src/lightning/lookupAddress/lookupAddress.js +40 -10
- package/src/lightning/menuDivider/menu-divider.slds.css +0 -2
- package/src/lightning/menuItem/menu-item.slds.css +8 -2
- package/src/lightning/menuSubheader/menu-subheader.slds.css +1 -2
- package/src/lightning/modal/__docs__/modal.md +10 -1
- package/src/lightning/modal/__modalUtils__/modalContainerTestConstants.js +3 -7
- package/src/lightning/modal/__modalUtils__/modalContainerTestMethods.js +39 -133
- package/src/lightning/modal/__modalUtils__/modalContainerTestMockData.js +1 -1
- package/src/lightning/modal/modal.js +1 -1
- package/src/lightning/modalBase/modal-base.slds.css +3 -3
- package/src/lightning/modalBase/modalBase.html +15 -10
- package/src/lightning/modalBase/modalBase.js +131 -154
- package/src/lightning/modalBase/modalBase.js-meta.xml +6 -0
- package/src/lightning/modalBody/modal-body.slds.css +1 -2
- package/src/lightning/modalBody/modalBody.css +6 -0
- package/src/lightning/modalFooter/modal-footer.slds.css +2 -2
- package/src/lightning/modalFooter/modalFooter.js +0 -21
- package/src/lightning/modalHeader/modal-header.slds.css +1 -2
- package/src/lightning/modalHeader/modalHeader.html +16 -4
- package/src/lightning/modalHeader/modalHeader.js +61 -36
- package/src/lightning/overlay/overlay.js-meta.xml +6 -0
- package/src/lightning/pill/link.html +1 -0
- package/src/lightning/pill/pill.slds.css +32 -58
- package/src/lightning/pill/plain.html +1 -0
- package/src/lightning/pill/plainLink.html +1 -0
- package/src/lightning/pillContainer/button.slds.css +1 -1
- package/src/lightning/pillContainer/listbox.slds.css +51 -99
- package/src/lightning/pillContainer/pill-container.slds.css +6 -10
- package/src/lightning/pillContainer/pill.slds.css +32 -58
- package/src/lightning/popup/popover.slds.css +0 -2
- package/src/lightning/primitiveBubble/primitiveBubble.js +42 -0
- package/src/lightning/primitiveBubble/primitiveBubble.js-meta.xml +6 -0
- package/src/lightning/primitiveButton/primitiveButoon.js-meta.xml +6 -0
- package/src/lightning/primitiveCellCheckbox/checkbox.css +2 -0
- package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css +16 -38
- package/src/lightning/primitiveCustomCell/primitiveCustomCell.js +26 -1
- package/src/lightning/primitiveDatatableCell/primitiveDatatableCell.js +1 -1
- package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.html +1 -1
- package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.js +13 -0
- package/src/lightning/primitiveHeaderFactory/nonsortableHeader.css +1 -0
- package/src/lightning/primitiveHeaderFactory/nonsortableHeader.html +19 -6
- package/src/lightning/primitiveHeaderFactory/selectableHeader.css +2 -0
- package/src/lightning/primitiveHeaderFactory/sortableHeader.html +3 -1
- package/src/lightning/primitiveIcon/icon.slds.css +12 -25
- package/src/lightning/primitiveIcon/primitiveIcon.js-meta.xml +6 -0
- package/src/lightning/primitiveIframe/primitiveIframe.js +3 -1
- package/src/lightning/primitiveInputCheckbox/form-element.slds.css +54 -54
- package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.js +5 -2
- package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.js-meta.xml +6 -0
- package/src/lightning/primitiveInputCheckboxButton/form-element.slds.css +54 -54
- package/src/lightning/primitiveInputCheckboxButton/input-checkbox-button.slds.css +6 -4
- package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.js +5 -2
- package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.js-meta.xml +6 -0
- package/src/lightning/primitiveInputColor/form-element.slds.css +54 -54
- package/src/lightning/primitiveInputColor/input-color.slds.css +2 -3
- package/src/lightning/primitiveInputColor/input-text.slds.css +41 -68
- package/src/lightning/primitiveInputColor/primitiveInputColor.js +5 -2
- package/src/lightning/primitiveInputColor/primitiveInputColor.js-meta.xml +6 -0
- package/src/lightning/primitiveInputFile/button.slds.css +1 -1
- package/src/lightning/primitiveInputFile/form-element.slds.css +54 -54
- package/src/lightning/primitiveInputFile/input-file.slds.css +1 -4
- package/src/lightning/primitiveInputFile/primitiveInputFile.js +4 -2
- package/src/lightning/primitiveInputFile/primitiveInputFile.js-meta.xml +6 -0
- package/src/lightning/primitiveInputRadio/primitiveInputRadio.js +4 -2
- package/src/lightning/primitiveInputSimple/form-element.slds.css +54 -54
- package/src/lightning/primitiveInputSimple/input-text.slds.css +41 -68
- package/src/lightning/primitiveInputSimple/primitiveInputSimple.js-meta.xml +6 -0
- package/src/lightning/primitiveInputToggle/form-element.slds.css +54 -54
- package/src/lightning/primitiveInputToggle/input-toggle.slds.css +50 -27
- package/src/lightning/primitiveInputToggle/primitiveInputToggle.js +5 -2
- package/src/lightning/primitiveInputToggle/primitiveInputToggle.js-meta.xml +6 -0
- package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.css +11 -0
- package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.html +2 -1
- package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.js +1 -0
- package/src/lightning/progressBar/progress-bar.slds.css +8 -10
- package/src/lightning/progressRing/progress-ring.slds.css +0 -23
- package/src/lightning/progressStep/base.html +5 -6
- package/src/lightning/progressStep/progressStep.js +15 -23
- package/src/lightning/prompt/__docs__/prompt.md +1 -1
- package/src/lightning/radioGroup/form-element.slds.css +54 -54
- package/src/lightning/radioGroup/radioGroup.html +1 -2
- package/src/lightning/radioGroup/radioGroup.js +1 -0
- package/src/lightning/routingService/routingService.js +31 -5
- package/src/lightning/select/form-element.slds.css +54 -54
- package/src/lightning/select/select.slds.css +4 -2
- package/src/lightning/shadowBaseClassPrivate/shadowBaseClassPrivate.js +0 -2
- package/src/lightning/sldsCommon/sldsCommon.css +134 -98
- package/src/lightning/sldsUtilsAlignment/sldsUtilsAlignment.css +1 -1
- package/src/lightning/sldsUtilsBox/sldsUtilsBox.css +14 -13
- package/src/lightning/sldsUtilsGrid/sldsUtilsGrid.css +95 -92
- package/src/lightning/sldsUtilsHyphenation/sldsUtilsHyphenation.css +1 -1
- package/src/lightning/sldsUtilsMargin/sldsUtilsMargin.css +77 -75
- package/src/lightning/sldsUtilsPadding/sldsUtilsPadding.css +73 -73
- package/src/lightning/sldsUtilsSizing/sldsUtilsSizing.css +552 -558
- package/src/lightning/sldsUtilsVisibility/sldsUtilsVisibility.css +5 -1
- package/src/lightning/spinner/spinner.slds.css +62 -62
- package/src/lightning/staticMap/staticMap.js +3 -2
- package/src/lightning/tab/tab.js +10 -5
- package/src/lightning/tab/tab.js-meta.xml +3 -0
- package/src/lightning/tab/tab.slds.css +14 -7
- package/src/lightning/tabBar/tab-bar.slds.css +16 -6
- package/src/lightning/tabBar/tabBar.js +10 -5
- package/src/lightning/tabset/__docs__/tabset.md +24 -1
- package/src/lightning/tabset/tabset.html +2 -0
- package/src/lightning/tabset/tabset.js +25 -38
- package/src/lightning/tabset/tabset.js-meta.xml +3 -0
- package/src/lightning/tabset/tabset.slds.css +0 -2
- package/src/lightning/textarea/form-element.slds.css +54 -54
- package/src/lightning/textarea/textarea.js +11 -2
- package/src/lightning/textarea/textarea.slds.css +22 -9
- package/src/lightning/timepicker/form-element.slds.css +54 -54
- package/src/lightning/timepicker/timepicker.js-meta.xml +6 -0
- package/src/lightning/timepicker/timepicker.slds.css +2 -2
- package/src/lightning/toast/__docs__/toast.md +20 -22
- package/src/lightning/toast/button-icon.slds.css +1 -1
- package/src/lightning/toast/icon.slds.css +12 -25
- package/src/lightning/toast/toast.js +15 -12
- package/src/lightning/toast/toast.slds.css +6 -18
- package/src/lightning/toastContainer/__docs__/toastContainer.md +3 -2
- package/src/lightning/toastContainer/toast.slds.css +6 -18
- package/src/lightning/toastContainer/toastContainer.js +25 -17
- package/src/lightning/tooltipLibrary/tooltipLibrary.js +36 -24
- package/src/lightning/tree/tree.js +2 -0
- package/src/lightning/utils/classSet.js +9 -3
- package/src/lightning/utilsPrivate/formatUtils.js +158 -0
- package/src/lightning/utilsPrivate/textUtils.js +16 -0
- package/src/lightning/utilsPrivate/utilsPrivate.js +56 -15
- package/src/lightning/utilsPrivate/validationUtils.js +59 -0
- package/src/lightning/verticalNavigation/vertical-navigation.slds.css +14 -0
- package/src/lightning/verticalNavigation/verticalNavigation.css +1 -1
- package/src/lightning/verticalNavigation/verticalNavigation.html +1 -1
- package/src/lightning/verticalNavigation/verticalNavigation.js +66 -28
- package/src/lightning/verticalNavigation/verticalNavigation.js-meta.xml +3 -0
- package/src/lightning/verticalNavigationItem/vertical-navigation-item.slds.css +63 -0
- package/src/lightning/verticalNavigationItem/verticalNavigationItem.css +2 -3
- package/src/lightning/verticalNavigationItem/verticalNavigationItem.js +29 -15
- package/src/lightning/verticalNavigationItem/verticalNavigationItem.js-meta.xml +3 -0
- package/src/lightning/verticalNavigationItem/verticalNavigationItem.lbc.native.css +2 -0
- package/src/lightning/verticalNavigationItem/verticalNavigationItem.lbc.synthetic.css +3 -0
- package/src/lightning/verticalNavigationItemBadge/badge.slds.css +76 -0
- package/src/lightning/verticalNavigationItemBadge/vertical-navigation-item.slds.css +63 -0
- package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.css +2 -3
- package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.html +1 -1
- package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.js +28 -15
- package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.js-meta.xml +3 -0
- package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.lbc.native.css +5 -0
- package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.lbc.synthetic.css +3 -0
- package/src/lightning/verticalNavigationItemIcon/vertical-navigation-item.slds.css +63 -0
- package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.css +2 -3
- package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.js +29 -15
- package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.js-meta.xml +3 -0
- package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.lbc.native.css +3 -0
- package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.lbc.synthetic.css +3 -0
- package/src/lightning/verticalNavigationOverflow/button.slds.css +503 -0
- package/src/lightning/verticalNavigationOverflow/vertical-navigation-item.slds.css +63 -0
- package/src/lightning/verticalNavigationOverflow/vertical-navigation-section.slds.css +17 -0
- package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.css +2 -1
- package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.html +2 -0
- package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.js +18 -13
- package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.js-meta.xml +3 -0
- package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.lbc.native.css +5 -0
- package/src/lightning/verticalNavigationSection/vertical-navigation-section.slds.css +13 -15
- package/src/lightning/verticalNavigationSection/verticalNavigationSection.js-meta.xml +3 -0
- package/src/lightning/datatable/__examples__/customDatatableWrapper/customDatatableWrapper.js +0 -158
- package/src/lightning/datatable/__examples__/customDatatypeDeleteRowBtn/customDatatypeDeleteRowBtn.html +0 -6
- package/src/lightning/datatable/__examples__/customDatatypeLink/customDatatypeLink.html +0 -9
- package/src/lightning/datatable/__examples__/customDatatypeRowOrderingBtn/customDatatypeRowOrderingBtn.js +0 -40
- package/src/lightning/datatable/__examples__/customDatatypeTable/customNumber.html +0 -3
- package/src/lightning/datatable/inlineEditShared.js +0 -26
- package/src/lightning/datatable/resizeSensor.js +0 -244
- package/src/lightning/formattedRichText/linkify.js +0 -43
- package/src/lightning/utilsPrivate/smartSetAttribute.js +0 -19
- /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatableWrapper/customDatatableWrapper.html +0 -0
- /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeLink/customDatatypeLink.js +0 -0
- /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeNumber/customDatatypeNumber.html +0 -0
- /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeNumber/customDatatypeNumber.js +0 -0
- /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/customDatatypeTable.js +0 -0
- /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/customLink.html +0 -0
- /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/customName.html +0 -0
- /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/orderingButtons.html +0 -0
|
@@ -1,23 +1,9 @@
|
|
|
1
|
-
import {
|
|
2
|
-
getTotalWidthsMetadata,
|
|
3
|
-
getColumnWidthFromDef,
|
|
4
|
-
} from './widthManagerShared';
|
|
5
1
|
import { clamp } from './utils';
|
|
2
|
+
import { getColumnWidth, getTotalWidthsData } from './widthManagerShared';
|
|
6
3
|
|
|
7
4
|
const MIN_MAX_THRESHOLD = 0.5;
|
|
8
5
|
const TRUNCATION_ALLOWANCE = 20;
|
|
9
6
|
|
|
10
|
-
/**
|
|
11
|
-
* Determines if a column exists at a specified index
|
|
12
|
-
*
|
|
13
|
-
* @param {Array} columns An array of columns
|
|
14
|
-
* @param {Integer} colIndex The column index to locate
|
|
15
|
-
* @returns {Boolean} Whether the column exists at the specified index
|
|
16
|
-
*/
|
|
17
|
-
function hasColumn(columns, colIndex) {
|
|
18
|
-
return columns.some((current) => current === colIndex);
|
|
19
|
-
}
|
|
20
|
-
|
|
21
7
|
/**
|
|
22
8
|
* Calculates the total width of all columns
|
|
23
9
|
*
|
|
@@ -25,7 +11,11 @@ function hasColumn(columns, colIndex) {
|
|
|
25
11
|
* @returns {Number} The total width of all columns
|
|
26
12
|
*/
|
|
27
13
|
function getTotalColumnWidth(columnWidths) {
|
|
28
|
-
|
|
14
|
+
let total = 0;
|
|
15
|
+
for (let i = 0, { length } = columnWidths; i < length; i += 1) {
|
|
16
|
+
total += columnWidths[i];
|
|
17
|
+
}
|
|
18
|
+
return total;
|
|
29
19
|
}
|
|
30
20
|
|
|
31
21
|
/**
|
|
@@ -56,56 +46,40 @@ function canAddWidth(currentWidth, widthToAdd, maxColumnWidth) {
|
|
|
56
46
|
* Determines the expected table width
|
|
57
47
|
*
|
|
58
48
|
* @param {Number} availableWidth The available width for the entire table
|
|
59
|
-
* @param {Object}
|
|
49
|
+
* @param {Object} widthsData The widths data
|
|
60
50
|
* @returns {Number} The expected width of the table
|
|
61
51
|
*/
|
|
62
|
-
function getExpectedTableWidth(availableWidth,
|
|
63
|
-
const
|
|
64
|
-
|
|
52
|
+
function getExpectedTableWidth(availableWidth, widthsData) {
|
|
53
|
+
const minTotalFlexibleWidth =
|
|
54
|
+
widthsData.totalFlexibleColumns * widthsData.minColumnWidth;
|
|
55
|
+
const minExpectedTableWidth =
|
|
56
|
+
minTotalFlexibleWidth +
|
|
57
|
+
widthsData.totalFixedWidth +
|
|
58
|
+
widthsData.totalResizedWidth;
|
|
59
|
+
return widthsData.totalFlexibleColumns === 0
|
|
65
60
|
? minExpectedTableWidth
|
|
66
61
|
: Math.max(minExpectedTableWidth, availableWidth);
|
|
67
62
|
}
|
|
68
63
|
|
|
69
|
-
/**
|
|
70
|
-
* Determines the minimum expected table width
|
|
71
|
-
*
|
|
72
|
-
* @param {Object} widthsMetadata The widths metadata object
|
|
73
|
-
* @returns {Number} The minimum expected table width
|
|
74
|
-
*/
|
|
75
|
-
function getMinExpectedTableWidth(widthsMetadata) {
|
|
76
|
-
const {
|
|
77
|
-
totalFixedWidth,
|
|
78
|
-
totalResizedWidth,
|
|
79
|
-
totalFlexibleColumns,
|
|
80
|
-
minColumnWidth,
|
|
81
|
-
} = widthsMetadata;
|
|
82
|
-
const minTotalFlexibleWidth = totalFlexibleColumns * minColumnWidth;
|
|
83
|
-
return minTotalFlexibleWidth + totalFixedWidth + totalResizedWidth;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
64
|
/**
|
|
87
65
|
* Strategy for columns that automatically determine their widths.
|
|
88
66
|
*/
|
|
89
67
|
export class AutoWidthStrategy {
|
|
90
|
-
// Private variables
|
|
91
|
-
|
|
92
68
|
// Instance array to hold column width ratios either calculated from visual distribution of column labels
|
|
93
69
|
// or from distribution of data amongst the columns. These ratios are reused except when datatable reacts
|
|
94
|
-
// to changes in data or columns and other
|
|
95
|
-
|
|
70
|
+
// to changes in data or columns and other variables at which point they are recalculated.
|
|
71
|
+
columnWidthRatios = [];
|
|
96
72
|
|
|
97
73
|
// Object used to store `minColumnWidth`, `maxColumnWidth`, along with other metadata like `totalFixedColumns`
|
|
98
|
-
// Refer: widthManagerShared.js
|
|
99
|
-
|
|
74
|
+
// Refer: widthManagerShared.js getTotalWidthsData
|
|
75
|
+
columnWidthData = {};
|
|
100
76
|
|
|
101
77
|
// Object which holds columns with min width (+ threshold) and columns with max width (-threshold)
|
|
102
78
|
// It is used in redistribution of extra space that is left or taken up while calculating auto widths
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
/************************** LIFECYCLE HOOKS **************************/
|
|
79
|
+
columnWidthsDistribution = {};
|
|
106
80
|
|
|
107
81
|
constructor(minColumnWidth, maxColumnWidth, wrapTextMaxLines = 3) {
|
|
108
|
-
this.
|
|
82
|
+
this.columnWidthData = {
|
|
109
83
|
minColumnWidth,
|
|
110
84
|
maxColumnWidth,
|
|
111
85
|
wrapTextMaxLines,
|
|
@@ -114,15 +88,13 @@ export class AutoWidthStrategy {
|
|
|
114
88
|
this.columnWidthsDistribution.colsWithMaxWidth = [];
|
|
115
89
|
}
|
|
116
90
|
|
|
117
|
-
/************************** PRIVATE SETTERS **************************/
|
|
118
|
-
|
|
119
91
|
/**
|
|
120
92
|
* Sets the minimum column width
|
|
121
93
|
*
|
|
122
94
|
* @param {Number} value The minimum column width in pixels
|
|
123
95
|
*/
|
|
124
96
|
set minColumnWidth(value) {
|
|
125
|
-
this.
|
|
97
|
+
this.columnWidthData.minColumnWidth = value;
|
|
126
98
|
}
|
|
127
99
|
|
|
128
100
|
/**
|
|
@@ -131,7 +103,7 @@ export class AutoWidthStrategy {
|
|
|
131
103
|
* @param {Number} value The maximum column width in pixels
|
|
132
104
|
*/
|
|
133
105
|
set maxColumnWidth(value) {
|
|
134
|
-
this.
|
|
106
|
+
this.columnWidthData.maxColumnWidth = value;
|
|
135
107
|
}
|
|
136
108
|
|
|
137
109
|
/**
|
|
@@ -140,33 +112,9 @@ export class AutoWidthStrategy {
|
|
|
140
112
|
* @param {Number} value The maximum number of lines
|
|
141
113
|
*/
|
|
142
114
|
set wrapTextMaxLines(value) {
|
|
143
|
-
this.
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
/************************** PRIVATE GETTERS **************************/
|
|
147
|
-
|
|
148
|
-
/**
|
|
149
|
-
* Gets the column width ratios
|
|
150
|
-
* See `_columnWidthRatios` in Private Variables for more information.
|
|
151
|
-
*
|
|
152
|
-
* @returns {Array} An array of column width ratios
|
|
153
|
-
*/
|
|
154
|
-
get columnWidthRatios() {
|
|
155
|
-
return this._columnWidthRatios;
|
|
115
|
+
this.columnWidthData.wrapTextMaxLines = value;
|
|
156
116
|
}
|
|
157
117
|
|
|
158
|
-
/**
|
|
159
|
-
* Gets the column width distribution.
|
|
160
|
-
* See `_columnWidthsDistribution` in Private Variables for more information.
|
|
161
|
-
*
|
|
162
|
-
* @returns {Object} An object of column width distributions
|
|
163
|
-
*/
|
|
164
|
-
get columnWidthsDistribution() {
|
|
165
|
-
return this._columnWidthsDistribution;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
/************************* HELPER FUNCTIONS **************************/
|
|
169
|
-
|
|
170
118
|
/**
|
|
171
119
|
* Get adjusted column widths from existing ratios which are based on data cells room taken
|
|
172
120
|
* or based on column labels space in headers. If `recomputeAutoWidthRatios` is true or ratios
|
|
@@ -174,55 +122,48 @@ export class AutoWidthStrategy {
|
|
|
174
122
|
* ratio. Any remaining space or extra space taken is then redistributed in second pass.
|
|
175
123
|
*
|
|
176
124
|
* @param {Object} datatableInterface Interface to datatable with callbacks giving width information
|
|
177
|
-
* @param {Object}
|
|
125
|
+
* @param {Object} columns Column definitions array with defined widths and other attributes
|
|
178
126
|
* @param {Boolean} recomputeAutoWidthRatios Whether ratios should be recalculated
|
|
179
127
|
* @returns {Object} columnWidths: [], expectedTableWidth: (number)
|
|
180
128
|
*/
|
|
181
129
|
getAdjustedColumnWidths(
|
|
182
130
|
datatableInterface,
|
|
183
|
-
|
|
131
|
+
columns,
|
|
184
132
|
recomputeAutoWidthRatios
|
|
185
133
|
) {
|
|
186
|
-
const
|
|
187
|
-
this._columnWidthMetaData,
|
|
188
|
-
columnDefs
|
|
189
|
-
);
|
|
190
|
-
|
|
134
|
+
const widthsData = getTotalWidthsData(this.columnWidthData, columns);
|
|
191
135
|
const availableWidth = datatableInterface.getAvailableWidthFromDom();
|
|
192
|
-
|
|
193
|
-
let expectedTableWidth = getExpectedTableWidth(
|
|
136
|
+
const expectedTableWidth = getExpectedTableWidth(
|
|
194
137
|
availableWidth,
|
|
195
|
-
|
|
196
|
-
|
|
138
|
+
widthsData,
|
|
139
|
+
columns
|
|
197
140
|
);
|
|
198
141
|
|
|
199
|
-
this.
|
|
142
|
+
this.resetColumnWidthsDistribution();
|
|
200
143
|
|
|
201
144
|
if (recomputeAutoWidthRatios || this.columnWidthRatios.length === 0) {
|
|
202
|
-
this.
|
|
145
|
+
this.calculateColumnWidthRatios(
|
|
203
146
|
datatableInterface,
|
|
204
|
-
|
|
205
|
-
|
|
147
|
+
columns,
|
|
148
|
+
widthsData
|
|
206
149
|
);
|
|
207
150
|
}
|
|
208
151
|
|
|
209
|
-
let columnWidths = [];
|
|
210
152
|
// If the lengths don't match, return
|
|
211
153
|
if (
|
|
212
154
|
recomputeAutoWidthRatios &&
|
|
213
|
-
this.columnWidthRatios.length !==
|
|
155
|
+
this.columnWidthRatios.length !== columns.length
|
|
214
156
|
) {
|
|
215
|
-
return {
|
|
157
|
+
return { columnWidths: [] };
|
|
216
158
|
}
|
|
217
159
|
|
|
218
160
|
// First pass - Distribute widths as per ratios or defined widths if there are any
|
|
219
|
-
columnWidths = this.
|
|
161
|
+
const columnWidths = this.distributeWidthFromRatios(
|
|
220
162
|
expectedTableWidth,
|
|
221
|
-
|
|
222
|
-
|
|
163
|
+
columns,
|
|
164
|
+
widthsData
|
|
223
165
|
);
|
|
224
|
-
|
|
225
|
-
let columnWidthsSum = getTotalColumnWidth(columnWidths);
|
|
166
|
+
const columnWidthsSum = getTotalColumnWidth(columnWidths);
|
|
226
167
|
|
|
227
168
|
// Second pass - There could be excess width remaining due to clamping to `maxWidth`
|
|
228
169
|
// or we might have used more space due to clamping to `minWidth `in certain cases.
|
|
@@ -231,95 +172,94 @@ export class AutoWidthStrategy {
|
|
|
231
172
|
// We need to redistribute this space using below methods.
|
|
232
173
|
if (expectedTableWidth > columnWidthsSum) {
|
|
233
174
|
// We have more space, let's redistribute space
|
|
234
|
-
this.
|
|
175
|
+
this.redistributeExtraWidth(
|
|
235
176
|
expectedTableWidth,
|
|
236
177
|
columnWidths,
|
|
237
|
-
|
|
178
|
+
columns
|
|
238
179
|
);
|
|
239
180
|
} else if (expectedTableWidth < columnWidthsSum) {
|
|
240
181
|
// We have to take away used space
|
|
241
|
-
this.
|
|
182
|
+
this.redistributeDeficitWidth(
|
|
242
183
|
expectedTableWidth,
|
|
243
184
|
columnWidths,
|
|
244
|
-
|
|
185
|
+
columns
|
|
245
186
|
);
|
|
246
187
|
}
|
|
247
|
-
return { columnWidths
|
|
188
|
+
return { columnWidths };
|
|
248
189
|
}
|
|
249
190
|
|
|
250
191
|
/**
|
|
251
|
-
* @private
|
|
252
192
|
* Calculates the ratios for each cell based on available space for a given row.
|
|
253
193
|
*
|
|
254
194
|
* @param {Array} cellWidths An array of the cell widths
|
|
255
195
|
* @param {Number} totalWidth The total available width
|
|
256
196
|
* @returns {Array} An array of cell width ratios
|
|
257
197
|
*/
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
198
|
+
getRatios(cellWidths, totalWidth) {
|
|
199
|
+
const { length } = cellWidths;
|
|
200
|
+
const ratios = Array(length);
|
|
201
|
+
for (let i = 0; i < length; i += 1) {
|
|
202
|
+
ratios[i] = (100 * cellWidths[i]) / totalWidth;
|
|
203
|
+
}
|
|
204
|
+
return ratios;
|
|
262
205
|
}
|
|
263
206
|
|
|
264
207
|
/**
|
|
265
|
-
* @private
|
|
266
208
|
* Calculates and sets the column width ratios object.
|
|
267
209
|
*
|
|
268
210
|
* @param {Object} datatableInterface The datatable
|
|
269
|
-
* @param {Array}
|
|
270
|
-
* @param {Object}
|
|
211
|
+
* @param {Array} columns The column definitions
|
|
212
|
+
* @param {Object} widthsData The widths data
|
|
271
213
|
*/
|
|
272
|
-
|
|
273
|
-
datatableInterface,
|
|
274
|
-
columnDefs,
|
|
275
|
-
widthsMetadata
|
|
276
|
-
) {
|
|
214
|
+
calculateColumnWidthRatios(datatableInterface, columns, widthsData) {
|
|
277
215
|
// Take into account columns with text wrapping
|
|
278
|
-
const
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
216
|
+
const { wrapTextMaxLines } = widthsData;
|
|
217
|
+
const dataCellWidths = datatableInterface.getDataCellWidths();
|
|
218
|
+
for (
|
|
219
|
+
let colIndex = 0, { length } = dataCellWidths;
|
|
220
|
+
colIndex < length;
|
|
221
|
+
colIndex += 1
|
|
222
|
+
) {
|
|
223
|
+
const col = columns[colIndex];
|
|
224
|
+
if (col) {
|
|
225
|
+
if (col.wrapText) {
|
|
226
|
+
const width = dataCellWidths[colIndex];
|
|
227
|
+
dataCellWidths[colIndex] = width / wrapTextMaxLines;
|
|
228
|
+
} else {
|
|
229
|
+
const { fixedWidth } = col;
|
|
230
|
+
if (fixedWidth) {
|
|
231
|
+
dataCellWidths[colIndex] = fixedWidth;
|
|
288
232
|
}
|
|
289
233
|
}
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
this._setColumnWidthRatios(
|
|
296
|
-
tableScrollWidth,
|
|
234
|
+
}
|
|
235
|
+
}
|
|
236
|
+
this.setColumnWidthRatios(
|
|
237
|
+
datatableInterface.getTableElementWidth(),
|
|
297
238
|
dataCellWidths,
|
|
298
|
-
|
|
299
|
-
|
|
239
|
+
datatableInterface.getHeaderCellWidths(),
|
|
240
|
+
widthsData
|
|
300
241
|
);
|
|
301
242
|
}
|
|
302
243
|
|
|
303
244
|
/**
|
|
304
|
-
* @private
|
|
305
245
|
* Calculates and creates the column width ratios array.
|
|
306
246
|
*
|
|
307
247
|
* @param {Number} tableScrollWidth The width of the table that is hidden behind a hotizontal scroll
|
|
308
248
|
* @param {Array} dataCellWidths An array of the widths of the data cells
|
|
309
249
|
* @param {Array} headerCellWidths An array of the widths of the header cells
|
|
310
|
-
* @param {Object}
|
|
250
|
+
* @param {Object} widthsData The unwrapped widths data
|
|
311
251
|
*/
|
|
312
|
-
|
|
252
|
+
setColumnWidthRatios(
|
|
313
253
|
tableScrollWidth,
|
|
314
254
|
dataCellWidths,
|
|
315
255
|
headerCellWidths,
|
|
316
|
-
|
|
256
|
+
widthsData
|
|
317
257
|
) {
|
|
318
258
|
// Reset ratios
|
|
319
|
-
this.
|
|
259
|
+
this.columnWidthRatios = [];
|
|
320
260
|
|
|
321
261
|
if (tableScrollWidth > 0) {
|
|
322
|
-
const { totalFixedWidth, totalResizedWidth } =
|
|
262
|
+
const { totalFixedWidth, totalResizedWidth } = widthsData;
|
|
323
263
|
|
|
324
264
|
if (dataCellWidths.length === 0) {
|
|
325
265
|
if (headerCellWidths.length > 0) {
|
|
@@ -334,7 +274,7 @@ export class AutoWidthStrategy {
|
|
|
334
274
|
const totalFlexibleWidth =
|
|
335
275
|
totalHeaderWidth - totalFixedWidth - totalResizedWidth;
|
|
336
276
|
// Calculate ratio from header cells
|
|
337
|
-
this.
|
|
277
|
+
this.columnWidthRatios = this.getRatios(
|
|
338
278
|
headerCellWidths,
|
|
339
279
|
totalFlexibleWidth
|
|
340
280
|
);
|
|
@@ -350,7 +290,7 @@ export class AutoWidthStrategy {
|
|
|
350
290
|
totalResizedWidth;
|
|
351
291
|
|
|
352
292
|
// Calculate ratio from data cells
|
|
353
|
-
this.
|
|
293
|
+
this.columnWidthRatios = this.getRatios(
|
|
354
294
|
dataCellWidths,
|
|
355
295
|
totalFlexibleWidth
|
|
356
296
|
);
|
|
@@ -359,114 +299,103 @@ export class AutoWidthStrategy {
|
|
|
359
299
|
}
|
|
360
300
|
|
|
361
301
|
/**
|
|
362
|
-
* @private
|
|
363
302
|
* Resets the column width distribution.
|
|
364
303
|
*/
|
|
365
|
-
|
|
304
|
+
resetColumnWidthsDistribution() {
|
|
366
305
|
this.columnWidthsDistribution.colsWithMinWidth = [];
|
|
367
306
|
this.columnWidthsDistribution.colsWithMaxWidth = [];
|
|
368
307
|
}
|
|
369
308
|
|
|
370
309
|
/**
|
|
371
|
-
* @private
|
|
372
310
|
* Allocates width to a column as per defined width or as per ratio.
|
|
373
311
|
*
|
|
374
312
|
* @param {Number} availableWidth Available width for the table
|
|
375
|
-
* @param {Object}
|
|
376
|
-
* @param {Object}
|
|
313
|
+
* @param {Object} columns Column definitions in state
|
|
314
|
+
* @param {Object} widthsData Metadata regarding widths includes `max`, `min`, `flexiblewidth`, `fixedwidth`
|
|
377
315
|
*/
|
|
378
|
-
|
|
316
|
+
distributeWidthFromRatios(availableWidth, columns, widthsData) {
|
|
379
317
|
const columnWidths = [];
|
|
380
|
-
|
|
318
|
+
for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
|
|
319
|
+
const col = columns[colIndex];
|
|
381
320
|
const width =
|
|
382
|
-
|
|
383
|
-
this.
|
|
321
|
+
getColumnWidth(col) ||
|
|
322
|
+
this.getColumnWidthFromRatio(
|
|
384
323
|
availableWidth,
|
|
385
|
-
|
|
324
|
+
widthsData,
|
|
386
325
|
colIndex
|
|
387
326
|
);
|
|
388
327
|
columnWidths[colIndex] = width;
|
|
389
|
-
}
|
|
328
|
+
}
|
|
390
329
|
return columnWidths;
|
|
391
330
|
}
|
|
392
331
|
|
|
393
332
|
/**
|
|
394
|
-
* @private
|
|
395
333
|
* Calculates column width of a given column from the ratio.
|
|
396
334
|
* Clamps to `minColWidth` and `maxColWidth`.
|
|
397
335
|
* Also sets housekeeping data for `colsWithMaxWidth` threshold and `colsWithMinWidth` threshold.
|
|
398
336
|
*
|
|
399
337
|
* @param {Number} availableWidth Available width for the table
|
|
400
|
-
* @param {Object}
|
|
338
|
+
* @param {Object} widthsData Metadata regarding widths includes max, min, flexiblewidth, fixedwidth
|
|
401
339
|
* @param {Number} colIndex Column number
|
|
402
340
|
*/
|
|
403
|
-
|
|
404
|
-
const ratios = this.columnWidthRatios;
|
|
405
|
-
const { colsWithMinWidth, colsWithMaxWidth } =
|
|
406
|
-
this.columnWidthsDistribution;
|
|
341
|
+
getColumnWidthFromRatio(availableWidth, widthsData, colIndex) {
|
|
407
342
|
const {
|
|
408
343
|
totalFixedWidth,
|
|
409
344
|
totalResizedWidth,
|
|
410
345
|
minColumnWidth,
|
|
411
346
|
maxColumnWidth,
|
|
412
|
-
} =
|
|
347
|
+
} = widthsData;
|
|
348
|
+
const widthRatio = this.columnWidthRatios[colIndex];
|
|
413
349
|
const totalFlexibleWidth =
|
|
414
350
|
availableWidth - totalFixedWidth - totalResizedWidth;
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
calculatedWidth = calculatedWidth + TRUNCATION_ALLOWANCE;
|
|
421
|
-
|
|
351
|
+
const calculatedWidth =
|
|
352
|
+
Math.floor((totalFlexibleWidth * widthRatio) / 100) +
|
|
353
|
+
TRUNCATION_ALLOWANCE;
|
|
354
|
+
const { colsWithMinWidth, colsWithMaxWidth } =
|
|
355
|
+
this.columnWidthsDistribution;
|
|
422
356
|
const minWidthThreshold =
|
|
423
357
|
minColumnWidth + Math.ceil(MIN_MAX_THRESHOLD * minColumnWidth);
|
|
424
|
-
const maxWidthThreshold =
|
|
425
|
-
maxColumnWidth - Math.ceil(MIN_MAX_THRESHOLD * maxColumnWidth);
|
|
426
|
-
|
|
427
358
|
if (calculatedWidth < minWidthThreshold) {
|
|
428
359
|
colsWithMinWidth.push(colIndex);
|
|
429
360
|
}
|
|
430
|
-
|
|
361
|
+
const maxWidthThreshold =
|
|
362
|
+
maxColumnWidth - Math.ceil(MIN_MAX_THRESHOLD * maxColumnWidth);
|
|
431
363
|
if (calculatedWidth > maxWidthThreshold) {
|
|
432
364
|
colsWithMaxWidth.push(colIndex);
|
|
433
365
|
}
|
|
434
|
-
|
|
435
366
|
return clamp(calculatedWidth, minColumnWidth, maxColumnWidth);
|
|
436
367
|
}
|
|
437
368
|
|
|
438
369
|
/**
|
|
439
|
-
* @private
|
|
440
370
|
* This method gives extra width that was remaining by first giving width to columns with
|
|
441
371
|
* max width or within threshold of max width then by giving from all columns possible,
|
|
442
372
|
* excluding fixed width columns, columns that can become max width after redistribution.
|
|
443
373
|
*
|
|
444
374
|
* @param {Number} expectedTableWidth Width taken by the table in the DOM
|
|
445
375
|
* @param {Array} columnWidths Column widths array
|
|
446
|
-
* @param {Object}
|
|
376
|
+
* @param {Object} columns Column definitions from state
|
|
447
377
|
*/
|
|
448
|
-
|
|
378
|
+
redistributeExtraWidth(expectedTableWidth, columnWidths, columns) {
|
|
449
379
|
const { colsWithMinWidth } = this.columnWidthsDistribution;
|
|
450
|
-
|
|
451
|
-
const
|
|
452
|
-
this._columnWidthMetaData,
|
|
453
|
-
columnDefs
|
|
454
|
-
);
|
|
380
|
+
const { length: colsWithMinWidthLength } = colsWithMinWidth;
|
|
381
|
+
const widthsData = getTotalWidthsData(this.columnWidthData, columns);
|
|
455
382
|
const { maxColumnWidth, totalResizedColumns, totalFixedColumns } =
|
|
456
|
-
|
|
383
|
+
widthsData;
|
|
457
384
|
|
|
458
385
|
let columnWidthsSum = getTotalColumnWidth(columnWidths);
|
|
459
|
-
let extraSpace =
|
|
460
|
-
let totalColsToDistribute = 0;
|
|
386
|
+
let extraSpace = 0;
|
|
461
387
|
let extraWidthPerColumn = 0;
|
|
388
|
+
let totalColsToDistribute = 0;
|
|
462
389
|
|
|
463
390
|
// First distribute space to columns with min width or threshold of min width
|
|
464
|
-
if (
|
|
465
|
-
|
|
391
|
+
if (colsWithMinWidthLength > 0) {
|
|
392
|
+
extraSpace = expectedTableWidth - columnWidthsSum;
|
|
393
|
+
totalColsToDistribute = colsWithMinWidthLength;
|
|
466
394
|
extraWidthPerColumn = Math.floor(
|
|
467
395
|
extraSpace / totalColsToDistribute
|
|
468
396
|
);
|
|
469
|
-
|
|
397
|
+
for (let i = 0; i < colsWithMinWidthLength; i += 1) {
|
|
398
|
+
const colIndex = colsWithMinWidth[i];
|
|
470
399
|
const currentWidth = columnWidths[colIndex];
|
|
471
400
|
if (
|
|
472
401
|
canAddWidth(
|
|
@@ -479,26 +408,28 @@ export class AutoWidthStrategy {
|
|
|
479
408
|
columnWidthsSum += extraWidthPerColumn;
|
|
480
409
|
columnWidths[colIndex] = newWidth;
|
|
481
410
|
}
|
|
482
|
-
}
|
|
411
|
+
}
|
|
483
412
|
}
|
|
484
413
|
|
|
485
414
|
extraSpace = expectedTableWidth - columnWidthsSum;
|
|
486
|
-
const totalFixedWidthColumns = totalResizedColumns + totalFixedColumns;
|
|
487
415
|
|
|
488
416
|
// Now distribute to every column possible excluding columns with defined widths
|
|
489
417
|
// after this distribution its still possible we might have more space remaining
|
|
490
418
|
// since we couldn't add widths to majority of columns.
|
|
491
419
|
if (extraSpace > 0) {
|
|
492
|
-
|
|
420
|
+
const totalFixedWidthColumns =
|
|
421
|
+
totalResizedColumns + totalFixedColumns;
|
|
422
|
+
const { length: colCount } = columns;
|
|
493
423
|
|
|
424
|
+
totalColsToDistribute = colCount - totalFixedWidthColumns;
|
|
494
425
|
extraWidthPerColumn = Math.floor(
|
|
495
426
|
extraSpace / totalColsToDistribute
|
|
496
427
|
);
|
|
497
|
-
|
|
428
|
+
for (let colIndex = 0; colIndex < colCount; colIndex += 1) {
|
|
429
|
+
const col = columns[colIndex];
|
|
498
430
|
const currentWidth = columnWidths[colIndex];
|
|
499
|
-
|
|
500
431
|
if (
|
|
501
|
-
!
|
|
432
|
+
!getColumnWidth(col) &&
|
|
502
433
|
canAddWidth(
|
|
503
434
|
currentWidth,
|
|
504
435
|
extraWidthPerColumn,
|
|
@@ -509,29 +440,25 @@ export class AutoWidthStrategy {
|
|
|
509
440
|
columnWidthsSum += extraWidthPerColumn;
|
|
510
441
|
columnWidths[colIndex] = newWidth;
|
|
511
442
|
}
|
|
512
|
-
}
|
|
443
|
+
}
|
|
513
444
|
}
|
|
514
445
|
}
|
|
515
446
|
|
|
516
447
|
/**
|
|
517
|
-
* @private
|
|
518
448
|
* This method removes extra space that was taken by first taking away width from columns with
|
|
519
449
|
* max width or within threshold of max width then by taking away from all columns possible,
|
|
520
450
|
* excluding fixed width columns, column with min width or can become min width after taking away.
|
|
521
451
|
*
|
|
522
452
|
* @param {Number} expectedTableWidth Width taken by the table in the DOM
|
|
523
453
|
* @param {Array} columnWidths Column widths array
|
|
524
|
-
* @param {Object}
|
|
454
|
+
* @param {Object} columns Column definitions from state
|
|
525
455
|
*/
|
|
526
|
-
|
|
527
|
-
const {
|
|
528
|
-
|
|
529
|
-
const
|
|
530
|
-
this._columnWidthMetaData,
|
|
531
|
-
columnDefs
|
|
532
|
-
);
|
|
456
|
+
redistributeDeficitWidth(expectedTableWidth, columnWidths, columns) {
|
|
457
|
+
const { colsWithMaxWidth } = this.columnWidthsDistribution;
|
|
458
|
+
const { length: colsWithMaxWidthLength } = colsWithMaxWidth;
|
|
459
|
+
const widthsData = getTotalWidthsData(this.columnWidthData, columns);
|
|
533
460
|
const { minColumnWidth, totalResizedColumns, totalFixedColumns } =
|
|
534
|
-
|
|
461
|
+
widthsData;
|
|
535
462
|
|
|
536
463
|
let columnWidthsSum = getTotalColumnWidth(columnWidths);
|
|
537
464
|
let extraSpace = expectedTableWidth - columnWidthsSum;
|
|
@@ -539,14 +466,14 @@ export class AutoWidthStrategy {
|
|
|
539
466
|
let extraWidthPerColumn = 0;
|
|
540
467
|
|
|
541
468
|
// First take away width from columns with max width or threshold of max width
|
|
542
|
-
if (
|
|
543
|
-
totalColsToDistribute =
|
|
469
|
+
if (colsWithMaxWidthLength > 0) {
|
|
470
|
+
totalColsToDistribute = colsWithMaxWidthLength;
|
|
544
471
|
extraWidthPerColumn = Math.floor(
|
|
545
472
|
Math.abs(extraSpace) / totalColsToDistribute
|
|
546
473
|
);
|
|
547
|
-
|
|
474
|
+
for (let i = 0, { length } = colsWithMaxWidth; i < length; i += 1) {
|
|
475
|
+
const colIndex = colsWithMaxWidth[i];
|
|
548
476
|
const currentWidth = columnWidths[colIndex];
|
|
549
|
-
|
|
550
477
|
if (
|
|
551
478
|
canRemoveWidth(
|
|
552
479
|
currentWidth,
|
|
@@ -558,7 +485,7 @@ export class AutoWidthStrategy {
|
|
|
558
485
|
columnWidthsSum -= extraWidthPerColumn;
|
|
559
486
|
columnWidths[colIndex] = newWidth;
|
|
560
487
|
}
|
|
561
|
-
}
|
|
488
|
+
}
|
|
562
489
|
}
|
|
563
490
|
|
|
564
491
|
extraSpace = expectedTableWidth - columnWidthsSum;
|
|
@@ -567,20 +494,21 @@ export class AutoWidthStrategy {
|
|
|
567
494
|
// Now from every column possible excluding columns with defined widths
|
|
568
495
|
// and excluding columns within minWidthThreshold
|
|
569
496
|
// after this distribution its still possible we might have used more space
|
|
570
|
-
// since we
|
|
497
|
+
// since we couldn't take away widths from majority of columns
|
|
571
498
|
if (extraSpace < 0) {
|
|
499
|
+
const { colsWithMinWidth } = this.columnWidthsDistribution;
|
|
572
500
|
totalColsToDistribute =
|
|
573
|
-
|
|
501
|
+
columns.length -
|
|
574
502
|
(totalFixedWidthColumns + colsWithMinWidth.length);
|
|
575
503
|
extraWidthPerColumn = Math.floor(
|
|
576
504
|
Math.abs(extraSpace) / totalColsToDistribute
|
|
577
505
|
);
|
|
578
|
-
|
|
506
|
+
for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
|
|
507
|
+
const col = columns[colIndex];
|
|
579
508
|
const currentWidth = columnWidths[colIndex];
|
|
580
|
-
|
|
581
509
|
if (
|
|
582
|
-
!
|
|
583
|
-
!
|
|
510
|
+
!colsWithMinWidth.includes(colIndex) &&
|
|
511
|
+
!getColumnWidth(col) &&
|
|
584
512
|
canRemoveWidth(
|
|
585
513
|
currentWidth,
|
|
586
514
|
extraWidthPerColumn,
|
|
@@ -591,7 +519,7 @@ export class AutoWidthStrategy {
|
|
|
591
519
|
columnWidthsSum -= extraWidthPerColumn;
|
|
592
520
|
columnWidths[colIndex] = newWidth;
|
|
593
521
|
}
|
|
594
|
-
}
|
|
522
|
+
}
|
|
595
523
|
}
|
|
596
524
|
}
|
|
597
525
|
}
|