@okta/odyssey-react-mui 1.0.2 → 1.2.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 (274) hide show
  1. package/CHANGELOG.md +54 -0
  2. package/README.md +1 -1
  3. package/dist/Autocomplete.js +20 -3
  4. package/dist/Autocomplete.js.map +1 -1
  5. package/dist/Banner.js +3 -1
  6. package/dist/Banner.js.map +1 -1
  7. package/dist/Box.js +8 -4
  8. package/dist/Box.js.map +1 -1
  9. package/dist/Button.js +3 -1
  10. package/dist/Button.js.map +1 -1
  11. package/dist/Callout.js +2 -0
  12. package/dist/Callout.js.map +1 -1
  13. package/dist/Checkbox.js +6 -2
  14. package/dist/Checkbox.js.map +1 -1
  15. package/dist/CheckboxGroup.js +5 -7
  16. package/dist/CheckboxGroup.js.map +1 -1
  17. package/dist/CircularProgress.js +2 -0
  18. package/dist/CircularProgress.js.map +1 -1
  19. package/dist/Dialog.js +2 -0
  20. package/dist/Dialog.js.map +1 -1
  21. package/dist/Field.js.map +1 -1
  22. package/dist/FieldError.js +2 -0
  23. package/dist/FieldError.js.map +1 -1
  24. package/dist/FieldHint.js +2 -0
  25. package/dist/FieldHint.js.map +1 -1
  26. package/dist/FieldLabel.js +3 -1
  27. package/dist/FieldLabel.js.map +1 -1
  28. package/dist/Fieldset.js +3 -1
  29. package/dist/Fieldset.js.map +1 -1
  30. package/dist/Form.js +5 -3
  31. package/dist/Form.js.map +1 -1
  32. package/dist/Link.js +3 -1
  33. package/dist/Link.js.map +1 -1
  34. package/dist/MenuButton.js +8 -2
  35. package/dist/MenuButton.js.map +1 -1
  36. package/dist/MenuItem.js +6 -2
  37. package/dist/MenuItem.js.map +1 -1
  38. package/dist/NativeSelect.js +3 -1
  39. package/dist/NativeSelect.js.map +1 -1
  40. package/dist/OdysseyCacheProvider.js +4 -1
  41. package/dist/OdysseyCacheProvider.js.map +1 -1
  42. package/dist/OdysseyProvider.js +12 -5
  43. package/dist/OdysseyProvider.js.map +1 -1
  44. package/dist/OdysseyThemeProvider.js +8 -7
  45. package/dist/OdysseyThemeProvider.js.map +1 -1
  46. package/dist/OdysseyTranslationProvider.js +1 -1
  47. package/dist/OdysseyTranslationProvider.js.map +1 -1
  48. package/dist/OdysseyTranslationProvider.types.js +1 -1
  49. package/dist/OdysseyTranslationProvider.types.js.map +1 -1
  50. package/dist/PasswordField.js +18 -9
  51. package/dist/PasswordField.js.map +1 -1
  52. package/dist/Radio.js +2 -0
  53. package/dist/Radio.js.map +1 -1
  54. package/dist/RadioGroup.js +5 -2
  55. package/dist/RadioGroup.js.map +1 -1
  56. package/dist/SearchField.js +11 -10
  57. package/dist/SearchField.js.map +1 -1
  58. package/dist/Select.js +39 -35
  59. package/dist/Select.js.map +1 -1
  60. package/dist/SeleniumProps.js +2 -0
  61. package/dist/SeleniumProps.js.map +1 -0
  62. package/dist/Status.js +4 -2
  63. package/dist/Status.js.map +1 -1
  64. package/dist/Tabs.js +11 -4
  65. package/dist/Tabs.js.map +1 -1
  66. package/dist/Tag.js +4 -2
  67. package/dist/Tag.js.map +1 -1
  68. package/dist/TagList.js +3 -1
  69. package/dist/TagList.js.map +1 -1
  70. package/dist/TextField.js +6 -2
  71. package/dist/TextField.js.map +1 -1
  72. package/dist/Toast.js +2 -0
  73. package/dist/Toast.js.map +1 -1
  74. package/dist/Tooltip.js +2 -0
  75. package/dist/Tooltip.js.map +1 -1
  76. package/dist/Typography.js +71 -59
  77. package/dist/Typography.js.map +1 -1
  78. package/dist/createShadowDom.js +26 -0
  79. package/dist/createShadowDom.js.map +1 -0
  80. package/dist/{OdysseyI18n.js → i18n.js} +5 -2
  81. package/dist/i18n.js.map +1 -0
  82. package/dist/index.js +1 -0
  83. package/dist/index.js.map +1 -1
  84. package/dist/labs/DatePicker.js +4 -2
  85. package/dist/labs/DatePicker.js.map +1 -1
  86. package/dist/labs/PaginatedTable.js +6 -4
  87. package/dist/labs/PaginatedTable.js.map +1 -1
  88. package/dist/labs/StaticTable.js +9 -4
  89. package/dist/labs/StaticTable.js.map +1 -1
  90. package/dist/labs/datePickerTheme.js +4 -2
  91. package/dist/labs/datePickerTheme.js.map +1 -1
  92. package/dist/properties/ts/odyssey-react-mui.js +2 -0
  93. package/dist/properties/ts/odyssey-react-mui.js.map +1 -1
  94. package/dist/src/Autocomplete.d.ts +29 -4
  95. package/dist/src/Autocomplete.d.ts.map +1 -1
  96. package/dist/src/Banner.d.ts +3 -2
  97. package/dist/src/Banner.d.ts.map +1 -1
  98. package/dist/src/Box.d.ts +9 -2
  99. package/dist/src/Box.d.ts.map +1 -1
  100. package/dist/src/Button.d.ts +3 -2
  101. package/dist/src/Button.d.ts.map +1 -1
  102. package/dist/src/Callout.d.ts +3 -2
  103. package/dist/src/Callout.d.ts.map +1 -1
  104. package/dist/src/Checkbox.d.ts +8 -3
  105. package/dist/src/Checkbox.d.ts.map +1 -1
  106. package/dist/src/CheckboxGroup.d.ts +3 -6
  107. package/dist/src/CheckboxGroup.d.ts.map +1 -1
  108. package/dist/src/CircularProgress.d.ts +3 -2
  109. package/dist/src/CircularProgress.d.ts.map +1 -1
  110. package/dist/src/Dialog.d.ts +3 -2
  111. package/dist/src/Dialog.d.ts.map +1 -1
  112. package/dist/src/Field.d.ts +2 -1
  113. package/dist/src/Field.d.ts.map +1 -1
  114. package/dist/src/FieldError.d.ts +3 -2
  115. package/dist/src/FieldError.d.ts.map +1 -1
  116. package/dist/src/FieldHint.d.ts +3 -2
  117. package/dist/src/FieldHint.d.ts.map +1 -1
  118. package/dist/src/FieldLabel.d.ts +3 -2
  119. package/dist/src/FieldLabel.d.ts.map +1 -1
  120. package/dist/src/Fieldset.d.ts +3 -2
  121. package/dist/src/Fieldset.d.ts.map +1 -1
  122. package/dist/src/Form.d.ts +3 -2
  123. package/dist/src/Form.d.ts.map +1 -1
  124. package/dist/src/Link.d.ts +3 -2
  125. package/dist/src/Link.d.ts.map +1 -1
  126. package/dist/src/MenuButton.d.ts +12 -3
  127. package/dist/src/MenuButton.d.ts.map +1 -1
  128. package/dist/src/MenuItem.d.ts +5 -4
  129. package/dist/src/MenuItem.d.ts.map +1 -1
  130. package/dist/src/NativeSelect.d.ts +56 -2
  131. package/dist/src/NativeSelect.d.ts.map +1 -1
  132. package/dist/src/OdysseyCacheProvider.d.ts +6 -1
  133. package/dist/src/OdysseyCacheProvider.d.ts.map +1 -1
  134. package/dist/src/OdysseyProvider.d.ts +1 -1
  135. package/dist/src/OdysseyProvider.d.ts.map +1 -1
  136. package/dist/src/OdysseyThemeProvider.d.ts +2 -1
  137. package/dist/src/OdysseyThemeProvider.d.ts.map +1 -1
  138. package/dist/src/OdysseyTranslationProvider.d.ts +1 -1
  139. package/dist/src/OdysseyTranslationProvider.d.ts.map +1 -1
  140. package/dist/src/OdysseyTranslationProvider.types.d.ts +1 -1
  141. package/dist/src/OdysseyTranslationProvider.types.d.ts.map +1 -1
  142. package/dist/src/PasswordField.d.ts +78 -2
  143. package/dist/src/PasswordField.d.ts.map +1 -1
  144. package/dist/src/Radio.d.ts +3 -2
  145. package/dist/src/Radio.d.ts.map +1 -1
  146. package/dist/src/RadioGroup.d.ts +8 -3
  147. package/dist/src/RadioGroup.d.ts.map +1 -1
  148. package/dist/src/SearchField.d.ts +58 -2
  149. package/dist/src/SearchField.d.ts.map +1 -1
  150. package/dist/src/Select.d.ts +7 -2
  151. package/dist/src/Select.d.ts.map +1 -1
  152. package/dist/src/SeleniumProps.d.ts +20 -0
  153. package/dist/src/SeleniumProps.d.ts.map +1 -0
  154. package/dist/src/Status.d.ts +3 -2
  155. package/dist/src/Status.d.ts.map +1 -1
  156. package/dist/src/Tabs.d.ts +9 -3
  157. package/dist/src/Tabs.d.ts.map +1 -1
  158. package/dist/src/Tag.d.ts +3 -2
  159. package/dist/src/Tag.d.ts.map +1 -1
  160. package/dist/src/TagList.d.ts +3 -2
  161. package/dist/src/TagList.d.ts.map +1 -1
  162. package/dist/src/TextField.d.ts +86 -2
  163. package/dist/src/TextField.d.ts.map +1 -1
  164. package/dist/src/Toast.d.ts +3 -2
  165. package/dist/src/Toast.d.ts.map +1 -1
  166. package/dist/src/Tooltip.d.ts +3 -2
  167. package/dist/src/Tooltip.d.ts.map +1 -1
  168. package/dist/src/Typography.d.ts +14 -49
  169. package/dist/src/Typography.d.ts.map +1 -1
  170. package/dist/src/createShadowDom.d.ts +16 -0
  171. package/dist/src/createShadowDom.d.ts.map +1 -0
  172. package/dist/src/{OdysseyI18n.d.ts → i18n.d.ts} +20 -2
  173. package/dist/src/i18n.d.ts.map +1 -0
  174. package/dist/src/index.d.ts +1 -0
  175. package/dist/src/index.d.ts.map +1 -1
  176. package/dist/src/labs/DatePicker.d.ts +5 -1
  177. package/dist/src/labs/DatePicker.d.ts.map +1 -1
  178. package/dist/src/labs/PaginatedTable.d.ts.map +1 -1
  179. package/dist/src/labs/StaticTable.d.ts.map +1 -1
  180. package/dist/src/properties/ts/odyssey-react-mui.d.ts +2 -0
  181. package/dist/src/properties/ts/odyssey-react-mui.d.ts.map +1 -1
  182. package/dist/src/theme/components.d.ts +4 -1
  183. package/dist/src/theme/components.d.ts.map +1 -1
  184. package/dist/src/theme/createOdysseyMuiTheme.d.ts +23 -0
  185. package/dist/src/theme/createOdysseyMuiTheme.d.ts.map +1 -0
  186. package/dist/src/theme/mixins.d.ts +3 -1
  187. package/dist/src/theme/mixins.d.ts.map +1 -1
  188. package/dist/src/theme/palette.d.ts +3 -1
  189. package/dist/src/theme/palette.d.ts.map +1 -1
  190. package/dist/src/theme/shape.d.ts +3 -1
  191. package/dist/src/theme/shape.d.ts.map +1 -1
  192. package/dist/src/theme/spacing.d.ts +3 -1
  193. package/dist/src/theme/spacing.d.ts.map +1 -1
  194. package/dist/src/theme/theme.d.ts +1 -8
  195. package/dist/src/theme/theme.d.ts.map +1 -1
  196. package/dist/src/theme/typography.d.ts +3 -1
  197. package/dist/src/theme/typography.d.ts.map +1 -1
  198. package/dist/theme/components.js +118 -73
  199. package/dist/theme/components.js.map +1 -1
  200. package/dist/theme/createOdysseyMuiTheme.js +51 -0
  201. package/dist/theme/createOdysseyMuiTheme.js.map +1 -0
  202. package/dist/theme/mixins.js +4 -1
  203. package/dist/theme/mixins.js.map +1 -1
  204. package/dist/theme/palette.js +4 -1
  205. package/dist/theme/palette.js.map +1 -1
  206. package/dist/theme/shape.js +4 -1
  207. package/dist/theme/shape.js.map +1 -1
  208. package/dist/theme/spacing.js +4 -1
  209. package/dist/theme/spacing.js.map +1 -1
  210. package/dist/theme/theme.js +1 -20
  211. package/dist/theme/theme.js.map +1 -1
  212. package/dist/theme/typography.js +4 -1
  213. package/dist/theme/typography.js.map +1 -1
  214. package/dist/tsconfig.production.tsbuildinfo +1 -1
  215. package/package.json +7 -6
  216. package/src/Autocomplete.tsx +56 -4
  217. package/src/Banner.tsx +11 -2
  218. package/src/Box.tsx +11 -5
  219. package/src/Button.tsx +6 -1
  220. package/src/Callout.tsx +5 -3
  221. package/src/Checkbox.tsx +14 -4
  222. package/src/CheckboxGroup.tsx +6 -10
  223. package/src/CircularProgress.tsx +5 -1
  224. package/src/Dialog.tsx +5 -2
  225. package/src/Field.tsx +2 -0
  226. package/src/FieldError.tsx +5 -3
  227. package/src/FieldHint.tsx +9 -3
  228. package/src/FieldLabel.tsx +5 -3
  229. package/src/Fieldset.tsx +4 -1
  230. package/src/Form.tsx +7 -4
  231. package/src/Link.tsx +18 -3
  232. package/src/MenuButton.tsx +33 -4
  233. package/src/MenuItem.tsx +11 -6
  234. package/src/NativeSelect.tsx +7 -2
  235. package/src/OdysseyCacheProvider.tsx +9 -1
  236. package/src/OdysseyProvider.tsx +18 -8
  237. package/src/OdysseyThemeProvider.tsx +12 -8
  238. package/src/OdysseyTranslationProvider.test.tsx +2 -2
  239. package/src/OdysseyTranslationProvider.tsx +1 -1
  240. package/src/OdysseyTranslationProvider.types.ts +1 -0
  241. package/src/PasswordField.tsx +37 -13
  242. package/src/Radio.tsx +5 -1
  243. package/src/RadioGroup.tsx +12 -4
  244. package/src/SearchField.tsx +23 -15
  245. package/src/Select.tsx +154 -149
  246. package/src/SeleniumProps.ts +20 -0
  247. package/src/Status.tsx +15 -3
  248. package/src/Tabs.tsx +18 -4
  249. package/src/Tag.tsx +12 -3
  250. package/src/TagList.tsx +4 -2
  251. package/src/TextField.tsx +14 -2
  252. package/src/Toast.tsx +4 -1
  253. package/src/Tooltip.tsx +4 -1
  254. package/src/Typography.tsx +76 -54
  255. package/src/createShadowDom.ts +46 -0
  256. package/src/{OdysseyI18n.ts → i18n.ts} +4 -2
  257. package/src/index.ts +1 -0
  258. package/src/labs/DatePicker.tsx +15 -7
  259. package/src/labs/PaginatedTable.tsx +12 -3
  260. package/src/labs/README.md +2 -2
  261. package/src/labs/StaticTable.tsx +13 -3
  262. package/src/labs/datePickerTheme.tsx +2 -2
  263. package/src/properties/odyssey-react-mui.properties +2 -0
  264. package/src/properties/ts/odyssey-react-mui.ts +1 -1
  265. package/src/theme/components.tsx +69 -18
  266. package/src/theme/createOdysseyMuiTheme.ts +47 -0
  267. package/src/theme/mixins.ts +5 -1
  268. package/src/theme/palette.ts +5 -3
  269. package/src/theme/shape.ts +5 -1
  270. package/src/theme/spacing.ts +5 -3
  271. package/src/theme/theme.ts +1 -26
  272. package/src/theme/typography.ts +5 -3
  273. package/dist/OdysseyI18n.js.map +0 -1
  274. package/dist/src/OdysseyI18n.d.ts.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","names":["forwardRef","memo","useCallback","useState","Checkbox","Field","jsx","_jsx","jsxs","_jsxs","Select","_ref","ref","errorMessage","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","onBlur","onChange","onChangeProp","onFocus","value","options","selectedValue","setSelectedValue","event","child","target","split","normalizedOptions","map","option","text","type","renderValue","selected","undefined","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","_ListSubheader","_MenuItem","isDefaultChecked","includes","renderFieldComponent","_Select","multiple","name","labelId","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.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 { ReactNode, forwardRef, memo, useCallback, useState } from \"react\";\nimport {\n Box,\n Chip,\n ListSubheader,\n MenuItem,\n Select as MuiSelect,\n SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\n\nexport type SelectOption = {\n text: string;\n type?: \"heading\" | \"option\";\n value?: string;\n};\n\nexport type SelectProps = {\n /**\n * The error message for the Select\n */\n errorMessage?: string;\n /**\n * The hint text for the Select\n */\n hint?: string;\n /**\n * The id attribute of the Select\n */\n id?: string;\n /**\n * If `true`, the Select is disabled\n */\n isDisabled?: boolean;\n /**\n * If `true`, the Select allows multiple selections\n */\n isMultiSelect?: boolean;\n /**\n * If `true`, the Select is optional\n */\n isOptional?: boolean;\n /**\n * The label text for the Select\n */\n label: string;\n /**\n * Callback fired when the Select loses focus\n */\n onBlur?: MuiSelectProps[\"onBlur\"];\n /**\n * Callback fired when the value of the Select changes\n */\n onChange?: MuiSelectProps[\"onChange\"];\n /**\n * Callback fired when the Select gains focus\n */\n onFocus?: MuiSelectProps[\"onFocus\"];\n /**\n * The options for the Select\n */\n options: (string | SelectOption)[];\n /**\n * The value or values selected in the Select\n */\n value?: string | string[];\n};\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n * - string — A simple string. The string will be both the text and the value of the resulting option.\n * <option value=\"string\">string</option>\n *\n * - { text: string } — Same as above, but the string is contained within an object.\n * <option value=\"text\">text</option>\n *\n * - { text: string, value: string } — The option text will be text, and the option value will be value.\n * <option value=\"value\">text</option>\n *\n * - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst Select = forwardRef<HTMLSelectElement, SelectProps>(\n (\n {\n errorMessage,\n hint,\n id: idOverride,\n isDisabled = false,\n isMultiSelect = false,\n isOptional = false,\n label,\n onBlur,\n onChange: onChangeProp,\n onFocus,\n value,\n options,\n },\n ref\n ) => {\n // If there's no value set, we set it to a blank string (if it's a single-select)\n // or an empty array (if it's a multi-select)\n if (typeof value === \"undefined\") {\n value = isMultiSelect ? [] : \"\";\n }\n\n const [selectedValue, setSelectedValue] = useState<string | string[]>(\n value\n );\n\n const onChange = useCallback(\n (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {\n const {\n target: { value },\n } = event;\n\n // Set the field value, with some additional logic to handle array values\n // for multi-selects\n if (isMultiSelect) {\n setSelectedValue(\n typeof value === \"string\" ? value.split(\",\") : value\n );\n } else {\n setSelectedValue(value);\n }\n\n // Trigger the onChange event, if one has been passed\n if (onChangeProp) {\n onChangeProp(event, child);\n }\n },\n [isMultiSelect, onChangeProp, setSelectedValue]\n );\n\n // Normalize the options array to accommodate the various\n // data types that might be passed\n const normalizedOptions = options.map((option) => {\n if (typeof option === \"object\") {\n return {\n text: option.text,\n value: option.value || option.text,\n type: option.type === \"heading\" ? \"heading\" : \"option\",\n };\n }\n\n return { text: option, value: option, type: \"option\" };\n });\n\n const renderValue = useCallback(\n (selected: string | string[]) => {\n // If the selected value isn't an array, then we don't need to display\n // chips and should fall back to the default render behavior\n if (typeof selected === \"string\") {\n return undefined;\n }\n\n // Convert the selected options array into <Chip>s\n const renderedChips = selected\n .map((item: string) => {\n const selectedOption = normalizedOptions.find(\n (option) => option.value === item\n );\n\n if (!selectedOption) {\n return null;\n }\n\n return <Chip key={item} label={selectedOption.text} />;\n })\n .filter(Boolean);\n\n if (renderedChips.length === 0) {\n return null;\n }\n\n // We need the <Box> to surround the <Chip>s for\n // proper styling\n return <Box>{renderedChips}</Box>;\n },\n [normalizedOptions]\n );\n\n // Convert the options into the ReactNode children\n // that will populate the <Select>\n const children = normalizedOptions.map((option) => {\n if (option.type === \"heading\") {\n return <ListSubheader key={option.text}>{option.text}</ListSubheader>;\n }\n\n return (\n <MenuItem key={option.value} value={option.value}>\n {isMultiSelect && (\n <Checkbox isDefaultChecked={selectedValue.includes(option.value)} />\n )}\n {option.text}\n </MenuItem>\n );\n });\n\n const renderFieldComponent = useCallback(\n () => (\n <MuiSelect\n children={children}\n id={idOverride}\n multiple={isMultiSelect}\n name={idOverride}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n ref={ref}\n renderValue={isMultiSelect ? renderValue : undefined}\n value={selectedValue}\n labelId={label}\n />\n ),\n [\n idOverride,\n isMultiSelect,\n onBlur,\n onChange,\n onFocus,\n ref,\n children,\n renderValue,\n selectedValue,\n label,\n ]\n );\n\n return (\n <Field\n errorMessage={errorMessage}\n fieldType=\"single\"\n hasVisibleLabel\n hint={hint}\n id={idOverride}\n isDisabled={isDisabled}\n isOptional={isOptional}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n }\n);\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,UAAU,EAAEC,IAAI,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAAC,SAUlEC,QAAQ;AAAA,SACRC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA0Ed,MAAMC,MAAM,GAAGV,UAAU,CACvB,CAAAW,IAAA,EAeEC,GAAG,KACA;EAAA,IAfH;IACEC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,aAAa,GAAG,KAAK;IACrBC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,MAAM;IACNC,QAAQ,EAAEC,YAAY;IACtBC,OAAO;IACPC,KAAK;IACLC;EACF,CAAC,GAAAf,IAAA;EAKD,IAAI,OAAOc,KAAK,KAAK,WAAW,EAAE;IAChCA,KAAK,GAAGP,aAAa,GAAG,EAAE,GAAG,EAAE;EACjC;EAEA,MAAM,CAACS,aAAa,EAAEC,gBAAgB,CAAC,GAAGzB,QAAQ,CAChDsB,KACF,CAAC;EAED,MAAMH,QAAQ,GAAGpB,WAAW,CAC1B,CAAC2B,KAA2C,EAAEC,KAAgB,KAAK;IACjE,MAAM;MACJC,MAAM,EAAE;QAAEN;MAAM;IAClB,CAAC,GAAGI,KAAK;IAIT,IAAIX,aAAa,EAAE;MACjBU,gBAAgB,CACd,OAAOH,KAAK,KAAK,QAAQ,GAAGA,KAAK,CAACO,KAAK,CAAC,GAAG,CAAC,GAAGP,KACjD,CAAC;IACH,CAAC,MAAM;MACLG,gBAAgB,CAACH,KAAK,CAAC;IACzB;IAGA,IAAIF,YAAY,EAAE;MAChBA,YAAY,CAACM,KAAK,EAAEC,KAAK,CAAC;IAC5B;EACF,CAAC,EACD,CAACZ,aAAa,EAAEK,YAAY,EAAEK,gBAAgB,CAChD,CAAC;EAID,MAAMK,iBAAiB,GAAGP,OAAO,CAACQ,GAAG,CAAEC,MAAM,IAAK;IAChD,IAAI,OAAOA,MAAM,KAAK,QAAQ,EAAE;MAC9B,OAAO;QACLC,IAAI,EAAED,MAAM,CAACC,IAAI;QACjBX,KAAK,EAAEU,MAAM,CAACV,KAAK,IAAIU,MAAM,CAACC,IAAI;QAClCC,IAAI,EAAEF,MAAM,CAACE,IAAI,KAAK,SAAS,GAAG,SAAS,GAAG;MAChD,CAAC;IACH;IAEA,OAAO;MAAED,IAAI,EAAED,MAAM;MAAEV,KAAK,EAAEU,MAAM;MAAEE,IAAI,EAAE;IAAS,CAAC;EACxD,CAAC,CAAC;EAEF,MAAMC,WAAW,GAAGpC,WAAW,CAC5BqC,QAA2B,IAAK;IAG/B,IAAI,OAAOA,QAAQ,KAAK,QAAQ,EAAE;MAChC,OAAOC,SAAS;IAClB;IAGA,MAAMC,aAAa,GAAGF,QAAQ,CAC3BL,GAAG,CAAEQ,IAAY,IAAK;MACrB,MAAMC,cAAc,GAAGV,iBAAiB,CAACW,IAAI,CAC1CT,MAAM,IAAKA,MAAM,CAACV,KAAK,KAAKiB,IAC/B,CAAC;MAED,IAAI,CAACC,cAAc,EAAE;QACnB,OAAO,IAAI;MACb;MAEA,OAAOpC,IAAA,CAAAsC,KAAA;QAAiBzB,KAAK,EAAEuB,cAAc,CAACP;MAAK,GAAjCM,IAAmC,CAAC;IACxD,CAAC,CAAC,CACDI,MAAM,CAACC,OAAO,CAAC;IAElB,IAAIN,aAAa,CAACO,MAAM,KAAK,CAAC,EAAE;MAC9B,OAAO,IAAI;IACb;IAIA,OAAOzC,IAAA,CAAA0C,IAAA;MAAAC,QAAA,EAAMT;IAAa,CAAM,CAAC;EACnC,CAAC,EACD,CAACR,iBAAiB,CACpB,CAAC;EAID,MAAMiB,QAAQ,GAAGjB,iBAAiB,CAACC,GAAG,CAAEC,MAAM,IAAK;IACjD,IAAIA,MAAM,CAACE,IAAI,KAAK,SAAS,EAAE;MAC7B,OAAO9B,IAAA,CAAA4C,cAAA;QAAAD,QAAA,EAAkCf,MAAM,CAACC;MAAI,GAAzBD,MAAM,CAACC,IAAkC,CAAC;IACvE;IAEA,OACE3B,KAAA,CAAA2C,SAAA;MAA6B3B,KAAK,EAAEU,MAAM,CAACV,KAAM;MAAAyB,QAAA,GAC9ChC,aAAa,IACZX,IAAA,CAACH,QAAQ;QAACiD,gBAAgB,EAAE1B,aAAa,CAAC2B,QAAQ,CAACnB,MAAM,CAACV,KAAK;MAAE,CAAE,CACpE,EACAU,MAAM,CAACC,IAAI;IAAA,GAJCD,MAAM,CAACV,KAKZ,CAAC;EAEf,CAAC,CAAC;EAEF,MAAM8B,oBAAoB,GAAGrD,WAAW,CACtC,MACEK,IAAA,CAAAiD,OAAA;IACEN,QAAQ,EAAEA,QAAS;IACnBnC,EAAE,EAAEC,UAAW;IACfyC,QAAQ,EAAEvC,aAAc;IACxBwC,IAAI,EAAE1C,UAAW;IACjBK,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEA,OAAQ;IACjBZ,GAAG,EAAEA,GAAI;IACT0B,WAAW,EAAEpB,aAAa,GAAGoB,WAAW,GAAGE,SAAU;IACrDf,KAAK,EAAEE,aAAc;IACrBgC,OAAO,EAAEvC;EAAM,CAChB,CACF,EACD,CACEJ,UAAU,EACVE,aAAa,EACbG,MAAM,EACNC,QAAQ,EACRE,OAAO,EACPZ,GAAG,EACHsC,QAAQ,EACRZ,WAAW,EACXX,aAAa,EACbP,KAAK,CAET,CAAC;EAED,OACEb,IAAA,CAACF,KAAK;IACJQ,YAAY,EAAEA,YAAa;IAC3B+C,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACf/C,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbmC,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMO,cAAc,GAAG7D,IAAI,CAACS,MAAM,CAAC;AACnCoD,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIpD,MAAM"}
1
+ {"version":3,"file":"Select.js","names":["memo","useCallback","useMemo","useState","Field","jsx","_jsx","jsxs","_jsxs","Select","_ref","errorMessage","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","value","testId","options","selectedValue","setSelectedValue","event","child","target","split","normalizedOptions","map","option","text","type","renderValue","selected","undefined","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","_ListSubheader","_MenuItem","_Checkbox","checked","includes","renderFieldComponent","_ref2","ariaDescribedBy","_Select","labelId","multiple","fieldType","hasVisibleLabel","MemoizedSelect","displayName"],"sources":["../src/Select.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 { ReactNode, memo, useCallback, useMemo, useState } from \"react\";\nimport {\n Box,\n Chip,\n Checkbox as MuiCheckbox,\n ListSubheader,\n MenuItem,\n Select as MuiSelect,\n SelectChangeEvent,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type SelectOption = {\n text: string;\n type?: \"heading\" | \"option\";\n value?: string;\n};\n\nexport type SelectProps = {\n /**\n * The error message for the Select\n */\n errorMessage?: string;\n /**\n * The hint text for the Select\n */\n hint?: string;\n /**\n * The id attribute of the Select\n */\n id?: string;\n /**\n * If `true`, the Select is disabled\n */\n isDisabled?: boolean;\n /**\n * If `true`, the Select allows multiple selections\n */\n isMultiSelect?: boolean;\n /**\n * If `true`, the Select is optional\n */\n isOptional?: boolean;\n /**\n * The label text for the Select\n */\n label: string;\n /**\n * The name of the `input` element. Defaults to the `id` if not set.\n */\n name?: string;\n /**\n * Callback fired when the Select loses focus\n */\n onBlur?: MuiSelectProps[\"onBlur\"];\n /**\n * Callback fired when the value of the Select changes\n */\n onChange?: MuiSelectProps[\"onChange\"];\n /**\n * Callback fired when the Select gains focus\n */\n onFocus?: MuiSelectProps[\"onFocus\"];\n /**\n * The options for the Select\n */\n options: (string | SelectOption)[];\n /**\n * The value or values selected in the Select\n */\n value?: string | string[];\n} & SeleniumProps;\n\n/**\n * Options in Odyssey <Select> are passed as an array, which can contain any combination\n * of the following:\n * - string — A simple string. The string will be both the text and the value of the resulting option.\n * <option value=\"string\">string</option>\n *\n * - { text: string } — Same as above, but the string is contained within an object.\n * <option value=\"text\">text</option>\n *\n * - { text: string, value: string } — The option text will be text, and the option value will be value.\n * <option value=\"value\">text</option>\n *\n * - { text: string, type: \"heading\" } — Used to display a group heading with the text\n */\n\nconst Select = ({\n errorMessage,\n hint,\n id: idOverride,\n isDisabled = false,\n isMultiSelect = false,\n isOptional = false,\n label,\n name: nameOverride,\n onBlur,\n onChange: onChangeProp,\n onFocus,\n value,\n testId,\n options,\n}: SelectProps) => {\n // If there's no value set, we set it to a blank string (if it's a single-select)\n // or an empty array (if it's a multi-select)\n if (typeof value === \"undefined\") {\n value = isMultiSelect ? [] : \"\";\n }\n\n const [selectedValue, setSelectedValue] = useState<string | string[]>(value);\n\n const onChange = useCallback(\n (event: SelectChangeEvent<string | string[]>, child: ReactNode) => {\n const {\n target: { value },\n } = event;\n\n // Set the field value, with some additional logic to handle array values\n // for multi-selects\n if (isMultiSelect) {\n setSelectedValue(typeof value === \"string\" ? value.split(\",\") : value);\n } else {\n setSelectedValue(value);\n }\n\n // Trigger the onChange event, if one has been passed\n if (onChangeProp) {\n onChangeProp(event, child);\n }\n },\n [isMultiSelect, onChangeProp, setSelectedValue]\n );\n\n // Normalize the options array to accommodate the various\n // data types that might be passed\n const normalizedOptions = useMemo(\n () =>\n options.map((option) =>\n typeof option === \"object\"\n ? {\n text: option.text,\n value: option.value || option.text,\n type: option.type === \"heading\" ? \"heading\" : \"option\",\n }\n : { text: option, value: option, type: \"option\" }\n ),\n [options]\n );\n\n const renderValue = useCallback(\n (selected: string | string[]) => {\n // If the selected value isn't an array, then we don't need to display\n // chips and should fall back to the default render behavior\n if (typeof selected === \"string\") {\n return undefined;\n }\n\n // Convert the selected options array into <Chip>s\n const renderedChips = selected\n .map((item: string) => {\n const selectedOption = normalizedOptions.find(\n (option) => option.value === item\n );\n\n if (!selectedOption) {\n return null;\n }\n\n return <Chip key={item} label={selectedOption.text} />;\n })\n .filter(Boolean);\n\n if (renderedChips.length === 0) {\n return null;\n }\n\n // We need the <Box> to surround the <Chip>s for\n // proper styling\n return <Box>{renderedChips}</Box>;\n },\n [normalizedOptions]\n );\n\n // Convert the options into the ReactNode children\n // that will populate the <Select>\n const children = useMemo(\n () =>\n normalizedOptions.map((option) => {\n if (option.type === \"heading\") {\n return <ListSubheader key={option.text}>{option.text}</ListSubheader>;\n }\n\n return (\n <MenuItem key={option.value} value={option.value}>\n {isMultiSelect && (\n <MuiCheckbox checked={selectedValue.includes(option.value)} />\n )}\n {option.text}\n </MenuItem>\n );\n }),\n [isMultiSelect, normalizedOptions, selectedValue]\n );\n\n const renderFieldComponent = useCallback(\n ({ ariaDescribedBy, id }) => (\n <MuiSelect\n aria-describedby={ariaDescribedBy}\n children={children}\n data-se={testId}\n id={id}\n labelId={label}\n multiple={isMultiSelect}\n name={nameOverride ?? id}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n renderValue={isMultiSelect ? renderValue : undefined}\n value={selectedValue}\n />\n ),\n [\n children,\n isMultiSelect,\n label,\n nameOverride,\n onBlur,\n onChange,\n onFocus,\n renderValue,\n selectedValue,\n testId,\n ]\n );\n\n return (\n <Field\n errorMessage={errorMessage}\n fieldType=\"single\"\n hasVisibleLabel\n hint={hint}\n id={idOverride}\n isDisabled={isDisabled}\n isOptional={isOptional}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n};\n\nconst MemoizedSelect = memo(Select);\nMemoizedSelect.displayName = \"Select\";\n\nexport { MemoizedSelect as Select };\n"],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=SeleniumProps.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"SeleniumProps.js","names":[],"sources":["../src/SeleniumProps.ts"],"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\nexport type SeleniumProps = {\n /**\n * This prop puts a `data` attribute on an HTML element in this component with the value provided.\n *\n * @deprecated **WARNING:** You should be using Semantic Selectors instead of this property. This is a temporary measure for backwards compatibility with existing Selenium tests.\n */\n testId?: string;\n};\n"],"mappings":""}
package/dist/Status.js CHANGED
@@ -16,15 +16,17 @@ export const statusSeverityValues = ["default", "error", "success", "warning"];
16
16
  export const statusVariantValues = ["lamp", "pill"];
17
17
  export const Status = _ref => {
18
18
  let {
19
- severity,
20
19
  label,
20
+ severity,
21
+ testId,
21
22
  variant = "lamp"
22
23
  } = _ref;
23
24
  const muiProps = useMuiProps();
24
25
  return _jsx(_Chip, {
25
26
  ...muiProps,
26
- label: label,
27
27
  color: severity,
28
+ "data-se": testId,
29
+ label: label,
28
30
  variant: variant
29
31
  });
30
32
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Status.js","names":["useMuiProps","jsx","_jsx","statusSeverityValues","statusVariantValues","Status","_ref","severity","label","variant","muiProps","_Chip","color"],"sources":["../src/Status.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 { Chip } from \"@mui/material\";\n\nimport { useMuiProps } from \"./MuiPropsContext\";\n\nexport const statusSeverityValues = [\n \"default\",\n \"error\",\n \"success\",\n \"warning\",\n] as const;\nexport const statusVariantValues = [\"lamp\", \"pill\"] as const;\n\nexport type StatusProps = {\n /**\n * The text content of the Status\n */\n label: string;\n /**\n * Determine the color and icon of the Status\n */\n severity: (typeof statusSeverityValues)[number];\n /**\n * The style of the Status indicator\n */\n variant?: (typeof statusVariantValues)[number];\n};\n\nexport const Status = ({ severity, label, variant = \"lamp\" }: StatusProps) => {\n const muiProps = useMuiProps();\n\n return (\n <Chip {...muiProps} label={label} color={severity} variant={variant} />\n );\n};\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAcSA,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEpB,OAAO,MAAMC,oBAAoB,GAAG,CAClC,SAAS,EACT,OAAO,EACP,SAAS,EACT,SAAS,CACD;AACV,OAAO,MAAMC,mBAAmB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU;AAiB5D,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAAwD;EAAA,IAAvD;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,OAAO,GAAG;EAAoB,CAAC,GAAAH,IAAA;EACvE,MAAMI,QAAQ,GAAGV,WAAW,CAAC,CAAC;EAE9B,OACEE,IAAA,CAAAS,KAAA;IAAA,GAAUD,QAAQ;IAAEF,KAAK,EAAEA,KAAM;IAACI,KAAK,EAAEL,QAAS;IAACE,OAAO,EAAEA;EAAQ,CAAE,CAAC;AAE3E,CAAC"}
1
+ {"version":3,"file":"Status.js","names":["useMuiProps","jsx","_jsx","statusSeverityValues","statusVariantValues","Status","_ref","label","severity","testId","variant","muiProps","_Chip","color"],"sources":["../src/Status.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 { Chip } from \"@mui/material\";\n\nimport { useMuiProps } from \"./MuiPropsContext\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport const statusSeverityValues = [\n \"default\",\n \"error\",\n \"success\",\n \"warning\",\n] as const;\nexport const statusVariantValues = [\"lamp\", \"pill\"] as const;\n\nexport type StatusProps = {\n /**\n * The text content of the Status\n */\n label: string;\n /**\n * Determine the color and icon of the Status\n */\n severity: (typeof statusSeverityValues)[number];\n /**\n * The style of the Status indicator\n */\n variant?: (typeof statusVariantValues)[number];\n} & SeleniumProps;\n\nexport const Status = ({\n label,\n severity,\n testId,\n variant = \"lamp\",\n}: StatusProps) => {\n const muiProps = useMuiProps();\n\n return (\n <Chip\n {...muiProps}\n color={severity}\n data-se={testId}\n label={label}\n variant={variant}\n />\n );\n};\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAcSA,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGpB,OAAO,MAAMC,oBAAoB,GAAG,CAClC,SAAS,EACT,OAAO,EACP,SAAS,EACT,SAAS,CACD;AACV,OAAO,MAAMC,mBAAmB,GAAG,CAAC,MAAM,EAAE,MAAM,CAAU;AAiB5D,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAKH;EAAA,IALI;IACrBC,KAAK;IACLC,QAAQ;IACRC,MAAM;IACNC,OAAO,GAAG;EACC,CAAC,GAAAJ,IAAA;EACZ,MAAMK,QAAQ,GAAGX,WAAW,CAAC,CAAC;EAE9B,OACEE,IAAA,CAAAU,KAAA;IAAA,GACMD,QAAQ;IACZE,KAAK,EAAEL,QAAS;IAChB,WAASC,MAAO;IAChBF,KAAK,EAAEA,KAAM;IACbG,OAAO,EAAEA;EAAQ,CAClB,CAAC;AAEN,CAAC"}
package/dist/Tabs.js CHANGED
@@ -11,26 +11,33 @@ import _Tab from "@mui/material/Tab";
11
11
  * See the License for the specific language governing permissions and limitations under the License.
12
12
  */
13
13
 
14
- import React, { memo, useCallback, useState } from "react";
14
+ import React, { memo, useCallback, useEffect, useState } from "react";
15
15
  import { TabList as MuiTabList, TabPanel as MuiTabPanel, TabContext as MuiTabContext } from "@mui/lab";
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
17
  import { jsxs as _jsxs } from "react/jsx-runtime";
18
18
  const Tabs = _ref => {
19
19
  let {
20
20
  ariaLabel,
21
- initialValue = "0",
22
- tabs
21
+ initialValue,
22
+ tabs,
23
+ value
23
24
  } = _ref;
24
- const [tabState, setTabState] = useState(initialValue);
25
+ const [tabState, setTabState] = useState(initialValue ?? value ?? "0");
25
26
  const onChange = useCallback((_event, newState) => {
26
27
  setTabState(newState);
27
28
  }, []);
29
+ useEffect(() => {
30
+ if (value !== undefined) {
31
+ setTabState(value);
32
+ }
33
+ }, [value]);
28
34
  return _jsxs(MuiTabContext, {
29
35
  value: tabState,
30
36
  children: [_jsx(MuiTabList, {
31
37
  onChange: onChange,
32
38
  "aria-label": ariaLabel,
33
39
  children: tabs.map((tab, index) => _jsx(_Tab, {
40
+ "data-se": tab.testId,
34
41
  disabled: tab.isDisabled,
35
42
  icon: tab.startIcon,
36
43
  label: tab.label,
package/dist/Tabs.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tabs.js","names":["React","memo","useCallback","useState","TabList","MuiTabList","TabPanel","MuiTabPanel","TabContext","MuiTabContext","jsx","_jsx","jsxs","_jsxs","Tabs","_ref","ariaLabel","initialValue","tabs","tabState","setTabState","onChange","_event","newState","value","children","map","tab","index","_Tab","disabled","isDisabled","icon","startIcon","label","toString","MemoizedTabs","displayName"],"sources":["../src/Tabs.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 React, {\n ReactElement,\n ReactNode,\n memo,\n useCallback,\n useState,\n} from \"react\";\nimport { Tab as MuiTab } from \"@mui/material\";\nimport {\n TabList as MuiTabList,\n TabPanel as MuiTabPanel,\n TabContext as MuiTabContext,\n} from \"@mui/lab\";\n\nexport type TabItemProps = {\n /**\n * The content of the Tab itself\n */\n children: ReactNode;\n /**\n * If `true`, the TabItem is disabled\n */\n isDisabled?: boolean;\n /**\n * The label text for the TabItem\n */\n label: string;\n /**\n * An optional icon to display at the start of the TabItem\n */\n startIcon?: ReactElement;\n /**\n * The value associated with the TabItem\n */\n value?: string;\n};\n\nexport type TabsProps = {\n /**\n * The ARIA label for the full Tabs group\n */\n ariaLabel?: string;\n /**\n * The value of the Tab that should be selected by default\n */\n initialValue?: string;\n /**\n * The TabItems to be included in the Tabs group\n */\n tabs: TabItemProps[];\n};\n\nconst Tabs = ({ ariaLabel, initialValue = \"0\", tabs }: TabsProps) => {\n const [tabState, setTabState] = useState(initialValue);\n\n const onChange = useCallback(\n (_event: React.SyntheticEvent, newState: string) => {\n setTabState(newState);\n },\n []\n );\n\n return (\n <MuiTabContext value={tabState}>\n <MuiTabList onChange={onChange} aria-label={ariaLabel}>\n {tabs.map((tab, index) => (\n <MuiTab\n disabled={tab.isDisabled}\n icon={tab.startIcon}\n label={tab.label}\n value={tab.value ? tab.value : index.toString()}\n key={tab.value ? tab.value : index.toString()}\n />\n ))}\n </MuiTabList>\n {tabs.map((tab, index) => (\n <MuiTabPanel\n value={tab.value ? tab.value : index.toString()}\n key={tab.value ? tab.value : index.toString()}\n >\n {tab.children}\n </MuiTabPanel>\n ))}\n </MuiTabContext>\n );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAGVC,IAAI,EACJC,WAAW,EACXC,QAAQ,QACH,OAAO;AAEd,SACEC,OAAO,IAAIC,UAAU,EACrBC,QAAQ,IAAIC,WAAW,EACvBC,UAAU,IAAIC,aAAa,QACtB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAwClB,MAAMC,IAAI,GAAGC,IAAA,IAAwD;EAAA,IAAvD;IAAEC,SAAS;IAAEC,YAAY,GAAG,GAAG;IAAEC;EAAgB,CAAC,GAAAH,IAAA;EAC9D,MAAM,CAACI,QAAQ,EAAEC,WAAW,CAAC,GAAGjB,QAAQ,CAACc,YAAY,CAAC;EAEtD,MAAMI,QAAQ,GAAGnB,WAAW,CAC1B,CAACoB,MAA4B,EAAEC,QAAgB,KAAK;IAClDH,WAAW,CAACG,QAAQ,CAAC;EACvB,CAAC,EACD,EACF,CAAC;EAED,OACEV,KAAA,CAACJ,aAAa;IAACe,KAAK,EAAEL,QAAS;IAAAM,QAAA,GAC7Bd,IAAA,CAACN,UAAU;MAACgB,QAAQ,EAAEA,QAAS;MAAC,cAAYL,SAAU;MAAAS,QAAA,EACnDP,IAAI,CAACQ,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBjB,IAAA,CAAAkB,IAAA;QACEC,QAAQ,EAAEH,GAAG,CAACI,UAAW;QACzBC,IAAI,EAAEL,GAAG,CAACM,SAAU;QACpBC,KAAK,EAAEP,GAAG,CAACO,KAAM;QACjBV,KAAK,EAAEG,GAAG,CAACH,KAAK,GAAGG,GAAG,CAACH,KAAK,GAAGI,KAAK,CAACO,QAAQ,CAAC;MAAE,GAC3CR,GAAG,CAACH,KAAK,GAAGG,GAAG,CAACH,KAAK,GAAGI,KAAK,CAACO,QAAQ,CAAC,CAC7C,CACF;IAAC,CACQ,CAAC,EACZjB,IAAI,CAACQ,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBjB,IAAA,CAACJ,WAAW;MACViB,KAAK,EAAEG,GAAG,CAACH,KAAK,GAAGG,GAAG,CAACH,KAAK,GAAGI,KAAK,CAACO,QAAQ,CAAC,CAAE;MAAAV,QAAA,EAG/CE,GAAG,CAACF;IAAQ,GAFRE,GAAG,CAACH,KAAK,GAAGG,GAAG,CAACH,KAAK,GAAGI,KAAK,CAACO,QAAQ,CAAC,CAGjC,CACd,CAAC;EAAA,CACW,CAAC;AAEpB,CAAC;AAED,MAAMC,YAAY,GAAGnC,IAAI,CAACa,IAAI,CAAC;AAC/BsB,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAItB,IAAI"}
1
+ {"version":3,"file":"Tabs.js","names":["React","memo","useCallback","useEffect","useState","TabList","MuiTabList","TabPanel","MuiTabPanel","TabContext","MuiTabContext","jsx","_jsx","jsxs","_jsxs","Tabs","_ref","ariaLabel","initialValue","tabs","value","tabState","setTabState","onChange","_event","newState","undefined","children","map","tab","index","_Tab","testId","disabled","isDisabled","icon","startIcon","label","toString","MemoizedTabs","displayName"],"sources":["../src/Tabs.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 React, {\n ReactElement,\n ReactNode,\n memo,\n useCallback,\n useEffect,\n useState,\n} from \"react\";\nimport { Tab as MuiTab } from \"@mui/material\";\nimport {\n TabList as MuiTabList,\n TabPanel as MuiTabPanel,\n TabContext as MuiTabContext,\n} from \"@mui/lab\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport type TabItemProps = {\n /**\n * The content of the Tab itself\n */\n children: ReactNode;\n /**\n * If `true`, the TabItem is disabled\n */\n isDisabled?: boolean;\n /**\n * The label text for the TabItem\n */\n label: string;\n /**\n * An optional icon to display at the start of the TabItem\n */\n startIcon?: ReactElement;\n /**\n * The value associated with the TabItem\n */\n value?: string;\n} & SeleniumProps;\n\nexport type TabsProps = {\n /**\n * The ARIA label for the full Tabs group\n */\n ariaLabel?: string;\n /**\n * @deprecated please use the `value` prop instead\n * When `value` is provided, `initialValue` isn't used.\n */\n initialValue?: string;\n /**\n * The TabItems to be included in the Tabs group\n */\n tabs: TabItemProps[];\n /**\n * Identifier for the selected tab.\n */\n value?: string;\n};\n\nconst Tabs = ({ ariaLabel, initialValue, tabs, value }: TabsProps) => {\n const [tabState, setTabState] = useState(initialValue ?? value ?? \"0\");\n\n const onChange = useCallback(\n (_event: React.SyntheticEvent, newState: string) => {\n setTabState(newState);\n },\n []\n );\n\n useEffect(() => {\n if (value !== undefined) {\n setTabState(value);\n }\n }, [value]);\n\n return (\n <MuiTabContext value={tabState}>\n <MuiTabList onChange={onChange} aria-label={ariaLabel}>\n {tabs.map((tab, index) => (\n <MuiTab\n data-se={tab.testId}\n disabled={tab.isDisabled}\n icon={tab.startIcon}\n label={tab.label}\n value={tab.value ? tab.value : index.toString()}\n key={tab.value ? tab.value : index.toString()}\n />\n ))}\n </MuiTabList>\n {tabs.map((tab, index) => (\n <MuiTabPanel\n value={tab.value ? tab.value : index.toString()}\n key={tab.value ? tab.value : index.toString()}\n >\n {tab.children}\n </MuiTabPanel>\n ))}\n </MuiTabContext>\n );\n};\n\nconst MemoizedTabs = memo(Tabs);\nMemoizedTabs.displayName = \"Tabs\";\n\nexport { MemoizedTabs as Tabs };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAGVC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,QAAQ,QACH,OAAO;AAEd,SACEC,OAAO,IAAIC,UAAU,EACrBC,QAAQ,IAAIC,WAAW,EACvBC,UAAU,IAAIC,aAAa,QACtB,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA8ClB,MAAMC,IAAI,GAAGC,IAAA,IAAyD;EAAA,IAAxD;IAAEC,SAAS;IAAEC,YAAY;IAAEC,IAAI;IAAEC;EAAiB,CAAC,GAAAJ,IAAA;EAC/D,MAAM,CAACK,QAAQ,EAAEC,WAAW,CAAC,GAAGlB,QAAQ,CAACc,YAAY,IAAIE,KAAK,IAAI,GAAG,CAAC;EAEtE,MAAMG,QAAQ,GAAGrB,WAAW,CAC1B,CAACsB,MAA4B,EAAEC,QAAgB,KAAK;IAClDH,WAAW,CAACG,QAAQ,CAAC;EACvB,CAAC,EACD,EACF,CAAC;EAEDtB,SAAS,CAAC,MAAM;IACd,IAAIiB,KAAK,KAAKM,SAAS,EAAE;MACvBJ,WAAW,CAACF,KAAK,CAAC;IACpB;EACF,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,OACEN,KAAA,CAACJ,aAAa;IAACU,KAAK,EAAEC,QAAS;IAAAM,QAAA,GAC7Bf,IAAA,CAACN,UAAU;MAACiB,QAAQ,EAAEA,QAAS;MAAC,cAAYN,SAAU;MAAAU,QAAA,EACnDR,IAAI,CAACS,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBlB,IAAA,CAAAmB,IAAA;QACE,WAASF,GAAG,CAACG,MAAO;QACpBC,QAAQ,EAAEJ,GAAG,CAACK,UAAW;QACzBC,IAAI,EAAEN,GAAG,CAACO,SAAU;QACpBC,KAAK,EAAER,GAAG,CAACQ,KAAM;QACjBjB,KAAK,EAAES,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC;MAAE,GAC3CT,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAC7C,CACF;IAAC,CACQ,CAAC,EACZnB,IAAI,CAACS,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,KACnBlB,IAAA,CAACJ,WAAW;MACVY,KAAK,EAAES,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAAE;MAAAX,QAAA,EAG/CE,GAAG,CAACF;IAAQ,GAFRE,GAAG,CAACT,KAAK,GAAGS,GAAG,CAACT,KAAK,GAAGU,KAAK,CAACQ,QAAQ,CAAC,CAGjC,CACd,CAAC;EAAA,CACW,CAAC;AAEpB,CAAC;AAED,MAAMC,YAAY,GAAGtC,IAAI,CAACc,IAAI,CAAC;AAC/BwB,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAIxB,IAAI"}
package/dist/Tag.js CHANGED
@@ -20,7 +20,8 @@ const Tag = _ref => {
20
20
  isDisabled,
21
21
  label,
22
22
  onClick,
23
- onRemove
23
+ onRemove,
24
+ testId
24
25
  } = _ref;
25
26
  const {
26
27
  chipElementType
@@ -30,12 +31,13 @@ const Tag = _ref => {
30
31
  "aria-disabled": isDisabled,
31
32
  clickable: onClick ? true : false,
32
33
  component: chipElementType,
34
+ "data-se": testId,
33
35
  disabled: isDisabled,
34
36
  icon: icon,
35
37
  label: label,
36
38
  onClick: onClick,
37
39
  onDelete: onRemove
38
- }), [chipElementType, icon, isDisabled, label, onClick, onRemove]);
40
+ }), [chipElementType, icon, isDisabled, label, onClick, onRemove, testId]);
39
41
  return _jsx(MuiPropsContext.Consumer, {
40
42
  children: renderTag
41
43
  });
package/dist/Tag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Tag.js","names":["memo","useCallback","useContext","TagListContext","MuiPropsContext","jsx","_jsx","Tag","_ref","icon","isDisabled","label","onClick","onRemove","chipElementType","renderTag","muiProps","_Chip","clickable","component","disabled","onDelete","Consumer","children","MemoizedTag","displayName"],"sources":["../src/Tag.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 { Chip as MuiChip, ChipProps as MuiChipProps } from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useContext } from \"react\";\nimport { TagListContext } from \"./TagListContext\";\nimport { MuiPropsContext } from \"./MuiPropsContext\";\n\nexport type TagProps = {\n icon?: ReactElement;\n isDisabled?: boolean;\n /**\n * The label text for the Tag\n */\n label: string;\n /**\n * Callback fired when the Tag is clicked\n */\n onClick?: MuiChipProps[\"onClick\"];\n /**\n * Callback fired when the remove button of the Tag is clicked\n */\n onRemove?: MuiChipProps[\"onDelete\"];\n};\n\nconst Tag = ({ icon, isDisabled, label, onClick, onRemove }: TagProps) => {\n const { chipElementType } = useContext(TagListContext);\n\n const renderTag = useCallback(\n (muiProps) => (\n <MuiChip\n {...muiProps}\n aria-disabled={isDisabled}\n clickable={onClick ? true : false}\n component={chipElementType}\n disabled={isDisabled}\n icon={icon}\n label={label}\n onClick={onClick}\n onDelete={onRemove}\n />\n ),\n [chipElementType, icon, isDisabled, label, onClick, onRemove]\n );\n\n return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;\n};\n\nconst MemoizedTag = memo(Tag);\nMemoizedTag.displayName = \"Tag\";\n\nexport { MemoizedTag as Tag };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AAAC,SAC3DC,cAAc;AAAA,SACdC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAmBxB,MAAMC,GAAG,GAAGC,IAAA,IAA8D;EAAA,IAA7D;IAAEC,IAAI;IAAEC,UAAU;IAAEC,KAAK;IAAEC,OAAO;IAAEC;EAAmB,CAAC,GAAAL,IAAA;EACnE,MAAM;IAAEM;EAAgB,CAAC,GAAGZ,UAAU,CAACC,cAAc,CAAC;EAEtD,MAAMY,SAAS,GAAGd,WAAW,CAC1Be,QAAQ,IACPV,IAAA,CAAAW,KAAA;IAAA,GACMD,QAAQ;IACZ,iBAAeN,UAAW;IAC1BQ,SAAS,EAAEN,OAAO,GAAG,IAAI,GAAG,KAAM;IAClCO,SAAS,EAAEL,eAAgB;IAC3BM,QAAQ,EAAEV,UAAW;IACrBD,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBS,QAAQ,EAAER;EAAS,CACpB,CACF,EACD,CAACC,eAAe,EAAEL,IAAI,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,CAC9D,CAAC;EAED,OAAOP,IAAA,CAACF,eAAe,CAACkB,QAAQ;IAAAC,QAAA,EAAER;EAAS,CAA2B,CAAC;AACzE,CAAC;AAED,MAAMS,WAAW,GAAGxB,IAAI,CAACO,GAAG,CAAC;AAC7BiB,WAAW,CAACC,WAAW,GAAG,KAAK;AAE/B,SAASD,WAAW,IAAIjB,GAAG"}
1
+ {"version":3,"file":"Tag.js","names":["memo","useCallback","useContext","TagListContext","MuiPropsContext","jsx","_jsx","Tag","_ref","icon","isDisabled","label","onClick","onRemove","testId","chipElementType","renderTag","muiProps","_Chip","clickable","component","disabled","onDelete","Consumer","children","MemoizedTag","displayName"],"sources":["../src/Tag.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 { Chip as MuiChip, ChipProps as MuiChipProps } from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useContext } from \"react\";\nimport { TagListContext } from \"./TagListContext\";\nimport { MuiPropsContext } from \"./MuiPropsContext\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport type TagProps = {\n icon?: ReactElement;\n isDisabled?: boolean;\n /**\n * The label text for the Tag\n */\n label: string;\n /**\n * Callback fired when the Tag is clicked\n */\n onClick?: MuiChipProps[\"onClick\"];\n /**\n * Callback fired when the remove button of the Tag is clicked\n */\n onRemove?: MuiChipProps[\"onDelete\"];\n} & SeleniumProps;\n\nconst Tag = ({\n icon,\n isDisabled,\n label,\n onClick,\n onRemove,\n testId,\n}: TagProps) => {\n const { chipElementType } = useContext(TagListContext);\n\n const renderTag = useCallback(\n (muiProps) => (\n <MuiChip\n {...muiProps}\n aria-disabled={isDisabled}\n clickable={onClick ? true : false}\n component={chipElementType}\n data-se={testId}\n disabled={isDisabled}\n icon={icon}\n label={label}\n onClick={onClick}\n onDelete={onRemove}\n />\n ),\n [chipElementType, icon, isDisabled, label, onClick, onRemove, testId]\n );\n\n return <MuiPropsContext.Consumer>{renderTag}</MuiPropsContext.Consumer>;\n};\n\nconst MemoizedTag = memo(Tag);\nMemoizedTag.displayName = \"Tag\";\n\nexport { MemoizedTag as Tag };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,UAAU,QAAQ,OAAO;AAAC,SAC3DC,cAAc;AAAA,SACdC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoBxB,MAAMC,GAAG,GAAGC,IAAA,IAOI;EAAA,IAPH;IACXC,IAAI;IACJC,UAAU;IACVC,KAAK;IACLC,OAAO;IACPC,QAAQ;IACRC;EACQ,CAAC,GAAAN,IAAA;EACT,MAAM;IAAEO;EAAgB,CAAC,GAAGb,UAAU,CAACC,cAAc,CAAC;EAEtD,MAAMa,SAAS,GAAGf,WAAW,CAC1BgB,QAAQ,IACPX,IAAA,CAAAY,KAAA;IAAA,GACMD,QAAQ;IACZ,iBAAeP,UAAW;IAC1BS,SAAS,EAAEP,OAAO,GAAG,IAAI,GAAG,KAAM;IAClCQ,SAAS,EAAEL,eAAgB;IAC3B,WAASD,MAAO;IAChBO,QAAQ,EAAEX,UAAW;IACrBD,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA,KAAM;IACbC,OAAO,EAAEA,OAAQ;IACjBU,QAAQ,EAAET;EAAS,CACpB,CACF,EACD,CAACE,eAAe,EAAEN,IAAI,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,CACtE,CAAC;EAED,OAAOR,IAAA,CAACF,eAAe,CAACmB,QAAQ;IAAAC,QAAA,EAAER;EAAS,CAA2B,CAAC;AACzE,CAAC;AAED,MAAMS,WAAW,GAAGzB,IAAI,CAACO,GAAG,CAAC;AAC7BkB,WAAW,CAACC,WAAW,GAAG,KAAK;AAE/B,SAASD,WAAW,IAAIlB,GAAG"}
package/dist/TagList.js CHANGED
@@ -15,13 +15,15 @@ import { TagListContext } from "./TagListContext.js";
15
15
  import { jsx as _jsx } from "react/jsx-runtime";
16
16
  const TagList = _ref => {
17
17
  let {
18
- children
18
+ children,
19
+ testId
19
20
  } = _ref;
20
21
  const providerValue = useMemo(() => ({
21
22
  chipElementType: "li"
22
23
  }), []);
23
24
  return _jsx(_Stack, {
24
25
  component: "ul",
26
+ "data-se": testId,
25
27
  direction: "row",
26
28
  spacing: 2,
27
29
  useFlexGap: true,
@@ -1 +1 @@
1
- {"version":3,"file":"TagList.js","names":["memo","useMemo","TagListContext","jsx","_jsx","TagList","_ref","children","providerValue","chipElementType","_Stack","component","direction","spacing","useFlexGap","flexWrap","Provider","value","MemoizedTagList","displayName"],"sources":["../src/TagList.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 { Tag } from \"./Tag\";\nimport { Stack } from \"@mui/material\";\nimport { memo, ReactElement, useMemo } from \"react\";\nimport { ChipElementType, TagListContext } from \"./TagListContext\";\n\nexport type TagListProps = {\n /**\n * The Tag or array of Tags within the TagList\n */\n children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;\n};\n\nconst TagList = ({ children }: TagListProps) => {\n const providerValue = useMemo<{\n chipElementType: ChipElementType;\n }>(\n () => ({\n chipElementType: \"li\",\n }),\n []\n );\n\n return (\n <Stack\n component=\"ul\"\n direction=\"row\"\n spacing={2}\n useFlexGap\n flexWrap=\"wrap\"\n >\n <TagListContext.Provider value={providerValue}>\n {children}\n </TagListContext.Provider>\n </Stack>\n );\n};\n\nconst MemoizedTagList = memo(TagList);\nMemoizedTagList.displayName = \"TagList\";\n\nexport { MemoizedTagList as TagList };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA,SAASA,IAAI,EAAgBC,OAAO,QAAQ,OAAO;AAAC,SAC1BC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AASxC,MAAMC,OAAO,GAAGC,IAAA,IAAgC;EAAA,IAA/B;IAAEC;EAAuB,CAAC,GAAAD,IAAA;EACzC,MAAME,aAAa,GAAGP,OAAO,CAG3B,OAAO;IACLQ,eAAe,EAAE;EACnB,CAAC,CAAC,EACF,EACF,CAAC;EAED,OACEL,IAAA,CAAAM,MAAA;IACEC,SAAS,EAAC,IAAI;IACdC,SAAS,EAAC,KAAK;IACfC,OAAO,EAAE,CAAE;IACXC,UAAU;IACVC,QAAQ,EAAC,MAAM;IAAAR,QAAA,EAEfH,IAAA,CAACF,cAAc,CAACc,QAAQ;MAACC,KAAK,EAAET,aAAc;MAAAD,QAAA,EAC3CA;IAAQ,CACc;EAAC,CACrB,CAAC;AAEZ,CAAC;AAED,MAAMW,eAAe,GAAGlB,IAAI,CAACK,OAAO,CAAC;AACrCa,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAIb,OAAO"}
1
+ {"version":3,"file":"TagList.js","names":["memo","useMemo","TagListContext","jsx","_jsx","TagList","_ref","children","testId","providerValue","chipElementType","_Stack","component","direction","spacing","useFlexGap","flexWrap","Provider","value","MemoizedTagList","displayName"],"sources":["../src/TagList.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 { Tag } from \"./Tag\";\nimport { Stack } from \"@mui/material\";\nimport { memo, ReactElement, useMemo } from \"react\";\nimport { ChipElementType, TagListContext } from \"./TagListContext\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport type TagListProps = {\n /**\n * The Tag or array of Tags within the TagList\n */\n children: ReactElement<typeof Tag> | Array<ReactElement<typeof Tag>>;\n} & SeleniumProps;\n\nconst TagList = ({ children, testId }: TagListProps) => {\n const providerValue = useMemo<{\n chipElementType: ChipElementType;\n }>(\n () => ({\n chipElementType: \"li\",\n }),\n []\n );\n\n return (\n <Stack\n component=\"ul\"\n data-se={testId}\n direction=\"row\"\n spacing={2}\n useFlexGap\n flexWrap=\"wrap\"\n >\n <TagListContext.Provider value={providerValue}>\n {children}\n </TagListContext.Provider>\n </Stack>\n );\n};\n\nconst MemoizedTagList = memo(TagList);\nMemoizedTagList.displayName = \"TagList\";\n\nexport { MemoizedTagList as TagList };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAIA,SAASA,IAAI,EAAgBC,OAAO,QAAQ,OAAO;AAAC,SAC1BC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAUxC,MAAMC,OAAO,GAAGC,IAAA,IAAwC;EAAA,IAAvC;IAAEC,QAAQ;IAAEC;EAAqB,CAAC,GAAAF,IAAA;EACjD,MAAMG,aAAa,GAAGR,OAAO,CAG3B,OAAO;IACLS,eAAe,EAAE;EACnB,CAAC,CAAC,EACF,EACF,CAAC;EAED,OACEN,IAAA,CAAAO,MAAA;IACEC,SAAS,EAAC,IAAI;IACd,WAASJ,MAAO;IAChBK,SAAS,EAAC,KAAK;IACfC,OAAO,EAAE,CAAE;IACXC,UAAU;IACVC,QAAQ,EAAC,MAAM;IAAAT,QAAA,EAEfH,IAAA,CAACF,cAAc,CAACe,QAAQ;MAACC,KAAK,EAAET,aAAc;MAAAF,QAAA,EAC3CA;IAAQ,CACc;EAAC,CACrB,CAAC;AAEZ,CAAC;AAED,MAAMY,eAAe,GAAGnB,IAAI,CAACK,OAAO,CAAC;AACrCc,eAAe,CAACC,WAAW,GAAG,SAAS;AAEvC,SAASD,eAAe,IAAId,OAAO"}
package/dist/TextField.js CHANGED
@@ -28,11 +28,13 @@ const TextField = forwardRef((_ref, ref) => {
28
28
  isOptional = false,
29
29
  isReadOnly,
30
30
  label,
31
+ name: nameOverride,
31
32
  onBlur,
32
33
  onChange,
33
34
  onFocus,
34
35
  placeholder,
35
36
  startAdornment,
37
+ testId,
36
38
  type = "text",
37
39
  value
38
40
  } = _ref;
@@ -45,19 +47,21 @@ const TextField = forwardRef((_ref, ref) => {
45
47
  "aria-describedby": ariaDescribedBy,
46
48
  autoComplete: autoCompleteType,
47
49
  autoFocus: hasInitialFocus,
50
+ "data-se": testId,
48
51
  endAdornment: endAdornment && _jsx(_InputAdornment, {
49
52
  position: "end",
50
53
  children: endAdornment
51
54
  }),
52
55
  id: id,
53
56
  multiline: isMultiline,
54
- name: id,
57
+ name: nameOverride ?? id,
55
58
  onBlur: onBlur,
56
59
  onChange: onChange,
57
60
  onFocus: onFocus,
58
61
  placeholder: placeholder,
59
62
  readOnly: isReadOnly,
60
63
  ref: ref,
64
+ required: !isOptional,
61
65
  startAdornment: startAdornment && _jsx(_InputAdornment, {
62
66
  position: "start",
63
67
  children: startAdornment
@@ -65,7 +69,7 @@ const TextField = forwardRef((_ref, ref) => {
65
69
  type: type,
66
70
  value: value
67
71
  });
68
- }, [autoCompleteType, hasInitialFocus, endAdornment, isMultiline, onChange, onFocus, onBlur, placeholder, isReadOnly, ref, startAdornment, type, value]);
72
+ }, [autoCompleteType, hasInitialFocus, endAdornment, isMultiline, nameOverride, onChange, onFocus, onBlur, placeholder, isOptional, isReadOnly, ref, startAdornment, testId, type, value]);
69
73
  return _jsx(Field, {
70
74
  errorMessage: errorMessage,
71
75
  fieldType: "single",
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.js","names":["forwardRef","memo","useCallback","Field","jsx","_jsx","textFieldTypeValues","TextField","_ref","ref","autoCompleteType","hasInitialFocus","endAdornment","errorMessage","hint","id","idOverride","isDisabled","isMultiline","isOptional","isReadOnly","label","onBlur","onChange","onFocus","placeholder","startAdornment","type","value","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","_InputAdornment","position","children","multiline","name","readOnly","fieldType","hasVisibleLabel","MemoizedTextField","displayName"],"sources":["../src/TextField.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 { InputAdornment, InputBase } from \"@mui/material\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n memo,\n ReactElement,\n useCallback,\n} from \"react\";\n\nimport { Field } from \"./Field\";\n\nexport const textFieldTypeValues = [\n \"email\",\n \"number\",\n \"tel\",\n \"text\",\n \"url\",\n] as const;\n\nexport type TextFieldProps = {\n /**\n * This prop helps users to fill forms faster, especially on mobile devices.\n * The name can be confusing, as it's more like an autofill.\n * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n */\n autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n /**\n * End `InputAdornment` for this component.\n */\n endAdornment?: string | ReactElement;\n /**\n * If `error` is not undefined, the `input` will indicate an error.\n */\n errorMessage?: string;\n /**\n * If `true`, the component will receive focus automatically.\n */\n hasInitialFocus?: 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`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.\n */\n isMultiline?: boolean;\n /**\n * If `true`, the `input` element is not required.\n */\n isOptional?: boolean;\n /**\n * It prevents the user from changing the value of the field\n */\n isReadOnly?: boolean;\n /**\n * The label for the `input` element.\n */\n label: string;\n /**\n * Callback fired when the `input` element loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n /**\n * Callback fired when the value is changed.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n /**\n * Callback fired when the `input` element get focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n /**\n * The short hint displayed in the `input` before the user enters a value.\n */\n placeholder?: string;\n /**\n * Start `InputAdornment` for this component.\n */\n startAdornment?: string | ReactElement;\n /**\n * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).\n */\n type?: (typeof textFieldTypeValues)[number];\n /**\n * The value of the `input` element, required for a controlled component.\n */\n value?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n autoCompleteType,\n hasInitialFocus,\n endAdornment,\n errorMessage,\n hint,\n id: idOverride,\n isDisabled = false,\n isMultiline = false,\n isOptional = false,\n isReadOnly,\n label,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n startAdornment,\n type = \"text\",\n value,\n },\n ref\n ) => {\n const renderFieldComponent = useCallback(\n ({ ariaDescribedBy, id }) => (\n <InputBase\n aria-describedby={ariaDescribedBy}\n autoComplete={autoCompleteType}\n /* eslint-disable-next-line jsx-a11y/no-autofocus */\n autoFocus={hasInitialFocus}\n endAdornment={\n endAdornment && (\n <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n )\n }\n id={id}\n multiline={isMultiline}\n name={id}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n placeholder={placeholder}\n readOnly={isReadOnly}\n ref={ref}\n startAdornment={\n startAdornment && (\n <InputAdornment position=\"start\">{startAdornment}</InputAdornment>\n )\n }\n type={type}\n value={value}\n />\n ),\n [\n autoCompleteType,\n hasInitialFocus,\n endAdornment,\n isMultiline,\n onChange,\n onFocus,\n onBlur,\n placeholder,\n isReadOnly,\n ref,\n startAdornment,\n type,\n value,\n ]\n );\n\n return (\n <Field\n errorMessage={errorMessage}\n fieldType=\"single\"\n hasVisibleLabel\n hint={hint}\n id={idOverride}\n isDisabled={isDisabled}\n isOptional={isOptional}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n }\n);\n\nconst MemoizedTextField = memo(TextField);\nMemoizedTextField.displayName = \"TextField\";\n\nexport { MemoizedTextField as TextField };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAGEA,UAAU,EAEVC,IAAI,EAEJC,WAAW,QACN,OAAO;AAAC,SAENC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAEd,OAAO,MAAMC,mBAAmB,GAAG,CACjC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,CACG;AA+EV,MAAMC,SAAS,GAAGP,UAAU,CAC1B,CAAAQ,IAAA,EAqBEC,GAAG,KACA;EAAA,IArBH;IACEC,gBAAgB;IAChBC,eAAe;IACfC,YAAY;IACZC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,WAAW,GAAG,KAAK;IACnBC,UAAU,GAAG,KAAK;IAClBC,UAAU;IACVC,KAAK;IACLC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,cAAc;IACdC,IAAI,GAAG,MAAM;IACbC;EACF,CAAC,GAAApB,IAAA;EAGD,MAAMqB,oBAAoB,GAAG3B,WAAW,CACtC4B,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEhB;IAAG,CAAC,GAAAe,KAAA;IAAA,OACtBzB,IAAA,CAAA2B,UAAA;MACE,oBAAkBD,eAAgB;MAClCE,YAAY,EAAEvB,gBAAiB;MAE/BwB,SAAS,EAAEvB,eAAgB;MAC3BC,YAAY,EACVA,YAAY,IACVP,IAAA,CAAA8B,eAAA;QAAgBC,QAAQ,EAAC,KAAK;QAAAC,QAAA,EAAEzB;MAAY,CAAiB,CAEhE;MACDG,EAAE,EAAEA,EAAG;MACPuB,SAAS,EAAEpB,WAAY;MACvBqB,IAAI,EAAExB,EAAG;MACTO,MAAM,EAAEA,MAAO;MACfC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBe,QAAQ,EAAEpB,UAAW;MACrBX,GAAG,EAAEA,GAAI;MACTiB,cAAc,EACZA,cAAc,IACZrB,IAAA,CAAA8B,eAAA;QAAgBC,QAAQ,EAAC,OAAO;QAAAC,QAAA,EAAEX;MAAc,CAAiB,CAEpE;MACDC,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACH,EACD,CACElB,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZM,WAAW,EACXK,QAAQ,EACRC,OAAO,EACPF,MAAM,EACNG,WAAW,EACXL,UAAU,EACVX,GAAG,EACHiB,cAAc,EACdC,IAAI,EACJC,KAAK,CAET,CAAC;EAED,OACEvB,IAAA,CAACF,KAAK;IACJU,YAAY,EAAEA,YAAa;IAC3B4B,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACf5B,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBE,UAAU,EAAEA,UAAW;IACvBE,KAAK,EAAEA,KAAM;IACbQ,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMc,iBAAiB,GAAG1C,IAAI,CAACM,SAAS,CAAC;AACzCoC,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIpC,SAAS"}
1
+ {"version":3,"file":"TextField.js","names":["forwardRef","memo","useCallback","Field","jsx","_jsx","textFieldTypeValues","TextField","_ref","ref","autoCompleteType","hasInitialFocus","endAdornment","errorMessage","hint","id","idOverride","isDisabled","isMultiline","isOptional","isReadOnly","label","name","nameOverride","onBlur","onChange","onFocus","placeholder","startAdornment","testId","type","value","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","_InputAdornment","position","children","multiline","readOnly","required","fieldType","hasVisibleLabel","MemoizedTextField","displayName"],"sources":["../src/TextField.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 { InputAdornment, InputBase } from \"@mui/material\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n InputHTMLAttributes,\n memo,\n ReactElement,\n useCallback,\n} from \"react\";\n\nimport { Field } from \"./Field\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport const textFieldTypeValues = [\n \"email\",\n \"number\",\n \"tel\",\n \"text\",\n \"url\",\n] as const;\n\nexport type TextFieldProps = {\n /**\n * This prop helps users to fill forms faster, especially on mobile devices.\n * The name can be confusing, as it's more like an autofill.\n * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n */\n autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n /**\n * End `InputAdornment` for this component.\n */\n endAdornment?: string | ReactElement;\n /**\n * If `error` is not undefined, the `input` will indicate an error.\n */\n errorMessage?: string;\n /**\n * If `true`, the component will receive focus automatically.\n */\n hasInitialFocus?: 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`, a [TextareaAutosize](/material-ui/react-textarea-autosize/) element is rendered.\n */\n isMultiline?: boolean;\n /**\n * If `true`, the `input` element is not required.\n */\n isOptional?: boolean;\n /**\n * It prevents the user from changing the value of the field\n */\n isReadOnly?: boolean;\n /**\n * The label for the `input` element.\n */\n label: string;\n /**\n * The name of the `input` element. Defaults to the `id` if not set.\n */\n name?: string;\n /**\n * Callback fired when the `input` element loses focus.\n */\n onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n /**\n * Callback fired when the value is changed.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n /**\n * Callback fired when the `input` element get focus.\n */\n onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n /**\n * The short hint displayed in the `input` before the user enters a value.\n */\n placeholder?: string;\n /**\n * Start `InputAdornment` for this component.\n */\n startAdornment?: string | ReactElement;\n /**\n * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types).\n */\n type?: (typeof textFieldTypeValues)[number];\n /**\n * The value of the `input` element, required for a controlled component.\n */\n value?: string;\n} & SeleniumProps;\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n autoCompleteType,\n hasInitialFocus,\n endAdornment,\n errorMessage,\n hint,\n id: idOverride,\n isDisabled = false,\n isMultiline = false,\n isOptional = false,\n isReadOnly,\n label,\n name: nameOverride,\n onBlur,\n onChange,\n onFocus,\n placeholder,\n startAdornment,\n testId,\n type = \"text\",\n value,\n },\n ref\n ) => {\n const renderFieldComponent = useCallback(\n ({ ariaDescribedBy, id }) => (\n <InputBase\n aria-describedby={ariaDescribedBy}\n autoComplete={autoCompleteType}\n /* eslint-disable-next-line jsx-a11y/no-autofocus */\n autoFocus={hasInitialFocus}\n data-se={testId}\n endAdornment={\n endAdornment && (\n <InputAdornment position=\"end\">{endAdornment}</InputAdornment>\n )\n }\n id={id}\n multiline={isMultiline}\n name={nameOverride ?? id}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n placeholder={placeholder}\n readOnly={isReadOnly}\n ref={ref}\n required={!isOptional}\n startAdornment={\n startAdornment && (\n <InputAdornment position=\"start\">{startAdornment}</InputAdornment>\n )\n }\n type={type}\n value={value}\n />\n ),\n [\n autoCompleteType,\n hasInitialFocus,\n endAdornment,\n isMultiline,\n nameOverride,\n onChange,\n onFocus,\n onBlur,\n placeholder,\n isOptional,\n isReadOnly,\n ref,\n startAdornment,\n testId,\n type,\n value,\n ]\n );\n\n return (\n <Field\n errorMessage={errorMessage}\n fieldType=\"single\"\n hasVisibleLabel\n hint={hint}\n id={idOverride}\n isDisabled={isDisabled}\n isOptional={isOptional}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n }\n);\n\nconst MemoizedTextField = memo(TextField);\nMemoizedTextField.displayName = \"TextField\";\n\nexport { MemoizedTextField as TextField };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAGEA,UAAU,EAEVC,IAAI,EAEJC,WAAW,QACN,OAAO;AAAC,SAENC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGd,OAAO,MAAMC,mBAAmB,GAAG,CACjC,OAAO,EACP,QAAQ,EACR,KAAK,EACL,MAAM,EACN,KAAK,CACG;AAmFV,MAAMC,SAAS,GAAGP,UAAU,CAC1B,CAAAQ,IAAA,EAuBEC,GAAG,KACA;EAAA,IAvBH;IACEC,gBAAgB;IAChBC,eAAe;IACfC,YAAY;IACZC,YAAY;IACZC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,WAAW,GAAG,KAAK;IACnBC,UAAU,GAAG,KAAK;IAClBC,UAAU;IACVC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,WAAW;IACXC,cAAc;IACdC,MAAM;IACNC,IAAI,GAAG,MAAM;IACbC;EACF,CAAC,GAAAvB,IAAA;EAGD,MAAMwB,oBAAoB,GAAG9B,WAAW,CACtC+B,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEnB;IAAG,CAAC,GAAAkB,KAAA;IAAA,OACtB5B,IAAA,CAAA8B,UAAA;MACE,oBAAkBD,eAAgB;MAClCE,YAAY,EAAE1B,gBAAiB;MAE/B2B,SAAS,EAAE1B,eAAgB;MAC3B,WAASkB,MAAO;MAChBjB,YAAY,EACVA,YAAY,IACVP,IAAA,CAAAiC,eAAA;QAAgBC,QAAQ,EAAC,KAAK;QAAAC,QAAA,EAAE5B;MAAY,CAAiB,CAEhE;MACDG,EAAE,EAAEA,EAAG;MACP0B,SAAS,EAAEvB,WAAY;MACvBI,IAAI,EAAEC,YAAY,IAAIR,EAAG;MACzBS,MAAM,EAAEA,MAAO;MACfC,QAAQ,EAAEA,QAAS;MACnBC,OAAO,EAAEA,OAAQ;MACjBC,WAAW,EAAEA,WAAY;MACzBe,QAAQ,EAAEtB,UAAW;MACrBX,GAAG,EAAEA,GAAI;MACTkC,QAAQ,EAAE,CAACxB,UAAW;MACtBS,cAAc,EACZA,cAAc,IACZvB,IAAA,CAAAiC,eAAA;QAAgBC,QAAQ,EAAC,OAAO;QAAAC,QAAA,EAAEZ;MAAc,CAAiB,CAEpE;MACDE,IAAI,EAAEA,IAAK;MACXC,KAAK,EAAEA;IAAM,CACd,CAAC;EAAA,CACH,EACD,CACErB,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZM,WAAW,EACXK,YAAY,EACZE,QAAQ,EACRC,OAAO,EACPF,MAAM,EACNG,WAAW,EACXR,UAAU,EACVC,UAAU,EACVX,GAAG,EACHmB,cAAc,EACdC,MAAM,EACNC,IAAI,EACJC,KAAK,CAET,CAAC;EAED,OACE1B,IAAA,CAACF,KAAK;IACJU,YAAY,EAAEA,YAAa;IAC3B+B,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACf/B,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBE,UAAU,EAAEA,UAAW;IACvBE,KAAK,EAAEA,KAAM;IACbW,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMc,iBAAiB,GAAG7C,IAAI,CAACM,SAAS,CAAC;AACzCuC,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIvC,SAAS"}
package/dist/Toast.js CHANGED
@@ -36,6 +36,7 @@ const Toast = _ref => {
36
36
  onHide: onHideProp,
37
37
  role,
38
38
  severity,
39
+ testId,
39
40
  text
40
41
  } = _ref;
41
42
  const {
@@ -63,6 +64,7 @@ const Toast = _ref => {
63
64
  startIcon: _jsx(CloseIcon, {}),
64
65
  variant: "floating"
65
66
  }),
67
+ "data-se": testId,
66
68
  role: role,
67
69
  severity: severity,
68
70
  variant: "toast",
package/dist/Toast.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Toast.js","names":["useEffect","memo","useState","useCallback","visuallyHidden","Link","CloseIcon","Button","useTranslation","jsx","_jsx","jsxs","_jsxs","toastRoleValues","toastSeverityValues","ClickAwayListenerProps","onClickAway","Toast","_ref","autoHideDuration","isDismissable","linkText","linkUrl","isVisible","isVisibleProp","onHide","onHideProp","role","severity","text","t","setIsVisible","_Snackbar","open","undefined","onClose","className","children","_Alert","action","ariaLabel","onClick","size","startIcon","variant","_AlertTitle","style","href","MemoizedToast","displayName"],"sources":["../src/Toast.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 { useEffect, memo, useState, useCallback } from \"react\";\nimport { Alert, AlertTitle, Snackbar } from \"@mui/material\";\nimport { visuallyHidden } from \"@mui/utils\";\nimport { Link } from \"./Link\";\nimport { CloseIcon } from \"./icons.generated\";\nimport { Button } from \"./Button\";\nimport { useTranslation } from \"react-i18next\";\n\nexport const toastRoleValues = [\"status\", \"alert\"] as const;\nexport const toastSeverityValues = [\n \"success\",\n \"info\",\n \"warning\",\n \"error\",\n] as const;\n\nexport type ToastProps = {\n /**\n * If set, this determines how long the Toast should appear before automatically disappearing in milliseconds.\n * It will only take effect if the Toast is not dismissible.\n * If left blank, it defaults to 6000.\n */\n autoHideDuration?: number;\n /**\n * If `true`, the Toast will include a close button.\n */\n isDismissable?: boolean;\n /**\n * If true, the Toast is visible\n */\n isVisible?: boolean;\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 Toast will include a link to the URL\n */\n linkUrl?: string;\n /**\n * An optional function to run when the Toast is closed.\n */\n onHide?: () => void;\n /**\n * Sets the ARIA role of the Toast\n * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n * unchanging)\n */\n role?: (typeof toastRoleValues)[number];\n /**\n * Determine the color and icon of the Toast\n */\n severity: (typeof toastSeverityValues)[number];\n /**\n * The text content of the Toast\n */\n text: string;\n};\n\nconst ClickAwayListenerProps = { onClickAway: () => false };\n\nconst Toast = ({\n autoHideDuration = 6000,\n isDismissable,\n linkText,\n linkUrl,\n isVisible: isVisibleProp,\n onHide: onHideProp,\n role,\n severity,\n text,\n}: ToastProps) => {\n const { t } = useTranslation();\n\n const [isVisible, setIsVisible] = useState(isVisibleProp);\n\n useEffect(() => {\n setIsVisible(isVisibleProp);\n }, [isVisibleProp]);\n\n const onHide = useCallback(() => {\n setIsVisible(false);\n onHideProp?.();\n }, [onHideProp]);\n\n return (\n <Snackbar\n open={isVisible}\n autoHideDuration={\n isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration\n }\n onClose={onHide}\n className=\"Toast\"\n ClickAwayListenerProps={ClickAwayListenerProps}\n >\n <Alert\n action={\n isDismissable === true && (\n <Button\n ariaLabel={t(\"toast.close.text\")}\n onClick={onHide}\n size=\"small\"\n startIcon={<CloseIcon />}\n variant=\"floating\"\n />\n )\n }\n role={role}\n severity={severity}\n variant=\"toast\"\n >\n <AlertTitle>\n <span style={visuallyHidden}>{severity}:</span>\n {text}\n </AlertTitle>\n {linkUrl && (\n <Link href={linkUrl} variant=\"monochrome\">\n {linkText}\n </Link>\n )}\n </Alert>\n </Snackbar>\n );\n};\n\nconst MemoizedToast = memo(Toast);\nMemoizedToast.displayName = \"Toast\";\n\nexport { MemoizedToast as Toast };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AAE9D,SAASC,cAAc,QAAQ,YAAY;AAAC,SACnCC,IAAI;AAAA,SACJC,SAAS;AAAA,SACTC,MAAM;AACf,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAE/C,OAAO,MAAMC,eAAe,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC3D,OAAO,MAAMC,mBAAmB,GAAG,CACjC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AA+CV,MAAMC,sBAAsB,GAAG;EAAEC,WAAW,EAAEA,CAAA,KAAM;AAAM,CAAC;AAE3D,MAAMC,KAAK,GAAGC,IAAA,IAUI;EAAA,IAVH;IACbC,gBAAgB,GAAG,IAAI;IACvBC,aAAa;IACbC,QAAQ;IACRC,OAAO;IACPC,SAAS,EAAEC,aAAa;IACxBC,MAAM,EAAEC,UAAU;IAClBC,IAAI;IACJC,QAAQ;IACRC;EACU,CAAC,GAAAX,IAAA;EACX,MAAM;IAAEY;EAAE,CAAC,GAAGtB,cAAc,CAAC,CAAC;EAE9B,MAAM,CAACe,SAAS,EAAEQ,YAAY,CAAC,GAAG7B,QAAQ,CAACsB,aAAa,CAAC;EAEzDxB,SAAS,CAAC,MAAM;IACd+B,YAAY,CAACP,aAAa,CAAC;EAC7B,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,MAAMC,MAAM,GAAGtB,WAAW,CAAC,MAAM;IAC/B4B,YAAY,CAAC,KAAK,CAAC;IACnBL,UAAU,GAAG,CAAC;EAChB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,OACEhB,IAAA,CAAAsB,SAAA;IACEC,IAAI,EAAEV,SAAU;IAChBJ,gBAAgB,EACdC,aAAa,IAAID,gBAAgB,IAAI,CAAC,GAAGe,SAAS,GAAGf,gBACtD;IACDgB,OAAO,EAAEV,MAAO;IAChBW,SAAS,EAAC,OAAO;IACjBrB,sBAAsB,EAAEA,sBAAuB;IAAAsB,QAAA,EAE/CzB,KAAA,CAAA0B,MAAA;MACEC,MAAM,EACJnB,aAAa,KAAK,IAAI,IACpBV,IAAA,CAACH,MAAM;QACLiC,SAAS,EAAEV,CAAC,CAAC,kBAAkB,CAAE;QACjCW,OAAO,EAAEhB,MAAO;QAChBiB,IAAI,EAAC,OAAO;QACZC,SAAS,EAAEjC,IAAA,CAACJ,SAAS,IAAE,CAAE;QACzBsC,OAAO,EAAC;MAAU,CACnB,CAEJ;MACDjB,IAAI,EAAEA,IAAK;MACXC,QAAQ,EAAEA,QAAS;MACnBgB,OAAO,EAAC,OAAO;MAAAP,QAAA,GAEfzB,KAAA,CAAAiC,WAAA;QAAAR,QAAA,GACEzB,KAAA;UAAMkC,KAAK,EAAE1C,cAAe;UAAAiC,QAAA,GAAET,QAAQ,EAAC,GAAC;QAAA,CAAM,CAAC,EAC9CC,IAAI;MAAA,CACK,CAAC,EACZP,OAAO,IACNZ,IAAA,CAACL,IAAI;QAAC0C,IAAI,EAAEzB,OAAQ;QAACsB,OAAO,EAAC,YAAY;QAAAP,QAAA,EACtChB;MAAQ,CACL,CACP;IAAA,CACI;EAAC,CACA,CAAC;AAEf,CAAC;AAED,MAAM2B,aAAa,GAAG/C,IAAI,CAACgB,KAAK,CAAC;AACjC+B,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAI/B,KAAK"}
1
+ {"version":3,"file":"Toast.js","names":["useEffect","memo","useState","useCallback","visuallyHidden","Link","CloseIcon","Button","useTranslation","jsx","_jsx","jsxs","_jsxs","toastRoleValues","toastSeverityValues","ClickAwayListenerProps","onClickAway","Toast","_ref","autoHideDuration","isDismissable","linkText","linkUrl","isVisible","isVisibleProp","onHide","onHideProp","role","severity","testId","text","t","setIsVisible","_Snackbar","open","undefined","onClose","className","children","_Alert","action","ariaLabel","onClick","size","startIcon","variant","_AlertTitle","style","href","MemoizedToast","displayName"],"sources":["../src/Toast.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 { useEffect, memo, useState, useCallback } from \"react\";\nimport { Alert, AlertTitle, Snackbar } from \"@mui/material\";\nimport { visuallyHidden } from \"@mui/utils\";\nimport { Link } from \"./Link\";\nimport { CloseIcon } from \"./icons.generated\";\nimport { Button } from \"./Button\";\nimport { useTranslation } from \"react-i18next\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport const toastRoleValues = [\"status\", \"alert\"] as const;\nexport const toastSeverityValues = [\n \"success\",\n \"info\",\n \"warning\",\n \"error\",\n] as const;\n\nexport type ToastProps = {\n /**\n * If set, this determines how long the Toast should appear before automatically disappearing in milliseconds.\n * It will only take effect if the Toast is not dismissible.\n * If left blank, it defaults to 6000.\n */\n autoHideDuration?: number;\n /**\n * If `true`, the Toast will include a close button.\n */\n isDismissable?: boolean;\n /**\n * If true, the Toast is visible\n */\n isVisible?: boolean;\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 Toast will include a link to the URL\n */\n linkUrl?: string;\n /**\n * An optional function to run when the Toast is closed.\n */\n onHide?: () => void;\n /**\n * Sets the ARIA role of the Toast\n * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n * unchanging)\n */\n role?: (typeof toastRoleValues)[number];\n /**\n * Determine the color and icon of the Toast\n */\n severity: (typeof toastSeverityValues)[number];\n /**\n * The text content of the Toast\n */\n text: string;\n} & SeleniumProps;\n\nconst ClickAwayListenerProps = { onClickAway: () => false };\n\nconst Toast = ({\n autoHideDuration = 6000,\n isDismissable,\n linkText,\n linkUrl,\n isVisible: isVisibleProp,\n onHide: onHideProp,\n role,\n severity,\n testId,\n text,\n}: ToastProps) => {\n const { t } = useTranslation();\n\n const [isVisible, setIsVisible] = useState(isVisibleProp);\n\n useEffect(() => {\n setIsVisible(isVisibleProp);\n }, [isVisibleProp]);\n\n const onHide = useCallback(() => {\n setIsVisible(false);\n onHideProp?.();\n }, [onHideProp]);\n\n return (\n <Snackbar\n open={isVisible}\n autoHideDuration={\n isDismissable || autoHideDuration <= 0 ? undefined : autoHideDuration\n }\n onClose={onHide}\n className=\"Toast\"\n ClickAwayListenerProps={ClickAwayListenerProps}\n >\n <Alert\n action={\n isDismissable === true && (\n <Button\n ariaLabel={t(\"toast.close.text\")}\n onClick={onHide}\n size=\"small\"\n startIcon={<CloseIcon />}\n variant=\"floating\"\n />\n )\n }\n data-se={testId}\n role={role}\n severity={severity}\n variant=\"toast\"\n >\n <AlertTitle>\n <span style={visuallyHidden}>{severity}:</span>\n {text}\n </AlertTitle>\n {linkUrl && (\n <Link href={linkUrl} variant=\"monochrome\">\n {linkText}\n </Link>\n )}\n </Alert>\n </Snackbar>\n );\n};\n\nconst MemoizedToast = memo(Toast);\nMemoizedToast.displayName = \"Toast\";\n\nexport { MemoizedToast as Toast };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,WAAW,QAAQ,OAAO;AAE9D,SAASC,cAAc,QAAQ,YAAY;AAAC,SACnCC,IAAI;AAAA,SACJC,SAAS;AAAA,SACTC,MAAM;AACf,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAG/C,OAAO,MAAMC,eAAe,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC3D,OAAO,MAAMC,mBAAmB,GAAG,CACjC,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACC;AA+CV,MAAMC,sBAAsB,GAAG;EAAEC,WAAW,EAAEA,CAAA,KAAM;AAAM,CAAC;AAE3D,MAAMC,KAAK,GAAGC,IAAA,IAWI;EAAA,IAXH;IACbC,gBAAgB,GAAG,IAAI;IACvBC,aAAa;IACbC,QAAQ;IACRC,OAAO;IACPC,SAAS,EAAEC,aAAa;IACxBC,MAAM,EAAEC,UAAU;IAClBC,IAAI;IACJC,QAAQ;IACRC,MAAM;IACNC;EACU,CAAC,GAAAZ,IAAA;EACX,MAAM;IAAEa;EAAE,CAAC,GAAGvB,cAAc,CAAC,CAAC;EAE9B,MAAM,CAACe,SAAS,EAAES,YAAY,CAAC,GAAG9B,QAAQ,CAACsB,aAAa,CAAC;EAEzDxB,SAAS,CAAC,MAAM;IACdgC,YAAY,CAACR,aAAa,CAAC;EAC7B,CAAC,EAAE,CAACA,aAAa,CAAC,CAAC;EAEnB,MAAMC,MAAM,GAAGtB,WAAW,CAAC,MAAM;IAC/B6B,YAAY,CAAC,KAAK,CAAC;IACnBN,UAAU,GAAG,CAAC;EAChB,CAAC,EAAE,CAACA,UAAU,CAAC,CAAC;EAEhB,OACEhB,IAAA,CAAAuB,SAAA;IACEC,IAAI,EAAEX,SAAU;IAChBJ,gBAAgB,EACdC,aAAa,IAAID,gBAAgB,IAAI,CAAC,GAAGgB,SAAS,GAAGhB,gBACtD;IACDiB,OAAO,EAAEX,MAAO;IAChBY,SAAS,EAAC,OAAO;IACjBtB,sBAAsB,EAAEA,sBAAuB;IAAAuB,QAAA,EAE/C1B,KAAA,CAAA2B,MAAA;MACEC,MAAM,EACJpB,aAAa,KAAK,IAAI,IACpBV,IAAA,CAACH,MAAM;QACLkC,SAAS,EAAEV,CAAC,CAAC,kBAAkB,CAAE;QACjCW,OAAO,EAAEjB,MAAO;QAChBkB,IAAI,EAAC,OAAO;QACZC,SAAS,EAAElC,IAAA,CAACJ,SAAS,IAAE,CAAE;QACzBuC,OAAO,EAAC;MAAU,CACnB,CAEJ;MACD,WAAShB,MAAO;MAChBF,IAAI,EAAEA,IAAK;MACXC,QAAQ,EAAEA,QAAS;MACnBiB,OAAO,EAAC,OAAO;MAAAP,QAAA,GAEf1B,KAAA,CAAAkC,WAAA;QAAAR,QAAA,GACE1B,KAAA;UAAMmC,KAAK,EAAE3C,cAAe;UAAAkC,QAAA,GAAEV,QAAQ,EAAC,GAAC;QAAA,CAAM,CAAC,EAC9CE,IAAI;MAAA,CACK,CAAC,EACZR,OAAO,IACNZ,IAAA,CAACL,IAAI;QAAC2C,IAAI,EAAE1B,OAAQ;QAACuB,OAAO,EAAC,YAAY;QAAAP,QAAA,EACtCjB;MAAQ,CACL,CACP;IAAA,CACI;EAAC,CACA,CAAC;AAEf,CAAC;AAED,MAAM4B,aAAa,GAAGhD,IAAI,CAACgB,KAAK,CAAC;AACjCgC,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIhC,KAAK"}
package/dist/Tooltip.js CHANGED
@@ -17,9 +17,11 @@ export const Tooltip = _ref => {
17
17
  ariaType,
18
18
  children,
19
19
  placement = "top",
20
+ testId,
20
21
  text
21
22
  } = _ref;
22
23
  return _jsx(_Tooltip, {
24
+ "data-se": testId,
23
25
  describeChild: ariaType === "description",
24
26
  placement: placement,
25
27
  title: text,
@@ -1 +1 @@
1
- {"version":3,"file":"Tooltip.js","names":["MuiPropsChild","jsx","_jsx","Tooltip","_ref","ariaType","children","placement","text","_Tooltip","describeChild","title"],"sources":["../src/Tooltip.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 { Tooltip as MuiTooltip } from \"@mui/material\";\nimport type { TooltipProps as MuiTooltipProps } from \"@mui/material\";\n\nimport { MuiPropsChild } from \"./MuiPropsChild\";\nimport { ReactElement } from \"react\";\n\nexport type TooltipProps = {\n /**\n * The type of ARIA attribute to use\n */\n ariaType: \"description\" | \"label\";\n /**\n * The content that triggers the Tooltip when hovered\n */\n children: ReactElement;\n /**\n * The placement of the Tooltip\n */\n placement?: MuiTooltipProps[\"placement\"];\n /**\n * The text to display in the Tooltip\n */\n text: string;\n};\n\nexport const Tooltip = ({\n ariaType,\n children,\n placement = \"top\",\n text,\n}: TooltipProps) => (\n <MuiTooltip\n describeChild={ariaType === \"description\"}\n placement={placement}\n title={text}\n >\n <MuiPropsChild>{children}</MuiPropsChild>\n </MuiTooltip>\n);\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAeSA,aAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAsBtB,OAAO,MAAMC,OAAO,GAAGC,IAAA;EAAA,IAAC;IACtBC,QAAQ;IACRC,QAAQ;IACRC,SAAS,GAAG,KAAK;IACjBC;EACY,CAAC,GAAAJ,IAAA;EAAA,OACbF,IAAA,CAAAO,QAAA;IACEC,aAAa,EAAEL,QAAQ,KAAK,aAAc;IAC1CE,SAAS,EAAEA,SAAU;IACrBI,KAAK,EAAEH,IAAK;IAAAF,QAAA,EAEZJ,IAAA,CAACF,aAAa;MAAAM,QAAA,EAAEA;IAAQ,CAAgB;EAAC,CAC/B,CAAC;AAAA,CACd"}
1
+ {"version":3,"file":"Tooltip.js","names":["MuiPropsChild","jsx","_jsx","Tooltip","_ref","ariaType","children","placement","testId","text","_Tooltip","describeChild","title"],"sources":["../src/Tooltip.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 { Tooltip as MuiTooltip } from \"@mui/material\";\nimport type { TooltipProps as MuiTooltipProps } from \"@mui/material\";\n\nimport { MuiPropsChild } from \"./MuiPropsChild\";\nimport { ReactElement } from \"react\";\nimport { SeleniumProps } from \"./SeleniumProps\";\n\nexport type TooltipProps = {\n /**\n * The type of ARIA attribute to use\n */\n ariaType: \"description\" | \"label\";\n /**\n * The content that triggers the Tooltip when hovered\n */\n children: ReactElement;\n /**\n * The placement of the Tooltip\n */\n placement?: MuiTooltipProps[\"placement\"];\n /**\n * The text to display in the Tooltip\n */\n text: string;\n} & SeleniumProps;\n\nexport const Tooltip = ({\n ariaType,\n children,\n placement = \"top\",\n testId,\n text,\n}: TooltipProps) => (\n <MuiTooltip\n data-se={testId}\n describeChild={ariaType === \"description\"}\n placement={placement}\n title={text}\n >\n <MuiPropsChild>{children}</MuiPropsChild>\n </MuiTooltip>\n);\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAeSA,aAAa;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAuBtB,OAAO,MAAMC,OAAO,GAAGC,IAAA;EAAA,IAAC;IACtBC,QAAQ;IACRC,QAAQ;IACRC,SAAS,GAAG,KAAK;IACjBC,MAAM;IACNC;EACY,CAAC,GAAAL,IAAA;EAAA,OACbF,IAAA,CAAAQ,QAAA;IACE,WAASF,MAAO;IAChBG,aAAa,EAAEN,QAAQ,KAAK,aAAc;IAC1CE,SAAS,EAAEA,SAAU;IACrBK,KAAK,EAAEH,IAAK;IAAAH,QAAA,EAEZJ,IAAA,CAACF,aAAa;MAAAM,QAAA,EAAEA;IAAQ,CAAgB;EAAC,CAC/B,CAAC;AAAA,CACd"}