@zohodesk/components 1.0.0-test-252 → 1.0.0

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 (601) hide show
  1. package/README.md +161 -1
  2. package/assets/Appearance/dark/mode/darkMode.module.css +181 -179
  3. package/assets/Appearance/dark/themes/blue/blueDarkCTAModifyCategory.module.css +452 -0
  4. package/assets/Appearance/dark/themes/blue/blueDarkCTATheme.module.css +31 -31
  5. package/assets/Appearance/dark/themes/blue/blueDarkComponentTheme.module.css +3 -0
  6. package/assets/Appearance/dark/themes/green/greenDarkCTAModifyCategory.module.css +452 -0
  7. package/assets/Appearance/dark/themes/green/greenDarkCTATheme.module.css +30 -30
  8. package/assets/Appearance/dark/themes/green/greenDarkComponentTheme.module.css +3 -0
  9. package/assets/Appearance/dark/themes/orange/orangeDarkCTAModifyCategory.module.css +452 -0
  10. package/assets/Appearance/dark/themes/orange/orangeDarkCTATheme.module.css +30 -30
  11. package/assets/Appearance/dark/themes/orange/orangeDarkComponentTheme.module.css +3 -0
  12. package/assets/Appearance/dark/themes/red/redDarkCTAModifyCategory.module.css +452 -0
  13. package/assets/Appearance/dark/themes/red/redDarkCTATheme.module.css +30 -30
  14. package/assets/Appearance/dark/themes/red/redDarkComponentTheme.module.css +3 -0
  15. package/assets/Appearance/dark/themes/yellow/yellowDarkCTAModifyCategory.module.css +452 -0
  16. package/assets/Appearance/dark/themes/yellow/yellowDarkCTATheme.module.css +30 -30
  17. package/assets/Appearance/dark/themes/yellow/yellowDarkComponentTheme.module.css +3 -0
  18. package/assets/Appearance/default/mode/defaultMode.module.css +177 -175
  19. package/assets/Appearance/default/themes/blue/blueDefaultCTAModifyCategory.module.css +452 -0
  20. package/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +31 -31
  21. package/assets/Appearance/default/themes/blue/blueDefaultComponentTheme.module.css +3 -0
  22. package/assets/Appearance/default/themes/green/greenDefaultCTAModifyCategory.module.css +452 -0
  23. package/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css +30 -30
  24. package/assets/Appearance/default/themes/green/greenDefaultComponentTheme.module.css +3 -0
  25. package/assets/Appearance/default/themes/orange/orangeDefaultCTAModifyCategory.module.css +452 -0
  26. package/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +30 -30
  27. package/assets/Appearance/default/themes/orange/orangeDefaultComponentTheme.module.css +3 -0
  28. package/assets/Appearance/default/themes/red/redDefaultCTAModifyCategory.module.css +452 -0
  29. package/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css +30 -30
  30. package/assets/Appearance/default/themes/red/redDefaultComponentTheme.module.css +3 -0
  31. package/assets/Appearance/default/themes/yellow/yellowDefaultCTAModifyCategory.module.css +452 -0
  32. package/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +30 -30
  33. package/assets/Appearance/default/themes/yellow/yellowDefaultComponentTheme.module.css +3 -0
  34. package/assets/Appearance/pureDark/mode/pureDarkMode.module.css +182 -180
  35. package/assets/Appearance/pureDark/themes/blue/bluePureDarkCTAModifyCategory.module.css +452 -0
  36. package/assets/Appearance/pureDark/themes/blue/bluePureDarkCTATheme.module.css +31 -31
  37. package/assets/Appearance/pureDark/themes/blue/bluePureDarkComponentTheme.module.css +3 -0
  38. package/assets/Appearance/pureDark/themes/green/greenPureDarkCTAModifyCategory.module.css +452 -0
  39. package/assets/Appearance/pureDark/themes/green/greenPureDarkCTATheme.module.css +30 -30
  40. package/assets/Appearance/pureDark/themes/green/greenPureDarkComponentTheme.module.css +3 -0
  41. package/assets/Appearance/pureDark/themes/orange/orangePureDarkCTAModifyCategory.module.css +452 -0
  42. package/assets/Appearance/pureDark/themes/orange/orangePureDarkCTATheme.module.css +30 -30
  43. package/assets/Appearance/pureDark/themes/orange/orangePureDarkComponentTheme.module.css +3 -0
  44. package/assets/Appearance/pureDark/themes/red/redPureDarkCTAModifyCategory.module.css +452 -0
  45. package/assets/Appearance/pureDark/themes/red/redPureDarkCTATheme.module.css +30 -30
  46. package/assets/Appearance/pureDark/themes/red/redPureDarkComponentTheme.module.css +3 -0
  47. package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTAModifyCategory.module.css +452 -0
  48. package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkCTATheme.module.css +30 -30
  49. package/assets/Appearance/pureDark/themes/yellow/yellowPureDarkComponentTheme.module.css +3 -0
  50. package/assets/Contrast/darkContrastLightness.module.css +39 -0
  51. package/assets/Contrast/defaultContrastLightness.module.css +39 -0
  52. package/assets/Contrast/pureDarkContrastLightness.module.css +39 -0
  53. package/css_error.log +1 -0
  54. package/es/Accordion/Accordion.js +19 -9
  55. package/es/Accordion/AccordionItem.js +13 -8
  56. package/es/Accordion/props/defaultProps.js +6 -2
  57. package/es/Accordion/props/propTypes.js +3 -0
  58. package/es/Animation/Animation.js +10 -9
  59. package/es/AppContainer/AppContainer.js +38 -15
  60. package/es/AppContainer/AppContainer.module.css +2 -2
  61. package/es/AppContainer/props/defaultProps.js +3 -1
  62. package/es/AppContainer/props/propTypes.js +2 -0
  63. package/es/Avatar/Avatar.js +48 -25
  64. package/es/Avatar/Avatar.module.css +59 -18
  65. package/es/Avatar/props/defaultProps.js +4 -1
  66. package/es/Avatar/props/propTypes.js +5 -2
  67. package/es/AvatarTeam/AvatarTeam.js +21 -11
  68. package/es/AvatarTeam/AvatarTeam.module.css +49 -21
  69. package/es/AvatarTeam/props/defaultProps.js +5 -1
  70. package/es/AvatarTeam/props/propTypes.js +5 -1
  71. package/es/Button/Button.js +55 -51
  72. package/{lib/Button → es/Button/css}/Button.module.css +62 -58
  73. package/es/Button/css/cssJSLogic.js +53 -0
  74. package/es/Button/index.js +2 -0
  75. package/es/Button/props/defaultProps.js +3 -1
  76. package/es/Button/props/propTypes.js +6 -2
  77. package/es/Buttongroup/Buttongroup.js +24 -16
  78. package/es/Buttongroup/Buttongroup.module.css +45 -28
  79. package/es/Buttongroup/props/defaultProps.js +3 -1
  80. package/es/Buttongroup/props/propTypes.js +3 -1
  81. package/es/Card/Card.js +48 -26
  82. package/es/Card/props/defaultProps.js +12 -2
  83. package/es/Card/props/propTypes.js +2 -2
  84. package/es/CheckBox/CheckBox.js +13 -9
  85. package/es/CheckBox/CheckBox.module.css +16 -16
  86. package/es/CheckBox/props/propTypes.js +1 -0
  87. package/es/DateTime/CalendarView.js +46 -19
  88. package/es/DateTime/DateTime.js +139 -77
  89. package/es/DateTime/DateTime.module.css +51 -48
  90. package/es/DateTime/DateTimePopupFooter.js +4 -2
  91. package/es/DateTime/DateTimePopupHeader.js +30 -11
  92. package/es/DateTime/DateWidget.js +122 -51
  93. package/es/DateTime/DateWidget.module.css +5 -5
  94. package/es/DateTime/DaysRow.js +6 -3
  95. package/es/DateTime/Time.js +10 -2
  96. package/es/DateTime/YearView.js +41 -9
  97. package/es/DateTime/YearView.module.css +33 -15
  98. package/es/DateTime/__tests__/CalendarView.spec.js +1 -0
  99. package/es/DateTime/__tests__/DateTime.spec.js +1 -0
  100. package/es/DateTime/__tests__/DateWidget.spec.js +2 -3
  101. package/es/DateTime/common.js +3 -0
  102. package/es/DateTime/constants.js +1 -0
  103. package/es/DateTime/dateFormatUtils/dateFormat.js +63 -30
  104. package/es/DateTime/dateFormatUtils/dateFormats.js +42 -0
  105. package/es/DateTime/dateFormatUtils/dayChange.js +13 -4
  106. package/es/DateTime/dateFormatUtils/index.js +59 -2
  107. package/es/DateTime/dateFormatUtils/monthChange.js +8 -0
  108. package/es/DateTime/dateFormatUtils/timeChange.js +22 -6
  109. package/es/DateTime/dateFormatUtils/yearChange.js +11 -2
  110. package/es/DateTime/index.js +1 -1
  111. package/es/DateTime/objectUtils.js +14 -20
  112. package/es/DateTime/props/defaultProps.js +2 -1
  113. package/es/DateTime/props/propTypes.js +5 -2
  114. package/es/DateTime/typeChecker.js +3 -0
  115. package/es/DateTime/validator.js +58 -6
  116. package/es/DropBox/DropBox.js +82 -218
  117. package/es/DropBox/DropBoxElement/DropBoxElement.js +132 -0
  118. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +435 -0
  119. package/es/DropBox/DropBoxElement/css/cssJSLogic.js +91 -0
  120. package/es/DropBox/DropBoxElement/props/defaultProps.js +18 -0
  121. package/es/DropBox/DropBoxElement/props/propTypes.js +45 -0
  122. package/es/DropBox/DropBoxElement/useDropboxPosCalc.js +54 -0
  123. package/es/DropBox/__tests__/DropBox.spec.js +2 -2
  124. package/es/DropBox/css/DropBox.module.css +59 -0
  125. package/es/DropBox/css/cssJSLogic.js +14 -0
  126. package/es/DropBox/props/defaultProps.js +9 -15
  127. package/es/DropBox/props/propTypes.js +9 -41
  128. package/es/DropDown/DropDown.js +16 -9
  129. package/es/DropDown/DropDown.module.css +2 -2
  130. package/es/DropDown/DropDownHeading.js +18 -11
  131. package/es/DropDown/DropDownHeading.module.css +3 -3
  132. package/es/DropDown/DropDownItem.js +8 -1
  133. package/es/DropDown/DropDownItem.module.css +9 -9
  134. package/es/DropDown/DropDownSearch.js +4 -0
  135. package/es/DropDown/DropDownSeparator.js +1 -0
  136. package/es/DropDown/DropDownSeparator.module.css +2 -2
  137. package/es/DropDown/__tests__/DropDown.spec.js +1 -2
  138. package/es/DropDown/index.js +7 -0
  139. package/es/DropDown/props/defaultProps.js +3 -1
  140. package/es/DropDown/props/propTypes.js +2 -1
  141. package/es/Heading/Heading.js +8 -7
  142. package/es/Heading/Heading.module.css +2 -2
  143. package/es/Label/Label.js +14 -9
  144. package/es/Label/Label.module.css +1 -1
  145. package/es/Label/props/defaultProps.js +2 -1
  146. package/es/Label/props/propTypes.js +1 -0
  147. package/es/Layout/Box.js +19 -4
  148. package/es/Layout/Container.js +18 -5
  149. package/es/Layout/Layout.module.css +15 -15
  150. package/es/Layout/index.js +9 -10
  151. package/es/Layout/props/defaultProps.js +6 -2
  152. package/es/Layout/props/propTypes.js +7 -3
  153. package/es/Layout/utils.js +5 -1
  154. package/es/ListItem/ListContainer.js +21 -9
  155. package/es/ListItem/ListItem.js +30 -14
  156. package/es/ListItem/ListItem.module.css +37 -30
  157. package/es/ListItem/ListItemWithAvatar.js +30 -15
  158. package/es/ListItem/ListItemWithCheckBox.js +22 -10
  159. package/es/ListItem/ListItemWithIcon.js +29 -14
  160. package/es/ListItem/ListItemWithRadio.js +22 -10
  161. package/es/ListItem/index.js +6 -0
  162. package/es/ListItem/props/defaultProps.js +18 -6
  163. package/es/ListItem/props/propTypes.js +13 -1
  164. package/es/Modal/Modal.js +35 -17
  165. package/es/MultiSelect/AdvancedGroupMultiSelect.js +100 -20
  166. package/es/MultiSelect/AdvancedMultiSelect.js +45 -19
  167. package/es/MultiSelect/EmptyState.js +6 -0
  168. package/es/MultiSelect/MultiSelect.js +129 -46
  169. package/es/MultiSelect/MultiSelect.module.css +32 -31
  170. package/es/MultiSelect/MultiSelectHeader.js +3 -0
  171. package/es/MultiSelect/MultiSelectWithAvatar.js +43 -19
  172. package/es/MultiSelect/SelectedOptions.js +6 -3
  173. package/es/MultiSelect/SelectedOptions.module.css +5 -5
  174. package/es/MultiSelect/Suggestions.js +13 -6
  175. package/es/MultiSelect/__tests__/MultiSelect.spec.js +4 -6
  176. package/es/MultiSelect/index.js +4 -0
  177. package/es/MultiSelect/props/defaultProps.js +11 -4
  178. package/es/MultiSelect/props/propTypes.js +17 -5
  179. package/es/PopOver/PopOver.js +25 -9
  180. package/es/PopOver/__tests__/PopOver.spec.js +2 -1
  181. package/es/PopOver/index.js +3 -0
  182. package/es/Popup/Popup.js +80 -31
  183. package/es/Popup/__tests__/Popup.spec.js +17 -5
  184. package/es/Popup/viewPort.js +16 -4
  185. package/es/Provider/AvatarSize.js +1 -0
  186. package/es/Provider/IdProvider.js +16 -10
  187. package/es/Provider/LibraryContext.js +6 -4
  188. package/es/Provider/NumberGenerator/NumberGenerator.js +21 -7
  189. package/es/Provider/ZindexProvider.js +9 -2
  190. package/es/Provider/index.js +4 -0
  191. package/es/Radio/Radio.js +9 -7
  192. package/es/Radio/Radio.module.css +3 -3
  193. package/es/Responsive/CustomResponsive.js +37 -21
  194. package/es/Responsive/RefWrapper.js +6 -7
  195. package/es/Responsive/ResizeComponent.js +35 -25
  196. package/es/Responsive/ResizeObserver.js +26 -6
  197. package/es/Responsive/Responsive.js +34 -20
  198. package/es/Responsive/index.js +9 -8
  199. package/es/Responsive/sizeObservers.js +28 -7
  200. package/es/Responsive/utils/index.js +7 -5
  201. package/es/Responsive/utils/shallowCompare.js +7 -2
  202. package/es/Responsive/windowResizeObserver.js +7 -0
  203. package/es/ResponsiveDropBox/ResponsiveDropBox.js +4 -0
  204. package/es/ResponsiveDropBox/ResponsiveDropBox.module.css +2 -2
  205. package/es/Ribbon/Ribbon.js +21 -15
  206. package/es/Ribbon/Ribbon.module.css +133 -55
  207. package/es/Ribbon/props/defaultProps.js +2 -1
  208. package/es/Ribbon/props/propTypes.js +2 -1
  209. package/es/RippleEffect/RippleEffect.js +6 -7
  210. package/es/Select/GroupSelect.js +71 -23
  211. package/es/Select/Select.js +115 -50
  212. package/es/Select/Select.module.css +23 -23
  213. package/es/Select/SelectWithAvatar.js +31 -12
  214. package/es/Select/SelectWithIcon.js +60 -14
  215. package/es/Select/__tests__/Select.spec.js +6 -8
  216. package/es/Select/index.js +4 -0
  217. package/es/Select/props/defaultProps.js +6 -1
  218. package/es/Select/props/propTypes.js +10 -4
  219. package/es/Stencils/Stencils.js +10 -9
  220. package/es/Stencils/Stencils.module.css +2 -2
  221. package/es/Switch/Switch.js +14 -8
  222. package/es/Switch/Switch.module.css +49 -32
  223. package/es/Switch/props/defaultProps.js +2 -1
  224. package/es/Switch/props/propTypes.js +1 -0
  225. package/es/Tab/Tab.js +14 -11
  226. package/es/Tab/Tab.module.css +14 -15
  227. package/es/Tab/TabContent.js +6 -3
  228. package/es/Tab/TabContentWrapper.js +6 -2
  229. package/es/Tab/TabWrapper.js +9 -4
  230. package/es/Tab/Tabs.js +85 -21
  231. package/es/Tab/Tabs.module.css +36 -40
  232. package/es/Tab/__tests__/Tab.spec.js +4 -12
  233. package/es/Tab/__tests__/TabWrapper.spec.js +1 -0
  234. package/es/Tab/props/defaultProps.js +10 -5
  235. package/es/Tab/props/propTypes.js +10 -5
  236. package/es/Tag/Tag.js +16 -10
  237. package/es/Tag/Tag.module.css +10 -10
  238. package/es/Tag/props/defaultProps.js +2 -1
  239. package/es/Tag/props/propTypes.js +2 -1
  240. package/es/TextBox/TextBox.js +26 -10
  241. package/es/TextBox/TextBox.module.css +6 -5
  242. package/es/TextBox/__tests__/TextBox.spec.js +1 -4
  243. package/es/TextBox/props/defaultProps.js +2 -1
  244. package/es/TextBox/props/propTypes.js +2 -1
  245. package/es/TextBoxIcon/TextBoxIcon.js +39 -13
  246. package/es/TextBoxIcon/TextBoxIcon.module.css +7 -6
  247. package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +2 -7
  248. package/es/TextBoxIcon/props/defaultProps.js +2 -1
  249. package/es/TextBoxIcon/props/propTypes.js +1 -0
  250. package/es/Textarea/Textarea.js +23 -10
  251. package/es/Textarea/Textarea.module.css +6 -6
  252. package/es/Textarea/__tests__/Textarea.spec.js +2 -2
  253. package/es/Textarea/props/defaultProps.js +2 -1
  254. package/es/Textarea/props/propTypes.js +1 -0
  255. package/es/Tooltip/Tooltip.js +67 -21
  256. package/es/Tooltip/Tooltip.module.css +40 -8
  257. package/es/Tooltip/__tests__/Tooltip.spec.js +5 -0
  258. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +7 -6
  259. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +11 -8
  260. package/es/VelocityAnimation/index.js +2 -0
  261. package/es/common/a11y.module.css +4 -0
  262. package/es/common/animation.module.css +8 -8
  263. package/es/common/avatarsizes.module.css +6 -2
  264. package/es/common/basicReset.module.css +3 -3
  265. package/es/common/boxShadow.module.css +34 -0
  266. package/es/common/common.module.css +24 -24
  267. package/es/common/customscroll.module.css +4 -2
  268. package/es/common/reset.module.css +1 -0
  269. package/es/css.js +2 -1
  270. package/es/deprecated/AdvancedMultiSelect.module.css +18 -18
  271. package/es/deprecated/PortalLayer/PortalLayer.js +30 -24
  272. package/es/index.js +30 -146
  273. package/es/semantic/Button/Button.js +9 -7
  274. package/es/semantic/Button/semanticButton.module.css +1 -1
  275. package/es/semantic/index.js +1 -0
  276. package/es/utils/Common.js +74 -7
  277. package/es/utils/ContextOptimizer.js +4 -5
  278. package/es/utils/__tests__/debounce.spec.js +2 -2
  279. package/es/utils/constructFullName.js +2 -0
  280. package/es/utils/css/compileClassNames.js +28 -0
  281. package/es/utils/css/mergeStyle.js +57 -0
  282. package/es/utils/css/utils.js +24 -0
  283. package/es/utils/datetime/GMTZones.js +48 -0
  284. package/es/utils/datetime/common.js +31 -7
  285. package/es/utils/debounce.js +5 -1
  286. package/es/utils/dropDownUtils.js +71 -13
  287. package/es/utils/getInitial.js +4 -0
  288. package/es/utils/index.js +3 -0
  289. package/es/utils/shallowEqual.js +6 -0
  290. package/install.md +10 -0
  291. package/lib/Accordion/Accordion.js +50 -18
  292. package/lib/Accordion/AccordionItem.js +47 -20
  293. package/lib/Accordion/__tests__/Accordion.spec.js +3 -0
  294. package/lib/Accordion/index.js +3 -0
  295. package/lib/Accordion/props/defaultProps.js +6 -2
  296. package/lib/Accordion/props/propTypes.js +6 -0
  297. package/lib/Animation/Animation.js +44 -21
  298. package/lib/Animation/__tests__/Animation.spec.js +11 -7
  299. package/lib/Animation/props/propTypes.js +3 -0
  300. package/lib/AppContainer/AppContainer.js +75 -27
  301. package/lib/AppContainer/AppContainer.module.css +2 -2
  302. package/lib/AppContainer/props/defaultProps.js +3 -1
  303. package/lib/AppContainer/props/propTypes.js +5 -0
  304. package/lib/Avatar/Avatar.js +97 -44
  305. package/lib/Avatar/Avatar.module.css +59 -18
  306. package/lib/Avatar/__tests__/Avatar.spec.js +44 -0
  307. package/lib/Avatar/props/defaultProps.js +4 -1
  308. package/lib/Avatar/props/propTypes.js +8 -2
  309. package/lib/AvatarTeam/AvatarTeam.js +64 -30
  310. package/lib/AvatarTeam/AvatarTeam.module.css +49 -21
  311. package/lib/AvatarTeam/__tests__/AvatarTeam.spec.js +13 -0
  312. package/lib/AvatarTeam/props/defaultProps.js +5 -1
  313. package/lib/AvatarTeam/props/propTypes.js +8 -1
  314. package/lib/Button/Button.js +64 -74
  315. package/{es/Button → lib/Button/css}/Button.module.css +62 -58
  316. package/lib/Button/css/cssJSLogic.js +41 -0
  317. package/lib/Button/index.js +23 -0
  318. package/lib/Button/props/defaultProps.js +5 -1
  319. package/lib/Button/props/propTypes.js +11 -3
  320. package/lib/Buttongroup/Buttongroup.js +49 -19
  321. package/lib/Buttongroup/Buttongroup.module.css +45 -28
  322. package/lib/Buttongroup/__test__/Buttongroup.spec.js +10 -0
  323. package/lib/Buttongroup/props/defaultProps.js +3 -1
  324. package/lib/Buttongroup/props/propTypes.js +6 -1
  325. package/lib/Card/Card.js +119 -55
  326. package/lib/Card/__tests__/Card.spec.js +10 -1
  327. package/lib/Card/index.js +4 -0
  328. package/lib/Card/props/defaultProps.js +16 -4
  329. package/lib/Card/props/propTypes.js +5 -2
  330. package/lib/CheckBox/CheckBox.js +76 -48
  331. package/lib/CheckBox/CheckBox.module.css +16 -16
  332. package/lib/CheckBox/__tests__/CheckBox.spec.js +3 -0
  333. package/lib/CheckBox/props/propTypes.js +4 -0
  334. package/lib/DateTime/CalendarView.js +95 -38
  335. package/lib/DateTime/DateTime.js +309 -216
  336. package/lib/DateTime/DateTime.module.css +51 -48
  337. package/lib/DateTime/DateTimePopupFooter.js +30 -5
  338. package/lib/DateTime/DateTimePopupHeader.js +69 -23
  339. package/lib/DateTime/DateWidget.js +370 -260
  340. package/lib/DateTime/DateWidget.module.css +5 -5
  341. package/lib/DateTime/DaysRow.js +28 -3
  342. package/lib/DateTime/Time.js +72 -29
  343. package/lib/DateTime/YearView.js +89 -30
  344. package/lib/DateTime/YearView.module.css +33 -15
  345. package/lib/DateTime/__tests__/CalendarView.spec.js +13 -5
  346. package/lib/DateTime/__tests__/DateTime.spec.js +51 -37
  347. package/lib/DateTime/__tests__/DateWidget.spec.js +10 -8
  348. package/lib/DateTime/common.js +6 -0
  349. package/lib/DateTime/constants.js +1 -0
  350. package/lib/DateTime/dateFormatUtils/dateFormat.js +184 -122
  351. package/lib/DateTime/dateFormatUtils/dateFormats.js +50 -0
  352. package/lib/DateTime/dateFormatUtils/dayChange.js +14 -7
  353. package/lib/DateTime/dateFormatUtils/index.js +99 -13
  354. package/lib/DateTime/dateFormatUtils/monthChange.js +19 -9
  355. package/lib/DateTime/dateFormatUtils/timeChange.js +52 -20
  356. package/lib/DateTime/dateFormatUtils/yearChange.js +22 -11
  357. package/lib/DateTime/index.js +3 -1
  358. package/lib/DateTime/objectUtils.js +24 -20
  359. package/lib/DateTime/props/defaultProps.js +2 -1
  360. package/lib/DateTime/props/propTypes.js +21 -2
  361. package/lib/DateTime/typeChecker.js +4 -0
  362. package/lib/DateTime/validator.js +69 -6
  363. package/lib/DropBox/DropBox.js +102 -249
  364. package/lib/DropBox/DropBoxElement/DropBoxElement.js +145 -0
  365. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +435 -0
  366. package/lib/DropBox/DropBoxElement/css/cssJSLogic.js +81 -0
  367. package/lib/DropBox/DropBoxElement/props/defaultProps.js +25 -0
  368. package/lib/DropBox/DropBoxElement/props/propTypes.js +56 -0
  369. package/lib/DropBox/DropBoxElement/useDropboxPosCalc.js +60 -0
  370. package/lib/DropBox/__tests__/DropBox.spec.js +8 -4
  371. package/lib/DropBox/css/DropBox.module.css +59 -0
  372. package/lib/DropBox/css/cssJSLogic.js +20 -0
  373. package/lib/DropBox/props/defaultProps.js +20 -17
  374. package/lib/DropBox/props/propTypes.js +22 -43
  375. package/lib/DropDown/DropDown.js +58 -10
  376. package/lib/DropDown/DropDown.module.css +2 -2
  377. package/lib/DropDown/DropDownHeading.js +47 -18
  378. package/lib/DropDown/DropDownHeading.module.css +3 -3
  379. package/lib/DropDown/DropDownItem.js +43 -18
  380. package/lib/DropDown/DropDownItem.module.css +9 -9
  381. package/lib/DropDown/DropDownSearch.js +39 -14
  382. package/lib/DropDown/DropDownSeparator.js +23 -1
  383. package/lib/DropDown/DropDownSeparator.module.css +2 -2
  384. package/lib/DropDown/__tests__/DropDown.spec.js +15 -9
  385. package/lib/DropDown/__tests__/DropDownItem.spec.js +9 -4
  386. package/lib/DropDown/__tests__/DropDownSearch.spec.js +3 -0
  387. package/lib/DropDown/index.js +65 -0
  388. package/lib/DropDown/props/defaultProps.js +3 -1
  389. package/lib/DropDown/props/propTypes.js +7 -1
  390. package/lib/Heading/Heading.js +42 -16
  391. package/lib/Heading/Heading.module.css +2 -2
  392. package/lib/Heading/props/propTypes.js +3 -0
  393. package/lib/Label/Label.js +47 -19
  394. package/lib/Label/Label.module.css +1 -1
  395. package/lib/Label/__tests__/Label.spec.js +14 -1
  396. package/lib/Label/props/defaultProps.js +2 -1
  397. package/lib/Label/props/propTypes.js +4 -0
  398. package/lib/Layout/Box.js +41 -16
  399. package/lib/Layout/Container.js +39 -15
  400. package/lib/Layout/Layout.module.css +15 -15
  401. package/lib/Layout/__tests__/Box.spec.js +65 -49
  402. package/lib/Layout/__tests__/Container.spec.js +67 -50
  403. package/lib/Layout/index.js +4 -11
  404. package/lib/Layout/props/defaultProps.js +6 -2
  405. package/lib/Layout/props/propTypes.js +10 -3
  406. package/lib/Layout/utils.js +15 -1
  407. package/lib/ListItem/ListContainer.js +61 -34
  408. package/lib/ListItem/ListItem.js +92 -50
  409. package/lib/ListItem/ListItem.module.css +37 -30
  410. package/lib/ListItem/ListItemWithAvatar.js +98 -54
  411. package/lib/ListItem/ListItemWithCheckBox.js +82 -41
  412. package/lib/ListItem/ListItemWithIcon.js +92 -50
  413. package/lib/ListItem/ListItemWithRadio.js +83 -42
  414. package/lib/ListItem/index.js +55 -0
  415. package/lib/ListItem/props/defaultProps.js +18 -6
  416. package/lib/ListItem/props/propTypes.js +18 -3
  417. package/lib/Modal/Modal.js +51 -13
  418. package/lib/Modal/props/propTypes.js +3 -0
  419. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +300 -167
  420. package/lib/MultiSelect/AdvancedMultiSelect.js +212 -130
  421. package/lib/MultiSelect/EmptyState.js +48 -21
  422. package/lib/MultiSelect/MultiSelect.js +341 -205
  423. package/lib/MultiSelect/MultiSelect.module.css +32 -31
  424. package/lib/MultiSelect/MultiSelectHeader.js +29 -5
  425. package/lib/MultiSelect/MultiSelectWithAvatar.js +126 -65
  426. package/lib/MultiSelect/SelectedOptions.js +42 -14
  427. package/lib/MultiSelect/SelectedOptions.module.css +5 -5
  428. package/lib/MultiSelect/Suggestions.js +66 -29
  429. package/lib/MultiSelect/__tests__/MultiSelect.spec.js +86 -75
  430. package/lib/MultiSelect/index.js +39 -0
  431. package/lib/MultiSelect/props/defaultProps.js +13 -4
  432. package/lib/MultiSelect/props/propTypes.js +20 -5
  433. package/lib/PopOver/PopOver.js +101 -53
  434. package/lib/PopOver/__tests__/PopOver.spec.js +4 -1
  435. package/lib/PopOver/index.js +31 -0
  436. package/lib/PopOver/props/propTypes.js +3 -0
  437. package/lib/Popup/Popup.js +158 -83
  438. package/lib/Popup/__tests__/Popup.spec.js +42 -5
  439. package/lib/Popup/viewPort.js +28 -14
  440. package/lib/Provider/AvatarSize.js +5 -0
  441. package/lib/Provider/Config.js +2 -0
  442. package/lib/Provider/CssProvider.js +4 -0
  443. package/lib/Provider/IdProvider.js +23 -12
  444. package/lib/Provider/LibraryContext.js +32 -10
  445. package/lib/Provider/LibraryContextInit.js +4 -0
  446. package/lib/Provider/NumberGenerator/NumberGenerator.js +43 -14
  447. package/lib/Provider/ZindexProvider.js +15 -3
  448. package/lib/Provider/index.js +81 -0
  449. package/lib/Radio/Radio.js +65 -40
  450. package/lib/Radio/Radio.module.css +3 -3
  451. package/lib/Radio/__tests__/Radiospec.js +9 -5
  452. package/lib/Radio/props/propTypes.js +3 -0
  453. package/lib/Responsive/CustomResponsive.js +76 -26
  454. package/lib/Responsive/RefWrapper.js +15 -7
  455. package/lib/Responsive/ResizeComponent.js +58 -27
  456. package/lib/Responsive/ResizeObserver.js +23 -6
  457. package/lib/Responsive/Responsive.js +76 -24
  458. package/lib/Responsive/index.js +49 -22
  459. package/lib/Responsive/props/propTypes.js +3 -0
  460. package/lib/Responsive/sizeObservers.js +51 -13
  461. package/lib/Responsive/utils/index.js +11 -3
  462. package/lib/Responsive/utils/shallowCompare.js +11 -2
  463. package/lib/Responsive/windowResizeObserver.js +8 -0
  464. package/lib/ResponsiveDropBox/ResponsiveDropBox.js +44 -14
  465. package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css +2 -2
  466. package/lib/ResponsiveDropBox/props/propTypes.js +3 -0
  467. package/lib/Ribbon/Ribbon.js +48 -21
  468. package/lib/Ribbon/Ribbon.module.css +133 -55
  469. package/lib/Ribbon/__tests__/Ribbon.spec.js +22 -0
  470. package/lib/Ribbon/props/defaultProps.js +2 -1
  471. package/lib/Ribbon/props/propTypes.js +5 -1
  472. package/lib/RippleEffect/RippleEffect.js +23 -14
  473. package/lib/RippleEffect/props/propTypes.js +3 -0
  474. package/lib/Select/GroupSelect.js +240 -137
  475. package/lib/Select/Select.js +320 -220
  476. package/lib/Select/Select.module.css +23 -23
  477. package/lib/Select/SelectWithAvatar.js +112 -59
  478. package/lib/Select/SelectWithIcon.js +145 -82
  479. package/lib/Select/__tests__/Select.spec.js +131 -89
  480. package/lib/Select/index.js +39 -0
  481. package/lib/Select/props/defaultProps.js +10 -2
  482. package/lib/Select/props/propTypes.js +13 -4
  483. package/lib/Stencils/Stencils.js +35 -13
  484. package/lib/Stencils/Stencils.module.css +2 -2
  485. package/lib/Stencils/__tests__/Stencils.spec.js +12 -0
  486. package/lib/Stencils/props/propTypes.js +3 -0
  487. package/lib/Switch/Switch.js +64 -35
  488. package/lib/Switch/Switch.module.css +49 -32
  489. package/lib/Switch/props/defaultProps.js +2 -1
  490. package/lib/Switch/props/propTypes.js +4 -0
  491. package/lib/Tab/Tab.js +49 -33
  492. package/lib/Tab/Tab.module.css +14 -15
  493. package/lib/Tab/TabContent.js +15 -6
  494. package/lib/Tab/TabContentWrapper.js +15 -6
  495. package/lib/Tab/TabWrapper.js +37 -17
  496. package/lib/Tab/Tabs.js +193 -94
  497. package/lib/Tab/Tabs.module.css +36 -40
  498. package/lib/Tab/__tests__/Tab.spec.js +74 -70
  499. package/lib/Tab/__tests__/TabContent.spec.js +10 -6
  500. package/lib/Tab/__tests__/TabContentWrapper.spec.js +28 -20
  501. package/lib/Tab/__tests__/TabWrapper.spec.js +12 -0
  502. package/lib/Tab/__tests__/Tabs.spec.js +53 -39
  503. package/lib/Tab/index.js +6 -0
  504. package/lib/Tab/props/defaultProps.js +10 -5
  505. package/lib/Tab/props/propTypes.js +13 -5
  506. package/lib/Tag/Tag.js +82 -48
  507. package/lib/Tag/Tag.module.css +10 -10
  508. package/lib/Tag/__tests__/Tag.spec.js +14 -8
  509. package/lib/Tag/props/defaultProps.js +2 -1
  510. package/lib/Tag/props/propTypes.js +5 -1
  511. package/lib/TextBox/TextBox.js +93 -61
  512. package/lib/TextBox/TextBox.module.css +6 -5
  513. package/lib/TextBox/__tests__/TextBox.spec.js +14 -4
  514. package/lib/TextBox/props/defaultProps.js +2 -1
  515. package/lib/TextBox/props/propTypes.js +6 -1
  516. package/lib/TextBoxIcon/TextBoxIcon.js +108 -60
  517. package/lib/TextBoxIcon/TextBoxIcon.module.css +7 -6
  518. package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +14 -5
  519. package/lib/TextBoxIcon/props/defaultProps.js +2 -1
  520. package/lib/TextBoxIcon/props/propTypes.js +4 -0
  521. package/lib/Textarea/Textarea.js +63 -32
  522. package/lib/Textarea/Textarea.module.css +6 -6
  523. package/lib/Textarea/__tests__/Textarea.spec.js +14 -2
  524. package/lib/Textarea/props/defaultProps.js +2 -1
  525. package/lib/Textarea/props/propTypes.js +4 -0
  526. package/lib/Tooltip/Tooltip.js +102 -35
  527. package/lib/Tooltip/Tooltip.module.css +40 -8
  528. package/lib/Tooltip/__tests__/Tooltip.spec.js +23 -0
  529. package/lib/Tooltip/props/propTypes.js +3 -0
  530. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +43 -17
  531. package/lib/VelocityAnimation/VelocityAnimation/props/propTypes.js +3 -0
  532. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +55 -24
  533. package/lib/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js +3 -0
  534. package/lib/VelocityAnimation/index.js +23 -0
  535. package/lib/common/a11y.module.css +4 -0
  536. package/lib/common/animation.module.css +8 -8
  537. package/lib/common/avatarsizes.module.css +6 -2
  538. package/lib/common/basicReset.module.css +3 -3
  539. package/lib/common/boxShadow.module.css +34 -0
  540. package/lib/common/common.module.css +24 -24
  541. package/lib/common/customscroll.module.css +4 -2
  542. package/lib/common/reset.module.css +1 -0
  543. package/lib/css.js +42 -1
  544. package/lib/deprecated/AdvancedMultiSelect.module.css +18 -18
  545. package/lib/deprecated/PortalLayer/PortalLayer.js +50 -24
  546. package/lib/deprecated/PortalLayer/props/propTypes.js +3 -0
  547. package/lib/index.js +214 -210
  548. package/lib/semantic/Button/Button.js +47 -24
  549. package/lib/semantic/Button/props/propTypes.js +3 -0
  550. package/lib/semantic/Button/semanticButton.module.css +1 -1
  551. package/lib/semantic/index.js +15 -0
  552. package/lib/utils/Common.js +136 -17
  553. package/lib/utils/ContextOptimizer.js +16 -10
  554. package/lib/utils/__tests__/constructFullName.spec.js +1 -0
  555. package/lib/utils/__tests__/debounce.spec.js +3 -2
  556. package/lib/utils/__tests__/getInitial.spec.js +1 -0
  557. package/lib/utils/constructFullName.js +11 -2
  558. package/lib/utils/css/compileClassNames.js +37 -0
  559. package/lib/utils/css/mergeStyle.js +69 -0
  560. package/lib/utils/css/utils.js +41 -0
  561. package/lib/utils/datetime/GMTZones.js +55 -0
  562. package/lib/utils/datetime/common.js +52 -7
  563. package/lib/utils/debounce.js +6 -1
  564. package/lib/utils/dropDownUtils.js +177 -56
  565. package/lib/utils/dummyFunction.js +2 -0
  566. package/lib/utils/getHTMLFontSize.js +1 -0
  567. package/lib/utils/getInitial.js +6 -0
  568. package/lib/utils/index.js +121 -0
  569. package/lib/utils/scrollTo.js +2 -0
  570. package/lib/utils/shallowEqual.js +8 -0
  571. package/package.json +61 -26
  572. package/postPublish.js +8 -0
  573. package/prePublish.js +70 -0
  574. package/docs/external/active-line.js +0 -72
  575. package/docs/external/autorefresh.js +0 -47
  576. package/docs/external/codemirror.js +0 -9681
  577. package/docs/external/css/hopscotch.css +0 -576
  578. package/docs/external/css/styleGuide.css +0 -1100
  579. package/docs/external/css.js +0 -466
  580. package/docs/external/designTokens.js +0 -1
  581. package/docs/external/foldcode.js +0 -152
  582. package/docs/external/format.js +0 -129
  583. package/docs/external/htmlmixed.js +0 -84
  584. package/docs/external/images/bottom.png +0 -0
  585. package/docs/external/images/bottombg.jpg +0 -0
  586. package/docs/external/images/desk.png +0 -0
  587. package/docs/external/images/desklogo.png +0 -0
  588. package/docs/external/images/menu.png +0 -0
  589. package/docs/external/index.html +0 -127
  590. package/docs/external/javascript.js +0 -422
  591. package/docs/external/jsx.js +0 -148
  592. package/docs/external/matchbrackets.js +0 -145
  593. package/docs/external/xml.js +0 -322
  594. package/docs/package.json +0 -41
  595. package/docs/src/index.js +0 -1311
  596. package/es/Button/__tests__/Button.spec.js +0 -190
  597. package/es/Button/__tests__/__snapshots__/Button.spec.js.snap +0 -191
  598. package/es/DropBox/DropBox.module.css +0 -406
  599. package/lib/Button/__tests__/Button.spec.js +0 -193
  600. package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +0 -191
  601. package/lib/DropBox/DropBox.module.css +0 -406
@@ -16,7 +16,7 @@
16
16
  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
17
17
  }[dir=ltr] .varClass {
18
18
  --listitem_avatar_margin: 0 var(--zd_size15) 0 0
19
- /*rtl: 0 0 0 var(--zd_size15)*/;
19
+ ;
20
20
  }[dir=rtl] .varClass {
21
21
  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
22
22
  }
@@ -25,7 +25,7 @@
25
25
  position: relative;
26
26
  list-style: none;
27
27
  color: var(--listitem_text_color);
28
- font-size: var(--zd_font_size13);
28
+ font-size: var(--zd_font_size13) ;
29
29
  height: var(--listitem_height);
30
30
  min-height: var(--listitem_min_height);
31
31
  text-decoration: none;
@@ -48,24 +48,24 @@
48
48
  --listitem_border_color: var(--zdt_listitem_active_border);
49
49
  }
50
50
  [dir=ltr] .small {
51
- --listitem_padding: var(--zd_size9) var(--zd_size3) var(--zd_size9)
52
- var(--zd_size5)
53
- /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3)*/;
51
+ --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7
52
+ ) var(--zd_size5
53
+ ) ;
54
54
  }
55
55
  [dir=rtl] .small {
56
- --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size3);
56
+ --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
57
57
  }
58
58
  .medium {
59
- --listitem_padding: var(--zd_size9) var(--zd_size20);
59
+ --listitem_padding: var(--zd_size7) var(--zd_size20);
60
60
  --listitem_min_height: var(--zd_size35);
61
61
  }
62
62
  .large {
63
63
  --listitem_height: var(--zd_size48);
64
64
  }
65
65
  [dir=ltr] .large {
66
- --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10)
67
- var(--zd_size25)
68
- /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3)*/;
66
+ --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10
67
+ ) var(--zd_size25
68
+ ) ;
69
69
  }
70
70
  [dir=rtl] .large {
71
71
  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
@@ -74,19 +74,26 @@
74
74
  .children {
75
75
  composes: dotted from '../common/common.module.css';
76
76
  }
77
+ .value, .multiLineValue {
78
+ line-height: var(--zd_size20);
79
+ }
80
+ .multiLineValue{
81
+ word-break: break-word;
82
+ composes: clamp from '../common/common.module.css'
83
+ }
77
84
  .iconBox {
78
- width: var(--zd_size20);
85
+ width: var(--zd_size20) ;
79
86
  text-align: center;
80
87
  }
81
88
  [dir=ltr] .iconBox {
82
- margin-right: var(--zd_size10);
89
+ margin-right: var(--zd_size10) ;
83
90
  }
84
91
  [dir=rtl] .iconBox {
85
- margin-left: var(--zd_size10);
92
+ margin-left: var(--zd_size10) ;
86
93
  }
87
94
  .iconBox,
88
95
  .leftAvatar {
89
- font-size: 0;
96
+ font-size: 0 ;
90
97
  }
91
98
  .leftAvatar {
92
99
  margin: var(--listitem_avatar_margin);
@@ -162,11 +169,11 @@
162
169
  }
163
170
 
164
171
  [dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
165
- right: var(--zd_size20);
172
+ right: var(--zd_size20) ;
166
173
  }
167
174
 
168
175
  [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
169
- left: var(--zd_size20);
176
+ left: var(--zd_size20) ;
170
177
  }
171
178
  .defaultTick {
172
179
  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
@@ -178,32 +185,32 @@
178
185
  display: block;
179
186
  }
180
187
  [dir=ltr] .smallwithTick {
181
- --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
182
- var(--zd_size5)
183
- /*rtl: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39)*/;
188
+ --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
189
+ ) var(--zd_size5
190
+ ) ;
184
191
  }
185
192
  [dir=rtl] .smallwithTick {
186
- --listitem_padding: var(--zd_size9) var(--zd_size5) var(--zd_size9) var(--zd_size39);
193
+ --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
187
194
  }
188
195
  [dir=ltr] .mediumwithTick {
189
- --listitem_padding: var(--zd_size9) var(--zd_size39) var(--zd_size9)
190
- var(--zd_size20)
191
- /*rtl: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39)*/;
196
+ --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7
197
+ ) var(--zd_size20
198
+ ) ;
192
199
  }
193
200
  [dir=rtl] .mediumwithTick {
194
- --listitem_padding: var(--zd_size9) var(--zd_size20) var(--zd_size9) var(--zd_size39);
201
+ --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
195
202
  }
196
203
  [dir=ltr] .largewithTick {
197
- --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10)
198
- var(--zd_size25)
199
- /*rtl: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39)*/;
204
+ --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10
205
+ ) var(--zd_size25
206
+ ) ;
200
207
  }
201
208
  [dir=rtl] .largewithTick {
202
209
  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
203
210
  }
204
211
  .responsiveHeight {
205
212
  --listitem_min_height: var(--zd_size45);
206
- font-size: var(--zd_font_size15);
207
- padding-top: var(--zd_size10);
208
- padding-bottom: var(--zd_size10);
213
+ font-size: var(--zd_font_size15) ;
214
+ padding-top: var(--zd_size10) ;
215
+ padding-bottom: var(--zd_size10) ;
209
216
  }
@@ -1,16 +1,18 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
2
3
  /**** Libraries ****/
3
4
  import React from 'react';
4
5
  import { Box } from '../Layout';
5
6
  import ListContainer from './ListContainer';
6
7
  import { ListItemWithAvatarDefaultProps } from './props/defaultProps';
7
8
  import { ListItemWithAvatar_Props } from './props/propTypes';
8
-
9
9
  /**** Components ****/
10
+
10
11
  import Avatar from '../Avatar/Avatar';
11
12
  import AvatarTeam from '../AvatarTeam/AvatarTeam';
12
- import Icon from '@zohodesk/icons/lib/Icon';
13
+ import { Icon } from '@zohodesk/icons';
13
14
  /**** CSS ****/
15
+
14
16
  import style from './ListItem.module.css';
15
17
  export default class ListItemWithAvatar extends React.PureComponent {
16
18
  constructor(props) {
@@ -19,6 +21,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
19
21
  this.getRef = this.getRef.bind(this);
20
22
  this.handleMouseEnter = this.handleMouseEnter.bind(this);
21
23
  }
24
+
22
25
  getRef(ele) {
23
26
  this.ele = ele;
24
27
  let {
@@ -28,6 +31,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
28
31
  } = this.props;
29
32
  getRef && getRef(ele, index, id);
30
33
  }
34
+
31
35
  handleClick(e) {
32
36
  let {
33
37
  onClick,
@@ -37,6 +41,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
37
41
  } = this.props;
38
42
  onClick && onClick(id, value, index, e);
39
43
  }
44
+
40
45
  handleMouseEnter(e) {
41
46
  let {
42
47
  onMouseEnter,
@@ -46,6 +51,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
46
51
  } = this.props;
47
52
  onMouseEnter && onMouseEnter(id, value, index, e);
48
53
  }
54
+
49
55
  render() {
50
56
  let {
51
57
  size,
@@ -60,6 +66,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
60
66
  title,
61
67
  needTick,
62
68
  dataId,
69
+ dataSelectorId,
63
70
  initial,
64
71
  isDisabled,
65
72
  needBorder,
@@ -68,7 +75,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
68
75
  avatarPalette,
69
76
  a11y,
70
77
  customClass,
71
- customProps
78
+ customProps,
79
+ needMultiLineText
72
80
  } = this.props;
73
81
  let {
74
82
  ListItemProps = {},
@@ -79,13 +87,18 @@ export default class ListItemWithAvatar extends React.PureComponent {
79
87
  customAvatar = '',
80
88
  customAvatarTeam = ''
81
89
  } = customClass;
90
+ const listA11y = {
91
+ ariaHidden: true,
92
+ role: 'option',
93
+ ...a11y
94
+ };
82
95
  let {
83
- ariaHidden = true
84
- } = a11y;
96
+ ariaHidden
97
+ } = listA11y;
85
98
  let isDarkPalette = palette === 'dark';
86
99
  let dataIdString = value ? value : dataId;
87
100
  return /*#__PURE__*/React.createElement(ListContainer, _extends({
88
- a11y: a11y,
101
+ a11y: listA11y,
89
102
  size: size,
90
103
  palette: palette,
91
104
  highlight: highlight,
@@ -96,6 +109,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
96
109
  needBorder: needBorder,
97
110
  customClass: customListItem,
98
111
  dataId: `${dataIdString}_ListItemWithAvatar`,
112
+ dataSelectorId: `${dataSelectorId}`,
99
113
  onClick: this.handleClick,
100
114
  onMouseEnter: this.handleMouseEnter,
101
115
  eleRef: this.getRef,
@@ -128,22 +142,23 @@ export default class ListItemWithAvatar extends React.PureComponent {
128
142
  flexible: true,
129
143
  shrink: true,
130
144
  "data-title": isDisabled ? null : title,
131
- className: style.value
145
+ className: needMultiLineText ? style.multiLineValue : style.value
132
146
  }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
133
147
  className: style.tickIcon,
134
148
  "aria-hidden": ariaHidden,
135
- dataId: `${dataIdString}_tickIcon`
149
+ dataId: `${dataIdString}_tickIcon`,
150
+ dataSelectorId: `${dataSelectorId}_tickIcon`
136
151
  }, /*#__PURE__*/React.createElement(Icon, {
137
152
  name: "ZD-ticknew",
138
153
  size: "8"
139
154
  })) : null);
140
155
  }
156
+
141
157
  }
142
158
  ListItemWithAvatar.defaultProps = ListItemWithAvatarDefaultProps;
143
- ListItemWithAvatar.propTypes = ListItemWithAvatar_Props;
144
- if (false) {
145
- ListItemWithAvatar.docs = {
146
- componentGroup: 'Molecule',
147
- folderName: 'Style Guide'
148
- };
149
- }
159
+ ListItemWithAvatar.propTypes = ListItemWithAvatar_Props; // if (__DOCS__) {
160
+ // ListItemWithAvatar.docs = {
161
+ // componentGroup: 'Molecule',
162
+ // folderName: 'Style Guide'
163
+ // };
164
+ // }
@@ -1,4 +1,5 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
2
3
  import React from 'react';
3
4
  import ListContainer from './ListContainer';
4
5
  import { ListItemWithCheckBoxDefaultProps } from './props/defaultProps';
@@ -13,6 +14,7 @@ export default class ListItemWithCheckBox extends React.Component {
13
14
  this.getRef = this.getRef.bind(this);
14
15
  this.onHover = this.onHover.bind(this);
15
16
  }
17
+
16
18
  getRef(ele) {
17
19
  this.ele = ele;
18
20
  let {
@@ -21,6 +23,7 @@ export default class ListItemWithCheckBox extends React.Component {
21
23
  } = this.props;
22
24
  getRef && getRef(ele, index);
23
25
  }
26
+
24
27
  onClick(e) {
25
28
  let {
26
29
  onClick,
@@ -30,6 +33,7 @@ export default class ListItemWithCheckBox extends React.Component {
30
33
  } = this.props;
31
34
  onClick && onClick(id, value, index, e);
32
35
  }
36
+
33
37
  onHover(e) {
34
38
  let {
35
39
  onHover,
@@ -39,6 +43,7 @@ export default class ListItemWithCheckBox extends React.Component {
39
43
  } = this.props;
40
44
  onHover && onHover(id, value, index, e);
41
45
  }
46
+
42
47
  render() {
43
48
  let {
44
49
  size,
@@ -49,13 +54,19 @@ export default class ListItemWithCheckBox extends React.Component {
49
54
  autoHover,
50
55
  palette,
51
56
  dataId,
57
+ dataSelectorId,
52
58
  title,
53
59
  isDisabled,
54
60
  disableTitle,
55
61
  a11y,
56
62
  customClass,
57
- customProps
63
+ customProps,
64
+ needMultiLineText
58
65
  } = this.props;
66
+ const listA11y = {
67
+ role: 'option',
68
+ ...a11y
69
+ };
59
70
  let {
60
71
  ListItemProps = {},
61
72
  ContainerProps = {}
@@ -66,7 +77,7 @@ export default class ListItemWithCheckBox extends React.Component {
66
77
  customLabel = ''
67
78
  } = customClass;
68
79
  return /*#__PURE__*/React.createElement(ListContainer, _extends({
69
- a11y: a11y,
80
+ a11y: listA11y,
70
81
  size: size,
71
82
  palette: palette,
72
83
  highlight: highlight,
@@ -75,6 +86,7 @@ export default class ListItemWithCheckBox extends React.Component {
75
86
  autoHover: autoHover,
76
87
  customClass: customListItem,
77
88
  dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
89
+ dataSelectorId: dataSelectorId,
78
90
  onClick: this.onClick,
79
91
  onMouseOver: this.onHover,
80
92
  eleRef: this.getRef,
@@ -96,15 +108,15 @@ export default class ListItemWithCheckBox extends React.Component {
96
108
  flexible: true,
97
109
  shrink: true,
98
110
  "data-title": isDisabled ? null : title,
99
- className: style.value
111
+ className: needMultiLineText ? style.multiLineValue : style.value
100
112
  }, value));
101
113
  }
114
+
102
115
  }
103
116
  ListItemWithCheckBox.defaultProps = ListItemWithCheckBoxDefaultProps;
104
- ListItemWithCheckBox.propTypes = ListItemWithCheckBox_Props;
105
- if (false) {
106
- ListItemWithCheckBox.docs = {
107
- componentGroup: 'Molecule',
108
- folderName: 'Style Guide'
109
- };
110
- }
117
+ ListItemWithCheckBox.propTypes = ListItemWithCheckBox_Props; // if (__DOCS__) {
118
+ // ListItemWithCheckBox.docs = {
119
+ // componentGroup: 'Molecule',
120
+ // folderName: 'Style Guide'
121
+ // };
122
+ // }
@@ -1,12 +1,14 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
2
3
  /**** Libraries ****/
3
4
  import React from 'react';
4
5
  import { Box } from '../Layout';
5
- import Icon from '@zohodesk/icons/lib/Icon';
6
+ import { Icon } from '@zohodesk/icons';
6
7
  import ListContainer from './ListContainer';
7
8
  import { ListItemWithIconDefaultProps } from './props/defaultProps';
8
9
  import { ListItemWithIcon_Props } from './props/propTypes';
9
10
  /**** CSS ****/
11
+
10
12
  import style from './ListItem.module.css';
11
13
  export default class ListItemWithIcon extends React.Component {
12
14
  constructor(props) {
@@ -15,6 +17,7 @@ export default class ListItemWithIcon extends React.Component {
15
17
  this.getRef = this.getRef.bind(this);
16
18
  this.handleMouseEnter = this.handleMouseEnter.bind(this);
17
19
  }
20
+
18
21
  getRef(ele) {
19
22
  this.ele = ele;
20
23
  let {
@@ -24,6 +27,7 @@ export default class ListItemWithIcon extends React.Component {
24
27
  } = this.props;
25
28
  getRef && getRef(ele, index, id);
26
29
  }
30
+
27
31
  handleClick(e) {
28
32
  let {
29
33
  onClick,
@@ -33,6 +37,7 @@ export default class ListItemWithIcon extends React.Component {
33
37
  } = this.props;
34
38
  onClick && onClick(id, value, index, e);
35
39
  }
40
+
36
41
  handleMouseEnter(e) {
37
42
  let {
38
43
  onMouseEnter,
@@ -42,6 +47,7 @@ export default class ListItemWithIcon extends React.Component {
42
47
  } = this.props;
43
48
  onMouseEnter && onMouseEnter(id, value, index, e);
44
49
  }
50
+
45
51
  render() {
46
52
  let {
47
53
  size,
@@ -54,6 +60,7 @@ export default class ListItemWithIcon extends React.Component {
54
60
  palette,
55
61
  iconClass,
56
62
  dataId,
63
+ dataSelectorId,
57
64
  title,
58
65
  needTick,
59
66
  isLink,
@@ -64,18 +71,24 @@ export default class ListItemWithIcon extends React.Component {
64
71
  disableTitle,
65
72
  a11y,
66
73
  customClass,
67
- customProps
74
+ customProps,
75
+ needMultiLineText
68
76
  } = this.props;
69
77
  let {
70
78
  ListItemProps = {},
71
79
  ContainerProps = {}
72
80
  } = customProps;
81
+ const listA11y = {
82
+ ariaHidden: true,
83
+ role: 'option',
84
+ ...a11y
85
+ };
73
86
  let {
74
- ariaHidden = true
75
- } = a11y;
87
+ ariaHidden
88
+ } = listA11y;
76
89
  let dataIdString = dataId ? `${dataId.replace("'", '_')}` : value.toLowerCase().replace("'", '_');
77
90
  return /*#__PURE__*/React.createElement(ListContainer, _extends({
78
- a11y: a11y,
91
+ a11y: listA11y,
79
92
  size: size,
80
93
  palette: palette,
81
94
  highlight: highlight,
@@ -86,6 +99,7 @@ export default class ListItemWithIcon extends React.Component {
86
99
  needBorder: needBorder,
87
100
  customClass: customClass,
88
101
  dataId: dataIdString,
102
+ dataSelectorId: dataSelectorId,
89
103
  isLink: isLink,
90
104
  href: href,
91
105
  target: target,
@@ -108,24 +122,25 @@ export default class ListItemWithIcon extends React.Component {
108
122
  }) : null, value && /*#__PURE__*/React.createElement(Box, {
109
123
  flexible: true,
110
124
  shrink: true,
111
- className: style.value,
125
+ className: needMultiLineText ? style.multiLineValue : style.value,
112
126
  "data-title": isDisabled ? null : title,
113
127
  dataId: `${dataIdString}_Text`
114
128
  }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
115
129
  className: style.tickIcon,
116
130
  "aria-hidden": ariaHidden,
117
- dataId: `${dataIdString}_tickIcon`
131
+ dataId: `${dataIdString}_tickIcon`,
132
+ dataSelectorId: `${dataSelectorId}_tickIcon`
118
133
  }, /*#__PURE__*/React.createElement(Icon, {
119
134
  name: "ZD-ticknew",
120
135
  size: "8"
121
136
  })) : null);
122
137
  }
138
+
123
139
  }
124
140
  ListItemWithIcon.defaultProps = ListItemWithIconDefaultProps;
125
- ListItemWithIcon.propTypes = ListItemWithIcon_Props;
126
- if (false) {
127
- ListItemWithIcon.docs = {
128
- componentGroup: 'Molecule',
129
- folderName: 'Style Guide'
130
- };
131
- }
141
+ ListItemWithIcon.propTypes = ListItemWithIcon_Props; // if (__DOCS__) {
142
+ // ListItemWithIcon.docs = {
143
+ // componentGroup: 'Molecule',
144
+ // folderName: 'Style Guide'
145
+ // };
146
+ // }
@@ -1,4 +1,5 @@
1
1
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
2
+
2
3
  import React from 'react';
3
4
  import Radio from '../Radio/Radio';
4
5
  import { Box } from '../Layout';
@@ -13,6 +14,7 @@ export default class ListItemWithRadio extends React.Component {
13
14
  this.getRef = this.getRef.bind(this);
14
15
  this.onHover = this.onHover.bind(this);
15
16
  }
17
+
16
18
  getRef(ele) {
17
19
  this.ele = ele;
18
20
  let {
@@ -21,6 +23,7 @@ export default class ListItemWithRadio extends React.Component {
21
23
  } = this.props;
22
24
  getRef && getRef(ele, index);
23
25
  }
26
+
24
27
  onClick(e) {
25
28
  let {
26
29
  onClick,
@@ -30,6 +33,7 @@ export default class ListItemWithRadio extends React.Component {
30
33
  } = this.props;
31
34
  onClick && onClick(id, value, index, e);
32
35
  }
36
+
33
37
  onHover(e) {
34
38
  let {
35
39
  onHover,
@@ -39,6 +43,7 @@ export default class ListItemWithRadio extends React.Component {
39
43
  } = this.props;
40
44
  onHover && onHover(id, value, index, e);
41
45
  }
46
+
42
47
  render() {
43
48
  let {
44
49
  size,
@@ -50,24 +55,30 @@ export default class ListItemWithRadio extends React.Component {
50
55
  palette,
51
56
  id,
52
57
  dataId,
58
+ dataSelectorId,
53
59
  title,
54
60
  isDisabled,
55
61
  disableTitle,
56
62
  a11y,
57
63
  customClass,
58
- customProps
64
+ customProps,
65
+ needMultiLineText
59
66
  } = this.props;
60
67
  let {
61
68
  ListItemProps = {},
62
69
  ContainerProps = {}
63
70
  } = customProps;
71
+ const listA11y = {
72
+ role: 'option',
73
+ ...a11y
74
+ };
64
75
  let {
65
76
  customListItem = '',
66
77
  customRadio = '',
67
78
  customRadioWrap = ''
68
79
  } = customClass;
69
80
  return /*#__PURE__*/React.createElement(ListContainer, _extends({
70
- a11y: a11y,
81
+ a11y: listA11y,
71
82
  size: size,
72
83
  palette: palette,
73
84
  highlight: highlight,
@@ -76,6 +87,7 @@ export default class ListItemWithRadio extends React.Component {
76
87
  autoHover: autoHover,
77
88
  customClass: customListItem,
78
89
  dataId: dataId,
90
+ dataSelectorId: dataSelectorId,
79
91
  onClick: this.onClick,
80
92
  onMouseOver: this.onHover,
81
93
  eleRef: this.getRef,
@@ -98,15 +110,15 @@ export default class ListItemWithRadio extends React.Component {
98
110
  flexible: true,
99
111
  shrink: true,
100
112
  "data-title": disableTitle ? null : title,
101
- className: style.value
113
+ className: needMultiLineText ? style.multiLineValue : style.value
102
114
  }, value));
103
115
  }
116
+
104
117
  }
105
118
  ListItemWithRadio.defaultProps = ListItemWithRadioDefaultProps;
106
- ListItemWithRadio.propTypes = ListItemWithRadio_Props;
107
- if (false) {
108
- ListItemWithRadio.docs = {
109
- componentGroup: 'Molecule',
110
- folderName: 'Style Guide'
111
- };
112
- }
119
+ ListItemWithRadio.propTypes = ListItemWithRadio_Props; // if (__DOCS__) {
120
+ // ListItemWithRadio.docs = {
121
+ // componentGroup: 'Molecule',
122
+ // folderName: 'Style Guide'
123
+ // };
124
+ // }
@@ -0,0 +1,6 @@
1
+ export { default as ListContainer } from './ListContainer';
2
+ export { default as ListItem } from './ListItem';
3
+ export { default as ListItemWithAvatar } from './ListItemWithAvatar';
4
+ export { default as ListItemWithCheckBox } from './ListItemWithCheckBox';
5
+ export { default as ListItemWithIcon } from './ListItemWithIcon';
6
+ export { default as ListItemWithRadio } from './ListItemWithRadio';
@@ -10,7 +10,9 @@ export const ListContainerDefaultProps = {
10
10
  needBorder: true,
11
11
  a11y: {},
12
12
  customClass: '',
13
- customProps: {}
13
+ customProps: {},
14
+ dataSelectorId: 'listContainer',
15
+ needMultiLineText: false
14
16
  };
15
17
  export const ListItemDefaultProps = {
16
18
  active: false,
@@ -25,7 +27,9 @@ export const ListItemDefaultProps = {
25
27
  needBorder: true,
26
28
  a11y: {},
27
29
  customClass: {},
28
- customProps: {}
30
+ customProps: {},
31
+ dataSelectorId: 'listItem',
32
+ needMultiLineText: false
29
33
  };
30
34
  export const ListItemWithAvatarDefaultProps = {
31
35
  active: false,
@@ -41,7 +45,9 @@ export const ListItemWithAvatarDefaultProps = {
41
45
  needAvatarTitle: true,
42
46
  a11y: {},
43
47
  customClass: {},
44
- customProps: {}
48
+ customProps: {},
49
+ dataSelectorId: 'listItemWithAvatar',
50
+ needMultiLineText: false
45
51
  };
46
52
  export const ListItemWithCheckBoxDefaultProps = {
47
53
  active: false,
@@ -53,7 +59,9 @@ export const ListItemWithCheckBoxDefaultProps = {
53
59
  value: 'List',
54
60
  a11y: {},
55
61
  customClass: {},
56
- customProps: {}
62
+ customProps: {},
63
+ dataSelectorId: 'listItemWithCheckBox',
64
+ needMultiLineText: false
57
65
  };
58
66
  export const ListItemWithIconDefaultProps = {
59
67
  active: false,
@@ -68,7 +76,9 @@ export const ListItemWithIconDefaultProps = {
68
76
  needBorder: true,
69
77
  a11y: {},
70
78
  customClass: '',
71
- customProps: {}
79
+ customProps: {},
80
+ dataSelectorId: 'listItemWithIcon',
81
+ needMultiLineText: false
72
82
  };
73
83
  export const ListItemWithRadioDefaultProps = {
74
84
  active: false,
@@ -81,5 +91,7 @@ export const ListItemWithRadioDefaultProps = {
81
91
  dataId: 'listItemWithRadioComp',
82
92
  a11y: {},
83
93
  customClass: {},
84
- customProps: {}
94
+ customProps: {},
95
+ dataSelectorId: 'listItemWithRadio',
96
+ needMultiLineText: false
85
97
  };