@neo4j-ndl/react 4.18.12 → 4.19.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (254) hide show
  1. package/lib/LICENSES.txt +54 -0
  2. package/lib/NOTICE.txt +8 -0
  3. package/lib/cjs/_common/use-semi-controlled-state.js +6 -1
  4. package/lib/cjs/_common/use-semi-controlled-state.js.map +1 -1
  5. package/lib/cjs/combobox/Combobox.js +1031 -0
  6. package/lib/cjs/combobox/Combobox.js.map +1 -0
  7. package/lib/cjs/combobox/combobox-types.js +23 -0
  8. package/lib/cjs/combobox/combobox-types.js.map +1 -0
  9. package/lib/cjs/combobox/combobox-utils.js +129 -0
  10. package/lib/cjs/combobox/combobox-utils.js.map +1 -0
  11. package/lib/cjs/combobox/index.js +26 -0
  12. package/lib/cjs/combobox/index.js.map +1 -0
  13. package/lib/cjs/combobox/stories/combobox-action-on-select.story.js +82 -0
  14. package/lib/cjs/combobox/stories/combobox-action-on-select.story.js.map +1 -0
  15. package/lib/cjs/combobox/stories/combobox-actions.story.js +78 -0
  16. package/lib/cjs/combobox/stories/combobox-actions.story.js.map +1 -0
  17. package/lib/cjs/combobox/stories/combobox-async.story.js +75 -0
  18. package/lib/cjs/combobox/stories/combobox-async.story.js.map +1 -0
  19. package/lib/cjs/combobox/stories/combobox-clean.story.js +38 -0
  20. package/lib/cjs/combobox/stories/combobox-clean.story.js.map +1 -0
  21. package/lib/cjs/combobox/stories/combobox-creatable.story.js +41 -0
  22. package/lib/cjs/combobox/stories/combobox-creatable.story.js.map +1 -0
  23. package/lib/cjs/combobox/stories/combobox-custom-multi.story.js +45 -0
  24. package/lib/cjs/combobox/stories/combobox-custom-multi.story.js.map +1 -0
  25. package/lib/cjs/combobox/stories/combobox-custom-single.story.js +44 -0
  26. package/lib/cjs/combobox/stories/combobox-custom-single.story.js.map +1 -0
  27. package/lib/cjs/combobox/stories/combobox-custom-trigger.story.js +60 -0
  28. package/lib/cjs/combobox/stories/combobox-custom-trigger.story.js.map +1 -0
  29. package/lib/cjs/combobox/stories/combobox-default.story.js +42 -0
  30. package/lib/cjs/combobox/stories/combobox-default.story.js.map +1 -0
  31. package/lib/cjs/combobox/stories/combobox-descriptions.story.js +45 -0
  32. package/lib/cjs/combobox/stories/combobox-descriptions.story.js.map +1 -0
  33. package/lib/cjs/combobox/stories/combobox-disabled.story.js +34 -0
  34. package/lib/cjs/combobox/stories/combobox-disabled.story.js.map +1 -0
  35. package/lib/cjs/combobox/stories/combobox-fluid.story.js +34 -0
  36. package/lib/cjs/combobox/stories/combobox-fluid.story.js.map +1 -0
  37. package/lib/cjs/combobox/stories/combobox-groups.story.js +49 -0
  38. package/lib/cjs/combobox/stories/combobox-groups.story.js.map +1 -0
  39. package/lib/cjs/combobox/stories/combobox-hidden-label.story.js +33 -0
  40. package/lib/cjs/combobox/stories/combobox-hidden-label.story.js.map +1 -0
  41. package/lib/cjs/combobox/stories/combobox-icons.story.js +46 -0
  42. package/lib/cjs/combobox/stories/combobox-icons.story.js.map +1 -0
  43. package/lib/cjs/combobox/stories/combobox-in-dialog.story.js +40 -0
  44. package/lib/cjs/combobox/stories/combobox-in-dialog.story.js.map +1 -0
  45. package/lib/cjs/combobox/stories/combobox-in-popover-dialog.story.js +40 -0
  46. package/lib/cjs/combobox/stories/combobox-in-popover-dialog.story.js.map +1 -0
  47. package/lib/cjs/combobox/stories/combobox-in-popover.story.js +36 -0
  48. package/lib/cjs/combobox/stories/combobox-in-popover.story.js.map +1 -0
  49. package/lib/cjs/combobox/stories/combobox-large-data-set.story.js +36 -0
  50. package/lib/cjs/combobox/stories/combobox-large-data-set.story.js.map +1 -0
  51. package/lib/cjs/combobox/stories/combobox-max-rows.story.js +42 -0
  52. package/lib/cjs/combobox/stories/combobox-max-rows.story.js.map +1 -0
  53. package/lib/cjs/combobox/stories/combobox-multi.story.js +45 -0
  54. package/lib/cjs/combobox/stories/combobox-multi.story.js.map +1 -0
  55. package/lib/cjs/combobox/stories/combobox-native-form.story.js +49 -0
  56. package/lib/cjs/combobox/stories/combobox-native-form.story.js.map +1 -0
  57. package/lib/cjs/combobox/stories/combobox-select-only.story.js +38 -0
  58. package/lib/cjs/combobox/stories/combobox-select-only.story.js.map +1 -0
  59. package/lib/cjs/combobox/stories/combobox-sizes.story.js +33 -0
  60. package/lib/cjs/combobox/stories/combobox-sizes.story.js.map +1 -0
  61. package/lib/cjs/combobox/stories/combobox-unlimited-rows.story.js +42 -0
  62. package/lib/cjs/combobox/stories/combobox-unlimited-rows.story.js.map +1 -0
  63. package/lib/cjs/combobox/stories/combobox-validation.story.js +33 -0
  64. package/lib/cjs/combobox/stories/combobox-validation.story.js.map +1 -0
  65. package/lib/cjs/combobox/stories/index.js +133 -0
  66. package/lib/cjs/combobox/stories/index.js.map +1 -0
  67. package/lib/cjs/combobox/use-combobox-multi-value-overflow.js +173 -0
  68. package/lib/cjs/combobox/use-combobox-multi-value-overflow.js.map +1 -0
  69. package/lib/cjs/combobox/use-combobox-popover.js +80 -0
  70. package/lib/cjs/combobox/use-combobox-popover.js.map +1 -0
  71. package/lib/cjs/date-picker/DatePicker.js.map +1 -1
  72. package/lib/cjs/dismissible-tag/DismissibleTag.js +1 -1
  73. package/lib/cjs/dismissible-tag/DismissibleTag.js.map +1 -1
  74. package/lib/cjs/index.js +1 -0
  75. package/lib/cjs/index.js.map +1 -1
  76. package/lib/cjs/next/tree-view/TreeView.js +1 -1
  77. package/lib/cjs/next/tree-view/TreeView.js.map +1 -1
  78. package/lib/cjs/select/Select.js +3 -0
  79. package/lib/cjs/select/Select.js.map +1 -1
  80. package/lib/cjs/text-area/TextArea.js.map +1 -1
  81. package/lib/cjs/text-input/TextInput.js.map +1 -1
  82. package/lib/cjs/tooltip/Tooltip.js.map +1 -1
  83. package/lib/cjs/tooltip/stories/tooltip-follow-cursor.story.js +1 -1
  84. package/lib/cjs/tooltip/stories/tooltip-follow-cursor.story.js.map +1 -1
  85. package/lib/cjs/tooltip/use-tooltip.js +37 -5
  86. package/lib/cjs/tooltip/use-tooltip.js.map +1 -1
  87. package/lib/esm/_common/use-semi-controlled-state.js +6 -1
  88. package/lib/esm/_common/use-semi-controlled-state.js.map +1 -1
  89. package/lib/esm/combobox/Combobox.js +1024 -0
  90. package/lib/esm/combobox/Combobox.js.map +1 -0
  91. package/lib/esm/combobox/combobox-types.js +22 -0
  92. package/lib/esm/combobox/combobox-types.js.map +1 -0
  93. package/lib/esm/combobox/combobox-utils.js +112 -0
  94. package/lib/esm/combobox/combobox-utils.js.map +1 -0
  95. package/lib/esm/combobox/index.js +22 -0
  96. package/lib/esm/combobox/index.js.map +1 -0
  97. package/lib/esm/combobox/stories/combobox-action-on-select.story.js +80 -0
  98. package/lib/esm/combobox/stories/combobox-action-on-select.story.js.map +1 -0
  99. package/lib/esm/combobox/stories/combobox-actions.story.js +76 -0
  100. package/lib/esm/combobox/stories/combobox-actions.story.js.map +1 -0
  101. package/lib/esm/combobox/stories/combobox-async.story.js +73 -0
  102. package/lib/esm/combobox/stories/combobox-async.story.js.map +1 -0
  103. package/lib/esm/combobox/stories/combobox-clean.story.js +36 -0
  104. package/lib/esm/combobox/stories/combobox-clean.story.js.map +1 -0
  105. package/lib/esm/combobox/stories/combobox-creatable.story.js +39 -0
  106. package/lib/esm/combobox/stories/combobox-creatable.story.js.map +1 -0
  107. package/lib/esm/combobox/stories/combobox-custom-multi.story.js +43 -0
  108. package/lib/esm/combobox/stories/combobox-custom-multi.story.js.map +1 -0
  109. package/lib/esm/combobox/stories/combobox-custom-single.story.js +42 -0
  110. package/lib/esm/combobox/stories/combobox-custom-single.story.js.map +1 -0
  111. package/lib/esm/combobox/stories/combobox-custom-trigger.story.js +58 -0
  112. package/lib/esm/combobox/stories/combobox-custom-trigger.story.js.map +1 -0
  113. package/lib/esm/combobox/stories/combobox-default.story.js +40 -0
  114. package/lib/esm/combobox/stories/combobox-default.story.js.map +1 -0
  115. package/lib/esm/combobox/stories/combobox-descriptions.story.js +43 -0
  116. package/lib/esm/combobox/stories/combobox-descriptions.story.js.map +1 -0
  117. package/lib/esm/combobox/stories/combobox-disabled.story.js +32 -0
  118. package/lib/esm/combobox/stories/combobox-disabled.story.js.map +1 -0
  119. package/lib/esm/combobox/stories/combobox-fluid.story.js +32 -0
  120. package/lib/esm/combobox/stories/combobox-fluid.story.js.map +1 -0
  121. package/lib/esm/combobox/stories/combobox-groups.story.js +47 -0
  122. package/lib/esm/combobox/stories/combobox-groups.story.js.map +1 -0
  123. package/lib/esm/combobox/stories/combobox-hidden-label.story.js +31 -0
  124. package/lib/esm/combobox/stories/combobox-hidden-label.story.js.map +1 -0
  125. package/lib/esm/combobox/stories/combobox-icons.story.js +44 -0
  126. package/lib/esm/combobox/stories/combobox-icons.story.js.map +1 -0
  127. package/lib/esm/combobox/stories/combobox-in-dialog.story.js +38 -0
  128. package/lib/esm/combobox/stories/combobox-in-dialog.story.js.map +1 -0
  129. package/lib/esm/combobox/stories/combobox-in-popover-dialog.story.js +38 -0
  130. package/lib/esm/combobox/stories/combobox-in-popover-dialog.story.js.map +1 -0
  131. package/lib/esm/combobox/stories/combobox-in-popover.story.js +34 -0
  132. package/lib/esm/combobox/stories/combobox-in-popover.story.js.map +1 -0
  133. package/lib/esm/combobox/stories/combobox-large-data-set.story.js +34 -0
  134. package/lib/esm/combobox/stories/combobox-large-data-set.story.js.map +1 -0
  135. package/lib/esm/combobox/stories/combobox-max-rows.story.js +40 -0
  136. package/lib/esm/combobox/stories/combobox-max-rows.story.js.map +1 -0
  137. package/lib/esm/combobox/stories/combobox-multi.story.js +43 -0
  138. package/lib/esm/combobox/stories/combobox-multi.story.js.map +1 -0
  139. package/lib/esm/combobox/stories/combobox-native-form.story.js +47 -0
  140. package/lib/esm/combobox/stories/combobox-native-form.story.js.map +1 -0
  141. package/lib/esm/combobox/stories/combobox-select-only.story.js +36 -0
  142. package/lib/esm/combobox/stories/combobox-select-only.story.js.map +1 -0
  143. package/lib/esm/combobox/stories/combobox-sizes.story.js +31 -0
  144. package/lib/esm/combobox/stories/combobox-sizes.story.js.map +1 -0
  145. package/lib/esm/combobox/stories/combobox-unlimited-rows.story.js +40 -0
  146. package/lib/esm/combobox/stories/combobox-unlimited-rows.story.js.map +1 -0
  147. package/lib/esm/combobox/stories/combobox-validation.story.js +31 -0
  148. package/lib/esm/combobox/stories/combobox-validation.story.js.map +1 -0
  149. package/lib/esm/combobox/stories/index.js +100 -0
  150. package/lib/esm/combobox/stories/index.js.map +1 -0
  151. package/lib/esm/combobox/use-combobox-multi-value-overflow.js +166 -0
  152. package/lib/esm/combobox/use-combobox-multi-value-overflow.js.map +1 -0
  153. package/lib/esm/combobox/use-combobox-popover.js +77 -0
  154. package/lib/esm/combobox/use-combobox-popover.js.map +1 -0
  155. package/lib/esm/date-picker/DatePicker.js.map +1 -1
  156. package/lib/esm/dismissible-tag/DismissibleTag.js +1 -1
  157. package/lib/esm/dismissible-tag/DismissibleTag.js.map +1 -1
  158. package/lib/esm/index.js +1 -0
  159. package/lib/esm/index.js.map +1 -1
  160. package/lib/esm/next/tree-view/TreeView.js +1 -1
  161. package/lib/esm/next/tree-view/TreeView.js.map +1 -1
  162. package/lib/esm/select/Select.js +3 -0
  163. package/lib/esm/select/Select.js.map +1 -1
  164. package/lib/esm/text-area/TextArea.js.map +1 -1
  165. package/lib/esm/text-input/TextInput.js.map +1 -1
  166. package/lib/esm/tooltip/Tooltip.js.map +1 -1
  167. package/lib/esm/tooltip/stories/tooltip-follow-cursor.story.js +1 -1
  168. package/lib/esm/tooltip/stories/tooltip-follow-cursor.story.js.map +1 -1
  169. package/lib/esm/tooltip/use-tooltip.js +38 -6
  170. package/lib/esm/tooltip/use-tooltip.js.map +1 -1
  171. package/lib/types/_common/use-semi-controlled-state.d.ts +5 -1
  172. package/lib/types/_common/use-semi-controlled-state.d.ts.map +1 -1
  173. package/lib/types/combobox/Combobox.d.ts +24 -0
  174. package/lib/types/combobox/Combobox.d.ts.map +1 -0
  175. package/lib/types/combobox/combobox-types.d.ts +419 -0
  176. package/lib/types/combobox/combobox-types.d.ts.map +1 -0
  177. package/lib/types/combobox/combobox-utils.d.ts +81 -0
  178. package/lib/types/combobox/combobox-utils.d.ts.map +1 -0
  179. package/lib/types/combobox/index.d.ts +23 -0
  180. package/lib/types/combobox/index.d.ts.map +1 -0
  181. package/lib/types/combobox/stories/combobox-action-on-select.story.d.ts +24 -0
  182. package/lib/types/combobox/stories/combobox-action-on-select.story.d.ts.map +1 -0
  183. package/lib/types/combobox/stories/combobox-actions.story.d.ts +24 -0
  184. package/lib/types/combobox/stories/combobox-actions.story.d.ts.map +1 -0
  185. package/lib/types/combobox/stories/combobox-async.story.d.ts +24 -0
  186. package/lib/types/combobox/stories/combobox-async.story.d.ts.map +1 -0
  187. package/lib/types/combobox/stories/combobox-clean.story.d.ts +24 -0
  188. package/lib/types/combobox/stories/combobox-clean.story.d.ts.map +1 -0
  189. package/lib/types/combobox/stories/combobox-creatable.story.d.ts +24 -0
  190. package/lib/types/combobox/stories/combobox-creatable.story.d.ts.map +1 -0
  191. package/lib/types/combobox/stories/combobox-custom-multi.story.d.ts +24 -0
  192. package/lib/types/combobox/stories/combobox-custom-multi.story.d.ts.map +1 -0
  193. package/lib/types/combobox/stories/combobox-custom-single.story.d.ts +24 -0
  194. package/lib/types/combobox/stories/combobox-custom-single.story.d.ts.map +1 -0
  195. package/lib/types/combobox/stories/combobox-custom-trigger.story.d.ts +24 -0
  196. package/lib/types/combobox/stories/combobox-custom-trigger.story.d.ts.map +1 -0
  197. package/lib/types/combobox/stories/combobox-default.story.d.ts +24 -0
  198. package/lib/types/combobox/stories/combobox-default.story.d.ts.map +1 -0
  199. package/lib/types/combobox/stories/combobox-descriptions.story.d.ts +24 -0
  200. package/lib/types/combobox/stories/combobox-descriptions.story.d.ts.map +1 -0
  201. package/lib/types/combobox/stories/combobox-disabled.story.d.ts +24 -0
  202. package/lib/types/combobox/stories/combobox-disabled.story.d.ts.map +1 -0
  203. package/lib/types/combobox/stories/combobox-fluid.story.d.ts +24 -0
  204. package/lib/types/combobox/stories/combobox-fluid.story.d.ts.map +1 -0
  205. package/lib/types/combobox/stories/combobox-groups.story.d.ts +24 -0
  206. package/lib/types/combobox/stories/combobox-groups.story.d.ts.map +1 -0
  207. package/lib/types/combobox/stories/combobox-hidden-label.story.d.ts +24 -0
  208. package/lib/types/combobox/stories/combobox-hidden-label.story.d.ts.map +1 -0
  209. package/lib/types/combobox/stories/combobox-icons.story.d.ts +24 -0
  210. package/lib/types/combobox/stories/combobox-icons.story.d.ts.map +1 -0
  211. package/lib/types/combobox/stories/combobox-in-dialog.story.d.ts +24 -0
  212. package/lib/types/combobox/stories/combobox-in-dialog.story.d.ts.map +1 -0
  213. package/lib/types/combobox/stories/combobox-in-popover-dialog.story.d.ts +24 -0
  214. package/lib/types/combobox/stories/combobox-in-popover-dialog.story.d.ts.map +1 -0
  215. package/lib/types/combobox/stories/combobox-in-popover.story.d.ts +24 -0
  216. package/lib/types/combobox/stories/combobox-in-popover.story.d.ts.map +1 -0
  217. package/lib/types/combobox/stories/combobox-large-data-set.story.d.ts +24 -0
  218. package/lib/types/combobox/stories/combobox-large-data-set.story.d.ts.map +1 -0
  219. package/lib/types/combobox/stories/combobox-max-rows.story.d.ts +24 -0
  220. package/lib/types/combobox/stories/combobox-max-rows.story.d.ts.map +1 -0
  221. package/lib/types/combobox/stories/combobox-multi.story.d.ts +24 -0
  222. package/lib/types/combobox/stories/combobox-multi.story.d.ts.map +1 -0
  223. package/lib/types/combobox/stories/combobox-native-form.story.d.ts +24 -0
  224. package/lib/types/combobox/stories/combobox-native-form.story.d.ts.map +1 -0
  225. package/lib/types/combobox/stories/combobox-select-only.story.d.ts +24 -0
  226. package/lib/types/combobox/stories/combobox-select-only.story.d.ts.map +1 -0
  227. package/lib/types/combobox/stories/combobox-sizes.story.d.ts +24 -0
  228. package/lib/types/combobox/stories/combobox-sizes.story.d.ts.map +1 -0
  229. package/lib/types/combobox/stories/combobox-unlimited-rows.story.d.ts +24 -0
  230. package/lib/types/combobox/stories/combobox-unlimited-rows.story.d.ts.map +1 -0
  231. package/lib/types/combobox/stories/combobox-validation.story.d.ts +24 -0
  232. package/lib/types/combobox/stories/combobox-validation.story.d.ts.map +1 -0
  233. package/lib/types/combobox/stories/index.d.ts +73 -0
  234. package/lib/types/combobox/stories/index.d.ts.map +1 -0
  235. package/lib/types/combobox/use-combobox-multi-value-overflow.d.ts +76 -0
  236. package/lib/types/combobox/use-combobox-multi-value-overflow.d.ts.map +1 -0
  237. package/lib/types/combobox/use-combobox-popover.d.ts +66 -0
  238. package/lib/types/combobox/use-combobox-popover.d.ts.map +1 -0
  239. package/lib/types/date-picker/DatePicker.d.ts.map +1 -1
  240. package/lib/types/dismissible-tag/DismissibleTag.d.ts.map +1 -1
  241. package/lib/types/index.d.ts +1 -0
  242. package/lib/types/index.d.ts.map +1 -1
  243. package/lib/types/select/Select.d.ts +3 -0
  244. package/lib/types/select/Select.d.ts.map +1 -1
  245. package/lib/types/text-input/TextInput.d.ts.map +1 -1
  246. package/lib/types/tooltip/Tooltip.d.ts +6 -2
  247. package/lib/types/tooltip/Tooltip.d.ts.map +1 -1
  248. package/lib/types/tooltip/stories/tooltip-follow-cursor.story.d.ts.map +1 -1
  249. package/lib/types/tooltip/use-tooltip.d.ts +6 -2
  250. package/lib/types/tooltip/use-tooltip.d.ts.map +1 -1
  251. package/package.json +10 -4
  252. package/skills/ndl-react/SKILL.md +20 -0
  253. package/skills/ndl-react/components/combobox.md +1487 -0
  254. package/skills/ndl-react/components/tooltip.md +39 -7
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/text-area/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { type ReactNode, useId, useMemo } from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport {\n type CommonProps,\n type HtmlAttributes,\n type TooltipObjectProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';\nimport { Tooltip } from '../tooltip';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\n/**\n * @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n */\ntype TextAreaProps = {\n /** The label displayed above the textarea */\n label?: ReactNode;\n\n /** Whether the textarea should take the full available width */\n isFluid?: boolean;\n\n /** Assistive text displayed below the textarea */\n helpText?: string | ReactNode;\n\n /** Error message displayed below the textarea. When provided, it overrides `helpText` and shows an error icon */\n errorText?: string | ReactNode;\n\n /** Size of the textarea */\n size?: 'small' | 'medium' | 'large';\n\n // TODO v5: use isRequired and showRequiredOrOptionalLabel like in TextInput\n /** Whether to display the Optional label next to the field label */\n isOptional?: boolean;\n\n /** Text displayed in the information tooltip shown next to the label */\n moreInformationText?: React.ReactNode;\n\n /** Props for the Tooltip component used by the information icon */\n tooltipProps?: TooltipObjectProps;\n\n /** Whether the textarea is disabled */\n isDisabled?: boolean;\n\n /** Additional HTML attributes passed to the textarea element */\n htmlAttributes?: HtmlAttributes<'textarea'>;\n\n /** Aria label for accessibility when no visible label is provided */\n ariaLabel?: string;\n\n /** Additional class names */\n className?: string;\n\n /** Additional styles applied to the root element */\n style?: React.CSSProperties;\n\n /** Whether the textarea is read-only */\n isReadOnly?: boolean;\n\n /** The current value of the textarea */\n value?: React.ComponentPropsWithoutRef<'textarea'>['value'];\n\n /** Placeholder text displayed when the textarea is empty */\n placeholder?: React.ComponentPropsWithoutRef<'textarea'>['placeholder'];\n};\n\n/**\n *\n *\n * TextArea Component\n *\n *\n */\n\nexport const TextArea = ({\n label,\n isFluid = false,\n errorText,\n helpText,\n isOptional = false,\n moreInformationText,\n size = 'medium',\n ariaLabel,\n tooltipProps,\n isDisabled = false,\n className,\n isReadOnly = false,\n style,\n value,\n placeholder,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'textarea', TextAreaProps>) => {\n const helpTextId = useId();\n const errorTextId = useId();\n const containerWrappingClasses = classNames(\n `ndl-text-area ndl-type-text`,\n className,\n {\n 'ndl-disabled': isDisabled,\n 'ndl-has-error': errorText,\n 'ndl-has-icon': errorText,\n 'ndl-has-trailing-icon': errorText,\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-small': size === 'small',\n },\n );\n\n const hasEmptyLabelValue = !label || label === '';\n\n const labelWrappingClasses = classNames('ndl-text-area-label', {\n 'ndl-fluid': isFluid,\n 'ndl-text-area-no-label': hasEmptyLabelValue,\n });\n\n const isCustomLabel = label && typeof label !== 'string';\n const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;\n\n useMemo(() => {\n if (!label && !ariaLabel) {\n needleWarningMessage(\n 'A TextArea without a label does not have an aria label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n\n if (hasCustomLabelAndNoAriaLabel) {\n needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n }\n }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n const informationIconClasses = classNames({\n 'ndl-information-icon-large': size === 'large',\n 'ndl-information-icon-small': size === 'small' || size === 'medium',\n });\n\n const combinedAriaDescribedby = useMemo(() => {\n const ariaDescribedby = [];\n if (helpText && !errorText) {\n ariaDescribedby.push(helpTextId);\n } else if (errorText) {\n ariaDescribedby.push(errorTextId);\n }\n return ariaDescribedby.join(' ');\n }, [helpText, errorText, helpTextId, errorTextId]);\n\n return (\n <div className={containerWrappingClasses}>\n {/* We enable implicit label wrapping */}\n {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n <label className={labelWrappingClasses}>\n <div className=\"ndl-text-area-wrapper\">\n <textarea\n disabled={isDisabled}\n ref={ref}\n aria-label={ariaLabel}\n aria-invalid={Boolean(errorText)}\n readOnly={isReadOnly}\n value={value}\n placeholder={placeholder}\n style={style}\n aria-describedby={combinedAriaDescribedby}\n {...restProps}\n {...htmlAttributes}\n />\n </div>\n {!hasEmptyLabelValue && (\n <div className=\"ndl-text-area-wrapper\">\n <span className=\"ndl-text-area-label-text\">{label}</span>\n {Boolean(moreInformationText) && (\n <Tooltip type=\"simple\" {...tooltipProps?.root}>\n <Tooltip.Trigger {...tooltipProps?.trigger}>\n <div\n className={informationIconClasses}\n data-testid=\"ndl-information-icon\"\n >\n <InformationCircleIconOutline />\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {moreInformationText}\n </Tooltip.Content>\n </Tooltip>\n )}\n {isOptional && (\n <span className=\"ndl-text-area-optional\">Optional</span>\n )}\n </div>\n )}\n </label>\n {helpText && !errorText && (\n <div className=\"ndl-text-area-msg\" aria-live=\"polite\" id={helpTextId}>\n {helpText}\n </div>\n )}\n {errorText && (\n <div className=\"ndl-text-area-msg\">\n <div className=\"ndl-error-icon\">\n <ExclamationCircleIconSolid />\n </div>\n <div className=\"ndl-error-text\" id={errorTextId} aria-live=\"polite\">\n {errorText}\n </div>\n </div>\n )}\n </div>\n );\n};\n"]}
1
+ {"version":3,"file":"TextArea.js","sourceRoot":"","sources":["../../../src/text-area/TextArea.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport type React from 'react';\nimport { type ReactNode, useId, useMemo } from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport {\n type CommonProps,\n type HtmlAttributes,\n type TooltipObjectProps,\n} from '../_common/types';\nimport { needleWarningMessage } from '../_common/utils';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';\nimport { Tooltip } from '../tooltip';\n\n/**\n *\n *\n * Types\n *\n *\n */\n\n/**\n * @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n */\ntype TextAreaProps = {\n /** The label displayed above the textarea */\n label?: ReactNode;\n\n /** Whether the textarea should take the full available width */\n isFluid?: boolean;\n\n /** Assistive text displayed below the textarea */\n helpText?: string | ReactNode;\n\n /** Error message displayed below the textarea. When provided, it overrides `helpText` and shows an error icon */\n errorText?: string | ReactNode;\n\n /** Size of the textarea */\n size?: 'small' | 'medium' | 'large';\n\n // TODO v5: replace with isRequired and hasRequiredIndicator, matching Combobox\n /** Whether to display the Optional label next to the field label */\n isOptional?: boolean;\n\n /** Text displayed in the information tooltip shown next to the label */\n moreInformationText?: React.ReactNode;\n\n /** Props for the Tooltip component used by the information icon */\n tooltipProps?: TooltipObjectProps;\n\n /** Whether the textarea is disabled */\n isDisabled?: boolean;\n\n /** Additional HTML attributes passed to the textarea element */\n htmlAttributes?: HtmlAttributes<'textarea'>;\n\n /** Aria label for accessibility when no visible label is provided */\n ariaLabel?: string;\n\n /** Additional class names */\n className?: string;\n\n /** Additional styles applied to the root element */\n style?: React.CSSProperties;\n\n /** Whether the textarea is read-only */\n isReadOnly?: boolean;\n\n /** The current value of the textarea */\n value?: React.ComponentPropsWithoutRef<'textarea'>['value'];\n\n /** Placeholder text displayed when the textarea is empty */\n placeholder?: React.ComponentPropsWithoutRef<'textarea'>['placeholder'];\n};\n\n/**\n *\n *\n * TextArea Component\n *\n *\n */\n\nexport const TextArea = ({\n label,\n isFluid = false,\n errorText,\n helpText,\n isOptional = false,\n moreInformationText,\n size = 'medium',\n ariaLabel,\n tooltipProps,\n isDisabled = false,\n className,\n isReadOnly = false,\n style,\n value,\n placeholder,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'textarea', TextAreaProps>) => {\n const helpTextId = useId();\n const errorTextId = useId();\n const containerWrappingClasses = classNames(\n `ndl-text-area ndl-type-text`,\n className,\n {\n 'ndl-disabled': isDisabled,\n 'ndl-has-error': errorText,\n 'ndl-has-icon': errorText,\n 'ndl-has-trailing-icon': errorText,\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-small': size === 'small',\n },\n );\n\n const hasEmptyLabelValue = !label || label === '';\n\n const labelWrappingClasses = classNames('ndl-text-area-label', {\n 'ndl-fluid': isFluid,\n 'ndl-text-area-no-label': hasEmptyLabelValue,\n });\n\n const isCustomLabel = label && typeof label !== 'string';\n const hasCustomLabelAndNoAriaLabel = isCustomLabel && !ariaLabel;\n\n useMemo(() => {\n if (!label && !ariaLabel) {\n needleWarningMessage(\n 'A TextArea without a label does not have an aria label, be sure to include an aria label for screen readers link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n\n if (hasCustomLabelAndNoAriaLabel) {\n needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n }\n }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n const informationIconClasses = classNames({\n 'ndl-information-icon-large': size === 'large',\n 'ndl-information-icon-small': size === 'small' || size === 'medium',\n });\n\n const combinedAriaDescribedby = useMemo(() => {\n const ariaDescribedby = [];\n if (helpText && !errorText) {\n ariaDescribedby.push(helpTextId);\n } else if (errorText) {\n ariaDescribedby.push(errorTextId);\n }\n return ariaDescribedby.join(' ');\n }, [helpText, errorText, helpTextId, errorTextId]);\n\n return (\n <div className={containerWrappingClasses}>\n {/* We enable implicit label wrapping */}\n {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n <label className={labelWrappingClasses}>\n <div className=\"ndl-text-area-wrapper\">\n <textarea\n disabled={isDisabled}\n ref={ref}\n aria-label={ariaLabel}\n aria-invalid={Boolean(errorText)}\n readOnly={isReadOnly}\n value={value}\n placeholder={placeholder}\n style={style}\n aria-describedby={combinedAriaDescribedby}\n {...restProps}\n {...htmlAttributes}\n />\n </div>\n {!hasEmptyLabelValue && (\n <div className=\"ndl-text-area-wrapper\">\n <span className=\"ndl-text-area-label-text\">{label}</span>\n {Boolean(moreInformationText) && (\n <Tooltip type=\"simple\" {...tooltipProps?.root}>\n <Tooltip.Trigger {...tooltipProps?.trigger}>\n <div\n className={informationIconClasses}\n data-testid=\"ndl-information-icon\"\n >\n <InformationCircleIconOutline />\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {moreInformationText}\n </Tooltip.Content>\n </Tooltip>\n )}\n {isOptional && (\n <span className=\"ndl-text-area-optional\">Optional</span>\n )}\n </div>\n )}\n </label>\n {helpText && !errorText && (\n <div className=\"ndl-text-area-msg\" aria-live=\"polite\" id={helpTextId}>\n {helpText}\n </div>\n )}\n {errorText && (\n <div className=\"ndl-text-area-msg\">\n <div className=\"ndl-error-icon\">\n <ExclamationCircleIconSolid />\n </div>\n <div className=\"ndl-error-text\" id={errorTextId} aria-live=\"polite\">\n {errorText}\n </div>\n </div>\n )}\n </div>\n );\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport classNames from 'classnames';\nimport {\n type InputHTMLAttributes,\n type ReactElement,\n type ReactNode,\n useId,\n useMemo,\n} from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\n\n/**\n * @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n *\n * @remarks\n * When `isSkeletonLoading` is true, the input is rendered as a loading skeleton and the `skeletonProps` prop is used to configure the skeleton. For more information, see the Skeleton documentation.\n */\ntype TextInputProps = {\n /** Assistive text displayed below the input */\n helpText?: string | ReactNode;\n\n /** Error message displayed below the input. When provided, it overrides `helpText` and shows an error icon */\n errorText?: string | ReactNode;\n\n /** Leading element rendered inside the input */\n leadingElement?: ReactElement;\n\n /** Trailing element rendered inside the input */\n trailingElement?: ReactElement;\n\n /** Size of the input */\n size?: 'small' | 'medium' | 'large';\n\n /** Whether the input is read-only */\n isReadOnly?: boolean;\n\n /**\n * Whether to display the Required/Optional label next to the field label.\n * Shows Required if isRequired is true, otherwise shows Optional.\n * @default false\n */\n // TODO v5: decide if this naming is okay, or change it\n // eslint-disable-next-line @typescript-eslint/naming-convention\n showRequiredOrOptionalLabel?: boolean;\n\n /** Whether the input is disabled */\n isDisabled?: boolean;\n\n /** Whether the input is required */\n isRequired?: boolean;\n\n /** The current value of the input */\n value?: React.ComponentPropsWithoutRef<'input'>['value'];\n\n /** Placeholder text displayed when the input is empty */\n placeholder?: React.ComponentPropsWithoutRef<'input'>['placeholder'];\n\n /** Callback function triggered when the input value changes */\n onChange?: React.ComponentPropsWithoutRef<'input'>['onChange'];\n\n /** Whether the input should take the full available width */\n isFluid?: boolean;\n\n /** Text displayed in the information tooltip shown next to the label */\n moreInformationText?: React.ReactNode;\n\n /** The label displayed above the input */\n label?: string | React.ReactNode;\n\n /** Props for the Tooltip component used by the information icon */\n tooltipProps?: TooltipObjectProps;\n\n /** Whether to render skeletons instead of content */\n isSkeletonLoading?: boolean;\n\n /** Additional props forwarded to the underlying Skeleton components */\n skeletonProps?: React.ComponentProps<typeof Skeleton>;\n\n /** Whether to show the clear button */\n isClearable?: boolean;\n\n /** Whether to show the loading spinner */\n isLoading?: boolean;\n};\n\n/**\n *\n *\n * TextInput Component\n *\n *\n */\n\nexport const TextInput = ({\n label,\n isFluid,\n errorText,\n helpText,\n leadingElement,\n trailingElement,\n showRequiredOrOptionalLabel = false,\n moreInformationText,\n size = 'medium',\n placeholder,\n value,\n tooltipProps,\n htmlAttributes,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange,\n isClearable = false,\n className,\n style,\n isSkeletonLoading = false,\n isLoading = false,\n skeletonProps,\n ref,\n ...restProps\n}: CommonProps<'input', TextInputProps>) => {\n const [currentValue, handleChange] = useSemiControlledInput({\n inputType: 'text',\n isControlled: value !== undefined,\n onChange,\n state: value ?? '',\n });\n const hintId = useId();\n const helpTextId = useId();\n const errorTextId = useId();\n\n const containerWrappingClasses = classNames(`ndl-text-input`, className, {\n 'ndl-disabled': isDisabled,\n 'ndl-has-error': errorText,\n 'ndl-has-icon': leadingElement || trailingElement || errorText,\n 'ndl-has-leading-icon': leadingElement,\n 'ndl-has-trailing-icon': trailingElement || errorText,\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-read-only': isReadOnly,\n 'ndl-small': size === 'small',\n });\n\n const hasEmptyLabelValue =\n label === undefined || label === null || label === '';\n\n const labelWrappingClasses = classNames('ndl-form-item-label', {\n 'ndl-fluid': isFluid,\n 'ndl-form-item-no-label': hasEmptyLabelValue,\n });\n\n const combinedHtmlInputAttributes: InputHTMLAttributes<HTMLInputElement> = {\n ...htmlAttributes,\n className: classNames('ndl-input', htmlAttributes?.className),\n };\n const ariaLabel = combinedHtmlInputAttributes['aria-label'];\n const isCustomLabel = Boolean(label) && typeof label !== 'string';\n const hasCustomLabelAndNoAriaLabel =\n isCustomLabel && (ariaLabel === undefined || ariaLabel === '');\n const shouldRenderHint = isClearable || isLoading;\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (isClearable && event.key === 'Escape' && Boolean(currentValue)) {\n event.preventDefault();\n event.stopPropagation();\n handleChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n htmlAttributes?.onKeyDown?.(event);\n };\n\n useMemo(() => {\n if (!label && !ariaLabel) {\n needleWarningMessage(\n 'A TextInput without a label does not have an aria label, be sure to include an aria label for screen readers. Link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n\n if (hasCustomLabelAndNoAriaLabel) {\n needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n }\n }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n const informationIconClasses = classNames({\n 'ndl-information-icon-large': size === 'large',\n 'ndl-information-icon-small': size === 'small' || size === 'medium',\n });\n\n const combinedAriaDescribedby = useMemo(() => {\n const ariaDescribedby = [];\n\n if (hintId && shouldRenderHint) {\n ariaDescribedby.push(hintId);\n }\n if (helpText && !errorText) {\n ariaDescribedby.push(helpTextId);\n } else if (errorText) {\n ariaDescribedby.push(errorTextId);\n }\n return ariaDescribedby.join(' ');\n }, [hintId, shouldRenderHint, helpText, errorText, helpTextId, errorTextId]);\n\n return (\n <div className={containerWrappingClasses} style={style}>\n {/* We enable implicit label wrapping */}\n {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n <label className={labelWrappingClasses}>\n {!hasEmptyLabelValue && (\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n <div className=\"ndl-label-text-wrapper\">\n <Typography\n variant={size === 'large' ? 'body-large' : 'body-medium'}\n className=\"ndl-label-text\"\n >\n {label}\n </Typography>\n {Boolean(moreInformationText) && (\n <Tooltip {...tooltipProps?.root} type=\"simple\">\n <Tooltip.Trigger\n {...tooltipProps?.trigger}\n className={informationIconClasses}\n hasButtonWrapper\n >\n <div\n tabIndex={0}\n role=\"button\"\n aria-label=\"Information icon\"\n >\n <InformationCircleIconOutline />\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {moreInformationText}\n </Tooltip.Content>\n </Tooltip>\n )}\n {showRequiredOrOptionalLabel && (\n <Typography\n variant={size === 'large' ? 'body-large' : 'body-medium'}\n className=\"ndl-form-item-optional\"\n >\n {isRequired === true ? 'Required' : 'Optional'}\n </Typography>\n )}\n </div>\n </Skeleton>\n )}\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n <div className=\"ndl-input-wrapper\">\n {(leadingElement || (isLoading && !trailingElement)) && (\n <div className=\"ndl-element-leading ndl-element\">\n {isLoading ? (\n <LoadingSpinner\n size={size === 'large' ? 'medium' : 'small'}\n className={\n size === 'large'\n ? 'ndl-medium-spinner'\n : 'ndl-small-spinner'\n }\n />\n ) : (\n leadingElement\n )}\n </div>\n )}\n <div\n className={classNames('ndl-input-container', {\n 'ndl-clearable': isClearable,\n })}\n >\n <input\n ref={ref}\n readOnly={isReadOnly}\n disabled={isDisabled}\n required={isRequired}\n value={currentValue}\n placeholder={placeholder}\n type=\"text\"\n onChange={handleChange}\n aria-describedby={combinedAriaDescribedby}\n aria-invalid={Boolean(errorText)}\n {...combinedHtmlInputAttributes}\n onKeyDown={handleInputKeyDown}\n {...restProps}\n />\n {shouldRenderHint && (\n <span\n id={hintId}\n className=\"ndl-text-input-hint\"\n aria-hidden={true}\n >\n {isLoading && 'Loading '}\n {isClearable && 'Press Escape to clear input.'}\n </span>\n )}\n {isClearable && Boolean(currentValue) && (\n <div className=\"ndl-element-clear ndl-element\">\n <button\n tabIndex={-1}\n aria-hidden={true}\n type=\"button\"\n title=\"Clear input (Esc)\"\n onClick={() => {\n handleChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n }}\n >\n <XMarkIconOutline className=\"n-size-4\" />\n </button>\n </div>\n )}\n </div>\n {trailingElement && (\n <div className=\"ndl-element-trailing ndl-element\">\n {isLoading && !leadingElement ? (\n <LoadingSpinner\n size={size === 'large' ? 'medium' : 'small'}\n className={\n size === 'large'\n ? 'ndl-medium-spinner'\n : 'ndl-small-spinner'\n }\n />\n ) : (\n trailingElement\n )}\n </div>\n )}\n </div>\n </Skeleton>\n </label>\n {Boolean(helpText) && !errorText && (\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n isLoading={isSkeletonLoading}\n >\n <Typography\n variant={size === 'large' ? 'body-medium' : 'body-small'}\n className=\"ndl-form-message\"\n htmlAttributes={{\n 'aria-live': 'polite',\n id: helpTextId,\n }}\n >\n {helpText}\n </Typography>\n </Skeleton>\n )}\n {Boolean(errorText) && (\n // TODO v4: We might want to have a min width for the container for the messages to help skeleton loading.\n // Currently the message fills 100% of the width while the rest of the text input has a set width.\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n width=\"fit-content\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n <div className=\"ndl-form-message\">\n <div className=\"ndl-error-icon\">\n <ExclamationCircleIconSolid />\n </div>\n <Typography\n className=\"ndl-error-text\"\n variant={size === 'large' ? 'body-medium' : 'body-small'}\n htmlAttributes={{\n 'aria-live': 'polite',\n id: errorTextId,\n }}\n >\n {errorText}\n </Typography>\n </div>\n </Skeleton>\n )}\n </div>\n );\n};\n"]}
1
+ {"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../../src/text-input/TextInput.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport classNames from 'classnames';\nimport {\n type InputHTMLAttributes,\n type ReactElement,\n type ReactNode,\n useId,\n useMemo,\n} from 'react';\n\nimport { customLabelAndNoAriaLabelWarningMessage } from '../_common/messages';\nimport { type CommonProps, type TooltipObjectProps } from '../_common/types';\nimport { useSemiControlledInput } from '../_common/use-semi-controlled-input';\nimport { needleWarningMessage } from '../_common/utils';\nimport { ExclamationCircleIconSolid } from '../icons/generated/heroIcons/ExclamationCircleIconSolid';\nimport { InformationCircleIconOutline } from '../icons/generated/heroIcons/InformationCircleIconOutline';\nimport { XMarkIconOutline } from '../icons/generated/heroIcons/XMarkIconOutline';\nimport { LoadingSpinner } from '../loading-spinner';\nimport { Skeleton } from '../skeleton';\nimport { Tooltip } from '../tooltip';\nimport { Typography } from '../typography';\n\n/**\n * @remarks\n * When `moreInformationText` is provided, a tooltip is rendered next to the label, and the `tooltipProps` prop is used to configure the tooltip. The `TooltipObjectProps` type is defined as: `{ root?: Partial<React.ComponentProps<typeof Tooltip>>; trigger?: Partial<React.ComponentProps<typeof Tooltip.Trigger>>; content?: Partial<React.ComponentProps<typeof Tooltip.Content>>; }`, see the Tooltip component for more details.\n *\n * @remarks\n * When `isSkeletonLoading` is true, the input is rendered as a loading skeleton and the `skeletonProps` prop is used to configure the skeleton. For more information, see the Skeleton documentation.\n */\ntype TextInputProps = {\n /** Assistive text displayed below the input */\n helpText?: string | ReactNode;\n\n /** Error message displayed below the input. When provided, it overrides `helpText` and shows an error icon */\n errorText?: string | ReactNode;\n\n /** Leading element rendered inside the input */\n leadingElement?: ReactElement;\n\n /** Trailing element rendered inside the input */\n trailingElement?: ReactElement;\n\n /** Size of the input */\n size?: 'small' | 'medium' | 'large';\n\n /** Whether the input is read-only */\n isReadOnly?: boolean;\n\n /**\n * Whether to display the Required/Optional label next to the field label.\n * Shows Required if isRequired is true, otherwise shows Optional.\n * @default false\n */\n // TODO v5: rename to hasRequiredIndicator, matching Combobox. That also drops\n // the naming-convention disable below, since has is an allowed prefix.\n // eslint-disable-next-line @typescript-eslint/naming-convention\n showRequiredOrOptionalLabel?: boolean;\n\n /** Whether the input is disabled */\n isDisabled?: boolean;\n\n /** Whether the input is required */\n isRequired?: boolean;\n\n /** The current value of the input */\n value?: React.ComponentPropsWithoutRef<'input'>['value'];\n\n /** Placeholder text displayed when the input is empty */\n placeholder?: React.ComponentPropsWithoutRef<'input'>['placeholder'];\n\n /** Callback function triggered when the input value changes */\n onChange?: React.ComponentPropsWithoutRef<'input'>['onChange'];\n\n /** Whether the input should take the full available width */\n isFluid?: boolean;\n\n /** Text displayed in the information tooltip shown next to the label */\n moreInformationText?: React.ReactNode;\n\n /** The label displayed above the input */\n label?: string | React.ReactNode;\n\n /** Props for the Tooltip component used by the information icon */\n tooltipProps?: TooltipObjectProps;\n\n /** Whether to render skeletons instead of content */\n isSkeletonLoading?: boolean;\n\n /** Additional props forwarded to the underlying Skeleton components */\n skeletonProps?: React.ComponentProps<typeof Skeleton>;\n\n /** Whether to show the clear button */\n isClearable?: boolean;\n\n /** Whether to show the loading spinner */\n isLoading?: boolean;\n};\n\n/**\n *\n *\n * TextInput Component\n *\n *\n */\n\nexport const TextInput = ({\n label,\n isFluid,\n errorText,\n helpText,\n leadingElement,\n trailingElement,\n showRequiredOrOptionalLabel = false,\n moreInformationText,\n size = 'medium',\n placeholder,\n value,\n tooltipProps,\n htmlAttributes,\n isDisabled,\n isReadOnly,\n isRequired,\n onChange,\n isClearable = false,\n className,\n style,\n isSkeletonLoading = false,\n isLoading = false,\n skeletonProps,\n ref,\n ...restProps\n}: CommonProps<'input', TextInputProps>) => {\n const [currentValue, handleChange] = useSemiControlledInput({\n inputType: 'text',\n isControlled: value !== undefined,\n onChange,\n state: value ?? '',\n });\n const hintId = useId();\n const helpTextId = useId();\n const errorTextId = useId();\n\n const containerWrappingClasses = classNames(`ndl-text-input`, className, {\n 'ndl-disabled': isDisabled,\n 'ndl-has-error': errorText,\n 'ndl-has-icon': leadingElement || trailingElement || errorText,\n 'ndl-has-leading-icon': leadingElement,\n 'ndl-has-trailing-icon': trailingElement || errorText,\n 'ndl-large': size === 'large',\n 'ndl-medium': size === 'medium',\n 'ndl-read-only': isReadOnly,\n 'ndl-small': size === 'small',\n });\n\n const hasEmptyLabelValue =\n label === undefined || label === null || label === '';\n\n const labelWrappingClasses = classNames('ndl-form-item-label', {\n 'ndl-fluid': isFluid,\n 'ndl-form-item-no-label': hasEmptyLabelValue,\n });\n\n const combinedHtmlInputAttributes: InputHTMLAttributes<HTMLInputElement> = {\n ...htmlAttributes,\n className: classNames('ndl-input', htmlAttributes?.className),\n };\n const ariaLabel = combinedHtmlInputAttributes['aria-label'];\n const isCustomLabel = Boolean(label) && typeof label !== 'string';\n const hasCustomLabelAndNoAriaLabel =\n isCustomLabel && (ariaLabel === undefined || ariaLabel === '');\n const shouldRenderHint = isClearable || isLoading;\n\n const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n if (isClearable && event.key === 'Escape' && Boolean(currentValue)) {\n event.preventDefault();\n event.stopPropagation();\n handleChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n }\n htmlAttributes?.onKeyDown?.(event);\n };\n\n useMemo(() => {\n if (!label && !ariaLabel) {\n needleWarningMessage(\n 'A TextInput without a label does not have an aria label, be sure to include an aria label for screen readers. Link: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI',\n );\n }\n\n if (hasCustomLabelAndNoAriaLabel) {\n needleWarningMessage(customLabelAndNoAriaLabelWarningMessage);\n }\n }, [label, ariaLabel, hasCustomLabelAndNoAriaLabel]);\n\n const informationIconClasses = classNames({\n 'ndl-information-icon-large': size === 'large',\n 'ndl-information-icon-small': size === 'small' || size === 'medium',\n });\n\n const combinedAriaDescribedby = useMemo(() => {\n const ariaDescribedby = [];\n\n if (hintId && shouldRenderHint) {\n ariaDescribedby.push(hintId);\n }\n if (helpText && !errorText) {\n ariaDescribedby.push(helpTextId);\n } else if (errorText) {\n ariaDescribedby.push(errorTextId);\n }\n return ariaDescribedby.join(' ');\n }, [hintId, shouldRenderHint, helpText, errorText, helpTextId, errorTextId]);\n\n return (\n <div className={containerWrappingClasses} style={style}>\n {/* We enable implicit label wrapping */}\n {/* Source: https://dequeuniversity.com/rules/axe/4.2/label?application=axeAPI */}\n <label className={labelWrappingClasses}>\n {!hasEmptyLabelValue && (\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n <div className=\"ndl-label-text-wrapper\">\n <Typography\n variant={size === 'large' ? 'body-large' : 'body-medium'}\n className=\"ndl-label-text\"\n >\n {label}\n </Typography>\n {Boolean(moreInformationText) && (\n <Tooltip {...tooltipProps?.root} type=\"simple\">\n <Tooltip.Trigger\n {...tooltipProps?.trigger}\n className={informationIconClasses}\n hasButtonWrapper\n >\n <div\n tabIndex={0}\n role=\"button\"\n aria-label=\"Information icon\"\n >\n <InformationCircleIconOutline />\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content {...tooltipProps?.content}>\n {moreInformationText}\n </Tooltip.Content>\n </Tooltip>\n )}\n {showRequiredOrOptionalLabel && (\n <Typography\n variant={size === 'large' ? 'body-large' : 'body-medium'}\n className=\"ndl-form-item-optional\"\n >\n {isRequired === true ? 'Required' : 'Optional'}\n </Typography>\n )}\n </div>\n </Skeleton>\n )}\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n <div className=\"ndl-input-wrapper\">\n {(leadingElement || (isLoading && !trailingElement)) && (\n <div className=\"ndl-element-leading ndl-element\">\n {isLoading ? (\n <LoadingSpinner\n size={size === 'large' ? 'medium' : 'small'}\n className={\n size === 'large'\n ? 'ndl-medium-spinner'\n : 'ndl-small-spinner'\n }\n />\n ) : (\n leadingElement\n )}\n </div>\n )}\n <div\n className={classNames('ndl-input-container', {\n 'ndl-clearable': isClearable,\n })}\n >\n <input\n ref={ref}\n readOnly={isReadOnly}\n disabled={isDisabled}\n required={isRequired}\n value={currentValue}\n placeholder={placeholder}\n type=\"text\"\n onChange={handleChange}\n aria-describedby={combinedAriaDescribedby}\n aria-invalid={Boolean(errorText)}\n {...combinedHtmlInputAttributes}\n onKeyDown={handleInputKeyDown}\n {...restProps}\n />\n {shouldRenderHint && (\n <span\n id={hintId}\n className=\"ndl-text-input-hint\"\n aria-hidden={true}\n >\n {isLoading && 'Loading '}\n {isClearable && 'Press Escape to clear input.'}\n </span>\n )}\n {isClearable && Boolean(currentValue) && (\n <div className=\"ndl-element-clear ndl-element\">\n <button\n tabIndex={-1}\n aria-hidden={true}\n type=\"button\"\n title=\"Clear input (Esc)\"\n onClick={() => {\n handleChange?.({\n target: { value: '' },\n } as React.ChangeEvent<HTMLInputElement>);\n }}\n >\n <XMarkIconOutline className=\"n-size-4\" />\n </button>\n </div>\n )}\n </div>\n {trailingElement && (\n <div className=\"ndl-element-trailing ndl-element\">\n {isLoading && !leadingElement ? (\n <LoadingSpinner\n size={size === 'large' ? 'medium' : 'small'}\n className={\n size === 'large'\n ? 'ndl-medium-spinner'\n : 'ndl-small-spinner'\n }\n />\n ) : (\n trailingElement\n )}\n </div>\n )}\n </div>\n </Skeleton>\n </label>\n {Boolean(helpText) && !errorText && (\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n isLoading={isSkeletonLoading}\n >\n <Typography\n variant={size === 'large' ? 'body-medium' : 'body-small'}\n className=\"ndl-form-message\"\n htmlAttributes={{\n 'aria-live': 'polite',\n id: helpTextId,\n }}\n >\n {helpText}\n </Typography>\n </Skeleton>\n )}\n {Boolean(errorText) && (\n // TODO v4: We might want to have a min width for the container for the messages to help skeleton loading.\n // Currently the message fills 100% of the width while the rest of the text input has a set width.\n <Skeleton\n onBackground=\"weak\"\n shape=\"rectangular\"\n width=\"fit-content\"\n {...skeletonProps}\n isLoading={isSkeletonLoading}\n >\n <div className=\"ndl-form-message\">\n <div className=\"ndl-error-icon\">\n <ExclamationCircleIconSolid />\n </div>\n <Typography\n className=\"ndl-error-text\"\n variant={size === 'large' ? 'body-medium' : 'body-small'}\n htmlAttributes={{\n 'aria-live': 'polite',\n id: errorTextId,\n }}\n >\n {errorText}\n </Typography>\n </div>\n </Skeleton>\n )}\n </div>\n );\n};\n"]}
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n type AutoUpdateOptions,\n FloatingFocusManager,\n FloatingPortal,\n type Placement,\n type UseFloatingOptions,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, { useEffect } from 'react';\n\nimport { type CommonProps } from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { useNeedleTheme } from '../theme';\nimport { Typography, type TypographyVariants } from '../typography';\nimport { TooltipContext, useTooltip, useTooltipContext } from './use-tooltip';\n\nexport type TooltipProps = {\n /** Content displayed inside the tooltip. Wraps `Tooltip.Trigger`, `Tooltip.Content`, and optional parts */\n children: React.ReactNode;\n /** Whether the tooltip is disabled */\n isDisabled?: boolean;\n /** Whether the tooltip should be open on first render */\n isInitialOpen?: boolean;\n /** Placement of the tooltip content relative to the trigger */\n placement?: Placement;\n /** Controls the open state . If omitted, the tooltip manages its own state */\n isOpen?: boolean;\n // TODO v5: deprecate this prop\n /**\n * Visual style of the tooltip content. `simple` renders plain text, `rich` renders a composable panel\n * @deprecated rich type will be removed in v5, use simple type instead.\n */\n type: 'simple' | 'rich';\n /** Whether the content is rendered in a portal. */\n isPortaled?: boolean;\n /** Callback fired when the open state changes, if omitted, the tooltip manages its own state using internal hooks */\n onOpenChange?: UseFloatingOptions['onOpenChange'];\n /** Positioning strategy of the tooltip. Defaults to `fixed` when inside a dialog, otherwise `absolute` */\n floatingStrategy?: 'absolute' | 'fixed';\n /** Hover open/close delays in milliseconds */\n hoverDelay?: {\n open: number;\n close: number;\n };\n /** Whether the tooltip should close when the reference element is clicked. Useful when the trigger moves after click. */\n shouldCloseOnReferenceClick?: boolean;\n autoUpdateOptions?: AutoUpdateOptions;\n /** Whether the tooltip should follow the mouse cursor. Only applies to 'simple' tooltips with mouse hover. */\n // TODO v5: rename this prop to follow lint rule\n // eslint-disable-next-line @typescript-eslint/naming-convention\n followCursor?: boolean;\n};\n\nconst TooltipComponent = ({\n children,\n isDisabled = false,\n type,\n isInitialOpen,\n placement,\n isOpen,\n onOpenChange,\n isPortaled: isPortaledProp,\n floatingStrategy: strategyProp,\n hoverDelay,\n shouldCloseOnReferenceClick,\n autoUpdateOptions,\n followCursor,\n}: TooltipProps) => {\n const isInsideDialog = useIsInsideDialog();\n const strategy = isInsideDialog ? 'fixed' : 'absolute';\n const isPortaled = !isInsideDialog;\n\n const tooltip = useTooltip({\n autoUpdateOptions,\n followCursor,\n hoverDelay,\n isDisabled,\n isInitialOpen,\n // if isDisabled is true tooltip will not open otherwise either controlled or uncontrolled depending on if isOpen is passed\n isOpen: isDisabled === true ? false : isOpen,\n isPortaled: isPortaledProp ?? isPortaled,\n onOpenChange,\n placement,\n shouldCloseOnReferenceClick,\n strategy: strategyProp ?? strategy,\n type,\n });\n\n return (\n <TooltipContext.Provider value={tooltip}>\n {children}\n </TooltipContext.Provider>\n );\n};\n\nTooltipComponent.displayName = 'Tooltip';\n\ntype TooltipTriggerProps = {\n /** Content displayed inside the trigger element */\n children: React.ReactNode;\n /** Whether the trigger element can be any element without an extra button wrapper. The child element will be cloned with the necessary trigger props and merged refs */\n hasButtonWrapper?: boolean;\n};\n\nconst TooltipTrigger = ({\n children,\n hasButtonWrapper = false,\n htmlAttributes,\n className,\n style,\n ref,\n ...restProps\n}: CommonProps<'button', TooltipTriggerProps>) => {\n const context = useTooltipContext();\n\n // Example from floating-ui\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any).props;\n const mergedRefs = useMergeRefs([\n context.refs.setReference,\n ref,\n childrenProps?.ref,\n ]);\n\n const triggerClasses = classNames(\n {\n 'ndl-closed': !context.isOpen,\n 'ndl-open': context.isOpen,\n },\n 'ndl-tooltip-trigger',\n className,\n );\n\n // `hasButtonWrapper=true` allows the user to pass any element as the anchor\n if (hasButtonWrapper && React.isValidElement(children)) {\n const props: Record<string, unknown> = {\n className: triggerClasses,\n ...htmlAttributes,\n ...childrenProps,\n ref: mergedRefs,\n };\n\n return React.cloneElement(children, context.getReferenceProps(props));\n }\n\n return (\n <button\n type=\"button\"\n className={triggerClasses}\n style={style}\n ref={mergedRefs}\n {...context.getReferenceProps(htmlAttributes)}\n {...restProps}\n >\n {children}\n </button>\n );\n};\n\ntype TooltipContentProps = {\n /** Content displayed inside the tooltip */\n children: React.ReactNode;\n};\n\nconst TooltipContent = ({\n children,\n style,\n htmlAttributes,\n className,\n ref,\n ...restProps\n}: CommonProps<'div', TooltipContentProps>) => {\n const context = useTooltipContext();\n const mergedRef = useMergeRefs([context.refs.setFloating, ref]);\n const { themeClassName } = useNeedleTheme();\n\n const hasHeaderChild = React.useMemo(() => {\n if (context.type !== 'rich') {\n return false;\n }\n const childrenArray = React.Children.toArray(children);\n return childrenArray.some(\n (child) => React.isValidElement(child) && child.type === TooltipHeader,\n );\n }, [children, context.type]);\n\n if (!context.isOpen) {\n return null;\n }\n\n const classes = classNames('ndl-tooltip-content', themeClassName, className, {\n 'ndl-tooltip-content-rich': context.type === 'rich',\n 'ndl-tooltip-content-simple': context.type === 'simple',\n });\n\n if (context.type === 'simple') {\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => <FloatingPortal>{wrapChildren}</FloatingPortal>}\n >\n <div\n ref={mergedRef}\n className={classes}\n style={{\n ...context.floatingStyles,\n ...style,\n }}\n {...restProps}\n {...context.getFloatingProps(htmlAttributes)}\n >\n <Typography variant=\"body-medium\">{children}</Typography>\n </div>\n </ConditionalWrap>\n );\n }\n\n const ariaLabelledBy =\n htmlAttributes?.['aria-labelledby'] ??\n (hasHeaderChild ? context.headerId : undefined);\n\n if (htmlAttributes?.['aria-label'] === undefined && !ariaLabelledBy) {\n console.warn(\n 'The rich Tooltip is missing aria-label and Header. Please add one of them for accessibility.',\n );\n }\n\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => <FloatingPortal>{wrapChildren}</FloatingPortal>}\n >\n <FloatingFocusManager\n context={context.context}\n returnFocus={true}\n modal={false}\n initialFocus={0}\n closeOnFocusOut\n >\n <div\n ref={mergedRef}\n className={classes}\n style={{\n ...context.floatingStyles,\n ...style,\n }}\n {...restProps}\n {...context.getFloatingProps({\n ...htmlAttributes,\n 'aria-labelledby': ariaLabelledBy,\n })}\n >\n {children}\n </div>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\ntype TooltipHeaderProps = {\n /** Content displayed inside the header */\n children: React.ReactNode;\n /** @deprecated Use `typographyVariant` instead */\n passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof Typography>>;\n typographyVariant?: TypographyVariants;\n};\n\nconst TooltipHeader = ({\n children,\n passThroughProps,\n typographyVariant = 'subheading-medium',\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'span', TooltipHeaderProps>) => {\n const context = useTooltipContext();\n\n const classes = classNames('ndl-tooltip-header', className);\n\n useEffect(() => {\n if (Boolean(htmlAttributes?.id) === true) {\n context.setHeaderId?.(htmlAttributes?.id);\n }\n }, [context, htmlAttributes?.id]);\n\n if (!context.isOpen) {\n return null;\n }\n\n return (\n <Typography\n ref={ref}\n variant={typographyVariant}\n className={classes}\n style={style}\n htmlAttributes={{ ...htmlAttributes, id: context.headerId }}\n {...passThroughProps}\n {...restProps}\n >\n {children}\n </Typography>\n );\n};\n\nexport type TooltipBodyProps = {\n /** Content displayed inside the body */\n children: React.ReactNode;\n /** Additional props to pass to the Typography component */\n // TODO v5: Deprecate passThroughProps and use restProps instead\n passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof Typography>>;\n};\n\nconst TooltipBody = ({\n children,\n className,\n style,\n htmlAttributes,\n passThroughProps,\n ref,\n ...restProps\n}: CommonProps<'span', TooltipBodyProps>) => {\n const context = useTooltipContext();\n\n const classes = classNames('ndl-tooltip-body', className);\n if (!context.isOpen) {\n return null;\n }\n\n return (\n <Typography\n ref={ref}\n variant=\"body-medium\"\n className={classes}\n style={style}\n htmlAttributes={htmlAttributes}\n {...passThroughProps}\n {...restProps}\n >\n {children}\n </Typography>\n );\n};\n\ntype ToolTipActionsProps = {\n /** Content displayed inside the actions container */\n children: React.ReactNode;\n};\n\nconst Actions = ({\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', ToolTipActionsProps>) => {\n const context = useTooltipContext();\n const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);\n\n if (!context.isOpen) {\n return null;\n }\n\n const classes = classNames('ndl-tooltip-actions', className);\n\n return (\n <div\n className={classes}\n ref={mergedRefs}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </div>\n );\n};\n\nActions.displayName = 'Tooltip.Actions';\n\nconst Tooltip = Object.assign(TooltipComponent, {\n Actions: Actions,\n Body: TooltipBody,\n Content: TooltipContent,\n Header: TooltipHeader,\n Trigger: TooltipTrigger,\n});\n\nexport { Tooltip };\n"]}
1
+ {"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/tooltip/Tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n type AutoUpdateOptions,\n FloatingFocusManager,\n FloatingPortal,\n type Placement,\n type UseFloatingOptions,\n useMergeRefs,\n} from '@floating-ui/react';\nimport classNames from 'classnames';\nimport React, { useEffect } from 'react';\n\nimport { type CommonProps } from '../_common/types';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { useNeedleTheme } from '../theme';\nimport { Typography, type TypographyVariants } from '../typography';\nimport { TooltipContext, useTooltip, useTooltipContext } from './use-tooltip';\n\nexport type TooltipProps = {\n /** Content displayed inside the tooltip. Wraps `Tooltip.Trigger`, `Tooltip.Content`, and optional parts */\n children: React.ReactNode;\n /** Whether the tooltip is disabled */\n isDisabled?: boolean;\n /** Whether the tooltip should be open on first render */\n isInitialOpen?: boolean;\n /** Placement of the tooltip content relative to the trigger */\n placement?: Placement;\n /** Controls the open state . If omitted, the tooltip manages its own state */\n isOpen?: boolean;\n // TODO v5: deprecate this prop\n /**\n * Visual style of the tooltip content. `simple` renders plain text, `rich` renders a composable panel\n * @deprecated rich type will be removed in v5, use simple type instead.\n */\n type: 'simple' | 'rich';\n /** Whether the content is rendered in a portal. */\n isPortaled?: boolean;\n /** Callback fired when the open state changes, if omitted, the tooltip manages its own state using internal hooks */\n onOpenChange?: UseFloatingOptions['onOpenChange'];\n /** Positioning strategy of the tooltip. Defaults to `fixed` when inside a dialog, otherwise `absolute` */\n floatingStrategy?: 'absolute' | 'fixed';\n /** Hover open/close delays in milliseconds */\n hoverDelay?: {\n open: number;\n close: number;\n };\n /** Whether the tooltip should close when the reference element is clicked. Useful when the trigger moves after click. */\n shouldCloseOnReferenceClick?: boolean;\n autoUpdateOptions?: AutoUpdateOptions;\n // TODO v5: align followCursor with the Tippy.js convention: `true` should follow\n // the cursor continuously on both axes, with explicit 'horizontal' / 'vertical'\n // values for single-axis following (instead of deriving the axis from `placement`).\n /**\n * Whether the tooltip should be positioned at the mouse cursor. Only applies to 'simple' tooltips with mouse hover.\n * `true` follows the cursor continuously along one axis derived from `placement` (horizontal for top/bottom, vertical for left/right).\n * `'initial'` opens the tooltip at the cursor's position (both axes) and keeps it there, like the native `title` attribute; `placement` controls which side of that point the tooltip appears on.\n */\n followCursor?: boolean | 'initial';\n};\n\nconst TooltipComponent = ({\n children,\n isDisabled = false,\n type,\n isInitialOpen,\n placement,\n isOpen,\n onOpenChange,\n isPortaled: isPortaledProp,\n floatingStrategy: strategyProp,\n hoverDelay,\n shouldCloseOnReferenceClick,\n autoUpdateOptions,\n followCursor,\n}: TooltipProps) => {\n const isInsideDialog = useIsInsideDialog();\n const strategy = isInsideDialog ? 'fixed' : 'absolute';\n const isPortaled = !isInsideDialog;\n\n const tooltip = useTooltip({\n autoUpdateOptions,\n followCursor,\n hoverDelay,\n isDisabled,\n isInitialOpen,\n // if isDisabled is true tooltip will not open otherwise either controlled or uncontrolled depending on if isOpen is passed\n isOpen: isDisabled === true ? false : isOpen,\n isPortaled: isPortaledProp ?? isPortaled,\n onOpenChange,\n placement,\n shouldCloseOnReferenceClick,\n strategy: strategyProp ?? strategy,\n type,\n });\n\n return (\n <TooltipContext.Provider value={tooltip}>\n {children}\n </TooltipContext.Provider>\n );\n};\n\nTooltipComponent.displayName = 'Tooltip';\n\ntype TooltipTriggerProps = {\n /** Content displayed inside the trigger element */\n children: React.ReactNode;\n /** Whether the trigger element can be any element without an extra button wrapper. The child element will be cloned with the necessary trigger props and merged refs */\n hasButtonWrapper?: boolean;\n};\n\nconst TooltipTrigger = ({\n children,\n hasButtonWrapper = false,\n htmlAttributes,\n className,\n style,\n ref,\n ...restProps\n}: CommonProps<'button', TooltipTriggerProps>) => {\n const context = useTooltipContext();\n\n // Example from floating-ui\n // oxlint-disable-next-line @typescript-eslint/no-explicit-any\n const childrenProps = (children as any).props;\n const mergedRefs = useMergeRefs([\n context.refs.setReference,\n ref,\n childrenProps?.ref,\n ]);\n\n const triggerClasses = classNames(\n {\n 'ndl-closed': !context.isOpen,\n 'ndl-open': context.isOpen,\n },\n 'ndl-tooltip-trigger',\n className,\n );\n\n // `hasButtonWrapper=true` allows the user to pass any element as the anchor\n if (hasButtonWrapper && React.isValidElement(children)) {\n const props: Record<string, unknown> = {\n className: triggerClasses,\n ...htmlAttributes,\n ...childrenProps,\n ref: mergedRefs,\n };\n\n return React.cloneElement(children, context.getReferenceProps(props));\n }\n\n return (\n <button\n type=\"button\"\n className={triggerClasses}\n style={style}\n ref={mergedRefs}\n {...context.getReferenceProps(htmlAttributes)}\n {...restProps}\n >\n {children}\n </button>\n );\n};\n\ntype TooltipContentProps = {\n /** Content displayed inside the tooltip */\n children: React.ReactNode;\n};\n\nconst TooltipContent = ({\n children,\n style,\n htmlAttributes,\n className,\n ref,\n ...restProps\n}: CommonProps<'div', TooltipContentProps>) => {\n const context = useTooltipContext();\n const mergedRef = useMergeRefs([context.refs.setFloating, ref]);\n const { themeClassName } = useNeedleTheme();\n\n const hasHeaderChild = React.useMemo(() => {\n if (context.type !== 'rich') {\n return false;\n }\n const childrenArray = React.Children.toArray(children);\n return childrenArray.some(\n (child) => React.isValidElement(child) && child.type === TooltipHeader,\n );\n }, [children, context.type]);\n\n if (!context.isOpen) {\n return null;\n }\n\n const classes = classNames('ndl-tooltip-content', themeClassName, className, {\n 'ndl-tooltip-content-rich': context.type === 'rich',\n 'ndl-tooltip-content-simple': context.type === 'simple',\n });\n\n if (context.type === 'simple') {\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => <FloatingPortal>{wrapChildren}</FloatingPortal>}\n >\n <div\n ref={mergedRef}\n className={classes}\n style={{\n ...context.floatingStyles,\n ...style,\n }}\n {...restProps}\n {...context.getFloatingProps(htmlAttributes)}\n >\n <Typography variant=\"body-medium\">{children}</Typography>\n </div>\n </ConditionalWrap>\n );\n }\n\n const ariaLabelledBy =\n htmlAttributes?.['aria-labelledby'] ??\n (hasHeaderChild ? context.headerId : undefined);\n\n if (htmlAttributes?.['aria-label'] === undefined && !ariaLabelledBy) {\n console.warn(\n 'The rich Tooltip is missing aria-label and Header. Please add one of them for accessibility.',\n );\n }\n\n return (\n <ConditionalWrap\n shouldWrap={context.isPortaled}\n wrap={(wrapChildren) => <FloatingPortal>{wrapChildren}</FloatingPortal>}\n >\n <FloatingFocusManager\n context={context.context}\n returnFocus={true}\n modal={false}\n initialFocus={0}\n closeOnFocusOut\n >\n <div\n ref={mergedRef}\n className={classes}\n style={{\n ...context.floatingStyles,\n ...style,\n }}\n {...restProps}\n {...context.getFloatingProps({\n ...htmlAttributes,\n 'aria-labelledby': ariaLabelledBy,\n })}\n >\n {children}\n </div>\n </FloatingFocusManager>\n </ConditionalWrap>\n );\n};\n\ntype TooltipHeaderProps = {\n /** Content displayed inside the header */\n children: React.ReactNode;\n /** @deprecated Use `typographyVariant` instead */\n passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof Typography>>;\n typographyVariant?: TypographyVariants;\n};\n\nconst TooltipHeader = ({\n children,\n passThroughProps,\n typographyVariant = 'subheading-medium',\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'span', TooltipHeaderProps>) => {\n const context = useTooltipContext();\n\n const classes = classNames('ndl-tooltip-header', className);\n\n useEffect(() => {\n if (Boolean(htmlAttributes?.id) === true) {\n context.setHeaderId?.(htmlAttributes?.id);\n }\n }, [context, htmlAttributes?.id]);\n\n if (!context.isOpen) {\n return null;\n }\n\n return (\n <Typography\n ref={ref}\n variant={typographyVariant}\n className={classes}\n style={style}\n htmlAttributes={{ ...htmlAttributes, id: context.headerId }}\n {...passThroughProps}\n {...restProps}\n >\n {children}\n </Typography>\n );\n};\n\nexport type TooltipBodyProps = {\n /** Content displayed inside the body */\n children: React.ReactNode;\n /** Additional props to pass to the Typography component */\n // TODO v5: Deprecate passThroughProps and use restProps instead\n passThroughProps?: Partial<React.ComponentPropsWithoutRef<typeof Typography>>;\n};\n\nconst TooltipBody = ({\n children,\n className,\n style,\n htmlAttributes,\n passThroughProps,\n ref,\n ...restProps\n}: CommonProps<'span', TooltipBodyProps>) => {\n const context = useTooltipContext();\n\n const classes = classNames('ndl-tooltip-body', className);\n if (!context.isOpen) {\n return null;\n }\n\n return (\n <Typography\n ref={ref}\n variant=\"body-medium\"\n className={classes}\n style={style}\n htmlAttributes={htmlAttributes}\n {...passThroughProps}\n {...restProps}\n >\n {children}\n </Typography>\n );\n};\n\ntype ToolTipActionsProps = {\n /** Content displayed inside the actions container */\n children: React.ReactNode;\n};\n\nconst Actions = ({\n children,\n className,\n style,\n htmlAttributes,\n ref,\n ...restProps\n}: CommonProps<'div', ToolTipActionsProps>) => {\n const context = useTooltipContext();\n const mergedRefs = useMergeRefs([context.refs.setFloating, ref]);\n\n if (!context.isOpen) {\n return null;\n }\n\n const classes = classNames('ndl-tooltip-actions', className);\n\n return (\n <div\n className={classes}\n ref={mergedRefs}\n style={style}\n {...restProps}\n {...htmlAttributes}\n >\n {children}\n </div>\n );\n};\n\nActions.displayName = 'Tooltip.Actions';\n\nconst Tooltip = Object.assign(TooltipComponent, {\n Actions: Actions,\n Body: TooltipBody,\n Content: TooltipContent,\n Header: TooltipHeader,\n Trigger: TooltipTrigger,\n});\n\nexport { Tooltip };\n"]}
@@ -35,7 +35,7 @@ const triggerStyle = {
35
35
  width: '300px',
36
36
  };
37
37
  const Component = () => {
38
- return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '24px' }, children: [(0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", followCursor: true, placement: "bottom", children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { children: (0, jsx_runtime_1.jsx)("div", { style: triggerStyle, children: "Hover me (x-axis)" }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: "Follows cursor along x-axis" })] }), (0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", followCursor: true, placement: "right", children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { children: (0, jsx_runtime_1.jsx)("div", { style: triggerStyle, children: "Hover me (y-axis)" }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: "Follows cursor along y-axis" })] })] }));
38
+ return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', gap: '24px' }, children: [(0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", followCursor: true, placement: "bottom", hoverDelay: { close: 0, open: 500 }, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { children: (0, jsx_runtime_1.jsx)("div", { style: triggerStyle, children: "followCursor with placement=\"bottom\": follows on the x-axis" }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: "Follows cursor along the x-axis" })] }), (0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", followCursor: true, placement: "right", hoverDelay: { close: 0, open: 500 }, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { children: (0, jsx_runtime_1.jsx)("div", { style: triggerStyle, children: "followCursor with placement=\"right\": follows on the y-axis" }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: "Follows cursor along the y-axis" })] }), (0, jsx_runtime_1.jsxs)(react_1.Tooltip, { type: "simple", followCursor: "initial", placement: "bottom", hoverDelay: { close: 0, open: 500 }, children: [(0, jsx_runtime_1.jsx)(react_1.Tooltip.Trigger, { children: (0, jsx_runtime_1.jsx)("div", { style: triggerStyle, children: "followCursor=\"initial\": opens at the cursor point and stays there" }) }), (0, jsx_runtime_1.jsx)(react_1.Tooltip.Content, { children: "Pinned at the cursor position it opened at" })] })] }));
39
39
  };
40
40
  exports.default = Component;
41
41
  //# sourceMappingURL=tooltip-follow-cursor.story.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"tooltip-follow-cursor.story.js","sourceRoot":"","sources":["../../../../src/tooltip/stories/tooltip-follow-cursor.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA2C;AAE3C,MAAM,YAAY,GAAwB;IACxC,UAAU,EAAE,QAAQ;IACpB,eAAe,EAAE,oCAAoC;IACrD,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE,yCAAyC;IAChD,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,OAAO;IACf,cAAc,EAAE,QAAQ;IACxB,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,aAC1C,wBAAC,eAAO,IAAC,IAAI,EAAC,QAAQ,EAAC,YAAY,QAAC,SAAS,EAAC,QAAQ,aACpD,uBAAC,eAAO,CAAC,OAAO,cACd,gCAAK,KAAK,EAAE,YAAY,kCAAyB,GACjC,EAClB,uBAAC,eAAO,CAAC,OAAO,8CAA8C,IACtD,EAEV,wBAAC,eAAO,IAAC,IAAI,EAAC,QAAQ,EAAC,YAAY,QAAC,SAAS,EAAC,OAAO,aACnD,uBAAC,eAAO,CAAC,OAAO,cACd,gCAAK,KAAK,EAAE,YAAY,kCAAyB,GACjC,EAClB,uBAAC,eAAO,CAAC,OAAO,8CAA8C,IACtD,IACN,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tooltip } from '@neo4j-ndl/react';\n\nconst triggerStyle: React.CSSProperties = {\n alignItems: 'center',\n backgroundColor: 'var(--theme-color-primary-bg-weak)',\n borderRadius: '4px',\n color: 'var(--theme-color-primary-text-inverse)',\n display: 'flex',\n height: '300px',\n justifyContent: 'center',\n padding: '8px',\n width: '300px',\n};\n\nconst Component = () => {\n return (\n <div style={{ display: 'flex', gap: '24px' }}>\n <Tooltip type=\"simple\" followCursor placement=\"bottom\">\n <Tooltip.Trigger>\n <div style={triggerStyle}>Hover me (x-axis)</div>\n </Tooltip.Trigger>\n <Tooltip.Content>Follows cursor along x-axis</Tooltip.Content>\n </Tooltip>\n\n <Tooltip type=\"simple\" followCursor placement=\"right\">\n <Tooltip.Trigger>\n <div style={triggerStyle}>Hover me (y-axis)</div>\n </Tooltip.Trigger>\n <Tooltip.Content>Follows cursor along y-axis</Tooltip.Content>\n </Tooltip>\n </div>\n );\n};\n\nexport default Component;\n"]}
1
+ {"version":3,"file":"tooltip-follow-cursor.story.js","sourceRoot":"","sources":["../../../../src/tooltip/stories/tooltip-follow-cursor.story.tsx"],"names":[],"mappings":";;;AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,mDAAiD;AAEjD,4CAA2C;AAE3C,MAAM,YAAY,GAAwB;IACxC,UAAU,EAAE,QAAQ;IACpB,eAAe,EAAE,oCAAoC;IACrD,YAAY,EAAE,KAAK;IACnB,KAAK,EAAE,yCAAyC;IAChD,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,OAAO;IACf,cAAc,EAAE,QAAQ;IACxB,OAAO,EAAE,KAAK;IACd,KAAK,EAAE,OAAO;CACf,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,OAAO,CACL,iCAAK,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,aAC1C,wBAAC,eAAO,IACN,IAAI,EAAC,QAAQ,EACb,YAAY,QACZ,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,aAEnC,uBAAC,eAAO,CAAC,OAAO,cACd,gCAAK,KAAK,EAAE,YAAY,8EAGlB,GACU,EAClB,uBAAC,eAAO,CAAC,OAAO,kDAAkD,IAC1D,EAEV,wBAAC,eAAO,IACN,IAAI,EAAC,QAAQ,EACb,YAAY,QACZ,SAAS,EAAC,OAAO,EACjB,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,aAEnC,uBAAC,eAAO,CAAC,OAAO,cACd,gCAAK,KAAK,EAAE,YAAY,6EAElB,GACU,EAClB,uBAAC,eAAO,CAAC,OAAO,kDAAkD,IAC1D,EAEV,wBAAC,eAAO,IACN,IAAI,EAAC,QAAQ,EACb,YAAY,EAAC,SAAS,EACtB,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,aAEnC,uBAAC,eAAO,CAAC,OAAO,cACd,gCAAK,KAAK,EAAE,YAAY,oFAGlB,GACU,EAClB,uBAAC,eAAO,CAAC,OAAO,6DAEE,IACV,IACN,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport '@neo4j-ndl/base/lib/neo4j-ds-styles.css';\n\nimport { Tooltip } from '@neo4j-ndl/react';\n\nconst triggerStyle: React.CSSProperties = {\n alignItems: 'center',\n backgroundColor: 'var(--theme-color-primary-bg-weak)',\n borderRadius: '4px',\n color: 'var(--theme-color-primary-text-inverse)',\n display: 'flex',\n height: '300px',\n justifyContent: 'center',\n padding: '8px',\n width: '300px',\n};\n\nconst Component = () => {\n return (\n <div style={{ display: 'flex', gap: '24px' }}>\n <Tooltip\n type=\"simple\"\n followCursor\n placement=\"bottom\"\n hoverDelay={{ close: 0, open: 500 }}\n >\n <Tooltip.Trigger>\n <div style={triggerStyle}>\n followCursor with placement=&quot;bottom&quot;: follows on the\n x-axis\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content>Follows cursor along the x-axis</Tooltip.Content>\n </Tooltip>\n\n <Tooltip\n type=\"simple\"\n followCursor\n placement=\"right\"\n hoverDelay={{ close: 0, open: 500 }}\n >\n <Tooltip.Trigger>\n <div style={triggerStyle}>\n followCursor with placement=&quot;right&quot;: follows on the y-axis\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content>Follows cursor along the y-axis</Tooltip.Content>\n </Tooltip>\n\n <Tooltip\n type=\"simple\"\n followCursor=\"initial\"\n placement=\"bottom\"\n hoverDelay={{ close: 0, open: 500 }}\n >\n <Tooltip.Trigger>\n <div style={triggerStyle}>\n followCursor=&quot;initial&quot;: opens at the cursor point and\n stays there\n </div>\n </Tooltip.Trigger>\n <Tooltip.Content>\n Pinned at the cursor position it opened at\n </Tooltip.Content>\n </Tooltip>\n </div>\n );\n};\n\nexport default Component;\n"]}
@@ -25,11 +25,16 @@ exports.useTooltip = useTooltip;
25
25
  const react_1 = require("@floating-ui/react");
26
26
  const react_2 = require("react");
27
27
  function useTooltip({ isInitialOpen = false, placement = 'top', isOpen: controlledOpen, onOpenChange: setControlledOpen, type = 'simple', isPortaled = true, strategy = 'absolute', hoverDelay = undefined, shouldCloseOnReferenceClick = false, autoUpdateOptions, isDisabled = false, followCursor = false, } = {}) {
28
+ var _a, _b;
28
29
  const id = (0, react_2.useId)();
29
30
  const [headerId, setHeaderId] = (0, react_2.useState)(id);
30
31
  const [isUncontrolledOpen, setIsUncontrolledOpen] = (0, react_2.useState)(isInitialOpen);
31
32
  const isOpen = controlledOpen !== null && controlledOpen !== void 0 ? controlledOpen : isUncontrolledOpen;
32
33
  const setOpen = setControlledOpen !== null && setControlledOpen !== void 0 ? setControlledOpen : setIsUncontrolledOpen;
34
+ // For followCursor='initial': the latest pointer position over the trigger,
35
+ // and a snapshot of it frozen at the moment the tooltip opens.
36
+ const pointerPositionRef = (0, react_2.useRef)(null);
37
+ const [initialCursorPoint, setInitialCursorPoint] = (0, react_2.useState)(null);
33
38
  const data = (0, react_1.useFloating)({
34
39
  middleware: [
35
40
  (0, react_1.offset)(5),
@@ -40,7 +45,15 @@ function useTooltip({ isInitialOpen = false, placement = 'top', isOpen: controll
40
45
  }),
41
46
  (0, react_1.shift)({ padding: 5 }),
42
47
  ],
43
- onOpenChange: setOpen,
48
+ onOpenChange(open, event, reason) {
49
+ if (followCursor === 'initial') {
50
+ // Only anchor to the cursor for pointer-driven opens; keyboard focus
51
+ // opens fall back to positioning relative to the trigger element.
52
+ const isPointerDrivenOpen = event !== undefined && 'clientX' in event;
53
+ setInitialCursorPoint(open && isPointerDrivenOpen ? pointerPositionRef.current : null);
54
+ }
55
+ setOpen(open, event, reason);
56
+ },
44
57
  open: isOpen,
45
58
  placement,
46
59
  strategy,
@@ -72,10 +85,28 @@ function useTooltip({ isInitialOpen = false, placement = 'top', isOpen: controll
72
85
  role: type === 'simple' ? 'tooltip' : 'dialog',
73
86
  });
74
87
  const followAxis = placement.startsWith('left') || placement.startsWith('right') ? 'y' : 'x';
75
- const clientPoint = (0, react_1.useClientPoint)(context, {
76
- axis: followAxis,
77
- enabled: followCursor && type === 'simple' && !isDisabled,
78
- });
88
+ const isInitialFollowCursor = followCursor === 'initial';
89
+ const clientPoint = (0, react_1.useClientPoint)(context, Object.assign({
90
+ // 'initial' anchors to the exact cursor point (both axes); `true` follows
91
+ // continuously along the axis derived from `placement`.
92
+ axis: isInitialFollowCursor ? 'both' : followAxis, enabled: followCursor !== false && type === 'simple' && !isDisabled }, (isInitialFollowCursor && {
93
+ x: (_a = initialCursorPoint === null || initialCursorPoint === void 0 ? void 0 : initialCursorPoint.x) !== null && _a !== void 0 ? _a : null,
94
+ y: (_b = initialCursorPoint === null || initialCursorPoint === void 0 ? void 0 : initialCursorPoint.y) !== null && _b !== void 0 ? _b : null,
95
+ })));
96
+ const initialCursorTracking = (0, react_2.useMemo)(() => {
97
+ if (!isInitialFollowCursor) {
98
+ return {};
99
+ }
100
+ const capturePointerPosition = (event) => {
101
+ pointerPositionRef.current = { x: event.clientX, y: event.clientY };
102
+ };
103
+ return {
104
+ reference: {
105
+ onPointerEnter: capturePointerPosition,
106
+ onPointerMove: capturePointerPosition,
107
+ },
108
+ };
109
+ }, [isInitialFollowCursor]);
79
110
  const interactions = (0, react_1.useInteractions)([
80
111
  hover,
81
112
  focus,
@@ -83,6 +114,7 @@ function useTooltip({ isInitialOpen = false, placement = 'top', isOpen: controll
83
114
  role,
84
115
  click,
85
116
  clientPoint,
117
+ initialCursorTracking,
86
118
  ]);
87
119
  return (0, react_2.useMemo)(() => (Object.assign(Object.assign({ headerId: type === 'rich' ? headerId : undefined, isOpen,
88
120
  isPortaled, setHeaderId: type === 'rich' ? setHeaderId : undefined, setOpen,
@@ -1 +1 @@
1
- {"version":3,"file":"use-tooltip.js","sourceRoot":"","sources":["../../../src/tooltip/use-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n autoUpdate,\n type AutoUpdateOptions,\n flip,\n offset,\n type Placement,\n type ReferenceType,\n safePolygon,\n shift,\n useClick,\n useClientPoint,\n useDismiss,\n useFloating,\n type UseFloatingOptions,\n type UseFloatingReturn,\n useFocus,\n useHover,\n useInteractions,\n type UseInteractionsReturn,\n useRole,\n} from '@floating-ui/react';\nimport { createContext, useContext, useId, useMemo, useState } from 'react';\n\nexport interface TooltipOptions {\n isInitialOpen?: boolean;\n placement?: Placement;\n isOpen?: boolean;\n onOpenChange?: UseFloatingOptions['onOpenChange'];\n type?: 'simple' | 'rich';\n isPortaled?: boolean;\n strategy?: 'fixed' | 'absolute';\n hoverDelay?: {\n open: number;\n close: number;\n };\n shouldCloseOnReferenceClick?: boolean;\n autoUpdateOptions?: AutoUpdateOptions;\n isDisabled?: boolean;\n // TODO v5: rename this prop to follow lint rule\n /** Whether the tooltip should follow the mouse cursor. Only applies to 'simple' tooltips with mouse hover. */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n followCursor?: boolean;\n}\n\nexport function useTooltip({\n isInitialOpen = false,\n placement = 'top',\n isOpen: controlledOpen,\n onOpenChange: setControlledOpen,\n type = 'simple',\n isPortaled = true,\n strategy = 'absolute',\n hoverDelay = undefined,\n shouldCloseOnReferenceClick = false,\n autoUpdateOptions,\n isDisabled = false,\n followCursor = false,\n}: TooltipOptions = {}): {\n headerId?: string;\n setHeaderId?: (id: string | undefined) => void;\n isOpen: boolean;\n setOpen: (open: boolean) => void;\n type: 'simple' | 'rich';\n isPortaled: boolean;\n} & UseInteractionsReturn &\n UseFloatingReturn<ReferenceType> {\n const id = useId();\n const [headerId, setHeaderId] = useState<string | undefined>(id);\n const [isUncontrolledOpen, setIsUncontrolledOpen] = useState(isInitialOpen);\n const isOpen = controlledOpen ?? isUncontrolledOpen;\n const setOpen = setControlledOpen ?? setIsUncontrolledOpen;\n\n const data = useFloating({\n middleware: [\n offset(5),\n flip({\n crossAxis: placement.includes('-'),\n fallbackAxisSideDirection: 'start',\n padding: 5,\n }),\n shift({ padding: 5 }),\n ],\n onOpenChange: setOpen,\n open: isOpen,\n placement,\n strategy,\n whileElementsMounted(referenceEl, floatingEl, update) {\n const cleanup = autoUpdate(referenceEl, floatingEl, update, {\n ...autoUpdateOptions,\n });\n return cleanup;\n },\n });\n\n const context = data.context;\n\n const hover = useHover(context, {\n delay: hoverDelay,\n enabled: type === 'simple' && !isDisabled,\n handleClose: safePolygon(),\n move: false,\n });\n const click = useClick(context, {\n enabled: type === 'rich' && !isDisabled,\n });\n const focus = useFocus(context, {\n enabled: type === 'simple' && !isDisabled,\n visibleOnly: true,\n });\n const dismiss = useDismiss(context, {\n escapeKey: true,\n outsidePress: true,\n referencePress: shouldCloseOnReferenceClick,\n });\n const role = useRole(context, {\n role: type === 'simple' ? 'tooltip' : 'dialog',\n });\n const followAxis =\n placement.startsWith('left') || placement.startsWith('right') ? 'y' : 'x';\n const clientPoint = useClientPoint(context, {\n axis: followAxis,\n enabled: followCursor && type === 'simple' && !isDisabled,\n });\n\n const interactions = useInteractions([\n hover,\n focus,\n dismiss,\n role,\n click,\n clientPoint,\n ]);\n\n return useMemo(\n () => ({\n headerId: type === 'rich' ? headerId : undefined,\n isOpen,\n isPortaled,\n setHeaderId: type === 'rich' ? setHeaderId : undefined,\n setOpen,\n type,\n ...interactions,\n ...data,\n }),\n [headerId, isOpen, isPortaled, setOpen, type, interactions, data],\n );\n}\n\ntype ContextType = ReturnType<typeof useTooltip> | null;\n\nexport const TooltipContext = createContext<ContextType>(null);\n\nexport const useTooltipContext = (): ReturnType<typeof useTooltip> => {\n const context = useContext(TooltipContext);\n\n if (context === null) {\n throw new Error('Tooltip components must be wrapped in <Tooltip />');\n }\n\n return context;\n};\n"]}
1
+ {"version":3,"file":"use-tooltip.js","sourceRoot":"","sources":["../../../src/tooltip/use-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\nimport {\n autoUpdate,\n type AutoUpdateOptions,\n type ElementProps,\n flip,\n offset,\n type Placement,\n type ReferenceType,\n safePolygon,\n shift,\n useClick,\n useClientPoint,\n useDismiss,\n useFloating,\n type UseFloatingOptions,\n type UseFloatingReturn,\n useFocus,\n useHover,\n useInteractions,\n type UseInteractionsReturn,\n useRole,\n} from '@floating-ui/react';\nimport {\n createContext,\n type PointerEvent as ReactPointerEvent,\n useContext,\n useId,\n useMemo,\n useRef,\n useState,\n} from 'react';\n\nexport interface TooltipOptions {\n isInitialOpen?: boolean;\n placement?: Placement;\n isOpen?: boolean;\n onOpenChange?: UseFloatingOptions['onOpenChange'];\n type?: 'simple' | 'rich';\n isPortaled?: boolean;\n strategy?: 'fixed' | 'absolute';\n hoverDelay?: {\n open: number;\n close: number;\n };\n shouldCloseOnReferenceClick?: boolean;\n autoUpdateOptions?: AutoUpdateOptions;\n isDisabled?: boolean;\n // TODO v5: align followCursor with the Tippy.js convention: `true` should follow\n // the cursor continuously on both axes, with explicit 'horizontal' / 'vertical'\n // values for single-axis following (instead of deriving the axis from `placement`).\n /**\n * Whether the tooltip should be positioned at the mouse cursor. Only applies to 'simple' tooltips with mouse hover.\n * `true` follows the cursor continuously along one axis derived from `placement` (horizontal for top/bottom, vertical for left/right).\n * `'initial'` opens the tooltip at the cursor's position (both axes) and keeps it there, like the native `title` attribute; `placement` controls which side of that point the tooltip appears on.\n */\n followCursor?: boolean | 'initial';\n}\n\nexport function useTooltip({\n isInitialOpen = false,\n placement = 'top',\n isOpen: controlledOpen,\n onOpenChange: setControlledOpen,\n type = 'simple',\n isPortaled = true,\n strategy = 'absolute',\n hoverDelay = undefined,\n shouldCloseOnReferenceClick = false,\n autoUpdateOptions,\n isDisabled = false,\n followCursor = false,\n}: TooltipOptions = {}): {\n headerId?: string;\n setHeaderId?: (id: string | undefined) => void;\n isOpen: boolean;\n setOpen: (open: boolean) => void;\n type: 'simple' | 'rich';\n isPortaled: boolean;\n} & UseInteractionsReturn &\n UseFloatingReturn<ReferenceType> {\n const id = useId();\n const [headerId, setHeaderId] = useState<string | undefined>(id);\n const [isUncontrolledOpen, setIsUncontrolledOpen] = useState(isInitialOpen);\n const isOpen = controlledOpen ?? isUncontrolledOpen;\n const setOpen: NonNullable<UseFloatingOptions['onOpenChange']> =\n setControlledOpen ?? setIsUncontrolledOpen;\n\n // For followCursor='initial': the latest pointer position over the trigger,\n // and a snapshot of it frozen at the moment the tooltip opens.\n const pointerPositionRef = useRef<{ x: number; y: number } | null>(null);\n const [initialCursorPoint, setInitialCursorPoint] = useState<{\n x: number;\n y: number;\n } | null>(null);\n\n const data = useFloating({\n middleware: [\n offset(5),\n flip({\n crossAxis: placement.includes('-'),\n fallbackAxisSideDirection: 'start',\n padding: 5,\n }),\n shift({ padding: 5 }),\n ],\n onOpenChange(open, event, reason) {\n if (followCursor === 'initial') {\n // Only anchor to the cursor for pointer-driven opens; keyboard focus\n // opens fall back to positioning relative to the trigger element.\n const isPointerDrivenOpen = event !== undefined && 'clientX' in event;\n setInitialCursorPoint(\n open && isPointerDrivenOpen ? pointerPositionRef.current : null,\n );\n }\n setOpen(open, event, reason);\n },\n open: isOpen,\n placement,\n strategy,\n whileElementsMounted(referenceEl, floatingEl, update) {\n const cleanup = autoUpdate(referenceEl, floatingEl, update, {\n ...autoUpdateOptions,\n });\n return cleanup;\n },\n });\n\n const context = data.context;\n\n const hover = useHover(context, {\n delay: hoverDelay,\n enabled: type === 'simple' && !isDisabled,\n handleClose: safePolygon(),\n move: false,\n });\n const click = useClick(context, {\n enabled: type === 'rich' && !isDisabled,\n });\n const focus = useFocus(context, {\n enabled: type === 'simple' && !isDisabled,\n visibleOnly: true,\n });\n const dismiss = useDismiss(context, {\n escapeKey: true,\n outsidePress: true,\n referencePress: shouldCloseOnReferenceClick,\n });\n const role = useRole(context, {\n role: type === 'simple' ? 'tooltip' : 'dialog',\n });\n const followAxis =\n placement.startsWith('left') || placement.startsWith('right') ? 'y' : 'x';\n const isInitialFollowCursor = followCursor === 'initial';\n const clientPoint = useClientPoint(context, {\n // 'initial' anchors to the exact cursor point (both axes); `true` follows\n // continuously along the axis derived from `placement`.\n axis: isInitialFollowCursor ? 'both' : followAxis,\n enabled: followCursor !== false && type === 'simple' && !isDisabled,\n // Explicit coordinates lock the position: useClientPoint stops tracking\n // pointer movement when they are provided.\n ...(isInitialFollowCursor && {\n x: initialCursorPoint?.x ?? null,\n y: initialCursorPoint?.y ?? null,\n }),\n });\n\n const initialCursorTracking = useMemo<ElementProps>(() => {\n if (!isInitialFollowCursor) {\n return {};\n }\n const capturePointerPosition = (event: ReactPointerEvent) => {\n pointerPositionRef.current = { x: event.clientX, y: event.clientY };\n };\n return {\n reference: {\n onPointerEnter: capturePointerPosition,\n onPointerMove: capturePointerPosition,\n },\n };\n }, [isInitialFollowCursor]);\n\n const interactions = useInteractions([\n hover,\n focus,\n dismiss,\n role,\n click,\n clientPoint,\n initialCursorTracking,\n ]);\n\n return useMemo(\n () => ({\n headerId: type === 'rich' ? headerId : undefined,\n isOpen,\n isPortaled,\n setHeaderId: type === 'rich' ? setHeaderId : undefined,\n setOpen,\n type,\n ...interactions,\n ...data,\n }),\n [headerId, isOpen, isPortaled, setOpen, type, interactions, data],\n );\n}\n\ntype ContextType = ReturnType<typeof useTooltip> | null;\n\nexport const TooltipContext = createContext<ContextType>(null);\n\nexport const useTooltipContext = (): ReturnType<typeof useTooltip> => {\n const context = useContext(TooltipContext);\n\n if (context === null) {\n throw new Error('Tooltip components must be wrapped in <Tooltip />');\n }\n\n return context;\n};\n"]}
@@ -29,6 +29,11 @@ export function useSemicontrolledState({ state, onChange, isControlled, }) {
29
29
  }
30
30
  onChange === null || onChange === void 0 ? void 0 : onChange(resolved);
31
31
  }, [isControlled, current, onChange]);
32
- return [current, setState];
32
+ const resetInternalState = useCallback((nextState) => {
33
+ if (isControlled !== true) {
34
+ setInternal(nextState);
35
+ }
36
+ }, [isControlled]);
37
+ return [current, setState, resetInternalState];
33
38
  }
34
39
  //# sourceMappingURL=use-semi-controlled-state.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"use-semi-controlled-state.js","sourceRoot":"","sources":["../../../src/_common/use-semi-controlled-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAU9C,MAAM,UAAU,sBAAsB,CAAI,EACxC,KAAK,EACL,QAAQ,EACR,YAAY,GACmB;IAC/B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAI,KAAK,CAAC,CAAC;IAEnD,MAAM,OAAO,GAAG,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEzD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAAuB,EAAE,EAAE;QAC1B,MAAM,QAAQ,GACZ,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAE,IAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAExE,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,WAAW,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC;QACD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,YAAY,EAAE,OAAO,EAAE,QAAQ,CAAC,CAClC,CAAC;IAEF,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;AAC7B,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { useCallback, useState } from 'react';\n\ntype SetStateAction<T> = T | ((prev: T) => T);\n\ntype UseSemiControlledStateProps<T> = {\n state: T;\n onChange?: (next: T) => void;\n isControlled?: boolean;\n};\n\nexport function useSemicontrolledState<T>({\n state,\n onChange,\n isControlled,\n}: UseSemiControlledStateProps<T>): [T, (setState: SetStateAction<T>) => void] {\n const [internal, setInternal] = useState<T>(state);\n\n const current = isControlled === true ? state : internal;\n\n const setState = useCallback(\n (next: SetStateAction<T>) => {\n const resolved =\n typeof next === 'function' ? (next as (prev: T) => T)(current) : next;\n\n if (isControlled !== true) {\n setInternal(resolved);\n }\n onChange?.(resolved);\n },\n [isControlled, current, onChange],\n );\n\n return [current, setState];\n}\n"]}
1
+ {"version":3,"file":"use-semi-controlled-state.js","sourceRoot":"","sources":["../../../src/_common/use-semi-controlled-state.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAU9C,MAAM,UAAU,sBAAsB,CAAI,EACxC,KAAK,EACL,QAAQ,EACR,YAAY,GACmB;IAK/B,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAI,KAAK,CAAC,CAAC;IAEnD,MAAM,OAAO,GAAG,YAAY,KAAK,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC;IAEzD,MAAM,QAAQ,GAAG,WAAW,CAC1B,CAAC,IAAuB,EAAE,EAAE;QAC1B,MAAM,QAAQ,GACZ,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAE,IAAuB,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAExE,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,WAAW,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC;QACD,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,QAAQ,CAAC,CAAC;IACvB,CAAC,EACD,CAAC,YAAY,EAAE,OAAO,EAAE,QAAQ,CAAC,CAClC,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CAAC,SAAY,EAAE,EAAE;QACf,IAAI,YAAY,KAAK,IAAI,EAAE,CAAC;YAC1B,WAAW,CAAC,SAAS,CAAC,CAAC;QACzB,CAAC;IACH,CAAC,EACD,CAAC,YAAY,CAAC,CACf,CAAC;IAEF,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,kBAAkB,CAAC,CAAC;AACjD,CAAC","sourcesContent":["/**\n *\n * Copyright (c) \"Neo4j\"\n * Neo4j Sweden AB [http://neo4j.com]\n *\n * This file is part of Neo4j.\n *\n * Neo4j is free software: you can redistribute it and/or modify\n * it under the terms of the GNU General Public License as published by\n * the Free Software Foundation, either version 3 of the License, or\n * (at your option) any later version.\n *\n * This program is distributed in the hope that it will be useful,\n * but WITHOUT ANY WARRANTY; without even the implied warranty of\n * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n * GNU General Public License for more details.\n *\n * You should have received a copy of the GNU General Public License\n * along with this program. If not, see <http://www.gnu.org/licenses/>.\n */\n\nimport { useCallback, useState } from 'react';\n\ntype SetStateAction<T> = T | ((prev: T) => T);\n\ntype UseSemiControlledStateProps<T> = {\n state: T;\n onChange?: (next: T) => void;\n isControlled?: boolean;\n};\n\nexport function useSemicontrolledState<T>({\n state,\n onChange,\n isControlled,\n}: UseSemiControlledStateProps<T>): [\n T,\n (setState: SetStateAction<T>) => void,\n (state: T) => void,\n] {\n const [internal, setInternal] = useState<T>(state);\n\n const current = isControlled === true ? state : internal;\n\n const setState = useCallback(\n (next: SetStateAction<T>) => {\n const resolved =\n typeof next === 'function' ? (next as (prev: T) => T)(current) : next;\n\n if (isControlled !== true) {\n setInternal(resolved);\n }\n onChange?.(resolved);\n },\n [isControlled, current, onChange],\n );\n\n const resetInternalState = useCallback(\n (nextState: T) => {\n if (isControlled !== true) {\n setInternal(nextState);\n }\n },\n [isControlled],\n );\n\n return [current, setState, resetInternalState];\n}\n"]}