@zohodesk/components 1.0.0-temp-71 → 1.0.0-temp-73

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 (412) hide show
  1. package/assets/Appearance/default/themes/blue/blueDefaultCTATheme.module.css +1 -1
  2. package/assets/Appearance/default/themes/green/greenDefaultCTATheme.module.css +1 -1
  3. package/assets/Appearance/default/themes/orange/orangeDefaultCTATheme.module.css +1 -1
  4. package/assets/Appearance/default/themes/red/redDefaultCTATheme.module.css +1 -1
  5. package/assets/Appearance/default/themes/yellow/yellowDefaultCTATheme.module.css +1 -1
  6. package/es/Accordion/Accordion.js +4 -20
  7. package/es/Accordion/AccordionItem.js +4 -19
  8. package/es/Accordion/props/defaultProps.js +8 -0
  9. package/es/Accordion/props/propTypes.js +30 -0
  10. package/es/Animation/Animation.js +4 -25
  11. package/es/Animation/props/defaultProps.js +7 -0
  12. package/es/Animation/props/propTypes.js +12 -0
  13. package/es/AppContainer/AppContainer.js +4 -23
  14. package/es/AppContainer/props/defaultProps.js +8 -0
  15. package/es/AppContainer/props/propTypes.js +15 -0
  16. package/es/Avatar/Avatar.js +4 -44
  17. package/es/Avatar/Avatar.module.css +11 -9
  18. package/es/Avatar/props/defaultProps.js +13 -0
  19. package/es/Avatar/props/propTypes.js +22 -0
  20. package/es/AvatarTeam/AvatarTeam.js +4 -36
  21. package/es/AvatarTeam/AvatarTeam.module.css +21 -7
  22. package/es/AvatarTeam/props/defaultProps.js +13 -0
  23. package/es/AvatarTeam/props/propTypes.js +23 -0
  24. package/es/Button/Button.js +4 -47
  25. package/es/Button/Button.module.css +97 -24
  26. package/es/Button/props/defaultProps.js +15 -0
  27. package/es/Button/props/propTypes.js +22 -0
  28. package/es/Buttongroup/Buttongroup.js +4 -11
  29. package/es/Buttongroup/Buttongroup.module.css +37 -8
  30. package/es/Buttongroup/props/defaultProps.js +4 -0
  31. package/es/Buttongroup/props/propTypes.js +7 -0
  32. package/es/Card/Card.js +12 -60
  33. package/es/Card/props/defaultProps.js +15 -0
  34. package/es/Card/props/propTypes.js +43 -0
  35. package/es/CheckBox/CheckBox.js +4 -59
  36. package/es/CheckBox/CheckBox.module.css +29 -19
  37. package/es/CheckBox/props/defaultProps.js +18 -0
  38. package/es/CheckBox/props/propTypes.js +41 -0
  39. package/es/DateTime/CalendarView.js +6 -26
  40. package/es/DateTime/DateTime.js +4 -62
  41. package/es/DateTime/DateTime.module.css +39 -12
  42. package/es/DateTime/DateWidget.js +4 -83
  43. package/es/DateTime/DateWidget.module.css +9 -5
  44. package/es/DateTime/YearView.js +4 -12
  45. package/es/DateTime/YearView.module.css +17 -7
  46. package/es/DateTime/props/defaultProps.js +50 -0
  47. package/es/DateTime/props/propTypes.js +130 -0
  48. package/es/DropBox/DropBox.js +4 -71
  49. package/es/DropBox/DropBox.module.css +47 -11
  50. package/es/DropBox/props/defaultProps.js +20 -0
  51. package/es/DropBox/props/propTypes.js +47 -0
  52. package/es/DropDown/DropDown.js +7 -34
  53. package/es/DropDown/DropDownHeading.js +4 -19
  54. package/es/DropDown/DropDownHeading.module.css +7 -3
  55. package/es/DropDown/DropDownItem.js +4 -18
  56. package/es/DropDown/DropDownItem.module.css +32 -6
  57. package/es/DropDown/DropDownSearch.js +4 -24
  58. package/es/DropDown/DropDownSeparator.js +2 -4
  59. package/es/DropDown/props/defaultProps.js +18 -0
  60. package/es/DropDown/props/propTypes.js +77 -0
  61. package/es/Label/Label.js +4 -24
  62. package/es/Label/props/defaultProps.js +10 -0
  63. package/es/Label/props/propTypes.js +14 -0
  64. package/es/Layout/Box.js +15 -30
  65. package/es/Layout/Container.js +15 -27
  66. package/es/Layout/Layout.module.css +13 -1
  67. package/es/Layout/docs/Layout__four_Column.docs.js +16 -22
  68. package/es/Layout/props/defaultProps.js +12 -0
  69. package/es/Layout/props/propTypes.js +42 -0
  70. package/es/ListItem/ListContainer.js +4 -41
  71. package/es/ListItem/ListItem.js +4 -50
  72. package/es/ListItem/ListItem.module.css +69 -33
  73. package/es/ListItem/ListItemWithAvatar.js +4 -56
  74. package/es/ListItem/ListItemWithCheckBox.js +4 -40
  75. package/es/ListItem/ListItemWithIcon.js +4 -47
  76. package/es/ListItem/ListItemWithRadio.js +4 -41
  77. package/es/ListItem/props/defaultProps.js +85 -0
  78. package/es/ListItem/props/propTypes.js +185 -0
  79. package/es/Modal/Modal.js +4 -9
  80. package/es/Modal/props/defaultProps.js +3 -0
  81. package/es/Modal/props/propTypes.js +6 -0
  82. package/es/MultiSelect/AdvancedGroupMultiSelect.js +5 -91
  83. package/es/MultiSelect/AdvancedMultiSelect.js +4 -113
  84. package/es/MultiSelect/EmptyState.js +4 -29
  85. package/es/MultiSelect/MultiSelect.js +4 -113
  86. package/es/MultiSelect/MultiSelect.module.css +28 -11
  87. package/es/MultiSelect/MultiSelectHeader.js +4 -12
  88. package/es/MultiSelect/MultiSelectWithAvatar.js +4 -99
  89. package/es/MultiSelect/SelectedOptions.js +4 -19
  90. package/es/MultiSelect/SelectedOptions.module.css +8 -2
  91. package/es/MultiSelect/Suggestions.js +5 -34
  92. package/es/MultiSelect/props/defaultProps.js +140 -0
  93. package/es/MultiSelect/props/propTypes.js +360 -0
  94. package/es/PopOver/PopOver.js +7 -78
  95. package/es/PopOver/PopOver.module.css +1 -1
  96. package/es/PopOver/props/defaultProps.js +7 -0
  97. package/es/PopOver/props/propTypes.js +53 -0
  98. package/es/Radio/Radio.js +4 -46
  99. package/es/Radio/Radio.module.css +18 -10
  100. package/es/Radio/props/defaultProps.js +14 -0
  101. package/es/Radio/props/propTypes.js +32 -0
  102. package/es/Responsive/CustomResponsive.js +8 -19
  103. package/es/Responsive/ResizeComponent.js +15 -82
  104. package/es/Responsive/ResizeObserver.js +2 -6
  105. package/es/Responsive/Responsive.js +8 -22
  106. package/es/Responsive/docs/style.module.css +17 -8
  107. package/es/Responsive/props/defaultProps.js +13 -0
  108. package/es/Responsive/props/propTypes.js +25 -0
  109. package/es/ResponsiveDropBox/ResponsiveDropBox.js +4 -11
  110. package/es/ResponsiveDropBox/props/defaultProps.js +4 -0
  111. package/es/ResponsiveDropBox/props/propTypes.js +7 -0
  112. package/es/Ribbon/Ribbon.js +4 -25
  113. package/es/Ribbon/Ribbon.module.css +93 -28
  114. package/es/Ribbon/props/defaultProps.js +8 -0
  115. package/es/Ribbon/props/propTypes.js +10 -0
  116. package/es/RippleEffect/RippleEffect.js +4 -20
  117. package/es/RippleEffect/RippleEffect.module.css +37 -44
  118. package/es/RippleEffect/props/defaultProps.js +9 -0
  119. package/es/RippleEffect/props/propTypes.js +11 -0
  120. package/es/Select/GroupSelect.js +4 -109
  121. package/es/Select/Select.js +4 -120
  122. package/es/Select/Select.module.css +12 -2
  123. package/es/Select/SelectWithAvatar.js +4 -80
  124. package/es/Select/SelectWithIcon.js +4 -69
  125. package/es/Select/props/defaultProps.js +110 -0
  126. package/es/Select/props/propTypes.js +266 -0
  127. package/es/Stencils/Stencils.js +4 -17
  128. package/es/Stencils/Stencils.module.css +21 -3
  129. package/es/Stencils/props/defaultProps.js +6 -0
  130. package/es/Stencils/props/propTypes.js +7 -0
  131. package/es/Switch/Switch.js +4 -37
  132. package/es/Switch/Switch.module.css +9 -9
  133. package/es/Switch/props/defaultProps.js +10 -0
  134. package/es/Switch/props/propTypes.js +27 -0
  135. package/es/Tab/Tab.js +4 -31
  136. package/es/Tab/Tab.module.css +16 -7
  137. package/es/Tab/TabContent.js +4 -10
  138. package/es/Tab/TabContentWrapper.js +4 -12
  139. package/es/Tab/TabWrapper.js +4 -25
  140. package/es/Tab/Tabs.js +6 -68
  141. package/es/Tab/Tabs.module.css +42 -8
  142. package/es/Tab/docs/tabdocs.module.css +1 -1
  143. package/es/Tab/props/defaultProps.js +39 -0
  144. package/es/Tab/props/propTypes.js +102 -0
  145. package/es/Tag/Tag.js +4 -47
  146. package/es/Tag/Tag.module.css +36 -14
  147. package/es/Tag/props/defaultProps.js +13 -0
  148. package/es/Tag/props/propTypes.js +34 -0
  149. package/es/TextBox/TextBox.js +4 -72
  150. package/es/TextBox/TextBox.module.css +7 -11
  151. package/es/TextBox/props/defaultProps.js +19 -0
  152. package/es/TextBox/props/propTypes.js +53 -0
  153. package/es/TextBoxIcon/TextBoxIcon.js +4 -70
  154. package/es/TextBoxIcon/TextBoxIcon.module.css +12 -5
  155. package/es/TextBoxIcon/props/defaultProps.js +21 -0
  156. package/es/TextBoxIcon/props/propTypes.js +49 -0
  157. package/es/Textarea/Textarea.js +4 -47
  158. package/es/Textarea/Textarea.module.css +6 -7
  159. package/es/Textarea/props/defaultProps.js +16 -0
  160. package/es/Textarea/props/propTypes.js +31 -0
  161. package/es/Tooltip/Tooltip.js +4 -12
  162. package/es/Tooltip/Tooltip.module.css +9 -8
  163. package/es/Tooltip/props/defaultProps.js +4 -0
  164. package/es/Tooltip/props/propTypes.js +8 -0
  165. package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +4 -23
  166. package/es/VelocityAnimation/VelocityAnimation/props/defaultProps.js +7 -0
  167. package/es/VelocityAnimation/VelocityAnimation/props/propTypes.js +12 -0
  168. package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +4 -37
  169. package/es/VelocityAnimation/VelocityAnimationGroup/props/defaultProps.js +15 -0
  170. package/es/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js +19 -0
  171. package/es/common/animation.module.css +219 -21
  172. package/es/common/basicReset.module.css +2 -12
  173. package/es/common/common.module.css +88 -21
  174. package/es/common/customscroll.module.css +17 -21
  175. package/es/common/docStyle.module.css +79 -32
  176. package/es/common/transition.module.css +50 -10
  177. package/es/deprecated/AdvancedMultiSelect.module.css +22 -8
  178. package/es/deprecated/PortalLayer/PortalLayer.js +4 -16
  179. package/es/deprecated/PortalLayer/props/defaultProps.js +5 -0
  180. package/es/deprecated/PortalLayer/props/propTypes.js +11 -0
  181. package/es/index.js +9 -4
  182. package/es/semantic/Button/Button.js +4 -38
  183. package/es/semantic/Button/props/defaultProps.js +12 -0
  184. package/es/semantic/Button/props/propTypes.js +26 -0
  185. package/es/semantic/Button/semanticButton.module.css +3 -3
  186. package/es/ucl/Grid/Grid.js +45 -0
  187. package/es/ucl/Grid/componentNames.js +6 -0
  188. package/es/ucl/Grid/css/Grid.module.css +217 -0
  189. package/es/ucl/Grid/css/cssJSLogic.js +46 -0
  190. package/es/ucl/Grid/docs/Grid__Area_Based_Detail_Layout.docs.js +41 -0
  191. package/es/ucl/Grid/docs/Grid__Area_Based_List_Layout.docs.js +49 -0
  192. package/es/ucl/Grid/docs/Grid__Auto_Flow_Row.docs.js +32 -0
  193. package/es/ucl/Grid/docs/Grid__Basic_Detail_Layout.docs.js +41 -0
  194. package/es/ucl/Grid/docs/Grid__Box_Alignment.docs.js +37 -0
  195. package/es/ucl/Grid/docs/Grid__Line_Based_Detail_Layout.docs.js +41 -0
  196. package/es/ucl/Grid/docs/Grid__Line_Based_List_Layout.docs.js +45 -0
  197. package/es/ucl/Grid/docs/Grid__default.docs.js +61 -0
  198. package/es/ucl/Grid/docs/css/gridDocsAreaBasedDetailLayout.module.css +38 -0
  199. package/es/ucl/Grid/docs/css/gridDocsAreaBasedListLayout.module.css +63 -0
  200. package/es/ucl/Grid/docs/css/gridDocsAutoFlowRow.module.css +23 -0
  201. package/es/ucl/Grid/docs/css/gridDocsBasicDetailLayout.module.css +21 -0
  202. package/es/ucl/Grid/docs/css/gridDocsBoxAlignment.module.css +16 -0
  203. package/es/ucl/Grid/docs/css/gridDocsDefault.module.css +15 -0
  204. package/es/ucl/Grid/docs/css/gridDocsLineBasedDetailLayout.module.css +38 -0
  205. package/es/ucl/Grid/docs/css/gridDocsLineBasedListLayout.module.css +47 -0
  206. package/es/ucl/Grid/docs/css/gridDocsStyle.module.css +30 -0
  207. package/es/ucl/Grid/index.js +5 -0
  208. package/es/ucl/Grid/props/ariaPropTypes.js +6 -0
  209. package/es/ucl/Grid/props/defaultProps.js +8 -0
  210. package/es/ucl/Grid/props/propConstants.js +66 -0
  211. package/es/ucl/Grid/props/propTypes.js +27 -0
  212. package/lib/Accordion/Accordion.js +5 -20
  213. package/lib/Accordion/AccordionItem.js +5 -19
  214. package/lib/Accordion/props/defaultProps.js +16 -0
  215. package/lib/Accordion/props/propTypes.js +42 -0
  216. package/lib/Animation/Animation.js +5 -25
  217. package/lib/Animation/props/defaultProps.js +14 -0
  218. package/lib/Animation/props/propTypes.js +23 -0
  219. package/lib/AppContainer/AppContainer.js +13 -24
  220. package/lib/AppContainer/props/defaultProps.js +15 -0
  221. package/lib/AppContainer/props/propTypes.js +26 -0
  222. package/lib/Avatar/Avatar.js +5 -44
  223. package/lib/Avatar/props/defaultProps.js +20 -0
  224. package/lib/Avatar/props/propTypes.js +33 -0
  225. package/lib/AvatarTeam/AvatarTeam.js +5 -36
  226. package/lib/AvatarTeam/props/defaultProps.js +20 -0
  227. package/lib/AvatarTeam/props/propTypes.js +34 -0
  228. package/lib/Button/Button.js +5 -48
  229. package/lib/Button/props/defaultProps.js +24 -0
  230. package/lib/Button/props/propTypes.js +33 -0
  231. package/lib/Buttongroup/Buttongroup.js +5 -11
  232. package/lib/Buttongroup/props/defaultProps.js +11 -0
  233. package/lib/Buttongroup/props/propTypes.js +18 -0
  234. package/lib/Card/Card.js +13 -60
  235. package/lib/Card/props/defaultProps.js +23 -0
  236. package/lib/Card/props/propTypes.js +57 -0
  237. package/lib/CheckBox/CheckBox.js +7 -60
  238. package/lib/CheckBox/CheckBox.module.css +12 -8
  239. package/lib/CheckBox/props/defaultProps.js +25 -0
  240. package/lib/CheckBox/props/propTypes.js +52 -0
  241. package/lib/DateTime/CalendarView.js +7 -26
  242. package/lib/DateTime/DateTime.js +53 -82
  243. package/lib/DateTime/DateTime.module.css +1 -1
  244. package/lib/DateTime/DateWidget.js +17 -85
  245. package/lib/DateTime/DateWidget.module.css +0 -4
  246. package/lib/DateTime/YearView.js +5 -12
  247. package/lib/DateTime/YearView.module.css +1 -0
  248. package/lib/DateTime/props/defaultProps.js +61 -0
  249. package/lib/DateTime/props/propTypes.js +145 -0
  250. package/lib/DropBox/DropBox.js +6 -72
  251. package/lib/DropBox/props/defaultProps.js +27 -0
  252. package/lib/DropBox/props/propTypes.js +58 -0
  253. package/lib/DropDown/DropDown.js +8 -34
  254. package/lib/DropDown/DropDownHeading.js +5 -19
  255. package/lib/DropDown/DropDownItem.js +5 -18
  256. package/lib/DropDown/DropDownSearch.js +5 -23
  257. package/lib/DropDown/DropDownSeparator.js +2 -4
  258. package/lib/DropDown/props/defaultProps.js +28 -0
  259. package/lib/DropDown/props/propTypes.js +94 -0
  260. package/lib/Label/Label.js +5 -24
  261. package/lib/Label/props/defaultProps.js +17 -0
  262. package/lib/Label/props/propTypes.js +25 -0
  263. package/lib/Layout/Box.js +18 -32
  264. package/lib/Layout/Container.js +18 -29
  265. package/lib/Layout/Layout.module.css +13 -1
  266. package/lib/Layout/docs/Layout__four_Column.docs.js +16 -22
  267. package/lib/Layout/props/defaultProps.js +20 -0
  268. package/lib/Layout/props/propTypes.js +54 -0
  269. package/lib/LightNightMode/Colors.json +496 -397
  270. package/lib/LightNightMode/docs/AlternativeColors.docs.js +23 -1
  271. package/lib/ListItem/ListContainer.js +13 -46
  272. package/lib/ListItem/ListItem.js +7 -52
  273. package/lib/ListItem/ListItem.module.css +18 -19
  274. package/lib/ListItem/ListItemWithAvatar.js +7 -38
  275. package/lib/ListItem/ListItemWithCheckBox.js +7 -42
  276. package/lib/ListItem/ListItemWithIcon.js +7 -49
  277. package/lib/ListItem/ListItemWithRadio.js +7 -43
  278. package/lib/ListItem/props/defaultProps.js +97 -0
  279. package/lib/ListItem/props/propTypes.js +181 -0
  280. package/lib/Modal/Modal.js +5 -9
  281. package/lib/Modal/props/defaultProps.js +10 -0
  282. package/lib/Modal/props/propTypes.js +17 -0
  283. package/lib/MultiSelect/AdvancedGroupMultiSelect.js +118 -172
  284. package/lib/MultiSelect/AdvancedMultiSelect.js +101 -172
  285. package/lib/MultiSelect/EmptyState.js +5 -29
  286. package/lib/MultiSelect/MultiSelect.js +91 -173
  287. package/lib/MultiSelect/MultiSelect.module.css +15 -2
  288. package/lib/MultiSelect/MultiSelectHeader.js +5 -12
  289. package/lib/MultiSelect/MultiSelectWithAvatar.js +83 -152
  290. package/lib/MultiSelect/SelectedOptions.js +5 -19
  291. package/lib/MultiSelect/Suggestions.js +6 -34
  292. package/lib/MultiSelect/props/defaultProps.js +156 -0
  293. package/lib/MultiSelect/props/propTypes.js +378 -0
  294. package/lib/PopOver/PopOver.js +19 -82
  295. package/lib/PopOver/props/defaultProps.js +15 -0
  296. package/lib/PopOver/props/propTypes.js +66 -0
  297. package/lib/Provider/Config.js +3 -1
  298. package/lib/Provider.js +32 -98
  299. package/lib/Radio/Radio.js +5 -46
  300. package/lib/Radio/Radio.module.css +8 -6
  301. package/lib/Radio/props/defaultProps.js +21 -0
  302. package/lib/Radio/props/propTypes.js +43 -0
  303. package/lib/Responsive/CustomResponsive.js +11 -21
  304. package/lib/Responsive/Responsive.js +17 -24
  305. package/lib/Responsive/props/defaultProps.js +23 -0
  306. package/lib/Responsive/props/propTypes.js +39 -0
  307. package/lib/ResponsiveDropBox/ResponsiveDropBox.js +124 -0
  308. package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css +6 -0
  309. package/lib/ResponsiveDropBox/props/defaultProps.js +11 -0
  310. package/lib/ResponsiveDropBox/props/propTypes.js +18 -0
  311. package/lib/Ribbon/Ribbon.js +5 -25
  312. package/lib/Ribbon/props/defaultProps.js +15 -0
  313. package/lib/Ribbon/props/propTypes.js +21 -0
  314. package/lib/RippleEffect/RippleEffect.js +5 -20
  315. package/lib/RippleEffect/RippleEffect.module.css +37 -15
  316. package/lib/RippleEffect/props/defaultProps.js +16 -0
  317. package/lib/RippleEffect/props/propTypes.js +22 -0
  318. package/lib/Select/GroupSelect.js +105 -186
  319. package/lib/Select/Select.js +113 -196
  320. package/lib/Select/Select.module.css +6 -0
  321. package/lib/Select/SelectWithAvatar.js +101 -151
  322. package/lib/Select/SelectWithIcon.js +102 -134
  323. package/lib/Select/props/defaultProps.js +113 -0
  324. package/lib/Select/props/propTypes.js +280 -0
  325. package/lib/Stencils/Stencils.js +5 -17
  326. package/lib/Stencils/props/defaultProps.js +13 -0
  327. package/lib/Stencils/props/propTypes.js +18 -0
  328. package/lib/Switch/Switch.js +5 -37
  329. package/lib/Switch/Switch.module.css +3 -2
  330. package/lib/Switch/props/defaultProps.js +17 -0
  331. package/lib/Switch/props/propTypes.js +38 -0
  332. package/lib/Tab/Tab.js +5 -31
  333. package/lib/Tab/TabContent.js +5 -10
  334. package/lib/Tab/TabContentWrapper.js +5 -12
  335. package/lib/Tab/TabWrapper.js +5 -27
  336. package/lib/Tab/Tabs.js +80 -114
  337. package/lib/Tab/Tabs.module.css +2 -1
  338. package/lib/Tab/props/defaultProps.js +50 -0
  339. package/lib/Tab/props/propTypes.js +117 -0
  340. package/lib/Tag/Tag.js +5 -47
  341. package/lib/Tag/Tag.module.css +6 -2
  342. package/lib/Tag/props/defaultProps.js +20 -0
  343. package/lib/Tag/props/propTypes.js +45 -0
  344. package/lib/TextBox/TextBox.js +5 -70
  345. package/lib/TextBox/props/defaultProps.js +26 -0
  346. package/lib/TextBox/props/propTypes.js +62 -0
  347. package/lib/TextBoxIcon/TextBoxIcon.js +5 -70
  348. package/lib/TextBoxIcon/props/defaultProps.js +28 -0
  349. package/lib/TextBoxIcon/props/propTypes.js +60 -0
  350. package/lib/Textarea/Textarea.js +5 -47
  351. package/lib/Textarea/props/defaultProps.js +23 -0
  352. package/lib/Textarea/props/propTypes.js +42 -0
  353. package/lib/Tooltip/Tooltip.js +65 -20
  354. package/lib/Tooltip/Tooltip.module.css +6 -1
  355. package/lib/Tooltip/docs/Tooltip__default.docs.js +50 -11
  356. package/lib/Tooltip/props/defaultProps.js +11 -0
  357. package/lib/Tooltip/props/propTypes.js +19 -0
  358. package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +5 -23
  359. package/lib/VelocityAnimation/VelocityAnimation/props/defaultProps.js +14 -0
  360. package/lib/VelocityAnimation/VelocityAnimation/props/propTypes.js +23 -0
  361. package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +12 -38
  362. package/lib/VelocityAnimation/VelocityAnimationGroup/props/defaultProps.js +22 -0
  363. package/lib/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js +30 -0
  364. package/lib/common/common.module.css +26 -3
  365. package/lib/common/docStyle.module.css +6 -2
  366. package/lib/css.js +0 -2
  367. package/lib/{MultiSelect → deprecated}/AdvancedMultiSelect.module.css +1 -1
  368. package/lib/deprecated/PortalLayer/PortalLayer.js +5 -16
  369. package/lib/deprecated/PortalLayer/props/defaultProps.js +12 -0
  370. package/lib/deprecated/PortalLayer/props/propTypes.js +22 -0
  371. package/lib/deprecated/advancedMultiSelectVariableJson.js +82 -0
  372. package/lib/index.js +80 -21
  373. package/lib/semantic/Button/Button.js +5 -38
  374. package/lib/semantic/Button/props/defaultProps.js +19 -0
  375. package/lib/semantic/Button/props/propTypes.js +37 -0
  376. package/lib/ucl/Grid/Grid.js +70 -0
  377. package/lib/ucl/Grid/componentNames.js +13 -0
  378. package/lib/ucl/Grid/css/Grid.module.css +217 -0
  379. package/lib/ucl/Grid/css/cssJSLogic.js +44 -0
  380. package/lib/{beta/FocusRing/docs/FocusRing__default.docs.js → ucl/Grid/docs/Grid__Area_Based_Detail_Layout.docs.js} +42 -50
  381. package/lib/ucl/Grid/docs/Grid__Area_Based_List_Layout.docs.js +101 -0
  382. package/lib/ucl/Grid/docs/Grid__Auto_Flow_Row.docs.js +86 -0
  383. package/lib/ucl/Grid/docs/Grid__Basic_Detail_Layout.docs.js +93 -0
  384. package/lib/ucl/Grid/docs/Grid__Box_Alignment.docs.js +91 -0
  385. package/lib/ucl/Grid/docs/Grid__Line_Based_Detail_Layout.docs.js +93 -0
  386. package/lib/ucl/Grid/docs/Grid__Line_Based_List_Layout.docs.js +97 -0
  387. package/lib/ucl/Grid/docs/Grid__default.docs.js +113 -0
  388. package/lib/ucl/Grid/docs/css/gridDocsAreaBasedDetailLayout.module.css +38 -0
  389. package/lib/ucl/Grid/docs/css/gridDocsAreaBasedListLayout.module.css +63 -0
  390. package/lib/ucl/Grid/docs/css/gridDocsAutoFlowRow.module.css +23 -0
  391. package/lib/ucl/Grid/docs/css/gridDocsBasicDetailLayout.module.css +21 -0
  392. package/lib/ucl/Grid/docs/css/gridDocsBoxAlignment.module.css +16 -0
  393. package/lib/ucl/Grid/docs/css/gridDocsDefault.module.css +15 -0
  394. package/lib/ucl/Grid/docs/css/gridDocsLineBasedDetailLayout.module.css +38 -0
  395. package/lib/ucl/Grid/docs/css/gridDocsLineBasedListLayout.module.css +47 -0
  396. package/lib/ucl/Grid/docs/css/gridDocsStyle.module.css +30 -0
  397. package/lib/ucl/Grid/index.js +31 -0
  398. package/lib/ucl/Grid/props/ariaPropTypes.js +23 -0
  399. package/lib/ucl/Grid/props/defaultProps.js +19 -0
  400. package/lib/ucl/Grid/props/propConstants.js +73 -0
  401. package/lib/ucl/Grid/props/propTypes.js +46 -0
  402. package/package.json +6 -3
  403. package/es/MultiSelect/AdvancedMultiSelect.module.css +0 -113
  404. package/es/a11y/FocusScope/FocusScope.js +0 -370
  405. package/es/a11y/FocusScope/docs/FocusScope__default.docs.js +0 -139
  406. package/es/beta/FocusRing/FocusRing.js +0 -281
  407. package/es/beta/FocusRing/FocusRing.module.css +0 -127
  408. package/es/beta/FocusRing/docs/FocusRing__default.docs.js +0 -48
  409. package/lib/a11y/FocusScope/FocusScope.js +0 -443
  410. package/lib/a11y/FocusScope/docs/FocusScope__default.docs.js +0 -191
  411. package/lib/beta/FocusRing/FocusRing.js +0 -338
  412. package/lib/beta/FocusRing/FocusRing.module.css +0 -152
@@ -1,7 +1,8 @@
1
1
  function _extends() { _extends = Object.assign || 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
3
  import React from 'react';
4
- import PropTypes from 'prop-types';
4
+ import { defaultProps } from './props/defaultProps';
5
+ import { propTypes } from './props/propTypes';
5
6
  /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['xmedium', 'medium', 'small', 'default', 'primary', 'secondary'] }] */
6
7
 
7
8
  import style from './TextBox.module.css';
@@ -167,77 +168,8 @@ export default class Textbox extends React.PureComponent {
167
168
  }
168
169
 
169
170
  }
170
- Textbox.defaultProps = {
171
- isDisabled: false,
172
- isReadOnly: false,
173
- maxLength: 250,
174
- needBorder: true,
175
- size: 'medium',
176
- type: 'text',
177
- variant: 'default',
178
- dataId: 'textBox',
179
- needReadOnlyStyle: true,
180
- needAppearance: true,
181
- isClickable: false,
182
- needEffect: true,
183
- autoComplete: true,
184
- borderColor: 'default',
185
- a11y: {},
186
- isFocus: false,
187
- customProps: {}
188
- };
189
- Textbox.propTypes = {
190
- autofocus: PropTypes.bool,
191
- borderColor: PropTypes.oneOf(['transparent', 'default']),
192
- dataId: PropTypes.string,
193
- htmlId: PropTypes.string,
194
- id: PropTypes.string,
195
- inputRef: PropTypes.func,
196
- isClickable: PropTypes.bool,
197
- isDisabled: PropTypes.bool,
198
- isReadOnly: PropTypes.bool,
199
- maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
200
- name: PropTypes.string,
201
- needAppearance: PropTypes.bool,
202
- needBorder: PropTypes.bool,
203
- needEffect: PropTypes.bool,
204
- needReadOnlyStyle: PropTypes.bool,
205
- onBlur: PropTypes.func,
206
- onChange: PropTypes.func,
207
- onClick: PropTypes.func,
208
- onFocus: PropTypes.func,
209
- onKeyDown: PropTypes.func,
210
- onKeyPress: PropTypes.func,
211
- onKeyUp: PropTypes.func,
212
- onMouseDown: PropTypes.func,
213
- placeHolder: PropTypes.string,
214
- size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
215
- type: PropTypes.oneOf(['text', 'password', 'number']),
216
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
217
- variant: PropTypes.oneOf(['primary', 'secondary', 'default', 'light']),
218
- htmlId: PropTypes.string,
219
- customClass: PropTypes.string,
220
- htmlId: PropTypes.string,
221
- a11y: PropTypes.shape({
222
- role: PropTypes.string,
223
- ariaAutocomplete: PropTypes.string,
224
- ariaControls: PropTypes.string,
225
- ariaDescribedby: PropTypes.string,
226
- ariaExpanded: PropTypes.bool,
227
- ariaLabel: PropTypes.string,
228
- autoComplete: PropTypes.bool,
229
- ariaHaspopup: PropTypes.bool,
230
- ariaRequired: PropTypes.bool,
231
- ariaLabelledby: PropTypes.string,
232
- ariaInvalid: PropTypes.bool,
233
- ariaOwns: PropTypes.string,
234
- ariaActivedescendant: PropTypes.string,
235
- ariaReadonly: PropTypes.bool,
236
- ariaMultiselectable: PropTypes.bool
237
- }),
238
- isFocus: PropTypes.bool,
239
- customProps: PropTypes.object
240
- };
171
+ Textbox.defaultProps = defaultProps;
172
+ Textbox.propTypes = propTypes;
241
173
 
242
174
  if (false) {
243
175
  Textbox.docs = {
@@ -41,20 +41,20 @@
41
41
  }
42
42
  .container {
43
43
  composes: basic;
44
- background-color: var(--textbox_bg_color);
45
44
  transition: border var(--zd_transition2) linear 0s;
46
- -webkit-transition: border var(--zd_transition2) linear 0s;
47
45
  -moz-transition: border var(--zd_transition2) linear 0s;
48
46
  width: var(--textbox_width);
49
- padding: var(--textbox_padding);
50
47
  color: var(--textbox_text_color);
51
48
  font-size: var(--textbox_font_size);
52
49
  height: var(--textbox_height);
50
+ line-height: var(--textbox_line_height);
51
+ background-color: var(--textbox_bg_color);
52
+ -webkit-transition: border var(--zd_transition2) linear 0s;
53
+ padding: var(--textbox_padding);
53
54
  border-radius: var(--textbox_border_radius);
54
55
  border-width: var(--textbox_border_width);
55
56
  border-style: var(--textbox_border_style);
56
57
  border-color: var(--textbox_border_color);
57
- line-height: var(--textbox_line_height);
58
58
  }
59
59
  .basic:disabled,
60
60
  .container:disabled,
@@ -82,21 +82,17 @@
82
82
  --textbox_cursor: pointer;
83
83
  }
84
84
  /* Need Border */
85
- .border,
86
- .effect:hover,
87
- .effect:focus {
85
+ .border, .effect:hover, .effect:focus {
88
86
  border-width: var(--textbox_border_width);
89
87
  border-style: var(--textbox_border_style);
90
88
  }
91
- .effect:hover,
92
- .effect:focus {
89
+ .effect:hover, .effect:focus {
93
90
  border-color: var(--textbox_border_color);
94
91
  }
95
92
  .border {
96
93
  --textbox_border_width: 0 0 1px 0;
97
94
  }
98
- .borderColor_transparent,
99
- .borderColor_default {
95
+ .borderColor_transparent, .borderColor_default {
100
96
  border-color: var(--textbox_border_color);
101
97
  }
102
98
  .borderColor_transparent {
@@ -0,0 +1,19 @@
1
+ export const defaultProps = {
2
+ isDisabled: false,
3
+ isReadOnly: false,
4
+ maxLength: 250,
5
+ needBorder: true,
6
+ size: 'medium',
7
+ type: 'text',
8
+ variant: 'default',
9
+ dataId: 'textBox',
10
+ needReadOnlyStyle: true,
11
+ needAppearance: true,
12
+ isClickable: false,
13
+ needEffect: true,
14
+ autoComplete: true,
15
+ borderColor: 'default',
16
+ a11y: {},
17
+ isFocus: false,
18
+ customProps: {}
19
+ };
@@ -0,0 +1,53 @@
1
+ import PropTypes from 'prop-types';
2
+ export const propTypes = {
3
+ autofocus: PropTypes.bool,
4
+ borderColor: PropTypes.oneOf(['transparent', 'default']),
5
+ dataId: PropTypes.string,
6
+ htmlId: PropTypes.string,
7
+ id: PropTypes.string,
8
+ inputRef: PropTypes.func,
9
+ isClickable: PropTypes.bool,
10
+ isDisabled: PropTypes.bool,
11
+ isReadOnly: PropTypes.bool,
12
+ maxLength: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
13
+ name: PropTypes.string,
14
+ needAppearance: PropTypes.bool,
15
+ needBorder: PropTypes.bool,
16
+ needEffect: PropTypes.bool,
17
+ needReadOnlyStyle: PropTypes.bool,
18
+ onBlur: PropTypes.func,
19
+ onChange: PropTypes.func,
20
+ onClick: PropTypes.func,
21
+ onFocus: PropTypes.func,
22
+ onKeyDown: PropTypes.func,
23
+ onKeyPress: PropTypes.func,
24
+ onKeyUp: PropTypes.func,
25
+ onMouseDown: PropTypes.func,
26
+ placeHolder: PropTypes.string,
27
+ size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
28
+ type: PropTypes.oneOf(['text', 'password', 'number']),
29
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
30
+ variant: PropTypes.oneOf(['primary', 'secondary', 'default', 'light']),
31
+ htmlId: PropTypes.string,
32
+ customClass: PropTypes.string,
33
+ htmlId: PropTypes.string,
34
+ a11y: PropTypes.shape({
35
+ role: PropTypes.string,
36
+ ariaAutocomplete: PropTypes.string,
37
+ ariaControls: PropTypes.string,
38
+ ariaDescribedby: PropTypes.string,
39
+ ariaExpanded: PropTypes.bool,
40
+ ariaLabel: PropTypes.string,
41
+ autoComplete: PropTypes.bool,
42
+ ariaHaspopup: PropTypes.bool,
43
+ ariaRequired: PropTypes.bool,
44
+ ariaLabelledby: PropTypes.string,
45
+ ariaInvalid: PropTypes.bool,
46
+ ariaOwns: PropTypes.string,
47
+ ariaActivedescendant: PropTypes.string,
48
+ ariaReadonly: PropTypes.bool,
49
+ ariaMultiselectable: PropTypes.bool
50
+ }),
51
+ isFocus: PropTypes.bool,
52
+ customProps: PropTypes.object
53
+ };
@@ -1,7 +1,8 @@
1
1
  function _extends() { _extends = Object.assign || 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
3
  import React from 'react';
4
- import PropTypes from 'prop-types';
4
+ import { defaultProps } from './props/defaultProps';
5
+ import { propTypes } from './props/propTypes';
5
6
  import TextBox from '../TextBox/TextBox';
6
7
  import { Container, Box } from '../Layout';
7
8
  import Icon from '@zohodesk/icons/lib/Icon';
@@ -156,75 +157,8 @@ export default class TextBoxIcon extends React.Component {
156
157
  }
157
158
 
158
159
  }
159
- TextBoxIcon.defaultProps = {
160
- isDisabled: false,
161
- isReadOnly: false,
162
- iconRotated: false,
163
- maxLength: '250',
164
- needBorder: true,
165
- size: 'medium',
166
- type: 'text',
167
- variant: 'default',
168
- needReadOnlyStyle: true,
169
- isClickable: false,
170
- needEffect: true,
171
- dataId: 'textBoxIcon',
172
- borderColor: 'default',
173
- showClearIcon: false,
174
- i18nKeys: {},
175
- customClass: {},
176
- iconOnHover: false,
177
- isFocus: false,
178
- customProps: {}
179
- };
180
- TextBoxIcon.propTypes = {
181
- borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
182
- children: PropTypes.node,
183
- dataId: PropTypes.string,
184
- htmlId: PropTypes.string,
185
- i18nKeys: PropTypes.shape({
186
- clearText: PropTypes.string
187
- }),
188
- iconRotated: PropTypes.bool,
189
- id: PropTypes.string,
190
- inputRef: PropTypes.func,
191
- isClickable: PropTypes.bool,
192
- isDisabled: PropTypes.bool,
193
- isReadOnly: PropTypes.bool,
194
- maxLength: PropTypes.string,
195
- name: PropTypes.string,
196
- needBorder: PropTypes.bool,
197
- needEffect: PropTypes.bool,
198
- needReadOnlyStyle: PropTypes.bool,
199
- onBlur: PropTypes.func,
200
- onChange: PropTypes.func,
201
- onClear: PropTypes.func,
202
- onClick: PropTypes.func,
203
- onFocus: PropTypes.func,
204
- onKeyDown: PropTypes.func,
205
- onKeyPress: PropTypes.func,
206
- onKeyUp: PropTypes.func,
207
- onMouseDown: PropTypes.func,
208
- placeHolder: PropTypes.string,
209
- showClearIcon: PropTypes.bool,
210
- size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
211
- title: PropTypes.func,
212
- type: PropTypes.oneOf(['text', 'password', 'number']),
213
- value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
214
- variant: PropTypes.oneOf(['primary', 'secondary', 'default']),
215
- customClass: PropTypes.shape({
216
- customTBoxWrap: PropTypes.string,
217
- customTextBox: PropTypes.string,
218
- customTBoxIcon: PropTypes.string,
219
- customTBoxLine: PropTypes.string
220
- }),
221
- iconOnHover: PropTypes.bool,
222
- isFocus: PropTypes.bool,
223
- onClearMouseDown: PropTypes.func,
224
- customProps: PropTypes.shape({
225
- TextBoxProps: PropTypes.object
226
- })
227
- };
160
+ TextBoxIcon.defaultProps = defaultProps;
161
+ TextBoxIcon.propTypes = propTypes;
228
162
 
229
163
  if (false) {
230
164
  TextBoxIcon.docs = {
@@ -14,6 +14,8 @@
14
14
  }
15
15
  .disabled,.readonly {
16
16
  --textboxicon_icon_cursor: not-allowed;
17
+ }
18
+ .disabled, .readonly {
17
19
  cursor: not-allowed;
18
20
  }
19
21
  .icon {
@@ -34,15 +36,20 @@
34
36
  .line {
35
37
  position: absolute;
36
38
  bottom: 0;
37
- left: 0;
38
- right: 0;
39
39
  min-height: 1px;
40
40
  transition: var(--zd_transition2);
41
- transform: perspective(1px);
42
41
  height: var(--textboxicon_line_height);
42
+ transform: perspective(1px);
43
+ }
44
+ [dir=ltr] .line {
45
+ left: 0;
46
+ right: 0;
47
+ }
48
+ [dir=rtl] .line {
49
+ right: 0;
50
+ left: 0;
43
51
  }
44
- .line,
45
- .borderColor_default {
52
+ .line, .borderColor_default {
46
53
  background-color: var(--textboxicon_line_color);
47
54
  }
48
55
  .borderColor_transparent {
@@ -0,0 +1,21 @@
1
+ export const defaultProps = {
2
+ isDisabled: false,
3
+ isReadOnly: false,
4
+ iconRotated: false,
5
+ maxLength: '250',
6
+ needBorder: true,
7
+ size: 'medium',
8
+ type: 'text',
9
+ variant: 'default',
10
+ needReadOnlyStyle: true,
11
+ isClickable: false,
12
+ needEffect: true,
13
+ dataId: 'textBoxIcon',
14
+ borderColor: 'default',
15
+ showClearIcon: false,
16
+ i18nKeys: {},
17
+ customClass: {},
18
+ iconOnHover: false,
19
+ isFocus: false,
20
+ customProps: {}
21
+ };
@@ -0,0 +1,49 @@
1
+ import PropTypes from 'prop-types';
2
+ export const propTypes = {
3
+ borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
4
+ children: PropTypes.node,
5
+ dataId: PropTypes.string,
6
+ htmlId: PropTypes.string,
7
+ i18nKeys: PropTypes.shape({
8
+ clearText: PropTypes.string
9
+ }),
10
+ iconRotated: PropTypes.bool,
11
+ id: PropTypes.string,
12
+ inputRef: PropTypes.func,
13
+ isClickable: PropTypes.bool,
14
+ isDisabled: PropTypes.bool,
15
+ isReadOnly: PropTypes.bool,
16
+ maxLength: PropTypes.string,
17
+ name: PropTypes.string,
18
+ needBorder: PropTypes.bool,
19
+ needEffect: PropTypes.bool,
20
+ needReadOnlyStyle: PropTypes.bool,
21
+ onBlur: PropTypes.func,
22
+ onChange: PropTypes.func,
23
+ onClear: PropTypes.func,
24
+ onClick: PropTypes.func,
25
+ onFocus: PropTypes.func,
26
+ onKeyDown: PropTypes.func,
27
+ onKeyPress: PropTypes.func,
28
+ onKeyUp: PropTypes.func,
29
+ onMouseDown: PropTypes.func,
30
+ placeHolder: PropTypes.string,
31
+ showClearIcon: PropTypes.bool,
32
+ size: PropTypes.oneOf(['small', 'xsmall', 'medium', 'xmedium']),
33
+ title: PropTypes.func,
34
+ type: PropTypes.oneOf(['text', 'password', 'number']),
35
+ value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
36
+ variant: PropTypes.oneOf(['primary', 'secondary', 'default']),
37
+ customClass: PropTypes.shape({
38
+ customTBoxWrap: PropTypes.string,
39
+ customTextBox: PropTypes.string,
40
+ customTBoxIcon: PropTypes.string,
41
+ customTBoxLine: PropTypes.string
42
+ }),
43
+ iconOnHover: PropTypes.bool,
44
+ isFocus: PropTypes.bool,
45
+ onClearMouseDown: PropTypes.func,
46
+ customProps: PropTypes.shape({
47
+ TextBoxProps: PropTypes.object
48
+ })
49
+ };
@@ -1,7 +1,8 @@
1
1
  function _extends() { _extends = Object.assign || 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
3
  import React from 'react';
4
- import PropTypes from 'prop-types';
4
+ import { defaultProps } from './props/defaultProps';
5
+ import { propTypes } from './props/propTypes';
5
6
  /* eslint css-modules/no-unused-class: [2, { markAsUsed: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */
6
7
 
7
8
  import style from './Textarea.module.css';
@@ -104,52 +105,8 @@ export default class Textarea extends React.Component {
104
105
  }
105
106
 
106
107
  }
107
- Textarea.defaultProps = {
108
- isDisabled: false,
109
- isReadOnly: false,
110
- dataId: 'TextareaComp',
111
- needBorder: true,
112
- resize: 'none',
113
- size: 'small',
114
- variant: 'default',
115
- needAppearance: true,
116
- needReadOnlyStyle: true,
117
- borderColor: 'default',
118
- needEffect: true,
119
- autoFocus: false,
120
- customClass: '',
121
- a11y: {}
122
- };
123
- Textarea.propTypes = {
124
- animated: PropTypes.bool,
125
- autoFocus: PropTypes.bool,
126
- borderColor: PropTypes.oneOf(['transparent', 'default']),
127
- className: PropTypes.string,
128
- dataId: PropTypes.string,
129
- getRef: PropTypes.func,
130
- htmlId: PropTypes.string,
131
- isDisabled: PropTypes.bool,
132
- isReadOnly: PropTypes.bool,
133
- maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
134
- needAppearance: PropTypes.bool,
135
- needBorder: PropTypes.bool,
136
- needEffect: PropTypes.bool,
137
- needReadOnlyStyle: PropTypes.bool,
138
- onBlur: PropTypes.func,
139
- onChange: PropTypes.func,
140
- onFocus: PropTypes.func,
141
- onKeyDown: PropTypes.func,
142
- placeHolder: PropTypes.string,
143
- resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
144
- size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
145
- text: PropTypes.string,
146
- variant: PropTypes.oneOf(['default', 'primary']),
147
- customClass: PropTypes.string,
148
- a11y: PropTypes.shape({
149
- ariaLabel: PropTypes.string,
150
- ariaLabelledby: PropTypes.string
151
- })
152
- };
108
+ Textarea.defaultProps = defaultProps;
109
+ Textarea.propTypes = propTypes;
153
110
 
154
111
  if (false) {
155
112
  Textarea.docs = {
@@ -19,11 +19,10 @@
19
19
  appearance: none;
20
20
  outline: 0;
21
21
  letter-spacing: 0.1px;
22
- cursor: var(--textarea_cursor);
23
22
  color: var(--textarea_text_color);
23
+ cursor: var(--textarea_cursor);
24
24
  }
25
- .basic,
26
- .noBorder {
25
+ .basic, .noBorder {
27
26
  border-width: var(--textarea_border_width);
28
27
  }
29
28
  .basic::placeholder {
@@ -61,20 +60,20 @@
61
60
  composes: basic;
62
61
  transition: border var(--zd_transition2) linear 0s,
63
62
  height var(--zd_transition2) linear 0s;
64
- -webkit-transition: border var(--zd_transition2) linear 0s,
65
- height var(--zd_transition2) linear 0s;
66
63
  -moz-transition: border var(--zd_transition2) linear 0s,
67
64
  height var(--zd_transition2) linear 0s;
68
65
  width: 100%;
69
66
  max-width: 100%;
70
67
  min-width: 100px;
71
- border-style: solid;
72
68
  font-size: var(--textarea_font_size);
73
69
  line-height: var(--textarea_line_height);
70
+ height: var(--textarea_height);
71
+ -webkit-transition: border var(--zd_transition2) linear 0s,
72
+ height var(--zd_transition2) linear 0s;
73
+ border-style: solid;
74
74
  background-color: var(--zdt_textarea_default_bg);
75
75
  border-color: var(--textarea_border_color);
76
76
  padding: var(--textarea_padding);
77
- height: var(--textarea_height);
78
77
  }
79
78
  .needBorder {
80
79
  --textarea_border_width: 0 0 1px 0;
@@ -0,0 +1,16 @@
1
+ export const defaultProps = {
2
+ isDisabled: false,
3
+ isReadOnly: false,
4
+ dataId: 'TextareaComp',
5
+ needBorder: true,
6
+ resize: 'none',
7
+ size: 'small',
8
+ variant: 'default',
9
+ needAppearance: true,
10
+ needReadOnlyStyle: true,
11
+ borderColor: 'default',
12
+ needEffect: true,
13
+ autoFocus: false,
14
+ customClass: '',
15
+ a11y: {}
16
+ };
@@ -0,0 +1,31 @@
1
+ import PropTypes from 'prop-types';
2
+ export const propTypes = {
3
+ animated: PropTypes.bool,
4
+ autoFocus: PropTypes.bool,
5
+ borderColor: PropTypes.oneOf(['transparent', 'default']),
6
+ className: PropTypes.string,
7
+ dataId: PropTypes.string,
8
+ getRef: PropTypes.func,
9
+ htmlId: PropTypes.string,
10
+ isDisabled: PropTypes.bool,
11
+ isReadOnly: PropTypes.bool,
12
+ maxLength: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
13
+ needAppearance: PropTypes.bool,
14
+ needBorder: PropTypes.bool,
15
+ needEffect: PropTypes.bool,
16
+ needReadOnlyStyle: PropTypes.bool,
17
+ onBlur: PropTypes.func,
18
+ onChange: PropTypes.func,
19
+ onFocus: PropTypes.func,
20
+ onKeyDown: PropTypes.func,
21
+ placeHolder: PropTypes.string,
22
+ resize: PropTypes.oneOf(['horizontal', 'vertical', 'both', 'none']),
23
+ size: PropTypes.oneOf(['xsmall', 'small', 'xmedium', 'medium', 'large']),
24
+ text: PropTypes.string,
25
+ variant: PropTypes.oneOf(['default', 'primary']),
26
+ customClass: PropTypes.string,
27
+ a11y: PropTypes.shape({
28
+ ariaLabel: PropTypes.string,
29
+ ariaLabelledby: PropTypes.string
30
+ })
31
+ };
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
- import PropTypes from 'prop-types';
2
+ import { defaultProps } from './props/defaultProps';
3
+ import { propTypes } from './props/propTypes';
3
4
  import { getLibraryConfig } from '../Provider/Config';
4
5
  import style from './Tooltip.module.css';
5
6
  import ResizeObserver from '../Responsive/ResizeObserver';
@@ -502,17 +503,8 @@ export default class Tooltip extends React.Component {
502
503
  }
503
504
 
504
505
  }
505
- Tooltip.propTypes = {
506
- dataId: PropTypes.string,
507
- isHtml: PropTypes.string,
508
- isPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
509
- title: PropTypes.string,
510
- customClass: PropTypes.string
511
- };
512
- Tooltip.defaultProps = {
513
- dataId: 'toolTip',
514
- customClass: ''
515
- };
506
+ Tooltip.propTypes = propTypes;
507
+ Tooltip.defaultProps = defaultProps;
516
508
 
517
509
  if (false) {
518
510
  Tooltip.docs = {
@@ -1,25 +1,28 @@
1
1
  .tooltiptext {
2
2
  position: fixed;
3
3
  z-index: 9999999; /*Hook for editor alert*/
4
- animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
5
4
  pointer-events: none;
6
5
  box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
7
6
  border-radius: var(--zd_size4);
7
+ }[dir=ltr] .tooltiptext {
8
+ animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
9
+ }[dir=rtl] .tooltiptext {
10
+ animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
8
11
  }
9
12
  .tooltipcont {
10
- background-color: var(--zdt_tooltip_default_bg);
11
13
  color: var(--zdt_tooltip_default_text);
12
- padding: 0 var(--zd_size10);
13
14
  font-size: var(--zd_font_size13);
14
15
  font-family: var(--zd_semibold);
15
16
  word-break: break-word;
16
- border-style: solid;
17
- border-color: transparent;
18
- border-radius: var(--zd_size4);
19
17
  max-width: 420px;
20
18
  line-height: var(--zd_size20);
21
19
  min-height: var(--zd_size24);
22
20
  overflow: hidden;
21
+ background-color: var(--zdt_tooltip_default_bg);
22
+ padding: 0 var(--zd_size10);
23
+ border-style: solid;
24
+ border-color: transparent;
25
+ border-radius: var(--zd_size4);
23
26
  }
24
27
  .tooltipWrapCont {
25
28
  white-space: pre-wrap;
@@ -27,7 +30,6 @@
27
30
  .tooltipNormalCont {
28
31
  white-space: normal;
29
32
  }
30
- /*rtl:begin:ignore*/
31
33
  .tooltiparrow {
32
34
  content: '';
33
35
  position: absolute;
@@ -73,7 +75,6 @@
73
75
  .arrowRight {
74
76
  transform: rotate(135deg) translateY(50%);
75
77
  }
76
- /*rtl:end:ignore*/
77
78
  @keyframes tooltip-grow {
78
79
  from {
79
80
  opacity: 0;
@@ -0,0 +1,4 @@
1
+ export const defaultProps = {
2
+ dataId: 'toolTip',
3
+ customClass: ''
4
+ };
@@ -0,0 +1,8 @@
1
+ import PropTypes from 'prop-types';
2
+ export const propTypes = {
3
+ dataId: PropTypes.string,
4
+ isHtml: PropTypes.string,
5
+ isPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
6
+ title: PropTypes.string,
7
+ customClass: PropTypes.string
8
+ };