@okta/odyssey-react-mui 1.8.1 → 1.9.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 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
+
 ## [1.8.1](https://github.com/okta/odyssey/compare/v1.8.0...v1.8.1) (2023-12-01)
 
 ### Bug Fixes

package/dist/Autocomplete.js

@@ -24,6 +24,7 @@ const Autocomplete = _ref => {
     inputValue,
     isCustomValueAllowed,
     isDisabled,
+    isFullWidth = false,
     isLoading,
     isOptional = false,
     isReadOnly,
@@ -118,6 +119,7 @@ const Autocomplete = _ref => {
     freeSolo: isCustomValueAllowed,
     filterSelectedOptions: true,
     id: idOverride,
+    fullWidth: isFullWidth,
     loading: isLoading,
     multiple: hasMultipleChoices,
     onBlur: onBlur,

package/dist/Autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","useMemo","useRef","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","Autocomplete","_ref","defaultValue","errorMessage","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isLoading","isOptional","isReadOnly","hint","label","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","controlledStateRef","controlledValue","uncontrolledValue","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","_ref2","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","_ref3","ariaDescribedBy","errorMessageElementId","labelElementId","_InputBase","inputProps","required","event","reason","details","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","loading","multiple","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n  UseAutocompleteProps,\n  AutocompleteValue,\n} from \"@mui/material\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n\n  /**\n   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n} & Pick<\n  FieldComponentProps,\n  \"errorMessage\" | \"hint\" | \"id\" | \"isOptional\" | \"name\"\n> &\n  SeleniumProps;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  defaultValue,\n  errorMessage,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const controlledStateRef = useRef(\n    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n  );\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      if (value === undefined) {\n        return defaultValue;\n      }\n      return [] as AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >;\n    }\n    return value === undefined ? defaultValue : undefined;\n  }, [defaultValue, hasMultipleChoices, value]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [errorMessage, hint, isOptional, label, nameOverride]\n  );\n  const onChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onChange\"]\n    >\n  >(\n    (event, value, reason, details) => {\n      onChangeProp?.(event, value, reason, details);\n    },\n    [onChangeProp]\n  );\n\n  const onInputChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onInputChange\"]\n    >\n  >(\n    (event, value, reason) => {\n      onInputChangeProp?.(event, value, reason);\n    },\n    [onInputChangeProp]\n  );\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      data-se={testId}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":"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"}
+{"version":3,"file":"Autocomplete.js","names":["memo","useCallback","useMemo","useRef","Field","ComponentControlledState","useInputValues","getControlState","jsx","_jsx","Autocomplete","_ref","defaultValue","errorMessage","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","hint","label","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","controlledStateRef","controlledValue","uncontrolledValue","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","_ref2","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","_ref3","ariaDescribedBy","errorMessageElementId","labelElementId","_InputBase","inputProps","required","event","reason","details","_Autocomplete","disableCloseOnSelect","disabled","freeSolo","filterSelectedOptions","fullWidth","loading","multiple","readOnly","isOptionEqualToValue","MemoizedAutocomplete","displayName"],"sources":["../src/Autocomplete.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport {\n  Autocomplete as MuiAutocomplete,\n  AutocompleteProps as MuiAutocompleteProps,\n  InputBase,\n  UseAutocompleteProps,\n  AutocompleteValue,\n} from \"@mui/material\";\nimport { memo, useCallback, useMemo, useRef } from \"react\";\n\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport {\n  ComponentControlledState,\n  useInputValues,\n  getControlState,\n} from \"./inputUtils\";\n\nexport type AutocompleteProps<\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n> = {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"defaultValue\"];\n  /**\n   * Enables multiple choice selection\n   */\n  hasMultipleChoices?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"multiple\"];\n  /**\n   * The value for the input\n   */\n  inputValue?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"inputValue\"];\n  /**\n   * Allows the input of custom values\n   */\n  isCustomValueAllowed?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"freeSolo\"];\n  /**\n   * Disables the Autocomplete input\n   */\n  isDisabled?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"disabled\"];\n  /**\n   * Displays a loading indicator\n   */\n  isLoading?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"loading\"];\n  /**\n   * Makes the Autocomplete input read-only\n   */\n  isReadOnly?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"readOnly\"];\n  /**\n   * The label text for the autocomplete input\n   */\n  label: string;\n  /**\n   * Callback fired when the autocomplete loses focus.\n   */\n  onBlur?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onBlur\"];\n  /**\n   * Callback fired when a selection is made.\n   */\n  onChange?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onChange\"];\n  /**\n   * Callback fired when the textbox receives typed characters.\n   */\n  onInputChange?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onInputChange\"];\n  /**\n   * Callback fired when the autocomplete gains focus.\n   */\n  onFocus?: MuiAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"onFocus\"];\n  /**\n   * The options for the Autocomplete input\n   */\n  options: ReadonlyArray<OptionType>;\n  /**\n   * The value of the Autocomplete input\n   */\n  value?: UseAutocompleteProps<\n    OptionType,\n    HasMultipleChoices,\n    undefined,\n    IsCustomValueAllowed\n  >[\"value\"];\n\n  /**\n   * Used to determine if the option represents the given value. Uses strict equality by default if none provided.\n   * Both arguments need to be handled, an option can only match with one value.\n   * option: the option to test\n   * value: the value to test against\n   *\n   * You will need to implement this function if your `option` items are objects.\n   */\n  getIsOptionEqualToValue?: (option: OptionType, value: OptionType) => boolean;\n} & Pick<\n  FieldComponentProps,\n  \"errorMessage\" | \"hint\" | \"id\" | \"isOptional\" | \"name\" | \"isFullWidth\"\n> &\n  SeleniumProps;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  defaultValue,\n  errorMessage,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n}: AutocompleteProps<OptionType, HasMultipleChoices, IsCustomValueAllowed>) => {\n  const controlledStateRef = useRef(\n    getControlState({ controlledValue: value, uncontrolledValue: defaultValue })\n  );\n  const defaultValueProp = useMemo<\n    | AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >\n    | undefined\n  >(() => {\n    if (hasMultipleChoices) {\n      if (value === undefined) {\n        return defaultValue;\n      }\n      return [] as AutocompleteValue<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >;\n    }\n    return value === undefined ? defaultValue : undefined;\n  }, [defaultValue, hasMultipleChoices, value]);\n\n  const valueProps = useInputValues({\n    defaultValue: defaultValueProp,\n    value: value,\n    controlState: controlledStateRef.current,\n  });\n\n  const inputValueProp = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { inputValue };\n    }\n    return undefined;\n  }, [inputValue]);\n\n  const renderInput = useCallback(\n    ({ InputLabelProps, InputProps, ...params }) => (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        label={label}\n        isOptional={isOptional}\n        renderFieldComponent={({\n          ariaDescribedBy,\n          id,\n          errorMessageElementId,\n          labelElementId,\n        }) => (\n          <InputBase\n            {...params}\n            {...InputProps}\n            inputProps={{\n              ...params.inputProps,\n              \"aria-errormessage\": errorMessageElementId,\n              \"aria-labelledby\": labelElementId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [errorMessage, hint, isOptional, label, nameOverride]\n  );\n  const onChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onChange\"]\n    >\n  >(\n    (event, value, reason, details) => {\n      onChangeProp?.(event, value, reason, details);\n    },\n    [onChangeProp]\n  );\n\n  const onInputChange = useCallback<\n    NonNullable<\n      UseAutocompleteProps<\n        OptionType,\n        HasMultipleChoices,\n        undefined,\n        IsCustomValueAllowed\n      >[\"onInputChange\"]\n    >\n  >(\n    (event, value, reason) => {\n      onInputChangeProp?.(event, value, reason);\n    },\n    [onInputChangeProp]\n  );\n\n  return (\n    <MuiAutocomplete\n      {...valueProps}\n      {...inputValueProp}\n      // AutoComplete is wrapped in a div within MUI which does not get the disabled attr. So this aria-disabled gets set in the div\n      aria-disabled={isDisabled}\n      data-se={testId}\n      disableCloseOnSelect={hasMultipleChoices}\n      disabled={isDisabled}\n      freeSolo={isCustomValueAllowed}\n      filterSelectedOptions={true}\n      id={idOverride}\n      fullWidth={isFullWidth}\n      loading={isLoading}\n      multiple={hasMultipleChoices}\n      onBlur={onBlur}\n      onChange={onChange}\n      onInputChange={onInputChange}\n      onFocus={onFocus}\n      options={options}\n      readOnly={isReadOnly}\n      renderInput={renderInput}\n      isOptionEqualToValue={getIsOptionEqualToValue}\n    />\n  );\n};\n\n// Need the `typeof Autocomplete` because generics don't get passed through\nconst MemoizedAutocomplete = memo(Autocomplete) as typeof Autocomplete;\n// @ts-expect-error displayName is expected to not be on `typeof Autocomplete`\nMemoizedAutocomplete.displayName = \"Autocomplete\";\n\nexport { MemoizedAutocomplete as Autocomplete };\n"],"mappings":"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"}

package/dist/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":";;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,eAAe;AAC9C,SAASC,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,MAAM,QAAQ,OAAO;AAAC,SASlDC,UAAU;AAAA,SAEVC,wBAAwB,EAAEC,eAAe;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAGlD,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,GAAGpC,cAAc,CAAC,CAAC;EAC9B,MAAMqC,kBAAkB,GAAGjC,MAAM,CAC/BG,eAAe,CAAC;IACd+B,eAAe,EAAEjB,SAAS;IAC1BkB,iBAAiB,EAAEjB;EACrB,CAAC,CACH,CAAC;EACD,MAAMkB,WAAW,GAAGrC,OAAO,CAAC,MAAM;IAChC,IAAIkC,kBAAkB,CAACI,OAAO,KAAKnC,wBAAwB,CAACoC,UAAU,EAAE;MACtE,OAAO;QAAEC,OAAO,EAAEtB;MAAU,CAAC;IAC/B;IACA,OAAO;MAAEuB,cAAc,EAAEtB;IAAiB,CAAC;EAC7C,CAAC,EAAE,CAACA,gBAAgB,EAAED,SAAS,CAAC,CAAC;EAEjC,MAAMK,KAAK,GAAGvB,OAAO,CAAC,MAAM;IAC1B,OACEM,KAAA,CAAAE,SAAA;MAAAkC,QAAA,GACGlB,SAAS,EACTF,UAAU,IACThB,KAAA,CAAAE,SAAA;QAAAkC,QAAA,GACG,GAAG,EACJpC,KAAA,CAACJ,UAAU;UAACyC,SAAS,EAAC,MAAM;UAACC,KAAK,EAAC,eAAe;UAAAF,QAAA,GAAC,GAChD,EAACT,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;QAAA,CAAY,CAAC;MAAA,CACb,CACH,EACAR,IAAI,IAAIf,IAAA,CAAAmC,eAAA;QAAAH,QAAA,EAAiBjB;MAAI,CAAiB,CAAC;IAAA,CAChD,CAAC;EAEP,CAAC,EAAE,CAACH,UAAU,EAAEE,SAAS,EAAEC,IAAI,EAAEQ,CAAC,CAAC,CAAC;EAEpC,MAAML,QAAQ,GAAG7B,WAAW,CAC1B,CAAC+C,KAAK,EAAEN,OAAO,KAAK;IAClBX,YAAY,GAAGiB,KAAK,EAAEN,OAAO,CAAC;EAChC,CAAC,EACD,CAACX,YAAY,CACf,CAAC;EAED,OACEnB,IAAA,CAAAqC,iBAAA;IACEC,EAAE,EAAE;MAAEC,UAAU,EAAE;IAAa,CAAE;IACjC,cAAYnC,SAAU;IACtB,mBAAiBC,cAAe;IAChCmC,SAAS,EACPnB,QAAQ,KAAK,SAAS,GAClB,WAAW,GACXA,QAAQ,KAAK,OAAO,GACpB,WAAW,GACX,EACL;IACDoB,OAAO,EACLzC,IAAA,CAAA0C,SAAA;MAAA,GACMf,WAAW;MACfgB,aAAa,EAAEhC,eAAgB;MAC/BO,QAAQ,EAAEA,QAAS;MACnB0B,QAAQ,EAAEhC,UAAW;MACrB0B,EAAE,EAAEA,CAAA,MAAO;QACTO,gBAAgB,EAAE;MACpB,CAAC;IAAE,CACJ,CACF;IACD,WAASzB,MAAO;IAChB0B,QAAQ,EAAEpC,UAAW;IACrBJ,EAAE,EAAEC,UAAW;IACfM,KAAK,EAAEA,KAAM;IACbG,IAAI,EAAEC,YAAY,IAAIV,UAAW;IACjCe,KAAK,EAAEA,KAAM;IACbsB,QAAQ,EAAEhC;EAAW,CACtB,CAAC;AAEN,CAAC;AAED,MAAMmC,gBAAgB,GAAG3D,IAAI,CAACc,QAAQ,CAAC;AACvC6C,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAI7C,QAAQ"}
+{"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/Field.js

@@ -31,6 +31,7 @@ const Field = _ref => {
     hint,
     id: idOverride,
     isDisabled: isDisabledProp = false,
+    isFullWidth = false,
     isRadioGroup = false,
     isOptional = false,
     label,
@@ -53,6 +54,7 @@ const Field = _ref => {
     disabled: isDisabled,
     error: Boolean(errorMessage),
     role: isRadioGroup ? "radiogroup" : undefined,
+    fullWidth: isFullWidth,
     children: [fieldType === "group" ? _jsxs(_FormLabel, {
       component: "legend",
       children: [label, " ", isOptional && label && _jsxs(Typography, {

package/dist/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","Typography","useFieldset","useTranslation","useUniqueId","jsxs","_jsxs","jsx","_jsx","fieldTypeValues","Field","_ref","errorMessage","fieldType","hasVisibleLabel","hint","id","idOverride","isDisabled","isDisabledProp","isRadioGroup","isOptional","label","renderFieldComponent","t","hintId","undefined","errorMessageElementId","labelElementId","ariaDescribedBy","join","trim","isFieldsetDisabled","_FormControl","component","disabled","error","Boolean","role","children","_FormLabel","color","inputId","text","MemoizedField","displayName"],"sources":["../src/Field.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, useMemo } from \"react\";\n\nimport {\n  FormControl as MuiFormControl,\n  FormLabel as MuiFormLabel,\n} from \"@mui/material\";\nimport { FieldError } from \"./FieldError\";\nimport { FieldHint } from \"./FieldHint\";\nimport { FieldLabel } from \"./FieldLabel\";\nimport { Typography } from \"./Typography\";\nimport { useFieldset } from \"./FieldsetContext\";\nimport { useTranslation } from \"react-i18next\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport const fieldTypeValues = [\"single\", \"group\"] as const;\n\nexport type FieldProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).\n   */\n  fieldType: (typeof fieldTypeValues)[number];\n  /**\n   * If `true`, the Field label will be shown\n   */\n  hasVisibleLabel: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Important for narrowing down the `fieldset` role to \"radiogroup\".\n   */\n  isRadioGroup?: boolean;\n  /**\n   * Important for determining if children inherit error state\n   */\n  isCheckboxGroup?: boolean;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Render-props function that sends back ARIA props to your field component.\n   */\n  renderFieldComponent: ({\n    ariaDescribedBy,\n    dataSe,\n    errorMessageElementId,\n    id,\n    labelElementId,\n  }: {\n    ariaDescribedBy?: string;\n    dataSe?: string;\n    errorMessageElementId?: string;\n    id: string;\n    labelElementId: string;\n  }) => ReactElement;\n};\n\nconst Field = ({\n  errorMessage,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  id: idOverride,\n  isDisabled: isDisabledProp = false,\n  isRadioGroup = false,\n  isOptional = false,\n  label,\n  renderFieldComponent,\n}: FieldProps) => {\n  const { t } = useTranslation();\n\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorMessageElementId = errorMessage ? `${id}-error` : undefined;\n  const labelElementId = `${id}-label`;\n\n  const ariaDescribedBy = useMemo(\n    () => [hintId, errorMessageElementId].join(\" \").trim() || undefined,\n    [errorMessageElementId, hintId]\n  );\n\n  const { isDisabled: isFieldsetDisabled } = useFieldset();\n\n  const isDisabled = useMemo(\n    () => isDisabledProp || isFieldsetDisabled,\n    [isDisabledProp, isFieldsetDisabled]\n  );\n\n  return (\n    <MuiFormControl\n      component={fieldType === \"group\" ? \"fieldset\" : \"div\"}\n      disabled={isDisabled}\n      error={Boolean(errorMessage)}\n      role={isRadioGroup ? \"radiogroup\" : undefined}\n    >\n      {fieldType === \"group\" ? (\n        <MuiFormLabel component=\"legend\">\n          {label}{\" \"}\n          {isOptional && label && (\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.optional.text\")})\n            </Typography>\n          )}\n        </MuiFormLabel>\n      ) : (\n        <FieldLabel\n          hasVisibleLabel={hasVisibleLabel}\n          id={labelElementId}\n          inputId={id}\n          isOptional={isOptional}\n          text={label}\n        />\n      )}\n\n      {hint && <FieldHint id={hintId} text={hint} />}\n\n      {renderFieldComponent({\n        ariaDescribedBy,\n        errorMessageElementId,\n        id,\n        labelElementId,\n      })}\n\n      {errorMessage && (\n        <FieldError id={errorMessageElementId} text={errorMessage} />\n      )}\n    </MuiFormControl>\n  );\n};\n\nconst MemoizedField = memo(Field);\nMemoizedField.displayName = \"Field\";\n\nexport { MemoizedField as Field };\n"],"mappings":"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"}
+{"version":3,"file":"Field.js","names":["memo","useMemo","FieldError","FieldHint","FieldLabel","Typography","useFieldset","useTranslation","useUniqueId","jsxs","_jsxs","jsx","_jsx","fieldTypeValues","Field","_ref","errorMessage","fieldType","hasVisibleLabel","hint","id","idOverride","isDisabled","isDisabledProp","isFullWidth","isRadioGroup","isOptional","label","renderFieldComponent","t","hintId","undefined","errorMessageElementId","labelElementId","ariaDescribedBy","join","trim","isFieldsetDisabled","_FormControl","component","disabled","error","Boolean","role","fullWidth","children","_FormLabel","color","inputId","text","MemoizedField","displayName"],"sources":["../src/Field.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, useMemo } from \"react\";\n\nimport {\n  FormControl as MuiFormControl,\n  FormLabel as MuiFormLabel,\n} from \"@mui/material\";\nimport { FieldError } from \"./FieldError\";\nimport { FieldHint } from \"./FieldHint\";\nimport { FieldLabel } from \"./FieldLabel\";\nimport { Typography } from \"./Typography\";\nimport { useFieldset } from \"./FieldsetContext\";\nimport { useTranslation } from \"react-i18next\";\nimport { useUniqueId } from \"./useUniqueId\";\n\nexport const fieldTypeValues = [\"single\", \"group\"] as const;\n\nexport type FieldProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The field type determines how ARIA components are setup. It's important to use this to denote if you expect only one component (like a text field) or multiple (like a radio group).\n   */\n  fieldType: (typeof fieldTypeValues)[number];\n  /**\n   * If `true`, the Field label will be shown\n   */\n  hasVisibleLabel: boolean;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * Important for narrowing down the `fieldset` role to \"radiogroup\".\n   */\n  isRadioGroup?: boolean;\n  /**\n   * Important for determining if children inherit error state\n   */\n  isCheckboxGroup?: boolean;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the component can stretch to fill the width of the container.\n   */\n  isFullWidth?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * Render-props function that sends back ARIA props to your field component.\n   */\n  renderFieldComponent: ({\n    ariaDescribedBy,\n    dataSe,\n    errorMessageElementId,\n    id,\n    labelElementId,\n  }: {\n    ariaDescribedBy?: string;\n    dataSe?: string;\n    errorMessageElementId?: string;\n    id: string;\n    labelElementId: string;\n  }) => ReactElement;\n};\n\nconst Field = ({\n  errorMessage,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  id: idOverride,\n  isDisabled: isDisabledProp = false,\n  isFullWidth = false,\n  isRadioGroup = false,\n  isOptional = false,\n  label,\n  renderFieldComponent,\n}: FieldProps) => {\n  const { t } = useTranslation();\n\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorMessageElementId = errorMessage ? `${id}-error` : undefined;\n  const labelElementId = `${id}-label`;\n\n  const ariaDescribedBy = useMemo(\n    () => [hintId, errorMessageElementId].join(\" \").trim() || undefined,\n    [errorMessageElementId, hintId]\n  );\n\n  const { isDisabled: isFieldsetDisabled } = useFieldset();\n\n  const isDisabled = useMemo(\n    () => isDisabledProp || isFieldsetDisabled,\n    [isDisabledProp, isFieldsetDisabled]\n  );\n\n  return (\n    <MuiFormControl\n      component={fieldType === \"group\" ? \"fieldset\" : \"div\"}\n      disabled={isDisabled}\n      error={Boolean(errorMessage)}\n      role={isRadioGroup ? \"radiogroup\" : undefined}\n      fullWidth={isFullWidth}\n    >\n      {fieldType === \"group\" ? (\n        <MuiFormLabel component=\"legend\">\n          {label}{\" \"}\n          {isOptional && label && (\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.optional.text\")})\n            </Typography>\n          )}\n        </MuiFormLabel>\n      ) : (\n        <FieldLabel\n          hasVisibleLabel={hasVisibleLabel}\n          id={labelElementId}\n          inputId={id}\n          isOptional={isOptional}\n          text={label}\n        />\n      )}\n\n      {hint && <FieldHint id={hintId} text={hint} />}\n\n      {renderFieldComponent({\n        ariaDescribedBy,\n        errorMessageElementId,\n        id,\n        labelElementId,\n      })}\n\n      {errorMessage && (\n        <FieldError id={errorMessageElementId} text={errorMessage} />\n      )}\n    </MuiFormControl>\n  );\n};\n\nconst MemoizedField = memo(Field);\nMemoizedField.displayName = \"Field\";\n\nexport { MemoizedField as Field };\n"],"mappings":"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"}

package/dist/FieldComponentProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"FieldComponentProps.js","names":[],"sources":["../src/FieldComponentProps.ts"],"sourcesContent":["/*!\n * Copyright (c) 2021-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 type FieldComponentProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n};\n"],"mappings":""}
+{"version":3,"file":"FieldComponentProps.js","names":[],"sources":["../src/FieldComponentProps.ts"],"sourcesContent":["/*!\n * Copyright (c) 2021-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 type FieldComponentProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * If `true`, the component can stretch to fill the width of the container.\n   */\n  isFullWidth?: boolean;\n  /**\n   * If `true`, the `input` element is not required.\n   */\n  isOptional?: boolean;\n  /**\n   * It prevents the user from changing the value of the field\n   */\n  isReadOnly?: boolean;\n  /**\n   * The name of the `input` element. Defaults to the `id` if not set.\n   */\n  name?: string;\n};\n"],"mappings":""}

package/dist/NativeSelect.js

@@ -23,6 +23,7 @@ const NativeSelect = forwardRef((_ref, ref) => {
     hint,
     id: idOverride,
     isDisabled = false,
+    isFullWidth = false,
     isMultiSelect,
     isOptional = false,
     label,
@@ -78,6 +79,7 @@ const NativeSelect = forwardRef((_ref, ref) => {
     hint: hint,
     id: idOverride,
     isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
     isOptional: isOptional,
     label: label,
     renderFieldComponent: renderFieldComponent

package/dist/NativeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"NativeSelect.js","names":["React","forwardRef","memo","useCallback","useMemo","useRef","Field","getControlState","useInputValues","jsx","_jsx","NativeSelect","_ref","ref","defaultValue","errorMessage","hasMultipleChoices","hasMultipleChoicesProp","hint","id","idOverride","isDisabled","isMultiSelect","isOptional","label","onBlur","onChange","onChangeProp","onFocus","testId","value","children","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","child","undefined","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_Select","inputProps","name","multiple","native","fieldType","hasVisibleLabel","MemoizedNativeSelect","displayName"],"sources":["../src/NativeSelect.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 React, {\n  ReactElement,\n  forwardRef,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  Select as MuiSelect,\n  SelectProps as MuiSelectProps,\n} from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\nimport { ForwardRefWithType } from \"./@types/react-augment\";\n\nexport type NativeSelectOption = {\n  text: string;\n  value?: string;\n  type?: \"heading\" | \"option\";\n};\n\nexport type NativeSelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type NativeSelectProps<\n  Value extends NativeSelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n> = {\n  /**\n   * The options or optgroup elements within the NativeSelect\n   */\n  children?: ReactElement<\"option\"> | ReactElement<\"optgroup\">;\n  /**\n   * The default value of the NativeSelect. Use when component is uncontrolled\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the NativeSelect\n   */\n  label: string;\n  /**\n   * Callback fired when the NativeSelect loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the NativeSelect changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the NativeSelect gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  options: Value;\n  /**\n   * The value or values selected in the NativeSelect. Use when component is controlled\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  \"errorMessage\" | \"hint\" | \"id\" | \"isDisabled\" | \"isOptional\"\n> &\n  SeleniumProps;\n\nconst NativeSelect: ForwardRefWithType = forwardRef(\n  <\n    Value extends NativeSelectValueType<HasMultipleChoices>,\n    HasMultipleChoices extends boolean\n  >(\n    {\n      defaultValue,\n      errorMessage,\n      hasMultipleChoices: hasMultipleChoicesProp,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isMultiSelect,\n      isOptional = false,\n      label,\n      onBlur,\n      onChange: onChangeProp,\n      onFocus,\n      testId,\n      value,\n      children,\n    }: NativeSelectProps<Value, HasMultipleChoices>,\n    ref?: React.Ref<ReactElement>\n  ) => {\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const onChange = useCallback<\n      NonNullable<MuiSelectProps<Value>[\"onChange\"]>\n    >(\n      (event, child) => {\n        onChangeProp?.(event, child);\n      },\n      [onChangeProp]\n    );\n\n    const hasMultipleChoices = useMemo(\n      () =>\n        hasMultipleChoicesProp === undefined\n          ? isMultiSelect\n          : hasMultipleChoicesProp,\n      [hasMultipleChoicesProp, isMultiSelect]\n    );\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          children={children}\n          data-se={testId}\n          id={idOverride}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n          }}\n          name={idOverride}\n          multiple={hasMultipleChoices}\n          native={true}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          ref={ref}\n        />\n      ),\n      [\n        children,\n        idOverride,\n        inputValues,\n        hasMultipleChoices,\n        onBlur,\n        onChange,\n        onFocus,\n        ref,\n        testId,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedNativeSelect = memo(NativeSelect);\nMemoizedNativeSelect.displayName = \"NativeSelect\";\n\nexport { MemoizedNativeSelect as NativeSelect };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAEVC,UAAU,EACVC,IAAI,EACJC,WAAW,EACXC,OAAO,EACPC,MAAM,QACD,OAAO;AAAC,SAKNC,KAAK;AAAA,SAGLC,eAAe,EAAEC,cAAc;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA4DxC,MAAMC,YAAgC,GAAGV,UAAU,CACjD,CAAAW,IAAA,EAqBEC,GAA6B,KAC1B;EAAA,IAlBH;IACEC,YAAY;IACZC,YAAY;IACZC,kBAAkB,EAAEC,sBAAsB;IAC1CC,IAAI;IACJC,EAAE,EAAEC,UAAU;IACdC,UAAU,GAAG,KAAK;IAClBC,aAAa;IACbC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,MAAM;IACNC,QAAQ,EAAEC,YAAY;IACtBC,OAAO;IACPC,MAAM;IACNC,KAAK;IACLC;EAC4C,CAAC,GAAAnB,IAAA;EAG/C,MAAMoB,kBAAkB,GAAG3B,MAAM,CAC/BE,eAAe,CAAC;IACd0B,eAAe,EAAEH,KAAK;IACtBI,iBAAiB,EAAEpB;EACrB,CAAC,CACH,CAAC;EACD,MAAMqB,WAAW,GAAG3B,cAAc,CAAC;IACjCM,YAAY;IACZgB,KAAK;IACLM,YAAY,EAAEJ,kBAAkB,CAACK;EACnC,CAAC,CAAC;EAEF,MAAMX,QAAQ,GAAGvB,WAAW,CAG1B,CAACmC,KAAK,EAAEC,KAAK,KAAK;IAChBZ,YAAY,GAAGW,KAAK,EAAEC,KAAK,CAAC;EAC9B,CAAC,EACD,CAACZ,YAAY,CACf,CAAC;EAED,MAAMX,kBAAkB,GAAGZ,OAAO,CAChC,MACEa,sBAAsB,KAAKuB,SAAS,GAChClB,aAAa,GACbL,sBAAsB,EAC5B,CAACA,sBAAsB,EAAEK,aAAa,CACxC,CAAC;EACD,MAAMmB,oBAAoB,GAAGtC,WAAW,CACtCuC,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,qBAAqB;MAAEC;IAAe,CAAC,GAAAH,KAAA;IAAA,OACzDhC,IAAA,CAAAoC,OAAA;MAAA,GACMX,WAAW;MACf,oBAAkBQ,eAAgB;MAClCZ,QAAQ,EAAEA,QAAS;MACnB,WAASF,MAAO;MAChBV,EAAE,EAAEC,UAAW;MACf2B,UAAU,EAAE;QACV,mBAAmB,EAAEH,qBAAqB;QAC1C,iBAAiB,EAAEC;MACrB,CAAE;MACFG,IAAI,EAAE5B,UAAW;MACjB6B,QAAQ,EAAEjC,kBAAmB;MAC7BkC,MAAM,EAAE,IAAK;MACbzB,MAAM,EAAEA,MAAO;MACfC,QAAQ,EAAEA,QAAS;MACnBE,OAAO,EAAEA,OAAQ;MACjBf,GAAG,EAAEA;IAAI,CACV,CAAC;EAAA,CACH,EACD,CACEkB,QAAQ,EACRX,UAAU,EACVe,WAAW,EACXnB,kBAAkB,EAClBS,MAAM,EACNC,QAAQ,EACRE,OAAO,EACPf,GAAG,EACHgB,MAAM,CAEV,CAAC;EAED,OACEnB,IAAA,CAACJ,KAAK;IACJS,YAAY,EAAEA,YAAa;IAC3BoC,SAAS,EAAC,QAAQ;IAClBC,eAAe;IACflC,IAAI,EAAEA,IAAK;IACXC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBE,UAAU,EAAEA,UAAW;IACvBC,KAAK,EAAEA,KAAM;IACbiB,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CACF,CAAC;AAED,MAAMY,oBAAoB,GAAGnD,IAAI,CAACS,YAAY,CAAC;AAC/C0C,oBAAoB,CAACC,WAAW,GAAG,cAAc;AAEjD,SAASD,oBAAoB,IAAI1C,YAAY"}
+{"version":3,"file":"NativeSelect.js","names":["React","forwardRef","memo","useCallback","useMemo","useRef","Field","getControlState","useInputValues","jsx","_jsx","NativeSelect","_ref","ref","defaultValue","errorMessage","hasMultipleChoices","hasMultipleChoicesProp","hint","id","idOverride","isDisabled","isFullWidth","isMultiSelect","isOptional","label","onBlur","onChange","onChangeProp","onFocus","testId","value","children","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","child","undefined","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_Select","inputProps","name","multiple","native","fieldType","hasVisibleLabel","MemoizedNativeSelect","displayName"],"sources":["../src/NativeSelect.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 React, {\n  ReactElement,\n  forwardRef,\n  memo,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\nimport {\n  Select as MuiSelect,\n  SelectProps as MuiSelectProps,\n} from \"@mui/material\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\nimport { ForwardRefWithType } from \"./@types/react-augment\";\n\nexport type NativeSelectOption = {\n  text: string;\n  value?: string;\n  type?: \"heading\" | \"option\";\n};\n\nexport type NativeSelectValueType<HasMultipleChoices> =\n  HasMultipleChoices extends true ? string[] : string;\n\nexport type NativeSelectProps<\n  Value extends NativeSelectValueType<HasMultipleChoices>,\n  HasMultipleChoices extends boolean\n> = {\n  /**\n   * The options or optgroup elements within the NativeSelect\n   */\n  children?: ReactElement<\"option\"> | ReactElement<\"optgroup\">;\n  /**\n   * The default value of the NativeSelect. Use when component is uncontrolled\n   */\n  defaultValue?: Value;\n  /**\n   * If `true`, the Select allows multiple selections\n   */\n  hasMultipleChoices?: HasMultipleChoices;\n  /**\n   * @deprecated Use `hasMultipleChoices` instead\n   */\n  /** **Deprecated:** use `hasMultipleChoices` */\n  isMultiSelect?: HasMultipleChoices;\n  /**\n   * The label text for the NativeSelect\n   */\n  label: string;\n  /**\n   * Callback fired when the NativeSelect loses focus\n   */\n  onBlur?: MuiSelectProps<Value>[\"onBlur\"];\n  /**\n   * Callback fired when the value of the NativeSelect changes\n   */\n  onChange?: MuiSelectProps<Value>[\"onChange\"];\n  /**\n   * Callback fired when the NativeSelect gains focus\n   */\n  onFocus?: MuiSelectProps<Value>[\"onFocus\"];\n  options: Value;\n  /**\n   * The value or values selected in the NativeSelect. Use when component is controlled\n   */\n  value?: Value;\n} & Pick<\n  FieldComponentProps,\n  \"errorMessage\" | \"hint\" | \"id\" | \"isDisabled\" | \"isOptional\" | \"isFullWidth\"\n> &\n  SeleniumProps;\n\nconst NativeSelect: ForwardRefWithType = forwardRef(\n  <\n    Value extends NativeSelectValueType<HasMultipleChoices>,\n    HasMultipleChoices extends boolean\n  >(\n    {\n      defaultValue,\n      errorMessage,\n      hasMultipleChoices: hasMultipleChoicesProp,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      isMultiSelect,\n      isOptional = false,\n      label,\n      onBlur,\n      onChange: onChangeProp,\n      onFocus,\n      testId,\n      value,\n      children,\n    }: NativeSelectProps<Value, HasMultipleChoices>,\n    ref?: React.Ref<ReactElement>\n  ) => {\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const onChange = useCallback<\n      NonNullable<MuiSelectProps<Value>[\"onChange\"]>\n    >(\n      (event, child) => {\n        onChangeProp?.(event, child);\n      },\n      [onChangeProp]\n    );\n\n    const hasMultipleChoices = useMemo(\n      () =>\n        hasMultipleChoicesProp === undefined\n          ? isMultiSelect\n          : hasMultipleChoicesProp,\n      [hasMultipleChoicesProp, isMultiSelect]\n    );\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, labelElementId }) => (\n        <MuiSelect\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          children={children}\n          data-se={testId}\n          id={idOverride}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n          }}\n          name={idOverride}\n          multiple={hasMultipleChoices}\n          native={true}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          ref={ref}\n        />\n      ),\n      [\n        children,\n        idOverride,\n        inputValues,\n        hasMultipleChoices,\n        onBlur,\n        onChange,\n        onFocus,\n        ref,\n        testId,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedNativeSelect = memo(NativeSelect);\nMemoizedNativeSelect.displayName = \"NativeSelect\";\n\nexport { MemoizedNativeSelect as NativeSelect };\n"],"mappings":"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"}

package/dist/PasswordField.js

@@ -27,6 +27,7 @@ const PasswordField = forwardRef((_ref, ref) => {
     hint,
     id: idOverride,
     isDisabled = false,
+    isFullWidth = false,
     isOptional = false,
     hasShowPassword = true,
     isReadOnly,
@@ -103,6 +104,7 @@ const PasswordField = forwardRef((_ref, ref) => {
     hint: hint,
     id: idOverride,
     isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
     isOptional: isOptional,
     label: label,
     renderFieldComponent: renderFieldComponent

package/dist/PasswordField.js.map

@@ -1 +1 @@
-{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useRef","useState","ShowIcon","HideIcon","Field","useTranslation","getControlState","useInputValues","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","defaultValue","errorMessage","hasInitialFocus","hint","id","idOverride","isDisabled","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","placeholder","testId","value","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","onClick","inputProps","role","readOnly","required","type","fieldType","hasVisibleLabel","MemoizedPasswordField","displayName"],"sources":["../src/PasswordField.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 { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { useTranslation } from \"react-i18next\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type PasswordFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: \"current-password\" | \"new-password\";\n  /**\n   * initial value for input. Use when component in uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the show/hide icon is not shown to the user\n   */\n  hasShowPassword?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element. Use when component is controlled.\n   */\n  value?: string;\n} & FieldComponentProps &\n  SeleniumProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isOptional = false,\n      hasShowPassword = true,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      value,\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const onChange = useCallback<\n      ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>\n    >(\n      (event) => {\n        onChangeProp?.(event);\n      },\n      [onChangeProp]\n    );\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={inputType === \"password\" ? autoCompleteType : \"off\"}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            hasShowPassword && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label={\n                    inputType === \"password\"\n                      ? t(\"passwordfield.icon.label.show\")\n                      : t(\"passwordfield.icon.label.hide\")\n                  }\n                  onClick={togglePasswordVisibility}\n                >\n                  {inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            // role: \"textbox\" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.\n            role: \"textbox\",\n          }}\n          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          type={inputType}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        t,\n        togglePasswordVisibility,\n        inputType,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        hasShowPassword,\n        ref,\n        testId,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\nMemoizedPasswordField.displayName = \"PasswordField\";\n\nexport { MemoizedPasswordField as PasswordField };\n"],"mappings":"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"}
+{"version":3,"file":"PasswordField.js","names":["forwardRef","memo","useCallback","useRef","useState","ShowIcon","HideIcon","Field","useTranslation","getControlState","useInputValues","jsx","_jsx","PasswordField","_ref","ref","autoCompleteType","defaultValue","errorMessage","hasInitialFocus","hint","id","idOverride","isDisabled","isFullWidth","isOptional","hasShowPassword","isReadOnly","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","placeholder","testId","value","t","inputType","setInputType","togglePasswordVisibility","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","event","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","onClick","inputProps","role","readOnly","required","type","fieldType","hasVisibleLabel","MemoizedPasswordField","displayName"],"sources":["../src/PasswordField.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 { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  memo,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ShowIcon, HideIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { useTranslation } from \"react-i18next\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type PasswordFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: \"current-password\" | \"new-password\";\n  /**\n   * initial value for input. Use when component in uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * If `true`, the show/hide icon is not shown to the user\n   */\n  hasShowPassword?: boolean;\n  /**\n   * The label for the `input` element.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element. Use when component is controlled.\n   */\n  value?: string;\n} & FieldComponentProps &\n  SeleniumProps;\n\nconst PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      errorMessage,\n      hasInitialFocus,\n      hint,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      isOptional = false,\n      hasShowPassword = true,\n      isReadOnly,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      placeholder,\n      testId,\n      value,\n    },\n    ref\n  ) => {\n    const { t } = useTranslation();\n    const [inputType, setInputType] = useState(\"password\");\n\n    const togglePasswordVisibility = useCallback(() => {\n      setInputType((inputType) =>\n        inputType === \"password\" ? \"text\" : \"password\"\n      );\n    }, []);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const onChange = useCallback<\n      ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>\n    >(\n      (event) => {\n        onChangeProp?.(event);\n      },\n      [onChangeProp]\n    );\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={inputType === \"password\" ? autoCompleteType : \"off\"}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            hasShowPassword && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label={\n                    inputType === \"password\"\n                      ? t(\"passwordfield.icon.label.show\")\n                      : t(\"passwordfield.icon.label.hide\")\n                  }\n                  onClick={togglePasswordVisibility}\n                >\n                  {inputType === \"password\" ? <ShowIcon /> : <HideIcon />}\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          inputProps={{\n            \"aria-errormessage\": errorMessageElementId,\n            \"aria-labelledby\": labelElementId,\n            // role: \"textbox\" Added because password inputs don't have an implicit role assigned. This causes problems with element selection.\n            role: \"textbox\",\n          }}\n          name={nameOverride ?? id}\n          onChange={onChange}\n          onFocus={onFocus}\n          onBlur={onBlur}\n          placeholder={placeholder}\n          readOnly={isReadOnly}\n          ref={ref}\n          required={!isOptional}\n          type={inputType}\n        />\n      ),\n      [\n        autoCompleteType,\n        hasInitialFocus,\n        inputValues,\n        t,\n        togglePasswordVisibility,\n        inputType,\n        nameOverride,\n        onChange,\n        onFocus,\n        onBlur,\n        placeholder,\n        isOptional,\n        isReadOnly,\n        hasShowPassword,\n        ref,\n        testId,\n      ]\n    );\n\n    return (\n      <Field\n        errorMessage={errorMessage}\n        fieldType=\"single\"\n        hasVisibleLabel\n        hint={hint}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={isOptional}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedPasswordField = memo(PasswordField);\nMemoizedPasswordField.displayName = \"PasswordField\";\n\nexport { MemoizedPasswordField as PasswordField };\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/SearchField.js

@@ -24,6 +24,7 @@ const SearchField = forwardRef((_ref, ref) => {
     hasInitialFocus,
     id: idOverride,
     isDisabled = false,
+    isFullWidth = false,
     label,
     name: nameOverride,
     onChange: onChangeProp,
@@ -89,6 +90,7 @@ const SearchField = forwardRef((_ref, ref) => {
     hasVisibleLabel: false,
     id: idOverride,
     isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
     isOptional: true,
     label: label,
     renderFieldComponent: renderFieldComponent

package/dist/SearchField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","jsx","_jsx","SearchField","_ref","ref","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","testId","value","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../src/SearchField.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 { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type SearchFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the clear button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n  SeleniumProps;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      testId,\n      value,\n    },\n    ref\n  ) => {\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp]\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            defaultValue && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"Clear\"\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        defaultValue,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        testId,\n      ]\n    );\n\n    return (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isOptional={true}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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"}
+{"version":3,"file":"SearchField.js","names":["forwardRef","memo","useCallback","useRef","CloseCircleFilledIcon","SearchIcon","Field","getControlState","useInputValues","jsx","_jsx","SearchField","_ref","ref","autoCompleteType","defaultValue","hasInitialFocus","id","idOverride","isDisabled","isFullWidth","label","name","nameOverride","onChange","onChangeProp","onFocus","onBlur","onClear","onClearProp","placeholder","testId","value","event","controlledStateRef","controlledValue","uncontrolledValue","inputValues","controlState","current","renderFieldComponent","_ref2","ariaDescribedBy","_InputBase","autoComplete","autoFocus","endAdornment","_InputAdornment","position","children","_IconButton","disabled","onClick","size","startAdornment","type","fieldType","hasVisibleLabel","isOptional","MemoizedSearchField","displayName"],"sources":["../src/SearchField.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 { InputAdornment, InputBase, IconButton } from \"@mui/material\";\nimport {\n  ChangeEventHandler,\n  FocusEventHandler,\n  forwardRef,\n  InputHTMLAttributes,\n  memo,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport { CloseCircleFilledIcon, SearchIcon } from \"./icons.generated\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { SeleniumProps } from \"./SeleniumProps\";\nimport { getControlState, useInputValues } from \"./inputUtils\";\n\nexport type SearchFieldProps = {\n  /**\n   * This prop helps users to fill forms faster, especially on mobile devices.\n   * The name can be confusing, as it's more like an autofill.\n   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).\n   */\n  autoCompleteType?: InputHTMLAttributes<HTMLInputElement>[\"autoComplete\"];\n  /**\n   * The value of the `input` element to use when uncontrolled.\n   */\n  defaultValue?: string;\n  /**\n   * If `true`, the component will receive focus automatically.\n   */\n  hasInitialFocus?: boolean;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * If `true`, the component is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * This label won't show up visually, but it's required for accessibility.\n   */\n  label: string;\n  /**\n   * Callback fired when the `input` element loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * Callback fired when the clear button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Callback fired when the value is changed.\n   */\n  onChange?: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;\n  /**\n   * Callback fired when the `input` element get focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n  /**\n   * The short hint displayed in the `input` before the user enters a value.\n   */\n  placeholder?: string;\n  /**\n   * The value of the `input` element, to use when controlled.\n   */\n  value?: string;\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\" | \"isFullWidth\"> &\n  SeleniumProps;\n\nconst SearchField = forwardRef<HTMLInputElement, SearchFieldProps>(\n  (\n    {\n      autoCompleteType,\n      defaultValue,\n      hasInitialFocus,\n      id: idOverride,\n      isDisabled = false,\n      isFullWidth = false,\n      label,\n      name: nameOverride,\n      onChange: onChangeProp,\n      onFocus,\n      onBlur,\n      onClear: onClearProp,\n      placeholder,\n      testId,\n      value,\n    },\n    ref\n  ) => {\n    const onChange: ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement> =\n      useCallback(\n        (event) => {\n          onChangeProp?.(event);\n        },\n        [onChangeProp]\n      );\n\n    const onClear = useCallback(() => {\n      onClearProp?.();\n    }, [onClearProp]);\n\n    const controlledStateRef = useRef(\n      getControlState({\n        controlledValue: value,\n        uncontrolledValue: defaultValue,\n      })\n    );\n    const inputValues = useInputValues({\n      defaultValue,\n      value,\n      controlState: controlledStateRef.current,\n    });\n\n    const renderFieldComponent = useCallback(\n      ({ ariaDescribedBy, id }) => (\n        <InputBase\n          {...inputValues}\n          aria-describedby={ariaDescribedBy}\n          autoComplete={autoCompleteType}\n          /* eslint-disable-next-line jsx-a11y/no-autofocus */\n          autoFocus={hasInitialFocus}\n          data-se={testId}\n          endAdornment={\n            defaultValue && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  aria-label=\"Clear\"\n                  disabled={isDisabled}\n                  onClick={onClear}\n                  size=\"small\"\n                >\n                  <CloseCircleFilledIcon />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          id={id}\n          name={nameOverride ?? id}\n          onBlur={onBlur}\n          onChange={onChange}\n          onFocus={onFocus}\n          placeholder={placeholder}\n          ref={ref}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <SearchIcon />\n            </InputAdornment>\n          }\n          type=\"search\"\n        />\n      ),\n      [\n        autoCompleteType,\n        defaultValue,\n        hasInitialFocus,\n        inputValues,\n        isDisabled,\n        nameOverride,\n        onBlur,\n        onChange,\n        onClear,\n        onFocus,\n        placeholder,\n        ref,\n        testId,\n      ]\n    );\n\n    return (\n      <Field\n        fieldType=\"single\"\n        hasVisibleLabel={false}\n        id={idOverride}\n        isDisabled={isDisabled}\n        isFullWidth={isFullWidth}\n        isOptional={true}\n        label={label}\n        renderFieldComponent={renderFieldComponent}\n      />\n    );\n  }\n);\n\nconst MemoizedSearchField = memo(SearchField);\nMemoizedSearchField.displayName = \"SearchField\";\n\nexport { MemoizedSearchField as SearchField };\n"],"mappings":"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"}

package/dist/Select.js

@@ -34,6 +34,7 @@ const Select = _ref => {
     hint,
     id: idOverride,
     isDisabled = false,
+    isFullWidth = false,
     isMultiSelect,
     isOptional = false,
     label,
@@ -146,6 +147,7 @@ const Select = _ref => {
     hint: hint,
     id: idOverride,
     isDisabled: isDisabled,
+    isFullWidth: isFullWidth,
     isOptional: isOptional,
     label: label,
     renderFieldComponent: renderFieldComponent