@okta/odyssey-react-mui 1.13.2 → 1.13.3
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 +4 -0
- package/dist/Checkbox.js +1 -1
- package/dist/Checkbox.js.map +1 -1
- package/dist/src/Checkbox.d.ts +1 -1
- package/dist/src/Checkbox.d.ts.map +1 -1
- package/dist/src/theme/components.d.ts.map +1 -1
- package/dist/theme/components.js +5 -0
- package/dist/theme/components.js.map +1 -1
- package/dist/tsconfig.production.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/Checkbox.tsx +2 -2
- package/src/theme/components.tsx +5 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
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.3](https://github.com/okta/odyssey/compare/v1.13.2...v1.13.3) (2024-02-09)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @okta/odyssey-react-mui
|
|
9
|
+
|
|
6
10
|
## [1.13.2](https://github.com/okta/odyssey/compare/v1.13.1...v1.13.2) (2024-02-08)
|
|
7
11
|
|
|
8
12
|
### Bug Fixes
|
package/dist/Checkbox.js
CHANGED
|
@@ -15,8 +15,8 @@ import _FormHelperText from "@mui/material/FormHelperText";
|
|
|
15
15
|
|
|
16
16
|
import { useTranslation } from "react-i18next";
|
|
17
17
|
import { memo, useCallback, useMemo, useRef, useImperativeHandle } from "react";
|
|
18
|
-
import { Typography } from "./Typography.js";
|
|
19
18
|
import { ComponentControlledState, getControlState } from "./inputUtils.js";
|
|
19
|
+
import { Typography } from "./Typography.js";
|
|
20
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
21
|
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
22
22
|
import { jsx as _jsx } from "react/jsx-runtime";
|
package/dist/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","useImperativeHandle","
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","useImperativeHandle","ComponentControlledState","getControlState","Typography","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","id","idOverride","inputRef","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","translate","validity","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","localInputRef","focus","children","component","color","_FormHelperText","event","_FormControlLabel","sx","alignItems","className","control","_Checkbox","indeterminate","required","inputProps","marginBlockStart","disabled","MemoizedCheckbox","displayName"],"sources":["../src/Checkbox.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 { useTranslation } from \"react-i18next\";\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport {\n Checkbox as MuiCheckbox,\n CheckboxProps as MuiCheckboxProps,\n FormControlLabel,\n FormControlLabelProps as MuiFormControlLabelProps,\n FormHelperText,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\nimport type { HtmlProps } from \"./HtmlProps\";\nimport {\n ComponentControlledState,\n FocusHandle,\n getControlState,\n} from \"./inputUtils\";\nimport { Typography } from \"./Typography\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nexport type CheckboxProps = {\n /**\n * The ARIA label for the Checkbox\n */\n ariaLabel?: string;\n /**\n * The ID of the element that labels the Checkbox\n */\n ariaLabelledBy?: string;\n /**\n * The id of the `input` element.\n */\n id?: string;\n /**\n * The ref forwarded to the Checkbox\n */\n inputRef?: React.RefObject<FocusHandle>;\n /**\n * Determines whether the Checkbox is disabled\n */\n isDisabled?: boolean;\n /**\n * Determines whether the Checkbox is in an indeterminate state\n */\n isIndeterminate?: boolean;\n /**\n * Determines whether the Checkbox is required\n */\n isRequired?: boolean;\n /**\n * The label text for the Checkbox\n */\n label?: string;\n /**\n * The helper text content\n */\n hint?: string;\n /**\n * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n */\n validity?: (typeof checkboxValidityValues)[number];\n /**\n * The value attribute of the Checkbox\n */\n value?: string;\n /**\n * Callback fired when the blur event happens. Provides event value.\n */\n onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n CheckedFieldProps<MuiCheckboxProps> &\n HtmlProps;\n\nconst Checkbox = ({\n ariaLabel,\n ariaLabelledBy,\n id: idOverride,\n inputRef,\n isChecked,\n isDefaultChecked,\n isDisabled,\n isIndeterminate,\n isRequired,\n label: labelProp,\n hint,\n name: nameOverride,\n onChange: onChangeProp,\n onBlur: onBlurProp,\n testId,\n translate,\n validity = \"inherit\",\n value,\n}: CheckboxProps) => {\n const { t } = useTranslation();\n const controlledStateRef = useRef(\n getControlState({\n controlledValue: isChecked,\n uncontrolledValue: isDefaultChecked,\n })\n );\n const inputValues = useMemo(() => {\n if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n return { checked: isChecked };\n }\n return { defaultChecked: isDefaultChecked };\n }, [isDefaultChecked, isChecked]);\n\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 return (\n <>\n {labelProp}\n {isRequired && (\n <>\n {\" \"}\n <Typography component=\"span\" color=\"textSecondary\">\n ({t(\"fieldlabel.required.text\")})\n </Typography>\n </>\n )}\n {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n </>\n );\n }, [isRequired, labelProp, hint, t, translate]);\n\n const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n (event, checked) => {\n onChangeProp?.(event, checked);\n },\n [onChangeProp]\n );\n\n const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n (event) => {\n onBlurProp?.(event);\n },\n [onBlurProp]\n );\n\n return (\n <FormControlLabel\n sx={{ alignItems: \"flex-start\" }}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n className={\n validity === \"invalid\"\n ? \"Mui-error\"\n : validity === \"valid\"\n ? \"Mui-valid\"\n : \"\"\n }\n control={\n <MuiCheckbox\n {...inputValues}\n indeterminate={isIndeterminate}\n onChange={onChange}\n required={isRequired}\n inputProps={{\n \"data-se\": testId,\n }}\n inputRef={localInputRef}\n sx={() => ({\n marginBlockStart: \"2px\",\n })}\n />\n }\n disabled={isDisabled}\n id={idOverride}\n label={label}\n name={nameOverride ?? idOverride}\n value={value}\n required={isRequired}\n onBlur={onBlur}\n translate={translate}\n />\n );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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"}
|
package/dist/src/Checkbox.d.ts
CHANGED
|
@@ -12,9 +12,9 @@
|
|
|
12
12
|
/// <reference types="react" />
|
|
13
13
|
import { CheckboxProps as MuiCheckboxProps, FormControlLabelProps as MuiFormControlLabelProps } from "@mui/material";
|
|
14
14
|
import { FieldComponentProps } from "./FieldComponentProps";
|
|
15
|
+
import { CheckedFieldProps } from "./FormCheckedProps";
|
|
15
16
|
import type { HtmlProps } from "./HtmlProps";
|
|
16
17
|
import { FocusHandle } from "./inputUtils";
|
|
17
|
-
import { CheckedFieldProps } from "./FormCheckedProps";
|
|
18
18
|
export declare const checkboxValidityValues: readonly ["valid", "invalid", "inherit"];
|
|
19
19
|
export type CheckboxProps = {
|
|
20
20
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAIH,OAAO,EAEL,aAAa,IAAI,gBAAgB,EAEjC,qBAAqB,IAAI,wBAAwB,EAElD,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAIH,OAAO,EAEL,aAAa,IAAI,gBAAgB,EAEjC,qBAAqB,IAAI,wBAAwB,EAElD,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,EAEL,WAAW,EAEZ,MAAM,cAAc,CAAC;AAGtB,eAAO,MAAM,sBAAsB,0CAA2C,CAAC;AAE/E,MAAM,MAAM,aAAa,GAAG;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACxC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;IACnD;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,wBAAwB,CAAC,QAAQ,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,GACzD,iBAAiB,CAAC,gBAAgB,CAAC,GACnC,SAAS,CAAC;AAuHZ,QAAA,MAAM,gBAAgB,mSAlGnB,aAAa,iBAkGuB,CAAC;AAGxC,OAAO,EAAE,gBAAgB,IAAI,QAAQ,EAAE,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqC7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,UAAU;mBAIN,YAAY;;MAEzB,YAAY,CAAC,YAAY,
|
|
1
|
+
{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/theme/components.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAqC7C,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,eAAO,MAAM,UAAU;mBAIN,YAAY;;MAEzB,YAAY,CAAC,YAAY,CAgpF5B,CAAC"}
|
package/dist/theme/components.js
CHANGED
|
@@ -699,6 +699,7 @@ export const components = _ref => {
|
|
|
699
699
|
} = _ref13;
|
|
700
700
|
return {
|
|
701
701
|
width: `${odysseyTokens.TypographyLineHeightUi}em`,
|
|
702
|
+
minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
|
|
702
703
|
height: `${odysseyTokens.TypographyLineHeightUi}em`,
|
|
703
704
|
borderRadius: odysseyTokens.BorderRadiusTight,
|
|
704
705
|
borderWidth: odysseyTokens.BorderWidthMain,
|
|
@@ -1436,6 +1437,9 @@ export const components = _ref => {
|
|
|
1436
1437
|
"&.Mui-disabled": {
|
|
1437
1438
|
pointerEvents: "none"
|
|
1438
1439
|
},
|
|
1440
|
+
[`:has(> .${radioClasses.root})`]: {
|
|
1441
|
+
alignItems: "flex-start"
|
|
1442
|
+
},
|
|
1439
1443
|
[`& .${checkboxClasses.root}`]: {
|
|
1440
1444
|
marginBlockStart: 0
|
|
1441
1445
|
},
|
|
@@ -1925,6 +1929,7 @@ export const components = _ref => {
|
|
|
1925
1929
|
} = _ref26;
|
|
1926
1930
|
return {
|
|
1927
1931
|
width: `${odysseyTokens.TypographyLineHeightUi}em`,
|
|
1932
|
+
minWidth: `${odysseyTokens.TypographyLineHeightUi}em`,
|
|
1928
1933
|
height: `${odysseyTokens.TypographyLineHeightUi}em`,
|
|
1929
1934
|
borderRadius: `${odysseyTokens.TypographyLineHeightUi}em`,
|
|
1930
1935
|
borderWidth: odysseyTokens.BorderWidthMain,
|