@okta/odyssey-react-mui 0.22.0 → 0.23.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 (280) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/dist/Autocomplete.js +5 -1
  3. package/dist/Autocomplete.js.map +1 -1
  4. package/dist/Banner.js +3 -3
  5. package/dist/Banner.js.map +1 -1
  6. package/dist/Button.js +8 -8
  7. package/dist/Button.js.map +1 -1
  8. package/dist/CheckboxGroup.js +23 -35
  9. package/dist/CheckboxGroup.js.map +1 -1
  10. package/dist/Dialog.js +68 -0
  11. package/dist/Dialog.js.map +1 -0
  12. package/dist/Field.js +18 -5
  13. package/dist/Field.js.map +1 -1
  14. package/dist/FieldLabel.js +3 -3
  15. package/dist/FieldLabel.js.map +1 -1
  16. package/dist/Icon.js +7 -6
  17. package/dist/Icon.js.map +1 -1
  18. package/dist/Infobox.js +1 -1
  19. package/dist/Infobox.js.map +1 -1
  20. package/dist/Link.js +5 -2
  21. package/dist/Link.js.map +1 -1
  22. package/dist/MenuButton.js +3 -2
  23. package/dist/MenuButton.js.map +1 -1
  24. package/dist/MuiPropsChild.js +30 -0
  25. package/dist/MuiPropsChild.js.map +1 -0
  26. package/dist/MuiPropsContext.js +14 -0
  27. package/dist/MuiPropsContext.js.map +1 -0
  28. package/dist/PasswordField.js +8 -3
  29. package/dist/PasswordField.js.map +1 -1
  30. package/dist/RadioGroup.js +25 -26
  31. package/dist/RadioGroup.js.map +1 -1
  32. package/dist/SearchField.js +6 -4
  33. package/dist/SearchField.js.map +1 -1
  34. package/dist/Status.js.map +1 -1
  35. package/dist/TextField.js +17 -8
  36. package/dist/TextField.js.map +1 -1
  37. package/dist/Toast.js +72 -0
  38. package/dist/Toast.js.map +1 -0
  39. package/dist/ToastStack.js +33 -0
  40. package/dist/ToastStack.js.map +1 -0
  41. package/dist/Tooltip.js +20 -0
  42. package/dist/Tooltip.js.map +1 -0
  43. package/dist/iconDictionary/Add.js +4 -4
  44. package/dist/iconDictionary/Add.js.map +1 -1
  45. package/dist/iconDictionary/AddCircle.js +4 -4
  46. package/dist/iconDictionary/AddCircle.js.map +1 -1
  47. package/dist/iconDictionary/AlertCircle.js +4 -4
  48. package/dist/iconDictionary/AlertCircle.js.map +1 -1
  49. package/dist/iconDictionary/AlertCircleFilled.js +4 -4
  50. package/dist/iconDictionary/AlertCircleFilled.js.map +1 -1
  51. package/dist/iconDictionary/AlertTriangleFilled.js +4 -4
  52. package/dist/iconDictionary/AlertTriangleFilled.js.map +1 -1
  53. package/dist/iconDictionary/Anchor.js +5 -5
  54. package/dist/iconDictionary/Anchor.js.map +1 -1
  55. package/dist/iconDictionary/ArrowDown.js +4 -4
  56. package/dist/iconDictionary/ArrowDown.js.map +1 -1
  57. package/dist/iconDictionary/ArrowLeft.js +4 -4
  58. package/dist/iconDictionary/ArrowLeft.js.map +1 -1
  59. package/dist/iconDictionary/ArrowRight.js +4 -4
  60. package/dist/iconDictionary/ArrowRight.js.map +1 -1
  61. package/dist/iconDictionary/ArrowUp.js +4 -4
  62. package/dist/iconDictionary/ArrowUp.js.map +1 -1
  63. package/dist/iconDictionary/ArrowUpDown.js +4 -4
  64. package/dist/iconDictionary/ArrowUpDown.js.map +1 -1
  65. package/dist/iconDictionary/Calendar.js +4 -4
  66. package/dist/iconDictionary/Calendar.js.map +1 -1
  67. package/dist/iconDictionary/Check.js +4 -4
  68. package/dist/iconDictionary/Check.js.map +1 -1
  69. package/dist/iconDictionary/CheckCircleFilled.js +4 -4
  70. package/dist/iconDictionary/CheckCircleFilled.js.map +1 -1
  71. package/dist/iconDictionary/ChevronDown.js +4 -4
  72. package/dist/iconDictionary/ChevronDown.js.map +1 -1
  73. package/dist/iconDictionary/ChevronUp.js +4 -4
  74. package/dist/iconDictionary/ChevronUp.js.map +1 -1
  75. package/dist/iconDictionary/Close.js +4 -4
  76. package/dist/iconDictionary/Close.js.map +1 -1
  77. package/dist/iconDictionary/CloseCircleFilled.js +4 -4
  78. package/dist/iconDictionary/CloseCircleFilled.js.map +1 -1
  79. package/dist/iconDictionary/Copy.js +4 -4
  80. package/dist/iconDictionary/Copy.js.map +1 -1
  81. package/dist/iconDictionary/Delete.js +4 -4
  82. package/dist/iconDictionary/Delete.js.map +1 -1
  83. package/dist/iconDictionary/Download.js +4 -4
  84. package/dist/iconDictionary/Download.js.map +1 -1
  85. package/dist/iconDictionary/DragHandle.js +4 -4
  86. package/dist/iconDictionary/DragHandle.js.map +1 -1
  87. package/dist/iconDictionary/Edit.js +4 -4
  88. package/dist/iconDictionary/Edit.js.map +1 -1
  89. package/dist/iconDictionary/ExternalLink.js +4 -4
  90. package/dist/iconDictionary/ExternalLink.js.map +1 -1
  91. package/dist/iconDictionary/Eye.js +4 -4
  92. package/dist/iconDictionary/Eye.js.map +1 -1
  93. package/dist/iconDictionary/EyeOff.js +4 -4
  94. package/dist/iconDictionary/EyeOff.js.map +1 -1
  95. package/dist/iconDictionary/Filter.js +4 -4
  96. package/dist/iconDictionary/Filter.js.map +1 -1
  97. package/dist/iconDictionary/Globe.js +4 -4
  98. package/dist/iconDictionary/Globe.js.map +1 -1
  99. package/dist/iconDictionary/Home.js +4 -4
  100. package/dist/iconDictionary/Home.js.map +1 -1
  101. package/dist/iconDictionary/InformationCircle.js +4 -4
  102. package/dist/iconDictionary/InformationCircle.js.map +1 -1
  103. package/dist/iconDictionary/InformationCircleFilled.js +4 -4
  104. package/dist/iconDictionary/InformationCircleFilled.js.map +1 -1
  105. package/dist/iconDictionary/Notification.js +4 -4
  106. package/dist/iconDictionary/Notification.js.map +1 -1
  107. package/dist/iconDictionary/OverflowVertical.js +4 -4
  108. package/dist/iconDictionary/OverflowVertical.js.map +1 -1
  109. package/dist/iconDictionary/QuestionCircle.js +4 -4
  110. package/dist/iconDictionary/QuestionCircle.js.map +1 -1
  111. package/dist/iconDictionary/QuestionCircleFilled.js +4 -4
  112. package/dist/iconDictionary/QuestionCircleFilled.js.map +1 -1
  113. package/dist/iconDictionary/Search.js +4 -4
  114. package/dist/iconDictionary/Search.js.map +1 -1
  115. package/dist/iconDictionary/Settings.js +3 -3
  116. package/dist/iconDictionary/Settings.js.map +1 -1
  117. package/dist/iconDictionary/Subtract.js +4 -4
  118. package/dist/iconDictionary/Subtract.js.map +1 -1
  119. package/dist/iconDictionary/User.js +4 -4
  120. package/dist/iconDictionary/User.js.map +1 -1
  121. package/dist/iconDictionary/UserGroup.js +4 -4
  122. package/dist/iconDictionary/UserGroup.js.map +1 -1
  123. package/dist/iconDictionary/index.js.map +1 -1
  124. package/dist/index.js +5 -4
  125. package/dist/index.js.map +1 -1
  126. package/dist/src/Autocomplete.d.ts +2 -1
  127. package/dist/src/Autocomplete.d.ts.map +1 -1
  128. package/dist/src/Banner.d.ts +19 -19
  129. package/dist/src/Banner.d.ts.map +1 -1
  130. package/dist/src/Button.d.ts +4 -3
  131. package/dist/src/Button.d.ts.map +1 -1
  132. package/dist/src/CheckboxGroup.d.ts +7 -4
  133. package/dist/src/CheckboxGroup.d.ts.map +1 -1
  134. package/dist/src/Dialog.d.ts +25 -0
  135. package/dist/src/Dialog.d.ts.map +1 -0
  136. package/dist/src/Field.d.ts +14 -3
  137. package/dist/src/Field.d.ts.map +1 -1
  138. package/dist/src/FieldLabel.d.ts +2 -2
  139. package/dist/src/Icon.d.ts +6 -7
  140. package/dist/src/Icon.d.ts.map +1 -1
  141. package/dist/src/Infobox.d.ts +7 -7
  142. package/dist/src/Infobox.d.ts.map +1 -1
  143. package/dist/src/Link.d.ts +9 -4
  144. package/dist/src/Link.d.ts.map +1 -1
  145. package/dist/src/MenuButton.d.ts +7 -3
  146. package/dist/src/MenuButton.d.ts.map +1 -1
  147. package/dist/src/MenuItem.d.ts +1 -1
  148. package/dist/src/MuiPropsChild.d.ts +18 -0
  149. package/dist/src/MuiPropsChild.d.ts.map +1 -0
  150. package/dist/src/MuiPropsContext.d.ts +15 -0
  151. package/dist/src/MuiPropsContext.d.ts.map +1 -0
  152. package/dist/src/PasswordField.d.ts +8 -8
  153. package/dist/src/PasswordField.d.ts.map +1 -1
  154. package/dist/src/RadioGroup.d.ts +8 -8
  155. package/dist/src/RadioGroup.d.ts.map +1 -1
  156. package/dist/src/SearchField.d.ts +4 -4
  157. package/dist/src/SearchField.d.ts.map +1 -1
  158. package/dist/src/Status.d.ts +2 -2
  159. package/dist/src/Status.d.ts.map +1 -1
  160. package/dist/src/TextField.d.ts +13 -12
  161. package/dist/src/TextField.d.ts.map +1 -1
  162. package/dist/src/Toast.d.ts +60 -0
  163. package/dist/src/Toast.d.ts.map +1 -0
  164. package/dist/src/ToastStack.d.ts +19 -0
  165. package/dist/src/ToastStack.d.ts.map +1 -0
  166. package/dist/src/Tooltip.d.ts +21 -0
  167. package/dist/src/Tooltip.d.ts.map +1 -0
  168. package/dist/src/iconDictionary/Add.d.ts +2 -2
  169. package/dist/src/iconDictionary/AddCircle.d.ts +2 -2
  170. package/dist/src/iconDictionary/AlertCircle.d.ts +2 -2
  171. package/dist/src/iconDictionary/AlertCircleFilled.d.ts +2 -2
  172. package/dist/src/iconDictionary/AlertTriangleFilled.d.ts +2 -2
  173. package/dist/src/iconDictionary/Anchor.d.ts +2 -2
  174. package/dist/src/iconDictionary/ArrowDown.d.ts +2 -2
  175. package/dist/src/iconDictionary/ArrowLeft.d.ts +2 -2
  176. package/dist/src/iconDictionary/ArrowRight.d.ts +2 -2
  177. package/dist/src/iconDictionary/ArrowUp.d.ts +2 -2
  178. package/dist/src/iconDictionary/ArrowUpDown.d.ts +2 -2
  179. package/dist/src/iconDictionary/Calendar.d.ts +2 -2
  180. package/dist/src/iconDictionary/Check.d.ts +2 -2
  181. package/dist/src/iconDictionary/CheckCircleFilled.d.ts +2 -2
  182. package/dist/src/iconDictionary/ChevronDown.d.ts +2 -2
  183. package/dist/src/iconDictionary/ChevronUp.d.ts +2 -2
  184. package/dist/src/iconDictionary/Close.d.ts +2 -2
  185. package/dist/src/iconDictionary/CloseCircleFilled.d.ts +2 -2
  186. package/dist/src/iconDictionary/Copy.d.ts +2 -2
  187. package/dist/src/iconDictionary/Delete.d.ts +2 -2
  188. package/dist/src/iconDictionary/Download.d.ts +2 -2
  189. package/dist/src/iconDictionary/DragHandle.d.ts +2 -2
  190. package/dist/src/iconDictionary/Edit.d.ts +2 -2
  191. package/dist/src/iconDictionary/ExternalLink.d.ts +2 -2
  192. package/dist/src/iconDictionary/Eye.d.ts +2 -2
  193. package/dist/src/iconDictionary/EyeOff.d.ts +2 -2
  194. package/dist/src/iconDictionary/Filter.d.ts +2 -2
  195. package/dist/src/iconDictionary/Globe.d.ts +2 -2
  196. package/dist/src/iconDictionary/Home.d.ts +2 -2
  197. package/dist/src/iconDictionary/InformationCircle.d.ts +2 -2
  198. package/dist/src/iconDictionary/InformationCircleFilled.d.ts +2 -2
  199. package/dist/src/iconDictionary/Notification.d.ts +2 -2
  200. package/dist/src/iconDictionary/OverflowVertical.d.ts +2 -2
  201. package/dist/src/iconDictionary/QuestionCircle.d.ts +2 -2
  202. package/dist/src/iconDictionary/QuestionCircleFilled.d.ts +2 -2
  203. package/dist/src/iconDictionary/Search.d.ts +2 -2
  204. package/dist/src/iconDictionary/Settings.d.ts +2 -2
  205. package/dist/src/iconDictionary/Subtract.d.ts +2 -2
  206. package/dist/src/iconDictionary/User.d.ts +2 -2
  207. package/dist/src/iconDictionary/UserGroup.d.ts +2 -2
  208. package/dist/src/iconDictionary/index.d.ts +40 -40
  209. package/dist/src/index.d.ts +8 -7
  210. package/dist/src/index.d.ts.map +1 -1
  211. package/dist/src/theme/components.d.ts.map +1 -1
  212. package/dist/theme/components.js +32 -12
  213. package/dist/theme/components.js.map +1 -1
  214. package/dist/tsconfig.production.tsbuildinfo +1 -1
  215. package/package.json +3 -3
  216. package/src/Autocomplete.tsx +10 -1
  217. package/src/Banner.tsx +21 -21
  218. package/src/Button.tsx +38 -18
  219. package/src/CheckboxGroup.tsx +27 -34
  220. package/src/Dialog.tsx +110 -0
  221. package/src/Field.tsx +42 -19
  222. package/src/FieldLabel.tsx +7 -7
  223. package/src/Icon.test.tsx +1 -1
  224. package/src/Icon.tsx +24 -7
  225. package/src/Infobox.tsx +7 -7
  226. package/src/Link.tsx +14 -6
  227. package/src/MenuButton.tsx +8 -3
  228. package/src/MuiPropsChild.tsx +41 -0
  229. package/src/MuiPropsContext.ts +17 -0
  230. package/src/PasswordField.tsx +17 -11
  231. package/src/RadioGroup.tsx +31 -46
  232. package/src/SearchField.tsx +10 -8
  233. package/src/Status.tsx +2 -2
  234. package/src/TextField.tsx +32 -21
  235. package/src/Toast.tsx +138 -0
  236. package/src/ToastStack.tsx +33 -0
  237. package/src/Tooltip.tsx +39 -0
  238. package/src/iconDictionary/Add.tsx +3 -3
  239. package/src/iconDictionary/AddCircle.tsx +3 -3
  240. package/src/iconDictionary/AlertCircle.tsx +3 -3
  241. package/src/iconDictionary/AlertCircleFilled.tsx +3 -3
  242. package/src/iconDictionary/AlertTriangleFilled.tsx +3 -3
  243. package/src/iconDictionary/Anchor.tsx +3 -3
  244. package/src/iconDictionary/ArrowDown.tsx +3 -3
  245. package/src/iconDictionary/ArrowLeft.tsx +3 -3
  246. package/src/iconDictionary/ArrowRight.tsx +3 -3
  247. package/src/iconDictionary/ArrowUp.tsx +3 -3
  248. package/src/iconDictionary/ArrowUpDown.tsx +3 -3
  249. package/src/iconDictionary/Calendar.tsx +3 -3
  250. package/src/iconDictionary/Check.tsx +3 -3
  251. package/src/iconDictionary/CheckCircleFilled.tsx +3 -3
  252. package/src/iconDictionary/ChevronDown.tsx +3 -3
  253. package/src/iconDictionary/ChevronUp.tsx +3 -3
  254. package/src/iconDictionary/Close.tsx +3 -3
  255. package/src/iconDictionary/CloseCircleFilled.tsx +3 -3
  256. package/src/iconDictionary/Copy.tsx +3 -3
  257. package/src/iconDictionary/Delete.tsx +3 -3
  258. package/src/iconDictionary/Download.tsx +3 -3
  259. package/src/iconDictionary/DragHandle.tsx +3 -3
  260. package/src/iconDictionary/Edit.tsx +3 -3
  261. package/src/iconDictionary/ExternalLink.tsx +3 -3
  262. package/src/iconDictionary/Eye.tsx +3 -3
  263. package/src/iconDictionary/EyeOff.tsx +3 -3
  264. package/src/iconDictionary/Filter.tsx +3 -3
  265. package/src/iconDictionary/Globe.tsx +3 -3
  266. package/src/iconDictionary/Home.tsx +3 -3
  267. package/src/iconDictionary/InformationCircle.tsx +3 -3
  268. package/src/iconDictionary/InformationCircleFilled.tsx +3 -3
  269. package/src/iconDictionary/Notification.tsx +3 -3
  270. package/src/iconDictionary/OverflowVertical.tsx +3 -3
  271. package/src/iconDictionary/QuestionCircle.tsx +3 -3
  272. package/src/iconDictionary/QuestionCircleFilled.tsx +3 -3
  273. package/src/iconDictionary/Search.tsx +3 -3
  274. package/src/iconDictionary/Settings.tsx +2 -2
  275. package/src/iconDictionary/Subtract.tsx +3 -3
  276. package/src/iconDictionary/User.tsx +3 -3
  277. package/src/iconDictionary/UserGroup.tsx +3 -3
  278. package/src/iconDictionary/index.ts +1 -1
  279. package/src/index.ts +4 -14
  280. package/src/theme/components.tsx +32 -9
package/CHANGELOG.md CHANGED
@@ -3,6 +3,30 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.23.0](https://github.com/okta/odyssey/compare/v0.22.0...v0.23.0) (2023-05-08)
7
+
8
+ ### Features
9
+
10
+ - add uniqueId to MenuButton button ([a06377b](https://github.com/okta/odyssey/commit/a06377b1c10c49b5e68722b0bb775b8277cac781))
11
+ - wrap the Dialog ([1f8b331](https://github.com/okta/odyssey/commit/1f8b3314a135333369f44efc21de097cd0d42712))
12
+ - wrapped Toast ([bf6d5c7](https://github.com/okta/odyssey/commit/bf6d5c779d0b57a0bd74f537ada7be763df1080e))
13
+
14
+ ### Bug Fixes
15
+
16
+ - add Field wrapper to CheckboxGroup and RadioGroup ([#1762](https://github.com/okta/odyssey/issues/1762)) ([6f8c14d](https://github.com/okta/odyssey/commit/6f8c14d9d7ebcf0c5f9bbcb0e867820b5631b7a3))
17
+ - add missing onInput to Autocomplete ([#1757](https://github.com/okta/odyssey/issues/1757)) ([9d6c628](https://github.com/okta/odyssey/commit/9d6c628e3cc8675a6752f5a617d55f580d475c04))
18
+ - add name to fields ([a891438](https://github.com/okta/odyssey/commit/a89143845ddd72ecfa218233cdd3ab0c51e94aca))
19
+ - Fix broken Toast stories ([b5651f6](https://github.com/okta/odyssey/commit/b5651f6eb8d6578305fecd3d92be7c9d18eea27d))
20
+ - fix disabled selection radios ([50be355](https://github.com/okta/odyssey/commit/50be3557e46d23bc9e99bfdcbf668fe097b58fb4))
21
+ - Icon generation now using newest version of SVGR and SVGO ([#1755](https://github.com/okta/odyssey/issues/1755)) ([89a30a3](https://github.com/okta/odyssey/commit/89a30a3685d1bd1600abf3876d910a19ff236f9b))
22
+ - **odyssey-react-mui:** allow pointer-events on :disabled buttons but not :active:disabled ([30bb4bf](https://github.com/okta/odyssey/commit/30bb4bf93edeffe7558204c2cce46ffe7b2b85bf))
23
+ - **odyssey-react-mui:** ensure pointer events are disabled when Button is ([bfd162f](https://github.com/okta/odyssey/commit/bfd162f2ec86d866f8e77b94d0f828440a4c78e2))
24
+ - **odyssey-react-mui:** fix Icon sizing for Checkbox ([96c5acd](https://github.com/okta/odyssey/commit/96c5acdf9916c8db9edbf744f774eb17695b25ef))
25
+ - **odyssey-react-mui:** fixed TextField always showing input adronment ([#1785](https://github.com/okta/odyssey/issues/1785)) ([9170df0](https://github.com/okta/odyssey/commit/9170df0f8c771fdad398e5460766da77f27c0b3e))
26
+ - **odyssey-react-mui:** pass variant and target props to Link ([6594fcd](https://github.com/okta/odyssey/commit/6594fcd801689518da4ec7df13fd33c8726bd44b))
27
+ - **odyssey-react-mui:** the Tooltip not working on Button ([7935b94](https://github.com/okta/odyssey/commit/7935b940dda9969aedaf16b7d9ef776352f7ec28))
28
+ - updated Migration doc ([87c37ca](https://github.com/okta/odyssey/commit/87c37caa7ae39733ddd378a45f8a275af3ac670d))
29
+
6
30
  ## [0.22.0](https://github.com/okta/odyssey/compare/v0.21.4...v0.22.0) (2023-04-21)
7
31
 
8
32
  ### Features
@@ -14,6 +14,7 @@ const Autocomplete = _ref => {
14
14
  hint,
15
15
  label,
16
16
  onChange,
17
+ onInputChange,
17
18
  options,
18
19
  value
19
20
  } = _ref;
@@ -23,8 +24,10 @@ const Autocomplete = _ref => {
23
24
  InputProps,
24
25
  ...params
25
26
  } = _ref2;
26
- return _jsx(Field, { ...InputLabelProps,
27
+ return _jsx(Field, {
28
+ fieldType: "single",
27
29
  hasVisibleLabel: true,
30
+ id: InputLabelProps.htmlFor,
28
31
  hint: hint,
29
32
  label: label,
30
33
  renderFieldComponent: _ref3 => {
@@ -46,6 +49,7 @@ const Autocomplete = _ref => {
46
49
  loading: isLoading,
47
50
  multiple: hasMultipleChoices,
48
51
  onChange: onChange,
52
+ onInputChange: onInputChange,
49
53
  options: options,
50
54
  readOnly: isReadOnly,
51
55
  renderInput: renderInput,
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.js","names":["memo","useCallback","Field","Autocomplete","isCustomValueAllowed","hasMultipleChoices","isDisabled","isLoading","isReadOnly","hint","label","onChange","options","value","renderInput","InputLabelProps","InputProps","params","ariaDescribedBy","id","MemoizedAutocomplete"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n Autocomplete as MuiAutocomplete,\n AutocompleteProps as MuiAutocompleteProps,\n InputBase,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { Field } from \"./Field\";\n\nexport type AutocompleteProps<\n OptionType,\n HasMultipleChoices extends boolean | undefined,\n IsCustomValueAllowed extends boolean | undefined\n> = {\n hasMultipleChoices?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"multiple\"];\n hint?: string;\n isCustomValueAllowed?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"freeSolo\"];\n isDisabled?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"disabled\"];\n isLoading?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"loading\"];\n isReadOnly?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"readOnly\"];\n label: string;\n onChange?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onChange\"];\n options: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"options\"];\n value?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"value\"];\n};\n\nconst Autocomplete = <\n OptionType,\n HasMultipleChoices extends boolean | undefined,\n IsCustomValueAllowed extends boolean | undefined\n>({\n isCustomValueAllowed,\n hasMultipleChoices,\n isDisabled,\n isLoading,\n isReadOnly,\n hint,\n label,\n onChange,\n options,\n value,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n const renderInput = useCallback(\n ({ InputLabelProps, InputProps, ...params }) => (\n <Field\n {...InputLabelProps}\n hasVisibleLabel\n hint={hint}\n label={label}\n renderFieldComponent={({ ariaDescribedBy, id }) => (\n <InputBase\n {...params}\n {...InputProps}\n aria-describedby={ariaDescribedBy}\n id={id}\n />\n )}\n />\n ),\n [hint, label]\n );\n\n return (\n <MuiAutocomplete\n disabled={isDisabled}\n freeSolo={isCustomValueAllowed}\n loading={isLoading}\n multiple={hasMultipleChoices}\n onChange={onChange}\n options={options}\n readOnly={isReadOnly}\n renderInput={renderInput}\n value={value}\n />\n );\n};\n\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAiBA,SAASA,IAAT,EAAeC,WAAf,QAAkC,OAAlC;SAESC,K;;;AA2DT,MAAMC,YAAY,GAAG,QAe0D;EAAA,IAX7E;IACAC,oBADA;IAEAC,kBAFA;IAGAC,UAHA;IAIAC,SAJA;IAKAC,UALA;IAMAC,IANA;IAOAC,KAPA;IAQAC,QARA;IASAC,OATA;IAUAC;EAVA,CAW6E;EAC7E,MAAMC,WAAW,GAAGb,WAAW,CAC7B;IAAA,IAAC;MAAEc,eAAF;MAAmBC,UAAnB;MAA+B,GAAGC;IAAlC,CAAD;IAAA,OACE,KAAC,KAAD,OACMF,eADN;MAEE,eAAe,MAFjB;MAGE,IAAI,EAAEN,IAHR;MAIE,KAAK,EAAEC,KAJT;MAKE,oBAAoB,EAAE;QAAA,IAAC;UAAEQ,eAAF;UAAmBC;QAAnB,CAAD;QAAA,OACpB,sBACMF,MADN;UAAA,GAEMD,UAFN;UAGE,oBAAkBE,eAHpB;UAIE,EAAE,EAAEC;QAJN,EADoB;MAAA;IALxB,EADF;EAAA,CAD6B,EAiB7B,CAACV,IAAD,EAAOC,KAAP,CAjB6B,CAA/B;EAoBA,OACE;IACE,QAAQ,EAAEJ,UADZ;IAEE,QAAQ,EAAEF,oBAFZ;IAGE,OAAO,EAAEG,SAHX;IAIE,QAAQ,EAAEF,kBAJZ;IAKE,QAAQ,EAAEM,QALZ;IAME,OAAO,EAAEC,OANX;IAOE,QAAQ,EAAEJ,UAPZ;IAQE,WAAW,EAAEM,WARf;IASE,KAAK,EAAED;EATT,EADF;AAaD,CAjDD;;AAmDA,MAAMO,oBAAoB,GAAGpB,IAAI,CAACG,YAAD,CAAjC;AAEA,SAASiB,oBAAoB,IAAIjB,YAAjC"}
1
+ {"version":3,"file":"Autocomplete.js","names":["memo","useCallback","Field","Autocomplete","isCustomValueAllowed","hasMultipleChoices","isDisabled","isLoading","isReadOnly","hint","label","onChange","onInputChange","options","value","renderInput","InputLabelProps","InputProps","params","htmlFor","ariaDescribedBy","id","MemoizedAutocomplete"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n Autocomplete as MuiAutocomplete,\n AutocompleteProps as MuiAutocompleteProps,\n InputBase,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { Field } from \"./Field\";\n\nexport type AutocompleteProps<\n OptionType,\n HasMultipleChoices extends boolean | undefined,\n IsCustomValueAllowed extends boolean | undefined\n> = {\n hasMultipleChoices?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"multiple\"];\n hint?: string;\n isCustomValueAllowed?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"freeSolo\"];\n isDisabled?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"disabled\"];\n isLoading?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"loading\"];\n isReadOnly?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"readOnly\"];\n label: string;\n onChange?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onChange\"];\n onInputChange?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onInputChange\"];\n options: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"options\"];\n value?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"value\"];\n};\n\nconst Autocomplete = <\n OptionType,\n HasMultipleChoices extends boolean | undefined,\n IsCustomValueAllowed extends boolean | undefined\n>({\n isCustomValueAllowed,\n hasMultipleChoices,\n isDisabled,\n isLoading,\n isReadOnly,\n hint,\n label,\n onChange,\n onInputChange,\n options,\n value,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n const renderInput = useCallback(\n ({ InputLabelProps, InputProps, ...params }) => (\n <Field\n fieldType=\"single\"\n hasVisibleLabel\n id={InputLabelProps.htmlFor}\n hint={hint}\n label={label}\n renderFieldComponent={({ ariaDescribedBy, id }) => (\n <InputBase\n {...params}\n {...InputProps}\n aria-describedby={ariaDescribedBy}\n id={id}\n />\n )}\n />\n ),\n [hint, label]\n );\n\n return (\n <MuiAutocomplete\n disabled={isDisabled}\n freeSolo={isCustomValueAllowed}\n loading={isLoading}\n multiple={hasMultipleChoices}\n onChange={onChange}\n onInputChange={onInputChange}\n options={options}\n readOnly={isReadOnly}\n renderInput={renderInput}\n value={value}\n />\n );\n};\n\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":";;AAiBA,SAASA,IAAT,EAAeC,WAAf,QAAkC,OAAlC;SAESC,K;;;AAiET,MAAMC,YAAY,GAAG,QAgB0D;EAAA,IAZ7E;IACAC,oBADA;IAEAC,kBAFA;IAGAC,UAHA;IAIAC,SAJA;IAKAC,UALA;IAMAC,IANA;IAOAC,KAPA;IAQAC,QARA;IASAC,aATA;IAUAC,OAVA;IAWAC;EAXA,CAY6E;EAC7E,MAAMC,WAAW,GAAGd,WAAW,CAC7B;IAAA,IAAC;MAAEe,eAAF;MAAmBC,UAAnB;MAA+B,GAAGC;IAAlC,CAAD;IAAA,OACE,KAAC,KAAD;MACE,SAAS,EAAC,QADZ;MAEE,eAAe,MAFjB;MAGE,EAAE,EAAEF,eAAe,CAACG,OAHtB;MAIE,IAAI,EAAEV,IAJR;MAKE,KAAK,EAAEC,KALT;MAME,oBAAoB,EAAE;QAAA,IAAC;UAAEU,eAAF;UAAmBC;QAAnB,CAAD;QAAA,OACpB,sBACMH,MADN;UAAA,GAEMD,UAFN;UAGE,oBAAkBG,eAHpB;UAIE,EAAE,EAAEC;QAJN,EADoB;MAAA;IANxB,EADF;EAAA,CAD6B,EAkB7B,CAACZ,IAAD,EAAOC,KAAP,CAlB6B,CAA/B;EAqBA,OACE;IACE,QAAQ,EAAEJ,UADZ;IAEE,QAAQ,EAAEF,oBAFZ;IAGE,OAAO,EAAEG,SAHX;IAIE,QAAQ,EAAEF,kBAJZ;IAKE,QAAQ,EAAEM,QALZ;IAME,aAAa,EAAEC,aANjB;IAOE,OAAO,EAAEC,OAPX;IAQE,QAAQ,EAAEL,UARZ;IASE,WAAW,EAAEO,WATf;IAUE,KAAK,EAAED;EAVT,EADF;AAcD,CApDD;;AAsDA,MAAMQ,oBAAoB,GAAGtB,IAAI,CAACG,YAAD,CAAjC;AAEA,SAASmB,oBAAoB,IAAInB,YAAjC"}
package/dist/Banner.js CHANGED
@@ -16,11 +16,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
16
16
 
17
17
  const Banner = _ref => {
18
18
  let {
19
- onClose,
20
- severity,
21
- role,
22
19
  linkUrl,
23
20
  linkText,
21
+ onClose,
22
+ role,
23
+ severity,
24
24
  text
25
25
  } = _ref;
26
26
  return _jsxs(Alert, {
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.js","names":["memo","Alert","Link","ScreenReaderText","Banner","onClose","severity","role","linkUrl","linkText","text","MemoizedBanner"],"sources":["../src/Banner.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { AlertColor, AlertProps } from \"@mui/material\";\nimport { memo } from \"react\";\nimport { Alert, Link, ScreenReaderText } from \"./\";\n\nexport interface BannerProps {\n /**\n * Determine the color and icon of the alert\n */\n severity: AlertColor;\n /**\n * Sets the ARIA role of the alert\n * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n * unchanging)\n */\n role?: \"status\" | \"alert\";\n /**\n * The text content of the alert\n */\n text: string;\n /**\n * The function that's fired when the user clicks the close button. If undefined,\n * the close button will not be shown.\n */\n onClose?: AlertProps[\"onClose\"];\n /**\n * If defined, the alert will include a link to the URL\n */\n linkUrl?: string;\n /**\n * If linkUrl is not undefined, this is the text of the link.\n * If left blank, it defaults to \"Learn more\".\n * Note that linkText does nothing if linkUrl is not defined\n */\n linkText?: string;\n}\n\nconst Banner = ({\n onClose,\n severity,\n role,\n linkUrl,\n linkText,\n text,\n}: BannerProps) => (\n <Alert onClose={onClose} role={role} severity={severity} variant=\"banner\">\n <ScreenReaderText>{severity}:</ScreenReaderText>\n {text}\n {linkUrl && (\n <Link href={linkUrl} variant=\"monochrome\">\n {linkText}\n </Link>\n )}\n </Alert>\n);\n\nconst MemoizedBanner = memo(Banner);\n\nexport { MemoizedBanner as Banner };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAT,QAAqB,OAArB;SACSC,K,EAAOC,I,EAAMC,gB;;;;AAkCtB,MAAMC,MAAM,GAAG;EAAA,IAAC;IACdC,OADc;IAEdC,QAFc;IAGdC,IAHc;IAIdC,OAJc;IAKdC,QALc;IAMdC;EANc,CAAD;EAAA,OAQb,MAAC,KAAD;IAAO,OAAO,EAAEL,OAAhB;IAAyB,IAAI,EAAEE,IAA/B;IAAqC,QAAQ,EAAED,QAA/C;IAAyD,OAAO,EAAC,QAAjE;IAAA,WACE,MAAC,gBAAD;MAAA,WAAmBA,QAAnB;IAAA,EADF,EAEGI,IAFH,EAGGF,OAAO,IACN,KAAC,IAAD;MAAM,IAAI,EAAEA,OAAZ;MAAqB,OAAO,EAAC,YAA7B;MAAA,UACGC;IADH,EAJJ;EAAA,EARa;AAAA,CAAf;;AAmBA,MAAME,cAAc,GAAGX,IAAI,CAACI,MAAD,CAA3B;AAEA,SAASO,cAAc,IAAIP,MAA3B"}
1
+ {"version":3,"file":"Banner.js","names":["memo","Alert","Link","ScreenReaderText","Banner","linkUrl","linkText","onClose","role","severity","text","MemoizedBanner"],"sources":["../src/Banner.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { AlertColor, AlertProps } from \"@mui/material\";\nimport { memo } from \"react\";\nimport { Alert, Link, ScreenReaderText } from \"./\";\n\nexport type BannerProps = {\n /**\n * If linkUrl is not undefined, this is the text of the link.\n * If left blank, it defaults to \"Learn more\".\n * Note that linkText does nothing if linkUrl is not defined\n */\n linkText?: string;\n /**\n * If defined, the alert will include a link to the URL\n */\n linkUrl?: string;\n /**\n * The function that's fired when the user clicks the close button. If undefined,\n * the close button will not be shown.\n */\n onClose?: AlertProps[\"onClose\"];\n /**\n * Sets the ARIA role of the alert\n * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n * unchanging)\n */\n role?: \"status\" | \"alert\";\n /**\n * Determine the color and icon of the alert\n */\n severity: AlertColor;\n /**\n * The text content of the alert\n */\n text: string;\n};\n\nconst Banner = ({\n linkUrl,\n linkText,\n onClose,\n role,\n severity,\n text,\n}: BannerProps) => (\n <Alert onClose={onClose} role={role} severity={severity} variant=\"banner\">\n <ScreenReaderText>{severity}:</ScreenReaderText>\n {text}\n {linkUrl && (\n <Link href={linkUrl} variant=\"monochrome\">\n {linkText}\n </Link>\n )}\n </Alert>\n);\n\nconst MemoizedBanner = memo(Banner);\n\nexport { MemoizedBanner as Banner };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAT,QAAqB,OAArB;SACSC,K,EAAOC,I,EAAMC,gB;;;;AAkCtB,MAAMC,MAAM,GAAG;EAAA,IAAC;IACdC,OADc;IAEdC,QAFc;IAGdC,OAHc;IAIdC,IAJc;IAKdC,QALc;IAMdC;EANc,CAAD;EAAA,OAQb,MAAC,KAAD;IAAO,OAAO,EAAEH,OAAhB;IAAyB,IAAI,EAAEC,IAA/B;IAAqC,QAAQ,EAAEC,QAA/C;IAAyD,OAAO,EAAC,QAAjE;IAAA,WACE,MAAC,gBAAD;MAAA,WAAmBA,QAAnB;IAAA,EADF,EAEGC,IAFH,EAGGL,OAAO,IACN,KAAC,IAAD;MAAM,IAAI,EAAEA,OAAZ;MAAqB,OAAO,EAAC,YAA7B;MAAA,UACGC;IADH,EAJJ;EAAA,EARa;AAAA,CAAf;;AAmBA,MAAMK,cAAc,GAAGX,IAAI,CAACI,MAAD,CAA3B;AAEA,SAASO,cAAc,IAAIP,MAA3B"}
package/dist/Button.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import _Button from "@mui/material/Button";
2
- import { Tooltip } from "./index.js";
3
- import { memo } from "react";
2
+ import { memo, useContext, useMemo } from "react";
3
+ import { MuiPropsContext } from "./MuiPropsContext.js";
4
+ import { Tooltip } from "./Tooltip.js";
4
5
  import { jsx as _jsx } from "react/jsx-runtime";
5
6
  import { Fragment as _Fragment } from "react/jsx-runtime";
6
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -18,8 +19,8 @@ const Button = _ref => {
18
19
  tooltipText,
19
20
  variant
20
21
  } = _ref;
21
-
22
- const button = _jsx(_Button, {
22
+ const muiProps = useContext(MuiPropsContext);
23
+ const button = useMemo(() => _jsx(_Button, { ...muiProps,
23
24
  disabled: isDisabled,
24
25
  endIcon: endIcon,
25
26
  fullWidth: isFullWidth,
@@ -29,13 +30,12 @@ const Button = _ref => {
29
30
  startIcon: startIcon,
30
31
  variant: variant,
31
32
  children: text
32
- });
33
-
33
+ }), [endIcon, id, isDisabled, isFullWidth, muiProps, onClick, size, startIcon, text, variant]);
34
34
  return _jsxs(_Fragment, {
35
35
  children: [tooltipText && _jsx(Tooltip, {
36
- describeChild: true,
36
+ ariaType: "description",
37
37
  placement: "top",
38
- title: tooltipText,
38
+ text: tooltipText,
39
39
  children: button
40
40
  }), !tooltipText && button]
41
41
  });
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","names":["Tooltip","memo","Button","endIcon","id","isDisabled","isFullWidth","onClick","size","startIcon","text","tooltipText","variant","button","MemoizedButton"],"sources":["../src/Button.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport { Tooltip } from \"./\";\nimport { memo } from \"react\";\n\nexport type ButtonProps = {\n endIcon?: React.ReactNode;\n id?: string;\n isDisabled?: boolean;\n isFullWidth?: boolean;\n onClick?: MuiButtonProps[\"onClick\"];\n size?: MuiButtonProps[\"size\"];\n startIcon?: React.ReactNode;\n text?: string;\n /**\n * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.\n */\n tooltipText?: string;\n variant?: \"primary\" | \"secondary\" | \"danger\" | \"floating\";\n};\n\nconst Button = ({\n endIcon,\n id,\n isDisabled,\n isFullWidth,\n onClick,\n size = \"medium\",\n startIcon,\n text,\n tooltipText,\n variant,\n}: ButtonProps) => {\n const button = (\n <MuiButton\n disabled={isDisabled}\n endIcon={endIcon}\n fullWidth={isFullWidth}\n id={id}\n onClick={onClick}\n size={size}\n startIcon={startIcon}\n variant={variant}\n >\n {text}\n </MuiButton>\n );\n\n return (\n <>\n {tooltipText && (\n <Tooltip describeChild placement=\"top\" title={tooltipText}>\n {button}\n </Tooltip>\n )}\n {!tooltipText && button}\n </>\n );\n};\n\nconst MemoizedButton = memo(Button);\n\nexport { MemoizedButton as Button };\n"],"mappings":";SAcSA,O;AACT,SAASC,IAAT,QAAqB,OAArB;;;;;AAkBA,MAAMC,MAAM,GAAG,QAWI;EAAA,IAXH;IACdC,OADc;IAEdC,EAFc;IAGdC,UAHc;IAIdC,WAJc;IAKdC,OALc;IAMdC,IAAI,GAAG,QANO;IAOdC,SAPc;IAQdC,IARc;IASdC,WATc;IAUdC;EAVc,CAWG;;EACjB,MAAMC,MAAM,GACV;IACE,QAAQ,EAAER,UADZ;IAEE,OAAO,EAAEF,OAFX;IAGE,SAAS,EAAEG,WAHb;IAIE,EAAE,EAAEF,EAJN;IAKE,OAAO,EAAEG,OALX;IAME,IAAI,EAAEC,IANR;IAOE,SAAS,EAAEC,SAPb;IAQE,OAAO,EAAEG,OARX;IAAA,UAUGF;EAVH,EADF;;EAeA,OACE;IAAA,WACGC,WAAW,IACV,KAAC,OAAD;MAAS,aAAa,MAAtB;MAAuB,SAAS,EAAC,KAAjC;MAAuC,KAAK,EAAEA,WAA9C;MAAA,UACGE;IADH,EAFJ,EAMG,CAACF,WAAD,IAAgBE,MANnB;EAAA,EADF;AAUD,CArCD;;AAuCA,MAAMC,cAAc,GAAGb,IAAI,CAACC,MAAD,CAA3B;AAEA,SAASY,cAAc,IAAIZ,MAA3B"}
1
+ {"version":3,"file":"Button.js","names":["memo","useContext","useMemo","MuiPropsContext","Tooltip","Button","endIcon","id","isDisabled","isFullWidth","onClick","size","startIcon","text","tooltipText","variant","muiProps","button","MemoizedButton"],"sources":["../src/Button.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport { memo, ReactElement, useContext, useMemo } from \"react\";\n\nimport { Icon } from \"./Icon\";\nimport { MuiPropsContext } from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\n\nexport type ButtonProps = {\n endIcon?: ReactElement<typeof Icon>;\n id?: string;\n isDisabled?: boolean;\n isFullWidth?: boolean;\n onClick?: MuiButtonProps[\"onClick\"];\n size?: MuiButtonProps[\"size\"];\n startIcon?: ReactElement<typeof Icon>;\n text?: string;\n /**\n * `tooltipText` determines the text of the tooltip that wraps the button if it's icon-only.\n */\n tooltipText?: string;\n variant?: \"primary\" | \"secondary\" | \"danger\" | \"floating\";\n};\n\nconst Button = ({\n endIcon,\n id,\n isDisabled,\n isFullWidth,\n onClick,\n size = \"medium\",\n startIcon,\n text,\n tooltipText,\n variant,\n}: ButtonProps) => {\n const muiProps = useContext(MuiPropsContext);\n\n const button = useMemo(\n () => (\n <MuiButton\n {...muiProps}\n disabled={isDisabled}\n endIcon={endIcon}\n fullWidth={isFullWidth}\n id={id}\n onClick={onClick}\n size={size}\n startIcon={startIcon}\n variant={variant}\n >\n {text}\n </MuiButton>\n ),\n [\n endIcon,\n id,\n isDisabled,\n isFullWidth,\n muiProps,\n onClick,\n size,\n startIcon,\n text,\n variant,\n ]\n );\n\n return (\n <>\n {tooltipText && (\n <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n {button}\n </Tooltip>\n )}\n {!tooltipText && button}\n </>\n );\n};\n\nconst MemoizedButton = memo(Button);\n\nexport { MemoizedButton as Button };\n"],"mappings":";AAcA,SAASA,IAAT,EAA6BC,UAA7B,EAAyCC,OAAzC,QAAwD,OAAxD;SAGSC,e;SACAC,O;;;;;AAkBT,MAAMC,MAAM,GAAG,QAWI;EAAA,IAXH;IACdC,OADc;IAEdC,EAFc;IAGdC,UAHc;IAIdC,WAJc;IAKdC,OALc;IAMdC,IAAI,GAAG,QANO;IAOdC,SAPc;IAQdC,IARc;IASdC,WATc;IAUdC;EAVc,CAWG;EACjB,MAAMC,QAAQ,GAAGf,UAAU,CAACE,eAAD,CAA3B;EAEA,MAAMc,MAAM,GAAGf,OAAO,CACpB,MACE,mBACMc,QADN;IAEE,QAAQ,EAAER,UAFZ;IAGE,OAAO,EAAEF,OAHX;IAIE,SAAS,EAAEG,WAJb;IAKE,EAAE,EAAEF,EALN;IAME,OAAO,EAAEG,OANX;IAOE,IAAI,EAAEC,IAPR;IAQE,SAAS,EAAEC,SARb;IASE,OAAO,EAAEG,OATX;IAAA,UAWGF;EAXH,EAFkB,EAgBpB,CACEP,OADF,EAEEC,EAFF,EAGEC,UAHF,EAIEC,WAJF,EAKEO,QALF,EAMEN,OANF,EAOEC,IAPF,EAQEC,SARF,EASEC,IATF,EAUEE,OAVF,CAhBoB,CAAtB;EA8BA,OACE;IAAA,WACGD,WAAW,IACV,KAAC,OAAD;MAAS,QAAQ,EAAC,aAAlB;MAAgC,SAAS,EAAC,KAA1C;MAAgD,IAAI,EAAEA,WAAtD;MAAA,UACGG;IADH,EAFJ,EAMG,CAACH,WAAD,IAAgBG,MANnB;EAAA,EADF;AAUD,CAtDD;;AAwDA,MAAMC,cAAc,GAAGlB,IAAI,CAACK,MAAD,CAA3B;AAEA,SAASa,cAAc,IAAIb,MAA3B"}
@@ -1,18 +1,7 @@
1
- /*!
2
- * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
3
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
4
- *
5
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
6
- * Unless required by applicable law or agreed to in writing, software
7
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
8
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
9
- *
10
- * See the License for the specific language governing permissions and limitations under the License.
11
- */
12
- import { memo, useMemo } from "react";
13
- import { FormControl, FormGroup, FormHelperText, FormLabel, ScreenReaderText } from "./index.js";
1
+ import _FormGroup from "@mui/material/FormGroup";
2
+ import { memo, useCallback } from "react";
3
+ import { Field } from "./Field.js";
14
4
  import { jsx as _jsx } from "react/jsx-runtime";
15
- import { jsxs as _jsxs } from "react/jsx-runtime";
16
5
 
17
6
  const CheckboxGroup = _ref => {
18
7
  let {
@@ -20,30 +9,29 @@ const CheckboxGroup = _ref => {
20
9
  isDisabled,
21
10
  errorMessage,
22
11
  hint,
23
- label,
24
- name
12
+ id: idOverride,
13
+ label
25
14
  } = _ref;
26
- const ariaDescribedBy = useMemo(() => errorMessage || hint ? [hint && `${name}-hint`, errorMessage && `${name}-error`].filter(Boolean).join(" ") : undefined, [errorMessage, hint, name]);
27
- return _jsxs(FormControl, {
28
- component: "fieldset",
29
- disabled: isDisabled,
30
- error: Boolean(errorMessage),
31
- children: [label && _jsx(FormLabel, {
32
- component: "legend",
33
- children: label
34
- }), hint && _jsx(FormHelperText, {
35
- id: `${name}-hint`,
36
- children: hint
37
- }), _jsx(FormGroup, {
15
+ const renderFieldComponent = useCallback(_ref2 => {
16
+ let {
17
+ ariaDescribedBy,
18
+ id
19
+ } = _ref2;
20
+ return _jsx(_FormGroup, {
38
21
  "aria-describedby": ariaDescribedBy,
22
+ id: id,
39
23
  children: children
40
- }), errorMessage && _jsxs(FormHelperText, {
41
- id: `${name}-error`,
42
- error: true,
43
- children: [_jsx(ScreenReaderText, {
44
- children: "Error:"
45
- }), " ", errorMessage]
46
- })]
24
+ });
25
+ }, [children]);
26
+ return _jsx(Field, {
27
+ errorMessage: errorMessage,
28
+ fieldType: "group",
29
+ hasVisibleLabel: false,
30
+ hint: hint,
31
+ id: idOverride,
32
+ isDisabled: isDisabled,
33
+ label: label,
34
+ renderFieldComponent: renderFieldComponent
47
35
  });
48
36
  };
49
37
 
@@ -1 +1 @@
1
- {"version":3,"file":"CheckboxGroup.js","names":["memo","useMemo","FormControl","FormGroup","FormHelperText","FormLabel","ScreenReaderText","CheckboxGroup","children","isDisabled","errorMessage","hint","label","name","ariaDescribedBy","filter","Boolean","join","undefined","MemoizedCheckboxGroup"],"sources":["../src/CheckboxGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useMemo } from \"react\";\n\nimport {\n Checkbox,\n FormControl,\n FormGroup,\n FormHelperText,\n FormLabel,\n ScreenReaderText,\n} from \".\";\n\nexport type CheckboxGroupProps = {\n children:\n | ReactElement<typeof Checkbox>\n | Array<ReactElement<typeof Checkbox>>;\n errorMessage?: string;\n hint?: string;\n isDisabled?: boolean;\n label?: string;\n name?: string;\n};\n\nconst CheckboxGroup = ({\n children,\n isDisabled,\n errorMessage,\n hint,\n label,\n name,\n}: CheckboxGroupProps) => {\n const ariaDescribedBy = useMemo(\n () =>\n errorMessage || hint\n ? [hint && `${name}-hint`, errorMessage && `${name}-error`]\n .filter(Boolean)\n .join(\" \")\n : undefined,\n [errorMessage, hint, name]\n );\n\n return (\n <FormControl\n component=\"fieldset\"\n disabled={isDisabled}\n error={Boolean(errorMessage)}\n >\n {label && <FormLabel component=\"legend\">{label}</FormLabel>}\n {hint && <FormHelperText id={`${name}-hint`}>{hint}</FormHelperText>}\n <FormGroup aria-describedby={ariaDescribedBy}>{children}</FormGroup>\n {errorMessage && (\n <FormHelperText id={`${name}-error`} error>\n <ScreenReaderText>Error:</ScreenReaderText> {errorMessage}\n </FormHelperText>\n )}\n </FormControl>\n );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,EAA6BC,OAA7B,QAA4C,OAA5C;SAIEC,W,EACAC,S,EACAC,c,EACAC,S,EACAC,gB;;;;AAcF,MAAMC,aAAa,GAAG,QAOI;EAAA,IAPH;IACrBC,QADqB;IAErBC,UAFqB;IAGrBC,YAHqB;IAIrBC,IAJqB;IAKrBC,KALqB;IAMrBC;EANqB,CAOG;EACxB,MAAMC,eAAe,GAAGb,OAAO,CAC7B,MACES,YAAY,IAAIC,IAAhB,GACI,CAACA,IAAI,IAAK,GAAEE,IAAK,OAAjB,EAAyBH,YAAY,IAAK,GAAEG,IAAK,QAAjD,EACGE,MADH,CACUC,OADV,EAEGC,IAFH,CAEQ,GAFR,CADJ,GAIIC,SANuB,EAO7B,CAACR,YAAD,EAAeC,IAAf,EAAqBE,IAArB,CAP6B,CAA/B;EAUA,OACE,MAAC,WAAD;IACE,SAAS,EAAC,UADZ;IAEE,QAAQ,EAAEJ,UAFZ;IAGE,KAAK,EAAEO,OAAO,CAACN,YAAD,CAHhB;IAAA,WAKGE,KAAK,IAAI,KAAC,SAAD;MAAW,SAAS,EAAC,QAArB;MAAA,UAA+BA;IAA/B,EALZ,EAMGD,IAAI,IAAI,KAAC,cAAD;MAAgB,EAAE,EAAG,GAAEE,IAAK,OAA5B;MAAA,UAAqCF;IAArC,EANX,EAOE,KAAC,SAAD;MAAW,oBAAkBG,eAA7B;MAAA,UAA+CN;IAA/C,EAPF,EAQGE,YAAY,IACX,MAAC,cAAD;MAAgB,EAAE,EAAG,GAAEG,IAAK,QAA5B;MAAqC,KAAK,MAA1C;MAAA,WACE,KAAC,gBAAD;QAAA;MAAA,EADF,OAC+CH,YAD/C;IAAA,EATJ;EAAA,EADF;AAgBD,CAlCD;;AAoCA,MAAMS,qBAAqB,GAAGnB,IAAI,CAACO,aAAD,CAAlC;AAEA,SAASY,qBAAqB,IAAIZ,aAAlC"}
1
+ {"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","CheckboxGroup","children","isDisabled","errorMessage","hint","id","idOverride","label","renderFieldComponent","ariaDescribedBy","MemoizedCheckboxGroup"],"sources":["../src/CheckboxGroup.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\n\nexport type CheckboxGroupProps = {\n children:\n | ReactElement<typeof Checkbox>\n | Array<ReactElement<typeof Checkbox>>;\n errorMessage?: string;\n hint?: string;\n /**\n * The id of the `input` element. This will also be the input's `name` field.\n */\n id?: string;\n isDisabled?: boolean;\n label: string;\n};\n\nconst CheckboxGroup = ({\n children,\n isDisabled,\n errorMessage,\n hint,\n id: idOverride,\n label,\n}: CheckboxGroupProps) => {\n const renderFieldComponent = useCallback(\n ({ ariaDescribedBy, id }) => (\n <MuiFormGroup aria-describedby={ariaDescribedBy} id={id}>\n {children}\n </MuiFormGroup>\n ),\n [children]\n );\n\n return (\n <Field\n errorMessage={errorMessage}\n fieldType=\"group\"\n hasVisibleLabel={false}\n hint={hint}\n id={idOverride}\n isDisabled={isDisabled}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAaA,SAASA,IAAT,EAA6BC,WAA7B,QAAgD,OAAhD;SAGSC,K;;;AAgBT,MAAMC,aAAa,GAAG,QAOI;EAAA,IAPH;IACrBC,QADqB;IAErBC,UAFqB;IAGrBC,YAHqB;IAIrBC,IAJqB;IAKrBC,EAAE,EAAEC,UALiB;IAMrBC;EANqB,CAOG;EACxB,MAAMC,oBAAoB,GAAGV,WAAW,CACtC;IAAA,IAAC;MAAEW,eAAF;MAAmBJ;IAAnB,CAAD;IAAA,OACE;MAAc,oBAAkBI,eAAhC;MAAiD,EAAE,EAAEJ,EAArD;MAAA,UACGJ;IADH,EADF;EAAA,CADsC,EAMtC,CAACA,QAAD,CANsC,CAAxC;EASA,OACE,KAAC,KAAD;IACE,YAAY,EAAEE,YADhB;IAEE,SAAS,EAAC,OAFZ;IAGE,eAAe,EAAE,KAHnB;IAIE,IAAI,EAAEC,IAJR;IAKE,EAAE,EAAEE,UALN;IAME,UAAU,EAAEJ,UANd;IAOE,KAAK,EAAEK,KAPT;IAQE,oBAAoB,EAAEC;EARxB,EADF;AAYD,CA7BD;;AA+BA,MAAME,qBAAqB,GAAGb,IAAI,CAACG,aAAD,CAAlC;AAEA,SAASU,qBAAqB,IAAIV,aAAlC"}
package/dist/Dialog.js ADDED
@@ -0,0 +1,68 @@
1
+ import _Dialog from "@mui/material/Dialog";
2
+ import _DialogActions from "@mui/material/DialogActions";
3
+ import _DialogContent from "@mui/material/DialogContent";
4
+ import _DialogTitle from "@mui/material/DialogTitle";
5
+ import _DialogContentText from "@mui/material/DialogContentText";
6
+ import { Button, CloseIcon } from "./index.js";
7
+ import { memo, useState, useEffect, useRef } from "react";
8
+ import { jsx as _jsx } from "react/jsx-runtime";
9
+ import { jsxs as _jsxs } from "react/jsx-runtime";
10
+
11
+ const Dialog = _ref => {
12
+ let {
13
+ callToActionPrimaryComponent,
14
+ callToActionSecondaryComponent,
15
+ callToActionTertiaryComponent,
16
+ children,
17
+ isOpen,
18
+ onClose,
19
+ title
20
+ } = _ref;
21
+ const [isContentScrollable, setIsContentScrollable] = useState(false);
22
+ const dialogContentRef = useRef(null);
23
+ useEffect(() => {
24
+ let frameId;
25
+
26
+ const handleContentScroll = () => {
27
+ const dialogContentElement = dialogContentRef.current;
28
+
29
+ if (dialogContentElement) {
30
+ setIsContentScrollable(dialogContentElement.scrollHeight > dialogContentElement.clientHeight);
31
+ }
32
+
33
+ frameId = requestAnimationFrame(handleContentScroll);
34
+ };
35
+
36
+ if (isOpen) {
37
+ frameId = requestAnimationFrame(handleContentScroll);
38
+ }
39
+
40
+ return () => {
41
+ cancelAnimationFrame(frameId);
42
+ };
43
+ }, [isOpen]);
44
+ const content = typeof children === "string" ? _jsx(_DialogContentText, {
45
+ children: children
46
+ }) : children;
47
+ return _jsxs(_Dialog, {
48
+ open: isOpen,
49
+ onClose: onClose,
50
+ children: [_jsxs(_DialogTitle, {
51
+ children: [title, _jsx(Button, {
52
+ variant: "floating",
53
+ onClick: onClose,
54
+ startIcon: _jsx(CloseIcon, {})
55
+ })]
56
+ }), _jsx(_DialogContent, {
57
+ dividers: isContentScrollable,
58
+ ref: dialogContentRef,
59
+ children: content
60
+ }), (callToActionPrimaryComponent || callToActionSecondaryComponent || callToActionTertiaryComponent) && _jsxs(_DialogActions, {
61
+ children: [callToActionTertiaryComponent, callToActionSecondaryComponent, callToActionPrimaryComponent]
62
+ })]
63
+ });
64
+ };
65
+
66
+ const MemoizedDialog = memo(Dialog);
67
+ export { MemoizedDialog as Dialog };
68
+ //# sourceMappingURL=Dialog.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Dialog.js","names":["Button","CloseIcon","memo","useState","useEffect","useRef","Dialog","callToActionPrimaryComponent","callToActionSecondaryComponent","callToActionTertiaryComponent","children","isOpen","onClose","title","isContentScrollable","setIsContentScrollable","dialogContentRef","frameId","handleContentScroll","dialogContentElement","current","scrollHeight","clientHeight","requestAnimationFrame","cancelAnimationFrame","content","MemoizedDialog"],"sources":["../src/Dialog.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Dialog as MuiDialog } from \"@mui/material\";\nimport {\n DialogTitle,\n DialogContent,\n DialogContentText,\n DialogActions,\n} from \"@mui/material\";\nimport { Button, CloseIcon } from \"./\";\nimport {\n memo,\n ReactNode,\n useState,\n useEffect,\n useRef,\n ReactElement,\n} from \"react\";\n\nexport type DialogProps = {\n callToActionPrimaryComponent?: ReactElement<typeof Button>;\n callToActionSecondaryComponent?: ReactElement<typeof Button>;\n callToActionTertiaryComponent?: ReactElement<typeof Button>;\n children: ReactNode | Array<ReactNode>;\n onClose: () => void;\n isOpen: boolean;\n title: string;\n};\n\nconst Dialog = ({\n callToActionPrimaryComponent,\n callToActionSecondaryComponent,\n callToActionTertiaryComponent,\n children,\n isOpen,\n onClose,\n title,\n}: DialogProps) => {\n const [isContentScrollable, setIsContentScrollable] = useState(false);\n const dialogContentRef = useRef<HTMLDivElement>(null);\n\n useEffect(() => {\n let frameId: number;\n\n const handleContentScroll = () => {\n const dialogContentElement = dialogContentRef.current;\n if (dialogContentElement) {\n setIsContentScrollable(\n dialogContentElement.scrollHeight > dialogContentElement.clientHeight\n );\n }\n frameId = requestAnimationFrame(handleContentScroll);\n };\n\n if (isOpen) {\n frameId = requestAnimationFrame(handleContentScroll);\n }\n\n return () => {\n cancelAnimationFrame(frameId);\n };\n }, [isOpen]);\n\n const content =\n typeof children === \"string\" ? (\n <DialogContentText>{children}</DialogContentText>\n ) : (\n children\n );\n\n return (\n <MuiDialog open={isOpen} onClose={onClose}>\n <DialogTitle>\n {title}\n <Button\n variant=\"floating\"\n onClick={onClose}\n startIcon={<CloseIcon />}\n />\n </DialogTitle>\n <DialogContent dividers={isContentScrollable} ref={dialogContentRef}>\n {content}\n </DialogContent>\n\n {(callToActionPrimaryComponent ||\n callToActionSecondaryComponent ||\n callToActionTertiaryComponent) && (\n <DialogActions>\n {callToActionTertiaryComponent}\n {callToActionSecondaryComponent}\n {callToActionPrimaryComponent}\n </DialogActions>\n )}\n </MuiDialog>\n );\n};\n\nconst MemoizedDialog = memo(Dialog);\n\nexport { MemoizedDialog as Dialog };\n"],"mappings":";;;;;SAmBSA,M,EAAQC,S;AACjB,SACEC,IADF,EAGEC,QAHF,EAIEC,SAJF,EAKEC,MALF,QAOO,OAPP;;;;AAmBA,MAAMC,MAAM,GAAG,QAQI;EAAA,IARH;IACdC,4BADc;IAEdC,8BAFc;IAGdC,6BAHc;IAIdC,QAJc;IAKdC,MALc;IAMdC,OANc;IAOdC;EAPc,CAQG;EACjB,MAAM,CAACC,mBAAD,EAAsBC,sBAAtB,IAAgDZ,QAAQ,CAAC,KAAD,CAA9D;EACA,MAAMa,gBAAgB,GAAGX,MAAM,CAAiB,IAAjB,CAA/B;EAEAD,SAAS,CAAC,MAAM;IACd,IAAIa,OAAJ;;IAEA,MAAMC,mBAAmB,GAAG,MAAM;MAChC,MAAMC,oBAAoB,GAAGH,gBAAgB,CAACI,OAA9C;;MACA,IAAID,oBAAJ,EAA0B;QACxBJ,sBAAsB,CACpBI,oBAAoB,CAACE,YAArB,GAAoCF,oBAAoB,CAACG,YADrC,CAAtB;MAGD;;MACDL,OAAO,GAAGM,qBAAqB,CAACL,mBAAD,CAA/B;IACD,CARD;;IAUA,IAAIP,MAAJ,EAAY;MACVM,OAAO,GAAGM,qBAAqB,CAACL,mBAAD,CAA/B;IACD;;IAED,OAAO,MAAM;MACXM,oBAAoB,CAACP,OAAD,CAApB;IACD,CAFD;EAGD,CApBQ,EAoBN,CAACN,MAAD,CApBM,CAAT;EAsBA,MAAMc,OAAO,GACX,OAAOf,QAAP,KAAoB,QAApB,GACE;IAAA,UAAoBA;EAApB,EADF,GAGEA,QAJJ;EAOA,OACE;IAAW,IAAI,EAAEC,MAAjB;IAAyB,OAAO,EAAEC,OAAlC;IAAA,WACE;MAAA,WACGC,KADH,EAEE,KAAC,MAAD;QACE,OAAO,EAAC,UADV;QAEE,OAAO,EAAED,OAFX;QAGE,SAAS,EAAE,KAAC,SAAD;MAHb,EAFF;IAAA,EADF,EASE;MAAe,QAAQ,EAAEE,mBAAzB;MAA8C,GAAG,EAAEE,gBAAnD;MAAA,UACGS;IADH,EATF,EAaG,CAAClB,4BAA4B,IAC5BC,8BADA,IAEAC,6BAFD,KAGC;MAAA,WACGA,6BADH,EAEGD,8BAFH,EAGGD,4BAHH;IAAA,EAhBJ;EAAA,EADF;AAyBD,CAlED;;AAoEA,MAAMmB,cAAc,GAAGxB,IAAI,CAACI,MAAD,CAA3B;AAEA,SAASoB,cAAc,IAAIpB,MAA3B"}
package/dist/Field.js CHANGED
@@ -1,3 +1,6 @@
1
+ import _FormControl from "@mui/material/FormControl";
2
+ import _FormLabel from "@mui/material/FormLabel";
3
+
1
4
  /*!
2
5
  * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
3
6
  * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
@@ -10,18 +13,23 @@
10
13
  * See the License for the specific language governing permissions and limitations under the License.
11
14
  */
12
15
  import { memo, useMemo } from "react";
13
- import { FieldError, FieldHint, FieldLabel, FormControl, useUniqueId } from "./index.js";
16
+ import { FieldError } from "./FieldError.js";
17
+ import { FieldHint } from "./FieldHint.js";
18
+ import { FieldLabel } from "./FieldLabel.js";
19
+ import { useUniqueId } from "./useUniqueId.js";
14
20
  import { jsx as _jsx } from "react/jsx-runtime";
15
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
22
 
17
23
  const Field = _ref => {
18
24
  let {
19
25
  errorMessage,
26
+ fieldType,
20
27
  hasVisibleLabel,
21
28
  hint,
22
29
  id: idOverride,
23
30
  isDisabled = false,
24
- isRequired = true,
31
+ isRadioGroup = false,
32
+ isOptional = false,
25
33
  label,
26
34
  optionalLabel,
27
35
  renderFieldComponent
@@ -31,14 +39,19 @@ const Field = _ref => {
31
39
  const errorId = errorMessage ? `${id}-error` : undefined;
32
40
  const labelId = `${id}-label`;
33
41
  const ariaDescribedBy = useMemo(() => [hintId, errorId].join(" ").trim() || undefined, [errorId, hintId]);
34
- return _jsxs(FormControl, {
42
+ return _jsxs(_FormControl, {
43
+ component: fieldType === "group" ? "fieldset" : "div",
35
44
  disabled: isDisabled,
36
45
  error: Boolean(errorMessage),
37
- children: [_jsx(FieldLabel, {
46
+ role: isRadioGroup ? "radiogroup" : undefined,
47
+ children: [fieldType === "group" ? _jsx(_FormLabel, {
48
+ component: "legend",
49
+ children: label
50
+ }) : _jsx(FieldLabel, {
38
51
  hasVisibleLabel: hasVisibleLabel,
39
52
  id: labelId,
40
53
  inputId: id,
41
- isRequired: isRequired,
54
+ isOptional: isOptional,
42
55
  optionalText: optionalLabel,
43
56
  text: label
44
57
  }), hint && _jsx(FieldHint, {
package/dist/Field.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","FormControl","useUniqueId","Field","errorMessage","hasVisibleLabel","hint","id","idOverride","isDisabled","isRequired","label","optionalLabel","renderFieldComponent","hintId","undefined","errorId","labelId","ariaDescribedBy","join","trim","Boolean","MemoizedField"],"sources":["../src/Field.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useMemo } from \"react\";\n\nimport {\n FieldError,\n FieldHint,\n FieldLabel,\n FormControl,\n useUniqueId,\n} from \"./\";\n\nexport type FieldProps = {\n /**\n * If `error` is not undefined, the `input` will indicate an error.\n */\n errorMessage?: string;\n hasVisibleLabel: boolean;\n /**\n * The helper text content.\n */\n hint?: string;\n /**\n * The id of the `input` element.\n */\n id?: string;\n /**\n * If `true`, the component is disabled.\n */\n isDisabled?: boolean;\n /**\n * If `true`, the `input` element is required.\n */\n isRequired?: boolean;\n /**\n * The label for the `input` element.\n */\n label: string;\n /**\n * The label for the `input` element if the it's not optional\n */\n optionalLabel?: string;\n /**\n * The short hint displayed in the `input` before the user enters a value.\n */\n placeholder?: string;\n renderFieldComponent: ({\n ariaDescribedBy,\n id,\n }: {\n ariaDescribedBy?: string;\n id: string;\n }) => ReactElement;\n};\n\nconst Field = ({\n errorMessage,\n hasVisibleLabel,\n hint,\n id: idOverride,\n isDisabled = false,\n isRequired = true,\n label,\n optionalLabel,\n renderFieldComponent,\n}: FieldProps) => {\n const id = useUniqueId(idOverride);\n const hintId = hint ? `${id}-hint` : undefined;\n const errorId = errorMessage ? `${id}-error` : undefined;\n const labelId = `${id}-label`;\n\n const ariaDescribedBy = useMemo(\n () => [hintId, errorId].join(\" \").trim() || undefined,\n [errorId, hintId]\n );\n\n return (\n <FormControl disabled={isDisabled} error={Boolean(errorMessage)}>\n <FieldLabel\n hasVisibleLabel={hasVisibleLabel}\n id={labelId}\n inputId={id}\n isRequired={isRequired}\n optionalText={optionalLabel}\n text={label}\n />\n\n {hint && <FieldHint id={hintId} text={hint} />}\n\n {renderFieldComponent({\n ariaDescribedBy,\n id,\n })}\n\n {errorMessage && <FieldError id={errorId} text={errorMessage} />}\n </FormControl>\n );\n};\n\nconst MemoizedField = memo(Field);\n\nexport { MemoizedField as Field };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,EAA6BC,OAA7B,QAA4C,OAA5C;SAGEC,U,EACAC,S,EACAC,U,EACAC,W,EACAC,W;;;;AA8CF,MAAMC,KAAK,GAAG,QAUI;EAAA,IAVH;IACbC,YADa;IAEbC,eAFa;IAGbC,IAHa;IAIbC,EAAE,EAAEC,UAJS;IAKbC,UAAU,GAAG,KALA;IAMbC,UAAU,GAAG,IANA;IAObC,KAPa;IAQbC,aARa;IASbC;EATa,CAUG;EAChB,MAAMN,EAAE,GAAGL,WAAW,CAACM,UAAD,CAAtB;EACA,MAAMM,MAAM,GAAGR,IAAI,GAAI,GAAEC,EAAG,OAAT,GAAkBQ,SAArC;EACA,MAAMC,OAAO,GAAGZ,YAAY,GAAI,GAAEG,EAAG,QAAT,GAAmBQ,SAA/C;EACA,MAAME,OAAO,GAAI,GAAEV,EAAG,QAAtB;EAEA,MAAMW,eAAe,GAAGrB,OAAO,CAC7B,MAAM,CAACiB,MAAD,EAASE,OAAT,EAAkBG,IAAlB,CAAuB,GAAvB,EAA4BC,IAA5B,MAAsCL,SADf,EAE7B,CAACC,OAAD,EAAUF,MAAV,CAF6B,CAA/B;EAKA,OACE,MAAC,WAAD;IAAa,QAAQ,EAAEL,UAAvB;IAAmC,KAAK,EAAEY,OAAO,CAACjB,YAAD,CAAjD;IAAA,WACE,KAAC,UAAD;MACE,eAAe,EAAEC,eADnB;MAEE,EAAE,EAAEY,OAFN;MAGE,OAAO,EAAEV,EAHX;MAIE,UAAU,EAAEG,UAJd;MAKE,YAAY,EAAEE,aALhB;MAME,IAAI,EAAED;IANR,EADF,EAUGL,IAAI,IAAI,KAAC,SAAD;MAAW,EAAE,EAAEQ,MAAf;MAAuB,IAAI,EAAER;IAA7B,EAVX,EAYGO,oBAAoB,CAAC;MACpBK,eADoB;MAEpBX;IAFoB,CAAD,CAZvB,EAiBGH,YAAY,IAAI,KAAC,UAAD;MAAY,EAAE,EAAEY,OAAhB;MAAyB,IAAI,EAAEZ;IAA/B,EAjBnB;EAAA,EADF;AAqBD,CA1CD;;AA4CA,MAAMkB,aAAa,GAAG1B,IAAI,CAACO,KAAD,CAA1B;AAEA,SAASmB,aAAa,IAAInB,KAA1B"}
1
+ {"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","useUniqueId","Field","errorMessage","fieldType","hasVisibleLabel","hint","id","idOverride","isDisabled","isRadioGroup","isOptional","label","optionalLabel","renderFieldComponent","hintId","undefined","errorId","labelId","ariaDescribedBy","join","trim","Boolean","MemoizedField"],"sources":["../src/Field.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useMemo } from \"react\";\n\nimport {\n FormControl as MuiFormControl,\n FormLabel as MuiFormLabel,\n} from \"@mui/material\";\nimport { FieldError } from \"./FieldError\";\nimport { FieldHint } from \"./FieldHint\";\nimport { FieldLabel } from \"./FieldLabel\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport type FieldProps = {\n /**\n * If `error` is not undefined, the `input` will indicate an error.\n */\n errorMessage?: string;\n /**\n * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).\n */\n fieldType: \"single\" | \"group\";\n hasVisibleLabel: boolean;\n /**\n * The helper text content.\n */\n hint?: string;\n /**\n * The id of the `input` element.\n */\n id?: string;\n /**\n * Important for narrowing down the `fieldset` role to \"radiogroup\".\n */\n isRadioGroup?: boolean;\n /**\n * If `true`, the component is disabled.\n */\n isDisabled?: boolean;\n /**\n * If `true`, the `input` element is not required.\n */\n isOptional?: boolean;\n /**\n * The label for the `input` element.\n */\n label: string;\n /**\n * The label for the `input` element if the it's not optional\n */\n optionalLabel?: string;\n /**\n * The short hint displayed in the `input` before the user enters a value.\n */\n placeholder?: string;\n /**\n * Render-props function that sends back ARIA props to your field component.\n */\n renderFieldComponent: ({\n ariaDescribedBy,\n id,\n }: {\n ariaDescribedBy?: string;\n id: string;\n }) => ReactElement;\n};\n\nconst Field = ({\n errorMessage,\n fieldType,\n hasVisibleLabel,\n hint,\n id: idOverride,\n isDisabled = false,\n isRadioGroup = false,\n isOptional = false,\n label,\n optionalLabel,\n renderFieldComponent,\n}: FieldProps) => {\n const id = useUniqueId(idOverride);\n const hintId = hint ? `${id}-hint` : undefined;\n const errorId = errorMessage ? `${id}-error` : undefined;\n const labelId = `${id}-label`;\n\n const ariaDescribedBy = useMemo(\n () => [hintId, errorId].join(\" \").trim() || undefined,\n [errorId, hintId]\n );\n\n return (\n <MuiFormControl\n component={fieldType === \"group\" ? \"fieldset\" : \"div\"}\n disabled={isDisabled}\n error={Boolean(errorMessage)}\n role={isRadioGroup ? \"radiogroup\" : undefined}\n >\n {fieldType === \"group\" ? (\n <MuiFormLabel component=\"legend\">{label}</MuiFormLabel>\n ) : (\n <FieldLabel\n hasVisibleLabel={hasVisibleLabel}\n id={labelId}\n inputId={id}\n isOptional={isOptional}\n optionalText={optionalLabel}\n text={label}\n />\n )}\n\n {hint && <FieldHint id={hintId} text={hint} />}\n\n {renderFieldComponent({\n ariaDescribedBy,\n id,\n })}\n\n {errorMessage && <FieldError id={errorId} text={errorMessage} />}\n </MuiFormControl>\n );\n};\n\nconst MemoizedField = memo(Field);\n\nexport { MemoizedField as Field };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,IAAT,EAA6BC,OAA7B,QAA4C,OAA5C;SAMSC,U;SACAC,S;SACAC,U;SACAC,W;;;;AAwDT,MAAMC,KAAK,GAAG,QAYI;EAAA,IAZH;IACbC,YADa;IAEbC,SAFa;IAGbC,eAHa;IAIbC,IAJa;IAKbC,EAAE,EAAEC,UALS;IAMbC,UAAU,GAAG,KANA;IAObC,YAAY,GAAG,KAPF;IAQbC,UAAU,GAAG,KARA;IASbC,KATa;IAUbC,aAVa;IAWbC;EAXa,CAYG;EAChB,MAAMP,EAAE,GAAGN,WAAW,CAACO,UAAD,CAAtB;EACA,MAAMO,MAAM,GAAGT,IAAI,GAAI,GAAEC,EAAG,OAAT,GAAkBS,SAArC;EACA,MAAMC,OAAO,GAAGd,YAAY,GAAI,GAAEI,EAAG,QAAT,GAAmBS,SAA/C;EACA,MAAME,OAAO,GAAI,GAAEX,EAAG,QAAtB;EAEA,MAAMY,eAAe,GAAGtB,OAAO,CAC7B,MAAM,CAACkB,MAAD,EAASE,OAAT,EAAkBG,IAAlB,CAAuB,GAAvB,EAA4BC,IAA5B,MAAsCL,SADf,EAE7B,CAACC,OAAD,EAAUF,MAAV,CAF6B,CAA/B;EAKA,OACE;IACE,SAAS,EAAEX,SAAS,KAAK,OAAd,GAAwB,UAAxB,GAAqC,KADlD;IAEE,QAAQ,EAAEK,UAFZ;IAGE,KAAK,EAAEa,OAAO,CAACnB,YAAD,CAHhB;IAIE,IAAI,EAAEO,YAAY,GAAG,YAAH,GAAkBM,SAJtC;IAAA,WAMGZ,SAAS,KAAK,OAAd,GACC;MAAc,SAAS,EAAC,QAAxB;MAAA,UAAkCQ;IAAlC,EADD,GAGC,KAAC,UAAD;MACE,eAAe,EAAEP,eADnB;MAEE,EAAE,EAAEa,OAFN;MAGE,OAAO,EAAEX,EAHX;MAIE,UAAU,EAAEI,UAJd;MAKE,YAAY,EAAEE,aALhB;MAME,IAAI,EAAED;IANR,EATJ,EAmBGN,IAAI,IAAI,KAAC,SAAD;MAAW,EAAE,EAAES,MAAf;MAAuB,IAAI,EAAET;IAA7B,EAnBX,EAqBGQ,oBAAoB,CAAC;MACpBK,eADoB;MAEpBZ;IAFoB,CAAD,CArBvB,EA0BGJ,YAAY,IAAI,KAAC,UAAD;MAAY,EAAE,EAAEc,OAAhB;MAAyB,IAAI,EAAEd;IAA/B,EA1BnB;EAAA,EADF;AA8BD,CArDD;;AAuDA,MAAMoB,aAAa,GAAG3B,IAAI,CAACM,KAAD,CAA1B;AAEA,SAASqB,aAAa,IAAIrB,KAA1B"}
@@ -10,18 +10,18 @@ const FieldLabel = _ref => {
10
10
  hasVisibleLabel,
11
11
  id,
12
12
  inputId,
13
- isRequired,
13
+ isOptional,
14
14
  optionalText,
15
15
  text
16
16
  } = _ref;
17
17
  const inputLabel = useMemo(() => _jsxs(_InputLabel, {
18
18
  htmlFor: inputId,
19
19
  id: id,
20
- children: [text, !isRequired && _jsx(Typography, {
20
+ children: [text, isOptional && _jsx(Typography, {
21
21
  variant: "subtitle1",
22
22
  children: optionalText
23
23
  })]
24
- }), [id, inputId, isRequired, optionalText, text]);
24
+ }), [id, inputId, isOptional, optionalText, text]);
25
25
  return hasVisibleLabel ? inputLabel : _jsx(ScreenReaderText, {
26
26
  children: inputLabel
27
27
  });
@@ -1 +1 @@
1
- {"version":3,"file":"FieldLabel.js","names":["memo","useMemo","ScreenReaderText","Typography","FieldLabel","hasVisibleLabel","id","inputId","isRequired","optionalText","text","inputLabel","MemoizedFieldLabel"],"sources":["../src/FieldLabel.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputLabel } from \"@mui/material\";\nimport { memo, useMemo } from \"react\";\n\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { Typography } from \".\";\n\nexport type FieldLabelProps = {\n hasVisibleLabel: boolean;\n id: string;\n inputId: string;\n isRequired: boolean;\n optionalText?: string;\n text: string;\n};\n\nconst FieldLabel = ({\n hasVisibleLabel,\n id,\n inputId,\n isRequired,\n optionalText,\n text,\n}: FieldLabelProps) => {\n const inputLabel = useMemo(\n () => (\n <InputLabel htmlFor={inputId} id={id}>\n {text}\n {!isRequired && (\n <Typography variant=\"subtitle1\">{optionalText}</Typography>\n )}\n </InputLabel>\n ),\n [id, inputId, isRequired, optionalText, text]\n );\n\n return hasVisibleLabel ? (\n inputLabel\n ) : (\n <ScreenReaderText>{inputLabel}</ScreenReaderText>\n );\n};\n\nconst MemoizedFieldLabel = memo(FieldLabel);\n\nexport { MemoizedFieldLabel as FieldLabel };\n"],"mappings":";AAaA,SAASA,IAAT,EAAeC,OAAf,QAA8B,OAA9B;SAESC,gB;SACAC,U;;;;AAWT,MAAMC,UAAU,GAAG,QAOI;EAAA,IAPH;IAClBC,eADkB;IAElBC,EAFkB;IAGlBC,OAHkB;IAIlBC,UAJkB;IAKlBC,YALkB;IAMlBC;EANkB,CAOG;EACrB,MAAMC,UAAU,GAAGV,OAAO,CACxB,MACE;IAAY,OAAO,EAAEM,OAArB;IAA8B,EAAE,EAAED,EAAlC;IAAA,WACGI,IADH,EAEG,CAACF,UAAD,IACC,KAAC,UAAD;MAAY,OAAO,EAAC,WAApB;MAAA,UAAiCC;IAAjC,EAHJ;EAAA,EAFsB,EASxB,CAACH,EAAD,EAAKC,OAAL,EAAcC,UAAd,EAA0BC,YAA1B,EAAwCC,IAAxC,CATwB,CAA1B;EAYA,OAAOL,eAAe,GACpBM,UADoB,GAGpB,KAAC,gBAAD;IAAA,UAAmBA;EAAnB,EAHF;AAKD,CAzBD;;AA2BA,MAAMC,kBAAkB,GAAGZ,IAAI,CAACI,UAAD,CAA/B;AAEA,SAASQ,kBAAkB,IAAIR,UAA/B"}
1
+ {"version":3,"file":"FieldLabel.js","names":["memo","useMemo","ScreenReaderText","Typography","FieldLabel","hasVisibleLabel","id","inputId","isOptional","optionalText","text","inputLabel","MemoizedFieldLabel"],"sources":["../src/FieldLabel.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { InputLabel as MuiInputLabel } from \"@mui/material\";\nimport { memo, useMemo } from \"react\";\n\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { Typography } from \".\";\n\nexport type FieldLabelProps = {\n hasVisibleLabel: boolean;\n id: string;\n inputId: string;\n isOptional: boolean;\n optionalText?: string;\n text: string;\n};\n\nconst FieldLabel = ({\n hasVisibleLabel,\n id,\n inputId,\n isOptional,\n optionalText,\n text,\n}: FieldLabelProps) => {\n const inputLabel = useMemo(\n () => (\n <MuiInputLabel htmlFor={inputId} id={id}>\n {text}\n {isOptional && (\n <Typography variant=\"subtitle1\">{optionalText}</Typography>\n )}\n </MuiInputLabel>\n ),\n [id, inputId, isOptional, optionalText, text]\n );\n\n return hasVisibleLabel ? (\n inputLabel\n ) : (\n <ScreenReaderText>{inputLabel}</ScreenReaderText>\n );\n};\n\nconst MemoizedFieldLabel = memo(FieldLabel);\n\nexport { MemoizedFieldLabel as FieldLabel };\n"],"mappings":";AAaA,SAASA,IAAT,EAAeC,OAAf,QAA8B,OAA9B;SAESC,gB;SACAC,U;;;;AAWT,MAAMC,UAAU,GAAG,QAOI;EAAA,IAPH;IAClBC,eADkB;IAElBC,EAFkB;IAGlBC,OAHkB;IAIlBC,UAJkB;IAKlBC,YALkB;IAMlBC;EANkB,CAOG;EACrB,MAAMC,UAAU,GAAGV,OAAO,CACxB,MACE;IAAe,OAAO,EAAEM,OAAxB;IAAiC,EAAE,EAAED,EAArC;IAAA,WACGI,IADH,EAEGF,UAAU,IACT,KAAC,UAAD;MAAY,OAAO,EAAC,WAApB;MAAA,UAAiCC;IAAjC,EAHJ;EAAA,EAFsB,EASxB,CAACH,EAAD,EAAKC,OAAL,EAAcC,UAAd,EAA0BC,YAA1B,EAAwCC,IAAxC,CATwB,CAA1B;EAYA,OAAOL,eAAe,GACpBM,UADoB,GAGpB,KAAC,gBAAD;IAAA,UAAmBA;EAAnB,EAHF;AAKD,CAzBD;;AA2BA,MAAMC,kBAAkB,GAAGZ,IAAI,CAACI,UAAD,CAA/B;AAEA,SAASQ,kBAAkB,IAAIR,UAA/B"}
package/dist/Icon.js CHANGED
@@ -12,18 +12,19 @@
12
12
  import { forwardRef } from "react";
13
13
  import { iconDictionary } from "./iconDictionary/index.js";
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
- export const Icon = forwardRef((_ref, ref) => {
15
+ export const Icon = forwardRef(_ref => {
16
16
  let {
17
+ ariaLabelledby,
18
+ label,
17
19
  name,
18
- titleAccess,
19
- ...rest
20
+ size
20
21
  } = _ref;
21
22
  if (!(name in iconDictionary)) return null;
22
23
  const NamedIcon = iconDictionary[name];
23
24
  return _jsx(NamedIcon, {
24
- titleAccess: titleAccess,
25
- ref: ref,
26
- ...rest
25
+ "aria-labelledby": ariaLabelledby,
26
+ fontSize: size,
27
+ titleAccess: label
27
28
  });
28
29
  });
29
30
  Icon.displayName = "Icon";
package/dist/Icon.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Icon.js","names":["forwardRef","iconDictionary","Icon","ref","name","titleAccess","rest","NamedIcon","displayName"],"sources":["../src/Icon.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { forwardRef } from \"react\";\nimport type { SvgIconNoChildrenProps } from \"./iconDictionary/types\";\nimport { iconDictionary } from \"./iconDictionary\";\n\nexport interface IconProps extends SvgIconNoChildrenProps {\n /**\n * Name of the icon to render\n */\n name: keyof typeof iconDictionary;\n}\n\n/**\n * A system of icons which establishes a visual language\n * that can be easily understood regardless of age, language or culture.\n * This component includes all icon data as static imports. Favor individual\n * icon component imports where possible to keep your bundle size smaller.\n */\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(\n ({ name, titleAccess, ...rest }, ref) => {\n if (!(name in iconDictionary)) return null;\n\n const NamedIcon = iconDictionary[name];\n\n return <NamedIcon titleAccess={titleAccess} ref={ref} {...rest} />;\n }\n);\n\nIcon.displayName = \"Icon\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,UAAT,QAA2B,OAA3B;SAESC,c;;AAeT,OAAO,MAAMC,IAAI,GAAGF,UAAU,CAC5B,OAAiCG,GAAjC,KAAyC;EAAA,IAAxC;IAAEC,IAAF;IAAQC,WAAR;IAAqB,GAAGC;EAAxB,CAAwC;EACvC,IAAI,EAAEF,IAAI,IAAIH,cAAV,CAAJ,EAA+B,OAAO,IAAP;EAE/B,MAAMM,SAAS,GAAGN,cAAc,CAACG,IAAD,CAAhC;EAEA,OAAO,KAAC,SAAD;IAAW,WAAW,EAAEC,WAAxB;IAAqC,GAAG,EAAEF,GAA1C;IAAA,GAAmDG;EAAnD,EAAP;AACD,CAP2B,CAAvB;AAUPJ,IAAI,CAACM,WAAL,GAAmB,MAAnB"}
1
+ {"version":3,"file":"Icon.js","names":["forwardRef","iconDictionary","Icon","ariaLabelledby","label","name","size","NamedIcon","displayName"],"sources":["../src/Icon.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2021-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { forwardRef } from \"react\";\nimport { iconDictionary } from \"./iconDictionary\";\n\nexport type IconProps = {\n /*\n ** The element whose text describes the icon, if it exists\n */\n ariaLabelledby?: string;\n /*\n ** Text that describes the icon\n */\n label: string;\n /*\n ** Name of the icon to render\n */\n name: keyof typeof iconDictionary;\n /*\n ** The size of the icon\n */\n size: \"small\" | \"medium\" | \"large\";\n};\n\n/**\n * A system of icons which establishes a visual language\n * that can be easily understood regardless of age, language or culture.\n * This component includes all icon data as static imports. Favor individual\n * icon component imports where possible to keep your bundle size smaller.\n */\nexport const Icon = forwardRef<SVGSVGElement, IconProps>(\n ({ ariaLabelledby, label, name, size }) => {\n if (!(name in iconDictionary)) return null;\n\n const NamedIcon = iconDictionary[name];\n\n return (\n <NamedIcon\n aria-labelledby={ariaLabelledby}\n fontSize={size}\n titleAccess={label}\n />\n );\n }\n);\n\nIcon.displayName = \"Icon\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,UAAT,QAA2B,OAA3B;SACSC,c;;AA2BT,OAAO,MAAMC,IAAI,GAAGF,UAAU,CAC5B,QAA2C;EAAA,IAA1C;IAAEG,cAAF;IAAkBC,KAAlB;IAAyBC,IAAzB;IAA+BC;EAA/B,CAA0C;EACzC,IAAI,EAAED,IAAI,IAAIJ,cAAV,CAAJ,EAA+B,OAAO,IAAP;EAE/B,MAAMM,SAAS,GAAGN,cAAc,CAACI,IAAD,CAAhC;EAEA,OACE,KAAC,SAAD;IACE,mBAAiBF,cADnB;IAEE,QAAQ,EAAEG,IAFZ;IAGE,WAAW,EAAEF;EAHf,EADF;AAOD,CAb2B,CAAvB;AAgBPF,IAAI,CAACM,WAAL,GAAmB,MAAnB"}
package/dist/Infobox.js CHANGED
@@ -17,8 +17,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
17
17
  const Infobox = _ref => {
18
18
  let {
19
19
  children,
20
- severity,
21
20
  role,
21
+ severity,
22
22
  title
23
23
  } = _ref;
24
24
  return _jsxs(Alert, {
@@ -1 +1 @@
1
- {"version":3,"file":"Infobox.js","names":["memo","Alert","AlertTitle","ScreenReaderText","Infobox","children","severity","role","title","MemoizedInfobox"],"sources":["../src/Infobox.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { AlertColor } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\nimport { Alert, AlertTitle, ScreenReaderText } from \".\";\n\nexport interface InfoboxProps {\n /**\n * The contents of the alert\n */\n children: ReactNode;\n /**\n * Determine the color and icon of the alert\n */\n severity: AlertColor;\n /**\n * Sets the ARIA role of the alert\n * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n * unchanging)\n */\n role?: \"status\" | \"alert\";\n /**\n * The title of the alert\n */\n title?: string;\n}\n\nconst Infobox = ({ children, severity, role, title }: InfoboxProps) => (\n <Alert role={role} severity={severity} variant=\"infobox\">\n <ScreenReaderText>{severity}: </ScreenReaderText>\n {title && <AlertTitle>{title}</AlertTitle>}\n {children}\n </Alert>\n);\n\nconst MemoizedInfobox = memo(Infobox);\n\nexport { MemoizedInfobox as Infobox };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAT,QAAgC,OAAhC;SACSC,K,EAAOC,U,EAAYC,gB;;;;AAuB5B,MAAMC,OAAO,GAAG;EAAA,IAAC;IAAEC,QAAF;IAAYC,QAAZ;IAAsBC,IAAtB;IAA4BC;EAA5B,CAAD;EAAA,OACd,MAAC,KAAD;IAAO,IAAI,EAAED,IAAb;IAAmB,QAAQ,EAAED,QAA7B;IAAuC,OAAO,EAAC,SAA/C;IAAA,WACE,MAAC,gBAAD;MAAA,WAAmBA,QAAnB;IAAA,EADF,EAEGE,KAAK,IAAI,KAAC,UAAD;MAAA,UAAaA;IAAb,EAFZ,EAGGH,QAHH;EAAA,EADc;AAAA,CAAhB;;AAQA,MAAMI,eAAe,GAAGT,IAAI,CAACI,OAAD,CAA5B;AAEA,SAASK,eAAe,IAAIL,OAA5B"}
1
+ {"version":3,"file":"Infobox.js","names":["memo","Alert","AlertTitle","ScreenReaderText","Infobox","children","role","severity","title","MemoizedInfobox"],"sources":["../src/Infobox.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { AlertColor } from \"@mui/material\";\nimport { memo, ReactNode } from \"react\";\nimport { Alert, AlertTitle, ScreenReaderText } from \".\";\n\nexport type InfoboxProps = {\n /**\n * The contents of the alert\n */\n children: ReactNode;\n /**\n * Sets the ARIA role of the alert\n * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n * unchanging)\n */\n role?: \"status\" | \"alert\";\n /**\n * Determine the color and icon of the alert\n */\n severity: AlertColor;\n /**\n * The title of the alert\n */\n title?: string;\n};\n\nconst Infobox = ({ children, role, severity, title }: InfoboxProps) => (\n <Alert role={role} severity={severity} variant=\"infobox\">\n <ScreenReaderText>{severity}: </ScreenReaderText>\n {title && <AlertTitle>{title}</AlertTitle>}\n {children}\n </Alert>\n);\n\nconst MemoizedInfobox = memo(Infobox);\n\nexport { MemoizedInfobox as Infobox };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAT,QAAgC,OAAhC;SACSC,K,EAAOC,U,EAAYC,gB;;;;AAuB5B,MAAMC,OAAO,GAAG;EAAA,IAAC;IAAEC,QAAF;IAAYC,IAAZ;IAAkBC,QAAlB;IAA4BC;EAA5B,CAAD;EAAA,OACd,MAAC,KAAD;IAAO,IAAI,EAAEF,IAAb;IAAmB,QAAQ,EAAEC,QAA7B;IAAuC,OAAO,EAAC,SAA/C;IAAA,WACE,MAAC,gBAAD;MAAA,WAAmBA,QAAnB;IAAA,EADF,EAEGC,KAAK,IAAI,KAAC,UAAD;MAAA,UAAaA;IAAb,EAFZ,EAGGH,QAHH;EAAA,EADc;AAAA,CAAhB;;AAQA,MAAMI,eAAe,GAAGT,IAAI,CAACI,OAAD,CAA5B;AAEA,SAASK,eAAe,IAAIL,OAA5B"}
package/dist/Link.js CHANGED
@@ -19,10 +19,13 @@ export const Link = forwardRef((props, ref) => {
19
19
  const {
20
20
  icon,
21
21
  children,
22
- target
22
+ target,
23
+ variant
23
24
  } = props;
24
- return _jsxs(_Link, { ...props,
25
+ return _jsxs(_Link, {
25
26
  ref: ref,
27
+ variant: variant,
28
+ target: target,
26
29
  children: [icon && _jsx("span", {
27
30
  className: "Link-icon",
28
31
  children: icon
package/dist/Link.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Link.js","names":["forwardRef","Link","props","ref","icon","children","target"],"sources":["../src/Link.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { forwardRef, ReactElement } from \"react\";\n\nimport { Link as MuiLink, SvgIcon } from \"@mui/material\";\nimport type { LinkProps as MuiLinkProps } from \"@mui/material\";\n\nexport interface LinkProps extends MuiLinkProps {\n icon?: ReactElement;\n}\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n const { icon, children, target } = props;\n return (\n <MuiLink {...props} ref={ref}>\n {icon && <span className=\"Link-icon\">{icon}</span>}\n {children}\n {target === \"_blank\" && (\n <span className=\"Link-indicator\" role=\"presentation\">\n <SvgIcon viewBox=\"0 0 16 16\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M13.2929 2H7.99998V1H14.5C14.7761 1 15 1.22386 15 1.5V8H14V2.70711L6.35353 10.3536L5.64642 9.64645L13.2929 2ZM1.5 4H1V4.5V14.5V15H1.5H11.5H12V14.5V8H11V14H2V5H8V4H1.5Z\"\n fill=\"currentColor\"\n />\n </SvgIcon>\n </span>\n )}\n </MuiLink>\n );\n});\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,UAAT,QAAyC,OAAzC;;;AASA,OAAO,MAAMC,IAAI,GAAGD,UAAU,CAA+B,CAACE,KAAD,EAAQC,GAAR,KAAgB;EAC3E,MAAM;IAAEC,IAAF;IAAQC,QAAR;IAAkBC;EAAlB,IAA6BJ,KAAnC;EACA,OACE,kBAAaA,KAAb;IAAoB,GAAG,EAAEC,GAAzB;IAAA,WACGC,IAAI,IAAI;MAAM,SAAS,EAAC,WAAhB;MAAA,UAA6BA;IAA7B,EADX,EAEGC,QAFH,EAGGC,MAAM,KAAK,QAAX,IACC;MAAM,SAAS,EAAC,gBAAhB;MAAiC,IAAI,EAAC,cAAtC;MAAA,UACE;QAAS,OAAO,EAAC,WAAjB;QAAA,UACE;UACE,QAAQ,EAAC,SADX;UAEE,QAAQ,EAAC,SAFX;UAGE,CAAC,EAAC,yKAHJ;UAIE,IAAI,EAAC;QAJP;MADF;IADF,EAJJ;EAAA,EADF;AAkBD,CApB6B,CAAvB"}
1
+ {"version":3,"file":"Link.js","names":["forwardRef","Link","props","ref","icon","children","target","variant"],"sources":["../src/Link.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { forwardRef, ReactElement } from \"react\";\n\nimport {\n Link as MuiLink,\n LinkProps as MuiLinkProps,\n SvgIcon,\n} from \"@mui/material\";\n\nexport type LinkProps = {\n children: React.ReactNode;\n href: string;\n icon?: ReactElement;\n rel?: string;\n target?: \"_self\" | \"_blank\" | \"_parent\" | \"_top\" | string;\n variant?: MuiLinkProps[\"variant\"];\n};\n\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n const { icon, children, target, variant } = props;\n return (\n <MuiLink ref={ref} variant={variant} target={target}>\n {icon && <span className=\"Link-icon\">{icon}</span>}\n {children}\n {target === \"_blank\" && (\n <span className=\"Link-indicator\" role=\"presentation\">\n <SvgIcon viewBox=\"0 0 16 16\">\n <path\n fillRule=\"evenodd\"\n clipRule=\"evenodd\"\n d=\"M13.2929 2H7.99998V1H14.5C14.7761 1 15 1.22386 15 1.5V8H14V2.70711L6.35353 10.3536L5.64642 9.64645L13.2929 2ZM1.5 4H1V4.5V14.5V15H1.5H11.5H12V14.5V8H11V14H2V5H8V4H1.5Z\"\n fill=\"currentColor\"\n />\n </SvgIcon>\n </span>\n )}\n </MuiLink>\n );\n});\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA,SAASA,UAAT,QAAyC,OAAzC;;;AAiBA,OAAO,MAAMC,IAAI,GAAGD,UAAU,CAA+B,CAACE,KAAD,EAAQC,GAAR,KAAgB;EAC3E,MAAM;IAAEC,IAAF;IAAQC,QAAR;IAAkBC,MAAlB;IAA0BC;EAA1B,IAAsCL,KAA5C;EACA,OACE;IAAS,GAAG,EAAEC,GAAd;IAAmB,OAAO,EAAEI,OAA5B;IAAqC,MAAM,EAAED,MAA7C;IAAA,WACGF,IAAI,IAAI;MAAM,SAAS,EAAC,WAAhB;MAAA,UAA6BA;IAA7B,EADX,EAEGC,QAFH,EAGGC,MAAM,KAAK,QAAX,IACC;MAAM,SAAS,EAAC,gBAAhB;MAAiC,IAAI,EAAC,cAAtC;MAAA,UACE;QAAS,OAAO,EAAC,WAAjB;QAAA,UACE;UACE,QAAQ,EAAC,SADX;UAEE,QAAQ,EAAC,SAFX;UAGE,CAAC,EAAC,yKAHJ;UAIE,IAAI,EAAC;QAJP;MADF;IADF,EAJJ;EAAA,EADF;AAkBD,CApB6B,CAAvB"}