@okta/odyssey-react-mui 1.11.0 → 1.12.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.12.0](https://github.com/okta/odyssey/compare/v1.11.1...v1.12.0) (2024-01-30)
+
+### Features
+
+- support aria-describedby as prop for Field components ([#2103](https://github.com/okta/odyssey/issues/2103)) ([a6098d7](https://github.com/okta/odyssey/commit/a6098d7bc47261713890725ea09e8decf1e2d76d))
+
+## [1.11.1](https://github.com/okta/odyssey/compare/v1.11.0...v1.11.1) (2024-01-29)
+
+### Bug Fixes
+
+- move testId to inputProps for all input components ([#2096](https://github.com/okta/odyssey/issues/2096)) ([94ec2ea](https://github.com/okta/odyssey/commit/94ec2ea88f56beb3dd7ac143a6aaec5c173d6261))
+
 ## [1.11.0](https://github.com/okta/odyssey/compare/v1.10.3...v1.11.0) (2024-01-29)
 
 ### Features

package/dist/@types/react-augment.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-augment.d.js","names":[],"sources":["../../src/@types/react-augment.d.ts"],"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 { FC } from \"react\";\n\nexport interface ForwardRefWithType extends FC<WithForwardRefProps<Option>> {\n  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<\n    FC<WithForwardRefProps<T>>\n  >;\n}\n\nexport type FocusHandle = {\n  focus: () => void;\n};\n"],"mappings":""}
+{"version":3,"file":"react-augment.d.js","names":[],"sources":["../../src/@types/react-augment.d.ts"],"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 { FC } from \"react\";\nexport interface ForwardRefWithType extends FC<WithForwardRefProps<Option>> {\n  <T extends Option>(props: WithForwardRefProps<T>): ReturnType<\n    FC<WithForwardRefProps<T>>\n  >;\n}\n\ndeclare module \"react\" {\n  type DataAttributeKey = `data-${string}`;\n  interface InputHTMLAttributes<T> extends HTMLAttributes<T> {\n    // Allows data-* props to be passed to inputProps in nested MUI components\n    // see: https://github.com/mui/material-ui/issues/20160\n    [dataAttribute: DataAttributeKey]: string | undefined;\n  }\n}\n"],"mappings":""}

package/dist/Autocomplete.js

@@ -17,6 +17,7 @@ import { ComponentControlledState, useInputValues, getControlState } from "./inp
 import { jsx as _jsx } from "react/jsx-runtime";
 const Autocomplete = _ref => {
   let {
+    ariaDescribedBy,
     defaultValue,
     errorMessage,
     errorMessageList,
@@ -76,6 +77,7 @@ const Autocomplete = _ref => {
       ...params
     } = _ref2;
     return _jsx(Field, {
+      ariaDescribedBy: ariaDescribedBy,
       errorMessage: errorMessage,
       errorMessageList: errorMessageList,
       fieldType: "single",
@@ -98,7 +100,8 @@ const Autocomplete = _ref => {
           inputProps: {
             ...params.inputProps,
             "aria-errormessage": errorMessageElementId,
-            "aria-labelledby": labelElementId
+            "aria-labelledby": labelElementId,
+            "data-se": testId
           },
           "aria-describedby": ariaDescribedBy,
           id: id,
@@ -107,7 +110,7 @@ const Autocomplete = _ref => {
         });
       }
     });
-  }, [errorMessage, errorMessageList, hint, HintLinkComponent, isOptional, label, nameOverride]);
+  }, [ariaDescribedBy, errorMessage, errorMessageList, hint, HintLinkComponent, isOptional, label, nameOverride, testId]);
   const onChange = useCallback((event, value, reason, details) => {
     onChangeProp?.(event, value, reason, details);
   }, [onChangeProp]);
@@ -118,7 +121,6 @@ const Autocomplete = _ref => {
     ...valueProps,
     ...inputValueProp,
     "aria-disabled": isDisabled,
-    "data-se": testId,
     disableCloseOnSelect: hasMultipleChoices,
     disabled: isDisabled,
     freeSolo: isCustomValueAllowed,

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","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","hint","HintLinkComponent","label","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","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 { AllowedProps } from \"./AllowedProps\";\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\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  AllowedProps;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\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        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\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    [\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      isOptional,\n      label,\n      nameOverride,\n    ]\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      translate={translate}\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","ariaDescribedBy","defaultValue","errorMessage","errorMessageList","hasMultipleChoices","id","idOverride","inputValue","isCustomValueAllowed","isDisabled","isFullWidth","isLoading","isOptional","isReadOnly","hint","HintLinkComponent","label","name","nameOverride","onBlur","onChange","onChangeProp","onInputChange","onInputChangeProp","onFocus","options","value","getIsOptionEqualToValue","testId","translate","controlledStateRef","controlledValue","uncontrolledValue","defaultValueProp","undefined","valueProps","controlState","current","inputValueProp","CONTROLLED","renderInput","_ref2","InputLabelProps","InputProps","params","fieldType","hasVisibleLabel","htmlFor","renderFieldComponent","_ref3","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 { AllowedProps } from \"./AllowedProps\";\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  | \"ariaDescribedBy\"\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isFullWidth\"\n  | \"isOptional\"\n  | \"name\"\n> &\n  AllowedProps;\n\nconst Autocomplete = <\n  OptionType,\n  HasMultipleChoices extends boolean | undefined,\n  IsCustomValueAllowed extends boolean | undefined\n>({\n  ariaDescribedBy,\n  defaultValue,\n  errorMessage,\n  errorMessageList,\n  hasMultipleChoices,\n  id: idOverride,\n  inputValue,\n  isCustomValueAllowed,\n  isDisabled,\n  isFullWidth = false,\n  isLoading,\n  isOptional = false,\n  isReadOnly,\n  hint,\n  HintLinkComponent,\n  label,\n  name: nameOverride,\n  onBlur,\n  onChange: onChangeProp,\n  onInputChange: onInputChangeProp,\n  onFocus,\n  options,\n  value,\n  getIsOptionEqualToValue,\n  testId,\n  translate,\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        ariaDescribedBy={ariaDescribedBy}\n        errorMessage={errorMessage}\n        errorMessageList={errorMessageList}\n        fieldType=\"single\"\n        hasVisibleLabel\n        id={InputLabelProps.htmlFor}\n        hint={hint}\n        HintLinkComponent={HintLinkComponent}\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              \"data-se\": testId,\n            }}\n            aria-describedby={ariaDescribedBy}\n            id={id}\n            name={nameOverride ?? id}\n            required={!isOptional}\n          />\n        )}\n      />\n    ),\n    [\n      ariaDescribedBy,\n      errorMessage,\n      errorMessageList,\n      hint,\n      HintLinkComponent,\n      isOptional,\n      label,\n      nameOverride,\n      testId,\n    ]\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      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      translate={translate}\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/Button.js

@@ -24,7 +24,7 @@ const Button = _ref => {
     ariaDescribedBy,
     ariaLabel,
     ariaLabelledBy,
-    buttonFocusRef,
+    buttonRef,
     endIcon,
     id,
     isDisabled,
@@ -40,12 +40,11 @@ const Button = _ref => {
     variant
   } = _ref;
   const muiProps = useMuiProps();
-  const ref = useRef(null);
-  useImperativeHandle(buttonFocusRef, () => {
-    const element = ref.current;
+  const localButtonRef = useRef(null);
+  useImperativeHandle(buttonRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localButtonRef.current?.focus();
       }
     };
   }, []);
@@ -60,7 +59,7 @@ const Button = _ref => {
     fullWidth: isFullWidth,
     id: id,
     onClick: onClick,
-    ref: ref,
+    ref: localButtonRef,
     size: size,
     startIcon: startIcon,
     translate: translate,

package/dist/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["memo","useCallback","useImperativeHandle","useRef","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","_ref","ariaDescribedBy","ariaLabel","ariaLabelledBy","buttonFocusRef","endIcon","id","isDisabled","isFullWidth","label","onClick","size","startIcon","testId","tooltipText","translate","type","variant","muiProps","ref","element","current","focus","renderButton","_Button","disabled","fullWidth","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\n\nimport { MuiPropsContext, useMuiProps } from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"danger\",\n  \"floating\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The ARIA label for the Button\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Button\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The ID of the element that describes the Button\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The ref forwarded to the Button to expose focus()\n   */\n  buttonFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number];\n} & (\n  | {\n      endIcon?: ReactElement;\n      label: string;\n      startIcon?: ReactElement;\n    }\n  | {\n      endIcon?: ReactElement;\n      label?: \"\" | undefined;\n      startIcon: ReactElement;\n    }\n  | {\n      endIcon: ReactElement;\n      label?: \"\" | undefined;\n      startIcon?: ReactElement;\n    }\n) &\n  AllowedProps;\n\nconst Button = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonFocusRef,\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n\n  const ref = useRef<HTMLButtonElement>(null);\n  useImperativeHandle(\n    buttonFocusRef,\n    () => {\n      const element = ref.current;\n      return {\n        focus: () => {\n          element && element.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const renderButton = useCallback(\n    (muiProps) => (\n      <MuiButton\n        {...muiProps}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        data-se={testId}\n        disabled={isDisabled}\n        endIcon={endIcon}\n        fullWidth={isFullWidth}\n        id={id}\n        onClick={onClick}\n        ref={ref}\n        size={size}\n        startIcon={startIcon}\n        translate={translate}\n        type={type}\n        variant={variant}\n      >\n        {label}\n      </MuiButton>\n    ),\n    [\n      ariaDescribedBy,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      testId,\n      translate,\n      type,\n      variant,\n    ]\n  );\n\n  return (\n    <>\n      {tooltipText && !isDisabled && (\n        <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n          <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n        </Tooltip>\n      )}\n\n      {(isDisabled || !tooltipText) && renderButton(muiProps)}\n    </>\n  );\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":"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"}
+{"version":3,"file":"Button.js","names":["memo","useCallback","useImperativeHandle","useRef","MuiPropsContext","useMuiProps","Tooltip","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","buttonSizeValues","buttonTypeValues","buttonVariantValues","Button","_ref","ariaDescribedBy","ariaLabel","ariaLabelledBy","buttonRef","endIcon","id","isDisabled","isFullWidth","label","onClick","size","startIcon","testId","tooltipText","translate","type","variant","muiProps","localButtonRef","focus","current","renderButton","_Button","disabled","fullWidth","ref","children","ariaType","placement","text","Consumer","MemoizedButton","displayName"],"sources":["../src/Button.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 { Button as MuiButton } from \"@mui/material\";\nimport type { ButtonProps as MuiButtonProps } from \"@mui/material\";\nimport {\n  memo,\n  ReactElement,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n} from \"react\";\n\nimport { MuiPropsContext, useMuiProps } from \"./MuiPropsContext\";\nimport { Tooltip } from \"./Tooltip\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nexport const buttonSizeValues = [\"small\", \"medium\", \"large\"] as const;\nexport const buttonTypeValues = [\"button\", \"submit\", \"reset\"] as const;\nexport const buttonVariantValues = [\n  \"primary\",\n  \"secondary\",\n  \"tertiary\",\n  \"danger\",\n  \"floating\",\n] as const;\n\nexport type ButtonProps = {\n  /**\n   * The ARIA label for the Button\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Button\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The ID of the element that describes the Button\n   */\n  ariaDescribedBy?: string;\n  /**\n   * The ref forwarded to the Button\n   */\n  buttonRef?: React.RefObject<FocusHandle>;\n  /**\n   * The icon element to display at the end of the Button\n   */\n  endIcon?: ReactElement;\n  /**\n   * The ID of the Button\n   */\n  id?: string;\n  /**\n   * Determines whether the Button is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Button should take up the full available width\n   */\n  isFullWidth?: boolean;\n  /**\n   * The text content of the Button\n   */\n  label?: string;\n  /**\n   * The click event handler for the Button\n   */\n  onClick?: MuiButtonProps[\"onClick\"];\n  /**\n   * The size of the button\n   */\n  size?: (typeof buttonSizeValues)[number];\n  /**\n   * The icon element to display at the start of the Button\n   */\n  startIcon?: ReactElement;\n  /**\n   * The tooltip text for the Button if it's icon-only\n   */\n  tooltipText?: string;\n  /**\n   * The type of the HTML button element\n   */\n  type?: (typeof buttonTypeValues)[number];\n  /**\n   * The variant of the Button\n   */\n  variant: (typeof buttonVariantValues)[number];\n} & (\n  | {\n      endIcon?: ReactElement;\n      label: string;\n      startIcon?: ReactElement;\n    }\n  | {\n      endIcon?: ReactElement;\n      label?: \"\" | undefined;\n      startIcon: ReactElement;\n    }\n  | {\n      endIcon: ReactElement;\n      label?: \"\" | undefined;\n      startIcon?: ReactElement;\n    }\n) &\n  AllowedProps;\n\nconst Button = ({\n  ariaDescribedBy,\n  ariaLabel,\n  ariaLabelledBy,\n  buttonRef,\n  endIcon,\n  id,\n  isDisabled,\n  isFullWidth,\n  label = \"\",\n  onClick,\n  size = \"medium\",\n  startIcon,\n  testId,\n  tooltipText,\n  translate,\n  type = \"button\",\n  variant,\n}: ButtonProps) => {\n  const muiProps = useMuiProps();\n\n  const localButtonRef = useRef<HTMLButtonElement>(null);\n  useImperativeHandle(\n    buttonRef,\n    () => {\n      return {\n        focus: () => {\n          localButtonRef.current?.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const renderButton = useCallback(\n    (muiProps) => (\n      <MuiButton\n        {...muiProps}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        data-se={testId}\n        disabled={isDisabled}\n        endIcon={endIcon}\n        fullWidth={isFullWidth}\n        id={id}\n        onClick={onClick}\n        ref={localButtonRef}\n        size={size}\n        startIcon={startIcon}\n        translate={translate}\n        type={type}\n        variant={variant}\n      >\n        {label}\n      </MuiButton>\n    ),\n    [\n      ariaDescribedBy,\n      ariaLabel,\n      ariaLabelledBy,\n      endIcon,\n      id,\n      isDisabled,\n      isFullWidth,\n      label,\n      onClick,\n      size,\n      startIcon,\n      testId,\n      translate,\n      type,\n      variant,\n    ]\n  );\n\n  return (\n    <>\n      {tooltipText && !isDisabled && (\n        <Tooltip ariaType=\"description\" placement=\"top\" text={tooltipText}>\n          <MuiPropsContext.Consumer>{renderButton}</MuiPropsContext.Consumer>\n        </Tooltip>\n      )}\n\n      {(isDisabled || !tooltipText) && renderButton(muiProps)}\n    </>\n  );\n};\n\nconst MemoizedButton = memo(Button);\nMemoizedButton.displayName = \"Button\";\n\nexport { MemoizedButton as Button };\n"],"mappings":"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"}

package/dist/Checkbox.js

@@ -26,7 +26,7 @@ const Checkbox = _ref => {
     ariaLabel,
     ariaLabelledBy,
     id: idOverride,
-    inputFocusRef,
+    inputRef,
     isChecked,
     isDefaultChecked,
     isDisabled,
@@ -59,12 +59,11 @@ const Checkbox = _ref => {
       defaultChecked: isDefaultChecked
     };
   }, [isDefaultChecked, isChecked]);
-  const inputRef = useRef(null);
-  useImperativeHandle(inputFocusRef, () => {
-    const element = inputRef.current;
+  const localInputRef = useRef(null);
+  useImperativeHandle(inputRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localInputRef.current?.focus();
       }
     };
   }, []);
@@ -100,12 +99,14 @@ const Checkbox = _ref => {
       indeterminate: isIndeterminate,
       onChange: onChange,
       required: isRequired,
-      inputRef: inputRef,
+      inputProps: {
+        "data-se": testId
+      },
+      inputRef: localInputRef,
       sx: () => ({
         marginBlockStart: "2px"
       })
     }),
-    "data-se": testId,
     disabled: isDisabled,
     id: idOverride,
     label: label,

package/dist/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","useImperativeHandle","Typography","ComponentControlledState","getControlState","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","id","idOverride","inputFocusRef","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","translate","validity","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","inputRef","element","focus","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, useImperativeHandle } from \"react\";\nimport {\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Typography } from \"./Typography\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { ComponentControlledState, getControlState } from \"./inputUtils\";\nimport { CheckedFieldProps } from \"./FormCheckedProps\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport const checkboxValidityValues = [\"valid\", \"invalid\", \"inherit\"] as const;\n\nexport type CheckboxProps = {\n  /**\n   * The ARIA label for the Checkbox\n   */\n  ariaLabel?: string;\n  /**\n   * The ID of the element that labels the Checkbox\n   */\n  ariaLabelledBy?: string;\n  /**\n   * The id of the `input` element.\n   */\n  id?: string;\n  /**\n   * The ref forwarded to the Checkbox to expose focus()\n   */\n  inputFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Checkbox is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The helper text content\n   */\n  hint?: string;\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  AllowedProps;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  inputFocusRef,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  testId,\n  translate,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    })\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputFocusRef,\n    () => {\n      const element = inputRef.current;\n      return {\n        focus: () => {\n          element && element.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const label = useMemo(() => {\n    return (\n      <>\n        {labelProp}\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n      </>\n    );\n  }, [isRequired, labelProp, hint, t, translate]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      sx={{ alignItems: \"flex-start\" }}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      className={\n        validity === \"invalid\"\n          ? \"Mui-error\"\n          : validity === \"valid\"\n          ? \"Mui-valid\"\n          : \"\"\n      }\n      control={\n        <MuiCheckbox\n          {...inputValues}\n          indeterminate={isIndeterminate}\n          onChange={onChange}\n          required={isRequired}\n          inputRef={inputRef}\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      translate={translate}\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,EAAEC,mBAAmB,QAAQ,OAAO;AAAC,SAUvEC,UAAU;AAAA,SAEVC,wBAAwB,EAAEC,eAAe;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAAA,SAAAC,QAAA,IAAAC,SAAA;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAIlD,OAAO,MAAMC,sBAAsB,GAAG,CAAC,OAAO,EAAE,SAAS,EAAE,SAAS,CAAU;AAuD9E,MAAMC,QAAQ,GAAGC,IAAA,IAmBI;EAAA,IAnBH;IAChBC,SAAS;IACTC,cAAc;IACdC,EAAE,EAAEC,UAAU;IACdC,aAAa;IACbC,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,EAAEC,UAAU;IAClBC,MAAM;IACNC,SAAS;IACTC,QAAQ,GAAG,SAAS;IACpBC;EACa,CAAC,GAAAvB,IAAA;EACd,MAAM;IAAEwB;EAAE,CAAC,GAAGzC,cAAc,CAAC,CAAC;EAC9B,MAAM0C,kBAAkB,GAAGtC,MAAM,CAC/BI,eAAe,CAAC;IACdmC,eAAe,EAAEpB,SAAS;IAC1BqB,iBAAiB,EAAEpB;EACrB,CAAC,CACH,CAAC;EACD,MAAMqB,WAAW,GAAG1C,OAAO,CAAC,MAAM;IAChC,IAAIuC,kBAAkB,CAACI,OAAO,KAAKvC,wBAAwB,CAACwC,UAAU,EAAE;MACtE,OAAO;QAAEC,OAAO,EAAEzB;MAAU,CAAC;IAC/B;IACA,OAAO;MAAE0B,cAAc,EAAEzB;IAAiB,CAAC;EAC7C,CAAC,EAAE,CAACA,gBAAgB,EAAED,SAAS,CAAC,CAAC;EAEjC,MAAM2B,QAAQ,GAAG9C,MAAM,CAAmB,IAAI,CAAC;EAC/CC,mBAAmB,CACjBiB,aAAa,EACb,MAAM;IACJ,MAAM6B,OAAO,GAAGD,QAAQ,CAACJ,OAAO;IAChC,OAAO;MACLM,KAAK,EAAEA,CAAA,KAAM;QACXD,OAAO,IAAIA,OAAO,CAACC,KAAK,CAAC,CAAC;MAC5B;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,MAAMxB,KAAK,GAAGzB,OAAO,CAAC,MAAM;IAC1B,OACEO,KAAA,CAAAE,SAAA;MAAAyC,QAAA,GACGxB,SAAS,EACTF,UAAU,IACTjB,KAAA,CAAAE,SAAA;QAAAyC,QAAA,GACG,GAAG,EACJ3C,KAAA,CAACJ,UAAU;UAACgD,SAAS,EAAC,MAAM;UAACC,KAAK,EAAC,eAAe;UAAAF,QAAA,GAAC,GAChD,EAACZ,CAAC,CAAC,0BAA0B,CAAC,EAAC,GAClC;QAAA,CAAY,CAAC;MAAA,CACb,CACH,EACAX,IAAI,IAAIhB,IAAA,CAAA0C,eAAA;QAAgBlB,SAAS,EAAEA,SAAU;QAAAe,QAAA,EAAEvB;MAAI,CAAiB,CAAC;IAAA,CACtE,CAAC;EAEP,CAAC,EAAE,CAACH,UAAU,EAAEE,SAAS,EAAEC,IAAI,EAAEW,CAAC,EAAEH,SAAS,CAAC,CAAC;EAE/C,MAAML,QAAQ,GAAG/B,WAAW,CAC1B,CAACuD,KAAK,EAAET,OAAO,KAAK;IAClBd,YAAY,GAAGuB,KAAK,EAAET,OAAO,CAAC;EAChC,CAAC,EACD,CAACd,YAAY,CACf,CAAC;EAED,MAAMC,MAAM,GAAGjC,WAAW,CACvBuD,KAAK,IAAK;IACTrB,UAAU,GAAGqB,KAAK,CAAC;EACrB,CAAC,EACD,CAACrB,UAAU,CACb,CAAC;EAED,OACEtB,IAAA,CAAA4C,iBAAA;IACEC,EAAE,EAAE;MAAEC,UAAU,EAAE;IAAa,CAAE;IACjC,cAAY1C,SAAU;IACtB,mBAAiBC,cAAe;IAChC0C,SAAS,EACPtB,QAAQ,KAAK,SAAS,GAClB,WAAW,GACXA,QAAQ,KAAK,OAAO,GACpB,WAAW,GACX,EACL;IACDuB,OAAO,EACLhD,IAAA,CAAAiD,SAAA;MAAA,GACMlB,WAAW;MACfmB,aAAa,EAAEtC,eAAgB;MAC/BO,QAAQ,EAAEA,QAAS;MACnBgC,QAAQ,EAAEtC,UAAW;MACrBuB,QAAQ,EAAEA,QAAS;MACnBS,EAAE,EAAEA,CAAA,MAAO;QACTO,gBAAgB,EAAE;MACpB,CAAC;IAAE,CACJ,CACF;IACD,WAAS7B,MAAO;IAChB8B,QAAQ,EAAE1C,UAAW;IACrBL,EAAE,EAAEC,UAAW;IACfO,KAAK,EAAEA,KAAM;IACbG,IAAI,EAAEC,YAAY,IAAIX,UAAW;IACjCmB,KAAK,EAAEA,KAAM;IACbyB,QAAQ,EAAEtC,UAAW;IACrBQ,MAAM,EAAEA,MAAO;IACfG,SAAS,EAAEA;EAAU,CACtB,CAAC;AAEN,CAAC;AAED,MAAM8B,gBAAgB,GAAGnE,IAAI,CAACe,QAAQ,CAAC;AACvCoD,gBAAgB,CAACC,WAAW,GAAG,UAAU;AAEzC,SAASD,gBAAgB,IAAIpD,QAAQ"}
+{"version":3,"file":"Checkbox.js","names":["useTranslation","memo","useCallback","useMemo","useRef","useImperativeHandle","Typography","ComponentControlledState","getControlState","jsxs","_jsxs","Fragment","_Fragment","jsx","_jsx","checkboxValidityValues","Checkbox","_ref","ariaLabel","ariaLabelledBy","id","idOverride","inputRef","isChecked","isDefaultChecked","isDisabled","isIndeterminate","isRequired","label","labelProp","hint","name","nameOverride","onChange","onChangeProp","onBlur","onBlurProp","testId","translate","validity","value","t","controlledStateRef","controlledValue","uncontrolledValue","inputValues","current","CONTROLLED","checked","defaultChecked","localInputRef","focus","children","component","color","_FormHelperText","event","_FormControlLabel","sx","alignItems","className","control","_Checkbox","indeterminate","required","inputProps","marginBlockStart","disabled","MemoizedCheckbox","displayName"],"sources":["../src/Checkbox.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { memo, useCallback, useMemo, useRef, useImperativeHandle } from \"react\";\nimport {\n  Checkbox as MuiCheckbox,\n  CheckboxProps as MuiCheckboxProps,\n  FormControlLabel,\n  FormControlLabelProps as MuiFormControlLabelProps,\n  FormHelperText,\n} from \"@mui/material\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport { Typography } from \"./Typography\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport {\n  ComponentControlledState,\n  FocusHandle,\n  getControlState,\n} 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   * The ref forwarded to the Checkbox\n   */\n  inputRef?: React.RefObject<FocusHandle>;\n  /**\n   * Determines whether the Checkbox is disabled\n   */\n  isDisabled?: boolean;\n  /**\n   * Determines whether the Checkbox is in an indeterminate state\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Determines whether the Checkbox is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the Checkbox\n   */\n  label?: string;\n  /**\n   * The helper text content\n   */\n  hint?: string;\n  /**\n   * The checkbox validity, if different from its enclosing group. Defaults to \"inherit\".\n   */\n  validity?: (typeof checkboxValidityValues)[number];\n  /**\n   * The value attribute of the Checkbox\n   */\n  value?: string;\n  /**\n   * Callback fired when the blur event happens. Provides event value.\n   */\n  onBlur?: MuiFormControlLabelProps[\"onBlur\"];\n} & Pick<FieldComponentProps, \"id\" | \"isDisabled\" | \"name\"> &\n  CheckedFieldProps<MuiCheckboxProps> &\n  AllowedProps;\n\nconst Checkbox = ({\n  ariaLabel,\n  ariaLabelledBy,\n  id: idOverride,\n  inputRef,\n  isChecked,\n  isDefaultChecked,\n  isDisabled,\n  isIndeterminate,\n  isRequired,\n  label: labelProp,\n  hint,\n  name: nameOverride,\n  onChange: onChangeProp,\n  onBlur: onBlurProp,\n  testId,\n  translate,\n  validity = \"inherit\",\n  value,\n}: CheckboxProps) => {\n  const { t } = useTranslation();\n  const controlledStateRef = useRef(\n    getControlState({\n      controlledValue: isChecked,\n      uncontrolledValue: isDefaultChecked,\n    })\n  );\n  const inputValues = useMemo(() => {\n    if (controlledStateRef.current === ComponentControlledState.CONTROLLED) {\n      return { checked: isChecked };\n    }\n    return { defaultChecked: isDefaultChecked };\n  }, [isDefaultChecked, isChecked]);\n\n  const localInputRef = useRef<HTMLInputElement>(null);\n  useImperativeHandle(\n    inputRef,\n    () => {\n      return {\n        focus: () => {\n          localInputRef.current?.focus();\n        },\n      };\n    },\n    []\n  );\n\n  const label = useMemo(() => {\n    return (\n      <>\n        {labelProp}\n        {isRequired && (\n          <>\n            {\" \"}\n            <Typography component=\"span\" color=\"textSecondary\">\n              ({t(\"fieldlabel.required.text\")})\n            </Typography>\n          </>\n        )}\n        {hint && <FormHelperText translate={translate}>{hint}</FormHelperText>}\n      </>\n    );\n  }, [isRequired, labelProp, hint, t, translate]);\n\n  const onChange = useCallback<NonNullable<MuiCheckboxProps[\"onChange\"]>>(\n    (event, checked) => {\n      onChangeProp?.(event, checked);\n    },\n    [onChangeProp]\n  );\n\n  const onBlur = useCallback<NonNullable<MuiFormControlLabelProps[\"onBlur\"]>>(\n    (event) => {\n      onBlurProp?.(event);\n    },\n    [onBlurProp]\n  );\n\n  return (\n    <FormControlLabel\n      sx={{ alignItems: \"flex-start\" }}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      className={\n        validity === \"invalid\"\n          ? \"Mui-error\"\n          : validity === \"valid\"\n          ? \"Mui-valid\"\n          : \"\"\n      }\n      control={\n        <MuiCheckbox\n          {...inputValues}\n          indeterminate={isIndeterminate}\n          onChange={onChange}\n          required={isRequired}\n          inputProps={{\n            \"data-se\": testId,\n          }}\n          inputRef={localInputRef}\n          sx={() => ({\n            marginBlockStart: \"2px\",\n          })}\n        />\n      }\n      disabled={isDisabled}\n      id={idOverride}\n      label={label}\n      name={nameOverride ?? idOverride}\n      value={value}\n      required={isRequired}\n      onBlur={onBlur}\n      translate={translate}\n    />\n  );\n};\n\nconst MemoizedCheckbox = memo(Checkbox);\nMemoizedCheckbox.displayName = \"Checkbox\";\n\nexport { MemoizedCheckbox as Checkbox };\n"],"mappings":"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"}

package/dist/CheckboxGroup.js

@@ -15,6 +15,7 @@ import { Field } from "./Field.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const CheckboxGroup = _ref => {
   let {
+    ariaDescribedBy,
     children,
     errorMessage,
     errorMessageList,
@@ -45,6 +46,7 @@ const CheckboxGroup = _ref => {
     });
   }, [children, testId, translate]);
   return _jsx(Field, {
+    ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,
     errorMessageList: errorMessageList,
     fieldType: "group",

package/dist/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","jsx","_jsx","CheckboxGroup","_ref","children","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isRequired","label","testId","translate","renderFieldComponent","_ref2","ariaDescribedBy","errorMessageElementId","labelElementId","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup","displayName"],"sources":["../src/CheckboxGroup.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 { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\n\nexport type CheckboxGroupProps = {\n  /**\n   * A single Checkbox element or an array of Checkbox elements\n   */\n  children:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\n  /**\n   * If `true`, the CheckboxGroup is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the CheckboxGroup\n   */\n  label: string;\n} & Pick<\n  FieldComponentProps,\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n> &\n  AllowedProps;\n\nconst CheckboxGroup = ({\n  children,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isRequired = false,\n  label,\n  testId,\n  translate,\n}: CheckboxGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiFormGroup\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        translate={translate}\n      >\n        {children}\n      </MuiFormGroup>\n    ),\n    [children, testId, translate]\n  );\n\n  return (\n    <Field\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\nMemoizedCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAG/CC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA8Bd,MAAMC,aAAa,GAAGC,IAAA,IAYI;EAAA,IAZH;IACrBC,QAAQ;IACRC,YAAY;IACZC,gBAAgB;IAChBC,IAAI;IACJC,iBAAiB;IACjBC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,MAAM;IACNC;EACkB,CAAC,GAAAZ,IAAA;EACnB,MAAMa,oBAAoB,GAAGlB,WAAW,CACtCmB,KAAA;IAAA,IAAC;MAAEC,eAAe;MAAEC,qBAAqB;MAAEV,EAAE;MAAEW;IAAe,CAAC,GAAAH,KAAA;IAAA,OAC7DhB,IAAA,CAAAoB,UAAA;MACE,oBAAkBH,eAAgB;MAClC,qBAAmBC,qBAAsB;MACzC,mBAAiBC,cAAe;MAChC,WAASN,MAAO;MAChBL,EAAE,EAAEA,EAAG;MACPM,SAAS,EAAEA,SAAU;MAAAX,QAAA,EAEpBA;IAAQ,CACG,CAAC;EAAA,CAChB,EACD,CAACA,QAAQ,EAAEU,MAAM,EAAEC,SAAS,CAC9B,CAAC;EAED,OACEd,IAAA,CAACF,KAAK;IACJM,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCgB,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBhB,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBa,UAAU,EAAE,CAACZ,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbG,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMS,qBAAqB,GAAG5B,IAAI,CAACK,aAAa,CAAC;AACjDuB,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIvB,aAAa"}
+{"version":3,"file":"CheckboxGroup.js","names":["memo","useCallback","Field","jsx","_jsx","CheckboxGroup","_ref","ariaDescribedBy","children","errorMessage","errorMessageList","hint","HintLinkComponent","id","idOverride","isDisabled","isRequired","label","testId","translate","renderFieldComponent","_ref2","errorMessageElementId","labelElementId","_FormGroup","fieldType","hasVisibleLabel","isOptional","MemoizedCheckboxGroup","displayName"],"sources":["../src/CheckboxGroup.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 { FormGroup as MuiFormGroup } from \"@mui/material\";\nimport { memo, ReactElement, useCallback } from \"react\";\n\nimport { Checkbox } from \"./Checkbox\";\nimport { Field } from \"./Field\";\nimport { FieldComponentProps } from \"./FieldComponentProps\";\nimport type { AllowedProps } from \"./AllowedProps\";\n\nexport type CheckboxGroupProps = {\n  /**\n   * A single Checkbox element or an array of Checkbox elements\n   */\n  children:\n    | ReactElement<typeof Checkbox>\n    | Array<ReactElement<typeof Checkbox>>;\n  /**\n   * If `true`, the CheckboxGroup is required\n   */\n  isRequired?: boolean;\n  /**\n   * The label text for the CheckboxGroup\n   */\n  label: string;\n} & Pick<\n  FieldComponentProps,\n  | \"ariaDescribedBy\"\n  | \"errorMessage\"\n  | \"errorMessageList\"\n  | \"hint\"\n  | \"HintLinkComponent\"\n  | \"id\"\n  | \"isDisabled\"\n> &\n  AllowedProps;\n\nconst CheckboxGroup = ({\n  ariaDescribedBy,\n  children,\n  errorMessage,\n  errorMessageList,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled,\n  isRequired = false,\n  label,\n  testId,\n  translate,\n}: CheckboxGroupProps) => {\n  const renderFieldComponent = useCallback(\n    ({ ariaDescribedBy, errorMessageElementId, id, labelElementId }) => (\n      <MuiFormGroup\n        aria-describedby={ariaDescribedBy}\n        aria-errormessage={errorMessageElementId}\n        aria-labelledby={labelElementId}\n        data-se={testId}\n        id={id}\n        translate={translate}\n      >\n        {children}\n      </MuiFormGroup>\n    ),\n    [children, testId, translate]\n  );\n\n  return (\n    <Field\n      ariaDescribedBy={ariaDescribedBy}\n      errorMessage={errorMessage}\n      errorMessageList={errorMessageList}\n      fieldType=\"group\"\n      hasVisibleLabel={true}\n      hint={hint}\n      HintLinkComponent={HintLinkComponent}\n      id={idOverride}\n      isDisabled={isDisabled}\n      isOptional={!isRequired}\n      label={label}\n      renderFieldComponent={renderFieldComponent}\n    />\n  );\n};\n\nconst MemoizedCheckboxGroup = memo(CheckboxGroup);\nMemoizedCheckboxGroup.displayName = \"CheckboxGroup\";\n\nexport { MemoizedCheckboxGroup as CheckboxGroup };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAGA,SAASA,IAAI,EAAgBC,WAAW,QAAQ,OAAO;AAAC,SAG/CC,KAAK;AAAA,SAAAC,GAAA,IAAAC,IAAA;AA+Bd,MAAMC,aAAa,GAAGC,IAAA,IAaI;EAAA,IAbH;IACrBC,eAAe;IACfC,QAAQ;IACRC,YAAY;IACZC,gBAAgB;IAChBC,IAAI;IACJC,iBAAiB;IACjBC,EAAE,EAAEC,UAAU;IACdC,UAAU;IACVC,UAAU,GAAG,KAAK;IAClBC,KAAK;IACLC,MAAM;IACNC;EACkB,CAAC,GAAAb,IAAA;EACnB,MAAMc,oBAAoB,GAAGnB,WAAW,CACtCoB,KAAA;IAAA,IAAC;MAAEd,eAAe;MAAEe,qBAAqB;MAAET,EAAE;MAAEU;IAAe,CAAC,GAAAF,KAAA;IAAA,OAC7DjB,IAAA,CAAAoB,UAAA;MACE,oBAAkBjB,eAAgB;MAClC,qBAAmBe,qBAAsB;MACzC,mBAAiBC,cAAe;MAChC,WAASL,MAAO;MAChBL,EAAE,EAAEA,EAAG;MACPM,SAAS,EAAEA,SAAU;MAAAX,QAAA,EAEpBA;IAAQ,CACG,CAAC;EAAA,CAChB,EACD,CAACA,QAAQ,EAAEU,MAAM,EAAEC,SAAS,CAC9B,CAAC;EAED,OACEf,IAAA,CAACF,KAAK;IACJK,eAAe,EAAEA,eAAgB;IACjCE,YAAY,EAAEA,YAAa;IAC3BC,gBAAgB,EAAEA,gBAAiB;IACnCe,SAAS,EAAC,OAAO;IACjBC,eAAe,EAAE,IAAK;IACtBf,IAAI,EAAEA,IAAK;IACXC,iBAAiB,EAAEA,iBAAkB;IACrCC,EAAE,EAAEC,UAAW;IACfC,UAAU,EAAEA,UAAW;IACvBY,UAAU,EAAE,CAACX,UAAW;IACxBC,KAAK,EAAEA,KAAM;IACbG,oBAAoB,EAAEA;EAAqB,CAC5C,CAAC;AAEN,CAAC;AAED,MAAMQ,qBAAqB,GAAG5B,IAAI,CAACK,aAAa,CAAC;AACjDuB,qBAAqB,CAACC,WAAW,GAAG,eAAe;AAEnD,SAASD,qBAAqB,IAAIvB,aAAa"}

package/dist/Field.js

@@ -25,6 +25,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export const fieldTypeValues = ["single", "group"];
 const Field = _ref => {
   let {
+    ariaDescribedBy,
     errorMessage,
     errorMessageList,
     fieldType,
@@ -46,7 +47,7 @@ const Field = _ref => {
   const hintId = hint ? `${id}-hint` : undefined;
   const errorMessageElementId = errorMessage || errorMessageList ? `${id}-error` : undefined;
   const labelElementId = `${id}-label`;
-  const ariaDescribedBy = useMemo(() => [hintId, errorMessageElementId].join(" ").trim() || undefined, [errorMessageElementId, hintId]);
+  const localAriaDescribedBy = useMemo(() => [hintId, errorMessageElementId, ariaDescribedBy].join(" ").trim() || undefined, [ariaDescribedBy, errorMessageElementId, hintId]);
   const {
     isDisabled: isFieldsetDisabled
   } = useFieldset();
@@ -75,7 +76,7 @@ const Field = _ref => {
       LinkComponent: HintLinkComponent,
       text: hint
     }), renderFieldComponent({
-      ariaDescribedBy,
+      ariaDescribedBy: localAriaDescribedBy,
       errorMessageElementId,
       id,
       labelElementId

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","errorMessageList","fieldType","hasVisibleLabel","hint","HintLinkComponent","id","idOverride","isDisabled","isDisabledProp","isFullWidth","isRadioGroup","isOptional","label","renderFieldComponent","t","hintId","undefined","errorMessageElementId","labelElementId","ariaDescribedBy","join","trim","isFieldsetDisabled","_FormControl","component","disabled","error","Boolean","Array","isArray","length","role","fullWidth","children","_FormLabel","color","inputId","text","LinkComponent","message","messageList","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\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\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   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessageList?: 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   * 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   * 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  errorMessageList,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled: isDisabledProp = false,\n  isFullWidth = false,\n  isRadioGroup = false,\n  isOptional = false,\n  label,\n  renderFieldComponent,\n}: FieldProps &\n  Pick<\n    FieldComponentProps,\n    | \"errorMessage\"\n    | \"errorMessageList\"\n    | \"hint\"\n    | \"HintLinkComponent\"\n    | \"id\"\n    | \"isDisabled\"\n    | \"isFullWidth\"\n    | \"isOptional\"\n  >) => {\n  const { t } = useTranslation();\n\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorMessageElementId =\n    errorMessage || errorMessageList ? `${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={\n        Boolean(errorMessage) ||\n        (Array.isArray(errorMessageList) && errorMessageList.length > 0)\n      }\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 && (\n        <FieldHint id={hintId} LinkComponent={HintLinkComponent} text={hint} />\n      )}\n\n      {renderFieldComponent({\n        ariaDescribedBy,\n        errorMessageElementId,\n        id,\n        labelElementId,\n      })}\n\n      {(errorMessage || errorMessageList) && (\n        <FieldError\n          id={errorMessageElementId}\n          message={errorMessage}\n          messageList={errorMessageList}\n        />\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","ariaDescribedBy","errorMessage","errorMessageList","fieldType","hasVisibleLabel","hint","HintLinkComponent","id","idOverride","isDisabled","isDisabledProp","isFullWidth","isRadioGroup","isOptional","label","renderFieldComponent","t","hintId","undefined","errorMessageElementId","labelElementId","localAriaDescribedBy","join","trim","isFieldsetDisabled","_FormControl","component","disabled","error","Boolean","Array","isArray","length","role","fullWidth","children","_FormLabel","color","inputId","text","LinkComponent","message","messageList","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\";\n\nimport { FieldComponentProps } from \"./FieldComponentProps\";\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   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessageList?: 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   * 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   * 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  ariaDescribedBy,\n  errorMessage,\n  errorMessageList,\n  fieldType,\n  hasVisibleLabel,\n  hint,\n  HintLinkComponent,\n  id: idOverride,\n  isDisabled: isDisabledProp = false,\n  isFullWidth = false,\n  isRadioGroup = false,\n  isOptional = false,\n  label,\n  renderFieldComponent,\n}: FieldProps &\n  Pick<\n    FieldComponentProps,\n    | \"ariaDescribedBy\"\n    | \"errorMessage\"\n    | \"errorMessageList\"\n    | \"hint\"\n    | \"HintLinkComponent\"\n    | \"id\"\n    | \"isDisabled\"\n    | \"isFullWidth\"\n    | \"isOptional\"\n  >) => {\n  const { t } = useTranslation();\n\n  const id = useUniqueId(idOverride);\n  const hintId = hint ? `${id}-hint` : undefined;\n  const errorMessageElementId =\n    errorMessage || errorMessageList ? `${id}-error` : undefined;\n  const labelElementId = `${id}-label`;\n\n  const localAriaDescribedBy = useMemo(\n    () =>\n      [hintId, errorMessageElementId, ariaDescribedBy].join(\" \").trim() ||\n      undefined,\n    [ariaDescribedBy, 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={\n        Boolean(errorMessage) ||\n        (Array.isArray(errorMessageList) && errorMessageList.length > 0)\n      }\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 && (\n        <FieldHint id={hintId} LinkComponent={HintLinkComponent} text={hint} />\n      )}\n\n      {renderFieldComponent({\n        ariaDescribedBy: localAriaDescribedBy,\n        errorMessageElementId,\n        id,\n        labelElementId,\n      })}\n\n      {(errorMessage || errorMessageList) && (\n        <FieldError\n          id={errorMessageElementId}\n          message={errorMessage}\n          messageList={errorMessageList}\n        />\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\nimport { ReactElement } from \"react\";\n\nimport { HintLink } from \"./HintLink\";\n\nexport type FieldComponentProps = {\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `error` is not undefined, the `input` will indicate multiple errors.\n   */\n  errorMessageList?: string[];\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * A `Link` component to provide greater context that is rendered at the end of the `hint` text\n   */\n  HintLinkComponent?: ReactElement<typeof HintLink>;\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":""}
+{"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\nimport { ReactElement } from \"react\";\n\nimport { HintLink } from \"./HintLink\";\n\nexport type FieldComponentProps = {\n  /**\n   * The ID of the element that describes the Field\n   */\n  ariaDescribedBy?: string;\n  /**\n   * If `error` is not undefined, the `input` will indicate an error.\n   */\n  errorMessage?: string;\n  /**\n   * If `error` is not undefined, the `input` will indicate multiple errors.\n   */\n  errorMessageList?: string[];\n  /**\n   * The helper text content.\n   */\n  hint?: string;\n  /**\n   * A `Link` component to provide greater context that is rendered at the end of the `hint` text\n   */\n  HintLinkComponent?: ReactElement<typeof HintLink>;\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/Link.js

@@ -21,7 +21,7 @@ const Link = _ref => {
     children,
     href,
     icon,
-    linkFocusRef,
+    linkRef,
     rel,
     target,
     testId,
@@ -29,19 +29,18 @@ const Link = _ref => {
     variant,
     onClick
   } = _ref;
-  const ref = useRef(null);
-  useImperativeHandle(linkFocusRef, () => {
-    const element = ref.current;
+  const localLinkRef = useRef(null);
+  useImperativeHandle(linkRef, () => {
     return {
       focus: () => {
-        element && element.focus();
+        localLinkRef.current?.focus();
       }
     };
   }, []);
   return _jsxs(_Link, {
     "data-se": testId,
     href: href,
-    ref: ref,
+    ref: localLinkRef,
     rel: rel,
     target: target,
     translate: translate,

package/dist/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["memo","useImperativeHandle","useRef","ExternalLinkIcon","jsx","_jsx","jsxs","_jsxs","linkVariantValues","Link","_ref","children","href","icon","linkFocusRef","rel","target","testId","translate","variant","onClick","ref","element","current","focus","_Link","className","role","MemoizedLink","displayName"],"sources":["../src/Link.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useImperativeHandle, useRef } from \"react\";\nimport { ExternalLinkIcon } from \"./icons.generated\";\nimport type { AllowedProps } from \"./AllowedProps\";\n\nimport { Link as MuiLink, LinkProps as MuiLinkProps } from \"@mui/material\";\nimport { FocusHandle } from \"./@types/react-augment\";\n\nexport const linkVariantValues = [\"default\", \"monochrome\"] as const;\n\nexport type LinkProps = {\n  /**\n   * The content within the Link\n   */\n  children: React.ReactNode;\n  /**\n   * The Link destination\n   */\n  href: string;\n  /**\n   * An optional Icon component at the start of the Link\n   */\n  icon?: ReactElement;\n  /**\n   * The ref forwarded to the TextField to expose focus()\n   */\n  linkFocusRef?: React.RefObject<FocusHandle>;\n  /**\n   * The click event handler for the Link\n   */\n  onClick?: MuiLinkProps[\"onClick\"];\n  /**\n   * The HTML `rel` attribute for the Link\n   */\n  rel?: string;\n  /**\n   * The HTML `target` attribute for the Link\n   */\n  target?:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | (string & NonNullable<unknown>);\n  /**\n   * The visual presentation of the Link (default or monochrome)\n   */\n  variant?: (typeof linkVariantValues)[number];\n} & AllowedProps;\n\nconst Link = ({\n  children,\n  href,\n  icon,\n  linkFocusRef,\n  rel,\n  target,\n  testId,\n  translate,\n  variant,\n  onClick,\n}: LinkProps) => {\n  const ref = useRef<HTMLAnchorElement>(null);\n  useImperativeHandle(\n    linkFocusRef,\n    () => {\n      const element = ref.current;\n      return {\n        focus: () => {\n          element && element.focus();\n        },\n      };\n    },\n    []\n  );\n\n  return (\n    <MuiLink\n      data-se={testId}\n      href={href}\n      ref={ref}\n      rel={rel}\n      target={target}\n      translate={translate}\n      variant={variant}\n      onClick={onClick}\n    >\n      {icon && <span className=\"Link-icon\">{icon}</span>}\n\n      {children}\n\n      {target === \"_blank\" && (\n        <span className=\"Link-indicator\" role=\"presentation\">\n          <ExternalLinkIcon />\n        </span>\n      )}\n    </MuiLink>\n  );\n};\n\nconst MemoizedLink = memo(Link);\n\nMemoizedLink.displayName = \"Link\";\n\nexport { MemoizedLink as Link };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAgBC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAC/DC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMzB,OAAO,MAAMC,iBAAiB,GAAG,CAAC,SAAS,EAAE,YAAY,CAAU;AA0CnE,MAAMC,IAAI,GAAGC,IAAA,IAWI;EAAA,IAXH;IACZC,QAAQ;IACRC,IAAI;IACJC,IAAI;IACJC,YAAY;IACZC,GAAG;IACHC,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,OAAO;IACPC;EACS,CAAC,GAAAV,IAAA;EACV,MAAMW,GAAG,GAAGnB,MAAM,CAAoB,IAAI,CAAC;EAC3CD,mBAAmB,CACjBa,YAAY,EACZ,MAAM;IACJ,MAAMQ,OAAO,GAAGD,GAAG,CAACE,OAAO;IAC3B,OAAO;MACLC,KAAK,EAAEA,CAAA,KAAM;QACXF,OAAO,IAAIA,OAAO,CAACE,KAAK,CAAC,CAAC;MAC5B;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,OACEjB,KAAA,CAAAkB,KAAA;IACE,WAASR,MAAO;IAChBL,IAAI,EAAEA,IAAK;IACXS,GAAG,EAAEA,GAAI;IACTN,GAAG,EAAEA,GAAI;IACTC,MAAM,EAAEA,MAAO;IACfE,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IAAAT,QAAA,GAEhBE,IAAI,IAAIR,IAAA;MAAMqB,SAAS,EAAC,WAAW;MAAAf,QAAA,EAAEE;IAAI,CAAO,CAAC,EAEjDF,QAAQ,EAERK,MAAM,KAAK,QAAQ,IAClBX,IAAA;MAAMqB,SAAS,EAAC,gBAAgB;MAACC,IAAI,EAAC,cAAc;MAAAhB,QAAA,EAClDN,IAAA,CAACF,gBAAgB,IAAE;IAAC,CAChB,CACP;EAAA,CACM,CAAC;AAEd,CAAC;AAED,MAAMyB,YAAY,GAAG5B,IAAI,CAACS,IAAI,CAAC;AAE/BmB,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAInB,IAAI"}
+{"version":3,"file":"Link.js","names":["memo","useImperativeHandle","useRef","ExternalLinkIcon","jsx","_jsx","jsxs","_jsxs","linkVariantValues","Link","_ref","children","href","icon","linkRef","rel","target","testId","translate","variant","onClick","localLinkRef","focus","current","_Link","ref","className","role","MemoizedLink","displayName"],"sources":["../src/Link.tsx"],"sourcesContent":["/*!\n * Copyright (c) 2022-present, Okta, Inc. and/or its affiliates. All rights reserved.\n * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the \"License.\")\n *\n * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n *\n * See the License for the specific language governing permissions and limitations under the License.\n */\n\nimport { memo, ReactElement, useImperativeHandle, useRef } from \"react\";\nimport { ExternalLinkIcon } from \"./icons.generated\";\nimport type { AllowedProps } from \"./AllowedProps\";\nimport { FocusHandle } from \"./inputUtils\";\n\nimport { Link as MuiLink, LinkProps as MuiLinkProps } from \"@mui/material\";\n\nexport const linkVariantValues = [\"default\", \"monochrome\"] as const;\n\nexport type LinkProps = {\n  /**\n   * The content within the Link\n   */\n  children: React.ReactNode;\n  /**\n   * The Link destination\n   */\n  href: string;\n  /**\n   * An optional Icon component at the start of the Link\n   */\n  icon?: ReactElement;\n  /**\n   * The ref forwarded to the TextField\n   */\n  linkRef?: React.RefObject<FocusHandle>;\n  /**\n   * The click event handler for the Link\n   */\n  onClick?: MuiLinkProps[\"onClick\"];\n  /**\n   * The HTML `rel` attribute for the Link\n   */\n  rel?: string;\n  /**\n   * The HTML `target` attribute for the Link\n   */\n  target?:\n    | \"_self\"\n    | \"_blank\"\n    | \"_parent\"\n    | \"_top\"\n    | (string & NonNullable<unknown>);\n  /**\n   * The visual presentation of the Link (default or monochrome)\n   */\n  variant?: (typeof linkVariantValues)[number];\n} & AllowedProps;\n\nconst Link = ({\n  children,\n  href,\n  icon,\n  linkRef,\n  rel,\n  target,\n  testId,\n  translate,\n  variant,\n  onClick,\n}: LinkProps) => {\n  const localLinkRef = useRef<HTMLAnchorElement>(null);\n  useImperativeHandle(\n    linkRef,\n    () => {\n      return {\n        focus: () => {\n          localLinkRef.current?.focus();\n        },\n      };\n    },\n    []\n  );\n\n  return (\n    <MuiLink\n      data-se={testId}\n      href={href}\n      ref={localLinkRef}\n      rel={rel}\n      target={target}\n      translate={translate}\n      variant={variant}\n      onClick={onClick}\n    >\n      {icon && <span className=\"Link-icon\">{icon}</span>}\n\n      {children}\n\n      {target === \"_blank\" && (\n        <span className=\"Link-indicator\" role=\"presentation\">\n          <ExternalLinkIcon />\n        </span>\n      )}\n    </MuiLink>\n  );\n};\n\nconst MemoizedLink = memo(Link);\n\nMemoizedLink.displayName = \"Link\";\n\nexport { MemoizedLink as Link };\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,EAAgBC,mBAAmB,EAAEC,MAAM,QAAQ,OAAO;AAAC,SAC/DC,gBAAgB;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAMzB,OAAO,MAAMC,iBAAiB,GAAG,CAAC,SAAS,EAAE,YAAY,CAAU;AA0CnE,MAAMC,IAAI,GAAGC,IAAA,IAWI;EAAA,IAXH;IACZC,QAAQ;IACRC,IAAI;IACJC,IAAI;IACJC,OAAO;IACPC,GAAG;IACHC,MAAM;IACNC,MAAM;IACNC,SAAS;IACTC,OAAO;IACPC;EACS,CAAC,GAAAV,IAAA;EACV,MAAMW,YAAY,GAAGnB,MAAM,CAAoB,IAAI,CAAC;EACpDD,mBAAmB,CACjBa,OAAO,EACP,MAAM;IACJ,OAAO;MACLQ,KAAK,EAAEA,CAAA,KAAM;QACXD,YAAY,CAACE,OAAO,EAAED,KAAK,CAAC,CAAC;MAC/B;IACF,CAAC;EACH,CAAC,EACD,EACF,CAAC;EAED,OACEf,KAAA,CAAAiB,KAAA;IACE,WAASP,MAAO;IAChBL,IAAI,EAAEA,IAAK;IACXa,GAAG,EAAEJ,YAAa;IAClBN,GAAG,EAAEA,GAAI;IACTC,MAAM,EAAEA,MAAO;IACfE,SAAS,EAAEA,SAAU;IACrBC,OAAO,EAAEA,OAAQ;IACjBC,OAAO,EAAEA,OAAQ;IAAAT,QAAA,GAEhBE,IAAI,IAAIR,IAAA;MAAMqB,SAAS,EAAC,WAAW;MAAAf,QAAA,EAAEE;IAAI,CAAO,CAAC,EAEjDF,QAAQ,EAERK,MAAM,KAAK,QAAQ,IAClBX,IAAA;MAAMqB,SAAS,EAAC,gBAAgB;MAACC,IAAI,EAAC,cAAc;MAAAhB,QAAA,EAClDN,IAAA,CAACF,gBAAgB,IAAE;IAAC,CAChB,CACP;EAAA,CACM,CAAC;AAEd,CAAC;AAED,MAAMyB,YAAY,GAAG5B,IAAI,CAACS,IAAI,CAAC;AAE/BmB,YAAY,CAACC,WAAW,GAAG,MAAM;AAEjC,SAASD,YAAY,IAAInB,IAAI"}

package/dist/NativeSelect.js

@@ -11,12 +11,14 @@ import _Select from "@mui/material/Select";
  * See the License for the specific language governing permissions and limitations under the License.
  */
 
-import React, { forwardRef, memo, useCallback, useMemo, useRef } from "react";
+import React, { forwardRef, memo, useCallback, useImperativeHandle, useMemo, useRef } from "react";
 import { Field } from "./Field.js";
 import { getControlState, useInputValues } from "./inputUtils.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const NativeSelect = forwardRef((_ref, ref) => {
   let {
+    ariaDescribedBy,
+    autoCompleteType,
     defaultValue,
     errorMessage,
     errorMessageList,
@@ -24,6 +26,7 @@ const NativeSelect = forwardRef((_ref, ref) => {
     hint,
     HintLinkComponent,
     id: idOverride,
+    inputRef,
     isDisabled = false,
     isFullWidth = false,
     isMultiSelect,
@@ -41,6 +44,14 @@ const NativeSelect = forwardRef((_ref, ref) => {
     controlledValue: value,
     uncontrolledValue: defaultValue
   }));
+  const localInputRef = useRef(null);
+  useImperativeHandle(inputRef, () => {
+    return {
+      focus: () => {
+        localInputRef.current?.focus();
+      }
+    };
+  }, []);
   const inputValues = useInputValues({
     defaultValue,
     value,
@@ -59,13 +70,15 @@ const NativeSelect = forwardRef((_ref, ref) => {
     return _jsx(_Select, {
       ...inputValues,
       "aria-describedby": ariaDescribedBy,
+      autoComplete: autoCompleteType,
       children: children,
-      "data-se": testId,
       id: idOverride,
       inputProps: {
         "aria-errormessage": errorMessageElementId,
-        "aria-labelledby": labelElementId
+        "aria-labelledby": labelElementId,
+        "data-se": testId
       },
+      inputRef: localInputRef,
       name: idOverride,
       multiple: hasMultipleChoices,
       native: true,
@@ -75,8 +88,9 @@ const NativeSelect = forwardRef((_ref, ref) => {
       ref: ref,
       translate: translate
     });
-  }, [children, idOverride, inputValues, hasMultipleChoices, onBlur, onChange, onFocus, ref, testId, translate]);
+  }, [autoCompleteType, children, idOverride, inputValues, hasMultipleChoices, onBlur, onChange, onFocus, ref, testId, translate]);
   return _jsx(Field, {
+    ariaDescribedBy: ariaDescribedBy,
     errorMessage: errorMessage,
     errorMessageList: errorMessageList,
     fieldType: "single",