@zohodesk/components 1.0.0-temp-164 → 1.0.0-temp-166

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 (478) hide show
  1. package/README.md +34 -0
  2. package/assets/Appearance/dark/mode/Component_DarkMode.module.css +151 -151
  3. package/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css +450 -450
  4. package/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css +30 -30
  5. package/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css +450 -450
  6. package/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css +30 -30
  7. package/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css +450 -450
  8. package/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css +30 -30
  9. package/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css +450 -450
  10. package/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css +30 -30
  11. package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css +450 -450
  12. package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css +30 -30
  13. package/assets/Appearance/light/mode/Component_LightMode.module.css +148 -148
  14. package/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css +450 -450
  15. package/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css +30 -30
  16. package/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css +450 -450
  17. package/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css +30 -30
  18. package/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css +450 -450
  19. package/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css +30 -30
  20. package/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css +450 -450
  21. package/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css +30 -30
  22. package/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css +450 -450
  23. package/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css +30 -30
  24. package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +153 -153
  25. package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css +450 -450
  26. package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css +30 -30
  27. package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css +450 -450
  28. package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css +30 -30
  29. package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css +450 -450
  30. package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css +30 -30
  31. package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css +450 -450
  32. package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css +30 -30
  33. package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css +450 -450
  34. package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css +30 -30
  35. package/es/Accordion/Accordion.js +8 -3
  36. package/es/Accordion/AccordionItem.js +5 -2
  37. package/es/Animation/Animation.js +3 -3
  38. package/es/AppContainer/AppContainer.js +27 -10
  39. package/es/AppContainer/AppContainer.module.css +2 -2
  40. package/es/AppContainer/props/defaultProps.js +2 -1
  41. package/es/AppContainer/props/propTypes.js +1 -0
  42. package/es/Avatar/Avatar.js +26 -11
  43. package/es/Avatar/Avatar.module.css +18 -18
  44. package/es/AvatarTeam/AvatarTeam.js +4 -3
  45. package/es/AvatarTeam/AvatarTeam.module.css +35 -35
  46. package/es/Button/Button.js +5 -3
  47. package/es/Button/css/Button.module.css +70 -70
  48. package/es/Buttongroup/Buttongroup.js +4 -3
  49. package/es/Buttongroup/Buttongroup.module.css +14 -15
  50. package/es/Card/Card.js +21 -10
  51. package/es/CheckBox/CheckBox.js +5 -3
  52. package/es/CheckBox/CheckBox.module.css +15 -15
  53. package/es/DateTime/CalendarView.js +33 -20
  54. package/es/DateTime/DateTime.js +113 -12
  55. package/es/DateTime/DateTime.module.css +39 -39
  56. package/es/DateTime/DateTimePopupFooter.js +4 -2
  57. package/es/DateTime/DateTimePopupHeader.js +8 -2
  58. package/es/DateTime/DateWidget.js +100 -35
  59. package/es/DateTime/DateWidget.module.css +5 -5
  60. package/es/DateTime/DaysRow.js +4 -2
  61. package/es/DateTime/Time.js +10 -2
  62. package/es/DateTime/YearView.js +28 -4
  63. package/es/DateTime/YearView.module.css +15 -15
  64. package/es/DateTime/__tests__/CalendarView.spec.js +1 -0
  65. package/es/DateTime/__tests__/DateTime.spec.js +1 -0
  66. package/es/DateTime/__tests__/DateWidget.spec.js +2 -3
  67. package/es/DateTime/common.js +3 -0
  68. package/es/DateTime/constants.js +1 -0
  69. package/es/DateTime/dateFormatUtils/dateFormat.js +63 -30
  70. package/es/DateTime/dateFormatUtils/dateFormats.js +0 -1
  71. package/es/DateTime/dateFormatUtils/dayChange.js +13 -4
  72. package/es/DateTime/dateFormatUtils/index.js +32 -2
  73. package/es/DateTime/dateFormatUtils/monthChange.js +8 -0
  74. package/es/DateTime/dateFormatUtils/timeChange.js +22 -6
  75. package/es/DateTime/dateFormatUtils/yearChange.js +11 -2
  76. package/es/DateTime/objectUtils.js +14 -20
  77. package/es/DateTime/props/defaultProps.js +2 -1
  78. package/es/DateTime/typeChecker.js +3 -0
  79. package/es/DateTime/validator.js +58 -6
  80. package/es/DropBox/DropBox.js +9 -5
  81. package/es/DropBox/DropBoxElement/DropBoxElement.js +18 -6
  82. package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +85 -79
  83. package/es/DropBox/DropBoxElement/css/cssJSLogic.js +6 -4
  84. package/es/DropBox/DropBoxElement/props/propTypes.js +1 -1
  85. package/es/DropBox/DropBoxElement/useDropboxPosCalc.js +3 -0
  86. package/es/DropBox/__tests__/DropBox.spec.js +2 -2
  87. package/es/DropBox/css/DropBox.module.css +6 -6
  88. package/es/DropBox/props/defaultProps.js +1 -2
  89. package/es/DropBox/props/propTypes.js +1 -2
  90. package/es/DropDown/DropDown.js +10 -5
  91. package/es/DropDown/DropDown.module.css +2 -2
  92. package/es/DropDown/DropDownHeading.js +5 -5
  93. package/es/DropDown/DropDownHeading.module.css +6 -6
  94. package/es/DropDown/DropDownItem.js +8 -1
  95. package/es/DropDown/DropDownItem.module.css +12 -12
  96. package/es/DropDown/DropDownSearch.js +4 -0
  97. package/es/DropDown/DropDownSearch.module.css +3 -3
  98. package/es/DropDown/DropDownSeparator.js +1 -0
  99. package/es/DropDown/DropDownSeparator.module.css +2 -2
  100. package/es/DropDown/__tests__/DropDown.spec.js +1 -2
  101. package/es/Heading/Heading.js +3 -3
  102. package/es/Heading/Heading.module.css +2 -2
  103. package/es/Label/Label.js +3 -3
  104. package/es/Label/Label.module.css +5 -5
  105. package/es/Layout/Box.js +17 -3
  106. package/es/Layout/Container.js +16 -4
  107. package/es/Layout/Layout.module.css +15 -15
  108. package/es/Layout/index.js +1 -2
  109. package/es/Layout/props/defaultProps.js +2 -0
  110. package/es/Layout/props/propTypes.js +2 -0
  111. package/es/Layout/utils.js +5 -1
  112. package/es/ListItem/ListContainer.js +8 -3
  113. package/es/ListItem/ListItem.js +9 -3
  114. package/es/ListItem/ListItem.module.css +38 -38
  115. package/es/ListItem/ListItemWithAvatar.js +9 -3
  116. package/es/ListItem/ListItemWithCheckBox.js +7 -2
  117. package/es/ListItem/ListItemWithIcon.js +8 -3
  118. package/es/ListItem/ListItemWithRadio.js +7 -3
  119. package/es/Modal/Modal.js +28 -11
  120. package/es/MultiSelect/AdvancedGroupMultiSelect.js +90 -13
  121. package/es/MultiSelect/AdvancedMultiSelect.js +33 -9
  122. package/es/MultiSelect/EmptyState.js +6 -0
  123. package/es/MultiSelect/MultiSelect.js +100 -32
  124. package/es/MultiSelect/MultiSelect.module.css +31 -31
  125. package/es/MultiSelect/MultiSelectHeader.js +3 -0
  126. package/es/MultiSelect/MultiSelectWithAvatar.js +13 -6
  127. package/es/MultiSelect/SelectedOptions.js +6 -3
  128. package/es/MultiSelect/SelectedOptions.module.css +5 -5
  129. package/es/MultiSelect/Suggestions.js +7 -3
  130. package/es/MultiSelect/__tests__/MultiSelect.spec.js +4 -6
  131. package/es/MultiSelect/props/propTypes.js +2 -0
  132. package/es/PopOver/PopOver.js +18 -2
  133. package/es/PopOver/__tests__/PopOver.spec.js +2 -1
  134. package/es/Popup/Popup.js +77 -27
  135. package/es/Popup/__tests__/Popup.spec.js +17 -5
  136. package/es/Popup/viewPort.js +16 -4
  137. package/es/Provider/IdProvider.js +10 -5
  138. package/es/Provider/LibraryContext.js +6 -4
  139. package/es/Provider/NumberGenerator/NumberGenerator.js +21 -7
  140. package/es/Provider/ZindexProvider.js +9 -2
  141. package/es/Radio/Radio.js +4 -2
  142. package/es/Radio/Radio.module.css +9 -9
  143. package/es/Responsive/CustomResponsive.js +30 -18
  144. package/es/Responsive/RefWrapper.js +6 -7
  145. package/es/Responsive/ResizeComponent.js +35 -25
  146. package/es/Responsive/ResizeObserver.js +26 -6
  147. package/es/Responsive/Responsive.js +34 -20
  148. package/es/Responsive/index.js +1 -3
  149. package/es/Responsive/sizeObservers.js +28 -7
  150. package/es/Responsive/utils/index.js +7 -5
  151. package/es/Responsive/utils/shallowCompare.js +7 -2
  152. package/es/Responsive/windowResizeObserver.js +7 -0
  153. package/es/ResponsiveDropBox/ResponsiveDropBox.js +4 -0
  154. package/es/ResponsiveDropBox/ResponsiveDropBox.module.css +2 -2
  155. package/es/Ribbon/Ribbon.js +4 -2
  156. package/es/Ribbon/Ribbon.module.css +46 -48
  157. package/es/RippleEffect/RippleEffect.js +1 -3
  158. package/es/Select/GroupSelect.js +59 -14
  159. package/es/Select/Select.js +81 -34
  160. package/es/Select/Select.module.css +23 -23
  161. package/es/Select/SelectWithAvatar.js +19 -4
  162. package/es/Select/SelectWithIcon.js +48 -6
  163. package/es/Select/__tests__/Select.spec.js +6 -8
  164. package/es/Select/props/propTypes.js +1 -0
  165. package/es/Stencils/Stencils.js +3 -3
  166. package/es/Stencils/Stencils.module.css +11 -11
  167. package/es/Switch/Switch.js +6 -3
  168. package/es/Switch/Switch.module.css +23 -23
  169. package/es/Tab/Tab.js +4 -4
  170. package/es/Tab/Tab.module.css +14 -14
  171. package/es/Tab/TabContent.js +1 -0
  172. package/es/Tab/TabContentWrapper.js +2 -0
  173. package/es/Tab/TabWrapper.js +5 -2
  174. package/es/Tab/Tabs.js +56 -8
  175. package/es/Tab/Tabs.module.css +24 -42
  176. package/es/Tab/__tests__/Tab.spec.js +1 -3
  177. package/es/Tab/__tests__/TabWrapper.spec.js +1 -0
  178. package/es/Tag/Tag.js +7 -3
  179. package/es/Tag/Tag.module.css +25 -25
  180. package/es/TextBox/TextBox.js +16 -3
  181. package/es/TextBox/TextBox.module.css +9 -9
  182. package/es/TextBox/__tests__/TextBox.spec.js +1 -4
  183. package/es/TextBoxIcon/TextBoxIcon.js +9 -2
  184. package/es/TextBoxIcon/TextBoxIcon.module.css +7 -7
  185. package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +2 -7
  186. package/es/Textarea/Textarea.js +13 -3
  187. package/es/Textarea/Textarea.module.css +21 -21
  188. package/es/Textarea/__tests__/Textarea.spec.js +2 -2
  189. package/es/Tooltip/Tooltip.js +60 -15
  190. package/es/Tooltip/Tooltip.module.css +5 -5
  191. package/es/Tooltip/__tests__/Tooltip.spec.js +5 -0
  192. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +3 -2
  193. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +7 -5
  194. package/es/common/animation.module.css +8 -8
  195. package/es/common/avatarsizes.module.css +16 -16
  196. package/es/common/basicReset.module.css +3 -3
  197. package/es/common/common.module.css +24 -24
  198. package/es/common/customscroll.module.css +2 -2
  199. package/es/deprecated/AdvancedMultiSelect.module.css +18 -18
  200. package/es/deprecated/PortalLayer/PortalLayer.js +25 -20
  201. package/es/semantic/Button/Button.js +4 -2
  202. package/es/semantic/Button/semanticButton.module.css +1 -1
  203. package/es/utils/Common.js +58 -9
  204. package/es/utils/ContextOptimizer.js +4 -5
  205. package/es/utils/__tests__/debounce.spec.js +2 -2
  206. package/es/utils/constructFullName.js +2 -0
  207. package/es/utils/css/compileClassNames.js +5 -0
  208. package/es/utils/css/mergeStyle.js +7 -6
  209. package/es/utils/css/utils.js +1 -0
  210. package/es/utils/datetime/GMTZones.js +48 -0
  211. package/es/utils/datetime/common.js +31 -7
  212. package/es/utils/debounce.js +5 -1
  213. package/es/utils/dropDownUtils.js +68 -11
  214. package/es/utils/getInitial.js +4 -0
  215. package/es/utils/shallowEqual.js +6 -0
  216. package/lib/Accordion/Accordion.js +43 -18
  217. package/lib/Accordion/AccordionItem.js +41 -18
  218. package/lib/Accordion/__tests__/Accordion.spec.js +3 -0
  219. package/lib/Accordion/index.js +3 -0
  220. package/lib/Accordion/props/propTypes.js +3 -0
  221. package/lib/Animation/Animation.js +38 -18
  222. package/lib/Animation/__tests__/Animation.spec.js +11 -7
  223. package/lib/Animation/props/propTypes.js +3 -0
  224. package/lib/AppContainer/AppContainer.js +66 -26
  225. package/lib/AppContainer/AppContainer.module.css +2 -2
  226. package/lib/AppContainer/props/defaultProps.js +2 -1
  227. package/lib/AppContainer/props/propTypes.js +4 -0
  228. package/lib/Avatar/Avatar.js +81 -38
  229. package/lib/Avatar/Avatar.module.css +18 -18
  230. package/lib/Avatar/__tests__/Avatar.spec.js +44 -0
  231. package/lib/Avatar/props/propTypes.js +3 -0
  232. package/lib/AvatarTeam/AvatarTeam.js +53 -30
  233. package/lib/AvatarTeam/AvatarTeam.module.css +35 -35
  234. package/lib/AvatarTeam/__tests__/AvatarTeam.spec.js +13 -0
  235. package/lib/AvatarTeam/props/propTypes.js +3 -0
  236. package/lib/Button/Button.js +32 -20
  237. package/lib/Button/css/Button.module.css +70 -70
  238. package/lib/Button/css/cssJSLogic.js +18 -17
  239. package/lib/Button/index.js +3 -0
  240. package/lib/Button/props/defaultProps.js +2 -0
  241. package/lib/Button/props/propTypes.js +3 -0
  242. package/lib/Buttongroup/Buttongroup.js +33 -12
  243. package/lib/Buttongroup/Buttongroup.module.css +14 -15
  244. package/lib/Buttongroup/__test__/Buttongroup.spec.js +10 -0
  245. package/lib/Buttongroup/props/propTypes.js +3 -0
  246. package/lib/Card/Card.js +102 -46
  247. package/lib/Card/__tests__/Card.spec.js +10 -1
  248. package/lib/Card/index.js +4 -0
  249. package/lib/Card/props/propTypes.js +3 -0
  250. package/lib/CheckBox/CheckBox.js +71 -47
  251. package/lib/CheckBox/CheckBox.module.css +15 -15
  252. package/lib/CheckBox/__tests__/CheckBox.spec.js +3 -0
  253. package/lib/CheckBox/props/propTypes.js +3 -0
  254. package/lib/DateTime/CalendarView.js +83 -42
  255. package/lib/DateTime/DateTime.js +287 -160
  256. package/lib/DateTime/DateTime.module.css +39 -39
  257. package/lib/DateTime/DateTimePopupFooter.js +31 -8
  258. package/lib/DateTime/DateTimePopupHeader.js +48 -17
  259. package/lib/DateTime/DateWidget.js +354 -250
  260. package/lib/DateTime/DateWidget.module.css +5 -5
  261. package/lib/DateTime/DaysRow.js +27 -5
  262. package/lib/DateTime/Time.js +73 -32
  263. package/lib/DateTime/YearView.js +77 -28
  264. package/lib/DateTime/YearView.module.css +15 -15
  265. package/lib/DateTime/__tests__/CalendarView.spec.js +13 -5
  266. package/lib/DateTime/__tests__/DateTime.spec.js +51 -37
  267. package/lib/DateTime/__tests__/DateWidget.spec.js +10 -8
  268. package/lib/DateTime/common.js +6 -0
  269. package/lib/DateTime/constants.js +1 -0
  270. package/lib/DateTime/dateFormatUtils/dateFormat.js +184 -122
  271. package/lib/DateTime/dateFormatUtils/dateFormats.js +0 -1
  272. package/lib/DateTime/dateFormatUtils/dayChange.js +14 -7
  273. package/lib/DateTime/dateFormatUtils/index.js +74 -16
  274. package/lib/DateTime/dateFormatUtils/monthChange.js +19 -9
  275. package/lib/DateTime/dateFormatUtils/timeChange.js +54 -22
  276. package/lib/DateTime/dateFormatUtils/yearChange.js +22 -11
  277. package/lib/DateTime/index.js +2 -0
  278. package/lib/DateTime/objectUtils.js +24 -20
  279. package/lib/DateTime/props/defaultProps.js +2 -1
  280. package/lib/DateTime/props/propTypes.js +11 -1
  281. package/lib/DateTime/typeChecker.js +4 -0
  282. package/lib/DateTime/validator.js +73 -10
  283. package/lib/DropBox/DropBox.js +36 -12
  284. package/lib/DropBox/DropBoxElement/DropBoxElement.js +68 -42
  285. package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +85 -79
  286. package/lib/DropBox/DropBoxElement/css/cssJSLogic.js +43 -34
  287. package/lib/DropBox/DropBoxElement/props/propTypes.js +4 -1
  288. package/lib/DropBox/DropBoxElement/useDropboxPosCalc.js +14 -9
  289. package/lib/DropBox/__tests__/DropBox.spec.js +8 -4
  290. package/lib/DropBox/css/DropBox.module.css +6 -6
  291. package/lib/DropBox/css/cssJSLogic.js +3 -1
  292. package/lib/DropBox/props/defaultProps.js +8 -4
  293. package/lib/DropBox/props/propTypes.js +10 -4
  294. package/lib/DropDown/DropDown.js +54 -9
  295. package/lib/DropDown/DropDown.module.css +2 -2
  296. package/lib/DropDown/DropDownHeading.js +40 -20
  297. package/lib/DropDown/DropDownHeading.module.css +6 -6
  298. package/lib/DropDown/DropDownItem.js +44 -21
  299. package/lib/DropDown/DropDownItem.module.css +12 -12
  300. package/lib/DropDown/DropDownSearch.js +40 -17
  301. package/lib/DropDown/DropDownSearch.module.css +3 -3
  302. package/lib/DropDown/DropDownSeparator.js +24 -4
  303. package/lib/DropDown/DropDownSeparator.module.css +2 -2
  304. package/lib/DropDown/__tests__/DropDown.spec.js +15 -9
  305. package/lib/DropDown/__tests__/DropDownItem.spec.js +9 -4
  306. package/lib/DropDown/__tests__/DropDownSearch.spec.js +3 -0
  307. package/lib/DropDown/index.js +9 -0
  308. package/lib/DropDown/props/propTypes.js +6 -4
  309. package/lib/Heading/Heading.js +39 -16
  310. package/lib/Heading/Heading.module.css +2 -2
  311. package/lib/Heading/props/propTypes.js +3 -0
  312. package/lib/Label/Label.js +40 -19
  313. package/lib/Label/Label.module.css +5 -5
  314. package/lib/Label/__tests__/Label.spec.js +14 -1
  315. package/lib/Label/props/propTypes.js +3 -0
  316. package/lib/Layout/Box.js +39 -15
  317. package/lib/Layout/Container.js +37 -14
  318. package/lib/Layout/Layout.module.css +15 -15
  319. package/lib/Layout/__tests__/Box.spec.js +65 -49
  320. package/lib/Layout/__tests__/Container.spec.js +67 -50
  321. package/lib/Layout/index.js +3 -0
  322. package/lib/Layout/props/defaultProps.js +2 -0
  323. package/lib/Layout/props/propTypes.js +5 -0
  324. package/lib/Layout/utils.js +15 -1
  325. package/lib/ListItem/ListContainer.js +48 -27
  326. package/lib/ListItem/ListItem.js +69 -45
  327. package/lib/ListItem/ListItem.module.css +38 -38
  328. package/lib/ListItem/ListItemWithAvatar.js +75 -48
  329. package/lib/ListItem/ListItemWithCheckBox.js +64 -39
  330. package/lib/ListItem/ListItemWithIcon.js +68 -44
  331. package/lib/ListItem/ListItemWithRadio.js +65 -41
  332. package/lib/ListItem/index.js +7 -0
  333. package/lib/ListItem/props/propTypes.js +6 -4
  334. package/lib/Modal/Modal.js +45 -10
  335. package/lib/Modal/props/propTypes.js +3 -0
  336. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +295 -166
  337. package/lib/MultiSelect/AdvancedMultiSelect.js +203 -125
  338. package/lib/MultiSelect/EmptyState.js +49 -24
  339. package/lib/MultiSelect/MultiSelect.js +324 -206
  340. package/lib/MultiSelect/MultiSelect.module.css +31 -31
  341. package/lib/MultiSelect/MultiSelectHeader.js +30 -8
  342. package/lib/MultiSelect/MultiSelectWithAvatar.js +106 -63
  343. package/lib/MultiSelect/SelectedOptions.js +43 -17
  344. package/lib/MultiSelect/SelectedOptions.module.css +5 -5
  345. package/lib/MultiSelect/Suggestions.js +64 -32
  346. package/lib/MultiSelect/__tests__/MultiSelect.spec.js +86 -75
  347. package/lib/MultiSelect/index.js +5 -0
  348. package/lib/MultiSelect/props/defaultProps.js +2 -0
  349. package/lib/MultiSelect/props/propTypes.js +5 -0
  350. package/lib/PopOver/PopOver.js +95 -49
  351. package/lib/PopOver/__tests__/PopOver.spec.js +4 -1
  352. package/lib/PopOver/index.js +4 -0
  353. package/lib/PopOver/props/propTypes.js +3 -0
  354. package/lib/Popup/Popup.js +158 -84
  355. package/lib/Popup/__tests__/Popup.spec.js +43 -8
  356. package/lib/Popup/viewPort.js +28 -14
  357. package/lib/Provider/AvatarSize.js +4 -0
  358. package/lib/Provider/Config.js +2 -0
  359. package/lib/Provider/CssProvider.js +4 -0
  360. package/lib/Provider/IdProvider.js +17 -6
  361. package/lib/Provider/LibraryContext.js +35 -15
  362. package/lib/Provider/LibraryContextInit.js +4 -0
  363. package/lib/Provider/NumberGenerator/NumberGenerator.js +44 -15
  364. package/lib/Provider/ZindexProvider.js +15 -3
  365. package/lib/Provider/index.js +5 -0
  366. package/lib/Radio/Radio.js +61 -38
  367. package/lib/Radio/Radio.module.css +9 -9
  368. package/lib/Radio/__tests__/Radiospec.js +9 -5
  369. package/lib/Radio/props/propTypes.js +3 -0
  370. package/lib/Responsive/CustomResponsive.js +73 -29
  371. package/lib/Responsive/RefWrapper.js +17 -11
  372. package/lib/Responsive/ResizeComponent.js +62 -36
  373. package/lib/Responsive/ResizeObserver.js +24 -10
  374. package/lib/Responsive/Responsive.js +80 -30
  375. package/lib/Responsive/index.js +4 -0
  376. package/lib/Responsive/props/propTypes.js +3 -0
  377. package/lib/Responsive/sizeObservers.js +53 -17
  378. package/lib/Responsive/utils/index.js +11 -3
  379. package/lib/Responsive/utils/shallowCompare.js +11 -2
  380. package/lib/Responsive/windowResizeObserver.js +8 -0
  381. package/lib/ResponsiveDropBox/ResponsiveDropBox.js +45 -17
  382. package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css +2 -2
  383. package/lib/ResponsiveDropBox/props/propTypes.js +3 -0
  384. package/lib/Ribbon/Ribbon.js +34 -13
  385. package/lib/Ribbon/Ribbon.module.css +46 -48
  386. package/lib/Ribbon/__tests__/Ribbon.spec.js +22 -0
  387. package/lib/Ribbon/props/propTypes.js +3 -0
  388. package/lib/RippleEffect/RippleEffect.js +18 -10
  389. package/lib/RippleEffect/props/propTypes.js +3 -0
  390. package/lib/Select/GroupSelect.js +230 -130
  391. package/lib/Select/Select.js +292 -210
  392. package/lib/Select/Select.module.css +23 -23
  393. package/lib/Select/SelectWithAvatar.js +104 -56
  394. package/lib/Select/SelectWithIcon.js +134 -77
  395. package/lib/Select/__tests__/Select.spec.js +133 -91
  396. package/lib/Select/index.js +5 -0
  397. package/lib/Select/props/defaultProps.js +5 -4
  398. package/lib/Select/props/propTypes.js +4 -0
  399. package/lib/Stencils/Stencils.js +29 -10
  400. package/lib/Stencils/Stencils.module.css +11 -11
  401. package/lib/Stencils/__tests__/Stencils.spec.js +12 -0
  402. package/lib/Stencils/props/propTypes.js +3 -0
  403. package/lib/Switch/Switch.js +58 -34
  404. package/lib/Switch/Switch.module.css +23 -23
  405. package/lib/Switch/props/propTypes.js +3 -0
  406. package/lib/Tab/Tab.js +40 -27
  407. package/lib/Tab/Tab.module.css +14 -14
  408. package/lib/Tab/TabContent.js +12 -5
  409. package/lib/Tab/TabContentWrapper.js +13 -6
  410. package/lib/Tab/TabWrapper.js +37 -19
  411. package/lib/Tab/Tabs.js +173 -92
  412. package/lib/Tab/Tabs.module.css +24 -42
  413. package/lib/Tab/__tests__/Tab.spec.js +67 -58
  414. package/lib/Tab/__tests__/TabContent.spec.js +10 -6
  415. package/lib/Tab/__tests__/TabContentWrapper.spec.js +28 -20
  416. package/lib/Tab/__tests__/TabWrapper.spec.js +12 -0
  417. package/lib/Tab/__tests__/Tabs.spec.js +53 -39
  418. package/lib/Tab/index.js +6 -0
  419. package/lib/Tab/props/propTypes.js +3 -0
  420. package/lib/Tag/Tag.js +73 -43
  421. package/lib/Tag/Tag.module.css +25 -25
  422. package/lib/Tag/__tests__/Tag.spec.js +14 -8
  423. package/lib/Tag/props/propTypes.js +3 -0
  424. package/lib/TextBox/TextBox.js +86 -59
  425. package/lib/TextBox/TextBox.module.css +9 -9
  426. package/lib/TextBox/__tests__/TextBox.spec.js +14 -4
  427. package/lib/TextBox/props/propTypes.js +6 -4
  428. package/lib/TextBoxIcon/TextBoxIcon.js +79 -52
  429. package/lib/TextBoxIcon/TextBoxIcon.module.css +7 -7
  430. package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +14 -5
  431. package/lib/TextBoxIcon/props/propTypes.js +3 -0
  432. package/lib/Textarea/Textarea.js +55 -29
  433. package/lib/Textarea/Textarea.module.css +21 -21
  434. package/lib/Textarea/__tests__/Textarea.spec.js +14 -2
  435. package/lib/Textarea/props/propTypes.js +3 -0
  436. package/lib/Tooltip/Tooltip.js +96 -32
  437. package/lib/Tooltip/Tooltip.module.css +5 -5
  438. package/lib/Tooltip/__tests__/Tooltip.spec.js +24 -3
  439. package/lib/Tooltip/props/propTypes.js +3 -0
  440. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +40 -16
  441. package/lib/VelocityAnimation/VelocityAnimation/props/propTypes.js +3 -0
  442. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +53 -25
  443. package/lib/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js +3 -0
  444. package/lib/VelocityAnimation/index.js +3 -0
  445. package/lib/common/animation.module.css +8 -8
  446. package/lib/common/avatarsizes.module.css +16 -16
  447. package/lib/common/basicReset.module.css +3 -3
  448. package/lib/common/common.module.css +24 -24
  449. package/lib/common/customscroll.module.css +2 -2
  450. package/lib/css.js +40 -0
  451. package/lib/deprecated/AdvancedMultiSelect.module.css +18 -18
  452. package/lib/deprecated/PortalLayer/PortalLayer.js +46 -23
  453. package/lib/deprecated/PortalLayer/props/propTypes.js +3 -0
  454. package/lib/index.js +57 -0
  455. package/lib/semantic/Button/Button.js +43 -22
  456. package/lib/semantic/Button/props/propTypes.js +3 -0
  457. package/lib/semantic/Button/semanticButton.module.css +1 -1
  458. package/lib/semantic/index.js +2 -0
  459. package/lib/utils/Common.js +117 -19
  460. package/lib/utils/ContextOptimizer.js +16 -10
  461. package/lib/utils/__tests__/constructFullName.spec.js +1 -0
  462. package/lib/utils/__tests__/debounce.spec.js +3 -2
  463. package/lib/utils/__tests__/getInitial.spec.js +1 -0
  464. package/lib/utils/constructFullName.js +13 -4
  465. package/lib/utils/css/compileClassNames.js +6 -0
  466. package/lib/utils/css/mergeStyle.js +10 -7
  467. package/lib/utils/css/utils.js +8 -0
  468. package/lib/utils/datetime/GMTZones.js +55 -0
  469. package/lib/utils/datetime/common.js +52 -7
  470. package/lib/utils/debounce.js +6 -1
  471. package/lib/utils/dropDownUtils.js +175 -59
  472. package/lib/utils/dummyFunction.js +2 -0
  473. package/lib/utils/getHTMLFontSize.js +1 -0
  474. package/lib/utils/getInitial.js +6 -0
  475. package/lib/utils/index.js +4 -0
  476. package/lib/utils/scrollTo.js +2 -0
  477. package/lib/utils/shallowEqual.js +8 -0
  478. package/package.json +18 -27
@@ -5,9 +5,9 @@
5
5
  --textbox_border_width: 0;
6
6
  --textbox_border_style: solid;
7
7
  --textbox_border_color: var(--zdt_textbox_default_border);
8
- --textbox_font_size: 14px;
8
+ --textbox_font_size: var(--zd_font_size14);
9
9
  --textbox_width: 100%;
10
- --textbox_height: 35px;
10
+ --textbox_height: var(--zd_size35);
11
11
  --textbox_border_radius: none;
12
12
  --textbox_font_family: var(--zd_regular);
13
13
  /* Variable:Ignore */
@@ -111,24 +111,24 @@
111
111
  /* Size */
112
112
  .xmedium,
113
113
  .medium {
114
- --textbox_font_size: 14px;
114
+ --textbox_font_size: var(--zd_font_size14);
115
115
  }
116
116
  .xmedium {
117
- --textbox_height: 28px;
117
+ --textbox_height: var(--zd_size28);
118
118
  --textbox_line_height: 28px;
119
119
  }
120
120
  .medium {
121
- --textbox_height: 35px;
121
+ --textbox_height: var(--zd_size35);
122
122
  --textbox_line_height: 35px;
123
123
  }
124
124
  .small {
125
- --textbox_font_size: 12px;
126
- --textbox_height: 28px;
125
+ --textbox_font_size: var(--zd_font_size12);
126
+ --textbox_height: var(--zd_size28);
127
127
  --textbox_line_height: 28px;
128
128
  }
129
129
  .xsmall {
130
- --textbox_font_size: 13px;
131
- --textbox_height: 25px;
130
+ --textbox_font_size: var(--zd_font_size13);
131
+ --textbox_height: var(--zd_size25);
132
132
  --textbox_line_height: 25px;
133
133
  }
134
134
  .default,
@@ -1,9 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  var _react = _interopRequireDefault(require("react"));
4
+
4
5
  var _TextBox = _interopRequireDefault(require("../TextBox"));
6
+
5
7
  var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
8
+
6
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
+
7
11
  describe('TextBox component', function () {
8
12
  it('should display size small', function () {
9
13
  var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
@@ -12,6 +16,7 @@ describe('TextBox component', function () {
12
16
  size: "small",
13
17
  variant: "default"
14
18
  }));
19
+
15
20
  var tree = ele.toJSON();
16
21
  expect(tree).toMatchSnapshot();
17
22
  });
@@ -22,6 +27,7 @@ describe('TextBox component', function () {
22
27
  size: "medium",
23
28
  variant: "default"
24
29
  }));
30
+
25
31
  var tree = ele.toJSON();
26
32
  expect(tree).toMatchSnapshot();
27
33
  });
@@ -32,6 +38,7 @@ describe('TextBox component', function () {
32
38
  size: "xmedium",
33
39
  variant: "default"
34
40
  }));
41
+
35
42
  var tree = ele.toJSON();
36
43
  expect(tree).toMatchSnapshot();
37
44
  });
@@ -42,6 +49,7 @@ describe('TextBox component', function () {
42
49
  size: "small",
43
50
  variant: "primary"
44
51
  }));
52
+
45
53
  var tree = ele.toJSON();
46
54
  expect(tree).toMatchSnapshot();
47
55
  });
@@ -52,6 +60,7 @@ describe('TextBox component', function () {
52
60
  size: "medium",
53
61
  variant: "primary"
54
62
  }));
63
+
55
64
  var tree = ele.toJSON();
56
65
  expect(tree).toMatchSnapshot();
57
66
  });
@@ -62,6 +71,7 @@ describe('TextBox component', function () {
62
71
  size: "xmedium",
63
72
  variant: "primary"
64
73
  }));
74
+
65
75
  var tree = ele.toJSON();
66
76
  expect(tree).toMatchSnapshot();
67
77
  });
@@ -72,6 +82,7 @@ describe('TextBox component', function () {
72
82
  size: "small",
73
83
  variant: "secondary"
74
84
  }));
85
+
75
86
  var tree = ele.toJSON();
76
87
  expect(tree).toMatchSnapshot();
77
88
  });
@@ -82,6 +93,7 @@ describe('TextBox component', function () {
82
93
  size: "medium",
83
94
  variant: "secondary"
84
95
  }));
96
+
85
97
  var tree = ele.toJSON();
86
98
  expect(tree).toMatchSnapshot();
87
99
  });
@@ -92,6 +104,7 @@ describe('TextBox component', function () {
92
104
  size: "xmedium",
93
105
  variant: "secondary"
94
106
  }));
107
+
95
108
  var tree = ele.toJSON();
96
109
  expect(tree).toMatchSnapshot();
97
110
  });
@@ -114,9 +127,7 @@ describe('TextBox component', function () {
114
127
  text: "Text Box Working"
115
128
  }));
116
129
  expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox').getAttribute('placeholder')).toMatch(/Text Box/);
117
- });
118
-
119
- // it('Check disabled works', () => {
130
+ }); // it('Check disabled works', () => {
120
131
  // let renderedDOM = TestUtils.renderIntoDocument(
121
132
  // <TextBox maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' disabled />
122
133
  // );
@@ -132,7 +143,6 @@ describe('TextBox component', function () {
132
143
  // pass
133
144
  // ).toBe(true);
134
145
  // });
135
-
136
146
  // it('Check readOnly works', () => {
137
147
  // let renderedDOM = TestUtils.renderIntoDocument(
138
148
  // <TextBox maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' readOnly />
@@ -4,13 +4,15 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.propTypes = void 0;
7
+
7
8
  var _propTypes2 = _interopRequireDefault(require("prop-types"));
9
+
8
10
  var _propTypes;
11
+
9
12
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
- function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
11
- function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
12
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
13
- function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
13
+
14
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
15
+
14
16
  var propTypes = (_propTypes = {
15
17
  autofocus: _propTypes2["default"].bool,
16
18
  borderColor: _propTypes2["default"].oneOf(['transparent', 'default']),
@@ -1,39 +1,63 @@
1
1
  "use strict";
2
2
 
3
3
  function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
4
+
4
5
  Object.defineProperty(exports, "__esModule", {
5
6
  value: true
6
7
  });
7
8
  exports["default"] = void 0;
9
+
8
10
  var _react = _interopRequireDefault(require("react"));
11
+
9
12
  var _defaultProps = require("./props/defaultProps");
13
+
10
14
  var _propTypes = require("./props/propTypes");
15
+
11
16
  var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
17
+
12
18
  var _Layout = require("../Layout");
19
+
13
20
  var _icons = require("@zohodesk/icons");
21
+
14
22
  var _semanticButtonModule = _interopRequireDefault(require("../semantic/Button/semanticButton.module.css"));
23
+
15
24
  var _TextBoxIconModule = _interopRequireDefault(require("./TextBoxIcon.module.css"));
25
+
16
26
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
27
+
17
28
  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); }
29
+
18
30
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
19
- function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
31
+
32
+ function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
33
+
20
34
  function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
21
- function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
22
- function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
35
+
23
36
  function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
37
+
24
38
  function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
39
+
25
40
  function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
41
+
26
42
  function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
43
+
27
44
  function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
45
+
28
46
  function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
47
+
29
48
  function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
49
+
30
50
  /* eslint-disable react/forbid-component-props */
31
51
  var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
32
52
  _inherits(TextBoxIcon, _React$Component);
53
+
33
54
  var _super = _createSuper(TextBoxIcon);
55
+
34
56
  function TextBoxIcon(props) {
35
57
  var _this;
58
+
36
59
  _classCallCheck(this, TextBoxIcon);
60
+
37
61
  _this = _super.call(this, props);
38
62
  _this.state = {
39
63
  isActive: false
@@ -44,6 +68,7 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
44
68
  _this.handleClear = _this.handleClear.bind(_assertThisInitialized(_this));
45
69
  return _this;
46
70
  }
71
+
47
72
  _createClass(TextBoxIcon, [{
48
73
  key: "handleRef",
49
74
  value: function handleRef(ele) {
@@ -64,9 +89,10 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
64
89
  key: "handleFocus",
65
90
  value: function handleFocus(e) {
66
91
  var _this$props = this.props,
67
- onFocus = _this$props.onFocus,
68
- needReadOnlyStyle = _this$props.needReadOnlyStyle,
69
- isReadOnly = _this$props.isReadOnly;
92
+ onFocus = _this$props.onFocus,
93
+ needReadOnlyStyle = _this$props.needReadOnlyStyle,
94
+ isReadOnly = _this$props.isReadOnly;
95
+
70
96
  if (!needReadOnlyStyle || !isReadOnly && needReadOnlyStyle) {
71
97
  this.setState({
72
98
  isActive: true
@@ -87,54 +113,54 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
87
113
  key: "render",
88
114
  value: function render() {
89
115
  var _this$props2 = this.props,
90
- type = _this$props2.type,
91
- name = _this$props2.name,
92
- id = _this$props2.id,
93
- maxLength = _this$props2.maxLength,
94
- placeHolder = _this$props2.placeHolder,
95
- size = _this$props2.size,
96
- onKeyUp = _this$props2.onKeyUp,
97
- isReadOnly = _this$props2.isReadOnly,
98
- isDisabled = _this$props2.isDisabled,
99
- children = _this$props2.children,
100
- onKeyDown = _this$props2.onKeyDown,
101
- onClick = _this$props2.onClick,
102
- value = _this$props2.value,
103
- iconRotated = _this$props2.iconRotated,
104
- needBorder = _this$props2.needBorder,
105
- variant = _this$props2.variant,
106
- onClear = _this$props2.onClear,
107
- onChange = _this$props2.onChange,
108
- title = _this$props2.title,
109
- dataId = _this$props2.dataId,
110
- dataSelectorId = _this$props2.dataSelectorId,
111
- needReadOnlyStyle = _this$props2.needReadOnlyStyle,
112
- isClickable = _this$props2.isClickable,
113
- needEffect = _this$props2.needEffect,
114
- onKeyPress = _this$props2.onKeyPress,
115
- borderColor = _this$props2.borderColor,
116
- onMouseDown = _this$props2.onMouseDown,
117
- showClearIcon = _this$props2.showClearIcon,
118
- htmlId = _this$props2.htmlId,
119
- i18nKeys = _this$props2.i18nKeys,
120
- customClass = _this$props2.customClass,
121
- iconOnHover = _this$props2.iconOnHover,
122
- isFocus = _this$props2.isFocus,
123
- onClearMouseDown = _this$props2.onClearMouseDown,
124
- customProps = _this$props2.customProps;
116
+ type = _this$props2.type,
117
+ name = _this$props2.name,
118
+ id = _this$props2.id,
119
+ maxLength = _this$props2.maxLength,
120
+ placeHolder = _this$props2.placeHolder,
121
+ size = _this$props2.size,
122
+ onKeyUp = _this$props2.onKeyUp,
123
+ isReadOnly = _this$props2.isReadOnly,
124
+ isDisabled = _this$props2.isDisabled,
125
+ children = _this$props2.children,
126
+ onKeyDown = _this$props2.onKeyDown,
127
+ onClick = _this$props2.onClick,
128
+ value = _this$props2.value,
129
+ iconRotated = _this$props2.iconRotated,
130
+ needBorder = _this$props2.needBorder,
131
+ variant = _this$props2.variant,
132
+ onClear = _this$props2.onClear,
133
+ onChange = _this$props2.onChange,
134
+ title = _this$props2.title,
135
+ dataId = _this$props2.dataId,
136
+ dataSelectorId = _this$props2.dataSelectorId,
137
+ needReadOnlyStyle = _this$props2.needReadOnlyStyle,
138
+ isClickable = _this$props2.isClickable,
139
+ needEffect = _this$props2.needEffect,
140
+ onKeyPress = _this$props2.onKeyPress,
141
+ borderColor = _this$props2.borderColor,
142
+ onMouseDown = _this$props2.onMouseDown,
143
+ showClearIcon = _this$props2.showClearIcon,
144
+ htmlId = _this$props2.htmlId,
145
+ i18nKeys = _this$props2.i18nKeys,
146
+ customClass = _this$props2.customClass,
147
+ iconOnHover = _this$props2.iconOnHover,
148
+ isFocus = _this$props2.isFocus,
149
+ onClearMouseDown = _this$props2.onClearMouseDown,
150
+ customProps = _this$props2.customProps;
125
151
  var isActive = this.state.isActive;
126
152
  var _customClass$customTB = customClass.customTBoxWrap,
127
- customTBoxWrap = _customClass$customTB === void 0 ? '' : _customClass$customTB,
128
- _customClass$customTe = customClass.customTextBox,
129
- customTextBox = _customClass$customTe === void 0 ? '' : _customClass$customTe,
130
- _customClass$customTB2 = customClass.customTBoxIcon,
131
- customTBoxIcon = _customClass$customTB2 === void 0 ? '' : _customClass$customTB2,
132
- _customClass$customTB3 = customClass.customTBoxLine,
133
- customTBoxLine = _customClass$customTB3 === void 0 ? '' : _customClass$customTB3;
153
+ customTBoxWrap = _customClass$customTB === void 0 ? '' : _customClass$customTB,
154
+ _customClass$customTe = customClass.customTextBox,
155
+ customTextBox = _customClass$customTe === void 0 ? '' : _customClass$customTe,
156
+ _customClass$customTB2 = customClass.customTBoxIcon,
157
+ customTBoxIcon = _customClass$customTB2 === void 0 ? '' : _customClass$customTB2,
158
+ _customClass$customTB3 = customClass.customTBoxLine,
159
+ customTBoxLine = _customClass$customTB3 === void 0 ? '' : _customClass$customTB3;
134
160
  var _i18nKeys$clearText = i18nKeys.clearText,
135
- clearText = _i18nKeys$clearText === void 0 ? 'Clear' : _i18nKeys$clearText;
161
+ clearText = _i18nKeys$clearText === void 0 ? 'Clear' : _i18nKeys$clearText;
136
162
  var _customProps$TextBoxP = customProps.TextBoxProps,
137
- TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
163
+ TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
138
164
  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
139
165
  alignBox: "row",
140
166
  isCover: false,
@@ -194,12 +220,13 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
194
220
  }));
195
221
  }
196
222
  }]);
223
+
197
224
  return TextBoxIcon;
198
225
  }(_react["default"].Component);
226
+
199
227
  exports["default"] = TextBoxIcon;
200
228
  TextBoxIcon.defaultProps = _defaultProps.defaultProps;
201
- TextBoxIcon.propTypes = _propTypes.propTypes;
202
- // if (__DOCS__) {
229
+ TextBoxIcon.propTypes = _propTypes.propTypes; // if (__DOCS__) {
203
230
  // TextBoxIcon.docs = {
204
231
  // componentGroup: 'Form Elements',
205
232
  // folderName: 'Style Guide',
@@ -1,10 +1,10 @@
1
1
  .varClass {
2
2
  /* textboxicon default variables */
3
- --textboxicon_line_height: 1px;
3
+ --textboxicon_line_height: var(--zd_size1);
4
4
  --textboxicon_line_color: var(--zdt_textboxicon_default_line_bg);
5
5
 
6
6
  /* textboxicon icon default variables */
7
- --textboxicon_icon_margin: 0 5px;
7
+ --textboxicon_icon_margin: 0 var(--zd_size5);
8
8
  --textboxicon_icon_cursor: pointer;
9
9
  --textboxicon_icon_color: var(--zdt_textboxicon_default_icon);
10
10
  }
@@ -35,7 +35,7 @@
35
35
  }
36
36
  .line {
37
37
  position: absolute;
38
- bottom: 0;
38
+ bottom: 0 ;
39
39
  /* Variable:Ignore */
40
40
  min-height: 1px;
41
41
  transition: var(--zd_transition2);
@@ -43,12 +43,12 @@
43
43
  transform: perspective(1px);
44
44
  }
45
45
  [dir=ltr] .line {
46
- left: 0;
47
- right: 0;
46
+ left: 0 ;
47
+ right: 0 ;
48
48
  }
49
49
  [dir=rtl] .line {
50
- right: 0;
51
- left: 0;
50
+ right: 0 ;
51
+ left: 0 ;
52
52
  }
53
53
  .line, .borderColor_default {
54
54
  background-color: var(--textboxicon_line_color);
@@ -1,9 +1,13 @@
1
1
  "use strict";
2
2
 
3
3
  var _react = _interopRequireDefault(require("react"));
4
+
4
5
  var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon"));
6
+
5
7
  var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
8
+
6
9
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
10
+
7
11
  // children: PropTypes.node,
8
12
  // disabled: PropTypes.bool,
9
13
  // iconRotated: PropTypes.bool,
@@ -27,7 +31,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
27
31
  // type: PropTypes.oneOf(['text', 'password', 'number']),
28
32
  // value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
29
33
  // variant: PropTypes.oneOf(['primary', 'secondary', 'default'])
30
-
31
34
  describe('TextBoxIcon component', function () {
32
35
  it('should display size small', function () {
33
36
  var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
@@ -36,6 +39,7 @@ describe('TextBoxIcon component', function () {
36
39
  size: "small",
37
40
  variant: "default"
38
41
  }));
42
+
39
43
  var tree = ele.toJSON();
40
44
  expect(tree).toMatchSnapshot();
41
45
  });
@@ -46,6 +50,7 @@ describe('TextBoxIcon component', function () {
46
50
  size: "medium",
47
51
  variant: "default"
48
52
  }));
53
+
49
54
  var tree = ele.toJSON();
50
55
  expect(tree).toMatchSnapshot();
51
56
  });
@@ -56,6 +61,7 @@ describe('TextBoxIcon component', function () {
56
61
  size: "xmedium",
57
62
  variant: "default"
58
63
  }));
64
+
59
65
  var tree = ele.toJSON();
60
66
  expect(tree).toMatchSnapshot();
61
67
  });
@@ -66,6 +72,7 @@ describe('TextBoxIcon component', function () {
66
72
  size: "small",
67
73
  variant: "primary"
68
74
  }));
75
+
69
76
  var tree = ele.toJSON();
70
77
  expect(tree).toMatchSnapshot();
71
78
  });
@@ -76,6 +83,7 @@ describe('TextBoxIcon component', function () {
76
83
  size: "medium",
77
84
  variant: "primary"
78
85
  }));
86
+
79
87
  var tree = ele.toJSON();
80
88
  expect(tree).toMatchSnapshot();
81
89
  });
@@ -86,6 +94,7 @@ describe('TextBoxIcon component', function () {
86
94
  size: "xmedium",
87
95
  variant: "primary"
88
96
  }));
97
+
89
98
  var tree = ele.toJSON();
90
99
  expect(tree).toMatchSnapshot();
91
100
  });
@@ -96,6 +105,7 @@ describe('TextBoxIcon component', function () {
96
105
  size: "small",
97
106
  variant: "secondary"
98
107
  }));
108
+
99
109
  var tree = ele.toJSON();
100
110
  expect(tree).toMatchSnapshot();
101
111
  });
@@ -106,6 +116,7 @@ describe('TextBoxIcon component', function () {
106
116
  size: "medium",
107
117
  variant: "secondary"
108
118
  }));
119
+
109
120
  var tree = ele.toJSON();
110
121
  expect(tree).toMatchSnapshot();
111
122
  });
@@ -116,6 +127,7 @@ describe('TextBoxIcon component', function () {
116
127
  size: "xmedium",
117
128
  variant: "secondary"
118
129
  }));
130
+
119
131
  var tree = ele.toJSON();
120
132
  expect(tree).toMatchSnapshot();
121
133
  });
@@ -138,9 +150,7 @@ describe('TextBoxIcon component', function () {
138
150
  text: "Text Box Working"
139
151
  }));
140
152
  expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon').getAttribute('placeholder')).toMatch(/Text Box/);
141
- });
142
-
143
- // it('Check disabled works', () => {
153
+ }); // it('Check disabled works', () => {
144
154
  // let renderedDOM = TestUtils.renderIntoDocument(
145
155
  // <TextBoxIcon maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' disabled />
146
156
  // );
@@ -156,7 +166,6 @@ describe('TextBoxIcon component', function () {
156
166
  // pass
157
167
  // ).toBe(true);
158
168
  // });
159
-
160
169
  // it('Check readOnly works', () => {
161
170
  // let renderedDOM = TestUtils.renderIntoDocument(
162
171
  // <TextBoxIcon maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' readOnly />
@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.propTypes = void 0;
7
+
7
8
  var _propTypes = _interopRequireDefault(require("prop-types"));
9
+
8
10
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
11
+
9
12
  var propTypes = {
10
13
  borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'error']),
11
14
  children: _propTypes["default"].node,