@okta/odyssey-react-mui 1.8.2 → 1.9.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.9.0](https://github.com/okta/odyssey/compare/v1.8.2...v1.9.0) (2023-12-04)
+
+### Features
+
+- add on blur for radio and checkbox OKTA-670768 ([#2049](https://github.com/okta/odyssey/issues/2049)) ([a08fe5d](https://github.com/okta/odyssey/commit/a08fe5dcbb9805e6466f00d709ddb0e32607d0d2))
+
 ## [1.8.2](https://github.com/okta/odyssey/compare/v1.8.1...v1.8.2) (2023-12-01)
 
 **Note:** Version bump only for package @okta/odyssey-react-mui

package/dist/Checkbox.js

@@ -35,6 +35,7 @@ const Checkbox = _ref => {
     hint,
     name: nameOverride,
     onChange: onChangeProp,
+    onBlur: onBlurProp,
     testId,
     validity = "inherit",
     value
@@ -72,6 +73,9 @@ const Checkbox = _ref => {
   const onChange = useCallback((event, checked) => {
     onChangeProp?.(event, checked);
   }, [onChangeProp]);
+  const onBlur = useCallback(event => {
+    onBlurProp?.(event);
+  }, [onBlurProp]);
   return _jsx(_FormControlLabel, {
     sx: {
       alignItems: "flex-start"
@@ -94,7 +98,8 @@ const Checkbox = _ref => {
     label: label,
     name: nameOverride ?? idOverride,
     value: value,
-    required: isRequired
+    required: isRequired,
+    onBlur: onBlur
   });
 };
 const MemoizedCheckbox = memo(Checkbox);

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","Typography","ComponentControlledState","getControlState","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","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","children","component","color","_FormHelperText","event","_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, useRef } 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 { ComponentControlledState, getControlState } from \"./inputUtils\";\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 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 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      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\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          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":"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"}
+{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","Typography","ComponentControlledState","getControlState","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","onBlur","onBlurProp","testId","validity","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","children","component","color","_FormHelperText","event","_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, useRef } 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 { Typography } from \"./Typography\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { ComponentControlledState, getControlState } from \"./inputUtils\";\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  /**\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  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  onBlur: onBlurProp,\n  testId,\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 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      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          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      onBlur={onBlur}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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"}

package/dist/Radio.js

@@ -22,11 +22,15 @@ const Radio = _ref => {
     name,
     testId,
     value,
-    onChange: onChangeProp
+    onChange: onChangeProp,
+    onBlur: onBlurProp
   } = _ref;
   const onChange = useCallback((event, checked) => {
     onChangeProp?.(event, checked);
   }, [onChangeProp]);
+  const onBlur = useCallback(event => {
+    onBlurProp?.(event);
+  }, [onBlurProp]);
   return _jsx(_FormControlLabel, {
     checked: isChecked,
     className: isInvalid ? "Mui-error" : "",
@@ -37,7 +41,8 @@ const Radio = _ref => {
     disabled: isDisabled,
     label: label,
     name: name,
-    value: value
+    value: value,
+    onBlur: onBlur
   });
 };
 const MemoizedRadio = memo(Radio);

package/dist/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["memo","useCallback","jsx","_jsx","Radio","_ref","isChecked","isDisabled","isInvalid","label","name","testId","value","onChange","onChangeProp","event","checked","_FormControlLabel","className","control","_Radio","disabled","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  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type RadioProps = {\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio 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 state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  SeleniumProps;\n\nconst Radio = ({\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  value,\n  onChange: onChangeProp,\n}: RadioProps) => {\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  return (\n    <FormControlLabel\n      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={<MuiRadio onChange={onChange} />}\n      data-se={testId}\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      value={value}\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;AAOA,SAASA,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA6B1C,MAAMC,KAAK,GAAGC,IAAA,IASI;EAAA,IATH;IACbC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,KAAK;IACLC,QAAQ,EAAEC;EACA,CAAC,GAAAT,IAAA;EACX,MAAMQ,QAAQ,GAAGZ,WAAW,CAC1B,CAACc,KAAK,EAAEC,OAAO,KAAK;IAClBF,YAAY,GAAGC,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACF,YAAY,CACf,CAAC;EAED,OACEX,IAAA,CAAAc,iBAAA;IACED,OAAO,EAAEV,SAAU;IACnBY,SAAS,EAAEV,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCW,OAAO,EAAEhB,IAAA,CAAAiB,MAAA;MAAUP,QAAQ,EAAEA;IAAS,CAAE,CAAE;IAC1C,WAASF,MAAO;IAChBU,QAAQ,EAAEd,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA;EAAM,CACd,CAAC;AAEN,CAAC;AAED,MAAMU,aAAa,GAAGtB,IAAI,CAACI,KAAK,CAAC;AACjCkB,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIlB,KAAK"}
+{"version":3,"file":"Radio.js","names":["memo","useCallback","jsx","_jsx","Radio","_ref","isChecked","isDisabled","isInvalid","label","name","testId","value","onChange","onChangeProp","onBlur","onBlurProp","event","checked","_FormControlLabel","className","control","_Radio","disabled","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  Radio as MuiRadio,\n  RadioProps as MuiRadioProps,\n} from \"@mui/material\";\nimport { memo, useCallback } from \"react\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\n\nexport type RadioProps = {\n  /**\n   * If `true`, the Radio is selected\n   */\n  isChecked?: boolean;\n  /**\n   * If `true`, the Radio 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 state is changed. Provides event and checked value.\n   */\n  onChange?: MuiRadioProps[\"onChange\"];\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"isDisabled\" | \"name\"> &\n  SeleniumProps;\n\nconst Radio = ({\n  isChecked,\n  isDisabled,\n  isInvalid,\n  label,\n  name,\n  testId,\n  value,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n}: RadioProps) => {\n  const onChange = useCallback<NonNullable<MuiRadioProps[\"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      checked={isChecked}\n      className={isInvalid ? \"Mui-error\" : \"\"}\n      control={<MuiRadio onChange={onChange} />}\n      data-se={testId}\n      disabled={isDisabled}\n      label={label}\n      name={name}\n      value={value}\n      onBlur={onBlur}\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;AAQA,SAASA,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAiC1C,MAAMC,KAAK,GAAGC,IAAA,IAUI;EAAA,IAVH;IACbC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,KAAK;IACLC,IAAI;IACJC,MAAM;IACNC,KAAK;IACLC,QAAQ,EAAEC,YAAY;IACtBC,MAAM,EAAEC;EACE,CAAC,GAAAX,IAAA;EACX,MAAMQ,QAAQ,GAAGZ,WAAW,CAC1B,CAACgB,KAAK,EAAEC,OAAO,KAAK;IAClBJ,YAAY,GAAGG,KAAK,EAAEC,OAAO,CAAC;EAChC,CAAC,EACD,CAACJ,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGd,WAAW,CACvBgB,KAAK,IAAK;IACTD,UAAU,GAAGC,KAAK,CAAC;EACrB,CAAC,EACD,CAACD,UAAU,CACb,CAAC;EAED,OACEb,IAAA,CAAAgB,iBAAA;IACED,OAAO,EAAEZ,SAAU;IACnBc,SAAS,EAAEZ,SAAS,GAAG,WAAW,GAAG,EAAG;IACxCa,OAAO,EAAElB,IAAA,CAAAmB,MAAA;MAAUT,QAAQ,EAAEA;IAAS,CAAE,CAAE;IAC1C,WAASF,MAAO;IAChBY,QAAQ,EAAEhB,UAAW;IACrBE,KAAK,EAAEA,KAAM;IACbC,IAAI,EAAEA,IAAK;IACXE,KAAK,EAAEA,KAAM;IACbG,MAAM,EAAEA;EAAO,CAChB,CAAC;AAEN,CAAC;AAED,MAAMS,aAAa,GAAGxB,IAAI,CAACI,KAAK,CAAC;AACjCoB,aAAa,CAACC,WAAW,GAAG,OAAO;AAEnC,SAASD,aAAa,IAAIpB,KAAK"}

package/dist/src/Checkbox.d.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 /// <reference types="react" />
-import { CheckboxProps as MuiCheckboxProps } from "@mui/material";
+import { CheckboxProps as MuiCheckboxProps, FormControlLabelProps as MuiFormControlLabelProps } from "@mui/material";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 import { CheckedFieldProps } from "./FormCheckedProps";
@@ -56,7 +56,11 @@ export type CheckboxProps = {
      * The value attribute of the Checkbox
      */
     value?: string;
+    /**
+     * Callback fired when the blur event happens. Provides event value.
+     */
+    onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "id" | "isDisabled" | "name"> & CheckedFieldProps<MuiCheckboxProps> & SeleniumProps;
-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>;
+declare const MemoizedCheckbox: import("react").MemoExoticComponent<({ ariaLabel, ariaLabelledBy, id: idOverride, isChecked, isDefaultChecked, isDisabled, isIndeterminate, isRequired, label: labelProp, hint, name: nameOverride, onChange: onChangeProp, onBlur: onBlurProp, testId, validity, value, }: CheckboxProps) => JSX.Element>;
 export { MemoizedCheckbox as Checkbox };
 //# sourceMappingURL=Checkbox.d.ts.map

package/dist/src/Checkbox.d.ts.map

@@ -1 +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;AA2FhB,QAAA,MAAM,gBAAgB,0PAzEnB,aAAa,iBAyEuB,CAAC;AAGxC,OAAO,EAAE,gBAAgB,IAAI,QAAQ,EAAE,CAAC"}
+{"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;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;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,aAAa,CAAC;AAoGhB,QAAA,MAAM,gBAAgB,8QAjFnB,aAAa,iBAiFuB,CAAC;AAGxC,OAAO,EAAE,gBAAgB,IAAI,QAAQ,EAAE,CAAC"}

package/dist/src/Radio.d.ts

@@ -10,7 +10,7 @@
  * See the License for the specific language governing permissions and limitations under the License.
  */
 /// <reference types="react" />
-import { RadioProps as MuiRadioProps } from "@mui/material";
+import { FormControlLabelProps as MuiFormControlLabelProps, RadioProps as MuiRadioProps } from "@mui/material";
 import { FieldComponentProps } from "./FieldComponentProps";
 import type { SeleniumProps } from "./SeleniumProps";
 export type RadioProps = {
@@ -34,7 +34,11 @@ export type RadioProps = {
      * Callback fired when the state is changed. Provides event and checked value.
      */
     onChange?: MuiRadioProps["onChange"];
+    /**
+     * Callback fired when the blur event happens. Provides event value.
+     */
+    onBlur?: MuiFormControlLabelProps["onBlur"];
 } & Pick<FieldComponentProps, "isDisabled" | "name"> & SeleniumProps;
-declare const MemoizedRadio: import("react").MemoExoticComponent<({ isChecked, isDisabled, isInvalid, label, name, testId, value, onChange: onChangeProp, }: RadioProps) => JSX.Element>;
+declare const MemoizedRadio: import("react").MemoExoticComponent<({ isChecked, isDisabled, isInvalid, label, name, testId, value, onChange: onChangeProp, onBlur: onBlurProp, }: RadioProps) => JSX.Element>;
 export { MemoizedRadio as Radio };
 //# sourceMappingURL=Radio.d.ts.map

package/dist/src/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/Radio.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAEH,OAAO,EAGL,UAAU,IAAI,aAAa,EAC5B,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CACtC,GAAG,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,MAAM,CAAC,GAClD,aAAa,CAAC;AAiChB,QAAA,MAAM,aAAa,kIAtBhB,UAAU,iBAsBoB,CAAC;AAGlC,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/Radio.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;;AAEH,OAAO,EAEL,qBAAqB,IAAI,wBAAwB,EAEjD,UAAU,IAAI,aAAa,EAC5B,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,MAAM,UAAU,GAAG;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,wBAAwB,CAAC,QAAQ,CAAC,CAAC;CAC7C,GAAG,IAAI,CAAC,mBAAmB,EAAE,YAAY,GAAG,MAAM,CAAC,GAClD,aAAa,CAAC;AA0ChB,QAAA,MAAM,aAAa,sJA9BhB,UAAU,iBA8BoB,CAAC;AAGlC,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,CAAC"}