@okta/odyssey-react-mui 1.13.4 → 1.13.6

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 (133) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/Accordion.js +11 -12
  3. package/dist/Accordion.js.map +1 -1
  4. package/dist/Autocomplete.js +63 -70
  5. package/dist/Autocomplete.js.map +1 -1
  6. package/dist/Badge.js +7 -8
  7. package/dist/Badge.js.map +1 -1
  8. package/dist/Banner.js +10 -11
  9. package/dist/Banner.js.map +1 -1
  10. package/dist/Box.js +16 -19
  11. package/dist/Box.js.map +1 -1
  12. package/dist/Breadcrumbs.js +12 -14
  13. package/dist/Breadcrumbs.js.map +1 -1
  14. package/dist/Button.js +20 -21
  15. package/dist/Button.js.map +1 -1
  16. package/dist/Callout.js +11 -12
  17. package/dist/Callout.js.map +1 -1
  18. package/dist/Checkbox.js +20 -21
  19. package/dist/Checkbox.js.map +1 -1
  20. package/dist/CheckboxGroup.js +27 -31
  21. package/dist/CheckboxGroup.js.map +1 -1
  22. package/dist/CircularProgress.js +10 -13
  23. package/dist/CircularProgress.js.map +1 -1
  24. package/dist/Dialog.js +11 -12
  25. package/dist/Dialog.js.map +1 -1
  26. package/dist/ErrorMessageList.js +3 -4
  27. package/dist/ErrorMessageList.js.map +1 -1
  28. package/dist/Field.js +16 -17
  29. package/dist/Field.js.map +1 -1
  30. package/dist/FieldError.js +7 -8
  31. package/dist/FieldError.js.map +1 -1
  32. package/dist/FieldHint.js +7 -8
  33. package/dist/FieldHint.js.map +1 -1
  34. package/dist/FieldLabel.js +9 -10
  35. package/dist/FieldLabel.js.map +1 -1
  36. package/dist/Fieldset.js +11 -12
  37. package/dist/Fieldset.js.map +1 -1
  38. package/dist/Form.js +16 -17
  39. package/dist/Form.js.map +1 -1
  40. package/dist/Link.js +13 -14
  41. package/dist/Link.js.map +1 -1
  42. package/dist/MenuButton.js +21 -22
  43. package/dist/MenuButton.js.map +1 -1
  44. package/dist/MenuItem.js +10 -11
  45. package/dist/MenuItem.js.map +1 -1
  46. package/dist/MuiPropsChild.js +4 -5
  47. package/dist/MuiPropsChild.js.map +1 -1
  48. package/dist/NativeSelect.js +49 -53
  49. package/dist/NativeSelect.js.map +1 -1
  50. package/dist/OdysseyCacheProvider.js +6 -7
  51. package/dist/OdysseyCacheProvider.js.map +1 -1
  52. package/dist/OdysseyProvider.js +26 -29
  53. package/dist/OdysseyProvider.js.map +1 -1
  54. package/dist/OdysseyThemeProvider.js +8 -9
  55. package/dist/OdysseyThemeProvider.js.map +1 -1
  56. package/dist/OdysseyTranslationProvider.js +5 -6
  57. package/dist/OdysseyTranslationProvider.js.map +1 -1
  58. package/dist/PasswordField.js +64 -68
  59. package/dist/PasswordField.js.map +1 -1
  60. package/dist/Radio.js +13 -14
  61. package/dist/Radio.js.map +1 -1
  62. package/dist/RadioGroup.js +34 -38
  63. package/dist/RadioGroup.js.map +1 -1
  64. package/dist/ScreenReaderText.js +9 -12
  65. package/dist/ScreenReaderText.js.map +1 -1
  66. package/dist/SearchField.js +56 -60
  67. package/dist/SearchField.js.map +1 -1
  68. package/dist/Select.js +50 -54
  69. package/dist/Select.js.map +1 -1
  70. package/dist/Status.js +6 -7
  71. package/dist/Status.js.map +1 -1
  72. package/dist/Tabs.js +14 -16
  73. package/dist/Tabs.js.map +1 -1
  74. package/dist/Tag.js +9 -10
  75. package/dist/Tag.js.map +1 -1
  76. package/dist/TagList.js +4 -5
  77. package/dist/TagList.js.map +1 -1
  78. package/dist/TextField.js +70 -74
  79. package/dist/TextField.js.map +1 -1
  80. package/dist/Toast.js +13 -14
  81. package/dist/Toast.js.map +1 -1
  82. package/dist/ToastStack.js +3 -4
  83. package/dist/ToastStack.js.map +1 -1
  84. package/dist/Tooltip.js +17 -20
  85. package/dist/Tooltip.js.map +1 -1
  86. package/dist/Typography.js +212 -243
  87. package/dist/Typography.js.map +1 -1
  88. package/dist/i18n.js +1 -2
  89. package/dist/i18n.js.map +1 -1
  90. package/dist/inputUtils.js +9 -11
  91. package/dist/inputUtils.js.map +1 -1
  92. package/dist/labs/DataFilters.js +18 -22
  93. package/dist/labs/DataFilters.js.map +1 -1
  94. package/dist/labs/DataTable.js +78 -92
  95. package/dist/labs/DataTable.js.map +1 -1
  96. package/dist/labs/DataTablePagination.js +9 -10
  97. package/dist/labs/DataTablePagination.js.map +1 -1
  98. package/dist/labs/DatePicker.js +10 -12
  99. package/dist/labs/DatePicker.js.map +1 -1
  100. package/dist/labs/GroupPicker.js +37 -44
  101. package/dist/labs/GroupPicker.js.map +1 -1
  102. package/dist/labs/PaginatedTable.js +23 -27
  103. package/dist/labs/PaginatedTable.js.map +1 -1
  104. package/dist/labs/StaticTable.js +17 -21
  105. package/dist/labs/StaticTable.js.map +1 -1
  106. package/dist/labs/Switch.js +20 -22
  107. package/dist/labs/Switch.js.map +1 -1
  108. package/dist/labs/VirtualizedAutocomplete.js +61 -68
  109. package/dist/labs/VirtualizedAutocomplete.js.map +1 -1
  110. package/dist/labs/datePickerTheme.js +266 -350
  111. package/dist/labs/datePickerTheme.js.map +1 -1
  112. package/dist/src/Button.d.ts +15 -1
  113. package/dist/src/Button.d.ts.map +1 -1
  114. package/dist/theme/components.js +1104 -1198
  115. package/dist/theme/components.js.map +1 -1
  116. package/dist/theme/createOdysseyMuiTheme.js +22 -25
  117. package/dist/theme/createOdysseyMuiTheme.js.map +1 -1
  118. package/dist/theme/mixins.js +3 -4
  119. package/dist/theme/mixins.js.map +1 -1
  120. package/dist/theme/palette.js +3 -4
  121. package/dist/theme/palette.js.map +1 -1
  122. package/dist/theme/shape.js +3 -4
  123. package/dist/theme/shape.js.map +1 -1
  124. package/dist/theme/spacing.js +3 -4
  125. package/dist/theme/spacing.js.map +1 -1
  126. package/dist/theme/typography.js +3 -4
  127. package/dist/theme/typography.js.map +1 -1
  128. package/dist/tsconfig.production.tsbuildinfo +1 -1
  129. package/dist/useNormalizedKey.js +1 -4
  130. package/dist/useNormalizedKey.js.map +1 -1
  131. package/package.json +3 -3
  132. package/src/Button.tsx +15 -0
  133. package/src/MenuButton.tsx +3 -3
@@ -14,24 +14,23 @@ import { memo, useCallback, useRef } from "react";
14
14
  import { Field } from "./Field.js";
15
15
  import { getControlState, useInputValues } from "./inputUtils.js";
16
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
- const RadioGroup = _ref => {
18
- let {
19
- ariaDescribedBy,
20
- children,
21
- defaultValue,
22
- errorMessage,
23
- errorMessageList,
24
- hint,
25
- HintLinkComponent,
26
- id: idOverride,
27
- isDisabled,
28
- label,
29
- name: nameOverride,
30
- onChange: onChangeProp,
31
- testId,
32
- translate,
33
- value
34
- } = _ref;
17
+ const RadioGroup = ({
18
+ ariaDescribedBy,
19
+ children,
20
+ defaultValue,
21
+ errorMessage,
22
+ errorMessageList,
23
+ hint,
24
+ HintLinkComponent,
25
+ id: idOverride,
26
+ isDisabled,
27
+ label,
28
+ name: nameOverride,
29
+ onChange: onChangeProp,
30
+ testId,
31
+ translate,
32
+ value
33
+ }) => {
35
34
  const controlledStateRef = useRef(getControlState({
36
35
  controlledValue: value,
37
36
  uncontrolledValue: defaultValue
@@ -44,26 +43,23 @@ const RadioGroup = _ref => {
44
43
  const onChange = useCallback((event, value) => {
45
44
  onChangeProp?.(event, value);
46
45
  }, [onChangeProp]);
47
- const renderFieldComponent = useCallback(_ref2 => {
48
- let {
49
- ariaDescribedBy,
50
- errorMessageElementId,
51
- id,
52
- labelElementId
53
- } = _ref2;
54
- return _jsx(_RadioGroup, {
55
- ...inputValues,
56
- "aria-describedby": ariaDescribedBy,
57
- "aria-errormessage": errorMessageElementId,
58
- "aria-labelledby": labelElementId,
59
- "data-se": testId,
60
- id: id,
61
- name: nameOverride ?? id,
62
- onChange: onChange,
63
- translate: translate,
64
- children: children
65
- });
66
- }, [children, inputValues, nameOverride, onChange, testId, translate]);
46
+ const renderFieldComponent = useCallback(({
47
+ ariaDescribedBy,
48
+ errorMessageElementId,
49
+ id,
50
+ labelElementId
51
+ }) => _jsx(_RadioGroup, {
52
+ ...inputValues,
53
+ "aria-describedby": ariaDescribedBy,
54
+ "aria-errormessage": errorMessageElementId,
55
+ "aria-labelledby": labelElementId,
56
+ "data-se": testId,
57
+ id: id,
58
+ name: nameOverride ?? id,
59
+ onChange: onChange,
60
+ translate: translate,
61
+ children: children
62
+ }), [children, inputValues, nameOverride, onChange, testId, translate]);
67
63
  return _jsx(Field, {
68
64
  ariaDescribedBy: ariaDescribedBy,
69
65
  errorMessage: errorMessage,
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","_ref","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","_ref2","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../src/RadioGroup.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 {\n RadioGroup as MuiRadioGroup,\n type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useRef } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type RadioGroupProps = {\n /**\n * The Radio components within the group. Must include two or more.\n */\n children: Array<ReactElement<typeof Radio>>;\n /**\n * The text value of the Radio that should be selected by default\n */\n defaultValue?: string;\n /**\n * The text label for the RadioGroup\n */\n label: string;\n /**\n * Listen for changes in the browser that change `value`\n */\n onChange?: MuiRadioGroupProps[\"onChange\"];\n /**\n * The `value` on the selected Radio\n */\n value?: RadioProps[\"value\"];\n} & Pick<\n FieldComponentProps,\n | \"ariaDescribedBy\"\n | \"errorMessage\"\n | \"errorMessageList\"\n | \"hint\"\n | \"HintLinkComponent\"\n | \"id\"\n | \"isDisabled\"\n | \"name\"\n> &\n HtmlProps;\n\nconst RadioGroup = ({\n ariaDescribedBy,\n children,\n defaultValue,\n errorMessage,\n errorMessageList,\n hint,\n HintLinkComponent,\n id: idOverride,\n isDisabled,\n label,\n name: nameOverride,\n onChange: onChangeProp,\n testId,\n translate,\n value,\n}: RadioGroupProps) => {\n const controlledStateRef = useRef(\n getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n );\n const inputValues = useInputValues({\n defaultValue,\n value,\n controlState: controlledStateRef.current,\n });\n\n const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n (event, value) => {\n onChangeProp?.(event, value);\n },\n [onChangeProp]\n );\n const renderFieldComponent = useCallback(\n ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n <MuiRadioGroup\n {...inputValues}\n aria-describedby={ariaDescribedBy}\n aria-errormessage={errorMessageElementId}\n aria-labelledby={labelElementId}\n data-se={testId}\n id={id}\n name={nameOverride ?? id}\n onChange={onChange}\n translate={translate}\n >\n {children}\n </MuiRadioGroup>\n ),\n [children, inputValues, nameOverride, onChange, testId, translate]\n );\n\n return (\n <Field\n ariaDescribedBy={ariaDescribedBy}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n fieldType=\"group\"\n hasVisibleLabel={false}\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n id={idOverride}\n isDisabled={isDisabled}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAGvDC,KAAK;AAAA,SAGLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoCxC,MAAMC,UAAU,GAAGC,IAAA,IAgBI;EAAA,IAhBH;IAClBC,eAAe;IACfC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,gBAAgB;IAChBC,IAAI;IACJC,iBAAiB;IACjBC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,KAAK;IACLC,IAAI,EAAEC,YAAY;IAClBC,QAAQ,EAAEC,YAAY;IACtBC,MAAM;IACNC,SAAS;IACTC;EACe,CAAC,GAAAlB,IAAA;EAChB,MAAMmB,kBAAkB,GAAG1B,MAAM,CAC/BE,eAAe,CAAC;IAAEyB,eAAe,EAAEF,KAAK;IAAEG,iBAAiB,EAAElB;EAAa,CAAC,CAC7E,CAAC;EACD,MAAMmB,WAAW,GAAG1B,cAAc,CAAC;IACjCO,YAAY;IACZe,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGtB,WAAW,CAC1B,CAACiC,KAAK,EAAEP,KAAK,KAAK;IAChBH,YAAY,GAAGU,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACH,YAAY,CACf,CAAC;EACD,MAAMW,oBAAoB,GAAGlC,WAAW,CACtCmC,KAAA;IAAA,IAAC;MAAE1B,eAAe;MAAE2B,qBAAqB;MAAEpB,EAAE;MAAEqB;IAAe,CAAC,GAAAF,KAAA;IAAA,OAC7D7B,IAAA,CAAAgC,WAAA;MAAA,GACMR,WAAW;MACf,oBAAkBrB,eAAgB;MAClC,qBAAmB2B,qBAAsB;MACzC,mBAAiBC,cAAe;MAChC,WAASb,MAAO;MAChBR,EAAE,EAAEA,EAAG;MACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;MACzBM,QAAQ,EAAEA,QAAS;MACnBG,SAAS,EAAEA,SAAU;MAAAf,QAAA,EAEpBA;IAAQ,CACI,CAAC;EAAA,CACjB,EACD,CAACA,QAAQ,EAAEoB,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEC,SAAS,CACnE,CAAC;EAED,OACEnB,IAAA,CAACJ,KAAK;IACJO,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnC0B,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvB1B,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbe,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMO,kBAAkB,GAAG1C,IAAI,CAACQ,UAAU,CAAC;AAC3CkC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIlC,UAAU"}
1
+ {"version":3,"file":"RadioGroup.js","names":["memo","useCallback","useRef","Field","getControlState","useInputValues","jsx","_jsx","RadioGroup","ariaDescribedBy","children","defaultValue","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","testId","translate","value","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","errorMessageElementId","labelElementId","_RadioGroup","fieldType","hasVisibleLabel","MemoizedRadioGroup","displayName"],"sources":["../src/RadioGroup.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 {\n RadioGroup as MuiRadioGroup,\n type RadioGroupProps as MuiRadioGroupProps,\n} from \"@mui/material\";\nimport { memo, ReactElement, useCallback, useRef } from \"react\";\n\nimport { Radio, RadioProps } from \"./Radio\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type RadioGroupProps = {\n /**\n * The Radio components within the group. Must include two or more.\n */\n children: Array<ReactElement<typeof Radio>>;\n /**\n * The text value of the Radio that should be selected by default\n */\n defaultValue?: string;\n /**\n * The text label for the RadioGroup\n */\n label: string;\n /**\n * Listen for changes in the browser that change `value`\n */\n onChange?: MuiRadioGroupProps[\"onChange\"];\n /**\n * The `value` on the selected Radio\n */\n value?: RadioProps[\"value\"];\n} & Pick<\n FieldComponentProps,\n | \"ariaDescribedBy\"\n | \"errorMessage\"\n | \"errorMessageList\"\n | \"hint\"\n | \"HintLinkComponent\"\n | \"id\"\n | \"isDisabled\"\n | \"name\"\n> &\n HtmlProps;\n\nconst RadioGroup = ({\n ariaDescribedBy,\n children,\n defaultValue,\n errorMessage,\n errorMessageList,\n hint,\n HintLinkComponent,\n id: idOverride,\n isDisabled,\n label,\n name: nameOverride,\n onChange: onChangeProp,\n testId,\n translate,\n value,\n}: RadioGroupProps) => {\n const controlledStateRef = useRef(\n getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n );\n const inputValues = useInputValues({\n defaultValue,\n value,\n controlState: controlledStateRef.current,\n });\n\n const onChange = useCallback<NonNullable<MuiRadioGroupProps[\"onChange\"]>>(\n (event, value) => {\n onChangeProp?.(event, value);\n },\n [onChangeProp]\n );\n const renderFieldComponent = useCallback(\n ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n <MuiRadioGroup\n {...inputValues}\n aria-describedby={ariaDescribedBy}\n aria-errormessage={errorMessageElementId}\n aria-labelledby={labelElementId}\n data-se={testId}\n id={id}\n name={nameOverride ?? id}\n onChange={onChange}\n translate={translate}\n >\n {children}\n </MuiRadioGroup>\n ),\n [children, inputValues, nameOverride, onChange, testId, translate]\n );\n\n return (\n <Field\n ariaDescribedBy={ariaDescribedBy}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n fieldType=\"group\"\n hasVisibleLabel={false}\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n id={idOverride}\n isDisabled={isDisabled}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n};\n\nconst MemoizedRadioGroup = memo(RadioGroup);\nMemoizedRadioGroup.displayName = \"RadioGroup\";\n\nexport { MemoizedRadioGroup as RadioGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAMA,SAASA,IAAI,EAAgBC,WAAW,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAGvDC,KAAK;AAAA,SAGLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAoCxC,MAAMC,UAAU,GAAGA,CAAC;EAClBC,eAAe;EACfC,QAAQ;EACRC,YAAY;EACZC,YAAY;EACZC,gBAAgB;EAChBC,IAAI;EACJC,iBAAiB;EACjBC,EAAE,EAAEC,UAAU;EACdC,UAAU;EACVC,KAAK;EACLC,IAAI,EAAEC,YAAY;EAClBC,QAAQ,EAAEC,YAAY;EACtBC,MAAM;EACNC,SAAS;EACTC;AACe,CAAC,KAAK;EACrB,MAAMC,kBAAkB,GAAGzB,MAAM,CAC/BE,eAAe,CAAC;IAAEwB,eAAe,EAAEF,KAAK;IAAEG,iBAAiB,EAAElB;EAAa,CAAC,CAC7E,CAAC;EACD,MAAMmB,WAAW,GAAGzB,cAAc,CAAC;IACjCM,YAAY;IACZe,KAAK;IACLK,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMV,QAAQ,GAAGrB,WAAW,CAC1B,CAACgC,KAAK,EAAEP,KAAK,KAAK;IAChBH,YAAY,GAAGU,KAAK,EAAEP,KAAK,CAAC;EAC9B,CAAC,EACD,CAACH,YAAY,CACf,CAAC;EACD,MAAMW,oBAAoB,GAAGjC,WAAW,CACtC,CAAC;IAAEQ,eAAe;IAAE0B,qBAAqB;IAAEnB,EAAE;IAAEoB;EAAe,CAAC,KAC7D7B,IAAA,CAAA8B,WAAA;IAAA,GACMP,WAAW;IACf,oBAAkBrB,eAAgB;IAClC,qBAAmB0B,qBAAsB;IACzC,mBAAiBC,cAAe;IAChC,WAASZ,MAAO;IAChBR,EAAE,EAAEA,EAAG;IACPI,IAAI,EAAEC,YAAY,IAAIL,EAAG;IACzBM,QAAQ,EAAEA,QAAS;IACnBG,SAAS,EAAEA,SAAU;IAAAf,QAAA,EAEpBA;EAAQ,CACI,CAChB,EACD,CAACA,QAAQ,EAAEoB,WAAW,EAAET,YAAY,EAAEC,QAAQ,EAAEE,MAAM,EAAEC,SAAS,CACnE,CAAC;EAED,OACElB,IAAA,CAACJ,KAAK;IACJM,eAAe,EAAEA,eAAgB;IACjCG,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCyB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,KAAM;IACvBzB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbe,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMM,kBAAkB,GAAGxC,IAAI,CAACQ,UAAU,CAAC;AAC3CgC,kBAAkB,CAACC,WAAW,GAAG,YAAY;AAE7C,SAASD,kBAAkB,IAAIhC,UAAU"}
@@ -17,18 +17,15 @@ import { jsx as _jsx } from "react/jsx-runtime";
17
17
  const style = {
18
18
  ...visuallyHidden
19
19
  };
20
- const ScreenReaderText = _ref => {
21
- let {
22
- children,
23
- translate
24
- } = _ref;
25
- return _jsx(_Box, {
26
- sx: style,
27
- component: "span",
28
- translate: translate,
29
- children: children
30
- });
31
- };
20
+ const ScreenReaderText = ({
21
+ children,
22
+ translate
23
+ }) => _jsx(_Box, {
24
+ sx: style,
25
+ component: "span",
26
+ translate: translate,
27
+ children: children
28
+ });
32
29
  const MemoizedScreenReaderText = memo(ScreenReaderText);
33
30
  MemoizedScreenReaderText.displayName = "ScreenReaderText";
34
31
  export { MemoizedScreenReaderText as ScreenReaderText };
@@ -1 +1 @@
1
- {"version":3,"file":"ScreenReaderText.js","names":["memo","visuallyHidden","jsx","_jsx","style","ScreenReaderText","_ref","children","translate","_Box","sx","component","MemoizedScreenReaderText","displayName"],"sources":["../src/ScreenReaderText.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport { Box } from \"@mui/material\";\nimport { visuallyHidden } from \"@mui/utils\";\nimport { HtmlProps } from \"./HtmlProps\";\n\nexport type ScreenReaderTextProps = {\n /**\n * The visually-hidden text.\n */\n children: ReactNode;\n} & HtmlProps;\n\n/**\n * MUI sx expects you pass in a CSS object, not an object with CSS.\n * They seem identical, but only if you create a new object like this will MUI be happy with the type of visuallyHidden.\n * It's otherwise a regular object with CSS properties.\n */\nconst style = { ...visuallyHidden };\n\nconst ScreenReaderText = ({ children, translate }: ScreenReaderTextProps) => (\n <Box sx={style} component=\"span\" translate={translate}>\n {children}\n </Box>\n);\n\nconst MemoizedScreenReaderText = memo(ScreenReaderText);\nMemoizedScreenReaderText.displayName = \"ScreenReaderText\";\n\nexport { MemoizedScreenReaderText as ScreenReaderText };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAEvC,SAASC,cAAc,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAe5C,MAAMC,KAAK,GAAG;EAAE,GAAGH;AAAe,CAAC;AAEnC,MAAMI,gBAAgB,GAAGC,IAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAiC,CAAC,GAAAF,IAAA;EAAA,OACtEH,IAAA,CAAAM,IAAA;IAAKC,EAAE,EAAEN,KAAM;IAACO,SAAS,EAAC,MAAM;IAACH,SAAS,EAAEA,SAAU;IAAAD,QAAA,EACnDA;EAAQ,CACN,CAAC;AAAA,CACP;AAED,MAAMK,wBAAwB,GAAGZ,IAAI,CAACK,gBAAgB,CAAC;AACvDO,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIP,gBAAgB"}
1
+ {"version":3,"file":"ScreenReaderText.js","names":["memo","visuallyHidden","jsx","_jsx","style","ScreenReaderText","children","translate","_Box","sx","component","MemoizedScreenReaderText","displayName"],"sources":["../src/ScreenReaderText.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactNode } from \"react\";\nimport { Box } from \"@mui/material\";\nimport { visuallyHidden } from \"@mui/utils\";\nimport { HtmlProps } from \"./HtmlProps\";\n\nexport type ScreenReaderTextProps = {\n /**\n * The visually-hidden text.\n */\n children: ReactNode;\n} & HtmlProps;\n\n/**\n * MUI sx expects you pass in a CSS object, not an object with CSS.\n * They seem identical, but only if you create a new object like this will MUI be happy with the type of visuallyHidden.\n * It's otherwise a regular object with CSS properties.\n */\nconst style = { ...visuallyHidden };\n\nconst ScreenReaderText = ({ children, translate }: ScreenReaderTextProps) => (\n <Box sx={style} component=\"span\" translate={translate}>\n {children}\n </Box>\n);\n\nconst MemoizedScreenReaderText = memo(ScreenReaderText);\nMemoizedScreenReaderText.displayName = \"ScreenReaderText\";\n\nexport { MemoizedScreenReaderText as ScreenReaderText };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAmB,OAAO;AAEvC,SAASC,cAAc,QAAQ,YAAY;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAe5C,MAAMC,KAAK,GAAG;EAAE,GAAGH;AAAe,CAAC;AAEnC,MAAMI,gBAAgB,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAiC,CAAC,KACtEJ,IAAA,CAAAK,IAAA;EAAKC,EAAE,EAAEL,KAAM;EAACM,SAAS,EAAC,MAAM;EAACH,SAAS,EAAEA,SAAU;EAAAD,QAAA,EACnDA;AAAQ,CACN,CACN;AAED,MAAMK,wBAAwB,GAAGX,IAAI,CAACK,gBAAgB,CAAC;AACvDM,wBAAwB,CAACC,WAAW,GAAG,kBAAkB;AAEzD,SAASD,wBAAwB,IAAIN,gBAAgB"}
@@ -17,27 +17,26 @@ import { CloseCircleFilledIcon, SearchIcon } from "./icons.generated/index.js";
17
17
  import { Field } from "./Field.js";
18
18
  import { getControlState, useInputValues } from "./inputUtils.js";
19
19
  import { jsx as _jsx } from "react/jsx-runtime";
20
- const SearchField = forwardRef((_ref, ref) => {
21
- let {
22
- ariaDescribedBy,
23
- autoCompleteType,
24
- defaultValue,
25
- hasInitialFocus,
26
- id: idOverride,
27
- isDisabled = false,
28
- isFullWidth = false,
29
- label,
30
- name: nameOverride,
31
- onChange: onChangeProp,
32
- onFocus,
33
- onBlur,
34
- onClear: onClearProp,
35
- placeholder,
36
- tabIndex,
37
- testId,
38
- translate,
39
- value
40
- } = _ref;
20
+ const SearchField = forwardRef(({
21
+ ariaDescribedBy,
22
+ autoCompleteType,
23
+ defaultValue,
24
+ hasInitialFocus,
25
+ id: idOverride,
26
+ isDisabled = false,
27
+ isFullWidth = false,
28
+ label,
29
+ name: nameOverride,
30
+ onChange: onChangeProp,
31
+ onFocus,
32
+ onBlur,
33
+ onClear: onClearProp,
34
+ placeholder,
35
+ tabIndex,
36
+ testId,
37
+ translate,
38
+ value
39
+ }, ref) => {
41
40
  const onChange = useCallback(event => {
42
41
  onChangeProp?.(event);
43
42
  }, [onChangeProp]);
@@ -53,45 +52,42 @@ const SearchField = forwardRef((_ref, ref) => {
53
52
  value,
54
53
  controlState: controlledStateRef.current
55
54
  });
56
- const renderFieldComponent = useCallback(_ref2 => {
57
- let {
58
- ariaDescribedBy,
59
- id
60
- } = _ref2;
61
- return _jsx(_InputBase, {
62
- ...inputValues,
63
- inputProps: {
64
- tabIndex
65
- },
66
- "aria-describedby": ariaDescribedBy,
67
- autoComplete: autoCompleteType,
68
- autoFocus: hasInitialFocus,
69
- "data-se": testId,
70
- endAdornment: defaultValue && _jsx(_InputAdornment, {
71
- position: "end",
72
- children: _jsx(_IconButton, {
73
- "aria-label": "Clear",
74
- disabled: isDisabled,
75
- onClick: onClear,
76
- size: "small",
77
- children: _jsx(CloseCircleFilledIcon, {})
78
- })
79
- }),
80
- id: id,
81
- name: nameOverride ?? id,
82
- onBlur: onBlur,
83
- onChange: onChange,
84
- onFocus: onFocus,
85
- placeholder: placeholder,
86
- ref: ref,
87
- startAdornment: _jsx(_InputAdornment, {
88
- position: "start",
89
- children: _jsx(SearchIcon, {})
90
- }),
91
- translate: translate,
92
- type: "search"
93
- });
94
- }, [autoCompleteType, defaultValue, hasInitialFocus, inputValues, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, tabIndex, testId, translate]);
55
+ const renderFieldComponent = useCallback(({
56
+ ariaDescribedBy,
57
+ id
58
+ }) => _jsx(_InputBase, {
59
+ ...inputValues,
60
+ inputProps: {
61
+ tabIndex
62
+ },
63
+ "aria-describedby": ariaDescribedBy,
64
+ autoComplete: autoCompleteType,
65
+ autoFocus: hasInitialFocus,
66
+ "data-se": testId,
67
+ endAdornment: defaultValue && _jsx(_InputAdornment, {
68
+ position: "end",
69
+ children: _jsx(_IconButton, {
70
+ "aria-label": "Clear",
71
+ disabled: isDisabled,
72
+ onClick: onClear,
73
+ size: "small",
74
+ children: _jsx(CloseCircleFilledIcon, {})
75
+ })
76
+ }),
77
+ id: id,
78
+ name: nameOverride ?? id,
79
+ onBlur: onBlur,
80
+ onChange: onChange,
81
+ onFocus: onFocus,
82
+ placeholder: placeholder,
83
+ ref: ref,
84
+ startAdornment: _jsx(_InputAdornment, {
85
+ position: "start",
86
+ children: _jsx(SearchIcon, {})
87
+ }),
88
+ translate: translate,
89
+ type: "search"
90
+ }), [autoCompleteType, defaultValue, hasInitialFocus, inputValues, isDisabled, nameOverride, onBlur, onChange, onClear, onFocus, placeholder, ref, tabIndex, testId, translate]);
95
91
  return _jsx(Field, {
96
92
  ariaDescribedBy: ariaDescribedBy,
97
93
  fieldType: "single",
@@ -1 +1 @@
1
- {"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","jsx","_jsx","SearchField","_ref","ref","ariaDescribedBy","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","tabIndex","testId","translate","value","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_ref2","_InputBase","inputProps","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../src/SearchField.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, IconButton } from \"@mui/material\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n InputHTMLAttributes,\n memo,\n useCallback,\n useRef,\n} from \"react\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type SearchFieldProps = {\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 * The value of the `input` element to use when uncontrolled.\n */\n defaultValue?: string;\n /**\n * If `true`, the component will receive focus automatically.\n */\n hasInitialFocus?: boolean;\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 * This label won't show up visually, but it's required for accessibility.\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 clear button is pressed.\n */\n onClear?: () => void;\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 tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n /**\n * The value of the `input` element, to use when controlled.\n */\n value?: string;\n} & Pick<\n FieldComponentProps,\n \"ariaDescribedBy\" | \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"\n> &\n HtmlProps;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n (\n {\n ariaDescribedBy,\n autoCompleteType,\n defaultValue,\n hasInitialFocus,\n id: idOverride,\n isDisabled = false,\n isFullWidth = false,\n label,\n name: nameOverride,\n onChange: onChangeProp,\n onFocus,\n onBlur,\n onClear: onClearProp,\n placeholder,\n tabIndex,\n testId,\n translate,\n value,\n },\n ref\n ) => {\n const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n useCallback(\n (event) => {\n onChangeProp?.(event);\n },\n [onChangeProp]\n );\n\n const onClear = useCallback(() => {\n onClearProp?.();\n }, [onClearProp]);\n\n const controlledStateRef = useRef(\n getControlState({\n controlledValue: value,\n uncontrolledValue: defaultValue,\n })\n );\n const inputValues = useInputValues({\n defaultValue,\n value,\n controlState: controlledStateRef.current,\n });\n\n const renderFieldComponent = useCallback(\n ({ ariaDescribedBy, id }) => (\n <InputBase\n {...inputValues}\n inputProps={{\n tabIndex,\n }}\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 defaultValue && (\n <InputAdornment position=\"end\">\n <IconButton\n aria-label=\"Clear\"\n disabled={isDisabled}\n onClick={onClear}\n size=\"small\"\n >\n <CloseCircleFilledIcon />\n </IconButton>\n </InputAdornment>\n )\n }\n id={id}\n name={nameOverride ?? id}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n placeholder={placeholder}\n ref={ref}\n startAdornment={\n <InputAdornment position=\"start\">\n <SearchIcon />\n </InputAdornment>\n }\n translate={translate}\n type=\"search\"\n />\n ),\n [\n autoCompleteType,\n defaultValue,\n hasInitialFocus,\n inputValues,\n isDisabled,\n nameOverride,\n onBlur,\n onChange,\n onClear,\n onFocus,\n placeholder,\n ref,\n tabIndex,\n testId,\n translate,\n ]\n );\n\n return (\n <Field\n ariaDescribedBy={ariaDescribedBy}\n fieldType=\"single\"\n hasVisibleLabel={false}\n id={idOverride}\n isDisabled={isDisabled}\n isFullWidth={isFullWidth}\n isOptional={true}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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"}
1
+ {"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","jsx","_jsx","SearchField","ariaDescribedBy","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","tabIndex","testId","translate","value","ref","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_InputBase","inputProps","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../src/SearchField.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, IconButton } from \"@mui/material\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n InputHTMLAttributes,\n memo,\n useCallback,\n useRef,\n} from \"react\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type SearchFieldProps = {\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 * The value of the `input` element to use when uncontrolled.\n */\n defaultValue?: string;\n /**\n * If `true`, the component will receive focus automatically.\n */\n hasInitialFocus?: boolean;\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 * This label won't show up visually, but it's required for accessibility.\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 clear button is pressed.\n */\n onClear?: () => void;\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 tabIndex?: HTMLAttributes<HTMLElement>[\"tabIndex\"];\n /**\n * The value of the `input` element, to use when controlled.\n */\n value?: string;\n} & Pick<\n FieldComponentProps,\n \"ariaDescribedBy\" | \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"\n> &\n HtmlProps;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n (\n {\n ariaDescribedBy,\n autoCompleteType,\n defaultValue,\n hasInitialFocus,\n id: idOverride,\n isDisabled = false,\n isFullWidth = false,\n label,\n name: nameOverride,\n onChange: onChangeProp,\n onFocus,\n onBlur,\n onClear: onClearProp,\n placeholder,\n tabIndex,\n testId,\n translate,\n value,\n },\n ref\n ) => {\n const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n useCallback(\n (event) => {\n onChangeProp?.(event);\n },\n [onChangeProp]\n );\n\n const onClear = useCallback(() => {\n onClearProp?.();\n }, [onClearProp]);\n\n const controlledStateRef = useRef(\n getControlState({\n controlledValue: value,\n uncontrolledValue: defaultValue,\n })\n );\n const inputValues = useInputValues({\n defaultValue,\n value,\n controlState: controlledStateRef.current,\n });\n\n const renderFieldComponent = useCallback(\n ({ ariaDescribedBy, id }) => (\n <InputBase\n {...inputValues}\n inputProps={{\n tabIndex,\n }}\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 defaultValue && (\n <InputAdornment position=\"end\">\n <IconButton\n aria-label=\"Clear\"\n disabled={isDisabled}\n onClick={onClear}\n size=\"small\"\n >\n <CloseCircleFilledIcon />\n </IconButton>\n </InputAdornment>\n )\n }\n id={id}\n name={nameOverride ?? id}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n placeholder={placeholder}\n ref={ref}\n startAdornment={\n <InputAdornment position=\"start\">\n <SearchIcon />\n </InputAdornment>\n }\n translate={translate}\n type=\"search\"\n />\n ),\n [\n autoCompleteType,\n defaultValue,\n hasInitialFocus,\n inputValues,\n isDisabled,\n nameOverride,\n onBlur,\n onChange,\n onClear,\n onFocus,\n placeholder,\n ref,\n tabIndex,\n testId,\n translate,\n ]\n );\n\n return (\n <Field\n ariaDescribedBy={ariaDescribedBy}\n fieldType=\"single\"\n hasVisibleLabel={false}\n id={idOverride}\n isDisabled={isDisabled}\n isFullWidth={isFullWidth}\n isOptional={true}\n label={label}\n renderFieldComponent={renderFieldComponent}\n />\n );\n }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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"}
package/dist/Select.js CHANGED
@@ -27,31 +27,30 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
27
27
  const {
28
28
  CONTROLLED
29
29
  } = ComponentControlledState;
30
- const Select = _ref => {
31
- let {
32
- ariaDescribedBy,
33
- defaultValue,
34
- errorMessage,
35
- errorMessageList,
36
- hasMultipleChoices: hasMultipleChoicesProp,
37
- hint,
38
- HintLinkComponent,
39
- id: idOverride,
40
- inputRef,
41
- isDisabled = false,
42
- isFullWidth = false,
43
- isMultiSelect,
44
- isOptional = false,
45
- label,
46
- name: nameOverride,
47
- onBlur,
48
- onChange: onChangeProp,
49
- onFocus,
50
- options,
51
- testId,
52
- translate,
53
- value
54
- } = _ref;
30
+ const Select = ({
31
+ ariaDescribedBy,
32
+ defaultValue,
33
+ errorMessage,
34
+ errorMessageList,
35
+ hasMultipleChoices: hasMultipleChoicesProp,
36
+ hint,
37
+ HintLinkComponent,
38
+ id: idOverride,
39
+ inputRef,
40
+ isDisabled = false,
41
+ isFullWidth = false,
42
+ isMultiSelect,
43
+ isOptional = false,
44
+ label,
45
+ name: nameOverride,
46
+ onBlur,
47
+ onChange: onChangeProp,
48
+ onFocus,
49
+ options,
50
+ testId,
51
+ translate,
52
+ value
53
+ }) => {
55
54
  const hasMultipleChoices = useMemo(() => hasMultipleChoicesProp === undefined ? isMultiSelect : hasMultipleChoicesProp, [hasMultipleChoicesProp, isMultiSelect]);
56
55
  const controlledStateRef = useRef(getControlState({
57
56
  controlledValue: value,
@@ -137,35 +136,32 @@ const Select = _ref => {
137
136
  })]
138
137
  }, normalizedKey(option.text, index.toString()));
139
138
  }), [hasMultipleChoices, normalizedOptions, internalSelectedValues]);
140
- const renderFieldComponent = useCallback(_ref2 => {
141
- let {
142
- ariaDescribedBy,
143
- errorMessageElementId,
144
- id,
145
- labelElementId
146
- } = _ref2;
147
- return _jsx(_Select, {
148
- ...inputValues,
149
- "aria-describedby": ariaDescribedBy,
150
- "aria-errormessage": errorMessageElementId,
151
- children: children,
152
- "data-se": testId,
153
- displayEmpty: inputValues?.value === "" || inputValues?.defaultValue === "",
154
- id: id,
155
- inputProps: {
156
- "data-se": testId
157
- },
158
- inputRef: localInputRef,
159
- labelId: labelElementId,
160
- multiple: hasMultipleChoices,
161
- name: nameOverride ?? id,
162
- onBlur: onBlur,
163
- onChange: onChange,
164
- onFocus: onFocus,
165
- renderValue: hasMultipleChoices ? renderValue : undefined,
166
- translate: translate
167
- });
168
- }, [children, inputValues, hasMultipleChoices, nameOverride, onBlur, onChange, onFocus, renderValue, testId, translate]);
139
+ const renderFieldComponent = useCallback(({
140
+ ariaDescribedBy,
141
+ errorMessageElementId,
142
+ id,
143
+ labelElementId
144
+ }) => _jsx(_Select, {
145
+ ...inputValues,
146
+ "aria-describedby": ariaDescribedBy,
147
+ "aria-errormessage": errorMessageElementId,
148
+ children: children,
149
+ "data-se": testId,
150
+ displayEmpty: inputValues?.value === "" || inputValues?.defaultValue === "",
151
+ id: id,
152
+ inputProps: {
153
+ "data-se": testId
154
+ },
155
+ inputRef: localInputRef,
156
+ labelId: labelElementId,
157
+ multiple: hasMultipleChoices,
158
+ name: nameOverride ?? id,
159
+ onBlur: onBlur,
160
+ onChange: onChange,
161
+ onFocus: onFocus,
162
+ renderValue: hasMultipleChoices ? renderValue : undefined,
163
+ translate: translate
164
+ }), [children, inputValues, hasMultipleChoices, nameOverride, onBlur, onChange, onFocus, renderValue, testId, translate]);
169
165
  return _jsx(Field, {
170
166
  ariaDescribedBy: ariaDescribedBy,
171
167
  errorMessage: errorMessage,
@@ -1 +1 @@
1
- {"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","ComponentControlledState","useInputValues","getControlState","normalizedKey","jsx","_jsx","jsxs","_jsxs","CONTROLLED","Select","_ref","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","target","split","normalizedOptions","map","option","text","type","renderValue","selected","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","index","_ListSubheader","_MenuItem","_Checkbox","checked","includes","_ListItemSecondaryAction","toString","renderFieldComponent","_ref2","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","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 {\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\nimport {\n Box,\n Checkbox as MuiCheckbox,\n Chip,\n ListItemSecondaryAction,\n ListSubheader,\n MenuItem,\n Select as MuiSelect,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { CheckIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n ComponentControlledState,\n FocusHandle,\n useInputValues,\n getControlState,\n} from \"./inputUtils\";\nimport { normalizedKey } from \"./useNormalizedKey\";\n\nexport type SelectOption = {\n text: string;\n type?: \"heading\" | \"option\";\n value?: string;\n};\n\nexport type SelectValueType<HasMultipleChoices> =\n HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n Value extends SelectValueType<HasMultipleChoices>,\n HasMultipleChoices extends boolean\n> = {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n /**\n * If `true`, the Select allows multiple selections\n */\n hasMultipleChoices?: HasMultipleChoices;\n /**\n * The ref forwarded to the Select\n */\n inputRef?: React.RefObject<FocusHandle>;\n /**\n * @deprecated Use `hasMultipleChoices` instead.\n */\n /** **Deprecated:** use `hasMultipleChoices` */\n isMultiSelect?: HasMultipleChoices;\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<Value>[\"onBlur\"];\n /**\n * Callback fired when the value of the Select changes\n */\n onChange?: MuiSelectProps<Value>[\"onChange\"];\n /**\n * Callback fired when the Select gains focus\n */\n onFocus?: MuiSelectProps<Value>[\"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?: Value;\n} & Pick<\n FieldComponentProps,\n | \"ariaDescribedBy\"\n | \"errorMessage\"\n | \"errorMessageList\"\n | \"hint\"\n | \"HintLinkComponent\"\n | \"id\"\n | \"isDisabled\"\n | \"isFullWidth\"\n | \"isOptional\"\n | \"name\"\n> &\n HtmlProps;\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 { CONTROLLED } = ComponentControlledState;\nconst Select = <\n Value extends SelectValueType<HasMultipleChoices>,\n HasMultipleChoices extends boolean\n>({\n ariaDescribedBy,\n defaultValue,\n errorMessage,\n errorMessageList,\n hasMultipleChoices: hasMultipleChoicesProp,\n hint,\n HintLinkComponent,\n id: idOverride,\n inputRef,\n isDisabled = false,\n isFullWidth = false,\n isMultiSelect,\n isOptional = false,\n label,\n name: nameOverride,\n onBlur,\n onChange: onChangeProp,\n onFocus,\n options,\n testId,\n translate,\n value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n const hasMultipleChoices = useMemo(\n () =>\n hasMultipleChoicesProp === undefined\n ? isMultiSelect\n : hasMultipleChoicesProp,\n [hasMultipleChoicesProp, isMultiSelect]\n );\n const controlledStateRef = useRef(\n getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n );\n const [internalSelectedValues, setInternalSelectedValues] = useState(\n controlledStateRef.current === CONTROLLED ? value : defaultValue\n );\n const localInputRef = useRef<HTMLSelectElement>(null);\n\n useImperativeHandle(\n inputRef,\n () => {\n return {\n focus: () => {\n localInputRef.current?.focus();\n },\n };\n },\n []\n );\n\n useEffect(() => {\n if (controlledStateRef.current === CONTROLLED) {\n setInternalSelectedValues(value);\n }\n }, [value]);\n\n const inputValues = useInputValues({\n defaultValue,\n value,\n controlState: controlledStateRef.current,\n });\n\n const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n (event, child) => {\n const {\n target: { value },\n } = event;\n if (controlledStateRef.current !== CONTROLLED) {\n setInternalSelectedValues(\n (typeof value === \"string\" ? value.split(\",\") : value) as Value\n );\n }\n onChangeProp?.(event, child);\n },\n [onChangeProp]\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 if (typeof option === \"object\") {\n /**\n * If the value of `option?.value is an empty string, we need to make sure that we\n * set an empty string to `value` in the normalized option so that the select component\n * can potentially set it as the selected one in the text input\n */\n const value =\n option?.value === \"\" ? option.value : option.value || option.text;\n return {\n text: option.text,\n value,\n type: option.type === \"heading\" ? \"heading\" : \"option\",\n };\n }\n return { text: option, value: option, type: \"option\" };\n }),\n [options]\n );\n\n const renderValue = useCallback(\n (selected: Value) => {\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, index) => {\n if (option.type === \"heading\") {\n return <ListSubheader key={option.text}>{option.text}</ListSubheader>;\n }\n return (\n <MenuItem\n key={normalizedKey(option.text, index.toString())}\n value={option.value}\n >\n {hasMultipleChoices && (\n <MuiCheckbox\n checked={\n option.value !== undefined &&\n internalSelectedValues?.includes(option.value)\n }\n />\n )}\n {option.text}\n {!hasMultipleChoices &&\n (internalSelectedValues?.includes(option.value) ||\n internalSelectedValues === option.value) && (\n <ListItemSecondaryAction>\n <CheckIcon />\n </ListItemSecondaryAction>\n )}\n </MenuItem>\n );\n }),\n [hasMultipleChoices, normalizedOptions, internalSelectedValues]\n );\n\n const renderFieldComponent = useCallback(\n ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n <MuiSelect\n {...inputValues}\n aria-describedby={ariaDescribedBy}\n aria-errormessage={errorMessageElementId}\n children={children}\n data-se={testId}\n displayEmpty={\n inputValues?.value === \"\" || inputValues?.defaultValue === \"\"\n }\n id={id}\n inputProps={{ \"data-se\": testId }}\n inputRef={localInputRef}\n labelId={labelElementId}\n multiple={hasMultipleChoices}\n name={nameOverride ?? id}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n renderValue={hasMultipleChoices ? renderValue : undefined}\n translate={translate}\n />\n ),\n [\n children,\n inputValues,\n hasMultipleChoices,\n nameOverride,\n onBlur,\n onChange,\n onFocus,\n renderValue,\n testId,\n translate,\n ]\n );\n\n return (\n <Field\n ariaDescribedBy={ariaDescribedBy}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n fieldType=\"single\"\n hasVisibleLabel\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n id={idOverride}\n isDisabled={isDisabled}\n isFullWidth={isFullWidth}\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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"}
1
+ {"version":3,"file":"Select.js","names":["memo","useCallback","useEffect","useMemo","useRef","useState","useImperativeHandle","Field","CheckIcon","ComponentControlledState","useInputValues","getControlState","normalizedKey","jsx","_jsx","jsxs","_jsxs","CONTROLLED","Select","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","hasMultipleChoicesProp","hint","HintLinkComponent","id","idOverride","inputRef","isDisabled","isFullWidth","isMultiSelect","isOptional","label","name","nameOverride","onBlur","onChange","onChangeProp","onFocus","options","testId","translate","value","undefined","controlledStateRef","controlledValue","uncontrolledValue","internalSelectedValues","setInternalSelectedValues","current","localInputRef","focus","inputValues","controlState","event","child","target","split","normalizedOptions","map","option","text","type","renderValue","selected","renderedChips","item","selectedOption","find","_Chip","filter","Boolean","length","_Box","children","index","_ListSubheader","_MenuItem","_Checkbox","checked","includes","_ListItemSecondaryAction","toString","renderFieldComponent","errorMessageElementId","labelElementId","_Select","displayEmpty","inputProps","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 {\n memo,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n useImperativeHandle,\n} from \"react\";\nimport {\n Box,\n Checkbox as MuiCheckbox,\n Chip,\n ListItemSecondaryAction,\n ListSubheader,\n MenuItem,\n Select as MuiSelect,\n} from \"@mui/material\";\nimport { SelectProps as MuiSelectProps } from \"@mui/material\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { CheckIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n ComponentControlledState,\n FocusHandle,\n useInputValues,\n getControlState,\n} from \"./inputUtils\";\nimport { normalizedKey } from \"./useNormalizedKey\";\n\nexport type SelectOption = {\n text: string;\n type?: \"heading\" | \"option\";\n value?: string;\n};\n\nexport type SelectValueType<HasMultipleChoices> =\n HasMultipleChoices extends true ? string[] : string;\n\nexport type SelectProps<\n Value extends SelectValueType<HasMultipleChoices>,\n HasMultipleChoices extends boolean\n> = {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: MuiSelectProps<Value>[\"defaultValue\"];\n /**\n * If `true`, the Select allows multiple selections\n */\n hasMultipleChoices?: HasMultipleChoices;\n /**\n * The ref forwarded to the Select\n */\n inputRef?: React.RefObject<FocusHandle>;\n /**\n * @deprecated Use `hasMultipleChoices` instead.\n */\n /** **Deprecated:** use `hasMultipleChoices` */\n isMultiSelect?: HasMultipleChoices;\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<Value>[\"onBlur\"];\n /**\n * Callback fired when the value of the Select changes\n */\n onChange?: MuiSelectProps<Value>[\"onChange\"];\n /**\n * Callback fired when the Select gains focus\n */\n onFocus?: MuiSelectProps<Value>[\"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?: Value;\n} & Pick<\n FieldComponentProps,\n | \"ariaDescribedBy\"\n | \"errorMessage\"\n | \"errorMessageList\"\n | \"hint\"\n | \"HintLinkComponent\"\n | \"id\"\n | \"isDisabled\"\n | \"isFullWidth\"\n | \"isOptional\"\n | \"name\"\n> &\n HtmlProps;\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 { CONTROLLED } = ComponentControlledState;\nconst Select = <\n Value extends SelectValueType<HasMultipleChoices>,\n HasMultipleChoices extends boolean\n>({\n ariaDescribedBy,\n defaultValue,\n errorMessage,\n errorMessageList,\n hasMultipleChoices: hasMultipleChoicesProp,\n hint,\n HintLinkComponent,\n id: idOverride,\n inputRef,\n isDisabled = false,\n isFullWidth = false,\n isMultiSelect,\n isOptional = false,\n label,\n name: nameOverride,\n onBlur,\n onChange: onChangeProp,\n onFocus,\n options,\n testId,\n translate,\n value,\n}: SelectProps<Value, HasMultipleChoices>) => {\n const hasMultipleChoices = useMemo(\n () =>\n hasMultipleChoicesProp === undefined\n ? isMultiSelect\n : hasMultipleChoicesProp,\n [hasMultipleChoicesProp, isMultiSelect]\n );\n const controlledStateRef = useRef(\n getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n );\n const [internalSelectedValues, setInternalSelectedValues] = useState(\n controlledStateRef.current === CONTROLLED ? value : defaultValue\n );\n const localInputRef = useRef<HTMLSelectElement>(null);\n\n useImperativeHandle(\n inputRef,\n () => {\n return {\n focus: () => {\n localInputRef.current?.focus();\n },\n };\n },\n []\n );\n\n useEffect(() => {\n if (controlledStateRef.current === CONTROLLED) {\n setInternalSelectedValues(value);\n }\n }, [value]);\n\n const inputValues = useInputValues({\n defaultValue,\n value,\n controlState: controlledStateRef.current,\n });\n\n const onChange = useCallback<NonNullable<MuiSelectProps<Value>[\"onChange\"]>>(\n (event, child) => {\n const {\n target: { value },\n } = event;\n if (controlledStateRef.current !== CONTROLLED) {\n setInternalSelectedValues(\n (typeof value === \"string\" ? value.split(\",\") : value) as Value\n );\n }\n onChangeProp?.(event, child);\n },\n [onChangeProp]\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 if (typeof option === \"object\") {\n /**\n * If the value of `option?.value is an empty string, we need to make sure that we\n * set an empty string to `value` in the normalized option so that the select component\n * can potentially set it as the selected one in the text input\n */\n const value =\n option?.value === \"\" ? option.value : option.value || option.text;\n return {\n text: option.text,\n value,\n type: option.type === \"heading\" ? \"heading\" : \"option\",\n };\n }\n return { text: option, value: option, type: \"option\" };\n }),\n [options]\n );\n\n const renderValue = useCallback(\n (selected: Value) => {\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, index) => {\n if (option.type === \"heading\") {\n return <ListSubheader key={option.text}>{option.text}</ListSubheader>;\n }\n return (\n <MenuItem\n key={normalizedKey(option.text, index.toString())}\n value={option.value}\n >\n {hasMultipleChoices && (\n <MuiCheckbox\n checked={\n option.value !== undefined &&\n internalSelectedValues?.includes(option.value)\n }\n />\n )}\n {option.text}\n {!hasMultipleChoices &&\n (internalSelectedValues?.includes(option.value) ||\n internalSelectedValues === option.value) && (\n <ListItemSecondaryAction>\n <CheckIcon />\n </ListItemSecondaryAction>\n )}\n </MenuItem>\n );\n }),\n [hasMultipleChoices, normalizedOptions, internalSelectedValues]\n );\n\n const renderFieldComponent = useCallback(\n ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n <MuiSelect\n {...inputValues}\n aria-describedby={ariaDescribedBy}\n aria-errormessage={errorMessageElementId}\n children={children}\n data-se={testId}\n displayEmpty={\n inputValues?.value === \"\" || inputValues?.defaultValue === \"\"\n }\n id={id}\n inputProps={{ \"data-se\": testId }}\n inputRef={localInputRef}\n labelId={labelElementId}\n multiple={hasMultipleChoices}\n name={nameOverride ?? id}\n onBlur={onBlur}\n onChange={onChange}\n onFocus={onFocus}\n renderValue={hasMultipleChoices ? renderValue : undefined}\n translate={translate}\n />\n ),\n [\n children,\n inputValues,\n hasMultipleChoices,\n nameOverride,\n onBlur,\n onChange,\n onFocus,\n renderValue,\n testId,\n translate,\n ]\n );\n\n return (\n <Field\n ariaDescribedBy={ariaDescribedBy}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n fieldType=\"single\"\n hasVisibleLabel\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n id={idOverride}\n isDisabled={isDisabled}\n isFullWidth={isFullWidth}\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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"}
package/dist/Status.js CHANGED
@@ -13,13 +13,12 @@ import _Chip from "@mui/material/Chip";
13
13
  import { useMuiProps } from "./MuiPropsContext.js";
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
15
  export const statusSeverityValues = ["default", "error", "success", "warning"];
16
- export const Status = _ref => {
17
- let {
18
- label,
19
- severity,
20
- testId,
21
- translate
22
- } = _ref;
16
+ export const Status = ({
17
+ label,
18
+ severity,
19
+ testId,
20
+ translate
21
+ }) => {
23
22
  const muiProps = useMuiProps();
24
23
  return _jsx(_Chip, {
25
24
  ...muiProps,
@@ -1 +1 @@
1
- {"version":3,"file":"Status.js","names":["useMuiProps","jsx","_jsx","statusSeverityValues","Status","_ref","label","severity","testId","translate","muiProps","_Chip","color","variant"],"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 { HtmlProps } from \"./HtmlProps\";\n\nexport const statusSeverityValues = [\n \"default\",\n \"error\",\n \"success\",\n \"warning\",\n] 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} & HtmlProps;\n\nexport const Status = ({ label, severity, testId, translate }: StatusProps) => {\n const muiProps = useMuiProps();\n\n return (\n <Chip\n {...muiProps}\n color={severity}\n data-se={testId}\n label={label}\n translate={translate}\n variant=\"pill\"\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;AAaV,OAAO,MAAMC,MAAM,GAAGC,IAAA,IAAyD;EAAA,IAAxD;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,MAAM;IAAEC;EAAuB,CAAC,GAAAJ,IAAA;EACxE,MAAMK,QAAQ,GAAGV,WAAW,CAAC,CAAC;EAE9B,OACEE,IAAA,CAAAS,KAAA;IAAA,GACMD,QAAQ;IACZE,KAAK,EAAEL,QAAS;IAChB,WAASC,MAAO;IAChBF,KAAK,EAAEA,KAAM;IACbG,SAAS,EAAEA,SAAU;IACrBI,OAAO,EAAC;EAAM,CACf,CAAC;AAEN,CAAC"}
1
+ {"version":3,"file":"Status.js","names":["useMuiProps","jsx","_jsx","statusSeverityValues","Status","label","severity","testId","translate","muiProps","_Chip","color","variant"],"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 { HtmlProps } from \"./HtmlProps\";\n\nexport const statusSeverityValues = [\n \"default\",\n \"error\",\n \"success\",\n \"warning\",\n] 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} & HtmlProps;\n\nexport const Status = ({ label, severity, testId, translate }: StatusProps) => {\n const muiProps = useMuiProps();\n\n return (\n <Chip\n {...muiProps}\n color={severity}\n data-se={testId}\n label={label}\n translate={translate}\n variant=\"pill\"\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;AAaV,OAAO,MAAMC,MAAM,GAAGA,CAAC;EAAEC,KAAK;EAAEC,QAAQ;EAAEC,MAAM;EAAEC;AAAuB,CAAC,KAAK;EAC7E,MAAMC,QAAQ,GAAGT,WAAW,CAAC,CAAC;EAE9B,OACEE,IAAA,CAAAQ,KAAA;IAAA,GACMD,QAAQ;IACZE,KAAK,EAAEL,QAAS;IAChB,WAASC,MAAO;IAChBF,KAAK,EAAEA,KAAM;IACbG,SAAS,EAAEA,SAAU;IACrBI,OAAO,EAAC;EAAM,CACf,CAAC;AAEN,CAAC"}