@okta/odyssey-react-mui 1.7.1 → 1.8.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 +6 -0
- package/dist/Checkbox.js +17 -11
- package/dist/Checkbox.js.map +1 -1
- package/dist/src/Checkbox.d.ts +5 -1
- package/dist/src/Checkbox.d.ts.map +1 -1
- package/dist/tsconfig.production.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/Checkbox.tsx +25 -13
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,12 @@
|
|
|
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.8.0](https://github.com/okta/odyssey/compare/v1.7.1...v1.8.0) (2023-12-01)
|
|
7
|
+
|
|
8
|
+
### Features
|
|
9
|
+
|
|
10
|
+
- add hint prop to Checkbox ([#2050](https://github.com/okta/odyssey/issues/2050)) ([1fdc55e](https://github.com/okta/odyssey/commit/1fdc55e667c89b7768f300a160d550a62e6e8eb0))
|
|
11
|
+
|
|
6
12
|
## [1.7.1](https://github.com/okta/odyssey/compare/v1.7.0...v1.7.1) (2023-12-01)
|
|
7
13
|
|
|
8
14
|
**Note:** Version bump only for package @okta/odyssey-react-mui
|
package/dist/Checkbox.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _FormControlLabel from "@mui/material/FormControlLabel";
|
|
2
2
|
import _Checkbox from "@mui/material/Checkbox";
|
|
3
|
+
import _FormHelperText from "@mui/material/FormHelperText";
|
|
3
4
|
/*!
|
|
4
5
|
* Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.
|
|
5
6
|
* The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
|
|
@@ -31,6 +32,7 @@ const Checkbox = _ref => {
|
|
|
31
32
|
isIndeterminate,
|
|
32
33
|
isRequired,
|
|
33
34
|
label: labelProp,
|
|
35
|
+
hint,
|
|
34
36
|
name: nameOverride,
|
|
35
37
|
onChange: onChangeProp,
|
|
36
38
|
testId,
|
|
@@ -45,25 +47,26 @@ const Checkbox = _ref => {
|
|
|
45
47
|
uncontrolledValue: isDefaultChecked
|
|
46
48
|
});
|
|
47
49
|
const label = useMemo(() => {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
children: [
|
|
50
|
+
return _jsxs(_Fragment, {
|
|
51
|
+
children: [labelProp, isRequired && _jsxs(_Fragment, {
|
|
52
|
+
children: [" ", _jsxs(Typography, {
|
|
51
53
|
component: "span",
|
|
52
54
|
color: "textSecondary",
|
|
53
55
|
children: ["(", t("fieldlabel.required.text"), ")"]
|
|
54
56
|
})]
|
|
55
|
-
})
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
}
|
|
61
|
-
}, [isRequired, labelProp, t]);
|
|
57
|
+
}), hint && _jsx(_FormHelperText, {
|
|
58
|
+
children: hint
|
|
59
|
+
})]
|
|
60
|
+
});
|
|
61
|
+
}, [isRequired, labelProp, hint, t]);
|
|
62
62
|
const onChange = useCallback((event, checked) => {
|
|
63
63
|
setIsLocalChecked(checked);
|
|
64
64
|
onChangeProp?.(event, checked);
|
|
65
65
|
}, [onChangeProp, setIsLocalChecked]);
|
|
66
66
|
return _jsx(_FormControlLabel, {
|
|
67
|
+
sx: {
|
|
68
|
+
alignItems: "flex-start"
|
|
69
|
+
},
|
|
67
70
|
"aria-label": ariaLabel,
|
|
68
71
|
"aria-labelledby": ariaLabelledBy,
|
|
69
72
|
className: validity === "invalid" ? "Mui-error" : validity === "valid" ? "Mui-valid" : "",
|
|
@@ -71,7 +74,10 @@ const Checkbox = _ref => {
|
|
|
71
74
|
checked: isLocalChecked,
|
|
72
75
|
indeterminate: isIndeterminate,
|
|
73
76
|
onChange: onChange,
|
|
74
|
-
required: isRequired
|
|
77
|
+
required: isRequired,
|
|
78
|
+
sx: () => ({
|
|
79
|
+
marginBlockStart: "2px"
|
|
80
|
+
})
|
|
75
81
|
}),
|
|
76
82
|
"data-se": testId,
|
|
77
83
|
disabled: isDisabled,
|
package/dist/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","Typography","useControlledState","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","id","idOverride","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","name","nameOverride","onChange","onChangeProp","testId","validity","value","t","isLocalChecked","setIsLocalChecked","controlledValue","uncontrolledValue","children","component","color","event","checked","_FormControlLabel","className","control","_Checkbox","indeterminate","required","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 } from \"react\";\nimport {\n Checkbox as MuiCheckbox,\n CheckboxProps as MuiCheckboxProps,\n FormControlLabel,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Typography } from \"./Typography\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { useControlledState } from \"./useControlledState\";\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\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 * 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 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} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n CheckedFieldProps<MuiCheckboxProps> &\n SeleniumProps;\n\nconst Checkbox = ({\n ariaLabel,\n ariaLabelledBy,\n id: idOverride,\n isChecked,\n isDefaultChecked,\n isDisabled,\n isIndeterminate,\n isRequired,\n label: labelProp,\n name: nameOverride,\n onChange: onChangeProp,\n testId,\n validity = \"inherit\",\n value,\n}: CheckboxProps) => {\n const { t } = useTranslation();\n const [isLocalChecked, setIsLocalChecked] = useControlledState({\n controlledValue: isChecked,\n uncontrolledValue: isDefaultChecked,\n });\n\n const label = useMemo(() => {\n
|
|
1
|
+
{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","Typography","useControlledState","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","id","idOverride","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","testId","validity","value","t","isLocalChecked","setIsLocalChecked","controlledValue","uncontrolledValue","children","component","color","_FormHelperText","event","checked","_FormControlLabel","sx","alignItems","className","control","_Checkbox","indeterminate","required","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 } from \"react\";\nimport {\n Checkbox as MuiCheckbox,\n CheckboxProps as MuiCheckboxProps,\n FormControlLabel,\n FormHelperText,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Typography } from \"./Typography\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { useControlledState } from \"./useControlledState\";\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\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 * 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} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n CheckedFieldProps<MuiCheckboxProps> &\n SeleniumProps;\n\nconst Checkbox = ({\n ariaLabel,\n ariaLabelledBy,\n id: idOverride,\n isChecked,\n isDefaultChecked,\n isDisabled,\n isIndeterminate,\n isRequired,\n label: labelProp,\n hint,\n name: nameOverride,\n onChange: onChangeProp,\n testId,\n validity = \"inherit\",\n value,\n}: CheckboxProps) => {\n const { t } = useTranslation();\n const [isLocalChecked, setIsLocalChecked] = useControlledState({\n controlledValue: isChecked,\n uncontrolledValue: isDefaultChecked,\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>{hint}</FormHelperText>}\n </>\n );\n }, [isRequired, labelProp, hint, t]);\n\n const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n (event, checked) => {\n setIsLocalChecked(checked);\n onChangeProp?.(event, checked);\n },\n [onChangeProp, setIsLocalChecked]\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 checked={isLocalChecked}\n indeterminate={isIndeterminate}\n onChange={onChange}\n required={isRequired}\n sx={() => ({\n marginBlockStart: \"2px\",\n })}\n />\n }\n data-se={testId}\n disabled={isDisabled}\n id={idOverride}\n label={label}\n name={nameOverride ?? idOverride}\n value={value}\n required={isRequired}\n />\n );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAS1CC,UAAU;AAAA,SAEVC,kBAAkB;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAG3B,OAAO,MAAMC,sBAAsB,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAU;AA+C9E,MAAMC,QAAQ,GAAGC,IAAA,IAgBI;EAAA,IAhBH;IAChBC,SAAS;IACTC,cAAc;IACdC,EAAE,EAAEC,UAAU;IACdC,SAAS;IACTC,gBAAgB;IAChBC,UAAU;IACVC,eAAe;IACfC,UAAU;IACVC,KAAK,EAAEC,SAAS;IAChBC,IAAI;IACJC,IAAI,EAAEC,YAAY;IAClBC,QAAQ,EAAEC,YAAY;IACtBC,MAAM;IACNC,QAAQ,GAAG,SAAS;IACpBC;EACa,CAAC,GAAAnB,IAAA;EACd,MAAM;IAAEoB;EAAE,CAAC,GAAGlC,cAAc,CAAC,CAAC;EAC9B,MAAM,CAACmC,cAAc,EAAEC,iBAAiB,CAAC,GAAG/B,kBAAkB,CAAC;IAC7DgC,eAAe,EAAElB,SAAS;IAC1BmB,iBAAiB,EAAElB;EACrB,CAAC,CAAC;EAEF,MAAMI,KAAK,GAAGrB,OAAO,CAAC,MAAM;IAC1B,OACEI,KAAA,CAAAE,SAAA;MAAA8B,QAAA,GACGd,SAAS,EACTF,UAAU,IACThB,KAAA,CAAAE,SAAA;QAAA8B,QAAA,GACG,GAAG,EACJhC,KAAA,CAACH,UAAU;UAACoC,SAAS,EAAC,MAAM;UAACC,KAAK,EAAC,eAAe;UAAAF,QAAA,GAAC,GAChD,EAACL,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;QAAA,CAAY,CAAC;MAAA,CACb,CACH,EACAR,IAAI,IAAIf,IAAA,CAAA+B,eAAA;QAAAH,QAAA,EAAiBb;MAAI,CAAiB,CAAC;IAAA,CAChD,CAAC;EAEP,CAAC,EAAE,CAACH,UAAU,EAAEE,SAAS,EAAEC,IAAI,EAAEQ,CAAC,CAAC,CAAC;EAEpC,MAAML,QAAQ,GAAG3B,WAAW,CAC1B,CAACyC,KAAK,EAAEC,OAAO,KAAK;IAClBR,iBAAiB,CAACQ,OAAO,CAAC;IAC1Bd,YAAY,GAAGa,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACd,YAAY,EAAEM,iBAAiB,CAClC,CAAC;EAED,OACEzB,IAAA,CAAAkC,iBAAA;IACEC,EAAE,EAAE;MAAEC,UAAU,EAAE;IAAa,CAAE;IACjC,cAAYhC,SAAU;IACtB,mBAAiBC,cAAe;IAChCgC,SAAS,EACPhB,QAAQ,KAAK,SAAS,GAClB,WAAW,GACXA,QAAQ,KAAK,OAAO,GACpB,WAAW,GACX,EACL;IACDiB,OAAO,EACLtC,IAAA,CAAAuC,SAAA;MACEN,OAAO,EAAET,cAAe;MACxBgB,aAAa,EAAE7B,eAAgB;MAC/BO,QAAQ,EAAEA,QAAS;MACnBuB,QAAQ,EAAE7B,UAAW;MACrBuB,EAAE,EAAEA,CAAA,MAAO;QACTO,gBAAgB,EAAE;MACpB,CAAC;IAAE,CACJ,CACF;IACD,WAAStB,MAAO;IAChBuB,QAAQ,EAAEjC,UAAW;IACrBJ,EAAE,EAAEC,UAAW;IACfM,KAAK,EAAEA,KAAM;IACbG,IAAI,EAAEC,YAAY,IAAIV,UAAW;IACjCe,KAAK,EAAEA,KAAM;IACbmB,QAAQ,EAAE7B;EAAW,CACtB,CAAC;AAEN,CAAC;AAED,MAAMgC,gBAAgB,GAAGtD,IAAI,CAACY,QAAQ,CAAC;AACvC0C,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAI1C,QAAQ"}
|
package/dist/src/Checkbox.d.ts
CHANGED
|
@@ -44,6 +44,10 @@ export type CheckboxProps = {
|
|
|
44
44
|
* The label text for the Checkbox
|
|
45
45
|
*/
|
|
46
46
|
label?: string;
|
|
47
|
+
/**
|
|
48
|
+
* The helper text content
|
|
49
|
+
*/
|
|
50
|
+
hint?: string;
|
|
47
51
|
/**
|
|
48
52
|
* The checkbox validity, if different from its enclosing group. Defaults to "inherit".
|
|
49
53
|
*/
|
|
@@ -53,6 +57,6 @@ export type CheckboxProps = {
|
|
|
53
57
|
*/
|
|
54
58
|
value?: string;
|
|
55
59
|
} & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> & CheckedFieldProps<MuiCheckboxProps> & SeleniumProps;
|
|
56
|
-
declare const MemoizedCheckbox: import("react").MemoExoticComponent<({ ariaLabel, ariaLabelledBy, id: idOverride, isChecked, isDefaultChecked, isDisabled, isIndeterminate, isRequired, label: labelProp, name: nameOverride, onChange: onChangeProp, testId, validity, value, }: CheckboxProps) => JSX.Element>;
|
|
60
|
+
declare const MemoizedCheckbox: import("react").MemoExoticComponent<({ ariaLabel, ariaLabelledBy, id: idOverride, isChecked, isDefaultChecked, isDisabled, isIndeterminate, isRequired, label: labelProp, hint, name: nameOverride, onChange: onChangeProp, testId, validity, value, }: CheckboxProps) => JSX.Element>;
|
|
57
61
|
export { MemoizedCheckbox as Checkbox };
|
|
58
62
|
//# sourceMappingURL=Checkbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAIH,OAAO,EAEL,aAAa,IAAI,gBAAgB,
|
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../src/Checkbox.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAIH,OAAO,EAEL,aAAa,IAAI,gBAAgB,EAGlC,MAAM,eAAe,CAAC;AAEvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,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,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;CAChB,GAAG,IAAI,CAAC,mBAAmB,EAAE,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,GACzD,iBAAiB,CAAC,gBAAgB,CAAC,GACnC,aAAa,CAAC;AAoFhB,QAAA,MAAM,gBAAgB,0PAlEnB,aAAa,iBAkEuB,CAAC;AAGxC,OAAO,EAAE,gBAAgB,IAAI,QAAQ,EAAE,CAAC"}
|