@okta/odyssey-react-mui 1.13.3 → 1.13.5

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 (142) 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 +18 -19
  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 +25 -23
  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/properties/ts/odyssey-react-mui.js +2 -0
  113. package/dist/properties/ts/odyssey-react-mui.js.map +1 -1
  114. package/dist/src/OdysseyTranslationProvider.d.ts +1 -1
  115. package/dist/src/OdysseyTranslationProvider.d.ts.map +1 -1
  116. package/dist/src/i18n.d.ts +1 -1
  117. package/dist/src/i18n.d.ts.map +1 -1
  118. package/dist/src/labs/Switch.d.ts.map +1 -1
  119. package/dist/src/properties/ts/odyssey-react-mui.d.ts +2 -0
  120. package/dist/src/properties/ts/odyssey-react-mui.d.ts.map +1 -1
  121. package/dist/theme/components.js +1104 -1198
  122. package/dist/theme/components.js.map +1 -1
  123. package/dist/theme/createOdysseyMuiTheme.js +22 -25
  124. package/dist/theme/createOdysseyMuiTheme.js.map +1 -1
  125. package/dist/theme/mixins.js +3 -4
  126. package/dist/theme/mixins.js.map +1 -1
  127. package/dist/theme/palette.js +3 -4
  128. package/dist/theme/palette.js.map +1 -1
  129. package/dist/theme/shape.js +3 -4
  130. package/dist/theme/shape.js.map +1 -1
  131. package/dist/theme/spacing.js +3 -4
  132. package/dist/theme/spacing.js.map +1 -1
  133. package/dist/theme/typography.js +3 -4
  134. package/dist/theme/typography.js.map +1 -1
  135. package/dist/tsconfig.production.tsbuildinfo +1 -1
  136. package/dist/useNormalizedKey.js +1 -4
  137. package/dist/useNormalizedKey.js.map +1 -1
  138. package/package.json +3 -3
  139. package/src/i18n.ts +1 -1
  140. package/src/labs/Switch.tsx +3 -1
  141. package/src/properties/odyssey-react-mui.properties +2 -0
  142. package/src/properties/ts/odyssey-react-mui.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.13.5](https://github.com/okta/odyssey/compare/v1.13.4...v1.13.5) (2024-02-13)
7
+
8
+ **Note:** Version bump only for package @okta/odyssey-react-mui
9
+
10
+ ## [1.13.4](https://github.com/okta/odyssey/compare/v1.13.3...v1.13.4) (2024-02-12)
11
+
12
+ **Note:** Version bump only for package @okta/odyssey-react-mui
13
+
6
14
  ## [1.13.3](https://github.com/okta/odyssey/compare/v1.13.2...v1.13.3) (2024-02-09)
7
15
 
8
16
  **Note:** Version bump only for package @okta/odyssey-react-mui
package/dist/Accordion.js CHANGED
@@ -19,18 +19,17 @@ import { Support } from "./Typography.js";
19
19
  import { useUniqueId } from "./useUniqueId.js";
20
20
  import { jsx as _jsx } from "react/jsx-runtime";
21
21
  import { jsxs as _jsxs } from "react/jsx-runtime";
22
- const Accordion = _ref => {
23
- let {
24
- children,
25
- label,
26
- hasShadow = true,
27
- id: idOverride,
28
- isDefaultExpanded,
29
- isDisabled,
30
- isExpanded,
31
- onChange,
32
- translate
33
- } = _ref;
22
+ const Accordion = ({
23
+ children,
24
+ label,
25
+ hasShadow = true,
26
+ id: idOverride,
27
+ isDefaultExpanded,
28
+ isDisabled,
29
+ isExpanded,
30
+ onChange,
31
+ translate
32
+ }) => {
34
33
  const id = useUniqueId(idOverride);
35
34
  const headerId = `${id}-header`;
36
35
  const contentId = `${id}-content`;
@@ -1 +1 @@
1
- {"version":3,"file":"Accordion.js","names":["memo","ChevronDownIcon","Support","useUniqueId","jsx","_jsx","jsxs","_jsxs","Accordion","_ref","children","label","hasShadow","id","idOverride","isDefaultExpanded","isDisabled","isExpanded","onChange","translate","headerId","contentId","_Accordion","defaultExpanded","disabled","disableGutters","expanded","className","undefined","_AccordionSummary","expandIcon","component","_AccordionDetails","MemoizedAccordion","displayName"],"sources":["../src/Accordion.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactNode, memo } from \"react\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n Accordion as MuiAccordion,\n AccordionDetails as MuiAccordionDetails,\n AccordionSummary as MuiAccordionSummary,\n AccordionProps as MuiAccordionProps,\n} from \"@mui/material\";\nimport { ChevronDownIcon } from \"./icons.generated\";\nimport { Support } from \"./Typography\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport type AccordionProps = {\n /**\n * The content of the Accordion itself\n */\n children: ReactNode;\n /**\n * Defines IDs for the header and the content of the Accordion\n */\n id?: string;\n /**\n * The label text for the AccordionSummary\n */\n label: string;\n /**\n * If true, the Accordion item will have a shadow.\n */\n hasShadow?: boolean;\n /**\n * Whether the item is expanded by default\n */\n isDefaultExpanded?: boolean;\n /**\n * Whether the item is disabled\n */\n isDisabled?: boolean;\n /**\n * Whether the item is expanded\n */\n isExpanded?: boolean;\n /**\n * Event fired when the expansion state of the accordion is changed\n */\n onChange?: MuiAccordionProps[\"onChange\"];\n} & (\n | {\n isExpanded: boolean;\n isDefaultExpanded?: never;\n }\n | {\n isDefaultExpanded?: boolean;\n isExpanded?: never;\n }\n) &\n HtmlProps;\n\nconst Accordion = ({\n children,\n label,\n hasShadow = true,\n id: idOverride,\n isDefaultExpanded,\n isDisabled,\n isExpanded,\n onChange,\n translate,\n}: AccordionProps) => {\n const id = useUniqueId(idOverride);\n const headerId = `${id}-header`;\n const contentId = `${id}-content`;\n return (\n <MuiAccordion\n defaultExpanded={isDefaultExpanded}\n disabled={isDisabled}\n disableGutters\n expanded={isExpanded}\n onChange={onChange}\n className={hasShadow ? `hasShadow` : undefined}\n >\n <MuiAccordionSummary\n aria-controls={contentId}\n expandIcon={<ChevronDownIcon />}\n id={headerId}\n >\n <Support component=\"div\" translate={translate}>\n {label}\n </Support>\n </MuiAccordionSummary>\n <MuiAccordionDetails aria-labelledby={headerId}>\n {children}\n </MuiAccordionDetails>\n </MuiAccordion>\n );\n};\n\nconst MemoizedAccordion = memo(Accordion);\nMemoizedAccordion.displayName = \"Accordion\";\n\nexport { MemoizedAccordion as Accordion };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,IAAI,QAAQ,OAAO;AAAC,SAQ/BC,eAAe;AAAA,SACfC,OAAO;AAAA,SACPC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA+CpB,MAAMC,SAAS,GAAGC,IAAA,IAUI;EAAA,IAVH;IACjBC,QAAQ;IACRC,KAAK;IACLC,SAAS,GAAG,IAAI;IAChBC,EAAE,EAAEC,UAAU;IACdC,iBAAiB;IACjBC,UAAU;IACVC,UAAU;IACVC,QAAQ;IACRC;EACc,CAAC,GAAAV,IAAA;EACf,MAAMI,EAAE,GAAGV,WAAW,CAACW,UAAU,CAAC;EAClC,MAAMM,QAAQ,GAAI,GAAEP,EAAG,SAAQ;EAC/B,MAAMQ,SAAS,GAAI,GAAER,EAAG,UAAS;EACjC,OACEN,KAAA,CAAAe,UAAA;IACEC,eAAe,EAAER,iBAAkB;IACnCS,QAAQ,EAAER,UAAW;IACrBS,cAAc;IACdC,QAAQ,EAAET,UAAW;IACrBC,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAEf,SAAS,GAAI,WAAU,GAAGgB,SAAU;IAAAlB,QAAA,GAE/CL,IAAA,CAAAwB,iBAAA;MACE,iBAAeR,SAAU;MACzBS,UAAU,EAAEzB,IAAA,CAACJ,eAAe,IAAE,CAAE;MAChCY,EAAE,EAAEO,QAAS;MAAAV,QAAA,EAEbL,IAAA,CAACH,OAAO;QAAC6B,SAAS,EAAC,KAAK;QAACZ,SAAS,EAAEA,SAAU;QAAAT,QAAA,EAC3CC;MAAK,CACC;IAAC,CACS,CAAC,EACtBN,IAAA,CAAA2B,iBAAA;MAAqB,mBAAiBZ,QAAS;MAAAV,QAAA,EAC5CA;IAAQ,CACU,CAAC;EAAA,CACV,CAAC;AAEnB,CAAC;AAED,MAAMuB,iBAAiB,GAAGjC,IAAI,CAACQ,SAAS,CAAC;AACzCyB,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIzB,SAAS"}
1
+ {"version":3,"file":"Accordion.js","names":["memo","ChevronDownIcon","Support","useUniqueId","jsx","_jsx","jsxs","_jsxs","Accordion","children","label","hasShadow","id","idOverride","isDefaultExpanded","isDisabled","isExpanded","onChange","translate","headerId","contentId","_Accordion","defaultExpanded","disabled","disableGutters","expanded","className","undefined","_AccordionSummary","expandIcon","component","_AccordionDetails","MemoizedAccordion","displayName"],"sources":["../src/Accordion.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { ReactNode, memo } from \"react\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n Accordion as MuiAccordion,\n AccordionDetails as MuiAccordionDetails,\n AccordionSummary as MuiAccordionSummary,\n AccordionProps as MuiAccordionProps,\n} from \"@mui/material\";\nimport { ChevronDownIcon } from \"./icons.generated\";\nimport { Support } from \"./Typography\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport type AccordionProps = {\n /**\n * The content of the Accordion itself\n */\n children: ReactNode;\n /**\n * Defines IDs for the header and the content of the Accordion\n */\n id?: string;\n /**\n * The label text for the AccordionSummary\n */\n label: string;\n /**\n * If true, the Accordion item will have a shadow.\n */\n hasShadow?: boolean;\n /**\n * Whether the item is expanded by default\n */\n isDefaultExpanded?: boolean;\n /**\n * Whether the item is disabled\n */\n isDisabled?: boolean;\n /**\n * Whether the item is expanded\n */\n isExpanded?: boolean;\n /**\n * Event fired when the expansion state of the accordion is changed\n */\n onChange?: MuiAccordionProps[\"onChange\"];\n} & (\n | {\n isExpanded: boolean;\n isDefaultExpanded?: never;\n }\n | {\n isDefaultExpanded?: boolean;\n isExpanded?: never;\n }\n) &\n HtmlProps;\n\nconst Accordion = ({\n children,\n label,\n hasShadow = true,\n id: idOverride,\n isDefaultExpanded,\n isDisabled,\n isExpanded,\n onChange,\n translate,\n}: AccordionProps) => {\n const id = useUniqueId(idOverride);\n const headerId = `${id}-header`;\n const contentId = `${id}-content`;\n return (\n <MuiAccordion\n defaultExpanded={isDefaultExpanded}\n disabled={isDisabled}\n disableGutters\n expanded={isExpanded}\n onChange={onChange}\n className={hasShadow ? `hasShadow` : undefined}\n >\n <MuiAccordionSummary\n aria-controls={contentId}\n expandIcon={<ChevronDownIcon />}\n id={headerId}\n >\n <Support component=\"div\" translate={translate}>\n {label}\n </Support>\n </MuiAccordionSummary>\n <MuiAccordionDetails aria-labelledby={headerId}>\n {children}\n </MuiAccordionDetails>\n </MuiAccordion>\n );\n};\n\nconst MemoizedAccordion = memo(Accordion);\nMemoizedAccordion.displayName = \"Accordion\";\n\nexport { MemoizedAccordion as Accordion };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAoBA,IAAI,QAAQ,OAAO;AAAC,SAQ/BC,eAAe;AAAA,SACfC,OAAO;AAAA,SACPC,WAAW;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AA+CpB,MAAMC,SAAS,GAAGA,CAAC;EACjBC,QAAQ;EACRC,KAAK;EACLC,SAAS,GAAG,IAAI;EAChBC,EAAE,EAAEC,UAAU;EACdC,iBAAiB;EACjBC,UAAU;EACVC,UAAU;EACVC,QAAQ;EACRC;AACc,CAAC,KAAK;EACpB,MAAMN,EAAE,GAAGT,WAAW,CAACU,UAAU,CAAC;EAClC,MAAMM,QAAQ,GAAI,GAAEP,EAAG,SAAQ;EAC/B,MAAMQ,SAAS,GAAI,GAAER,EAAG,UAAS;EACjC,OACEL,KAAA,CAAAc,UAAA;IACEC,eAAe,EAAER,iBAAkB;IACnCS,QAAQ,EAAER,UAAW;IACrBS,cAAc;IACdC,QAAQ,EAAET,UAAW;IACrBC,QAAQ,EAAEA,QAAS;IACnBS,SAAS,EAAEf,SAAS,GAAI,WAAU,GAAGgB,SAAU;IAAAlB,QAAA,GAE/CJ,IAAA,CAAAuB,iBAAA;MACE,iBAAeR,SAAU;MACzBS,UAAU,EAAExB,IAAA,CAACJ,eAAe,IAAE,CAAE;MAChCW,EAAE,EAAEO,QAAS;MAAAV,QAAA,EAEbJ,IAAA,CAACH,OAAO;QAAC4B,SAAS,EAAC,KAAK;QAACZ,SAAS,EAAEA,SAAU;QAAAT,QAAA,EAC3CC;MAAK,CACC;IAAC,CACS,CAAC,EACtBL,IAAA,CAAA0B,iBAAA;MAAqB,mBAAiBZ,QAAS;MAAAV,QAAA,EAC5CA;IAAQ,CACU,CAAC;EAAA,CACV,CAAC;AAEnB,CAAC;AAED,MAAMuB,iBAAiB,GAAGhC,IAAI,CAACQ,SAAS,CAAC;AACzCwB,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIxB,SAAS"}
@@ -15,35 +15,34 @@ import { memo, useCallback, useMemo, useRef } from "react";
15
15
  import { Field } from "./Field.js";
16
16
  import { ComponentControlledState, useInputValues, getControlState } from "./inputUtils.js";
17
17
  import { jsx as _jsx } from "react/jsx-runtime";
18
- const Autocomplete = _ref => {
19
- let {
20
- ariaDescribedBy,
21
- defaultValue,
22
- errorMessage,
23
- errorMessageList,
24
- hasMultipleChoices,
25
- id: idOverride,
26
- inputValue,
27
- isCustomValueAllowed,
28
- isDisabled,
29
- isFullWidth = false,
30
- isLoading,
31
- isOptional = false,
32
- isReadOnly,
33
- hint,
34
- HintLinkComponent,
35
- label,
36
- name: nameOverride,
37
- onBlur,
38
- onChange: onChangeProp,
39
- onInputChange: onInputChangeProp,
40
- onFocus,
41
- options,
42
- value,
43
- getIsOptionEqualToValue,
44
- testId,
45
- translate
46
- } = _ref;
18
+ const Autocomplete = ({
19
+ ariaDescribedBy,
20
+ defaultValue,
21
+ errorMessage,
22
+ errorMessageList,
23
+ hasMultipleChoices,
24
+ id: idOverride,
25
+ inputValue,
26
+ isCustomValueAllowed,
27
+ isDisabled,
28
+ isFullWidth = false,
29
+ isLoading,
30
+ isOptional = false,
31
+ isReadOnly,
32
+ hint,
33
+ HintLinkComponent,
34
+ label,
35
+ name: nameOverride,
36
+ onBlur,
37
+ onChange: onChangeProp,
38
+ onInputChange: onInputChangeProp,
39
+ onFocus,
40
+ options,
41
+ value,
42
+ getIsOptionEqualToValue,
43
+ testId,
44
+ translate
45
+ }) => {
47
46
  const controlledStateRef = useRef(getControlState({
48
47
  controlledValue: value,
49
48
  uncontrolledValue: defaultValue
@@ -70,47 +69,41 @@ const Autocomplete = _ref => {
70
69
  }
71
70
  return undefined;
72
71
  }, [inputValue]);
73
- const renderInput = useCallback(_ref2 => {
74
- let {
75
- InputLabelProps,
76
- InputProps,
77
- ...params
78
- } = _ref2;
79
- return _jsx(Field, {
80
- ariaDescribedBy: ariaDescribedBy,
81
- errorMessage: errorMessage,
82
- errorMessageList: errorMessageList,
83
- fieldType: "single",
84
- hasVisibleLabel: true,
85
- id: InputLabelProps.htmlFor,
86
- hint: hint,
87
- HintLinkComponent: HintLinkComponent,
88
- label: label,
89
- isOptional: isOptional,
90
- renderFieldComponent: _ref3 => {
91
- let {
92
- ariaDescribedBy,
93
- id,
94
- errorMessageElementId,
95
- labelElementId
96
- } = _ref3;
97
- return _jsx(_InputBase, {
98
- ...params,
99
- ...InputProps,
100
- inputProps: {
101
- ...params.inputProps,
102
- "aria-errormessage": errorMessageElementId,
103
- "aria-labelledby": labelElementId,
104
- "data-se": testId
105
- },
106
- "aria-describedby": ariaDescribedBy,
107
- id: id,
108
- name: nameOverride ?? id,
109
- required: !isOptional
110
- });
111
- }
112
- });
113
- }, [ariaDescribedBy, errorMessage, errorMessageList, hint, HintLinkComponent, isOptional, label, nameOverride, testId]);
72
+ const renderInput = useCallback(({
73
+ InputLabelProps,
74
+ InputProps,
75
+ ...params
76
+ }) => _jsx(Field, {
77
+ ariaDescribedBy: ariaDescribedBy,
78
+ errorMessage: errorMessage,
79
+ errorMessageList: errorMessageList,
80
+ fieldType: "single",
81
+ hasVisibleLabel: true,
82
+ id: InputLabelProps.htmlFor,
83
+ hint: hint,
84
+ HintLinkComponent: HintLinkComponent,
85
+ label: label,
86
+ isOptional: isOptional,
87
+ renderFieldComponent: ({
88
+ ariaDescribedBy,
89
+ id,
90
+ errorMessageElementId,
91
+ labelElementId
92
+ }) => _jsx(_InputBase, {
93
+ ...params,
94
+ ...InputProps,
95
+ inputProps: {
96
+ ...params.inputProps,
97
+ "aria-errormessage": errorMessageElementId,
98
+ "aria-labelledby": labelElementId,
99
+ "data-se": testId
100
+ },
101
+ "aria-describedby": ariaDescribedBy,
102
+ id: id,
103
+ name: nameOverride ?? id,
104
+ required: !isOptional
105
+ })
106
+ }), [ariaDescribedBy, errorMessage, errorMessageList, hint, HintLinkComponent, isOptional, label, nameOverride, testId]);
114
107
  const onChange = useCallback((event, value, reason, details) => {
115
108
  onChangeProp?.(event, value, reason, details);
116
109
  }, [onChangeProp]);
@@ -1 +1 @@
1
- {"version":3,"file":"Autocomplete.js","names":["memo","useCallback","useMemo","useRef","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","Autocomplete","_ref","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","hint","HintLinkComponent","label","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","controlledStateRef","controlledValue","uncontrolledValue","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","_ref2","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","_ref3","errorMessageElementId","labelElementId","_InputBase","inputProps","required","event","reason","details","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n Autocomplete as MuiAutocomplete,\n AutocompleteProps as MuiAutocompleteProps,\n InputBase,\n UseAutocompleteProps,\n AutocompleteValue,\n} from \"@mui/material\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n ComponentControlledState,\n useInputValues,\n getControlState,\n} from \"./inputUtils\";\n\nexport type AutocompleteProps<\n OptionType,\n HasMultipleChoices extends boolean | undefined,\n IsCustomValueAllowed extends boolean | undefined\n> = {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"defaultValue\"];\n /**\n * Enables multiple choice selection\n */\n hasMultipleChoices?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"multiple\"];\n /**\n * The value for the input\n */\n inputValue?: UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"inputValue\"];\n /**\n * Allows the input of custom values\n */\n isCustomValueAllowed?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"freeSolo\"];\n /**\n * Disables the Autocomplete input\n */\n isDisabled?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"disabled\"];\n /**\n * Displays a loading indicator\n */\n isLoading?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"loading\"];\n /**\n * Makes the Autocomplete input read-only\n */\n isReadOnly?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"readOnly\"];\n /**\n * The label text for the autocomplete input\n */\n label: string;\n /**\n * Callback fired when the autocomplete loses focus.\n */\n onBlur?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onBlur\"];\n /**\n * Callback fired when a selection is made.\n */\n onChange?: UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onChange\"];\n /**\n * Callback fired when the textbox receives typed characters.\n */\n onInputChange?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onInputChange\"];\n /**\n * Callback fired when the autocomplete gains focus.\n */\n onFocus?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onFocus\"];\n /**\n * The options for the Autocomplete input\n */\n options: ReadonlyArray<OptionType>;\n /**\n * The value of the Autocomplete input\n */\n value?: UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"value\"];\n\n /**\n * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n * Both arguments need to be handled, an option can only match with one value.\n * option: the option to test\n * value: the value to test against\n *\n * You will need to implement this function if your `option` items are objects.\n */\n getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n} & Pick<\n FieldComponentProps,\n | \"ariaDescribedBy\"\n | \"errorMessage\"\n | \"errorMessageList\"\n | \"hint\"\n | \"HintLinkComponent\"\n | \"id\"\n | \"isFullWidth\"\n | \"isOptional\"\n | \"name\"\n> &\n HtmlProps;\n\nconst Autocomplete = <\n OptionType,\n HasMultipleChoices extends boolean | undefined,\n IsCustomValueAllowed extends boolean | undefined\n>({\n ariaDescribedBy,\n defaultValue,\n errorMessage,\n errorMessageList,\n hasMultipleChoices,\n id: idOverride,\n inputValue,\n isCustomValueAllowed,\n isDisabled,\n isFullWidth = false,\n isLoading,\n isOptional = false,\n isReadOnly,\n hint,\n HintLinkComponent,\n label,\n name: nameOverride,\n onBlur,\n onChange: onChangeProp,\n onInputChange: onInputChangeProp,\n onFocus,\n options,\n value,\n getIsOptionEqualToValue,\n testId,\n translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n const controlledStateRef = useRef(\n getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n );\n const defaultValueProp = useMemo<\n | AutocompleteValue<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >\n | undefined\n >(() => {\n if (hasMultipleChoices) {\n if (value === undefined) {\n return defaultValue;\n }\n return [] as AutocompleteValue<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >;\n }\n return value === undefined ? defaultValue : undefined;\n }, [defaultValue, hasMultipleChoices, value]);\n\n const valueProps = useInputValues({\n defaultValue: defaultValueProp,\n value: value,\n controlState: controlledStateRef.current,\n });\n\n const inputValueProp = useMemo(() => {\n if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n return { inputValue };\n }\n return undefined;\n }, [inputValue]);\n\n const renderInput = useCallback(\n ({ InputLabelProps, InputProps, ...params }) => (\n <Field\n ariaDescribedBy={ariaDescribedBy}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n fieldType=\"single\"\n hasVisibleLabel\n id={InputLabelProps.htmlFor}\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n label={label}\n isOptional={isOptional}\n renderFieldComponent={({\n ariaDescribedBy,\n id,\n errorMessageElementId,\n labelElementId,\n }) => (\n <InputBase\n {...params}\n {...InputProps}\n inputProps={{\n ...params.inputProps,\n \"aria-errormessage\": errorMessageElementId,\n \"aria-labelledby\": labelElementId,\n \"data-se\": testId,\n }}\n aria-describedby={ariaDescribedBy}\n id={id}\n name={nameOverride ?? id}\n required={!isOptional}\n />\n )}\n />\n ),\n [\n ariaDescribedBy,\n errorMessage,\n errorMessageList,\n hint,\n HintLinkComponent,\n isOptional,\n label,\n nameOverride,\n testId,\n ]\n );\n const onChange = useCallback<\n NonNullable<\n UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onChange\"]\n >\n >(\n (event, value, reason, details) => {\n onChangeProp?.(event, value, reason, details);\n },\n [onChangeProp]\n );\n\n const onInputChange = useCallback<\n NonNullable<\n UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onInputChange\"]\n >\n >(\n (event, value, reason) => {\n onInputChangeProp?.(event, value, reason);\n },\n [onInputChangeProp]\n );\n\n return (\n <MuiAutocomplete\n {...valueProps}\n {...inputValueProp}\n // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n aria-disabled={isDisabled}\n disableCloseOnSelect={hasMultipleChoices}\n disabled={isDisabled}\n freeSolo={isCustomValueAllowed}\n filterSelectedOptions={true}\n id={idOverride}\n fullWidth={isFullWidth}\n loading={isLoading}\n multiple={hasMultipleChoices}\n onBlur={onBlur}\n onChange={onChange}\n onInputChange={onInputChange}\n onFocus={onFocus}\n options={options}\n readOnly={isReadOnly}\n renderInput={renderInput}\n isOptionEqualToValue={getIsOptionEqualToValue}\n translate={translate}\n />\n );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":"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"}
1
+ {"version":3,"file":"Autocomplete.js","names":["memo","useCallback","useMemo","useRef","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","Autocomplete","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","hint","HintLinkComponent","label","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","controlledStateRef","controlledValue","uncontrolledValue","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","errorMessageElementId","labelElementId","_InputBase","inputProps","required","event","reason","details","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n Autocomplete as MuiAutocomplete,\n AutocompleteProps as MuiAutocompleteProps,\n InputBase,\n UseAutocompleteProps,\n AutocompleteValue,\n} from \"@mui/material\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n ComponentControlledState,\n useInputValues,\n getControlState,\n} from \"./inputUtils\";\n\nexport type AutocompleteProps<\n OptionType,\n HasMultipleChoices extends boolean | undefined,\n IsCustomValueAllowed extends boolean | undefined\n> = {\n /**\n * The default value. Use when the component is not controlled.\n */\n defaultValue?: UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"defaultValue\"];\n /**\n * Enables multiple choice selection\n */\n hasMultipleChoices?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"multiple\"];\n /**\n * The value for the input\n */\n inputValue?: UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"inputValue\"];\n /**\n * Allows the input of custom values\n */\n isCustomValueAllowed?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"freeSolo\"];\n /**\n * Disables the Autocomplete input\n */\n isDisabled?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"disabled\"];\n /**\n * Displays a loading indicator\n */\n isLoading?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"loading\"];\n /**\n * Makes the Autocomplete input read-only\n */\n isReadOnly?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"readOnly\"];\n /**\n * The label text for the autocomplete input\n */\n label: string;\n /**\n * Callback fired when the autocomplete loses focus.\n */\n onBlur?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onBlur\"];\n /**\n * Callback fired when a selection is made.\n */\n onChange?: UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onChange\"];\n /**\n * Callback fired when the textbox receives typed characters.\n */\n onInputChange?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onInputChange\"];\n /**\n * Callback fired when the autocomplete gains focus.\n */\n onFocus?: MuiAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onFocus\"];\n /**\n * The options for the Autocomplete input\n */\n options: ReadonlyArray<OptionType>;\n /**\n * The value of the Autocomplete input\n */\n value?: UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"value\"];\n\n /**\n * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n * Both arguments need to be handled, an option can only match with one value.\n * option: the option to test\n * value: the value to test against\n *\n * You will need to implement this function if your `option` items are objects.\n */\n getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n} & Pick<\n FieldComponentProps,\n | \"ariaDescribedBy\"\n | \"errorMessage\"\n | \"errorMessageList\"\n | \"hint\"\n | \"HintLinkComponent\"\n | \"id\"\n | \"isFullWidth\"\n | \"isOptional\"\n | \"name\"\n> &\n HtmlProps;\n\nconst Autocomplete = <\n OptionType,\n HasMultipleChoices extends boolean | undefined,\n IsCustomValueAllowed extends boolean | undefined\n>({\n ariaDescribedBy,\n defaultValue,\n errorMessage,\n errorMessageList,\n hasMultipleChoices,\n id: idOverride,\n inputValue,\n isCustomValueAllowed,\n isDisabled,\n isFullWidth = false,\n isLoading,\n isOptional = false,\n isReadOnly,\n hint,\n HintLinkComponent,\n label,\n name: nameOverride,\n onBlur,\n onChange: onChangeProp,\n onInputChange: onInputChangeProp,\n onFocus,\n options,\n value,\n getIsOptionEqualToValue,\n testId,\n translate,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n const controlledStateRef = useRef(\n getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n );\n const defaultValueProp = useMemo<\n | AutocompleteValue<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >\n | undefined\n >(() => {\n if (hasMultipleChoices) {\n if (value === undefined) {\n return defaultValue;\n }\n return [] as AutocompleteValue<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >;\n }\n return value === undefined ? defaultValue : undefined;\n }, [defaultValue, hasMultipleChoices, value]);\n\n const valueProps = useInputValues({\n defaultValue: defaultValueProp,\n value: value,\n controlState: controlledStateRef.current,\n });\n\n const inputValueProp = useMemo(() => {\n if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n return { inputValue };\n }\n return undefined;\n }, [inputValue]);\n\n const renderInput = useCallback(\n ({ InputLabelProps, InputProps, ...params }) => (\n <Field\n ariaDescribedBy={ariaDescribedBy}\n errorMessage={errorMessage}\n errorMessageList={errorMessageList}\n fieldType=\"single\"\n hasVisibleLabel\n id={InputLabelProps.htmlFor}\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n label={label}\n isOptional={isOptional}\n renderFieldComponent={({\n ariaDescribedBy,\n id,\n errorMessageElementId,\n labelElementId,\n }) => (\n <InputBase\n {...params}\n {...InputProps}\n inputProps={{\n ...params.inputProps,\n \"aria-errormessage\": errorMessageElementId,\n \"aria-labelledby\": labelElementId,\n \"data-se\": testId,\n }}\n aria-describedby={ariaDescribedBy}\n id={id}\n name={nameOverride ?? id}\n required={!isOptional}\n />\n )}\n />\n ),\n [\n ariaDescribedBy,\n errorMessage,\n errorMessageList,\n hint,\n HintLinkComponent,\n isOptional,\n label,\n nameOverride,\n testId,\n ]\n );\n const onChange = useCallback<\n NonNullable<\n UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onChange\"]\n >\n >(\n (event, value, reason, details) => {\n onChangeProp?.(event, value, reason, details);\n },\n [onChangeProp]\n );\n\n const onInputChange = useCallback<\n NonNullable<\n UseAutocompleteProps<\n OptionType,\n HasMultipleChoices,\n undefined,\n IsCustomValueAllowed\n >[\"onInputChange\"]\n >\n >(\n (event, value, reason) => {\n onInputChangeProp?.(event, value, reason);\n },\n [onInputChangeProp]\n );\n\n return (\n <MuiAutocomplete\n {...valueProps}\n {...inputValueProp}\n // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n aria-disabled={isDisabled}\n disableCloseOnSelect={hasMultipleChoices}\n disabled={isDisabled}\n freeSolo={isCustomValueAllowed}\n filterSelectedOptions={true}\n id={idOverride}\n fullWidth={isFullWidth}\n loading={isLoading}\n multiple={hasMultipleChoices}\n onBlur={onBlur}\n onChange={onChange}\n onInputChange={onInputChange}\n onFocus={onFocus}\n options={options}\n readOnly={isReadOnly}\n renderInput={renderInput}\n isOptionEqualToValue={getIsOptionEqualToValue}\n translate={translate}\n />\n );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":"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"}
package/dist/Badge.js CHANGED
@@ -29,14 +29,13 @@ const badgeTypeColors = odysseyTokens => ({
29
29
  font: odysseyTokens.TypographyColorInverse
30
30
  }
31
31
  });
32
- const Badge = _ref => {
33
- let {
34
- badgeContent,
35
- badgeContentMax = 100,
36
- testId,
37
- translate,
38
- type = "default"
39
- } = _ref;
32
+ const Badge = ({
33
+ badgeContent,
34
+ badgeContentMax = 100,
35
+ testId,
36
+ translate,
37
+ type = "default"
38
+ }) => {
40
39
  const odysseyDesignTokens = useOdysseyDesignTokens();
41
40
  const renderBadge = useMemo(() => {
42
41
  const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;
package/dist/Badge.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Badge.js","names":["memo","useMemo","useOdysseyDesignTokens","Box","jsx","_jsx","badgeTypeValues","badgeTypeColors","odysseyTokens","default","background","HueNeutral200","font","TypographyColorBody","attention","PalettePrimaryMain","TypographyColorInverse","danger","PaletteDangerMain","Badge","_ref","badgeContent","badgeContentMax","testId","translate","type","odysseyDesignTokens","renderBadge","greaterThanZeroContentMax","threeDigitLimitedMax","isOverContentMax","overContentMaxMessage","formattedContent","toString","badgeStyles","display","alignItems","justifyContent","minWidth","Spacing4","Spacing1","height","minHeight","padding","backgroundColor","color","borderRadius","length","BorderRadiusOuter","fontSize","TypographyScale0","fontFamily","TypographyFamilyMono","fontWeight","TypographyWeightBodyBold","lineHeight","transitionDuration","TransitionDurationMain","transitionProperty","hasNotificationCount","sx","children","MemoizedBadge","displayName"],"sources":["../src/Badge.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { CSSProperties, memo, useMemo } from \"react\";\n\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Box } from \"./Box\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type BadgeContentMax = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;\n\nexport const badgeTypeValues = [\"default\", \"attention\", \"danger\"] as const;\n\nexport type BadgeProps = {\n badgeContent: number;\n badgeContentMax?: BadgeContentMax;\n type?: (typeof badgeTypeValues)[number];\n} & HtmlProps;\n\nconst badgeTypeColors = (odysseyTokens: DesignTokens) => ({\n default: {\n background: odysseyTokens.HueNeutral200,\n font: odysseyTokens.TypographyColorBody,\n },\n attention: {\n background: odysseyTokens.PalettePrimaryMain,\n font: odysseyTokens.TypographyColorInverse,\n },\n danger: {\n background: odysseyTokens.PaletteDangerMain,\n font: odysseyTokens.TypographyColorInverse,\n },\n});\n\nconst Badge = ({\n badgeContent,\n badgeContentMax = 100,\n testId,\n translate,\n type = \"default\",\n}: BadgeProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const renderBadge = useMemo(() => {\n const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;\n const threeDigitLimitedMax =\n greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;\n const isOverContentMax = badgeContent > threeDigitLimitedMax;\n const overContentMaxMessage = `${greaterThanZeroContentMax}+`;\n const formattedContent = isOverContentMax\n ? overContentMaxMessage\n : badgeContent.toString();\n\n const badgeStyles: CSSProperties = {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n // 6px horizontal padding per design requirements\n padding: \"0 6px\",\n backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,\n color: badgeTypeColors(odysseyDesignTokens)[type].font,\n borderRadius:\n formattedContent.length > 1\n ? `${odysseyDesignTokens.BorderRadiusOuter}`\n : \"50%\",\n fontSize: `${odysseyDesignTokens.TypographyScale0}`,\n fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,\n fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,\n lineHeight: 1,\n transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,\n transitionProperty: `background-color, color`,\n };\n\n const hasNotificationCount = badgeContent && badgeContent > 0;\n\n return hasNotificationCount ? (\n <Box sx={badgeStyles} data-se={testId} translate={translate}>\n {formattedContent}\n </Box>\n ) : null;\n }, [\n badgeContent,\n badgeContentMax,\n odysseyDesignTokens,\n testId,\n translate,\n type,\n ]);\n\n return renderBadge;\n};\n\nconst MemoizedBadge = memo(Badge);\nMemoizedBadge.displayName = \"Badge\";\n\nexport { MemoizedBadge as Badge };\n"],"mappings":"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"}
1
+ {"version":3,"file":"Badge.js","names":["memo","useMemo","useOdysseyDesignTokens","Box","jsx","_jsx","badgeTypeValues","badgeTypeColors","odysseyTokens","default","background","HueNeutral200","font","TypographyColorBody","attention","PalettePrimaryMain","TypographyColorInverse","danger","PaletteDangerMain","Badge","badgeContent","badgeContentMax","testId","translate","type","odysseyDesignTokens","renderBadge","greaterThanZeroContentMax","threeDigitLimitedMax","isOverContentMax","overContentMaxMessage","formattedContent","toString","badgeStyles","display","alignItems","justifyContent","minWidth","Spacing4","Spacing1","height","minHeight","padding","backgroundColor","color","borderRadius","length","BorderRadiusOuter","fontSize","TypographyScale0","fontFamily","TypographyFamilyMono","fontWeight","TypographyWeightBodyBold","lineHeight","transitionDuration","TransitionDurationMain","transitionProperty","hasNotificationCount","sx","children","MemoizedBadge","displayName"],"sources":["../src/Badge.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { CSSProperties, memo, useMemo } from \"react\";\n\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\nimport { Box } from \"./Box\";\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type BadgeContentMax = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | 100;\n\nexport const badgeTypeValues = [\"default\", \"attention\", \"danger\"] as const;\n\nexport type BadgeProps = {\n badgeContent: number;\n badgeContentMax?: BadgeContentMax;\n type?: (typeof badgeTypeValues)[number];\n} & HtmlProps;\n\nconst badgeTypeColors = (odysseyTokens: DesignTokens) => ({\n default: {\n background: odysseyTokens.HueNeutral200,\n font: odysseyTokens.TypographyColorBody,\n },\n attention: {\n background: odysseyTokens.PalettePrimaryMain,\n font: odysseyTokens.TypographyColorInverse,\n },\n danger: {\n background: odysseyTokens.PaletteDangerMain,\n font: odysseyTokens.TypographyColorInverse,\n },\n});\n\nconst Badge = ({\n badgeContent,\n badgeContentMax = 100,\n testId,\n translate,\n type = \"default\",\n}: BadgeProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const renderBadge = useMemo(() => {\n const greaterThanZeroContentMax = badgeContentMax > 0 ? badgeContentMax : 1;\n const threeDigitLimitedMax =\n greaterThanZeroContentMax > 999 ? 999 : greaterThanZeroContentMax;\n const isOverContentMax = badgeContent > threeDigitLimitedMax;\n const overContentMaxMessage = `${greaterThanZeroContentMax}+`;\n const formattedContent = isOverContentMax\n ? overContentMaxMessage\n : badgeContent.toString();\n\n const badgeStyles: CSSProperties = {\n display: \"inline-flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n minWidth: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n height: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n minHeight: `calc(${odysseyDesignTokens.Spacing4} + ${odysseyDesignTokens.Spacing1})`,\n // 6px horizontal padding per design requirements\n padding: \"0 6px\",\n backgroundColor: badgeTypeColors(odysseyDesignTokens)[type].background,\n color: badgeTypeColors(odysseyDesignTokens)[type].font,\n borderRadius:\n formattedContent.length > 1\n ? `${odysseyDesignTokens.BorderRadiusOuter}`\n : \"50%\",\n fontSize: `${odysseyDesignTokens.TypographyScale0}`,\n fontFamily: `${odysseyDesignTokens.TypographyFamilyMono}`,\n fontWeight: `${odysseyDesignTokens.TypographyWeightBodyBold}`,\n lineHeight: 1,\n transitionDuration: `${odysseyDesignTokens.TransitionDurationMain}`,\n transitionProperty: `background-color, color`,\n };\n\n const hasNotificationCount = badgeContent && badgeContent > 0;\n\n return hasNotificationCount ? (\n <Box sx={badgeStyles} data-se={testId} translate={translate}>\n {formattedContent}\n </Box>\n ) : null;\n }, [\n badgeContent,\n badgeContentMax,\n odysseyDesignTokens,\n testId,\n translate,\n type,\n ]);\n\n return renderBadge;\n};\n\nconst MemoizedBadge = memo(Badge);\nMemoizedBadge.displayName = \"Badge\";\n\nexport { MemoizedBadge as Badge };\n"],"mappings":"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"}
package/dist/Banner.js CHANGED
@@ -19,17 +19,16 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
19
19
  import { jsx as _jsx } from "react/jsx-runtime";
20
20
  export const bannerRoleValues = ["status", "alert"];
21
21
  export const bannerSeverityValues = ["success", "info", "warning", "error"];
22
- const Banner = _ref => {
23
- let {
24
- linkUrl,
25
- linkText,
26
- onClose,
27
- role,
28
- severity,
29
- text,
30
- testId,
31
- translate
32
- } = _ref;
22
+ const Banner = ({
23
+ linkUrl,
24
+ linkText,
25
+ onClose,
26
+ role,
27
+ severity,
28
+ text,
29
+ testId,
30
+ translate
31
+ }) => {
33
32
  const {
34
33
  t
35
34
  } = useTranslation();
@@ -1 +1 @@
1
- {"version":3,"file":"Banner.js","names":["Link","ScreenReaderText","memo","useTranslation","jsxs","_jsxs","jsx","_jsx","bannerRoleValues","bannerSeverityValues","Banner","_ref","linkUrl","linkText","onClose","role","severity","text","testId","translate","t","_Alert","variant","children","_AlertTitle","href","MemoizedBanner","displayName"],"sources":["../src/Banner.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Alert, AlertColor, AlertTitle, AlertProps } from \"@mui/material\";\nimport { Link } from \"./Link\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport const bannerRoleValues = [\"status\", \"alert\"] as const;\nexport const bannerSeverityValues: AlertColor[] = [\n \"success\",\n \"info\",\n \"warning\",\n \"error\",\n];\n\nexport type BannerProps = {\n /**\n * If linkUrl is not undefined, this is the text of the link.\n * If left blank, it defaults to \"Learn more\".\n * Note that linkText does nothing if linkUrl is not defined\n */\n linkText?: string;\n /**\n * If defined, the alert will include a link to the URL\n */\n linkUrl?: string;\n /**\n * The function that's fired when the user clicks the close button. If undefined,\n * the close button will not be shown.\n */\n onClose?: AlertProps[\"onClose\"];\n /**\n * Sets the ARIA role of the alert\n * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n * unchanging)\n */\n role?: (typeof bannerRoleValues)[number];\n /**\n * Determine the color and icon of the alert\n */\n severity: (typeof bannerSeverityValues)[number];\n /**\n * The text content of the alert\n */\n text: string;\n} & HtmlProps;\n\nconst Banner = ({\n linkUrl,\n linkText,\n onClose,\n role,\n severity,\n text,\n testId,\n translate,\n}: BannerProps) => {\n const { t } = useTranslation();\n\n return (\n <Alert\n data-se={testId}\n onClose={onClose}\n role={role}\n severity={severity}\n variant=\"banner\"\n >\n <ScreenReaderText translate={translate}>\n {t(`severity.${severity}`)}:\n </ScreenReaderText>\n <AlertTitle translate={translate}>{text}</AlertTitle>\n {linkUrl && (\n <Link href={linkUrl} variant=\"monochrome\" translate={translate}>\n {linkText}\n </Link>\n )}\n </Alert>\n );\n};\n\nconst MemoizedBanner = memo(Banner);\nMemoizedBanner.displayName = \"Banner\";\n\nexport { MemoizedBanner as Banner };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAaSA,IAAI;AAAA,SACJC,gBAAgB;AACzB,SAASC,IAAI,QAAQ,OAAO;AAC5B,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI/C,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC5D,OAAO,MAAMC,oBAAkC,GAAG,CAChD,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACR;AAkCD,MAAMC,MAAM,GAAGC,IAAA,IASI;EAAA,IATH;IACdC,OAAO;IACPC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,QAAQ;IACRC,IAAI;IACJC,MAAM;IACNC;EACW,CAAC,GAAAR,IAAA;EACZ,MAAM;IAAES;EAAE,CAAC,GAAGjB,cAAc,CAAC,CAAC;EAE9B,OACEE,KAAA,CAAAgB,MAAA;IACE,WAASH,MAAO;IAChBJ,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBM,OAAO,EAAC,QAAQ;IAAAC,QAAA,GAEhBlB,KAAA,CAACJ,gBAAgB;MAACkB,SAAS,EAAEA,SAAU;MAAAI,QAAA,GACpCH,CAAC,CAAE,YAAWJ,QAAS,EAAC,CAAC,EAAC,GAC7B;IAAA,CAAkB,CAAC,EACnBT,IAAA,CAAAiB,WAAA;MAAYL,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAAEN;IAAI,CAAa,CAAC,EACpDL,OAAO,IACNL,IAAA,CAACP,IAAI;MAACyB,IAAI,EAAEb,OAAQ;MAACU,OAAO,EAAC,YAAY;MAACH,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAC5DV;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMa,cAAc,GAAGxB,IAAI,CAACQ,MAAM,CAAC;AACnCgB,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIhB,MAAM"}
1
+ {"version":3,"file":"Banner.js","names":["Link","ScreenReaderText","memo","useTranslation","jsxs","_jsxs","jsx","_jsx","bannerRoleValues","bannerSeverityValues","Banner","linkUrl","linkText","onClose","role","severity","text","testId","translate","t","_Alert","variant","children","_AlertTitle","href","MemoizedBanner","displayName"],"sources":["../src/Banner.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Alert, AlertColor, AlertTitle, AlertProps } from \"@mui/material\";\nimport { Link } from \"./Link\";\nimport { ScreenReaderText } from \"./ScreenReaderText\";\nimport { memo } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport const bannerRoleValues = [\"status\", \"alert\"] as const;\nexport const bannerSeverityValues: AlertColor[] = [\n \"success\",\n \"info\",\n \"warning\",\n \"error\",\n];\n\nexport type BannerProps = {\n /**\n * If linkUrl is not undefined, this is the text of the link.\n * If left blank, it defaults to \"Learn more\".\n * Note that linkText does nothing if linkUrl is not defined\n */\n linkText?: string;\n /**\n * If defined, the alert will include a link to the URL\n */\n linkUrl?: string;\n /**\n * The function that's fired when the user clicks the close button. If undefined,\n * the close button will not be shown.\n */\n onClose?: AlertProps[\"onClose\"];\n /**\n * Sets the ARIA role of the alert\n * (\"status\" for something that dynamically updates, \"alert\" for errors, null for something\n * unchanging)\n */\n role?: (typeof bannerRoleValues)[number];\n /**\n * Determine the color and icon of the alert\n */\n severity: (typeof bannerSeverityValues)[number];\n /**\n * The text content of the alert\n */\n text: string;\n} & HtmlProps;\n\nconst Banner = ({\n linkUrl,\n linkText,\n onClose,\n role,\n severity,\n text,\n testId,\n translate,\n}: BannerProps) => {\n const { t } = useTranslation();\n\n return (\n <Alert\n data-se={testId}\n onClose={onClose}\n role={role}\n severity={severity}\n variant=\"banner\"\n >\n <ScreenReaderText translate={translate}>\n {t(`severity.${severity}`)}:\n </ScreenReaderText>\n <AlertTitle translate={translate}>{text}</AlertTitle>\n {linkUrl && (\n <Link href={linkUrl} variant=\"monochrome\" translate={translate}>\n {linkText}\n </Link>\n )}\n </Alert>\n );\n};\n\nconst MemoizedBanner = memo(Banner);\nMemoizedBanner.displayName = \"Banner\";\n\nexport { MemoizedBanner as Banner };\n"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA,SAaSA,IAAI;AAAA,SACJC,gBAAgB;AACzB,SAASC,IAAI,QAAQ,OAAO;AAC5B,SAASC,cAAc,QAAQ,eAAe;AAAC,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAI/C,OAAO,MAAMC,gBAAgB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAU;AAC5D,OAAO,MAAMC,oBAAkC,GAAG,CAChD,SAAS,EACT,MAAM,EACN,SAAS,EACT,OAAO,CACR;AAkCD,MAAMC,MAAM,GAAGA,CAAC;EACdC,OAAO;EACPC,QAAQ;EACRC,OAAO;EACPC,IAAI;EACJC,QAAQ;EACRC,IAAI;EACJC,MAAM;EACNC;AACW,CAAC,KAAK;EACjB,MAAM;IAAEC;EAAE,CAAC,GAAGhB,cAAc,CAAC,CAAC;EAE9B,OACEE,KAAA,CAAAe,MAAA;IACE,WAASH,MAAO;IAChBJ,OAAO,EAAEA,OAAQ;IACjBC,IAAI,EAAEA,IAAK;IACXC,QAAQ,EAAEA,QAAS;IACnBM,OAAO,EAAC,QAAQ;IAAAC,QAAA,GAEhBjB,KAAA,CAACJ,gBAAgB;MAACiB,SAAS,EAAEA,SAAU;MAAAI,QAAA,GACpCH,CAAC,CAAE,YAAWJ,QAAS,EAAC,CAAC,EAAC,GAC7B;IAAA,CAAkB,CAAC,EACnBR,IAAA,CAAAgB,WAAA;MAAYL,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAAEN;IAAI,CAAa,CAAC,EACpDL,OAAO,IACNJ,IAAA,CAACP,IAAI;MAACwB,IAAI,EAAEb,OAAQ;MAACU,OAAO,EAAC,YAAY;MAACH,SAAS,EAAEA,SAAU;MAAAI,QAAA,EAC5DV;IAAQ,CACL,CACP;EAAA,CACI,CAAC;AAEZ,CAAC;AAED,MAAMa,cAAc,GAAGvB,IAAI,CAACQ,MAAM,CAAC;AACnCe,cAAc,CAACC,WAAW,GAAG,QAAQ;AAErC,SAASD,cAAc,IAAIf,MAAM"}
package/dist/Box.js CHANGED
@@ -12,25 +12,22 @@ import _Box from "@mui/material/Box";
12
12
  */
13
13
  import { forwardRef, memo } from "react";
14
14
  import { jsx as _jsx } from "react/jsx-runtime";
15
- const Box = forwardRef((_ref, ref) => {
16
- let {
17
- children,
18
- component,
19
- id,
20
- sx,
21
- testId,
22
- translate
23
- } = _ref;
24
- return _jsx(_Box, {
25
- ref: ref,
26
- children: children,
27
- component: component,
28
- "data-se": testId,
29
- id: id,
30
- sx: sx,
31
- translate: translate
32
- });
33
- });
15
+ const Box = forwardRef(({
16
+ children,
17
+ component,
18
+ id,
19
+ sx,
20
+ testId,
21
+ translate
22
+ }, ref) => _jsx(_Box, {
23
+ ref: ref,
24
+ children: children,
25
+ component: component,
26
+ "data-se": testId,
27
+ id: id,
28
+ sx: sx,
29
+ translate: translate
30
+ }));
34
31
  const MemoizedBox = memo(Box);
35
32
  MemoizedBox.displayName = "Box";
36
33
  export { MemoizedBox as Box };
package/dist/Box.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Box.js","names":["forwardRef","memo","jsx","_jsx","Box","_ref","ref","children","component","id","sx","testId","translate","_Box","MemoizedBox","displayName"],"sources":["../src/Box.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Box as MuiBox, BoxProps as MuiBoxProps } from \"@mui/material\";\nimport { ReactNode, forwardRef, memo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type BoxProps = {\n children?: ReactNode;\n component?: MuiBoxProps[\"component\"];\n id?: MuiBoxProps[\"id\"];\n sx?: MuiBoxProps[\"sx\"];\n} & HtmlProps;\n\nconst Box = forwardRef<HTMLElement, BoxProps>(\n ({ children, component, id, sx, testId, translate }, ref) => (\n <MuiBox\n ref={ref}\n children={children}\n component={component}\n data-se={testId}\n id={id}\n sx={sx}\n translate={translate}\n />\n )\n);\n\nconst MemoizedBox = memo(Box);\nMemoizedBox.displayName = \"Box\";\n\nexport { MemoizedBox as Box };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAAoBA,UAAU,EAAEC,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAWpD,MAAMC,GAAG,GAAGJ,UAAU,CACpB,CAAAK,IAAA,EAAqDC,GAAG;EAAA,IAAvD;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,EAAE;IAAEC,EAAE;IAAEC,MAAM;IAAEC;EAAU,CAAC,GAAAP,IAAA;EAAA,OACjDF,IAAA,CAAAU,IAAA;IACEP,GAAG,EAAEA,GAAI;IACTC,QAAQ,EAAEA,QAAS;IACnBC,SAAS,EAAEA,SAAU;IACrB,WAASG,MAAO;IAChBF,EAAE,EAAEA,EAAG;IACPC,EAAE,EAAEA,EAAG;IACPE,SAAS,EAAEA;EAAU,CACtB,CAAC;AAAA,CAEN,CAAC;AAED,MAAME,WAAW,GAAGb,IAAI,CAACG,GAAG,CAAC;AAC7BU,WAAW,CAACC,WAAW,GAAG,KAAK;AAE/B,SAASD,WAAW,IAAIV,GAAG"}
1
+ {"version":3,"file":"Box.js","names":["forwardRef","memo","jsx","_jsx","Box","children","component","id","sx","testId","translate","ref","_Box","MemoizedBox","displayName"],"sources":["../src/Box.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { Box as MuiBox, BoxProps as MuiBoxProps } from \"@mui/material\";\nimport { ReactNode, forwardRef, memo } from \"react\";\n\nimport type { HtmlProps } from \"./HtmlProps\";\n\nexport type BoxProps = {\n children?: ReactNode;\n component?: MuiBoxProps[\"component\"];\n id?: MuiBoxProps[\"id\"];\n sx?: MuiBoxProps[\"sx\"];\n} & HtmlProps;\n\nconst Box = forwardRef<HTMLElement, BoxProps>(\n ({ children, component, id, sx, testId, translate }, ref) => (\n <MuiBox\n ref={ref}\n children={children}\n component={component}\n data-se={testId}\n id={id}\n sx={sx}\n translate={translate}\n />\n )\n);\n\nconst MemoizedBox = memo(Box);\nMemoizedBox.displayName = \"Box\";\n\nexport { MemoizedBox as Box };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAAoBA,UAAU,EAAEC,IAAI,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAWpD,MAAMC,GAAG,GAAGJ,UAAU,CACpB,CAAC;EAAEK,QAAQ;EAAEC,SAAS;EAAEC,EAAE;EAAEC,EAAE;EAAEC,MAAM;EAAEC;AAAU,CAAC,EAAEC,GAAG,KACtDR,IAAA,CAAAS,IAAA;EACED,GAAG,EAAEA,GAAI;EACTN,QAAQ,EAAEA,QAAS;EACnBC,SAAS,EAAEA,SAAU;EACrB,WAASG,MAAO;EAChBF,EAAE,EAAEA,EAAG;EACPC,EAAE,EAAEA,EAAG;EACPE,SAAS,EAAEA;AAAU,CACtB,CAEL,CAAC;AAED,MAAMG,WAAW,GAAGZ,IAAI,CAACG,GAAG,CAAC;AAC7BS,WAAW,CAACC,WAAW,GAAG,KAAK;AAE/B,SAASD,WAAW,IAAIT,GAAG"}
@@ -23,12 +23,11 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
23
23
  export const BreadcrumbContext = createContext({
24
24
  breadcrumbType: "listItem"
25
25
  });
26
- export const Breadcrumb = _ref => {
27
- let {
28
- children,
29
- href,
30
- iconName
31
- } = _ref;
26
+ export const Breadcrumb = ({
27
+ children,
28
+ href,
29
+ iconName
30
+ }) => {
32
31
  const {
33
32
  breadcrumbType
34
33
  } = useContext(BreadcrumbContext);
@@ -64,14 +63,13 @@ const breadcrumbProviderValue = {
64
63
  }
65
64
  };
66
65
  const defaultTruncationValue = 5;
67
- const BreadcrumbList = _ref2 => {
68
- let {
69
- children,
70
- homeHref,
71
- maxVisibleItems = defaultTruncationValue,
72
- testId,
73
- translate
74
- } = _ref2;
66
+ const BreadcrumbList = ({
67
+ children,
68
+ homeHref,
69
+ maxVisibleItems = defaultTruncationValue,
70
+ testId,
71
+ translate
72
+ }) => {
75
73
  const {
76
74
  t
77
75
  } = useTranslation();
@@ -1 +1 @@
1
- {"version":3,"file":"Breadcrumbs.js","names":["createContext","memo","useCallback","useContext","useMemo","useState","GroupIcon","HomeIcon","UserIcon","Subordinate","useTranslation","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BreadcrumbContext","breadcrumbType","Breadcrumb","_ref","children","href","iconName","breadcrumbContent","_MenuItem","color","_ButtonBase","breadcrumbProviderValue","currentPage","listItem","menuItem","defaultTruncationValue","BreadcrumbList","_ref2","homeHref","maxVisibleItems","testId","translate","t","anchorEl","setAnchorEl","breadcrumbSections","length","beforeMenu","insideMenu","remainingBreadcrumbs","menuStart","Math","floor","menuLength","slice","onMenuButtonClick","event","currentTarget","onCloseMenu","_Breadcrumbs","maxItems","map","breadcrumb","Provider","value","onClick","_Menu","open","Boolean","onClose","anchorOrigin","horizontal","vertical","MenuListProps","sx","minWidth","i","MemoizedBreadcrumbList","displayName"],"sources":["../src/Breadcrumbs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n ButtonBase,\n Menu,\n MenuItem,\n Breadcrumbs as MuiBreadcrumbs,\n} from \"@mui/material\";\nimport {\n MouseEventHandler,\n ReactElement,\n createContext,\n memo,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from \"react\";\nimport { GroupIcon, HomeIcon, UserIcon } from \"./icons.generated\";\nimport { Subordinate } from \"./Typography\";\nimport { useTranslation } from \"react-i18next\";\nimport { HtmlProps } from \"./HtmlProps\";\n\nexport type BreadcrumbType = \"listItem\" | \"menuItem\" | \"currentPage\";\n\nexport type BreadcrumbProps = {\n children?: string;\n href: string;\n iconName?: \"user\" | \"group\";\n};\n\nexport type BreadcrumbsProps = {\n children: ReactElement<typeof Breadcrumb>[];\n homeHref?: string;\n maxVisibleItems?: number;\n} & HtmlProps;\n\nexport type BreadcrumbContextType = {\n breadcrumbType: BreadcrumbType;\n};\n\nexport const BreadcrumbContext = createContext<BreadcrumbContextType>({\n breadcrumbType: \"listItem\",\n});\n\nexport const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {\n const { breadcrumbType } = useContext(BreadcrumbContext);\n\n const breadcrumbContent = (\n <>\n {iconName === \"group\" ? (\n <GroupIcon />\n ) : iconName === \"user\" ? (\n <UserIcon />\n ) : null}\n {children}\n </>\n );\n\n if (breadcrumbType === \"menuItem\") {\n return <MenuItem href={href}>{breadcrumbContent}</MenuItem>;\n }\n\n if (breadcrumbType === \"currentPage\") {\n return <Subordinate color=\"textPrimary\">{breadcrumbContent}</Subordinate>;\n }\n\n // breadcrumbType === \"listItem\" is the default\n // Provided here without a conditional to get TS to be quiet\n // about potential undefined returns\n return <ButtonBase href={href}>{breadcrumbContent}</ButtonBase>;\n};\n\nconst breadcrumbProviderValue: Record<\n BreadcrumbType,\n { breadcrumbType: BreadcrumbType }\n> = {\n currentPage: {\n breadcrumbType: \"currentPage\",\n },\n listItem: {\n breadcrumbType: \"listItem\",\n },\n menuItem: {\n breadcrumbType: \"menuItem\",\n },\n};\n\nconst defaultTruncationValue = 5;\n\nconst BreadcrumbList = ({\n children,\n homeHref,\n maxVisibleItems = defaultTruncationValue,\n testId,\n translate,\n}: BreadcrumbsProps) => {\n const { t } = useTranslation();\n\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n const breadcrumbSections = useMemo(() => {\n if (children.length <= maxVisibleItems) {\n return {\n beforeMenu: [],\n insideMenu: [],\n remainingBreadcrumbs: children,\n };\n } else {\n const menuStart = Math.floor(maxVisibleItems / 2);\n const menuLength = children.length - maxVisibleItems;\n\n return {\n beforeMenu: children.slice(0, menuStart),\n insideMenu: children.slice(menuStart, menuStart + menuLength),\n remainingBreadcrumbs: children.slice(menuStart + menuLength),\n };\n }\n }, [children, maxVisibleItems]);\n\n const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n (event) => setAnchorEl(event.currentTarget),\n []\n );\n const onCloseMenu = useCallback(() => {\n setAnchorEl(null);\n }, []);\n\n return (\n <MuiBreadcrumbs\n maxItems={children.length + 1}\n aria-label={t(\"breadcrumbs.label.text\")}\n data-se={testId}\n translate={translate}\n >\n {homeHref && (\n <ButtonBase href={homeHref} aria-label={t(\"breadcrumbs.home.text\")}>\n <HomeIcon />\n </ButtonBase>\n )}\n\n {breadcrumbSections.beforeMenu.map((breadcrumb) => (\n <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n {breadcrumb}\n </BreadcrumbContext.Provider>\n ))}\n\n {breadcrumbSections.insideMenu && (\n <>\n <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>\n <Menu\n open={Boolean(anchorEl)}\n onClose={onCloseMenu}\n anchorEl={anchorEl}\n anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n MenuListProps={{\n sx: {\n minWidth: 180,\n },\n }}\n >\n <BreadcrumbContext.Provider\n value={breadcrumbProviderValue.menuItem}\n >\n {breadcrumbSections.insideMenu}\n </BreadcrumbContext.Provider>\n </Menu>\n </>\n )}\n\n {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {\n if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {\n return (\n <BreadcrumbContext.Provider\n value={breadcrumbProviderValue.currentPage}\n >\n {breadcrumb}\n </BreadcrumbContext.Provider>\n );\n }\n return (\n <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n {breadcrumb}\n </BreadcrumbContext.Provider>\n );\n })}\n </MuiBreadcrumbs>\n );\n};\n\nconst MemoizedBreadcrumbList = memo(BreadcrumbList);\nMemoizedBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport { MemoizedBreadcrumbList as BreadcrumbList };\n"],"mappings":"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"}
1
+ {"version":3,"file":"Breadcrumbs.js","names":["createContext","memo","useCallback","useContext","useMemo","useState","GroupIcon","HomeIcon","UserIcon","Subordinate","useTranslation","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","BreadcrumbContext","breadcrumbType","Breadcrumb","children","href","iconName","breadcrumbContent","_MenuItem","color","_ButtonBase","breadcrumbProviderValue","currentPage","listItem","menuItem","defaultTruncationValue","BreadcrumbList","homeHref","maxVisibleItems","testId","translate","t","anchorEl","setAnchorEl","breadcrumbSections","length","beforeMenu","insideMenu","remainingBreadcrumbs","menuStart","Math","floor","menuLength","slice","onMenuButtonClick","event","currentTarget","onCloseMenu","_Breadcrumbs","maxItems","map","breadcrumb","Provider","value","onClick","_Menu","open","Boolean","onClose","anchorOrigin","horizontal","vertical","MenuListProps","sx","minWidth","i","MemoizedBreadcrumbList","displayName"],"sources":["../src/Breadcrumbs.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n ButtonBase,\n Menu,\n MenuItem,\n Breadcrumbs as MuiBreadcrumbs,\n} from \"@mui/material\";\nimport {\n MouseEventHandler,\n ReactElement,\n createContext,\n memo,\n useCallback,\n useContext,\n useMemo,\n useState,\n} from \"react\";\nimport { GroupIcon, HomeIcon, UserIcon } from \"./icons.generated\";\nimport { Subordinate } from \"./Typography\";\nimport { useTranslation } from \"react-i18next\";\nimport { HtmlProps } from \"./HtmlProps\";\n\nexport type BreadcrumbType = \"listItem\" | \"menuItem\" | \"currentPage\";\n\nexport type BreadcrumbProps = {\n children?: string;\n href: string;\n iconName?: \"user\" | \"group\";\n};\n\nexport type BreadcrumbsProps = {\n children: ReactElement<typeof Breadcrumb>[];\n homeHref?: string;\n maxVisibleItems?: number;\n} & HtmlProps;\n\nexport type BreadcrumbContextType = {\n breadcrumbType: BreadcrumbType;\n};\n\nexport const BreadcrumbContext = createContext<BreadcrumbContextType>({\n breadcrumbType: \"listItem\",\n});\n\nexport const Breadcrumb = ({ children, href, iconName }: BreadcrumbProps) => {\n const { breadcrumbType } = useContext(BreadcrumbContext);\n\n const breadcrumbContent = (\n <>\n {iconName === \"group\" ? (\n <GroupIcon />\n ) : iconName === \"user\" ? (\n <UserIcon />\n ) : null}\n {children}\n </>\n );\n\n if (breadcrumbType === \"menuItem\") {\n return <MenuItem href={href}>{breadcrumbContent}</MenuItem>;\n }\n\n if (breadcrumbType === \"currentPage\") {\n return <Subordinate color=\"textPrimary\">{breadcrumbContent}</Subordinate>;\n }\n\n // breadcrumbType === \"listItem\" is the default\n // Provided here without a conditional to get TS to be quiet\n // about potential undefined returns\n return <ButtonBase href={href}>{breadcrumbContent}</ButtonBase>;\n};\n\nconst breadcrumbProviderValue: Record<\n BreadcrumbType,\n { breadcrumbType: BreadcrumbType }\n> = {\n currentPage: {\n breadcrumbType: \"currentPage\",\n },\n listItem: {\n breadcrumbType: \"listItem\",\n },\n menuItem: {\n breadcrumbType: \"menuItem\",\n },\n};\n\nconst defaultTruncationValue = 5;\n\nconst BreadcrumbList = ({\n children,\n homeHref,\n maxVisibleItems = defaultTruncationValue,\n testId,\n translate,\n}: BreadcrumbsProps) => {\n const { t } = useTranslation();\n\n const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);\n\n const breadcrumbSections = useMemo(() => {\n if (children.length <= maxVisibleItems) {\n return {\n beforeMenu: [],\n insideMenu: [],\n remainingBreadcrumbs: children,\n };\n } else {\n const menuStart = Math.floor(maxVisibleItems / 2);\n const menuLength = children.length - maxVisibleItems;\n\n return {\n beforeMenu: children.slice(0, menuStart),\n insideMenu: children.slice(menuStart, menuStart + menuLength),\n remainingBreadcrumbs: children.slice(menuStart + menuLength),\n };\n }\n }, [children, maxVisibleItems]);\n\n const onMenuButtonClick = useCallback<MouseEventHandler<HTMLButtonElement>>(\n (event) => setAnchorEl(event.currentTarget),\n []\n );\n const onCloseMenu = useCallback(() => {\n setAnchorEl(null);\n }, []);\n\n return (\n <MuiBreadcrumbs\n maxItems={children.length + 1}\n aria-label={t(\"breadcrumbs.label.text\")}\n data-se={testId}\n translate={translate}\n >\n {homeHref && (\n <ButtonBase href={homeHref} aria-label={t(\"breadcrumbs.home.text\")}>\n <HomeIcon />\n </ButtonBase>\n )}\n\n {breadcrumbSections.beforeMenu.map((breadcrumb) => (\n <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n {breadcrumb}\n </BreadcrumbContext.Provider>\n ))}\n\n {breadcrumbSections.insideMenu && (\n <>\n <ButtonBase onClick={onMenuButtonClick}>...</ButtonBase>\n <Menu\n open={Boolean(anchorEl)}\n onClose={onCloseMenu}\n anchorEl={anchorEl}\n anchorOrigin={{ horizontal: \"left\", vertical: \"bottom\" }}\n MenuListProps={{\n sx: {\n minWidth: 180,\n },\n }}\n >\n <BreadcrumbContext.Provider\n value={breadcrumbProviderValue.menuItem}\n >\n {breadcrumbSections.insideMenu}\n </BreadcrumbContext.Provider>\n </Menu>\n </>\n )}\n\n {breadcrumbSections.remainingBreadcrumbs.map((breadcrumb, i) => {\n if (i === breadcrumbSections.remainingBreadcrumbs.length - 1) {\n return (\n <BreadcrumbContext.Provider\n value={breadcrumbProviderValue.currentPage}\n >\n {breadcrumb}\n </BreadcrumbContext.Provider>\n );\n }\n return (\n <BreadcrumbContext.Provider value={breadcrumbProviderValue.listItem}>\n {breadcrumb}\n </BreadcrumbContext.Provider>\n );\n })}\n </MuiBreadcrumbs>\n );\n};\n\nconst MemoizedBreadcrumbList = memo(BreadcrumbList);\nMemoizedBreadcrumbList.displayName = \"BreadcrumbList\";\n\nexport { MemoizedBreadcrumbList as BreadcrumbList };\n"],"mappings":"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"}
package/dist/Button.js CHANGED
@@ -17,27 +17,26 @@ import { jsx as _jsx } from "react/jsx-runtime";
17
17
  export const buttonSizeValues = ["small", "medium", "large"];
18
18
  export const buttonTypeValues = ["button", "submit", "reset"];
19
19
  export const buttonVariantValues = ["primary", "secondary", "tertiary", "danger", "floating"];
20
- const Button = _ref => {
21
- let {
22
- ariaDescribedBy,
23
- ariaLabel,
24
- ariaLabelledBy,
25
- buttonRef,
26
- endIcon,
27
- id,
28
- isDisabled,
29
- isFullWidth,
30
- label = "",
31
- onClick,
32
- size = "medium",
33
- startIcon,
34
- tabIndex,
35
- testId,
36
- tooltipText,
37
- translate,
38
- type = "button",
39
- variant
40
- } = _ref;
20
+ const Button = ({
21
+ ariaDescribedBy,
22
+ ariaLabel,
23
+ ariaLabelledBy,
24
+ buttonRef,
25
+ endIcon,
26
+ id,
27
+ isDisabled,
28
+ isFullWidth,
29
+ label = "",
30
+ onClick,
31
+ size = "medium",
32
+ startIcon,
33
+ tabIndex,
34
+ testId,
35
+ tooltipText,
36
+ translate,
37
+ type = "button",
38
+ variant
39
+ }) => {
41
40
  const muiProps = useMuiProps();
42
41
  const localButtonRef = useRef(null);
43
42
  useImperativeHandle(buttonRef, () => {