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.
Files changed (357) hide show
  1. package/metadata/raptor.json +77 -1
  2. package/package.json +108 -15
  3. package/scopedImports/@salesforce-label-LightningDatatable.showActions.js +1 -1
  4. package/scopedImports/@salesforce-label-LightningForm.controllerFieldsMessage.js +1 -0
  5. package/scopedImports/@salesforce-label-LightningForm.dependentFieldsHeader.js +1 -0
  6. package/scopedImports/@salesforce-label-LightningForm.dependentFieldsListHeading.js +1 -0
  7. package/scopedImports/@salesforce-label-LightningForm.generalDependentFieldsMessage.js +1 -0
  8. package/scopedImports/@salesforce-label-LightningForm.learnMore.js +1 -0
  9. package/scopedImports/@salesforce-label-LightningForm.okButton.js +1 -0
  10. package/scopedImports/@salesforce-label-LightningLookup.modalCancel.js +1 -0
  11. package/scopedImports/@salesforce-label-LightningLookup.modalSelect.js +1 -0
  12. package/scopedImports/@salesforce-label-LightningProgressIndicator.currentStage.js +1 -1
  13. package/scopedImports/@salesforce-label-LightningProgressIndicator.errorStage.js +1 -0
  14. package/scopedImports/@salesforce-label-LightningProgressIndicator.stageComplete.js +1 -1
  15. package/scopedImports/@salesforce-label-LightningProgressIndicator.stageNotStarted.js +1 -1
  16. package/scopedImports/@salesforce-label-LightningRichTextEditor.colorPicker.js +1 -0
  17. package/src/lightning/accordion/accordion-section.slds.css +3 -3
  18. package/src/lightning/accordion/accordion.slds.css +1 -2
  19. package/src/lightning/accordionSection/accordion-section.slds.css +3 -3
  20. package/src/lightning/accordionSection/accordionSection.js +3 -1
  21. package/src/lightning/accordionSection/button.slds.css +1 -1
  22. package/src/lightning/avatar/avatar.html +1 -0
  23. package/src/lightning/badge/badge.html +3 -3
  24. package/src/lightning/badge/badge.js +1 -0
  25. package/src/lightning/badge/badge.js-meta.xml +3 -0
  26. package/src/lightning/baseCombobox/base-combobox.slds.css +11 -6
  27. package/src/lightning/baseCombobox/baseCombobox.html +5 -2
  28. package/src/lightning/baseCombobox/baseCombobox.js +5 -18
  29. package/src/lightning/baseCombobox/baseCombobox.js-meta.xml +6 -0
  30. package/src/lightning/baseCombobox/input-text.slds.css +41 -68
  31. package/src/lightning/baseCombobox/keyboard.js +12 -4
  32. package/src/lightning/baseCombobox/listbox.slds.css +51 -99
  33. package/src/lightning/baseCombobox/spinner.slds.css +62 -62
  34. package/src/lightning/baseComboboxFormattedText/baseComboboxFormattedText.js-meta.xml +6 -0
  35. package/src/lightning/baseComboboxItem/baseComboboxItem.js +10 -6
  36. package/src/lightning/baseComboboxItem/baseComboboxItem.js-meta.xml +6 -0
  37. package/src/lightning/baseComboboxItem/listbox.slds.css +51 -99
  38. package/src/lightning/baseFormattedText/baseFormattedText.js +2 -2
  39. package/src/lightning/button/__docs__/button.md +2 -1
  40. package/src/lightning/button/button.js +5 -5
  41. package/src/lightning/button/button.slds.css +1 -1
  42. package/src/lightning/buttonIcon/__docs__/buttonIcon.md +1 -0
  43. package/src/lightning/buttonIcon/button-icon.slds.css +1 -1
  44. package/src/lightning/buttonIcon/buttonIcon.html +1 -1
  45. package/src/lightning/buttonIcon/buttonIcon.js +18 -17
  46. package/src/lightning/buttonIconStateful/button-icon-stateful.slds.css +4 -2
  47. package/src/lightning/buttonIconStateful/button-icon.slds.css +1 -1
  48. package/src/lightning/buttonIconStateful/button.slds.css +1 -1
  49. package/src/lightning/buttonMenu/button-icon.slds.css +1 -1
  50. package/src/lightning/buttonMenu/button-menu.slds.css +8 -2
  51. package/src/lightning/buttonMenu/button.slds.css +1 -1
  52. package/src/lightning/buttonMenu/buttonMenu.css +5 -0
  53. package/src/lightning/buttonMenu/buttonMenu.js +2 -0
  54. package/src/lightning/buttonStateful/button-stateful.slds.css +6 -2
  55. package/src/lightning/buttonStateful/button.slds.css +1 -1
  56. package/src/lightning/buttonStateful/buttonStateful.js +4 -1
  57. package/src/lightning/calendar/calendar.js-meta.xml +6 -0
  58. package/src/lightning/calendar/calendar.slds.css +9 -2
  59. package/src/lightning/colorPickerCustom/color-picker-custom.slds.css +22 -23
  60. package/src/lightning/colorPickerCustom/colorPickerCustom.js +12 -0
  61. package/src/lightning/colorPickerCustom/input-text.slds.css +41 -68
  62. package/src/lightning/colorPickerPanel/color-picker-panel.slds.css +9 -10
  63. package/src/lightning/colorPickerPanel/colorPickerPanel.js +11 -1
  64. package/src/lightning/colorPickerPanel/popover.slds.css +0 -2
  65. package/src/lightning/combobox/combobox.html +1 -0
  66. package/src/lightning/combobox/combobox.slds.css +1 -2
  67. package/src/lightning/combobox/form-element.slds.css +54 -54
  68. package/src/lightning/datatable/__examples__disabled/customComponentWrapper/customComponentWrapper.html +11 -0
  69. package/src/lightning/datatable/__examples__disabled/customComponentWrapper/customComponentWrapper.js +25 -0
  70. package/src/lightning/datatable/__examples__disabled/customComponentWrapper/generateData.js +15 -0
  71. package/src/lightning/datatable/__examples__disabled/customDatatableWrapper/customDatatableWrapper.js +89 -0
  72. package/src/lightning/datatable/__examples__disabled/customDatatypeDeleteRowBtn/customDatatypeDeleteRowBtn.html +6 -0
  73. package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeDeleteRowBtn/customDatatypeDeleteRowBtn.js +1 -16
  74. package/src/lightning/datatable/__examples__disabled/customDatatypeLink/customDatatypeLink.html +9 -0
  75. package/src/lightning/datatable/__examples__disabled/customDatatypeRowOrderingBtn/customDatatypeRowOrderingBtn.html +3 -0
  76. package/src/lightning/datatable/__examples__disabled/customDatatypeRowOrderingBtn/customDatatypeRowOrderingBtn.js +3 -0
  77. package/src/lightning/datatable/__examples__disabled/customDatatypeTable/customNumber.html +3 -0
  78. package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/customNumberEdit.html +2 -0
  79. package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/deleteRow.html +3 -2
  80. package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/iconPill.html +1 -1
  81. package/src/lightning/datatable/{__examples__/customDatatypeRowOrderingBtn/customDatatypeRowOrderingBtn.html → __examples__disabled/customNestedComponent/customNestedComponent.html} +2 -2
  82. package/src/lightning/datatable/__examples__disabled/customNestedComponent/customNestedComponent.js +12 -0
  83. package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/customInput.html +4 -0
  84. package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/myCustomTypeDatatable.js +17 -0
  85. package/src/lightning/datatable/__examples__disabled/myCustomTypeDatatable/nestedSimpleComponentParent.html +7 -0
  86. package/src/lightning/datatable/__examples__disabled/simpleComponentNested/simpleComponentNested.html +9 -0
  87. package/src/lightning/datatable/__examples__disabled/simpleComponentNested/simpleComponentNested.js +6 -0
  88. package/src/lightning/datatable/autoWidthStrategy.js +145 -217
  89. package/src/lightning/datatable/columnResizer.js +80 -190
  90. package/src/lightning/datatable/columnWidthManager.js +128 -243
  91. package/src/lightning/datatable/columns.js +192 -283
  92. package/src/lightning/datatable/datagrid.slds.css +187 -0
  93. package/src/lightning/datatable/datatable.js +647 -614
  94. package/src/lightning/datatable/errors.js +19 -28
  95. package/src/lightning/datatable/fixedWidthStrategy.js +27 -49
  96. package/src/lightning/datatable/headerActions.js +10 -42
  97. package/src/lightning/datatable/indexes.js +42 -0
  98. package/src/lightning/datatable/infiniteLoading.js +27 -46
  99. package/src/lightning/datatable/inlineEdit.js +311 -322
  100. package/src/lightning/datatable/keyboard.js +490 -510
  101. package/src/lightning/datatable/renderManager.js +10 -11
  102. package/src/lightning/datatable/resizeObserver.js +10 -67
  103. package/src/lightning/datatable/rowLevelActions.js +7 -6
  104. package/src/lightning/datatable/rowNumber.js +41 -79
  105. package/src/lightning/datatable/rowSelection.js +236 -291
  106. package/src/lightning/datatable/rowSelectionShared.js +26 -33
  107. package/src/lightning/datatable/rows.js +264 -476
  108. package/src/lightning/datatable/sort.js +27 -82
  109. package/src/lightning/datatable/templates/div/div.css +2 -57
  110. package/src/lightning/datatable/templates/div/div.html +25 -10
  111. package/src/lightning/datatable/templates/div/div.lbc.native.css +3 -0
  112. package/src/lightning/datatable/templates/div/div.lbc.synthetic.css +80 -0
  113. package/src/lightning/datatable/templates/table/table.html +16 -5
  114. package/src/lightning/datatable/tree.js +17 -35
  115. package/src/lightning/datatable/types.js +10 -31
  116. package/src/lightning/datatable/utils.js +54 -29
  117. package/src/lightning/datatable/virtualization.js +2 -5
  118. package/src/lightning/datatable/widthManagerShared.js +24 -41
  119. package/src/lightning/datatable/wrapText.js +45 -77
  120. package/src/lightning/datepicker/datepicker.js +32 -9
  121. package/src/lightning/datepicker/datepicker.js-meta.xml +6 -0
  122. package/src/lightning/datepicker/form-element.slds.css +54 -54
  123. package/src/lightning/datepicker/input-text.slds.css +41 -68
  124. package/src/lightning/datetimepicker/datetimepicker.js-meta.xml +6 -0
  125. package/src/lightning/datetimepicker/form-element.slds.css +54 -54
  126. package/src/lightning/datetimepicker/input-text.slds.css +41 -68
  127. package/src/lightning/dualListbox/dual-listbox.slds.css +7 -2
  128. package/src/lightning/dualListbox/dualListbox.js +7 -8
  129. package/src/lightning/dualListbox/form-element.slds.css +54 -54
  130. package/src/lightning/dualListbox/listbox.slds.css +51 -99
  131. package/src/lightning/dynamicIcon/dynamic-icon-strength.slds.css +1 -2
  132. package/src/lightning/dynamicIcon/dynamic-icon-trend.slds.css +1 -2
  133. package/src/lightning/formattedDateTime/formattedDateTime.js +7 -62
  134. package/src/lightning/formattedDateTime/formattedDateTime.js-meta.xml +3 -0
  135. package/src/lightning/formattedLocation/formattedLocation.html +1 -3
  136. package/src/lightning/formattedLocation/formattedLocation.js +3 -25
  137. package/src/lightning/formattedLookup/events.js +2 -4
  138. package/src/lightning/formattedName/formattedName.js +3 -2
  139. package/src/lightning/formattedName/formattedName.js-meta.xml +3 -0
  140. package/src/lightning/formattedNumber/formattedNumber.js +5 -51
  141. package/src/lightning/formattedNumber/formattedNumber.js-meta.xml +3 -0
  142. package/src/lightning/formattedRichText/formattedRichText.js +5 -5
  143. package/src/lightning/formattedRichText/linkTextNodes.js +58 -0
  144. package/src/lightning/formattedRichText/richTextConfig.js +1 -0
  145. package/src/lightning/groupedCombobox/form-element.slds.css +54 -54
  146. package/src/lightning/groupedCombobox/grouped-combobox.slds.css +0 -2
  147. package/src/lightning/groupedCombobox/groupedCombobox.js-meta.xml +1 -1
  148. package/src/lightning/groupedCombobox/input-text.slds.css +41 -68
  149. package/src/lightning/helptext/button-icon.slds.css +1 -1
  150. package/src/lightning/helptext/form-element.slds.css +54 -54
  151. package/src/lightning/helptext/helptext.css +7 -0
  152. package/src/lightning/helptext/helptext.js +3 -4
  153. package/src/lightning/icon/icon.html +1 -1
  154. package/src/lightning/icon/icon.slds.css +12 -25
  155. package/src/lightning/input/form-element.slds.css +54 -54
  156. package/src/lightning/input/input.html +5 -0
  157. package/src/lightning/inputAddress/addressFormat.js +31 -4
  158. package/src/lightning/inputAddress/fieldsLayout.js +6 -0
  159. package/src/lightning/inputAddress/form-element.slds.css +54 -54
  160. package/src/lightning/inputAddress/input-address.slds.css +1 -2
  161. package/src/lightning/inputAddress/input-text.slds.css +41 -68
  162. package/src/lightning/inputAddress/inputAddress.html +19 -1
  163. package/src/lightning/inputAddress/inputAddress.js +75 -3
  164. package/src/lightning/inputAddress/inputAddress.js-meta.xml +3 -0
  165. package/src/lightning/inputLocation/form-element.slds.css +54 -54
  166. package/src/lightning/inputLocation/input-location.slds.css +1 -2
  167. package/src/lightning/inputLocation/input-text.slds.css +41 -68
  168. package/src/lightning/inputName/form-element.slds.css +54 -54
  169. package/src/lightning/inputName/input-text.slds.css +41 -68
  170. package/src/lightning/interactiveDialogBase/interactive-dialog-base.slds.css +0 -3
  171. package/src/lightning/interactiveDialogBase/interactiveDialogBase.js-meta.xml +6 -0
  172. package/src/lightning/internationalizationLibrary/address/AddressFormat.js +553 -610
  173. package/src/lightning/lookupAddress/form-element.slds.css +54 -54
  174. package/src/lightning/lookupAddress/listbox.slds.css +51 -99
  175. package/src/lightning/lookupAddress/location.js +2 -0
  176. package/src/lightning/lookupAddress/lookup-address.slds.css +0 -2
  177. package/src/lightning/lookupAddress/lookupAddress.html +6 -1
  178. package/src/lightning/lookupAddress/lookupAddress.js +40 -10
  179. package/src/lightning/menuDivider/menu-divider.slds.css +0 -2
  180. package/src/lightning/menuItem/menu-item.slds.css +8 -2
  181. package/src/lightning/menuSubheader/menu-subheader.slds.css +1 -2
  182. package/src/lightning/modal/__docs__/modal.md +10 -1
  183. package/src/lightning/modal/__modalUtils__/modalContainerTestConstants.js +3 -7
  184. package/src/lightning/modal/__modalUtils__/modalContainerTestMethods.js +39 -133
  185. package/src/lightning/modal/__modalUtils__/modalContainerTestMockData.js +1 -1
  186. package/src/lightning/modal/modal.js +1 -1
  187. package/src/lightning/modalBase/modal-base.slds.css +3 -3
  188. package/src/lightning/modalBase/modalBase.html +15 -10
  189. package/src/lightning/modalBase/modalBase.js +131 -154
  190. package/src/lightning/modalBase/modalBase.js-meta.xml +6 -0
  191. package/src/lightning/modalBody/modal-body.slds.css +1 -2
  192. package/src/lightning/modalBody/modalBody.css +6 -0
  193. package/src/lightning/modalFooter/modal-footer.slds.css +2 -2
  194. package/src/lightning/modalFooter/modalFooter.js +0 -21
  195. package/src/lightning/modalHeader/modal-header.slds.css +1 -2
  196. package/src/lightning/modalHeader/modalHeader.html +16 -4
  197. package/src/lightning/modalHeader/modalHeader.js +61 -36
  198. package/src/lightning/overlay/overlay.js-meta.xml +6 -0
  199. package/src/lightning/pill/link.html +1 -0
  200. package/src/lightning/pill/pill.slds.css +32 -58
  201. package/src/lightning/pill/plain.html +1 -0
  202. package/src/lightning/pill/plainLink.html +1 -0
  203. package/src/lightning/pillContainer/button.slds.css +1 -1
  204. package/src/lightning/pillContainer/listbox.slds.css +51 -99
  205. package/src/lightning/pillContainer/pill-container.slds.css +6 -10
  206. package/src/lightning/pillContainer/pill.slds.css +32 -58
  207. package/src/lightning/popup/popover.slds.css +0 -2
  208. package/src/lightning/primitiveBubble/primitiveBubble.js +42 -0
  209. package/src/lightning/primitiveBubble/primitiveBubble.js-meta.xml +6 -0
  210. package/src/lightning/primitiveButton/primitiveButoon.js-meta.xml +6 -0
  211. package/src/lightning/primitiveCellCheckbox/checkbox.css +2 -0
  212. package/src/lightning/primitiveColorpickerButton/color-picker-button.slds.css +16 -38
  213. package/src/lightning/primitiveCustomCell/primitiveCustomCell.js +26 -1
  214. package/src/lightning/primitiveDatatableCell/primitiveDatatableCell.js +1 -1
  215. package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.html +1 -1
  216. package/src/lightning/primitiveHeaderActions/primitiveHeaderActions.js +13 -0
  217. package/src/lightning/primitiveHeaderFactory/nonsortableHeader.css +1 -0
  218. package/src/lightning/primitiveHeaderFactory/nonsortableHeader.html +19 -6
  219. package/src/lightning/primitiveHeaderFactory/selectableHeader.css +2 -0
  220. package/src/lightning/primitiveHeaderFactory/sortableHeader.html +3 -1
  221. package/src/lightning/primitiveIcon/icon.slds.css +12 -25
  222. package/src/lightning/primitiveIcon/primitiveIcon.js-meta.xml +6 -0
  223. package/src/lightning/primitiveIframe/primitiveIframe.js +3 -1
  224. package/src/lightning/primitiveInputCheckbox/form-element.slds.css +54 -54
  225. package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.js +5 -2
  226. package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.js-meta.xml +6 -0
  227. package/src/lightning/primitiveInputCheckboxButton/form-element.slds.css +54 -54
  228. package/src/lightning/primitiveInputCheckboxButton/input-checkbox-button.slds.css +6 -4
  229. package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.js +5 -2
  230. package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.js-meta.xml +6 -0
  231. package/src/lightning/primitiveInputColor/form-element.slds.css +54 -54
  232. package/src/lightning/primitiveInputColor/input-color.slds.css +2 -3
  233. package/src/lightning/primitiveInputColor/input-text.slds.css +41 -68
  234. package/src/lightning/primitiveInputColor/primitiveInputColor.js +5 -2
  235. package/src/lightning/primitiveInputColor/primitiveInputColor.js-meta.xml +6 -0
  236. package/src/lightning/primitiveInputFile/button.slds.css +1 -1
  237. package/src/lightning/primitiveInputFile/form-element.slds.css +54 -54
  238. package/src/lightning/primitiveInputFile/input-file.slds.css +1 -4
  239. package/src/lightning/primitiveInputFile/primitiveInputFile.js +4 -2
  240. package/src/lightning/primitiveInputFile/primitiveInputFile.js-meta.xml +6 -0
  241. package/src/lightning/primitiveInputRadio/primitiveInputRadio.js +4 -2
  242. package/src/lightning/primitiveInputSimple/form-element.slds.css +54 -54
  243. package/src/lightning/primitiveInputSimple/input-text.slds.css +41 -68
  244. package/src/lightning/primitiveInputSimple/primitiveInputSimple.js-meta.xml +6 -0
  245. package/src/lightning/primitiveInputToggle/form-element.slds.css +54 -54
  246. package/src/lightning/primitiveInputToggle/input-toggle.slds.css +50 -27
  247. package/src/lightning/primitiveInputToggle/primitiveInputToggle.js +5 -2
  248. package/src/lightning/primitiveInputToggle/primitiveInputToggle.js-meta.xml +6 -0
  249. package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.css +11 -0
  250. package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.html +2 -1
  251. package/src/lightning/primitiveResizeHandler/primitiveResizeHandler.js +1 -0
  252. package/src/lightning/progressBar/progress-bar.slds.css +8 -10
  253. package/src/lightning/progressRing/progress-ring.slds.css +0 -23
  254. package/src/lightning/progressStep/base.html +5 -6
  255. package/src/lightning/progressStep/progressStep.js +15 -23
  256. package/src/lightning/prompt/__docs__/prompt.md +1 -1
  257. package/src/lightning/radioGroup/form-element.slds.css +54 -54
  258. package/src/lightning/radioGroup/radioGroup.html +1 -2
  259. package/src/lightning/radioGroup/radioGroup.js +1 -0
  260. package/src/lightning/routingService/routingService.js +31 -5
  261. package/src/lightning/select/form-element.slds.css +54 -54
  262. package/src/lightning/select/select.slds.css +4 -2
  263. package/src/lightning/shadowBaseClassPrivate/shadowBaseClassPrivate.js +0 -2
  264. package/src/lightning/sldsCommon/sldsCommon.css +134 -98
  265. package/src/lightning/sldsUtilsAlignment/sldsUtilsAlignment.css +1 -1
  266. package/src/lightning/sldsUtilsBox/sldsUtilsBox.css +14 -13
  267. package/src/lightning/sldsUtilsGrid/sldsUtilsGrid.css +95 -92
  268. package/src/lightning/sldsUtilsHyphenation/sldsUtilsHyphenation.css +1 -1
  269. package/src/lightning/sldsUtilsMargin/sldsUtilsMargin.css +77 -75
  270. package/src/lightning/sldsUtilsPadding/sldsUtilsPadding.css +73 -73
  271. package/src/lightning/sldsUtilsSizing/sldsUtilsSizing.css +552 -558
  272. package/src/lightning/sldsUtilsVisibility/sldsUtilsVisibility.css +5 -1
  273. package/src/lightning/spinner/spinner.slds.css +62 -62
  274. package/src/lightning/staticMap/staticMap.js +3 -2
  275. package/src/lightning/tab/tab.js +10 -5
  276. package/src/lightning/tab/tab.js-meta.xml +3 -0
  277. package/src/lightning/tab/tab.slds.css +14 -7
  278. package/src/lightning/tabBar/tab-bar.slds.css +16 -6
  279. package/src/lightning/tabBar/tabBar.js +10 -5
  280. package/src/lightning/tabset/__docs__/tabset.md +24 -1
  281. package/src/lightning/tabset/tabset.html +2 -0
  282. package/src/lightning/tabset/tabset.js +25 -38
  283. package/src/lightning/tabset/tabset.js-meta.xml +3 -0
  284. package/src/lightning/tabset/tabset.slds.css +0 -2
  285. package/src/lightning/textarea/form-element.slds.css +54 -54
  286. package/src/lightning/textarea/textarea.js +11 -2
  287. package/src/lightning/textarea/textarea.slds.css +22 -9
  288. package/src/lightning/timepicker/form-element.slds.css +54 -54
  289. package/src/lightning/timepicker/timepicker.js-meta.xml +6 -0
  290. package/src/lightning/timepicker/timepicker.slds.css +2 -2
  291. package/src/lightning/toast/__docs__/toast.md +20 -22
  292. package/src/lightning/toast/button-icon.slds.css +1 -1
  293. package/src/lightning/toast/icon.slds.css +12 -25
  294. package/src/lightning/toast/toast.js +15 -12
  295. package/src/lightning/toast/toast.slds.css +6 -18
  296. package/src/lightning/toastContainer/__docs__/toastContainer.md +3 -2
  297. package/src/lightning/toastContainer/toast.slds.css +6 -18
  298. package/src/lightning/toastContainer/toastContainer.js +25 -17
  299. package/src/lightning/tooltipLibrary/tooltipLibrary.js +36 -24
  300. package/src/lightning/tree/tree.js +2 -0
  301. package/src/lightning/utils/classSet.js +9 -3
  302. package/src/lightning/utilsPrivate/formatUtils.js +158 -0
  303. package/src/lightning/utilsPrivate/textUtils.js +16 -0
  304. package/src/lightning/utilsPrivate/utilsPrivate.js +56 -15
  305. package/src/lightning/utilsPrivate/validationUtils.js +59 -0
  306. package/src/lightning/verticalNavigation/vertical-navigation.slds.css +14 -0
  307. package/src/lightning/verticalNavigation/verticalNavigation.css +1 -1
  308. package/src/lightning/verticalNavigation/verticalNavigation.html +1 -1
  309. package/src/lightning/verticalNavigation/verticalNavigation.js +66 -28
  310. package/src/lightning/verticalNavigation/verticalNavigation.js-meta.xml +3 -0
  311. package/src/lightning/verticalNavigationItem/vertical-navigation-item.slds.css +63 -0
  312. package/src/lightning/verticalNavigationItem/verticalNavigationItem.css +2 -3
  313. package/src/lightning/verticalNavigationItem/verticalNavigationItem.js +29 -15
  314. package/src/lightning/verticalNavigationItem/verticalNavigationItem.js-meta.xml +3 -0
  315. package/src/lightning/verticalNavigationItem/verticalNavigationItem.lbc.native.css +2 -0
  316. package/src/lightning/verticalNavigationItem/verticalNavigationItem.lbc.synthetic.css +3 -0
  317. package/src/lightning/verticalNavigationItemBadge/badge.slds.css +76 -0
  318. package/src/lightning/verticalNavigationItemBadge/vertical-navigation-item.slds.css +63 -0
  319. package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.css +2 -3
  320. package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.html +1 -1
  321. package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.js +28 -15
  322. package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.js-meta.xml +3 -0
  323. package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.lbc.native.css +5 -0
  324. package/src/lightning/verticalNavigationItemBadge/verticalNavigationItemBadge.lbc.synthetic.css +3 -0
  325. package/src/lightning/verticalNavigationItemIcon/vertical-navigation-item.slds.css +63 -0
  326. package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.css +2 -3
  327. package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.js +29 -15
  328. package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.js-meta.xml +3 -0
  329. package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.lbc.native.css +3 -0
  330. package/src/lightning/verticalNavigationItemIcon/verticalNavigationItemIcon.lbc.synthetic.css +3 -0
  331. package/src/lightning/verticalNavigationOverflow/button.slds.css +503 -0
  332. package/src/lightning/verticalNavigationOverflow/vertical-navigation-item.slds.css +63 -0
  333. package/src/lightning/verticalNavigationOverflow/vertical-navigation-section.slds.css +17 -0
  334. package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.css +2 -1
  335. package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.html +2 -0
  336. package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.js +18 -13
  337. package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.js-meta.xml +3 -0
  338. package/src/lightning/verticalNavigationOverflow/verticalNavigationOverflow.lbc.native.css +5 -0
  339. package/src/lightning/verticalNavigationSection/vertical-navigation-section.slds.css +13 -15
  340. package/src/lightning/verticalNavigationSection/verticalNavigationSection.js-meta.xml +3 -0
  341. package/src/lightning/datatable/__examples__/customDatatableWrapper/customDatatableWrapper.js +0 -158
  342. package/src/lightning/datatable/__examples__/customDatatypeDeleteRowBtn/customDatatypeDeleteRowBtn.html +0 -6
  343. package/src/lightning/datatable/__examples__/customDatatypeLink/customDatatypeLink.html +0 -9
  344. package/src/lightning/datatable/__examples__/customDatatypeRowOrderingBtn/customDatatypeRowOrderingBtn.js +0 -40
  345. package/src/lightning/datatable/__examples__/customDatatypeTable/customNumber.html +0 -3
  346. package/src/lightning/datatable/inlineEditShared.js +0 -26
  347. package/src/lightning/datatable/resizeSensor.js +0 -244
  348. package/src/lightning/formattedRichText/linkify.js +0 -43
  349. package/src/lightning/utilsPrivate/smartSetAttribute.js +0 -19
  350. /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatableWrapper/customDatatableWrapper.html +0 -0
  351. /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeLink/customDatatypeLink.js +0 -0
  352. /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeNumber/customDatatypeNumber.html +0 -0
  353. /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeNumber/customDatatypeNumber.js +0 -0
  354. /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/customDatatypeTable.js +0 -0
  355. /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/customLink.html +0 -0
  356. /package/src/lightning/datatable/{__examples__ → __examples__disabled}/customDatatypeTable/customName.html +0 -0
  357. /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
- return columnWidths.reduce((acc, value) => acc + value, 0);
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} widthsMetadata The widths metadata object
49
+ * @param {Object} widthsData The widths data
60
50
  * @returns {Number} The expected width of the table
61
51
  */
62
- function getExpectedTableWidth(availableWidth, widthsMetadata) {
63
- const minExpectedTableWidth = getMinExpectedTableWidth(widthsMetadata);
64
- return widthsMetadata.totalFlexibleColumns === 0
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 variablesat which point they are recalculated.
95
- _columnWidthRatios = [];
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 getTotalWidthsMetadata
99
- _columnWidthMetaData = {};
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
- _columnWidthsDistribution = {};
104
-
105
- /************************** LIFECYCLE HOOKS **************************/
79
+ columnWidthsDistribution = {};
106
80
 
107
81
  constructor(minColumnWidth, maxColumnWidth, wrapTextMaxLines = 3) {
108
- this._columnWidthMetaData = {
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._columnWidthMetaData.minColumnWidth = value;
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._columnWidthMetaData.maxColumnWidth = value;
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._columnWidthMetaData.wrapTextMaxLines = value;
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} columnDefs Column definitions array with defined widths and other attributes
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
- columnDefs,
131
+ columns,
184
132
  recomputeAutoWidthRatios
185
133
  ) {
186
- const widthsMetadata = getTotalWidthsMetadata(
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
- widthsMetadata,
196
- columnDefs
138
+ widthsData,
139
+ columns
197
140
  );
198
141
 
199
- this._resetColumnWidthsDistribution();
142
+ this.resetColumnWidthsDistribution();
200
143
 
201
144
  if (recomputeAutoWidthRatios || this.columnWidthRatios.length === 0) {
202
- this._calculateColumnWidthRatios(
145
+ this.calculateColumnWidthRatios(
203
146
  datatableInterface,
204
- columnDefs,
205
- widthsMetadata
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 !== columnDefs.length
155
+ this.columnWidthRatios.length !== columns.length
214
156
  ) {
215
- return { expectedTableWidth, columnWidths };
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._distributeWidthFromRatios(
161
+ const columnWidths = this.distributeWidthFromRatios(
220
162
  expectedTableWidth,
221
- columnDefs,
222
- widthsMetadata
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._redistributeExtraWidth(
175
+ this.redistributeExtraWidth(
235
176
  expectedTableWidth,
236
177
  columnWidths,
237
- columnDefs
178
+ columns
238
179
  );
239
180
  } else if (expectedTableWidth < columnWidthsSum) {
240
181
  // We have to take away used space
241
- this._redistributeDeficitWidth(
182
+ this.redistributeDeficitWidth(
242
183
  expectedTableWidth,
243
184
  columnWidths,
244
- columnDefs
185
+ columns
245
186
  );
246
187
  }
247
- return { columnWidths, expectedTableWidth };
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
- _getRatios(cellWidths, totalWidth) {
259
- return cellWidths.map((cellWidth) => {
260
- return (100 * cellWidth) / totalWidth;
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} columnDefs The column definitions
270
- * @param {Object} widthsMetadata The widths metadata object
211
+ * @param {Array} columns The column definitions
212
+ * @param {Object} widthsData The widths data
271
213
  */
272
- _calculateColumnWidthRatios(
273
- datatableInterface,
274
- columnDefs,
275
- widthsMetadata
276
- ) {
214
+ calculateColumnWidthRatios(datatableInterface, columns, widthsData) {
277
215
  // Take into account columns with text wrapping
278
- const dataCellWidths = datatableInterface
279
- .getDataCellWidths()
280
- .map((width, index) => {
281
- const columnDefinition = columnDefs[index];
282
- if (columnDefinition) {
283
- if (columnDefinition.wrapText) {
284
- return width / widthsMetadata.wrapTextMaxLines;
285
- }
286
- if (columnDefinition.fixedWidth) {
287
- return columnDefinition.fixedWidth;
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
- return width;
291
- });
292
- const headerCellWidths = datatableInterface.getHeaderCellWidths();
293
- const tableScrollWidth = datatableInterface.getTableElementWidth();
294
-
295
- this._setColumnWidthRatios(
296
- tableScrollWidth,
234
+ }
235
+ }
236
+ this.setColumnWidthRatios(
237
+ datatableInterface.getTableElementWidth(),
297
238
  dataCellWidths,
298
- headerCellWidths,
299
- widthsMetadata
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} widthsMetadata The raw widths metadata object
250
+ * @param {Object} widthsData The unwrapped widths data
311
251
  */
312
- _setColumnWidthRatios(
252
+ setColumnWidthRatios(
313
253
  tableScrollWidth,
314
254
  dataCellWidths,
315
255
  headerCellWidths,
316
- widthsMetadata
256
+ widthsData
317
257
  ) {
318
258
  // Reset ratios
319
- this._columnWidthRatios = [];
259
+ this.columnWidthRatios = [];
320
260
 
321
261
  if (tableScrollWidth > 0) {
322
- const { totalFixedWidth, totalResizedWidth } = widthsMetadata;
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._columnWidthRatios = this._getRatios(
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._columnWidthRatios = this._getRatios(
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
- _resetColumnWidthsDistribution() {
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} columnDefs Column definitions in state
376
- * @param {Object} widthsMetadata Metadata regarding widths includes `max`, `min`, `flexiblewidth`, `fixedwidth`
313
+ * @param {Object} columns Column definitions in state
314
+ * @param {Object} widthsData Metadata regarding widths includes `max`, `min`, `flexiblewidth`, `fixedwidth`
377
315
  */
378
- _distributeWidthFromRatios(availableWidth, columnDefs, widthsMetadata) {
316
+ distributeWidthFromRatios(availableWidth, columns, widthsData) {
379
317
  const columnWidths = [];
380
- columnDefs.forEach((column, colIndex) => {
318
+ for (let colIndex = 0; colIndex < columns.length; colIndex += 1) {
319
+ const col = columns[colIndex];
381
320
  const width =
382
- getColumnWidthFromDef(column) ||
383
- this._getColumnWidthFromRatio(
321
+ getColumnWidth(col) ||
322
+ this.getColumnWidthFromRatio(
384
323
  availableWidth,
385
- widthsMetadata,
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} widthsMetadata Metadata regarding widths includes max, min, flexiblewidth, fixedwidth
338
+ * @param {Object} widthsData Metadata regarding widths includes max, min, flexiblewidth, fixedwidth
401
339
  * @param {Number} colIndex Column number
402
340
  */
403
- _getColumnWidthFromRatio(availableWidth, widthsMetadata, colIndex) {
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
- } = widthsMetadata;
347
+ } = widthsData;
348
+ const widthRatio = this.columnWidthRatios[colIndex];
413
349
  const totalFlexibleWidth =
414
350
  availableWidth - totalFixedWidth - totalResizedWidth;
415
-
416
- let calculatedWidth = Math.floor(
417
- (totalFlexibleWidth * ratios[colIndex]) / 100
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} columnDefs Column definitions from state
376
+ * @param {Object} columns Column definitions from state
447
377
  */
448
- _redistributeExtraWidth(expectedTableWidth, columnWidths, columnDefs) {
378
+ redistributeExtraWidth(expectedTableWidth, columnWidths, columns) {
449
379
  const { colsWithMinWidth } = this.columnWidthsDistribution;
450
-
451
- const widthsMetadata = getTotalWidthsMetadata(
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
- widthsMetadata;
383
+ widthsData;
457
384
 
458
385
  let columnWidthsSum = getTotalColumnWidth(columnWidths);
459
- let extraSpace = expectedTableWidth - columnWidthsSum;
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 (colsWithMinWidth.length > 0) {
465
- totalColsToDistribute = colsWithMinWidth.length;
391
+ if (colsWithMinWidthLength > 0) {
392
+ extraSpace = expectedTableWidth - columnWidthsSum;
393
+ totalColsToDistribute = colsWithMinWidthLength;
466
394
  extraWidthPerColumn = Math.floor(
467
395
  extraSpace / totalColsToDistribute
468
396
  );
469
- colsWithMinWidth.forEach((colIndex) => {
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
- totalColsToDistribute = columnDefs.length - totalFixedWidthColumns;
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
- columnDefs.forEach((column, colIndex) => {
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
- !getColumnWidthFromDef(column) &&
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} columnDefs Column definitions from state
454
+ * @param {Object} columns Column definitions from state
525
455
  */
526
- _redistributeDeficitWidth(expectedTableWidth, columnWidths, columnDefs) {
527
- const { colsWithMinWidth, colsWithMaxWidth } =
528
- this.columnWidthsDistribution;
529
- const widthsMetadata = getTotalWidthsMetadata(
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
- widthsMetadata;
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 (colsWithMaxWidth.length > 0) {
543
- totalColsToDistribute = colsWithMaxWidth.length;
469
+ if (colsWithMaxWidthLength > 0) {
470
+ totalColsToDistribute = colsWithMaxWidthLength;
544
471
  extraWidthPerColumn = Math.floor(
545
472
  Math.abs(extraSpace) / totalColsToDistribute
546
473
  );
547
- colsWithMaxWidth.forEach((colIndex) => {
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 couldnt take away widths from majority of columns
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
- columnDefs.length -
501
+ columns.length -
574
502
  (totalFixedWidthColumns + colsWithMinWidth.length);
575
503
  extraWidthPerColumn = Math.floor(
576
504
  Math.abs(extraSpace) / totalColsToDistribute
577
505
  );
578
- columnDefs.forEach((column, colIndex) => {
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
- !getColumnWidthFromDef(column) &&
583
- !hasColumn(colsWithMinWidth, colIndex) &&
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
  }