@okta/odyssey-react-mui 1.22.0 → 1.24.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -0
- package/dist/@types/i18next.d.js.map +1 -1
- package/dist/Autocomplete.js +32 -0
- package/dist/Autocomplete.js.map +1 -1
- package/dist/Banner.js +6 -2
- package/dist/Banner.js.map +1 -1
- package/dist/Callout.js +18 -26
- package/dist/Callout.js.map +1 -1
- package/dist/ContrastModeProvider.js +86 -0
- package/dist/ContrastModeProvider.js.map +1 -0
- package/dist/DataTable/useScrollIndication.js +7 -3
- package/dist/DataTable/useScrollIndication.js.map +1 -1
- package/dist/FieldHint.js +20 -6
- package/dist/FieldHint.js.map +1 -1
- package/dist/FileUploader/FileUploadIllustration.js.map +1 -0
- package/dist/FileUploader/FileUploadPreview.js.map +1 -0
- package/dist/{labs/FileUpload.js → FileUploader/FileUploader.js} +6 -5
- package/dist/FileUploader/FileUploader.js.map +1 -0
- package/dist/FileUploader/index.js +13 -0
- package/dist/FileUploader/index.js.map +1 -0
- package/dist/Link.js.map +1 -1
- package/dist/OdysseyProvider.js +43 -19
- package/dist/OdysseyProvider.js.map +1 -1
- package/dist/Radio.js +2 -2
- package/dist/Radio.js.map +1 -1
- package/dist/Select.js +36 -0
- package/dist/Select.js.map +1 -1
- package/dist/Stack.js +32 -0
- package/dist/Stack.js.map +1 -0
- package/dist/{labs/Switch.js → Switch.js} +7 -7
- package/dist/Switch.js.map +1 -0
- package/dist/Tabs.js +7 -9
- package/dist/Tabs.js.map +1 -1
- package/dist/Tag.js +144 -4
- package/dist/Tag.js.map +1 -1
- package/dist/TextField.js +16 -39
- package/dist/TextField.js.map +1 -1
- package/dist/Toast.js +2 -2
- package/dist/Toast.js.map +1 -1
- package/dist/Typography.js +27 -6
- package/dist/Typography.js.map +1 -1
- package/dist/createShadowDomElements.js +1 -0
- package/dist/createShadowDomElements.js.map +1 -1
- package/dist/i18n.js +1 -1
- package/dist/i18n.js.map +1 -1
- package/dist/index.js +4 -1
- package/dist/index.js.map +1 -1
- package/dist/index.scss +96 -4
- package/dist/labs/DataView/DataView.js +64 -25
- package/dist/labs/DataView/DataView.js.map +1 -1
- package/dist/labs/DataView/TableLayoutContent.js +17 -3
- package/dist/labs/DataView/TableLayoutContent.js.map +1 -1
- package/dist/labs/DataView/componentTypes.js.map +1 -1
- package/dist/labs/DateField.js +2 -0
- package/dist/labs/DateField.js.map +1 -1
- package/dist/labs/DatePicker.js +5 -1
- package/dist/labs/DatePicker.js.map +1 -1
- package/dist/labs/SideNav/OktaLogo.js +36 -0
- package/dist/labs/SideNav/OktaLogo.js.map +1 -0
- package/dist/labs/SideNav/SideNav.js +125 -36
- package/dist/labs/SideNav/SideNav.js.map +1 -1
- package/dist/labs/SideNav/SideNavHeader.js +33 -10
- package/dist/labs/SideNav/SideNavHeader.js.map +1 -1
- package/dist/labs/SideNav/types.js.map +1 -1
- package/dist/labs/TopNav.js +2 -1
- package/dist/labs/TopNav.js.map +1 -1
- package/dist/labs/datePickerTheme.js +3 -6
- package/dist/labs/datePickerTheme.js.map +1 -1
- package/dist/labs/index.js +0 -2
- package/dist/labs/index.js.map +1 -1
- package/dist/labs/useDateFieldsTranslations.js +1 -1
- package/dist/labs/useDateFieldsTranslations.js.map +1 -1
- package/dist/properties/ts/odyssey-react-mui.js +3 -1
- package/dist/properties/ts/odyssey-react-mui.js.map +1 -1
- package/dist/src/Autocomplete.d.ts +37 -1
- package/dist/src/Autocomplete.d.ts.map +1 -1
- package/dist/src/Banner.d.ts +16 -12
- package/dist/src/Banner.d.ts.map +1 -1
- package/dist/src/Callout.d.ts +20 -32
- package/dist/src/Callout.d.ts.map +1 -1
- package/dist/src/ContrastModeProvider.d.ts +34 -0
- package/dist/src/ContrastModeProvider.d.ts.map +1 -0
- package/dist/src/DataTable/useScrollIndication.d.ts.map +1 -1
- package/dist/src/FieldHint.d.ts.map +1 -1
- package/dist/src/FileUploader/FileUploadIllustration.d.ts.map +1 -0
- package/dist/src/{labs → FileUploader}/FileUploadPreview.d.ts +2 -2
- package/dist/src/FileUploader/FileUploadPreview.d.ts.map +1 -0
- package/dist/src/{labs/FileUpload.d.ts → FileUploader/FileUploader.d.ts} +5 -4
- package/dist/src/FileUploader/FileUploader.d.ts.map +1 -0
- package/dist/src/FileUploader/index.d.ts +13 -0
- package/dist/src/FileUploader/index.d.ts.map +1 -0
- package/dist/src/Link.d.ts +3 -1
- package/dist/src/Link.d.ts.map +1 -1
- package/dist/src/NativeSelect.d.ts +1 -1
- package/dist/src/OdysseyProvider.d.ts +5 -3
- package/dist/src/OdysseyProvider.d.ts.map +1 -1
- package/dist/src/OdysseyTranslationProvider.d.ts +1 -1
- package/dist/src/OdysseyTranslationProvider.d.ts.map +1 -1
- package/dist/src/PasswordField.d.ts +1 -1
- package/dist/src/SearchField.d.ts +1 -1
- package/dist/src/Select.d.ts +36 -0
- package/dist/src/Select.d.ts.map +1 -1
- package/dist/src/Stack.d.ts +33 -0
- package/dist/src/Stack.d.ts.map +1 -0
- package/dist/src/{labs/Switch.d.ts → Switch.d.ts} +3 -3
- package/dist/src/Switch.d.ts.map +1 -0
- package/dist/src/Tabs.d.ts +6 -8
- package/dist/src/Tabs.d.ts.map +1 -1
- package/dist/src/Tag.d.ts +7 -1
- package/dist/src/Tag.d.ts.map +1 -1
- package/dist/src/TextField.d.ts +17 -40
- package/dist/src/TextField.d.ts.map +1 -1
- package/dist/src/Typography.d.ts +3 -2
- package/dist/src/Typography.d.ts.map +1 -1
- package/dist/src/createShadowDomElements.d.ts.map +1 -1
- package/dist/src/i18n.d.ts +2 -2
- package/dist/src/i18n.d.ts.map +1 -1
- package/dist/src/index.d.ts +8 -3
- package/dist/src/index.d.ts.map +1 -1
- package/dist/src/labs/DataView/DataView.d.ts +1 -1
- package/dist/src/labs/DataView/DataView.d.ts.map +1 -1
- package/dist/src/labs/DataView/TableLayoutContent.d.ts +2 -1
- package/dist/src/labs/DataView/TableLayoutContent.d.ts.map +1 -1
- package/dist/src/labs/DataView/componentTypes.d.ts +10 -0
- package/dist/src/labs/DataView/componentTypes.d.ts.map +1 -1
- package/dist/src/labs/DateField.d.ts +2 -2
- package/dist/src/labs/DateField.d.ts.map +1 -1
- package/dist/src/labs/DatePicker.d.ts +2 -2
- package/dist/src/labs/DatePicker.d.ts.map +1 -1
- package/dist/{test-selectors/odysseyTestSelectors.js → src/labs/SideNav/OktaLogo.d.ts} +3 -9
- package/dist/src/labs/SideNav/OktaLogo.d.ts.map +1 -0
- package/dist/src/labs/SideNav/SideNav.d.ts +2 -1
- package/dist/src/labs/SideNav/SideNav.d.ts.map +1 -1
- package/dist/src/labs/SideNav/SideNavHeader.d.ts +1 -1
- package/dist/src/labs/SideNav/SideNavHeader.d.ts.map +1 -1
- package/dist/src/labs/SideNav/types.d.ts +28 -5
- package/dist/src/labs/SideNav/types.d.ts.map +1 -1
- package/dist/src/labs/TopNav.d.ts +1 -0
- package/dist/src/labs/TopNav.d.ts.map +1 -1
- package/dist/src/labs/datePickerTheme.d.ts.map +1 -1
- package/dist/src/labs/index.d.ts +0 -2
- package/dist/src/labs/index.d.ts.map +1 -1
- package/dist/src/properties/ts/odyssey-react-mui.d.ts +2 -0
- package/dist/src/properties/ts/odyssey-react-mui.d.ts.map +1 -1
- package/dist/src/test-selectors/getByQuerySelector.d.ts +148 -0
- package/dist/src/test-selectors/getByQuerySelector.d.ts.map +1 -0
- package/dist/src/test-selectors/getComputedAccessibleErrorMessageText.d.ts +14 -0
- package/dist/src/test-selectors/getComputedAccessibleErrorMessageText.d.ts.map +1 -0
- package/dist/src/test-selectors/{featureTestSelector.d.ts → getComputedAccessibleText.d.ts} +11 -19
- package/dist/src/test-selectors/getComputedAccessibleText.d.ts.map +1 -0
- package/dist/src/test-selectors/index.d.ts +2 -2
- package/dist/src/test-selectors/index.d.ts.map +1 -1
- package/dist/src/test-selectors/interpolateString.d.ts +15 -0
- package/dist/src/test-selectors/interpolateString.d.ts.map +1 -0
- package/dist/src/test-selectors/linkedHtmlSelectors.d.ts +24 -0
- package/dist/src/test-selectors/linkedHtmlSelectors.d.ts.map +1 -0
- package/dist/src/test-selectors/queryOdysseySelector.d.ts +5755 -0
- package/dist/src/test-selectors/queryOdysseySelector.d.ts.map +1 -0
- package/dist/src/test-selectors/querySelector.d.ts +59 -3613
- package/dist/src/test-selectors/querySelector.d.ts.map +1 -1
- package/dist/src/test-selectors/sanityChecks.d.ts +18 -0
- package/dist/src/test-selectors/sanityChecks.d.ts.map +1 -0
- package/dist/src/test-selectors/testSelector.d.ts +46 -0
- package/dist/src/test-selectors/testSelector.d.ts.map +1 -0
- package/dist/src/theme/palette.d.ts.map +1 -1
- package/dist/src/theme/palette.types.d.ts +2 -0
- package/dist/src/theme/palette.types.d.ts.map +1 -1
- package/dist/test-selectors/getByQuerySelector.js +64 -0
- package/dist/test-selectors/getByQuerySelector.js.map +1 -0
- package/dist/test-selectors/getComputedAccessibleErrorMessageText.js +25 -0
- package/dist/test-selectors/getComputedAccessibleErrorMessageText.js.map +1 -0
- package/dist/test-selectors/getComputedAccessibleText.js +24 -0
- package/dist/test-selectors/getComputedAccessibleText.js.map +1 -0
- package/dist/test-selectors/index.js +2 -2
- package/dist/test-selectors/index.js.map +1 -1
- package/{src/test-selectors/featureTestSelector.ts → dist/test-selectors/interpolateString.js} +11 -27
- package/dist/test-selectors/interpolateString.js.map +1 -0
- package/dist/test-selectors/linkedHtmlSelectors.js +34 -0
- package/dist/test-selectors/linkedHtmlSelectors.js.map +1 -0
- package/dist/test-selectors/queryOdysseySelector.js +26 -0
- package/dist/test-selectors/queryOdysseySelector.js.map +1 -0
- package/dist/test-selectors/querySelector.js +82 -58
- package/dist/test-selectors/querySelector.js.map +1 -1
- package/dist/test-selectors/sanityChecks.js +33 -0
- package/dist/test-selectors/sanityChecks.js.map +1 -0
- package/dist/test-selectors/testSelector.js +2 -0
- package/dist/test-selectors/testSelector.js.map +1 -0
- package/dist/test-selectors/testSelectors.json +1 -1
- package/dist/theme/components.js +276 -274
- package/dist/theme/components.js.map +1 -1
- package/dist/theme/palette.js +2 -1
- package/dist/theme/palette.js.map +1 -1
- package/dist/theme/palette.types.js.map +1 -1
- package/dist/tsconfig.production.tsbuildinfo +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/jest.setup.js +3 -0
- package/package.json +5 -4
- package/scripts/generateTestSelectorsJson.ts +1 -1
- package/src/@types/i18next.d.ts +1 -1
- package/src/Autocomplete.tsx +45 -0
- package/src/Banner.tsx +29 -14
- package/src/Callout.tsx +31 -36
- package/src/ContrastModeProvider.tsx +131 -0
- package/src/DataTable/useScrollIndication.tsx +9 -2
- package/src/FieldHint.tsx +28 -4
- package/src/{labs → FileUploader}/FileUploadPreview.tsx +3 -3
- package/src/{labs/FileUpload.tsx → FileUploader/FileUploader.tsx} +7 -6
- package/src/FileUploader/index.ts +13 -0
- package/src/Link.tsx +3 -1
- package/src/OdysseyCacheProvider.test.tsx +1 -0
- package/src/OdysseyProvider.tsx +58 -26
- package/src/Radio.tsx +2 -2
- package/src/Select.tsx +38 -0
- package/src/Stack.tsx +56 -0
- package/src/{labs/Switch.tsx → Switch.tsx} +10 -10
- package/src/Tabs.tsx +8 -10
- package/src/Tag.tsx +178 -3
- package/src/TextField.tsx +18 -41
- package/src/Toast.tsx +1 -1
- package/src/{test-selectors/odysseyTestSelectors.ts → Typography.test.tsx} +13 -9
- package/src/Typography.tsx +38 -6
- package/src/createShadowDomElements.ts +3 -0
- package/src/i18n.ts +3 -3
- package/src/index.ts +10 -1
- package/src/labs/DataView/DataView.test.tsx +158 -0
- package/src/labs/DataView/DataView.tsx +98 -50
- package/src/labs/DataView/TableLayoutContent.tsx +28 -1
- package/src/labs/DataView/componentTypes.ts +13 -0
- package/src/labs/DateField.tsx +3 -0
- package/src/labs/DatePicker.tsx +12 -1
- package/src/labs/SideNav/OktaLogo.tsx +39 -0
- package/src/labs/SideNav/SideNav.tsx +187 -51
- package/src/labs/SideNav/SideNavHeader.tsx +30 -7
- package/src/labs/SideNav/types.ts +32 -5
- package/src/labs/TopNav.tsx +3 -1
- package/src/labs/datePickerTheme.tsx +2 -6
- package/src/labs/index.ts +0 -3
- package/src/labs/useDateFieldsTranslations.ts +1 -1
- package/src/properties/odyssey-react-mui.properties +2 -1
- package/src/properties/ts/odyssey-react-mui.ts +1 -1
- package/src/test-selectors/getByQuerySelector.ts +176 -0
- package/src/test-selectors/getComputedAccessibleErrorMessageText.ts +52 -0
- package/src/test-selectors/getComputedAccessibleText.ts +36 -0
- package/src/test-selectors/index.ts +2 -2
- package/src/test-selectors/interpolateString.ts +41 -0
- package/src/test-selectors/linkedHtmlSelectors.ts +73 -0
- package/src/test-selectors/queryOdysseySelector.ts +36 -0
- package/src/test-selectors/querySelector.ts +221 -170
- package/src/test-selectors/sanityChecks.ts +53 -0
- package/src/test-selectors/testSelector.ts +143 -0
- package/src/theme/components.tsx +284 -284
- package/src/theme/palette.ts +2 -1
- package/src/theme/palette.types.ts +2 -0
- package/dist/labs/FileUpload.js.map +0 -1
- package/dist/labs/FileUploadIllustration.js.map +0 -1
- package/dist/labs/FileUploadPreview.js.map +0 -1
- package/dist/labs/Switch.js.map +0 -1
- package/dist/src/labs/FileUpload.d.ts.map +0 -1
- package/dist/src/labs/FileUploadIllustration.d.ts.map +0 -1
- package/dist/src/labs/FileUploadPreview.d.ts.map +0 -1
- package/dist/src/labs/Switch.d.ts.map +0 -1
- package/dist/src/test-selectors/featureTestSelector.d.ts.map +0 -1
- package/dist/src/test-selectors/odysseyTestSelectors.d.ts +0 -120
- package/dist/src/test-selectors/odysseyTestSelectors.d.ts.map +0 -1
- package/dist/test-selectors/featureTestSelector.js +0 -2
- package/dist/test-selectors/featureTestSelector.js.map +0 -1
- package/dist/test-selectors/odysseyTestSelectors.js.map +0 -1
- /package/dist/{labs → FileUploader}/FileUploadIllustration.js +0 -0
- /package/dist/{labs → FileUploader}/FileUploadPreview.js +0 -0
- /package/dist/src/{labs → FileUploader}/FileUploadIllustration.d.ts +0 -0
- /package/src/{labs → FileUploader}/FileUploadIllustration.tsx +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useScrollIndication.js","names":["useCallback","useEffect","useRef","useScrollIndication","tableOuterContainer","tableInnerContainer","setIsTableContainerScrolledToStart","setIsTableContainerScrolledToEnd","setTableInnerContainerWidth","animationFrameIdRef","resizeObserverRef","checkScrollIndicators","containerWidth","clientWidth","contentWidth","scrollWidth","containerStartScrollPosition","scrollLeft","containerEndScrollPosition","
|
|
1
|
+
{"version":3,"file":"useScrollIndication.js","names":["useCallback","useEffect","useRef","useOdysseyDesignTokens","useScrollIndication","tableOuterContainer","tableInnerContainer","setIsTableContainerScrolledToStart","setIsTableContainerScrolledToEnd","setTableInnerContainerWidth","animationFrameIdRef","resizeObserverRef","odysseyDesignTokens","checkScrollIndicators","containerWidth","clientWidth","contentWidth","scrollWidth","containerStartScrollPosition","scrollLeft","containerEndScrollPosition","ResizeObserver","current","debounceTimer","clearTimeout","setTimeout","requestAnimationFrame","Number","BorderWidthMain","parentElement","observe","disconnect","cancelAnimationFrame","addEventListener","removeEventListener"],"sources":["../../src/DataTable/useScrollIndication.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 Dispatch,\n SetStateAction,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport { useOdysseyDesignTokens } from \"../OdysseyDesignTokensContext\";\n\ntype UseScrollIndicationProps = {\n tableOuterContainer: HTMLDivElement | null;\n tableInnerContainer: HTMLDivElement | null;\n setIsTableContainerScrolledToStart: Dispatch<SetStateAction<boolean>>;\n setIsTableContainerScrolledToEnd: Dispatch<SetStateAction<boolean>>;\n setTableInnerContainerWidth: Dispatch<SetStateAction<string>>;\n};\nexport const useScrollIndication = ({\n tableOuterContainer,\n tableInnerContainer,\n setIsTableContainerScrolledToStart,\n setIsTableContainerScrolledToEnd,\n setTableInnerContainerWidth,\n}: UseScrollIndicationProps) => {\n const animationFrameIdRef = useRef<number | null>(null);\n\n const resizeObserverRef = useRef<ResizeObserver | null>(null);\n\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const checkScrollIndicators = useCallback(() => {\n if (!tableOuterContainer || !tableInnerContainer) return;\n\n const containerWidth = tableOuterContainer.clientWidth;\n const contentWidth = tableInnerContainer.scrollWidth;\n const containerStartScrollPosition = tableInnerContainer.scrollLeft;\n const containerEndScrollPosition =\n containerStartScrollPosition + containerWidth;\n\n setIsTableContainerScrolledToStart(containerStartScrollPosition <= 16);\n setIsTableContainerScrolledToEnd(\n containerEndScrollPosition >= contentWidth - 16,\n );\n }, [\n tableInnerContainer,\n tableOuterContainer,\n setIsTableContainerScrolledToEnd,\n setIsTableContainerScrolledToStart,\n ]);\n\n useEffect(() => {\n // Avoid creating multiple observers or if ResizeObserver is unsupported\n if (typeof ResizeObserver === \"undefined\" || resizeObserverRef.current) {\n return;\n }\n\n let debounceTimer: ReturnType<typeof setTimeout>;\n\n resizeObserverRef.current = new ResizeObserver(() => {\n clearTimeout(debounceTimer);\n debounceTimer = setTimeout(() => {\n if (!animationFrameIdRef.current) {\n animationFrameIdRef.current = requestAnimationFrame(() => {\n checkScrollIndicators();\n animationFrameIdRef.current = null;\n });\n }\n\n setTableInnerContainerWidth(\n tableInnerContainer?.clientWidth\n ? `${tableInnerContainer.clientWidth - Number(odysseyDesignTokens.BorderWidthMain) * 2}px` // Account for the border on the outer container\n : \"100%\",\n );\n }, 100); // debounce delay\n });\n\n if (tableOuterContainer && tableOuterContainer.parentElement) {\n resizeObserverRef.current.observe(tableOuterContainer.parentElement);\n }\n\n return () => {\n if (resizeObserverRef.current) {\n resizeObserverRef.current.disconnect();\n resizeObserverRef.current = null;\n }\n clearTimeout(debounceTimer); // Ensure timer is cleared on component unmount\n if (animationFrameIdRef.current) {\n cancelAnimationFrame(animationFrameIdRef.current);\n animationFrameIdRef.current = null;\n }\n };\n }, [\n checkScrollIndicators,\n setTableInnerContainerWidth,\n tableOuterContainer,\n tableInnerContainer,\n setIsTableContainerScrolledToStart,\n setIsTableContainerScrolledToEnd,\n odysseyDesignTokens.BorderWidthMain,\n ]);\n\n useEffect(() => {\n tableInnerContainer?.addEventListener(\"scroll\", checkScrollIndicators);\n return () =>\n tableInnerContainer?.removeEventListener(\"scroll\", checkScrollIndicators);\n }, [tableInnerContainer, checkScrollIndicators]); // Re-run when innerContainerRef changes\n\n // Initial check to set state correctly on mount\n useEffect(() => {\n checkScrollIndicators();\n\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n};\n"],"mappings":"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"}
|
package/dist/FieldHint.js
CHANGED
|
@@ -12,9 +12,23 @@ import _FormHelperText from "@mui/material/FormHelperText";
|
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
14
|
import { memo } from "react";
|
|
15
|
+
import styled from "@emotion/styled";
|
|
16
|
+
import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
|
|
15
17
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
16
|
-
|
|
17
|
-
|
|
18
|
+
const HintLinkContainer = styled.span(({
|
|
19
|
+
odysseyDesignTokens
|
|
20
|
+
}) => ({
|
|
21
|
+
a: {
|
|
22
|
+
color: odysseyDesignTokens.TypographyColorBody,
|
|
23
|
+
textDecoration: "underline",
|
|
24
|
+
"&:visited": {
|
|
25
|
+
color: odysseyDesignTokens.TypographyColorBody
|
|
26
|
+
},
|
|
27
|
+
"&:hover": {
|
|
28
|
+
color: odysseyDesignTokens.TypographyColorSubordinate
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}));
|
|
18
32
|
const FieldHint = ({
|
|
19
33
|
id,
|
|
20
34
|
LinkComponent,
|
|
@@ -22,14 +36,14 @@ const FieldHint = ({
|
|
|
22
36
|
text,
|
|
23
37
|
translate
|
|
24
38
|
}) => {
|
|
39
|
+
const odysseyDesignTokens = useOdysseyDesignTokens();
|
|
25
40
|
return _jsxs(_FormHelperText, {
|
|
26
41
|
"data-se": testId,
|
|
27
42
|
id: id,
|
|
28
43
|
translate: translate,
|
|
29
|
-
children: [text, LinkComponent &&
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
})
|
|
44
|
+
children: [text, LinkComponent && _jsxs(HintLinkContainer, {
|
|
45
|
+
odysseyDesignTokens: odysseyDesignTokens,
|
|
46
|
+
children: [" ", LinkComponent]
|
|
33
47
|
})]
|
|
34
48
|
});
|
|
35
49
|
};
|
package/dist/FieldHint.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldHint.js","names":["memo","jsxs","_jsxs","
|
|
1
|
+
{"version":3,"file":"FieldHint.js","names":["memo","styled","useOdysseyDesignTokens","jsxs","_jsxs","HintLinkContainer","span","odysseyDesignTokens","a","color","TypographyColorBody","textDecoration","TypographyColorSubordinate","FieldHint","id","LinkComponent","testId","text","translate","_FormHelperText","children","MemoizedFieldHint","displayName"],"sources":["../src/FieldHint.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 { memo } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { FormHelperText } from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"./OdysseyDesignTokensContext\";\n\nconst HintLinkContainer = styled.span<{ odysseyDesignTokens: DesignTokens }>(\n ({ odysseyDesignTokens }) => ({\n a: {\n color: odysseyDesignTokens.TypographyColorBody,\n textDecoration: \"underline\",\n\n \"&:visited\": {\n color: odysseyDesignTokens.TypographyColorBody,\n },\n\n \"&:hover\": {\n color: odysseyDesignTokens.TypographyColorSubordinate,\n },\n },\n }),\n);\n\nexport type FieldHintProps = {\n LinkComponent?: FieldComponentProps[\"HintLinkComponent\"];\n id?: string;\n text: string;\n} & Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst FieldHint = ({\n id,\n LinkComponent,\n testId,\n text,\n translate,\n}: FieldHintProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n return (\n <FormHelperText data-se={testId} id={id} translate={translate}>\n {text}\n {LinkComponent && (\n <HintLinkContainer odysseyDesignTokens={odysseyDesignTokens}>\n {\" \"}\n {LinkComponent}\n </HintLinkContainer>\n )}\n </FormHelperText>\n );\n};\n\nconst MemoizedFieldHint = memo(FieldHint);\nMemoizedFieldHint.displayName = \"FieldHint\";\n\nexport { MemoizedFieldHint as FieldHint };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAMnCC,sBAAsB;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIxB,MAAMC,iBAAiB,GAAGJ,MAAM,CAACK,IAAI,CACnC,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC5BC,CAAC,EAAE;IACDC,KAAK,EAAEF,mBAAmB,CAACG,mBAAmB;IAC9CC,cAAc,EAAE,WAAW;IAE3B,WAAW,EAAE;MACXF,KAAK,EAAEF,mBAAmB,CAACG;IAC7B,CAAC;IAED,SAAS,EAAE;MACTD,KAAK,EAAEF,mBAAmB,CAACK;IAC7B;EACF;AACF,CAAC,CACH,CAAC;AAQD,MAAMC,SAAS,GAAGA,CAAC;EACjBC,EAAE;EACFC,aAAa;EACbC,MAAM;EACNC,IAAI;EACJC;AACc,CAAC,KAAK;EACpB,MAAMX,mBAAmB,GAAGL,sBAAsB,CAAC,CAAC;EAEpD,OACEE,KAAA,CAAAe,eAAA;IAAgB,WAASH,MAAO;IAACF,EAAE,EAAEA,EAAG;IAACI,SAAS,EAAEA,SAAU;IAAAE,QAAA,GAC3DH,IAAI,EACJF,aAAa,IACZX,KAAA,CAACC,iBAAiB;MAACE,mBAAmB,EAAEA,mBAAoB;MAAAa,QAAA,GACzD,GAAG,EACHL,aAAa;IAAA,CACG,CACpB;EAAA,CACa,CAAC;AAErB,CAAC;AAED,MAAMM,iBAAiB,GAAGrB,IAAI,CAACa,SAAS,CAAC;AACzCQ,iBAAiB,CAACC,WAAW,GAAG,WAAW;AAE3C,SAASD,iBAAiB,IAAIR,SAAS"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploadIllustration.js","names":["memo","styled","useOdysseyDesignTokens","jsx","_jsx","jsxs","_jsxs","UploadIllustrationContainer","div","odysseyDesignTokens","marginBlockEnd","Spacing3","padding","backgroundColor","HueNeutral50","borderRadius","svg","display","width","Spacing8","height","FileUploadIllustration","children","viewBox","fill","xmlns","d","HueNeutral200","MemoizedFileUploadIllustration","displayName"],"sources":["../../src/FileUploader/FileUploadIllustration.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 } from \"react\";\nimport styled from \"@emotion/styled\";\n\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\n\nconst UploadIllustrationContainer = styled.div<{\n odysseyDesignTokens: DesignTokens;\n}>(({ odysseyDesignTokens }) => ({\n marginBlockEnd: odysseyDesignTokens.Spacing3,\n padding: odysseyDesignTokens.Spacing3,\n backgroundColor: odysseyDesignTokens.HueNeutral50,\n borderRadius: \"50%\",\n\n svg: {\n display: \"flex\",\n width: odysseyDesignTokens.Spacing8,\n height: odysseyDesignTokens.Spacing8,\n },\n}));\n\nconst FileUploadIllustration = () => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n return (\n <UploadIllustrationContainer\n aria-hidden=\"true\"\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <svg\n aria-hidden=\"true\"\n viewBox=\"0 0 44 45\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M32.0763 11.001C29.3564 3.7855 21.6595 -0.565827 13.7765 0.726748C5.35441 2.10773 -0.676662 9.50714 0.0603005 17.8612C0.441865 22.1865 2.56458 25.9787 5.71703 28.614L8.28246 25.545C5.90122 23.5544 4.32811 20.7209 4.04483 17.5097C3.50262 11.3633 7.94433 5.73648 14.4238 4.67404C20.9164 3.60944 27.0806 7.52016 28.6895 13.5191C28.9239 14.3932 29.7162 15.001 30.6212 15.001H32.9114C36.8985 15.001 39.9997 18.0938 39.9997 21.7505C39.9997 24.3423 38.4576 26.6352 36.1259 27.7678L37.8736 31.3658C41.4737 29.6171 43.9997 25.9917 43.9997 21.7505C43.9997 15.7428 38.963 11.001 32.9114 11.001H32.0763Z\"\n fill={odysseyDesignTokens.HueNeutral200}\n />\n <path\n d=\"M23.9994 29.3277V44.5H19.9994V29.3289L14.4142 34.9141L11.5858 32.0857L19.7373 23.9342C20.9869 22.6845 23.0131 22.6845 24.2627 23.9342L32.4142 32.0857L29.5858 34.9141L23.9994 29.3277Z\"\n fill={odysseyDesignTokens.HueNeutral200}\n />\n </svg>\n </UploadIllustrationContainer>\n );\n};\n\nconst MemoizedFileUploadIllustration = memo(FileUploadIllustration);\nMemoizedFileUploadIllustration.displayName = \"FileUploadIllustration\";\n\nexport { MemoizedFileUploadIllustration as FileUploadIllustration };\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,OAAO;AAC5B,OAAOC,MAAM,MAAM,iBAAiB;AAAC,SAGnCC,sBAAsB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIxB,MAAMC,2BAA2B,GAAGN,MAAM,CAACO,GAAG,CAE3C,CAAC;EAAEC;AAAoB,CAAC,MAAM;EAC/BC,cAAc,EAAED,mBAAmB,CAACE,QAAQ;EAC5CC,OAAO,EAAEH,mBAAmB,CAACE,QAAQ;EACrCE,eAAe,EAAEJ,mBAAmB,CAACK,YAAY;EACjDC,YAAY,EAAE,KAAK;EAEnBC,GAAG,EAAE;IACHC,OAAO,EAAE,MAAM;IACfC,KAAK,EAAET,mBAAmB,CAACU,QAAQ;IACnCC,MAAM,EAAEX,mBAAmB,CAACU;EAC9B;AACF,CAAC,CAAC,CAAC;AAEH,MAAME,sBAAsB,GAAGA,CAAA,KAAM;EACnC,MAAMZ,mBAAmB,GAAGP,sBAAsB,CAAC,CAAC;EAEpD,OACEE,IAAA,CAACG,2BAA2B;IAC1B,eAAY,MAAM;IAClBE,mBAAmB,EAAEA,mBAAoB;IAAAa,QAAA,EAEzChB,KAAA;MACE,eAAY,MAAM;MAClBiB,OAAO,EAAC,WAAW;MACnBC,IAAI,EAAC,MAAM;MACXC,KAAK,EAAC,4BAA4B;MAAAH,QAAA,GAElClB,IAAA;QACEsB,CAAC,EAAC,ilBAAilB;QACnlBF,IAAI,EAAEf,mBAAmB,CAACkB;MAAc,CACzC,CAAC,EACFvB,IAAA;QACEsB,CAAC,EAAC,wLAAwL;QAC1LF,IAAI,EAAEf,mBAAmB,CAACkB;MAAc,CACzC,CAAC;IAAA,CACC;EAAC,CACqB,CAAC;AAElC,CAAC;AAED,MAAMC,8BAA8B,GAAG5B,IAAI,CAACqB,sBAAsB,CAAC;AACnEO,8BAA8B,CAACC,WAAW,GAAG,wBAAwB;AAErE,SAASD,8BAA8B,IAAIP,sBAAsB"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploadPreview.js","names":["memo","useCallback","styled","useTranslation","useOdysseyDesignTokens","DeleteIcon","MuiPropsContext","Tooltip","jsx","_jsx","jsxs","_jsxs","PreviewContainer","div","isDisabled","odysseyDesignTokens","color","TypographyColorDisabled","marginBlockStart","Spacing2","pointerEvents","UploadedFileContainer","display","justifyContent","alignItems","button","transform","padding","Spacing1","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","backgroundColor","HueNeutral100","borderColor","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","UploadedFile","name","onFileRemove","t","deleteHandler","renderDeleteButton","muiProps","_IconButton","onClick","size","children","tabIndex","ariaType","placement","text","Consumer","FileUploadPreview","fileNames","map","index","MemoizedFileUploadPreview","displayName"],"sources":["../../src/FileUploader/FileUploadPreview.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, useCallback } from \"react\";\nimport styled from \"@emotion/styled\";\nimport { IconButton } from \"@mui/material\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { FileUploaderProps } from \"./FileUploader\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { DeleteIcon } from \"../icons.generated\";\nimport { MuiPropsContext, MuiPropsContextType } from \"../MuiPropsContext\";\nimport { Tooltip } from \"../Tooltip\";\n\nconst PreviewContainer = styled.div<{\n isDisabled: FileUploaderProps[\"isDisabled\"];\n odysseyDesignTokens: DesignTokens;\n}>(({ isDisabled, odysseyDesignTokens }) => ({\n color: isDisabled ? odysseyDesignTokens.TypographyColorDisabled : \"inherit\",\n marginBlockStart: odysseyDesignTokens.Spacing2,\n pointerEvents: isDisabled ? \"none\" : \"auto\",\n}));\n\nconst UploadedFileContainer = styled.div<{ odysseyDesignTokens: DesignTokens }>(\n {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n\n button: {\n transform: \"scale(0)\",\n },\n\n \"&:hover, &:focus-within, &:focus\": {\n button: {\n transform: \"scale(1)\",\n },\n },\n },\n ({ odysseyDesignTokens }) => ({\n padding: `${odysseyDesignTokens.Spacing1} ${odysseyDesignTokens.Spacing2}`,\n borderRadius: odysseyDesignTokens.BorderRadiusMain,\n transition: `background-color ${odysseyDesignTokens.TransitionTimingMain}`,\n\n \"&:hover, &:focus-within\": {\n backgroundColor: odysseyDesignTokens.HueNeutral100,\n },\n\n \"&:focus\": {\n borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n boxShadow: `0 0 0 2px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n },\n }),\n);\n\ntype UploadedFileProps = {\n name: string;\n onFileRemove?: (name: string) => void;\n};\n\nconst UploadedFile = ({ name, onFileRemove }: UploadedFileProps) => {\n const { t } = useTranslation();\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n const deleteHandler = useCallback(() => {\n onFileRemove?.(name);\n }, [onFileRemove, name]);\n\n const renderDeleteButton = useCallback(\n (muiProps: MuiPropsContextType) => {\n return (\n <IconButton\n {...muiProps}\n aria-label={t(\"fileupload.removefile.text\")}\n onClick={deleteHandler}\n size=\"small\"\n >\n <DeleteIcon />\n </IconButton>\n );\n },\n [deleteHandler, t],\n );\n\n return (\n <UploadedFileContainer\n // tabindex added to make this element focusable\n tabIndex={0}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {name}\n <Tooltip\n ariaType=\"description\"\n placement=\"top\"\n text={t(\"fileupload.removefile.text\")}\n >\n <MuiPropsContext.Consumer>\n {renderDeleteButton}\n </MuiPropsContext.Consumer>\n </Tooltip>\n </UploadedFileContainer>\n );\n};\n\ntype FileUploadPreviewProps = {\n fileNames: string[];\n isDisabled: FileUploaderProps[\"isDisabled\"];\n onFileRemove?: (name: string) => void;\n};\n\nconst FileUploadPreview = ({\n fileNames,\n isDisabled,\n onFileRemove,\n}: FileUploadPreviewProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n\n return (\n <PreviewContainer\n data-file-preview-container=\"true\"\n isDisabled={isDisabled}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n {fileNames?.map((name, index) => (\n <UploadedFile\n key={`${index}-${name}`}\n onFileRemove={onFileRemove}\n name={name}\n />\n ))}\n </PreviewContainer>\n );\n};\n\nconst MemoizedFileUploadPreview = memo(FileUploadPreview);\nMemoizedFileUploadPreview.displayName = \"FileUploadPreview\";\n\nexport { MemoizedFileUploadPreview as FileUploadPreview };\n"],"mappings":"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"}
|
|
@@ -78,7 +78,7 @@ const ButtonAndInfoContainer = styled.div({
|
|
|
78
78
|
const CenterAlignedSupportText = styled.div({
|
|
79
79
|
textAlign: "center"
|
|
80
80
|
});
|
|
81
|
-
const
|
|
81
|
+
const FileUploader = ({
|
|
82
82
|
acceptedFileTypes,
|
|
83
83
|
errorMessage,
|
|
84
84
|
id,
|
|
@@ -192,7 +192,8 @@ const FileUpload = ({
|
|
|
192
192
|
})]
|
|
193
193
|
});
|
|
194
194
|
};
|
|
195
|
-
const
|
|
196
|
-
|
|
197
|
-
export {
|
|
198
|
-
|
|
195
|
+
const MemoizedFileUploader = memo(FileUploader);
|
|
196
|
+
MemoizedFileUploader.displayName = "FileUploader";
|
|
197
|
+
export { MemoizedFileUploader as FileUpload };
|
|
198
|
+
export { MemoizedFileUploader as FileUploader };
|
|
199
|
+
//# sourceMappingURL=FileUploader.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileUploader.js","names":["memo","useCallback","useEffect","useRef","useState","styled","useTranslation","Button","UploadIcon","Field","FileUploadPreview","FileUploadIllustration","useOdysseyDesignTokens","Support","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","fileUploadTypes","fileUploadVariants","BaseInputWrapper","div","position","alignSelf","input","width","height","opacity","InputContainer","display","alignItems","justifyContent","borderStyle","hasError","odysseyDesignTokens","padding","Spacing6","Spacing3","border","PaletteDangerMain","HueNeutral300","borderRadius","BorderRadiusMain","transition","TransitionTimingMain","borderColor","HueNeutral700","FocusOutlineColorPrimary","boxShadow","outline","FocusOutlineWidthMain","FocusOutlineStyle","outlineOffset","FocusOutlineOffsetTight","backgroundColor","HueNeutral50","BorderColorDisabled","color","TypographyColorDisabled","ButtonAndInfoContainer","flexDirection","CenterAlignedSupportText","textAlign","FileUploader","acceptedFileTypes","errorMessage","id","isDisabled","isFullWidth","isOptional","hint","HintLinkComponent","label","onChange","type","variant","t","inputRef","filesToUpload","setFilesToUpload","updateFilesToUpload","event","files","target","length","mergedFiles","value","triggerFileInputClick","current","click","removeFileFromFilesToUploadList","name","deletedFileFilteredOut","filter","file","renderFileInput","ariaDescribedBy","errorMessageElementId","labelElementId","acceptedFileTypesAsString","join","Input","accept","disabled","multiple","ref","title","children","onClick","startIcon","Boolean","fieldType","hasVisibleLabel","renderFieldComponent","fileNames","map","onFileRemove","MemoizedFileUploader","displayName","FileUpload"],"sources":["../../src/FileUploader/FileUploader.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 ChangeEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport styled from \"@emotion/styled\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { Button } from \"../Button\";\nimport { UploadIcon } from \"../icons.generated\";\nimport { Field, RenderFieldComponentProps } from \"../Field\";\nimport { FieldComponentProps } from \"../FieldComponentProps\";\nimport { FileUploadPreview } from \"./FileUploadPreview\";\nimport { FileUploadIllustration } from \"./FileUploadIllustration\";\nimport {\n useOdysseyDesignTokens,\n DesignTokens,\n} from \"../OdysseyDesignTokensContext\";\nimport { Support } from \"../Typography\";\n\nexport const fileUploadTypes = [\"single\", \"multiple\"] as const;\nexport const fileUploadVariants = [\n \"button\",\n \"dragAndDrop\",\n \"dragAndDropWithIcon\",\n] as const;\n\nconst BaseInputWrapper = styled.div({\n position: \"relative\",\n alignSelf: \"flex-start\",\n\n input: {\n position: \"absolute\",\n width: \"100%\",\n height: \"100%\",\n opacity: 0,\n },\n});\n\nconst InputContainer = styled(BaseInputWrapper)<{\n odysseyDesignTokens: DesignTokens;\n hasError: boolean;\n}>(\n {\n display: \"flex\",\n alignSelf: \"unset\",\n alignItems: \"center\",\n justifyContent: \"center\",\n\n \"&:has(input:focus)\": {\n borderStyle: \"solid\",\n },\n },\n ({ hasError, odysseyDesignTokens }) => ({\n padding: `${odysseyDesignTokens.Spacing6} ${odysseyDesignTokens.Spacing3}`,\n border: hasError\n ? `1px solid ${odysseyDesignTokens.PaletteDangerMain}`\n : `1px dashed ${odysseyDesignTokens.HueNeutral300}`,\n borderRadius: odysseyDesignTokens.BorderRadiusMain,\n transition: `border-color ${odysseyDesignTokens.TransitionTimingMain}, box-shadow ${odysseyDesignTokens.TransitionTimingMain}`,\n\n \"&:hover\": {\n borderColor: odysseyDesignTokens.HueNeutral700,\n },\n\n \"&:has(input:focus)\": {\n borderColor: odysseyDesignTokens.FocusOutlineColorPrimary,\n boxShadow: `0 0 0 1px ${odysseyDesignTokens.FocusOutlineColorPrimary}`,\n outline: `${odysseyDesignTokens.FocusOutlineWidthMain} ${odysseyDesignTokens.FocusOutlineStyle} transparent`,\n outlineOffset: odysseyDesignTokens.FocusOutlineOffsetTight,\n },\n\n \"&:has(input:disabled)\": {\n backgroundColor: odysseyDesignTokens.HueNeutral50,\n border: `1px solid ${odysseyDesignTokens.BorderColorDisabled}`,\n color: odysseyDesignTokens.TypographyColorDisabled,\n\n \"&:hover\": {\n borderColor: odysseyDesignTokens.BorderColorDisabled,\n },\n },\n }),\n);\n\nconst ButtonAndInfoContainer = styled.div({\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"center\",\n});\n\nconst CenterAlignedSupportText = styled.div({\n textAlign: \"center\",\n});\n\nexport type FileUploaderProps = {\n /**\n * an array of file types the user is able to upload. @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept#unique_file_type_specifiers for examples\n */\n acceptedFileTypes?: string[];\n /**\n * The label for the `input` element.\n */\n label: string;\n /**\n * Function that is called when the list of ifles to upload is changed\n */\n onChange: (files: File[]) => void;\n /**\n * Either `single` or `multiple`. If `multiple`, multiple files can be uploaded\n */\n type?: (typeof fileUploadTypes)[number];\n /**\n * Either `button`, `dragAndDrop` or `dragAndDropWithIcon`. Will determine how component appears visually\n */\n variant: (typeof fileUploadVariants)[number];\n} & Pick<\n FieldComponentProps,\n | \"errorMessage\"\n | \"hint\"\n | \"HintLinkComponent\"\n | \"id\"\n | \"isDisabled\"\n | \"isFullWidth\"\n | \"isOptional\"\n>;\n\nconst FileUploader = ({\n acceptedFileTypes,\n errorMessage,\n id,\n isDisabled = false,\n isFullWidth,\n isOptional,\n hint,\n HintLinkComponent,\n label,\n onChange,\n type,\n variant,\n}: FileUploaderProps) => {\n const odysseyDesignTokens = useOdysseyDesignTokens();\n const { t } = useTranslation();\n const inputRef = useRef<HTMLInputElement>(null);\n const [filesToUpload, setFilesToUpload] = useState<File[]>([]);\n\n useEffect(() => {\n onChange(filesToUpload);\n }, [filesToUpload, onChange]);\n\n const updateFilesToUpload = useCallback(\n (event: ChangeEvent<HTMLInputElement>) => {\n const { files } = event.target;\n\n if (files && files.length > 0) {\n const mergedFiles =\n type === \"multiple\"\n ? [...filesToUpload, ...files]\n : ([...files] satisfies File[] as File[]);\n\n setFilesToUpload(mergedFiles);\n }\n\n // reset input value to allow re-upload of a file with the same name\n event.target.value = \"\";\n },\n [type, filesToUpload],\n );\n\n const triggerFileInputClick = useCallback(() => {\n inputRef.current?.click();\n }, [inputRef]);\n\n const removeFileFromFilesToUploadList = useCallback<(name: string) => void>(\n (name) => {\n const deletedFileFilteredOut = filesToUpload.filter(\n (file) => file.name !== name,\n );\n setFilesToUpload(deletedFileFilteredOut);\n },\n [filesToUpload],\n );\n\n const renderFileInput = useCallback(\n ({\n ariaDescribedBy,\n errorMessageElementId,\n id,\n labelElementId,\n }: RenderFieldComponentProps) => {\n const acceptedFileTypesAsString = acceptedFileTypes?.join(\",\");\n\n const Input = () => (\n <input\n accept={acceptedFileTypesAsString}\n aria-describedby={ariaDescribedBy}\n aria-errormessage={errorMessageElementId}\n aria-labelledby={labelElementId}\n disabled={isDisabled}\n id={id}\n multiple={type === \"multiple\"}\n onChange={updateFilesToUpload}\n ref={inputRef}\n title=\"\"\n type=\"file\"\n />\n );\n\n if (variant === \"button\") {\n return (\n <>\n <BaseInputWrapper>\n <Input />\n <Button\n isDisabled={isDisabled}\n label={t(\"fileupload.button.text\")}\n onClick={triggerFileInputClick}\n startIcon={<UploadIcon />}\n variant=\"secondary\"\n />\n </BaseInputWrapper>\n </>\n );\n }\n\n return (\n <>\n <InputContainer\n hasError={Boolean(errorMessage)}\n odysseyDesignTokens={odysseyDesignTokens}\n >\n <Input />\n <ButtonAndInfoContainer>\n {variant === \"dragAndDropWithIcon\" && <FileUploadIllustration />}\n <CenterAlignedSupportText>\n <Support color=\"textSecondary\">\n {t(\"fileupload.prompt.text\")}\n </Support>\n </CenterAlignedSupportText>\n <Button\n isDisabled={isDisabled}\n label={t(\"fileupload.button.text\")}\n onClick={triggerFileInputClick}\n startIcon={<UploadIcon />}\n variant=\"secondary\"\n />\n </ButtonAndInfoContainer>\n </InputContainer>\n </>\n );\n },\n [\n acceptedFileTypes,\n errorMessage,\n isDisabled,\n inputRef,\n odysseyDesignTokens,\n triggerFileInputClick,\n t,\n type,\n updateFilesToUpload,\n variant,\n ],\n );\n\n return (\n <>\n <Field\n errorMessage={errorMessage}\n fieldType=\"single\"\n hasVisibleLabel\n hint={hint}\n HintLinkComponent={HintLinkComponent}\n id={id}\n isDisabled={isDisabled}\n isFullWidth={isFullWidth && variant !== \"button\"}\n isOptional={isOptional}\n label={label}\n renderFieldComponent={renderFileInput}\n />\n {filesToUpload.length > 0 && (\n <FileUploadPreview\n fileNames={filesToUpload.map((file) => file.name)}\n onFileRemove={removeFileFromFilesToUploadList}\n isDisabled={isDisabled}\n />\n )}\n </>\n );\n};\n\nconst MemoizedFileUploader = memo(FileUploader);\nMemoizedFileUploader.displayName = \"FileUploader\";\n\nexport { MemoizedFileUploader as FileUpload };\nexport { MemoizedFileUploader as FileUploader };\n"],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
|
|
3
|
+
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
|
|
4
|
+
*
|
|
5
|
+
* You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
|
|
6
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
7
|
+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
8
|
+
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
9
|
+
*
|
|
10
|
+
* See the License for the specific language governing permissions and limitations under the License.
|
|
11
|
+
*/
|
|
12
|
+
export * from "./FileUploader.js";
|
|
13
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/FileUploader/index.ts"],"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\nexport * from \"./FileUploader\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAVA"}
|
package/dist/Link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.js","names":["memo","useImperativeHandle","useRef","ExternalLinkIcon","jsx","_jsx","jsxs","_jsxs","linkVariantValues","Link","ariaLabel","children","href","icon","linkRef","rel","target","testId","translate","variant","onClick","localLinkRef","focus","current","_Link","ref","className","role","MemoizedLink","displayName"],"sources":["../src/Link.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useImperativeHandle, useRef } from \"react\";\nimport { ExternalLinkIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nimport { Link as MuiLink, LinkProps as MuiLinkProps } from \"@mui/material\";\n\nexport const linkVariantValues = [\"default\", \"monochrome\"] as const;\n\nexport type LinkProps = {\n /**\n * The content within the Link\n */\n children: React.ReactNode;\n /**\n * The Link destination\n */\n href: string;\n /**\n * An optional Icon component at the start of the Link\n */\n icon?: ReactElement;\n /**\n * The ref forwarded to the TextField\n */\n linkRef?: React.RefObject<FocusHandle>;\n /**\n * The click event handler for the Link\n */\n onClick?: MuiLinkProps[\"onClick\"];\n /**\n * The
|
|
1
|
+
{"version":3,"file":"Link.js","names":["memo","useImperativeHandle","useRef","ExternalLinkIcon","jsx","_jsx","jsxs","_jsxs","linkVariantValues","Link","ariaLabel","children","href","icon","linkRef","rel","target","testId","translate","variant","onClick","localLinkRef","focus","current","_Link","ref","className","role","MemoizedLink","displayName"],"sources":["../src/Link.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useImperativeHandle, useRef } from \"react\";\nimport { ExternalLinkIcon } from \"./icons.generated\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nimport { Link as MuiLink, LinkProps as MuiLinkProps } from \"@mui/material\";\n\nexport const linkVariantValues = [\"default\", \"monochrome\"] as const;\n\nexport type LinkProps = {\n /**\n * The content within the Link\n */\n children: React.ReactNode;\n /**\n * The Link destination\n */\n href: string;\n /**\n * An optional Icon component at the start of the Link\n */\n icon?: ReactElement;\n /**\n * The ref forwarded to the TextField\n */\n linkRef?: React.RefObject<FocusHandle>;\n /**\n * The click event handler for the Link\n */\n onClick?: MuiLinkProps[\"onClick\"];\n /**\n * The rel attribute defines the relationship between a linked resource and the current document\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel\n */\n rel?: string;\n /**\n * The HTML `target` attribute for the Link\n */\n target?:\n | \"_self\"\n | \"_blank\"\n | \"_parent\"\n | \"_top\"\n | (string & NonNullable<unknown>);\n /**\n * The visual presentation of the Link (default or monochrome)\n */\n variant?: (typeof linkVariantValues)[number];\n} & Pick<HtmlProps, \"ariaLabel\" | \"testId\" | \"translate\">;\n\nconst Link = ({\n ariaLabel,\n children,\n href,\n icon,\n linkRef,\n rel,\n target,\n testId,\n translate,\n variant,\n onClick,\n}: LinkProps) => {\n const localLinkRef = useRef<HTMLAnchorElement>(null);\n useImperativeHandle(\n linkRef,\n () => {\n return {\n focus: () => {\n localLinkRef.current?.focus();\n },\n };\n },\n [],\n );\n\n return (\n <MuiLink\n aria-label={ariaLabel}\n data-se={testId}\n href={href}\n ref={localLinkRef}\n rel={rel}\n target={target}\n translate={translate}\n variant={variant}\n onClick={onClick}\n >\n {icon && <span className=\"Link-icon\">{icon}</span>}\n\n {children}\n\n {target === \"_blank\" && (\n <span className=\"Link-indicator\" role=\"presentation\">\n <ExternalLinkIcon />\n </span>\n )}\n </MuiLink>\n );\n};\n\nconst MemoizedLink = memo(Link);\n\nMemoizedLink.displayName = \"Link\";\n\nexport { MemoizedLink as Link };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAgBC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAC/DC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMzB,OAAO,MAAMC,iBAAiB,GAAG,CAAC,SAAS,EAAE,YAAY,CAAU;AA4CnE,MAAMC,IAAI,GAAGA,CAAC;EACZC,SAAS;EACTC,QAAQ;EACRC,IAAI;EACJC,IAAI;EACJC,OAAO;EACPC,GAAG;EACHC,MAAM;EACNC,MAAM;EACNC,SAAS;EACTC,OAAO;EACPC;AACS,CAAC,KAAK;EACf,MAAMC,YAAY,GAAGnB,MAAM,CAAoB,IAAI,CAAC;EACpDD,mBAAmB,CACjBa,OAAO,EACP,MAAM;IACJ,OAAO;MACLQ,KAAK,EAAEA,CAAA,KAAM;QACXD,YAAY,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAC/B;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,OACEf,KAAA,CAAAiB,KAAA;IACE,cAAYd,SAAU;IACtB,WAASO,MAAO;IAChBL,IAAI,EAAEA,IAAK;IACXa,GAAG,EAAEJ,YAAa;IAClBN,GAAG,EAAEA,GAAI;IACTC,MAAM,EAAEA,MAAO;IACfE,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IAAAT,QAAA,GAEhBE,IAAI,IAAIR,IAAA;MAAMqB,SAAS,EAAC,WAAW;MAAAf,QAAA,EAAEE;IAAI,CAAO,CAAC,EAEjDF,QAAQ,EAERK,MAAM,KAAK,QAAQ,IAClBX,IAAA;MAAMqB,SAAS,EAAC,gBAAgB;MAACC,IAAI,EAAC,cAAc;MAAAhB,QAAA,EAClDN,IAAA,CAACF,gBAAgB,IAAE;IAAC,CAChB,CACP;EAAA,CACM,CAAC;AAEd,CAAC;AAED,MAAMyB,YAAY,GAAG5B,IAAI,CAACS,IAAI,CAAC;AAE/BmB,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAInB,IAAI"}
|
package/dist/OdysseyProvider.js
CHANGED
|
@@ -11,12 +11,16 @@ import _ScopedCssBaseline from "@mui/material/ScopedCssBaseline";
|
|
|
11
11
|
* See the License for the specific language governing permissions and limitations under the License.
|
|
12
12
|
*/
|
|
13
13
|
|
|
14
|
-
import { memo } from "react";
|
|
14
|
+
import { memo, useMemo } from "react";
|
|
15
15
|
import { OdysseyCacheProvider } from "./OdysseyCacheProvider.js";
|
|
16
16
|
import { OdysseyThemeProvider } from "./OdysseyThemeProvider.js";
|
|
17
17
|
import { OdysseyTranslationProvider } from "./OdysseyTranslationProvider.js";
|
|
18
|
+
import { ContrastModeProvider, useContrastContext } from "./ContrastModeProvider.js";
|
|
18
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
|
-
const
|
|
20
|
+
const scopedCssBaselineStyles = {
|
|
21
|
+
height: "inherit"
|
|
22
|
+
};
|
|
23
|
+
const OdysseyProviderInner = ({
|
|
20
24
|
children,
|
|
21
25
|
designTokensOverride,
|
|
22
26
|
emotionRoot,
|
|
@@ -28,25 +32,45 @@ const OdysseyProvider = ({
|
|
|
28
32
|
stylisPlugins,
|
|
29
33
|
themeOverride,
|
|
30
34
|
translationOverrides
|
|
31
|
-
}) =>
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
35
|
+
}) => {
|
|
36
|
+
const {
|
|
37
|
+
contrastMode
|
|
38
|
+
} = useContrastContext();
|
|
39
|
+
const memoizedThemeProps = useMemo(() => ({
|
|
40
|
+
...themeOverride,
|
|
41
|
+
odysseyContrastMode: contrastMode
|
|
42
|
+
}), [themeOverride, contrastMode]);
|
|
43
|
+
return _jsx(OdysseyCacheProvider, {
|
|
44
|
+
emotionRoot: emotionRoot,
|
|
45
|
+
emotionRootElement: emotionRootElement,
|
|
46
|
+
hasShadowDom: Boolean(shadowRootElement || shadowDomElement),
|
|
47
|
+
nonce: nonce,
|
|
48
|
+
stylisPlugins: stylisPlugins,
|
|
49
|
+
children: _jsx(OdysseyThemeProvider, {
|
|
50
|
+
designTokensOverride: designTokensOverride,
|
|
51
|
+
shadowDomElement: shadowDomElement,
|
|
52
|
+
shadowRootElement: shadowRootElement,
|
|
53
|
+
themeOverride: memoizedThemeProps,
|
|
54
|
+
children: _jsx(_ScopedCssBaseline, {
|
|
55
|
+
sx: scopedCssBaselineStyles,
|
|
56
|
+
children: _jsx(OdysseyTranslationProvider, {
|
|
57
|
+
languageCode: languageCode,
|
|
58
|
+
translationOverrides: translationOverrides,
|
|
59
|
+
children: children
|
|
60
|
+
})
|
|
46
61
|
})
|
|
47
62
|
})
|
|
63
|
+
});
|
|
64
|
+
};
|
|
65
|
+
const OdysseyProvider = ({
|
|
66
|
+
contrastMode,
|
|
67
|
+
...providerProps
|
|
68
|
+
}) => _jsx(ContrastModeProvider, {
|
|
69
|
+
contrastMode: contrastMode,
|
|
70
|
+
children: _jsx(OdysseyProviderInner, {
|
|
71
|
+
...providerProps
|
|
48
72
|
})
|
|
49
73
|
});
|
|
50
|
-
const
|
|
51
|
-
export {
|
|
74
|
+
const MemoizedOdysseyProvider = memo(OdysseyProvider);
|
|
75
|
+
export { MemoizedOdysseyProvider as OdysseyProvider };
|
|
52
76
|
//# sourceMappingURL=OdysseyProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OdysseyProvider.js","names":["memo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","jsx","_jsx","
|
|
1
|
+
{"version":3,"file":"OdysseyProvider.js","names":["memo","useMemo","OdysseyCacheProvider","OdysseyThemeProvider","OdysseyTranslationProvider","ContrastModeProvider","useContrastContext","jsx","_jsx","scopedCssBaselineStyles","height","OdysseyProviderInner","children","designTokensOverride","emotionRoot","emotionRootElement","shadowDomElement","shadowRootElement","languageCode","nonce","stylisPlugins","themeOverride","translationOverrides","contrastMode","memoizedThemeProps","odysseyContrastMode","hasShadowDom","Boolean","_ScopedCssBaseline","sx","OdysseyProvider","providerProps","MemoizedOdysseyProvider"],"sources":["../src/OdysseyProvider.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, useMemo } from \"react\";\nimport { ScopedCssBaseline } from \"@mui/material\";\n\nimport {\n OdysseyCacheProvider,\n OdysseyCacheProviderProps,\n} from \"./OdysseyCacheProvider\";\nimport {\n OdysseyThemeProvider,\n OdysseyThemeProviderProps,\n} from \"./OdysseyThemeProvider\";\nimport {\n OdysseyTranslationProvider,\n OdysseyTranslationProviderProps,\n} from \"./OdysseyTranslationProvider\";\nimport { DefaultSupportedLanguages } from \"./OdysseyTranslationProvider.types\";\nimport {\n ContrastMode,\n ContrastModeProvider,\n useContrastContext,\n} from \"./ContrastModeProvider\";\n\nconst scopedCssBaselineStyles = {\n height: \"inherit\",\n};\n\nexport type OdysseyProviderProps<\n SupportedLanguages extends string = DefaultSupportedLanguages,\n> = OdysseyCacheProviderProps &\n OdysseyThemeProviderProps &\n OdysseyTranslationProviderProps<SupportedLanguages> & {\n children: ReactNode;\n contrastMode?: ContrastMode;\n };\n\nconst OdysseyProviderInner = <SupportedLanguages extends string>({\n children,\n designTokensOverride,\n emotionRoot,\n emotionRootElement,\n shadowDomElement,\n shadowRootElement,\n languageCode,\n nonce,\n stylisPlugins,\n themeOverride,\n translationOverrides,\n}: OdysseyProviderProps<SupportedLanguages>) => {\n const { contrastMode } = useContrastContext();\n\n const memoizedThemeProps = useMemo(\n () => ({\n ...themeOverride,\n odysseyContrastMode: contrastMode,\n }),\n [themeOverride, contrastMode],\n );\n\n return (\n <OdysseyCacheProvider\n emotionRoot={emotionRoot}\n emotionRootElement={emotionRootElement}\n hasShadowDom={Boolean(shadowRootElement || shadowDomElement)}\n nonce={nonce}\n stylisPlugins={stylisPlugins}\n >\n <OdysseyThemeProvider\n designTokensOverride={designTokensOverride}\n shadowDomElement={shadowDomElement}\n shadowRootElement={shadowRootElement}\n themeOverride={memoizedThemeProps}\n >\n <ScopedCssBaseline sx={scopedCssBaselineStyles}>\n <OdysseyTranslationProvider<SupportedLanguages>\n languageCode={languageCode}\n translationOverrides={translationOverrides}\n >\n {children}\n </OdysseyTranslationProvider>\n </ScopedCssBaseline>\n </OdysseyThemeProvider>\n </OdysseyCacheProvider>\n );\n};\n\nconst OdysseyProvider = <SupportedLanguages extends string>({\n contrastMode,\n ...providerProps\n}: OdysseyProviderProps<SupportedLanguages>) => (\n <ContrastModeProvider contrastMode={contrastMode}>\n <OdysseyProviderInner {...providerProps} />\n </ContrastModeProvider>\n);\n\nconst MemoizedOdysseyProvider = memo(OdysseyProvider) as typeof OdysseyProvider;\n\nexport { MemoizedOdysseyProvider as OdysseyProvider };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAaC,OAAO,QAAQ,OAAO;AAAC,SAI/CC,oBAAoB;AAAA,SAIpBC,oBAAoB;AAAA,SAIpBC,0BAA0B;AAAA,SAM1BC,oBAAoB,EACpBC,kBAAkB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGpB,MAAMC,uBAAuB,GAAG;EAC9BC,MAAM,EAAE;AACV,CAAC;AAWD,MAAMC,oBAAoB,GAAGA,CAAoC;EAC/DC,QAAQ;EACRC,oBAAoB;EACpBC,WAAW;EACXC,kBAAkB;EAClBC,gBAAgB;EAChBC,iBAAiB;EACjBC,YAAY;EACZC,KAAK;EACLC,aAAa;EACbC,aAAa;EACbC;AACwC,CAAC,KAAK;EAC9C,MAAM;IAAEC;EAAa,CAAC,GAAGjB,kBAAkB,CAAC,CAAC;EAE7C,MAAMkB,kBAAkB,GAAGvB,OAAO,CAChC,OAAO;IACL,GAAGoB,aAAa;IAChBI,mBAAmB,EAAEF;EACvB,CAAC,CAAC,EACF,CAACF,aAAa,EAAEE,YAAY,CAC9B,CAAC;EAED,OACEf,IAAA,CAACN,oBAAoB;IACnBY,WAAW,EAAEA,WAAY;IACzBC,kBAAkB,EAAEA,kBAAmB;IACvCW,YAAY,EAAEC,OAAO,CAACV,iBAAiB,IAAID,gBAAgB,CAAE;IAC7DG,KAAK,EAAEA,KAAM;IACbC,aAAa,EAAEA,aAAc;IAAAR,QAAA,EAE7BJ,IAAA,CAACL,oBAAoB;MACnBU,oBAAoB,EAAEA,oBAAqB;MAC3CG,gBAAgB,EAAEA,gBAAiB;MACnCC,iBAAiB,EAAEA,iBAAkB;MACrCI,aAAa,EAAEG,kBAAmB;MAAAZ,QAAA,EAElCJ,IAAA,CAAAoB,kBAAA;QAAmBC,EAAE,EAAEpB,uBAAwB;QAAAG,QAAA,EAC7CJ,IAAA,CAACJ,0BAA0B;UACzBc,YAAY,EAAEA,YAAa;UAC3BI,oBAAoB,EAAEA,oBAAqB;UAAAV,QAAA,EAE1CA;QAAQ,CACiB;MAAC,CACZ;IAAC,CACA;EAAC,CACH,CAAC;AAE3B,CAAC;AAED,MAAMkB,eAAe,GAAGA,CAAoC;EAC1DP,YAAY;EACZ,GAAGQ;AACqC,CAAC,KACzCvB,IAAA,CAACH,oBAAoB;EAACkB,YAAY,EAAEA,YAAa;EAAAX,QAAA,EAC/CJ,IAAA,CAACG,oBAAoB;IAAA,GAAKoB;EAAa,CAAG;AAAC,CACvB,CACvB;AAED,MAAMC,uBAAuB,GAAGhC,IAAI,CAAC8B,eAAe,CAA2B;AAE/E,SAASE,uBAAuB,IAAIF,eAAe"}
|
package/dist/Radio.js
CHANGED
|
@@ -21,14 +21,14 @@ const Radio = ({
|
|
|
21
21
|
hint,
|
|
22
22
|
inputRef,
|
|
23
23
|
isChecked,
|
|
24
|
-
isDisabled
|
|
24
|
+
isDisabled,
|
|
25
25
|
isInvalid,
|
|
26
26
|
label: labelProp,
|
|
27
27
|
name,
|
|
28
28
|
testId,
|
|
29
29
|
translate,
|
|
30
30
|
value,
|
|
31
|
-
isReadOnly
|
|
31
|
+
isReadOnly,
|
|
32
32
|
onChange: onChangeProp,
|
|
33
33
|
onBlur: onBlurProp,
|
|
34
34
|
onClick
|
package/dist/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","names":["memo","useCallback","useMemo","useRef","useImperativeHandle","Typography","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Radio","hint","inputRef","isChecked","isDisabled","isInvalid","label","labelProp","name","testId","translate","value","isReadOnly","onChange","onChangeProp","onBlur","onBlurProp","onClick","localInputRef","focus","current","children","component","_FormHelperText","event","checked","preventDefault","handleClick","stopPropagation","_FormControlLabel","className","control","_Radio","inputProps","readOnly","tabIndex","undefined","disabled","sx","cursor","MemoizedRadio","displayName"],"sources":["../src/Radio.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 FormControlLabel,\n FormControlLabelProps as MuiFormControlLabelProps,\n FormHelperText,\n Radio as MuiRadio,\n RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport { Typography } from \"./Typography\";\n\nexport type RadioProps = {\n /**\n * The ref forwarded to the Radio\n */\n inputRef?: React.RefObject<FocusHandle>;\n /**\n * Determines whether the Radio button is checked\n */\n isChecked?: boolean;\n /**\n * If `true`, the radio button has an invalid value\n */\n isInvalid?: boolean;\n /**\n * The label text for the Radio\n */\n label: string;\n /**\n * The value attribute of the Radio\n */\n value: string;\n /**\n * Callback fired when the blur event happens. Provides event value.\n */\n onChange?: MuiRadioProps[\"onChange\"];\n onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n onClick?: React.MouseEventHandler<HTMLSpanElement>;\n} & Pick<\n FieldComponentProps,\n \"hint\" | \"id\" | \"isDisabled\" | \"isReadOnly\" | \"name\"\n> &\n Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n hint,\n inputRef,\n isChecked,\n isDisabled
|
|
1
|
+
{"version":3,"file":"Radio.js","names":["memo","useCallback","useMemo","useRef","useImperativeHandle","Typography","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","Radio","hint","inputRef","isChecked","isDisabled","isInvalid","label","labelProp","name","testId","translate","value","isReadOnly","onChange","onChangeProp","onBlur","onBlurProp","onClick","localInputRef","focus","current","children","component","_FormHelperText","event","checked","preventDefault","handleClick","stopPropagation","_FormControlLabel","className","control","_Radio","inputProps","readOnly","tabIndex","undefined","disabled","sx","cursor","MemoizedRadio","displayName"],"sources":["../src/Radio.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 FormControlLabel,\n FormControlLabelProps as MuiFormControlLabelProps,\n FormHelperText,\n Radio as MuiRadio,\n RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport { FocusHandle } from \"./inputUtils\";\nimport { Typography } from \"./Typography\";\n\nexport type RadioProps = {\n /**\n * The ref forwarded to the Radio\n */\n inputRef?: React.RefObject<FocusHandle>;\n /**\n * Determines whether the Radio button is checked\n */\n isChecked?: boolean;\n /**\n * If `true`, the radio button has an invalid value\n */\n isInvalid?: boolean;\n /**\n * The label text for the Radio\n */\n label: string;\n /**\n * The value attribute of the Radio\n */\n value: string;\n /**\n * Callback fired when the blur event happens. Provides event value.\n */\n onChange?: MuiRadioProps[\"onChange\"];\n onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n onClick?: React.MouseEventHandler<HTMLSpanElement>;\n} & Pick<\n FieldComponentProps,\n \"hint\" | \"id\" | \"isDisabled\" | \"isReadOnly\" | \"name\"\n> &\n Pick<HtmlProps, \"testId\" | \"translate\">;\n\nconst Radio = ({\n hint,\n inputRef,\n isChecked,\n isDisabled,\n isInvalid,\n label: labelProp,\n name,\n testId,\n translate,\n value,\n isReadOnly,\n onChange: onChangeProp,\n onBlur: onBlurProp,\n onClick,\n}: RadioProps) => {\n const localInputRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(\n inputRef,\n () => {\n return {\n focus: () => {\n localInputRef.current?.focus();\n },\n };\n },\n [],\n );\n\n const label = useMemo(\n () => (\n <>\n <Typography component=\"span\">{labelProp}</Typography>\n {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n </>\n ),\n [labelProp, hint, translate],\n );\n\n const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n (event, checked) => {\n if (isReadOnly) {\n event.preventDefault();\n } else {\n onChangeProp?.(event, checked);\n }\n },\n [onChangeProp, isReadOnly],\n );\n\n const handleClick = useCallback<React.MouseEventHandler<HTMLSpanElement>>(\n (event) => {\n if (isReadOnly) {\n event.stopPropagation();\n event.preventDefault();\n }\n },\n [isReadOnly],\n );\n const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n (event) => {\n onBlurProp?.(event);\n },\n [onBlurProp],\n );\n\n return (\n <FormControlLabel\n checked={isChecked}\n className={isInvalid ? \"Mui-error\" : \"\"}\n control={\n <MuiRadio\n inputProps={{\n \"data-se\": testId,\n \"aria-disabled\": isDisabled || isReadOnly,\n readOnly: isReadOnly,\n tabIndex: isReadOnly ? 0 : undefined,\n }}\n inputRef={localInputRef}\n onChange={onChange}\n onClick={onClick || handleClick}\n disabled={isDisabled}\n />\n }\n label={label}\n name={name}\n translate={translate}\n value={value}\n onBlur={onBlur}\n disabled={isDisabled}\n sx={{\n ...(isReadOnly && {\n cursor: \"default\",\n \"& .MuiTypography-root\": {\n cursor: \"default\",\n },\n }),\n }}\n />\n );\n};\n\nconst MemoizedRadio = memo(Radio);\nMemoizedRadio.displayName = \"Radio\";\n\nexport { MemoizedRadio as Radio };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AASA,SAASA,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,MAAM,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAIvEC,UAAU;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAmCnB,MAAMC,KAAK,GAAGA,CAAC;EACbC,IAAI;EACJC,QAAQ;EACRC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,KAAK,EAAEC,SAAS;EAChBC,IAAI;EACJC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,UAAU;EACVC,QAAQ,EAAEC,YAAY;EACtBC,MAAM,EAAEC,UAAU;EAClBC;AACU,CAAC,KAAK;EAChB,MAAMC,aAAa,GAAG3B,MAAM,CAAmB,IAAI,CAAC;EACpDC,mBAAmB,CACjBU,QAAQ,EACR,MAAM;IACJ,OAAO;MACLiB,KAAK,EAAEA,CAAA,KAAM;QACXD,aAAa,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAChC;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAMb,KAAK,GAAGhB,OAAO,CACnB,MACES,KAAA,CAAAF,SAAA;IAAAwB,QAAA,GACE1B,IAAA,CAACF,UAAU;MAAC6B,SAAS,EAAC,MAAM;MAAAD,QAAA,EAAEd;IAAS,CAAa,CAAC,EACpDN,IAAI,IAAIN,IAAA,CAAA4B,eAAA;MAAgBb,SAAS,EAAEA,SAAU;MAAAW,QAAA,EAAEpB;IAAI,CAAiB,CAAC;EAAA,CACtE,CACH,EACD,CAACM,SAAS,EAAEN,IAAI,EAAES,SAAS,CAC7B,CAAC;EAED,MAAMG,QAAQ,GAAGxB,WAAW,CAC1B,CAACmC,KAAK,EAAEC,OAAO,KAAK;IAClB,IAAIb,UAAU,EAAE;MACdY,KAAK,CAACE,cAAc,CAAC,CAAC;IACxB,CAAC,MAAM;MACLZ,YAAY,GAAGU,KAAK,EAAEC,OAAO,CAAC;IAChC;EACF,CAAC,EACD,CAACX,YAAY,EAAEF,UAAU,CAC3B,CAAC;EAED,MAAMe,WAAW,GAAGtC,WAAW,CAC5BmC,KAAK,IAAK;IACT,IAAIZ,UAAU,EAAE;MACdY,KAAK,CAACI,eAAe,CAAC,CAAC;MACvBJ,KAAK,CAACE,cAAc,CAAC,CAAC;IACxB;EACF,CAAC,EACD,CAACd,UAAU,CACb,CAAC;EACD,MAAMG,MAAM,GAAG1B,WAAW,CACvBmC,KAAK,IAAK;IACTR,UAAU,GAAGQ,KAAK,CAAC;EACrB,CAAC,EACD,CAACR,UAAU,CACb,CAAC;EAED,OACErB,IAAA,CAAAkC,iBAAA;IACEJ,OAAO,EAAEtB,SAAU;IACnB2B,SAAS,EAAEzB,SAAS,GAAG,WAAW,GAAG,EAAG;IACxC0B,OAAO,EACLpC,IAAA,CAAAqC,MAAA;MACEC,UAAU,EAAE;QACV,SAAS,EAAExB,MAAM;QACjB,eAAe,EAAEL,UAAU,IAAIQ,UAAU;QACzCsB,QAAQ,EAAEtB,UAAU;QACpBuB,QAAQ,EAAEvB,UAAU,GAAG,CAAC,GAAGwB;MAC7B,CAAE;MACFlC,QAAQ,EAAEgB,aAAc;MACxBL,QAAQ,EAAEA,QAAS;MACnBI,OAAO,EAAEA,OAAO,IAAIU,WAAY;MAChCU,QAAQ,EAAEjC;IAAW,CACtB,CACF;IACDE,KAAK,EAAEA,KAAM;IACbE,IAAI,EAAEA,IAAK;IACXE,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbI,MAAM,EAAEA,MAAO;IACfsB,QAAQ,EAAEjC,UAAW;IACrBkC,EAAE,EAAE;MACF,IAAI1B,UAAU,IAAI;QAChB2B,MAAM,EAAE,SAAS;QACjB,uBAAuB,EAAE;UACvBA,MAAM,EAAE;QACV;MACF,CAAC;IACH;EAAE,CACH,CAAC;AAEN,CAAC;AAED,MAAMC,aAAa,GAAGpD,IAAI,CAACY,KAAK,CAAC;AACjCwC,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIxC,KAAK"}
|
package/dist/Select.js
CHANGED
|
@@ -27,6 +27,42 @@ import { useOdysseyDesignTokens } from "./OdysseyDesignTokensContext.js";
|
|
|
27
27
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
28
28
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
29
29
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
30
|
+
export const SelectTestSelector = {
|
|
31
|
+
accessibleText: {
|
|
32
|
+
errorMessage: "errorMessage",
|
|
33
|
+
hint: "description",
|
|
34
|
+
label: "label"
|
|
35
|
+
},
|
|
36
|
+
children: {
|
|
37
|
+
list: {
|
|
38
|
+
accessibleText: {
|
|
39
|
+
label: "label"
|
|
40
|
+
},
|
|
41
|
+
children: {
|
|
42
|
+
listItem: {
|
|
43
|
+
accessibleText: {
|
|
44
|
+
label: "label"
|
|
45
|
+
},
|
|
46
|
+
elementSelector: {
|
|
47
|
+
method: "ByRole",
|
|
48
|
+
options: {
|
|
49
|
+
label: "name"
|
|
50
|
+
},
|
|
51
|
+
role: "option"
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
},
|
|
55
|
+
isControlledElement: true
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
elementSelector: {
|
|
59
|
+
method: "ByRole",
|
|
60
|
+
options: {
|
|
61
|
+
label: "name"
|
|
62
|
+
},
|
|
63
|
+
role: "combobox"
|
|
64
|
+
}
|
|
65
|
+
};
|
|
30
66
|
const SelectContainer = styled.div`
|
|
31
67
|
position: relative;
|
|
32
68
|
width: 100%;
|